:root{color-scheme:dark;--ink:#0d0c09;--gold:#f1cd78;--cream:#f9e8bd;--muted:#b4a588;--line:#554324;--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% -10%,#261c0b,#100e0a 52%,#090807 100%);color:var(--cream);font:14px/1.4 system-ui,sans-serif;min-height:100vh}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid #fff0a6;outline-offset:3px}
.site-header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,16px);border-bottom:1px solid #342815;background:#0c0b09a0}
.brand{color:var(--cream);text-decoration:none;display:flex;align-items:center;gap:10px;font:600 17px var(--serif)}
.logo{display:block;aspect-ratio:1.34;background:linear-gradient(155deg,#fef2bd 6%,#d9a644 41%,#ffde84 62%,#916025 100%);mask:url("./logo-mask.png") center/contain no-repeat}
.brand .logo{width:38px}.studio,.eyebrow{font-size:10px;font-weight:750;letter-spacing:.25em;color:var(--gold)}
main{max-width:880px;margin:auto;padding:0 18px}
.game-back{display:flex;justify-content:flex-end}
.game-back a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold);font-size:.9rem;font-weight:700}
.game-back a:hover{color:var(--cream)}
.heading{text-align:center;padding:24px 0 19px}
.eyebrow span{color:#ac813a;margin:0 7px}
h1{font:400 clamp(30px,5.7vw,61px)/1.05 var(--serif);letter-spacing:-.035em;margin:7px 0 5px;color:#fff2d5}
h1 em{color:var(--gold);font-weight:400}
.heading p{margin:0;color:var(--muted);font-size:12px;letter-spacing:.07em}
.table{overflow:hidden;border:1px solid #ae8442;border-radius:14px;background:#11100d;box-shadow:0 0 0 3px #382a15,0 16px 55px #0009,inset 0 0 0 1px #edc87435}
.toolbar,.table-footer{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 15px;background:linear-gradient(110deg,#19160f,#110f0b)}
.toolbar{border-bottom:1px solid var(--line)}
.toolbar{flex-wrap:wrap}
.actions{flex-wrap:wrap}
#board button{touch-action:manipulation}
.settings-option{display:flex;align-items:center;gap:12px;min-height:44px;color:var(--gold);font-weight:600}
.settings-option input{width:24px;height:24px;accent-color:var(--gold)}
.settings-option input:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
#settings,#settings-dialog button{min-height:44px}
.stats,.actions{display:flex;align-items:center;gap:12px}
.stats span{color:var(--muted);font-size:11px;white-space:nowrap}
.stats b{color:var(--cream);font-variant-numeric:tabular-nums;margin-right:3px}
.actions button,.dialog-actions button{padding:6px 11px;min-height:36px;border:1px solid #604d2d;border-radius:7px;background:#1e190f;font-size:12px;white-space:nowrap}
.actions button:hover:not(:disabled),.dialog-actions button:hover{filter:brightness(1.22)}
button:disabled{opacity:.44;cursor:default}
button.primary{background:linear-gradient(145deg,#ffe8a7,#ce993c);color:#251906;border-color:#ffe39e;font-weight:750}
.felt{position:relative;isolation:isolate;container-type:inline-size;min-height:clamp(340px,55vw,474px);padding:19px clamp(10px,4vw,34px) 21px;background:radial-gradient(ellipse at 50% 32%,#22201a 0%,#141410 58%,#090a09 100%);box-shadow:inset 0 4px 12px #0007}
.felt::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.2;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.89' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h160v160H0z'/%3E%3C/svg%3E");mix-blend-mode:soft-light;pointer-events:none}
.watermark{width:32%;position:absolute;left:34%;bottom:9%;z-index:-1;opacity:.075;pointer-events:none}
.row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(4px,1.65cqw,13px)}
#tableau{margin-top:clamp(15px,3.4cqw,25px)}
.slot,.card{width:100%;aspect-ratio:0.71;border-radius:clamp(4px,1.2cqw,9px);padding:0;position:relative;display:grid;place-items:center;user-select:none}
.slot{background:#0a0a0870;border:1px solid #9a763f;color:#dfb866;font:400 clamp(17px,4.8cqw,34px) var(--serif);box-shadow:inset 0 0 0 2px #a2772f14}
.slot.empty-column{border-style:dashed;opacity:.55}
.card{overflow:hidden;border:1px solid #ffe6a0;color:#1b100a;background:linear-gradient(132deg,#fff0bd 0%,#e3b85e 38%,#f2d183 57%,#b77c2e 100%);box-shadow:inset 0 0 0 2px #ffebb170,0 3px 7px #0008}
.card.red{color:#841821}
.card.back{background:linear-gradient(135deg,#272219 0%,#0b0b0a 62%,#1b160e 100%);box-shadow:inset 0 0 0 2px #9d702d75,0 3px 7px #0008}
.card.back .logo{width:72%}
.card.back::before{content:"";position:absolute;inset:6%;border:1px solid #cf9e4c80;border-radius:inherit;pointer-events:none}
.card.face .logo{position:absolute;bottom:10%;right:10%;width:29%;opacity:.65;background:#754714}
.rank{position:absolute;top:3%;left:8%;font:700 clamp(13px,4.4cqw,31px)/.94 var(--serif);letter-spacing:-.07em;white-space:nowrap}
.rank small{font-size:.62em;margin-left:.15em}
.pip{font:400 clamp(18px,6.1cqw,45px)/1 var(--serif);text-shadow:0 1px #ffeab286}
.column{position:relative}.column .card{position:absolute;inset-inline:0;top:var(--offset)}
.card.covered{cursor:default}
.card.selected,.slot.hinted,.card.hinted{outline:2px solid #ffe69d;outline-offset:0;box-shadow:0 0 15px #ffbb41c0,inset 0 0 0 1px #fff7c4;z-index:1}
.card.selected{z-index:auto;outline-offset:-2px;filter:brightness(1.16)}
.table-footer{border-top:1px solid var(--line);min-height:43px}
.table-footer p{margin:0;color:#d1be98;font-size:12px}
#help{padding:5px 0;border:0;background:none;color:var(--gold);font-size:12px;white-space:nowrap}
footer{display:flex;justify-content:center;align-items:center;gap:12px;color:var(--muted);font-size:11px;padding:14px 0 19px}
footer span:first-child{color:var(--gold);font-size:14px}
dialog{width:min(440px,calc(100% - 32px));padding:25px;border:1px solid #b88b44;border-radius:12px;background:#17140e;color:var(--cream);box-shadow:0 18px 80px #000}
dialog::backdrop{background:#000b}
dialog h2{font:400 30px var(--serif);margin:8px 0 10px}
dialog p,dialog li{color:#d7c8a9}
dialog ul{padding-left:18px}
dialog li+li{margin-top:8px}
.dialog-actions{display:flex;justify-content:end;gap:8px;margin-top:20px}
@media(max-width:530px){
  main{padding:0 10px}.site-header{height:52px}.brand{font-size:14px}.brand .logo{width:28px}.studio{font-size:8px;letter-spacing:.16em}
  .heading{padding:24px 0 18px}.toolbar,.table-footer{padding-inline:8px;gap:6px}.stats,.actions{gap:5px}.stats span{font-size:10px}.stats b{margin-right:1px}.actions button{padding:5px 7px;font-size:11px}
  .felt{min-height:clamp(335px,86vw,420px)}
}