/* Page 38 (+ 39) · THE FINISHER. Builds on ../kit.css + fbkit.css. DARK VIVID page chrome (full night, saturated), the
   T1 SPOTLIGHT game look (ink #1D1B24, cream, yellow, Lilita One + Rubik, chunky sticker buttons), the cinematic stage. */
:root { --page: #0E0A1D; --page-2: #19122F; --line: rgba(255, 246, 224, 0.12); --mint: #7CFFA3; --hot: #FF4FA3; --sky: #3FEAF5;
  --card: linear-gradient(180deg, #2B2248, #1A1430); --card-2: linear-gradient(180deg, #342A58, #201838); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 74px; }
body.fin { margin: 0; background: var(--page); color: var(--cream); font: 400 15.5px / 1.55 var(--f-body); -webkit-font-smoothing: antialiased; padding-bottom: 130px; overflow-x: hidden; }
body.fin::before { content: ""; position: fixed; inset: 0; z-index: -2; background:
  radial-gradient(70% 45% at 50% -5%, #3B2470 0%, transparent 70%),
  radial-gradient(40% 35% at 0% 30%, rgba(255, 79, 163, 0.14), transparent 70%),
  radial-gradient(45% 35% at 100% 65%, rgba(63, 154, 255, 0.14), transparent 70%), var(--page); }
body.fin::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1.2px, transparent 1.7px); background-size: 9px 9px; }
.fin a { color: var(--yellow); }
.fin b, .fin strong { color: #fff; font-weight: 700; }
.fin code { font: 600 0.86em / 1 ui-monospace, Menlo, monospace; color: #FFE9A8; background: rgba(255, 246, 224, 0.08); padding: 2px 5px; border-radius: 5px; }
.fin em { font-style: normal; }
.fin button { font-family: inherit; }
.panel-d { position: relative; border: 3px solid var(--ink); border-radius: 22px; background: var(--card); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 5px 8px 0 var(--ink); }

/* ================================================================== top bar */
.fbar { position: sticky; top: 0; z-index: 150; background: rgba(14, 10, 29, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 3px solid var(--ink); box-shadow: 0 2px 0 rgba(255, 246, 224, 0.06); }
.fbar__in { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 10px 22px; }
.fbar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 12.5px / 1.1 var(--f-body); letter-spacing: 0.1em; color: var(--cream-2) !important; white-space: nowrap; }
.fbar__brand b { color: var(--yellow); }
.fbar__brand i { display: grid; place-items: center; width: 32px; height: 32px; font: 400 21px / 1 var(--f-display); font-style: normal; color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); border: 3px solid var(--ink); border-radius: 10px; box-shadow: 2px 3px 0 var(--ink); transform: rotate(-6deg); }
.fbar__nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.fbar__nav::-webkit-scrollbar { display: none; }
.fbar__nav a { flex: none; padding: 7px 11px; border-radius: 10px; text-decoration: none; font: 400 14.5px / 1 var(--f-display); letter-spacing: 0.05em; color: var(--cream-2) !important; }
.fbar__nav a:hover, .fbar__nav a.is-on { color: var(--ink) !important; background: var(--yellow); }
.fbar__motion { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; cursor: pointer; font: 400 13px / 1 var(--f-display); letter-spacing: 0.06em; color: var(--cream-2); background: #1E1830; border: 2.5px solid var(--ink); border-radius: 10px; }
.fbar__motion i { width: 26px; height: 15px; border-radius: 9px; background: var(--green); position: relative; border: 2px solid var(--ink); }
.fbar__motion i::after { content: ""; position: absolute; right: 1px; top: 1px; width: 9px; height: 9px; border-radius: 50%; background: #fff; transition: right 0.2s; }
.fbar__motion[aria-pressed="false"] i { background: #555068; }
.fbar__motion[aria-pressed="false"] i::after { right: 12px; }

.fwrap { max-width: 1320px; margin: 0 auto; padding: 0 22px; }

/* ================================================================== hero */
.hero { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 40px; align-items: center; padding: 46px 0 30px; }
.eyebrow { display: inline-block; font: 800 12px / 1.3 var(--f-body); letter-spacing: 0.16em; text-transform: uppercase; color: #FFB3D6; }
.htitle { margin: 10px 0 14px; display: grid; line-height: 0.86; }
.htitle span { font-family: var(--f-display); font-weight: 400; -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; }
.htitle__a { font-size: 44px; color: var(--cream); letter-spacing: 0.08em; text-shadow: 0 5px 0 var(--ink); transform: rotate(-3deg); transform-origin: left; width: max-content; }
.htitle__b { font-size: clamp(64px, 8.6vw, 124px); color: var(--yellow); letter-spacing: 0.01em; text-shadow: 0 8px 0 var(--ink), 0 0 40px rgba(255, 210, 63, 0.35); }
.hero__lede { margin: 0 0 18px; font-size: 16.5px; color: var(--cream-2); max-width: 54ch; }
.saids { display: grid; gap: 8px; margin-bottom: 18px; }
.said { display: flex; gap: 12px; align-items: baseline; padding: 10px 14px; border-radius: 14px; background: rgba(255, 246, 224, 0.06); border: 2px solid rgba(255, 246, 224, 0.1); }
.said b { flex: none; font: 400 13px / 1 var(--f-display); letter-spacing: 0.08em; color: var(--ink); background: var(--hot); padding: 4px 7px 3px; border-radius: 6px; border: 2px solid var(--ink); }
.said span { font-size: 14.5px; color: var(--cream); font-style: italic; }
.asks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.asks a { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; text-decoration: none; border: 3px solid var(--ink); border-radius: 16px; background: var(--card-2); box-shadow: 3px 5px 0 var(--ink); transition: transform 0.15s var(--out); }
.asks a:hover { transform: translateY(-3px) rotate(-0.6deg); }
.asks a i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; font: 400 18px / 1 var(--f-display); font-style: normal; color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); border: 2.5px solid var(--ink); border-radius: 9px; transform: rotate(-6deg); }
.asks a span { font-size: 12.5px; line-height: 1.35; color: var(--cream-3); }
.asks a b { display: block; font: 400 15.5px / 1.1 var(--f-display); letter-spacing: 0.04em; color: var(--cream); margin-bottom: 2px; }
.asks a.is-done i { background: linear-gradient(180deg, #7BEFA5, var(--green)); }
.asks a.is-done::after { content: "PICKED"; position: absolute; right: -6px; top: -9px; font: 400 11px / 1 var(--f-display); letter-spacing: 0.06em; color: var(--ink); background: var(--green); border: 2px solid var(--ink); padding: 3px 6px 2px; border-radius: 6px; transform: rotate(5deg); }
.hero__show { position: relative; }
.hero__now { margin-top: 8px; text-align: center; font: 800 12px / 1.3 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-3); min-height: 16px; }
.hero__now b { color: var(--yellow); }

/* the phone: the kit's device frame, with a stage filling the 998 x 460 screen */
.phone { position: relative; }
.phone .dev__body { filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.55)); }
.scrfill { position: absolute; inset: 0; overflow: hidden; background: #0B0820; }
.fstage { position: absolute; inset: 0; width: 998px; }

/* the beat bar under a phone */
.beatbar { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 14px; padding: 0 6px; }
.beatbar::before { content: ""; position: absolute; left: 10%; right: 10%; top: 17px; height: 5px; border-radius: 3px; background: rgba(255, 246, 224, 0.12); }
.beatbar__fill { position: absolute; left: 10%; top: 17px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--yellow), var(--hot)); width: 0; transition: width 0.12s linear; }
.beat { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.beat i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #241C3E; border: 3px solid var(--ink); box-shadow: 0 0 0 2px rgba(255, 246, 224, 0.12); transition: transform 0.25s var(--spring), background 0.2s; }
.beat i svg { width: 21px; height: 21px; }
.beat b { font: 400 13px / 1.05 var(--f-display); letter-spacing: 0.05em; color: var(--cream-3); }
.beat.is-past i { background: #3A3060; }
.beat.is-on i { background: var(--yellow); transform: scale(1.18) rotate(-6deg); box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.35), 0 0 22px rgba(255, 210, 63, 0.6); }
.beat.is-on b { color: var(--yellow); }

/* ================================================================== sections */
.sec { padding: 64px 0 10px; }
.sech { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 24px; }
.secn { flex: none; display: grid; place-items: center; width: 70px; height: 70px; font: 400 36px / 1 var(--f-display); color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 60%, var(--yellow-lo)); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 4px 6px 0 var(--ink); transform: rotate(-5deg); }
.sech h2 { margin: 6px 0 8px; font: 400 clamp(32px, 4.2vw, 48px) / 0.98 var(--f-display); letter-spacing: 0.01em; color: #fff; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); }
.sech p { margin: 0; max-width: 80ch; color: var(--cream-2); font-size: 16px; }
.tag { display: inline-block; padding: 5px 9px 4px; font: 400 12.5px / 1 var(--f-display); letter-spacing: 0.08em; color: var(--cream); background: #3A3060; border: 2.5px solid var(--ink); border-radius: 8px; }
.tag--q { color: var(--ink); background: var(--yellow); }
.tag--done { color: var(--ink); background: var(--green); }
.rec { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px 4px; font: 400 13px / 1 var(--f-display); letter-spacing: 0.07em; color: var(--ink); background: linear-gradient(180deg, #8DF7B2, var(--green)); border: 2.5px solid var(--ink); border-radius: 8px; box-shadow: 2px 3px 0 var(--ink); white-space: nowrap; }
.rec::before { content: "\2605"; font-size: 12px; }

/* sticker buttons */
.sbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; padding: 0 16px; cursor: pointer; font: 400 17px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--ink); border: 3px solid var(--ink); border-radius: 13px; background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 3px 4px 0 var(--ink); transition: transform 0.1s var(--out), box-shadow 0.1s; white-space: nowrap; }
.sbtn:hover { transform: translateY(-2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 3px 6px 0 var(--ink); }
.sbtn:active { transform: translate(2px, 3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 1px 1px 0 var(--ink); }
.sbtn--dark { color: var(--cream); background: linear-gradient(180deg, #4B4472, #2A2640); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 3px 4px 0 var(--ink); }
.sbtn--dark[aria-pressed="true"] { color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); }
.sbtn--sm { height: 34px; padding: 0 12px; font-size: 14.5px; border-radius: 10px; }
.sbtn--g { color: #fff; background: linear-gradient(180deg, #7BEFA5, var(--green) 50%, #0F9442); -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { height: 38px; padding: 0 13px; cursor: pointer; font: 400 15px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--cream-2); background: #221B38; border: 2.5px solid var(--ink); border-radius: 11px; box-shadow: 2px 3px 0 var(--ink); transition: transform 0.12s var(--out); }
.seg button small { display: block; font: 700 10px / 1 var(--f-body); letter-spacing: 0.06em; color: var(--cream-3); margin-top: 2px; }
.seg button:hover { transform: translateY(-2px); }
.seg button.is-on { color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); }
.seg button.is-on small { color: rgba(29, 27, 36, 0.7); }

/* ================================================================== 01 when */
.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.mtile { position: relative; padding: 16px 16px 14px; border: 3px solid var(--ink); border-radius: 20px; background: var(--card-2); box-shadow: 4px 6px 0 var(--ink); overflow: hidden; }
.mtile__art { height: 92px; margin: -4px -4px 10px; border-radius: 14px; background: radial-gradient(90% 120% at 50% 0%, #3E2F78, #160F2C); border: 2px solid var(--ink); position: relative; overflow: hidden; }
.mtile__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mtile h3 { margin: 0 0 4px; font: 400 22px / 1 var(--f-display); letter-spacing: 0.03em; color: var(--yellow); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.mtile p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--cream-2); }
.mtile__when { display: inline-block; margin-top: 8px; font: 400 13px / 1 var(--f-display); letter-spacing: 0.05em; color: var(--ink); background: var(--green); padding: 4px 8px 3px; border-radius: 7px; border: 2px solid var(--ink); }
.mtile--no h3 { color: #FF8FA8; }
.mtile--no .mtile__when { background: #FF8FA8; }
.mtile--no .mtile__art::after { content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 7px; background: #FF5A6E; border: 2px solid var(--ink); transform: rotate(-12deg); }
.gapwrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 18px; align-items: stretch; }
.gap { padding: 18px 20px; display: grid; gap: 10px; }
.gap__head { display: flex; gap: 12px; align-items: baseline; }
.gap__head b { flex: none; font: 400 15px / 1 var(--f-display); letter-spacing: 0.06em; color: var(--ink); background: #C9C2DA; padding: 4px 8px 3px; border-radius: 7px; border: 2px solid var(--ink); }
.gap__head--new b { background: var(--yellow); }
.gap__head span { font-size: 13.5px; color: var(--cream-2); }
.ruler svg { display: block; width: 100%; height: auto; }
.todaycap { margin: 0; display: grid; gap: 10px; align-content: start; }
.todaycap__img { position: relative; border: 3px solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 4px 6px 0 var(--ink); }
.todaycap__img img { display: block; width: 100%; height: auto; }
.todaycap__tag { position: absolute; left: 10px; top: 10px; font: 400 12px / 1 var(--f-display); letter-spacing: 0.06em; color: var(--ink); background: var(--cream); border: 2px solid var(--ink); padding: 4px 7px 3px; border-radius: 6px; }
.todaycap figcaption { font-size: 13.5px; color: var(--cream-2); }

/* ================================================================== 02 the flow */
.director { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.68fr); gap: 22px; align-items: start; }
.scrub { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.scrub__btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer; color: var(--ink); border: 3px solid var(--ink); border-radius: 13px; background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 2px 4px 0 var(--ink); }
.scrub__btn svg { width: 22px; height: 22px; fill: var(--ink); }
.scrub__btn .i-play { display: none; }
.scrub__btn.is-paused .i-play { display: block; }
.scrub__btn.is-paused .i-pause { display: none; }
.scrub__btn--txt { width: auto; padding: 0 12px; font: 400 15px / 1 var(--f-display); letter-spacing: 0.05em; color: var(--cream); background: linear-gradient(180deg, #4B4472, #2A2640); }
.scrub__btn--txt[aria-pressed="true"] { color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); }
.scrub__track { position: relative; flex: 1; height: 44px; border-radius: 13px; background: #1B1530; border: 3px solid var(--ink); cursor: pointer; overflow: hidden; touch-action: none; }
.scrub__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(255, 210, 63, 0.35), rgba(255, 79, 163, 0.35)); }
.scrub__beats { position: absolute; inset: 0; }
.scrub__beats span { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-left: 7px; font: 400 11.5px / 1 var(--f-display); letter-spacing: 0.05em; color: var(--cream-2); border-left: 2px solid rgba(255, 246, 224, 0.25); white-space: nowrap; overflow: hidden; }
.scrub__beats span.is-on { color: var(--yellow); border-left-color: var(--yellow); }
.scrub__head { position: absolute; top: -3px; bottom: -3px; width: 4px; margin-left: -2px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 2px var(--ink); left: 0; }
.director__ctl { padding: 16px; display: grid; gap: 16px; }
.ctl { display: grid; gap: 8px; }
.ctl__l { font: 400 14px / 1 var(--f-display); letter-spacing: 0.07em; color: var(--yellow); }
.ctl__l em { font: 700 11px / 1 var(--f-body); letter-spacing: 0.06em; color: var(--cream-3); text-transform: uppercase; margin-left: 6px; }
.reachpick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rbtn { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; padding: 8px 9px; cursor: pointer; text-align: left; border: 3px solid var(--ink); border-radius: 14px; background: #221B38; box-shadow: 2px 4px 0 var(--ink); transition: transform 0.12s var(--out); color: var(--cream); }
.rbtn:hover { transform: translateY(-2px); }
.rbtn i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #352B5A; border: 2.5px solid var(--ink); }
.rbtn i svg { width: 28px; height: 28px; }
.rbtn b { font: 400 16px / 1 var(--f-display); letter-spacing: 0.04em; }
.rbtn small { display: block; font: 700 10.5px / 1.25 var(--f-body); letter-spacing: 0.02em; color: var(--cream-3); margin-top: 3px; }
.rbtn em { position: absolute; right: 7px; top: 6px; font: 400 12px / 1 var(--f-display); color: var(--cream-3); }
.rbtn.is-on { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 60%, var(--yellow-lo)); color: var(--ink); }
.rbtn.is-on i { background: #fff; }
.rbtn.is-on small, .rbtn.is-on em { color: rgba(29, 27, 36, 0.72); }
.killpick { display: flex; flex-wrap: wrap; gap: 6px; }
.kchip { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 10px 0 4px; cursor: pointer; font: 400 14px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--cream-2); background: #221B38; border: 2.5px solid var(--ink); border-radius: 11px; box-shadow: 2px 3px 0 var(--ink); }
.kchip .wico { margin: 0 -4px; }
.kchip.is-on { color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); }
.ctl--note { display: block; padding: 11px 12px; border-radius: 13px; background: rgba(0, 0, 0, 0.25); border: 2px dashed rgba(255, 246, 224, 0.18); font-size: 13px; line-height: 1.45; color: var(--cream-2); }
.ctl--note b { color: var(--yellow); }

.story { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 26px; }
.sframe { position: relative; margin: 0; }
.sframe__pic { position: relative; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 3px 5px 0 var(--ink); background: #0B0820; cursor: pointer; }
.sframe__pic .fs { pointer-events: none; }
.sframe__n { position: absolute; z-index: 20; left: 7px; top: 7px; display: grid; place-items: center; width: 26px; height: 26px; font: 400 15px / 1 var(--f-display); color: var(--ink); background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 8px; transform: rotate(-6deg); }
.sframe figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.35; color: var(--cream-3); }
.sframe figcaption b { display: block; font: 400 15px / 1.1 var(--f-display); letter-spacing: 0.04em; color: var(--cream); }
.story .sframe:not(:last-child)::after { content: ""; position: absolute; right: -11px; top: 26%; width: 10px; height: 10px; border-top: 3px solid var(--yellow); border-right: 3px solid var(--yellow); transform: rotate(45deg); opacity: 0.6; }

.rcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
.rcard { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 12px; border: 3px solid var(--ink); border-radius: 20px; background: var(--card-2); box-shadow: 4px 6px 0 var(--ink); }
.rcard__top { display: flex; align-items: center; gap: 10px; }
.rcard__top i { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--yellow); border: 3px solid var(--ink); transform: rotate(-5deg); box-shadow: 2px 3px 0 var(--ink); }
.rcard__top i svg { width: 30px; height: 30px; }
.rcard__top b { font: 400 21px / 1 var(--f-display); letter-spacing: 0.03em; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.rcard__top small { display: block; font: 400 13px / 1 var(--f-display); color: var(--yellow); letter-spacing: 0.06em; margin-bottom: 3px; -webkit-text-stroke: 0; }
.mini { position: relative; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; background: #0B0820; }
.rcard p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--cream-2); }
.rcard ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.rcard li { font-size: 12.5px; line-height: 1.35; color: var(--cream-3); padding-left: 16px; position: relative; }
.rcard li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 7px; height: 7px; border-radius: 2px; background: var(--yellow); transform: rotate(45deg); }

/* ================================================================== approach cards (3 per decision) */
.opts3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.opt { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 14px; border: 3px solid var(--ink); border-radius: 22px; background: var(--card-2); box-shadow: 5px 7px 0 var(--ink); transition: transform 0.2s var(--out), box-shadow 0.2s; }
.opt.is-picked { box-shadow: 0 0 0 4px var(--yellow), 0 0 40px rgba(255, 210, 63, 0.35), 5px 7px 0 var(--ink); transform: translateY(-3px); }
.opt__top { display: flex; align-items: flex-start; gap: 11px; }
.opt__l { flex: none; display: grid; place-items: center; width: 46px; height: 46px; font: 400 28px / 1 var(--f-display); color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 60%, var(--yellow-lo)); border: 3px solid var(--ink); border-radius: 13px; box-shadow: 2px 4px 0 var(--ink); transform: rotate(-5deg); }
.opt__name { flex: 1; min-width: 0; }
.opt__name h3 { margin: 2px 0 4px; font: 400 22px / 1.02 var(--f-display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.opt__name small { display: block; font: 700 11.5px / 1.2 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-3); }
.opt .rec { position: absolute; right: -8px; top: -14px; transform: rotate(4deg); z-index: 5; }
.opt p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--cream-2); }
.opt p b { color: var(--yellow); }
.opt__why { padding: 9px 11px; border-radius: 12px; background: rgba(124, 255, 163, 0.08); border: 2px solid rgba(124, 255, 163, 0.25); font-size: 13px; color: var(--cream); }
.opt__why b { color: var(--mint) !important; }
.opt__pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.opt__pick .pick { transform: none; }
.minph { position: relative; }
.variant { margin-top: 20px; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; align-items: center; }
.variant__t b { display: block; font: 400 20px / 1 var(--f-display); letter-spacing: 0.03em; color: var(--yellow); margin-bottom: 5px; }
.variant__t span { font-size: 13.5px; color: var(--cream-2); }
.variant__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vopt { position: relative; display: grid; gap: 7px; padding: 8px; border: 3px solid var(--ink); border-radius: 16px; background: #221B38; box-shadow: 3px 4px 0 var(--ink); }
.vopt.is-picked { box-shadow: 0 0 0 3px var(--yellow), 3px 4px 0 var(--ink); }
.vopt__art { height: 86px; border-radius: 10px; background: radial-gradient(80% 100% at 50% 0%, #3A2E6E, #120C24); border: 2px solid var(--ink); position: relative; overflow: hidden; }
.vopt__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vopt b { font: 400 15px / 1 var(--f-display); letter-spacing: 0.04em; }
.vopt small { font-size: 11.5px; line-height: 1.3; color: var(--cream-3); }
.vopt .rec { position: absolute; right: -6px; top: -11px; font-size: 11px; padding: 3px 6px 2px; transform: rotate(4deg); }
.vopt .pick { height: 34px; font-size: 14px; padding: 0 10px 0 7px; border-radius: 10px; box-shadow: inset 0 2px 0 #fff, 2px 3px 0 var(--ink); transform: none; justify-self: start; }
.vopt .pick .pick__box { width: 18px; height: 18px; border-width: 2.5px; border-radius: 5px; }
.vopt .pick .pick__box svg { width: 13px; height: 13px; }

/* ================================================================== 04 random simulator */
.sim { display: grid; gap: 10px; min-width: 0; }
.sim__mech { position: relative; height: 170px; border-radius: 16px; border: 3px solid var(--ink); background: radial-gradient(90% 110% at 50% 0%, #3A2E6E, #120C24); overflow: hidden; }
.sim__mech svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sim__rounds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; min-height: 120px; align-content: start; }
.rnd { position: relative; display: grid; justify-items: center; gap: 3px; padding: 5px 0 4px; border-radius: 9px; background: #1B1530; border: 2px solid var(--ink); }
.rnd i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--ink); background: #2E2650; }
.rnd i svg { width: 19px; height: 19px; }
.rnd small { font: 800 9.5px / 1 var(--f-body); letter-spacing: 0.02em; color: var(--cream-3); }
.rnd b { font: 400 11px / 1 var(--f-display); letter-spacing: 0.02em; color: var(--cream-2); white-space: nowrap; }
.rnd em { position: absolute; left: 3px; top: 2px; font: 400 9px / 1 var(--f-display); color: var(--cream-3); }
.rnd.is-new { animation: rndpop 0.35s var(--spring); }
.rnd.is-rep { box-shadow: 0 0 0 2px #FF8FA8; }
@keyframes rndpop { 0% { transform: scale(0.4) rotate(-10deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.st-a i { background: #FFD23F !important; } .st-b i { background: #FF4FA3 !important; } .st-c i { background: #3FEAF5 !important; } .st-d i { background: #7CFFA3 !important; }
.sim__bars { display: grid; gap: 4px; }
.sbar { display: grid; grid-template-columns: 74px 1fr 34px; gap: 8px; align-items: center; font: 400 12px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--cream-2); }
.sbar span { height: 12px; border-radius: 6px; background: #1B1530; border: 2px solid var(--ink); overflow: hidden; }
.sbar span i { display: block; height: 100%; width: 0; transition: width 0.5s var(--out); }
.sbar em { text-align: right; color: var(--cream-3); }
.sim__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--cream-3); }

/* ================================================================== 05 edge cases */
.edges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.edge { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 12px; border: 3px solid var(--ink); border-radius: 20px; background: var(--card-2); box-shadow: 4px 6px 0 var(--ink); transition: box-shadow 0.2s; }
.edge.is-picked { box-shadow: 0 0 0 4px #FF8FA8, 4px 6px 0 var(--ink); }
.edge__vis { position: relative; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; background: #0B0820; aspect-ratio: 998 / 460; }
.edge__vis > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.edge__vis .fs { position: absolute; inset: 0; }
.edge__n { position: absolute; z-index: 30; left: -8px; top: -10px; display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; font: 400 17px / 1 var(--f-display); color: var(--ink); background: var(--cream); border: 3px solid var(--ink); border-radius: 10px; box-shadow: 2px 3px 0 var(--ink); transform: rotate(-6deg); }
.edge h3 { margin: 0; font: 400 19px / 1.05 var(--f-display); letter-spacing: 0.02em; color: #fff; }
.edge__ans { margin: 0; font-size: 13px; line-height: 1.48; color: var(--cream-2); }
.edge__ans b { color: var(--yellow); }
.edge__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.edge__ok { display: inline-flex; align-items: center; gap: 6px; font: 400 13px / 1 var(--f-display); letter-spacing: 0.06em; color: var(--mint); }
.edge__ok::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--green); border: 2px solid var(--ink); box-shadow: inset 0 0 0 3px #A8FFC6; }
.edge.is-picked .edge__ok { color: #FF8FA8; }
.edge.is-picked .edge__ok::before { background: #FF5A6E; box-shadow: none; }
/* the OK / CHANGE switch (a .pick, so the pick bar collects it) */
.pick.kc { height: 34px; padding: 3px; gap: 0; border-radius: 11px; background: #15101F; box-shadow: 2px 3px 0 var(--ink); transform: none; font-size: 13px; color: var(--cream-3); }
.pick.kc:hover { transform: none; box-shadow: 2px 3px 0 var(--ink); }
.pick.kc:active { transform: translate(1px, 2px); box-shadow: 0 1px 0 var(--ink); }
.pick.kc > span { display: grid; place-items: center; height: 100%; padding: 0 10px; border-radius: 8px; letter-spacing: 0.05em; transition: background 0.2s, color 0.2s; }
.pick.kc .kc__a { background: linear-gradient(180deg, #8DF7B2, var(--green)); color: var(--ink); }
.pick.kc.is-picked { background: #15101F; }
.pick.kc.is-picked .kc__a { background: none; color: var(--cream-3); }
.pick.kc.is-picked .kc__b { background: linear-gradient(180deg, #FFB0C0, #FF5A6E); color: var(--ink); }

/* edge diagrams */
.diag text { font-family: var(--f-display); }

/* ================================================================== 06 library */
.libstats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.lstat { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 14px; border: 3px solid var(--ink); border-radius: 14px; background: var(--card-2); box-shadow: 3px 4px 0 var(--ink); }
.lstat b { font: 400 26px / 1 var(--f-display); color: var(--yellow); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.lstat span { font: 700 12px / 1.2 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-2); }
.lstat--e b { color: var(--sky); } .lstat--n b { color: var(--mint); } .lstat--r b { color: #FFB3D6; }
.rule { padding: 14px 16px; margin-bottom: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.rule__t b { display: block; font: 400 20px / 1 var(--f-display); letter-spacing: 0.03em; color: var(--yellow); }
.rule__t span { font-size: 12.5px; color: var(--cream-3); }
.rule__flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rstep { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px 7px 7px; border-radius: 12px; border: 2.5px solid var(--ink); background: #221B38; font-size: 12.5px; line-height: 1.25; color: var(--cream-2); max-width: 270px; }
.rstep i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--yellow); border: 2px solid var(--ink); font: 400 15px / 1 var(--f-display); font-style: normal; color: var(--ink); }
.rstep b { color: #fff; }
.rarrow { font: 400 20px / 1 var(--f-display); color: var(--yellow); }

.rail { position: sticky; top: 62px; z-index: 60; margin: 0 -22px 16px; padding: 10px 22px; background: rgba(14, 10, 29, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 2px solid rgba(255, 246, 224, 0.08); border-bottom: 3px solid var(--ink); }
.rail__in { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: thin; padding: 6px 2px 8px; scroll-snap-type: x proximity; }
.rgroup { flex: none; display: grid; gap: 5px; scroll-snap-align: start; }
.rgroup > b { font: 800 10px / 1 var(--f-body); letter-spacing: 0.14em; color: var(--cream-3); padding-left: 3px; }
.rgroup > div { display: flex; gap: 6px; }
.rw { position: relative; flex: none; display: grid; justify-items: center; align-content: center; gap: 1px; width: 76px; height: 64px; padding: 0; cursor: pointer; border: 3px solid var(--ink); border-radius: 13px; background: linear-gradient(180deg, #352B5A, #1F1838); box-shadow: 2px 4px 0 var(--ink); transition: transform 0.14s var(--out); }
.rw:hover { transform: translateY(-3px) rotate(-1.5deg); }
.rw .wico { margin-top: -4px; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.5)); }
.rw span { font: 400 10.5px / 1 var(--f-display); letter-spacing: 0.03em; color: var(--cream-2); white-space: nowrap; max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
.rw.is-on { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 60%, var(--yellow-lo)); transform: translateY(-3px); }
.rw.is-on span { color: var(--ink); }
.rw em { position: absolute; right: -6px; top: -7px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; font: 400 11px / 1 var(--f-display); color: var(--ink); background: var(--cream); border: 2px solid var(--ink); border-radius: 9px; }
.rw.has-change em { background: #FF8FA8; }
.rw--gen { width: 92px; background: linear-gradient(180deg, #5A3FD0, #2E1F80); }
.rw--gen .fist { width: 34px; height: 34px; margin-top: -2px; }
.libzone { position: relative; }
.libmain__stage { position: sticky; top: 196px; }
.libmain { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr); gap: 22px; align-items: start; }
.libmain__bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.libmain__w { flex: 1; display: flex; align-items: center; gap: 8px; font: 400 22px / 1 var(--f-display); letter-spacing: 0.03em; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; min-width: 0; }
.libmain__w small { font: 800 11px / 1 var(--f-body); letter-spacing: 0.1em; color: var(--cream-3); -webkit-text-stroke: 0; }
.libmain__list { display: grid; gap: 14px; }
.kcard { position: relative; display: grid; gap: 9px; padding: 12px; border: 3px solid var(--ink); border-radius: 18px; background: var(--card-2); box-shadow: 4px 6px 0 var(--ink); cursor: pointer; transition: transform 0.15s var(--out), box-shadow 0.15s; }
.kcard:hover { transform: translateY(-2px); }
.kcard.is-playing { box-shadow: 0 0 0 4px var(--yellow), 4px 6px 0 var(--ink); }
.kcard.is-picked { box-shadow: 0 0 0 4px #FF8FA8, 4px 6px 0 var(--ink); }
.kcard__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kcard__top h4 { margin: 0; font: 400 22px / 1 var(--f-display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.ktag { display: inline-block; padding: 4px 7px 3px; font: 400 11.5px / 1 var(--f-display); letter-spacing: 0.07em; border: 2px solid var(--ink); border-radius: 6px; color: var(--ink); }
.ktag--existing { background: var(--sky); }
.ktag--new { background: var(--mint); }
.ktag--renamed { background: #FFB3D6; }
.ktag--was { background: #3A3060; color: var(--cream-2); text-decoration: line-through; text-decoration-thickness: 2px; }
.ktag--fav { background: var(--yellow); }
.kcard p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--cream-2); }
.kstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.kstrip figure { position: relative; margin: 0; }
.kstrip .pic { position: relative; border: 2.5px solid var(--ink); border-radius: 9px; overflow: hidden; background: #0B0820; aspect-ratio: 998 / 460; }
.kstrip figcaption { margin-top: 4px; font: 400 10.5px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--cream-3); text-align: center; }
.kstrip figure i { position: absolute; z-index: 5; left: 4px; top: 4px; width: 17px; height: 17px; display: grid; place-items: center; font: 400 11px / 1 var(--f-display); font-style: normal; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 5px; }
.kcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kcard__play { font: 400 13px / 1 var(--f-display); letter-spacing: 0.05em; color: var(--yellow); display: inline-flex; align-items: center; gap: 6px; }
.kcard__play::before { content: ""; width: 0; height: 0; border-left: 9px solid var(--yellow); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.kcard.is-playing .kcard__play::after { content: "PLAYING"; margin-left: 2px; color: var(--ink); background: var(--yellow); padding: 2px 5px 1px; border-radius: 5px; border: 2px solid var(--ink); font-size: 11px; }

.names { margin-top: 28px; padding: 18px; }
.names__head h3 { margin: 6px 0 6px; font: 400 26px / 1 var(--f-display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.names__head p { margin: 0 0 14px; font-size: 13.5px; color: var(--cream-2); max-width: 90ch; }
.names__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin-bottom: 16px; }
.nrow { display: grid; grid-template-columns: auto 18px auto; gap: 8px; align-items: center; justify-content: start; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 2px solid rgba(255, 246, 224, 0.1); }
.nrow s { font: 400 14px / 1 var(--f-display); letter-spacing: 0.03em; color: #FF9AAE; text-decoration-thickness: 2px; }
.nrow i { font-style: normal; color: var(--yellow); font: 400 16px / 1 var(--f-display); }
.nrow b { font: 400 15px / 1 var(--f-display); letter-spacing: 0.03em; color: var(--mint); }
.nrow small { grid-column: 1 / -1; font-size: 11.5px; color: var(--cream-3); }
.names__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nopt { position: relative; display: grid; gap: 8px; padding: 12px; border: 3px solid var(--ink); border-radius: 16px; background: #221B38; box-shadow: 3px 5px 0 var(--ink); }
.nopt.is-picked { box-shadow: 0 0 0 3px var(--yellow), 3px 5px 0 var(--ink); }
.nopt .rec { position: absolute; right: -6px; top: -12px; transform: rotate(4deg); }
.nopt__card { position: relative; height: 96px; border-radius: 12px; background: radial-gradient(80% 100% at 50% 20%, #33285C, #120C24); border: 2px solid var(--ink); overflow: hidden; }
.nopt__card .kocard { top: 50%; }
.nopt b.t { font: 400 17px / 1 var(--f-display); letter-spacing: 0.03em; }
.nopt small { font-size: 12px; line-height: 1.35; color: var(--cream-3); }
.nopt .pick { justify-self: start; transform: none; height: 38px; font-size: 16px; }

.wall { margin-top: 30px; }
.wall__h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.wall__h h3 { margin: 0; font: 400 24px / 1 var(--f-display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.wall__h span { font-size: 13px; color: var(--cream-3); }
.wall__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 8px; }
.wt { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: center; padding: 7px 8px 7px 4px; cursor: pointer; text-align: left; border: 2.5px solid var(--ink); border-radius: 13px; background: #1E1834; box-shadow: 2px 3px 0 var(--ink); color: var(--cream); transition: transform 0.12s var(--out); }
.wt:hover { transform: translateY(-2px); background: #2A2148; }
.wt__k { display: grid; gap: 3px; min-width: 0; }
.wt__k b { font: 400 13.5px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--yellow); }
.wt__k span { display: flex; align-items: center; gap: 5px; font: 400 12px / 1.1 var(--f-display); letter-spacing: 0.02em; color: var(--cream-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt__k span i { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink); }
.dot-existing { background: var(--sky); } .dot-new { background: var(--mint); } .dot-renamed { background: #FFB3D6; }

/* ================================================================== 07 our picks */
.ours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.our { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; padding: 14px; border: 3px solid var(--ink); border-radius: 18px; background: var(--card-2); box-shadow: 4px 6px 0 var(--ink); }
.our i { display: grid; place-items: center; width: 52px; height: 52px; font: 400 26px / 1 var(--f-display); font-style: normal; color: var(--ink); background: linear-gradient(180deg, #8DF7B2, var(--green)); border: 3px solid var(--ink); border-radius: 14px; transform: rotate(-5deg); }
.our b { display: block; font: 400 17px / 1.1 var(--f-display); letter-spacing: 0.03em; color: var(--yellow); margin-bottom: 4px; }
.our span { font-size: 13px; line-height: 1.45; color: var(--cream-2); }
.our em { display: block; margin-top: 4px; font: 400 15px / 1.1 var(--f-display); color: #fff; letter-spacing: 0.02em; }
.nextpage { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 18px 22px; text-decoration: none; border: 4px solid var(--ink); border-radius: 22px; background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 60%, var(--yellow-lo)); box-shadow: 5px 8px 0 var(--ink); color: var(--ink) !important; transition: transform 0.15s var(--out); }
.nextpage:hover { transform: translateY(-3px) rotate(-0.4deg); }
.nextpage span { font: 400 30px / 1 var(--f-display); letter-spacing: 0.02em; }
.nextpage small { display: block; font: 800 12px / 1 var(--f-body); letter-spacing: 0.14em; margin-bottom: 6px; }
.nextpage i { font: 400 56px / 1 var(--f-display); font-style: normal; }

/* ================================================================== the stage */
.fs { position: relative; display: block; width: 100%; overflow: hidden; background: #0B0820; contain: layout paint; isolation: isolate; }
.fs__c { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.fs__w { position: absolute; left: 0; top: 0; width: 1600px; height: 740px; transform-origin: 0 0; }
.fs__bg { position: absolute; left: 0; top: 0; width: 1600px; height: 740px; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.fs__back, .fs__front { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.fs__acts { position: absolute; left: 0; top: 0; width: 1600px; height: 740px; pointer-events: none; }
.fs-act { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: block; }
.fs__scr { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 4; }
.fs__vig { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(75% 85% at 50% 50%, transparent 50%, rgba(4, 2, 12, 0.92) 100%); opacity: 0.35; }
.fs__grade { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.fs__lb { position: absolute; left: 0; right: 0; height: 0; z-index: 6; background: #05030C; pointer-events: none; }
.fs__lb--t { top: 0; box-shadow: 0 2px 0 rgba(255, 246, 224, 0.08); }
.fs__lb--b { bottom: 0; box-shadow: 0 -2px 0 rgba(255, 246, 224, 0.08); }
.fs__flash { position: absolute; inset: 0; z-index: 7; background: #FFFDF6; opacity: 0; pointer-events: none; }
.fs__ui { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.fs__ui > * { pointer-events: auto; }
.fs__ui .pe-none { pointer-events: none; }
.wico { display: inline-block; flex: none; background-repeat: no-repeat; }

/* the in-match HUD inside a stage (canvas units: the stage is 998 wide) */
.fhud { position: absolute; inset: 0; transition: none; }
.fhud__pause { position: absolute; left: 86px; top: 14px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; background: linear-gradient(180deg, #3A3458, #1E1B2B); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.fhud__pause b { width: 6px; height: 18px; border-radius: 2px; background: #fff; }
.fhud__cards { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; gap: 8px; }
.fhud__card { display: grid; gap: 4px; padding: 6px 10px 7px; min-width: 150px; border-radius: 12px; background: linear-gradient(180deg, #2E2A40, #17151F); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.fhud__name { display: flex; align-items: center; gap: 6px; font: 900 13px / 1 var(--f-body); letter-spacing: 0.02em; color: #fff; }
.fhud__name::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); }
.fhud__hp { height: 7px; border-radius: 4px; background: #0B0A10; overflow: hidden; }
.fhud__hp i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #5BE38A, #1FBF5C); }
.fhud__hp--v i { background: linear-gradient(90deg, #FF8FA8, #FF4F6E); }
.fhud__round { position: absolute; left: 50%; top: 74px; transform: translateX(-50%); font: 800 14px / 1 var(--f-body); letter-spacing: 0.06em; color: #FFF6E0; text-shadow: 0 2px 0 var(--ink), 0 0 6px rgba(0, 0, 0, 0.6); white-space: nowrap; }

/* ================================================================== the K.O. card (the game's KillCard look) */
.kocard { position: absolute; left: 50%; top: 44%; z-index: 9; display: grid; justify-items: center; gap: 12px; transform: translate(-50%, -50%) rotate(-4deg); pointer-events: none; }
.kocard__panel { position: relative; width: 392px; height: 166px; display: grid; place-items: center; align-content: center; gap: 2px; border: 6px solid var(--ink); border-radius: 12px; overflow: hidden;
  background: radial-gradient(60% 80% at 50% 45%, #FF4B5E, #D41C33 70%, #A6122A); box-shadow: 9px 11px 0 var(--ink); }
.kocard__rays { position: absolute; inset: -60%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.2) 0 8deg, transparent 8deg 16deg); animation: korays 9s linear infinite; }
.kocard__dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.28) 2px, transparent 2.6px); background-size: 11px 11px; -webkit-mask-image: linear-gradient(120deg, transparent 45%, #000 95%); mask-image: linear-gradient(120deg, transparent 45%, #000 95%); }
.kocard__t { position: relative; font: 400 78px / 0.9 var(--f-display); letter-spacing: 0.01em; color: #fff; -webkit-text-stroke: 12px var(--ink); paint-order: stroke fill; text-shadow: 5px 7px 0 var(--ink); margin-top: 4px; white-space: nowrap; }
.kocard__sub { position: relative; padding: 5px 16px 3px; font: 400 24px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--ink); background: var(--cream); border: 4px solid var(--ink); border-radius: 6px; box-shadow: 3px 4px 0 var(--ink); white-space: nowrap; }
.kocard__cap { font: 400 17px / 1 var(--f-display); letter-spacing: 0.06em; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; white-space: nowrap; transform: rotate(4deg); }
.kocard__cap em { font-style: normal; color: var(--yellow); }
.kocard.is-in { animation: koslam 0.55s var(--spring) both; }
.kocard.is-still { animation: none; }
@keyframes koslam { 0% { transform: translate(-50%, -50%) rotate(-14deg) scale(2.6); opacity: 0; } 45% { transform: translate(-50%, -50%) rotate(-2deg) scale(0.9); opacity: 1; } 70% { transform: translate(-50%, -50%) rotate(-5deg) scale(1.04); } 100% { transform: translate(-50%, -50%) rotate(-4deg) scale(1); } }
@keyframes korays { to { transform: rotate(360deg); } }
.kocard--sm { transform: translate(-50%, -50%) rotate(-4deg) scale(0.62); }
.kocard--sm.is-in { animation-name: koslamsm; }
@keyframes koslamsm { 0% { transform: translate(-50%, -50%) rotate(-14deg) scale(1.6); opacity: 0; } 45% { transform: translate(-50%, -50%) rotate(-2deg) scale(0.56); opacity: 1; } 70% { transform: translate(-50%, -50%) rotate(-5deg) scale(0.65); } 100% { transform: translate(-50%, -50%) rotate(-4deg) scale(0.62); } }
.kocard--xs { transform: translate(-50%, -50%) rotate(-4deg) scale(0.36); }

.kocard__t.is-long { font-size: 58px; -webkit-text-stroke-width: 10px; margin-top: 10px; }
.wt--gen { grid-column: span 2; }
.wt--gen .wt__k { grid-template-columns: 1fr 1fr; column-gap: 10px; }
.wt--gen .wt__k b { grid-column: 1 / -1; }
.edge--rule { grid-column: span 2; grid-template-rows: auto 1fr; background: linear-gradient(180deg, #3B2D6E, #211843); }
.edge--rule h3 { font-size: 24px; color: var(--yellow); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.rulegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.rulebox { display: grid; gap: 6px; padding: 12px; border-radius: 14px; border: 3px solid var(--ink); background: rgba(0, 0, 0, 0.22); }
.rulebox b { font: 400 18px / 1.05 var(--f-display); letter-spacing: 0.03em; }
.rulebox span { font-size: 13px; line-height: 1.45; color: var(--cream-2); }
.rulebox--y { box-shadow: inset 0 0 0 2px rgba(124, 255, 163, 0.35); } .rulebox--y b { color: var(--mint); }
.rulebox--n { box-shadow: inset 0 0 0 2px rgba(255, 143, 168, 0.35); } .rulebox--n b { color: #FF9AAE; }
.rulebox ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--cream-2); }

/* ================================================================== responsive */
@media (max-width: 1180px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .director, .libmain { grid-template-columns: minmax(0, 1fr); }
  .libmain__stage { position: relative; top: 0; }
  .edge--rule { grid-column: 1 / -1; }
  .rcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gapwrap { grid-template-columns: minmax(0, 1fr); }
  .modes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .opts3 { grid-template-columns: minmax(0, 1fr); }
  .variant { grid-template-columns: minmax(0, 1fr); }
  .ours { grid-template-columns: minmax(0, 1fr); }
  .story { grid-template-columns: repeat(3, 1fr); }
  .names__opts { grid-template-columns: minmax(0, 1fr); }
  .fbar__nav { display: none; }
  .fbar__brand span { white-space: normal; }
}
@media (max-width: 640px) {
  .fwrap { padding: 0 16px; }
  .fbar__in { padding: 9px 16px; }
  .rail { margin: 0 -16px 14px; padding: 8px 16px; }
  .hero { padding-top: 28px; }
  .htitle__a { font-size: 30px; -webkit-text-stroke-width: 7px; }
  .htitle__b { -webkit-text-stroke-width: 8px; }
  .asks { grid-template-columns: minmax(0, 1fr); }
  .rcards, .edges, .modes { grid-template-columns: minmax(0, 1fr); }
  .rulegrid { grid-template-columns: minmax(0, 1fr); }
  .wt--gen { grid-column: auto; }
  .story { grid-template-columns: repeat(2, 1fr); }
  .story .sframe:last-child { grid-column: 1 / -1; }
  .story .sframe::after { display: none; }
  .sech { gap: 12px; }
  .secn { width: 54px; height: 54px; font-size: 28px; border-radius: 14px; }
  .reachpick { grid-template-columns: minmax(0, 1fr); }
  .variant__opts { grid-template-columns: minmax(0, 1fr); }
  .rule { grid-template-columns: minmax(0, 1fr); }

  .scrub__beats span { font-size: 0; }
  .nextpage span { font-size: 22px; }
  .fbar__brand span { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kocard.is-in, .kocard__rays, .rnd.is-new { animation: none; }
  .asks a, .rw, .kcard, .opt { transition: none; }
}
html.rm .kocard.is-in, html.rm .kocard__rays, html.rm .rnd.is-new { animation: none; }
@media (max-width: 640px) {
  .fin .pickbar__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .fin .pickbar__list::-webkit-scrollbar { display: none; }
  .fin .pickbar__chip { flex: none; }
}
/* brutal round: extra tags */
.ktag--was2 { background: #4B3A9C; color: #fff; }
.lstat--f b { color: var(--yellow); }
.dot-fav { box-shadow: 0 0 0 2px var(--yellow); }
.wdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink); vertical-align: 0; margin-right: 3px; }
.fs__bloodtag { position: absolute; z-index: 20; right: 8px; top: 8px; }