/* lockin. One idea carries everything: a run is a bar, and the bar is a window onto the run. It fills left to right as
   they get through the level, and the money waits at the far end. White page, because the levels bring all the colour
   a page could want; black words that turn white exactly where the run passes under them. Straight corners: Geometry
   Dash is a game of squares. Rooms change colour the way a level does, on a trigger: see [data-room]. */
@property --paper { syntax: '<color>'; inherits: true; initial-value: #fff; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #0a0b0d; }
@property --sub { syntax: '<color>'; inherits: true; initial-value: #666a72; }
@property --faint { syntax: '<color>'; inherits: true; initial-value: #a2a6ad; }
@property --line { syntax: '<color>'; inherits: true; initial-value: #e5e6e9; }
@property --fog { syntax: '<color>'; inherits: true; initial-value: #f3f4f5; }
@property --peek { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  --paper: #fff; --ink: #0a0b0d; --sub: #666a72; --faint: #a2a6ad; --line: #e5e6e9; --fog: #f3f4f5;
  --lock: #1673ff; --lock-deep: #0c56c9; --lock-soft: rgba(22, 115, 255, .1); --steel: #aab2bd;
  --paid: #00a35c; --paid-soft: rgba(0, 163, 92, .1);
  --review: #b47700; --review-soft: rgba(224, 150, 0, .13);
  --cheat: #e3263b; --cheat-soft: rgba(227, 38, 59, .09);
  --display: "Bricolage Grotesque", "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
  --text: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --g: clamp(16px, 2vw, 28px);
  --nav: 64px;
  transition: --paper .55s ease, --ink .55s ease, --sub .55s ease, --faint .55s ease, --line .55s ease, --fog .55s ease;
}
/* colour triggers: the page changes room as it goes, like a level does on a drop */
[data-room="night"] { --paper: #060607; --ink: #f6f7f8; --sub: #92969e; --faint: #5d6169; --line: #24262b; --fog: #141519; --paid: #17e38b; --paid-soft: rgba(23, 227, 139, .13); --review: #ffc01f; --review-soft: rgba(255, 192, 31, .13); --cheat: #ff3b4e; --cheat-soft: rgba(255, 59, 78, .14); --lock-soft: rgba(22, 115, 255, .22); }
[data-room="blue"] { --paper: #1673ff; --ink: #fff; --sub: #d3e4ff; --faint: #8fbcff; --line: #4a92ff; --fog: #0f63e6; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); font-family: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-size: 16px; line-height: 1.42; letter-spacing: -.005em; }
button, input, textarea, select { font: inherit; color: inherit; border-radius: 0; letter-spacing: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; }
::selection { background: var(--lock); color: #fff; }
:focus-visible { outline: 2px solid var(--lock); outline-offset: 2px; }
::view-transition-group(stage) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .85, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
::view-transition-old(stage), ::view-transition-new(stage) { height: 100%; object-fit: cover; overflow: clip; }

.display { font-family: var(--display); font-weight: 700; letter-spacing: -.028em; line-height: 1; }
.label { font-size: 13px; font-weight: 500; color: var(--sub); letter-spacing: 0; }
.num { font-family: var(--display); font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.sub { color: var(--sub); }
.small { font-size: 13.5px; }
.hidden { display: none !important; }

/* wordmark: the "o" is the lock */
.wordmark { display: inline-flex; align-items: baseline; font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -.055em; line-height: 1; text-decoration: none; color: var(--ink); font-variation-settings: "opsz" 30; }
.wordmark .o { display: inline-block; width: .737em; height: .884em; margin: 0 -.03em 0 -.04em; transform: translateY(.059em); }
.wordmark .o svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* buttons: a button is a small bar. On hover it fills, left to right. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; white-space: nowrap; text-decoration: none; color: var(--ink); background-size: 201% 100%; background-position: 100% 0; transition: background-position .24s cubic-bezier(.3, .8, .3, 1), color .16s, box-shadow .16s; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn--go { background-image: linear-gradient(90deg, var(--ink) 50%, var(--lock) 50%); color: #fff; }
.btn--go:hover { background-position: 0 0; color: var(--paper); }
.btn--ink { background-image: linear-gradient(90deg, var(--lock) 50%, var(--ink) 50%); color: var(--paper); }
.btn--ink:hover { background-position: 0 0; color: #fff; }
.btn--soft { background-image: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--soft:hover { background-position: 0 0; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--paid { background-image: linear-gradient(90deg, var(--ink) 50%, var(--paid) 50%); color: #fff; }
.btn--paid:hover { background-position: 0 0; color: var(--paper); }
.btn--white { background-image: linear-gradient(90deg, var(--lock) 50%, #fff 50%); color: #000; }
.btn--white:hover { background-position: 0 0; color: #fff; }
.btn--big { height: 60px; font-size: 17px; padding: 0 26px; width: 100%; }
.btn--sm { height: 36px; padding: 0 13px; font-size: 14px; }
[data-room="blue"] .btn--go { background-image: linear-gradient(90deg, #000 50%, #fff 50%); color: #000; }
[data-room="blue"] .btn--go:hover { color: #fff; }

/* tags: words with a small square */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; font-size: 12.5px; font-weight: 600; background: var(--fog); color: var(--sub); white-space: nowrap; }
.chip .dot { width: 7px; height: 7px; background: currentColor; flex: none; }
.chip--live { background: var(--ink); color: var(--paper); }
.chip--live .dot { background: #ff2d42; animation: blink 1.3s infinite; }
.chip--ok { background: var(--paid-soft); color: var(--paid); }
.chip--lock { background: var(--lock-soft); color: var(--lock); }
[data-room="night"] .chip--lock { color: #6ea8ff; }
.chip--review { background: var(--review-soft); color: var(--review); }
.chip--cheat { background: var(--cheat-soft); color: var(--cheat); }
@keyframes blink { 50% { opacity: .25; } }

.card { background: none; }

/* a plain bar, for anywhere the run isn't on screen */
.bar { position: relative; height: 12px; background: var(--fog); --p: 0; --c: var(--lock); }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 1%); background: var(--c); transition: width .22s linear; }
.bar > u { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); text-decoration: none; }
.bar--paid { --c: var(--paid); } .bar--review { --c: var(--review); } .bar--back { --c: var(--faint); } .bar--cheat { --c: var(--cheat); }

/* the run itself: the same words twice, black on the page and white on the footage, so they flip exactly at the cut */
.twin { position: relative; overflow: hidden; --p: 0; --peek: 0; background: var(--paper); color: var(--ink); isolation: isolate; }
.twin-g, .twin-f { position: absolute; inset: 0; }
.twin-g { z-index: 0; }
.twin-f { z-index: 1; clip-path: inset(0 calc(100% - max(var(--p), var(--peek)) * 1%) 0 0); background: #05060a; color: #fff; }
.twin-f video, .twin-f img.still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.twin .bit { position: absolute; width: 9px; height: 9px; pointer-events: none; z-index: 5; }

/* the lock: square shackle, square body, blocky keyhole */
.lock { display: block; overflow: visible; }
.lock .shackle { transition: transform .4s cubic-bezier(.2, 1.7, .4, 1); transform-origin: 70px 58px; }
.lock .track, .lock .fill { fill: none; stroke-width: 12; stroke-linecap: butt; stroke-linejoin: miter; }
.lock .track { stroke: var(--steel); }
.lock .fill { stroke: var(--steel); stroke-dasharray: 100; transition: stroke-dashoffset .3s linear, stroke .3s; }
.lock .body { fill: var(--lock); transition: fill .3s; }
.lock .hole { fill: #fff; }
.lock .mark { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: square; display: none; }
.lock--open .track { stroke: var(--faint); stroke-dasharray: 6 6; }
.lock--open .fill { stroke: transparent; }
.lock--open .body { fill: var(--faint); }
.lock--checking .body { animation: pulse 1s ease-in-out infinite; }
.lock--review .body { fill: var(--review); }
.lock--review .fill { stroke: var(--review); }
.lock--paid .shackle, .lock--back .shackle, .lock--cheat .shackle { transform: translateY(-13px) rotate(-22deg); }
.lock--paid .body { fill: var(--paid); }
.lock--paid .fill { stroke: var(--steel); stroke-dashoffset: 0 !important; }
.lock--back .body { fill: var(--faint); }
.lock--back .fill { stroke: var(--line); }
.lock--back .track { stroke: var(--line); }
.lock--cheat .body { fill: var(--cheat); }
.lock--cheat .fill { stroke: var(--cheat); stroke-dashoffset: 0 !important; }
.lock--cheat .hole { display: none; }
.lock--cheat .mark { display: block; }
@keyframes pulse { 50% { opacity: .55; } }

/* difficulty */
.diff { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.face { position: relative; display: inline-grid; place-items: center; width: var(--s, 20px); height: var(--s, 20px); flex: none; }
.face img { width: 100%; height: 100%; object-fit: contain; position: relative; }
.face .glow { position: absolute; inset: auto; width: 150%; height: 150%; top: -22%; left: -25%; object-fit: contain; }
.face .glow--featured { width: 128%; height: 128%; top: -14%; left: -14%; }

/* referee report list */
.checks { list-style: none; display: grid; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.check:last-child { border-bottom: 0; }
.check .ic { width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; margin-top: 1px; }
.check .ic svg { width: 12px; height: 12px; }
.ic--pass { background: var(--paid); }
.ic--info { background: var(--fog); color: var(--sub) !important; }
.ic--review { background: var(--review); }
.ic--cheat { background: var(--cheat); }
.ic--rule { background: var(--ink); color: var(--paper) !important; }
.check b { display: block; font-weight: 600; font-size: 15px; }
.check span { display: block; color: var(--sub); font-size: 14px; margin-top: 1px; }

/* drawer: from the right on a screen, from the bottom on a phone */
.scrim { position: fixed; inset: 0; background: rgba(8, 9, 12, .42); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 40; }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow: auto; transform: translateY(104%); background: var(--paper); z-index: 50; transition: transform .26s cubic-bezier(.2, .9, .25, 1); padding: 20px 20px 26px; }
.sheet.on { transform: translateY(0); }
.sheet .grab { display: none; }
.sheet h2 { font-family: var(--display); font-size: 36px; font-weight: 700; letter-spacing: -.026em; line-height: 1.04; }
@media (min-width: 700px) {
  .sheet { left: auto; top: 0; width: min(560px, 100%); max-height: none; transform: translateX(104%); padding: 26px 30px 30px; }
  .sheet.on { transform: translateX(0); }
}

/* toasts: they run out like a bar */
.toasts { position: fixed; top: calc(var(--nav) + 12px); left: var(--g); display: grid; gap: 8px; z-index: 60; width: min(400px, calc(100% - var(--g) * 2)); }
.toast { position: relative; overflow: hidden; background: #0a0b0d; color: #fff; padding: 13px 16px 15px; font-weight: 600; font-size: 15px; animation: drop .22s cubic-bezier(.2, 1.3, .4, 1); }
.toast::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lock); transform-origin: left; animation: drain var(--ms, 4500ms) linear forwards; }
.toast small { display: block; color: #a9adb5; font-weight: 450; font-size: 13.5px; margin-top: 2px; }
@keyframes drop { from { transform: translateY(-12px); opacity: 0; } }
@keyframes drain { to { transform: scaleX(0); } }

/* avatars are little cubes */
.avatar { width: 30px; height: 30px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; flex: none; text-transform: uppercase; }
.avatars { display: flex; }
.avatars .avatar { width: 24px; height: 24px; font-size: 11px; outline: 2px solid var(--paper); margin-left: -3px; }
.avatars .avatar:first-child { margin-left: 0; }

/* a report: what you saw, in the same drawer as everything else */
.why { display: grid; margin-top: 14px; border-top: 1px solid var(--line); }
.why label { display: flex; align-items: center; gap: 12px; padding: 14px 2px; cursor: pointer; font-weight: 500; font-size: 15.5px; border-bottom: 1px solid var(--line); }
.why label:hover { color: var(--lock); }
.why input { appearance: none; width: 15px; height: 15px; box-shadow: inset 0 0 0 1.5px var(--faint); flex: none; }
.why input:checked { background: var(--lock); box-shadow: none; }
.input, textarea.input { width: 100%; background: var(--paper); border: 0; box-shadow: inset 0 0 0 1.5px var(--line); padding: 13px 14px; font-size: 15.5px; outline: none; }
textarea.input { min-height: 84px; resize: vertical; }
.input:focus { box-shadow: inset 0 0 0 1.5px var(--lock); }

/* the challenges, drawn with the same bars */
.art { display: block; width: 64px; height: 40px; overflow: visible; color: var(--ink); }
.art .t { fill: var(--line); }
.art .f { fill: var(--lock); transform-box: fill-box; transform-origin: left; }
.art .k { fill: currentColor; }
.art .s { stroke: currentColor; stroke-width: 2; fill: none; }
@keyframes grow { from { transform: scaleX(.02); } }