* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #14100c; --panel: rgba(28,22,16,.92); --panel2:#241c14;
  --gold: #d8b46a; --gold2:#b8934a; --ink:#f0e6d2; --dim:#a99a80;
  --line: rgba(216,180,106,.28); --danger:#c0263b; --ok:#2f8f4e;
}
html, body { height: 100%; background: var(--bg); color: var(--ink);
  font-family: "Segoe UI", system-ui, sans-serif; overflow: hidden; -webkit-tap-highlight-color: transparent; }
#app { position: fixed; inset: 0; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }

/* ---- écrans ---- */
.screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 25%, rgba(42,32,22,.55), rgba(12,9,6,.9) 78%); z-index: 20; padding: 16px;
  overflow-y: auto; }
.panel { background: rgba(24,18,12,.86); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(216,180,106,.12); backdrop-filter: blur(10px); }
.lobby-card { width: min(460px, 94vw); padding: 28px; text-align: center; }
h1 { font-size: 38px; letter-spacing: 1px; color: var(--gold); font-weight: 800;
  text-shadow: 0 2px 0 #7a5c28, 0 4px 18px rgba(216,180,106,.4); }
.tag3d { font-size: 14px; background: var(--gold); color: #1a140c; padding: 2px 8px; border-radius: 8px; vertical-align: middle; }
.sub { color: var(--dim); margin: 8px 0 18px; font-size: 14px; }
label { display: block; text-align: left; color: var(--dim); font-size: 12px; margin: 10px 2px 4px; text-transform: uppercase; letter-spacing: .5px; }
input, select { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: #1a140d; color: var(--ink); font-size: 16px; outline: none; }
input:focus, select:focus { border-color: var(--gold2); }
#joinCode, #roomCode, b { text-transform: uppercase; letter-spacing: 3px; font-weight: 700; }
button { cursor: pointer; border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
  padding: 12px 16px; border-radius: 10px; font-size: 15px; font-weight: 600; transition: .15s; }
button:hover { border-color: var(--gold2); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button.big { width: 100%; padding: 14px; font-size: 16px; margin-top: 10px; }
button.primary { background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #1a140c; border: none; }
button.ghost { background: transparent; border: none; color: var(--dim); }
button.ghost:hover { color: var(--ink); }
.row { display: flex; gap: 8px; margin-top: 10px; }
.row.join input { flex: 1; }
.codebox { background: #1a140d; border: 1px dashed var(--line); border-radius: 10px; padding: 12px; margin: 8px 0 14px; }
.codebox b { color: var(--gold); font-size: 22px; }
#playerList { list-style: none; text-align: left; margin: 6px 0 14px; }
#playerList li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #1a140d;
  border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; }
#playerList .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
#playerList .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#playerList .rdy { margin-left: auto; font-size: 12px; color: var(--ok); }
#playerList .rdy.no { color: var(--dim); }
#playerList .psus { margin-left: auto; font-size: 12px; color: var(--gold2); }
#playerList .psel { flex: none; width: auto; max-width: 130px; padding: 6px 8px; font-size: 12px; margin-left: auto; }
#playerList .kickbtn { flex: none; width: 30px; height: 30px; padding: 0; border-radius: 8px;
  border-color: var(--danger); color: #ff8a8a; background: rgba(192,38,59,.12); font-weight: 800; }
#playerList .kickbtn:hover { background: var(--danger); color: #fff; }
.err { color: #ff7a7a; min-height: 18px; font-size: 13px; margin-top: 8px; }
.modeopt { display: flex; align-items: center; gap: 8px; text-align: left; margin: 10px 2px; cursor: pointer;
  font-size: 13px; color: var(--ink); text-transform: none; letter-spacing: 0; }
.modeopt input { width: 18px; height: 18px; flex: none; accent-color: var(--gold); }
.modeopt small { color: var(--dim); }
.modeinfo { margin: 6px 0 10px; padding: 8px 12px; border-radius: 10px; background: rgba(216,180,106,.12);
  border: 1px solid var(--line); color: var(--gold); font-size: 13px; }
#actions .hint.secret { color: var(--gold); font-weight: 600; }
.acctimer { align-self: center; padding: 8px 14px; border-radius: 20px; font-weight: 800; font-size: 16px;
  background: rgba(192,38,59,.18); border: 2px solid var(--danger); color: #ff9a9a; min-width: 52px; text-align: center; }

.chargrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 6px; }
.chartile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 12px;
  border: 1px solid var(--line); background: linear-gradient(180deg, #201811, #17110b); cursor: pointer;
  font-size: 11.5px; transition: transform .12s, border-color .12s, box-shadow .12s; text-align: center; }
.chartile .avatar { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px;
  border: 2px solid var(--accent, var(--line)); background: #0d0a06; }
.chartile .cname { line-height: 1.1; }
.chartile:hover { border-color: var(--gold2); transform: translateY(-2px); }
.chartile.sel { border-color: var(--gold); background: #2a2013; box-shadow: 0 6px 18px rgba(216,180,106,.35); transform: translateY(-2px); }
.chartile.taken { opacity: .35; cursor: not-allowed; filter: grayscale(1); }
.chartile.taken:hover { border-color: var(--line); transform: none; }
label small { color: var(--dim); text-transform: none; letter-spacing: 0; }

/* main de cartes (bas gauche) */
/* dock bas gauche : mini-éventail toujours visible, clic = plein écran */
#handDock { position: absolute; bottom: 20px; left: 44px; z-index: 12; }
#handMini { min-height: 70px; padding: 14px 28px 6px; cursor: pointer; overflow: visible;
  transition: transform .16s ease, filter .16s ease; }
#handMini.empty { display: none; }
#handMini:hover { transform: translateY(-3px) scale(1.05); filter: brightness(1.1); }
#handMini .handcard { width: 50px; min-height: 0; padding: 0; margin: 0 -19px; border-width: 1.5px; border-radius: 6px;
  transform-origin: 50% 180px; transform: rotate(var(--rot, 0deg)); box-shadow: -2px 3px 6px rgba(0,0,0,.5);
  pointer-events: none; transition: none; }
#handMini .handcard .hc-img { border-radius: 4px; border-width: 1px; }

.handgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.handcard { background: linear-gradient(160deg, #241a10, #14100a); border: 2px solid var(--accent, var(--gold2));
  border-radius: 12px; padding: 10px; text-align: center; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.handcard.t-weapon { --accent: #c8a24a; }
.handcard.t-room { --accent: #7fa8d8; }

/* modale plein écran assez large pour voir tout l'éventail (pas d'ascenseur) */
#handModal .modal-in { width: min(1100px, 98vw); overflow-x: hidden; }

/* éventail de cartes (comme une main de cartes à jouer, sans la main) */
.handfan { display: flex; justify-content: center; align-items: flex-start; flex-wrap: nowrap;
  min-height: 470px; padding: 100px 20px 40px; overflow: visible; perspective: 1400px; }
.handfan .handcard { width: 158px; flex: 0 0 auto; margin: 0 -34px; padding: 11px;
  transform-origin: 50% 520px; transform: rotate(var(--rot, 0deg));
  transition: transform .22s cubic-bezier(.2,.7,.3,1.2), box-shadow .22s ease, filter .22s ease;
  will-change: transform; cursor: pointer;
  box-shadow: -4px 8px 18px rgba(0,0,0,.55); }
.handfan .handcard:hover { transform: rotate(var(--rot, 0deg)) translateY(-26px) scale(1.05);
  z-index: 999; filter: brightness(1.12);
  box-shadow: 0 16px 34px rgba(0,0,0,.6), 0 0 0 1px var(--accent, var(--gold2)); }
/* carte cliquée : sort de l'arc, se redresse et s'agrandit */
.handfan .handcard.picked,
.handfan .handcard.picked:hover { transform-origin: 50% 50%;
  transform: rotate(0deg) translateY(-40px) scale(1.45) !important;
  z-index: 1000; filter: brightness(1.18);
  box-shadow: 0 24px 48px rgba(0,0,0,.7), 0 0 0 2px var(--gold); }
/* les autres cartes s'estompent quand une est sortie */
.handfan.has-picked .handcard:not(.picked) { filter: brightness(.55) saturate(.8); }
.handcard .hc-type { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold2); }
.handcard .hc-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #0d0a06;
  border: 1px solid var(--line); }
.handcard .hc-name { font-size: 13px; font-weight: 700; color: var(--ink); }

/* image dans la carte révélée */
.rc-front .rc-img { width: 150px; height: 150px; object-fit: cover; border-radius: 12px; border: 3px solid var(--gold); background: #0d0a06; }

/* ---- HUD ---- */
#topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: linear-gradient(180deg, rgba(20,16,12,.9), transparent); z-index: 10; }
#turnInfo { font-weight: 700; font-size: 15px; }
#turnInfo .who { color: var(--gold); }
#dice { display: flex; gap: 6px; margin-left: 6px; }
.die { width: 34px; height: 34px; border-radius: 8px; background: #f0e6d2; color: #1a140c;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
  box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.die.roll { animation: tumble .5s ease; }
@keyframes tumble { 0%{transform:rotate(0) scale(.8)} 50%{transform:rotate(200deg) scale(1.15)} 100%{transform:rotate(360deg) scale(1)} }
.chip { padding: 8px 12px; font-size: 13px; border-radius: 20px; }
#btnMenu { margin-left: auto; }
#btnNotebook { margin-left: 0; }
#topbar .chip:last-child { margin-left: auto; }

#players { position: absolute; top: 60px; left: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 8; max-width: 190px; }
.pcard { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 7px 10px; font-size: 13px; }
.pcard.turn { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(216,180,106,.35); }
.pcard.out { opacity: .45; text-decoration: line-through; }
.pcard .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 6px currentColor; }
.pcard .cc { margin-left: auto; color: var(--dim); font-size: 12px; }
.pcard .me { color: var(--gold); font-size: 10px; }

#actions { position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: 8px; justify-content: center;
  flex-wrap: wrap; padding: 12px; background: linear-gradient(0deg, rgba(20,16,12,.92), transparent); z-index: 9; }
#actions button { min-width: 120px; }
/* boutons "3D" en relief */
.btn3d { position: relative; border: none; border-radius: 14px; padding: 14px 20px; font-size: 16px; font-weight: 800;
  color: #1c140a; letter-spacing: .3px;
  background: linear-gradient(180deg, #e7c777, #c79a45);
  box-shadow: 0 6px 0 #8a6a2a, 0 10px 18px rgba(0,0,0,.5), inset 0 2px 2px rgba(255,255,255,.5);
  transition: transform .07s ease, box-shadow .07s ease; }
.btn3d:hover { transform: translateY(-1px); }
.btn3d:active { transform: translateY(5px); box-shadow: 0 1px 0 #8a6a2a, 0 3px 8px rgba(0,0,0,.5), inset 0 2px 2px rgba(255,255,255,.4); }
.btn3d.roll { background: linear-gradient(180deg, #7fe0a0, #3fae6a); box-shadow: 0 6px 0 #266b41, 0 10px 18px rgba(0,0,0,.5), inset 0 2px 2px rgba(255,255,255,.5); }
.btn3d.roll:active { box-shadow: 0 1px 0 #266b41, 0 3px 8px rgba(0,0,0,.5), inset 0 2px 2px rgba(255,255,255,.4); }
.btn3d.accuse { background: linear-gradient(180deg, #e88a8a, #c0263b); color: #fff; box-shadow: 0 6px 0 #7a1622, 0 10px 18px rgba(0,0,0,.5), inset 0 2px 2px rgba(255,255,255,.35); }
.btn3d.accuse:active { box-shadow: 0 1px 0 #7a1622, 0 3px 8px rgba(0,0,0,.5), inset 0 2px 2px rgba(255,255,255,.3); }
.btn3d.suspect { background: linear-gradient(180deg, #f0d488, #d8a83e); }
#actions .hint { width: 100%; text-align: center; color: var(--dim); font-size: 13px; margin-bottom: 2px; }

#log { position: absolute; bottom: 74px; right: 10px; width: min(300px, 80vw); max-height: 34vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px; z-index: 7; padding-right: 2px; }
.logline { background: rgba(28,22,16,.8); border-left: 3px solid var(--gold2); border-radius: 0 8px 8px 0;
  padding: 6px 10px; font-size: 12.5px; color: var(--ink); }
.logline.acc { border-color: var(--danger); }
.logline b { color: var(--gold); }

/* ---- modales ---- */
.modal { position: absolute; inset: 0; background: rgba(8,6,4,.7); z-index: 30; display: flex;
  align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(3px); }
.modal-in { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px;
  width: min(640px, 96vw); max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.modal-in h2 { color: var(--gold); margin-bottom: 12px; font-size: 22px; }
.pickroom { color: var(--dim); margin-bottom: 12px; }
.pickroom b { color: var(--ink); }
.pickgroup { margin-bottom: 18px; }
.pickgroup > label { font-size: 13px; color: var(--gold2); margin-bottom: 8px; }
/* grille de tuiles-cartes (têtes 3D) */
.picktiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.picktile { border-radius: 12px; border: 2px solid var(--line); background: linear-gradient(180deg, #211812, #14100a);
  padding: 6px 6px 8px; cursor: pointer; text-align: center; display: flex; flex-direction: column; gap: 4px;
  transition: transform .1s ease, border-color .1s ease, box-shadow .1s ease; }
.picktile .pt-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; background: #0d0a06;
  border: 1.5px solid var(--accent, var(--line)); }
.picktile .pt-name { font-size: 11.5px; line-height: 1.15; color: var(--ink); }
.picktile:hover { transform: translateY(-3px); border-color: var(--gold2); }
.picktile.sel { border-color: var(--gold); background: #2c2013;
  box-shadow: 0 8px 22px rgba(216,180,106,.4), inset 0 0 0 1px var(--gold); transform: translateY(-3px) scale(1.03); }
.picktile.sel .pt-name { color: var(--gold); font-weight: 700; }
.picktile.taken { opacity: .32; filter: grayscale(1); cursor: not-allowed; }
.picktile.taken:hover { transform: none; border-color: var(--line); }
.close { margin-top: 8px; }

/* carnet : au-dessus des autres modales pour rester consultable pendant soupçon/accusation */
#notebook { z-index: 55; }
.nbchip { position: absolute; top: 14px; right: 16px; }
.modal-in { position: relative; }
/* carnet (tuiles 3D) */
#notebookGrid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.nbcat h3 { color: var(--gold2); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.nbtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.nbtile { position: relative; border-radius: 12px; border: 2px solid var(--line);
  background: linear-gradient(180deg, #211812, #14100a); padding: 6px 5px 7px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; transition: transform .1s, border-color .1s, box-shadow .1s; }
.nbtile:hover { transform: translateY(-2px); border-color: var(--gold2); }
.nbtile .nb-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; background: #0d0a06;
  border: 1.5px solid var(--accent, var(--line)); }
.nbtile .nb-name { font-size: 11px; line-height: 1.1; color: var(--ink); }
.nbtile .nb-st { font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); }
.nbtile .nb-badge { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
  box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.nbtile.ticked .nb-badge { background: var(--ok); color: #fff; }
.nbtile.crossed .nb-badge { background: var(--danger); color: #fff; }
.nbtile.crossed .nb-img { filter: grayscale(.85) brightness(.7); }
.nbtile.crossed .nb-name { text-decoration: line-through; opacity: .6; }
.nbtile.mine { border-color: rgba(47,143,78,.6); }
.nbtile.mine .nb-st { color: #7fd79b; }
.nbtile.seen .nb-st { color: var(--gold); }
.nbtile.solved { border-color: var(--danger); box-shadow: 0 0 14px rgba(192,38,59,.45); }
.nbtile.solved .nb-st { color: #ff8a8a; font-weight: 800; }

/* bannière centrale (soupçon / accusation) */
.bannermsg { background: rgba(24,18,12,.96); border: 1px solid var(--gold2); border-radius: 14px;
  padding: 12px 20px; font-size: 15px; color: var(--ink); text-align: center; line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: pop .3s ease; max-width: min(92vw, 460px); }
.bannermsg b { color: var(--gold); }
.bannermsg .bdisp { color: var(--dim); font-size: 13px; }
.bannermsg.strong { border-color: var(--danger); font-size: 17px; }
.bannermsg.strong b { color: #ff8a8a; }

#notebookGridOld { display: grid; grid-template-columns: 1fr; gap: 16px; }
.nbcat h3 { color: var(--gold2); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.nbrow { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: #1a140d;
  border: 1px solid var(--line); margin-bottom: 4px; font-size: 14px; }
.nbrow .dot { width: 12px; height: 12px; border-radius: 50%; }
.nbrow .st { margin-left: auto; font-size: 11px; padding: 2px 8px; border-radius: 6px; }
.nbrow.mine { opacity: .7; }
.nbrow.mine .st { background: rgba(47,143,78,.25); color: #7fd79b; }
.nbrow.seen .st { background: rgba(200,150,60,.25); color: var(--gold); }
.nbrow.maybe .st { background: rgba(120,110,90,.2); color: var(--dim); }
.nbrow.solved { border-color: var(--danger); box-shadow: 0 0 12px rgba(192,38,59,.4); }
.nbrow.solved .st { background: var(--danger); color: #fff; }
.nbrow .nbname { flex: 0 0 auto; }
.nbrow.crossed .nbname { text-decoration: line-through; opacity: .55; }
.nbmark { flex: none; width: 30px; height: 30px; margin-left: 8px; padding: 0; border-radius: 8px;
  border: 2px solid var(--line); background: #12100a; color: var(--ink); font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; }
.nbmark.m1 { border-color: var(--ok); color: #7fd79b; background: rgba(47,143,78,.15); }
.nbmark.m2 { border-color: var(--danger); color: #ff8a8a; background: rgba(192,38,59,.15); }
.nbrow .st { margin-left: auto; }

.solution { display: flex; gap: 10px; justify-content: center; margin: 16px 0; flex-wrap: wrap; }
.solcard { background: #1a140d; border: 1px solid var(--gold); border-radius: 10px; padding: 12px 16px;
  text-align: center; min-width: 100px; }
.solcard span { display: block; font-size: 11px; color: var(--dim); text-transform: uppercase; }
.solcard b { color: var(--gold); font-size: 16px; }

/* ---- révélation de carte (flip 3D) ---- */
#reveal { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; cursor: pointer; }
.reveal-bg { position: absolute; inset: 0; background: rgba(6,4,3,.78); backdrop-filter: blur(4px);
  animation: fadein .3s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.reveal-who { position: relative; color: var(--gold); font-size: 20px; font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,.7); animation: pop .4s ease; text-align: center; }
.reveal-who b { color: #fff; }
.reveal-hint { position: relative; color: var(--dim); font-size: 13px; animation: pop .6s ease; }
.reveal-card { position: relative; width: 220px; height: 310px; perspective: 1200px;
  animation: cardIn .5s cubic-bezier(.2,.9,.3,1.2); }
@keyframes cardIn { from { transform: translateY(30px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.rc-inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg);
  transition: transform 1s cubic-bezier(.2,.8,.25,1); }
.rc-inner.flipped { transform: rotateY(0deg); }
.rc-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; }
.rc-back { transform: rotateY(180deg); font-size: 90px; color: var(--gold);
  background: repeating-linear-gradient(45deg, #2a1f14, #2a1f14 10px, #221a10 10px, #221a10 20px);
  border: 3px solid var(--gold2); }
.rc-front { flex-direction: column; gap: 14px; padding: 20px; text-align: center;
  background: linear-gradient(160deg, #2a2016, #191209); border: 3px solid var(--gold); color: var(--ink); }
.rc-front .rc-type { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold2); }
.rc-front .rc-icon { width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 54px; box-shadow: 0 0 24px currentColor inset, 0 0 14px currentColor; }
.rc-front .rc-name { font-size: 24px; font-weight: 800; color: var(--gold); }

#toast { position: absolute; top: 54px; left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toastmsg { background: rgba(28,22,16,.96); border: 1px solid var(--gold2); color: var(--ink);
  padding: 10px 18px; border-radius: 20px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.5);
  animation: pop .3s ease; }
.toastmsg.big { font-size: 16px; border-color: var(--gold); }
@keyframes pop { from{transform:translateY(-10px);opacity:0} to{transform:translateY(0);opacity:1} }

@media (max-width: 640px) {
  #players { max-width: 150px; font-size: 12px; }
  #log { width: 210px; bottom: 92px; }
  #actions button { min-width: 46%; }
}