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

/* Base font sizing: reduce slightly so everything scales down a bit */
html { font-size: 0.7rem; }

body {
    font-family: 'Arial', sans-serif;
    font-size: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: stretch;
    color: white;
}

.game-container {
    padding: 1.25rem;
    text-align: center;
    align-content: center;
    width: 100%;
    margin: 0;
    height: 100vh;
    overflow: hidden;
}

.instructions-section, .game-section { width: 100%; }
.game-section { display: none; }
.game-section.show { display: block; height:100%; }
.game-grid { height:100%; display:grid; grid-template-rows:auto 1fr auto; gap:0.75rem; align-items:stretch; width:100%; }

h1 { margin-bottom:0.75rem; font-size:1.8rem; text-shadow:2px 2px 4px rgba(0,0,0,0.5); }
.objective { background: rgba(255,255,255,0.2); padding:0.9375rem; border-radius:0.9375rem; margin-bottom:1.25rem; font-size:1.1rem; line-height:1.5; border:0.125rem solid rgba(255,215,0,0.3); }

.game-info { display:flex; justify-content:center; align-items:center; gap:0.75rem; margin-bottom:0.625rem; font-size:1.15rem; font-weight:700; flex-wrap:wrap; }
.score, .timer { background: rgba(255,255,255,0.18); padding:0.5rem 0.875rem; border-radius:0.75rem; border:0.125rem solid #FFD700; flex:0 0 auto; min-width:6.875rem; }

.middle-section { height:100%; min-height: 0; }


.canvas-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    height: 100%; /* fill the middle grid row */
    min-height: 0;
    max-height: none;
}

#gameCanvas {
    border: 0.1875rem solid #FFD700; /* 3px */
    border-radius: 0.75rem; /* 12px */
    background: linear-gradient(to bottom, #87CEEB 0%, #98FB98 100%);
    display: block;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.18); /* 4px/8px */
    width: 100%;
    height: 100%; /* fill its container (middle section) */
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
}

.game-buttons {
    flex-direction: row;
    display: flex;
    justify-content: center;
}


.controls { font-size:1rem; margin-bottom:0.9375rem; padding:0 0.625rem; }
.replay-btn, .start-btn { background:linear-gradient(45deg,#FF6B6B,#4ECDC4); border:none; color:white; padding:0.9375rem 1.875rem; font-size:1.2rem; border-radius:1.5625rem; cursor:pointer; box-shadow:0 0.25rem 0.9375rem rgba(0,0,0,0.2); transition:transform 0.2s; margin:0.3125rem; }
.back-btn { background:linear-gradient(45deg,#667eea,#764ba2); border:none; color:white; padding:0.625rem 1.25rem; font-size:1rem; border-radius:1.25rem; cursor:pointer; box-shadow:0 0.25rem 0.9375rem rgba(0,0,0,0.2); margin:0.3125rem; }
.hint-btn { background:linear-gradient(45deg,#FFA726,#FB8C00); border:none; color:white; padding:0.625rem 1.25rem; font-size:1rem; border-radius:1.25rem; cursor:pointer; box-shadow:0 0.25rem 0.9375rem rgba(0,0,0,0.2); margin:0.3125rem; }

.color-reminder { display:flex; justify-content:center; gap:1.25rem; margin-bottom:0.9375rem; flex-wrap:wrap; font-size:0.9rem; font-weight:bold; }
.color-item { display:flex; align-items:center; gap:0.3125rem; background:rgba(255,255,255,0.15); padding:0.3125rem 0.625rem; border-radius:0.9375rem; }
.color-dot { width:0.75rem; height:0.75rem; border-radius:50%; display:inline-block; }
.color-dot.green { background-color:#4CAF50; }

/* Buttons hover */
.replay-btn:hover, .start-btn:hover, .back-btn:hover, .hint-btn:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.24); }