:root {
  color-scheme: dark;
  --bg: #070c18;
  --panel: #111a2c;
  --panel-soft: #1a263d;
  --text: #f7f8fb;
  --muted: #9ca9bf;
  --accent: #ffbd43;
  --danger: #eb5c63;
  --success: #36cd8a;
  --info: #65aafc;
  --border: rgba(162, 180, 212, 0.19);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Éléments fonctionnels de la version connectée. */
.player-code-field { margin-top: 14px; }
.player-centered-subtitle { margin: 0 auto; }
.player-round-result { width: min(920px, 100%); margin: 0 auto; }
.player-wait-next { margin-top: 20px; text-align: center; }
.final-summary__actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.large-number { font-size: clamp(2rem, 7vw, 4rem); font-weight: 900; color: var(--accent); }

.field-label { margin: 10px 0 6px; color: var(--muted); font-weight: 700; }
.input {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: #171a2e; color: var(--text);
}

.button-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.button {
  min-height: 42px; padding: 9px 14px; border: 1px solid var(--accent); border-radius: 10px;
  background: var(--accent); color: #17192c; font-weight: 800; cursor: pointer;
}
.button:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: 0.45; }
.button--secondary { border-color: var(--border); background: var(--panel-soft); color: var(--text); }
.button--danger { border-color: var(--danger); background: var(--danger); color: white; }

.status { min-height: 1.4em; margin: 10px 0 0; color: var(--muted); }
.status--error { color: #ff9fa5; }
.status--success { color: #7ce9ae; }
.timer { min-width: 100px; text-align: center; font-size: clamp(2rem, 8vw, 4.8rem); font-weight: 950; color: var(--accent); }

.tile-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 14px 0; }
.tile {
  width: 58px; height: 58px; padding: 0; display: grid; place-items: center;
  border: 2px solid var(--border); border-radius: 12px; background: var(--panel-soft);
  color: var(--text); font-size: 1.7rem; font-weight: 900; cursor: pointer;
}
.tile--used { opacity: 0.28; filter: grayscale(1); }
.tile--selected { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 72%); }
.tile--result { background: #344b45; }
.tile--final { border-color: var(--success); }
.letter-answer { min-height: 64px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; justify-content: center; padding: 10px; border: 1px dashed var(--border); border-radius: 12px; }
.answer-chip { min-width: 44px; min-height: 44px; border: 1px solid var(--accent); border-radius: 9px; background: var(--accent); color: #17192c; font-weight: 900; cursor: grab; touch-action: none; }
.operation-row { display: flex; justify-content: center; gap: 9px; margin: 10px 0; }
.operation-button { min-width: 52px; font-size: 1.25rem; }
.operation-button.is-active { outline: 3px solid white; }

html {
  background: var(--bg);
}

body.solo-studio-focus {
  min-width: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% -8%, rgba(42, 105, 228, 0.18), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(255, 189, 67, 0.09), transparent 27%),
    #070c18;
}

.focus-main {
  width: min(1260px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0 34px;
}

.focus-setup {
  min-height: calc(100vh - 54px);
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(560px, 1.3fr);
  gap: 32px;
  align-items: center;
}

.setup-hero {
  padding: 20px 8px;
}

.setup-panel {
  width: 100%;
  padding: 30px;
  border: 1px solid rgba(255, 189, 67, 0.44);
  border-radius: 18px;
  background: rgba(15, 24, 43, 0.97);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
}

.setup-brand {
  margin: 0 0 9px;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.setup-hero h1 {
  max-width: 660px;
  margin: 0;
  font-size: clamp(2.65rem, 4.25vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.setup-subtitle {
  max-width: 600px;
  margin: 21px 0 0;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.65;
}

.entry-points {
  display: grid;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.entry-points li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #dce4f2;
}

.entry-points b {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 189, 67, 0.24);
  border-radius: 10px;
  background: rgba(255, 189, 67, 0.07);
  color: var(--accent);
}

.setup-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 23px;
}

.setup-panel__head h2 {
  margin: 0 0 5px;
  font-size: 1.45rem;
}

.setup-panel__head p {
  margin: 0;
}

.focus-field {
  display: grid;
  gap: 7px;
}

.focus-field > span {
  color: #dfe6f2;
  font-size: 0.84rem;
  font-weight: 800;
}

.focus-field .input,
.focus-field .select {
  min-height: 50px;
  border-color: rgba(162, 180, 212, 0.25);
  background: #0a1221;
}

.focus-field .input:focus,
.focus-field .select:focus {
  outline: 3px solid rgba(255, 189, 67, 0.12);
  border-color: rgba(255, 189, 67, 0.72);
}

.advanced-card {
  margin-top: 15px;
  overflow: hidden;
  border: 1px solid rgba(162, 180, 212, 0.20);
  border-radius: 14px;
  background: #0c1424;
}

.advanced-card summary {
  min-height: 72px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 160ms ease;
}

.advanced-card summary:hover {
  background: rgba(255, 255, 255, 0.025);
}

.advanced-card summary::-webkit-details-marker {
  display: none;
}

.settings-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 189, 67, 0.28);
  border-radius: 10px;
  background: rgba(255, 189, 67, 0.08);
  color: var(--accent);
}

.settings-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.settings-title strong,
.settings-title small {
  display: block;
}

.settings-title strong {
  color: var(--text);
  font-size: 1rem;
}

.settings-title small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.75rem;
}

.settings-chevron {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  transition: transform 180ms ease, color 180ms ease;
}

.settings-chevron::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.advanced-card[open] .settings-chevron {
  color: var(--accent);
  transform: rotate(180deg);
}

.advanced-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.018);
  animation: settings-in 170ms ease-out;
}

.setting-box--wide {
  grid-column: 1 / -1;
}

.setting-box {
  position: relative;
  padding: 8px 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  transition: opacity 160ms ease;
}

/* Séparateurs simples entre les groupes des paramètres avancés. */
.setting-box:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -7px;
  height: 1px;
  background: rgba(162, 180, 212, 0.16);
  pointer-events: none;
}

.setting-box__title {
  margin: 0 0 12px;
  color: #eef3fb;
  font-size: 0.9rem;
  font-weight: 900;
}

.choice-grid {
  display: grid;
  gap: 9px;
}

.choice-grid--types {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-grid--rounds {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.choice-grid--times {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.setting-choice {
  min-width: 0;
  min-height: 52px;
  padding: 9px 8px;
  border: 1px solid rgba(162, 180, 212, 0.22);
  border-radius: 11px;
  background: #0a1221;
  color: #b9c9e3;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.15;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.setting-choice:hover:not(:disabled) {
  border-color: rgba(255, 189, 67, 0.48);
  background: rgba(255, 189, 67, 0.07);
  color: #edf3ff;
}

.setting-choice:focus-visible {
  outline: 3px solid rgba(255, 189, 67, 0.18);
  outline-offset: 2px;
}

.setting-choice.is-selected,
.setting-choice[aria-pressed="true"] {
  border-color: rgba(255, 189, 67, 0.82);
  background: rgba(255, 189, 67, 0.16);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255, 189, 67, 0.05);
}

/* Séparateur vertical entre Temps Lettres et Temps Chiffres sur grand écran. */
#numbers-time-setting {
  padding-left: 14px;
}

#numbers-time-setting::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 8px;
  bottom: 14px;
  width: 1px;
  background: rgba(162, 180, 212, 0.16);
  pointer-events: none;
}

.setting-box.is-disabled {
  border-color: transparent;
  background: transparent;
  opacity: 0.46;
}

.setting-box.is-disabled .setting-choice {
  cursor: not-allowed;
}

@keyframes settings-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.start-button {
  flex: 0 0 auto;
  min-height: 54px;
  padding-inline: 26px;
  border-radius: 11px;
  background: linear-gradient(135deg, #ffd168, #ffb22d);
  color: #101827;
  font-size: 1rem;
  box-shadow: 0 10px 26px rgba(255, 178, 45, 0.17);
}

.setup-panel__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.game-layout {
  width: 100%;
  display: grid;
  gap: 14px;
}

.focus-game {
  width: 100%;
  min-height: calc(100vh - 166px);
  padding: 24px 28px 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 189, 67, 0.40);
  border-radius: 18px;
  background: rgba(14, 23, 41, 0.97);
  box-shadow: 0 28px 88px rgba(0, 0, 0, 0.32);
}

.game-ready {
  min-height: calc(100vh - 220px);
  display: grid;
  place-items: center;
  text-align: center;
}

.game-ready__content {
  width: min(420px, 100%);
  padding: 28px 20px;
}

.game-ready h2 {
  margin: 0 0 22px;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -0.035em;
}

.game-ready .start-button {
  min-width: 210px;
}

.round-stage {
  min-height: calc(100vh - 255px);
}

.game-topbar {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.game-topbar h2 {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.top-score,
.top-timer {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.top-score {
  justify-self: start;
}

.top-timer {
  justify-self: end;
}

.top-score span,
.top-timer span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.top-score strong {
  color: var(--accent);
  font-size: 1.35rem;
}

.top-timer .timer {
  min-width: 64px;
  font-size: 1.8rem;
  line-height: 1;
}

.target-focus {
  width: min(430px, 100%);
  margin: 18px auto 0;
  padding: 13px 20px;
  border: 1px solid rgba(101, 170, 252, 0.28);
  border-radius: 13px;
  background: rgba(37, 92, 163, 0.13);
  text-align: center;
}

.target-focus .field-label {
  margin: 0;
}

.target-focus .large-number {
  line-height: 1.05;
}

#solo-round-input {
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 16px 0 8px;
}

#solo-round-input .tile-row {
  gap: 12px;
}

#solo-round-input .tile {
  position: relative;
  overflow: visible;
  width: 68px;
  height: 68px;
  border-color: rgba(162, 180, 212, 0.32);
  background: linear-gradient(145deg, #273653, #17233d);
  font-size: 1.95rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 17px rgba(0,0,0,0.20);
}

/* Entrée de manche : le plateau s'installe progressivement avant de rendre la main au joueur. */
#solo-active-round.is-revealing-draw .tile-row--draw .tile {
  opacity: 0;
  transform: translateY(12px) scale(0.92) !important;
  filter: blur(2px);
  transition: opacity 320ms ease, transform 380ms cubic-bezier(.2,.8,.2,1), filter 320ms ease, border-color 240ms ease;
}

#solo-active-round.is-revealing-draw .tile-row--draw .tile.is-draw-visible {
  opacity: 1;
  transform: translateY(0) scale(1) !important;
  filter: blur(0);
}

#solo-active-round.is-revealing-draw #solo-round-input > :not(.tile-row--draw),
#solo-active-round.is-revealing-draw .round-footer,
#solo-active-round.is-revealing-draw #solo-result {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 300ms ease, transform 360ms cubic-bezier(.2,.8,.2,1);
}

#solo-active-round.is-revealing-draw.is-round-controls-visible #solo-round-input > :not(.tile-row--draw),
#solo-active-round.is-revealing-draw.is-round-controls-visible .round-footer,
#solo-active-round.is-revealing-draw.is-round-controls-visible #solo-result {
  opacity: 1;
  transform: translateY(0);
}

#solo-active-round.is-revealing-draw.is-round-controls-visible .round-footer {
  transition-delay: 70ms;
}

#solo-target-box.is-draw-target-pending {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  filter: blur(2px);
  transition: opacity 340ms ease, transform 400ms cubic-bezier(.2,.8,.2,1), filter 320ms ease;
}

#solo-target-box.is-draw-target-pending.is-draw-target-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

#solo-play-content.is-game-entering .game-topbar {
  opacity: 0;
  transform: translateY(-9px);
}

#solo-play-content .game-topbar {
  transition: opacity 320ms ease, transform 380ms cubic-bezier(.2,.8,.2,1);
}

#solo-round-input .tile--used {
  border-color: rgba(162, 180, 212, 0.18);
  border-style: dashed;
  background: rgba(26, 38, 61, 0.42);
  color: rgba(223, 230, 242, 0.62);
  cursor: not-allowed;
  filter: saturate(0.55);
  opacity: 0.72;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

#solo-round-input .tile--used.tile--result {
  border-color: rgba(167, 139, 250, 0.25);
  background: rgba(91, 75, 132, 0.19);
  color: rgba(233, 226, 255, 0.62);
}

#solo-round-input .tile--result {
  border-color: rgba(167, 139, 250, 0.48);
  background: rgba(167, 139, 250, 0.13);
  color: #e9e2ff;
}

#solo-round-input .tile--selected {
  border-color: rgba(255, 189, 67, 0.86);
  background: rgba(255, 189, 67, 0.17);
  box-shadow: 0 0 0 3px rgba(255, 189, 67, 0.13), 0 9px 23px rgba(0,0,0,0.22);
}

#solo-round-input .tile--final {
  border-color: rgba(54, 205, 138, 0.72);
  box-shadow: 0 0 0 3px rgba(54, 205, 138, 0.12);
}

#solo-round-input .tile-row--results {
  width: fit-content;
  max-width: 100%;
  margin: 13px auto 0;
  padding-top: 13px;
  border-top: 1px solid rgba(162, 180, 212, 0.18);
}

.calculation-workbench {
  width: min(720px, 100%);
  margin: 16px auto 12px;
  padding: 14px;
  border: 1px solid rgba(162, 180, 212, 0.18);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(7, 13, 25, 0.56), rgba(26, 38, 61, 0.38));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.calculation-equation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.calculation-current-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px 12px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

.calculation-clear-button {
  min-height: 34px;
  padding: 6px 10px;
  border-color: rgba(162, 180, 212, 0.22);
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.calculation-slot {
  min-width: 78px;
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 6px 12px;
  border: 1px solid rgba(162, 180, 212, 0.24);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 950;
}

.calculation-slot--result {
  border-color: rgba(54, 205, 138, 0.38);
  background: rgba(54, 205, 138, 0.09);
  color: #7ce9ae;
}

.calculation-symbol {
  min-width: 32px;
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 950;
  text-align: center;
}

.calculation-symbol--equals {
  color: var(--muted);
}

.calculation-workbench .operation-row {
  margin: 0;
}

.calculation-workbench .operation-button {
  width: 58px;
  min-width: 58px;
  height: 44px;
  padding: 0;
  border-color: rgba(162, 180, 212, 0.24);
  background: rgba(255,255,255,0.045);
  color: var(--text);
  font-size: 1.16rem;
}

.calculation-workbench .operation-button.is-active {
  border-color: rgba(255, 189, 67, 0.62);
  background: rgba(255, 189, 67, 0.14);
  color: var(--accent);
}

#solo-round-input .calculation-list {
  width: min(720px, 100%);
  display: grid;
  gap: 7px;
  margin: 12px auto;
  padding: 0;
  list-style: none;
  counter-reset: calculation-step;
}

#solo-round-input .calculation-list li {
  counter-increment: calculation-step;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid rgba(162, 180, 212, 0.14);
  border-radius: 11px;
  background: rgba(26, 38, 61, 0.42);
  font-weight: 850;
}

#solo-round-input .calculation-list li:not(.muted)::before {
  content: counter(calculation-step, decimal-leading-zero);
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
}

.calculation-step-text {
  flex: 1;
  min-width: 0;
}

.calculation-remove {
  width: 27px;
  min-width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 112, 134, 0.3);
  border-radius: 7px;
  background: transparent;
  color: #ff9aaa;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.calculation-remove:hover:not(:disabled) {
  border-color: rgba(255, 112, 134, 0.65);
  background: rgba(255, 112, 134, 0.1);
}

.calculation-remove:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

#solo-round-input .calculation-list li.muted {
  justify-content: center;
  color: var(--muted);
  font-weight: 700;
}

.focus-actions {
  justify-content: flex-end;
  margin: 0;
}

.focus-actions .button {
  min-width: 150px;
}

.round-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

#solo-result {
  min-height: 46px;
  display: grid;
  place-items: center;
  margin: 13px 0 0;
  padding: 8px 13px;
  border-radius: 10px;
  background: rgba(26, 38, 61, 0.62);
  text-align: center;
}

#solo-result:empty,
#solo-result.hidden {
  display: none !important;
}

.summary-draw-tiles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin-top: 8px;
}

.mini-draw-tile {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(162, 180, 212, 0.22);
  border-radius: 7px;
  background: linear-gradient(145deg, #273653, #17233d);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 900;
}

.mini-draw-target {
  min-height: 32px;
  margin-left: 3px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(101, 170, 252, 0.30);
  border-radius: 7px;
  background: rgba(37, 92, 163, 0.13);
  color: #a9d0ff;
  font-size: 0.68rem;
  font-weight: 900;
}

.round-summary-dialog {
  width: min(780px, calc(100% - 24px));
  max-height: 88vh;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(255, 189, 67, 0.42);
  border-radius: 14px;
  background: #0d1729;
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.round-summary-dialog::backdrop {
  background: rgba(3, 7, 15, 0.82);
  backdrop-filter: blur(5px);
}

.round-summary__head {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}

.round-summary__head h2 {
  margin: 0;
  font-size: 1.25rem;
}

.round-summary__body {
  padding: 16px;
}

.round-summary__stats {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(115px, 0.55fr));
  gap: 8px;
}

.summary-stat--draw {
  grid-column: 1 / -1;
  min-height: 82px;
}

.summary-stat {
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(26, 38, 61, 0.60);
}

.summary-stat span {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.summary-stat strong {
  margin-top: 6px;
  color: var(--accent);
  font-size: 1.3rem;
  overflow-wrap: anywhere;
}

.summary-stat small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
}

.summary-stat--answer strong {
  color: var(--text);
}

.calculation-result {
  position: relative;
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
}

.calculation-result.has-calculation > strong {
  cursor: help;
  text-decoration: underline dotted rgba(255, 189, 67, 0.58);
  text-underline-offset: 4px;
}

.calculation-result.has-calculation:hover,
.calculation-result.has-calculation:focus-within {
  z-index: 40;
}

.calculation-result.has-calculation > strong:focus-visible {
  outline: 2px solid rgba(255, 189, 67, 0.68);
  outline-offset: 4px;
  border-radius: 3px;
}

.calculation-tooltip {
  position: absolute;
  z-index: 50;
  left: 0;
  bottom: calc(100% + 10px);
  width: max-content;
  min-width: 220px;
  max-width: min(340px, calc(100vw - 48px));
  padding: 10px 11px;
  border: 1px solid rgba(255, 189, 67, 0.4);
  border-radius: 9px;
  background: #091321;
  color: var(--text);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
  pointer-events: none;
}

.calculation-tooltip::after {
  content: '';
  position: absolute;
  left: 17px;
  bottom: -5px;
  width: 8px;
  height: 8px;
  border-right: 1px solid rgba(255, 189, 67, 0.4);
  border-bottom: 1px solid rgba(255, 189, 67, 0.4);
  background: #091321;
  transform: rotate(45deg);
}

.calculation-result.has-calculation:hover .calculation-tooltip,
.calculation-result.has-calculation:focus-within .calculation-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.calculation-tooltip__title {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.calculation-tooltip ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 22px;
}

.calculation-tooltip li {
  padding-left: 2px;
  color: #e6ebf4;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
}

.round-summary__solution {
  margin-top: 10px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(7, 13, 25, 0.66);
}

.round-summary__solution > summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.round-summary__solution > summary::-webkit-details-marker {
  display: none;
}

.round-summary__solution > summary:hover {
  background: rgba(255, 255, 255, 0.025);
}

.solution-chevron {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid #aab8d0;
  border-bottom: 2px solid #aab8d0;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 180ms ease, border-color 180ms ease;
}

.round-summary__solution[open] .solution-chevron {
  border-color: var(--accent);
  transform: rotate(225deg) translate(-2px, -2px);
}

.round-summary__solution-content {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}

.solution-word-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.solution-word-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(162, 180, 212, 0.12);
}

.solution-word-list li:last-child {
  border-bottom: 0;
}

.solution-word-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e6ebf4;
  font-size: 0.82rem;
  font-weight: 850;
  text-decoration: none;
  text-underline-offset: 3px;
}

.solution-word-link::after {
  content: "↗";
  color: var(--muted);
  font-size: 0.72rem;
  transform: translateY(-1px);
}

.solution-word-link:hover,
.solution-word-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.solution-word-link:focus-visible {
  outline: 2px solid rgba(255, 189, 67, 0.42);
  outline-offset: 3px;
  border-radius: 3px;
}

.player-answer-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
}

.player-answer-link::after {
  content: "↗";
  margin-left: 6px;
  color: var(--muted);
  font-size: 0.72em;
  vertical-align: 0.08em;
}

.player-answer-link:hover,
.player-answer-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.player-answer-link:focus-visible {
  outline: 2px solid rgba(255, 189, 67, 0.42);
  outline-offset: 3px;
  border-radius: 3px;
}

.solution-word-length {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.72rem;
}

.solution-empty,
.solution-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.solution-calculation-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: solution-step;
}

.solution-calculation-list li {
  counter-increment: solution-step;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid rgba(162, 180, 212, 0.12);
  border-radius: 0;
  background: transparent;
  color: #e6ebf4;
  font-size: 0.78rem;
  font-weight: 800;
}

.solution-calculation-list li::before {
  content: counter(solution-step, decimal-leading-zero);
  color: var(--muted);
  font-size: 0.62rem;
}

.round-summary__actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 12px;
}

.round-summary__actions .button {
  min-height: 42px;
  padding-inline: 14px;
  border-radius: 9px;
  font-size: 0.84rem;
}

.summary-quit-button {
  margin-right: auto;
  border-color: rgba(235, 92, 99, 0.38);
  background: rgba(235, 92, 99, 0.08);
  color: #ffb0b5;
}

.summary-quit-button:hover {
  border-color: rgba(235, 92, 99, 0.62);
  background: rgba(235, 92, 99, 0.14);
}

.final-summary {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 18px 10px 30px;
}

.final-summary__header {
  padding: 4px 0 20px;
  border-bottom: 1px solid var(--border);
}

.final-summary__header h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
}

.final-summary__subtitle {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.final-scoreboard {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.final-scoreboard__score > span,
.final-scoreboard__stats dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.final-scoreboard__score p {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 7px 0 0;
}

.final-scoreboard__score strong {
  color: var(--accent);
  font-size: clamp(2.4rem, 6vw, 3.5rem);
  line-height: 1;
}

.final-scoreboard__score small {
  color: var(--muted);
  font-size: 0.78rem;
}

.final-scoreboard__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.final-scoreboard__stats div {
  padding: 4px 0 4px 24px;
  border-left: 1px solid var(--border);
}

.final-scoreboard__stats dd {
  margin: 7px 0 0;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 850;
}

.final-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
}

.final-category-grid.is-single {
  grid-template-columns: 1fr;
}

.final-category-section {
  padding: 22px 24px 22px 0;
}

.final-category-section + .final-category-section {
  padding-right: 0;
  padding-left: 24px;
  border-left: 1px solid var(--border);
}

.final-category-section.hidden + .final-category-section {
  padding-left: 0;
  border-left: 0;
}

.final-category-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.final-category-section h3 {
  margin: 0;
  font-size: 1rem;
}

.final-category-section__head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
}

.final-category-score {
  color: var(--accent);
  font-size: 1rem;
}

.final-category-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 17px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(162, 180, 212, 0.14);
}

.final-category-stats dt {
  color: var(--muted);
  font-size: 0.7rem;
}

.final-category-stats dd {
  margin: 5px 0 0;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
}

.final-rounds {
  margin-top: 24px;
}

.final-rounds h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.final-round-columns {
  display: grid;
  grid-template-columns: 36px 72px minmax(0, 1fr) 100px 44px;
  gap: 10px;
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.final-round-columns span:last-child {
  text-align: right;
}

.final-round-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.final-round-item {
  display: grid;
  grid-template-columns: 36px 72px minmax(0, 1fr) 100px 44px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(162, 180, 212, 0.12);
}

.final-round-number {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.final-round-type {
  color: #cbd6e8;
  font-size: 0.72rem;
  font-weight: 800;
}

.final-round-main {
  min-width: 0;
}

.final-round-main strong,
.final-round-main small {
  display: block;
  overflow-wrap: anywhere;
}

.final-round-main strong {
  color: var(--text);
  font-size: 0.84rem;
}

.final-round-main small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.67rem;
}

.final-round-status {
  color: #ffabb4;
  font-size: 0.72rem;
  font-weight: 750;
}

.final-round-item.is-valid .final-round-status {
  color: #7ce9ae;
}

.final-round-points {
  min-width: 34px;
  color: var(--accent);
  font-size: 0.9rem;
  text-align: right;
}

.final-summary__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

@media (max-width: 1024px) {
  .focus-main { width: min(100% - 24px, 940px); padding-top: 12px; }
  .focus-setup { grid-template-columns: 1fr; gap: 18px; align-content: start; padding: 28px 0; }
  .setup-hero { padding: 10px 8px; }
  .setup-hero h1 { max-width: 760px; }
  .setup-subtitle { max-width: 720px; }
  .setup-panel { max-width: 760px; }
  .focus-game { min-height: calc(100vh - 154px); padding: 20px; }
  #solo-round-input .tile { width: 59px; height: 59px; font-size: 1.7rem; }
}

@media (max-width: 760px) {
  body.solo-studio-focus { background: #070c18; }
  .focus-main { width: 100%; padding: 0; }
  .focus-setup { min-height: 100vh; gap: 10px; padding: 18px 14px 24px; }
  .setup-hero { padding: 8px 2px 14px; }
  .setup-hero h1 { font-size: 2.65rem; }
  .setup-subtitle { margin-top: 15px; font-size: 0.96rem; }
  .entry-points { margin-top: 20px; }
  .entry-points li { align-items: flex-start; font-size: 0.9rem; }
  .entry-points b { width: 31px; height: 31px; }
  .setup-panel { padding: 20px 16px; border-radius: 14px; }
  .setup-panel__head { display: grid; gap: 12px; }
  .start-button { width: 100%; }
  .advanced-body { grid-template-columns: 1fr; }
  .setting-box--wide { grid-column: auto; }
  #numbers-time-setting { padding-left: 0; }
  #numbers-time-setting::after { display: none; }
  .choice-grid--types { grid-template-columns: 1fr; }
  .choice-grid { gap: 7px; }
  .setting-choice { min-height: 46px; padding-inline: 5px; font-size: 0.76rem; }
  .game-layout { gap: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .focus-game { min-height: calc(100vh - 74px); padding: 12px 9px 9px; border-width: 0; border-radius: 0; }
  .game-ready { min-height: calc(100vh - 105px); }
  .game-ready__content { padding-inline: 10px; }
  .round-stage { min-height: calc(100vh - 105px); }
  .game-topbar { min-height: 40px; gap: 5px; padding-bottom: 9px; }
  .game-topbar h2 { font-size: 0.66rem; letter-spacing: 0.08em; }
  .top-score, .top-timer { gap: 5px; }
  .top-score span, .top-timer span { font-size: 0.56rem; letter-spacing: 0.04em; }
  .top-score strong { font-size: 1.15rem; }
  .top-timer .timer { min-width: 45px; font-size: 1.45rem; }
  .target-focus { margin-top: 13px; padding: 10px 14px; }
  .target-focus .large-number { font-size: 2.7rem; }
  #solo-round-input { padding-top: 11px; }
  #solo-round-input .tile-row { gap: 8px; margin: 10px 0; }
  #solo-round-input .tile { width: 48px; height: 48px; border-radius: 10px; font-size: 1.4rem; }
  #solo-round-input .letter-answer { min-height: 58px; }
  #solo-round-input .answer-chip { min-width: 40px; min-height: 40px; }
  #solo-round-input .operation-row { gap: 6px; }
  #solo-round-input .operation-button { min-width: 46px; }
  .calculation-workbench { margin-top: 12px; padding: 11px 8px; }
  .calculation-equation { gap: 5px; }
  .calculation-current-row { gap: 7px; margin-top: 10px; padding-top: 10px; }
  .calculation-clear-button { min-height: 31px; padding: 5px 8px; font-size: 0.68rem; }
  .calculation-slot { min-width: 53px; min-height: 42px; padding: 5px 7px; font-size: 1.03rem; }
  .calculation-symbol { min-width: 21px; font-size: 1.05rem; }
  .calculation-workbench .operation-button { width: 50px; min-width: 50px; height: 41px; }
  #solo-round-input .calculation-list li { min-height: 40px; padding: 8px 10px; font-size: 0.82rem; }
  .calculation-remove { width: 25px; min-width: 25px; height: 25px; }
  .round-footer { margin-top: 8px; padding-top: 10px; }
  .focus-actions { gap: 7px; }
  .focus-actions .button { min-width: 0; flex: 1 1 125px; padding-inline: 9px; }
  #solo-result { font-size: 0.88rem; }
  .round-summary-dialog { width: calc(100% - 16px); max-height: 94vh; border-radius: 14px; }
  .round-summary__head { min-height: 58px; padding: 10px 12px; }
  .round-summary__head h2 { font-size: 1.12rem; }
  .round-summary__body { padding: 10px; }
  .round-summary__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-stat--draw { grid-column: 1 / -1; min-height: 78px; }
  .summary-stat--answer { grid-column: 1 / -1; }
  .summary-stat { min-height: 68px; padding: 9px 10px; }
  .summary-draw-tiles { gap: 5px; }
  .mini-draw-tile { width: 30px; height: 30px; border-radius: 7px; font-size: 0.76rem; }
  .mini-draw-target { min-height: 30px; margin-left: 2px; padding: 4px 7px; font-size: 0.64rem; }
  .round-summary__solution > summary { min-height: 48px; padding: 10px 12px; font-size: 0.84rem; }
  .round-summary__solution-content { padding: 10px 12px; }
  .calculation-tooltip { min-width: 205px; max-width: calc(100vw - 44px); }
  .calculation-tooltip li { white-space: normal; }
  .round-summary__actions { display: grid; }
  .round-summary__actions .button { min-height: 44px; }
  .summary-quit-button { margin-right: 0; }
  .final-summary { padding: 16px 14px 24px; }
  .final-summary__header { padding-bottom: 16px; }
  .final-scoreboard { grid-template-columns: 1fr; gap: 20px; padding: 20px 0; }
  .final-scoreboard__stats { padding-top: 18px; border-top: 1px solid rgba(162, 180, 212, 0.14); }
  .final-scoreboard__stats div { padding-left: 16px; }
  .final-scoreboard__stats div:first-child { padding-left: 0; border-left: 0; }
  .final-category-grid { grid-template-columns: 1fr; }
  .final-category-section,
  .final-category-section + .final-category-section { padding: 20px 0; }
  .final-category-section + .final-category-section { border-top: 1px solid var(--border); border-left: 0; }
  .final-category-section.hidden + .final-category-section { border-top: 0; }
  .final-category-stats { gap: 12px; }
  .final-rounds { margin-top: 20px; }
  .final-round-columns { display: none; }
  .final-round-item { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 5px 8px; padding: 11px 0; }
  .final-round-number { grid-row: 1 / 4; align-self: start; padding-top: 4px; }
  .final-round-type { grid-column: 2; }
  .final-round-main { grid-column: 2; }
  .final-round-status { grid-column: 2; }
  .final-round-points { grid-column: 3; grid-row: 1 / 4; }
  .final-summary__actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .advanced-body { animation: none; }
  #solo-active-round.is-revealing-draw .tile-row--draw .tile,
  #solo-active-round.is-revealing-draw #solo-round-input > :not(.tile-row--draw),
  #solo-active-round.is-revealing-draw .round-footer,
  #solo-active-round.is-revealing-draw #solo-result,
  #solo-target-box.is-draw-target-pending,
  #solo-play-content .game-topbar,
  .calculation-tooltip {
    animation: none;
    transition-duration: 1ms;
  }
}

  

/* Adaptations strictement structurelles pour la maquette multijoueur.\n   Aucun nouveau langage graphique : mêmes variables, bordures, panneaux et composants que la version solo. */
.prototype-only { width: 100%; }
.prototype-info { margin: 10px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.multi-code { color: var(--accent); font-weight: 950; letter-spacing: .12em; }
.multi-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); gap:20px; align-items:start; padding-top:18px; }
.multi-main { min-width:0; }
.multi-side { min-width:0; border-left:1px solid var(--border); padding-left:20px; }
.multi-side h3, .multi-main h3 { margin:0 0 12px; font-size:1rem; }
.multi-side .status { margin-top:0; }
.player-list { display:grid; gap:0; margin:0; padding:0; list-style:none; border-top:1px solid var(--border); }
.player-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; min-height:54px; padding:9px 0; border-bottom:1px solid rgba(162,180,212,.14); }
.player-row strong { font-size:.88rem; }
.player-row small { display:block; margin-top:3px; color:var(--muted); font-size:.7rem; }
.player-score { color:var(--accent); font-size:.9rem; font-weight:900; white-space:nowrap; }
.player-state { color:var(--success); }
.player-state.is-waiting { color:var(--muted); }
.admin-draw { width:min(940px,100%); margin:0 auto; }
.admin-actions { display:flex; justify-content:flex-end; gap:9px; flex-wrap:wrap; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
.lobby-code { width:min(520px,100%); margin:26px auto 0; padding:20px; border:1px solid rgba(101,170,252,.28); border-radius:13px; background:rgba(37,92,163,.13); text-align:center; }
.lobby-code span { display:block; color:var(--muted); font-size:.72rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.lobby-code strong { display:block; margin-top:7px; color:var(--accent); font-size:clamp(2.2rem,7vw,4.4rem); line-height:1; letter-spacing:.12em; }
.lobby-players { width:min(720px,100%); margin:24px auto 0; }
.waiting-note { margin:18px 0 0; color:var(--muted); text-align:center; }
.solution-board { width:min(920px,100%); margin:0 auto; padding:18px 10px 10px; }
.solution-board .final-round-columns { grid-template-columns:minmax(120px,1fr) minmax(0,1.5fr) 90px 52px; }
.solution-board .final-round-item { grid-template-columns:minmax(120px,1fr) minmax(0,1.5fr) 90px 52px; }
.solution-board .final-round-number { color:var(--text); font-size:.78rem; }
.solution-board .final-round-type { color:var(--muted); }
.solution-board .final-round-points { color:var(--accent); font-weight:900; text-align:right; }
.player-party-info { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; margin:11px 0 0; color:var(--muted); font-size:.74rem; }
.player-party-info strong { color:#dfe6f2; font-weight:850; }
.waiting-card { width:min(560px,100%); text-align:center; }
.waiting-card .setup-brand { margin-bottom:12px; }
.player-answer-label { margin:2px 0 8px; color:var(--muted); font-size:.74rem; text-align:center; }
@media (max-width: 860px){
  .multi-grid { grid-template-columns:1fr; }
  .multi-side { border-left:0; border-top:1px solid var(--border); padding:18px 0 0; }
}
@media (max-width: 640px){
  .solution-board .final-round-columns { display:none; }
  .solution-board .final-round-item { grid-template-columns:1fr auto; gap:5px 10px; }
  .solution-board .final-round-number { grid-column:1; }
  .solution-board .final-round-type { grid-column:1; }
  .solution-board .final-round-status { grid-column:1; }
  .solution-board .final-round-points { grid-column:2; grid-row:1 / 4; align-self:center; }
}