@font-face {
  font-family: "Tiny5"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/tiny5-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Tiny5"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/tiny5-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: "Roboto";
  font-style: normal;
  font-weight: 600 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("fonts/roboto-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 600 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("fonts/roboto-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: "Source Sans 3";
  font-style: normal;
  font-weight: 400 750;
  font-display: swap;
  src: url("fonts/source-sans-3-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 750;
  font-display: swap;
  src: url("fonts/source-sans-3-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 {
  color-scheme: dark;
  --ground: #141416;
  --surface: #202024;
  --line: #49464a;
  --text: #f3efeb;
  --muted: #c2bdba;
  --accent: #ff8b65;
  --neutral: #d6d0cb;
  --header: 74px;
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  background: var(--ground);
  color: var(--text);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
:focus:not(:focus-visible) { outline: none; }
.skip { position: fixed; top: 8px; left: 8px; z-index: 20; padding: 12px; background: var(--text); color: var(--ground); transform: translateY(-140%); }
.skip:focus { transform: none; }
.shell { width: min(100% - 112px, 1280px); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 3; background: #141416f5; border-bottom: 1px solid #343237; }
.header-inner, .footer-inner { min-height: var(--header); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 650; white-space: nowrap; }
.mark { display: grid; place-items: center; width: 33px; height: 33px; background: #332927; border: 1px solid #795849; color: var(--accent); font-size: 20px; }
nav, .header-tools { display: flex; align-items: center; gap: 30px; }
nav { color: var(--muted); font-size: 14px; }
nav a:hover, .footer-inner a:hover { color: var(--accent); }
.header-tools { gap: 8px; }
.projects-toggle { order: -1; }
.utility {
  min-height: 42px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: #222125; color: var(--text); border-radius: 2px; font-size: 14px;
}
.utility:hover { background: #343136; border-color: #898187; }
.map-icon { display: inline-block; width: 16px; height: 13px; border: 1px solid var(--neutral); transform: skewY(-12deg); }
.map-icon::after { content: ""; display: block; height: 100%; width: 34%; margin-inline: auto; border-inline: 1px solid var(--neutral); }
.coin-button { min-width: 55px; color: var(--accent); justify-content: center; font-variant-numeric: tabular-nums; }
.badge-icon { display: inline-block; flex: 0 0 auto; width: 11px; height: 11px; margin-inline: 2px; border: 2px solid var(--accent); background: #4a2f27; transform: rotate(45deg); box-shadow: inset 0 0 0 2px #241a18; }
.hero { position: relative; isolation: isolate; min-height: 610px; display: flex; align-items: center; overflow: hidden; background: #141416; border-bottom: 1px solid #39363b; }
.hero-scene {
  position: absolute; inset: 0; z-index: -3;
  background: #1a191b var(--scene, url("cave.webp")) center center / cover no-repeat;
}
.hero-scene, .scene-stone {
  translate: calc(var(--pan-x, 0px) * .38) calc(var(--pan-y, 0px) * .38);
  transition: translate .16s ease-out;
  image-rendering: pixelated;
  scale: 1.035;
}
.scene-stone {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--scene) 64% center / cover no-repeat;
  clip-path: inset(100%);
}
#floor-transition {
  position: fixed; inset: 0; z-index: 2; visibility: hidden; pointer-events: none; touch-action: none;
  background: linear-gradient(90deg, #111012 5%, #171416 62%, #221917), #171416;
  border-block: 3px solid #332725;
}
.is-travelling #floor-transition { visibility: visible; pointer-events: auto; }
.is-travelling .notice { opacity: 0; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #141416 1%, #141416ed 22%, #141416ba 47%, #14141612 70%), linear-gradient(0deg, #141416 0%, transparent 23%); }
.hero-copy { position: relative; z-index: 2; padding-block: 56px 62px; pointer-events: none; }
.hero-copy > * { pointer-events: auto; }
.position { display: inline-flex; align-items: center; gap: 11px; margin: 0 0 22px; color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; font-weight: 650; }
.position::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: Roboto, "Arial Narrow", sans-serif; font-weight: 780; font-stretch: 84%; }
h1 { max-width: 770px; font-size: clamp(50px, 5.8vw, 86px); line-height: .99; letter-spacing: -.024em; text-wrap: balance; }
.accent-line { color: var(--accent); }
.intro { max-width: 535px; margin-top: 24px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.choice-list { display: flex; gap: 12px; margin-top: 36px; max-width: 666px; }
.choice {
  position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px;
  min-height: 108px; padding: 16px 40px 16px 17px; border: 1px solid #666165; border-radius: 2px;
  background: #242226f5; color: var(--neutral);
}
.choice:first-child { border-color: #996451; background: #342420f5; color: var(--accent); }
.choice:hover { border-color: currentColor; background: #353036; }
.choice:first-child:hover { background: #49302a; }
.choice strong { font-size: 17px; font-weight: 650; color: var(--text); line-height: 1.2; }
.choice small { font-size: 13px; line-height: 1.4; color: var(--muted); }
.choice .arrow { position: absolute; top: 18px; right: 16px; font-size: 21px; }
.scene-stage { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; pointer-events: none; }
.route-hero { min-height: 466px; }
.route-hero h1 { font-size: clamp(43px, 5.4vw, 76px); }
.route-hero .intro { max-width: 620px; }
.route-hero .hero-scene { background-position: 64% center; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; width: fit-content; }
.button {
  min-height: 46px; padding: 11px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid #827b80; border-radius: 2px; background: #27252a; color: var(--text); font-size: 14px; font-weight: 650;
}
.button:hover { border-color: var(--accent); }
.button.primary { background: var(--accent); color: #211511; border-color: var(--accent); }
.button.primary:hover { background: #ffa789; }
.section { padding-block: 60px; }
.section + .section { border-top: 1px solid #38353a; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.section-head h2, .prose h2 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -.022em; line-height: 1.06; }
.text-link { color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.floors-page h1 { max-width: none; }
.floors-page .intro { margin-top: 12px; }
.project-floors { list-style: none; margin: 28px 0 0; padding: 0 0 0 16px; border-left: 2px solid #784c41; display: grid; gap: 9px; }
.project-floor {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) 32px; gap: 18px; align-items: center;
  min-height: 96px; padding: 12px 20px; border: 1px solid var(--line);
  background: linear-gradient(90deg, #242125 0%, #242125 38%, #242125e8 58%, #15141755 100%), var(--floor-scene) right 48% / cover;
}
.project-floor:hover { border-color: var(--accent); }
.floor-number { color: var(--accent); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: 13px; }
.floor-copy strong { display: block; font-size: clamp(20px, 2.3vw, 28px); line-height: 1.08; }
.floor-copy small { display: block; color: var(--muted); margin-top: 6px; font-size: 15px; }
.floor-arrow { color: var(--accent); font-size: 24px; }
.project-level { position: relative; border-top: 1px solid #54413a; }
.project-level > .section { padding-bottom: 72px; }
.project-level .case-sections { min-height: 102px; }
@media (prefers-reduced-motion: no-preference) {
  /* Появление этажа: сцена «проявляется» из темноты, затем по очереди выходит текст */
  .project-level .hero-scene { transition: transform 1.5s cubic-bezier(.2,.7,.2,1), filter 1.3s ease; }
  .project-level:not(.revealed) .hero-scene { transform: scale(1.14); filter: brightness(.12) saturate(.4) blur(3px); }
  .project-level .hero-copy > *, .project-level .case-sections > *, .project-level .scene-stage {
    transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1), clip-path .9s cubic-bezier(.6,0,.2,1), letter-spacing 1s ease;
  }
  .project-level:not(.revealed) .hero-copy > *, .project-level:not(.revealed) .case-sections > * { opacity: 0; transform: translateY(28px); }
  .project-level:not(.revealed) .scene-stage { opacity: 0; transform: scale(.94); }
  .project-level:not(.revealed) .hero-copy .position { transform: translateX(-24px); }
  .project-level:not(.revealed) .hero-copy h1 { clip-path: inset(0 100% 0 0); letter-spacing: .02em; transform: none; opacity: 1; }
  .project-level .hero-copy h1 { clip-path: inset(0 0 0 0); }
  .project-level.revealed .hero-copy .position { transition-delay: .25s; }
  .project-level.revealed .hero-copy h1 { transition-delay: .4s; }
  .project-level.revealed .hero-copy .intro { transition-delay: .85s; }
  .project-level.revealed .hero-copy .greeting { transition-delay: 1.1s; }
  .project-level.revealed .hero-copy .hero-actions { transition-delay: 1.3s; }
  .project-level.revealed .scene-stage { transition-delay: .9s; }
  .project-level.revealed .case-sections > :nth-child(1) { transition-delay: 1.2s; }
  .project-level.revealed .case-sections > :nth-child(2) { transition-delay: 1.4s; }
  .project-level.revealed .case-sections > :nth-child(3) { transition-delay: 1.6s; }
}
.tile {
  display: flex; justify-content: space-between; align-items: center; min-height: 124px; gap: 18px;
  padding: 21px; border: 1px solid var(--line); background: var(--surface); border-radius: 2px;
}
a.tile:hover { border-color: #a46a58; background: #302a2d; }
.tile h3 { font-weight: 650; font-size: 19px; }
.tile p { margin-top: 8px; color: var(--muted); line-height: 1.5; font-size: 14px; }
.tile-art { color: var(--accent); font-size: 24px; }
.prose { max-width: 735px; color: var(--muted); line-height: 1.7; }
.prose h2 { color: var(--text); margin-bottom: 14px; }
.prose p + p { margin-top: 12px; }
.case-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.case-sections h2 { font-size: clamp(27px, 3vw, 39px); }
.site-footer { border-top: 1px solid var(--line); }
.footer-inner { color: var(--muted); font-size: 14px; }
#works, #about, #game, #contact-card { scroll-margin-top: calc(var(--header) + 16px); }
.scene-chest .hero-scene { background-image: url("treasure.webp"); }
.scene-chest .hero-scene::after {
  content: ""; position: absolute; inset: 0;
  background: url("treasure-open.webp") center center / cover no-repeat;
  background-position: inherit; background-size: inherit; opacity: 0; transition: opacity .24s;
}
.scene-chest.is-open .hero-scene::after { opacity: 1; }
.contact-box { max-width: 590px; padding: 18px; border: 1px solid #795e54; background: #232023ee; border-radius: 2px; }
.contact-box h2 { font-size: 30px; margin-bottom: 7px; }
.contact-box p { color: var(--muted); line-height: 1.5; }
.contact-box label { display: block; margin: 13px 0 5px; font-size: 14px; }
.contact-box input, .contact-box textarea { width: 100%; min-height: 40px; padding: 9px; color: var(--text); background: #171619; border: 1px solid #777176; border-radius: 2px; }
.contact-box textarea { min-height: 80px; resize: vertical; }
.contact-box .button { margin-top: 12px; }
#form-result { margin-top: 12px; }
dialog { width: min(690px, calc(100% - 26px)); max-height: 86vh; padding: 24px; color: var(--text); background: #242125; border: 1px solid #766f74; border-radius: 7px; box-shadow: 0 22px 76px #000a; }
dialog::backdrop { background: #0b090bdc; }
#project-drawer {
  position: fixed; inset: 0 auto 0 0; margin: 0; height: 100dvh; max-height: none;
  width: min(400px, calc(100vw - 30px)); border-width: 0 1px 0 0; border-radius: 0; overscroll-behavior: contain;
}
#project-drawer[open] { animation: drawer-in .26s ease-out both; }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.drawer-head h2 { font-size: 30px; }
#drawer-floors { display: grid; gap: 5px; margin: 15px 0; }
#drawer-floors a {
  display: flex; align-items: center; gap: 10px; min-height: 45px; padding: 8px 10px;
  border: 1px solid var(--line); background: #211d22; color: var(--text); line-height: 1.2;
}
#drawer-floors a:is(:hover, [aria-current="page"]) { border-color: var(--accent); }
#drawer-floors a span { color: var(--accent); flex: 0 0 51px; font-size: 12px; }
#project-drawer > .text-link { display: block; padding-block: 5px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
dialog .panel-head { position: sticky; top: 0; z-index: 2; background: #242125; }
.panel-head h2 { font-size: clamp(26px, 5vw, 40px); letter-spacing: -.02em; }
.panel-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.close { background: #332d33; color: var(--text); border: 1px solid var(--line); border-radius: 2px; min-width: 42px; min-height: 42px; font-size: 24px; }
dialog:has(.dungeon-map) { width: min(820px, calc(100% - 26px)); }
.map-note { color: var(--muted); font-size: 14px; }
.dungeon-map {
  --corridor: #77676a; margin-top: 14px; padding: 15px;
  background: linear-gradient(90deg, #c8afaf16 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(#c8afaf16 1px, transparent 1px) 0 0 / 16px 16px,
    radial-gradient(ellipse at 50% 35%, #322a2d, #1c191d 76%);
  border: 1px solid #51454a; border-radius: 2px;
}
.map-end { display: grid; justify-content: center; }
.map-room {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 44px; padding: 7px 10px; text-align: center; border: 3px double #796d72; border-radius: 1px;
  background: #332d32; font-size: 13px; line-height: 1.2; box-shadow: 0 0 0 2px #1c191d;
}
.map-end .map-room { min-width: 126px; }
.map-room:hover, .map-room[aria-current="page"] { border-color: var(--accent); }
.map-room[aria-current="page"] { background: #4a2c26; }
.map-room span { color: var(--accent); font-size: 11px; }
.map-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; position: relative; padding-block: 22px; }
.map-branches::before, .map-branches::after { content: ""; position: absolute; left: 24%; width: 52%; height: 13px; border-inline: 5px solid var(--corridor); }
.map-branches::before { top: 9px; border-top: 5px solid var(--corridor); }
.map-branches::after { bottom: 9px; border-bottom: 5px solid var(--corridor); }
.map-end:first-child::after, .map-end:last-child::before { content: ""; width: 5px; height: 11px; background: var(--corridor); position: absolute; left: calc(50% - 2px); }
.map-end { position: relative; }
.map-end:first-child::after { top: 100%; }
.map-end:last-child::before { bottom: 100%; }
.map-branch { position: relative; }
.map-branch::before { content: ""; position: absolute; inset: 0 auto 0 50%; width: 4px; background: var(--corridor); }
.map-projects { position: relative; display: grid; grid-template-columns: 1fr; gap: 8px; padding: 14px 0 0; }
.map-projects::before { content: ""; position: absolute; left: 50%; width: 3px; top: 0; height: 14px; background: var(--corridor); }
.map-project { position: relative; }
.map-project::before { content: ""; position: absolute; top: -8px; left: 50%; width: 3px; height: 8px; background: var(--corridor); }
.map-side-room { margin: 8px 0 0 8px; position: relative; }
.map-side-room::before { content: ""; position: absolute; top: -8px; left: 50%; width: 3px; height: 8px; background: var(--corridor); }
.reward-list { list-style: none; margin: 14px 0 0; padding: 0; }
.reward-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.reward-list li::before { content: "✦"; color: var(--accent); margin-right: 10px; }
.notice {
  position: fixed; bottom: 20px; right: 24px; z-index: 4; max-width: min(430px, calc(100vw - 40px));
  pointer-events: none; background: #302322; border: 1px solid #9e6554; border-radius: 2px;
  color: var(--text); padding: 12px 14px; opacity: 0; transform: translateY(8px); transition: opacity .24s, transform .24s; font-size: 14px;
}
.notice.visible { opacity: 1; transform: translateY(0); }
.notice:empty { display: none; }
.arena-interaction { position: absolute; inset: 0; z-index: 2; }
.arena-field { position: absolute; inset: 2% 10% 22% 0; }
.arena-status { position: absolute; display: flex; align-items: center; gap: 8px; bottom: 17px; right: 7%; font-size: 13px; }
.arena-status span { padding: 7px 9px; background: #19181bec; border: 1px solid var(--line); border-radius: 2px; }
.arena-status :is(button, a) { pointer-events: auto; min-height: 34px; }
.arena-status { justify-content: flex-end; flex-wrap: wrap; }
.arena-target {
  position: absolute; display: grid; place-items: center; width: 55px; height: 48px; padding: 0;
  left: var(--target-x); top: var(--target-y); border: 0; background: none; pointer-events: auto;
}
.arena-target span { display: block; position: relative; filter: drop-shadow(0 2px 3px #0b1214); pointer-events: none; }
.arena-target:hover span, .arena-target:focus-visible span { filter: brightness(1.2) drop-shadow(0 0 5px #e7c48a); }
.arena-drone .arena-target { animation: drone-float 2.7s ease-in-out var(--delay) infinite alternate; }
.arena-drone .arena-target { translate: var(--dodge-x, 0px) var(--dodge-y, 0px); transition: translate .17s ease-out; }
.arena-drone .arena-target:focus-visible { translate: none; }
.arena-drone .arena-field, .arena-zombie .arena-field { translate: calc(var(--pan-x, 0px) * .86) calc(var(--pan-y, 0px) * .86); }
.arena-drone .arena-target span { width: 45px; height: 23px; }
.arena-drone .arena-target span::before, .arena-drone .arena-target span::after { content: ""; position: absolute; inset: 0; }
.arena-drone .arena-target span::before {
  background: linear-gradient(#c3dee2 0 24%, #587d85 24% 49%, #d1a364 49% 74%, #9c775b 74%);
  clip-path: polygon(0 10%, 27% 10%, 27% 26%, 34% 38%, 66% 38%, 73% 26%, 73% 10%, 100% 10%, 100% 24%, 87% 24%, 81% 47%, 68% 57%, 65% 90%, 35% 90%, 32% 57%, 19% 47%, 13% 24%, 0 24%);
}
.arena-drone .arena-target span::after { inset: 60% 41% 22%; background: #e7efca; box-shadow: 0 0 5px #ebd2a3; }
@keyframes drone-float { from { transform: translate(-10px, 4px) rotate(-6deg); } to { transform: translate(12px, -9px) rotate(6deg); } }
.arena-zombie .arena-field { inset: 49% 8% 10% 0; overflow: hidden; pointer-events: auto; }
.arena-zombie .arena-target { cursor: inherit; animation: run-across 6s linear var(--delay) infinite; }
.arena-zombie .arena-target.reverse { animation-direction: reverse; animation-duration: 7.5s; }
.arena-zombie .arena-target span {
  width: 35px; height: 37px;
  animation: zombie-step .24s steps(2) infinite alternate;
  background: linear-gradient(#97abb0 0 12%, #88dde0 12% 26%, #9bbd81 26% 42%, #637964 42% 69%, #a5a17a 69% 76%, #536360 76% 100%);
  clip-path: polygon(22% 0, 62% 0, 62% 6%, 73% 6%, 73% 35%, 59% 35%, 59% 43%, 82% 44%, 82% 40%, 100% 40%, 100% 58%, 68% 62%, 64% 73%, 84% 86%, 90% 100%, 66% 100%, 52% 83%, 37% 95%, 9% 95%, 9% 83%, 25% 82%, 33% 68%, 25% 54%, 10% 66%, 0 66%, 0 50%, 22% 39%, 22% 33%, 16% 33%, 16% 9%, 22% 9%);
}
.arena-zombie .arena-target.reverse span { transform: scaleX(-1); }
@keyframes run-across { from { left: 0; transform: translateX(-100%); } to { left: 100%; } }
@keyframes zombie-step { to { translate: 0 -3px; } }
.arena-reticle {
  position: absolute; z-index: 5; left: var(--aim-x, 0); top: var(--aim-y, 0); width: 25px; height: 25px;
  border: 1px solid #f4d59e; border-radius: 50%; box-shadow: 0 0 3px #081111;
  opacity: 0; transform: translate(-50%, -50%) scale(.5); transition: opacity .17s, transform .17s; pointer-events: none;
}
.arena-reticle::before, .arena-reticle::after { content: ""; position: absolute; inset: 50% -4px auto; height: 1px; background: linear-gradient(90deg, #f4d59e 30%, transparent 30% 70%, #f4d59e 70%); }
.arena-reticle::after { transform: rotate(90deg); }
@media (any-pointer: fine) {
  .arena-zombie .arena-field.aiming { cursor: none; }
  .arena-field.aiming .arena-reticle { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.arena-paw .arena-target { z-index: 2; animation: paw-peek 2.1s ease-in-out var(--delay) infinite alternate; }
.arena-paw .arena-field { inset: 0; translate: calc(var(--pan-x, 0px) * .38) calc(var(--pan-y, 0px) * .38); transition: translate .16s ease-out; }
.arena-paw [data-target="0"] { left: calc(var(--at-x-0, 100%) - 45px); top: calc(var(--at-y-0, 50%) - 24px); }
.arena-paw [data-target="1"] { left: calc(var(--at-x-1, 100%) - 45px); top: calc(var(--at-y-1, 62%) - 24px); }
.arena-paw .arena-target span {
  width: 39px; height: 27px;
  background: linear-gradient(90deg, #334741, #82917a 69%, #b0ab87 92%);
  clip-path: polygon(0 34%, 17% 14%, 47% 7%, 80% 9%, 96% 23%, 84% 30%, 62% 27%, 97% 40%, 100% 53%, 86% 58%, 60% 49%, 95% 67%, 91% 80%, 81% 86%, 53% 69%, 71% 93%, 61% 100%, 50% 91%, 32% 76%, 0 72%);
  scale: -1 1;
}
@keyframes paw-peek { from { transform: translateX(-5px) rotate(-3deg); } to { transform: translateX(5px) rotate(4deg); } }

.hidden-monster {
  position: absolute; z-index: 1; left: calc(var(--at-x-2, 100%) - 51px); top: calc(var(--at-y-2, 55%) - 24px); width: 68px; height: 99px;
  background: linear-gradient(90deg, #22332f, #465a4c);
  clip-path: polygon(0 49%, 12% 10%, 29% 17%, 46% 0, 71% 14%, 92% 40%, 100% 80%, 86% 96%, 8% 100%);
  animation: monster-peek .35s ease-out both;
}
.hidden-monster i { position: absolute; top: 31%; left: 45%; width: 7px; height: 4px; background: var(--accent); box-shadow: 0 0 7px var(--accent); }
.hidden-monster i + i { left: 70%; }
@keyframes monster-peek { from { transform: translateX(38px); opacity: .3; } to { transform: none; opacity: 1; } }
.arena-target:focus-visible { animation: none; }
.damage { position: absolute; z-index: 4; color: var(--accent); font-size: 24px; font-weight: 700; pointer-events: none; animation: damage .7s ease-out both; text-shadow: 0 1px 3px #000; }
.drone-burst {
  position: absolute; z-index: 4; width: 6px; height: 6px; background: #fff3c7; pointer-events: none;
  box-shadow: -5px -5px #ffd391, 5px -4px #ff9861, -5px 5px #ef613d, 7px 5px #ffba67, -12px -1px #f78649, 12px 0 #fba35b, 1px -12px #ffb66f, -2px 13px #ef5e3a;
  animation: drone-pop .32s steps(4) both;
}
@keyframes drone-pop { from { transform: scale(.55); opacity: 1; } to { transform: scale(2.25); opacity: 0; } }
@keyframes damage { to { transform: translateY(-24px); opacity: 0; } }
.shaft-game { position: absolute; right: 9%; bottom: 5%; z-index: 2; width: min(88%, 285px); pointer-events: auto; }
.shaft-frame { position: relative; }
#wolf, #shaft { display: block; width: 100%; background: transparent; image-rendering: pixelated; cursor: pointer; }
#shaft { touch-action: none; }
#wolf:hover, #shaft:hover { filter: brightness(1.22) drop-shadow(0 0 5px #ffc49270); }
.wolf-game { position: absolute; right: 6%; bottom: 8%; z-index: 2; width: min(91%, 478px); pointer-events: auto; }
.scene-controls { display: flex; min-height: 42px; align-items: center; justify-content: flex-end; gap: 8px; }
#wolf-status, #shaft-score { width: fit-content; padding: 5px 8px; color: var(--text); background: #211b1fe0; border-radius: 2px; font-size: 14px; }
#wolf-status:empty { display: none; }
.project-portal, .chest-target {
  position: absolute; z-index: 1; display: grid; justify-items: center; pointer-events: auto;
  translate: calc(var(--pan-x, 0px) * .38) calc(var(--pan-y, 0px) * .38);
  background: transparent; border: 0;
}
.project-portal { right: auto; bottom: auto; }
.project-portal::after, .chest-target::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 75%, #ff704768, #f96e4633 55%, transparent 95%);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.project-portal::after { clip-path: polygon(0 37%, 5% 25%, 14% 15%, 27% 7%, 42% 2%, 52% 0, 66% 3%, 80% 9%, 91% 19%, 98% 30%, 100% 40%, 100% 100%, 0 100%); }
.project-portal:is(:hover, :focus-visible)::after, .chest-target:not(:disabled):is(:hover, :focus-visible)::after { opacity: 1; }
.portal-sign {
  position: absolute; top: -30px; z-index: 1; white-space: nowrap; color: #f5c3a3;
  font: 800 clamp(14px, 1.4vw, 21px) Roboto, sans-serif; letter-spacing: .085em; text-transform: uppercase;
  text-shadow: 1px 2px #160d0b, 0 0 11px #140b08;
}
.project-portal:is(:hover, :focus-visible) .portal-sign { color: #ffe0bc; }
.chest-target { right: 7%; bottom: 23%; width: min(42%, 235px); height: 37%; }
.chest-target::after { inset: 10%; border-radius: 16%; box-shadow: 0 0 18px #ff784039; }
.mine-scene { position: absolute; inset: 0; z-index: 2; }
.mine-wall {
  position: absolute; isolation: isolate;
  clip-path: polygon(0 10%, 16% 5%, 32% 0, 65% 1%, 96% 6%, 100% 34%, 96% 74%, 100% 95%, 72% 100%, 10% 98%, 0 80%);
  translate: calc(var(--pan-x, 0px) * .38) calc(var(--pan-y, 0px) * .38);
  transition: translate .16s ease-out;
}
#mine-surface { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: auto; cursor: crosshair; }
.mine-wall:has(canvas:hover)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(30px 25px at var(--mine-light-x, 50%) var(--mine-light-y, 50%), #ffd69c38, transparent);
}
.constellation {
  position: absolute; inset: 16% 13% 14% 1%; isolation: isolate;
  translate: calc(var(--pan-x, 0px) * .78) calc(var(--pan-y, 0px) * .78);
  background: radial-gradient(2px 2px at 5% 55%, #dfd0bdb0, transparent), radial-gradient(2px 2px at 77% 70%, #dfd0bd90, transparent),
    radial-gradient(2px 2px at 48% 16%, #e6cba590, transparent), radial-gradient(2px 2px at 89% 42%, #dfd0bd90, transparent),
    radial-gradient(2px 2px at 21% 22%, #dfd0bd70, transparent), radial-gradient(2px 2px at 65% 52%, #dfd0bd90, transparent);
}
.constellation::before { content: ""; position: absolute; inset: 0; background: #d99b7080; clip-path: polygon(12% 75%, 30% 44%, 52% 61%, 68% 32%, 84% 16%, 84% 17%, 68% 33%, 52% 62%, 30% 45%, 12% 76%); }
.constellation span { position: absolute; width: 13px; height: 13px; transform: translate(-50%, -50%); background: #ffe3b8; clip-path: polygon(50% 0, 64% 35%, 100% 50%, 64% 64%, 50% 100%, 35% 64%, 0 50%, 35% 35%); }
.constellation span:nth-child(1) { left: 12%; top: 75%; }
.constellation span:nth-child(2) { left: 30%; top: 44%; }
.constellation span:nth-child(3) { left: 52%; top: 61%; }
.constellation span:nth-child(4) { left: 68%; top: 32%; }
.constellation span:nth-child(5) { left: 84%; top: 16%; }
.hero:has(.constellation) .hero-scene { filter: brightness(.46) saturate(.45); }
.approach-list { list-style: decimal-leading-zero; padding-left: 25px; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.approach-list li { padding: 14px 12px; border-top: 1px solid var(--line); }
.approach-list li::marker { color: var(--accent); font-size: 13px; }
.approach-list h3 { font-size: 18px; margin-bottom: 6px; }
.approach-list p { font-size: 15px; line-height: 1.6; color: var(--muted); }
@media (max-width: 950px) {
  .shell { width: calc(100% - 64px); }
  nav { gap: 18px; }
}
@media (max-width: 720px) {
  :root { --header: 61px; }
  .shell { width: calc(100% - 32px); }
  .header-inner { gap: 8px; }
  .site-header nav { display: none; }
  .wordmark { font-size: 14px; gap: 8px; }
  .mark { width: 29px; height: 29px; }
  .utility { min-height: 40px; padding-inline: 8px; }
  .coin-button { min-width: 42px; }
  .hero { min-height: 0; display: block; }
  .hero-copy { padding-block: 34px 181px; }
  h1 { font-size: clamp(45px, 10.6vw, 67px); }
  .route-hero h1 { font-size: clamp(38px, 9vw, 64px); }
  .hero-scene, .route-hero .hero-scene, .scene-stone { inset: auto 0 0; height: 215px; background-position: right 55%; background-size: auto 100%; }
  .hero::after { inset: auto 0 0; height: 215px; background: linear-gradient(180deg, #141416 0%, #14141600 35%, #14141605 78%, #141416 100%); }
  .scene-stage { top: auto; height: 190px; width: 100%; }
  .position { margin-bottom: 15px; }
  .intro { margin-top: 17px; }
  .choice-list { flex-direction: column; gap: 8px; margin-top: 23px; }
  .choice { min-height: 74px; padding-block: 12px; gap: 5px; }
  .choice .arrow { top: 12px; }
  .section { padding-block: 37px; }
  .tiles, .case-sections, .approach-list, .map-projects { grid-template-columns: 1fr; }
  .map-projects::before { left: 50%; width: 1px; border: 0; background: var(--corridor); }
  .map-branches { gap: 9px; }
  .dungeon-map { padding: 9px; }
  .map-room { font-size: 12px; padding-inline: 5px; overflow-wrap: anywhere; }
  .panel-head { flex-wrap: wrap; gap: 8px; }
  .panel-tools { margin-left: auto; }
  .portal-sign { font-size: 13px; top: -17px; }
.arena-status { right: 12px; bottom: 9px; font-size: 12px; max-width: calc(100% - 24px); }
  .arena-field { inset: 1% 13% 31% 1%; }
  .arena-zombie .arena-field { inset: 23% 10% 10% 0; }
  .arena-paw .arena-field { inset: 0; }
  .hidden-monster { height: 70px; }
  .hero:has(.shaft-game) .hero-copy { padding-bottom: 340px; }
  .hero:has(.shaft-game) .hero-scene, .hero:has(.shaft-game)::after { height: 355px; }
  .hero:has(.shaft-game) .scene-stage { height: 340px; }
  .shaft-game { width: min(77%, 235px); bottom: 3%; }
  .hero:has(.wolf-game) .hero-copy { padding-bottom: 228px; }
  .hero:has(.wolf-game) .hero-scene, .hero:has(.wolf-game)::after { height: 235px; }
  .hero:has(.wolf-game) .scene-stage { height: 220px; }
  .wolf-game { right: 5%; bottom: 4%; }
  .hero:has(.mine-wall) .hero-copy { padding-bottom: 460px; }
  .hero:has(.mine-wall) .hero-scene, .hero:has(.mine-wall)::after { height: 478px; background-position: 66% center; }
  .hero:has(.mine-wall) .scene-stage { height: 460px; }
  .project-floors { padding-left: 8px; }
  .project-floor { grid-template-columns: 52px minmax(0, 1fr) 14px; gap: 8px; padding: 11px; }
  .floor-number { font-size: 12px; }
  .floor-copy small { font-size: 14px; }
  .tile { min-height: 94px; padding: 16px; }
  .section-head { align-items: baseline; }
  .section-head .text-link { font-size: 13px; }
  dialog { padding: 16px; }
  .notice { bottom: 12px; right: 12px; }
}
@media (max-width: 520px) {
  .projects-toggle-label { display: none; }
  .projects-toggle { min-width: 38px; justify-content: center; padding-inline: 5px; }
}
@media (max-width: 365px) {
  .map-label { display: none; }
  #map-button { min-width: 40px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .arena-target { animation: none !important; }
  .drone-burst { animation: none !important; }
}

/* --- Знакомство, обращение по имени, контакты, «Обо мне», ачивки --- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.greeting { max-width: 560px; margin-top: 16px; padding-left: 14px; border-left: 2px solid var(--accent); color: var(--text); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; text-wrap: pretty; }
.hero-copy .greeting + .hero-actions, .hero-copy .greeting + .choice-list { margin-top: 28px; }

#intro { width: min(520px, calc(100% - 26px)); padding: 0; background: #1d1b1f; border-color: #795e54; }
#intro[open] { animation: intro-in .3s ease-out both; }
.intro-card { padding: 30px; }
.intro-card h2 { font-size: clamp(30px, 5vw, 40px); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.intro-card h2 + p { margin-top: 14px; color: var(--muted); font-size: 17px; line-height: 1.5; }
.intro-card label { display: block; margin: 24px 0 8px; font-size: 18px; font-weight: 650; }
.intro-card input { width: 100%; min-height: 46px; padding: 10px 12px; color: var(--text); background: #141316; border: 1px solid #777176; border-radius: 2px; font-size: 17px; }
.intro-card input:focus-visible { outline-offset: 2px; }
.intro-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
@keyframes intro-in { from { opacity: 0; transform: translateY(14px); } }

.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.contact-grid .contact-box { max-width: none; }
.contact-list { list-style: none; margin: 12px 0 0; padding: 0; }
.contact-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list span { color: var(--muted); font-size: 14px; }
.contact-list a { color: var(--text); font-weight: 650; overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--accent); }
.hero-actions .button { overflow-wrap: anywhere; }

.about { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.resume-links { flex-wrap: wrap; margin-top: 24px; }
.about-facts { padding: 22px; border: 1px solid var(--line); background: var(--surface); border-radius: 2px; }
.about-facts h3 { margin-bottom: 10px; color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; }
.about-facts h3:not(:first-child) { margin-top: 22px; }
.about-facts p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 92px 1fr; column-gap: 12px; padding: 9px 0; border-bottom: 1px solid #343237; }
.timeline li:last-child { border-bottom: 0; }
.timeline span { grid-row: span 2; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.timeline strong { font-size: 16px; }
.timeline small { color: var(--muted); font-size: 14px; margin-top: 2px; }

.reward-list li { display: flex; align-items: flex-start; gap: 12px; }
.reward-list li::before { content: none; }
.reward-mark { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 700; }
.reward-list li.is-done .reward-mark { border-color: var(--accent); color: var(--accent); background: #332927; }
.reward-list strong { display: block; font-size: 16px; }
.reward-list small { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.reward-list li:not(.is-done) strong { color: var(--muted); }
.visitor-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; color: var(--muted); font-size: 14px; }

@media (max-width: 720px) {
  .contact-grid, .about { grid-template-columns: 1fr; gap: 20px; }
  .intro-card { padding: 22px; }
  .intro-actions .button { flex: 1 1 auto; justify-content: center; }
}
.visitor-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }

/* --- Сундук с контактами внизу каждого зала --- */
.chest-teaser { position: relative; isolation: isolate; min-height: 430px; display: flex; align-items: center; overflow: hidden; border-top: 1px solid #54413a; background: #141416; }
.chest-teaser::before { content: ""; position: absolute; inset: 0; z-index: -2; background: #1a191b url("treasure.webp") 70% center / cover no-repeat; image-rendering: pixelated; transition: transform .6s ease, filter .6s ease; }
.chest-teaser::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #141416 4%, #141416e6 30%, #1414168a 55%, #14141600 78%), linear-gradient(0deg, #141416 0%, transparent 25%), linear-gradient(180deg, #141416 0%, transparent 18%); }
.chest-teaser:has(.chest-teaser-scene:is(:hover, :focus-visible))::before { transform: scale(1.03); filter: brightness(1.15) saturate(1.1); }
.chest-teaser-scene { position: absolute; top: 0; right: 0; bottom: 0; width: 45%; z-index: 1; }
.chest-teaser-scene:focus-visible { outline-offset: -8px; }
.chest-teaser-copy { position: relative; z-index: 2; padding-block: 64px; pointer-events: none; }
.chest-teaser-copy > * { pointer-events: auto; }
.chest-teaser h2 { max-width: 640px; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -.022em; text-wrap: balance; }
.chest-teaser .hero-actions { flex-wrap: wrap; }
.about-greeting { margin: 18px 0 4px; }
@media (max-width: 720px) {
  .chest-teaser { min-height: 0; align-items: flex-start; }
  .chest-teaser::before { inset: auto 0 0; height: 220px; background-position: 70% 60%; }
  .chest-teaser-copy { padding-block: 40px 230px; }
  .chest-teaser-scene { top: auto; height: 220px; width: 100%; }
}

/* --- Слоистые сцены из art/ (ART_SPEC.md) --- */
.hero:has(.scene-layers) { min-height: 0; height: clamp(560px, 41.7vw, 860px); }
.hero-scene.scene-layers {
  position: absolute; inset: 0; z-index: -3; overflow: hidden; background: #0b0a0c;
  scale: none; translate: none; transition: none; pointer-events: none;
}
.hero-scene.scene-layers::after { content: none; }
.art-stage { position: absolute; left: 0; top: 0; width: 512px; height: 272px; transform-origin: 0 0; }
.art-layer, .art-opening { position: absolute; inset: 0; }
.art-layer {
  transform: translate3d(calc(var(--pan-ax, 0) * var(--f) * 1px), calc(var(--pan-ay, 0) * var(--f) * 1px), 0);
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.art-px { position: absolute; display: block; max-width: none; image-rendering: pixelated; user-select: none; }
.art-light { mix-blend-mode: screen; opacity: .55; }
.art-mist { opacity: .35; animation: art-breathe 5.5s ease-in-out infinite alternate; }
.art-glow { mix-blend-mode: screen; opacity: .38; animation: art-flicker 1.9s steps(6) var(--delay, 0s) infinite; }
.art-flame {
  position: absolute; width: 6px; height: 9px; image-rendering: pixelated;
  background: url("art/shared/flame-0.png"); animation: art-flame .72s steps(1) var(--delay, 0s) infinite;
}
@keyframes art-flame {
  0% { background-image: url("art/shared/flame-0.png"); }
  16.6% { background-image: url("art/shared/flame-1.png"); }
  33.3% { background-image: url("art/shared/flame-2.png"); }
  50% { background-image: url("art/shared/flame-3.png"); }
  66.6% { background-image: url("art/shared/flame-4.png"); }
  83.3% { background-image: url("art/shared/flame-5.png"); }
}
@keyframes art-flicker { 0%, 100% { opacity: .38; } 20% { opacity: .3; } 45% { opacity: .46; } 70% { opacity: .34; } }
@keyframes art-breathe { from { opacity: .16; } to { opacity: .3; } }
/* двери и клеть: 4 кадра одного размера */
.art-door .art-px, .art-lid .art-px { visibility: hidden; }
.art-door .art-frame-0, .art-lid .art-frame-0 { visibility: visible; }
.art-door.is-open .art-frame-0, .is-open .art-lid .art-frame-0 { animation: art-f0 .3s steps(1) forwards; }
.art-door.is-open .art-frame-1, .is-open .art-lid .art-frame-1 { animation: art-f1 .3s steps(1) forwards; }
.art-door.is-open .art-frame-2, .is-open .art-lid .art-frame-2 { animation: art-f2 .3s steps(1) forwards; }
.art-door.is-open .art-frame-3, .is-open .art-lid .art-frame-3 { animation: art-f3 .3s steps(1) forwards; }
@keyframes art-f0 { 0% { visibility: visible; } 25%, 100% { visibility: hidden; } }
@keyframes art-f1 { 0% { visibility: hidden; } 25% { visibility: visible; } 50%, 100% { visibility: hidden; } }
@keyframes art-f2 { 0%, 25% { visibility: hidden; } 50% { visibility: visible; } 75%, 100% { visibility: hidden; } }
@keyframes art-f3 { 0%, 50% { visibility: hidden; } 75%, 100% { visibility: visible; } }
/* сундук */
.art-chest-hit { position: absolute; left: 340px; top: 104px; width: 96px; height: 120px; }
.art-coins, .art-chest-glow, .art-sparkle { opacity: 0; transition: opacity .4s ease .25s; }
.is-open .art-coins { opacity: 1; }
.is-open .art-chest-glow { opacity: .8; animation: art-breathe 2.2s ease-in-out infinite alternate; }
.art-shaft { opacity: .22; }
.is-open .art-shaft { opacity: .28; transition: opacity .6s; }
.art-sparkle {
  position: absolute; width: 8px; height: 8px; image-rendering: pixelated;
  background: url("art/chest/sparkle-0.png");
}
.is-open .art-sparkle { opacity: 1; animation: art-sparkle 1.6s steps(1) var(--delay) infinite; }
@keyframes art-sparkle {
  0% { background-image: url("art/chest/sparkle-0.png"); } 25% { background-image: url("art/chest/sparkle-1.png"); }
  50% { background-image: url("art/chest/sparkle-2.png"); } 75% { background-image: url("art/chest/sparkle-3.png"); }
}
.scene-chest:has(.chest-target:is(:hover, :focus-visible)):not(.is-open) .art-lid .art-frame-0,
.chest-teaser:has(.chest-teaser-scene:is(:hover, :focus-visible)) .art-lid .art-frame-0 { visibility: hidden; }
.scene-chest:has(.chest-target:is(:hover, :focus-visible)):not(.is-open) .art-lid .art-frame-1,
.chest-teaser:has(.chest-teaser-scene:is(:hover, :focus-visible)) .art-lid .art-frame-1 { visibility: visible; }
.chest-teaser:has(.chest-teaser-scene:is(:hover, :focus-visible)) .art-chest-glow { opacity: .55; }
.scene-chest .hero-scene.scene-layers, .chest-teaser .hero-scene.scene-layers { background-image: none; }
.chest-teaser:has(.scene-layers)::before { content: none; }
.chest-teaser .hero-scene.scene-layers { z-index: -2; }
.chest-target, .chest-teaser-scene { position: absolute; z-index: 2; }
/* затемнение под текст слева */
.hero:has(.scene-layers)::after {
  background: linear-gradient(90deg, #0b0a0cd9, #0b0a0c80 26%, transparent 44%), linear-gradient(0deg, #141416a8, transparent 16%);
}
.hero:has(.scene-layers) .hero-copy > :is(h1, .intro, .greeting) { max-width: min(620px, 39%); }
.hero:has(.scene-layers) .hero-copy h1 { text-wrap: initial; }
.home-hero:has(.scene-layers) .hero-copy h1 { max-width: 43%; font-size: clamp(44px, 4.6vw, 67px); }
.home-hero:has(.scene-layers) .accent-line { white-space: nowrap; }
.hero:has(.scene-layers) .hero-copy .intro, .hero:has(.scene-layers) .hero-copy .greeting { text-shadow: 0 1px 4px #141416; }
.route-hero:has(.scene-layers) h1 { font-size: clamp(38px, 4.8vw, 72px); }
.choice-links {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 9px; row-gap: 0;
  padding-top: 13px; color: var(--muted); font-size: 14px;
}
.choice-links a { display: inline-flex; min-height: 36px; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.choice-links a:hover { color: var(--accent); }

/* таблички: живут в координатах арта, масштабируются вместе со сценой */
.scene-passages {
  position: absolute; left: 0; top: 0; z-index: 1; width: 512px; height: 272px;
  transform-origin: 0 0; pointer-events: none;
}
.scene-passage {
  position: absolute; inset: 0;
  transform: translate3d(calc(var(--pan-ax, 0) * .30 * 1px), calc(var(--pan-ay, 0) * .30 * 1px), 0);
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.passage-hit { position: absolute; pointer-events: auto; cursor: pointer; }
.hang-sign {
  position: absolute; width: 0; height: 0; pointer-events: none; color: #f3d8b5; text-decoration: none;
  transform: translate3d(calc(var(--pan-ax, 0) * .02 * 1px), 0, 0);
}
.hang-sign-pendulum {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center;
  transform-origin: 50% 0; translate: -50% 0; will-change: transform;
}
.hang-sign-rope {
  display: block; width: 2px; height: var(--rope, 10px); flex: none;
  transition: height .45s cubic-bezier(.34, 1.56, .64, 1);
  background: url("art/shared/rope.png") repeat-y; background-size: 2px 4px; image-rendering: pixelated;
}
.hang-sign-board {
  position: relative; display: block; pointer-events: auto; cursor: pointer; margin-top: -1px;
  min-height: 16px; padding: 4px 7px 3px;
  background:
    url("art/shared/sign-left.png") left top / 6px 100% no-repeat,
    url("art/shared/sign-right.png") right top / 6px 100% no-repeat,
    url("art/shared/sign-mid.png") left top / 4px 100% repeat-x;
  background-origin: border-box; image-rendering: pixelated;
  background-clip: border-box;
}
.hang-sign-text {
  display: block; position: relative; white-space: normal; text-align: center;
  font: 400 calc(17px / var(--s, 3)) / 1.05 "Tiny5", Roboto, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  color: #ffd9a8; width: max-content; max-width: calc(190px / var(--s, 3)); padding-block: calc(1px / var(--s, 3));
  text-shadow: calc(1px / var(--s, 3)) calc(1px / var(--s, 3)) 0 #0b0a0c, 0 0 calc(6px / var(--s, 3)) #ff8b6566;
}
.sign-short { display: none; }
.hang-sign:is(:hover, :focus-visible) .hang-sign-text, .scene-passage:has(.passage-hit:hover) .hang-sign-text { color: #fff1dd; }
.hang-sign:is(:hover, :focus-visible) .hang-sign-board, .scene-passage:has(.passage-hit:hover) .hang-sign-board {
  filter: brightness(1.25) drop-shadow(0 0 2px #ff8b6599);
}
.hang-sign:focus-visible { outline: none; }
.hang-sign:focus-visible .hang-sign-board { outline: calc(2px / var(--s, 3)) solid #ffcf97; outline-offset: 1px; }
.debug-anchors .passage-hit { outline: 1px dashed #ffe099; outline-offset: -1px; }

@media (max-width: 720px) {
  .hero:has(.scene-layers) { height: auto; --scene-height: 270px; }
  .hero:has(.scene-layers) .hero-copy { padding-bottom: calc(var(--scene-height) + 20px); }
  .hero:has(.scene-layers) .hero-copy > :is(h1, .intro, .greeting),
  .home-hero:has(.scene-layers) .hero-copy h1 { max-width: 100%; }
  .home-hero:has(.scene-layers) .hero-copy h1 { font-size: clamp(38px, 10.1vw, 64px); }
  .home-hero:has(.scene-layers) .accent-line { white-space: normal; }
  .hero-scene.scene-layers { inset: auto 0 0; height: var(--scene-height); }
  .hero:has(.scene-layers)::after { inset: auto 0 0; height: var(--scene-height);
    background: linear-gradient(180deg, #141416 0%, transparent 18%, transparent 88%, #141416b0); }
  .chest-teaser .hero-scene.scene-layers { height: 230px; }
  .art-fg { display: none; }
  .hang-sign-text { font-size: calc(12px / var(--s, 1.3)); letter-spacing: .03em; }
  .sign-long { display: none; }
  .sign-short { display: block; }
  .hang-sign-board { padding-inline: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .art-layer, .scene-passage { transition: none; transform: none; }
  .art-flame, .art-glow, .art-mist, .art-sparkle, .is-open .art-chest-glow { animation: none; }
  .art-door.is-open .art-px, .is-open .art-lid .art-px { animation: none; }
  .art-door.is-open .art-frame-3, .is-open .art-lid .art-frame-3 { visibility: visible; }
  .art-door.is-open .art-frame-0, .is-open .art-lid .art-frame-0 { visibility: hidden; }
}

.lang-button { min-width: 42px; justify-content: center; font-weight: 650; letter-spacing: .04em; }

@media (max-width: 720px) { .map-label { display: none; } }

/* детальный арт (плотность > 1): без «пиксельного» масштабирования */
.art-hd .art-px { image-rendering: auto; }
.art-hd .art-flame, .art-hd .art-sparkle { image-rendering: auto; background-size: 100% 100%; }
.art-flame, .art-sparkle { background-size: 100% 100%; }

/* при наведении верёвка удлиняется — табличка опускается к двери */
.hang-sign:is(:hover, :focus-visible) .hang-sign-rope,
.scene-passage:has(.passage-hit:hover) .hang-sign-rope { height: calc(var(--rope, 10px) + 7px); }
@media (prefers-reduced-motion: reduce) { .hang-sign-rope { transition: none; } }

/* --- спрайты мини-игр (арт из исходников) --- */
.arena-drone .arena-target span {
  width: 72px; height: 36px; background: url("art/games-sprites-hd/drone-0.png") center / 100% 100% no-repeat;
  filter: brightness(1.25) drop-shadow(0 2px 3px #0b1214);
  animation: drone-spin .2s steps(1) infinite;
}
.arena-drone .arena-target span::before, .arena-drone .arena-target span::after { content: none; }
@keyframes drone-spin {
  0% { background-image: url("art/games-sprites-hd/drone-0.png"); } 25% { background-image: url("art/games-sprites-hd/drone-1.png"); }
  50% { background-image: url("art/games-sprites-hd/drone-2.png"); } 75% { background-image: url("art/games-sprites-hd/drone-3.png"); }
}
.drone-burst {
  width: 56px; height: 56px; margin: -28px 0 0 -28px; background: url("art/games-sprites-hd/drone-burst-0.png") center / 100% 100%; box-shadow: none;
  animation: drone-burst .33s steps(1) both;
}
@keyframes drone-burst {
  0% { background-image: url("art/games-sprites-hd/drone-burst-0.png"); } 20% { background-image: url("art/games-sprites-hd/drone-burst-1.png"); }
  40% { background-image: url("art/games-sprites-hd/drone-burst-2.png"); } 60% { background-image: url("art/games-sprites-hd/drone-burst-3.png"); }
  80% { background-image: url("art/games-sprites-hd/drone-burst-4.png"); } 100% { background-image: url("art/games-sprites-hd/drone-burst-4.png"); opacity: 0; }
}
.arena-zombie .arena-target span {
  width: 39px; height: 52px; clip-path: none; background: url("art/games-sprites-hd/zombie-0.png") center bottom / 100% 100% no-repeat;
  animation: zombie-walk .6s steps(1) infinite;
}
@keyframes zombie-walk {
  0% { background-image: url("art/games-sprites-hd/zombie-0.png"); } 16.6% { background-image: url("art/games-sprites-hd/zombie-1.png"); }
  33.3% { background-image: url("art/games-sprites-hd/zombie-2.png"); } 50% { background-image: url("art/games-sprites-hd/zombie-3.png"); }
  66.6% { background-image: url("art/games-sprites-hd/zombie-4.png"); } 83.3% { background-image: url("art/games-sprites-hd/zombie-5.png"); }
}
.arena-paw .arena-target span {
  width: 44px; height: 44px; clip-path: none; scale: none; background: url("art/games-sprites-hd/paw-0.png") center / 100% 100% no-repeat;
  animation: paw-frames 1.4s steps(1) infinite;
}
@keyframes paw-frames {
  0% { background-image: url("art/games-sprites-hd/paw-0.png"); } 33% { background-image: url("art/games-sprites-hd/paw-1.png"); }
  66% { background-image: url("art/games-sprites-hd/paw-2.png"); }
}
.hidden-monster {
  width: 84px; height: 84px; clip-path: none; background: url("art/games-sprites-hd/monster-3.png") center bottom / 100% 100% no-repeat;
  animation: monster-reveal .5s steps(1) both, monster-peek .35s ease-out both;
}
.hidden-monster i { display: none; }
@keyframes monster-reveal {
  0% { background-image: url("art/games-sprites-hd/monster-0.png"); } 25% { background-image: url("art/games-sprites-hd/monster-1.png"); }
  50% { background-image: url("art/games-sprites-hd/monster-2.png"); } 75%, 100% { background-image: url("art/games-sprites-hd/monster-3.png"); }
}
/* --- значки ачивок --- */
.reward-mark { flex-basis: 34px; height: 34px; padding: 3px; background: #1b1a1d; }
.reward-icon { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) brightness(.55); opacity: .55; }
.reward-list li.is-done .reward-icon { filter: none; opacity: 1; }
.notice { display: flex; align-items: center; gap: 10px; }
.notice-icon { width: 30px; height: 30px; flex: none; image-rendering: auto; }
/* --- декор: пыль в сценах, разделитель, рамки карточек --- */
.art-dust {
  position: absolute; width: 1px; height: 1px; background: #d8b98f; opacity: 0; border-radius: 50%;
  animation: art-dust var(--t, 10s) linear var(--d, 0s) infinite;
}
@keyframes art-dust { 0% { opacity: 0; translate: 0 0; } 15% { opacity: .55; } 85% { opacity: .45; } 100% { opacity: 0; translate: 14px -46px; } }
.hero:has(.scene-layers) { border-bottom: 0; }
.hero:has(.scene-layers)::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; z-index: 3; pointer-events: none;
  background: url("art/shared/divider.png") left bottom / 96px 12px repeat-x;
}
.contact-box, .about-facts {
  border: 12px solid transparent; border-image: url("art/shared/frame-card.png") 32 / 12px round; background-clip: padding-box;
}
@media (prefers-reduced-motion: reduce) {
  .art-dust, .arena-drone .arena-target span, .arena-zombie .arena-target span, .arena-paw .arena-target span { animation: none; }
}