/* Gatekeepers: Spotlight Filmstrip (owner pick, option 5), polished 2026-11-01.
   Glass = the site-wide Obsidian Glass (--og-* in style.css). Buttons = the site's gold "Play free"
   pill gold (#f8e3a0 > #e7c260 > #c99a2e, ink #1d1307), the same gold as the name plate. */
#gatekeepers{--g5-gold-fill:linear-gradient(180deg,#f8e3a0 0%,#e7c260 45%,#c99a2e 100%);--g5-gold-ink:#1d1307;--g5-ink:#f0e8d6;--g5-muted:#c4b89e;--g5-gold:#e8c873;--g5-red:#ff8a94}

/* ── layout: portrait | panel ── */
.gk5-spot{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(28px,4vw,64px)}
.gk5-stage{position:relative;display:grid;place-items:center}
.gk5-big{width:min(560px,100%);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 4px #c99a2e,0 0 0 10px rgba(20,16,12,.7),0 0 0 11px rgba(232,200,115,.5),0 30px 70px rgba(0,0,0,.6)}
.gk5-big img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s ease}
.gk5-big img.is-swap{opacity:0}

/* round arrows flank the portrait */
.gk5-arrow{position:absolute;top:50%;z-index:2;width:56px;height:56px;margin-top:-28px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
 background:rgba(20,16,12,.78);border:2px solid #c99a2e;color:#f3dc8a;box-shadow:0 6px 16px rgba(0,0,0,.5);transition:background .15s,color .15s,transform .12s}
.gk5-arrow svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.gk5-arrow--prev{left:0}.gk5-arrow--next{right:0}
.gk5-arrow:hover{background:var(--g5-gold-fill);color:var(--g5-gold-ink);border-color:#fff0bf}
.gk5-arrow:active{transform:scale(.94)}
.gk5-arrow:focus-visible{outline:3px solid #ffe08a;outline-offset:3px}

/* ── the panel ── */
.gk5-card{padding:clamp(24px,2.6vw,36px);color:var(--g5-ink)}
.gk5-plate{display:inline-block;font:400 clamp(26px,2.6vw,36px)/1.05 var(--display,Marcellus,serif);color:#2a1c08;padding:10px 28px 12px;border-radius:8px;
 background:linear-gradient(180deg,#f6dc96,#d7ac52 55%,#a87a2a);box-shadow:inset 0 1px 0 #fff3c8,inset 0 -2px 0 #7a5418,0 6px 18px rgba(0,0,0,.5)}
.gk5-title{margin:14px 0 0;font:400 clamp(19px,1.5vw,22px)/1.25 var(--display,Marcellus,serif);color:#f3e6c2}
.gk5-num{display:block;margin-top:4px;font:600 13px/1.2 "Source Sans 3",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--g5-muted)}
.gk5-hp{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;margin-top:20px;max-width:420px}
.gk5-hp .lab{font:700 13px/1 "Source Sans 3",sans-serif;letter-spacing:.14em;color:var(--g5-muted)}
.gk5-hp .bar{position:relative;height:24px;border-radius:999px;background:linear-gradient(180deg,#e0484f,#9b1b25);box-shadow:inset 0 0 0 2px #3a0a0e,0 0 0 2px #c99a2e;display:flex;align-items:center;justify-content:center}
.gk5-hp .num{font:700 15px/1 "Source Sans 3",sans-serif;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);font-variant-numeric:tabular-nums}
.gk5-quote{margin:20px 0 0;padding:0;font:400 17px/1.5 "Source Sans 3",sans-serif;font-style:italic;color:var(--g5-muted);max-width:44ch}

.gk5-h{margin:24px 0 10px;font:600 13px/1 "Source Sans 3",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--g5-gold)}
/* attacks: compact chips, value first */
.gk5-hits{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.gk5-hit{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 6px;border-radius:999px;background:rgba(120,24,32,.35);border:1px solid rgba(255,138,148,.4)}
.gk5-hit img{width:26px;height:26px}
.gk5-hit b{font:700 16px/1 "Source Sans 3",sans-serif;color:#ffd2d6;font-variant-numeric:tabular-nums}
.gk5-hit.late{border-style:dashed}
/* other moves: quiet rows with a hairline divider */
.gk5-fx{list-style:none;margin:0;padding:0}
.gk5-fx li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px;padding:8px 0;border-top:1px solid rgba(201,162,39,.16)}
.gk5-fx li:first-child{border-top:0}
.gk5-fx img{width:30px;height:30px;object-fit:contain}
.gk5-fx .t{font-size:15px;line-height:1.3;color:var(--g5-ink)}
.gk5-fx .n{font:700 15px/1 "Source Sans 3",sans-serif;color:var(--g5-gold);white-space:nowrap}
.gk5-fx .n.atk{color:var(--g5-red)}
.gk5-fx li.late .t::after{content:" · when hurt";color:var(--g5-muted);font-size:13px}

/* ── one primary gold button ── */
.gk5-cta{display:flex;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
.gk5-btn,#gatekeepers .more .pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;cursor:pointer;text-decoration:none;
 font:700 16px/1 "Source Sans 3",system-ui,sans-serif;letter-spacing:.02em;color:var(--g5-gold-ink)!important;background:var(--g5-gold-fill)!important;border:1px solid #fff0bf!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(120,80,10,.45),0 0 0 1px rgba(90,60,10,.6),0 8px 22px rgba(0,0,0,.45)!important;
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:transform .12s ease,box-shadow .15s ease,filter .15s ease}
.gk5-btn svg,#gatekeepers .more .pill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.gk5-btn:hover,#gatekeepers .more .pill:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(120,80,10,.45),0 0 0 1px rgba(90,60,10,.6),0 14px 28px rgba(0,0,0,.5)!important}
.gk5-btn:active,#gatekeepers .more .pill:active{transform:translateY(1px);filter:brightness(.96)}
.gk5-btn:focus-visible,#gatekeepers .more .pill:focus-visible{outline:3px solid #ffe08a;outline-offset:3px}
#gatekeepers .more .pill .ring{width:30px;height:30px;border:2px solid #5b3d0c;background:radial-gradient(circle at 50% 35%,#3a2709,#1d1307);box-shadow:none}
#gatekeepers .more .pill .ring svg{stroke:#f3dc8a;width:14px;height:14px}
#gatekeepers .more .pill{padding-left:8px}
.gk5-count{font:600 14px/1 "Source Sans 3",sans-serif;color:var(--g5-muted);font-variant-numeric:tabular-nums}

/* ── filmstrip: all twelve fit on desktop; swipe on smaller screens ── */
.gk5-film{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(8px,1vw,16px);margin-top:clamp(40px,5vw,64px);padding:12px 4px 4px}
.gk5-film button{background:none;border:0;padding:6px 0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--g5-ink);border-radius:12px;min-width:0}
.gk5-film .r{width:100%;max-width:96px;aspect-ratio:1;border-radius:50%;overflow:hidden;filter:saturate(.7) brightness(.78);transition:filter .2s,transform .2s;box-shadow:0 0 0 2px #8a6a33,0 6px 14px rgba(0,0,0,.5)}
.gk5-film .r img{width:100%;height:100%;object-fit:cover;display:block}
.gk5-film button:hover .r{filter:none;transform:translateY(-3px)}
.gk5-film button[aria-pressed=true] .r{filter:none;transform:translateY(-4px);box-shadow:0 0 0 3px #f3dc8a,0 0 0 6px rgba(20,16,12,.9),0 10px 20px rgba(0,0,0,.55)}
.gk5-film .nm{font:400 14px/1.15 var(--display,Marcellus,serif);text-align:center;color:var(--g5-muted)}
.gk5-film button[aria-pressed=true] .nm{color:#f3e6c2}
.gk5-film button:focus-visible{outline:3px solid #ffe08a;outline-offset:2px}

/* ── details sheet ── */
.gk5-sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,105%);width:min(860px,100%);max-height:min(86vh,86svh);overflow:auto;overscroll-behavior:contain;z-index:90;padding:32px 32px max(32px,env(safe-area-inset-bottom));transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s .35s;visibility:hidden;color:var(--g5-ink)}
.gk5-sheet.on{transform:translate(-50%,0);visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.gk5-sheet .x{position:absolute;right:16px;top:16px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:rgba(20,16,12,.78);border:2px solid #c99a2e;color:#f3dc8a}
.gk5-sheet .x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.gk5-sheet .x:hover{background:var(--g5-gold-fill);color:var(--g5-gold-ink)}
.gk5-sheet .x:focus-visible{outline:3px solid #ffe08a;outline-offset:3px}
.gk5-sheet h3{font:400 30px/1.1 var(--display,Marcellus,serif);color:#f3e6c2;margin:0;padding-right:64px}
.gk5-cols{display:grid;grid-template-columns:1fr 1.3fr;gap:32px;margin-top:20px}
.gk5-lore{color:var(--g5-muted);font-size:15px;line-height:1.55;margin:16px 0 0}
.gk5-shade{position:fixed;inset:0;background:rgba(6,4,12,.6);z-index:89}

@media (max-width:1100px){
 .gk5-film{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:12px 16px 8px;margin-inline:-16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 32px),transparent)}
 .gk5-film::-webkit-scrollbar{display:none}
 .gk5-film button{flex:0 0 88px;scroll-snap-align:start}
}
@media (max-width:760px){
 .gk5-spot{grid-template-columns:1fr;gap:24px}
 .gk5-big{width:min(78vw,340px)}
 .gk5-arrow{width:48px;height:48px;margin-top:-24px}
 .gk5-card{padding:24px 18px}
 .gk5-hp{max-width:none}
 .gk5-cta .gk5-btn{flex:1 1 auto}
 .gk5-sheet{padding:28px 18px max(28px,env(safe-area-inset-bottom))}
 .gk5-cols{grid-template-columns:1fr;gap:8px}
 .gk5-film{margin-top:32px}
}
@media (prefers-reduced-transparency:reduce){.gk5-arrow,.gk5-sheet .x{background:#1a1510}}
@media (prefers-reduced-motion:reduce){.gk5-sheet,.gk5-film .r,.gk5-big img,.gk5-btn,.gk5-arrow{transition:none}}
.gk5-sheet .x{position:sticky;top:0;right:auto;float:right;margin:-14px -14px 0 12px;z-index:2}

/* steady panel (2026-11-01): height reserved by gk5.js fit(), portrait pinned to the top, content crossfades */
.gk5-spot{align-items:start}
.gk5-card{box-sizing:border-box;overflow:hidden;transition:opacity .15s ease}
.gk5-card.is-swap{opacity:0}
.gk5-fx--short li{padding:6px 0}
.gk5-fx--short .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gk5-more-n{margin:6px 0 0;font:600 14px/1.3 "Source Sans 3",sans-serif;color:var(--g5-muted)}
@media (prefers-reduced-motion:reduce){.gk5-card{transition:none}}

/* relayout 2026-11-01: name plate on the portrait, ring HP under it, panel centred and gap-distributed */
.gk5-spot{align-items:center}
.gk5-stage{display:flex;flex-direction:column;align-items:center;padding-top:26px}
.gk5-ring{position:relative;width:min(560px,100%);display:grid;place-items:center}
.gk5-ring .gk5-big{width:100%}
.gk5-ring .gk5-plate{position:absolute;top:0;left:50%;z-index:3;transform:translate(-50%,-50%);white-space:nowrap;max-width:86%;overflow:hidden;text-overflow:ellipsis;font-size:clamp(22px,2.2vw,30px);padding:8px 24px 10px;transition:opacity .15s ease}
.gk5-rhp{position:relative;z-index:3;margin-top:-14px;width:min(62%,320px);height:28px;border-radius:999px;background:linear-gradient(180deg,#b52a33,#8a1620);box-shadow:inset 0 0 0 2px #3a0a0e,0 0 0 3px #c99a2e,0 0 0 5px rgba(20,16,12,.8),0 8px 18px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .15s ease}
.gk5-rhp .lab{font:700 12px/1 "Source Sans 3",sans-serif;letter-spacing:.14em;color:#ffe3e6}
.gk5-rhp .num{font:700 16px/1 "Source Sans 3",sans-serif;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);font-variant-numeric:tabular-nums}
.gk5-ring .gk5-plate.is-swap,.gk5-rhp.is-swap{opacity:0}
.gk5-card{display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.gk5-card>*{margin-top:0!important}
.gk5-card .gk5-g>.gk5-h{margin-top:0}
.gk5-card .gk5-title{margin:0}
.gk5-fact{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding-top:14px;border-top:1px solid rgba(232,200,115,.22);font:600 14px/1.3 "Source Sans 3",sans-serif;color:var(--g5-muted)}
.gk5-fact b{color:var(--g5-ink)}
@media (max-width:860px){.gk5-stage{padding-top:22px}.gk5-ring{width:min(78vw,340px)}.gk5-ring .gk5-plate{font-size:22px}.gk5-card{gap:16px}}
@media (prefers-reduced-motion:reduce){.gk5-ring .gk5-plate,.gk5-rhp{transition:none}}

/* stop scroll anchoring jumping the page when the boss panel content is replaced (owner 11-01) */
#gatekeepers, #gatekeepers *{overflow-anchor:none}