@font-face {
  font-family: "Press Start 2P";
  src: url("fonts/press-start-2p.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #14101f;
  --bg2: #1e1830;
  --panel: #231c38;
  --line: #3a2f5c;
  --text: #f3eefe;
  --muted: #a99cc9;
  --neon: #ff3ea5;
  --neon2: #3ee7ff;
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --btn: clamp(78px, 25vw, 124px);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(ellipse at 50% -10%, #3a1d5c 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 2px, transparent 2px 4px),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
input, textarea { user-select: text; -webkit-user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- kop ---------- */
.marquee {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 14px) 16px 14px;
  background: linear-gradient(180deg, rgba(20,16,31,.97) 70%, rgba(20,16,31,0));
}
.marquee h1 {
  margin: 0; flex: 1;
  font: 20px/1 var(--pixel);
  letter-spacing: 1px;
  display: flex; flex-wrap: wrap; gap: 0 .35em;
}
.marquee h1 span:first-child { color: var(--neon); text-shadow: 0 0 8px var(--neon), 0 0 22px rgba(255,62,165,.55); }
.marquee h1 span:last-child { color: var(--neon2); text-shadow: 0 0 8px var(--neon2), 0 0 22px rgba(62,231,255,.5); }
.tools { display: flex; gap: 8px; }
.tool {
  width: 40px; height: 40px; border-radius: 10px;
  border: 2px solid var(--line); background: var(--bg2);
  font-size: 18px; line-height: 1;
  display: grid; place-items: center;
}
.tool[aria-pressed="true"] { border-color: var(--neon2); color: var(--neon2); box-shadow: 0 0 12px rgba(62,231,255,.45); }
.tool:active { transform: translateY(1px); }

@media (max-width: 380px) { .marquee h1 { font-size: 16px; } }

/* ---------- bord ---------- */
main { padding: 8px 12px calc(env(safe-area-inset-bottom) + 120px); max-width: 1100px; margin: 0 auto; }
.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--btn) + 12px), 1fr));
  gap: 22px 8px;
  justify-items: center;
}
.slot { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; min-width: 0; touch-action: manipulation; }
.slot .name {
  font: 9px/1.5 var(--pixel);
  text-transform: uppercase;
  text-align: center;
  max-width: 100%;
  padding: 5px 7px;
  border-radius: 4px;
  background: #0b0913;
  border: 1px solid #2c2446;
  color: #e7e0f7;
}
.slot .name span {
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  word-break: break-word;
}
.slot .key {
  position: absolute; top: -4px; right: -4px; z-index: 3;
  font: 8px/1 var(--pixel); color: var(--muted);
  background: #0b0913; border: 1px solid #2c2446; border-radius: 3px; padding: 3px 4px;
}
@media (hover: none) { .slot .key { display: none; } }
.empty { text-align: center; color: var(--muted); margin-top: 18vh; font-size: 16px; line-height: 1.8; }
.empty b { color: var(--neon); font-family: var(--pixel); }

/* ---------- de arcadeknop ----------
   Opbouw: zwarte ring (bezel) > gekleurde zijkant (::before, geeft diepte) > bolle kap (.cap) die inzakt bij indrukken. */
.arcade {
  --c: #e8202a; --c-hi: #ff7a70; --c-lo: #8c0a12;
  --size: var(--btn);
  --depth: calc(var(--size) * .075);
  --p: 0;
  position: relative;
  width: var(--size); height: var(--size);
  padding: 0; border: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 61%, rgba(255,255,255,.12) 62.5%, transparent 64%),
    radial-gradient(circle at 50% 35%, #3a3a44 0%, #16161c 55%, #050507 72%);
  box-shadow:
    0 calc(var(--size) * .05) calc(var(--size) * .08) rgba(0,0,0,.7),
    inset 0 2px 1px rgba(255,255,255,.12),
    inset 0 -3px 6px rgba(0,0,0,.8);
  flex: none;
  touch-action: manipulation;
  outline: none;
}
/* voortgangsring rond de knop tijdens afspelen */
.arcade::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(var(--c-hi) calc(var(--p) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67.5%);
          mask: radial-gradient(circle, transparent 66%, #000 67.5%);
  opacity: 0; transition: opacity .15s;
  pointer-events: none;
}
.arcade.playing::after { opacity: 1; }
/* zijkant van de drukknop */
.arcade::before {
  content: ""; position: absolute;
  left: 14%; right: 14%; top: calc(14% + var(--depth) * .2); bottom: calc(14% - var(--depth) * .6);
  border-radius: 50%;
  background: linear-gradient(90deg, var(--c-lo), var(--c) 45%, var(--c-lo));
  box-shadow: 0 2px 3px rgba(0,0,0,.6);
}
.arcade .cap {
  position: absolute; left: 14%; right: 14%; top: 14%; bottom: 14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.25) 12%, transparent 30%),
    radial-gradient(circle at 50% 40%, var(--c-hi) 0%, var(--c) 48%, var(--c-lo) 100%);
  box-shadow:
    inset 0 -4px 8px rgba(0,0,0,.35),
    inset 0 3px 4px rgba(255,255,255,.35);
  transform: translateY(calc(var(--depth) * -1));
  transition: transform .06s ease-out, filter .1s;
  display: grid; place-items: center;
}
.arcade .label {
  font-size: calc(var(--size) * .26); line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45));
  pointer-events: none;
}
.arcade.pressed .cap, .arcade:active .cap { transform: translateY(calc(var(--depth) * -.1)); filter: brightness(.92); }
.arcade.playing .cap {
  filter: brightness(1.18) saturate(1.1);
  box-shadow:
    inset 0 -4px 8px rgba(0,0,0,.25),
    inset 0 3px 4px rgba(255,255,255,.45),
    0 0 calc(var(--size) * .18) var(--c),
    0 0 calc(var(--size) * .4) color-mix(in srgb, var(--c) 55%, transparent);
}
.arcade:focus-visible { box-shadow: 0 0 0 3px var(--neon2); }
.arcade.loading .cap { animation: pulse 1s infinite alternate; }
@keyframes pulse { to { filter: brightness(.7); } }

.arcade[data-color="red"]    { --c: #e8202a; --c-hi: #ff7a70; --c-lo: #7c0710; }
.arcade[data-color="yellow"] { --c: #ffc814; --c-hi: #fff08a; --c-lo: #a36a00; }
.arcade[data-color="green"]  { --c: #22c33b; --c-hi: #8cf28f; --c-lo: #0b6a1b; }
.arcade[data-color="blue"]   { --c: #1f6bff; --c-hi: #7fb0ff; --c-lo: #0a2d8a; }
.arcade[data-color="white"]  { --c: #e6e6ea; --c-hi: #ffffff; --c-lo: #8d8d99; }
.arcade[data-color="black"]  { --c: #2a2a33; --c-hi: #6b6b78; --c-lo: #08080b; }
.arcade[data-color="orange"] { --c: #ff7b12; --c-hi: #ffc07a; --c-lo: #a33b00; }
.arcade[data-color="purple"] { --c: #9b36ff; --c-hi: #d19bff; --c-lo: #4b0f94; }
.arcade[data-color="pink"]   { --c: #ff4fae; --c-hi: #ffade0; --c-lo: #9c1062; }
.arcade[data-color="cyan"]   { --c: #16d9e8; --c-hi: #a0fbff; --c-lo: #05707d; }

/* bewerkmodus: knoppen wiebelen, zijn te verslepen */
body.editing .slot .arcade { animation: wiggle .28s infinite alternate ease-in-out; }
body.editing .slot:nth-child(2n) .arcade { animation-delay: -.14s; }
@keyframes wiggle { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
body.editing .slot { touch-action: none; }
body.editing .slot .name { border-color: var(--neon2); }
.slot.dragging { opacity: .35; }
.drag-ghost { position: fixed; z-index: 50; pointer-events: none; opacity: .9; transform: scale(1.08); }

/* ---------- toevoegen-knop ---------- */
.fab {
  position: fixed; right: 18px; bottom: calc(env(safe-area-inset-bottom) + 18px); z-index: 10;
  width: 72px; height: 72px; border-radius: 50%; border: 0; padding: 0;
  background: radial-gradient(circle at 50% 35%, #3a3a44, #0a0a0e 70%);
  box-shadow: 0 6px 18px rgba(0,0,0,.7), 0 0 0 2px #000;
}
.fab span {
  position: absolute; inset: 9px; border-radius: 50%;
  display: grid; place-items: center;
  font: 26px/1 var(--pixel); color: #0c3312; padding: 2px 0 0 3px;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.8), rgba(255,255,255,.2) 14%, transparent 32%),
    radial-gradient(circle at 50% 40%, #8cf28f, #22c33b 50%, #0b6a1b);
  transform: translateY(-4px);
  box-shadow: 0 4px 0 #0b5a18, inset 0 -3px 6px rgba(0,0,0,.3);
  transition: transform .06s, box-shadow .06s;
}
.fab:active span { transform: translateY(0); box-shadow: 0 0 0 #0b5a18, inset 0 -3px 6px rgba(0,0,0,.3); }

/* ---------- panelen / dialogen ---------- */
.panel {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  padding: 20px;
  box-shadow: 0 0 0 1px #000, 0 20px 60px rgba(0,0,0,.6), 0 0 30px rgba(255,62,165,.15);
}
.panel h2 { font: 14px/1.3 var(--pixel); margin: 0 0 16px; color: var(--neon2); text-shadow: 0 0 8px rgba(62,231,255,.5); }
dialog.sheet { width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
dialog::backdrop { background: rgba(5,3,10,.72); backdrop-filter: blur(3px); }

input:not([type]), input[type="password"], input[type="text"] {
  width: 100%; padding: 12px 14px; margin: 0 0 10px;
  border-radius: 10px; border: 2px solid var(--line);
  background: #120e1e; color: var(--text); font-size: 16px;
}
input:focus { outline: none; border-color: var(--neon2); }
.row { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; }
.primary, .ghost, .danger {
  padding: 11px 18px; border-radius: 10px; border: 2px solid var(--line); background: transparent; font-weight: 600;
}
.primary { background: var(--neon); border-color: var(--neon); color: #1a0010; box-shadow: 0 0 14px rgba(255,62,165,.4); }
.primary:disabled { opacity: .5; }
.danger { color: #ff6b6b; border-color: #5c2a3a; }
.hint { color: var(--muted); font-size: 13px; }
.err { color: #ff6b6b; min-height: 1.4em; margin: 8px 0 0; }

.rec-wrap { display: flex; align-items: center; gap: 18px; }
.arcade.rec { --size: 118px; }
.arcade.rec .label { font: 15px/1 var(--pixel); color: #fff; }
.arcade.rec.recording .cap { animation: recblink .8s infinite alternate; }
.arcade.rec.recording .label { font-size: 22px; }
@keyframes recblink { to { filter: brightness(1.35); box-shadow: 0 0 26px var(--c), inset 0 -4px 8px rgba(0,0,0,.25); } }
.rec-info { flex: 1; min-width: 0; }
.rec-time { font: 22px/1 var(--pixel); margin-bottom: 10px; }
#recLevel { width: 100%; height: 40px; display: block; margin-bottom: 8px; border-radius: 6px; background: #0b0913; }
.or { text-align: center; color: var(--muted); margin: 16px 0 10px; font-size: 13px; }
.filebtn {
  display: block; text-align: center; padding: 13px; border-radius: 10px;
  border: 2px dashed var(--line); cursor: pointer;
}
.filebtn:active { background: #2a2244; }

.preview-row { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.arcade.preview { --size: 96px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; }
.swatches .arcade { --size: 42px; }
.swatches .arcade .cap { transform: translateY(-2px); }
.swatches .arcade.sel { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--neon2); }
.check { display: flex; gap: 10px; align-items: center; margin: 6px 0; }
.check input { width: 20px; height: 20px; accent-color: var(--neon); }
.check small { color: var(--muted); }
.slider { display: flex; gap: 10px; align-items: center; margin: 6px 0 10px; }
.slider input { flex: 1; accent-color: var(--neon2); }
.slider span { width: 48px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

.overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: var(--bg); }
.overlay[hidden] { display: none; }
.login .panel { width: min(360px, 100%); text-align: center; }
.login h2 { font-size: 18px; color: var(--neon); text-shadow: 0 0 10px var(--neon); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.login p { color: var(--muted); margin: 0 0 14px; }
.big { width: 100%; }
.arcade-small {
  padding: 14px; border: 0; border-radius: 12px;
  font: 14px/1 var(--pixel); color: #0c3312;
  background: linear-gradient(#8cf28f, #22c33b);
  box-shadow: 0 5px 0 #0b5a18; transform: translateY(-2px);
}
.arcade-small:active { transform: translateY(3px); box-shadow: 0 0 0 #0b5a18; }

.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 104px); z-index: 60;
  transform: translateX(-50%);
  background: #0b0913; border: 2px solid var(--line); border-radius: 12px;
  padding: 10px 14px; display: flex; gap: 14px; align-items: center;
  max-width: calc(100vw - 32px);
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
.toast[hidden] { display: none; }
.toast button { background: none; border: 0; color: var(--neon2); font-weight: 700; padding: 4px; }
.busy { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(5,3,10,.6); font: 12px var(--pixel); color: var(--neon2); }

@media (prefers-reduced-motion: reduce) {
  body.editing .slot .arcade, .login h2 { animation: none; }
}

.footer { text-align: center; margin-top: 48px; font-size: 13px; }
.footer a { color: var(--muted); }