/* Néomuna — les deux mini-jeux : le fuseau d'Osiris (js/spindle.js) et le protocole d'effraction
   (js/breach.js). Le cadre commun (.game, .game-hud…) est dans css/components/game.css. */

#spindle-time.is-urgent, #breach-time.is-urgent { color: #ff9a9a; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ---------- Le fuseau ---------- */
.spindle { display: grid; grid-template-columns: 46px minmax(0, 1fr) 150px; gap: 18px; align-items: stretch; padding: clamp(16px, 3vw, 26px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(77, 255, 143, .08), transparent 70%), linear-gradient(180deg, #06120c, #040907); }
.sp-gauge { position: relative; min-height: 190px; border: 1px solid rgba(77, 255, 143, .35); background: linear-gradient(0deg, rgba(77, 255, 143, .05), rgba(255, 91, 91, .18) 92%, rgba(255, 91, 91, .45)); }
.sp-gauge::after { content: ''; position: absolute; left: 0; right: 0; bottom: 96%; height: 1px; background: #ff7a7a; box-shadow: 0 0 6px #ff7a7a; }
.sp-band { position: absolute; left: 3px; right: 3px; border: 1px solid var(--strand); background: rgba(77, 255, 143, .22); box-shadow: 0 0 14px rgba(77, 255, 143, .45); transition: bottom .05s linear; }
.sp-needle { position: absolute; left: -6px; right: -6px; height: 3px; margin-bottom: -1px; background: #fff; box-shadow: 0 0 10px #fff; transition: bottom .05s linear; }
.spindle.is-flowing .sp-needle { background: var(--strand-hi); box-shadow: 0 0 14px var(--strand); }
.sp-stage { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sp-canvas { display: block; width: 100%; height: 150px; border: 1px solid rgba(77, 255, 143, .2); background: radial-gradient(ellipse at 50% 50%, rgba(77, 255, 143, .05), transparent 70%), #020604; }
.sp-progress { height: 6px; background: rgba(255, 255, 255, .08); }
.sp-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--strand), #c8ffe0); box-shadow: 0 0 12px var(--strand); transition: width .1s linear; }
.sp-dots { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sp-dots li { flex: 1; padding: 5px 8px; border: 1px solid rgba(77, 255, 143, .25); font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-align: center; text-transform: uppercase; color: var(--muted); }
.sp-dots li.is-done { border-color: var(--strand); background: rgba(77, 255, 143, .14); color: var(--strand-hi); box-shadow: 0 0 10px rgba(77, 255, 143, .3); }
.sp-pinch { display: grid; place-content: center; gap: 4px; padding: 0 12px; border: 1px solid var(--strand); border-radius: 50%; aspect-ratio: 1; align-self: center; background: radial-gradient(circle, rgba(77, 255, 143, .25), rgba(77, 255, 143, .04) 70%); color: var(--strand-hi); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .15s, box-shadow .2s, background .2s; }
.sp-pinch span { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sp-pinch small { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sp-pinch:disabled { opacity: .35; cursor: default; }
.spindle.is-held .sp-pinch { transform: scale(.94); background: radial-gradient(circle, rgba(77, 255, 143, .6), rgba(77, 255, 143, .1) 70%); box-shadow: 0 0 30px rgba(77, 255, 143, .6); }
.spindle[data-phase="done"] .sp-canvas { border-color: var(--strand); box-shadow: 0 0 24px rgba(77, 255, 143, .35); }

/* ---------- Le protocole d'effraction ---------- */
.breach { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 30px); padding: clamp(16px, 3vw, 26px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: repeating-linear-gradient(0deg, rgba(63, 232, 255, .03) 0 1px, transparent 1px 4px), linear-gradient(180deg, #0a0614, #05040b); font-family: var(--mono); }
.bp-label { margin: 0 0 8px; font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ark-hi); }
.bp-side .bp-label:not(:first-child) { margin-top: 18px; }
.bp-grid { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; padding: 10px; border: 1px solid rgba(63, 232, 255, .35); background: rgba(63, 232, 255, .04); }
.bp-cell { aspect-ratio: 1.4; padding: 0; border: 1px solid rgba(63, 232, 255, .14); background: transparent; color: rgba(214, 251, 255, .5); font-family: var(--mono); font-size: clamp(.8rem, 2.4vw, 1.05rem); font-weight: 700; letter-spacing: .06em; cursor: default; transition: background .15s, color .15s, box-shadow .15s; }
.bp-cell.is-axis { border-color: rgba(63, 232, 255, .6); background: rgba(63, 232, 255, .12); color: var(--neon-hi); cursor: pointer; }
.bp-cell.is-axis:hover, .bp-cell.is-axis:focus-visible { background: var(--neon); color: #04050c; box-shadow: 0 0 16px var(--neon); }
.bp-cell.is-next { background: rgba(255, 107, 240, .1); color: var(--ark-hi); }
.bp-cell.is-used { color: rgba(255, 255, 255, .18); }
.breach[data-phase="idle"] .bp-cell, .breach[data-phase="over"] .bp-cell { opacity: .55; }
.bp-buffer { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.bp-slot { display: grid; place-items: center; aspect-ratio: 1; border: 1px dashed rgba(255, 107, 240, .4); font-size: .78rem; font-weight: 700; color: var(--ark-hi); }
.bp-slot.is-filled { border-style: solid; background: rgba(255, 107, 240, .14); box-shadow: 0 0 8px rgba(255, 107, 240, .3); }
.bp-daemons { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bp-daemon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .12); }
.bp-seq { display: flex; gap: 4px; }
.bp-seq b { padding: 2px 6px; border: 1px solid rgba(63, 232, 255, .4); font-size: .78rem; color: var(--neon-hi); }
.bp-name { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bp-daemon.is-done { border-color: var(--strand); background: rgba(77, 255, 143, .1); }
.bp-daemon.is-done .bp-seq b { border-color: var(--strand); color: var(--strand-hi); }
.bp-daemon.is-done .bp-name { color: var(--strand-hi); }
.bp-daemon.is-done .bp-name::after { content: ' · téléversée'; }
.breach[data-phase="done"] .bp-grid { border-color: var(--strand); box-shadow: 0 0 24px rgba(77, 255, 143, .3); }

@media (max-width: 860px) {
  .spindle { grid-template-columns: 40px minmax(0, 1fr); }
  .sp-pinch { grid-column: 1 / -1; width: 140px; justify-self: center; }
  .breach { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .shake { animation: none; }
}