:root{color-scheme:dark;--cream:#f6f0df;--muted:#9db9ac;--gold:#e4c889;--card-w:clamp(39px,10.3vw,112px);--card-h:calc(var(--card-w)*1.43);--gap:clamp(6px,1.8vw,24px);--step:clamp(24px,3.7vw,39px)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 5%,#28594a 0,#17483e 42%,#0c302d 100%);color:var(--cream);font-family:'DM Sans',sans-serif}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.35' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.game-shell{position:relative;max-width:1080px;margin:auto;padding:42px 40px 20px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}.brand{display:flex;gap:19px;align-items:center}.brand-mark{font-size:48px;color:var(--gold)}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.8px;color:var(--gold);margin:0 0 8px}h1{font-family:'Playfair Display',Georgia,serif;font-size:34px;font-weight:500;margin:0;letter-spacing:-1px}h1 em{font-weight:500;color:#ded5b8}.icon-button{width:32px;height:32px;border-radius:50%;padding:0;font-family:Georgia,serif;font-size:18px}.toolbar{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff16;border-bottom:1px solid #ffffff16;padding:18px 0;margin-bottom:34px}.stats{display:flex;gap:35px}.stats div{display:flex;flex-direction:column;gap:5px}.stats span{font-size:9px;letter-spacing:2px;color:var(--muted)}.stats strong{font-size:19px;font-weight:500;font-variant-numeric:tabular-nums}.actions{display:flex;gap:9px}button{border:1px solid #ffffff24;background:#ffffff06;border-radius:7px;padding:10px 15px;color:var(--cream);font:500 12px 'DM Sans',sans-serif;cursor:pointer;transition:background .18s,transform .18s}button:hover{background:#ffffff13}button:active{transform:translateY(1px)}button:disabled{opacity:.3;cursor:default}.primary{background:var(--gold);color:#213f33;border-color:var(--gold);font-weight:700}.primary:hover{background:#f3dca7}.table{max-width:928px;margin:auto;min-height:560px}.top-row{display:flex;justify-content:space-between;margin-bottom:32px}.draw-area,.foundations{display:flex;gap:var(--gap)}.pile,.column{position:relative;width:var(--card-w);min-width:var(--card-w)}.slot{height:var(--card-h);border:1px solid #c5d8bd30;border-radius:8px;background:#082e2824}.slot:empty:after,.foundation:after{content:attr(data-symbol);position:absolute;inset:0;display:grid;place-items:center;font-size:35px;color:#c1cfb32a;pointer-events:none}.foundation:has(.card):after{display:none}#stock{cursor:pointer}#stock.empty:after{content:'↻';font-size:32px;color:#c1cfb36b}.tableau{display:flex;justify-content:space-between;gap:var(--gap)}.column{min-height:var(--card-h);border-radius:8px}.column:before{content:'';position:absolute;inset:0 0 auto;height:var(--card-h);border:1px solid #c5d8bd16;border-radius:8px}.card{position:absolute;left:0;top:0;width:var(--card-w);height:var(--card-h);border-radius:7px;background:#faf7ee;color:#283d39;box-shadow:0 2px 5px #001e2650;border:1px solid #dedacd;cursor:pointer;user-select:none;touch-action:manipulation;transition:box-shadow .15s,filter .15s;overflow:hidden}.card.red{color:#bf5048}.card .corner{position:absolute;top:7%;left:9%;font:600 clamp(12px,2.2vw,23px)/1 Georgia,serif;text-align:center}.card .corner span{display:block;font-size:.9em;margin-top:2px}.card .corner.bottom{inset:auto 9% 7% auto;transform:rotate(180deg)}.card .suit{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(23px,4.7vw,48px)}.card .royal{font-family:'Playfair Display',Georgia,serif;font-size:clamp(26px,5.4vw,57px);opacity:.8}.card.back{background:#244f62;border:4px solid #ede8d8;cursor:default}.card.back:before{content:'';position:absolute;inset:3px;border:1px solid #c4d4ce70;background:repeating-linear-gradient(45deg,transparent 0 6px,#abc1bd23 6px 7px),repeating-linear-gradient(-45deg,transparent 0 6px,#abc1bd23 6px 7px)}.card.back:after{content:'✧';position:absolute;inset:0;display:grid;place-items:center;color:#d4d9be;font-size:34px}.card.selected{box-shadow:0 0 0 3px var(--gold),0 6px 18px #0005;filter:brightness(1.04)}.hinted{animation:glow .8s ease-in-out 3}.card.dragging{opacity:.45}.target{box-shadow:0 0 0 2px var(--gold)}@keyframes glow{50%{box-shadow:0 0 0 4px var(--gold),0 0 25px #e4c88966}}footer{border-top:1px solid #ffffff12;margin-top:25px;padding-top:18px;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11px}footer p{margin:0}.footer-mark{color:var(--gold);font-size:19px}.game-type{margin-left:auto;font-size:9px;letter-spacing:1.5px;white-space:nowrap}dialog{color:var(--cream);background:#173f36;border:1px solid #b4c3a94a;border-radius:16px;max-width:440px;width:calc(100% - 36px);padding:36px;box-shadow:0 30px 100px #001b1a99}dialog::backdrop{background:#061e1bc9;backdrop-filter:blur(5px)}dialog h2{font:500 36px/1.15 'Playfair Display',Georgia,serif;margin:12px 0 20px}dialog p{font-size:13px;line-height:1.8;color:#bfd0c4}dialog .eyebrow{font-size:9px;color:var(--gold)}.close{position:absolute;right:14px;top:12px;border:0;font-size:24px;padding:2px 8px}.dialog-actions{display:flex;gap:10px;margin-top:24px}.win-suit{font-size:50px;color:var(--gold)}#win-dialog{text-align:center}button:focus-visible,.card:focus-visible,#stock:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
@media(min-width:900px){.table{min-height:590px}}@media(max-width:600px){.game-shell{padding:23px 14px 16px}.header{margin-bottom:23px}.brand{gap:12px}.brand-mark{font-size:37px}h1{font-size:27px}.eyebrow{font-size:7px;letter-spacing:2px}.toolbar{padding:14px 0;margin-bottom:25px;gap:12px}.stats{gap:18px}.stats strong{font-size:16px}.stats span{font-size:8px;letter-spacing:1px}.actions{gap:5px}.actions button{padding:9px}.actions button span{display:none}.top-row{margin-bottom:25px}.table{min-height:500px}footer{font-size:10px;align-items:flex-start}.game-type{display:none}.slot,.card{border-radius:5px}.card.back{border-width:2px}.card .corner{top:5%;left:8%}.card .corner.bottom{bottom:5%}.card.back:after{font-size:22px}}

/* Let the table occupy the window, with cards sized for both width and height. */
:root{
  --viewport-height:100vh;
  --edge:clamp(14px,3vw,48px);
  --gap:clamp(6px,1.8vw,28px);
  --card-w:max(32px,min(calc((100vw - 2 * var(--edge) - 6 * var(--gap)) / 7),calc((var(--viewport-height) - 230px) / 5.2)));
  --step:clamp(22px,calc(var(--card-w) * .32),64px);
}
.game-shell{width:100%;max-width:none;min-height:100vh;min-height:100dvh;margin:0;padding:24px var(--edge) 18px;display:flex;flex-direction:column}
.header{margin-bottom:20px}
.toolbar{margin-bottom:24px}
.table{width:100%;max-width:none;min-height:0;margin:0;flex:1}
.top-row,.tableau{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--gap)}
.top-row{margin-bottom:24px}
.draw-area{grid-column:1 / span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.foundations{grid-column:4 / span 4;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.card .corner{font-size:clamp(11px,calc(var(--card-w) * .205),38px)}
.card .suit{font-size:calc(var(--card-w) * .43)}
.card .royal{font-size:calc(var(--card-w) * .51)}
footer{flex-shrink:0}
@media(max-width:600px){
  .game-shell{padding-top:18px;padding-bottom:14px}
  .header{margin-bottom:18px}
  .toolbar{margin-bottom:20px}
  .top-row{margin-bottom:20px}
}
@media(max-height:650px) and (min-width:601px){
  :root{--card-w:max(32px,min(calc((100vw - 2 * var(--edge) - 6 * var(--gap)) / 7),calc((var(--viewport-height) - 160px) / 5.2)))}
  .game-shell{padding-top:12px;padding-bottom:10px}
  .header{margin-bottom:10px}.brand-mark{font-size:32px}h1{font-size:25px}.eyebrow{font-size:8px}
  .toolbar{padding:9px 0;margin-bottom:14px}.top-row{margin-bottom:14px}
  footer{margin-top:12px;padding-top:10px}
}

@supports (height:100dvh){
  :root{--viewport-height:100dvh}
}

/* A card gesture belongs to the game; the surrounding felt remains scrollable. */
.card:not(.back){touch-action:none;-webkit-user-select:none;-webkit-touch-callout:none}
.touch-drag{position:fixed;z-index:1000;pointer-events:none;will-change:transform}
.touch-drag *{pointer-events:none!important}
.touch-drag .card{box-shadow:0 12px 28px #001b1a66}
.touch-drag.settling{transition:transform .28s cubic-bezier(.22,.75,.28,1)}
button{transition-duration:.22s}.card{transition-duration:.2s}.hinted{animation-duration:.95s}

@media (display-mode:standalone){
  .game-shell{
    padding-top:calc(24px + env(safe-area-inset-top,0px));
    padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
    padding-left:calc(var(--edge) + env(safe-area-inset-left,0px));
    padding-right:calc(var(--edge) + env(safe-area-inset-right,0px));
  }
}