/* =========================================================
   JKT48 GAMES — SHARED GLOBAL STYLE
   Hanya fondasi global: theme, reset, utility.
   ========================================================= */

:root { --font: 'Press Start 2P', monospace; }

/* ========================= DARK THEME ========================= */
[data-theme="dark"] {
    --bg: #222831;
    --bg-main: #222831;

    --surface: rgba(57,62,70,.60);
    --surface-border: rgba(148,137,121,.25);

    --text: #DFD0B8;
    --text-secondary: rgba(223,208,184,.70);
    --text-muted: rgba(223,208,184,.45);
    --text-dim: rgba(223,208,184,.25);

    --accent-1: #DFD0B8;
    --accent-1-dim: rgba(223,208,184,.10);
    --accent-1-border: rgba(223,208,184,.30);
    --accent-1-glow: rgba(223,208,184,.15);

    --accent-2: #948979;
    --accent-2-dim: rgba(148,137,121,.15);
    --accent-2-border: rgba(148,137,121,.35);
    --accent-2-glow: rgba(148,137,121,.20);

    --pink: #E76F51;
    --pink-dim: rgba(231,111,81,.12);
    --gold: #E9C46A;

    --card-bg: rgba(57,62,70,.50);
    --card-border: rgba(148,137,121,.20);
    --card-glow: rgba(148,137,121,.08);

    --toggle-bg: rgba(57,62,70,.50);
    --toggle-border: rgba(148,137,121,.20);

    --input-bg: rgba(223,208,184,.08);
    --input-border: rgba(223,208,184,.15);
    --input-focus-border: rgba(223,208,184,.30);

    --noise-opacity: .015;
}

/* ========================= LIGHT THEME ========================= */
[data-theme="light"] {
    --bg: #249D8F;
    --bg-main: #249D8F;

    --surface: rgba(44,175,159,.35);
    --surface-border: rgba(253,240,213,.15);

    --text: #FDF0D5;
    --text-secondary: rgba(253,240,213,.75);
    --text-muted: rgba(253,240,213,.50);
    --text-dim: rgba(253,240,213,.25);

    --accent-1: #E9C46A;
    --accent-1-dim: rgba(233,196,106,.15);
    --accent-1-border: rgba(233,196,106,.30);
    --accent-1-glow: rgba(233,196,106,.15);

    --accent-2: #E76F51;
    --accent-2-dim: rgba(231,111,81,.12);
    --accent-2-border: rgba(231,111,81,.25);
    --accent-2-glow: rgba(231,111,81,.12);

    --pink: #E76F51;
    --pink-dim: rgba(231,111,81,.10);
    --gold: #E9C46A;

    --card-bg: rgba(253,240,213,.10);
    --card-border: rgba(253,240,213,.18);
    --card-glow: rgba(253,240,213,.06);

    --toggle-bg: rgba(253,240,213,.12);
    --toggle-border: rgba(253,240,213,.18);

    --input-bg: rgba(253,240,213,.12);
    --input-border: rgba(253,240,213,.20);
    --input-focus-border: rgba(233,196,106,.50);

    --noise-opacity: .015;
}

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

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    transition: background .4s, color .4s;
}

button, input, textarea, select { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }

.hidden { display: none !important; }

/* ========================= GLOBAL NOISE ========================= */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: 999999;
    pointer-events: none;
    opacity: var(--noise-opacity);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    mix-blend-mode: overlay;
}

/* ========================= UTILITIES ========================= */
.no-scroll { overflow: hidden !important; }
.pixel-font { font-family: var(--font); }
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }

/* Prevent Auto-Zoom on Mobile Inputs */
input[type="text"],
input[type="password"],
input[type="search"],
textarea,
select {
    font-size: 16px !important;
}