/*
 * Alternative looks for El Clásico del Telefonazo.
 * The default (no data-skin, or data-skin="neon") is the neon arcade style defined in index.html.
 * Each skin redefines the colour/font tokens and switches off the effects that don't fit it.
 */

/* ---------- shared: everything that isn't neon drops the arcade effects ---------- */
html[data-skin]:not([data-skin="neon"]) body::after,
html[data-skin]:not([data-skin="neon"]) .scan,
html[data-skin]:not([data-skin="neon"]) .lane::before,
html[data-skin]:not([data-skin="neon"]) h1::before,
html[data-skin]:not([data-skin="neon"]) h1::after,
html[data-skin]:not([data-skin="neon"]) .mug .burst { display: none; }
html[data-skin]:not([data-skin="neon"]) .count { animation: none; }
html[data-skin]:not([data-skin="neon"]) .count.bump { animation: bump .45s cubic-bezier(.2,1.8,.4,1); }
html[data-skin]:not([data-skin="neon"]) .count.drop { animation: drop .4s ease; }
html[data-skin]:not([data-skin="neon"]) .lane,
html[data-skin]:not([data-skin="neon"]) .wildpanel,
html[data-skin]:not([data-skin="neon"]) .plus,
html[data-skin]:not([data-skin="neon"]) .chip,
html[data-skin]:not([data-skin="neon"]) .rb { clip-path: none; }
html[data-skin]:not([data-skin="neon"]) .tallies path,
html[data-skin]:not([data-skin="neon"]) .plus,
html[data-skin]:not([data-skin="neon"]) .mug .face { filter: none; }

/* ======================================================================
   POLARIS CLEAN — the company website: black, lime, Space Grotesk, flat
   ====================================================================== */
html[data-skin="polaris"] {
  --night: #0a0a0a; --night-2: #0a0a0a; --panel: #111111; --ink: #f4f4f0; --ink-dim: #8a8a8a;
  --us: #ccff00; --pablo: #60a5fa; --mag: #c084fc; --wild: #fb923c; --good: #34d399; --bad: #ff6568;
  --f-display: "Space Grotesk", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --f-body: "Space Grotesk", system-ui, sans-serif;
}
html[data-skin="polaris"] * { text-shadow: none !important; }
html[data-skin="polaris"] body { background: #0a0a0a; background-image: radial-gradient(70% 45% at 50% -10%, rgba(204,255,0,.07), transparent 70%); }
html[data-skin="polaris"] h1 { font-weight: 700; letter-spacing: -.03em; text-transform: none; }
html[data-skin="polaris"] .sub { color: var(--ink-dim); letter-spacing: .08em; }
html[data-skin="polaris"] .sub::after { content: none; }
html[data-skin="polaris"] .banner { font-weight: 600; text-transform: none; letter-spacing: -.01em; color: var(--ink); }
html[data-skin="polaris"] .lane,
html[data-skin="polaris"] .wildpanel { border-radius: 20px; border: 1px solid rgba(255,255,255,.08); box-shadow: none; background: var(--panel); }
html[data-skin="polaris"] .lane { border-top: 3px solid var(--c); }
html[data-skin="polaris"] .lane.leading { border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 0 0 1px var(--c); }
html[data-skin="polaris"] .tag { letter-spacing: .12em; }
html[data-skin="polaris"] .name { font-weight: 700; letter-spacing: -.02em; text-transform: none; }
html[data-skin="polaris"] .count { color: var(--ink); font-weight: 700; letter-spacing: -.05em; }
html[data-skin="polaris"] .lane.leading .count { color: var(--c); }
html[data-skin="polaris"] .week b, html[data-skin="polaris"] .stats b { color: var(--c); }
html[data-skin="polaris"] .member h3 { font-weight: 700; text-transform: none; letter-spacing: -.01em; }
html[data-skin="polaris"] .duo .x { font-weight: 700; }
html[data-skin="polaris"] .plus { border-radius: 999px; box-shadow: none; font-weight: 600; text-transform: none; letter-spacing: 0; }
html[data-skin="polaris"] .plus:hover { filter: brightness(1.08); }
html[data-skin="polaris"] .chip { border-radius: 999px; box-shadow: none; text-transform: none; letter-spacing: .02em; border-color: rgba(255,255,255,.18); color: var(--ink); }
html[data-skin="polaris"] .chip.wild { border-color: var(--wild); color: var(--wild); }
html[data-skin="polaris"] .chip.solid { color: var(--night); }
html[data-skin="polaris"] .lang .chip[aria-pressed="true"],
html[data-skin="polaris"] .seg .chip[aria-pressed="true"] { background: var(--us); color: var(--night); border-color: var(--us); }
html[data-skin="polaris"] .mug { --cut: circle(47% at 50% 50%) !important; transform: none; }
html[data-skin="polaris"] .mug .face i { background: #1a1a1a; }
html[data-skin="polaris"] .mug .face::after { box-shadow: inset 0 0 0 2px var(--c); border-radius: 50%; }
html[data-skin="polaris"] .lane.leading .mug { animation: none; }
html[data-skin="polaris"] .tallies path.slash { stroke: var(--ink-dim); }
html[data-skin="polaris"] .core { font-weight: 700; color: var(--ink-dim); }
html[data-skin="polaris"] .core::before, html[data-skin="polaris"] .core::after { box-shadow: none; animation-duration: 12s; }
html[data-skin="polaris"] .meter { border-radius: 99px; border-color: rgba(255,255,255,.1); }
html[data-skin="polaris"] .meter b, html[data-skin="polaris"] .meter i { box-shadow: none; }
html[data-skin="polaris"] .diff { font-weight: 700; }
html[data-skin="polaris"] #countdown { font-weight: 700; letter-spacing: -.02em; }
html[data-skin="polaris"] .card { border-radius: 14px; border-color: rgba(251,146,60,.4); background: rgba(251,146,60,.05); }
html[data-skin="polaris"] .card h3 { font-weight: 700; text-transform: none; letter-spacing: -.02em; }
html[data-skin="polaris"] .wp-head h2, html[data-skin="polaris"] .ledger h2, html[data-skin="polaris"] .feed h2 { font-weight: 700; text-transform: none; letter-spacing: -.01em; }
html[data-skin="polaris"] .qm .bar, html[data-skin="polaris"] .qm .bar i { border-radius: 99px; box-shadow: none; }
html[data-skin="polaris"] .days .bar, html[data-skin="polaris"] .days .bar i { border-radius: 6px 6px 2px 2px; box-shadow: none; }
html[data-skin="polaris"] .sticker { clip-path: none; border-radius: 12px; filter: none; transform: rotate(0); animation: none; }
html[data-skin="polaris"] .feed { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; box-shadow: none; }
html[data-skin="polaris"] .ledger, html[data-skin="polaris"] details.settings { border-radius: 14px; }
html[data-skin="polaris"] .rb { border-radius: 16px; }
html[data-skin="polaris"] .rb img { clip-path: circle(48%); }

/* ======================================================================
   PIZARRA BLANCA — the old office whiteboard: markers, magnets, sticks
   ====================================================================== */
html[data-skin="pizarra"] {
  color-scheme: light;
  --night: #f7f8f5; --night-2: #f7f8f5; --panel: transparent; --ink: #1c2633; --ink-dim: #5f6b78;
  --us: #1f8a3e; --pablo: #1d5fd1; --mag: #d2312d; --wild: #e0701b; --good: #1f8a3e; --bad: #d2312d;
  --f-display: "Kalam", "Comic Sans MS", cursive;
  --f-mono: "Kalam", "Comic Sans MS", cursive;
  --f-body: "Kalam", "Comic Sans MS", cursive;
}
html[data-skin="pizarra"] * { text-shadow: none !important; }
html[data-skin="pizarra"] body {
  background: #f7f8f5;
  background-image:
    radial-gradient(40% 30% at 20% 30%, rgba(60,80,110,.05), transparent 70%),
    radial-gradient(35% 25% at 75% 70%, rgba(60,80,110,.045), transparent 70%),
    radial-gradient(25% 20% at 60% 15%, rgba(29,95,209,.035), transparent 70%);
}
/* aluminium frame + marker tray */
html[data-skin="pizarra"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 29; pointer-events: none;
  border: 12px solid #c9ced4; box-shadow: inset 0 0 0 2px #a5adb6, inset 0 8px 20px rgba(0,0,0,.07);
}
html[data-skin="pizarra"] body { line-height: 1.2; }
html[data-skin="pizarra"] h1 { line-height: 1; font-weight: 700; letter-spacing: 0; color: var(--ink); text-transform: none; transform: rotate(-1deg); }
html[data-skin="pizarra"] .sub { color: var(--mag); letter-spacing: .04em; text-transform: none; font-size: 18px; }
html[data-skin="pizarra"] .sub::after { content: none; }
html[data-skin="pizarra"] .status, html[data-skin="pizarra"] .tag { text-transform: none; letter-spacing: .02em; }
html[data-skin="pizarra"] .banner { color: var(--ink); text-transform: none; font-weight: 700; letter-spacing: 0; }
html[data-skin="pizarra"] .lane {
  background: transparent; box-shadow: none;
  border: 3px solid var(--c); border-radius: 22px 14px 26px 12px / 14px 24px 12px 22px;
}
html[data-skin="pizarra"] .lane.leading { border-width: 4px; box-shadow: none; }
html[data-skin="pizarra"] .name { color: var(--c); font-weight: 700; text-transform: none; letter-spacing: 0; line-height: .95; }
html[data-skin="pizarra"] .count { color: var(--c); font-weight: 700; letter-spacing: 0; line-height: .85; }
html[data-skin="pizarra"] .week, html[data-skin="pizarra"] .stats, html[data-skin="pizarra"] .member h3, html[data-skin="pizarra"] .undo, html[data-skin="pizarra"] .tag { line-height: 1.1; }
html[data-skin="pizarra"] .member h3 small { margin-top: 0; }
html[data-skin="pizarra"] .crown { color: var(--wild); }
html[data-skin="pizarra"] .week b, html[data-skin="pizarra"] .stats b { color: var(--c); }
html[data-skin="pizarra"] .member h3 { text-transform: none; font-weight: 700; letter-spacing: 0; }
/* the sticks, exactly like the real board */
html[data-skin="pizarra"] .tallies path { stroke-width: 4.5; }
html[data-skin="pizarra"] .tallies path.slash { stroke: var(--mag); }
html[data-skin="pizarra"] .tallies path.boost { stroke: var(--wild); }
/* magnets */
html[data-skin="pizarra"] .plus { color: #fff; border-radius: 14px; box-shadow: 0 4px 0 rgba(0,0,0,.22); text-transform: none; letter-spacing: .02em; font-weight: 700; }
html[data-skin="pizarra"] .plus:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.22); }
html[data-skin="pizarra"] .rb { color: #fff; border-radius: 14px; box-shadow: 0 4px 0 rgba(0,0,0,.22); text-transform: none; }
html[data-skin="pizarra"] .chip { border: 2px solid var(--ink); color: var(--ink); background: #fff; border-radius: 10px; box-shadow: none; text-transform: none; letter-spacing: 0; }
html[data-skin="pizarra"] .chip.wild { border-color: var(--wild); color: var(--wild); }
html[data-skin="pizarra"] .chip.solid { background: var(--wild); color: #fff; }
html[data-skin="pizarra"] .lang .chip[aria-pressed="true"],
html[data-skin="pizarra"] .seg .chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
/* taped photos */
html[data-skin="pizarra"] .mug { transform: rotate(var(--tilt, -3deg)); }
html[data-skin="pizarra"] .mug .face { filter: drop-shadow(2px 4px 4px rgba(0,0,0,.18)); }
html[data-skin="pizarra"] .mug .face i { background: #fff; }
html[data-skin="pizarra"] .mug img { filter: grayscale(1) contrast(1.15) brightness(1.05); }
html[data-skin="pizarra"] .mug .face::after { box-shadow: inset 0 0 0 5px #fff; }
html[data-skin="pizarra"] .mug::before {
  content: ""; position: absolute; z-index: 2; top: -7px; left: 28%; width: 44%; height: 18px;
  background: rgba(255,232,140,.85); transform: rotate(-5deg); box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
html[data-skin="pizarra"] .core { color: var(--mag); }
html[data-skin="pizarra"] .core::before, html[data-skin="pizarra"] .core::after { box-shadow: none; animation: none; border-width: 3px; }
html[data-skin="pizarra"] .core::before { border-color: var(--pablo) transparent var(--pablo) transparent; transform: rotate(-12deg); }
html[data-skin="pizarra"] .core::after { border-color: transparent var(--us) transparent var(--us); transform: rotate(8deg); }
html[data-skin="pizarra"] .meter { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.15); border-radius: 6px; }
html[data-skin="pizarra"] .meter b, html[data-skin="pizarra"] .meter i { box-shadow: none; }
html[data-skin="pizarra"] .diff small, html[data-skin="pizarra"] .proj { text-transform: none; }
html[data-skin="pizarra"] #countdown { color: var(--mag); font-weight: 700; }
html[data-skin="pizarra"] .bigclock .lbl { text-transform: none; }
/* the wildcard is a sticky note */
html[data-skin="pizarra"] .wildpanel { background: #fff3a6; border: 0; border-radius: 3px; transform: rotate(-.25deg); box-shadow: 0 10px 18px -8px rgba(0,0,0,.25); }
html[data-skin="pizarra"] .wp-head h2 { color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 700; }
html[data-skin="pizarra"] .card { background: transparent; border: 2px dashed rgba(28,38,51,.35); border-radius: 8px; }
html[data-skin="pizarra"] .card h3 { color: var(--mag); text-transform: none; letter-spacing: 0; font-weight: 700; line-height: 1; }
html[data-skin="pizarra"] .card p { line-height: 1.3; }
html[data-skin="pizarra"] .nocard { border-color: rgba(28,38,51,.35); }
html[data-skin="pizarra"] .qm .bar { background: rgba(0,0,0,.08); }
html[data-skin="pizarra"] .qm .bar i, html[data-skin="pizarra"] .days .bar i { box-shadow: none; }
html[data-skin="pizarra"] .days .bar { background: rgba(0,0,0,.04); }
html[data-skin="pizarra"] .earned b { color: var(--wild); }
html[data-skin="pizarra"] .sticker { color: #fff; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.2)); }
html[data-skin="pizarra"] .feed { background: transparent; border-color: var(--ink); box-shadow: none; }
html[data-skin="pizarra"] .feed span.team, html[data-skin="pizarra"] .feed span.pablo { font-weight: 700; }
html[data-skin="pizarra"] .ledger, html[data-skin="pizarra"] details.settings { background: rgba(255,255,255,.6); border-color: rgba(0,0,0,.12); }
html[data-skin="pizarra"] .tbl th, html[data-skin="pizarra"] .tbl td { border-color: rgba(0,0,0,.12); }
html[data-skin="pizarra"] input, html[data-skin="pizarra"] select { background: #fff; border-color: rgba(0,0,0,.25); }
html[data-skin="pizarra"] .remote { background: rgba(247,248,245,.97); border-top-color: var(--ink); }
html[data-skin="pizarra"] .toast { color: var(--ink) !important; text-shadow: none !important; }
html[data-skin="pizarra"] .note { background: var(--ink); color: #fff; }
html[data-skin="pizarra"] .pinbox { background: #fff; }
html[data-skin="pizarra"] .flash { display: none; }

/* ======================================================================
   MARCADOR DE ESTADIO — stadium LED board: dot-matrix digits, black metal
   ====================================================================== */
html[data-skin="marcador"] {
  --night: #050505; --night-2: #050505; --panel: #0c0c0c; --ink: #f1f1f1; --ink-dim: #8b8b8b;
  --us: #ffc400; --pablo: #3fa9ff; --mag: #ff3b30; --wild: #ff7a00; --good: #3dff7a; --bad: #ff3b30;
  --f-display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --f-body: "Geist Mono", ui-monospace, Menlo, monospace;
}
html[data-skin="marcador"] body {
  background: #050505;
  background-image: radial-gradient(circle, #161616 1.1px, transparent 1.5px);
  background-size: 7px 7px;
}
html[data-skin="marcador"] h1 { font-weight: 800; letter-spacing: .04em; color: #fff; text-shadow: none; }
html[data-skin="marcador"] .sub { color: var(--us); }
html[data-skin="marcador"] .banner { font-family: "Doto", var(--f-mono); font-weight: 900; color: var(--us); text-shadow: 0 0 10px color-mix(in srgb, var(--us) 60%, transparent); letter-spacing: .06em; }
html[data-skin="marcador"] .lane,
html[data-skin="marcador"] .wildpanel {
  background: #0b0b0b; border: 4px solid #1b1b1b; border-radius: 8px;
  box-shadow: inset 0 0 0 2px #000, 0 0 0 1px #2a2a2a;
}
html[data-skin="marcador"] .lane.leading { box-shadow: inset 0 0 0 2px #000, 0 0 0 2px var(--c); }
html[data-skin="marcador"] .tag { color: var(--ink-dim); }
html[data-skin="marcador"] .name { font-weight: 800; color: #fff; letter-spacing: .08em; text-shadow: none; line-height: 1; }
html[data-skin="marcador"] .count { line-height: .9;
  font-family: "Doto", var(--f-mono); font-weight: 900; color: var(--c); letter-spacing: .02em;
  text-shadow: 0 0 6px color-mix(in srgb, var(--c) 80%, transparent), 0 0 22px color-mix(in srgb, var(--c) 45%, transparent);
}
html[data-skin="marcador"] .week { font-family: "Doto", var(--f-mono); font-weight: 700; line-height: 1.05; }
html[data-skin="marcador"] .stats, html[data-skin="marcador"] .tag { line-height: 1.1; }
html[data-skin="marcador"] .week b { text-shadow: 0 0 6px var(--c); }
html[data-skin="marcador"] .member h3 { font-weight: 800; letter-spacing: .08em; }
html[data-skin="marcador"] .plus { border-radius: 4px; box-shadow: none; font-weight: 800; letter-spacing: .08em; color: #000; }
html[data-skin="marcador"] .chip { border-radius: 3px; box-shadow: none; }
html[data-skin="marcador"] .mug { --cut: inset(0) !important; transform: none; }
html[data-skin="marcador"] .mug .face { filter: none; }
html[data-skin="marcador"] .mug .face::after { box-shadow: inset 0 0 0 3px #222; }
html[data-skin="marcador"] .mug img { filter: grayscale(1) contrast(1.25); }
html[data-skin="marcador"] .lane.leading .mug { animation: none; }
html[data-skin="marcador"] .tallies path { filter: drop-shadow(0 0 3px var(--c)); }
html[data-skin="marcador"] .tallies path.slash { stroke: var(--mag); filter: drop-shadow(0 0 3px var(--mag)); }
html[data-skin="marcador"] .core { font-weight: 800; color: #fff; text-shadow: none; }
html[data-skin="marcador"] .core::before, html[data-skin="marcador"] .core::after { animation: none; box-shadow: none; }
html[data-skin="marcador"] .diff, html[data-skin="marcador"] #countdown { font-family: "Doto", var(--f-mono); font-weight: 900; }
html[data-skin="marcador"] #countdown { color: var(--mag); text-shadow: 0 0 8px var(--mag); }
html[data-skin="marcador"] .proj b { font-family: "Doto", var(--f-mono); font-weight: 900; }
html[data-skin="marcador"] .card { background: #0e0e0e; border-color: #2a2a2a; }
html[data-skin="marcador"] .card h3 { color: var(--wild); font-weight: 800; letter-spacing: .06em; text-shadow: 0 0 10px color-mix(in srgb, var(--wild) 50%, transparent); }
html[data-skin="marcador"] .wp-head h2 { font-weight: 800; letter-spacing: .1em; text-shadow: none; }
html[data-skin="marcador"] .days .bar i { box-shadow: none; }
html[data-skin="marcador"] .sticker { clip-path: none; border-radius: 4px; transform: rotate(0); animation: none; }
html[data-skin="marcador"] .feed { border-color: #2a2a2a; box-shadow: none; }

/* skin picker (settings) */
.skin-note { margin: 0; font-size: 13px; color: var(--ink-dim); }

/* TV layout: fonts with taller digits get slightly smaller scores so each panel still fits one screen */
@media (min-width: 1000px) and (min-aspect-ratio: 4/3) {
  html[data-skin="polaris"] .count { font-size: clamp(40px, 10.4vh, 150px); line-height: .9; }
  html[data-skin="marcador"] .count { font-size: clamp(40px, 9.6vh, 140px); }
  html[data-skin="marcador"] .name { font-size: clamp(20px, 3.4vh, 38px); }
}