/* Le bassin d'Hellas — plateaux des mini-jeux : l'arène du Protocole Intensification, la carte
   des nœuds dormants et le terminal d'Elsie Bray. Le cadre vient de css/components/game.css. */

.secrets-sec { background: radial-gradient(ellipse 60% 45% at 30% 30%, rgba(159, 208, 232, .07), transparent 70%); }
.protocol-sec .now-grid { margin-bottom: 28px; }

/* ---------- Protocole Intensification ---------- */
.ep-bosses { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 16px 24px 0; }
.ep-bosses .chip { display: flex; align-items: center; gap: 10px; padding: 7px 10px; cursor: pointer; text-align: left; background: transparent; border: 1px solid var(--line-strong); font: inherit; color: var(--ink); transition: border-color .2s, background .2s, opacity .2s; }
.ep-bosses .chip img { flex: none; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .25); }
.ep-bosses .chip span { display: grid; font-size: .66rem; line-height: 1.25; color: var(--muted); }
.ep-bosses .chip b { font-size: .8rem; font-weight: 700; color: var(--pearl); }
.ep-bosses .chip:not(:disabled):hover, .ep-bosses .chip:focus-visible { outline: 0; border-color: #fff; }
.ep-bosses .chip[aria-checked="true"] { border-color: var(--mind); background: rgba(255, 122, 69, .12); }
.ep-bosses .chip:disabled { cursor: default; }
.ep-bosses .chip:disabled:not([aria-checked="true"]) { opacity: .4; }
.ep-rule { margin: 0; padding: 12px 24px 14px; font-size: .86rem; line-height: 1.5; color: var(--muted); }

.arena { position: relative; aspect-ratio: 16 / 8; margin: 14px 24px 0; overflow: hidden; border: 1px solid var(--line); background: #0a0706; user-select: none; -webkit-user-select: none; }
.arena > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(.8); }
.arena-tower { position: absolute; left: 50%; top: 0; bottom: 38%; width: 5px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(255, 122, 69, .95)); box-shadow: 0 0 22px 5px rgba(255, 122, 69, .55); opacity: .25; transition: opacity .6s; }
.arena:not([data-phase="idle"]) .arena-tower { opacity: 1; animation: tower-beam 2.4s ease-in-out infinite; }
@keyframes tower-beam { 50% { box-shadow: 0 0 34px 9px rgba(255, 122, 69, .75); } }
.arena-field { position: absolute; inset: 0; cursor: crosshair; }
.arena.blast::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 62%, rgba(255, 160, 110, .95), rgba(255, 59, 47, .5) 30%, transparent 62%); animation: blast .6s ease-out forwards; }
@keyframes blast { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.5); } }

/* la Ruche de Nokris : blanche de givre, l'œil vert */
.hive { position: absolute; left: var(--x); top: var(--y); width: clamp(26px, 5.2%, 42px); aspect-ratio: 3 / 4; padding: 0; cursor: crosshair; transform: translate(-50%, -50%); border: 0; background: none; animation: hive-in .45s var(--ease) backwards; }
.hive::before { content: ''; position: absolute; inset: 0; clip-path: polygon(50% 0, 70% 12%, 96% 4%, 82% 30%, 100% 52%, 78% 60%, 84% 100%, 58% 100%, 50% 76%, 42% 100%, 16% 100%, 22% 60%, 0 52%, 18% 30%, 4% 4%, 30% 12%); background: linear-gradient(180deg, #eef4f7, #7f96a3 70%, #3c4a54); }
.hive::after { content: ''; position: absolute; left: 34%; right: 34%; top: 20%; height: 9%; border-radius: 50%; background: #b9ff5a; box-shadow: 0 0 10px 3px rgba(185, 255, 90, .8); }
@keyframes hive-in { from { opacity: 0; transform: translate(-50%, -30%) scale(.5); } }
.hive:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hive--blade::before { background: linear-gradient(180deg, #ffe9b0, #c98a2b 70%, #5a3a10); }
.hive--blade::after { background: #fff; box-shadow: 0 0 12px 4px rgba(255, 220, 140, .9); }
.hive--battery::before { background: linear-gradient(180deg, #e6f6ff, #5fb4e8 70%, #1d4f73); }
.hive--battery::after { background: #fff; box-shadow: 0 0 12px 4px rgba(120, 200, 255, .9); }
.hive--cursed::before { background: linear-gradient(180deg, #f3ffe0, #9fd14a 70%, #3d5a12); }
.hive--cursed { animation: hive-in .45s var(--ease) backwards, cursed-walk 4s linear forwards; }
@keyframes cursed-walk { to { left: 50%; top: 30%; } }

.hive--boss { width: clamp(64px, 13%, 108px); z-index: 2; }
.hive--boss::before { background: linear-gradient(180deg, #2a2f38, #0d0f14); filter: drop-shadow(0 0 10px rgba(185, 255, 90, .5)); }
.hive--boss::after { left: 38%; right: 38%; height: 7%; }
.boss-name { position: absolute; left: 50%; bottom: calc(100% + 16px); width: max-content; transform: translateX(-50%); font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px #000; }
.boss-hp { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); height: 5px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(6, 10, 22, .8); }
.boss-hp::after { content: ''; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--hp, 1)); background: var(--exotic); transition: transform .2s; }
.hive--boss.struck { animation: boss-struck .25s; }
@keyframes boss-struck { 40% { transform: translate(-48%, -52%) scale(1.06); filter: brightness(1.8); } }
.hive--boss.immune { animation: boss-immune .4s; }
@keyframes boss-immune { 50% { filter: drop-shadow(0 0 16px #fff) brightness(1.4); } }
/* Damkath : l'excroissance ne se voit que de dos */
.arena[data-turned="true"] .hive--boss::after { left: 30%; right: 30%; top: 40%; height: 20%; background: #ff8a3d; box-shadow: 0 0 16px 6px rgba(255, 138, 61, .85); }
.arena[data-sword="true"] .arena-field { cursor: cell; }
.arena[data-super="true"] .hive--boss::before { filter: drop-shadow(0 0 16px rgba(255, 220, 120, .95)); }

/* ---------- Nœuds dormants ---------- */
.nodes-board { position: relative; aspect-ratio: 16 / 9; margin: 16px 24px 0; overflow: hidden; border: 1px solid var(--line); background: #070a12; }
.nodes-board > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(.7); }
.map-label { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); font-size: clamp(.5rem, 1.5vw, .66rem); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, .72); text-shadow: 0 1px 6px #000; pointer-events: none; }
.nodes-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(6, 1fr); }
.cell { padding: 0; cursor: crosshair; background: none; border: 1px solid rgba(255, 255, 255, .06); transition: background .2s, border-color .2s; }
.cell:hover, .cell:focus-visible { outline: 0; background: rgba(255, 122, 69, .16); border-color: rgba(255, 122, 69, .7); }
.cell.probed { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); }
.nodes-pins { position: absolute; inset: 0; pointer-events: none; }
.node-pin { position: absolute; left: var(--x); top: var(--y); width: 16px; height: 26px; transform: translate(-50%, -50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(180deg, #fff, var(--mind)); filter: drop-shadow(0 0 8px var(--mind)); animation: pin-in .5s var(--ease) backwards; }
@keyframes pin-in { from { opacity: 0; transform: translate(-50%, -120%); } }
.nodes-hint { padding: 6px 10px; border: 1px solid var(--line-strong); background: #0b0d14; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .78rem; color: var(--mind-hi); overflow-wrap: anywhere; }
.signal { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.signal i { width: 5px; height: 20%; background: rgba(255, 255, 255, .18); transition: height .3s, background .3s; }
.signal i.on { background: var(--mind); box-shadow: 0 0 8px rgba(255, 122, 69, .7); }
.signal i:nth-child(2) { height: 28%; } .signal i:nth-child(3) { height: 36%; } .signal i:nth-child(4) { height: 44%; } .signal i:nth-child(5) { height: 52%; }
.signal i:nth-child(6) { height: 60%; } .signal i:nth-child(7) { height: 70%; } .signal i:nth-child(8) { height: 80%; } .signal i:nth-child(9) { height: 90%; } .signal i:nth-child(10) { height: 100%; }

/* ---------- Terminal d'Elsie Bray ---------- */
.term { height: 330px; margin: 16px 24px 0; padding: 16px 18px; overflow-y: auto; border: 1px solid rgba(159, 208, 232, .3); background: linear-gradient(180deg, rgba(159, 208, 232, .05), transparent 30%), #05080d; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .82rem; line-height: 1.55; color: #bfe3f2; }
.term-line { margin: 0; animation: term-in .25s ease backwards; }
@keyframes term-in { from { opacity: 0; transform: translateY(4px); } }
.term-line--cmd { margin-top: 6px; color: #fff; }
.term-line--cmd::before { content: '> '; color: var(--mind); }
.term-line--err { color: #ff8a73; }
.term.done .term-line:last-child::after { content: ' ▮'; animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }

@media (max-width: 900px) {
  .ep-bosses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .arena { aspect-ratio: 4 / 3; margin-inline: 16px; }
  .ep-bosses, .nodes-board, .term { margin-inline: 16px; }
  .ep-rule { padding-inline: 16px; }
  .nodes-board { aspect-ratio: 4 / 3; }
  .term { height: 300px; font-size: .74rem; }
}