:root {
  --navy: #0B2B5B;
  --navy-deep: #071a38;
  --navy-2: #12396f;
  --gold: #E8B031;
  --gold-2: #f6d27a;
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, .68);
  --line: rgba(255, 255, 255, .14);
  --c0: #E2445C; /* ▲ */
  --c1: #2F80ED; /* ◆ */
  --c2: #D99A14; /* ● */
  --c3: #22A06B; /* ■ */
  --ok: #2ecc71;
  --ng: #ff5a6e;
  --font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-num: "Montserrat", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--navy-deep);
  -webkit-font-smoothing: antialiased;
}
.bg {
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(232, 176, 49, .22), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(47, 128, 237, .25), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 70%);
}
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.gold { color: var(--gold); }
.hidden { display: none !important; }
.shape::before { display: inline-block; }
.s0::before { content: "▲"; }
.s1::before { content: "◆"; }
.s2::before { content: "●"; }
.s3::before { content: "■"; }
.b0 { background: var(--c0); }
.b1 { background: var(--c1); }
.b2 { background: var(--c2); }
.b3 { background: var(--c3); }
.conn-badge {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  background: #c0392b; color: #fff; font-size: 13px; padding: 6px 14px; border-radius: 999px;
  z-index: 100; box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
@keyframes pop { 0% { transform: scale(.6); opacity: 0 } 60% { transform: scale(1.06); opacity: 1 } 100% { transform: scale(1) } }
@keyframes rise { from { transform: translateY(30px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }