:root{--bg:#0b3d2e;--bg-deep:#07281f;--panel:#06241cc7;--edge:#78dcaa38;--text:#eaf6ef;--muted:#9dc4b2;--good:#3ddc84;--bad:#ff5a4f;--gold:#f5b942}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:radial-gradient(ellipse at 50% 0%, #11604a 0%, var(--bg) 45%, var(--bg-deep) 100%) fixed;min-height:100%;color:var(--text);touch-action:manipulation;overscroll-behavior:none;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button{font:inherit;color:inherit;cursor:pointer}h1,h2,h3,p{margin:0}.game-shell{width:100%;max-width:520px;min-height:100dvh;padding:max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));margin:0 auto}.game{flex-direction:column;gap:10px;display:flex}.top{grid-template-columns:1fr auto 1fr;align-items:start;gap:8px;display:grid}.chip{background:var(--panel);border:1px solid var(--edge);min-height:44px;color:var(--muted);border-radius:14px;align-items:center;gap:6px;padding:5px 8px;font-size:13px;line-height:1.15;display:flex}.chip-daily{cursor:pointer;justify-self:start}.chip-streak{justify-self:end}.chip-streak b{color:var(--text);font-size:22px}.chip-icon{font-size:20px}.logo{letter-spacing:-.03em;text-align:center;font-family:Arial Black,Impact,sans-serif;font-size:clamp(22px,7.4vw,42px);font-weight:900;line-height:1}.logo span{color:#fff;text-shadow:0 3px #00000059}.logo em{background:linear-gradient(#ffd36b,#e8921c);color:#0000;filter:drop-shadow(0 3px #00000059);-webkit-background-clip:text;background-clip:text;font-style:normal}.logo.big{margin-top:12dvh;font-size:clamp(40px,13vw,72px)}.logo-wrap{flex-direction:column;align-items:center;gap:4px;display:flex}.mode-pill{border:1px solid var(--edge);color:var(--muted);background:#3ddc8426;border-radius:999px;padding:2px 16px;font-size:14px}.scorebar{justify-content:center;gap:12px;display:flex}.score{background:var(--panel);border:1px solid var(--edge);border-radius:14px;align-items:center;gap:10px;min-width:0;padding:6px 14px;display:flex}.score.good{flex:1.25}.score.bad{flex:1}.score-icon{border-radius:50%;flex:none;place-items:center;width:34px;height:34px;font-size:26px;display:grid}.score.good .score-icon{color:var(--good)}.score.bad .score-icon{background:var(--bad);color:#3a0a07;font-size:18px;font-weight:900}.score-label{flex-direction:column;flex:1;line-height:1.05;display:flex}.score-label b{font-size:20px}.score-label small{letter-spacing:.04em;color:var(--muted);font-size:11px}.score-value{font-size:36px;font-weight:800;line-height:1}.score.good .score-value{color:var(--good)}.score.bad .score-value{color:var(--bad)}.stacks{--h:clamp(150px, 23dvh, 260px);grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.stack{border:1.5px solid var(--edge);text-align:center;background:linear-gradient(#0a3c2ee6,#06281ee6);border-radius:16px;flex-direction:column;align-items:stretch;min-height:44px;padding:4px 5px 8px;transition:border-color .15s,box-shadow .15s,transform .1s;display:flex;position:relative}.stack:disabled{cursor:default}.stack:not(:disabled):active{transform:scale(.98)}.stack.good{border-color:var(--good);box-shadow:inset 0 0 14px #3ddc8459,0 0 10px #3ddc8440}.stack.bad{border-color:#ff5a4fa6;box-shadow:inset 0 0 12px #ff5a4f2e}@media (hover:hover){.stack:not(:disabled):hover{border-color:#8be8b6}}.stack:focus-visible,.btn:focus-visible,.discard-btn:focus-visible,.round-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.stack-head{flex-direction:column;justify-content:center;align-items:center;height:48px;line-height:1;display:flex}.stack-total{color:#fff;font-size:32px;font-weight:800}.stack-preview{height:14px;color:var(--muted);white-space:nowrap;margin-top:2px;font-size:12px;font-weight:700}.stack-preview.good{color:var(--good)}.stack-preview.bad{color:var(--bad)}.stack-cards{height:var(--h);position:relative;container-type:inline-size}.stack-cards>.card,.ghost-card>.card{left:0;top:calc(var(--i) * min(36cqw, (var(--h) - 140cqw) / max(var(--n) - 1, 1)));position:absolute}.ghost{pointer-events:none;z-index:5;position:absolute;inset:0}.ghost-card{position:absolute;inset:0}.ghost.stackjack .ghost-card{animation:.7s ease-in forwards sweep}.ghost.bust .ghost-card{filter:grayscale(.4);animation:.6s ease-in forwards collapse}.ghost-card>.card{animation:none!important}.stack.stackjack{animation:.5s ease-out pulse}.stack.bust{animation:.4s ease-out shake}.banner{text-align:center;text-shadow:0 2px 4px #000000b3;font-family:Arial Black,sans-serif;font-size:clamp(13px,4.6vw,22px);line-height:1.1;animation:.9s ease-out forwards banner;position:absolute;top:30%;left:-4px;right:-4px}.banner small{font-size:1.3em;display:block}.ghost.stackjack .banner{color:var(--good)}.ghost.bust .banner{color:var(--bad)}@keyframes sweep{0%{opacity:1;transform:none}35%{opacity:1;transform:none}to{opacity:0;transform:translateY(-70px)scale(.9)}}@keyframes collapse{0%{opacity:1;transform:none}35%{opacity:1;transform:none}to{opacity:0;transform:translateY(30px)scale(.85)}}@keyframes banner{0%{opacity:0;transform:scale(.6)}20%{opacity:1;transform:scale(1.1)}75%{opacity:1}to{opacity:0;transform:translateY(-10px)}}@keyframes pulse{0%{box-shadow:0 0 #3ddc84cc}to{box-shadow:0 0 0 18px #3ddc8400}}@keyframes shake{0%,to{transform:none}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.panel{background:var(--panel);border:1px solid var(--edge);border-radius:22px;flex-direction:column;gap:10px;padding:12px 14px 10px;display:flex}.panel-row{justify-content:space-around;align-items:flex-start;gap:14px;display:flex}.next{flex-direction:column;flex:1;align-items:center;gap:6px;display:flex}.label{letter-spacing:.06em;color:var(--muted);font-size:15px;font-weight:800}.next-slot{width:clamp(76px,22vw,120px)}.empty-card{aspect-ratio:5/7;border:2px dashed var(--edge);border-radius:12px}.discards{border:1px solid var(--edge);background:#00000038;border-radius:14px;flex:1.15;padding:8px}.discards-head{letter-spacing:.04em;color:var(--muted);justify-content:space-between;margin-bottom:8px;font-size:14px;font-weight:800;display:flex}.discard-slots{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.slot{aspect-ratio:5/7;background:#0000002e;border:2px dashed #78dcaa59;border-radius:8px}.hint{text-align:center;border:1px solid var(--edge);color:var(--muted);background:#00000047;border-radius:12px;padding:10px;font-size:15px}.discard-btn{color:#fff;letter-spacing:.03em;background:linear-gradient(#ff7468,#d9453a);border:0;border-radius:14px;justify-content:center;align-self:center;align-items:center;gap:10px;width:min(100%,360px);min-height:54px;font-size:19px;font-weight:900;display:flex;box-shadow:0 4px #8f241c,0 6px 12px #00000059}.discard-btn:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px #8f241c}.discard-btn:disabled{color:#7fa092;cursor:not-allowed;background:#3b5a4f;box-shadow:0 4px #27403a}.remaining{text-align:center;color:var(--muted);font-size:13px}.bottom{justify-content:space-between;align-items:center;display:flex}.kbd-hint{color:var(--muted);font-size:12px;display:none}.round-btn{border:1px solid var(--edge);background:var(--panel);width:48px;height:48px;color:var(--muted);border-radius:50%;place-items:center;font-size:24px;font-weight:800;display:grid}.home{flex-direction:column;align-items:center;gap:16px;display:flex}.tagline{color:var(--muted);text-align:center;margin-bottom:12px}.home-main{color:#3a2400;background:linear-gradient(#ffd36b,#e8921c);border:0;border-radius:20px;flex-direction:column;align-items:center;gap:4px;width:100%;padding:22px 16px;display:flex;box-shadow:0 5px #9a5f0b,0 10px 20px #00000059}.home-main:active{transform:translateY(3px);box-shadow:0 2px #9a5f0b}.home-main-title{letter-spacing:.02em;font-size:26px;font-weight:900}.home-main-sub{opacity:.8;font-size:14px;font-weight:600}.home-alt{letter-spacing:.03em;background:var(--panel);border:2px solid var(--edge);border-radius:18px;width:100%;padding:18px;font-size:20px;font-weight:800}.home-streak{margin-top:8px;font-size:18px;font-weight:700}.home-links{gap:10px;margin-top:8px;display:flex}.home-links button{background:var(--panel);border:1px solid var(--edge);min-height:48px;color:var(--muted);border-radius:14px;padding:0 18px;font-size:16px}.btn{border:0;border-radius:14px;min-height:48px;padding:0 22px;font-size:17px;font-weight:800}.btn.primary{color:#052217;background:linear-gradient(#4ade90,#25a964);box-shadow:0 3px #146b3f}.btn.gold{color:#3a2400;background:linear-gradient(#ffd36b,#e8921c);box-shadow:0 3px #9a5f0b}.btn.secondary{border:1px solid var(--edge);color:var(--text);background:#ffffff14}.modal-backdrop{z-index:50;background:#000000a6;place-items:center;padding:16px;animation:.2s fade;display:grid;position:fixed;inset:0}.modal{border:1px solid var(--edge);text-align:center;background:linear-gradient(#0f4a39,#082d22);border-radius:22px;flex-direction:column;gap:14px;width:100%;max-width:400px;max-height:92dvh;padding:20px;display:flex;overflow:auto}.modal h2{font-size:22px}.modal-actions{justify-content:center;gap:10px;display:flex}.modal-actions.column{flex-direction:column}.modal-actions .btn{flex:1}@keyframes fade{0%{opacity:0}}.tut-step{color:var(--muted);font-size:13px}.tut-cards{justify-content:center;align-items:center;gap:8px;display:flex}.tut-cards .card{width:64px}.tut-total{margin-left:8px;font-size:34px;font-weight:900;line-height:1}.tut-total small{font-size:12px;display:block}.tut-total.good{color:var(--good)}.tut-total.bad{color:var(--bad)}.setting-row{cursor:pointer;justify-content:space-between;align-items:center;min-height:48px;font-size:18px;display:flex;position:relative}.setting-row input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.switch{background:#35584b;border-radius:999px;width:52px;height:30px;transition:background .15s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .15s;position:absolute;top:3px;left:3px}.setting-row input:checked~.switch{background:var(--good)}.setting-row input:checked~.switch:after{transform:translate(22px)}.setting-row input:focus-visible~.switch{outline:3px solid var(--gold)}.result-big{flex-direction:column;align-items:center;display:flex}.result-big strong{color:var(--good);font-size:72px;line-height:1}.result-big span{letter-spacing:.08em;color:var(--muted);font-weight:800}.result-list{text-align:left;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.result-list li{background:#00000038;border-radius:10px;justify-content:space-between;padding:8px 12px;display:flex}.result-list span{color:var(--muted)}.share-msg{min-height:18px;color:var(--good);font-size:14px}.stats{flex-direction:column;gap:16px;padding-top:24px;display:flex}.stats h2{text-align:center}@media (width>=600px){.game-shell{max-width:560px}.game{gap:14px;padding-top:18px}.stacks{--h:clamp(200px, 30dvh, 320px);gap:12px}.kbd-hint{display:block}}@media (height<=700px){.game{gap:6px}.panel{gap:6px;padding:8px 12px}.next-slot{width:clamp(64px,18vw,90px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.card{aspect-ratio:5/7;-webkit-user-select:none;user-select:none;background:linear-gradient(#fdfcf8,#efebe2);border-radius:8px;width:100%;font-family:Arial Black,Helvetica Neue,Arial,sans-serif;position:relative;overflow:hidden;box-shadow:inset 0 1px #fff,0 2px 5px #00000073;container-type:inline-size}.card.red{color:#d92b2b}.card.black{color:#14171a}.card-corner{flex-direction:column;align-items:center;line-height:1;display:flex;position:absolute}.card-corner.tl{top:5cqw;left:8cqw}.card-corner.br{bottom:4cqw;right:8cqw;transform:rotate(0)}.card-rank{letter-spacing:-.04em;font-size:25cqw;font-weight:900}.card-suit{margin-top:0;font-size:22cqw}.card-corner.tl{flex-direction:row;justify-content:space-between;align-items:flex-start;left:8cqw;right:8cqw}.card-corner.tl .card-suit{margin-top:2cqw}.card-center{text-align:center;font-size:62cqw;line-height:1;position:absolute;top:52%;left:0;right:0;transform:translateY(-50%)}.card-corner.br .card-rank{font-size:25cqw}@keyframes deal{0%{opacity:0;transform:translateY(-40px)scale(.9)}to{opacity:1;transform:none}}@keyframes pop{0%{opacity:.2;transform:translateY(-26px)}to{opacity:1;transform:none}}.card.deal{animation:.28s ease-out deal}.card.pop{animation:.22s ease-out pop}
