@font-face {
  font-family: 'VT323';
  src: url(vt323.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --verde: #447350;
  --verde-osc: #1f3d2a;
  --club: #15803d;
  --lima: #B8C648;
  --blanco: #f7faf4;
  --tinta: #14231a;
  --pix: 'VT323', ui-monospace, 'Courier New', monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%; overflow: hidden; background: radial-gradient(circle at 50% 30%, #2d5238, #0e1d14 70%);
  overscroll-behavior: none; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--blanco);
}

#stage {
  position: fixed; top: 0; bottom: 0; left: 50%; width: var(--sw, 100vw); transform: translateX(-50%); overflow: hidden; background: var(--verde-osc);
  box-shadow: 0 0 0 1px rgba(184,198,72,.25), 0 0 60px rgba(0,0,0,.6);
}
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }

.hidden { display: none !important; }

/* Botones redondos arriba a la derecha */
#topbtns {
  position: fixed; z-index: 30; right: max(10px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top));
  display: flex; gap: 8px;
}
.round {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7);
  background: rgba(20,35,26,.55); color: #fff; font: 18px/1 system-ui, 'Segoe UI Emoji', sans-serif; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.round.off { opacity: .55; text-decoration: line-through; }

/* Pantallas */
.screen {
  position: fixed; inset: 0; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background: rgba(15, 30, 20, .42); overflow-y: auto; touch-action: pan-y;
}
.card {
  width: min(100%, 380px); text-align: center; padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(68,115,80,.94), rgba(31,61,42,.96));
  border: 3px solid var(--lima); border-radius: 20px;
  box-shadow: 0 8px 0 rgba(0,0,0,.28), 0 0 40px rgba(184,198,72,.18);
}
.card.wide { width: min(100%, 430px); }
.card.tall { max-height: calc(100dvh - 28px); display: flex; flex-direction: column; }

h1, h2 { font-family: var(--pix); font-weight: 400; margin: 0; letter-spacing: 1px; }
h1 { line-height: .86; margin: 6px 0 4px; }
h1 .t1 { display: block; font-size: 76px; color: #fff; text-shadow: 0 4px 0 var(--verde-osc); }
h1 .t1 b { color: var(--lima); font-weight: 400; }
h1 .t2 { display: block; font-size: 38px; color: var(--lima); text-shadow: 0 3px 0 var(--verde-osc); }
h2 { font-size: 40px; color: var(--lima); margin-bottom: 8px; text-shadow: 0 3px 0 var(--verde-osc); }

.crest { border-radius: 22px; border: 3px solid rgba(255,255,255,.85); box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.logo { max-width: 78%; height: auto; background: #f7faf4; border-radius: 14px; padding: 8px 12px; }
.tag { margin: 4px 0 10px; font-size: 14px; opacity: .9; }
.best { font: 26px/1 var(--pix); margin: 0 0 12px; color: #fff; }
.best b { color: var(--lima); font-weight: 400; }
.mini { font-size: 12.5px; line-height: 1.4; opacity: .9; margin: 8px 0; }
.mini a { color: var(--lima); }
.who { font-size: 13px; margin: 12px 0 0; opacity: .95; }

.btn {
  font: 26px/1 var(--pix); letter-spacing: .5px; color: var(--blanco);
  background: rgba(20,35,26,.55); border: 2px solid rgba(255,255,255,.55); border-radius: 14px;
  padding: 12px 14px; min-height: 48px; cursor: pointer; width: 100%; margin-top: 10px;
  box-shadow: 0 4px 0 rgba(0,0,0,.28);
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }
.btn.primary { background: var(--lima); color: var(--tinta); border-color: #fff; }
.btn.big { font-size: 40px; padding: 14px; min-height: 64px; }
.btn.wa { background: #25D366; color: #06331a; border-color: #fff; }
.row { display: flex; gap: 8px; }
.row .btn { margin-top: 10px; font-size: 22px; padding: 10px 6px; }

.link {
  background: none; border: 0; color: var(--lima); text-decoration: underline; font: inherit; cursor: pointer; padding: 4px;
}
.link.small { font-size: 12.5px; margin-top: 10px; }

/* Cómo se juega */
.zones { display: flex; gap: 8px; margin: 6px 0 10px; }
.zone {
  border: 2px dashed rgba(255,255,255,.6); border-radius: 12px; padding: 10px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; min-height: 100px; justify-content: center;
}
.zone b { font: 38px/1 var(--pix); color: var(--lima); font-weight: 400; }
.zl { flex: 1; } .zr { flex: 2; }
.tips { text-align: left; font-size: 14px; line-height: 1.45; padding-left: 20px; margin: 6px 0 4px; }
.tips b { color: var(--lima); }

/* Fin de partida */
.foul { font: 34px/1 var(--pix); color: #ffd166; margin: 0 0 4px; }
.score { font: 110px/0.9 var(--pix); color: #fff; text-shadow: 0 5px 0 var(--verde-osc); display: flex; flex-direction: column; }
.score small { font-size: 24px; color: var(--lima); letter-spacing: 3px; text-shadow: none; margin-top: 2px; }
.sub { font: 22px/1.2 var(--pix); margin: 6px 0 8px; opacity: .95; }
.newrec { display: block; color: #ffd166; font-size: 28px; animation: pulse .6s infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.1); } }

.namebox { margin: 6px 0 4px; text-align: left; }
.namebox label { font-size: 13px; }
.namebox .row { align-items: stretch; }
.namebox input {
  flex: 1; min-width: 0; margin-top: 10px; padding: 0 12px; height: 48px; border-radius: 14px; border: 2px solid #fff;
  background: #f7faf4; color: var(--tinta); font: 600 17px system-ui, sans-serif; -webkit-user-select: text; user-select: text;
}
.namebox .btn { width: auto; flex: 0 0 auto; font-size: 22px; }
.rankline { font: 24px/1.15 var(--pix); color: var(--lima); margin: 6px 0 0; min-height: 1.1em; }

/* Ranking */
.tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.tab {
  flex: 1; font: 24px/1 var(--pix); color: #fff; background: rgba(20,35,26,.5); border: 2px solid rgba(255,255,255,.4);
  border-radius: 10px; padding: 8px 4px; cursor: pointer;
}
.tab.on { background: var(--lima); color: var(--tinta); border-color: #fff; }
.rank {
  list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 120px; max-height: 52dvh;
  text-align: left; touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.rank li {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; margin-bottom: 4px;
  background: rgba(20,35,26,.4); font-size: 16px;
}
.rank li.me { background: var(--lima); color: var(--tinta); font-weight: 700; }
.rank .pos { font: 26px/1 var(--pix); width: 38px; text-align: center; flex: none; }
.rank .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .pt { font: 28px/1 var(--pix); flex: none; }
.rank .empty { display: block; text-align: center; opacity: .85; background: none; padding: 20px 0; }

.toast {
  position: fixed; z-index: 40; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: #14231a; color: #fff; border: 2px solid var(--lima); border-radius: 12px; padding: 10px 16px; font-size: 14px;
  max-width: 88vw; text-align: center;
}

@media (max-height: 640px) {
  h1 .t1 { font-size: 58px; } h1 .t2 { font-size: 30px; }
  .crest { width: 78px; height: 78px; }
  .score { font-size: 84px; } .btn.big { min-height: 54px; font-size: 34px; }
}
@media (max-height: 520px) { .card { padding: 10px 14px; } .crest { display: none; } }

/* Bienvenida, héroes y modos */
.heroes { display: flex; justify-content: center; align-items: flex-end; gap: 10px; }
.heroes canvas { height: 86px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.heroes .crest { margin-bottom: 4px; }
#welcomeIn {
  width: 100%; height: 52px; margin: 8px 0 4px; padding: 0 14px; border-radius: 14px; border: 3px solid #fff; background: #f7faf4; color: var(--tinta);
  font: 700 18px system-ui, sans-serif; text-align: center; -webkit-user-select: text; user-select: text;
}
.err { color: #ffd166; font-size: 13px; margin: 4px 0 0; }

#modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; }
#modes h3 { grid-column: 1 / -1; margin: 6px 0 0; font: 22px/1 var(--pix); color: var(--lima); letter-spacing: 2px; text-align: left; }
.mode {
  display: grid; grid-template-columns: 38px 1fr; grid-template-areas: 'ico mn' 'ico mt' 'ico mb'; align-items: center; column-gap: 8px; text-align: left;
  background: rgba(20,35,26,.55); border: 2px solid rgba(255,255,255,.45); border-radius: 14px; padding: 9px 8px; color: var(--blanco); cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.28); font-family: inherit; min-height: 70px;
}
.mode:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }
.mode:hover { border-color: var(--lima); }
.mode .ico { grid-area: ico; font-size: 30px; line-height: 1; text-align: center; }
.mode .mn { grid-area: mn; font: 21px/1 var(--pix); color: #fff; }
.mode .mt { grid-area: mt; font-size: 11px; line-height: 1.2; opacity: .85; }
.mode .mb { grid-area: mb; font: 17px/1 var(--pix); color: var(--lima); margin-top: 2px; }

.modeTag { font: 22px/1 var(--pix); color: var(--lima); margin: 0 0 2px; letter-spacing: 1px; }
.pills { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; touch-action: pan-x; -webkit-overflow-scrolling: touch; }
.pill {
  flex: none; font: 20px/1 var(--pix); color: #fff; background: rgba(20,35,26,.5); border: 2px solid rgba(255,255,255,.4); border-radius: 999px; padding: 7px 12px; cursor: pointer;
}
.pill.on { background: var(--lima); color: var(--tinta); border-color: #fff; }

.boost {
  position: fixed; z-index: 30; right: max(18px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom));
  width: 92px; height: 92px; border-radius: 50%; border: 4px solid #fff; background: radial-gradient(circle at 35% 30%, #d9e66a, var(--lima) 55%, #7d8c26);
  color: var(--tinta); font: 26px/1 var(--pix); letter-spacing: 1px; box-shadow: 0 6px 0 rgba(0,0,0,.35); touch-action: none;
}
.boost.on { transform: scale(.94); background: radial-gradient(circle at 35% 30%, #fff7c2, #ffd166 55%, #d6a020); }

.made { font: 30px/1.15 var(--pix); color: #fff; margin: 14px 0 6px; letter-spacing: 1px; }
.made b { color: var(--lima); font-weight: 400; font-size: 38px; }

/* Los textos nunca se salen del ancho: titulares escalan con el ancho del escenario y todo lo demás envuelve */
.card, .card * { overflow-wrap: break-word; word-break: normal; }
h1 .t1.long { font-size: min(64px, calc(var(--sw, 100vw) * 0.125)); white-space: nowrap; }
h1 .t1 { font-size: min(76px, calc(var(--sw, 100vw) * 0.2)); }
h1 .t2 { font-size: min(38px, calc(var(--sw, 100vw) * 0.085)); }
.foul { font-size: min(34px, calc(var(--sw, 100vw) * 0.08)); }
.modeTag { font-size: min(22px, calc(var(--sw, 100vw) * 0.055)); }
.sub { font-size: min(22px, calc(var(--sw, 100vw) * 0.058)); }
.made { font-size: min(30px, calc(var(--sw, 100vw) * 0.08)); }
.made b { font-size: min(38px, calc(var(--sw, 100vw) * 0.1)); }
.rankline { font-size: min(24px, calc(var(--sw, 100vw) * 0.062)); }
.mode .mn { font-size: min(21px, calc(var(--sw, 100vw) * 0.052)); }
.mode .mt { font-size: min(11px, calc(var(--sw, 100vw) * 0.03)); }
.toast { max-width: calc(var(--sw, 100vw) - 28px); }
.tips { font-size: min(14px, calc(var(--sw, 100vw) * 0.037)); }

.mode { grid-template-columns: 30px 1fr; column-gap: 6px; padding: 8px 7px; }
.mode .ico { font-size: 26px; }
.mode .mn { font-size: min(18px, calc(var(--sw, 100vw) * 0.048)); line-height: 1.02; hyphens: none; }
.mode .mt { font-size: min(11px, calc(var(--sw, 100vw) * 0.029)); }
.mode .mb { font-size: min(16px, calc(var(--sw, 100vw) * 0.042)); }

.card { min-width: 0; max-width: 100%; }
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin: 4px 0 2px; }
.cat {
  font: min(19px, calc(var(--sw, 100vw) * 0.05))/1 var(--pix); color: #fff; background: rgba(20,35,26,.5); border: 2px solid rgba(255,255,255,.35);
  border-radius: 10px; padding: 8px 2px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat.on { background: var(--lima); color: var(--tinta); border-color: #fff; }
.rsel {
  width: 100%; height: 46px; margin: 0 0 8px; padding: 0 10px; border-radius: 12px; border: 2px solid #fff; background: #f7faf4; color: var(--tinta);
  font: 700 16px system-ui, sans-serif; -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
}

.cat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 5px; font-size: 17px; line-height: 1; text-overflow: clip; }
.cat .ci { font-size: 20px; line-height: 1; }
.cat .ct { font: 17px/1 var(--pix); }