/* Race a Fly — shares Wiggly Gator's design tokens (see ../style.css :root) but is
   hand-authored and self-contained so it never depends on the fingerprinted main
   stylesheet or gets touched by scripts/build-website.py. */
:root{
  --ink:#092e31;--deep:#071f25;--cream:#f2edd6;--lime:#d5f58b;--muted:#acc4ba;
  --fly-gold:#ffdd62;--fly-amber:#e8cb7a;--fly-red:#ff8b6b;--fly-panel:#0e3739;
  --fly-panel-line:#2f5a56;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
body.fly-body{background-color:#092e31;background-image:linear-gradient(180deg,#092e31e8,#092e31ef 42%,#092e31df),url("../assets/water-refined-131.webp");background-size:100% 100%,352px 1920px;background-attachment:scroll,fixed}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
button,.fly-button,.fly-modal-close{border-radius:6px}
button:focus-visible,.fly-button:focus-visible,a:focus-visible,.fly-modal-close:focus-visible{outline:2px solid var(--fly-gold);outline-offset:3px}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}

.fly-nav{max-width:1200px;margin:auto;padding:22px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #b2d6c222}
.fly-nav .brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.02em}
.fly-nav .brand img{width:38px;border-radius:9px}
.fly-nav .crumbs{font:700 11px/1.4 monospace;letter-spacing:.08em;color:var(--muted)}
.fly-nav .crumbs a{border-bottom:1px solid #93b4a5}
.fly-nav .crumbs em{font-style:normal;color:var(--lime)}
.fly-tag{display:inline-flex;align-items:center;gap:8px;font:700 11px/1.6 monospace;letter-spacing:.13em;color:var(--lime)}
.fly-tag i{width:7px;height:7px;background:var(--lime);border-radius:1px;box-shadow:0 0 0 4px #d5f58b15}

.fly-hero{max-width:1200px;margin:auto;padding:54px 40px 30px;text-align:center}
.fly-vs{display:flex;align-items:center;justify-content:center;gap:34px;font-size:clamp(46px,9vw,88px);margin:18px 0 6px;user-select:none}
.fly-vs span:nth-child(2){font:800 15px/1 monospace;color:var(--lime);letter-spacing:.1em}
.fly-hero h1{font-size:clamp(38px,6.4vw,64px);letter-spacing:-.045em;line-height:1.03;margin:6px 0 14px}
.fly-hero h1 em{font-style:normal;color:var(--lime)}
.fly-hero p{max-width:560px;margin:0 auto 30px;font-size:16px;line-height:1.65;color:var(--muted)}
.fly-cta-row{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.fly-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:17px 26px;background:var(--lime);color:var(--ink);font:800 14px/1.4 monospace;letter-spacing:.03em;box-shadow:4px 4px 0 #031c22;transition:transform .15s,background .15s;border:0;cursor:pointer}
.fly-button:hover{transform:translateY(-3px);background:#e4ffa6}
.fly-button.secondary{background:transparent;color:var(--cream);box-shadow:none;border:2px solid var(--fly-panel-line)}
.fly-button.secondary:hover{background:#0e3739;transform:translateY(-3px)}
.fly-button.gold{background:var(--fly-gold);color:#20382f}
.fly-button.gold:hover{background:#ffe89a}
.fly-hero-note{font-size:12px;color:var(--muted);letter-spacing:.02em}

.fly-strip{background:var(--cream);color:var(--ink);padding:20px;display:flex;justify-content:center;align-items:center;gap:36px;font:700 12px/1.5 monospace;letter-spacing:.06em;flex-wrap:wrap;margin:38px 0}
.fly-strip b{font-size:16px;display:block}
.fly-strip span{text-align:center}
.fly-strip small{display:block;color:#52846c;letter-spacing:.1em;font-size:10px;margin-top:2px}

.fly-section{max-width:1200px;margin:auto;padding:56px 40px}
.fly-section h2{font-size:clamp(28px,3.6vw,42px);line-height:1.1;letter-spacing:-.03em;margin:8px 0 18px}
.fly-section h2 em{font-style:normal;color:var(--lime)}
.fly-section-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:26px}
.fly-section-head h2{margin-bottom:0}
.fly-section-head p{max-width:none;color:var(--muted);font-size:15px;margin:0}

.fly-run-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.fly-run-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.fly-run-grid{grid-template-columns:1fr}}
.fly-run-card{position:relative;background:#0a2a2a;border:1px solid var(--fly-panel-line);padding:20px 18px 22px;text-align:center;transition:border-color .15s,transform .15s}
.fly-run-card:hover{border-color:var(--fly-gold);transform:translateY(-2px)}
.fly-run-card::before,.fly-run-card::after,.fly-run-card .corner-bl,.fly-run-card .corner-br{content:'';position:absolute;width:14px;height:14px;border-color:var(--muted);opacity:.5}
.fly-run-card::before{top:8px;left:8px;border-top:1px solid;border-left:1px solid}
.fly-run-card::after{top:8px;right:8px;border-top:1px solid;border-right:1px solid}
.fly-run-card .corner-bl{bottom:8px;left:8px;border-bottom:1px solid;border-left:1px solid}
.fly-run-card .corner-br{bottom:8px;right:8px;border-bottom:1px solid;border-right:1px solid}
.fly-run-card .fly-run-tout{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--lime);color:var(--ink);font:800 10px monospace;letter-spacing:.08em;padding:5px 12px;box-shadow:0 3px 0 #05231f;white-space:nowrap;z-index:1}
.fly-run-card .fly-portrait{width:150px;height:150px;object-fit:contain;margin:2px auto 10px;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.fly-run-card h3{color:var(--lime);font:800 20px monospace;letter-spacing:.02em;margin:2px 0 6px}
.fly-run-card .scoreline{display:flex;align-items:stretch;justify-content:center;gap:14px;margin-top:8px}
.fly-run-card .scoreline .stat{flex:1;display:flex;flex-direction:column;gap:5px;font:700 11px monospace;color:var(--muted);letter-spacing:.05em}
.fly-run-card .scoreline .stat b{font-size:20px;color:var(--fly-gold);font-family:monospace}
.fly-run-card .scoreline .stat-divider{width:1px;background:var(--fly-panel-line)}
.fly-run-card .actions{display:flex;gap:8px;margin-top:14px}
.fly-run-card .actions a{flex:1;text-align:center;padding:10px;font:700 11px monospace;letter-spacing:.05em;background:#123c3c;border:1px solid var(--fly-panel-line);color:var(--cream)}
.fly-run-card .actions a:hover{background:#164846}
.fly-run-card .actions a.gold{background:var(--fly-gold);color:#20382f;border-color:transparent}
.fly-run-card .actions a.gold:hover{background:#ffe89a}
.fly-picker-controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.fly-picker-controls button{padding:9px 16px;font:700 11px monospace;letter-spacing:.06em;background:#123c3c;color:var(--cream);border:1px solid var(--fly-panel-line);cursor:pointer}
.fly-picker-controls button[aria-pressed="true"]{background:var(--lime);color:var(--ink);border-color:transparent}

.fly-history{display:grid;gap:16px}
.fly-history-card{display:grid;grid-template-columns:150px 1fr auto;gap:24px;align-items:center;background:var(--fly-panel);border-left:3px solid var(--lime);padding:22px 26px}
.fly-history-card .num{font:900 26px/1 monospace;color:var(--lime)}
.fly-history-card .num small{display:block;font:700 9px monospace;color:var(--muted);letter-spacing:.1em;margin-top:4px}
.fly-history-card h3{margin:0 0 6px;font-size:19px}
.fly-history-card p{margin:0;font-size:14px;color:var(--muted);line-height:1.55}
.fly-history-card .runs{text-align:right;font:11px monospace;color:var(--muted)}
.fly-history-card .runs b{display:block;font-size:20px;color:var(--cream)}
.fly-history-card .plasticity{display:inline-block;margin-top:6px;font:700 9px monospace;letter-spacing:.08em;padding:4px 7px;background:#123c3c;color:var(--lime)}

.fly-method{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.fly-method article{background:#123b3c;padding:22px 24px;border-top:2px solid var(--lime)}
.fly-method h3{font:700 12px/1.5 monospace;letter-spacing:.07em;color:var(--lime);margin:0 0 10px}
.fly-method p{font-size:14.5px;line-height:1.6;margin:0;color:var(--cream)}
.fly-disclaimer{margin-top:26px;padding:18px 22px;border:1px dashed var(--fly-panel-line);font-size:13px;line-height:1.6;color:var(--muted)}
.fly-disclaimer strong{color:var(--cream)}

.fly-compare-table{width:100%;border-collapse:collapse;margin-top:10px}
.fly-compare-table th,.fly-compare-table td{padding:12px 10px;text-align:left;font-size:13px;border-bottom:1px solid var(--fly-panel-line)}
.fly-compare-table th{color:var(--lime);font:700 11px monospace;letter-spacing:.06em}

/* ---- Watch / Play stage ---- */
.fly-stage-header{max-width:1200px;margin:auto;padding:22px 40px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.fly-stage-header h1{font-size:22px;margin:0;letter-spacing:-.02em}
.fly-stage-header .run-tag{font:700 11px monospace;letter-spacing:.06em;color:var(--muted)}
.fly-stage{max-width:1200px;margin:auto;padding:22px 40px 60px;display:grid;grid-template-columns:minmax(320px,460px) minmax(320px,460px);justify-content:center;gap:24px;align-items:stretch}
.fly-game-frame{position:relative;aspect-ratio:2/3;background:#02171a;border:9px solid var(--cream);overflow:hidden;box-shadow:16px 16px 0 #061f24}
.fly-game-frame iframe{width:100%;height:100%;border:0;display:block}
.fly-game-frame .fly-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#02171a;color:var(--muted);font:700 12px monospace;letter-spacing:.06em;text-align:center;padding:20px}
.fly-panels{display:flex;flex-direction:column;gap:14px}
.fly-panel{background:var(--fly-panel);border:1px solid var(--fly-panel-line);padding:18px 20px}
.fly-panel h2{margin:0 0 12px;font:700 11px monospace;letter-spacing:.09em;color:var(--lime)}
.fly-panel h2 small{display:block;margin-top:4px;font:600 9px monospace;letter-spacing:.04em;color:var(--muted);text-transform:none}

.fly-vision-strip{display:flex;gap:4px;height:54px}
.fly-vision-cell{flex:1;position:relative;background:#173f3d;border-radius:2px;overflow:hidden}
.fly-vision-cell i{position:absolute;inset:0;background:linear-gradient(180deg,#f2edd6,#c7d8b8)}
.fly-vision-cell.player::after{content:'';position:absolute;left:50%;bottom:4px;width:10px;height:10px;background:var(--fly-gold);border-radius:50%;transform:translateX(-50%);box-shadow:0 0 0 3px #ffdd6244}

.fly-motor-gauge{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font:700 10px monospace;letter-spacing:.06em;color:var(--muted)}
.fly-motor-track{position:relative;height:14px;background:#0a2a2a;border:1px solid var(--fly-panel-line);overflow:hidden}
.fly-motor-center{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--fly-panel-line)}
.fly-motor-fill{position:absolute;top:0;bottom:0;width:0%;transition:width .08s linear}
.fly-motor-fill-left{right:50%;background:var(--lime)}
.fly-motor-fill-right{left:50%;background:var(--fly-gold)}

.fly-decision{text-align:center;font:900 22px monospace;letter-spacing:.02em;padding:10px 0;color:var(--cream)}
.fly-decision .arrow{color:var(--lime);margin-right:8px}

.fly-brain-canvas{width:100%;height:170px;display:block;background:#0a2a2a;border:1px solid var(--fly-panel-line)}

.fly-readout{display:flex;justify-content:space-between;text-align:center}
.fly-readout div b{display:block;font-size:24px}
.fly-readout div small{display:block;font:700 9px monospace;letter-spacing:.08em;color:var(--muted);margin-top:2px}

.fly-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center;margin-top:2px}
.fly-controls-group{display:flex;gap:8px}
.fly-controls button{padding:11px 16px;font:700 11px monospace;letter-spacing:.05em;background:#123c3c;color:var(--cream);border:1px solid var(--fly-panel-line);cursor:pointer}
.fly-controls button[aria-pressed="true"],.fly-controls button.active{background:var(--lime);color:var(--ink);border-color:transparent}
.fly-controls .spacer{flex:1}
.fly-speed-group{gap:0;border:1px solid var(--fly-panel-line)}
.fly-speed-corner{justify-content:flex-end}
.fly-speed-corner .fly-speed-group button{padding:5px 10px;font-size:10px;background:transparent;color:var(--muted)}
.fly-speed-corner .fly-speed-group button.active,.fly-speed-corner .fly-speed-group button[aria-pressed="true"]{background:var(--lime);color:var(--ink)}
.fly-speed-group button{border:0;border-right:1px solid var(--fly-panel-line)}
.fly-speed-group button:last-child{border-right:0}

.fly-result-overlay{position:fixed;inset:0;background:#04191bcc;display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.fly-result-card{max-width:480px;width:100%;background:linear-gradient(130deg,#195257ed,#0b323ded);border:2px solid var(--fly-amber);box-shadow:0 5px #051f28,inset 0 0 0 4px #325a56;padding:34px;text-align:center;position:relative}
.fly-modal-close{position:absolute;top:10px;right:10px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--fly-panel-line);color:var(--muted);font-size:16px;line-height:1;cursor:pointer;transition:border-color .15s,color .15s}
.fly-modal-close:hover{border-color:var(--lime);color:var(--lime)}
.fly-result-card .verdict{font:900 clamp(28px,6vw,40px)/1.15 monospace;color:var(--fly-gold);text-shadow:0 3px #815d35;margin:0 0 18px}
.fly-verdict-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.fly-verdict-row .verdict{margin:0}
.fly-verdict-row .fly-avatar-lg{width:92px;height:92px;object-fit:contain;background:none;border:0;padding:0;border-radius:0;flex-shrink:0;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.fly-result-card .actions{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}

/* Compact live readout shown only on mobile, pinned right above the game
   frame - on a narrow screen the full data panels sit below the fold, so
   without this the "watching" experience has no visible sense of what the
   fly is actually doing at the same time you're looking at it. */
.fly-mobile-hud{display:none}
@media(max-width:860px){
  .fly-stage{grid-template-columns:1fr}
  .fly-method{grid-template-columns:1fr}
  .fly-history-card{grid-template-columns:1fr;text-align:left}
  .fly-history-card .runs{text-align:left}
  .fly-mobile-hud{display:flex;align-items:center;gap:14px;background:var(--fly-panel);border:1px solid var(--fly-panel-line);padding:10px 14px;margin-bottom:10px}
  .fly-mobile-hud-motor{flex:1;display:flex;align-items:center;gap:8px;font:700 12px monospace;color:var(--muted)}
  .fly-mobile-hud-motor .fly-motor-track{flex:1}
  .fly-mobile-hud-stats{display:flex;gap:16px;font:700 11px monospace;color:var(--muted);white-space:nowrap}
  .fly-mobile-hud-stats b{color:var(--fly-gold);font-size:15px;display:block;font-family:monospace}
  .fly-mobile-hud-stats small{display:block;letter-spacing:.06em}
}
@media(max-width:620px){
  .fly-nav{padding:16px 20px}
  .fly-hero{padding:40px 20px 20px}
  .fly-section{padding:44px 20px}
  .fly-stage-header{padding:20px 20px 0}
  .fly-stage{padding:20px 20px 48px}
  .fly-strip{gap:20px}
}

/* ---- The Data (stats.html) ---- */
.stat-chart-wrap{background:var(--fly-panel);border:1px solid var(--fly-panel-line);padding:16px}
.stat-chart-wrap svg{width:100%;height:auto;display:block}
.stat-legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px;font:700 11px monospace;letter-spacing:.04em;color:var(--muted)}
.stat-legend .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
.stat-legend .dot.lime{background:var(--lime)}
.stat-legend .dot.gold{background:var(--fly-gold)}
.stat-legend .dot.record{background:var(--fly-red)}
.stat-bars{display:grid;gap:12px}
.stat-bar-row{display:grid;grid-template-columns:140px 1fr 70px;align-items:center;gap:12px;font:700 11px monospace;color:var(--muted)}
.stat-bar-track{height:16px;background:#0a2a2a;border:1px solid var(--fly-panel-line);position:relative;overflow:hidden}
.stat-bar-fill{height:100%;background:var(--lime)}
.stat-table-wrap{overflow-x:auto;background:var(--fly-panel);border:1px solid var(--fly-panel-line)}
.stat-table{width:100%;border-collapse:collapse;font:12px monospace}
.stat-table th,.stat-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--fly-panel-line);white-space:nowrap}
.stat-table th{color:var(--lime);font-size:10px;letter-spacing:.06em}
.stat-downloads{display:flex;gap:6px;flex-wrap:nowrap}
.stat-downloads a{flex:0 1 auto;min-width:0;padding:10px 10px;background:#123c3c;border:1px solid var(--fly-panel-line);color:var(--cream);font:700 11px monospace;text-decoration:none;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-downloads a:hover{background:#164846}

.raw-logs-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
@media(max-width:720px){.raw-logs-groups{grid-template-columns:1fr}}
.raw-logs-group{background:var(--fly-panel);border:1px solid var(--fly-panel-line);padding:14px 16px}
.raw-logs-group h4{margin:0 0 10px;font:700 11px monospace;letter-spacing:.08em;color:var(--lime)}
.raw-logs-links{display:flex;flex-wrap:wrap;gap:6px}
.raw-logs-links a{padding:6px 9px;background:#123c3c;border:1px solid var(--fly-panel-line);color:var(--cream);font:700 10.5px monospace;text-decoration:none}
.raw-logs-links a:hover{background:#164846;color:var(--fly-gold)}

/* ---- Hall of Fame: real top individual training attempts ---- */
.fly-hof-note{max-width:760px;margin:0 0 22px;padding:14px 18px;border:1px dashed var(--fly-panel-line);font-size:13px;line-height:1.6;color:var(--muted)}
.fly-hof-stats{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:22px}
.fly-hof-stats b{display:block;font-size:22px;color:var(--fly-gold)}
.fly-hof-stats small{display:block;font:700 10px monospace;letter-spacing:.08em;color:var(--muted);margin-top:2px}
.fly-hof-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.fly-hof-card{background:var(--fly-panel);border:1px solid var(--fly-panel-line);border-left:3px solid var(--fly-panel-line);padding:16px 18px;position:relative}
.fly-hof-card.gold{border-left-color:var(--fly-gold)}
.fly-hof-rank{position:absolute;top:12px;right:14px;font:900 20px monospace;color:var(--fly-panel-line)}
.fly-hof-card.gold .fly-hof-rank{color:var(--fly-gold)}
.fly-hof-card h4{margin:0 6px 4px 0;font-size:17px;padding-right:34px}
.fly-hof-card .score{font:900 22px monospace;color:var(--cream)}
.fly-hof-card .meta{font:10px monospace;letter-spacing:.05em;color:var(--muted);margin:2px 0 8px}
.fly-hof-card p{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.fly-hof-distribution{margin-top:28px;padding:20px 22px;background:#123c3c;border:1px solid var(--fly-panel-line)}
.fly-hof-distribution h4{margin:0 0 4px;font:800 12px monospace;letter-spacing:.08em;color:var(--lime)}
.fly-hof-distribution .sub{margin:0 0 16px;font-size:12.5px;color:var(--muted);max-width:640px;line-height:1.6}
.fly-hof-dist-row{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:14px}
.fly-hof-dist-row b{display:block;font-size:18px;color:var(--cream)}
.fly-hof-dist-row small{display:block;font:700 9px monospace;letter-spacing:.06em;color:var(--muted);margin-top:2px}
.fly-hof-distribution .caveat{margin:0;font-size:11.5px;color:#7fa89a;border-left:2px solid var(--fly-panel-line);padding-left:10px}

/* ---- Live race: two synchronized game frames side by side ---- */
.fly-race-wrap{max-width:1200px;margin:auto;padding:22px 40px 60px}
.fly-race-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fly-race-side{display:flex;flex-direction:column;gap:10px}
.fly-race-label{display:flex;justify-content:space-between;align-items:center;min-height:24px;font:800 12px monospace;letter-spacing:.06em}
.fly-race-label .who{color:var(--lime);display:inline-flex;align-items:center;gap:8px}
.fly-race-label .who .fly-avatar{width:24px;height:24px}
.fly-race-label.fly-side .who{color:var(--fly-gold)}
.fly-race-readout{display:flex;gap:16px;font:700 11px monospace;color:var(--muted)}
.fly-race-readout b{color:var(--cream);font-size:15px;display:block}
.fly-race-side .fly-game-frame{aspect-ratio:2/3}
.fly-race-side.leading .fly-game-frame{box-shadow:0 0 0 3px var(--lime),16px 16px 0 #061f24}
.fly-race-status{grid-column:1/-1;text-align:center;font:800 13px monospace;letter-spacing:.05em;color:var(--muted);padding:6px 0}
.fly-race-countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 64px monospace;color:var(--fly-gold);background:#02171acc;z-index:5}
.fly-turn-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#02171af0;z-index:6;font:900 18px monospace;letter-spacing:.08em;color:var(--muted);text-align:center;padding:20px}
.fly-race-side.active .fly-race-label{color:var(--fly-gold)}
.fly-race-side.done .fly-game-frame{opacity:.55}
#difficulty-buttons button[disabled]{opacity:.35;cursor:not-allowed;pointer-events:none}
@media(max-width:860px){
  /* Only one side's box is ever actually being played at a time (see
     play.js) - on narrow screens there's no room to show both full-size
     boxes stacked, so both sides overlap in the same grid cell and only
     the currently-playing one is shown, swapping the instant one finishes.
     Deliberately NOT display:none on the hidden side - the game iframe
     inside it is a live Phaser canvas, and display:none collapses it to
     0x0, which breaks the game's own canvas sizing (throws its "river hit
     a snag" error screen). visibility:hidden keeps real layout dimensions
     so the hidden iframe stays properly sized even while unseen. */
  .fly-race-grid{grid-template-columns:1fr}
  .fly-race-side{grid-column:1;grid-row:1}
  .fly-race-side:not(.mobile-visible){visibility:hidden;pointer-events:none}
  .fly-race-side.mobile-visible{position:relative;z-index:1}
}
@media(max-width:620px){
  .fly-race-wrap{padding:20px 20px 48px}
}
.fly-avatar-lg{width:76px;height:76px;border-radius:4px;object-fit:cover;object-position:center 28%;background:#0a2a2a;border:2px solid var(--fly-panel-line);padding:4px;flex-shrink:0}
.fly-run-head{display:flex;gap:14px;align-items:center;margin-bottom:2px}
.fly-run-headinfo{min-width:0}
.fly-run-headinfo small{display:block}
.fly-run-headinfo h3{margin:2px 0 4px}
.fly-hof-head{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.fly-hof-card .fly-avatar-lg{width:58px;height:58px}
.fly-hof-card h4{margin:0}
.fly-hof-card .score{margin-top:2px}
.fly-nav-right{display:flex;align-items:center;gap:16px}
.fly-ghost-btn{font:700 11px monospace;letter-spacing:.08em;color:var(--lime);border:1px solid var(--fly-panel-line);padding:8px 14px;background:transparent;transition:border-color .15s,background .15s}
.fly-ghost-btn:hover{border-color:var(--lime);background:#0e373933}
.fly-stage-title-row{display:flex;align-items:center;gap:14px}
.fly-stage-title-row .fly-avatar-lg{width:110px;height:110px;object-fit:contain;background:none;border:0;padding:0;border-radius:0;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}
.fly-explore-row{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 0;margin-top:22px;font:700 11px monospace;letter-spacing:.05em;color:var(--muted)}
.fly-explore-row a{padding:0 14px;border-right:1px solid var(--fly-panel-line);color:var(--muted)}
.fly-explore-row a:last-child{border-right:none}
.fly-explore-row a:hover{color:var(--lime)}
.site-credit{text-align:center;padding:20px 20px 40px;color:var(--muted);font-size:11px;letter-spacing:.03em}
.site-credit a{color:var(--muted);text-decoration:underline}
.site-credit a:hover{color:var(--lime)}