@font-face{font-family:'Cormorant';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Cormorant-600-cyrillic.af34ba75.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Cormorant-600-latin.b8b36b2e.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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-500-cyrillic.d524dc8f.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-500-latin.a76f53ca.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:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/IBMPlexSans-400_600-cyrillic.5bac7252.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/IBMPlexSans-400_600-latin.056e4e24.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:'Unbounded';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/Unbounded-500_700-cyrillic.c3880f0c.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/Unbounded-500_700-latin.d7f07f8a.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 {
    --ink: #F2EFE7;
    --panel: rgba(16, 24, 20, 0.82);
    --panel-line: rgba(242, 239, 231, 0.14);
    --accent: #E8A33D;
    --ok: #7BC47F;
    --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --display: "Unbounded", var(--sans);
    --mono: "IBM Plex Mono", ui-monospace, monospace;
  }
  html, body { height: 100%; }
  body { margin: 0; overflow: hidden; background: #9DBDD6; color: var(--ink); font-family: var(--sans); }
  #scene { position: fixed; inset: 0; display: block; }

  .card {
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at 50% 40%, rgba(10,16,13,0.35), rgba(10,16,13,0.78));
    z-index: 10; transition: opacity .35s ease;
  }
  .card[hidden] { display: none; }
  .card-inner {
    background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px;
    padding: 34px 40px 28px; max-width: 430px; text-align: center;
    backdrop-filter: blur(14px); box-shadow: 0 24px 70px rgba(0,0,0,0.45);
  }
  .card h1 { font-family: var(--display); font-weight: 700; font-size: 26px; margin: 0 0 6px; letter-spacing: 0.01em; }
  .card .sub { margin: 0 0 22px; font-size: 14px; opacity: 0.75; line-height: 1.5; }
  .card button {
    font-family: var(--display); font-weight: 500; font-size: 15px; letter-spacing: 0.02em;
    color: #1A1408; background: var(--accent); border: none; border-radius: 10px;
    padding: 13px 30px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
  }
  .card button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(232,163,61,0.35); }
  .card button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .card button:disabled { opacity: 0.55; cursor: progress; }
  .legend { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
  .key {
    font-family: var(--mono); font-size: 12px; padding: 5px 10px; border-radius: 7px;
    border: 1px solid var(--panel-line); background: rgba(242,239,231,0.06); white-space: nowrap;
  }
  .key b { color: var(--accent); font-weight: 500; }
  .fine { margin-top: 18px; font-size: 11px; opacity: 0.45; line-height: 1.6; }

  .hud { position: fixed; z-index: 5; pointer-events: none; }
  #hud-stats {
    top: 14px; right: 14px; font-family: var(--mono); font-size: 12px; text-align: right;
    background: var(--panel); border: 1px solid var(--panel-line); border-radius: 9px;
    padding: 8px 12px; line-height: 1.7; font-variant-numeric: tabular-nums;
  }
  #hud-stats .v { color: var(--ok); }
  #hud-hint {
    bottom: 14px; left: 14px; display: flex; gap: 6px;
    font-family: var(--mono); font-size: 11px;
  }
  #hud-hint span { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 7px; padding: 5px 9px; }
  .hud[hidden] { display: none !important; }

  /* Тонкая виньетка поверх сцены: под HUD (z5) и карточкой входа (z10). */
  body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 4;
    background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(10, 14, 18, 0.28) 100%);
  }

  .apartment-menu {
    top: 14px; left: 14px; box-sizing: border-box;
    width: min(260px, calc(100vw - 28px)); padding: 12px;
    color: var(--ink); background: var(--panel);
    border: 1px solid var(--panel-line); border-radius: 9px;
    font-family: var(--sans); font-size: 13px; line-height: 1.4;
  }
  .apartment-menu h2 { margin: 0 0 8px; font-size: inherit; font-weight: 600; }
  .apartment-menu ul { margin: 0; padding: 0; list-style: none; }
  .apartment-menu li {
    display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; gap: 10px;
    box-sizing: border-box; min-height: 44px; padding: 5px 0;
  }
  .apartment-menu li + li { border-top: 1px solid var(--panel-line); }
  .apartment-menu__key { width: 10px; height: 10px; border-radius: 3px; }
  .apartment-menu__details { display: grid; gap: 2px; overflow-wrap: anywhere; }
  .apartment-menu__label { font-weight: 600; }
  .apartment-menu__location { font-size: 12px; opacity: 0.78; }
  .apartment-menu__floor { white-space: nowrap; }
  .apartment-menu__note { margin: 10px 0 0; font-size: 12px; opacity: 0.78; text-wrap: pretty; }
  @media (max-width: 600px) {
    .apartment-menu { top: 88px; }
  }
  @media (min-width: 480px) and (max-height: 420px) {
    .apartment-menu { top: 14px; padding: 10px; }
    .apartment-menu li { padding: 4px 0; }
    .apartment-menu__note { margin-top: 8px; }
  }