/* Centhead arcade: bold blocks (light) and arcade colour (dark). Loaded after app.css and fx.css.
   Pure styling: delete this file's <link> and arcade.js and the site returns to its quieter look. Motion is optional and switched off by prefers-reduced-motion. */

:root {
  --edge: #0b0d1f;
  --bg: #fffdf5; --surface: #ffffff; --surface-2: #fff1b8; --line: #14173a; --line-strong: #0b0d1f;
  --ink: #0b0d1f; --text: #1f2347; --muted: #4c5280; --subtle: #565c8a;
  --brand: #0b0d1f; --brand-ink: #ffd23f; --brand-hover: #1c2150;
  --accent: #ff5d73; --accent-strong: #b3153a; --accent-bg: #ffe2e7;
  --pos: #0a7f5a; --pos-bg: #d8f7ec; --warn: #7a5200; --warn-bg: #fff0bf; --neg: #b3153a; --neg-bg: #ffe2e7; --info: #2f3fd6; --info-bg: #e3e7ff;
  --c-platform: #ff5d73; --c-app: #4cc9f0; --c-you: #19c8a3;
  --g-a: #ff5d73; --g-b: #ffb000; --g-c: #6b4de0; --g-d: #19c8a3;
  --gt-a: #c4163f; --gt-b: #8a5a00; --gt-c: #5236c9;
  --plus-bg: #fff1b8;
  --block-y: #ffd23f; --block-p: #ff5d73; --block-m: #38e8c6; --block-v: #8b7bff; --block-b: #4cc9f0;
  --shadow-sm: 3px 3px 0 var(--edge);
  --shadow: 5px 5px 0 var(--edge);
  --shadow-lg: 8px 8px 0 var(--edge);
  --r-sm: 8px; --r: 12px; --r-lg: 20px;
}
:root[data-theme="dark"] {
  --edge: #05061a;
  --bg: #14173a; --surface: #1f2352; --surface-2: #2a2f66; --line: #3a4090; --line-strong: #5560c0;
  --ink: #f4f2ff; --text: #d5d2f5; --muted: #a7a4dc; --subtle: #aeabe2;
  --brand: #ffd23f; --brand-ink: #14173a; --brand-hover: #ffe27a;
  --accent: #ff5d73; --accent-strong: #ff9aa9; --accent-bg: #4a2540;
  --pos: #38e8c6; --pos-bg: #123f46; --warn: #ffd23f; --warn-bg: #4a4220; --neg: #ff8fa0; --neg-bg: #4a2540; --info: #9fb4ff; --info-bg: #26307a;
  --gt-a: #ff8fa0; --gt-b: #ffd23f; --gt-c: #b2a6ff;
  --plus-bg: #2a2f66;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --edge: #05061a;
    --bg: #14173a; --surface: #1f2352; --surface-2: #2a2f66; --line: #3a4090; --line-strong: #5560c0;
    --ink: #f4f2ff; --text: #d5d2f5; --muted: #a7a4dc; --subtle: #aeabe2;
    --brand: #ffd23f; --brand-ink: #14173a; --brand-hover: #ffe27a;
    --accent: #ff5d73; --accent-strong: #ff9aa9; --accent-bg: #4a2540;
    --pos: #38e8c6; --pos-bg: #123f46; --warn: #ffd23f; --warn-bg: #4a4220; --neg: #ff8fa0; --neg-bg: #4a2540; --info: #9fb4ff; --info-bg: #26307a;
    --gt-a: #ff8fa0; --gt-b: #ffd23f; --gt-c: #b2a6ff;
    --plus-bg: #2a2f66;
  }
}

body { font-weight: 450; }
h1, h2 { font-weight: 800; letter-spacing: -0.035em; }
h3, h4 { font-weight: 800; }

/* chunky buttons: they sit on a hard shadow, lift on hover and press down when clicked */
.btn { border: 3px solid var(--edge); border-radius: 12px; font-weight: 800; box-shadow: 0 5px 0 var(--edge); transition: transform 0.08s steps(2), box-shadow 0.08s steps(2), background-color 0.12s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--edge); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge); }
.btn:disabled, .btn[aria-disabled="true"] { box-shadow: 0 3px 0 var(--edge); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--edge); }
.btn.primary:hover { background: var(--brand-hover); }
.btn.accent, .btn.green { background: var(--block-p); color: #fff; border-color: var(--edge); }
.btn.accent:hover, .btn.green:hover { background: var(--block-p); filter: brightness(1.08); }
.btn.ghost { border-color: transparent; box-shadow: none; }
.btn.ghost:hover { transform: none; box-shadow: none; }
.btn.sm { border-width: 2px; box-shadow: 0 3px 0 var(--edge); }
.btn.sm:hover { box-shadow: 0 5px 0 var(--edge); }
.btn.sm:active { box-shadow: 0 1px 0 var(--edge); transform: translateY(2px); }
.btn.lg { padding-block: 16px; }

/* blocks: cards, tables and callouts are hard-edged boxes with an offset shadow */
.card { border: 3px solid var(--edge); border-radius: 18px; box-shadow: var(--shadow); }
a.card { transition: transform 0.1s steps(2), box-shadow 0.1s steps(2); }
a.card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--edge); }
input, select, textarea { border-width: 2px; }
.nav { border-bottom: 3px solid var(--edge); }
.footer { border-top: 3px solid var(--edge); }
.nav-plus { border: 3px solid var(--edge); box-shadow: 0 3px 0 var(--edge); }
.mega { border: 3px solid var(--edge); box-shadow: var(--shadow-lg); }
.mega-card:hover { background: var(--block-y); color: #0b0d1f; }

/* the four ways in on the home page are colour blocks */
.audience .card:nth-child(1) { background: var(--block-m); color: #0b0d1f; }
.audience .card:nth-child(2) { background: var(--block-y); color: #0b0d1f; }
.audience .card h3, .audience .card .muted { color: #0b0d1f; }
.stats-strip { background: var(--surface); }

/* hero: a pixel grid under the type, and a pixel scene that moves */
.hero { position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35; background-image: radial-gradient(var(--line-strong) 1.6px, transparent 1.7px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.hero-visual { position: relative; }
.hero .coin { display: none; }
.px { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.px-scene { position: absolute; inset: -30px -20px; pointer-events: none; z-index: 2; }
.px-scene > * { position: absolute; display: block; }
.px-coin { appearance: none; background: none; border: 0; padding: 0; width: 64px; right: 4%; top: 0; pointer-events: auto; cursor: pointer; animation: px-bob 1.3s steps(4) infinite; }
.px-coin .px { animation: px-spin 1.2s step-end infinite; }
.px-alien { width: 66px; left: 0; bottom: 18px; animation: px-march 3.2s steps(8) infinite; }
.px-heart { width: 40px; left: 12%; top: 6px; animation: px-pulse 1s steps(2) infinite; }
.px-star { width: 26px; animation: px-twinkle 1.4s steps(2) infinite; }
.px-star.s1 { right: 22%; bottom: 4px; }
.px-star.s2 { left: 38%; top: -8px; animation-delay: 0.5s; }
.px-pad { width: 78px; right: -4px; bottom: 56px; animation: px-bob 1.8s steps(4) infinite 0.3s; }
@keyframes px-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes px-spin { 0%, 100% { transform: scaleX(1); } 25% { transform: scaleX(0.55); } 50% { transform: scaleX(0.12); } 75% { transform: scaleX(0.55); } }
@keyframes px-march { 0% { transform: translateX(0); } 50% { transform: translateX(46px); } 100% { transform: translateX(0); } }
@keyframes px-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes px-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.px-score { margin: 14px 0 0; }


/* what the pointer does (arcade.js): a trail of pixels, a burst on every button press, a "+1" from the toy coin */
.px-dot, .px-burst { position: fixed; z-index: 9998; pointer-events: none; width: 8px; height: 8px; }
.px-dot { animation: px-fade 0.7s steps(6) forwards; }
.px-burst { width: 7px; height: 7px; animation: px-fly 0.55s steps(5) forwards; }
.d0 { background: #ff5d73; } .d1 { background: #ffd23f; } .d2 { background: #38e8c6; } .d3 { background: #8b7bff; } .d4 { background: #4cc9f0; }
.px-plus { position: fixed; z-index: 9999; pointer-events: none; font-weight: 800; font-size: 20px; color: #ffd23f; text-shadow: 2px 2px 0 #0b0d1f; animation: px-rise 0.9s steps(8) forwards; }
@keyframes px-fade { to { opacity: 0; transform: translateY(10px) scale(0.4); } }
@keyframes px-fly { to { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.5); } }
@keyframes px-rise { to { opacity: 0; transform: translateY(-46px); } }

/* the headline reacts: every highlighted word wobbles when the pointer is on it */
h1 .under, h1 .gradient-text { display: inline-block; }
h1 .under:hover { animation: px-wobble 0.4s steps(4); }
@keyframes px-wobble { 25% { transform: rotate(-2.5deg) translateY(-2px); } 75% { transform: rotate(2.5deg) translateY(-2px); } }

html.fx-paused .px-coin, html.fx-paused .px-coin .px, html.fx-paused .px-alien, html.fx-paused .px-heart, html.fx-paused .px-star, html.fx-paused .px-pad { animation-play-state: paused; }

@media (max-width: 640px) {
  .px-scene { inset: -16px -6px; }
  .px-pad, .px-heart { display: none; }
  .px-coin { width: 48px; }
  .px-alien { width: 52px; }
}

/* the visitor chose Calm, or the device cannot keep up (motion.js) */
@media all {
  html.motion-calm .px-coin, html.motion-calm .px-coin .px, html.motion-calm .px-alien, html.motion-calm .px-heart, html.motion-calm .px-star, html.motion-calm .px-pad, html.motion-calm h1 .under { animation: none !important; }
  html.motion-calm .px-dot, html.motion-calm .px-burst, html.motion-calm .px-plus { display: none !important; }
  html.motion-calm .btn, html.motion-calm a.card { transition: none !important; }
}

/* ---- more pixels: clouds and coins in the hero, sparkles, a runner at the foot of the page, the sign-in scene, a pixel cursor ---- */
.hero { overflow: hidden; }
.px-sky { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.px-sky > * { position: absolute; display: block; }
.px-cloud { opacity: 0.55; }
.px-cloud.c1 { width: 120px; top: 8%; left: -140px; animation: px-drift 46s linear infinite; }
.px-cloud.c2 { width: 80px; top: 30%; left: -100px; animation: px-drift 62s linear infinite 12s; opacity: 0.4; }
.px-cloud.c3 { width: 150px; top: 62%; left: -170px; animation: px-drift 78s linear infinite 30s; opacity: 0.35; }
@keyframes px-drift { to { transform: translateX(calc(100vw + 340px)); } }
.px-drop { width: 22px; top: -30px; animation: px-fall 7s steps(14) infinite; }
.px-drop.d1 { left: 6%; animation-duration: 6.4s; } .px-drop.d2 { left: 17%; animation-duration: 8.6s; animation-delay: 1.2s; } .px-drop.d3 { left: 29%; animation-duration: 7.2s; animation-delay: 3.1s; }
.px-drop.d4 { left: 44%; animation-duration: 9.4s; animation-delay: 0.6s; } .px-drop.d5 { left: 58%; animation-duration: 6.8s; animation-delay: 2.4s; } .px-drop.d6 { left: 69%; animation-duration: 8.2s; animation-delay: 4.2s; }
.px-drop.d7 { left: 80%; animation-duration: 7.6s; animation-delay: 1.8s; } .px-drop.d8 { left: 90%; animation-duration: 9s; animation-delay: 3.6s; } .px-drop.d9 { left: 36%; animation-duration: 10.4s; animation-delay: 5.2s; }
@keyframes px-fall { 0% { transform: translateY(0) scaleX(1); opacity: 0; } 8% { opacity: 0.9; } 25% { transform: translateY(18vh) scaleX(0.4); } 50% { transform: translateY(36vh) scaleX(1); } 75% { transform: translateY(54vh) scaleX(0.4); } 100% { transform: translateY(72vh) scaleX(1); opacity: 0; } }
.px-spark { width: 18px; animation: px-twinkle 1.1s steps(2) infinite; }
.px-spark.p1 { top: 22%; left: 8%; } .px-spark.p2 { top: 12%; left: 46%; animation-delay: 0.4s; } .px-spark.p3 { top: 58%; left: 52%; animation-delay: 0.8s; }
.hero .wrap { position: relative; z-index: 1; }

.card-px-host { position: relative; }
.card-px { position: absolute; top: -20px; right: 18px; width: 40px; animation: px-bob 1.4s steps(4) infinite; }
.card-px.p2 { width: 32px; animation-delay: 0.4s; }

.footer { position: relative; }
.px-runner { position: absolute; left: 0; right: 0; top: -42px; height: 42px; overflow: hidden; pointer-events: none; }
.px-run { position: absolute; bottom: 0; left: 0; width: 34px; height: 40px; animation: px-cross 16s linear infinite; }
.px-run .rf { position: absolute; inset: 0; }
.px-run .rf.a { animation: px-frame 0.36s steps(1) infinite; }
.px-run .rf.b { animation: px-frame 0.36s steps(1) infinite reverse; opacity: 0; }
@keyframes px-cross { 0% { transform: translateX(-60px); } 100% { transform: translateX(calc(100vw + 60px)); } }
@keyframes px-frame { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.px-run .rf.b { animation: px-frame-b 0.36s steps(1) infinite; }
@keyframes px-frame-b { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }

/* sign in, sign up and the other pages of the sign-in layout: an arcade block, not a dark slab */
.auth-side { background: var(--block-v); color: #0b0d1f; border-right: 3px solid var(--edge); position: relative; overflow: hidden; --bg: #8b7bff; --surface: #fff; --surface-2: #f1eeff; --line: #0b0d1f; --line-strong: #0b0d1f; --ink: #0b0d1f; --text: #0b0d1f; --muted: #1f2347; --accent: #ff5d73; --pos: #0a7f5a; }
.auth-side > *:not(.auth-pixels) { position: relative; z-index: 1; }
.auth-side h2 { color: #0b0d1f; font-size: clamp(2rem, 3vw, 2.8rem); letter-spacing: -0.035em; }
.auth-side .brand, .auth-side p, .auth-side .xs { color: #0b0d1f; }
.auth-points { color: #0b0d1f; font-weight: 600; } .auth-points svg { color: #0b0d1f; }
.auth-receipt { background: #fff; color: #0b0d1f; border: 3px solid #0b0d1f; box-shadow: 6px 6px 0 #0b0d1f; }
.auth-receipt header { border-color: #0b0d1f; color: #1f2347; }
.auth-receipt .ln { border-color: #cfd0e8; } .auth-receipt .lbl2 { color: #1f2347; }
.auth-receipt .total { background: #ffd23f; border-color: #0b0d1f; } .auth-receipt .total b { color: #0b0d1f; } .auth-receipt .total .muted { color: #0b0d1f; }
.auth-receipt .badge { background: #fff; color: #0b0d1f; border-color: #0b0d1f; }
.auth-main { background: var(--bg); }
.auth-pixels { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.auth-pixels > * { position: absolute; display: block; }
.auth-pixels .px-drop { top: -30px; opacity: 0.9; }
.px-line { width: 44px; bottom: 54px; animation: px-line 6s steps(10) infinite; }
.px-line.a1 { left: 8%; } .px-line.a2 { left: 24%; animation-delay: 0.3s; } .px-line.a3 { left: 40%; animation-delay: 0.6s; }
@keyframes px-line { 0% { transform: translateX(0); } 50% { transform: translateX(44%); } 100% { transform: translateX(0); } }
.auth-pixels .px-spark.p1 { top: 14%; left: 78%; } .auth-pixels .px-spark.p2 { top: 40%; left: 90%; }
.auth-pixels .px-heart { left: auto; right: 12%; top: auto; bottom: 18%; width: 36px; }
.auth-pixels .px-heart.px-heart { animation: px-pulse 1s steps(2) infinite; }

/* a small pixel star pops out of a button when the pointer is on it */
.btn::after { content: ""; position: absolute; right: -9px; top: -13px; width: 18px; height: 18px; pointer-events: none; opacity: 0; transform: scale(0); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffd23f' d='M3 0h1v2h3v1h-1v1h-1v1h1v2h-1v-1h-1v-1h-1v1h-1v1h-1v-2h1v-1h-1v-1h-1v-1h3z'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.12s steps(3), opacity 0.12s steps(3); }
.btn:hover::after { opacity: 1; transform: scale(1); animation: px-twinkle 0.8s steps(2) infinite 0.15s; }
.btn.ghost::after, .btn.block::after { display: none; }

/* the pixel pointer: an arrow, and a hand over anything you can press (the ordinary pointer returns in a text field) */
body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='32' viewBox='0 0 11 16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='0' y='1' width='2' height='1' fill='%230b0d1f'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='1' y='3' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='1' y='5' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='1' y='6' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='1' y='7' width='6' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='1' y='8' width='7' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='1' y='9' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='9' width='4' height='1' fill='%230b0d1f'/%3E%3Crect x='0' y='10' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='1' y='10' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='10' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='4' y='10' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='10' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='0' y='11' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='1' y='11' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='11' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='4' y='11' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='5' y='11' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='11' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='0' y='12' width='2' height='1' fill='%230b0d1f'/%3E%3Crect x='4' y='12' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='5' y='12' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='12' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='0' y='13' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='5' y='13' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='6' y='13' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='13' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='5' y='14' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='6' y='14' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='14' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='6' y='15' width='2' height='1' fill='%230b0d1f'/%3E%3C/svg%3E") 0 0, auto; }
a, button, [role="button"], summary, label, select, .btn, .mega-card { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='30' viewBox='0 0 12 15' shape-rendering='crispEdges'%3E%3Crect x='4' y='0' width='2' height='1' fill='%230b0d1f'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='4' y='1' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='4' y='2' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='4' y='3' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='4' y='4' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='4' width='3' height='1' fill='%230b0d1f'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='4' y='5' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='7' y='5' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='5' width='2' height='1' fill='%230b0d1f'/%3E%3Crect x='1' y='6' width='3' height='1' fill='%230b0d1f'/%3E%3Crect x='4' y='6' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='7' y='6' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='11' y='6' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='1' y='7' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='4' y='7' width='7' height='1' fill='%23ffffff'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='1' y='8' width='10' height='1' fill='%23ffffff'/%3E%3Crect x='11' y='8' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='2' y='9' width='9' height='1' fill='%23ffffff'/%3E%3Crect x='11' y='9' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='2' y='10' width='9' height='1' fill='%23ffffff'/%3E%3Crect x='11' y='10' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='2' y='11' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='3' y='11' width='7' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='11' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='2' y='12' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='3' y='12' width='7' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='12' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='3' y='13' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='4' y='13' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='13' width='1' height='1' fill='%230b0d1f'/%3E%3Crect x='3' y='14' width='7' height='1' fill='%230b0d1f'/%3E%3C/svg%3E") 10 0, pointer; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea { cursor: text; }

@media (max-width: 640px) { .px-cloud.c3, .px-drop.d7, .px-drop.d8, .px-drop.d9, .card-px { display: none; } .px-runner { top: -34px; } }
/* the visitor chose Calm, or the device cannot keep up (motion.js) */
@media all {
  html.motion-calm .px-cloud, html.motion-calm .px-drop, html.motion-calm .px-spark, html.motion-calm .px-run, html.motion-calm .px-run .rf, html.motion-calm .card-px, html.motion-calm .px-line, html.motion-calm .auth-pixels .px-heart, html.motion-calm .btn:hover::after { animation: none !important; }
  html.motion-calm .px-drop { display: none; } html.motion-calm .px-run .rf.b { display: none; } html.motion-calm .px-run { left: 40px; }
}
html.fx-paused .px-cloud, html.fx-paused .px-drop, html.fx-paused .px-spark, html.fx-paused .px-run, html.fx-paused .px-run .rf, html.fx-paused .card-px, html.fx-paused .px-line { animation-play-state: paused; }

/* ---- motion levels (motion.js sets html.fx-lite on a device that cannot hold 45 frames a second, html.motion-calm for a visitor who chose it or a device far below that) ---- */
html.fx-lite .px-spark, html.fx-lite .px-drop, html.fx-lite .px-cloud.c2, html.fx-lite .px-cloud.c3, html.fx-lite .card-px, html.fx-lite .px-dot, html.fx-lite .px-burst, html.fx-lite .px-plus, html.fx-lite .fx-dot { display: none !important; }
html.fx-lite .btn::after, html.fx-lite .nav-plus::after, html.fx-lite .skeleton::after, html.fx-lite .skeleton-text::after, html.fx-lite .gradient-border::before, html.fx-lite .gradient-text { animation: none !important; }
html.fx-lite .card, html.fx-lite .btn { transition-duration: 0.08s !important; }
html.fx-lite * { backdrop-filter: none !important; }
.motion-btn { font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; padding: 4px 10px; border: 2px solid var(--ink, currentColor); border-radius: 0; background: transparent; color: inherit; cursor: pointer; box-shadow: 3px 3px 0 var(--ink, currentColor); }
.motion-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink, currentColor); }
.motion-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink, currentColor); }
.motion-btn[data-choice="calm"] { background: var(--ink, currentColor); color: var(--bg, #fff); }
@media (max-width: 760px) { .topbar .motion-btn { display: none; } }

/* ---- the logo: a pixel coin with an eye. Hard pixels at every size, and it blinks a step when you point at it. ---- */
.brand img { image-rendering: pixelated; }
.brand:hover img, .brand:focus-visible img { animation: px-wink 0.5s steps(5) 1; }
@keyframes px-wink { 0% { transform: none; } 20% { transform: translateY(-3px); } 40% { transform: translateY(0) scaleY(0.82); } 60% { transform: translateY(-2px); } 100% { transform: none; } }

/* ================================================================ the stage: a home page laid out like a level, not a template ================================================================ */
.stage-hero { padding-top: 56px; padding-bottom: 36px; }
.stack-title { font-size: clamp(3rem, 8.6vw, 6.6rem); line-height: 0.98; letter-spacing: -0.02em; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
.stack-title .st { display: inline-block; padding: 0.06em 0.24em 0.12em; border: 4px solid var(--edge); box-shadow: 8px 8px 0 var(--edge); color: #0b0d1f; -webkit-text-fill-color: #0b0d1f; background-clip: border-box; }
.stack-title .st-a { background: var(--block-v); transform: rotate(-2.2deg); }
.stack-title .st-b { background: var(--block-p); transform: rotate(1.6deg) translateX(0.5em); }
.stage-grid { align-items: start; }
.start-row .press-start::before, .press-start::before { content: "\25B6\00A0"; display: inline-block; animation: px-blink 1s steps(2) infinite; }
@keyframes px-blink { 50% { opacity: 0; } }
.badge-row { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 12px 14px; }
.badge-row li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-weight: 700; font-size: 0.86rem; background: var(--surface); color: var(--text); border: 3px solid var(--edge); box-shadow: 3px 3px 0 var(--edge); }
.badge-row li:nth-child(odd) { transform: rotate(-1.4deg); } .badge-row li:nth-child(even) { transform: rotate(1.2deg); }
.eye-stage { position: relative; min-height: 560px; }
.eye-stage .hero-logo { position: absolute; right: 2%; top: -6px; width: min(56%, 300px); height: auto; z-index: 1; image-rendering: pixelated; animation: px-bob 3.2s steps(8) infinite; }
@keyframes px-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
.px-logo .pupil { transform: translate(calc(var(--ex, 0) * 1px), calc(var(--ey, 0) * 1px)); }
.eye-stage .ticket { position: relative; z-index: 3; margin: 210px 0 0 auto; max-width: 460px; transform: rotate(2.4deg); }
.hp-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 22px; padding: 12px 16px; background: #0b0d1f; color: #ffd23f; border: 4px solid var(--edge); box-shadow: 6px 6px 0 var(--block-m); }
.hp-label { font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; }
.hp-track svg { display: block; width: 100%; height: 26px; border: 3px solid #ffd23f; }
.hp-legend { font-size: 0.86rem; color: #fff; } .hp-legend b { color: #ffd23f; }
@media (max-width: 760px) { .hp-bar { grid-template-columns: 1fr; gap: 8px; } .eye-stage { min-height: 0; } .eye-stage .hero-logo { position: relative; right: auto; top: auto; display: block; margin: 0 auto 8px; width: 180px; } .eye-stage .ticket { margin-top: 12px; transform: none; max-width: none; } }

.players { padding-top: 40px; }
.sel-title { text-align: center; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.9rem; color: var(--ink); margin-bottom: 18px; }
.sel-title::after { content: "_"; animation: px-blink 0.9s steps(2) infinite; }
.sel-grid { gap: 28px; }
.sel { position: relative; border: 4px solid var(--edge); box-shadow: 8px 8px 0 var(--edge); padding: 26px 26px 22px; }
.sel-1 { background: color-mix(in srgb, var(--block-m) 30%, var(--surface)); transform: rotate(-1.2deg); }
.sel-2 { background: color-mix(in srgb, var(--block-y) 40%, var(--surface)); transform: rotate(1deg) translateY(22px); }
.sel:hover { transform: rotate(0) translate(-3px, -3px); box-shadow: 12px 12px 0 var(--edge); }
.p-tag { position: absolute; top: -16px; left: 18px; background: #0b0d1f; color: #ffd23f; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.74rem; padding: 4px 10px; }
.scoreboard { margin: 56px auto 0; max-width: 640px; padding: 22px 26px 18px; background: #0b0d1f; color: #ffd23f; border: 4px solid var(--edge); box-shadow: 8px 8px 0 var(--block-v); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; transform: rotate(-0.6deg); }
.scoreboard .sb-title { font-size: 1.05rem; letter-spacing: 0.3em; text-transform: uppercase; color: #38e8c6; margin: 0 0 12px; font-family: inherit; text-align: center; }
.sb-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; text-transform: uppercase; letter-spacing: 0.06em; }
.sb-row i { flex: 1; border-bottom: 3px dotted rgba(255, 210, 63, 0.55); transform: translateY(-4px); }
.sb-row b { color: #fff; font-weight: 700; }
.scoreboard .hint { color: #a7a4dc; margin-top: 10px; text-transform: none; letter-spacing: 0; }

/* levels: sections with slanted edges and a stage label */
.section.lvl-sec { padding-block: 108px; position: relative; }
.section.lvl-sec.alt { background: var(--surface); border-block: 0; clip-path: polygon(0 34px, 100% 0, 100% calc(100% - 34px), 0 100%); margin-block: -18px; }
.lvl { display: inline-block; background: #0b0d1f; color: #ffd23f; padding: 5px 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.76rem; transform: rotate(-2deg); margin-bottom: 14px; box-shadow: 4px 4px 0 var(--block-p); }
.zig { display: grid; gap: 30px; }
.zig-step { display: flex; align-items: center; gap: 26px; max-width: 760px; padding: 20px 26px; background: var(--surface); border: 4px solid var(--edge); box-shadow: 8px 8px 0 var(--edge); }
.zig-step:nth-child(1) { transform: rotate(-0.8deg); } .zig-step:nth-child(2) { margin-left: 9%; transform: rotate(0.7deg); background: color-mix(in srgb, var(--block-y) 28%, var(--surface)); } .zig-step:nth-child(3) { margin-left: 18%; transform: rotate(-0.5deg); background: color-mix(in srgb, var(--block-m) 26%, var(--surface)); }
.zig-step .n { font-family: var(--display); font-size: clamp(4rem, 9vw, 7rem); line-height: 0.8; font-weight: 900; color: transparent; -webkit-text-stroke: 4px var(--edge); paint-order: stroke fill; min-width: 1ch; }
:root[data-theme="dark"] .zig-step .n { -webkit-text-stroke-color: var(--block-y); }
.zig-step h3 { margin: 0 0 6px; }
@media (max-width: 760px) { .zig-step { flex-direction: column; align-items: flex-start; gap: 6px; } .zig-step:nth-child(n) { margin-left: 0; } }

.slots { columns: 3 300px; column-gap: 22px; }
.slot { break-inside: avoid; margin: 0 0 22px; padding: 20px 20px 18px; border: 4px solid var(--edge); box-shadow: 6px 6px 0 var(--edge); background: color-mix(in srgb, var(--tint, #fff) 22%, var(--surface)); transition: transform 0.12s steps(3), box-shadow 0.12s steps(3); }
.slot h3 { margin: 12px 0 6px; } .slot p { margin: 0; color: var(--muted); }
.slot-0 { --tint: #38e8c6; transform: rotate(-0.9deg); } .slot-1 { --tint: #ffd23f; transform: rotate(0.8deg) translateY(10px); } .slot-2 { --tint: #ff5d73; transform: rotate(-0.4deg); } .slot-3 { --tint: #8b7bff; transform: rotate(1deg) translateY(6px); } .slot-4 { --tint: #4cc9f0; transform: rotate(-1deg); }
.slot:hover { transform: rotate(0) translate(-3px, -3px); box-shadow: 10px 10px 0 var(--edge); }

.dialog-list { display: grid; gap: 22px; max-width: 900px; }
.dlg { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); gap: 16px; align-items: stretch; }
.dlg .q, .dlg .a { margin: 0; padding: 14px 18px; border: 4px solid var(--edge); position: relative; }
.dlg .q { background: var(--block-v); color: #0b0d1f; font-weight: 800; box-shadow: 5px 5px 0 var(--edge); }
.dlg .a { background: var(--surface); box-shadow: 5px 5px 0 var(--edge); }
.dlg .q::after { content: ""; position: absolute; right: -16px; top: 18px; border: 8px solid transparent; border-left: 12px solid var(--edge); }
.dlg:nth-child(even) { transform: translateX(6%); width: 94%; }
@media (max-width: 760px) { .dlg { grid-template-columns: 1fr; } .dlg:nth-child(even) { transform: none; } .dlg .q::after { display: none; } }

.sheets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: start; }
.sheet { padding: 24px 26px; border: 4px solid var(--edge); box-shadow: 8px 8px 0 var(--edge); color: #0b0d1f; }
.sheet h3 { color: #0b0d1f; } .sheet li { color: #1f2347; }
.sheet-good { background: var(--block-m); transform: rotate(-1.2deg); } .sheet-real { background: var(--block-y); transform: rotate(1.4deg) translateY(26px); }
@media (max-width: 760px) { .sheets { grid-template-columns: 1fr; } .sheet-real { transform: rotate(1deg); } }

.faq details { border: 3px solid var(--edge); background: var(--surface); box-shadow: 4px 4px 0 var(--edge); margin: 14px 0; padding: 14px 18px; }
.faq summary::after { content: "\25B6"; font-size: 0.9rem; color: var(--accent); } .faq details[open] summary::after { content: "\25BC"; }
.insert-coin { position: relative; background: #0b0d1f; border: 4px solid var(--edge); box-shadow: 10px 10px 0 var(--block-p); border-radius: 0; padding-top: 96px; }
.insert-coin .slot-art { position: absolute; left: 50%; top: 14px; width: 64px; transform: translateX(-50%); }
.insert-coin .slot-art svg { display: block; width: 100%; height: auto; animation: px-coin-in 1.8s steps(10) infinite; }
.insert-coin .slot-art i { position: absolute; left: -22px; right: -22px; bottom: -16px; height: 10px; background: var(--block-v); border: 3px solid #ffd23f; }
/* the coin drops until it sits on the slot, then is swallowed by it: the part below the bar is clipped, so it reads as inserted, never as passing through */
@keyframes px-coin-in { 0% { transform: translateY(-45%); clip-path: inset(0); opacity: 0; } 15% { opacity: 1; } 55% { transform: translateY(0); clip-path: inset(0); } 100% { transform: translateY(100%); clip-path: inset(0 0 100% 0); opacity: 1; } }

/* ================================================================ every other page: the same level, not a template ================================================================ */
/* inner pages: a title on a tilted block, stage labels that count themselves, hard-edged tables and cards that do not all sit straight */
.page-head h1 { display: inline-block; max-width: 100%; padding: 0.08em 0.4em 0.14em; background: var(--block-v); color: #0b0d1f; -webkit-text-fill-color: #0b0d1f; border: 4px solid var(--edge); box-shadow: 8px 8px 0 var(--edge); transform: rotate(-1.2deg); }
.page-head .lead, .page-head > p { margin-top: 22px; }
body { counter-reset: lvl; }
.section-head:not(:has(.lvl)) { counter-increment: lvl; }
.section-head:not(:has(.lvl)) h2::before { content: "LEVEL " counter(lvl); display: block; width: max-content; margin-bottom: 12px; padding: 5px 12px; background: #0b0d1f; color: #ffd23f; font-family: var(--sans, inherit); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; transform: rotate(-2deg); box-shadow: 4px 4px 0 var(--block-p); }
.grid > .card:nth-child(3n+1), .grid > .feature:nth-child(3n+1) { transform: rotate(-0.5deg); }
.grid > .card:nth-child(3n+2), .grid > .feature:nth-child(3n+2) { transform: rotate(0.4deg) translateY(6px); }
.grid > .card:hover, .grid > .feature:hover { transform: rotate(0) translate(-2px, -2px); }
.prose table, table.compare, .table-wrap table { border: 4px solid var(--edge); box-shadow: 6px 6px 0 var(--edge); border-collapse: separate; border-spacing: 0; background: var(--surface); }
.prose th, table.compare th, .table-wrap th { background: #0b0d1f; color: #ffd23f; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.74rem; }
code.cmd { display: block; margin: 8px 0; padding: 10px 12px; background: #0b0d1f; color: #38e8c6; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.82rem; overflow-x: auto; white-space: pre; border: 3px solid var(--edge); }
.alert { border: 3px solid var(--edge); box-shadow: 4px 4px 0 var(--edge); border-radius: 0; }
.badge { border-radius: 0; border: 2px solid var(--edge); font-weight: 800; letter-spacing: 0.04em; }
.footer { border-top: 4px solid var(--edge); background: repeating-linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--edge) 7%, transparent) 22px 24px); }

/* the signed-in app: a game menu on the left, a coin counter on top */
.shell .side { background: #0b0d1f; border-right: 4px solid var(--edge); color: #d5d2f5; }
.shell .side a.item { color: #c8c4f0; border-radius: 0; border: 2px solid transparent; font-weight: 700; letter-spacing: 0.02em; }
.shell .side a.item:hover { background: #1f2352; color: #fff; border-color: #ffd23f; }
.shell .side a.item[aria-current="page"] { background: #ffd23f; color: #0b0d1f; border-color: #0b0d1f; box-shadow: 4px 4px 0 var(--block-p); transform: translateX(4px); }
.shell .side a.item[aria-current="page"]::after { content: "\25C0"; margin-left: auto; font-size: 0.7rem; }
.shell .side .sep { background: #3a4090; height: 3px; }
.shell .side .who { background: #1f2352; border: 3px solid #3a4090; border-radius: 0; color: #fff; }
.shell .side .brand { color: #ffd23f; }
.shell .topbar { border-bottom: 4px solid var(--edge); background: var(--bg); }
.shell .topbar h1 { font-size: 1.15rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.16em; }
.shell .balance-chip { border: 3px solid var(--edge); border-radius: 0; background: #ffd23f; color: #0b0d1f; box-shadow: 4px 4px 0 var(--edge); }
.shell .balance-chip small { color: #1f2347; }
.shell .content .card { border: 4px solid var(--edge); box-shadow: 6px 6px 0 var(--edge); border-radius: 0; }
.shell .content .card-title { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 900; }
.shell .content .seg { border: 3px solid var(--edge); border-radius: 0; background: var(--surface); }
.shell .content .seg button[aria-selected="true"] { background: #0b0d1f; color: #ffd23f; }
.shell .content .stat { border: 3px solid var(--edge); background: var(--surface-2); padding: 10px 12px; }
.shell .tabbar { border-top: 4px solid var(--edge); }
.shell .content .receipt { border: 3px dashed var(--edge); }
.shell .stage, .shell .stage .presence { border-radius: 0; } .shell .stage { border: 4px solid var(--edge); box-shadow: 6px 6px 0 var(--block-v); }
.shell .content .btn.primary, .shell .content .btn.green { box-shadow: 4px 4px 0 var(--edge); }
.shell .content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .shell .content select, .shell .content textarea { border: 3px solid var(--edge); border-radius: 0; }

[hidden] { display: none !important; }

/* ================================================================ the Plus sheet: Free next to Plus, opened from the header ================================================================ */
.ps-modal { width: min(940px, 100%); padding: 22px 22px 26px; border: 4px solid var(--edge); border-radius: 0; box-shadow: 10px 10px 0 var(--block-p); background: var(--bg); }
.ps-head { position: relative; padding-right: 44px; margin-bottom: 18px; }
.ps-title { margin: 0; font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: -0.03em; }
.ps-sub { margin: 6px 0 0; color: var(--muted); max-width: 60ch; }
.ps-x { position: absolute; top: -6px; right: -6px; width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.6rem; line-height: 1; font-weight: 800; color: var(--ink); background: var(--surface); border: 3px solid var(--edge); box-shadow: 0 3px 0 var(--edge); cursor: pointer; }
.ps-x:hover { background: var(--block-y); }
.ps-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 22px; align-items: start; }
.ps-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 22px; border: 4px solid var(--edge); background: var(--surface); box-shadow: 6px 6px 0 var(--edge); }
.ps-free { transform: rotate(-0.6deg); }
.ps-plus { background: var(--block-y); color: #0b0d1f; transform: rotate(0.5deg); box-shadow: 8px 8px 0 var(--edge); }
.ps-plus .ps-sub, .ps-plus .ps-note, .ps-plus .ps-per, .ps-plus .ps-fine { color: #2a2205; }
.ps-ribbon { position: absolute; top: -16px; right: 18px; padding: 4px 12px; background: var(--block-p); color: #fff; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; border: 3px solid var(--edge); transform: rotate(4deg); }
.ps-tag { display: inline-block; align-self: flex-start; padding: 3px 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; background: var(--edge); color: var(--block-y); }
.ps-price { font-size: clamp(2.2rem, 6vw, 3.1rem); line-height: 1; font-weight: 900; letter-spacing: -0.04em; }
.ps-per { margin-top: -6px; font-size: 0.85rem; color: var(--muted); }
.ps-keep { align-self: flex-start; padding: 5px 12px; font-weight: 900; border: 3px solid var(--edge); background: var(--block-m); color: #0b0d1f; box-shadow: 3px 3px 0 var(--edge); transform: rotate(-1deg); }
.ps-free .ps-keep { background: var(--surface-2); }
.ps-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.ps-list li { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: start; font-weight: 650; }
.ps-tick { grid-row: span 2; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; font-size: 0.8rem; font-weight: 900; color: #0b0d1f; background: var(--block-m); border: 2px solid var(--edge); }
.ps-note { grid-column: 2; font-weight: 450; font-size: 0.82rem; color: var(--muted); }
.ps-honest { margin: 4px 0 0; padding: 10px 12px; font-size: 0.85rem; border: 3px dashed var(--edge); background: rgba(255, 255, 255, 0.55); color: #0b0d1f; }
.ps-cta { margin-top: 6px; justify-content: center; text-align: center; padding: 13px 16px; font-size: 1.02rem; }
.ps-plus .btn.primary { background: #0b0d1f; color: var(--block-y); }
.ps-plus .btn.primary:hover { background: #1c2150; }
.ps-fine { margin: 0; font-size: 0.78rem; text-align: center; }
@media (max-width: 760px) { .ps-grid { grid-template-columns: 1fr; } .ps-free, .ps-plus { transform: none; } .ps-modal { padding: 16px; } }
html:not(.motion-calm) .ps-plus { animation: ps-pop 0.35s steps(5) both; }
html:not(.motion-calm) .ps-free { animation: ps-pop 0.35s steps(5) 0.08s both; }
@keyframes ps-pop { from { transform: translateY(18px) scale(0.97); opacity: 0; } }
.ps-back { place-items: start center; overflow-y: auto; }
.ps-modal { margin: 8px auto; max-height: none; overflow: visible; }

/* download cards: nothing may leave its frame (long fingerprints break, buttons wrap their small print, command lines wrap) */
.dl-card { min-width: 0; overflow: hidden; }
.dl-card .btn { white-space: normal; max-width: 100%; }
.dl-card .btn > span.xs { flex: 1 1 100%; text-align: left; white-space: normal; }
.dl-card .dl-fp { overflow-wrap: anywhere; word-break: break-all; }
.dl-card pre, .dl-card .code, pre.code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; overflow-x: hidden; }
/* the Plus sheet is compact: both plans and the buy button are on screen at once, without scrolling, on an ordinary laptop */
.ps-modal { width: min(860px, 100%); padding: 16px 18px 20px; }
.ps-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding-right: 46px; }
.ps-title { font-size: 1.7rem; }
.ps-sub { margin: 0; font-size: 0.9rem; }
.ps-grid { gap: 20px; }
.ps-card { gap: 7px; padding: 14px 16px 16px; }
.ps-price { font-size: 2.3rem; }
.ps-keep { font-size: 0.9rem; padding: 3px 10px; }
.ps-list { gap: 6px; font-size: 0.92rem; }
.ps-honest { font-size: 0.8rem; padding: 8px 10px; }
.ps-cta { padding: 11px 14px; }
.ps-ribbon { top: -14px; }

/* progress rings: the number inside the circle, the words under it */
.ring-wrap { display: grid; justify-items: center; gap: 6px; flex: none; max-width: 130px; text-align: center; }
.ring-cap { line-height: 1.2; }
/* the signed-in name box at the foot of the dark sidebar: light text on the dark block, and the sign-out button never sits on top of the e-mail */
.shell .side .who { gap: 8px; }
.shell .side .who .ink, .shell .side .who .ink b { color: #fff; }
.shell .side .who .muted { color: #b9b6e8; }
.shell .side .who .grow { min-width: 0; }
.shell .side .who .btn { flex: none; width: 36px; height: 36px; padding: 0; justify-content: center; color: #ffd23f; border: 2px solid #3a4090; box-shadow: none; }
.shell .side .who .btn:hover { background: #ffd23f; color: #0b0d1f; transform: none; box-shadow: none; }
.shell .side .who .avatar { flex: none; }

/* ================================================================ phones: nothing wider than the screen, no sideways drag, no pinch-zoom, nothing on top of anything ================================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: clip; touch-action: pan-y; overscroll-behavior-x: none; }
  .table-wrap, pre, .seg, .tabs, [data-scroll-x] { touch-action: pan-x pan-y; }
  img, video, canvas, iframe, svg.splitbar { max-width: 100%; }
  .wrap { padding-left: 16px; padding-right: 16px; }
  .card, .grid > *, .stack > *, .row > * { min-width: 0; }
  pre, code, .code, .mono { overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
  table { max-width: 100%; }
  .table-wrap { overflow-x: auto; max-width: 100%; }
  /* the tilted blocks stay, only less tilted, and their hard shadows are shorter so they cannot push the page sideways */
  .slot-0, .slot-1, .slot-2, .slot-3, .slot-4 { transform: none; }
  .page-head h1 { transform: rotate(-0.6deg); box-shadow: 5px 5px 0 var(--edge); max-width: calc(100% - 6px); overflow-wrap: anywhere; }
  .insert-coin, .scoreboard { box-shadow: 6px 6px 0 var(--block-p); margin-right: 6px; }
  h1 { overflow-wrap: anywhere; }

  /* header: the logo, the colour moon, Plus and the menu; everything else is in the menu */
  .nav-row { gap: 8px; }
  .brand { font-size: 1.12rem; gap: 7px; min-width: 0; }
  .brand img { width: 26px; height: 26px; }
  .nav-actions { gap: 6px; flex: none; }
  .nav-actions .nav-quiet, .nav-actions [data-guest] { display: none; }
  .nav-plus { padding: 7px 12px; font-size: 0.85rem; }
  .nav-actions .btn.sm { padding: 7px 10px; }

  /* the announcement bar is two short lines on a phone */
  .promo-bar { font-size: 0.76rem; line-height: 1.35; }
  .promo-bar-in { gap: 8px; padding-right: 10px; }
  .promo-bar-ico, .promo-bar-link { display: none; }
  .promo-bar-x { top: 4px; }
  .promo-bar-text { padding-right: 34px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* signed-in app: the top bar carries the balance and the buttons, the page has its own heading */
  .topbar { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .topbar > h1 { display: none; }
  .topbar .row.nowrap { margin-left: auto; gap: 6px; }
  .topbar .motion-btn { font-size: 0.72rem; padding: 6px 8px; }
  .topbar .balance-chip small { display: none; }
  .content { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 400px) {
  .topbar .motion-btn { display: none; }
  .nav-plus .plus-spark { display: none; }
}
/* the Plus sheet on a phone: one column, scrolls inside the screen */
@media (max-width: 760px) {
  .ps-back { padding: 10px; }
  .ps-modal { box-shadow: 6px 6px 0 var(--block-p); margin-right: 6px; }
  .ps-head { padding-right: 40px; }
}
@media (max-width: 760px) {
  .topbar::before { content: ""; flex: none; width: 30px; height: 30px; background: url("/assets/img/logo-mark.svg") center / contain no-repeat; image-rendering: pixelated; }
}

/* choose-your-ad: three blocks, each says what it pays */
.ad-choices { display: grid; gap: 10px; width: 100%; max-width: 440px; margin: 10px auto 0; text-align: left; }
.ad-choice { display: grid; gap: 2px; justify-content: stretch; text-align: left; height: auto; padding: 10px 14px; white-space: normal; background: var(--surface); color: var(--ink); }
.ad-choice:nth-of-type(1) { box-shadow: 0 5px 0 var(--block-p); } .ad-choice:nth-of-type(2) { box-shadow: 0 5px 0 var(--block-m); } .ad-choice:nth-of-type(3) { box-shadow: 0 5px 0 var(--block-y); }
.ad-choice-pay { font-weight: 800; color: var(--pos); font-size: 0.92rem; }

/* Quick Tag: labelling as a fast arcade round */
.qt-card { border: 4px solid var(--edge); background: var(--surface); box-shadow: var(--shadow); padding: 18px; display: grid; gap: 14px; }
.qt-text { font-size: 1.15rem; font-weight: 700; min-height: 3.5em; display: grid; align-items: center; overflow-wrap: anywhere; }
.qt-in { animation: qt-pop 0.22s steps(4) both; }
@keyframes qt-pop { from { transform: translateX(26px); opacity: 0; } }
.qt-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.qt-opt { display: flex; gap: 8px; align-items: center; justify-content: flex-start; padding: 12px 14px; font-size: 1rem; white-space: normal; text-align: left; color: #0b0d1f; }
.qt-opt kbd { font: 800 0.8rem/1 ui-monospace, Consolas, monospace; border: 2px solid var(--edge); background: #fff; padding: 3px 6px; }
.qt-c0 { background: var(--block-y); } .qt-c1 { background: var(--block-m); } .qt-c2 { background: var(--block-p); color: #fff; } .qt-c3 { background: var(--block-v); } .qt-c4 { background: var(--block-b); }
.qt-bar { height: 14px; border: 3px solid var(--edge); background: var(--surface-2); }
.qt-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.15s steps(4); }
.qt-combo { color: var(--accent-strong); letter-spacing: 0.08em; min-height: 1.2em; }
.qt-done { display: grid; gap: 6px; text-align: center; padding: 18px 6px; }
@media (max-width: 760px) { .qt-opts { grid-template-columns: 1fr 1fr; } .qt-card { padding: 14px; } }

/* teams */
.team-row { display: grid; gap: 6px; padding: 8px 0; border-bottom: 2px dashed var(--line); } .team-row:last-of-type { border-bottom: 0; }
.team-link { display: flex; align-items: center; gap: 14px; padding: 14px 18px; text-decoration: none; background: var(--surface-2); } .team-link > div { flex: 1; min-width: 0; }
.team-link:hover { text-decoration: none; transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--edge); }

/* ================================================================ simpler app screens: one hero number, one next step, tiles, everything else folded ================================================================ */
.ov .bal-hero { background: var(--surface-2); padding: 20px; display: grid; gap: 8px; }
.bal-hero .k { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; color: var(--muted); }
.bal-hero .big { font-size: clamp(2.2rem, 9vw, 3.4rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.bal-sub { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.86rem; color: var(--muted); }
.bal-actions { margin-top: 6px; gap: 10px; }
.next-step { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none; background: var(--accent-bg); }
.next-step:hover { text-decoration: none; transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--edge); }
.next-step .k { font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.72rem; color: var(--accent-strong); }
.ov-h { margin: 4px 0 10px; font-size: 1.05rem; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 96px; padding: 12px 8px; text-align: center; text-decoration: none; color: var(--ink); background: var(--surface); border: 3px solid var(--edge); box-shadow: 4px 4px 0 var(--edge); font-size: 0.92rem; }
.tile:hover { text-decoration: none; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--edge); background: var(--block-y); }
.tile:nth-child(3n+1) .icon-chip { background: var(--block-y); } .tile:nth-child(3n+2) .icon-chip { background: var(--block-m); } .tile:nth-child(3n) .icon-chip { background: var(--block-p); color: #fff; }
.fold { border: 3px solid var(--edge); background: var(--surface); box-shadow: 4px 4px 0 var(--edge); padding: 0; }
.grid > .fold { align-self: start; }
.fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 800; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: "▶"; margin-left: auto; font-size: 0.8rem; color: var(--accent); }
.fold[open] > summary::after { content: "▼"; }
.fold > div { padding: 0 14px 16px; }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tile { min-height: 84px; } }

.more-list { display: grid; gap: 10px; }
.more-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; text-decoration: none; color: var(--ink); background: var(--surface); border: 3px solid var(--edge); box-shadow: 3px 3px 0 var(--edge); }
.more-row:hover { text-decoration: none; background: var(--block-y); transform: translate(-1px, -1px); }
.more-row .grow { min-width: 0; } .more-row .meta { font-size: 0.82rem; color: var(--muted); }

/* phones: the first number is big, the others share a row; tab chips scroll in one line; the grey sub-titles under page names are dropped */
@media (max-width: 760px) {
  .grid:has(> .card.stat) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid:has(> .card.stat) > .card.stat { padding: 12px 14px; }
  .grid:has(> .card.stat) > .card.stat:first-child { grid-column: 1 / -1; }
  .grid:has(> .card.stat) .stat .v { font-size: 1.35rem; }
  .grid:has(> .card.stat) > .card.stat:first-child .v { font-size: 2.1rem; }
  .grid:has(> .card.stat) .stat .s { font-size: 0.76rem; }
  .seg[role="tablist"] { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .seg[role="tablist"]::-webkit-scrollbar { display: none; }
  .seg[role="tablist"] > * { flex: none; white-space: nowrap; }
  .page-title > p { display: none; }
  .page-title h2 { font-size: 1.5rem; }
  .card { padding: 14px; }
  .content { padding-bottom: 96px; } /* the last card is never under the tab bar */
}

/* games: tiles */
.game-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.game-tile { display: grid; gap: 8px; padding: 10px; text-decoration: none; color: var(--ink); background: var(--surface); border: 3px solid var(--edge); box-shadow: 4px 4px 0 var(--edge); align-content: start; }
.game-tile:hover { text-decoration: none; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--edge); }
.game-tile .game-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 0; border: 2px solid var(--edge); background: var(--surface-2); display: grid; place-items: center; }
.game-tile .game-name { font-size: 1.02rem; }
.game-tile .game-line { font-size: 0.82rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.game-tile .game-play { justify-self: start; pointer-events: none; }
@media (max-width: 760px) { .game-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .game-tile { padding: 8px; } .game-tile .game-line { display: none; } .game-tile .game-play { justify-self: stretch; justify-content: center; } }

/* very narrow phones (360 px and below): the header must never put one button on top of another */
@media (max-width: 420px) {
  .brand { font-size: 1.02rem; gap: 6px; }
  .brand img { width: 24px; height: 24px; }
  .nav-row { gap: 6px; }
  .nav-actions { gap: 5px; }
  .nav-actions .btn.sm { padding: 6px 9px; }
  .nav-plus { padding: 6px 10px; font-size: 0.82rem; }
}
@media (max-width: 345px) {
  .brand { font-size: 0; gap: 0; } /* only the logo: the name is in the page title and the menu */
  .brand img { width: 30px; height: 30px; }
}

/* ---- audit of 26 Oct: compact cookie notice on phones, comfortable footer links, long words never leave their box, brand on the sign-in pages */
@media (max-width: 700px) {
  .cookie { left: 8px; right: 8px; bottom: 8px; width: auto; display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
  .cookie p { font-size: 0.78rem; line-height: 1.3; flex: 1; min-width: 0; }
  .cookie .btn { margin: 0; flex: none; padding: 6px 10px; }
}
@media (hover: none), (max-width: 800px) {
  .footer a { display: inline-block; padding-block: 7px; }
  .footer .brand { padding-block: 0; }
}
.card a, .prose a { overflow-wrap: anywhere; }
.card td, .card th { overflow-wrap: break-word; }
.auth-mobile-brand { display: none; }
@media (max-width: 860px) { .auth-mobile-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; margin-bottom: 8px; color: var(--ink); } .auth-mobile-brand img { width: 28px; height: 28px; } }

/* a page whose title the top bar already says leaves no empty band on a phone (the subtitle is hidden there too) */
@media (max-width: 760px) { .page-title:has(> h2[hidden]) { display: none; } }

/* ---- language button and menu */
.lang-slot { display: inline-flex; }
.lang-wrap { position: relative; display: inline-flex; }
.lang-btn { gap: 6px; }
.lang-btn .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lang-btn .lang-code { font-weight: 800; letter-spacing: 0.04em; font-size: 0.78rem; }
.lang-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 90; min-width: 170px; max-height: min(70vh, 420px); overflow-y: auto; display: grid; padding: 6px; background: var(--surface); color: var(--ink); border: 3px solid var(--edge); box-shadow: var(--shadow-sm); border-radius: var(--r-sm); }
.lang-pop button { text-align: left; background: none; border: 0; padding: 9px 12px; font: inherit; font-weight: 600; color: inherit; cursor: pointer; border-radius: 6px; }
.lang-pop button:hover, .lang-pop button:focus-visible { background: var(--surface-2); }
.lang-pop button[aria-checked="true"] { background: var(--block-y); color: #0b0d1f; }
.lang-select { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.lang-select select { min-width: 9em; }
.drawer-lang { padding: 12px 16px 0; }
.lang-slot-inline { display: inline-flex; margin-right: 12px; }
@media (max-width: 760px) { .lang-slot.hide-mobile { display: none; } .lang-slot .lang-btn .lang-code { display: none; } .nav-actions .lang-slot { display: none; } }