/* ===== ЭКРАНЫ: меню · профиль · выбор · кейсы · медиа · студия ===== */

/* ===== ГЛАВНОЕ МЕНЮ ===== */
.menu-head{position:absolute;top:calc(24px + var(--safe-t));left:24px;z-index:4}
.kicker{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;color:var(--neon-soft);margin-bottom:4px}
.title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:64px;line-height:.85;
  color:var(--bone);text-shadow:0 0 30px var(--accent-soft);transition:text-shadow .35s ease}
.role{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--muted);margin-top:8px}

.menu-foot{position:absolute;left:18px;right:18px;bottom:calc(46px + var(--safe-b));z-index:4}
.quote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;line-height:1.55;
  color:var(--neon-soft);opacity:.8;margin:0 6px 14px}
.menu{list-style:none;display:flex;flex-direction:column;gap:2px}
.menu li{position:relative;display:flex;align-items:center;gap:10px;min-height:50px;padding:0 16px;cursor:pointer;
  border:1px solid transparent;overflow:hidden;transition:.18s;
  opacity:0;transform:translateY(14px);animation:rise .5s forwards}
.menu li::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,color-mix(in srgb, var(--neon) 28%, transparent),transparent);transition:.3s}
.menu li .lbl{font-family:'JetBrains Mono',monospace;font-size:16px;letter-spacing:.14em;color:var(--neon-soft);transition:.18s;z-index:1;white-space:nowrap}
.menu li .sub{font-size:11px;color:var(--muted);letter-spacing:.02em;z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:380px){.menu li .lbl{font-size:14px;letter-spacing:.07em}.menu li{padding:0 12px;gap:6px}}
.menu li.sel{border-color:var(--bordeaux)}
.menu li.sel::before{width:100%}
.menu li.sel .lbl{color:#fff;text-shadow:0 0 12px var(--neon)}
.menu li:active{transform:scale(.98)}
.menu li .bar{margin-left:auto;position:relative;width:50px;height:5px;background:var(--bordeaux-2);border:1px solid var(--bordeaux);overflow:hidden;opacity:0;transition:.2s}
.menu li.sel .bar{opacity:1}
.menu li.sel .bar::after{content:'';position:absolute;left:-9px;top:0;width:calc(100% + 18px);height:3px;
  background:repeating-linear-gradient(90deg,var(--neon) 0 5px,transparent 5px 9px);animation:slide 1s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(9px)}}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
.menu li:nth-child(1){animation-delay:.05s}.menu li:nth-child(2){animation-delay:.11s}
.menu li:nth-child(3){animation-delay:.17s}.menu li:nth-child(4){animation-delay:.23s}
.menu li:nth-child(5){animation-delay:.29s}.menu li:nth-child(6){animation-delay:.35s}

.news{display:none}

/* ===== ОБЩИЙ НИЖНИЙ ЛИСТ (character / armory) ===== */
.sheet{position:absolute;left:0;right:0;bottom:0;top:45%;z-index:11;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(8,8,10,0) 0%,rgba(8,8,10,.78) 14%,rgba(8,8,10,.94) 32%,#08080a 100%);
  padding-bottom:calc(36px + var(--safe-b))}

/* табы */
.tabs{display:flex;gap:8px;padding:14px 16px 6px;z-index:5}
.tab{flex:1;text-align:center;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;
  color:var(--muted);padding:11px 0;border:1px solid var(--line);cursor:pointer;transition:.16s;min-height:44px}
.tab.on{color:#fff;border-color:var(--accent);background:color-mix(in srgb, var(--bordeaux) 18%, transparent);text-shadow:0 0 10px var(--accent)}
.panel{flex:1;overflow-y:auto;padding:6px 16px 12px;-webkit-overflow-scrolling:touch}
.pane{display:none;animation:fadeIn .3s ease}.pane.on{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.slot{position:relative;display:flex;align-items:center;gap:12px;padding:12px;border:1px solid transparent;cursor:pointer;transition:.16s;min-height:56px}
.slot:active{transform:scale(.99)}
.slot.on{border-color:var(--bordeaux);background:color-mix(in srgb, var(--bordeaux) 14%, transparent)}
.slot .ic{width:36px;height:36px;flex:0 0 36px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--neon-soft)}
.slot .n{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.1em;color:var(--bone)}
.slot .v{font-size:11px;color:var(--muted)}
.stat-row{margin-bottom:16px}
.stat-row .lab{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.stat-row .lab b{color:var(--neon-soft)}
/* раскрытие ПАРАМЕТРОВ: интро + подпись-смысл под каждой шкалой */
.attrs-intro{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--muted);margin:2px 0 14px;opacity:.9}
.stat-row .cap{font-size:11px;line-height:1.4;color:var(--neon-soft);opacity:.7;margin-top:5px}
.meter{height:7px;background:color-mix(in srgb, var(--bordeaux-2) 60%, #000);border:1px solid var(--bordeaux-2);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--bordeaux),var(--accent));
  box-shadow:0 0 8px var(--accent);transition:width .8s cubic-bezier(.4,0,.2,1)}
.save{margin:8px 16px 0;text-align:center;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.16em;
  color:#fff;border:1px solid var(--bordeaux);background:color-mix(in srgb, var(--bordeaux) 25%, transparent);padding:14px;cursor:pointer;min-height:48px}
.save:active{transform:scale(.98)}

/* ===== ARMORY: тир-бейджи + детальная панель ===== */
.slot .tier{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;
  padding:3px 8px;border:1px solid var(--line);align-self:center}
.slot .tier.core{color:var(--neon-soft)}
.slot .tier.pro{color:var(--neon);border-color:var(--bordeaux)}
.arm-detail{flex:0 0 auto;border:1px solid var(--line);background:rgba(12,9,12,.6);padding:14px;margin:6px 16px 0}
.arm-detail .dh{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.arm-detail .dh .di{width:30px;height:30px;flex:0 0 30px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--neon-soft)}
.arm-detail .dh .dn{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.12em;color:#fff;text-shadow:0 0 10px var(--neon)}
.arm-detail .dd{font-size:12px;line-height:1.5;color:var(--neon-soft);opacity:.85;margin-bottom:14px}
.arm-detail .stat-row{margin-bottom:12px}.arm-detail .stat-row:last-child{margin-bottom:0}

/* ===== AGENT SELECT (#ui-select) ===== */
.select-wrap{position:absolute;left:0;right:0;bottom:0;top:0;z-index:11;display:flex;flex-direction:column;
  justify-content:flex-end;
  background:linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,.2) 30%,rgba(8,8,10,.86) 70%,#08080a 100%);
  padding:0 16px calc(40px + var(--safe-b))}
.select-cards{display:flex;flex-direction:column;gap:14px}
.agent-card{position:relative;display:flex;align-items:center;gap:14px;padding:14px;min-height:88px;cursor:pointer;
  border:1px solid var(--line);background:rgba(12,9,12,.62);transition:.16s;overflow:hidden}
.agent-card:active{transform:scale(.99)}
.agent-card.sel{border-color:var(--accent);background:color-mix(in srgb, var(--bordeaux) 16%, transparent)}
.agent-card .abar{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ac,var(--neon))}
.agent-card .thumb{position:relative;width:60px;height:60px;flex:0 0 60px;border:1px solid var(--line);
  overflow:hidden;background:#0a0809;display:flex;align-items:center;justify-content:center}
.agent-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.agent-card .thumb .ph{font-family:'Cormorant Garamond',serif;font-size:34px;color:color-mix(in srgb, var(--neon) 30%, transparent);font-weight:600;display:none}
.agent-card .thumb.noimg img{display:none}
.agent-card .thumb.noimg .ph{display:block}
.agent-card .cinfo{flex:1;min-width:0}
.agent-card .cn{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:30px;line-height:1;color:var(--bone)}
.agent-card .cr{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--muted);margin-top:6px}
.agent-card .cq{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:12px;line-height:1.4;color:var(--neon-soft);opacity:.8;margin-top:6px}
.agent-card .go{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:18px;color:var(--ac,var(--neon))}
/* двойное подтверждение выбора: подсказка + взведённое состояние + «поп» */
.agent-card .confirm-hint{display:none;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;color:var(--accent-soft);margin-top:6px}
.agent-card.armed{border-color:var(--accent);background:color-mix(in srgb, var(--bordeaux) 20%, transparent);
  box-shadow:0 0 22px color-mix(in srgb, var(--neon) 22%, transparent);animation:cardPop .3s ease}
.agent-card.armed .go{color:#fff;text-shadow:0 0 10px var(--neon)}
@keyframes cardPop{0%{transform:scale(1)}45%{transform:scale(1.03)}100%{transform:scale(1)}}

/* ===== STUB-ЭКРАНЫ (cases / media / studio) ===== */
.stub{position:absolute;inset:0;z-index:11;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;
  background:linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,.3) 35%,rgba(8,8,10,.85) 78%,#08080a 100%)}
.stub .st{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.26em;color:var(--neon-soft);margin-bottom:14px}
.stub .sn{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;color:var(--neon-soft);opacity:.7}
.stub .ss{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--muted);margin-top:10px}

/* ===== CASES / MEDIA / STUDIO (контент-экраны поверх персонажа) ===== */
.screen-intro{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;line-height:1.55;
  color:var(--neon-soft);opacity:.85;padding:4px 4px 14px}

/* карточка-кейс / оффер: рамка как у .agent-card, hover-акцент */
.card{position:relative;display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:12px;
  border:1px solid var(--line);background:rgba(12,9,12,.5);cursor:pointer;transition:.16s;min-height:64px;overflow:hidden}
.card:active{transform:scale(.99)}
.card.on{border-color:var(--accent);background:color-mix(in srgb, var(--bordeaux) 16%, transparent)}
.card .idx{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--accent-soft);
  flex:0 0 auto;align-self:flex-start;margin-top:2px}
.card .body{flex:1;min-width:0}
.card .body .cttl{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:20px;line-height:1.05;color:var(--bone)}
.card .body .csub{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;color:var(--muted);margin-top:6px}
.card .body .cres{font-size:11px;line-height:1.35;color:var(--neon-soft);opacity:.85;margin-top:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .body .cdesc{font-size:12px;line-height:1.5;color:var(--neon-soft);opacity:.85;margin-top:8px}
.card .go{margin-left:auto;align-self:center;font-family:'JetBrains Mono',monospace;font-size:18px;color:var(--accent)}
/* акцент-пилюля результата */
.chip{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;
  color:#fff;border:1px solid var(--bordeaux);background:color-mix(in srgb, var(--bordeaux) 28%, transparent);padding:4px 10px;margin-top:10px}

/* детальный вид кейса (тоггл внутри #ui-cases) */
.case-detail{display:none}
.case-detail.on{display:block;animation:fadeIn .3s ease}
.case-detail .cd-back{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--neon-soft);
  cursor:pointer;border:1px solid var(--line);background:rgba(8,8,10,.5);padding:9px 14px;min-height:40px;
  display:inline-flex;align-items:center;margin-bottom:14px}
.case-detail .cd-back:active{transform:scale(.97)}
.case-detail .cd-ttl{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:26px;line-height:1.05;color:var(--bone)}
.case-detail .cd-sub{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--muted);margin:6px 0 16px}
.case-detail .cd-sec{margin-bottom:16px}
.case-detail .cd-h{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;color:var(--accent-soft);
  border-left:2px solid var(--bordeaux);padding-left:10px;margin-bottom:7px}
.case-detail .cd-t{font-size:13px;line-height:1.6;color:var(--neon-soft);opacity:.9;padding-left:12px}

/* строка-эпизод MEDIA (поверх .slot) */
.ep .ic{font-size:14px}
.ep .ep-no{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--accent-soft)}
.ep .ep-ttl{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.04em;color:var(--bone);margin-top:4px}
.ep .ep-dur{margin-left:auto;align-self:center;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.1em;color:var(--muted)}

/* STUDIO: заголовок + оффер */
.studio-h{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:34px;line-height:1.02;
  color:var(--bone);text-shadow:0 0 24px var(--accent-soft);margin:2px 4px 10px}
.studio-d{font-size:13px;line-height:1.6;color:var(--neon-soft);opacity:.9;padding:0 4px 18px}
.studio-cta{margin:6px 4px 0;text-align:center;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.14em;
  color:#fff;border:1px solid var(--accent);background:color-mix(in srgb, var(--bordeaux) 30%, transparent);padding:16px;cursor:pointer;min-height:52px;
  box-shadow:0 0 18px color-mix(in srgb, var(--neon) 18%, transparent)}
.studio-cta:active{transform:scale(.98)}
.studio-contact{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--muted);
  text-align:center;margin:14px 4px 0}

/* ===== ДЕСКТОП-РЕЖИМ (лёгкое улучшение) ===== */
@media (min-width:900px){
  .title{font-size:96px}
  .menu-head{top:calc(90px + var(--safe-t));left:60px}
  .menu-foot{left:60px;right:auto;width:420px;bottom:70px}
  .menu li{min-height:46px}
  .news{display:block;position:absolute;right:40px;bottom:70px;width:230px;border:1px solid var(--line);
    background:rgba(14,10,13,.7);padding:14px;z-index:6}
  .news .h{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.25em;color:var(--neon-soft);margin-bottom:8px}
  .news .t{font-size:13px;line-height:1.5}.news .t b{color:var(--neon-soft)}
  .sheet{top:auto;height:62%;left:auto;right:0;width:420px;
    background:linear-gradient(90deg,rgba(8,8,10,0) 0%,rgba(8,8,10,.9) 14%,#0a0809 38%);
    border-left:1px solid var(--line)}
  .arm-detail{margin:6px 16px 12px}
}