/* Base look for the arcade's own pages (profile, forum): colours, background, layout, headings,
   buttons, notes. Page-specific styles stay in each page. */
:root {
  --bg: #0d0b1e;
  --bg2: #161233;
  --card: #1d1840;
  --text: #f1eeff;
  --muted: #a9a3cc;
  --pink: #ff4fd8;
  --cyan: #3ff2ff;
  --yellow: #ffe24a;
  --red: #ff7a8a;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255, 79, 216, 0.18), transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, rgba(63, 242, 255, 0.14), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 72px 16px 64px; }
.crumbs { color: var(--muted); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--cyan); }
header { margin: 22px 0 30px; }
h1 { font-family: 'Press Start 2P', monospace; font-size: clamp(18px, 5vw, 28px); line-height: 1.4; margin: 0; color: var(--cyan);
  overflow-wrap: anywhere; }
header p { color: var(--muted); margin: 10px 0 0; }
h2 { font-family: 'Press Start 2P', monospace; font-size: 13px; color: var(--pink); letter-spacing: 1px; margin: 0 0 16px; }

.btn { display: inline-block; font: 600 13px Inter, system-ui, sans-serif; padding: 8px 12px; border-radius: 10px; cursor: pointer;
  text-decoration: none; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.18); background: var(--bg); color: var(--text); }
.btn:hover { border-color: var(--cyan); }
.btn.primary { background: var(--pink); border-color: transparent; color: #1a0016; }
.btn.danger { color: var(--red); border-color: rgba(255, 122, 138, 0.45); }
.btn.danger.sure { background: var(--red); color: #1a0016; border-color: transparent; }
.btn:disabled { opacity: 0.6; cursor: wait; }

.note { padding: 26px 18px; border-radius: 14px; border: 2px dashed rgba(255, 255, 255, 0.15); color: var(--muted); text-align: center; line-height: 1.5; }
.note a { color: var(--cyan); }
.error { color: var(--red); }