/* duel.css: the home slot, the duel page, the KO mark, the burn, the damage pops, the sections below, the prototype switch */
/* ---- the home slot ---- */
.slot-not { margin-top:12px; font-size:14px; }
.slot-go { margin-top:30px; }
.slot-stage { position:relative; height:clamp(270px,27vw,332px); overflow:hidden; background:radial-gradient(52% 66% at 50% 70%, #1d1812 0%, #0c0b0f 78%); }
.s-card { position:absolute; bottom:30px; width:clamp(84px,11.2vw,132px); aspect-ratio:5 / 7; transform-origin:50% 100%; }
.s-card img { display:block; width:100%; height:100%; border-radius:4% / 2.857%; box-shadow:0 18px 36px #000b, 0 0 0 1px #ffffff12; }
.s-card.a { left:clamp(14px,3.2vw,40px); transform:perspective(900px) rotateY(12deg); }
.s-card.b { right:clamp(14px,3.2vw,40px); transform:perspective(900px) rotateY(-12deg); }
.s-card i { position:absolute; inset:0; border-radius:4% / 2.857%; opacity:0; pointer-events:none; }
.s-card .s-dim { background:#07080c; }
.s-card .s-lit { background:radial-gradient(90% 72% at 50% 44%, #fff0c4 0%, #ffc45a 50%, #d9820f 100%); mix-blend-mode:overlay; }
.slot-read { position:absolute; left:0; right:0; top:clamp(16px,2.4vw,30px); text-align:center; pointer-events:none; }
.sl-l { display:block; color:var(--muted); font:500 11px var(--mono); letter-spacing:.2em; text-transform:uppercase; }
.sl-n { margin-top:2px; font:600 clamp(34px,3.6vw,44px)/1.1 var(--serif); }
.sl-n b { font-weight:600; font-variant-numeric:lining-nums tabular-nums; }
.sl-n small { font:500 .46em var(--serif); color:var(--muted); margin-left:.3em; }
#slotFx { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* ---- the duel page: hero ---- */
:root { --cardH:min(clamp(290px, calc(100vh - 364px), 440px), 34vw); --cardW:calc(var(--cardH) * 5 / 7); --tileH:clamp(92px, calc(var(--cardH) * .31), 132px); --tileW:calc(var(--tileH) * .79); }
.dt { position:relative; padding:18px 0 0; overflow-x:clip; background:radial-gradient(56% 50% at 50% 62%, #1e1912 0%, #131015 58%, var(--bg) 88%); }
.dt-head { position:relative; text-align:center; }
.dt-head h1 { margin:6px 0 6px; font:600 clamp(36px,3.9vw,50px)/1.02 var(--serif); letter-spacing:-.005em; }
.dt-note { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 10px; margin:0; color:var(--muted); font-size:13.5px; }
.camera { position:relative; padding-bottom:82px; transform-origin:50% 64%; will-change:transform; }
.cone { position:absolute; left:0; right:0; top:-96px; bottom:0; background:conic-gradient(from 150deg at 50% 0, #ffe7b500 0deg, #ffe7b51d 9deg, #ffe7b51d 51deg, #ffe7b500 60deg); -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 22%, #0000 88%); mask-image:linear-gradient(180deg, #000 0%, #000 22%, #0000 88%); pointer-events:none; }
#fx { position:absolute; left:0; pointer-events:none; z-index:6; }
.koflash { position:fixed; inset:0; z-index:30; background:#fff; opacity:0; pointer-events:none; will-change:opacity; }
.veil { position:absolute; inset:-130px -60px 0; z-index:3; pointer-events:none; opacity:0; will-change:opacity; background:radial-gradient(62% 64% at var(--vx,50%) 58%, #05050700 18%, #050507b0 62%, #050507f0 100%); }

.hud { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,auto) minmax(0,1fr); gap:28px; align-items:end; padding:12px 0 24px; z-index:2; }
.h-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.h-name { min-width:0; overflow:hidden; font:600 24px/1.15 var(--serif); text-overflow:ellipsis; white-space:nowrap; }
.h-hp { flex:none; color:var(--muted); font:500 12px var(--mono); font-variant-numeric:tabular-nums; }
.h-hp b { color:var(--text); font-weight:500; }
/* the HP bars: a dark inset track in a warm hairline frame, faint 10% ticks, a gold diamond at the inner end */
.h-bar { position:relative; height:9px; margin-top:7px; background:#0d0c10; border-radius:1px; box-shadow:inset 0 1px 3px #000d, 0 0 0 1px #6f5c3d8c; }
.h-bar::before { content:""; position:absolute; z-index:1; top:50%; right:-6px; width:9px; height:9px; margin-top:-4.5px; background:var(--gold); transform:rotate(45deg); box-shadow:0 0 0 1px #0a0a0c; }
.h-bar::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#ffffff2b 0,#ffffff00 46%), repeating-linear-gradient(90deg,#0000 0 calc(10% - 1px),#0000004d calc(10% - 1px) 10%); }
.h-side.r .h-bar::before { right:auto; left:-6px; }
.h-bar i { position:absolute; inset:0; transform-origin:0 50%; }
.h-side.r .h-bar i { transform-origin:100% 50%; }
.h-side.r .h-top { flex-direction:row-reverse; }
.h-side.r { text-align:right; }
.h-lag { background:#f3d08a; opacity:.92; }
.h-fill { background:#6cbf8a; }
.h-flash { background:#fffaf0; opacity:0; }
.h-cls { margin-top:6px; overflow:hidden; color:var(--muted); font-size:12.5px; text-overflow:ellipsis; white-space:nowrap; }
.h-mid { min-height:40px; text-align:center; }
/* the round label: "Round 7" in serif, "/ 16" small, between two short hairlines; it ticks each round */
#rnum { position:relative; white-space:nowrap; }
#rnum::before, #rnum::after { content:""; display:inline-block; width:22px; height:1px; margin:0 10px; vertical-align:.3em; background:linear-gradient(90deg,#d9b26a00,#d9b26a99); }
#rnum::after { background:linear-gradient(270deg,#d9b26a00,#d9b26a99); }
#rlab { display:inline-block; }
#rof { margin-left:.4em; font:500 .58em var(--serif); color:var(--muted); }
#rof:empty { display:none; }
#rtick { position:absolute; left:50%; bottom:-2px; width:74px; height:1px; margin-left:-37px; background:linear-gradient(90deg,#d9b26a00,var(--gold2) 50%,#d9b26a00); opacity:0; transform:scaleX(0); }
/* the banner under the tile row, since the pot hangs between the tiles (Round 1, Sudden Death): flat text between gold hairlines, opacity and transform only */
.rban { position:absolute; z-index:5; top:0; left:0; right:0; margin:0 auto; width:min(560px,100%); padding:20px 0 18px; text-align:center; opacity:0; visibility:hidden; pointer-events:none; will-change:opacity,transform; background:radial-gradient(closest-side,#0a0a0ca6 30%,#0a0a0c66 62%,#0a0a0c00 100%); }
.rb-row { display:flex; align-items:center; justify-content:center; gap:16px; }
.rb-row b { flex:none; font:600 38px/1 var(--serif); letter-spacing:.03em; color:var(--ivory); text-shadow:0 2px 12px #000; }
.rb-row i { position:relative; flex:0 1 104px; height:7px; }
.rb-row i::before { content:""; position:absolute; left:0; right:0; top:3px; height:1px; background:linear-gradient(90deg,#d9b26a00,#d9b26ad0); }
.rb-row i:last-child::before { background:linear-gradient(270deg,#d9b26a00,#d9b26ad0); }
.rb-row i::after { content:""; position:absolute; top:1px; right:-2px; width:5px; height:5px; background:var(--gold2); transform:rotate(45deg); }
.rb-row i:last-child::after { right:auto; left:-2px; }
.rban small { display:block; margin-top:6px; font:italic 500 16px/1.2 var(--serif); color:var(--muted); }
.rban small:empty { display:none; }
.rban.ember .rb-row b { color:#f4b58a; }
.rban.ember small { color:#d99a72; }
.rban.ember .rb-row i::before { background:linear-gradient(90deg,#e0703a00,#e0703ad0); }
.rban.ember .rb-row i:last-child::before { background:linear-gradient(270deg,#e0703a00,#e0703ad0); }
.rban.ember .rb-row i::after { background:#f0a070; }
.h-mid b { display:block; font:600 26px/1.15 var(--serif); font-variant-numeric:tabular-nums; }
.sd { display:inline-block; margin-top:3px; padding:1px 9px; font:700 10px/1.6 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#fecaca; background:#7f1d1d; border-radius:2px; white-space:nowrap; }

.ring { position:relative; display:grid; grid-template-columns:var(--cardW) minmax(0,1fr) var(--cardW); gap:clamp(12px,2.4vw,30px); height:var(--cardH); }
.floorline { position:absolute; left:-6%; right:-6%; top:100%; height:84px; background:linear-gradient(180deg, #2a241b66 0, #2a241b22 26%, #0a0a0c00 100%); -webkit-mask-image:radial-gradient(60% 100% at 50% 0, #000 30%, #0000 100%); mask-image:radial-gradient(60% 100% at 50% 0, #000 30%, #0000 100%); pointer-events:none; }
.fighter { position:relative; min-width:0; z-index:1; will-change:transform; } /* its own layer: .lunge and .top only reorder layers, nothing is painted again */
.cardbox { position:absolute; inset:0; transform-origin:50% 100%; will-change:transform; }
.f0 .cardbox { transform:perspective(1500px) rotateY(11deg); }
.f1 .cardbox { transform:perspective(1500px) rotateY(-11deg); }
.halo { position:absolute; inset:-22% -30%; background:radial-gradient(closest-side, #ffc45a70, #ffb03a26 56%, #ffb03a00 100%); opacity:0; pointer-events:none; will-change:opacity; }
.pool { position:absolute; left:-20%; right:-20%; top:calc(100% - 12px); height:74px; background:radial-gradient(closest-side, #ffc45a66, #ffb03a18 60%, #ffb03a00 100%); opacity:0; pointer-events:none; }
.face { position:relative; display:block; width:100%; height:100%; border-radius:4% / 2.857%; box-shadow:0 34px 70px #000c, 0 0 0 1px #ffffff12; }
.skin { position:absolute; inset:0; overflow:hidden; border-radius:4% / 2.857%; pointer-events:none; }
.skin > i { position:absolute; inset:0; opacity:0; }
.lit { background:radial-gradient(90% 72% at 50% 44%, #fff0c4 0%, #ffc45a 50%, #d9820f 100%); mix-blend-mode:overlay; }
.plight { mix-blend-mode:screen; }
.f0 .plight { background:radial-gradient(70% 46% at 100% 96%, #ffb84a80, #ffb84a00 100%); }
.f1 .plight { background:radial-gradient(70% 46% at 0% 96%, #ffb84a80, #ffb84a00 100%); }
.glowin { background:radial-gradient(58% 44% at 50% 44%, #ffdf9e99, #ffb84a33 58%, #ffb84a00 100%); mix-blend-mode:screen; }
.skin > .blink { inset:-50%; background:radial-gradient(closest-side, #fff3d0d8, #ffe3a066 42%, #ffe3a000 100%); }
.skin > .sweep { inset:-40%; opacity:1; visibility:hidden; background:linear-gradient(115deg, #fff0 41%, #fff2cf33 46%, #fff6e2d0 50%, #fff2cf33 54%, #fff0 59%); mix-blend-mode:screen; }
.edge { position:absolute; inset:0; border-radius:4% / 2.857%; box-shadow:0 0 0 1px #ffe6ae, 0 0 34px 2px #ffbe5299; opacity:0; pointer-events:none; }
.float { position:absolute; z-index:3; left:0; right:0; top:34%; opacity:0; pointer-events:none; text-align:center; font:700 clamp(22px,2.7vw,34px)/1.1 var(--sans); color:#fecaca; text-shadow:0 2px 10px #000, 0 0 3px #000; white-space:nowrap; }
.float b { display:block; font-size:12px; letter-spacing:.2em; color:var(--gold2); }
.float.stake { font:500 clamp(12px,1.5vw,16px) var(--mono); color:var(--gold2); }
/* the KO mark: a serif KO between two hairlines ending in the brand's diamond. After the fire it comes up hot and cools to gold */
.ko { position:absolute; z-index:3; left:6%; right:6%; top:44%; display:flex; align-items:center; gap:6%; opacity:0; pointer-events:none; transform:translateY(-50%); will-change:opacity, transform; }
/* the filters sit on inner elements, so each is painted once into its layer; a frame only changes opacity and transform (the pieces are made by koParts in duel.js) */
.ko b { position:relative; flex:none; font:600 calc(var(--cardH) * .155)/1 var(--serif); letter-spacing:.08em; }
.ko .cool, .ko .hot > span { display:block; padding-left:.08em; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ko .cool { color:#ecd6a4; background-image:linear-gradient(180deg, #fff8ea 8%, #efdcae 46%, #b88a48 100%); filter:drop-shadow(0 2px 9px #000e); }
.ko .hot { position:absolute; inset:0; opacity:0; will-change:opacity; }
.ko .hot > span { background-image:linear-gradient(180deg, #fff3cf 6%, #ffab45 44%, #d8461c 100%); filter:drop-shadow(0 0 calc(var(--cardH) * .024) #ff6a1ecc); }
.ko i { position:relative; flex:1; height:7px; }
.ko u { position:absolute; left:0; right:0; top:3px; height:1px; background:linear-gradient(90deg, #d9b26a00, #d9b26ad0); transform-origin:100% 50%; will-change:transform; }
.ko i:last-child u { background:linear-gradient(270deg, #d9b26a00, #d9b26ad0); transform-origin:0 50%; }
.ko s { position:absolute; top:1px; right:-2px; width:5px; height:5px; background:#ecd6a4; transform:rotate(45deg); will-change:opacity; }
.ko i:last-child s { right:auto; left:-2px; }
/* the beaten card burning: a copy of it on a canvas inside the card, so it turns with it; the card's own shadow fades as it goes */
.burn, .burnshade { position:absolute; inset:0; width:100%; height:100%; border-radius:4% / 2.857%; visibility:hidden; pointer-events:none; }
.burnshade { box-shadow:0 34px 70px #000c; }
.cardbox.burning .face { visibility:hidden; }
.cardbox.burning .burn, .cardbox.burning .burnshade { visibility:visible; }

.aura { position:absolute; inset:-10% -16%; background:radial-gradient(closest-side, var(--ac, #ffc45a), #0000 100%); opacity:0; pointer-events:none; will-change:opacity; }
/* with effects on: the damage number pops out of the card, and the HP bar drops at once with a pale trail melting behind */
.camera.fxon .float { top:30%; font:700 clamp(30px,3.3vw,46px)/1 var(--serif); color:#fff4e6; text-shadow:0 2px 14px #000, 0 0 3px #000; }
.camera.fxon .float.crit { color:var(--gold2); }
.camera.fxon .float b { font:600 12px var(--sans); letter-spacing:.24em; color:var(--gold2); margin-bottom:2px; }
.fighter.lunge { z-index:2; }
.camera.fxon .float.stake { top:34%; font:500 clamp(12px,1.5vw,16px) var(--mono); color:var(--gold2); }
.mid { position:relative; min-width:0; z-index:4; }
.fighter.top { z-index:4; }
.tiles { display:flex; align-items:center; justify-content:center; gap:14px; }
.vs { font:italic 500 18px var(--serif); color:var(--muted); }
.tile { position:relative; flex:none; width:var(--tileW); height:var(--tileH); perspective:700px; }
.tile-in { position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; }
.tile .fc { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line2); border-radius:6px; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
/* the card back: dark lacquer, a thin gold inner frame, the brand's diamond. Behind each tile, a soft glow in its move's colour */
.tile .fc.down { border-color:#4b3f2c; background:linear-gradient(165deg,#1c181f 0%,#131016 58%,#0e0c11 100%); box-shadow:0 8px 22px #0007, inset 0 1px 0 #ffffff0f; }
.tile .fc.down::before { content:""; position:absolute; inset:5px; border:1px solid #d9b26a66; border-radius:3px; }
.fc-dia { position:relative; width:17%; aspect-ratio:1; background:var(--gold); transform:rotate(45deg); }
.fc-dia::after { content:""; position:absolute; inset:-55%; border:1px solid #d9b26a73; }
.tile-glow { position:absolute; inset:-30% -36%; background:radial-gradient(closest-side,var(--mc,#d9b26a),#0000 100%); opacity:0; pointer-events:none; }
.tile[data-move=strike] { --mc:#f87171; }
.tile[data-move=guard] { --mc:#7aa7e0; }
.tile[data-move=break] { --mc:#fb923c; }
.tile[data-move=charge] { --mc:#5ec8d8; }
.tile[data-move=skill] { --mc:#b99be6; }
.tile .fc.up { transform:rotateY(180deg); background:#1c1b22; box-shadow:0 10px 30px #0008; }
.tile .ico { width:42%; height:auto; aspect-ratio:1; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tile .mv { font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.tile[data-move=strike] .fc.up { border-color:#f87171; color:#f87171; }
.tile[data-move=guard] .fc.up { border-color:#7aa7e0; color:#7aa7e0; }
.tile[data-move=break] .fc.up { border-color:#fb923c; color:#fb923c; }
.tile[data-move=charge] .fc.up { border-color:#5ec8d8; color:#5ec8d8; }
.tile[data-move=skill] .fc.up { border-color:#b99be6; color:#b99be6; }
.bans { display:grid; grid-template-columns:var(--tileW) var(--tileW); justify-content:center; column-gap:calc(14px + 14px + 18px); min-height:50px; margin-top:10px; }
.ban { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; font-size:12px; white-space:nowrap; }
/* the outcome line: a stamped callout in the colour of the move that earned it, on a hairline */
.tag { position:relative; display:inline-block; padding:0 0 4px; margin-right:-.2em; font:600 11px/1.3 var(--sans); letter-spacing:.2em; white-space:nowrap; color:var(--tc,var(--text)); text-shadow:0 1px 7px #000d; }
.tag::after { content:""; position:absolute; left:0; right:.2em; bottom:0; height:1px; background:linear-gradient(90deg,#0000,var(--tc,var(--gold)) 24%,var(--tc,var(--gold)) 76%,#0000); opacity:.65; }
.tag[data-move=strike] { --tc:#f87171; }
.tag[data-move=guard] { --tc:#7aa7e0; }
.tag[data-move=break] { --tc:#fb923c; }
.tag[data-move=charge] { --tc:#5ec8d8; }
.tag[data-move=skill] { --tc:#b99be6; }
.dmg { font-weight:600; font-variant-numeric:tabular-nums; }
.crit { margin-left:5px; font-size:11px; letter-spacing:.08em; color:var(--gold2); }
.potspot { position:absolute; left:50%; bottom:-30px; width:1px; height:1px; }
.potread { position:absolute; left:-40px; right:-40px; bottom:-72px; display:flex; align-items:baseline; justify-content:center; gap:8px; white-space:nowrap; }
.potread .pr-l { color:var(--muted); font:500 11px var(--mono); letter-spacing:.2em; text-transform:uppercase; }
.potread b { font:600 30px/1 var(--serif); font-variant-numeric:lining-nums tabular-nums; }
.potread small { font:500 15px var(--serif); color:var(--muted); }
.potread .c-tag { align-self:center; }
/* the amount under the big pot while the stakes come in. Its size and place come from measurePotBig and paint */
.potbig { display:none; }
.camera.sky .potbig { display:flex; position:absolute; left:0; top:0; z-index:5; align-items:baseline; gap:.2em; white-space:nowrap; transform-origin:50% 0; will-change:transform,opacity; pointer-events:none; visibility:hidden; }
.potbig .pr-l { color:var(--muted); font:500 .22em var(--mono); letter-spacing:.2em; text-transform:uppercase; }
.potbig b { font:600 1em/1 var(--serif); font-variant-numeric:lining-nums tabular-nums; }
.potbig small { font:500 .42em var(--serif); color:var(--muted); }
.potbig .c-tag { align-self:center; }
/* the pot in the sky: it hangs between the two move tiles, in the slot #potsky holds (reduced motion has no .sky and keeps the floor layout) */
.potsky { display:none; }
.camera.sky { --tin:clamp(12px,3.5vw,44px); }
.camera.sky .tiles { gap:0; padding:0 var(--tin); }
.camera.sky .vs { display:none; }
.camera.sky .potsky { display:block; flex:1; align-self:stretch; min-width:0; }
.camera.sky .bans { grid-template-columns:var(--tileW) var(--tileW); justify-content:space-between; column-gap:0; padding:0 var(--tin); }
.camera.sky .potread { top:calc(var(--tileH) - 46px); bottom:auto; left:calc(var(--tin) + var(--tileW) + 6px); right:calc(var(--tin) + var(--tileW) + 6px); flex-wrap:wrap; row-gap:3px; column-gap:6px; }
.camera.sky .potread b { font-size:clamp(17px,1.8vw,22px); }
.camera.sky .potread small { font-size:12px; }
.camera.sky .potread .pr-l { font-size:10px; }

.bigwin { position:absolute; left:-14px; right:-14px; top:0; z-index:5; text-align:center; opacity:0; pointer-events:none; }
.bw-num { display:flex; align-items:baseline; justify-content:center; gap:.16em; font:600 clamp(52px, calc(var(--cardH) * .2), 88px)/1 var(--serif); font-variant-numeric:lining-nums tabular-nums; color:var(--ivory); white-space:nowrap; transform-origin:50% 62%; text-shadow:0 2px 26px #000c; will-change:transform; }
.bw-num small { font:600 .46em var(--serif); color:var(--muted); }
.bw-num.locked { color:#fff4d6; }
.bw-num.locked small { color:var(--gold2); }
.later { opacity:0; transition:opacity .7s ease; }
.bigwin.done .later { opacity:1; }
.bw-tag { margin-bottom:6px; line-height:1; }
.bw-who { margin-top:8px; font:600 clamp(19px,2.1vw,25px)/1.2 var(--serif); }
.bw-sub { margin:5px 0 0; color:var(--muted); font-size:13.5px; line-height:1.5; }
.bw-act { margin-top:14px; transition-delay:.5s; }
.bigwin.done .bw-act { pointer-events:auto; }
html.instant *, html.instant *::before, html.instant *::after { transition:none !important; transition-delay:0s !important; }

/* ---- how it works, open duels, latest results ---- */
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.four .t { display:flex; flex-direction:column; }
.four .t .fig { margin-top:auto; padding-top:14px; }
.fig { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-height:26px; color:#cfc8bb; font:500 12.5px var(--mono); font-variant-numeric:tabular-nums; }
.fig .ci { flex:none; width:18px; height:18px; background:var(--coin) center / contain no-repeat; }
.fig code { font:inherit; }
.fig u { font-size:11px; letter-spacing:.06em; text-decoration:none; color:var(--m); }
.t p { margin:0; color:var(--muted); font-size:14px; }
.t b i { font-style:normal; }
.tables-in { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; }
.s-tag { display:inline-block; margin-top:3px; padding:0 5px; color:var(--gold2); border:1px solid #d9b26a66; border-radius:2px; font:500 10px/1.5 var(--mono); letter-spacing:.06em; }

/* the replay's pace, under the stage: 2× and Skip. They fade out when the replay ends */
.pace { display:flex; justify-content:center; gap:8px; margin-top:4px; }
.pace .pace-b:not(.snd) { opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s; }
.pace.on .pace-b:not(.snd) { opacity:1; visibility:visible; transition:opacity .4s ease; }
.pace.on .pace-b:not(.snd):disabled { opacity:.35; }
.pace[hidden] { display:none; }
.pace-b { min-height:32px; min-width:48px; padding:0 14px; color:var(--muted); background:transparent; border:1px solid var(--line2); border-radius:999px; font:500 12px var(--mono); letter-spacing:.06em; cursor:pointer; }
.pace-b:hover { color:var(--text); border-color:var(--muted); }
.pace-b[aria-pressed=true] { color:var(--gold2); border-color:#d9b26a99; }
.pace-b:disabled { opacity:.35; cursor:default; }
.pace-b:disabled:hover { color:var(--muted); border-color:var(--line2); }
.pace-b.snd { display:inline-flex; align-items:center; gap:6px; }
.pace-b.snd[aria-busy=true] { opacity:.6; }
.pace-b.snd.arm { animation:sndArm 1.4s ease-in-out infinite; }
@keyframes sndArm { 50% { box-shadow:0 0 0 5px #d9b26a33; } }
@media (prefers-reduced-motion:reduce) { .pace-b.snd.arm { animation:none; } }
.pace-b.snd svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.pace-b.snd .w { display:none; }
.pace-b.snd[aria-pressed=true] .w { display:inline; }

/* ---- the prototype's own switch (not part of the site) ---- */
.pill { position:fixed; left:14px; bottom:12px; z-index:40; display:flex; align-items:center; gap:4px; padding:4px; color:var(--muted); background:#131217f2; border:1px solid var(--line2); border-radius:999px; font:500 11px var(--mono); white-space:nowrap; box-shadow:0 10px 26px #0009; }
.pill span { padding:0 8px 0 10px; letter-spacing:.14em; }
.pill i { font-style:normal; }
.pill a { padding:4px 11px; color:var(--muted); border-radius:999px; text-decoration:none; }
.pill a:hover { color:var(--text); }
.pill a[aria-current=true] { color:#16130f; background:var(--gold2); }
.pill .fxb { margin-left:2px; padding:3px 10px; color:var(--muted); background:transparent; border:1px solid var(--line2); border-radius:999px; font:inherit; letter-spacing:.04em; white-space:nowrap; cursor:pointer; }
.pill .fxb:hover { color:var(--text); }
.pill .fxb[aria-pressed=true] { color:var(--gold2); border-color:#d9b26a73; }
/* the hidden skill picker (?skills=1): a tool for checking every class's Skill, not part of the page */
.dbg { position:fixed; right:10px; top:10px; z-index:41; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; max-width:calc(100vw - 20px); padding:8px 10px; color:var(--muted); background:#131217f2; border:1px solid var(--line2); border-radius:6px; font:11px var(--mono); }
.dbg select, .dbg button { max-width:100%; padding:3px 6px; color:var(--text); background:#1a1920; border:1px solid var(--line2); border-radius:3px; font:inherit; }
.dbg label { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
/* the test scene's panel (?scene=ko, skill or coins) */
.dbg.scene b { color:var(--text); font-weight:500; letter-spacing:.08em; }
.dbg button { cursor:pointer; }
.dbg button[aria-pressed=true] { color:#16130f; background:var(--gold2); border-color:var(--gold2); }
.dbg .sc-sk { display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.dbg .sc-sk[hidden] { display:none; }
.dbg a { color:var(--gold2); }