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

:root {
    --c-mag: #ff00ff;
    --c-cyan: #00ffff;
    --c-mag-dim: #ff00ff88;
    --c-mag-ghost: #ff00ff44;
    --c-mag-glow: #ff00ff22;
    --c-bg: #000;
    --font: 'Orbitron', monospace;
    --board-w: 420px;
    --board-h: 720px;
}

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

body {
    background: var(--c-bg);
    color: #eee;
    font-family: var(--font);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
}

#bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; }

/* ═══ DESKTOP ═══ */
.desktop-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}
.mobile-layout { display: none; }

#title, .mobile-title {
    font-size: 3rem;
    margin-bottom: 14px;
    letter-spacing: 18px;
    color: #fff;
    animation: titleWarp 6s ease-in-out infinite;
}

@keyframes titleWarp {
    0%, 100% { text-shadow: 0 0 20px var(--c-mag), 0 0 60px var(--c-mag), 0 0 120px #ff00ff88, 6px 0 0 var(--c-cyan), -6px 0 0 #ff0066; transform: scaleX(1) scaleY(1); letter-spacing: 18px; }
    15% { text-shadow: 0 0 30px var(--c-cyan), 0 0 80px var(--c-cyan), -8px 3px 0 var(--c-mag), 8px -3px 0 #ffff00; transform: scaleX(1.15) scaleY(0.85) skewX(-5deg); letter-spacing: 24px; }
    30% { text-shadow: 0 0 15px #ffff00, 0 0 50px #ffff00, 4px -2px 0 #ff0088, -4px 2px 0 #00ff88; transform: scaleX(0.9) scaleY(1.1) skewX(3deg); letter-spacing: 12px; }
    50% { text-shadow: 0 0 40px #00ff88, 0 0 100px #00ff8866, -5px 0 0 var(--c-mag), 5px 0 0 var(--c-cyan); transform: scaleX(1.05) scaleY(0.95) skewX(-2deg) rotate(-1deg); letter-spacing: 20px; }
    70% { text-shadow: 0 0 25px #ff4400, 0 0 70px #ff440088, 7px 0 0 var(--c-cyan), -7px 0 0 var(--c-mag); transform: scaleX(0.95) scaleY(1.05) skewX(4deg) rotate(1deg); letter-spacing: 15px; }
}

#board, #boardMobile {
    border: 2px solid #ffffff11;
    border-radius: 2px;
    background: transparent;
    display: block;
    box-shadow: 0 0 40px var(--c-mag-glow), 0 0 100px #00ffff11;
}

.board-wrapper { position: relative; text-align: center; }
.board-wrapper canvas { display: block; margin: 0 auto; }

/* ═══ OVERLAY ═══ */
.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 10;
}
.desktop-layout .overlay { top: auto; bottom: 0; width: var(--board-w); height: var(--board-h); }
.overlay.hidden, .hidden { display: none !important; }

.overlay-text {
    font-size: 1.1rem;
    letter-spacing: 6px;
    color: var(--c-mag);
    text-shadow: 0 0 30px var(--c-mag);
    animation: breatheText 3s ease-in-out infinite;
}
@keyframes breatheText {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

/* ═══ BUTTONS ═══ */
#startBtn, .start-btn-mobile {
    padding: 18px 60px;
    font-size: 1.2rem;
    font-family: var(--font);
    background: transparent;
    color: #fff;
    border: 1px solid var(--c-mag-ghost);
    cursor: pointer;
    letter-spacing: 8px;
    text-transform: uppercase;
    text-shadow: 0 0 15px var(--c-mag);
    clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);
    transition: all 0.4s;
}
#startBtn:hover, .start-btn-mobile:hover {
    background: #ff00ff15;
    text-shadow: 0 0 30px var(--c-mag), 0 0 60px var(--c-mag);
    border-color: var(--c-mag-dim);
    transform: scale(1.08);
    letter-spacing: 12px;
}

/* ═══ SIDE PANELS ═══ */
.side-panel { width: 170px; padding-top: 70px; }
.side-panel.left { text-align: right; }
.side-panel h3 { color: var(--c-mag-dim); margin-bottom: 4px; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 4px; text-shadow: 0 0 8px var(--c-mag-ghost); }

.info-box { margin-bottom: 22px; padding: 12px; background: #ffffff03; border-left: 1px solid var(--c-mag-glow); }
.info-box p { font-size: 1.8rem; font-weight: 900; color: #fff; text-shadow: 0 0 20px #00ffff66; }
.controls p.ctrl { font-size: 0.55rem; margin-bottom: 5px; color: #666; letter-spacing: 2px; }
#next { background: transparent; border: 1px solid #ffffff08; margin-top: 4px; }

/* ═══ GAME OVER FORM ═══ */
.gameover-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 80%;
    max-width: 300px;
}
.gameover-form input {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--font);
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--c-mag-ghost);
    color: #fff;
    letter-spacing: 2px;
    outline: none;
    transition: border-color 0.3s;
}
.gameover-form input::placeholder { color: #666; letter-spacing: 2px; }
.gameover-form input:focus { border-color: var(--c-mag-dim); }
.gameover-form .submit-btn {
    padding: 12px 40px;
    font-size: 0.9rem;
    font-family: var(--font);
    background: transparent;
    color: #fff;
    border: 1px solid var(--c-mag-ghost);
    cursor: pointer;
    letter-spacing: 6px;
    text-transform: uppercase;
    text-shadow: 0 0 15px var(--c-mag);
    transition: all 0.3s;
}
.gameover-form .submit-btn:hover { background: #ff00ff15; border-color: var(--c-mag-dim); text-shadow: 0 0 30px var(--c-mag); }
.gameover-form .skip-btn {
    background: none; border: none; color: #666;
    font-family: var(--font); font-size: 0.6rem; cursor: pointer;
    letter-spacing: 3px; text-transform: uppercase; transition: color 0.3s;
}
.gameover-form .skip-btn:hover { color: #aaa; }
.form-msg { font-size: 0.6rem; letter-spacing: 2px; color: var(--c-cyan); min-height: 1em; }

/* ═══ HIGHSCORE ═══ */
.highscore-box { width: 80%; max-width: 300px; text-align: center; }
.highscore-box h3 { color: var(--c-mag-dim); font-size: 0.6rem; letter-spacing: 4px; margin-bottom: 8px; text-shadow: 0 0 8px var(--c-mag-ghost); }
.hs-tabs { display: flex; justify-content: center; gap: 4px; margin-bottom: 8px; }
.hs-tab {
    background: none; border: 1px solid #ffffff11; color: #666;
    font-family: var(--font); font-size: 0.5rem; letter-spacing: 2px;
    padding: 4px 10px; cursor: pointer; transition: all 0.3s;
}
.hs-tab.active, .hs-tab:hover { color: var(--c-cyan); border-color: var(--c-cyan); text-shadow: 0 0 8px var(--c-cyan); }
.highscore-list { list-style: none; padding: 0; font-size: 0.65rem; letter-spacing: 2px; }
.highscore-list li { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #ffffff08; color: #aaa; }
.highscore-list li .rank { color: var(--c-mag-dim); width: 24px; text-align: right; margin-right: 8px; }
.highscore-list li .name { flex: 1; text-align: left; color: #ddd; }
.highscore-list li .hs-score { color: var(--c-cyan); }
.highscore-list li:first-child .name,
.highscore-list li:first-child .hs-score { color: #fff; text-shadow: 0 0 10px var(--c-cyan); }

.hs-link {
    display: inline-block; margin-top: 8px; font-size: 0.5rem; letter-spacing: 3px;
    color: #666; text-decoration: none; text-transform: uppercase; transition: color 0.3s;
}
.hs-link:hover { color: var(--c-cyan); text-shadow: 0 0 8px var(--c-cyan); }

/* ═══ EFFECTS ═══ */
.line-clear-flash { animation: screenFlash 0.4s ease-out; }
@keyframes screenFlash {
    0% { filter: brightness(4) hue-rotate(180deg) saturate(3); }
    50% { filter: brightness(2) hue-rotate(90deg) saturate(2); }
    100% { filter: brightness(1) hue-rotate(0deg) saturate(1); }
}
.shake { animation: shake 0.6s ease-out; }
@keyframes shake {
    0%, 100% { transform: translate(0); }
    10% { transform: translate(-10px, 5px) rotate(-2deg); }
    20% { transform: translate(10px, -5px) rotate(2deg); }
    30% { transform: translate(-8px, 3px) rotate(-1.5deg); }
    40% { transform: translate(8px, -3px) rotate(1.5deg); }
    50% { transform: translate(-5px, 2px) rotate(-1deg); }
}

/* ═══ MOBILE ═══ */
@media (max-width: 700px) {
    body { justify-content: flex-start; align-items: stretch; touch-action: none; user-select: none; -webkit-user-select: none; }
    .desktop-layout { display: none; }
    .mobile-layout {
        display: flex; flex-direction: column; align-items: center;
        width: 100%; height: 100vh; height: 100dvh;
        position: relative; z-index: 1;
    }
    .mobile-title { font-size: 1.4rem; margin: 4px 0; letter-spacing: 10px; text-align: center; }

    .mobile-top-bar { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 6px 10px; gap: 6px; flex-shrink: 0; }
    .mobile-top-bar .info-box { margin-bottom: 0; padding: 5px 8px; border-left: 1px solid var(--c-mag-glow); flex: 1; text-align: center; }
    .mobile-top-bar .info-box h3 { font-size: 0.42rem; letter-spacing: 2px; margin-bottom: 2px; }
    .mobile-top-bar .info-box p { font-size: 1rem; font-weight: 900; }
    .mobile-top-bar .next-box { flex: 0 0 auto; padding: 4px; }
    .mobile-top-bar .next-box canvas { width: 44px; height: 44px; background: transparent; border: 1px solid #ffffff08; }

    .mobile-layout .board-wrapper { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 0; }
    .mobile-layout .overlay-text { font-size: 0.8rem; letter-spacing: 4px; }
    .mobile-layout .start-btn-mobile { padding: 14px 40px; font-size: 1rem; letter-spacing: 6px; }

    .touch-controls { display: flex; flex-direction: column; gap: 6px; padding: 6px 12px; padding-bottom: max(6px, env(safe-area-inset-bottom)); flex-shrink: 0; }
    .touch-row { display: flex; justify-content: center; gap: 10px; }
    .touch-btn {
        width: 60px; height: 60px; border-radius: 50%;
        border: 1.5px solid var(--c-mag-ghost); background: rgba(255, 0, 255, 0.06);
        color: #ff00ffcc; display: flex; align-items: center; justify-content: center;
        cursor: pointer; transition: all 0.15s;
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 0 15px #ff00ff11, inset 0 0 10px #ff00ff08;
    }
    .touch-btn svg { width: 26px; height: 26px; }
    .touch-btn:active, .touch-btn.active { background: rgba(255, 0, 255, 0.2); border-color: var(--c-mag-dim); box-shadow: 0 0 25px #ff00ff33, inset 0 0 15px #ff00ff15; transform: scale(0.92); }
    .touch-btn.drop-btn { width: 76px; height: 60px; border-radius: 30px; border-color: #00ffff44; background: rgba(0, 255, 255, 0.06); color: #00ffffcc; box-shadow: 0 0 15px #00ffff11, inset 0 0 10px #00ffff08; }
    .touch-btn.drop-btn:active, .touch-btn.drop-btn.active { background: rgba(0, 255, 255, 0.2); border-color: #00ffff88; box-shadow: 0 0 25px #00ffff33; }
}

@media (max-width: 380px) {
    .mobile-top-bar .info-box h3 { font-size: 0.36rem; }
    .mobile-top-bar .info-box p { font-size: 0.85rem; }
    .mobile-title { font-size: 1.2rem; letter-spacing: 6px; }
    .touch-btn { width: 52px; height: 52px; }
    .touch-btn svg { width: 22px; height: 22px; }
    .touch-btn.drop-btn { width: 64px; height: 52px; }
}