/* Шпион — холодный «стальной» интерфейс, тёплая бумажная карточка досье */
:root{
  --ink:#0B0E12; --steel:#141A21; --steel-2:#1B232B; --line:#27333D;
  --text:#DCE4EB; --mute:#7F8E9C;
  --paper:#E9E2D2; --paper-ink:#1B1712; --paper-line:#C2B79C;
  --stamp:#D2352B; --stamp-dim:#8E2620;
  --safe:#4E9E7A;
  --r:14px;
  --pad:16px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  background-image:radial-gradient(120% 60% at 50% 0%, #131A22 0%, #0B0E12 62%);
  color:var(--text);
  font-family:'Manrope',system-ui,sans-serif;
  font-size:16px; line-height:1.45;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  min-height:100svh;
}
#app{
  max-width:560px; margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 14px) var(--pad) calc(env(safe-area-inset-bottom) + 28px);
}
h1,h2,h3{font-family:'PT Sans Narrow',Arial,sans-serif;font-weight:700;margin:0;letter-spacing:.04em;text-transform:uppercase;line-height:1.05}
.mono{font-family:'PT Mono',ui-monospace,monospace}

/* ——— шапка ——— */
.top{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.mark{font-family:'PT Sans Narrow',sans-serif;font-weight:700;font-size:22px;letter-spacing:.22em;text-transform:uppercase}
.mark b{color:var(--stamp)}
.top .sp{flex:1}
.rcode{font-family:'PT Mono',monospace;font-size:15px;letter-spacing:.24em;color:var(--text);background:var(--steel);border:1px solid var(--line);border-radius:8px;padding:6px 10px}

/* ——— карточки/панели ——— */
.panel{background:var(--steel);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.panel + .panel{margin-top:12px}
.eyebrow{font-family:'PT Sans Narrow',sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:13px;color:var(--mute);margin:0 0 10px}
.hint{color:var(--mute);font-size:13.5px;line-height:1.5}

/* ——— поля и кнопки ——— */
input[type=text]{
  width:100%;background:#0E141A;border:1px solid var(--line);border-radius:10px;
  color:var(--text);font:inherit;padding:13px 14px;
}
input[type=text]::placeholder{color:#55646F}
input:focus-visible,button:focus-visible,.card:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}
.code-in{font-family:'PT Mono',monospace;font-size:26px;letter-spacing:.42em;text-transform:uppercase;text-align:center}
.btn{
  -webkit-appearance:none;appearance:none;width:100%;
  background:var(--stamp);color:#fff;border:0;border-radius:10px;
  font-family:'PT Sans Narrow',sans-serif;font-weight:700;font-size:19px;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 16px;cursor:pointer;transition:transform .08s ease,background .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{background:#2A343D;color:#64727E;cursor:default}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.ghost:active{background:var(--steel-2)}
.btn.sm{font-size:14px;padding:8px 11px;width:auto;flex:none}
.btn.icon{width:34px;height:34px;padding:0;font-size:20px;line-height:1;flex:none;color:var(--mute)}
.setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.setting:first-of-type{border-top:0;padding-top:0}
.stepper{display:flex;align-items:center;gap:6px;flex:none}
.stepper button{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:#0E141A;color:var(--text);font-size:19px;line-height:1;cursor:pointer;padding:0}
.stepper button[disabled]{color:#3E4A54;cursor:default}
.stepper b{font-family:'PT Mono',monospace;font-weight:400;font-size:15px;min-width:64px;text-align:center}
.row{display:flex;gap:10px}
.row>*{flex:1}
.stack>*+*{margin-top:10px}

/* ——— список игроков: одна строка = один игрок ——— */
.roster{list-style:none;margin:0;padding:0}
.roster li{
  display:flex;align-items:center;gap:9px;min-height:44px;
  padding:5px 0;border-top:1px solid var(--line);
}
.roster li:first-child{border-top:0}
.num{font-family:'PT Mono',monospace;font-size:12px;color:var(--mute);width:20px;flex:none}
.pname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.tag{font-family:'PT Sans Narrow',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--mute);border:1px solid var(--line);border-radius:6px;padding:2px 6px;flex:none}
.tag.host{color:var(--paper);border-color:var(--paper-line)}
.tag.you{color:var(--stamp);border-color:var(--stamp-dim)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--safe);flex:none}
.dot.off{background:#3C4750}
.off-name{color:var(--mute)}

/* ——— карточка-досье ——— */
.card{
  position:relative;width:100%;aspect-ratio:1/.76;min-height:220px;
  border:0;padding:0;border-radius:var(--r);overflow:hidden;cursor:pointer;
  background:var(--steel-2);
  display:block;text-align:left;font:inherit;color:inherit;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.card .back,.card .face{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column}
.card .back{
  background:
    repeating-linear-gradient(135deg, #1B232B 0 9px, #182027 9px 18px);
  border:1px solid var(--line);border-radius:var(--r);
  align-items:center;justify-content:center;text-align:center;gap:10px;
  transition:opacity .16s ease;
}
.card .back .lock{font-family:'PT Sans Narrow',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:20px}
.card .back .sub{color:var(--mute);font-size:13px;letter-spacing:.02em}
.card .face{
  background:var(--paper);color:var(--paper-ink);border-radius:var(--r);
  background-image:linear-gradient(180deg,rgba(0,0,0,.06),transparent 22%);
  opacity:0;transition:opacity .16s ease;
}
.card.open .back{opacity:0}
.card.open .face{opacity:1}
.card .face::before{ /* перфорация по левому краю — бумага из папки */
  content:'';position:absolute;left:9px;top:16px;bottom:16px;width:7px;
  background:radial-gradient(circle at 50% 50%, var(--ink) 0 2.6px, transparent 2.8px) 0 0/7px 20px repeat-y;
  opacity:.5;
}
.face .hdr{display:flex;justify-content:space-between;align-items:baseline;font-family:'PT Mono',monospace;font-size:11px;letter-spacing:.14em;color:#8A7E66;text-transform:uppercase;padding-left:14px}
.face .lbl{font-family:'PT Mono',monospace;font-size:11px;letter-spacing:.18em;color:#8A7E66;text-transform:uppercase;padding-left:14px;margin-top:14px}
.face .big{font-family:'PT Sans Narrow',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(26px,8.2vw,34px);line-height:1.02;letter-spacing:.01em;padding-left:14px;margin-top:4px;overflow-wrap:break-word}
.face .role{font-family:'PT Mono',monospace;font-size:17px;padding-left:14px;margin-top:3px}
.face.spy{background:var(--paper)}
.face.spy .big{color:var(--stamp);font-size:clamp(38px,12vw,48px);letter-spacing:.06em}
.stamp{
  position:absolute;right:14px;bottom:14px;transform:rotate(-9deg);
  border:2.5px solid var(--stamp-dim);color:var(--stamp-dim);border-radius:4px;
  font-family:'PT Sans Narrow',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:13px;padding:3px 8px;opacity:.72;
}

/* ——— таймер ——— */
.timer{text-align:center;padding:6px 0 2px}
.timer .t{font-family:'PT Mono',monospace;font-size:46px;line-height:1;letter-spacing:.02em}
.timer .t.warn{color:var(--stamp)}
.timer .cap{font-family:'PT Sans Narrow',sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--mute)}
.fuse{height:3px;background:#1D252D;border-radius:3px;margin:13px 2px 1px;overflow:hidden}
.fuse i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--stamp-dim),var(--stamp));transition:width 1s linear}

/* ——— колода локаций ——— */
.deck{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.deck button{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background:#10171D;border:1px solid var(--line);color:var(--text);
  border-radius:8px;padding:7px 10px;font:inherit;font-size:13.5px;line-height:1.1;
}
.deck button.crossed{color:#4C5A65;text-decoration:line-through;background:transparent}
.deck button.pick{border-color:var(--stamp)}

/* ——— оверлей ——— */
.sheet{position:fixed;inset:0;background:rgba(6,9,12,.86);display:flex;align-items:flex-end;justify-content:center;z-index:40;padding:14px}
.sheet .inner{width:100%;max-width:560px;background:var(--steel);border:1px solid var(--line);border-radius:var(--r);padding:16px;max-height:88svh;overflow:auto}
@media(min-width:560px){.sheet{align-items:center}}

/* ——— результат ——— */
.verdict{text-align:center;padding:6px 0 12px}
.verdict .who{font-family:'PT Sans Narrow',sans-serif;font-weight:700;text-transform:uppercase;font-size:34px;letter-spacing:.06em}
.verdict .who.spies{color:var(--stamp)}
.verdict .who.civ{color:var(--paper)}
.verdict .why{color:var(--mute);font-size:14px;margin-top:6px}
.reveal{list-style:none;margin:10px 0 0;padding:0}
.reveal li{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.reveal .r{font-family:'PT Mono',monospace;font-size:13px;color:var(--mute)}
.reveal li.isspy .r{color:var(--stamp)}
.loc-out{font-family:'PT Sans Narrow',sans-serif;text-transform:uppercase;font-size:26px;font-weight:700}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 16px);transform:translateX(-50%);
  background:var(--stamp);color:#fff;padding:10px 16px;border-radius:10px;z-index:60;font-size:14.5px;max-width:92vw;text-align:center}
.foot{color:#4B5862;font-size:12px;text-align:center;margin-top:18px;line-height:1.6}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}