:root{color-scheme:dark;--bg:#080b14;--panel:#151a27;--edge:#8290a8;--ink:#f4f6ff;--muted:#a8b0c2;--accent:#6be08a;--purple:#7554d8;--felt:#0e3b28;--gap:9px;font-family:"Courier New",ui-monospace,monospace}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;color:var(--ink);background:#05070c;background-image:linear-gradient(rgba(107,224,138,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(107,224,138,.035) 1px,transparent 1px),radial-gradient(circle at 25% 10%,#123322 0,transparent 40%);background-size:24px 24px,24px 24px,auto}
.desktop{min-height:100svh;display:grid;place-items:center;padding:22px}
.window{width:min(860px,100%);background:var(--panel);border:2px solid;border-color:#aab4c5 #32394a #32394a #aab4c5;box-shadow:10px 10px 0 rgba(0,0,0,.55),0 0 50px rgba(107,224,138,.12)}
.titlebar{height:38px;display:flex;align-items:center;justify-content:space-between;padding:4px 5px 4px 9px;background:linear-gradient(90deg,#173c2a,#593384);font-weight:700;letter-spacing:.02em}
.app-title{display:flex;align-items:center;gap:9px}
.mini-icon{display:grid;place-items:center;width:23px;height:23px;color:#06101b;background:var(--accent);border:1px outset #fff}
.controls{display:flex;gap:3px}
.controls span{display:grid;place-items:center;width:27px;height:25px;color:#090c14;background:#bac2d2;border:2px outset #eef2f7;font-family:Arial,sans-serif}
.controls span:last-child{background:#e65a70;color:white}
.menubar{height:31px;display:flex;align-items:center;gap:23px;padding:0 12px;border-bottom:1px solid #424b60;background:#171d2b;color:#cbd2df;font-size:13px}
.menubar span:first-letter,.menubar a:first-letter{text-decoration:underline}
.menubar a{margin-left:auto;color:#9de5ff;text-decoration:none}
.content{padding:22px}
.game-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.eyebrow{color:var(--accent);font-size:12px;letter-spacing:.18em}
.game-header h1{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(30px,8vw,60px);line-height:.9;letter-spacing:2px;margin:6px 0 8px;color:#f5f7ff;text-shadow:4px 4px 0 #173c2a}
.game-header p{margin:0;color:var(--muted);font-size:13px;max-width:360px}
.scores{display:flex;gap:8px}
.scorebox{min-width:72px;text-align:center;padding:8px 9px;background:#090d16;border:2px inset #737d91}
.scorebox span{display:block;font-size:9px;color:var(--muted);letter-spacing:.1em}
.scorebox strong{display:block;margin-top:5px;color:#ffd56a;font-size:18px}
.toolbar{display:flex;align-items:center;justify-content:space-between;margin:16px 0 12px;flex-wrap:wrap;gap:8px}
.toolbar button,.message button{font:700 13px "Courier New",monospace;padding:9px 14px;color:#0b1020;background:#9cffb9;border:2px outset #d7ffe4;cursor:pointer}
.toolbar button:active,.message button:active{border-style:inset;transform:translate(1px,1px)}
.hint{font-size:11px;color:var(--muted)}
.board-wrap{position:relative}
.table{container-type:inline-size;background:var(--felt);border:3px inset #6c768a;padding:12px;display:flex;flex-direction:column;gap:14px}
.top-row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--gap)}
.stock-area{grid-column:1/3;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.foundations{grid-column:4/8;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.pile{position:relative;width:100%;aspect-ratio:5/7;border-radius:4px}
.card-slot{width:100%;aspect-ratio:5/7;border:2px dashed rgba(255,255,255,.25);border-radius:4px;background:rgba(0,0,0,.15)}
.stock{background:rgba(0,0,0,.15);border:2px solid #2d3546;cursor:pointer;color:#cbd2df;font-size:clamp(8px,2.6cqw,11px);padding:0}
.stock.empty::after{content:"↺";font-size:clamp(14px,5cqw,22px);color:var(--accent)}
.waste{background:transparent}
.foundations .card-slot{color:rgba(255,255,255,.35);display:grid;place-items:center;font-size:clamp(15px,5.4cqw,24px);font-weight:800}
.tableau{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--gap)}
.column{position:relative;width:100%}
.column .card-slot{position:absolute;top:0;left:0;width:100%}
.card{position:absolute;left:0;top:0;width:100%;aspect-ratio:5/7;border-radius:4px;background:#f4f6ff;border:2px solid #1b1f2b;box-shadow:2px 3px 0 rgba(0,0,0,.4);display:flex;flex-direction:column;justify-content:space-between;padding:5% 6%;font-weight:800;user-select:none;cursor:pointer;transition:filter .1s}
.card.suit-s,.card.suit-c{color:#0d0f16}
.card.suit-h,.card.suit-d{color:#0f5fd8}
.card .rank{font-size:clamp(12px,4.6cqw,22px);line-height:1}
.card .suit{font-size:clamp(13px,5cqw,23px);align-self:flex-end}
.card.face-down{background:repeating-linear-gradient(45deg,#1c2f6e,#1c2f6e 7px,#2b1f5e 7px,#2b1f5e 14px);border:2px solid var(--accent);cursor:default;box-shadow:inset 0 0 0 3px #0b1230,2px 3px 0 rgba(0,0,0,.4)}
.card.draggable:hover{filter:brightness(1.08)}
.card.selected{outline:3px solid var(--accent);z-index:5}
.card.drag-ghost{opacity:.35}
.message{position:absolute;inset:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-align:center;background:rgba(7,10,17,.93);border:2px solid var(--accent);backdrop-filter:blur(3px)}
.message[hidden]{display:none}
.message strong{font-size:clamp(24px,7vw,44px);color:#ffd56a;text-shadow:3px 3px #173c2a}
.message span{color:#c3ccdc}
.statusbar{display:flex;gap:5px;padding:5px;background:#111622}
.statusbar span{flex:1;padding:4px 7px;border:1px inset #4e586b;color:#9ca7ba;font-size:11px}
.statusbar span:last-child{flex:0 0 auto}
@media(max-width:760px){
  :root{--gap:6px}
  .desktop{padding:8px}
  .window{box-shadow:5px 5px 0 rgba(0,0,0,.55)}
  .content{padding:12px 8px}
  .game-header p{display:none}
  .game-header{align-items:flex-end}
  .scores{flex-direction:column;gap:5px}
  .scorebox{min-width:64px;padding:5px 7px}
  .scorebox strong{font-size:15px}
  .toolbar{margin:12px 0 9px}
  .hint{display:none}
  .table{padding:8px}
  .menubar{gap:14px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}