:root {
  --wine: #6b2737;
  --slate: #2e5266;
  --parchment: #f2e9e4;
  --panel: rgba(18, 16, 20, 0.82);
  --panel-border: rgba(255, 255, 255, 0.10);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* The [hidden] attribute must win over our display rules on #app/.login-screen/etc. */
[hidden] { display: none !important; }

/* ---- Login gate ---- */
.login-screen {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 28%, rgba(107,39,55,.45), transparent 60%),
    linear-gradient(160deg, #14111a 0%, #0b0b0e 70%);
}
.login-card {
  width: 100%; max-width: 420px; text-align: center;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 18px; padding: 38px 34px 30px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6); backdrop-filter: blur(6px);
}
.login-brand { font-size: 2rem; font-weight: 800; letter-spacing: .5px; color: #e9c87a; }
.login-tag { font-size: .95rem; color: #cbb88a; margin-top: 4px; }
.login-blurb { font-size: .9rem; opacity: .8; margin: 18px 0 24px; line-height: 1.5; }
.login-buttons { display: flex; flex-direction: column; gap: 11px; }
.login-btn {
  width: 100%; padding: 13px 16px; font-size: .98rem; font-weight: 600;
  border-radius: 10px; cursor: pointer; border: 1px solid rgba(255,255,255,.16);
  color: #f2e9e4; background: rgba(255,255,255,.06); transition: background .15s, transform .1s;
}
.login-btn:hover { transform: translateY(-1px); }
.login-primary { background: var(--wine); border-color: transparent; color: #fff; }
.login-primary:hover { background: #843044; }
.login-ms:hover, .login-google:hover { background: rgba(255,255,255,.14); }
.login-btn:disabled { opacity: .45; cursor: not-allowed; }
.login-btn:disabled:hover { transform: none; background: rgba(255,255,255,.06); }
.soon {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  vertical-align: middle; margin-left: 6px; padding: 2px 6px; border-radius: 8px;
  background: rgba(233,200,122,.2); color: #e9c87a;
}
.login-status { min-height: 18px; font-size: .82rem; color: #ffb3a7; margin-top: 14px; }
.dob-input {
  width: 100%; padding: 12px 14px; font-size: 1rem; border-radius: 10px; margin: 6px 0 12px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.5); color: #fff; color-scheme: dark;
}
.dob-mature { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: #cbb88a; margin-bottom: 14px; cursor: pointer; }
.dob-mature input { width: 16px; height: 16px; }
.login-fine { font-size: .72rem; opacity: .7; margin-top: 18px; line-height: 1.5; }
.login-fine a { color: #c9b6ff; }

/* ---- Lobby (choose adventure) ---- */
.lobby-card { max-width: 460px; }
.lobby-actions { display: flex; flex-direction: column; gap: 11px; margin: 22px 0 6px; }
.lobby-roster { margin-top: 14px; }
.lobby-sub { font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: #b6a78c; margin: 14px 0 10px; }
.lobby-heroes { display: flex; flex-direction: column; gap: 8px; }
.lobby-hero-row { display: flex; align-items: stretch; gap: 6px; }
.lobby-hero-row .lobby-hero { flex: 1; }
.lobby-del {
  flex: 0 0 auto; width: 38px; border-radius: 12px; cursor: pointer; font-size: .9rem;
  background: rgba(160,43,30,.25); border: 1px solid rgba(231,76,60,.4); color: #ffb3a7;
}
.lobby-del:hover { background: rgba(160,43,30,.6); color: #fff; }
.lobby-hero {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 8px 10px;
  color: #f2e9e4; transition: background .15s, transform .1s;
}
.lobby-hero:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.lobby-portrait { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; }
.lobby-portrait.ph { display: flex; align-items: center; justify-content: center; font-weight: 700; color: #6b5a3a; background: radial-gradient(circle at 50% 35%, #2a2330, #121016); }
.lobby-hero-info { display: flex; flex-direction: column; }
.lobby-hero-info small { color: #b6a78c; font-size: .76rem; }

/* ---- Signed-in user chip (topbar) ---- */
.user-chip { display: inline-flex; align-items: center; gap: 8px; }
.user-name { font-size: .82rem; color: #e6f0f5; opacity: .9; }
.signout-btn {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
  color: #e6f0f5; font-size: .76rem; padding: 5px 10px; border-radius: 14px; cursor: pointer;
}
.signout-btn:hover { background: rgba(255,255,255,.14); }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--parchment);
  background: #0b0b0e;
  overflow: hidden;
}

#app {
  height: 100vh;          /* fallback */
  height: 100dvh;         /* mobile: excludes browser toolbars so the composer stays visible */
  display: grid;
  grid-template-rows: auto 1fr auto;   /* topbar · main · composer */
  overflow: hidden;
}

/* ---- Operational status banner ---- */
.status-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  text-align: center; font-size: .85rem; padding: 7px 16px; color: #1a1410; font-weight: 600;
  background: #e9c87a;
}
.status-banner.warning { background: #e0a800; }
.status-banner.critical { background: #e74c3c; color: #fff; }
.status-banner.info { background: #2e5266; color: #eaf2f7; }
body.has-banner #app, body.has-banner .login-screen, body.has-banner #lobby, body.has-banner #paywall { padding-top: 34px; }

/* Help link in the top bar */
.help-link { font-size: .82rem; color: #cbb88a; text-decoration: none; }
.help-link:hover { color: #e9c87a; text-decoration: underline; }

/* ---- Top status bar ---- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  background: #15131a;
  border-bottom: 1px solid var(--panel-border);
}
.brand { font-weight: 700; letter-spacing: .5px; font-size: 1.05rem; color: #e9c87a; }
.world { font-size: .85rem; color: #cbb88a; opacity: .9; margin-left: 14px; }
.status { font-size: .8rem; opacity: .65; margin-left: auto; }
.icon-btn { background: none; border: none; font-size: 1.2rem; cursor: pointer; }
.speed-sel {
  background: rgba(46, 82, 102, 0.6); border: 1px solid rgba(255,255,255,.15); color: #e6f0f5;
  font-size: .8rem; padding: 5px 8px; border-radius: 14px; cursor: pointer; color-scheme: dark;
}
.speed-sel:hover { background: rgba(46, 82, 102, 0.95); }
.invite-btn {
  background: rgba(46, 82, 102, 0.6); border: 1px solid rgba(255,255,255,.15); color: #e6f0f5;
  font-size: .82rem; padding: 6px 12px; border-radius: 16px; cursor: pointer;
}
.invite-btn:hover { background: rgba(46, 82, 102, 0.95); }

/* ---- Main: stage (scene + narration) | character panel ---- */
.main {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  padding: 14px;
  min-height: 0;
  overflow-y: auto;   /* tall content scrolls here; topbar + composer stay pinned */
}
.stage {
  display: grid;
  grid-template-rows: 1fr auto;   /* scene image · narration box */
  gap: 12px;
  min-height: 0;
}

/* Scene image — single, centered, framed, never tiled (object-fit covers, transform does Ken Burns) */
.scene-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  box-shadow: 0 10px 40px rgba(0,0,0,.55);
  background: #000;
  min-height: 0;
}
.scene-img {
  width: 100%; height: 100%;
  object-fit: cover;            /* fills the frame, no repeat, keeps aspect */
  display: block;
  animation: kenburns 45s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.03); }
  to   { transform: scale(1.10); }
}

/* ---- Loading spinners (story + scene art) ---- */
.spinner {
  display: inline-block; width: 16px; height: 16px; vertical-align: -3px;
  border: 2px solid rgba(233,200,122,.3); border-top-color: #e9c87a; border-radius: 50%;
  animation: spin .8s linear infinite;
}
.spinner.lg { width: 30px; height: 30px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.scene-spinner {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  background: rgba(8,7,11,.55); backdrop-filter: blur(2px);
}
.scene-spinner .spinner { width: 34px; height: 34px; border-width: 3px; }
.scene-spinner-label { font-size: .8rem; color: #e9c87a; letter-spacing: .3px; }
.entry.thinking { color: #cbb88a; font-style: italic; opacity: .9; }
.entry.thinking .dots::after { content: ""; animation: dots 1.4s steps(4,end) infinite; }
@keyframes dots { 0%{content:"";} 25%{content:"·";} 50%{content:"··";} 75%{content:"···";} 100%{content:"";} }

/* Narration box — readable, below the image, never covering it */
.narration {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 12px 16px;
  max-height: 30vh;
  display: flex; flex-direction: column;
  backdrop-filter: blur(3px);
}
.speaker {
  font-weight: 700; font-size: .8rem; letter-spacing: 1px; text-transform: uppercase;
  color: #e9c87a; margin-bottom: 8px; flex: 0 0 auto;
}
.log { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.entry { line-height: 1.55; }
.entry.gm { font-size: 1.05rem; }
.entry.player { color: #ffe9b0; font-style: italic; }
.entry.dice {
  font-size: .85rem; background: rgba(0,0,0,.35);
  border-left: 3px solid var(--wine); padding: 5px 10px; border-radius: 4px;
}
.entry.prompt { color: #bcd6ff; font-weight: 600; }
.entry.chat { font-size: .9rem; color: #d8e6c8; background: rgba(120,180,120,.1); border-left: 3px solid #6a9a5a; padding: 4px 10px; border-radius: 4px; }

/* Quick-pick option chips (adventure type, suggestions) */
.options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip {
  background: rgba(107, 39, 55, 0.55);
  border: 1px solid rgba(233, 200, 122, 0.35);
  color: #f2e9e4; font-size: .9rem;
  padding: 8px 14px; border-radius: 20px; cursor: pointer;
  transition: background .15s, transform .1s;
}
.chip:hover { background: rgba(107, 39, 55, 0.9); transform: translateY(-1px); }

/* ---- Right column: quest log + character panel ---- */
.sidecol { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; }
.party { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.panel-wrap { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
/* DESKTOP: panels & cards keep their natural height (don't let flex squeeze/clip them) — the SIDECOL
   scrolls instead, so the portrait, stats, sheet button and inventory are always reachable. */
.sidecol > .panel-wrap { flex: 0 0 auto; }
.party .card { flex: 0 0 auto; }
.panel-head { display: none; }   /* desktop: the panels are self-labelled, no header/close needed */
.panel-btn {                     /* topbar triggers — hidden on desktop, shown on mobile */
  display: none;
  background: rgba(46, 82, 102, 0.6); border: 1px solid rgba(255,255,255,.15); color: #e6f0f5;
  font-size: .82rem; padding: 6px 12px; border-radius: 16px; cursor: pointer;
}
.panel-btn:hover { background: rgba(46, 82, 102, 0.95); }
.panel-backdrop { display: none; }
/* On desktop, fold away the quest wrapper entirely when there are no quests yet. */
#questsPanel:has(.quests-log:empty) { display: none; }

/* Quest log */
.quests-log:empty { display: none; }
.quest-panel {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; padding: 10px 12px;
}
.quest-panel > summary {
  cursor: pointer; font-size: .82rem; font-weight: 700; letter-spacing: .5px; color: #e9c87a;
  list-style: none; user-select: none;
}
.quest-panel > summary::-webkit-details-marker { display: none; }
.quest-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.quest { display: flex; flex-direction: column; gap: 1px; font-size: .82rem; padding-left: 14px; position: relative; }
.quest::before { content: "•"; position: absolute; left: 0; color: #e9c87a; }
.quest.done { opacity: .55; }
.quest.done .q-title { text-decoration: line-through; }
.quest.done::before { content: "✓"; color: #4caf50; }
.q-title { color: #f2e9e4; font-weight: 600; }
.q-sum { color: #b6a78c; font-size: .76rem; }

/* ---- Battle map (live combat) — range-band view that updates as foes close & fall ---- */
.battlemap {
  background: var(--panel); border: 1px solid rgba(231,76,60,.3); border-radius: 12px;
  padding: 8px 11px; backdrop-filter: blur(3px); max-height: 32vh; overflow-y: auto;
}
.bm-head {
  font-size: .76rem; font-weight: 700; letter-spacing: .5px; color: #e9c87a;
  text-transform: uppercase; margin-bottom: 7px;
}
.bm-field { display: flex; flex-direction: column; gap: 4px; }
.bm-band { display: flex; align-items: center; gap: 8px; }
.bm-band-label {
  flex: 0 0 60px; font-size: .64rem; text-transform: uppercase; letter-spacing: .5px;
  color: #b6a78c; text-align: right;
}
.bm-tokens { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-height: 20px; align-items: center; }
.bm-empty { color: #5a5448; }
.bm-token {
  display: flex; flex-direction: column; gap: 2px; min-width: 84px; max-width: 140px;
  padding: 3px 8px; border-radius: 8px; font-size: .72rem; border: 1px solid rgba(255,255,255,.1);
}
.bm-enemy { background: rgba(160,43,30,.22); border-color: rgba(231,76,60,.35); }
.bm-enemy.boss { background: rgba(150,40,90,.32); border-color: #e9c87a; }
.bm-ally { background: rgba(46,82,102,.32); border-color: rgba(120,180,220,.3); }
.bm-token.dead { opacity: .4; filter: grayscale(1); flex-direction: row; align-items: center; gap: 4px; min-width: auto; }
.bm-name { font-weight: 600; color: #f2e9e4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-hp { display: block; height: 4px; border-radius: 3px; background: rgba(0,0,0,.45); overflow: hidden; }
.bm-hp > span { display: block; height: 100%; transition: width .4s; }
.bm-cond { font-size: .62rem; color: #cbb88a; }
.bm-party { margin-top: 4px; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,.14); }

/* XP bar */
.xpbar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; margin: 2px 0 6px; }
.xpbar > span { display: block; height: 100%; background: linear-gradient(90deg,#7a5cff,#a98bff); transition: width .4s; }

/* Level-up callout in the log */
.entry.levelup { color: #e9c87a; font-weight: 700; background: rgba(233,200,122,.1); border-left: 3px solid #e9c87a; padding: 5px 10px; border-radius: 4px; }
.card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  overflow: hidden;
}
.portrait {
  width: 100%; height: 200px; object-fit: cover; object-position: 50% 28%; display: block;
  background: linear-gradient(135deg, #2a2330, #15131a);
}
.portrait-ph {
  width: 100%; height: 200px; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 700; color: #6b5a3a;
  background: radial-gradient(circle at 50% 35%, #2a2330, #121016);
}
.card-body { padding: 10px 12px 12px; }
.char-name { font-weight: 700; font-size: 1.05rem; }
.char-sub { font-size: .78rem; opacity: .7; margin-bottom: 8px; }
.stat-row { display: flex; justify-content: space-between; font-size: .82rem; margin: 3px 0; }
.hpbar { height: 9px; border-radius: 5px; background: #3a1d22; overflow: hidden; margin: 4px 0 8px; }
.hpbar > span { display: block; height: 100%; background: linear-gradient(90deg, #c0392b, #e74c3c); transition: width .4s; }
.conditions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cond { font-size: .7rem; background: #5a2230; color: #ffd9d9; padding: 2px 7px; border-radius: 10px; }

/* Inventory (private to the character) */
.inventory { margin-top: 10px; border-top: 1px solid var(--panel-border); padding-top: 8px; }
.inventory > summary {
  cursor: pointer; font-size: .78rem; font-weight: 700; letter-spacing: .5px;
  color: #e9c87a; list-style: none; user-select: none;
}
.inventory > summary::-webkit-details-marker { display: none; }
.inv-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.inv-list li {
  font-size: .8rem; color: #e7dccb; padding: 3px 8px; border-radius: 6px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
}
.inv-list li.inv-empty { color: #8a8378; font-style: italic; background: none; border: none; padding-left: 0; }

/* ---- Character sheet ---- */
.sheet-btn {
  width: 100%; margin: 8px 0 4px; padding: 7px 10px; cursor: pointer;
  background: rgba(46,82,102,.5); border: 1px solid rgba(233,200,122,.3); color: #e9c87a;
  border-radius: 8px; font-size: .82rem; font-weight: 600;
}
.sheet-btn:hover { background: rgba(46,82,102,.85); }
.sheet-modal {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
}
.sheet-card {
  width: 100%; max-width: 540px; max-height: 90vh; display: flex; flex-direction: column;
  background: #14121a; border: 1px solid var(--panel-border); border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
  padding: 13px 16px; border-bottom: 1px solid var(--panel-border); background: #15131a;
  font-weight: 700; color: #e9c87a;
}
.sheet-body { overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
.cs-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.cs-portrait { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.cs-portrait.ph { display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: #6b5a3a; background: radial-gradient(circle at 50% 35%, #2a2330, #121016); }
.cs-name { font-size: 1.3rem; font-weight: 800; color: #f2e9e4; }
.cs-sub { font-size: .85rem; color: #cbb88a; margin-top: 2px; }
.cs-xp { font-size: .75rem; color: #b6a78c; margin-top: 4px; }
.cs-vitals { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cs-vital { flex: 1 1 80px; text-align: center; background: rgba(255,255,255,.04); border: 1px solid var(--panel-border); border-radius: 8px; padding: 7px 6px; }
.cs-vital span { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .5px; color: #b6a78c; }
.cs-vital b { font-size: 1.05rem; color: #f2e9e4; }
.cs-section-title { font-size: .78rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #e9c87a; margin: 16px 0 8px; }
.cs-hint { font-size: .66rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: #8a8378; }
.cs-abilities { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cs-abil { text-align: center; background: rgba(255,255,255,.04); border: 1px solid var(--panel-border); border-radius: 8px; padding: 7px 2px; }
.cs-abil-name { font-size: .62rem; color: #b6a78c; letter-spacing: .5px; }
.cs-abil-mod { font-size: 1.15rem; font-weight: 800; color: #e9c87a; }
.cs-abil-score { font-size: .68rem; color: #cbb88a; }
.cs-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.cs-skill { display: flex; align-items: center; gap: 6px; font-size: .8rem; padding: 2px 0; color: #b6a78c; }
.cs-skill.prof { color: #f2e9e4; font-weight: 600; }
.cs-skill-dot { color: #4a4640; font-size: .7rem; }
.cs-skill.prof .cs-skill-dot { color: #e9c87a; }
.cs-skill-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-skill-name em { color: #8a8378; font-style: normal; font-size: .72rem; }
.cs-skill-mod { font-variant-numeric: tabular-nums; }
.cs-profs { display: flex; flex-direction: column; gap: 5px; font-size: .84rem; color: #e7dccb; }
.cs-profs b { color: #cbb88a; }
.cs-grow { margin-top: 16px; font-size: .8rem; color: #cbb88a; background: rgba(233,200,122,.08); border: 1px solid rgba(233,200,122,.2); border-radius: 8px; padding: 9px 11px; line-height: 1.5; }
@media (max-width: 560px) {
  .cs-skills { grid-template-columns: 1fr; }
  .cs-abilities { grid-template-columns: repeat(3, 1fr); }
  .sheet-modal { padding: 0; }
  .sheet-card { max-width: none; max-height: 100dvh; height: 100dvh; border-radius: 0; }
}

/* ---- Friends & party chat panel ---- */
.fr-input { flex: 1; padding: 9px 11px; font-size: .9rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.5); color: #fff; }
.fr-btn { padding: 9px 14px; border-radius: 8px; border: none; background: var(--wine); color: #fff; font-weight: 600; cursor: pointer; }
.fr-btn:hover { background: #843044; }
.fr-link { background: none; border: none; color: #c9b6ff; cursor: pointer; font-size: .78rem; text-decoration: underline; }
.fr-mine { font-size: .92rem; color: #e7dccb; margin-bottom: 12px; }
.fr-set, .fr-add, .fr-chat { display: flex; gap: 8px; margin-bottom: 10px; }
.fr-status { min-height: 16px; font-size: .8rem; margin: 2px 0 8px; }
.fr-section { font-size: .76rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #e9c87a; margin: 14px 0 8px; }
.fr-hint { font-size: .68rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: #8a8378; }
.fr-list { display: flex; flex-direction: column; gap: 4px; }
.fr-empty { color: #8a8378; font-style: italic; font-size: .85rem; }
.fr-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255,255,255,.04); border: 1px solid var(--panel-border); border-radius: 8px; }
.fr-dot { width: 9px; height: 9px; border-radius: 50%; background: #5a5448; flex: 0 0 auto; }
.fr-dot.on { background: #4caf50; box-shadow: 0 0 6px #4caf50; }
.fr-name { flex: 1; font-size: .88rem; color: #f2e9e4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-name em { color: #8a8378; font-style: normal; font-size: .78rem; }
.fr-tag { font-size: .64rem; background: rgba(46,82,102,.6); color: #cfe6f2; padding: 2px 7px; border-radius: 10px; }
.fr-actions { display: flex; gap: 5px; flex: 0 0 auto; }
.fr-act { font-size: .74rem; padding: 4px 9px; border-radius: 8px; cursor: pointer; background: rgba(46,82,102,.6); border: 1px solid rgba(255,255,255,.15); color: #e6f0f5; }
.fr-act:hover { background: rgba(46,82,102,.95); }
.fr-act.danger { background: rgba(160,43,30,.3); border-color: rgba(231,76,60,.4); color: #ffb3a7; }

/* ---- Turn-taking banner (multiplayer) ---- */
.turnbar {
  text-align: center; font-size: .85rem; padding: 7px 14px; color: #cbb88a;
  background: rgba(46,82,102,.35); border-top: 1px solid var(--panel-border);
}
.turnbar.mine { color: #1a1410; background: #e9c87a; font-weight: 700; }

/* ---- Composer ---- */
.composer { display: flex; gap: 10px; align-items: center; padding: 12px 14px 16px; }
.input:disabled, .send:disabled, .mic:disabled { opacity: .5; cursor: not-allowed; }
.input {
  flex: 1; padding: 13px 16px; font-size: 1rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.5); color: #fff;
}
.input:focus { outline: 2px solid var(--slate); }
.mic, .send { padding: 13px 18px; font-size: 1rem; border-radius: 10px; cursor: pointer; border: none; }
.mic { background: rgba(0,0,0,.5); }
.mic.recording { background: var(--wine); animation: pulse 1s infinite; }
.send { background: var(--wine); color: #fff; font-weight: 600; }
@keyframes pulse { 50% { opacity: .6; } }

/* Placeholder text when the quest log is empty (shown inside the mobile modal). */
.quests-log:empty::after { content: "No active quests yet."; color: #8a8378; font-style: italic; font-size: .85rem; }

/* ---- Medium screens (small tablets): keep the party panel on the right but
   narrower, and let the image shrink with the screen. ---- */
@media (max-width: 1000px) {
  .main { grid-template-columns: 1fr 240px; }
}

/* ---- Phones & small folds: the scene takes the full width; Quests and
   Party/Inventory become slide-in modal windows opened from the topbar buttons.
   This stops the side panel from crowding out the player photo & inventory. ---- */
@media (max-width: 820px) {
  .main { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
  .scene-frame { max-height: 42vh; }  /* don't let the image eat the screen */
  .scene-img { animation: none; }     /* skip Ken Burns on small screens */
  .narration { max-height: none; }    /* main itself scrolls now */
  .composer { padding: 10px; gap: 8px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .mic, .send { padding: 12px 14px; }

  /* Topbar has a lot of controls — let it WRAP so nothing is ever clipped off-screen on a phone,
     and shrink the chrome so it usually still fits one row. Respect the device's safe-area inset. */
  .topbar {
    flex-wrap: wrap; gap: 7px; row-gap: 6px; padding: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top));
  }
  .brand { font-size: .98rem; }
  .world { font-size: .72rem; margin-left: 6px; }
  .invite-btn, .panel-btn { font-size: .76rem; padding: 5px 9px; }
  .help-link { font-size: .76rem; }
  .signout-btn { font-size: .72rem; padding: 4px 9px; }
  .user-name { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .panel-btn { display: inline-flex; align-items: center; }
  .status { display: none; }           /* free up topbar room for the buttons */

  .sidecol { display: contents; }      /* children become independent fixed overlays */
  .panel-wrap {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(92vw, 420px); z-index: 71;
    background: #100e15; border-left: 1px solid var(--panel-border);
    box-shadow: -18px 0 50px rgba(0,0,0,.6);
    transform: translateX(102%); transition: transform .22s ease;
    gap: 0; padding: 0; overflow: hidden;
  }
  .panel-wrap.open { transform: translateX(0); }
  /* keep both panels reachable via their buttons, even when empty */
  #questsPanel:has(.quests-log:empty) { display: flex; }
  .panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--panel-border);
    font-weight: 700; color: #e9c87a; font-size: .95rem; flex: 0 0 auto; background: #15131a;
  }
  .panel-close {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
    color: #f2e9e4; font-size: 1rem; line-height: 1; padding: 6px 11px; border-radius: 10px; cursor: pointer;
  }
  .panel-body { overflow-y: auto; padding: 14px; flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
  .panel-backdrop {
    display: block; position: fixed; inset: 0; z-index: 70;
    background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
  }
  /* smaller portraits so a whole group fits and scrolls comfortably */
  .card .portrait, .card .portrait-ph { aspect-ratio: auto; height: 118px; }
  .portrait-ph { font-size: 2rem; }
  /* the modal header already says "Quests", so drop the inner summary */
  .quest-panel { border: none; background: none; padding: 0; }
  .quest-panel > summary { display: none; }
  .inventory { display: block; }      /* always expanded inside the roomy modal */
}

/* ---- Standard / small phones (iPhone, most Androids): tighten the topbar so the controls fit
   without a wrapped row stealing vertical space. Hide the most decorative bits first. ---- */
@media (max-width: 560px) {
  .topbar { gap: 6px; padding: 7px 8px; padding-top: max(7px, env(safe-area-inset-top)); }
  .brand { font-size: .9rem; letter-spacing: 0; }
  .world { display: none; }           /* weather/time is decorative here — reclaim the width */
  .user-name { display: none; }       /* keep just the Sign-out button */
  .invite-btn, .panel-btn { font-size: .72rem; padding: 5px 8px; }
  .scene-frame { max-height: 38vh; }
  .narration { padding: 10px 12px; }
  .entry.gm { font-size: 1rem; }
}

/* ---- Very small / older phones: make sure the input bar is always reachable. ---- */
@media (max-width: 380px) {
  .brand { font-size: .82rem; }
  .invite-btn, .panel-btn, .help-link { font-size: .68rem; }
  .icon-btn { font-size: 1.05rem; }
  .input { padding: 11px 12px; }
  .mic, .send { padding: 11px 12px; }
}