:root{--ad-slot-width:160px}@media (width<=1200px){aside.ad{display:none}}*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f8fafc;--panel:#fff;--line:#e2e8f0;--text:#1e293b;--muted:#64748b;--accent:#1e293b;--accent-strong:#0f172a;--radius:8px;--radius-lg:12px;--shadow-card:0 12px 32px #0f172a1f;--column-max:900px;--board-max:min(100vw - 24px, 100dvh - 180px)}body{background-color:var(--bg);color:var(--text);overscroll-behavior-y:contain;-webkit-tap-highlight-color:transparent;min-height:100dvh;font-family:system-ui,-apple-system,Segoe UI,sans-serif}a,button,select,[role=button]{touch-action:manipulation}.board-wrap{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.hidden{display:none!important}header{padding:12px 20px;padding:calc(12px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 12px calc(20px + env(safe-area-inset-left));border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;display:flex}.header-brand{align-items:center;gap:10px;display:flex}.header-logo{width:32px;height:32px}.header-title{font-size:1.2rem;font-weight:700}.header-home{color:var(--muted);font-size:.9rem;text-decoration:none}@media (hover:hover){.header-home:hover{color:var(--text)}}.header-actions{align-items:center;gap:12px;display:flex}.header-sound{background-color:var(--panel);width:36px;height:36px;color:var(--text);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;justify-content:center;align-items:center;padding:0;font-family:inherit;font-size:1.05rem;display:inline-flex}@media (hover:hover){.header-sound:hover{border-color:var(--accent)}}main{grid-template-columns:var(--ad-slot-width) minmax(0, var(--column-max)) var(--ad-slot-width);padding:24px 16px 48px;padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right));justify-content:center;gap:24px;display:grid}main .game-column{flex-direction:column;align-items:center;gap:16px;display:flex}@media (width<=1200px){main{grid-template-columns:minmax(0, var(--column-max))}}.controls,.toolbar{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.controls select,.controls button,.toolbar button{background-color:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;padding:8px 14px;font-family:inherit;font-size:.9rem}@media (hover:hover){.controls select:hover,.controls button:hover:not(:disabled),.toolbar button:hover:not(:disabled){border-color:var(--accent)}}.controls button:disabled,.toolbar button:disabled{color:var(--muted);cursor:default;opacity:.55}.controls button[aria-pressed=true],.toolbar button.active,.mode-tabs button[aria-selected=true]{border-color:var(--text);background-color:#f1f5f9}.controls button.primary,.toolbar button.primary{background-color:var(--text);border-color:var(--text);color:var(--panel);font-weight:600}@media (hover:hover){.controls button.primary:hover:not(:disabled),.toolbar button.primary:hover:not(:disabled){background-color:var(--accent-strong);border-color:var(--accent-strong)}}.icon{vertical-align:-.15em;width:1em;height:1em}.controls .check-label{color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;font-size:.9rem;display:flex}.controls .check-label input{accent-color:var(--accent)}.hud{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:18px;font-size:.9rem;display:flex}.hud strong{color:var(--text);font-variant-numeric:tabular-nums}.result{width:min(100%,520px);padding:18px 20px;padding-bottom:calc(18px + env(safe-area-inset-bottom));text-align:center;background-color:var(--panel);border:1px solid var(--line);z-index:20;border-bottom:none;border-radius:16px 16px 0 0;flex-direction:column;align-items:center;gap:10px;line-height:1.5;animation:.2s ease-out result-rise;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -12px 32px #0f172a24}@keyframes result-rise{0%{opacity:0;transform:translate(-50%,24px)}}.result h2{color:var(--text);font-size:1.5rem}.result p{color:var(--muted);font-variant-numeric:tabular-nums}.result .stat-grid{justify-content:center;gap:18px;display:flex}.result .stat-grid div{flex-direction:column;display:flex}.result .stat-grid strong{color:var(--text);font-variant-numeric:tabular-nums;font-size:1.2rem}.result .stat-grid span{color:var(--muted);font-size:.72rem}.overlay-actions,.overlay-buttons{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px;display:flex}.result button{background-color:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);white-space:nowrap;cursor:pointer;padding:9px 18px;font-family:inherit;font-size:.95rem}@media (hover:hover){.result button:hover{border-color:var(--text)}}.result button.primary{background-color:var(--text);border-color:var(--text);color:var(--panel);font-weight:600}@media (hover:hover){.result button.primary:hover{background-color:var(--accent-strong)}}article{width:100%;max-width:680px;color:var(--muted);flex-direction:column;gap:20px;margin-top:24px;font-size:.95rem;line-height:1.7;display:flex}article h2{color:var(--text);border-bottom:1px solid var(--line);padding-bottom:6px;font-size:1.2rem}article ul{padding-left:20px}article table{border-collapse:collapse;width:100%;max-width:440px}article td,article th{border:1px solid var(--line);text-align:left;padding:6px 12px}article kbd{background-color:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:4px;padding:1px 6px;font-size:.85em}article a{color:var(--accent-strong)}footer{text-align:center;padding:24px;padding-bottom:calc(24px + env(safe-area-inset-bottom));color:var(--muted);border-top:1px solid var(--line);font-size:.85rem}footer a{color:var(--accent-strong)}@media (pointer:coarse){.controls select,.controls button,.toolbar button,.result button{min-height:44px;font-size:1rem}.controls .check-label{min-height:44px}.header-home{align-items:center;min-height:44px;display:inline-flex}.header-sound{width:44px;height:44px}}@media (width<=640px){header{padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:6px;padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}main{padding:12px 12px 40px;padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}main .game-column{gap:12px}main .game-column>.hud{order:-3;gap:8px 16px}main .game-column>.board-wrap{order:-2}main .game-column>.controls{order:1}main .game-column>article{order:2}.footer-more{display:none}.controls{gap:8px}.controls select,.controls button{padding:8px 12px}}:root{--red:#dc2626}.controls{gap:8px}.controls .game-picker{background-color:var(--panel);border:1px solid var(--line);border-radius:var(--radius);align-items:stretch;padding:0;display:flex;overflow:hidden}.controls .game-picker:focus-within{border-color:var(--accent)}.controls .game-picker button{color:var(--muted);background:0 0;border:none;border-radius:0;padding:8px 12px;font-size:1rem;line-height:1}@media (hover:hover){.controls .game-picker button:hover{background-color:var(--bg);color:var(--text)}}.controls .game-picker label{color:var(--muted);cursor:text;align-items:center;padding-left:12px;display:flex}.controls .game-picker input{width:3.5em;color:var(--text);font-variant-numeric:tabular-nums;cursor:text;background:0 0;border:none;padding:8px 4px;font-family:inherit;font-size:.9rem}.controls .game-picker input:focus{outline:none}.board-wrap{position:relative}#board{--card-w:clamp(34px, min(7vw, 8.2vh), 78px)}#board .card-slot.nudge{border-color:var(--red);animation:.4s ease-out nudge}@keyframes nudge{0%,to{transform:translate(calc(var(--cx) * var(--col-step)), var(--row-y,0px))}25%{transform:translate(calc(var(--cx) * var(--col-step) - 4px), var(--row-y,0px))}75%{transform:translate(calc(var(--cx) * var(--col-step) + 4px), var(--row-y,0px))}}#overlay.stuck h2{color:var(--red)}@media (width<=640px){#board{--card-w:clamp(30px, min(7vw, 8.2vh), 78px)}}.card-table{--card-w:clamp(38px, min(8.4vw, 8.2vh), 86px);--card-h:calc(var(--card-w) * 1.4);--gap:calc(var(--card-w) * .14);--col-step:calc(var(--card-w) + var(--gap));--row-gap:calc(var(--card-h) * .34);--tab-top:calc(var(--card-h) + var(--row-gap));--pad:calc(var(--card-w) * .22);--radius:calc(var(--card-w) * .09);--felt:#f1f5f9;--slot-line:#cbd5e1;--slot-mark:#cbd5e1;--card-face:#fff;--card-edge:#cbd5e1;--card-red:#dc2626;--card-black:#1e293b;--card-back:#cbd5e1;--card-back-line:#b4bfcd;--select:#3b82f6;--select-wash:#3b82f61a;--columns:8;--rows:3.8;width:calc(var(--columns) * var(--col-step) - var(--gap) + 2 * var(--pad) + 2px);height:calc(var(--tab-top) + var(--card-h) * var(--rows) + 2 * var(--pad) + 2px);padding:var(--pad);background-color:var(--felt);border:1px solid var(--line,#e2e8f0);-webkit-user-select:none;user-select:none;touch-action:none;isolation:isolate;border-radius:14px;transition:height .16s ease-out;position:relative}.card-slots,.card-layer{inset:var(--pad);position:absolute}.card-layer{pointer-events:none}.card-slot{width:var(--card-w);height:var(--card-h);border:2px dashed var(--slot-line);border-radius:var(--radius);transform:translate(calc(var(--cx) * var(--col-step)), var(--row-y,0px));font-size:calc(var(--card-w) * .45);color:var(--slot-mark);justify-content:center;align-items:center;line-height:1;display:flex;position:absolute}.card-slot.row-tableau{--row-y:var(--tab-top)}.card-slot.tall{height:calc(var(--card-h) * var(--rows));border-radius:var(--radius) var(--radius) 0 0;padding-top:calc(var(--card-h) * .28);border-bottom:none;align-items:flex-start}.card-slot.solid{border-style:solid}.card-slot.filled{border-color:#0000}.card-slot.target{border-color:var(--select);background-color:var(--select-wash);border-style:solid}.card{width:var(--card-w);height:var(--card-h);border-radius:var(--radius);background-color:var(--card-face);box-shadow:0 1px 2px #0f172a1f, inset 0 0 0 1px var(--card-edge);transform:translate(calc((var(--cx) + var(--ox,0)) * var(--col-step) + var(--drag-x,0px)), calc(var(--row-y,0px) + var(--oy,0) * var(--card-h) + var(--drag-y,0px)));cursor:default;pointer-events:auto;transition:transform .16s ease-out;position:absolute;overflow:hidden}.card.row-tableau{--row-y:var(--tab-top)}.card.red{color:var(--card-red)}.card.black{color:var(--card-black)}.card.gone{display:none}.card.grabbable{cursor:grab}.card.selected{box-shadow:0 0 0 2px var(--select), 0 2px 6px #0f172a29}.card.dragging{cursor:grabbing;box-shadow:0 10px 22px #0f172a33, inset 0 0 0 1px var(--card-edge);transition:none}.card-layer.dragging .card{pointer-events:none}.card-face,.card-back{position:absolute;inset:0}.card .corner{align-items:baseline;gap:calc(var(--card-w) * .05);font-weight:700;line-height:1;font-size:calc(var(--card-w) * .3);font-variant-numeric:tabular-nums;display:flex;position:absolute}.card .corner.tl{top:calc(var(--card-w) * .07);left:calc(var(--card-w) * .07)}.card .corner.br{bottom:calc(var(--card-w) * .07);right:calc(var(--card-w) * .07);transform:rotate(180deg)}.card .corner i{font-size:.82em;font-style:normal}.card .pip{font-size:calc(var(--card-w) * .62);opacity:.9;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.card-back{background-color:var(--card-back);background-image:repeating-linear-gradient(45deg, transparent 0, transparent calc(var(--card-w) * .06), var(--card-back-line) calc(var(--card-w) * .06), var(--card-back-line) calc(var(--card-w) * .1));border-radius:var(--radius);box-shadow:inset 0 0 0 calc(var(--card-w) * .05) var(--card-face);display:none}.card.down .card-face{display:none}.card.down .card-back{display:block}
