/* Retro pixel font from Google Fonts: Press Start 2P */

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: #000000;
}

body {
    font-family: 'Electrolize', sans-serif;
    background: #000000;
    color: #ffffff;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* ============================================
   STARRY BACKGROUND
   ============================================ */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.star {
    position: absolute;
    background: #2CFF05;
    border-radius: 50%;
    animation: twinkle 3s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.8; }
}

/* ============================================
   STATS BAR
   ============================================ */
.stats-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #000000;
    border-bottom: 3px solid #2CFF05;
    padding: 15px 30px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 0 20px rgba(44, 255, 5, 0.3);
}

.stats-left, .stats-right {
    display: flex;
    gap: 30px;
    align-items: center;
}

.stats-right {
    justify-content: flex-end;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}

.stat-label {
    font-family: 'Tomorrow', 'Electrolize', sans-serif;
    color: #BF00FF;
    text-shadow: 0 0 10px #BF00FF;
}

.stat-value {
    font-family: 'Tomorrow', 'Electrolize', sans-serif;
    color: #2CFF05;
    font-weight: 700;
    text-shadow: 0 0 10px #2CFF05;
}

/* Logo */
.stats-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.stats-logo .logo-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 24px;
    color: #FFD93D;
    text-shadow: 0 0 20px #FFD93D;
    letter-spacing: 2px;
}

/* ============================================
   HEARTS (Lives)
   ============================================ */
.lives-container {
    display: flex;
    gap: 18px;
    align-items: center;
    padding-left: 10px;
}

.heart {
    width: 20px;
    height: 18px;
    background: #ff0040;
    position: relative;
    transform: rotate(-45deg);
    box-shadow: 0 0 8px #ff0040;
}

.heart::before,
.heart::after {
    content: '';
    width: 20px;
    height: 18px;
    background: #ff0040;
    border-radius: 50%;
    position: absolute;
}

.heart::before {
    top: -9px;
    left: 0;
}

.heart::after {
    left: 9px;
    top: 0;
}

.heart.lost {
    background: #333;
    box-shadow: none;
}

.heart.lost::before,
.heart.lost::after {
    background: #333;
}

/* Large hearts for popup */
.heart-large {
    width: 30px;
    height: 27px;
    background: #ff0040;
    position: relative;
    transform: rotate(-45deg);
    box-shadow: 0 0 12px #ff0040;
    display: inline-block;
    margin: 0 8px;
}

.heart-large::before,
.heart-large::after {
    content: '';
    width: 30px;
    height: 27px;
    background: #ff0040;
    border-radius: 50%;
    position: absolute;
}

.heart-large::before {
    top: -13px;
    left: 0;
}

.heart-large::after {
    left: 14px;
    top: 0;
}

.heart-large.lost {
    background: #333;
    box-shadow: none;
}

.heart-large.lost::before,
.heart-large.lost::after {
    background: #333;
}

/* ============================================
   PAUSE BUTTON
   ============================================ */
.pause-btn {
    background: transparent;
    border: 2px solid #2CFF05;
    color: #2CFF05;
    width: 35px;
    height: 35px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s;
    box-shadow: 0 0 10px rgba(44, 255, 5, 0.3);
}

.pause-btn::before,
.pause-btn::after {
    content: '';
    width: 4px;
    height: 14px;
    background: #2CFF05;
    box-shadow: 0 0 6px #2CFF05;
}

.pause-btn:hover {
    background: #2CFF05;
    box-shadow: 0 0 20px rgba(44, 255, 5, 0.6);
}

.pause-btn:hover::before,
.pause-btn:hover::after {
    background: #000;
    box-shadow: none;
}

/* ============================================
   GAME CONTAINER & CANVAS
   ============================================ */
.game-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 100px 40px 40px 40px;
}

#gameCanvas {
    border: 5px solid #2CFF05;
    background: #000000;
    box-shadow: 0 0 30px rgba(44, 255, 5, 0.4), inset 0 0 30px rgba(44, 255, 5, 0.1);
    position: relative;
    z-index: 10;
    max-width: 95vw;
    max-height: calc(100vh - 150px);
}

/* Screen shake */
.shake {
    animation: shake 0.4s ease-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

/* Confetti canvas */
#confettiCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1200;
}

/* ============================================
   OVERLAYS (Pause, Life Lost)
   ============================================ */
.pause-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1800;
}

.pause-content {
    text-align: center;
}

.pause-content h2 {
    font-family: 'Doto', sans-serif;
    font-size: 64px;
    color: #FFD93D;
    text-shadow: 0 0 30px #FFD93D;
    margin-bottom: 30px;
}

.pause-content p {
    font-family: 'Tomorrow', sans-serif;
    font-size: 20px;
    color: #2CFF05;
    text-shadow: 0 0 10px #2CFF05;
}

.life-lost-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1800;
    cursor: pointer;
}

.life-lost-content {
    text-align: center;
    background: #000;
    border: 3px solid #ff0040;
    padding: 40px 60px;
    box-shadow: 0 0 40px rgba(255, 0, 64, 0.5);
}

.life-lost-content h2 {
    font-family: 'Doto', sans-serif;
    font-size: 42px;
    color: #ff0040;
    text-shadow: 0 0 20px #ff0040;
    margin-bottom: 25px;
}

.life-lost-hearts {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.life-lost-continue {
    font-family: 'Doto', sans-serif;
    font-size: 18px;
    color: #BF00FF;
    text-shadow: 0 0 10px #BF00FF;
    margin-top: 25px;
}

/* ============================================
   LEVEL UP NOTIFICATION
   ============================================ */
.level-up {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.95);
    border: 3px solid #FFD93D;
    padding: 40px 60px;
    text-align: center;
    z-index: 1500;
    display: none;
    box-shadow: 0 0 50px rgba(255, 217, 61, 0.8);
    cursor: pointer;
}

.level-up h2 {
    font-family: 'Doto', sans-serif;
    font-size: 48px;
    color: #FFD93D;
    text-shadow: 0 0 30px #FFD93D;
    margin-bottom: 10px;
    animation: pulse 0.5s infinite;
}

.level-up p {
    font-family: 'Tomorrow', sans-serif;
    font-size: 20px;
    color: #2CFF05;
    text-shadow: 0 0 10px #2CFF05;
}

.level-up .countdown {
    font-family: 'Doto', sans-serif;
    font-size: 18px;
    color: #BF00FF;
    margin-top: 15px;
    text-shadow: 0 0 15px #BF00FF;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ============================================
   START SCREEN
   ============================================ */
.start-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.start-content {
    background: #000000;
    border: 3px solid #2CFF05;
    padding: 40px 50px;
    text-align: center;
    box-shadow: 0 0 40px rgba(44, 255, 5, 0.5);
    max-width: 400px;
}

.start-screen h1 {
    font-family: 'Press Start 2P', monospace;
    font-size: 36px;
    color: #FFD93D;
    margin-bottom: 20px;
    text-shadow: 0 0 30px #FFD93D;
    letter-spacing: 2px;
}

.start-screen p {
    font-family: 'Doto', sans-serif;
    color: #BF00FF;
    margin-bottom: 20px;
    font-size: 18px;
    text-shadow: 0 0 10px #BF00FF;
}

.mobile-hint {
    display: none;
    font-family: 'Tomorrow', sans-serif;
    font-size: 12px;
    color: #666;
    margin-top: 15px;
    margin-bottom: 0;
    text-shadow: none;
}

.name-input {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    font-family: 'Tomorrow', 'Electrolize', sans-serif;
    border: 2px solid #2CFF05;
    background: #000000;
    color: #2CFF05;
    margin-bottom: 15px;
    text-align: center;
    text-shadow: 0 0 10px #2CFF05;
}

.name-input:focus {
    outline: none;
    border-color: #BF00FF;
    box-shadow: 0 0 20px rgba(191, 0, 255, 0.5);
}

.name-input::placeholder {
    color: #2D2D2D;
    font-family: 'Doto', sans-serif;
}

/* Difficulty selector */
.difficulty-selector {
    margin-bottom: 20px;
}

.difficulty-selector label {
    font-family: 'Tomorrow', sans-serif;
    color: #888;
    font-size: 14px;
    display: block;
    margin-bottom: 10px;
}

.difficulty-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.diff-btn {
    background: #000;
    border: 2px solid #888;
    color: #888;
    padding: 10px 18px;
    font-family: 'Doto', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 44px;
}

.diff-btn:hover {
    border-color: #2CFF05;
    color: #2CFF05;
}

.diff-btn.active {
    border-color: #2CFF05;
    color: #2CFF05;
    box-shadow: 0 0 15px rgba(44, 255, 5, 0.5);
}

.diff-btn.easy.active { border-color: #2CFF05; color: #2CFF05; box-shadow: 0 0 15px rgba(44, 255, 5, 0.5); }
.diff-btn.normal.active { border-color: #FFD93D; color: #FFD93D; box-shadow: 0 0 15px rgba(255, 217, 61, 0.5); }
.diff-btn.hard.active { border-color: #FF4040; color: #FF4040; box-shadow: 0 0 15px rgba(255, 64, 64, 0.5); }

/* Mode selector */
.mode-selector {
    margin-bottom: 20px;
}

.mode-selector label {
    font-family: 'Tomorrow', sans-serif;
    color: #888;
    font-size: 14px;
    display: block;
    margin-bottom: 10px;
}

.mode-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.mode-btn {
    background: #000;
    border: 2px solid #888;
    color: #888;
    padding: 10px 18px;
    font-family: 'Doto', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 44px;
}

.mode-btn:hover {
    border-color: #2CFF05;
    color: #2CFF05;
}

.mode-btn.active {
    border-color: #2CFF05;
    color: #2CFF05;
    box-shadow: 0 0 15px rgba(44, 255, 5, 0.5);
}

.mode-btn.math.active {
    border-color: #00FFFF;
    color: #00FFFF;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

/* ============================================
   MATH MODE POPUPS
   ============================================ */
.math-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.math-popup-content {
    background: #000;
    border: 3px solid #00FFFF;
    padding: 30px 50px;
    text-align: center;
    box-shadow: 0 0 50px rgba(0, 255, 255, 0.5);
    min-width: 320px;
}

.math-timer {
    width: 100%;
    height: 8px;
    background: #222;
    border-radius: 4px;
    margin-bottom: 25px;
    overflow: hidden;
}

.math-timer-bar {
    height: 100%;
    background: linear-gradient(90deg, #2CFF05, #FFD93D, #FF4040);
    width: 100%;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px #2CFF05;
}

.math-question {
    font-family: 'Tomorrow', 'Electrolize', sans-serif;
    font-size: 42px;
    color: #00FFFF;
    text-shadow: 0 0 20px #00FFFF;
    margin-bottom: 25px;
    font-weight: 700;
}

.math-input {
    width: 120px;
    padding: 15px;
    font-size: 32px;
    font-family: 'Tomorrow', 'Electrolize', sans-serif;
    border: 3px solid #2CFF05;
    background: #000;
    color: #2CFF05;
    text-align: center;
    text-shadow: 0 0 10px #2CFF05;
    margin-bottom: 20px;
    -moz-appearance: textfield;
    font-weight: 700;
}

.math-input::-webkit-outer-spin-button,
.math-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.math-input:focus {
    outline: none;
    border-color: #00FFFF;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.math-submit {
    display: inline-block;
    margin: 10px 0 15px 0;
}

.math-hint {
    font-family: 'Tomorrow', sans-serif;
    font-size: 12px;
    color: #666;
}

/* Math Result Popup */
.math-result-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    cursor: pointer;
}

.math-result-popup.incorrect-bg {
    background: rgba(0, 0, 0, 0.95);
}

.math-result-content {
    background: rgba(0, 0, 0, 0.85);
    border: 3px solid #2CFF05;
    padding: 40px 60px;
    text-align: center;
    box-shadow: 0 0 50px rgba(44, 255, 5, 0.5);
}

.math-result-content.incorrect {
    background: #000;
    border-color: #FF4040;
    box-shadow: 0 0 50px rgba(255, 64, 64, 0.5);
}

.math-result-content h2 {
    font-family: 'Doto', sans-serif;
    font-size: 42px;
    color: #2CFF05;
    text-shadow: 0 0 20px #2CFF05;
    margin-bottom: 15px;
}

.math-result-content.incorrect h2 {
    color: #FF4040;
    text-shadow: 0 0 20px #FF4040;
}

.math-result-content p {
    font-family: 'Tomorrow', sans-serif;
    font-size: 16px;
    color: #888;
    line-height: 1.6;
}

.math-answer-number {
    font-weight: 700;
    font-size: 24px;
    color: #00FFFF;
    text-shadow: 0 0 10px #00FFFF;
}

.math-result-hearts {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    background: #000000;
    color: #2CFF05;
    border: 3px solid #2CFF05;
    padding: 12px 35px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Doto', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    text-shadow: 0 0 10px #2CFF05;
    box-shadow: 0 0 20px rgba(44, 255, 5, 0.3);
    text-transform: uppercase;
    margin: 5px;
    min-height: 48px;
}

.btn:hover {
    background: #2CFF05;
    color: #000000;
    text-shadow: none;
    box-shadow: 0 0 30px rgba(44, 255, 5, 0.8);
}

.btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: #2D2D2D;
    color: #2D2D2D;
}

.btn:disabled:hover {
    background: #000000;
    color: #2D2D2D;
    box-shadow: none;
}

.btn-secondary {
    border-color: #BF00FF;
    color: #BF00FF;
    text-shadow: 0 0 10px #BF00FF;
    box-shadow: 0 0 20px rgba(191, 0, 255, 0.3);
}

.btn-secondary:hover {
    background: #BF00FF;
    color: #000000;
    box-shadow: 0 0 30px rgba(191, 0, 255, 0.8);
}

.btn-small {
    padding: 8px 20px;
    font-size: 12px;
}

.btn-leaderboard {
    border-color: #FFD93D;
    color: #FFD93D;
    text-shadow: 0 0 10px #FFD93D;
    box-shadow: 0 0 20px rgba(255, 217, 61, 0.3);
}

.btn-leaderboard:hover {
    background: #FFD93D;
    color: #000;
    box-shadow: 0 0 30px rgba(255, 217, 61, 0.8);
}

.button-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 15px;
}

.leaderboard-btn-container {
    margin-top: 20px;
}

/* ============================================
   GAME OVER SCREEN
   ============================================ */
.game-over {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.game-over-content {
    background: #000000;
    border: 3px solid #BF00FF;
    padding: 40px 50px;
    text-align: center;
    box-shadow: 0 0 40px rgba(191, 0, 255, 0.5);
}

.game-over h2 {
    font-family: 'Doto', sans-serif;
    font-size: 48px;
    color: #BF00FF;
    margin-bottom: 25px;
    text-shadow: 0 0 30px #BF00FF;
}

.game-over .stats {
    margin-bottom: 20px;
    display: inline-block;
}

.game-over .stat-line {
    font-family: 'Tomorrow', 'Electrolize', sans-serif;
    font-size: 16px;
    margin: 10px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.game-over .stat-line .go-label {
    color: #888888;
    text-align: right;
}

.game-over .stat-line span:not(.go-label) {
    color: #2CFF05;
    font-weight: 700;
    text-shadow: 0 0 10px #2CFF05;
    text-align: left;
}

.game-over .new-high {
    font-family: 'Doto', sans-serif;
    color: #FFD93D;
    font-weight: 700;
    margin-top: 25px;
    margin-bottom: 20px;
    font-size: 24px;
    text-shadow: 0 0 20px #FFD93D;
    animation: blink 0.8s infinite;
}

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.3; }
}

/* ============================================
   LEADERBOARD POPUP
   ============================================ */
.leaderboard-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2500;
}

.leaderboard-popup-content {
    background: #000;
    border: 3px solid #FFD93D;
    padding: 40px 50px;
    text-align: center;
    box-shadow: 0 0 50px rgba(255, 217, 61, 0.5);
    min-width: 350px;
}

.leaderboard-popup-content h2 {
    font-family: 'Doto', sans-serif;
    color: #FFD93D;
    font-size: 28px;
    margin-bottom: 20px;
    text-shadow: 0 0 15px #FFD93D;
}

.leaderboard-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 25px;
}

.leaderboard-entry {
    font-family: 'Tomorrow', sans-serif;
    font-size: 14px;
    color: #888;
    display: flex;
    justify-content: space-between;
    padding: 8px 15px;
    border-bottom: 1px solid #222;
}

.leaderboard-entry:last-child {
    border-bottom: none;
}

.leaderboard-entry.current {
    color: #2CFF05;
    background: rgba(44, 255, 5, 0.1);
}

.leaderboard-entry .rank {
    color: #BF00FF;
    width: 30px;
    text-align: left;
}

.leaderboard-entry .name {
    flex: 1;
    text-align: left;
    padding-left: 10px;
}

.leaderboard-entry .score {
    color: #2CFF05;
    min-width: 60px;
    text-align: right;
}

/* ============================================
   TOUCH CONTROLS
   ============================================ */
.touch-controls {
    display: none;
    position: relative;
    margin: 10px auto 0 auto;
    z-index: 100;
    touch-action: manipulation;
}

.touch-row {
    display: flex;
    justify-content: center;
    gap: 2px;
}

.touch-btn {
    width: 56px;
    height: 56px;
    background: rgba(44, 255, 5, 0.3);
    border: 2px solid #2CFF05;
    border-radius: 10px;
    color: #2CFF05;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.touch-btn:active {
    background: rgba(44, 255, 5, 0.6);
}

.touch-btn.touch-center {
    background: transparent;
    border-color: transparent;
    cursor: default;
    width: 40px;
    height: 56px;
}

.touch-btn:disabled {
    opacity: 0.3;
}

/* Hide touch controls when game not active */
body.game-paused .touch-controls,
body.game-not-running .touch-controls {
    opacity: 0.3;
    pointer-events: none;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

/* ============================================
   iOS/ANDROID OPTIMIZATIONS
   ============================================ */

/* Prevent pull-to-refresh and overscroll bounce */
html {
    overscroll-behavior-y: contain;
}

/* Disable text selection on game elements (not globally) */
.touch-controls,
.stats-bar,
.btn,
.diff-btn,
.mode-btn,
canvas {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Prevent pinch-to-zoom on the game area */
#gameCanvas {
    touch-action: none;
}

/* Prevent tap highlight on all interactive elements */
button, a, input {
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
    .stats-bar {
        padding: 10px 15px;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .stats-left, .stats-right {
        gap: 20px;
        font-size: 14px;
        justify-content: center;
    }
    
    .stats-logo {
        order: -1;
    }
    
    .stat-item {
        font-size: 14px;
    }
    
    .stats-logo .logo-text {
        font-size: 18px;
    }

    .game-container {
        padding: 130px 10px 10px 10px;
        flex-direction: column;
        gap: 5px;
    }
    
    .heart {
        width: 18px;
        height: 16px;
    }
    
    .heart::before,
    .heart::after {
        width: 18px;
        height: 16px;
    }
    
    .heart::before {
        top: -8px;
    }
    
    .heart::after {
        left: 8px;
    }

    /* Show touch controls on mobile */
    .touch-controls {
        display: block;
    }

    /* Adjust game container for touch controls */
    .game-container {
        padding-bottom: 15px;
    }

    /* Larger touch targets for buttons */
    .btn {
        padding: 15px 40px;
        font-size: 18px;
        min-height: 50px;
    }

    /* Better input styling for mobile */
    .name-input,
    .math-input {
        font-size: 18px;
        padding: 15px;
        min-height: 50px;
    }

    /* Prevent zoom on input focus (iOS) */
    input[type="text"],
    input[type="number"] {
        font-size: 16px;
    }

    /* Math popup adjustments */
    .math-popup-content {
        padding: 20px 30px;
        min-width: 280px;
        max-width: 90vw;
    }

    .math-question {
        font-size: 28px;
    }

    /* Start screen adjustments */
    .start-content {
        padding: 20px;
        max-width: 90vw;
    }

    .start-content h1 {
        font-size: 24px;
    }

    .start-screen p {
        font-size: 14px;
        margin-bottom: 15px;
    }

    /* Show mobile hint on touch devices */
    .mobile-hint {
        display: block;
    }

    /* Difficulty and mode buttons */
    .difficulty-buttons,
    .mode-buttons {
        flex-wrap: wrap;
        gap: 6px;
    }

    .diff-btn,
    .mode-btn {
        padding: 12px 16px;
        font-size: 12px;
        min-height: 44px;
    }

    .difficulty-selector,
    .mode-selector {
        margin-bottom: 15px;
    }

    .difficulty-selector label,
    .mode-selector label {
        font-size: 12px;
        margin-bottom: 8px;
    }
}

/* Tablet screens (iPad, etc.) */
@media (min-width: 769px) and (max-width: 1024px) {
    .touch-controls {
        display: block;
    }

    .touch-btn {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }

    .touch-btn.touch-center {
        width: 50px;
    }

    .game-container {
        flex-direction: column;
        gap: 10px;
    }
}

/* Extra small screens (iPhone SE, etc.) */
@media (max-width: 400px) {
    .touch-btn {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .touch-btn.touch-center {
        width: 32px;
    }

    .stats-bar {
        padding: 8px 10px;
    }

    .stat-item {
        font-size: 11px;
    }

    .stats-logo .logo-text {
        font-size: 14px;
    }

    .game-container {
        padding-top: 115px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .start-content {
        padding: 15px;
    }

    .start-content h1 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .start-screen p {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .btn {
        padding: 10px 25px;
        font-size: 14px;
    }

    .diff-btn,
    .mode-btn {
        padding: 10px 12px;
        font-size: 11px;
    }

    .name-input {
        padding: 10px;
        font-size: 14px;
    }

    .math-popup-content {
        padding: 15px 20px;
        min-width: 260px;
    }

    .math-question {
        font-size: 24px;
    }

    .math-input {
        font-size: 20px;
        padding: 10px;
    }
}

/* iOS safe area support */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .game-container {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
}