@font-face{font-family:'Oswald';font-weight:700;font-display:swap;src:url(fonts/oswald-cyrillic-700-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Oswald';font-weight:700;font-display:swap;src:url(fonts/oswald-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Oswald';font-weight:500;font-display:swap;src:url(fonts/oswald-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Oswald';font-weight:500;font-display:swap;src:url(fonts/oswald-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
/* ============================ БУНКЕР ============================ */
:root{
  --yellow:#F4C20D; --yellow-deep:#D9A800; --black:#121210; --ink:#E9E6DA; --muted:#9A978A;
  --steel:#1D1E1A; --steel-2:#262722; --line:#3A3B34; --red:#D8452F;
  --c-profession:#E9E3D1; --c-biology:#E07A2C; --c-health:#C93A2F; --c-hobby:#4F8F3A;
  --c-luggage:#2F5DA8; --c-facts:#2EA2C2; --c-special:#7B4DA3;
  --head:'Oswald','Arial Narrow',Impact,sans-serif;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -0.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='turbulence' baseFrequency='.035 .6' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 -2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--black)}
body{margin:0;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(244,194,13,.07), transparent 60%),
    var(--noise) repeat, var(--black);
  background-blend-mode:normal,soft-light,normal;
  min-height:100vh;padding-bottom:env(safe-area-inset-bottom,0px)}
#app{max-width:980px;margin:0 auto;padding:18px 16px 80px}
.hazard{height:12px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 14px,var(--black) 14px 28px)}
.hazard.top{position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top,0px);box-shadow:0 2px 0 rgba(0,0,0,.6)}
h1,h2,h3,.head{font-family:var(--head);text-transform:uppercase;letter-spacing:.03em;font-weight:700;margin:0}
h1{font-size:clamp(40px,9vw,76px);line-height:.95;color:var(--yellow)}
h2{font-size:22px;margin:30px 0 12px;display:flex;align-items:center;gap:10px}
h2::before{content:"";width:14px;height:14px;background:var(--yellow);clip-path:polygon(0 0,100% 50%,0 100%)}
h3{font-size:17px}
p{margin:0 0 12px}
.muted{color:var(--muted)}
.small{font-size:14px;color:var(--muted)}
.mono{font-family:var(--head);letter-spacing:.2em}

/* кнопки и поля */
button{font:inherit;cursor:pointer;border-radius:3px;min-height:44px;padding:10px 18px;border:2px solid var(--yellow);
  background:var(--yellow);color:var(--black);font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:15px;
  box-shadow:0 3px 0 var(--yellow-deep);transition:transform .08s, box-shadow .08s, opacity .15s}
button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--yellow-deep)}
button.ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
button.ghost:hover{border-color:var(--muted)}
button.danger{background:transparent;color:var(--red);border-color:var(--red);box-shadow:none}
button.sm{min-height:36px;padding:6px 12px;font-size:13px}
button.block{width:100%}
button[disabled]{opacity:.35;cursor:not-allowed;transform:none}
button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,.card:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
input,textarea{font:inherit;width:100%;padding:12px 14px;border:1px solid var(--line);background:#0E0E0C;color:var(--ink);border-radius:3px}
textarea{min-height:96px;resize:vertical}
label{display:block;font-size:13px;color:var(--muted);margin:16px 0 6px;text-transform:uppercase;letter-spacing:.06em;font-family:var(--head)}
.check{display:flex;gap:10px;align-items:center;text-transform:none;font-family:var(--body);font-size:15px;color:var(--ink);letter-spacing:0;margin:12px 0 0}
.check input{width:20px;height:20px;accent-color:var(--yellow)}

/* панели */
.panel{position:relative;background:linear-gradient(180deg,var(--steel-2),var(--steel));border:1px solid var(--line);border-radius:4px;padding:18px;margin-bottom:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 24px rgba(0,0,0,.35)}
.panel.rivets::before,.panel.rivets::after{content:"";position:absolute;top:8px;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#6a6b62,#2a2b26);box-shadow:0 1px 0 rgba(0,0,0,.6)}
.panel.rivets::before{left:8px}.panel.rivets::after{right:8px}
.row{display:flex;gap:10px;align-items:center}
.wrap{flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px}
.grid2{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:760px){.grid2{grid-template-columns:1fr 1fr}}
.errbar{border:2px solid var(--red);background:rgba(216,69,47,.12);color:#FFB3A6;border-radius:3px;padding:10px 12px;margin-bottom:14px;
  display:flex;justify-content:space-between;gap:10px;align-items:center}
.errbar button{color:#FFB3A6;border-color:#FFB3A6}

/* верхняя строка комнаты */
.topline{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:6px 0 16px}
.roomcode{font-family:var(--head);font-size:44px;line-height:1;letter-spacing:.18em;color:var(--yellow)}
.tag{display:inline-block;font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:13px;padding:4px 10px;border-radius:2px;
  background:var(--yellow);color:var(--black);font-weight:700}
.tag.dark{background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:500}
.tag.red{background:var(--red);color:#fff}
.stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.who{font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:14px}
.who b{color:var(--ink);font-weight:500}

/* катастрофа */
.dossier{padding:0;overflow:hidden}
.dossier .band{background:repeating-linear-gradient(-45deg,var(--yellow) 0 10px,#1a1a17 10px 20px);height:8px}
.dossier .in{padding:16px 18px 18px}
.dossier .kicker{font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--yellow)}
.dossier h3{font-size:26px;margin:2px 0 8px;color:var(--ink)}
.dossier p{color:#CFCBBE;margin:0}
.feats{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.feat{font-size:14px;padding:5px 10px;border:1px solid var(--line);border-radius:2px;background:#0F0F0D}
.feat.closed{color:var(--muted);letter-spacing:.2em;font-family:var(--head)}
.feat.secret{border-style:dashed;color:var(--muted)}
.feat.secret::before{content:'скрыто · ';font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.feat.open{border-color:var(--yellow);color:var(--ink)}

/* подсказка круга */
.hint{display:flex;gap:12px;align-items:center;padding:12px 14px;border-left:4px solid var(--yellow);background:rgba(244,194,13,.08);margin-bottom:14px;font-size:15px}
.hint.off{border-color:var(--line);background:transparent;color:var(--muted)}

/* ============================ КАРТА ============================ */
.hand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:600px){.hand{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.hand{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tablecards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px}
@media (min-width:600px){.tablecards{grid-template-columns:repeat(7,minmax(0,1fr))}}

/* Внешний элемент задаёт размер и служит контейнером, всё внутри меряется в cqw от ширины карты */
.card{all:unset;box-sizing:border-box;display:block;width:100%;aspect-ratio:63/88;container-type:inline-size;position:relative;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.card.static{cursor:default}
.cv{position:absolute;inset:0;border-radius:4.8cqw;overflow:hidden;background:#F3C512 url(img/paper.jpg) center/cover;
  box-shadow:0 1.6cqw 5cqw rgba(0,0,0,.55),inset 0 0 0 .5cqw rgba(40,30,0,.45);transition:transform .15s ease}
.card:not(.static):hover .cv{transform:translateY(-2px)}
.pl{position:absolute;left:0;right:0;background:#141412 url(img/plate.jpg) center/cover;color:#F2EEE2;display:grid;place-items:center;
  text-align:center;font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-weight:700;text-transform:uppercase}
.pl.t{top:0;height:17.5%;padding-bottom:1.6cqw}
.pl.b{bottom:0;height:26%;padding:2.4cqw 5cqw 0}
.pl span{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 0 48%,transparent 48% 54%,#000 54%);mask-image:linear-gradient(to bottom,#000 0 48%,transparent 48% 54%,#000 54%)}
.pl.t span{font-size:12.4cqw;letter-spacing:.06em;line-height:1;-webkit-line-clamp:1}
.pl.t.long span{font-size:9.2cqw}
.pl.b span{font-size:var(--fs,10.4cqw);letter-spacing:.04em;line-height:1.02;-webkit-line-clamp:3}
.pl.b span{-webkit-mask-image:none;mask-image:none}
.art{position:absolute;left:12%;right:12%;top:21%;bottom:28.5%;display:grid;place-items:center}
.art svg{width:100%;height:100%;overflow:visible}
.art .effect{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;font-size:7.4cqw;line-height:1.14;color:#16140c;text-align:center;letter-spacing:.02em}
.code{position:absolute;right:5.4cqw;top:19.6%;font-family:'Oswald',sans-serif;font-weight:700;font-size:3.7cqw;letter-spacing:.14em;color:#1a1406;opacity:.55}
@container (max-width:130px){.code{display:none}.art{top:19.5%;bottom:27.5%;left:8%;right:8%}}

/* рубашка */
.cv.back{background:#141412 url(img/plate.jpg) center/cover;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4cqw}
.cv.back::before,.cv.back::after{content:"";position:absolute;left:0;right:0;height:7cqw;background:repeating-linear-gradient(-45deg,#F3C512 0 4.6cqw,transparent 4.6cqw 9.2cqw);opacity:.9}
.cv.back::before{top:0}.cv.back::after{bottom:0}
.cv.back svg{width:44%;color:#F3C512}
.cv.back .b1{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:7.6cqw;color:#F2EEE2;text-align:center;padding:0 4cqw}
.cv.back .b2{font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.2em;font-size:4.4cqw;color:#F3C512;opacity:.75}

/* своя закрытая карта */
.seal{position:absolute;z-index:4;left:5cqw;top:20%;font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:4.8cqw;line-height:1;color:#F2EEE2;background:#141412;padding:1.8cqw 2.6cqw;border-radius:1cqw;display:flex;align-items:center;gap:1.6cqw}
.seal::before{content:"";width:3cqw;height:3cqw;border-radius:50%;background:#D8452F}
.card.can-open .seal::before{background:#6BD36B}
.card.can-open .cv{animation:ready 1.8s ease-in-out infinite}
@keyframes ready{50%{box-shadow:0 1.6cqw 5cqw rgba(0,0,0,.55),0 0 0 1.4cqw rgba(243,197,18,.55)}}

/* у ведущего закрытые карты приглушены, под картой подпись */
.card.dim .cv{filter:saturate(.55) brightness(.72)}
.slot{min-width:0}
.cap{margin-top:6px;font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:12px;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.cap::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.cap.open{color:#9CD67F}.cap.open::before{background:#6BD36B}
.cap.shut{color:var(--muted)}.cap.shut::before{background:transparent;border:1.5px solid var(--muted)}

/* анимация раскрытия */
.flip .cv{animation:flip .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes flip{0%{transform:perspective(600px) rotateY(90deg) scale(.9);filter:brightness(2)}60%{filter:brightness(1.2)}100%{transform:perspective(600px) rotateY(0) scale(1)}}

/* список катастроф */
.catlist{display:grid;gap:8px;max-height:60vh;overflow:auto;margin-bottom:10px}
.catitem{all:unset;box-sizing:border-box;cursor:pointer;display:block;padding:12px 14px;border:1px solid var(--line);border-radius:3px;background:#0F0F0D}
.catitem:hover{border-color:var(--muted)}
.catitem.on{border-color:var(--yellow);background:rgba(243,197,18,.08)}
.catitem b{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.05em;font-size:17px;color:var(--ink)}
.catitem span{display:block;font-size:13px;color:var(--muted);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.catitem:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* стол */
.seat{padding:14px 0;border-top:1px dashed var(--line)}
.seat:first-child{border-top:0;padding-top:4px}
.seat .spread{margin-bottom:10px}
.seat.out{opacity:.6}
.seat.out .tablecards{filter:grayscale(.85)}
.name{font-family:var(--head);text-transform:uppercase;letter-spacing:.05em;font-size:19px}
.you{color:var(--yellow);font-size:13px;margin-left:6px}

/* лог */
.log{max-height:240px;overflow:auto;font-size:14px;color:var(--muted)}
.log div{padding:6px 0;border-bottom:1px dashed var(--line)}
.log div:first-child{color:var(--ink)}

/* главная */
.hero{padding:30px 0 22px}
.hero .sub{font-family:var(--head);text-transform:uppercase;letter-spacing:.2em;color:var(--muted);font-size:14px;margin-top:10px}
.hero-cards{display:flex;gap:0;margin:26px 0 10px;height:170px;position:relative}
.hero-cards .card{width:118px;position:absolute;top:0}
.narrow{max-width:520px}
.addr{font-family:var(--head);font-size:20px;letter-spacing:.06em;color:var(--yellow);word-break:break-all}

/* нижний лист */
.sheet-bg{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;animation:fade .15s}
.sheet{width:100%;max-width:520px;max-height:92vh;overflow:auto;background:var(--steel-2);border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));animation:rise .2s ease-out}
@media (min-width:600px){.sheet-bg{align-items:center}.sheet{border-radius:8px;border-bottom:1px solid var(--line)}}
.sheet .bigcard{width:min(62vw,250px);margin:4px auto 18px}
.sheet .acts{display:grid;gap:8px}
.sheet .picker{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(30px);opacity:0}}
.sheet h3{margin-bottom:12px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* особые условия */
.stamp{position:absolute;z-index:5;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-12deg);font-family:'Oswald',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:7cqw;color:#B3261E;border:1cqw solid #B3261E;border-radius:1.4cqw;padding:1.4cqw 3cqw;
  background:rgba(243,197,18,.82);white-space:nowrap;opacity:.92}
.reqs{position:sticky;top:18px;z-index:20;border:2px solid var(--yellow);animation:reqpulse 2s ease-in-out infinite}
@keyframes reqpulse{50%{box-shadow:0 0 0 4px rgba(243,197,18,.25),0 8px 24px rgba(0,0,0,.35)}}
.reqs .kicker{font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--yellow);margin-bottom:8px}
.req{padding:10px 0;border-top:1px dashed var(--line)}
.req:first-of-type{border-top:0;padding-top:0}
.req p{margin:0 0 10px;font-size:15px}
.notice{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;margin-bottom:10px;border:1px solid var(--yellow);
  background:rgba(243,197,18,.1);border-radius:3px;font-size:15px}
.notice.wait{border-style:dashed;border-color:var(--line);background:transparent;color:var(--muted)}