/* swrld palette, layered over the shared room stylesheet. colors pulled from the swrld logo (cyan pixel figure, black outline, deep blue glow). */
:root {
  --bg: #003fc2; /* logo blue */
  --bg-2: #002a8a;
  --panel: #001f6e;
  --line: #000814; /* the figure's black outline */
  --ink: #ffffff;
  --muted: #b8d8ff;
  --accent: #5ee4fd; /* the figure */
  --accent-deep: #000814;
  --glow: #5ee4fd; /* the cyan glow around the figure */
}
body {
  background-color: #003fc2;
  background-image:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(94,228,253,.28), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0,16,92,.75)),
    linear-gradient(rgba(0,8,20,.08) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0,8,20,.08) 2px, transparent 2px);
  background-size: auto, auto, 32px 32px, 32px 32px;
  background-attachment: fixed;
}
.brand-name { color: #dff9ff; text-shadow: 2px 2px 0 var(--line), 0 0 12px var(--glow); }
.room-hud { background: rgba(0,10,40,.85); }
.ca-sep { box-shadow: 1px 0 0 #1a4fb8; }
.txt { color: #eefbff; }
.steps p, .safe, .mobile-hint p { color: #d4ecff; }
.online li { border-bottom-color: #0f3a9c; }
.del, .mod-tools button { border-color: #1f56c4; }
.field input { border-color: #1f56c4; }
.composer input::placeholder { color: #86a9e0; }
.modal::backdrop { background: rgba(0,8,30,.75); }
.tag-dev { background: #52e07f; }

/* ---------- activities ---------- */
.steps { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0,1fr); } }
.room-tip { margin-bottom: 0; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.acts .btn { font-size: 12px; padding: 7px 12px; min-height: 36px; }
.acts .btn.off { opacity: .6; }
.race-status { font-family: var(--f-pixel); font-size: 11px; color: #ffd84a; text-shadow: 1px 1px 0 var(--line); }
.btn-run {
  width: 100%; margin-top: 10px; min-height: 64px; font-size: 20px;
  background: #52e07f; color: var(--line); user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.btn-run:disabled { background: #ffd84a; opacity: 1; }
.btn-run.hit { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--line); }

.panel-tabs .tab { padding: 10px 11px; }
.games { padding: 10px 12px 16px; }
.board-h { font-family: var(--f-pixel); font-size: 12px; margin: 10px 0 6px; color: var(--glow); font-weight: 400; }
.board-sub { color: var(--muted); font-size: 10px; margin-left: 4px; }
.board { list-style: none; margin: 0; padding: 0; }
.board li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #0f3a9c; }
.board li .time { margin-left: auto; font-size: 11px; color: var(--ink); }
.board .rank { font-family: var(--f-pixel); font-size: 10px; color: var(--muted); width: 16px; }
.board-empty { margin: 0 0 6px; font-size: 13px; color: var(--muted); }

.log li.ev { display: flex; gap: 8px; align-items: baseline; padding: 4px 12px; }
.log li.ev .ev-txt { font-family: var(--f-pixel); font-size: 10.5px; color: #ffd84a; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.log li.ev-bar .ev-txt { color: var(--glow); }
.log li.ev-arcade .ev-txt { color: #52e07f; }

.bar-menu { display: grid; gap: 8px; }
.bar-menu .btn { justify-content: flex-start; }
.drink-dot { width: 12px; height: 14px; border: 2px solid var(--line); flex: none; }
.modal-arcade { width: 380px; }
#arcadeCanvas { width: 100%; aspect-ratio: 160 / 200; display: block; image-rendering: pixelated; border: 2px solid var(--line); background: #000814; cursor: none; }
.arcade-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.arcade-score { font-family: var(--f-pixel); font-size: 13px; color: var(--glow); }