/* ==========================================================================
   TEMA: mazmorra de piedra musgosa en pixel art. Todo lo visual va aquí.
   Los sprites y losas son PNG de img/sprites/ (ver icons.js); aquí los colores de fondo son solo el relleno de respaldo.
   ========================================================================== */

@font-face { font-family: "Press Start 2P"; font-display: swap; src: url("../fonts/press-start-2p-latin.woff2") format("woff2"); }
@font-face { font-family: "VT323"; font-display: swap; src: url("../fonts/vt323-latin.woff2") format("woff2"); }
@font-face { font-family: "Pixelify Sans"; font-display: swap; font-weight: 400 700; src: url("../fonts/pixelify-sans-latin.woff2") format("woff2"); }

:root {
    --page: #070d09;
    --panel: #0e1812;
    --panel-2: #16241a;
    --text: #e8d9a8;
    --muted: #a8935a;
    --gold: #f0b43a;
    --gold-d: #a8721a;
    --gold-l: #ffe38a;
    --stone-l: #8cc060;
    --stone: #4b7a34;
    --stone-d: #234018;
    --floor: #2b4a23;
    --floor-d: #1c3318;
    --floor-l: #3c6030;
    --red: #b8222c;
    --red-d: #6a1018;
    --brick: #2a4a2a;
    --brick-d: #142616;
    --brick-l: #4a7040;
    --backdrop: rgba(4, 9, 6, .88);
    --font-display: "Press Start 2P", "Courier New", monospace;
    --font-title: "Pixelify Sans", "Press Start 2P", monospace;
    --font-body: "VT323", "Courier New", monospace;
}

* { border-radius: 0 !important; }
body { -webkit-font-smoothing: none; text-rendering: optimizeSpeed; }
*, *::before, *::after { transition-timing-function: steps(3) !important; }
.board .knight { transition-timing-function: linear !important; }
svg { image-rendering: pixelated; }


/* ---------- Marco ---------- */
.game {
    background: var(--panel);
    outline: 3px solid #2a1c0c;
    box-shadow: 0 0 0 7px #120c06, 0 0 50px 12px rgba(0, 0, 0, .7);
}

/* ---------- Marcador ---------- */
.hud { background: var(--header) center / 100% 100% no-repeat, var(--panel); image-rendering: pixelated; }
.title { font-family: var(--font-title); font-weight: 700; letter-spacing: .12em; color: var(--gold); text-shadow: 2px 2px 0 #3a2208; font-size: calc(var(--u) * 3.8); line-height: 1.1; }
.title b { font-size: .9em; color: var(--gold-l); }
.stat b { font-family: var(--font-title); font-weight: 700; font-size: calc(var(--u) * 4.4); color: var(--gold); text-shadow: 2px 2px 0 #000; }
.stat i { filter: drop-shadow(2px 2px 0 #000); }
.stat#stFlags b { color: #e6a890; }
.stat#stTime b { color: #d8b890; }
.stat#stFloor b { color: #7ed848; }
.stat.off i { opacity: .3; filter: grayscale(1); }
.lives i.off { filter: brightness(.3) saturate(.5); }
.icon-btn:active { transform: translateY(2px); }

/* ---------- Tablero ---------- */
.board-wrap { background: #000; }
/* Muro: solo el PNG (wall-a/b/c) sobre un color liso de respaldo */
.cell.wall { background-color: var(--brick); background-image: var(--wl, var(--wall-a)); background-size: 100% 100%; background-repeat: no-repeat; overflow: hidden; }
.cell.wall.w2 { --wl: var(--wall-b); }
.cell.wall.w3 { --wl: var(--wall-c); }
.cell.wall.door { background-color: #05090a; background-image: none; }
.cell.wall.door { overflow: visible; z-index: 1; }
.deco { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }   /* el PNG va a su tamaño real: 32 px = 1 casilla (svgFit) */

/* Casillas: solo color liso de respaldo; el dibujo es el PNG (sin sombras ni bordes de CSS) */
.cell.hid { background-color: var(--stone); }
@media (hover: hover) { .cell.hid:hover { filter: brightness(1.15); } }
.cell.hid.dbg::before { content: ""; position: absolute; inset: 40%; background: #000; }
.cell.hid.mine > svg { opacity: .7; }
.cell.rev { background-color: var(--floor); font-family: var(--font-display); font-size: calc(var(--cell) * .42); }
.cell.rev b { text-shadow: calc(var(--cell) * .05) calc(var(--cell) * .05) 0 #000; }
.cell.rev .corner { font-size: .5em; }
.cell.n1 { color: #7ed848; }
.cell.n2 { color: #f0e040; }
.cell.n3 { color: #f89030; }
.cell.n4, .cell.n5, .cell.n6, .cell.n7, .cell.n8 { color: #ff5a4a; }
/* Trampa pisada / número alto: losa roja */
.cell.inv, .cell.boom { background-color: var(--red-d); }
.cell .x { filter: drop-shadow(1px 1px 0 #000); }
.knight svg { filter: drop-shadow(calc(var(--cell) * .05) calc(var(--cell) * .05) 0 rgba(0, 0, 0, .6)); }
.float { font-family: var(--font-title); font-weight: 700; color: var(--gold-l); text-shadow: 2px 2px 0 #000; }

/* ---------- Pie ---------- */
.hint { color: var(--muted); font-size: calc(var(--u) * 5); background: #000; }
.dock { background: #000; }

/* Botón de piedra con marco dorado y musgo */
.btn {
    font-family: var(--font-title); font-weight: 700; letter-spacing: .08em; color: var(--gold);
    text-shadow: 2px 2px 0 #000;
    background: linear-gradient(#3f5a30, #2c4222);
    border: 3px solid #1a1206;
    box-shadow:
        inset 0 0 0 2px var(--gold-d), inset 0 0 0 4px #5a4a1c,
        0 3px 0 #000;
    position: relative;
}
.btn.on, .btn:active { background: linear-gradient(#5a7a38, #3a5a2a); color: var(--gold-l); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--gold-d), inset 0 0 0 4px #5a4a1c, 0 1px 0 #000; }

/* ---------- Avisos ---------- */
.toast { background: var(--panel-2); color: var(--gold-l); border: 3px solid var(--gold-d); box-shadow: 3px 3px 0 #000; font-size: calc(var(--u) * 5); }
.toast.bad { background: var(--red-d); border-color: var(--red); color: #ffd0c8; }
.banner { background: rgba(0, 0, 0, .45); }
.banner > div { background: var(--title-floor) center / 100% 100% no-repeat; image-rendering: pixelated; border: 0; }
.banner b { font-family: var(--font-title); font-weight: 700; letter-spacing: .06em; color: #f4c542; text-shadow: 2px 0 #2a1a05, -2px 0 #2a1a05, 0 2px #2a1a05, 0 -2px #2a1a05, 2px 2px #2a1a05, -2px 2px #2a1a05, 2px -2px #2a1a05, -2px -2px #2a1a05, 0 4px #2a1a05; }
.banner span { font-family: var(--font-title); font-weight: 600; letter-spacing: .08em; color: #f6efd8; text-shadow: 1px 1px 0 #1a1208, -1px 1px 0 #1a1208, 0 2px 0 #1a1208; }

/* ---------- Ventanas ---------- */
.modal {
    background: linear-gradient(var(--panel-2), var(--panel)); color: var(--text);
    border: 4px solid #1a1206;
    box-shadow: inset 0 0 0 3px var(--gold-d), inset 0 0 0 6px #3a2a10, 0 0 0 3px #000, 0 10px 0 3px rgba(0, 0, 0, .6);
}
.modal::backdrop { background: var(--backdrop); }
.modal h2 { font-family: var(--font-title); font-weight: 700; letter-spacing: .1em; color: var(--gold); text-shadow: 2px 2px 0 #3a2208; }
.modal .muted { color: var(--muted); }
.help .num { font-family: var(--font-title); font-weight: 700; color: #f89030; background: var(--floor); }
.row.total { border-top: 3px solid var(--gold-d); font-family: var(--font-title); font-weight: 700; color: var(--gold); font-size: calc(var(--u) * 4.2); }
.row.zero { color: var(--muted); }
.check input { accent-color: var(--gold); }

/* Casilla de inicio: parpadea */
.cell.hid.start { animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { filter: brightness(1.45); } }

/* Losas PNG (encima del color de respaldo) */
.cell.hid { background-size: 100% 100%; }
.cell.hid.h1 { background-image: var(--tile-hidden-1); }
.cell.hid.h2 { background-image: var(--tile-hidden-2); }
.cell.hid.h3 { background-image: var(--tile-hidden-3); }
.cell.rev.r1 { background-image: var(--tile-revealed-1); background-size: 100% 100%; }
.cell.rev.r2 { background-image: var(--tile-revealed-2); background-size: 100% 100%; }
.cell.rev.r3 { background-image: var(--tile-revealed-3); background-size: 100% 100%; }
.cell.rev.inv, .cell.boom { background-image: var(--tile-boom); background-size: 100% 100%; }
.cell.rev, .cell.hid, .cell.boom, .cell.wall { image-rendering: pixelated; }

/* Niebla gradual: la opacidad (--fa) la calcula board.js según la distancia al caballero */
.cell.fogged::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(0, 0, 0, var(--fa, 0)); }

.ask { background: #000; border-top: 3px solid var(--gold-d); color: var(--gold-l); font-size: calc(var(--u) * 5); }

/* Pinchos: la capa va detrás del número */
.cell .spk { position: absolute; inset: 0; pointer-events: none; }
.cell.rev b:not(.corner) { position: relative; z-index: 1; }
.cell.rev b.corner { position: absolute; left: 7%; top: 5%; z-index: 2; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }


/* La escalera sustituye a la losa de suelo: su PNG es la casilla entera */
.cell.rev.it.stairs { background-image: none; }

/* Dock: imagen de fondo y un PNG por botón (button-1 explorar, button-2 bandera/resultado, button-3 espada) */
.bottom { background: #000; image-rendering: pixelated; }
.bottom .dock { background: var(--dock) center / 100% 100% no-repeat; }
.bottom .hint { background: var(--msg-bg) center / 100% 100% no-repeat; color: var(--gold-l); font-size: calc(var(--u) * 4.6); text-shadow: 2px 2px 0 #000; }
.bottom .hint.m { font-size: calc(var(--u) * 3.8); }
.bottom .hint.l { font-size: calc(var(--u) * 3.1); }
.bottom .tools .btn, .bottom #btnMode { background-color: transparent; background-size: 100% 100%; background-repeat: no-repeat; border: 0; box-shadow: none; image-rendering: pixelated; }
.bottom .tools .btn[data-tool="walk"] { background-image: var(--button-1); }
.bottom .tools .btn[data-tool="flag"], .bottom #btnMode { background-image: var(--button-2); }
.bottom .tools .btn[data-tool="walk"].on, .bottom .tools .btn[data-tool="walk"]:active { background-image: var(--button-1-active); }
.bottom .tools .btn[data-tool="flag"].on, .bottom .tools .btn[data-tool="flag"]:active, .bottom #btnMode.on, .bottom #btnMode:active { background-image: var(--button-2-active); }
.bottom .tools .btn:active, .bottom #btnMode:active { box-shadow: none; transform: translateY(2px); }
.bottom #btnEnd { background: #1a1206; border: 2px solid var(--gold-d); box-shadow: none; color: var(--gold); }