/* Hybrid (from Concept A) · live combat beat (prefix fac-) — wheel ported from combat-mockups-approved/a-spotlight.css */
.fac { position: relative; border-radius: 18px; padding: 16px; display: grid; gap: 12px;
  background: linear-gradient(180deg, rgba(30,26,23,.94), rgba(18,15,12,.96)), url('assets/stone-dark.png') center / 420px;
  border: 1px solid var(--gold-hair); box-shadow: inset 0 1px 0 rgba(255,239,213,.07), 0 30px 80px rgba(0,0,0,.6); }
.fac-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.fac-title span { display: block; font: 600 10.5px/1 var(--font-heading); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 6px; }
.fac-title b { font: 700 clamp(20px, 2vw, 28px)/1 var(--font-display); color: var(--gold); letter-spacing: .03em; }
.fac-seal { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 0;
  background: radial-gradient(circle at 50% 35%, #3a3026, #120f0c 72%); border: 2px solid rgba(212,175,55,.6); box-shadow: 0 0 0 5px rgba(12,10,8,.6), 0 0 30px rgba(212,175,55,.25); }
.fac-seal small { font: 700 9px/1 var(--font-heading); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dim); }
.fac-seal b { font: 700 28px/1 var(--font-display); color: var(--gold-bright); }
.fac-dice { justify-self: end; display: flex; gap: 8px; align-items: center; font: 600 10px/1 var(--font-heading); letter-spacing: .18em; text-transform: uppercase; color: var(--cream-faint); }
.fac-dice em { font-style: normal; display: grid; gap: 4px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--gold-faint); background: rgba(0,0,0,.25); }
.fac-dice em b { display: inline-flex; gap: 5px; align-items: center; font: 700 12px/1 var(--font-heading); letter-spacing: .06em; text-transform: none; color: var(--cream); }

.fac-init { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.fac-init::-webkit-scrollbar { display: none; }
.fac-ic { position: relative; flex: none; width: 66px; height: 86px; border-radius: 9px; overflow: hidden; border: 1px solid rgba(212,175,55,.2); background: #0d0b09; transition: transform .3s var(--ease-spring), border-color .3s; }
.fac-ic img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.fac-ic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(8,6,5,.92)); }
.fac-ic b { position: absolute; top: 4px; right: 4px; z-index: 2; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 6px; display: grid; place-items: center; font: 800 11px/1 var(--font-body); color: var(--cream); background: rgba(10,8,6,.82); }
.fac-ic span { position: absolute; left: 4px; right: 4px; bottom: 5px; z-index: 2; font: 700 9px/1.1 var(--font-heading); letter-spacing: .04em; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fac-ic.party { box-shadow: inset 0 -3px 0 #3fbf6a; }
.fac-ic.foe { box-shadow: inset 0 -3px 0 #c41e3a; }
.fac-ic.now { width: 92px; border: 2px solid var(--gold); box-shadow: 0 0 22px rgba(212,175,55,.45); }
.fac-ic.deck em { position: absolute; top: 0; left: 0; z-index: 3; padding: 3px 5px; font: 700 7.5px/1 var(--font-heading); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: #2a1c06; background: linear-gradient(180deg, #ecd282, #c19a3c); border-bottom-right-radius: 6px; }
.fac-ic.dead { filter: grayscale(1) brightness(.45); }

.fac-main { display: grid; grid-template-columns: 290px 1fr 300px; gap: 12px; min-height: 430px; }
.fac-main > section { border-radius: 14px; background: rgba(10,8,6,.45); border: 1px solid rgba(212,175,55,.14); padding: 14px; min-width: 0; }
.fac-lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 700 10.5px/1 var(--font-heading); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 10px; }
.fac-lbl em { font: italic 400 13px/1 var(--font-lore); letter-spacing: 0; text-transform: none; color: var(--cream-faint); }

.fac-spot { display: grid; gap: 12px; align-content: start; }
.fac-hero { position: relative; height: 200px; border-radius: 11px; overflow: hidden; border: 1px solid var(--gold-hair); }
.fac-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.fac-hero.foe img { object-position: center 30%; }
.fac-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(8,6,5,.95)); }
.fac-hero-tx { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; display: grid; gap: 3px; }
.fac-hero-tx small { font: 700 9.5px/1 var(--font-heading); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.fac-hero-tx b { font: 700 22px/1.05 var(--font-display); color: var(--cream); }
.fac-hero-tx em { font: italic 15px/1.2 var(--font-lore); color: var(--cream-dim); }
.fac-stats { display: flex; gap: 10px; align-items: center; }
.fac-hpring { position: relative; width: 74px; height: 74px; display: grid; place-items: center; align-content: center; }
.fac-hpring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.fac-hpring .trk, .fac-tok .trk { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 6; }
.fac-hpring .hp { fill: none; stroke: #3fbf6a; stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray .5s var(--ease-out); }
.fac-hpring b { font: 800 22px/1 var(--font-body); color: var(--cream); }
.fac-hpring small { font-size: 10px; color: var(--cream-faint); }
.fac-ac { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--gold-faint); display: grid; gap: 4px; }
.fac-ac small { font: 700 9px/1 var(--font-heading); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dim); }
.fac-ac b { font: 800 20px/1 var(--font-body); color: var(--cream); display: flex; gap: 6px; align-items: center; }
.fac-ac iconify-icon { color: var(--gold); font-size: 17px; }
.fac-atks { display: grid; gap: 7px; }
.fac-atk { display: flex; gap: 10px; align-items: center; text-align: left; padding: 9px 11px; border-radius: 11px; border: 1px solid rgba(212,175,55,.3); background: linear-gradient(180deg, #2c261f, #1b1713); transition: transform .2s var(--ease-spring), border-color .2s, box-shadow .2s; }
.fac-atk:hover { transform: scale(1.02); border-color: var(--gold); box-shadow: 0 0 18px rgba(212,175,55,.22); }
.fac-atk > iconify-icon { font-size: 22px; color: var(--gold); flex: none; }
.fac-atk span { display: grid; gap: 3px; }
.fac-atk b { font: 700 14px/1 var(--font-heading); letter-spacing: .05em; color: var(--cream); }
.fac-atk em { font: 500 12px/1.2 var(--font-body); font-style: normal; color: var(--cream-faint); }
.fac-tip { margin: 0; display: flex; gap: 8px; font: italic 14.5px/1.35 var(--font-lore); color: var(--cream-dim); }
.fac-tip iconify-icon { flex: none; color: var(--gold); margin-top: 2px; }
.fac-end-note { display: grid; gap: 12px; }
.fac-end-note p { margin: 0; font: italic 16px/1.45 var(--font-lore); color: var(--cream); }

.fac-field { display: grid; align-content: start; gap: 4px; }
.fac-foes, .fac-party { display: flex; flex-wrap: wrap; gap: 14px 16px; justify-content: center; padding: 6px 0 14px; }
.fac-party { padding-bottom: 0; }
.fac-tok { position: relative; width: var(--s); background: none; border: 0; padding: 0; display: grid; justify-items: center; gap: 3px; transition: transform .25s var(--ease-spring); }
.fac-tok:hover { transform: scale(1.06); }
.fac-tok .pic { width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; display: block; border: 2px solid #120f0c; box-shadow: 0 8px 18px rgba(0,0,0,.6); }
.fac-tok .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; transform: scale(1.25); }
.fac-tok.party .pic img { object-position: center 15%; transform: scale(1.1); }
.fac-tok svg { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); transform: rotate(-90deg); pointer-events: none; }
.fac-tok .hp { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray .5s var(--ease-out), stroke .3s; }
.fac-tok .nm { font: 700 11px/1.1 var(--font-heading); letter-spacing: .04em; color: var(--cream); white-space: nowrap; }
.fac-tok .hpn { font: 700 11px/1 var(--font-body); color: var(--cream-faint); font-variant-numeric: tabular-nums; }
.fac-tok.bloodied .pic { box-shadow: 0 0 0 2px rgba(255,77,94,.5), 0 0 18px rgba(196,30,58,.55); animation: pulse-red 1.8s infinite; }
.fac-tok.active .pic { box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(212,175,55,.6); }
.fac-tok .conds { position: absolute; top: -4px; right: -6px; display: flex; gap: 2px; }
.fac-tok .conds i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #17130f; border: 1px solid rgba(212,175,55,.35); font-size: 13px; }
.fac-tok .tmp { position: absolute; top: -4px; left: -6px; padding: 3px 5px; border-radius: 7px; font: 800 10px/1 var(--font-body); color: #d4ecff; background: #12283d; border: 1px solid var(--temp); }
.fac.targeting .fac-tok.foe.target .pic { box-shadow: 0 0 0 3px var(--gold-bright), 0 0 28px rgba(243,212,122,.7); animation: pulse-gold 1.2s infinite; }
.fac:not(.coach).targeting .fac-tok.foe.target .pic { cursor: crosshair; }
.fac.targeting .fac-tok.party { opacity: .45; }
.fac-fallen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; min-height: 0; padding-bottom: 8px; font: 700 10px/1 var(--font-heading); letter-spacing: .16em; text-transform: uppercase; color: var(--cream-faint); }
.fac-fallen:empty { display: none; }
.fac-fallen span { display: inline-flex; gap: 5px; align-items: center; }
.fac-fallen i { font-style: normal; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); letter-spacing: .04em; text-transform: none; font: 600 11px/1 var(--font-heading); color: var(--cream-faint); }
.fac-fallen img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; filter: grayscale(1) brightness(.6); }

.fac-chron { display: flex; flex-direction: column; min-height: 0; }
.fac-log { flex: 1; min-height: 0; max-height: 400px; overflow: auto; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; scrollbar-color: rgba(212,175,55,.3) transparent; }
.fac-rd { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; font: 700 9.5px/1 var(--font-heading); letter-spacing: .25em; text-transform: uppercase; color: var(--gold-dim); }
.fac-rd::before, .fac-rd::after { content: ''; flex: 1; height: 1px; background: var(--gold-faint); }
.fac-le { display: grid; grid-template-columns: 16px 1fr; gap: 8px; padding: 4px 0; font: 14.5px/1.35 var(--font-lore); color: var(--cream-dim); }
.fac-le.fresh { animation: rise .4s var(--ease-out) both; color: var(--cream); }
.fac-le iconify-icon { margin-top: 3px; font-size: 13px; color: var(--gold-dim); }
.fac-le.damage iconify-icon, .fac-le.death iconify-icon { color: #e24a5e; }
.fac-le.crit { color: var(--gold-bright); } .fac-le.crit iconify-icon { color: var(--gold-bright); }
.fac-le.heal iconify-icon { color: var(--heal-bright); }
.fac-le.save iconify-icon, .fac-le.condition iconify-icon { color: #c9a7ff; }
.fac-le.turn, .fac-le.initiative { font-size: 12.5px; color: var(--cream-faint); }
.fac-le.death { color: #ffb3bd; font-style: italic; }
.fac-le.bloodied { color: #ffb070; }

.fac-dock { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(12,10,8,.75); border: 1px solid var(--gold-hair); }
.fac-now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fac-now img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 2px solid var(--gold); flex: none; }
.fac-now span { display: grid; gap: 3px; min-width: 0; }
.fac-now small { font: 700 9px/1 var(--font-heading); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dim); }
.fac-now b { font: 700 15px/1.1 var(--font-heading); color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fac-now .deck { padding-left: 14px; border-left: 1px solid var(--gold-faint); }
.fac-now .deck b { color: var(--cream-dim); font-size: 13px; }
.fac-dock .fac-spacer { flex: 1; }
.fac-dock .fac-undo { width: 44px; padding: 0; font-size: 18px; }
.fac-dock .fac-end { min-width: 180px; }

/* wheel (fixed, on body) */
.fac-veil { position: fixed; inset: 0; z-index: 870; background: radial-gradient(circle at var(--x) var(--y), rgba(0,0,0,.15), rgba(0,0,0,.55) 340px); opacity: 0; transition: opacity .2s; }
.fac-veil.show { opacity: 1; }
.fac-wheel { position: fixed; z-index: 880; width: 0; height: 0; }
.fac-wheel .hub { position: absolute; left: -84px; top: -84px; width: 168px; height: 168px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  background: radial-gradient(circle at 50% 30%, #3a3026, #17130f 72%); border: 2px solid rgba(212,175,55,.6); box-shadow: 0 0 0 6px rgba(12,10,8,.6), 0 0 50px rgba(212,175,55,.25), 0 20px 50px rgba(0,0,0,.6); animation: fac-hub .3s var(--ease-spring) both; }
@keyframes fac-hub { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fac-wheel .hub .nm { font: 700 12px/1.15 var(--font-heading); letter-spacing: .05em; color: var(--cream); max-width: 136px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fac-wheel .hub .hp { font: 700 11px/1 var(--font-body); color: var(--cream-faint); font-variant-numeric: tabular-nums; }
.fac-wheel .hub input { width: 100px; height: 42px; text-align: center; font: 800 22px/1 var(--font-body); color: var(--cream); background: rgba(0,0,0,.45); border: 1px solid rgba(212,175,55,.35); border-radius: 10px; outline: none; -moz-appearance: textfield; }
.fac-wheel .hub input::-webkit-inner-spin-button, .fac-wheel .hub input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fac-wheel .hub input::placeholder { font-size: 15px; font-weight: 600; color: rgba(232,220,200,.35); }
.fac-wheel .hub input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.2); }
.fac-wheel .hub .keys { font: 500 9.5px/1.3 var(--font-body); color: var(--cream-faint); }
.fac-wheel .hub .back { background: none; border: 0; font: 600 11px/1 var(--font-body); color: var(--cream-faint); padding: 6px; }
.fac-wheel .hub .back:hover { color: var(--gold); }
.fac-wheel .spoke { position: absolute; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: radial-gradient(circle at 50% 30%, #3a3026, #1c1713); border: 1.5px solid rgba(212,175,55,.45); color: var(--cream); box-shadow: 0 8px 18px rgba(0,0,0,.55);
  transform: translate(0,0) scale(.3); opacity: 0; transition: transform .38s var(--ease-spring), opacity .2s, border-color .15s, box-shadow .15s; }
.fac-wheel.open .spoke { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 1; }
.fac-wheel .spoke:hover { border-color: var(--gold-bright); box-shadow: 0 0 22px rgba(212,175,55,.5), 0 8px 18px rgba(0,0,0,.55); transform: translate(var(--dx), var(--dy)) scale(1.12); }
.fac-wheel .spoke iconify-icon { font-size: 22px; }
.fac-wheel .spoke b { font: 800 16px/1 var(--font-body); }
.fac-wheel .spoke small { font: 700 8px/1 var(--font-heading); letter-spacing: .12em; color: var(--cream-dim); text-transform: uppercase; }
.fac-wheel .spoke.dmg b { color: #ff6a7c; }
.fac-wheel .spoke.heal { border-color: rgba(126,240,160,.5); } .fac-wheel .spoke.heal iconify-icon { color: var(--heal-bright); }
.fac-wheel .spoke.tmp iconify-icon { color: var(--temp); }
.fac-wheel .spoke.cond iconify-icon { color: #c9a7ff; }
.fac-wheel .spoke.kill iconify-icon { color: #ff6a7c; }
.fac-wheel .spoke.save { border-color: rgba(159,211,230,.45); } .fac-wheel .spoke.save iconify-icon { color: #9fd3e6; }
.fac-wheel .spoke.miss iconify-icon { color: var(--cream-dim); }
.fac-wheel .spoke.small { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.fac-wheel .spoke.on { background: radial-gradient(circle at 50% 30%, #5a3a70, #2a1838); border-color: #c9a7ff; box-shadow: 0 0 16px rgba(185,140,255,.55); }
.fac-wheel .tip-w { position: absolute; left: 0; top: 122px; transform: translateX(-50%); width: 260px; padding: 8px 12px; border-radius: 10px; background: rgba(12,10,8,.95); border: 1px solid var(--gold-hair); font-size: 12px; line-height: 1.4; color: var(--cream); text-align: center; pointer-events: none; opacity: 0; transition: opacity .15s; }
.fac-wheel .tip-w.show { opacity: 1; }
.fac-wheel .tip-w b { font-family: var(--font-heading); color: var(--gold); letter-spacing: .06em; }

@media (max-width: 1100px) {
  .fac-main { grid-template-columns: 260px 1fr; }
  .fac-chron { grid-column: 1 / -1; }
  .fac-log { max-height: 220px; }
}
@media (max-width: 720px) {
  .fac { padding: 12px; }
  .fac-top { grid-template-columns: 1fr auto; }
  .fac-dice { display: none; }
  .fac-main { grid-template-columns: 1fr; min-height: 0; }
  .fac-hero { height: 150px; }
  .fac-foes { gap: 12px; }
  .fac-tok { --s: 72px !important; }
  .fac-party .fac-tok { --s: 58px !important; }
  .fac-now .deck { display: none; }
  .fac-dock { position: sticky; bottom: 8px; z-index: 5; }
  .fac-dock .fac-end { min-width: 0; }
}

.fac-seal img { width: 54px; height: 54px; object-fit: contain; }

/* ── the coach: guided walkthrough (Peter 2026-10-03) ── */
.fac-coach { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 10px 8px 8px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,122,47,.14), rgba(20,17,14,.9) 45%); border: 1px solid var(--gold); box-shadow: 0 0 26px rgba(255,140,50,.18); }
.fac-coach[hidden] { display: none; }
.fac-coach-n { flex: none; padding: 7px 11px; border-radius: 999px; font: 700 11px/1 var(--font-heading); letter-spacing: .16em; text-transform: uppercase; color: #2a1c06; background: var(--btn-primary); }
.fac-coach-sp { flex: 1; }
.fac-coach p { margin: 0; flex: 1; min-width: 220px; font: 600 16.5px/1.35 var(--font-body); color: var(--cream); }
.fac-coach-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fac-coach-act .btn.ghost { color: var(--cream-dim); }
.fac.coach-done .fac-coach p { font: italic 19px/1.35 var(--font-lore); color: var(--gold-bright); }

/* everything but the one thing to tap is dimmed and disabled */
.fac.coach :is(.fac-hero, .fac-stats, .fac-atk, .fac-tip, .fac-tok, .fac-fallen, .fac-le, .fac-rd, .fac-ic, .fac-now, .fac-undo, .fac-end, .fac-call button, .fac-lbl) {
  opacity: .38; filter: saturate(.55); transition: opacity .3s, filter .3s; }
.fac.coach :is(.is-coach, .is-lit, .fac-call button.is-coach) { opacity: 1; filter: none; pointer-events: auto; position: relative; z-index: 3; }
.fac.coach .fac-le.is-lit { color: var(--cream); background: rgba(212,175,55,.08); border-radius: 8px; }
.fac.coach .fac-tok.target:not(.is-coach) .pic { animation: none; box-shadow: none; }

/* the guide layer: ring + hand (fingertip ON the target) + callout; clipped to the demo so nothing scrolls the page */
.fac-guide { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; border-radius: inherit; }
.fac-guide[hidden] { display: none; }
.fac-ring { position: absolute; border: 2px solid var(--gold-bright); border-radius: var(--r, 12px); box-shadow: 0 0 22px rgba(255,170,60,.55); animation: fac-ping 1.4s var(--ease-out) infinite; transition: left .5s var(--ease-out), top .5s var(--ease-out), width .5s var(--ease-out), height .5s var(--ease-out); }
@keyframes fac-ping { 0% { box-shadow: 0 0 0 0 rgba(243,212,122,.65), 0 0 22px rgba(255,170,60,.55); } 100% { box-shadow: 0 0 0 16px rgba(243,212,122,0), 0 0 22px rgba(255,170,60,.55); } }
.fac-hand { position: absolute; display: block; transition: left .5s var(--ease-out), top .5s var(--ease-out), transform .5s var(--ease-out); }
.fac-hand .g { display: block; width: 100%; height: 100%; animation: fac-bob 1.2s ease-in-out infinite; }
.fac-hand iconify-icon { display: block; width: 1em; height: 1em; color: #fff3d0; filter: drop-shadow(0 0 1.5px #3a2a08) drop-shadow(0 3px 5px rgba(0,0,0,.85)) drop-shadow(0 0 10px rgba(255,140,50,.55)); }
/* the bob runs along the finger: pulled back, then the tip touches */
@keyframes fac-bob { 0%, 100% { transform: translate(var(--bx, -5px), var(--by, -5px)); } 50% { transform: translate(0, 0); } }
.fac-bubble { position: absolute; pointer-events: auto; display: grid; gap: 6px; width: max-content; padding: 12px 14px 13px; border-radius: 12px; text-align: left;
  background: linear-gradient(180deg, #2c241c, #17120e); border: 1px solid var(--gold); box-shadow: 0 16px 34px rgba(0,0,0,.65), 0 0 24px rgba(255,140,50,.18);
  transition: left .45s var(--ease-out), top .45s var(--ease-out); animation: rise .35s var(--ease-out) both; }
.fac-bubble b { font: 700 15.5px/1.2 var(--font-heading); letter-spacing: .04em; color: var(--gold-bright); }
.fac-bubble i { font: italic 16px/1.4 var(--font-lore); color: var(--cream); }
.fac-bubble .btn { justify-self: start; margin-top: 4px; }
/* the notch, pointing at the target */
.fac-bubble::before { content: ''; position: absolute; width: 12px; height: 12px; background: #231c16; border: 1px solid var(--gold); transform: rotate(45deg); }
.fac-bubble[data-side="right"]::before { left: -7px; top: calc(var(--n) - 6px); border-top: 0; border-right: 0; }
.fac-bubble[data-side="left"]::before { right: -7px; top: calc(var(--n) - 6px); border-bottom: 0; border-left: 0; }
.fac-bubble[data-side="above"]::before { bottom: -7px; left: calc(var(--n) - 6px); border-top: 0; border-left: 0; background: #17120e; }
.fac-bubble[data-side="below"]::before { top: -7px; left: calc(var(--n) - 6px); border-bottom: 0; border-right: 0; background: #2c241c; }
.fac-lock-tip { position: absolute; z-index: 9; display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 8px; white-space: nowrap; font: 700 11px/1 var(--font-heading); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-bright); background: rgba(12,10,8,.96); border: 1px solid var(--gold-hair); box-shadow: 0 8px 18px rgba(0,0,0,.6); }
.fac-lock-tip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .fac-ring, .fac-hand .g, .fac-bubble { animation: none; } .fac-ring, .fac-hand, .fac-bubble { transition: none; } .fac-hand .g { transform: none; } }

/* the player's call: tap-chips, no typing */
.fac-callbox:empty { display: none; }
.fac-call { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 12px; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(212,175,55,.35); background: rgba(0,0,0,.28); }
.fac-call-l { display: inline-flex; gap: 6px; align-items: center; font: italic 15px/1 var(--font-lore); color: var(--cream-dim); }
.fac-call-l iconify-icon { color: var(--gold); }
.fac-call button, .fac-call-done { display: inline-flex; align-items: baseline; gap: 7px; height: 40px; padding: 0 16px; align-items: center; border-radius: 999px; font: 700 15px/1 var(--font-heading); letter-spacing: .04em; color: var(--cream); border: 1px solid var(--gold-hair); background: linear-gradient(180deg, #2c261f, #1b1713); }
.fac-call button[data-call="hit"], .fac-call button[data-call="dmg"] { color: #2a1c06; background: var(--btn-primary); border-color: rgba(255,230,150,.6); }
.fac-call button em, .fac-call-done em { font: 500 12px/1 var(--font-body); font-style: normal; opacity: .75; }
.fac-call button:disabled { opacity: .45; }
.fac-call-done { border-style: dashed; color: var(--heal-bright); }
@media (max-width: 720px) { .fac-coach p { min-width: 0; font-size: 15px; } .fac-coach-act { width: 100%; } }