/* =========================================
   🍓 HEISEI RETRO // THEME ENGINE 🍓
   ========================================= */
:root {
    --bg-cream: #FFFDF0;
    --matcha-green: #8FD14F;
    --matcha-shadow: #76B03F;
    --lime-pastel: #D4F59A;
    --sakura-pink: #FFB3C6;
    --hot-pink: #FF4D85;
    --strawberry-red: #FF3B30;
    --text-brown: #5D4037;
    --white-panel: rgba(255, 255, 255, 0.95);
}

[data-theme="mint-choco"] {
    --bg-cream: #F0FFF4;
    --matcha-green: #38B2AC;
    --matcha-shadow: #319795;
    --lime-pastel: #B2F5EA;
    --sakura-pink: #E2E8F0;
    --hot-pink: #4A5568;
    --strawberry-red: #2D3748;
    --text-brown: #2D3748;
    --white-panel: rgba(255, 255, 255, 0.95);
}

[data-theme="sakura-festival"] {
    --bg-cream: #FFF0F6;
    --matcha-green: #FF85A2;
    --matcha-shadow: #FF4D85;
    --lime-pastel: #FFCCE0;
    --sakura-pink: #FFAACC;
    --hot-pink: #FF1A6C;
    --strawberry-red: #CC0044;
    --text-brown: #4D0022;
    --white-panel: rgba(255, 248, 252, 0.97);
}

[data-theme="fog-night"] {
    --bg-cream: #0d0f1a;
    --matcha-green: #4a6fa5;
    --matcha-shadow: #2d4d7a;
    --lime-pastel: #1a2035;
    --sakura-pink: #2a3050;
    --hot-pink: #7a9ecf;
    --strawberry-red: #5a7db5;
    --text-brown: #c8d8ee;
    --white-panel: rgba(18, 22, 38, 0.97);
}

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap');

body {
    background-color: var(--bg-cream);
    background-image: 
        linear-gradient(var(--sakura-pink) 2px, transparent 2px),
        linear-gradient(90deg, var(--sakura-pink) 2px, transparent 2px);
    background-size: 25px 25px;
    color: var(--text-brown);
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin: 0; padding: 20px;
    display: flex; justify-content: center;
    cursor: crosshair; transition: background 0.4s, color 0.4s;
}

body.system-fail {
    --bg-cream: #050505; --sakura-pink: #220000;
    --matcha-green: #550000; --hot-pink: #ff0000;
    --text-brown: #ff9999; --white-panel: #111; --lime-pastel: #330000;
    animation: crt-flicker 0.2s infinite;
}
body.system-fail .cute-only { display: none; }
body.system-fail .truth-only { display: inline-block; color: red; font-weight: bold; background: black; padding: 0 4px; }
@keyframes crt-flicker { 0% { opacity: 1; text-shadow: 1px 0 0 red; } 50% { opacity: 0.9; text-shadow: -1px 0 0 blue; transform: skewX(0.5deg); } 100% { opacity: 1; text-shadow: 1px 0 0 red; } }
.truth-only { display: none; }

#login-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: var(--bg-cream);
    background-image: radial-gradient(var(--sakura-pink) 3px, transparent 3px);
    background-size: 20px 20px;
    display: flex; justify-content: center; align-items: center;
    z-index: 9999; transition: opacity 0.5s ease;
}
.login-box {
    background: var(--white-panel); border: 5px solid var(--matcha-green);
    border-radius: 30px; padding: 40px; text-align: center;
    box-shadow: 8px 8px 0px var(--sakura-pink); width: 320px;
}
.login-input {
    width: 90%; padding: 12px; margin: 10px 0; border: 3px dashed var(--hot-pink);
    border-radius: 15px; font-family: inherit; font-weight: bold; color: var(--text-brown);
    text-align: center; font-size: 16px; outline: none;
    background: var(--bg-cream); transition: border-color 0.3s;
}
.login-btn {
    background: var(--hot-pink); color: #fff; border: none; margin-top: 15px;
    padding: 12px 25px; border-radius: 20px; font-weight: bold; font-family: inherit;
    cursor: pointer; font-size: 18px; box-shadow: 0 5px 0px var(--strawberry-red);
    transition: 0.1s;
}
.login-btn:active { transform: translateY(5px); box-shadow: 0 0px 0px var(--strawberry-red); }

#portal-wrapper {
    width: 1000px; max-width: 100%; background: var(--white-panel);
    border: 5px solid var(--matcha-green); border-radius: 30px;
    box-shadow: 10px 10px 0px var(--sakura-pink);
    display: flex; flex-direction: column; overflow: hidden; position: relative;
    transition: all 0.4s;
}

header {
    background: repeating-linear-gradient(45deg, var(--sakura-pink), var(--sakura-pink) 15px, var(--hot-pink) 15px, var(--hot-pink) 30px);
    color: #fff; padding: 20px; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 5px dashed var(--strawberry-red); transition: 0.4s;
}
header h1 { margin: 0; font-size: 26px; background: var(--white-panel); color: var(--hot-pink); padding: 5px 20px; border-radius: 25px; border: 3px solid var(--strawberry-red); transition: 0.4s; }
.school-seal { background: var(--lime-pastel); color: var(--text-brown); padding: 5px 15px; font-weight: bold; border-radius: 20px; border: 2px solid var(--matcha-green); transition: 0.4s; }

.theme-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.theme-btn {
    background: var(--white-panel); border: 2px solid var(--text-brown); border-radius: 10px;
    cursor: pointer; font-family: inherit; font-size: 11px; font-weight: bold;
    color: var(--text-brown); padding: 4px 8px; transition: 0.2s;
}
.theme-btn:hover { background: var(--matcha-green); color: #fff; border-color: var(--matcha-green); }
.theme-btn.active-theme { background: var(--hot-pink); color: #fff; border-color: var(--hot-pink); }

#main-grid { display: flex; padding: 20px; gap: 20px; }
#sidebar { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; gap: 15px; }

.menu-box {
    border: 3px solid var(--lime-pastel); background: var(--white-panel); padding: 15px;
    border-radius: 20px; box-shadow: 4px 4px 0px var(--sakura-pink); transition: 0.4s;
}
.menu-box h3 { margin: 0 0 10px 0; font-size: 16px; color: var(--matcha-green); border-bottom: 2px dotted var(--hot-pink); padding-bottom: 5px; }

.nav-tab {
    display: block; width: 100%; text-align: left; font-family: inherit;
    background: var(--white-panel); color: var(--hot-pink); font-size: 14px; font-weight: bold;
    padding: 9px 12px; margin-bottom: 7px;
    border: 3px solid var(--sakura-pink); border-radius: 15px;
    box-shadow: 0 4px 0px var(--sakura-pink); cursor: pointer; transition: 0.1s;
}
.nav-tab:hover { background: var(--lime-pastel); color: var(--text-brown); }
.nav-tab.active {
    background: var(--matcha-green); color: #fff; border-color: var(--matcha-shadow);
    box-shadow: 0 0px 0px transparent; transform: translateY(4px);
}
.nav-tab::before { content: "✦ "; }
.nav-tab.active::before { content: "★ "; }

#content-area { flex-grow: 1; position: relative; overflow-y: auto; max-height: 620px; }
.tab-content { display: none; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.tab-content.active { display: block; }
@keyframes popIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.content-box {
    border: 4px solid var(--sakura-pink); background: var(--white-panel);
    border-radius: 20px; box-shadow: 4px 4px 0px var(--lime-pastel);
    padding: 20px; margin-bottom: 15px; transition: 0.4s;
}
.box-title { color: var(--hot-pink); margin-top: 0; border-bottom: 3px dashed var(--matcha-green); padding-bottom: 8px; }

.roster-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 14px; margin-bottom: 15px; }
.roster-item {
    background: var(--bg-cream); border: 2px solid var(--lime-pastel); padding: 8px 12px;
    border-radius: 12px; transition: 0.2s;
}
.roster-item:hover { transform: scale(1.02); border-color: var(--hot-pink); }
.lead-badge { background: var(--hot-pink); color: #fff; padding: 2px 6px; border-radius: 10px; font-size: 11px; margin-left: 5px; font-weight: bold; }

.cafe-card {
    border: 2px dashed var(--matcha-green); background: var(--white-panel); border-radius: 15px;
    padding: 15px; margin-bottom: 10px; display: flex; align-items: flex-start; gap: 15px;
}
.cafe-day {
    background: var(--sakura-pink); color: var(--text-brown); padding: 5px 12px;
    border-radius: 12px; font-weight: bold; text-align: center; min-width: 42px; flex-shrink: 0;
}

/* Lost & Found board */
.found-board {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px;
}
.found-note {
    border: 3px solid var(--sakura-pink); background: var(--bg-cream);
    border-radius: 15px; padding: 12px; font-size: 13px; line-height: 1.5;
    box-shadow: 3px 3px 0px var(--lime-pastel); transition: 0.2s;
    position: relative;
}
.found-note:hover { transform: rotate(-1deg) scale(1.01); }
.found-note.urgent { border-color: var(--strawberry-red); box-shadow: 3px 3px 0px #ffbbbb; }
.found-note.weird { border-color: var(--matcha-green); border-style: dashed; }
.found-tag {
    display: inline-block; background: var(--hot-pink); color: #fff;
    font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 8px; margin-bottom: 5px;
}
.found-tag.found-tag-green { background: var(--matcha-green); }
.found-tag.found-tag-red { background: var(--strawberry-red); }
.found-note-date { font-size: 10px; color: var(--matcha-green); font-weight: bold; margin-bottom: 4px; }

/* Radio widget */
.radio-box {
    background: var(--white-panel); border: 3px solid var(--lime-pastel);
    border-radius: 20px; padding: 12px; box-shadow: 3px 3px 0px var(--sakura-pink);
    text-align: center; transition: 0.4s;
}
.radio-title { font-size: 11px; font-weight: bold; color: var(--matcha-green); margin-bottom: 6px; }
.radio-screen {
    background: var(--bg-cream); border: 2px solid var(--matcha-green);
    border-radius: 10px; padding: 6px 8px; margin-bottom: 8px;
    font-size: 10px; font-weight: bold; color: var(--hot-pink);
    font-family: 'Courier New', monospace; min-height: 22px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.radio-controls { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.radio-btn {
    background: var(--bg-cream); color: var(--hot-pink); border: 2px solid var(--hot-pink);
    padding: 5px 10px; border-radius: 10px; font-family: inherit; font-weight: bold;
    cursor: pointer; font-size: 11px; transition: 0.1s;
    box-shadow: 0 3px 0px var(--strawberry-red);
}
.radio-btn:active { transform: translateY(3px); box-shadow: none; }
.radio-btn.playing { background: var(--hot-pink); color: #fff; }
.radio-track-dots { display: flex; gap: 4px; justify-content: center; margin-top: 8px; }
.track-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--lime-pastel); border: 2px solid var(--matcha-green);
    cursor: pointer; transition: 0.2s;
}
.track-dot.active { background: var(--hot-pink); border-color: var(--hot-pink); }

/* Mimi core */
#mimi-core {
    text-align: center; border: 4px dashed var(--matcha-green); padding: 15px; background: var(--white-panel);
    border-radius: 20px; cursor: pointer; user-select: none; transition: 0.4s;
}
#mimi-svg { width: 60px; height: 60px; margin: 0 auto 5px auto; transition: 0.1s; }
#mimi-dialogue { font-size: 12px; font-weight: bold; color: var(--hot-pink); }

/* Draggable Stickers */
.sticker {
    position: absolute; width: 60px; height: 60px;
    cursor: grab; z-index: 1000; filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.1));
    transition: filter 0.3s;
}
.sticker:active { cursor: grabbing; }
[data-theme="fog-night"] .sticker { filter: drop-shadow(2px 2px 0px rgba(100,150,255,0.3)) grayscale(0.5); }
CSSEOF
function setTheme(theme, btn) {
    playSfx('click');

    // 🌊 create liquid flash
    const flash = document.createElement('div');
    flash.className = 'theme-flash';
    document.body.appendChild(flash);
    setTimeout(() => flash.remove(), 600);

    if (theme === '') {
        document.documentElement.removeAttribute('data-theme');
    } else {
        document.documentElement.setAttribute('data-theme', theme);
    }

    document.querySelectorAll('.theme-btn').forEach(b => b.classList.remove('active-theme'));
    btn.classList.add('active-theme');

    if (theme === 'fog-night' && !document.body.classList.contains('system-fail')) {
        document.getElementById('radio-screen').style.color = '#7a9ecf';
    } else {
        document.getElementById('radio-screen').style.color = '';
    }
}