[hidden] { display: none !important; }
:root {
  --arena-app-height: 100dvh;
  --arena-app-width: 100vw;
  color-scheme: dark;
  --bg: #080b10;
  --panel: rgba(18, 24, 34, 0.82);
  --stroke: rgba(255,255,255,0.12);
  --text: #eef5ff;
  --muted: #9fb0c7;
  --accent: #87d37c;
  --danger: #b275ff;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, Segoe UI, Arial, sans-serif;
  background: #070a0e;
  color: var(--text);
}
header {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--stroke);
  background: rgba(8,11,16,.7);
  backdrop-filter: blur(18px);
}
h1 { margin: 0; font-size: 24px; letter-spacing: 0; }
p { margin: 4px 0 0; color: var(--muted); }
#statusPill { padding: 8px 13px; border: 1px solid var(--stroke); border-radius: 999px; background: rgba(255,255,255,.06); color: var(--muted); }
main {
  --left: 330px;
  --right: 470px;
  display: grid;
  grid-template-columns: var(--left) 8px minmax(360px, 1fr) 8px var(--right);
  gap: 8px;
  padding: 12px;
  height: calc(100vh - 76px);
}
.mapPanel, aside .card { border: 1px solid var(--stroke); background: var(--panel); border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.mapPanel { position: relative; overflow: hidden; min-height: 0; }
.leftRail, .rightRail { display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: hidden; }
.resizeHandle {
  cursor: col-resize;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}
.resizeHandle:hover { background: rgba(135,211,124,.2); }
#scene { width: 100%; height: 100%; }
#scene canvas { display: block; width: 100%; height: 100%; }
.viewerStatus {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  max-width: min(520px, calc(100% - 32px));
  padding: 16px 18px;
  border: 1px solid rgba(159, 176, 199, .36);
  border-radius: 12px;
  background: rgba(5, 8, 12, .82);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  color: var(--text);
  text-align: center;
  backdrop-filter: blur(14px);
  pointer-events: auto;
}
.viewerStatus a, .viewerStatus button { pointer-events: auto; }
#scene canvas { pointer-events: auto; }
.shellRecoveryPanel { position: fixed; right: 16px; bottom: 16px; z-index: 80; max-width: min(640px, calc(100vw - 32px)); max-height: min(70vh, 620px); overflow: auto; margin: 0; }
.shellRecoveryPanel[hidden] { display: none; }
.shellRecoveryPanel .adminLink { display: inline-block; margin: 4px 6px 4px 0; }
.viewerStatus[hidden] { display: none; }
.viewerStatus strong { display: block; font-size: 15px; margin-bottom: 5px; }
.viewerStatus span { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; }
.viewerStatus.error { border-color: rgba(255,107,107,.68); background: rgba(35, 8, 12, .88); }
.viewerStatus.warn { border-color: rgba(255,209,102,.68); background: rgba(35, 28, 8, .88); }
.viewerStatus.compact {
  left: 50%;
  top: 58px;
  transform: translateX(-50%);
  max-width: min(760px, calc(100% - 130px));
  padding: 8px 12px;
  border-radius: 999px;
  text-align: left;
  pointer-events: none;
}
.viewerStatus.compact strong { display: inline; margin: 0 8px 0 0; font-size: 12px; }
.viewerStatus.compact span, .viewerStatus.compact .renderDiagnosticLine { display: inline; font-size: 11px; }
.viewerStatus.compact .loadGrid { display: none; }
.viewerFreshness {
  position: absolute;
  right: 12px;
  top: 54px;
  z-index: 7;
  padding: 7px 10px;
  border: 1px solid rgba(126,231,135,.42);
  border-radius: 999px;
  background: rgba(5, 8, 12, .74);
  color: var(--text);
  font-size: 11px;
  line-height: 1.2;
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.viewerFreshness.stale, .viewerFreshness.warning { border-color: rgba(255,209,102,.68); }

.loadGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; text-align: left; }
.loadTask { position: relative; overflow: hidden; min-height: 54px; padding: 8px; border: 1px solid rgba(159,176,199,.22); border-radius: 9px; background: rgba(255,255,255,.045); }
.loadTask div { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.loadTask b { color: var(--text); font-size: 12px; }
.loadTask em { color: var(--muted); font-size: 10px; font-style: normal; text-transform: uppercase; letter-spacing: .08em; }
.loadTask span { min-height: 14px; margin-top: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loadTask i { position: absolute; left: 0; bottom: 0; width: var(--p); height: 3px; background: linear-gradient(90deg, #66d9ef, #87d37c); transition: width .22s ease; }
.loadTask[data-status="running"] i { width: 72%; animation: loadPulse 1.1s ease-in-out infinite alternate; }
.loadTask[data-status="done"] { border-color: rgba(126,231,135,.42); }
.loadTask[data-status="error"] { border-color: rgba(255,209,102,.55); }
.loadTask[data-status="error"] i { background: #ffd166; }
@keyframes loadPulse { from { opacity: .55; } to { opacity: 1; } }
@media (max-width: 760px) { .loadGrid { grid-template-columns: 1fr; } }

.skeletonText {
  min-height: 44px;
  padding: 10px;
  border: 1px dashed rgba(159,176,199,.22);
  border-radius: 8px;
  color: var(--muted);
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.08), rgba(255,255,255,.04));
  background-size: 220% 100%;
  animation: skeletonShimmer 1.2s ease-in-out infinite;
}
.skeletonGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.skeletonGrid div { min-height: 88px; border-radius: 10px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 220% 100%; animation: skeletonShimmer 1.2s ease-in-out infinite; }
@keyframes skeletonShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
body:not(.appBooting) .skeletonText, body:not(.appBooting) .skeletonGrid { animation: none; }

.adminUnlock {
  height: 34px;
  border: 1px solid rgba(102,217,239,.42);
  border-radius: 7px;
  background: rgba(102,217,239,.10);
  color: var(--text);
  cursor: pointer;
}
.adminLocked { display: none; }
.adminUnlocked { display: block; }

#cameraHud { position: absolute; left: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--stroke); border-radius: 8px; background: rgba(5,8,12,.76); backdrop-filter: blur(12px); }
#cameraHud button { height: 32px; padding: 0 10px; border: 1px solid var(--stroke); border-radius: 6px; background: rgba(255,255,255,.08); color: var(--text); cursor: pointer; }
#cameraHud label { display: flex; align-items: center; gap: 5px; height: 32px; color: var(--muted); font-size: 13px; }
.legend { position: absolute; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 12px; border: 1px solid var(--stroke); border-radius: 8px; background: rgba(0,0,0,.48); backdrop-filter: blur(12px); color: var(--muted); font-size: 13px; }
.legend b { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.safe { background: #ffffff; }
.storm { background: #a46bff; }
.bot { background: #ffdf6b; }
.vision { background: #f3cf53; }
.sound { background: #66d9ef; }
.trust { background: #7ee787; }
.resource { background: #50d890; }
.card { padding: 16px; }
.card h2 { margin: 0 0 12px; font-size: 15px; color: #d8e5f8; text-transform: uppercase; letter-spacing: .08em; }
.admin form { display: grid; gap: 10px; }
.admin label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.admin input, .admin select {
  width: 100%;
  height: 32px;
  border: 1px solid var(--stroke);
  border-radius: 6px;
  background: rgba(255,255,255,.07);
  color: var(--text);
  padding: 0 9px;
}
.partyAdmin { display:grid; gap:8px; border:1px solid rgba(255,209,102,.35); border-radius:10px; padding:10px; }
.partyToggle { grid-template-columns:auto 1fr!important; align-items:center; }
.partyToggle input { width:auto; }
.partyBudgetRow { display:grid; grid-template-columns:1fr 100px auto; gap:6px; align-items:center; margin:6px 0; }
.partyQr img { width:min(240px,100%); background:#fff; padding:8px; border-radius:10px; }
.partyIdleFeed { position:absolute; z-index:18; top:72px; right:18px; width:min(390px,calc(100% - 36px)); display:grid; gap:8px; pointer-events:none; }
.partyIdleFeed section { padding:12px; border:1px solid rgba(255,255,255,.2); border-radius:14px; background:rgba(9,12,20,.84); backdrop-filter:blur(12px); box-shadow:0 12px 32px rgba(0,0,0,.35); }
.partyIdleFeed h3 { margin:0 0 7px; color:#ffd166; }
.partyIdleFeed p { margin:3px 0; font-size:12px; }
.fieldGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fieldHint { color: var(--muted); font-size: 11px; line-height: 1.35; opacity: .85; }
.customLiveMs[data-locked="true"] { opacity: .62; }
.customLiveMs[data-locked="true"] input { cursor: not-allowed; }
#restartMatch {
  height: 36px;
  border: 1px solid rgba(135,211,124,.55);
  border-radius: 6px;
  background: rgba(135,211,124,.14);
  color: var(--text);
  cursor: pointer;
}
#restartMatch:active, .mobileAdminSetup .danger:active { transform: translateY(1px) scale(.98); filter: brightness(1.18); }
#restartMatch.restartPending, .mobileAdminSetup .danger.restartPending, .mobileAdminConfirm .danger.restartPending {
  position: relative;
  background: linear-gradient(90deg, #f97316, #ef4444, #f97316);
  background-size: 200% 100%;
  animation: restartPulse .85s linear infinite;
  box-shadow: 0 0 0 3px rgba(249,115,22,.25), 0 0 22px rgba(239,68,68,.35);
}
body.restartInProgress .arenaCanvasWrap, body.restartInProgress #mapPanel { opacity: .45; filter: saturate(.45); }
@keyframes restartPulse { from { background-position: 0 0; } to { background-position: 200% 0; } }
.restartStatus { min-height: 1.35em; margin: 0; color: var(--muted); font-size: 12px; }
.restartStatus p { margin: 0 0 6px; }
.restartStatus[data-state="pending"] { color: #ffd166; }
.restartStatus[data-state="success"] { color: #87d37c; }
.restartStatus[data-state="error"] { color: #ff8b8b; }
.restartVerification { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; color: var(--muted); }
.restartVerification li { display: grid; gap: 2px; padding: 6px 8px; border: 1px solid var(--stroke); border-radius: 8px; background: rgba(255,255,255,.04); }
.restartVerification li strong { color: var(--text); font-size: 12px; }
.restartVerification li small { color: var(--muted); overflow-wrap: anywhere; }
.restartVerification li[data-verification-state="pending"] strong { color: #ffd166; }
.restartVerification li[data-verification-state="success"] strong { color: #87d37c; }
.restartVerification li[data-verification-state="warning"] strong { color: #ffd166; }
.restartVerification li[data-verification-state="error"] strong { color: #ff8b8b; }
.tributesCard { flex: 1; min-height: 0; }
#botList { display: grid; gap: 8px; max-height: 100%; overflow: auto; }
.botRow { width: 100%; padding: 10px; border: 1px solid var(--stroke); border-radius: 8px; background: rgba(255,255,255,.045); color: var(--text); text-align: left; cursor: pointer; }
.botRow.selected { border-color: rgba(255,223,107,.75); background: rgba(255,223,107,.11); }
.botRow.dead { opacity: .45; }
.botRow strong { display: flex; justify-content: space-between; font-size: 14px; }
.bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.bar i { display: block; height: 100%; background: currentColor; }
.events { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.discordPreview { flex: 1; }
.eventTools { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.eventTools a {
  display: grid;
  place-items: center;
  height: 30px;
  border: 1px solid var(--stroke);
  border-radius: 6px;
  background: rgba(255,255,255,.07);
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
}
#events, #discordEvents { display: flex; flex-direction: column-reverse; gap: 8px; overflow: auto; min-height: 0; flex: 1; }
.event { border-left: 3px solid rgba(255,255,255,.28); padding: 8px 10px; background: rgba(255,255,255,.045); border-radius: 10px; color: #dce8f8; font-size: 13px; }
.event br { content: ""; display: block; margin: 4px 0; }
.event[data-importance="5"] { border-left-color: #ff6b6b; }
.event[data-importance="4"] { border-left-color: #ffd166; }
.event.grouped { border-left-color: #66d9ef; }
@media (max-width: 1180px) {
  main { grid-template-columns: 1fr; height: auto; }
  .resizeHandle { display: none; }
  .mapPanel { height: 65vh; order: 1; }
  .leftRail { order: 2; }
  .rightRail { order: 3; min-height: 75vh; }
}
.relationshipCard { min-height: 0; }
#relationshipTitle { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
#relationshipGraph { display: block; width: 100%; aspect-ratio: 320 / 270; border: 1px solid var(--stroke); border-radius: 6px; background: rgba(3, 7, 10, .42); }
.relationship-edge { fill: none; stroke-linecap: round; }
.relationship-node { cursor: pointer; }
.relationship-node text { fill: #eef5ff; font: 10px system-ui; text-anchor: middle; pointer-events: none; }
.relationship-center text { font: 12px system-ui; font-weight: 700; }
#relationshipDetails { display: grid; gap: 4px; max-height: 120px; overflow: auto; margin-top: 8px; }
.relationshipRow { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 5px 6px; border-left: 3px solid var(--stroke); background: rgba(255,255,255,.04); color: var(--muted); font-size: 11px; }
.relationshipRow strong { color: var(--text); }
.relationshipRow[data-state="ally"] { border-left-color: #7ee787; }
.relationshipRow[data-state="friendly"] { border-left-color: #66d9ef; }
.relationshipRow[data-state="fractured"] { border-left-color: #ffd166; }
.relationshipRow[data-state="enemy"] { border-left-color: #ff6b6b; }
.relationshipHeader { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.relationshipHeader h2 { margin-bottom: 8px; }
.relationshipModes { display: flex; gap: 4px; }
.relationshipModes button { height: 26px; border: 1px solid var(--stroke); border-radius: 5px; background: rgba(255,255,255,.06); color: var(--muted); font-size: 11px; cursor: pointer; }
.relationshipModes button.active { border-color: rgba(126,231,135,.7); background: rgba(126,231,135,.16); color: var(--text); }
.global-node circle { stroke: rgba(255,255,255,.72); stroke-width: 1; }
.global-node text { fill: #eef5ff; font: 9px system-ui; text-anchor: middle; pointer-events: none; }
.relationshipCard.fullscreen {
  position: fixed;
  inset: 18px;
  z-index: 50;
  padding: 18px;
  background: rgba(8, 12, 18, .98);
  box-shadow: 0 24px 80px rgba(0,0,0,.72);
}
.relationshipCard.fullscreen #relationshipGraph { height: calc(100vh - 170px); aspect-ratio: auto; cursor: grab; }
.relationshipCard.fullscreen #relationshipGraph:active { cursor: grabbing; }
.relationshipCard.fullscreen #relationshipDetails { max-height: 100px; }
.relationshipCard.fullscreen .relationshipModes { gap: 7px; }

.leftRail { overflow: auto; align-content: start; padding-right: 2px; }
.railPanel { flex: 0 0 auto; min-height: 0; padding: 0; overflow: hidden; }
.railPanel > summary {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  color: #d8e5f8;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  list-style: none;
}
.railPanel > summary::-webkit-details-marker { display: none; }
.railPanel > summary::after { content: '+'; margin-left: auto; color: var(--muted); font-size: 17px; font-weight: 400; }
.railPanel[open] > summary { border-bottom: 1px solid var(--stroke); }
.railPanel[open] > summary::after { content: '-'; }
.panelBody { padding: 12px; }
.tributesCard { flex: 0 0 auto; }
.tributesCard #botList { max-height: min(48vh, 520px); overflow: auto; }
.relationshipCard .relationshipModes { justify-content: flex-end; margin-bottom: 8px; }
.relationshipCard.fullscreen { display: block; }
.relationshipCard.fullscreen > summary { display: none; }
.relationshipCard.fullscreen > .panelBody { padding: 0; }
.setupCommands { display: grid; gap: 8px; }
#openBotLab { height: 34px; border: 1px solid rgba(102,217,239,.55); border-radius: 6px; background: rgba(102,217,239,.12); color: var(--text); cursor: pointer; }
.botLab { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; border: 0; padding: 0; background: #0a0f16; color: var(--text); }
.botLab::backdrop { background: rgba(0,0,0,.7); }
.botLabShell { height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.botLabHeader, .botLabFooter { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 22px; border-bottom:1px solid var(--stroke); background:#0d141e; }
.botLabHeader h2 { margin:0; font-size:18px; letter-spacing:0; text-transform:none; }
.botLabHeader p { margin:4px 0 0; font-size:13px; }
.botLabActions, .botLabFooter > div { display:flex; gap:8px; align-items:center; }
.botLab button, .fileButton { height:34px; padding:0 11px; border:1px solid var(--stroke); border-radius:6px; background:rgba(255,255,255,.07); color:var(--text); cursor:pointer; display:inline-flex; align-items:center; font:inherit; font-size:12px; }
.fileButton input { display:none; }
#botLabRestart { border-color:rgba(135,211,124,.65); background:rgba(135,211,124,.16); }
.botLabMain { min-height:0; display:grid; grid-template-columns:280px minmax(0,1fr); }
.botLabRoster { overflow:auto; padding:12px; border-right:1px solid var(--stroke); background:#0b1119; display:grid; align-content:start; gap:7px; }
.botLabRoster button { width:100%; justify-content:space-between; text-align:left; }
.botLabRoster button.active { border-color:#66d9ef; background:rgba(102,217,239,.14); }
.botLabEditor { overflow:auto; padding:24px; }
.botLabIdentity { padding-bottom:16px; border-bottom:1px solid var(--stroke); }
.botLabIdentity h3 { margin:0; font-size:22px; }
.botLabIdentity p { margin:5px 0 0; }
.tuneName { display:grid; gap:7px; max-width:420px; color:var(--muted); font-size:12px; }
.tuneName input { width:100%; box-sizing:border-box; border:1px solid var(--stroke); border-radius:6px; padding:9px 10px; background:#080d14; color:var(--text); font:inherit; font-size:16px; }
.tuneName input:focus { outline:2px solid rgba(102,217,239,.45); border-color:#66d9ef; }
.botLabFields { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; padding-top:18px; }
.tuneGroup { border:1px solid var(--stroke); border-radius:7px; padding:13px; background:rgba(255,255,255,.025); }
.tuneGroup h4 { margin:0 0 10px; color:#d8e5f8; font-size:13px; text-transform:uppercase; letter-spacing:.06em; }
.tuneRow { display:grid; grid-template-columns:110px 1fr 58px; gap:9px; align-items:center; padding:5px 0; color:var(--muted); font-size:12px; }
.tuneRow input[type=range] { width:100%; accent-color:#66d9ef; }
.tuneValue { color:var(--text); text-align:right; font-variant-numeric:tabular-nums; }
.traitGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.traitGrid label { color:var(--muted); font-size:12px; }
.botLabFooter { border-top:1px solid var(--stroke); border-bottom:0; }
#botLabStatus { color:var(--muted); font-size:12px; }
.botLabImportPreview { margin:0 18px 12px; padding:12px; border:1px solid #52677f; border-radius:8px; background:#111c29; font-size:12px; line-height:1.5; }
.botLabImportPreview strong { color:#eef5fb; }
@media (max-width: 760px) { .botLabHeader { align-items:flex-start; flex-direction:column; } .botLabMain { grid-template-columns:1fr; } .botLabRoster { grid-template-columns:repeat(2,minmax(0,1fr)); border-right:0; border-bottom:1px solid var(--stroke); max-height:190px; } .botLabEditor { padding:14px; } .botLabFields { grid-template-columns:1fr; } }.discordKpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:10px; }
.discordKpis span { border:1px solid var(--stroke); border-radius:7px; padding:7px; color:var(--muted); font-size:11px; background:rgba(255,255,255,.04); }
.discordKpis strong { display:block; color:var(--text); font-size:13px; }
.discordKpis .good { border-color:rgba(126,231,135,.45); }
.discordKpis .warn { border-color:rgba(255,209,102,.55); }
.discordKpis .bad { border-color:rgba(255,107,107,.55); }
.queueWarning { margin-bottom:8px; padding:8px; border:1px solid rgba(255,107,107,.6); border-radius:7px; color:#ffd1d1; background:rgba(255,107,107,.12); font-size:12px; }
.queueControls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:9px; }
.queueControls button { min-height:30px; border:1px solid var(--stroke); border-radius:6px; background:rgba(255,255,255,.07); color:var(--text); cursor:pointer; font-size:12px; }
.delayState { margin-bottom:9px; color:var(--muted); font-size:12px; }
.queueLists { display:grid; gap:10px; max-height:520px; overflow:auto; padding-right:2px; }
.queueSection { display:grid; gap:6px; }
.queueSection h3 { margin:0; display:flex; justify-content:space-between; color:#d8e5f8; font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.emptyQueue { margin:0; color:var(--muted); font-size:12px; }
.queueItem { border-left:3px solid rgba(255,255,255,.28); border-radius:8px; padding:8px; background:rgba(255,255,255,.045); font-size:12px; }
.queueItem[data-status="sent"] { border-left-color:#7ee787; }
.queueItem[data-status="failed"], .queueItem[data-status="retrying"] { border-left-color:#ff6b6b; }
.queueItem strong { display:flex; justify-content:space-between; gap:8px; color:var(--text); }
.queueItem em { color:var(--muted); font-style:normal; }
.queueItem small { display:block; margin-top:4px; color:var(--muted); }
.queueItem p { margin-top:6px; color:#dce8f8; font-size:12px; }

.queueDiscordEmbed { display:grid; grid-template-columns:4px minmax(0,1fr); column-gap:10px; margin-top:8px; padding:10px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:#313338; color:#dbdee1; line-height:1.35; }
.queueDiscordEmbed::before { content:''; grid-row:1 / span 4; border-radius:8px; background:var(--discord-embed-color, #5865f2); }
.queueDiscordEmbed b { display:block; margin:0 0 6px; color:#f2f3f5; font-size:13px; }
.queueDiscordEmbed p { margin:3px 0; color:#dbdee1; font-size:12px; }
.queueDiscordEmbed strong { display:inline; color:#fff; }
.queueDiscordEmbed em { color:#dbdee1; font-style:italic; }
.queueDiscordEmbed code { border-radius:4px; padding:1px 4px; background:#1e1f22; color:#f2f3f5; }
.queueDiscordEmbed blockquote { margin:6px 0; padding-left:9px; border-left:4px solid #4e5058; color:#b5bac1; }

.queueError { color:#ffd1d1 !important; }
.playerIntel { flex: 0 0 auto; min-height: 0; display: grid; gap: 10px; padding: 14px; background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035)); backdrop-filter: blur(22px); }
.playerIntelHeader { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.playerIntelHeader h2 { margin-bottom:4px; }
.playerIntelHeader p { font-size:12px; }
#playerIntelCount { padding:5px 9px; border:1px solid var(--stroke); border-radius:999px; color:var(--muted); font-size:11px; white-space:nowrap; background:rgba(255,255,255,.06); }
#playerIntelGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:8px; max-height:190px; overflow:auto; padding-right:2px; }
.playerTile { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:7px; align-items:center; border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:8px; color:var(--text); background:rgba(255,255,255,.06); cursor:pointer; box-shadow:inset 0 1px rgba(255,255,255,.08); }
.playerTile.selected { border-color:var(--botColor); background:color-mix(in srgb, var(--botColor) 18%, rgba(255,255,255,.07)); }
.playerTile.dead { opacity:.48; }
.playerSwatch { width:12px; height:32px; border-radius:999px; background:var(--botColor); box-shadow:0 0 18px color-mix(in srgb, var(--botColor) 55%, transparent); }
.playerTileMain { min-width:0; }
.playerTileMain strong, .playerTileMain small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.playerTileMain strong { font-size:12px; }
.playerTileMain small { color:var(--muted); font-size:10px; margin-top:2px; }
.playerVitals { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.playerVitals span { text-align:center; border-radius:999px; padding:3px 4px; background:rgba(0,0,0,.22); color:#dce8f8; font-size:10px; font-variant-numeric:tabular-nums; }
#playerIntelDetail { max-height:430px; overflow:auto; }
.playerDetail { border:1px solid rgba(255,255,255,.13); border-radius:20px; padding:12px; background:radial-gradient(circle at top left, color-mix(in srgb, var(--botColor) 22%, transparent), transparent 34%), rgba(6,9,14,.58); }
.playerDetail header { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.playerPortrait { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:var(--botColor); color:#071018; font-weight:800; box-shadow:0 10px 28px color-mix(in srgb, var(--botColor) 35%, transparent); }
.playerDetail h3 { margin:0; font-size:17px; }
.playerDetail p { font-size:12px; }
.statGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.statCard { border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:7px; background:rgba(255,255,255,.055); }
.statCard span { color:var(--muted); font-size:10px; }
.statCard strong { display:block; margin:2px 0 5px; font-size:12px; font-variant-numeric:tabular-nums; }
.inventoryPanel, .relationshipIntel { margin-top:10px; display:grid; gap:7px; }
.sectionTitle { display:flex; justify-content:space-between; gap:8px; align-items:center; color:var(--muted); font-size:11px; }
.sectionTitle strong { color:var(--text); font-size:12px; }
.capacityBar { display:flex; flex-wrap:wrap; gap:3px; }
.capacityBar i { width:10px; height:10px; border-radius:3px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.08); }
.capacityBar i.used { background:var(--botColor); }
.capacityBar em { color:var(--muted); font-size:10px; }
.inventoryItems { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:6px; }
.inventoryItem, .relationshipChip, .compactFacts span { border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:7px; background:rgba(255,255,255,.055); }
.inventoryItem strong, .inventoryItem small { display:block; font-size:11px; }
.inventoryItem small, .relationshipChip span, .emptyInventory { color:var(--muted); font-size:10px; }
.compactFacts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:10px; color:#dce8f8; font-size:11px; }
.relationshipChip { display:grid; gap:2px; border-left:3px solid var(--stroke); }
.relationshipChip[data-state="ally"] { border-left-color:#7ee787; }
.relationshipChip[data-state="friendly"] { border-left-color:#66d9ef; }
.relationshipChip[data-state="fractured"] { border-left-color:#ffd166; }
.relationshipChip[data-state="enemy"] { border-left-color:#ff6b6b; }
.relationshipChip strong { font-size:11px; }
@media (max-width: 1180px) { #playerIntelGrid { max-height:260px; } #playerIntelDetail { max-height:none; } }

.panelChrome {
  position: absolute;
  z-index: 4;
  right: 12px;
  top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: rgba(5,8,12,.76);
  backdrop-filter: blur(12px);
  color: #d8e5f8;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.panelActions, .playerIntelTools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.panelActions button, .playerIntelTools button {
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--stroke);
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  color: var(--text);
  cursor: pointer;
  font-size: 11px;
}
.panelActions button:hover, .playerIntelTools button:hover { border-color: rgba(135,211,124,.55); background: rgba(135,211,124,.14); }
.mapPanel.fullscreen, .playerIntel.fullscreen {
  position: fixed;
  inset: 18px;
  z-index: 60;
  min-height: 0;
  background: rgba(8, 12, 18, .98);
  box-shadow: 0 24px 80px rgba(0,0,0,.72);
}
.mapPanel.fullscreen { border-radius: 10px; }
.mapPanel.collapsed {
  min-height: 54px;
  height: 54px;
}
.mapPanel.collapsed #scene, .mapPanel.collapsed #cameraHud, .mapPanel.collapsed .legend { display: none; }
.mapPanel.collapsed .panelChrome { left: 12px; justify-content: space-between; }
.playerIntelTools { min-width: 0; }
.playerIntel.fullscreen {
  display: grid;
  grid-template-rows: auto minmax(150px, 34vh) minmax(0, 1fr);
  padding: 18px;
}
.playerIntel.fullscreen #playerIntelGrid { max-height: none; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.playerIntel.fullscreen #playerIntelDetail { max-height: none; min-height: 0; }
.playerIntel.collapsed { padding: 12px 14px; }
.playerIntel.collapsed #playerIntelGrid, .playerIntel.collapsed #playerIntelDetail { display: none; }
.playerIntel.collapsed .playerIntelHeader { align-items: center; }
@media (max-width: 1180px) {
  .mapPanel.collapsed { height: 54px; }
  .panelChrome { left: 12px; right: 12px; justify-content: space-between; }
}
.adminLink {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(102,217,239,.42);
  border-radius: 7px;
  background: rgba(102,217,239,.10);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}
.maintenanceBody main.maintenanceLayout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  height: calc(100vh - 76px);
  padding: 12px;
}
.maintenanceControls { display: grid; gap: 12px; align-content: start; }
.maintenanceControls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.maintenanceControls input, .maintenanceControls select { height: 34px; border: 1px solid var(--stroke); border-radius: 6px; background: rgba(255,255,255,.07); color: var(--text); padding: 0 9px; }
.maintenanceButtons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.maintenanceButtons button { height: 34px; border: 1px solid var(--stroke); border-radius: 6px; background: rgba(255,255,255,.08); color: var(--text); cursor: pointer; }
.maintenanceLogCard { min-width: 0; overflow: hidden; }
.maintenanceLogList { height: 100%; overflow: auto; display: grid; align-content: start; gap: 10px; }
.maintenanceEntry { border: 1px solid var(--stroke); border-left: 4px solid #66d9ef; border-radius: 8px; background: rgba(255,255,255,.045); padding: 10px; }
.maintenanceEntry.warn { border-left-color: #ffd166; }
.maintenanceEntry.error { border-left-color: #ff6b6b; background: rgba(255,107,107,.07); }
.maintenanceEntry header { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--muted); font-size: 12px; }
.maintenanceEntry header strong { color: var(--text); }
.maintenanceEntry pre { margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; color: #e7eefb; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.maintenanceTags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.maintenanceTags span { padding: 2px 7px; border-radius: 999px; background: rgba(135,211,124,.12); color: var(--muted); font-size: 11px; }
.emptyState { color: var(--muted); padding: 20px; text-align: center; }

body:has(#frontendDiagnostics), body[data-audit-mode="true"] {
  --audit-animation-duration: 0.001ms;
}
body:has(#frontendDiagnostics) *,
body[data-audit-mode="true"] * {
  animation-duration: var(--audit-animation-duration, initial) !important;
  transition-duration: var(--audit-animation-duration, initial) !important;
}
.frontendDiagnostics pre {
  max-height: 20rem;
  overflow: auto;
  white-space: pre-wrap;
}

:root {
  --arena-app-height: 100dvh;
  --arena-app-width: 100vw;
  --glass-surface: rgba(10, 16, 24, .58);
  --glass-opaque: rgba(9, 13, 20, .94);
  --glass-blur: 18px;
  --glass-border: rgba(255,255,255,.18);
  --glass-highlight: rgba(255,255,255,.28);
  --glass-shadow: 0 18px 46px rgba(0,0,0,.38);
  --pill-radius: 999px;
  --card-radius: 20px;
  --sheet-radius: 26px;
  --viewer-gap: 10px;
  --tribute-accent: #ffdf6b;
  --state-alive: #7ee787;
  --state-danger: #ff6b6b;
  --state-warning: #ffd166;
  --motion-duration: 220ms;
  --motion-easing: cubic-bezier(.2,.8,.2,1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --touch-target: 44px;
}
#scene canvas { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#viewExplore { border-color: rgba(102,217,239,.45); }
.viewerShell { position:absolute; inset:0; z-index:12; pointer-events:none; color:var(--text); text-shadow:0 1px 2px rgba(0,0,0,.45); }
.viewerShell button { min-height:var(--touch-target); color:var(--text); border:1px solid var(--glass-border); background:var(--glass-surface); border-radius:16px; backdrop-filter:blur(var(--glass-blur)); box-shadow:var(--glass-shadow); pointer-events:auto; cursor:pointer; }
.viewerHudTop { position:absolute; top:calc(10px + var(--safe-top)); left:calc(10px + var(--safe-left)); right:calc(10px + var(--safe-right)); display:grid; grid-template-columns:1fr auto 48px; gap:8px; align-items:start; pointer-events:none; }
.glassPill { border-radius:var(--pill-radius)!important; padding:0 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700; }
.glassPill.status { justify-self:start; max-width:min(34vw, 240px); color:var(--state-alive); }
.glassPill.mode { justify-self:center; max-width:min(46vw, 360px); border-color:color-mix(in srgb, var(--tribute-accent) 50%, var(--glass-border)); }
.glassPill.overflow { width:48px; padding:0; }
.viewerEdgeHandles { position:absolute; top:50%; left:calc(8px + var(--safe-left)); right:calc(8px + var(--safe-right)); display:flex; justify-content:space-between; pointer-events:none; }
.viewerEdgeHandles button { writing-mode:vertical-rl; min-width:36px; min-height:82px; opacity:.72; }
.tributeCarousel { position:absolute; left:calc(12px + var(--safe-left)); right:calc(12px + var(--safe-right)); bottom:calc(12px + var(--safe-bottom)); display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:8px; align-items:center; pointer-events:none; }
.carouselTrack { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; pointer-events:auto; scrollbar-width:none; }
.carouselTrack::-webkit-scrollbar { display:none; }
.tributeCard { flex:0 0 min(360px, 74vw); scroll-snap-align:center; display:grid; gap:3px; text-align:left; padding:11px 14px; border-radius:var(--card-radius)!important; border-color:color-mix(in srgb, var(--tribute-accent) 45%, var(--glass-border))!important; }
.tributeCard b, .tributeCard span, .tributeCard small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tributeCard.active { box-shadow:0 0 0 1px var(--tribute-accent), 0 18px 46px rgba(0,0,0,.42); }
.carouselPosition { position:absolute; right:54px; bottom:calc(100% + 4px); font-size:12px; color:var(--muted); background:var(--glass-surface); border:1px solid var(--glass-border); border-radius:999px; padding:3px 8px; backdrop-filter:blur(var(--glass-blur)); }
.surfaceScrim { position:absolute; inset:0; background:rgba(0,0,0,.16); pointer-events:auto; }
.adaptiveSurface { position:absolute; z-index:2; left:calc(10px + var(--safe-left)); right:calc(10px + var(--safe-right)); bottom:calc(10px + var(--safe-bottom)); max-height:min(72dvh, 620px); display:grid; grid-template-rows:auto minmax(0,1fr); border:1px solid var(--glass-border); border-radius:var(--sheet-radius) var(--sheet-radius) 20px 20px; background:var(--glass-surface); backdrop-filter:blur(var(--glass-blur)); box-shadow:var(--glass-shadow); overflow:hidden; pointer-events:auto; }
.adaptiveSurface[hidden], .surfaceScrim[hidden] { display:none; }
.adaptiveSurface header, .adaptiveSurface .surfaceHeader { min-height:54px; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; grid-template-rows:22px 1fr; align-items:center; gap:0 8px; padding:6px 12px 8px; border-bottom:1px solid var(--glass-border); position:sticky; top:0; z-index:2; background:linear-gradient(180deg, rgba(8,13,20,.96), rgba(8,13,20,.72)); }
.surfaceGrabZone { grid-column:1 / -1; min-height:44px; display:grid; place-items:center; touch-action:none; cursor:grab; }
.surfaceGrabZone:active { cursor:grabbing; }
.surfaceGrabHandle { width:52px; height:6px; border-radius:999px; background:rgba(238,246,255,.76); box-shadow:0 1px 0 rgba(255,255,255,.28), 0 0 0 1px rgba(0,0,0,.18); }
.adaptiveSurface .surfaceTitle { grid-column:2; justify-self:center; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.surfaceClose { width:44px; min-height:44px; font-size:22px; }
.surfaceBody { display:grid; gap:8px; padding:12px; overflow:auto; }
.surfaceBody button, .tributeRow { display:grid; grid-template-columns:auto 1fr; gap:4px 9px; align-items:center; text-align:left; padding:9px 12px; min-height:48px; }
.tributeRow span { width:12px; height:32px; border-radius:999px; background:var(--tribute-accent); grid-row:1 / span 2; }
.tributeRow small { color:var(--muted); }
.chasedTributeDead .glassPill.mode { border-color:var(--state-danger); }
.viewerFocusMode > .desktopAppHeader, .viewerFocusMode .leftRail, .viewerFocusMode .rightRail, .viewerFocusMode .resizeHandle { display:none; }
.viewerFocusMode main { height:var(--arena-app-height); grid-template-columns:1fr; padding:0; }
.viewerFocusMode .mapPanel { border-radius:0; border:0; }
@supports not ((backdrop-filter: blur(1px))) { .viewerShell button, .adaptiveSurface, .carouselPosition { background:var(--glass-opaque); } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) { .viewerShell button, .adaptiveSurface, .carouselPosition { background:var(--glass-opaque); backdrop-filter:none; text-shadow:none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } }
@media (hover: hover) and (pointer: fine) and (min-width: 1181px) { .viewerShell { opacity:0; transition:opacity var(--motion-duration) var(--motion-easing); } .mapPanel:hover .viewerShell, .viewerFocusMode .viewerShell { opacity:1; } }
@media (max-width: 1180px), (pointer: coarse) {
  html, body { min-height:var(--arena-app-height); overscroll-behavior-y:none; }
  body > .desktopAppHeader { display:none; }
  main { height:var(--arena-app-height); min-height:var(--arena-app-height); padding:0; display:block; }
  .leftRail, .rightRail, .resizeHandle { display:none; }
  .mapPanel { width:100vw; height:var(--arena-app-height); min-height:var(--arena-app-height); border:0; border-radius:0; }
  #cameraHud, .legend, .viewerFreshness, .arenaMiniMap { display:none; }
  .viewerStatus.compact { top:calc(62px + var(--safe-top)); max-width:calc(100% - 24px); }
  .viewerShell { pointer-events:none; }
}
@media (orientation: landscape) and (max-height: 640px) {
  .adaptiveSurface { left:auto; width:min(420px, 44vw); top:calc(10px + var(--safe-top)); max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px); border-radius:var(--sheet-radius); }
  .tributeCarousel { left:calc(72px + var(--safe-left)); right:calc(470px + var(--safe-right)); }
}
/* Compact viewer shell correction: one mobile HUD, one card/sheet, no desktop chrome. */
html, body, #app, main, #mapPanel, #scene { width:100%; }
html, body, #app { min-height:var(--arena-app-height); margin:0; }
button, .viewerPill, .playerCard, .mobileViewerShell { touch-action: manipulation; }
.mobileViewerShell { position:absolute; inset:0; z-index:12; pointer-events:none; overscroll-behavior:contain; --z-hud:20; --z-card:30; --z-popover:40; --z-sheet:50; }
.mobileViewerShell .viewerHudTop { z-index:var(--z-hud); grid-template-columns:auto minmax(0,1fr) 48px; }
.mobileViewerShell .glassPill { touch-action:manipulation; }
.mobileViewerShell .mode { justify-self:stretch; display:flex; align-items:center; justify-content:center; gap:8px; }
.mobileViewerShell .swatch { width:11px; height:11px; border-radius:999px; box-shadow:0 0 0 2px rgba(255,255,255,.18); }
.mobileViewerShell .tributeCarousel { z-index:var(--z-card); grid-template-columns:44px minmax(0, 520px) 44px; justify-content:center; }
.mobileViewerShell .tributeCard { width:100%; min-height:92px; touch-action:pan-x manipulation; transform:translate3d(0,0,0); }
.mobileViewerShell .tributeCard .grab { justify-self:center; width:42px; height:4px; border-radius:999px; background:rgba(255,255,255,.42); }
.mobileViewerShell .surfaceScrim { z-index:calc(var(--z-sheet) - 1); }
.mobileViewerShell .adaptiveSurface { z-index:var(--z-sheet); touch-action:auto; }
.mobileViewerShell .surfaceBody .event { display:grid; grid-template-columns:1fr; border-left:4px solid var(--tribute-accent); }
.mobileViewerShell .tributeRow.selected { box-shadow:0 0 0 1px var(--tribute-accent), inset 0 0 0 1px rgba(255,255,255,.08); }
.mobileViewerShell .filterTabs { display:flex; gap:8px; }
.mobileViewerShell .filterTabs button { flex:1; }
@media (max-width: 1180px), (pointer: coarse) {
  html, body, #app, main, #mapPanel, #scene { width:100%; height:var(--arena-app-height); }
  body { overflow:hidden; background:#070a0e; }
  main { height:var(--arena-app-height); min-height:0; padding:0!important; margin:0!important; display:block!important; }
  .leftRail, .rightRail, .resizeHandle, body > .desktopAppHeader, #cameraHud, .legend, .viewerFreshness, .arenaMiniMap, .panelChrome, .panelControls, #playerIntelCollapse, #playerIntelFullscreen, #mapCollapse, #mapFullscreen { display:none!important; visibility:hidden!important; pointer-events:none!important; }
  .mapPanel { position:fixed!important; inset:0!important; width:100%!important; height:var(--arena-app-height)!important; min-height:0!important; max-width:none!important; padding:0!important; margin:0!important; border:0!important; border-radius:0!important; background:#070a0e; }
  #scene { position:fixed!important; inset:0!important; width:100%!important; height:var(--arena-app-height)!important; min-height:0!important; overflow:hidden!important; background:#070a0e; }
  #scene canvas { position:absolute!important; inset:0!important; width:100%!important; height:var(--arena-app-height)!important; display:block; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1181px) {
  .mobileViewerShell:not(.viewerFocus) { display:none; }
  body:not(.viewerFocusMode) .mobileViewerShell { display:none; }
}
.srOnly { 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; }
.mobileViewerShell .bottomToolbar { position:absolute; z-index:35; left:calc(12px + var(--safe-left)); right:calc(12px + var(--safe-right)); bottom:calc(10px + var(--safe-bottom)); min-height:52px; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; padding:5px; border:1px solid var(--glass-border); border-radius:999px; background:var(--glass-surface); backdrop-filter:blur(var(--glass-blur)); box-shadow:var(--glass-shadow); pointer-events:auto; touch-action:manipulation; }
.mobileViewerShell .bottomToolbar button { min-width:0; min-height:44px; display:flex; align-items:center; justify-content:center; gap:4px; padding:0 8px; border-radius:999px; box-shadow:none; font-size:12px; background:transparent; }
.mobileViewerShell .bottomToolbar button.active { background:color-mix(in srgb, var(--tribute-accent) 24%, rgba(255,255,255,.08)); border-color:color-mix(in srgb, var(--tribute-accent) 58%, var(--glass-border)); }
.mobileViewerShell .tributeCarousel { bottom:calc(72px + var(--safe-bottom)); }
.mobileViewerShell .adaptiveSurface { bottom:calc(72px + var(--safe-bottom)); max-height:min(70dvh, 620px); will-change:transform; }
.mobileViewerShell .surfaceScrim { opacity:0; transition:opacity var(--motion-duration) var(--motion-easing); }
.mobileViewerShell .tributeCard { will-change:transform; }
.mobileViewerShell .surfaceBody { touch-action:pan-y; overscroll-behavior:contain; }
.viewerPill, .playerCard, .bottomToolbar, button { touch-action:manipulation; }
@media (max-width: 1180px), (pointer: coarse) {
  /* Full-bleed mobile scene underlay: safe-area insets are reserved for HUD overlays only, never for canvas bounds. */
  html, body { margin:0!important; width:100%!important; height:var(--arena-app-height)!important; overflow:hidden!important; overscroll-behavior:none; position:fixed; inset:0; background:#070a0e; }
  main, #mapPanel, #scene { position:fixed!important; inset:0!important; width:100%!important; height:var(--arena-app-height)!important; min-height:0!important; max-width:none!important; overflow:hidden!important; }
  #mapPanel { padding:0!important; margin:0!important; border:0!important; border-radius:0!important; background:#070a0e; }
  #scene canvas { position:absolute!important; inset:0!important; width:100%!important; height:var(--arena-app-height)!important; touch-action:none; }
}
@media (orientation: landscape) and (max-height: 640px) {
  .mobileViewerShell .bottomToolbar { left:calc(12px + var(--safe-left)); right:auto; top:calc(72px + var(--safe-top)); bottom:calc(12px + var(--safe-bottom)); width:64px; grid-template-columns:1fr; border-radius:28px; }
  .mobileViewerShell .bottomToolbar button { flex-direction:column; font-size:10px; }
  .mobileViewerShell .tributeCarousel { left:calc(84px + var(--safe-left)); bottom:calc(12px + var(--safe-bottom)); right:calc(470px + var(--safe-right)); }
  .mobileViewerShell .adaptiveSurface { bottom:calc(12px + var(--safe-bottom)); }
}

/* Issue #195 mobile polish: full-bleed scene underlay, compact dock and notification banner. */
.viewerStatus.compact {
  top:calc(60px + var(--safe-top));
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:min(520px, calc(100dvw - var(--safe-left) - var(--safe-right) - 24px));
  padding:9px 13px 9px 10px;
  border-radius:999px;
  text-align:left;
  background:rgba(8, 13, 20, .76);
  backdrop-filter:blur(18px) saturate(1.25);
  pointer-events:none;
}
.viewerStatus.compact::before { content:""; width:22px; height:22px; flex:0 0 22px; border-radius:999px; background:radial-gradient(circle at 35% 35%, #fff, var(--tribute-accent, #ffd166) 38%, rgba(255,209,102,.2) 70%); box-shadow:0 0 18px rgba(255,209,102,.32); }
.viewerStatus.compact strong { display:block; margin:0; font-size:12px; line-height:1.1; }
.viewerStatus.compact span, .viewerStatus.compact .renderDiagnosticLine { display:block; font-size:11px; line-height:1.25; color:rgba(234,242,255,.76); }
.viewerStatus.compact.warn::before { background:radial-gradient(circle at 35% 35%, #fff, #ffd166 40%, rgba(255,209,102,.18) 72%); }
.viewerStatus.compact.error::before { background:radial-gradient(circle at 35% 35%, #fff, #ff6b6b 40%, rgba(255,107,107,.18) 72%); }
@media (max-width: 380px) { .viewerStatus.compact { left:calc(12px + var(--safe-left)); transform:none; border-radius:22px; max-width:calc(100dvw - var(--safe-left) - var(--safe-right) - 24px); } }

.mobileViewerShell { position:fixed; inset:0; }
.mobileViewerShell .bottomToolbar {
  left:50%; right:auto; transform:translateX(-50%); bottom:calc(10px + var(--safe-bottom));
  width:min(276px, calc(100dvw - var(--safe-left) - var(--safe-right) - 24px));
  min-height:58px; grid-template-columns:repeat(4, 1fr); gap:0; padding:7px;
  background:rgba(8,13,20,.56); backdrop-filter:blur(20px) saturate(1.3); overflow:visible; isolation:isolate;
  touch-action:none;
}
.mobileViewerShell .bottomToolbar .dockBubble { position:absolute; z-index:0; left:7px; top:7px; width:calc((100% - 14px)/4); height:44px; border-radius:999px; background:color-mix(in srgb, var(--tribute-accent) 28%, rgba(255,255,255,.13)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 26px rgba(0,0,0,.25); transform:translate3d(calc(max(var(--dock-index), var(--dock-hover)) * 100%),0,0); opacity:0; transition:transform var(--motion-duration) var(--motion-easing), opacity var(--motion-duration) var(--motion-easing); pointer-events:none; }
.mobileViewerShell .bottomToolbar:has(button.active) .dockBubble, .mobileViewerShell .bottomToolbar[style*="--dock-hover: 0"] .dockBubble, .mobileViewerShell .bottomToolbar[style*="--dock-hover: 1"] .dockBubble, .mobileViewerShell .bottomToolbar[style*="--dock-hover: 2"] .dockBubble, .mobileViewerShell .bottomToolbar[style*="--dock-hover: 3"] .dockBubble { opacity:1; }
.mobileViewerShell .bottomToolbar button { position:relative; z-index:1; min-width:44px; min-height:44px; width:100%; padding:0; border:0; background:transparent!important; box-shadow:none; color:rgba(238,246,255,.86); transition:transform 160ms ease, color 160ms ease; }
.mobileViewerShell .bottomToolbar button.active { color:#fff; border-color:transparent; }
.mobileViewerShell .bottomToolbar button:hover, .mobileViewerShell .bottomToolbar button:focus-visible { transform:translateY(-2px) scale(1.08); outline:2px solid color-mix(in srgb, var(--tribute-accent) 70%, #fff); outline-offset:2px; }
.mobileViewerShell .bottomToolbar svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mobileViewerShell .dockTooltip { position:absolute; z-index:45; left:50%; bottom:calc(76px + var(--safe-bottom)); transform:translateX(-50%); padding:6px 10px; border-radius:999px; border:1px solid var(--glass-border); background:rgba(8,13,20,.84); color:var(--text); font-size:12px; box-shadow:var(--glass-shadow); pointer-events:none; white-space:nowrap; }
.mobileViewerShell .tributeCard { touch-action:none; }
.mobileViewerShell .adaptiveSurface { transform:translate3d(0,92%,0); transform-origin:50% 100%; }
.mobileViewerShell .adaptiveSurface .playerDetail { opacity:var(--sheet-progress, 0); transform:translateY(calc((1 - var(--sheet-progress, 0)) * 12px)); transition:opacity var(--motion-duration) var(--motion-easing), transform var(--motion-duration) var(--motion-easing); }
@media (prefers-reduced-motion: reduce) { .mobileViewerShell .bottomToolbar button:hover, .mobileViewerShell .bottomToolbar button:focus-visible { transform:none; } .mobileViewerShell .bottomToolbar .dockBubble, .mobileViewerShell .adaptiveSurface, .mobileViewerShell .surfaceScrim { transition:none!important; } }
@supports not ((backdrop-filter: blur(1px))) { .mobileViewerShell .bottomToolbar, .mobileViewerShell .dockTooltip, .viewerStatus.compact { background:rgba(8,13,20,.94); } }
@media (orientation: landscape) and (max-height: 640px) {
  .mobileViewerShell .bottomToolbar { left:calc(12px + var(--safe-left)); transform:none; top:calc(72px + var(--safe-top)); bottom:calc(12px + var(--safe-bottom)); width:58px; grid-template-columns:1fr; grid-template-rows:repeat(4,1fr); border-radius:999px; }
  .mobileViewerShell .bottomToolbar .dockBubble { width:44px; height:calc((100% - 14px)/4); transform:translate3d(0, calc(max(var(--dock-index), var(--dock-hover)) * 100%), 0); }
  .mobileViewerShell .dockTooltip { left:calc(80px + var(--safe-left)); bottom:auto; top:calc(80px + var(--safe-top)); transform:none; }
}

.mobileViewerShell:not(.mobileProShell) .viewerHudTop {
  top:calc(10px + var(--safe-top));
  left:calc(10px + var(--safe-left));
  right:calc(10px + var(--safe-right));
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:auto auto;
  gap:8px;
  align-items:stretch;
}
.mobileViewerShell:not(.mobileProShell) .mobileHudStatusRow { display:grid; grid-template-columns:minmax(0, auto) minmax(0, 1fr); gap:8px; align-items:center; min-width:0; pointer-events:none; }
.mobileViewerShell:not(.mobileProShell) .status { justify-self:start; max-width:min(42vw, 160px); min-width:0; pointer-events:auto; }
.mobileViewerShell:not(.mobileProShell) .mode { justify-self:stretch; max-width:none; min-width:0; pointer-events:auto; }
.mobileViewerShell:not(.mobileProShell) .mode, .mobileViewerShell:not(.mobileProShell) .mode * { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mobileViewerShell:not(.mobileProShell) .cameraModeSelector { justify-self:stretch; justify-content:center; max-width:100%; }
@media (max-width: 360px) {
  .mobileViewerShell:not(.mobileProShell) .cameraModeSelector { justify-content:flex-start; }
  .mobileViewerShell:not(.mobileProShell) .cameraModeSelector button { padding:0 8px; font-size:11px; }
}
.mobileViewerShell:not(.mobileProShell) .tributeCarousel { bottom:calc(var(--mobile-dock-bottom) + 72px); }

/* Issue #198 mobile sheet completion and relationship/menu polish. */
.mobileViewerShell.majorSurfaceOpen .tributeCarousel,
.mobileViewerShell.majorSurfaceOpen .bottomToolbar,
.mobileViewerShell.majorSurfaceOpen .viewerHudTop .mode { opacity:0; transform:translateY(12px); pointer-events:none; visibility:hidden; }
.mobileViewerShell.majorSurfaceOpen .viewerHudTop .status { opacity:.82; }
.mobileViewerShell .adaptiveSurface[data-presentation="full-sheet"] { top:calc(24px + var(--safe-top)); bottom:calc(14px + var(--safe-bottom)); max-height:none; background:rgba(8,13,20,.94); backdrop-filter:blur(18px) saturate(1.15); border-radius:var(--sheet-radius) var(--sheet-radius) 18px 18px; }
.mobileViewerShell .adaptiveSurface[data-presentation="full-sheet"] .surfaceBody { padding-bottom:calc(18px + var(--safe-bottom)); }
.mobileViewerShell .relationshipTabs { display:grid; grid-template-columns:1fr auto auto; gap:8px; position:sticky; top:0; z-index:1; padding-bottom:8px; background:rgba(8,13,20,.94); }
.mobileViewerShell .relationshipTabs button.active { border-color:var(--tribute-accent); box-shadow:0 0 0 1px var(--tribute-accent); }
.mobileViewerShell .relationshipSummary, .mobileViewerShell .allianceCluster, .mobileViewerShell .moreSection { border:1px solid var(--glass-border); border-radius:16px; background:rgba(255,255,255,.055); padding:10px; display:grid; gap:8px; }
.mobileViewerShell .mobileGraphControls { display:flex; align-items:center; gap:8px; color:var(--muted); }
.mobileViewerShell .moreSection h3, .mobileViewerShell .allianceCluster h3 { margin:0; font-size:13px; color:#f3f7ff; }
.mobileViewerShell .mobileQualitySetting { display:grid; grid-template-columns:minmax(0,1fr) minmax(132px,auto); align-items:center; gap:12px; min-height:44px; padding:9px 12px; border:1px solid var(--glass-border); border-radius:12px; background:rgba(255,255,255,.06); }
.mobileViewerShell .mobileQualitySetting span { display:grid; gap:2px; min-width:0; }
.mobileViewerShell .mobileQualitySetting small { color:var(--muted); font-size:11px; line-height:1.3; }
.mobileViewerShell .mobileQualitySetting select { width:100%; max-width:190px; min-height:40px; }
@media (max-width:420px) { .mobileViewerShell .mobileQualitySetting { grid-template-columns:1fr; } .mobileViewerShell .mobileQualitySetting select { max-width:none; } }
.mobileViewerShell .allianceIntel { gap:12px; overflow:hidden; }
.allianceStrategy { padding:10px 12px; border:1px solid rgba(244,199,101,.3); border-radius:12px; background:rgba(244,199,101,.06); }
.allianceStrategy p { margin:4px 0; line-height:1.45; font-size:12px; }
.mobileViewerShell .allianceIntel>header { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.mobileViewerShell .allianceIntel>header>strong { color:#dce8f7; font-size:11px; text-align:right; }
.mobileViewerShell .allianceStatus { color:#8fa5be; font-size:9px; font-weight:800; letter-spacing:.14em; }
.mobileViewerShell .alliancePulse { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mobileViewerShell .allianceMeter { display:grid; gap:4px; min-width:0; }
.mobileViewerShell .allianceMeter span { display:flex; justify-content:space-between; gap:8px; color:#aebed0; font-size:10px; }
.mobileViewerShell .allianceMeter span b { color:#edf5ff; }
.mobileViewerShell .allianceMeter i { display:block; height:5px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.09); }
.mobileViewerShell .allianceMeter i:after { content:""; display:block; width:var(--meter); height:100%; border-radius:inherit; background:linear-gradient(90deg,#55d6be,#a6efc6); }
.mobileViewerShell .allianceMeter.danger i:after { background:linear-gradient(90deg,#ffb86b,#ff6b81); }
.mobileViewerShell .allianceChallenge { margin:0; padding:9px 10px; border:1px solid rgba(255,184,107,.25); border-radius:10px; background:rgba(255,184,107,.07); font-size:11px; }
.mobileViewerShell .allianceChallenge span { display:block; color:#ffbd7a; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.mobileViewerShell .allianceHistory { border:1px solid rgba(117,215,255,.22); border-radius:11px; background:rgba(79,178,222,.06); }
.mobileViewerShell .allianceHistory>summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; cursor:pointer; list-style:none; }
.mobileViewerShell .allianceHistory>summary::-webkit-details-marker { display:none; }
.mobileViewerShell .allianceHistory>summary span { display:grid; gap:2px; }
.mobileViewerShell .allianceHistory>summary b { color:#dff5ff; font-size:11px; }
.mobileViewerShell .allianceHistory>summary small { color:#8fa5be; font-size:9px; }
.mobileViewerShell .allianceHistory>summary em { color:#75d7ff; font-size:9px; font-style:normal; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.mobileViewerShell .allianceHistory>summary:after { content:'+'; color:#75d7ff; font-size:16px; }
.mobileViewerShell .allianceHistory[open]>summary:after { content:'−'; }
.mobileViewerShell .allianceLineage { display:grid; gap:9px; padding:0 10px 11px; border-top:1px solid rgba(117,215,255,.14); }
.mobileViewerShell .allianceLineage p { margin:9px 0 0; color:#b9c9d9; font-size:10px; line-height:1.5; }
.mobileViewerShell .allianceLineage dl { display:grid; gap:5px; margin:0; }
.mobileViewerShell .allianceLineage dl div { display:grid; grid-template-columns:72px 1fr; gap:8px; font-size:9px; }
.mobileViewerShell .allianceLineage dt { color:#7f97ae; }.mobileViewerShell .allianceLineage dd { margin:0; color:#e4effa; }
.mobileViewerShell .allianceLineage ol { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.mobileViewerShell .allianceLineage li { display:grid; grid-template-columns:76px 1fr; gap:8px; padding-left:8px; border-left:2px solid rgba(117,215,255,.38); color:#b9c9d9; font-size:9px; line-height:1.4; }
.mobileViewerShell .allianceLineage time { color:#75d7ff; }
.mobileViewerShell .allianceMembers { display:grid; gap:7px; }
.mobileViewerShell .allianceMember { border:1px solid var(--glass-border); border-radius:11px; background:rgba(0,0,0,.16); }
.mobileViewerShell .allianceMember summary { display:grid; grid-template-columns:8px minmax(0,1fr) auto; column-gap:8px; align-items:center; padding:10px; cursor:pointer; list-style:none; }
.mobileViewerShell .allianceMember summary::-webkit-details-marker { display:none; }
.mobileViewerShell .allianceMember summary .memberDot { width:8px; height:8px; grid-row:1/3; border-radius:50%; background:var(--tribute-accent); box-shadow:0 0 9px var(--tribute-accent); }
.mobileViewerShell .allianceMember summary b { font-size:12px; }
.mobileViewerShell .allianceMember summary small { grid-column:2; color:#8fa5be; font-size:9px; }
.mobileViewerShell .allianceMember summary em { grid-column:3; grid-row:1/3; color:#a6efc6; font-size:10px; font-style:normal; }
.mobileViewerShell .memberPolitics { display:grid; gap:8px; padding:0 10px 10px 26px; }
.mobileViewerShell .memberPolitics p { margin:0; color:#aebed0; font-size:10px; line-height:1.45; }
.mobileViewerShell .memberPolitics dl { display:grid; grid-template-columns:1fr 1fr; gap:5px 12px; margin:2px 0; }
.mobileViewerShell .memberPolitics dl div { display:flex; justify-content:space-between; font-size:9px; }
.mobileViewerShell .memberPolitics dt { color:#8fa5be; } .mobileViewerShell .memberPolitics dd { margin:0; color:#edf5ff; }
.mobileViewerShell .memberPolitics button { min-height:36px; border:1px solid var(--glass-border); border-radius:9px; background:rgba(255,255,255,.06); color:#edf5ff; font-size:10px; }
.mobileViewerShell .moreSection button, .mobileViewerShell .moreSection a { display:flex; align-items:center; min-height:44px; padding:9px 12px; border-radius:12px; border:1px solid var(--glass-border); background:rgba(255,255,255,.06); color:var(--text); text-decoration:none; }
/* Issue #200 mobile command, admin, sheet, and performance polish. */
.mobileViewerShell .commandRow { justify-content:space-between; gap:10px; width:100%; text-align:left; }
.mobileViewerShell .commandRow .commandIcon { width:28px; height:28px; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.08); flex:0 0 28px; }
.mobileViewerShell .commandRow span:nth-child(2) { display:grid; gap:2px; flex:1; }
.mobileViewerShell .commandRow small { color:var(--muted); font-size:11px; }
.mobileViewerShell .commandRow em { margin-left:auto; color:var(--muted); font-style:normal; }
.mobileViewerShell .commandRow.active { border-color:var(--tribute-accent); background:color-mix(in srgb, var(--tribute-accent) 18%, rgba(255,255,255,.07)); }
.mobileViewerShell .commandRow.active em { color:#fff; }

.mobileViewerShell .mobileGuide, .mobileViewerShell .mobileAdminUnlock, .mobileViewerShell .mobileAdminConfirm { display:grid; gap:12px; line-height:1.45; }
.mobileViewerShell .mobileAdminUnlock input { width:100%; min-height:42px; margin-top:6px; border-radius:10px; border:1px solid var(--glass-border); background:rgba(0,0,0,.35); color:var(--text); padding:8px 10px; }
.mobileViewerShell .mobileAdminUnlock div, .mobileViewerShell .mobileAdminConfirm div { display:flex; gap:10px; justify-content:flex-end; }
.mobileViewerShell .danger { border-color:#ff6b6b!important; color:#ffd5d5!important; }
.performanceMode .mobileViewerShell .bottomToolbar, .performanceMode .mobileViewerShell .adaptiveSurface, .performanceMode .viewerStatus.compact { backdrop-filter:none!important; }
/* Performance mode reduces expensive materials, not pointer/motion timing. */

/* Standalone scene bounds use --arena-app-height as the source of truth.
   Safe-area variables position HUD only and never shorten the scene/canvas. */
@media (max-width: 1180px), (pointer: coarse) {
  html, body, #app, main, #mapPanel, #scene, .mobileViewerShell {
    width:100%!important;
    height:var(--arena-app-height)!important;
    min-height:var(--arena-app-height)!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  html, body { position:fixed; inset:0; overscroll-behavior:none; }
  main, #mapPanel, #scene, .mobileViewerShell { position:fixed!important; top:0!important; left:0!important; right:auto!important; bottom:auto!important; }
  #scene canvas { width:100%!important; height:100%!important; }
}
#arenaViewportDebugOverlay { position:fixed; left:8px; bottom:8px; z-index:99999; max-width:calc(100% - 16px); padding:6px 8px; border:1px solid #ffdf6b; background:rgba(0,0,0,.76); color:#ffdf6b; font:12px/1.3 ui-monospace,monospace; pointer-events:none; }
.viewportDebugEnabled body::after { content:""; position:fixed; inset:0; z-index:99998; pointer-events:none; outline:3px solid #ffdf6b; box-shadow:inset 0 0 0 calc(var(--safe-bottom, 0px)) rgba(255,0,0,.18); }
.viewportDebugEnabled #scene { outline:2px solid #66d9ef!important; outline-offset:-2px; }
.viewportDebugEnabled #mapPanel { outline:2px dashed #7ee787!important; outline-offset:-5px; }
.viewportDebugEnabled .mobileViewerShell { outline:2px dotted #ff6b6b!important; outline-offset:-8px; }
.relationshipGraphShared { display:block; width:100%; height:100%; min-height:260px; border:1px solid var(--stroke); border-radius:6px; background:rgba(3,7,10,.42); touch-action:none; user-select:none; outline:none; }
.relationshipGraphShared .relationship-node.selected circle { stroke:#fff; stroke-width:2.5px; }
.relationshipGraphShared .relationship-node text { fill:#eef5ff; font:700 9px system-ui; text-anchor:middle; dominant-baseline:middle; paint-order:stroke; stroke:#071018; stroke-width:2px; stroke-linejoin:round; pointer-events:none; }
.relationshipGraphViewport { width:100%; min-height:52vh; border:1px solid var(--glass-border); border-radius:16px; overflow:hidden; background:rgba(3,7,10,.64); touch-action:none; user-select:none; }
.relationshipGraphViewport .relationshipGraphShared { border:0; border-radius:0; min-height:52vh; }
.relationshipClusterHeader { display:grid; gap:4px; grid-template-columns:1fr auto; align-items:center; border:1px solid var(--glass-border); border-radius:14px; padding:9px 10px; background:rgba(255,255,255,.055); }
.relationshipClusterHeader span { color:var(--muted); font-size:12px; }
.relationshipClusterHeader button { min-height:32px; }
.mobileGraphControls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.storyEvent { border-left: 3px solid rgba(255, 209, 102, .8); }
.mechanicalResult { margin: 6px 0; padding: 8px; border: 1px solid rgba(159,176,199,.24); border-radius: 10px; background: rgba(255,255,255,.04); display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.mechanicalResult.compact { display:block; white-space: pre-line; }
.mechanicalResult small { grid-column: 1 / -1; color: #c8d4e3; }
.namePill { padding: 3px 8px; border-radius: 999px; background: rgba(126,231,135,.12); color: #eef5ff; text-align: center; font-weight: 700; }
.damageArrow { color: #ffd166; text-align: center; }
.storyContext { margin: 5px 0 0; color: #dce7f5; }
.regionLabels { position:absolute; inset:0; z-index:9; pointer-events:none; overflow:hidden; }
.regionLabel { --label-dot-size:14px; position:absolute; left:0; top:0; box-sizing:border-box; min-width:var(--label-dot-size); width:var(--label-dot-size); height:var(--label-dot-size); padding:0; display:inline-grid; place-items:center; border:1px solid rgba(238,245,255,.48); border-radius:999px; background:rgba(5,10,16,.72); color:#f5f9ff; font:800 clamp(11px, 1.25vw, 18px)/1.1 Inter,system-ui,sans-serif; letter-spacing:.08em; text-shadow:0 2px 3px #000, 0 0 8px rgba(0,0,0,.8); white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.22), 0 0 0 3px rgba(159,197,255,.12); opacity:.82; overflow:hidden; transform-origin:center; transition:width .9s cubic-bezier(.18,.86,.24,1), height .9s cubic-bezier(.18,.86,.24,1), padding .9s cubic-bezier(.18,.86,.24,1), border-color .35s ease, background-color .35s ease, opacity .35s ease; }
.regionLabel::before { content:""; position:absolute; inset:3px; border-radius:999px; background:rgba(245,249,255,.78); opacity:.75; transition:opacity .45s ease; }
.regionLabelText { display:block; max-width:0; opacity:0; filter:blur(5px); transform:scaleX(.05); transform-origin:left center; clip-path:inset(0 100% 0 0 round 999px); transition:max-width .9s cubic-bezier(.18,.86,.24,1), opacity .55s ease .18s, filter .65s ease .16s, transform .8s cubic-bezier(.18,.86,.24,1), clip-path .85s cubic-bezier(.18,.86,.24,1); }
.regionLabelVisible { width:auto; height:auto; padding:3px 8px; border-color:rgba(238,245,255,.52); background:rgba(5,10,16,.58); opacity:1; }
.regionLabelVisible::before { opacity:0; }
.regionLabelVisible .regionLabelText { max-width:260px; opacity:1; filter:blur(0); transform:scaleX(1); clip-path:inset(0 0 0 0 round 999px); }
.regionLabelDot { cursor:help; }
.regionLabelEntering, .regionLabelLeaving { will-change:width, height, padding, opacity, filter, clip-path; }
.regionEdgeLabel { color:#9fc5ff; background:rgba(4,8,14,.7); border-color:rgba(159,197,255,.55); }
.regionTooltip { position:fixed; z-index:40; max-width:260px; display:grid; gap:3px; padding:10px 12px; border:1px solid rgba(159,197,255,.5); border-radius:10px; background:rgba(4,8,14,.9); color:#eef5ff; font:12px/1.35 Inter,system-ui,sans-serif; pointer-events:none; box-shadow:0 14px 32px rgba(0,0,0,.38); }
.regionTooltip strong { font-size:14px; }
.regionTooltip span, .regionTooltip small { color:var(--muted); }
.regionCompass { display:none; }
.mapPanel { --mini-map-size:208px; --mini-map-top:94px; }
.arenaMiniMap {
  position:absolute;
  right:12px;
  top:var(--mini-map-top);
  z-index:11;
  box-sizing:content-box;
  width:var(--mini-map-size);
  padding:8px;
  border:1px solid rgba(199,228,255,.22);
  border-radius:18px;
  background:rgba(8,14,22,.78);
  color:#eef5ff;
  pointer-events:none;
  box-shadow:0 12px 32px rgba(0,0,0,.38);
  backdrop-filter:blur(14px) saturate(1.2);
}
.miniMapFrame { position:relative; width:var(--mini-map-size); height:var(--mini-map-size); }
.arenaMiniMap canvas {
  display:block;
  box-sizing:border-box;
  width:100%;
  height:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:#142018;
}
.miniMapCompass { position:absolute; inset:0; font:800 9px/1 Inter,system-ui,sans-serif; color:rgba(234,246,255,.72); text-shadow:0 1px 4px rgba(0,0,0,.9); }
.miniMapCompass b, .miniMapCompass span { position:absolute; }
.miniMapCompass b { left:50%; top:5px; transform:translateX(-50%); padding:2px 5px; border-radius:6px; background:rgba(5,10,16,.7); color:#fff6d6; font-size:10px; text-shadow:none; }
.miniMapCompass span:nth-of-type(1) { right:6px; top:50%; transform:translateY(-50%); }
.miniMapCompass span:nth-of-type(2) { left:50%; bottom:6px; transform:translateX(-50%); }
.miniMapCompass span:nth-of-type(3) { left:6px; top:50%; transform:translateY(-50%); }
.miniMapKey { display:flex; justify-content:space-between; gap:6px; padding:8px 2px 0; color:rgba(234,242,255,.72); font:700 9.5px/1 Inter,system-ui,sans-serif; letter-spacing:.05em; text-transform:uppercase; }
.miniMapKey span { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.miniMapKey i { flex:none; display:inline-block; width:8px; height:8px; border-radius:50%; }
.miniMapKey .cameraDot { width:9px; height:9px; border-radius:0; background:#7ee787; clip-path:polygon(100% 50%, 0 0, 28% 50%, 0 100%); }
.miniMapKey .tributeDot { background:conic-gradient(#ff6b6b 0 25%, #ffd166 0 50%, #6bc8ff 0 75%, #c3a6ff 0); box-shadow:0 0 0 1px #071018; }
.miniMapKey .stormDot { box-sizing:border-box; border:2px solid #c084fc; }
@media (max-width: 1380px) { .mapPanel { --mini-map-size:176px; } }


.terrainAnalysisHost { display:none; grid-column:1 / -1; min-width:280px; }
.terrainAnalysisControls { padding:8px; border:1px solid var(--glass-border); border-radius:12px; background:rgba(5,10,16,.72); color:#eef5ff; }
.terrainAnalysisControls summary { cursor:pointer; font-weight:800; }
.terrainAnalysisGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:8px; }
.terrainAnalysisGrid label, .terrainLayerToggles label { height:auto !important; font-size:12px !important; }
.terrainAnalysisGrid progress { grid-column:1 / -1; width:100%; }
.terrainLayerToggles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 8px; margin-top:8px; }
@media (min-width: 1181px) and (hover:hover) and (pointer:fine) { .terrainAnalysisHost { display:block; } #cameraHud { align-items:start; } }
@media (max-width: 1180px), (pointer:coarse) { .desktopOnly, .terrainAnalysisHost { display:none !important; } }
.terrainExportLog { grid-column:1 / -1; max-height:180px; overflow:auto; white-space:pre-wrap; margin:8px 0; padding:8px; border:1px solid rgba(160,190,230,.25); border-radius:10px; background:rgba(0,0,0,.35); color:#dcecff; font:11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.terrainAnalysisGrid [data-status] { grid-column:1 / -1; font-size:12px; color:#d8ebff; }

/* Desktop workspace refactor: arena-first macOS-inspired shell. */
.desktopAppHeader { min-height: 78px; height:auto; padding: 10px 18px; gap: 14px; flex-wrap: wrap; }
.headerStatus { display:flex; align-items:center; gap:10px; margin-left:auto; }
.headerRenderSetting { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); white-space:nowrap; }
.headerRenderSetting select { min-height:34px; max-width:160px; border:1px solid var(--stroke); border-radius:10px; padding:0 8px; background:rgba(255,255,255,.07); color:var(--text); }
.headerRenderSetting select:focus-visible { outline:2px solid rgba(135,211,124,.7); outline-offset:2px; }
#workspacePreset, #cameraModeSelect { border:1px solid var(--stroke); border-radius:10px; background:rgba(255,255,255,.07); color:var(--text); min-height:34px; padding:0 10px; }
.appMenuBar { flex: 1 1 100%; display:flex; align-items:center; gap:4px; min-height:28px; padding-top:2px; }
.appMenu { position:relative; }
.appMenu summary { list-style:none; cursor:pointer; border-radius:8px; padding:5px 10px; color:#d9e7f8; font-size:13px; }
.appMenu summary::-webkit-details-marker { display:none; }
.appMenu[open] summary, .appMenu summary:focus-visible { background:rgba(255,255,255,.1); outline:1px solid rgba(135,211,124,.55); }
.appMenuItems { position:absolute; top:calc(100% + 4px); left:0; z-index:500; min-width:210px; max-height:min(70vh, 520px); overflow:auto; padding:6px; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:rgba(14,18,26,.98); box-shadow:0 22px 70px rgba(0,0,0,.48); }
.appMenu:nth-last-child(-n+2) .appMenuItems { left:auto; right:0; }
.appMenuItems button { display:block; width:100%; min-height:32px; border:0; border-radius:8px; padding:0 10px; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.appMenuItems button:hover, .appMenuItems button:focus-visible { background:rgba(135,211,124,.16); outline:0; }
main#appLayout { height: calc(100dvh - 118px); grid-template-columns: var(--left) 8px minmax(0, 1fr) 8px var(--right); transition:grid-template-columns .18s ease; }
body.leftHidden main#appLayout { grid-template-columns: 0 0 minmax(0, 1fr) 8px var(--right); }
body.rightHidden main#appLayout { grid-template-columns: var(--left) 8px minmax(0, 1fr) 0 0; }
body.leftHidden.rightHidden main#appLayout { grid-template-columns: 0 0 minmax(0, 1fr) 0 0; }
body.leftHidden .leftRail, body.leftHidden [data-resize="left"], body.rightHidden .rightRail, body.rightHidden [data-resize="right"] { display:none; }
.leftRail, .rightRail { min-height:0; overflow:auto; }
.rightRail { display:grid; grid-template-rows:minmax(0, 1fr) auto auto; }
.tributesCard { min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.tributesCard .panelBody, #botList, #playerIntelGrid, #events, #discordEvents { min-height:0; overflow:auto; }
.edgeRestore { position:fixed; z-index:90; top:50%; transform:translateY(-50%); border:1px solid var(--stroke); border-radius:999px; background:rgba(12,17,25,.92); color:var(--text); padding:8px 10px; box-shadow:0 10px 30px rgba(0,0,0,.38); cursor:pointer; }
.edgeRestore.left { left:8px; } .edgeRestore.right { right:8px; }
body:not(.leftHidden) .edgeRestore.left, body:not(.rightHidden) .edgeRestore.right { display:none; }
.mapChrome { position:absolute; top:10px; left:10px; right:10px; z-index:12; height:44px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(7,10,15,.74); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:space-between; padding:0 10px; }
.compactArenaToolbar { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; white-space:nowrap; }
.compactArenaToolbar button { min-height:32px; border:1px solid var(--stroke); border-radius:10px; background:rgba(255,255,255,.07); color:var(--text); padding:0 10px; cursor:pointer; }
#chaseTargetLabel { max-width:220px; overflow:hidden; text-overflow:ellipsis; color:var(--muted); font-size:12px; }
.liveDot { border:1px solid rgba(126,231,135,.45); color:#bff7bc; border-radius:999px; padding:5px 9px; font-size:11px; background:rgba(126,231,135,.1); }
#cameraHud { top:64px; left:12px; max-width:min(420px, calc(100% - 24px)); }
body.hudHidden #cameraHud, .legend.collapsed { display:none!important; }
#cameraHud button { display:none; }
.toolLayer { position:fixed; inset:0; z-index:120; pointer-events:none; }
.floatingWindowLayer { display:none; }
.toolPanel { position:fixed; display:flex; flex-direction:column; overflow:hidden; max-width:min(760px, calc(100vw - 28px)); max-height:min(75vh, calc(100dvh - 130px)); border:1px solid rgba(255,255,255,.18); border-radius:16px; background:rgba(15,20,30,.97); box-shadow:0 28px 90px rgba(0,0,0,.56); pointer-events:auto; }
.centeredTool { left:50%; top:52%; transform:translate(-50%,-50%); width:min(680px, calc(100vw - 28px)); height:min(620px, calc(100dvh - 130px)); }
.dockedInspector { right:14px; top:130px; width:min(390px, calc(100vw - 28px)); height:calc(100dvh - 150px); }
.floatingWindow { display:none; }
.toolTitle { min-height:42px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 12px; border-bottom:1px solid rgba(255,255,255,.1); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); }
.toolControls { display:flex; gap:6px; }
.toolControls button { min-height:30px; border:1px solid var(--stroke); border-radius:9px; background:rgba(255,255,255,.08); color:var(--text); padding:0 9px; cursor:pointer; }
.toolBody { flex:1 1 auto; min-height:0; overflow:auto; padding:12px; }
.windowBody { flex:1 1 auto; min-height:0; overflow:auto; padding:12px; }
.windowResize { position:absolute; right:0; bottom:0; width:18px; height:18px; cursor:nwse-resize; background:linear-gradient(135deg, transparent 50%, rgba(255,255,255,.28)); }
.windowedTool { display:block!important; width:100%; min-width:0; box-shadow:none!important; border:0!important; background:transparent!important; }
.windowedTool > summary { display:none; }
.windowedTool .panelBody { padding:0; }
.floatingWindow.maximized { border-radius:12px; }
.windowDock { position:fixed; left:50%; bottom:calc(12px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:150; max-width:min(760px, calc(100vw - 24px)); display:flex; gap:8px; overflow-x:auto; padding:8px; border:1px solid var(--stroke); border-radius:16px; background:rgba(10,14,21,.9); box-shadow:0 16px 45px rgba(0,0,0,.42); }
.windowDock[hidden] { display:none; }
.windowDock button { flex:0 0 auto; min-height:32px; border:1px solid var(--stroke); border-radius:10px; background:rgba(255,255,255,.08); color:var(--text); padding:0 12px; cursor:pointer; }
.terrainAnalysisControls { border:0; padding:0; background:transparent; }
.terrainAnalysisControls > summary { display:none; }
.terrainAnalysisGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.terrainLayerToggles { grid-template-columns:repeat(2,minmax(0,1fr)); }
#playerIntelPanel.windowedTool #playerIntelGrid { max-height:none; grid-template-columns:1fr; }
#playerIntelPanel.windowedTool #playerIntelDetail { max-height:none; }
@media (max-width: 1180px), (pointer: coarse) {
  main#appLayout, body.leftHidden main#appLayout, body.rightHidden main#appLayout { grid-template-columns:1fr; padding:8px; height:calc(100dvh - 118px); }
  .leftRail, .rightRail { position:fixed; top:118px; bottom:0; z-index:110; width:min(88vw, 380px); background:rgba(9,13,20,.96); padding:10px; transform:translateX(0); }
  .leftRail { left:0; } .rightRail { right:0; }
  body.leftHidden .leftRail { display:flex; transform:translateX(-105%); } body.rightHidden .rightRail { display:flex; transform:translateX(105%); }
  .resizeHandle { display:none!important; }
  .floatingWindow { left:8px!important; right:8px!important; top:calc(126px + env(safe-area-inset-top))!important; width:auto!important; height:calc(100dvh - 150px)!important; border-radius:16px 16px 0 0; }
  .windowResize { display:none; }
  .compactArenaToolbar { gap:5px; } #chaseTargetLabel { display:none; }
}
@media (prefers-reduced-motion: reduce) { main#appLayout, * { transition:none!important; animation:none!important; } }

/* Arena-first workspace model */
body[data-workspace="analysis"] main#appLayout { grid-template-columns:0 0 minmax(0, 1fr) 0 0; }
body[data-workspace="admin"] main#appLayout { grid-template-columns:minmax(320px, 42vw) 8px minmax(320px, 1fr) 0 0; }
body[data-workspace="director"] main#appLayout { grid-template-columns:0 0 minmax(0, 1fr) 8px minmax(320px, var(--right)); }
body[data-workspace="analysis"] .mapPanel::after { content:"Analysis Workspace · terrain map uses the full viewport · use Presets > Viewer to return"; position:absolute; left:18px; bottom:18px; z-index:12; padding:10px 12px; border:1px solid var(--stroke); border-radius:12px; background:rgba(6,10,16,.78); color:var(--text); font-weight:800; }
body[data-workspace="admin"] .leftRail .tributesCard, body[data-workspace="admin"] .leftRail .relationshipCard { display:none; }
body[data-workspace="analysis"] .leftRail, body[data-workspace="analysis"] .rightRail, body[data-workspace="director"] .leftRail { display:none; }
body.legendHidden .legend { display:none!important; }
body.discordPreviewHidden .discordPreview { display:none!important; }
body.liveEventsHidden .rightRail > .events:not(.discordPreview) { display:none!important; }
@media (max-width: 760px), (pointer: coarse) { .toolLayer, .windowDock, .appMenuBar { display:none!important; } }

/* Viewer audit containment: permanent rails own their content; debug/tools stay out of Viewer. */
.desktopAppHeader { position:relative; z-index:300; }
.appMenuBar { position:relative; z-index:310; }
.appMenuItems { pointer-events:auto; }
.railCollapse { align-self:flex-end; flex:0 0 auto; min-height:30px; margin:0 0 2px; padding:0 10px; border:1px solid var(--stroke); border-radius:999px; background:rgba(255,255,255,.08); color:var(--text); font-size:12px; cursor:pointer; }
.railCollapse:hover, .railCollapse:focus-visible { border-color:rgba(135,211,124,.65); background:rgba(135,211,124,.14); outline:0; }
.rightRail { grid-template-rows:auto minmax(0,1fr); overflow:hidden; }
.rightRail > .card { min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.rightRail > .card[hidden] { display:none!important; }
.rightRail > .events:not(.discordPreview) h2,
.rightRail > .discordPreview h2,
.playerIntelHeader,
.contextHeader { flex:0 0 auto; }
.rightRail > .events:not(.discordPreview) #events,
.rightRail > .discordPreview #discordEvents,
#eventDetailsBody,
#playerIntelGrid,
#playerIntelDetail { min-height:0; overflow:auto; }
body[data-workspace="viewer"] .eventTools,
body[data-workspace="viewer"] .discordPreview,
body[data-workspace="viewer"] .terrainAnalysisHost,
body[data-workspace="viewer"] .windowDock:not([hidden]) { display:none!important; }
body[data-workspace="viewer"] .toolLayer:empty { display:none!important; pointer-events:none!important; }
.contextHeader { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.contextHeader h2 { margin-bottom:4px; }
.contextHeader button, .playerIntelHeader [data-context-live] { min-height:30px; border:1px solid var(--stroke); border-radius:9px; background:rgba(255,255,255,.08); color:var(--text); padding:0 10px; cursor:pointer; }

/* Mobile Pro is an isolated optional desktop preset. It reuses the mobile shell
   while keeping the classic desktop workspace selectable and scoped away from
   these layout rules. */
body:not([data-workspace="mobile-pro"]) .mobileProShell { display:none!important; }
body[data-workspace="mobile-pro"] .mobileViewerShell:not(.mobileProShell) { display:none!important; }
/* The public viewer exposes only Mobile Pro and its compact phone counterpart. */
body[data-workspace="mobile-pro"]>.desktopAppHeader,body[data-workspace="mobile"]>.desktopAppHeader{display:none!important}
body[data-workspace="mobile-pro"] main#appLayout{height:var(--arena-app-height)!important}
body[data-workspace="mobile"] main#appLayout{display:block;position:relative;width:100%;height:var(--arena-app-height);min-height:var(--arena-app-height);padding:0;overflow:hidden}
body[data-workspace="mobile"] .leftRail,body[data-workspace="mobile"] .rightRail,body[data-workspace="mobile"] .resizeHandle,body[data-workspace="mobile"] .viewerShell:not(.mobileViewerShell){display:none!important}
body[data-workspace="mobile"] .mapPanel{position:relative;display:block;width:100%;height:100%;min-height:0;border:0;border-radius:0;overflow:hidden}
body[data-workspace="mobile"] #scene,body[data-workspace="mobile"] #scene canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
body[data-workspace="mobile"] .mobileViewerShell:not(.mobileProShell){display:block!important;opacity:1!important;pointer-events:none}
body[data-workspace="mobile-pro"] main#appLayout { display:block; position:relative; width:100%; height:calc(var(--arena-app-height) - 76px); min-width:0; min-height:0; padding:0; overflow:hidden; transition:none; }
body[data-workspace="mobile-pro"] .leftRail,
body[data-workspace="mobile-pro"] .rightRail,
body[data-workspace="mobile-pro"] .resizeHandle,
body[data-workspace="mobile-pro"] .edgeRestore,
body[data-workspace="mobile-pro"] .toolLayer,
body[data-workspace="mobile-pro"] .windowDock { display:none!important; }
body[data-workspace="mobile-pro"] .mapPanel { position:relative; display:block; width:100%; height:100%; min-width:0; min-height:0; max-width:none; grid-column:auto; grid-row:auto; transform:none!important; border:0; border-radius:0; overflow:hidden; }
body[data-workspace="mobile-pro"] #scene { position:absolute; inset:0; width:100%; height:100%; min-width:0; min-height:0; }
body[data-workspace="mobile-pro"] #scene canvas { position:absolute; inset:0; width:100%!important; height:100%!important; display:block; }
body[data-workspace="mobile-pro"] .mobileProShell { display:block!important; position:absolute; inset:0; width:100%; height:100%; z-index:18; opacity:1!important; pointer-events:none; transform:none!important; background:transparent; }
body[data-workspace="mobile-pro"] .mobileProShell .bottomToolbar { width:min(900px, calc(100dvw - 32px)); grid-template-columns:repeat(var(--dock-count,6), minmax(64px, 1fr)); overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scroll-snap-type:x proximity; }
body[data-workspace="mobile-pro"] .mobileProShell .bottomToolbar .dockBubble { width:calc((100% - 14px)/12); }
body[data-workspace="mobile-pro"] .mobileProShell .bottomToolbar button { scroll-snap-align:center; }
body[data-workspace="mobile-pro"] .mobileProShell.majorSurfaceOpen .bottomToolbar { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%); }
body[data-workspace="mobile-pro"] .mobileProShell .adaptiveSurface[data-presentation="full-sheet"] { left:max(24px, calc((100dvw - 1120px) / 2)); right:max(24px, calc((100dvw - 1120px) / 2)); top:88px; bottom:86px; width:auto; transform-origin:50% 100%; border-radius:28px; }
body[data-workspace="mobile-pro"] .mobileProShell .surfaceBody { grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); align-content:start; gap:12px; }
body[data-workspace="mobile-pro"] .mobileProShell .mobileEvents,
body[data-workspace="mobile-pro"] .mobileProShell .pickerList,
body[data-workspace="mobile-pro"] .mobileProShell .relationshipTabs,
body[data-workspace="mobile-pro"] .mobileProShell .relationshipGraphViewport { grid-column:1 / -1; }
body[data-workspace="mobile-pro"] .mobileProShell .mobileProStats { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
body[data-workspace="mobile-pro"] .mobileProShell .mobileProStats div,
body[data-workspace="mobile-pro"] .mobileProShell .mobileProSummary { border:1px solid var(--glass-border); border-radius:18px; background:rgba(255,255,255,.06); padding:14px; }
body[data-workspace="mobile-pro"] .mobileProShell .mobileProStats b { display:block; font-size:28px; }
body[data-workspace="mobile-pro"] .mobileProShell .mobileProStats span { color:var(--muted); }
@media (max-width: 980px) {
  body[data-workspace="mobile-pro"] .mobileProShell .bottomToolbar { grid-template-columns:repeat(var(--dock-count,6), 68px); justify-content:start; }
  body[data-workspace="mobile-pro"] .mobileProShell .bottomToolbar .dockBubble { display:none; }
}

/* Shared mobile camera selector and dock safe-area repairs. */
.mobileViewerShell { --mobile-dock-gap: 14px; --mobile-dock-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--safe-bottom) + var(--mobile-dock-gap)); }
.mobileViewerShell .viewerHudTop { grid-template-columns: auto minmax(0, 1fr) auto; }
.mobileViewerShell .cameraModeSelector { pointer-events:auto; min-width:0; display:flex; align-items:center; gap:4px; padding:4px; border:1px solid var(--glass-border); border-radius:999px; background:var(--glass-surface); backdrop-filter:blur(var(--glass-blur)); overflow-x:auto; scrollbar-width:none; }
.mobileViewerShell .cameraModeSelector button { min-height:36px; min-width:44px; padding:0 10px; border-radius:999px; border:1px solid transparent; background:transparent; color:rgba(238,246,255,.82); font-weight:800; white-space:nowrap; box-shadow:none; }
.mobileViewerShell .cameraModeSelector button.active { color:#fff; background:color-mix(in srgb, var(--tribute-accent) 28%, rgba(255,255,255,.08)); border-color:color-mix(in srgb, var(--tribute-accent) 58%, var(--glass-border)); }
.mobileViewerShell .cameraModeSelector button:disabled { opacity:.45; cursor:not-allowed; }
.mobileViewerShell .cameraModeSelector button:focus-visible { outline:2px solid color-mix(in srgb, var(--tribute-accent) 70%, #fff); outline-offset:2px; }
.mobileViewerShell:not(.mobileProShell) .bottomToolbar { left:50%; right:auto; bottom:var(--mobile-dock-bottom); transform:translateX(-50%); }
.mobileViewerShell .adaptiveSurface { bottom:calc(var(--mobile-dock-bottom) + 62px); }
.mobileViewerShell .adaptiveSurface[data-presentation="full-sheet"] { bottom:calc(env(safe-area-inset-bottom, 0px) + var(--safe-bottom) + 14px); }
@media (orientation: landscape) and (max-height: 520px) {
  .mobileViewerShell .bottomToolbar { top:auto; right:calc(12px + var(--safe-right)); left:calc(12px + var(--safe-left)); bottom:var(--mobile-dock-bottom); width:auto; grid-template-columns:repeat(4,minmax(44px,1fr)); grid-template-rows:none; }
}
body[data-workspace="mobile-pro"] .mobileProShell { --mobile-dock-gap: 18px; }
body[data-workspace="mobile-pro"] .mobileProShell .bottomToolbar { left:50%; right:auto; bottom:var(--mobile-dock-bottom); transform:translateX(-50%); max-width:calc(100dvw - 32px); }
body[data-workspace="mobile-pro"] .mobileProShell .adaptiveSurface[data-presentation="full-sheet"] { bottom:calc(var(--mobile-dock-bottom) + 68px); }
body[data-workspace="mobile-pro"] .mobileProShell.majorSurfaceOpen .bottomToolbar { transform:translateX(-50%); }
@media (max-width: 720px) {
  body[data-workspace="mobile-pro"] .mobileProShell .bottomToolbar { width:calc(100dvw - 24px); grid-template-columns:repeat(var(--dock-count,6), 64px); }
}

/* Mobile Pro follow-up containment and layering model.
   Layers: scene canvas (0), scene overlays (10), top bar (20), tribute card (30),
   bottom dock (35), active sheet/surface (50), modal dialogs (80), fatal overlays (9998+). */
:root { --app-safe-top: env(safe-area-inset-top, 0px); --header-top-gap: 8px; --mobile-pro-dock-bottom-gap: 18px; --mobile-pro-top-gap: 12px; }
.desktopAppHeader { padding-top: calc(var(--app-safe-top) + var(--header-top-gap)); padding-bottom: 8px; align-items:center; overflow:visible; }
.desktopAppHeader > div:first-child { display:grid; gap:2px; min-width:min(320px, 50vw); }
.desktopAppHeader h1, .desktopAppHeader p { line-height:1.15; }
body[data-workspace="mobile-pro"] main#appLayout { height: calc(var(--arena-app-height) - 96px - var(--app-safe-top)); }
body[data-workspace="mobile-pro"] #cameraHud .terrainAnalysisHost,
body[data-workspace="mobile-pro"] .mapChrome { display:none!important; visibility:hidden!important; pointer-events:none!important; }
body[data-workspace="mobile-pro"] .mobileProShell {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-dock-bottom: calc(var(--safe-bottom) + var(--mobile-pro-dock-bottom-gap));
  --mobile-dock-gap: var(--mobile-pro-dock-bottom-gap);
}
body[data-workspace="mobile-pro"] .mobileProShell .viewerHudTop {
  top:calc(var(--mobile-pro-top-gap) + var(--safe-top));
  left:calc(16px + var(--safe-left));
  right:calc(16px + var(--safe-right));
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  z-index:20;
}
body[data-workspace="mobile-pro"] .mobileProTopGroup { display:flex; align-items:center; gap:8px; min-width:0; pointer-events:auto; }
body[data-workspace="mobile-pro"] .mobileProTopGroupLeft { flex:1 1 auto; justify-content:flex-start; }
body[data-workspace="mobile-pro"] .mobileProTopGroupRight { flex:0 1 auto; justify-content:flex-end; max-width:min(680px, 58vw); }
body[data-workspace="mobile-pro"] .mobileProShell .status { max-width:min(260px, 24vw); flex:0 1 auto; }
body[data-workspace="mobile-pro"] .mobileProShell .cameraModeSelector { flex:0 1 auto; max-width:min(420px, 34vw); }
body[data-workspace="mobile-pro"] .mobileProShell .fullscreenControl { flex:0 0 auto; min-width:112px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
body[data-workspace="mobile-pro"] .mobileProShell .mode { flex:1 1 220px; max-width:320px; min-width:0; }
body[data-workspace="mobile-pro"] .mobileProShell .mode, body[data-workspace="mobile-pro"] .mobileProShell .mode * { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body[data-workspace="mobile-pro"] .mobileProShell .bottomToolbar {
  bottom:calc(env(safe-area-inset-bottom, 0px) + var(--mobile-pro-dock-bottom-gap));
  transform:translateX(-50%)!important;
  z-index:35;
  max-height:70px;
}
body[data-workspace="mobile-pro"] .mobileProShell .adaptiveSurface[hidden],
body[data-workspace="mobile-pro"] .mobileProShell .surfaceScrim[hidden] { display:none!important; visibility:hidden!important; pointer-events:none!important; transform:none!important; opacity:0!important; }
body[data-workspace="mobile-pro"] .mobileProShell .adaptiveSurface[data-presentation="full-sheet"] { top:calc(76px + var(--safe-top)); bottom:calc(var(--mobile-dock-bottom) + 76px); z-index:50; }
@media (max-width: 1100px) {
  body[data-workspace="mobile-pro"] .mobileProShell .cameraModeSelector button { font-size:0; width:44px; padding:0; }
  body[data-workspace="mobile-pro"] .mobileProShell .cameraModeSelector button::first-letter { font-size:12px; }
  body[data-workspace="mobile-pro"] .mobileProTopGroupRight { max-width:52vw; }
  body[data-workspace="mobile-pro"] .mobileProShell .fullscreenControl { min-width:44px; width:44px; padding:0; font-size:0; }
  body[data-workspace="mobile-pro"] .mobileProShell .fullscreenControl::before { content:'⛶'; font-size:18px; }
}

/* Discord story director surface for Mobile Pro. */
.mobileViewerShell .discordDirector { grid-column:1 / -1; display:grid; gap:12px; }
.mobileViewerShell .discordDirectorHero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:stretch; padding:16px; border:1px solid rgba(114,137,218,.42); border-radius:22px; background:radial-gradient(circle at 0 0, rgba(114,137,218,.24), transparent 34rem), rgba(255,255,255,.06); box-shadow:0 18px 48px rgba(0,0,0,.22); }
.mobileViewerShell .discordDirectorHero h3 { margin:4px 0 6px; font-size:22px; }
.mobileViewerShell .discordDirectorHero p { margin:0; color:var(--muted); }
.mobileViewerShell .discordDirectorStats { display:grid; grid-template-columns:repeat(3, minmax(82px,1fr)); gap:8px; }
.mobileViewerShell .discordDirectorStats span { display:grid; place-items:center; gap:2px; padding:10px; border:1px solid var(--glass-border); border-radius:16px; background:rgba(255,255,255,.07); color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.mobileViewerShell .discordDirectorStats b { color:#fff; font-size:24px; }
.mobileViewerShell .discordDecisionLegend, .mobileViewerShell .discordRawHistory { border:1px solid var(--glass-border); border-radius:18px; background:rgba(255,255,255,.055); padding:12px; }
.mobileViewerShell .discordDecisionLegend p { margin:4px 0 0; color:var(--muted); }
.mobileViewerShell .discordDirectorTimeline { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:10px; }
.mobileViewerShell .discordDirectorItem { border-left:4px solid #7289da; border-radius:16px; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.04)); }
.mobileViewerShell .discordDirectorItem[data-status="sent"], .mobileViewerShell .discordDirectorItem[data-status="verified"] { border-left-color:#7ee787; }
.mobileViewerShell .discordDirectorItem[data-status="failed"], .mobileViewerShell .discordDirectorItem[data-status="retrying"] { border-left-color:#ff6b6b; }
.mobileViewerShell .discordDirectorItem[data-status="skipped"] { border-left-color:#ffd166; }
.mobileViewerShell .discordDirectorItem header { display:flex; justify-content:space-between; gap:8px; align-items:start; }
.mobileViewerShell .discordDirectorItem em { color:var(--muted); font-style:normal; text-transform:uppercase; font-size:11px; letter-spacing:.05em; }
.mobileViewerShell .discordDirectorItem p { color:#eef5ff; margin:8px 0; line-height:1.35; }
.mobileViewerShell .discordDirectorItem.groupedDigest { grid-column:1 / -1; border-left-color:#5865f2; background:linear-gradient(180deg, rgba(88,101,242,.2), rgba(47,49,54,.72)); }
.mobileViewerShell .discordMessagePreview { display:grid; grid-template-columns:4px minmax(0,1fr); gap:10px; margin:10px 0; padding:11px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:#313338; box-shadow:inset 0 1px rgba(255,255,255,.04); color:#dbdee1; font-size:14px; line-height:1.38; }
.mobileViewerShell .discordPreviewAccent { border-radius:999px; background:var(--discord-embed-color, #5865f2); }
.mobileViewerShell .discordMessagePreview h4 { margin:0 0 10px; color:#f2f3f5; font-size:15px; font-weight:700; }
.mobileViewerShell .discordMessagePreview small { display:block; margin-bottom:5px; color:#f2f3f5; font-weight:700; }
.mobileViewerShell .discordMessagePreview .discordFooter { margin-top:8px; color:#b5bac1; font-size:12px; font-weight:600; }
.mobileViewerShell .discordMessagePreview p { margin:3px 0; color:#dbdee1; }
.mobileViewerShell .discordMessagePreview strong { color:#fff; }
.mobileViewerShell .discordMessagePreview em { color:#dbdee1; font-size:inherit; letter-spacing:0; text-transform:none; }
.mobileViewerShell .discordMessagePreview code { border-radius:4px; padding:1px 4px; background:#1e1f22; color:#f2f3f5; }
.mobileViewerShell .discordMessagePreview blockquote { margin:6px 0; padding-left:9px; border-left:4px solid #4e5058; color:#b5bac1; }
.mobileViewerShell .discordBatchDetails { margin:9px 0; border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:8px; background:rgba(0,0,0,.14); }
.mobileViewerShell .discordBatchDetails summary { cursor:pointer; color:#d8e5f8; font-weight:700; }
.mobileViewerShell .discordBatchDetails .discordDirectorItem { margin-top:8px; background:rgba(255,255,255,.045); }
.mobileViewerShell .discordBatchDetails .discordBatchDetails { display:none; }
.mobileViewerShell .discordDirectorItem dl { display:grid; gap:6px; margin:0; }
.mobileViewerShell .discordDirectorItem dl div { display:grid; grid-template-columns:92px minmax(0,1fr); gap:8px; font-size:12px; }
.mobileViewerShell .discordDirectorItem dt { color:var(--muted); }
.mobileViewerShell .discordDirectorItem dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.mobileViewerShell .discordDirectorItem code { color:#dbe7ff; }
.mobileViewerShell .discordRawHistory pre { max-height:42vh; overflow:auto; white-space:pre-wrap; color:#dce8f8; }
@media (max-width: 720px) { .mobileViewerShell .discordDirectorHero { grid-template-columns:1fr; } .mobileViewerShell .discordDirectorStats { grid-template-columns:repeat(3, 1fr); } }
.mobileViewerShell .marketSurface { display:grid; gap:10px; }
.mobileViewerShell .marketRangeDock { position:sticky; top:0; z-index:3; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:linear-gradient(135deg, rgba(10,16,28,.92), rgba(20,29,48,.78)); box-shadow:0 16px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(18px); }
.mobileViewerShell .marketRangeDock strong, .mobileViewerShell .marketRangeDock small { display:block; }
.mobileViewerShell .marketRangeDock small { margin-top:2px; color:var(--muted); font-size:11px; }
.mobileViewerShell .marketRangeButtons { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.mobileViewerShell .marketRangeButtons button { border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:7px 10px; color:#dce8f8; background:rgba(255,255,255,.06); font-weight:800; font-size:11px; }
.mobileViewerShell .marketRangeButtons button.active { color:#07131f; border-color:transparent; background:linear-gradient(135deg, #dffcff, #7dd3fc); box-shadow:0 0 22px rgba(125,211,252,.28); }
.mobileViewerShell .marketTickerList { display:grid; gap:10px; }
.mobileViewerShell .marketTicker { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:7px 10px; align-items:center; padding:10px; border:1px solid color-mix(in srgb, var(--tribute-accent) 28%, var(--glass-border)); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.mobileViewerShell .marketTicker .tributeRow { padding:0; min-height:44px; background:transparent; border:0; box-shadow:none; }
.mobileViewerShell .marketTickerQuote { display:grid; justify-items:end; gap:2px; font-variant-numeric:tabular-nums; }
.mobileViewerShell .marketTickerQuote strong { font-size:18px; color:var(--text); }
.mobileViewerShell .marketTickerQuote em { font-style:normal; font-size:12px; color:var(--state-danger); }
.mobileViewerShell .marketTickerQuote em.up { color:var(--state-safe); }
.mobileViewerShell .marketBar { grid-column:1 / -1; height:8px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.09); }
.mobileViewerShell .marketBar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--tribute-accent), #e6fffb); box-shadow:0 0 18px color-mix(in srgb, var(--tribute-accent) 50%, transparent); transition:width .28s ease; }
.mobileViewerShell .marketSpark { grid-column:1 / -1; width:100%; height:74px; overflow:hidden; border-radius:14px; background:linear-gradient(180deg, rgba(2,6,23,.34), rgba(2,6,23,.18)); }
.mobileViewerShell .marketGrid path { fill:none; stroke:rgba(255,255,255,.12); stroke-width:.45; vector-effect:non-scaling-stroke; }
.mobileViewerShell .marketSparkLine { fill:none; stroke:var(--tribute-accent); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 5px var(--tribute-accent)); vector-effect:non-scaling-stroke; }

@media (max-width: 520px) { .mobileViewerShell .marketRangeDock { grid-template-columns:1fr; } .mobileViewerShell .marketRangeButtons { justify-content:flex-start; } }
.mobileViewerShell .marketTicker { position:relative; overflow:hidden; }
.mobileViewerShell .marketTicker .tributeRow b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mobileViewerShell .marketTicker .tributeRow small { font-size:11px; line-height:1.25; white-space:normal; }
.mobileViewerShell .marketSpark { position:relative; min-height:112px; height:clamp(112px, 9vw, 154px); touch-action:none; cursor:crosshair; }
.mobileViewerShell .marketSpark svg { position:absolute; inset:0; width:100%; height:100%; }
.mobileViewerShell .marketSparkOverlay { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.mobileViewerShell .marketAxisLabels { position:absolute; inset:0; z-index:1; pointer-events:none; color:rgba(220,232,248,.82); font-size:clamp(10px, .72vw, 13px); font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:.01em; text-shadow:-1px -1px 0 rgba(2,6,23,.92), 1px -1px 0 rgba(2,6,23,.92), -1px 1px 0 rgba(2,6,23,.92), 1px 1px 0 rgba(2,6,23,.92), 0 2px 8px rgba(0,0,0,.75); }
.mobileViewerShell .marketYAxis span, .mobileViewerShell .marketXAxis span { position:absolute; line-height:1; white-space:nowrap; }
.mobileViewerShell .marketYAxis span { left:10px; transform:translateY(-50%); }
.mobileViewerShell .marketXAxis span { bottom:8px; transform:translateX(-50%); }
.mobileViewerShell .marketCrosshair { position:absolute; left:var(--market-tooltip-x, 8px); top:var(--market-tooltip-y, 8px); z-index:2; display:grid; gap:2px; min-width:112px; max-width:min(190px, 68%); padding:7px 9px 8px; border:1px solid color-mix(in srgb, var(--tribute-accent) 52%, rgba(255,255,255,.22)); border-radius:12px; color:#f8fbff; background:rgba(5,10,20,.92); box-shadow:0 14px 32px rgba(0,0,0,.4), 0 0 18px color-mix(in srgb, var(--tribute-accent) 28%, transparent); font-size:10px; line-height:1.18; font-variant-numeric:tabular-nums; pointer-events:none; opacity:0; transform:translateY(8px); transition:opacity .14s ease, transform .14s ease; }
.mobileViewerShell .marketCrosshair i { position:absolute; left:var(--market-pin-offset, 50%); top:calc(100% + 1px); width:2px; height:max(0px, calc(var(--market-y, 50%) - var(--market-tooltip-y, 8px) - 100%)); border-radius:999px; background:var(--tribute-accent); box-shadow:0 0 12px var(--tribute-accent); }
.mobileViewerShell .marketCrosshair span { font-weight:900; }
.mobileViewerShell .marketCrosshair b { font-size:9.5px; color:#cbd7e8; }
.mobileViewerShell .marketRangeShade { position:absolute; left:0; top:10px; bottom:14px; width:0; border-inline:1px solid color-mix(in srgb, var(--tribute-accent) 55%, transparent); background:color-mix(in srgb, var(--tribute-accent) 16%, transparent); opacity:0; pointer-events:none; }
.mobileViewerShell .marketInspecting .marketCrosshair { opacity:1; transform:translateY(0); }
.mobileViewerShell .marketSelecting .marketRangeShade { opacity:1; }
@media (max-width: 520px) { .mobileViewerShell .marketTicker { grid-template-columns:minmax(0,1fr); } .mobileViewerShell .marketTickerQuote { grid-row:1; grid-column:1; justify-self:end; align-self:start; } .mobileViewerShell .marketTicker .tributeRow { padding-right:82px; } .mobileViewerShell .marketSpark { height:118px; min-height:118px; } .mobileViewerShell .marketAxisLabels { font-size:10px; } }


/* Shared mobile App Library: one explicit SVG path forms the complete dock silhouette. */
.mobileViewerShell .dockAppLibrary {
  --dock-material:rgba(8,13,20,.86);
  --dock-notch-rise:30px;
  position:absolute;
  left:50%;
  right:auto;
  bottom:var(--mobile-dock-bottom);
  z-index:35;
  width:min(276px, calc(100dvw - var(--safe-left) - var(--safe-right) - 24px));
  transform:translateX(-50%);
  transition:width .42s cubic-bezier(.22,1,.36,1);
  isolation:isolate;
  pointer-events:none;
}
.mobileViewerShell .dockAppLibrary::before,
.mobileViewerShell .dockAppLibrary::after { content:none; display:none; }
.mobileViewerShell .dockAppLibrarySurface {
  position:absolute;
  left:0;
  bottom:0;
  z-index:0;
  display:block;
  width:100%;
  height:88px;
  overflow:visible;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.32));
  pointer-events:none;
}
.mobileViewerShell .dockAppLibrarySurface path {
  fill:var(--dock-material);
  stroke:none;
  transition:fill .3s ease;
}
.mobileViewerShell .dockAppLibrary .bottomToolbar {
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  max-height:58px;
  transform:none!important;
  z-index:1;
  overflow:visible;
  border:0;
  background:transparent!important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  pointer-events:auto;
  transition:max-height .42s cubic-bezier(.22,1,.36,1), border-radius .32s ease;
}
body[data-workspace="mobile-pro"] .mobileProShell .dockAppLibrary {
  bottom:calc(env(safe-area-inset-bottom, 0px) + var(--mobile-pro-dock-bottom-gap));
  width:min(900px, calc(100dvw - 32px));
  --dock-notch-rise:0px;
}

body[data-workspace="mobile-pro"] .mobileProShell .dockAppLibrarySurface {
  height:58px;
}

body[data-workspace="mobile-pro"] .mobileProShell .dockDrawerHandle {
  display:none;
  pointer-events:none;
}
body[data-workspace="mobile-pro"] .mobileProShell .dockAppLibrary .bottomToolbar {
  display:grid;
  grid-template-columns:repeat(var(--dock-count,6), minmax(0, 1fr));
  grid-auto-flow:column;
  gap:6px;
  padding:6px;
  transform:none!important;
  overflow:hidden;
  scrollbar-width:none;
  justify-items:center;
  align-items:center;
}
.mobileViewerShell .dockDrawerHandle {
  position:absolute;
  left:50%;
  top:calc(-1 * var(--dock-notch-rise) - 3px);
  z-index:2;
  display:block;
  width:92px;
  height:48px;
  min-width:92px;
  min-height:48px;
  padding:0;
  transform:translateX(-50%);
  appearance:none;
  border:0;
  border-radius:999px;
  background:transparent;
  box-shadow:none;
  color:rgba(238,246,255,.72);
  pointer-events:auto;
  touch-action:none;
  transition:transform .22s cubic-bezier(.22,1,.36,1), color .2s ease;
}
.mobileViewerShell .dockDrawerHandle:active {
  transform:translateX(-50%) translateY(1px) scale(.97);
  color:rgba(255,255,255,.94);
}
.mobileViewerShell .dockDrawerHandle span,
.mobileViewerShell .dockDrawerHandle::before {
  content:'';
  position:absolute;
  left:50%;
  width:30px;
  height:3px;
  transform:translateX(-50%);
  border-radius:999px;
  background:currentColor;
  transition:top .28s cubic-bezier(.22,1,.36,1), width .28s ease, transform .28s cubic-bezier(.22,1,.36,1), opacity .28s ease;
}
.mobileViewerShell .dockDrawerHandle span { top:12px; opacity:.92; }
.mobileViewerShell .dockDrawerHandle::before { top:20px; width:26px; opacity:.58; }
.mobileViewerShell .dockDrawerHandle::after { display:none; }
.mobileViewerShell:not(.dockDrawerOpen):not(.mobileProShell) .bottomToolbar button[data-toolbar]:nth-of-type(n+5) { display:none; }
.mobileViewerShell:not(.mobileProShell) .tributeCarousel { bottom:calc(var(--mobile-dock-bottom) + 104px); }

.mobileViewerShell.dockDrawerOpen .dockAppLibrary {
  --dock-material:rgba(15,23,34,.96);
  width:min(520px, calc(100dvw - 24px));
}
.mobileViewerShell.dockDrawerOpen .dockAppLibrarySurface {
  filter:drop-shadow(0 20px 38px rgba(0,0,0,.38));
}
.mobileViewerShell.dockDrawerOpen .dockDrawerHandle span {
  top:14px;
  width:34px;
  transform:translateX(-50%) translateY(1px);
}
.mobileViewerShell.dockDrawerOpen .dockDrawerHandle::before {
  top:22px;
  width:30px;
  transform:translateX(-50%) translateY(-1px);
}
.mobileViewerShell.dockDrawerOpen .bottomToolbar {
  width:100%!important;
  max-height:310px;
  grid-template-columns:repeat(4, minmax(58px, 1fr));
  grid-auto-rows:58px;
  gap:8px;
  padding:18px 10px 10px;
  border-radius:30px;
  overflow:hidden;
  scrollbar-width:none;
  background:transparent!important;
}
.mobileViewerShell.dockDrawerOpen .bottomToolbar .dockBubble { display:none; }
.mobileViewerShell.dockDrawerOpen .bottomToolbar button[data-toolbar] {
  min-height:58px;
  height:58px;
  padding:0;
  overflow:hidden;
  border-radius:20px;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.12);
  animation:dockAppReveal .38s cubic-bezier(.22,1,.36,1) both;
}
.mobileViewerShell.dockDrawerOpen .bottomToolbar button[data-toolbar] svg {
  width:24px;
  height:24px;
  max-width:24px;
  max-height:24px;
  flex:0 0 24px;
}
.mobileViewerShell.dockDrawerOpen .bottomToolbar button[data-toolbar]:nth-of-type(2),
.mobileViewerShell.dockDrawerOpen .bottomToolbar button[data-toolbar]:nth-of-type(5),
.mobileViewerShell.dockDrawerOpen .bottomToolbar button[data-toolbar]:nth-of-type(8),
.mobileViewerShell.dockDrawerOpen .bottomToolbar button[data-toolbar]:nth-of-type(11) { animation-delay:.025s; }
.mobileViewerShell.dockDrawerOpen .bottomToolbar button[data-toolbar]:nth-of-type(3),
.mobileViewerShell.dockDrawerOpen .bottomToolbar button[data-toolbar]:nth-of-type(6),
.mobileViewerShell.dockDrawerOpen .bottomToolbar button[data-toolbar]:nth-of-type(9),
.mobileViewerShell.dockDrawerOpen .bottomToolbar button[data-toolbar]:nth-of-type(12) { animation-delay:.05s; }
.mobileViewerShell.dockDrawerOpen .bottomToolbar button[data-toolbar].active {
  background:color-mix(in srgb, var(--tribute-accent) 28%, rgba(255,255,255,.08))!important;
}
.mobileViewerShell.dockDrawerOpen .tributeCarousel {
  bottom:calc(var(--mobile-dock-bottom) + 266px);
  transform:scale(.94);
  transform-origin:50% 100%;
}
.mobileViewerShell.dockDrawerOpen .adaptiveSurface[data-presentation="full-sheet"] {
  bottom:calc(var(--mobile-dock-bottom) + 278px);
}
@keyframes dockAppReveal {
  from { opacity:0; transform:translateY(12px) scale(.9); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@media (max-width:420px) {
  .mobileViewerShell.dockDrawerOpen .dockAppLibrary { width:calc(100dvw - 18px); }
  .mobileViewerShell.dockDrawerOpen .bottomToolbar {
    max-height:310px;
    grid-template-columns:repeat(3, minmax(58px, 1fr));
  }
  .mobileViewerShell.dockDrawerOpen .bottomToolbar button[data-toolbar] svg {
    width:22px;
    height:22px;
    max-width:22px;
    max-height:22px;
    flex-basis:22px;
  }
  .mobileViewerShell.dockDrawerOpen .tributeCarousel { bottom:calc(var(--mobile-dock-bottom) + 332px); }
  .mobileViewerShell.dockDrawerOpen .adaptiveSurface[data-presentation="full-sheet"] { bottom:calc(var(--mobile-dock-bottom) + 344px); }
}
@media (prefers-reduced-motion:reduce) {
  .mobileViewerShell .dockAppLibrary,
  .mobileViewerShell .dockAppLibrarySurface path,
  .mobileViewerShell .dockDrawerHandle,
  .mobileViewerShell .dockDrawerHandle span,
  .mobileViewerShell .dockDrawerHandle::before,
  .mobileViewerShell .dockAppLibrary .bottomToolbar { transition:none!important; }
  .mobileViewerShell.dockDrawerOpen .bottomToolbar button[data-toolbar] { animation:none!important; }
}
.mobileViewerShell .marketChartControls { display:grid; justify-items:end; gap:6px; }
.mobileViewerShell .marketMetricButtons { display:flex; padding:3px; gap:3px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(2,6,23,.38); }
.mobileViewerShell .marketMetricButtons button { border:0; border-radius:999px; padding:7px 11px; color:var(--muted); background:transparent; font-weight:900; font-size:11px; }
.mobileViewerShell .marketMetricButtons button.active { color:#07131f; background:linear-gradient(135deg,#f0fdfa,#5eead4); box-shadow:0 0 18px rgba(94,234,212,.25); }
@media (max-width:760px){
  .mobileViewerShell .portfolioCompact{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .mobileViewerShell .portfolioCompactBreakdown{grid-column:1/-1;grid-row:2}
  .mobileViewerShell .portfolioCompactActions{grid-column:2;grid-row:1;align-self:start}
  .mobileViewerShell .portfolioExpandedContent{max-height:38dvh}
}
@media (max-width:520px){
  .mobileViewerShell .marketChartControls { justify-items:start; }
  .mobileViewerShell .portfolioCompact{grid-template-columns:minmax(0,1fr)}
  .mobileViewerShell .portfolioCompactActions{grid-column:1;grid-row:auto;justify-content:stretch}
  .mobileViewerShell .portfolioCompactActions button{flex:1}
  .mobileViewerShell .portfolioCompactValue strong{font-size:22px}
  .mobileViewerShell .portfolioExpandedContent{max-height:42dvh}
}
@media (max-height:780px) and (min-width:521px){
  .mobileViewerShell .sponsorPortfolio{padding:8px 10px}
  .mobileViewerShell .portfolioCompactValue strong{font-size:20px}
  .mobileViewerShell .portfolioCompactBreakdown span{padding:5px 8px}
  .mobileViewerShell .portfolioCompactActions button{min-height:34px;padding:5px 9px}
  .mobileViewerShell .portfolioExpandedContent{max-height:30dvh}
}
/* Integrated public and verified Sponsor Market */
.mobileViewerShell .sponsorSignIn{position:sticky;top:0;z-index:5;justify-self:end;min-height:44px;padding:10px 16px;border:1px solid #8be9fd;border-radius:999px;background:#12364b;color:#f4fbff;font-weight:900;box-shadow:0 8px 24px #0008}
.mobileViewerShell .sponsorPortfolio{position:relative;top:auto;z-index:1;padding:10px 12px;border:1px solid #4b6b82;border-radius:16px;background:#0b1722e8;box-shadow:0 8px 22px #0005}
.mobileViewerShell .portfolioCompact{display:grid;grid-template-columns:minmax(180px,1.35fr) minmax(220px,.9fr) auto;gap:12px;align-items:center}
.mobileViewerShell .portfolioCompactValue{min-width:0}.mobileViewerShell .portfolioCompactValue small,.mobileViewerShell .portfolioCompactValue strong,.mobileViewerShell .portfolioCompactValue span{display:block}.mobileViewerShell .portfolioCompactValue small{color:#9eb0c1;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.mobileViewerShell .portfolioCompactValue strong{margin-top:2px;font-size:24px;line-height:1;font-variant-numeric:tabular-nums}.mobileViewerShell .portfolioCompactValue span{margin-top:3px;font-size:11px;font-weight:850}
.mobileViewerShell .portfolioCompactBreakdown{display:grid;grid-template-columns:repeat(2,minmax(96px,1fr));gap:6px}.mobileViewerShell .portfolioCompactBreakdown span{display:grid;gap:1px;padding:7px 9px;border-radius:10px;background:#ffffff09}.mobileViewerShell .portfolioCompactBreakdown small{color:#96a9ba;font-size:9px}.mobileViewerShell .portfolioCompactBreakdown b{font-size:12px;font-variant-numeric:tabular-nums}
.mobileViewerShell .portfolioCompactActions{display:flex;gap:6px;justify-content:flex-end}.mobileViewerShell .portfolioCompactActions button{min-height:38px;padding:7px 11px;border-radius:10px}.mobileViewerShell .portfolioToggle{border-color:#5ebfd6!important;background:#102b3a!important}.mobileViewerShell .portfolioSignOut{background:#ffffff06!important}
.mobileViewerShell .portfolioExpandedContent{display:grid;gap:10px;max-height:min(42dvh,430px);overflow:auto;overscroll-behavior:contain;margin-top:10px;padding-top:10px;border-top:1px solid #ffffff12;scrollbar-gutter:stable}
.mobileViewerShell .portfolioTitle{display:flex;align-items:center;justify-content:space-between;gap:12px}.mobileViewerShell .portfolioMetrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:0}.mobileViewerShell .portfolioMetrics span,.mobileViewerShell .detailMetrics span{padding:8px;border-radius:10px;background:#ffffff0a}.mobileViewerShell .portfolioMetrics small,.mobileViewerShell .portfolioMetrics b{display:block}.mobileViewerShell .performancePositive{color:#8ff0c8!important}.mobileViewerShell .performancePositive:before{content:'▲ ';}.mobileViewerShell .performanceNegative{color:#ffaaaa!important}.mobileViewerShell .performanceNegative:before{content:'▼ ';}
.mobileViewerShell .marketBotSummary{min-height:48px;text-align:left;background:transparent;border:0;box-shadow:none}.mobileViewerShell .marketBotSummary b,.mobileViewerShell .marketBotSummary small{display:block}.mobileViewerShell .marketFacts{grid-column:1/-1;display:flex;gap:7px;flex-wrap:wrap}.mobileViewerShell .marketFacts span{padding:5px 8px;border-radius:999px;background:#ffffff0b;font-size:11px}.mobileViewerShell .marketTradeButtons{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}.mobileViewerShell .marketTradeButtons button{min-height:48px;font-weight:900}.mobileViewerShell .marketNotice{padding:9px 12px;border-left:4px solid #8be9fd;background:#8be9fd12}
.mobileViewerShell .marketModal{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:#020617b8}.mobileViewerShell .marketPanel{position:relative;width:min(620px,100%);max-height:82dvh;overflow:auto;padding:22px;border:1px solid #55748b;border-radius:24px 24px 14px 14px;background:#0b1622;box-shadow:0 -20px 60px #000b}.mobileViewerShell .panelClose{position:sticky;z-index:2;float:right;right:0;top:0;width:44px;height:44px;border-radius:50%;font-size:22px}.mobileViewerShell .marketPanel h3{margin-right:50px}.mobileViewerShell .marketPanel label{display:grid;gap:7px;margin:14px 0;font-weight:800}.mobileViewerShell .marketPanel input,.mobileViewerShell .marketPanel select{min-height:48px;padding:0 12px;border:1px solid #55748b;border-radius:12px;background:#101f2d;color:#fff;font-size:16px}.mobileViewerShell .detailMetrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.mobileViewerShell .detailMetrics span,.mobileViewerShell .detailMetrics b{display:block}.mobileViewerShell .tradePanel dl{display:grid;gap:1px}.mobileViewerShell .tradePanel dl div{display:flex;justify-content:space-between;padding:9px;background:#ffffff09}.mobileViewerShell .tradePanel dd{font-weight:900}.mobileViewerShell .authPanel>button:last-child,.mobileViewerShell .tradePanel>button:last-child{width:100%;min-height:50px;font-weight:900}

.mobileViewerShell .marketPhase{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border:1px solid #49677e;border-radius:14px;background:#0d1925}
.mobileViewerShell .marketPhase b{font-size:12px;letter-spacing:.08em}.mobileViewerShell .marketPhase span{font-size:11px;color:#c2d1de;text-align:right}
.mobileViewerShell .marketPhaseCountdown{border-color:#d3a84d;background:#2b220f}.mobileViewerShell .marketPhaseSellOnly{border-color:#f0a25b;background:#2a180d}.mobileViewerShell .marketPhaseLocked{border-color:#d76f7a;background:#2b1015}.mobileViewerShell .marketPhaseOpen{border-color:#4d9f84;background:#0d211b}
.mobileViewerShell .portfolioHero{display:grid;gap:2px;margin-top:10px;padding:12px 2px}.mobileViewerShell .portfolioHero small{color:#9eb0c1}.mobileViewerShell .portfolioHero strong{font-size:clamp(28px,7vw,42px);line-height:1;font-variant-numeric:tabular-nums}.mobileViewerShell .portfolioHero span{font-size:13px;font-weight:800}
.mobileViewerShell .portfolioChart{display:grid;gap:5px;padding:10px;border:1px solid #ffffff14;border-radius:14px;background:#07111d}.mobileViewerShell .portfolioChart>div{display:flex;justify-content:space-between;gap:8px;font-size:11px}.mobileViewerShell .portfolioChart svg{width:100%;height:92px;overflow:visible}.mobileViewerShell .portfolioZero{fill:none;stroke:#ffffff24;stroke-width:.7;vector-effect:non-scaling-stroke}.mobileViewerShell .portfolioPnlLine{fill:none;stroke:#8be9fd;stroke-width:1.8;vector-effect:non-scaling-stroke}.mobileViewerShell .portfolioPnlLine.negative{stroke:#ff9d9d}.mobileViewerShell .portfolioChart small,.mobileViewerShell .portfolioChartEmpty{color:#93a7ba;font-size:10px}.mobileViewerShell .portfolioChartEmpty{padding:10px;border:1px dashed #ffffff1d;border-radius:12px}
.mobileViewerShell .portfolioHoldings{display:grid;gap:6px;margin-top:12px}.mobileViewerShell .portfolioHoldings h4{margin:0 0 2px}.mobileViewerShell .portfolioHolding{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:58px;padding:9px 11px;border:1px solid #ffffff12;border-radius:13px;background:#ffffff08;text-align:left}.mobileViewerShell .portfolioHolding>span:last-child{text-align:right}.mobileViewerShell .portfolioHolding b,.mobileViewerShell .portfolioHolding small{display:block}.mobileViewerShell .portfolioHolding small{margin-top:2px;color:#9eb0c1}
.mobileViewerShell .portfolioOrders{display:grid;gap:5px;padding:0;list-style:none}.mobileViewerShell .portfolioOrders li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:10px;background:#ffffff08}
.mobileViewerShell .marketTicker.hasPosition{border-color:color-mix(in srgb,var(--tribute-accent) 55%,#365064)}.mobileViewerShell .marketPositionSummary{grid-column:1/-1;display:grid;grid-template-columns:1.4fr 1fr .7fr;gap:5px;padding:7px;border-radius:12px;background:#ffffff08}.mobileViewerShell .marketPositionSummary span{display:grid;gap:2px}.mobileViewerShell .marketPositionSummary small{font-size:9px;color:#95a8bb}.mobileViewerShell .marketPositionSummary b{font-size:12px}
.mobileViewerShell .marketRules{margin:8px 0;border:1px solid #ffffff16;border-radius:12px;background:#ffffff06}.mobileViewerShell .marketRules summary{cursor:pointer;padding:10px 12px;font-weight:800}.mobileViewerShell .marketRules>div{padding:0 12px 10px}.mobileViewerShell .marketRules p{margin:8px 0;font-size:11px;color:#b9c9d8}
.mobileViewerShell .marketDetailHero,.mobileViewerShell .tradeHero{display:grid;gap:3px;margin:0 48px 10px 0}.mobileViewerShell .marketDetailHero small,.mobileViewerShell .tradeHero small{color:#7fdcf0;font-size:10px;font-weight:900;letter-spacing:.09em}.mobileViewerShell .marketDetailHero h3,.mobileViewerShell .tradeHero h3{margin:0}.mobileViewerShell .marketDetailHero strong,.mobileViewerShell .tradeHero strong{font-size:20px}.mobileViewerShell .positionDecision{padding:10px 12px;border-radius:12px;background:#ffffff08;color:#c9d7e3;font-size:12px}
.mobileViewerShell .tradePanel dl .tradeEstimate{background:#0b2130}.mobileViewerShell .tradeCostWarning{padding:10px 12px;border-left:4px solid #f0b95f;border-radius:8px;background:#f0b95f14;color:#f6deb1;font-size:12px}
.mobileViewerShell .marketTradeButtons.singleAction{grid-template-columns:1fr}

.mobileViewerShell .authPanel button:disabled{cursor:wait;opacity:.65}.mobileViewerShell .authNotice{min-height:1.5em}.mobileViewerShell .authProgress{height:4px;overflow:hidden;border-radius:999px;background:#ffffff18}.mobileViewerShell .authProgress i{display:block;width:38%;height:100%;border-radius:inherit;background:#5eead4;animation:auth-progress 1s ease-in-out infinite}@keyframes auth-progress{0%{transform:translateX(-110%)}100%{transform:translateX(365%)}}
@media(max-width:520px){
  .mobileViewerShell .sponsorPortfolio{padding:8px;border-radius:14px}
  .mobileViewerShell .portfolioTitle{gap:8px;font-size:13px}
  .mobileViewerShell .portfolioTitle button{min-height:34px;padding:5px 10px;font-size:11px}
  .mobileViewerShell .portfolioMetrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:5px}
  .mobileViewerShell .portfolioMetrics span{min-width:0;padding:5px 4px;border-radius:7px}
  .mobileViewerShell .portfolioMetrics small{font-size:9px;line-height:1.08}
  .mobileViewerShell .portfolioMetrics b{margin-top:2px;font-size:11px;line-height:1.12;overflow-wrap:anywhere}
  .mobileViewerShell .marketTicker{cursor:pointer}
  .mobileViewerShell .detailMetrics{grid-template-columns:1fr 1fr;gap:5px;margin:7px 0}
  .mobileViewerShell .marketModal{padding:0}
  .mobileViewerShell .marketPanel{max-height:88dvh;border-radius:24px 24px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .mobileViewerShell .marketDetailPanel{padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
  .mobileViewerShell .marketDetailPanel h3{margin-block:4px;font-size:18px}
  .mobileViewerShell .marketDetailPanel>p{margin:3px 0 7px;font-size:12px}
  .mobileViewerShell .marketDetailPanel>.marketSpark{height:82px;min-height:82px}
  .mobileViewerShell .marketDetailPanel .detailMetrics span{min-width:0;padding:6px;font-size:11px;line-height:1.15}
  .mobileViewerShell .marketDetailPanel .detailMetrics b{margin-top:2px;font-size:13px;overflow-wrap:anywhere}
  .mobileViewerShell .marketDetailPanel .marketTradeButtons{gap:6px}
  .mobileViewerShell .marketDetailPanel .marketTradeButtons button{min-height:40px}
  .mobileViewerShell .sponsorPortfolio{position:relative;top:auto;padding:10px}
  .mobileViewerShell .portfolioHero{padding:8px 2px}
  .mobileViewerShell .portfolioHero strong{font-size:32px}
  .mobileViewerShell .portfolioMetrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .mobileViewerShell .portfolioChart svg{height:76px}
  .mobileViewerShell .portfolioHolding{min-height:54px;padding:8px 9px}
  .mobileViewerShell .marketPhase{align-items:flex-start;flex-direction:column;gap:5px}
  .mobileViewerShell .marketPhase span{text-align:left}
  .mobileViewerShell .marketRules p{font-size:10.5px}
  .mobileViewerShell .tradePanel{padding:16px 14px calc(16px + env(safe-area-inset-bottom))}
}

/* Market layout follows the actual sheet width, not the browser/Discord viewport.
   This matters inside Discord's nested iOS/Android webviews where the Activity
   viewport can be much wider than the usable sheet. */
.mobileViewerShell .surfaceBody{min-width:0;width:100%}
.mobileViewerShell .marketSurface{container-type:inline-size}
body[data-workspace="mobile-pro"] .mobileProShell .marketSurface{grid-column:1/-1}
.mobileViewerShell .marketSurface,
.mobileViewerShell .sponsorPortfolio,
.mobileViewerShell .portfolioCompact,
.mobileViewerShell .portfolioCompactBreakdown,
.mobileViewerShell .portfolioCompactActions,
.mobileViewerShell .marketRangeDock,
.mobileViewerShell .marketChartControls,
.mobileViewerShell .marketMetricButtons,
.mobileViewerShell .marketRangeButtons,
.mobileViewerShell .marketTicker,
.mobileViewerShell .marketTickerQuote,
.mobileViewerShell .marketBotSummary,
.mobileViewerShell .marketFacts,
.mobileViewerShell .marketPositionSummary,
.mobileViewerShell .marketSpark{min-width:0;max-width:100%}
.mobileViewerShell .marketSurface{width:100%;overflow-x:clip}
.mobileViewerShell .marketBotSummary{width:100%;overflow:hidden}
.mobileViewerShell .marketBotSummary b,
.mobileViewerShell .marketBotSummary small,
.mobileViewerShell .marketTickerQuote strong{min-width:0;overflow-wrap:anywhere}
.mobileViewerShell .marketTickerQuote strong{white-space:normal;text-align:right}
.mobileViewerShell .marketRangeButtons button{min-width:0;white-space:normal}
.mobileViewerShell .marketSpark svg{max-width:100%}

@container (max-width:680px){
  .mobileViewerShell .portfolioCompact{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .mobileViewerShell .portfolioCompactBreakdown{grid-column:1/-1;grid-row:2}
  .mobileViewerShell .portfolioCompactActions{grid-column:2;grid-row:1;align-self:start}
  .mobileViewerShell .marketRangeDock{grid-template-columns:minmax(0,1fr)}
  .mobileViewerShell .marketChartControls{width:100%;justify-items:stretch}
  .mobileViewerShell .marketMetricButtons{justify-self:start;width:max-content}
  .mobileViewerShell .marketRangeButtons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;justify-content:stretch}
  .mobileViewerShell .marketRangeButtons button{padding-inline:6px}
  .mobileViewerShell .marketTicker{grid-template-columns:minmax(0,1fr)}
  .mobileViewerShell .marketBotSummary{grid-column:1;grid-row:auto;padding-right:0}
  .mobileViewerShell .marketTickerQuote{grid-column:1;grid-row:auto;justify-self:stretch;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 10px}
  .mobileViewerShell .marketTickerQuote strong{font-size:16px;text-align:left}
  .mobileViewerShell .marketTickerQuote em{margin-left:auto}
  .mobileViewerShell .marketFacts,
  .mobileViewerShell .marketPositionSummary,
  .mobileViewerShell .marketSpark,
  .mobileViewerShell .marketTradeHistory,
  .mobileViewerShell .marketTradeButtons{grid-column:1}
}
@container (max-width:420px){
  .mobileViewerShell .portfolioCompact{grid-template-columns:minmax(0,1fr)}
  .mobileViewerShell .portfolioCompactActions{grid-column:1;grid-row:auto;justify-content:stretch}
  .mobileViewerShell .portfolioCompactActions button{flex:1}
}
@container (max-width:360px){
  .mobileViewerShell .marketRangeButtons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mobileViewerShell .marketPositionSummary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mobileViewerShell .marketPositionSummary span:last-child{grid-column:1/-1}
}
.mobileViewerShell .marketTradeMarker { vector-effect:non-scaling-stroke; stroke:#07111f; stroke-width:1; }
.mobileViewerShell .marketTradeBuy { fill:#22c55e; }
.mobileViewerShell .marketTradeSell { fill:#f97316; }
.mobileViewerShell .marketTradeHistory { grid-column:1/-1; font-size:11px; color:#cbd7e8; }
.mobileViewerShell .marketTradeHistory ul { margin:6px 0; padding-left:20px; }

/* Shared verified account shell */
.accountSession{display:grid;gap:1rem;max-width:42rem;margin:0 auto;padding:clamp(1rem,4vw,2rem);border:1px solid color-mix(in srgb,var(--tribute-accent,#5eead4) 35%,transparent);border-radius:1.25rem;background:rgba(8,15,25,.78)}
.accountSession h3,.accountSession p{margin:0}.accountIdentity{display:flex;flex-direction:column;gap:.25rem}.accountIdentity strong{font-size:1.35rem}.accountSession label{display:grid;gap:.4rem}.accountSession select,.accountSession input{min-height:2.75rem;border-radius:.7rem;padding:.6rem;background:#111b2a;color:inherit;border:1px solid #526176}.accountSession button{justify-self:start;min-height:2.75rem;padding:.6rem 1rem;border-radius:999px}

.mobileViewerShell .sponsorActions{display:grid;gap:14px;max-width:52rem;margin:14px auto 0;padding:clamp(14px,3vw,22px);border:1px solid #38536b;border-radius:20px;background:rgba(8,15,25,.78)}
.mobileViewerShell .sponsorActionHeading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.mobileViewerShell .sponsorActionHeading h3,.mobileViewerShell .sponsorActionHeading p{margin:0}.mobileViewerShell .sponsorActionHeading p{margin-top:4px;color:#9fb0c7;font-size:12px;line-height:1.35}.mobileViewerShell .sponsorActionHeading>strong{white-space:nowrap;font-size:15px}
.mobileViewerShell .sponsorActionNotice{margin:0;padding:9px 11px;border:1px solid #48647d;border-radius:10px;background:#0e1b29;color:#d8e5f2;font-size:12px}
.mobileViewerShell .sponsorActionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mobileViewerShell .sponsorActionCard{display:grid;align-content:start;gap:10px;min-width:0;padding:13px;border:1px solid #334b61;border-radius:15px;background:#0c1723}
.mobileViewerShell .sponsorActionCard header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:start}.mobileViewerShell .sponsorActionCard header>span{font-size:20px}.mobileViewerShell .sponsorActionCard h4,.mobileViewerShell .sponsorActionCard p{margin:0}.mobileViewerShell .sponsorActionCard p{margin-top:2px;color:#91a7bb;font-size:11px;line-height:1.35}
.mobileViewerShell .sponsorActionCard label{display:grid;gap:5px;color:#cbd8e6;font-size:11px;font-weight:700}.mobileViewerShell .sponsorActionCard select,.mobileViewerShell .sponsorActionCard input{width:100%;min-width:0;min-height:44px;box-sizing:border-box;padding:9px 10px;border:1px solid #496279;border-radius:10px;background:#101d2b;color:#eef6ff;font:inherit;font-size:16px}.mobileViewerShell .sponsorActionCard select:disabled,.mobileViewerShell .sponsorActionCard input:disabled{opacity:.55}
.mobileViewerShell .sponsorActionSplit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.mobileViewerShell .sponsorActionSubmit{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}.mobileViewerShell .sponsorActionSubmit span{color:#98abc0;font-size:11px;line-height:1.3}.mobileViewerShell .sponsorActionSubmit button{min-height:44px;padding:9px 13px;border-radius:999px;white-space:nowrap}
@container (max-width:620px){.mobileViewerShell .sponsorActionGrid{grid-template-columns:minmax(0,1fr)}}
@container (max-width:400px){.mobileViewerShell .sponsorActionHeading,.mobileViewerShell .sponsorActionSubmit{align-items:stretch;flex-direction:column}.mobileViewerShell .sponsorActionSplit{grid-template-columns:minmax(0,1fr)}.mobileViewerShell .sponsorActionSubmit button{width:100%}}


/* Account surface layout: keep sponsor controls wide enough to remain usable.
   Mobile Pro's generic auto-fit surface grid is great for independent cards,
   but Account is one composed dashboard and must not split into three skinny columns. */
body[data-workspace="mobile-pro"] .mobileProShell .surfaceBody[data-surface="account"]{
  grid-template-columns:minmax(260px,320px) minmax(0,1fr);
  grid-template-areas:
    "profile sponsor"
    "inbox inbox";
  align-items:start;
  gap:16px;
}
body[data-workspace="mobile-pro"] .mobileProShell .surfaceBody[data-surface="account"]>.accountSession{
  grid-area:profile;
  width:100%;
  max-width:none;
  margin:0;
  box-sizing:border-box;
  align-self:start;
}
body[data-workspace="mobile-pro"] .mobileProShell .surfaceBody[data-surface="account"]>.sponsorActions{
  grid-area:sponsor;
  width:100%;
  max-width:none;
  margin:0;
  box-sizing:border-box;
  align-self:start;
}
body[data-workspace="mobile-pro"] .mobileProShell .surfaceBody[data-surface="account"]>.playerInbox{
  grid-area:inbox;
  min-width:0;
  width:100%;
  box-sizing:border-box;
}

.mobileViewerShell .playerInbox{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:12px 16px;
  padding:16px;
  border:1px solid var(--glass-border);
  border-radius:18px;
  background:rgba(8,15,25,.72);
}
.mobileViewerShell .playerInbox>h3{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:16px;
}
.mobileViewerShell .playerInbox .unreadBadge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(94,234,212,.14);
  color:#8df0df;
  font-size:11px;
  font-weight:800;
}
.mobileViewerShell .pendingDecisions,
.mobileViewerShell .playerNotifications{
  min-width:0;
  margin:0;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}
.mobileViewerShell .pendingDecisions h4{margin:0 0 8px;font-size:13px}
.mobileViewerShell .pendingDecisions>p{margin:0;color:var(--muted)}
.mobileViewerShell .decisionCard{display:grid;gap:8px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.035)}
.mobileViewerShell .decisionCard p{margin:0}
.mobileViewerShell .decisionCard>div{display:flex;flex-wrap:wrap;gap:8px}
.mobileViewerShell .decisionCard button{display:inline-flex;grid-template-columns:none;min-height:40px;padding:8px 12px}
.mobileViewerShell .playerNotifications summary{padding:0;font-size:13px}
.mobileViewerShell .notificationScroll{margin-top:10px}

.mobileViewerShell .sponsorActionCard{overflow:hidden}
.mobileViewerShell .sponsorActionCard header{min-height:auto;padding:0;border:0;background:none;position:static}
.mobileViewerShell .sponsorActionCard header>div{min-width:0}
.mobileViewerShell .sponsorActionSubmit{display:grid;grid-template-columns:minmax(0,1fr) auto}
.mobileViewerShell .sponsorActionSubmit span{min-width:0}
.mobileViewerShell .sponsorActionSubmit button{display:inline-flex;grid-template-columns:none;align-items:center;justify-content:center;text-align:center}
.mobileViewerShell .sponsorActionCard select,
.mobileViewerShell .sponsorActionCard input{overflow:hidden;text-overflow:ellipsis}
.mobileViewerShell .sponsorActionCard select{white-space:nowrap}

@media (max-width:1080px){
  body[data-workspace="mobile-pro"] .mobileProShell .surfaceBody[data-surface="account"]{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"profile" "sponsor" "inbox";
  }
  body[data-workspace="mobile-pro"] .mobileProShell .surfaceBody[data-surface="account"]>.accountSession,
  body[data-workspace="mobile-pro"] .mobileProShell .surfaceBody[data-surface="account"]>.sponsorActions{max-width:none}
}
@media (max-width:760px){
  .mobileViewerShell .sponsorActionGrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .mobileViewerShell .playerInbox{grid-template-columns:minmax(0,1fr)}
  .mobileViewerShell .playerInbox>h3{grid-column:1}
  .mobileViewerShell .sponsorActionSubmit{grid-template-columns:minmax(0,1fr)}
  .mobileViewerShell .sponsorActionSubmit button{width:100%}
}
@media (max-width:460px){
  .mobileViewerShell .sponsorActionHeading{flex-direction:column}
  .mobileViewerShell .sponsorActionSplit{grid-template-columns:minmax(0,1fr)}
}

/* Mobile Pro cinematic director: iOS-style, non-blocking live story banner. */
body[data-workspace="mobile-pro"] .mobileProShell .cinematicNotification {
  position:absolute; z-index:45; top:calc(72px + var(--safe-top)); left:50%; width:min(430px, calc(100% - 32px));
  display:grid; grid-template-columns:38px 1fr; gap:11px; align-items:center; padding:11px 14px;
  border:1px solid rgba(255,255,255,.2); border-radius:22px; color:#fff; pointer-events:none;
  background:linear-gradient(145deg,rgba(33,38,48,.88),rgba(10,14,20,.82)); backdrop-filter:blur(24px) saturate(1.35);
  box-shadow:0 18px 46px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.12);
  opacity:0; transform:translate(-50%,-18px) scale(.96); transition:opacity 420ms ease,transform 520ms cubic-bezier(.2,.8,.2,1);
}
body[data-workspace="mobile-pro"] .mobileProShell .cinematicNotification[hidden] { display:none!important; }
body[data-workspace="mobile-pro"] .mobileProShell .cinematicNotification.visible { opacity:1; transform:translate(-50%,0) scale(1); }
.mobileProShell .cinematicNotificationIcon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#9be7ff; background:linear-gradient(145deg,#176b91,#5033a0); box-shadow:inset 0 1px rgba(255,255,255,.3); }
.mobileProShell .cinematicNotification b { display:block; font-size:13px; letter-spacing:.01em; }
.mobileProShell .cinematicNotification p { margin:2px 0 0; color:rgba(238,246,255,.78); font-size:12px; line-height:1.3; }
@media (prefers-reduced-motion:reduce) { body[data-workspace="mobile-pro"] .mobileProShell .cinematicNotification { transition-duration:80ms; } }

/* Mobile Pro idle-screen editorial overlays. */
body[data-workspace="mobile-pro"] .idleMarketTicker{position:absolute;z-index:42;top:calc(var(--safe-top) + 2px);left:0;right:0;height:30px;overflow:hidden;border-block:1px solid rgba(255,255,255,.12);background:rgba(5,9,15,.76);backdrop-filter:blur(16px);pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
body[data-workspace="mobile-pro"] .idleMarketTicker[hidden],body[data-workspace="mobile-pro"] .idleNotificationCenter[hidden],body[data-workspace="mobile-pro"] .cinematicContextPanel[hidden]{display:none!important}
.idleMarketTicker>div{display:flex;width:max-content;animation:idleTickerRoll 38s linear infinite}
.idleMarketTicker span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 18px;color:#dce8f8;font-size:11px;letter-spacing:.035em;text-transform:uppercase}.idleMarketTicker em{color:#70e1ad;font-style:normal}
@keyframes idleTickerRoll{to{transform:translateX(-50%)}}
body[data-workspace="mobile-pro"] .idleNotificationCenter{position:absolute;z-index:39;top:calc(var(--safe-top) + 112px);left:50%;display:grid;gap:8px;width:min(330px,calc(100vw - 32px));transform:translateX(-50%);pointer-events:none}
.idleNotificationCenter article{display:grid;grid-template-columns:32px 1fr;gap:9px;padding:9px 11px;border:1px solid rgba(255,255,255,.15);border-radius:17px;background:rgba(12,17,25,.7);backdrop-filter:blur(20px);box-shadow:0 10px 28px rgba(0,0,0,.25)}
.idleNotificationCenter article>span{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(91,183,255,.18);color:#9be7ff}.idleNotificationCenter b{font-size:11px}.idleNotificationCenter p{margin:2px 0 0;color:rgba(238,246,255,.7);font-size:10px;line-height:1.25}
body[data-workspace="mobile-pro"] .cinematicContextPanel{position:absolute;z-index:40;left:calc(var(--safe-left) + 14px);top:50%;width:min(300px,calc(100vw - 48px));max-height:46vh;overflow:hidden;padding:16px;border:1px solid rgba(255,255,255,.18);border-radius:0 22px 22px 0;background:linear-gradient(145deg,rgba(10,17,27,.91),rgba(20,27,39,.8));backdrop-filter:blur(24px);box-shadow:18px 18px 48px rgba(0,0,0,.35);opacity:0;transform:translate(-110%,-50%);transition:transform 520ms cubic-bezier(.2,.8,.2,1),opacity 360ms ease;pointer-events:none}
body[data-workspace="mobile-pro"] .cinematicContextPanel.visible{opacity:1;transform:translate(0,-50%)}.cinematicContextPanel header{display:grid;gap:4px}.cinematicContextPanel small{color:#8bdcff;font-size:9px;letter-spacing:.16em}.cinematicContextPanel header b{font-size:14px;line-height:1.25}.idleAllianceMap,.idleMarketMoves{display:grid;gap:7px;margin-top:12px}.idleAllianceMap article,.idleMarketMoves span{display:flex;justify-content:space-between;gap:8px;padding:8px;border-radius:10px;background:rgba(255,255,255,.055);font-size:10px}.idleAllianceMap article{display:grid}.idleAllianceMap span{color:#aebdd0}.idleMarketMoves em{color:#70e1ad;font-style:normal}.idleRelationshipMap{position:relative;height:92px;margin-top:10px;background:radial-gradient(circle,rgba(92,210,255,.16),transparent 62%)}.idleRelationshipMap i{position:absolute;width:34px;height:34px;border:2px solid #75d7ff;border-radius:50%}.idleRelationshipMap i:nth-child(1){left:22px;top:29px}.idleRelationshipMap i:nth-child(2){left:89px;top:12px}.idleRelationshipMap i:nth-child(3){left:157px;top:38px}.idleRelationshipMap:before,.idleRelationshipMap:after{content:"";position:absolute;top:45px;height:1px;width:72px;background:#75d7ff;transform:rotate(-14deg)}.idleRelationshipMap:before{left:50px}.idleRelationshipMap:after{left:116px;transform:rotate(18deg)}.idleRelationshipMap span{position:absolute;right:2px;bottom:0;color:#aebdd0;font-size:10px}
@media (prefers-reduced-motion:reduce){.idleMarketTicker>div{animation:none}.cinematicContextPanel{transition-duration:80ms!important}}

/* Authenticated Mobile Pro match setup mirrors the desktop admin form. */
.mobileAdminSetup { display:grid; gap:12px; padding-bottom:8px; }
.mobileAdminSetup label { display:grid; gap:6px; color:var(--muted); font-size:12px; }
.mobileAdminSetup input, .mobileAdminSetup select { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); padding:10px; font:inherit; }
.mobileAdminSetup .fieldGrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mobileAdminSetup button[type="submit"] { min-height:44px; border:1px solid #a94c55; border-radius:10px; background:#6f2932; color:#fff; font-weight:700; }
.mobilePartyAdmin { display:grid; gap:10px; margin:4px 0; padding:14px; border:1px solid var(--line); border-radius:14px; }
.mobilePartyAdmin .partyToggle { display:flex; grid-template-columns:auto 1fr; align-items:center; }
.mobilePartyAdmin .partyToggle input { width:auto; }
.mobilePartyAdmin button { min-height:42px; border:1px solid var(--line); border-radius:10px; background:rgba(102,217,239,.12); color:var(--text); font-weight:700; }
.mobilePartyAdmin .partyBudgetRow { display:grid; grid-template-columns:minmax(0,1fr) 120px; gap:8px; align-items:center; }
.embeddedAdminFrame { grid-column:1 / -1; width:100%; height:100%; min-height:65vh; border:0; border-radius:14px; background:#0a0f16; }
@media (max-width:600px) { .mobileAdminSetup .fieldGrid { grid-template-columns:1fr; } .mobilePartyAdmin .partyBudgetRow { grid-template-columns:1fr; } .embeddedAdminFrame { min-height:72vh; } }

/* Shared character studio: one authenticated route for desktop and mobile. */
.accountSessionActions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.accountCustomize{display:inline-grid;place-items:center;min-height:44px;padding:.6rem 1rem;border-radius:999px;background:#8be9fd;color:#07111f;font-weight:800;text-decoration:none}
.profilePage{margin:0;min-height:100dvh;overflow:hidden;background:#080d16;color:#eef6ff;font-family:Inter,ui-sans-serif,system-ui,sans-serif}.profilePage *{box-sizing:border-box}.profilePage button,.profilePage select,.profilePage input,.profilePage a{font:inherit}.profileGate{min-height:100dvh;display:grid;place-content:center;gap:1rem;padding:1rem;background:radial-gradient(circle at 50% 20%,#18334b,#080d16 52%)}.profileGate>a{color:#8be9fd}.profileGate>p{max-width:38rem;color:#9fb0c3;text-align:center}
.profileStudio{height:100dvh;display:grid;grid-template-columns:minmax(15rem,20rem) minmax(25rem,1fr) minmax(14rem,18rem);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"header header header" "controls viewport layers" "actions actions actions"}.profileHeader{grid-area:header;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid #263749;background:#0c1420}.profileHeader h1,.profileHeader p{margin:.1rem 0}.profileHeader small{color:#73d9f2;letter-spacing:.16em;font-weight:800}.profileStatus{display:grid;justify-items:end;gap:.3rem;font-size:.8rem;color:#9fb0c3}.profileStatus .dirty{color:#ffd166}.profileStatus [data-tone=success]{color:#7ee2ae}.profileStatus [data-tone=error]{color:#ff8f9b}.profileViewport{grid-area:viewport;position:relative;min-width:0;min-height:0}.profileViewport canvas{display:block;width:100%;height:100%;touch-action:none}.profilePreviewFallback{position:absolute;inset:0;display:grid;place-content:center;gap:8px;padding:24px;text-align:center;background:radial-gradient(circle at 50% 35%,#213149,#101722 72%);color:#dce9f5}.profilePreviewFallback strong{font-size:1.1rem;color:#fff}.profilePreviewFallback span{max-width:28rem;color:#9fb0c3}.profileViewport>span{position:absolute;bottom:1rem;left:50%;translate:-50%;padding:.5rem .8rem;border:1px solid #ffffff24;border-radius:999px;background:#07111fcc;color:#b9c8d8;font-size:.75rem;white-space:nowrap}
.profileControls,.profileLayers{overflow:auto;padding:1.25rem;background:#0c1420}.profileControls{grid-area:controls;border-right:1px solid #263749}.profileLayers{grid-area:layers;border-left:1px solid #263749}.profileControls h2,.profileLayers h2{margin-top:0;font-size:1rem}.profileControls>label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.75rem;min-height:52px;border-bottom:1px solid #ffffff12}.profileControls input[type=color]{width:52px;height:44px;border:0;border-radius:.5rem;background:none}.profileControls select{min-height:44px;padding:.4rem;border:1px solid #405269;border-radius:.5rem;background:#101c2b;color:inherit}.profileControls fieldset{display:grid;gap:.4rem;margin:1rem 0;padding:.8rem;border:1px solid #304157;border-radius:.75rem}.profileControls fieldset label{display:flex;align-items:center;min-height:44px;gap:.6rem}.profileControls input[type=checkbox]{width:20px;height:20px}.layerTree{display:grid;gap:.35rem}.layerTree button{min-height:44px;padding:.6rem;text-align:left;border:1px solid transparent;border-radius:.55rem;background:#ffffff08;color:inherit}.layerTree button.selected{border-color:#73d9f2;background:#73d9f21a}.profileLayers p{color:#9fb0c3;font-size:.8rem}.profileActions{grid-area:actions;display:flex;align-items:center;gap:.65rem;padding:.8rem 1.25rem calc(.8rem + env(safe-area-inset-bottom));border-top:1px solid #263749;background:#0c1420}.profileActions button,.profileActions a,.profileTabs button{min-height:44px;padding:.65rem 1rem;border:1px solid #405269;border-radius:.65rem;background:#162335;color:inherit;text-decoration:none}.profileActions .primary{background:#62d4ed;color:#07111f;border-color:#62d4ed;font-weight:800}.profileActions button:disabled{opacity:.45}.profileActions a{margin-left:auto}.profileTabs{display:none}
.profileControls fieldset,.profileLayers fieldset{display:grid;gap:.65rem;margin:1rem 0;padding:.8rem;border:1px solid #304157;border-radius:.75rem}.profileControls fieldset label,.profileLayers fieldset label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.6rem;min-height:40px}.profileControls label>span,.profileLayers label>span{display:flex;align-items:center;gap:.4rem}.profileControls output,.profileLayers output{min-width:2.5rem;color:#8be9fd;font-variant-numeric:tabular-nums}.profileControls input[type=color],.profileLayers input[type=color]{width:48px;height:38px;border:0;border-radius:.45rem;background:none}.profileLayers select{max-width:9rem;padding:.4rem;border:1px solid #405269;border-radius:.5rem;background:#101c2b;color:inherit}.prefabButtons{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:.8rem}.prefabButtons button,.profileLayers .danger{min-height:40px;border:1px solid #405269;border-radius:.55rem;background:#162335;color:inherit}.profileLayers .danger{border-color:#8f4150;color:#ffabb4}.layerTree button{display:flex;justify-content:space-between;gap:.5rem}.layerTree small{color:#8ea1b7}
@media(max-width:760px){.profileStudio{position:relative;display:block;height:100dvh}.profileHeader{position:absolute;z-index:3;top:0;left:0;right:0;padding:calc(.7rem + env(safe-area-inset-top)) 1rem .7rem;background:linear-gradient(#07111fe8,transparent);border:0;pointer-events:none}.profileHeader h1{font-size:1.1rem}.profileHeader p,.profileHeader small{font-size:.65rem}.profileStatus{max-width:50%;text-align:right}.profileViewport{position:absolute;inset:0}.profileViewport>span{bottom:14rem}.profileTabs{position:absolute;z-index:5;left:.75rem;right:.75rem;bottom:9.8rem;display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.profileTabs button.active{background:#62d4ed;color:#07111f}.profileControls,.profileLayers{position:absolute;z-index:4;left:0;right:0;bottom:4.3rem;display:none;height:5.6rem;padding:.5rem .75rem;overflow-x:auto;overflow-y:hidden;border:1px solid #3b4c61;border-radius:1rem 1rem 0 0;background:#0c1420ed;backdrop-filter:blur(18px)}.profileControls.mobileActive,.profileLayers.mobileActive{display:flex;gap:.75rem;align-items:center}.profileControls h2,.profileLayers h2,.profileControls fieldset legend,.profileLayers>p{display:none}.profileControls>label{flex:0 0 auto;display:grid;min-width:7rem;border:0;font-size:.7rem}.profileControls fieldset{display:flex;flex:0 0 auto;margin:0;padding:0;border:0}.profileControls fieldset label{min-width:44px;font-size:.7rem}.layerTree{display:flex;gap:.4rem}.layerTree button{min-width:max-content}.profileActions{position:absolute;z-index:6;left:0;right:0;bottom:0;height:4.3rem;padding:.5rem max(.65rem,env(safe-area-inset-left)) calc(.5rem + env(safe-area-inset-bottom));overflow-x:auto}.profileActions button,.profileActions a{flex:0 0 auto}.profileActions a{margin-left:0}}

/* Guided character-studio workspace. */
.profileStudio{grid-template-columns:clamp(20rem,28vw,27rem) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"header header" "steps steps" "controls viewport" "actions actions"}
.studioSteps{grid-area:steps;display:flex;align-items:stretch;gap:.25rem;padding:.55rem 1rem;border-bottom:1px solid #263749;background:#0a111c;overflow-x:auto;scrollbar-width:thin}
.studioSteps button{position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;min-width:7.2rem;min-height:52px;padding:.45rem .7rem;border:1px solid transparent;border-radius:.7rem;background:transparent;color:#91a4b9;font-weight:700;cursor:pointer}
.studioSteps button:hover{background:#ffffff08;color:#dcecff}.studioSteps button.active{border-color:#55c7e5;background:#123044;color:#eefaff;box-shadow:inset 0 -2px #67ddf5}.studioSteps .detailStep{margin-left:auto;border-left-color:#2d4054}.stepIcon,.panelIcon{display:grid;place-items:center}.stepIcon svg{width:23px;height:23px}.studioSteps svg,.panelIcon svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.stepNumber{position:absolute;top:3px;left:6px;color:#60778d;font-size:.6rem}
.profileControls,.profileLayers{padding:1.35rem 1.5rem}.profileControls{display:block;grid-area:controls}.profileLayers{display:none;grid-area:controls;border-right:1px solid #263749;border-left:0}.detailMode .profileControls{display:none}.detailMode .profileLayers{display:block}.panelHeading{display:grid;grid-template-columns:48px 1fr;gap:.85rem;align-items:center;margin-bottom:1.25rem}.panelHeading h2{margin:.08rem 0;font-size:1.4rem}.panelHeading p{margin:0;color:#94a8bc;font-size:.82rem}.panelIcon{width:48px;height:48px;border:1px solid #315069;border-radius:14px;background:#102437;color:#70d9f2}.panelIcon svg{width:28px;height:28px}.panelEyebrow{color:#62d4ed;font-size:.65rem;font-weight:800;letter-spacing:.14em}.profileControls fieldset,.profileLayers fieldset{margin:0;padding:0;border:0}.profileControls fieldset legend,.profileLayers fieldset legend{width:100%;margin-bottom:.6rem;padding-bottom:.65rem;border-bottom:1px solid #263749;font-weight:750}.profileControls fieldset label,.profileLayers fieldset label{grid-template-columns:minmax(7rem,1fr) minmax(9rem,1.15fr);border-bottom:1px solid #ffffff0b}.profileControls input[type=range],.profileLayers input[type=range]{min-width:0;width:100%;accent-color:#62d4ed}.profileControls label>span,.profileLayers label>span{display:grid;grid-template-columns:minmax(5rem,1fr) 2.7rem}.inspectorBack{margin-bottom:1rem;padding:.45rem 0;border:0;background:none;color:#91dcf0;cursor:pointer}.viewportLabel{position:absolute;bottom:1rem;left:50%;display:flex;align-items:center;gap:.6rem;translate:-50%;padding:.5rem .8rem;border:1px solid #ffffff24;border-radius:999px;background:#07111fcc;color:#b9c8d8;font-size:.75rem;white-space:nowrap}.viewportLabel strong{color:#e8f8ff}.viewportLabel span{padding-left:.6rem;border-left:1px solid #405269}.profileActions{padding:.65rem 1rem}.profileActions button,.profileActions a{min-height:40px;padding:.5rem .85rem}

@media(max-width:760px){
  .profileStudio{display:grid;height:100dvh;grid-template-columns:1fr;grid-template-rows:minmax(15rem,1fr) auto minmax(14rem,42dvh) auto;grid-template-areas:"viewport" "steps" "controls" "actions"}
  .profileHeader{position:absolute}.profileViewport{position:relative;inset:auto;grid-area:viewport;min-height:0}.viewportLabel{bottom:.7rem}.viewportLabel span{display:none}
  .studioSteps{position:relative;z-index:5;grid-area:steps;padding:.4rem .55rem}.studioSteps button{flex:0 0 68px;min-width:68px;min-height:56px;flex-direction:column;gap:.1rem;padding:.3rem;font-size:.68rem}.studioSteps .detailStep{margin-left:0}.stepIcon svg{width:21px;height:21px}.stepNumber{display:none}
  .profileControls,.profileLayers{position:relative;z-index:4;display:block;grid-area:controls;inset:auto;height:auto;padding:1rem 1.1rem;overflow:auto;border:0;border-top:1px solid #33485f;border-radius:0;background:#0c1420}.profileLayers{display:none}.detailMode .profileControls{display:none}.detailMode .profileLayers{display:block}
  .panelHeading{grid-template-columns:40px 1fr;margin-bottom:.7rem}.panelIcon{width:40px;height:40px;border-radius:11px}.panelIcon svg{width:24px;height:24px}.panelHeading h2{font-size:1.1rem}.profileControls fieldset label,.profileLayers fieldset label{min-height:42px;grid-template-columns:minmax(6.5rem,1fr) minmax(8rem,1.25fr)}
  .profileActions{position:relative;z-index:6;grid-area:actions;inset:auto;height:auto;min-height:55px;padding:.45rem max(.55rem,env(safe-area-inset-left)) calc(.45rem + env(safe-area-inset-bottom));overflow-x:auto}.profileActions button,.profileActions a{flex:0 0 auto}.profileActions a{margin-left:0}
}

/* Responsive studio layout: use the available desktop canvas and make phone
   controls a conventional vertical document rather than a horizontal tray. */
@media(min-width:761px){
  .profileStudio{width:100%;max-width:none;grid-template-columns:minmax(22rem,34rem) minmax(0,1fr)}
  .profileViewport{width:100%;background:#151923}
  .profileControls fieldset{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem}
  .profileControls fieldset>legend,.profileControls fieldset>.profileHint,.profileControls fieldset>.materialControl{grid-column:1/-1}
}

@media(max-width:760px){
  .profilePage{overflow-x:hidden;overflow-y:auto}
  .profileStudio{height:auto;min-height:100dvh;grid-template-rows:clamp(18rem,42dvh,27rem) auto auto auto;overflow:visible}
  .profileViewport{height:clamp(18rem,42dvh,27rem);overflow:hidden;background:#151923}
  .profileViewport canvas{width:100%;height:100%}
  .profileHeader{position:absolute;min-width:0}
  .studioSteps{position:sticky;top:0;overscroll-behavior-x:contain}
  .profileControls,.profileLayers{height:auto;max-height:none;overflow:visible;overscroll-behavior-x:none}
  .profileControls fieldset,.profileLayers fieldset{display:block;width:100%}
  .profileControls fieldset label,.profileLayers fieldset label{display:grid;width:100%;min-width:0;grid-template-columns:1fr;gap:.35rem;padding:.7rem 0}
  .profileControls label>span,.profileLayers label>span{display:grid;width:100%;min-width:0;grid-template-columns:minmax(0,1fr) 3rem;gap:.65rem}
  .profileControls input[type=range],.profileLayers input[type=range]{width:100%;min-width:0}
  .profileActions{position:sticky;bottom:0;width:100%;box-shadow:0 -8px 24px #080d16cc}
}

/* Character Studio owns its viewport. The preview remains the primary surface
   while each controls panel scrolls independently, so adjusting a control can
   never push the character itself off screen. */
#profileApp{display:block;width:100%;max-width:none;height:100dvh;min-height:100dvh;padding:0;margin:0}
@media(min-width:761px){
  .profilePage #profileApp{position:static!important;overflow:hidden!important}
  .profilePage .profileStudio{width:100vw;max-width:none;grid-template-columns:minmax(18rem,30%) minmax(0,70%)}
  .profilePage .profileViewport{display:block!important;visibility:visible!important;min-width:20rem}
}
@media(max-width:760px){
  html:has(.profilePage),html:has(.profilePage) body.profilePage{
    position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;
    min-height:0!important;max-height:100dvh!important;overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  .profilePage #profileApp{
    position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;min-height:0!important;
    max-height:100dvh!important;overflow:hidden!important;
  }
  .profilePage .profileStudio{
    position:relative!important;width:100%!important;height:100dvh!important;min-height:0!important;
    max-height:100dvh!important;overflow:hidden!important;
    grid-template-rows:70dvh auto minmax(0,1fr) auto;
  }
  .profilePage .profileViewport{
    position:relative!important;inset:auto!important;width:100%!important;
    height:70dvh!important;min-height:0!important;overflow:hidden!important;
  }
  .profilePage .profileViewport canvas{position:static!important;inset:auto!important;width:100%!important;height:100%!important}
  .profilePage .studioSteps{touch-action:pan-x pan-y}
  .profilePage .profileControls,.profilePage .profileLayers{
    position:relative!important;inset:auto!important;width:100%!important;height:100%!important;
    min-height:0!important;max-height:none!important;overflow-x:hidden!important;overflow-y:auto!important;
    overscroll-behavior:contain;touch-action:pan-y;
  }
  .profilePage .profileControls fieldset label,.profilePage .profileLayers fieldset label{gap:.55rem;padding:.85rem 0}
  .profilePage .profileControls input[type=range],.profilePage .profileLayers input[type=range]{
    min-height:44px;padding:10px 0;touch-action:pan-y;accent-color:#62d4ed;
  }
  .profilePage .profileControls input[type=range]::-webkit-slider-thumb,
  .profilePage .profileLayers input[type=range]::-webkit-slider-thumb{width:26px;height:26px}
}

/* Character Studio direct-manipulation controls. */
.studioEditMarker{position:absolute;z-index:4;left:50%;top:45%;display:flex;align-items:center;gap:.35rem;pointer-events:none;translate:-50% -50%;color:#9cecff;font-size:.68rem;font-weight:800;text-shadow:0 1px 3px #000}.studioEditMarker i{width:34px;height:34px;border:2px solid #68d6f2;border-radius:50%;box-shadow:0 0 0 5px #68d6f225,0 0 18px #68d6f288;animation:studioMarkerPulse 1.5s ease-in-out infinite}.studioEditMarker span{padding:.2rem .4rem;border-radius:999px;background:#07111fdd}.studioEditMarker[data-area="head"],.studioEditMarker[data-area="hair"]{top:32%}.studioEditMarker[data-area="torso"],.studioEditMarker[data-area="arms"]{top:51%}.studioEditMarker[data-area="legs"]{top:72%}@keyframes studioMarkerPulse{50%{scale:1.16;opacity:.7}}
.controlCarouselNav{display:none}
.profilePage input[type=range]{cursor:grab;touch-action:none}.profilePage input[type=range]:active{cursor:grabbing}
@media(max-width:760px){
  .profilePage .profileControls fieldset{position:relative;touch-action:pan-x}
  .profilePage .profileControls fieldset>.controlSlide{display:none!important;min-height:112px;padding:1rem .7rem!important;border:0!important;border-radius:14px;background:#111e2e;box-shadow:inset 0 0 0 1px #2d4359}
  .profilePage .profileControls fieldset>.controlSlide.active{display:grid!important}
  .profilePage .profileControls fieldset>.materialControl.active{display:block!important}
  .controlCarouselNav{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:.6rem;margin:.4rem 0 .65rem;text-align:center}
  .controlCarouselNav button{min-width:44px;min-height:44px;border:1px solid #3a5573;border-radius:50%;background:#16263a;color:#dff8ff;font-size:1.15rem}.controlCarouselNav button:disabled{opacity:.25}.controlCarouselNav strong,.controlCarouselNav small{display:block}.controlCarouselNav small{margin-top:.2rem;color:#8297ab;font-size:.65rem}.carouselDots{display:flex;justify-content:center;gap:4px;margin-top:.35rem}.carouselDots i{width:4px;height:4px;border-radius:50%;background:#42566b}.carouselDots i.active{width:14px;border-radius:4px;background:#68d6f2}
  .profilePage .profileControls input[type=range],.profilePage .profileLayers input[type=range]{min-height:48px;padding:10px 0;touch-action:none}
}

/* Tactile Character Studio picker: controls revolve under the finger like an
   iOS wheel, then settle on one generously sized, directly draggable slider. */
.controlCarouselWheel{display:contents}
.studioEditMarker{transition:left .28s ease,top .28s ease}
.studioEditMarker span{max-width:9rem;white-space:nowrap}
.studioEditMarker[data-area="head"]{top:36%}
.studioEditMarker[data-control="browArch"],.studioEditMarker[data-control="browRidge"]{left:44%;top:39%}
.studioEditMarker[data-control="eyeSize"]{left:43%;top:43%}
.studioEditMarker[data-control="noseSize"]{left:50%;top:48%}
.studioEditMarker[data-control="cheekWidth"],.studioEditMarker[data-control="cheekbones"]{left:42%;top:48%}
.studioEditMarker[data-control="jawWidth"],.studioEditMarker[data-control="jawSoftness"]{left:42%;top:54%}
.studioEditMarker[data-control="chinShape"]{left:50%;top:57%}
.studioEditMarker[data-control="earSize"]{left:35%;top:47%}
.studioEditMarker[data-control="hairVolume"],.studioEditMarker[data-control="hairLength"]{left:45%;top:31%}

@media(max-width:760px){
  .profilePage .profileStudio{grid-template-rows:minmax(14rem,1fr) auto 17.25rem auto}
  .profilePage .profileViewport{height:auto!important}
  .profilePage .profileControls{padding:.55rem 1rem .8rem;overflow:hidden!important}
  .profilePage .profileControls .panelHeading{display:none}
  .profilePage .profileControls fieldset>legend,
  .profilePage .profileControls fieldset>.profileHint{display:none}
  .profilePage .profileControls fieldset{position:relative;overflow:hidden;touch-action:none}
  .controlCarouselNav{margin:.15rem 0 .45rem}
  .controlCarouselWheel{position:relative;display:block;height:184px;perspective:650px;overflow:hidden;touch-action:none;cursor:grab;mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
  .controlCarouselWheel.dragging{cursor:grabbing}
  .profilePage .profileControls .controlCarouselWheel>.controlSlide{position:absolute!important;left:.15rem;right:.15rem;top:50%;display:grid!important;min-height:124px;margin:0;padding:1rem 1.15rem!important;transform:translateY(calc(-50% + var(--wheel-offset) * 86px)) rotateX(calc(var(--wheel-offset) * -18deg)) scale(var(--wheel-scale));transform-origin:center;opacity:var(--wheel-opacity);border:0!important;border-radius:16px;background:#111e2e;box-shadow:inset 0 0 0 1px #2d4359,0 10px 25px #0005;pointer-events:none;transition:transform .32s cubic-bezier(.2,1.18,.35,1),opacity .24s ease}
  .profilePage .profileControls .controlCarouselWheel.dragging>.controlSlide{transition:none}
  .profilePage .profileControls .controlCarouselWheel>.controlSlide.active{z-index:3;display:grid!important;pointer-events:auto;font-size:1rem;font-weight:700}
  .profilePage .profileControls .controlCarouselWheel>.materialControl.active{display:block!important}
  .profilePage .profileControls .controlCarouselWheel>.controlSlide>span{grid-template-columns:minmax(0,1fr) 3.2rem;gap:.8rem;margin-top:.6rem}
  .profilePage .profileControls .controlCarouselWheel>.bodyTypeControl{padding-top:.75rem!important}
  .profilePage .profileControls .bodyTypeControl .bodyTypeHint{margin:.15rem 0 0;font-size:.64rem}
  .profilePage .profileControls .bodyTypeControl .bodyTypeEndpoints{top:35px}
  .profilePage .profileControls .controlCarouselWheel>.controlSlide input[type=range]{width:100%;min-width:0;margin:0}
  .carouselDots{max-width:12rem;margin-inline:auto;overflow:hidden}
  .carouselDots i{flex:0 0 4px}.carouselDots i.active{flex-basis:14px}
}

/* Accessory wardrobe: compact cards explain the finished object instead of
   presenting a flat list of implementation primitives. */
.accessoryLibrary{display:grid;gap:.7rem}.accessoryCategory{display:grid;gap:.35rem}.accessoryCategory h4{margin:0;color:#829bb1;font-size:.65rem;letter-spacing:.11em;text-transform:uppercase}.accessoryButtons{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin:0}.accessoryButtons button{position:relative;display:grid;grid-template-columns:2rem minmax(0,1fr);align-items:center;gap:.5rem;min-height:62px;padding:.5rem .55rem;border:1px solid #315069;border-radius:.7rem;background:linear-gradient(145deg,#132a3d,#0d1d2d);color:#dff8ff;text-align:left;box-shadow:inset 0 1px #ffffff0a;transition:border-color .16s ease,transform .16s ease,background .16s ease}.accessoryButtons button:hover{border-color:#62d4ed;background:linear-gradient(145deg,#19364d,#10263a);transform:translateY(-1px)}.accessoryButtons button:active{transform:translateY(0)}.accessoryIcon{display:grid;width:2rem;height:2rem;place-items:center;border:1px solid #4c697f;border-radius:50%;background:#081521;color:#75e5ef;font-size:1.05rem}.accessoryButtons button span:nth-child(2){display:grid;gap:.12rem}.accessoryButtons strong{font-size:.75rem}.accessoryButtons small{color:#92a9bb;font-size:.61rem;line-height:1.25}.accessoryButtons i{position:absolute;right:.35rem;top:.3rem;padding:.1rem .22rem;border-radius:.25rem;background:#d6b75c22;color:#d9c27d;font-size:.45rem;font-style:normal;letter-spacing:.06em}.profileLayers h3{margin:.9rem 0 .55rem;color:#d8e8f5;font-size:.82rem}@media(max-width:520px){.accessoryButtons{grid-template-columns:1fr}}

/* Keep account history and player navigation bounded at every viewport size. */
.playerNotifications summary { cursor:pointer; padding:12px 0; font-weight:700; }
.notificationScroll { max-height: min(40vh, 360px); overflow:auto; overscroll-behavior:contain; }
.notificationScroll .notification { display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:10px; border-bottom:1px solid #ffffff18; }
.notificationScroll .notification p { grid-column:1/-1; margin:0; }
.tributeDetailPicker { display:flex; gap:8px; overflow-x:auto; padding:8px 0 14px; flex-shrink:0; }
.tributeDetailPicker button { flex:0 0 auto; border-radius:999px; }
.tributeDetailPicker [aria-pressed=true] { border-color:#5eead4; background:#1b4547; }
.profileActions { flex-wrap:wrap; gap:8px; }
.profileControls input[type=range], .profileLayers input[type=range] { touch-action:none; cursor:ew-resize; min-height:32px; }

.eventFilterBar { display:flex; flex-wrap:wrap; gap:12px; padding-bottom:14px; }
.eventFilterBar label { display:grid; gap:6px; flex:1 1 180px; }
.eventFilterBar [data-event-count] { flex-basis:100%; }
.mobileEvents .event[hidden] { display:none!important; }

.simulationBars { list-style:none; padding:0; display:grid; gap:10px; }
.simulationBars li { display:grid; grid-template-columns:minmax(90px,1fr) minmax(80px,2fr) auto; align-items:center; gap:12px; }
.simulationBars meter { width:100%; height:18px; }

.commandSwitch { margin-left:auto; width:38px; height:22px; border-radius:999px; background:#425064; padding:3px; box-sizing:border-box; }
.commandSwitch i { display:block; width:16px; height:16px; border-radius:50%; background:#e6eef8; transition:transform .18s ease; }
.commandRow[aria-checked=true] .commandSwitch { background:#238c82; }
.commandRow[aria-checked=true] .commandSwitch i { transform:translateX(16px); }


/* Precision desktop sliders for Character Studio.
   The visual fill, large hit area and live value bubble make pointer/trackpad
   movement legible without changing the underlying character value ranges. */
.profilePage .rangeShell{display:grid!important;grid-template-columns:minmax(0,1fr) 3.35rem!important;gap:.7rem!important;align-items:center;min-width:0}
.profilePage .rangeTrackWrap{position:relative;display:block;min-width:0;padding:11px 0}
.profilePage .rangeControl output{min-width:3.35rem;padding:.24rem .38rem;border:1px solid #315069;border-radius:.45rem;background:#0b1927;color:#9cecff;text-align:center;font-size:.76rem;font-weight:800;font-variant-numeric:tabular-nums}
.profilePage .bodyTypeControl{grid-template-rows:auto auto auto}
.profilePage .bodyTypeControl .bodyTypeHint{display:block;margin:.12rem 0 .25rem;color:#8297ab;font-size:.68rem;font-weight:500;line-height:1.25}
.profilePage .bodyTypeControl .bodyTypeEndpoints{position:absolute;left:0;right:0;top:31px;display:flex;justify-content:space-between;color:#87a1b7;font-size:.62rem;font-weight:750;letter-spacing:.02em;pointer-events:none}
.profilePage .bodyTypeControl .rangeTrackWrap{padding-bottom:24px}
.profilePage input[type=range]{
  --range-progress:50%;
  -webkit-appearance:none;appearance:none;width:100%;height:28px;min-height:28px!important;margin:0;padding:0!important;
  background:transparent;outline:none;cursor:ew-resize;touch-action:none
}
.profilePage input[type=range]::-webkit-slider-runnable-track{
  height:7px;border-radius:999px;border:1px solid #2d4359;
  background:linear-gradient(90deg,#62d4ed 0 var(--range-progress),#203244 var(--range-progress) 100%);
  box-shadow:inset 0 1px 2px #0008
}
.profilePage input[type=range]::-moz-range-track{height:7px;border-radius:999px;border:1px solid #2d4359;background:#203244;box-shadow:inset 0 1px 2px #0008}
.profilePage input[type=range]::-moz-range-progress{height:7px;border-radius:999px;background:#62d4ed}
.profilePage input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-7px;border:2px solid #bff6ff;border-radius:50%;
  background:#36badb;box-shadow:0 2px 7px #0009,0 0 0 4px #62d4ed20;transition:transform .10s ease,box-shadow .10s ease
}
.profilePage input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border:2px solid #bff6ff;border-radius:50%;background:#36badb;
  box-shadow:0 2px 7px #0009,0 0 0 4px #62d4ed20;transition:transform .10s ease,box-shadow .10s ease
}
.profilePage input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 2px 8px #0009,0 0 0 6px #62d4ed28}
.profilePage .rangeAdjusting input[type=range]::-webkit-slider-thumb,
.profilePage input[type=range].isFluidDragging::-webkit-slider-thumb{transform:scale(1.18);box-shadow:0 2px 10px #0009,0 0 0 8px #62d4ed30}
.profilePage .rangeAdjusting input[type=range]::-moz-range-thumb,
.profilePage input[type=range].isFluidDragging::-moz-range-thumb{transform:scale(1.18);box-shadow:0 2px 10px #0009,0 0 0 8px #62d4ed30}
.profilePage input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #0c1420,0 0 0 6px #9cecff}
.profilePage .rangeValueBubble{
  position:absolute;z-index:8;left:var(--range-progress);top:-17px;translate:-50% -100%;min-width:4.2rem;padding:.32rem .48rem;
  border:1px solid #59cae8;border-radius:.5rem;background:#071521f2;color:#e8fbff;text-align:center;
  font-size:.70rem;font-weight:850;font-variant-numeric:tabular-nums;white-space:pre;pointer-events:none;
  opacity:0;transform:translateY(4px) scale(.96);transition:opacity .10s ease,transform .10s ease;box-shadow:0 7px 20px #0008
}
.profilePage .rangeValueBubble::after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;translate:-50%;rotate:45deg;background:#071521;border-right:1px solid #59cae8;border-bottom:1px solid #59cae8}
.profilePage .rangeAdjusting .rangeValueBubble{opacity:1;transform:translateY(0) scale(1)}
.profilePage .rangeControl.rangeAdjusting{position:relative;z-index:3;background:#62d4ed08}
.profilePage .rangeControl.rangeAdjusting>span output{border-color:#62d4ed;background:#102b3b;color:#dffbff}
@media(max-width:760px){
  .profilePage .rangeTrackWrap{padding:13px 0}
  .profilePage input[type=range]{height:34px;min-height:34px!important}
  .profilePage input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-9px}
  .profilePage input[type=range]::-moz-range-thumb{width:24px;height:24px}
  .profilePage .rangeValueBubble{top:-14px}
}


/* Character Studio slider interaction v2: desktop sliders are deliberately
   single-column and physically large. Do not compress two precision controls
   beside each other; cursor travel is the precision budget on macOS. */
@media(min-width:761px){
  .profilePage .profileControls fieldset,
  .profilePage .profileLayers fieldset{
    grid-template-columns:minmax(0,1fr)!important;
    column-gap:0!important;
  }
  .profilePage .profileControls fieldset>legend,
  .profilePage .profileControls fieldset>.profileHint,
  .profilePage .profileControls fieldset>.materialControl,
  .profilePage .profileLayers fieldset>legend,
  .profilePage .profileLayers fieldset>.profileHint,
  .profilePage .profileLayers fieldset>.materialControl{grid-column:1!important}
  .profilePage .profileControls,
  .profilePage .profileLayers{padding-inline:1.65rem}
  .profilePage .profileControls fieldset .rangeControl,
  .profilePage .profileLayers fieldset .rangeControl{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:.38rem!important;
    width:100%;
    min-height:92px;
    padding:.8rem 0 .95rem!important;
  }
  .profilePage .rangeLabelText{
    display:block!important;
    width:100%;
    color:#d8e8f5;
    font-size:.86rem;
    font-weight:720;
    letter-spacing:.005em;
  }
  .profilePage .rangeShell{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    gap:.22rem .75rem!important;
    width:100%;
    min-width:0;
  }
  .profilePage .rangeShell>output{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    min-width:4.25rem;
    font-size:.82rem;
  }
  .profilePage .rangeTrackWrap{
    grid-column:1/-1;
    grid-row:2;
    width:100%;
  }
}

/* The wrapper exclusively owns pointer dragging. The native range stays
   keyboard-focusable but cannot run WebKit's competing pointer drag logic. */
.profilePage .fluidRangeSurface{
  position:relative;
  display:block;
  width:100%;
  min-width:0;
  min-height:52px;
  padding:19px 0 17px;
  cursor:ew-resize;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.profilePage .fluidRangeNative{pointer-events:none}
.profilePage input[type=range]{
  height:16px!important;
  min-height:16px!important;
}
.profilePage input[type=range]::-webkit-slider-runnable-track{height:10px}
.profilePage input[type=range]::-moz-range-track,
.profilePage input[type=range]::-moz-range-progress{height:10px}
.profilePage input[type=range]::-webkit-slider-thumb{
  width:30px;height:30px;margin-top:-11px;
  border-width:3px;
  box-shadow:0 3px 10px #000a,0 0 0 5px #62d4ed24;
}
.profilePage input[type=range]::-moz-range-thumb{
  width:30px;height:30px;border-width:3px;
  box-shadow:0 3px 10px #000a,0 0 0 5px #62d4ed24;
}
.profilePage .fluidRangeSurface.isFluidDragging input[type=range]::-webkit-slider-thumb{
  transform:scale(1.1);
  box-shadow:0 3px 12px #000b,0 0 0 10px #62d4ed32;
}
.profilePage .fluidRangeSurface.isFluidDragging input[type=range]::-moz-range-thumb{
  transform:scale(1.1);
  box-shadow:0 3px 12px #000b,0 0 0 10px #62d4ed32;
}
.profilePage .rangeValueBubble{top:-4px;font-size:.76rem;min-width:5rem;padding:.38rem .52rem}


/* One coordinate system for Mac pointer, fill and thumb. Safari's native thumb
   has inset endpoint geometry that does not match a full-width custom drag
   surface, so hide it and paint the visible handle from --range-progress. */
.profilePage .fluidRangeSurface{overflow:visible}
.profilePage .fluidRangeSurface::after{
  content:"";
  position:absolute;
  z-index:3;
  left:var(--range-progress);
  top:50%;
  width:30px;
  height:30px;
  border:3px solid #bff6ff;
  border-radius:50%;
  background:#36badb;
  box-shadow:0 3px 10px #000a,0 0 0 5px #62d4ed24;
  transform:translate(-50%,-50%);
  pointer-events:none;
  transition:transform .08s ease,box-shadow .08s ease;
}
.profilePage .fluidRangeSurface.isFluidDragging::after{
  transform:translate(-50%,-50%) scale(1.1);
  box-shadow:0 3px 12px #000b,0 0 0 10px #62d4ed32;
}
.profilePage .fluidRangeSurface:focus-within::after{
  box-shadow:0 0 0 3px #0c1420,0 0 0 7px #9cecff55;
}
.profilePage .fluidRangeNative::-webkit-slider-thumb{opacity:0!important;box-shadow:none!important}
.profilePage .fluidRangeNative::-moz-range-thumb{opacity:0!important;box-shadow:none!important}

.reloadRecoveryPrompt {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 95;
  width: min(390px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid rgba(255,209,102,.58);
  border-radius: 12px;
  background: rgba(18, 24, 34, .96);
  box-shadow: 0 18px 48px rgba(0,0,0,.48);
  backdrop-filter: blur(14px);
}
.reloadRecoveryPrompt strong { display: block; margin-bottom: 7px; font-size: 15px; color: var(--text); }
.reloadRecoveryPrompt p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.reloadRecoveryActions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.reloadRecoveryActions button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--stroke);
  border-radius: 7px;
  background: rgba(255,255,255,.07);
  color: var(--text);
  cursor: pointer;
}
.reloadRecoveryActions button:disabled { cursor: wait; opacity: .68; }
.reloadRecoveryActions .reloadRecoveryPrimary {
  border-color: rgba(255,209,102,.6);
  background: rgba(255,209,102,.13);
}
@media (max-width: 520px) {
  .reloadRecoveryPrompt { right: 10px; bottom: 10px; width: calc(100vw - 20px); }
  .reloadRecoveryActions { display: grid; grid-template-columns: 1fr; }
  .reloadRecoveryActions button { min-height: 44px; }
}


/* Match-scoped live speed adjustment — independent of restart configuration. */
.liveSpeedBoost {
  display: grid;
  gap: 9px;
  padding: 12px 14px;
  margin: 12px 0;
  border: 1px solid rgba(180, 194, 209, .23);
  border-radius: 14px;
  background: rgba(150, 177, 205, .06);
}
.liveSpeedBoost > label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.liveSpeedBoost output {
  font-variant-numeric: tabular-nums;
  font-size: 1.1rem;
}
.liveSpeedBoost input[type="range"] {
  display: block;
  flex-basis: 100%;
  width: 100%;
  accent-color: var(--accent, #8db5e8);
  min-height: 32px;
  cursor: pointer;
}
.liveSpeedBoost [data-live-speed-description],
.liveSpeedBoost [data-live-speed-status] {
  margin: 0;
  line-height: 1.4;
}
.liveSpeedBoost [data-live-speed-status]:empty { display: none; }

/* Alliance operations: shared stock, finite work and per-member blockers. */
.selectedAlliancePill { pointer-events:auto; grid-column:2; justify-self:center; border:1px solid #ba9354; border-radius:999px; padding:6px 14px; color:#ffe1a6; background:#182634ee; cursor:pointer; max-width:100%; }
.allianceNamePill { border:1px solid #8b7856; border-radius:999px; background:#253440; color:#ffe1a6; padding:6px 14px; cursor:pointer; font:inherit; text-align:left; }
.allianceDashboard { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; gap:18px; color:#dce8f7; padding:8px 0 24px; }
.allianceDashboard section,.allianceDashboardHero { min-width:0; overflow-wrap:anywhere; background:#172434; border:1px solid #34475e; border-radius:18px; padding:18px; }
.allianceDashboard h2 { margin:10px 0; font-size:26px; }
.allianceDashboard h3 { margin:0 0 14px; font-size:17px; }
.allianceDashboard p { line-height:1.55; }
.allianceDashboard small,.allianceDashboard .muted { color:#acbed2; line-height:1.5; }
.allianceDashboardMetrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:20px; }
.allianceDashboardMetrics div { display:grid; gap:6px; }
.allianceDashboardMetrics b { font-size:19px; color:#ffe1a6; overflow-wrap:anywhere; }
.allianceDashboardMetrics span { font-size:12px; color:#b5c6da; }
.allianceNextActions { display:grid; gap:12px; padding-left:22px; }
.allianceNextActions span { display:block; color:#bacbe0; margin-top:4px; }
.allianceDashboardNotice { padding:12px; background:#59482d55; border-left:3px solid #d0a957; border-radius:6px; }
.allianceWorkforce,.allianceProjectList { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.allianceWorker { border-top:1px solid #34475e; padding:12px 0; }
.allianceWorker button { background:transparent; color:#e6f1ff; border:0; text-decoration:underline; text-underline-offset:4px; font-weight:700; padding:4px 0; cursor:pointer; }
.allianceJob { display:inline-block; float:right; border:1px solid #4e7080; color:#9dddd5; border-radius:999px; font-size:12px; padding:4px 10px; }
.allianceJob.blocked { color:#ffe1a6; border-color:#b79654; }
.allianceWorker p { clear:both; margin:9px 0; }
.allianceResourceScroll { overflow-x:auto; }
.allianceDashboard table { width:100%; border-collapse:collapse; font-size:13px; }
.allianceDashboard caption { text-align:left; color:#acbed2; margin-bottom:12px; }
.allianceDashboard th,.allianceDashboard td { text-align:right; padding:10px 8px; border-bottom:1px solid #34475e; white-space:nowrap; }
.allianceDashboard th:first-child { text-align:left; }
.allianceDashboard tr.shortfall td:nth-child(2) { color:#ffe1a6; font-weight:800; }
.allianceResourceHeading { margin:4px 0 10px; font-size:14px; color:#ffe1a6; letter-spacing:.02em; }
.allianceDashboard section > p + .allianceResourceHeading { margin-top:22px; padding-top:18px; border-top:1px solid #34475e; }
.foodStoreSummary { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.foodStoreSummary b { font-size:22px; color:#e6f1ff; font-variant-numeric:tabular-nums; }
.foodStoreSummary b small { font-size:13px; font-weight:400; color:#acbed2; }
.foodStoreState { font-size:12px; border:1px solid #4e7080; color:#9dddd5; border-radius:999px; padding:4px 10px; }
.foodStore.short .foodStoreState { color:#ffe1a6; border-color:#b79654; }
.foodStore.full .foodStoreState { color:#acbed2; border-color:#52657c; }
.foodStoreBar { position:relative; height:14px; border-radius:999px; background:#0e1824; border:1px solid #34475e; overflow:hidden; }
.foodStoreSegment { position:absolute; top:0; bottom:0; transition:left .4s ease,width .4s ease; }
.foodStoreSegment + .foodStoreSegment { box-shadow:inset 1px 0 0 #0e1824; }
.foodStoreSegment.incoming { background:repeating-linear-gradient(135deg,#8cd5bc66 0 5px,#8cd5bc22 5px 10px); }
.foodStoreMinimum { position:absolute; top:-1px; bottom:-1px; width:2px; margin-left:-1px; background:#ffe1a6; }
.foodStoreScale { position:relative; height:18px; margin-top:6px; font-size:11px; color:#acbed2; font-variant-numeric:tabular-nums; }
.foodStoreScale span { position:absolute; top:0; white-space:nowrap; }
.foodStoreScale span:first-child { left:0; }
.foodStoreScale span:nth-child(2) { transform:translateX(-50%); color:#ffe1a6; }
.foodStoreScale span:last-child { right:0; }
.allianceDashboard .foodStoreMeta { font-size:13px; margin:10px 0 4px; }
.allianceDashboard .foodEach { display:block; margin:3px 0 0 18px; font-size:11px; font-weight:400; }
.foodSwatch { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:8px; vertical-align:-1px; }
.allianceDashboard tfoot th,.allianceDashboard tfoot td { font-weight:800; color:#e6f1ff; border-bottom:0; }
@media(max-width:480px) { .allianceDashboard .foodStoreTable th,.allianceDashboard .foodStoreTable td { padding:10px 5px; } .allianceDashboard .foodStoreTable thead th { white-space:normal; font-size:12px; } }
.allianceDashboard .foodStoreTable th,.allianceDashboard .foodStoreTable td { overflow-wrap:normal; }
.allianceDashboard td.foodStoreEmpty { text-align:left; color:#acbed2; }
@media (prefers-reduced-motion:reduce) { .foodStoreSegment { transition:none; } }
.allianceProjectList li>div { display:flex; gap:12px; justify-content:space-between; margin-bottom:8px; }
.allianceProjectList progress { width:100%; accent-color:#8cd5bc; }
.allianceProjectList small { display:block; margin-top:6px; }
.allianceDashboard button:focus-visible,.selectedAlliancePill:focus-visible,.allianceNamePill:focus-visible { outline:3px solid #ffe1a6; outline-offset:4px; }
@media(max-width:480px) { .allianceDashboardMetrics { grid-template-columns:1fr; } .allianceDashboard section,.allianceDashboardHero { padding:14px; } }

.allianceDashboard header.allianceDashboardHero { display:block; height:auto; position:static; backdrop-filter:none; }
.allianceDashboardHero .allianceStatus { display:block; }

/* Shared alliance building blocks: camp strip, bars and stability meters.
   The clusters overview and the dashboard header render the same strip. */
.allianceStrip { display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:8px; }
.allianceTile { display:grid; gap:3px; align-content:start; min-width:0; padding:9px 10px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(0,0,0,.18); color:#edf5ff; font:inherit; text-align:left; }
button.allianceTile { cursor:pointer; transition:border-color .15s ease,background .15s ease; }
button.allianceTile:hover { border-color:var(--alliance-color,#8291a6); background:rgba(255,255,255,.05); }
.allianceTileLabel { color:#8fa5be; font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.allianceTile b { color:#edf5ff; font-size:15px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.allianceTile.warn b { color:#ffe1a6; }
.allianceTile small { color:#8fa5be; font-size:11px; }
.allianceTile .allianceTileOf { color:#8fa5be; font-size:11px; font-weight:400; }
.allianceBar { display:block; height:5px; margin-top:4px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.09); }
.allianceBar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#55d6be,#a6efc6); }
.allianceTile.warn .allianceBar i { background:linear-gradient(90deg,#c99a4a,#ffe1a6); }
.allianceBar.small { width:56px; margin:5px 0 0 auto; }
.foodStoreBar.compact { height:5px; margin-top:4px; border:0; background:rgba(255,255,255,.09); }
.foodStoreBar.compact .foodStoreMinimum { width:1px; }

/* Clusters overview: one card per alliance, every part links onward. */
.mobileViewerShell .allianceClusters { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:12px; align-items:start; }
.mobileViewerShell .allianceCard { gap:12px; padding:14px; border-top:3px solid var(--alliance-color,#425165); }
.mobileViewerShell .allianceCard>header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.allianceCardTitle { display:flex; align-items:center; gap:10px; min-width:0; padding:4px 0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.allianceCardTitle .allianceEmblem { width:30px; height:30px; }
.allianceCardTitle span { display:grid; gap:2px; min-width:0; }
.allianceCardTitle b { color:#f3f7ff; font-size:16px; overflow-wrap:anywhere; }
.allianceCardTitle small { color:#8fa5be; font-size:11px; }
.allianceCardTitle:hover b { text-decoration:underline; text-underline-offset:4px; }
.allianceCardCount { flex-shrink:0; color:#aebed0; font-size:11px; }
.allianceCardStability { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(0,0,0,.12); color:inherit; font:inherit; text-align:left; cursor:pointer; }
.allianceCardStability:hover { border-color:var(--alliance-color,#8291a6); }
.allianceCardWatch { grid-column:1/-1; color:#ffbd7a; font-size:11px; }
.allianceRoster { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.allianceRoster button { display:grid; grid-template-columns:8px auto; column-gap:7px; align-items:center; padding:6px 11px; border:1px solid var(--glass-border,#34475e); border-radius:999px; background:rgba(255,255,255,.04); color:#edf5ff; font:inherit; text-align:left; cursor:pointer; }
.allianceRoster button:hover { background:rgba(255,255,255,.09); }
.allianceRoster .memberDot { grid-row:1/3; width:8px; height:8px; border-radius:50%; background:var(--tribute-accent); box-shadow:0 0 8px var(--tribute-accent); }
.allianceRoster b { font-size:12px; }
.allianceRoster small { color:#8fa5be; font-size:10px; }
.allianceCardOpen { min-height:42px; border:1px solid var(--alliance-color,#8291a6); border-radius:10px; background:color-mix(in srgb,var(--alliance-color,#8291a6) 18%,transparent); color:#f3f7ff; font:inherit; font-weight:700; cursor:pointer; }
.allianceCardOpen:hover { background:color-mix(in srgb,var(--alliance-color,#8291a6) 30%,transparent); }
.mobileViewerShell .allianceUnallied { gap:8px; }

/* Dashboard: identity header, sticky tabs, one panel at a time. */
.allianceDashboard header.allianceDashboardHero { display:grid; gap:14px; }
.allianceBack { justify-self:start; padding:6px 12px; border:1px solid #34475e; border-radius:999px; background:none; color:#dce8f7; font:inherit; font-size:13px; cursor:pointer; }
.allianceBack:hover { border-color:#8b7856; color:#ffe1a6; }
.allianceIdentity { display:flex; align-items:center; gap:14px; min-width:0; }
.allianceIdentity .allianceEmblem { width:44px; height:44px; }
.allianceIdentity h2 { margin:2px 0; }
.allianceIdentity p { margin:0; color:#acbed2; }
.allianceTabs { position:sticky; top:0; z-index:2; display:flex; gap:4px; overflow-x:auto; padding:6px; border:1px solid #34475e; border-radius:14px; background:#0f1a27f2; backdrop-filter:blur(8px); scrollbar-width:none; }
.allianceTabs::-webkit-scrollbar { display:none; }
.allianceTabs button { flex:0 0 auto; padding:9px 14px; border:0; border-radius:10px; background:transparent; color:#acbed2; font:inherit; font-size:13px; font-weight:700; white-space:nowrap; cursor:pointer; }
.allianceTabs button:hover { color:#e6f1ff; }
.allianceTabs button[aria-selected="true"] { background:#253440; color:#ffe1a6; box-shadow:inset 0 -2px 0 var(--alliance-color,#d0a957); }
.alliancePanel { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; min-width:0; }
.allianceRoleChips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; padding:0; list-style:none; }
.allianceRoleChips li { padding:6px 12px; border:1px solid #4e7080; border-radius:999px; color:#9dddd5; font-size:13px; text-transform:capitalize; }
.allianceRoleChips li.blocked { border-color:#b79654; color:#ffe1a6; }
.allianceRoleChips b { color:#e6f1ff; }
.allianceLink { padding:4px 0; border:0; background:none; color:#9dddd5; font:inherit; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.allianceReport>summary { padding:4px 0; color:#ffe1a6; font-weight:700; cursor:pointer; }
.allianceReport[open]>summary { margin-bottom:10px; }
.allianceDashboard .alliancePulse { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px 16px; }
.allianceDashboard .allianceMeter span { font-size:12px; }
.allianceDashboard .allianceMeter i { height:6px; }
.allianceDashboard .allianceChallenge { margin-top:14px; font-size:13px; }
.allianceDashboard .allianceChallenge span { font-size:11px; }
.allianceDashboard .allianceMember summary { padding:12px; }
.allianceDashboard .allianceMember summary b { font-size:14px; }
.allianceDashboard .allianceMember summary small { font-size:11px; }
.allianceDashboard .allianceMember summary em { font-size:12px; }
.allianceDashboard .memberPolitics { padding:0 12px 12px 28px; }
.allianceDashboard .memberPolitics p,.allianceDashboard .memberPolitics dl div { font-size:12px; }
.allianceDashboard .memberPolitics button { font-size:12px; }
.allianceDashboard .allianceLineage { padding:0; border-top:0; }
.allianceDashboard .allianceLineage p { font-size:13px; }
.allianceDashboard .allianceLineage dl div,.allianceDashboard .allianceLineage li { font-size:12px; grid-template-columns:110px 1fr; }
.allianceCardTitle:focus-visible,.allianceCardStability:focus-visible,.allianceCardOpen:focus-visible,.allianceRoster button:focus-visible,button.allianceTile:focus-visible,.allianceBack:focus-visible,.allianceTabs button:focus-visible,.allianceLink:focus-visible { outline:3px solid #ffe1a6; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { button.allianceTile { transition:none; } }
/* The sheet styles every header as its title bar and every button as a
   two-column row; alliance views lay theirs out themselves. */
.mobileViewerShell .allianceCard>header { height:auto; min-height:0; padding:0; border:0; background:none; grid-template-columns:none; grid-template-rows:none; }
.surfaceBody button.allianceBack,.surfaceBody button.allianceCardOpen,.surfaceBody button.allianceLink { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.surfaceBody button.allianceBack,.surfaceBody button.allianceLink { justify-content:flex-start; }
@media(max-width:480px) { .allianceTabs { flex-wrap:wrap; } .surfaceBody .allianceTabs button { flex:1 1 auto; padding:8px 10px; } }
.allianceDashboard header.allianceDashboardHero { grid-template-columns:minmax(0,1fr); grid-template-rows:none; align-items:start; min-height:0; }
.surfaceBody>.allianceClusters { grid-column:1/-1; }
.surfaceBody button.allianceTile,.surfaceBody button.allianceCardOpen,.surfaceBody button.allianceBack,.surfaceBody button.allianceLink { grid-template-columns:minmax(0,1fr); min-height:0; }
.surfaceBody button.allianceTile { padding:9px 10px; gap:3px; }
.surfaceBody button.allianceCardOpen { min-height:42px; place-items:center; text-align:center; }
.surfaceBody button.allianceBack { padding:6px 12px; }
.surfaceBody button.allianceLink { padding:4px 0; }
.surfaceBody button.allianceCardTitle { display:flex; min-height:0; padding:4px 0; border:0; border-radius:0; background:none; box-shadow:none; }
.surfaceBody button.allianceCardStability { grid-template-columns:1fr 1fr; gap:8px 12px; min-height:0; padding:10px; }
.surfaceBody .allianceRoster button { grid-template-columns:8px auto; gap:0 7px; min-height:0; padding:6px 11px; }
.surfaceBody .allianceTabs button { display:block; min-height:0; padding:9px 14px; text-align:center; }

/* Character identity colors and a shared family of alliance shields. */
.allianceEmblem{display:inline-block;flex-shrink:0;vertical-align:middle}
.allianceNamePill{display:inline-flex;align-items:center;gap:6px}
.allianceDashboardHero{border-color:var(--alliance-color,#425165)}
.allianceCluster[data-alliance-color]{border-color:var(--alliance-color,#425165)}
.identityPaletteDialog{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;border:1px solid #52657c;border-radius:18px;padding:22px;background:#111e2e;color:#edf3fa}
.identityPaletteDialog::backdrop{background:#030912bb}
.identityPaletteDialog header{display:flex;align-items:center;justify-content:space-between;gap:14px}
.identityPaletteDialog header h2{margin:0;font-size:20px}
.identityPaletteDialog header button{min-width:44px;min-height:44px}
.identityPaletteDialog p{font-size:14px;line-height:1.5;color:#bac8d9}
.identityPalette{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:7px;margin:18px 0}
.profilePage .identityPalette button{padding:0!important;width:100%;height:30px;min-width:0;min-height:30px;border-radius:6px;border:1px solid #708299;background:var(--identity-swatch)}
.profilePage .identityPalette button[aria-pressed=true]{outline:2px solid #edf3fa;outline-offset:2px}
.identityPaletteDialog label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.identityPaletteDialog output{display:block;margin-top:10px;font-size:13px;color:#c3cfde}
@media(max-width:560px){.identityPalette{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(pointer:coarse){.profilePage .identityPalette button{height:44px;min-height:44px}}


/* Live Roster: the same translucent identity/border/activity language as the
   floating character nametags, with a denser set of legible survival stats. */
#botList { gap: 6px; }
.botRow.rosterNameTag {
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  width: 100%;
  min-width: 0;
  padding: 8px 9px 8px 7px;
  border: 1px solid var(--roster-rim, #9bafbf);
  border-left-width: 3px;
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(240,250,255,.09), rgba(240,250,255,0) 44%),
    linear-gradient(125deg, rgba(84,119,144,.35), rgba(27,53,72,.76) 43%, rgba(8,24,39,.91));
  color: #f8fbff;
  box-shadow: inset 0 1px 0 rgba(241,250,255,.13), 0 3px 12px rgba(0,8,18,.14);
  isolation: isolate;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.botRow.rosterNameTag:hover { border-color: #e1f1ff; box-shadow: inset 0 1px 0 rgba(241,250,255,.17), 0 3px 14px rgba(0,8,18,.3); }
.botRow.rosterNameTag:focus-visible { outline: 2px solid #f9e8a0; outline-offset: 2px; }
.botRow.rosterNameTag.selected {
  border-color: #ffe08b;
  box-shadow: inset 0 0 0 1px rgba(255,224,139,.42), 0 0 0 2px rgba(255,224,139,.13);
}
.botRow.rosterNameTag.dead {
  opacity: .86;
  background: linear-gradient(125deg, rgba(110,48,66,.46), rgba(58,19,38,.74) 47%, rgba(35,11,27,.9));
}
.botRow.rosterNameTag.dead .rosterTagPortrait { filter: grayscale(.85); }
.rosterTagPortrait {
  position: relative;
  display: block;
  width: 36px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 9px;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255,255,255,.36), transparent 53%), var(--roster-identity, #8291a6);
  box-shadow: inset 0 -10px 12px rgba(0,11,21,.17);
}
.rosterTagPortrait::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,.78);
}
.rosterTagPortrait::after {
  content: '';
  position: absolute;
  width: 27px;
  height: 22px;
  left: 4px;
  bottom: -7px;
  border-radius: 55% 55% 0 0;
  background: rgba(255,255,255,.68);
}
.rosterTagContent, .rosterTagTop, .rosterTagIdentity,
.rosterTagContext, .rosterTagVitals { min-width: 0; }
.rosterTagContent { display: grid; gap: 4px; }
.rosterTagTop { display: flex; align-items: flex-start; gap: 5px; justify-content: space-between; }
.rosterTagIdentity { display: grid; gap: 2px; flex: 1 1 auto; }
.botRow.rosterNameTag .rosterTagName {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.12;
  font-weight: 700;
}
.rosterTagAlliance {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  line-height: 1.1;
  color: #c5d5e3;
}
.rosterTagAlliance.affiliated { color: #e8f3ff; }
.rosterTagAlliance .allianceEmblem { width: 11px; height: 11px; }
.rosterTagActivity {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 48%;
  padding: 3px 5px;
  border: 1px solid rgba(235,247,255,.19);
  border-radius: 7px;
  background: rgba(6,16,28,.44);
  color: #eef6fd;
  font-size: 9px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rosterTagActivity.is-injured, .rosterTagActivity.is-fallen { color: #ffb5c6; }
.rosterTagActivity.is-combat { color: #ffd69a; }
.rosterTagActivity.is-asleep { color: #b6d5ff; }
.rosterTagContext { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #c7d6e5; }
.rosterTagWeapon { flex: 0 0 auto; max-width: 76%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rosterTagWeapon b { font-size: 8px; font-weight: 750; color: #f5d891; }
.rosterTagWeapon em { font-style: normal; color: #f5d891; }
.rosterTagTraits { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a9bdce; }
.rosterTagVitals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding-top: 1px; }
.rosterTagVital { display: grid; gap: 3px; min-width: 0; font-variant-numeric: tabular-nums; }
.rosterTagVitalText { display: flex; justify-content: space-between; align-items: baseline; gap: 2px; min-width: 0; color: #b6cadb; font-size: 8px; line-height: 1; white-space: nowrap; }
.rosterTagVitalText b { font-size: 10px; font-weight: 650; color: #eff7ff; }
.rosterTagVitalTrack { display: block; height: 3px; overflow: hidden; border-radius: 100px; background: rgba(230,242,255,.17); }
.rosterTagVitalTrack i { display: block; height: 100%; border-radius: inherit; }
@media (max-width: 520px) {
  .botRow.rosterNameTag { grid-template-columns: 31px minmax(0, 1fr); gap: 7px; padding: 7px; }
  .rosterTagPortrait { width: 31px; height: 39px; }
  .rosterTagPortrait::before { left: 10px; }
  .rosterTagPortrait::after { left: 2px; }
  .rosterTagVitals { gap: 3px; }
}

.rosterTagAllianceLabel, .rosterTagActivityLabel {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rosterTagGoal {
  flex: 0 1 auto;
  max-width: 30%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #c9dff0;
  padding-left: 5px;
  border-left: 1px solid rgba(235,247,255,.23);
}

/* The tribute configuration roster reuses the same row component. */
.botLabRoster .botRow.rosterNameTag {
  height: auto;
  min-height: 0;
  justify-content: initial;
  text-align: left;
  padding: 8px 9px 8px 7px;
}
@media (max-width: 760px) {
  .botLabRoster { grid-template-columns: minmax(0, 1fr); max-height: 240px; }
}

/* Navigation uses the same button box for layout, focus, hover and activation. */
.mobileViewerShell .dockBubble { display:none!important; }
.mobileViewerShell .dockAppLibrary .bottomToolbar { display:grid; grid-template-columns:repeat(var(--dock-count),minmax(0,1fr)); grid-auto-flow:row; gap:4px; padding:6px; max-height:none; }
.mobileViewerShell .dockAppLibrary .bottomToolbar button[data-toolbar] { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; justify-self:stretch; gap:4px; width:100%; min-width:0; min-height:46px; margin:0; padding:6px 2px; border:1px solid transparent; border-radius:16px; transform:none; transition:background .15s ease,border-color .15s ease; touch-action:pan-y; }
.mobileViewerShell .dockAppLibrary .bottomToolbar button[data-toolbar] svg { display:block; flex:none; width:24px; height:24px; margin:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mobileViewerShell .dockLabel { display:none; font-size:11px; line-height:14px; font-weight:600; white-space:nowrap; }
.mobileViewerShell .dockAppLibrary .bottomToolbar button[data-toolbar]:is(:hover,:focus-visible) { transform:none; background:rgba(255,255,255,.12); }
.mobileViewerShell .dockAppLibrary .bottomToolbar button[data-toolbar].active { background:color-mix(in srgb,var(--tribute-accent) 24%,#14202c); border-color:color-mix(in srgb,var(--tribute-accent) 65%,transparent); }
.mobileViewerShell .dockAppLibrary .bottomToolbar button[data-toolbar]:focus-visible { outline:2px solid #a2e9ff; outline-offset:1px; }
body[data-workspace="mobile-pro"] .mobileProShell .dockAppLibrary { width:min(720px,calc(100dvw - 32px)); }
body[data-workspace="mobile-pro"] .mobileProShell .dockAppLibrary .bottomToolbar { grid-template-columns:repeat(var(--dock-count),minmax(0,1fr)); gap:4px; padding:6px; align-items:stretch; justify-items:stretch; overflow:visible; }
body[data-workspace="mobile-pro"] .mobileProShell .dockLabel,.mobileViewerShell.dockDrawerOpen .dockLabel { display:block; }
body[data-workspace="mobile-pro"] .mobileProShell .dockAppLibrary .bottomToolbar button[data-toolbar] { min-height:58px; }
body[data-workspace="mobile-pro"] .mobileProShell .adaptiveSurface[data-presentation="full-sheet"] { bottom:calc(var(--mobile-dock-bottom) + 88px); }
.mobileViewerShell.dockDrawerOpen .dockAppLibrary .bottomToolbar { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:none; }
.mobileViewerShell.dockDrawerOpen .dockAppLibrary .bottomToolbar button[data-toolbar] { display:flex; min-height:64px; animation:none; }
.mobileViewerShell.dockDrawerOpen .dockAppLibrary .bottomToolbar button[data-toolbar] svg { width:24px; height:24px; }
.mobileViewerShell .activityTabs { display:flex; gap:8px; grid-column:1/-1; }
.mobileViewerShell .activityTabs button { flex:1; min-height:44px; }
.mobileViewerShell .activityTabs button[aria-current="page"] { background:#24445a; border-color:#9cdfff; }
.mobileViewerShell .adminToolIcon { display:inline-block; width:22px; height:22px; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
body[data-workspace="mobile-pro"] .mobileProShell .tributeCarousel { bottom:calc(var(--mobile-dock-bottom) + 88px); }
body[data-workspace="mobile-pro"] .mobileProShell .dockTooltip { bottom:calc(var(--mobile-dock-bottom) + 78px); }
.mobileViewerShell .cameraControls { display:flex; align-items:center; gap:8px; min-width:0; pointer-events:auto; }
.mobileViewerShell .studioLightControl { flex:none; min-height:44px; white-space:nowrap; }
.mobileViewerShell .studioLightControl.active { background:color-mix(in srgb,var(--tribute-accent) 28%,rgba(255,255,255,.08)); border-color:var(--tribute-accent); }
.mobileViewerShell .studioLightControl:focus-visible { outline:2px solid #a2e9ff; outline-offset:2px; }
.mobileViewerShell:not(.mobileProShell) .cameraControls { justify-content:center; width:100%; }
.mobileViewerShell:not(.mobileProShell) .cameraControls .cameraModeSelector { flex:0 1 auto; }
@media(max-width:420px) { .mobileViewerShell:not(.mobileProShell) .studioLightControl { padding:0 8px; font-size:11px; } }
.mobileViewerShell .dockAppLibrary .bottomToolbar { grid-template-rows:none; touch-action:pan-y; }
body[data-workspace="mobile-pro"] .mobileProShell .dockAppLibrary .bottomToolbar { grid-template-rows:none; grid-auto-flow:row; }
.mobileViewerShell .dockAppLibrary .bottomToolbar button[data-toolbar]:is(:hover,:focus-visible) { background:rgba(255,255,255,.12)!important; }
.mobileViewerShell .dockAppLibrary .bottomToolbar button[data-toolbar].active { background:color-mix(in srgb,var(--tribute-accent) 24%,#14202c)!important; }
body[data-workspace="mobile-pro"] .mobileProShell .dockTooltip { top:auto; left:50%; transform:translateX(-50%); }
body:is([data-workspace="mobile"],[data-workspace="mobile-pro"]) .terrainAnalysisHost { display:none!important; }
.mobileViewerShell .surfaceBody .terrainAnalysisHost.mobileProTerrainControls { display:block!important; grid-column:1/-1; min-width:0; }

/* Selected player: an unobstructed portrait, nametag identity and four distinct gauges. */
.mobileViewerShell .tributeCarousel { left:calc(12px + var(--safe-left)); right:calc(12px + var(--safe-right)); grid-template-columns:44px minmax(0,680px) 44px; }
.mobileViewerShell .tributeCard {
  position:relative; display:grid; grid-template-columns:96px minmax(0,1fr) 268px; grid-template-rows:auto auto; gap:6px 18px;
  min-height:132px; padding:18px 18px 16px; border-radius:23px!important;
  background:linear-gradient(115deg,rgba(77,104,121,.94),rgba(25,47,63,.96) 48%,rgba(11,29,42,.97))!important;
  border:1px solid var(--card-frame,var(--tribute-accent))!important;
  box-shadow:inset 0 1px 0 #effaff30,inset 0 0 0 3px #ffffff05,0 14px 32px #0005;
}
.mobileViewerShell .tributeCard.active { box-shadow:inset 0 1px 0 #effaff30,inset 0 0 0 3px #ffffff05,0 14px 32px #0005; }
.mobileViewerShell .tributeCard .grab { position:absolute; top:7px; left:calc(50% - 16px); width:32px; height:3px; background:#c5dae333; }
.mobileViewerShell .tributeCard span,.mobileViewerShell .tributeCard b,.mobileViewerShell .tributeCard small { white-space:normal; overflow:visible; }
.mobileViewerShell .playerCardPortrait { display:block; width:96px; height:96px; grid-row:1/3; align-self:center; }
.mobileViewerShell .playerCardAvatar { display:block; width:100%; height:100%; border-radius:17px; border:1px solid #ffffff4d; box-shadow:0 6px 18px #07121b40; }
.mobileViewerShell .playerCardIdentity { min-width:0; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; align-content:end; }
.mobileViewerShell .tributeCard .playerCardName { display:block; min-width:0; max-width:100%; color:#f7fbff; font-size:25px; font-weight:650; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mobileViewerShell .playerCardStatus { padding:3px 6px; border-radius:6px; color:#a6edcc; background:#72efac10; font-size:9px; font-weight:650; }
.mobileViewerShell .playerCardAction { flex-basis:100%; color:#d6e4ed; font-size:12px; line-height:1.35; overflow-wrap:anywhere; }
.mobileViewerShell .playerCardVitals { grid-column:3; grid-row:1/3; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; align-self:center; min-width:0; padding-left:14px; border-left:1px solid #deefff1a; }
.mobileViewerShell .playerCardVital { display:grid; grid-template-columns:minmax(0,1fr); gap:5px; justify-items:center; min-width:0; }
.mobileViewerShell .vitalGauge { position:relative; display:block; width:100%; max-width:56px; min-width:0; aspect-ratio:1; }
.mobileViewerShell .vitalGauge svg { display:block; width:100%; height:100%; transform:rotate(-90deg); }
.mobileViewerShell .vitalGauge circle { fill:none; stroke-width:3.5; stroke-linecap:round; }
.mobileViewerShell .vitalGauge .vitalTrack { stroke:#e6f4ff15; }
.mobileViewerShell .vitalGauge [data-vital-ring] { stroke:var(--vital-color); }
.mobileViewerShell .vitalGauge [data-unknown="true"] { opacity:.3; }
.mobileViewerShell .vitalReading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; color:var(--vital-color); font-variant-numeric:tabular-nums; }
.mobileViewerShell .vitalReading strong { font-size:21px; font-weight:650; line-height:1.05; }
.mobileViewerShell .vitalUnit { font-size:8px; line-height:1.1; color:#b9cbd8; }
.mobileViewerShell .vitalLabel { color:#d9e6ee; font-size:10px; line-height:1.3; }
.mobileViewerShell .vitalLow .vitalLabel::after { content:' !'; color:var(--vital-color); font-weight:800; }
.mobileViewerShell .playerCardEquipment { grid-column:2; display:flex; align-items:center; align-self:start; gap:6px; min-width:0; padding-top:2px; }
.mobileViewerShell .playerCardWeaponIcon { flex:none; width:25px; height:25px; }
.mobileViewerShell .tributeCard .playerCardWeapon { font-size:12px; color:#edf4fa; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mobileViewerShell .playerCardTier { flex:none; padding:3px 5px; border-radius:5px; font-size:9px; font-weight:650; color:#c7d5e1; }
.mobileViewerShell .playerCardTier:empty { display:none; }
.mobileViewerShell .playerCardTier[data-tier="bronze"] { color:#e5ad80; background:#e5ad8015; }
.mobileViewerShell .playerCardTier[data-tier="silver"] { color:#e4eef8; background:#e4eef815; }
.mobileViewerShell .playerCardTier[data-tier="gold"] { color:#ffe08b; background:#ffe08b15; }
.mobileViewerShell .playerFallen .playerCardStatus { color:#ffb9c9; background:#ff668e18; }
.mobileViewerShell .playerFallen .playerCardAvatar { filter:saturate(.35); }
@media(max-width:800px) {
  .mobileViewerShell .tributeCard { grid-template-columns:82px minmax(0,1fr); gap:12px; padding:18px 14px 12px; }
  .mobileViewerShell .playerCardPortrait { width:82px; height:82px; grid-row:1; }
  .mobileViewerShell .playerCardIdentity { align-content:center; }
  .mobileViewerShell .tributeCard .playerCardName { font-size:23px; }
  .mobileViewerShell .playerCardVitals { grid-column:1/-1; grid-row:2; padding:12px 0 0; border-left:0; border-top:1px solid #deefff1a; }
  .mobileViewerShell .playerCardEquipment { grid-column:1/-1; grid-row:3; padding-top:0; }
}
@media(max-width:600px) {
  .mobileViewerShell .tributeCard { grid-template-columns:78px minmax(0,1fr); gap:10px; padding:17px 12px 11px; }
  .mobileViewerShell .playerCardPortrait { width:78px; height:78px; }
  .mobileViewerShell .tributeCard .playerCardName { font-size:22px; }
  .mobileViewerShell .playerCardStatus { font-size:9px; }
  .mobileViewerShell .playerCardAction { font-size:11px; }
  .mobileViewerShell .playerCardVitals { gap:5px; padding-top:10px; }
  .mobileViewerShell .vitalGauge { max-width:46px; }
  .mobileViewerShell .vitalReading strong { font-size:18px; }
  .mobileViewerShell .playerCardEquipment { gap:4px; }
  .mobileViewerShell .tributeCard .playerCardWeapon { font-size:11px; }
}
@media(max-width:340px) {
  .mobileViewerShell .tributeCarousel { grid-template-columns:32px minmax(0,1fr) 32px; gap:6px; }
  .mobileViewerShell .tributeCarousel > button:is(.carouselPrev,.carouselNext) { width:32px; min-width:32px; }
  .mobileViewerShell .tributeCard { grid-template-columns:64px minmax(0,1fr); padding-inline:8px; gap:8px; }
  .mobileViewerShell .playerCardPortrait { width:64px; height:64px; }
  .mobileViewerShell .vitalReading strong { font-size:15px; }
  .mobileViewerShell .vitalUnit { font-size:7px; }
  .mobileViewerShell .vitalLabel { font-size:9px; }
}
@media(prefers-reduced-motion:no-preference) { .mobileViewerShell [data-vital-ring] { transition:stroke-dasharray .3s ease; } }

/* The compact player card is reparented into this same expanding surface. */
.mobileViewerShell .playerPanelHero[hidden] { display:none; }
.mobileViewerShell.playerMorphActive .tributeCarousel { pointer-events:none; }
.mobileViewerShell .playerCardMorphPlaceholder { grid-column:2; width:100%; min-width:0; }
.mobileViewerShell .adaptiveSurface.playerMorphPanel {
  position:absolute; left:12px; right:12px; top:calc(12px + var(--safe-top)); bottom:calc(14px + var(--safe-bottom)); width:auto; max-height:none;
  display:grid; grid-template-rows:auto auto minmax(0,1fr); transform:none; transform-origin:center; overflow:hidden;
  background:linear-gradient(115deg,rgba(77,104,121,.94),rgba(25,47,63,.96) 48%,rgba(11,29,42,.97));
  border-color:var(--card-frame,var(--tribute-accent)); box-shadow:inset 0 1px 0 #effaff30,0 20px 60px #0007;
}
body[data-workspace="mobile-pro"] .mobileProShell .adaptiveSurface.playerMorphPanel { left:max(24px,calc((100dvw - 1040px)/2)); right:max(24px,calc((100dvw - 1040px)/2)); top:calc(76px + var(--safe-top)); bottom:calc(var(--mobile-dock-bottom) + 88px); width:auto; max-height:none; }
.mobileViewerShell .playerMorphPanel > .surfaceHeader {
  position:relative; display:flex; align-items:center; justify-content:space-between; min-height:0; height:calc(54px * var(--player-expansion,0));
  padding:0 12px; border:0; background:transparent; overflow:hidden; opacity:clamp(0,calc((var(--player-expansion,0) - .55) * 2.23),1); touch-action:none;
}
.mobileViewerShell .playerMorphPanel > .surfaceHeader > span { display:none; }
.mobileViewerShell .playerMorphPanel .surfaceHeader .surfaceTitle { flex:1; text-align:center; font-size:12px; color:#c8d9e5; }
.mobileViewerShell .playerMorphPanel .surfaceGrabZone { position:absolute; top:0; left:48px; right:48px; height:16px; min-height:0; }
.mobileViewerShell .playerMorphPanel .surfaceClose { flex:none; margin-left:auto; }
.mobileViewerShell .playerPanelHero { min-width:0; touch-action:none; }
.mobileViewerShell .playerPanelHero .tributeCard {
  width:100%; border:0!important; border-radius:0!important; box-shadow:none; background:transparent!important;
  grid-template-columns:calc(96px + 32px * var(--player-expansion,0)) minmax(0,1fr) calc(268px + 36px * var(--player-expansion,0));
  min-height:calc(132px + 32px * var(--player-expansion,0));
}
.mobileViewerShell .playerPanelHero .tributeCard .grab { display:none; }
.mobileViewerShell .playerPanelHero .playerCardPortrait { width:calc(96px + 32px * var(--player-expansion,0)); height:calc(96px + 32px * var(--player-expansion,0)); }
.mobileViewerShell .playerPanelHero .playerCardName { font-size:calc(25px + 8px * var(--player-expansion,0)); }
.mobileViewerShell .playerPanelHero .vitalGauge { max-width:calc(56px + 10px * var(--player-expansion,0)); }
.mobileViewerShell .playerMorphPanel > .surfaceBody { display:block; min-height:0; padding:12px 18px 24px; overflow:auto; overscroll-behavior:contain; opacity:clamp(0,calc((var(--player-expansion,0) - .35) * 1.54),1); }
.mobileViewerShell .playerMorphPanel .tributeDetailPicker { padding:0 0 14px; }
.mobileViewerShell .playerMorphPanel .playerDetail { display:grid; gap:14px; background:transparent; border:0; padding:0; transform:none; }
.mobileViewerShell .playerMorphPanel .playerDetail > :is(section,.statGrid) { min-width:0; margin:0; }
.mobileViewerShell .playerMorphPanel .playerDetail > section { padding:16px; border:1px solid #cfebff16; border-radius:16px; background:#d6ebff06; }
.mobileViewerShell .playerMorphPanel .statGrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.mobileViewerShell .playerMorphPanel .statCard { min-width:0; border-color:#cfebff16; border-radius:14px; background:#d6ebff06; }
.mobileViewerShell .playerMorphPanel .inventoryItems { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; }
.mobileViewerShell .playerMorphPanel .inventoryItem { margin:0; border-radius:10px; background:#0717225e; }
.mobileViewerShell .playerMorphPanel .playerTraits { color:#bfd3e0; font-size:12px; }
.mobileViewerShell:not(.mobileProShell).playerMorphActive .dockAppLibrary { pointer-events:none; }
@media(max-width:800px) {
 .mobileViewerShell .playerPanelHero .tributeCard { grid-template-columns:calc(82px + 22px * var(--player-expansion,0)) minmax(0,1fr); }
 .mobileViewerShell .playerPanelHero .playerCardPortrait { width:calc(82px + 22px * var(--player-expansion,0)); height:calc(82px + 22px * var(--player-expansion,0)); }
 .mobileViewerShell .playerPanelHero .playerCardName { font-size:calc(23px + 5px * var(--player-expansion,0)); }
}
@media(max-width:600px) {
 .mobileViewerShell .playerPanelHero .tributeCard { grid-template-columns:calc(78px + 22px * var(--player-expansion,0)) minmax(0,1fr); }
 .mobileViewerShell .playerPanelHero .playerCardPortrait { width:calc(78px + 22px * var(--player-expansion,0)); height:calc(78px + 22px * var(--player-expansion,0)); }
 .mobileViewerShell .playerPanelHero .playerCardName { font-size:calc(22px + 6px * var(--player-expansion,0)); }
 .mobileViewerShell .playerPanelHero .vitalGauge { max-width:calc(46px + 12px * var(--player-expansion,0)); }
 .mobileViewerShell .playerMorphPanel > .surfaceBody { padding:10px 12px 20px; }
 .mobileViewerShell .playerMorphPanel .statGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:340px) {
 .mobileViewerShell .playerPanelHero .tributeCard { grid-template-columns:calc(64px + 22px * var(--player-expansion,0)) minmax(0,1fr); }
 .mobileViewerShell .playerPanelHero .playerCardPortrait { width:calc(64px + 22px * var(--player-expansion,0)); height:calc(64px + 22px * var(--player-expansion,0)); }
}
@media(prefers-reduced-motion:no-preference) {
 .mobileViewerShell .playerMorphPanel:not([data-player-dragging="true"]) .tributeCard { transition:grid-template-columns .32s cubic-bezier(.22,1,.36,1); }
 .mobileViewerShell .playerMorphPanel:not([data-player-dragging="true"]) :is(.playerCardPortrait,.playerCardName,.vitalGauge) { transition:width .32s cubic-bezier(.22,1,.36,1),height .32s cubic-bezier(.22,1,.36,1),font-size .32s cubic-bezier(.22,1,.36,1),max-width .32s cubic-bezier(.22,1,.36,1); }
 .mobileViewerShell .playerMorphPanel:not([data-player-dragging="true"]) > .surfaceBody { transition:opacity .22s ease; }
}
@media(prefers-reduced-motion:no-preference) {
 .mobileViewerShell .playerMorphPanel:not([data-player-dragging="true"]) > .surfaceHeader { transition:height .32s cubic-bezier(.22,1,.36,1),opacity .2s ease; }
}

/* On phones the resting card is a compact glass nametag; the same elements
   interpolate back to the full profile proportions as the sheet expands. */
@media(max-width:600px) {
 .mobileViewerShell .tributeCarousel > .tributeCard,
 .mobileViewerShell .playerPanelHero .tributeCard {
  --card-open:var(--player-expansion,0);
  grid-template-columns:calc(40px + 60px * var(--card-open)) minmax(0,1fr);
  min-height:0; gap:calc(6px + 4px * var(--card-open));
  padding:calc(10px + 7px * var(--card-open)) 12px calc(9px + 2px * var(--card-open));
 }
 .mobileViewerShell .tributeCarousel > .tributeCard {
  background:linear-gradient(115deg,rgba(77,104,121,.58),rgba(25,47,63,.64) 48%,rgba(11,29,42,.7))!important;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 #effaff24,0 8px 24px #0003;
 }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) { grid-template-rows:calc(40px + 60px * var(--card-open)) auto auto; }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .playerCardPortrait { grid-row:1; }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .playerCardIdentity { display:contents; }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .playerCardName { grid-column:2; grid-row:1; align-self:center; padding-right:38px; }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .playerCardStatus { grid-column:2; grid-row:1; align-self:center; justify-self:end; }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .playerCardAction { grid-column:1/-1; grid-row:2; align-self:center; width:50%; display:flex; align-items:center; justify-content:center; gap:4px; white-space:nowrap; overflow:hidden; font-size:10px; }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .playerCardEquipment { grid-column:1/-1; grid-row:2; width:50%; margin-left:50%; gap:3px; align-self:center; justify-content:center; }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .playerCardWeaponIcon { width:18px; height:18px; }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .playerCardWeapon { font-size:10px; }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .playerCardTier { font-size:8px; padding:2px 3px; }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .playerCardVitals { grid-row:3; }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .playerCardPortrait {
  width:calc(40px + 60px * var(--card-open)); height:calc(40px + 60px * var(--card-open));
 }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .playerCardAvatar { border-radius:12px; }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .playerCardName { font-size:calc(18px + 10px * var(--card-open)); }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .playerCardIdentity { gap:3px 6px; }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .playerCardVitals { padding-top:calc(5px + 5px * var(--card-open)); gap:5px; }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .playerCardVital { gap:3px; }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .vitalGauge { max-width:calc(34px + 24px * var(--card-open)); }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .vitalReading strong { font-size:calc(14px + 4px * var(--card-open)); }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .vitalUnit { font-size:7px; }
 .mobileViewerShell :is(.tributeCarousel > .tributeCard,.playerPanelHero .tributeCard) .vitalLabel { font-size:calc(9px + 1px * var(--card-open)); }
 .mobileViewerShell .playerPanelHero .playerCardEquipment { max-height:none; overflow:hidden; opacity:1; }
 .mobileViewerShell .adaptiveSurface.playerMorphPanel {
  background:linear-gradient(115deg,rgba(77,104,121,calc(.58 + .36 * var(--player-expansion,0))),rgba(25,47,63,calc(.64 + .32 * var(--player-expansion,0))) 48%,rgba(11,29,42,calc(.7 + .27 * var(--player-expansion,0))));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
 }
}

.mobileViewerShell .playerPanelHero .tributeCard .grab { display:block; opacity:calc(1 - var(--player-expansion,0)); }

.mobileViewerShell .playerCardAction { display:flex; align-items:center; gap:4px; }
.mobileViewerShell .playerCardActivityIcon { display:block; width:14px; height:14px; flex:none; }
.mobileViewerShell .playerCardActionText { min-width:0; overflow:hidden!important; text-overflow:ellipsis; white-space:nowrap!important; }

/* Direct manipulation must not inherit performance mode's 80ms pointer lag. */
.mobileViewerShell .playerMorphPanel,
.mobileViewerShell .playerMorphPanel * { transition-duration:var(--player-motion-duration,0ms)!important; }
/* Centre the layout box before scaling: individual scale must not scale a
   translateX(-50%) centring transform and move the dock sideways. */
.mobileViewerShell:not(.mobileProShell) .dockAppLibrary { left:0; right:0; margin-inline:auto; transform:none; transform-origin:50% 50%; }
.mobileViewerShell .tributeCard,
.mobileViewerShell .playerMorphPanel { outline:none; -webkit-tap-highlight-color:transparent; }
.mobileViewerShell .tributeCard::after { content:''; position:absolute; inset:2px; border:2px solid #a2e9ff; border-radius:inherit; opacity:0; pointer-events:none; }
.mobileViewerShell .tributeCard:focus-visible::after { opacity:1; }
.mobileViewerShell .tributeCard .grab { touch-action:none; }

/* Arena layer palette: thumb-sized controls, with the scene kept in view. */
.viewerLayers { position:absolute; top:calc(112px + var(--safe-top, 0px)); right:calc(12px + var(--safe-right, 0px)); z-index:35; pointer-events:auto; color:#e9f2fa; font:500 12px/1.3 system-ui,sans-serif; }
.viewerLayers button { color:inherit; font:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.viewerLayers svg { width:23px; height:23px; flex:none; }
.viewerLayersTrigger { display:flex; align-items:center; gap:8px; min-height:48px; padding:10px 13px; border:1px solid #c7e4ff35; border-radius:17px; background:#101f2ee8; box-shadow:0 4px 18px #0004; backdrop-filter:blur(18px); }
.viewerLayersTrigger[aria-expanded=true] { border-color:#8cd9f5; background:#203e50; }
.viewerLayersCount { display:grid; place-items:center; min-width:18px; height:18px; border-radius:50%; color:#10202e; background:#9de2fa; font-size:10px; }
.viewerLayersPalette { position:absolute; top:58px; right:0; width:min(288px, calc(100vw - 24px)); padding:14px; box-sizing:border-box; border:1px solid #c7e4ff35; border-radius:22px; background:#101f2ef2; box-shadow:0 12px 40px #0006; backdrop-filter:blur(22px); animation:viewerLayersIn .16s ease-out; max-height:calc(100dvh - 250px); overflow:auto; }
.viewerLayersPalette header { position:static; min-height:0; height:auto; margin:0; background:transparent; border:0; display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:0 2px 12px; }
.viewerLayersPalette header strong { font-size:13px; }
.viewerLayersPalette header > span { color:#a2b8c9; font-size:10px; }
.viewerLayersGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.viewerLayersGrid button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:74px; padding:10px 4px; border:1px solid #bedcf51c; border-radius:14px; background:#ffffff06; }
.viewerLayersGrid button[aria-pressed=true] { background:#75d4f51a; border-color:#8cdefa9c; color:#a9eaff; }
.viewerLayersGrid button i { position:absolute; top:4px; right:5px; font-size:10px; font-style:normal; visibility:hidden; }
.viewerLayersGrid button[aria-pressed=true] i { visibility:visible; }
.viewerLayers button:focus-visible { outline:2px solid #b2ecff; outline-offset:3px; }
.viewerLayers button:disabled { opacity:.4; cursor:default; }
.viewerLayers [hidden] { display:none!important; }
.mobileViewerShell.majorSurfaceOpen .viewerLayers { display:none; }
.mobileProShell .viewerLayers { top:calc(76px + var(--safe-top, 0px)); }
@media (hover:hover) { .viewerLayers button:hover { border-color:#a9eaff; background-color:#244052; } }
@media (max-height:580px) and (orientation:landscape) { .viewerLayers { top:calc(98px + var(--safe-top, 0px)); } .viewerLayersPalette { top:0; right:calc(100% + 8px); width:min(280px,calc(100vw - 150px)); max-height:calc(100dvh - 120px); } }
@media (prefers-reduced-motion:reduce) { .viewerLayersPalette { animation:none; } }
@keyframes viewerLayersIn { from { opacity:0; transform:translateY(-6px) scale(.97); } to { opacity:1; transform:none; } }
.desktopViewerLayers { top:76px; }
/* Wherever the minimap shows, the Layers trigger sits directly under its card (frame + padding + key row + borders + 10px gap). */
@media (hover:hover) and (pointer:fine) and (min-width:1181px) { .desktopViewerLayers, .mapPanel .mobileProShell .viewerLayers { top:calc(var(--mini-map-top) + var(--mini-map-size) + 52px); } }
body.viewerFocusMode .desktopViewerLayers, body[data-workspace="mobile-pro"] .desktopViewerLayers { display:none; }
@media (max-width:1180px), (pointer:coarse) { .desktopViewerLayers { display:none; } }

/* Timeline scrubber: hold the right-hand pill to rewind through recorded history. */
.timelineScrubber { --tl-accent:#ffc861; --tl-accent-ink:#1b1204; --tl-death:#ff6b7a; --tl-skull-eye:#2a0d12; --tl-glass:rgba(10,14,20,.86); --tl-border:rgba(255,255,255,.14); --tl-left:12px; --tl-right:12px; --tl-top:30vh; position:fixed; z-index:9000; top:var(--tl-top); right:var(--tl-right); left:auto; width:40px; height:40px; transform:translateY(calc(-50% + var(--tl-shift, 0px))); pointer-events:none; font:600 13px/1.2 Inter, ui-sans-serif, system-ui, Segoe UI, Arial, sans-serif; color:var(--text); touch-action:none; user-select:none; -webkit-user-select:none; }
.timelineScrubber > * { pointer-events:auto; }
.timelinePill { position:absolute; right:6px; top:6px; width:28px; height:28px; display:grid; place-items:center; padding:0; border-radius:50%; border:1px solid var(--tl-border); background:var(--tl-glass); color:var(--tl-accent); backdrop-filter:blur(14px); box-shadow:0 10px 28px rgba(0,0,0,.42); cursor:grab; transition:transform .18s ease, opacity .2s ease; }
.timelinePill svg { width:16px; height:16px; position:relative; }
.timelinePill::before { content:""; position:absolute; inset:-10px; border-radius:50%; } /* finger-sized grab area around the small drop */
.timelinePill:hover, .timelinePill:focus-visible { transform:scale(1.06); outline:none; box-shadow:0 0 0 2px rgba(255,200,97,.45), 0 10px 28px rgba(0,0,0,.42); }
.timelineHint { position:absolute; right:50px; top:50%; transform:translate(8px,-50%); width:max-content; max-width:min(320px, calc(100vw - 32px)); text-align:center; padding:7px 11px; border-radius:14px; background:var(--tl-glass); border:1px solid var(--tl-border); color:var(--text); font-size:12px; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.timelineHintVisible .timelineHint { opacity:1; transform:translate(0,-50%); }
.timelineScrubber:not([data-visual="idle"]) .timelineHint { top:-22px; right:auto; left:50%; transform:translate(-50%,-50%); }
.timelineBar { position:absolute; inset:0; display:none; align-items:center; gap:10px; padding:0 4px 0 6px; border-radius:20px; border:1px solid var(--tl-border); background:var(--tl-glass); backdrop-filter:blur(16px); box-shadow:0 14px 40px rgba(0,0,0,.5); }
/* Any visual but idle spans the whole slot; the liquid is drawn in .timelineGoo. */
.timelineScrubber:not([data-visual="idle"]) { left:var(--tl-left); width:auto; }
.timelineScrubber:not([data-visual="idle"]) .timelinePill { opacity:0; }
.timelineScrubber[data-visual="open"] .timelinePill { pointer-events:none; }
.timelineGoo { position:absolute; inset:0; width:100%; height:100%; overflow:visible; display:none; pointer-events:none; color:var(--tl-accent); }
.timelineScrubber:is([data-visual="pull"],[data-visual="stretch"],[data-visual="drain"]) .timelineGoo { display:block; }
/* No filters on the liquid: it repaints every frame, so it must stay cheap to raster. */
.timelineGooBody { fill:rgba(10,14,20,.92); stroke:rgba(255,255,255,.2); stroke-width:1; }
.timelineBroken .timelineGooBody { stroke:rgba(255,200,97,.55); }
.timelinePullLabel { position:absolute; left:0; will-change:transform; bottom:calc(100% + 10px); display:grid; justify-items:center; padding:5px 10px; border-radius:10px; background:var(--tl-accent); color:var(--tl-accent-ink); white-space:nowrap; font-variant-numeric:tabular-nums; pointer-events:none; opacity:0; scale:.6; transform-origin:50% 100%; transition:opacity .16s ease, scale .32s cubic-bezier(.2,1.6,.4,1); }
.timelinePullLabel strong { font-size:12px; font-weight:800; }
.timelinePullLabel span { font-size:10px; font-weight:600; opacity:.75; }
.timelineBroken .timelinePullLabel { opacity:1; scale:1; }
/* Landing: the real bar takes over from the liquid and its controls ripple in. */
.timelineScrubber[data-visual="open"] .timelineBar { display:flex; animation:timelineBarIn .18s ease-out both; }
.timelineScrubber[data-visual="open"] .timelineBar > * { animation:timelineControlIn .46s cubic-bezier(.2,1.5,.35,1) both; animation-delay:calc(var(--i, 0) * 38ms); }
.timelineScrubber[data-visual="open"] .timelineTrack { transform-origin:100% 50%; animation-name:timelineTrackIn; }
@keyframes timelineBarIn { from { opacity:.6; } }
@keyframes timelineControlIn { from { opacity:0; transform:translateX(18px) scale(.55); } }
@keyframes timelineTrackIn { from { opacity:0; transform:scaleX(.2); } }
.timelineBadge { flex:none; padding:4px 8px; border-radius:999px; background:var(--tl-accent); color:var(--tl-accent-ink); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.timelinePlay, .timelineSpeed, .timelineLive, .timelineTuck { flex:none; height:30px; min-width:30px; border-radius:999px; border:1px solid var(--tl-border); background:rgba(255,255,255,.06); color:var(--text); font:inherit; cursor:pointer; padding:0 10px; }
.timelinePlay { position:relative; width:30px; padding:0; }
.timelinePlay::before, .timelinePlay::after { content:""; position:absolute; top:9px; width:4px; height:12px; border-radius:1px; background:currentColor; }
.timelinePlay::before { left:10px; } .timelinePlay::after { right:10px; }
.timelinePlay.paused::before { left:11px; width:0; height:0; border-radius:0; background:none; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent currentColor; }
.timelinePlay.paused::after { display:none; }
.timelineSpeed { font-variant-numeric:tabular-nums; min-width:44px; }
.timelineLive { background:rgba(126,231,135,.14); border-color:rgba(126,231,135,.45); color:#bff7bc; font-weight:700; }
.timelineTuck span { font-size:20px; line-height:1; }
.timelinePlay:hover, .timelineSpeed:hover, .timelineTuck:hover { background:rgba(255,255,255,.12); }
.timelineLive:hover { background:rgba(126,231,135,.24); }
.timelineClock { flex:none; display:grid; min-width:86px; font-variant-numeric:tabular-nums; }
.timelineClock strong { font-size:13px; }
.timelineClock span { color:var(--muted); font-size:11px; font-weight:500; }
.timelineTrack { position:relative; flex:1 1 auto; min-width:80px; height:34px; cursor:pointer; outline:none; }
.timelineTrack:focus-visible .timelineRail { box-shadow:0 0 0 2px rgba(255,200,97,.5); }
.timelineRail { position:absolute; left:0; right:0; top:50%; height:6px; transform:translateY(-50%); border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; }
.timelineFill { height:100%; width:100%; background:linear-gradient(90deg, rgba(255,200,97,.35), var(--tl-accent)); }
.timelineThumb { position:absolute; top:50%; left:100%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:var(--tl-accent); box-shadow:0 0 0 4px rgba(255,200,97,.25), 0 4px 10px rgba(0,0,0,.4); pointer-events:none; }
.timelineThumbLabel { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); white-space:nowrap; padding:4px 8px; border-radius:8px; background:var(--tl-accent); color:var(--tl-accent-ink); font-size:11px; font-weight:800; opacity:0; transition:opacity .15s ease; }
.timelineScrubber[data-mode="scrubbing"] .timelineThumbLabel { opacity:1; }
.timelineMarkers { position:absolute; inset:0; pointer-events:none; }
.timelineDeath { position:absolute; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--tl-death); cursor:pointer; pointer-events:auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)); transition:transform .22s cubic-bezier(.2,1.6,.4,1); transform:translateY(-15px); }
.timelineDeath svg { width:100%; height:100%; }
.timelineDeath:hover, .timelineDeath:focus-visible { transform:translateY(-15px) scale(1.35); outline:none; }
.timelineDeath.active { transform:translateY(-22px) scale(1.9); z-index:2; color:#ff8d98; }
.timelineBalloon { position:absolute; bottom:calc(100% + 34px); left:clamp(120px, calc(var(--tl-balloon-x, 50%) * .6 + 20%), calc(100% - 120px)); transform:translateX(-50%); width:min(260px, calc(100vw - 32px)); padding:12px 14px; border-radius:16px; border:1px solid rgba(255,107,122,.45); background:rgba(28,10,14,.94); box-shadow:0 18px 40px rgba(0,0,0,.5); animation:timelineBalloonIn .26s cubic-bezier(.2,1.5,.4,1); }
.timelineBalloon strong { display:block; font-size:14px; color:#ffd5da; padding-right:20px; }
.timelineBalloon p { margin:4px 0; font-size:12px; font-weight:500; color:var(--text); }
.timelineBalloon small { color:var(--muted); font-size:11px; font-weight:500; }
.timelineBalloonClose { position:absolute; top:6px; right:6px; width:24px; height:24px; border:0; border-radius:50%; background:rgba(255,255,255,.08); color:var(--text); cursor:pointer; font-size:16px; line-height:1; }
@keyframes timelineBalloonIn { from { opacity:0; transform:translate(-50%,10px) scale(.6); } to { opacity:1; transform:translate(-50%,0) scale(1); } }
.timelineLoading .timelineThumb { animation:timelinePulse .8s ease-in-out infinite alternate; }
@keyframes timelinePulse { to { box-shadow:0 0 0 9px rgba(255,200,97,.08), 0 4px 10px rgba(0,0,0,.4); } }
.timelineTab { position:absolute; right:calc(-1 * var(--tl-right)); top:50%; transform:translate(110%,-50%); display:flex; align-items:center; gap:6px; height:34px; padding:0 12px 0 10px; border-radius:20px 0 0 20px; border:1px solid var(--tl-border); border-right:0; background:var(--tl-accent); color:var(--tl-accent-ink); font:inherit; font-size:12px; font-weight:800; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.4); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.timelineTab span { font-size:18px; line-height:1; }
/* Slid away: the bar exits to the right and only a small tab stays visible. */
.timelineBar { transition:transform .36s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.timelineScrubber.timelineTucked .timelineBar { transform:translateX(calc(100% + var(--tl-right) + 24px)); opacity:0; pointer-events:none; }
.timelineScrubber.timelineTucked .timelineTab { transform:translate(0,-50%); }
.timelineScrubber.timelineTucked { pointer-events:none; }
.timelineScrubber.timelineTucked .timelineBalloon { display:none; }
body.timelineReplay #mapPanel { box-shadow:inset 0 0 0 2px rgba(255,200,97,.55); }
body.timelineReplay .liveDot { border-color:rgba(255,200,97,.5); background:rgba(255,200,97,.14); color:#ffe2a8; }
body.timelineReplay .liveDot::after { content:" · replay"; }
@media (max-width:640px) {
  .timelineBar { gap:6px; padding:0 6px; }
  .timelineBadge, .timelineSpeed { display:none; }
  .timelineClock { min-width:74px; }
  .timelineClock strong { font-size:12px; }
  .timelineLive { padding:0 9px; }
}
@media (prefers-reduced-motion:reduce) { .timelineScrubber, .timelineDeath, .timelineTab, .timelineBalloon, .timelineBar, .timelineBar > *, .timelinePullLabel { transition:none; animation:none; } }

/* Owner home: one shared surface across desktop, phone and Discord Activity. */
.mobileViewerShell .myBotEntry{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;flex:0 0 auto;pointer-events:auto;border-color:#79d7bb;color:#e7fff6!important}
.mobileViewerShell .myBotEntry b{min-width:20px;padding:2px 5px;border-radius:999px;background:#ffd581;color:#17202d;font-size:12px}
.mobileViewerShell .myBotEntry b[hidden]{display:none}
.mobileViewerShell .myBotEntry[aria-pressed="true"]{background:#204b43}
.mobileViewerShell:not(.mobileProShell) .mobileHudStatusRow{grid-template-columns:minmax(0,auto) auto minmax(0,1fr)}
.mobileViewerShell:not(.mobileProShell) .myBotEntry{padding:0 10px;font-size:12px}
.mobileViewerShell .surfaceBody[data-surface="my-bot"],.mobileViewerShell .surfaceBody[data-surface="match-report"]{display:block!important;min-width:0}
.myBotView{display:grid;gap:16px;max-width:64rem;margin:0 auto;min-width:0}
.myBotView h2,.myBotView h3,.myBotView h4,.myBotView p{margin:0}
.myBotContext,.myBotCard,.myBotHero{padding:16px;border:1px solid #39556a;border-radius:18px;background:rgba(10,23,35,.9)}
.myBotContext{font-size:13px;line-height:1.5}.myBotContext strong{color:#a6f3cf}.myBotContext.historical{border-color:#c69a4b}.myBotContext.historical strong{color:#ffdc9c}.myBotContext.historical p{margin:8px 0}
.myBotHero{display:flex;justify-content:space-between;gap:16px;align-items:center}.myBotHero h2{margin:4px 0;font-size:26px}.myBotHero small{color:#bdd0df}.myBotHeroActions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.myBotCard{display:grid;gap:12px;min-width:0}.myBotCard.urgent{border-color:#e8ae67}.myBotCard h3{font-size:18px}.myBotCard h4{font-size:14px}.myBotCard p,.myBotCard li{line-height:1.5}.myBotCard ul{margin:0;padding-left:20px}
.myBotNeeds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0}.myBotNeeds>div{display:grid;gap:8px;padding:12px;border:1px solid #355164;border-radius:12px;background:#102130}.myBotNeeds dt{font-size:12px;color:#bdd0df}.myBotNeeds dd{margin:0;font-size:18px;font-variant-numeric:tabular-nums}
.myBotNotice{padding:14px;border:1px solid #6c9b93;border-radius:12px;line-height:1.5}.myBotNotice[role="alert"]{border-color:#ef9a95;color:#ffcfca}
.myBotReceipts{display:grid;gap:12px;list-style:none;padding:0;margin:0}.myBotReceipt{padding:14px;border:1px solid #354f65;border-radius:12px;background:#101e2e}.myBotReceipt header{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.myBotReceipt header span{font-size:12px;text-transform:capitalize;color:#c1ebd9}.myBotReceipt p{margin:8px 0}.myBotReceipt small{color:#afc5d5}.myBotEvidence{margin-top:10px;padding-top:8px;border-top:1px solid #33485d}
.myBotView button,.myBotContext button,.eventActions button{min-height:44px;padding:9px 13px;white-space:normal}.myBotView .sponsorActions{width:100%;max-width:none;margin:0;box-sizing:border-box}.myBotView .decisionCard div{display:flex;gap:8px;flex-wrap:wrap}.myBotView .decisionCard small{display:block;margin:8px 0;line-height:1.5;color:#c6d7e5}
.mobileViewerShell .ownerActionBoundary{border:0;padding:0;margin:0;min-width:0;display:contents}.mobileViewerShell fieldset:disabled [data-sponsor-action],.mobileViewerShell fieldset:disabled [data-decision-choice]{opacity:.55}
.mobileViewerShell .eventMain{display:grid;gap:8px;text-align:left;padding:4px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;min-width:0}.eventActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.eventActions button{font-size:12px;border:1px solid #567186;background:#152c3b;color:#e3f1ff;border-radius:12px}
@media(max-width:600px){.myBotHero{align-items:flex-start;flex-direction:column}.myBotHeroActions{justify-content:flex-start}.myBotNeeds{grid-template-columns:repeat(2,minmax(0,1fr))}.myBotCard,.myBotContext,.myBotHero{padding:13px}.myBotView .sponsorActionGrid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:360px){.mobileViewerShell:not(.mobileProShell) .mobileHudStatusRow{gap:5px}.mobileViewerShell:not(.mobileProShell) .myBotEntry{padding:0 8px}.mobileViewerShell:not(.mobileProShell) .status{padding:0 8px;max-width:25vw}}

/* The classic desktop layout keeps its rails; its owner entry opens the same dialogs. */
.desktopOwnerEntry{display:none;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 14px;border:1px solid #79d7bb;border-radius:999px;background:#142b32;color:#e7fff6;white-space:nowrap}
.desktopOwnerEntry b{min-width:20px;padding:2px 5px;border-radius:999px;background:#ffd581;color:#17202d;font-size:12px}.desktopOwnerEntry b[hidden]{display:none}
body[data-workspace="desktop"] .desktopOwnerEntry{display:inline-flex}
body[data-workspace="desktop"] .mobileViewerShell:not(.mobileProShell).desktopSurfaceOpen{display:block}
body[data-workspace="desktop"] .mobileViewerShell:not(.mobileProShell).desktopSurfaceOpen>.viewerHudTop,body[data-workspace="desktop"] .mobileViewerShell:not(.mobileProShell).desktopSurfaceOpen>.tributeCarousel,body[data-workspace="desktop"] .mobileViewerShell:not(.mobileProShell).desktopSurfaceOpen>.dockAppLibrary,body[data-workspace="desktop"] .mobileViewerShell:not(.mobileProShell).desktopSurfaceOpen>.dockTooltip{display:none!important}

.mobileViewerShell .myBotHero{position:static;top:auto;z-index:auto;display:flex;grid-template:none;height:auto;min-height:0;padding:16px;border:1px solid #39556a;background:rgba(10,23,35,.9)}
.mobileViewerShell .myBotReceipt>header{position:static;top:auto;z-index:auto;display:flex;grid-template:none;height:auto;min-height:0;padding:0;border:0;background:transparent;backdrop-filter:none}
body[data-workspace="desktop"] .mobileViewerShell:not(.mobileProShell).desktopSurfaceOpen{z-index:310;opacity:1}
@media(max-width:600px){.mobileViewerShell .myBotHero{padding:13px}}