:root{
  --bg:#1a1a2e;
  --bg1:#16162a;
  --bg2:#222240;
  --tile-bg:#1a1a2ecc;
  --tile-border:#c8b833;
  --tile-empty-border:#c8b83366;
  --t1:#ffffff;
  --t2:#9999b0;
  --t3:#5a5a78;
  --correct:#1a1a2e;
  --correct-bg:#6aaa64;
  --present:#1a1a2e;
  --present-bg:#ffffff;
  --absent-bg:#4a4a5e;
  --absent-t:#888898;
  --key-bg:#3a3a55;
  --key-t:#ffffff;
  --key-correct-bg:#6b6b6b;
  --key-present-bg:#c8b833;
  --key-absent-bg:#2a2a3e;
  --key-absent-t:#55556a;
  --yellow:#c8b833;
  --gold:#e8d44d;
  --pink:#ef6a9a;
  --red:#e05555;
  --ov:rgba(10,10,20,.88);
  --r:4px;--r2:12px;--r4:24px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:'Manrope',sans-serif;background:var(--bg);color:var(--t1);min-height:100vh;overflow-x:hidden;overscroll-behavior:none}
button{font-family:inherit;cursor:pointer;border:none;outline:none}

/* Subtle star-like dots */
body::before{content:'';position:fixed;inset:0;background:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.15),transparent),radial-gradient(1px 1px at 40% 70%,rgba(255,255,255,.1),transparent),radial-gradient(1px 1px at 60% 20%,rgba(255,255,255,.12),transparent),radial-gradient(1px 1px at 80% 50%,rgba(255,255,255,.08),transparent),radial-gradient(1px 1px at 10% 80%,rgba(255,255,255,.1),transparent),radial-gradient(1px 1px at 90% 90%,rgba(255,255,255,.12),transparent),radial-gradient(1px 1px at 50% 50%,rgba(255,255,255,.08),transparent),radial-gradient(1px 1px at 70% 85%,rgba(255,255,255,.1),transparent);pointer-events:none;z-index:0}

.app{position:relative;z-index:1;width:100%;max-width:460px;margin:0 auto;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding:6px 8px}

/* ===== HEADER ===== */
.hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 2px 6px;flex-shrink:0}
.hdr-l{display:flex;align-items:center;gap:8px}
.logo{display:flex;align-items:center;gap:0}
.logo-char{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--yellow);color:#1a1a2e;font-family:'Unbounded',sans-serif;font-weight:900;font-size:.85rem;border-radius:3px;margin-right:2px;text-transform:uppercase}
.logo-char.number{background:var(--correct-bg)}
.logo-text{font-family:'Unbounded',sans-serif;font-weight:800;font-size:.85rem;color:var(--t1);margin-left:4px}

.hdr-r{display:flex;align-items:center;gap:6px}
.score{display:flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--tile-border);border-radius:20px;padding:4px 12px 4px 4px;font-weight:700;color:var(--yellow);overflow:visible;position:relative}
.score-icon{width:38px;height:38px;object-fit:contain;border-radius:8px;font-size:1rem;line-height:1;position:relative;z-index:10;margin-left:-2px;background:transparent}
.score-num{font-family:'Unbounded',sans-serif;font-weight:800;font-size:.78rem}
.ib{width:34px;height:34px;border-radius:50%;background:var(--bg2);border:1px solid #444460;color:var(--t2);display:flex;align-items:center;justify-content:center;font-size:.95rem;transition:.15s}
.ib:active{transform:scale(.9);background:#333355}

/* ===== BOARD ===== */
.bw{display:flex;align-items:center;justify-content:center;flex:1;overflow:hidden;min-height:0}
.board{display:flex;flex-direction:column;gap:6px}
.row{display:flex;gap:6px;justify-content:center}
.tile{
  width:var(--ts,58px);height:var(--ts,58px);
  border:2px solid var(--tile-empty-border);
  border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  font-family:'Unbounded',sans-serif;font-weight:800;
  font-size:var(--tf,1.6rem);
  text-transform:uppercase;
  background:var(--tile-bg);
  color:var(--t1);
  transition:border-color .15s;
  user-select:none;
}
.tile.a{border-color:var(--tile-border)}
.tile.pop{animation:pop .1s}
/* Correct = green bg, dark text */
.tile.ok{background:var(--correct-bg);border-color:var(--correct-bg);color:var(--correct)}
/* Present = yellow bg */
.tile.mb{background:var(--present-bg);border-color:var(--present-bg);color:var(--present)}
/* Absent = grey bg */
.tile.no{background:var(--absent-bg);border-color:var(--absent-bg);color:var(--t1)}
.tile.flip{animation:flip .45s ease forwards}

@keyframes pop{0%{transform:scale(.85)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.row.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.row.bounce .tile{animation:bnc .5s ease}
@keyframes bnc{0%,100%{transform:translateY(0)}40%{transform:translateY(-16px)}60%{transform:translateY(-6px)}}

/* ===== KEYBOARD ===== */
.kb{width:100%;display:flex;flex-direction:column;gap:6px;padding:10px 0 10px;flex-shrink:0}
.kr{display:flex;justify-content:center;gap:4px}
.key{
  height:48px;min-width:27px;padding:0 2px;
  border-radius:6px;
  background:var(--key-bg);color:var(--key-t);
  font-family:'Manrope',sans-serif;font-weight:800;font-size:.9rem;
  text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;
  transition:.12s;user-select:none;flex:1;max-width:38px;
}
.key:active{transform:scale(.9)}
.key.w{min-width:44px;max-width:50px;font-size:.85rem}
/* Keyboard colors matching tile colors */
.key.ok{background:var(--correct-bg);color:var(--correct)}
.key.mb{background:var(--present-bg);color:var(--present)}
.key.no{background:var(--key-absent-bg);color:var(--key-absent-t)}

/* ===== TOAST ===== */
.toast{position:fixed;top:70px;left:50%;transform:translateX(-50%) translateY(-16px);background:var(--bg2);border:1px solid var(--yellow);color:var(--t1);padding:10px 22px;border-radius:var(--r2);font-weight:700;font-size:.85rem;opacity:0;transition:.25s;pointer-events:none;z-index:500;text-align:center;backdrop-filter:blur(12px);white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== MODAL ===== */
.mo{position:fixed;inset:0;background:var(--ov);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;z-index:300;padding:24px}
.mo.show{display:flex}
.md{background:var(--bg2);border:1px solid #444460;border-radius:var(--r4);padding:30px 24px;text-align:center;max-width:340px;width:100%;animation:mIn .35s ease}
@keyframes mIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.md .em{font-size:2.8rem;margin-bottom:10px}
.md h2{font-family:'Unbounded',sans-serif;font-weight:800;font-size:1.15rem;margin-bottom:6px;color:var(--t1)}
.md .sub{color:var(--t2);font-size:.85rem;margin-bottom:16px}
.md .wr{font-family:'Unbounded',sans-serif;font-size:1.4rem;font-weight:900;color:var(--yellow);letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px}
.md .se{font-size:.85rem;color:var(--pink);margin-bottom:16px;font-weight:700}
.bp{background:var(--yellow);color:#1a1a2e;padding:13px 32px;border-radius:var(--r2);font-weight:800;font-size:.95rem;transition:.12s;display:inline-block;font-family:'Manrope',sans-serif}
.bp:active{transform:scale(.95)}

/* ===== CONFETTI ===== */
.cc{position:fixed;inset:0;pointer-events:none;z-index:250;overflow:hidden}
.cp{position:absolute;top:-20px;animation:cf linear forwards}
@keyframes cf{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

/* ===== PANEL ===== */
.po{position:fixed;inset:0;background:var(--ov);backdrop-filter:blur(8px);z-index:400;display:none}.po.show{display:block}
.pn{position:fixed;top:0;right:-100%;bottom:0;width:88%;max-width:380px;background:var(--bg1);border-left:1px solid #333355;z-index:401;overflow-y:auto;transition:right .3s cubic-bezier(.4,0,.2,1);padding:0 0 40px}
.pn.open{right:0}
.ph{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid #333355;position:sticky;top:0;background:var(--bg1);z-index:2}
.ph h2{font-family:'Unbounded',sans-serif;font-weight:800;font-size:1.1rem}
.pc{width:34px;height:34px;border-radius:50%;background:var(--bg2);color:var(--t2);display:flex;align-items:center;justify-content:center;font-size:1rem}
.ps{padding:18px 20px 8px}
.pst{font-family:'Unbounded',sans-serif;font-weight:700;font-size:.72rem;color:var(--yellow);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;display:flex;align-items:center;gap:8px;position:relative;overflow:visible}
.zema-icon{width:32px;height:32px;object-fit:contain;border-radius:6px;position:relative;z-index:10;margin-left:-4px;background:transparent}
.ls{display:flex;gap:6px;flex-wrap:wrap}
.lb{width:42px;height:42px;border-radius:6px;background:var(--bg2);border:2px solid #444460;color:var(--t2);font-family:'Unbounded',sans-serif;font-weight:800;font-size:.95rem;display:flex;align-items:center;justify-content:center;transition:.15s}
.lb:active{transform:scale(.92)}
.lb.act{background:var(--yellow);border-color:var(--yellow);color:#1a1a2e;box-shadow:0 0 20px rgba(200,184,51,.3)}
.stat-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #2a2a45}
.stat-label{font-size:.85rem;color:var(--t2)}
.stat-val{font-family:'Unbounded',sans-serif;font-weight:800;font-size:.9rem;color:var(--yellow)}

/* ===== FALLING STICKERS BG ===== */
#bgStickers{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg-sticker{position:absolute;animation:stickerFall linear forwards,stickerSway ease-in-out infinite;will-change:transform,opacity}
@keyframes stickerFall{
  0%{transform:translateY(0);opacity:var(--so,0.9)}
  100%{transform:translateY(calc(100vh + 220px));opacity:0}
}
@keyframes stickerSway{
  0%{margin-left:0}
  30%{margin-left:var(--sw,30px)}
  70%{margin-left:calc(var(--sw,30px) * 0.3)}
  100%{margin-left:0}
}

/* ===== TOGGLE SWITCH ===== */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.toggle-label{font-size:.85rem;color:var(--t2)}
.toggle-switch{position:relative;width:44px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--bg2);border:1px solid #444460;border-radius:24px;cursor:pointer;transition:.25s}
.toggle-slider::before{content:'';position:absolute;left:2px;top:2px;width:18px;height:18px;background:var(--t2);border-radius:50%;transition:.25s}
.toggle-switch input:checked+.toggle-slider{background:var(--yellow);border-color:var(--yellow)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px);background:#1a1a2e}

/* Loading */
.loading{text-align:center;padding:20px;color:var(--t2)}

/* Error */
.error{background:var(--bg2);border:1px solid var(--red);color:var(--red);padding:20px;border-radius:var(--r2);text-align:center;margin:20px}

/* Dev Panel */
.dev-panel{
  width:100%;
  background:rgba(255,0,0,.15);
  border:1px solid #ff0000;
  border-radius:var(--r2);
  padding:8px;
  display:none;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-family:'Unbounded',sans-serif;
  font-size:.7rem;
  margin-bottom:8px;
  backdrop-filter:blur(10px);
}
.dev-panel.show{display:flex}
.dev-word{color:#ff6b6b;font-weight:900;letter-spacing:.2em;font-size:.95rem}
.dev-btn{background:#ff0000;color:#fff;border:none;padding:6px 14px;border-radius:6px;font-weight:800;cursor:pointer;font-size:.7rem;text-transform:uppercase}
.dev-btn:active{transform:scale(.95)}

::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#444460;border-radius:4px}