/* Pages 36 + 37 (team feedback 20 Oct): page chrome in T1 SPOTLIGHT + DARK VIVID, the interactive mode-select phones,
   merge maps, naming board. Builds on ../kit.css (tokens, device frames), fbkit.css (PICK + pick bar),
   31_modes_art.css (mode identities) and 32_ml.css (the picked MODE SELECT screen pieces). */

/* ================================================================ page chrome */
:root { --night-1: #3A2D73; --night-2: #231B49; --night-3: #140F2A; --night-4: #0F0C20; --mint: #7CFFA3; --rose: #FF6B8B; }
html { scroll-behavior: smooth; }
body.tm { margin: 0; min-height: 100vh; color: var(--cream); font: 500 15px / 1.5 var(--f-body); -webkit-font-smoothing: antialiased; padding-bottom: 130px; overflow-x: hidden;
  background:
    radial-gradient(55% 34% at 50% -6%, rgba(255, 246, 224, 0.16), transparent 70%),
    radial-gradient(36% 46% at 4% 0%, rgba(255, 79, 163, 0.16), transparent 70%),
    radial-gradient(36% 46% at 96% 0%, rgba(63, 154, 255, 0.18), transparent 70%),
    linear-gradient(180deg, var(--night-1), var(--night-2) 26%, var(--night-3) 62%, var(--night-4)); background-color: var(--night-4); }
.tm *, .tm *::before, .tm *::after { box-sizing: border-box; }
.tm .wrap { max-width: 1320px; margin: 0 auto; padding: 0 22px; }
.tm b, .tm strong { color: #fff; }
.tm .mute { color: var(--cream-3); }

/* header */
.top { position: relative; padding: 30px 0 6px; text-align: center; }
.top .kick { font: 800 12px/1 var(--f-body); letter-spacing: .18em; color: var(--cream-3); text-transform: uppercase; }
.top h1 { margin: 12px 0 0; font: 400 clamp(40px, 7vw, 84px)/.92 var(--f-display); color: var(--yellow); letter-spacing: .01em;
  -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill; text-shadow: 0 7px 0 var(--ink); }
.top h1 span { color: #fff; }
.top h1 small { display: block; font-size: .42em; color: var(--cream); -webkit-text-stroke-width: 6px; text-shadow: 0 4px 0 var(--ink); margin-top: 8px; letter-spacing: .04em; }
.notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 22px auto 6px; max-width: 1180px; }
.note { position: relative; max-width: 330px; padding: 11px 14px 11px 42px; border: 3px solid var(--ink); border-radius: 14px; background: var(--cream); color: var(--ink);
  font: 700 13.5px/1.35 var(--f-body); box-shadow: 2px 4px 0 var(--ink); text-align: left; transform: rotate(var(--r, 0deg)); }
.note::before { content: "\201C"; position: absolute; left: 10px; top: 3px; font: 400 42px/1 var(--f-display); color: var(--pink); }
.note em { display: block; margin-top: 4px; font: 800 10px/1 var(--f-body); letter-spacing: .12em; color: rgba(29, 27, 36, .5); font-style: normal; text-transform: uppercase; }
.note:nth-child(1) { --r: -1.4deg; } .note:nth-child(2) { --r: .9deg; } .note:nth-child(3) { --r: -.6deg; } .note:nth-child(4) { --r: 1.2deg; }
.lede { max-width: 900px; margin: 16px auto 0; text-align: center; color: var(--cream-2); font-size: 15.5px; }
.lede b { color: #fff; }

/* sticky section nav */
nav.toc { position: sticky; top: 0; z-index: 120; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 12px 8px 14px; margin: 18px -22px 0;
  background: linear-gradient(180deg, rgba(20, 15, 42, .97) 76%, rgba(20, 15, 42, 0)); }
nav.toc a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--cream); border: 3px solid var(--ink); border-radius: 999px;
  padding: 5px 13px 5px 5px; background: var(--panel-2); box-shadow: 2px 4px 0 var(--ink); font: 400 14.5px/1 var(--f-display); letter-spacing: .04em; white-space: nowrap; }
nav.toc a i { width: 23px; height: 23px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; font-style: normal; font-size: 13px; border: 2px solid var(--ink); }
nav.toc a:hover { background: var(--panel-3); }
nav.toc a.is-done i { background: var(--mint); }

/* sections */
section.sec { margin: 56px 0 0; scroll-margin-top: 70px; }
.sec-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: end; margin-bottom: 18px; }
.sec-num { grid-row: span 2; font: 400 74px/.78 var(--f-display); color: var(--panel-3); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.sec-head .tag { font: 800 11.5px/1 var(--f-body); letter-spacing: .16em; color: var(--yellow); text-transform: uppercase; }
.sec-head h2 { margin: 2px 0 0; font: 400 clamp(28px, 3.4vw, 40px)/1 var(--f-display); color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); letter-spacing: .01em; }
.sec-head p { grid-column: 2; margin: 6px 0 0; color: var(--cream-2); max-width: 860px; }
.sec-head p b { color: #fff; }

.panel2 { border: 3px solid var(--ink); border-radius: 20px; box-shadow: 3px 7px 0 var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, var(--panel-3), var(--panel-2) 60%, var(--panel)); }

/* small chips + badges */
.chip { display: inline-flex; align-items: center; gap: 5px; font: 800 10.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; border: 2px solid var(--ink); background: var(--panel); color: var(--cream-2); white-space: nowrap; }
.rec { display: inline-flex; align-items: center; gap: 6px; font: 400 14px/1 var(--f-display); letter-spacing: .08em; color: var(--ink); background: linear-gradient(180deg, #B8FFCF, var(--mint)); border: 3px solid var(--ink); border-radius: 10px; padding: 6px 10px 5px; box-shadow: 2px 4px 0 var(--ink); transform: rotate(2.5deg); white-space: nowrap; }
.why1 { display: inline-flex; gap: 8px; align-items: baseline; margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(124, 255, 163, .1); border: 2px dashed rgba(124, 255, 163, .45); color: var(--cream-2); font-size: 14px; }
.why1 b { font: 400 14px/1 var(--f-display); letter-spacing: .06em; color: var(--mint); white-space: nowrap; }

/* segmented switch */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 3px solid var(--ink); border-radius: 13px; background: #151126; box-shadow: 2px 4px 0 var(--ink); }
.seg button { cursor: pointer; border: 0; border-radius: 9px; padding: 8px 12px 7px; background: transparent; color: var(--cream-2); font: 400 15px/1 var(--f-display); letter-spacing: .04em; }
.seg button:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.seg button.on { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); color: var(--ink); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.seg .lbl { align-self: center; padding: 0 6px 0 8px; font: 800 10px/1 var(--f-body); letter-spacing: .14em; color: var(--cream-3); }
.btn2 { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; border: 3px solid var(--ink); border-radius: 12px; padding: 9px 14px 8px; background: linear-gradient(180deg, #4D4675, #3A3458 55%, #2A2640); color: #fff; font: 400 15px/1 var(--f-display); letter-spacing: .05em; box-shadow: 2px 4px 0 var(--ink); }
.btn2:hover { transform: translateY(-1px); }
.btn2:active { transform: translate(1px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn2 svg { width: 18px; height: 18px; display: block; }
.btn2--y { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); color: var(--ink); }
.btn2.is-on { background: linear-gradient(180deg, #B8FFCF, var(--mint)); color: var(--ink); }

/* phone figures */
.ph { margin: 0; position: relative; }
.ph .dev { cursor: default; }
.ph figcaption { margin-top: 10px; display: flex; gap: 9px; align-items: baseline; font: 600 13.5px/1.4 var(--f-body); color: var(--cream-2); }
.ph figcaption b { font: 400 15px/1 var(--f-display); letter-spacing: .05em; color: var(--yellow); white-space: nowrap; }
.ph figcaption .tn { flex: none; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; font: 400 12.5px/1 var(--f-display); color: var(--ink); background: var(--cream); border: 2px solid var(--ink); transform: translateY(-2px); }
.phbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; }
.phbar .hint { font: 700 12.5px/1.3 var(--f-body); color: var(--cream-3); }
.phbar .hint i { font-style: normal; color: var(--yellow); }

/* ================================================================ the approach panel */
.way { position: relative; margin-top: 30px; padding: 26px 26px 28px; border: 4px solid var(--ink); border-radius: 30px; box-shadow: 4px 9px 0 var(--ink); scroll-margin-top: 70px;
  background: radial-gradient(70% 50% at 50% 0%, rgba(255, 246, 224, .07), transparent 70%), linear-gradient(180deg, #3A3458, #2A2640 45%, #1E1B2B); }
.way.is-rec { background: radial-gradient(70% 50% at 50% 0%, rgba(255, 210, 63, .12), transparent 70%), linear-gradient(180deg, #403A62, #2A2640 45%, #1E1B2B); }
.way.is-picked { box-shadow: 4px 9px 0 var(--ink), 0 0 0 4px var(--yellow), 0 0 44px 8px rgba(255, 210, 63, .22); }
.way__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.way__letter { width: 74px; height: 74px; border-radius: 20px; display: grid; place-items: center; font: 400 46px/1 var(--f-display); color: var(--ink);
  background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); border: 4px solid var(--ink); box-shadow: 3px 6px 0 var(--ink); transform: rotate(-4deg); }
.way__name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.way__name h3 { margin: 0; font: 400 clamp(28px, 3.2vw, 40px)/1 var(--f-display); color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); letter-spacing: .02em; }
.way__idea { margin: 7px 0 0; color: var(--cream-2); font-size: 15.5px; max-width: 86ch; }
.way__idea b { color: #fff; }
.way__count { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cnt { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px 5px; border-radius: 10px; background: rgba(8, 6, 18, .5); border: 2px solid rgba(255, 246, 224, .14); font: 800 11px/1 var(--f-body); letter-spacing: .1em; color: var(--cream-3); text-transform: uppercase; }
.cnt b { font: 400 19px/1 var(--f-display); color: var(--yellow); letter-spacing: .02em; }
.cnt s { color: var(--cream-3); text-decoration-thickness: 2px; font: 400 15px/1 var(--f-display); }
.way__stage { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; align-items: start; }
.steps { display: grid; gap: 8px; counter-reset: st; }
.step { cursor: pointer; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 14px; background: rgba(13, 11, 22, .5); box-shadow: 2px 4px 0 var(--ink); text-align: left; color: var(--cream-2); font: 500 13px/1.4 var(--f-body); }
.step:hover { background: rgba(13, 11, 22, .72); }
.step b.n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 400 15px/1 var(--f-display); color: var(--ink); background: var(--cream); border: 2.5px solid var(--ink); }
.step strong { display: block; font: 400 15.5px/1.1 var(--f-display); letter-spacing: .04em; color: #fff; margin-bottom: 2px; }
.step.on { background: linear-gradient(180deg, rgba(255, 210, 63, .2), rgba(255, 210, 63, .06)); border-color: var(--ink); box-shadow: 2px 4px 0 var(--ink), inset 0 0 0 2px rgba(255, 210, 63, .7); }
.step.on b.n { background: var(--yellow); }
.step.done b.n { background: var(--mint); }
.way__pick { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.way__pick small { color: var(--cream-3); font-size: 13px; }
.varrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; }
.varrow > span { font: 400 15px/1 var(--f-display); letter-spacing: .05em; color: var(--cream-2); }

/* needs strip (every real need still reachable) */
.needs { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; }
.need { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 10px; border-radius: 12px; background: rgba(8, 6, 18, .45); border: 2px solid rgba(255, 246, 224, .1); }
.need i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); border: 2.5px solid var(--ink); }
.need i svg { width: 13px; height: 13px; display: block; }
.need b { display: block; font: 400 13.5px/1.1 var(--f-display); letter-spacing: .04em; color: #fff; }
.need span { font: 600 11.5px/1.35 var(--f-body); color: var(--cream-3); }
.need span em { font-style: normal; color: var(--yellow); }

/* ================================================================ merge map */
.mm2 { margin-top: 22px; position: relative; padding: 18px; border-radius: 22px; background: rgba(8, 6, 18, .42); border: 2px solid rgba(255, 246, 224, .1); }
.mm2__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.mm2__head h4 { margin: 0; font: 400 22px/1 var(--f-display); letter-spacing: .03em; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.mm2__head .keys { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.fate { display: inline-flex; align-items: center; gap: 4px; font: 800 9.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px 3px; border-radius: 6px; border: 2px solid var(--ink); color: var(--ink); white-space: nowrap; }
.fate--keep { background: var(--mint); }
.fate--merge { background: #8FE6FF; }
.fate--opt { background: var(--yellow); }
.fate--gone { background: #FF9AAE; }
.fate--move { background: #D7B8FF; }
.mm2__body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 18px 90px; }
.mm2__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.mm2__col { position: relative; z-index: 1; display: grid; gap: 14px; align-content: start; }
.mm2__grp { display: grid; gap: 6px; }
.mm2__grp > h5 { margin: 0 0 2px; display: flex; align-items: center; gap: 8px; font: 400 14px/1 var(--f-display); letter-spacing: .08em; color: var(--cream-2); }
.mm2__grp > h5 i { width: 10px; height: 10px; border-radius: 3px; border: 2px solid var(--ink); }
.oc { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 8px 5px 5px; border-radius: 11px; border: 2.5px solid var(--ink); background: linear-gradient(180deg, #2E2948, #221E36); box-shadow: 1px 3px 0 var(--ink); cursor: pointer; transition: transform .15s, opacity .15s; }
.oc__sw { width: 30px; height: 26px; border-radius: 7px; border: 2px solid var(--ink); position: relative; overflow: hidden; }
.oc__sw .mart { position: absolute; inset: 0; }
.oc__t { min-width: 0; }
.oc__t b { display: block; font: 400 13.5px/1.05 var(--f-display); letter-spacing: .03em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc__t small { display: block; margin-top: 2px; font: 600 10.5px/1.25 var(--f-body); color: var(--cream-3); }
.oc__t small em { font-style: normal; color: var(--yellow); }
.oc.tab b, .oc.sc b { color: var(--cream-2); }
.nc { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 10px 7px 7px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg, #3A3458, #2A2640); box-shadow: 2px 4px 0 var(--ink); cursor: pointer; transition: transform .15s, opacity .15s, box-shadow .15s; }
.nc__sw { width: 64px; height: 54px; border-radius: 10px; border: 2.5px solid var(--ink); position: relative; overflow: hidden; }
.nc__sw .mart { position: absolute; inset: 0; }
.nc__t b { display: block; font: 400 17px/1.02 var(--f-display); letter-spacing: .03em; color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.nc__t small { display: block; margin-top: 3px; font: 600 11.5px/1.3 var(--f-body); color: var(--cream-2); }
.nc__t .opts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.nc__t .opts span { font: 800 9.5px/1 var(--f-body); letter-spacing: .06em; color: var(--ink); background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 5px; padding: 3px 5px 2px; text-transform: uppercase; }
.nc--gone { background: linear-gradient(180deg, #4A2236, #34172A); border-style: dashed; }
.nc--gone .nc__sw { display: grid; place-items: center; background: rgba(8, 6, 18, .6); }
.nc--gone .nc__sw svg { width: 30px; height: 30px; }
.mm2.is-hl .oc, .mm2.is-hl .nc { opacity: .32; }
.mm2.is-hl .oc.hl, .mm2.is-hl .nc.hl { opacity: 1; transform: translateX(3px); }
.mm2.is-hl .nc.hl { box-shadow: 2px 4px 0 var(--ink), 0 0 0 3px var(--yellow); }
.mm2__svg path { fill: none; stroke-width: 3; stroke-linecap: round; opacity: .55; transition: opacity .15s; }
.mm2.is-hl .mm2__svg path { opacity: .08; }
.mm2.is-hl .mm2__svg path.hl { opacity: 1; stroke-width: 4; }
.mm2__foot { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--cream-3); font-size: 13px; }
.mm2__foot b { color: var(--yellow); font: 400 14px/1 var(--f-display); letter-spacing: .05em; }

/* ================================================================ today section */
.today { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.shot { position: relative; margin: 0; border: 4px solid var(--ink); border-radius: 22px; overflow: hidden; box-shadow: 3px 7px 0 var(--ink); background: #000; }
.shot img { display: block; width: 100%; height: auto; }
.shot .pin { position: absolute; z-index: 2; font: 400 13px/1.1 var(--f-display); letter-spacing: .04em; color: #fff; background: var(--pink); border: 2.5px solid var(--ink); border-radius: 9px; padding: 5px 8px 4px; box-shadow: 2px 3px 0 var(--ink); -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.shot .ring { position: absolute; z-index: 1; border: 3.5px dashed var(--pink); border-radius: 14px; box-shadow: 0 0 0 3px rgba(255, 79, 163, .2); }
.shot .cap { position: absolute; left: 12px; top: 12px; z-index: 3; font: 400 14px/1 var(--f-display); letter-spacing: .05em; color: var(--ink); background: var(--cream); border: 2.5px solid var(--ink); border-radius: 8px; padding: 5px 8px 4px; box-shadow: 2px 3px 0 var(--ink); }
.doors { display: grid; gap: 10px; }
.doors__big { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.doors__big .num { font: 400 86px/.8 var(--f-display); color: var(--yellow); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); }
.doors__big p { margin: 0 0 6px; font: 600 14px/1.35 var(--f-body); color: var(--cream-2); max-width: 300px; }
.doors__big p b { font: 400 20px/1.05 var(--f-display); letter-spacing: .03em; display: block; color: #fff; }
.tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tally div { padding: 10px 8px 9px; border-radius: 14px; background: rgba(8, 6, 18, .5); border: 2px solid rgba(255, 246, 224, .12); text-align: center; }
.tally b { display: block; font: 400 30px/1 var(--f-display); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.tally span { font: 800 10px/1.2 var(--f-body); letter-spacing: .1em; color: var(--cream-3); text-transform: uppercase; }
.trouble { display: grid; gap: 8px; }
.tr { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 14px; background: rgba(13, 11, 22, .55); box-shadow: 2px 4px 0 var(--ink); }
.tr i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; border: 2.5px solid var(--ink); font: 400 17px/1 var(--f-display); font-style: normal; color: var(--ink); }
.tr b { display: block; font: 400 16px/1.1 var(--f-display); letter-spacing: .03em; color: #fff; margin-bottom: 2px; }
.tr span { font-size: 13px; color: var(--cream-2); line-height: 1.42; }
.tr span em { font-style: normal; font-weight: 800; color: #fff; }
.today-rails { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wall { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wall__col { padding: 12px; border-radius: 18px; background: rgba(8, 6, 18, .45); border: 2px solid rgba(255, 246, 224, .1); }
.wall__col h5 { margin: 0 0 8px; font: 400 15px/1 var(--f-display); letter-spacing: .08em; color: var(--cream-2); display: flex; align-items: center; gap: 8px; }
.wall__col h5 small { font: 800 10px/1 var(--f-body); letter-spacing: .1em; color: var(--cream-3); margin-left: auto; }
.wc { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px; border-radius: 10px; margin-top: 5px; border: 2px solid transparent; }
.wc .oc__sw { width: 26px; height: 22px; }
.wc b { font: 400 13.5px/1.05 var(--f-display); letter-spacing: .03em; color: #fff; }
.wc small { display: block; font: 600 10.5px/1.25 var(--f-body); color: var(--cream-3); }
.wc[data-k] { cursor: pointer; }
.wall.is-hl .wc { opacity: .3; }
.wall.is-hl .wc.hl { opacity: 1; border-color: var(--hc, var(--yellow)); background: rgba(255, 255, 255, .05); }
.twins { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.twins button { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; border: 2.5px solid var(--ink); border-radius: 999px; padding: 6px 12px 5px 6px; background: var(--panel-2); color: #fff; font: 400 13.5px/1 var(--f-display); letter-spacing: .04em; box-shadow: 2px 3px 0 var(--ink); }
.twins button i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); background: var(--hc); }
.twins button.on { background: var(--cream); color: var(--ink); }

/* needs section (the must-keep list) */
.mustkeep { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mk { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 11px 9px 9px; border: 3px solid var(--ink); border-radius: 16px; background: linear-gradient(180deg, #3A3458, #2A2640); box-shadow: 2px 4px 0 var(--ink); }
.mk__sw { width: 52px; height: 46px; border-radius: 10px; border: 2.5px solid var(--ink); position: relative; overflow: hidden; }
.mk__sw .mart { position: absolute; inset: 0; }
.mk b { display: block; font: 400 15.5px/1.05 var(--f-display); letter-spacing: .03em; color: #fff; }
.mk span { display: block; margin-top: 2px; font: 600 11.5px/1.3 var(--f-body); color: var(--cream-3); }
.decided { margin-top: 16px; display: flex; gap: 14px; align-items: center; padding: 12px 16px; border: 3px solid var(--ink); border-radius: 16px; background: linear-gradient(90deg, rgba(124, 255, 163, .16), rgba(124, 255, 163, .04)); box-shadow: 2px 4px 0 var(--ink); }
.decided .ico { flex: none; width: 46px; height: 40px; }
.decided .ico svg { width: 100%; height: 100%; display: block; }
.decided p { margin: 0; color: var(--cream-2); font-size: 14px; }
.decided p b { font: 400 16px/1.1 var(--f-display); letter-spacing: .04em; color: var(--mint); display: block; margin-bottom: 2px; }

/* ================================================================ naming board */
.names { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 22px; align-items: start; }
.nset { display: grid; gap: 12px; }
.nopt { position: relative; padding: 14px 16px 14px; border: 4px solid var(--ink); border-radius: 22px; background: linear-gradient(180deg, #3A3458, #2A2640 60%, #1E1B2B); box-shadow: 3px 7px 0 var(--ink); cursor: pointer; }
.nopt.on { box-shadow: 3px 7px 0 var(--ink), inset 0 0 0 3px var(--yellow); }
.nopt.is-picked { box-shadow: 3px 7px 0 var(--ink), 0 0 0 4px var(--yellow); }
.nopt__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nopt__top .L { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font: 400 21px/1 var(--f-display); color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); }
.nopt__top h4 { margin: 0; font: 400 23px/1 var(--f-display); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; letter-spacing: .03em; }
.nopt p { margin: 8px 0 10px; color: var(--cream-2); font-size: 13.5px; }
.nwords { display: flex; flex-wrap: wrap; gap: 5px; }
.nwords span { font: 400 13px/1 var(--f-display); letter-spacing: .04em; color: #fff; background: rgba(8, 6, 18, .55); border: 2px solid rgba(255, 246, 224, .16); border-radius: 7px; padding: 5px 7px 4px; }
.nwords span s { color: var(--cream-3); text-decoration: none; font-size: 11px; margin-right: 4px; }
.ntable { width: 100%; border-collapse: separate; border-spacing: 0; border: 3px solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 3px 6px 0 var(--ink); background: rgba(13, 11, 22, .6); margin-top: 18px; }
.ntable th, .ntable td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1.5px solid rgba(255, 246, 224, .08); font-size: 13px; color: var(--cream-2); }
.ntable thead th { font: 400 14px/1 var(--f-display); letter-spacing: .05em; color: #fff; background: rgba(255, 255, 255, .06); white-space: nowrap; }
.ntable td.today { color: var(--cream-3); font: 600 12px/1.3 var(--f-body); }
.ntable td b { font: 400 14.5px/1.1 var(--f-display); letter-spacing: .03em; color: #fff; display: block; }
.ntable td small { display: block; font: 600 11px/1.3 var(--f-body); color: var(--cream-3); margin-top: 2px; }
.ntable td.on { background: rgba(255, 210, 63, .1); }
.ntable td.on b { color: var(--yellow); }
.ntable tr:last-child td, .ntable tr:last-child th { border-bottom: 0; }
.ntable-wrap { overflow-x: auto; }

/* ================================================================ compare */
.cmp2 { width: 100%; border-collapse: separate; border-spacing: 0; border: 4px solid var(--ink); border-radius: 22px; overflow: hidden; box-shadow: 3px 7px 0 var(--ink); background: rgba(13, 11, 22, .6); }
.cmp2 th, .cmp2 td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 2px solid rgba(255, 246, 224, .07); font-size: 13.5px; color: var(--cream-2); }
.cmp2 thead th { font: 400 17px/1.05 var(--f-display); letter-spacing: .04em; color: #fff; background: rgba(255, 255, 255, .06); }
.cmp2 thead th.r { background: rgba(124, 255, 163, .12); }
.cmp2 tbody th { width: 19%; font: 400 14.5px/1.15 var(--f-display); letter-spacing: .04em; color: var(--yellow); }
.cmp2 td.r { background: rgba(124, 255, 163, .05); }
.cmp2 .good { color: var(--mint); font-weight: 800; }
.cmp2 .meh { color: #FFC67A; font-weight: 800; }
.cmp2 .bad { color: #FF9AAE; font-weight: 800; }
.cmp2 tr:last-child th, .cmp2 tr:last-child td { border-bottom: 0; }
.cmp-wrap { overflow-x: auto; border-radius: 22px; }

/* ================================================================ hero: the 17 -> 10 sweep */
.sweep { position: relative; margin: 26px auto 0; max-width: 1120px; height: 318px; border: 4px solid var(--ink); border-radius: 28px; overflow: hidden; box-shadow: 4px 9px 0 var(--ink);
  background: radial-gradient(60% 70% at 50% -10%, rgba(255, 246, 224, .16), transparent 70%), radial-gradient(30% 60% at 0% 60%, rgba(255, 79, 163, .12), transparent 70%), radial-gradient(30% 60% at 100% 60%, rgba(63, 154, 255, .14), transparent 70%), linear-gradient(180deg, #2E255A, #1D1840 60%, #120E26); }
.sweep::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .05) 1.2px, transparent 1.7px); background-size: 9px 9px; pointer-events: none; }
.sweep::after { content: ""; position: absolute; left: 16px; right: 16px; top: 50px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 246, 224, .16), transparent); }
.sweep__t { position: absolute; z-index: 6; left: 20px; top: 15px; font: 400 19px/1 var(--f-display); letter-spacing: .05em; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.sweep__t em { font-style: normal; color: var(--yellow); }
.sweep__n { position: absolute; z-index: 6; right: 18px; top: 7px; display: flex; align-items: center; gap: 8px; font: 400 40px/1 var(--f-display); color: var(--yellow); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); font-variant-numeric: tabular-nums; }
.sweep__n small { font: 400 12px/1 var(--f-display); letter-spacing: .06em; color: #fff; -webkit-text-stroke: 3px var(--ink); text-shadow: none; }
.sweep__shine { position: absolute; z-index: 9; top: -20%; bottom: -20%; left: -30%; width: 22%; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 246, 224, .28), rgba(255, 210, 63, .38), rgba(255, 246, 224, .28), transparent); transform: skewX(-18deg); }
.sweep.shine-go .sweep__shine { animation: sw-shine 1.15s cubic-bezier(.4, 0, .2, 1) .12s; }
@keyframes sw-shine { 0% { left: -30%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 110%; opacity: 0; } }
.sw-lab { position: absolute; z-index: 4; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; font: 400 15px/1 var(--f-display); letter-spacing: .05em; color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; transition: transform .9s cubic-bezier(.5, 0, .2, 1); white-space: nowrap; }
.sw-lab .ico { width: 18px; height: 18px; -webkit-text-stroke: 0; }
.sw-lab .ico svg { width: 100%; height: 100%; display: block; }
.sw-sclab { position: absolute; z-index: 4; left: 0; top: 0; font: 800 10px/1 var(--f-body); letter-spacing: .14em; color: var(--cream-3); padding-top: 4px; }
.sw-card { position: absolute; z-index: 2; left: 0; top: 0; width: 92px; height: 64px; border: 3px solid var(--ink); border-radius: 11px; overflow: hidden; box-shadow: 1px 3px 0 var(--ink); background: #120E26;
  transition: transform .95s cubic-bezier(.55, -0.25, .2, 1.18), opacity .6s ease, width .95s cubic-bezier(.55, -0.25, .2, 1.18), height .95s cubic-bezier(.55, -0.25, .2, 1.18); will-change: transform; }
.sw-card .mart { position: absolute; inset: 0; }
.sw-card .mart .fg { bottom: 20% !important; height: 62% !important; }
.sw-card .mart .prop { bottom: 20% !important; height: 62% !important; }
.sw-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 45%, rgba(8, 6, 18, .85)); }
.sw-card b { position: absolute; z-index: 3; left: 5px; right: 5px; bottom: 4px; font: 400 11px/1 var(--f-display); letter-spacing: .02em; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-card.flag { animation: sw-flag .5s ease-in-out infinite alternate; box-shadow: 0 0 0 3px #FF4FA3, 0 0 16px rgba(255, 79, 163, .6), 1px 3px 0 var(--ink); }
.sw-card.flag::after { content: ""; position: absolute; inset: 0; z-index: 4; background: repeating-linear-gradient(-45deg, rgba(255, 79, 163, .28) 0 6px, transparent 6px 12px); }
@keyframes sw-flag { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
.sw-card.land { animation: sw-land .5s cubic-bezier(.34, 1.56, .64, 1); z-index: 3; }
@keyframes sw-land { 0% { scale: 1; } 30% { scale: 1.1 .92; } 60% { scale: .96 1.05; } 100% { scale: 1; } }
.sw-new { z-index: 3; }
.sw-tab { position: absolute; z-index: 3; left: 0; top: 0; height: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; font: 400 10.5px/1 var(--f-display); letter-spacing: .05em; color: var(--cream-2); border: 2px solid rgba(255, 246, 224, .22); border-radius: 7px; background: rgba(8, 6, 18, .55); white-space: nowrap; overflow: hidden;
  transition: transform .8s cubic-bezier(.5, 0, .2, 1), opacity .5s ease; }
.sw-tab em { font: 800 7.5px/1 var(--f-body); letter-spacing: .08em; font-style: normal; color: var(--ink); background: var(--cream-3); border-radius: 3px; padding: 2px 3px; }
.sw-tab.flag { border-color: #FF4FA3; color: #fff; background: rgba(255, 79, 163, .25); animation: sw-flag .5s ease-in-out infinite alternate; }
.sw-sc { justify-content: flex-start; padding: 0 8px 0 5px; font-size: 11px; }
.sw-sc .ico { width: 16px; height: 16px; flex: none; }
.sw-sc .ico svg { width: 100%; height: 100%; display: block; }
.sweep.is-narrow .sw-lab { font-size: 13px; }
.sweep.is-narrow .sw-card b { font-size: 8.5px; -webkit-text-stroke-width: 2.4px; left: 3px; right: 3px; }
.sweep.is-narrow .sw-tab { font-size: 8.5px; height: 18px; padding: 0 3px; }
.sweep.is-narrow .sw-tab em { display: none; }
.sweep.is-narrow .sw-sc { font-size: 8.5px; }
.sweep.is-narrow .sw-sc .ico { width: 12px; height: 12px; }
.sweep.is-narrow .sweep__t { font-size: 13px; top: 12px; left: 14px; right: 110px; line-height: 1.15; -webkit-text-stroke-width: 3px; }
.sweep.is-narrow .sweep__n { font-size: 30px; -webkit-text-stroke-width: 5px; }
.sweep.is-narrow .sweep__n small { font-size: 9.5px; }
.sweep.is-narrow::after { top: 56px; }

/* the today wall: three rails as mini screens */
.wall { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wall__col { padding: 12px 12px 14px; border-radius: 20px; background: linear-gradient(180deg, #2E255A, #1D1840 60%, #120E26); border: 3px solid var(--ink); box-shadow: 3px 6px 0 var(--ink); }
.wall__col h5 { margin: 0 0 9px; font: 400 17px/1 var(--f-display); letter-spacing: .05em; color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; display: flex; align-items: center; gap: 8px; }
.wall__col h5 i { width: 12px; height: 12px; border-radius: 4px; border: 2px solid var(--ink); -webkit-text-stroke: 0; }
.wall__col h5 small { margin-left: auto; font: 800 10px/1 var(--f-body); letter-spacing: .1em; color: var(--cream-3); -webkit-text-stroke: 0; }
.wtabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 8px; }
.wtab { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px; padding: 0 6px; border-radius: 8px; border: 2px solid rgba(255, 246, 224, .18); background: rgba(8, 6, 18, .5); font: 400 12px/1 var(--f-display); letter-spacing: .04em; color: var(--cream-2); white-space: nowrap; overflow: hidden; transition: opacity .25s, box-shadow .25s, transform .25s; }
.wtab em { font: 800 8px/1 var(--f-body); letter-spacing: .08em; font-style: normal; color: var(--ink); background: var(--cream-3); border-radius: 3px; padding: 2px 4px; }
.wgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.wcard { position: relative; aspect-ratio: 1.12; border-radius: 12px; overflow: hidden; border: 3px solid var(--ink); box-shadow: 1px 3px 0 var(--ink); background: #120E26; transition: opacity .25s, filter .25s, box-shadow .25s, transform .25s; }
.wcard__art { position: absolute; inset: 0; }
.wcard__art .mart { position: absolute; inset: 0; }
.wcard__art .mart .fg, .wcard__art .mart .prop { bottom: 26% !important; height: 58% !important; }
.wcard__shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 42%, rgba(8, 6, 18, .9)); }
.wcard b { position: absolute; z-index: 3; left: 6px; right: 6px; bottom: 6px; font: 400 12.5px/1.02 var(--f-display); letter-spacing: .02em; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.wall__sc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; }
.wall__sc h5 { margin: 0 8px 0 0; }
.wsc { width: auto; padding: 0 10px 0 6px; height: 30px; }
.wsc .ico { width: 18px; height: 18px; }
.wsc .ico svg { width: 100%; height: 100%; display: block; }
.wall.is-hl .wcard:not(.hl), .wall.is-hl .wtab:not(.hl) { opacity: .28; filter: grayscale(.7); }
.wall.is-hl .wcard.hl { box-shadow: 0 0 0 3px var(--hc), 0 0 22px 2px var(--hc), 1px 3px 0 var(--ink); transform: translateY(-3px) rotate(-1deg); }
.wall.is-hl .wtab.hl { border-color: var(--hc); color: #fff; box-shadow: 0 0 14px var(--hc); }
#twinNote { display: flex; gap: 10px; align-items: baseline; }
#twinNote i { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); transform: translateY(1px); }
.legend36 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin-top: 10px; }
.legend36 div { display: flex; gap: 9px; align-items: baseline; font: 600 13px/1.35 var(--f-body); color: var(--cream-2); }
.legend36 b.n, .shot .mk36 { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 400 13.5px/1 var(--f-display); color: #fff; background: var(--pink); border: 2.5px solid var(--ink); box-shadow: 1px 2px 0 var(--ink); -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; transform: translateY(2px); }
.shot .mk36 { position: absolute; z-index: 3; transform: translate(-50%, -50%); width: 30px; height: 30px; font-size: 16px; animation: mk-pulse 1.6s ease-in-out infinite; }
@keyframes mk-pulse { 50% { box-shadow: 1px 2px 0 var(--ink), 0 0 0 6px rgba(255, 79, 163, .3); } }
@media (max-width: 760px) { .sweep { height: 372px; } .legend36 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .wall { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ inside the phones: my screens (998 x 460) */
.tms { position: absolute; inset: 0; overflow: hidden; font-family: var(--f-body); }
.tms [data-act] { cursor: pointer; }
.tms .mc[data-act]:hover { filter: brightness(1.06); }
.tms .ml-cat[data-act]:hover b { color: rgba(255, 246, 224, .7); }
.tms .ml-cat.on[data-act]:hover b { color: #fff; }
.tms .mc { transition: transform .15s; }
.tms .mc:active { transform: scale(.97); }
/* options strip variants */
.mc__strip.info { border-style: dashed; }
.mc__strip .sh { width: 16px; height: 14px; flex: none; margin-left: auto; }
.mc__strip .sh svg { width: 100%; height: 100%; display: block; }
.mc__opt { position: absolute; z-index: 3; left: 10px; right: 8px; display: flex; flex-wrap: wrap; gap: 3px 4px; }
.mc__opt span { flex: none; font: 800 8.5px/1 var(--f-body); letter-spacing: .04em; color: var(--ink); background: rgba(255, 246, 224, .92); border: 1.5px solid var(--ink); border-radius: 5px; padding: 3px 5px 2px; white-space: nowrap; }
.mc__opt span.y { background: var(--yellow); }
.mc__opt span.g { background: var(--mint); }
.mc__ev { position: absolute; z-index: 3; left: 10px; right: 10px; display: flex; align-items: center; gap: 6px; font: 800 9px/1 var(--f-body); letter-spacing: .08em; color: #fff; }
.mc__ev i { flex: 1; height: 6px; border-radius: 3px; background: rgba(8, 6, 18, .7); border: 1.5px solid rgba(255, 246, 224, .4); overflow: hidden; position: relative; }
.mc__ev i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 60%); background: var(--yellow); }
.mc--dim { filter: saturate(.4) brightness(.65); }
/* setup chip in the top row */
.tm-setup { position: absolute; z-index: 7; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 6px; border-radius: 11px; border: 3px solid var(--ink); background: linear-gradient(180deg, #2A2640, #1E1B2B); box-shadow: 2px 4px 0 var(--ink); }
.tm-setup .ib { width: 24px; height: 24px; display: grid; place-items: center; }
.tm-setup .ib svg { width: 100%; height: 100%; display: block; }
.tm-setup .lb { font: 800 9px/1 var(--f-body); letter-spacing: .12em; color: var(--cream-3); }
.tm-setup b { font: 400 14.5px/1 var(--f-display); letter-spacing: .04em; color: #fff; white-space: nowrap; }
.tm-setup em { font-style: normal; font: 800 10px/1 var(--f-body); letter-spacing: .08em; color: #7CFFA3; white-space: nowrap; }
.tm-setup .chev { width: 16px; height: 16px; }
.tm-setup .chev svg { width: 100%; height: 100%; display: block; }
.tm-setup.off { opacity: .45; }
.tm-hint { position: absolute; z-index: 6; font: 800 9.5px/1 var(--f-body); letter-spacing: .12em; color: var(--cream-3); white-space: nowrap; }
.tm-hint b { color: var(--cream-2); font-weight: 800; }
/* bottom START bar tweaks */
.tms .ml-sum .y { color: var(--yellow); }
.tms .ml-go[data-act]:active { transform: translate(1px, 3px); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .15), 1px 2px 0 var(--ink); }
/* option sheet */
.tm-sheet { position: absolute; z-index: 25; left: 50%; bottom: 0; translate: -50% 0; width: 76%; padding: 14px 18px 32px; border: 4px solid var(--ink); border-bottom: 0; border-radius: 24px 24px 0 0; background: linear-gradient(180deg, #3A3458, #2A2640 60%, #1E1B2B); box-shadow: 0 -4px 0 var(--ink), 0 -20px 40px rgba(0, 0, 0, .4); animation: tm-up .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes tm-up { from { transform: translateY(40px); opacity: 0; } }
.tm-sheet h5 { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; font: 400 23px/1 var(--f-display); letter-spacing: .03em; color: #fff; -webkit-text-stroke: 4.5px var(--ink); paint-order: stroke fill; }
.tm-sheet h5 small { font: 800 10px/1 var(--f-body); letter-spacing: .12em; color: var(--cream-3); -webkit-text-stroke: 0; }
.tm-sheet h5 .done { margin-left: auto; font: 400 17px/1 var(--f-display); color: var(--ink); -webkit-text-stroke: 0; background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); border: 3px solid var(--ink); border-radius: 11px; padding: 7px 14px 6px; box-shadow: 2px 3px 0 var(--ink); }
.tm-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 0; border-top: 2px solid rgba(255, 246, 224, .07); }
.tm-row > span { font: 400 15px/1 var(--f-display); letter-spacing: .05em; color: var(--cream-2); }
.tm-row > span small { display: block; margin-top: 3px; font: 800 8.5px/1.2 var(--f-body); letter-spacing: .08em; color: var(--cream-3); }
.tm-segs { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-segs i { font-style: normal; min-width: 42px; text-align: center; font: 400 15px/1 var(--f-display); letter-spacing: .04em; color: var(--cream-2); padding: 9px 11px 8px; border-radius: 10px; border: 2.5px solid var(--ink); background: rgba(8, 6, 18, .55); }
.tm-segs i.on { color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); box-shadow: 1px 3px 0 var(--ink); }
.tm-segs i small { display: block; margin-top: 3px; font: 800 8px/1 var(--f-body); letter-spacing: .08em; opacity: .7; }
.tm-row .note2 { font: 600 12px/1.3 var(--f-body); color: var(--cream-3); }
.tm-row .note2 b { font: 400 14px/1 var(--f-display); color: #fff; letter-spacing: .04em; }
/* finding / loading overlay */
.tm-scrim { position: absolute; inset: 0; z-index: 20; background: rgba(8, 6, 18, .7); animation: tm-fade .2s; }
@keyframes tm-fade { from { opacity: 0; } }
.tm-mm { position: absolute; z-index: 21; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 10px; padding: 18px 26px 16px; border: 4px solid var(--ink); border-radius: 24px; background: linear-gradient(180deg, #3A3458, #2A2640 60%, #1E1B2B); box-shadow: 4px 8px 0 var(--ink); animation: tm-pop .35s var(--spring); min-width: 420px; }
@keyframes tm-pop { from { transform: scale(.8); opacity: 0; } }
.tm-mm h5 { margin: 0; font: 400 27px/1 var(--f-display); letter-spacing: .03em; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.tm-mm .chip2 { font: 400 13.5px/1 var(--f-display); letter-spacing: .05em; color: var(--ink); background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 8px; padding: 5px 9px 4px; }
.tm-mm .slots { display: flex; gap: 10px; }
.tm-mm .slot { width: 74px; height: 86px; border-radius: 14px; border: 3px solid var(--ink); background: rgba(8, 6, 18, .55); position: relative; overflow: hidden; }
.tm-mm .slot.wait { border-style: dashed; border-color: rgba(255, 246, 224, .35); display: grid; place-items: center; }
.tm-mm .slot.wait::after { content: "· · ·"; font: 400 20px/1 var(--f-display); color: rgba(255, 246, 224, .5); animation: tm-blink 1s steps(2) infinite; }
@keyframes tm-blink { 50% { opacity: .3; } }
.tm-mm .slot .f { position: absolute; left: 50%; bottom: 14px; width: 58px; height: 66px; translate: -50% 0; }
.tm-mm .slot small { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; font: 400 9.5px/1 var(--f-display); letter-spacing: .03em; color: #fff; background: rgba(8, 6, 18, .85); padding: 3px 0 2px; text-align: center; white-space: nowrap; overflow: hidden; }
.tm-mm .row { display: flex; gap: 12px; align-items: center; }
.tm-mm .t { font: 400 20px/1 var(--f-display); color: var(--cream); }
.tm-mm .cancel { font: 400 14px/1 var(--f-display); letter-spacing: .05em; color: #fff; background: linear-gradient(180deg, #4D4675, #3A3458); border: 3px solid var(--ink); border-radius: 10px; padding: 7px 14px 6px; box-shadow: 2px 3px 0 var(--ink); }
.tm-mm .next { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(8, 6, 18, .6); border: 2px solid rgba(255, 246, 224, .16); }
.tm-mm .next .lb { font: 800 9.5px/1 var(--f-body); letter-spacing: .12em; color: var(--cream-3); }
.tm-mm .reel { position: relative; height: 30px; width: 210px; overflow: hidden; border-radius: 8px; background: #120E26; border: 2.5px solid var(--ink); }
.tm-mm .reel > div { position: absolute; left: 0; right: 0; top: 0; animation: tm-reel 1.6s cubic-bezier(.2, .7, .2, 1) forwards; }
.tm-mm .reel b { display: block; height: 30px; line-height: 30px; text-align: center; font: 400 17px/30px var(--f-display); letter-spacing: .04em; color: #fff; }
.tm-mm .reel b:last-child { color: var(--yellow); }
@keyframes tm-reel { from { transform: translateY(0); } to { transform: translateY(var(--to)); } }
/* tap marker for the auto-play */
.tm-tap { position: absolute; z-index: 80; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none; border: 4px solid #fff; background: rgba(255, 210, 63, .5); box-shadow: 0 0 0 3px var(--ink), 0 0 20px rgba(255, 210, 63, .8); animation: tm-tap .6s ease-out forwards; }
@keyframes tm-tap { 0% { transform: scale(1.5); opacity: 0; } 30% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }

/* step screens (approach B) */
.tm-crumbs { position: absolute; z-index: 7; display: flex; align-items: center; gap: 6px; height: 34px; }
.tm-back { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px 0 8px; border-radius: 11px; border: 3px solid var(--ink); background: linear-gradient(180deg, #4D4675, #3A3458 55%, #2A2640); box-shadow: 2px 4px 0 var(--ink); font: 400 15px/1 var(--f-display); letter-spacing: .04em; color: #fff; }
.tm-back svg { width: 18px; height: 18px; display: block; }
.tm-crumb { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9px; font: 400 13px/1 var(--f-display); letter-spacing: .05em; color: var(--cream-2); background: rgba(8, 6, 18, .5); border: 2px solid rgba(255, 246, 224, .16); white-space: nowrap; }
.tm-crumb.on { color: var(--ink); background: var(--yellow); border-color: var(--ink); }
.tm-crumbs .sep { width: 12px; height: 12px; opacity: .6; }
.tm-crumbs .sep svg { width: 100%; height: 100%; display: block; }
.tm-q { position: absolute; z-index: 6; font: 400 26px/1 var(--f-display); letter-spacing: .02em; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); white-space: nowrap; }
.tm-q small { margin-left: 10px; font: 800 10px/1 var(--f-body); letter-spacing: .12em; color: var(--cream-3); -webkit-text-stroke: 0; text-shadow: none; }
.tm-dots { position: absolute; z-index: 6; display: flex; gap: 6px; }
.tm-dots i { width: 26px; height: 8px; border-radius: 4px; background: rgba(255, 246, 224, .18); border: 1.5px solid var(--ink); }
.tm-dots i.on { background: var(--yellow); }
.tm-dots i.done { background: var(--mint); }
.door { position: absolute; z-index: 4; overflow: hidden; border: 4px solid var(--ink); border-radius: 22px; box-shadow: 3px 7px 0 var(--ink); }
.door__art { position: absolute; inset: 0; }
.door__art .mart { position: absolute; inset: 0; }
.door__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 6, 18, .35), transparent 28%, transparent 46%, rgba(8, 6, 18, .9) 84%); }
.door__ico { position: absolute; z-index: 3; left: 16px; top: 14px; width: 46px; height: 46px; padding: 6px; border-radius: 14px; background: rgba(8, 6, 18, .6); border: 2.5px solid rgba(255, 246, 224, .3); }
.door__ico svg { width: 100%; height: 100%; display: block; }
.door__name { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 16px; font: 400 32px/.95 var(--f-display); letter-spacing: .02em; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.door__name small { display: block; margin-top: 6px; font: 800 11px/1.2 var(--f-body); letter-spacing: .1em; color: var(--cream-2); -webkit-text-stroke: 0; text-shadow: 0 1px 2px #000; }
.door .live { position: absolute; z-index: 3; right: 14px; top: 16px; display: inline-flex; align-items: center; gap: 5px; font: 400 12.5px/1 var(--f-display); letter-spacing: .05em; color: var(--ink); background: linear-gradient(180deg, #A9F4FF, #29C6E8); border: 2.5px solid var(--ink); border-radius: 8px; padding: 4px 7px 3px; }
.door .live i { width: 8px; height: 8px; border-radius: 50%; background: #1FBF5C; box-shadow: 0 0 0 1.5px var(--ink); }
.door .fg { bottom: 34% !important; height: 46% !important; }
.again { position: absolute; z-index: 7; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 6px; border-radius: 11px; border: 3px solid var(--ink); background: linear-gradient(180deg, #2A2640, #1E1B2B); box-shadow: 2px 4px 0 var(--ink); }
.again .sw { width: 26px; height: 22px; border-radius: 6px; border: 2px solid var(--ink); overflow: hidden; position: relative; }
.again .sw .mart { position: absolute; inset: 0; }
.again span { font: 800 9px/1 var(--f-body); letter-spacing: .12em; color: var(--cream-3); }
.again b { font: 400 14px/1 var(--f-display); letter-spacing: .04em; color: #fff; white-space: nowrap; }
.again .play { width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink); display: grid; place-items: center; }
.again .play svg { width: 10px; height: 10px; display: block; }
.go3 { position: absolute; z-index: 4; overflow: hidden; border: 4px solid var(--ink); border-radius: 22px; box-shadow: 3px 7px 0 var(--ink); }
.go3 .mart { position: absolute; inset: 0; }
.go3 .fg { bottom: 12% !important; height: 62% !important; }
.go3__name { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 14px; font: 400 30px/.95 var(--f-display); color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.go3__name small { display: block; margin-top: 5px; font: 800 10.5px/1.2 var(--f-body); letter-spacing: .1em; color: var(--cream-2); -webkit-text-stroke: 0; }
.go3__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(8, 6, 18, .88) 92%); }
.optpanel { position: absolute; z-index: 4; display: grid; align-content: start; gap: 2px; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 20px; background: linear-gradient(180deg, #2A2640, #1E1B2B); box-shadow: 2px 5px 0 var(--ink); }
.optpanel .tm-row { grid-template-columns: 96px minmax(0, 1fr); padding: 8px 0; }
.optpanel .tm-row:first-child { border-top: 0; }
.optpanel .tm-segs i { min-width: 36px; padding: 8px 9px 7px; font-size: 14px; }
.bigstart { position: absolute; z-index: 5; display: grid; place-items: center; align-content: center; gap: 3px; border-radius: 18px; border: 4px solid var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 52%, var(--yellow-lo)); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .15), inset 0 2px 0 rgba(255, 255, 255, .6), 3px 7px 0 var(--ink); }
.bigstart b { font: 400 34px/.9 var(--f-display); letter-spacing: .03em; color: var(--ink); }
.bigstart small { font: 800 9.5px/1 var(--f-body); letter-spacing: .12em; color: rgba(29, 27, 36, .7); }

/* playlist cards (approach C) */
.pl-mix { position: absolute; z-index: 3; left: 10px; right: 10px; display: flex; gap: 5px; align-items: center; }
.pl-mix .lb { font: 800 8.5px/1 var(--f-body); letter-spacing: .1em; color: var(--cream-3); margin-right: 2px; }
.pl-mix span { width: 30px; height: 26px; border-radius: 7px; border: 2px solid var(--ink); overflow: hidden; position: relative; box-shadow: 1px 2px 0 var(--ink); }
.pl-mix span .mart { position: absolute; inset: 0; }
.pl-mix span.more { display: grid; place-items: center; background: rgba(8, 6, 18, .75); font: 400 11px/1 var(--f-display); color: #fff; }
.mc.pl .mc__name { font-size: 25px; }
.mc.pl.mc--s .mc__name { font-size: 21px; }

@media (max-width: 1100px) {
  .way__stage { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 900px) {
  .today, .today-rails, .names { grid-template-columns: minmax(0, 1fr); }
  .wall { grid-template-columns: minmax(0, 1fr); }
  .mm2__body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mm2__svg { display: none; }
  .way { padding: 18px 14px 20px; border-radius: 24px; }
  .way__top { grid-template-columns: auto minmax(0, 1fr); }
  .way__top > .pick { grid-column: 1 / -1; justify-self: start; }
  .way__letter { width: 56px; height: 56px; font-size: 34px; border-radius: 16px; }
  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .sec-num { grid-row: auto; font-size: 54px; }
  .sec-head p { grid-column: 1; }
  .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sweep { height: 330px; }
}
@media (max-width: 520px) {
  .tm .wrap { padding: 0 14px; }
  nav.toc { margin: 18px -14px 0; gap: 6px; }
  nav.toc a { font-size: 12.5px; padding: 4px 10px 4px 4px; }
  nav.toc a i { width: 20px; height: 20px; font-size: 11px; }
  .note { max-width: 100%; }
  .ph figcaption { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sw-card, .sw-tab, .sw-lab { transition: none !important; }
  .sw-card.flag, .sw-tab.flag, .sw-card.land, .shot .mk36 { animation: none; }
  .tm-sheet, .tm-mm, .tm-scrim { animation: none; }
  .tm-mm .reel > div { animation-duration: .01s; }
  .tm-tap { animation-duration: .01s; }
}

/* small additions */
.ml-cat.is-dim { opacity: .5; }
.ml-cat.is-dim .ico { filter: grayscale(1); }
.pl-mix span[data-act] { cursor: pointer; }
.pl-mix span.lk { box-shadow: 0 0 0 2.5px var(--yellow), 1px 2px 0 var(--ink); transform: translateY(-2px); }
.pl-mix span.off { opacity: .38; }
.sweep.no-tr .sw-card, .sweep.no-tr .sw-tab, .sweep.no-tr .sw-lab, .sweep.no-tr .sw-sclab { transition: none !important; }
.sweep-ctl { display: flex; justify-content: center; margin-top: 12px; }

.tm-thumbs { display: flex; gap: 5px; align-items: center; }
.tm-thumbs span { position: relative; width: 62px; height: 40px; border-radius: 8px; overflow: hidden; border: 2.5px solid var(--ink); box-shadow: 1px 2px 0 var(--ink); background: #120E26; }
.tm-thumbs span img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-thumbs span b { position: absolute; left: 0; right: 0; bottom: 0; font: 400 7.5px/1 var(--f-display); letter-spacing: .03em; color: #fff; background: rgba(8, 6, 18, .78); padding: 2px 2px 1px; text-align: center; white-space: nowrap; overflow: hidden; }
.tm-thumbs span.more { width: 34px; display: grid; place-items: center; font: 400 13px/1 var(--f-display); color: var(--yellow); background: rgba(8, 6, 18, .7); }
.pl-mix .lb { white-space: nowrap; }
.tm-mm .reel b:last-child { animation: tm-land .5s var(--spring) 1.55s both; }
@keyframes tm-land { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: #fff; text-shadow: 0 0 12px rgba(255, 210, 63, .9); } 100% { transform: scale(1); } }
.tm-mm .slot .f { width: 64px; height: 74px; bottom: 12px; }

@media (max-width: 700px) {
  nav.toc { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; padding: 8px 14px 12px; -webkit-overflow-scrolling: touch; }
  nav.toc::-webkit-scrollbar { display: none; }
  .cmp2 { min-width: 760px; }
  .shot .cap { display: none; }
  .shot .mk36 { width: 22px; height: 22px; font-size: 12px; }
  .way__top { display: block; }
  .way__letter { float: left; margin: 0 12px 6px 0; }
  .way__top > .pick { margin-top: 14px; }
  .way__count { clear: both; }
  .fate { font-size: 8.5px; padding: 3px 5px 2px; }
  .oc { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .doors__big .num { font-size: 64px; }
}

/* ================================================================ juice: screens play in, selections pop (36 + 37 phones) */
.tms.enter .mc, .tms.enter .door, .tms.enter .xtra, .tms.enter .go3, .tms.enter .optpanel, .tms.enter .bigstart { animation: tm-in .46s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes tm-in { from { opacity: 0; transform: translateY(22px) scale(.93); } }
.tms .mc.pop, .tms .xtra.pop { animation: tm-sel .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tm-sel { 0% { transform: scale(.93); } 60% { transform: scale(1.035); } 100% { transform: none; } }
.tms .mc.pop .mc__check { animation: tm-chk .45s cubic-bezier(.34, 1.56, .64, 1) .08s both; }
@keyframes tm-chk { from { transform: scale(0) rotate(-40deg); } }
.tms .mc.sel { box-shadow: 0 0 0 3.5px var(--yellow), 0 0 22px rgba(255, 210, 63, .45), 2px 5px 0 var(--ink); }
.tms .ml-go:not(.off) { animation: tm-go 1.8s ease-in-out infinite; }
@keyframes tm-go { 0%, 100% { transform: none; } 50% { transform: scale(1.035); } }

/* B: the doors show the same four ways; the extras strip; the matrix merge map */
.door__hows { display: flex; align-items: center; gap: 5px; margin-top: 10px; }
.door__hows i { position: relative; width: 34px; height: 24px; border-radius: 7px; overflow: hidden; border: 2.5px solid var(--ink); box-shadow: 1px 2px 0 var(--ink); }
.door__hows i .mart { position: absolute; inset: 0; }
.door__hows em { font-style: normal; font: 800 9px/1.1 var(--f-body); letter-spacing: .1em; color: var(--cream-2); -webkit-text-stroke: 0; text-shadow: 0 1px 2px #000; margin-left: 4px; }
.xtra { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 6px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg, #2E2948, #1E1B2B); box-shadow: 2px 4px 0 var(--ink); cursor: pointer; }
.xtra:hover { filter: brightness(1.08); }
.xtra.sel { box-shadow: 0 0 0 3px var(--yellow), 2px 4px 0 var(--ink); }
.xtra__art { position: relative; width: 56px; height: 36px; flex: none; border-radius: 9px; overflow: hidden; border: 2.5px solid var(--ink); }
.xtra__art .mart { position: absolute; inset: 0; }
.xtra__t { display: grid; gap: 2px; min-width: 0; }
.xtra__t small { font: 800 8.5px/1 var(--f-body); letter-spacing: .12em; color: var(--yellow); }
.xtra__t b { font: 400 17px/1 var(--f-display); letter-spacing: .03em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xtra__s { margin-left: auto; font: 800 9.5px/1 var(--f-body); letter-spacing: .08em; color: var(--cream-2); white-space: nowrap; }
.xtra .chev { width: 14px; height: 14px; flex: none; }
.xtra .chev svg { width: 100%; height: 100%; display: block; }
.xtra__live i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #1FBF5C; box-shadow: 0 0 0 1.5px var(--ink), 0 0 8px #1FBF5C; animation: tm-blink 1s steps(2) infinite; }
.go3__who { position: absolute; z-index: 3; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 3px 4px; border-radius: 9px; background: rgba(8, 6, 18, .75); border: 2px solid rgba(255, 246, 224, .25); font: 400 12px/1 var(--f-display); letter-spacing: .05em; color: #fff; }
.go3__who svg { width: 18px; height: 18px; display: block; }
.mx { position: relative; display: grid; grid-template-columns: 150px repeat(4, minmax(0, 1fr)) minmax(0, 1.15fr); gap: 6px; }
.mx__c { border-radius: 12px; }
.mx__corner { display: grid; place-items: center; font: 800 10px/1 var(--f-body); letter-spacing: .1em; color: var(--cream-3); }
.mx__corner b { color: var(--cream-2); }
.mx__h { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(255, 246, 224, .06); border: 2px solid rgba(255, 246, 224, .1); }
.mx__h b { font: 400 16px/1 var(--f-display); letter-spacing: .03em; color: #fff; }
.mx__h small { font: 800 9px/1 var(--f-body); letter-spacing: .1em; color: var(--cream-3); margin-left: 4px; }
.mx__hx { background: rgba(255, 210, 63, .08); border-style: dashed; border-color: rgba(255, 210, 63, .35); }
.mx__sw { position: relative; width: 38px; height: 28px; flex: none; border-radius: 8px; overflow: hidden; border: 2.5px solid var(--ink); }
.mx__sw .mart { position: absolute; inset: 0; }
.mx__r { display: flex; align-items: center; gap: 8px; padding: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 28%, transparent), rgba(255, 246, 224, .04)); border: 2px solid rgba(255, 246, 224, .1); }
.mx__r .ico { width: 26px; height: 26px; flex: none; }
.mx__r .ico svg { width: 100%; height: 100%; display: block; }
.mx__r b { font: 400 15px/1.05 var(--f-display); letter-spacing: .04em; color: #fff; }
.mx__cell { display: grid; gap: 5px; align-content: start; padding: 6px; background: rgba(8, 6, 18, .45); border: 2px solid rgba(255, 246, 224, .08); min-height: 64px; }
.mx__cx { background: rgba(255, 210, 63, .05); border-style: dashed; border-color: rgba(255, 210, 63, .25); }
.mx__new { border-style: dashed; border-color: rgba(124, 255, 163, .4); }
.mxc { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 7px; align-items: center; padding: 5px 6px; border-radius: 9px; background: linear-gradient(180deg, #2E2948, #221E36); border: 2px solid var(--ink); }
.mxc__sw { grid-row: span 2; position: relative; width: 28px; height: 22px; border-radius: 6px; overflow: hidden; border: 2px solid var(--ink); }
.mxc__sw > span, .mxc__sw .mart { position: absolute; inset: 0; }
.mxc__sw svg { width: 100%; height: 100%; }
.mxc__t b { display: block; font: 400 12px/1.05 var(--f-display); letter-spacing: .03em; color: #fff; }
.mxc__t small { display: block; font: 600 10px/1.2 var(--f-body); color: var(--cream-3); margin-top: 1px; }
.mxc .fate { justify-self: start; font-size: 8px; padding: 2px 4px 1px; }
.mxn { display: flex; gap: 6px; align-items: flex-start; font: 600 11px/1.3 var(--f-body); color: #B8FFCF; padding: 4px; }
.mxn i { font-style: normal; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--ink); font: 400 14px/1 var(--f-display); border: 2px solid var(--ink); }
.mx__gone { margin-top: 10px; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 2px dashed rgba(255, 154, 174, .45); background: rgba(255, 154, 174, .06); }
.mx__gone .nc__sw { width: 34px; height: 34px; flex: none; }
.mx__gone .nc__sw svg { width: 100%; height: 100%; display: block; }
.mx__gone > span:last-child { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: 12.5px; color: var(--cream-2); }
.mx__gone > span:last-child > b { font: 400 14px/1 var(--f-display); letter-spacing: .06em; color: #FF9AAE; }
.mx__gone .g b { font: 400 13px/1 var(--f-display); letter-spacing: .03em; color: #fff; margin-right: 3px; }
@media (max-width: 900px) {
  .mx { grid-template-columns: 110px repeat(5, minmax(150px, 1fr)); overflow-x: auto; }
  #mmB { overflow-x: auto; }
  #mmB .mx { min-width: 900px; }
}
@media (prefers-reduced-motion: reduce) { .tms.enter *, .tms .mc.pop, .tms .ml-go { animation: none !important; } }

/* merge map, grid view (A + C) */
.mg { display: grid; gap: 8px; }
.mg__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px; }
.mg__row .mx__r { flex-direction: column; align-items: flex-start; justify-content: center; }
.mg__row .mx__r small { font: 800 9px/1 var(--f-body); letter-spacing: .1em; color: var(--cream-3); }
.mg__cells { display: grid; gap: 6px; }
.mg__cell { display: grid; align-content: start; gap: 6px; padding: 8px; border-radius: 12px; background: rgba(8, 6, 18, .45); border: 2px solid rgba(255, 246, 224, .1); }
.mg__h { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 2px solid rgba(255, 246, 224, .08); }
.mg__h b { display: block; font: 400 16px/1 var(--f-display); letter-spacing: .03em; color: #fff; }
.mg__h small { display: block; margin-top: 2px; font: 800 8.5px/1.2 var(--f-body); letter-spacing: .08em; color: var(--cream-3); }
.mg__opts { display: flex; flex-wrap: wrap; gap: 4px; }
.mg__opts span { font: 800 8.5px/1 var(--f-body); letter-spacing: .06em; color: var(--ink); background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 5px; padding: 3px 5px 2px; }
.mg__from { display: grid; gap: 5px; }
.mmview { margin-left: 8px; box-shadow: 2px 3px 0 var(--ink); }
.mmview button { padding: 6px 10px 5px; font-size: 13px; }
@media (max-width: 900px) { .mg-on { overflow-x: auto; } .mg-on .mg, .mg-on .mm2__head { min-width: 860px; } }
@media (max-width: 760px) { .sweep { height: 440px; } .sweep.is-narrow .sweep__t { right: 96px; } }