/* ---- The game layer: player select, road HUD, quiz, deck, then & now, boss, certificate, new charts ---- */

/* Player select */
.play { background: linear-gradient(180deg, var(--paper), #FCEFDB 60%, var(--paper)); }
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); }
.pc {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ph cls" "ph name" "ph bio" "st st" "go go";
  gap: .2rem 1.4rem; text-align: left; padding: 1.4rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  font: inherit; color: inherit; cursor: pointer; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pc:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(120, 70, 20, .14); border-color: var(--gold); }
.pc[aria-pressed="true"] { border-color: var(--saffron); box-shadow: 0 0 0 2px var(--saffron), 0 18px 40px rgba(242, 106, 27, .18); }
.pc .ph { grid-area: ph; width: clamp(96px, 12vw, 150px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid var(--gold); box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px rgba(217, 154, 43, .4); }
.pc .ph img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s; }
.pc:hover .ph img { scale: 1.06; }
.pc .wkp { position: absolute; right: 1.2rem; top: 1rem; width: 42px; }
.pc .cls { grid-area: cls; align-self: end; font: .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--saffron-ink); }
.pc strong { grid-area: name; font: 600 clamp(1.8rem, 3vw, 2.5rem)/1 var(--serif); letter-spacing: -.02em; }
.pc .bio { grid-area: bio; font: 300 1rem/1.4 var(--serif); font-style: italic; color: var(--ink-2); }
.pc .st { grid-area: st; list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .35rem; }
.pc .st li { display: grid; grid-template-columns: 13rem 1fr 3rem; align-items: center; gap: .7rem; font: .66rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pc .st i { height: 6px; border-radius: 3px; background: var(--paper-2); position: relative; overflow: hidden; }
.pc .st i::after { content: ""; position: absolute; inset: 0; width: calc(var(--v) * 10%); background: linear-gradient(90deg, var(--saffron-2), var(--saffron)); border-radius: 3px; }
.pc .st b { font-weight: 500; color: var(--ink); text-align: right; }
.pc .go { grid-area: go; margin-top: 1rem; font: 500 .8rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--saffron-ink); }
.who { display: none; gap: .6rem; margin-top: 1.4rem; max-width: 34rem; }
.play.chosen .who { display: flex; }
.who input { flex: 1; min-width: 0; font: 1.1rem var(--serif); padding: .75rem 1rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--card); color: var(--ink); outline: none; }
.who input:focus { box-shadow: 0 0 0 3px rgba(242, 106, 27, .25); border-color: var(--saffron); }
.who button, .switch { font: 500 .78rem var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: .75rem 1.2rem; border-radius: 999px; border: 0; background: var(--ink); color: var(--paper); cursor: pointer; white-space: nowrap; }
.who button:hover { background: var(--saffron); }
.playing, .switch { display: none; }
.play.ready .pick, .play.ready .who { display: none; }
.play.ready .playing { display: block; margin: 0; font: 400 1.4rem var(--serif); }
.play.ready .playing b { font-weight: 600; color: var(--saffron-ink); }
.play.ready .switch { display: inline-block; margin-top: .8rem; background: transparent; color: var(--ink-2); border: 1px solid var(--line); padding: .5rem 1rem; }

/* Walking avatar */
.wk { width: 100%; height: auto; display: block; overflow: visible; }
.wk .leg, .wk .arm { transform-box: view-box; }
.wk .leg { transform-origin: 20px 38px; }
.wk .arm.b { transform-origin: 20px 23px; }
.walking .wk .leg.f, .pc:hover .wk .leg.f, .fighter.you .wk .leg.f { animation: legF .44s ease-in-out infinite alternate; }
.walking .wk .leg.b, .pc:hover .wk .leg.b, .fighter.you .wk .leg.b { animation: legF .44s ease-in-out infinite alternate-reverse; }
.walking .wk .arm.b, .pc:hover .wk .arm.b, .fighter.you .wk .arm.b { animation: legF .44s ease-in-out infinite alternate-reverse; }
.walking .wk .body, .pc:hover .wk .body { animation: bobW .22s ease-in-out infinite alternate; }
@keyframes legF { from { rotate: -24deg; } to { rotate: 24deg; } }
@keyframes bobW { to { translate: 0 -1.2px; } }
.fighter.you .wk .leg, .fighter.you .wk .arm.b { animation-duration: 1.2s !important; }

/* Road HUD */
.road {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: 58px; display: flex; align-items: center; gap: 1rem; padding: 0 1rem 0 .5rem;
  background: rgba(251, 248, 242, .92); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  transform: translateY(105%); transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.road.show { transform: none; }
.me { position: relative; display: flex; align-items: center; gap: .55rem; padding: .25rem .8rem .25rem .25rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; font: inherit; color: inherit; flex: none; }
.me img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); }
.me .meta { display: grid; line-height: 1.1; text-align: left; }
.me .nm { font: 600 .95rem var(--serif); }
.me .lv { font: .58rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--saffron-ink); }
.me .iq { font: .7rem var(--mono); color: var(--muted); }
.me .iq b { font: 600 1.05rem var(--serif); color: var(--ink); }
.me .xp { position: absolute; left: 3.2rem; right: 1rem; bottom: -1px; height: 3px; border-radius: 2px; background: var(--paper-2); overflow: hidden; }
.me .xp b { position: absolute; inset: 0; background: linear-gradient(90deg, var(--saffron-2), var(--saffron)); transform-origin: left; transform: scaleX(0); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.me .rcw { font: .7rem var(--mono); color: var(--ink-2); }
.me.bump { animation: bump .5s; }
@keyframes bump { 30% { scale: 1.08; } }
.me .pts { position: absolute; left: 50%; top: -6px; font: 600 .9rem var(--serif); color: var(--saffron-ink); pointer-events: none; animation: pts 1.4s ease-out forwards; white-space: nowrap; }
@keyframes pts { from { opacity: 0; translate: -50% 0; } 15% { opacity: 1; } to { opacity: 0; translate: -50% -42px; } }
.track { position: relative; flex: 1; height: 100%; margin-right: 1rem; }
.lane { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: 12px; border-radius: 2px; background: linear-gradient(90deg, var(--saffron) 0 33.3%, #E8E1D2 33.3% 66.6%, var(--green) 66.6%); opacity: .55; }
.stops { position: absolute; inset: 0; }
.stop { position: absolute; top: 50%; margin-top: 13.5px; width: 9px; height: 9px; translate: -50% -50%; border-radius: 50%; background: var(--card); border: 1.5px solid var(--then); text-decoration: none; }
.stop i { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; font-size: .7rem; font-style: normal; opacity: 0; transition: opacity .2s, bottom .2s; }
.stop:hover i, .stop:focus-visible i { opacity: 1; bottom: 14px; }
.stop.done { border-color: var(--saffron); }
.stop.got { background: var(--saffron); border-color: var(--saffron); }
.walker { position: absolute; bottom: 4px; width: 34px; translate: -50% 0; transition: left .12s linear; z-index: 2; }
.walker .sprite { transition: transform .2s; }
.road.back .walker .sprite { transform: scaleX(-1); }
.bubble {
  position: absolute; bottom: calc(100% + 10px); left: 50%; width: max-content; max-width: min(340px, 78vw); padding: .65rem .85rem; border-radius: 12px;
  background: var(--ink); color: var(--paper); font: 400 .95rem/1.35 var(--serif); box-shadow: 0 0 0 1px rgba(255, 190, 120, .35), 0 12px 30px rgba(0, 0, 0, .22);
  translate: var(--bx, -50%) 6px; opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s;
}
.bubble b { color: var(--saffron-2); font-weight: 600; }
.bubble::after { content: ""; position: absolute; top: 100%; left: var(--tail, 50%); border: 7px solid transparent; border-top-color: var(--ink); translate: -50% 0; }
.road.talk .bubble { opacity: 1; translate: var(--bx, -50%) 0; }
.pickme { display: none; font: 500 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: .55rem 1rem; border-radius: 999px; border: 0; background: var(--saffron-btn); color: #fff; cursor: pointer; flex: none; }
.road.nop .pickme { display: block; }
.road.nop .walker, .road.nop .me .iq, .road.nop .me .rcw, .road.nop .me .xp { display: none; }
body.road-on .tm { bottom: 4.6rem; }
@media (max-width: 560px) { body.road-on .tm { bottom: 58px; } }
body.road-on #toast { bottom: 9rem; }

/* Quiz inside the then-vs-now card */
.vs { position: relative; }
.vs-c.a { position: relative; }
.q-cover { display: none; }
.vs.quiz .q-cover {
  display: grid; place-content: center; position: absolute; inset: 0; border: 0; border-radius: inherit; cursor: pointer;
  background: repeating-linear-gradient(-45deg, var(--saffron), var(--saffron) 8px, #F47B30 8px, #F47B30 16px); color: #fff; font: 600 2.2rem/1 var(--serif);
  animation: pulse 2.4s ease-in-out infinite;
}
.vs.quiz .q-cover small { font: .6rem var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-top: .3rem; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(242, 106, 27, .15); } }
.guess { display: none; grid-column: 1 / -1; margin-top: .9rem; padding: 1rem; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.vs.open .guess { display: block; animation: fadeUp .3s; }
/* "10× fewer" would give the answer away: it appears once you have answered */
.vs.quiz .vs-what em { visibility: hidden; }
@keyframes fadeUp { from { opacity: 0; translate: 0 6px; } }
.gq { margin: 0 0 .7rem; font: 500 1rem/1.35 var(--serif); }
.gr { display: flex; align-items: center; gap: .8rem; }
.gr input { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: var(--line); outline: none; }
.gr input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--saffron); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--saffron); cursor: grab; }
.gr input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--saffron); border: 3px solid var(--card); cursor: grab; }
.gr output { font: 600 1.4rem var(--serif); color: var(--saffron-ink); min-width: 6.5rem; text-align: right; }
.gb { display: flex; gap: .5rem; margin-top: .8rem; }
.gb button { font: 500 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; }
.gb .peek { background: transparent; color: var(--ink-2); border-color: var(--line); }
.g-res { grid-column: 1 / -1; margin: .8rem 0 0; font: 400 1rem/1.4 var(--serif); color: var(--ink-2); animation: fadeUp .4s; }
.g-res b { color: var(--ink); }
.g-res .plus { font: 600 .75rem var(--mono); color: #fff; background: var(--saffron); padding: .1rem .45rem; border-radius: 999px; white-space: nowrap; }

/* Then & now photos */
.tns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.4rem); }
.tn { margin: 0; }
.tn.big { grid-column: 1 / -1; }
.tn-f { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: var(--paper-2); box-shadow: 0 20px 50px rgba(60, 35, 10, .16); user-select: none; }
.tn.big .tn-f { aspect-ratio: 21 / 9; }
.tn-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tn-f .b { filter: sepia(.35) saturate(.75) contrast(.95); }
.tn-f .a { clip-path: inset(0 0 0 var(--x)); }
.tn-f .hd { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; translate: -50% 0; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .4); pointer-events: none; }
.tn-f .hd::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 44px; height: 44px; border-radius: 50%; background: var(--saffron); color: #fff; display: grid; place-items: center; font: 600 1rem var(--mono); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.tn-f input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.tn-f .tn-ai { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); pointer-events: none; }
.tn-f .tn-ai i, .bl-ai { position: absolute; bottom: .5rem; font: .55rem var(--mono); font-style: normal; letter-spacing: .04em; color: rgba(255, 255, 255, .85); background: rgba(22, 19, 15, .55); padding: .15rem .4rem; border-radius: 4px; white-space: nowrap; pointer-events: none; }
.tn-f .tn-ai i { right: calc(100% - var(--x) + .5rem); }
.bl-ai { right: .6rem; }
.bl-ai[hidden] { display: none; }
.tn-f .lab { position: absolute; top: .8rem; font: 500 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: .35rem .65rem; border-radius: 999px; pointer-events: none; }
.tn-f .lab.l { left: .8rem; background: rgba(22, 19, 15, .8); color: var(--paper); }
.tn-f .lab.r { right: .8rem; background: var(--saffron-btn); color: #fff; }
.tn-f input { touch-action: pan-y; }
/* "More pairs" bar: same look as Exhibit B's Explore bar, with a peek at what's inside */
.tn-more { display: flex; align-items: center; gap: 1rem; width: 100%; margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; min-height: 64px; padding: .55rem .6rem .55rem .55rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 10px 26px rgba(120, 70, 20, .08); transition: transform .12s, border-color .15s; }
.tn-more:hover { border-color: var(--ink); }
.tm-th { flex: none; display: flex; }
.tm-th img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--card); margin-left: -14px; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.tm-th img:first-child { margin-left: 0; }
.tm-tx { flex: 1; min-width: 0; display: grid; }
.tm-tx b { font: 600 1.05rem var(--serif); }
.tm-tx small { font: .66rem var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-go { flex: none; display: flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 .76rem var(--mono); letter-spacing: .04em; white-space: nowrap; }
.tm-go i { font-style: normal; color: var(--saffron-2); }
.tn-more:hover .tm-go { background: var(--saffron-btn); }
.tn-more:hover .tm-go i { color: #fff; }
@media (max-width: 560px) {
  .tn-more { border-radius: 20px; gap: .7rem; }
  .tm-th img { width: 38px; height: 38px; margin-left: -18px; }
  .tm-th img:nth-child(n+4) { display: none; }
  .tm-go { padding: .65rem .9rem; }
  .tm-tx small { font-size: .72rem; }
}
.tn figcaption { padding-top: .9rem; }
.tn-h { margin: 0 0 .6rem; font: 600 1.35rem var(--serif); letter-spacing: -.01em; }
.tn figcaption p { margin: 0 0 .4rem; font: 300 1.08rem/1.4 var(--serif); color: var(--ink-2); }
.tn.big figcaption p { font-size: 1.25rem; max-width: 60ch; }
.tn figcaption small { font: .62rem var(--mono); color: var(--muted); }
.tn figcaption small a { color: inherit; }

/* Swipe deck */
.deckwrap { background: var(--ink); color: var(--paper); outline: none; }
.deckwrap .sec-head { border-color: #3A342C; }
.deckwrap .sec-head p { color: #B5AB9C; }
.deck { max-width: 460px !important; }
.stack { position: relative; height: 420px; }
.dk {
  position: absolute; inset: 0; padding: 1.6rem; border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; touch-action: pan-y; cursor: grab; user-select: none;
  transform: translateY(calc(var(--k) * 14px)) scale(calc(1 - var(--k) * .05)); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.dk:active { cursor: grabbing; }
.dk-ic { font-size: 2.4rem; line-height: 1; }
.dk h3 { font: 600 1.6rem/1.1 var(--serif); letter-spacing: -.02em; margin: .8rem 0 1.1rem; }
.dk-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: .6rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dk-vs span { display: block; font: .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dk-vs .b b { font: 400 1.5rem/1.1 var(--serif); color: var(--muted); }
.dk-vs .a b { font: 600 1.9rem/1.1 var(--serif); color: var(--saffron-ink); }
.dk-vs i { font-style: normal; color: var(--saffron); font-size: 1.3rem; padding-bottom: .3rem; }
.dk-j { font: italic 300 1.1rem/1.4 var(--serif); color: var(--ink-2); margin: 1rem 0; flex: 1; }
.dk .src { align-self: flex-start; }
.stamp { position: absolute; top: 1.4rem; font: 600 1.1rem var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: .3rem .7rem; border: 3px solid; border-radius: 6px; opacity: 0; transition: opacity .15s; }
.stamp.yes { right: 1.4rem; color: var(--green); rotate: 12deg; }
.stamp.no { left: 50%; color: #C0392B; rotate: -12deg; }
.dk.lean-r .stamp.yes, .dk.yep .stamp.yes { opacity: 1; }
.dk.lean-l .stamp.no, .dk.nope .stamp.no { opacity: 1; }
.dk-ctl { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; }
.dk-ctl button { width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; font: 600 1.4rem var(--sans); display: grid; place-items: center; line-height: 1; transition: transform .15s; }
.dk-ctl button span { font: .5rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.dk-ctl button:hover { transform: scale(1.08); }
.dk-ctl .no { background: #2C2620; color: #E8DFCF; }
.dk-ctl .yes { background: var(--saffron-btn); color: #fff; }
.dk-n { font: .75rem var(--mono); color: #8E8476; }
.dk-msg { min-height: 2.6em; font: italic 300 1.05rem/1.35 var(--serif); color: var(--saffron-2); text-align: center; margin: 1rem 0 0; }
.dk-end { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .6rem; padding: 2rem; border: 1px dashed #5A5146; border-radius: 18px; }
.dk-end b { font: 600 3.2rem var(--serif); color: var(--saffron-2); }
.dk-end p { font: 300 1.15rem/1.4 var(--serif); margin: 0 0 .6rem; }
.dk-end .pill { justify-self: center; color: var(--paper); border-color: #5A5146; }

/* Boss */
.bossec { background: radial-gradient(80% 90% at 70% 40%, #FFE7C2, var(--paper) 70%); }
.arena { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 2rem; padding: 1rem 0 2rem; border-bottom: 2px solid var(--ink); }
.fighter { display: grid; justify-items: center; gap: .4rem; text-align: center; }
.fighter.you .sprite { width: clamp(90px, 12vw, 140px); }
.fighter b { font: 600 1.2rem var(--serif); }
.fighter.boss svg { width: clamp(150px, 20vw, 230px); height: auto; overflow: visible; }
.boss .steam path { animation: steam 1.4s ease-in-out infinite; }
.boss .steam path + path { animation-delay: -.7s; }
@keyframes steam { 50% { opacity: .2; translate: 0 -6px; } }
.boss .sign { animation: wave 1.2s ease-in-out infinite alternate; transform-origin: 128px 166px; }
@keyframes wave { to { rotate: 6deg; } }
.fighter.boss.ouch svg { animation: ouch .45s; }
@keyframes ouch { 20% { translate: 10px 0; rotate: 6deg; filter: brightness(1.4) sepia(1) hue-rotate(-30deg); } 60% { translate: -6px 0; } }
.fighter.boss.ko svg { transition: rotate .8s, translate .8s, opacity .8s; rotate: 80deg; translate: 30px 40px; opacity: .55; }
.fighter.boss.ko .xx { opacity: 1; }
.shout { margin: 0; font: italic 600 1.3rem var(--serif); color: #C0392B; min-height: 1.6em; }
.hp { width: min(240px, 100%); height: 14px; border-radius: 999px; background: var(--paper-2); border: 1.5px solid var(--ink); position: relative; overflow: hidden; }
.hp i { position: absolute; inset: 0; background: linear-gradient(90deg, #C0392B, #E46A4F); transform-origin: left; transition: transform .5s; }
.hp span { position: absolute; inset: 0; display: grid; place-items: center; font: .55rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.pick-r { font: .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 1.4rem 0 .6rem; }
.ammo { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.ammo .rc { text-align: left; padding: .9rem 1rem; border-radius: 10px; border: 1px solid var(--ink); background: var(--card); cursor: pointer; font: inherit; color: inherit; transition: transform .15s, background .15s; }
.ammo .rc:hover { transform: translateY(-3px) rotate(-1deg); background: #FFF6EA; }
.ammo .rc b { display: block; font: 600 1.35rem/1.1 var(--serif); color: var(--saffron-ink); }
.ammo .rc span { font: .68rem var(--mono); color: var(--ink-2); }
.pick-r .hits { margin-left: .5rem; padding: .15rem .55rem; border-radius: 999px; background: var(--ink); color: var(--paper); letter-spacing: .04em; }
.boss-msg { min-height: 1.6em; font: 400 1.1rem/1.4 var(--serif); margin: 1rem 0 0; }
.boss-msg b { color: var(--saffron-ink); }
.boss-msg .pill { margin-left: .5rem; }
.fly { position: fixed; left: 0; top: 0; z-index: 70; font-size: 2rem; pointer-events: none; }
.oath .cert-btn { display: flex; margin: 2rem auto 0; min-height: 52px; padding: .8rem 1.6rem; font-size: .82rem; background: var(--saffron-btn); border-color: var(--saffron-btn); color: #fff; box-shadow: 0 10px 24px rgba(242, 106, 27, .25); }
.oath .cert-btn:hover { background: var(--saffron-ink); border-color: var(--saffron-ink); color: #fff; }

/* Certificate */
#cert { border: 0; padding: 0; background: transparent; max-width: min(960px, 94vw); overflow: visible; }
#cert::backdrop { background: rgba(22, 19, 15, .8); backdrop-filter: blur(4px); }
#cert canvas { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.cert-act { display: flex; justify-content: center; gap: .8rem; margin-top: 1rem; }
.cert-act .pill { background: var(--paper); }
.cert-act .share { background: var(--saffron-btn); color: #fff; border-color: var(--saffron-btn); }

/* New charts: split bars, crime, rail, inflation, NPA */
.split-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; }
.split-tabs button { min-height: 44px; font: 500 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer; }
.split-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.split-key { display: flex; gap: 1.2rem; font: .66rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem; }
.split-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .4rem; vertical-align: -1px; }
.srow { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr 4.2rem; align-items: center; gap: 1rem; padding: .32rem 0; }
.srow h3 { margin: 0; font: 500 .95rem/1.2 var(--serif); }
.sbar { position: relative; height: 26px; border-radius: 4px; background: var(--saffron); overflow: hidden; display: flex; }
.sbar .o { background: var(--ink); height: 100%; width: 100%; transition: width 1.1s cubic-bezier(.2, .8, .2, 1); flex: none; }
.sbar span { position: absolute; top: 50%; translate: 0 -50%; font: 500 .66rem var(--mono); white-space: nowrap; pointer-events: none; }
.sbar .v0 { left: .5rem; color: var(--paper); }
.sbar .v1 { right: .5rem; color: var(--ink); font-weight: 600; }
.srow .pc2 { font: 600 1.15rem var(--serif); color: var(--saffron-ink); text-align: right; }
.srow .pc2 small { display: block; font: .55rem var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.split .src-l { font: .62rem var(--mono); color: var(--muted); margin-top: 1rem; }
.split .src-l a { color: inherit; }

.crime { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.4rem); margin-bottom: 3rem; }
.cf2 { margin: 0; }
.cf2 h3 { font: 600 1.3rem var(--serif); margin: 0 0 .2rem; }
.cf2 .drop { font: 600 2.3rem/1 var(--serif); color: var(--saffron-ink); letter-spacing: -.02em; }
.cf2 .drop small { font: .62rem var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-left: .3rem; }
.cf2 svg, .railacc svg, .infl svg, .npa svg { width: 100%; height: auto; display: block; overflow: visible; }
.ch-ax { font: 10px var(--mono); fill: var(--muted); }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-pre { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.ch-post { fill: none; stroke: var(--saffron); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.ch-area { fill: url(#sfade); }
.ch-2014 { stroke: var(--ink); stroke-dasharray: 3 3; }
.ch-lab { font: 600 13px var(--serif); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.ch-lab.sf { fill: var(--saffron-ink); }
.ch-hit { fill: transparent; }
.ch-dot { fill: var(--saffron); stroke: var(--paper); stroke-width: 2; }
.figcap { font: .66rem/1.5 var(--mono); color: var(--muted); margin-top: .7rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.figcap a { color: inherit; }
.railacc, .infl, .npa { margin: 0 0 3rem; }
.railacc h3, .infl h3, .npa h3 { font: 600 clamp(1.4rem, 2.6vw, 2rem)/1.1 var(--serif); letter-spacing: -.02em; margin: 0 0 .3rem; }
.railacc h3 em, .infl h3 em, .npa h3 em { color: var(--saffron-txt); }
.railacc p.sub, .infl p.sub, .npa p.sub { font: 300 1.05rem/1.4 var(--serif); color: var(--ink-2); margin: 0 0 1.2rem; max-width: 60ch; font-style: italic; }
.bar0 { fill: var(--ink); }
.bar1 { fill: var(--saffron); }
.bar-v { font: 500 9.5px var(--mono); fill: var(--ink-2); }
.era { font: .6rem var(--mono); fill: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.era-l { stroke: var(--line); stroke-dasharray: 2 3; }
.era-band { fill: rgba(242, 106, 27, .07); }

@media (max-width: 900px) {
  .pick { grid-template-columns: 1fr; }
  .pc { grid-template-columns: auto 1fr; padding: 1.1rem; }
  .pc .st li { grid-template-columns: 1fr 5rem 2.6rem; }
  .tns { grid-template-columns: 1fr; }
  .tn.big .tn-f { aspect-ratio: 16 / 10; }
  .tn-f .lab { max-width: calc(100% - 1.6rem); white-space: normal; line-height: 1.3; }
  .tn-f .lab.r { top: auto; bottom: .8rem; }
  .crime { grid-template-columns: 1fr; }
  .arena { gap: .5rem; }
  .ammo { grid-template-columns: 1fr; }
  .srow { grid-template-columns: 1fr 3.6rem; gap: .2rem .8rem; }
  .srow h3 { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .road { gap: .5rem; padding: 0 .6rem 0 .3rem; }
  .me .meta, .me .rcw { display: none; }
  .me { padding-right: .6rem; }
  .me .xp { left: 2.9rem; right: .6rem; }
  .pick { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .pc { grid-template-columns: 1fr; grid-template-areas: "ph" "cls" "name" "go"; justify-items: center; text-align: center; padding: 1rem .6rem; }
  .pc .ph { width: 104px; margin-bottom: .5rem; }
  .pc .bio, .pc .st, .pc .wkp { display: none; }
  .pc strong { font-size: 1.7rem; }
  .pc .go { margin-top: .5rem; font-size: .66rem; }
  .stop { width: 6px; height: 6px; border-width: 1px; }
  .stop i { display: none; }
  .who { flex-direction: column; }
  .stack { height: 440px; }
  .bubble { font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .walking .wk *, .pc:hover .wk *, .fighter .wk * { animation: none !important; }
  .vs.quiz .q-cover { animation: none; }
}
.road:not(.show) .bubble { opacity: 0 !important; }
.play-cta { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.6rem; padding: .85rem 1.4rem; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font: 500 .8rem var(--mono); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 10px 24px rgba(22, 19, 15, .18); transition: background .2s, transform .2s; }
.play-cta:hover { background: var(--saffron); transform: translateY(-2px); }
.play-cta b { font-weight: 500; color: var(--saffron-2); }
.play-cta:hover b { color: #fff; }