/* Shared art direction: midnight green, ivory type, restrained brass accents. */
:root {
  --ink: #f1efdf;
  --ink-dim: #b7c2b8;
  --panel: rgba(18, 32, 32, .93);
  --panel-2: rgba(28, 43, 43, .98);
  --panel-3: rgba(13, 25, 27, .98);
  --edge: rgba(198, 181, 132, .25);
  --edge-strong: rgba(217, 194, 140, .64);
  --gold: #dbc28c;
  --gold-2: #f3e6bc;
  --wood: #344b46;
  --wood-2: #203632;
}
.game-icon { display: block; width: 28px; height: 28px; }
.objective-compass { position: absolute; top: 25px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 660px); padding: 9px 15px; background: linear-gradient(90deg, #10232415, #102324ce, #10232415); text-shadow: 0 2px 4px #000; }
.objective-arrow { display: block; flex: none; font-size: 28px; color: var(--gold); }
.objective-compass small { font-size: 8px; letter-spacing: 2px; color: var(--gold); }
.objective-name { font-family: var(--font-title); font-size: 14px; margin: 4px 0; }
.objective-distance { font-size: 10px; color: var(--ink-dim); }
.save-status { position: absolute; bottom: 197px; right: 24px; color: var(--ink-dim); background: var(--panel); padding: 8px 12px; border-radius: 4px; font-size: 11px; max-width: 245px; }
.save-status.failed { color: #ffc3ad; border: 1px solid #d17a59; }
@media (max-width: 1000px) { .objective-compass { top: 145px; left: 16px; transform: none; max-width: min(240px, calc(100vw - 260px)); padding-left: 7px; } }
@media (max-width: 700px) { .objective-compass { top: 149px; left: 10px; max-width: calc(100vw - 220px); padding: 6px; gap: 7px; } .objective-name { font-size: 12px; } .objective-compass small { letter-spacing: 1px; } .save-status { bottom: 210px; right: 14px; max-width: 185px; font-size: 10px; } }
button:focus-visible, summary:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--gold-2); outline-offset: 4px;
}
.boot {
  justify-items: start;
  background: radial-gradient(ellipse at 80% 30%, #536956, #142c2d 60%, #102023);
  overflow-y: auto;
}
.boot.scene-ready {
  background: linear-gradient(90deg, rgba(8, 24, 26, .97), rgba(8, 24, 26, .84) 28%, rgba(8, 24, 26, .3) 58%, rgba(8, 24, 26, .05)),
    linear-gradient(0deg, rgba(8, 24, 26, .8), transparent 35%);
}
.boot-inner { position: relative; text-align: left; width: 570px; max-width: 100%; padding: 56px 0 90px 7vw; }
.boot-eyebrow { font-size: 10px; letter-spacing: 4px; color: var(--gold); margin-bottom: 30px; }
.boot-emblem { margin-bottom: 18px; color: var(--gold); filter: none; }
.boot-emblem .game-icon { width: 45px; height: 45px; stroke-width: 1; }
.boot h1 {
  font-size: clamp(38px, 4.6vw, 68px); line-height: 1.05; letter-spacing: -1.7px;
  max-width: 460px; color: #f7f0d9; background: none; filter: none;
  text-shadow: 0 4px 30px rgba(0,0,0,.2); font-weight: 400;
}
.boot-sub { font-size: 23px; letter-spacing: 4px; font-style: normal; margin: 18px 0 22px; color: var(--gold); }
.boot-sub::before, .boot-sub::after { content: none; }
.boot-description { font-size: 14px; line-height: 1.9; color: #c0cec4; margin-bottom: 32px; }
.boot-menu { align-items: flex-start; gap: 12px; }
.boot-menu > .btn { width: 290px; text-align: left; padding: 15px 22px; border-radius: 3px; }
.boot-menu > .btn span { float: right; }
.boot-menu > .btn:last-of-type { border-color: var(--edge-strong); }

.boot-progress { width: 290px; margin: 0; height: 3px; }
.boot-progress:not(.hidden)::after { content: 'Готовим твоё приключение…'; display: block; margin-top: 14px; color: var(--ink-dim); font-size: 12px; }
.boot-progress { overflow: visible; }
/* Страховка загрузки (src/boot-guard.js): нет WebGL, файлы не загрузились, долгая загрузка, сенсорный экран */
.boot-notice { max-width: 430px; margin-top: 4px; padding: 14px 16px 16px; background: rgba(10, 26, 28, .88); border: 1px solid var(--edge); border-left: 2px solid var(--gold); }
.boot-notice strong { display: block; margin-bottom: 6px; font-family: var(--font-title); font-weight: 400; font-size: 18px; color: var(--gold-2); }
.boot-notice p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: #c0cec4; }
.boot-notice p:last-child { margin-bottom: 0; }
.boot-touch-note, .boot-slow-note { max-width: 430px; margin: -18px 0 26px; font-size: 12px; line-height: 1.6; color: #f0dcb0; }
.boot-slow-note { margin: 12px 0 0; }
.boot-noscript { position: fixed; left: 7vw; bottom: 64px; z-index: 200; max-width: 430px; margin: 0; padding: 12px 16px; background: rgba(10, 26, 28, .92); border-left: 2px solid #e3c27a; color: #f4eddc; font: 14px/1.6 system-ui, sans-serif; }
.boot-footer { position: absolute; bottom: 25px; left: 7vw; right: 35px; display: flex; justify-content: space-between; gap: 20px; font-size: 10px; letter-spacing: 2px; color: #c1d0c0; pointer-events: none; }
.boot-footer span:first-child { color: var(--gold); }

.btn { border-radius: 5px; box-shadow: inset 0 1px 0 #ffffff0c, 0 3px 8px #0003; }
.btn:hover { background: linear-gradient(#436157, #2b453f); }
.btn.primary { background: linear-gradient(#e4cd9c, #bea273); border-color: #f0dab0; box-shadow: 0 3px 12px #0003; }
.btn.primary:hover { background: #ecd7ad; }
.hud-left { top: 24px; left: 24px; }
.portrait-row { gap: 13px; padding: 12px 15px 13px 11px; border-top: 1px solid var(--edge); background: linear-gradient(100deg, #102324ee, #102324c9 75%, #10232400); border-radius: 4px; }
.portrait { width: 51px; height: 65px; border: 1px solid var(--edge-strong); border-radius: 25px 25px 9px 9px; background: linear-gradient(#37554d, #122b2b); color: var(--gold); box-shadow: inset 0 0 0 4px #142b2b, 0 5px 12px #0003; }
.portrait .game-icon { width: 35px; height: 35px; }
.vitals { width: 218px; gap: 5px; }
.name-row { font-size: 14px; padding-bottom: 2px; }
.name-row .lvl { font-size: 11px; }
.bar { border-radius: 2px; height: 12px; border-color: #ffffff18; }
.bar .fill { border-radius: 1px; box-shadow: inset 0 1px 0 #ffffff2e; }
.bar.hp .fill { background: linear-gradient(90deg, #934644, #d27b66); }
.bar.mp .fill { background: linear-gradient(90deg, #376b83, #78b5bf); }
.bar.st .fill { background: linear-gradient(90deg, #507959, #afc486); }
.bar.xp { height: 12px; margin-top: 2px; }
.bar.xp .fill { background: #a792bb; }
.bar-text { font-size: 9px; line-height: 1; }
.vignette { background: radial-gradient(ellipse, transparent 65%, #06191926); }
.low-health .vignette { background: radial-gradient(ellipse, transparent 40%, #951f2859); }
.hud-right { top: 24px; right: 24px; display: grid; grid-template-columns: auto auto auto; gap: 8px; }
.clock-box { grid-column: 1 / -1; border: 0; border-top: 1px solid var(--edge); border-radius: 3px; padding: 12px 15px; background: linear-gradient(270deg, #102324ed, #102324a8); box-shadow: none; }
.clock-time { font-size: 26px; font-weight: 400; }
.clock-day { margin-top: 7px; font-size: 10px; }
.stat-chip { padding: 5px 8px; justify-content: center; font-size: 12px; border-radius: 3px; background: #102324d9; box-shadow: none; }
.stat-chip .game-icon { width: 17px; height: 17px; color: var(--gold); }
.quest-tracker { top: 162px; right: 24px; width: 245px; gap: 7px; }
.quest-tracker:not(:empty)::before { content: 'ТЕКУЩЕЕ ПУТЕШЕСТВИЕ'; font-size: 9px; letter-spacing: 2px; color: var(--gold); padding: 6px 12px; text-shadow: 0 1px 4px #000; }
.qt-item { border-left-width: 2px; background: linear-gradient(90deg, #102324db, #10232470); padding: 10px 12px; }
.qt-item .qt-title { font-family: var(--font-title); font-size: 14px; margin-bottom: 6px; }
.qt-item .qt-prog { line-height: 1.5; }
.hotbar { bottom: 30px; gap: 6px; padding: 9px 12px; border: 1px solid var(--edge); border-radius: 7px; background: linear-gradient(#1c3231da, #0c1d20ee); box-shadow: 0 8px 25px #0004; }
.hotbar::before { content: 'НАВЫКИ'; position: absolute; top: -17px; left: 14px; font-size: 8px; letter-spacing: 2px; color: #e4e7cd; text-shadow: 0 1px 3px #000; }
.hotbar::after { content: 'ПРЕДМЕТЫ'; position: absolute; top: -17px; left: 56%; font-size: 8px; letter-spacing: 2px; color: #e4e7cd; text-shadow: 0 1px 3px #000; }
.slot { width: 48px; height: 51px; border-radius: 4px; color: var(--gold); background: linear-gradient(145deg, #3b5249, #172e2c); font-family: var(--font); }
.slot.skill { border-color: #b2cbbc38; }
.slot:nth-child(2) { color: #eda17b; }
.slot:nth-child(3) { color: #acd1a2; }
.slot:nth-child(4) { color: #a4c7d8; }
.slot:nth-child(6) { color: #df9486; }
.slot:nth-child(7) { color: #8ec1dc; }
.slot .game-icon { width: 26px; height: 26px; margin-bottom: 3px; }
.slot .key { top: 2px; left: 4px; font-size: 9px; }
.slot .qty { font-size: 9px; }
.slot.skill .qty { color: #bed5da; }
.slot.locked { opacity: .47; }
.slot.empty { opacity: .32; }
.hotbar-gap { width: 12px; }

.toasts { bottom: 230px; }   /* выше кнопок окон в левом нижнем углу */
.cam-hint { bottom: 122px; font-size: 10px; background: #102324b8; border: 0; padding: 5px 12px; max-width: min(600px, calc(100vw - 380px)); }
.prompt { bottom: 171px; border-radius: 4px; background: #122c2bea; box-shadow: 0 5px 18px #0004; }
.radar { right: 26px; bottom: 26px; border-color: #203b35; box-shadow: 0 0 0 1px var(--gold), 0 0 0 6px #0c2327c9, 0 8px 20px #0004; }
.panel { border-radius: 7px; box-shadow: 0 0 0 3px #102423c9, 0 22px 80px #0009; }
.panel::before, .panel::after { content: ''; width: 16px; height: 16px; border: 1px solid var(--gold); }
.panel::before { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -4px; right: -4px; border-left: 0; border-top: 0; }
.panel-head { padding: 19px 24px; background: linear-gradient(90deg, #718b6512, transparent); }
.panel-head h2 { font-size: 24px; font-weight: 400; }
.panel-body { padding: 20px 24px; }
.panel-close { border-radius: 3px; }
.modal-root { background: #051317a8; backdrop-filter: blur(7px); }
.row, .detail, .cell, .equip-slot { border-radius: 4px; }
.row { padding: 13px 14px; background: #b3d0ba06; }
.row:hover { background: #b3d0ba10; }
.tabs { gap: 12px; }
.tab { padding: 13px 12px; }
.toast { background: var(--panel); border-radius: 4px; }
.zone-banner .zb-title { font-weight: 400; letter-spacing: 5px; }
@media (max-width: 1000px) {
  .hud-left { left: 16px; top: 16px; }
  .vitals { width: 175px; }
  .hud-right { right: 16px; top: 16px; }
  .quest-tracker { right: 16px; width: 208px; }
  .hotbar { gap: 4px; padding: 7px; }
  .slot { width: 42px; height: 47px; }
  
  .cam-hint { max-width: calc(100vw - 330px); min-width: 0; }
  .inv-layout, .build-layout { grid-template-columns: 1fr 240px; }
}
@media (max-width: 700px) {
  .boot-inner { padding-left: 7vw; padding-top: 35px; }
  .boot-footer span:last-child { display: none; }
  .boot h1 { max-width: 300px; }
  .boot.scene-ready { background: linear-gradient(90deg, #08181af5, #08181a80); }
  .portrait { display: none; }
  .vitals { width: 150px; }
  .hud-left { left: 10px; top: 10px; }
  .portrait-row { padding: 8px; }
  .hud-right { right: 10px; top: 10px; gap: 4px; }
  .clock-box { padding: 8px; }
  .clock-time { font-size: 20px; }
  .clock-day { max-width: 158px; line-height: 1.5; }
  .stat-chip { padding: 4px; font-size: 10px; gap: 4px; }
  .stat-chip i { display: none; }
  .quest-tracker { top: 134px; right: 10px; width: 180px; }
  .quest-tracker:not(:empty)::before { font-size: 8px; letter-spacing: 1px; }
  .qt-item { padding: 7px; }
  .qt-item .qt-title { font-size: 12px; }
  .qt-item .qt-prog { font-size: 10px; }
  .hotbar { bottom: 13px; gap: 3px; padding: 5px; }
  .slot { width: 35px; height: 44px; }
  .hotbar-gap { width: 5px; }
  .slot .game-icon { width: 22px; height: 22px; }
  .radar { bottom: 95px; right: 14px; width: 94px; height: 94px; }
  .radar canvas { width: 90px; height: 90px; }
  .cam-hint { display: none; }
  .toasts { bottom: 16px; }
  .prompt { max-width: 90vw; white-space: normal; bottom: 90px; font-size: 12px; }
  .inv-layout, .build-layout, .shop-layout, .storage-layout{ grid-template-columns: 1fr; }
  .talent-grid { grid-template-columns: 1fr; }
  .panel-body { padding: 14px; }
  .panel-head { padding: 14px; }
  .tabs { overflow-x: auto; padding: 0 12px; flex-shrink: 0; }
  .tab { white-space: nowrap; }
  .settings-row input[type=range] { width: 110px; }
}
@media (max-height: 600px) {
  .boot-inner { padding-top: 24px; padding-bottom: 60px; }
  .boot-emblem { display: none; }
  .boot-eyebrow { margin-bottom: 15px; }
  .boot-description { margin-bottom: 16px; }
  .boot-footer { position: fixed; bottom: 12px; }
  .quest-tracker { max-height: 32vh; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* First-session guidance shares the HUD's materials and stays clear of the hotbar. */
.journey-hint { position:absolute; left:24px; top:155px; width:245px; padding:15px 17px; color:#f2ead6; background:linear-gradient(120deg,rgba(23,43,44,.94),rgba(23,43,44,.8)); border:1px solid #a9986355; border-left:2px solid #c4b479; border-radius:4px; pointer-events:none; }
.journey-hint small { display:block; font-size:9px; letter-spacing:2px; color:#c4b479; margin-bottom:8px; }
.journey-hint strong { font-size:15px; font-family:Georgia,serif; }
.journey-hint p { font-size:12px; line-height:1.6; color:#d1d3c7; margin:8px 0 0; }

@media(max-width:1000px) { .journey-hint { top:230px; left:16px; width:210px; } }
@media(max-width:700px) { .journey-hint { top:225px; left:10px; width:170px; padding:10px; } .journey-hint p { font-size:11px; } }
@media(max-height:620px) { .journey-hint { display:none; } }
/* Optional exploration encounters: visible tradeoffs, persistent outcomes. */
.discovery-panel { max-width:640px; }
.discovery-lore { font:18px/1.75 Georgia,serif; color:var(--ink); margin:0 0 22px; }
.discovery-note { color:var(--ink-dim); font-size:12px; line-height:1.6; }
.discovery-choice { display:block; width:100%; text-align:left; background:#263d39; border:1px solid var(--edge); color:var(--ink); padding:17px 20px; margin-top:12px; border-radius:5px; cursor:pointer; }
.discovery-choice:hover { background:#354b42; border-color:var(--gold); }
.discovery-choice strong,.discovery-choice span,.discovery-choice small { display:block; }
.discovery-choice strong { font:18px Georgia,serif; color:var(--gold); }
.discovery-choice span { font:13px/1.6 system-ui; margin-top:6px; color:var(--ink-dim); }
.discovery-choice small { margin-top:8px; color:#efb19a; }
.discovery-outcome { border-left:2px solid var(--gold); padding:12px 18px; line-height:1.7; background:#ffffff07; }
.discovery-error { color:#efb19a; border-left:2px solid #bb7960; padding:10px 14px; background:#bb796015; line-height:1.6; }
.discovery-journal { margin:20px 0; }
.discovery-journal h3 { font:19px Georgia,serif; color:var(--gold); }
.discovery-journal details { border-bottom:1px solid var(--edge); padding:12px 0; }
.discovery-journal summary { cursor:pointer; color:var(--ink); }
.discovery-journal p { color:var(--ink-dim); font-size:13px; line-height:1.7; }
.project-section { margin:24px 0; }
.project-section h3 { font:20px Georgia,serif; color:var(--gold); }
.project-card { background:#203a36; border:1px solid var(--edge-strong); padding:18px; border-radius:6px; margin:12px 0; }
.project-card h4 { margin:0 0 8px; font:21px Georgia,serif; color:var(--gold); }
.project-benefit { color:var(--ink-dim); font-size:13px; line-height:1.6; }
.project-material { border-top:1px solid var(--edge); padding:12px 0 6px; font-size:13px; }
.project-material strong { font-weight:500; }
.project-material p { margin:6px 0; color:var(--ink-dim); line-height:1.6; }
.project-material.done strong,.project-next { color:#acd6b6; }
.project-next,.project-blocker { line-height:1.6; font-size:13px; }
.project-blocker { color:#e3bc86; }
.project-suggestion { border:1px solid var(--edge); border-radius:5px; padding:13px 16px; margin:9px 0; }
.project-suggestion strong { color:var(--gold); font:17px Georgia,serif; }
.project-suggestion p { color:var(--ink-dim); font-size:12px; line-height:1.6; margin:7px 0 10px; }
.qt-item.preparation { border-left:2px solid #9fc0a0; background:#243d3580; }

.dialog-stage { font:italic 14px/1.6 Georgia,serif; color:var(--ink-dim); padding:12px 0; border-top:1px solid var(--edge); }

.build-guide { color:var(--gold); line-height:1.6; margin:0 0 14px; }
.build-search { width:100%; padding:12px; background:#142b28; color:var(--ink); border:1px solid var(--edge-strong); border-radius:5px; margin-bottom:12px; }
.build-categories { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.build-choice { flex-wrap:wrap; }
.build-choice[hidden] { display:none; }
.build-choice .r-main { min-width:190px; }
.build-tools { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:45; background:#142c29f5; color:var(--ink); border:1px solid var(--edge-strong); padding:14px 18px; border-radius:8px; width:max-content; max-width:95vw; box-shadow:0 8px 30px #0006; }
.build-tool-buttons { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0; }
.build-tool-status { color:var(--gold); font-size:15px; }
.build-tools small { color:var(--ink-dim); }
.build-drawer { position:fixed; top:95px; right:18px; bottom:175px; width:350px; max-width:90vw; overflow:auto; z-index:44; padding:18px; background:#172f2cf7; color:var(--ink); border:1px solid var(--edge-strong); border-radius:8px; }
.build-drawer h3 { margin:0 0 12px; color:var(--gold); }
.build-drawer input { width:100%; padding:10px; margin:12px 0; background:#0e2421; color:var(--ink); border:1px solid var(--edge-strong); }
.build-drawer article { padding:13px 0; border-bottom:1px solid var(--edge); }
.build-drawer article[hidden] { display:none; }
.build-drawer p { line-height:1.5; font-size:12px; margin:7px 0; }
.build-drawer-cost { color:var(--gold); }
@media(max-width:850px){.build-layout{grid-template-columns:1fr}.build-choice .r-main{min-width:65%}}

/* Keep the guest and the room visible during the home story. */
.modal-root.homecoming-view { backdrop-filter:none; background:transparent; align-items:flex-end; padding-bottom:20px; pointer-events:none; }
.modal-root.homecoming-view .homecoming-panel { pointer-events:auto; max-height:44vh; }

/* Shared journey selection: journal and map use the same controls. */
.journey-selector { padding: 16px; margin-bottom: 18px; border: 1px solid var(--gold, #d5b36b); border-radius: 10px; background: rgba(35, 48, 43, .08); }
.journey-selector label { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 700; }
.journey-selector select { flex: 1 1 210px; min-width: 0; max-width: 100%; padding: 9px 12px; font: inherit; color: #342f29; background: #f6edd9; border: 1px solid #91836b; border-radius: 6px; }
.journey-selector p { line-height: 1.5; margin: 10px 0; overflow-wrap: anywhere; }
.journey-selector :focus-visible { outline: 3px solid #4f9db1; outline-offset: 3px; }

.journal-nav { display:flex; flex-wrap:wrap; gap:8px; padding-bottom:16px; }
.journal-nav [aria-pressed="true"] { background:#e4cd94; color:#302c24; border-color:#e4cd94; }
.journal-nav button:focus-visible { outline:3px solid #69b7ca; outline-offset:3px; }
.journal-section > section { margin-bottom:18px; }
.panel-head:has(> .btn) { flex-wrap:wrap; }

.panel > .journal-nav { flex-shrink:0; padding:12px 18px; border-bottom:1px solid rgba(215,202,156,.18); }

.grid-items .cell[hidden] { display:none; }
.storage-notice { grid-column:1 / -1; line-height:1.5; }

/* Shared interaction and readable large-text layouts. */
.panel-head { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.panel-head h2 { flex:1 1 180px; min-width:0; overflow-wrap:anywhere; }
.panel-head .panel-close { margin-left:auto; flex:0 0 auto; }
.panel :is(button,input,select,textarea,[role=button],summary):focus-visible { outline:3px solid #83d8eb; outline-offset:3px; }
.panel :is(p,.r-sub,.d-desc,.head-sub,.cost-line) { overflow-wrap:anywhere; }
.panel :is(input[type=search],input[type=text],textarea,select) { max-width:100%; }
.panel-body { min-height:0; overscroll-behavior:contain; }

html[data-text-size="115"] :is(.panel,.build-drawer) :is(p,.r-title,.r-sub,.d-stat,.d-desc,.head-sub,.cost-item,.btn,.tab,label,.dialog-text,.dialog-stage,summary) { font-size:15px; }
html[data-text-size="130"] :is(.panel,.build-drawer) :is(p,.r-title,.r-sub,.d-stat,.d-desc,.head-sub,.cost-item,.btn,.tab,label,.dialog-text,.dialog-stage,summary) { font-size:18px; }
html[data-text-size="115"] .prologue-body > p { font-size:18px; }
html[data-text-size="130"] .prologue-body > p { font-size:21px; }
html.reduced-motion :is(.panel,.toast,.zone-banner,.prologue *, .boot *) { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
.in-combat #questTracker .qt-item:not(:first-child) { display:none; }
.in-combat #camHint { display:none; }
@media(max-width:760px) {
  .panel { max-width:calc(100vw - 16px); width:100%; }
  .panel-head,.panel-foot { padding:12px; }
  .panel-head h2 { font-size:22px; }
  .panel-body { padding:12px; }
  .inv-layout,.storage-layout { grid-template-columns:minmax(0,1fr); }
  .row { flex-wrap:wrap; gap:8px; }
  .row .r-main { min-width:150px; }
  .panel-foot { flex-wrap:wrap; }
  .grid-items { grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); }
  .homecoming-view .homecoming-panel { max-height:60vh; }
}