/* Orbit. Loaded after assets/css/game-base.css. The sky itself is a canvas
   (ui.js draws it); this file only frames it and styles the page around it. */

  .or-wrap{position:relative; width:min(100%, 480px); margin:0 auto}
  .or-sky{
    display:block; width:100%; height:auto; aspect-ratio:1000/1400; border-radius:18px;
    background:#0a0820; touch-action:none; user-select:none; -webkit-user-select:none; cursor:crosshair;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 50px -24px rgba(0,0,0,.8);
  }
  .or-msg{
    position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); pointer-events:none;
    font-weight:900; font-size:26px; letter-spacing:-.01em; color:#fff; text-align:center; white-space:nowrap;
    text-shadow:0 2px 0 rgba(0,0,0,.4), 0 0 24px rgba(120,160,255,.8); opacity:0; transition:opacity .25s ease;
  }
  .or-msg.show{opacity:1}
  .or-msg small{display:block; font-size:14px; font-weight:700; opacity:.85; margin-top:4px}
  .or-stars{font-size:34px; letter-spacing:6px; margin:4px 0 6px; color:#ffd23f; text-align:center; text-shadow:0 0 18px rgba(255,210,63,.6)}
  .or-stars .off{color:var(--border); text-shadow:none}
  .rule.big p{font-size:15px; line-height:1.5}
  .rule.big .glyph{font-size:22px}
  .controls .btn[hidden]{display:none}
  #speedBtn.on{border-color:var(--accent); background:var(--accent-soft)}

  @media(max-width:520px){
    body.g-orbit .hud{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; margin-bottom:12px}
    body.g-orbit .stat{padding:8px 8px 8px 11px; min-width:0}
    body.g-orbit .stat .k{font-size:9.5px; letter-spacing:.06em}
    body.g-orbit .stat .v{font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  }