/* ==========================================================================
   Штаб выживших — «Штабная карта»
   Полевая карта на крафтовой бумаге: тушь, красный и синий карандаш, штампы,
   скотч, горизонтали и координатная сетка. Шрифты встроены (OFL).
   ========================================================================== */
@font-face{font-family:"Arsenal SC";src:url(/fonts/arsenal-sc.woff) format("woff");font-display:swap}
@font-face{font-family:"Plex Serif";src:url(/fonts/plex-serif.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Serif";src:url(/fonts/plex-serif-italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex Serif";src:url(/fonts/plex-serif-bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/plex-mono.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/plex-mono-bold.woff) format("woff");font-weight:700;font-display:swap}
:root{
  --paper:#EADFC4; --paper-2:#F4ECD8; --paper-3:#E1D3B1; --paper-4:#D6C69F;
  --ink:#1F2726; --ink-2:#4B5450; --ink-3:#7C7A66; --line:rgba(31,39,38,.18); --line-2:rgba(31,39,38,.32);
  --red:#C2361F; --red-2:#9E2A16; --blue:#2E5A8C; --olive:#5E6E2E; --ochre:#B07A16; --violet:#6E3E7A; --teal:#2B6E66;
  --tape:rgba(246,233,168,.78);
  --f-str:#A33A22; --f-rog:#6E3E7A; --f-air:#2E5A8C; --f-sea:#2B6E66;
  --r-R:#2E5A8C; --r-SR:#6E3E7A; --r-SSR:#B07A16; --r-X:#C2361F;
  --head:"Arsenal SC","Plex Serif",Georgia,serif; --body:"Plex Serif",Georgia,"Times New Roman",serif; --mono:"Plex Mono","Courier New",monospace;
  --rail:248px; --gap:clamp(16px,2vw,26px);
  --shadow:0 1px 0 #cdbf9c,0 14px 26px rgba(90,66,24,.16);
  --hex:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:400 16px/1.55 var(--body);min-height:100vh;overflow-x:hidden;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.72' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .26 0 0 0 0 .1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
/* карта под всем: горизонтали + сетка квадратов */
.mapbg{position:fixed;inset:0;z-index:-1;pointer-events:none}
.mapbg svg{position:absolute;inset:0;width:100%;height:100%;opacity:.28}
.mapbg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(46,90,140,.13) 1px,transparent 1px) 0 0/120px 120px,linear-gradient(90deg,rgba(46,90,140,.13) 1px,transparent 1px) 0 0/120px 120px}
.coords{position:fixed;top:0;left:0;right:0;height:18px;display:flex;font:700 10.5px var(--mono);color:var(--blue);opacity:.65;pointer-events:none;z-index:45;overflow:hidden}
.coords span{flex:none;width:120px;padding:3px 0 0 6px}
a{color:inherit}
a:not([class]){color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:not([class]):hover{color:var(--red)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px dashed var(--red);outline-offset:3px}
::selection{background:rgba(194,54,31,.25)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--paper-4);border:2px solid var(--paper)}
h1,h2,h3{font-family:var(--head);font-weight:400;margin:0 0 .45em;line-height:1;letter-spacing:.01em}
h1{font-size:clamp(40px,5.6vw,76px)}
h2{font-size:clamp(24px,2.6vw,32px)}
h3{font-size:20px}
p{margin:0 0 .9em;max-width:70ch}
.num{font-family:var(--mono);font-weight:700;color:var(--ink)}
.mute{color:var(--ink-3)} .small{font-size:14px}
.hand{font-style:italic;color:var(--red)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.title-x{font-family:var(--head)}

/* ============================== оболочка */
.shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}
.rail{position:sticky;top:0;height:100vh;overflow-y:auto;padding:34px 18px 18px 30px;display:flex;flex-direction:column}
.brand{text-decoration:none;display:block;margin-bottom:26px}
.brand-mark{display:none}
.brand b{display:block;font:400 30px/1 var(--head)}
.brand small{display:block;font:italic 13.5px var(--body);color:var(--ink-2);margin-top:4px}
.nav{counter-reset:n}
.nav-h{font:400 13px var(--head);color:var(--ink-3);letter-spacing:.06em;margin:18px 0 6px;border-bottom:1px solid var(--line);padding-bottom:3px}
.nav a{display:flex;align-items:baseline;gap:10px;padding:4px 0;text-decoration:none;font:400 18px/1.3 var(--head);color:var(--ink);counter-increment:n}
.nav a::before{content:counter(n,upper-roman)'.';font:700 10.5px var(--mono);color:var(--ink-3);width:30px;flex:none}
.nav a svg{display:none}
.nav a:hover span{color:var(--red)}
.nav a[aria-current=page] span{color:var(--red);background:linear-gradient(transparent 58%,rgba(194,54,31,.2) 58%)}
.rail-promo{display:block;position:relative;margin:26px 0 8px;padding:16px 14px 14px;background:var(--paper-2);box-shadow:var(--shadow);transform:rotate(-1.2deg);text-decoration:none}
.rail-promo::before{content:"";position:absolute;width:76px;height:22px;background:var(--tape);top:-10px;left:36%;transform:rotate(3deg)}
.rail-promo b{display:block;font:400 18px var(--head);color:var(--red)}
.rail-promo span{font-size:13.5px;color:var(--ink-2)}
.rail-foot{margin-top:auto;padding-top:16px;font:italic 12.5px/1.5 var(--body);color:var(--ink-3)}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;padding:22px var(--gap) 14px;background:linear-gradient(var(--paper) 70%,rgba(234,223,196,0))}
.search{flex:1;max-width:520px;position:relative}
.search input{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--ink);padding:8px 10px 8px 30px;font:italic 16px var(--body)}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{outline:none;border-bottom-color:var(--red);background:rgba(244,236,216,.6)}
.search svg{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:18px;color:var(--ink-2)}
.search kbd{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:700 11px var(--mono);color:var(--ink-3);border:1px solid var(--line-2);padding:1px 6px}
.search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--paper-2);box-shadow:var(--shadow);max-height:62vh;overflow:auto;padding:6px;display:none}
.search-results.open{display:block}
.search-results a{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;text-decoration:none;border-bottom:1px dotted var(--line-2)}
.search-results a:hover,.search-results a.sel{background:rgba(194,54,31,.08)}
.search-results small{font:italic 13px var(--body);color:var(--ink-3)}
.top-actions{margin-left:auto;display:flex;gap:10px;align-items:center}
.avatar{display:inline-grid;place-items:center;width:30px;height:30px;border:1.5px solid var(--ink);border-radius:50%;font:700 11px var(--mono)}
.avatar.gold{border-color:var(--red);color:var(--red)}
.view{padding:6px var(--gap) var(--gap);flex:1;width:100%;max-width:1320px;position:relative}
.footer{padding:22px var(--gap) 96px;font:italic 13px var(--body);color:var(--ink-3);border-top:1px solid var(--line)}
.tabbar{display:none}
.brand-mobile{display:none;text-decoration:none;font:400 22px/1 var(--head)}

/* ============================== кнопки, поля */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;cursor:pointer;text-decoration:none;white-space:nowrap;
  font:400 17px/1.1 var(--head);letter-spacing:.04em;color:var(--ink);background:transparent;border:1.5px solid var(--ink);box-shadow:3px 3px 0 rgba(31,39,38,.22);transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(31,39,38,.3)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(31,39,38,.3)}
.btn.primary{background:var(--ink);color:var(--paper-2);box-shadow:4px 4px 0 var(--red)}
.btn.primary:hover{box-shadow:5px 5px 0 var(--red)}
.btn.ghost{border-color:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:4px;padding-left:8px;padding-right:8px}
.btn.ghost:hover{color:var(--red);transform:none;box-shadow:none}
.btn.sm{padding:6px 12px;font-size:15px;box-shadow:2px 2px 0 rgba(31,39,38,.2)}
.btn.sm.primary{box-shadow:3px 3px 0 var(--red)}
.btn.lg{padding:13px 26px;font-size:19px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:17px;height:17px;flex:none}
.glow-wrap{display:inline-block}
.field{display:grid;gap:4px;font:400 14px var(--head);letter-spacing:.03em;color:var(--ink-2)}
.input,select.input,textarea.input{width:100%;min-width:0;background:rgba(244,236,216,.7);border:0;border-bottom:1.5px solid var(--ink-2);padding:8px 10px;font:400 16px var(--body);color:var(--ink);border-radius:0}
textarea.input{border:1.5px solid var(--ink-2)}
.input:focus{outline:none;border-color:var(--red);background:var(--paper-2)}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231F2726' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
input[type=number].input{font-family:var(--mono)}
input[type=checkbox]{accent-color:var(--red);width:17px;height:17px}
input[type=range]{accent-color:var(--red)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{position:relative;display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 12px;font:400 16px var(--head);letter-spacing:.02em;color:var(--ink-2);cursor:pointer}
.chip:hover{color:var(--ink)}
.chip[aria-pressed=true]{color:var(--red)}
.chip[aria-pressed=true]::after{content:"";position:absolute;inset:-1px -4px;border:2px solid var(--red);border-radius:50% 46% 52% 48%/55% 50% 50% 45%;transform:rotate(-2deg);opacity:.85}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--ink))}
.chip svg{width:15px;height:15px}
.tag{display:inline-flex;align-items:center;gap:5px;font:400 14px var(--head);letter-spacing:.03em;padding:1px 8px;border:1px solid var(--line-2);color:var(--ink-2);background:rgba(244,236,216,.6)}
.tag svg{width:13px;height:13px}
.tag.amber{color:var(--ochre);border-color:rgba(176,122,22,.5)}
.tag.cool{color:var(--olive);border-color:rgba(94,110,46,.5)}
.tag.rust{color:var(--red);border-color:rgba(194,54,31,.5)}
.tag.live::before{content:"●";font-size:9px;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.3}}
.stamp{display:inline-block;border:3px double var(--red);color:var(--red);font:700 12.5px var(--mono);letter-spacing:.14em;padding:3px 11px;transform:rotate(-3deg);opacity:.88;text-transform:uppercase;background:rgba(244,236,216,.35)}
.stamp.blue{border-color:var(--blue);color:var(--blue)}
.tape{position:absolute;width:96px;height:26px;background:var(--tape);top:-12px;left:42%;transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.08);z-index:2}

/* ============================== листы */
.panel{position:relative;background:var(--paper-2);padding:clamp(16px,2vw,24px);box-shadow:var(--shadow)}
.panel.flat{background:none;box-shadow:none;padding:0}
.panel.hud::before{content:"";position:absolute;width:96px;height:24px;background:var(--tape);top:-11px;left:calc(50% - 48px);transform:rotate(-2deg)}
.panel h2:first-child,.panel h3:first-child{margin-top:0}
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.auto{grid-template-columns:repeat(auto-fill,minmax(var(--min,220px),1fr))}
.stack>*+*{margin-top:var(--gap)}
.page-head{position:relative;display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin:6px 0 calc(var(--gap) + 8px);padding:0 0 18px;border-bottom:2px solid var(--ink)}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:-6px;border-bottom:1px solid var(--ink)}
.page-head h1{margin:0 0 6px}
.page-head p{font:italic 17.5px/1.5 var(--body);color:var(--ink-2);margin:0;max-width:62ch}
.sheet-no{display:block;font:700 11.5px var(--mono);letter-spacing:.14em;color:var(--blue);margin-bottom:8px}
.crumbs{font:italic 14px var(--body);color:var(--ink-3);margin-bottom:6px;display:flex;gap:6px}
.crumbs a{color:var(--blue);text-decoration:none}
.crumbs a:hover{color:var(--red)}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 18px;margin:0}
.kv div{padding:8px 0;border-bottom:1px solid var(--line-2)}
.kv dt{font:400 14px var(--head);letter-spacing:.03em;color:var(--ink-2)}
.kv dd{margin:2px 0 0;font:700 19px var(--mono)}

/* ============================== ведомости (таблицы) */
.tbl-wrap{overflow:auto;max-height:70vh;background:var(--paper-2);box-shadow:var(--shadow)}
table.t{border-collapse:collapse;width:100%;font-size:15px}
table.t th,table.t td{padding:8px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.t thead th{position:sticky;top:0;z-index:1;background:var(--paper-2);font:400 15px var(--head);letter-spacing:.04em;color:var(--ink-2);white-space:nowrap;border-bottom:1.5px solid var(--ink)}
table.t td.n{text-align:right;font-family:var(--mono);font-weight:700;white-space:nowrap}
table.t tbody tr:hover td{background:rgba(194,54,31,.06)}
table.t tr.hl td{background:rgba(176,122,22,.12)}
.mark{display:inline-block;width:20px;height:20px;vertical-align:middle;border:1.5px solid var(--ink)}
.mark.battle{background:repeating-linear-gradient(45deg,var(--red) 0 3px,transparent 3px 6px)} .mark.turtle{background:repeating-linear-gradient(-45deg,var(--ochre) 0 3px,transparent 3px 6px)} .mark.king{background:repeating-linear-gradient(90deg,var(--blue) 0 3px,transparent 3px 6px)}
.tbl-title{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:30px 0 10px}
.tbl-title h3{margin:0}
.tbl-title .mute{font-style:italic}

/* ============================== допуск (премиум-замок) */
.lock{position:relative;display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:20px 22px;background:var(--paper-2);box-shadow:var(--shadow);
  background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(194,54,31,.05) 14px 15px)}
.lock .hexlock{display:grid;place-items:center;flex:none;width:auto;height:auto;padding:6px 12px;border:3px double var(--red);color:var(--red);font:700 13px var(--mono);letter-spacing:.14em;transform:rotate(-6deg)}
.lock .hexlock svg{display:none}
.lock .hexlock::after{content:"ДОПУСК"}
.lock p{margin:0;color:var(--ink-2)}
.lock b{color:var(--ink);font-weight:700}

/* ============================== главная */
.home-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,460px);gap:clamp(20px,3vw,40px);align-items:start;min-height:520px}
.home-hero .over{display:contents}
.home-hero .intro{position:relative;z-index:2;padding-top:10px}
.home-hero .kicker{margin-bottom:18px}
.home-hero h1{font-size:clamp(56px,8.5vw,118px);line-height:.88;margin:0 0 18px}
.home-hero .lead{font:italic 19px/1.5 var(--body);color:var(--ink-2);max-width:46ch}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.diorama{position:relative;grid-column:1/-1;height:min(46vh,420px);margin-top:-30px;background:transparent}
.diorama canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.diorama .anno{position:absolute;pointer-events:none;font:italic 16px var(--body);color:var(--red);white-space:nowrap;transform:translate(-50%,-50%);transition:opacity .3s}
.diorama .anno::before{content:"";position:absolute;left:50%;top:50%;width:120px;height:74px;transform:translate(-50%,-50%) rotate(-6deg);border:2.5px solid var(--red);border-radius:50% 46% 52% 48%/55% 50% 50% 45%;opacity:.85}
.diorama .anno span{position:absolute;left:62px;top:-50px}
.diorama .legend{position:absolute;right:0;bottom:6px;display:flex;gap:14px;font:italic 13.5px var(--body);color:var(--ink-2)}
.diorama .legend i{display:inline-block;width:14px;height:10px;margin-right:5px;border:1px solid var(--ink);vertical-align:middle}
.hud{position:relative;background:var(--paper-2);padding:22px 22px 18px;box-shadow:var(--shadow);transform:rotate(1deg)}
.hud::before{content:"";position:absolute;width:110px;height:26px;background:var(--tape);top:-12px;left:40%;transform:rotate(-4deg)}
.hud h3{display:flex;justify-content:space-between;align-items:baseline;font-size:21px;margin-bottom:10px}
.hud h3 .hand{font:italic 15px var(--body)}
.pulse{display:none}
.ledger-slots{list-style:none;padding:0;margin:0}
.ledger-slots li{position:relative;display:flex;justify-content:space-between;align-items:baseline;padding:9px 4px;border-bottom:1px solid var(--ink);font-size:16px}
.ledger-slots li:first-child{border-top:1px solid var(--ink)}
.ledger-slots li span:last-child{font:400 14px var(--mono);color:var(--ink-2)}
.ledger-slots li.now span:first-child{position:relative}
.ledger-slots li.now span:first-child::after{content:"";position:absolute;inset:-7px -14px;border:2.5px solid var(--red);border-radius:50% 46% 52% 48%/55% 50% 50% 45%;transform:rotate(-3deg)}
.ledger-slots .left{position:absolute;left:46%;top:-14px;font:italic 14.5px var(--body);color:var(--red);white-space:nowrap}
.next-up{margin-top:12px;font-size:14px;color:var(--ink-2);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.bar{height:8px;background:var(--paper-3);border:1px solid var(--ink);overflow:hidden}
.bar i{display:block;height:100%;background:repeating-linear-gradient(135deg,var(--red) 0 3px,transparent 3px 6px)}
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:var(--gap);border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.stat{padding:16px 18px 14px;border-right:1px solid var(--line-2)}
.stat:last-child{border-right:0}
.stat b{display:block;font:700 clamp(30px,3.4vw,42px)/1 var(--mono)}
.stat span{font:italic 15px var(--body);color:var(--ink-2)}
.coupons{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.coupon{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;text-align:left;color:var(--ink);background:var(--paper-2);border:1.5px dashed var(--ink-2);transition:transform .12s}
.coupon:hover{transform:rotate(-.8deg)}
.coupon code{font:700 17px var(--mono);letter-spacing:.02em;overflow-wrap:anywhere}
.coupon small{display:block;font:italic 13.5px var(--body);color:var(--olive)}
.coupon .cp{font:400 14px var(--head);color:var(--red);letter-spacing:.04em}
.coupon .cp svg{width:18px;height:18px}
.coupon.soon small{color:var(--ochre)}
.coupon.copied{border-color:var(--red);border-style:solid}
.coupon.copied .cp::after{content:" скопировано"}
.coupon.dead{opacity:.55;cursor:default;text-decoration:line-through;text-decoration-color:var(--red)}
.coupon.dead small{color:var(--ink-3)}
.codes-strip{display:flex;gap:8px;flex-wrap:wrap}
.code{font:700 14px var(--mono);border:1.5px dashed var(--ink-2);padding:5px 9px;background:var(--paper-2);cursor:pointer}
.modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.mode{position:relative;display:flex;flex-direction:column;gap:6px;min-height:190px;padding:18px;text-decoration:none;background:var(--paper-2);box-shadow:var(--shadow);transition:transform .15s}
.mode:hover{transform:rotate(-.7deg) translateY(-2px)}
.mode .art{height:84px;color:var(--ink);opacity:.85;margin-bottom:4px}
.mode .art svg{height:100%;width:auto}
.mode b{font:400 25px/1 var(--head)}
.mode span{font-size:14.5px;color:var(--ink-2)}
.mode .cnt{position:absolute;top:14px;right:14px;font:700 11px var(--mono);letter-spacing:.12em;color:var(--blue)}
.mode.big{grid-column:span 2;grid-row:span 2}
.mode.big .art{height:190px}
.mode.big b{font-size:36px}
.mode.wide{grid-column:span 2}
.section-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:46px 0 16px;border-bottom:1px solid var(--ink);padding-bottom:6px}
.section-h h2{margin:0}
.section-h a{font:italic 15px var(--body);color:var(--blue)}

/* ============================== досье (герои, питомцы) */
.hcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:26px 22px}
.hcard{--rc:var(--r-R);display:block;text-decoration:none;color:var(--ink)}
.hcard[data-r=SR]{--rc:var(--r-SR)} .hcard[data-r=SSR]{--rc:var(--r-SSR)} .hcard[data-r=X-SSR]{--rc:var(--r-X)}
.hcard-in{position:relative;background:var(--paper-2);padding:12px 12px 10px;box-shadow:var(--shadow);transition:transform .18s}
.hcard:nth-child(3n+1) .hcard-in{transform:rotate(-.6deg)} .hcard:nth-child(3n+2) .hcard-in{transform:rotate(.5deg)}
.hcard:hover .hcard-in{transform:rotate(0) translateY(-3px)}
.hcard-face{position:relative}
.hcard-face .photo{position:relative;display:block;aspect-ratio:4/5;background:#E6DAC0;border:6px solid #FBF7EC;box-shadow:0 2px 6px rgba(0,0,0,.18);overflow:hidden}
.hcard-face .photo .art-svg,.hcard-face .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hcard-face .clip{position:absolute;top:-16px;left:18px;width:16px;height:42px;border:3px solid #8B8F93;border-radius:10px;z-index:2}
.hcard-plate{padding-top:10px}
.hcard-plate h3{margin:0 0 4px;font-size:22px}
.hcard-plate .meta{display:flex;gap:6px;flex-wrap:wrap;font:italic 14px var(--body);color:var(--ink-2)}
.hcard-plate .tag{font-size:13px;padding:0 6px}
.rbadge{position:absolute;top:14px;right:10px;z-index:2;font:700 12px var(--mono);letter-spacing:.1em;padding:2px 8px;border:2.5px double var(--rc);color:var(--rc);background:rgba(251,247,236,.85);transform:rotate(6deg)}
.fbadge{position:absolute;bottom:10px;right:10px;z-index:2;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--fc);color:var(--fc);background:rgba(251,247,236,.85)}
.fbadge svg{width:16px;height:16px}
.newbadge{position:absolute;top:44px;right:8px;z-index:2;font:700 11px var(--mono);letter-spacing:.1em;color:var(--blue);border:2px solid var(--blue);padding:1px 6px;transform:rotate(-4deg);background:rgba(251,247,236,.85)}
.cmp-toggle{display:flex;align-items:center;gap:6px;margin-top:8px;font:italic 13.5px var(--body);color:var(--ink-2);cursor:pointer}
.rar{font:700 13px var(--mono);letter-spacing:.08em}
.rar-XSSR{color:var(--r-X)} .rar-SSR{color:var(--r-SSR)} .rar-SR{color:var(--r-SR)} .rar-R{color:var(--r-R)}
.filters{display:grid;gap:8px;margin-bottom:26px}
.filters .row{align-items:center}
.filters .search-in{max-width:360px;flex:1}
.splash{position:relative;display:grid;grid-template-columns:minmax(220px,290px) 1fr;gap:clamp(22px,3.4vw,48px);align-items:start;padding-bottom:26px;border-bottom:2px solid var(--ink)}
.splash::after{content:"";position:absolute;left:0;right:0;bottom:-6px;border-bottom:1px solid var(--ink)}
.splash .hcard{pointer-events:none}
.splash .hcard-in{transform:rotate(-1.5deg)}
.splash h1{margin:10px 0 12px}
.splash .lead{font:italic 17.5px/1.55 var(--body);color:var(--ink-2)}
.statbars{display:grid;gap:8px;margin-top:18px;max-width:560px}
.statbar{display:grid;grid-template-columns:170px 1fr 90px;gap:12px;align-items:center;font:400 15px var(--head);letter-spacing:.02em;color:var(--ink-2)}
.statbar b{font:700 15px var(--mono);color:var(--ink);text-align:right}
.statbar .bar i{background:repeating-linear-gradient(135deg,var(--fc,var(--ink)) 0 3px,transparent 3px 6px)}
.skills{display:grid;gap:14px}
.skill{position:relative;padding:14px 18px 14px 64px;background:var(--paper-2);box-shadow:var(--shadow)}
.skill .sk-ico{position:absolute;left:16px;top:14px;width:34px;height:34px;display:grid;place-items:center;border:2px solid var(--red);border-radius:50%;font:700 15px var(--mono);color:var(--red);transform:rotate(-8deg)}
.skill header{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.skill h3{margin:0 0 4px;font-size:21px}
.skill header>span{font:italic 14px var(--body);color:var(--ink-3)}
.skill p{margin:6px 0 0}
.lvl-pick{display:flex;align-items:center;gap:10px;margin-top:12px}
.lvl-pick input[type=range]{flex:1}
.tabs{display:flex;gap:4px;margin:30px 0 0;overflow-x:auto;padding:0 0 0 6px;border-bottom:1.5px solid var(--ink)}
.tabs button{position:relative;top:1.5px;background:var(--paper-3);border:1.5px solid var(--ink);border-bottom:0;padding:8px 18px 7px;font:400 17px var(--head);letter-spacing:.03em;color:var(--ink-2);cursor:pointer;white-space:nowrap;border-radius:8px 8px 0 0}
.tabs button:hover{color:var(--ink);background:var(--paper-2)}
.tabs button[aria-selected=true]{background:var(--paper-2);color:var(--red);border-bottom:1.5px solid var(--paper-2)}
.tab-body{background:var(--paper-2);padding:clamp(16px,2.2vw,26px);box-shadow:var(--shadow);margin-bottom:var(--gap)}
.tab-body .panel{box-shadow:none;border:1px solid var(--line-2);background:rgba(234,223,196,.35)}
.tab-body .tbl-wrap{box-shadow:none;border:1px solid var(--line-2)}
.tab-body .skill{box-shadow:none;border-bottom:1px solid var(--line-2);background:none;padding-left:56px}
.tab-body .skill .sk-ico{left:6px}
.pet-rec{display:grid;gap:3px;border-left:3px solid var(--blue);padding:4px 0 4px 14px}

/* ============================== здания, справочник */
.bcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.bcard{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:16px 18px;text-decoration:none;background:var(--paper-2);box-shadow:var(--shadow);transition:transform .15s}
.bcard:hover{transform:rotate(-.6deg) translateY(-2px)}
.bcard h3{margin:0 0 3px;font-size:21px}
.bcard .small{font-style:italic}
.bglyph{width:52px;height:52px;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:50%;color:var(--ink);flex:none}
.bglyph svg{width:26px;height:26px}
.lvlbadge{position:absolute;right:14px;top:12px;font:700 11px var(--mono);letter-spacing:.1em;color:var(--blue)}
.res{display:inline-flex;gap:6px;align-items:center}
.calc-out{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:0 22px;margin-top:16px}
.calc-out div{position:relative;padding:10px 0 8px 38px;border-bottom:1px solid var(--line-2)}
.calc-out div .ri{position:absolute;left:0;top:12px;width:28px;height:28px;color:var(--rc,var(--ink))}
.calc-out div .ri svg{width:24px;height:24px}
.calc-out b{display:block;font:700 22px/1.1 var(--mono)}
.calc-out span{font:italic 13.5px var(--body);color:var(--ink-3)}
.rtree{display:grid;grid-template-columns:290px 1fr;gap:var(--gap)}
.rlist{max-height:70vh;overflow:auto;background:var(--paper-2);box-shadow:var(--shadow)}
.rlist button{display:flex;justify-content:space-between;width:100%;text-align:left;background:none;border:0;border-bottom:1px dotted var(--line-2);padding:9px 14px;cursor:pointer;font:400 15.5px var(--body);color:var(--ink)}
.rlist button span:last-child{font:700 12px var(--mono);color:var(--ink-3)}
.rlist button:hover{background:rgba(194,54,31,.06)}
.rlist button[aria-current=true]{color:var(--red);background:rgba(194,54,31,.08)}

/* ============================== события */
.ar{display:grid;grid-template-columns:minmax(300px,400px) 1fr;gap:calc(var(--gap) + 10px);align-items:start}
.slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border-top:1.5px solid var(--ink);border-left:1px solid var(--line-2)}
.slots div{position:relative;padding:7px 6px;min-height:52px;font-size:13px;line-height:1.3;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:var(--paper-2)}
.slots div b{font:700 11px var(--mono);color:var(--ink-3);display:block}
.slots div.now{z-index:1}
.slots div.now::after{content:"";position:absolute;inset:2px -4px;border:2.5px solid var(--red);border-radius:50% 46% 52% 48%/55% 50% 50% 45%;transform:rotate(-3deg)}
.slots div.past{color:var(--ink-3);text-decoration:line-through;text-decoration-color:rgba(31,39,38,.35)}
.act-hero{--a:var(--red)}.act-building{--a:var(--ochre)}.act-training{--a:var(--f-str)}.act-research{--a:var(--blue)}.act-gear{--a:var(--violet)}.act-titan{--a:var(--teal)}
.slots div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--a)}

/* ============================== аккаунт, тарифы */
.auth{max-width:440px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:calc(var(--gap) + 6px)}
.plan{position:relative;display:grid;gap:10px;align-content:start;padding:24px 22px;background:var(--paper-2);box-shadow:var(--shadow)}
.plan:nth-child(2){transform:rotate(.8deg)}
.plan.best{outline:2px solid var(--ink);outline-offset:-8px}
.plan.best::before{content:"";position:absolute;width:100px;height:26px;background:var(--tape);top:-12px;left:36%;transform:rotate(-3deg)}
.plan h3{margin:0;font-size:24px}
.plan .price{font:700 40px/1 var(--mono)}
.plan .price small{display:block;font:italic 14px var(--body);color:var(--ink-3);margin-top:6px}
.crystal-wrap{display:grid;place-items:center;min-height:200px}
.crystal{display:none}
.dopusk{position:relative;width:260px;padding:22px 20px;background:#FBF7EC;box-shadow:var(--shadow);transform:rotate(3deg);font:italic 14px var(--body);color:var(--ink-2)}
.dopusk b{display:block;font:400 26px var(--head);color:var(--ink);font-style:normal;margin-bottom:6px}
.dopusk .stamp{position:absolute;right:-14px;bottom:-12px;font-size:15px;transform:rotate(-12deg)}
.dopusk .ruled{height:1px;background:var(--line-2);margin:10px 0}
.feat{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.feat .fi{width:26px;height:26px;display:grid;place-items:center;border:2px solid var(--red);border-radius:50%;color:var(--red);transform:rotate(-8deg)}
.feat .fi svg{width:14px;height:14px}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px) rotate(-1deg);background:var(--paper-2);color:var(--ink);padding:12px 22px;font:italic 16px var(--body);box-shadow:var(--shadow);opacity:0;transition:.25s;z-index:100;pointer-events:none}
.toast::before{content:"";position:absolute;width:70px;height:20px;background:var(--tape);top:-9px;left:40%;transform:rotate(-4deg)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) rotate(-1deg)}
.err{color:var(--red);font-style:italic;font-size:14.5px}
.empty{padding:34px;text-align:center;font-style:italic;color:var(--ink-2);border:1.5px dashed var(--line-2)}
.skeleton{height:240px;background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(31,39,38,.05) 12px 13px);animation:sk 1.4s infinite}
@keyframes sk{50%{opacity:.5}}
details.more summary{cursor:pointer;color:var(--blue);font-style:italic}
.prose{font-size:17px}
.prose h2{margin-top:1.4em;border-bottom:1px solid var(--ink);padding-bottom:4px}
.prose li{margin:.35em 0;max-width:70ch}
.callout{position:relative;margin:18px 0;padding:14px 18px;background:var(--paper-2);box-shadow:var(--shadow);font-style:italic}
.callout::before{content:"";position:absolute;width:80px;height:22px;background:var(--tape);top:-10px;left:22px;transform:rotate(-3deg)}
.squad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.slotbox{border:1.5px dashed var(--ink-3);padding:12px;min-height:120px;display:grid;gap:8px;align-content:start}
.slotbox.filled{border-style:solid;border-color:var(--ink);background:rgba(244,236,216,.6)}
.fav{background:none;border:0;cursor:pointer;color:var(--ink-3);padding:4px;vertical-align:middle}
.fav[aria-pressed=true]{color:var(--red)}
.fav[aria-pressed=true] svg{fill:currentColor}
.fav svg{width:26px;height:26px}
.emblem{--c:var(--ink);display:inline-grid;place-items:center;width:var(--s,48px);height:var(--s,48px);border:1.5px solid var(--c);border-radius:50%;font:400 calc(var(--s,48px)*.42) var(--head);color:var(--c);flex:none}
.f-Силач{--c:var(--f-str);--fc:var(--f-str)} .f-Разбойник{--c:var(--f-rog);--fc:var(--f-rog)} .f-Воздухоплаватель{--c:var(--f-air);--fc:var(--f-air)} .f-Мореплаватель{--c:var(--f-sea);--fc:var(--f-sea)}

/* ============================== адаптив */
@media (max-width:1180px){
  .modes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-hero{grid-template-columns:1fr}
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
}
@media (max-width:880px){
  :root{--rail:0px}
  .shell{grid-template-columns:1fr}
  .rail{display:none}
  .brand-mobile{display:block}
  .coords{display:none}
  .topbar{padding-top:14px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;z-index:40;background:var(--paper-2);border-top:1.5px solid var(--ink);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 16px rgba(90,66,24,.12)}
  .tabbar a{display:grid;justify-items:center;gap:2px;font:400 12px var(--head);letter-spacing:.03em;color:var(--ink-2);text-decoration:none;padding:4px 2px}
  .tabbar a svg{width:22px;height:22px}
  .tabbar a[aria-current=page]{color:var(--red)}
  .g2,.g3,.ar,.rtree{grid-template-columns:1fr}
  .splash{grid-template-columns:1fr}
  .splash>.hcard{max-width:230px}
  .statbar{grid-template-columns:120px 1fr 80px}
  .search kbd{display:none}
  .top-actions .btn.ghost,.top-actions .btn .lbl{display:none}
  .diorama{height:300px;margin-top:0}
  .hud{transform:none}
  .slots{grid-template-columns:repeat(3,minmax(0,1fr))}
  .squad{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mode.big{grid-row:span 1}
  .mode.big .art{height:110px}
}
@media (max-width:560px){
  .modes{grid-template-columns:1fr}
  .mode.big,.mode.wide{grid-column:auto}
  .hcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .hcard-plate h3{font-size:18px}
  .stats-strip{grid-template-columns:1fr 1fr}
  body{font-size:15.5px}
  .home-hero h1{font-size:clamp(48px,15vw,70px)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
#view:focus{outline:none}
form[data-arms-setup]{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
form[data-arms-setup] label:first-child,form[data-arms-setup] button{grid-column:1/-1}
form[data-arms-setup] label{width:auto!important;min-width:0!important}

/* ============================== картинки из игры: «вырезка из бумаги» */
.hcard-face .photo img.cutout{inset:auto;left:4%;right:4%;bottom:2%;top:7%;width:92%;height:91%;object-fit:contain;object-position:center bottom;
  filter:drop-shadow(1.6px 0 0 #FBF7EC) drop-shadow(-1.6px 0 0 #FBF7EC) drop-shadow(0 1.6px 0 #FBF7EC) drop-shadow(0 -1.6px 0 #FBF7EC) drop-shadow(3px 4px 2px rgba(31,39,38,.32));transition:transform .25s}
.hcard:hover .photo img.cutout{transform:translateY(-3px) rotate(-1deg)}
.splash .photo img.cutout{top:4%;height:94%}
.bimg{width:76px;height:76px;object-fit:contain;flex:none;filter:drop-shadow(2px 3px 2px rgba(31,39,38,.25))}
.bcard:hover .bimg{transform:rotate(-4deg) scale(1.05);transition:transform .2s}
.page-head .head-cut{height:150px;width:auto;object-fit:contain;margin:-20px 0 -10px;filter:drop-shadow(1.6px 0 0 #FBF7EC) drop-shadow(-1.6px 0 0 #FBF7EC) drop-shadow(0 1.6px 0 #FBF7EC) drop-shadow(0 -1.6px 0 #FBF7EC) drop-shadow(4px 6px 3px rgba(31,39,38,.3));transform:rotate(3deg)}
.page-head .head-cut.sm{height:96px}
.page-head .head-side{display:flex;align-items:flex-end;gap:20px}
.page-head .head-side .head-cut{height:190px;margin-top:-60px}
.page-head .pinned{width:200px;height:auto;border:7px solid #FBF7EC;box-shadow:var(--shadow);transform:rotate(3deg);margin:-30px 10px -10px 0}
.pinned-fig{position:relative;margin:4px 0 22px;padding:0;display:inline-block;max-width:100%}
.pinned-fig img{display:block;max-width:100%;width:520px;border:8px solid #FBF7EC;box-shadow:var(--shadow);transform:rotate(-1.2deg)}
.pinned-fig .tape{top:-10px;left:40%}
.calc-out div .ri.img img{width:30px;height:30px;object-fit:contain}
@media (max-width:880px){
  .page-head .head-cut,.page-head .head-side .head-cut{height:110px;margin:0}
  .page-head .pinned{width:140px;margin:0}
  .bimg{width:60px;height:60px}
}
.pinned-fig{float:right;width:min(340px,42%);margin:6px 0 18px 28px}
.pinned-fig img{width:100%}
@media (max-width:880px){.pinned-fig{float:none;width:min(320px,100%);margin:0 0 18px}}