:root{--felt:#07533a;--felt2:#032d24;--gold:#ffd66b;--red:#d52d45;--black:#142036;--card:#fffdf4;--text:#f7fff9;--muted:#afd2c4;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--gap:3px;--card-w:calc((100% - 18px)/7);--card-h:calc(var(--card-w)*1.42);--board-h:clamp(470px,66vh,690px)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -10%,#127554 0,#063e31 38%,#021b17 100%);color:var(--text);font-family:Inter,"Noto Sans SC",system-ui,sans-serif}body{overscroll-behavior:none}.hidden{display:none!important}button{font:inherit}.app{width:min(100%,560px);margin:auto;padding:calc(7px + var(--safe-top)) 8px calc(16px + var(--safe-bottom))}.topbar{height:50px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:7px}.topbar>a{display:grid;place-items:center;width:35px;height:35px;border:1px solid #d5ffee55;border-radius:11px;color:#fff;text-decoration:none;font-size:30px;background:#052e27aa}.topbar span{font-size:9px;font-weight:700;letter-spacing:1.7px;color:#9dffe0}.topbar h1{font-size:19px;line-height:1;margin:2px 0}.account{text-align:right;max-width:130px}.account b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account small{color:var(--gold);font-size:11px}.account i{font-style:normal}.statusbar{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:3px 0 5px}.statusbar div{padding:5px 2px;text-align:center;border:1px solid #c7ffe42b;border-radius:9px;background:#052b24b8}.statusbar small{display:block;font-size:9px;color:var(--muted)}.statusbar strong{font-size:14px}.message{min-height:17px;margin:2px 4px 5px;color:#d7fff0;font-size:11px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board{position:relative;min-height:var(--board-h);padding:7px 5px 5px;border:1px solid #b5ffe044;border-radius:16px;background:radial-gradient(circle at 50% 8%,#107252 0,var(--felt) 38%,var(--felt2) 100%);box-shadow:0 16px 45px #0008,inset 0 0 55px #001912;user-select:none;touch-action:none;overflow:hidden}.upper-row{height:calc(var(--card-h) + 12px);display:grid;grid-template-columns:repeat(7,1fr);gap:var(--gap);align-items:start}.upper-space{width:100%}.card-slot{position:relative;width:100%;aspect-ratio:.704;border:2px solid #dcfff0c7;border-radius:clamp(4px,1.3vw,8px);background:#00382bd6;color:#f1fff6dc;padding:0;display:grid;place-items:center;font-size:clamp(18px,6vw,31px);touch-action:none}.foundation:nth-of-type(3),.foundation:nth-of-type(4){color:#ff9aaacc}.foundation>span{pointer-events:none}.tableau{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:var(--gap);height:calc(var(--board-h) - 90px)}.tableau-column{position:relative;min-width:0;height:100%;border-radius:7px;touch-action:none}.tableau-column:empty:before{content:"K";position:absolute;inset:0 auto auto 0;width:100%;aspect-ratio:.704;border:2px dashed #dffff0a8;border-radius:6px;background:#00382b9c;display:grid;place-items:center;color:#ffffff78;font-weight:800}.card{position:absolute;left:0;top:var(--top,0);z-index:var(--z,1);width:100%;aspect-ratio:.704;border:1px solid #c8c2b5;border-radius:clamp(4px,1.2vw,7px);background:linear-gradient(145deg,#fffef8,#e9e5d9);box-shadow:0 2px 4px #001c15aa;padding:clamp(2px,.8vw,5px);text-align:left;font-weight:800;line-height:.9;touch-action:none;cursor:pointer}.card .rank{display:block;font-size:clamp(10px,3.4vw,20px)}.card .suit{display:block;font-size:clamp(11px,4vw,23px);margin-top:1px}.card.red{color:var(--red)}.card.black{color:var(--black)}.card.face-down{border-color:#b9d9ff;background:repeating-linear-gradient(45deg,#183c82 0 4px,#eef6ff 4px 6px,#2c5dc4 6px 10px);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px #3161b7,0 2px 4px #001b17}.card.face-down>*{display:none}.upper-card{inset:0;z-index:3}.card.selected{outline:3px solid var(--gold);outline-offset:-1px;transform:translateY(-3px);filter:drop-shadow(0 0 6px #ffd66b)}.card.hinted,.card-slot.hinted,.tableau-column.hinted:before{outline:3px solid #6efbd5;outline-offset:1px;animation:pulse 1s infinite}.card.dragging{filter:brightness(1.15);opacity:.9}.stock.has-cards{border-style:solid;background:repeating-linear-gradient(45deg,#173d83 0 4px,#edf5ff 4px 6px,#2c5dc4 6px 10px);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px #3161b7}.stock.recycle:after{content:"↻";color:#e7fff5;font-size:27px}.stock-count{position:absolute;right:2px;bottom:1px;padding:1px 3px;border-radius:5px;background:#001b16cc;color:#fff;font-size:8px}.hint-text{position:absolute;left:50%;bottom:8px;z-index:100;transform:translateX(-50%);max-width:92%;padding:6px 10px;border-radius:12px;background:#001b16e8;border:1px solid #74f4cc;color:#dffff4;font-size:11px;white-space:nowrap}.controls{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:7px}.controls button{grid-column:span 2}.controls button:nth-child(4){grid-column:2/span 2}.controls button,.ranking button,dialog button{min-height:36px;border:1px solid #a9f3d455;border-radius:10px;background:#073d31;color:#effff8;font-weight:750;font-size:10px;padding:5px 2px}.controls button{min-height:42px;font-size:12px}.controls button:disabled{opacity:.38}.controls button:active,.ranking button:active{transform:translateY(1px)}.ranking{margin-top:9px;padding:10px 12px;border:1px solid #a9f3d42c;border-radius:14px;background:#05281fc4}.ranking-head{display:flex;align-items:center;justify-content:space-between}.ranking h2{font-size:14px;margin:0}.ranking-head button{min-height:28px;padding:3px 10px}.ranking ol{margin:7px 0;padding-left:24px;font-size:12px}.ranking li{padding:3px 0;color:#eafff7}.ranking p{margin:6px 0 0;color:var(--muted);font-size:9px}.overlay{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:20px;background:#001914cc;backdrop-filter:blur(7px)}.panel{width:min(92vw,390px);padding:24px 20px;border:1px solid #a3ffdc66;border-radius:22px;background:linear-gradient(155deg,#0c4e3e,#05251f);box-shadow:0 24px 80px #000b;text-align:center}.logo{font-size:44px;color:#dce9ff}.logo i{font-style:normal;color:#ff6078}.panel h2{margin:6px 0;font-size:25px}.panel p{color:#cae8dd;font-size:13px;line-height:1.6}.panel button{display:block;width:100%;min-height:48px;margin:9px 0;border:1px solid #caffea66;border-radius:13px;background:#0c5b46;color:#fff;font-weight:800}.panel button.primary{background:linear-gradient(135deg,#f6c84c,#dd8929);color:#1c261f;border:0}.panel small{display:block;margin-top:10px;color:#9ac7b6;font-size:10px}dialog{width:min(90vw,420px);border:1px solid #9affdb66;border-radius:18px;background:#07352b;color:#effff8;padding:18px;box-shadow:0 25px 80px #000c}dialog::backdrop{background:#001b16cc}dialog h2{margin-top:0}dialog ul{padding-left:21px;color:#d6f5e9;font-size:13px;line-height:1.7}dialog button{width:100%;font-size:13px}@keyframes pulse{50%{filter:brightness(1.35)}}@media(max-height:700px){:root{--board-h:445px}.board{min-height:var(--board-h)}.ranking{margin-top:7px}.message{margin-bottom:3px}}@media(min-width:500px){:root{--gap:5px}.app{padding-left:12px;padding-right:12px}.controls button{font-size:12px;min-height:42px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Unified in-play focus mode */
.controls button{min-height:42px;touch-action:manipulation}
.app.is-playing [data-player-state],.app.is-playing [data-settlement],.app.is-playing .account,.app.is-playing .ranking,.app.is-playing footer{display:none!important}
.app.is-playing{max-width:680px;padding-top:calc(5px + var(--safe-top))}.app.is-playing .topbar{height:44px}.app.is-playing .board{box-shadow:0 0 0 1px #7ef2c655,0 18px 60px #0009}.app.is-playing .controls{position:sticky;top:4px;z-index:20;background:#041b1ae8;backdrop-filter:blur(8px);border-radius:12px;padding:5px}
@media(max-width:420px){.app.is-playing{padding-left:5px;padding-right:5px}.app.is-playing .controls{gap:5px}.app.is-playing .controls button{min-height:42px;padding:8px 7px}}