*,
*::before,
*::after {
box-sizing: border-box;
}

html,
body {
margin: 0;
padding: 0;
height: 100%;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
}

/* Dark theme (default) */
body[data-theme="dark"] {
background: #050814;
color: #ffffff;
}

body[data-theme="dark"] #game-container {
background: radial-gradient(circle at top, #111a3a, #050814 60%);
}

body[data-theme="dark"] #game-canvas {
background: #050814;
border: 2px solid #1e2a5a;
}

body[data-theme="dark"] .start-panel {
background: rgba(5, 8, 20, 0.95);
border: 1px solid #2d3a7a;
}

body[data-theme="dark"] .subtitle {
color: #c7d2ff;
}

body[data-theme="dark"] #start-button {
background: #ffcc00;
color: #111111;
}

body[data-theme="dark"] #start-button:hover {
background: #ffd633;
}

/* Light theme */
body[data-theme="light"] {
background: #f5f5f5;
color: #111111;
}

body[data-theme="light"] #game-container {
background: radial-gradient(circle at top, #ffffff, #e3e6f0 60%);
}

body[data-theme="light"] #game-canvas {
background: #ffffff;
border: 2px solid #d0d4e0;
}

body[data-theme="light"] .start-panel {
background: rgba(255, 255, 255, 0.98);
border: 1px solid #d0d4e0;
}

body[data-theme="light"] .subtitle {
color: #555b70;
}

body[data-theme="light"] #start-button {
background: #0074d9;
color: #ffffff;
}

body[data-theme="light"] #start-button:hover {
background: #1a8cff;
}

/* Coral theme */
body[data-theme="coral"] {
background: #1a0a12;
color: #ffffff;
}

body[data-theme="coral"] #game-container {
background: radial-gradient(circle at top, #2d1525, #1a0a12 60%);
}

body[data-theme="coral"] #game-canvas {
background: #1a0a12;
border: 2px solid #d161a2;
}

body[data-theme="coral"] .start-panel {
background: rgba(26, 10, 18, 0.95);
border: 1px solid #d161a2;
}

body[data-theme="coral"] .subtitle {
color: #fd9855;
}

body[data-theme="coral"] #start-button {
background: #d42c00;
color: #ffffff;
}

body[data-theme="coral"] #start-button:hover {
background: #fd9855;
color: #1a0a12;
}

/* Twilight theme */
body[data-theme="twilight"] {
background: #0a0a1a;
color: #ffffff;
}

body[data-theme="twilight"] #game-container {
background: radial-gradient(circle at top, #1a1a3a, #0a0a1a 60%);
}

body[data-theme="twilight"] #game-canvas {
background: #0a0a1a;
border: 2px solid #9B4F96;
}

body[data-theme="twilight"] .start-panel {
background: rgba(10, 10, 26, 0.95);
border: 1px solid #9B4F96;
}

body[data-theme="twilight"] .subtitle {
color: #d0a0d0;
}

body[data-theme="twilight"] #start-button {
background: #D60270;
color: #ffffff;
}

body[data-theme="twilight"] #start-button:hover {
background: #9B4F96;
}

/* Dawn theme */
body[data-theme="dawn"] {
background: #0f1a22;
color: #ffffff;
}

body[data-theme="dawn"] #game-container {
background: radial-gradient(circle at top, #1a2a35, #0f1a22 60%);
}

body[data-theme="dawn"] #game-canvas {
background: #0f1a22;
border: 2px solid #5BCEFA;
}

body[data-theme="dawn"] .start-panel {
background: rgba(15, 26, 34, 0.95);
border: 1px solid #F5A9B8;
}

body[data-theme="dawn"] .subtitle {
color: #5BCEFA;
}

body[data-theme="dawn"] #start-button {
background: #5BCEFA;
color: #0f1a22;
}

body[data-theme="dawn"] #start-button:hover {
background: #F5A9B8;
color: #0f1a22;
}

/* Rainbow theme */
body[data-theme="rainbow"] {
background: #0d0612;
color: #ffffff;
}

body[data-theme="rainbow"] #game-container {
background: radial-gradient(circle at top, #1a0d1f, #0d0612 60%);
}

body[data-theme="rainbow"] #game-canvas {
background: #0d0612;
border: 2px solid #7B2CBF;
}

body[data-theme="rainbow"] .start-panel {
background: rgba(13, 6, 18, 0.95);
border: 1px solid #7B2CBF;
}

body[data-theme="rainbow"] .subtitle {
color: #FFD166;
}

body[data-theme="rainbow"] #start-button {
background: #E63946;
color: #ffffff;
}

body[data-theme="rainbow"] #start-button:hover {
background: #7B2CBF;
}

#game-container {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

#game-canvas {
box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
/* Maintain a 16:9 aspect ratio and fit within viewport */
width: min(100vw, 100vh * 16 / 9);
height: auto;
}

/* Utility */
.hidden {
display: none !important;
}

/* Start screen overlay */
#start-screen {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.55);
}

body[data-theme="light"] #start-screen {
background: rgba(255, 255, 255, 0.65);
}

.start-panel {
border-radius: 16px;
padding: 32px 40px;
text-align: center;
min-width: 280px;
}

.title {
margin: 0 0 12px;
font-size: 2rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.subtitle {
margin: 0 0 24px;
font-size: 0.95rem;
}

.control-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 18px;
font-size: 0.9rem;
}

.control-row input[type="range"] {
width: 140px;
}

#player-names-row input[type="text"] {
padding: 6px 8px;
font-size: 0.9rem;
}

/* Buttons */
#start-button,
#play-button,
#pause-button,
#stop-button,
#highscore-continue-button {
padding: 8px 22px;
font-size: 0.9rem;
border-radius: 999px;
border: none;
cursor: pointer;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
transition: transform 0.08s ease-out, box-shadow 0.08s ease-out,
opacity 0.08s ease-out, background 0.08s ease-out;
}

#start-button:hover,
#play-button:hover,
#pause-button:hover,
#stop-button:hover,
#highscore-continue-button:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5);
}

#start-button:active,
#play-button:active,
#pause-button:active,
#stop-button:active,
#highscore-continue-button:active {
transform: translateY(1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

#play-button:disabled,
#pause-button:disabled,
#stop-button:disabled {
opacity: 0.4;
cursor: default;
box-shadow: none;
}

/* Game top bar (theme dropdown while playing) */
#game-top-bar {
position: absolute;
top: 20px;
left: 20px;
z-index: 10;
}

.theme-select {
padding: 6px 10px;
font-size: 0.9rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(0, 0, 0, 0.4);
color: inherit;
cursor: pointer;
}

body[data-theme="dark"] .theme-select,
body[data-theme="coral"] .theme-select,
body[data-theme="twilight"] .theme-select,
body[data-theme="dawn"] .theme-select,
body[data-theme="rainbow"] .theme-select {
background: rgba(0, 0, 0, 0.5);
color: #fff;
}

body[data-theme="light"] .theme-select {
background: rgba(255, 255, 255, 0.9);
color: #111;
border-color: rgba(0, 0, 0, 0.2);
}

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/* Controls bar */
#controls-bar {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
}

/* Highscore overlay */
#highscore-screen {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.65);
}

body[data-theme="light"] #highscore-screen {
background: rgba(255, 255, 255, 0.7);
}

.highscore-panel {
max-width: 360px;
}

#highscore-list {
list-style: none;
padding: 0;
margin: 16px 0 24px;
text-align: left;
}

#highscore-list li {
padding: 4px 0;
}

#highscore-list li.highlight {
color: #ffcc00;
font-weight: 700;
}