/* The Blood Nights — interface : bleu nuit, liserés bronze et or, police pixel. */
@font-face { font-family: "Pixelify Sans"; src: url("/assets/fonts/pixelify-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Pixelify Sans"; src: url("/assets/fonts/pixelify-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "VT323"; src: url("/assets/fonts/vt323-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: block; }
/* les chiffres (2 et 5 ambigus) et le signe € de Pixelify Sans sont peu lisibles : on les prend dans VT323 */
@font-face { font-family: "Pixelify Sans"; src: url("/assets/fonts/vt323-latin-400-normal.woff2") format("woff2"); font-weight: 400; unicode-range: U+0030-0039, U+20AC; size-adjust: 122%; font-display: block; }
@font-face { font-family: "Pixelify Sans"; src: url("/assets/fonts/vt323-latin-400-normal.woff2") format("woff2"); font-weight: 700; unicode-range: U+0030-0039, U+20AC; size-adjust: 122%; font-display: block; }

:root {
  --bg: #06080f; --panel: #0b101a; --panel2: #111927; --panel3: #1a2538;
  --line: #8c682b; --line-hi: #dcbe74; --line-lo: #3f2c13;
  --text: #e6d6ad; --dim: #8d8a80; --gold: #e7c757; --red: #cf3a36; --blood: #6f1217; --good: #7fb86a; --warn: #e0a23a; --magic: #b98cf0;
  --fs: clamp(13px, 1.55vh, 19px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: "Pixelify Sans", "VT323", monospace; font-size: var(--fs); line-height: 1.3; -webkit-font-smoothing: none; user-select: none; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
#world { position: fixed; left: 0; top: 0; z-index: 0; }
#overlay { position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none; image-rendering: auto; }
#hud { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#ui { position: fixed; inset: 0; z-index: 3; overflow: auto; }
#modal-root { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
#modal-root > * { pointer-events: auto; }
#offline { position: fixed; z-index: 9; top: 0; left: 0; right: 0; padding: .5em; text-align: center; background: var(--blood); color: #fff; }
[hidden] { display: none !important; }
.pic { display: inline-block; vertical-align: middle; flex: none; }
b { font-weight: 700; } small { font-size: .85em; } h3 { margin: .9em 0 .35em; color: var(--gold); font-size: 1em; font-weight: 700; border-bottom: 1px solid var(--line-lo); padding-bottom: .2em; }
p { margin: .4em 0 .6em; }
.dim { color: var(--dim); } .gold { color: var(--gold); } .red { color: var(--red); } .good { color: var(--good); } .warn { color: var(--warn); }
kbd { display: inline-block; min-width: 1.5em; padding: 0 .35em; margin-right: .4em; text-align: center; font-family: inherit; font-weight: 700; color: var(--panel); background: var(--line-hi); border-bottom: 2px solid var(--line); }

/* ---------- cadres ---------- */
.panel, .win, .card {
  color: var(--text);
  border: 2px solid var(--line);
  background:
    linear-gradient(var(--line-hi), var(--line-hi)) top left / 6px 6px no-repeat,
    linear-gradient(var(--line-hi), var(--line-hi)) top right / 6px 6px no-repeat,
    linear-gradient(var(--line-hi), var(--line-hi)) bottom left / 6px 6px no-repeat,
    linear-gradient(var(--line-hi), var(--line-hi)) bottom right / 6px 6px no-repeat,
    linear-gradient(180deg, var(--panel2), var(--panel) 40%);
  box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px var(--line-lo), 0 0 0 2px #000, 0 12px 40px rgba(0, 0, 0, .65);
}
.card { border-width: 1px; box-shadow: inset 0 0 0 1px var(--bg), 0 0 0 1px #000, 0 4px 14px rgba(0,0,0,.5); background: linear-gradient(180deg, rgba(17,25,39,.94), rgba(11,16,26,.94)); padding: .35em .6em; }
.veil { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(3, 4, 9, .62); padding: 1.2em; }
.win { position: relative; width: min(46em, 96vw); max-height: 92vh; display: flex; flex-direction: column; padding: 1em 1.2em 1.1em; }
.win.small { width: min(28em, 94vw); } .win.wide { width: min(60em, 97vw); }
.win-title { font-weight: 700; font-size: 1.25em; color: var(--gold); margin: 0 1.6em .5em 0; padding-bottom: .35em; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .4em; }
.win-body { overflow-y: auto; overflow-x: hidden; padding-right: .3em; scrollbar-color: var(--line) var(--panel); scrollbar-width: thin; }
.win-x { position: absolute; top: .55em; right: .7em; width: 1.7em; height: 1.7em; font: inherit; color: var(--line-hi); background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.win-x:hover { background: var(--blood); color: #fff; }

/* ---------- boutons & champs ---------- */
.btn { font: inherit; font-weight: 700; color: var(--text); padding: .42em 1em; cursor: pointer; background: linear-gradient(180deg, var(--panel3), var(--panel2)); border: 1px solid var(--line); box-shadow: inset 0 0 0 1px var(--bg), inset 0 2px 0 rgba(220, 190, 116, .12), 0 2px 0 #000; }
.btn:hover:not(:disabled) { border-color: var(--line-hi); color: #fff3cf; background: linear-gradient(180deg, #283850, var(--panel3)); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--bg); }
.btn:disabled, .btn.off { opacity: .45; cursor: default; filter: grayscale(.6); }
.btn.red { background: linear-gradient(180deg, #7a161b, #4a0b10); border-color: #b0563a; }
.btn.red:hover:not(:disabled) { background: linear-gradient(180deg, #98202a, #5e1016); }
.btn.big { font-size: 1.15em; padding: .55em 1.2em; border-color: var(--line-hi); }
.btn.small { padding: .2em .6em; font-size: .92em; }
.btn.on { border-color: var(--gold); color: var(--gold); background: var(--panel3); }
.in { font: inherit; color: var(--text); background: #05070d; border: 1px solid var(--line-lo); padding: .4em .6em; outline: none; min-width: 0; user-select: text; }
.in:focus { border-color: var(--line-hi); }
select.in { cursor: pointer; }
.row { display: flex; gap: .5em; align-items: center; flex-wrap: wrap; margin-top: .5em; } .row.end { justify-content: flex-end; margin-top: .9em; }
.col { display: flex; flex-direction: column; gap: .35em; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; }
.err { color: var(--red); min-height: 1.3em; }
.tabs { display: flex; gap: .3em; margin-bottom: .6em; } .tab { font: inherit; flex: 1; padding: .4em; color: var(--dim); background: var(--panel); border: 1px solid var(--line-lo); cursor: pointer; } .tab.on { color: var(--gold); border-color: var(--line); background: var(--panel3); }
.tag { display: inline-flex; align-items: center; gap: .25em; padding: 0 .4em; font-size: .85em; border: 1px solid var(--line-lo); background: #05070d; } .tag.bad { color: #ff8a80; border-color: var(--red); animation: pulse 1s infinite; } .tag.warn { color: var(--warn); } .tag.good { color: var(--good); }
@keyframes pulse { 50% { background: var(--blood); } }

/* ---------- menu ---------- */
.menu { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7em; padding: 1.5em; background: radial-gradient(ellipse at center, rgba(4,5,10,.25), rgba(4,5,10,.82)); }
.logo { filter: drop-shadow(0 6px 0 rgba(0,0,0,.5)); }
.logo-txt { font-size: 3em; color: var(--red); margin: 0; letter-spacing: .08em; text-shadow: 0 3px 0 #000; }
.tagline { color: var(--line-hi); letter-spacing: .25em; font-size: .95em; text-shadow: 0 2px 0 #000; margin-bottom: .4em; }
.menu-card { width: min(27em, 94vw); padding: 1.1em 1.2em; }
.ident { display: flex; gap: .8em; align-items: center; padding-bottom: .8em; margin-bottom: .8em; border-bottom: 1px solid var(--line-lo); } .ident .in { width: 100%; margin-top: .2em; }
.coins { color: var(--gold); }
.menu-btns { display: flex; flex-direction: column; gap: .5em; } .menu-btns .row { margin: 0; flex-wrap: nowrap; } .menu-btns .row > * { flex: 1; } .menu-btns .join .code { flex: 0 0 5.5em; text-align: center; letter-spacing: .25em; font-weight: 700; text-transform: uppercase; }
.foot { font-size: .85em; text-shadow: 0 1px 0 #000; }
.rules .jobs-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5em .9em; } .jl { display: flex; gap: .5em; align-items: flex-start; } .jl small { display: block; color: var(--dim); }

/* ---------- salon ---------- */
.lobby { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 1.5em; background: rgba(4,5,10,.6); }
.lobby-card { width: min(46em, 96vw); padding: 1.2em 1.4em; }
.lobby-head { display: flex; justify-content: space-between; align-items: center; gap: 1em; } .lobby-code { font-size: 2.6em; font-weight: 700; letter-spacing: .3em; color: var(--gold); line-height: 1; user-select: text; }
.lobby-count { margin: .7em 0 .4em; }
.lobby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2em, 1fr)); gap: .5em; margin-bottom: .6em; }
.lp { display: flex; flex-direction: column; align-items: center; gap: .15em; padding: .5em .3em; background: #070a12; border: 1px solid var(--line-lo); } .lp.me { border-color: var(--line-hi); } .lp-name { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-chat { height: 5.5em; overflow-y: auto; background: #05070d; border: 1px solid var(--line-lo); padding: .3em .5em; margin: .5em 0 .3em; user-select: text; } .lobby-card > .in { width: 100%; }

/* ---------- avatar / boutique ---------- */
.avatar { display: flex; gap: 1.4em; } .av-left { display: flex; flex-direction: column; align-items: center; gap: .5em; } .av-prev { width: 160px; height: 200px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 70%, #1a2538, #05070d); border: 1px solid var(--line-lo); }
.av-right { flex: 1; } .av-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .3em 0; border-bottom: 1px solid rgba(63,44,19,.5); } .av-row .row { margin: 0; }
.swatches { display: flex; gap: .3em; } .sw { width: 1.7em; height: 1.7em; border: 2px solid #000; cursor: pointer; padding: 0; } .sw.on { border-color: var(--gold); box-shadow: 0 0 0 1px #000; }
.stepper { display: flex; align-items: center; gap: .6em; }
.shop-head { margin-bottom: .4em; } .shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.4em, 1fr)); gap: .6em; }
.shop-item { display: flex; flex-direction: column; align-items: center; gap: .25em; padding: .5em .3em; text-align: center; background: #070a12; border: 1px solid var(--line-lo); } .shop-item.eq { border-color: var(--gold); } .shop-item .row { margin: 0; justify-content: center; }

/* ---------- HUD ---------- */
#hud > * { pointer-events: none; } #hud button, #hud input, #hud .dawn { pointer-events: auto; }
.hud-tl { position: absolute; left: .7em; top: .7em; display: flex; flex-direction: column; gap: .4em; align-items: flex-start; }
.hud-tr { position: absolute; right: .7em; top: .7em; display: flex; flex-direction: column; gap: .4em; align-items: flex-end; }
.clock, .role, .money-line { display: flex; align-items: center; gap: .55em; }
.clock-day { font-weight: 700; color: var(--gold); } .clock-sub { font-size: .85em; color: var(--dim); }
.role-job { font-weight: 700; } .role-role { font-size: .85em; } .role-role.assassin { color: var(--red); font-weight: 700; letter-spacing: .1em; } .role-role.citizen { color: var(--good); }
.money { text-align: right; } .money-line { justify-content: flex-end; font-size: 1.2em; color: var(--gold); } .money-line.broke b { color: var(--red); } .tags { display: flex; gap: .3em; flex-wrap: wrap; justify-content: flex-end; margin-top: .15em; }
.needs { font-size: .88em; } .needs:empty { display: none; } .need { display: flex; align-items: center; gap: .3em; white-space: nowrap; padding: .05em 0; } .need.red { color: #ff8a80; } .need.gold { color: var(--gold); }
.voice { display: flex; flex-direction: column; align-items: flex-end; gap: .15em; } .voice-line { background: rgba(8,11,20,.82); padding: 0 .45em; border-left: 2px solid var(--good); }
.toasts { position: absolute; top: .7em; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .3em; width: min(42em, 60vw); z-index: 8; pointer-events: none; }
#menu-toasts { position: fixed; }
.toast { padding: .3em .9em; background: rgba(8, 11, 20, .94); border: 1px solid var(--line); border-left-width: 4px; text-align: center; transition: opacity .5s; animation: pop .18s; }
.toast.out { opacity: 0; } .toast.good { border-color: var(--good); } .toast.bad { border-color: var(--red); color: #ffb3aa; } .toast.warn { border-color: var(--warn); } .toast.night { border-color: #5d82b5; color: #b9cdea; } .toast.magic { border-color: var(--magic); color: #dcc6f7; }
@keyframes pop { from { transform: translateY(-6px); opacity: 0; } }
.banner { position: absolute; top: 16%; left: 50%; transform: translateX(-50%); width: min(40em, 86vw); padding: .7em 1.2em; text-align: center; background: rgba(8,11,20,.95); border-top: 2px solid var(--line-hi); border-bottom: 2px solid var(--line-hi); animation: pop .3s; }
.banner.bad { border-color: var(--red); } .banner-title { font-size: 1.5em; font-weight: 700; color: var(--gold); } .banner.bad .banner-title { color: #ff6b5e; }
.hud-bc { position: absolute; bottom: .7em; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .45em; }
.actions { display: flex; flex-direction: column; align-items: center; gap: .25em; }
.action { font: inherit; color: var(--text); padding: .25em .8em .25em .35em; background: rgba(8,11,20,.9); border: 1px solid var(--line); cursor: pointer; } .action:hover { border-color: var(--line-hi); } .action.danger { border-color: var(--red); color: #ffb3aa; } .action.danger kbd { background: var(--red); color: #fff; border-color: var(--blood); }
.inv { display: flex; gap: .25em; flex-wrap: wrap; justify-content: center; max-width: 70vw; }
.slot { position: relative; width: 3.1em; height: 3.1em; display: flex; align-items: center; justify-content: center; padding: 0; font: inherit; color: var(--text); background: rgba(5,7,13,.9); border: 1px solid var(--line-lo); box-shadow: inset 0 0 0 1px #000; cursor: default; } .slot.food { cursor: pointer; } .slot.food:hover { border-color: var(--good); }
.qty { position: absolute; right: 2px; bottom: 0; font-size: .8em; font-weight: 700; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; }
.hud-bl { position: absolute; left: .7em; bottom: .7em; width: min(26em, 32vw); } .chat-log { display: flex; flex-direction: column; justify-content: flex-end; }
.chat-line { background: rgba(8,11,20,.72); padding: 0 .4em; margin-top: 1px; transition: opacity 1.5s; word-break: break-word; } .chat-line.old { opacity: .25; } .chat-line.ghost { color: #8fb0c2; font-style: italic; } .chat-line b { color: var(--gold); }
.chat-in { width: 100%; font: inherit; color: var(--text); background: rgba(5,7,13,.95); border: 1px solid var(--line-hi); padding: .3em .5em; margin-top: .25em; outline: none; user-select: text; }
.hud-br { position: absolute; right: .7em; bottom: .7em; display: flex; gap: .3em; }
.hbtn { width: 2.9em; height: 2.9em; display: flex; align-items: center; justify-content: center; padding: 0; background: rgba(11,16,26,.92); border: 1px solid var(--line); cursor: pointer; } .hbtn:hover { border-color: var(--line-hi); background: var(--panel3); }
.sleep { position: absolute; inset: 0; background: rgba(2,3,8,.965); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; pointer-events: none; } .sleep-z { font-size: 3em; color: #5d82b5; animation: zz 2.4s infinite; } @keyframes zz { 50% { transform: translateY(-10px); opacity: .5; } } .sleep-t { color: var(--gold); } .sleep-h { color: var(--dim); }
.ghost-banner { position: absolute; top: 5.4em; left: 50%; transform: translateX(-50%); background: rgba(20,35,50,.9); border: 1px solid #5f7f96; color: #c2dce6; padding: .2em .8em; display: flex; align-items: center; gap: .4em; }
.dawn { position: absolute; top: 5.5em; left: 50%; transform: translateX(-50%); width: min(30em, 80vw); padding: .6em .9em; background: rgba(8,11,20,.96); border: 1px solid var(--line); cursor: pointer; animation: pop .3s; } .dawn-title { color: var(--gold); font-weight: 700; margin-bottom: .3em; display: flex; align-items: center; gap: .4em; } .dawn-line { display: flex; justify-content: space-between; gap: 1em; border-top: 1px solid rgba(63,44,19,.5); padding: .1em 0; }

.mini-wrap { margin-top: .35em; line-height: 0; width: fit-content; border: 1px solid var(--line); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000; background: #000; opacity: .92; } .mini { width: 172px; height: 149px; }
.win.map { width: auto; max-width: 98vw; } .bigmap { display: block; border: 1px solid var(--line-lo); margin-bottom: .4em; }

/* ---------- panneaux de jeu ---------- */
.irow { display: flex; align-items: center; gap: .6em; padding: .3em 0; border-bottom: 1px solid rgba(63,44,19,.5); } .iname { flex: 1; min-width: 0; } .iname small { display: block; color: var(--dim); } .icol { white-space: nowrap; } .ibtns { display: flex; gap: .25em; }
.ledger { margin-top: .6em; max-height: 11em; overflow-y: auto; } .led { padding: .05em 0; font-size: .92em; } .led.nbr b { color: var(--warn); }
.recipe { display: flex; align-items: center; gap: .8em; padding: .5em; margin-bottom: .4em; background: #070a12; border: 1px solid var(--line-lo); } .rinfo { flex: 1; } .rinfo small { display: block; color: var(--dim); }
.ings { display: flex; gap: .5em; flex-wrap: wrap; margin-top: .2em; } .ing { display: inline-flex; align-items: center; gap: .25em; padding: 0 .4em; background: #05070d; border: 1px solid var(--line-lo); } .ing.miss { color: #ff8a80; border-color: var(--blood); }
.plots { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35em; margin: .5em 0; } .plot { height: 4.6em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; background: #2a1d15; border: 1px solid #4c3725; } .plot.wet { background: #1f1610; } .plot.st3 { border-color: var(--gold); } .plot small { color: #cfbb85; }
.prow { display: flex; align-items: center; gap: .7em; padding: .25em .2em; border-bottom: 1px solid rgba(63,44,19,.5); } .prow.dead { opacity: .62; } .prow.assassin { background: rgba(111,18,23,.35); } .pname { flex: 1.3; min-width: 0; } .pjob { flex: 1; display: flex; align-items: center; gap: .3em; } .pstat { flex: .9; text-align: right; }
.jline { padding: .15em 0; border-bottom: 1px solid rgba(63,44,19,.4); user-select: text; }
.opt { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .3em 0; } .opt input { flex: 0 0 55%; accent-color: var(--line-hi); }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: .25em 1em; } .key { display: flex; align-items: center; }

/* ---------- mini-jeux ---------- */
.mgwin { width: auto; max-width: 98vw; } .mg-host { overflow: visible; }
.mg-canvas-wrap { line-height: 0; border: 2px solid var(--line-lo); box-shadow: 0 0 0 1px #000; background: #000; } .mg-canvas { display: block; cursor: crosshair; touch-action: none; }
.mg-bar { height: .5em; margin-top: .45em; background: #05070d; border: 1px solid var(--line-lo); } .mg-bar-fill { height: 100%; width: 0; background: linear-gradient(180deg, var(--gold), var(--line)); transition: width .2s; }
.mg-foot { display: flex; align-items: center; gap: .6em; margin-top: .45em; } .mg-hint { flex: 1; text-align: center; color: var(--text); min-height: 1.4em; }

/* ---------- révélation, mort, réunion, fin ---------- */
.reveal { align-items: center; text-align: center; width: min(32em, 94vw); cursor: pointer; } .reveal-pre { color: var(--dim); margin-top: .4em; } .reveal-role { font-size: 2.6em; font-weight: 700; letter-spacing: .12em; color: var(--good); text-shadow: 0 3px 0 #000; }
.reveal.assassin .reveal-role { color: var(--red); } .reveal.assassin { border-color: var(--red); }
.reveal-job { display: flex; gap: .8em; align-items: center; text-align: left; padding: .6em .8em; margin: .5em 0; background: #070a12; border: 1px solid var(--line-lo); } .reveal-job small { display: block; color: var(--dim); }
.intro { background: rgba(3,4,9,.9); }
.death { background: radial-gradient(circle, rgba(60,6,10,.82), rgba(3,4,9,.95)); pointer-events: none !important; animation: pop .4s; } .death-box { text-align: center; max-width: 30em; } .death-title { font-size: 2.8em; font-weight: 700; color: var(--red); letter-spacing: .1em; text-shadow: 0 3px 0 #000; }
.meet { position: fixed; left: 50%; bottom: 1em; transform: translateX(-50%); width: min(62em, 97vw); max-height: 62vh; overflow-y: auto; padding: .8em 1.1em; border: 2px solid var(--line); background: linear-gradient(180deg, rgba(17,25,39,.97), rgba(8,11,20,.97)); box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px var(--line-lo), 0 0 0 2px #000, 0 -8px 40px rgba(0,0,0,.6); }
.meet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; border-bottom: 1px solid var(--line); padding-bottom: .3em; } .meet-title { font-size: 1.3em; font-weight: 700; color: var(--gold); } .meet-timer { color: var(--gold); }
.meet-info { margin: .4em 0; font-size: .95em; } .meet-info > div { display: flex; align-items: center; gap: .3em; }
.meet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2em, 1fr)); gap: .45em; }
.vcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1em; padding: .45em .3em; text-align: center; background: #070a12; border: 1px solid var(--line-lo); } .vcard.can { cursor: pointer; } .vcard.can:hover { border-color: var(--red); background: #1a0d12; } .vcard.chosen { border-color: var(--red); background: rgba(111,18,23,.45); }
.vname { font-weight: 700; display: flex; align-items: center; gap: .25em; } .vjob { font-size: .8em; color: var(--dim); } .vstate { font-size: .82em; color: var(--good); min-height: 1.2em; display: flex; align-items: center; gap: .2em; } .vvotes { font-size: .8em; color: #ffb3aa; min-height: 1.2em; } .vcount { position: absolute; top: .2em; right: .35em; font-weight: 700; font-size: 1.3em; color: var(--red); }
.meet-foot { margin-top: .5em; } .meet-foot .row { margin: 0; } .verdict { font-size: 1.25em; font-weight: 700; color: var(--gold); text-align: center; margin-top: .3em; }
.endwin { width: min(54em, 97vw); } .end-title { font-size: 2.2em; font-weight: 700; text-align: center; color: var(--good); text-shadow: 0 3px 0 #000; } .endwin.assassin .end-title { color: var(--red); } .end-sub { text-align: center; color: var(--dim); margin-bottom: .6em; } .end-list { overflow-y: auto; max-height: 46vh; } .end-coins { margin-top: .6em; color: var(--gold); display: flex; align-items: center; gap: .3em; flex-wrap: wrap; } .end-coins small { color: var(--dim); }

@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } .avatar { flex-direction: column; align-items: center; } .rules .jobs-list, .keys { grid-template-columns: 1fr; } .hud-bl { width: 46vw; } }