/* ═══════════════════════════════════════════════════════════
   DEBLOCK STUDIOS — pixel forge design system, applied to BobCord
   Adapted from Deblock-Studios/website css/main.css
   Design system: pixel forge — orange voxel, blocky edges
   Fonts: Press Start 2P (display) / Space Grotesk (body)
   ════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────
   BobCord's own token names are preserved so every existing
   rule in each page keeps working; only the values change. */
:root,
[data-theme="cendre"] {
  --bg: #0b0703;
  --bg2: #150d05;
  --panel: #150d05;
  --panel2: #201408;
  --ink: #f6efe3;
  --text: #f6efe3;
  --muted: #b09a83;
  --accent: #ff7a1a;
  --accent2: #ffb054;
  --accent-glow: rgba(255, 122, 26, .35);
  --amber: #ffc75e;
  --ok: #7ed957;
  --err: #ff5c4d;
  --warn: #ffc75e;
  --danger: #ff5c4d;
  --border: rgba(255, 148, 43, .18);
  --border2: rgba(255, 148, 43, .32);
  --hover: rgba(255, 148, 43, .09);
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, .65);
  --landing-glow: rgba(255, 122, 26, .18);
  --landing-glow2: rgba(255, 199, 94, .10);
  --hint-code: #ffc75e;
  --toast-bg: #150d05;
  --bubble: #1d1207;
  --bubble-border: rgba(255, 148, 43, .14);
  --bubble-mine: #2e1a08;
  --bubble-bob: linear-gradient(145deg, rgba(255, 122, 26, .18), rgba(255, 199, 94, .07));
  --composer-bg: #1d1207;

  --grad: linear-gradient(120deg, #ff5e1a 0%, #ff9426 55%, #ffc75e 120%);
  --grad-soft: linear-gradient(120deg, rgba(255,126,26,.16), rgba(255,199,94,.10));
  --bevel-dark: rgba(20, 8, 0, .38);
  --bevel-light: rgba(255, 255, 255, .28);

  --radius: 10px;
  --font: "Space Grotesk", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display: "Press Start 2P", system-ui, sans-serif;
  --transition: background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .18s ease;
}

/* Embers redder — alternate forge heat */
[data-theme="amoled"] {
  --bg: #060301;
  --bg2: #120802;
  --panel: #120802;
  --panel2: #1d0f04;
  --accent: #ff5a1f;
  --accent2: #ffb054;
  --amber: #ffd166;
  --grad: linear-gradient(120deg, #ff3d1f 0%, #ff8a1f 55%, #ffd166 120%);
  --grad-soft: linear-gradient(120deg, rgba(255,61,31,.2), rgba(255,209,102,.12));
  --border: rgba(255, 90, 31, .2);
  --border2: rgba(255, 90, 31, .36);
  --hover: rgba(255, 90, 31, .1);
  --bubble: #1a0d04;
  --bubble-mine: #341505;
  --bubble-border: rgba(255, 90, 31, .16);
  --bubble-bob: linear-gradient(145deg, rgba(255,61,31,.2), rgba(255,209,102,.08));
  --composer-bg: #1a0d04;
  --landing-glow: rgba(255, 61, 31, .18);
}

/* Light forge — "papier" variant of the same palette */
[data-theme="flashbang"] {
  --bg: #fdf6ec;
  --bg2: #f5e8d6;
  --panel: #fffaf2;
  --panel2: #f7ead6;
  --ink: #2b1a08;
  --text: #2b1a08;
  --muted: #8a6a48;
  --accent: #e05a00;
  --accent2: #b34800;
  --accent-glow: rgba(224, 90, 0, .22);
  --amber: #b34800;
  --ok: #2f8a34;
  --err: #c62f1f;
  --warn: #a36a00;
  --danger: #c62f1f;
  --border: rgba(120, 72, 20, .2);
  --border2: rgba(120, 72, 20, .36);
  --hover: rgba(224, 90, 0, .08);
  --shadow: 0 22px 50px -24px rgba(80, 40, 0, .4);
  --landing-glow: rgba(224, 90, 0, .12);
  --landing-glow2: rgba(200, 120, 20, .1);
  --hint-code: #b34800;
  --toast-bg: #fffaf2;
  --bubble: #fffaf2;
  --bubble-border: rgba(120, 72, 20, .18);
  --bubble-mine: #f7e3c8;
  --bubble-bob: linear-gradient(145deg, rgba(224,90,0,.12), rgba(200,120,20,.07));
  --composer-bg: #fffaf2;
  --bevel-dark: rgba(90, 50, 10, .22);
  --bevel-light: rgba(255, 255, 255, .7);
  --grad: linear-gradient(120deg, #e05a00 0%, #ef8010 55%, #d99a20 120%);
  --grad-soft: linear-gradient(120deg, rgba(224,90,0,.12), rgba(200,120,20,.08));
}

/* Soft grey-warm variant */
[data-theme="gris-clair"] {
  --bg: #1a140e;
  --bg2: #241a12;
  --panel: #241a12;
  --panel2: #2f2318;
  --ink: #f2e9dc;
  --text: #f2e9dc;
  --muted: #a99684;
  --accent: #e08a3c;
  --accent2: #f0ad6a;
  --amber: #f0c088;
  --border: rgba(224, 138, 60, .18);
  --border2: rgba(224, 138, 60, .3);
  --hover: rgba(224, 138, 60, .08);
  --bubble: #2a1f15;
  --bubble-mine: #3a2a1a;
  --bubble-border: rgba(224, 138, 60, .14);
  --composer-bg: #2a1f15;
  --landing-glow: rgba(224, 138, 60, .14);
  --grad: linear-gradient(120deg, #c9702a 0%, #e08a3c 55%, #f0c088 120%);
  --grad-soft: linear-gradient(120deg, rgba(201,112,42,.16), rgba(240,192,136,.1));
}

/* ── Base ─────────────────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

/* Warm ember glows behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1000px 700px at 85% -10%, rgba(255, 122, 26, .10), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(255, 199, 94, .07), transparent 60%),
    var(--bg);
}

::selection { background: rgba(255, 122, 26, .4); color: #fff; }

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--accent), rgba(255, 199, 94, .5));
  border-radius: 8px;
  border: 2px solid var(--bg);
}

/* ── Pixel-forge chunky bevel ────────────────────────── */
.forge-bevel,
.card,
.panel,
.modal-card,
.radio-card,
.stat,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea {
  box-shadow:
    inset -3px -3px 0 var(--bevel-dark),
    inset 3px 3px 0 var(--bevel-light);
}

/* ── Display typography ──────────────────────────────── */
.brand h1,
.landing h1,
.auth-card h1,
h1.forge-title {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.6;
  text-transform: uppercase;
}

.grad-text,
.brand h1 {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Pixel bar used as an underline accent (matches Deblock section heads) */
.forge-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 8px;
  margin-top: 14px;
  background: var(--grad);
  box-shadow: inset -3px -3px 0 var(--bevel-dark), inset 3px 3px 0 var(--bevel-light);
}

/* ── Buttons ──────────────────────────────────────────── */
button,
.btn,
.btn.primary,
.btn.secondary,
.row-btns .btn {
  font-family: var(--display);
  font-weight: 400;
  font-size: .66rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 8px;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s, background .2s, color .2s;
}

.btn,
button.primary,
.btn.primary {
  background: var(--grad);
  color: #1c0d02;
  border: none;
  padding: 13px 24px;
  box-shadow:
    inset -4px -4px 0 var(--bevel-dark),
    inset 4px 4px 0 var(--bevel-light),
    0 10px 30px -10px rgba(255, 122, 26, .55);
}
.btn:hover,
button.primary:hover,
.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset -4px -4px 0 var(--bevel-dark),
    inset 4px 4px 0 var(--bevel-light),
    0 16px 38px -10px rgba(255, 140, 26, .7);
}
.btn:active,
button.primary:active { transform: translateY(0); }

button.secondary,
.btn.secondary,
button.ghost,
.btn.ghost {
  background: var(--surface, rgba(255, 148, 43, .045));
  border: 1px solid var(--border2);
  color: var(--ink);
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .35), inset 3px 3px 0 rgba(255, 255, 255, .08);
}
button.secondary:hover,
.btn.secondary:hover,
button.ghost:hover,
.btn.ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 148, 43, .75);
  background: var(--hover);
}

button.danger,
.btn.danger { background: linear-gradient(120deg, #e03a1f 0%, #ff6a4d 100%); color: #fff; }
button.warn,
.btn.warn { background: linear-gradient(120deg, #c98a12 0%, #ffc75e 100%); color: #1c0d02; }

button:disabled,
.btn:disabled { opacity: .5; transform: none !important; cursor: not-allowed; }

/* Icon-only controls (gear, emoji, close) shouldn't shout in display font */
.gear,
.icon-btn,
.close-btn,
.play-btn,
.emoji-toggle,
.chan-close {
  font-family: var(--font) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ── Inputs ───────────────────────────────────────────── */
input,
textarea,
select {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  transition: border-color .2s, box-shadow .2s;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow:
    inset -3px -3px 0 var(--bevel-dark),
    inset 3px 3px 0 var(--bevel-light),
    0 0 0 3px rgba(255, 122, 26, .18);
}
input::placeholder,
textarea::placeholder { color: var(--muted); opacity: .7; }

label {
  color: var(--accent2);
  font-family: var(--display);
  font-size: .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Cards & panels ───────────────────────────────────── */
.card,
.radio-card,
.stat {
  background: linear-gradient(165deg, var(--panel2), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ── Scrollable chat surfaces ─────────────────────────── */
.msg,
.message {
  border-radius: var(--radius);
  border: 1px solid var(--bubble-border);
  background: var(--bubble);
}

/* ── Auth gate ─────────────────────────────────────────── */
.forge-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
  overflow-y: auto;
}

.forge-gate {
  width: 100%;
  max-width: 420px;
  animation: forgeGateIn .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes forgeGateIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.forge-gate-card {
  padding: 30px 28px 24px;
  border-radius: 14px;
  background:
    radial-gradient(520px 260px at 50% 0%, var(--grad-soft), transparent 70%),
    linear-gradient(165deg, var(--panel2), var(--panel));
  border: 1px solid var(--border2);
  box-shadow:
    inset -4px -4px 0 var(--bevel-dark),
    inset 4px 4px 0 var(--bevel-light),
    var(--shadow);
}

.forge-gate-brand { text-align: center; margin-bottom: 22px; }
.forge-gate-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border-radius: 8px;
  font-family: var(--display);
  font-size: 1.05rem;
  color: #1c0d02;
  background: var(--grad);
  box-shadow: inset -3px -3px 0 var(--bevel-dark), inset 3px 3px 0 var(--bevel-light);
}
.forge-gate-brand h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .02em;
  font-size: clamp(1.05rem, 3.4vw, 1.5rem);
  line-height: 1.6;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.forge-gate-brand p { margin: 10px 0 0; color: var(--muted); font-size: .9rem; }

.forge-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  margin-bottom: 20px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--border);
}
[data-theme="flashbang"] .forge-tabs { background: rgba(120, 72, 20, .07); }
.forge-tab {
  padding: 10px 8px;
  border-radius: 6px;
  font-family: var(--display);
  font-size: .6rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  border: none;
  background: none;
  cursor: pointer;
  transition: color .2s, background .2s, box-shadow .2s;
}
.forge-tab:hover { color: var(--ink); }
.forge-tab.is-on {
  color: #1c0d02;
  background: var(--grad);
  box-shadow: inset -2px -2px 0 var(--bevel-dark), inset 2px 2px 0 var(--bevel-light);
}

.forge-form { display: flex; flex-direction: column; gap: 7px; }
.forge-form label { margin-top: 8px; }
.forge-form input { width: 100%; padding: 12px 14px; font-size: .95rem; }

.forge-gate-err {
  min-height: 1.2em;
  margin: 12px 0 0;
  font-size: .82rem;
  color: var(--err);
}
.forge-gate-ok {
  min-height: 1.2em;
  margin: 12px 0 0;
  font-size: .82rem;
  color: var(--ok);
}
.forge-gate-submit { width: 100%; margin-top: 14px; padding: 14px 20px; }

/* Text-style links: "Mot de passe oublié ?" / "← Revenir" */
.forge-link {
  align-self: flex-start;
  padding: 2px 0;
  font-family: var(--display);
  font-size: .6rem;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--accent2);
  background: none;
  border: none;
  border-bottom: 2px solid var(--border2);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.forge-link:hover { color: var(--ink); border-bottom-color: var(--accent); }
.forge-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.forge-forgot { margin-top: 10px; }
.forge-back { align-self: center; margin-top: 16px; }
[hidden] { display: none !important; }

.forge-gate-foot {
  margin: 18px 0 0;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .8;
}

/* Inline variant, used inside a page's own landing card */
.forge-gate-inline .forge-gate-card { box-shadow: none; background: none; border: none; padding: 0; }

/* ── Emoji without a remote CDN ────────────────────────── */
.bc-emoji-text {
  display: inline-block;
  padding: 0 .25em;
  border-radius: 5px;
  font-size: .92em;
  color: var(--accent2);
  background: var(--hover);
  border: 1px solid var(--border);
  vertical-align: middle;
}
.bc-emoji-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .3rem .35rem;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--accent2);
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.bc-emoji-chip:hover { border-color: var(--accent); color: var(--ink); }

/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}