/* JOINR ARENA hub: its own colours (each arena brings its own when you enter it), the arena cards and the chips on
   the landing page. Shell styles live in platform/platform.css. */
body[data-theme="hub"] {
  --bg: #05031a;
  --accent: #4df3ff;
  --accent-hi: #d6fcff;
  --accent-lo: #138a99;
  --accent-ink: #022a30;
  --cyan: #ff5cc8;
  --glow-a: rgba(77, 243, 255, 0.6);
  --glow-a2: rgba(60, 140, 255, 0.4);
  --glow-b: rgba(255, 92, 200, 0.6);
  --glow-b2: rgba(200, 60, 255, 0.4);
  --border: #5a46e0;
}
canvas#game { touch-action: none; }
.hubGrid { grid-template-columns: 1.25fr 1.3fr 0.9fr; }
.arenaCards { display: flex; flex-direction: column; gap: 12px; }
.arenaCard { --c: #fff; display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; row-gap: 5px; align-items: center; text-align: left; padding: 12px; background: rgba(0, 0, 0, 0.4); border: 2px solid var(--c); color: #cfd4f5; box-shadow: 0 0 14px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 24px color-mix(in srgb, var(--c) 16%, transparent); transition: transform .08s, box-shadow .08s; }
.arenaCard:hover, .arenaCard.gpfocus { transform: scale(1.02); box-shadow: 0 0 26px var(--c), inset 0 0 30px color-mix(in srgb, var(--c) 25%, transparent) !important; }
.arenaCard img { grid-row: 1 / span 4; width: 64px; height: 64px; image-rendering: pixelated; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.arenaCard .t { font-size: 12px; color: var(--c); text-shadow: 0 0 10px var(--c); }
.arenaCard .b { font-size: 7px; line-height: 1.7; }
.arenaCard .live { font-size: 7px; color: #6b73a6; }
.arenaCard .live.on { color: #7dff4d; text-shadow: 0 0 6px #7dff4d; }
.arenaCard .best { font-size: 7px; color: #ffe14d; min-height: 8px; }
.arenaChips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0; margin: 16px 0 0; }
.arenaChips li { --c: #fff; flex: 1 1 200px; max-width: 300px; display: grid; grid-template-columns: 40px 1fr; column-gap: 10px; align-items: center; text-align: left; padding: 9px; border: 2px solid var(--c); background: rgba(0, 0, 0, 0.35); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 45%, transparent); }
.arenaChips img { grid-row: 1 / span 2; width: 40px; height: 40px; }
.arenaChips b { font-size: 9px; color: var(--c); text-shadow: 0 0 8px var(--c); }
.arenaChips span { font-size: 7px; line-height: 1.6; color: #cfd4f5; }
.lobbyHead #lobbyLogo { flex: 1; }
@media (max-width: 900px) { .hubGrid { grid-template-columns: 1fr; } }