/* Europe — les deux mini-jeux de la section des secrets, tirés du raid « Crypte de la
   pierre » : la traversée de Désolation et la Sécurité de la Crypte. Le cadre des jeux
   vient de css/components/game.css. */

.secrets-sec { background: radial-gradient(ellipse 60% 45% at 30% 30%, rgba(159, 216, 255, .08), transparent 70%); }

/* ---------- Désolation ---------- */
.storm-field { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 17), minmax(0, 1fr)); gap: 3px; margin: 16px 24px 0; padding: 10px; border: 1px solid var(--line); background: linear-gradient(160deg, #c9dcee, #8fa9c4 55%, #b9cee2); }
.storm-field.freezing { box-shadow: inset 0 0 0 2px rgba(120, 190, 255, .8), inset 0 0 40px rgba(120, 190, 255, .55); }
.cell { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 0; cursor: default; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .34); font-size: clamp(.5rem, 1.5vw, .72rem); font-weight: 800; color: var(--night); transition: background .35s, box-shadow .35s; }
.cell.seen { background: rgba(28, 46, 74, .78); }
.cell.step { cursor: pointer; }
.storm-field.running .cell.step:hover, .storm-field.running .cell.step:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #fff; }
.cell.lamp::after { content: ''; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #ff5a4a; box-shadow: 0 0 10px 3px rgba(255, 90, 74, .75); }
.cell.bubble { background: radial-gradient(circle, rgba(255, 190, 110, .95) 0 38%, rgba(255, 160, 80, .35) 39% 100%); box-shadow: 0 0 12px rgba(255, 170, 90, .7); }
.cell.bubble.warm { background: radial-gradient(circle, #fff3d6 0 40%, rgba(255, 190, 110, .8) 41% 100%); }
.cell.here::before { content: ''; position: absolute; inset: 22%; z-index: 1; transform: rotate(45deg); background: #fff; border: 2px solid var(--night); box-shadow: 0 0 10px #fff; }
.cell.here { color: transparent; }

.frost { display: flex; align-items: center; gap: 4px; }
.frost::before { content: 'Froid'; margin-right: 6px; font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.frost i { width: 9px; height: 18px; border: 1px solid var(--line-strong); transition: background .25s, border-color .25s; }
.frost i.on { background: var(--frost); border-color: var(--frost); }
.frost i.on:nth-child(n+7) { background: #ff8f6a; border-color: #ff8f6a; }
.storm-pad { display: flex; gap: 4px; }
.storm-pad button { width: 34px; height: 34px; padding: 0; cursor: pointer; background: transparent; border: 1px solid var(--line-strong); font-size: 1rem; color: var(--ink); transition: background .2s, color .2s, border-color .2s; }
.storm-pad button:hover:not(:disabled) { background: #fff; color: var(--night); border-color: #fff; }
.storm-pad button:disabled { opacity: .35; cursor: default; }

/* ---------- Sécurité de la Crypte ---------- */
.sec-board { position: relative; display: grid; gap: 10px; margin: 16px 24px 0; padding: 14px; border: 1px solid var(--line); background: linear-gradient(160deg, #101722, #080b12); }
.sec-timer { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--bray); transform-origin: 0 50%; animation: sec-timer 25s linear forwards; }
.sec-timer[hidden] { display: none; }
@keyframes sec-timer { to { transform: scaleX(0); } }
.sec-floor { padding: 10px 12px 14px; border: 1px solid var(--line); transition: opacity .4s, border-color .4s; }
.sec-floor-name { margin: 0 0 10px; font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.sec-row { display: flex; gap: 10px; }
.sec-side { flex: 1; min-width: 0; padding: 10px; }
.sec-side--light { background: linear-gradient(180deg, #dfe9f2, #b9c9d8); color: #1a2433; }
.sec-side--dark { background: linear-gradient(180deg, #1c2434, #111724); color: var(--ink); }
.sec-side-name { margin: 0 0 10px; font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.sec-fuses, .sec-pads, .sec-lights { display: flex; justify-content: space-around; gap: 6px; }
.sec-lights { margin-bottom: 12px; }
/* au sous-sol, on regarde les salles par l'autre côté : gauche et droite s'inversent */
.sec-board[data-phase="operate"] .sec-floor--down .sec-row, .sec-board[data-phase="fuses"] .sec-floor--down .sec-row,
.sec-board[data-phase="operate"] .sec-floor--down .sec-pads, .sec-board[data-phase="fuses"] .sec-floor--down .sec-pads,
.sec-board[data-phase="operate"] .sec-floor--down .sec-lights, .sec-board[data-phase="fuses"] .sec-floor--down .sec-lights { flex-direction: row-reverse; }
.sec-board[data-phase="operate"] .sec-floor--down, .sec-board[data-phase="fuses"] .sec-floor--down { border-color: var(--bray); }
.sec-board[data-phase="operate"] .sec-floor--down .sec-floor-name::after, .sec-board[data-phase="fuses"] .sec-floor--down .sec-floor-name::after { content: ' · vue inversée'; color: var(--bray); }
.sec-board[data-phase="operate"] .sec-floor--up, .sec-board[data-phase="scan"] .sec-floor--up { opacity: .45; }

.fuse { display: grid; place-items: center; width: clamp(34px, 9%, 54px); min-width: 34px; aspect-ratio: 3 / 5; padding: 0; cursor: default; border: 2px solid currentColor; border-radius: 8px; background: rgba(0, 0, 0, .18); color: inherit; transition: border-color .25s, box-shadow .25s, opacity .4s; }
.fuse i { width: 40%; height: 62%; border-radius: 4px; background: var(--bray); box-shadow: 0 0 12px rgba(255, 143, 90, .8); }
.fuse:not(:disabled) { cursor: crosshair; }
.fuse:not(:disabled):hover, .fuse:not(:disabled):focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(255, 143, 90, .45); }
.fuse.blown { opacity: .4; }
.fuse.blown i { background: #3a4252; box-shadow: none; }
.sec-light { width: 14px; height: 14px; border-radius: 50%; border: 1px solid currentColor; opacity: .35; }
.sec-light.on { opacity: 1; background: #ffd64a; border-color: #ffd64a; box-shadow: 0 0 12px 3px rgba(255, 214, 74, .8); }
.sec-board:not([data-phase="fuses"]) .sec-lights { visibility: hidden; }
.pad { width: clamp(26px, 13%, 44px); aspect-ratio: 1; padding: 0; cursor: default; border: 2px solid currentColor; background: rgba(0, 0, 0, .2); color: inherit; opacity: .8; transition: background .25s, box-shadow .25s, border-color .25s; }
.pad:not(:disabled) { cursor: crosshair; }
.pad:not(:disabled):hover, .pad:not(:disabled):focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(255, 143, 90, .45); }
.pad.glow { opacity: 1; background: #ffd64a; border-color: #ffd64a; box-shadow: 0 0 14px 3px rgba(255, 214, 74, .8); }
.pad.hit { opacity: 1; background: #ff5a4a; border-color: #ff5a4a; }

@media (max-width: 680px) {
  .storm-field { gap: 2px; margin-inline: 16px; padding: 6px; }
  .sec-board { margin-inline: 16px; padding: 10px; }
  .sec-row { gap: 6px; }
  .sec-side { padding: 8px 6px; }
}