/* Pasianssimoottori — oma, mobiili-first. Kortit = DOM, koko skaalautuu ruudun leveyteen
   (ei ylivuotoa). green-felt teema (sama kuin Astro-kuori). Pointer Events + tap-to-move. */
:root{
  --felt:#0f3d24; --felt2:#15522f; --ink:#16241b; --red:#b3201f; --gold:#E3B341;
  --cardbg:#fbfaf5; --line:rgba(0,0,0,.25);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(120% 90% at 50% -10%, #1a6b3e 0%, var(--felt) 58%, #0a2d1a 100%);
  font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#F3F1E7; user-select:none; -webkit-user-select:none; overflow-x:hidden;
  touch-action:manipulation;
}
#bar{
  display:flex; align-items:center; gap:8px; padding:7px 10px; flex-wrap:wrap;
  position:sticky; top:0; z-index:30; background:rgba(10,38,24,.72); backdrop-filter:blur(6px);
}
#bar button{
  font:inherit; font-weight:700; color:var(--felt); background:linear-gradient(#fff,#e7e7df);
  border:1px solid rgba(0,0,0,.3); border-radius:9px; padding:8px 12px; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
#bar button:active{transform:translateY(1px)}
#bar #b-undo[disabled]{opacity:.45; cursor:default}
#status{margin-left:auto; font-size:12.5px; color:#bfd3c4; font-weight:600}

#board{position:relative; width:100%; margin:0 auto; touch-action:none}

/* pile slot (empty placeholder) */
.slot{
  position:absolute; border:1.5px solid rgba(255,255,255,.28); border-radius:7px;
  background:rgba(0,0,0,.10);
}
.slot.foundation{border-color:rgba(227,179,65,.5)}
.slot.cell{border-color:rgba(120,180,255,.45); background:rgba(120,180,255,.07)}
.slot .ghost{position:absolute; inset:0; display:grid; place-items:center; font-size:1.6em; color:rgba(255,255,255,.22)}

/* card */
.card{
  position:absolute; border-radius:7px; background:var(--cardbg); color:var(--ink);
  border:1px solid var(--line); box-shadow:0 1px 2px rgba(0,0,0,.28);
  overflow:hidden; will-change:left,top,transform; touch-action:none;
}
.card.red{color:var(--red)}
.card .corner{position:absolute; font-weight:800; line-height:1; letter-spacing:-.04em}
.card .tl{top:5%; left:7%}
.card .br{bottom:5%; right:7%; transform:rotate(180deg)}
.card .pip{position:absolute; inset:0; display:grid; place-items:center; opacity:.92}
.card.court .pip{font-size:.92em}
.card.down{
  background:repeating-linear-gradient(45deg,#2b4b86 0 7px,#24407a 7px 14px);
  border-color:#1c3360;
}
.card.down .corner,.card.down .pip{display:none}
.card.sel{outline:3px solid var(--gold); outline-offset:-1px; box-shadow:0 0 10px 3px rgba(227,179,65,.7)}
.card.hint{outline:3px solid #7fe08a; outline-offset:-1px; box-shadow:0 0 9px 2px rgba(127,224,138,.65)}
.slot.hint{outline:3px solid #7fe08a; outline-offset:-1px; box-shadow:0 0 9px 2px rgba(127,224,138,.5)}
/* Vihje-nappi: pulssaa pelattavat kortit (mitä voit liikuttaa) — eri kuin staattinen kohde-vihje */
@keyframes tippulse{0%,100%{outline-color:rgba(127,224,138,.4);box-shadow:0 0 0 0 rgba(127,224,138,0)}50%{outline-color:rgba(127,224,138,1);box-shadow:0 0 13px 3px rgba(127,224,138,.8)}}
.card.tip{outline:3px solid #7fe08a; outline-offset:-1px; animation:tippulse 1s ease-in-out infinite}
.card.dragging{box-shadow:0 8px 22px rgba(0,0,0,.45); z-index:9999!important; transition:none!important}
.card.moving{transition:left .16s ease, top .16s ease}

#win{position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:rgba(8,30,18,.78)}
#win[hidden]{display:none}
.win-box{background:#0c3320; border:1px solid var(--gold); border-radius:14px; padding:26px 30px; text-align:center}
.win-msg{font-size:1.5rem; font-weight:800; margin:0 0 14px; color:#fff}
.win-box button{font:inherit; font-weight:700; color:var(--felt); background:var(--gold); border:0; border-radius:10px; padding:11px 18px; cursor:pointer}