:root{
  --bg-1:#17122b; --bg-2:#241844; --bg-3:#0d0a1c;
  --surface:#211a3c; --surface-2:#2a2150; --card:#251d46;
  --border:#3a2f5e; --border-soft:#332a52;
  --text:#f3effb; --muted:#a99fce; --muted-2:#7d7399;
  --correct:#34d399; --correct-ink:#04231a;
  --present:#f7b83a; --present-ink:#3a2600;
  --absent:#39305a; --absent-ink:#b7addb;
  --accent:#a78bfa; --accent-2:#8b5cf6; --accent-glow:rgba(167,139,250,.45);
  --pink:#f472b6;
  --key-bg:#4a3f70; --key-wide-bg:#40365f; --key-absent-bg:#2a2344; --key-absent-ink:#6a6090;
  --glow-1:rgba(139,92,246,.28); --glow-2:rgba(52,211,153,.14);
  --disp:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Space Grotesk",ui-monospace,"SF Mono",Menlo,monospace;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--body);color:var(--text);background:var(--bg-3);overflow:hidden;position:relative;-webkit-font-smoothing:antialiased}
.bg-glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 45% at 18% 8%, var(--glow-1), transparent 60%),
    radial-gradient(55% 40% at 88% 92%, var(--glow-2), transparent 60%),
    radial-gradient(70% 60% at 50% 50%, var(--bg-2), var(--bg-1) 55%, var(--bg-3) 100%);}
.bg-glow::after{content:"";position:absolute;inset:0;opacity:.4;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:3px 3px;mix-blend-mode:screen}

#app{position:relative;z-index:1;height:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column}
.screen{display:none;flex-direction:column;height:100%;padding:14px;animation:screenIn .4s cubic-bezier(.2,.7,.2,1)}
.screen.active{display:flex}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- botões base ---------- */
.btn{width:100%;border:none;border-radius:15px;padding:16px;cursor:pointer;font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:.3px;transition:transform .12s,box-shadow .2s,filter .2s}
.btn-primary{background:linear-gradient(150deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 12px 28px var(--accent-glow)}
.btn-primary:hover{filter:brightness(1.06)} .btn-primary:active{transform:translateY(2px)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;filter:grayscale(.3)}
.btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);background:rgba(167,139,250,.08)}
.btn-text{background:transparent;color:var(--muted);font-size:15px;font-weight:600;padding:10px}
.btn-text:hover{color:var(--accent)}

.icon-btn{width:42px;height:42px;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:19px;cursor:pointer;display:grid;place-items:center;transition:.15s}
.icon-btn:hover{color:var(--text);border-color:var(--accent)}

/* ---------- HOME ---------- */
#home{align-items:center;justify-content:space-between}
.topbar-home{width:100%;display:flex;justify-content:space-between}
.brand{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px}
.logo-tiles{display:flex;gap:7px}
.logo-tiles span{width:46px;height:54px;border-radius:12px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:27px;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);animation:drop .6s backwards cubic-bezier(.2,.9,.25,1)}
.logo-tiles span:nth-child(1){background:linear-gradient(155deg,#8b5cf6,#7c3aed);animation-delay:.02s}
.logo-tiles span:nth-child(2){background:linear-gradient(155deg,#34d399,#10b981);animation-delay:.08s}
.logo-tiles span:nth-child(3){background:linear-gradient(155deg,#f7b83a,#f59e0b);color:#3a2600;animation-delay:.14s}
.logo-tiles span:nth-child(4){background:linear-gradient(155deg,#a78bfa,#8b5cf6);animation-delay:.20s}
.logo-tiles span:nth-child(5){background:linear-gradient(155deg,#f472b6,#ec4899);animation-delay:.26s}
@keyframes drop{from{opacity:0;transform:translateY(-16px) rotateX(-40deg)}to{opacity:1;transform:none}}
.tagline{color:var(--muted);font-size:15px}

.home-actions{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.level-pill{background:var(--surface);border:1.5px solid var(--border);color:var(--text);border-radius:30px;padding:9px 18px;font-family:var(--mono);font-weight:600;font-size:14px;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:8px}
.level-pill:hover{border-color:var(--accent)}
.level-pill .lv-dot{width:9px;height:9px;border-radius:50%}
.daily-locked{width:100%;background:rgba(247,184,58,.09);border:1px solid rgba(247,184,58,.28);border-radius:15px;padding:14px;text-align:center;color:var(--muted);font-size:14px;line-height:1.5}
.daily-locked b{color:var(--present)} .daily-locked .cd{font-family:var(--mono);font-size:20px;color:var(--text);margin-top:4px}

.stats-row{display:flex;gap:10px;width:100%}
.stat{flex:1;background:rgba(255,255,255,.03);border:1px solid var(--border-soft);border-radius:14px;padding:12px 8px;text-align:center}
.stat .n{font-family:var(--mono);font-weight:700;font-size:22px}
.stat .l{font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

/* ---------- topbar (telas internas) ---------- */
.topbar{display:flex;align-items:center;gap:10px;width:100%;margin-bottom:8px}
.back-btn{width:40px;height:40px;border-radius:11px;background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:19px;cursor:pointer;display:grid;place-items:center;transition:.15s;flex:none}
.back-btn:hover{color:var(--text);border-color:var(--accent)}
.topbar-title{flex:1;text-align:center;font-family:var(--disp);font-weight:700;font-size:18px}
.topbar-spacer,.topbar-right{width:40px;flex:none;display:flex;justify-content:flex-end}
.topbar-right{font-family:var(--mono);font-weight:600;font-size:14px;min-width:56px}

/* ---------- folhas (howto / settings) ---------- */
.sheet{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:4px 2px 10px}
.lead{font-size:16px;line-height:1.55;color:var(--text)}
.para{font-size:15px;line-height:1.55;color:var(--muted)} .para b{color:var(--text)}
.sub{font-family:var(--disp);font-size:15px;font-weight:700;color:var(--text);margin-top:6px;text-transform:uppercase;letter-spacing:.5px}
.example{display:flex;justify-content:center;padding:6px 0}
.ex-row{display:flex;gap:8px}
.ex-tile{width:48px;height:48px;border-radius:11px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:24px}
.ex-tile.correct{background:linear-gradient(160deg,#3ee0a6,#10b981);color:var(--correct-ink)}
.ex-tile.present{background:linear-gradient(160deg,#ffc94d,#f59e0b);color:var(--present-ink)}
.ex-tile.absent{background:var(--absent);color:var(--absent-ink)}
.legend{list-style:none;display:flex;flex-direction:column;gap:10px}
.legend li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--muted)} .legend b{color:var(--text)}
.dot{width:20px;height:20px;border-radius:6px;flex:none}
.dot.correct{background:linear-gradient(160deg,#3ee0a6,#10b981)}
.dot.present{background:linear-gradient(160deg,#ffc94d,#f59e0b)}
.dot.absent{background:var(--absent)}

.field-label{display:block;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.name-input{width:100%;background:var(--surface);border:1.5px solid var(--border);border-radius:13px;padding:13px 15px;color:var(--text);font-family:var(--body);font-size:16px;font-weight:500;transition:.2s}
.name-input::placeholder{color:var(--muted-2)}
.name-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}

.level-cards{display:flex;flex-direction:column;gap:10px}
.level-card{text-align:left;background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:13px 15px;cursor:pointer;transition:.15s;display:flex;gap:12px;align-items:flex-start}
.level-card:hover{border-color:var(--accent)}
.level-card.sel{border-color:transparent;background:linear-gradient(150deg,rgba(167,139,250,.22),rgba(139,92,246,.12));box-shadow:0 0 0 1.5px var(--accent) inset}
.lc-badge{width:11px;height:11px;border-radius:50%;margin-top:5px;flex:none}
.lc-name{font-family:var(--disp);font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px}
.lc-mult{font-family:var(--mono);font-size:12px;color:var(--muted-2);background:rgba(255,255,255,.05);padding:1px 7px;border-radius:20px}
.lc-desc{font-size:13px;color:var(--muted);line-height:1.45;margin-top:3px}

.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface);border:1px solid var(--border-soft);border-radius:14px;padding:14px 15px}
.toggle-title{font-weight:600;font-size:15px} .toggle-desc{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.4}
.switch{width:52px;height:30px;border-radius:20px;background:var(--surface-2);border:1.5px solid var(--border);cursor:pointer;position:relative;flex:none;transition:.2s}
.switch .knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--muted);transition:.2s}
.switch[aria-checked="true"]{background:linear-gradient(150deg,var(--accent),var(--accent-2));border-color:transparent}
.switch[aria-checked="true"] .knob{left:24px;background:#fff}

/* ---------- JOGO ---------- */
#game{gap:12px;justify-content:space-between}
.board-wrap{flex:1;display:flex;align-items:center;justify-content:center;width:100%}
.board{display:grid;grid-template-rows:repeat(var(--rows,6),1fr);gap:7px}
.row{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.row.shake{animation:shake .45s}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.tile{width:min(15.5vw,60px);height:min(15.5vw,60px);perspective:600px}
.tile-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.3,.7,.3,1);transform-style:preserve-3d}
.tile.reveal .tile-inner{transform:rotateX(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:12px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:min(7vw,28px);text-transform:uppercase}
.front{background:var(--surface);border:2px solid var(--border);color:var(--text)}
.tile.filled .front{border-color:var(--muted-2);animation:pop .12s}
@keyframes pop{50%{transform:scale(1.08)}}
.back{transform:rotateX(180deg)}
.back.correct{background:linear-gradient(160deg,#3ee0a6,#10b981);color:var(--correct-ink);border:none}
.back.present{background:linear-gradient(160deg,#ffc94d,#f59e0b);color:var(--present-ink);border:none}
.back.absent{background:var(--absent);color:var(--absent-ink);border:none}
.tile.win .tile-inner{animation:bounce .6s}
@keyframes bounce{0%,100%{transform:rotateX(180deg) translateY(0)}40%{transform:rotateX(180deg) translateY(-16px)}60%{transform:rotateX(180deg) translateY(-6px)}}

.hint-bar{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-hint{width:auto;padding:9px 16px;font-size:14px;border-radius:12px;background:rgba(247,184,58,.14);border:1px solid rgba(247,184,58,.35);color:var(--present)}
.btn-hint:hover{filter:brightness(1.1)} .btn-hint:disabled{opacity:.4}
.hint-text{font-size:14px;color:var(--muted)}

.timer-pill{color:var(--present)} .timer-pill.danger{color:#ff6b6b;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.4}}

/* ---------- teclado ---------- */
.keyboard{display:flex;flex-direction:column;gap:7px;width:100%;padding-bottom:2px}
.krow{display:flex;gap:5px;justify-content:center}
.key{flex:1;min-width:0;height:52px;border-radius:9px;border:none;cursor:pointer;background:var(--key-bg);color:var(--text);font-family:var(--mono);font-weight:600;font-size:16px;text-transform:uppercase;transition:transform .1s,background .3s,color .3s;display:grid;place-items:center;user-select:none}
.key:active{transform:scale(.94)}
.key.wide{flex:1.6;font-size:13px;letter-spacing:.4px;background:var(--key-wide-bg)}
.key.correct{background:linear-gradient(160deg,#3ee0a6,#10b981);color:var(--correct-ink)}
.key.present{background:linear-gradient(160deg,#ffc94d,#f59e0b);color:var(--present-ink)}
.key.absent{background:var(--key-absent-bg);color:var(--key-absent-ink)}

/* ---------- overlay resultado ---------- */
.overlay{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(10,8,20,.72);backdrop-filter:blur(6px)}
.overlay.show{display:flex;animation:fade .3s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.result{width:100%;max-width:380px;background:linear-gradient(180deg,var(--card),#201839);border:1px solid var(--border);border-radius:26px;padding:26px 24px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.55);animation:rise .45s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.result .emoji{font-size:44px;line-height:1}
.result h2{font-family:var(--disp);font-weight:800;font-size:25px;margin:12px 0 4px}
.result .sub{color:var(--muted);font-size:15px;margin-bottom:16px}
.word-reveal{display:inline-flex;gap:6px;margin-bottom:18px}
.word-reveal span{width:38px;height:44px;border-radius:9px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:22px;background:linear-gradient(160deg,#3ee0a6,#10b981);color:var(--correct-ink)}
.word-reveal.lose span{background:var(--surface-2);border:1.5px solid var(--border);color:var(--text)}
.result-stats{display:flex;gap:10px;margin-bottom:16px}
.result-stats .stat{background:rgba(255,255,255,.04)}
.countdown{background:rgba(255,255,255,.04);border:1px solid var(--border-soft);border-radius:14px;padding:12px;margin-bottom:16px}
.cd-label{font-size:12px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.5px}
.cd-clock{font-family:var(--mono);font-weight:700;font-size:26px;color:var(--text);margin-top:3px;letter-spacing:1px}
.result-actions{display:flex;flex-direction:column;gap:10px}

#confetti{position:fixed;inset:0;z-index:19;pointer-events:none;display:none}
.toast{position:fixed;top:22px;left:50%;transform:translateX(-50%) translateY(-16px);background:#efe9fb;color:#1c1330;padding:11px 20px;border-radius:12px;font-weight:600;font-size:14px;z-index:30;opacity:0;transition:.25s;box-shadow:0 10px 30px rgba(0,0,0,.35);max-width:90%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-height:700px){
  .logo-tiles span{width:40px;height:46px;font-size:23px}
  .key{height:46px}
  .tile{width:min(14vw,52px);height:min(14vw,52px)}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.08ms!important}}

/* ---------- seletor de temas ---------- */
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.theme-sw{cursor:pointer;border-radius:14px;padding:8px 6px;border:1.5px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:7px;transition:.15s;background:var(--surface)}
.theme-sw:hover{border-color:var(--accent)}
.theme-sw.sel{border-color:transparent;box-shadow:0 0 0 2px var(--accent) inset}
.sw-prev{width:100%;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:4px;border:1px solid rgba(255,255,255,.06)}
.sw-prev .sw-dot{width:14px;height:14px;border-radius:50%}
.sw-prev .sw-t{width:9px;height:14px;border-radius:3px}
.sw-name{font-size:11px;font-weight:600;color:var(--muted);text-align:center;line-height:1.1}
.theme-sw.sel .sw-name{color:var(--text)}
.custom-theme{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--border-soft);border-radius:14px;padding:14px;margin-top:12px}
.ct-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--text)}
.seg{display:flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:3px}
.seg-btn{border:none;background:transparent;color:var(--muted);padding:7px 14px;border-radius:8px;font-family:var(--body);font-weight:600;font-size:13px;cursor:pointer;transition:.15s}
.seg-btn.on{background:linear-gradient(150deg,var(--accent),var(--accent-2));color:#fff}
#customColor{width:48px;height:34px;border:1px solid var(--border);border-radius:8px;background:none;cursor:pointer;padding:2px}
.accent-chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{width:27px;height:27px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.15s;padding:0}
.chip:hover{transform:scale(1.12)}
.chip.on{border-color:var(--text)}