:root {
  --robot-size: 15vmin;
  --bg: #0b0f19;
  --card: #12182a;
  --muted: #93a0b5;
  --accent: #34d399;
  --danger: #f472b6;
}

html, body {
  width: 100%; height: 100%; margin: 0; overflow: hidden;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg); color: #e5ecff;
}

.hidden { display: none !important; }

/* Start, Control, & Game Over Screens */
#start-screen, #game-over-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(11, 15, 25, 0.95); z-index: 200;
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
#start-screen h1, #game-over-screen h2, #control-selection-screen h2 { font-size: 8vmin; color: var(--accent); margin-bottom: 3vmin; }
#control-selection-screen { z-index: 201; }
#control-selection-screen h2 { font-size: 5vmin; }
#game-over-screen h2 { color: var(--danger); margin-bottom: 1vmin;}
#game-over-screen p { font-size: 2.5vmin; color: var(--muted); }
.mode-selection button, #restart-button, #start-button, #final-start-button {
    font-size: 3vmin; padding: 1.5vmin 3vmin; cursor: pointer;
    background: var(--card); border: 1px solid rgba(255, 255, 255, .1);
    color: white; border-radius: 1.5vmin; transition: background-color 0.2s;
    margin: 0;
}
.mode-selection { display: flex; gap: 2vmin; }
#restart-button { margin-top: 3vmin; }
.mode-selection button:hover, #restart-button:hover, #start-button:hover, #final-start-button:hover { background-color: #26387a; }
#winner-text span { vertical-align: middle; }
#final-start-container { margin-top: 3vmin; }
#final-start-button { font-size: 4vmin; padding: 2vmin 4vmin; background-color: var(--accent); color: var(--card); font-weight: bold; }

/* Layout Umum */
.wrap { width: 100%; height: 100%; padding: 2vmin; box-sizing: border-box; display: flex; flex-direction: column; }
.main-layout { display: flex; flex-grow: 1; min-height: 0; margin-top: 1.5vmin; }
.game-column { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }

/* TATA LETAK 1 PLAYER */
#single-player-ui .header { text-align: center; }
#single-player-ui h1 { font-size: 4vmin; margin: 0; color: var(--accent); }
#single-player-ui .sub { font-size: 1.8vmin; color: var(--muted); margin: 0; }
.status-bar-container-sp { display: flex; gap: 2vmin; align-items: flex-start; margin-top: 1vmin; padding: 1vmin 2vmin; background-color: var(--card); border-radius: 1.5vmin; }

/* TATA LETAK 2 PLAYER */
.battle-ui-container { display: flex; justify-content: space-between; align-items: center; gap: 2vmin; background-color: var(--card); padding: 1.5vmin; border-radius: 1.5vmin; }
.player-ui { flex-basis: 45%; display: flex; flex-direction: column; gap: 1vmin; }
#player2-ui { align-items: flex-end; }
#player2-ui .account-info { flex-direction: row-reverse; }
.battle-divider { flex-shrink: 0; text-align: center; }
.battle-divider h1 { font-size: 3vmin; margin: 0; color: var(--accent); }
.battle-divider .sub-header { font-size: 1.8vmin; color: var(--muted); margin: 0; }

/* Komponen UI Bersama */
.account-info { font-size: 1.5vmin; font-weight: 600; color: var(--muted); background: var(--bg); padding: 0.5vmin 1vmin; border-radius: 0.8vmin; display: inline-flex; align-items: center; gap: 1vmin; margin-bottom: 1vmin; }
.ui-robot-head { width: 2.5vmin; height: 2.5vmin; }
.energy-section { width: 100%; position: relative; flex-grow: 1; min-width: 0; }
.effect-display { display: none !important; }
.status-label { font-size: 1.5vmin; font-weight: 600; color: var(--muted); letter-spacing: 1px; margin-bottom: 0.5vmin; }
.status-bar { width: 100%; height: 3vmin; background-color: #0f1528; border: 1px solid rgba(255,255,255,.1); border-radius: 1.2vmin; padding: 0.4vmin; }
.bar { width: 100%; height: 100%; background: linear-gradient(90deg, #34d399, #60a5fa); border-radius: 0.8vmin; transition: width 0.3s ease-out, background-color 0.3s; }
.energy-text { position: absolute; top: 0; font-size: 1.8vmin; font-weight: bold; color: white; }
#player1-ui .energy-text, #single-player-ui .energy-text { left: auto; right: 2vmin; }
#player2-ui .energy-text { right: 2vmin; }

/* Stage, Robot, Countdown */
.stage-container { width: 100%; flex-grow: 1; border-radius: 1.5vmin; border: 1px dashed rgba(255,255,255,.1); background: radial-gradient(circle at 50% 50%, rgba(52,211,153,.06), transparent 60%); position: relative; overflow: hidden; }
.robot-stage { width: var(--robot-size); height: var(--robot-size); position: absolute; transform-origin: top left; will-change: transform; transition: filter 0.5s ease-out; }
.robot-stage.shielded { filter: drop-shadow(0 0 1vmin #fef08a) drop-shadow(0 0 2vmin #fef08a); animation: shield-pulse 1s infinite alternate; }
@keyframes shield-pulse { to { filter: drop-shadow(0 0 1.5vmin #fef08a) drop-shadow(0 0 3vmin #fef08a); } }
.countdown-timer { position: absolute; font-size: 10vmin; font-weight: bold; color: white; text-shadow: 0 0 1.5vmin black; z-index: 150; pointer-events: none; transform: translate(-50%, -50%); animation: countdown-pulse 1s; }
@keyframes countdown-pulse { from { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.magnet-attract-line { position: absolute; background: linear-gradient(to left, transparent, rgba(147, 197, 253, 0.7)); height: 2px; transform-origin: left center; pointer-events: none; border-radius: 2px; opacity: 0; animation: magnet-line-fade 0.3s ease-out; }
@keyframes magnet-line-fade { from { opacity: 1; } to { opacity: 0; } }

.effect-timer.on-stage {
    position: absolute;
    transform: translateX(-50%);
    background: rgba(11, 15, 25, 0.8);
    border: 1px solid rgba(255,255,255,.1);
    z-index: 160;
    pointer-events: none;
    font-size: 2.5vmin;
    padding: 0.5vmin 1vmin;
    border-radius: 1vmin;
    font-weight: bold;
}
.effect-timer.on-stage .time { color: white; }

/* Obstacles */
.obstacle { position: absolute; width: calc(var(--robot-size) / 3); height: calc(var(--robot-size) / 3); border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--robot-size) / 6); font-weight: bold; color: white; user-select: none; box-shadow: 0 1vmin 2vmin rgba(0, 0, 0, 0.4); }
.obstacle.plus { background: var(--accent); border: 0.3vmin solid #a7f3d0; }
.obstacle.minus { background: var(--danger); border: 0.3vmin solid #fbcfe8; }
.obstacle.bomb { background: #9333ea; border: 0.3vmin solid #e9d5ff; font-size: calc(var(--robot-size) / 5); }
.obstacle.energy { background: #facc15; border: 0.3vmin solid #fef08a; font-size: calc(var(--robot-size) / 5); }
.obstacle.potion-plus { background: #22c55e; border: 0.3vmin solid #bbf7d0; font-size: calc(var(--robot-size) / 5); }
.obstacle.potion-minus { background: #ef4444; border: 0.3vmin solid #fecaca; font-size: calc(var(--robot-size) / 5); }
.obstacle.shield { background: #38bdf8; border: 0.3vmin solid #bae6fd; font-size: calc(var(--robot-size) / 5); }
.obstacle.magnet-plus { background: #ef4444; border: 0.3vmin solid #fecaca; font-size: calc(var(--robot-size) / 4); }
.obstacle.magnet-minus { background: #3b82f6; border: 0.3vmin solid #bfdbfe; font-size: calc(var(--robot-size) / 4); }

/* Floating Text */
.floating-text { position: absolute; font-size: 3vmin; font-weight: bold; user-select: none; pointer-events: none; animation: float-up 1.s ease-out forwards; text-shadow: 0 0 5px black; }
.floating-text.plus { color: #a7f3d0; }
.floating-text.minus { color: #fbcfe8; }
@keyframes float-up { to { transform: translateY(-8vmin); opacity: 0; } }

/* D-PAD BARU */
.dpad-container { position: fixed; bottom: 3vmin; width: 22vmin; height: 22vmin; max-width: 150px; max-height: 150px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; opacity: 0.6; z-index: 100; }
#dpad-left-container { left: 3vmin; }
#dpad-right-container { right: 3vmin; }
.dpad-button { background: rgba(42, 58, 120, 0.8); border: 1px solid rgba(62, 82, 161, 0.9); color: white; font-size: 3vmin; border-radius: 2vmin; -webkit-tap-highlight-color: transparent; user-select: none; grid-column: 2; }
.dpad-button[data-key="up"] { grid-row: 1; }
.dpad-button[data-key="left"] { grid-row: 2; grid-column: 1; }
.dpad-button[data-key="down"] { grid-row: 3; }
.dpad-button[data-key="right"] { grid-row: 2; grid-column: 3; }
.score-display {
  font-size: 1.8vmin;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0.5vmin;
}

#player2-ui .score-display {
  text-align: right;
}