/* Sudoku · piel Revista (prototipo Motion). Tokens de direccion-v3-revista.md */
@font-face{font-family:Gloock;src:url(/fonts/gloock-400.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Geologica;src:url(/fonts/geologica-300-500.woff2) format("woff2");font-weight:300 500;font-display:swap}
.sudoku-shell{--paper:var(--c-bg);--ink:var(--c-text);--muted:var(--c-text-2);--line:var(--c-text-2);--accent:var(--c-accent)}
html,body.game-mode{background:var(--c-bg)!important;color:var(--c-text)!important;background-image:none!important}
body.game-mode *{border-radius:0!important;box-shadow:none!important;text-shadow:none!important;backdrop-filter:none!important}
body.game-mode::before,body.game-mode::after{display:none!important}

/* Cabecera y rótulo de sección */
.rv-w{max-width:1320px;margin:0 auto;padding:0 56px}
.rv-top{display:flex;justify-content:space-between;align-items:baseline;padding:26px 0 18px;border-bottom:1px solid var(--ink);font-family:Geologica,sans-serif}
.rv-top .nm{font-family:Gloock,serif;font-size:30px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.rv-top nav a{margin-left:22px;font-size:13px;color:var(--ink);text-decoration:none}
.rv-top nav a:hover,.rv-top nav a:focus-visible{text-decoration:underline}
.rv-top nav a[aria-current]{color:var(--accent)}
.rv-sec{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;padding:40px 0 24px}
.rv-lab{grid-column:1/4}
.rv-lab .n{font-family:Gloock,serif;font-weight:400;font-size:96px;line-height:.8;color:var(--accent)}
.rv-lab h2{font:500 13px Geologica,sans-serif;text-transform:uppercase;letter-spacing:.08em;margin:14px 0 0}
.rv-hd{grid-column:4/13}
.rv-meta{font:400 12px Geologica,sans-serif;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.rv-hd h1{font-family:Gloock,serif;font-weight:400;font-size:64px;letter-spacing:-.025em;line-height:1;margin:0}
.rv-hd p{font-family:Geologica,sans-serif;font-weight:300;font-size:19px;line-height:1.55;color:#444;margin:14px 0 0;max-width:32em}

/* El juego: sin gabinete, sobre papel */
main.game-ui-app{max-width:1320px;margin:0 auto!important;padding:0 56px 64px!important;background:none!important}
main .game-note{display:block;font:300 var(--fs-lead)/var(--lh-lead) var(--f-text);color:var(--c-text);max-width:var(--measure)}
.sudoku-shell,#game-native-area{
  --sudoku-accent:var(--accent);--sudoku-ink:var(--ink);--sudoku-muted:var(--muted);
  --sudoku-line:#BDBDBD;--sudoku-line-strong:var(--ink);
  --sudoku-surface:transparent;--sudoku-surface-strong:var(--paper);--sudoku-border:var(--line);
  --sudoku-panel:transparent;--sudoku-cell:var(--paper);--sudoku-cell-fixed:var(--paper);
  --sudoku-user:var(--accent);--sudoku-blue:var(--accent);--sudoku-green:var(--ink);
  --sudoku-red:#B3261E;--sudoku-violet:var(--accent);
  background:var(--paper)!important;color:var(--ink)!important;border:0!important;
  border-top:1px solid var(--line)!important;padding-top:28px!important;font-family:Geologica,sans-serif}
.sudoku-shell *{font-family:Geologica,sans-serif}

/* Marcadores: dt Inter mayúsculas + dd serif grande */
.sudoku-statusbar{background:none!important;border:0!important;display:flex!important;gap:40px!important;padding:0 0 24px!important}
.sudoku-statusbar .stat-item{background:none!important;border:0!important;border-top:1px solid var(--ink)!important;padding:10px 0 0!important;min-width:5.5rem}
.stat-label{font:400 12px Geologica,sans-serif!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--muted)!important}
.stat-value{font-family:Gloock,serif!important;font-weight:400!important;font-size:40px!important;line-height:1.05!important;color:var(--ink)!important;font-variant-numeric:tabular-nums}

/* Tablero: tinta y papel */
.sudoku-board-container{background:none!important;border:0!important;padding:0!important}
.sudoku-grid{background:var(--ink)!important;border:2px solid var(--ink)!important;gap:1px!important}
.sudoku-cell{background:var(--paper)!important;color:var(--ink)!important;border-color:#BDBDBD!important}
.sudoku-cell .cell-value{font-family:Gloock,serif!important;font-weight:400!important;color:inherit!important}
.notes-grid[hidden]{display:none!important}
.sudoku-cell.initial{color:var(--ink)!important;font-weight:600}
.sudoku-cell.user-filled:not(.initial),.sudoku-cell.user-filled .cell-value{color:var(--accent)!important}
.sudoku-cell.related:not(.selected){background:#EFEFEC!important}
.sudoku-cell.same-number:not(.selected){background:#E4E6F7!important}
.sudoku-cell.selected{background:var(--accent)!important;color:var(--paper)!important}
.sudoku-cell.selected .cell-value{color:var(--paper)!important}
.sudoku-cell.conflict,.sudoku-cell.review-error{color:#B3261E!important;text-decoration:underline wavy #B3261E;text-underline-offset:.15em}
.sudoku-cell:focus-visible{outline:2px solid var(--accent)!important;outline-offset:-3px}

/* Paneles sin cajas */
.sudoku-panel,.panel-group,.game-options-drawer,.game-options-content,.secondary-actions,.hint-panel,.compact-stats,.sudoku-best-times{background:none!important;border:0!important;color:var(--ink)!important}
.panel-title,.control-heading,.best-times-title,.progress-label,.game-options-drawer>summary,.secondary-actions>summary{font:500 12px Geologica,sans-serif!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--muted)!important}

/* Botones como texto subrayado; el activo/principal en ultramar */
.sudoku-shell button:not(.sudoku-cell),.seg-btn,.diff-btn,.action-btn,.dialog-btn,.num-btn{
  background:none!important;border:0!important;color:var(--ink)!important;
  font:400 14px Geologica,sans-serif!important;text-decoration:underline;text-underline-offset:.25em;
  text-decoration-color:var(--line);padding:6px 0!important;min-height:24px;text-transform:none!important;letter-spacing:0!important}
.sudoku-shell button:hover,.sudoku-shell button:focus-visible{text-decoration-color:currentColor}
.seg-btn.active,.diff-btn.active,.action-btn[aria-pressed="true"],.action-btn.primary,.dialog-btn.primary{color:var(--accent)!important;text-decoration-color:var(--accent)!important}
.segmented,.difficulty-selector,.tool-grid{display:flex!important;flex-wrap:wrap;gap:6px 20px!important;background:none!important;border:0!important}

/* Teclado numérico: cifras en serif, sin botones-caja */
.number-pad{gap:0!important;background:none!important}
.num-btn{font-family:Gloock,serif!important;font-size:30px!important;text-decoration:none!important;border-top:1px solid var(--line)!important;padding:8px 0!important}
.num-btn:hover,.num-btn:focus-visible{color:var(--accent)!important}
.num-btn.erase{font:400 14px Geologica,sans-serif!important;text-decoration:underline!important}
.num-btn::after{color:var(--muted)!important}

/* Progreso: una regla */
.progress-track{background:var(--line)!important;height:1px!important}
.progress-fill{background:var(--accent)!important;height:3px!important;margin-top:-1px}
.progress-text{font:400 12px Geologica,sans-serif!important;color:var(--muted)!important}

/* Diálogo: hoja de papel con regla */
.sudoku-dialog{background:rgba(250,250,248,.92)!important}
.dialog-panel{background:var(--paper)!important;border:1px solid var(--ink)!important;color:var(--ink)!important}
.dialog-title{font-family:Gloock,serif!important;font-weight:400!important;font-size:36px!important;color:var(--ink)!important}

/* Barra del host (controles, pantalla completa) */
[class*="game-ui-bar"],[class*="game-host"],.game-ui-toolbar{background:var(--paper)!important;color:var(--ink)!important;border-color:var(--line)!important}

@media (max-width:760px){
  .rv-w,main.game-ui-app{padding-left:20px!important;padding-right:20px!important}
  .rv-top{flex-wrap:wrap;gap:8px}.rv-top nav a{margin:0 16px 0 0;display:inline-block;padding:4px 0}
  .rv-sec{display:block;padding-top:28px}
  .rv-lab{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}.rv-lab .n{font-size:56px}.rv-lab h2{margin:0}
  .rv-hd h1{font-size:40px}
  .sudoku-statusbar{gap:18px!important;flex-wrap:wrap}.stat-value{font-size:28px!important}
}

/* fixes v2 */
.rv-hd h1{background:none!important}
.sudoku-cell{text-decoration:none!important;padding:0!important}
.sudoku-cell .cell-value,.sudoku-cell .note{text-decoration:none!important}
.sudoku-cell .note{color:var(--muted)!important;font-family:Geologica,sans-serif!important}
.num-btn::after,.num-btn::before{background:none!important;color:var(--muted)!important;font:400 11px Geologica,sans-serif!important;border:0!important}
/* barra del host: fuera el logo duplicado, acciones como texto */
.game-top-bar,.game-bottom-bar{background:none!important;border:0!important;color:var(--ink)!important;padding:0!important;min-height:0!important}
.game-top-bar{margin:0 0 20px!important;justify-content:flex-start!important}
.game-top-bar .game-logo{display:none!important}
.game-back-btn,.game-shell-action{background:none!important;border:0!important;color:var(--ink)!important;font:400 13px Geologica,sans-serif!important;text-decoration:underline!important;text-decoration-color:var(--line)!important;text-underline-offset:.25em;padding:4px 0!important}
.game-back-btn{text-transform:none !important}
.game-bottom-bar{margin-top:40px!important;padding-top:16px!important;border-top:1px solid var(--line)!important;display:flex!important;justify-content:space-between!important;flex-wrap:wrap;gap:12px}
.game-credits{font:400 12px Geologica,sans-serif!important;color:var(--muted)!important;letter-spacing:.04em}
.game-shell-actions{display:flex!important;gap:20px!important}
.game-bindings-dialog,.game-ui-binding-row{background:var(--paper)!important;color:var(--ink)!important;border:1px solid var(--ink)!important}
.game-ui-button{background:none!important;color:var(--ink)!important;border:0!important;text-decoration:underline}
.sudoku-status{background:var(--paper)!important;color:var(--ink)!important;border:0!important;border-top:1px solid var(--ink)!important;font:400 13px Geologica,sans-serif!important;animation:none!important}
/* fixes v3: es una página que scrollea, no una app a pantalla completa */
body.game-mode{height:auto!important;min-height:100vh!important;overflow:visible!important;display:block!important}
.rv-w,main.game-ui-app{width:100%!important;max-width:1320px!important;box-sizing:border-box!important;margin:0 auto!important}
.game-mode-native-wrapper.sudoku-shell{height:auto!important;overflow:visible!important;width:100%!important;padding:28px 0 0!important}
.sudoku-statusbar{display:flex!important}
.sudoku-statusbar .stat-item{display:block!important}
main.game-ui-app{overflow:visible!important;max-height:none!important;height:auto!important}
.game-top-bar,.game-bottom-bar{position:static!important;inset:auto!important;transform:none!important}
.sudoku-cell{border:0!important;border-right:1px solid #BDBDBD!important;border-bottom:1px solid #BDBDBD!important}
.sudoku-grid{gap:0!important;border:2px solid var(--ink)!important}
.sudoku-cell:nth-child(3n):not(:nth-child(9n)){border-right:2px solid var(--ink)!important}
.sudoku-cell:nth-child(9n){border-right:0!important}
.sudoku-row:nth-child(3) .sudoku-cell,.sudoku-row:nth-child(6) .sudoku-cell{border-bottom:2px solid var(--ink)!important}
.sudoku-row:nth-child(9) .sudoku-cell{border-bottom:0!important}
.sudoku-shell summary,.sudoku-shell details{background:none!important;border:0!important;color:var(--ink)!important;font:400 14px Geologica,sans-serif!important;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.25em;text-transform:none!important;letter-spacing:0!important;padding:6px 0!important;min-height:0!important;width:auto!important;justify-content:flex-start!important}
.sudoku-shell details[open]>summary{color:var(--accent)!important}
.sudoku-grid::before,.sudoku-grid::after,.sudoku-board-container::before,.sudoku-board-container::after{display:none!important}
.sudoku-statusbar .stat-item{text-align:left!important;align-items:flex-start!important;min-width:0!important;flex:0 0 auto!important}
.stat-value{font-size:36px!important;overflow:visible!important;text-overflow:clip!important;white-space:nowrap}
.sudoku-shell button:not(.sudoku-cell),.sudoku-shell summary{background-image:none!important}
.stat-label,.stat-value{text-align:left!important;max-width:none!important;display:block!important}
/* tokens finales: Gloock títulos/números, Geologica UI */
body .rv-hd h1{font-family:Gloock,serif!important;font-weight:400!important;font-size:64px!important;line-height:1!important;letter-spacing:-.02em}
body .game-bindings-title,body .sheet-title{font-family:Geologica,sans-serif!important;font-weight:500!important;font-style:normal!important}
body *{font-style:normal!important}
@media (max-width:640px){body .rv-hd h1{font-size:40px!important}}
@media (max-width:640px){.rv-top nav{display:flex;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}.rv-top nav::-webkit-scrollbar{display:none}.rv-top nav a{flex:none;padding:10px 0}}


/* Abogado: teclado 5x2, etiquetas y pie */
@media (max-width: 760px) {
  .number-pad { display: grid !important; grid-template-columns: repeat(5, minmax(44px, 1fr)) !important; gap: 6px !important; }
  .num-btn, .num-btn.erase { grid-column: auto !important; min-height: 44px !important; min-width: 44px !important; border: 1px solid #111 !important; border-radius: 0 !important; background: transparent !important; color: #111 !important; text-decoration: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 1px !important; padding: 2px 0 !important; font-family: Gloock, serif !important; font-size: 22px !important; }
  .num-btn:not(.erase)::after { position: static !important; display: block !important; content: attr(data-remaining) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font: 500 10px Geologica, sans-serif !important; color: #5A5A5A !important; letter-spacing: 0 !important; }
}
@media (min-width: 761px) {
  .sudoku-panel .panel-title, .sudoku-panel .control-heading, .sudoku-panel .best-times-title, .panel-title { font: 500 12px/1.2 Geologica, sans-serif !important; color: #111 !important; letter-spacing: .06em !important; text-transform: uppercase !important; }
}
.rv-foot { max-width: 1320px; margin: 0 auto; padding: 8px 56px 48px; border-top: 1px solid #111; font: 500 12px Geologica, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #111; }
.num-btn.selected-number, .diff-btn.active, .seg-btn.active, .action-btn.primary, .action-btn[aria-pressed="true"] { background: var(--c-accent) !important; color: var(--c-on-accent) !important; border: var(--rule) !important; text-decoration: none !important; }

/* Hoja de sistema: el tablero cabe en --frame-max-h y el teclado descuenta un --tap más. */
h1.game-title { font-size: var(--fs-game) !important; line-height: var(--lh-game) !important; }
.stat-label, .panel-title { font-size: var(--fs-label) !important; color: var(--c-text) !important; }
.stat-value { font-size: var(--fs-data) !important; }
@media (max-width: 760px) {
  .sudoku-shell { --frame-max-h: calc(100dvh - var(--header-h) - var(--tap) - var(--panel-h) - var(--tap) - var(--tap) - var(--sp-6)); }
  .number-pad { gap: var(--sp-2) !important; }
  .num-btn, .num-btn.erase { min-height: var(--tap) !important; min-width: var(--tap) !important; border: var(--rule) !important; color: var(--c-text) !important; font-size: var(--fs-h3) !important; font-family: var(--f-display) !important; }
  .num-btn:not(.erase)::after { font-size: var(--fs-label) !important; color: var(--c-text-2) !important; }
}

/* Cuatro acciones accesibles, independientes del ancho de sus textos. */
body:has(.sudoku-shell) .game-bottom-bar { display: block !important; width: 100%; min-width: 0; }
body:has(.sudoku-shell) .game-shell-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
body:has(.sudoku-shell) .game-shell-actions > button {
  min-width: 0 !important;
  width: 100% !important;
  min-height: var(--tap) !important;
  padding: 0 !important;
  border: var(--rule) !important;
  font: 500 var(--fs-label)/var(--lh-label) var(--f-text) !important;
  text-decoration: none !important;
}

@media (max-width: 760px) {
  .rv-w { padding-inline: var(--page-pad) !important; }
  main.game-ui-app { padding-inline: var(--page-pad) !important; }
  .sudoku-statusbar { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 6px 8px !important; padding-bottom: 6px !important; }
  .sudoku-statusbar .stat-item { min-width: 0 !important; border-top: 0 !important; padding-top: 0 !important; }
  .sudoku-statusbar .stat-item:last-child { display: none !important; }
  #stat-errors::after { content: " · 4/4"; font: 500 var(--fs-label)/var(--lh-label) var(--f-text); }
  .sudoku-layout { display: flex !important; flex-direction: column !important; gap: 6px !important; }
  .sudoku-stage { order: 1 !important; }
  .sudoku-panel-right { order: 3 !important; width: 100% !important; }
  .sudoku-panel-left { order: 3 !important; }
  .number-pad { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 4px !important; }
  .sudoku-shell { --sudoku-board-size: min(100%, 350px) !important; --sudoku-cell-size: calc(var(--sudoku-board-size) / 9) !important; }
  .sudoku-cell .cell-value { font-size: max(17px, var(--fs-data)) !important; }
  .sudoku-grid { width: 100% !important; height: 100% !important; overflow: visible !important; grid-template-columns: repeat(9, minmax(0, 1fr)) !important; grid-template-rows: repeat(9, minmax(0, 1fr)) !important; }
  .sudoku-board-container { width: min(100%, 350px) !important; max-width: min(100%, 350px) !important; aspect-ratio: 1 / 1 !important; height: auto !important; overflow: visible !important; }
  .sudoku-cell { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; }
  .sudoku-stage { width: 100% !important; }
  .game-bottom-bar { margin-top: 8px !important; }
}

@media (max-width: 760px) {
  .sudoku-panel-right, .sudoku-stage { display: contents !important; }
  .sudoku-board-container { order: 1 !important; flex: none !important; margin-inline: auto !important; }
  .sudoku-panel-right .number-pad { order: 2 !important; width: min(100%, 300px) !important; margin: 0 auto 6px !important; }
  .sudoku-stage .sudoku-progress, .sudoku-stage .sudoku-status { order: 3 !important; }
}
@media (max-width: 760px) {
  .sudoku-panel-right > .control-heading,
  .sudoku-panel-right > .control-heading-tools,
  .sudoku-panel-right > .tool-grid,
  .sudoku-panel-right > details { order: 4 !important; }
}