/* The Ninth Revival — classic terminal warmth, modern touch layout.
   One fixed screen: status / feed (scrolls) / panel / tabs. */

:root {
  --bg: #0b0f0c;
  --bg-panel: #10160f;
  --bg-raise: #1a2418;
  --fg: #cfe3c8;
  --dim: #7a8f74;
  --green: #7ddc7d;
  --bright: #b6f0a2;
  --amber: #e8c060;
  --red: #e07a6a;
  --cyan: #7ac9c9;
  --violet: #b49ae0;
  --border: #263322;
  --tap-min: 44px;
  font-size: 15px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  overscroll-behavior: none;
}

#app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- status ---------- */

#status {
  padding: 6px 10px 4px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  flex: none;
}
#status-top { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--bright); }
#where { color: var(--amber); text-align: right; }
#bars { display: flex; gap: 6px; margin: 4px 0; }
.bar {
  flex: 1; height: 12px; background: #000; border: 1px solid var(--border);
  border-radius: 3px; position: relative; overflow: hidden;
}
.bar i { display: block; height: 100%; width: 100%; transition: width 0.4s; }
/* Newcomers can't decode four naked colors — each bar names itself. */
.bar b {
  position: absolute; inset: 0; padding-left: 4px;
  font-size: 0.55rem; line-height: 12px; font-weight: 400;
  color: #e8f4e4; opacity: 0.85; letter-spacing: 0.06em;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}
.bar.hp i { background: #3f9c46; }
.bar.mana i { background: #3d6fb0; }
.bar.mv i { background: #a08a3a; }
.bar.xp i { background: #6b4d9e; }
#prompt { font-size: 0.8rem; color: var(--dim); }
#prompt .fighting { color: var(--red); }

/* ---------- feed ---------- */

#feed {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px 16px;
  line-height: 1.45;
  scroll-behavior: smooth;
}
#feed p { margin: 0 0 2px; white-space: pre-wrap; word-break: break-word; }
#feed p.new { animation: fadein 0.25s; }
@keyframes fadein { from { opacity: 0; transform: translateY(3px); } }

.k-room-title { color: var(--bright); font-weight: bold; margin-top: 8px !important; }
.k-room-desc  { color: var(--fg); }
.k-movement   { color: var(--dim); }
.k-combat     { color: var(--amber); }
.k-combat-hit { color: var(--amber); }
.k-speech     { color: var(--cyan); }
.k-emote      { color: var(--cyan); font-style: italic; }
.k-system     { color: var(--violet); }
.k-ambient    { color: var(--dim); }
.k-death      { color: var(--red); font-weight: bold; }
.k-level      { color: var(--bright); font-weight: bold; }
.k-loot       { color: var(--amber); }
.k-info       { color: var(--dim); }
.k-motd       { color: var(--green); font-size: 0.62rem; line-height: 1.15; }

.tok {
  color: var(--bright);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}

#jump-live {
  position: absolute; /* anchored within app via wrapper below */
  align-self: center;
  bottom: 46%;
  background: var(--bg-raise); color: var(--bright);
  border: 1px solid var(--green); border-radius: 20px;
  padding: 6px 14px; font: inherit; cursor: pointer;
}

/* ---------- panel ---------- */

#panel {
  flex: none;
  height: 34dvh;
  min-height: 200px;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  overflow-y: auto;
  padding: 8px 10px;
}
.panel-section { margin-bottom: 10px; }
.panel-label {
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 5px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.chip, button.card {
  font: inherit; color: var(--fg);
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: var(--tap-min);
  padding: 6px 12px;
  text-align: left;
}
button.chip, button.card { cursor: pointer; }
.chip.static { cursor: default; }
button.chip:active, button.card:active { background: #24331f; }
.chip .sub, .card .sub { display: block; font-size: 0.72rem; color: var(--dim); }
button.chip.exit { color: var(--bright); }
button.chip.danger { border-color: #5a2c24; color: var(--red); }
button.chip.primary { border-color: #3f6b35; color: var(--bright); }
.chip.selected { border-color: var(--green); background: #24331f; }
button.chip:disabled { opacity: 0.4; cursor: default; }

.card { width: 100%; display: block; margin-bottom: 6px; }
.card .name { color: var(--bright); }
.card .name.mob { color: var(--amber); }
.card .name.npc { color: var(--cyan); }
.card .name.player { color: var(--green); }

.empty-note { color: var(--dim); font-size: 0.85rem; }
.panel-input {
  font: inherit; color: var(--bright);
  background: #000; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; width: 100%; min-height: var(--tap-min);
}
.panel-input:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }

/* ---------- tabs ---------- */

#tabs {
  flex: none;
  display: flex;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}
#tabs button {
  flex: 1; font: inherit;
  background: none; border: none;
  color: var(--dim);
  padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  min-height: 52px;
  cursor: pointer;
  border-top: 2px solid transparent;
}
#tabs button.active { color: var(--bright); border-top-color: var(--green); }
#tabs button.pulse { animation: pulse 1s infinite; color: var(--red); }
@keyframes pulse { 50% { opacity: 0.4; } }

/* ---------- context sheet ---------- */

#sheet {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(52px + env(safe-area-inset-bottom)); /* clear of the tab bar — tabs stay tappable */
  width: 100%; max-width: 900px;
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  padding: 14px;
  z-index: 40;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.6);
}
#sheet h3 { color: var(--bright); font-size: 1rem; margin-bottom: 4px; }
#sheet .desc { color: var(--dim); font-size: 0.85rem; margin-bottom: 10px; }
#sheet .sheet-line { font-size: 0.85rem; margin-bottom: 8px; }
#sheet .sheet-line b { color: var(--green); font-weight: normal; }

/* ---------- login ---------- */

#login {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding: 20px; z-index: 50; overflow-y: auto;
}
/* margin:auto centers short content but lets tall content scroll from its top
   (justify-content:center would cut the top off — mobile audit finding). */
#login-inner {
  margin: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; width: 100%;
}
#login-logo { color: var(--green); font-size: 1.1rem; text-align: center; line-height: 1.3; letter-spacing: 0.05em; }
.login-fiction { color: var(--dim); text-align: center; font-size: 0.9rem; line-height: 1.6; }

#landing, #login-form, #auth-form, #recovery { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(440px, 92vw); }
#landing[hidden], #login-form[hidden], #auth-form[hidden], #recovery[hidden] { display: none; }
.login-pitch { color: var(--fg); text-align: center; font-size: 0.85rem; line-height: 1.6; }
#landing-live { text-align: center; font-size: 0.8rem; line-height: 1.6; min-height: 2.6em; }
#landing-live .who { color: var(--bright); }
#landing-live .stats { color: var(--dim); }
#landing-atlas { width: 100%; display: grid; gap: 8px; margin-top: 8px; }
#landing-atlas-details { width: 100%; }
#landing-atlas-details summary {
  color: var(--dim); text-align: center; font-size: 0.8rem; cursor: pointer;
  padding: 8px; list-style: none;
}
#landing-atlas-details summary::-webkit-details-marker { display: none; }
#landing-atlas-details summary::before { content: '▸ '; color: var(--green); }
#landing-atlas-details[open] summary::before { content: '▾ '; }
.landing-note { color: var(--dim); font-size: 0.72rem; text-align: center; line-height: 1.5; }
.atlas-title { color: var(--green); text-align: center; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.atlas-zone { border: 1px solid var(--border); background: var(--bg-panel); border-radius: 9px; padding: 10px 12px; }
.atlas-zone .name { color: var(--bright); }
.atlas-zone .band { float: right; color: var(--green); font-size: 0.75rem; }
.atlas-zone .tagline { color: var(--dim); font-size: 0.76rem; margin-top: 3px; line-height: 1.4; }
.atlas-zone .facts { color: var(--fg); font-size: 0.68rem; margin-top: 5px; }
.login-btn {
  font: inherit; background: #1e3319; color: var(--bright);
  border: 1px solid var(--green); border-radius: 10px;
  padding: 12px 26px; cursor: pointer; min-height: var(--tap-min);
  width: min(320px, 90vw);
}
.login-btn.secondary { background: var(--bg-panel); border-color: var(--border); color: var(--fg); }
#landing-chars { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; }
#landing-chars:empty { display: none; }
#account-entry { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
/* display:flex would override the hidden attribute — signed-in players must not
   see "Start your adventure" beside "Awaken a character" (Grok playtest P0). */
#account-entry[hidden] { display: none; }
.form-title { color: var(--green); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.chargen-step, .form-stack { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.chargen-step[hidden], .form-stack[hidden] { display: none; }
.step-title { color: var(--bright); font-size: 1rem; text-align: center; }
.step-hint { color: var(--dim); font-size: 0.78rem; text-align: center; }
.step-hint.warn { color: var(--amber); }
.login-btn:disabled { opacity: 0.4; cursor: default; }
.text-btn { border: 0; background: transparent; color: var(--dim); text-decoration: underline; font: inherit; cursor: pointer; padding: 8px; }
#recovery-code { color: var(--bright); background: var(--bg-panel); border: 1px solid var(--green); border-radius: 8px; padding: 12px; font-size: 0.86rem; overflow-wrap: anywhere; user-select: all; }
#login-name, #account-handle, #account-waykey {
  font: inherit; color: var(--bright);
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; width: min(320px, 90vw); text-align: center;
}
#login-name:focus, #account-handle:focus, #account-waykey:focus { outline: 2px solid var(--green); outline-offset: 2px; border-color: var(--green); }
#login-classes, .choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(420px, 92vw); }
#login-classes button, .choice-grid button {
  font: inherit; text-align: left;
  background: var(--bg-panel); color: var(--fg);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px; cursor: pointer; min-height: 72px;
}
#login-classes button.selected, .choice-grid button.selected { border-color: var(--green); background: var(--bg-raise); }
#login-classes .cname, .choice-grid .cname { color: var(--bright); display: block; margin-bottom: 3px; }
#login-classes .cblurb, .choice-grid .cblurb { font-size: 0.72rem; color: var(--dim); line-height: 1.35; }
#login-classes .ctag, .choice-grid .ctag { display: block; font-size: 0.68rem; color: var(--green); margin-top: 5px; }
#login-go {
  font: inherit; background: #1e3319; color: var(--bright);
  border: 1px solid var(--green); border-radius: 10px;
  padding: 12px 26px; cursor: pointer; min-height: var(--tap-min);
}
#login-go:disabled { opacity: 0.4; }
#login-err { color: var(--red); font-size: 0.85rem; min-height: 1.2em; text-align: center; }

@media (min-width: 760px) {
  :root { font-size: 16px; }
  #panel { height: 30dvh; }
}