/* ══════════════════════════════════════════════════════
   ROUE.CSS — PhysEdBoard
   Layout : le canvas carré remplit tout l'espace dispo.
            Plus de 80 % × 80 % fixe — s'adapte à l'écran.
══════════════════════════════════════════════════════ */

canvas, .roue-canvas-wrap, #roueCanvas {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

:root {
  --bg:         #061428;
  --panel:      #0d2040;
  --panel2:     #112548;
  --panel-rgb:  13,32,64;
  --border:     #1a3a60;
  --border-hi:  rgba(255,255,255,0.08);
  --accent:     #ffd43b;
  --accent-dim: #d1ab20;
  --accent-rgb: 255,212,59;
  --red:        #ff3c3c;
  --text:       rgba(255,255,255,0.88);
  --text-mid:   rgba(255,255,255,0.70);
  --text-dim:   rgba(255,255,255,0.42);
  --dim:        #3a608a;
  --radius:     12px;
  --radius-lg:  18px;
  --tr:         0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --gap:        clamp(6px, 0.8vw, 12px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow Condensed', sans-serif;
  height: 100dvh;
}

/* ── Background layers ── */
.bg-layer    { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.bg-main     {
  background:
    radial-gradient(ellipse 130% 70% at 50% 115%, rgba(0,80,200,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 70%  50% at 12%   0%, rgba(0,50,130,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 70%  50% at 88%   0%, rgba(0,50,130,0.16) 0%, transparent 55%),
    linear-gradient(180deg, #04101e 0%, var(--bg) 40%, #091e3c 100%);
}
.bg-vignette  { background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 35%, rgba(0,0,0,0.52) 100%); }
.bg-scanlines { background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px); opacity: 0.45; }

/* ── App shell ── */
.app {
  position: relative; z-index: 2;
  width: 100%; height: 100dvh;
  display: flex; flex-direction: column;
}

/* ── Stage — remplit tout l'espace sous le header ── */
.stage {
  flex: 1; min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap);
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════
   ROUE LAYOUT
   Le conteneur remplit le stage. Le canvas carré
   se calcule pour prendre le maximum de place sans
   dépasser ni en largeur ni en hauteur.
══════════════════════════════════════════════════════ */
.roue-layout {
  /* Prend tout le stage */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Subtle central glow */
.roue-layout::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,212,59,0.025) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}

/* Canvas wrap — carré, taille dictée par JS resizeCanvas() */
.roue-canvas-wrap {
  position: relative;
  /* La taille réelle est définie par JS (width/height inline).
     aspect-ratio: 1 garantit que le wrapper reste carré. */
  aspect-ratio: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 1;
}

/* Decorative outer ring */
.roue-canvas-wrap::before {
  content: '';
  position: absolute; inset: -10px; border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #0f2848 0deg, #1e3f6e 90deg,
    #0f2848 180deg, #1e3f6e 270deg,
    #0f2848 360deg
  );
  z-index: 0;
}

#roueCanvas {
  border-radius: 50%;
  display: block;
  position: relative; z-index: 2;
  width:  100% !important;
  height: 100% !important;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.8)) drop-shadow(0 8px 32px rgba(0,0,0,0.7));
  cursor: pointer;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Hint text */
.roue-click-hint {
  position: absolute;
  bottom: clamp(-28px, -3.5vh, -20px);
  left: 50%; transform: translateX(-50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(255,255,255,0.18);
  white-space: nowrap;
  pointer-events: none; user-select: none;
}

/* ══════════════════════════════════════════════════════
   RESULT OVERLAY
══════════════════════════════════════════════════════ */
.roue-result-overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(2,2,10,0.88);
  align-items: center; justify-content: center;
  backdrop-filter: blur(30px);
}
.roue-result-overlay.visible { display: flex; animation: rFadeIn 0.18s ease; }

.roue-result-box {
  display: flex; flex-direction: column;
  width: min(420px, 88vw);
  border-radius: 10px; overflow: hidden;
  background: #111120;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 40px 90px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.04);
  animation: rPop 0.42s cubic-bezier(0.34,1.4,0.64,1);
}
.roue-result-badge {
  width: 100%; min-height: clamp(140px, 25vh, 200px);
  background: var(--roue-winner-color, #16a34a);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px,4vh,40px) clamp(20px,4vw,36px) clamp(20px,3.5vh,36px);
  position: relative;
}
.roue-result-badge::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,0.2) 0%, transparent 65%);
  pointer-events: none;
}
.roue-result-label {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.04em; line-height: 1;
  text-align: center; color: #ffffff;
  word-break: break-word; max-width: 100%;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
  position: relative; z-index: 1;
  font-size: clamp(36px, 8vw, 72px);
}
.roue-result-btns {
  display: flex; flex-direction: row; gap: 10px;
  width: 100%;
  padding: clamp(12px,2vh,16px) clamp(14px,2.5vw,20px) clamp(14px,2.5vh,20px);
  background: #111120;
}
.roue-result-btn {
  flex: 1;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(11px,1.6vw,12px); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: clamp(9px,1.5vh,11px) 10px;
  cursor: pointer;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  color: rgba(255,255,255,0.4);
  transition: all 0.15s; min-height: 44px; touch-action: manipulation;
}
.roue-result-btn:hover {
  border-color: rgba(255,255,255,0.45);
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.07);
}

/* ══════════════════════════════════════════════════════
   OPTIONS MODAL
══════════════════════════════════════════════════════ */
.roue-options-overlay {
  display: none; position: fixed; inset: 0; z-index: 450;
  background: rgba(2,2,8,0.90);
  align-items: center; justify-content: center;
  backdrop-filter: blur(16px);
}
.roue-options-overlay.visible { display: flex; animation: rFadeIn 0.18s ease; }

.roue-options-modal {
  background: #08182e;
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  width: min(550px, 98vw);
  max-height: 90dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 40px 80px rgba(0,0,0,0.9);
  animation: modalIn 0.2s cubic-bezier(0.34,1.4,0.64,1);
  position: relative;
}
.roue-options-modal::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.35) 40%, rgba(var(--accent-rgb),0.35) 60%, transparent);
  pointer-events: none;
}

/* Modal header */
.tm-header {
  display: flex; align-items: center; gap: 10px;
  padding: clamp(12px,2vw,15px) clamp(14px,2.5vw,18px);
  border-bottom: 1px solid var(--border-hi); flex-shrink: 0;
}
.tm-title {
  flex: 1; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--text); display: flex; align-items: center; gap: 8px;
}
.tm-title i { font-size: clamp(12px,2vw,15px); color: var(--accent); opacity: 0.8; }
.tm-close {
  background: transparent; border: 1px solid var(--border); border-radius: 7px;
  color: var(--text-dim); width: 32px; height: 32px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: clamp(12px,2vw,15px); transition: var(--tr);
}
.tm-close:hover { border-color: var(--red); color: var(--red); }

/* Modal footer */
.tm-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 10px clamp(14px,2.5vw,18px) 10px; flex-shrink: 0;
}
.tm-btn-next {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(12px,2vw,15px); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 10px 22px; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: #000; border: none;
  transition: filter 0.15s; touch-action: manipulation; min-height: 40px;
}
.tm-btn-next:hover { filter: brightness(1.1); }

.setup-divider { height: 1px; background: var(--border-hi); margin: 0; flex-shrink: 0; }

/* Quick add */
.roue-quick-add {
  display: flex; gap: 10px;
  padding: clamp(10px,1.8vh,15px) clamp(14px,2.5vw,18px) clamp(10px,1.8vh,15px);
  flex-shrink: 0;
}
.roue-quick-input {
  flex: 1;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(14px,2.2vw,17px); font-weight: 600; letter-spacing: 0.06em;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: 6px; color: #fff;
  padding: clamp(7px,1.2vh,9px) 14px;
  outline: none; transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
}
.roue-quick-input::placeholder { color: rgba(255,255,255,0.15); font-style: italic; }
.roue-quick-input:focus {
  border-color: rgba(255,212,59,0.5);
  background: rgba(255,212,59,0.03);
  box-shadow: 0 0 0 3px rgba(255,212,59,0.06);
}
.roue-quick-btn {
  width: clamp(36px,5vw,42px); height: clamp(36px,5vw,42px);
  border-radius: 6px; background: var(--accent); border: none; color: #000;
  font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: filter 0.13s, transform 0.1s; touch-action: manipulation;
}
.roue-quick-btn:hover  { filter: brightness(1.08); }
.roue-quick-btn:active { transform: scale(0.9) translateY(1px); }

/* Entry list */
.roue-entry-list {
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
  padding: clamp(6px,1.2vw,10px) clamp(12px,2vw,16px);
  flex: 1; min-height: 0;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px 10px;
}
.roue-entry-list::-webkit-scrollbar       { width: 3px; }
.roue-entry-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.roue-entry-empty {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(12px,2vw,15px); color: var(--text);
  letter-spacing: 0.12em; text-align: center;
  padding: 20px 0; width: 100%; font-style: italic;
}
.roue-entry-row {
  display: flex; align-items: center; gap: 6px;
  flex: 1 1 calc(50% - 6px); min-width: 0; padding: 4px 0;
}
.roue-entry-input {
  flex: 1; min-width: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(13px,2vw,15px); font-weight: 600; letter-spacing: 0.06em;
  background: transparent; border: none; border-bottom: 1px solid transparent;
  color: var(--text); padding: 2px 4px; outline: none;
  transition: border-color 0.13s, color 0.13s;
}
.roue-entry-input:focus { border-color: var(--accent); color: #fff; }

.roue-entry-del,
.roue-entry-copy {
  background: rgba(255,50,50,0.08); border: none; border-radius: 50%;
  width: 14px; height: 14px; font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: background 0.12s, color 0.12s; margin: 0 5px;
}
.roue-entry-del  { color: rgba(255,80,80,0.4); }
.roue-entry-copy { color: rgba(80,150,255,0.5); }
.roue-entry-del:hover  { color: rgba(255,80,80,0.7); }
.roue-entry-copy:hover { color: rgba(80,150,255,0.8); }
.roue-entry-copy i, .roue-entry-del i { font-size: clamp(13px,2vw,15px); }

/* Color palette */
.roue-colors-section {
  padding: clamp(8px,1.5vh,10px) clamp(14px,2.5vw,18px);
  flex-shrink: 0;
  background: rgba(255,255,255,0.01);
}
.roue-section-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px;
}
.roue-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.45em; text-transform: uppercase;
  color: var(--text); display: flex; align-items: center; gap: 7px;
}
.roue-color-count {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; letter-spacing: 0.12em; color: var(--text);
}
#roueColorPanel { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.roue-pal-item  { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Duration + sound */
.roue-duration-wrap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  padding: clamp(8px,1.5vh,10px) clamp(14px,2.5vw,18px);
  flex-shrink: 0;
}
.roue-duration-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(12px,2vw,15px); font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--text); display: flex; align-items: center; gap: 7px;
}

/* Spin input */
.s-spin { position: relative; width: 76px; }
.s-spin input {
  font-family: 'Bebas Neue', cursive;
  font-size: 26px; line-height: 1; height: 56px;
  text-align: center;
  background: rgba(4,14,32,0.88); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); width: 100%; padding: 6px 32px 6px 4px;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield; appearance: textfield;
}
.s-spin input::-webkit-outer-spin-button,
.s-spin input::-webkit-inner-spin-button { -webkit-appearance: none; }
.s-spin input:focus {
  border-color: rgba(var(--accent-rgb),0.52);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.08);
}
.spin-btns {
  position: absolute; top: 2px; right: 3px; bottom: 2px;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
}
.spin-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text); font-size: clamp(12px,2vw,15px); padding: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px; transition: color 0.14s, background 0.14s;
}
.spin-btn:hover { color: var(--accent); }

/* Sound toggle */
.roue-sound-toggle { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; }
.roue-sound-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.roue-sound-track {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.1); border: 1px solid var(--border); border-radius: 100px;
  transition: background 0.22s, border-color 0.22s;
}
.roue-sound-track::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,0.4); top: 2px; left: 2px;
  transition: transform 0.22s, background 0.22s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.roue-sound-toggle input:checked + .roue-sound-track         { background: var(--accent); border-color: var(--accent-dim); }
.roue-sound-toggle input:checked + .roue-sound-track::before { transform: translateX(20px); background: #000; }

/* Remove toggle */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.1); border: 1px solid var(--border); border-radius: 24px;
  transition: background 0.2s, border-color 0.2s;
}
.toggle-track::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; left: 3px; top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.4); border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.toggle-switch input:checked + .toggle-track         { background: var(--accent); border-color: var(--accent-dim); }
.toggle-switch input:checked + .toggle-track::before { transform: translateX(20px) translateY(-50%); background: #000; }

/* ── Responsive ── */
@media (max-height: 460px) and (orientation: landscape) {
  .roue-click-hint { display: none; }
}

/* ── Animations ── */
@keyframes rFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rPop    { from { opacity: 0; transform: scale(0.88) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }