/* BLACKOUT — visuele stijl.
   Alles draait om licht: centrales die branden of zwart zijn, en zeven
   monteurs met een helmlamp. Buiten @layer gehouden zodat dit wint van de
   basislaag van het hostingplatform. */

:root{
  --bg:#05070c; --bg2:#0b1018; --line:#1c2433;
  --txt:#e2e8f5; --dim:#7b88a3;
  --lit:#fbbf24;        /* brandende centrale */
  --dead:#f43f5e;       /* zwarte centrale / sabotage */
  --ok:#34d399;         /* stem voor */
  --no:#f43f5e;         /* stem tegen */
  --accent:#38bdf8;     /* UI-accent */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);color-scheme:dark}
body{
  margin:0;background:
    radial-gradient(900px 520px at 50% -8%, #16203400 0%, #05070c 70%),
    var(--bg);
  color:var(--txt);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;
}
/* alleen op home en in de lobby is er ruimte onder nodig voor de chat-knop */
body:has(#screen-game.hidden){padding-bottom:calc(74px + env(safe-area-inset-bottom))}
#mn-root{max-width:560px;margin:0 auto;padding:14px}
.hidden{display:none !important}
h1,h2,h3{margin:0 0 8px}
small{color:var(--dim);font-weight:400}

/* ---------- home ---------- */
.logo{text-align:center;padding:30px 0 16px;position:relative}
.logo h1{
  font-size:44px;letter-spacing:7px;font-weight:800;margin:0;
  color:#64748b;
}
.logo h1 span{
  color:var(--lit);
  text-shadow:0 0 26px rgba(251,191,36,.55),0 0 60px rgba(251,191,36,.25);
  animation:flicker 6s infinite;
}
@keyframes flicker{
  0%,96%,100%{opacity:1}
  96.5%{opacity:.25}97%{opacity:1}97.6%{opacity:.4}98.2%{opacity:1}
}
.tag{color:var(--dim);font-size:13px;margin:10px 0 0}

.card{
  background:linear-gradient(180deg,rgba(18,24,37,.92),rgba(11,16,24,.92));
  border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px;
}
label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--dim);margin:6px 0}
input{
  width:100%;padding:14px;font-size:16px;border-radius:11px;
  background:#04060a;border:1px solid var(--line);color:var(--txt);
}
input:focus{outline:none;border-color:var(--lit)}
.code-input{text-transform:uppercase;letter-spacing:9px;text-align:center;font-size:26px;font-weight:700}

button{
  font-size:15px;font-weight:600;font-family:inherit;color:var(--txt);
  background:#18202e;border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;cursor:pointer;
}
button:active{transform:translateY(1px)}
button[disabled]{opacity:.4}
.big{width:100%;padding:15px;margin-top:10px;font-size:16px}
.primary{background:linear-gradient(180deg,#b4830d,#8a6208);border-color:var(--lit);color:#fff8e5}
.danger{background:linear-gradient(180deg,#be123c,#8f1032);border-color:var(--dead);color:#ffe9ee}
.good{background:linear-gradient(180deg,#059669,#046b50);border-color:var(--ok);color:#e7fff6}
.ghost{background:transparent;color:var(--dim)}
.small{padding:7px 10px;font-size:13px}
.wide{width:100%}
.row{display:flex;gap:8px;margin-top:8px}
.row>button{flex:1}
.divider{text-align:center;color:var(--dim);font-size:12px;margin:16px 0 4px;position:relative}
.divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.divider span{background:#121826;padding:0 12px;position:relative}
.error{color:var(--dead);font-size:13px;min-height:16px;margin:8px 0 0}
.hint{color:var(--dim);font-size:13px}
.rules summary{cursor:pointer;color:var(--lit);font-weight:600}
.rules-body p{color:var(--dim);font-size:13px}
.rules-body b{color:var(--txt)}

/* ---------- lobby ---------- */
.roomcode{display:flex;align-items:center;gap:10px;justify-content:center;margin:16px 0}
.roomcode span{color:var(--dim);font-size:12px;letter-spacing:2px}
.roomcode b{font-size:34px;letter-spacing:8px;color:var(--lit)}

/* ---------- lobby: de ploeglijst als raster ---------- */
.roster{
  list-style:none;margin:0 0 12px;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
}
.roster li{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 2px 6px;border:1px solid transparent;border-radius:13px;
  background:linear-gradient(180deg,rgba(20,27,41,.5),rgba(8,11,18,.5));
}
.roster li.off{opacity:.45;filter:grayscale(.7)}
.roster .fig{width:100%;max-width:56px;height:auto;display:block}
.roster .nm{
  font-size:11px;font-weight:700;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.roster .sub{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;min-height:11px}
.roster button.badge{
  position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;line-height:1;
  font-size:12px;border:1px solid var(--line);background:#0a0e16;color:var(--dim);cursor:pointer;
}

/* ---------- het speelveld ----------
   Het spelscherm is een kolom die precies de viewport vult: de strip bovenin
   en het actievak onderin zijn zo groot als hun inhoud, en het veld rekt mee
   met wat er over is. Zo blijft er op geen enkele telefoon een zwart gat onder
   en valt er ook nooit iets buiten beeld. */
#screen-game{
  display:flex;flex-direction:column;
  min-height:calc(100dvh - 28px);
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}
@supports not (height:100dvh){
  #screen-game{min-height:calc(100vh - 28px)}
}
.field{
  position:relative;flex:1 1 auto;min-height:200px;overflow:hidden;
  border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:#04060b;
}
.sky{
  position:absolute;inset:0;background-color:#04060b;
  background-position:center bottom;background-size:cover;background-repeat:no-repeat;
  image-rendering:pixelated;
}
.sky.on{background-image:url(/skyline-on.png?v=14)}
.sky.off{background-image:url(/skyline-off.png?v=14);opacity:0;transition:opacity 1.4s ease}
.floor{
  position:absolute;left:0;right:0;bottom:0;height:44%;
  background:
    linear-gradient(180deg,#04060b 0%,rgba(4,6,11,.25) 30%,rgba(4,6,11,.15) 100%),
    url(/substation.png?v=14) center 78%/cover no-repeat;
  image-rendering:pixelated;
}
.banner{
  position:absolute;top:6px;left:8px;right:8px;text-align:center;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  text-shadow:0 1px 3px #04060b;
}
.banner b{color:var(--lit)}

.crew{position:absolute;inset:0}
.slot{
  position:absolute;transform:translate(-50%,-100%);text-align:center;
  /* de poppetjes lopen naar hun nieuwe plek als de fase wisselt */
  transition:left .9s cubic-bezier(.35,.8,.3,1),top .9s cubic-bezier(.35,.8,.3,1),
             filter .25s,opacity .25s;
}
@media (prefers-reduced-motion:reduce){
  .slot{transition:filter .25s,opacity .25s}
  .slot.vy,.slot.vn{animation:none}
}
.slot .fig{width:100%;height:auto;display:block;margin:0 auto}
img.fig{image-rendering:pixelated;-webkit-user-drag:none;user-select:none}
img.fig.lampuit{filter:brightness(.55) grayscale(.4)}
.slot .nm{
  font-size:9.5px;font-weight:700;line-height:1.15;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 3px #04060b;
}
.slot .tag{
  display:block;font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);height:9px;line-height:9px;
}
.slot .tag.sab{color:var(--dead);font-weight:800}
.slot .tag.plg{color:var(--ok);font-weight:800}
.slot.off{opacity:.42;filter:grayscale(.6)}
.slot.away{filter:brightness(.45) saturate(.5)}
.slot.tapable{cursor:pointer}
/* het tikvlak is groter dan het poppetje zelf: dikke duimen op kleine schermen */
.slot.tapable::after{
  content:"";position:absolute;left:-12px;right:-12px;top:-16px;bottom:-6px;
}
.slot.spot::before{
  content:"";position:absolute;left:50%;top:-12px;width:170%;height:106%;
  transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 50% 0,rgba(251,191,36,.34),transparent 68%);
}
/* gekozen: subtiele ring onder de voeten in plaats van iets óp het poppetje */
.slot.chosen .fig{filter:drop-shadow(0 0 6px rgba(251,191,36,.55))}
.slot.chosen .nm{color:var(--lit) !important}

/* ---------- stemmen: het poppetje zelf vertelt het verhaal ----------
   Nog niet gestemd = gedimd. Gestemd = gewoon in het licht (géén gloed — de
   gloed is gereserveerd voor het team in de spotlight en voor de onthulling,
   anders is "gestemd" niet te onderscheiden van "zit in het team"). */
.slot.waitv .fig{filter:brightness(.42) saturate(.55)}
.slot.voted .fig{filter:none}
.slot.vy .fig{filter:drop-shadow(0 0 8px rgba(52,211,153,.95)) drop-shadow(0 0 18px rgba(52,211,153,.4))}
.slot.vn .fig{filter:drop-shadow(0 0 8px rgba(244,63,94,.95)) drop-shadow(0 0 18px rgba(244,63,94,.4))}
.slot.vy .nm{color:var(--ok) !important}
.slot.vn .nm{color:var(--no) !important}
.slot.vy,.slot.vn{animation:votepop .4s cubic-bezier(.2,1.5,.4,1)}
@keyframes votepop{50%{transform:translate(-50%,-104%) scale(1.06)}}

/* de werkpas die je aan het eind omhoog houdt */
.slot .pass{
  position:absolute;left:50%;top:-2px;transform:translateX(-50%);
  width:32px;height:42px;border-radius:5px;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-size:6.5px;letter-spacing:.08em;font-weight:800;
  animation:raise .5s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes raise{from{opacity:0;transform:translate(-50%,12px) scale(.8)}}
.slot .pass svg{width:16px;height:21px}
.slot .pass.plg{border:1px solid var(--ok);background:linear-gradient(165deg,#05301f,#031a11);color:var(--ok)}
.slot .pass.sab{border:1px solid var(--dead);background:linear-gradient(165deg,#3a0a1a,#1a050d);color:var(--dead)}

/* wat iemand zegt, boven zijn hoofd */
.slot .say{
  position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:3px;
  background:#141c2b;border:1px solid #2a3446;border-radius:8px;padding:3px 7px;
  font-size:10px;line-height:1.25;color:var(--txt);max-width:130px;width:max-content;
  z-index:3;animation:pop .25s ease-out;
}
.slot .say::after{
  content:"";position:absolute;left:50%;top:100%;margin-left:-4px;
  border:4px solid transparent;border-top-color:#2a3446;
}
@keyframes pop{from{transform:translateX(-50%) scale(.7);opacity:0}}

/* ---------- centrales ---------- */
.grid-strip{display:flex;gap:5px;margin:2px 0 9px}
.cen{
  flex:1;min-width:0;position:relative;border-radius:11px;border:1px solid var(--line);
  background:linear-gradient(180deg,#0c111b,#070a11);
  padding:7px 2px 5px;display:flex;flex-direction:column;align-items:center;gap:2px;
  overflow:hidden;
}
.cen .bulb{width:100%;max-width:27px;height:auto;display:block}
.cen .cl{font-size:8.5px;color:var(--dim);letter-spacing:.3px;text-align:center;line-height:1.2}
.cen .need{
  position:absolute;top:3px;right:5px;font-size:8px;color:var(--lit);
  border:1px solid var(--lit);border-radius:99px;padding:0 3px;
}
.cen.tap{cursor:pointer}
.cen.now{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 20px rgba(56,189,248,.22)}
.cen.now .cl{color:var(--accent)}
.cen.lit{border-color:var(--lit);background:linear-gradient(180deg,#2a1f06,#0b0a06)}
.cen.lit .cl{color:var(--lit)}
.cen.dark{border-color:var(--dead);background:linear-gradient(180deg,#2a0a15,#0a0509)}
.cen.dark .cl{color:var(--dead)}
.cen.lit::after{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:80%;
  background:radial-gradient(ellipse at 50% 30%,rgba(251,191,36,.30),transparent 70%);
  pointer-events:none;
}

/* schermbrede flits als een centrale valt */
.blackout{animation:boflash .7s ease-out}
@keyframes boflash{
  0%{filter:brightness(2.4) saturate(.2)}
  12%{filter:brightness(.15)}
  22%{filter:brightness(1.6)}
  35%{filter:brightness(.2)}
  60%{filter:brightness(1)}
  100%{filter:brightness(1)}
}

/* ---------- statusbalk ---------- */
.statusbar{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  margin-bottom:9px;font-size:11.5px;color:var(--dim);
  border:1px solid var(--line);border-radius:9px;padding:6px 10px;background:#080b12;
  font-variant-numeric:tabular-nums;
}
.statusbar b{color:var(--txt)}
.rejects{display:flex;gap:4px;align-items:center}
.rejects i{width:9px;height:9px;border-radius:50%;background:#1a2231;border:1px solid var(--line)}
.rejects i.on{background:var(--dead);border-color:var(--dead);box-shadow:0 0 7px rgba(244,63,94,.7)}

/* ---------- rolkaart ---------- */
/* ---------- stappenbalk ---------- */
.stepbar{
  display:flex;align-items:center;gap:8px;margin-bottom:9px;
  font-size:11px;color:var(--dim);letter-spacing:.06em;
}
.stepbar .steps{display:flex;align-items:center;gap:5px;flex:1;min-width:0}
.stepbar .stepnum{
  width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;border:1px solid var(--line);color:var(--dim);background:#0a0e16;
  flex:none;
}
.stepbar .stepnum.on{border-color:var(--lit);color:var(--lit);background:#171205}
.stepbar .stepnum.done{border-color:#2a3446;color:#3d4a63}
.stepbar .steplbl{
  font-weight:800;color:var(--txt);text-transform:uppercase;letter-spacing:.14em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;
}
.stepbar .rej{display:flex;gap:3px;align-items:center;flex:none}
.stepbar .rej i{width:6px;height:6px;border-radius:50%;background:#1a2231;border:1px solid var(--line)}
.stepbar .rej i.on{background:var(--dead);border-color:var(--dead)}
.fbtn{
  flex:none;padding:6px 9px;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  border-radius:8px;border:1px solid var(--line);background:#0b1018;color:var(--dim);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;
}
.fbtn.off{opacity:.5;text-decoration:line-through}

/* ---------- skin-keuze ---------- */
.skingrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.skcell{
  padding:5px 3px;background:#0d1220;border:1px solid var(--line);border-radius:10px;
  cursor:pointer;
}
.skcell img{width:100%;height:auto;display:block;image-rendering:pixelated;pointer-events:none}
.skcell.sel{border-color:var(--lit);box-shadow:0 0 0 1px var(--lit),0 0 12px rgba(251,191,36,.3)}
.skcell[disabled]{opacity:.3;cursor:default}
.roster li.mine{border-color:var(--lit);cursor:pointer}
.roster li.mine .sub{color:var(--lit)}

/* ---------- rol-overlay ---------- */
#roleveil{
  position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;
  background:rgba(3,5,9,.96);padding:24px;
}
#roleveil .rv-t{font-size:30px;font-weight:800;letter-spacing:.12em}
#roleveil.sab .rv-t{color:var(--dead)}
#roleveil.plg .rv-t{color:var(--ok)}
#roleveil .rv-s{color:var(--dim);font-size:14px;line-height:1.5;max-width:34ch}
#roleveil .rv-s b{color:var(--txt)}
#roleveil .rv-hint{color:#3d4a63;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:14px}

/* knop die pas afgaat als je hem vasthoudt */
.hold{position:relative;overflow:hidden;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hold .lbl,.hold .hint2{position:relative;z-index:2;display:block}
.hold .hint2{font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-top:3px;font-weight:600}
/* De balk schaalt in plaats van dat hij breder wordt: dat animeert op de
   grafische kaart en hoeft dus niet elke frame opnieuw te worden uitgerekend. */
.hold .fill{
  position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.28);
  transform:scaleX(0);transform-origin:left center;
}
.hold.done{animation:confirm .4s ease-out}
@keyframes confirm{50%{transform:scale(.97)}}

#rolecard{
  border-radius:14px;padding:10px 13px;margin-bottom:9px;font-size:13.5px;
  border:1px solid var(--line);background:#0a0e16;
  position:relative;overflow:hidden;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
#rolecard.locked{
  background:repeating-linear-gradient(45deg,#0a0e16,#0a0e16 9px,#0d1320 9px,#0d1320 18px);
}
#rolecard.locked b{color:var(--dim)}
#rolecard.hacker{border-color:var(--dead);background:linear-gradient(180deg,rgba(244,63,94,.15),rgba(10,14,22,.95))}
#rolecard.agent{border-color:var(--ok);background:linear-gradient(180deg,rgba(52,211,153,.13),rgba(10,14,22,.95))}
#rolecard b{font-size:16px}
#rolecard .mates{color:var(--dim);font-size:13px;margin-top:3px}
.lockrow{display:flex;align-items:center;gap:12px}
.lockicon{font-size:24px;opacity:.75;animation:peekhint 2.6s ease-in-out infinite}
@keyframes peekhint{0%,88%,100%{transform:scale(1)}94%{transform:scale(1.18)}}
.peekbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.07)}
.peekbar i{display:block;height:100%;width:100%;background:var(--accent)}
#rolecard.hacker .peekbar i{background:var(--dead)}
#rolecard.agent .peekbar i{background:var(--ok)}

/* ---------- fasepaneel ---------- */
#panel{
  border:1px solid var(--line);border-radius:15px;padding:12px 13px;margin-bottom:10px;
  background:linear-gradient(180deg,rgba(18,24,37,.94),rgba(11,16,24,.94));
}
#panel h2{font-size:16px;margin-bottom:6px}
#panel .sub{color:var(--dim);font-size:12.5px;margin:0 0 9px;line-height:1.45}
#panel .sub.wait{margin:2px 0;text-align:center}
#panel .big{padding:14px}
.bigresult{text-align:center;padding:6px 0}
.bigresult .t{font-size:26px;font-weight:800;letter-spacing:1.5px}
.bigresult .t.lit{color:var(--lit)} .bigresult .t.dark{color:var(--dead)}
.bigresult .t.ok{color:var(--ok)} .bigresult .t.no{color:var(--dead)}
.bigresult .s{color:var(--dim);font-size:13px;margin-top:5px}

/* ---------- stemhistorie ---------- */
#history{margin-bottom:12px}
.hrow{
  display:flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid var(--line);
  border-radius:10px;background:#080b12;margin-bottom:5px;font-size:12px;flex-wrap:wrap;
}
.hrow .hn{color:var(--dim);flex:none}
.hrow .hv{padding:2px 6px;border-radius:6px;border:1px solid var(--line);font-size:11px}
.hrow .hv.y{color:var(--ok);border-color:rgba(52,211,153,.45)}
.hrow .hv.n{color:var(--no);border-color:rgba(244,63,94,.45)}
.hrow .hv.team{text-decoration:underline;text-underline-offset:2px;font-weight:700}
.hrow .res{margin-left:auto;font-weight:700;flex:none}
.hrow .res.a{color:var(--ok)} .hrow .res.r{color:var(--dead)}

.log{font-size:12px;color:var(--dim)}
.log div{padding:2px 0;border-bottom:1px solid rgba(28,36,51,.55)}

/* ---------- centrale-detail ---------- */
#modal{position:fixed;inset:0;z-index:60;background:rgba(3,5,9,.76);display:flex;align-items:flex-end}
.sheet{
  width:100%;max-width:560px;margin:0 auto;background:#080b12;
  border-top:1px solid var(--lit);border-radius:18px 18px 0 0;
  max-height:88vh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom);
}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px;border-bottom:1px solid var(--line)}
.sheet-head b{font-size:17px;letter-spacing:1px}
#modal-body{overflow-y:auto;padding:14px 15px 18px}
.mres{text-align:center;font-size:20px;font-weight:800;letter-spacing:1.5px;margin-bottom:4px}
.mres.lit{color:var(--lit)} .mres.dark{color:var(--dead)} .mres.open{color:var(--accent)}
.msub{text-align:center;color:var(--dim);font-size:13px;margin-bottom:14px}
.mhead{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--dim);
  margin:16px 0 7px;border-top:1px solid var(--line);padding-top:12px}
.mhead:first-child{border-top:none;margin-top:0;padding-top:0}
.mteam{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:6px 10px;border-radius:9px;border:1px solid var(--line);font-size:13px;background:#0d1220}
.chip.on{border-color:var(--lit);color:var(--lit)}
.chip.hack{border-color:var(--dead);color:var(--dead)}
.chip.agent{border-color:var(--ok);color:var(--ok)}
.attempt{border:1px solid var(--line);border-radius:12px;padding:10px 11px;margin-bottom:8px;background:#070a10}
.attempt .ahead{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;flex-wrap:wrap}
.attempt .ahead .res{margin-left:auto;font-weight:700;font-size:12px}
.attempt .ahead .res.a{color:var(--ok)} .attempt .ahead .res.r{color:var(--dead)}
.vlist{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.vlist .v{display:flex;align-items:center;gap:6px;font-size:13px;padding:4px 7px;
  border-radius:8px;border:1px solid var(--line);background:#0b0f18}
.vlist .v.y{color:var(--ok);border-color:rgba(52,211,153,.4)}
.vlist .v.n{color:var(--no);border-color:rgba(244,63,94,.4)}
.vlist .v .nm2{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vlist .v .mk{font-size:10px;color:var(--lit);letter-spacing:.5px}

/* ---------- chat ---------- */
.chat-toggle{
  position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));
  width:52px;height:52px;border-radius:50%;font-size:22px;z-index:20;
  background:#18202e;border:1px solid var(--lit);
}
#chat-badge{
  position:absolute;top:-3px;right:-3px;background:var(--dead);color:#fff;
  border-radius:99px;font-size:10px;padding:1px 5px;
}
#chat-panel{
  position:fixed;left:0;right:0;bottom:0;z-index:30;background:#080b12;
  border-top:1px solid var(--line);max-width:560px;margin:0 auto;
  display:flex;flex-direction:column;height:min(62vh,460px);
  padding-bottom:env(safe-area-inset-bottom);
}
.chat-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line)}
#chat-tabs{display:flex;gap:6px;flex:1}
#chat-tabs button{padding:6px 11px;font-size:13px;border-radius:9px}
#chat-tabs button.on{border-color:var(--lit);color:var(--lit)}
#chat-tabs button.hk.on{border-color:var(--dead);color:var(--dead)}
#chat-msgs{flex:1;overflow-y:auto;padding:10px;font-size:14px}
#chat-msgs .m{margin-bottom:6px;word-break:break-word}
#chat-msgs .m b{color:var(--accent)}
#chat-msgs .m.hk b{color:var(--dead)}
#chat-form{display:flex;gap:8px;padding:9px 10px;border-top:1px solid var(--line)}
#chat-form input{flex:1}
#chat-form button{width:52px}

#toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:80px;z-index:50;
  background:#18202e;border:1px solid var(--lit);border-radius:11px;
  padding:10px 15px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;
  max-width:90vw;text-align:center;
}
#toast.show{opacity:1}

@media (max-width:340px){
  .crew{grid-template-columns:repeat(3,1fr)}
}