@font-face{
  font-family:'00Wagram-Mono';
  src:url('00WagramMonoDisplayNon-Commercial-Thin.otf') format('opentype');
  font-weight:300;
  font-style:normal;
}
@font-face{
  font-family:'00Wagram-Mono';
  src:url('00WagramMonoDisplayNon-Commercial-ThinItalic.otf') format('opentype');
  font-weight:300;
  font-style:italic;
}

@font-face{
  font-family:'00Wagram';
  src:url('00WagramDisplayNon-Commercial-Thin.otf') format('opentype');
  font-weight:300;
  font-style:normal;
}

@font-face{
  font-family:'00Wagram';
  src:url('00WagramDisplayNon-Commercial-ThinItalic.otf') format('opentype');
  font-weight:300;
  font-style:italic;
}

:root{
  --bg:#0d0f0c;
  --panel:rgba(12, 14, 11, 0.82);
  --line:rgba(217, 247, 193, 0.24);
  --text:#f5f6f4d4;
  --muted:#c6cdbf;
  --accent:#dce4cb;
  --glow:rgba(233,245,204,.1);
  --river:#bad4cc;
  --river-hi:#cde79a;
  --shadow:0 14px 90px rgba(17, 18, 17, 0.45);
}

*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
  font-family: '00Wagram', "Times New Roman", serif;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,0)),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.05), transparent 30%),
    radial-gradient(circle at 80% 15%, rgba(255,255,255,.03), transparent 20%);
  mix-blend-mode:screen;
}

#app, #scene{
  width:100%;
  height:100%;
  display:block;
}

#scene{cursor:none}

.panel{
  position:fixed;
  z-index:10;
  background:var(--panel);
  border:.2px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter: blur(12px);
}

.panel--hud{
  top:1.2rem;
  left:1.2rem;
  width:min(29rem, calc(100vw - 2.4rem));
  padding:1rem 1rem 1.02rem;
}

.panel--hud h1, .panel--map h2, .panel--story h2{
  margin:.12rem 0 .3rem;
  font-weight:400;
  line-height:.94;
  letter-spacing:-.03em;
}

.panel--hud h1{font-size:clamp(2rem, 4vw, 3.5rem)}
.panel--map h2,.panel--story h2{font-size:clamp(1.4rem, 3vw, 2.2rem)}

.eyebrow{
  font-family: '00Wagram-Mono', Helvetica;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
}

.lede, .panel--story p, .map-copy p{
  margin:0;
  max-width:52ch;
  font-size:.87rem;
  line-height:1.3;
  color:var(--accent);
}

.controls{
  margin-top:.95rem;
  padding-top:.9rem;
  border-top:.8px solid var(--line);
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.3rem .8rem;
  font-family: 00Wagram, Helvetica, sans-serif;
  font-size:.77rem;
  color:var(--muted);
}

.panel--map{
  inset:1.2rem;
  padding:1rem;
}

.map-header,
.story-topline{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
}

.map-grid{
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:1rem;
  margin-top:1rem;
  height:calc(100% - 5.5rem);
}

.map-box{
  border:1px solid var(--line);
  min-height:0;
  background:rgba(255,255,255,.02);
}

.map-canvas{
  width:100%;
  height:100%;
  padding:1rem;
}

.map-canvas svg{width:100%;height:100%}
.map-canvas text{
  fill:var(--text);
  font-size:11px;
  font-family: '00Wagram', Helvetica, sans-serif;
  letter-spacing:.03em;
}
.map-canvas circle{fill:var(--river-hi)}

.map-copy{
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  justify-content:flex-end;
}

.panel--story{
  right:1.2rem;
  bottom:1.2rem;
  width:min(34rem, calc(100vw - 2.4rem));
  max-height:min(75vh, 42rem);
  overflow:auto;
  padding:1rem;
}

.choice-list{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1rem;
}

.choice-btn,
.ghost-btn{
  appearance:none;
  border:.5px solid var(--line);
  background:transparent;
  color:var(--text);
  padding:.58rem .8rem;
  cursor:pointer;
  font:inherit;
  transition:.18s ease;
}
.choice-btn:hover,
.ghost-btn:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.35);
}

.micro-popup{
  position:fixed;
  left:50%;
  bottom:1.3rem;
  transform:translateX(-50%);
  z-index:11;
  padding:.8rem 1rem;
  background:rgba(12,14,12,.86);
  border:1px solid var(--line);
  font-size:.92rem;
  max-width:min(42rem, calc(100vw - 2rem));
  line-height:1.45;
  box-shadow:var(--shadow);
}

#reticle{
  position:fixed;
  top:50%;
  left:50%;
  width:14px;
  height:14px;
  transform:translate(-50%, -50%);
  border:.5px solid rgba(255,255,255,.55);
  border-radius:50%;
  z-index:9;
  pointer-events:none;
}
#reticle::before, #reticle::after{
  content:"";
  position:absolute;
  background:rgba(255,255,255,.55);
}
#reticle::before{left:50%;top:2px;bottom:2px;width:1px;transform:translateX(-50%)}
#reticle::after{top:50%;left:2px;right:2px;height:1px;transform:translateY(-50%)}

.enter-prompt{
  position:fixed;
  top:calc(50% + 1.55rem);
  left:50%;
  transform:translateX(-50%);
  z-index:9;
  font-family:Arial, Helvetica, sans-serif;
  font-size:.76rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  background:rgba(12,14,12,.78);
  border:.5px solid var(--line);
  padding:.4rem .55rem;
}



.hidden{display:none!important}

@media (max-width: 900px){
  .panel--hud{width:calc(100vw - 2rem)}
  .panel--story{left:1rem;right:1rem;width:auto}
  .panel--map{inset:1rem}
  .map-grid{grid-template-columns:1fr;height:auto}
}

.readmore-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.92);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}

.readmore-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}

.readmore-inner{
  position:relative;
  width:min(1100px, 92vw);
  height:min(90vh, 900px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
}

.readmore-image{
  max-width:min(900px, 82vw);
  max-height:48vh;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  opacity:.92;
}

.readmore-text{
  max-width:720px;
  font-family:"00Wagram", ui-monospace, monospace;
  font-size:15px;
  line-height:1.6;
  letter-spacing:.2px;
  color:rgba(255,255,255,0.92);
  text-align:left;
  filter:blur(0.2px);
}

.readmore-text.flash{
  animation:flashFade 10.2s ease-in-out forwards;
}

@keyframes flashFade{
  0%   { opacity:0; transform:translateY(0px); }
  12%  { opacity:1; transform:translateY(0); }
  65%  { opacity:1; }
  100% { opacity:0; transform:translateY(0px); }
}

.readmore-exit{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  border:.5px solid rgba(255,255,255,0.45);
  background:rgba(255,255,255,0.08);
  color:#fff;
  padding:10px 22px;
  font:inherit;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}

.readmore-exit:hover{
  background:rgba(255,255,255,0.16);
}

.readmore-content{
  width: min(1100px, 92vw);
  max-height: 78vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 42px;
  padding: 10px 0 80px;
}

.readmore-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  opacity:0;
  transition:opacity 3.2s ease, transform 1.2s ease;
}

.readmore-block.visible{
  opacity:1;
  transform:translateY(0);
}


@keyframes flashFade{
  0%   { opacity:0; transform:translateY(6px); }
  12%  { opacity:1; transform:translateY(0); }
  65%  { opacity:1; }
  100% { opacity:0; transform:translateY(-4px); }
}

.arena-link{
  display:inline-flex;
  align-items:center;
  justify-content:left;
  margin-top:.8rem;
  padding-top:.8rem;
  border-top:.8px solid var(--line);
}

.arena-svg{
  display: block;
  width:60px;
  height:auto;
  color:#fff;
  opacity:.9;
  transition:.18s ease;
}

.arena-link:hover .arena-svg{
  opacity:1;
  transform:translateY(-1px);
}