/* Стиль «каталог Patron». Цвета, шрифты и приёмы описаны в bot/design/STYLE.md. */

@font-face{font-family:'Valve Oracle';src:url(../fonts/valveoracle-semibold.ttf) format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Valve Pulp';src:url(../fonts/valvepulp-bold.ttf) format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Jost';font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/jost-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Jost';font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/jost-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:italic;font-weight:400 500;font-display:swap;src:url(../fonts/jost-italic-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Jost';font-style:italic;font-weight:400 500;font-display:swap;src:url(../fonts/jost-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Amatic SC';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/amatic-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Amatic SC';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/amatic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ground:#0d0e0a; --cream:#ffefd7; --cream-2:#c9c0a8; --mint:#70f8c1; --orange:#e58a00; --orange-2:#f09a3a;
  --kraft:#a39272; --band:#ead29e; --band-3:#c28f55; --band-4:#544a43;
  --ink:#20130a; --ink-2:#3b2710; --ink-3:#2c1c0c; --black:#120d07; --frame:#8d5a1a;
  --weapon:#e58a00; --vitality:#7cbc1d; --spirit:#9a6bc4;
  --oracle:'Valve Oracle','Alegreya',Georgia,serif;
  --num:'Valve Oracle','Piazzolla',Georgia,serif;
  --pulp:'Valve Pulp','Dela Gothic One',sans-serif;
  --text:'Jost',system-ui,sans-serif;
  --safe-bottom:max(env(safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px));
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .85 0 0 0 0 .65 1 0 0 0 -.47'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23s)'/%3E%3C/svg%3E");
  --torn:polygon(0 0,100% 0,100% calc(100% - 5px),93% 100%,81% calc(100% - 4px),64% 100%,47% calc(100% - 3px),30% 100%,14% calc(100% - 5px),0 calc(100% - 1px));
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--ground);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--cream);font:15px/1.35 var(--text);-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  background-color:var(--ground);background-image:radial-gradient(130% 420px at 12% 0,rgba(150,62,18,.3),transparent 62%),var(--grain)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;cursor:pointer}
img{display:block}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

#app{display:flex;flex-direction:column;max-width:480px;min-height:100vh;min-height:100dvh;margin:0 auto;padding-bottom:calc(116px + var(--safe-bottom))}
#app.plain{padding-bottom:24px}

/* ---------- общие детали ---------- */
.kraft{background-color:var(--kraft);color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .1 0 0 0 0 .04 1.2 0 0 0 -.46'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .13 0 0 0 0 .05 1.5 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23b)'/%3E%3C/svg%3E")}
.inkbg{background-color:var(--black);background-image:var(--grain)}
.sheet{display:flex;flex-direction:column;margin:0 8px;clip-path:var(--torn)}
.sheet.busy{opacity:.55}
.card{display:block;flex:none;border-radius:6px;overflow:hidden;box-shadow:0 2px 3px rgba(30,18,6,.55),0 0 0 1px rgba(30,18,6,.28)}
.ticket{display:inline-flex;align-items:center;gap:5px;color:var(--mint);font-family:var(--num);font-weight:900;font-variant-numeric:lining-nums;white-space:nowrap;filter:drop-shadow(0 2px 2px rgba(30,18,6,.5));background:radial-gradient(circle at 0 0,transparent 5px,#15110c 5.5px) 0 0/51% 51% no-repeat,radial-gradient(circle at 100% 0,transparent 5px,#15110c 5.5px) 100% 0/51% 51% no-repeat,radial-gradient(circle at 0 100%,transparent 5px,#15110c 5.5px) 0 100%/51% 51% no-repeat,radial-gradient(circle at 100% 100%,transparent 5px,#15110c 5.5px) 100% 100%/51% 51% no-repeat}
.soul{display:inline-block;flex:none;width:.72em;height:.72em;background:currentColor;-webkit-mask:var(--soul) center/contain no-repeat;mask:var(--soul) center/contain no-repeat;
  --soul:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath d='M64,10.6c29.4,0,53.4,23.9,53.4,53.4S93.4,117.4,64,117.4S10.6,93.4,10.6,64S34.6,10.6,64,10.6z M64,0C28.6,0,0,28.6,0,64s28.6,64,64,64s64-28.6,64-64S99.4,0,64,0z'/%3E%3Cpath d='M91.4,79.9l-11.2-3c2.9-3.6,4.6-8,4.6-13c0-0.1,0-0.2,0-0.2l6.6-1.8c2.8-0.7,4.4-3.6,3.7-6.4c-0.5-1.8-2-3.1-3.7-3.6V52l-13.8-3.8c-3.7-3.1-8.4-5.1-13.6-5.1c-1.4,0-2.7,0.2-4,0.4L58.1,43l33.4-9L88.7,24L36.6,38c-2.3,0.6-3.8,2.6-3.8,5c0,2.4,1.6,4.4,3.8,5l11.2,3c-2.9,3.6-4.6,8.1-4.6,13c0,0.1,0,0.2,0,0.2l-6.6,1.8c-2.8,0.7-4.4,3.6-3.7,6.4c0.5,1.8,2,3.2,3.7,3.7v0.1l13.9,3.8C54.2,83,58.8,85,64,85c1.4,0,2.7-0.2,4-0.4l1.9,0.5l-33.4,9l2.7,10l52.2-14c2.3-0.6,3.8-2.6,3.8-5S93.8,80.6,91.4,79.9z M64,45.3c6.9,0,12.8,3.8,16.1,9.3l-34.8,9.3C45.4,53.6,53.7,45.3,64,45.3z M47.9,73.5l34.8-9.4C82.6,74.4,74.3,82.7,64,82.7C57.1,82.7,51.2,79,47.9,73.5z'/%3E%3C/svg%3E")}
.pips{display:block;flex:none;width:90px;height:12px;background:linear-gradient(90deg,var(--on,#20130a) var(--p),var(--off,rgba(32,19,10,.26)) var(--p));-webkit-mask:var(--pip) 0 0/9px 12px repeat-x;mask:var(--pip) 0 0/9px 12px repeat-x;
  --pip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 13'%3E%3Cpath d='M2 13V5.5C2 3 3.4 1.2 5 0c1.6 1.2 3 3 3 5.5V13z'/%3E%3C/svg%3E")}
.pips.light{--on:#ffefd7;--off:rgba(255,239,215,.26)}
.pips.mint{--on:#70f8c1;--off:rgba(255,239,215,.3)}
.framed{border:1px solid var(--frame);outline:1px solid rgba(141,90,26,.55);outline-offset:3px}
.hatch{background-image:repeating-linear-gradient(135deg,rgba(32,19,10,.07) 0 1px,transparent 1px 9px)}
.swatch{display:block;flex:none;width:14px;height:6px;box-shadow:0 0 0 1px rgba(32,19,10,.45)}
.weapon{--slot:var(--weapon)} .vitality{--slot:var(--vitality)} .spirit{--slot:var(--spirit)}
.swatch{background:var(--slot)}

.head{display:flex;flex-direction:column;padding:18px 16px 0}
.h1{font:900 43px/.95 var(--oracle);color:var(--cream)}
.h1.big{font-size:46px}
.h2k{font:800 15px/1.2 var(--oracle);letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:lining-nums;color:var(--ink-2)}
.h2m{font:400 15.5px/1.2 var(--pulp);letter-spacing:.02em;color:var(--mint)}
.note{font-size:12.5px;color:var(--cream-2)}
.topbar{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:4px 16px 0 8px}
.back{display:flex;align-items:center;min-height:44px;padding:0 8px;font-size:15px;font-weight:600}
.step{margin-left:auto;font:800 17px var(--oracle);font-variant-numeric:lining-nums}
.gap-top{height:14px}

.cta{display:flex;align-items:center;justify-content:center;width:calc(100% - 32px);min-height:54px;margin:20px 16px 0;border:0;border-radius:999px;background:var(--cream);color:var(--ink);font:16px var(--pulp);box-shadow:0 3px 10px rgba(0,0,0,.5)}
.btn-line{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;margin-top:10px;padding:0 22px;border:1px solid rgba(255,239,215,.5);border-radius:999px;background:transparent;color:var(--cream);font:15px var(--pulp)}
.cta:active,.btn-line:active,.pill:active{transform:translateY(1px)}
.cta[disabled],.btn-line[disabled]{opacity:.6}

/* ---------- нижняя панель ---------- */
.nav{position:fixed;left:50%;bottom:0;z-index:10;display:flex;align-items:flex-end;gap:6px;width:100%;max-width:480px;padding:22px 10px 0;transform:translateX(-50%);pointer-events:none;background:linear-gradient(to bottom,rgba(13,14,10,0),rgba(13,14,10,.94) 46%)}
.nav[hidden]{display:none}
.nav a{pointer-events:auto;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:calc(76px + var(--safe-bottom));padding-bottom:var(--safe-bottom);border-radius:10px 10px 0 0;background:#2f2d22;box-shadow:inset 0 1px 0 #5c5a45;color:var(--cream);font:13.5px/1 var(--pulp)}
.nav a img{width:36px;height:36px;opacity:.9}
.nav a[aria-current=page]{height:calc(88px + var(--safe-bottom));background:var(--band);box-shadow:0 -3px 12px rgba(0,0,0,.55);color:var(--ink)}
.nav a[aria-current=page] img{width:38px;height:38px;opacity:1;filter:brightness(0)}
body:has(input:focus) .nav{display:none} /* клавиатура открыта: панель не занимает место над ней */

/* ---------- обучение ---------- */
.wordmark{font-weight:900;font-size:13px;letter-spacing:.32em;color:var(--orange)}
.wordmark + .h1{margin-top:14px}
.progress{display:flex;align-items:center;gap:10px;margin-top:14px}
.progress b{font-weight:800}
.phases{gap:12px;margin-top:18px;padding:14px 10px 24px}
.phase{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:center;padding:10px;border-radius:6px;background:var(--band);box-shadow:0 3px 8px rgba(30,18,6,.55),0 0 0 1px var(--ink)}
.phase.now{box-shadow:0 3px 8px rgba(30,18,6,.55),0 0 0 3px var(--ink)}
.thumb{width:88px;height:88px}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:center top}
.thumb.contain img{padding:6px 6px 0;object-fit:contain}
.thumb.zoom img{transform:scale(1.25);transform-origin:50% 100%}
.phase-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.phase .ticket{padding:3px 11px;font-size:16px;line-height:1.1;transform:rotate(-2deg)}
.phase:nth-child(even) .ticket{transform:rotate(2deg)}
.phase-title{margin-top:7px;padding-right:22px;font:900 23px/1.02 var(--oracle)}
.phase-fact{margin-top:4px;line-height:1.3}
.pill{display:inline-flex;align-items:center;min-height:36px;margin-top:9px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--cream);font:13.5px var(--pulp)}
.phase .check{position:absolute;top:12px;right:12px;width:22px;height:22px;filter:brightness(0)}

.stage{margin-top:4px;padding:20px 14px 26px}
.stage-head{display:flex;align-items:center;gap:16px}
.stage-head .thumb{width:96px;height:96px;transform:rotate(-3deg);box-shadow:0 4px 8px rgba(30,18,6,.55),0 0 0 1px rgba(30,18,6,.28)}
.stage-head > div{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.stage-when{display:flex;align-items:center;gap:9px;margin-left:-3px}
.stage-when .ticket{padding:3px 11px;font-size:17px;line-height:1.1;transform:rotate(-2deg)}
.stage-goal{margin-top:9px;font:900 29px/.98 var(--oracle);color:var(--ink)}
.video{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;margin-top:18px;border:0;border-radius:999px;background:var(--ink);color:var(--mint);font:14px var(--pulp)}
.video::before{content:'';border-left:13px solid var(--mint);border-top:8px solid transparent;border-bottom:8px solid transparent}
.stage .h2k{margin:22px 0 8px}
.rules{display:flex;flex-direction:column;gap:11px;font-size:16px;line-height:1.3}
.rules b{font:900 22px/1 var(--oracle);font-variant-numeric:lining-nums}
.clock{display:grid;gap:4px;margin-top:2px;text-align:center;font-size:13px;line-height:1.15}
.clock > span{display:flex;flex-direction:column;align-items:center;gap:6px}
.clock .ticket{padding:3px 8px;font-size:15px;line-height:1.1}
.task{display:flex;flex-direction:column;gap:4px;margin-top:24px;padding:12px;font-size:16px;line-height:1.3}
.stage .task .h2k{margin:0}

/* ---------- герои ---------- */
.search{display:flex;align-items:center;height:46px;margin-top:16px;padding:0 14px;border-radius:4px;background:var(--band);box-shadow:inset 0 0 0 1px rgba(32,19,10,.4),0 2px 4px rgba(0,0,0,.55)}
.search input{flex:1;min-width:0;height:44px;border:0;outline:0;border-radius:0;background:transparent;color:var(--ink);font:500 16px var(--text);-webkit-appearance:none;appearance:none}
.search input::placeholder{color:#4a3a22;opacity:1}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.chips{display:flex;gap:6px;margin:8px -16px 0;padding:4px 16px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:44px;padding:0 11px;border:0;border-radius:4px;background:#5f5543;color:var(--cream);font-size:13.5px;font-weight:600}
.chip[aria-pressed=true]{padding:0 12px;background:var(--band);color:var(--ink);font-weight:800;transform:rotate(-2deg)}
.subhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:16px}
.hero-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px;padding:12px 16px 6px}
.hero-card{display:flex;flex-direction:column;min-width:0;background:var(--band);box-shadow:0 3px 6px rgba(0,0,0,.6),0 0 0 1px rgba(234,210,158,.35)}
.hero-art{display:block;aspect-ratio:83/102;overflow:hidden;background-image:radial-gradient(circle,rgba(16,19,13,.3) 1px,transparent 1.5px);background-size:5px 5px}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-name{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:46px;padding:4px 3px 5px;text-align:center;color:var(--ink)}
.hero-name b{font:800 12.5px/1.02 var(--oracle);overflow-wrap:anywhere}
.hero-name span{margin-top:2px;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.empty{padding:20px 16px;font-size:16px;color:var(--cream-2)}

.hero-head{display:flex;align-items:center;gap:16px;padding:6px 16px 22px 20px}
.portrait{display:block;flex:none;width:112px;height:150px;border:4px solid var(--band);border-radius:4px;overflow:hidden;background-image:radial-gradient(circle,rgba(16,19,13,.3) 1.1px,transparent 1.6px);background-size:6px 6px;box-shadow:0 6px 14px rgba(0,0,0,.6);transform:rotate(-3deg)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-info{display:flex;flex-direction:column;min-width:0}
.hero-title{font:900 50px/.95 var(--oracle);overflow-wrap:anywhere}
.hero-title.mid{font-size:38px}
.hero-title.small{font-size:30px}
.stats{display:flex;gap:22px;margin-top:14px}
.stat{display:flex;flex-direction:column}
.stat b{font:900 26px/1 var(--num);font-variant-numeric:lining-nums}
.stat.good b{color:var(--mint)}
.stat span{margin-top:2px;font-size:12.5px;color:var(--cream-2)}

.tabs{display:flex;gap:4px;padding:0 18px}
.tab{flex:1;min-height:40px;margin-top:4px;border:0;border-radius:8px 8px 0 0;background:#6e624d;color:#f4e6c8;font-size:13.5px;font-weight:600}
.tab[aria-pressed=true]{min-height:44px;margin-top:0;color:var(--ink);font-weight:800}
.tab.kraft[aria-pressed=false]{background-image:none;background-color:#6e624d;color:#f4e6c8}
.build{padding:14px 12px 22px}
.banner{display:flex;flex-direction:column;align-items:center;padding:14px 20px 12px;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%,12px 50%)}
.banner h2{font-weight:900;font-size:27px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--band)}
.banner span{margin-top:7px;padding-top:6px;border-top:1px solid #b86f1e;font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;text-align:center;color:var(--orange-2)}

.tier{position:relative;margin-top:34px;padding:7px 10px 6px}
.tier > .ticket{position:absolute;top:-17px;left:-5px;padding:4px 13px;font-size:22px;line-height:1.1;transform:rotate(-3deg)}
.tier.t2 > .ticket{transform:rotate(2deg)}
.tier.t3 > .ticket{transform:rotate(-2deg)}
.tier-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 8px;min-height:22px;margin:0 0 4px 108px}
.tier.t1 .tier-head{margin-left:94px}
.tier.t4{margin-top:36px;padding:10px 12px 8px;border:1px solid var(--black);outline:1px solid #b8a37a;outline-offset:-5px;color:var(--cream)}
.tier.t4 > .ticket{top:-19px}
.tier.t4 .tier-head{margin-left:110px;margin-right:4px}
.tier.t4 .h2k{color:var(--band)}

.line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;font-size:15px;font-weight:500;line-height:1.3}
.foot{margin:18px 2px 0;font-size:12.5px;line-height:1.4}
.sheet-note{margin:16px 2px 4px;font-size:16px;line-height:1.4}

/* ---------- предметы ---------- */
.cat-tabs{margin-top:16px}
.cat-tabs .tab{background:var(--dim);color:var(--cream)}
.cat-tabs .tab.weapon{--dim:#8a560c} .cat-tabs .tab.vitality{--dim:#4f6b16} .cat-tabs .tab.spirit{--dim:#5e3f80}
.cat-tabs .tab[aria-pressed=true]{background:var(--slot);color:var(--ink)}
.catalog{padding:6px 12px 24px;border-top:5px solid var(--slot,var(--ink))}
.catalog .tier:first-child{margin-top:30px}
.row{display:grid;grid-template-columns:60px minmax(0,1fr);gap:12px;align-items:center;padding:6px 0}
.row .card{width:60px;height:60px;background:var(--band)}
.row .card.marked{border-top:4px solid var(--slot)}
.row .card img{width:100%;height:100%;object-fit:cover}
.row-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.row-name{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 8px}
.row-name b{font:800 17.5px/1.1 var(--oracle)}
.tag{padding:1px 6px 2px;background:var(--ink);color:var(--cream);font:10.5px/1.2 var(--pulp)}
.t4 .tag{background:var(--band);color:var(--ink)}
.row .line{-webkit-line-clamp:3;font-size:14.5px;font-weight:400}

.item{margin-top:4px;padding:20px 14px 26px}
.item-head{display:flex;align-items:flex-start;gap:16px}
.item-art{background:var(--band);border-top:6px solid var(--slot);transform:rotate(-3deg);box-shadow:0 4px 8px rgba(30,18,6,.55),0 0 0 1px rgba(30,18,6,.28)}
.item-art img{width:132px;height:132px;object-fit:cover}
.item-head > div{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-top:2px}
.item-kind{display:flex;align-items:center;gap:6px;font:800 13px/1.2 var(--oracle);letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:lining-nums;color:var(--ink-2)}
.item-title{margin-top:8px;font:900 34px/.95 var(--oracle);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
.item-title.small{font-size:26px}
.item-en{margin-top:5px;font-style:italic;font-size:14px;color:var(--ink-3)}
.item-head .ticket{margin-top:10px;padding:4px 13px;font-size:22px;line-height:1.1;transform:rotate(-3deg)}
.item .h2k{margin:24px 0 2px}
.leader{display:flex;align-items:baseline;gap:8px;padding:6px 0 2px}
.leader span{font-size:16px;font-weight:500}
.leader i{flex:1;min-width:12px;border-bottom:2px dotted rgba(32,19,10,.55);transform:translateY(-4px)}
.leader b{font:900 24px/1 var(--num);font-variant-numeric:lining-nums;white-space:nowrap}
.effect{margin-top:4px;font-size:15.5px;line-height:1.4}
.from{display:flex;align-items:center;gap:12px;margin-top:22px;padding:10px;font-size:14.5px;line-height:1.35}
.from .card{background:var(--band);border-top:4px solid var(--slot)}
.from .card img{width:62px;height:56px;object-fit:cover}
.from b{font-weight:700}
.item-share{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:14.5px}
.item-share b{font-weight:800}
.why{display:flex;flex-direction:column;gap:6px;padding:22px 18px 0}
.why p{font-size:15.5px;line-height:1.45}
.why p + h2{margin-top:14px}

/* ---------- вход и состояния ---------- */
.gate{display:flex;flex-direction:column;padding:26px 16px 0}
.gate p{margin-top:14px;font-size:16px;line-height:1.4}
.gate .cta{width:100%;margin:22px 0 0}
.gate .warn{color:var(--orange-2)}
.state{display:flex;flex-direction:column;align-items:flex-start;padding:26px 16px 0;font-size:16px;line-height:1.4}
.state .btn-line{width:auto;margin-top:16px}
.wait{height:3px;margin:0 16px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--mint),transparent) 0 0/40% 100% no-repeat;animation:wait 1.1s linear infinite}
@keyframes wait{from{background-position:-40% 0}to{background-position:140% 0}}
@media (prefers-reduced-motion:reduce){.wait{animation:none;background:var(--mint);opacity:.5}}

.gate b{font-weight:700;white-space:nowrap}

/* ---------- сборка игрока на экране героя ---------- */
.group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.minis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.mini{display:flex;flex-direction:column;background:var(--band);border-top:4px solid var(--slot)}
.mini img{width:100%;aspect-ratio:1;object-fit:cover}
.mini span{display:flex;align-items:center;justify-content:center;flex:1;min-height:30px;padding:2px 2px 3px;font:800 10.5px/1.02 var(--oracle);text-align:center;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere;color:var(--ink)}
.mini.tier-3{background:var(--band-3)}
.mini.tier-4{background:var(--band-4)}
.mini.tier-4 span{color:var(--cream)}

/* ---------- экран героя: кто он, умения, прокачка, предметы ---------- */
.hero-sub{margin-top:6px;font-style:italic;font-size:15px;line-height:1.25;color:var(--cream-2)}
.traits{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:0 16px 0 20px}
.strip{padding:3px 10px 4px;background:var(--band);color:var(--ink);font:800 13.5px/1.1 var(--oracle);box-shadow:0 2px 4px rgba(0,0,0,.5);transform:rotate(-2deg)}
.strip:nth-child(even){transform:rotate(1.5deg)}
.traits .note{margin-left:2px}
.playstyle{padding:14px 18px 0 20px;font-size:15.5px;line-height:1.42}
.skills{display:flex;flex-direction:column;gap:12px;padding:22px 16px 24px 20px}
.skills .subhead{margin-top:8px}
.skill{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center}
.skill-icon,.step-icon{position:relative;display:flex;flex:none;align-items:center;justify-content:center;border-radius:50%;background:var(--black)}
.skill-icon{width:52px;height:52px;box-shadow:0 0 0 2px var(--band),0 3px 6px rgba(0,0,0,.6)}
.skill-icon img{width:36px;height:36px;object-fit:contain}
.skill-icon b,.step-icon b{position:absolute;right:-3px;bottom:-3px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-family:var(--num);font-weight:900;font-variant-numeric:lining-nums;line-height:1}
.skill-icon b{width:19px;height:19px;background:var(--band);color:var(--ink);font-size:12.5px}
.skill-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.skill-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;font:800 17.5px/1.1 var(--oracle)}
.skill-name .tag{background:var(--band);color:var(--ink)}
.skill-line{font-size:14.5px;line-height:1.3;color:var(--cream-2)}
.order{display:grid;grid-template-columns:74px minmax(0,1fr);gap:10px;align-items:center;font-size:14.5px}
.order > div{display:flex;flex-wrap:wrap;gap:9px 7px}
.step-icon{width:36px;height:36px;box-shadow:0 0 0 1px #6b674f}
.step-icon img{width:24px;height:24px;object-fit:contain}
.step-icon b{width:16px;height:16px;background:var(--mint);color:var(--ink);font-size:11px}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:14px;font-size:12.5px;font-weight:500}
.legend span{display:flex;align-items:center;gap:5px}
.legend .fresh{margin-left:auto}
.group{margin-top:20px;padding:10px 10px 12px}
.group-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.group-head .ticket{padding:2px 9px;font-size:15px;line-height:1.1}
.spare summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-top:22px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--cream);font:13.5px var(--pulp);list-style:none;cursor:pointer}
.spare summary::-webkit-details-marker{display:none}
.spare summary::after{content:'›';font:900 22px/1 var(--oracle);transform:rotate(90deg)}
.spare[open] summary::after{transform:rotate(-90deg)}