*{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; overflow:hidden; background:#05070f; font-family:'Fredoka',system-ui,sans-serif; touch-action:none; -webkit-user-select:none; user-select:none; }
  canvas{ display:block; }
  .ui{ position:fixed; z-index:20; }
  /* HUD */
  #hud{ top:12px; left:50%; transform:translateX(-50%); z-index:20; text-align:center; color:#fff; pointer-events:none; transition:opacity 1.2s ease; }
  body.quietzone #hud{ opacity:.25; }   /* the Long Quiet: even the numbers go dim */
  body.quietzone .topbtn{ opacity:.45; }
  .topbtn{ transition:opacity 1.2s ease; }
  #alt{ font-weight:600; font-size:1.4rem; line-height:1; text-shadow:0 2px 10px rgba(0,0,0,.5); font-variant-numeric:tabular-nums; }
  #altLabel{ font-size:.6rem; letter-spacing:2px; opacity:.7; }
  #progress{ position:relative; width:150px; height:3px; margin:9px auto 0; border-radius:2px; background:rgba(255,255,255,.18); }
  #progressFill{ display:block; height:100%; width:0%; border-radius:2px; background:#ffd23f; box-shadow:0 0 6px rgba(255,210,63,.6); transition:width .4s ease; }
  #progress u{ position:absolute; top:-1px; width:1px; height:5px; background:rgba(255,255,255,.4); transform:translateX(-.5px); }
  /* top buttons */
  .topbtn{ top:14px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.9); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25); color:#15233f; }
  #share-ui{ left:14px; } #sound{ right:14px; }
  .topbtn svg{ width:22px; height:22px; }
  /* controls */
  .steer{ bottom:30px; width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.30); border:3px solid rgba(255,255,255,.72);
    display:flex; align-items:center; justify-content:center; cursor:pointer; -webkit-tap-highlight-color:transparent; backdrop-filter:blur(2px); color:#15233f; }
  .steer:active,.steer.on{ background:rgba(255,255,255,.6); transform:scale(.95); }
  #left{ left:20px; } #right{ left:118px; }
  .steer svg{ width:34px; height:34px; }
  #pad{ right:20px; bottom:30px; width:118px; height:118px; border-radius:50%; overflow:hidden; display:flex; flex-direction:column;
    box-shadow:0 0 0 3px rgba(190,230,255,.9) inset; -webkit-tap-highlight-color:transparent; }
  .padhalf{ flex:1; border:none; margin:0; padding:0; background:rgba(120,200,255,.30); color:#0c2c52; font-family:inherit; font-weight:600;
    cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; }
  #padTop{ box-shadow:inset 0 -1px 0 rgba(12,44,82,.3); }
  .padhalf.on,.padhalf:active{ background:rgba(120,200,255,.6); }
  #padBot.live{ background:rgba(255,210,63,.92); }
  #padBot.live.on,#padBot.live:active{ background:rgba(255,198,36,1); }
  #padBot.dim{ opacity:.34; }
  .padhalf .lbl{ font-size:.66rem; line-height:1.05; letter-spacing:.3px; text-align:center; pointer-events:none; }
  #padTop .lbl{ font-size:.6rem; }
  @media (min-width:1000px){ #banner{ font-size:60px; } #bannerSub{ font-size:19px; top:calc(30% + 44px); } }
  html.is-desktop .steer, html.is-desktop #pad{ display:none; }   /* mouse + keyboard device -> hide on-screen movement controls; use the keyboard */
  /* land / launch prompts */
  .prompt{ position:fixed; left:50%; bottom:150px; transform:translateX(-50%); z-index:25; display:none; font-family:inherit;
    font-weight:600; font-size:1.02rem; color:#15233f; background:#ffd23f; border:none; border-radius:999px; padding:13px 26px;
    box-shadow:0 4px 0 #d9a900; cursor:pointer; letter-spacing:.4px; -webkit-tap-highlight-color:transparent; }
  #landBtn.show,#launchBtn.show{ display:block; }
  #launchBtn{ bottom:auto; top:14px; padding:10px 22px; font-size:.92rem; }
  #landBtn.show{ animation:bob 1s ease-in-out infinite; }
  @keyframes bob{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(-7px);} }
  .prompt:active{ box-shadow:0 1px 0 #d9a900; }
  /* banner — bounded so it can't blow up on wide/desktop screens */
  #banner{ position:fixed; top:30%; left:50%; transform:translate(-50%,-50%) scale(.9); z-index:20; font-weight:600; font-size:min(12vw,68px);
    color:#fff; text-shadow:0 3px 20px rgba(0,0,0,.6); letter-spacing:2px; opacity:0; pointer-events:none; transition:opacity .35s,transform .35s;
    white-space:nowrap; max-width:92vw; overflow:hidden; text-overflow:ellipsis; }
  #banner.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  #bannerSub{ position:fixed; top:calc(30% + min(7.5vw,46px)); left:50%; transform:translateX(-50%); z-index:20; color:#fff; opacity:0; font-size:min(4.3vw,20px);
    font-weight:500; font-style:italic; letter-spacing:.5px; text-shadow:0 2px 14px rgba(0,0,0,.6); transition:opacity .35s; pointer-events:none;
    width:86vw; max-width:520px; text-align:center; line-height:1.35; }
  #bannerSub.show{ opacity:.92; }
  /* trip card (the Edge payoff) */
  #tripCard{ position:fixed; inset:0; z-index:36; display:none; align-items:center; justify-content:center; background:rgba(4,7,16,.7); padding:24px; }
  #tripCard.show{ display:flex; }
  .lcard{ max-width:340px; background:rgba(16,22,44,.93); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:24px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.55); }
  #tripTitle{ color:#ffd23f; font-weight:600; letter-spacing:2px; font-size:1.05rem; margin-bottom:14px; }
  #tripLore{ color:#eef1f8; font-size:1rem; line-height:1.6; margin-bottom:16px; }
  #tripLore em{ color:#ffd23f; font-style:italic; }
  #tripStats{ color:#9fb0c8; font-size:.82rem; font-weight:600; letter-spacing:.5px; margin-bottom:18px; }
  .triprow{ display:flex; flex-direction:column; gap:10px; }
  #tripShare,#tripHome,#tripGo{ width:100%; font-family:inherit; font-weight:600; font-size:1rem; border:none; border-radius:999px; padding:13px 18px; cursor:pointer; transition:transform .08s,box-shadow .08s; }
  #tripShare{ color:#15233f; background:#ffd23f; box-shadow:0 4px 0 #d9a900; }
  #tripShare:active{ transform:translateY(3px); box-shadow:0 1px 0 #d9a900; }
  #tripGo,#tripHome{ color:#fff; background:rgba(255,255,255,.16); }
  #tripGo:active,#tripHome:active{ transform:translateY(2px); background:rgba(255,255,255,.24); }
  /* intro */
  #intro{ position:fixed; inset:0; z-index:40; background:rgba(6,10,24,.72); display:flex; align-items:center; justify-content:center; }
  #intro.hidden{ display:none; }
  .card{ width:86%; max-width:360px; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); }
  .card h1{ background:#0c2c52; color:#fff; padding:16px 22px; letter-spacing:1px; font-weight:600; font-size:1.4rem; line-height:1.2; }
  .card .body{ padding:20px 22px 22px; text-align:center; color:#2a3550; }
  .card .lede{ font-size:1.15rem; font-weight:600; color:#0c2c52; margin-bottom:12px; }
  .card p{ font-size:1rem; line-height:1.45; margin-bottom:10px; }
  .card .kbd{ font-size:.82rem; color:#8a93a8; margin:4px 0 16px; }
  .card b{ color:#0c2c52; }
  .card .goal{ font-size:1.02rem; color:#2a3550; margin-bottom:14px; }
  .ctrls{ margin:4px 0 6px; }
  .ctrl-set.desktop-only{ display:none; } .ctrl-set.touch-only{ display:block; }
  html.is-desktop .ctrl-set.desktop-only{ display:block; } html.is-desktop .ctrl-set.touch-only{ display:none; }
  .crow{ display:flex; align-items:center; gap:12px; max-width:278px; margin:9px auto; }
  .crow > :first-child{ flex:0 0 118px; display:flex; gap:5px; justify-content:flex-end; align-items:center; }
  .crow > :last-child{ text-align:left; font-size:.95rem; color:#34405a; }
  .crow kbd{ font-family:inherit; font-weight:600; font-size:.8rem; background:#0c2c52; color:#fff; border-radius:6px; padding:3px 8px; min-width:20px; text-align:center; box-shadow:0 2px 0 #06203f; }
  .crow .k i{ font-style:normal; color:#8a93a8; font-size:.78rem; }
  .crow .b{ font-weight:600; font-size:.74rem; letter-spacing:.3px; background:#eef1f6; color:#0c2c52; border:1.5px solid #c7d0df; border-radius:8px; padding:5px 9px; white-space:nowrap; }
  .crow .b.thr{ background:rgba(120,200,255,.34); border-color:#9cd0f5; }
  .crow .b.act{ background:#ffd23f; border-color:#e3b400; }
  .card .hint{ font-size:.82rem; color:#8a93a8; margin:6px 0 16px; }
  #start{ font-family:inherit; font-weight:600; font-size:1.05rem; color:#0c2c52; background:#ffd23f; border:none; border-radius:999px;
    padding:12px 30px; cursor:pointer; box-shadow:0 4px 0 #d9a900; transition:transform .08s,box-shadow .08s; }
  #start:active{ transform:translateY(3px); box-shadow:0 1px 0 #d9a900; }
  .card .by{ background:#0c2c52; color:#fff; padding:10px 16px; font-size:.8rem; font-weight:500; }
  .card .by a{ color:#fff; }
  .brand{ position:fixed; bottom:6px; left:50%; transform:translateX(-50%); z-index:15; font-size:10.5px; color:#fff; opacity:.4; text-decoration:none; }