@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Muli:wght@400;700&display=swap');

* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    font-size: calc(14px + (18 - 14) * (100vw - 320px) / (1024 - 320));
}
body, button {
    color: #fff;
    font: 1em 'Muli', 'Helvetica Neue', Helvetica, sans-serif;
    line-height: 1.5;
}
body {
    overflow: hidden;
    background: #1a1a2e;
}
button, canvas {
    -webkit-tap-highlight-color: transparent;
}
button, .difficulty-select, .tutorial {
    opacity: 0;
}

/* ─── Score Header ─── */
header {
    position: absolute;
    z-index: 1;
    left: 0;
    width: 100%;
    font-family: 'Orbitron', monospace;
    font-size: 2.5em;
    font-weight: 900;
    top: 0;
    text-align: center;
    padding: 0.5rem;
    color: #00e5ff;
    text-shadow: 0 0 12px #00e5ff, 0 0 30px #0088ff;
    transform: translateY(-100%);
    transition: all 0.25s linear;
}
header, h1 {
    line-height: 1;
}

/* ─── Difficulty Menu ─── */
.difficulty-select {
    position: absolute;
    z-index: 1;
    left: 0;
    width: 100%;
    top: 50%;
    padding: 1.5em 0;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(0, 229, 255, 0.2);
    border-bottom: 1px solid rgba(0, 229, 255, 0.2);
}
h1 {
    font-family: 'Orbitron', monospace;
    font-size: 1.8em;
    margin-bottom: 1em;
    text-align: center;
    transform: translateX(100%);
    color: #00e5ff;
    text-shadow: 0 0 20px #00e5ff;
    letter-spacing: 0.08em;
}

/* ─── Buttons ─── */
button {
    background: linear-gradient(135deg, #0066ff 0%, #0033aa 100%);
    border-radius: 0.5em;
    box-shadow: 0 0 0 1px rgba(0,229,255,0.4), 0 0 16px rgba(0,100,255,0.4), 0 4px 0 rgba(0,0,0,0.5);
    cursor: pointer;
    display: block;
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    font-size: 0.85em;
    letter-spacing: 0.05em;
    margin: 0 auto 0.75em auto;
    padding: 0.75em 1.5em;
    transition: background 0.15s linear, box-shadow 0.15s linear, transform 0.1s;
    transform: translateY(50%);
    width: 100%;
    max-width: 16em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
button:hover {
    background: linear-gradient(135deg, #0088ff 0%, #0055cc 100%);
    box-shadow: 0 0 0 1px rgba(0,229,255,0.8), 0 0 24px rgba(0,150,255,0.6), 0 4px 0 rgba(0,0,0,0.5);
    transform: translateY(48%) scale(1.02);
}
button:active {
    background: linear-gradient(135deg, #0044cc 0%, #001a88 100%);
    transform: translateY(52%) scale(0.98);
}
button:disabled {
    cursor: default;
}

kbd {
    background: #1a1a2e;
    border: 1px solid rgba(0,229,255,0.4);
    border-radius: 0.25em;
    display: inline-block;
    font-family: 'Orbitron', monospace;
    font-size: 0.85em;
    height: 1.6em;
    min-width: 1.6em;
    padding: 0 0.25em;
    text-align: center;
    vertical-align: middle;
    box-shadow: 0 0 6px rgba(0,229,255,0.3);
    color: #00e5ff;
}
p {
    margin-bottom: 1em;
}

/* ─── Tutorial ─── */
.tutorial {
    position: absolute;
    z-index: 1;
    top: 50%;
    border-radius: 0.75em;
    padding: 1.2em 1.2em 0.5em 1.2em;
    left: 50%;
    text-align: center;
    width: 13em;
    transform: translate(-50%, -50%);
    transition: opacity 0.25s linear;
    background: rgba(0, 0, 30, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 229, 255, 0.25);
    font-size: 0.85em;
}

/* ─── Replay Button ─── */
.replay {
    position: absolute;
    z-index: 1;
    top: 50%;
    margin: 0;
    padding: 1.2em;
    left: 50%;
    transform: translate(-50%, 0);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 5.5em;
    height: 5.5em;
    background: linear-gradient(135deg, #0066ff 0%, #001a88 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0,229,255,0.5), 0 0 30px rgba(0,100,255,0.6);
}
.replay:hover {
    box-shadow: 0 0 0 2px rgba(0,229,255,1), 0 0 50px rgba(0,150,255,0.8);
    transform: translate(-50%, -52%) scale(1.06);
}
.btn-icon {
    fill: #fff;
    width: 3em;
    height: 3em;
    filter: drop-shadow(0 0 4px rgba(0,229,255,0.8));
}

/* Кнопка-replay скрыта — она живёт только внутри модалки таблицы рекордов */
.replay { display: none !important; }

/* ─── State classes ─── */
header, .difficulty-select { left: 0; width: 100%; }
.difficulty-select, .tutorial, .replay { top: 50%; }
.menu-active, .tutorial-active, .replay-active { z-index: 9; }
.menu-active { animation: fadeIn 0.5s linear forwards; }
.menu-active h1 { animation: slideIn 0.5s 0.5s linear forwards; }
.menu-active button:nth-of-type(1) { animation: fadeSlide 0.15s 1s linear forwards; }
.menu-active button:nth-of-type(2) { animation: fadeSlide 0.15s 1.15s linear forwards; }
.menu-active button:nth-of-type(3) { animation: fadeSlide 0.15s 1.3s linear forwards; }
.menu-active button:nth-of-type(4) { animation: fadeSlide 0.15s 1.45s linear forwards; }
.menu-inactive { animation: fadeIn 0.5s 1.1s linear reverse forwards; opacity: 1; }
.menu-inactive h1 { animation: slideOut 0.5s 0.6s linear forwards; transform: translateX(0); }
.menu-inactive button { opacity: 1; transform: translateY(0); }
.menu-inactive button:nth-of-type(1) { animation: fadeSlide 0.15s linear reverse forwards; }
.menu-inactive button:nth-of-type(2) { animation: fadeSlide 0.15s 0.15s linear reverse forwards; }
.menu-inactive button:nth-of-type(3) { animation: fadeSlide 0.15s 0.3s linear reverse forwards; }
.menu-inactive button:nth-of-type(4) { animation: fadeSlide 0.15s 0.45s linear reverse forwards; }

.score-active { transform: translateY(0); }
.tutorial-active, .replay-active { opacity: 1; }
.replay-active { transform: translate(-50%, -50%); }

/* ─── Animations ─── */
@keyframes fadeIn {
    from { opacity: 0 }
    to   { opacity: 1 }
}
@keyframes slideIn {
    from { transform: translateX(100%) }
    to   { transform: translateX(0) }
}
@keyframes slideOut {
    from { transform: translateX(0) }
    to   { transform: translateX(-100%) }
}
@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(50%); }
    to   { opacity: 1; transform: translateY(0); }
}