:root{--paper:#efeee6;--backdrop:#d6d3bd;--ink:#111;--muted:#6f6d5e;--exact:#2f7d4f;--present:#c8971e;--absent:#6f6d5e;--border:2.5px}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--backdrop);width:100%;height:100%;color:var(--ink);-webkit-tap-highlight-color:transparent;touch-action:manipulation;font-family:Archivo,Helvetica Neue,Arial,sans-serif;overflow:hidden}#app{flex-direction:column;justify-content:space-between;align-items:center;gap:8px;width:100%;height:100%;padding:12px;display:flex;position:relative}.hidden{display:none!important}body:has(.mg-room-strip) #app{padding-top:44px}@media (width<=720px){#app{padding-top:48px}}.hud-bar{border:var(--border) solid var(--ink);background:var(--paper);width:100%;max-width:520px;box-shadow:4px 4px 0 var(--ink);letter-spacing:.08em;border-radius:14px;flex:none;justify-content:space-between;align-items:center;gap:16px;padding:10px 16px;font-size:13px;font-weight:800;display:flex}.board-wrapper{flex:auto;justify-content:center;align-items:center;min-height:0;display:flex;position:relative}.board{flex-direction:column;gap:8px;display:flex}.board__row{gap:8px;display:flex}.board__row.is-shaking{animation:.4s shake}.tile{aspect-ratio:1;perspective:600px;width:clamp(38px,min(13vw,8.4vh),62px);position:relative}.tile__face{backface-visibility:hidden;border-radius:10px;justify-content:center;align-items:center;font-size:clamp(20px,min(7vw,4.6vh),32px);font-weight:900;line-height:1;transition:transform .42s;display:flex;position:absolute;inset:0}.tile__face--front{border:var(--border) solid #11111138;background:var(--paper);color:var(--ink);transform:rotateX(0)}.tile.is-filled .tile__face--front{border-color:var(--ink)}.tile__face--back{border:var(--border) solid var(--ink);color:var(--paper);background:var(--absent);transform:rotateX(180deg)}.tile.is-revealed .tile__face--front{transform:rotateX(-180deg)}.tile.is-revealed .tile__face--back{transform:rotateX(0)}.tile.is-exact .tile__face--back{background:var(--exact)}.tile.is-present .tile__face--back{background:var(--present)}.tile.is-absent .tile__face--back{background:var(--absent)}.toast{border:var(--border) solid var(--ink);background:var(--ink);color:var(--paper);letter-spacing:.08em;white-space:nowrap;opacity:0;pointer-events:none;z-index:5;border-radius:999px;padding:8px 16px;font-size:12px;font-weight:800;transition:opacity .18s,transform .18s;position:absolute;top:4px;left:50%;transform:translate(-50%,-8px)}.toast.is-shown{opacity:1;transform:translate(-50%)}.keyboard{flex-direction:column;flex:none;gap:6px;width:100%;max-width:560px;display:flex}.keyboard__row{justify-content:center;gap:5px;display:flex}.key{border:var(--border) solid var(--ink);background:var(--paper);min-width:0;max-width:46px;height:clamp(42px,7vh,54px);color:var(--ink);cursor:pointer;box-shadow:2px 2px 0 var(--ink);border-radius:8px;flex:auto;font-family:inherit;font-size:14px;font-weight:800;transition:transform 60ms,box-shadow 60ms,background .2s,color .2s}.key:active{box-shadow:none;transform:translate(2px,2px)}.key--wide{letter-spacing:.06em;max-width:78px;font-size:10px}.key.is-exact{background:var(--exact);color:var(--paper)}.key.is-present{background:var(--present);color:var(--paper)}.key.is-absent{background:var(--absent);color:#efeee680}.overlay{z-index:10;background:var(--backdrop);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px;display:flex;position:absolute;inset:0;overflow-y:auto}.overlay__title{letter-spacing:.04em;font-size:clamp(28px,7vw,44px);font-weight:900}.overlay__subtitle{max-width:30rem;color:var(--muted);font-size:14px;line-height:1.5}.overlay__answer{border:var(--border) solid var(--ink);background:var(--exact);color:var(--paper);box-shadow:4px 4px 0 var(--ink);letter-spacing:.16em;border-radius:12px;padding:10px 22px;font-size:clamp(22px,6vw,30px);font-weight:900}.overlay__score{font-size:15px;font-weight:700;line-height:1.6}.overlay__bests{letter-spacing:.08em;color:var(--muted);font-size:12px;font-weight:800;line-height:1.6}.overlay__hint{letter-spacing:.06em;font-size:13px;font-weight:800;animation:1.6s ease-in-out infinite pulse}.overlay .mg-lb{color:var(--ink)}.overlay .mg-lb__row{background:#1111110f}.overlay .mg-lb__row--me{background:#11111124;box-shadow:inset 0 0 0 1px #1116}.overlay .mg-lb__input{border:2px solid var(--ink);background:var(--paper);color:var(--ink)}.overlay .mg-lb__input:focus{border-color:var(--exact)}.overlay .mg-lb__save{border:2px solid var(--ink);background:var(--ink);color:var(--paper)}.countdown{z-index:20;color:var(--ink);pointer-events:none;text-shadow:6px 6px 0 var(--paper);justify-content:center;align-items:center;font-size:clamp(64px,20vw,140px);font-weight:900;display:none;position:absolute;inset:0}.countdown.is-shown{animation:.6s countdown-pop;display:flex}@keyframes countdown-pop{0%{opacity:0;transform:scale(.5)}40%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-7px)}40%,60%{transform:translate(7px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}