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

/* Responsive type scale using clamp() so UI scales across viewports and DPRs. */
:root {
    --fs-xxs: clamp(0.65rem, 1.2vw, 0.85rem);
    --fs-xs:  clamp(0.8rem, 1.0vw, 0.95rem);
    --fs-sm:  clamp(0.95rem, 1.3vw, 1.05rem);
    --fs-md:  clamp(1rem, 1.6vw, 1.15rem);
    --fs-lg:  clamp(1.25rem, 2.2vw, 1.6rem);
    --fs-xl:  clamp(1.8rem, 3.6vw, 2.2rem);
    --fs-2xl: clamp(2.2rem, 5vw, 2.8rem);
}

html { font-size: 1.2rem; }

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 {
    text-align: center;
    align-content: center;
    justify-items: center;
    width: 100%;
    margin: 0;
    height: 100vh;
    max-height: none;
    overflow: hidden;
}

.menu-logo-container {
    position: relative;
    width: 100%;
    height: 100%;
    align-content: center;
    padding: 20px;
    max-width: 900px;
}

.menu-logo {
  position: absolute;
  right: 0.75rem;
  bottom: 0.5rem;
  width: clamp(2.5rem, 9vw, 5rem);
  height: auto;
  object-fit: contain;
  display: block;
  z-index: 20;
  pointer-events: auto;
}

.instructions-section, .game-section {
    width: 100%;
    height: 100%;
    align-content: center;
    justify-items: center;
    /* max-width: 900px; */
}
.game-section { display: none; }
.game-section.show { display: block; height:100%; max-width: 900px; }
.game-grid { height:100%; display:grid; grid-template-rows:auto 1fr auto; gap:0.75rem; align-items:stretch; width:100%; }

.h1, h1 { margin-bottom:0.75rem; font-size:var(--fs-2xl); 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:var(--fs-md); 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:var(--fs-md); 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: var(--fs-sm); 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:var(--fs-md); 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); }