/* Arcade games — light educational theme matching the rest of the site */

body {
    font-family: 'Noway', system-ui, sans-serif;
    overflow-y: auto;
    overflow-x: hidden;
}

body.playing { overflow: hidden; }

h1 {
    font-size: clamp(1rem, 5vw, 2rem);
    color: #e94560;
    margin-bottom: 0.3rem;
    text-shadow: 3px 3px 0 #f7ccd3;
}

.subtitle {
    font-size: 0.95rem;
    color: #888;
    margin-bottom: 1rem;
}

canvas {
    border: 3px solid rgba(150,136,120,0.3);
    border-radius: 8px;
    image-rendering: pixelated;
    background: #16213e;
    max-width: 100%;
    /* Leave room for the sticky nav, title/HUD above and the paddle/basket
       at the bottom edge of the canvas — play locks scrolling, so the whole
       field has to fit on screen. */
    max-height: calc(100dvh - 230px);
    width: auto;
    height: auto;
}

/* On touch devices the on-screen left/right controls sit below the canvas. */
@media (pointer: coarse) {
    canvas { max-height: calc(100dvh - 290px); }
}

#hud {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 480px;
    padding: 0.5rem 0;
    font-size: 1rem;
}

#hud span { color: #e94560; }

/* Character select screen */
#char-select { text-align: center; }

#char-select h2 {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: #e94560;
}

.char-options { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }

.fruit-title { margin-top: 2rem !important; }

.fruit-options { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.fruit-option {
    cursor: pointer;
    text-align: center;
    padding: 0.8rem;
    border: 3px solid #ece4d6;
    border-radius: 8px;
    background: #fff;
    transition: all 0.2s;
    opacity: 0.55;
}

.fruit-option:hover { border-color: #e94560; opacity: 0.85; }
.fruit-option.active { border-color: #e94560; opacity: 1; }

.char-option {
    cursor: pointer;
    text-align: center;
    padding: 1.5rem;
    border: 3px solid #ece4d6;
    border-radius: 8px;
    background: #fff;
    transition: all 0.2s;
}

.char-option:hover { border-color: #e94560; transform: scale(1.05); }
.char-option canvas { border: none; margin-bottom: 0.5rem; }
.char-option .name { font-size: 1rem; color: #33373f; margin-top: 0.5rem; }

/* Game over */
#game-over {
    display: none;
    text-align: center;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

#game-over h2 { font-size: 1.5rem; color: #e94560; margin-bottom: 1rem; }
#game-over .score { font-size: 1rem; margin-bottom: 2rem; }

#game-over button {
    font-family: 'Noway', system-ui, sans-serif;
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
    background: #e94560; color: white;
    border: none; border-radius: 4px;
    cursor: pointer; margin: 0.3rem;
}

#game-over button:hover { background: #c73652; }

/* Name input */
#player-name {
    font-family: 'Noway', system-ui, sans-serif;
    font-size: 1rem;
    padding: 0.6rem 1rem;
    border: 2px solid #ece4d6;
    border-radius: 4px;
    background: #fff;
    color: #33373f;
    outline: none;
    width: 200px;
    margin-bottom: 0.5rem;
}

#player-name:focus { border-color: #e94560; }

#name-input-area { margin-bottom: 1rem; }
#name-input-area button { font-size: 0.9rem; padding: 0.5rem 1rem; }

.saved-msg { color: #2ecc71; font-size: 0.9rem; margin-bottom: 1rem; }

/* Leaderboard */
#leaderboard { text-align: center; max-width: 400px; width: 90vw; }

#leaderboard h2 { font-size: 1.3rem; color: #e94560; margin-bottom: 1rem; }

.lb-tabs { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; }

.lb-tab {
    font-family: 'Noway', system-ui, sans-serif;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    border: 2px solid #ece4d6;
    border-radius: 4px;
    background: transparent;
    color: #888;
    cursor: pointer;
}

.lb-tab.active { border-color: #e94560; color: #e94560; }

#lb-list { margin-bottom: 1rem; }

.lb-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    font-size: 0.95rem;
    border-bottom: 1px solid #ece4d6;
}

.lb-row .lb-rank { color: #e94560; width: 2rem; text-align: left; }
.lb-row .lb-name { flex: 1; text-align: left; }
.lb-row .lb-score { color: #e94560; width: 4rem; text-align: right; }

.lb-highlight { background: #fdf0f2; border-radius: 4px; color: #e94560; }
.lb-highlight .lb-name { color: #e94560; }

.lb-empty { color: #aaa; font-size: 0.95rem; padding: 2rem 0; }

#leaderboard > button {
    font-family: 'Noway', system-ui, sans-serif;
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
    background: #e94560; color: white;
    border: none; border-radius: 4px; cursor: pointer;
}

#leaderboard > button:hover { background: #c73652; }

/* Mobile controls */
#mobile-controls { display: none; justify-content: center; gap: 2rem; padding: 0.5rem 0; }

#mobile-controls button {
    font-size: 2rem;
    width: 70px; height: 50px;
    border: 3px solid #ece4d6;
    border-radius: 8px;
    background: #fff;
    color: #33373f;
    cursor: pointer;
    user-select: none; -webkit-user-select: none;
    touch-action: manipulation;
}

#mobile-controls button:active { background: #e94560; border-color: #e94560; color: #fff; }

@media (pointer: coarse) { #mobile-controls { display: flex; } }

.leaderboard-btn {
    font-family: 'Noway', system-ui, sans-serif;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: #e94560;
    border: 2px solid #e94560;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 1.5rem;
}

.leaderboard-btn:hover { background: #fdf0f2; }

#game-screen { display: none; position: relative; }