:root{--ink:#07101f;--blue:#061a4a;--blue2:#0c2b67;--gold:#e5b34f;--paper:#f5ead2;--cyan:#68e4d3}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030711;color:var(--paper);font-family:Georgia,"Times New Roman",serif}button,input{font:inherit}#game-shell{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(circle at 50% 45%,#1b2940,#030711 74%)}#viewport-wrap{position:relative;width:min(100vw,177.78vh);aspect-ratio:16/9;max-height:100vh;overflow:hidden;border:1px solid #7c632e;box-shadow:0 0 55px #000}#game{display:block;width:100%;height:100%;image-rendering:pixelated;background:#111827}#scanlines{position:absolute;inset:0;pointer-events:none;opacity:.17;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.45) 4px)}#hud{position:absolute;z-index:4;left:1.2%;right:1.2%;top:1.4%;display:flex;align-items:flex-start;gap:5px;pointer-events:none}.hud-block{min-height:50px;padding:6px 11px;border:1px solid #9e7835;background:rgba(5,16,35,.91);box-shadow:inset 0 0 0 2px #101b32}.hud-block small{display:block;color:#8296ab;font:10px Arial,sans-serif;letter-spacing:.13em}.hud-block strong{font-size:16px}.brand{font-size:23px;letter-spacing:.08em}.brand b{color:var(--gold)}.hud-grow{margin-left:auto;display:flex;gap:6px}.status[data-mode=live]{color:var(--cyan)}.status[data-mode=cache],.status[data-mode=bundled]{color:#f2b36a}#quest-card{position:absolute;z-index:3;right:2.5%;top:12%;display:flex;gap:10px;align-items:center;max-width:360px;padding:8px 13px;background:rgba(4,13,29,.9);border-right:2px solid var(--gold)}#quest-card small{display:block;color:#8ca0b4;font:10px Arial,sans-serif;letter-spacing:.12em}.sigil{font-size:23px;color:var(--cyan)}#prompt,#camera-hint{position:absolute;z-index:3;bottom:2%;font:12px Arial,sans-serif;letter-spacing:.05em;background:rgba(5,10,18,.88);border:1px solid #80642d;padding:6px 10px}#prompt{left:50%;transform:translateX(-50%);white-space:nowrap}#camera-hint{left:1.5%;color:#92a094}.modal{position:absolute;z-index:10;left:4%;right:4%;bottom:3%;min-height:120px;padding:13px 18px 31px;border:3px double #f4f2e8;outline:3px solid #0e1732;background:linear-gradient(180deg,rgba(8,31,83,.98),rgba(4,17,57,.98));box-shadow:0 7px 0 #01030a,inset 0 0 0 2px #4f6590}.modal.reader{inset:7% 8%;bottom:7%;overflow:auto;padding:24px 30px;background:linear-gradient(150deg,rgba(7,27,74,.99),rgba(3,12,39,.99))}.hidden{display:none!important}.close{position:absolute;z-index:2;right:10px;top:8px;width:34px;height:34px;border:1px solid var(--gold);color:white;background:#0d1a34;font-size:23px;cursor:pointer}.window-kicker{color:var(--cyan);font:12px Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase}.modal h2{margin:2px 44px 7px 0;font-size:clamp(21px,3vw,34px)}.dialogue-copy,.volume-title{margin:0;max-width:90%;font-size:clamp(16px,1.8vw,21px);line-height:1.4}.advance{position:absolute;right:16px;bottom:9px;color:#d8c9aa;font:12px Arial,sans-serif;letter-spacing:.08em}.book{max-width:900px;margin:auto}.book>p,.record-body{font-size:clamp(17px,2vw,22px);line-height:1.6}.archive-footer{display:grid;grid-template-columns:minmax(145px,22%) 1fr;gap:8px 16px;margin-top:25px;padding:16px;border:1px solid #6e86b5;background:rgba(255,255,255,.05);font:15px Arial,sans-serif}.archive-footer b{color:var(--gold)}.record-body ul{padding-left:24px}.record-body li{margin:9px 0}.record-meta{margin-top:18px;padding-top:12px;border-top:1px solid #52678f;color:#b7c2d5;font:14px Arial,sans-serif}.layer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:15px}.layer-grid button{min-height:76px;padding:10px;text-align:left;color:var(--paper);border:1px solid #7287ae;background:#0b285e;cursor:pointer}.layer-grid button:hover,.layer-grid button:focus{border-color:var(--gold);background:#153b7b}.layer-grid b,.layer-grid span{display:block}.layer-grid span{margin-top:4px;color:#c1cada;font:13px/1.3 Arial,sans-serif}.toast{position:absolute;z-index:20;left:50%;top:15%;transform:translateX(-50%);padding:10px 16px;border:1px solid var(--gold);background:#07142b;box-shadow:0 4px 18px #000;font:13px Arial,sans-serif}.loading{position:absolute;z-index:40;inset:0;display:grid;place-items:center;background:#050a14;font-size:22px;letter-spacing:.08em}#scene-fade{position:absolute;z-index:8;inset:0;pointer-events:none;background:#02050b;opacity:0;transition:opacity .18s}#scene-fade.active{opacity:1}#touch{display:none;position:absolute;z-index:5;inset:0;pointer-events:none}.dpad{position:absolute;left:2%;bottom:5%;display:grid;grid-template-columns:42px 42px 42px;grid-template-rows:42px 42px}.dpad button,#touch-action{pointer-events:auto;border:1px solid #70809a;color:white;background:rgba(8,20,40,.82);touch-action:none}.dpad button[data-dir=up]{grid-column:2}.dpad button[data-dir=left]{grid-column:1;grid-row:2}.dpad button[data-dir=down]{grid-column:2;grid-row:2}.dpad button[data-dir=right]{grid-column:3;grid-row:2}#touch-action{position:absolute;right:3%;bottom:6%;width:58px;height:58px;border-radius:50%;font-size:20px}@media(pointer:coarse),(max-width:800px){#touch{display:block}#prompt,#camera-hint{display:none}#quest-card{top:13%;max-width:45%;font-size:12px}.hud-block{min-height:42px;padding:4px 7px}.hud-block strong{font-size:13px}.hud-block small{font-size:8px}.brand{font-size:18px}.modal{left:2%;right:2%;bottom:2%;min-height:34%;padding:10px 13px 28px}.modal.reader{inset:3%;padding:18px}.layer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.layer-grid button{min-height:66px}.archive-footer{grid-template-columns:1fr}.archive-footer b{margin-top:8px}}@media(max-height:470px){#quest-card{display:none}.modal.reader{inset:2%}.layer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.layer-grid span{display:none}.layer-grid button{min-height:44px}.book>p,.record-body{font-size:15px;line-height:1.4}}

/* v1.0.2 mobile viewport pass: WORLD becomes a real portrait viewport instead of a 16:9 strip. */
@media (pointer:coarse), (max-width:800px){
  html,body{height:100%;min-height:100%;overscroll-behavior:none}
  #game-shell{display:block;width:100vw;height:100dvh;min-height:100svh;background:#030711}
  #viewport-wrap{width:100vw;height:100dvh;min-height:100svh;max-height:none;aspect-ratio:auto;border:0;box-shadow:none}
  #game{width:100%;height:100%}

  #hud{
    left:max(8px,env(safe-area-inset-left));
    right:max(8px,env(safe-area-inset-right));
    top:max(8px,env(safe-area-inset-top));
    display:grid;
    grid-template-columns:minmax(0,1fr) 64px 86px;
    gap:5px;
    align-items:stretch;
  }
  .hud-block{min-width:0;min-height:40px;padding:5px 7px;background:rgba(5,16,35,.86);backdrop-filter:blur(2px)}
  .hud-block small{font-size:7px;line-height:1.15;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hud-block strong{display:block;font-size:12px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand{grid-column:1/-1;min-height:36px;padding:4px 8px;font-size:17px;line-height:1}
  .brand small{margin-top:3px;font-size:7px}
  .hud-grow{margin-left:0;display:block;min-width:0}
  .hud-grow .hud-block{height:100%}

  #quest-card{
    left:auto;
    right:max(8px,env(safe-area-inset-right));
    top:calc(max(8px,env(safe-area-inset-top)) + 88px);
    width:min(54vw,235px);
    max-width:none;
    padding:6px 8px;
    gap:6px;
    font-size:11px;
    background:rgba(4,13,29,.78);
  }
  #quest-card small{font-size:7px}
  #quest-card strong{display:block;line-height:1.18}
  .sigil{font-size:17px}

  #touch{display:block}
  .dpad{
    left:max(12px,env(safe-area-inset-left));
    bottom:calc(max(12px,env(safe-area-inset-bottom)) + 4px);
    grid-template-columns:56px 56px 56px;
    grid-template-rows:56px 56px;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
  }
  .dpad button,#touch-action{
    background:rgba(8,20,40,.74);
    border:1px solid rgba(128,154,191,.9);
    box-shadow:inset 0 0 0 2px rgba(19,44,77,.72);
    -webkit-tap-highlight-color:transparent;
    user-select:none;
  }
  .dpad button{font-size:22px}
  #touch-action{
    right:max(16px,env(safe-area-inset-right));
    bottom:calc(max(18px,env(safe-area-inset-bottom)) + 8px);
    width:76px;
    height:76px;
    font-size:22px;
  }

  .modal{
    left:max(8px,env(safe-area-inset-left));
    right:max(8px,env(safe-area-inset-right));
    bottom:max(8px,env(safe-area-inset-bottom));
    min-height:0;
    max-height:62dvh;
    overflow:auto;
    padding:12px 14px 34px;
  }
  .modal.reader{
    inset:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    padding:18px 16px;
  }
  .modal h2{margin-right:42px;font-size:clamp(20px,7vw,30px)}
  .dialogue-copy,.volume-title{max-width:100%;font-size:16px;line-height:1.35}
  .book>p,.record-body{font-size:16px;line-height:1.48}
  .close{position:sticky;float:right;right:0;top:0;margin:-2px -2px 4px 8px}
  .layer-grid{grid-template-columns:1fr;gap:7px}
  .layer-grid button{min-height:54px}
  .archive-footer{grid-template-columns:1fr;font-size:13px}
  .toast{top:calc(max(8px,env(safe-area-inset-top)) + 95px);max-width:calc(100vw - 32px);text-align:center}
}

@media (pointer:coarse) and (orientation:landscape){
  #hud{grid-template-columns:minmax(180px,1.8fr) minmax(92px,.7fr) 64px 92px}
  .brand{grid-column:auto}
  #quest-card{top:64px;width:min(42vw,300px)}
  .dpad{grid-template-columns:48px 48px 48px;grid-template-rows:48px 48px}
  #touch-action{width:64px;height:64px}
  .modal{max-height:78dvh}
}


/* v1.0.3 mobile controls: analog movement stick + contextual action. */
.touch-stick{display:none}
@media (pointer:coarse){
  #touch{display:block}
  .dpad{display:none!important}
  .touch-stick{
    display:block;
    position:absolute;
    left:max(18px,env(safe-area-inset-left));
    bottom:calc(max(20px,env(safe-area-inset-bottom)) + 8px);
    width:148px;
    height:148px;
    pointer-events:auto;
    touch-action:none;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
    filter:drop-shadow(0 5px 10px rgba(0,0,0,.35));
  }
  .touch-stick-ring{
    position:absolute;
    inset:10px;
    border-radius:50%;
    border:1px solid rgba(128,154,191,.82);
    background:radial-gradient(circle at 45% 38%,rgba(28,55,86,.54),rgba(6,18,36,.66));
    box-shadow:inset 0 0 0 2px rgba(19,44,77,.62),inset 0 0 28px rgba(0,0,0,.24);
  }
  .touch-stick-ring::before,.touch-stick-ring::after{
    content:"";
    position:absolute;
    left:50%;top:50%;
    background:rgba(110,231,210,.13);
    transform:translate(-50%,-50%);
    pointer-events:none;
  }
  .touch-stick-ring::before{width:1px;height:68%}
  .touch-stick-ring::after{width:68%;height:1px}
  .touch-stick-knob{
    position:absolute;
    left:50%;top:50%;
    width:62px;height:62px;
    margin:-31px 0 0 -31px;
    border-radius:50%;
    border:1px solid rgba(151,180,218,.95);
    background:linear-gradient(145deg,rgba(28,60,98,.96),rgba(7,21,43,.92));
    box-shadow:inset 0 0 0 2px rgba(54,95,139,.62),0 5px 12px rgba(0,0,0,.4);
    will-change:transform;
    pointer-events:none;
  }
  #touch-action{
    right:max(18px,env(safe-area-inset-right));
    bottom:calc(max(28px,env(safe-area-inset-bottom)) + 14px);
    width:96px;
    height:68px;
    border-radius:34px;
    padding:0 10px;
    font:700 14px/1 Arial,sans-serif;
    letter-spacing:.08em;
    color:var(--paper);
    transition:opacity .14s,transform .08s,border-color .14s,background .14s;
  }
  #touch-action:not(.unavailable){
    border-color:rgba(229,179,79,.95);
    background:rgba(8,24,47,.88);
    box-shadow:inset 0 0 0 2px rgba(45,82,122,.74),0 5px 14px rgba(0,0,0,.35);
  }
  #touch-action:not(.unavailable):active{transform:scale(.95)}
  #touch-action.unavailable{opacity:.16;pointer-events:none}
}
@media (hover:hover) and (pointer:fine){
  #touch{display:none!important}
}
@media (pointer:coarse) and (orientation:landscape){
  .touch-stick{width:126px;height:126px;left:max(14px,env(safe-area-inset-left));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 4px)}
  .touch-stick-knob{width:54px;height:54px;margin:-27px 0 0 -27px}
  #touch-action{width:88px;height:58px;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 6px)}
}


/* v1.0.4 immutable WORLD staging preview. */
.status[data-mode=staging]{color:#ffe18b}
.staging-banner{position:absolute;z-index:30;left:50%;top:72px;transform:translateX(-50%);max-width:min(94%,960px);padding:7px 12px;border:1px solid #e5b34f;background:rgba(52,35,4,.95);box-shadow:0 4px 16px rgba(0,0,0,.45);font:700 11px/1.25 Arial,sans-serif;letter-spacing:.08em;text-align:center;color:#fff1bf;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.staging-banner.stale{border-color:#f18d74;background:rgba(70,18,12,.96);color:#ffd0c6}
body.staging-mode #viewport-wrap{outline:2px solid rgba(229,179,79,.7);outline-offset:-3px}
@media (pointer:coarse),(max-width:800px){.staging-banner{top:calc(max(8px,env(safe-area-inset-top)) + 88px);max-width:calc(100vw - 20px);font-size:9px;padding:6px 8px}}
@media (pointer:coarse) and (orientation:landscape){.staging-banner{top:58px;max-width:72vw}}


/* v1.0.6 portrait HUD timestamp hotfix: keep the canonical snapshot date + time visible. */
.as-of-value{
  display:block;
  margin-top:1px;
  color:#d8c9aa;
  font:10px/1.15 Arial,sans-serif;
  white-space:nowrap;
}
.data-hud .status{display:block;margin-top:2px}
@media (pointer:coarse), (max-width:800px){
  #hud{grid-template-columns:minmax(0,1fr) 58px 118px}
  .data-hud{min-width:0}
  .data-hud small{overflow:visible;text-overflow:clip}
  .as-of-value{
    font-size:8px;
    line-height:1.1;
    letter-spacing:0;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  .data-hud .status{margin-top:2px;font-size:13px}
  #quest-card{top:calc(max(8px,env(safe-area-inset-top)) + 100px)}
  .staging-banner{top:calc(max(8px,env(safe-area-inset-top)) + 100px)}
}
@media (pointer:coarse) and (orientation:landscape){
  #hud{grid-template-columns:minmax(180px,1.8fr) minmax(92px,.7fr) 64px 104px}
  .as-of-value{font-size:7px;white-space:normal}
  #quest-card{top:64px}
  .staging-banner{top:58px}
}
@media (pointer:coarse) and (orientation:portrait) and (max-width:360px){
  #hud{grid-template-columns:minmax(0,1fr) 52px 110px}
  .as-of-value{font-size:7px}
}

/* v1.0.7 Time Gate + canonical historical projection. */
.status[data-mode=historical]{color:#8fe7db}
.temporal-banner{position:absolute;z-index:29;left:50%;top:72px;transform:translateX(-50%);max-width:min(94%,760px);padding:7px 14px;border:1px solid #65dfd0;background:rgba(8,29,43,.95);box-shadow:0 4px 16px rgba(0,0,0,.45),inset 0 0 18px rgba(36,155,151,.12);font:700 11px/1.25 Arial,sans-serif;letter-spacing:.12em;text-align:center;color:#cafff7;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.historical-mode #viewport-wrap{outline:2px solid rgba(101,223,208,.45);outline-offset:-3px}
.time-gate-book>p{max-width:760px}
.time-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.time-destination{display:flex;flex-direction:column;gap:5px;min-height:72px;padding:13px 15px;text-align:left;border:1px solid rgba(111,149,196,.7);background:linear-gradient(145deg,rgba(13,37,70,.96),rgba(7,19,40,.96));color:#f4e8cc;cursor:pointer}
.time-destination b{font:700 18px/1 Georgia,serif;color:#e5b34f;letter-spacing:.04em}
.time-destination span{font:700 9px/1.3 Arial,sans-serif;letter-spacing:.08em;color:#8fe7db}
.time-destination.active{border-color:#65dfd0;box-shadow:inset 0 0 0 2px rgba(101,223,208,.18);cursor:default}
.time-destination.active::after{content:"CURRENT DESTINATION";margin-top:auto;font:700 8px/1 Arial,sans-serif;letter-spacing:.11em;color:#d8c9aa}
@media (pointer:coarse),(max-width:800px){
  .temporal-banner{top:calc(max(8px,env(safe-area-inset-top)) + 100px);max-width:calc(100vw - 20px);font-size:9px;padding:6px 8px}
  body.historical-mode #quest-card{top:calc(max(8px,env(safe-area-inset-top)) + 128px)}
  .time-grid{grid-template-columns:1fr;gap:8px}
  .time-destination{min-height:60px;padding:10px 12px}
}
@media (pointer:coarse) and (orientation:landscape){
  .temporal-banner{top:58px;max-width:72vw}
  body.historical-mode #quest-card{top:84px}
  .time-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* v1.0.8 Time Gate audit fixes. */
.time-gate-loading{margin-top:18px;padding:14px 16px;border:1px solid rgba(101,223,208,.55);background:rgba(4,19,38,.72);color:#8fe7db;font:700 10px/1.35 Arial,sans-serif;letter-spacing:.13em;text-align:center}

/* Narrative r1b: historical status is already shown in the HUD; suppress duplicate center banner. */
.temporal-banner{display:none!important}
@media (pointer:coarse), (max-width:800px){body.historical-mode #quest-card{top:calc(max(8px,env(safe-area-inset-top)) + 100px)}}
@media (pointer:coarse) and (orientation:landscape){body.historical-mode #quest-card{top:64px}}