html,
      body {
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
        background: #05070f;
        color: #eef2ff;
      }

      #app {
        position: relative;
        width: 100%;
        height: 100%;
      }

      #hud {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 2;
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
        background: rgba(10, 14, 30, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.16);
        padding: 10px;
        border-radius: 12px;
        backdrop-filter: blur(6px);
      }

      .mode-btn,
      #start-fps,
      #sound-toggle,
      #weather-toggle,
      #map-toggle,
      #journal-toggle,
      #time-toggle,
      #quality-toggle {
        border: 0;
        background: #2d6def;
        color: #f7f9ff;
        border-radius: 8px;
        padding: 8px 12px;
        cursor: pointer;
        font-weight: 600;
      }

      .mode-btn.active {
        background: #4ade80;
      }

      #hud small {
        opacity: 0.85;
      }

      #start-fps {
        background: #ffb020;
      }

      #sound-toggle { background: #527166; }
      #weather-toggle { background: #61756e; }
      #weather-toggle[data-weather="rain"] { background: #52677d; }
      #weather-toggle[data-weather="mist"] { background: #6d7771; }
      #map-toggle { background: #9c7b3d; }
      #journal-toggle { background: #735a35; }
      #time-toggle { background: #475b74; }
      #quality-toggle { background: #4e665d; }

      #overlay {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding-bottom: 24px;
        box-sizing: border-box;
        pointer-events: none;
        z-index: 3;
      }

      #overlay span {
        padding: 8px  14px;
        border-radius: 10px;
        background: rgba(3, 8, 22, 0.68);
        border: 1px solid rgba(255, 255, 255, 0.22);
        font-size: 14px;
        pointer-events: none;
      }
      #location { position: absolute; left: 18px; bottom: 84px; z-index: 2; pointer-events: none; text-shadow: 0 2px 8px #142c26; }
      #location strong { display: block; font: 28px Georgia, serif; }
      #location small { letter-spacing: .12em; text-transform: uppercase; }
      #quest { position: absolute; right: 18px; top: 82px; z-index: 2; max-width: 280px; padding: 12px 14px; border-left: 3px solid #d4b779; background: linear-gradient(90deg, rgba(20,39,33,.9), rgba(20,39,33,.48)); text-shadow: 0 2px 7px #142c26; pointer-events: none; }
      #quest small { display: block; color: #d4b779; letter-spacing: .12em; text-transform: uppercase; }
      #quest strong { display: block; margin-top: 4px; font: 19px Georgia, serif; }
      #quest-nav { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: #f0dfaf; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
      #quest-arrow { display: inline-grid; width: 22px; height: 22px; place-items: center; color: #f5d887; font-size: 19px; line-height: 1; transform-origin: center; text-shadow: 0 0 10px rgba(245,216,135,.7); }
      #quest-distance { font-weight: 700; }
      #discovery { position: absolute; left: 50%; top: 22%; z-index: 4; width: min(420px, calc(100% - 40px)); padding: 16px 20px; transform: translate(-50%, -18px); opacity: 0; border: 1px solid rgba(228,208,158,.55); background: rgba(15,31,27,.88); text-align: center; pointer-events: none; transition: opacity .45s ease, transform .45s ease; }
      #discovery.active { opacity: 1; transform: translate(-50%, 0); }
      #discovery small { color: #d4b779; letter-spacing: .16em; text-transform: uppercase; }
      #discovery strong { display: block; margin: 6px 0; font: 24px Georgia, serif; }
      #discovery span { color: #dce4db; }
      #interaction-prompt { position: absolute; left: 50%; bottom: 112px; z-index: 4; transform: translate(-50%, 8px); opacity: 0; padding: 7px 12px; border: 1px solid rgba(237,218,168,.5); border-radius: 7px; background: rgba(13,29,24,.82); color: #f0dfaf; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
      #interaction-prompt.active { opacity: 1; transform: translate(-50%, 0); }
      #dialogue { position: absolute; left: 50%; bottom: 28px; z-index: 8; display: none; width: min(620px, calc(100% - 36px)); box-sizing: border-box; padding: 20px 22px 18px; transform: translateX(-50%); border: 1px solid rgba(231,207,151,.48); border-left: 4px solid #d4b779; background: linear-gradient(110deg, rgba(14,31,25,.97), rgba(22,42,34,.93)); box-shadow: 0 14px 48px rgba(4,10,8,.55); }
      #dialogue.active { display: block; }
      #dialogue small { color: #d4b779; letter-spacing: .16em; text-transform: uppercase; }
      #dialogue h3 { margin: 4px 0 7px; font: 25px Georgia, serif; }
      #dialogue p { margin: 0 0 14px; color: #e0e7df; font: 16px/1.55 Georgia, serif; }
      #dialogue button { float: right; border: 1px solid rgba(231,207,151,.5); border-radius: 6px; padding: 7px 12px; background: rgba(212,183,121,.16); color: #f0dfaf; cursor: pointer; font-weight: 700; }
      #crosshair { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border: 1px solid white; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; }
      #water-vignette { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; background: linear-gradient(to top, rgba(10,93,111,.46), transparent 38%), radial-gradient(circle at center, transparent 45%, rgba(9,67,82,.28)); transition: opacity .45s ease; }
      #water-vignette.active { opacity: 1; }
      #world-map {
        position: absolute;
        inset: 0;
        z-index: 5;
        display: none;
        pointer-events: none;
        box-sizing: border-box;
        border: clamp(10px, 2vw, 24px) solid rgba(27, 35, 28, .76);
        box-shadow: inset 0 0 90px rgba(8, 16, 13, .68);
      }
      #world-map.active { display: block; }
      #world-map::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at center, transparent 48%, rgba(10, 19, 15, .5) 100%);
      }
      #map-title {
        position: absolute;
        left: 50%;
        top: 22px;
        transform: translateX(-50%);
        min-width: min(520px, calc(100% - 48px));
        text-align: center;
        color: #f2e4bd;
        text-shadow: 0 3px 12px #0b1712;
      }
      #map-title small { display: block; letter-spacing: .2em; text-transform: uppercase; }
      #map-title strong { display: block; margin-top: 3px; font: clamp(28px, 4vw, 48px) Georgia, serif; }
      #map-title span { font-size: 12px; opacity: .88; }
      #map-controls {
        position: absolute;
        right: 22px;
        bottom: 22px;
        display: flex;
        gap: 7px;
        pointer-events: auto;
      }
      #map-controls button {
        width: 42px;
        height: 42px;
        border: 1px solid rgba(242, 228, 189, .5);
        border-radius: 50%;
        background: rgba(20, 38, 30, .88);
        color: #f2e4bd;
        font: 700 19px Georgia, serif;
        cursor: pointer;
      }
      #map-controls #map-close { width: auto; padding: 0 16px; border-radius: 21px; font: 700 12px "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
      #map-labels { position: absolute; inset: 0; overflow: hidden; }
      .map-label {
        position: absolute;
        transform: translate(-50%, -100%);
        padding: 3px 7px;
        border-radius: 4px;
        background: rgba(12, 29, 23, .76);
        color: #e7eee7;
        font-size: 11px;
        white-space: nowrap;
        text-shadow: 0 1px 3px #07100d;
      }
      .map-label::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 8px; background: rgba(236, 224, 185, .72); }
      .map-label.story { color: #f2d185; border: 1px solid rgba(242, 209, 133, .38); }
      #app.map-open #hud, #app.map-open #overlay, #app.map-open #location, #app.map-open #quest, #app.map-open #crosshair { opacity: 0; pointer-events: none; }
      #hud, #overlay, #location, #quest, #crosshair { transition: opacity .22s ease; }
      #journal {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 7;
        width: min(470px, 100%);
        height: 100%;
        box-sizing: border-box;
        padding: 34px 30px 42px;
        overflow-y: auto;
        color: #30291f;
        background:
          linear-gradient(90deg, rgba(74, 52, 29, .16), transparent 9%),
          repeating-linear-gradient(0deg, rgba(92, 66, 35, .035) 0, rgba(92, 66, 35, .035) 1px, transparent 1px, transparent 4px),
          #e8d7ad;
        border-left: 4px solid #6f5632;
        box-shadow: -18px 0 55px rgba(5, 11, 8, .55);
        transform: translateX(105%);
        visibility: hidden;
        transition: transform .36s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .36s;
      }
      #journal.active { transform: translateX(0); visibility: visible; transition-delay: 0s; }
      #journal::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(75, 53, 29, .26); pointer-events: none; }
      #journal-close {
        position: absolute;
        top: 22px;
        right: 22px;
        width: 36px;
        height: 36px;
        border: 1px solid rgba(58, 43, 25, .45);
        border-radius: 50%;
        background: rgba(255, 248, 226, .48);
        color: #45351f;
        font-size: 20px;
        cursor: pointer;
      }
      #journal header { padding-right: 44px; border-bottom: 1px solid rgba(73, 51, 27, .35); }
      #journal header small { letter-spacing: .18em; text-transform: uppercase; }
      #journal header h2 { margin: 4px 0 7px; font: 38px Georgia, serif; }
      #journal header p { margin: 0 0 20px; color: #66563f; font: italic 15px/1.5 Georgia, serif; }
      #journal-progress { display: block; margin: 18px 0 8px; color: #765c31; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
      #journal-chapters { display: grid; gap: 10px; }
      .journal-entry { position: relative; padding: 14px 14px 14px 46px; border-bottom: 1px solid rgba(76, 54, 29, .22); }
      .journal-entry::before { content: attr(data-number); position: absolute; left: 5px; top: 12px; color: #9a7540; font: 26px Georgia, serif; }
      .journal-entry h3 { margin: 0 0 5px; font: 20px Georgia, serif; }
      .journal-entry p { margin: 0; color: #554936; font: 14px/1.5 Georgia, serif; }
      .journal-entry.locked { opacity: .58; }
      .journal-entry.locked h3 { font-style: italic; }
      #journal-epilogue { display: none; margin: 24px 4px 0; padding: 18px; border: 1px solid rgba(104, 72, 29, .38); text-align: center; font: italic 16px/1.55 Georgia, serif; }
      #journal-epilogue.active { display: block; }
      #app.journal-open::after { content: ""; position: absolute; inset: 0; z-index: 6; background: rgba(5, 12, 9, .48); backdrop-filter: blur(2px); }
      #hud { max-width: calc(100% - 48px); background: rgba(23, 43, 37, .82); }
      .mode-btn { background: #39564b; }
      .mode-btn.active { background: #d4b779; color: #1d312a; }
      button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
      @media (max-width: 600px) { #hud { gap: 5px; padding: 8px; } .mode-btn, #start-fps, #sound-toggle, #weather-toggle, #map-toggle, #journal-toggle, #time-toggle, #quality-toggle { padding: 7px; font-size: 11px; } #hud small { font-size: 11px; } #overlay span { margin: 0 12px; font-size: 11px; } #location strong { font-size: 22px; } #quest { top: auto; right: 12px; bottom: 82px; max-width: 210px; } #map-title { top: 14px; } #map-title span { display: none; } #map-controls { right: 14px; bottom: 14px; } #journal { padding: 28px 22px 34px; } }
      @media (prefers-reduced-motion: reduce) { #journal, #discovery, #interaction-prompt { transition: none; } }