/* Hub — the edition dial. The page repaints in the selected edition's colours (--h-*).
   Motion recipe: turns are tweened with a slight overshoot, hovering a wedge lights it in its own colours,
   the notch hops each time a wedge passes, and the dial sways once after the intro. */
:root { --h-bg: #080606; --h-ink: #efe9e6; --h-acc: #d4111b; --h-glow: rgba(212,17,27,.22); --ease: cubic-bezier(.16,1,.3,1); --inout: cubic-bezier(.76,0,.24,1); --mono: 'JetBrains Mono', ui-monospace, monospace; --acc: var(--h-acc); --ink: var(--h-ink); }
html, body { height: 100%; }
body { background: var(--h-bg); color: var(--h-ink); font-family: var(--mono); overflow: hidden; transition: background .62s var(--ease), color .5s var(--ease); }
.hub { position: relative; height: 100vh; height: 100dvh; overflow: hidden; --dial: min(96vh, 68vw, 1040px); --hubd: calc(var(--dial) * .235); --eye: 78%; }
html.hub-boot .hub-top, html.hub-boot .dial-stage { opacity: 0; }

/* worlds: one backdrop per edition, cross-faded */
.worlds { position: absolute; inset: 0; z-index: 0; }
.world { position: absolute; inset: 0; opacity: 0; transition: opacity .62s var(--ease); }
.world.on { opacity: 1; }
.world::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 0%, var(--h-glow), transparent 70%); }
.w-ledger { background: repeating-linear-gradient(transparent 0 31px, rgba(26,23,20,.07) 31px 32px), radial-gradient(circle at 50% 60%, #f5f0e4, #e3dac6); }
.w-finalcut { background: radial-gradient(1.5px 1.5px at 20% 30%, rgba(201,162,74,.7), transparent), radial-gradient(1px 1px at 70% 20%, rgba(201,162,74,.6), transparent), radial-gradient(1.5px 1.5px at 85% 60%, rgba(201,162,74,.5), transparent), radial-gradient(1px 1px at 35% 70%, rgba(201,162,74,.5), transparent), radial-gradient(circle at 50% 30%, #13204f, #060b22 70%); }
.w-issue { background: radial-gradient(circle, rgba(22,22,22,.13) 1.2px, transparent 1.6px) 0 0 / 9px 9px, repeating-conic-gradient(from 0deg at 50% 110%, rgba(215,38,46,.07) 0 6deg, transparent 6deg 12deg), #efe3c6; }
.w-fight { background: radial-gradient(40% 60% at 50% 0%, rgba(255,255,255,.08), transparent 70%), repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 2px, transparent 2px 6px), #0b0b0c; }
.w-arcade { background: linear-gradient(rgba(116,224,111,.06) 1px, transparent 1px) 0 0 / 100% 4px, linear-gradient(90deg, rgba(116,224,111,.05) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(rgba(116,224,111,.05) 1px, transparent 1px) 0 0 / 48px 48px, #040804; }
.w-showroom { background: linear-gradient(100deg, transparent 38%, rgba(239,232,218,.06) 46%, transparent 56%), radial-gradient(circle at 50% 100%, #1b1712, #0b0a09 60%); }
.w-terminal { background: repeating-linear-gradient(100deg, transparent 0 22px, rgba(255,255,255,.018) 22px 23px), radial-gradient(circle at 50% 120%, #1a0606, #080606 60%); }
.w-nightline, .w-bigbrainz, .w-hectoc, .w-nback, .w-anzan, .w-kenken { background: radial-gradient(circle at 50% 110%, #2a1240, #0a0710 60%); }

/* top bar */
.hub-top { position: relative; z-index: 5; display: flex; justify-content: space-between; gap: 30px; padding: clamp(18px, 3.2vh, 40px) clamp(18px, 3.2vw, 54px) 0; pointer-events: none; }
.hub-top button, .hub-top a { pointer-events: auto; }
.hub-intro { max-width: 560px; }
.hub-who { display: flex; align-items: center; gap: .7em; font: 500 clamp(11px, 1vw, 13px)/1 var(--mono); letter-spacing: .34em; text-transform: uppercase; }
.hub-who i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hub-blurb { font-size: clamp(10.5px, .86vw, 12.5px); line-height: 1.64; letter-spacing: .035em; margin: .9em 0 clamp(18px, 3vh, 44px); max-width: min(46ch, 38vw); opacity: .82; }
.hub-title { font-size: clamp(40px, min(6.8vw, 10.6vh), 104px); line-height: .92; letter-spacing: -.01em; min-height: .92em; white-space: nowrap; margin: 0 0 .36em; color: var(--h-ink); perspective: 900px; transition: color .5s var(--ease); }
.hub-title [data-ch] { display: inline-block; transform-style: preserve-3d; backface-visibility: hidden; }
.hub-title [data-sp] { width: .3em; }
.hub-title[data-ed="ledger"], .hub-title[data-ed="finalcut"] { font-style: italic; font-weight: 500; letter-spacing: .005em; }
.hub-title[data-ed="fight"] { font-style: italic; font-weight: 900; text-transform: uppercase; }
.hub-title[data-ed="arcade"] { font-size: clamp(19px, min(3.6vw, 5.6vh), 56px); line-height: 1.4; color: var(--h-acc); text-shadow: 0 0 14px rgba(116,224,111,.25); }
.hub-title[data-ed="showroom"] { font-size: clamp(21px, min(4.2vw, 6.6vh), 66px); letter-spacing: .05em; text-transform: uppercase; }
.hub-title[data-ed="terminal"], .hub-title[data-ed="nightline"], .hub-title[data-ed="bigbrainz"] { text-transform: uppercase; }
.hub-title[data-ed="issue"] { color: var(--h-acc); text-shadow: 3px 3px 0 #161616; letter-spacing: .022em; }
.hub-tag { font: 500 clamp(10px, .86vw, 12.5px)/1.4 var(--mono); letter-spacing: .3em; text-transform: uppercase; opacity: .85; }
.hub-ctrl { display: grid; justify-items: end; gap: 18px; align-content: start; }
.hub-row { display: flex; gap: clamp(10px, 1.1vw, 18px); align-items: flex-start; }
.hub-hint { font: 500 10.5px/1.7 var(--mono); letter-spacing: .2em; text-transform: uppercase; text-align: right; max-width: min(44ch, 34vw); opacity: .88; }

.toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--h-ink) 22%, transparent); background: color-mix(in srgb, var(--h-bg) 70%, #000); border-radius: 6px; font: 500 9.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--h-ink); transition: color .26s var(--ease), border-color .26s var(--ease); }
.is-light .toggle { background: #f6f1e6; color: #1c1a17; }
.toggle span { opacity: .5; transition: opacity .26s var(--ease); }
.toggle span.on { opacity: 1; }
.tg-track { width: 34px; height: 16px; border-radius: 3px; background: #050505; position: relative; box-shadow: inset 0 1px 3px #000; opacity: 1 !important; }
.tg-track i { position: absolute; top: 2px; left: 2px; width: 14px; height: 12px; border-radius: 2px; background: linear-gradient(#f4efe6, #c9c2b6); transition: transform .32s var(--inout); }
.toggle.gm .tg-track i { transform: translateX(16px); }
.hw-btn { display: grid; justify-items: center; gap: 6px; font: 500 8.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--h-ink); transition: color .26s var(--ease); }
.plunger .pl-cap { width: 30px; height: 14px; border-radius: 3px 3px 1px 1px; background: linear-gradient(#f4efe6, #bdb5a7); box-shadow: 0 3px 0 #6e675d; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.plunger .pl-stem { width: 14px; height: 14px; margin-top: -6px; background: #1c1a17; border-radius: 0 0 2px 2px; }
.plunger.down .pl-cap, .plunger:active .pl-cap { transform: translateY(3px); box-shadow: 0 0 0 #6e675d; }
.rocker .rk-face { width: 34px; height: 34px; border-radius: 6px; background: #1c1a17; border: 1px solid rgba(255,255,255,.12); position: relative; }
.rocker .rk-face::before { content: ''; position: absolute; left: 6px; right: 6px; top: 7px; height: 9px; border-radius: 2px; background: linear-gradient(#f4efe6, #bdb5a7); transition: transform .22s var(--ease), background .22s; }
.rocker.on .rk-face::before { transform: translateY(10px); background: linear-gradient(var(--h-acc), color-mix(in srgb, var(--h-acc) 60%, #000)); }

/* dial stage */
.dial-stage { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.dial-arrows { position: absolute; left: 50%; top: calc(var(--eye) - var(--dial) * .5); translate: -50% -50%; display: flex; align-items: center; gap: clamp(52px, 5.2vw, 76px); z-index: 9; pointer-events: auto; }
.arw { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; padding: 0 0 3px; font-size: 22px; line-height: 1; color: #f6f3ec; cursor: pointer; background: radial-gradient(circle at 50% 32%, #34312c, #1a1815 62%, #100f0d); border: 1px solid rgba(246,243,236,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px rgba(0,0,0,.45); transition: transform .16s, border-color .16s; }
.arw:hover { border-color: rgba(246,243,236,.85); }
.arw:active { transform: scale(.93); }
.dial-tip { position: absolute; left: calc(100% + 16px); top: 50%; translate: 0 -50%; white-space: nowrap; font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: .88; }

.dial-wrap { position: absolute; left: 50%; top: var(--eye); width: var(--dial); height: var(--dial); translate: -50% -50%; border-radius: 50%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; pointer-events: auto; }
.dial-wrap[data-drag="true"] { cursor: grabbing; }
.dial-wrap::before { content: ''; position: absolute; left: 50%; top: 57%; width: 150%; height: 132%; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(0,0,0,.62) 0%, rgba(0,0,0,.5) 62%, rgba(0,0,0,.2) 78%, transparent 100%); }
.is-light .dial-wrap::before { background: radial-gradient(closest-side, rgba(60,48,30,.5) 0%, rgba(60,48,30,.4) 62%, rgba(60,48,30,.15) 78%, transparent 100%); }
.dial-shell { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(#000 0, #000 58%, rgba(0,0,0,.92) 70%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.16) 100%); mask-image: linear-gradient(#000 0, #000 58%, rgba(0,0,0,.92) 70%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.16) 100%); }
.dial { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; will-change: transform; transform: rotate(calc(var(--dial-deg, 0) * 1deg));
  background: repeating-conic-gradient(from 0deg at 50% 50%, #ffffff0b 0deg .9deg, #0000000b .9deg 2.25deg), radial-gradient(circle closest-side at 50% 50%, transparent 0 84.5%, #0000004d 85%, #ffffff29 86.4%, transparent 87.6%), radial-gradient(circle closest-side at 50% 22%, #4a4a4f 0%, #232327 40%, #101013 86%, #101013 100%);
  box-shadow: inset 0 0 0 1px rgba(246,243,236,.2), inset 0 calc(var(--dial) * .02) calc(var(--dial) * .05) calc(var(--dial) * -.03) #ffffff4d, inset 0 calc(var(--dial) * -.03) calc(var(--dial) * .07) calc(var(--dial) * -.03) #0000008c; }
.knurl { position: absolute; inset: 0; z-index: 4; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(rgba(255,255,255,.3) 0deg 1.125deg, rgba(0,0,0,.44) 1.125deg 2.25deg); -webkit-mask-image: radial-gradient(circle, transparent 0 85%, #000 86% 99.2%, transparent 99.6%); mask-image: radial-gradient(circle, transparent 0 85%, #000 86% 99.2%, transparent 99.6%); }
.sheen { position: absolute; inset: 0; z-index: 5; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(46% 46% at calc(var(--lx, .5) * 100%) calc(var(--ly, .36) * 100%), #ffffff2e 0%, #ffffff0d 42%, transparent 72%); }
.is-light .sheen { background: radial-gradient(42% 42% at calc(var(--lx, .5) * 100%) calc(var(--ly, .36) * 100%), #fff4de1a 0%, #fff4de09 42%, transparent 72%); }
.spokes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; fill: none; stroke: rgba(246,243,236,.2); stroke-width: 1px; }

/* wedges: full-size buttons, clipped to their slice, rotated into place; icons and labels counter-rotate to stay upright */
.wedge { --anti: calc(var(--dial-deg, 0) * -1deg + var(--w, 0) * -1deg); position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: #f6f3ec; cursor: pointer; appearance: none; transform: rotate(calc(var(--w, 0) * 1deg)); transition: color .46s var(--ease); }
.wedge.on { color: var(--w-ink, #fffefb); }
.wedge:focus-visible { outline: none; }
.wedge:focus-visible .w-ic { outline: 2px solid; outline-offset: calc(var(--dial) * .016); border-radius: 50%; }
.w-flood { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; transition: opacity .52s var(--ease);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--w-accent, #fff) 46%, transparent) 0%, color-mix(in srgb, var(--w-accent, #fff) 24%, transparent) 42%, color-mix(in srgb, var(--w-accent, #fff) 9%, transparent) 76%, transparent 100%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--w-base, #000) 88%, transparent) 0%, color-mix(in srgb, var(--w-base, #000) 62%, transparent) 70%, color-mix(in srgb, var(--w-base, #000) 40%, transparent) 100%); }
.w-scrim { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .52s var(--ease); background: radial-gradient(circle at 50% 50%, transparent 0 calc(50% - 2px), color-mix(in srgb, var(--w-accent, #fff) 62%, transparent) calc(50% - 1.5px) calc(50% - .5px), transparent calc(50% - .5px)); }
.wedge.on .w-flood, .wedge.on .w-scrim { opacity: 1; }
.w-ic, .w-lb { position: absolute; top: 50%; left: 50%; z-index: 2; pointer-events: none; transform: translate(-50%, -50%) translateY(calc(var(--r) * -1)) rotate(var(--anti)); }
.w-ic { --r: calc(var(--dial) * .352); width: calc(var(--dial) * .078); height: calc(var(--dial) * .078); opacity: .7; transition: opacity .46s var(--ease); }
.w-ic svg { width: 100%; height: 100%; display: block; }
.w-lb { --r: calc(var(--dial) * .215); width: calc(var(--dial) * .12); text-align: center; font: 500 calc(var(--dial) * .019)/1.22 var(--mono); letter-spacing: .13em; text-transform: uppercase; opacity: .88; transition: opacity .46s var(--ease); }
.wedge.on .w-ic, .wedge.on .w-lb { opacity: 1; }

/* the fixed pointer at twelve o'clock */
.notch { position: absolute; left: 50%; top: calc(var(--dial) * -.03); z-index: 8; width: calc(var(--dial) * .016); height: calc(var(--dial) * .044); transform: translateX(-50%); pointer-events: none; background: linear-gradient(to bottom, var(--h-ink) 0%, var(--h-ink) 56%, color-mix(in srgb, var(--h-ink) 30%, transparent) 100%); clip-path: polygon(0 0, 100% 0, 100% 42%, 50% 100%, 0 42%); filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); transition: background .5s var(--ease); }

/* hub button */
.hub-btn { position: absolute; left: 50%; top: 50%; z-index: 7; width: var(--hubd); height: var(--hubd); transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; align-content: center; gap: calc(var(--hubd) * .045); color: #0d0c0a; cursor: pointer; border: 0;
  background: radial-gradient(circle, transparent 0 62%, rgba(255,255,255,.16) 66%, transparent 82%), radial-gradient(circle at 50% 28%, #fbf8f1, #ded8cc 58%, #b9b2a4);
  box-shadow: inset 0 calc(var(--hubd) * .012) 0 #ffffffe6, inset 0 calc(var(--hubd) * -.02) calc(var(--hubd) * .03) #50463657, 0 calc(var(--hubd) * .07) calc(var(--hubd) * .1) #0000008c, 0 calc(var(--hubd) * .2) calc(var(--hubd) * .42) #0000006b;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.hub-btn:hover { transform: translate(-50%, -50%) scale(.985); }
.hub-btn:active { transform: translate(-50%, -50%) scale(.955); box-shadow: inset 0 calc(var(--hubd) * .012) 0 #ffffffe6, inset 0 calc(var(--hubd) * -.02) calc(var(--hubd) * .03) #50463657, 0 calc(var(--hubd) * .015) calc(var(--hubd) * .03) #0000008c, 0 calc(var(--hubd) * .2) calc(var(--hubd) * .42) #0000006b; }
.hub-btn:focus-visible { outline: 2px solid var(--h-ink); outline-offset: calc(var(--hubd) * .1); }
.hb-ring { position: absolute; inset: calc(var(--hubd) * -.12); border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(rgba(255,255,255,.16) 0deg 1.8deg, rgba(0,0,0,.42) 1.8deg 3.6deg); -webkit-mask-image: radial-gradient(circle, transparent 0 calc(50% - 10px), #000 calc(50% - 9px) calc(50% - 1px), transparent calc(50% - .5px)); mask-image: radial-gradient(circle, transparent 0 calc(50% - 10px), #000 calc(50% - 9px) calc(50% - 1px), transparent calc(50% - .5px)); }
.chev { position: absolute; width: 0; height: 0; opacity: .26; pointer-events: none; }
.chev[data-chev="up"] { left: 50%; top: calc(var(--hubd) * .085); margin-left: calc(var(--hubd) * -.032); border-left: calc(var(--hubd) * .032) solid transparent; border-right: calc(var(--hubd) * .032) solid transparent; border-bottom: calc(var(--hubd) * .04) solid #0d0c0a; opacity: .8; }
.chev[data-chev="down"] { left: 50%; bottom: calc(var(--hubd) * .085); margin-left: calc(var(--hubd) * -.032); border-left: calc(var(--hubd) * .032) solid transparent; border-right: calc(var(--hubd) * .032) solid transparent; border-top: calc(var(--hubd) * .04) solid #0d0c0a; }
.chev[data-chev="left"] { top: 50%; left: calc(var(--hubd) * .085); margin-top: calc(var(--hubd) * -.032); border-top: calc(var(--hubd) * .032) solid transparent; border-bottom: calc(var(--hubd) * .032) solid transparent; border-right: calc(var(--hubd) * .04) solid #0d0c0a; }
.chev[data-chev="right"] { top: 50%; right: calc(var(--hubd) * .085); margin-top: calc(var(--hubd) * -.032); border-top: calc(var(--hubd) * .032) solid transparent; border-bottom: calc(var(--hubd) * .032) solid transparent; border-left: calc(var(--hubd) * .04) solid #0d0c0a; }
.hb-count { position: relative; font: 500 calc(var(--hubd) * .058)/1 var(--mono); letter-spacing: .24em; color: rgba(13,12,10,.72); }
.hb-enter { position: relative; font: 500 calc(var(--hubd) * .082)/1 var(--mono); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: rgba(13,12,10,.86); text-shadow: 0 1px rgba(255,255,255,.72); }
.hb-ret { position: relative; font-size: calc(var(--hubd) * .05); color: rgba(13,12,10,.72); }

/* exit flood */
.exit { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; align-content: center; gap: 18px; text-align: center; transition: clip-path .72s var(--inout); }
.exit.go { display: grid; }
.exit-t { font-size: clamp(56px, 10vw, 160px); line-height: 1; opacity: 0; animation: exitT .7s var(--ease) .45s forwards; }
.exit-k { font: 500 11px/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; opacity: 0; animation: exitT .7s var(--ease) .55s forwards; }
@keyframes exitT { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (min-width: 700px) and (max-height: 860px) { .hub { --dial: min(96vh, 68vw, 1080px); --eye: 81%; } }
@media (min-width: 700px) and (max-height: 700px) { .hub { --dial: min(92vh, 62vw, 1080px); --eye: 82%; } .hub-blurb { display: none; } }
@media (max-width: 699px) {
  .hub { --dial: min(110vw, 60vh, 480px); --hubd: calc(var(--dial) * .3); --eye: 64%; }
  .hub-top { flex-direction: column; gap: 14px; padding: 18px 18px 0; }
  .hub-ctrl { justify-items: start; }
  .hub-hint, .dial-tip, .hub-blurb { display: none; }
  .hub-title { font-size: clamp(30px, 13vw, 58px); }
  .hub-title[data-ed="arcade"] { font-size: clamp(13px, 4.9vw, 24px); }
  .hub-title[data-ed="showroom"] { font-size: clamp(15px, 5.6vw, 28px); }
  .dial-arrows { gap: 58px; }
  .arw { width: 44px; height: 44px; }
  .w-lb { display: none; }
  .w-ic { --r: calc(var(--dial) * .315); width: calc(var(--dial) * .11); height: calc(var(--dial) * .11); }
  .hb-count { font-size: calc(var(--hubd) * .075); }
  .hb-enter { font-size: calc(var(--hubd) * .1); }
  .hb-ret { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wedge, .w-flood, .w-scrim, .w-ic, .w-lb, .hub-btn, .world, .tg-track i { transition-duration: 1ms !important; }
}

/* Performance. Icons and labels counter-rotate every frame of a turn; on their own layers they no
   longer force the whole dial (gradients, shadows) to repaint. Hidden backdrops stop painting. */
.w-ic, .w-lb { will-change: transform; }
.world { visibility: hidden; transition: opacity .62s var(--ease), visibility 0s .62s; }
.world.on { visibility: visible; transition: opacity .62s var(--ease); }
@media (hover: none), (pointer: coarse) {
  .sheen { mix-blend-mode: normal; opacity: .5; }
  .notch { filter: none; }
}
/* Phones and tablets (hub.js adds .hub-lite when there is no mouse). While a finger drags, highlights and page
   colours snap instead of fading, so the dial and page are painted once per wedge rather than every frame. */
html.hub-lite.hub-dragging body,
html.hub-lite.hub-dragging .hub-title,
html.hub-lite.hub-dragging .notch,
html.hub-lite.hub-dragging .wedge,
html.hub-lite.hub-dragging .w-flood,
html.hub-lite.hub-dragging .w-scrim,
html.hub-lite.hub-dragging .w-ic,
html.hub-lite.hub-dragging .w-lb { transition: none; }