:root{--cw:104px;--ch:146px;--gap:22px;--gold:#f2c65c;--cream:#fff8e8;--green:#0b6c4a;--red:#d7363f;--ink:#17211d}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#021b16;font-family:Inter,Arial,Helvetica,sans-serif;color:#fff;touch-action:none}
button{font:inherit}
#stage{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 20%,#0b5a43,#021b16 70%)}
#gameShell{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform-origin:center center;transform:translate(-50%,-50%) scale(1);overflow:hidden;background:#062d23;box-shadow:0 20px 80px #000b;border-radius:18px}
.screen{position:absolute;inset:0;display:none}.screen.active{display:block}
#coverScreen{background:#061b16}.coverArt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.coverShade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.16) 52%,rgba(0,0,0,.38) 100%)}
.coverActions{position:absolute;left:0;right:0;bottom:18px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px;padding:0 34px;pointer-events:auto}.bigBtn,.menuBtn,.toolBtn,.iconBtn,.modalCard button{cursor:pointer;border:0;color:#fff;transition:transform .14s ease,filter .14s ease,box-shadow .14s ease}.bigBtn:hover,.menuBtn:hover,.toolBtn:hover,.iconBtn:hover,.modalCard button:hover{filter:brightness(1.08);transform:translateY(-2px)}.bigBtn:active,.menuBtn:active,.toolBtn:active,.iconBtn:active,.modalCard button:active{transform:translateY(1px) scale(.98)}
.bigBtn{min-width:300px;padding:18px 30px;border-radius:22px;font-weight:1000;font-size:28px;letter-spacing:.8px;box-shadow:0 12px 30px #0009,inset 0 2px 0 #fff8}.bigBtn.gold{background:linear-gradient(180deg,#27c86f 0%,#0a8c55 48%,#066a40 100%);border:4px solid var(--gold);text-shadow:0 2px 2px #000}.bigBtn.gold:before{content:'▶ ';font-size:24px}
#playBtn{justify-self:end;align-self:end}
.coverRow{display:flex;justify-content:flex-start;gap:12px;flex-wrap:wrap;max-width:720px;padding:12px 14px;border-radius:18px;background:rgba(4,24,20,.56);border:2px solid rgba(225,193,94,.55);box-shadow:0 10px 24px #0007;backdrop-filter:blur(3px)}.menuBtn{padding:11px 18px;border-radius:14px;background:linear-gradient(180deg,rgba(15,101,73,.98),rgba(7,69,51,.98));border:2px solid #e0bd5f;font-weight:900;box-shadow:0 4px 12px #0007;min-width:148px}
#feltBg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
#topBar{position:absolute;left:18px;right:18px;top:14px;height:82px;display:flex;align-items:center;justify-content:center;gap:18px;padding:8px 12px;background:linear-gradient(180deg,rgba(4,36,28,.93),rgba(3,24,20,.86));border:2px solid rgba(240,198,92,.7);border-radius:18px;box-shadow:0 8px 24px #0006;z-index:5}
#brandImg{width:310px;height:54px;object-fit:contain;margin:0 16px;filter:drop-shadow(0 3px 4px #0007)}.stat{width:95px;text-align:center}.stat span{display:block;font-size:12px;color:#d9c892;font-weight:800;letter-spacing:1px}.stat b{display:block;font-size:22px;color:#fff}.iconBtn{width:54px;height:54px;border-radius:50%;font-size:24px;font-weight:900;background:#0a5a42;border:2px solid var(--gold);box-shadow:0 4px 12px #0006}
#board{position:absolute;left:31px;right:31px;top:112px;height:518px;display:grid;grid-template-columns:repeat(7,104px);grid-template-rows:146px 372px;column-gap:69px;row-gap:16px;align-items:start}
.pile{position:relative;width:104px;height:146px;border-radius:11px}.stockPile,.wastePile,.foundationPile{grid-row:1}.stockPile{grid-column:1}.wastePile{grid-column:2}.topSpacer{grid-row:1;grid-column:3}.foundationPile[data-suit="S"]{grid-column:4}.foundationPile[data-suit="H"]{grid-column:5}.foundationPile[data-suit="D"]{grid-column:6}.foundationPile[data-suit="C"]{grid-column:7}.foundationPile{border:2px dashed rgba(255,255,255,.27);background:rgba(0,0,0,.10);display:flex;align-items:center;justify-content:center}.slotSuit{font-size:50px;opacity:.22}.slotSuit.red{color:#ffb4b7}.slotSuit.black{color:#dce9e4}
.tableauPile{grid-row:2;height:372px;border-radius:12px}.tableauPile:nth-of-type(n){ }
#tableau-0{grid-column:1}#tableau-1{grid-column:2}#tableau-2{grid-column:3}#tableau-3{grid-column:4}#tableau-4{grid-column:5}#tableau-5{grid-column:6}#tableau-6{grid-column:7}
.stockPile:empty:after{content:'↻';position:absolute;inset:0;border:2px dashed rgba(255,255,255,.25);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:48px;color:#ffffff45;background:#0001}
.card{position:absolute;width:104px;height:146px;border-radius:11px;background:linear-gradient(145deg,#fffdf7,#eee9dc);border:1px solid #d4cfbf;box-shadow:0 5px 12px #001b;overflow:hidden;transform-origin:center;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;cursor:grab}.card.faceDown{background:#123b72 url('assets/card-back.webp') center/100% 100% no-repeat;border-color:#dfc271}.card.dragSource{opacity:.20}.card.hintGlow{filter:brightness(1.18);box-shadow:0 0 0 4px #ffde66,0 0 30px #ffdd55}.pile.hintGlow{box-shadow:0 0 0 4px #ffde66,0 0 28px #ffdd55;border-radius:12px}.card.dropPulse{animation:dropPulse .35s ease}.card:hover{transform:translateY(-2px)}
.rank{position:absolute;left:8px;top:5px;font-weight:1000;font-size:25px;line-height:1}.suitSmall{position:absolute;left:9px;top:31px;font-size:21px;line-height:1}.centerSuit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:60px;opacity:.94}.redCard{color:#c72c38}.blackCard{color:#141b1a}.miniRank{position:absolute;right:8px;bottom:7px;transform:rotate(180deg);font-weight:900;font-size:18px}.pileBadge{position:absolute;right:-8px;top:-8px;background:#f3c95d;color:#14352a;border:2px solid #fff;border-radius:15px;min-width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:1000;z-index:10}
#toolBar{position:absolute;left:30px;right:30px;bottom:16px;height:62px;display:flex;align-items:center;justify-content:center;gap:13px;z-index:6}.toolBtn{height:50px;padding:0 18px;border-radius:15px;background:linear-gradient(180deg,#149566 0%,#0d6d50 44%,#084934 100%);border:2px solid #e0bd62;box-shadow:0 8px 16px #0007,inset 0 2px 0 #ffffff33;font-weight:900;font-size:14px;letter-spacing:.3px}.toolBtn span{font-size:18px;margin-right:6px}.toolBtn em{font-style:normal;background:#f5cf65;color:#17382c;border-radius:10px;padding:2px 7px;margin-left:4px}.toolBtn.reward{background:linear-gradient(180deg,#8a6717 0%,#775014 48%,#563507 100%);border-color:#ffd875}.toolBtn:disabled{opacity:.4;filter:grayscale(.8);cursor:default}
#toast{position:absolute;left:50%;bottom:92px;transform:translateX(-50%) translateY(10px);padding:10px 18px;background:#061d18e8;border:2px solid #e4c15c;border-radius:12px;font-weight:800;opacity:0;pointer-events:none;transition:.22s;z-index:20}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal{position:absolute;inset:0;z-index:50;background:rgba(0,12,10,.72);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px)}.modal.hidden{display:none}.modalCard{width:520px;padding:28px;border-radius:24px;text-align:center;background:linear-gradient(180deg,#0c5a43,#062c23);border:3px solid #e0bd59;box-shadow:0 20px 60px #000c}.modalCard h2{margin:0 0 10px;font-size:34px;color:#ffe189}.modalCard p{margin:0 0 16px;color:#e9f3ee;font-size:17px}.modalStats{display:flex;justify-content:center;gap:20px;margin:14px 0}.modalStats div{min-width:110px;padding:12px;background:#05291f;border-radius:12px;border:1px solid #ffffff22}.modalStats b{display:block;font-size:24px}.modalStats span{font-size:11px;color:#c9b774}.modalCard button{min-width:150px;margin:6px;padding:12px 17px;border-radius:12px;background:#0b7553;border:2px solid #e4c15c;font-weight:900}.modalCard button.danger{background:#7a2830}
#dragLayer{position:absolute;inset:0;pointer-events:none;z-index:1000}.dragGhost{position:absolute;will-change:transform;transition:filter .12s ease;filter:drop-shadow(0 14px 15px rgba(0,0,0,.42));transform:rotate(2deg) scale(1.035)}.dragGhost.snap{transition:left .17s ease,top .17s ease,transform .17s ease;transform:rotate(0) scale(1)}
#confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:45}.confettiPiece{position:absolute;width:11px;height:17px;top:-30px;animation:fall 2.4s linear forwards;border-radius:2px}
@keyframes fall{to{transform:translate(var(--dx),780px) rotate(720deg);opacity:.2}}@keyframes dropPulse{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.cardFaceImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px;pointer-events:none}.pile.hintGlow{box-shadow:0 0 0 4px #ffde66,0 0 30px #ffdd55;border-color:#ffde66!important}.dragGhost .card:hover{transform:none}

@media (max-width:900px){.coverActions{grid-template-columns:1fr;justify-items:center;padding:0 18px 4px}.coverRow{justify-content:center;max-width:none}.bigBtn,#playBtn{justify-self:center;width:100%;max-width:420px}.menuBtn{min-width:0;flex:1 1 30%}}

/* 2027 premium cover/menu refresh */
#coverScreen{background:#061b16}
.coverArt{object-position:center center}
.coverShade{background:linear-gradient(90deg,transparent 0 66%,rgba(1,19,14,.07) 72%,rgba(1,18,13,.30) 100%);pointer-events:none}
.coverActions{left:auto;right:34px;bottom:26px;transform:none;width:355px;display:flex;flex-direction:column;align-items:center;z-index:4}
.artPlayBtn{width:345px;height:182px;padding:0;border:0;background:transparent url('assets/btn-play.webp') center/contain no-repeat;cursor:pointer;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));transition:transform .15s ease,filter .15s ease}
.artPlayBtn:hover{transform:translateY(-3px) scale(1.018);filter:drop-shadow(0 15px 22px rgba(0,0,0,.5)) brightness(1.06)}
.artPlayBtn:active{transform:translateY(1px) scale(.985)}
.coverRow{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:-13px;width:100%}
.menuBtn.howBtn{height:54px;min-width:180px;padding:0 18px;border-radius:16px;background:linear-gradient(180deg,#15905a,#075a3b);border:3px solid #f0c85f;box-shadow:0 7px 15px #0008,inset 0 2px 0 #ffffff66;font-weight:1000;font-size:14px;letter-spacing:.4px;text-shadow:0 2px 2px #0008;display:flex;align-items:center;justify-content:center;gap:8px}
.menuGlyph{width:27px;height:27px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#ffda67;color:#17452f;border:2px solid #fff6c3;font-size:18px;font-weight:1000;text-shadow:none}
.coverIconBtn{width:58px;height:58px;padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 6px 10px rgba(0,0,0,.48));transition:transform .14s ease,filter .14s ease}
.coverIconBtn img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.coverIconBtn:hover{transform:translateY(-2px) scale(1.04);filter:drop-shadow(0 9px 13px rgba(0,0,0,.55)) brightness(1.07)}
.coverIconBtn:active{transform:translateY(1px) scale(.96)}
/* premium card presentation */
.card{border-radius:12px;border:0;background:#fff;box-shadow:0 5px 13px rgba(0,0,0,.48);overflow:hidden}
.card.faceDown{background:#0b2c4c url('assets/card-back.webp') center/100% 100% no-repeat;border:0}
.cardFaceImg{border-radius:11px;object-fit:cover}