@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Share+Tech+Mono&display=swap');

/* --- THEME COLORS --- */
:root, body.theme-synthwave, body.theme-soft-red { --info-bg: rgba(0, 0, 0, 0.6); --info-text: #dddddd; --warn-text: #ff5555; --benefit-text: #ffcc00; --info-border: var(--snake-color); }
body.theme-light, body.theme-light-synthwave, body.theme-light-soft-red { --info-bg: rgba(255, 255, 255, 0.9); --info-text: #111111; --warn-text: #cc0000; --benefit-text: #008800; --info-border: var(--snake-color); }
body.theme-warm, body.theme-warm-synthwave, body.theme-warm-soft-red { --info-bg: rgba(0, 0, 0, 0.4); --info-text: #ffccaa; --warn-text: #ff5544; --benefit-text: #ffcc00; --info-border: var(--snake-color); }

:root { --bg-color: #050a05; --wrapper-bg: #0a140a; --canvas-bg: #0f1b0f; --snake-color: #39ff14; --snake-head: #e6ffe6; --food-color: #adff2f; --text-color: #ccffcc; --accent-glow: rgba(57, 255, 20, 0.3); --overlay-bg: rgba(0, 0, 0, 0.85); --border-gradient: conic-gradient(from 0deg, #39ff14, #006400, #adff2f, #006400, #39ff14); }
body.theme-synthwave { --bg-color: #0d0221; --wrapper-bg: #19053d; --canvas-bg: #260b54; --snake-color: #00ffff; --snake-head: #ffffff; --food-color: #ff00ff; --text-color: #b3ccff; --accent-glow: rgba(0, 255, 255, 0.3); --overlay-bg: rgba(13, 2, 33, 0.85); --border-gradient: conic-gradient(from 0deg, #00ffff, #4b0082, #ff00ff, #4b0082, #00ffff); }
body.theme-soft-red { --bg-color: #1a0a0a; --wrapper-bg: #2a1111; --canvas-bg: #331414; --snake-color: #ff8c8c; --snake-head: #ffe6e6; --food-color: #ffb366; --text-color: #ffcccc; --accent-glow: rgba(255, 140, 140, 0.3); --overlay-bg: rgba(26, 10, 10, 0.85); --border-gradient: conic-gradient(from 0deg, #ff8c8c, #3d2222, #ffb366, #3d2222, #ff8c8c); }
body.theme-light { --bg-color: #e8f0e8; --wrapper-bg: #f4fcf4; --canvas-bg: #ffffff; --snake-color: #00aa00; --snake-head: #004400; --food-color: #e6004c; --text-color: #1a331a; --accent-glow: rgba(0, 0, 0, 0.15); --overlay-bg: rgba(232, 240, 232, 0.95); --border-gradient: conic-gradient(from 0deg, #00aa00, #cccccc, #00aa00, #cccccc, #00aa00); }
body.theme-light-synthwave { --bg-color: #f0f5ff; --wrapper-bg: #ffffff; --canvas-bg: #e6ecfa; --snake-color: #00b3b3; --snake-head: #004d4d; --food-color: #d11ad1; --text-color: #003366; --accent-glow: rgba(0,0,0,0.15); --overlay-bg: rgba(240,245,255,0.95); --border-gradient: conic-gradient(from 0deg, #00b3b3, #cccccc, #d11ad1, #cccccc, #00b3b3); }
body.theme-light-soft-red { --bg-color: #fff0f5; --wrapper-bg: #ffffff; --canvas-bg: #fae6ec; --snake-color: #ff4d4d; --snake-head: #800000; --food-color: #ff9900; --text-color: #660022; --accent-glow: rgba(0,0,0,0.15); --overlay-bg: rgba(255,240,245,0.95); --border-gradient: conic-gradient(from 0deg, #ff4d4d, #cccccc, #ff9900, #cccccc, #ff4d4d); }
body.theme-warm { --bg-color: #2a1b14; --wrapper-bg: #3d281c; --canvas-bg: #4a3224; --snake-color: #ff8c00; --snake-head: #ffeecc; --food-color: #ffcc00; --text-color: #ffccaa; --accent-glow: rgba(255, 140, 0, 0.3); --overlay-bg: rgba(42, 27, 20, 0.9); --border-gradient: conic-gradient(from 0deg, #ff8c00, #8a4a00, #ffcc00, #8a4a00, #ff8c00); }
body.theme-warm-synthwave { --bg-color: #2b112c; --wrapper-bg: #3b183d; --canvas-bg: #210d22; --snake-color: #ff00aa; --snake-head: #ffb3e6; --food-color: #00e5ff; --text-color: #ffccf2; --accent-glow: rgba(255, 0, 170, 0.3); --overlay-bg: rgba(43, 17, 44, 0.9); --border-gradient: conic-gradient(from 0deg, #ff00aa, #8a0055, #00e5ff, #8a0055, #ff00aa); }
body.theme-warm-soft-red { --bg-color: #330000; --wrapper-bg: #4d0000; --canvas-bg: #220000; --snake-color: #ff3333; --snake-head: #ffcccc; --food-color: #ffaa00; --text-color: #ff9999; --accent-glow: rgba(255, 51, 51, 0.3); --overlay-bg: rgba(51, 0, 0, 0.9); --border-gradient: conic-gradient(from 0deg, #ff3333, #660000, #ffaa00, #660000, #ff3333); }

/* --- CORE STYLES --- */
body {
    background-color: var(--bg-color); color: var(--text-color); font-family: 'Orbitron', sans-serif;
    margin: 0; padding: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
    transition: background-color 0.5s ease, color 0.5s ease, cursor 0.2s;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; touch-action: manipulation; 
}

.hide-cursor, .hide-cursor * { cursor: none !important; }

/* Animated Theme Button */
.btn-animated-border {
    position: relative; padding: 2px !important; background: transparent !important;
    border: none !important; border-radius: 4px; overflow: hidden; cursor: pointer; box-shadow: 0 0 15px var(--accent-glow);
}
.btn-animated-border::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent 0%, var(--snake-color) 25%, transparent 50%);
    animation: spin-edge 2s linear infinite; z-index: 0;
}
@keyframes spin-edge { 100% { transform: rotate(360deg); } }
.btn-animated-border .btn-inner {
    position: relative; display: block; background: var(--bg-color); padding: 12px 20px; border-radius: 2px; color: var(--snake-color);
    font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 14px; z-index: 1; transition: background 0.3s, color 0.3s;
}
.btn-animated-border:hover .btn-inner { background: var(--snake-color); color: var(--bg-color); }

.desktop-theme-btn { position: fixed; top: 20px; right: 20px; z-index: 100; }
.mobile-theme-btn { display: none; margin-top: 10px; }

#page-layout { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 80px; width: 100%; padding: 20px; box-sizing: border-box; }
.center-column { display: flex; flex-direction: column; align-items: center; }
.side-ad-column { display: flex; flex-direction: column; gap: 20px; }

.ad-skyscraper {
    width: 160px; height: 300px; background: rgba(128, 128, 128, 0.05); border: 1px dashed var(--snake-color); 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--snake-color); font-family: 'Share Tech Mono', monospace; font-size: 10px; text-align: center; line-height: 1.5;
    opacity: 0.7; border-radius: 8px; transition: border-color 0.5s ease, color 0.5s ease;
}

h1 { color: var(--snake-color); text-shadow: 0 0 15px var(--accent-glow); margin-bottom: 10px; margin-top: 0; letter-spacing: 2px; font-size: 36px; font-weight: 700; text-align: center; transition: color 0.5s ease, text-shadow 0.5s ease; }

/* --- 4. MASTER DEVELOPER TRANSMISSION THEME --- */
body.theme-transmission { 
    --bg-color: #020205; --wrapper-bg: #050a14; --canvas-bg: #000000; 
    --snake-color: #00ffff; --snake-head: #ffffff; --food-color: #ffaa00; 
    --text-color: #e6f2ff; --accent-glow: rgba(0, 255, 255, 0.5);
    --overlay-bg: rgba(2, 2, 5, 0.95);
    --border-gradient: conic-gradient(from 0deg, #00ffff, #003366, #ffaa00, #003366, #00ffff);
    --info-bg: rgba(0, 15, 30, 0.8); --info-text: #00ffff; --warn-text: #ffaa00; --info-border: #00ffff;
}

/* Pulsing effect specifically for your developer name */
.transmission-title {
    color: #ffaa00;
    text-shadow: 0 0 20px #ffaa00;
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0% { text-shadow: 0 0 10px #ffaa00; }
    50% { text-shadow: 0 0 25px #ffaa00, 0 0 40px #ffaa00; }
    100% { text-shadow: 0 0 10px #ffaa00; }
}

#game-container-outer { position: relative; border-radius: 12px; overflow: hidden; padding: 4px; box-shadow: 0 0 40px var(--accent-glow); transition: box-shadow 0.5s ease; }
#game-container-outer::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: var(--border-gradient); z-index: -2; animation: rotate-border 4s linear infinite; }

#game-wrapper { position: relative; border-radius: 8px; padding: 15px; background: var(--wrapper-bg); z-index: 1; transition: background-color 0.5s ease; }

#scoreboard { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 400px; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--snake-color); text-shadow: 0 0 5px var(--accent-glow); transition: color 0.5s ease; }

#pause-btn { background: transparent; color: var(--snake-color); font-family: 'Orbitron', sans-serif; font-weight: bold; border: 1px solid var(--snake-color); padding: 4px 10px; font-size: 10px; cursor: pointer; border-radius: 4px; box-shadow: 0 0 5px var(--accent-glow); transition: all 0.2s; }
#pause-btn:active { background: var(--snake-color); color: var(--bg-color); }

canvas { background-color: var(--canvas-bg); border-radius: 4px; box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.4); border: 1px solid rgba(128, 128, 128, 0.2); transition: background-color 0.5s ease; display: block; width: 100%; max-width: 400px; aspect-ratio: 1 / 1; }

.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; z-index: 10; transition: background-color 0.5s ease; }
.hidden { display: none !important; }
.btn-group { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; }

button.menu-btn { background: transparent; color: var(--snake-color); font-family: 'Orbitron', sans-serif; font-weight: bold; border: 2px solid var(--snake-color); padding: 12px 20px; font-size: 14px; cursor: pointer; transition: all 0.2s ease-in-out; box-shadow: 0 0 5px var(--accent-glow); }
button.menu-btn:hover { background: var(--snake-color); color: var(--bg-color); }

.btn-hardcore { border-color: #ff3333 !important; color: #ff3333 !important; box-shadow: 0 0 5px rgba(255, 51, 51, 0.3) !important; animation: pulse-red 1.5s infinite; }
.btn-hardcore:hover { background: #ff3333 !important; color: #fff !important; }

.instructions { margin-top: 10px; text-align: center; line-height: 1.8; color: var(--text-color); font-family: 'Share Tech Mono', monospace; font-size: 12px; max-width: 85%; padding: 10px; border: 1px dashed rgba(128,128,128,0.4); border-radius: 5px; opacity: 0.9; }
.info-box { text-align: left; line-height: 1.6; max-width: 85%; margin-top: 15px; font-family: 'Share Tech Mono', monospace; font-size: 13px; padding: 12px 18px; border-radius: 5px; background: var(--info-bg); border: 1px dashed var(--info-border); color: var(--info-text); transition: all 0.5s ease; }
.info-box p { margin: 8px 0; }
.highlight { color: var(--snake-color); font-weight: bold; }
.warning-text { color: var(--warn-text); font-weight: bold; }
.benefit-text { color: var(--benefit-text); font-weight: bold; }

.overlay h2 { color: var(--snake-color); margin-top: 0; font-size: 28px; transition: color 0.5s ease; text-shadow: 0 0 10px var(--accent-glow); }
#game-over h2 { color: #ff3333; text-shadow: 0 0 20px rgba(255, 51, 51, 0.5); }

.credits { margin-top: 15px; text-align: center; font-size: 12px; font-family: 'Share Tech Mono', monospace; line-height: 1.8; opacity: 0.7; z-index: 10; }
.credits span { color: var(--snake-color); font-weight: bold; transition: color 0.5s ease; }

/* --- NEW VIRTUAL JOYSTICK CSS --- */
/* --- REACTIVE SPIRAL VIRTUAL JOYSTICK CSS --- */
#joystick-zone {
    display: none; width: 100%; justify-content: center; align-items: center; margin-top: 20px;
    touch-action: none; 
}

#joystick-base {
    width: 130px; height: 130px; border-radius: 50%;
    position: relative; display: flex; justify-content: center; align-items: center;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* Spiral Gradient Flow Background */
#joystick-base::before {
    content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px;
    border-radius: 50%;
    background: var(--border-gradient); /* Dynamically linked to theme score! */
    animation: spin-edge 3s linear infinite;
    z-index: -1; opacity: 0.4;
    transition: opacity 0.3s, filter 0.3s;
}

/* Inner Background to hollow out the spiral */
#joystick-base::after {
    content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: var(--wrapper-bg); /* Matches current theme container */
    border-radius: 50%; z-index: 0;
    transition: background 0.5s ease, box-shadow 0.3s;
}

#joystick-knob {
    width: 55px; height: 55px; border-radius: 50%;
    background: var(--snake-color); 
    box-shadow: inset 0 0 10px rgba(255,255,255,0.4), 0 0 15px var(--snake-color);
    position: absolute; cursor: pointer; z-index: 1;
    transition: background 0.5s ease, box-shadow 0.5s ease, transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- ACTIVE "SPARKS" STATE (When finger touches) --- */
#joystick-base.active-drag::before {
    opacity: 1;
    animation: spin-edge 0.4s linear infinite; /* Hyper-speed spinning */
    filter: drop-shadow(0 0 8px var(--snake-color)) drop-shadow(0 0 15px var(--food-color)); /* Sparks */
}

#joystick-base.active-drag::after {
    box-shadow: inset 0 0 25px rgba(0,0,0,0.8); /* Deepens the center hole */
}

@media (max-width: 1000px) { .side-ad-column { display: none; } #page-layout { gap: 0; } }
@media (max-width: 768px) { 
    .desktop-theme-btn { display: none !important; } 
    .mobile-theme-btn { display: block; } 
    #joystick-zone { display: flex; } /* Reveals on mobile */
    h1 { font-size: 26px; } 
    #game-wrapper { padding: 10px; } 
    .pc-instructions { display: none; } 
    .info-box { font-size: 11px; }
}