/* ManjoLabz Arcade — paleta "bosque nocturno".
   Verde-tinta profundo de fondo, aguamarina para lo que escribe el jugador y
   arena cálida para las pistas fijas: la vista distingue lo tuyo de lo dado sin
   esfuerzo, y ningún color pica. Rojo puro no se usa en ningún sitio. */
:root{
  --bg:#0d1a1b; --bg2:#122528; --panel:#173035; --panel2:#1d3b40;
  --line:#22474d; --line-strong:#38707a;
  --txt:#e9f1ed; --muted:#8aa9a7; --faint:#5c7d7e;

  --aqua:#6fd8c6;        /* lo que escribe el jugador */
  --arena:#e8d5ae;       /* las pistas de partida */
  --coral:#e39184;       /* errores: cálido, no agresivo */
  --salvia:#9ed3a8;      /* aciertos, victoria */
  --note:#6f9b9b;

  /* Serie categórica de las gráficas — validada para daltonismo sobre --panel */
  --c-basico:#2fa899; --c-normal:#c08636; --c-experto:#8f6bc9;

  --r:16px; --tap:44px;
  --sombra:0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.28);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;color:var(--txt);
  background:
    radial-gradient(1200px 600px at 50% -10%, #16302f 0%, transparent 60%),
    var(--bg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overscroll-behavior:none;user-select:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.view{display:none;flex-direction:column;min-height:100%;max-width:540px;margin:0 auto;padding:12px}
.view.active{display:flex}
.scroll{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}

/* ---------- HUB ---------- */
.hub-head{padding:26px 4px 6px;display:flex;align-items:flex-start;gap:10px}
.hub-head h1{margin:0;font-size:29px;letter-spacing:-.6px;font-weight:800;line-height:1.1;flex:1}
.hub-head h1 span{color:var(--aqua);display:block;font-weight:600;font-size:15px;
  letter-spacing:2.4px;text-transform:uppercase;margin-top:5px;color:var(--muted)}
.saludo{margin:14px 4px 20px;color:var(--arena);font-size:15px;line-height:1.45}

/* Panel de estadísticas */
.stats-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin-bottom:18px;box-shadow:var(--sombra)}
.stats-title{font-size:11px;text-transform:uppercase;letter-spacing:1.3px;color:var(--faint);
  margin:0 0 14px;font-weight:700}
.hero-row{display:flex;gap:10px;margin-bottom:4px}
.hero{flex:1;text-align:center}
.hero-v{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--aqua)}
.hero-k{font-size:11px;color:var(--muted);margin-top:3px}
.hero.racha .hero-v{color:var(--arena)}

/* Gráfica de barras: mejor tiempo por dificultad, con etiqueta directa */
.chart{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.bar-row{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:10px;font-size:12px}
.bar-name{color:var(--muted)}
.bar-track{height:12px;background:var(--bg2);border-radius:6px;overflow:hidden}
.bar-fill{height:100%;border-radius:6px;min-width:6px;transition:width .5s cubic-bezier(.2,.7,.3,1)}
.bar-val{font-variant-numeric:tabular-nums;color:var(--txt);font-weight:700;min-width:44px;text-align:right}
.bar-row.vacio .bar-val{color:var(--faint);font-weight:400}
.chart-foot{font-size:11px;color:var(--faint);margin-top:4px}

/* Mensajes de superación */
.logros{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.logro{display:flex;gap:10px;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-left:3px solid var(--salvia);
  border-radius:10px;padding:11px 13px;font-size:13px;line-height:1.4}
.logro .l-ico{font-size:16px}

.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start;padding-bottom:8px}
.game-card{
  background:linear-gradient(155deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sombra);
  padding:16px 14px;text-align:left;min-height:118px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .14s ease,border-color .14s;
}
.game-card:active{transform:scale(.97)}
.game-card:not(.locked):hover{border-color:var(--line-strong)}
.game-card.locked{opacity:.4}
.game-card .g-ico{font-size:25px}
.game-card .g-name{font-weight:700;font-size:17px;margin-top:10px}
.game-card .g-sub{font-size:12px;color:var(--muted);margin-top:2px}
.hub-foot{text-align:center;color:var(--faint);font-size:11px;padding:16px 0 8px}

/* ---------- CABECERAS ---------- */
.game-head{display:flex;align-items:center;gap:8px;padding:4px 0 10px}
.head-title{flex:1;text-align:center;font-weight:700;font-size:17px}
.head-title span{color:var(--muted);font-weight:500;font-size:14px}
.head-title span:not(:empty)::before{content:" · "}
.icon-btn{width:var(--tap);height:var(--tap);border-radius:13px;font-size:19px;
  display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);
  transition:border-color .14s}
.icon-btn:active{transform:scale(.94)}
.icon-btn.off{color:var(--faint)}

/* ---------- DIFICULTAD ---------- */
.diff-list{display:flex;flex-direction:column;gap:12px;padding-top:8px}
.diff-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;text-align:left;display:flex;align-items:center;gap:14px;box-shadow:var(--sombra);
  transition:transform .14s,border-color .14s}
.diff-card:active{transform:scale(.98)}
.diff-dots{display:flex;gap:4px;flex:0 0 auto}
.diff-dots i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.diff-dots i.on{background:var(--aqua)}
.diff-card[data-lvl="basico"] .diff-dots i.on{background:var(--c-basico)}
.diff-card[data-lvl="normal"]  .diff-dots i.on{background:var(--c-normal)}
.diff-card[data-lvl="experto"] .diff-dots i.on{background:var(--c-experto)}
.diff-body{flex:1}
.diff-name{font-weight:700;font-size:17px}
.diff-sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.35}
.diff-best{font-size:11px;color:var(--faint);margin-top:5px;font-variant-numeric:tabular-nums}
.diff-resume{border-color:var(--line-strong);background:linear-gradient(155deg,var(--panel2),var(--panel))}

/* ---------- STATS EN PARTIDA ---------- */
.statbar{display:flex;gap:8px;margin-bottom:10px}
.stat{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:7px 4px;text-align:center}
.stat-k{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--faint)}
.stat-v{display:block;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
.stat-v.warn{color:var(--coral)}

/* ---------- TABLERO ---------- */
.board-wrap{position:relative;width:100%}
.board{
  display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;
  background:var(--line-strong);gap:1px;padding:2px;
  border:2px solid var(--line-strong);border-radius:10px;overflow:hidden;
  box-shadow:var(--sombra);
}
.cell{
  background:var(--bg2);display:grid;place-items:center;position:relative;
  font-size:clamp(17px,5.2vw,26px);font-weight:600;color:var(--aqua);
  aspect-ratio:1;transition:background .12s;
}
.cell.given{color:var(--arena);font-weight:700}
.cell.bx-r{margin-right:-1px;border-right:2px solid var(--line-strong)}
.cell.bx-b{margin-bottom:-1px;border-bottom:2px solid var(--line-strong)}
.cell.peer{background:#16302f}
.cell.same{background:#1f4442}
.cell.sel{background:#245049;box-shadow:inset 0 0 0 2px var(--aqua)}
.cell.bad{color:var(--coral);animation:shake .3s}
.cell.hinted{animation:pop .45s}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes pop{0%{transform:scale(.6);opacity:.3}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.notes{position:absolute;inset:2px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);
  font-size:clamp(7px,2.1vw,11px);color:var(--note);font-weight:600}
.notes span{display:grid;place-items:center}
.notes span.hl{color:var(--aqua);font-weight:800;transform:scale(1.15)}

/* ---------- OVERLAY ---------- */
.overlay{position:absolute;inset:0;background:rgba(8,18,18,.88);backdrop-filter:blur(4px);
  display:grid;place-items:center;border-radius:10px;z-index:5}
.overlay.hidden{display:none}
.overlay-card{text-align:center;padding:20px;max-width:92%}
.overlay-card h2{margin:0 0 8px;font-size:24px}
.overlay-card p{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.5}
.ov-logros{display:flex;flex-direction:column;gap:6px;margin:0 0 16px}
.ov-logro{font-size:13px;color:var(--salvia);line-height:1.4}
.overlay-btns{display:flex;flex-direction:column;gap:9px;align-items:center}
.btn{padding:12px 22px;border-radius:12px;background:var(--panel);
  border:1px solid var(--line);font-weight:600;min-width:200px}
.btn.primary{background:var(--aqua);border-color:var(--aqua);color:#062120}

/* ---------- HERRAMIENTAS ---------- */
.tools{display:flex;gap:8px;margin:12px 0 10px}
.tool{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:8px 2px;font-size:11px;color:var(--muted);display:flex;flex-direction:column;
  align-items:center;gap:3px;position:relative;min-height:56px;justify-content:center;
  transition:border-color .14s,background .14s}
.tool .t-ico{font-size:19px;color:var(--txt);line-height:1}
.tool.on{border-color:var(--aqua);background:#1b3d3a;color:var(--aqua)}
.tool:disabled{opacity:.32}
.badge{position:absolute;top:5px;right:7px;font-size:8px;font-weight:800;letter-spacing:.5px}

/* ---------- NUMPAD ---------- */
.numpad{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;padding-bottom:6px}
.num{aspect-ratio:.72;min-height:var(--tap);background:var(--panel);border:1px solid var(--line);
  border-radius:11px;font-size:clamp(18px,5vw,24px);font-weight:700;color:var(--aqua);
  display:grid;place-items:center;position:relative;transition:transform .1s,background .14s}
.num:active{transform:scale(.93)}
.num .left{position:absolute;bottom:3px;font-size:9px;color:var(--faint);font-weight:600}
.num.done{opacity:.25;pointer-events:none}
.num.on{background:#1b3d3a;border-color:var(--aqua)}

/* ---------- TOAST ---------- */
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);
  background:var(--panel);border:1px solid var(--line-strong);padding:10px 18px;border-radius:22px;
  font-size:13px;opacity:0;pointer-events:none;transition:.24s;z-index:50;max-width:90vw;
  text-align:center;box-shadow:var(--sombra)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ================= TUERCAS ================= */
/* Diez colores fluorescentes sobre fondo oscuro. Cada uno lleva ADEMÁS su
   propio símbolo: quien no distinga los colores sigue pudiendo jugar. */
.nuts-view{--n0:#ff2d95;--n1:#00e5ff;--n2:#8cff1a;--n3:#ffd400;--n4:#ff7a1a;
           --n5:#a259ff;--n6:#00ffa3;--n7:#ff4d4d;--n8:#4d8bff;--n9:#ff9ecd}

.nuts-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;
  min-height:0;padding:6px 0}
.nuts-board{display:grid;gap:14px 10px;justify-items:center;align-content:center;width:100%}

/* El padding de arriba reserva sitio para la cara superior de la última tuerca
   (que sobresale de su caja) y para el trozo de rosca que queda al aire. */
.peg{position:relative;display:flex;flex-direction:column-reverse;align-items:center;
  cursor:pointer;padding-bottom:9px;padding-top:calc(var(--h) * 1.2);
  touch-action:manipulation}
/* El eje del tornillo: cilindro cromado, se ve por encima de las tuercas. */
.eje{position:absolute;left:50%;bottom:9px;width:calc(var(--h) * .45);
  height:calc(var(--cap) * var(--h) + 20px);transform:translateX(-50%);
  background:linear-gradient(90deg,#3f4954 0%,#8d9aa7 16%,#f4f7fa 36%,
                             #aab6c1 54%,#eef2f5 71%,#6f7a86 88%,#39424c 100%);
  border-radius:6px 6px 2px 2px;z-index:0;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.45)}
/* El filete es más alto que el eje y se desplaza dentro: al recortarse contra
   el eje, el desplazamiento se lee como giro. */
.filete{position:absolute;left:-30%;right:-30%;top:-20%;bottom:-20%;
  background:repeating-linear-gradient(166deg,
    rgba(0,0,0,.42) 0 1.5px, rgba(255,255,255,.62) 1.5px 3.2px, transparent 3.2px 8px);
  pointer-events:none}
.peg .base{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:56px;height:16px;border-radius:50%;
  background:radial-gradient(ellipse at 46% 26%,#ffffff,#dbe3ea 32%,#9daab6 62%,#5f6a76);
  box-shadow:0 4px 12px rgba(0,0,0,.5),inset 0 -2px 3px rgba(0,0,0,.22);z-index:0}
.peg.sel .base{box-shadow:0 3px 10px rgba(0,0,0,.45),0 0 0 3px rgba(255,255,255,.5)}
.peg.hint{animation:pegHint .9s ease-in-out 2}
@keyframes pegHint{50%{transform:translateY(-6px)}}

/* Cada tuerca es un prisma hexagonal en SVG: cara superior con su agujero, y
   tres caras laterales con distinta luz. El alto de la caja es solo el lateral;
   la cara de arriba sobresale y la tapa la tuerca siguiente. */
/* z-index 1: las tuercas van POR DELANTE del tornillo, que se cuela por su
   agujero. Sin esto la rosca se pinta encima y parece una calcomanía. */
.nut{
  position:relative;z-index:1;width:var(--w);height:var(--h);
  transition:transform .16s cubic-bezier(.34,1.4,.5,1);
}
.nut svg{position:absolute;left:0;bottom:0;width:100%;height:calc(var(--h) * 2.1);
  overflow:visible;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 45%,transparent))}
/* Las caras del cuerpo las colorea JavaScript según hacia dónde miren al girar;
   aquí solo van las partes que no dependen del ángulo. */
.nut .cara-top{fill:color-mix(in srgb,var(--c) 72%,white)}
.nut .brillo-top{fill:rgba(255,255,255,.28)}
/* Borde del agujero: un aro fino y, en la mitad de arriba, la sombra que
   proyecta el canto hacia dentro. Es lo que hace que parezca un taladro. */
/* Interior del agujero: la cavidad oscura y, dentro, el eje del tornillo
   atravesando la tuerca. Las cinco franjas repiten los reflejos del eje que
   asoma por arriba, para que se lea como el mismo tornillo. */
.nut .hueco{fill:#151a20}
.nut .eje-a{fill:#3f4954}
.nut .eje-b{fill:#8d9aa7}
.nut .eje-c{fill:#f4f7fa}
.nut .eje-d{fill:#aab6c1}
.nut .eje-e{fill:#5c6772}
.nut .eje-punta{fill:#e4eaef}
.nut .rosca-arriba{fill:none;stroke:rgba(0,0,0,.4);stroke-width:.9}
.nut .agujero-canto{fill:none;stroke:color-mix(in srgb,var(--c) 40%,black);stroke-width:1.2}
/* Sombra dentro del borde de arriba y luz rebotada en el de abajo: sin estas
   dos medias lunas el agujero parece pintado en vez de taladrado. */
.nut .agujero-sombra{fill:none;stroke:rgba(0,0,0,.5);stroke-width:2.6}
.nut .agujero-luz{fill:none;stroke:color-mix(in srgb,var(--c) 65%,white);stroke-width:1.4;opacity:.7}
.nut .simbolo{fill:rgba(10,12,20,.42);font-weight:900;font-family:system-ui,sans-serif}
.nut .canto{fill:none;stroke:color-mix(in srgb,var(--c) 45%,black);stroke-width:1.2}

.nut.alzada{transform:translateY(calc(var(--h) * -1.2)) scale(1.05);z-index:3}
.nut.volando{z-index:9;pointer-events:none}
.peg.completa .nut svg{animation:brillo .55s ease-out}
@keyframes brillo{45%{filter:drop-shadow(0 0 16px white) brightness(1.3)}}

/* El giro de la tuerca lo calcula JavaScript vértice a vértice (ver nuts.js):
   giran la tapa y las caras del cuerpo a la vez, que es lo que hace una pieza
   real. Aquí solo queda el desplazamiento vertical al cogerla. */

/* El tornillo NO gira: está fijo a su base. Solo gira la tuerca sobre él. */

/* Cabeza cromada del tornillo: solo asoma cuando la torre está llena.
   Es la señal de "esta ya está" sin necesidad de leer nada. */
.cabeza{position:absolute;left:50%;width:26px;height:15px;transform:translateX(-50%);
  border-radius:50%;z-index:4;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(ellipse at 42% 28%,#ffffff,#d2dae1 38%,#8e9aa6 72%,#5c6773);
  box-shadow:0 2px 5px rgba(0,0,0,.5),inset 0 -2px 3px rgba(0,0,0,.25)}
.peg.completa .cabeza{opacity:1}

.nuts-board .peg[data-vacia="1"] .base{opacity:.55}
@media(max-width:400px){.nuts-board{gap:10px 6px}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(min-width:700px){ .cell{font-size:28px} }