/* ============================================================
   Line Aura — treino de linha (modo Ninja)
   CSS puro + custom properties + BEM. Tokens iguais à família
   (copiados do launcher / vision.css). UI em PT-BR.
   ============================================================ */

:root {
  --cream:#F6F2E9; --cream-soft:#FBF8F1; --paper:#FFFFFF;
  --ink:#1A1818; --ink-soft:#4A4A4A; --muted:#8A8580;
  --border:#E5E0D2;
  --pink:#FF2D6E; --pink-dark:#D11857; --pink-soft:#FFE7EE; --pink-glow:rgba(255,45,110,0.35);
  --dark:#161413; --dark-2:#232120; --dark-3:#2E2A28;
  --yellow:#FFB800; --orange:#FF6B35; --green:#4ADE80; --red:#EF4444;
  --shadow-sm:0 1px 0 rgba(0,0,0,0.02),0 4px 12px rgba(0,0,0,0.04);
  --shadow-md:0 4px 12px rgba(0,0,0,0.06),0 12px 32px rgba(0,0,0,0.06);
}
html.dark {
  --cream:#131211; --cream-soft:#1A1817; --paper:#1F1D1B;
  --ink:#F0EDE5; --ink-soft:#B8B3A8; --muted:#807A70;
  --border:#2D2925; --pink-soft:#3A1822;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { width:100%; min-height:100%; }
body {
  background:var(--cream); color:var(--ink);
  font-family:'Poppins',system-ui,sans-serif; font-weight:500;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s, color .2s;
  min-height:100vh; overflow:hidden;
}
.hidden { display:none !important; }

.f-display { font-family:'DK Lemon Yellow Sun','Lilita One',cursive; font-weight:400; letter-spacing:.01em; }
.f-comic   { font-family:'LINT MCCREE BB','Bangers',cursive; font-weight:400; letter-spacing:.06em; }
.f-hand    { font-family:'Angela Notes','Caveat',cursive; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }

.grid-paper {
  background-color:var(--cream);
  background-image:linear-gradient(rgba(20,20,20,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,20,.05) 1px,transparent 1px);
  background-size:28px 28px;
}
html.dark .grid-paper {
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:32px 32px;
}

/* ─── top chrome (waffle + perfil + tema) ─── */
.la-topleft  { position:fixed; top:14px; left:14px; z-index:70; }
.la-topright { position:fixed; top:14px; right:14px; z-index:70; display:flex; align-items:center; gap:8px; }
body.playing .la-topleft, body.playing .la-topright, body.playing #abr-fab-line { display:none; }

.tbtn { width:40px; height:40px; background:var(--paper); border:1.5px solid var(--border); border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); transition:all .12s; }
.tbtn:hover { border-color:var(--ink); }
.tbtn svg { width:18px; height:18px; }

.waffle-btn { width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:var(--paper); border:1.5px solid var(--border); border-radius:10px; color:var(--ink-soft); cursor:pointer; transition:border-color .12s, color .12s; padding:0; }
.waffle-btn:hover { border-color:var(--pink); color:var(--pink); }
#aura-launcher { position:absolute; top:calc(100% + 8px); left:0; background:var(--paper); border:1.5px solid var(--border); border-radius:16px; padding:10px; box-shadow:var(--shadow-md); z-index:60; }
#aura-launcher.hidden { display:none; }
.al-brand { display:flex; align-items:center; gap:8px; padding:7px 8px 9px; border-radius:10px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--border); margin-bottom:4px; transition:color .12s; }
.al-brand:hover { color:var(--pink); }
.al-brand span { font-family:'DK Lemon Yellow Sun','Lilita One',cursive; font-size:.98rem; line-height:1; }
.al-brand sup { color:var(--pink); font-size:.55em; }
.al-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.al-tile { display:flex; flex-direction:column; align-items:center; gap:7px; width:78px; padding:10px 6px; border-radius:14px; text-decoration:none; transition:background .12s; }
.al-tile:hover { background:var(--pink-soft); }
.al-ic { width:58px; height:58px; display:flex; align-items:center; justify-content:center; }
.al-ic svg { width:100%; height:100%; display:block; }
.al-lbl { font-size:.72rem; font-weight:700; color:var(--ink-soft); text-align:center; line-height:1.05; }
.al-tile.current { background:var(--pink-soft); cursor:default; }
.al-tile.current .al-lbl { color:var(--pink); }

/* perfil (chip avatar + nick) */
.la-chip { width:auto; gap:6px; padding:0 10px; }
.la-chip .av { font-size:1.05rem; line-height:1; }
.la-chip .nm { font-size:.82rem; font-weight:700; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ─── botões ─── */
.btn-p { background:var(--pink); color:#fff; border:0; border-radius:12px; padding:.75rem 1.5rem; font-weight:800; font-size:.95rem; cursor:pointer; transition:transform .1s, background .15s; }
.btn-p:hover { background:var(--pink-dark); transform:translateY(-1px); }
.btn-s { background:var(--paper); color:var(--ink); border:1.5px solid var(--border); border-radius:12px; padding:.6rem 1.1rem; font-weight:700; cursor:pointer; transition:border-color .12s, transform .1s; }
.btn-s:hover { border-color:var(--ink); }

/* ─── home ─── */
.la-home {
  position:fixed; inset:0; z-index:10;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem 1.3rem; gap:.2rem;
}
.la-title { font-size:clamp(3.6rem,13vw,7rem); line-height:.88; color:var(--ink); }
.la-title span { color:var(--pink); text-shadow:0 0 44px var(--pink-glow); }
.la-sub { font-size:clamp(1.1rem,3vw,1.6rem); color:var(--pink); transform:rotate(-2deg); margin:.45rem 0 1.1rem; }
.la-tag { max-width:420px; font-size:.92rem; line-height:1.5; color:var(--ink-soft); margin-bottom:1.7rem; }
.la-tag b { color:var(--ink); }
.la-cta {
  font-family:'LINT MCCREE BB','Bangers',cursive; letter-spacing:.05em;
  font-size:1.7rem; color:#fff; background:var(--pink); border:0; cursor:pointer;
  padding:.7rem 3rem; border-radius:16px; box-shadow:0 5px 0 var(--pink-dark);
  transition:transform .09s, box-shadow .09s, filter .12s;
}
.la-cta:hover { filter:brightness(1.06); }
.la-cta:active { transform:translateY(4px); box-shadow:0 1px 0 var(--pink-dark); }
.la-record { margin-top:1.1rem; font-size:.82rem; color:var(--muted); font-weight:600; }
.la-times { display:flex; gap:.5rem; }
.la-opt { display:flex; flex-direction:column; align-items:center; gap:.35rem; margin-bottom:1rem; }
.la-opt-lbl { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.la-modes { display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; margin:1rem 0 .9rem; }
.la-mode { width:210px; max-width:44vw; background:var(--paper); border:1.5px solid var(--border); border-radius:18px; padding:1.1rem .9rem; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:.4rem; text-align:center; transition:border-color .12s, transform .1s, box-shadow .12s; }
.la-mode:hover { border-color:var(--pink); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.la-mode.sel { border-color:var(--pink); background:var(--pink-soft); }
.la-mode-emoji { font-size:2rem; line-height:1; }
.la-mode-name { font-family:'LINT MCCREE BB','Bangers',cursive; font-size:1.3rem; color:var(--ink); letter-spacing:.03em; }
.la-mode-desc { font-size:.78rem; color:var(--ink-soft); line-height:1.35; }
.la-ninja-opts { display:flex; flex-direction:column; align-items:center; }
body.freemode #la-timer, body.freemode #la-streak { display:none; }

/* ─── barra de sequência (≥85%, estilo guitar hero) ─── */
.la-streak { position:absolute; left:16px; bottom:16px; z-index:32; display:flex; flex-direction:column; align-items:center; gap:6px; opacity:.5; transition:opacity .15s; }
.la-streak.on { opacity:1; }
.la-streak.pop { animation:laStreakPop .22s ease; }
@keyframes laStreakPop { 0%{ transform:scale(1.14); } 100%{ transform:scale(1); } }
.la-streak-num { font-family:'LINT MCCREE BB','Bangers',cursive; font-size:2.3rem; line-height:1; color:#FFB800; text-shadow:0 2px 0 rgba(0,0,0,.45); }
.la-streak.hot .la-streak-num { color:#FF2D6E; }
.la-streak-bar { position:relative; width:20px; height:160px; border-radius:999px; background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.22); overflow:hidden; box-shadow:inset 0 0 8px rgba(0,0,0,.3); }
.la-streak-fill { position:absolute; left:0; right:0; bottom:0; height:0%; background:linear-gradient(#FFD86B,#FFB800); transition:height .18s cubic-bezier(.22,1,.36,1); }
.la-streak.hot .la-streak-fill { background:linear-gradient(#FF6FA0,#FF2D6E); box-shadow:0 0 14px rgba(255,45,110,.8); }
.la-streak-lbl { font-family:'Poppins',sans-serif; font-weight:800; font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.85); text-align:center; line-height:1.1; text-shadow:0 1px 2px rgba(0,0,0,.5); }

/* ─── prancheta do menu (rabiscar no fundo) ─── */
.la-doodle { position:absolute; top:0; left:0; z-index:0; touch-action:none; cursor:crosshair; }
.la-home-content { position:relative; z-index:1; width:100%; max-width:560px; display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.la-home-content button, .la-home-content a { pointer-events:auto; }
.la-time { font-family:'Poppins',sans-serif; font-weight:700; font-size:.85rem; color:var(--ink); background:var(--paper); border:1.5px solid var(--border); border-radius:999px; padding:.42rem 1.05rem; cursor:pointer; transition:background .12s, border-color .12s, color .12s; }
.la-time:hover { border-color:var(--ink); }
.la-time.sel { background:var(--pink); border-color:var(--pink); color:#fff; }

/* ─── tela de jogo ─── */
.la-game { position:fixed; inset:0; z-index:20; background:#100e0d; }
#la-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:crosshair; }

.la-hud {
  position:absolute; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; pointer-events:none;
}
.la-hud > * { pointer-events:auto; }
.la-iconbtn {
  width:42px; height:42px; border-radius:12px; cursor:pointer;
  background:rgba(255,255,255,.10); border:1.5px solid rgba(255,255,255,.18);
  color:#fff; font-size:1.2rem; display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .12s, transform .1s;
}
.la-iconbtn:hover { background:rgba(255,255,255,.18); }
.la-iconbtn:active { transform:translateY(1px); }
.la-score {
  font-family:'LINT MCCREE BB','Bangers',cursive; letter-spacing:.05em;
  font-size:2rem; color:#fff; min-width:60px; text-align:center;
  text-shadow:0 2px 0 rgba(0,0,0,.4);
}

/* ─── timer + combo (partida 60s) ─── */
.la-timer {
  position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:31;
  font-family:'LINT MCCREE BB','Bangers',cursive; letter-spacing:.04em;
  font-size:2.3rem; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.45);
}
.la-timer.low { color:#EF4444; animation:laPulse .5s ease-in-out infinite; }
@keyframes laPulse { 0%,100%{ transform:translateX(-50%) scale(1); } 50%{ transform:translateX(-50%) scale(1.12); } }
.la-combo {
  font-family:'LINT MCCREE BB','Bangers',cursive; color:#FFB800;
  font-size:1.7rem; min-width:64px; text-align:right; text-shadow:0 2px 0 rgba(0,0,0,.4);
}
.la-combo.pop { animation:laComboPop .25s ease; }
@keyframes laComboPop { 0%{ transform:scale(1.5); } 100%{ transform:scale(1); } }

/* ─── tela de resultado ─── */
.la-result {
  position:fixed; inset:0; z-index:40;
  display:flex; align-items:center; justify-content:center; padding:1.4rem;
  background:rgba(16,14,13,.78); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.la-result-card {
  background:var(--paper); border:1.5px solid var(--border); border-radius:22px;
  box-shadow:0 18px 60px rgba(0,0,0,.4); padding:1.8rem 1.7rem; width:100%; max-width:420px; text-align:center;
  animation:laResIn .35s cubic-bezier(.22,1,.36,1);
}
@keyframes laResIn { from{ opacity:0; transform:translateY(16px) scale(.96); } to{ opacity:1; transform:none; } }
.la-result-title { font-size:3rem; color:var(--pink); line-height:.9; margin-bottom:1.1rem; }
.la-metrics { display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.1rem; }
.la-metric { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.la-metric-lbl { font-weight:700; font-size:.9rem; color:var(--ink); flex:0 0 92px; text-align:left; }
.la-metric-stars { letter-spacing:2px; font-size:1.1rem; flex:1; text-align:center; }
.la-metric-stars .on { color:#FFB800; }
.la-metric-stars .off { color:var(--border); }
.la-metric-num { font-family:'LINT MCCREE BB','Bangers',cursive; font-size:1.4rem; color:var(--ink); flex:0 0 46px; text-align:right; }
.la-result-sub { font-size:.82rem; color:var(--muted); font-weight:600; margin-bottom:.9rem; }
.la-result-prompt { font-weight:700; font-size:.98rem; color:var(--ink); margin-bottom:1rem; line-height:1.4; }
.la-result-actions { display:flex; flex-direction:column; gap:.55rem; align-items:center; }
.la-result-actions .la-cta { display:inline-block; text-decoration:none; font-size:1.4rem; padding:.6rem 2.2rem; }
/* "Começar a Desenhar" — Poppins (tem ç), contorno rosa: evidente mas secundário */
.la-cta2 { display:inline-block; text-decoration:none; font-family:'Poppins',system-ui,sans-serif; font-weight:800; font-size:1.1rem; color:var(--pink); background:var(--paper); border:2px solid var(--pink); border-radius:14px; padding:.58rem 1.9rem; cursor:pointer; transition:background .12s, color .12s, transform .1s; }
.la-cta2:hover { background:var(--pink); color:#fff; transform:translateY(-1px); }
.la-cta2:active { transform:translateY(1px); }
.la-result-actions .btn-s { font-size:.95rem; padding:.52rem 1.5rem; }
.la-link { background:none; border:0; color:var(--muted); font-size:.82rem; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:.25rem; }
.la-link:hover { color:var(--pink); }

@media (max-width:600px) {
  .la-tag { font-size:.86rem; }
  .la-cta { font-size:1.45rem; padding:.65rem 2.4rem; }
  .la-result-title { font-size:2.4rem; }
}