:root {
  --bg: #1d2024;
  --panel: #262a2f;
  --panel2: #2f343a;
  --line: #3b4148;
  --text: #e8eaed;
  --muted: #9aa3ad;
  --accent: #00b8d9;
  --accent2: #00d8ff;
  --danger: #e5484d;
  --radius: 6px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }

button {
  font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 4px 9px; cursor: pointer; white-space: nowrap;
}
button:hover { border-color: #5a636d; background: #363c43; }
button:disabled { opacity: 0.4; cursor: default; }
button.on { background: #0b4f5c; border-color: var(--accent); color: #fff; }
button.primary { background: #0a6f84; border-color: var(--accent); color: #fff; }
button.primary:hover { background: #0b8199; }
button.danger { border-color: #7a2c2f; color: #ffb4b6; }
button.danger:hover { background: #4a1f22; }
button.small { padding: 1px 6px; font-size: 11px; }
button.wide { width: 100%; padding: 7px; }

input, select, textarea {
  font: inherit; color: var(--text); background: #1b1e22; border: 1px solid var(--line);
  border-radius: 4px; padding: 3px 6px; min-width: 0;
}
input[type=number] { width: 72px; }
input.small { width: 56px; }
input[type=color] { width: 34px; height: 24px; padding: 1px; }
input[type=range] { flex: 1; min-width: 60px; accent-color: var(--accent); }
input[type=checkbox] { accent-color: var(--accent); }
textarea { width: 100%; resize: vertical; }
kbd { background: #1b1e22; border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; font-size: 11px; white-space: nowrap; }

/* ---------- Barre supérieure ---------- */
#topbar {
  height: 44px; display: flex; align-items: center; gap: 8px; overflow: hidden; padding: 0 10px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
#topbar .brand { font-weight: 700; font-size: 14px; margin-right: 2px; white-space: nowrap; }
#topbar button { padding: 3px 7px; font-size: 12px; }
@media (max-width: 1600px) { #topbar .lbl { display: none; } }
#topbar .group { display: flex; gap: 3px; }
#topbar .spacer { flex: 1; }
#tablename { color: var(--muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dice { display: flex; align-items: center; gap: 6px; }
#dice .face { font-size: 22px; min-width: 52px; font-weight: 700; }
#dice .face.rolling { opacity: 0.6; }
#dice .hist { color: var(--muted); font-size: 11px; }

/* ---------- Disposition ---------- */
main { display: flex; height: calc(100% - 44px); }
#library { width: 268px; flex: none; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
#props { width: 330px; flex: none; background: var(--panel); border-left: 1px solid var(--line); overflow-y: auto; padding: 10px; }
#stage { flex: 1; position: relative; overflow: hidden; }
#board { width: 100%; height: 100%; display: block; outline: none; touch-action: none; }

/* ---------- Bibliothèque ---------- */
#tabs { display: flex; flex-wrap: wrap; gap: 3px; padding: 8px; border-bottom: 1px solid var(--line); }
#tabs .tab { padding: 3px 7px; font-size: 12px; }
#tabs .tab.on { background: #0b4f5c; border-color: var(--accent); }
#libcontent { overflow-y: auto; padding: 8px; flex: 1; }
.lgroup { margin-bottom: 12px; }
.lgroup h5 { margin: 4px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.card {
  background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px;
  display: flex; flex-direction: column; align-items: center; cursor: grab; position: relative; user-select: none;
}
.card:hover { border-color: var(--accent); }
.card .thumb { width: 72px; height: 48px; display: block; pointer-events: none; }
.card .clabel { font-size: 10.5px; text-align: center; line-height: 1.15; margin-top: 2px; color: #cfd5db; }
.card .cardact { display: flex; gap: 2px; margin-top: 3px; }
.card .cardact button { padding: 0 4px; font-size: 11px; }
.opts { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.emojis { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 8px; }
.emojis button { padding: 2px 5px; font-size: 16px; }

/* ---------- Panneau de propriétés ---------- */
.phead { margin-bottom: 8px; }
.ptype { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent2); margin-bottom: 4px; font-weight: 600; }
.psec { border-top: 1px solid var(--line); padding: 8px 0 6px; }
.psec h4 { margin: 0 0 6px; font-size: 12px; color: #cfd5db; }
.field { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.field .flabel { flex: none; width: 104px; color: var(--muted); font-size: 12px; }
.field input[type=text], .field select, .field textarea { flex: 1; }
.field .unit { color: var(--muted); font-size: 11px; }
.field .ro { color: #cfd5db; font-size: 12px; }
.pair { display: flex; gap: 8px; }
.pair .field .flabel { width: auto; min-width: 10px; }
.pair input[type=number] { width: 58px; }
.pair .field:first-child .flabel { width: 104px; }
.colorrow { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.swatch { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid #0007; }
.rangerow { display: flex; gap: 6px; align-items: center; flex: 1; min-width: 0; }
.rangerow input[type=range] { min-width: 0; }
.rangerow input.small { width: 50px; flex: none; }
.check { display: flex; align-items: center; gap: 4px; margin: 5px 0; cursor: pointer; }
.btns { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0; align-items: center; }
.rotgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.rotgrid button { padding: 4px 2px; }
.muted { color: var(--muted); font-size: 11.5px; line-height: 1.4; margin: 4px 0; }
.plist { margin: 4px 0; padding-left: 16px; }
.plist li { margin: 2px 0; }
.plist a { color: var(--accent2); }
.plist.warn li { color: #ff8a8f; }
.keys { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.keys td { padding: 2px 0; vertical-align: top; color: #cfd5db; }
.keys td:first-child { width: 120px; }

/* ---------- Superpositions de la table ---------- */
#toolhint {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); max-width: 90%;
  background: rgba(10, 60, 72, 0.92); border: 1px solid var(--accent); border-radius: 8px;
  padding: 6px 12px; font-size: 12px; pointer-events: none; text-align: center;
}
#reserves {
  position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 6px; pointer-events: none; flex-wrap: wrap;
}
.tray {
  pointer-events: auto; background: rgba(24, 27, 31, 0.88); border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 6px; min-width: 150px; max-width: 320px; transition: border-color 0.1s, background 0.1s;
}
.tray.hover { border-color: #ffeb3b; background: rgba(60, 56, 20, 0.92); }
.trayhead { font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.trayhead .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid #0008; }
.trayhead .count { color: var(--muted); font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: 3px; min-height: 20px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 3px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 12px; padding: 1px 3px 1px 1px; font-size: 11px; cursor: grab;
}
.chip:hover { border-color: var(--accent); }
.chipicon { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #111; font-weight: 700; }
.chip .x { border: 0; background: none; padding: 0 2px; font-size: 10px; color: var(--muted); }
#toasts { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; }
.toast { background: rgba(20, 22, 26, 0.95); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; padding: 7px 12px; max-width: 360px; transition: opacity 0.4s; }
.toast.out { opacity: 0; }

/* ---------- Fenêtres ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; width: min(520px, 92vw); max-height: 86vh; display: flex; flex-direction: column; }
.modal-head, .editor-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.modal-head strong { flex: 1; font-size: 14px; }
.close { margin-left: auto; }
.modal-body { padding: 12px; overflow-y: auto; }
.modal-foot { padding: 10px 12px; border-top: 1px solid var(--line); justify-content: flex-end; margin: 0; }
.form .field .flabel { width: 70px; }
.form input[type=text] { flex: 1; }
.tablelist .trow { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); gap: 8px; }

.editor { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; width: 94vw; height: 90vh; display: flex; flex-direction: column; }
.editor-head .muted { margin: 0; }
.editor-body { flex: 1; display: flex; min-height: 0; }
.editor-canvas { flex: 1; min-width: 0; height: 100%; display: block; outline: none; touch-action: none; }
.editor-form { width: 320px; flex: none; overflow-y: auto; padding: 10px; border-left: 1px solid var(--line); }
.editor-form > label { display: flex; align-items: center; gap: 6px; margin: 5px 0; }
.editor-form > label input[type=text], .editor-form > label select { flex: 1; }
.editor-form fieldset { border: 1px solid var(--line); border-radius: 6px; margin: 8px 0; padding: 4px 8px 6px; }
.editor-form legend { color: var(--muted); font-size: 11px; padding: 0 4px; }
.editor-form .row { display: flex; align-items: center; gap: 5px; margin: 4px 0; }
.editor-form .row span:first-child { width: 120px; color: var(--muted); font-size: 12px; }
.editor-form .btns.primary { flex-direction: column; align-items: stretch; margin-top: 12px; }

/* ---------- Mode Course ---------- */
#topbar .racebtn { font-weight: 700; }
body.racing #library { display: none; }
body.racing #reserves { display: none; }
.speed { display: inline-block; padding: 0 6px; border-radius: 4px; color: #111; font-weight: 700; font-size: 11px; line-height: 17px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid #0008; vertical-align: middle; }
.turnhead { border-left: 5px solid var(--accent); background: var(--panel2); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; font-size: 14px; }
.turnhead.win { border-color: #ffd54f; }
.bigwin { font-size: 18px; font-weight: 700; }
.bigspeed { margin: 6px 0 2px; font-size: 13px; }
.bigspeed .speed { font-size: 15px; line-height: 22px; padding: 0 9px; }
.players { margin: 4px 0; padding-left: 20px; }
.players li { margin: 3px 0; }
.players li.cur { font-weight: 700; }
.players .fin { color: #ffd54f; }
.status { padding: 6px 8px; border-radius: 6px; margin: 6px 0; font-size: 12px; }
.status.ok { background: #12391f; color: #9ff0b5; }
.status.bad { background: #431a1d; color: #ffb4b6; }
.status.big { font-size: 15px; font-weight: 700; text-align: center; }
.wheel { background: #1b1e22; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin: 6px 0; }
.dierow { display: flex; align-items: center; gap: 3px; margin: 4px 0; }
.dielabel { width: 112px; font-size: 11.5px; color: var(--muted); }
.dierow .face { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font-weight: 700; font-size: 12px; }
.face.good { background: #1f6b38; color: #d7ffe3; }
.face.bad { background: #a3262c; color: #ffe2e3; }
.face.hit { outline: 3px solid #fff; }
.dieres { font-size: 14px; margin: 8px 0 2px; display: flex; align-items: center; gap: 6px; }
.bigface { font-size: 30px; font-weight: 700; }
button.big { font-size: 14px; padding: 7px 12px; }
.cgroup { margin: 6px 0 8px; }
.cghead { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.cand { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 2px 0; text-align: left; gap: 6px; white-space: normal; }
.cand.on { border-color: var(--accent2); background: #0b4f5c; }
.cand.ko { opacity: 0.45; }
.clab { flex: 1; }
.minis { display: flex; gap: 3px; flex: none; }
.mini { font-size: 10.5px; padding: 0 4px; border-radius: 3px; background: #1b1e22; }
.mini.red { color: #ff8a8f; }
.mini.ok { color: #9ff0b5; }
.racelog { margin: 4px 0; padding-left: 14px; font-size: 11.5px; }
.racelog li { margin: 2px 0; }
details > summary { cursor: pointer; color: #cfd5db; font-weight: 600; font-size: 12px; margin-bottom: 4px; }
table.rules { border-collapse: collapse; margin: 4px 0; font-size: 11.5px; }
table.rules td, table.rules th { padding: 2px 3px; }
table.rules input.small { width: 48px; }

/* ---------- Maquette 3D ---------- */
#topbar .view3d-toggle { border-color: #c5a16e; color: #f1d6ac; font-weight: 650; }
#view3d[hidden] { display: none; }
#view3d { position: absolute; inset: 0; isolation: isolate; color: #283932; background: #e4e6df; color-scheme: light; user-select: none; }
.view3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.view3d-canvas:focus-visible { outline: 2px solid #457e66; outline-offset: -3px; }
body.viewing-3d #library, body.viewing-3d #props, body.viewing-3d #reserves,
body.viewing-3d #toolhint, body.viewing-3d #board { display: none !important; }
body.viewing-3d #topbar > :not(.brand):not(.view3d-toggle):not(.spacer):not(#tablename):not(.racebtn):not(.history-controls):not(.newrace-btn):not(.online-toggle):not(.sandbox-toggle):not(.publish-circuit-btn) { display: none; }
body.viewing-3d #topbar { background: #23332d; border-bottom-color: #3d4c42; }
body.viewing-3d #topbar .view3d-toggle { margin-left: auto; background: #35483c; }
body.viewing-3d #topbar .spacer, body.viewing-3d #tablename { display: none; }
.view3d-heading { position: absolute; left: 38px; top: 30px; pointer-events: none; max-width: min(520px, 80%); }
.view3d-eyebrow { font-size: 10px; letter-spacing: 0.21em; font-weight: 750; color: #55685c; }
.view3d-heading h1 { margin: 9px 0 7px; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(24px, 3vw, 40px); letter-spacing: -0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view3d-heading p { margin: 0; color: #53665b; font-size: 12px; }
.view3d-toolbar { position: absolute; bottom: 125px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; padding: 7px; background: #f8f8f0ed; border: 1px solid #fff; border-radius: 12px; box-shadow: 0 6px 30px #24332615; backdrop-filter: blur(12px); max-width: calc(100% - 24px); }
#view3d button { color: #3a4e41; background: transparent; border-color: transparent; padding: 8px 12px; font-size: 12px; border-radius: 7px; }
#view3d button:hover { background: #e3e9df; }
#view3d button.on { color: #f8faef; background: #344f40; }
#view3d button:focus-visible, #view3d input:focus-visible { outline: 2px solid #427f60; outline-offset: 2px; }
.view3d-toolbar label { display: flex; align-items: center; gap: 5px; padding: 0 8px; font-size: 12px; white-space: nowrap; cursor: pointer; }
.view3d-toolbar input { accent-color: #3b614c; }
.view3d-divider { width: 1px; height: 22px; background: #d5dcd0; }
.view3d-footer { position: absolute; left: 38px; right: 38px; bottom: 23px; display: flex; justify-content: space-between; align-items: end; gap: 16px; pointer-events: none; }
.view3d-footer > span { font-size: 11px; color: #526858; }
.view3d-footer i { display: inline-block; width: 6px; height: 6px; background: #54866a; border-radius: 50%; margin-right: 6px; }
.view3d-footer p { margin: 0; text-align: center; font-size: 11px; line-height: 1.8; color: #4e6254; }
.view3d-footer p span { color: #627366; font-size: 10px; }
.view3d-footer button { pointer-events: auto; border: 1px solid #afbead !important; background: #eef1e7a8 !important; }
#view3d-status { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); max-width: 450px; padding: 20px; border-radius: 12px; color: #fff; background: #344f40; text-align: center; }
@media (max-width: 800px) {
  .view3d-heading { left: 20px; top: 20px; }
  .view3d-toolbar { bottom: 105px; flex-wrap: wrap; justify-content: center; width: max-content; }
  #view3d button { padding: 7px 9px; font-size: 11px; }
  .view3d-footer { left: 16px; right: 16px; bottom: 16px; flex-wrap: wrap; gap: 8px; }
  .view3d-footer > span { display: none; }
  .view3d-footer p { text-align: left; }
  .view3d-footer p span { display: none; }
  .view3d-divider { display: none; }
}

/* ---------- Course jouable en 3D ---------- */
body.viewing-3d #topbar > .racebtn, body.viewing-3d #topbar > .history-controls { display: flex; }
body.viewing-3d #topbar .view3d-toggle { margin-left: 0; }
body.viewing-3d #topbar .brand { margin-right: auto; }
body.viewing-3d.race-ui-open #props { display: block !important; width: 390px; color: #ebeee9; background: #26362e; border-left-color: #415345; padding: 14px; }
body.viewing-3d.race-ui-open .view3d-heading { top: 20px; left: 24px; max-width: calc(100% - 48px); }
body.viewing-3d.race-ui-open .view3d-heading h1 { font-size: 26px; margin-top: 5px; }
body.viewing-3d.racing .view3d-eyebrow { font-size: 0; }
body.viewing-3d.racing .view3d-eyebrow::after { content: 'À VOUS DE PILOTER'; font-size: 10px; }
body.viewing-3d.race-ui-open .view3d-toolbar { bottom: 78px; flex-wrap: wrap; justify-content: center; width: max-content; }
body.viewing-3d.race-ui-open .view3d-footer > span { display: none; }
body.viewing-3d.race-ui-open .view3d-footer p { text-align: left; font-size: 10px; }
body.viewing-3d.race-ui-open .view3d-footer p span { display: none; }
body.viewing-3d.race-ui-open .view3d-footer { left: 20px; right: 20px; bottom: 15px; gap: 8px; }
body.viewing-3d.race-ui-open #props .turnhead { background: #34493b; }
body.viewing-3d.race-ui-open #props .psec { border-top-color: #415345; }
body.viewing-3d.race-ui-open #props .muted { color: #bac9bd; }
body.viewing-3d.race-ui-open #props button.primary { background: #876220; border-color: #d5b363; }
body.viewing-3d.race-ui-open #props button.primary:hover { background: #9c742a; }
body.viewing-3d.race-ui-open #props .field .flabel { width: 128px; font-size: 11px; }
body.viewing-3d.race-ui-open #props .btns { gap: 7px; }
body.viewing-3d.race-ui-open #props .btns button { white-space: normal; }
.status.pending { background: #4b3f20; color: #ffe2a2; }
.race-speed-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 8px 0; }
.race-speed-tabs button { padding: 7px 10px; }
.race-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin: 8px 0; }
.race-card { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 7px; white-space: normal; text-align: center; background: #26342d; border-color: #526552; }
.race-card:hover { border-color: #d5b363; background: #354a3b; }
.race-card.on { border-color: #f1cf7d; background: #4b472d; }
.race-card.on:disabled { opacity: 1; }
.race-thumb { width: 100%; height: 66px; display: block; pointer-events: none; }
.race-card-name { font-size: 11px; line-height: 1.35; margin-top: 5px; }
.race-card-detail { font-size: 10px; color: #b7c5b8; margin-top: 3px; }
#props [data-race="fallback"] { border-left: 3px solid #ff8273; }
#props .wheel { margin-top: 10px; }
@media (max-width: 950px) and (min-width: 641px) {
  body.viewing-3d.race-ui-open #props { width: 330px; padding: 10px; }
  body.viewing-3d.race-ui-open .view3d-footer p { display: none; }
}
@media (max-width: 640px) {
  body.viewing-3d #topbar .brand { font-size: 11px; }
  body.viewing-3d #topbar { gap: 4px; padding: 0 6px; }
  body.viewing-3d #topbar .history-controls { display: none; }
  body.viewing-3d.race-ui-open main { flex-direction: column; }
  body.viewing-3d.race-ui-open #stage { flex: none; width: 100%; height: 52%; min-height: 220px; }
  body.viewing-3d.race-ui-open #props { flex: 1; min-height: 0; width: 100%; border-left: 0; border-top: 1px solid #526552; }
  body.viewing-3d.race-ui-open .view3d-heading { top: 12px; left: 14px; }
  body.viewing-3d.race-ui-open .view3d-heading h1 { font-size: 18px; margin: 3px 0; }
  body.viewing-3d.race-ui-open .view3d-heading p { font-size: 10px; }
  body.viewing-3d.race-ui-open .view3d-toolbar { bottom: 10px; padding: 4px; gap: 1px; }
  body.viewing-3d.race-ui-open .view3d-toolbar button { font-size: 10px; padding: 5px 6px; }
  body.viewing-3d.race-ui-open .view3d-toolbar label, body.viewing-3d.race-ui-open .view3d-footer,
  body.viewing-3d.race-ui-open [data-view3d="rotate"], body.viewing-3d.race-ui-open [data-view3d="fit"] { display: none; }
  .race-cards { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .race-thumb { height: 52px; }
}

/* ---------- Circuits prêts à jouer ---------- */
#topbar .newrace-btn { background: #8b641e; border-color: #d8b86b; color: #fff8df; font-weight: 650; }
body.viewing-3d #topbar > .newrace-btn { display: block; }
.race-picker-modal { width: min(1100px, 96vw); max-height: 92vh; }
.race-picker-intro { color: #c3d0c5; line-height: 1.55; margin: 0 0 14px; }
.race-picker-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; background: #303d34; border-radius: 8px; padding: 12px; }
.race-picker-controls label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.race-picker-controls p { margin: 0; color: #c6d0c5; }
.race-picker-controls strong { color: #f2d18a; }
.circuit-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.circuit-card { display: flex; flex-direction: column; min-width: 0; padding: 0; white-space: normal; text-align: left; overflow: hidden; border: 2px solid #46584b; border-radius: 10px; background: #27352d; }
.circuit-card:hover { background: #314338; border-color: #bca365; }
.circuit-card.selected { border-color: #e7c171; box-shadow: 0 0 0 1px #e7c171; background: #3c4030; }
.circuit-card:focus-visible { outline: 2px solid #f6dc9d; outline-offset: 3px; }
.circuit-preview { width: 100%; height: 140px; display: block; pointer-events: none; }
.circuit-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; width: 100%; padding: 11px 11px 0; }
.circuit-card-heading strong { font-size: 12px; color: #f4f2df; line-height: 1.4; }
.circuit-level { font-size: 9px; border: 1px solid #71806b; color: #d6debd; border-radius: 12px; padding: 2px 6px; white-space: nowrap; }
.circuit-description { padding: 7px 11px; color: #bcc9be; font-size: 11px; line-height: 1.45; flex: 1; }
.circuit-features { color: #e6c98e; padding: 0 11px 12px; font-size: 10px; }
@media (max-width: 800px) {
  .circuit-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .race-picker-controls { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 640px) {
  #topbar .newrace-btn { font-size: 10px; padding: 5px 7px; }
  body.viewing-3d #topbar > .racebtn { display: none; }
  .race-picker-modal { width: 96vw; max-height: 94vh; }
  .race-picker-modal .modal-body { padding: 10px; }
  .circuit-gallery { gap: 8px; }
  .circuit-preview { height: 110px; }
  .circuit-card-heading { flex-wrap: wrap; gap: 4px; padding: 8px 8px 0; }
  .circuit-card-heading strong { font-size: 11px; }
  .circuit-description { padding: 6px 8px; font-size: 10px; }
  .circuit-features { font-size: 9px; padding: 0 8px 8px; }
  .race-picker-modal .modal-foot { flex-wrap: wrap; }
}

/* Agora et courses asynchrones */
.online-toggle { border-color: #b99b58; color: #f1d494; white-space: nowrap; }
.online-modal { width: min(900px, 94vw); max-height: 92dvh; }
.online-body { overflow-y: auto; padding: 26px; }
.online-intro { max-width: 610px; margin-bottom: 26px; }
.online-intro h2, .online-lobby-head h2 { font: 2.2rem Georgia, serif; margin: 10px 0; color: #f4e8ca; }
.online-intro p { color: var(--muted); line-height: 1.65; font-size: 1.05rem; }
.online-eyebrow { color: #d6b66b; font-size: .8rem; font-weight: 700; letter-spacing: .13em; }
.online-tabs, .online-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; align-items: center; }
.online-nav { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.online-nav .on, .online-tabs .on { background: #74541d; border-color: #d5af60; color: #fff3d4; }
.online-identity { width: 100%; font-weight: 700; color: #f4e8ca; padding-bottom: 8px; }
.online-signout { margin-left: auto; font-size: .9rem; }
.online-form { display: grid; gap: 15px; max-width: 520px; }
.online-form h2 { margin: 0 0 8px; }
.online-field { display: grid; gap: 7px; color: #d1d8d0; }
.online-field input, .online-field select { width: 100%; min-height: 42px; padding: 9px 12px; font: inherit; }
.online-form button[type=submit] { min-height: 44px; justify-self: start; padding: 9px 24px; }
.online-message { padding: 12px 15px; background: #30463a; border: 1px solid #627c58; border-radius: 8px; line-height: 1.5; }
.online-message.error { background: #4f2b2c; border-color: #a25851; }
.online-code-form { display: flex; align-items: end; gap: 12px; padding: 15px; margin-bottom: 26px; background: #ffffff05; border: 1px solid var(--line); border-radius: 10px; }
.online-code-form button { min-height: 42px; }
.online-races { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.online-race-card { border: 1px solid var(--line); border-radius: 12px; background: #ffffff04; padding: 20px; }
.online-race-card.my-turn { border-color: #c7a155; background: #b1893410; }
.online-race-card h3 { font-size: 1.3rem; margin: 16px 0 8px; }
.online-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.online-badge { font-size: .8rem; color: #ddc58c; background: #8e713526; border-radius: 20px; padding: 4px 10px; }
.online-empty { padding: 30px; border: 1px dashed #566057; border-radius: 10px; color: var(--muted); line-height: 1.6; }
.online-invite { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; margin: 20px 0; background: #b1893410; border: 1px solid #8a713c; border-radius: 10px; }
.online-invite strong { display: block; font: 1.7rem ui-monospace, monospace; letter-spacing: .15em; padding-top: 6px; user-select: all; }
.online-seats { display: grid; gap: 10px; margin-bottom: 25px; }
.online-seat { display: flex; align-items: center; gap: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 9px; }
.online-seat .muted { margin-left: auto; }
.online-seat.ready { border-color: #697d54; }
.online-seat-number { display: grid; place-items: center; width: 30px; height: 30px; background: #ae854f26; color: #e4c48c; border-radius: 50%; }
body.online-race #topbar > .group:not(.history-controls), body.online-race #dice { display: none; }
body.online-race #topbar > .newrace-btn, body.online-race #topbar > .racebtn, body.online-race #topbar > .history-controls { display: none; }
@media (max-width: 650px) {
  .online-body { padding: 18px; }
  .online-races { grid-template-columns: 1fr; }
  .online-intro h2 { font-size: 1.8rem; }
  .online-code-form, .online-invite { flex-direction: column; align-items: stretch; }
  .online-nav button { flex: 1 1 40%; }
  .online-signout { margin-left: 0; }
  .online-invite strong { font-size: 1.45rem; }
  body.viewing-3d #topbar [data-cmd="online"] { display: inline-block; }
}

/* Le site public s'ouvre sur l'agora ; les outils restent dans la Sandbox. */
.sandbox-toggle { color: #d1dac8; border-color: #68775b; white-space: nowrap; }
.sandbox-mode .sandbox-toggle { background: #3c4c35; border-color: #94a67a; }
body.viewing-3d #topbar > .sandbox-toggle { display: inline-block; }
#online-home[hidden] { display: none; }
#online-home { position: fixed; inset: 44px 0 0; z-index: 30; overflow-y: auto; background: radial-gradient(ellipse at 80% 5%, #84672c1a, transparent 55%), #18261f; }
.online-loading { max-width: 1060px; margin: 80px auto; padding: 25px; color: #f0e4c6; }
.online-loading h1 { font: 2.8rem Georgia, serif; }
body.showing-online-home > main { display: none; }
body.showing-online-home #topbar > :not(.brand):not(.online-toggle):not(.sandbox-toggle) { display: none; }
body.showing-online-home #topbar { background: #23332d; }
body.showing-online-home #topbar .brand { margin-right: auto; }
.online-home-screen { max-width: 1080px; margin: 0 auto; padding: 40px 24px 60px; }
.online-home-panel { width: 100%; max-height: none; border: 0; background: transparent; border-radius: 0; box-shadow: none; }
.online-home-panel > .modal-head { background: transparent; padding: 0 0 20px; border-bottom: 1px solid #445343; color: #e4c78d; }
.online-home-panel > .online-body { padding: 30px 0; overflow: visible; }
.online-home-panel .online-intro { max-width: 700px; margin-bottom: 30px; }
.online-home-panel .online-intro h2 { font-size: 3rem; line-height: 1.15; }
.online-home-panel .online-form { max-width: 580px; }
.online-home-panel .online-race-card { background: #ffffff04; }
.online-home-note { font-size: .9rem; font-weight: 400; color: #b8c1ae; }
html[data-entry-mode="online"]:not([data-app-ready]) body > main { display: none; }
html[data-entry-mode="online"]:not([data-app-ready]) #online-home { display: block; }
html[data-entry-mode="online"]:not([data-app-ready]) #topbar > :not(.brand):not(.online-toggle):not(.sandbox-toggle) { display: none; }
@media (max-width: 650px) {
  .online-home-screen { padding: 22px 18px 40px; }
  .online-home-panel .online-intro h2 { font-size: 2rem; }
  .online-home-panel > .online-body { padding-top: 22px; }
  .online-home-note { display: none; }
  body.showing-online-home #topbar { gap: 5px; padding: 0 6px; }
  body.showing-online-home #topbar .brand { font-size: 11px; }
  body.showing-online-home #topbar button { padding: 5px 7px; font-size: 11px; }
}
body.loading-3d #board { visibility: hidden; }
@media (max-width: 800px) {
  body.sandbox-mode:not(.viewing-3d) main { flex-direction: column; overflow-y: auto; }
  body.sandbox-mode:not(.viewing-3d) #stage { order: 0; flex: none; width: 100%; height: 50dvh; min-height: 280px; }
  body.sandbox-mode:not(.viewing-3d) #library { order: 1; flex: none; width: 100%; max-height: 300px; border-right: 0; border-top: 1px solid var(--line); }
  body.sandbox-mode:not(.viewing-3d) #props { order: 2; flex: none; width: 100%; max-height: 360px; border-left: 0; border-top: 1px solid var(--line); }
  body.sandbox-mode:not(.viewing-3d) .cards { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); }
}

/* Suivi de manche : l'ordre de passage reste visible pendant le choix du gabarit. */
#props .round-panel { position: sticky; top: -10px; z-index: 4; padding: 12px 0 8px; margin-top: -10px; background: var(--panel); border-bottom: 1px solid var(--line); }
body.viewing-3d #props .round-panel { top: -14px; margin-top: -14px; background: #26362e; }
.round-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; }
.round-counter { font-size: 11px; color: #ead196; background: #b1893428; border-radius: 12px; padding: 4px 8px; }
#props .round-caption { margin: 5px 0 8px; font-size: 11px; }
.round-order-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #b7c7ae; margin-bottom: 5px; }
.round-roster { padding: 0; margin: 0; list-style: none; display: grid; gap: 4px; }
.round-player { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 6px; border: 1px solid transparent; border-radius: 6px; }
.round-player.current { background: #d6b05015; border-color: #a18441; }
.round-position { color: #d5bb83; font-weight: 700; text-align: center; }
.round-player-info { min-width: 0; }
.round-player-info strong { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
.round-player-info > .muted { font-size: 10px; }
.round-status { font-size: 10px; white-space: nowrap; color: #aab8ad; }
.round-player.current .round-status, .round-status.deciding { color: #f1d18c; }
.round-player.played .round-status { color: #a6cca1; }
.round-player .fin { grid-column: 1; font-size: 10px; }
#props .round-total { font-size: 10px; margin: 5px 0 0; text-align: right; }
.online-card-progress { color: #d8be85; font-size: 12px; }
.online-lobby-capacity { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 15px 0; color: #dfc995; }
.online-lobby-capacity select { padding: 7px 10px; }

/* Le chat a son propre formulaire, indépendant des rafraîchissements de la course. */
#race-chat[hidden], .race-chat-panel[hidden], .race-chat-badge[hidden], .race-chat-history[hidden] { display: none; }
#race-chat { position: fixed; right: 16px; bottom: 14px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; color: var(--text); }
.race-chat-toggle { padding: 9px 14px; background: #304b3c; border-color: #c3a064; box-shadow: 0 3px 18px #0003; }
.race-chat-badge { display: inline-grid; place-items: center; min-width: 19px; min-height: 19px; padding: 0 5px; background: #c59a40; border-radius: 50%; color: #18261f; font-weight: 800; }
.race-chat-panel { width: 350px; height: min(530px, calc(100dvh - 110px)); display: flex; flex-direction: column; border: 1px solid #8a7548; border-radius: 12px; overflow: hidden; background: #24372c; box-shadow: 0 12px 40px #0008; }
.race-chat-panel > header { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border-bottom: 1px solid #415445; }
.race-chat-panel > header > div { min-width: 0; }
.race-chat-subtitle { display: block; color: #b6c4b1; font-size: 10px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race-chat-panel > header button { align-self: start; }
.race-chat-history { margin: 8px 12px 0; font-size: 11px; }
.race-chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; margin: 0; list-style: none; }
.race-chat-log > li { background: #ffffff08; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.race-chat-log > li.own { background: #be963b1c; border-right: 2px solid #c6a25c; }
.race-chat-meta { display: flex; gap: 8px; justify-content: space-between; align-items: baseline; font-size: 10px; }
.race-chat-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e9cf98; }
.race-chat-meta time { color: #a5b6a3; white-space: nowrap; font-size: 9px; }
.race-chat-log p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; margin: 6px 0 0; }
.race-chat-empty { color: #b9c6b3; line-height: 1.5; font-size: 12px; }
.race-chat-form { padding: 10px 12px 4px; border-top: 1px solid #415445; }
.race-chat-form textarea { width: 100%; resize: none; min-height: 54px; padding: 8px; }
.race-chat-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.race-chat-form-foot .muted { font-size: 10px; }
.race-chat-status { margin: 0; padding: 0 12px; color: #eac48b; font-size: 11px; }
.race-chat-status:empty { display: none; }
.race-chat-help { font-size: 9px; color: #a5b6a3; margin: 3px 12px 9px; }
@media (max-width: 640px) {
  #props .round-panel, body.viewing-3d #props .round-panel { position: relative; top: 0; margin-top: 0; padding-top: 0; }
  .round-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .round-player { grid-template-columns: 16px minmax(0, 1fr); gap: 3px; }
  .round-status { grid-column: 2; }
  .round-player-info strong { max-width: 100px; }
  .round-heading { font-size: 14px; }
  #race-chat { right: 10px; bottom: 10px; max-width: calc(100vw - 20px); }
  .race-chat-panel { width: min(350px, calc(100vw - 20px)); }
}

/* Un circuit créé dans la Sandbox peut être publié dans le catalogue partagé. */
.publish-circuit-btn { display: none; color: #ebd399; border-color: #9d844f; }
body.sandbox-mode:not(.online-race) #topbar > .publish-circuit-btn { display: inline-block; }
.circuit-publisher-modal { max-width: 650px; width: min(650px, 96vw); }
.circuit-publisher { line-height: 1.5; }
.publish-preview { display: block; width: 100%; height: 180px; border-radius: 8px; background: #24352a; }
.circuit-publisher fieldset { padding: 0; border: 0; display: grid; gap: 14px; min-width: 0; }
.publish-cars, .publish-gates { display: grid; gap: 6px; }
.circuit-publisher .online-form { max-width: none; }
.circuit-publisher textarea { width: 100%; padding: 8px; }
.circuit-publisher .publish-play { display: block; background: #33513e; border: 1px solid #a78b4d; border-radius: 6px; padding: 12px; margin: 15px 0; text-align: center; color: #f5dda4; }
.online-circuit-detail { margin-top: -4px; }
@media (max-width: 650px) {
  .publish-long { display: none; }
  body.sandbox-mode #topbar { flex-wrap: wrap; height: auto; min-height: 44px; }
  body.sandbox-mode #topbar > .publish-circuit-btn { font-size: 11px; padding: 5px 7px; }
}