/* 3 PALAVRAS — Editorial Aubergine, Mobile-first */

:root{
  /* Cores */
  --bg-0:#0B0612; --bg-1:#120A1F; --bg-2:#1A0F2B; --bg-3:#251638;
  --ink-1:#F4ECFF; --ink-2:#C9BCE0; --ink-3:#8E7FAB; --ink-4:#5A4D74;
  --line-1:rgba(196,181,253,.10);
  --line-2:rgba(196,181,253,.18);

  --violet-1:#7C3AED; --violet-2:#8B5CF6; --violet-3:#A78BFA; --violet-4:#C4B5FD;
  --violet-glow:0 0 0 1px rgba(167,139,250,.45),
                0 8px 28px -8px rgba(124,58,237,.55),
                inset 0 1px 0 rgba(255,255,255,.10);

  --amber-1:#B8852A; --amber-2:#D7A843; --amber-3:#F1C26A;
  --gone-1:#2A1F38;  --gone-2:#1F1629;

  --cb-amber-1:#2563EB; --cb-amber-2:#3B82F6; --cb-amber-3:#60A5FA;

  /* Tipografia */
  --font-display:'Fraunces','Iowan Old Style',Georgia,serif;
  --font-ui:'Manrope',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;

  /* Geometria */
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px;
  --shadow-1:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -12px rgba(0,0,0,.6);

  /* Cinemática */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --t-fast:140ms; --t-mid:260ms; --t-slow:520ms;

  /* Safe-areas (iPhone notch / Android status bar) */
  --sa-t:env(safe-area-inset-top, 0px);
  --sa-b:env(safe-area-inset-bottom, 0px);
  --sa-l:env(safe-area-inset-left, 0px);
  --sa-r:env(safe-area-inset-right, 0px);
}
body.cb{ --amber-1:var(--cb-amber-1); --amber-2:var(--cb-amber-2); --amber-3:var(--cb-amber-3); }

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
html{ overscroll-behavior:none; touch-action:manipulation; }
body{
  margin:0;
  background:var(--bg-0);
  color:var(--ink-1);
  font-family:var(--font-ui);
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100dvh;
  /* evita pull-to-refresh em mobile e zoom no double-tap */
  overscroll-behavior:contain;
  user-select:none;
  -webkit-user-select:none;
}
input, textarea { user-select:text; -webkit-user-select:text; }

/* Atmosfera */
.atmosphere{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.gradient-mesh{
  position:absolute; inset:-15%;
  background:
    radial-gradient(60% 50% at 18% 8%,  rgba(124,58,237,.32) 0%, transparent 60%),
    radial-gradient(50% 45% at 90% 12%, rgba(167,139,250,.20) 0%, transparent 60%),
    radial-gradient(45% 40% at 50% 110%,rgba(91,33,182,.40)  0%, transparent 60%);
  filter:blur(20px) saturate(120%);
  animation:drift 22s var(--ease-in-out) infinite alternate;
}
@keyframes drift{ 0%{transform:translate3d(0,0,0) scale(1);} 100%{transform:translate3d(-1.5%,1%,0) scale(1.04);} }
.grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.93  0 0 0 0 1  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.20; mix-blend-mode:overlay;
}
.vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% 40%, transparent 50%, rgba(0,0,0,.50) 100%);
}

/* ===== Topbar ===== */
.topbar{
  position:relative; z-index:2;
  display:grid; grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:center;
  padding:calc(12px + var(--sa-t)) calc(14px + var(--sa-r)) 16px calc(14px + var(--sa-l));
  border-bottom:1px solid var(--line-1);
}
.topbar > .topbar-right{ display:flex; gap:6px; justify-self:end; }

.icon-btn{
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--ink-2);
  border:1px solid var(--line-1); border-radius:999px;
  cursor:pointer;
  transition:color var(--t-fast) var(--ease-out),
             border-color var(--t-fast) var(--ease-out),
             background var(--t-fast) var(--ease-out),
             transform var(--t-fast) var(--ease-out);
}
.icon-btn:hover{ color:var(--ink-1); border-color:var(--line-2); background:rgba(196,181,253,.05); }
.icon-btn:active{ transform:scale(.94); }

/* Logo */
.brand{
  margin:0;
  display:inline-flex; align-items:center; gap:.45em;
  justify-self:center;
  position:relative;
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:.16em;
  font-size:clamp(20px, 5.5vw, 28px);
  line-height:1;
  color:var(--ink-1);
}
.brand-logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.55em; height:1.55em;
  border-radius:8px;
  filter:drop-shadow(0 4px 14px rgba(167,139,250,.35));
}
.brand-logo svg{ width:100%; height:100%; }
.brand-word{
  background:linear-gradient(180deg, #FFFFFF 0%, #F4ECFF 50%, #C9BCE0 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow:0 0 12px rgba(255,255,255,.18);
  font-feature-settings:"ss01";
}
.brand-sub{
  position:absolute;
  left:50%; bottom:-16px; transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
}

/* ===== Stage ===== */
.stage{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:14px;
  padding:16px 12px calc(8px + var(--sa-b));
  min-height:calc(100dvh - 64px);
}
.stage::before{
  content:""; width:48px; height:1px;
  background:linear-gradient(90deg, transparent, var(--violet-3), transparent);
  margin-top:14px; opacity:.7;
}

/* ===== Tabuleiro ===== */
.board{ display:grid; gap:6px; margin-top:4px; }
.board-row{ display:grid; gap:6px; }

.cell{
  /* tamanho calculado pra caber 7 colunas confortavelmente em qualquer tela */
  --size:clamp(40px, calc((100vw - 32px - 6 * 6px) / 7), 60px);
  width:var(--size); height:var(--size);
  display:grid; place-items:center;
  background:var(--bg-1);
  border:1px solid var(--line-2);
  border-radius:var(--radius-md);
  color:var(--ink-1);
  font-family:var(--font-mono); font-weight:700;
  font-size:calc(var(--size) * 0.5);
  letter-spacing:.02em;
  position:relative;
  perspective:800px;
  transform-style:preserve-3d;
  transition:transform var(--t-fast) var(--ease-out),
             border-color var(--t-fast) var(--ease-out),
             background var(--t-fast) var(--ease-out);
  text-transform:uppercase;
}
.cell.filled{
  border-color:var(--ink-3);
  animation:pop var(--t-fast) var(--ease-out);
}
@keyframes pop{ 0%{transform:scale(.92);} 60%{transform:scale(1.06);} 100%{transform:scale(1);} }

/* Cursor */
.cell.active{
  cursor:text;
  border-color:var(--violet-3);
  box-shadow:0 0 0 2px rgba(167,139,250,.30),
             0 0 18px -2px rgba(167,139,250,.45),
             inset 0 1px 0 rgba(255,255,255,.06);
  animation:cursor-blink 1.2s ease-in-out infinite;
}
.cell.active::after{
  content:""; position:absolute;
  left:50%; bottom:18%;
  width:60%; height:2px;
  background:var(--violet-3);
  transform:translateX(-50%);
  border-radius:2px;
  box-shadow:0 0 8px var(--violet-3);
  opacity:.8;
  pointer-events:none;
}
.cell.active.filled::after{ display:none; }
@keyframes cursor-blink{
  0%,100% { box-shadow:0 0 0 2px rgba(167,139,250,.30), 0 0 18px -2px rgba(167,139,250,.45), inset 0 1px 0 rgba(255,255,255,.06); }
  50%     { box-shadow:0 0 0 2px rgba(196,181,253,.55), 0 0 26px -2px rgba(196,181,253,.65), inset 0 1px 0 rgba(255,255,255,.10); }
}
.board-row .cell{ cursor:pointer; }
.cell.correct, .cell.present, .cell.absent, .cell.flip{ cursor:default; }

/* Erro */
.row-shake{ animation:shake 380ms var(--ease-in-out); }
@keyframes shake{
  0%,100% { transform:translateX(0); }
  20%     { transform:translateX(-6px); }
  40%     { transform:translateX(6px); }
  60%     { transform:translateX(-4px); }
  80%     { transform:translateX(4px); }
}

/* Flip */
.cell.flip{ animation:flip var(--t-slow) var(--ease-in-out) forwards; }
@keyframes flip{
  0%   { transform:rotateX(0); }
  45%  { transform:rotateX(-90deg); }
  55%  { transform:rotateX(-90deg); }
  100% { transform:rotateX(0); }
}

/* Estados */
.cell.correct{
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.20) 0%, transparent 55%),
    linear-gradient(180deg, var(--violet-3), var(--violet-1));
  border-color:rgba(255,255,255,.30);
  color:#fff;
  box-shadow:var(--violet-glow);
  position:relative;
  overflow:visible;
  text-shadow:0 0 14px rgba(255,255,255,.45);
  animation:correct-pulse 1.6s ease-in-out infinite;
}
.cell.correct::before{
  content:""; position:absolute; inset:-4px;
  border-radius:16px;
  background:radial-gradient(closest-side, rgba(167,139,250,.55), transparent 70%);
  opacity:0; pointer-events:none;
  animation:halo-pop 700ms var(--ease-out) 0ms 1 forwards;
}
.cell.correct::after{
  content:""; position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.30) 50%, transparent 65%);
  background-size:220% 100%;
  background-position:200% 0;
  pointer-events:none;
  animation:sheen 900ms var(--ease-out) 80ms 1 forwards;
  mix-blend-mode:overlay;
}
@keyframes halo-pop{
  0%   { opacity:0; transform:scale(.8); }
  35%  { opacity:1; transform:scale(1.18); }
  100% { opacity:0; transform:scale(1.45); }
}
@keyframes sheen{
  0%   { background-position:200% 0; }
  100% { background-position:-100% 0; }
}
@keyframes correct-pulse{
  0%,100% { box-shadow:0 0 0 1px rgba(167,139,250,.45),
                       0 8px 28px -8px rgba(124,58,237,.55),
                       inset 0 1px 0 rgba(255,255,255,.10); }
  50%     { box-shadow:0 0 0 1px rgba(196,181,253,.65),
                       0 12px 40px -8px rgba(167,139,250,.75),
                       inset 0 1px 0 rgba(255,255,255,.18); }
}

.cell.present{
  background:linear-gradient(180deg, var(--amber-2), var(--amber-1));
  border-color:rgba(255,255,255,.10);
  color:#1a1206;
}
body.cb .cell.present{ color:#ECF3FF; }

.cell.absent{
  background:var(--gone-1);
  border-color:rgba(196,181,253,.06);
  color:var(--ink-3);
}

.row-win .cell{ animation:bounce 600ms var(--ease-out) both; }
.row-win .cell:nth-child(1){ animation-delay:0ms; }
.row-win .cell:nth-child(2){ animation-delay:80ms; }
.row-win .cell:nth-child(3){ animation-delay:160ms; }
.row-win .cell:nth-child(4){ animation-delay:240ms; }
.row-win .cell:nth-child(5){ animation-delay:320ms; }
.row-win .cell:nth-child(6){ animation-delay:400ms; }
.row-win .cell:nth-child(7){ animation-delay:480ms; }
@keyframes bounce{
  0%   { transform:translateY(0); }
  35%  { transform:translateY(-12px); }
  70%  { transform:translateY(2px); }
  100% { transform:translateY(0); }
}

/* Sample no help */
.cell.sample{ --size:38px; font-size:18px; animation:none !important; }
.cell.sample::before, .cell.sample::after { display:none !important; }

/* ===== Toast ===== */
.toast{
  position:fixed; left:50%; top:calc(72px + var(--sa-t));
  transform:translate(-50%, -8px);
  padding:11px 16px; border-radius:999px;
  background:rgba(11,6,18,.92);
  border:1px solid var(--line-2); color:var(--ink-1);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:13.5px; letter-spacing:.02em; font-weight:500;
  opacity:0; pointer-events:none;
  transition:opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
  z-index:5;
  max-width:calc(100vw - 32px); text-align:center;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ===== Teclado ===== */
.keyboard{
  display:flex; flex-direction:column; gap:6px;
  width:100%; max-width:640px;
  margin-top:4px;
  padding:0 4px;
}
.kb-row{ display:flex; gap:4px; justify-content:center; }
.key{
  flex:1 1 0; min-width:0;
  height:54px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-2); color:var(--ink-1);
  border:1px solid var(--line-1); border-radius:8px;
  font-family:var(--font-ui); font-weight:600;
  font-size:15px; letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer; padding:0 4px;
  transition:transform var(--t-fast) var(--ease-out),
             background var(--t-fast) var(--ease-out),
             border-color var(--t-fast) var(--ease-out),
             color var(--t-fast) var(--ease-out);
}
.key.wide{ flex:1.6 1 0; font-size:11.5px; letter-spacing:.10em; }
.key:hover{ background:var(--bg-3); border-color:var(--line-2); }
.key:active{ transform:scale(.92); }
.key.correct{
  background:linear-gradient(180deg, var(--violet-2), var(--violet-1));
  color:#fff; border-color:rgba(255,255,255,.14);
}
.key.present{
  background:linear-gradient(180deg, var(--amber-2), var(--amber-1));
  color:#1a1206; border-color:rgba(255,255,255,.06);
}
body.cb .key.present{ color:#ECF3FF; }
.key.absent{ background:var(--gone-2); color:var(--ink-4); border-color:rgba(196,181,253,.04); }

/* ===== Modais ===== */
.modal{
  border:1px solid var(--line-2);
  background:linear-gradient(180deg, rgba(20,13,32,.96), rgba(11,6,18,.98));
  color:var(--ink-1);
  padding:0;
  border-radius:20px;
  max-width:520px; width:min(560px, calc(100vw - 24px));
  max-height:calc(100dvh - 32px);
  overflow:auto;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(196,181,253,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.modal::backdrop{
  background:radial-gradient(120% 80% at 50% 30%, rgba(11,6,18,.7), rgba(0,0,0,.92));
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.modal[open]{ animation:modal-in var(--t-mid) var(--ease-out); }
@keyframes modal-in{
  from { opacity:0; transform:translateY(12px) scale(.985); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.modal article{ padding:22px 22px calc(18px + var(--sa-b)); }
.modal header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:10px;
}
.modal h2{
  margin:0;
  font-family:var(--font-display);
  font-weight:600; font-size:24px; letter-spacing:.01em;
  font-variation-settings:"opsz" 80;
}
.modal h3{
  font-family:var(--font-display);
  font-weight:500; font-size:15px;
  margin:18px 0 8px; letter-spacing:.04em;
  color:var(--ink-2);
}
.modal p{ color:var(--ink-2); line-height:1.55; font-size:14.5px; margin:8px 0; }
.modal p.muted{ color:var(--ink-3); font-size:13px; }
.modal .close{
  background:transparent; border:0;
  color:var(--ink-2); font-size:26px; cursor:pointer;
  width:36px; height:36px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1;
}
.modal .close:hover{ color:var(--ink-1); background:rgba(255,255,255,.04); }

.legend{ display:flex; flex-direction:column; gap:6px; }
.legend .row{ display:flex; gap:5px; }
.lbl-correct{ color:var(--violet-3); }
.lbl-present{ color:var(--amber-3); }
.lbl-absent{  color:var(--ink-3); }

/* Configurações */
.setting{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 0; border-top:1px solid var(--line-1);
}
.setting:first-of-type{ border-top:0; padding-top:8px; }
.setting-label{ flex:1 1 auto; min-width:0; }
.setting-label strong{ display:block; font-size:14.5px; font-weight:600; }
.setting-label .muted{ display:block; color:var(--ink-3); font-size:12.5px; margin-top:2px; }

.seg{
  display:inline-flex; padding:4px;
  background:var(--bg-2); border:1px solid var(--line-1);
  border-radius:999px;
  flex-shrink:0;
}
.seg button{
  background:transparent; color:var(--ink-2);
  border:0; padding:9px 14px; border-radius:999px;
  font-family:var(--font-mono); font-weight:700; font-size:13px;
  cursor:pointer;
  min-width:36px;
  transition:color var(--t-fast), background var(--t-fast);
}
.seg button[aria-selected="true"]{
  background:linear-gradient(180deg, var(--violet-2), var(--violet-1));
  color:#fff;
}

.switch{ position:relative; display:inline-block; width:48px; height:28px; flex-shrink:0; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; }
.switch .track{
  position:absolute; inset:0;
  background:var(--bg-3); border:1px solid var(--line-2);
  border-radius:999px;
  transition:background var(--t-fast);
}
.switch .thumb{
  position:absolute; top:3px; left:3px; width:20px; height:20px;
  background:var(--ink-1); border-radius:50%;
  transition:transform var(--t-fast) var(--ease-out), background var(--t-fast);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.switch input:checked + .track{ background:linear-gradient(180deg, var(--violet-2), var(--violet-1)); }
.switch input:checked + .track .thumb{ transform:translateX(20px); }

/* Day banner */
.day-banner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:10px 14px; margin-bottom:12px;
  background:linear-gradient(180deg, rgba(124,58,237,.20), rgba(124,58,237,.06));
  border:1px solid var(--line-2);
  border-radius:14px;
}
.day-banner .left{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.day-banner .lbl{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.day-banner .val{ font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink-1); }
.day-banner .pts{
  font-family:var(--font-mono); font-size:22px; font-weight:700;
  color:var(--violet-3);
  text-shadow:0 0 12px rgba(167,139,250,.4);
  flex-shrink:0;
}
.day-banner .dots{ display:inline-flex; gap:6px; align-items:center; margin-left:6px; }
.day-banner .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--bg-3); border:1px solid var(--line-2);
}
.day-banner .dot.win{
  background:linear-gradient(180deg, var(--violet-3), var(--violet-1));
  border-color:rgba(255,255,255,.25);
  box-shadow:0 0 8px rgba(167,139,250,.6);
}
.day-banner .dot.loss{ background:var(--gone-1); border-color:rgba(196,181,253,.06); }

/* Estatísticas */
.stats-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
  margin:6px 0 12px;
}
.stat{
  background:var(--bg-2); border:1px solid var(--line-1);
  border-radius:12px; padding:10px 6px; text-align:center;
}
.stat .num{
  display:block;
  font-family:var(--font-display); font-weight:600; font-size:24px;
  color:var(--ink-1); line-height:1.1;
}
.stat .lbl{
  display:block; font-size:10px; letter-spacing:.16em;
  color:var(--ink-3); text-transform:uppercase; margin-top:4px;
}

.distribution{ display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.dist-row{ display:grid; grid-template-columns:18px 1fr; gap:8px; align-items:center; }
.dist-bar{
  height:22px; border-radius:6px;
  background:linear-gradient(90deg, var(--violet-1), var(--violet-3));
  display:flex; align-items:center; justify-content:flex-end;
  color:#fff; font-family:var(--font-mono); font-size:12px; font-weight:700;
  padding:0 8px; min-width:28px;
  transition:width var(--t-mid) var(--ease-out);
}
.dist-row .key-num{ color:var(--ink-2); font-family:var(--font-mono); font-size:12px; text-align:right; }
.dist-row.current .dist-bar{ outline:1px solid rgba(255,255,255,.20); }
.dist-row.empty .dist-bar{ background:var(--bg-3); color:var(--ink-3); }

/* Ranking */
.rank-tabs{
  display:inline-flex; padding:4px;
  background:var(--bg-2); border:1px solid var(--line-1);
  border-radius:999px;
  margin-bottom:10px;
}
.rank-tab{
  background:transparent; color:var(--ink-2);
  border:0; padding:8px 16px; border-radius:999px;
  font-family:var(--font-ui); font-weight:600; font-size:13px;
  cursor:pointer;
}
.rank-tab.active{
  background:linear-gradient(180deg, var(--violet-2), var(--violet-1));
  color:#fff;
}
.rank-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:4px;
  max-height:50dvh; overflow-y:auto;
}
.rank-row{
  display:grid; grid-template-columns:28px 1fr auto auto; gap:10px;
  align-items:center;
  padding:10px 12px;
  background:var(--bg-2); border:1px solid var(--line-1);
  border-radius:10px;
}
.rank-row.me{ border-color:var(--violet-3); box-shadow:0 0 0 1px rgba(167,139,250,.25); }
.rank-row .pos{
  font-family:var(--font-mono); font-weight:700; font-size:14px;
  color:var(--ink-3); text-align:center;
}
.rank-row.top1 .pos{ color:var(--amber-3); }
.rank-row.top2 .pos{ color:var(--violet-4); }
.rank-row.top3 .pos{ color:var(--violet-3); }
.rank-row .who{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.rank-row .name{
  font-weight:600; color:var(--ink-1); font-size:14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rank-row .when{
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  letter-spacing:.04em;
}
.rank-row .meta{ font-size:11px; color:var(--ink-3); font-family:var(--font-mono); }
.rank-row .pts{ font-family:var(--font-mono); font-weight:700; font-size:16px; color:var(--violet-3); }
.rank-empty{ padding:24px; text-align:center; color:var(--ink-3); font-size:14px; }

/* Input nome */
.text-input{
  width:100%;
  padding:14px 16px;
  background:var(--bg-2);
  color:var(--ink-1);
  border:1px solid var(--line-2);
  border-radius:12px;
  font-family:var(--font-display);
  font-size:18px;
  font-weight:500;
  letter-spacing:.03em;
  margin:8px 0;
  transition:border-color var(--t-fast);
}
.text-input:focus{
  outline:none;
  border-color:var(--violet-3);
  box-shadow:0 0 0 3px rgba(167,139,250,.25);
}

/* Botões */
.modal-actions{
  display:flex; gap:8px; justify-content:flex-end;
  flex-wrap:wrap;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line-1);
}
.btn-primary, .btn-ghost{
  font-family:var(--font-ui); font-weight:600; font-size:14px;
  padding:11px 16px; border-radius:11px; cursor:pointer;
  min-height:44px;
  transition:transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn-primary{
  background:linear-gradient(180deg, var(--violet-2), var(--violet-1));
  color:#fff; border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 20px -10px rgba(124,58,237,.65);
}
.btn-primary:hover{ transform:translateY(-1px); }
.btn-primary:active{ transform:scale(.97); }
.btn-ghost{
  background:transparent; color:var(--ink-2);
  border:1px solid var(--line-2);
}
.btn-ghost:hover{ color:var(--ink-1); border-color:var(--ink-3); }

/* Footer */
.foot{
  position:relative; z-index:1;
  text-align:center;
  padding:14px 16px calc(20px + var(--sa-b));
  color:var(--ink-3);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
}

/* Foco visível */
:focus-visible{ outline:2px solid var(--violet-3); outline-offset:2px; border-radius:6px; }

/* ===== Responsivo ===== */
@media (max-width: 480px){
  .topbar{ padding-top:calc(10px + var(--sa-t)); padding-bottom:14px; }
  .icon-btn{ width:40px; height:40px; }
  .topbar > .topbar-right{ gap:4px; }

  .brand{ font-size:22px; gap:.35em; letter-spacing:.14em; }
  .brand-sub{ font-size:9.5px; bottom:-13px; }

  .stage{ padding:10px 8px calc(8px + var(--sa-b)); gap:10px; }
  .stage::before{ display:none; }

  .key{ height:50px; font-size:14px; }
  .key.wide{ font-size:11px; }

  .modal{ width:calc(100vw - 16px); border-radius:16px; }
  .modal article{ padding:18px 18px calc(16px + var(--sa-b)); }
  .modal h2{ font-size:21px; }

  .stats-grid{ gap:6px; }
  .stat{ padding:8px 4px; }
  .stat .num{ font-size:20px; }

  .day-banner{ padding:8px 12px; }
  .day-banner .pts{ font-size:18px; }

  .modal-actions{ justify-content:stretch; }
  .modal-actions .btn-primary, .modal-actions .btn-ghost{ flex:1 1 auto; }
}

@media (max-width: 360px){
  .key{ height:46px; font-size:13px; }
  .brand{ font-size:20px; }
  .brand-logo{ width:1.4em; height:1.4em; }
}

/* Telas altas (iPhone 14+, Pixel 7+) — eleva o tabuleiro */
@media (min-height: 700px) and (max-width: 480px){
  .stage{ gap:14px; }
  .stage::before{ display:block; width:40px; }
}

/* Tablets / desktop */
@media (min-width: 720px){
  .topbar{ padding:20px 24px 14px; }
  .icon-btn{ width:42px; height:42px; }
  .brand{ font-size:28px; }
  .stage{ gap:18px; padding:24px 16px 32px; }
  .key{ height:56px; }
}

/* Reduzir movimento */
@media (prefers-reduced-motion: reduce){
  .cell.flip, .row-win .cell, .gradient-mesh, .row-shake, .cell.filled,
  .cell.correct, .cell.active{ animation:none !important; }
  .cell.correct::before, .cell.correct::after{ display:none; }
}

/* Modo standalone (instalado como app) */
@media (display-mode: standalone){
  body{ background:var(--bg-0); }
}

/* ============================================================ */
/* CORREÇÕES MOBILE — adicionado pra resolver bugs específicos    */
/* ============================================================ */

/* --vh calculado por mobile.js com a altura REAL (visualViewport) */
:root{ --vh: 1vh; }

/* iOS dá zoom auto em input com font-size < 16px. Forçamos 16px */
input, textarea, select {
  font-size: 16px !important;
}

/* Stage usa --vh em vez de dvh em iOS antigos */
.stage{
  min-height: calc(var(--vh, 1vh) * 100 - 64px);
}

/* Modais com altura limitada pelo viewport real */
.modal{
  max-height: calc(var(--vh, 1vh) * 100 - 32px);
}

/* Quando teclado nativo do sistema está aberto:
   - esconde teclado virtual (não precisamos de dois)
   - tira margem de baixo
   - puxa o board pra cima
   - reduz topbar pra ganhar espaço */
body.kb-open .stage::before{ display: none; }
body.kb-open .topbar{ padding-top: calc(6px + var(--sa-t)); padding-bottom: 8px; }
body.kb-open .brand-sub{ display: none; }
body.kb-open .foot{ display: none; }

/* Em telas mobile, o teclado virtual continua aparecendo até o nativo abrir.
   Pra quem tocou em célula e abriu o nativo, ele desaparece automático.
   Quem prefere o virtual: é só não tocar em célula. */

/* Toast acima do teclado quando ele estiver aberto */
body.kb-open .toast{
  top: calc(60px + var(--sa-t));
}

/* Tap target mínimo nas células — 44x44 com padding via min-size */
.cell{
  min-width: 40px;
  min-height: 40px;
  /* desabilita seleção de texto/double-tap zoom */
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* Botões topbar com touch maior em mobile */
@media (hover: none) and (pointer: coarse){
  .icon-btn{ width:46px; height:46px; }
  .icon-btn svg{ width:22px; height:22px; }
}

/* Modal mobile full-bleed em telas pequenas */
@media (max-width: 480px){
  .modal{
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 16px 16px 0 0;
    max-height: calc(var(--vh, 1vh) * 92);
    border-bottom: 0;
  }
  .modal article{
    padding: 18px 18px calc(20px + var(--sa-b));
  }
  /* Modal cola embaixo da tela quando teclado aberto */
  body.kb-open .modal{
    max-height: calc(var(--vh, 1vh) * 78);
  }
  /* Modal de nome — input grande no mobile */
  #modalName .text-input{ font-size: 17px; padding: 16px 18px; }
}

/* Input invisível do mobile.js: garantir que está realmente fora de vista */
#captureInput{
  position: fixed !important;
  pointer-events: none !important;
  caret-color: transparent !important;
}

/* Mostra dica visual de "tocar pra digitar" quando linha ativa não está focada
   Isso ajuda o usuário a saber que é só clicar */


/* Em mobile na orientação landscape, deixa cabeçalho mais compacto */
@media (max-width: 900px) and (orientation: landscape){
  .topbar{ padding-top: calc(6px + var(--sa-t)); padding-bottom: 8px; }
  .brand{ font-size: 18px; }
  .brand-logo{ width: 1.3em; height: 1.3em; }
  .brand-sub{ display: none; }
  .stage{ gap: 6px; padding-top: 8px; }
  .stage::before{ display: none; }
  .key{ height: 42px; }
}

/* Standalone (instalado como app no home screen) */
@media (display-mode: standalone){
  body{
    /* sem barra do navegador, mais espaço */
    padding-top: 0;
  }
  .topbar{ border-bottom-width: 0; }
}

/* ============================================================ */
/* POLIMENTO MOBILE — última rodada                              */
/* ============================================================ */

/* Teclado virtual maior e mais bonito em mobile */
@media (hover: none) and (pointer: coarse){
  .keyboard{
    gap: 7px;
    padding: 0 6px;
    margin-top: 2px;
  }
  .kb-row{ gap: 5px; }
  .key{
    height: 56px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
    border: 1px solid var(--line-2);
    box-shadow: 0 2px 0 rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04);
    letter-spacing: 0;
    transition: transform 80ms var(--ease-out), background 120ms var(--ease-out);
  }
  .key:active{
    transform: translateY(1px) scale(.96);
    box-shadow: 0 0 0 rgba(0,0,0,.30);
  }
  .key.wide{
    font-size: 13px;
    letter-spacing: .08em;
  }
  .key.correct{
    background: linear-gradient(180deg, var(--violet-2), var(--violet-1));
    box-shadow: 0 2px 0 rgba(91,33,182,.4), 0 0 14px -4px rgba(167,139,250,.5);
  }
  .key.present{
    background: linear-gradient(180deg, var(--amber-2), var(--amber-1));
    box-shadow: 0 2px 0 rgba(120,80,30,.4);
  }
  .key.absent{
    background: var(--gone-2);
    box-shadow: 0 2px 0 rgba(0,0,0,.20);
    color: var(--ink-4);
  }
}

/* Células com mais peso visual em mobile */
@media (hover: none) and (pointer: coarse){
  .cell{
    border-radius: 10px;
    border-width: 1.5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  }
  .cell.filled{
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border-color: var(--ink-3);
  }
  /* Cell ativa com indicação clara: borda violeta sólida */
  .cell.active{
    border-width: 2px;
    border-color: var(--violet-3);
    box-shadow: 0 0 0 2px rgba(167,139,250,.20),
                0 0 22px -4px rgba(167,139,250,.5),
                inset 0 1px 0 rgba(255,255,255,.06);
  }
}

/* Topbar mobile mais clean: ícones menores, menos padding */
@media (max-width: 480px){
  .topbar{
    padding-top: calc(10px + var(--sa-t));
    padding-bottom: 12px;
    gap: 4px;
  }
  .icon-btn{
    width: 38px; height: 38px;
    border-color: transparent;
    background: rgba(196,181,253,.04);
  }
  .icon-btn:hover{ background: rgba(196,181,253,.08); }
  .icon-btn svg{ width: 18px; height: 18px; }
  .topbar > .topbar-right{ gap: 4px; }
  .brand{
    font-size: 22px;
    letter-spacing: .12em;
    gap: .35em;
  }
  .brand-logo{ width: 1.4em; height: 1.4em; }
  .brand-sub{ font-size: 9.5px; bottom: -14px; letter-spacing: .22em; }
}

/* Stage com gap mais respirado em mobile */
@media (max-width: 480px){
  .stage{
    padding-top: 22px;
    padding-bottom: calc(10px + var(--sa-b));
    gap: 12px;
  }
  .stage::before{
    width: 36px;
    margin-top: 6px;
  }
  .board{ gap: 5px; }
  .board-row{ gap: 5px; }
}

/* Toast mais largo em mobile */
@media (max-width: 480px){
  .toast{
    top: calc(60px + var(--sa-t));
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 14px;
  }
}

/* Indicação visual MAIOR pra casa ativa em mobile */
@media (hover: none) and (pointer: coarse){
  .cell.active::after{
    width: 70%;
    height: 3px;
    bottom: 14%;
    box-shadow: 0 0 12px var(--violet-3);
  }
}

/* Animação de "tap" nas células (toque pra mover cursor) */
@media (hover: none) and (pointer: coarse){
  .board-row .cell{ transition: transform 100ms var(--ease-out), border-color 200ms; }
  .board-row .cell:active{ transform: scale(.95); }
}

/* Modal name no mobile — input maior */
@media (max-width: 480px){
  #modalName .text-input{
    font-size: 18px;
    padding: 16px 18px;
    border-radius: 14px;
  }
  #modalName h2{
    font-size: 22px;
  }
}

/* Botões primary/ghost no mobile com mais peso */
@media (max-width: 480px){
  .btn-primary, .btn-ghost{
    font-size: 15px;
    padding: 13px 18px;
    min-height: 48px;
    border-radius: 12px;
  }
  .btn-primary{
    box-shadow: 0 6px 16px -8px rgba(124,58,237,.7),
                inset 0 1px 0 rgba(255,255,255,.15);
  }
}

/* Vibração háptica visual: leve "shake" ao errar mais visível */
.row-shake{ animation: shake 420ms cubic-bezier(.36,.07,.19,.97); }

/* Ranking row mobile: layout mais compacto */
@media (max-width: 480px){
  .rank-row{
    grid-template-columns: 24px 1fr auto;
    padding: 10px 12px;
    gap: 8px;
  }
  .rank-row .meta{ display: none; }
  .rank-row .name{ font-size: 13.5px; }
  .rank-row .when{ font-size: 10.5px; }
  .rank-row .pts{ font-size: 15px; }
}

/* Day banner mobile mais condensado */
@media (max-width: 480px){
  .day-banner{
    padding: 9px 12px;
    border-radius: 12px;
  }
  .day-banner .val{ font-size: 15px; }
  .day-banner .pts{ font-size: 19px; }
  .day-banner .lbl{ font-size: 10px; }
}

/* Settings mobile mais espaçoso */
@media (max-width: 480px){
  .setting{ padding: 16px 0; }
  .setting-label strong{ font-size: 15px; }
  .setting-label .muted{ font-size: 12.5px; }
  .switch{ width: 52px; height: 30px; flex-shrink: 0; }
  .switch .thumb{ width: 22px; height: 22px; top: 3px; left: 3px; }
  .switch input:checked + .track .thumb{ transform: translateX(22px); }
  .seg button{
    padding: 10px 16px;
    font-size: 14px;
    min-width: 40px;
  }
}

/* Atmosfera com gradiente mais sutil em mobile (menos pesado) */
@media (max-width: 480px){
  .gradient-mesh{
    filter: blur(30px) saturate(110%);
    animation-duration: 30s;
  }
  .grain{ opacity: .12; }
}

/* Esconde a dica "tocar pra digitar" e qualquer ::after fantasma */
.cell.sample::before, .cell.sample::after{ display: none !important; }