/* Cashy site chrome: the colours, type, button, top header and footer shared by every page.
   index.html, apply.html and the legal pages all load this, so the header and footer match everywhere. */
:root {
  --night: #0C0A26;        /* arcade night sky */
  --night-2: #15123A;
  --panel: #1C1848;
  --lime: #8BE000;         /* Cashy / player 1 */
  --lime-hi: #C8FF4A;
  --debt: #8A2BE2;         /* the Debt Clown's purple */
  --fire: #FF7A00;         /* VS flames */
  --gold: #FFD23F;
  --red: #E8202A;
  --ink: #0A0A14;
  --white: #FFFFFF;
  --muted: #B9B6DA;
  --needs: #FF4FA0;
  /* type: Silkscreen (all caps, open C so "HELOC" reads) for headlines and buttons, Press Start 2P only for short tags (11px and up),
     Space Grotesk for everything people read or fill in */
  --disp: "Silkscreen", "Press Start 2P", monospace;
  --pixel: "Press Start 2P", "Courier New", monospace;
  --body: "Space Grotesk", "Trebuchet MS", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }
body { background: var(--night); color: var(--white); font: 500 21px/1.6 var(--body); }
a { color: inherit; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
/* chunky pixel button */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 400 16px/1 var(--disp); text-transform: uppercase; text-decoration: none; white-space: nowrap;
  padding: 18px 22px; background: var(--lime); color: var(--ink); border: 0; cursor: pointer;
  box-shadow: 4px 0 0 0 var(--ink), -4px 0 0 0 var(--ink), 0 4px 0 0 var(--ink), 0 -4px 0 0 var(--ink), 0 8px 0 0 #3F6A00;
  transition: transform .08s; }
.btn:hover { background: var(--lime-hi); }
.btn:active { transform: translateY(4px); box-shadow: 4px 0 0 0 var(--ink), -4px 0 0 0 var(--ink), 0 4px 0 0 var(--ink), 0 -4px 0 0 var(--ink); }
.btn.alt { background: var(--white); box-shadow: 4px 0 0 0 var(--ink), -4px 0 0 0 var(--ink), 0 4px 0 0 var(--ink), 0 -4px 0 0 var(--ink), 0 8px 0 0 #6E6A9C; }
.btn:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, .fighter:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* top HUD */
header.hud { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(12,10,38,.92); backdrop-filter: blur(6px); border-bottom: 4px solid var(--ink); box-shadow: 0 4px 0 0 var(--panel); }
/* over the opening hero and the film the header is see-through; it turns solid once the film is done */
header.hud { transition: background-color .35s, border-color .35s, box-shadow .35s, backdrop-filter .35s; }
html.hud-clear header.hud { background: transparent; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; }
html.hud-clear.menu-open header.hud { background: rgba(12,10,38,.92); }
header.hud .wrap { max-width: none; padding-inline: clamp(20px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; }
header.hud img { height: 38px; width: auto; image-rendering: auto; }
header.hud .hud-actions { display: flex; align-items: center; gap: 18px; }
header.hud .btn { font-size: 14px; padding: 12px 16px; }
/* buttons: lift, glow, a light sweep across, and the arrow nudges */
.btn { position: relative; overflow: hidden; transition: transform .18s cubic-bezier(.2, .9, .3, 1.4), box-shadow .18s, background .18s; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); pointer-events: none; }
.btn:hover { transform: translateY(-4px); box-shadow: 4px 0 0 0 var(--ink), -4px 0 0 0 var(--ink), 0 4px 0 0 var(--ink), 0 -4px 0 0 var(--ink), 0 12px 0 0 #3F6A00, 0 0 28px rgba(139,224,0,.55); }
.btn.alt:hover { box-shadow: 4px 0 0 0 var(--ink), -4px 0 0 0 var(--ink), 0 4px 0 0 var(--ink), 0 -4px 0 0 var(--ink), 0 12px 0 0 #6E6A9C, 0 0 28px rgba(255,255,255,.35); }
.btn:hover::after { animation: btn-shine .7s ease-out; }
@keyframes btn-shine { to { left: 130%; } }
/* the three-bar menu button */
.burger { display: grid; place-content: center; gap: 6px; width: 52px; height: 48px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 0 0 3px #3A3570; cursor: pointer; transition: box-shadow .18s, transform .18s; }
.burger:hover { box-shadow: 0 0 0 3px var(--lime), 0 0 20px rgba(139,224,0,.45); transform: translateY(-2px); }
.burger i { display: block; width: 24px; height: 4px; background: var(--white); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), opacity .2s; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
/* the menu: a full-screen stage select over the page */
.menu { position: fixed; inset: 76px 0 0; z-index: 19; background: radial-gradient(ellipse at 70% 20%, rgba(139,224,0,.12), transparent 50%), rgba(8,6,28,.97); opacity: 0; transition: opacity .3s; overflow-y: auto; }
.menu.on { opacity: 1; }
.menu .wrap { display: grid; align-content: start; gap: 6px; padding-top: clamp(40px, 8vh, 90px); padding-bottom: 60px; }
.menu-tag { font: 400 13px/1 var(--pixel); color: var(--gold); margin-bottom: 18px; }
.menu > .wrap > a { display: flex; align-items: baseline; gap: 22px; font: 400 clamp(34px, 6vw, 84px)/1.1 var(--disp); text-transform: uppercase; color: var(--white); text-decoration: none; padding: 6px 0;
  opacity: 0; transform: translateX(-30px); transition: opacity .35s, transform .35s cubic-bezier(.2, .9, .3, 1.2), color .15s; transition-delay: calc(var(--i) * 45ms); }
.menu.on > .wrap > a { opacity: 1; transform: none; }
.menu > .wrap > a b { font: 400 13px/1 var(--pixel); color: var(--muted); }
.menu > .wrap > a:hover { color: var(--lime); transform: translateX(14px); }
.menu > .wrap > a:hover::after { content: " ◀"; color: var(--lime); font-size: .5em; }
.menu-legal { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 40px; font: 600 16px/1.4 var(--body); }
.menu-legal a { color: var(--muted); text-decoration: none; } .menu-legal a:hover { color: var(--lime); }
html.menu-open { overflow: hidden; }
footer { padding-block: clamp(120px, 15vw, 220px) clamp(120px, 13vw, 180px); border-top: 4px solid var(--ink); background: linear-gradient(180deg, #0A0820, #050414 40%); }
footer .score { font: 400 13px/2 var(--pixel); color: var(--lime); margin-bottom: clamp(44px, 6vw, 72px); }
footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
footer h2 { font: 400 clamp(13px, 1vw, 16px)/1 var(--pixel); color: var(--gold); margin-bottom: 30px; }
footer ul { list-style: none; padding: 0; display: grid; gap: 16px; font-size: clamp(19px, 1.7vw, 25px); }
/* the footer logo plays like a title sprite: the badge hops, the letters wave, coins pop out of the badge */
.fbrand { position: relative; display: inline-block; width: min(380px, 75vw); padding-top: 26px; }
.flogo { display: block; width: 100%; height: auto; overflow: visible; }
.flogo .fl-badge { transform-box: fill-box; transform-origin: 50% 100%; animation: fl-hop 2.4s steps(6) infinite; }
.flogo .fl-l { transform-box: fill-box; animation: fl-wave 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms + .5s); }
@keyframes fl-hop { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-12%) scale(1.04, .97); } 80% { transform: translateY(0) scale(1.08, .9); } 88% { transform: scale(.97, 1.03); } }
@keyframes fl-wave { 0%, 30%, 100% { transform: none; } 12% { transform: translateY(-10%); } }
.fbrand .coin { position: absolute; left: 12%; top: 34%; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: inset -3px -3px 0 #C99A00, 0 0 0 3px var(--ink); opacity: 0; animation: fl-coin 2.4s steps(10) infinite; }
.fbrand .coin.c2 { animation-delay: .12s; --dx: -26px; } .fbrand .coin.c3 { animation-delay: .24s; --dx: 30px; }
@keyframes fl-coin { 0%, 68% { opacity: 0; transform: none; } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 4px), -90px); } }
.fbrand:hover .fl-badge { animation-duration: .8s; }
/* the footer track: Cashy runs to the edge and the money bursts out */
/* the footer runs the full width of the screen, and the runner's track goes edge to edge */
footer .wrap { max-width: none; padding-left: max(20px, 4vw); padding-right: max(20px, 4vw); }
footer .legal { max-width: none; }
.frun { display: block; width: calc(100% + 2 * max(20px, 4vw)); margin-left: calc(-1 * max(20px, 4vw)); height: 220px; margin-top: 50px; border-bottom: 4px solid #2A2660; image-rendering: pixelated; }
footer ul a { text-decoration: none; }
footer ul a:hover { color: var(--lime); }
.legal { margin-top: clamp(60px, 7vw, 90px); padding-top: 36px; border-top: 2px dashed #2A2660; display: grid; gap: 16px; font: 400 15px/1.65 var(--body); color: #A9A6CC; max-width: 120ch; }
.gameover { margin-top: 40px; font: 400 11px/1.6 var(--pixel); color: #6D6A9A; }

@media (max-width: 900px) {
  header.hud .hud-actions .btn.alt { display: none; }
  header.hud .hud-actions { gap: 12px; }
  header.hud .btn { font-size: 12px; padding: 11px 12px; }
  header.hud img { height: 30px; }
  footer .top { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover::after { animation: none; } .menu > .wrap > a { transition: none; }
  .flogo .fl-badge, .flogo .fl-l, .fbrand .coin, .blink { animation: none; }
}
/* the scroll sparkle layer, over the page and under the header and menu */
.fxlayer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 15; pointer-events: none; }