@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&display=swap');

:root{
  --room-1:#101219; --room-2:#171a22; --room-3:#1e222c;
  --felt-1:#234037; --felt-2:#182d27;
  --brass:#cba55f; --brass-dim:#8f7a45;
  --red:#b1503f; --blue:#4d6f97; --green:#5c7a52;
  --paper:#ece3d0; --ink:#241f18;
  --text:#e9e5da; --muted:#8f897a;
  --line:rgba(203,165,95,.18);
  --shadow:0 18px 40px -18px rgba(0,0,0,.75);
  --font-d:"Fraunces",Georgia,serif;
  --font-u:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font-u);color:var(--text);background:var(--room-1);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;color:inherit}
img{-webkit-user-drag:none;user-select:none}
a{color:var(--brass);text-decoration:none}
a:hover{text-decoration:underline}

/* header commun */
.top{display:flex;align-items:center;gap:16px;padding:14px 22px;
  background:linear-gradient(180deg,var(--room-3),var(--room-2));border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:12px}
.brand .mark{font-family:var(--font-d);font-weight:700;font-size:24px;letter-spacing:.5px;color:var(--brass)}
.brand .sub{font-size:12px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.top .spacer{flex:1}

.btn{padding:9px 16px;border:1px solid var(--brass-dim);border-radius:8px;
  background:linear-gradient(180deg,rgba(203,165,95,.14),rgba(203,165,95,.04));
  color:var(--brass);font-weight:600;font-size:14px;transition:.15s;display:inline-block}
.btn:hover{background:rgba(203,165,95,.2);border-color:var(--brass);text-decoration:none}
.btn.ghost{border-color:var(--line);color:var(--muted);background:transparent}
.btn.ghost:hover{color:var(--text);border-color:var(--brass-dim)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* conteneur pages simples */
.page{max-width:1000px;margin:0 auto;padding:38px 24px 60px}
.page h1{font-family:var(--font-d);font-weight:600;font-size:30px;margin-bottom:6px}
.page .lead{color:var(--muted);margin-bottom:30px;font-size:15px}
.section-title{font-family:var(--font-d);font-size:19px;margin:0 0 14px}

/* champs */
input[type=text],input[type=number],select{
  width:100%;padding:10px 12px;background:var(--room-3);border:1px solid var(--line);
  border-radius:8px;color:var(--text);font-family:inherit;font-size:14px}
input:focus,select:focus{outline:none;border-color:var(--brass-dim)}
label.lbl{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:7px}
.field{margin-bottom:16px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>*{flex:1;min-width:120px}

/* swatches couleur */
.colors{display:flex;gap:8px}
.swatch{width:30px;height:30px;border-radius:7px;border:2px solid transparent;cursor:pointer}
.swatch.sel{border-color:var(--text);box-shadow:0 0 0 2px var(--room-2),0 0 0 4px var(--brass)}

/* liste des aventures */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.adv-card{background:var(--room-2);border:1px solid var(--line);border-radius:14px;padding:20px;
  display:flex;flex-direction:column;gap:10px;transition:.15s}
.adv-card:hover{border-color:var(--brass-dim);transform:translateY(-2px)}
.adv-card h3{font-family:var(--font-d);font-size:19px}
.adv-card .meta{font-size:12px;color:var(--muted)}
.adv-card .acts{display:flex;gap:8px;margin-top:6px}
.adv-new{border-style:dashed;align-items:center;justify-content:center;text-align:center;
  color:var(--muted);cursor:pointer;min-height:150px}
.adv-new:hover{color:var(--text)}
.adv-new .plus{font-size:34px;color:var(--brass);line-height:1}

/* mini carte réutilisable */
.mini{position:relative;aspect-ratio:5/7;border-radius:2px;overflow:hidden;background:var(--paper);
  border:1px solid rgba(0,0,0,.35);box-shadow:0 6px 14px -6px rgba(0,0,0,.6)}
.mini img{width:100%;height:100%;object-fit:cover;display:block}
.mini .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:700;font-size:30px;color:var(--ink)}
.mini .num.long{font-size:20px}
.mini .num.xlong{font-size:13px;word-break:break-all;line-height:1.1;padding:0 4px;text-align:center}
.mini .band{position:absolute;top:0;left:0;right:0;height:7px}

/* étapes du scan */
.step{background:var(--room-2);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:22px}
.step .head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.step .n{width:30px;height:30px;border-radius:50%;border:1px solid var(--brass-dim);color:var(--brass);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-family:var(--font-d)}
.step .head h2{font-family:var(--font-d);font-size:18px;font-weight:600}
.step .head .sub{font-size:13px;color:var(--muted)}

.drop-sheet{border:1.5px dashed var(--brass-dim);border-radius:10px;padding:26px;text-align:center;
  color:var(--muted);cursor:pointer;background:var(--room-3);transition:.15s}
.drop-sheet:hover{border-color:var(--brass);color:var(--text)}
.drop-sheet.has img{max-height:220px;max-width:100%;border-radius:6px;border:1px solid var(--line)}
.drop-sheet input{display:none}

.detected{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px;margin-top:18px}
.det-card{position:relative}
.det-card .mini{cursor:default}
.det-card .rm{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:6px;border:none;
  background:rgba(20,18,14,.7);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
.det-card .rm:hover{background:var(--red)}

/* --- éditeur de découpe (planche par planche) --- */
.btn.sm{padding:6px 12px;font-size:13px}

.ratio-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;
  padding:12px 14px;background:var(--room-3);border:1px solid var(--line);border-radius:10px}
.ratio-bar b{color:var(--brass);font-family:var(--font-d);font-size:15px}

.icon{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--room-3);
  color:var(--text);font-size:16px;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.icon:hover{border-color:var(--brass-dim)}
.icon.danger:hover{border-color:var(--red);color:var(--red)}

.sheet-panel{background:var(--room-3);border:1px solid var(--line);border-radius:12px;
  padding:14px;margin-bottom:16px}
.sheet-panel .spacer{flex:1}
.sheet-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sheet-title{font-family:var(--font-d);font-size:16px;color:var(--brass)}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{padding:6px 14px;background:transparent;color:var(--muted);font-size:13px;font-weight:600;
  border:none;border-right:1px solid var(--line)}
.seg button:last-child{border-right:none}
.seg button.on{background:rgba(203,165,95,.16);color:var(--brass)}

.sheet-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.sheet-tools .mode{width:auto;flex:0 0 auto}
.sheet-tools .gridOpts{display:flex;gap:10px}
.sheet-tools .gridOpts label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.sheet-tools .gridOpts input{width:64px;padding:6px 8px}
.sheet-tools .btn.active{background:rgba(203,165,95,.2);border-color:var(--brass);color:var(--brass)}
.sheet-tools .count{font-size:13px;color:var(--muted)}

.sheet-canvas{position:relative;display:inline-block;max-width:100%;line-height:0;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--room-1)}
.sheet-canvas img{max-width:100%;max-height:74vh;width:auto;height:auto;display:block}
.sheet-canvas.draw{cursor:crosshair}
.sheet-canvas .boxes{position:absolute;inset:0}
/* découpe prévue : contour en pointillé, bien visible sur n'importe quel fond */
.box{position:absolute;border:2px dashed var(--brass);background:rgba(203,165,95,.06);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.35);cursor:move}
.box:hover{background:rgba(203,165,95,.16);border-color:#f0d38a}
.box .tag{position:absolute;top:-2px;left:-2px;background:var(--brass);color:var(--ink);
  font-size:11px;font-weight:700;padding:1px 6px;border-radius:0 0 6px 0;line-height:1.4}
.box .bx-rm{position:absolute;top:-11px;right:-11px;width:20px;height:20px;border-radius:50%;
  border:none;background:var(--red);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center}
.box .h{position:absolute;width:12px;height:12px;background:var(--brass);border:1px solid var(--ink);border-radius:2px}
.box .h.nw{top:-6px;left:-6px;cursor:nwse-resize}
.box .h.ne{top:-6px;right:-6px;cursor:nesw-resize}
.box .h.sw{bottom:-6px;left:-6px;cursor:nesw-resize}
.box .h.se{bottom:-6px;right:-6px;cursor:nwse-resize}

/* tableau d'association recto/verso */
.assign{display:flex;flex-direction:column;gap:12px}
.assign-row{display:grid;grid-template-columns:70px 1fr 1fr auto;gap:14px;align-items:center;
  background:var(--room-3);border:1px solid var(--line);border-radius:10px;padding:12px}
.assign-row .thumb{width:64px}
.assign-row .colors{margin-top:4px}
.assign-row .rowlbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--room-3);
  border:1px solid var(--brass-dim);color:var(--text);padding:12px 20px;border-radius:10px;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s;z-index:100}
.toast.show{opacity:1}

.muted{color:var(--muted)}
.hint{font-size:13px;color:var(--muted);margin-top:8px}
.empty{text-align:center;color:var(--muted);padding:40px;border:1px dashed var(--line);border-radius:12px}

/* hub / menu */
.hub-card{cursor:pointer;color:var(--text);text-align:left}
.hub-card:hover{text-decoration:none}
.hub-emoji{font-size:40px;line-height:1}

/* barre de synchro (partagée) */
.sync{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.sync .d{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.sync .d.ok{background:#5c9a52}
.sync .d.ko{background:var(--red)}

/* label court réutilisable */
.rowlbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}

/* ---------- Cluedo ---------- */
.cluedo-wrap{display:grid;grid-template-columns:minmax(300px,1fr) auto minmax(300px,1fr);
  gap:18px;padding:18px;align-items:start;width:100%;max-width:none;margin:0}
.board-col{justify-self:center}
.side,.side2{min-width:0}
.panel{display:flex;flex-direction:column;gap:14px}

.board{--ar:24/25;aspect-ratio:var(--ar);height:min(82vh,780px);max-width:96vw;width:auto;
  display:grid;background:#e7dcc0;border:13px solid #6d1a1a;border-radius:6px;
  box-shadow:0 22px 55px -22px rgba(0,0,0,.85), inset 0 0 0 2px #4c1111;position:relative}
.cell{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  min-width:0;font-size:9px;box-sizing:border-box}
.cell.corr{background:#efe7d2;border:1px solid rgba(120,90,60,.16)}
.cell.corr.door{background:#e0cba3}
.cell.start::after{content:"";position:absolute;inset:16%;border-radius:50%;background:var(--sc);
  border:1px solid rgba(0,0,0,.45);box-shadow:0 1px 2px rgba(0,0,0,.45)}
.cell.room,.cell.wall{background:#f5eeda}
.cell.wt{border-top:3px solid #6d1a1a}
.cell.wb{border-bottom:3px solid #6d1a1a}
.cell.wl{border-left:3px solid #6d1a1a}
.cell.wr{border-right:3px solid #6d1a1a}
.roomname{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;
  white-space:nowrap;pointer-events:none;z-index:2}
.roomname .room-ic{display:block;margin-bottom:3px}
.roomname .room-ic .pc-svg{width:30px;height:30px;display:inline-block;opacity:.9}
.roomname .rn{display:block;font-family:var(--font-d);font-weight:700;font-size:13px;color:#3a2a18}
.roomname .rs{display:block;font-size:8px;color:#6d1a1a;margin-top:2px;
  text-transform:uppercase;letter-spacing:.03em}
.cellar-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  font-family:var(--font-d);font-weight:800;font-size:22px;color:#6d1a1a;letter-spacing:.1em;
  white-space:nowrap;pointer-events:none}
.cell.hl{cursor:pointer;background:rgba(203,165,95,.5)!important;
  box-shadow:inset 0 0 0 2px var(--brass-dim);z-index:1}
.cell.hl-room{cursor:pointer;background:rgba(203,165,95,.4)!important;z-index:1}
.pawn{width:76%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;color:#141414;border:1.5px solid rgba(0,0,0,.6);
  box-shadow:0 1px 3px rgba(0,0,0,.55);z-index:3}
.wchip{font-size:8px;background:rgba(40,20,14,.82);color:#f0e6d2;padding:0 3px;border-radius:3px;
  margin:1px;z-index:3;line-height:1.5}
/* pion animé (déplacement case par case) */
.board.animating .pawn{visibility:hidden}
.pawn-fly{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:#141414;border:1.5px solid rgba(0,0,0,.6);
  box-shadow:0 2px 6px rgba(0,0,0,.6);z-index:20;
  transition:left .13s linear, top .13s linear, transform .13s}
/* popup dés */
.dice-modal .modal{max-width:340px;text-align:center}
.dice-box{display:flex;gap:18px;justify-content:center;margin:10px 0 6px}
.die{width:64px;height:64px;border-radius:12px;background:#f5eeda;border:2px solid #6d1a1a;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:8px;gap:2px;box-shadow:0 6px 16px -8px rgba(0,0,0,.6)}
.die.rolling{animation:shake .5s ease-in-out infinite}
@keyframes shake{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-6px) rotate(6deg)}}
.die .pip{border-radius:50%;background:#6d1a1a;align-self:center;justify-self:center;width:11px;height:11px;visibility:hidden}
.die .pip.on{visibility:visible}
.dice-sum{font-family:var(--font-d);font-size:20px;color:var(--brass);margin-top:6px}
/* lecteur musique YouTube (caché) */
#ytmusic{position:fixed;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;z-index:-1}
/* boutons son */
.btn.snd{padding:9px 12px;font-size:16px;line-height:1}
.btn.snd.off{opacity:.4}
/* popup indice reçu */
.reveal-pop{max-width:340px;text-align:center;border:1px solid var(--brass)}
.reveal-pop .cards{justify-content:center;margin:6px 0}
.reveal-pop #revealCard .pcard{width:132px;animation:pop .32s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.pick{cursor:pointer;transition:transform .12s;border-radius:10px}
.pick:hover{transform:translateY(-5px)}
.pick .pcard{box-shadow:0 8px 16px -6px rgba(0,0,0,.7)}

.players{display:flex;flex-direction:column;gap:6px}
.pl{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--room-2);
  border:1px solid var(--line);border-radius:8px;font-size:14px}
.pl.turn{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.pl .dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(0,0,0,.4)}

.act-box{background:var(--room-2);border:1px solid var(--line);border-radius:10px;padding:14px}
.act-box .btn{margin-top:4px}
.act-box select{margin-top:6px}
.act-box.refute{border-color:var(--brass)}
.act-box.reveal{border-color:var(--green)}
.banner{padding:14px;border-radius:10px;text-align:center;font-family:var(--font-d);font-size:18px}
.banner.win{background:rgba(203,165,95,.15);border:1px solid var(--brass);color:var(--brass)}
.dice{font-size:16px;margin:6px 0}
.suggest .btn{margin-top:8px}

.cards{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.pcard{width:92px;background:#f5eeda;border-radius:10px;overflow:hidden;color:#2a2018;
  border:1px solid rgba(0,0,0,.35);box-shadow:0 5px 12px -5px rgba(0,0,0,.65);
  display:flex;flex-direction:column;transition:transform .12s}
.pcard:hover{transform:translateY(-3px)}
.pc-cat{font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  color:#fff;padding:3px 8px}
.pcard.suspect .pc-cat{background:#7d5ba6}
.pcard.weapon .pc-cat{background:var(--red)}
.pcard.room .pc-cat{background:var(--green)}
.pc-body{height:58px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%, #fff8e8, #efe6cf)}
.pc-svg{width:42px;height:42px;display:block}
.pcard.suspect .pc-svg{filter:drop-shadow(0 0 .6px rgba(0,0,0,.75))}
.reveal-pop .pc-svg{width:58px;height:58px}
.pc-name{font-family:var(--font-d);font-weight:600;font-size:12px;text-align:center;
  padding:6px 6px 9px;line-height:1.15}

.notes{background:var(--room-2);border:1px solid var(--line);border-radius:10px;padding:12px}
.ncat{margin-top:8px}
.ntable{width:100%;border-collapse:collapse;font-size:12px}
.ntable th{font-size:9px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);
  font-weight:600;padding:3px 4px;text-align:center;border-bottom:1px solid var(--line)}
.ntable th:first-child{text-align:left;color:var(--brass);font-size:11px;font-family:var(--font-d)}
.ntable td{padding:3px 4px;border-top:1px solid rgba(255,255,255,.05);text-align:center;height:24px}
.ntable td.nname{text-align:left;color:var(--text);white-space:nowrap}
.ntable tr.known .nname{color:var(--muted);text-decoration:line-through}
.ntable tr.has{background:rgba(203,165,95,.14)}
.ntable tr.has .nname{color:var(--brass);font-weight:600;text-decoration:none}
.ntable .c-have{color:var(--brass);font-weight:700}
.ntable .c-shown{color:var(--green);font-weight:700}
.ntable .c-disc{cursor:pointer;color:var(--muted);font-weight:700;width:64px;border-radius:4px}
.ntable .c-disc:hover{background:var(--room-3);color:var(--text)}
.jdot{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.5);vertical-align:middle}

.log{background:var(--room-2);border:1px solid var(--line);border-radius:10px;padding:12px;
  max-height:220px;overflow:auto}
.log .line{font-size:12px;color:var(--muted);padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04)}

@media(max-width:1100px){
  .cluedo-wrap{grid-template-columns:1fr}
  .board-col{order:-1}
  .board{height:auto;width:min(94vw,620px)}
}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(8,9,13,.72);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
.overlay.open{display:flex}
.modal{width:100%;max-width:460px;background:var(--room-2);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.modal-head{padding:20px 24px 14px;border-bottom:1px solid var(--line)}
.modal-head h3{font-family:var(--font-d);font-size:20px}
.modal-body{padding:22px 24px}
.modal-foot{padding:16px 24px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}