@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    background:#0d0d1a;
    background-image: radial-gradient(ellipse at 50% 0%, #1a004433 0%, transparent 70%),
                      radial-gradient(ellipse at 0% 100%, #00003322 0%, transparent 60%),
                      radial-gradient(ellipse at 100% 100%, #00330022 0%, transparent 60%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    font-family:'Press Start 2P', monospace;
    color:#ffffff;
    overflow:hidden;
  }
  #top-bar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:700px;
    padding:12px 0 8px;
  }
  .hud-item { text-align:center; }
  .hud-label { font-size:15px; color:#00ffff; margin-bottom:6px; letter-spacing:2px; }
  .hud-val { font-size:34px; color:#ffe000; text-shadow:0 0 12px #ffe000, 0 0 24px #ff990088; }
  #canvas-wrap { position:relative; }
  canvas { display:block; background:#080818; touch-action:none; user-select:none; }

  .screen {
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    background:rgba(8,8,24,0.97);
  }
  .screen.hidden { display:none; }
  .title {
    font-size:38px;
    color:#ffe000;
    text-shadow:0 0 20px #ff00ff, 0 0 40px #00ffffaa, 0 0 80px #ff00ff44;
    margin-bottom:6px;
    letter-spacing:6px;
  }
  .title span { color:#ff6600; text-shadow:0 0 20px #ff6600; }
  .subtitle { font-size:11px; color:#ff00ff; margin-bottom:28px; letter-spacing:3px; }
  .name-input {
    background:#200010;
    border:3px solid #ff00ff;
    color:#00ffff;
    font-family:'Press Start 2P', monospace;
    font-size:16px;
    padding:16px 20px;
    width:280px;
    outline:none;
    margin-bottom:10px;
    letter-spacing:2px;
    text-transform:uppercase;
  }
  .name-input::placeholder { color:#1a5533; }
  .err { font-size:10px; color:#ff4488; height:18px; margin-bottom:10px; }
  .btn {
    font-family:'Press Start 2P', monospace;
    font-size:17px;
    padding:22px 40px;
    background:#6600cc;
    border:none;
    color:#000;
    cursor:pointer;
    margin:8px;
    letter-spacing:1px;
    transition:background .1s, transform .05s;
    border-radius:10px;
    min-width:260px;
  }
  .btn:hover { background:#9900ff; transform:scale(1.03); box-shadow:0 0 20px #9900ff88; }
  .btn:active { transform:scale(0.97); }
  .btn.blue { background:transparent; border:3px solid #ff6600; color:#ff6600; }
  .btn.blue:hover { background:#ff660022; }
  .big-text { font-size:28px; margin-bottom:14px; letter-spacing:3px; }
  .score-text { font-size:16px; color:#ffe000; margin-bottom:28px; }
  .hint { font-size:11px; color:#ff00ff; line-height:2.6; text-align:center; margin-top:20px; }
  #rivals-bar {
    width:700px;
    padding:6px 0 4px;
    display:flex;
    align-items:center;
    gap:0;
    flex-wrap:wrap;
    border-top:1px solid #111;
  }
  .rival { display:flex; align-items:center; gap:8px; font-size:9px; margin-right:18px; }
  .rdot { width:9px; height:9px; border-radius:50%; }
  .rscore { color:#ffe000; }
  #fb-dot {
    margin-left:auto;
    font-size:9px;
    display:flex; align-items:center; gap:6px;
  }
  .dot { width:6px; height:6px; border-radius:50%; animation:blink 2s infinite; }
  .dot.on { background:#ff00ff; }
  .dot.off { background:#f00; }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

  .how-card {
    display:flex;
    align-items:flex-start;
    gap:18px;
    background:rgba(255,0,255,0.07);
    border:1.5px solid rgba(0,255,255,0.4);
    border-radius:8px;
    padding:16px 18px;
    margin-bottom:12px;
    width:100%;
    max-width:480px;
    text-align:left;
  }
  .how-icon {
    font-size:32px;
    line-height:1;
    min-width:44px;
    text-align:center;
    margin-top:2px;
  }
  .how-body { flex:1; }
  .how-title {
    font-family:'Press Start 2P', monospace;
    font-size:13px;
    color:#00ffff;
    margin-bottom:10px;
    letter-spacing:1px;
  }
  .how-text {
    font-family:Arial, sans-serif;
    font-size:16px;
    color:#e0ffff;
    line-height:2.0;
  }
  .how-text strong { color:#ffe000; }
  .how-text em { color:#ff6600; font-style:normal; }

  #game-row {
    display:flex;
    align-items:flex-start;
    justify-content:center;
  }

  /* ── MOBILE ── */

  @media (max-width: 600px) {
    body { justify-content:flex-start; overflow-y:auto; }
    #top-bar { width:100vw; padding:8px 10px 4px; box-sizing:border-box; }
    .hud-val { font-size:16px; }
    .hud-label { font-size:7px; }
    #canvas-wrap { width:100vw; }
    #canvas-wrap canvas { width:100vw !important; height:100vw !important; }
    #rivals-bar { width:100vw; font-size:7px; }
    .title { font-size:22px; letter-spacing:3px; }
    .subtitle { font-size:8px; }
    .name-input { width:80vw; font-size:12px; }
    .btn { min-width:160px; font-size:11px; padding:13px 18px; }
    .big-text { font-size:20px; }
    .score-text { font-size:13px; }
    .hint { font-size:9px; }
    .how-card { padding:12px; }
    .how-text { font-size:13px; }
  }

  #desktop-hint { display:none; }