/* PIXEL KARAOKE · พิกเซล + นีออน */
@font-face { font-family: "Kanit"; font-weight: 500; src: url("/fonts/kanit-500-thai.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; font-display: swap; }
@font-face { font-family: "Kanit"; font-weight: 500; src: url("/fonts/kanit-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; font-display: swap; }
@font-face { font-family: "Kanit"; font-weight: 700; src: url("/fonts/kanit-700-thai.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; font-display: swap; }
@font-face { font-family: "Kanit"; font-weight: 700; src: url("/fonts/kanit-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; font-display: swap; }
@font-face { font-family: "Jersey 10"; src: url("/fonts/jersey10.woff2") format("woff2"); font-display: swap; }

:root {
  --bg: #0c0a1c;
  --bg2: #16122e;
  --panel: #1d1840;
  --line: #3a3170;
  --text: #f3eeff;
  --dim: #9a90c8;
  --pink: #ff3ea5;
  --cyan: #33e1ff;
  --yellow: #ffe14d;
  --green: #4dff9a;
  --glow-pink: 0 0 6px #ff3ea5aa, 0 0 18px #ff3ea566;
  --glow-cyan: 0 0 6px #33e1ffaa, 0 0 18px #33e1ff66;
  --px: 4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Kanit", system-ui, sans-serif;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
/* ลายจุดพิกเซลบนพื้นหลัง */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 50% -20%, #ff3ea522, transparent 60%),
    radial-gradient(circle at 100% 110%, #33e1ff1a, transparent 55%),
    repeating-linear-gradient(0deg, #ffffff06 0 2px, transparent 2px 8px),
    repeating-linear-gradient(90deg, #ffffff06 0 2px, transparent 2px 8px);
}

.px { font-family: "Jersey 10", "Kanit", monospace; font-weight: 400; letter-spacing: .02em; }
.neon-pink { color: var(--pink); text-shadow: var(--glow-pink); }
.neon-cyan { color: var(--cyan); text-shadow: var(--glow-cyan); }
.dim { color: var(--dim); }
.hide { display: none !important; }

/* กล่องขอบพิกเซล */
.box {
  background: var(--panel);
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line),
    calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line);
}

.btn {
  font: inherit; color: var(--bg); background: var(--cyan);
  border: 0; padding: 10px 16px; cursor: pointer; font-weight: 700;
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--cyan), 0 var(--px) 0 0 #1a8fa6,
    calc(-1 * var(--px)) 0 0 0 var(--cyan), var(--px) 0 0 0 var(--cyan);
  transition: transform .06s;
  user-select: none;
}
.btn:active { transform: translateY(2px); }
.btn.pink { background: var(--pink); box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--pink), 0 var(--px) 0 0 #a3195f,
    calc(-1 * var(--px)) 0 0 0 var(--pink), var(--px) 0 0 0 var(--pink); }
.btn.ghost { background: var(--bg2); color: var(--text); box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line),
    calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line); }
.btn:disabled { opacity: .45; cursor: default; }

input[type=text], input[type=search] {
  font: inherit; color: var(--text); background: var(--bg);
  border: 0; outline: 0; padding: 10px 12px; width: 100%;
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line),
    calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line);
}
input:focus { box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--cyan), 0 var(--px) 0 0 var(--cyan),
    calc(-1 * var(--px)) 0 0 0 var(--cyan), var(--px) 0 0 0 var(--cyan); }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--panel); color: var(--text); padding: 10px 16px;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
  z-index: 50; max-width: 90vw; text-align: center;
  box-shadow: 0 0 0 var(--px) var(--pink), var(--glow-pink);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.dot { display: inline-block; width: 10px; height: 10px; background: var(--dim); vertical-align: middle; }
.dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }