.gtp{max-width:760px;margin:0 auto}
.gtp-top{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}.pill{background:#1c1726;border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:13px;color:#ddd}.pill b{color:var(--acc2)}
.attrs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.grp .h3{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--acc2);margin-bottom:6px}
.grp dl div{display:flex;justify-content:space-between;font-size:13px;padding:2px 0;border-bottom:1px solid #221c30}.grp dd{font-weight:800;min-width:22px;text-align:right}
.a1{color:#9a9a9a}.a2{color:#e6e6e6}.a3{color:#f3c64b}.a4{color:#5fd46a}.q{color:#888}
.hints{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}.hint{flex:1;min-width:150px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;font-size:13px;color:#aaa}.hint b{display:block;color:#fff;font-size:15px;margin-top:2px}
.hint button{margin-top:6px;background:none;border:1px solid var(--acc);color:var(--acc2);border-radius:6px;padding:5px 10px;font-weight:700;cursor:pointer;font-size:13px}.hint button:disabled{opacity:.45;cursor:not-allowed}
#board{display:grid;gap:6px;justify-content:center;margin:18px 0}.trow{display:grid;grid-template-columns:repeat(var(--n),minmax(0,52px));gap:6px}
.tile{aspect-ratio:1;border:2px solid #3a3150;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(16px,5vw,26px);text-transform:uppercase}
@media(max-width:480px){.trow{grid-template-columns:repeat(var(--n),minmax(0,calc((100vw - 48px - (var(--n) - 1)*6px)/var(--n))))}.trow .tile{max-width:52px}}
.tile.filled{border-color:#7a6aa0}.tile.g{background:#2f9e44;border-color:#2f9e44}.tile.y{background:#c9a227;border-color:#c9a227;color:#111}.tile.b{background:#3a3640;border-color:#3a3640;color:#ccc}
.shake{animation:sh .35s}@keyframes sh{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
#msg{min-height:22px;text-align:center;color:var(--acc2);font-weight:700}
#kb{max-width:520px;margin:8px auto 0;user-select:none}.krow{display:flex;gap:5px;justify-content:center;margin-bottom:6px}
.key{flex:1;max-width:44px;height:52px;border:0;border-radius:6px;background:#4a4458;color:#fff;font-weight:700;font-size:15px;cursor:pointer}.key.wide{max-width:70px;flex:1.5;font-size:12px}
.key.g{background:#2f9e44}.key.y{background:#c9a227;color:#111}.key.b{background:#24202b;color:#777}
#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)}
.gtp-note{color:#999;font-size:12px;text-align:center;margin-top:24px}
@media(max-width:640px){.attrs{grid-template-columns:1fr 1fr}.grp:nth-child(3){grid-column:1/-1}.grp:nth-child(3) dl{columns:2;column-gap:14px}}
.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}
#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)}