.conn{max-width:640px;margin:0 auto}
.gtp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.iconbtn{background:var(--card);border:1px solid var(--line);border-radius:10px;font-size:22px;width:48px;height:48px;cursor:pointer;color:#fff;flex:none}
#solved{display:grid;gap:8px;margin-bottom:8px}
.solved{border-radius:10px;padding:12px 10px;text-align:center;color:#111}.solved strong{display:block;text-transform:uppercase;font-size:14px;letter-spacing:.5px}.solved span{font-size:14px}
.lv1{background:#f2d45c}.lv2{background:#8fd17a}.lv3{background:#8fb8f0}.lv4{background:#c6a2f2}
#grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ctile{aspect-ratio:1.35;background:#2a2238;border:2px solid #3a3150;border-radius:10px;color:#fff;font-weight:800;font-size:clamp(11px,3.3vw,15px);line-height:1.15;padding:4px;cursor:pointer;text-transform:uppercase;overflow-wrap:anywhere;hyphens:auto}
.ctile:hover{border-color:#7a6aa0}.ctile.sel{background:#e9e1ff;color:#1a1020;border-color:#fff}
.shake{animation:sh .35s}@keyframes sh{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.mist{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0;color:#bbb;font-size:14px}.dot{width:12px;height:12px;border-radius:50%;background:var(--acc)}.dot.used{background:#3a3640}
#controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}#controls .btn:disabled{opacity:.45;cursor:not-allowed}
#result{margin-top:20px;text-align:center}.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}.stats4 b{display:block;font-size:26px;color:#fff}.stats4 div{font-size:12px;color:#aaa}
.dist{text-align:left;max-width:360px;margin:8px auto 16px}.dist div{display:flex;gap:6px;align-items:center;margin:3px 0;font-size:13px}.dist i{font-style:normal;background:#3a3640;padding:1px 6px;text-align:right;border-radius:3px}.dist i.me{background:var(--btn)}
#statsdlg{background:var(--card);color:#eee;border:1px solid var(--line);border-radius:14px;padding:22px;max-width:420px;width:calc(100% - 32px);text-align:center}#statsdlg::backdrop{background:#000a}
#toast{position:fixed;left:50%;top:80px;transform:translate(-50%,-20px);background:#fff;color:#111;font-weight:800;padding:10px 18px;border-radius:8px;opacity:0;pointer-events:none;transition:.2s;z-index:50}#toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:420px){#grid{gap:6px}.ctile{aspect-ratio:1.05;border-radius:8px}}
.ctile{overflow-wrap:normal;word-break:normal;hyphens:manual}
.ctile.long{font-size:clamp(9.5px,2.65vw,13px);letter-spacing:-.2px}
.ctile.xlong{font-size:clamp(9px,2.4vw,12px);overflow-wrap:anywhere}
#mist{display:inline-flex;gap:6px}.dot{display:inline-block}
.ctile.xlong{text-transform:none;font-size:clamp(10px,2.9vw,14px);overflow-wrap:normal;letter-spacing:-.2px}