:root {
  color-scheme: dark;
  --bg-dark: #0b1013;
  --bg-card: #12181b;
  --bg-surface: #20282b;
  --border-color: #3c3c34;
  --primary-accent: #d9b56e;
  --primary-hover: #efd19a;
  --text-main: #eee8db;
  --text-muted: #b0aea4;
  --success-color: #73b3a2;
  --warning-color: #d9b56e;
  --danger-color: #f29494;
  --hp-color: #b65b6e;
  --mana-color: #659fa4;
  --font-story: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--text-main);
  background: var(--bg-dark) url("assets/forevania-nocturne.webp") center 42% / cover no-repeat;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(6 10 13 / 25%), rgb(5 9 12 / 48%));
}
button, input, select { font: inherit; }
button { touch-action: manipulation; }
button, select, input { transition: border-color .18s, background-color .18s, box-shadow .18s; }
button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--primary-accent);
  outline-offset: 3px;
}
button:disabled { opacity: .48; cursor: not-allowed; }
[hidden] { display: none !important; }
::selection { color: #fff7e5; background: #745833; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: #4b4b40; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

.app-container { position: relative; display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.game-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 18px 26px;
  border-bottom: 1px solid rgb(217 181 110 / 26%);
  background: linear-gradient(110deg, rgb(13 19 22 / 96%), rgb(19 23 24 / 91%));
  box-shadow: 0 8px 30px rgb(0 0 0 / 16%);
}
.campaign-info, .header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; margin-right: 14px; }
.brand > div { min-width: 0; }
.brand-emblem { flex: 0 0 34px; width: 34px; height: 42px; fill: none; stroke: var(--primary-accent); stroke-width: 1.1; }
.campaign-info h1 { font-family: var(--font-story); font-size: 1.9rem; font-weight: 400; letter-spacing: .02em; line-height: 1.05; color: #f0dec0; }
.brand-subtitle { color: #bab3a2; margin-top: 6px; font-size: .65rem; letter-spacing: .055em; line-height: 1.4; }
.badge { padding: 6px 9px; font-size: .73rem; line-height: 1.3; color: var(--text-muted); background: rgb(33 40 40 / 72%); border: 1px solid var(--border-color); border-radius: 5px; overflow-wrap: anywhere; max-width: 100%; }
.badge-round { color: #e1c99b; border-color: #665537; background: #342b1f; }
.badge-room { color: #a5c3b9; border-color: #334d46; background: #1b2c27; }
.system-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--text-muted); font-size: .74rem; }
.status-indicator { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #868a87; }
.status-indicator.online { background: var(--success-color); box-shadow: 0 0 10px rgb(115 179 162 / 45%); }
.status-indicator.offline { background: var(--danger-color); }
/* The status dot and its help control each occupy their own header space. */
#ai-status-indicator { display: inline-flex; align-items: center; gap: 4px; width: auto; height: auto; padding: 3px; background: transparent; border-radius: 0; box-shadow: none; }
#ai-status-indicator::before { content: ''; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #868a87; }
#ai-status-indicator.online::before { background: var(--success-color); box-shadow: 0 0 10px rgb(115 179 162 / 45%); }
#ai-status-indicator.offline::before { background: var(--danger-color); }
#ai-status-indicator > .info-help { flex-shrink: 0; margin: 0; }
.locale-control { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: .73rem; }
.locale-control select { max-width: 150px; padding: 8px; }

.primary-btn, .secondary-btn, .text-btn { cursor: pointer; border-radius: 5px; min-height: 38px; line-height: 1.35; }
.primary-btn {
  background: linear-gradient(135deg, #dfbd7e, #c99f56);
  color: #191a16;
  border: 1px solid #e2c28a;
  padding: 11px 17px;
  font-size: .83rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgb(255 244 217 / 25%), 0 3px 12px rgb(0 0 0 / 14%);
}
.primary-btn:hover:not(:disabled) { background: var(--primary-hover); box-shadow: 0 3px 18px rgb(217 181 110 / 15%); }
.secondary-btn { background: #20292b; color: var(--text-main); border: 1px solid #4c5149; padding: 8px 12px; font-size: .77rem; }
.secondary-btn:hover:not(:disabled) { background: #2c3738; border-color: #7b7057; }
.text-btn { background: transparent; color: var(--text-muted); border: 0; padding: 7px 9px; font-size: .83rem; }
.text-btn:hover { color: #f1d6a6; }
select, input { background: #192226; border: 1px solid #49504c; border-radius: 5px; color: var(--text-main); }
input::placeholder { color: #a4aaa7; opacity: 1; }
input:focus, select:focus { border-color: var(--primary-accent); }

.main-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(220px, 264px) minmax(0, 1fr) minmax(220px, 260px);
  gap: 16px;
  padding: 18px;
  min-height: 0;
  overflow: hidden;
}
.sidebar {
  padding: 20px 17px;
  overflow-y: auto;
  min-width: 0;
  background: linear-gradient(150deg, rgb(19 27 29 / 95%), rgb(14 21 24 / 97%));
  border: 1px solid rgb(186 163 117 / 22%);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
}
.sidebar h2 { font-size: .74rem; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; line-height: 1.65; color: #d0bf9d; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.sidebar h3, .conditions-box h4 { font-size: .82rem; font-weight: 600; color: #c4c4b9; }
.character-card { background: rgb(32 42 44 / 68%); border: 1px solid #42483f; border-radius: 6px; padding: 15px 12px; margin-bottom: 24px; }
.char-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.char-header h3 { font-family: var(--font-story); font-size: 1.22rem; font-weight: 400; color: #eddfc7; overflow-wrap: anywhere; min-width: 0; }
.tag { font-size: .65rem; padding: 4px 7px; border-radius: 4px; line-height: 1.4; }
.tag-normal { color: #b8caca; background: #283c40; border: 1px solid #395257; }
.tag-status { color: #c3dbc7; background: #2b4639; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.vital-bars { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.bar-group label { display: flex; justify-content: space-between; gap: 6px; font-size: .75rem; color: var(--text-muted); margin-bottom: 7px; }
.progress-bar { background: #0c1519; height: 5px; border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 4px; }
.progress-fill.hp { background: linear-gradient(90deg, #854052, #c87580); }
.progress-fill.mana { background: linear-gradient(90deg, #446a7d, #89b6b8); }
.attributes-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-bottom: 18px; }
.attr-box { display: flex; align-items:center; justify-content: space-between; min-width:0; gap: 6px; padding: 9px; font-size: .75rem; border-radius: 4px; background: #152025; }
.attr-box > span:first-child { min-width:0; overflow-wrap:anywhere; }
.attr-val { flex-shrink:0; color: #e2c28a; font-weight: 600; }
.party-roster { display: flex; flex-direction: column; list-style: none; gap: 8px; margin-top: 12px; font-size: .8rem; }
.party-roster li { display: flex; align-items: center; gap: 8px; padding: 10px; background: rgb(32 42 44 / 75%); border: 1px solid #35423f; border-radius: 5px; overflow-wrap: anywhere; }
.party-roster li.active { border-left: 3px solid var(--primary-accent); }
.status-dot { flex-shrink: 0; width: 6px; height: 6px; background: var(--success-color); border-radius: 50%; }

.center-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; background: linear-gradient(180deg, rgb(8 17 22 / 20%), rgb(8 16 20 / 38%)); border: 1px solid rgb(211 191 151 / 23%); border-radius: 8px; overflow: hidden; box-shadow: 0 12px 35px rgb(0 0 0 / 18%); }
.channel-tabs { display: flex; flex-shrink: 0; border-bottom: 1px solid rgb(217 181 110 / 28%); background: rgb(15 24 28 / 93%); }
.tab-btn { cursor: pointer; color: #b8b8ad; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 16px 20px; font-size: .8rem; line-height: 1.4; }
.tab-btn.active { color: #f0d7aa; border-bottom-color: var(--primary-accent); background: linear-gradient(180deg, rgb(217 181 110 / 4%), rgb(217 181 110 / 11%)); }
.tab-btn:hover { color: #f1dfbe; }
.chat-viewport { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.chat-log { display: none; flex-direction: column; gap: 14px; }
.chat-log.active { display: flex; }
.message { max-width: 820px; padding: 17px 20px; font-size: .9rem; line-height: 1.7; border: 1px solid rgb(205 187 145 / 19%); border-radius: 6px; box-shadow: 0 4px 16px rgb(0 0 0 / 14%); }
.message p, .roll-item { overflow-wrap: anywhere; }
.message.system { background: rgb(21 29 31 / 94%); border-left: 2px solid #c2a26b; }
.message.dm { background: rgb(19 34 39 / 95%); border-left: 2px solid #7aa4a6; }
.message.group { background: rgb(23 39 31 / 95%); border-left: 2px solid #77ad8c; }
.message.error { background: #351e23; border-left: 2px solid var(--danger-color); color: #ffc2bc; }
.msg-sender { display: block; margin-bottom: 8px; color: #cec3ab; font-size: .66rem; font-weight: 600; letter-spacing: .045em; }
.welcome-message { margin-top: 14px; padding: 23px 25px; background: linear-gradient(130deg, rgb(28 33 30 / 97%), rgb(15 27 33 / 95%)) !important; }
.welcome-message::before { content: "◇"; display: block; margin-bottom: 12px; color: var(--primary-accent); font-size: 1.8rem; line-height: 1; }
.welcome-message p { font-family: var(--font-story); font-size: 1.1rem; line-height: 1.65; color: #ecdfc6; }
.action-console { flex-shrink: 0; padding: 17px 20px 12px; border-top: 1px solid rgb(211 191 151 / 28%); background: linear-gradient(110deg, rgb(19 28 30 / 97%), rgb(17 25 29 / 97%)); }
.console-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.console-controls select { min-width: 0; max-width: 100%; padding: 8px 9px; font-size: .73rem; }
.console-controls input { width: 105px; min-width: 0; padding: 8px; font-size: .73rem; }
.console-input-row { display: flex; gap: 9px; }
.console-input-row input { flex: 1; min-width: 0; padding: 12px 14px; font-size: .85rem; }
.action-status { color: var(--text-muted); margin: 9px 0; font-size: .73rem; line-height: 1.5; }
.roll-feed { display: flex; flex-direction: column; gap: 9px; margin-bottom: 26px; }
.roll-item { background: rgb(32 42 44 / 70%); border: 1px solid #3e4842; padding: 12px; border-radius: 5px; font-size: .78rem; line-height: 1.65; }
.roll-item.placeholder { color: #b6b7aa; border-style: dashed; background: transparent; }
.mechanics-reference h3 { margin-bottom: 13px; line-height: 1.55; }
.grade-list { display: flex; flex-direction: column; list-style: none; gap: 10px; color: var(--text-muted); font-size: .73rem; line-height: 1.6; }
.badge-grade { display: inline-block; margin-right: 5px; padding: 3px 7px; border-radius: 4px; font-size: .69rem; font-weight: 600; }
.grade-perfeito { background: #594831; color: #f0d397; }
.grade-sucesso_bom { background: #284b3d; color: #bcddc6; }
.grade-sucesso { background: #2a444f; color: #b9d4de; }
.grade-falha { background: #3c4142; color: #d5d5cc; }
.grade-falha_critica { background: #572c36; color: #f0c0c7; }

.mobile-nav { display: none; flex-shrink: 0; align-items: center; justify-content: space-around; gap: 6px; border-top: 1px solid #4c4b3d; padding: 8px 12px; padding-bottom: max(8px, env(safe-area-inset-bottom)); background: #121c20; }
.mobile-nav-btn { cursor: pointer; flex: 1; min-height: 42px; background: transparent; border: 1px solid transparent; border-radius: 5px; color: var(--text-muted); font-size: .77rem; padding: 9px 7px; }
.mobile-nav-btn.active { color: #efd7ac; border-color: #5b513d; background: #2b2d25; }

.modal-overlay { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; display: flex; justify-content: center; align-items: center; padding: 16px; z-index: 1000; background: rgb(5 11 15 / 64%); backdrop-filter: blur(3px); }
.modal-card { position: relative; width: 100%; max-width: 430px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 30px; background: linear-gradient(145deg, #1b2528, #101a1f); border: 1px solid #766345; border-radius: 9px; box-shadow: 0 24px 100px rgb(0 0 0 / 55%); }
#auth-modal .modal-card::before { content: ""; display: block; height: 110px; margin: -30px -30px 25px; border-bottom: 1px solid rgb(217 181 110 / 45%); background: linear-gradient(0deg, #1b2528, transparent 70%), url("assets/forevania-nocturne.webp") center 33% / cover; }
.modal-card h3 { font-family: var(--font-story); font-size: 1.6rem; color: #f0dec0; font-weight: 400; line-height: 1.2; }
.modal-subtitle { color: var(--text-muted); font-size: .8rem; line-height: 1.6; margin-top: 7px; margin-bottom: 24px; }
.form-group { margin-bottom: 17px; }
.form-group label { display: block; color: #c7c1b1; font-size: .75rem; margin-bottom: 8px; }
.form-group input { width: 100%; padding: 12px; font-size: .9rem; background: #101c21; }
.modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 24px; }
.modal-actions .primary-btn, .modal-actions .secondary-btn { flex: 1; }
.modal-card hr { border: 0; border-top: 1px solid var(--border-color); margin: 24px 0; }
.error-msg { color: var(--danger-color); font-size: .78rem; line-height: 1.6; margin-top: 9px; }
#campaign-invite { overflow-wrap: anywhere; user-select: all; }

@media (min-width: 1500px) { .main-layout { gap: 22px; padding: 24px; } .chat-viewport { padding: 30px; } }
@media (max-width: 1160px) { .game-header { gap: 10px; padding: 14px 18px; } .system-status { width: 100%; } .main-layout { grid-template-columns: 220px minmax(0, 1fr) 220px; gap: 10px; padding: 12px; } .sidebar { padding: 16px 12px; } .chat-viewport { padding: 16px; } }
@media (max-width: 900px) {
  body { background-image: url("assets/forevania-nocturne-mobile.webp"); background-position: 56% center; }
  #auth-modal .modal-card::before { background-image: linear-gradient(0deg, #1b2528, transparent 70%), url("assets/forevania-nocturne-mobile.webp"); }
  .game-header { gap: 8px; padding: 11px 14px; }
  .campaign-info { gap: 7px; width: 100%; }
  .brand { margin-right: auto; gap: 8px; }
  .campaign-info h1 { font-size: 1.5rem; }
  .brand-emblem { flex-basis: 24px; width: 24px; height: 32px; }
  .brand-subtitle { font-size: .6rem; margin-top: 4px; letter-spacing: 0; }
  .header-actions { gap: 6px; width: 100%; }
  .header-actions .badge { margin-left: auto; }
  .header-actions .primary-btn, .header-actions .secondary-btn { min-height: 34px; padding: 7px 9px; font-size: .7rem; }
  .locale-control { font-size: .69rem; }
  .locale-control select { max-width: 130px; padding: 7px; font-size: .71rem; }
  .system-status { gap: 7px; font-size: .68rem; }
  .badge { font-size: .65rem; padding: 4px 7px; }
  .main-layout { display: flex; position: relative; padding: 10px; min-height: 0; gap: 0; }
  .sidebar { display: none; }
  .sidebar.mobile-visible { display: block; position: static; width: 100%; height: 100%; }
  .center-stage { width: 100%; }
  .center-stage.mobile-hidden { display: none; }
  .tab-btn { flex: 1; padding: 12px 8px; font-size: .73rem; }
  .chat-viewport { padding: 14px; }
  .message { padding: 14px; font-size: .84rem; }
  .welcome-message { padding: 20px !important; margin-top: 8px; }
  .welcome-message p { font-size: 1rem; }
  .action-console { padding: 12px; }
  .console-controls { gap: 6px; margin-bottom: 8px; }
  .console-controls select { flex: 1 1 130px; padding: 8px; font-size: .7rem; }
  .console-input-row { gap: 6px; }
  .console-input-row input { padding: 10px; font-size: 16px; }
  .form-group input { font-size: 16px; }
  .console-input-row .primary-btn { padding: 10px; font-size: .74rem; }
  .action-status { margin: 7px 0; font-size: .69rem; }
  .mobile-nav { display: flex; }
  .modal-card { padding: 24px; }
  #auth-modal .modal-card::before { margin: -24px -24px 22px; height: 96px; }
}
@media (max-width: 390px) {
  .game-header { padding: 9px 10px; gap: 7px; }
  .campaign-info { gap: 6px; }
  .campaign-info h1 { font-size: 1.4rem; }
  .header-actions .badge { margin-left: 0; }
  .header-actions { max-width: 100%; }
  .locale-control > span { display: none; }
  .main-layout { padding: 7px; }
  .chat-viewport { padding: 10px; }
  .console-controls select { flex-basis: 120px; }
  .action-console { padding: 10px; }
  .modal-overlay { padding: 12px; }
  .modal-card { padding: 22px; max-height: calc(100dvh - 24px); }
  #auth-modal .modal-card::before { margin: -22px -22px 20px; }
}
@media (max-height: 650px) and (max-width: 900px) { .game-header { padding-top: 7px; padding-bottom: 7px; } .brand-subtitle { display: none; } .chat-viewport { padding: 8px; } .modal-overlay { align-items: flex-start; overflow-y: auto; } }
@media (max-height: 550px) and (max-width: 900px) {
  .game-header .system-status, .campaign-info > .badge { display: none; }
  .game-header { gap: 5px; }
  .brand-emblem { height: 24px; }
  .main-layout { padding-top: 5px; padding-bottom: 5px; }
  .console-controls select { padding-top: 6px; padding-bottom: 6px; }
  .action-console { padding-top: 8px; padding-bottom: 6px; }
  .mobile-nav { padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
/* Public adventure discovery keeps the tabletop shell and gold palette. */
body { background-image: none; }
#scene-background { position: fixed; inset: 0; pointer-events: none; }
.background-layer { position: absolute; inset: 0; background: center 42% / cover no-repeat; opacity: 0; transition: opacity 2.5s ease; }
.background-layer.active { opacity: 1; }
body::before { z-index: 1; }
.app-container { z-index: 2; }
.public-lobby { flex: 1; min-height: 0; overflow-y: auto; padding: 28px; }
.lobby-heading { max-width: 740px; margin-bottom: 22px; }
.eyebrow { display: block; color: #cbb181; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; line-height: 1.6; }
.lobby-heading h2 { font: 400 clamp(1.6rem, 2.6vw, 2.7rem) / 1.2 var(--font-story); margin: 10px 0 13px; color: #f0dec0; }
.lobby-heading p, .lobby-section > p { line-height: 1.7; color: var(--text-muted); font-size: .87rem; }
.lobby-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.adventure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.adventure-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid rgb(211 191 151 / 30%); background: rgb(15 24 27 / 95%); border-radius: 7px; overflow: hidden; }
.adventure-card > img { width: 100%; height: 160px; object-fit: cover; background: #182124; }
.adventure-card-body { display: flex; flex-direction: column; flex: 1; padding: 18px; }
.adventure-card h3 { font: 400 1.28rem / 1.35 var(--font-story); color: #eddfc7; margin: 7px 0 10px; }
.adventure-card p { color: var(--text-muted); font-size: .81rem; line-height: 1.65; flex: 1; }
.adventure-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 18px; }
.adventure-card-actions .primary-btn { font-size: .74rem; padding: 9px 11px; }
.adventure-card-actions .text-btn { font-size: .74rem; padding-left: 0; }
.lobby-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgb(217 181 110 / 20%); }
.lobby-section h3 { font: 400 1.4rem / 1.3 var(--font-story); color: #eddfc7; margin-bottom: 12px; }
.room-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.room-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; background: #172226; border: 1px solid #3c453f; border-radius: 6px; }
.room-row strong { font-size: .83rem; font-weight: 500; overflow-wrap: anywhere; }
.room-row p, .empty-note { color: var(--text-muted); font-size: .76rem; line-height: 1.5; margin-top: 4px; }
.adventure-preview-card { max-width: 600px; }
.adventure-preview-card h4 { color: #cbb181; font-size: .78rem; margin: 24px 0 10px; }
.adventure-preview-card p { font-family: var(--font-story); line-height: 1.8; white-space: pre-line; }
.presence-summary { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: .71rem; color: #d0bf9d; }
#campaign-clock { font-variant-numeric: tabular-nums; color: #f0dec0; }
#campaign-clock-state { color: var(--text-muted); }
.form-group textarea { width: 100%; padding: 12px; background: #101c21; color: var(--text-main); border: 1px solid #49504c; border-radius: 5px; resize: vertical; font: inherit; }
.lobby-mode .roll-feed, .lobby-mode .mechanics-reference { opacity: .45; }
.lobby-mode #downgrade-tag, .lobby-mode .conditions-box, .lobby-mode .party-list-box { display: none; }
@media (min-width: 1700px) { .adventure-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  body { background-image: none; }
  .public-lobby { padding: 20px 15px; }
  .adventure-card > img { height: 145px; }
  .adventure-card-body { padding: 15px; }
  .lobby-mode .mobile-nav { display: none; }
  .presence-summary { width: 100%; font-size: .65rem; }
  .form-group textarea { font-size: 16px; }
}
@media (max-width: 600px) { .adventure-grid { grid-template-columns: 1fr; } .adventure-card > img { height: 180px; } .lobby-heading h2 { font-size: 1.8rem; } }
/* Auxiliary chats and account support never replace the public story. */
.chat-log.story-always-visible { display: flex; }
#social-chats { margin-bottom: 28px; }
.chat-help { color: var(--text-muted); font-size: .72rem; line-height: 1.6; margin-bottom: 16px; }
.chat-panel { padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.chat-panel > label { display: block; color: #cbb181; margin-bottom: 9px; font-size: .73rem; }
.chat-panel-controls { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.chat-panel select, .chat-panel textarea { width: 100%; min-width: 0; padding: 8px; font-size: .73rem; }
.chat-panel textarea { font: inherit; font-size: .75rem; background: #101b20; color: var(--text-main); border: 1px solid #49504c; border-radius: 5px; resize: vertical; margin: 8px 0; }
.aux-chat-log { max-height: 150px; min-height: 35px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.aux-message { background: #1c292c; padding: 9px; border-radius: 4px; font-size: .73rem; line-height: 1.55; overflow-wrap: anywhere; }
.aux-message.master { border-left: 2px solid #7aa4a6; }
.aux-message strong { display: block; font-size: .65rem; color: #cbb181; margin-bottom: 4px; }
.chat-send-status { font-size: .7rem; color: var(--text-muted); line-height: 1.5; margin-top: 5px; }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.support-card { max-width: 680px; }
.support-card section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.support-card h4 { color: #dbc69e; font-size: .9rem; margin-bottom: 14px; }
.support-card textarea { width: 100%; padding: 12px; color: var(--text-main); background: #101c21; border: 1px solid #49504c; border-radius: 5px; font: inherit; margin: 8px 0 12px; resize: vertical; }
.support-card label { display: block; color: var(--text-muted); font-size: .8rem; }
.support-card select { padding: 8px; }
.faq-item { padding: 12px 0; border-bottom: 1px solid #35423f; line-height: 1.6; }
.faq-item summary { cursor: pointer; color: #e5d0aa; font-size: .83rem; }
.faq-item p { color: var(--text-muted); margin-top: 10px; font-size: .8rem; }
#support-answer, #support-ticket-status, #support-delivery { margin: 15px 0; font-size: .82rem; line-height: 1.6; white-space: pre-line; }
#support-tickets { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.ticket-select { text-align: left; overflow-wrap: anywhere; }
#support-ticket-detail { margin-top: 20px; }
.support-update { background: #1a282c; padding: 13px; border-radius: 5px; margin-top: 10px; overflow-wrap: anywhere; }
.support-update strong { color: #d9b56e; font-size: .72rem; }
.support-update p { font-size: .82rem; line-height: 1.6; margin-top: 7px; white-space: pre-line; }
.table-picker { position: fixed; left: 20px; bottom: 20px; z-index: 50; max-width: 250px; }
#table-picker-list { margin-bottom: 8px; padding: 10px; border: 1px solid #766345; border-radius: 6px; background: #132024; box-shadow: 0 8px 30px rgb(0 0 0 / 40%); }
#table-picker-toggle { display: block; box-shadow: 0 3px 12px rgb(0 0 0 / 30%); }
.followed-table { display: flex; align-items: center; border-left: 2px solid #6e8981; margin-bottom: 7px; padding-left: 5px; }
.followed-table.importance-important { border-left-color: #d9b56e; }
.followed-table.importance-critical { border-left-color: #f29494; }
.table-select { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text-main); text-align: left; cursor: pointer; padding: 8px; }
.table-select strong, .table-select span, .table-select small { display: block; line-height: 1.5; overflow-wrap: anywhere; }
.table-select strong { font-size: .76rem; font-weight: 500; }
.table-select span { font-size: .69rem; color: var(--text-muted); }
.table-select small { font-size: .65rem; color: #e5c681; }
#table-picker-list select { width: 100%; padding: 7px; font-size: .72rem; }
#table-picker-notice:not(:empty) { padding: 8px; background: #132024; border-radius: 4px; }
#mobile-chats-btn { display: none; }
@media (max-width: 900px) {
  #mobile-chats-btn:not([hidden]) { display: inline-block; }
  .table-picker { left: auto; right: 12px; max-width: 240px; }
  #table-picker-toggle { margin-left: auto; font-size: .7rem; padding: 7px 10px; min-height: 34px; }
  .chat-modal-card { max-width: 550px; }
  .support-card textarea, .chat-panel textarea { font-size: 16px; }
  .aux-chat-log { max-height: 190px; }
  .modal-heading { position: sticky; top: -24px; padding: 10px 0; background: #182327; z-index: 1; }
  .modal-heading h3 { font-size: 1.3rem; }
}
/* Forevania's etched corners use only CSS lines, with no textures or heavy glow. */
.primary-btn, .secondary-btn {
  position: relative;
  border-radius: 2px 7px 2px 7px;
  min-height: 40px;
  box-shadow: none;
  letter-spacing: .015em;
  font-weight: 600;
}
.primary-btn {
  color: #f0ddb4;
  background: linear-gradient(135deg, #2b302b, #202826);
  border-color: #a98d5c;
}
.primary-btn::before, .primary-btn::after, .secondary-btn::before, .secondary-btn::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  pointer-events: none;
  opacity: .75;
}
.primary-btn::before, .secondary-btn::before { top: 4px; left: 4px; border-top: 1px solid #d5b87d; border-left: 1px solid #d5b87d; }
.primary-btn::after, .secondary-btn::after { bottom: 4px; right: 4px; border-bottom: 1px solid #a88657; border-right: 1px solid #a88657; }
.primary-btn:hover:not(:disabled) { color: #fff0ce; background: #35372c; border-color: #dec18a; box-shadow: none; }
.secondary-btn { color: #d2c6ac; background: rgb(24 33 34 / 80%); border-color: #586057; }
.secondary-btn::before, .secondary-btn::after { opacity: .4; }
.secondary-btn:hover:not(:disabled) { color: #efdbb5; background: #29312c; border-color: #a88c5f; }
.text-btn { min-height: 40px; border-radius: 2px; color: #c9ba9d; }
.text-btn:hover { color: #f0d8ac; text-decoration: underline; text-decoration-color: #aa8956; text-underline-offset: 5px; }
button:focus-visible { outline: 2px solid #ecd19a; outline-offset: 3px; }
.primary-btn:disabled, .secondary-btn:disabled { opacity: .5; }
@media (max-width: 900px) {
  .header-actions .primary-btn, .header-actions .secondary-btn, .header-actions .text-btn { min-height: 40px; }
  .adventure-card-actions .primary-btn, #table-picker-toggle { min-height: 40px; }
  .chat-panel .secondary-btn { min-height: 44px; }
}
/* Highlight each newly arrived message once; never animate a persistent alert. */
.event-highlight { animation: forevania-arrival .65s ease-out 1; }
@keyframes forevania-arrival { from { border-color: #d2b476; background-color: #374136; } to { border-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .event-highlight { animation: none !important; } }
body.no-message-effects .event-highlight { animation: none !important; }
/* Thin engraved frames, crimson seals and quiet gold lines remain CSS-only. */
.sidebar, .center-stage, .modal-card, #table-picker-list, .attr-box, .character-card, .roll-item, .room-row, .profile-card { border-radius: 2px 9px 2px 9px; }
.sidebar h2, .mechanics-reference h3, .character-library h3 { border-bottom: 1px solid rgb(173 143 87 / 32%); padding-bottom: 10px; }
.sidebar h2::after, .character-library h3::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 10px; border: 1px solid #a3775d; transform: rotate(45deg); vertical-align: middle; }
.tab-btn, .mobile-nav-btn { position: relative; min-height: 40px; border-radius: 1px 6px 1px 6px; }
.tab-btn.active { background: linear-gradient(90deg, rgb(104 40 40 / 24%), rgb(168 135 73 / 10%)); color: #ecd5af; border-bottom-color: #b89b62; }
.tab-btn.active::after { content: ''; position: absolute; bottom: 5px; left: 9px; width: 5px; height: 5px; border-left: 1px solid #ae735f; border-bottom: 1px solid #ae735f; }
.tag, .badge-grade { border-radius: 1px 5px 1px 5px; }
#table-picker-list { box-shadow: none; border-color: #8d744e; border-top: 2px solid #9d7452; }
.followed-table.importance-critical { border-left-color: #b96b68; }
.attr-box { border-color: rgb(163 132 77 / 35%); }
.character-library { padding: 20px 0; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; }
.character-library h3 { font: 400 1rem / 1.4 var(--font-story); color: #dfccaa; margin-bottom: 10px; }
#sheet-create-character-btn { width: 100%; margin-bottom: 5px; }
#character-profiles { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.profile-card { min-width: 0; padding: 9px; border: 1px solid #4c5347; background: rgb(19 29 29 / 92%); }
.profile-select { width: 100%; min-height: 44px; text-align: left; color: var(--text-main); border: none; background: transparent; cursor: pointer; padding: 6px; }
.profile-select strong, .profile-select span, .profile-select small { display: block; overflow-wrap: anywhere; line-height: 1.5; }
.profile-select strong { font: 400 1.1rem / 1.5 var(--font-story); color: #e8d6b4; }
.profile-select span { font-size: .68rem; color: var(--text-muted); }
.profile-select small { font-size: .64rem; color: #baa77f; margin-top: 5px; }
.profile-select[aria-pressed="true"] { border-left: 2px solid #bb8b62; }
.profile-card .text-btn { font-size: .7rem; }
.room-config-details { margin: 0 0 18px; border: 1px solid #4c5347; padding: 10px 14px; border-radius: 1px 7px; }
.room-config-details summary { cursor: pointer; min-height: 40px; display: list-item; align-content: center; color: #d6bd92; font-size: .8rem; }
.room-config-details > label { display: block; margin: 14px 0 8px; color: var(--text-muted); font-size: .77rem; }
.room-config-details > select { width: 100%; min-height: 42px; padding: 8px; font-size: .77rem; }
.creature-options { border: 0; border-top: 1px solid #534e40; margin-top: 15px; padding: 12px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.creature-options legend { color: #d6bd92; font-size: .77rem; padding-right: 10px; }
.creature-option { min-height: 40px; display: flex; align-items: center; gap: 8px; font-size: .8rem; cursor: pointer; }
.creature-option input { width: 18px; height: 18px; accent-color: #b69260; }
.creature-option:first-of-type { grid-column: 1 / -1; }
.character-wizard-card { max-width: 760px; }
.character-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.character-form-grid .form-group { margin-bottom: 10px; min-width: 0; }
.character-form-grid select { width: 100%; min-width: 0; padding: 11px; }
.character-wizard-card input, .character-wizard-card select, #entry-character-select { min-height: 42px; }
.privacy-note { font-size: .76rem; color: #babaa4; line-height: 1.6; padding: 10px 12px; margin: 14px 0 22px; border-left: 2px solid #9b7555; background: #1c2928; }
.character-editor-tabs { display: flex; gap: 6px; margin: 18px 0; border-bottom: 1px solid #574e3c; }
.character-stats { padding: 15px 0 0; margin-top: 20px; border: 0; border-top: 1px solid #574e3c; }
.character-stats legend { color: #d9bf92; padding-right: 12px; font-size: .82rem; }
#character-raw-sheet { display: block; width: 100%; margin: 12px 0; padding: 13px; background: #101a1b; color: #e3dac7; border: 1px solid #6d624b; border-radius: 1px 6px; resize: vertical; font: .85rem / 1.6 ui-monospace, monospace; }
#character-txt-panel > label { color: #d6bd92; font-size: .85rem; }
#entry-character-select { width: 100%; padding: 10px; }
@media (max-width: 900px) {
  .character-wizard-card .modal-heading { top: -22px; }
  .character-wizard-card select, .character-wizard-card input, #character-raw-sheet { font-size: 16px; }
  .character-form-grid { gap: 10px; }
  .character-wizard-card .form-group { margin-bottom: 9px; }
  .tab-btn, .mobile-nav-btn { min-height: 44px; }
}
@media (max-width: 420px) { .character-form-grid { grid-template-columns: 1fr; } .creature-options { grid-template-columns: 1fr; } }
/* Compact mobile chrome keeps the same controls in a temporary overlay. */
#header-actions-anchor, #header-status-anchor { display: contents; }
#campaign-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.mobile-menu-toggle { display: none; }
.mobile-menu-card { width: min(340px, calc(100vw - 16px)); max-height: calc(100dvh - 78px); overflow-y: auto; padding: 18px; background: #152023; border: 1px solid #7d694a; border-radius: 2px 9px 2px 9px; }
.mobile-menu-card h3 { font: 400 1.2rem / 1.5 var(--font-story); color: #eddabb; }
.mobile-menu-overlay { padding: 68px 8px 10px; align-items: flex-start; justify-content: flex-end; backdrop-filter: none; }
#mobile-menu-campaign { margin: 14px 0 18px; padding-bottom: 14px; border-bottom: 1px solid #64543d; }
#mobile-menu-status { margin-top: 18px; padding-top: 14px; border-top: 1px solid #64543d; }
#mobile-menu .header-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
#mobile-menu .header-actions button { min-height: 44px; text-align: left; }
#mobile-menu .locale-control { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
#mobile-menu .locale-control > span { display: inline; }
#mobile-menu .locale-control select { flex: 1; min-height: 44px; max-width: 200px; }
#mobile-menu .system-status { width: 100%; display: flex; gap: 8px; font-size: .73rem; }
#mobile-menu .presence-summary { width: 100%; margin-top: 8px; }
#mobile-menu #campaign-badges { align-items: flex-start; }
#mobile-menu #campaign-title { flex-basis: 100%; }
.support-launcher { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 65; width: 44px; height: 44px; }
.support-bubble { position: relative; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; border: 1px solid #b09566; border-radius: 50%; background: #192629; color: #ead3a8; font: 600 21px / 1 var(--font-story); cursor: pointer; box-shadow: none; }
.support-bubble::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgb(180 149 91 / 36%); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; pointer-events: none; }
.support-bubble:hover { color: #fff0cf; border-color: #e3c58f; background: #28312b; }
.support-hint { position: absolute; right: 0; bottom: 54px; width: 180px; padding: 10px 12px; border: 1px solid #85704b; border-radius: 2px 7px; background: #172326; color: #e3d0af; font-size: .74rem; line-height: 1.5; pointer-events: none; }
.friends-card { max-width: 620px; }
.friends-card section { padding-top: 16px; margin-top: 18px; border-top: 1px solid #5d523c; }
.friends-card h4 { color: #dac19a; font-size: .84rem; margin-bottom: 12px; }
#friends-status { color: #c9c1a4; line-height: 1.6; margin: 15px 0; font-size: .8rem; }
.friend-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px; margin-top: 8px; border: 1px solid #4d554a; border-radius: 2px 7px; background: #192629; overflow-wrap: anywhere; }
.friend-actions { display: flex; flex-wrap: wrap; gap: 7px; }
@media (max-width: 900px) {
  .game-header { height: 60px; min-height: 60px; max-height: 60px; padding: 8px 12px; flex-wrap: nowrap; gap: 12px; box-shadow: none; }
  .game-header .campaign-info { flex: 1; flex-wrap: nowrap; gap: 0; min-width: 0; }
  .game-header .brand { margin: 0; gap: 9px; }
  .game-header .brand-emblem { width: 27px; height: 35px; flex-basis: 27px; }
  .game-header .brand-subtitle { display: none; }
  .game-header .campaign-info h1 { font-size: 1.45rem; line-height: 1.15; }
  .mobile-menu-toggle { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #77674b; border-radius: 2px 7px; color: #e3c89a; background: #1b2829; cursor: pointer; }
  .mobile-menu-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.3; }
  .mobile-menu-card .modal-heading { top: -18px; padding-top: 4px; background: #152023; }
  .support-launcher { left: max(12px, env(safe-area-inset-left)); right: auto; }
  .support-hint { left: 0; right: auto; }
  .public-lobby { padding-bottom: 76px; }
  .friends-card .friend-row { gap: 10px; }
}

.friend-presence { display: inline-flex; align-items: center; gap: 6px; color: #c5c7c8; font-size: .8rem; }
.friend-presence::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #9c9fa3; }
.friend-presence.online { color: #aad8bc; }
.friend-presence.online::before { background: #72c091; }

/* Onboarding and readable controls retain the original artwork and palette. */
:root { --text-muted: #c6c6b8; }
.brand-emblem, .footer-brand img, .help-brand { object-fit: contain; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 16px; }
.welcome-actions .primary-btn { min-height: 46px; padding: 13px 24px; }
.scene-tools { display: flex; flex-shrink: 0; align-items: center; gap: 9px; padding: 7px 13px; background: rgb(12 22 27 / 94%); border-bottom: 1px solid var(--border-color); }
.scene-tools .text-btn { min-height: 32px; padding: 6px 10px; }
#experience-conditions { margin-left: auto; color: #f1d5a4; font-size: .83rem; line-height: 1.5; overflow-wrap: anywhere; }
.game-context-bar { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 8px 16px; font-size: .76rem; line-height: 1.5; border-bottom: 1px solid var(--border-color); background: #142027; color: #d9d5c9; }
.game-context-bar strong { font-weight: 500; color: #dfc595; margin-right: 5px; }
.adventure-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin: 24px 0 10px; }
.adventure-filters label { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; color: #ddd6c7; font-size: .8rem; line-height: 1.5; }
.adventure-filters select { width: 100%; min-width: 0; padding: 10px 9px; margin-top: 6px; font-size: .83rem; }
.adventure-grid { margin-top: 20px; }
.adventure-metadata { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0 0; }
.adventure-metadata span { padding: 4px 7px; border: 1px solid #4f554d; background: #202a2c; font-size: .73rem; line-height: 1.45; color: #e2d9c7; border-radius: 3px; }
.adventure-card p, .empty-note, .modal-subtitle, .chat-help, .privacy-note { font-size: .86rem; }
.eyebrow { font-size: .74rem; }
.platform-footer { padding: 26px 0 8px; margin-top: 30px; border-top: 1px solid #545348; color: #d6d1c3; font-size: .83rem; line-height: 1.7; }
.footer-brand { display: flex; align-items: center; gap: 12px; font: 1.6rem var(--font-story); color: #ead7b3; margin-bottom: 12px; }
.platform-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.platform-footer a, #legal-dialog a { color: #efd4a0; text-decoration: underline; overflow-wrap: anywhere; }
.experience-card { max-width: 760px; }
.experience-card p { font-size: .94rem; line-height: 1.75; margin-top: 12px; color: #e0dfd3; }
.experience-card h4 { font: 1.15rem var(--font-story); color: #ead7b2; margin-top: 23px; margin-bottom: 9px; }
.start-modes { display: grid; gap: 13px; margin-top: 18px; }
.mode-card { display: flex; flex-direction: column; gap: 9px; text-align: left; padding: 18px; border: 1px solid #776750; border-radius: 3px 10px 3px 10px; background: #17252b; color: #eee3ce; cursor: pointer; font: inherit; }
.mode-card strong { font: 1.3rem var(--font-story); color: #f2d8a5; }
.mode-card span { color: #d2d0c3; font-size: .9rem; line-height: 1.7; }
.mode-card:disabled { opacity: .65; cursor: not-allowed; }
.mode-card:not(:disabled):hover { border-color: #e1bc78; background: #213035; }
.help-brand { float: right; margin: 0 0 10px 18px; }
.calculation-reference { padding: 14px; border-left: 3px solid #caa467; background: #142228; font-variant-numeric: tabular-nums; }
.how-measures { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 15px; }
.how-measures section { min-width: 0; padding: 14px; background: #16242a; border: 1px solid #44534f; }
.how-measures h4 { margin-top: 0; }
.demo-scene { font-family: var(--font-story); padding: 17px; background: #18272b; border-left: 2px solid #bb8d53; }
.demo-result { font-variant-numeric: tabular-nums; color: #f2d7a4 !important; }
.demo-probabilities { display: flex; flex-wrap: wrap; gap: 6px 15px; }
.demo-probabilities p { margin-top: 0; font-size: .85rem; }
.remember-draft { display: flex; align-items: center; gap: 9px; line-height: 1.7; font-size: .86rem; color: #ddd9cc; }
.remember-draft input { width: 20px; height: 20px; }
.auth-providers { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
#identity-dialog input { width: 100%; margin: 10px 0 16px; padding: 12px; }
#identity-dialog label { display: block; color: #e1d9c9; font-size: .88rem; margin-top: 10px; }
.match-search-panel { flex-shrink: 0; max-height: 200px; overflow-y: auto; padding: 10px 16px; background: #18272b; border-bottom: 1px solid #675e49; }
.match-search-panel p { font-size: .85rem; line-height: 1.6; }
.match-search-panel .room-row { padding: 10px; margin-top: 8px; }
.desktop-support-label { position: absolute; right: 52px; top: 11px; font-size: .8rem; white-space: nowrap; color: #e9d8b6; text-shadow: 0 1px 4px #000; }
@media (min-width: 901px) {
  body.sheet-collapsed #sidebar-character, body.rolls-collapsed #sidebar-rolls { display: none; }
  body.sheet-collapsed .main-layout { grid-template-columns: minmax(0, 1fr) 265px; }
  body.rolls-collapsed .main-layout { grid-template-columns: 265px minmax(0, 1fr); }
  body.sheet-collapsed.rolls-collapsed .main-layout { grid-template-columns: minmax(0, 1fr); }
  .lobby-mode .public-lobby { padding: clamp(24px, 3vw, 44px); }
}
@media (max-width: 900px) {
  .app-container { height: var(--app-visible-height, 100dvh); }
  .scene-tools { padding: 5px 10px; }
  .scene-tools > button { display: none; }
  .scene-tools:has(#experience-conditions[hidden]) { display: none; }
  .game-context-bar { padding: 5px 11px; font-size: .72rem; gap: 4px 10px; }
  .desktop-support-label { display: none; }
  .adventure-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adventure-filters select { font-size: 16px; }
  .how-measures { grid-template-columns: 1fr; }
  .welcome-actions > button { flex: 1; min-width: 0; }
  .experience-card { padding: 20px 16px; }
  .experience-card .character-form-grid { grid-template-columns: 1fr; }
  .experience-card input { font-size: 16px; }
  .modal-overlay { height: var(--app-visible-height, 100dvh); }
  .keyboard-open .console-controls { max-height: 78px; overflow-y: auto; }
  .keyboard-open .action-console { padding-top: 7px; padding-bottom: 7px; }
  .keyboard-open .mobile-nav { padding-top: 3px; padding-bottom: 3px; }
  .keyboard-open .mobile-nav-btn { min-height: 32px; }
}

.start-search-options { margin-top: 18px; color: var(--text-muted); }
.start-search-options summary { cursor: pointer; margin-bottom: 12px; }
.start-search-options > label { display: block; margin: 10px 0; }
.start-search-options > select { max-width: 120px; }
@media (max-width: 900px) { .modal-card { max-height: calc(var(--app-visible-height, 100dvh) - 24px); } }

#experience-preferences { padding-top: 10px; margin-top: 18px; border-top: 1px solid #665d48; }
#experience-preferences select { width: 100%; margin: 10px 0; padding: 11px; }
#experience-preferences button { margin: 6px 0 14px; }
#companion-preference-fields { margin-top: 16px; }

/* Quiet inline help; the transparent hit area extends beyond the small circle. */
.info-help, .media-help {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; min-width: 18px; flex-shrink: 0; padding: 0;
  border: 1px solid #cfb37b55; border-radius: 50%; background: #34291c26;
  color: #d9c7a2c2; font: 600 11px/1 Georgia, serif; vertical-align: middle;
  box-shadow: none; cursor: help;
}
.info-help { margin: 0 4px; }
.info-help::before, .media-help::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; }
.info-help:hover, .media-help:hover, .info-help[aria-expanded="true"], .media-help[aria-expanded="true"] {
  border-color: #cfb37b99; background: #59402540; color: #efdab4;
}
.info-help:focus-visible, .media-help:focus-visible { outline: 1px solid #d8ba82; outline-offset: 3px; color: #efdab4; }
.context-help-tooltip{position:fixed;z-index:2000;padding:12px 14px;box-sizing:border-box;border:1px solid #b58d4b;border-radius:8px;background:#17151bf7;color:#fff0d9;font-size:14px;line-height:1.5;box-shadow:0 8px 28px #0009;pointer-events:none;}
.cancel-btn{color:#ffd2d2 !important;border:1px solid #bb6464 !important;background:#5b2d354d !important;border-radius:7px;padding:9px 16px !important;}
.cancel-btn:hover,.cancel-btn:focus-visible{background:#70384299 !important;outline-color:#efa3a3;}
.rules-settings{padding:12px;margin:12px 0;border:1px solid #a07d414f;border-radius:10px;background:#191720a8;}
.rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.rules-field{display:block;min-width:0;}.rules-field select,.rules-field input{display:block;width:100%;margin-top:6px;box-sizing:border-box;}.rules-field[hidden]{display:none;}.native-hunger{color:#ffb0aa;}.active-rules-label{font-size:13px;color:#e6c281;margin:4px 14px;}@media(max-width:430px){.rules-grid{grid-template-columns:1fr;}.info-help,.media-help{width:20px;height:20px;min-width:20px;font-size:12px;}}

.media-controls{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:6px 0;min-width:0;}.media-controls audio{width:100%;max-width:100%;}.media-controls p,.media-controls h4{flex-basis:100%;margin:4px 0;font-size:13px;line-height:1.45;}.media-btn{font-size:12px;padding:6px 8px;}.media-controls img{max-width:100%;max-height:260px;object-fit:contain;}.native-character-panel{margin:8px 0;padding:8px;background:#17141bcc;border:1px solid #bd974450;border-radius:8px;}.native-character-panel .rules-grid{grid-template-columns:1fr;}.native-character-panel summary{font-size:13px;color:#e4c48b;cursor:pointer;}#rules-advice-sources{padding-left:20px;}#rules-advice-sources a{color:#f0cf88;overflow-wrap:anywhere;}#rules-advice-question{width:100%;box-sizing:border-box;}

.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}.progression-panel{margin:14px 0;padding:12px;border:1px solid #ad864b55;border-radius:10px;background:#19151edf;}.progression-panel summary{cursor:pointer;color:#efd299;font-weight:600;}.progression-result{grid-column:1/-1;font-weight:600;color:#ffe7b3;}#progression-bots{grid-column:1/-1;font-size:13px;line-height:1.5;}.media-help-tip{position:absolute;z-index:30;bottom:calc(100% + 8px);right:0;width:min(300px,75vw);box-sizing:border-box;padding:12px;border:1px solid #b58d4b;border-radius:8px;background:#17151bf7;color:#fff0d9;white-space:normal;text-align:left;font:14px/1.5 sans-serif;box-shadow:0 8px 28px #0009;}.media-help-tip[hidden]{display:none;}

.v5-native-vitals{margin:10px 0;padding:10px;border:1px solid #a856646b;border-radius:8px;background:#29171ea3;}.v5-native-vitals h4,.v5-native-vitals p{margin:7px 0;font-size:13px;line-height:1.5;}.v5-health-track{display:flex;flex-wrap:wrap;gap:5px;}.v5-health-track span{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border:1px solid #957476;border-radius:3px;color:#e6c9bc;font-weight:bold;}.v5-health-track [data-damage="superficial"]{background:#6a4a2680;color:#ffd696;}.v5-health-track [data-damage="aggravated"]{background:#862b3a94;color:#ffd2d2;}.native-turn-controls{margin:8px 0;font-size:13px;line-height:1.5;}.native-turn-controls button{width:100%;} .vital-bars[hidden]{display:none!important;}

.bot-party-panel{padding:10px;margin:9px 0;border:1px solid #b5944d55;border-radius:8px;background:#1b1720c7;}.bot-party-panel h4{margin:4px 0;font-size:14px;}.bot-party-panel p,.bot-party-panel ul{font-size:13px;line-height:1.5;}.bot-party-panel ul{padding-left:18px;}.bot-party-panel .secondary-btn{width:100%;}.bot-party-panel[hidden]{display:none!important;}

/* Three compact mobile tools occupy distinct slots above the action controls. */
@media (max-width: 900px) {
  .table-picker { left: calc(max(12px, env(safe-area-inset-left)) + 56px); right: auto; max-width: calc(100vw - 24px); }
  #table-picker-toggle { width: 48px; min-height: 44px; height: 44px; margin-left: 0; padding: 6px; font-size: .76rem; white-space: nowrap; }
  #table-picker-toggle[data-importance="important"] { border-color: #d9b56e; }
  #table-picker-toggle[data-importance="critical"] { border-color: #d18080; color: #ffd6d6; }
  .table-picker.picker-open { left: max(12px, env(safe-area-inset-left)); width: min(260px, calc(100vw - 24px)); }
  .table-picker.picker-open #table-picker-toggle { margin-left: 56px; }
  #table-picker-list { max-height: var(--table-picker-list-height, 45dvh); overflow-y: auto; overscroll-behavior: contain; }
}

@media (max-width: 900px) {
  .table-picker { display: flex; flex-direction: column; }
  #table-picker-list { order: 0; }
  #table-picker-toggle { order: 1; flex-shrink: 0; }
  #table-picker-notice { order: -1; }
  .table-picker.picker-open #table-picker-toggle { color: #ffd6d6; background: #742f3e; border-color: #bf6b7a; }
}

/* Character assistance remains a lightweight, editable draft. */
.character-assistance { padding: 14px; margin: 14px 0 20px; border: 1px solid #c39b5433; border-radius: 10px; background: #18252977; }
.character-assistance h4 { margin: 0 0 8px; color: #ebcd96; font-size: 16px; }
.character-assistance .empty-note { margin: 6px 0 10px; }
.character-assistance textarea { width: 100%; box-sizing: border-box; resize: vertical; padding: 12px; background: #101c21; color: var(--text-main); border: 1px solid #49504c; border-radius: 5px; font: inherit; }
.character-assistance textarea::placeholder { color: #a4aaa7; opacity: 1; }
.character-assistance textarea:focus { outline: 1px solid var(--primary-accent); border-color: var(--primary-accent); }
.character-assistance-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.character-assistance-actions button { min-height: 42px; }
#character-assistance-status:empty { display: none; }
.character-wizard-card [aria-busy="true"] input, .character-wizard-card [aria-busy="true"] textarea, .character-wizard-card [aria-busy="true"] select { opacity: .7; }
@media (max-width: 420px) { .character-assistance textarea { font-size: 16px; } .character-assistance { padding: 12px; } .character-assistance-actions { align-items: stretch; flex-direction: column; } }

/* A common document editor for every character reference. */
.character-sheet-selectors { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.character-sheet-selectors select { width:100%;box-sizing:border-box;min-width:0; }
.sheet-document-toolbar { display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 8px; }
.sheet-document-toolbar [role="tablist"] { display:flex;gap:5px; }
.sheet-text-editor label { display:block;margin:8px 0; }
#character-sheet-document { width:100%;box-sizing:border-box;min-height:360px;resize:vertical;padding:14px;background:#122024;color:#e9e3d7;border:1px solid #817453;border-radius:7px;font:13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2; }
.sheet-document-preview { min-height:360px;padding:16px;background:#152126;border:1px solid #817453;border-radius:7px;overflow-wrap:anywhere; }
.sheet-document-preview h3,.sheet-document-preview h4 { color:#e7c693;margin:16px 0 8px; }
.sheet-document-preview p { margin:3px 0;white-space:pre-wrap;font-size:14px;line-height:1.6; }
.sheet-document-parameter { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
#character-legacy-txt pre { white-space:pre-wrap;overflow-wrap:anywhere;background:#142025;padding:12px;font-size:12px; }
@media(max-width:600px) { .character-sheet-selectors{grid-template-columns:1fr;gap:5px;}#character-sheet-document{font-size:12px;padding:10px;min-height:300px;}.sheet-document-toolbar{align-items:flex-start;}.sheet-document-toolbar>button{font-size:12px;} }

/* Rules reference and learned knowledge remain read-only advisory views. */
.rules-help-overlay { z-index: 1600; }
.rules-help-card { max-width: 760px; }
.rules-help-card textarea { font-size: 16px; }
.rules-help-card select { width: 100%; min-height: 42px; padding: 10px; }
.rules-help-close { color: #dfa7a3; border: 1px solid #a84a424d; border-radius: 5px; padding: 6px 12px; }
.rules-help-origin { color: #ddbd83; font-size: 13px; margin-top: 18px; }
.rules-help-answer { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; margin: 12px 0; }
.rules-help-index-row { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; padding: 10px 0; border-bottom: 1px solid #b59c6133; }
.rules-help-index-row button { text-align: left; }
.rules-help-index-row small { color: #b9c1b8; }
.rules-help-document { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 14px; line-height: 1.6; background: #101c2177; border-radius: 8px; padding: 14px; }
.rules-help-document:empty, #rules-help-origin:empty, #rules-help-answer:empty, #rules-help-status:empty { display: none; }
#rules-help-sources { padding-left: 20px; font-size: 13px; overflow-wrap: anywhere; line-height: 1.6; }
@media (max-width: 420px) { .rules-help-card .character-form-grid { grid-template-columns: 1fr; } }

.character-assistance label { display:block;line-height:1.5; }

.sheet-document-preview .sheet-document-parameter { display:flex;align-items:baseline;gap:8px;font-family:inherit;border-bottom:1px solid #8f7a4226;padding:5px 0; }
.sheet-document-parameter>span { flex:1;min-width:0; }
.sheet-document-parameter>strong { color:#e8c681; }
.sheet-document-parameter>small { color:#bab0a0;font-size:11px; }
.sheet-document-preview h5 { color:#d7bc8c;font-size:13px;letter-spacing:.03em;margin:16px 0 4px; }
.preparation-card { max-width: 940px; }
.preparation-card input:not([type="checkbox"]), .preparation-card textarea, .preparation-card select { max-width: 100%; width: 100%; }
.preparation-card > section { margin: 18px 0; }
.preparation-proposals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.preparation-proposal { text-align: left; color: var(--text-main); background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px; overflow-wrap: anywhere; }
.preparation-proposal.is-selected { border-color: var(--primary-accent); box-shadow: 0 0 0 1px var(--primary-accent); }
.preparation-proposal p { margin-top: 8px; font-size: .85rem; line-height: 1.5; }
#preparation-summary p { margin: 10px 0; overflow-wrap: anywhere; }
@media (max-width: 650px) { .preparation-proposals { grid-template-columns: 1fr; } .preparation-card .character-form-grid { grid-template-columns: 1fr; } }
.preparation-proposal > img { width: 100%; height: 105px; object-fit: cover; border-radius: 6px; margin-bottom: 10px; }
.preparation-proposal details { margin-top: 8px; font-size: .85rem; }
@media (max-width:650px) { .preparation-proposal > img { height: 85px; } }
.mastering-panel { padding: 10px 16px; background: var(--bg-card); border-bottom: 1px solid var(--border-color); max-height: 48dvh; overflow-y: auto; }
.mastering-panel summary { cursor: pointer; }
.mastering-ticket { margin: 12px 0; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; overflow-wrap: anywhere; }
.mastering-ticket label { display: block; font-size: .85rem; margin-top: 8px; }
.mastering-ticket textarea { width: 100%; max-width: 100%; }
.mastering-ticket .modal-actions { flex-wrap: wrap; }
#mastering-player-status { padding: 8px 16px; color: var(--text-muted); font-size: .85rem; }
.mastering-suggestion { margin-top: 10px; font-size: .85rem; }

/* The active scene takes precedence over account settings and optional tools. */
.session-menu { position:relative; flex-shrink:0; }
.session-menu summary { list-style:none; cursor:pointer; padding:9px 13px; min-height:38px; border:1px solid #827051; background:#202b2c; color:#f2dbb2; border-radius:2px 7px; font-size:.8rem; }
.session-menu summary::-webkit-details-marker { display:none; }
.session-menu-content { position:absolute; right:0; top:calc(100% + 9px); z-index:80; width:260px; padding:15px; display:flex; flex-direction:column; align-items:stretch; gap:10px; border:1px solid #8a7451; background:#172326; border-radius:3px 9px; box-shadow:0 10px 25px #0007; }
.session-menu-content button { text-align:left; }
.session-menu-content .locale-control { justify-content:space-between; }
.session-library-details { margin:0 0 16px; font-size:.8rem; color:#d5c19d; }
.session-library-details > summary { cursor:pointer; padding:10px 0; }
.session-library-details #sheet-create-character-btn { margin:10px 0; }
body:not(.lobby-mode) #campaign-presence { display:none; }
body:not(.lobby-mode) .brand-subtitle { display:none; }
body:not(.lobby-mode) .game-header { padding-top:10px; padding-bottom:10px; gap:8px 14px; }
body:not(.lobby-mode) .game-header .system-status { display:flex; width:auto; }
body:not(.lobby-mode) .chat-help { font-size:.76rem; margin:6px 0; }
body:not(.lobby-mode) #social-chats > .chat-help:not([role="status"]) { display:none; }
body.single-chat #chat-panel-2 { display:none; }
.second-chat-toggle { padding:5px 8px; min-height:32px; color:#bbbcaf; border:1px solid #45504b; font-size:.74rem; }
#chat-refresh-participants { min-height:28px; font-size:.7rem; padding:4px 0; }
.chat-destination { font-size:.75rem; color:#d6c39b; }
body:not(.lobby-mode) .chat-panel { padding-top:8px; }
body:not(.lobby-mode) .chat-panel > label { margin-bottom:5px; }
body:not(.lobby-mode) .chat-viewport { background:rgb(10 20 25 / 68%); }
body:not(.lobby-mode) .mastering-panel { flex-shrink:0; padding:8px 14px; max-height:34dvh; }
.mastering-panel summary { color:#e8ca95; font-size:.84rem; }
.session-guidance { flex-shrink:0; display:flex; flex-wrap:wrap; align-items:center; gap:7px 12px; padding:9px 14px; background:#19272b; border-bottom:1px solid #6b5b42; }
.session-guidance p { font-size:.8rem; line-height:1.5; margin:0; }
.session-master-mode { color:#d7c099; font-size:.75rem; }
#session-next-step { flex:1; min-width:150px; }
#session-next-action { font-size:.76rem; min-height:36px; padding:8px 12px; }
.composer-mode-controls { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.composer-mode-controls button { font-size:.8rem; min-height:36px; padding:7px 12px; border:1px solid #576259; background:#1a272b; color:#dad7ca; border-radius:3px 8px; cursor:pointer; }
.composer-mode-controls button[aria-pressed="true"] { background:#3b3425; color:#ffe4ad; border-color:#c7a66d; }
#action-details { margin-bottom:8px; font-size:.76rem; color:#c7c6b6; }
#action-details > summary { cursor:pointer; padding:6px 0; }
#composer-privacy-note { font-size:.74rem; line-height:1.45; margin:7px 0; color:#bbbcad; }
.next-step-highlight:not(:disabled) { border-color:#e5bf77; outline:1px solid #c9a2637d; outline-offset:2px; animation:next-step-glow 1.6s ease-in-out 3; }
@keyframes next-step-glow { 50% { box-shadow:0 0 0 3px #d9b56e36,0 0 13px #d9b56e40; } }
@media (prefers-reduced-motion:reduce) { .next-step-highlight:not(:disabled) { animation:none; } }
/* Microphones share the composer row; previews and errors remain visible below it. */
body:not(.lobby-mode) .console-input-row { display:grid; grid-template-columns:minmax(0,1fr) 38px auto; align-items:center; gap:8px; }
body:not(.lobby-mode) #action-media-controls, body:not(.lobby-mode) #action-media-controls .media-controls { display:contents; }
body:not(.lobby-mode) #action-input { grid-column:1; grid-row:1; padding-right:10px; }
body:not(.lobby-mode) #send-action-btn { grid-column:3; grid-row:1; }
body:not(.lobby-mode) #action-media-controls [data-media-label="record"] { grid-column:2; grid-row:1; }
body:not(.lobby-mode) #action-media-controls .media-controls > :not([data-media-label="record"]):not([hidden]) { grid-column:1/-1; }
[data-media-label="record"] { font-size:0; width:36px; min-height:36px; padding:5px; border:1px solid #687566; border-radius:50%; background:#223234; color:#e9d8b2; }
[data-media-label="record"]::before { content:'🎙'; font-size:19px; line-height:1; }
.session-chat-composer { display:grid; grid-template-columns:minmax(0,1fr) 38px; align-items:center; gap:7px; }
.session-chat-composer textarea { grid-column:1/-1; grid-row:1; padding-right:46px; }
.session-chat-composer .media-controls { display:contents; }
.session-chat-composer [data-media-label="record"] { grid-column:2; grid-row:1; margin-right:3px; justify-self:end; }
.session-chat-composer > [id^="chat-send-"] { grid-column:1/-1; justify-self:end; }
.session-chat-composer .media-controls > :not([data-media-label="record"]):not([hidden]) { grid-column:1/-1; }
.media-controls p:empty, .voice-note-list:empty { display:none; }
#narration-media-controls { flex-shrink:0; padding:0 12px; }
#narration-media-controls .media-controls { padding:3px 0; }
#narration-media-controls .media-btn { min-height:28px; padding:4px 8px; }
body:not(.lobby-mode) .desktop-support-label { display:none; }
@media (min-width:901px) {
  body:not(.lobby-mode) .action-console { padding:5px 20px; }
  body:not(.lobby-mode) .composer-mode-controls { margin-bottom:5px; }
  body:not(.lobby-mode) .composer-mode-controls button { min-height:32px; padding:5px 12px; }
  body:not(.lobby-mode) #action-details { margin-bottom:2px; }
  body:not(.lobby-mode) #action-details > summary { padding:3px 0; }
  body:not(.lobby-mode) #composer-privacy-note { margin:3px 0; }
  body:not(.lobby-mode) .console-input-row input { padding-top:10px; padding-bottom:10px; }
  body:not(.lobby-mode) .game-header .campaign-info { flex:1; flex-wrap:nowrap; }
  body:not(.lobby-mode) .game-header .brand { margin-right:6px; }
  body:not(.lobby-mode) #campaign-title { max-width:clamp(160px,24vw,380px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  body:not(.lobby-mode) #round-badge { display:none; }
  body:not(.lobby-mode) .main-layout { grid-template-columns:minmax(190px,220px) minmax(0,1fr) minmax(215px,250px); gap:12px; padding:12px; }
  body:not(.lobby-mode).sheet-collapsed .main-layout { grid-template-columns:minmax(0,1fr) 250px; }
  body:not(.lobby-mode).rolls-collapsed .main-layout { grid-template-columns:220px minmax(0,1fr); }
  body:not(.lobby-mode).sheet-collapsed.rolls-collapsed .main-layout { grid-template-columns:minmax(0,1fr); }
  body:not(.lobby-mode) .sidebar { padding:14px 12px 80px; }
  body:not(.lobby-mode) .attributes-grid { grid-template-columns:minmax(0,1fr); }
  body:not(.lobby-mode) .table-picker { bottom:72px; max-width:220px; }
}
/* One compact table strip keeps the next step visible and secondary details optional. */
.session-toolbar { flex-shrink:0; display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; padding:5px 10px; background:#142127; border-bottom:1px solid #6b5b425c; position:relative; }
.session-toolbar .scene-tools { padding:0; border:0; background:none; gap:2px; }
.session-toolbar .scene-tools .text-btn { min-height:28px; padding:4px 6px; font-size:.72rem; }
.session-toolbar #game-context-bar { padding:2px 0; gap:4px 10px; font-size:.7rem; border:0; background:none; }
.session-toolbar #game-context-bar strong { font-size:.68rem; }
.session-toolbar #game-context-bar > span:has(#experience-clock) > strong { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.session-toolbar .session-guidance { flex:1 0 100%; padding:4px 0 2px; gap:4px 8px; border:0; background:none; min-width:0; }
.session-toolbar #session-next-step { font-size:.74rem; line-height:1.4; min-width:120px; }
.session-toolbar #session-next-action { font-size:.72rem; min-height:30px; padding:5px 9px; }
.session-table-info { position:relative; }
.session-table-info > summary { cursor:pointer; list-style:none; color:#c9b68f; opacity:.8; padding:4px; font-size:16px; line-height:1; }
.session-table-info > summary::-webkit-details-marker { display:none; }
.session-table-info-content { position:absolute; right:0; top:calc(100% + 6px); z-index:50; width:min(290px,calc(100vw - 30px)); display:flex; flex-direction:column; gap:12px; padding:14px; background:#17252a; border:1px solid #766449; border-radius:6px; box-shadow:0 8px 20px #0008; font-size:.75rem; line-height:1.5; }
.session-toolbar .scene-tools #narration-media-controls { margin-left:0; }
.session-toolbar #narration-media-controls .media-btn { width:28px; min-height:28px; padding:3px; font-size:0; }
.session-toolbar #narration-media-controls [data-media-label="listen"]::before { content:'🔊'; font-size:15px; }
.session-toolbar #narration-media-controls [data-media-label="pause"]::before { content:'■'; font-size:15px; }
.mastering-modal-card { width:min(560px,calc(100vw - 24px)); max-height:88dvh; padding:18px; }
.mastering-modal-card #mastering-panel { padding:0; max-height:none; border:0; background:none; overflow:visible; }
.mastering-modal-card .mastering-ticket { padding:10px 0; margin:10px 0; border:0; border-top:1px solid #6b5b425c; border-radius:0; }
.mastering-modal-card .mastering-ticket h4 { font-size:.85rem; margin-bottom:8px; }
.mastering-modal-card .mastering-ticket p { font-size:.85rem; line-height:1.55; }
.mastering-modal-card [data-master-advanced],.mastering-modal-card [data-master-reject-details] { margin-top:12px; font-size:.76rem; color:#c1bba9; }
.mastering-modal-card textarea { background:#142027; min-height:65px; padding:8px; color:var(--text-main); border:1px solid #50594f; border-radius:4px; }
.mastering-modal-card .modal-actions { margin-top:14px; gap:8px; }
.mastering-modal-card #mastering-details > .privacy-note,.mastering-modal-card #mastering-refresh-btn { display:none; }
.scene-context-card { padding:12px 14px; border:1px solid #78644988; border-radius:6px; background:#17252ddd; color:#dfd8c7; font-size:.83rem; line-height:1.65; }
.scene-context-card > summary { cursor:pointer; color:#e4c691; font-size:.78rem; }
.scene-context-card p { margin-top:8px; white-space:pre-line; }
.round-story-heading { color:#dfc698; font-size:.75rem; line-height:1.5; margin-bottom:10px; }
.round-story-narration { white-space:pre-line; max-width:74ch; overflow-wrap:anywhere; }
.round-story-narration .narrative-paragraph { font-weight:400; margin:0; }
.round-story-narration .narrative-paragraph + .narrative-paragraph { margin-top:.85em; }
.narrative-actor { color:var(--actor-color,#dfc698); font-weight:650; }
.narrative-dialogue { color:#eee4d2; font-weight:500; }
.message-playback { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:9px; }
.message-playback-button { display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:3px 7px; border:1px solid #ad966c55; border-radius:7px 3px; background:#20313999; color:#ddccab; font:inherit; font-size:.72rem; line-height:1.3; cursor:pointer; }
.message-playback-button svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.message-playback-button:hover { border-color:#c6a66a; color:#f4dfb5; background:#354248cc; }
.message-playback-button[data-playback-state="playing"] { border-color:#c6a66a; color:#f4dfb5; background:#54463677; }
.message-playback-button:focus-visible { outline:2px solid #e6c782; outline-offset:2px; }
.message-playback-status { max-width:100%; color:#e4b6b1; font-size:.72rem; overflow-wrap:anywhere; }
.message-playback-status:empty { display:none; }
.character-current-scene,.round-story-locations { font-size:.78rem;line-height:1.4;color:#d4c4a6;opacity:.82;margin:5px 0 8px;overflow-wrap:anywhere; }
#turn-feedback-controls { grid-column:1/-1; justify-self:end; width:min(260px,100%); margin-inline-start:auto; }
#turn-feedback-controls:has(.turn-feedback[hidden]) { display:none; }
.turn-feedback { padding:5px 8px; border:1px solid #ad966c44; border-radius:7px 3px; background:#203039c9; color:#e2d3b9; }
.turn-feedback[hidden] { display:none; }
.turn-feedback-heading { display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap; font-size:.68rem; line-height:1.45; }
.turn-feedback-label { font-weight:600; }
.turn-feedback-estimate { color:#bbbfb4; font-size:.6rem; }
.turn-feedback-track { height:4px; margin-top:4px; border-radius:3px; overflow:hidden; background:#b6ab8840; }
.turn-feedback-fill { display:block; height:100%; background:#c8a76a; transition:width .4s ease; }
.turn-feedback[data-state="completed"] .turn-feedback-fill { background:#88baa1; }
.turn-feedback[data-state="failed"] .turn-feedback-label { color:#edb4b1; }
@media(prefers-reduced-motion:reduce) { .turn-feedback-fill { transition:none; } }
.round-story-details { margin-top:14px; padding-top:9px; border-top:1px solid #86704c44; color:#bdbbad; font-size:.74rem; line-height:1.55; }
.round-story-details > summary { cursor:pointer; color:#cbbb9d; }
.round-story-details p { margin-top:8px; }
.master-response { min-width:0; color:#e4dfd2; overflow-wrap:anywhere; }
.master-response-scene { max-width:68ch; font-family:var(--font-story); font-size:1.02em; line-height:1.75; }
.master-response p + p { margin-top:.8em; }
.master-response-options { margin-top:1em; }
.master-response-options h4 { margin-bottom:.45em; color:#dfc99f; font-size:.8em; font-weight:600; letter-spacing:.015em; }
.master-response ol,.master-response ul { padding-left:1.35em; margin-top:.45em; }
.master-response li { padding-left:.25em; margin:.4em 0; }
.master-response li::marker { color:#bba781; }
.master-response details { margin-top:.75em; color:#c4c8be; font-size:.86em; }
.master-response summary { cursor:pointer; width:fit-content; max-width:100%; min-height:30px; padding:5px 0; color:#bdc4b8; }
.master-response details[open] > p { margin-top:.45em; }
.master-response summary:focus-visible { outline:1px solid #d4b77c; outline-offset:3px; border-radius:2px; }
.aux-message .master-response-scene { font-family:inherit; font-size:1em; line-height:1.65; }
@media(max-width:900px) {
 .session-toolbar { padding:4px 8px; gap:0 5px; }
 .session-toolbar .scene-tools { min-height:26px; }
 .session-toolbar #game-context-bar { margin-left:auto; gap:3px 6px; }
 .session-toolbar #game-context-bar strong { display:none; }
 .session-toolbar .session-guidance { padding:4px 0 2px; }
 .session-toolbar #session-next-step { font-size:.7rem; }
 .session-toolbar #session-next-action { min-height:29px; font-size:.68rem; padding:5px 7px; }
 .mastering-modal-card { padding:13px; }
}
@media (max-width:900px) {
  .session-menu { display:none; }
  body:not(.lobby-mode) .game-header { padding:8px 12px; }
  .session-guidance { padding:6px 10px; gap:4px 8px; }
  .session-guidance p { font-size:.73rem; }
  #session-next-action { min-height:34px; font-size:.72rem; padding:6px 8px; }
  body:not(.lobby-mode) .console-input-row { grid-template-columns:minmax(0,1fr) 38px; }
  body:not(.lobby-mode) #send-action-btn { grid-column:1/-1; grid-row:2; justify-self:stretch; }
  #composer-privacy-note { font-size:.69rem; }
  .session-chat-composer textarea { font-size:16px; }
  .composer-mode-controls button { flex:1; }
}
body:not(.lobby-mode) #action-media-controls .media-help, .session-chat-composer .media-help { display:none; }
body:not(.lobby-mode) .console-input-row > .info-help { grid-column:1; grid-row:1; justify-self:end; margin-right:7px; }
body:not(.lobby-mode) #action-input { padding-right:30px; }
#experience-conditions.no-conditions { display:none; }
.scene-tools #narration-media-controls { margin-left:auto; padding:0; }
#game-context-bar .active-rules-label { font-size:.73rem; line-height:1.4; margin:0; color:#dfc595; }
@media (max-width:900px) {
 .scene-tools:has(#narration-media-controls .media-controls) { display:flex; min-height:34px; }
 .scene-tools #narration-media-controls { margin-left:0; }
 .scene-tools #experience-conditions { font-size:.7rem; margin-left:auto; }
}

/* Decorative next-step dots distinguish a game action from optional assistance. */
.next-step-highlight:not(:disabled) { animation:none; outline:0; box-shadow:none; }
.has-action-guide { position:relative; }
.has-action-guide:not(.media-btn) { padding-inline-end:23px; }
.action-guide-dot { display:none; position:absolute; top:6px; right:7px; width:6px; height:6px; border-radius:50%; pointer-events:none; }
button[data-action-priority="primary"]:not(:disabled):not([hidden]):not([aria-disabled="true"]):not([aria-busy="true"]) > .action-guide-dot { display:block; background:#e1b66a; opacity:.96; box-shadow:0 0 0 2px #d9b56e20; animation:action-guide-primary 1.6s ease-in-out 3; }
button[data-action-priority="secondary"]:not(:disabled):not([hidden]):not([aria-disabled="true"]):not([aria-busy="true"]) > .action-guide-dot { display:block; background:#ad9c7e; opacity:.52; animation:action-guide-secondary 3s ease-in-out 2; }
.media-btn > .action-guide-dot { top:3px; right:2px; }
button:disabled > .action-guide-dot,button[aria-disabled="true"] > .action-guide-dot,button[aria-busy="true"] > .action-guide-dot,[aria-busy="true"] button > .action-guide-dot { display:none!important; animation:none!important; }
@keyframes action-guide-primary { 50% { opacity:.78; box-shadow:0 0 0 4px #d9b56e12,0 0 9px #e2bc7a66; } }
@keyframes action-guide-secondary { 50% { opacity:.68; box-shadow:0 0 5px #bead9026; } }
body.no-message-effects .action-guide-dot { animation:none!important; }
@media(prefers-reduced-motion:reduce) { .action-guide-dot { animation:none!important; } }

/* Optional device speech stays compact beside table controls. */
body.lobby-mode #narration-media-controls { display:none; }
.auto-audio-controls { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; max-width:100%; }
.auto-audio-toggle { display:inline-flex; align-items:center; gap:5px; min-height:28px; padding:4px 7px; border:1px solid #ac91674a; border-radius:5px; color:#d7c4a2; background:#23353acc; font:inherit; font-size:.7rem; cursor:pointer; }
.auto-audio-toggle[aria-pressed="true"] { color:#e9d8a8; border-color:#c9a66a9c; background:#3c3b2bcc; }
.auto-audio-toggle:focus-visible { outline:2px solid #c9a66a; outline-offset:2px; }
.auto-audio-state { font-size:.62rem; opacity:.8; }
.auto-audio-status { color:#ddcaaa; font-size:.7rem; line-height:1.3; max-width:230px; }
@media(max-width:600px) { .auto-audio-toggle { font-size:.66rem; padding:4px 5px; } .auto-audio-state { display:none; } }

/* Narrow desktops keep the audio toggle visible without adding bulky strip padding. */
@media(min-width:901px) and (max-width:1199px) {
 .session-toolbar { padding-block:3px; }
 .session-toolbar .session-guidance { padding-block:2px 0; }
}