/* A3Tech Robotics - kid-friendly theme for Battle Mode (battle2.html).
   This page is built on CSS colour variables, so the whole dark palette is flipped to a
   bright one here, then individual spots that had hard-coded dark colours are fixed.
   Loaded AFTER the page's own <style>. To undo: remove the <link href="css/kids-battle.css">. */
:root {
  --k-ink:#2B2A5E; --k-soft:#5B5A9A; --k-purple:#8E5CF7; --k-green:#2FCB6E;
  --k-red:#FF5C6C; --k-yellow:#FFC233; --k-blue:#3AA6FF;
  --k-font:'Fredoka','Baloo 2','Trebuchet MS','Comic Sans MS',system-ui,sans-serif;

  --bg-dark:#EAF4FF;
  --bg-panel:#FFFFFF;
  --bg-panel-trans:rgba(255,255,255,.93);
  --primary:#3AA6FF;
  --primary-glow:rgba(58,166,255,.35);
  --accent:#8E5CF7;
  --success:#2FCB6E;
  --danger:#FF5C6C;
  --warning:#FFB000;
  --text-main:#2B2A5E;
  --text-muted:#5B5A9A;
  --border:#CDBBFF;
  --radius:24px;
  --radius-sm:14px;
}
html { font-size: 17px; }
body, input, select, button, textarea { font-family: var(--k-font) !important; }
body {
  color: var(--k-ink) !important;
  background:
    radial-gradient(circle at 10% 14%, rgba(255,255,255,.45) 0 7px, transparent 8px),
    radial-gradient(circle at 90% 86%, rgba(255,255,255,.45) 0 10px, transparent 11px),
    linear-gradient(160deg, #7FD3FF 0%, #B79BFF 52%, #FFA8E0 100%) fixed !important;
}
body::before, .screen::before { opacity: 0 !important; }   /* old dark grid pattern */

/* fonts: play-friendly everywhere except real code output */
h1, h2, h3, #room-code-display, #timer-display, #countdown-num, #go-title, .lang-tag, .plang, .field-label { font-family: var(--k-font) !important; }
#console-out { font-family: 'Fira Code', monospace !important; }

h1 { color:#fff !important; letter-spacing:0 !important; font-size:3.4rem !important; text-shadow:0 4px 0 #5B33C2, 0 8px 0 rgba(43,42,94,.25) !important; }
h1 span { color: var(--k-yellow) !important; }
.lobby-card, .player-slot, #room-code-display, #hud, .hud-player, #game-left, #console-wrap {
  border-width: 4px !important; border-style: solid !important; border-color: #CDBBFF !important;
  box-shadow: 0 8px 0 rgba(43,42,94,.16) !important;
}
.lobby-card { background:#fff !important; }
.lobby-card h2 { color: var(--k-purple) !important; letter-spacing:0 !important; font-size:1rem !important; text-transform:uppercase; }
.field-label { font-size:1rem !important; color:var(--k-ink) !important; font-weight:600 !important; }

/* inputs */
input[type="text"], select {
  background:#F4F0FF !important; color:var(--k-ink) !important; border:3px solid #CDBBFF !important;
  border-radius:16px !important; font-size:1.05rem !important; padding:.7rem 1rem !important;
}
input[type="text"]:focus, select:focus { border-color:var(--k-purple) !important; box-shadow:0 0 0 4px rgba(142,92,247,.2) !important; outline:none; }

/* choice buttons (language / lives / coding style) */
.lang-btn, .mode-btn {
  background:#fff !important; color:var(--k-ink) !important; border:3px solid #CDBBFF !important;
  border-radius:999px !important; font-size:1rem !important; font-weight:600 !important; box-shadow:0 4px 0 rgba(43,42,94,.16);
}
.lang-btn:hover, .mode-btn:hover { background:#F4F0FF !important; transform:translateY(-2px); }
.lang-btn.active.robotc { background:#EFE6FF !important; border-color:var(--k-purple) !important; color:#6A3FD8 !important; }
.lang-btn.active.python { background:#DDF8E8 !important; border-color:var(--k-green) !important; color:#13804A !important; }
.mode-btn.active { background:#DFF0FF !important; border-color:var(--k-blue) !important; color:#1B6FBF !important; }

/* action buttons: big, round, chunky */
.btn, .btn-ready, .gbtn {
  border-radius:999px !important; font-weight:700 !important; font-size:1.1rem !important; letter-spacing:0 !important;
  border:none !important; box-shadow:0 6px 0 rgba(0,0,0,.22) !important; color:#fff !important;
  transition: transform .12s, box-shadow .12s, filter .12s !important;
}
.btn:hover, .btn-ready:hover:not(:disabled), .gbtn:hover:not(:disabled) { transform:translateY(-2px) scale(1.03); filter:brightness(1.08); }
.btn:active, .btn-ready:active, .gbtn:active:not(:disabled) { transform:translateY(5px) !important; box-shadow:0 1px 0 rgba(0,0,0,.22) !important; }
.btn-red { background:var(--k-red) !important; } .btn-blue { background:var(--k-blue) !important; }
.btn-ghost { background:#fff !important; color:var(--k-ink) !important; border:3px solid #CDBBFF !important; box-shadow:0 5px 0 rgba(43,42,94,.16) !important; }
.btn-ghost:hover { background:#F4F0FF !important; }
.btn-ready { background:var(--k-green) !important; } .btn-ready.unready { background:var(--k-red) !important; }
.gbtn:disabled { opacity:.55 !important; filter:none !important; background:#B8B7D9 !important; box-shadow:none !important; }

/* language tags + room code */
.tag-rc { background:#EFE6FF !important; color:#6A3FD8 !important; border:2px solid var(--k-purple) !important; border-radius:999px !important; }
.tag-py { background:#DDF8E8 !important; color:#13804A !important; border:2px solid var(--k-green) !important; border-radius:999px !important; }
#room-code-display { background:#fff !important; color:var(--k-purple) !important; font-weight:700; }
#room-screen h2, #room-screen p, #room-screen .hint { color:#fff !important; text-shadow:0 3px 0 rgba(43,42,94,.35); }
.player-slot { background:#fff !important; }
.player-slot .plang { background:#F4F0FF !important; color:var(--k-soft) !important; border-radius:999px !important; }

/* in-game */
#hud, .hud-player { background:rgba(255,255,255,.95) !important; }
.hud-player.me { border-color:var(--k-red) !important; }
#timer-display { color:#E08A00 !important; text-shadow:none !important; font-size:1.5rem !important; }
#console-out { background:#14172E !important; color:#7CF5A8 !important; border-radius:14px !important; border:3px solid var(--k-purple) !important; }
#countdown-overlay, #gameover-overlay { background:rgba(255,255,255,.88) !important; }
#countdown-num { color:var(--k-purple) !important; text-shadow:0 5px 0 #E4D9FF !important; font-size:7rem !important; }
#countdown-label { color:var(--k-soft) !important; letter-spacing:0 !important; font-size:1.3rem !important; }
#go-title { color:#E08A00 !important; text-shadow:0 4px 0 #FFE9B0; }
#lobby-error { color:#C21F33 !important; font-weight:600; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* in-game screen leftovers from the dark theme */
#game-screen { background: transparent !important; }
#editor-container { border: 4px solid var(--k-purple) !important; border-radius: 20px !important; }
#editor-label { background: linear-gradient(90deg, var(--k-purple), #B07CFF) !important; color:#fff !important; font-size:.95rem !important; border-bottom:none !important; letter-spacing:0 !important; }
#editor-lang-tag { background: rgba(255,255,255,.25) !important; color:#fff !important; border-radius:999px !important; padding:3px 12px !important; font-size:.8rem !important; }
#editor-label a, #editor-label button { color:#fff !important; background: rgba(255,255,255,.22) !important; border:none !important; border-radius:999px !important; box-shadow:none !important; }
#game-left { border: 4px solid #CDBBFF !important; }

/* Uniform "back to menu" button (overrides Gemini inline red styles) */
a[style*="#E74C3C"][href$="index.html"] { background: #FFC233 !important; color: #2B2A5E !important; border: none !important; border-radius: 999px !important; padding: 8px 16px !important; font-size: 14px !important; font-weight: 700 !important; box-shadow: 0 4px 0 rgba(43,42,94,.25) !important; text-decoration: none !important; }