/* Multiverse Pad. A Terraria world torn in two: Hallow (A) | rift | Corruption (B). The rift is the scoreboard.
   Jacquard 24 = name + chapter titles, Jacquard 12 = buttons / labels, Sometype Mono = every number. Hard pixel
   offsets only: no glow, no blur, no gradients. Sprites at integer scales with image-rendering: pixelated. */
:root {
  --void: #0B0718; --sky: #0B071A; --ink: #1A0F2E; --stone: #2A2440; --hi: #4A3F66; --lo: #1E1932;
  --hallow: #3FE0D0; --pearl: #BFFAF2; --hsh: #1A8F8A; --corrupt: #7A2FC0; --blight: #B46CF0; --lilac: #D7A6FF; --csh: #3A1458;
  --gold: #F2C744; --gold-d: #9C7A1C; --text: #EDE6FF; --mute: #A79CC8; --dim: #6E6490;
  --fb: "Jacquard 24", "Jacquard 12", serif; --fl: "Jacquard 12", "Jacquard 24", serif; --fm: "Sometype Mono", ui-monospace, monospace;
  --s: 4; --ps: 3; --hh: 60px; --dx: 0px; --r: 0;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--void); color: var(--text); font: 400 15px/1.55 var(--fm); font-variant-numeric: tabular-nums; min-height: 100vh; overflow-x: hidden;
  cursor: url(/assets/art/cur-arrow-2x.png) 2 2, auto; }
a, button, [role=button], [onclick], summary, label, .ca, select, input[type=range], input[type=file] { cursor: pointer; }
img { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
a { color: inherit; }
.num { font-family: var(--fm); font-variant-numeric: tabular-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

/* ---------------------------------------------------------------- buttons: stone blocks with a stepped bevel */
.btn, .sb {
  --top: var(--hi);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 6px 18px 4px;
  font: 400 24px/1 var(--fl); letter-spacing: .01em; color: var(--text); text-decoration: none; white-space: nowrap; background: var(--stone);
  border-top: 4px solid var(--top);
  box-shadow: inset 4px 0 0 var(--hi), inset -4px 0 0 var(--lo), inset 0 -4px 0 var(--lo), 0 4px 0 var(--ink);
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 0px), 0 100%);
  transition: transform .08s steps(1), background-color .12s;
}
.btn { clip-path: none; }
.btn:hover, .sb:hover { background: #342D50; }
.btn:active, .sb:active { transform: translateY(4px); box-shadow: inset 4px 0 0 var(--hi), inset -4px 0 0 var(--lo), inset 0 -4px 0 var(--lo); }
.btn[disabled], .sb[disabled] { opacity: .45; pointer-events: none; }
.btn.a { --top: var(--hallow); } .btn.b { --top: var(--blight); }
.btn.gold { --top: var(--gold); color: var(--gold); }
.btn.big { min-height: 54px; font-size: 30px; padding: 8px 26px 6px; }
.btn.busy { opacity: .75; }
.btn .xg, .sb .xg { flex: none; }
.bx { --top: var(--text); }
.sb { min-height: 40px; padding: 4px 12px 2px; font-size: 21px; border-top-width: 3px; box-shadow: inset 3px 0 0 var(--hi), inset -3px 0 0 var(--lo), inset 0 -3px 0 var(--lo), 0 3px 0 var(--ink); clip-path: none; }
.sb.sq { width: 40px; padding: 0; }
.sb.wbtn { --top: var(--gold); }
.sb.wbtn.on .bl { font-family: var(--fm); font-size: 13px; }

/* CA chip: gold border, copies on click */
.ca { display: inline-flex; align-items: stretch; height: 40px; border: 3px solid var(--gold); background: var(--void); box-shadow: 0 3px 0 var(--ink); white-space: nowrap; }
.ca b { display: grid; place-items: center; padding: 0 8px 0 10px; font: 400 20px/1 var(--fl); color: var(--gold); }
.ca .num { display: grid; place-items: center; padding: 0 8px; font-size: 13px; color: var(--text); }
.ca .cbtn { padding: 0 10px; background: var(--gold); color: var(--ink); font: 400 19px/1 var(--fl); }
.ca .cbtn:hover { background: #FFD966; }
.ca.copied .cbtn { background: var(--hallow); }
.ca.ca-off .num { color: var(--mute); }
.ca.big { height: 46px; }
.ca.big .num { font-size: 14px; }

/* tooltips: void chip, stone border */
.tipt { position: fixed; z-index: 90; max-width: 280px; padding: 7px 10px; background: var(--void); border: 3px solid var(--hi); color: var(--text); font: 13px/1.4 var(--fm); pointer-events: none; box-shadow: 0 3px 0 var(--ink); }

/* toasts */
.tstack { position: fixed; z-index: 95; right: 16px; bottom: 16px; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.toast { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 12px 12px 14px; background: var(--stone); border-left: 6px solid var(--hi); box-shadow: 0 4px 0 var(--ink); font-size: 14px; }
.toast.ok { border-left-color: var(--hallow); } .toast.err { border-left-color: var(--gold); }
.toast a { grid-column: 1; color: var(--gold); font-size: 13px; }
.toast .tx { grid-row: 1 / span 2; grid-column: 2; width: 32px; height: 32px; font-size: 22px; color: var(--mute); }

/* ---------------------------------------------------------------- header */
.top { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--hh); display: flex; align-items: center; gap: 10px; padding: 0 18px; background: var(--void); border-bottom: 4px solid var(--stone); }
.wm { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.wm img { width: 34px; height: 32px; image-rendering: auto; }
.wm span { font: 400 28px/1 var(--fl); color: var(--text); padding-top: 2px; }
.tnav { display: flex; gap: 2px; margin-left: 14px; }
.tnav a { padding: 8px 10px 6px; font: 400 21px/1 var(--fl); color: var(--mute); text-decoration: none; }
.tnav a:hover, .tnav a[aria-current] { color: var(--gold); }
.top .sp { flex: 1; }
.foot { padding: 34px 18px 40px; background: var(--void); border-top: 4px solid var(--stone); }
.fin { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.fin nav { display: flex; flex-wrap: wrap; gap: 4px 16px; flex: 1; }
.fin nav a { font: 400 21px/1 var(--fl); color: var(--mute); text-decoration: none; padding: 8px 0; }
.fin nav a:hover { color: var(--gold); }
.fine { font-size: 13px; color: var(--mute); }
.fine a { color: var(--text); }

/* ---------------------------------------------------------------- the torn world (hero + pair page) */
.world { position: relative; height: clamp(780px, 100svh, 980px); overflow: hidden; background: var(--sky); container-type: inline-size; --gy: max(64%, 540px); isolation: isolate; }
.world { --dx: calc(var(--r) * 18cqw); }
.half { position: absolute; top: 0; bottom: 0; width: 72cqw; transform: translate3d(var(--dx), 0, 0); transition: transform 1.4s steps(14, end); will-change: transform; }
.ha { right: 50%; z-index: 2; }
.hb { left: 50%; z-index: 1; }
.scene { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.sc { position: absolute; width: calc(192px * var(--s)); height: calc(288px * var(--s)); top: calc(var(--gy) - 95px * var(--s)); max-width: none; }
.ha .sc1 { right: calc(-14px * var(--s)); }
.ha .sc2 { right: calc(178px * var(--s)); transform: scaleX(-1); }
.hb .sc1 { left: calc(-14px * var(--s)); }
.hb .sc2 { left: calc(178px * var(--s)); transform: scaleX(-1); }
/* ground below the art on very tall screens */
.scene::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--gy) + 192px * var(--s)); bottom: 0; background: url(/assets/art/tex-dirt.png) 0 0 / calc(64px * var(--s)) auto; image-rendering: pixelated; }
.hb .scene::after { background-image: url(/assets/art/tex-ebon.png); }
.stand { position: absolute; top: calc(var(--gy) - 53px * var(--ps)); display: grid; justify-items: center; gap: calc(14px + 6px * var(--ps)); z-index: 3; }
.sa { right: calc(47px * var(--s)); transform: translateX(50%); }
.sb2 { left: calc(44px * var(--s)); transform: translateX(-50%); }
.portal { position: relative; width: calc(47px * var(--ps)); height: calc(54px * var(--ps)); }
.portal .pf { position: absolute; left: 0; top: 0; width: calc(46px * var(--ps)); height: calc(54px * var(--ps)); }
.portal .p2 { visibility: hidden; }
.portal:hover .p1, .portal:focus-visible .p1, .portal.swirl .p1 { visibility: hidden; }
.portal:hover .p2, .portal:focus-visible .p2, .portal.swirl .p2 { visibility: visible; }
.portal:active { transform: translateY(3px); }
.portal .drop { position: absolute; left: 50%; top: -80px; width: calc(31px * 2px / 1px); margin-left: -31px; z-index: 2; pointer-events: none; }
.plate { display: grid; justify-items: center; gap: 2px; padding: 8px 14px 6px; background: var(--void); border: 3px solid var(--hallow); box-shadow: 0 4px 0 var(--ink); min-width: 200px; text-align: center; }
.plate.pb { border-color: var(--blight); }
.plate .pn { font: 400 22px/1.05 var(--fl); color: var(--pearl); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plate.pb .pn { color: var(--lilac); }
.plate .pv { font-size: 14px; color: var(--text); }
.plate .pv b { font-weight: 600; font-size: 17px; }
.plate .pv i { font-style: normal; color: var(--mute); font-size: 12px; }
.plate.win { border-color: var(--gold); }
.plate.lost { border-color: var(--hi); }
.plate.lost .pn { color: var(--mute); }
.half.lost .scene { filter: grayscale(.85) brightness(.55); }
.half.lost .portal { filter: grayscale(1) brightness(.6); }

.riftui { position: absolute; z-index: 6; left: 0; right: 0; top: calc(var(--hh) + 16px); display: grid; justify-items: center; text-align: center; pointer-events: none; }
.riftui > * { pointer-events: auto; }
.lever { position: relative; width: calc(45px * 2); height: calc(31px * 2); transform: translateX(calc(var(--dx) * 1)); transition: transform 1.4s steps(14, end); }
.lever img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lever .lb { visibility: hidden; }
.lever[aria-pressed="true"] .la { visibility: hidden; }
.lever[aria-pressed="true"] .lb { visibility: visible; }
.lever:active { transform: translateX(var(--dx)) translateY(2px); }
.name { position: relative; margin: 10px 0 0; width: 100%; height: clamp(76px, 8.4cqw, 128px); font: 400 clamp(64px, 7.6cqw, 116px)/1 var(--fb); letter-spacing: .005em; pointer-events: none; }
.nm { position: absolute; top: 0; bottom: -10px; overflow: hidden; transform: translate3d(var(--dx), 0, 0); transition: transform 1.4s steps(14, end); }
.nm.nl { left: 0; width: 50%; }
.nm.nr { left: 50%; width: 50%; }
.nt { position: absolute; top: 0; width: 200%; text-align: center; text-shadow: 0 5px 0 var(--void); white-space: nowrap; transform: translate3d(calc(var(--dx) * -1), 0, 0); transition: transform 1.4s steps(14, end); }
.nl .nt { left: 0; color: var(--pearl); }
.nr .nt { left: -100%; color: var(--lilac); }
.line { margin: 4px 0 0; font: 400 clamp(22px, 2.2cqw, 32px)/1.1 var(--fl); color: var(--text); text-shadow: 0 3px 0 var(--void); }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
.clock { position: absolute; z-index: 6; left: 50%; bottom: 26px; transform: translate3d(calc(-50% + var(--dx)), 0, 0); transition: transform 1.4s steps(14, end); display: grid; justify-items: center; gap: 4px; padding: 10px 16px 10px; background: var(--void); border: 3px solid var(--stone); box-shadow: 0 4px 0 var(--ink); min-width: 220px; text-align: center; }
.clock .ck { font-size: 26px; font-weight: 600; letter-spacing: .02em; }
.clock .cl2 { font-size: 12px; color: var(--mute); max-width: 260px; }
.clock .feat { font: 400 20px/1 var(--fl); color: var(--gold); text-decoration: none; padding: 8px 6px 6px; }
.clock .feat:hover { text-decoration: underline; }
.demo { position: absolute; z-index: 7; top: calc(var(--hh) + 14px); right: 18px; padding: 4px 10px 2px; border: 3px solid var(--gold); color: var(--gold); font: 400 20px/1 var(--fl); background: var(--void); }
.coindrop { position: absolute; z-index: 8; width: 62px; height: 74px; pointer-events: none; }
.block { position: absolute; z-index: 4; width: calc(16px * var(--s)); height: calc(16px * var(--s)); pointer-events: none; }

/* ---------------------------------------------------------------- chapters: mirrored halves */
.chap { position: relative; padding: 92px 18px 96px; overflow: hidden; }
.ch { position: relative; max-width: 780px; margin: 0 auto 46px; text-align: center; }
.ch h2 { margin: 0; font: 400 clamp(52px, 6vw, 84px)/1 var(--fb); text-shadow: 0 5px 0 var(--ink); }
.ch p { margin: 14px auto 0; max-width: 600px; color: var(--mute); font-size: 15px; }
.battles { background: url(/assets/art/tex-void.png) 0 0 / 256px auto; }
.battles .ch h2 { background: linear-gradient(90deg, var(--pearl) 50%, var(--lilac) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 5px 0 var(--ink)); }
.cols { position: relative; max-width: 1240px; margin: 0 auto; display: grid; gap: 18px; }
.row { display: grid; grid-template-columns: 1fr 150px 1fr; align-items: stretch; min-height: 118px; }
.cell { display: grid; align-items: center; gap: 14px; padding: 14px; background: rgba(42, 36, 64, .72); border: 3px solid var(--stone); box-shadow: 0 4px 0 var(--ink); min-width: 0; }
.cell.a { grid-template-columns: auto 1fr; border-left: 6px solid var(--hsh); }
.cell.b { grid-template-columns: 1fr auto; border-right: 6px solid var(--csh); }
.cell.b .slot { order: 2; }
.cell.b .info { text-align: right; }
.cell.win { border-color: var(--gold); }
.cell.lost { opacity: .55; filter: grayscale(.8); }
.slot { position: relative; width: 72px; height: 70px; background: url(/assets/art/ui-slot.png) 0 0 / 72px 70px; image-rendering: pixelated; display: grid; place-items: center; flex: none; }
.cell:hover .slot, .slot.sel { background-image: url(/assets/art/ui-slot-sel.png); }
.slot img { width: 46px; height: 46px; object-fit: cover; image-rendering: auto; }
.slot .ph { font: 400 30px/1 var(--fl); color: var(--mute); }
.info { min-width: 0; display: grid; gap: 4px; }
.cn { min-height: 32px; display: block; font: 400 26px/1.2 var(--fl); color: var(--pearl); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 2px; }
.cell.b .cn { color: var(--lilac); }
.cn:hover { text-decoration: underline; }
.cv { font-size: 14px; color: var(--text); }
.cv b { font-weight: 600; font-size: 16px; }
.cv i { font-style: normal; color: var(--mute); }
.bar { position: relative; height: 12px; background: var(--void); border: 2px solid var(--hi); }
.bar i { position: absolute; top: 0; bottom: 0; width: calc(var(--w, 0) * 100%); background: var(--hallow); transition: width .6s steps(10); }
.cell.a .bar i { right: 0; }
.cell.b .bar i { left: 0; background: var(--blight); }
.carow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.cell.b .carow { justify-content: flex-end; }
.cachip { display: inline-flex; gap: 6px; align-items: center; height: 32px; padding: 0 8px; border: 2px solid var(--gold-d); background: var(--void); font: 12px/1 var(--fm); color: var(--text); }
.cachip .cl { color: var(--gold); font: 400 16px/1 var(--fl); }
.cachip.copied { border-color: var(--hallow); }
.lk { display: inline-flex; align-items: center; height: 32px; padding: 0 6px; font: 400 16px/1 var(--fl); color: var(--mute); text-decoration: none; border-bottom: 2px solid transparent; }
.lk:hover { color: var(--gold); border-bottom-color: var(--gold); }
.mid { position: relative; display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; padding: 6px; }
.mid .mr { position: absolute; top: -9px; bottom: -9px; left: 50%; width: 22px; margin-left: -11px; background: var(--void); clip-path: polygon(30% 0, 70% 0, 60% 18%, 82% 34%, 58% 52%, 76% 70%, 52% 86%, 64% 100%, 30% 100%, 44% 84%, 22% 68%, 40% 50%, 18% 34%, 42% 18%); transform: translateX(calc(var(--lean, 0) * 40px)); transition: transform .8s steps(8); }
.mid .ml { position: relative; z-index: 1; padding: 4px 8px 2px; background: var(--void); border: 2px solid var(--hi); font: 400 18px/1 var(--fl); white-space: nowrap; }
.mid .ml.a { border-color: var(--hallow); color: var(--pearl); } .mid .ml.b { border-color: var(--blight); color: var(--lilac); } .mid .ml.g { border-color: var(--gold); color: var(--gold); }
.mid .mt { position: relative; z-index: 1; font-size: 13px; background: var(--void); padding: 0 6px; }
.row.empty .cell { min-height: 96px; background: rgba(42, 36, 64, .35); border-style: dashed; }
.row.empty .cell.cb0 { justify-items: end; }
.invite { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 20px; margin: 16px 0 0; text-align: center; color: var(--mute); }
.more { text-align: center; margin-top: 10px; }

/* the 6 hours */
.avg { background: linear-gradient(90deg, transparent 50%, transparent 50%); }
.avg::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url(/assets/art/tex-pearl.png) 0 0 / 256px auto, var(--void); clip-path: inset(0 50% 0 0); opacity: .14; }
.avg { isolation: isolate; }
.avg > .bgb { position: absolute; inset: 0; z-index: -1; background: url(/assets/art/tex-ebon.png) 0 0 / 256px auto; clip-path: inset(0 0 0 50%); opacity: .3; }
.avgbox { position: relative; max-width: 1100px; margin: 0 auto; display: grid; gap: 22px; justify-items: center; }
.glass { position: relative; z-index: 2; margin-bottom: -6px; }
.glass img { width: 87px; height: 135px; }
.chart { position: relative; margin: 0; width: 100%; background: var(--void); border: 3px solid var(--stone); box-shadow: 0 4px 0 var(--ink); }
.chart canvas { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 420; image-rendering: pixelated; }
.chart figcaption { display: flex; gap: 10px; align-items: center; padding: 8px 12px; font-size: 13px; color: var(--mute); border-top: 3px solid var(--stone); }
.tag { padding: 2px 6px 0; border: 2px solid var(--hi); font: 400 15px/1 var(--fl); color: var(--mute); }
.avgctl { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: end; width: 100%; max-width: 720px; }
.aside { display: grid; gap: 2px; padding: 10px 14px; background: var(--void); border: 3px solid var(--hallow); }
.aside.b { border-color: var(--blight); text-align: right; }
.aside .k { font: 400 20px/1 var(--fl); color: var(--pearl); } .aside.b .k { color: var(--lilac); }
.aside b { font-size: 24px; font-weight: 600; }
.scales img { width: 104px; height: 96px; transform: rotate(calc(var(--tilt, 0) * 1deg)); transition: transform .9s steps(9); }
.spike { width: 100%; max-width: 720px; display: grid; gap: 8px; padding: 14px 16px; background: rgba(42, 36, 64, .6); border: 3px solid var(--stone); }
.spike label { display: flex; justify-content: space-between; gap: 10px; font: 400 21px/1.1 var(--fl); }
.spike output { font-size: 15px; color: var(--lilac); }
.spike p { margin: 0; font-size: 14px; color: var(--text); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 10px; background: var(--void); border: 2px solid var(--hi); }
input[type=range]::-moz-range-track { height: 10px; background: var(--void); border: 2px solid var(--hi); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 26px; margin-top: -10px; background: var(--blight); border: 3px solid var(--ink); border-radius: 0; }
input[type=range]::-moz-range-thumb { width: 18px; height: 22px; background: var(--blight); border: 3px solid var(--ink); border-radius: 0; }

/* collapse */
.coll { background: var(--void); }
.stagec { position: relative; max-width: 1100px; height: 300px; margin: 0 auto; }
.ground { position: absolute; bottom: 0; height: 160px; width: calc(50% - 60px); background-size: 64px 64px; image-rendering: pixelated; }
.ga { left: 0; background-image: url(/assets/art/tex-pearl.png); border-top: 8px solid var(--hallow); }
.gb { right: 0; background-image: url(/assets/art/tex-ebon.png); border-top: 8px solid var(--corrupt); }
.gb.gone { visibility: hidden; }
.altar { position: absolute; left: 50%; bottom: 120px; width: 159px; height: 114px; margin-left: -80px; z-index: 2; }
.altar .alt { width: 159px; height: 114px; }
.altar .cin, .altar .cout { position: absolute; width: 62px; height: auto; top: -84px; }
.altar .cin { left: 140px; } .altar .cout { left: -44px; }
.altar .flm { position: absolute; left: 60px; top: -70px; width: 38px; height: 76px; opacity: 0; }
.conv { max-width: 1100px; margin: 34px auto 0; display: grid; gap: 22px; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: s; }
.steps li { position: relative; padding: 16px 16px 16px 56px; background: rgba(42, 36, 64, .6); border: 3px solid var(--stone); color: var(--mute); font-size: 14px; counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; left: 14px; top: 12px; font: 400 34px/1 var(--fb); color: var(--gold); }
.steps b { display: block; font: 400 22px/1.1 var(--fl); color: var(--text); margin-bottom: 4px; font-weight: 400; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.day { position: relative; display: grid; gap: 4px; justify-items: center; padding: 10px 4px 10px; background: url(/assets/art/ui-slot.png) center 8px / 72px 70px no-repeat, rgba(42, 36, 64, .45); border: 3px solid var(--stone); text-align: center; min-height: 150px; align-content: start; }
.day .dn { margin-top: 18px; font: 400 32px/1 var(--fb); color: var(--mute); height: 40px; }
.day .ds { margin-top: 18px; font: 400 18px/1 var(--fl); color: var(--mute); }
.day .dv { font-size: 12px; color: var(--text); }
.day.now { border-color: var(--gold); background-image: url(/assets/art/ui-slot-sel.png); }
.day.now .dn, .day.now .ds { color: var(--gold); }
.day.done .dn { color: var(--pearl); }
.daynote { margin: 0; text-align: center; color: var(--mute); font-size: 13px; }

/* fees */
.fees { background: url(/assets/art/tex-void.png) 0 0 / 256px auto; }
.split { position: relative; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 40fr 35fr 15fr 10fr; gap: 10px; align-items: end; height: 260px; }
.bin { position: relative; height: 100%; display: grid; align-content: end; justify-items: center; gap: 4px; padding: 10px 6px 12px; background: var(--void); border: 3px solid var(--stone); border-top: 0; overflow: hidden; text-align: center; }
.bin .pct { position: relative; z-index: 4; font-size: 26px; font-weight: 600; }
.bin .lbl { position: relative; z-index: 4; font: 400 19px/1.1 var(--fl); color: var(--mute); }
.bin .fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--h, 0) * 100%); background: url(/assets/art/tex-pearl.png) 0 0 / 64px 64px; opacity: .35; transition: height 1.2s steps(12); }
.bin.pot .fill { background-image: url(/assets/art/tex-ebon.png); }
.bin.pot { border-color: var(--gold-d); }
.fb { position: absolute; z-index: 3; width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
.feeline { max-width: 900px; margin: 22px auto 0; text-align: center; color: var(--mute); font-size: 14px; }

/* ending */
.end { position: relative; background: var(--sky); }
.endart { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; aspect-ratio: 2 / 1; max-height: 720px; overflow: hidden; }
.endart img { position: absolute; left: 50%; top: 0; height: 100%; width: auto; aspect-ratio: 2 / 1; transform: translateX(-50%); }
.strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; padding: 26px 18px 34px; background: var(--stone); border-top: 4px solid var(--hi); }
.strip .eh { font: 400 40px/1 var(--fb); margin-right: 12px; }

/* ---------------------------------------------------------------- inner pages */
.inner main { padding-top: var(--hh); }
.page { max-width: 1100px; margin: 0 auto; padding: 56px 18px 80px; }
.page h1 { margin: 0 0 10px; font: 400 clamp(48px, 6vw, 80px)/1 var(--fb); text-shadow: 0 5px 0 var(--ink); }
.page h2 { margin: 46px 0 14px; font: 400 40px/1.05 var(--fb); }
.page h3 { margin: 24px 0 8px; font: 400 26px/1.1 var(--fl); font-weight: 400; }
.page p, .page li { color: var(--mute); }
.page p b, .page li b { color: var(--text); font-weight: 600; }
.lede { font-size: 16px; max-width: 700px; }
.panel { position: relative; padding: 22px; background: var(--stone); border: 3px solid var(--hi); box-shadow: 0 4px 0 var(--ink); }
.panel.a { border-color: var(--hsh); } .panel.b { border-color: var(--corrupt); }
.panel9 { position: relative; padding: 26px 24px; border: 24px solid transparent; border-image: url(/assets/art/ui-panel-a.png) 8 fill / 24px / 0 stretch; image-rendering: pixelated; }
.panel9.b { border-image-source: url(/assets/art/ui-panel-b.png); }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field > span, .field > label { font: 400 21px/1.1 var(--fl); color: var(--text); }
.field small { color: var(--mute); font-size: 12px; }
.inp { width: 100%; min-height: 46px; padding: 10px 12px; background: var(--void); color: var(--text); font: 15px/1.3 var(--fm); border: 3px solid var(--hi); border-top-color: #120C22; border-left-color: #120C22; border-radius: 0; }
.inp:focus { outline: none; border-color: var(--gold); }
textarea.inp { min-height: 90px; resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; font-size: 14px; }
.kv dt { color: var(--mute); } .kv dd { margin: 0; text-align: right; }
.note { padding: 12px 14px; border-left: 6px solid var(--gold); background: var(--void); color: var(--text); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 38px; padding: 4px 12px 2px; background: var(--void); border: 2px solid var(--hi); font: 13px var(--fm); color: var(--text); }
.chip.on, .chip:hover { border-color: var(--gold); color: var(--gold); }
.drop { display: grid; place-items: center; gap: 6px; min-height: 140px; padding: 14px; background: var(--void); border: 3px dashed var(--hi); text-align: center; color: var(--mute); font-size: 13px; }
.drop.has { border-style: solid; border-color: var(--gold); }
.drop img { width: 96px; height: 96px; object-fit: cover; image-rendering: auto; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font: 400 19px/1 var(--fl); color: var(--mute); padding: 10px 8px; border-bottom: 3px solid var(--stone); font-weight: 400; }
.tbl td { padding: 10px 8px; border-bottom: 2px solid var(--stone); vertical-align: middle; }
.tbl .r { text-align: right; }
.tblw { overflow-x: auto; }
.empty-line { padding: 22px; background: rgba(42, 36, 64, .45); border: 3px dashed var(--stone); color: var(--mute); text-align: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mitem { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; padding: 16px; background: var(--stone); border: 3px solid var(--hi); margin-bottom: 12px; }
.mitem h3 { margin: 0; }
.mitem p { margin: 4px 0 0; font-size: 13px; }
.mitem .acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.killer { margin: 20px 0 36px; font: 400 clamp(34px, 4.4vw, 58px)/1.08 var(--fb); }
.killer .num { font-size: .78em; color: var(--gold); }
.docs h2 { scroll-margin-top: 80px; }
.docs code { font: 13px var(--fm); color: var(--pearl); }
.toc { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 8px; }
.toc a { font: 400 21px/1 var(--fl); color: var(--gold); text-decoration: none; padding: 6px 0; }

/* pair page */
.pworld { height: clamp(780px, 92svh, 900px); }
.trade { position: absolute; z-index: 7; top: calc(var(--gy) - 40px); width: 330px; padding: 14px 16px; background: var(--void); border: 3px solid var(--hallow); box-shadow: 0 4px 0 var(--ink); display: grid; gap: 10px; }
.trade.tb { border-color: var(--blight); }
.tpn h3, .mbox h3 { margin: 0 0 12px; font: 400 30px/1 var(--fl); font-weight: 400; color: var(--pearl); }
.tpn.b h3, .mbox.b h3 { color: var(--lilac); }
.tpn .tabs, .mbox .tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tpn .tabs button, .mbox .tabs button { flex: 1; min-height: 40px; font: 400 22px/1 var(--fl); background: var(--stone); border-top: 3px solid var(--hi); color: var(--mute); }
.tpn .tabs button[aria-pressed="true"], .mbox .tabs button[aria-pressed="true"] { color: var(--text); border-top-color: var(--gold); background: #342D50; }
.tpn .q, .mbox .q { font-size: 12px; color: var(--mute); min-height: 18px; margin: 10px 0; }
.tpn .chips, .mbox .chips { margin-top: -6px; }
.tpn .carow, .mbox .carow { margin-top: 14px; }
.pfacts h3 { margin: 0 0 10px; font: 400 26px/1.1 var(--fl); font-weight: 400; }
.pfacts p, .pfacts li { color: var(--mute); }
.pfacts ul { padding-left: 18px; }
.pfacts { max-width: 1240px; margin: 0 auto; padding: 46px 18px 10px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.crank { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.depo { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }

/* modal */
.modal { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(11, 7, 24, .82); }
.modal[hidden] { display: none; }
.mbox { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px 20px 20px; background: var(--stone); border: 3px solid var(--hi); box-shadow: 0 6px 0 var(--ink); display: grid; gap: 12px; }
.mbox.a { border-top: 6px solid var(--hallow); } .mbox.b { border-top: 6px solid var(--blight); }
.mbox h3 { margin: 0; font: 400 30px/1 var(--fl); font-weight: 400; padding-right: 40px; }
.mx { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; font-size: 28px; color: var(--mute); }
.mx:hover { color: var(--gold); }

/* 404 */
.nf { position: relative; min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 90px 16px 40px; background: var(--sky); overflow: hidden; }
.nf .nfart { width: min(1152px, 100%); aspect-ratio: 3 / 2; }
.nf .nfart img { width: 100%; height: 100%; }
.nf h1 { margin: -6% 0 12px; font: 400 clamp(30px, 4.4vw, 54px)/1.1 "Bastarda 9", var(--fb); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) { .world { --s: 3; --ps: 3; } .tnav a { padding: 8px 6px 6px; font-size: 19px; } }
@media (max-width: 980px) {
  .tnav { display: none; }
  .row { grid-template-columns: 1fr 110px 1fr; }
  .steps { grid-template-columns: 1fr; }
  .trade { width: 280px; }
}
@media (max-width: 760px) {
  :root { --hh: 92px; }
  .top { flex-wrap: wrap; height: var(--hh); padding: 6px 10px 0; gap: 6px; align-content: flex-start; }
  .wm span { display: none; }
  .wm img { width: 28px; height: 26px; }
  .top .sp { display: none; }
  .tnav { display: flex; order: 9; width: 100%; height: 38px; margin: 0; overflow-x: auto; scrollbar-width: none; gap: 0; align-items: center; }
  .tnav::-webkit-scrollbar { display: none; }
  .tnav a { font-size: 19px; padding: 9px 8px 6px; flex: none; }
  .top .ca { margin-left: auto; height: 38px; }
  .top .ca b { font-size: 17px; padding: 0 4px 0 6px; }
  .top .ca .num { font-size: 11px; padding: 0 4px; }
  .top .ca .cbtn { padding: 0 6px; font-size: 16px; }
  .sb { min-height: 36px; font-size: 18px; padding: 2px 8px 0; }
  .sb.sq { width: 36px; }
  .sb.wbtn .bl { font-size: 17px; }
  .sb.wbtn.on .bl { font-size: 11px; }

  .world { --s: 2; --ps: 2; height: 1024px; --gy: 0; container-type: normal; }
  .world { --dx: 0px; --dy: calc(var(--r) * 26px); }
  .half { left: 0; right: 0; width: auto; transform: translate3d(0, var(--dy), 0); }
  .ha { top: 0; bottom: auto; height: 500px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 88% calc(100% - 22px), 88% calc(100% - 8px), 74% calc(100% - 8px), 74% calc(100% - 30px), 61% calc(100% - 30px), 61% 100%, 47% 100%, 47% calc(100% - 16px), 33% calc(100% - 16px), 33% calc(100% - 34px), 18% calc(100% - 34px), 18% calc(100% - 12px), 0 calc(100% - 12px)); }
  .hb { top: 624px; bottom: 0; clip-path: polygon(0 18px, 14% 18px, 14% 4px, 29% 4px, 29% 26px, 43% 26px, 43% 10px, 58% 10px, 58% 32px, 72% 32px, 72% 0, 86% 0, 86% 20px, 100% 20px, 100% 100%, 0 100%); }
  .ha .scene, .ha { --g: 400px; } .hb .scene, .hb { --g: 140px; }
  .sc { top: calc(var(--g) - 190px); }
  .ha .sc1 { right: auto; left: 70px; } .ha .sc2 { right: auto; left: -314px; }
  .hb .sc1 { left: -56px; } .hb .sc2 { left: 328px; }
  .scene::after { top: calc(var(--g) + 384px); }
  .stand, .sa, .sb2 { top: calc(var(--g) - 106px); left: 50%; right: auto; transform: translateX(-50%); gap: 8px; }
  .plate { padding: 5px 12px 4px; }
  .plate { min-width: 230px; }
  .riftui { top: calc(var(--hh) + 6px); }
  .lever { position: absolute; z-index: 7; top: calc(500px - var(--hh) - 6px); left: 50%; margin-left: -45px; transform: translate3d(0, var(--dy), 0); }
  .lever:active { transform: translate3d(0, var(--dy), 0) translateY(2px); }
  .name { margin-top: 0; height: 58px; font-size: 52px; }
  .nm { transform: none; left: 0 !important; width: 100% !important; }
  .nt { transform: none; left: 0 !important; width: 100%; }
  .nm.nl { clip-path: inset(0 0 46% 0); } .nm.nr { clip-path: inset(54% 0 0 0); }
  .line { font-size: 22px; }
  .links { gap: 10px; margin-top: 12px; padding: 0 12px; }
  .links .ca.big .num { font-size: 12px; }
  .links .bx .bl { display: none; }
  .links .bx { width: 46px; padding: 0; }
  .links { flex-wrap: nowrap; }
  .clock { top: 566px; bottom: auto; left: 50%; transform: translate3d(-50%, var(--dy), 0); min-width: 0; width: calc(100% - 28px); max-width: 420px; grid-template-columns: auto 1fr; align-items: center; justify-items: start; gap: 0 12px; padding: 6px 12px; }
  .clock .ck { font-size: 20px; grid-row: 1 / span 2; }
  .clock .cl2 { font-size: 11px; text-align: left; max-width: none; }
  .clock .feat { font-size: 17px; padding: 2px 0 0; justify-self: start; }
  .demo { top: auto; bottom: 14px; right: 14px; }
  .chap { padding: 64px 14px 70px; }
  .chap::before { display: none; }
  .ch { margin-bottom: 30px; }
  .row { grid-template-columns: 1fr; min-height: 0; }
  .mid { min-height: 54px; grid-auto-flow: column; }
  .mid .mr { top: 50%; bottom: auto; left: -14px; right: -14px; width: auto; height: 18px; margin: -9px 0 0; clip-path: polygon(0 30%, 18% 60%, 34% 20%, 52% 70%, 68% 30%, 84% 66%, 100% 34%, 100% 70%, 84% 100%, 68% 66%, 52% 100%, 34% 58%, 18% 96%, 0 66%); transform: translateY(calc(var(--lean, 0) * 10px)); }
  .cell.b { grid-template-columns: auto 1fr; border-right: 3px solid var(--stone); border-left: 6px solid var(--csh); }
  .cell.b .slot { order: 0; } .cell.b .info { text-align: left; } .cell.b .carow { justify-content: flex-start; }
  .cell.b .bar i { left: 0; right: auto; } .cell.a .bar i { left: 0; right: auto; }
  .row.empty .cell.cb0 { justify-items: start; }
  .avgctl { grid-template-columns: 1fr 1fr; } .scales { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .days { grid-template-columns: repeat(4, 1fr); }
  .stagec { height: 240px; }
  .ground { width: calc(50% - 50px); height: 120px; }
  .altar { bottom: 90px; transform: scale(.75); }
  .split { height: 220px; gap: 6px; grid-template-columns: 40fr 35fr 25fr; }
  .split .bin[data-bin="tre"] { display: none; }
  .bin .pct { font-size: 18px; } .bin .lbl { font-size: 15px; }
  .strip .eh { width: 100%; text-align: center; margin: 0; }
  .grid2, .fgrid, .row2 { grid-template-columns: 1fr; }
  .mitem { grid-template-columns: 1fr; } .mitem .acts { justify-content: flex-start; }
  .pworld { height: 1000px; }
  .trade { position: relative; top: auto; left: auto !important; right: auto !important; width: auto; margin: 0 14px 14px; }
}
@media (max-width: 360px) {
  .wm span { display: none; }
  .name { font-size: 44px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .half, .nm, .nt, .lever, .clock, .bar i, .scales img, .bin .fill, .mid .mr { transition: none !important; }
}
.carow .lab { font: 400 18px/1 var(--fl); color: var(--gold); }
.lform { display: grid; gap: 22px; margin-top: 26px; }
.lcore { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.lcore .drop { position: relative; min-height: 220px; }
.lcore .drop .slot { width: 72px; height: 70px; }
.lbuys h3 { margin: 0 0 12px; }
.lbuys .panel.a h3 { color: var(--pearl); } .lbuys .panel.b h3 { color: var(--lilac); }
fieldset.panel { margin: 0; min-width: 0; }
.lfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px; background: var(--void); border: 3px solid var(--gold-d); }
.lfoot p { margin: 0; color: var(--text); }
.ph2 { margin: 44px 0 16px; font: 400 44px/1 var(--fb); }
.panel9.front { outline: 4px solid var(--gold); }
.mine-sec h2 { margin-top: 40px; }
@media (max-width: 760px) { .lcore { grid-template-columns: 1fr; } .lcore .drop { min-height: 150px; } }
#battles[data-focus="A"] .cell.a .slot, #battles[data-focus="B"] .cell.b .slot { background-image: url(/assets/art/ui-slot-sel.png); }
#battles[data-focus="A"] .cell.b, #battles[data-focus="B"] .cell.a { opacity: .6; }
.slot img.sp { width: 31px; height: auto; object-fit: contain; image-rendering: pixelated; }
.wm { min-height: 40px; }
input[type=range] { height: 36px; }
.fine a { display: inline-block; padding: 8px 0; }
.spike label { min-height: 32px; align-items: center; }
.clock .feat { min-height: 32px; display: inline-flex; align-items: center; }

/* ---------------------------------------------------------------- how it works: the rift film (own player) */
.film { background: var(--ink); border-top: 4px solid var(--hi); border-bottom: 4px solid var(--hi); padding-top: 72px; padding-bottom: 80px; }
.player { position: relative; max-width: 1040px; margin: 0 auto; background: var(--stone); border: 6px solid var(--hi); border-top-color: var(--gold); box-shadow: inset 0 -8px 0 var(--lo), 0 8px 0 var(--ink); padding: 14px; }
.vp-scr { position: relative; background: var(--void); border: 4px solid var(--void); aspect-ratio: 16/9; }
.vp-scr video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--void); cursor: pointer; }
.vp-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); gap: 12px; }
.vp-big:hover { transform: translate(-50%, calc(-50% - 2px)); }
.vp-big:active { transform: translate(-50%, calc(-50% + 4px)); }
.vp-tri { display: inline-block; width: 0; height: 0; border-left: 14px solid currentColor; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.vp-pp.on .vp-tri { width: 14px; height: 16px; border: 0; border-left: 5px solid currentColor; border-right: 5px solid currentColor; }
.vp-bar { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.vp-pp { width: 52px; padding: 0; }
.vp-tl { position: relative; flex: 1; min-width: 64px; height: 30px; background: var(--void); border: 4px solid var(--hi); cursor: pointer; touch-action: none; }
.vp-fill { position: absolute; left: 0; top: 0; bottom: 0; max-width: 100%; background: var(--hallow); }
.vp-k { position: absolute; top: -10px; width: 14px; height: 46px; margin-left: -7px; background: var(--gold); border: 4px solid var(--ink); }
.vp-t { min-width: 120px; text-align: center; background: var(--void); border: 3px solid var(--hi); padding: 8px; font: 700 14px/1.2 var(--fm); }
.vp-vol { display: flex; align-items: stretch; cursor: pointer; }
.vp-vol button { position: relative; width: 16px; height: 44px; padding: 0; background: transparent; border: 0; cursor: pointer; }
.vp-vol button::before { content: ""; position: absolute; left: 2px; right: 2px; bottom: 4px; background: var(--void); border: 3px solid var(--hi); }
.vp-vol button:nth-child(1)::before { height: 14px; } .vp-vol button:nth-child(2)::before { height: 20px; } .vp-vol button:nth-child(3)::before { height: 26px; } .vp-vol button:nth-child(4)::before { height: 32px; }
.vp-vol button.on::before { background: var(--gold); border-color: var(--gold-d); }
.player:fullscreen { display: flex; flex-direction: column; justify-content: center; padding: 18px; max-width: none; margin: 0; background: var(--ink); }
.player:fullscreen .vp-scr { max-height: calc(100vh - 100px); margin: 0 auto; width: min(100%, calc((100vh - 100px) * 16 / 9)); }
@media (max-width: 640px) { .vp-vol, .vp-m, .vp-fs { display: none; } .vp-t { min-width: 0; font-size: 12px; } .player { padding: 8px; } .vp-bar { gap: 6px; } }