/* ========================================================================== Táctica — hoja de estilos única. Diseñada primero para iPhone: alturas dinámicas (dvh), zonas seguras y objetivos táctiles grandes. En pantallas anchas se centra en una columna. ========================================================================== */ :root { --bg: #12141a; --bg-soft: #1a1d25; --surface: #222630; --surface-2: #2b3040; --line: #333949; --text: #eef0f4; --text-dim: #a2a9b8; --text-faint: #7b8496; --accent: #7fb069; --accent-strong: #96c97c; --accent-ink: #14200f; --accent-rgb: 127, 176, 105; /* para tintes translúcidos */ --gold: #e8b84b; --gold-rgb: 232, 184, 75; --gold-ink: #241a02; --danger: #e5674f; --wrong-bright: #ff3b30; /* rojo del badge de fallo: más vivo que --danger */ --right-bright: #30d158; /* verde de éxito de iOS (modo oscuro) */ --icon-blue: #78b6e8; --icon-violet: #cf92d8; --knob: #ffffff; --scrim: rgba(10, 11, 15, .93); --sq-light: #eeeed2; --sq-dark: #769656; --board-ink: rgba(20, 30, 15, .34); /* puntos y aros sobre las casillas */ /* Dos valores por resaltado, uno para casilla clara y otro para oscura, calibrados para que el resultado sobre cada una se parezca. Con un solo amarillo translúcido, sobre verde salía oliva y sobre crema salía casi blanco: la misma jugada con dos colores distintos. */ --hl-last-light: rgba(255, 214, 0, 0.45); --hl-last-dark: rgba(255, 240, 120, 0.55); --hl-sel-light: rgba(255, 200, 0, 0.64); --hl-sel-dark: rgba(255, 240, 120, 0.72); --radius: 16px; --radius-sm: 11px; --pad: 16px; color-scheme: dark; } /* Modo claro. El JS resuelve "automático" y estampa siempre light u dark en , así que aquí basta un bloque y no hay que duplicar la paleta en una media query. Se usa data-ui-theme y no data-theme para no chocar con el atributo que estampa el contenedor cuando la app se publica como página. */ :root[data-ui-theme="light"] { --bg: #f1f3f6; --bg-soft: #e8ebf0; --surface: #ffffff; --surface-2: #e6eaf1; --line: #d9dfe8; --text: #171a21; --text-dim: #586072; --text-faint: #6f7787; --accent: #4e7d3a; --accent-strong: #3d6a2b; --accent-ink: #ffffff; --accent-rgb: 78, 125, 58; --gold: #a87c12; --gold-rgb: 168, 124, 18; --gold-ink: #fdf3dd; --danger: #bd3f28; --wrong-bright: #e0201a; --right-bright: #34c759; /* verde de éxito de iOS (modo claro) */ --icon-blue: #2f6f9e; --icon-violet: #7d4a8a; --knob: #ffffff; --scrim: rgba(241, 243, 246, .94); color-scheme: light; } /* --- colores de tablero ------------------------------------------------- Solo se redefinen las casillas y la tinta de las marcas; el resto de la interfaz no depende del tablero elegido. */ [data-board="verde"] { --sq-light: #eeeed2; --sq-dark: #769656; } [data-board="madera"] { --sq-light: #f0d9b5; --sq-dark: #b58863; } [data-board="azul"] { --sq-light: #dee3e6; --sq-dark: #8ca2ad; } [data-board="pizarra"] { --sq-light: #e8e8e8; --sq-dark: #7f8489; } [data-board="lavanda"] { --sq-light: #e9e2f3; --sq-dark: #9280b3; } [data-board="noche"] { --sq-light: #8fa0b0; --sq-dark: #4f5f73; --board-ink: rgba(255, 255, 255, .45); /* sobre casillas oscuras */ } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; /* El documento raíz nunca se desplaza: en iOS Safari, un documento que PUEDE hacer scroll a veces se queda "atascado" unos píxeles desplazado tras un rebote elástico o un cambio de la barra de direcciones, y nada lo devuelve a 0,0 salvo recargar. Todo el scroll de la app vive en #app, que es el único elemento con overflow real. */ overflow: hidden; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; overscroll-behavior: none; } body { touch-action: manipulation; /* quita el retardo de 300 ms al tocar */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } #app { max-width: 520px; margin: 0 auto; height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; /* el rebote no se escapa hacia el documento */ } button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; } /* --- pantallas ----------------------------------------------------------- */ .screen { padding: max(10px, env(safe-area-inset-top)) var(--pad) max(18px, env(safe-area-inset-bottom)); } .screen-play { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; padding-left: 10px; padding-right: 10px; gap: 8px; } @supports not (height: 100dvh) { .screen-play { height: 100vh; } } /* En la pantalla de juego, .screen-play se aplica directamente sobre #app (Play.start() reutiliza el mismo elemento), así que un selector de ID (#app) y uno de clase (.screen-play) compiten por height/overflow en el MISMO elemento -- y el ID gana por especificidad aunque aparezca antes en el archivo. Sin esto, el tablero heredaría el overflow-y:auto de #app y podría ganar scroll propio. */ #app.screen-play { height: 100dvh; overflow: hidden; } @supports not (height: 100dvh) { #app.screen-play { height: 100vh; } } /* --- cabeceras ----------------------------------------------------------- */ .head, .home-head, .play-head { display: flex; align-items: center; gap: 10px; padding: 6px 0 10px; } .head h1, .play-title h1 { font-size: 18px; font-weight: 650; margin: 0; letter-spacing: -0.01em; } .home-head h1 { font-size: 30px; font-weight: 750; margin: 0; letter-spacing: -0.02em; flex: 1; } .head h1 { flex: 1; text-align: center; } .head-spacer { width: 40px; } .icon-btn { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--surface); font-size: 19px; line-height: 1; cursor: pointer; transition: background .15s, transform .1s; } .icon-btn:active { transform: scale(.93); background: var(--surface-2); } .play-title { flex: 1; min-width: 0; } .play-title .sub { display: block; font-size: 12px; color: var(--text-dim); margin-top: 1px; } /* --- inicio: tarjeta de rating ------------------------------------------- */ .rating-card { display: block; width: 100%; text-align: left; border: 0; background: linear-gradient(160deg, var(--surface) 0%, var(--bg-soft) 100%); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; cursor: pointer; position: relative; overflow: hidden; } .rating-main { display: flex; align-items: baseline; gap: 10px; } .rating-label { color: var(--text-dim); font-size: 13px; } .rating-value { font-size: 40px; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; margin-left: auto; } .rating-value.big { font-size: 54px; margin: 0; } .spark { display: block; width: 100%; height: 34px; margin: 12px 0 10px; color: var(--accent); opacity: .9; } .spark.empty { height: auto; font-size: 12px; color: var(--text-faint); margin: 14px 0 10px; } .rating-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); } .rating-foot b { color: var(--text); font-size: 14px; } /* --- inicio: tarjetas de modo -------------------------------------------- */ .mode-grid { display: flex; flex-direction: column; gap: 10px; } .mode-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; cursor: pointer; transition: transform .1s, border-color .15s; } .mode-card:active { transform: scale(.985); border-color: var(--accent); } .mode-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 13px; font-size: 25px; line-height: 1; background: var(--surface-2); color: var(--accent-strong); } .mode-survival .mode-icon { color: var(--gold); } .mode-rush .mode-icon { color: var(--icon-blue); } .mode-themes .mode-icon { color: var(--icon-violet); } .mode-weak .mode-icon { color: var(--danger); } /* "Donde flojeas" antes de tener datos suficientes: se ve pero no se puede abrir, para que quede claro que la app la tiene preparada. */ .mode-card.locked { cursor: default; opacity: .55; pointer-events: none; } .mode-card.locked .mode-icon { background: var(--surface); color: var(--text-faint); } .theme-item.static { cursor: default; } .theme-item.static:active { transform: none; border-color: var(--line); } .mode-text { flex: 1; min-width: 0; } .mode-text b { display: block; font-size: 16px; font-weight: 620; } .mode-text small { display: block; color: var(--text-dim); font-size: 12.5px; margin-top: 2px; } .mode-badge { font-size: 11px; font-weight: 600; color: var(--gold); background: rgba(var(--gold-rgb), .13); padding: 4px 8px; border-radius: 20px; white-space: nowrap; } .link-row { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 14px; padding: 15px 16px; border: 0; border-radius: var(--radius); background: var(--bg-soft); color: var(--text-dim); font-size: 14px; cursor: pointer; } .link-row span { color: var(--text-faint); font-size: 18px; } /* --- listas (temas, niveles, ajustes) ------------------------------------ */ .lead { color: var(--text-dim); font-size: 14px; line-height: 1.5; margin: 0 0 18px; } .section-title { font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin: 26px 0 10px; } .theme-group { margin-bottom: 24px; } .theme-group h2 { font-size: 17px; font-weight: 650; margin: 0 0 3px; } .group-hint { font-size: 12.5px; color: var(--text-faint); margin: 0 0 12px; line-height: 1.45; } .theme-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .theme-item { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: 12px; text-align: left; cursor: pointer; transition: border-color .15s, transform .1s; } .theme-item:active { transform: scale(.98); border-color: var(--accent); } .theme-item b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; } .theme-meta { display: block; font-size: 11px; color: var(--text-faint); margin-top: 4px; } .level-list { display: flex; flex-direction: column; gap: 9px; } /* Título arriba y descripción debajo: en móvil una sola línea no cabe. */ .level-item { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-align: left; cursor: pointer; } .level-item:active { border-color: var(--accent); } .level-item b { grid-column: 1; font-size: 15.5px; font-weight: 620; } .level-item small { grid-column: 1; color: var(--text-dim); font-size: 12.5px; line-height: 1.4; } .level-item > span { grid-column: 2; grid-row: 1 / -1; align-self: center; color: var(--text-faint); font-size: 18px; } /* El nivel recomendado se distingue sin gritar. */ .level-item.featured { border-color: var(--accent); } .level-item b em { font-style: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-ink); background: var(--accent); padding: 3px 7px; border-radius: 20px; margin-left: 8px; vertical-align: 2px; } .mode-random .mode-icon { color: var(--gold); } /* --- revisión de la última partida ---------------------------------------- */ .filter-row { display: flex; gap: 8px; margin-bottom: 14px; } .filter-chip { border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); border-radius: 20px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; } .filter-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .run-list { display: flex; flex-direction: column; gap: 7px; } .run-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-align: left; cursor: pointer; } .run-item:active { border-color: var(--accent); } /* Los fallados se distinguen sin tener que leer: son los que interesan. */ .run-item.ko { border-left-color: var(--danger); } .run-item.ok { border-left-color: rgba(var(--accent-rgb), .55); } .run-num { flex: 0 0 22px; font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .run-mark { font-size: 15px; font-weight: 700; } .run-item.ok .run-mark { color: var(--accent-strong); } .run-item.ko .run-mark { color: var(--danger); } .run-text { flex: 1; min-width: 0; } .run-text b { display: block; font-size: 14.5px; font-weight: 600; } .run-text small { color: var(--text-faint); font-size: 11.5px; } .run-go { color: var(--text-faint); font-size: 18px; } /* --- tiras de estadísticas ----------------------------------------------- */ .stat-strip { display: flex; gap: 8px; margin: 4px 0 6px; } .stat-strip > div { flex: 1; background: var(--surface); border-radius: var(--radius-sm); padding: 13px 8px; text-align: center; } .stat-strip b { display: block; font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; } .stat-strip span { font-size: 11px; color: var(--text-faint); } .progress-hero { background: linear-gradient(160deg, var(--surface) 0%, var(--bg-soft) 100%); border-radius: var(--radius); padding: 22px 18px 16px; text-align: center; margin-bottom: 14px; } .progress-hero .rating-label { display: block; margin-top: 4px; } /* --- barras por tema ------------------------------------------------------ */ .bars { display: flex; flex-direction: column; gap: 9px; } .bar-row { display: flex; align-items: center; gap: 10px; font-size: 13px; } .bar-name { flex: 0 0 40%; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track { flex: 1; height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; } .bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); } .bar-pct { flex: 0 0 38px; text-align: right; color: var(--text-faint); font-variant-numeric: tabular-nums; } /* --- calendario de actividad ---------------------------------------------- */ .heatmap { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 3px; margin-bottom: 8px; } .hm { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--surface-2); } .hm.l1 { background: rgba(var(--accent-rgb), .2); } .hm.l2 { background: rgba(var(--accent-rgb), .4); } .hm.l3 { background: rgba(var(--accent-rgb), .6); } .hm.l4 { background: rgba(var(--accent-rgb), .8); } .hm.l5 { background: var(--accent-strong); } .heatmap-legend { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-faint); } .heatmap-legend .hm { width: 10px; height: 10px; } /* --- interruptores de ajustes --------------------------------------------- */ .switch-list { display: flex; flex-direction: column; gap: 9px; } .switch { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-align: left; cursor: pointer; } .switch-text { flex: 1; } .switch-text b { display: block; font-size: 15px; font-weight: 600; } .switch-text small { color: var(--text-dim); font-size: 12.5px; } .switch-knob { position: relative; width: 48px; height: 29px; flex: 0 0 48px; border-radius: 15px; background: var(--surface-2); transition: background .18s; } .switch-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: var(--knob); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .18s; } .switch.on .switch-knob { background: var(--accent); } .switch.on .switch-knob::after { transform: translateX(19px); } .rating-set { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 2px; } .rating-set .rating-value { margin: 0; font-size: 32px; } .credits { font-size: 11.5px; line-height: 1.6; color: var(--text-faint); margin-top: 26px; } .credits b { color: var(--text-dim); } /* --- selectores de aspecto ------------------------------------------------ */ .pref-label { font-size: 13.5px; font-weight: 600; margin: 18px 0 9px; } /* Tema: tres opciones excluyentes en una sola barra. */ .segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; background: var(--surface-2); border-radius: 12px; } .segmented button { border: 0; border-radius: 9px; background: transparent; color: var(--text-dim); padding: 10px 4px; font-size: 13.5px; font-weight: 600; cursor: pointer; } .segmented button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .22); } .picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .picker-item { border: 2px solid transparent; border-radius: var(--radius-sm); background: var(--surface); padding: 8px 8px 7px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; } .picker-item.on { border-color: var(--accent); } .picker-item span { font-size: 11.5px; color: var(--text-dim); font-weight: 600; } .picker-item.on span { color: var(--text); } /* Muestra del tablero: cuatro casillas con los colores de ese tema. */ .swatch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; } .swatch i:nth-child(1), .swatch i:nth-child(4) { background: var(--sq-light); } .swatch i:nth-child(2), .swatch i:nth-child(3) { background: var(--sq-dark); } /* Muestra de piezas: una blanca y una negra, cada una en su casilla. */ .piece-preview { display: grid; grid-template-columns: 1fr 1fr; width: 100%; aspect-ratio: 2 / 1; border-radius: 6px; overflow: hidden; } .piece-preview i { display: grid; place-items: center; padding: 8%; } .piece-preview i:first-child { background: var(--sq-light); } .piece-preview i:last-child { background: var(--sq-dark); } .piece-preview svg { width: 100%; height: 100%; } .credit-line { font-size: 11.5px; color: var(--text-faint); margin: 10px 0 0; } /* --- botones -------------------------------------------------------------- */ .btn { border: 1px solid transparent; border-radius: 12px; padding: 13px 18px; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .1s, background .15s; } .btn:active { transform: scale(.97); } .btn.primary { background: var(--accent); color: var(--accent-ink); } .btn.ghost { background: var(--surface); border-color: var(--line); color: var(--text); } .btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); } .btn.wide { width: 100%; } /* --- pantalla de juego ---------------------------------------------------- */ .hud { display: flex; gap: 8px; } .hud-item { flex: 1; display: flex; align-items: baseline; gap: 6px; background: var(--surface); border-radius: 11px; padding: 8px 12px; } .hud-label { font-size: 11px; color: var(--text-faint); } .hud-value { margin-left: auto; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .hud-item.danger .hud-value { color: var(--danger); } .hearts { display: inline-flex; align-items: center; gap: 4px; color: var(--danger); } .heart { display: block; width: 17px; height: 17px; } /* La vida gastada deja su silueta punteada: el hueco sigue contando. */ .heart.spent { color: var(--text-faint); } .hud-trend { font-size: 12px; font-weight: 600; } .hud-trend.up { color: var(--accent-strong); } .hud-trend.down { color: var(--danger); } .board-wrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; container-type: size; /* permite medir el hueco real con cqh */ /* el tablero llega a los bordes verticales (izquierdo/derecho) de la pantalla: se cancela el padding lateral de .screen-play solo aquí, el resto de la UI (cabecera, hud, barra de jugadas, pie) lo conserva */ margin-left: -10px; margin-right: -10px; } /* --- barra de jugadas ------------------------------------------------------ Una sola fila bajo el tablero: flechas a los lados y la notación en medio, que se desplaza sola para mantener a la vista la jugada actual. */ .movebar { display: flex; align-items: center; gap: 5px; margin-top: 7px; } .nav-btn { width: 38px; height: 36px; flex: 0 0 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--surface); color: var(--text-dim); font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s, color .15s, transform .1s; } .nav-btn:active:not(:disabled) { transform: scale(.92); } .nav-btn:disabled { opacity: .28; cursor: default; } /* Si te has ido hacia atrás, la flecha de volver se pinta de color: es el camino de vuelta a la posición donde puedes jugar. */ .movebar.browsing [data-act="fwd"] { background: var(--accent); color: var(--accent-ink); } .moves { flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; gap: 1px; padding: 0 8px; background: var(--surface); border-radius: 10px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .moves::-webkit-scrollbar { display: none; } .mv-num { color: var(--text-faint); font-size: 12px; font-variant-numeric: tabular-nums; padding: 0 3px 0 6px; } .mv-num:first-child { padding-left: 0; } .mv { border: 0; background: transparent; color: var(--text); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 4px 6px; border-radius: 7px; cursor: pointer; white-space: nowrap; } .mv.on { background: var(--accent); color: var(--accent-ink); } .play-foot { padding-bottom: 4px; } .status { margin: 0 0 10px; font-size: 14.5px; font-weight: 550; text-align: center; min-height: 20px; color: var(--text-dim); } .status.good { color: var(--accent-strong); } .status.bad { color: var(--danger); } .status.meh { color: var(--gold); } .status.turn::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; vertical-align: baseline; border: 1px solid var(--text-faint); } .status.turn.w::before { background: #fff; } .status.turn.b::before { background: #1c1c1c; } .actions { display: flex; gap: 9px; justify-content: center; } .actions .btn { flex: 1; } .hint-note { font-size: 12.5px; color: var(--text-faint); padding: 8px 0; } /* Altura fija y contenido recortado: el hueco mide siempre lo mismo, con o sin etiquetas, y así el tablero no se mueve al resolver el puzzle. */ .puzzle-info { height: 68px; overflow: hidden; text-align: center; margin-bottom: 8px; } .chips { display: flex; gap: 6px; justify-content: center; flex-wrap: nowrap; /* si no caben, se desplazan de lado */ overflow-x: auto; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { font-size: 11.5px; font-weight: 600; background: rgba(var(--accent-rgb), .16); color: var(--accent-strong); padding: 4px 10px; border-radius: 20px; } .chip.muted { background: var(--surface-2); color: var(--text-faint); } .theme-desc { font-size: 12.5px; color: var(--text-faint); margin: 8px 0 0; line-height: 1.45; /* como mucho dos líneas, para que la altura del hueco no se dispare */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* --- fin de partida -------------------------------------------------------- */ .gameover[hidden] { display: none; } .gameover { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; padding: 24px; z-index: 40; animation: fade .2s ease; } .gameover-card { width: 100%; max-width: 340px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px 22px 22px; text-align: center; } .gameover-card h2 { margin: 0; font-size: 19px; font-weight: 650; } .record-badge { display: inline-block; background: var(--gold); color: var(--gold-ink); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 20px; margin-bottom: 12px; } .big-score { font-size: 66px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; margin: 6px 0 4px; font-variant-numeric: tabular-nums; color: var(--accent-strong); } .summary { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin: 16px 0 20px; font-size: 13.5px; } .summary dt { color: var(--text-dim); text-align: left; } .summary dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; } .gameover-actions { display: flex; flex-direction: column; gap: 9px; } @keyframes fade { from { opacity: 0; } } .fatal { padding: 40px 20px; text-align: center; color: var(--danger); } /* ========================================================================== Tablero ========================================================================== */ .board { position: relative; /* nunca mas ancho que el hueco ni mas alto que el: cqh mide el contenedor */ width: min(100%, 70dvh); width: min(100%, 100cqh); aspect-ratio: 1; border-radius: 8px; overflow: hidden; touch-action: none; /* el arrastre no debe desplazar la página */ } .board-squares, .board-marks, .board-pieces, .board-flash, .board-promo { position: absolute; inset: 0; } .board-marks, .board-pieces, .board-flash { pointer-events: none; } .board-squares { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); } .sq.light { background: var(--sq-light); } .sq.dark { background: var(--sq-dark); } .coord { position: absolute; font-size: min(2.6vw, 11px); font-weight: 700; opacity: .62; pointer-events: none; } .coord-file { bottom: 1px; margin-left: 1.5%; width: 12.5%; } .coord-rank { left: 2px; height: 12.5%; } .coord.on-light { color: var(--sq-dark); } .coord.on-dark { color: var(--sq-light); } .piece, .mark, .promo-choice { position: absolute; top: 0; left: 0; width: 12.5%; height: 12.5%; } .piece { z-index: 3; /* 280ms: coincide con PIECE_MOVE_MS en js/board.js -- si se cambia aquí, cambiar también allí. */ transition: transform .28s cubic-bezier(.22, .8, .3, 1); } .piece.above { z-index: 5; } .piece.dragging { transition: none; z-index: 9; transform-origin: center; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); scale: 1.18; } .piece.taken { z-index: 2; transition: opacity .16s ease; opacity: 0; } /* --- marcas del tablero ---------------------------------------------------- */ .mark { z-index: 2; } .mark.last.on-light { background: var(--hl-last-light); } .mark.last.on-dark { background: var(--hl-last-dark); } .mark.selected.on-light { background: var(--hl-sel-light); } .mark.selected.on-dark { background: var(--hl-sel-dark); } .mark.dest::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: var(--board-ink); } .mark.capture::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; box-shadow: inset 0 0 0 5px var(--board-ink); } .mark.hover { z-index: 4; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .75); border-radius: 3px; } /* Jaque: un resplandor rojo suave que se difumina hacia los bordes. */ .mark.check { background: radial-gradient(circle at center, rgba(232, 60, 40, .95) 0%, rgba(232, 60, 40, .7) 32%, rgba(232, 60, 40, 0) 72%); } /* Mate: rojo mucho más profundo y, sobre todo, un cerco dorado que llena la casilla entera. Se distingue del jaque de un vistazo, sin leer nada. */ /* Opaco a propósito: si deja pasar la casilla de debajo, el rojo sale de un color sobre las claras y de otro sobre las oscuras. Y el oro es fijo, no el del tema, porque va sobre rojo y no sobre la interfaz: el dorado del tema claro es marrón y ahí se veía sucio. */ .mark.mate { background: radial-gradient(circle at center, #d2202a 0%, #a90f1d 52%, #7c0713 100%); } .mark.mate::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 4px #ffd24a; border-radius: 2px; animation: mate-ring .55s cubic-bezier(.2, .9, .3, 1) both; } @keyframes mate-ring { 0% { opacity: 0; transform: scale(1.45); } 100% { opacity: 1; transform: scale(1); } } /* Acierto y fallo: una insignia en la esquina de la casilla, como hace chess.com, en vez del aro pulsante y la sacudida de antes. Dice de un vistazo QUÉ ha pasado y DÓNDE, y no interfiere con el tinte de la última jugada, que sigue debajo. La pista conserva su propio pulso azul. */ .mark.flash-right, .mark.flash-wrong { z-index: 6; } .mark.flash-right::after, .mark.flash-wrong::after { content: ""; position: absolute; /* tamaño "medio": +30% sobre el original, para acierto y fallo por igual */ top: -11%; right: -11%; width: 50%; height: 50%; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 58% 58%; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); animation: badge-pop .3s cubic-bezier(.3, 1.4, .4, 1) both; } .mark.flash-right::after { background-color: var(--right-bright); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); } .mark.flash-wrong::after { background-color: var(--wrong-bright); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } @keyframes badge-pop { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } } .mark.flash-hint { z-index: 6; } .mark.flash-hint::after { content: ""; position: absolute; inset: 0; border-radius: 4px; animation: pulse .7s ease-out forwards; box-shadow: inset 0 0 0 5px #6ba8e8; } @keyframes pulse { 0% { opacity: 0; transform: scale(1.22); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } .board-locked .piece { cursor: default; } /* --- coronación ------------------------------------------------------------- */ .board-promo { z-index: 20; background: rgba(12, 14, 18, .72); pointer-events: auto; } .promo-choice { border: 0; padding: 4%; background: var(--sq-light); box-shadow: 0 3px 10px rgba(0, 0, 0, .5); border-radius: 50%; cursor: pointer; } .promo-choice:active { background: var(--accent-strong); } /* --- respeto por quien prefiere menos movimiento ---------------------------- */ @media (prefers-reduced-motion: reduce) { .piece { transition: none; } .mark.flash-right::after, .mark.flash-wrong::after, .mark.flash-hint::after { animation: none; opacity: 1; } .mark.flash-right::after, .mark.flash-wrong::after { transform: scale(1); } .mark.mate::after { animation: none; opacity: 1; } }