/* App */
  #app { display: flex; flex-direction: column; height: 100vh; }
  #bar {
    display: flex; align-items: center; gap: 14px; padding: 10px 16px;
    border-bottom: 1px solid #1b2742; background: linear-gradient(#0f1828, #0a111d);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.45); position: relative; z-index: 2;
  }
  #bar b { color: #5aa6ff; }
  #roomTag {
    font-size: 13px; font-weight: 600; color: #cfe0ff; background: #16233f;
    border: 1px solid #2a3a5e; padding: 3px 10px; border-radius: 999px;
  }
  .room-owner { font-size: 12px; color: #9fb0d0; font-style: italic; }
  #status { color: #9fb0d0; font-size: 14px; }
  .bar-actions { margin-left: auto; display: flex; gap: 8px; }
  /* The video-drawer toggle is mobile-only; on desktop the call is docked in #side. */
  #callBtn { display: none; }
  .icon {
    width: 38px; height: 38px; padding: 0; line-height: 1; font-size: 17px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; border: 1px solid #2a3a5e; background: #11203a;
    color: #dce7fb; cursor: pointer;
  }
  .icon:hover { background: #1a2c4d; }
  .icon:disabled { opacity: .4; cursor: not-allowed; }
  .icon.off { background: #3a1622; border-color: #6e2c3a; }
  .icon.danger { background: #2a1420; border-color: #5e2a36; }
  .icon.danger:hover { background: #3a1622; }
  .icon.act { background: #5aa6ff; color: #06122a; border-color: #5aa6ff; }
  /* push-to-talk: mic button glows green while held open */
  .icon.ptt { background: #16432a; border-color: #4fd08a; box-shadow: 0 0 0 2px rgba(79,208,138,.4); animation: pttPulse 1s ease-in-out infinite; }
  @keyframes pttPulse { 0%,100% { box-shadow: 0 0 0 2px rgba(79,208,138,.4); } 50% { box-shadow: 0 0 0 4px rgba(79,208,138,.15); } }
  .icon.busy { background: #3a2616; border-color: #6e4a2c; }
  /* styled hover tooltips for the top-bar icons (replaces the native title) */
  .icon { position: relative; }
  .icon[data-tip]::after {
    content: attr(data-tip); position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
    background: #0b1322; color: #e8eefc; border: 1px solid #2a3a5e; border-radius: 8px;
    padding: 5px 9px; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,.5); opacity: 0; pointer-events: none; z-index: 60;
    transition: opacity .12s ease .25s;
  }
  .icon[data-tip]::before {
    content: ""; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-bottom-color: #2a3a5e; opacity: 0; pointer-events: none; z-index: 60;
    transition: opacity .12s ease .25s;
  }
  .icon[data-tip]:hover::after, .icon[data-tip]:hover::before { opacity: 1; }
  /* keep the right-most tooltip on screen */
  .bar-actions .icon:last-child[data-tip]::after { left: auto; right: 0; transform: none; }

  #stage { flex: 1; display: flex; min-height: 0; }
  #worldWrap { flex: 1; position: relative; min-width: 0; overflow: hidden; }
  canvas {
    display: block; width: 100%; height: 100%; touch-action: none; cursor: grab;
    background: radial-gradient(130% 110% at 50% 22%, #16223c 0%, #0b1120 68%);
    image-rendering: pixelated; /* keep the pixel-art tileset crisp */
  }
  canvas.editing { cursor: crosshair; }

  /* Kart speed HUD (over the world while karting) */
  #kartHud {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    background: rgba(12,19,32,0.9); border: 1px solid #2a3a5e; color: #e8eefc;
    padding: 6px 14px; border-radius: 999px; font-size: 16px; font-weight: 800;
    z-index: 15; box-shadow: 0 6px 18px rgba(0,0,0,.5); letter-spacing: .02em;
  }
  #kartHud.boost { color: #6ef0a8; border-color: #2f6b48; }
  #kartHud.slow { color: #ffb0b0; border-color: #6e2c3a; }
  /* Connection-debug overlay (⚙️ → 🛠️). Read-only; clicks fall through to the world. */
  #debugPanel {
    position: absolute; top: 14px; left: 14px; z-index: 16; pointer-events: none;
    max-width: 320px; max-height: 70vh; overflow-y: auto;
    background: rgba(8,12,20,0.86); border: 1px solid #2a3a5e; border-radius: 10px;
    padding: 8px 10px; font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #cfe0ff; box-shadow: 0 8px 24px rgba(0,0,0,.55); white-space: normal;
  }
  #debugPanel .dbg-h { font-weight: 800; color: #fff; margin-bottom: 4px; }
  #debugPanel .dbg-self { color: #8fa6cf; margin-bottom: 6px; }
  #debugPanel .dbg-self.warn { color: #ffc14d; }
  #debugPanel .dbg-sig { color: #7e90b4; margin-top: 2px; word-break: break-all; }
  #debugPanel .dbg-row { border-left: 3px solid #3a4a6e; padding: 3px 0 3px 7px; margin: 4px 0; }
  #debugPanel .dbg-row b { color: #e8eefc; }
  #debugPanel .dbg-row.ok { border-color: #39d98a; }
  #debugPanel .dbg-row.warn { border-color: #ffc14d; }
  #debugPanel .dbg-row.err { border-color: #ff5a8a; }
  #debugPanel .dbg-row.idle { border-color: #3a4a6e; color: #8090b0; }
  #teamHud {
    position: absolute; top: 14px; right: 14px; display: flex; gap: 12px;
    background: rgba(12,19,32,0.9); border: 1px solid #2a3a5e; color: #e8eefc;
    padding: 6px 14px; border-radius: 999px; font-size: 16px; font-weight: 800;
    z-index: 15; box-shadow: 0 6px 18px rgba(0,0,0,.5);
  }
  #teamHud .r { color: #ff9b9b; } #teamHud .b { color: #9bc2ff; }
  #rlglHud {
    position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
    background: rgba(12,19,32,0.92); border: 2px solid #2a3a5e; color: #e8eefc;
    padding: 6px 16px; border-radius: 999px; font-size: 16px; font-weight: 800;
    z-index: 15; box-shadow: 0 6px 18px rgba(0,0,0,.5);
  }
  #rlglHud.green { border-color: #39d98a; color: #6ef0a8; }
  #rlglHud.red { border-color: #e2483a; color: #ff8f8f; }
  #rlglHud.out { border-color: #6e2c3a; color: #9aa3b8; }
  #handHud {
    position: absolute; top: 50%; left: 14px; transform: translateY(-50%); background: rgba(12,19,32,0.9);
    border: 1px solid #2a3a5e; color: #e8eefc; padding: 8px 12px; border-radius: 10px;
    font-size: 13px; font-weight: 600; line-height: 1.5; z-index: 15; box-shadow: 0 6px 18px rgba(0,0,0,.5);
  }

  /* Race HUD (top-left of the world): live lap + leaderboard */
  #raceHud {
    position: absolute; top: 14px; left: 14px; z-index: 15;
    background: rgba(12,19,32,0.86); border: 1px solid #2a3a5e; border-radius: 10px;
    padding: 8px 12px; font-size: 13px; color: #cfe0ff; min-width: 150px;
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
  }
  #raceHud .rh-live { font-weight: 800; color: #6ef0a8; margin-bottom: 5px; }
  #raceHud .rh-board > div { color: #9fb0d0; line-height: 1.5; }
  #raceHud .rh-board > div.me { color: #ffd45a; font-weight: 700; }
  #raceHud .rh-reset {
    margin-top: 6px; width: 100%; padding: 4px 8px; cursor: pointer; font-size: 12px;
    border-radius: 6px; border: 1px solid #5e2a36; background: #2a1420; color: #ffd7df;
  }
  #raceHud .rh-reset:hover { background: #3a1622; }

  /* Bottom-centre dock: call controls + emoji reactions, side by side */
  #dock {
    position: absolute; left: 0; right: 0; bottom: 14px; padding: 0 12px;
    display: flex; gap: 10px; align-items: center; justify-content: center;
    flex-wrap: wrap; z-index: 16; pointer-events: none;
  }
  #callCtl, #reactBar {
    pointer-events: auto;
    display: flex; gap: 6px; padding: 6px 8px;
    background: rgba(12,19,32,0.82); border: 1px solid #2a3a5e; border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
  }
  /* the call controls reuse .icon but sit at the reaction-bar's compact size */
  #callCtl .icon { width: 34px; height: 34px; font-size: 17px; border-radius: 8px; }
  #reactBar button {
    width: 34px; height: 34px; padding: 0; font-size: 18px; cursor: pointer;
    border-radius: 8px; border: 1px solid transparent; background: transparent; line-height: 1;
  }
  #reactBar button:hover { background: #1a2c4d; border-color: #2a3a5e; }
  /* tooltips point UP here (the dock hugs the bottom edge) */
  #callCtl .icon[data-tip]::after { top: auto; bottom: calc(100% + 9px); }
  #callCtl .icon[data-tip]::before {
    top: auto; bottom: calc(100% + 3px); border-bottom-color: transparent; border-top-color: #2a3a5e;
  }