:root {
  --night: #16121F;
  --night-2: #211A30;
  --night-3: #2E2542;
  --line: #3D3357;
  --text: #EEEAF6;
  --muted: #A79DBE;
  --board: #D6EAD6;
  --board-edge: #BFD9C0;
  --ink: #1E2420;
  --violet: #A78BFA;
  --cyan: #2DD4E6;
  --gold: #F2C14E;
  --danger: #F0566E;
  --ok: #3ECF8E;

  --brown: #8B4A2B; --lightblue: #9FD3F0; --pink: #D63A92; --orange: #F5921E;
  --red: #E5202A; --yellow: #F7E414; --green: #1FA855; --darkblue: #0A69B5;

  --S: min(calc(100vh - 20px), calc(100vw - 400px));
  --u: calc((var(--S) - 4px) / 12.6);
  --deep: calc(var(--u) * 1.8);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 90% at 30% 40%, #2A2140 0%, var(--night) 55%, #0E0B15 100%) fixed;
  background-size: cover;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
/* Table de jeu : le tapis vert de l'image (69 % de sa hauteur) entoure le plateau. */
body.has-table .board-wrap { background: var(--table-img) center / auto calc(var(--S) * 1.62) no-repeat; }
body.has-table .board { box-shadow: 0 0 0 3px #0E0B15, 0 18px 50px rgba(0, 0, 0, .65); }
.login-logo { display: block; width: min(300px, 70vw); margin: 0 auto; mix-blend-mode: screen; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.screen { min-height: 100vh; }

/* ───── Logo néon ───── */
.logo {
  font-family: 'Monoton', 'Archivo', sans-serif;
  font-weight: 400;
  color: #E9DEFF;
  letter-spacing: 0.04em;
  text-shadow: 0 0 6px var(--violet), 0 0 18px rgba(167, 139, 250, .65), 0 0 40px rgba(45, 212, 230, .35);
  margin: 0;
}
.logo.small { font-size: 26px; }

/* ───── Boutons & champs ───── */
.btn {
  border: 1px solid var(--line);
  background: var(--night-3);
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: background .15s, border-color .15s, transform .08s;
}
.btn:hover { border-color: var(--violet); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, #8F6EF5, #6B4BD8); border-color: #9C82F7; color: #fff; }
.btn.go { background: linear-gradient(180deg, #2ED69A, #19A974); border-color: #4BE3AC; color: #08261A; }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); border-color: var(--line); }
.btn.small { padding: 6px 10px; font-size: 13px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
input[type=text], input:not([type]), input[type=password], input[type=number], select {
  background: var(--night); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; color: var(--text);
}
input:focus { border-color: var(--violet); outline: none; }
label.check { display: flex; gap: 10px; align-items: flex-start; color: var(--text); }
label.check input { margin-top: 3px; accent-color: var(--violet); }
fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; margin: 0; }
legend { padding: 0 6px; color: var(--muted); font-size: 14px; }
.error { color: var(--danger); min-height: 1.4em; margin: 6px 0 0; }
.hint { color: var(--muted); font-size: 14px; }

/* ───── Connexion ───── */
#screen-login { display: grid; place-items: center; padding: 24px; }
.login { width: min(420px, 100%); text-align: center; }
.login .logo { font-size: clamp(38px, 11vw, 60px); line-height: 1.1; }
.login-sub { color: var(--muted); margin: 10px 0 28px; }
.login form { display: grid; gap: 14px; text-align: left; background: rgba(33, 26, 48, .85); padding: 22px; border-radius: 16px; border: 1px solid var(--line); }

/* ───── Barre du haut, salons ───── */
.topbar { display: flex; align-items: center; gap: 16px; padding: 14px 22px; border-bottom: 1px solid var(--line); background: rgba(22, 18, 31, .8); }
.topbar .who { margin-left: auto; color: var(--muted); }
.lobby { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 28px; padding: 24px; max-width: 1200px; margin: 0 auto; }
.lobby h2, .room h2 { font-size: 20px; margin: 0 0 12px; }
.panel { background: rgba(33, 26, 48, .88); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 14px; }
.game-list { display: grid; gap: 10px; }
.game-item { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; padding: 14px 16px; background: rgba(33, 26, 48, .88); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 12px; }
.game-item.lobby { border-left-color: var(--cyan); }
.game-item.playing { border-left-color: var(--violet); }
.game-item.finished { opacity: .7; }
.game-item h3 { margin: 0; font-size: 17px; }
.game-item .meta { color: var(--muted); font-size: 14px; }
.game-item .pawns { font-size: 18px; letter-spacing: 2px; }
.empty { color: var(--muted); padding: 22px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; }

.room { max-width: 640px; margin: 24px auto; padding: 0 16px; }
.room-title { font-size: 22px; margin: 0; }
.room h3 { margin: 4px 0 0; font-size: 15px; color: var(--muted); font-weight: 600; }
.seats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.seats li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--night); border-radius: 10px; }
.seats .host { color: var(--gold); font-size: 13px; }
.seats .kick { margin-left: auto; }
.token-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.token-btn { aspect-ratio: 1; border-radius: 12px; border: 2px solid var(--line); background: var(--night); font-size: 30px; cursor: pointer; display: grid; place-items: center; padding: 6px; }
.token-btn img { width: 100%; height: 100%; object-fit: contain; }
.token-btn.mine { border-color: var(--violet); box-shadow: 0 0 12px rgba(167, 139, 250, .5); }
.token-btn.taken { opacity: .3; cursor: not-allowed; }
.rules { margin: 0; padding-left: 20px; color: var(--text); }

/* ───── Partie : mise en page ───── */
.game { display: grid; grid-template-columns: 1fr 380px; height: 100vh; overflow: hidden; }
.board-wrap { display: grid; place-items: center; padding: 10px; overflow: hidden; }
.side { background: rgba(22, 18, 31, .94); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.side-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.side-head h1 { font-size: 16px; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pot { color: var(--gold); font-weight: 700; font-size: 14px; }
.side-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* ───── Plateau ───── */
.board {
  position: relative;
  width: var(--S); height: var(--S);
  display: grid;
  grid-template-columns: var(--deep) repeat(9, var(--u)) var(--deep);
  grid-template-rows: var(--deep) repeat(9, var(--u)) var(--deep);
  background: var(--board);
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 0 0 4px #0E0B15, 0 0 0 6px var(--violet), 0 0 26px 6px rgba(167, 139, 250, .45), 0 0 60px rgba(45, 212, 230, .25), 0 24px 60px rgba(0, 0, 0, .6);
  color: var(--ink);
  user-select: none;
}
.cell { position: relative; border: 1px solid var(--ink); margin: -0.5px; overflow: hidden; cursor: pointer; background: var(--board); }
.cell:hover .inner { background: #E6F3E6; }
.cell .inner {
  position: absolute; left: 50%; top: 50%;
  width: var(--u); height: var(--deep);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  display: flex; flex-direction: column; align-items: center; text-align: center;
  font-family: 'Archivo Narrow', 'Archivo', sans-serif;
}
.cell.corner .inner { width: var(--deep); height: var(--deep); justify-content: center; }
.side-left .inner { --rot: 90deg; }
.side-top .inner { --rot: 180deg; }
.side-right .inner { --rot: -90deg; }
.corner-bl .inner { --rot: 45deg; }
.corner-tl .inner { --rot: 135deg; }
.corner-tr .inner { --rot: -135deg; }
.corner-br .inner { --rot: -45deg; }

.band { width: 100%; height: 22%; flex: none; border-bottom: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; gap: 6%; }
.band.brown { background: var(--brown); } .band.lightblue { background: var(--lightblue); } .band.pink { background: var(--pink); }
.band.orange { background: var(--orange); } .band.red { background: var(--red); } .band.yellow { background: var(--yellow); }
.band.green { background: var(--green); } .band.darkblue { background: var(--darkblue); }
.house { width: 15%; aspect-ratio: 1; background: #2BB24C; border: 1px solid #0B3D18; border-radius: 1px; }
.hotel { width: 40%; height: 55%; background: #D7262E; border: 1px solid #4A0A0E; border-radius: 1px; }
.cname { font-weight: 700; font-size: calc(var(--u) * .145); line-height: 1.08; padding: 6% 6% 0; letter-spacing: -0.01em; }
.cprice { margin-top: auto; padding-bottom: 6%; font-size: calc(var(--u) * .14); font-weight: 500; }
.cicon { font-size: calc(var(--u) * .38); line-height: 1; margin: 6% 0 2%; }
.corner .cname { font-size: calc(var(--u) * .17); }
.corner .cicon { font-size: calc(var(--u) * .62); }
.owner-mark { position: absolute; inset: auto 0 0 0; height: 9%; background: var(--owner); }
.cell.mortgaged .inner { background: repeating-linear-gradient(45deg, rgba(30, 36, 32, .0) 0 6px, rgba(30, 36, 32, .14) 6px 12px); }
.cell.mortgaged .cname::after { content: ' · hypothéquée'; font-weight: 500; }
.cell.highlight { box-shadow: inset 0 0 0 3px var(--cyan); z-index: 1; }
.cell.mine-glow .owner-mark { box-shadow: 0 0 6px var(--owner); }

/* ───── Centre du plateau ───── */
.center { grid-column: 2 / 11; grid-row: 2 / 11; position: relative; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, #E4F1E4 0%, var(--board) 70%); }
.center-logo { position: absolute; font-size: calc(var(--u) * .95); transform: rotate(-38deg); opacity: .9; pointer-events: none; color: #4C2FB8; text-shadow: 0 0 2px #fff, 0 0 10px rgba(167, 139, 250, .9), 0 0 24px rgba(45, 212, 230, .5); }
.pile { position: absolute; width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.83); border-radius: 8px; display: grid; place-items: center; font-family: 'Archivo Narrow', sans-serif; font-weight: 700; font-size: calc(var(--u) * .2); text-align: center; border: 2px dashed rgba(30, 36, 32, .35); background-size: cover; background-position: center; }
.pile-chance { left: 14%; top: 14%; transform: rotate(135deg); color: #B4520D; background-color: rgba(245, 146, 30, .14); }
.pile-community { right: 14%; bottom: 14%; transform: rotate(-45deg); color: #0A5590; background-color: rgba(10, 105, 181, .12); }
.pile.has-img { border: none; background-color: transparent; border-radius: calc(var(--u) * .07); box-shadow: 2px 2px 0 #1b1528, 4px 4px 0 #2a2140, 0 8px 16px rgba(0, 0, 0, .45); }
.pile.has-img span { display: none; }

.stage {
  position: relative; z-index: 2;
  width: min(86%, calc(var(--u) * 6.4));
  background: rgba(22, 18, 31, .93);
  color: var(--text);
  border-radius: 16px;
  border: 1px solid #4A3E69;
  padding: calc(var(--u) * .22) calc(var(--u) * .26);
  display: grid; gap: calc(var(--u) * .16); justify-items: center; text-align: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45), 0 0 0 1px rgba(167, 139, 250, .25);
  font-size: clamp(13px, calc(var(--u) * .2), 16px);
}
.stage-msg { margin: 0; line-height: 1.35; }
.stage-msg strong { color: #fff; }
.stage-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.stage .btn { padding: 9px 14px; }
.stage .deed-mini { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); border-radius: 8px; padding: 8px 12px; font-family: 'Archivo Narrow', sans-serif; font-weight: 700; }
.stage .deed-mini i { width: 14px; height: 30px; border-radius: 3px; display: block; }

/* Dés */
.dice { display: flex; gap: calc(var(--u) * .2); }
.die { width: calc(var(--u) * .62); height: calc(var(--u) * .62); min-width: 30px; min-height: 30px; background: #FBFAF7; border-radius: 18%; box-shadow: inset 0 -3px 0 #D8D3C8, 0 3px 8px rgba(0, 0, 0, .35); position: relative; }
.die::before { content: ''; position: absolute; inset: 0; background-repeat: no-repeat; }
.die[data-v="1"]::before { background-image: radial-gradient(circle, var(--pip, #1E2420) 0 9%, transparent 10%); }
.die[data-v="2"]::before { background-image: radial-gradient(circle at 28% 28%, var(--pip, #1E2420) 0 9%, transparent 10%), radial-gradient(circle at 72% 72%, var(--pip, #1E2420) 0 9%, transparent 10%); }
.die[data-v="3"]::before { background-image: radial-gradient(circle at 26% 26%, var(--pip, #1E2420) 0 9%, transparent 10%), radial-gradient(circle, var(--pip, #1E2420) 0 9%, transparent 10%), radial-gradient(circle at 74% 74%, var(--pip, #1E2420) 0 9%, transparent 10%); }
.die[data-v="4"]::before { background-image: radial-gradient(circle at 28% 28%, var(--pip, #1E2420) 0 9%, transparent 10%), radial-gradient(circle at 72% 28%, var(--pip, #1E2420) 0 9%, transparent 10%), radial-gradient(circle at 28% 72%, var(--pip, #1E2420) 0 9%, transparent 10%), radial-gradient(circle at 72% 72%, var(--pip, #1E2420) 0 9%, transparent 10%); }
.die[data-v="5"]::before { background-image: radial-gradient(circle at 26% 26%, var(--pip, #1E2420) 0 9%, transparent 10%), radial-gradient(circle at 74% 26%, var(--pip, #1E2420) 0 9%, transparent 10%), radial-gradient(circle, var(--pip, #1E2420) 0 9%, transparent 10%), radial-gradient(circle at 26% 74%, var(--pip, #1E2420) 0 9%, transparent 10%), radial-gradient(circle at 74% 74%, var(--pip, #1E2420) 0 9%, transparent 10%); }
.die[data-v="6"]::before { background-image: radial-gradient(circle at 28% 24%, var(--pip, #1E2420) 0 9%, transparent 10%), radial-gradient(circle at 72% 24%, var(--pip, #1E2420) 0 9%, transparent 10%), radial-gradient(circle at 28% 50%, var(--pip, #1E2420) 0 9%, transparent 10%), radial-gradient(circle at 72% 50%, var(--pip, #1E2420) 0 9%, transparent 10%), radial-gradient(circle at 28% 76%, var(--pip, #1E2420) 0 9%, transparent 10%), radial-gradient(circle at 72% 76%, var(--pip, #1E2420) 0 9%, transparent 10%); }
.dice.rolling .die { animation: tumble .55s ease-out; }
@keyframes tumble {
  0% { transform: translateY(-14px) rotate(-200deg) scale(.8); }
  60% { transform: translateY(3px) rotate(20deg) scale(1.05); }
  100% { transform: none; }
}

/* Enchères */
.auction { width: 100%; display: grid; gap: 8px; }
.auction-bar { height: 6px; border-radius: 3px; background: var(--night-3); overflow: hidden; }
.auction-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); transition: width .25s linear; }
.auction-high { font-size: 1.25em; font-weight: 800; color: var(--gold); }
.bid-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.bid-row input { width: 90px; padding: 8px; }

/* ───── Pions ───── */
.tokens { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pawn {
  position: absolute; width: calc(var(--u) * .62); height: calc(var(--u) * .62); min-width: 22px; min-height: 22px;
  margin: calc(var(--u) * -.31) 0 0 calc(var(--u) * -.31);
  border-radius: 50%; display: grid; place-items: center;
  font-size: calc(var(--u) * .3);
  background: #fff; border: 3px solid var(--pc);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .4), 0 0 8px var(--pc);
  transition: left .16s ease-in-out, top .16s ease-in-out;
}
.pawn img { width: 86%; height: 86%; object-fit: contain; }
.pawn.current { animation: bob 1.4s ease-in-out infinite; z-index: 2; }
.pawn.jailed { filter: grayscale(.6); }
@keyframes bob { 50% { transform: translateY(-3px); } }

/* ───── Joueurs ───── */
.players { list-style: none; margin: 0; padding: 8px; display: grid; gap: 6px; overflow-y: auto; max-height: 40vh; }
.pl { display: grid; grid-template-columns: 36px 1fr auto; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--night-2); border: 1px solid transparent; position: relative; }
.pl.current { border-color: var(--pc); box-shadow: 0 0 12px -2px var(--pc); }
.pl.bankrupt { opacity: .45; }
.pl.bankrupt .pl-name { text-decoration: line-through; }
.pl-token { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 3px solid var(--pc); display: grid; place-items: center; font-size: 18px; overflow: hidden; }
.pl-token img { width: 86%; height: 86%; object-fit: contain; }
.pl-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-money { font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.pl-sub { color: var(--muted); font-size: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pl-chips { display: flex; gap: 2px; }
.chip { width: 9px; height: 12px; border-radius: 2px; }
.chip.dim { opacity: .35; }
.pl-menu { grid-column: 3; font-size: 12px; display: flex; gap: 2px; justify-content: flex-end; }
.float-money { position: absolute; right: 10px; top: -4px; font-weight: 800; animation: floatup 1.6s ease-out forwards; pointer-events: none; }
.float-money.plus { color: var(--ok); }
.float-money.minus { color: var(--danger); }
@keyframes floatup { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-22px); } }

/* ───── Onglets ───── */
.side-tabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 8px; }
.tab { flex: 1; background: none; border: none; padding: 10px 4px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; font-weight: 600; font-size: 14px; }
.tab.active { color: var(--text); border-bottom-color: var(--violet); }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; padding: 0 5px; }
.tab-body { flex: 1; overflow-y: auto; padding: 10px; min-height: 0; }
.log { font-size: 13px; color: var(--muted); display: flex; flex-direction: column-reverse; gap: 4px; }
.log p { margin: 0; }
.log p:first-child { color: var(--text); }

.my-group { margin-bottom: 10px; }
.prop-row { display: grid; grid-template-columns: 6px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: var(--night-2); border-radius: 8px; margin-bottom: 4px; cursor: pointer; border: 1px solid transparent; }
.prop-row:hover { border-color: var(--line); }
.prop-row .sw { width: 6px; height: 100%; min-height: 26px; border-radius: 3px; }
.prop-row .pn { font-weight: 600; font-size: 14px; }
.prop-row .ps { font-size: 12px; color: var(--muted); }

.trade { background: var(--night-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; display: grid; gap: 8px; font-size: 14px; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trade-cols h4 { margin: 0 0 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.trade-cols ul { margin: 0; padding-left: 16px; }

/* ───── Dette ───── */
.debt { margin: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(240, 86, 110, .12); border: 1px solid var(--danger); font-size: 14px; display: grid; gap: 8px; }

/* ───── Fenêtre / acte de propriété ───── */
.modal { position: fixed; inset: 0; background: rgba(8, 6, 12, .7); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal-box { position: relative; background: var(--night-2); border: 1px solid var(--line); border-radius: 16px; padding: 20px; width: min(460px, 100%); max-height: 90vh; overflow-y: auto; }
.modal-box.wide { width: min(760px, 100%); }
.modal-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--muted); font-size: 26px; cursor: pointer; line-height: 1; }
.modal h2 { margin: 0 0 12px; font-size: 19px; }
.deed { background: #FBFBF7; color: var(--ink); border-radius: 10px; padding: 14px; border: 1px solid #c9c9c0; font-family: 'Archivo Narrow', sans-serif; margin-bottom: 14px; }
.deed-head { margin: -14px -14px 12px; padding: 12px 14px; text-align: center; border-radius: 10px 10px 0 0; border-bottom: 2px solid var(--ink); }
.deed-head small { display: block; font-size: 12px; font-weight: 500; }
.deed-head strong { font-size: 19px; display: block; line-height: 1.15; }
.deed-head.lightblue, .deed-head.yellow, .deed-head.plain { color: var(--ink); }
.deed-head.brown, .deed-head.pink, .deed-head.orange, .deed-head.red, .deed-head.green, .deed-head.darkblue { color: #fff; }
.deed table { width: 100%; border-collapse: collapse; font-size: 15px; }
.deed td { padding: 3px 0; }
.deed td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.deed tr.on td { color: #4C2FB8; }
.deed .deed-foot { border-top: 1px solid #ccc; margin-top: 8px; padding-top: 8px; font-size: 14px; display: grid; gap: 2px; }
.deed-owner { font-size: 14px; margin-bottom: 10px; color: var(--muted); }

.trade-form { display: grid; gap: 14px; }
.trade-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trade-side { background: var(--night); border-radius: 12px; padding: 12px; display: grid; gap: 8px; align-content: start; }
.trade-side h3 { margin: 0; font-size: 15px; }
.trade-side .props { display: grid; gap: 4px; max-height: 240px; overflow-y: auto; }
.trade-side label.check { font-size: 14px; align-items: center; }
.trade-side label.check i { width: 8px; height: 16px; border-radius: 2px; display: inline-block; flex: none; }

/* ───── Carte piochée ───── */
.card-reveal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 40; background: rgba(8, 6, 12, .45); cursor: pointer; }
.card {
  width: min(340px, 86vw); aspect-ratio: 1.6; border-radius: 16px; padding: 22px 24px;
  display: grid; align-content: center; gap: 12px; text-align: center; color: var(--ink);
  background: #FFFDF6; box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  animation: flipin .5s cubic-bezier(.2, .8, .2, 1.1);
  font-family: 'Archivo Narrow', sans-serif;
}
.card h3 { margin: 0; font-size: 22px; }
.card p { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 500; }
.card.chance { border: 6px solid var(--orange); }
.card.chance h3 { color: #C25E0B; }
.card.community { border: 6px solid var(--darkblue); }
.card.community h3 { color: var(--darkblue); }
/* Carte piochée : on voit d'abord le dos, puis elle se retourne. */
.flip { width: min(340px, 86vw); aspect-ratio: 1.6; perspective: 1000px; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: flipcard 1.1s cubic-bezier(.3, .7, .2, 1) forwards; }
.flip-back, .flip .card { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip .card { inset: 0; }
.flip-back { left: 50%; top: 50%; width: 52%; aspect-ratio: .71; border-radius: 14px; background: center / cover no-repeat; transform: translate(-50%, -50%); box-shadow: 0 20px 50px rgba(0, 0, 0, .55); }
.flip .card { width: 100%; transform: rotateY(180deg); animation: none; }
@keyframes flipcard { 0% { transform: scale(.6) rotateY(0); } 40% { transform: scale(1) rotateY(0); } 100% { transform: rotateY(180deg); } }
/* Carte qui vole du tas au centre puis se retourne */
.fly { position: fixed; left: 0; top: 0; height: min(440px, 72vh); aspect-ratio: .71; transform-origin: 50% 50%; perspective: 1200px; will-change: transform; }
.fly-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.fly-back, .fly-face { position: absolute; inset: 0; border-radius: 6%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fly-back { background: center / cover no-repeat; display: grid; place-items: center; font-family: 'Archivo Narrow', sans-serif; font-weight: 700; font-size: 26px; color: #fff; }
.fly.chance .fly-back { background-color: #C25E0B; }
.fly.community .fly-back { background-color: #0A4F8A; }
.fly-face { transform: rotateY(180deg); background: #FFFDF6; color: var(--ink); display: grid; align-content: center; gap: 16px; padding: 28px 24px; text-align: center; font-family: 'Archivo Narrow', sans-serif; }
.fly-face h3 { margin: 0; font-size: 26px; }
.fly-face p { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 500; }
.fly-face small { color: #6b6b6b; font-size: 14px; }
.fly.chance .fly-face { box-shadow: inset 0 0 0 8px var(--orange); }
.fly.chance .fly-face h3 { color: #C25E0B; }
.fly.community .fly-face { box-shadow: inset 0 0 0 8px var(--darkblue); }
.fly.community .fly-face h3 { color: var(--darkblue); }
@keyframes flipin { from { transform: perspective(800px) rotateY(90deg) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--night-3); border: 1px solid var(--line); padding: 10px 16px; border-radius: 10px; z-index: 60; max-width: 90vw; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.toast.err { border-color: var(--danger); }

.winner { font-size: 1.3em; font-weight: 800; color: var(--gold); }

/* ───── Mobile / iPhone ───── */
@media (max-width: 900px) {
  :root { --S: min(calc(100vw - 12px), calc(100vh - 12px)); }
  .game { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .board-wrap { padding: 6px; }
  .side { border-left: none; border-top: 1px solid var(--line); }
  .players { max-height: none; }
  .tab-body { max-height: 60vh; }
  .lobby { grid-template-columns: 1fr; padding: 16px; }
  .trade-sides { grid-template-columns: 1fr; }
  .cname { font-size: calc(var(--u) * .16); }
  .cprice { font-size: calc(var(--u) * .15); }
  /* Sur téléphone, le panneau d'action devient une barre fixe en bas de l'écran */
  .stage {
    position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto; z-index: 20; font-size: 15px; padding: 10px 12px; gap: 8px;
    background: #1B1528; box-shadow: 0 -8px 30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(167, 139, 250, .35);
    max-height: 46vh; overflow-y: auto;
  }
  .stage:empty { display: none; }
  .die { width: 34px; height: 34px; }
  .side { padding-bottom: 230px; }
  .stage .btn { padding: 9px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Pions en métal : fond sombre pour que l'argent ressorte */
.pawn:has(img), .pl-token:has(img) { background: radial-gradient(circle at 40% 35%, #3A3052, #15101F); }
.pawn img, .pl-token img { width: 94%; height: 94%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.token-btn:has(img) { background: radial-gradient(circle at 40% 35%, #3A3052, #15101F); }


/* ═════════ Panneau central : style Art déco (laque noire et or) ═════════ */
:root { --or: #D9B46A; --or-clair: #F3DDA4; --or-fonce: #8C6A2E; --laque: #0B0A0C; }
.stage {
  --serif: 'Cormorant Garamond', 'Georgia', serif;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .07), transparent 55%),
    linear-gradient(180deg, #16141A 0%, var(--laque) 60%, #050506 100%);
  color: var(--or-clair);
  border: 1px solid var(--or);
  border-radius: 10px;
  padding: calc(var(--u) * .5) calc(var(--u) * .34) calc(var(--u) * .3);
  box-shadow:
    0 0 0 4px var(--laque), 0 0 0 5px var(--or-fonce),
    0 0 0 8px var(--laque), 0 0 0 10px var(--or),
    inset 0 0 0 5px var(--laque), inset 0 0 0 6px rgba(217, 180, 106, .55),
    0 18px 40px rgba(0, 0, 0, .6);
  font-family: var(--serif);
  font-size: clamp(15px, calc(var(--u) * .25), 21px);
  font-weight: 600;
}
/* Coins à redans */
.stage::before, .stage::after {
  content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none;
  border: 2px solid var(--or); top: 10px;
}
.stage::before { left: 10px; border-right: 0; border-bottom: 0; box-shadow: -5px -5px 0 -3px var(--or-fonce); }
.stage::after { right: 10px; border-left: 0; border-bottom: 0; box-shadow: 5px -5px 0 -3px var(--or-fonce); }

/* Bandeau doré */
.stage-ribbon {
  position: absolute; top: calc(-1 * clamp(16px, calc(var(--u) * .3), 22px)); left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 34px 6px;
  font-family: var(--serif); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  font-size: clamp(13px, calc(var(--u) * .24), 20px);
  color: #3A2810;
  background: linear-gradient(180deg, #F8E7B4 0%, #E0BE72 45%, #B48A3E 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5));
  z-index: 3;
}
.stage-ribbon:empty { display: none; }
.stage-ribbon::before, .stage-ribbon::after { content: '~'; margin: 0 8px; opacity: .6; }

/* Socle des dés */
.dice {
  position: relative; padding: 8px 22px; gap: 12px;
  background: linear-gradient(180deg, #1E1B20, #0C0B0D);
  border: 1px solid var(--or);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  box-shadow: inset 0 0 0 3px var(--laque), inset 0 0 0 4px rgba(217, 180, 106, .5);
}
.die {
  --pip: #B8862C;
  border-radius: 16%;
  background: radial-gradient(120% 120% at 30% 25%, #FFFBEF 0%, #EFE3C6 55%, #CDBB92 100%);
  box-shadow: inset 0 -3px 0 rgba(120, 90, 40, .35), inset 0 2px 0 rgba(255, 255, 255, .8), 0 4px 8px rgba(0, 0, 0, .55);
}
.die + .die {
  --pip: #E8C878;
  background: radial-gradient(120% 120% at 30% 25%, #8A6B4A 0%, #5A4129 55%, #2F2114 100%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 220, 160, .35), 0 4px 8px rgba(0, 0, 0, .6);
}

/* Texte doré */
.stage-msg { color: var(--or-clair); text-shadow: 0 0 10px rgba(243, 221, 164, .35), 0 1px 0 #000; line-height: 1.3; }
.stage-msg strong { color: #FFF1CC; }
.stage-msg small { font-size: .82em; opacity: .85; }

/* Boutons : améthyste à cerclage doré */
.stage .btn {
  font-family: var(--serif); font-weight: 700; font-size: 1.05em; letter-spacing: .01em;
  padding: 8px 22px; border-radius: 999px;
  color: var(--or-clair);
  background: linear-gradient(180deg, #2A2430, #141117);
  border: 2px solid var(--or);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 8px rgba(0, 0, 0, .5);
  text-shadow: 0 1px 0 #000;
}
.stage .btn:hover { border-color: var(--or-clair); }
.stage .btn.go, .stage .btn.primary {
  color: #FBEBC4;
  background:
    radial-gradient(60% 80% at 30% 20%, rgba(255, 255, 255, .28), transparent 60%),
    radial-gradient(70% 90% at 75% 85%, rgba(40, 10, 70, .55), transparent 70%),
    linear-gradient(160deg, #A77BD8 0%, #7A47B5 40%, #5B2D93 70%, #8A5CC6 100%);
  border: 2px solid var(--or);
  box-shadow: 0 0 0 2px var(--laque), 0 0 0 3px var(--or-fonce), inset 0 2px 0 rgba(255, 255, 255, .3), 0 6px 14px rgba(0, 0, 0, .55);
}
.stage .btn:disabled { filter: grayscale(.6); opacity: .5; }

/* Titre de propriété (achat et enchères) */
.stage .deed-mini {
  font-family: var(--serif); font-size: 1.1em; font-weight: 700;
  background: linear-gradient(180deg, #FFF8E6, #EADBB6);
  color: #2B1E0C;
  border: 1px solid var(--or);
  border-radius: 4px;
  box-shadow: 0 0 0 3px var(--laque), 0 0 0 4px var(--or-fonce), 0 4px 10px rgba(0, 0, 0, .5);
  padding: 6px 14px;
}

/* Enchères */
.auction-high { color: var(--or-clair); font-family: var(--serif); font-size: 1.45em; text-shadow: 0 0 12px rgba(243, 221, 164, .4); }
.auction small { color: var(--or); opacity: .9; }
.auction-bar { height: 5px; background: #1A171C; border: 1px solid var(--or-fonce); }
.auction-bar i { background: linear-gradient(90deg, var(--or-fonce), var(--or-clair)); }
.stage .bid-row input {
  background: #0E0C10; color: var(--or-clair); border: 1px solid var(--or); border-radius: 999px;
  text-align: center; font-family: var(--serif); font-weight: 700; font-size: 1em;
}
.stage .bid-row .btn.small { padding: 5px 14px; font-size: .95em; }

@media (max-width: 900px) {
  .stage {
    background: linear-gradient(180deg, #16141A, #070608);
    padding: 22px 14px 12px; gap: 8px;
    box-shadow: 0 0 0 3px var(--laque), 0 0 0 4px var(--or), inset 0 0 0 4px var(--laque), inset 0 0 0 5px rgba(217, 180, 106, .5), 0 -10px 30px rgba(0, 0, 0, .7);
    overflow: visible;
  }
  .stage-ribbon { top: -15px; font-size: 13px; padding: 4px 26px 5px; }
  .die { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
  .dice { padding: 5px 18px; }
  .stage::before, .stage::after { display: none; }
}

/* Pendant la lecture d'une carte, le panneau s'efface */
.stage { transition: opacity .3s ease, transform .3s ease; }
.stage.card-open { opacity: 0; transform: scale(.96); pointer-events: none; }

/* ═════════ Plateau : cases crème, centre bordeaux et or ═════════ */
:root { --board: #F1E8D2; --bordeaux: #6B1424; --bordeaux-fonce: #3E0A14; }
.board { border-color: #2A1A10; }
.cell { border-color: #3A2A1C; }
.cell:hover .inner { background: #FBF5E6; }
.center {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 220, 160, .10) 0 30%, transparent 62%),
    radial-gradient(130% 130% at 50% 50%, var(--bordeaux) 0%, var(--bordeaux-fonce) 100%);
  box-shadow: inset 0 0 0 2px #C9A45C, inset 0 0 40px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.center-logo { display: none; }
/* Grand cercle doré */
.center-ring {
  position: absolute; left: 50%; top: 50%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  border: calc(var(--u) * .07) solid #C9A45C;
  box-shadow: 0 0 0 calc(var(--u) * .05) var(--bordeaux-fonce), 0 0 0 calc(var(--u) * .08) #8C6A2E,
    inset 0 0 0 calc(var(--u) * .05) var(--bordeaux-fonce), inset 0 0 0 calc(var(--u) * .07) #8C6A2E,
    inset 0 0 calc(var(--u) * 1) rgba(0, 0, 0, .35);
  background: radial-gradient(circle, #7A1A2C 0%, #5A0F1D 70%);
}
/* Plaque dorée au nom du jeu */
.center-plaque {
  position: absolute; left: 50%; top: 9%; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 2px; pointer-events: none; z-index: 1;
  padding: calc(var(--u) * .12) calc(var(--u) * .5);
  background: linear-gradient(180deg, #5A0F1D, #3E0A14);
  border: 2px solid #D9B46A;
  box-shadow: 0 0 0 3px #3E0A14, 0 0 0 4px #8C6A2E, 0 8px 18px rgba(0, 0, 0, .45);
  white-space: nowrap;
}
.center-plaque strong {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; text-transform: uppercase;
  font-size: calc(var(--u) * .62); line-height: 1; letter-spacing: .04em;
  background: linear-gradient(180deg, #FFF3C8 0%, #E9C77A 40%, #A9792E 62%, #F1D695 82%, #B88A3A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #2A0710);
}
.center-plaque span {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; text-transform: uppercase;
  font-size: calc(var(--u) * .17); letter-spacing: .12em; color: #E9C77A;
}
/* Emplacements des cartes : cadre pointillé crème */
.pile { border-color: rgba(241, 232, 210, .55); }
.pile-chance { left: 9%; top: auto; bottom: 10%; transform: rotate(-12deg); }
.pile-community { right: 9%; bottom: 10%; transform: rotate(12deg); }
@media (max-width: 900px) { .center-plaque { top: 12%; } }

.owed { color: var(--danger); font-weight: 700; }