/* ============================================================
   PALABREROS — Sistema de diseño "Nintendo.com 2001"
   Chapa periwinkle biselada · capa carbono con dot-matrix ·
   color cálido racionado solo para acción · tipografía Arial Black contorneada.
   Ver DESIGN.md.
   ============================================================ */

:root {
  /* Color */
  --primary: #e60012;
  --signal: #f68d1f;
  --amber: #ecab37;
  --nav-gold: #e48600;
  --canvas: #7a8aba;
  --canvas-soft: #9fbee7;
  --lavender: #acace7;
  --ice: #c0d5e6;
  --periwinkle: #8ba1d4;
  --chrome-indigo: #3d4f97;
  --muted-indigo: #60619c;
  --platinum: #dedede;
  --surface: #ffffff;
  --carbon: #21242e;
  --hairline: #5a5f8c;
  --ink: #21242e;
  --ink-soft: #3d4f97;
  --on-primary: #ffffff;
  --systems-teal: #206479;
  --games-red: #a7282b;

  /* Bevel highlights */
  --bevel-top: rgba(255, 255, 255, 0.55);
  --bevel-bottom: var(--chrome-indigo);

  /* Tipografía */
  --sans: Arial, Helvetica, sans-serif;
  --display: "Arial Black", "Archivo Black", Arial, sans-serif;
  --pixel: "Press Start 2P", "Arial Black", monospace;

  /* Radios */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  /* Espaciado */
  --s-xxs: 2px; --s-xs: 4px; --s-sm: 8px; --s-md: 12px;
  --s-lg: 16px; --s-xl: 24px; --s-xxl: 32px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--canvas);
  /* textura de chapa cepillada muy sutil */
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
    radial-gradient(120% 80% at 50% -10%, var(--periwinkle), var(--canvas) 60%, #6b7aa8 100%);
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Texturas reutilizables ---------- */
.halftone {
  background-color: var(--carbon);
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px);
  background-size: 4px 4px;
}

/* ---------- Placa biselada (nivel 1) ---------- */
.plate {
  background: linear-gradient(180deg, #93a3cf 0%, var(--periwinkle) 8%, var(--canvas) 100%);
  border: 1px solid var(--chrome-indigo);
  border-top-color: var(--bevel-top);
  border-left-color: #9aabd6;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 1px 0 var(--chrome-indigo),
    0 3px 6px rgba(33,36,46,.30);
  border-radius: var(--r-md);
}

/* placa recesada (nivel 0) — para inputs/listas */
.inset {
  background: #6f7fad;
  border: 1px solid var(--chrome-indigo);
  border-top-color: #4a5a9c;
  box-shadow: inset 0 2px 4px rgba(33,36,46,.45), inset 0 -1px 0 rgba(255,255,255,.18);
  border-radius: var(--r-sm);
}

/* chaflán (corte a 45°) para módulos grandes */
.chamfer {
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

/* ---------- Layout ---------- */
.machine {
  max-width: 820px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Navbar carbono con dot-matrix */
.navbar {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-sm) var(--s-md);
  color: var(--nav-gold);
  border-bottom: 2px solid var(--chrome-indigo);
  position: sticky;
  top: 0;
  z-index: 30;
}
.logo-pill {
  background: var(--surface);
  color: var(--primary);
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
  letter-spacing: .5px;
  padding: 4px 14px;
  border-radius: 9999px;
  border: 2px solid var(--carbon);
  text-transform: uppercase;
  white-space: nowrap;
}
.navbar .tagline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--canvas-soft);
  margin-left: auto;
}

.stage {
  flex: 1;
  padding: var(--s-lg) var(--s-md) var(--s-xxl);
}

/* ---------- Pantallas ---------- */
.screen { display: none; animation: pop .25s ease both; }
.screen.is-active { display: block; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.99);} to { opacity:1; transform:none; } }

/* Cabecera de sección (label bar) */
.section-bar {
  background: var(--canvas);
  border: 1px solid var(--chrome-indigo);
  border-top-color: var(--bevel-top);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  color: var(--ink);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: var(--s-sm) var(--s-md);
  display: flex;
  align-items: center;
  gap: var(--s-sm);
}
.section-bar .glyph {
  width: 14px; height: 14px; display: inline-block;
  background:
    linear-gradient(var(--ink) 0 0) 0 0/100% 2px no-repeat,
    linear-gradient(var(--ink) 0 0) 0 6px/100% 2px no-repeat,
    linear-gradient(var(--ink) 0 0) 0 12px/100% 2px no-repeat;
}
.phase-pill {
  margin-left: auto;
  background: var(--amber);
  color: var(--carbon);
  font-family: var(--pixel);
  font-size: 8px;
  padding: 5px 7px;
  border-radius: var(--r-xs);
  border: 1px solid var(--carbon);
}

/* Wordmark display contorneado (box-art) */
.wordmark {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  line-height: .92;
  color: var(--surface);
  letter-spacing: -.5px;
  text-transform: uppercase;
  -webkit-text-stroke: 2px var(--carbon);
  text-shadow: 3px 3px 0 var(--carbon), 0 0 1px var(--carbon);
  margin: 0;
}

/* Hero */
.hero {
  position: relative;
  padding: var(--s-xl) var(--s-lg);
  color: var(--surface);
  border: 1px solid var(--chrome-indigo);
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.18), transparent 50%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, var(--lavender), var(--chrome-indigo));
}
.hero .wordmark { font-size: clamp(34px, 11vw, 64px); }
.hero .hero-tag {
  font-size: 14px; font-weight: 700; line-height: 1.3;
  margin-top: var(--s-md); max-width: 30ch;
  text-shadow: 1px 1px 0 var(--carbon);
}

/* ---------- Botones ---------- */
.btn {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 13px;
  border: 1px solid var(--carbon);
  border-radius: var(--r-xs);
  padding: 14px 18px;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 0 rgba(33,36,46,.5);
  transition: transform .05s ease, filter .1s ease;
  user-select: none;
}
.btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-submit { background: var(--signal); color: var(--on-primary); }
.btn-amber  { background: var(--amber); color: var(--carbon); }
.btn-secondary { background: var(--carbon); color: var(--on-primary); border-color:#000; }
.btn-block { width: 100%; }
.btn-lg { font-size: 15px; padding: 16px 22px; }

/* arrow chip naranja */
.arrow-chip {
  flex: none;
  width: 26px; height: 26px;
  background: var(--signal);
  color: #fff;
  border-radius: var(--r-xs);
  border: 1px solid var(--carbon);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.arrow-round {
  width: 30px; height: 30px; border-radius: 9999px;
}

/* ---------- Inputs ---------- */
.field { margin: var(--s-md) 0; }
.field-label {
  display: block;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: var(--s-xs);
  color: var(--surface);
  text-shadow: 1px 1px 0 var(--carbon);
}
.input-row { display: flex; gap: var(--s-sm); align-items: stretch; }
input[type="text"], input[type="number"], textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px; /* evita zoom en iOS */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--carbon);
  border-radius: var(--r-xs);
  padding: 12px;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.15);
}
textarea { resize: vertical; min-height: 90px; line-height: 1.4; }
.mic-btn {
  flex: none;
  width: 52px;
  background: var(--carbon);
  color: var(--canvas-soft);
  border: 1px solid #000;
  border-radius: var(--r-xs);
  font-size: 20px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.mic-btn.listening { background: var(--primary); color: #fff; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.4);} }
.hint { font-size: 11px; color: var(--canvas-soft); margin-top: 6px; }

/* ---------- Turno de jugador ---------- */
.turn-banner {
  text-align: center;
  margin-bottom: var(--s-md);
}
.turn-banner .who {
  font-family: var(--display);
  font-style: italic;
  font-size: 26px;
  color: var(--amber);
  text-transform: uppercase;
  -webkit-text-stroke: 1.5px var(--carbon);
  text-shadow: 2px 2px 0 var(--carbon);
}
.pass-note {
  text-align:center; font-size: 11px; color: var(--carbon);
  background: var(--amber); display:inline-block; padding:4px 8px;
  border:1px solid var(--carbon); border-radius: var(--r-xs);
  text-transform: uppercase; font-weight:700; letter-spacing:.5px;
}

/* Lista de jugadores en setup */
.player-list { list-style: none; padding: 0; margin: 0; }
.player-list li { display:flex; gap: var(--s-sm); margin-bottom: var(--s-sm); align-items:center; }
.player-list .pnum {
  width: 26px; height:26px; flex:none; border-radius:9999px;
  background: var(--signal); color:#fff; display:grid; place-items:center;
  font-weight:900; border:1px solid var(--carbon);
}
.del-btn { background: var(--carbon); color:#fff; border:1px solid #000; border-radius: var(--r-xs); width:40px; min-height:40px; cursor:pointer; font-size:18px; }

/* ---------- Camino de palabras (grafo) ---------- */
.path-card { padding: var(--s-md); margin-bottom: var(--s-md); }
.path-head { display:flex; align-items:center; gap: var(--s-sm); margin-bottom: var(--s-sm); }
.path-head .pname { font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.5px; color: var(--surface); text-shadow:1px 1px 0 var(--carbon);}
.dist-badge {
  margin-left:auto;
  font-family: var(--pixel); font-size: 8px;
  background: var(--carbon); color: var(--amber);
  padding: 6px 8px; border-radius: var(--r-xs); border:1px solid #000;
}
.path-flow {
  display:flex; align-items:center; gap: 6px; flex-wrap: wrap;
  padding: var(--s-sm); border-radius: var(--r-sm);
  background: rgba(33,36,46,.12);
}
.node {
  background: var(--periwinkle);
  border:1px solid var(--chrome-indigo);
  border-top-color: var(--bevel-top);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 var(--chrome-indigo);
  border-radius: var(--r-sm);
  padding: 8px 10px; font-size: 12px; font-weight:700; color: var(--ink);
  white-space: nowrap;
}
.node.start { background: var(--amber); }
.node.end   { background: var(--signal); color:#fff; }
.path-flow .sep { color: var(--signal); font-weight:900; font-size:14px; }
.broken {
  color: var(--carbon); background: var(--platinum);
  border:1px dashed var(--carbon); border-radius: var(--r-sm);
  padding:8px 10px; font-size:12px; font-weight:700; text-transform:uppercase;
}

/* ---------- Barras de puntuación ---------- */
.score-row { display:flex; align-items:center; gap: var(--s-sm); margin: var(--s-sm) 0; }
.score-row .nm { width: 30%; font-weight:700; font-size:13px; color: var(--surface); text-shadow:1px 1px 0 var(--carbon); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bar-track { flex:1; height: 18px; background: #6f7fad; border:1px solid var(--chrome-indigo); border-radius: var(--r-xs); overflow:hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.bar-fill { display:block; height:100%; background: linear-gradient(180deg, #ffd27a, var(--signal)); width:0; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.bar-fill.win { background: linear-gradient(180deg, #fff6c2, var(--amber)); }
.score-row .pts { width: 46px; text-align:right; font-family: var(--pixel); font-size:10px; color: var(--amber); }
.guess-echo { font-size: 11px; color: var(--ice); font-style: italic; margin-left: 8px; }

/* ---------- Tarjeta de definición / revelado ---------- */
.reveal-word {
  text-align:center; padding: var(--s-lg);
}
.reveal-word .wordmark { font-size: clamp(40px, 14vw, 80px); color: var(--amber); }
.def-card {
  background: var(--platinum); color: var(--ink);
  border:1px solid var(--chrome-indigo); border-radius: var(--r-sm);
  padding: var(--s-md); margin: var(--s-sm) 0;
  font-size: 14px; line-height:1.45;
}
.def-card .dn {
  display:inline-grid; place-items:center; width:20px; height:20px;
  background: var(--surface); border:1px solid var(--carbon); border-radius: var(--r-xs);
  font-weight:900; font-size:11px; margin-right:8px;
}
.def-card .cat { font-style: italic; color: var(--ink-soft); font-size:12px; }

/* contador de acepciones */
.count-display {
  font-family: var(--display); font-style:italic; font-size: 64px; color: var(--amber);
  text-align:center; -webkit-text-stroke: 2px var(--carbon); text-shadow: 3px 3px 0 var(--carbon);
}

/* ---------- Reflexión IA ---------- */
.mascot-wrap { display:flex; gap: var(--s-md); align-items:flex-start; margin-top: var(--s-md); }
.mascot {
  flex:none; width: 64px; height:64px; border-radius:9999px;
  background: radial-gradient(circle at 35% 30%, #fff, var(--canvas-soft));
  border:2px solid var(--carbon); display:grid; place-items:center; font-size:34px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6);
}
.bubble {
  position: relative; flex:1;
  background: var(--surface); color: var(--ink);
  border:1px solid var(--carbon); border-radius: var(--r-lg);
  padding: var(--s-md); font-size: 14px; line-height: 1.55;
  min-height: 80px;
}
.bubble::before {
  content:""; position:absolute; left:-9px; top:18px;
  border:9px solid transparent; border-right-color: var(--surface);
  filter: drop-shadow(-1px 0 0 var(--carbon));
}
.bubble .cursor { display:inline-block; width:8px; background: var(--ink); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }

/* ---------- Podio ---------- */
.podium {
  display:flex; justify-content:center; align-items:flex-end; gap: var(--s-sm);
  margin: var(--s-xl) 0; min-height: 220px;
}
.pod-col { flex:1; max-width: 130px; text-align:center; }
.pod-head { font-weight:700; font-size:13px; color: var(--surface); text-shadow:1px 1px 0 var(--carbon); margin-bottom:6px; min-height: 2.6em; display:flex; align-items:flex-end; justify-content:center;}
.pod-block {
  border:1px solid var(--chrome-indigo); border-radius: var(--r-sm) var(--r-sm) 0 0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding-top: var(--s-sm); color: var(--carbon);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5);
}
.pod-1 { background: linear-gradient(180deg,#fff0b0,var(--amber)); height: 170px; }
.pod-2 { background: linear-gradient(180deg,#fff,var(--platinum)); height: 130px; }
.pod-3 { background: linear-gradient(180deg,#d7b07a,#b5793c); height: 100px; color:#fff;}
.pod-medal { font-size: 30px; }
.pod-pts { font-family: var(--pixel); font-size: 11px; margin-top: 4px; }

.breakdown { width:100%; border-collapse: collapse; margin-top: var(--s-md); font-size: 12px; }
.breakdown th, .breakdown td { padding: 8px 6px; border-bottom: 1px solid var(--hairline); text-align:center; color: var(--surface); }
.breakdown th { background: var(--canvas); color: var(--ink); text-transform:uppercase; font-size:10px; letter-spacing:.5px; }
.breakdown td:first-child, .breakdown th:first-child { text-align:left; }
.breakdown .total { font-family: var(--pixel); font-size:10px; color: var(--amber); }
.breakdown tr.lead td { background: rgba(236,171,55,.18); }

/* ---------- Loader ---------- */
.loader { text-align:center; padding: var(--s-xxl) var(--s-md); }
.spinner {
  width: 46px; height:46px; margin: 0 auto var(--s-md);
  border: 5px solid var(--chrome-indigo); border-top-color: var(--signal);
  border-radius:9999px; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader p { color: var(--surface); font-weight:700; text-shadow:1px 1px 0 var(--carbon); }

/* ---------- Footer ---------- */
.footer-bar {
  margin-top: auto;
  color: var(--canvas-soft);
  font-size: 10px; line-height:1.4;
  padding: var(--s-lg) var(--s-md);
  border-top: 2px solid var(--chrome-indigo);
  display:flex; gap: var(--s-sm); align-items:center; flex-wrap:wrap;
}
.esrb {
  background: var(--amber); color: var(--carbon); font-weight:700;
  padding: 3px 6px; border-radius: var(--r-xs); border:1px solid var(--carbon);
  font-size:9px; text-transform:uppercase;
}

/* ---------- Utilidades ---------- */
.stack > * + * { margin-top: var(--s-md); }
.center { text-align:center; }
.muted { color: var(--canvas-soft); }
.row { display:flex; gap: var(--s-sm); }
.row > * { flex:1; }
.spacer-lg { height: var(--s-lg); }
.err {
  background: var(--primary); color:#fff; padding: var(--s-md);
  border-radius: var(--r-sm); font-size: 13px; border:1px solid #000;
}

/* ---------- Selector de modo (día / aleatoria) ---------- */
.mode-switch {
  display: flex; gap: 0; margin-bottom: var(--s-xs);
  border: 1px solid var(--chrome-indigo); border-radius: var(--r-sm); overflow: hidden;
}
.mode-opt {
  flex: 1; cursor: pointer; min-height: 44px;
  font-family: var(--sans); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .3px;
  background: var(--periwinkle); color: var(--ink-soft);
  border: 0; border-right: 1px solid var(--chrome-indigo);
}
.mode-opt:last-child { border-right: 0; }
.mode-opt.is-on { background: var(--signal); color: #fff; box-shadow: inset 0 2px 4px rgba(33,36,46,.4); }

/* ---------- Teclado numérico (fase 3) ---------- */
.numpad { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-sm); margin: var(--s-md) 0; }
.numkey {
  min-height: 52px; cursor: pointer;
  font-family: var(--display); font-style: italic; font-size: 22px;
  background: var(--surface); color: var(--carbon);
  border: 1px solid var(--carbon); border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 0 rgba(33,36,46,.5);
}
.numkey:active { transform: translateY(2px); }
.numkey.is-on { background: var(--signal); color: #fff; }
.numkey.other { font-family: var(--sans); font-weight: 700; font-size: 13px; text-transform: uppercase; background: var(--amber); }

/* ---------- Botón "?" y explicación de puntos ---------- */
.why-btn {
  flex: none; width: 24px; height: 24px; border-radius: 9999px;
  background: var(--carbon); color: var(--amber); border: 1px solid #000;
  font-weight: 900; font-size: 13px; cursor: pointer; line-height: 1;
}
.why-text {
  font-size: 12px; line-height: 1.45; color: var(--ink);
  background: var(--surface); border: 1px solid var(--carbon);
  border-radius: var(--r-sm); padding: 8px 10px; margin: 4px 0 8px;
}
.why-text.hidden { display: none; }

/* ---------- Lista de todas las acepciones ---------- */
.acep-list { margin-top: var(--s-md); }
.acep-list summary {
  cursor: pointer; font-weight: 700; font-size: 12px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--surface); text-shadow: 1px 1px 0 var(--carbon);
  list-style: none; padding: 6px 0;
}
.acep-list summary::before { content: "▸ "; color: var(--signal); }
.acep-list[open] summary::before { content: "▾ "; }

/* ---------- Hueco de anuncio (Google AdSense) ---------- */
.ad-slot { margin: var(--s-lg) 0; min-height: 0; text-align: center; }
.ad-slot.is-empty { display: none; }
.ad-slot ins { display: block; }

/* ---------- Coming soon (modo aleatorio) ---------- */
.mode-opt.is-soon { opacity: .8; }
.soon-badge {
  display: inline-block; margin-left: 4px;
  font-family: var(--pixel); font-size: 7px; vertical-align: middle;
  background: var(--carbon); color: var(--amber);
  padding: 3px 5px; border-radius: var(--r-xs); border: 1px solid #000;
}
.btn.is-soon { opacity: .9; }
.support-meter {
  height: 18px; background: #6f7fad; border: 1px solid var(--chrome-indigo);
  border-radius: var(--r-xs); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.support-fill {
  height: 100%; width: 0;
  background: repeating-linear-gradient(45deg, var(--amber) 0 8px, var(--signal) 8px 16px);
  transition: width 1s cubic-bezier(.2,.8,.2,1);
}

/* ---------- Compartir ---------- */
.share-card-wrap {
  border: 1px solid var(--chrome-indigo); border-radius: var(--r-md);
  overflow: hidden; box-shadow: 0 3px 8px rgba(33,36,46,.4); background: var(--carbon);
}
#shareImg { display: block; width: 100%; height: auto; }

/* ---------- Iconos en botón de compartir ---------- */
.share-ic { display: inline-flex; gap: 8px; vertical-align: middle; margin-left: 10px; }
.share-ic svg { display: block; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--carbon); color: #fff; border: 1px solid #000; border-radius: var(--r-sm);
  padding: 12px 18px; font-size: 13px; font-weight: 700; z-index: 100;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 88vw; text-align: center;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Páginas de contenido (diccionario, sobre, términos) ---------- */
.article { line-height: 1.5; }
.article a { color: var(--ink-soft); }
.article .def-card a { color: var(--primary); font-weight: 700; }
.dic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.dic-link {
  display: block; text-align: center; text-decoration: none;
  background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px;
  border: 1px solid var(--carbon); border-radius: var(--r-sm); padding: 12px 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 0 rgba(33,36,46,.4);
}
.dic-link:active { transform: translateY(2px); }
.ad-slot-static { margin: var(--s-lg) 0; min-height: 0; }

/* ---------- Footer ---------- */
.foot-link { color: var(--canvas-soft); text-decoration: none; }
.foot-link:hover { text-decoration: underline; }

@media (max-width: 420px) {
  .pod-head { font-size: 11px; }
  .breakdown th, .breakdown td { padding: 6px 3px; font-size: 11px; }
  .numpad { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .numkey { min-height: 46px; font-size: 18px; }
}