:root{--card-w:clamp(40px,12.2vw,92px);--card-h:calc(var(--card-w)*1.5323383085);--gap:clamp(3px,1.2vw,12px);--down-step:clamp(13px,3.8vw,28px);--up-step:clamp(24px,6.8vw,52px);--felt:#17674f;--felt-dark:#0b4837;--cream:#fffaf0;--gold:#f6cb55;--ink:#1c2831}
*{box-sizing:border-box}
html{min-height:100%;background:#0b4837}
body{min-width:320px;min-height:100vh;margin:0;color:#fff;background-color:#0c4d3b;background-image:url("../assets/images/background-tile.webp"),radial-gradient(circle at 50% 12%,#248363 0,#17674f 42%,#0c4d3b 100%);background-position:0 0,50% 12%;background-repeat:repeat,no-repeat;background-size:520px 520px,cover;font-family:"M PLUS Rounded 1c","Yu Gothic",sans-serif;overscroll-behavior:none}
button,a{font:inherit;-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
.game-app[aria-hidden="true"],[hidden]{display:none!important}
.title-screen{position:relative;display:grid;min-height:100vh;min-height:100dvh;place-items:center;overflow:hidden;padding:58px 18px 24px;background:linear-gradient(rgba(7,64,47,.16),rgba(4,48,36,.28))}
.title-screen:before,.title-screen:after{position:absolute;width:210px;height:300px;border:5px solid rgba(255,248,221,.18);border-radius:22px;content:"";pointer-events:none}
.title-screen:before{left:-115px;top:16%;transform:rotate(-17deg)}
.title-screen:after{right:-120px;bottom:8%;transform:rotate(19deg)}
.title-home-link{position:absolute;z-index:2;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 11px;border:1px solid rgba(255,255,255,.32);border-radius:12px;color:#fff;background:rgba(2,34,25,.52);box-shadow:0 4px 10px rgba(0,0,0,.14);font-size:11px;font-weight:900;text-decoration:none}
.title-card{position:relative;z-index:1;display:grid;justify-items:center;width:min(100%,520px);padding:clamp(20px,4vh,34px) clamp(18px,5vw,38px) 22px;border:1px solid rgba(255,255,255,.2);border-radius:30px;background:rgba(4,52,39,.62);box-shadow:0 22px 60px rgba(0,0,0,.25);backdrop-filter:blur(7px)}
.title-card h1{width:100%;margin:0}
.title-logo{display:block;width:min(100%,460px);height:auto;margin:auto;filter:drop-shadow(0 6px 3px rgba(31,17,10,.25))}
.title-visual{display:grid;place-items:center;width:min(100%,420px);height:clamp(135px,27vh,220px);margin:clamp(12px,2.5vh,22px) auto}
.title-visual-image{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.22))}
.title-actions{display:grid;width:min(100%,340px);gap:11px}
.title-button{min-height:52px;padding:10px 22px;border:2px solid rgba(255,255,255,.52);border-radius:999px;font-size:16px;font-weight:900;cursor:pointer;transition:transform .12s,box-shadow .12s,filter .12s}
.title-button.continue{color:#174a39;background:#fffaf0;box-shadow:0 5px 0 #b9b09e}
.title-button.start{color:#2e351f;background:var(--gold);box-shadow:0 5px 0 #a77f1f}
.title-button:hover:not(:disabled){filter:brightness(1.06)}
.title-button:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.3)}
.title-button:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(.65)}
.title-button:focus-visible,.title-home-link:focus-visible{outline:3px solid #ffe88c;outline-offset:3px}
.title-status{min-height:1.5em;margin:10px 0 0;color:#d5efe4;font-size:11px;font-weight:800;text-align:center}
.topbar{display:flex;align-items:center;gap:8px;min-height:54px;padding:7px max(10px,env(safe-area-inset-right)) 7px max(10px,env(safe-area-inset-left));border-bottom:1px solid rgba(255,255,255,.16);background:rgba(2,34,25,.55);backdrop-filter:blur(8px)}
.topbar h1{min-width:0;flex:1;margin:0;font-size:clamp(15px,4.2vw,23px);text-align:center;letter-spacing:.03em;white-space:nowrap}
.topbar-logo{display:block;width:min(100%,190px);height:auto;max-height:36px;margin:auto;object-fit:contain}
.home-link{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 10px;border:1px solid rgba(255,255,255,.32);border-radius:12px;color:#fff;background:rgba(255,255,255,.12);box-shadow:0 4px 10px rgba(0,0,0,.14);text-decoration:none;font-size:11px;font-weight:900;white-space:nowrap;transition:background .12s,box-shadow .12s,translate .12s}
.home-link:hover{background:rgba(255,255,255,.2)}
.home-link:active{translate:0 2px;box-shadow:0 2px 5px rgba(0,0,0,.14)}
.home-link:focus-visible{outline:3px solid #ffe88c;outline-offset:2px}
.coin-pill{display:flex;align-items:center;gap:4px;min-width:70px;padding:5px 9px;border:1px solid rgba(255,222,113,.45);border-radius:999px;background:rgba(255,212,90,.12);font-size:13px}
.coin-pill img,.reward-total img{width:20px;height:20px;object-fit:contain}
.sound-toggle{display:grid;flex:0 0 auto;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(118,190,224,.46);border-radius:12px;color:#29483e;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 7px rgba(0,0,0,.16);font-size:20px;line-height:1;cursor:pointer;transition:transform .12s,box-shadow .12s,opacity .12s}
.sound-toggle.muted{opacity:.72;background:#e9f0ed}
.sound-toggle:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(0,0,0,.16)}
.sound-toggle:focus-visible{outline:3px solid #ffe88c;outline-offset:2px}
main{width:min(100%,900px);margin:auto;padding-bottom:calc(75px + env(safe-area-inset-bottom))}
.statusbar{display:flex;align-items:center;gap:14px;min-height:38px;padding:5px 12px;font-size:12px;font-weight:700}
.statusbar b{font-variant-numeric:tabular-nums}
.statusbar .message{overflow:hidden;flex:1;color:#d8f9e7;text-align:right;text-overflow:ellipsis;white-space:nowrap}
.game-board{position:relative;min-height:calc(var(--card-h) + var(--up-step)*8 + 35px);padding:5px 8px 20px;user-select:none}
.top-row,.tableau{display:grid;grid-template-columns:repeat(7,var(--card-w));justify-content:center;gap:var(--gap)}
.top-row{min-height:var(--card-h)}
.top-spacer{grid-column:auto}
.pile,.card{position:relative;width:var(--card-w);height:var(--card-h);padding:0;border:0;border-radius:calc(var(--card-w)*.09)}
.pile{display:grid;place-items:center;border:2px solid rgba(255,255,255,.22);color:rgba(255,255,255,.32);background:rgba(0,0,0,.08);font-size:calc(var(--card-w)*.4);cursor:pointer}
.pile:focus-visible,.card:focus-visible,.controls button:focus-visible{outline:3px solid #ffe88c;outline-offset:2px}
.stock.has-cards,.card.face-down{border:2px solid #f9efcd;background:repeating-linear-gradient(45deg,#173d77 0 5px,#f4dfaa 5px 7px,#24629a 7px 12px);box-shadow:inset 0 0 0 3px #376da4,inset 0 0 0 5px #fff5d4,0 3px 7px rgba(0,0,0,.3)}
.card picture{display:block;width:100%;height:100%;border-radius:inherit}
.card picture[hidden]{display:none}
.card-back{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover}
.stock.recycle:after{--recycle-circle-size:calc(var(--card-w)*.52);position:absolute;top:50%;left:50%;content:"↻";display:grid;place-items:center;box-sizing:border-box;width:var(--recycle-circle-size);min-width:var(--recycle-circle-size);max-width:var(--recycle-circle-size);height:var(--recycle-circle-size);min-height:var(--recycle-circle-size);max-height:var(--recycle-circle-size);aspect-ratio:1/1;border:2px solid rgba(255,255,255,.55);border-radius:50%;color:#fff;font-size:calc(var(--card-w)*.3);line-height:1;transform:translate(-50%,-50%)}
.tableau{align-items:start;margin-top:var(--gap)}
.column{position:relative;min-height:calc(var(--card-h) + var(--up-step)*7);border-radius:8px}
.column:empty:before{position:absolute;inset:0 auto auto 0;width:var(--card-w);height:var(--card-h);border:2px solid rgba(255,255,255,.16);border-radius:calc(var(--card-w)*.09);content:"K";display:grid;place-items:center;color:rgba(255,255,255,.14);font-weight:900;font-size:calc(var(--card-w)*.38)}
.card{position:absolute;left:0;overflow:hidden;border:1px solid #c7bea9;color:var(--ink);background:var(--cream);box-shadow:0 2px 5px rgba(0,0,0,.28);cursor:pointer;transition:transform .12s,filter .12s}
.pile .card{inset:-2px;position:absolute}
.card img{display:block;width:100%;height:100%;object-fit:cover;background:#fff}
.card .fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#fffdf6,#eee6d4)}
.card .fallback[hidden]{display:none}
.card .corner{position:absolute;z-index:2;top:4%;left:7%;display:flex;flex-direction:column;align-items:center;font-family:Arial,sans-serif;font-size:calc(var(--card-w)*.22);font-weight:900;line-height:.82;text-shadow:0 1px #fff}
.card .corner i{font-style:normal;font-size:calc(var(--card-w)*.19)}
.card .big-suit{font-size:calc(var(--card-w)*.55);line-height:1}
.card.red{color:#c92734}
.card.selected{filter:brightness(1.08);transform:translateY(-7px);box-shadow:0 0 0 4px #ffe371,0 8px 12px rgba(0,0,0,.35)}
.card.hinted,.pile.hinted,.column.hinted{animation:hintPulse .65s ease-in-out 3}
@keyframes hintPulse{50%{filter:drop-shadow(0 0 8px #fff17b);transform:translateY(-5px)}}
.controls{position:fixed;z-index:20;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(4,minmax(58px,100px));justify-content:center;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.2);background:rgba(3,39,29,.9);backdrop-filter:blur(10px)}
.controls button{min-height:50px;border:1px solid rgba(255,255,255,.22);border-radius:13px;color:#fff;background:rgba(255,255,255,.1);font-size:19px;font-weight:900;cursor:pointer}
.controls button:disabled{opacity:.35}
.controls small{display:block;font-size:9px;letter-spacing:.04em}
.controls .primary{color:#173624;background:var(--gold);border-color:#ffe99b}
.modal{position:fixed;z-index:50;inset:0;display:none;place-items:center;padding:18px;background:rgba(1,19,14,.76);backdrop-filter:blur(5px)}
.modal.open{display:grid}
.modal-card{position:relative;width:min(100%,440px);max-height:90vh;overflow:auto;padding:26px 25px;border:2px solid #f4d98a;border-radius:24px;color:#26352f;background:#fffaf0;box-shadow:0 20px 60px rgba(0,0,0,.42)}
.modal-card.compact{width:min(100%,360px);text-align:center}
.modal-card h2{margin:0 0 13px;color:#126047;font-size:27px;text-align:center}
.new-game-image{display:block;width:min(100%,300px);height:auto;margin:0 auto 10px;object-fit:contain}
.modal-card h3{margin:19px 0 6px;color:#126047}
.modal-card p,.modal-card li{font-size:13px;line-height:1.75}
.modal-card ul{padding-left:1.4em}
.close{position:absolute;top:8px;right:10px;width:38px;height:38px;border:0;color:#496057;background:transparent;font-size:28px;cursor:pointer}
.wide-button,.modal-actions button{min-height:46px;padding:9px 20px;border:0;border-radius:999px;color:#fff;background:#17674f;font-weight:900;cursor:pointer}
.wide-button{width:100%;margin-top:10px}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.modal-actions button{color:#31423b;background:#ddd9cd}
.modal-actions .accent,.wide-button.accent{color:#2d331f;background:#f4ca4f}
.win-card{text-align:center}
.win-stars{color:#d79910;font-size:25px;letter-spacing:.2em}
.reward-total{margin:18px 0 10px;padding:14px;border-radius:16px;background:#fff0bc}
.reward-total span{display:block;font-size:11px;font-weight:800}
.reward-total strong{display:flex;align-items:center;justify-content:center;gap:7px;color:#9a5d00;font-size:38px}
.reward-total img{width:32px;height:32px}
.reward-details{display:grid;gap:4px;padding:8px 14px;text-align:left;font-size:12px}
.reward-details div{display:flex;justify-content:space-between}
.text-link{display:inline-block;margin-top:15px;color:#17674f;font-size:12px;font-weight:800}
@media (min-width:720px){
  :root{
    --card-w:clamp(58px,9.2vh,80px);
    --gap:clamp(8px,1.2vh,12px);
    --down-step:clamp(11px,1.8vh,17px);
    --up-step:clamp(20px,3.2vh,32px)
  }
  .game-board{min-height:calc(var(--card-h)*2 + var(--up-step)*12 + var(--gap) + 25px)}
  .statusbar{font-size:13px}
  .card:hover{filter:brightness(1.04)}
}
@media (max-width:420px){.title-screen{padding-inline:12px}.title-card{border-radius:24px}.title-home-link{min-height:32px;padding-inline:8px;font-size:9px}.title-visual{height:clamp(135px,27vh,205px)}.title-button{min-height:49px;font-size:15px}.topbar{gap:6px}.topbar h1{font-size:14px}.home-link{min-height:32px;padding-inline:8px;font-size:9px}.coin-pill{min-width:62px;padding:4px 7px}.sound-toggle{width:34px;height:34px;font-size:18px}.statusbar{gap:8px;padding-inline:8px;font-size:10px}.game-board{padding-inline:3px}.modal-card{padding:23px 18px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.card{transition:none}.card.hinted,.pile.hinted,.column.hinted{animation:none;outline:4px solid #ffe371}}