/* La Fêlure: the crack in the master's arena, the islands of the descent, the depth at the end. */
.fel-screen { display: flex; flex-direction: column; gap: 10px; }
.fel-frame { position: relative; border: 2px solid #2e2244; border-radius: 6px; overflow: hidden; background: #0b0812; box-shadow: 0 0 0 2px #0b0812, 0 6px 24px rgba(240, 160, 48, .12); }
.fel-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.fel-note { text-align: center; color: #b8a8d8; font-size: .85rem; margin: 0; }
.fel-crack .row-buttons { justify-content: center; }
.fel-go { background: linear-gradient(#f0a030, #c0621c); border-color: #ffd060; color: #1b1428; }

.fel-head { display: flex; align-items: center; gap: 10px; }
.fel-title { display: flex; flex-direction: column; line-height: 1; }
.fel-title small { font-family: Pixelify, sans-serif; color: #8a78b4; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.fel-title b { font-family: Pixelify, sans-serif; font-size: 1.5rem; color: #ffd060; text-shadow: 0 2px 0 #7a3410; }
.fel-mods { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.fel-mod { font: inherit; font-size: .72rem; padding: 2px 7px; border-radius: 3px; border: 1px solid #c0621c; background: rgba(122, 52, 16, .35); color: #ffd060; }

.fel-map { touch-action: manipulation; }
.fel-node { position: absolute; transform: translate(-50%, -50%); width: 13%; aspect-ratio: 1; min-width: 34px; border-radius: 50%; border: 0; background: transparent;
  color: #ffd060; font-size: 1.15rem; text-shadow: 0 0 6px #c0621c, 0 2px 0 #0b0812; padding: 0; }
.fel-node.elite { color: #ff8a6a; }
.fel-node.seuil { font-size: 1.5rem; width: 18%; }
.fel-node.far { color: #4a3a66; text-shadow: none; }
.fel-node.done { color: #342a3a; text-shadow: none; }
.fel-node.open { animation: fel-call 1.6s ease-in-out infinite; }
.fel-node:disabled { cursor: default; }
@keyframes fel-call { 50% { transform: translate(-50%, -58%); } }
@media (prefers-reduced-motion: reduce) { .fel-node.open { animation: none; } }

.fel-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #b8a8d8; font-size: .85rem; }
.fel-admin { flex: 0 0 auto; width: auto; border-style: dashed; color: #ffd060; padding-left: 10px; padding-right: 10px; }

.fel-end { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; margin: 8px 0; border-radius: 6px;
  background: linear-gradient(#0b0812, #1b1428); border: 1px solid #4a3a66; }
.fel-end > small:first-child { font-family: Pixelify, sans-serif; color: #8a78b4; text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
.fel-depth { font-family: Pixelify, sans-serif; font-size: 1.6rem; color: #ffd060; text-shadow: 0 2px 0 #7a3410; }
.fel-board { list-style: none; counter-reset: fel; margin: 8px 0 0; padding: 0; width: 100%; }
.fel-board li { counter-increment: fel; display: grid; grid-template-columns: 1.6em 1fr auto auto; gap: 6px; align-items: baseline; padding: 3px 4px; border-top: 1px solid #2e2244; font-size: .85rem; }
.fel-board li::before { content: counter(fel); color: #8a78b4; font-family: PixDigits, monospace; }
.fel-board li.me { background: rgba(240, 160, 48, .12); }
.fel-board li b { color: #ffd060; font-weight: normal; }
.fel-board li small { color: #8a78b4; }
.fel-foot .btn { width: auto; flex: 0 0 auto; padding-left: 18px; padding-right: 18px; }

/* the fall between two fights */
.fel-fall { cursor: pointer; touch-action: manipulation; }
.fel-next { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; color: #ffd060; font-size: 1.05rem; letter-spacing: .04em; text-shadow: 0 2px 0 #0b0812, 0 0 10px rgba(240, 160, 48, .5); pointer-events: none; }
.fel-pick { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0; }
.fel-pick .btn { width: 48px; flex: 0 0 auto; }
.fel-pick-val { display: inline-block; min-width: 110px; text-align: center; font-size: 1.1rem; }
/* The room's name as the group lands in it: it fades in, holds, and fades before the fight starts. */
.fel-title-in { position: absolute; left: 0; right: 0; top: 30%; display: grid; justify-items: center; gap: 2px; padding: 10px 12px; line-height: 1.15; text-align: center; pointer-events: none; z-index: 6;
  background: linear-gradient(90deg, transparent, rgba(11, 8, 18, .78) 18%, rgba(11, 8, 18, .78) 82%, transparent); animation: fel-title var(--hold, 2s) ease-in-out forwards; }
.fel-title-in small { color: #b8a8d8; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.fel-title-in > b { color: #ffd060; font-size: 1.25rem; letter-spacing: .05em; text-shadow: 0 2px 0 #0b0812, 0 0 12px rgba(240, 160, 48, .55); }
.fel-title-in > span { color: #ece4f2; font-size: .8rem; }
.fel-title-in.seuil > b { color: #fff4b8; }
.fel-title-in p { margin: 4px 0 0; max-width: 30ch; color: #d8c8f0; font-size: .66rem; line-height: 1.3; }
.fel-title-in p b { color: #f6757a; }
@keyframes fel-title { 0% { opacity: 0; transform: translateY(6px); } 14% { opacity: 1; transform: none; } 78% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fel-title-in { animation: fel-title var(--hold, 2s) linear forwards; } }
.fel-gate { width: min(100%, calc(56dvh * 176 / 196)); }
.fel-void { min-height: 60dvh; background: #0b0812; border-radius: 10px; }
/* l'Enchaîné's chains: a one-line plate (name and effects side by side), so it covers less of the beast */
.plate.foe.chain { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3px; width: 17%; }
.plate.foe.chain > :not(.ename):not(.estat) { grid-column: 1 / -1; }
.plate.foe.chain .estat { white-space: nowrap; }
.plate.foe.chain .ehint:empty { display: none; }
/* a halt down there: what the group found, and the two ways to answer it */
.fel-halte { display: grid; gap: 6px; padding: 12px 14px; border: 2px solid #2e2244; border-radius: 8px; background: #120e18; color: #ece4f2; }
.fel-halte > small { color: #8a78b4; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.fel-halte > b { color: #ffd060; font-size: 1.15rem; }
.fel-halte p { margin: 0; line-height: 1.4; }
.fel-halte .row-buttons { justify-content: center; margin-top: 4px; }

/* the Stigmates every foe bears down here: a seal each, top left of the field */
.fel-stig { position: absolute; left: 6px; top: 6px; display: flex; gap: 5px; z-index: 5; }
.bossbar .fel-stig { position: static; margin-top: 4px; }
.fel-stig button { width: 26px; height: 26px; padding: 3px; border: 1px solid #f0a030; border-radius: 6px; background: #1b1428; box-shadow: 0 0 6px rgba(240,160,48,.45), inset 0 0 0 1px #000; cursor: pointer; }
.fel-stig button canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.fel-stig-enrage { border-color: #ff6a3a !important; }
.fel-stig-venimeux { border-color: #6fd04a !important; box-shadow: 0 0 6px rgba(111,208,74,.45), inset 0 0 0 1px #000 !important; }
.fel-stig-cuirasse { border-color: #c8d4e0 !important; box-shadow: 0 0 6px rgba(200,212,224,.4), inset 0 0 0 1px #000 !important; }
.fel-stig-rapide { border-color: #ffe060 !important; }
.fel-stig-regenerant { border-color: #5fd07a !important; box-shadow: 0 0 6px rgba(95,208,122,.45), inset 0 0 0 1px #000 !important; }
/* the heroes' bars at a halt of the Fêlure: they move slowly enough to be seen */
.fel-plate { width: 18%; transform: translateX(-50%); padding: 2px 3px; display: flex; flex-direction: column; gap: 2px; }
.fel-plate .bar { height: 4px; border-radius: 2px; }
.fel-plate .bar.pv { height: 7px; }
.fel-pop { font-size: 1.25rem; animation: felPop 2s ease-out forwards; }
.fel-pop.crit { font-size: 1.5rem; }
@keyframes felPop { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.7); } 10% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); } 20% { transform: translate(-50%, -10px) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -26px); } }
.fel-plate .bar i { transition: width .9s ease-out; }
.fel-board li:has(.fel-drop) { grid-template-columns: 1.6em 1fr auto auto auto; }
.fel-drop { padding: 0 6px; font-size: .7rem; }