.timer-badge.show { display:inline-block; }
  .timer-badge.urgent { background:#fef3c7; color:#b45309; }
  .timer-badge.critical { background:#fee2e2; color:#dc2626; animation:timerPulse .7s ease-in-out infinite; }
  @keyframes timerPulse { 50% { transform:translateY(-50%) scale(1.06); } }
  .level-badge { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.15px; color:var(--muted); }
  .level-progress { width:112px; height:5px; overflow:hidden; border-radius:999px; background:var(--line); }
  .level-progress-fill { display:block; height:100%; width:4%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .25s ease; }

  /* ── HUD (floating icon dock) ── */
  .hud {
    position: relative; flex-shrink: 0;
    width:min(100%, 380px); margin:10px auto 0; background:transparent;
    border:0; box-shadow:none;
    padding:0 10px calc(12px + env(safe-area-inset-bottom,0px));
    z-index: 100;
  }
  .hud-btns {
    position: static; transform: none;
    display:flex; align-items:center; justify-content:center; gap:22px; z-index:5;
  }
  .icon-btn {
    position:relative; width:46px; height:46px; flex:0 0 46px; border-radius:50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px; line-height: 1; padding: 0;
    background:#f8fafc; border:1px solid var(--line);
    box-shadow:0 3px 8px rgba(15,23,42,.10);
    cursor: pointer; transition: transform .15s cubic-bezier(.34,1.56,.64,1);
  }
  .icon-btn:active { transform: scale(.88); }
  .icon-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
  .icon-btn.hint { color:inherit; border-color:var(--line); background:#f8fafc; }
  .icon-badge {
    position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px;
    border-radius: 999px; background: var(--accent2); color: #fff;
    font-family:'Sora',sans-serif; font-size:9px; font-weight:800;
    display: flex; align-items: center; justify-content: center;
    box-shadow:0 1px 2px rgba(0,0,0,.18); border:1px solid #fff;
  }

  /* ── Name gate ── */
  .namegate-overlay {
    display: none; position: fixed; inset: 0; z-index: 400;
    background: rgba(15,23,42,.72); backdrop-filter: blur(4px);
    align-items: center; justify-content: center; padding: 20px;
  }
  .namegate-overlay.show { display: flex; }
  .namegate-card {
    background: var(--surface); border-radius: 18px; padding: 26px 22px;
    max-width: 340px; width: 100%; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
  }
  .namegate-logo { max-height: 46px; margin-bottom: 10px; }
  .namegate-title { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
  .namegate-sub { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
  .namegate-input {
    width: 100%; padding: 12px 14px; border-radius: 10px;
    border: 1.5px solid var(--line); font-family: 'Sora', sans-serif;
    font-size: 15px; font-weight: 700; text-align: center; color: var(--ink);
    margin-bottom: 8px;
  }
  .namegate-input:focus { outline: none; border-color: var(--accent); }
  .namegate-input.shake-input { animation: shakeInput .3s; border-color: var(--danger); }
  .namegate-error { font-size: 12px; font-weight: 700; color: var(--danger); min-height: 16px; margin-bottom: 6px; opacity: 0; transition: opacity .2s; }
  .namegate-error.show { opacity: 1; }
  @keyframes shakeInput { 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }

  @media (max-width: 640px) {
    .board-wrap { width: 100%; }
    .level-bar { margin-bottom:8px; }
    .hud { width:100%; margin-top:8px; padding-inline:10px; }
    .icon-btn { width:44px; height:44px; flex-basis:44px; font-size:18px; }
    .hud-btns { gap:22px; }
    .timer-badge { right:2px; min-width:72px; font-size:11px; }
  }
  @media (max-width: 340px) {
    .hud-btns { gap:18px; }
    .level-bar { margin-bottom:12px; }
    .timer-badge.show { position:static; transform:none; margin-left:12px; }
    @keyframes timerPulse { 50% { transform:scale(1.06); } }
  }
  .timed-intro { display:none; position:absolute; inset:0; z-index:40; background:rgba(248,250,252,.96); align-items:center; justify-content:center; text-align:center; padding:24px; }
  .timed-intro.show { display:flex; }
  .timed-intro-card { max-width:300px; }
  .timed-intro-title { font-size:22px; font-weight:800; color:#dc2626; }
  .timed-intro-time { font-size:38px; font-weight:800; font-variant-numeric:tabular-nums; margin:12px 0; color:var(--ink); }
  .timed-intro-text { font-size:13px; color:var(--muted); line-height:1.5; }