@font-face { font-family: "Titan One"; src: url("TitanOne.ttf") format("truetype"); font-display: swap; }

:root {
  --bg: #0b1020;
  --panel: rgba(12, 18, 40, 0.92);
  --line: rgba(255, 255, 255, 0.14);
  --text: #eef1fb;
  --muted: #9aa6c8;
  --accent: #ffcc52;
  --rec: #ff3b4a;
}

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}
body { position: fixed; inset: 0; }

/* Scene : le canvas remplit tout l'ecran, ou un cadre 9:16 centre en mode TikTok. */
#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); }
#frame { position: relative; width: 100vw; height: 100vh; height: 100dvh; background: #000; }
/* !important : Unity impose parfois un style inline (taille par defaut du player) au demarrage. */
#unity-canvas { display: block; width: 100% !important; height: 100% !important; outline: none; touch-action: none; background: var(--bg); }

body.tiktok #stage { background: radial-gradient(ellipse at center, #141a33 0%, #05070f 75%); }
body.tiktok #frame { box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 20px 80px rgba(0,0,0,0.7); }

/* ── Chargement ─────────────────────────────────────────────────────────── */
#loader {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; padding: 24px; box-sizing: border-box;
  background: radial-gradient(ellipse at 50% 35%, #1b2550 0%, #0b1020 70%);
  transition: opacity .4s ease;
}
#loader.hidden { opacity: 0; pointer-events: none; }
#loader img { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
#loader h1 {
  margin: 0; font-family: "Titan One", system-ui, sans-serif; font-weight: 400;
  font-size: clamp(34px, 9vw, 64px); letter-spacing: 2px; color: var(--accent);
  text-shadow: 0 3px 0 #000, 0 0 30px rgba(255, 190, 80, .35); text-align: center;
}
#loader p { margin: 0; color: var(--muted); font-size: 15px; text-align: center; max-width: 420px; }
#progress { width: min(320px, 80vw); height: 10px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
#progress > div { height: 100%; width: 0%; background: linear-gradient(90deg, #ffb238, #ffe08a); transition: width .2s ease; }
#progress-label { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Ecran "Jouer" (mobile) : debloque le son et propose le plein ecran ── */
#tap-start {
  position: fixed; inset: 0; z-index: 25; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; padding: 24px; box-sizing: border-box;
  background: rgba(5, 8, 18, 0.78); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
#tap-start.visible { display: flex; }
#tap-start button {
  font-family: "Titan One", system-ui, sans-serif; font-size: 30px; letter-spacing: 1px;
  padding: 16px 54px; border: 0; border-radius: 16px; color: #1c1405;
  background: linear-gradient(#ffe08a, #ffb238); box-shadow: 0 6px 0 #a8661a, 0 12px 30px rgba(0,0,0,.5);
}
#tap-start button:active { transform: translateY(3px); box-shadow: 0 3px 0 #a8661a; }
#tap-start p { margin: 0; font-size: 14px; color: var(--muted); text-align: center; max-width: 360px; line-height: 1.4; }

/* ── Panneau TikTok (hors du canvas : n'apparait jamais dans l'enregistrement) ── */
#tiktok-panel {
  position: fixed; z-index: 15; display: none; box-sizing: border-box;
  width: 260px; padding: 16px; border-radius: 16px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(0,0,0,.5);
  font-size: 14px; line-height: 1.45;
}
body.tiktok #tiktok-panel { display: block; }
#tiktok-panel h2 { margin: 0 0 4px; font-family: "Titan One", system-ui, sans-serif; font-weight: 400; font-size: 20px; color: var(--accent); }
#tiktok-panel .muted { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
#tiktok-panel button {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 10px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255,255,255,.07); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer;
}
#tiktok-panel button:hover { background: rgba(255,255,255,.13); }
#tiktok-panel button.rec { background: var(--rec); border-color: transparent; color: #fff; }
#tiktok-panel button.rec:hover { filter: brightness(1.08); }
#tiktok-panel button.recording { background: #fff; color: #b0101c; }
#rec-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
button.recording #rec-dot { border-radius: 2px; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
#rec-status { margin-top: 10px; font-size: 13px; color: var(--muted); min-height: 18px; font-variant-numeric: tabular-nums; }
#tiktok-panel ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; }
#tiktok-panel li { margin: 3px 0; }
#tiktok-panel #tt-toggle { display: none; }

/* Ecran trop etroit pour un panneau lateral (telephone, petite fenetre) : bouton flottant
   repliable, toujours hors canvas cote enregistrement (le MediaRecorder ne capture que le canvas). */
body.tiktok.narrow #tiktok-panel {
  left: 10px !important; top: 10px !important; right: auto; width: min(280px, calc(100vw - 20px));
  padding: 12px; transform: none;
}
body.tiktok.narrow #tiktok-panel.collapsed > :not(#tt-toggle) { display: none; }
body.tiktok.narrow #tiktok-panel.collapsed { width: auto; padding: 0; background: transparent; border: 0; box-shadow: none; }
body.tiktok.narrow #tiktok-panel #tt-toggle {
  display: inline-flex; margin: 0; width: auto; padding: 7px 12px; font-size: 13px;
  background: rgba(10, 14, 30, .8);
}

#unity-warning { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 30; display: none; max-width: 92vw; }
#unity-warning div { padding: 10px 14px; border-radius: 10px; margin-bottom: 6px; font-size: 14px; color: #111; background: #ffd94d; }
#unity-warning div.error { background: #ff5a5a; color: #fff; }