/* ============================================================
   ПАНДЕМИЯ — оформление
   ============================================================ */

:root{
  --paper:      #f3eee2;
  --paper-2:    #faf6ec;
  --card:       #fffdf7;
  --ink:        #23262c;
  --ink-soft:   #5c5a52;
  --muted:      #8b8576;
  --line:       #e2dac7;
  --line-soft:  #eee7d8;
  --teal:       #0f766e;
  --teal-dark:  #0b5c55;
  --p1:         #0f766e;
  --p2:         #7c3aed;
  --blue:       #2f6fed;
  --yellow:     #d9a406;
  --black:      #2b303a;
  --red:        #d64545;
  --bad:        #c0392b;
  --shadow:     0 10px 30px rgba(60,48,25,.10), 0 2px 6px rgba(60,48,25,.06);
  --shadow-sm:  0 2px 6px rgba(60,48,25,.08);
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 12% -10%, #fdfaf2 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #f0f6f2 0%, transparent 55%),
    var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

#app{ height:100vh; display:flex; flex-direction:column; }

/* ---------------- top bar ---------------- */

.topbar{
  flex:0 0 auto;
  height:68px;
  display:flex;
  align-items:center;
  gap:24px;
  padding:0 20px;
  background:rgba(255,253,247,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  z-index:20;
}

.brand{ display:flex; align-items:center; gap:12px; min-width:250px; }

.logo{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(150deg, #0f766e, #14958a);
  color:#fff; font-size:21px; font-weight:800;
  box-shadow:0 6px 16px rgba(15,118,110,.35);
}

.brandtext h1{
  margin:0; font-size:17px; letter-spacing:.22em; font-weight:800;
}
.brandtext p{
  margin:2px 0 0; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}

.stats{ display:flex; align-items:center; gap:10px; flex:1; flex-wrap:wrap; }

.stat{
  display:flex; align-items:baseline; gap:6px;
  padding:7px 12px; border-radius:10px;
  background:#fffdf7; border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  font-size:12px; color:var(--ink-soft);
  white-space:nowrap;
}
.stat b{ font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; }
.stat.warn{ border-color:#e8b4ac; background:#fdf1ef; }
.stat.warn b{ color:var(--bad); }
.stat .lbl{ text-transform:uppercase; letter-spacing:.06em; font-size:10px; color:var(--muted); }

.cubechips{ display:flex; gap:6px; }
.cubechip{
  display:flex; align-items:center; gap:5px;
  padding:5px 9px; border-radius:9px; background:#fffdf7;
  border:1px solid var(--line); font-size:12px;
  font-variant-numeric:tabular-nums; color:var(--ink-soft);
  box-shadow:var(--shadow-sm);
}
.cubechip i{
  width:9px; height:9px; border-radius:2px; display:block;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.25);
}
.cubechip.low b{ color:var(--bad); }

.topbtns{ display:flex; gap:8px; }

.ghost{
  font:inherit; font-size:12.5px;
  padding:9px 14px; border-radius:10px;
  background:#fffdf7; border:1px solid var(--line);
  color:var(--ink-soft); cursor:pointer;
  transition:.16s;
  box-shadow:var(--shadow-sm);
}
.ghost:hover{ background:#f6f0e3; color:var(--ink); transform:translateY(-1px); }
.ghost:active{ transform:translateY(0); }

/* ---------------- layout ---------------- */

.layout{
  flex:1; min-height:0;
  display:grid; grid-template-columns:minmax(0,1fr) 372px;
  gap:10px; padding:10px 12px 12px;
}

.board-col{
  display:flex; flex-direction:column; gap:12px;
  min-width:0; min-height:0;
}
.board-col .board-wrap{ flex:1 1 auto; min-height:0; }

/* игроки переехали в правую колонку — карта занимает всё поле */
.players-block{
  flex:0 0 auto;
  display:flex; flex-direction:column;
  padding:10px 12px 12px;
}
.players-block .players{ grid-template-columns:1fr; overflow:visible; }

/* ---------------- board ---------------- */

.board-wrap{
  position:relative; min-width:0;
  border-radius:16px;
  background:#e6f0f1;
  border:1px solid var(--line);
  box-shadow:var(--shadow), inset 0 1px 0 #fff;
  overflow:hidden;
  display:flex;
}

.world path{
  fill:#fbf4e3;
  stroke:#cdba91;
  stroke-width:1.15;
  stroke-linejoin:round;
  stroke-linecap:round;
}

#board{ width:100%; height:100%; display:block; position:relative; z-index:1; }

.map-hint{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  z-index:6;
  padding:9px 16px; border-radius:999px;
  background:rgba(35,38,44,.9); color:#fff;
  font-size:12.5px; letter-spacing:.01em;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  animation:drop .2s ease-out;
  pointer-events:none;
}
.map-hint b{ color:#7fe3d6; }

@keyframes drop{ from{ opacity:0; transform:translate(-50%,-8px);} to{opacity:1; transform:translate(-50%,0);} }

.legend{
  position:absolute; left:14px; top:100px; z-index:5;
  pointer-events:none;
  display:flex; flex-direction:column; gap:5px;
  padding:10px 12px; border-radius:12px;
  background:rgba(255,253,247,.9);
  border:1px solid var(--line);
  backdrop-filter:blur(6px);
  box-shadow:var(--shadow-sm);
}
.legend .row{ display:flex; align-items:center; gap:7px; font-size:10.5px; color:var(--ink-soft); }
.legend .sw{ width:9px; height:9px; border-radius:3px; }
.legend .sw.line{
  width:14px; height:0; border-radius:0; background:none;
  border-top:2px dotted #a4926b;
}

.city-card{
  position:absolute; left:14px; bottom:14px; z-index:6;
  width:250px; padding:0; overflow:hidden;
  border-radius:14px; background:rgba(255,253,247,.97);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
  animation:drop .16s ease-out;
}
.city-art{ position:relative; height:64px; }
.city-art svg{ width:100%; height:100%; display:block; }
.city-art img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:50% 72%;
}
.city-art .close{
  position:absolute; top:6px; right:6px;
  width:21px; height:21px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,253,247,.9); border:1px solid rgba(0,0,0,.06);
  color:#6b6558; font-size:14px; line-height:1; cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.city-art .close:hover{ background:#fff; color:#23262c; }
.city-body{ padding:11px 14px 13px; }
.city-card h4{ margin:0 0 2px; font-size:15px; letter-spacing:.01em; }
.city-card .region{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.city-card .rowline{
  display:flex; justify-content:space-between; gap:10px;
  font-size:12px; color:var(--ink-soft); margin-top:9px;
  padding-top:8px; border-top:1px dashed var(--line);
}
.city-card .rowline b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.city-card .rowline.col{ padding-bottom:2px; border-bottom:none; }
.city-card .nbs{ display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.city-card .nb{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; color:var(--ink-soft);
  background:#f7f2e6; border-radius:6px; padding:2px 6px;
}
.city-card .nb i{ width:6px; height:6px; border-radius:2px; }
.city-card .rowline:first-of-type{ margin-top:8px; }

/* ---------------- SVG map elements ---------------- */

.route{
  stroke:#ded4bd; stroke-width:2.4; stroke-linecap:round;
  transition:stroke .18s, stroke-width .18s;
}
.route.hot{ stroke:#b9ac8c; stroke-width:3.4; }

.route.long{
  stroke:#b3a382; stroke-width:2.1;
  stroke-dasharray:1.5 5; stroke-linecap:round;
}
.plane{ fill:#a4926b; opacity:.9; }

.city{ cursor:pointer; }
.city .hit{ fill:transparent; }

.city .token{
  transform-box:fill-box; transform-origin:center;
  filter:drop-shadow(0 1px 2px rgba(70,55,25,.28));
  transition:transform .15s;
}
.city:hover .token{ transform:scale(1.08); }

.city .badge-bg{
  fill:#fffdf7; stroke-width:1.6;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));
}
.city .badge-t{
  font-size:8.6px; font-weight:800; text-anchor:middle;
  font-variant-numeric:tabular-nums;
}

.city .tgt-ring{
  display:none; fill:none; stroke:#ffffff; stroke-width:3.2;
  stroke-dasharray:5 5; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 1.6px rgba(0,0,0,.85)) drop-shadow(0 0 4px rgba(0,0,0,.45));
}
.city.target .tgt-ring{
  display:block;
  animation:targetPulse 1.25s infinite ease-in-out, dashSpin 4s linear infinite;
}

/* вспышка: белое кольцо — куб поставлен, красное — вспышка болезни */
.city .flash{
  display:none; fill:none; stroke:#fff; stroke-width:3;
  transform-box:fill-box; transform-origin:center;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.55));
}
.city.bump .flash{ display:block; animation:flashPulse .7s ease-out; }
.city.boom .flash{
  display:block; stroke:#ff5347; stroke-width:4; fill:rgba(255,72,60,.22);
  animation:flashBoom 1.15s ease-out 2;
}

@keyframes flashPulse{
  0%{ opacity:.95; transform:scale(.5); stroke-width:5; }
  100%{ opacity:0; transform:scale(1.55); stroke-width:1; }
}
@keyframes flashBoom{
  0%{ opacity:1; transform:scale(.45); stroke-width:8; }
  55%{ opacity:.95; transform:scale(1.35); stroke-width:5; }
  100%{ opacity:0; transform:scale(2.1); stroke-width:1; }
}
@keyframes dashSpin{ to{ stroke-dashoffset:-40; } }

.city .cnt{
  font-size:10.5px; font-weight:800; fill:#fff;
  text-anchor:middle; pointer-events:none;
  font-variant-numeric:tabular-nums;
}

.city .label{
  font-size:9.5px; fill:#4a473f; pointer-events:none;
  paint-order:stroke; stroke:#fffdf7; stroke-width:3px; stroke-linejoin:round;
  letter-spacing:.01em;
}
.city.sel .label{ fill:#111; font-weight:700; }

.city .halo{
  fill:none; stroke:#0f766e; stroke-width:1.8; opacity:0;
  transition:opacity .15s;
}
.city.sel .halo{ opacity:1; }
.city:hover .halo{ opacity:.45; }
.city{ cursor:pointer; }
@keyframes targetPulse{
  0%,100%{ stroke-width:3; opacity:.9; }
  50%{ stroke-width:4.6; opacity:1; }
}
.city.target .label{ fill:#0b5c55; font-weight:700; }

.city.here .node{ stroke-width:4; }

.city .st-ring{
  display:none; fill:none; stroke:#0f766e; stroke-width:1.8;
  stroke-dasharray:3 3; opacity:.75;
}
.city.has-station .st-ring{ display:block; }

.city .station{ display:none; }
.city.has-station .station{ display:block; animation:popIn .22s ease-out; }
@keyframes popIn{ from{ transform:scale(.4); opacity:0;} to{ transform:scale(1); opacity:1;} }

.city.bump .token{ animation:bump .4s ease-out; }
@keyframes bump{ 0%{ transform:scale(1);} 40%{ transform:scale(1.22);} 100%{ transform:scale(1);} }

/* кубики в городе подпрыгивают, когда туда приходит зараза или вспышка */
.cubes{ transform-box:fill-box; transform-origin:center; }
.cubes.bump .cube{ animation:cubeHop .45s cubic-bezier(.3,1.6,.5,1); }
.cubes.boom .cube{ animation:cubeHop .5s cubic-bezier(.3,1.7,.5,1), cubeRed 1.1s ease-out 2; }
@keyframes cubeHop{
  0%{ transform:translateY(0) scale(1); }
  45%{ transform:translateY(-9px) scale(1.18); }
  100%{ transform:translateY(0) scale(1); }
}
@keyframes cubeRed{ 0%{ filter:drop-shadow(0 0 5px #ff3b30) brightness(1.4); } 100%{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); } }

.city.boom .token{ animation:boom .7s ease-out; }
@keyframes boom{
  0%{ filter:drop-shadow(0 0 6px #d64545) brightness(1.25); }
  100%{ filter:drop-shadow(0 1px 2px rgba(70,55,25,.28)); }
}

.pawn{ pointer-events:none; }
.pawn .pin{ transform-box:fill-box; transform-origin:center; }
.pawn.active .pin{ animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2.6px); } }
.pawn circle{ stroke:#fffdf7; stroke-width:2.2; filter:drop-shadow(0 2px 3px rgba(0,0,0,.22)); }
.pawn text{ font-size:9px; font-weight:800; fill:#fff; text-anchor:middle; pointer-events:none; }

/* ---------------- sidebar ---------------- */

.side{
  display:flex; flex-direction:column; gap:11px;
  min-height:0; overflow-y:auto; padding-right:3px;
  scrollbar-width:thin;
}
.side > *{ flex:0 0 auto; }
.side > .logblock{ flex:1 1 auto; min-height:120px; }
.side .log{ flex:1; max-height:none; }
.side::-webkit-scrollbar{ width:7px; }
.side::-webkit-scrollbar-thumb{ background:#d9d0bc; border-radius:4px; }

#turnCard{
  border-radius:16px; padding:14px 15px;
  background:linear-gradient(135deg, #ffffff 0%, #f7f2e6 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  display:flex; align-items:center; gap:12px;
  position:relative; overflow:hidden;
}
#turnCard::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:var(--pc, #0f766e);
}
#turnCard .avatar{
  width:40px; height:40px; border-radius:12px; flex:0 0 auto;
  display:grid; place-items:center; position:relative; overflow:hidden;
  background:var(--pc,#0f766e); color:#fff; font-weight:800; font-size:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.16);
}
#turnCard .avatar img,
.pcard .av img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:2;
}
#turnCard .avatar b, .pcard .av b{ position:relative; z-index:1; font:inherit; }
#turnCard .who{ flex:1; min-width:0; }
#turnCard .nm{ font-size:14.5px; font-weight:700; }
#turnCard .prole{ font-size:11.5px; color:var(--muted); margin-top:1px; }
#turnCard .cityline{ font-size:11.5px; color:var(--ink-soft); margin-top:3px; }
#turnCard .cityline b{ color:var(--ink); }
#turnCard .dots{ display:flex; gap:4px; }
#turnCard .dots i{
  width:9px; height:9px; border-radius:50%;
  background:var(--pc,#0f766e);
  transition:.2s;
}
#turnCard .dots i.off{ background:#e3dbc9; }

.block{
  border-radius:16px; padding:12px 13px 13px;
  background:var(--card); border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.block-h{
  display:flex; align-items:center; justify-content:space-between;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px; font-weight:700;
}
.block-h .pill{
  font-size:11px; letter-spacing:.02em; color:var(--teal);
  background:#e7f2f0; border-radius:999px; padding:2px 8px; font-weight:700;
}
.block-h .mini{ font-size:10px; letter-spacing:.03em; color:#b3aa96; text-transform:none; }

.actions{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }

.act{
  display:flex; align-items:center; gap:9px;
  padding:9px 10px; border-radius:11px;
  background:#fffefb; border:1px solid var(--line);
  cursor:pointer; text-align:left; font:inherit;
  transition:.14s; color:var(--ink);
  min-height:50px;
}
.act:hover:not(:disabled){ background:#f7f2e6; border-color:#d5c9ae; transform:translateY(-1px); }
.act:disabled{ opacity:.38; cursor:not-allowed; }
.act.active{ background:#e7f2f0; border-color:#8fc9c1; box-shadow:0 0 0 2px rgba(15,118,110,.12) inset; }
.act .ic{ font-size:16px; line-height:1; width:20px; text-align:center; flex:0 0 auto; }
.act .tx{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.act .tx b{ font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act .tx i{ font-size:9.5px; font-style:normal; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.endturn{
  width:100%; margin-top:9px; padding:11px;
  border:none; border-radius:11px; cursor:pointer;
  background:linear-gradient(180deg,#128579,#0d6b62);
  color:#fff; font:inherit; font-size:13px; font-weight:700; letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(15,118,110,.28);
  transition:.15s;
}
.endturn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 9px 20px rgba(15,118,110,.34); }
.endturn:disabled{ background:#ded6c4; color:#a49c8a; box-shadow:none; cursor:not-allowed; }
.endturn.ready{ animation:pulseBtn 1.8s ease-in-out infinite; }
@keyframes pulseBtn{
  0%,100%{ box-shadow:0 6px 16px rgba(15,118,110,.28); }
  50%{ box-shadow:0 6px 22px rgba(15,118,110,.55); }
}

/* cures */

.cures{ display:flex; flex-direction:column; gap:6px; }

.cure{
  display:flex; align-items:center; gap:8px;
  padding:7px 9px; border-radius:10px;
  background:#fffefb; border:1px solid var(--line-soft);
}
.cure .dot{ width:11px; height:11px; border-radius:3px; flex:0 0 auto; box-shadow:inset 0 -1px 0 rgba(0,0,0,.22); }
.cure .nm{ font-size:12px; flex:1; }
.cure .cnt{ font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.cure .cnt b{ color:var(--ink); }
.cure button{
  font:inherit; font-size:10.5px; font-weight:700;
  padding:4px 9px; border-radius:8px; cursor:pointer;
  border:1px solid #cfe4e1; background:#eef7f5; color:var(--teal-dark);
  transition:.14s;
}
.cure button:hover:not(:disabled){ background:#dff0ed; }
.cure button:disabled{ opacity:.35; cursor:not-allowed; }
.cure.done{ background:#f2faf8; border-color:#cfe7e2; }
.cure.done .nm{ color:var(--teal-dark); font-weight:700; }
.cure.erad{ background:#eaf6f2; border-color:#a9d9cf; }
.cure .tag{
  font-size:9.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--teal-dark);
  background:#d8efe9; padding:2px 7px; border-radius:999px;
}

/* players */

.players{
  display:grid; grid-template-columns:repeat(var(--n,2), minmax(0,1fr));
  gap:9px; flex:1; min-height:0; overflow-y:auto; align-content:start;
}
.players .pcard{ min-width:0; }

.pcard{
  border-radius:12px; padding:9px 10px;
  border:1px solid var(--line-soft); background:#fffefb;
}
.pcard.turn{ border-color:#b7dcd6; background:#f6fbfa; }
.pcard .head{ display:flex; align-items:center; gap:8px; }
.pcard .av{
  width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  color:#fff; font-size:10.5px; font-weight:800; flex:0 0 auto;
  position:relative; overflow:hidden;
}
.pcard .meta{ flex:1; min-width:0; }
.pcard .meta b{ font-size:12px; }
.pcard .meta span{
  font-size:10.5px; color:var(--muted); margin-left:5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pcard .meta{ display:flex; align-items:baseline; min-width:0; overflow:hidden; }
.pcard .where{ font-size:10.5px; color:var(--ink-soft); }
.pcard .where b{ color:var(--ink); }

.hand{ display:flex; flex-wrap:wrap; gap:3px; margin-top:6px; }

.chip{
  font:inherit; width:61px; height:52px; padding:0;
  display:flex; flex-direction:column; align-items:stretch;
  border-radius:8px; overflow:hidden;
  background:#fffdf7; border:1px solid var(--line);
  color:var(--ink-soft); cursor:default; text-align:center;
  transition:.13s;
  box-shadow:0 1px 2px rgba(60,48,25,.06);
}
.chip .art{ display:block; height:24px; line-height:0; overflow:hidden; }
.chip .art svg{ width:100%; height:100%; display:block; }
.chip .art img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:50% 82%;
}
.chip .cname{
  font-size:8.6px; line-height:1.12; font-weight:600;
  padding:3px 3px 0; letter-spacing:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.chip.event{ cursor:pointer; border-color:#d9cdf3; background:#fbf8ff; }
.chip.event .cname{ color:#5b3fa8; }
.chip.event:hover{ background:#f4ecff; transform:translateY(-1px); box-shadow:0 4px 10px rgba(90,60,160,.18); }
.chip.held{ box-shadow:0 0 0 2px rgba(124,58,237,.35); }
.chip.held .cname{ color:#5b21b6; }
.chip.city:hover{ transform:translateY(-1px); box-shadow:0 3px 8px rgba(60,48,25,.14); }
.hand .empty{ font-size:10.5px; color:#b3aa96; font-style:italic; }

/* log */

.logblock{ flex:1 1 auto; min-height:130px; display:flex; flex-direction:column; }
.log{
  flex:1; overflow-y:auto; font-size:11.5px; line-height:1.5;
  display:flex; flex-direction:column; gap:3px;
  max-height:230px; padding-right:4px;
  scrollbar-width:thin;
}
.log::-webkit-scrollbar{ width:6px; }
.log::-webkit-scrollbar-thumb{ background:#e0d7c3; border-radius:4px; }
.log .e{ color:var(--ink-soft); }
.log .e b{ color:var(--ink); }
.log .e.bad{ color:var(--bad); }
.log .e.good{ color:var(--teal-dark); }
.log .e.turn{
  margin-top:6px; padding-top:6px; border-top:1px dashed var(--line);
  font-weight:700; color:var(--ink);
}
.log .e.dim{ color:#a49c8a; font-size:11px; }

/* status */

.status .row{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:11.5px; color:var(--ink-soft);
  padding:5px 0; border-bottom:1px dashed var(--line-soft);
}
.status .row:last-of-type{ border-bottom:none; }
.status .row b{ color:var(--ink); font-variant-numeric:tabular-nums; font-size:12.5px; }
.status .rolehint{
  margin-top:8px; font-size:10.8px; line-height:1.5; color:#6f6a5c;
  background:#f7f2e6; border-radius:9px; padding:8px 9px;
}
.status .rolehint b{ color:var(--ink); }

/* ---------------- modal ---------------- */

.modal{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  background:rgba(38,32,20,.42);
  backdrop-filter:blur(5px);
  padding:24px;
  animation:fadeIn .16s ease-out;
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

.modal[hidden]{ display:none; }

.modal-box{
  width:min(760px, 100%);
  max-height:88vh; overflow-y:auto;
  background:var(--paper-2);
  border-radius:22px;
  border:1px solid #e8e0cc;
  box-shadow:0 30px 80px rgba(40,30,10,.35);
  padding:26px 28px;
  animation:rise .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes rise{ from{ opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:none;} }

.modal-box h2{
  margin:0 0 4px; font-size:24px; letter-spacing:.06em; text-transform:uppercase;
}
.modal-box h3{ margin:0 0 6px; font-size:17px; }
.modal-box p{ margin:6px 0; font-size:13px; line-height:1.6; color:var(--ink-soft); }
.modal-box .lead{ font-size:13px; color:var(--muted); }

.btn{
  font:inherit; font-size:13px; font-weight:600;
  padding:11px 20px; border-radius:11px; cursor:pointer;
  border:1px solid var(--line); background:#fffdf7; color:var(--ink);
  transition:.15s;
}
.btn:hover{ background:#f4eee0; }
.btn.primary{
  background:linear-gradient(180deg,#128579,#0d6b62); color:#fff; border:none;
  box-shadow:0 8px 20px rgba(15,118,110,.3);
}
.btn.primary:hover{ transform:translateY(-1px); }
.btn.primary:disabled{ background:#ded6c4; color:#a49c8a; box-shadow:none; cursor:not-allowed; transform:none; }
.btn.ghosty{ background:transparent; }

.setup-grid{ display:flex; gap:22px; flex-wrap:wrap; margin-top:18px; }
.setup-col{ flex:1 1 300px; min-width:260px; }

.diffrow{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.diff{
  flex:1 1 auto; font:inherit; font-size:12px; padding:9px 10px;
  border-radius:10px; border:1px solid var(--line); background:#fffdf7;
  cursor:pointer; color:var(--ink-soft); transition:.15s;
}
.diff:hover{ background:#f6f0e3; }
.diff.on{ background:#0f766e; color:#fff; border-color:#0f766e; box-shadow:0 6px 14px rgba(15,118,110,.25); }

.rolegrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:10px; }
.role{
  position:relative; text-align:left; font:inherit;
  padding:10px 11px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line); background:#fffdf7;
  transition:.15s;
}
.role:hover{ background:#f8f2e6; transform:translateY(-1px); }
.role.on{ border-color:#8fc9c1; background:#eef7f5; box-shadow:0 0 0 2px rgba(15,118,110,.1) inset; }
.role .rn{ font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:7px; }
.role-ico{
  width:34px; height:34px; border-radius:10px; flex:0 0 auto;
  background:var(--c,#0f766e); position:relative; overflow:hidden;
  box-shadow:0 2px 5px rgba(0,0,0,.18);
}
.role .rname{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.role .cardbtn{
  width:19px; height:19px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-size:10px; font-weight:800; font-style:italic;
  color:#8b8576; background:#f2ecdc; border:1px solid var(--line);
  cursor:pointer; transition:.14s;
}
.role .cardbtn:hover{ background:#e6dcc4; color:#23262c; }
.role-ico img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.role .rn i{ width:8px; height:8px; border-radius:50%; }
.role .rd{ font-size:10.5px; color:var(--muted); line-height:1.4; margin-top:3px; }
.role .badge{
  position:absolute; top:8px; right:8px;
  font-size:9.5px; font-weight:800; letter-spacing:.04em;
  background:#0f766e; color:#fff; border-radius:6px; padding:2px 5px;
}

.slots{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.slot{
  flex:1 1 130px; padding:8px 10px 9px; border-radius:10px;
  border:1px dashed #d6ccb6; background:#fffdf7;
  font-size:11px; color:var(--muted); cursor:pointer;
  transition:.14s; position:relative;
}
.slot:hover{ background:#faf5e9; }
.slot.on{ border:1px solid #0f766e; background:#eef7f5; box-shadow:0 0 0 2px rgba(15,118,110,.1) inset; }
.slot .sn{ font-size:10px; text-transform:uppercase; letter-spacing:.07em; display:flex; align-items:center; gap:5px; }
.slot .pdot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.slot b{ display:block; font-size:12.5px; color:var(--ink); margin-top:2px; }
.slot .absentbtn{
  margin-top:6px; font:inherit; font-size:9.5px; letter-spacing:.02em;
  padding:2px 7px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--muted);
}
.slot .absentbtn.on{ background:#fdeceb; border-color:#e9b7b2; color:#a63a2f; }

.setup-top{ display:grid; grid-template-columns:auto 1fr; gap:20px; margin-top:16px; }
.setup-top .diffrow{ margin-top:6px; }
.setup-top .diff{ min-width:52px; text-align:center; }

/* discard / forecast card grid */

.cardgrid{ display:flex; flex-wrap:wrap; gap:7px; margin:14px 0; }
.dcard{
  font:inherit; font-size:11.5px; padding:8px 10px;
  border-radius:9px; border:1px solid var(--line); background:#fffdf7;
  cursor:pointer; display:flex; align-items:center; gap:6px;
  transition:.12s;
}
.dcard:hover{ background:#f6f0e3; transform:translateY(-1px); }
.dcard i{ width:7px; height:7px; border-radius:2px; }
.dcard.picked{ background:#eef7f5; border-color:#8fc9c1; font-weight:700; }
.dcard .num{
  font-size:9.5px; font-weight:800; color:#fff; background:#0f766e;
  border-radius:4px; padding:1px 4px;
}
.dcard.dis{ opacity:.3; cursor:not-allowed; }

.modal-actions{ display:flex; justify-content:flex-end; gap:9px; margin-top:8px; }

.result{ text-align:center; padding:6px 0 2px; }
.result .big{ font-size:42px; line-height:1; margin-bottom:10px; }
.result h2{ font-size:26px; margin-bottom:8px; }
.result .reason{ font-size:13.5px; color:var(--ink-soft); }
.result .nums{ display:flex; justify-content:center; gap:10px; margin:18px 0 22px; flex-wrap:wrap; }
.result .nums .stat{ font-size:12px; }

.rules h3{ margin-top:18px; font-size:14px; letter-spacing:.02em; }
.rules ul{ margin:6px 0; padding-left:20px; font-size:12.8px; line-height:1.65; color:var(--ink-soft); }
.rules li b{ color:var(--ink); }
.rules .cols{ display:grid; grid-template-columns:1fr 1fr; gap:6px 26px; }

/* toast */

.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:200; padding:11px 18px; border-radius:12px;
  background:#2b303a; color:#fff; font-size:12.5px;
  box-shadow:0 12px 30px rgba(0,0,0,.3);
  animation:toastIn .2s ease-out;
  pointer-events:none;
}
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%,10px);} to{opacity:1; transform:translate(-50%,0);} }

/* badges & micro */

.absent-tag{
  display:inline-block; margin-left:6px; vertical-align:1px;
  font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:#a63a2f; background:#fdeceb; border:1px solid #f0cfcb;
  padding:1px 5px; border-radius:5px;
}
.rdot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; vertical-align:0; }
.rolehint-sm{
  margin-top:4px; font-size:10px; line-height:1.4; color:#8b8576;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mini-av{
  width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  color:#fff; font-size:10.5px; font-weight:800; flex:0 0 auto;
}
.dcard.pawnpick{ align-items:center; gap:8px; text-align:left; padding:8px 10px; }
.dcard.pawnpick small{ color:var(--muted); font-size:10px; }

@media (max-width:1180px){
  .layout{ grid-template-columns:minmax(0,1fr) 340px; }
  .brand{ min-width:0; }
  .brandtext p{ display:none; }
}

@media (max-width:1080px){
  .layout{ grid-template-columns:minmax(0,1fr) 330px; }
  .players-block{ flex-basis:auto; max-height:210px; }
}

@media (max-width:900px){
  body{ overflow:auto; }
  #app{ height:auto; min-height:100vh; }
  .layout{ grid-template-columns:1fr; }
  .board-col .board-wrap{ height:54vh; flex:none; }
  .players-block{ flex-basis:auto; max-height:none; }
  .players{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .side{ overflow:visible; }
}


/* компактный режим для невысоких экранов */
@media (max-height: 880px){
  .side{ gap:8px; }
  .block{ padding:9px 12px 10px; }
  .block-h{ margin-bottom:7px; }
  .act{ min-height:43px; padding:7px 9px; }
  .act .tx i{ display:none; }
  .players-block{ flex-basis:150px; padding:8px 12px 9px; }
  .rolehint-sm{ display:none; }
  #turnCard{ padding:11px 12px; }
  .cures{ gap:4px; }
  .cure{ padding:5px 8px; }
  .log{ max-height:none; }
}


/* карточка роли целиком */
.rolecard-view img{
  width:100%; display:block; border-radius:16px;
  box-shadow:0 14px 40px rgba(40,30,10,.28);
}

.cardlink{
  margin-top:10px; width:100%; font:inherit; font-size:11px; font-weight:700;
  padding:7px 10px; border-radius:9px; cursor:pointer;
  border:1px solid #cfe4e1; background:#eef7f5; color:var(--teal-dark);
  transition:.14s;
}
.cardlink:hover{ background:#dff0ed; }

.epidemic-view img{
  width:100%; max-width:400px; margin:0 auto; display:block;
  border-radius:16px; box-shadow:0 14px 40px rgba(20,40,20,.28);
}

.ocean{
  font-size:11px; letter-spacing:3.4px; font-weight:600;
  fill:#9fbcc4; opacity:.75; pointer-events:none;
  font-family:'Helvetica Neue', Arial, sans-serif;
}

.cardlink.ghost{
  margin-top:6px; background:#fffdf7; border-color:var(--line); color:var(--ink-soft);
}
.cardlink.ghost:hover{ background:#f6f0e3; }

/* шкала вспышек на поле — вертикальная, у левого края */
.outbreak-track{
  position:absolute; left:14px; top:min(452px, calc(100% - 334px)); z-index:5;
  width:78px; padding:10px 8px 12px; border-radius:14px;
  background:rgba(255,253,247,.95);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(6px);
}
.ot-top{
  display:block; text-align:center; margin-bottom:9px;
  color:var(--muted); font-weight:700;
}
.ot-top span{
  display:block; font-size:8px; letter-spacing:.09em; text-transform:uppercase;
}
.ot-top b{
  display:block; margin-top:3px;
  font-size:11.5px; color:var(--ink); letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.outbreak-track.danger .ot-top b{ color:var(--bad); }

.ot-cells{
  position:relative; display:flex; flex-direction:column;
  align-items:center; gap:3px;
}
.ot-cells::before{
  content:''; position:absolute; left:50%; top:11px; bottom:11px; width:2px;
  background:#e7dcc4; transform:translateX(-50%); border-radius:2px;
}
.ot-cell{
  position:relative; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  font-size:9.5px; font-weight:800; font-variant-numeric:tabular-nums;
  background:#fffdf7; border:1px solid #e0d5ba; color:#a49c8a;
  transition:.18s;
}
.ot-cell.done{ background:#f7dcd6; border-color:#e7b6ac; color:#b03a2b; }
.ot-cell.now{
  width:24px; height:24px;
  background:none; border:none; box-shadow:none; transform:none;
}
.ot-cell.now img{
  width:24px; height:24px; display:block;
  filter:drop-shadow(0 1px 3px rgba(10,60,60,.35));
}
.ot-cell.last{
  border-style:dashed; border-color:#d9a49a; color:#b03a2b; background:#fbe9e6;
}
.ot-cell.last.done{ border-style:solid; }

/* управление зумом карты */
.zoomctl{
  position:absolute; right:14px; top:50%; transform:translateY(-50%); z-index:6;
  display:flex; flex-direction:column; gap:6px;
}
.zoomctl button{
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  background:rgba(255,253,247,.95);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  color:#5c5a52; font-size:16px; line-height:1; cursor:pointer;
  transition:.14s; font-family:inherit;
}
.zoomctl button:hover{ background:#f6f0e3; color:#23262c; transform:translateY(-1px); }
.zoomctl button:active{ transform:translateY(0); }

/* шкала заражения — сверху */
.infection-track{
  position:absolute; left:14px; top:14px; z-index:5;
  padding:9px 12px 11px; border-radius:14px;
  background:rgba(255,253,247,.95);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(6px);
}
.it-cells{ position:relative; display:flex; gap:4px; }
.it-cells::before{
  content:''; position:absolute; left:9px; right:9px; top:50%; height:2px;
  background:#e7dcc4; transform:translateY(-50%); border-radius:2px;
}
.it-cell{
  position:relative; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  font-size:9.5px; font-weight:800; font-variant-numeric:tabular-nums;
  background:#e8f1e4; border:1px solid #b9d3b4; color:#3f6b45;
}
.it-cell.now{
  width:24px; height:24px; border:none; background:none;
}
.it-cell.now img{
  width:24px; height:24px; display:block;
  filter:drop-shadow(0 1px 3px rgba(20,70,30,.35));
}

.flylabel{
  font-size:10.5px; font-weight:700; letter-spacing:.03em;
  fill:#7a6a42; paint-order:stroke; stroke:#ffffff; stroke-width:3px;
  stroke-linejoin:round; pointer-events:none;
}

/* выбор способа добраться */
.moveopts{ display:flex; flex-direction:column; gap:8px; margin:14px 0 4px; }
.moveopt{
  display:flex; gap:11px; align-items:center; text-align:left;
  padding:10px 12px; border-radius:12px; font:inherit; cursor:pointer;
  border:1px solid var(--line); background:#fffdf7; transition:.15s;
}
.moveopt:hover{ background:#f7f1e4; border-color:#d9cdb2; transform:translateY(-1px); }
.moveopt .moi{ font-size:17px; line-height:1; }
.moveopt .mot{ display:flex; flex-direction:column; gap:2px; }
.moveopt b{ font-size:12.5px; color:var(--ink); }
.moveopt small{ font-size:10.5px; color:var(--muted); }

/* шкалы на карте — тёмное стекло в цвет поля */
.infection-track, .outbreak-track{
  background:rgba(9,26,44,.62);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 22px rgba(0,0,0,.30);
  backdrop-filter:blur(8px) saturate(1.1);
}
.ot-top{ color:rgba(233,242,250,.66); }
.ot-top b{ color:#fff; }
.outbreak-track.danger .ot-top b{ color:#ff9a8f; }

.it-cell, .ot-cell{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
  color:#dbe7f2;
}
.it-cells::before, .ot-cells::before{ background:rgba(255,255,255,.18); }

.ot-cell.done{
  background:rgba(214,69,69,.62); border-color:rgba(255,160,150,.55); color:#fff;
}
.ot-cell.last{
  background:rgba(190,45,35,.28); border-color:rgba(255,140,130,.65); color:#ffb8ae;
}
.it-cell.now img, .ot-cell.now img{
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
}

/* компактнее, чтобы меньше закрывать карту */
.ot-cell{ width:20px; height:20px; font-size:9px; }
.ot-cells{ gap:2px; }
.ot-top{ margin-bottom:7px; font-size:9.5px; }
.ot-top b{ font-size:11px; }
.outbreak-track{ width:70px; padding:9px 7px 10px; }
.ot-cell.now{ width:22px; height:22px; }
.ot-cell.now img{ width:22px; height:22px; }

/* ---- поле открытых лекарств внизу карты ---- */
.cure-board{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:6; display:flex; gap:8px;
  padding:8px 10px; border-radius:14px;
  background:rgba(9,26,44,.62);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 22px rgba(0,0,0,.30);
  backdrop-filter:blur(8px) saturate(1.1);
}
.cure-slot{
  display:flex; align-items:center; gap:9px;
  padding:7px 11px; border-radius:10px; font:inherit; cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); color:#dbe7f2;
  transition:.15s;
}
.cure-slot:disabled{ cursor:default; }
.cure-slot.ready{
  background:rgba(24,120,110,.55); border-color:rgba(120,230,215,.5);
  box-shadow:0 0 0 2px rgba(120,230,215,.16);
}
.cure-slot.ready:hover{ background:rgba(24,140,128,.72); transform:translateY(-1px); }
.cure-slot.done{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.3); }
.cs-dot{
  width:17px; height:17px; border-radius:5px; flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.55), 0 2px 5px rgba(0,0,0,.45);
}
.cs-text{ display:flex; flex-direction:column; gap:1px; text-align:left; }
.cs-name{ font-size:9.5px; letter-spacing:.03em; color:rgba(233,242,250,.7); text-transform:uppercase; }
.cs-state{ font-size:11px; font-weight:800; color:#fff; }
.cs-state .ok{ color:#8ef0d8; }
.cs-state .can{ color:#ffd166; }
.cs-state .num{ color:rgba(233,242,250,.82); font-weight:700; }

/* ---- карта заражения, которая открывается по кнопке ---- */
.infect-card{
  position:absolute; right:14px; top:14px; z-index:7;
  width:172px; padding:9px 9px 8px; border-radius:14px;
  background:rgba(9,26,44,.74);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  backdrop-filter:blur(10px) saturate(1.1);
  color:#eaf3fb;
  perspective:700px;
}
.infect-card[hidden]{ display:none; }
.infect-card.in{ animation:icFlip .34s cubic-bezier(.2,.9,.3,1.2); }
@keyframes icFlip{
  0%{ opacity:0; transform:translateY(-10px) rotateY(-70deg) scale(.9); }
  100%{ opacity:1; transform:translateY(0) rotateY(0) scale(1); }
}
.ic-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:7px; font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(214,231,245,.72); font-weight:700;
}
.ic-head b{ font-size:11px; color:#ffd166; letter-spacing:.02em; }
.ic-frame{
  border-radius:8px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.14);
}
.ic-frame img{ width:100%; height:auto; display:block; }
.ic-foot{
  display:flex; align-items:center; gap:6px; margin-top:7px;
  font-size:11px; font-weight:700;
}
.ic-dot{ width:11px; height:11px; border-radius:3px; box-shadow:0 0 0 1px rgba(255,255,255,.6); }
.ic-city{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ic-plus{
  font-size:10px; font-weight:800; color:#ffd166;
  background:rgba(255,209,102,.14); border-radius:999px; padding:2px 7px;
}
@media (max-width:1250px){
  .infect-card{ width:150px; }
}

/* ---- шкалы крупнее ---- */
.infection-track{ padding:12px 14px 13px; }
.it-cell{ width:26px; height:26px; font-size:11px; }
.it-cell.now{ width:28px; height:28px; }
.it-cell.now img{ width:28px; height:28px; }
.it-cells{ gap:5px; }
.ot-top span{ font-size:9.5px; letter-spacing:.1em; }
.ot-top b{ font-size:13px; }
.outbreak-track{ width:88px; padding:11px 9px 12px; }
.ot-cell{ width:26px; height:26px; font-size:10px; }
.ot-cells{ gap:3px; }
.ot-cell.now{ width:28px; height:28px; }
.ot-cell.now img{ width:28px; height:28px; }

/* фишки-картинки и кубики */
.pawn .pawn-img{ filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.pawn text{
  font-size:8px; font-weight:800; fill:#fff;
  paint-order:stroke; stroke:rgba(0,0,0,.6); stroke-width:2.2px;
}
.cube{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); transform-box:fill-box; transform-origin:center; }

/* исследовательская станция, баночки лекарств, вспышка-8 */
.station{ filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.cs-jar{
  width:20px; height:auto; display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
.ot-cell.last:has(.ot-8){ background:none; border:none; padding:0; width:28px; height:28px; }
.ot-cell .ot-8{ width:26px; height:26px; display:block; border-radius:50%; }
.cube{
  filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px rgba(255,255,255,.85))
         drop-shadow(0 1px 2px rgba(0,0,0,.55));
}

.cs-btn{
  display:inline-block; margin-top:2px;
  padding:2px 8px; border-radius:999px;
  background:#2fbf9c; color:#06251f; font-size:10.5px; font-weight:900;
  letter-spacing:.02em; box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.cure-slot.ready{ border-color:rgba(80,240,205,.7); }

/* имя игрока редактируется прямо в панели */
.pcard .meta b{ cursor:text; border-bottom:1px dashed transparent; }
.pcard .meta b:hover{ border-bottom-color:#c9bfa8; }
.pcard .meta b:focus{ outline:none; border-bottom-color:var(--teal); }

.undoturn{
  margin-top:7px; width:100%; font:inherit; font-size:12px; font-weight:700;
  padding:8px 12px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:#fffdf7; color:var(--ink-soft);
  transition:.15s;
}
.undoturn:hover{ background:#f6f0e3; color:var(--ink); }

/* сайдбар: действия убраны, карты игроков занимают место, журнал снизу */
.side{ display:flex; flex-direction:column; gap:10px; }
.turnbtns{ display:flex; flex-direction:column; gap:6px; }
.players-block{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.players-block .players{ overflow-y:auto; }
.logblock{ flex:0 0 190px; min-height:0; display:flex; flex-direction:column; }
.logblock .log{ flex:1; min-height:0; overflow-y:auto; }

/* цветной журнал */
.log .e{ line-height:1.45; }
.log .lg-city{ font-weight:700; }
.log .lg-player{ font-weight:700; }

/* действия и кнопки хода в шапке */
.topbar{
  height:auto; min-height:68px; padding:7px 18px; gap:14px; flex-wrap:wrap;
}
.topbar .brand{ min-width:0; flex:0 0 auto; }
.topbar .stats{ flex:0 1 auto; min-width:0; }
.topbar .actions{
  display:flex; flex-wrap:nowrap; gap:5px; margin:0 2px; flex:0 0 auto;
}
.topbar .act{
  width:37px; height:37px; padding:0; border-radius:10px;
  display:grid; place-items:center; background:#fffdf7; border:1px solid var(--line);
}
.topbar .act .tx{ display:none; }
.topbar .act .ic{ font-size:16px; line-height:1; }
.topbar .act:hover:not(:disabled){ background:#f6f0e3; }
.topbar .act.active{ border-color:var(--teal); box-shadow:0 0 0 2px rgba(15,118,110,.18); }
.topbar .act:disabled{ opacity:.4; }
.topbar .topbtns{ flex:0 0 auto; margin-left:auto; }
.topbar .endturn{
  margin:0; width:auto; padding:9px 14px; font-size:12px;
}
.topbar .undoturn{
  margin:0; width:auto; padding:9px 12px; font-size:12px;
}

@media (max-width:1500px){
  .topbar{ gap:10px; padding:7px 14px; }
  .topbar .brandtext p{ display:none; }
  .topbar .brand{ gap:9px; }
  .topbar .brandtext h1{ font-size:15px; letter-spacing:.16em; }
  .topbar .act{ width:34px; height:34px; border-radius:9px; }
  .topbar .act .ic{ font-size:15px; }
  .topbar .actions{ gap:4px; }
  .topbar .endturn{ padding:8px 11px; }
  .topbar .undoturn{ padding:8px 10px; }
  .topbar .topbtns{ gap:6px; }
}
@media (max-width:1250px){
  .topbar .brandtext h1{ font-size:13.5px; letter-spacing:.1em; }
  .topbar .stat .lbl{ display:none; }
}

/* ================= колоды на поле ================= */

.deck-zone{
  position:absolute; bottom:14px; z-index:6;
  display:flex; align-items:flex-end; gap:9px;
}
.deck-zone.inf{ left:14px; }
.deck-zone.pl{ right:14px; }

.deck-pile{
  position:relative; border-radius:9px;
  transition:transform .16s ease;
}
.deck-zone.inf .deck-pile{ width:96px; height:69px; }
.deck-zone.pl .deck-pile{ width:64px; height:90px; }

.deck-pile .back{
  display:block; width:100%; height:100%; object-fit:cover;
  border-radius:9px;
  box-shadow:
    3px -3px 0 -1px rgba(24,46,66,.95),
    6px -6px 0 -2px rgba(16,34,50,.95),
    0 8px 18px rgba(0,0,0,.45);
}
.deck-pile.draw{ cursor:default; }
.deck-pile.draw:hover{ transform:translateY(-2px); }

.deck-pile .cnt{
  position:absolute; right:-7px; bottom:-7px;
  min-width:21px; height:21px; padding:0 5px;
  display:grid; place-items:center;
  border-radius:999px; background:#0d2233; color:#fff;
  font-size:11px; font-weight:800; font-variant-numeric:tabular-nums;
  box-shadow:0 2px 6px rgba(0,0,0,.45), 0 0 0 1.5px rgba(255,255,255,.88);
  pointer-events:none;
}
.deck-pile .cnt.warn{ background:#b3261e; }

/* сброс: стопка открытых карт */
.deck-pile.disc{
  perspective:700px; cursor:pointer;
  border-radius:9px;
  background:rgba(9,26,44,.35);
  outline:1.5px dashed rgba(255,255,255,.35); outline-offset:-2px;
}
.deck-pile.disc:hover{ transform:translateY(-2px); }
.deck-pile.disc .stack{
  position:absolute; inset:0;
  transform-style:preserve-3d;
}
.deck-pile.disc .stack img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:9px;
  box-shadow:0 6px 16px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.18);
  transform-origin:center;
}
.deck-pile.disc .stack .ph{
  position:absolute; inset:0; display:grid; place-items:center;
  border-radius:9px; background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.55); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; text-align:center; padding:4px;
}
.deck-pile.disc .stack img.fly{ animation:drawCard .5s cubic-bezier(.2,.9,.3,1.05); }
.deck-zone.pl .deck-pile.disc .stack img.fly{ animation-name:drawCardR; }

@keyframes drawCard{
  0%{ transform:translateX(-108px) rotateY(-72deg) scale(.9); opacity:.35; }
  55%{ transform:translateX(5px) rotateY(0deg) scale(1.04); opacity:1; }
  100%{ transform:none; }
}
@keyframes drawCardR{
  0%{ transform:translateX(76px) rotateY(72deg) scale(.9); opacity:.35; }
  55%{ transform:translateX(-4px) rotateY(0deg) scale(1.04); opacity:1; }
  100%{ transform:none; }
}

/* вспышка колоды, когда из неё тянут */
.deck-pile.draw.take{ animation:deckTake .38s ease-out; }
@keyframes deckTake{
  0%{ transform:translateY(0); }
  35%{ transform:translateY(-4px) scale(1.03); }
  100%{ transform:translateY(0); }
}

/* ================= игроки: все карты видны ================= */

.players-block{ flex:0 0 auto !important; max-height:none !important; }
.players-block .players,
.players{
  flex:0 0 auto !important; overflow:visible !important;
  align-content:start;
}
.hand{ gap:4px; }
.hand .chip{ width:46px; height:50px; border-radius:7px; }
.hand .chip .art{ height:23px; }
.hand .chip .cname{ font-size:8px; line-height:1.05; padding:2px 2px 0; -webkit-line-clamp:2; }

/* журнал: новые события сверху, можно скроллить */
.logblock{ flex:1 1 auto; min-height:150px; }
.log{ flex:1 1 auto; min-height:0; overflow-y:auto; max-height:none; }
.log .e.turn{
  margin:0 0 6px; padding:0 0 6px;
  border-top:0; border-bottom:1px dashed var(--line);
}

/* список карт в сбросе */
.dlist{
  max-height:46vh; overflow-y:auto; margin-top:10px;
  border:1px solid var(--line); border-radius:12px; background:#fffdf7;
}
.drow{
  display:flex; align-items:center; gap:9px;
  padding:7px 11px; border-bottom:1px solid var(--line-soft);
  font-size:12.5px; color:var(--ink-soft);
}
.drow:last-child{ border-bottom:0; }
.drow i{ width:11px; height:11px; border-radius:3px; flex:0 0 auto; box-shadow:0 0 0 1px rgba(0,0,0,.12); }
.drow .dname{ flex:1; min-width:0; font-weight:600; color:var(--ink); }
.drow .dkind{ font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
.btn.mini{ padding:3px 9px; font-size:11px; border-radius:8px; }

.undoturn.locked{ opacity:.45; cursor:not-allowed; }

/* компактнее, чтобы все карты влезали в один ряд */
.pcard{ padding:8px 8px !important; }
.hand{ gap:3px; }
.hand .chip{ width:43px; height:48px; }
.hand .chip .art{ height:22px; }
.hand .chip .cname{ font-size:7.8px; padding:2px 1px 0; }
.players{ gap:8px; }

/* сайдбар чуть шире, чтобы 7 карт влезали в ряд; скроллится только журнал */
.layout{ grid-template-columns:minmax(0,1fr) 400px !important; }
.side{ overflow:hidden !important; }
.hand .chip{ width:48px; height:52px; }
.hand .chip .art{ height:24px; }
.hand .chip .cname{ font-size:8.4px; padding:2px 2px 0; }

@media (max-height:880px){
  .hand .chip{ width:44px; height:47px; }
  .hand .chip .art{ height:21px; }
  .hand .chip .cname{ font-size:7.8px; }
  .pcard{ padding:7px 7px !important; }
}

.hand{ gap:2px !important; }
.hand .chip{ width:47px; }

/* счётчик колоды — в верхний угол, чтобы не наезжать на сброс */
.deck-pile.draw .cnt{ top:-8px; right:-8px; bottom:auto; }

/* стопка открытых карт в сбросе */
.deck-pile.disc .stack img.u{ box-shadow:0 3px 8px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.14); }
.deck-pile.disc .stack img.u:nth-child(1){ transform:translate(3px,3px) scale(.972); filter:brightness(.82); }
.deck-pile.disc .stack img.u:nth-child(2){ transform:translate(1.5px,1.5px) scale(.986); filter:brightness(.92); }
.deck-pile.disc .stack img.fly{ filter:none; }

.deck-pile.disc .stack img.u0{ transform:translate(3px,3px) scale(.972); filter:brightness(.82); }
.deck-pile.disc .stack img.u1{ transform:translate(1.5px,1.5px) scale(.986); filter:brightness(.92); }

/* колода заражения — под шкалой заражения слева, чтобы не мешать карточке города */
.deck-zone.inf{ left:14px; top:96px; bottom:auto; }
.deck-zone.inf{ top:106px; }

/* ===== действия в шапке: иконка + подпись ===== */
.topbar .actions{ gap:5px; flex-wrap:wrap; justify-content:center; }
.topbar .act{
  width:auto !important; height:34px; padding:0 10px 0 8px;
  display:flex; align-items:center; gap:5px;
}
.topbar .act .tx{ display:block; }
.topbar .act .tx b{ font-size:10.5px; font-weight:700; white-space:nowrap; }
.topbar .act .tx i{ display:none; }
.topbar .act .ic{ font-size:14px; }
@media (max-width:1500px){
  .topbar .act{ height:32px; padding:0 8px 0 6px; }
  .topbar .act .tx b{ font-size:10px; }
  .topbar .act .ic{ font-size:13px; }
}

/* ===== карты на руках: полноценные картинки внахлёст ===== */
.hand{
  display:block !important; position:relative;
  height:88px; margin-top:7px;
  padding-top:12px;
}
.hand .empty{ font-size:10.5px; color:#b3aa96; font-style:italic; }
.hand .hcard{
  position:absolute; top:12px; left:calc(var(--i) * 28px);
  width:52px; height:73px; border-radius:6px; overflow:hidden;
  background:#fffdf7; border:1px solid rgba(0,0,0,.14);
  box-shadow:0 2px 5px rgba(60,48,25,.22);
  cursor:pointer; z-index:calc(var(--i) + 1);
  transition:transform .16s ease, box-shadow .16s ease;
  transform-origin:50% 90%;
}
.hand .hcard img{ width:100%; height:100%; object-fit:cover; display:block; }
.hand .hcard:hover{ transform:translateY(-5px); }
.hand .hcard.raised{
  transform:translateY(-13px) scale(1.18);
  z-index:60; box-shadow:0 12px 24px rgba(40,30,10,.34);
}
.hand .hcard.ev{
  background:linear-gradient(160deg,#8b5cf6,#5b21b6); color:#fff;
  display:grid; place-items:center; padding:4px; text-align:center;
}
.hand .hcard.ev .evname{ font-size:8px; font-weight:800; line-height:1.15; }
.hand .hcard.ev.held{ box-shadow:0 0 0 2px #7c3aed, 0 3px 8px rgba(0,0,0,.25); }
.hand .hcard .playbtn{
  position:absolute; left:50%; bottom:3px; transform:translateX(-50%);
  width:26px; height:18px; border-radius:5px; border:0; cursor:pointer;
  background:#fff; color:#5b21b6; font-size:9px; font-weight:800;
  box-shadow:0 2px 6px rgba(0,0,0,.3); padding:0;
}
.players-block{ overflow:visible !important; }

/* ===== колода «ждёт клика» ===== */
.deck-pile.draw.ready{
  cursor:pointer;
  animation:deckReady 1.6s ease-in-out infinite;
}
@keyframes deckReady{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(255,214,102,0)); }
  50%{ filter:drop-shadow(0 0 10px rgba(255,206,84,.95)); }
}
.deck-pile.draw.ready::after{
  content:''; position:absolute; inset:-4px; border-radius:13px;
  border:2px solid rgba(255,206,84,.9); pointer-events:none;
  animation:readyRing 1.6s ease-in-out infinite;
}
@keyframes readyRing{
  0%,100%{ opacity:.45; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.04); }
}

/* летящие кубики */
.flycube{
  position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px;
  z-index:9; pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
  transition:transform .72s cubic-bezier(.4,0,.6,1), opacity .72s ease-in;
}

/* шкала заражения дёргается, когда поднимается скорость */
.infection-track.rateup{ animation:rateUp .95s ease-out; }
@keyframes rateUp{
  0%{ transform:scale(1); }
  30%{ transform:scale(1.07); box-shadow:0 0 0 3px rgba(214,69,69,.45); }
  100%{ transform:scale(1); }
}

/* ===== панель лекарств: только баночки, кнопка «Создать» под банкой ===== */
.cure-board{
  left:calc(50% - 50px) !important;
  padding:8px 10px !important; gap:10px !important;
}
.cure-slot{
  flex-direction:column !important; align-items:center !important;
  gap:4px !important; padding:4px 6px !important;
  border:0 !important; background:transparent !important;
  box-shadow:none !important; min-width:0;
}
.cure-slot:hover{ transform:none !important; background:rgba(255,255,255,.08) !important; }
.cure-slot.ready{
  background:rgba(24,120,110,.5) !important;
  box-shadow:0 0 0 2px rgba(120,230,215,.35) !important;
}
.cure-slot .cs-jar{ width:44px !important; height:auto; }
.cure-slot .cs-btn{
  margin:0 !important; padding:3px 9px !important; font-size:10px !important;
  animation:cureReady 1.4s ease-in-out infinite;
}
@keyframes cureReady{
  0%,100%{ box-shadow:0 2px 6px rgba(0,0,0,.35); }
  50%{ box-shadow:0 2px 14px rgba(47,191,156,.9); }
}

/* ===== колоды: заражение справа сверху и крупнее, игроков — крупнее и левее ===== */
.deck-zone.inf{
  left:auto !important; right:14px !important; top:14px !important; bottom:auto !important;
}
.deck-zone.inf .deck-pile{ width:132px !important; height:95px !important; }
.deck-zone.pl{
  right:64px !important; bottom:14px !important;
}
.deck-zone.pl .deck-pile{ width:84px !important; height:118px !important; }
.hand .hcard{ left:calc(var(--i) * 33px); }
.hand .hcard.raised{ transform:translateY(-8px) scale(1.14); }

/* ===== шапка: ужимаем, чтобы действия с подписями влезали в одну строку ===== */
.topbar{ gap:10px !important; padding:6px 14px !important; }
.topbar .stat .lbl{ display:none; }
.topbar .cubechip{ padding:5px 7px; }
.topbar .act{ padding:0 7px 0 6px !important; }
.topbar .act .tx b{ font-size:10px; }
.topbar .endturn{ padding:8px 11px !important; }
.topbar .undoturn{ padding:8px 10px !important; }
.topbar .ghost{ padding:8px 10px !important; }
@media (max-width:1420px){
  .topbar .brandtext p{ display:none; }
  .topbar .brandtext h1{ font-size:14px; letter-spacing:.12em; }
  .topbar .brand{ gap:8px; }
  .topbar .logo{ width:34px; height:34px; font-size:18px; }
}

/* шапка: финальная утяжка, чтобы 8 действий с подписями влезали в строку */
.topbar{ gap:8px !important; }
.topbar .brandtext p{ display:none; }
.topbar .brandtext h1{ font-size:15px; letter-spacing:.14em; }
.topbar .brand{ gap:8px; }
.topbar .act{ padding:0 6px 0 5px !important; gap:4px !important; height:32px !important; }
.topbar .endturn{ padding:7px 10px !important; }
.topbar .undoturn, .topbar .ghost{ padding:7px 9px !important; }
@media (max-width:1360px){
  .topbar .act .tx{ display:none; }
  .topbar .act{ width:34px !important; padding:0 !important; }
}
.topbar .stat .lbl{ display:inline !important; }

.deck-pile.disc .stack .ph{
  background:rgba(9,26,44,.62); color:rgba(255,255,255,.8);
  font-weight:700; letter-spacing:.12em;
}

/* низкие экраны: карты на руках мельче, чтобы всё влезло без прокрутки */
@media (max-height:900px){
  .hand{ height:70px; padding-top:8px; margin-top:5px; }
  .hand .hcard{ width:43px; height:60px; top:8px; left:calc(var(--i) * 27px); }
  .hand .hcard .evname{ font-size:7px; }
  .pcard{ padding:7px 8px !important; }
  .players{ gap:7px; }
  .rolehint-sm{ display:none; }
  .logblock{ min-height:110px !important; }
  .log{ font-size:11px; }
}

/* ===== карты на руках крупнее (размер задаётся из JS) ===== */
.hand .hcard{
  width:var(--cw, 52px) !important;
  height:var(--ch, 73px) !important;
  left:calc(var(--i) * var(--step, 33px)) !important;
}
.hand{ height:auto; }
.hand .hcard .playbtn{ width:34px; height:22px; font-size:11px; bottom:5px; }
.hand .hcard.held{ box-shadow:0 0 0 3px #7c3aed, 0 4px 10px rgba(0,0,0,.3); }
@media (max-height:900px){
  .hand .hcard{ width:var(--cw, 43px) !important; height:var(--ch, 60px) !important; left:calc(var(--i) * var(--step, 27px)) !important; }
}

/* карточка события в модалке */
.event-view{ display:flex; justify-content:center; margin:2px 0 12px; }
.event-view img{
  width:min(300px, 62vw); height:auto; display:block; border-radius:14px;
  box-shadow:0 16px 40px rgba(10,30,55,.35);
}

/* миниатюра события в списках */
.dcard.evpick{ display:flex; align-items:center; gap:9px; text-align:left; }
.dcard.evpick img{ width:26px; height:36px; object-fit:cover; border-radius:4px; flex:0 0 auto; box-shadow:0 1px 3px rgba(0,0,0,.3); }

/* при 4 игроках карточка хода компактнее */
#turnCard.compact .rolehint-sm{ display:none; }
#turnCard.compact{ padding-bottom:10px; }

/* если совсем не хватает высоты — сайдбар можно прокрутить (журнал всё равно свой скролл) */
.side{ overflow-y:auto !important; overflow-x:hidden !important; }

/* ===== колоды крупнее: игроков ×2 и на 100 px левее, заражения ×2 ===== */
.deck-zone.pl{ right:164px !important; }
.deck-zone.pl .deck-pile{ width:168px !important; height:236px !important; }
.deck-zone.inf .deck-pile{ width:264px !important; height:190px !important; }
.deck-zone.inf{ right:14px !important; top:14px !important; }

/* точная подгонка крупных колод, чтобы не накрывать города */
.deck-zone.inf{ top:8px !important; }
.deck-zone.inf .deck-pile{ width:257px !important; height:185px !important; }
.cure-board{ left:calc(50% - 80px) !important; }

/* подсказка — под шкалой заражения слева, чтобы не лезла под колоду */
.map-hint{ left:14px !important; transform:none !important; max-width:360px; }

/* ===== лобби игры по ссылке ===== */
.netlink{ display:flex; gap:8px; margin:10px 0 4px; }
.netlink input{
  flex:1; min-width:0; font:inherit; font-size:12px;
  padding:9px 11px; border-radius:10px; border:1px solid var(--line);
  background:#fffdf7; color:var(--ink);
}
.netcode{ font-size:11.5px; color:var(--muted); margin-bottom:4px; }
.netcode b{ color:var(--ink); letter-spacing:.12em; }
.nslots{ display:flex; flex-direction:column; gap:7px; }
.nslot{
  display:flex; align-items:center; gap:8px;
  padding:7px 9px; border-radius:11px; border:1px solid var(--line-soft);
  background:#fffefb;
}
.nslot.mine{ border-color:#b7dcd6; background:#f4fbfa; }
.nslot.off{ opacity:.62; }
.nslot .pdot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.nslot .nnum{ font-size:11px; font-weight:800; color:var(--muted); width:12px; }
.nslot .nname{
  flex:1; min-width:0; font:inherit; font-size:12.5px;
  padding:6px 8px; border-radius:8px; border:1px solid var(--line);
  background:#fff;
}
.nslot .nrole{
  font:inherit; font-size:11.5px; padding:6px 6px; border-radius:8px;
  border:1px solid var(--line); background:#fff; max-width:150px;
}
.nslot .absentbtn{ font-size:10.5px; padding:5px 8px; }
.netjoin{ display:flex; gap:10px; margin-top:6px; }
.netjoin label{ flex:1; display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--muted); }
.netjoin input, .netjoin select{
  font:inherit; font-size:13px; padding:9px 10px; border-radius:10px;
  border:1px solid var(--line); background:#fffdf7; color:var(--ink);
}
.netwait{ font-size:12.5px; color:var(--muted); }

.absent-note{
  margin-top:6px; font-size:10.5px; line-height:1.3;
  color:#7a5b16; background:#fdf4dc; border:1px solid #f0e0b6;
  padding:4px 8px; border-radius:8px;
}

/* колода заражения прижата к правому верхнему углу, сброс уходит влево */
.deck-zone.inf{ flex-direction:row-reverse; }

/* ===== колоды и сбросы одного размера внутри пары ===== */
.deck-zone.inf{ --infw:185px; }
.deck-zone.pl{ --plw:121px; }

.deck-zone.inf .deck-pile{
  width:var(--infw) !important;
  height:auto !important;
  aspect-ratio:7 / 5;
}
.deck-zone.pl .deck-pile{
  width:var(--plw) !important;
  height:auto !important;
  aspect-ratio:5 / 7;
}
/* сброс — ровно такой же, как колода рядом */
.deck-zone.inf .deck-pile.disc{ width:var(--infw) !important; }
.deck-zone.pl .deck-pile.disc{ width:var(--plw) !important; }

/* на узких экранах пара колода+сброс ужимается целиком, оставаясь одного размера */
@media (max-width:1599px){
  .deck-zone.inf{ --infw:148px; }
  .deck-zone.pl{ --plw:108px; }
}
@media (max-width:1439px){
  .deck-zone.inf{ --infw:128px; }
  .deck-zone.pl{ --plw:108px; right:110px !important; }
}
@media (max-width:1199px){
  .deck-zone.inf{ --infw:122px; }
  .deck-zone.pl{ --plw:94px; }
}

/* карты на руке стали крупнее — поджимаем рамки карточек, чтобы сайдбар влезал */
.pcard{ padding:7px 9px; }
.players{ gap:7px; }

/* журнал отдаёт высоту картам на руке, если их много */
.side > .logblock{ min-height:100px !important; }

/* разделы в списке обмена знаниями */
.cardgrid .sect{
  width:100%; margin:2px 0 -1px;
  font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted);
}

/* ===== лупа: увеличенный просмотр карты с руки ===== */
.card-peek{
  position:fixed; left:0; top:0; z-index:120; pointer-events:none;
  width:clamp(200px, 18vw, 310px);
  opacity:0; transform:translateY(8px) scale(.97);
  transition:opacity .13s ease, transform .13s ease;
}
.card-peek.on{ opacity:1; transform:none; }
.card-peek img{
  display:block; width:100%; height:auto; border-radius:13px;
  box-shadow:0 22px 60px rgba(8,26,45,.5), 0 0 0 1px rgba(255,255,255,.25);
  background:#0b2540;
}

/* лобби: подсветка незаполненных слотов и подсказка, почему старт недоступен */
.nslot.need{ border-color:#eccf9f; background:#fffbf3; }
.nethint{
  margin-top:12px; font-size:11.5px; line-height:1.5;
  color:#7d5410; background:#fdf4dc; border:1px solid #f0e0b6;
  padding:9px 11px; border-radius:10px;
}
.nethint b{ color:#6a4406; }

/* карты в руке ещё крупнее — поджимаем обвязку карточки игрока */
.pcard{ padding:6px 8px; }
.players{ gap:5px; }
.hand{ margin-top:4px; }
.pcard .head{ gap:6px; }
.side > .logblock{ min-height:70px !important; }

/* журнал отдаёт ещё немного высоты большим картам */
.side > .logblock{ min-height:60px !important; }

/* журнал не должен схлопываться — пусть лучше панель прокрутится */
.side > .logblock{ min-height:90px !important; }
/* при четырёх игроках карточки игроков компактнее */
.players.many .pcard{ padding:5px 8px; }
.players.many .pcard .av{ width:18px; height:18px; }
.players.many .pcard .head{ gap:5px; }

/* при 3–4 игроках карточки игроков компактнее */
.players.many .pcard{ padding:5px 8px; }
/* в компактной карточке хода город уже виден на карте */
#turnCard.compact .cityline{ display:none; }

/* финальная подгонка: журнал 80 px, этого хватает на 2–3 строки и на прокрутку */
.side > .logblock{ min-height:80px !important; }

/* ===== сетап: поле имени в слоте ===== */
.slot .sname{
  display:block; width:100%; box-sizing:border-box; margin-top:4px;
  font:inherit; font-size:12px; padding:4px 7px;
  border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink);
}
.slot .sname:focus{ outline:none; border-color:#0f766e; box-shadow:0 0 0 2px rgba(15,118,110,.12); }

/* ===== лобби: сложность для гостя ===== */
.netdiff{ margin-top:8px; font-size:12.5px; font-weight:700; color:var(--ink); }
.netdiff span{ font-weight:400; font-size:11.5px; color:var(--muted); margin-left:6px; }

/* ===== сетап: продолжить сохранённую партию ===== */
.resume{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  margin:12px 0 4px; padding:10px 12px; border-radius:12px;
  background:#eef7f5; border:1px solid #b7dcd6;
}
.resume b{ display:block; font-size:13px; color:var(--ink); }
.resume span{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }
.resume .btn{ flex:0 0 auto; }

/* ===== просмотр сброса: вкладки и фильтр по цвету ===== */
.dtabs{ display:flex; gap:6px; margin:6px 0 10px; }
.dtab{
  flex:1; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  padding:8px 10px; border-radius:10px; border:1px solid var(--line);
  background:#fffdf7; color:var(--ink-soft);
}
.dtab b{ font-weight:800; color:var(--muted); margin-left:4px; }
.dtab.on{ background:#eef7f5; border-color:#0f766e; color:var(--ink); }
.dchips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.dchip{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  font:inherit; font-size:11.5px; padding:4px 9px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--ink-soft);
}
.dchip i{ width:9px; height:9px; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.12); }
.dchip b{ font-weight:800; color:var(--ink); }
.dchip.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.dchip.on b{ color:#fff; }
.dnote{ font-size:11.5px; color:var(--muted); margin:0 0 8px; }
.drow .dthumb{ width:26px; height:36px; object-fit:cover; border-radius:4px; flex:0 0 auto; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.drow .dthumb.inf{ width:40px; height:28px; }
.dempty{ padding:18px 0; text-align:center; font-size:12px; color:var(--muted); font-style:italic; }

/* ===== анимации, одинаковые у всех игроков (state.fx → playFx) ===== */

/* летящая карта / кубик */
.fx-ghost{
  position:fixed; z-index:130; pointer-events:none;
  transform-origin:0 0; will-change:transform, opacity;
}
.fx-ghost img{ display:block; width:100%; height:100%; object-fit:cover; }
.fx-ghost.card img{ border-radius:7px; box-shadow:0 14px 34px rgba(8,26,45,.45); }
.fx-ghost.cube img{ object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.45)); }

/* карта, которая ещё летит в руку, в панели пока не видна */
.hand .hcard.incoming{ opacity:0 !important; }
.hand .hcard.landed{ animation:fxLanded .42s ease-out; }
@keyframes fxLanded{
  0%{ box-shadow:0 0 0 0 rgba(15,118,110,.7); }
  100%{ box-shadow:0 0 0 9px rgba(15,118,110,0); }
}

/* кубики вернулись в запас */
.cubechip.got{ animation:fxGot .52s ease-out; }
@keyframes fxGot{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.22); background:#e6f4ef; }
  100%{ transform:scale(1); }
}

/* плашка над картой: «Ход: Боб · Медик», «Эпидемия» */
.fx-banner{
  position:absolute; left:50%; top:16%; z-index:40; pointer-events:none;
  display:flex; align-items:center; gap:10px;
  padding:10px 18px 10px 10px; border-radius:999px;
  background:rgba(255,253,247,.96); color:var(--ink);
  border:2px solid var(--bc, #0f766e);
  box-shadow:0 14px 40px rgba(8,26,45,.32);
  font-size:15px; white-space:nowrap;
  opacity:0; transform:translate(-50%, -10px) scale(.96);
}
.fx-banner b{ font-weight:800; }
.fx-banner.on{ animation:fxBanner 1.6s cubic-bezier(.2,.8,.2,1) forwards; }
.fx-banner .fb-av{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; position:relative;
  color:#fff; font-size:12px; font-weight:800;
}
.fx-banner .fb-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fx-banner .fb-av b{ position:relative; z-index:1; }
.fx-banner .fb-ic{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bc); color:#fff; font-size:19px;
}
@keyframes fxBanner{
  0%{ opacity:0; transform:translate(-50%, -10px) scale(.96); }
  14%{ opacity:1; transform:translate(-50%, 0) scale(1); }
  80%{ opacity:1; transform:translate(-50%, 0) scale(1); }
  100%{ opacity:0; transform:translate(-50%, -6px) scale(.98); }
}

/* «уменьшить движение» в системе: без полётов и сдвигов, только появление */
@media (prefers-reduced-motion: reduce){
  .fx-banner.on{ animation:fxBannerStill 1.6s linear forwards; }
  .hand .hcard.landed, .cubechip.got{ animation:none; }
}
@keyframes fxBannerStill{
  0%{ opacity:0; transform:translate(-50%, 0); }
  10%, 85%{ opacity:1; transform:translate(-50%, 0); }
  100%{ opacity:0; transform:translate(-50%, 0); }
}

/* ===== кубики разных цветов в одном городе ===== */
.city-card .cc-dot{
  display:inline-block; width:9px; height:9px; border-radius:2px; margin:0 3px 0 6px;
  box-shadow:0 0 0 1px rgba(0,0,0,.15); vertical-align:middle;
}
.moveopt .treat-ico img{ width:26px; height:26px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }

/* ===== лимит руки: окно сброса с картинками карт ===== */
.ovf p{ font-size:13px; color:var(--ink-soft); }
.ovf-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:10px; margin-top:10px; max-height:62vh; overflow-y:auto; padding:2px;
}
.ovf-card{ display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.ovf-card img{
  width:100%; aspect-ratio:5 / 7; object-fit:cover; border-radius:8px;
  box-shadow:0 3px 10px rgba(8,26,45,.25);
}
.ovf-btns{ display:flex; flex-direction:column; gap:4px; }
.ovf-btns .btn{ width:100%; justify-content:center; }
.ovf-btns .btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* кнопка «Выйти» видна только в игре по ссылке */
#leaveBtn[hidden]{ display:none !important; }

/* кнопка звука в шапке */
.topbtns .soundbtn{ min-width:38px; padding-left:8px; padding-right:8px; font-size:15px; line-height:1; }

/* игрок вышел из игры по ссылке — за него ходят остальные */
.absent-tag.away{ background:#fff4e5; color:#9a5b00; border-color:#f2d3a2; }