/* Table lighting, raised controls, and an interactive deck using the game's cards. */
:root{color-scheme:dark;background:#061b14;color:#f4eedb;--rose:#ef798b;--gold:#e6c786;--cream:#fffaf0;--ink:#0c2e21}
body{background:radial-gradient(ellipse at 15% 0,#263a254d,transparent 48%),radial-gradient(ellipse at 90% 55%,#0f533128,transparent 55%),#061b14;min-height:100dvh}
.site-header{max-width:1440px;border-color:#dfc7901c;padding:20px 32px;color:#c9cfba}.brand{color:#f5eddb}.brand span{color:#de9e7b}.site-header>a:last-child{font-size:.875rem}
main{max-width:1440px;padding:26px 32px}.heading{margin:0 0 26px;gap:18px}.heading .eyebrow{display:inline-flex;align-items:center;border:1px solid #d2b27452;background:#48301840;color:#e9d095;padding:7px 12px;border-radius:24px;letter-spacing:2px;font-size:.7rem;box-shadow:0 0 14px #c1a14d0c,inset 0 1px #ffeeaa0c}h1{font-size:clamp(2.8rem,5vw,4.15rem);letter-spacing:-2px;line-height:1.1;color:#fff9e8;text-shadow:0 4px 12px #0006}h1 em{color:#ed8b82}h1 em span{color:#ee9b82}.heading p:last-child{color:#b6c3af;font-size:1rem;line-height:1.6}.heading>.text-button{border:1px solid #c3a36550;border-radius:28px;padding:11px 18px;text-decoration:none;white-space:nowrap;color:#e4cf9c;background:linear-gradient(#18382b,#0a2219);box-shadow:inset 0 1px #f7e2a616,0 4px 12px #0003}
.game-layout{grid-template-columns:minmax(0,1fr) 310px;gap:24px}.deck-showcase{display:none}body:not(.is-playing) .game-layout{max-width:1100px;margin:0 auto;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:0;border:1px solid #bb9c604d;border-radius:25px;background:linear-gradient(140deg,#102d20,#061d15);padding:30px;box-shadow:0 1px 0 #f6daa519 inset,0 9px 0 #03110c,0 10px 0 #a58b4830,0 32px 70px #0005}body:not(.is-playing) .table{display:none}body:not(.is-playing) .deck-showcase{display:flex}body:not(.is-playing) .game-sidebar{padding-left:28px;min-width:0}body:not(.is-playing) .panel{border:0;box-shadow:none;padding:0;background:none}body:not(.is-playing) .quick-rules{display:none}
.deck-showcase{flex-direction:column;justify-content:space-between;min-width:0;align-self:stretch;padding:20px;border:1px solid #bacba41c;border-radius:18px;background:radial-gradient(ellipse at 50% 54%,#29593670,transparent 63%),linear-gradient(140deg,#04180f,#09251a);box-shadow:inset 0 8px 22px #0005,0 1px #d3bc7222;color:#e4d6b1}.showcase-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.7rem;letter-spacing:1.2px;color:#c1b58f}.showcase-heading>span:last-child{white-space:nowrap;color:#8eaa8f;letter-spacing:.2px}.deck-stage{height:320px;min-height:220px;position:relative;perspective:1100px;touch-action:pan-y;user-select:none;cursor:grab;display:grid;place-items:center}.deck-stage.is-dragging{cursor:grabbing}.deck-fan{position:relative;width:280px;height:220px;transform-style:preserve-3d;transform:rotateX(calc(8deg + var(--tilt-x,0deg))) rotateY(var(--tilt-y,0deg));transition:transform .35s cubic-bezier(.2,.8,.2,1)}.is-dragging .deck-fan{transition:none}.preview-card{position:absolute;top:15px;left:50%;width:125px;height:180px;margin-left:-62px;transform-style:preserve-3d;border:0;border-radius:11px;background:#d9d3bc;padding:0;outline-offset:7px;transition:transform .3s,box-shadow .3s;box-shadow:0 1px #edddbd,0 2px #b9b6a5,0 3px #f0e8d2,0 4px #b4b4a1,0 5px #dbd5c2,10px 23px 18px #0007;color:#b73552}.preview-front{position:absolute;inset:0;border:1px solid #f6e9cc;border-radius:10px;background:linear-gradient(125deg,#fffef6 15%,#f2e9d6 100%);box-shadow:inset 0 0 0 4px #fff9ef,inset 0 0 0 5px #d8cdb566;display:grid;place-items:center;overflow:hidden;backface-visibility:hidden}.preview-ace{transform:translate3d(-65px,17px,-20px) rotateZ(-21deg) rotateY(5deg)}.preview-seven{transform:translate3d(0,-4px,12px) rotateZ(-3deg);z-index:2}.preview-jack{transform:translate3d(67px,15px,30px) rotateZ(19deg) rotateY(-5deg);z-index:3;color:#785093}.preview-card[aria-pressed=true]{box-shadow:0 1px #edddbd,0 2px #b9b6a5,0 3px #f0e8d2,0 4px #b4b4a1,0 5px #dbd5c2,0 0 24px #e4c67335,12px 26px 20px #0008}.preview-ace:hover,.preview-ace:focus-visible{transform:translate3d(-70px,4px,25px) rotateZ(-19deg)}.preview-seven:hover,.preview-seven:focus-visible{transform:translate3d(0,-16px,45px) rotateZ(-2deg)}.preview-jack:hover,.preview-jack:focus-visible{transform:translate3d(73px,1px,55px) rotateZ(16deg)}.preview-corner{position:absolute;top:12px;left:13px;font-family:Georgia,serif;font-size:1.3rem;font-weight:700;line-height:1}.preview-corner small{display:block;font-size:.9rem;margin-top:4px}.preview-bottom{top:auto;left:auto;bottom:12px;right:13px;transform:rotate(180deg)}.preview-pip{font-family:'Playfair Display',Georgia,serif;font-size:3.6rem;line-height:1;text-align:center}.preview-pip>small{display:block;font-size:1.1rem;margin-top:7px}.preview-pip>.preview-wild{font-family:'DM Sans',sans-serif;font-size:.6rem;letter-spacing:2px;font-weight:700;color:#987339}.showcase-caption{text-align:center;min-height:94px}.showcase-caption p{font-size:.875rem;line-height:1.6;color:#aabd9e;max-width:310px;margin:0 auto 12px}.showcase-caption strong{display:block;color:#e8dcba;font-weight:600}.showcase-caption>span{font-size:.7rem;letter-spacing:.8px;color:#92a684;border:1px solid #b2bd7424;border-radius:20px;padding:6px 10px;background:#04190fb3}
.panel{background:linear-gradient(145deg,#123022,#082217);border:1px solid #acb58a30;border-radius:18px;box-shadow:inset 0 1px #e1eac00e,0 5px 0 #03180f,0 18px 30px #0003;color:#e9edda}.panel .eyebrow{color:#dfc58a;font-size:.75rem}.panel h2{font-size:2rem;font-weight:600;color:#fff5e3;margin-bottom:8px}.setup-intro{font-size:.875rem;line-height:1.6;color:#a9b99d;margin:0 0 24px}.modes{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.mode,.computer-mode{grid-column:auto;grid-row:auto;padding:15px 10px;min-height:146px;text-align:left;background:linear-gradient(145deg,#1b3426,#0d251b);border:1px solid #72886540;color:#f0eed9;box-shadow:inset 0 1px #eeffd711,0 4px 0 #04190f,0 7px 10px #0003;transition:transform .2s,background .2s,box-shadow .2s}.mode-symbol{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;font-size:1.2rem;color:#d9c58d;border:1px solid #bea26142;background:#28432b;margin-bottom:13px;box-shadow:inset 0 1px #faf3c522,0 2px 5px #0004}.mode strong,.computer-mode strong{font-size:.875rem;line-height:1.4;font-weight:600}.mode small{font-size:.75rem;line-height:1.5;color:#9daf96;margin-top:10px}.mode.selected{border-color:#dcb875;color:#fff4d6;background:linear-gradient(140deg,#294733,#163b28);box-shadow:inset 0 1px #ffe8ac3b,0 4px 0 #071d12,0 0 22px #d1ae5420}.mode.selected .mode-symbol{color:#ffe4a3;background:#4a553044}.mode.selected small{color:#c4d1b4}.mode:not(:disabled):hover{transform:translateY(-3px);border-color:#cdb77d}.mode:not(:disabled):active{transform:translateY(2px);box-shadow:inset 0 1px #fff1,0 1px 0 #03150d}.counts button{background:#0a2016;color:#bdcbb0;border-color:#6c86544f}.counts button.selected{background:#385735;border-color:#d0b67c;color:#fff0c6}legend,label{color:#d7d5b1;font-size:.875rem}.hint{color:#a8bc9e;font-size:.875rem;line-height:1.6}#deckHint{margin:22px 0 18px;padding:10px 12px;border:1px solid #61855a44;border-radius:9px;background:#07251a;color:#d9d3ac;font-size:.8rem;line-height:1.6}.name-fields{margin-top:0}input{color:#f7f1dc;background:#041a12;border-color:#ac955744;border-radius:10px;min-height:51px;box-shadow:inset 0 3px 10px #0005,0 1px #d9d79b0e}input:focus{border-color:#baa06b}input::placeholder{color:#819979}.primary{min-height:54px;color:#fff6de;background:linear-gradient(110deg,#23875d,#0c7061);border:1px solid #85c09775;border-radius:11px;box-shadow:inset 0 2px 0 #bdf9d133,0 5px 0 #034335,0 10px 22px #0005,0 0 20px #22b57b1c;transition:transform .2s,box-shadow .2s;font-size:1rem}.primary:hover{background:linear-gradient(110deg,#339b6c,#128376);transform:translateY(-2px)}.primary:active{transform:translateY(3px);box-shadow:inset 0 2px #bdf9d133,0 2px 0 #034335}.secondary{color:#e0d4ac;background:linear-gradient(#29432c,#1a3221);border:1px solid #9caf6840;box-shadow:0 2px 0 #061a0f}.text-button{color:#c4c99f}.divider{color:#90a383}.rank-guide{color:#abbf9d;justify-content:center;font-size:.75rem;gap:12px;padding-top:22px}.rank-guide strong{color:#ebae9c}.rank-guide span:nth-child(2) strong{color:#d0b1ee}.quick-rules .eyebrow{color:#c6be93}.quick-rules li{color:#d7c28d}.quick-rules span{color:#b0c0a5;font-size:.875rem}.room-share strong{color:#e8d5a4}.roster-heading h2{font-size:1.4rem;margin:0}.roster-heading>span{color:#acbd95}.player{border-bottom-color:#99b77820}.player.current{background:#325d334f;border:1px solid #dac08745}.player strong{color:#e9e9cd}.player small{color:#a4b990}.player-marker{background:#47613b;color:#eddaa6}.player-score{color:#e6cb87}.player.empty{color:#adbe9f}
.table{border:1px solid #c0a06579;background-image:linear-gradient(120deg,#061b1938,transparent 48%,#010a0733),url('tabletop.png');box-shadow:inset 0 2px 2px #ffe8bd38,0 2px 0 #715336,0 5px 0 #3f2f23,0 8px 0 #251f16,0 9px 0 #c7a26b3b,0 28px 48px #0008,0 0 0 7px #052017;padding-top:30px;margin-bottom:9px;perspective:1400px}.table-top{font-size:.75rem;color:#e0d5ad}.table-top,.opponents,.turn-banner,.piles,.action-bar,.layout-heading,.cards,.table-bottom{position:relative}.opponent{background:linear-gradient(140deg,#032118bb,#021b13cc);border:1px solid #a7b17d33;box-shadow:inset 0 3px 9px #0005,0 1px #d9ce8a15}.opponent.current{border-color:#d3b773;box-shadow:inset 0 3px 8px #0004,0 0 15px #eed3750f}.turn-banner p{color:#f6edcf;text-shadow:0 3px 8px #0007}.turn-banner>span{color:#d0d8b7;font-size:.9rem}.piles,.cards{perspective:1000px;transform-style:preserve-3d}.card{border-radius:9px;box-shadow:0 1px #e8dec9,0 2px #aaa18f,0 3px #e7dec9,0 4px #aca394,2px 8px 0 #00170c35,5px 13px 11px #0007;transform:rotateX(9deg);backface-visibility:hidden;transition:transform .22s,box-shadow .22s;background:linear-gradient(130deg,#fffef8,#eee5d1);color:#b93150}.card-back{background:linear-gradient(130deg,#204433,#08291d);border-color:#c5ae78;color:#e2cda1}.back-border{border-color:#d6bd8175;background:repeating-linear-gradient(45deg,transparent,transparent 6px,#c8b87612 6px,#c8b87612 7px);box-shadow:inset 0 0 0 2px #062016,inset 0 0 0 3px #d7be7030}.card-corner{font-size:.875rem}.card-corner small{font-size:.75rem}.stack{box-shadow:1px 2px #e6ddc8,2px 4px #adab99,3px 6px #e6ddc8,4px 8px #989a87,5px 10px #e6ddc8,6px 12px #8d9380,7px 14px #e6ddc8,10px 20px 14px #0009;transform:rotateX(12deg) rotateZ(-7deg)}#discardPile.card-face{transform:rotateX(10deg) rotateZ(4deg);box-shadow:1px 2px #e6ddc8,2px 4px #b7b1a2,3px 6px #e6ddc8,6px 12px 12px #0007}.held-empty,.empty-pile{background:#011b1255;color:#b4c6a6;border-color:#8faa7557;box-shadow:inset 0 4px 12px #00130970;transform:rotateX(9deg)}#heldCard:not(:disabled){transform:rotateX(-5deg) rotateY(-8deg) rotateZ(5deg) translateY(-6px);box-shadow:0 1px #e8dec9,0 2px #a89f8b,0 3px #e7dec9,10px 19px 17px #0008}#heldCard:not(:disabled):hover{transform:rotateX(0) rotateY(0) rotateZ(0) translateY(-11px)}.card:not(:disabled):is(button){outline:2px solid #e6c67b;outline-offset:4px}.card:not(:disabled):is(button):hover{transform:rotateX(0) translateY(-7px);box-shadow:0 1px #e8dec9,0 2px #aaa18f,0 3px #e7dec9,5px 15px 15px #0009}.slot-index{font-size:.875rem;color:#dbe0c2;margin-top:3px}.slot.target .slot-index{background:#e7c988;color:#133524}.slot.target .card{animation:liftTarget 1.9s ease-in-out infinite}.slot.drop-ready .card{animation:none;transform:translateY(-10px) rotateX(0);outline:3px solid #ffeda7}.mini-cards .card{box-shadow:0 1px #e3d9bf,0 2px #9c9b87,2px 5px 5px #0007;transform:rotateX(12deg)}.mini-cards .card strong{font-size:1.25rem}.wild-card{background:linear-gradient(135deg,#fffef4,#eee4c5);color:#745392;border-color:#dec78f}.wild-label{color:#80602a}.pile-label{font-size:.75rem;color:#e1d4b1}.pile-caption{font-size:.75rem;color:#c2cfab}.action-bar{background:linear-gradient(125deg,#031e16e8,#062417eb);border-color:#dac2784f;box-shadow:inset 0 1px #dccb9122,0 4px 0 #00180e,0 7px 12px #0003;align-items:center}.step-label{font-size:.75rem;letter-spacing:1px}.action-bar p{font-size:.875rem;color:#d5dfbe}.table-action{background:linear-gradient(145deg,#f1dba6,#cdaa63);color:#183523;border-color:#fff0c7;box-shadow:inset 0 1px #fffce8b3,0 4px 0 #8f733d,0 7px 12px #0004;font-size:.95rem;min-height:46px}.table-action:not(:disabled):hover{background:linear-gradient(#ffebbb,#d8b977)}.table-action:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 #8f733d}.table-action:disabled{opacity:.6;background:#8c986c;color:#112f1c}.table-bottom p{font-size:.875rem;color:#c7d3ae}.results{background:linear-gradient(140deg,#193b28,#06291b);color:#f2e6c4;border:1px solid #d8bb70;box-shadow:inset 0 1px #f3e2a533,0 14px 0 #042015,0 24px 60px #000b,0 0 0 300vmax #00120bbb}.results h2{color:#fff4d6}.results .eyebrow{color:#ddc38c}.results>p:not(.eyebrow){color:#c3cea5}.winner-heart{color:#ecac8c}.error{background:#451f25;color:#ffe0d5;border-color:#bd6c6f}dialog{background:linear-gradient(140deg,#133625,#061e14);border:1px solid #baa06666;color:#eee8c8}dialog h2{color:#fff4d8}dialog .eyebrow{color:#dfc68e}dialog>p{color:#b6c8a4}dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}footer{color:#98ad8d;font-size:.75rem;margin-top:28px}.flying-card,.drag-card{box-shadow:0 2px #c9c0ac,0 3px #eee3c6,7px 22px 20px #0007}
@keyframes liftTarget{0%,100%{transform:rotateX(5deg) translateY(-2px)}50%{transform:rotateX(0deg) translateY(-7px);box-shadow:0 1px #e8dec9,0 2px #a59c8a,0 3px #e7dec9,0 0 17px #edce8330,5px 17px 13px #0008}}
@media(max-width:1150px){.game-layout{grid-template-columns:minmax(0,1fr) 270px}.is-playing .modes{grid-template-columns:1fr}body:not(.is-playing) .game-layout{padding:25px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}body:not(.is-playing) .game-sidebar{padding-left:22px}.deck-showcase{padding:16px}.deck-fan{width:240px;transform:scale(.92) rotateX(calc(8deg + var(--tilt-x,0deg))) rotateY(var(--tilt-y,0deg))}.mode{padding:13px 8px}.mode strong{font-size:.825rem}.mode small{font-size:.75rem}.showcase-heading{flex-direction:column;align-items:flex-start;gap:8px}}
@media(max-width:850px){main{padding:22px}.site-header{padding:18px 22px}.game-layout{grid-template-columns:1fr}.is-playing .game-sidebar{padding:0}body:not(.is-playing) .game-layout{display:flex;flex-direction:column;max-width:600px;padding:24px;gap:26px}body:not(.is-playing) .game-sidebar{padding:0;width:100%}.deck-showcase{min-height:0}.deck-stage{height:225px;min-height:0}.deck-fan{height:190px;transform:scale(.9) rotateX(calc(8deg + var(--tilt-x,0deg))) rotateY(var(--tilt-y,0deg))}.showcase-heading{flex-direction:row;align-items:center;font-size:.7rem}.showcase-caption{min-height:70px}.showcase-caption p{margin-bottom:7px;font-size:.875rem}.showcase-caption>span{border:0;padding:0}.panel h2{font-size:1.85rem}.setup-intro{margin-bottom:20px}.mode{min-height:130px}.mode strong,.computer-mode strong{font-size:.9rem}.mode small{font-size:.8rem}.mode-symbol{margin-bottom:10px}.is-playing .game-sidebar .panel{padding:20px}.is-playing .players{flex-wrap:wrap}.is-playing .player{flex:1 1 40%;min-width:0}.is-playing .player strong{font-size:.875rem}.is-playing .player small{font-size:.75rem}.heading p:last-child{font-size:.9rem}.table{margin:0 5px 9px}.quick-rules{display:none}}
@media(max-width:480px){main{padding:18px 14px}.site-header{padding:16px 20px}.heading{padding:0;gap:10px;align-items:center;margin-bottom:20px}.heading h1{font-size:2.8rem;letter-spacing:-1.6px}.heading .eyebrow{font-size:.6rem;letter-spacing:1.4px;padding:6px 9px}.heading p:last-child{font-size:.875rem;line-height:1.5;max-width:260px}.heading>.text-button{font-size:.75rem;padding:9px 11px;white-space:normal;max-width:88px;flex-shrink:0}body:not(.is-playing) .game-layout{padding:18px;border-radius:20px;gap:24px}.deck-showcase{padding:12px}.showcase-heading{font-size:.6rem;letter-spacing:.7px}.deck-stage{height:198px}.deck-fan{transform:scale(.8) rotateX(calc(8deg + var(--tilt-x,0deg))) rotateY(var(--tilt-y,0deg))}.showcase-caption p{font-size:.8rem}.showcase-caption>span{font-size:.7rem}.showcase-caption{min-height:72px}.mode,.computer-mode{min-height:137px;padding:12px 9px;border-radius:12px}.mode strong,.computer-mode strong{font-size:.8rem}.mode small{font-size:.75rem;line-height:1.5}.modes{gap:8px}.mode-symbol{width:29px;height:29px;font-size:1.1rem}.panel h2{font-size:1.75rem}.setup-intro{font-size:.875rem;margin-bottom:17px}#deckHint{font-size:.75rem;margin:20px 0 16px;padding:9px 11px}.primary{font-size:.95rem;min-height:54px}.rank-guide{font-size:.75rem;padding-top:20px;gap:9px}.rank-guide span{gap:4px}.table{padding:23px 16px 22px;margin:0 4px 8px;box-shadow:inset 0 2px 2px #ffe8bd38,0 2px 0 #715336,0 5px 0 #3f2f23,0 8px 0 #251f16,0 18px 30px #0008,0 0 0 4px #052017}.table-top{font-size:.65rem;letter-spacing:.7px}.turn-banner p{font-size:1.25rem}.turn-banner>span{font-size:.875rem}.piles{gap:22px;padding-bottom:21px}.held-wrap{padding-left:20px}.piles .card{width:69px}.pile-label{font-size:.7rem;letter-spacing:.5px}.pile-caption{font-size:.7rem}.cards{gap:13px 9px}.slot-index{font-size:.8rem}.card-corner,.slot .card-corner{font-size:.75rem}.card-corner small,.slot .card-corner small{font-size:.65rem}.slot .card-face strong{font-size:1.75rem}.slot .card{border-radius:7px}.back-border small{display:none}.mini-cards .card strong{font-size:1.05rem}.action-bar{display:grid;grid-template-columns:1fr;gap:10px;padding:12px}.step-label{font-size:.7rem}.action-bar p{font-size:.875rem}.table-action{width:100%;min-height:44px;font-size:.9rem}.table-bottom p{font-size:.8rem}.opponent-head{font-size:.8rem}.opponent-head>span{font-size:.75rem}.layout-heading h2{font-size:.95rem}.results{width:calc(100% - 32px);padding:24px}.is-playing .rank-guide{padding-top:16px}footer{font-size:.7rem;letter-spacing:.3px;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:25px}}
@media(max-width:360px){main{padding:15px 10px}.heading h1{font-size:2.4rem}.heading>.text-button{font-size:.7rem;padding:8px}.heading p:last-child{font-size:.8rem}body:not(.is-playing) .game-layout{padding:14px}.modes{grid-template-columns:repeat(3,minmax(0,1fr))}.computer-mode{grid-column:auto;grid-row:auto}.mode strong,.computer-mode strong{font-size:.75rem}.mode small{font-size:.7rem}.mode{padding:10px 7px}.deck-fan{transform:scale(.72) rotateX(calc(8deg + var(--tilt-x,0deg))) rotateY(var(--tilt-y,0deg))}.deck-stage{height:180px}.table{padding-left:13px;padding-right:13px}.piles{gap:18px}.held-wrap{padding-left:18px}.piles .card{width:62px}.pile-label{font-size:.65rem}.slot-index{font-size:.75rem}.rank-guide{column-gap:8px;font-size:.7rem}.card-corner,.slot .card-corner{font-size:.7rem}.slot .card-face strong{font-size:1.5rem}}
@media(prefers-reduced-motion:reduce){.deck-fan,.preview-card,.card,.primary,.mode{transition:none!important}.slot.target .card{animation:none!important}.deck-stage{cursor:default}}