/* Protopilot — cockpit bezel shell. The canvas draws the game;
   this file only styles the housing, HUD, overlays and level grid. */
:root{
    --void:#080D1C;
    --panel:#111A33;
    --bezel:#22315C;
    --amber:#F2B134;
    --cream:#DDE7FA;
    --rust:#D94F3D;
    --dim:#6E7FA6;
    --arcade:"Press Start 2P", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  html,body{height:100%;overflow:hidden;background:var(--void)}
  body{
    font-family:var(--arcade);color:var(--cream);
    display:flex;align-items:center;justify-content:center;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    user-select:none;-webkit-user-select:none;
  }
  #housing{position:relative;width:100%;height:100%;max-width:540px;display:flex;flex-direction:column;background:var(--void)}
  #screen{
    position:relative;flex:1;min-height:0;background:var(--void);overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    border-left:3px solid var(--bezel);border-right:3px solid var(--bezel);
  }
  canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}

  #hud{
    position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
    padding:9px 11px;font-size:9px;line-height:1.9;pointer-events:none;
    text-shadow:0 2px 0 rgba(0,0,0,.6);
  }
  #hud .lbl{display:block;font-size:6px;color:rgba(221,231,250,.62);letter-spacing:.5px}
  #hud .val{color:#fff}
  #hud .right{text-align:right}

  /* The music credit, centred at the top and doubling as the mute button.
     z-index puts it over the overlay sheets: attribution has to be visible on
     the title screen and the leaderboard too, not only while flying. */
  /* The wrapper does the centring, not the button. The global button:active
     rule sets its own transform, which would replace a translateX(-50%) on the
     button and throw the bar sideways mid-press — far enough that the pointer
     left it and the click never completed. Keeping the two jobs on separate
     elements means the press can only ever nudge it down, as intended.
     Sits below the level/speed line: at 375px those blocks leave no room in
     the middle, and attribution that truncates is not attribution. */
  .creditbar{
    position:absolute;top:38px;left:0;right:0;z-index:6;
    display:flex;justify-content:center;pointer-events:none;padding:0 10px;
  }
  .credit{
    display:flex;align-items:center;gap:5px;max-width:100%;
    pointer-events:auto;background:rgba(8,13,28,.55);border:0;border-radius:3px;
    padding:4px 8px;margin:0;cursor:pointer;line-height:1.4;
    font-family:var(--arcade);font-size:6px;letter-spacing:.5px;
    color:var(--cream);opacity:.78;text-align:center;
  }
  .credit:hover{opacity:1}
  .credit svg{flex:none}
  /* Wraps rather than ellipsises. Dropping the licence took the longest credit
     from 299px to 137, which clears the 263 a 320px phone offers, so today
     every track fits on one line. The wrap stays as the fallback for a longer
     title later: a cut-off attribution satisfies nothing. */
  .credit span{text-align:left}
  .credit .cone{fill:currentColor}
  .credit .wave{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .credit .slash{display:none;stroke:var(--rust);stroke-width:1.8;stroke-linecap:round}
  .credit[aria-pressed="true"]{opacity:.55}
  .credit[aria-pressed="true"] .wave{display:none}
  .credit[aria-pressed="true"] .slash{display:block}
  /* display:flex would otherwise beat the [hidden] default. */
  .credit[hidden]{display:none}


  .sheet{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:16px;padding:26px 22px;text-align:center;background:rgba(6,10,22,.82);overflow-y:auto;
  }
  .sheet[hidden]{display:none}
  .eyebrow{font-size:7px;letter-spacing:2px;color:var(--amber)}
  h1{font-size:17px;line-height:1.6;font-weight:400}
  h2{font-size:12px;line-height:1.7;font-weight:400}
  .body{font-size:8px;line-height:2.2;color:var(--dim);max-width:28ch}
  .figure{font-size:24px;color:var(--amber);line-height:1.4}
  .figure small{display:block;font-size:7px;color:var(--dim);letter-spacing:1.5px;margin-top:8px}
  .pair{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
  .pair div{font-size:11px;color:var(--cream)}
  .pair span{display:block;font-size:6px;color:var(--dim);letter-spacing:1px;margin-top:6px}
  .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

  /* A highlight that sweeps across the title, the way a coin catches the light.
     It's a gradient clipped to the glyphs and slid sideways — the text stays
     selectable, readable and one element, unlike the usual trick of stacking a
     second copy under a masked overlay.

     Behind @supports because background-clip:text is what makes it work: where
     it isn't understood the colour:transparent below would take the title with
     it and leave a blank screen where the name should be. Cream either side of
     the band so the glyphs sit at their normal colour for most of the cycle and
     the amber only passes through. */
  @supports ((background-clip: text) or (-webkit-background-clip: text)){
    #sTitle h1{
      background:linear-gradient(100deg,
        var(--cream) 0%, var(--cream) 42%,
        #FFFFFF 47%, var(--amber) 50%, #FFFFFF 53%,
        var(--cream) 58%, var(--cream) 100%);
      background-size:300% 100%;
      background-position:150% 0;
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      animation:shine 4.5s linear infinite;
    }
  }
  @keyframes shine{ to{ background-position:-50% 0 } }
  /* Must follow the block above: same specificity, so source order is what
     lets it win. Parks the gradient on its cream end rather than mid-sweep. */
  @media (prefers-reduced-motion: reduce){
    #sTitle h1{animation:none;background-position:0 0}
  }

  /* Credits. Scrolls on its own so a long playlist can't push the BACK button
     off the bottom of a short screen. */
  #creditList{
    width:100%;max-width:320px;max-height:56vh;overflow-y:auto;text-align:left;
  }
  .credit-head{
    font-size:7px;letter-spacing:2px;color:var(--amber);
    margin:14px 0 6px;
  }
  .credit-head:first-child{margin-top:0}
  .credit-row{font-size:8px;line-height:2;color:var(--dim)}
  .credit-row a{color:var(--cream);text-decoration:underline}
  .credit-row a:hover{color:var(--amber)}
  .credit-row em{font-style:normal;color:var(--cream)}

  /* Dismiss, in the corner of a sheet. Deliberately quiet and deliberately
     large to hit: declining should cost one tap, not a moment's aiming. */
  .close{
    position:absolute;top:6px;right:8px;
    background:none;border:0;padding:0;
    /* 44px square: the smallest comfortable touch target. Quiet to look at,
       but declining must never take two attempts. */
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    font-size:17px;line-height:1;color:var(--dim);
  }
  .close:hover{color:var(--cream)}

  /* The dealt name. Smaller than .figure's 24px because two words need the
     room, and boxed so it reads as a thing being offered rather than a title. */
  #nameOffer{
    font-size:13px;line-height:1.5;color:var(--cream);
    background:var(--panel);border:2px solid var(--bezel);border-bottom-width:4px;
    border-radius:3px;padding:14px 16px;max-width:280px;
  }
  #nameNote.bad{color:var(--rust)}

  button{
    font-family:var(--arcade);font-size:9px;color:#2A1704;background:var(--amber);
    border:0;border-bottom:4px solid #A9761B;border-radius:3px;padding:13px 18px;cursor:pointer;letter-spacing:.5px;
  }
  button.ghost{background:transparent;color:var(--dim);border:2px solid var(--bezel);border-bottom-width:4px}
  button:active{transform:translateY(2px);border-bottom-width:2px}
  button:focus-visible{outline:3px solid #fff;outline-offset:3px}

  #grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;width:100%;max-width:290px}
  .lv{
    aspect-ratio:1;border-radius:3px;border:2px solid var(--bezel);background:var(--panel);
    color:var(--cream);font-family:var(--arcade);font-size:11px;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0;
    border-bottom-width:4px;
  }
  .lv em{font-style:normal;font-size:5px;color:var(--amber);letter-spacing:.5px}
  .lv.lock{color:#33406A;border-color:#1A2444;background:#0C1428;cursor:not-allowed}
  .lv.done{border-color:var(--amber)}

  /* Leaderboard. Fixed-width rank and score columns so the names line up
     however long they are, and the name itself truncates rather than wraps. */
  /* Your own total, coin first. Same markup on the title screen and the level
     select so the two always read identically. */
  .score{
    display:flex;align-items:center;justify-content:center;gap:7px;
    font-size:14px;color:var(--amber);line-height:1;
  }
  .score svg{display:block;image-rendering:pixelated;flex:none}

  #bdList{
    list-style:none;width:100%;max-width:320px;display:flex;flex-direction:column;gap:2px;
    /* Tall enough that all ten fit without scrolling on a normal phone; it
       still scrolls rather than overflowing on a very short screen. */
    max-height:46vh;overflow-y:auto;
  }
  /* Sign in/out sits at the foot of the title screen, pushed there by an auto
     top margin. On its own that margin swallows *all* the slack, which beats
     justify-content:center and pins the title to the top — so the heading
     carries a matching auto margin and the free space splits evenly between
     them. Title and buttons end up centred, sign-out still at the bottom. */
  #sTitle h1{margin-top:auto}
  .foot{margin-top:auto}
  .foot[hidden]{display:none}
  #bdList li{
    display:flex;align-items:center;gap:10px;padding:8px 9px;font-size:8px;
    background:var(--panel);border:1px solid var(--bezel);border-radius:2px;color:var(--cream);
    /* Fixed, so the sprite badges on the top three cannot make those rows
       taller than the numbered ones. box-sizing is global, so this includes
       the padding and border. */
    height:28px;
  }
  #bdList li.you{border-color:var(--amber);background:#1A2447}
  #bdList b{width:22px;color:var(--dim);font-weight:400;text-align:right;flex:none}
  /* The podium badges are sprites, so keep the pixels hard-edged and centre
     them in the same column the numbers use — the rows must not shift. */
  #bdList b.medal{display:flex;align-items:center;justify-content:flex-end}
  #bdList b.medal svg{display:block;image-rendering:pixelated}
  #bdList span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #bdList i{font-style:normal;color:var(--amber);flex:none}
  #bdList em{font-style:normal;font-size:6px;color:var(--dim);flex:none}

  @media (prefers-reduced-motion: reduce){ *{transition:none!important} }