:root{
  --bg:#09090d;
  --panel:#12121a;
  --panel2:#191927;
  --line:#28283a;
  --text:#e6e0d2;
  --muted:#8d8790;
  --dim:#55515c;
  --gold:#d1ad5a;
  --blue:#7bb3d8;
  --green:#68c986;
  --red:#e57761;
  --purple:#b180e8;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  height:100%;
  min-height:100%;
  background:#050507;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overscroll-behavior:none;
  overflow-x:hidden;
  touch-action:manipulation;
  -webkit-text-size-adjust:100%;
}
body{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow-x:hidden;
  overflow-y:auto;
}

button,
[role="button"],
.dir,
.chip,
.nav-tab,
.tab,
.item-popup,
.death-overlay,
.menu-overlay{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* Desktop wrapper */
.wrap{
  display:flex;
  gap:24px;
  align-items:flex-start;
  flex-wrap:wrap;
  justify-content:center;
  max-width:100%;
}

/* Notes panel */
.notes{
  width:310px;
  color:#c9c0b4;
  line-height:1.5;
}
.notes h1{font-size:24px;margin:0 0 10px;color:#fff}
.notes p{font-size:14px;color:#aaa;margin:0 0 12px}
.notes .pill{
  display:inline-block;
  border:1px solid #38384e;
  background:#101018;
  color:#aaa;
  padding:5px 9px;
  border-radius:999px;
  font-size:12px;
  margin:3px 4px 3px 0;
}

/* Phone shell */
.phone{
  width:390px;
  max-width:100vw;
  height:800px;
  background:#1a1a22;
  border:1px solid #383844;
  border-radius:38px;
  padding:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  flex-shrink:0;
}

/* Screen: flex column */
.screen{
  height:100%;
  min-height:0;
  background:#0b0b10;
  border-radius:28px;
  overflow:hidden;
  overflow-x:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  padding-top:env(safe-area-inset-top);
  isolation:isolate;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* ═══ COMBAT BANNER ═══════════════════════ */
.combat-banner{
  position:absolute;
  top:env(safe-area-inset-top);left:0;right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 14px;
  background:rgba(180,60,40,.95);
  border-bottom:1px solid #a03020;
  opacity:0;
  pointer-events:none;
  transform:translateY(-100%);
  transition:opacity .2s ease, transform .2s ease;
}
.combat-banner.visible{opacity:1;transform:translateY(0)}
.combat-icon{font-size:15px}
.combat-text{font-size:11px;font-weight:800;color:#fff;letter-spacing:.06em;text-transform:uppercase}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* ═══ ROOM HEADER BAR ═════════════════════ */
.room-intro{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:5;
  min-height:0;
  background:transparent;
  border-bottom:1px solid rgba(32,32,45,.48);
  backdrop-filter:blur(5px);
}
.room-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 14px 3px;
  background:rgba(0,0,0,.4);
  border-bottom:0;
  flex-shrink:0;
  z-index:10;
}
.room-header-left{flex:1;min-width:0}
.room-title{
  font-size:15px;
  font-weight:800;
  color:var(--text);
  letter-spacing:.02em;
  line-height:1.2;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.room-subtitle{
  font-size:10px;
  color:var(--dim);
  margin-top:2px;
  letter-spacing:.04em;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.room-header-right{flex-shrink:0;margin-left:10px}
.weather-badge{
  font-size:10px;
  color:var(--blue);
  background:rgba(20,26,42,.8);
  border:1px solid #1e2e4a;
  padding:3px 8px;
  border-radius:6px;
  letter-spacing:.04em;
}
.room-desc{
  position:absolute;
  left:12px;
  right:12px;
  top:54px;
  z-index:3;
  padding:8px 10px;
  font-size:11px;
  line-height:1.4;
  color:#d1cbc0;
  font-style:italic;
  background:linear-gradient(90deg,rgba(8,8,12,.68),rgba(8,8,12,.5),rgba(8,8,12,.18));
  border-left:2px solid rgba(209,173,90,.55);
  border-radius:4px;
  text-shadow:0 1px 2px #000;
}


/* ═══ VIEWS ═══════════════════════════════ */
.view{
  display:none;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow:hidden;
}
.view.visible{display:flex}

#adventure-view{
  display:none;
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(148px,1fr) 120px auto 64px 156px;
}
#adventure-view.visible{
  display:grid;
}

/* ═══ HERO IMAGE ══════════════════════════ */
.hero{
  position:relative;
  height:auto;
  min-height:0;
  min-width:0;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  transition:background-position .4s ease, filter .4s ease;
  display:flex;
  align-items:flex-end;
  padding:10px 14px;
  border-bottom:1px solid #1f1f2b;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(11,11,16,.95) 0%, rgba(11,11,16,.4) 50%, transparent 100%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 20%,rgba(255,255,255,.05),transparent 45%),
    linear-gradient(90deg,rgba(0,0,0,.16),transparent 28%,transparent 72%,rgba(0,0,0,.16));
  pointer-events:none;
}
.hero.hp-low::after{
  background:
    radial-gradient(circle at 50% 20%,rgba(255,255,255,.05),transparent 45%),
    linear-gradient(90deg,rgba(0,0,0,.16),transparent 28%,transparent 72%,rgba(0,0,0,.16)),
    linear-gradient(180deg,rgba(120,12,8,.12),rgba(120,12,8,.18));
}
.hero.hp-critical::after{
  background:
    radial-gradient(circle at 50% 20%,rgba(255,255,255,.04),transparent 45%),
    linear-gradient(90deg,rgba(0,0,0,.18),transparent 28%,transparent 72%,rgba(0,0,0,.18)),
    linear-gradient(180deg,rgba(150,18,10,.22),rgba(150,18,10,.32));
}
.hero.hp-dire::after{
  animation:heroDangerPulse 1.15s ease-in-out infinite;
}
@keyframes heroDangerPulse{
  0%,100%{opacity:.7}
  50%{opacity:1}
}

/* YOU DIED overlay */
.death-overlay{
  position:absolute;
  inset:0;
  z-index:100;
  background:rgba(0,0,0,.85);
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  width:100%;
  min-width:0;
  padding:16px;
  text-align:center;
  pointer-events:none;
}
.death-overlay.visible{
  display:flex;
}
.death-overlay.ready{
  pointer-events:auto;
  cursor:pointer;
}
.death-text{
  --death-tracking:clamp(.06em,1vw,.12em);
  max-width:100%;
  font-size:clamp(30px,13vw,54px);
  line-height:1;
  font-weight:900;
  color:#e57761;
  letter-spacing:var(--death-tracking);
  text-indent:var(--death-tracking);
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 0 30px rgba(229,119,97,.6), 0 4px 8px rgba(0,0,0,.8);
  animation:deathPulse 1.5s ease-in-out infinite;
  overflow-wrap:normal;
  white-space:nowrap;
}
@keyframes deathPulse{
  0%,100%{transform:scale(1); opacity:1}
  50%{transform:scale(1.05); opacity:0.9}
}
.death-subtext{
  max-width:min(100%,300px);
  font-size:12px;
  line-height:1.35;
  color:#8d8790;
  margin-top:12px;
  letter-spacing:0.08em;
  text-align:center;
}
.death-continue{
  display:none;
  max-width:min(100%,300px);
  font-size:13px;
  line-height:1.35;
  color:#f2d7b7;
  margin-top:20px;
  letter-spacing:0.08em;
  text-align:center;
}
.death-overlay.ready .death-continue{
  display:block;
}

/* HP bar color thresholds */
.hp-bar.green{background:var(--green)}
.hp-bar.orange{background:#f59e42}
.hp-bar.red{background:var(--red)}
.hp-bar.pulse{animation:hpPulse 0.9s ease-in-out infinite}
@keyframes hpPulse{
  0%,100%{opacity:1}
  50%{opacity:0.5}
}
.hero-scene-art{
  display:none;
  position:absolute;
  left:50%;
  bottom:20%;
  z-index:1;
  transform:translateX(-50%) perspective(140px) rotateX(8deg);
  color:rgba(214,205,174,.34);
  font-family:Georgia,serif;
  font-size:clamp(76px,28vw,118px);
  line-height:1;
  text-shadow:0 10px 28px rgba(0,0,0,.9),0 0 18px rgba(209,173,90,.12);
  user-select:none;
}
.hero-scene-art::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-12px;
  width:150%;
  height:18px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(0,0,0,.38);
  filter:blur(7px);
}
.monster-silhouette{
  position:absolute;
  right:12%;
  bottom:14%;
  z-index:2;
  display:none;
  color:rgba(4,4,7,.9);
  font-size:clamp(86px,31vw,132px);
  line-height:1;
  filter:drop-shadow(0 0 10px rgba(229,119,97,.22));
  transform-origin:50% 100%;
  animation:monsterBreathe 2s ease-in-out infinite;
  user-select:none;
}
.monster-silhouette.visible{display:none}
@keyframes monsterBreathe{
  0%,100%{transform:scale(1) translateY(0)}
  50%{transform:scale(1.025) translateY(-2px)}
}

/* Reusable room backgrounds */
.hero.bg-1{
  background-image:
    url("assets/backgrounds/bg-1-training-dawn.webp"),
    radial-gradient(ellipse at 48% 34%,rgba(198,177,104,.12),transparent 24%),
    radial-gradient(ellipse at 50% 90%,rgba(0,0,0,.44),transparent 44%),
    linear-gradient(to bottom,#20202a 0%,#15151e 38%,#0d0d14 100%);
}
.hero.bg-2{
  background-image:
    url("assets/backgrounds/bg-2-training-combat.webp"),
    radial-gradient(ellipse at 52% 38%,rgba(130,22,18,.24),transparent 28%),
    radial-gradient(ellipse at 50% 90%,rgba(0,0,0,.55),transparent 42%),
    linear-gradient(to bottom,#261a1a 0%,#171018 45%,#09090d 100%);
}
.hero.bg-3{
  background-image:
    url("assets/backgrounds/bg-3-training-rest-fire.webp"),
    radial-gradient(ellipse at 50% 58%,rgba(255,143,76,.22),transparent 34%),
    radial-gradient(ellipse at 50% 92%,rgba(0,0,0,.42),transparent 44%),
    linear-gradient(to bottom,#211b17 0%,#151216 45%,#09090d 100%);
}
.hero.bg-4{
  background-image:
    url("assets/backgrounds/bg-4-town-gate.webp"),
    radial-gradient(ellipse at 50% 34%,rgba(209,173,90,.16),transparent 24%),
    radial-gradient(ellipse at 50% 90%,rgba(0,0,0,.45),transparent 42%),
    linear-gradient(to bottom,#2a2518 0%,#1e1a10 35%,#151210 70%,#0f0f14 100%);
}
.hero.bg-5{
  background-image:
    url("assets/backgrounds/bg-5-blood-moor-road.webp"),
    radial-gradient(ellipse at 46% 36%,rgba(186,174,122,.14),transparent 25%),
    radial-gradient(ellipse at 50% 90%,rgba(0,0,0,.52),transparent 42%),
    linear-gradient(to bottom,#253120 0%,#172018 38%,#151612 74%,#0f0f14 100%);
}
.hero.bg-6{
  background-image:
    url("assets/backgrounds/bg-6-blood-moor-wild.webp"),
    radial-gradient(ellipse at 42% 62%,rgba(255,128,68,.16),transparent 28%),
    radial-gradient(ellipse at 68% 38%,rgba(86,125,70,.15),transparent 30%),
    linear-gradient(to bottom,#20281c 0%,#141b15 42%,#10110d 100%);
}
.hero.bg-7{
  background-image:
    url("assets/backgrounds/bg-7-marsh-gate-crossing.webp"),
    radial-gradient(ellipse at 50% 34%,rgba(180,187,147,.14),transparent 22%),
    radial-gradient(ellipse at 50% 88%,rgba(0,0,0,.56),transparent 42%),
    linear-gradient(to bottom,#202414 0%,#161d17 35%,#121715 70%,#0a0f14 100%);
}
.hero.bg-8{
  background-image:
    url("assets/backgrounds/bg-8-sunken-ruins-deep.webp"),
    radial-gradient(ellipse at 52% 36%,rgba(104,143,132,.18),transparent 24%),
    radial-gradient(ellipse at 72% 62%,rgba(70,110,96,.16),transparent 32%),
    radial-gradient(ellipse at 50% 90%,rgba(0,0,0,.58),transparent 42%),
    linear-gradient(to bottom,#15252a 0%,#0f1a20 36%,#11171a 70%,#070b0f 100%);
}
.hero.bg-pos-0{background-position:center 100%}
.hero.bg-pos-25{background-position:center 75%}
.hero.bg-pos-50{background-position:center 50%}
.hero.bg-pos-75{background-position:center 25%}
.hero.bg-pos-100{background-position:center 0%}

/* Zone gradient placeholders (fallback when room.image is missing) */
.hero.zone-blood_moor{
  background:
    radial-gradient(ellipse at 50% 36%,rgba(186,174,122,.12),transparent 24%),
    radial-gradient(ellipse at 50% 90%,rgba(0,0,0,.5),transparent 42%),
    linear-gradient(to bottom, #253120 0%, #162018 35%, #1a1512 70%, #0f0f14 100%);
}
.hero.zone-sunken_ruins{
  background:
    radial-gradient(ellipse at 50% 34%,rgba(214,206,156,.13),transparent 22%),
    radial-gradient(ellipse at 72% 58%,rgba(118,151,96,.14),transparent 30%),
    radial-gradient(ellipse at 50% 90%,rgba(0,0,0,.5),transparent 42%),
    linear-gradient(to bottom, #202414 0%, #161d17 35%, #121715 70%, #0a0f14 100%);
}
.hero.zone-town{
  background:
    radial-gradient(ellipse at 50% 36%,rgba(209,173,90,.16),transparent 24%),
    radial-gradient(ellipse at 50% 90%,rgba(0,0,0,.45),transparent 42%),
    linear-gradient(to bottom, #2a2518 0%, #1e1a10 35%, #151210 70%, #0f0f14 100%);
}
/* Tutorial corridor — calm, safe gradient */
.hero.zone-tutorial{
  background:
    radial-gradient(ellipse at 50% 36%,rgba(209,173,90,.08),transparent 24%),
    radial-gradient(ellipse at 50% 90%,rgba(0,0,0,.3),transparent 42%),
    linear-gradient(to bottom, #1a1a22 0%, #12121a 35%, #0d0d14 70%, #09090d 100%);
}

/* Room-type visual identity overlays */
.hero.room-campfire::before{
  background:
    linear-gradient(to top, rgba(11,11,16,.95) 0%, rgba(11,11,16,.2) 50%, transparent 100%),
    radial-gradient(ellipse at 50% 60%, rgba(255,140,80,.15), transparent 50%);
}
.hero.room-ruins::before{
  background:
    linear-gradient(to top, rgba(11,11,16,.95) 0%, rgba(11,11,16,.4) 50%, transparent 100%),
    linear-gradient(90deg, rgba(0,0,0,.2) 0%, transparent 20%, transparent 80%, rgba(0,0,0,.2));
}
.hero.room-road::before{
  background:
    linear-gradient(to top, rgba(11,11,16,.95) 0%, rgba(11,11,16,.3) 50%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(139,119,101,.08) 100%);
}
.hero.room-swamp::before{
  background:
    linear-gradient(to top, rgba(11,11,16,.95) 0%, rgba(11,11,16,.4) 50%, transparent 100%),
    radial-gradient(ellipse at 50% 80%, rgba(86,125,70,.12), transparent 50%);
}
.hero.combat-darken::before{
  background:
    linear-gradient(to top, rgba(11,11,16,.98) 0%, rgba(11,11,16,.6) 50%, transparent 100%),
    radial-gradient(ellipse at 50% 50%, rgba(180,40,40,.15), transparent 60%);
}

/* ═══ CONTEXT LINE ════════════════════════ */
.context-line{
  position:absolute;
  top:auto;
  bottom:8px;
  left:12px;
  right:12px;
  z-index:4;
  padding:6px 9px;
  font-size:11px;
  color:#df9c8f;
  font-style:italic;
  border:1px solid rgba(209,173,90,.28);
  border-left:2px solid rgba(229,119,97,.45);
  border-radius:4px;
  background:linear-gradient(90deg,rgba(8,8,12,.58),rgba(8,8,12,.42),rgba(8,8,12,.14));
  backdrop-filter:blur(4px);
  text-shadow:0 1px 2px #000;
  pointer-events:none;
}
.context-line:empty{display:none}
.context-line.low-health-warning{
  color:#ffd0c7;
  border-color:rgba(229,119,97,.72);
  background:linear-gradient(180deg,rgba(72,12,10,.94),rgba(34,8,8,.92));
  box-shadow:0 0 18px rgba(229,119,97,.24);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* ═══ TAB BAR ════════════════════════════ */
.tab{
  flex:1;
  padding:6px 0;
  border:1px solid #2a2a3a;
  background:#161622;
  color:var(--dim);
  font-size:11px;
  font-weight:700;
  border-radius:8px;
  cursor:pointer;
  letter-spacing:.02em;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.tab.active{
  background:#1e1e2e;
  color:var(--text);
  border-color:#3a3a4a;
}
.tab:active{background:#222230}

/* ═══ CONTENT AREA ════════════════════════ */


/* ═══ LOG ═════════════════════════════════ */
.log{
  height:120px;
  min-height:0;
  align-self:stretch;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  font-size:12px;
  line-height:16px;
  color:#b5b0a8;
  padding:5px 14px 6px;
  background:linear-gradient(180deg,rgba(13,13,20,.68),rgba(10,10,16,.62));
  border-bottom:1px solid rgba(29,29,41,.72);
  overflow-x:hidden;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
  backdrop-filter:blur(5px);
}
.log-inner{
  min-height:min-content;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  flex:1 0 auto;
}
.log::-webkit-scrollbar{width:4px}
.log::-webkit-scrollbar-thumb{background:#2a2a3a;border-radius:2px}
.logline{
  flex:0 0 auto;
  max-width:100%;
  padding:0;
  color:#b5b0a8;
  font-size:12px;
  line-height:16px;
  min-height:16px;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}
.logline.combat{color:var(--red)}
.logline.loot{color:var(--gold)}
.logline.info{color:var(--blue)}
.logline.heal{color:var(--green)}
.logline.miss{color:#4fd1c5}
.logline::before{content:"> ";color:#555;font-weight:700}
.logline.combat::before{color:var(--red)}
.logline.loot::before{color:var(--gold)}
.logline.info::before{color:var(--blue)}
.logline.heal::before{color:var(--green)}
.logline.miss::before{color:#4fd1c5}

.logcard{
  flex:0 0 auto;
  background:#141420;
  border:1px solid #222230;
  border-radius:8px;
  padding:8px 10px;
  margin-top:4px;
  font-size:11px;
  line-height:1.45;
  color:#c9c0b4;
  max-width:100%;
  overflow-wrap:break-word;
}
.logcard b{color:#d9d2c4}

.here{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:nowrap;
  min-height:30px;
  height:30px;
  max-height:30px;
  padding:4px 10px;
  flex:0 0 auto;
  border-bottom:1px solid rgba(29,29,41,.72);
  background:linear-gradient(180deg,rgba(12,12,18,.64),rgba(9,9,14,.58));
  backdrop-filter:blur(5px);
  overflow:hidden;
}
.here:empty{
  visibility:hidden;
  pointer-events:none;
  background:transparent;
  border-color:transparent;
  backdrop-filter:none;
}
.here .chip{
  flex:0 1 auto;
  min-width:0;
  max-width:48%;
  padding:3px 8px;
  border:1px solid rgba(120,120,140,.35);
  border-radius:999px;
  background:rgba(10,10,16,.76);
  color:#c9c0b4;
  font-size:10px;
  line-height:1.25;
  overflow:hidden;
  overflow-wrap:normal;
  white-space:nowrap;
  text-overflow:ellipsis;
  backdrop-filter:blur(5px);
  pointer-events:auto;
  touch-action:manipulation;
  transition:all .15s ease;
}
.here .chip.enemy{
  border-color:rgba(229,119,97,.55);
  color:#f0a092;
  background:rgba(38,12,12,.86);
  flex-shrink:1;
}
.here .chip.item{border-color:rgba(209,173,90,.4);color:#d8bd7d}
.here .chip.status{
  border-color:rgba(120,120,140,.28);
  color:#85808a;
  background:rgba(12,12,18,.56);
  pointer-events:none;
}
.here .chip.interactive{flex-shrink:0;max-width:58%}
.here .chip.here-right-start{margin-left:auto}
.here .chip.here-right{
  flex-shrink:1;
  max-width:34%;
}
.here .chip.corpse{
  max-width:34%;
  color:#b9aa83;
  opacity:.72;
  font-style:italic;
}
/* Sprint O2: Interactive elements — glow + tap feedback */
.here .chip.interactive{
  cursor:pointer;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.here .chip.interactive:hover,
.here .chip.interactive:active{
  box-shadow:0 0 8px rgba(255,255,255,.15);
  transform:scale(1.02);
}
.here .chip.enemy.interactive:hover{
  box-shadow:0 0 10px rgba(229,119,97,.4);
}
.here .chip.item.interactive:hover{
  box-shadow:0 0 10px rgba(209,173,90,.3);
}

/* ═══ PEEK OVERLAY ════════════════════════ */
.peek{
  position:fixed;
  left:14px;right:14px;
  bottom:calc(214px + env(safe-area-inset-bottom));
  z-index:45;
  max-width:362px;
  margin:0 auto;
  background:rgba(15,15,26,.97);
  border:1px solid #3a3a50;
  border-radius:12px;
  padding:12px 14px;
  box-shadow:0 14px 34px rgba(0,0,0,.55);
  display:none;
}
.peek.visible{display:block}
.peek-label{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.peek-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
.peek-desc{font-size:12px;color:#b5b0a8;margin-bottom:8px;line-height:1.4}
.peek-tags{display:flex;flex-wrap:wrap;gap:6px}
.peek-tag{font-size:10px;padding:3px 8px;border-radius:6px;border:1px solid #333340;background:#161622;color:var(--dim)}
.peek-tag.safe{border-color:#2a3a2a;background:#111a1a;color:#7abf8f}
.peek-tag.low{border-color:#2a3a3a;background:#111a1a;color:#7ac8bf}
.peek-tag.med{border-color:#3a3a2a;background:#1a1a12;color:#c9b87a}
.peek-tag.high{border-color:#3a2222;background:#1a1010;color:#e5857a}
.peek-tag.clear{border-color:#2a2a3a;background:#12121a;color:#8d8da0}
.peek-tag.enemy{border-color:#3a2222;background:#1a1010;color:#d67a6e}

/* ═══ CHARACTER PANEL ═════════════════════ */
.char-panel{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 14px 7px;
  background:linear-gradient(180deg,rgba(17,17,25,.7),rgba(13,13,20,.64));
  border-top:1px solid rgba(26,26,37,.72);
  border-bottom:1px solid rgba(26,26,37,.72);
  backdrop-filter:blur(5px);
  flex-shrink:0;
  min-height:0;
}
.char-info{flex:1;min-width:0}
.xp-strip{
  position:relative;
  width:100%;
  height:7px;
  margin-bottom:5px;
  overflow:hidden;
  border:1px solid #252536;
  border-radius:999px;
  background:#090910;
}
.xp-strip-fill{
  height:100%;
  max-width:100%;
  background:linear-gradient(90deg,#315b8d,#69a8db);
  transition:width .3s ease;
}
.xp-strip-label{
  position:absolute;
  inset:-1px 6px auto auto;
  color:#b9cfe3;
  font-size:7px;
  line-height:7px;
  text-shadow:0 1px 1px #000;
}
.char-name{
  font-size:13px;
  font-weight:700;
  color:var(--text);
  display:inline;
}
.char-class{
  font-size:10px;
  color:var(--dim);
  display:inline;
  margin-left:6px;
}
.char-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:3px;
}
.stat-row{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
}
.stat-label{
  color:var(--dim);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  width:22px;
}
.stat-value{
  color:var(--text);
  font-weight:700;
  min-width:36px;
}
.stat-bar{
  flex:1;
  height:4px;
  background:#222230;
  border-radius:2px;
  overflow:hidden;
}
.stat-fill{
  height:100%;
  background:var(--green);
  border-radius:2px;
  transition:width .3s ease;
}
.stat-fill.xp{background:var(--blue)}
.stat-fill.mp{background:#6f71d9}
.stat-bar.mp{background:#1a1a32}
.gear-item{color:var(--gold)}
.gear-sep{color:var(--dim)}

/* ═══ CONTROLS: COMPASS + ACTION GRID ═════ */
.controls{
  display:flex;
  gap:10px;
  padding:8px 12px 10px;
  flex-shrink:0;
  align-items:stretch;
  height:156px;
  max-height:156px;
  min-height:0;
  background:linear-gradient(180deg,rgba(13,13,20,.68),rgba(9,9,14,.64));
  backdrop-filter:blur(5px);
  touch-action:manipulation;
}

/* Compass */
.compass{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:4px;
  flex:1;
  min-width:0;
  flex-shrink:0;
  touch-action:manipulation;
}
.compass.combat-retreat .dir.on{
  color:#5b5560;
  border-color:#242432;
  background:#12121b;
  box-shadow:none;
}
.compass.combat-retreat .dir.retreat-exit{
  color:#f2b0a4;
  border-color:#7a3831;
  background:linear-gradient(180deg,#251111,#180d0d);
  box-shadow:0 0 8px rgba(229,119,97,.34);
}
.compass.combat-retreat .dir.retreat-exit::after{
  content:"esc";
  position:absolute;
  font-size:7px;
  color:#e59a8e;
  opacity:.85;
}
.dir{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#161622;
  border:1px solid #28283a;
  border-radius:9px;
  font-size:13px;
  color:#777;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  text-align:center;
  line-height:1.2;
  padding:2px;
  min-width:0;
  overflow:hidden;
}
.dir:active{background:#1e1e2e;border-color:#3a3a4a}
.dir.on{color:var(--text);background:#1e1e2e;border-color:#3a3a4a}
.dir.center{
  background:#222230;
  border-color:#38384e;
  color:var(--muted);
  font-size:9px;
}
.dir.center.active{
  background:#1a1a28;
  border-color:#4a4a5a;
  color:var(--text);
}

/* Action grid */
.actiongrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:6px;
  flex:1;
  min-width:0;
}
.btn{
  display:block;
  width:100%;
  padding:8px 4px;
  border:1px solid #333340;
  border-radius:10px;
  background:#1e1e2a;
  color:var(--text);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  min-height:44px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:all .1s ease;
}
.btn.red{background:#2a1515;border-color:#4a2222;color:#e5857a}
.btn.blue{background:#141a2a;border-color:#1e2e4a;color:#7bb3d8}
.btn.green{background:#102419;border-color:#28583a;color:#8fe6a8}
.btn.purple{background:#1a152a;border-color:#2e1e4a;color:#b180e8}
.btn:active{filter:brightness(1.15);transform:scale(.98)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* Item detail popup */
.item-popup{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.72);
}
.item-popup-panel{
  width:min(100%,340px);
  padding:18px 16px 14px;
  border:1px solid #4a3920;
  border-radius:12px;
  background:#111119;
  box-shadow:0 18px 48px rgba(0,0,0,.62);
}
.item-popup-title{
  color:var(--gold);
  font-size:19px;
  font-weight:900;
  letter-spacing:.08em;
}
.item-popup-desc{
  margin-top:8px;
  color:var(--text);
  font-size:13px;
  line-height:1.45;
}
.item-popup-line{
  margin-top:9px;
  padding:8px 10px;
  border:1px solid #252536;
  border-radius:8px;
  background:#0c0c13;
  color:#d8d2c5;
  font-size:12px;
  line-height:1.35;
}
.item-popup-hint{
  margin-top:14px;
  color:var(--dim);
  font-size:10px;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* ═══ BOTTOM NAVIGATION ═══════════════════ */
.bottom-nav{
  display:flex;
  justify-content:space-around;
  align-items:center;
  min-height:52px;
  padding:6px 4px calc(7px + env(safe-area-inset-bottom));
  background:#0a0a12;
  border-top:1px solid #1a1a25;
  flex-shrink:0;
  z-index:15;
}
.nav-tab{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  min-height:42px;
  padding:4px 0;
  border:none;
  background:transparent;
  color:var(--dim);
  font-size:9px;
  cursor:pointer;
  flex:1;
  border-radius:8px;
  opacity:1;
  transition:opacity .2s ease;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.nav-tab.active{
  color:var(--blue);
  background:rgba(20,26,42,.4);
}
.nav-tab.disabled{
  opacity:.35;
  cursor:not-allowed;
}
.nav-icon{font-size:16px;line-height:1}
.nav-tab.expedition-ready-pulse{
  animation:expeditionReadyPulse 1.1s ease-in-out 3;
}
@keyframes expeditionReadyPulse{
  0%,100%{box-shadow:none;color:var(--muted)}
  50%{
    color:var(--gold);
    background:rgba(209,173,90,.16);
    box-shadow:0 0 16px rgba(209,173,90,.34);
  }
}
.nav-label{font-size:9px;letter-spacing:.02em}
.nav-tab:active{background:rgba(255,255,255,.05)}

/* ═══ VIEWS (Expedition, Map, Settings, Debug) ═══ */
.expedition-header{padding:14px 14px 0;flex-shrink:0}
.expedition-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:2px}
.expedition-sub{font-size:11px;color:var(--dim)}
.expedition-list{padding:10px 14px;overflow-y:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch}

.inventory-list{padding:10px 14px;overflow-y:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch}
.inv-item{cursor:pointer}
.character-item-action{
  min-width:72px;
  min-height:38px;
  flex:0 0 auto;
  padding:7px 10px;
  border:1px solid #2d3446;
  border-radius:8px;
  background:#151923;
  color:#e6e0d2;
  font-size:11px;
  font-weight:800;
  touch-action:manipulation;
}

.char-header-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  border-bottom:1px solid #1d1d29;
  background:linear-gradient(180deg,#111119,#0d0d14);
  flex-shrink:0;
}
.char-view-portrait{
  width:44px;
  height:44px;
  border-radius:10px;
  background:#1a1a28;
  border:1px solid #2a2a3a;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  flex-shrink:0;
}
.char-header-info{flex:1;min-width:0}
.map-container{padding:12px 12px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}
.map-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:auto;gap:3px;width:100%;max-width:350px}
.map-cell{width:100%;min-width:0;aspect-ratio:1/1;border:1px solid #2a2a3a;border-radius:4px;background:#0f0f1a;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:8px;color:#555;position:relative;padding:2px;overflow:hidden}
.map-cell.player{border-color:#5c7cfa;background:#1a1a35;box-shadow:0 0 8px rgba(92,124,250,.25)}
.map-cell.visited{border-color:#3a4a5a;background:#141420}
.map-cell.current-zone{border-color:#5b6f8a;background:#171d2b}
.map-cell.player.current-zone{
  border-color:#f6d36d;
  background:linear-gradient(180deg,#2d2840,#171d34);
  box-shadow:0 0 0 2px rgba(246,211,109,.55),0 0 18px rgba(92,124,250,.45);
}
.map-cell.other-zone{opacity:.64}
.map-cell.visited .map-name{color:#b0b0c0}
.map-cell.current-zone .map-name{color:#c9d8ee}
.map-cell.player.current-zone .map-name{color:#fff4c2;font-weight:800}
.map-cell.player.current-zone .map-marker{color:#f6d36d;text-shadow:0 0 8px rgba(246,211,109,.8)}
.map-cell.adjacent{border-color:#2a3a4a;border-style:dashed}
.map-cell.secret{border-color:#6b4c3a}
.map-cell.path{border-color:#3a4a3a}
.map-name{font-size:7px;text-align:center;line-height:1.1;max-width:94%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-marker{font-size:9px;margin-top:1px}
.map-unknown{font-size:14px;color:#333}
.map-legend{width:min(100%,350px);padding:7px 8px;display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:center;font-size:10px;color:#777;flex-shrink:0;border:1px solid #222230;border-radius:8px;background:rgba(10,10,16,.55)}
#map-view{overflow-y:auto;-webkit-overflow-scrolling:touch}
.map-detail{
  width:min(100%,350px);
  min-height:46px;
  padding:8px 10px;
  border:1px solid #252536;
  border-radius:8px;
  background:#101018;
  text-align:left;
}
.map-detail-name{font-size:12px;font-weight:700;color:var(--text)}
.map-detail-desc{margin-top:2px;font-size:10px;line-height:1.35;color:var(--muted)}
.map-legend-item{display:flex;align-items:center;gap:4px}
.map-legend-swatch{width:12px;height:12px;border-radius:3px;border:1px solid #2a2a3a}
.full-map-overview{
  width:min(100%,350px);
  margin-top:8px;
  padding:9px 10px;
  border:1px solid #252536;
  border-radius:8px;
  background:rgba(11,11,16,.72);
  color:var(--muted);
  font-size:10px;
  line-height:1.45;
}
.full-map-title{
  color:var(--text);
  font-size:11px;
  font-weight:800;
  margin-bottom:5px;
}
.full-map-row{padding:2px 0;border-top:1px solid rgba(37,37,54,.65)}
.full-map-row:first-of-type{border-top:0}
.full-map-room{color:#d8d2c5;font-weight:700}

/* Settings */
#settings-view{
  min-height:0;
}
.settings-list{
  padding:10px 14px calc(14px + env(safe-area-inset-bottom));
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.settings-item{
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid #1a1a25;
  font-size:13px;
  color:var(--muted);
}
.settings-value{color:var(--text);font-weight:700}
.settings-divider{height:1px;background:#1a1a25;margin:8px 0}
.settings-note{
  margin:10px 0;
  padding:11px 12px;
  border:1px solid #252536;
  border-radius:9px;
  background:#111119;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}
.settings-note strong{display:block;margin-bottom:3px;color:var(--text);font-size:12px}
.settings-btn{
  display:block;width:100%;padding:12px 0;
  border:1px solid #3a2020;border-radius:10px;
  background:#1a1010;color:#c07070;
  font-size:13px;font-weight:700;cursor:pointer;
}
.settings-btn:active{filter:brightness(1.15)}
.settings-about{
  margin-top:14px;
  padding:12px;
  border:1px solid #242432;
  border-radius:9px;
  background:rgba(14,14,21,.72);
  color:#8d8790;
  font-size:10px;
  line-height:1.55;
  overflow-wrap:anywhere;
}
.settings-about-title{
  color:#d8d2c5;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  margin-bottom:6px;
}
.settings-about-meta{
  color:#aaa2a0;
  font-size:11px;
  line-height:1.45;
}
.settings-about-copy{
  margin:9px 0 0;
}

/* Developer strip */
.dev-strip{
  display:flex;
  gap:8px;
  padding:8px 14px;
  background:#0a0a12;
  border-top:1px solid #1a1a25;
  flex-shrink:0;
}
.dev-strip .btn{width:auto;flex:1;padding:8px 0;font-size:11px;font-weight:700}
.dev-strip .btn.reset{background:#1a1010;border-color:#3a2020;color:#c07070}

/* Debug */
.debug-knowledge,.debug-world-state,.debug-adaptive{padding:10px 14px;font-size:12px;color:#aaa}
.debug-zone-select{padding:8px 14px;display:flex;gap:6px;flex-wrap:wrap}
.debug-zone-btn{font-size:10px;padding:5px 10px;border:1px solid #2a2a3a;background:#161622;color:var(--dim);border-radius:6px;cursor:pointer}
.debug-zone-btn.on{background:#20324c;color:#9dcdf0}
.debug-map{padding:10px 14px}
.debug-room{background:#141420;border:1px solid #222230;border-radius:8px;padding:10px 12px;margin-bottom:8px;cursor:pointer}
.debug-room.current{border-color:#5c7cfa}
.r-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
.r-meta{font-size:10px;color:#666;margin-bottom:6px}
.r-exits{display:flex;flex-wrap:wrap;gap:4px}
.r-exit{font-size:10px;padding:2px 6px;background:#0f0f1a;border:1px solid #2a2a3a;border-radius:4px;color:#888}
.r-exit.bad{border-color:#5c2a2a;color:#c07070;background:#1a1010}
.debug-warnings{padding:10px 14px}
.debug-warning{font-size:11px;padding:4px 0;color:#aaa}
.debug-warning.error{color:#e5857a}

/* ═══ DEPRECATED (keep selectors for compat) ═══ */
.topbar{display:none}
.menu-overlay{display:none}
.status-strip{display:none}
.mastery{display:none}

/* ═══ SPRINT P2: CONTEXT AWARENESS ════════════════════════ */
/* Search button glow states */
#center-btn.search-glow {
  box-shadow: 0 0 12px rgba(209, 173, 90, 0.5), 0 0 24px rgba(209, 173, 90, 0.2);
  border-color: rgba(209, 173, 90, 0.6);
  animation: searchPulse 2s ease-in-out infinite;
}
#center-btn.search-dim {
  opacity: 0.5;
  box-shadow: none;
  border-color: #2a2a3a;
}
@keyframes searchPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(209, 173, 90, 0.5), 0 0 24px rgba(209, 173, 90, 0.2); }
  50% { box-shadow: 0 0 18px rgba(209, 173, 90, 0.7), 0 0 32px rgba(209, 173, 90, 0.3); }
}

/* Compass glow during combat retreat */
.compass.combat-retreat .dir.on {
  box-shadow: 0 0 8px rgba(229, 119, 97, 0.3);
  border-color: rgba(229, 119, 97, 0.4);
}

/* ═══ MOBILE ════════════════════════════ */
@media (max-width:480px){
  body{padding:0;overflow:hidden}
  .notes{display:none}
  .wrap{width:100%;height:100%}
  .phone{
    width:100vw;
    height:100vh;
    height:100dvh;
    max-height:100dvh;
    border:none;
    border-radius:0;
    padding:0;
  }
  .screen{border-radius:0}
}

@media (max-width:480px) and (max-height:700px){
  #adventure-view{grid-template-rows:minmax(126px,1fr) 120px auto 60px 148px}
  .room-header{padding-top:6px}
  .room-desc{top:50px}
  .room-desc{font-size:10px;line-height:1.35}
  .log{font-size:11px;line-height:16px}
  .here{height:30px;max-height:30px}
  .char-name{font-size:12px}
  .char-class{font-size:9px}
  .char-panel{padding-top:4px;padding-bottom:4px}
  .controls{height:148px;padding-top:6px;padding-bottom:8px}
  .peek{bottom:calc(204px + env(safe-area-inset-bottom))}
}