:root{
    --bg-1: #f6f8ff;
    --bg-2: #eef6ff;
    --surface: #ffffff;
    --muted: #4a5568;
    --primary: #5b8cff;
    --accent: #ff9aa2;
    --success: #56d364;
    --danger: #ff6b6b;
    --glass: rgba(10,12,20,0.55);
    --grid-max: 640px;
    --gap: 10px;
    --radius: 12px;
    --shadow-soft: 0 8px 20px rgba(15,22,40,0.06);
}

*{box-sizing:border-box}
html,body{height:100%; overflow:hidden}
body{
    margin:0;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(180deg,var(--bg-1),var(--bg-2));
    color:var(--muted);
    -webkit-font-smoothing:antialiased;
    position:fixed;
    width:100%;
}

/* In-game background (neutral) — toggled by JS via `body.in-game` */
body.in-game{
    background: linear-gradient(180deg,#ffffff,#f7fbff);
}

.app{
    height:100vh;
    height:100dvh; /* dynamic viewport height for mobile browsers */
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
    overflow:auto;
}

.menu{ text-align:center; padding:28px }
.title{ margin:0; font-size:34px; font-weight:700; color:#1f2937 }
.subtitle{ margin:8px 0 20px 0; color:#556272 }

.grid-sizes{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.grid-btn{
    /* Match the mode selector visual style: subtle bordered pill */
    padding:8px 12px;
    background:transparent;
    color:var(--muted);
    border:1px solid rgba(60,80,110,0.08);
    border-radius:10px;
    cursor:pointer;
    font-size:15px;
    font-weight:700;
}
.grid-btn.selected{ background: linear-gradient(90deg, rgba(91,140,255,0.12), rgba(255,154,162,0.06)); border-color: rgba(91,140,255,0.22); color:#0b1a2a }

.modes{ display:flex; gap:10px; justify-content:center; margin-bottom:12px }
.mode-btn{ padding:8px 12px; border-radius:10px; background:transparent; border:1px solid rgba(60,80,110,0.08); font-weight:700; cursor:pointer }
.mode-btn.selected{ background: linear-gradient(90deg, rgba(91,140,255,0.12), rgba(255,154,162,0.06)); border-color: rgba(91,140,255,0.22) }
.mode-btn.disabled{ opacity:0.45; cursor:default }

/* Mobile optimizations */
@media (max-width: 640px) {
    .app { padding: 16px; }
    .menu { padding: 16px; }
    .title { font-size: 28px; }
    .subtitle { font-size: 13px; margin-bottom: 16px; }
    .modes, .grid-sizes { gap: 8px; }
    .mode-btn, .grid-btn { padding: 8px 10px; font-size: 13px; }
}

@media (max-width: 480px) {
    .app { padding: 8px 12px; height: 100vh; height: 100dvh; }
    .menu { padding: 12px; }
    .title { font-size: 26px; margin: 0 0 6px 0; }
    .subtitle { font-size: 13px; margin-bottom: 12px; }
    .modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
    .grid-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
    .mode-btn { padding: 10px 6px; font-size: 12px; min-height: 36px; }
    .grid-btn { padding: 10px 6px; font-size: 12px; min-height: 36px; }
    .mode-btn small, .grid-btn small { font-size: 9px; display: block; line-height: 1.1; margin-top: 2px; }
    .pill { padding: 3px 6px; font-size: 9px; margin: 0 2px; }
    .header { gap: 4px; margin-bottom: 6px; }
    .button { padding: 10px 16px; font-size: 14px; }
    .menu-actions { margin-top: 10px; }
    .back { font-size: 12px; }
}

.menu-actions{ margin-top:18px }
.menu-actions .button[disabled]{ opacity:0.5; cursor:default }

.game{ display:none; width:100%; max-width:var(--grid-max); position:relative }
.back{ position:fixed; top:18px; left:18px; background:transparent; border:none; color:var(--muted); font-weight:700 }

.header{ display:flex; gap:12px; justify-content:space-between; align-items:center; margin-bottom:14px }
.pill{ background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,248,255,0.95)); padding:8px 12px; border-radius:999px; box-shadow:var(--shadow-soft); font-weight:600; color:#344154 }

#grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(var(--n), 1fr); }

.grid{ width:100%; display:block }

.tile{
    /* Show a muted version of the tile color by default (colorful grid) */
    background: linear-gradient(rgba(255,255,255,0.62), rgba(255,255,255,0.62)), var(--tile-color, var(--surface));
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 6px 16px rgba(20,30,60,0.06);
    cursor:pointer;
    user-select:none;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
    will-change: transform, box-shadow;
    color:#0b1a2a; /* dark text for better contrast on pastel tiles */
    font-weight:700;
    font-size:1rem;
    position:relative;
    overflow:hidden;
    aspect-ratio: 1 / 1;
}

/* Rotation animation for shuffle/shift mode (90° clockwise) */
.grid.rotating{
    transition: transform 600ms ease;
    transform: rotate(90deg);
}
.grid.rotating .tile{
    /* counter-rotate tiles so their content stays upright during grid rotation */
    transition: transform 600ms ease;
    transform: rotate(-90deg);
}

/* Memory mode: tiles are white by default; highlights use primary accent */
body.memory .tile{
    background: #ffffff;
    border: 1px solid rgba(16,24,40,0.06);
    color: #0b1a2a;
}

body.memory .tile::before{ display:none }

body.memory .tile.highlight, body.memory .tile.revealed{
    background: var(--primary);
    color: #07203a;
    box-shadow: 0 10px 30px rgba(91,140,255,0.12);
}

.tile::before{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0)); pointer-events:none }

.tile.revealed{ transform: scale(1.02); box-shadow: 0 10px 30px rgba(20,30,60,0.12) }
.tile.highlight{ transform: scale(1.02); box-shadow: 0 10px 30px rgba(20,30,60,0.12) }

/* Use the tile color when highlighted/revealed */
.tile.highlight, .tile.revealed{
    background: var(--tile-color);
    color: #0b1a2a;
}
.tile.match{ box-shadow: 0 10px 28px rgba(86,211,100,0.18); outline: 3px solid rgba(86,211,100,0.12) }
.tile.error{ box-shadow: 0 8px 22px rgba(255,107,107,0.18) }

.button{ background:var(--primary); color:#fff; border:none; padding:10px 14px; border-radius:10px; font-weight:700; box-shadow: 0 8px 18px rgba(91,140,255,0.18) }

.controls{ /* overlay centered over the grid so hiding the start button doesn't shift layout */
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none; /* allow clicks through except on the button */
    z-index:20;
}

.controls .button, .controls #start{ pointer-events:auto }

.modal-overlay{ display:none; position:fixed; inset:0; background:var(--glass); align-items:center; justify-content:center; z-index:60 }
.modal-card{ background:var(--surface); padding:20px; border-radius:14px; box-shadow: 0 14px 40px rgba(10,20,40,0.15); text-align:center }

/* responsive tweaks */
@media (max-width:480px){ :root{ --gap: 4px } }

@media (prefers-reduced-motion: reduce){ .tile, .grid-btn, .button{ transition:none } }