/* ======================================================
   KTANE Web — styles
   Минимум классов, адаптив через grid + media-queries.
   ====================================================== */

:root {
  --bg: #15151a;
  --bg2: #1d1d24;
  --panel: #26262e;
  --panel2: #2f2f38;
  --text: #ebeaf2;
  --muted: #8e8e98;
  --accent: #ff6b35;
  --accent2: #ffb04a;
  --ok: #4ade80;
  --bad: #ef4444;
  --warn: #facc15;
  --border: #393944;
  --shadow: 0 6px 20px rgba(0,0,0,.45);
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: #0f0f15;
  color: var(--text);
  font-family: 'Segoe UI', system-ui, Roboto, Tahoma, sans-serif;
  font-size: 16px; line-height: 1.5;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 30% 0%, #1f1f29 0%, var(--bg) 60%);
}
h1, h2, h3, h4 { margin: 0 0 .4em 0; font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hint  { color: var(--muted); font-weight: normal; font-size: 12px; }
.err   { color: var(--bad); min-height: 1.2em; margin-top: .4em; }

/* ------ buttons ------ */
button {
  font: inherit; cursor: pointer; border: none; border-radius: 8px;
  padding: .7em 1.3em; color: #000; background: #ddd; font-weight: 600;
  transition: transform .05s, filter .15s;
}
button:hover:not(:disabled) { filter: brightness(1.1); }
button:active:not(:disabled) { transform: scale(.97); }
button:disabled { background: #444; color: #888; cursor: not-allowed; }
button.primary { background: var(--accent); color: #111; }
button.primary.big { padding: .95em 1.4em; font-size: 1.1em; width: 100%; }
button.ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border); padding: .55em 1em;
}
button.ghost:hover:not(:disabled) { background: var(--panel2); border-color: var(--accent); }
button.tiny {
  padding: .55em 1em; font-size: 15px;
  min-width: 38px; min-height: 38px;
}

/* ------ inputs ------ */
input, select {
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: .7em .85em; font: inherit; width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }

/* ------ layout helpers ------ */
.screen { display: none; }
.screen.active { display: block; }
.field { display: flex; flex-direction: column; gap: .3em; margin-bottom: .8em; }
.row { display: flex; gap: .5em; align-items: center; }
.row.gap > * + * { margin-left: 0; }
.hidden { display: none !important; }

/* =================== ANIMATED BACKGROUND =================== */
.bg-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .8s ease;
}
body.bg-ready.show-bg .bg-canvas { opacity: 1; }
/* экраны над фоном */
.screen { position: relative; z-index: 2; }

/* =================== PRELOADER =================== */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(circle at 50% 50%, #1f1f29 0%, #0d0d12 100%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .55s ease, visibility .55s ease;
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader-inner {
  display: flex; flex-direction: column; align-items: center; gap: 1.4em;
}
.preloader-bomb {
  width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4a55 0%, #1a1a22 70%);
  box-shadow: 0 0 0 3px #2a2a32, 0 0 24px rgba(255,107,53,.35);
  position: relative; animation: pre-bomb 1.2s ease-in-out infinite;
}
.preloader-fuse {
  position: absolute; top: -16px; left: 50%;
  width: 3px; height: 22px; background: #6b5a3a; transform: translateX(-50%);
  border-radius: 2px;
}
.preloader-spark {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--accent2) 40%, transparent 70%);
  box-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent2);
  animation: pre-spark .35s ease-in-out infinite alternate;
}
.preloader-text {
  display: flex; gap: .25em; font: 700 1.4em/1 'Segoe UI', sans-serif;
  letter-spacing: .25em; color: var(--accent);
}
.preloader-text span {
  display: inline-block; opacity: 0;
  animation: pre-letter 1.6s ease-in-out infinite;
  text-shadow: 0 0 12px rgba(255,107,53,.6);
}
.preloader-text span:nth-child(1){ animation-delay: 0s; }
.preloader-text span:nth-child(2){ animation-delay: .12s; }
.preloader-text span:nth-child(3){ animation-delay: .24s; }
.preloader-text span:nth-child(4){ animation-delay: .36s; }
.preloader-text span:nth-child(5){ animation-delay: .48s; }
.preloader-bar {
  width: 180px; height: 3px; border-radius: 99px;
  background: rgba(255,255,255,.08); overflow: hidden;
}
.preloader-bar i {
  display: block; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
  animation: pre-bar 1.2s linear infinite;
}
@keyframes pre-bomb {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.08); box-shadow: 0 0 0 3px #2a2a32, 0 0 36px rgba(255,107,53,.6); }
}
@keyframes pre-spark {
  from { transform: translateX(-50%) scale(.8); opacity: .8; }
  to   { transform: translateX(-50%) scale(1.4); opacity: 1; }
}
@keyframes pre-letter {
  0%, 60%, 100% { opacity: .2; transform: translateY(0); }
  20%, 40%      { opacity: 1; transform: translateY(-4px); }
}
@keyframes pre-bar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* =================== LOGIN =================== */
.auth-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 2em 1em; gap: 2em;
}
.auth-hero {
  text-align: center; max-width: 720px;
  animation: hero-in .9s cubic-bezier(.2,.8,.2,1) both;
}
.brand-big {
  margin: 0; font-weight: 800; line-height: .95;
  font-size: clamp(2.2em, 7vw, 4.4em);
  letter-spacing: .04em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: .05em;
}
.brand-big-row {
  background: linear-gradient(90deg, #fff 0%, var(--accent2) 25%, var(--accent) 50%, var(--accent2) 75%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 22px rgba(255,107,53,.35));
  animation: brand-shimmer 6s linear infinite;
}
.brand-big-row.sub {
  font-size: .82em; opacity: .92;
  animation: brand-shimmer 6s linear infinite reverse;
}
.brand-big-amp {
  font-size: .55em; font-weight: 400; color: var(--muted);
  letter-spacing: .2em;
  animation: brand-pulse 2.4s ease-in-out infinite;
}
@keyframes brand-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@keyframes brand-pulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.15); color: var(--accent2); }
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(-18px) scale(.96); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.tagline {
  color: var(--muted); margin: .8em 0 0; font-size: 1.05em;
}

/* ---- server status pill (floating) ---- */
.server-status {
  position: fixed; top: 12px; right: 12px; z-index: 50;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .35em .7em .35em .55em;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  background: rgba(20,20,26,.55);
  border: 1px solid rgba(255,255,255,.08); border-radius: 99px;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  color: var(--muted);
  transition: border-color .25s, color .25s, transform .2s, padding .25s, opacity .35s;
  cursor: pointer; user-select: none;
  animation: ss-in .7s cubic-bezier(.2,.8,.2,1) .2s both;
}
.server-status { line-height: 1.4; }
.server-status:hover { border-color: rgba(255,255,255,.18); }
.server-status .ss-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #888; position: relative; flex: none;
}
.server-status .ss-dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid currentColor; opacity: 0;
}
/* лейбл и пинг — одинаковая высота строки, чтобы не скакало */
.server-status .ss-label,
.server-status .ss-ping {
  font-size: 12px; line-height: 1.4;
  display: inline-flex; align-items: center;
  white-space: nowrap;
}
.server-status .ss-label {
  color: inherit; overflow: hidden;
  max-width: 9em; opacity: 1;
  transition: max-width .25s ease, opacity .2s ease, margin .25s ease;
}
.server-status .ss-ping {
  font-family: ui-monospace, 'Consolas', monospace;
  font-size: 11px; opacity: .9;
  margin-left: .5em; padding-left: .55em;
  border-left: 1px solid rgba(255,255,255,.12);
  transition: margin .25s ease, padding .25s ease, border-color .25s ease;
}
/* при онлайне сворачиваемся: лейбл схлопывается до 0, без изменения высоты */
.server-status[data-state="online"] .ss-label {
  max-width: 0; opacity: 0; margin: 0;
}
.server-status[data-state="online"] .ss-ping {
  margin-left: 0; padding-left: 0; border-left-color: transparent;
}
.server-status:hover[data-state="online"] .ss-label,
.server-status.expanded[data-state="online"] .ss-label {
  max-width: 9em; opacity: 1;
}
.server-status:hover[data-state="online"] .ss-ping,
.server-status.expanded[data-state="online"] .ss-ping {
  margin-left: .5em; padding-left: .55em; border-left-color: rgba(255,255,255,.12);
}

@keyframes ss-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
/* connecting */
.server-status[data-state="connecting"] { color: #c8a96a; border-color: rgba(250,204,21,.25); }
.server-status[data-state="connecting"] .ss-dot { background: var(--warn); animation: ss-pulse 1.1s ease-in-out infinite; }
/* online */
.server-status[data-state="online"] { color: #7be3a4; border-color: rgba(74,222,128,.3); }
.server-status[data-state="online"] .ss-dot { background: var(--ok); animation: ss-glow 2.4s ease-in-out infinite; }
/* offline */
.server-status[data-state="offline"] { color: #f08a8a; border-color: rgba(239,68,68,.35); }
.server-status[data-state="offline"] .ss-dot { background: var(--bad); }
.server-status[data-state="offline"] .ss-dot::after { opacity: .6; animation: ss-ring 1.2s ease-out infinite; }
/* ping color tiers via attribute on the badge itself */
.server-status[data-ping="good"] .ss-ping { color: var(--ok); }
.server-status[data-ping="ok"]   .ss-ping { color: var(--warn); }
.server-status[data-ping="bad"]  .ss-ping { color: var(--bad); }

/* ===== Mobile: тап → fullscreen overlay со статусом ===== */
@media (max-width: 700px) {
  /* В обычном виде на мобилке только иконка-точка */
  .server-status:not(.expanded) {
    padding: .55em;
    width: 38px; height: 38px;
    justify-content: center;
  }
  .server-status:not(.expanded) .ss-dot { width: 12px; height: 12px; }
  .server-status:not(.expanded) .ss-label,
  .server-status:not(.expanded) .ss-ping { display: none; }

  /* Развёрнутый fullscreen overlay */
  .server-status.expanded {
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    border-radius: 0; border-color: transparent;
    padding: 2em;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 1.4em;
    background: rgba(13,13,18,.95);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    z-index: 9000;
    font-size: 16px;
    animation: ss-overlay-in .35s cubic-bezier(.2,.8,.2,1) both;
  }
  .server-status.expanded .ss-dot {
    width: 84px; height: 84px;
    box-shadow: 0 0 40px currentColor, 0 0 0 6px rgba(255,255,255,.04);
  }
  .server-status.expanded .ss-dot::after { inset: -16px; border-width: 3px; }
  .server-status.expanded .ss-label {
    display: inline-flex; max-width: none; opacity: 1;
    font-size: 1.5em; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase;
  }
  .server-status.expanded .ss-ping {
    display: inline-flex; opacity: 1;
    font-size: 1.4em;
    margin: 0; padding: .4em .9em;
    border: 1px solid rgba(255,255,255,.12); border-left-width: 1px; border-radius: 99px;
    background: rgba(255,255,255,.04);
  }
  .server-status.expanded::after {
    content: 'Нажмите чтобы закрыть';
    position: absolute; bottom: 2em; left: 0; right: 0;
    text-align: center; font-size: 12px; font-weight: 500;
    color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
    opacity: .7;
  }
}
@keyframes ss-overlay-in {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; }
}

@keyframes ss-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(.6); opacity: .5; }
}
@keyframes ss-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); }
  50%     { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
}
@keyframes ss-ring {
  from { transform: scale(.6); opacity: .8; }
  to   { transform: scale(1.6); opacity: 0; }
}

.auth-card {
  position: relative;
  background: linear-gradient(180deg, rgba(38,38,46,.92), rgba(28,28,36,.92));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,107,53,.05) inset;
  padding: 1.8em; width: 100%; max-width: 460px;
  animation: card-in 1s cubic-bezier(.2,.8,.2,1) .15s both;
}
.auth-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,107,53,.6), transparent 40%, transparent 60%, rgba(255,176,74,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .5;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ---- floating-label inputs ---- */
.field.floating {
  position: relative; margin-bottom: 1em;
}
.field.floating > input {
  width: 100%; padding: 1.25em .9em .5em;
  background: rgba(20,20,26,.6);
  border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font: inherit;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field.floating > input:hover { border-color: #5a5a68; }
.field.floating > input:focus {
  outline: none; border-color: var(--accent);
  background: rgba(20,20,26,.85);
  box-shadow: 0 0 0 3px rgba(255,107,53,.18), 0 0 22px rgba(255,107,53,.18);
}
.field.floating > label {
  position: absolute; left: .95em; top: .95em;
  color: var(--muted); pointer-events: none;
  transition: transform .18s ease, color .18s ease, font-size .18s ease;
  transform-origin: left top;
}
.field.floating > input:focus + label,
.field.floating > input:not(:placeholder-shown) + label {
  transform: translateY(-.55em) scale(.78);
  color: var(--accent);
}

/* ---- tabs with sliding indicator ---- */
.tabs {
  position: relative; display: flex; gap: 0;
  margin: 1.2em 0 1em; border-bottom: 1px solid var(--border);
}
.tab {
  flex: 1; background: transparent; color: var(--muted);
  padding: .7em 1em; border-radius: 0; border-bottom: none;
  font-weight: 600; transition: color .2s ease, transform .15s ease;
}
.tab:hover:not(.active) { color: var(--text); transform: translateY(-1px); }
.tab.active { color: var(--accent); }
.tab-indicator {
  position: absolute; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 2px;
  transition: left .35s cubic-bezier(.4,1.2,.4,1), width .35s cubic-bezier(.4,1.2,.4,1);
  box-shadow: 0 0 12px var(--accent);
  left: 0; width: 50%;
}

/* ---- shine button ---- */
button.shine {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #1a0f08; font-weight: 700; letter-spacing: .03em;
  box-shadow: 0 8px 22px rgba(255,107,53,.35);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
button.shine:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255,107,53,.5);
  filter: brightness(1.05);
}
button.shine:active:not(:disabled) { transform: translateY(0); }
button.shine::after {
  content: ''; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left .55s ease;
}
button.shine:hover:not(:disabled)::after { left: 130%; }

/* Список активных лобби на вкладке «Войти» */
.lobbies-box {
  margin-top: 1.2em; padding-top: 1em;
  border-top: 1px solid var(--border);
}
.lobbies-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .5em; font-weight: 600; color: var(--muted);
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
}
.lobbies-list {
  display: flex; flex-direction: column; gap: .35em;
  max-height: 260px; overflow-y: auto;
}
.lobby-row {
  display: flex; align-items: center; gap: .8em; padding: .7em .9em;
  background: rgba(47,47,56,.7); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font-weight: normal; text-align: left; cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
}
.lobby-row:hover {
  border-color: var(--accent); background: rgba(52,52,60,.95);
  transform: translateX(3px);
}
.lobby-code {
  font: 700 1.2em monospace; color: var(--accent);
  letter-spacing: .1em; min-width: 4em;
}
.lobby-info {
  display: flex; flex-direction: column; flex: 1; gap: 2px;
  font-size: 13px; min-width: 0;
}
.lobby-host { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-meta { color: var(--muted); font-size: 12px; }

.tab-body { animation: tab-in .35s ease both; }
@keyframes tab-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* =================== LOBBY =================== */
.lobby-wrap { max-width: 1100px; margin: 0 auto; padding: 1.5em 1em; }
.lobby-head {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .8em; margin-bottom: 1em;
}
.lobby-head h2 { font-size: 1.8em; color: var(--accent); margin: 0; }
.lobby-meta { display: flex; gap: .6em; align-items: center; }

.lobby-grid {
  display: grid; gap: 1em;
  grid-template-columns: 1fr 1fr;
}
.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.6em; box-shadow: var(--shadow);
}

.players { list-style: none; padding: 0; margin: .6em 0; display: flex; flex-direction: column; gap: .35em; }
.player-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
  padding: .5em .7em;
  flex-wrap: wrap; gap: .4em;
}
.player-name { font-weight: 500; }
.host-tag { color: var(--warn); font-size: 12px; }
.player-role { display: flex; gap: .4em; align-items: center; }
.role-select { padding: .25em .5em; font-size: 12px; min-width: 130px; width: auto; }

.pool-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .72);
  display: flex; align-items: center; justify-content: center;
  z-index: 75; padding: 1em;
  animation: fadeIn .15s ease-out;
}
.pool-modal.hidden { display: none; }
.pool-modal-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  width: 96vw; max-width: 980px;
  height: 86vh; max-height: 86vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pool-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1em 1.5em; gap: 1em; flex-wrap: wrap;
  background: var(--panel2); border-bottom: 1px solid var(--border);
}
.pool-modal-head h3 { margin: 0; color: var(--accent); }

.pool-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .6em;
  flex: 1; overflow-y: auto;
  padding: 1em 1.5em;
}
.pool-item {
  display: grid; grid-template-columns: 18px 1fr; gap: .5em;
  padding: .5em; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; align-items: start;
  transition: background .1s;
}
.pool-item:hover { background: #36363f; }
.pool-item input { margin-top: 2px; }
.pool-name { font-weight: 600; }
.pool-desc { color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: .2em; }
.pool-item input:disabled + .pool-text { opacity: .65; }

.badge {
  display: inline-block; padding: .15em .55em; border-radius: 99px;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
}
.badge.defuser  { background: rgba(255,107,53,.18); color: var(--accent); }
.badge.manual   { background: rgba(74,222,128,.18); color: var(--ok); }
.badge.observer { background: rgba(142,142,152,.2); color: var(--muted); }
.role-legend { margin: .8em 0 0 0; line-height: 1.7; }

/* =================== GAME =================== */
#screen-game.active {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "top"
    "main";
  min-height: 100vh;
}
.top {
  grid-area: top;
  display: flex; justify-content: space-between; align-items: center;
  padding: .8em 1.2em; gap: 1em; flex-wrap: wrap;
  background: var(--panel); border-bottom: 1px solid var(--border);
}
.bomb-info { display: flex; flex-wrap: wrap; gap: 1.2em; font-size: 15px; }
.info-item { white-space: nowrap; }
.info-item b { color: var(--accent2); font-size: 1.05em; }
.status { display: flex; gap: 1em; align-items: center; }
.role-pill {
  padding: .35em 1em; border-radius: 99px; font-weight: 600; font-size: 13px;
  background: var(--panel2);
}
.role-pill.defuser  { background: rgba(255,107,53,.2); color: var(--accent); }
.role-pill.manual   { background: rgba(74,222,128,.2); color: var(--ok); }
.role-pill.observer { background: rgba(142,142,152,.25); color: var(--muted); }
.timer {
  font: 700 2em/1 'Courier New', monospace; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.strikes { font-size: 1.5em; color: var(--bad); letter-spacing: .15em; }

#game-main { grid-area: main; overflow: auto; padding: 1em; padding-bottom: 80px; }
.game-area { display: none; }
.game-area.active { display: block; }

/* ---------- chat: floating panel ---------- */
.chat {
  position: fixed;
  right: 16px; bottom: 16px;
  width: 340px; max-width: calc(100vw - 32px);
  height: 420px; max-height: 65vh;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 50;
  display: flex; flex-direction: column;
  transition: width .2s, height .2s, border-radius .2s;
}
.chat-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5em .7em; gap: .5em;
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer; user-select: none;
}
.chat-head h4 { margin: 0; flex: 1; }
.chat-body {
  flex: 1; display: flex; flex-direction: column; gap: .4em;
  padding: .5em; overflow: hidden;
}
#chat-log {
  flex: 1; overflow-y: auto; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px; padding: .5em; font-size: 13px; min-height: 100px;
}
.chat-msg { margin-bottom: .3em; word-wrap: break-word; }
.chat-msg .who { font-weight: 600; color: var(--accent); }
.chat .row { gap: .4em; }
.chat .row input { flex: 1; min-width: 0; }
.chat-badge {
  background: var(--bad); color: #fff; border-radius: 999px;
  padding: .05em .5em; font-size: 11px; font-weight: 700;
  min-width: 20px; text-align: center;
}

/* Collapsed mode: 56-px circular FAB in the corner */
.chat.collapsed {
  width: 56px; height: 56px; padding: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.55);
}
.chat.collapsed .chat-head {
  background: var(--accent);
  color: #111; padding: 0;
  width: 56px; height: 56px; border-radius: 50%;
  justify-content: center; border: none;
}
.chat.collapsed .chat-head h4 { display: none; }
.chat.collapsed .chat-body { display: none; }
.chat.collapsed #btn-chat-toggle {
  font-size: 22px; background: transparent !important; border: none; color: #111;
  width: 100%; height: 100%; padding: 0;
}
.chat.collapsed .chat-badge {
  position: absolute; top: -4px; right: -4px;
  border: 2px solid var(--panel);
}

/* ---------- slot tiles (compact grid) ---------- */
.slots {
  display: grid; gap: .9em;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.slot-tile {
  background: var(--panel); border: 2px solid var(--border); border-radius: var(--radius);
  padding: 1.1em 1.3em; cursor: pointer;
  display: flex; align-items: center; gap: .8em;
  transition: transform .08s, border-color .15s, background .15s;
  user-select: none;
  box-shadow: var(--shadow);
  min-height: 64px;
}
.slot-tile:hover:not(.readonly):not(.solved) {
  border-color: var(--accent); background: var(--panel2);
  transform: translateY(-2px);
}
.slot-tile.solved {
  border-color: var(--ok); opacity: .7;
}
.slot-tile.readonly { cursor: default; }
.slot-tile .led { width: 14px; height: 14px; border-radius: 50%; background: #555; flex-shrink: 0; }
.slot-tile.solved .led { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.slot-tile .slot-name { flex: 1; font-weight: 600; font-size: 16px; }
.slot-tile .tile-status {
  color: var(--accent); font-weight: 700; font-size: 22px;
}
.slot-tile.solved .tile-status { color: var(--ok); }

/* ---------- puzzle modal (defuser focus / observer mirror) ---------- */
.puzzle-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .72);
  display: flex; align-items: center; justify-content: center;
  z-index: 70; padding: 1em;
  animation: fadeIn .15s ease-out;
}
.puzzle-modal.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.puzzle-modal-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  max-width: 95vw; max-height: 95vh;
  width: 560px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Режим «обзёрвер с описанием»: на весь экран. */
.puzzle-modal-card.with-desc {
  width: 96vw; max-width: none;
  height: 94vh; max-height: 94vh;
}
.puzzle-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1em 1.3em; border-bottom: 1px solid var(--border);
  background: var(--panel2); flex-wrap: wrap; gap: .7em;
}
.puzzle-modal-title {
  display: flex; align-items: center; gap: .8em;
  font-weight: 700; font-size: 1.25em;
}
.puzzle-modal-title .led { width: 12px; height: 12px; border-radius: 50%; background: #555; }
.puzzle-modal-title .led.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.puzzle-modal-title .solved-tag { color: var(--ok); font-size: 14px; }
.puzzle-modal-meta { display: flex; align-items: center; gap: 1em; }
.timer-mini {
  font-family: 'Courier New', monospace; color: var(--accent); font-weight: 700;
  font-variant-numeric: tabular-nums; font-size: 1.2em;
}
.strikes-mini { color: var(--bad); letter-spacing: .18em; font-size: 1.2em; }
#btn-modal-close { font-size: 1.2em; padding: .35em .7em; }
.puzzle-modal-body {
  display: flex; gap: 0;
  flex: 1; min-height: 0; overflow: hidden;
}
.puzzle-modal-puzzle {
  flex: 1; padding: 1.6em; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px; overflow: auto;
}
/* В режиме «с описанием»: левая колонка ровно под нужды пазла, правая — остаток */
.puzzle-modal-card.with-desc .puzzle-modal-puzzle {
  flex: 0 0 540px;
  max-width: 50%;
  border-right: 1px solid var(--border);
}
.puzzle-modal-desc {
  width: 360px; flex-shrink: 0;
  padding: 1.4em 1.6em; background: var(--bg2);
  border-left: 1px solid var(--border);
  font-size: 14px; line-height: 1.55;
  overflow-y: auto;
}
/* В fullscreen-режиме описание тянется на оставшееся место */
.puzzle-modal-card.with-desc .puzzle-modal-desc {
  width: auto; flex: 1 1 auto;
  border-left: none;
}
.puzzle-modal-desc.hidden { display: none; }
.puzzle-modal-desc h4 {
  color: var(--accent); margin: 0 0 .8em 0;
  font-size: 1.2em;
}
.puzzle-modal-desc .modal-desc-short {
  color: var(--accent2); font-style: italic; font-size: .95em;
  margin: 0 0 1em 0; padding-bottom: .8em;
  border-bottom: 1px solid var(--border);
}
.puzzle-modal-desc .modal-desc-body { font-size: 14px; line-height: 1.55; }
.puzzle-modal-desc .modal-desc-body h3 { color: var(--accent); margin-top: 0; }
.puzzle-modal-desc .modal-desc-body h4 { color: var(--accent2); margin-top: 1em; }
.puzzle-modal-desc .modal-desc-body table { border-collapse: collapse; margin: .5em 0; }
.puzzle-modal-desc .modal-desc-body th,
.puzzle-modal-desc .modal-desc-body td { border: 1px solid var(--border); padding: .3em .6em; }
.puzzle-modal-desc .modal-desc-body .kp-cols {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5em;
}
.puzzle-modal-desc .modal-desc-body .kp-glyphs { font-size: 1.2em; letter-spacing: .12em; }
/* На очень широких экранах ограничим читаемую колонку — глаз устанет на 2000px */
.puzzle-modal-card.with-desc .puzzle-modal-desc {
  padding: 1.8em 2.4em;
}
.puzzle-modal-card.with-desc .puzzle-modal-desc > * {
  max-width: 1100px;
}

@media (max-width: 720px) {
  .puzzle-modal-card.with-desc { width: 96vw; height: 94vh; }
  .puzzle-modal-body { flex-direction: column; }
  .puzzle-modal-card.with-desc .puzzle-modal-puzzle {
    flex: 0 0 auto; width: 100%; max-width: 100%;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .puzzle-modal-card.with-desc .puzzle-modal-desc {
    width: 100%; padding: 1em 1.4em;
  }
  .puzzle-modal-desc { width: 100%; border-left: none; }
  .puzzle-modal-puzzle { padding: .8em; }
}
@media (max-width: 400px) {
  .puzzle-modal { padding: .3em; }
  .puzzle-modal-head { padding: .5em; }
  .puzzle-modal-puzzle { padding: .5em; }
}

/* ---------- settings toggle ---------- */
.setting-toggle {
  display: flex; align-items: center; gap: .5em;
  cursor: pointer; padding: .3em 0;
}
.setting-toggle input { width: auto; }

/* =================== PUZZLE: wires =================== */
.wires { display: flex; flex-direction: column; gap: 8px; padding: .3em 0; }
.wire {
  display: grid; grid-template-columns: 28px 1fr 80px;
  align-items: center; gap: .6em; cursor: pointer;
  padding: .4em; border: 1px solid transparent; border-radius: 6px;
  background: var(--bg2);
}
.wire:hover:not(.cut) { border-color: var(--accent); background: var(--panel2); }
.wire-num {
  font-family: monospace; font-size: 16px; font-weight: 700;
  color: var(--accent); text-align: center;
}
.wire-line {
  height: 10px; border-radius: 5px;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.4);
}
.wire-label {
  color: #fff; font-weight: 600; font-size: 14px;
  text-transform: lowercase;
}
.wire.cut .wire-line { background: #333 !important; opacity: .4; }
.wire.cut { cursor: default; opacity: .55; }
.wire.cut .wire-label::before { content: "✂ "; color: var(--bad); }
.wire-c-red    { background: #e63946; }
.wire-c-blue   { background: #4361ee; }
.wire-c-yellow { background: #fcbf49; }
.wire-c-white  { background: #f1faee; }
.wire-c-black  { background: #1d1d24; border: 1px solid #555; }
.wire-c-green  { background: #22c55e; }

/* =================== PUZZLE: button =================== */
.btn-puzzle { display: flex; flex-direction: column; align-items: center; gap: .6em; padding: .5em 0; }
.big-btn {
  width: 170px; height: 170px; border-radius: 50%; border: 8px solid #111;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; cursor: pointer; user-select: none;
  font-size: 1.35em; letter-spacing: .04em;
  box-shadow: 0 6px 14px rgba(0,0,0,.5), inset 0 -4px 8px rgba(0,0,0,.3);
}
.big-btn.bc-red    { background: #cf2a2a; }
.big-btn.bc-blue   { background: #1e40af; }
.big-btn.bc-yellow { background: #eab308; color: #222; }
.big-btn.bc-white  { background: #f5f5f5; color: #222; }
.big-btn.bc-green  { background: #16a34a; }
.big-btn:active { transform: scale(.96); }
.strip {
  width: 110px; height: 16px; border-radius: 4px; margin-top: .3em;
  border: 1px solid #000;
}
.strip.sc-blue   { background: #4361ee; }
.strip.sc-white  { background: #f1faee; }
.strip.sc-yellow { background: #fcbf49; }
.strip.sc-red    { background: #e63946; }
.strip.sc-green  { background: #22c55e; }
.btn-help { text-align: center; }

/* =================== PUZZLE: keypad =================== */
.keypad { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; padding: .3em;
  width: 100%; max-width: 360px; }
.key {
  background: #3a3a44; border: 3px solid #555; border-radius: 8px;
  min-height: 90px; font-size: 2.4em;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff;
}
.key:hover { border-color: var(--accent); }
.key.pressed { background: var(--ok); border-color: var(--ok); cursor: default; color: #111; }

/* =================== PUZZLE: simon =================== */
.simon-wrap { display: flex; flex-direction: column; align-items: center; gap: .5em; }
.simon-info { font-size: 12px; color: var(--muted); text-align: center; }
.simon {
  display: grid; grid-template-columns: 1fr 1fr; gap: .7em;
  width: 250px; padding: .3em;
}
.simon-btn {
  width: 110px; height: 110px; border-radius: 50%; cursor: pointer; opacity: .55;
  border: 4px solid #111;
  transition: opacity .15s, box-shadow .15s;
}
.simon-btn.flash { opacity: 1; box-shadow: 0 0 22px #fff; }
.simon-btn:active { transform: scale(.95); }
.sc-red    { background: #e63946; }
.sc-blue   { background: #4361ee; }
.sc-green  { background: #22c55e; }
.sc-yellow { background: #facc15; }

/* =================== PUZZLE: memory =================== */
.memory { display: flex; flex-direction: column; gap: .8em; align-items: center; width: 100%; max-width: 400px; }
.mem-info { color: var(--muted); font-size: 13px; }
.mem-display {
  font: 700 3.5em/1 'Courier New', monospace;
  background: #000; color: var(--accent);
  border: 3px solid #333; border-radius: 8px;
  padding: .2em .6em; min-width: 130px; text-align: center;
}
.mem-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; width: 100%; }
.mem-btn { background: var(--panel2); color: var(--text); font-size: 1.7em; padding: .7em 0; min-height: 70px; }
.mem-btn:hover:not(:disabled) { background: var(--accent); color: #111; }
.mem-history { text-align: center; }

/* =================== PUZZLE: morse =================== */
.morse { display: flex; flex-direction: column; gap: .8em; align-items: center; }
.morse-led-row { display: flex; gap: 1em; align-items: center; }
.morse-led {
  width: 110px; height: 40px; background: #200; border: 3px solid #500;
  border-radius: 10px; transition: background .05s, box-shadow .05s;
}
.morse-led.on { background: #ff5500; box-shadow: 0 0 22px #ff5500; }
.morse-play {
  padding: .7em 1.2em; font-size: 1.05em; font-weight: 600;
}
.morse-code {
  font-family: monospace; color: var(--accent2); font-size: 20px;
  letter-spacing: .25em; font-weight: 700;
  background: var(--bg2); padding: .3em .7em; border-radius: 6px;
  border: 1px solid var(--border);
}
.morse-freq { display: flex; gap: .6em; align-items: center; }
.morse-freq-disp {
  background: #000; color: var(--accent); font-family: monospace; font-size: 1.2em;
  padding: .4em .9em; border-radius: 6px; min-width: 140px; text-align: center;
  border: 1px solid #333;
}

/* =================== PUZZLE: password =================== */
.password { display: flex; flex-direction: column; gap: .6em; align-items: center; }
.pw-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: .25em; width: 100%; }
.pw-col { display: flex; flex-direction: column; gap: .25em; align-items: center; }
.pw-letter {
  background: #000; color: var(--accent2); font-family: monospace;
  width: 100%; text-align: center; padding: .4em 0; font-size: 1.6em;
  border-radius: 4px; border: 1px solid #333;
}
.pw-list { font-family: monospace; font-size: 12px; line-height: 1.6; }

/* =================== PUZZLE: who on first =================== */
.wof { display: flex; flex-direction: column; gap: .5em; align-items: center; }
.wof-stage { width: 100%; text-align: center; }
.wof-disp {
  font-family: monospace; font-size: 1.4em; background: #000; color: var(--accent2);
  padding: .3em .8em; border-radius: 4px; border: 1px solid #333;
  min-width: 140px; text-align: center;
}
.wof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3em; width: 100%; }
.wof-btn {
  background: var(--panel2); color: var(--text); padding: .6em 0;
  font-size: 12px; font-weight: 500;
}
.wof-btn:hover:not(:disabled) { background: var(--accent); color: #111; }
.wof-lists { font-size: 12px; }
.wof-list { margin-bottom: .3em; }
.wof-tbl { width: 100%; font-size: 12px; }

/* =================== PUZZLE: maze =================== */
.maze-wrap { display: flex; flex-direction: column; align-items: center; gap: .5em; }
.maze-grid {
  display: grid; grid-template-columns: repeat(6, 28px); grid-template-rows: repeat(6, 28px);
  gap: 1px; background: #000; padding: 4px; border-radius: 4px;
}
.maze-cell { background: #222; border: 1px solid #333; position: relative; }
.maze-cell.marker::after {
  content: ''; position: absolute; inset: 30% 30%; background: var(--ok);
  border-radius: 50%;
}
.maze-cell.me { background: #fff; }
.maze-cell.end { background: var(--bad); }
.maze-ctrl { display: grid; grid-template-columns: 36px 36px 36px; grid-template-rows: 36px 36px 36px; gap: .2em; }
.maze-ctrl button { width: 36px; height: 36px; padding: 0; }
.maze-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6em; }
.maze-card { background: var(--bg2); padding: .6em; border-radius: 6px; }
.maze-no { font-size: 11px; color: var(--muted); margin-bottom: .3em; }

/* =================== PUZZLE: complicated wires =================== */
.cwires { display: flex; flex-direction: column; gap: .35em; }
.cwire {
  display: flex; align-items: center; gap: .4em;
  padding: .3em; border: 1px solid var(--border); border-radius: 4px;
}
.cwire.done { opacity: .55; }
.cwire-led {
  width: 12px; height: 12px; border-radius: 50%; background: #333;
  border: 1px solid #555;
}
.cwire-led.on { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.cwire-line {
  flex: 1; height: 8px; border-radius: 3px;
}
.cwire-c-none    { background: #cccccc; }
.cwire-c-red     { background: #e63946; }
.cwire-c-blue    { background: #4361ee; }
.cwire-c-redblue { background: linear-gradient(90deg, #e63946 50%, #4361ee 50%); }
.cwire-star { color: var(--warn); width: 16px; text-align: center; font-size: 13px; }
.cw-tbl { width: 100%; font-size: 12px; }

/* =================== NEW PUZZLES (simple + medium) =================== */

/* Combination Lock */
.comblock { display: flex; flex-direction: column; align-items: center; gap: .9em; }
.comblock-row { display: flex; gap: 1em; }
.comblock-col { display: flex; flex-direction: column; gap: .4em; align-items: center; }
.comblock-disp {
  background: #000; color: var(--accent2); font: 700 2.4em monospace;
  width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 2px solid #444;
}

/* Anagrams */
.anagrams { display: flex; flex-direction: column; gap: .7em; align-items: center; width: 100%; max-width: 400px; }
.anag-built {
  font: 700 2.4em monospace; background: var(--bg2); border: 2px solid var(--border);
  padding: .35em 1em; border-radius: 8px; min-width: 290px;
  letter-spacing: .35em; text-align: center;
  color: var(--accent2); min-height: 70px;
  display: flex; align-items: center; justify-content: center;
}
.anag-letters { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4em; width: 100%; }
.anag-letter {
  background: var(--panel2); color: var(--text); padding: 1.1em 0; min-height: 72px;
  font: 700 1.9em monospace; border-radius: 8px;
}
.anag-letter.used { opacity: .35; background: var(--ok); color: #111; }

/* Switches */
.switches { display: flex; flex-direction: column; gap: .5em; align-items: center; }
.switch-row { display: flex; gap: .4em; }
.switch {
  width: 44px; height: 60px; background: var(--panel2); color: var(--text);
  border: 2px solid var(--border); border-radius: 6px; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.switch.on { background: var(--accent); color: #111; }
.switch-row.target .switch { width: 30px; height: 24px; font-size: 14px; border-width: 1px; }

/* Letter Keys */
.letter-keys {
  display: grid; grid-template-columns: 1fr 1fr; gap: .7em;
  width: 100%; max-width: 320px;
}
.letter-key {
  background: var(--panel2); color: var(--text); border: 3px solid var(--border);
  padding: 1.2em 0; min-height: 110px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25em; border-radius: 10px;
}
.letter-key:hover:not(:disabled) {
  background: var(--accent); color: #111; border-color: var(--accent);
  transform: translateY(-1px);
}
.lk-label { font-weight: 800; font-size: 2.4em; color: var(--accent2); line-height: 1; }
.letter-key:hover:not(:disabled) .lk-label { color: #111; }
.lk-num { font-family: monospace; font-size: 1.3em; font-weight: 600; }

/* Round Keypad */
.round-keypad { display: flex; justify-content: center; padding: 1em 0; }
.ring { position: relative; width: 180px; height: 180px; }
.ring-key {
  position: absolute; top: 50%; left: 50%; width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  background: var(--panel2); border: 2px solid var(--border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.2em; color: var(--text);
}
.ring-key:hover { border-color: var(--accent); }
.ring-key.pressed { background: var(--ok); border-color: var(--ok); color: #111; }

/* Square Button */
.sq-btn {
  width: 130px; height: 130px; border-radius: 8px; border: 6px solid #111;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  color: #fff; font-size: 1.2em;
}
.sq-btn.bc-red    { background: #cf2a2a; }
.sq-btn.bc-blue   { background: #1e40af; }
.sq-btn.bc-yellow { background: #eab308; color: #222; }
.sq-btn.bc-white  { background: #f5f5f5; color: #222; }
.sq-btn.bc-green  { background: #16a34a; }
.sq-btn.bc-black  { background: #1d1d24; }

/* Light Cycle */
.light-cycle { display: flex; flex-direction: column; align-items: center; gap: .5em; }
.lc-strip { display: flex; gap: .25em; }
.lc-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #444; opacity: .5; }
.lc-dot.done { opacity: 1; border-color: var(--ok); }
.lc-dot.next { opacity: 1; border-color: var(--accent); box-shadow: 0 0 6px var(--accent); }
.lc-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3em; }
.lc-btn {
  width: 38px; height: 38px; border-radius: 6px; border: 2px solid #111; cursor: pointer;
  padding: 0;
}
.sc-red { background: #e63946; } .sc-blue { background: #4361ee; }
.sc-green { background: #22c55e; } .sc-yellow { background: #facc15; }
.sc-cyan { background: #06b6d4; } .sc-magenta { background: #d946ef; }
.sc-white { background: #f1faee; } .sc-black { background: #111; }

/* Number Pad */
.number-pad { display: flex; flex-direction: column; gap: .6em; align-items: center; }
.np-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.np-btn {
  width: 60px; height: 60px; background: var(--panel2); color: var(--text);
  font: 700 1.6em monospace; border: 3px solid var(--border);
}
.np-btn.pressed { background: var(--ok); color: #111; border-color: var(--ok); }

/* Tic Tac Toe */
.ttt { display: flex; flex-direction: column; align-items: center; gap: .7em; }
.ttt-grid {
  display: grid; grid-template-columns: repeat(3, 70px);
  grid-template-rows: repeat(3, 70px); gap: 3px; background: #000;
  padding: 3px; border-radius: 6px;
}
.ttt-cell {
  background: var(--panel2); color: var(--accent2); font: 700 2.6em monospace;
  display: flex; align-items: center; justify-content: center; border: none;
}
.ttt-cell:hover:not(:disabled) { background: var(--accent); color: #111; }

/* Bitmaps */
.bitmaps { display: flex; flex-direction: column; align-items: center; gap: .5em; }
.bm-grid {
  display: grid; grid-template-columns: repeat(8, 18px);
  grid-template-rows: repeat(8, 18px);
  gap: 1px; background: #555; padding: 2px;
}
.bm-cell { background: #111; }
.bm-cell.on { background: #f5f5f5; }
.bm-quads { display: grid; grid-template-columns: 1fr 1fr; gap: .3em; width: 100%; }

/* Mouse Maze */
.mouse-maze { display: flex; flex-direction: column; align-items: center; gap: .5em; }
.mouse-grid {
  display: grid; grid-template-columns: repeat(6, 26px);
  grid-template-rows: repeat(6, 26px); gap: 1px; background: #444; padding: 2px;
}
.mouse-cell { background: #1a1a1f; position: relative; }
.mouse-cell.shroom::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; background: currentColor;
}
.mouse-cell.shroom.sc-red    { color: #e63946; }
.mouse-cell.shroom.sc-green  { color: #22c55e; }
.mouse-cell.shroom.sc-blue   { color: #4361ee; }
.mouse-cell.shroom.sc-yellow { color: #facc15; }
.mouse-cell.mouse::before {
  content: '🐁'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 14px; z-index: 1;
}

/* Chess */
.chess { display: flex; flex-direction: column; align-items: center; }
.chess-board {
  display: grid; grid-template-columns: repeat(8, 32px);
  grid-template-rows: repeat(8, 32px);
}
.chess-cell {
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; cursor: pointer; user-select: none;
}
.chess-cell.light { background: #c8b88a; }
.chess-cell.dark  { background: #6f4e37; }
.chess-cell:hover:not(:has(text)) { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Caesar */
.caesar { display: flex; flex-direction: column; align-items: center; gap: .8em; width: 100%; }
.caesar-enc-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.caesar-enc {
  background: #000; color: var(--accent); font: 700 1.7em monospace;
  padding: .4em .7em; border-radius: 6px; letter-spacing: .35em;
  border: 1px solid #333; display: flex; gap: .35em;
}
.caesar-enc-idx {
  display: flex; gap: .35em; padding: 0 .7em;
  font: 700 13px monospace; color: var(--accent2);
}
.caesar-enc-idx span,
.caesar-enc span {
  width: 1.2em; text-align: center; display: inline-block;
}
.caesar-letters { display: flex; gap: .4em; }
.caesar-col { display: flex; flex-direction: column; gap: .3em; align-items: center; }
.caesar-letter {
  background: var(--bg2); color: var(--accent2); font: 700 1.4em monospace;
  width: 48px; height: 56px; padding: 4px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid #333;
}
.caesar-letter-ch { line-height: 1; }
.caesar-letter-idx { font-size: 13px; color: var(--accent2); margin-top: 3px; line-height: 1; font-weight: 600; }

/* Алфавитная шпаргалка под колёсами */
.caesar-alpha {
  display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px;
  margin-top: .4em; padding: .4em; background: var(--bg2);
  border-radius: 6px; border: 1px solid var(--border); width: 100%; max-width: 480px;
}
.caesar-alpha-cell {
  display: flex; flex-direction: column; align-items: center; padding: 2px 0;
  font-family: monospace;
}
.caesar-alpha-ch { font-weight: 700; font-size: 15px; line-height: 1; }
.caesar-alpha-idx { font-size: 11px; color: var(--accent2); line-height: 1; margin-top: 3px; font-weight: 600; }

/* Алфавитная таблица в мануале */
.alphabet-tbl {
  border-collapse: collapse; margin: .5em 0;
}
.alphabet-tbl td {
  border: 1px solid var(--border); padding: .25em .4em;
  text-align: center; font-family: monospace; min-width: 28px;
}
.alphabet-tbl tr:first-child td { background: var(--bg2); }
.alphabet-tbl tr:first-child td b { color: var(--accent2); }

/* Resistors */
.resistors { display: flex; flex-direction: column; gap: .8em; align-items: center; }
.resistor-wrap { display: flex; align-items: center; gap: .5em; }
.resistor {
  display: flex; gap: 2px; background: #d4a574; padding: 4px;
  border-radius: 4px; min-width: 100px; height: 28px; align-items: center;
}
.rband { width: 8px; height: 22px; display: inline-block; }
.rb-black   { background: #111; } .rb-brown   { background: #6b4513; }
.rb-red     { background: #e63946; } .rb-orange  { background: #f97316; }
.rb-yellow  { background: #facc15; } .rb-green   { background: #22c55e; }
.rb-blue    { background: #4361ee; } .rb-violet  { background: #8b5cf6; }
.rb-grey    { background: #6b7280; } .rb-white   { background: #f1faee; }
.rb-gold    { background: #d4af37; } .rb-silver  { background: #c0c0c0; }

/* Emoji Math */
.emoji-math { display: flex; flex-direction: column; gap: .4em; align-items: center; }
.emoji-eq { font: 1.4em monospace; padding: .15em; }

/* Two Bits */
.two-bits { display: flex; flex-direction: column; gap: .5em; align-items: center; }
.tb-chain { display: flex; gap: .3em; flex-wrap: wrap; justify-content: center; }
.tb-code {
  background: #000; color: var(--accent); font: 700 1.3em monospace;
  padding: .15em .5em; border-radius: 4px; border: 1px solid #333;
}

/* Piano Keys */
.piano { display: flex; flex-direction: column; gap: .6em; align-items: center; }
.piano-syms { font-size: 2em; color: var(--accent2); letter-spacing: .35em; }
.piano-keys { display: flex; }
.piano-key {
  width: 36px; height: 110px; border: 1px solid #000; border-radius: 0 0 4px 4px;
  display: flex; align-items: flex-end; justify-content: center;
  font-size: 12px; font-weight: 600;
  padding-bottom: 5px; cursor: pointer; user-select: none;
}
.piano-key.white { background: #f1faee; color: #222; }
.piano-key.black { background: #222; color: #f1faee; width: 28px; height: 75px; margin: 0 -14px; z-index: 1; border-radius: 0 0 3px 3px; }
.piano-key:hover { filter: brightness(.92); }
.piano-key:active { filter: brightness(.8); transform: translateY(1px); }

/* Microcontroller */
.micro { display: flex; flex-direction: column; gap: .5em; align-items: center; }
.micro-chip {
  display: grid; grid-template-columns: repeat(6, 36px); gap: .3em;
  background: #222; padding: .4em; border-radius: 6px;
}
.micro-pin {
  width: 36px; height: 36px; background: #444; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; cursor: pointer; font-size: 12px;
  border: 2px solid transparent;
}
.micro-pin.on { color: transparent; }
.micro-pin.on.rb-red    { background: #e63946; }
.micro-pin.on.rb-blue   { background: #4361ee; }
.micro-pin.on.rb-green  { background: #22c55e; }
.micro-pin.on.rb-white  { background: #f1faee; }
.micro-palette { display: flex; gap: .5em; }
.micro-color { display: flex; align-items: center; gap: .25em; cursor: pointer; }
.micro-color .rband { width: 16px; height: 16px; border-radius: 4px; }

/* Plumbing */
.plumbing { display: flex; flex-direction: column; gap: .5em; align-items: center; }
.pl-grid {
  display: grid; grid-template-columns: repeat(3, 50px);
  grid-template-rows: repeat(3, 50px); gap: 2px; background: #000;
  padding: 2px; border-radius: 4px;
}
.pl-cell {
  background: var(--panel2); color: var(--accent); border: none;
  font: 700 2em monospace; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s;
}

/* English Test */
.eng-test { display: flex; flex-direction: column; gap: .5em; }
.eng-q { font-size: 1.1em; padding: .4em; background: var(--bg2); border-radius: 6px; }
.eng-opts { display: flex; flex-direction: column; gap: .3em; }

/* Third Base */
.third-base { display: flex; flex-direction: column; gap: .5em; align-items: center; }
.tb-display {
  background: #000; color: var(--accent2); font: 700 1.8em monospace;
  padding: .3em .8em; border-radius: 6px; border: 1px solid #333;
}
.tb-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .3em; width: 100%; }

/* Cards */
.cards-puzzle { display: flex; flex-direction: column; align-items: center; gap: .6em; }
.cards-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .6em;
  width: 100%; max-width: 480px;
}
.card-tile {
  background: #f5f5f5; color: #111;
  border: 2px solid #222; border-radius: 8px;
  height: 110px; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  transition: transform .1s, box-shadow .15s;
  cursor: pointer;
}
.card-tile:hover:not(:disabled) {
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0,0,0,.5);
}
.card-red   { color: #cf2a2a; }
.card-black { color: #111; }
.card-rank { font-size: 1.8em; font-weight: 700; line-height: 1; }
.card-suit { font-size: 1.6em; line-height: 1; margin-top: .1em; }

/* Mystic Square */
.mystic { display: flex; flex-direction: column; align-items: center; gap: .5em; }
.mystic-grid {
  display: grid; grid-template-columns: repeat(3, 90px); grid-template-rows: repeat(3, 90px);
  gap: 4px; background: #000; padding: 4px; border-radius: 8px;
}
.mystic-tile {
  background: var(--panel2); color: var(--accent2);
  font: 700 2.8em 'Courier New', monospace; border: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s, transform .08s;
}
.mystic-tile:hover:not(:disabled):not(.empty) {
  background: var(--accent); color: #111;
}
.mystic-tile:active:not(.empty) { transform: scale(.95); }
.mystic-tile.empty {
  background: #111; cursor: default;
  box-shadow: inset 0 0 8px rgba(0,0,0,.6);
}

/* Orbit Flash */
.orbit-flash { display: flex; justify-content: center; padding: 1.5em 0; }
.orbit-ring {
  position: relative; width: 260px; height: 260px;
  border: 2px dashed rgba(255,255,255,.12); border-radius: 50%;
}
.orbit-sat {
  position: absolute; top: 50%; left: 50%; width: 62px; height: 62px;
  margin: -31px 0 0 -31px; border-radius: 50%; cursor: pointer;
  border: 4px solid #111; transform-origin: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  transition: transform .08s;
}
.orbit-sat:hover { box-shadow: 0 0 18px currentColor; filter: brightness(1.15); }

/* =================== PUZZLE: wire sequences =================== */
.wseq { display: flex; flex-direction: column; gap: .5em; }
.wseq-list { display: flex; flex-direction: column; gap: 6px; }
.wseq .wire { grid-template-columns: 28px 1fr 80px auto auto; }
.tag-ok { color: var(--ok); font-weight: 700; }
.tag-bad { color: var(--bad); font-weight: 700; }

/* =================== PUZZLE: knob =================== */
.knob { display: flex; flex-direction: column; align-items: center; gap: .6em; }
.knob-grid {
  display: grid; grid-template-columns: repeat(3, 30px);
  grid-template-rows: repeat(4, 30px);
  gap: 8px; background: #111; padding: 10px; border-radius: 8px;
}
.knob-led {
  width: 30px; height: 30px; border-radius: 50%; background: #2a2a2a;
  border: 2px solid #4a4a4a;
}
.knob-led.on { background: var(--warn); box-shadow: 0 0 12px var(--warn); border-color: #facc15; }
.knob-ctrl {
  display: grid; grid-template-columns: 52px 52px 52px;
  grid-template-rows: 52px 52px 52px; gap: .3em;
}
.knob-ctrl button {
  width: 52px; height: 52px; padding: 0; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.knob-ctrl button.active { background: var(--accent); color: #111; border-color: var(--accent); }
.knob-grid-mini {
  display: grid; grid-template-columns: repeat(3, 10px);
  grid-template-rows: repeat(4, 10px);
  gap: 3px; background: #000; padding: 4px; border-radius: 3px;
}
.knob-led-mini { width: 10px; height: 10px; border-radius: 50%; background: #333; }
.knob-led-mini.on { background: var(--warn); }
.knob-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5em; }
.knob-card {
  background: var(--bg2); border-radius: 6px; padding: .5em;
  display: flex; flex-direction: column; align-items: center; gap: .3em;
}

/* =================== PUZZLE: color flash =================== */
.cflash { display: flex; flex-direction: column; align-items: center; gap: .8em; }
.cflash-disp {
  background: #000; padding: .4em 1em; border-radius: 6px;
  font: 700 1.4em monospace; min-width: 180px; text-align: center;
  border: 1px solid #333;
}

/* =================== MANUAL =================== */
.manual-nav {
  display: flex; gap: .3em; margin-bottom: .8em;
  flex-wrap: wrap;
  /* На очень узких экранах — горизонтальная прокрутка вместо обтекания */
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.manual-tab {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  padding: .35em .7em; font-size: 12px;
  white-space: nowrap;
}
.manual-tab.active { background: var(--accent); color: #111; border-color: var(--accent); }
.manual-body {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.2em 1.5em; line-height: 1.6;
  overflow-x: auto;
}
.manual-body h3 { color: var(--accent); margin-top: 0; }
.manual-body h4 { color: var(--accent2); margin-top: 1em; }
.manual-body ul, .manual-body ol { margin: .3em 0 .6em 1.2em; }
.manual-body table { border-collapse: collapse; margin: .5em 0; }
.manual-body th, .manual-body td { border: 1px solid var(--border); padding: .25em .6em; }
.manual-body code { background: var(--bg2); padding: .1em .3em; border-radius: 3px; font-size: 12px; }

/* Скролл у больших таблиц/блоков в манулах. */
.manual-body .scroll-x {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: .5em -.5em; padding: 0 .5em;
}
.manual-body table, .morse-tbl, .simon-tbl, .wof-tbl, .cw-tbl {
  min-width: max-content;
}

.kp-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5em; margin-top: .5em; }
.kp-col { background: var(--bg2); padding: .5em; border-radius: 4px; }
.kp-glyphs { font-size: 1.3em; letter-spacing: .12em; }
.morse-tbl, .simon-tbl, .wof-tbl, .cw-tbl { font-size: 13px; }

/* =================== GAME OVER overlay =================== */
.gameover {
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 1em;
}
.gameover .card { text-align: center; min-width: 280px; max-width: 420px; }
.gameover h1 { font-size: 2.4em; margin-bottom: .2em; }
.gameover h1.win  { color: var(--ok); }
.gameover h1.lose { color: var(--bad); }

/* =================== TOAST =================== */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--panel); color: var(--text); padding: .6em 1.1em;
  border-radius: 8px; border: 1px solid var(--border); box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: all .25s;
  z-index: 200;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ======================================================
   RESPONSIVE — min target 320 px
   Чат — плавающий, никогда не скрывается полностью.
   ====================================================== */
@media (max-width: 900px) {
  .lobby-grid { grid-template-columns: 1fr; }
  .timer { font-size: 1.4em; }
  .bomb-info { font-size: 12px; gap: .5em; }
}
@media (max-width: 720px) {
  .chat:not(.collapsed) {
    right: 8px; bottom: 8px; left: 8px;
    width: auto; max-width: none;
    height: 60vh;
  }
}
@media (max-width: 540px) {
  .slots { grid-template-columns: 1fr; }
  .top { padding: .4em; gap: .4em; }
  .auth-card { padding: 1em; }
  .lobby-wrap { padding: .6em; }
  .player-row { flex-direction: column; align-items: flex-start; }
  .role-select { width: 100%; min-width: 0; }
  .pw-cols { gap: .15em; }
  .pw-letter { font-size: 1.3em; padding: .3em 0; }
}
@media (max-width: 400px) {
  body { font-size: 13px; }
  .timer { font-size: 1.2em; }
  .big-btn { width: 110px; height: 110px; font-size: 1em; }
  .manual-body { padding: .8em; }
  .top { font-size: 11px; }
  .info-item { font-size: 11px; }
  #game-main { padding: .5em; padding-bottom: 80px; }
  .slot { padding: .7em; min-height: 220px; }
}