/* ==========================================================================
   BASE: estructura y layout. Sin colores ni fuentes: todo sale de las
   variables de css/theme.css.

   El juego es un rectángulo vertical: 9:16 en escritorio y, en móviles más
   alargados, ocupa todo el alto (hasta 9:22); el alto extra se lo queda el lago.
   --u es la unidad del juego (1/100 del ancho): todo se mide en --u o en em
   (la letra base también depende de --u), así se ve igual en cualquier pantalla.
   ========================================================================== */

:root {
    --gw: min(100vw, 100dvh * 9 / 16);          /* ancho del juego */
    --gh: min(100dvh, var(--gw) * 22 / 9);      /* alto del juego */
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--page);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.stage { height: 100dvh; display: grid; place-items: center; }
.game {
    --u: calc(var(--gw) / 100);
    position: relative;
    width: var(--gw);
    height: var(--gh);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr calc(var(--u) * 19) calc(var(--u) * 11) auto;
    font-size: calc(var(--u) * 4.6);
    background: var(--bg);
    touch-action: none;
}
.game.shake { animation: shake .2s steps(2); }
@keyframes shake { 33% { transform: translate(calc(var(--u) * .8), 0); } 66% { transform: translate(calc(var(--u) * -.8), calc(var(--u) * .4)); } }
[data-icon] svg, .li-icon svg { width: 100%; height: 100%; display: block; }

/* ---------- Arriba: radiación a todo lo ancho; debajo, dinero y botones ---------- */
.hud { position: relative; z-index: 7; display: flex; flex-direction: column; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2.5) calc(var(--u) * 3) calc(var(--u) * 2); }
.rad { display: flex; align-items: center; gap: calc(var(--u) * 2); height: calc(var(--u) * 9); cursor: pointer; }
.rad-icon { width: calc(var(--u) * 8); height: calc(var(--u) * 8); flex: none; }
.meter { flex: 1; display: grid; grid-template-columns: repeat(10, 1fr); gap: calc(var(--u) * .7); height: calc(var(--u) * 7); padding: calc(var(--u) * .8); }
.meter i { display: block; }
.rad-val { min-width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud-row { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.money { flex: 1; display: flex; align-items: center; gap: .2em; font-variant-numeric: tabular-nums; }
.icon-btn { width: calc(var(--u) * 9); height: calc(var(--u) * 9); display: grid; place-items: center; flex: none; }
.icon-btn svg { width: 65%; height: 65%; }
.chip-btn { display: flex; align-items: center; gap: .35em; height: calc(var(--u) * 9); padding: 0 calc(var(--u) * 2.5); }
.chip-btn > span { width: 1.1em; height: 1.1em; display: block; }

/* ---------- Lago ---------- */
.lake { position: relative; min-height: 0; grid-row: 2 / 6; grid-column: 1; }   /* llega hasta abajo: la barra y el inventario van encima */
.hud { grid-row: 1; }
.gear-strip { pointer-events: none; grid-row: 3; grid-column: 1; position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 calc(var(--u) * 3); }
.gear-col { margin-bottom: calc(var(--u) * 2.5); /* bajado ~15 px sobre la orilla */ display: flex; flex-direction: column; gap: calc(var(--u) * 1); width: calc(var(--u) * 31); }
.game.is-cast .gear-strip { visibility: hidden; }
.gear-cell { pointer-events: auto; display: flex; align-items: center; gap: calc(var(--u) * 1.5); min-width: 0; height: calc(var(--u) * 6); padding: 0 calc(var(--u) * 1.5); }
.gear-cell i { display: block; width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); flex: none; }
.gear-cell svg { width: 100%; height: 100%; display: block; }
.gear-cell b { font-weight: inherit; line-height: 1; white-space: nowrap; min-width: 0; overflow: hidden; }
.power { grid-row: 4; grid-column: 1; position: relative; z-index: 3; }
/* ---------- Mochila: panel con pestañas entre la cabecera y el pie ---------- */
.bag-panel { grid-row: 2; grid-column: 1; justify-self: center; position: relative; z-index: 6; width: 85%; margin: calc(var(--u) * 1.5) 0 calc(var(--u) * 6.5); display: flex; flex-direction: column; min-height: 0; }
.bag-head { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: 0 0 calc(var(--u) * 1.5); }
.bag-head .modal-title { flex: 1; margin: 0; }
.bag-head .icon-btn { width: calc(var(--u) * 8); height: calc(var(--u) * 8); }
#shopPanel .bag-head .modal-title { flex: 0 1 auto; }
.bag-head .shop-cash { flex: 1; text-align: right; }
.game:has(.bag-panel:not([hidden])) .hint { visibility: hidden; }
.bag-tabs { display: flex; gap: calc(var(--u) * 1); position: relative; z-index: 1; }
.bag-tab { flex: 1; height: calc(var(--u) * 9); display: grid; place-items: center; min-width: 0; }
.bag-tab svg { width: calc(var(--u) * 5.5); height: calc(var(--u) * 5.5); display: block; }
.bag-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .8em; padding: calc(var(--u) * 3); }
.dock { grid-row: 5; grid-column: 1; position: relative; z-index: 3; }
.lake canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }
.hint { position: absolute; left: 0; right: 0; top: calc(var(--u) * 3); margin: 0 auto; width: max-content; max-width: 90%; padding: .25em .6em; text-align: center; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 2; }
.hint.show { opacity: 1; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fish-label { position: absolute; transform: translate(-50%, -100%); padding: .1em .35em; white-space: nowrap; }
.float-num { position: absolute; transform: translate(-100%, -100%); display: flex; align-items: center; gap: .15em; white-space: nowrap; animation: float-up 1.4s forwards; }
.float-num i { width: 1em; height: 1em; display: block; }
.float-num svg { width: 100%; height: 100%; display: block; }
@keyframes float-up { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; margin-top: calc(var(--u) * -8); } }

/* ---------- Barra ---------- */
.power { display: flex; align-items: center; padding: 0 calc(var(--u) * 6); }
.bar { position: relative; flex: 1; height: calc(var(--u) * 6); display: grid; grid-template-columns: repeat(var(--segs, 20), 1fr); gap: calc(var(--u) * .5); padding: calc(var(--u) * .8); }
.bar i { display: block; }
.reel-btn { flex: 1; height: calc(var(--u) * 7.5); padding: 0; }
.bar .zone-mark { position: absolute; top: calc(var(--u) * -1.8); bottom: calc(var(--u) * -1.8); width: calc(var(--u) * .8); margin-left: calc(var(--u) * -.4); }
.bar .cap { position: absolute; top: calc(var(--u) * -1.5); bottom: calc(var(--u) * -1.5); width: calc(var(--u) * .8); }

/* ---------- Abajo: mochila + 3 mutaciones (cuadrados) ---------- */
.dock { display: flex; align-items: start; gap: calc(var(--u) * 5); padding: calc(var(--u) * 1.5) calc(var(--u) * 3) calc(var(--u) * 3); }
.muts { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2.5); }
.slot { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .6); min-width: 0; padding: calc(var(--u) * 1); }
.slot.bag { width: calc(var(--u) * 21); flex: none; }
.slot-icon { width: calc(var(--u) * 8); height: calc(var(--u) * 8); flex: none; }
.slot-name { line-height: .9; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slot-badge { position: absolute; top: calc(var(--u) * .8); right: calc(var(--u) * 1.2); line-height: 1; }
.slot.is-empty .slot-icon { visibility: hidden; }
.slot:not(.is-empty):active { transform: scale(.96); }

/* ---------- Tarjeta del pez: panel dentro del juego, bajo la radiación ---------- */
.catch-panel {
    position: absolute;
    inset: calc(var(--u) * 12.5) 0 0 0;   /* bajo la barra de radiación; transparente: el lago se sigue viendo */
    z-index: 8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--u) * 2.5);
    padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 5);
    overflow-y: auto;
    animation: panel-in .25s;
}
/* con la tarjeta abierta solo queda la radiación (y el lago detrás) */
.game.is-catch .hud-row > button, .game.is-catch .bag-panel, .game.is-catch .gear-strip, .game.is-catch .power, .game.is-catch .dock, .game.is-catch .hint { visibility: hidden; }
.catch-head { display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3); }
.catch-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.catch-sub { display: flex; gap: .6em; flex-wrap: wrap; }
.catch-panel.is-locked .choice { pointer-events: none; }
.catch-tags:empty, .catch-tags:not(:has(.tag:not([hidden]))) { display: none; }
.arrow { display: inline-block; width: .8em; height: .7em; margin: 0 .25em; vertical-align: middle; }
.arrow svg { width: 100%; height: 100%; display: block; }
@keyframes panel-in { from { transform: translateY(calc(var(--u) * 6)); opacity: 0; } }
.catch-icon { width: calc(var(--u) * 20); height: calc(var(--u) * 20); flex: none; }
.catch-icon svg { width: 100%; height: 100%; display: block; }
.catch-name { margin: 0; font-weight: 400; }
.catch-sub, .catch-tags { margin: 0; }
.catch-tags { display: flex; gap: .4em; }
.tag { padding: .1em .5em; }
.choice { width: 100%; display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 3.5); text-align: left; }
.choice-head { display: flex; justify-content: space-between; align-items: baseline; }
.choice-head b { font-weight: 400; }
.choice-text { display: flex; flex-direction: column; gap: calc(var(--u) * .8); line-height: 1; }
.choice-mut { display: flex; align-items: center; gap: .4em; }
.choice-mut .li-icon { width: 1.6em; height: 1.6em; flex: none; }
.choice-rad { display: flex; align-items: center; gap: .3em; flex-wrap: wrap; }
.btn-rad { width: 1.1em; height: 1.1em; display: inline-block; flex: none; }
.btn-rad svg { width: 100%; height: 100%; display: block; }
.mut-q { display: grid; place-items: center; }

/* ---------- Aviso ---------- */
.toast {
    position: fixed;
    inset: auto 0 calc((100dvh - var(--gh)) / 2 + var(--gw) * .37) 0;
    margin: 0 auto;
    width: max-content;
    max-width: calc(var(--gw) * .86);
    padding: .5em .9em;
    text-align: center;
    font-size: calc(var(--gw) * .05);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
    z-index: 50;
}
.toast.show { opacity: 1; }
.toast[popover] { border: 0; }

/* ---------- Ventanas ---------- */
.modal {
    width: calc(var(--gw) * .86);
    max-height: calc(var(--gh) * .8);
    padding: calc(var(--gw) * .05);
    font-size: calc(var(--gw) * .046);
    color: var(--text);
    overflow: auto;
    overflow-x: hidden;
}
.modal[open] { animation: modal-in .2s; }
@keyframes modal-in { from { transform: scale(.9); opacity: 0; } }
.modal-x { position: absolute; top: .5em; right: .5em; width: 1.8em; height: 1.8em; display: grid; place-items: center; }
.modal-x svg { width: 55%; height: 55%; }
.modal-title { margin: 0 2em 1em 0; font-family: var(--font-display); font-weight: 400; }
.modal-body { display: flex; flex-direction: column; gap: .8em; min-width: 0; }
.modal-text { margin: 0; }
.btn { padding: .7em 1em; font-family: var(--font-display); }
.version { margin: 0; font-size: .75em; }

.list { display: flex; flex-direction: column; gap: .4em; margin: 0; padding: 0; list-style: none; }
.list li { display: flex; align-items: center; gap: .6em; padding: .4em .6em; }
.list li .li-icon { width: 1.4em; height: 1.4em; flex: none; }
.list li .li-name { flex: 1; min-width: 0; line-height: 1; }
.list li .li-name small { display: block; margin-top: .2em; font-size: .8em; }
.mini-btn { flex: none; padding: .35em .6em; font-family: var(--font-display); font-size: .5em; }
.mini-btn:disabled { opacity: .4; cursor: default; }
.shop-money { margin: 0; }
.shop-tip { margin: 0; line-height: 1.05; }
.first-tip { display: block; margin-top: .3em; padding: .3em .4em; line-height: 1; }
.shop-own { flex: none; max-width: 5.5em; text-align: center; padding: .3em .4em; line-height: 1; }
.bag-badge { display: flex; align-items: center; gap: .15em; }
.bag-badge i { display: block; width: 1.6em; height: 1.6em; }
.bag-badge svg { width: 100%; height: 100%; display: block; }
.stats { display: grid; grid-template-columns: 1fr; gap: .2em; }
.stats div { display: flex; justify-content: space-between; gap: 1em; }
.list-head { margin: .4em 0 0; font-family: var(--font-display); font-weight: 400; }

.album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.album-card { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; text-align: center; padding: .3em; }
.album-card .q { font-family: var(--font-display); font-size: 1.4em; }
.album-card small { font-size: .95em; line-height: 1; }
.album-card b { font-size: .95em; line-height: 1; font-weight: 400; overflow-wrap: anywhere; }
.album-card .ac-icon { width: 2.4em; height: 2.4em; }
.album-card .ac-icon svg { width: 100%; height: 100%; display: block; }

/* ---------- Configuración ---------- */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: .8em; }
.set-row small { display: block; font-size: .8em; }
.toggle { flex: none; min-width: 3.6em; padding: .35em .6em; font-family: var(--font-display); font-size: .55em; }
.range { flex: 1; max-width: 55%; }
.help { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: .35em; line-height: 1.05; }
.help b { font-weight: 400; }
.credits { margin: 0; line-height: 1.05; }
/* Móvil en horizontal: aviso de girarlo */
.rotate { display: none; }
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
    .rotate { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; text-align: center; padding: 2em; }
    .rotate .start-icon { margin: 0 auto 1em; width: 3em; height: 3em; }
}
/* Reducir movimiento (opción o preferencia del sistema) */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; }

/* ---------- Mutación y muerte ---------- */
.mut-head { display: flex; align-items: center; gap: .4em; margin: 0 0 .2em; }
.mut-line { margin: 0; line-height: 1.05; }
.mut-modal[open], .death[open] { display: flex; flex-direction: column; align-items: center; gap: .5em; text-align: center; }
.mut-modal .modal-title, .death .modal-title { margin: 0; }
.mut-icon, .death-icon { width: 4em; height: 4em; }
.mut-icon svg, .death-icon svg { width: 100%; height: 100%; display: block; }
.mut-name { margin: 0; }
.mut-desc { width: 100%; text-align: left; }
.mut-actions { display: flex; flex-direction: column; gap: .5em; width: 100%; }
.mut-swap { display: flex; align-items: center; gap: .5em; text-align: left; }
.mut-swap .li-icon { width: 1.4em; height: 1.4em; flex: none; }
.death .btn { width: 100%; }
/* Inicio y maletín */
.start[open], .bag-modal[open], .notice[open] { display: flex; flex-direction: column; align-items: center; gap: .7em; text-align: center; }
.start .modal-title, .bag-modal .modal-title, .notice .modal-title { margin: 0; }
.notice .btn { width: 100%; }
.album-head { margin: 0; }
.start-icon { width: 4.5em; height: 4.5em; }
.start-icon svg { width: 100%; height: 100%; display: block; }
.start-menu, .start-confirm { display: flex; flex-direction: column; gap: .7em; width: 100%; }
.start .btn, .bag-modal .btn { width: 100%; }
.bag-items { width: 100%; text-align: left; }
.bag-items label { display: flex; align-items: center; gap: .6em; width: 100%; cursor: pointer; }
.bag-items input { width: 1.2em; height: 1.2em; flex: none; }
/* Efectos de la radiación */
.lake::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s; }
.game.fx-vista .lake::after { opacity: 1; }
.game.fx-nauseas .lake canvas { animation: nausea 7s ease-in-out infinite; }
@keyframes nausea { 0%, 100% { transform: none; } 30% { transform: rotate(.6deg) translateX(calc(var(--u) * .6)); } 60% { transform: rotate(-.5deg) translateY(calc(var(--u) * .4)); } }