/* Стили игры, часть «screens»: экраны вне игры в духе BG3: фон, лендинг, вход, главное меню, кампании, лобби. Порядок подключения частей (index.html) важен: поздние правила перекрывают ранние. */
/* ───────────── Экраны вне игры в духе BG3: главное меню, лендинг, вход, комната лобби, окна, уведомления ─────────────
   Фон — сцена привала у реки (r3d-camp.js, menu-bg.js), пока она не собрана и без WebGL — её снимок img/menu/camp.jpg.
   Окно (.bg3-win) — камень, двойная металлическая кайма, гребень по центру верхней кромки, уголки-самоцветы */
.bg3-win, .menu-page, .auth-box, .ui-dlg-box, .event-card, #check-box, .room-panel {
  position: relative; color: var(--bg3-text); border: 1px solid #5a4528; border-radius: var(--radius);
  background: var(--bg3-crest) center top 2px / 200px 22px no-repeat, var(--bg3-tl) top 3px left 3px / 30px no-repeat, var(--bg3-tr) top 3px right 3px / 30px no-repeat,
    var(--bg3-br) bottom 3px right 3px / 30px no-repeat, var(--bg3-bl) bottom 3px left 3px / 30px no-repeat, var(--bg3-stone);
  box-shadow: 0 0 0 1px #000, 0 0 0 4px #14110d, 0 0 0 5px #6e5634, 0 0 0 6px #000, 0 24px 70px rgba(0,0,0,.8), inset 0 0 0 1px rgba(236,220,176,.05);
}
/* заголовок раздела: прописные засечки, черта с самоцветом под ним */
.bg3-h { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .16em; color: var(--gold); font-size: 14.5px; text-align: center;
  padding-bottom: 10px; margin: 0 0 12px; background: var(--bg3-gem) center bottom -8px / 16px no-repeat, linear-gradient(90deg, transparent, rgba(200,171,114,.55), transparent) center bottom / 100% 1px no-repeat; }
@keyframes bg3In { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bg3Fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Фон экранов вне игры: снимок сцены привала ── */
.camp-bg, .menu-bg { position: absolute; inset: 0; background: #07080c url(/img/menu/camp.jpg) center 40% / cover no-repeat; }
.camp-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 62% 45%, transparent 30%, rgba(0,0,0,.65) 100%), linear-gradient(90deg, rgba(4,4,6,.55), transparent 55%); }

/* ── Главная для гостей ── */
.has-token #screen-landing { display: none; }
#screen-landing { overflow-y: auto; overflow-x: hidden; background: #07080c; }
.land-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; }
.land-top { position: relative; z-index: 2; background: none; justify-content: flex-end; padding: 22px 40px; }
.land-top > span:empty { display: none; }
.land-top .logo { font-size: 26px; text-align: left; }
.land-main { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 40px 70px; max-width: 760px; animation: bg3In .6s ease-out; }
.land-main h1 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 6vw, 76px); line-height: 1.02; letter-spacing: .05em;
  background: linear-gradient(180deg, #fff7df 0%, #f0e2b8 45%, #b8955a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 10px rgba(0,0,0,.85)); }
.land-tag { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .32em; color: var(--gold); font-size: 15px; margin-bottom: 18px;
  padding-bottom: 14px; background: linear-gradient(90deg, #c8ab72, transparent) left bottom / 260px 1px no-repeat; text-shadow: 0 1px 6px #000; }
.land-lead { font-size: 19px; line-height: 1.55; margin: 0 0 26px; color: #efe5cf; text-shadow: 0 1px 8px #000, 0 0 2px #000; max-width: 620px; }
.land-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.land-cta.center { justify-content: center; margin-top: 28px; }
.land-btn { font-size: 16px; padding: 12px 26px; }
.land-main .hint { color: #b9ad94; text-shadow: 0 1px 6px #000; }
.land-scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: var(--gold); opacity: .75; }
.land-scroll::after { content: ''; display: block; width: 9px; height: 9px; margin: 6px auto 0; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(45deg); animation: landDown 1.8s ease-in-out infinite; }
@keyframes landDown { 50% { transform: translate(0, 4px) rotate(45deg); } }
.land { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; padding: 50px 24px 46px; }
.land h2 { font-size: 26px; text-transform: uppercase; letter-spacing: .14em; text-align: center; color: var(--gold2); margin: 30px 0 22px;
  padding-bottom: 14px; background: var(--bg3-gem) center bottom -8px / 16px no-repeat, linear-gradient(90deg, transparent, rgba(200,171,114,.6), transparent) center bottom / 70% 1px no-repeat; }
.land-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.land-grid .panel { padding: 18px 20px 20px; background: var(--bg3-tl) top 2px left 2px / 22px no-repeat, var(--bg3-br) bottom 2px right 2px / 22px no-repeat, var(--bg3-stone); }
.land-grid h3 { font-size: 18px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.land-grid .panel p { margin: 0; color: var(--text); }
.land-steps { list-style: none; counter-reset: st; margin: 0 auto; padding: 0; max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
.land-steps li { counter-increment: st; display: flex; gap: 16px; align-items: baseline; font-size: 16.5px; line-height: 1.5; }
.land-steps li::before { content: counter(st, upper-roman); flex: none; width: 38px; font-family: var(--font-display); font-size: 22px; color: var(--gold); text-align: right; }
.land-foot { margin-top: 36px; color: var(--muted); }
@media (max-width: 820px) {
  .land-top { padding: 16px; }
  .land-main { padding: 0 18px 70px; }
  .land-lead { font-size: 17px; }
}

/* ── Вход: окно по центру поверх снимка привала ── */
#screen-auth { position: relative; align-items: center; justify-content: center; padding: 16px; background: #07080c; }
.auth-box { width: 100%; max-width: 400px; padding: 30px 30px 22px; animation: bg3In .35s ease-out; z-index: 1; }
.auth-box .logo { margin-bottom: 2px; }
.auth-box .auth-sub { margin: 0 0 6px; text-align: center; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .24em; font-size: 12px; color: var(--muted); }
.tabs-inline { display: flex; gap: 4px; margin: 14px 0 16px; }
.auth-box .primary { padding: 10px; font-size: 15.5px; }

/* ── Главное меню: слева — название и пункты прямо поверх сцены, справа — открытая страница в окне ── */
#screen-lobbies { position: relative; overflow: hidden; background: #07080c; }
.menu-bg #map-wrap { position: absolute; inset: 0; height: auto; background: transparent; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.menu-bg.shown #map-wrap { opacity: 1; }
.menu-bg #map-wrap > :not(canvas) { display: none !important; }
.menu-bg:not(.live) #map-wrap { display: none; }
/* затемнение слева под пунктами меню и по краям кадра */
.mb-shade { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(3,3,5,.82) 0%, rgba(3,3,5,.55) 20%, rgba(3,3,5,.12) 40%, transparent 55%),
    radial-gradient(ellipse at 60% 48%, transparent 50%, rgba(0,0,0,.5) 100%), linear-gradient(0deg, rgba(3,3,5,.6), transparent 16%); }
.paged .mb-shade { background: linear-gradient(90deg, rgba(3,3,5,.85) 0%, rgba(3,3,5,.6) 30%, rgba(3,3,5,.45) 100%); transition: background .3s; }

.menu { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; gap: 34px; padding: 40px 48px 30px; pointer-events: none; }
.menu > * { pointer-events: auto; }
.menu-nav { width: 340px; flex: none; display: flex; flex-direction: column; min-height: 0; animation: bg3Fade .8s ease-out; }
.mn-logo { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 34px; }
.mn-logo b { font-family: var(--font-display); font-weight: 400; font-size: 54px; line-height: .98; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff7df 0%, #f0e2b8 45%, #b08a50 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.9)) drop-shadow(0 0 22px rgba(200,171,114,.18)); }
.mn-logo i { display: block; width: 210px; height: 18px; margin: 10px 0 6px; background: var(--bg3-crest) left center / 210px 18px no-repeat; opacity: .9; }
.mn-logo small { font-family: var(--font-display); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 6px #000; }
.mn-items { display: flex; flex-direction: column; gap: 2px; }
.mn-items.slide { animation: mnSlide .25s ease-out; }
@keyframes mnSlide { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }

/* пункт: только текст, как в BG3; наведение — золото, тёплая полоса света и ромбы по краям */
.mn-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 14px 7px 22px; text-align: left; white-space: normal;
  background: none; border: 0; border-radius: 0; box-shadow: none; color: #e9dfc8; font-family: var(--font-display); font-size: 25px; letter-spacing: .04em; line-height: 1.15;
  text-shadow: 0 2px 6px rgba(0,0,0,.95), 0 0 2px #000; transition: color .15s, letter-spacing .2s; }
.mn-item::before { content: ''; position: absolute; left: 4px; top: 50%; width: 7px; height: 7px; margin-top: -4px; transform: rotate(45deg) scale(0); background: var(--gold2); box-shadow: 0 0 8px rgba(236,220,176,.8); transition: transform .15s; }
.mn-item::after { content: ''; position: absolute; inset: 2px -30px 2px 0; z-index: -1; opacity: 0; transition: opacity .2s;
  background: radial-gradient(ellipse 60% 70% at 25% 50%, rgba(200,160,90,.28), transparent 75%), linear-gradient(90deg, transparent, rgba(236,220,176,.35) 25%, transparent 70%) left bottom / 100% 1px no-repeat; }
.mn-item:hover:not(:disabled), .mn-item:focus-visible { background: none; box-shadow: none; color: var(--gold2); letter-spacing: .06em; outline: none; }
.mn-item:hover:not(:disabled)::before, .mn-item.on::before { transform: rotate(45deg) scale(1); }
.mn-item:hover:not(:disabled)::after, .mn-item.on::after { opacity: 1; }
.mn-item.on { color: var(--gold2); }
.mn-tx { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }

.mn-item .tab-badge { position: static; font-family: var(--font); font-size: 12px; letter-spacing: 0; }
/* описание пункта под мышью — внизу колонки, как подсказки к пунктам в BG3 */
.mn-desc { min-height: 48px; margin: 20px 0 0 22px; max-width: 310px; color: #d4c8ac; font-style: italic; font-size: 16.5px; line-height: 1.4; text-shadow: 0 1px 6px #000; transition: opacity .2s; }
.mn-desc:empty { opacity: 0; }
.mn-foot { margin-top: auto; padding: 14px 0 0 20px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.mn-link { position: relative; padding: 2px 0; background: none; border: 0; box-shadow: none; color: var(--muted); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; text-shadow: 0 1px 4px #000; }
.mn-link:hover:not(:disabled) { background: none; box-shadow: none; color: var(--gold2); }
.mn-link.fresh::after { content: ''; position: absolute; right: -10px; top: 2px; width: 6px; height: 6px; transform: rotate(45deg); background: #e8b860; box-shadow: 0 0 8px #e8b860; }
/* свой профиль — справа вверху поверх сцены */
.mn-me { position: absolute; top: 24px; right: 30px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; max-width: 280px;
  background: linear-gradient(90deg, rgba(10,8,6,.7), rgba(10,8,6,.4)); border: 1px solid rgba(200,171,114,.3); border-radius: 30px; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.mn-me b { overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); letter-spacing: .06em; font-weight: 400; font-size: 16px; }
.mn-me:hover:not(:disabled) { border-color: var(--gold); background: linear-gradient(90deg, rgba(30,24,16,.85), rgba(14,11,8,.6)); }
.paged .mn-me { display: none; }

/* страница меню — окно справа от пунктов */
.menu-page { flex: 1; min-width: 0; max-width: 1020px; display: flex; flex-direction: column; min-height: 0; padding-top: 18px; animation: bg3In .25s ease-out; }
.mp-head { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 56px 0; position: relative; }
.mp-head h2 { margin: 0; font-size: 26px; text-transform: uppercase; letter-spacing: .14em; text-align: center;
  background: linear-gradient(180deg, #fff7df 0%, #f0e2b8 45%, #c9ad74 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 #000); }
.mp-head::after { content: ''; align-self: stretch; height: 12px; background: var(--bg3-gem) center bottom -2px / 14px no-repeat, linear-gradient(90deg, transparent, #6e5634 15%, #c8ab72 50%, #6e5634 85%, transparent) center 5px / 100% 1px no-repeat; }
.mp-head .spacer { display: none; }
.mp-tabs { display: flex; gap: 0; justify-content: center; }
.mp-tabs:empty { display: none; }
.mp-tabs .tab-btn { flex: none; padding: 6px 22px; }
.mp-x { position: absolute; right: 18px; top: 4px; width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 15px; color: var(--gold);
  background: radial-gradient(circle at 50% 35%, #2a2219, #0b0907 78%) !important; border: 0 !important; box-shadow: 0 0 0 1px #000, 0 0 0 2px #6e5634, 0 0 0 3px #000 !important; }
.mp-x:hover:not(:disabled) { color: var(--gold2); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold2), 0 0 0 3px #000, 0 0 10px rgba(236,220,176,.35) !important; }
.mp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 26px 26px; }
.menu-page .catalog { max-width: none; margin: 0; }
.menu-page .panel { background: var(--bg3-noise), linear-gradient(180deg, rgba(30,25,19,.6), rgba(12,10,8,.7)); box-shadow: 0 0 0 1px #000; }
.mp-sec { margin-bottom: 22px; }
.mp-sec > h3 { font-size: 14.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--gold); text-align: center; padding-bottom: 10px; margin-bottom: 12px;
  background: var(--bg3-gem) center bottom -8px / 16px no-repeat, linear-gradient(90deg, transparent, rgba(200,171,114,.5), transparent) center bottom / 100% 1px no-repeat; }
.mp-sec > .hint { text-align: center; max-width: 640px; margin: 0 auto 10px; }
.mp-form { padding: 16px 18px; border: 1px solid #3a2e1e; border-radius: var(--radius); background: var(--bg3-noise), linear-gradient(180deg, rgba(30,25,19,.75), rgba(12,10,8,.8)); box-shadow: 0 0 0 1px #000; }
.mp-form > p:first-child { margin-top: 0; }
.mp-form .primary.big { display: block; margin: 14px auto 0; min-width: 260px; }
.mf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.mp-narrow { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }

/* кампании: обложки рядом, выбранная — в золотой кайме; ниже — форма лобби */
.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; }
.story-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: 0; text-align: left; white-space: normal; overflow: hidden;
  background: #0b0907 var(--cover, none) center / cover no-repeat; border: 1px solid #3a2e1e; box-shadow: 0 0 0 1px #000; }
.story-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,4,3,.95) 20%, rgba(5,4,3,.4) 65%, rgba(5,4,3,.2)); transition: opacity .2s; }
.story-card > * { position: relative; }
.story-card:hover:not(:disabled) { border-color: var(--gold); background: #0b0907 var(--cover, none) center / cover no-repeat; }
.story-card.on { border-color: var(--gold2); box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(236,220,176,.35), 0 0 22px rgba(236,200,120,.22); }
.sc-ic { position: absolute; top: 12px; left: 14px; font-size: 30px; opacity: .85; }
.sc-tx { padding: 12px 14px 12px; display: block; }
.sc-tx b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 21px; letter-spacing: .05em; color: var(--gold2); margin-bottom: 3px; }
.sc-tx small { color: #c4b89e; font-size: 13.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* открытые лобби и сохранения — строки в кайме */
.lobby-card, .save-card { display: flex; align-items: center; gap: 14px; padding: 11px 14px; margin-bottom: 8px; border: 1px solid #3a2e1e; border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(30,25,19,.8), rgba(12,10,8,.7)); box-shadow: 0 0 0 1px #000; transition: border-color .15s; }
.lobby-card:hover, .save-card:hover { border-color: #6e5634; }
.lobby-card.friend { border-color: rgba(120,190,110,.45); }
.lc-main { flex: 1; min-width: 0; }
.lc-name { font-family: var(--font-display); font-size: 18px; letter-spacing: .04em; color: var(--gold2); }
.lc-meta { color: var(--muted); font-size: 13px; }
.lc-btns { display: flex; gap: 6px; flex: none; }
.empty { color: var(--muted); padding: 22px; text-align: center; font-style: italic; }
#save-list { max-height: 460px; overflow: auto; }
.save-card.auto { border-style: dashed; }
.save-card .sv-icon { font-size: 22px; width: 30px; text-align: center; opacity: .85; }
.save-card .sv-main { flex: 1; min-width: 0; }
.save-card .sv-name { font-family: var(--font-display); font-size: 18px; letter-spacing: .04em; color: var(--gold2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-card .sv-meta { color: var(--muted); font-size: 13px; }
.save-card .sv-place { font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-card .sv-heroes { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; margin-top: 3px; }
.save-card .sv-btns { display: flex; gap: 6px; flex-shrink: 0; }
.save-hero { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid #3a2e1e; border-radius: var(--radius); background: rgba(10,8,6,.5); }
.save-hero.mine { border-color: var(--gold); }
.save-hero .sh-face { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; border: 1px solid #000; box-shadow: 0 0 0 1px #6e5634; }
.save-hero .sh-main { flex: 1; min-width: 0; }
.save-hero .sh-who { font-size: 13px; color: var(--muted); }
@media (max-width: 700px) {
  .save-card, .lobby-card { flex-wrap: wrap; }
  .save-card .sv-btns, .lc-btns { width: 100%; justify-content: flex-end; }
}

@media (max-width: 900px) {
  .menu { flex-direction: column; padding: 64px 16px 18px; gap: 12px; overflow-y: auto; }
  .menu-nav { width: 100%; }
  .mn-logo { margin-bottom: 14px; }
  .mn-logo b { font-size: 38px; }
  .mn-item { font-size: 21px; padding: 6px 12px 6px 22px; }
  .mn-desc { display: none; }
  .mn-me { top: 14px; right: 14px; }
  .menu-page { position: absolute; inset: 12px; z-index: 3; max-width: none; }
  .mp-body { padding: 12px 14px 20px; }
  .mb-shade { background: rgba(3,3,5,.55); }
}