:root {
  --bg0: #0a0f0d;
  --bg1: #121a16;
  --panel: #15201b;
  --line: rgba(180, 210, 170, 0.14);
  --ink: #e8f2e4;
  --muted: #8fa894;
  --accent: #c4f062;
  --accent-deep: #5a8f2a;
  --warn: #f0b060;
  --danger: #e85d5d;
  --radius: 14px;
  --font-display: "Barlow Condensed", system-ui, -apple-system, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --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: 44px;
  --shell-max: 1180px;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Never let the page widen past the device width */
  max-width: 100%;
  overflow-x: clip;
}

/* Disable pinch / double-tap page zoom app-wide (all tabs · all devices) */
html, body {
  touch-action: pan-x pan-y;
  -ms-touch-action: pan-x pan-y;
  overscroll-behavior-x: none;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  /* Prefer no browser zoom chrome; inputs still ≥16px to avoid iOS field zoom */
  touch-action: pan-x pan-y;
}
input, select, textarea {
  touch-action: manipulation;
  /* ≥16px avoids iOS auto-zoom on focus (still no user-controlled page zoom) */
  font-size: max(16px, 1em);
}
button {
  touch-action: manipulation;
}

html, body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  max-width: 100%;
  background: #070a08;
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(196, 240, 98, 0.12);
}
body {
  /* Standalone home-screen / dock on iPad & Mac */
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  /* Prefer reading without sideways pans */
  overscroll-behavior-x: none;
}

.shell {
  position: relative;
  z-index: 1;
  max-width: var(--shell-max);
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 16px 16px calc(88px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-x: clip;
  /* Keep padding inside the device width with body safe-area already applied */
  box-sizing: border-box;
}

/* Media never forces sideways scroll */
img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}
.mark img {
  height: 100%; /* restore cover for brand mark */
}

/* Text, long tokens, and boards wrap inside the shell */
.panel,
.screen,
.primary-col,
.workspace,
.alliance-card,
.msg,
.msg-main,
.msg-body,
.hint,
p,
h1, h2, h3, h4,
label,
.brand,
.brand > div,
.tag,
.howto-body,
.legal-body {
  min-width: 0;
  max-width: 100%;
}
.hint,
.tag,
.msg-body,
.howto-body,
.legal-body,
.alliance-when,
.alliance-loadout,
.alliance-paths,
p {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Native fields stay within parent width */
input,
select,
textarea,
button {
  max-width: 100%;
}
textarea,
select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
input {
  min-width: 0;
  box-sizing: border-box;
}
/* Full-width form lines (labels wrap the control) — not tiny chip inputs */
label > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
label > select,
label > textarea,
.panel > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.screen input[type="text"],
.screen input[type="search"],
.screen input[type="datetime-local"],
.screen input[type="email"],
.screen input[type="url"],
.screen textarea {
  width: 100%;
}
/* Buttons/chips can size to content but never spill out of flex parents */
.timer-actions,
.step-panel-actions,
.order-assign-pick-actions,
.chat-toolbar,
.follow-groups,
.ks-gift-codes {
  max-width: 100%;
}

/* —— Clear main menu (always first, sticky top with language) —— */
.menu-bar {
  display: flex;
  align-items: stretch;
  gap: 12px;
  position: sticky;
  top: max(6px, var(--safe-top));
  z-index: 5000;
  overflow: visible;
  flex-shrink: 0;
  /* stay readable while content scrolls under */
  padding-bottom: 2px;
  background: linear-gradient(180deg, rgba(10, 15, 13, 0.98) 60%, rgba(10, 15, 13, 0.88));
  /* Keep paste (left) and EN (right) from colliding on any width */
  --header-lang-slot: 60px;
  --header-code-en-gap: 12px;
}
.app-menu {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(28, 42, 34, 0.98), rgba(14, 22, 18, 0.96));
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}
.header-lang {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  z-index: 230;
  /* never collapse / scroll away when labels get longer in another language */
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.header-lang-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 56px;
  width: 56px;
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(196, 240, 98, 0.35);
  background: linear-gradient(160deg, rgba(40, 58, 36, 0.98), rgba(18, 28, 20, 0.98));
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  font: inherit;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto !important;
}
.header-lang-btn:hover,
.header-lang-btn[aria-expanded="true"] {
  border-color: rgba(196, 240, 98, 0.7);
  background: rgba(196, 240, 98, 0.16);
}
.header-lang-ico {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent, #c4f062);
  pointer-events: none;
}
.header-lang-ico svg {
  display: block;
  pointer-events: none;
}
.header-lang-code {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #c4f062);
  line-height: 1.1;
  pointer-events: none;
}
.header-lang-btn[aria-expanded="true"] .header-lang-code {
  color: #e8ffb0;
}
.header-lang-pop {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 30000;
  width: min(280px, calc(100vw - 28px));
  max-height: min(60vh, 420px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(165deg, #1a2820 0%, #101814 100%);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: auto !important;
}
.bg-music-pop,
body > .header-lang-pop {
  position: fixed;
  top: auto;
  inset-inline-end: auto;
  z-index: 30000;
}
.bg-music-pop {
  box-sizing: border-box;
  width: min(320px, calc(100vw - 16px));
  max-height: min(70vh, 520px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(165deg, #1a2820 0%, #101814 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  flex-direction: column;
  gap: 4px;
  color: var(--ink, #e8f0e4);
  pointer-events: auto !important;
}
.header-lang-pop[hidden] {
  display: none !important;
}
body.lang-menu-open .header-lang-pop:not([hidden]) {
  display: flex !important;
}
.header-lang-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto !important;
}
.header-lang-opt span {
  pointer-events: none;
}
.header-lang-opt:hover {
  background: rgba(255, 255, 255, 0.06);
}
.header-lang-opt.on {
  border-color: rgba(196, 240, 98, 0.4);
  background: rgba(196, 240, 98, 0.12);
  color: #e8ffb0;
}
.header-lang-opt-code {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.9;
}
.header-lang-opt.on .header-lang-opt-code {
  color: #c4f062;
}
.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: 68px;
  padding: 10px 6px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  touch-action: manipulation;
}
.menu-item .menu-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}
.menu-item .menu-label {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}
.menu-item.on {
  color: #10180c;
  background: var(--accent);
  border-color: transparent;
}
.menu-item.on .menu-ico {
  background: rgba(16, 32, 10, 0.2);
  color: #10200a;
}
.menu-step {
  margin: 0;
  padding: 0 4px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.35;
}
.screen[hidden],
.screen.hidden {
  display: none !important;
}
.screen.is-active:not([hidden]) {
  display: block;
}
.screen.is-active.chat {
  display: flex;
  flex-direction: column;
}

.app-menu-dock {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  pointer-events: auto;
  gap: 4px;
  padding: 8px 6px max(10px, var(--safe-bottom));
  background: rgba(8, 12, 10, 0.94);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-wrap: nowrap;
  justify-content: stretch;
  align-items: stretch;
  overflow: visible;
}
.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1 1 0;
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: none;
  min-height: 56px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.82rem;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  padding: 8px 4px;
}
.dock-item .dock-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
}
.dock-item .dock-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: center;
  max-width: 7.4em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.dock-item.dock-live-in .dock-label,
.dock-item.dock-live-out .dock-label,
.dock-item.dock-cancel .dock-label,
.dock-item.dock-whale .dock-label {
  max-width: 10.5em;
  font-size: 0.62rem;
  letter-spacing: 0.01em;
  max-width: 10.5em;
  font-size: 0.62rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
.dock-item.on {
  background: var(--accent);
  color: #10200a;
}
.dock-item.on .dock-ico {
  background: rgba(16, 32, 10, 0.2);
  color: #10200a;
}
.dock-more-btn.on,
.dock-more-btn[aria-expanded="true"] {
  background: rgba(196, 240, 98, 0.2);
  color: var(--accent);
}
.dock-more-btn.on .dock-ico,
.dock-more-btn[aria-expanded="true"] .dock-ico {
  background: rgba(196, 240, 98, 0.22);
  color: var(--accent);
}

.dock-more-sheet {
  position: fixed;
  inset: 0;
  z-index: 140;
  pointer-events: auto;
}
.dock-more-sheet[hidden] {
  display: none !important;
}
.dock-more-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(4, 8, 6, 0.38);
  cursor: pointer;
}
.dock-more-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(72vh, 560px);
  padding: 6px 12px calc(18px + var(--safe-bottom, 0px));
  background: #101610;
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dock-more-handle {
  display: block;
  width: 42px;
  height: 5px;
  margin: 6px auto 10px;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
}
.dock-more-title {
  margin: 0 4px 4px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-display);
}
.dock-more-hint {
  margin: 0 4px 12px;
}
.dock-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.dock-more-grid .dock-item {
  flex: none;
  width: 100%;
  max-width: none;
  min-height: 78px;
  gap: 8px;
  padding: 12px 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.dock-more-grid .dock-item .dock-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.05rem;
}
.dock-more-grid .dock-item .dock-label {
  max-width: 100%;
  font-size: 0.78rem;
}
@media (min-width: 520px) {
  .dock-more-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.share-app-overlay {
  z-index: 160;
}
.share-app-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.share-app-card {
  position: relative;
  z-index: 1;
  gap: 14px;
}
.share-app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.share-app-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 88px;
  padding: 12px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #e8f2e8;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  touch-action: manipulation;
}
.share-app-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.28);
}
.share-app-reddit { border-color: rgba(255, 69, 0, 0.45); }
.share-app-reddit .share-app-ico { background: #ff4500; color: #fff; }
.share-app-discord { border-color: rgba(88, 101, 242, 0.5); }
.share-app-discord .share-app-ico { background: #5865f2; color: #fff; }
.share-app-x { border-color: rgba(255, 255, 255, 0.28); }
.share-app-x .share-app-ico { background: #111; color: #fff; }
.share-app-facebook { border-color: rgba(24, 119, 242, 0.5); }
.share-app-facebook .share-app-ico { background: #1877f2; color: #fff; }
.share-app-more {
  width: 100%;
}
.support-kind-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}
.support-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 0.85rem;
}
.support-field input,
.support-field textarea {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
  padding: 10px 12px;
  font: inherit;
}
.support-field textarea {
  min-height: 8rem;
  resize: vertical;
}
.support-inbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.support-inbox-card {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
}
.support-inbox-card.is-unread {
  border-color: rgba(196, 240, 98, 0.4);
}
.support-inbox-meta {
  margin: 0 0 6px;
  font-size: 0.78rem;
  color: rgba(232, 242, 228, 0.75);
}
.support-inbox-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Native iOS/iPad shell has its own bottom bar — hide the in-page dock */
html.raids-native .app-menu-dock,
html.raids-native .dock-more-sheet {
  display: none !important;
}
html.raids-native {
  --dock-bar-h: 0px;
}
html.raids-native .shell {
  padding-bottom: calc(28px + var(--safe-bottom, 0px)) !important;
}
html.raids-native .tab-stay-bar {
  bottom: 0;
}

.timer-pick {
  font-size: 1.15rem !important;
  min-height: 52px !important;
  font-variant-numeric: tabular-nums;
}
/* No native calendar — land/SEND shown as UTC text (set via 1/5/15m or countdown type) */
.timer-pick-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.02em;
}
.timer-pick-computed {
  opacity: 0.92;
  cursor: default;
}
/* Hide ghost calendar chrome if any datetime-local remains elsewhere */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0.35;
}
.timer-pick-label {
  margin: 12px 0;
}
.rally-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
}
.rally-presets-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 2px;
}

.timer-flow-step {
  margin: 12px 0 14px;
  padding: 12px 12px 10px;
  border: 1px solid color-mix(in srgb, var(--accent, #3d8) 35%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel, #142018) 88%, #0a1210);
}
.timer-flow-step.is-final {
  border-color: color-mix(in srgb, var(--accent, #3d8) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #3d8) 28%, transparent);
}
.timer-flow-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  flex-wrap: wrap;
}
.timer-flow-head .troop-heading {
  margin: 0;
  flex: 1 1 auto;
}
.timer-flow-badge {
  flex: 0 0 auto;
  min-width: 4.4rem;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  color: #04140c;
  background: var(--accent, #3d8);
  border: 1px solid color-mix(in srgb, var(--accent, #3d8) 40%, #fff);
}
.timer-flow-badge.is-final {
  background: #e8b84a;
  border-color: color-mix(in srgb, #e8b84a 40%, #fff);
  color: #1a1404;
}
.timer-team-pick {
  margin: 12px 0 14px;
  padding: 12px 12px 10px;
  border: 1px solid color-mix(in srgb, var(--accent, #3d8) 35%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel, #142018) 88%, #0a1210);
}
.timer-team-pick.is-insist {
  border-color: color-mix(in srgb, #e8b84a 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #e8b84a 35%, transparent);
}
.timer-team-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.timer-team-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 7.5rem;
  text-align: left;
  padding: 8px 12px;
}
.timer-team-chip-title {
  font-weight: 700;
  font-size: 0.92rem;
}
.timer-team-chip-sub {
  font-size: 0.72rem;
  opacity: 0.8;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.timer-team-pick-actions {
  margin-top: 4px;
}
.land-in-block.is-need-team,
#landAtLabel.is-need-team {
  opacity: 0.55;
}

.land-in-extra-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 100%;
  width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
}

/* Full-width custom time row so Apply never sits over the picker */
.land-in-type-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  flex: 1 1 100%;
  width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
}
.land-in-type-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-left: 0;
}
.land-in-wheels {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
}
.land-in-wheels::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 48px;
  height: 44px;
  border-radius: 8px;
  background: rgba(182, 240, 74, 0.16);
  border: 1px solid rgba(214, 255, 106, 0.38);
  pointer-events: none;
  z-index: 1;
}
.land-in-wheel-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  z-index: 2;
}
.land-in-wheel {
  height: 132px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
/* Android Chrome freezes if a finger-scroll fights scroll-snap plus a mask. */
body.is-android-web .land-in-wheel {
  scroll-snap-type: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.land-in-wheel::-webkit-scrollbar {
  display: none;
}
.land-in-wheel-item,
.land-in-wheel-pad {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, inherit);
  font-size: 1.18rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--ink, #e8f0e4) 72%, transparent);
  -webkit-user-select: none;
  user-select: none;
}
.land-in-wheel-item {
  scroll-snap-align: center;
}
.land-in-wheel-item.is-on {
  color: #e8ff8a;
  font-weight: 850;
}
.land-in-wheel-unit {
  display: block;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px 0 6px;
}
.land-in-type-input {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
  color: var(--ink, #e8f0e4);
  font-family: var(--font-display, inherit);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.land-in-type-apply,
.land-in-block .btn[data-action="apply-land-in-custom"] {
  flex: 0 0 auto;
  align-self: center;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 420px) {
  .land-in-type-row {
    flex-wrap: wrap;
  }
  .land-in-type-apply,
  .land-in-block .btn[data-action="apply-land-in-custom"] {
    width: 100%;
    justify-content: center;
  }
}
.land-in-apply-check {
  display: none;
  font-weight: 800;
}
.land-in-block.land-in-is-set {
  border: 1px solid rgba(90, 210, 130, 0.5);
  background: rgba(40, 130, 75, 0.16);
  border-radius: 14px;
  padding: 10px 12px 12px;
  box-shadow: inset 0 0 0 1px rgba(120, 220, 150, 0.12);
}
.land-in-set-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #b6ffc8;
  background: rgba(50, 160, 90, 0.35);
  border: 1px solid rgba(120, 220, 150, 0.45);
}
.land-in-set-check,
.field-set-mark {
  font-weight: 900;
  color: #8ef0a8;
}
.field-set-mark {
  display: inline-block;
  margin-left: 6px;
  font-size: 1.05rem;
  vertical-align: middle;
}
.land-in-block.land-in-is-set .land-in-type-apply,
.land-in-type-apply.land-in-apply-set {
  background: rgba(55, 175, 100, 0.42);
  border-color: rgba(130, 230, 160, 0.65);
  color: #d4ffe0;
  font-weight: 750;
}
.land-in-block.land-in-is-set .land-in-apply-check,
.land-in-type-apply.land-in-apply-set .land-in-apply-check {
  display: inline;
}
.land-in-block.land-in-is-set .land-in-apply-label::after {
  content: none;
}
.land-in-block.land-in-is-set .land-in-type-input,
.land-in-block.land-in-is-set .land-in-wheels,
#landAt.land-in-is-set {
  border-color: rgba(110, 215, 140, 0.55);
  background: rgba(30, 90, 50, 0.22);
  box-shadow: 0 0 0 1px rgba(90, 190, 120, 0.2);
}
#landAtLabel.land-in-is-set {
  color: #c8f5d4;
}
.land-in-preview-set {
  color: #b6ffc8 !important;
  font-weight: 650;
}
.btn.preset {
  min-width: 3.4em;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-color: rgba(196, 240, 98, 0.28);
  color: var(--accent);
  background: rgba(90, 143, 42, 0.14);
}
.btn.preset:active {
  background: rgba(196, 240, 98, 0.22);
}
.timer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}
.big-countdown {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  background: rgba(0, 0, 0, 0.28);
  margin: 12px 0;
}
.big-countdown.is-go {
  border-color: rgba(196, 240, 98, 0.55);
  box-shadow: 0 0 0 1px rgba(196, 240, 98, 0.25), 0 12px 40px rgba(100, 160, 40, 0.2);
}
.big-countdown.is-ready {
  border-color: rgba(255, 196, 72, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 196, 72, 0.22), 0 12px 36px rgba(180, 120, 20, 0.18);
  animation: readyPulse 1.4s ease-in-out infinite;
}
@keyframes readyPulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(255, 196, 72, 0.22), 0 12px 36px rgba(180, 120, 20, 0.12);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(255, 196, 72, 0.4), 0 14px 40px rgba(180, 120, 20, 0.28);
  }
}
.big-countdown-time.ready {
  color: #ffc448;
  animation: pulse 1.2s ease-in-out infinite;
}
.path-min-cell {
  min-width: 5.5rem;
  vertical-align: top;
}
.path-min-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.path-min-input {
  width: 3.4rem;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
}
.path-min-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.btn.preset.tiny {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 0.78rem;
}
.ready-lead-block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.rally-ops-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.rally-fill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 8px 0;
  align-items: flex-end;
}
.rally-fill-row .inline-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--muted);
  min-width: 96px;
}
.rally-fill-row input[type="number"] {
  width: 72px;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
  color: var(--ink);
  font-size: 1rem;
}
.rsvp-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
}
.rsvp-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.2);
}
.rsvp-chip.rsvp-in {
  border-color: rgba(120, 180, 80, 0.45);
  color: #c8f0a8;
  background: rgba(70, 130, 50, 0.22);
}
.rsvp-chip.rsvp-out {
  border-color: rgba(180, 90, 90, 0.4);
  color: #e8b0b0;
  background: rgba(80, 40, 40, 0.28);
}
.sync-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 4px 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
}
.sync-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sync-legend-item.is-ready {
  color: #9ed86a;
}
.sync-legend-item.is-missing {
  color: #f08080;
}
.sync-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 900;
  flex-shrink: 0;
  line-height: 1;
}
.sync-mark.is-ready,
.sync-mark-check {
  color: #10200a;
  background: #7ec850;
  border: 2px solid #9ee070;
  box-shadow: 0 0 0 1px rgba(80, 160, 40, 0.35);
}
.sync-mark.is-missing,
.sync-mark-x {
  color: #fff;
  background: #c84040;
  border: 2px solid #e06060;
  font-size: 0.55rem;
  border-radius: 999px;
}
.sync-cd-utc {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted, #a8b4a0);
  letter-spacing: 0.02em;
}
.sync-ord-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sync-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.sync-ready-tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(80, 160, 50, 0.35);
  color: #b8f07a;
  border: 1px solid rgba(120, 190, 80, 0.5);
}
.sync-missing-tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(140, 40, 40, 0.4);
  color: #ffb0b0;
  border: 1px solid rgba(220, 90, 90, 0.55);
}
.sync-group {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
}
.sync-card.is-path-ready {
  border-color: rgba(120, 190, 80, 0.4);
}
.sync-card.is-path-missing {
  border-color: rgba(200, 80, 80, 0.45);
  background: rgba(70, 25, 25, 0.22);
}
.sync-status.is-ready {
  color: #b8f07a;
  font-weight: 800;
}
.sync-status.is-missing {
  color: #ff9a9a;
  font-weight: 800;
}
.sync-server-time.is-missing {
  color: #f0a0a0;
}
.sync-cd.is-ready-idle {
  font-size: 0.95rem;
  font-weight: 800;
  color: #c8e090;
}
.sync-order-ready-lab {
  margin: 4px 0 0;
  font-weight: 800;
  font-size: 0.84rem;
  color: #b8f07a;
}
.sync-order-pending-lab {
  margin: 4px 0 0;
  font-weight: 750;
  font-size: 0.82rem;
  color: #f0a05a;
}
.sync-mark-check,
.sync-mark-x {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 900;
}
.path-collect-banner {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
}
.path-collect-banner strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.95rem;
}
.path-collect-banner p {
  margin: 0 0 4px;
  font-size: 0.84rem;
}
.path-collect-banner.is-waiting {
  border-color: rgba(220, 160, 50, 0.55);
  background: rgba(100, 70, 15, 0.28);
}
.path-collect-banner.is-live {
  border-color: rgba(120, 190, 80, 0.55);
  background: rgba(40, 90, 35, 0.3);
}
.path-collect-land {
  margin: 6px 0 8px !important;
  font-size: 0.95rem !important;
  color: #e8f4c8;
}
.path-collect-preview {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.path-collect-preview-row {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 6px 8px;
  align-items: baseline;
  font-size: 0.82rem;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}
.path-collect-preview-row.is-missing {
  opacity: 0.92;
  color: #ffc8a0;
}
.path-collect-preview-meta {
  grid-column: 2;
  font-size: 0.78rem;
  opacity: 0.9;
}
.land-together-panel {
  margin: 8px 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(140, 180, 90, 0.45);
  background: linear-gradient(160deg, rgba(35, 55, 28, 0.55), rgba(12, 18, 14, 0.75));
}
.land-together-panel.is-waiting {
  border-color: rgba(220, 160, 50, 0.6);
  background: linear-gradient(160deg, rgba(90, 62, 18, 0.5), rgba(20, 16, 10, 0.78));
}
.land-together-panel.is-live {
  border-color: rgba(120, 200, 90, 0.65);
  background: linear-gradient(160deg, rgba(30, 70, 35, 0.55), rgba(12, 20, 14, 0.78));
}
.land-together-panel.is-draft,
.land-together-panel.is-solo {
  border-color: rgba(120, 150, 180, 0.4);
}
.land-together-panel .lt-title {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  opacity: 0.85;
  margin-bottom: 4px;
}
.land-together-panel .lt-land {
  font-size: 1.15rem;
  font-weight: 850;
  color: #eaf7c8;
  margin-bottom: 6px;
}
.land-together-panel .lt-status {
  margin: 0 0 6px;
  font-size: 0.86rem;
  line-height: 1.35;
  color: #ffd9a0;
}
.land-together-panel.is-live .lt-status {
  color: #c8f090;
}
.land-together-panel .lt-progress {
  margin: 0 0 8px;
  font-size: 0.84rem;
  font-weight: 700;
}
.land-together-panel .lt-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 5px;
}
.land-together-panel .lt-row {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: baseline;
  font-size: 0.82rem;
  padding: 5px 8px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.22);
}
.land-together-panel .lt-row.is-missing {
  color: #ffc8a0;
}
.land-together-panel .lt-row .lt-n {
  font-weight: 800;
  opacity: 0.7;
  font-size: 0.72rem;
}
.land-together-panel .lt-row .lt-name {
  font-weight: 750;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.land-together-panel .lt-row .lt-path {
  grid-column: 2;
  font-size: 0.76rem;
  opacity: 0.88;
}
.land-together-panel .lt-row .lt-send {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  text-align: right;
  font-weight: 750;
  font-size: 0.78rem;
  color: #dcefcc;
}
.land-together-panel .lt-mine {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.35;
}
.sync-land-together {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(160, 200, 100, 0.4);
  background: rgba(30, 50, 25, 0.45);
  font-size: 0.95rem;
}
.sync-land-together strong {
  display: block;
  margin-bottom: 3px;
  color: #e8f4c8;
}
.sync-land-together .hint {
  margin: 0;
  font-size: 0.8rem;
}
.sync-hold-banner {
  margin: 0 0 6px;
  font-weight: 750;
  font-size: 0.85rem;
  color: #ffc878;
}
.sync-live-banner {
  margin: 0 0 6px;
  font-weight: 750;
  font-size: 0.85rem;
  color: #b8f07a;
}
.sync-cd.is-held {
  font-size: 1rem;
  color: #ffc878;
}
.big-countdown-time.is-hold {
  color: #ffc878 !important;
  font-size: clamp(1.6rem, 8vw, 2.4rem);
}
.big-countdown.is-path-wait-tap {
  cursor: pointer;
}
.big-countdown.is-path-wait-tap .big-countdown-time.is-hold {
  letter-spacing: 0.04em;
}
.path-wait-card {
  max-width: 440px;
}
.path-wait-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 46vh;
  overflow: auto;
}
.path-wait-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.9rem;
}
.path-wait-row.is-ready {
  border-color: rgba(90, 210, 130, 0.55);
  background: rgba(40, 120, 70, 0.28);
  color: #c8f5d4;
}
.path-wait-row.is-waiting {
  border-color: rgba(230, 90, 80, 0.55);
  background: rgba(140, 40, 36, 0.32);
  color: #ffd0cc;
}
.path-wait-name {
  font-weight: 750;
  flex: 1 1 8rem;
}
.path-wait-server {
  font-weight: 650;
  opacity: 0.9;
}
.path-wait-tag {
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.path-wait-row.is-ready .path-wait-tag {
  color: #9ff0b4;
}
.path-wait-row.is-waiting .path-wait-tag {
  color: #ffb4ae;
}
.path-wait-deadline {
  margin: 8px 0 4px;
}
.path-wait-deadline-chips .btn.on {
  outline: 2px solid var(--accent, #e8c36a);
}
.path-wait-skip-pick {
  margin: 8px 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(232, 195, 106, 0.35);
  background: rgba(0, 0, 0, 0.18);
}
.you-path-wait-skip {
  margin: 14px 0 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(232, 195, 106, 0.28);
  background: rgba(0, 0, 0, 0.16);
}
.you-path-wait-skip .path-wait-skip-pick {
  margin-top: 8px;
}
body:not(.path-wait-skip-on) #youPathWaitSkipPick,
body:not(.path-wait-skip-on) #pathWaitOverlayDeadlineLine,
body:not(.path-wait-skip-on) #pathWaitDeadlineBlock,
body:not(.path-wait-skip-on) #pathWaitSkipPromptOverlay,
#pathWaitSkipPromptOverlay,
body.mail-order-open #pathWaitSkipPromptOverlay,
body.send-order-prompt-open #pathWaitSkipPromptOverlay {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.path-wait-skip-card .path-wait-deadline-chips {
  flex-wrap: wrap;
}
.countdown-started-card {
  max-width: 420px;
}
.countdown-started-body {
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
  margin: 0 0 10px;
  color: #f0e0b0;
}
.countdown-started-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 40vh;
  overflow: auto;
}
.cd-start-row {
  display: grid;
  grid-template-columns: 2rem auto 1fr;
  gap: 4px 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.82rem;
}
.cd-start-n {
  font-weight: 900;
  color: #e8c56a;
}
.cd-start-when {
  font-weight: 750;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: #f0a05a;
  grid-column: 2;
}
.cd-start-name {
  font-weight: 800;
  grid-column: 3;
}
.cd-start-send {
  grid-column: 2 / -1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cd-start-land {
  grid-column: 2 / -1;
  color: #e8c56a;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.countdown-started-land {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e8c56a;
  background: rgba(232, 197, 106, 0.12);
  color: #f6e7b0;
  font-weight: 850;
  font-size: 0.95rem;
  line-height: 1.35;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.countdown-started-land-names {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #f0e0b0;
}
body.countdown-started-open {
  overflow: hidden;
}

.multi-sender-sync {
  margin-top: 8px;
}
.sync-goal-line,
.sync-goal-banner {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 0.88rem;
  color: #e8c56a;
  letter-spacing: 0.01em;
}
.sync-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.sync-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sync-card-list {
  gap: 10px;
}
.sync-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.2);
}
.sync-card-top {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(88px, auto);
  gap: 10px;
  align-items: center;
}
.sync-ord-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: rgba(232, 197, 106, 0.14);
  color: #f0d48a;
  border: 1px solid rgba(232, 197, 106, 0.35);
}
.sync-card-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sync-card-who .sync-name {
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sync-path-lab {
  font-size: 0.78rem;
  color: var(--muted);
}
.sync-card-cd {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
}
.sync-cd-lab {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}
.sync-cd {
  font-size: 1.35rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #f4e6b0;
  line-height: 1.1;
}
.sync-cd.is-empty {
  color: var(--muted);
  font-weight: 700;
  font-size: 1.1rem;
}
.sync-card-bot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
}
.sync-instr {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: #e8c56a;
}
.sync-card.sync-ready {
  border-color: rgba(120, 190, 80, 0.6);
  background: rgba(60, 120, 40, 0.28);
}
.sync-card.sync-ready .sync-cd,
.sync-card.sync-ready .sync-ord-lg {
  color: #b8f07a;
  border-color: rgba(120, 190, 80, 0.45);
  background: rgba(80, 140, 50, 0.2);
}
.sync-card.sync-soon {
  border-color: rgba(220, 150, 50, 0.55);
  background: rgba(140, 90, 20, 0.26);
}
.sync-card.sync-soon .sync-cd {
  color: #ffc878;
}
.sync-card.sync-wait-path {
  border-color: rgba(180, 160, 80, 0.4);
  background: rgba(60, 50, 20, 0.25);
  opacity: 0.95;
}
.sync-card.sync-hold {
  border-color: rgba(200, 180, 60, 0.45);
  background: rgba(50, 45, 20, 0.28);
}
.sync-card.sync-hold .sync-cd {
  color: #f0e6a0;
}
.sync-card.sync-past {
  opacity: 0.72;
}
.sync-card.is-cant {
  border-color: rgba(200, 80, 80, 0.5);
  background: rgba(90, 30, 30, 0.28);
}
.sync-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 6px 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.82rem;
  min-width: 0;
  max-width: 100%;
}
.sync-row.sync-ready {
  border-color: rgba(120, 190, 80, 0.55);
  background: rgba(60, 120, 40, 0.22);
}
.sync-row.sync-soon {
  border-color: rgba(220, 150, 50, 0.5);
  background: rgba(140, 90, 20, 0.22);
}
.sync-row.is-cant {
  border-color: rgba(200, 80, 80, 0.5);
  background: rgba(90, 30, 30, 0.28);
}
.sync-ord {
  font-weight: 800;
  color: var(--muted);
  text-align: center;
}
.sync-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-path,
.sync-send {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-status {
  font-weight: 700;
  justify-self: end;
}
.sync-status.sync-ready {
  color: #c8f0a8;
}
.sync-status.sync-soon {
  color: #ffd0a0;
}
.sync-status.sync-wait {
  color: var(--muted);
}
.sync-warn {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  font-weight: 700;
  color: #f0a0a0;
}
.event-type-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 6px;
}
.event-type-chip {
  font-size: 0.78rem;
  padding: 6px 10px;
}
.event-type-chip.on {
  border-color: rgba(140, 200, 90, 0.55);
  background: rgba(60, 120, 40, 0.28);
  color: #d8f5b8;
  font-weight: 700;
}
.event-type-tip {
  margin: 4px 0 10px;
  line-height: 1.4;
  color: var(--muted);
  font-size: 0.82rem;
}
.event-tips-details {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
}
.event-tips-summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  list-style: none;
}
.event-tips-summary::-webkit-details-marker {
  display: none;
}
.event-tips-summary::before {
  content: "▸ ";
  color: var(--muted);
}
.event-tips-details[open] .event-tips-summary::before {
  content: "▾ ";
}
.event-tips-meta {
  margin: 8px 0 10px;
  font-size: 0.78rem;
}
.event-tips-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.event-tip-block h4 {
  margin: 0 0 4px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 700;
}
.event-tip-block ul {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink);
}
.event-tip-block li {
  margin: 3px 0;
}
.event-faq-item {
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.event-faq-item:first-child {
  border-top: 0;
  padding-top: 0;
}
.event-faq-q {
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 4px;
}
.event-faq-a {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.4;
}
.help-event-tips {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  min-height: 48px;
}
.tips-game-picker {
  max-height: 220px;
  overflow: auto;
  margin-bottom: 12px;
}
.tips-events-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 24px;
}
.tips-event-acc .event-tips-body {
  margin-top: 8px;
}
.tips-event-short {
  margin: 8px 0 0;
}
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  min-height: 48px;
}
.hero-db-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}
.hero-game-row {
  flex-wrap: wrap;
  gap: 8px;
}
.game-selector-bar .hero-game-row .role-chip,
.hero-db-toolbar .hero-game-row .role-chip {
  font-size: 0.76rem;
  padding: 6px 10px;
  line-height: 1.25;
}

/* Per-game setup switcher — March / Orders top (same chip UX as profile) */
.game-selector-bar {
  margin: 0 0 14px;
  padding: 12px 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(140, 180, 120, 0.28);
  background: linear-gradient(165deg, rgba(36, 58, 42, 0.55), rgba(16, 24, 20, 0.4));
}
.game-selector-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.game-selector-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
.game-selector-active {
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 1.05rem;
  color: var(--ink);
  font-weight: 700;
}
.game-selector-bar .hint {
  margin: 8px 0 0;
  font-size: 0.8rem;
}
.game-selector-bar .hero-game-row {
  margin: 0;
}
.troop-card-optional {
  opacity: 0.78;
  border-style: dashed;
  border-color: rgba(160, 160, 120, 0.35);
}
.troop-optional-tag {
  margin-left: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.hero-search-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--muted);
}
.hero-search-label input,
.hero-search-label select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
  color: var(--ink);
  font-size: 1rem;
}
.hero-db-mechanics {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(120, 160, 100, 0.25);
  background: rgba(40, 70, 40, 0.15);
  font-size: 0.84rem;
  line-height: 1.4;
}
.hero-db-mechanics h4 {
  margin: 0 0 6px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.hero-db-mechanics ul {
  margin: 0 0 10px;
  padding-left: 1.15rem;
}
.hero-db-mechanics li {
  margin: 3px 0;
}
.hero-db-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 70vh;
  overflow: auto;
  padding-right: 4px;
}
.event-db-list {
  margin-top: 8px;
  max-height: 55vh;
}
.event-card {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.2);
}
.event-card-tips {
  margin: 6px 0 0;
  padding-left: 1.15rem;
  font-size: 0.84rem;
  line-height: 1.4;
}
.event-card-tips li {
  margin: 3px 0;
}
.upgrade-pri {
  border-color: rgba(200, 160, 60, 0.45);
  color: #e8c56a;
}
.hero-card {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.2);
}
.heroes-screen .hero-db-list {
  max-height: none;
}
.heroes-screen .hero-card-top .hero-avatar {
  width: 140px;
  height: 140px;
}
.hero-card-skills {
  margin: 6px 0 4px;
}
.hero-card-skills strong {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: block;
  margin-bottom: 4px;
}
.hero-card-skills ul {
  margin: 0;
  padding-left: 1.15rem;
}
.hero-card-skills li {
  font-size: 0.84rem;
  line-height: 1.4;
  margin: 3px 0;
  color: var(--ink);
}
.heroes-game-picker {
  margin-bottom: 10px;
}
@media (max-width: 560px) {
  .heroes-screen .hero-card-top {
    flex-direction: column;
    align-items: stretch;
  }
  .heroes-screen .hero-card-top .hero-avatar {
    width: 100%;
    max-width: 220px;
    height: 180px;
    margin: 0 auto 6px;
  }
}
.hero-card-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.hero-card-head-block {
  flex: 1;
  min-width: 0;
}
.tip-art {
  flex: 0 0 auto;
  width: 88px;
  height: 66px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.tip-art-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin-bottom: 6px;
}
.hero-card-name {
  font-weight: 800;
  font-size: 1rem;
}
.hero-card-meta {
  font-size: 0.78rem;
  color: var(--muted);
}
.hero-card-line {
  font-size: 0.84rem;
  line-height: 1.35;
  margin: 3px 0;
  color: var(--ink);
}
.hero-card-line strong {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 4px;
}
.hero-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  margin: 2px 4px 2px 0;
}
.event-pre-presets .btn.preset.peak {
  border-color: rgba(200, 150, 60, 0.55);
  color: #ffe0a0;
}
.event-pre-presets {
  margin-bottom: 6px;
}
@media (max-width: 560px) {
  .sync-card-top {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .sync-card-cd {
    grid-column: 1 / -1;
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .sync-cd {
    font-size: 1.5rem;
  }
  .sync-row {
    grid-template-columns: 24px minmax(0, auto) 1fr;
    grid-template-rows: auto auto auto;
  }
  .sync-when {
    min-width: 0;
  }
  .sync-path,
  .sync-send,
  .sync-status {
    grid-column: 2 / -1;
    justify-self: start;
  }
}
.alliance-paths {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}
.big-countdown.is-draft {
  opacity: 0.9;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.18);
}
.big-countdown.is-idle .big-countdown-time {
  color: var(--muted);
  opacity: 0.7;
  font-size: clamp(1.8rem, 8vw, 2.8rem);
}
.big-countdown-time.is-draft {
  opacity: 0.82;
}
.big-countdown-when {
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.35;
}
.march-summary {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}
.march-summary strong {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}
.loadout-banner {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(196, 240, 98, 0.35);
  background: linear-gradient(135deg, rgba(90, 143, 42, 0.22), rgba(0, 0, 0, 0.28));
}
.loadout-banner-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--accent);
}
.loadout-banner-when {
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.35;
}
.team-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.team-chip {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  touch-action: manipulation;
}
.team-chip.on {
  color: #10200a;
  background: var(--accent);
  border-color: transparent;
}
.team-slot-main {
  border-color: rgba(196, 240, 98, 0.35);
  box-shadow: 0 0 0 1px rgba(196, 240, 98, 0.12);
}

.big-countdown-label {
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.big-countdown-time {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 12vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  margin: 8px 0 4px;
}
.big-countdown-time.go {
  color: var(--accent);
  animation: pulse 0.8s infinite;
}
.big-countdown-time.due {
  color: var(--danger);
}
.big-countdown-when {
  color: var(--muted);
  font-size: 0.9rem;
}
.big-countdown.is-done {
  border-color: rgba(143, 168, 148, 0.45);
  background: rgba(20, 28, 24, 0.55);
}
.big-countdown-time.done {
  color: var(--muted);
  letter-spacing: 0.08em;
}
.team-slot .countdown.done {
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.order-march-card {
  max-width: min(440px, 100%);
}
#orderMarchInputs.is-path-locked .march-duration-row input,
#orderMarchInputs.is-path-locked .path-presets .btn {
  opacity: 0.55;
  pointer-events: none;
}
.overlay-top-bar {
  display: flex;
  align-items: center;
  margin: -4px 0 10px;
}
.overlay-back-btn {
  min-height: 40px;
  padding: 6px 12px;
  font-weight: 700;
}
.order-march-facts {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(196, 240, 98, 0.28);
  background: rgba(90, 143, 42, 0.12);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 4px;
}
.order-march-facts strong {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.order-hit-send-box {
  margin: 10px 0 4px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(240, 160, 90, 0.5);
  background: linear-gradient(145deg, rgba(90, 50, 12, 0.45), rgba(20, 16, 10, 0.5));
  text-align: center;
}
.order-hit-send-box[hidden] {
  display: none !important;
}
.order-hit-send-box.is-ready {
  border-color: rgba(95, 212, 160, 0.55);
  background: linear-gradient(145deg, rgba(20, 60, 40, 0.5), rgba(12, 24, 18, 0.45));
}
.order-hit-send-box.is-late {
  border-color: rgba(220, 80, 80, 0.5);
  background: linear-gradient(145deg, rgba(70, 20, 20, 0.5), rgba(24, 10, 10, 0.45));
}
.order-hit-send-label {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(240, 160, 90, 0.95);
}
.order-hit-send-box.is-ready .order-hit-send-label {
  color: var(--accent, #5fd4a0);
}
.order-hit-send-time {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.75rem, 7vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.order-hit-send-detail {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}
.host-hit-send-box {
  margin-top: 8px;
}
body.order-march-open .shell {
  pointer-events: none;
  user-select: none;
}
/* Eat leftover taps on Cancel/Leave only — do not freeze Send envelopes / player picks */
body.order-march-just-closed [data-action="cancel-orders"],
body.order-march-just-closed [data-action="leave-orders"] {
  pointer-events: none !important;
}
body.order-march-open #orderMarchOverlay {
  pointer-events: auto;
  user-select: auto;
}

.muted-label {
  font-weight: 500;
  color: var(--muted);
  font-size: 0.8rem;
}
/* ---- Timer: Send steps / Events sub-tabs ---- */
/* Rally Novice / Expert mode */
.rally-mode-block {
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
}
.rally-mode-block .troop-heading {
  margin-top: 0;
}
.rally-mode-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.rally-mode-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 12px 12px 11px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rally-mode-chip-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ink);
}
.rally-mode-chip-sub {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--muted);
}
.rally-mode-chip.on {
  border-color: rgba(240, 160, 90, 0.55);
  background: rgba(80, 50, 15, 0.35);
  box-shadow: 0 0 0 1px rgba(240, 160, 90, 0.2);
}
.rally-mode-chip.on .rally-mode-chip-title {
  color: #f0a05a;
}
.sender-hit-type {
  margin-top: 10px;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.sender-hit-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.sender-hit-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  min-height: 88px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 12px 11px;
  border-radius: 12px;
  border: 1px solid var(--line, rgba(180, 210, 170, 0.28));
  background: rgba(0, 0, 0, 0.22);
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.sender-hit-chip-title {
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--ink, #e8f0e4);
}
.sender-hit-chip-sub {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
  white-space: normal;
}
.sender-hit-chip.on {
  border-color: rgba(196, 240, 98, 0.55);
  background: rgba(20, 55, 40, 0.45);
  box-shadow: 0 0 0 1px rgba(196, 240, 98, 0.22);
}
.sender-hit-chip.on .sender-hit-chip-title {
  color: var(--accent, #c4f062);
}
.sender-hit-type[hidden] {
  display: none !important;
}
#timerPanel .sender-hit-chip {
  min-height: 96px;
}
.stagger-gap-pick {
  margin: 0 0 12px;
}
.stagger-gap-title {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--accent, #c4f062);
}
.stagger-gap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
}
.stagger-gap-chip {
  min-height: 44px;
  min-width: 3.4rem;
  padding: 8px 10px;
  font-weight: 800;
}
.stagger-gap-chip.on {
  border-color: rgba(196, 240, 98, 0.55);
  background: rgba(20, 55, 40, 0.45);
  color: var(--accent, #c4f062);
}
body.rally-mode-novice .rally-mode-chip#rallyModeNovice.on,
body.rally-mode-novice .rally-mode-chip#youRallyModeNovice.on,
body.rally-mode-novice .rally-mode-chip#setupRallyModeNovice.on {
  border-color: rgba(95, 212, 160, 0.5);
  background: rgba(20, 55, 40, 0.4);
  box-shadow: 0 0 0 1px rgba(95, 212, 160, 0.18);
}
body.rally-mode-novice .rally-mode-chip#rallyModeNovice.on .rally-mode-chip-title,
body.rally-mode-novice .rally-mode-chip#youRallyModeNovice.on .rally-mode-chip-title,
body.rally-mode-novice .rally-mode-chip#setupRallyModeNovice.on .rally-mode-chip-title {
  color: var(--accent, #5fd4a0);
}
.send-do-now.is-expert-soft {
  opacity: 0.72;
}
body.rally-mode-expert .send-do-now {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
}
body.rally-mode-expert .send-do-now-num {
  background: rgba(255, 255, 255, 0.2);
  color: var(--ink);
}

.timer-sender-tabs {
  display: flex;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
}
.timer-sender-tab {
  flex: 1 1 0;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}
.timer-sender-tab.on {
  background: rgba(240, 160, 90, 0.22);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(240, 160, 90, 0.45);
}
.timer-events-ops {
  margin: 0 0 16px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
}

/* ---- Leader step solo popup ---- */
.leader-step-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.leader-step-modal[hidden] {
  display: none !important;
}
.leader-step-modal-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.62);
  cursor: pointer;
}
.leader-step-modal-card {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  max-height: min(78vh, 640px);
  overflow: auto;
  border-radius: 16px 16px 14px 14px;
  border: 1px solid rgba(240, 160, 90, 0.4);
  background: linear-gradient(180deg, #1c1812 0%, #12100c 100%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  animation: stepModalIn 0.22s ease-out;
}
@keyframes stepModalIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.leader-step-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.step-modal-badge {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #1a1208;
  background: #f0a05a;
  line-height: 1;
}
.step-modal-badge.is-done {
  background: var(--accent, #5fd4a0);
  color: #0b1a12;
}
.step-modal-head-text {
  flex: 1 1 auto;
  min-width: 0;
}
.step-modal-head-text h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--ink);
  line-height: 1.25;
}
.step-modal-head-text .hint {
  margin: 0;
  font-size: 0.8rem;
}
.step-modal-close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.step-modal-help-text {
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.22);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}
.step-modal-help-text[hidden] {
  display: none !important;
}
.leader-step-modal-body {
  padding: 12px 14px;
}
.step-modal-pane[hidden] {
  display: none !important;
}
.leader-step-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 14px 14px;
}
body.step-modal-open {
  overflow: hidden;
}

.rally-order-steps {
  margin: 14px 0 16px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.2);
}
.send-do-now {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(240, 160, 90, 0.55);
  background: linear-gradient(135deg, rgba(80, 45, 10, 0.55), rgba(30, 22, 10, 0.4));
}
.send-do-now.is-done {
  border-color: rgba(95, 212, 160, 0.45);
  background: linear-gradient(135deg, rgba(20, 50, 35, 0.5), rgba(12, 28, 20, 0.35));
}
.send-do-now-num {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  font-weight: 800;
  color: #1a1208;
  background: #f0a05a;
  line-height: 1;
}
.send-do-now.is-done .send-do-now-num {
  background: var(--accent, #5fd4a0);
  color: #0b1a12;
}
.send-do-now-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.send-do-now-copy strong {
  font-size: 0.95rem;
  color: var(--ink);
}
.step-advance-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(95, 212, 160, 0.5);
  background: rgba(20, 55, 40, 0.55);
  animation: stepAdvanceIn 0.28s ease-out;
}
.step-advance-banner[hidden] {
  display: none !important;
}
@keyframes stepAdvanceIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.step-advance-msg {
  flex: 1 1 12rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--accent, #5fd4a0);
  line-height: 1.35;
}
.step-advance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rally-step-list {
  list-style: none;
  margin: 10px 0 12px;
  padding: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: none;
}
.rally-step {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.rally-step-main {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.rally-step-hit {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px 10px 12px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rally-step-hit:focus-visible {
  outline: 2px solid rgba(240, 160, 90, 0.7);
  outline-offset: -2px;
}
.step-mark {
  position: relative;
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
}
.step-num-big {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink, #eee);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.15));
  line-height: 1;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.step-check {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0b1a12;
  background: var(--accent, #5fd4a0);
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.step-help-btn {
  flex: 0 0 auto;
  align-self: center;
  width: 1.85rem;
  height: 1.85rem;
  margin: 0 10px 0 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}
.step-help-btn:hover,
.step-help-btn.is-open {
  color: var(--ink);
  border-color: rgba(240, 160, 90, 0.55);
  background: rgba(240, 160, 90, 0.2);
}
.step-help-pop {
  margin: 0 12px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}
.step-help-pop[hidden] {
  display: none !important;
}
.rally-step-panel {
  margin: 0;
  padding: 0 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.14);
}
.rally-step-panel[hidden] {
  display: none !important;
}
.rally-step-panel .hint {
  margin: 10px 0 8px;
}
.step-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.step-panel-actions .btn {
  width: 100%;
  justify-content: center;
}
.step-badge {
  flex: 0 0 auto;
  min-width: 3.6rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--ink, #eee);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.15));
}
.step-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.step-title {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.9rem;
}
.step-text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  font-size: 0.82rem;
}
.step-do {
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 650;
  color: rgba(240, 160, 90, 0.95);
}
.rally-step.is-done {
  border-color: rgba(95, 212, 160, 0.3);
}
.rally-step.is-done .step-num-big {
  opacity: 0;
  transform: scale(0.7);
}
.rally-step.is-done .step-check {
  opacity: 1;
  transform: scale(1);
}
.rally-step.is-done .step-title {
  color: var(--accent, #5fd4a0);
}
.rally-step.is-done .step-do {
  color: rgba(95, 212, 160, 0.9);
}
.rally-step.is-active {
  border-color: rgba(240, 160, 90, 0.55);
  background: rgba(60, 40, 15, 0.35);
  box-shadow: 0 0 0 1px rgba(240, 160, 90, 0.12);
}
.rally-step.is-active:not(.is-done) .step-num-big {
  background: rgba(240, 160, 90, 0.95);
  color: #1a1208;
  border-color: transparent;
}
.rally-step.is-active .step-do {
  color: #f0a05a;
}
.rally-step.is-open {
  border-color: rgba(240, 160, 90, 0.4);
}
.rally-step.is-locked {
  opacity: 0.55;
}
.rally-step.is-locked .rally-step-hit {
  cursor: not-allowed;
}
.rally-step.is-locked .step-do {
  opacity: 0.85;
}
.step-actions-numbered {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.step-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  justify-content: flex-start;
  width: 100%;
}
.step-cta-num {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink);
}
.step-cta-lab {
  flex: 1 1 auto;
  min-width: 0;
}
.step-cta.is-next-cta {
  border-color: rgba(240, 160, 90, 0.65);
  box-shadow: 0 0 0 1px rgba(240, 160, 90, 0.25);
  outline: none;
}
.step-cta.is-next-cta .step-cta-num {
  background: #f0a05a;
  color: #1a1208;
}
.step-cta.primary.is-next-cta {
  border-color: rgba(95, 212, 160, 0.55);
  box-shadow: 0 0 0 1px rgba(95, 212, 160, 0.2);
}
.step-cta.primary.is-next-cta .step-cta-num {
  background: #0b1a12;
  color: var(--accent, #5fd4a0);
}
.step-actions .btn[disabled],
#btnUpdateTime[disabled],
.rally-presets .btn.preset[disabled] {
  opacity: 0.45;
  pointer-events: none;
}
#landInBlock .btn.preset,
#landInBlock .btn.preset[disabled],
#landInBlock .land-in-type-apply,
#btnUpdateTime {
  pointer-events: auto !important;
  opacity: 1;
  position: relative;
  z-index: 8;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.sync-how-list {
  margin: 8px 0 10px;
  padding: 0 0 0 1.25rem;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.45;
}
.sync-how-list li {
  margin: 0.2rem 0;
}
.sync-host-role {
  display: block;
  margin: 6px 0 4px;
  color: rgba(240, 160, 90, 0.95);
  font-weight: 650;
}
.sync-when {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #f0a05a;
  min-width: 4.5rem;
}
.sync-row.sync-wait-path {
  border-color: rgba(180, 160, 80, 0.4);
  background: rgba(60, 50, 20, 0.25);
  opacity: 0.92;
}
.sync-push-actions {
  margin: 8px 0 6px;
}
.sync-row .sync-ord {
  font-weight: 800;
  min-width: 1.4rem;
  text-align: center;
  color: var(--ink);
}
.sync-row .sync-ord {
  font-weight: 800;
  min-width: 1.4rem;
  text-align: center;
  color: var(--ink);
}
body.steps-guided .sender-only-step-gated {
  opacity: 0.7;
}
.joiner-flow-steps {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.2);
}
.joiner-order-card {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
}
.joiner-order-card strong {
  display: block;
  margin-bottom: 6px;
}
body.role-joiner #landAt[readonly],
body.role-joiner #sendAt[readonly],
body.role-joiner #rallyTitle[readonly] {
  opacity: 0.85;
  cursor: default;
}
.order-groups-board {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 12px;
}
.city-hits-panel {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(240, 160, 90, 0.35);
  border-radius: 14px;
  background: rgba(60, 40, 15, 0.25);
}
.city-hits-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.city-hit-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.22);
}
.city-hit-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.city-hit-cd {
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.city-hit-cd.is-soon {
  color: var(--warn);
}
.city-hit-fields {
  display: grid;
  gap: 8px;
}
.city-hit-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
}
.city-hit-fields input {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  padding: 8px 10px;
}
.city-hit-reinf {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(180, 210, 170, 0.18);
  background: rgba(0, 0, 0, 0.18);
}
.city-hit-reinf-title {
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--accent);
}
.city-hit-reinf-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}
.city-hit-offset {
  width: auto;
  min-width: 72px;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  padding: 4px 8px;
  appearance: auto;
}

.delay-sec-select {
  width: auto;
  min-width: 88px;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  padding: 4px 8px;
}

.delay-badge {
  color: var(--accent, #7dce9e);
  font-variant-numeric: tabular-nums;
}

.order-delay-line {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(125, 206, 158, 0.08);
  border: 1px solid rgba(125, 206, 158, 0.2);
}

.order-delay-line.has-delay {
  background: rgba(125, 206, 158, 0.14);
}

#sendNudgeBar,
#orderMarchNudges {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.city-hit-offset:disabled {
  opacity: 0.45;
}
.muted-offset {
  color: var(--muted);
  font-size: 0.8rem;
}
.city-hit-phase-preview {
  margin: 6px 0 0;
  font-size: 0.8rem;
}
.shared-city-hits {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(240, 160, 90, 0.3);
  background: rgba(60, 40, 15, 0.2);
  font-size: 0.88rem;
}
.shared-city-hits-title {
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--warn);
}
.shared-hit-row {
  margin: 2px 0;
  color: var(--ink);
}
.order-group-card {
  border: 1px solid rgba(196, 240, 98, 0.18);
  border-radius: 16px;
  padding: 14px 14px 16px;
  background:
    linear-gradient(165deg, rgba(28, 42, 30, 0.55), rgba(8, 12, 10, 0.55)),
    rgba(0, 0, 0, 0.28);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.order-group-card[data-kind="reinforce"] {
  border-color: rgba(120, 180, 255, 0.4);
  background:
    linear-gradient(165deg, rgba(24, 36, 52, 0.55), rgba(8, 12, 16, 0.55)),
    rgba(0, 0, 0, 0.28);
}
.order-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(196, 240, 98, 0.12);
}
.order-group-kind-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d8efb0;
  background: rgba(196, 240, 98, 0.12);
  border: 1px solid rgba(196, 240, 98, 0.28);
}
.order-group-kind-chip[data-kind="reinforce"] {
  color: #b8d4f5;
  background: rgba(120, 170, 230, 0.14);
  border-color: rgba(120, 170, 230, 0.35);
}
.order-group-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}
.order-group-sender-count {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted, #9aab9e);
  white-space: nowrap;
}
.order-group-fields {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}
@media (min-width: 520px) {
  .order-group-fields {
    grid-template-columns: 1fr 1fr;
  }
  .order-group-fields .order-coords-hint,
  .order-group-fields label:has(input[type="datetime-local"]),
  .order-group-fields .order-group-heroes-lab,
  .order-group-fields .order-group-pets-lab {
    grid-column: 1 / -1;
  }
}
.order-group-fields .order-group-heroes-lab,
.order-group-fields .order-group-pets-lab {
  grid-column: 1 / -1;
}
.order-group-fields .order-group-heroes-lab input,
.order-group-fields .order-group-pets-lab input {
  width: 100%;
  box-sizing: border-box;
}
.order-group-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
}
.order-group-fields input,
.order-group-fields select {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  padding: 8px 10px;
}
.order-group-hint {
  margin: 0 0 6px;
}
.order-codes-panel {
  margin: 12px 0 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(196, 240, 98, 0.14);
  background: rgba(0, 0, 0, 0.16);
}
.order-codes-actions {
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 6px;
}
.order-senders-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(196, 240, 98, 0.12);
}
.order-senders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.order-senders-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #142014;
  background: var(--accent, #c4f062);
}
.order-sender-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0 14px;
}
.order-sender-empty {
  margin: 0;
  padding: 14px 12px;
  text-align: center;
  border-radius: 12px;
  border: 1px dashed rgba(196, 240, 98, 0.22);
  background: rgba(0, 0, 0, 0.14);
}
.order-sender-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(196, 240, 98, 0.16);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.order-sender-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.order-sender-who {
  min-width: 0;
  flex: 1;
}
.order-sender-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.order-sender-name {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  color: #eef6e4;
}
.order-sender-remove {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 0.78rem;
}
.order-sender-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
@media (min-width: 420px) {
  .order-sender-controls {
    grid-template-columns: minmax(7rem, 0.9fr) minmax(0, 1.6fr);
    align-items: end;
  }
}
.order-sender-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  min-width: 0;
}
.order-sender-field-lab {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted, #8fa894);
}
.order-sender-path .path-min-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.path-min-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.path-min-unit {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}
.path-min-input {
  width: 4.2rem;
  min-height: 40px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.4);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.path-min-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.path-min-presets .btn.preset.tiny {
  min-height: 32px;
  min-width: 2.4rem;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 800;
}
.order-sender-card .delay-sec-select {
  width: 100%;
  min-height: 40px;
  border-radius: 10px;
}
.order-sender-heroes .order-heroes-input,
.order-heroes-input,
.order-sender-pets .order-pets-input,
.order-pets-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  font-size: 0.88rem;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  padding: 8px 10px;
}
.order-sender-troops {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(196, 240, 98, 0.12);
  background: rgba(196, 240, 98, 0.04);
}
.order-assign-heading {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--accent, #c4f062);
}
.order-assign-manual {
  margin-top: 4px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(196, 240, 98, 0.28);
  background: rgba(0, 0, 0, 0.18);
}
.order-manual-heading {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 800;
  color: #d5e8c8;
}
.order-manual-actions {
  margin-top: 10px;
}
.assign-move-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}
.assign-move-lab {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted, #8fa894);
}
.assign-move-select {
  min-height: 36px;
  max-width: 100%;
  flex: 1 1 10rem;
  font-size: 0.82rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  padding: 6px 8px;
}
.order-pick-multi {
  min-height: 7.5rem;
}
.order-troop-cell {
  min-width: 0;
  width: 100%;
}
/* Compact troop mix: full-width rows, tier + % side-by-side */
.order-troop-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
}
.order-troop-type {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 10px 12px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(196, 240, 98, 0.14);
  background:
    linear-gradient(135deg, rgba(18, 28, 22, 0.95), rgba(8, 12, 10, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  font-size: 0.72rem;
  color: var(--muted, #a8b0bc);
}
.order-troop-type-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.order-troop-img {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
  background: #0a100c;
  border: 1px solid rgba(196, 240, 98, 0.12);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.order-troop-type-name {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #eef6e4;
  line-height: 1.2;
  min-width: 0;
}
.order-troop-fields {
  display: grid;
  grid-template-columns: minmax(4.5rem, 0.85fr) minmax(5.5rem, 1.15fr);
  gap: 8px;
  min-width: 0;
  align-items: end;
}
.order-troop-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  min-width: 0;
}
.order-troop-field-lab {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #8fa894);
}
.order-troop-field-in {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(196, 240, 98, 0.2);
  background: rgba(0, 0, 0, 0.42);
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.order-troop-field-in:focus-within {
  border-color: rgba(196, 240, 98, 0.55);
  box-shadow: 0 0 0 2px rgba(196, 240, 98, 0.14);
}
.order-troop-prefix,
.order-troop-suffix {
  flex: 0 0 auto;
  padding: 0 8px;
  font-size: 0.78rem;
  font-weight: 850;
  color: var(--accent, #c4f062);
  opacity: 0.95;
  user-select: none;
}
.order-troop-field.is-amt .order-troop-suffix {
  color: var(--accent, #c4f062);
}
.order-troop-grid[data-troop-unit="count"] .order-troop-field.is-amt .order-troop-suffix {
  color: #f0c14b;
}
.order-troop-field-in input[type="number"] {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  box-sizing: border-box;
  min-height: 40px;
  margin: 0;
  padding: 6px 4px 6px 2px;
  text-align: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.order-troop-field-in input[type="number"]::-webkit-outer-spin-button,
.order-troop-field-in input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.order-troop-field.is-tier .order-troop-field-in {
  max-width: 5.5rem;
}
.order-troop-field.is-amt .order-troop-field-in {
  background: rgba(196, 240, 98, 0.06);
  border-color: rgba(196, 240, 98, 0.28);
}
.order-troop-grid[data-troop-unit="count"] .order-troop-field.is-amt .order-troop-field-in {
  background: rgba(240, 193, 75, 0.08);
  border-color: rgba(240, 193, 75, 0.35);
}
/* legacy labels if any remain */
.order-troop-tier-lab,
.order-troop-amt-lab {
  display: flex;
  align-items: center;
  gap: 4px;
}
.order-troop-tier-lab-t {
  font-weight: 800;
  color: var(--accent, #7dd3a0);
  min-width: 0.9rem;
}
.order-troop-type input.order-troop-tier {
  max-width: none;
  flex: 1 1 auto;
}
.order-troop-type[data-optional="1"] {
  opacity: 0.7;
  border-style: dashed;
}
.order-troop-unit {
  font-style: normal;
  font-weight: 850;
  opacity: 0.95;
  color: var(--accent, #7dd3a0);
}
.order-troop-grid[data-troop-unit="count"] .order-troop-unit {
  color: #f0c14b;
}
.order-troop-type input[type="number"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 38px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.order-troop-type input.order-troop-count {
  font-size: 0.95rem;
  font-weight: 800;
}
.order-troop-type input.order-troop-pct {
  font-weight: 800;
}
.order-troop-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(196, 240, 98, 0.16);
  background: rgba(196, 240, 98, 0.06);
  font-size: 0.86rem;
  font-weight: 800;
  color: #d8efb0;
  font-variant-numeric: tabular-nums;
}
.order-troop-total.is-ok {
  border-color: rgba(125, 211, 160, 0.4);
  color: var(--accent, #c4f062);
}
.order-troop-total.is-bad {
  border-color: rgba(232, 93, 93, 0.45);
  background: rgba(232, 93, 93, 0.1);
  color: #f0a0a0;
}

/* Multi-sender troops: T select + % slider */
.order-troop-type {
  grid-template-columns: 1fr;
  gap: 10px;
}
.order-troop-fields {
  grid-template-columns: minmax(6.5rem, 0.7fr) minmax(0, 1.5fr);
  gap: 10px;
  align-items: stretch;
}
.order-troop-field.is-slider {
  gap: 4px;
}
.order-troop-amt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.order-troop-amt-val {
  font-size: 0.92rem;
  font-weight: 850;
  color: var(--accent, #c4f062);
  font-variant-numeric: tabular-nums;
  min-width: 2.6rem;
  text-align: right;
}
.order-troop-slider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.4rem;
  gap: 8px;
  align-items: center;
}
.order-troop-pct-range {
  width: 100%;
  min-width: 0;
  height: 28px;
  margin: 0;
  accent-color: var(--accent, #c4f062);
  cursor: pointer;
}
.order-troop-amt-num {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 8px;
  border: 1px solid rgba(196, 240, 98, 0.25);
  background: rgba(0, 0, 0, 0.42);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.order-troop-amt-num::-webkit-outer-spin-button,
.order-troop-amt-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.order-troop-field.is-count-pick,
.order-troop-field.is-slider {
  grid-column: 1 / -1;
}
.troop-pct-chips,
.troop-count-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.troop-count-scale {
  display: flex;
  gap: 6px;
  margin: 0 0 6px;
}
.troop-count-scale .role-chip,
.troop-pct-chips .role-chip,
.troop-count-chips .role-chip {
  flex: 0 0 auto;
  min-width: 2.7rem;
  min-height: 38px;
  padding: 6px 8px;
  font-size: 0.8rem;
  font-weight: 800;
}
.troop-count-scale .role-chip {
  flex: 1 1 0;
  min-height: 40px;
  font-size: 0.95rem;
}
.troop-count-pick {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  position: relative;
}
.troop-count-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(240, 193, 75, 0.35);
  background: rgba(240, 193, 75, 0.08);
  padding: 0 10px;
}
.troop-count-custom-lab {
  flex: 0 0 auto;
  font-weight: 850;
  color: #f0c14b;
  min-width: 1.25rem;
}
.troop-count-display {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.troop-count-display::-webkit-outer-spin-button,
.troop-count-display::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.order-troop-grid[data-troop-unit="pct"] .troop-count-pick,
.troop-sliders[data-troop-unit="pct"] .troop-count-pick {
  display: none;
}
.troop-sliders[data-troop-unit="count"] .troop-range,
.troop-sliders[data-troop-unit="count"] .troop-pct-chips,
.order-troop-grid[data-troop-unit="count"] .troop-pct-chips {
  display: none;
}
.order-troop-field-in.is-select {
  padding-right: 4px;
  max-width: none;
}
.order-troop-tier-pick {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 850;
  padding: 6px 6px 6px 0;
  cursor: pointer;
}
.order-troop-tier-pick:focus {
  outline: none;
}
.order-troop-tier-pick option {
  background: #101810;
  color: var(--ink);
}
@media (max-width: 420px) {
  .order-troop-fields {
    grid-template-columns: 1fr;
  }
  .order-troop-slider-row {
    grid-template-columns: minmax(0, 1fr) 3.2rem;
  }
}

@media (max-width: 380px) {
  .order-troop-type {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .order-troop-fields {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}
.order-pct-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.troop-unit-switch {
  margin: 10px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.troop-unit-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}
.troop-unit-pick {
  justify-content: flex-start;
}
.order-boosts {
  margin: 10px 0 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(196, 240, 98, 0.25);
  background: rgba(196, 240, 98, 0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.order-boosts-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--accent, #c4f062);
}
.order-boosts-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: auto;
}
.order-boosts-checks.boost-picks,
.boost-picks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.boost-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
}
.boost-pick.is-on {
  border-color: rgba(196, 240, 98, 0.4);
  background: rgba(196, 240, 98, 0.06);
}
.boost-pick-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.boost-pick-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.boost-pick-name {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--ink);
}
.boost-pick-status {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
}
.boost-pick.is-on .boost-pick-status {
  color: #c4f062;
}
.boost-pct-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: auto;
}
.boost-pct-chip {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(196, 240, 98, 0.25);
  touch-action: manipulation;
}
.boost-pct-chip.on {
  background: #c4f062;
  border-color: #c4f062;
  color: #0a1208;
  font-weight: 800;
}
.boost-pct-hint,
.boost-pct-meta {
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.85;
}
.order-boost-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  min-width: 108px;
  padding: 8px 12px 8px 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(196, 240, 98, 0.25);
  user-select: none;
  touch-action: manipulation;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease, transform 0.08s ease;
}
.order-boost-toggle .order-boost-img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  display: block;
}
.boost-pick .order-boost-img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.order-boost-toggle:active {
  transform: scale(0.97);
}
.order-boost-toggle .order-boost-check-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.75rem;
  line-height: 1;
  flex-shrink: 0;
}
.order-boost-toggle.on {
  border-color: rgba(196, 240, 98, 0.55);
  color: #0a1208;
  font-weight: 800;
}
.order-boost-toggle.on .order-boost-check-ico {
  border-color: transparent;
  background: rgba(0, 0, 0, 0.25);
  color: #0a1208;
}
.order-boost-toggle.boost-city.on {
  background: #4ecdc4;
  border-color: #4ecdc4;
}
.order-boost-toggle.boost-troop.on {
  background: #c4f062;
  border-color: #c4f062;
}
.order-boost-toggle.boost-pet.on {
  background: #ffd60a;
  border-color: #ffd60a;
}
.order-boost-toggle.boost-gem.on {
  background: #9b8cff;
  border-color: #9b8cff;
}
.order-boost-toggle.boost-hero.on {
  background: #ff9f6b;
  border-color: #ff9f6b;
}
.order-boost-toggle.boost-vip.on {
  background: #f4d35e;
  border-color: #f4d35e;
}
.order-boost-toggle.boost-attack.on {
  background: #ff6b8a;
  border-color: #ff6b8a;
}
.order-boost-toggle.boost-dragon.on {
  background: #7ec8ff;
  border-color: #7ec8ff;
}
.order-boost-toggle.boost-sub.on {
  background: #a8e6a3;
  border-color: #a8e6a3;
}
.order-boost-check {
  min-height: 40px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  pointer-events: auto;
}
.order-boost-notes-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  pointer-events: auto;
}
.order-boost-notes-label input,
.order-boost-notes-input {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  padding: 8px 10px;
  font: inherit;
  pointer-events: auto;
}
.boost-row {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 214, 10, 0.08);
  border: 1px solid rgba(255, 214, 10, 0.28);
  font-size: 0.88rem;
  line-height: 1.4;
}
.boost-heading {
  display: block;
  margin-bottom: 6px;
  color: #ffd60a;
  font-size: 0.82rem;
}
.boost-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 2px 4px 2px 0;
  padding: 3px 8px 3px 3px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #0a1208;
}
.boost-chip .boost-chip-img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.boost-chip .boost-chip-lab {
  line-height: 1.15;
}
.boost-chip.boost-city {
  background: #4ecdc4;
}
.boost-chip.boost-troop {
  background: #c4f062;
}
.boost-chip.boost-pet {
  background: #ffd60a;
}
.boost-chip.boost-gem {
  background: #9b8cff;
}
.boost-chip.boost-hero {
  background: #ff9f6b;
}
.boost-chip.boost-vip {
  background: #f4d35e;
}
.boost-chip.boost-attack {
  background: #ff6b8a;
}
.boost-chip.boost-dragon {
  background: #7ec8ff;
}
.boost-chip.boost-sub {
  background: #a8e6a3;
}
.boost-notes {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.84rem;
}
.troop-tier-edge-end {
  opacity: 0.75;
  margin-left: 2px;
}
.order-invite-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 12px;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.2);
}
.order-invite-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  padding: 6px 4px;
}
.order-invite-row input {
  width: 18px;
  height: 18px;
}
.order-from-banner {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(95, 212, 160, 0.4);
  background: rgba(95, 212, 160, 0.14);
  font-size: 1.05rem;
  line-height: 1.3;
}
.order-from-banner strong {
  color: var(--accent, #5fd4a0);
}
.order-loadout {
  margin: 10px 0 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(95, 212, 160, 0.35);
  background: rgba(95, 212, 160, 0.08);
}
.order-loadout h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.order-loadout-heroes {
  margin: 0 0 10px;
  font-size: 1rem;
  line-height: 1.35;
}
.order-loadout-heroes strong,
.order-loadout-pets strong {
  display: block;
  margin-bottom: 6px;
  color: var(--accent, #5fd4a0);
}
.order-loadout-pets {
  margin: 0 0 10px;
}
.order-march-delay-lab {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0 0;
  font-size: 0.88rem;
}
.order-march-delay-lab select {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  padding: 8px 10px;
}
.order-sender-path-status.is-waiting {
  color: #f0c674;
}
.order-sender-path-status.is-ready {
  color: var(--accent, #9fe870);
}
.order-face-host {
  margin: 0 0 8px;
}
.order-face-host-compact {
  margin: 0 0 6px;
}
.order-face-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.order-face-row.is-empty {
  min-height: 0;
}
.order-face-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 72px;
  max-width: 22vw;
}
.order-face-chip .hero-avatar,
.order-face-chip .pet-avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 64px;
  padding: 0;
}
.order-face-chip .hero-avatar-name,
.order-face-chip .hero-avatar-ini,
.order-face-chip .hero-avatar-fallback {
  display: none;
}
.order-face-chip .hero-avatar:not(.hero-avatar-photo) .hero-avatar-ini,
.order-face-chip .hero-avatar:not(.hero-avatar-photo) .hero-avatar-name {
  display: block;
  font-size: 0.55rem;
}
.order-face-chip .hero-avatar:not(.hero-avatar-photo) .hero-avatar-ini {
  font-size: 0.9rem;
}
.order-face-chip .hero-avatar:not(.hero-avatar-photo) {
  padding: 4px;
  gap: 0;
}
.order-face-name {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.68rem;
  line-height: 1.2;
  font-weight: 650;
  color: var(--ink);
  word-break: break-word;
}
.order-group-loadout-pick {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 12px;
}
.order-inline-pick {
  margin: 0;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(196, 240, 98, 0.16);
  background: rgba(0, 0, 0, 0.22);
}
.order-inline-pick .hero-pick-chips {
  max-height: min(52vh, 420px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.order-inline-pick .hero-pick-chip {
  max-width: 100%;
}
.order-inline-pick .hero-pick-chip .hero-avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 14px;
  flex: 0 0 72px;
  padding: 0;
}
.order-inline-pick .pet-chip .pet-avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 14px;
}
.alliance-loadout {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}
.alliance-loadout strong {
  color: var(--ink);
}
.role-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
.role-chip {
  flex: 1 1 140px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  padding: 10px 12px;
  cursor: pointer;
}
.role-chip.on {
  border-color: var(--accent, #5fd4a0);
  background: rgba(95, 212, 160, 0.16);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(95, 212, 160, 0.25);
}
.march-duration-block {
  margin: 12px 0 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
}
.march-duration-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0;
}
.march-duration-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}
.march-duration-row input {
  width: 4.2em;
  min-height: 44px;
  text-align: center;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.follow-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.follow-members {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  max-height: 220px;
  overflow: auto;
}
.follow-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.follow-member-row input {
  width: 18px;
  height: 18px;
}
.follow-member-row .fm-name {
  font-weight: 600;
  color: var(--ink);
}
.follow-member-row .fm-meta {
  font-size: 0.78rem;
  color: var(--muted);
}
.alliance-card.is-followed {
  border-color: rgba(196, 240, 98, 0.45);
  box-shadow: 0 0 0 1px rgba(196, 240, 98, 0.15);
}
.alliance-followed-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(196, 240, 98, 0.2);
  color: var(--accent);
}

.alliance-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 14px;
}
.alliance-card {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
}
.alliance-card-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.alliance-card-top strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
}
.alliance-who {
  font-size: 0.8rem;
  color: var(--muted);
}
.alliance-when {
  font-size: 0.88rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.alliance-joiner-lead {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(140, 200, 90, 0.35);
  background: rgba(60, 100, 30, 0.18);
  font-size: 0.92rem;
  line-height: 1.4;
}
.alliance-join-meta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.45;
}
.alliance-who-going {
  margin-bottom: 4px;
}
.join-window {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
.join-window.join-open {
  background: rgba(70, 130, 50, 0.28);
  color: #c8f0a8;
  border: 1px solid rgba(130, 190, 80, 0.45);
}
.join-window.join-warn {
  background: rgba(160, 120, 30, 0.28);
  color: #ffe3a0;
  border: 1px solid rgba(220, 170, 60, 0.5);
}
.join-window.join-soon {
  background: rgba(190, 90, 20, 0.32);
  color: #ffd0a0;
  border: 1px solid rgba(240, 140, 50, 0.55);
  animation: join-pulse 1.1s ease-in-out infinite alternate;
}
.join-window.join-late {
  background: rgba(80, 40, 40, 0.4);
  color: #e0a0a0;
  border: 1px solid rgba(180, 80, 80, 0.45);
  font-weight: 600;
}
.join-window.join-hold {
  background: rgba(100, 90, 30, 0.28);
  color: #f0e6a0;
  border: 1px solid rgba(200, 180, 60, 0.45);
}
@keyframes join-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.12); }
}
.joiner-order-card.open-wave {
  margin: 10px 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(140, 200, 90, 0.3);
  background: rgba(0, 0, 0, 0.22);
}
.alliance-teams {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.alliance-team-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
}
.alliance-team-row.is-mine {
  border-color: rgba(196, 240, 98, 0.4);
  background: rgba(90, 143, 42, 0.15);
}
.alliance-team-meta {
  font-size: 0.82rem;
  color: var(--muted);
  flex: 1;
  min-width: 0;
}
.alliance-team-meta strong {
  color: var(--ink);
  font-weight: 600;
}
.alliance-picks {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

.completed-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 4px;
}
.completed-item {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
}
.completed-item-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.completed-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(143, 168, 148, 0.2);
  color: var(--muted);
}
.completed-item-top strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}
.completed-team {
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 600;
}
.completed-meta {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
}
.btn-clear-completed,
button[data-action="clear-completed"] {
  border-color: rgba(255, 120, 100, 0.45);
  color: #ffd4cc;
}
.btn-clear-completed:not(:disabled):hover,
button[data-action="clear-completed"]:not(:disabled):hover {
  border-color: rgba(255, 120, 100, 0.75);
  background: rgba(255, 80, 60, 0.12);
}
.btn-clear-completed:disabled,
button[data-action="clear-completed"]:disabled {
  opacity: 0.45;
  cursor: default;
}

.chat-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(196, 240, 98, 0.18);
  color: var(--accent);
  vertical-align: middle;
  margin-left: 6px;
}

.help-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.help-links-external {
  margin-bottom: 12px;
}
.help-card {
  display: block;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
  color: var(--accent);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  text-decoration: none;
}
.help-card-sub {
  font-size: 1rem;
  padding: 12px 14px;
  font-weight: 650;
}
.help-card:active { opacity: 0.85; }

button.help-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.calc-game-bar {
  margin: 8px 0 12px;
}
.calc-active-game-line {
  margin: 0 0 6px;
}
.calc-active-game-line strong {
  color: var(--accent);
  margin-inline-start: 6px;
}
.calc-game-banner {
  white-space: pre-line;
}

.ks-community-block {
  margin: 18px 0 8px;
  padding: 14px 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(196, 240, 98, 0.22);
  background: linear-gradient(165deg, rgba(196, 240, 98, 0.07), rgba(0, 0, 0, 0.18));
}
.ks-gift-panel {
  margin-top: 4px;
  padding: 10px 4px 2px;
}
.ks-gift-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.ks-gift-title {
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  color: var(--text);
}
.ks-gift-status {
  margin: 0 0 8px;
}
.ks-gift-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  min-height: 8px;
}
.ks-gift-chip {
  appearance: none;
  border: 1px solid rgba(196, 240, 98, 0.45);
  background: rgba(0, 0, 0, 0.35);
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.ks-gift-chip:active {
  transform: scale(0.98);
  opacity: 0.9;
}
.ks-gift-code {
  user-select: all;
}

@media (max-width: 900px) {
  .app-menu { display: none; }
  .menu-bar {
    justify-content: flex-start;
    align-items: stretch;
    gap: 10px;
    /* Keep paste + language tappable; bar itself does not block page under empty space */
    pointer-events: none;
    --header-lang-slot: 56px;
    --header-code-en-gap: 10px;
  }
  .header-code-paste {
    pointer-events: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    /* Stay left of Chat / music / EN — do not paint over those controls */
    max-width: calc(100% - var(--header-lang-slot) - 120px);
    margin-inline-end: 0;
    z-index: 200;
  }
  .header-tools {
    pointer-events: auto !important;
    position: relative;
    z-index: 260;
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-inline-start: 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: auto;
    min-width: calc(var(--header-lang-slot) + 52px);
  }
  .header-music-wrap,
  .header-music-tracks-btn,
  .header-music-btn {
    pointer-events: auto !important;
  }
  .header-chat-btn {
    pointer-events: auto !important;
    min-width: 46px;
    padding: 3px 5px;
  }
  .header-chat-lab {
    font-size: 0.58rem;
  }
  .header-lang {
    pointer-events: auto !important;
    flex-shrink: 0;
  }
  html[dir="rtl"] .menu-bar {
    justify-content: flex-start;
  }
  .header-lang-btn {
    min-width: 52px;
    width: 52px;
    min-height: 52px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  }
  .app-menu-dock { display: flex; }
  .shell { padding-bottom: calc(92px + var(--safe-bottom)); }
  .workspace { grid-template-columns: 1fr; }
  .chat-col { position: static; }
  .chat.panel {
    min-height: auto;
    max-height: none;
  }
  .chat-log { height: min(58vh, 480px); }
  .mark {
    width: 128px;
    height: 128px;
    border-radius: 26px;
  }
}

@media (min-width: 901px) {
  .app-menu-dock { display: none; }
  .shell { padding-bottom: 40px; }
  .workspace { grid-template-columns: 1fr; }
  .workspace.chat-open .chat-col {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }
}

/* iPad + Mac: two-column workspace, chat stays visible */
.workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
.primary-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.chat-col {
  min-width: 0;
}

.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
  padding: 8px 4px 4px;
  position: relative;
  z-index: 1;
}
.brand {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
}
.mark {
  width: 148px;
  height: 148px;
  flex-shrink: 0;
  border-radius: 28px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0c1210;
  box-shadow: 0 16px 44px rgba(100, 160, 40, 0.4);
}
.mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  overflow-wrap: anywhere;
}
.brand-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}
.brand-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.brand-faq,
.brand-chat-btn,
.brand-my-orders-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  line-height: 1.1;
  cursor: pointer;
  touch-action: manipulation;
  border: 1px solid rgba(196, 240, 98, 0.45);
}
.brand-faq {
  color: var(--accent, #c4f062);
  background: rgba(14, 22, 18, 0.9);
  border-bottom: 1px solid rgba(196, 240, 98, 0.45);
}
.brand-chat-btn {
  color: #10180c;
  background: var(--accent, #c4f062);
  border-color: transparent;
}
.brand-my-orders-btn {
  position: relative;
  color: var(--accent, #c4f062);
  background: rgba(14, 22, 18, 0.9);
  gap: 6px;
}
.brand-my-orders-ico {
  font-size: 1.05rem;
  line-height: 1;
}
.mail-unread-badge,
.alliance-join-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 2;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e23b3b;
  color: #fff;
  font-family: var(--font-display, system-ui);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(12, 18, 16, 0.9);
  pointer-events: none;
}
.mail-unread-badge[hidden],
.alliance-join-badge[hidden] {
  display: none !important;
}
.menu-item,
.dock-item,
.mail-inbox-btn,
.header-code-btn.mail-inbox-btn {
  position: relative;
}
.menu-item .mail-unread-badge,
.dock-item .mail-unread-badge,
.menu-item .alliance-join-badge,
.dock-item .alliance-join-badge {
  top: 4px;
  right: 6px;
}
.mail-inbox-btn {
  position: relative;
}
.mail-inbox-btn .mail-unread-badge {
  top: -4px;
  right: -4px;
}
.brand-faq:hover,
.brand-faq:focus-visible,
.brand-my-orders-btn:hover,
.brand-my-orders-btn:focus-visible,
.brand-my-orders-btn.on {
  color: #e8ffb0;
  border-color: rgba(232, 255, 176, 0.85);
  outline: none;
}
.brand-chat-btn:hover,
.brand-chat-btn:focus-visible,
.brand-chat-btn.on {
  filter: brightness(1.06);
  outline: none;
}
.brand-chat-btn.chat-locked::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-radius: 50%;
  background: #f0b060;
  box-shadow: 0 0 0 2px rgba(16, 24, 12, 0.35);
}
.tag {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.clock-block { text-align: right; }
.clock-mode { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 6px; }
.chip {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  min-height: 36px;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.chip.on {
  color: #10180c;
  background: var(--accent);
  border-color: transparent;
}
.live-clock {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.live-sub {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: right;
  max-width: 220px;
  line-height: 1.25;
}
.view-tz-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: right;
  margin-top: 4px;
}
.view-tz-label select {
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  max-width: 200px;
  margin-left: auto;
}
.profile-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(20, 32, 24, 0.85);
  font-size: 0.88rem;
  color: var(--ink);
}
.profile-strip .chip {
  flex-shrink: 0;
}
.send-preview {
  margin-top: -4px !important;
  color: var(--accent) !important;
  font-weight: 500;
}
.team-main-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  color: #10200a;
  background: var(--accent);
}

/* First-run profile setup */
.device-download-overlay {
  z-index: 10180;
}
.download-howto-overlay {
  z-index: 10220;
}
.download-howto-card {
  width: min(520px, 100%);
}
.download-howto-steps {
  margin: 14px 0 4px;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text, #e7f2df);
  font-size: 0.95rem;
  line-height: 1.4;
}
.download-howto-label {
  margin: 16px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c4f062;
}
.download-howto-can {
  margin: 8px 0 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text, #e7f2df);
  font-size: 0.95rem;
  line-height: 1.4;
}
.setup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
  background: rgba(4, 8, 6, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.setup-overlay[hidden] {
  display: none !important;
}
.setup-card {
  width: min(420px, 100%);
  max-height: min(90dvh, 720px);
  overflow: auto;
  padding: 22px 20px 20px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(165deg, #1a2820 0%, #101814 55%, #0c1210 100%);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.setup-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: 0.02em;
  font-weight: 600;
}
.setup-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}
.setup-card input {
  min-height: var(--touch);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.setup-card input:focus {
  outline: 2px solid rgba(196, 240, 98, 0.35);
  outline-offset: 1px;
}
.setup-error {
  color: var(--warn) !important;
  margin: 0 !important;
}
.setup-submit {
  margin-top: 4px;
  width: 100%;
}
.setup-wizard-card {
  gap: 14px;
}
.setup-wizard-kicker {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #c4f062);
}
.setup-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.setup-step[hidden] {
  display: none !important;
}
.setup-field-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--muted);
}
.setup-welcome-list {
  margin: 0;
  padding: 0 0 0 1.2rem;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
}
.setup-welcome-list li {
  margin: 0.25rem 0;
}
.setup-game-pick {
  max-height: min(46vh, 360px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 8px;
  margin: 0 -2px;
}
.setup-game-pick .role-chip {
  min-height: 44px;
}
.setup-review {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.setup-review > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.setup-review dt {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}
.setup-review dd {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  word-break: break-word;
}
.setup-wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.setup-wizard-actions .btn {
  flex: 1 1 0;
  min-width: 5.5rem;
}
.setup-wizard-actions .btn.primary {
  flex: 1.4 1 0;
}
.setup-wizard-actions #btnSetupSkip {
  order: 3;
  flex: 1 1 100%;
  margin-top: 2px;
  opacity: 0.92;
}
.setup-wizard-actions #btnSetupBack[hidden] {
  display: none !important;
}
.profile-orders-prompt {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #c45c26 45%, var(--line, #ccc));
  background: color-mix(in srgb, #c45c26 12%, var(--panel, #fff));
}
.phone-alerts-card {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent, #3d7a4a) 40%, var(--line, #ccc));
  background: color-mix(in srgb, var(--accent, #3d7a4a) 10%, var(--panel, #fff));
}
.phone-alerts-card.is-off {
  border-color: color-mix(in srgb, #c45c26 45%, var(--line, #ccc));
  background: color-mix(in srgb, #c45c26 12%, var(--panel, #fff));
}
.phone-alerts-card.is-on {
  border-color: color-mix(in srgb, var(--accent, #3d7a4a) 50%, var(--line, #ccc));
}
.phone-alerts-card .troop-heading {
  margin-top: 0;
}
.phone-alerts-actions {
  margin-top: 8px;
  gap: 8px;
  flex-wrap: wrap;
}
.phone-alerts-prompt-card {
  max-width: 420px;
}
body.notify-prompt-open .shell {
  pointer-events: none;
  user-select: none;
}
body.notify-prompt-open .phone-alerts-overlay,
body.notify-prompt-open #phoneAlertsOverlay {
  pointer-events: auto;
  user-select: auto;
}
.profile-orders-prompt-text {
  margin: 0 0 10px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--ink, #1a1a1a);
}
.profile-orders-prompt .btn {
  width: 100%;
}
.identity-hint-warn {
  color: #9a3412 !important;
  font-weight: 650;
}
body.setup-open .shell {
  pointer-events: none;
  user-select: none;
}
body.setup-open .app-menu,
body.setup-open .app-menu-dock,
body.order-march-open .app-menu,
body.share-code-open .app-menu {
  pointer-events: auto;
}
body.setup-open .setup-overlay {
  pointer-events: auto;
  user-select: auto;
}

.first-tour-overlay {
  z-index: 10150;
}
.pc-addon-overlay {
  z-index: 10180;
}
.pc-addon-lead {
  margin: 8px 0 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c4f062;
}
.pc-addon-code {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #0c1410;
  border: 1px solid rgba(196, 240, 98, 0.28);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  word-break: break-all;
}
.first-tour-card {
  width: min(440px, 100%);
}
.first-tour-body {
  font-size: 0.95rem;
  line-height: 1.45;
  color: #e8f0e0;
}
.first-tour-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 2px;
}
.first-tour-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(196, 240, 98, 0.45);
  background: transparent;
  cursor: pointer;
}
.first-tour-dot.on {
  background: #c4f062;
}
.tour-viz {
  border-radius: 14px;
  border: 1px solid rgba(196, 240, 98, 0.22);
  background: rgba(8, 16, 12, 0.65);
  padding: 12px;
  margin: 4px 0 2px;
  font-size: 0.82rem;
}
.tour-viz-core p {
  margin: 0;
  text-align: center;
  color: #d5e8c8;
}
.tour-viz-wait {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.tour-phone {
  flex: 0 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px dashed rgba(232, 93, 93, 0.55);
  color: #f0b4b4;
  gap: 2px;
}
.tour-phone span {
  font-size: 0.72rem;
  text-transform: uppercase;
}
.tour-roster {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.tour-roster li {
  padding: 4px 0;
}
.tour-roster .is-ok {
  color: #86efac;
}
.tour-roster .is-wait {
  color: #fbbf24;
  font-weight: 700;
}
.tour-viz-join .tour-ok {
  margin: 0 0 8px;
  color: #86efac;
}
.tour-viz-join .tour-bad {
  margin: 0;
  color: #fca5a5;
  font-weight: 700;
}
.tour-viz-alert,
.tour-viz-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.tour-viz-alert span,
.tour-viz-tabs span {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(196, 240, 98, 0.28);
  color: #cfe8b8;
}
.tour-viz-alert span.on,
.tour-viz-tabs span.on {
  background: #c4f062;
  color: #13200c;
  font-weight: 800;
}

/* Language pick after terms */
.lang-pick-overlay {
  z-index: 10120;
}
/* Terms of Service accept (Pet Guardian–style) — first screen */
.terms-accept-overlay {
  z-index: 10140;
}
.terms-accept-card {
  width: min(440px, 100%);
  text-align: center;
}
.terms-kicker {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent, #c4f062);
  text-transform: uppercase;
}
.terms-accept-card h2 {
  text-align: center;
}
.terms-accept-card .hint {
  text-align: center;
  margin: 0;
}
.terms-full-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid rgba(196, 240, 98, 0.45);
  color: var(--accent, #c4f062);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  background: rgba(196, 240, 98, 0.06);
}
.terms-full-link:active {
  opacity: 0.88;
}
.terms-privacy-link {
  border-color: rgba(180, 210, 170, 0.28);
  color: var(--muted);
  font-weight: 600;
  min-height: 42px;
  font-size: 0.9rem;
}
.terms-check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.terms-check-row[aria-pressed="true"] {
  border-color: rgba(196, 240, 98, 0.45);
  background: rgba(196, 240, 98, 0.1);
}
.terms-checkbox {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 8px;
  border: 2px solid rgba(196, 240, 98, 0.5);
  background: rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
}
.terms-check-row[aria-pressed="true"] .terms-checkbox {
  background: var(--accent, #c4f062);
  border-color: var(--accent, #c4f062);
}
.terms-check-row[aria-pressed="true"] .terms-checkbox::after {
  content: "✓";
  color: #0a1208;
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1;
}
.terms-check-label {
  flex: 1;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink);
}
#btnTermsContinue:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.lang-pick-card {
  width: min(440px, 100%);
}
.lang-pick-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 42vh;
  overflow: auto;
  padding: 2px;
}
.lang-chip {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}
.lang-chip.on {
  border-color: rgba(196, 240, 98, 0.55);
  background: rgba(196, 240, 98, 0.16);
  color: #e8ffb0;
}
.lang-pick-card select {
  min-height: var(--touch);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  width: 100%;
}

/* Per-section first-time how-to */
.howto-card {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(196, 240, 98, 0.28);
  background:
    linear-gradient(145deg, rgba(196, 240, 98, 0.1), rgba(16, 32, 24, 0.55));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.howto-card-mini {
  padding: 6px 0;
  border: none;
  background: transparent;
  margin-bottom: 8px;
}
.howto-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.howto-badge {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #10200a;
  background: var(--accent);
  border-radius: 999px;
  padding: 2px 8px;
  margin-right: 8px;
  font-weight: 700;
}
.howto-title {
  font-size: 1rem;
  display: inline-block;
  margin-top: 4px;
}
.howto-got-it {
  flex: 0 0 auto;
  min-height: 40px;
}
.howto-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.howto-actions .btn {
  flex: 1 1 auto;
  min-width: 7.5rem;
  min-height: 40px;
}
.howto-done-reading {
  font-weight: 650;
}
.howto-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.howto-line {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink);
  opacity: 0.95;
}
.howto-reopen {
  align-self: flex-start;
  min-height: 36px;
  font-size: 0.88rem;
}
.help-howto-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.help-howto-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
}
.help-howto-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}

.push-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
}
.push-check {
  min-width: 0;
  font-size: 0.8rem;
}
.push-status {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: right;
}
.push-status.on { color: var(--accent); }
.push-status.warn { color: var(--warn); }

@media (max-width: 700px) {
  .push-row { justify-content: flex-start; }
  .push-status { text-align: left; }
}

.panel {
  background: linear-gradient(160deg, rgba(16, 24, 20, 0.97), rgba(9, 14, 11, 0.95));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 16px 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
}
.panel h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #d5e8c8;
}

.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}
.row-2 {
  grid-template-columns: 1fr 1fr;
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
input, select, button, textarea {
  font: inherit;
  touch-action: manipulation;
}
/* 16px prevents iOS Safari zooming into focused fields */
input, select {
  background: rgba(6, 12, 9, 0.65);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  padding: 12px 12px;
  font-size: 16px;
  width: 100%;
  min-height: var(--touch);
  -webkit-appearance: none;
  appearance: none;
}
input[type="checkbox"],
input[type="radio"] {
  width: 1.4rem;
  min-width: 1.4rem;
  max-width: 1.4rem;
  height: 1.4rem;
  min-height: 1.4rem;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(196, 240, 98, 0.45);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-appearance: checkbox;
  appearance: auto;
  accent-color: var(--accent, #c4f062);
  cursor: pointer;
  flex: 0 0 auto;
}
input[type="radio"] {
  border-radius: 50%;
  -webkit-appearance: radio;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
input:focus, select:focus {
  outline: 2px solid rgba(196, 240, 98, 0.35);
  border-color: rgba(196, 240, 98, 0.45);
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; }

.btn {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border-radius: 999px;
  min-height: var(--touch);
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { border-color: rgba(196, 240, 98, 0.4); }
  .chip:hover:not(.on) { border-color: rgba(196, 240, 98, 0.35); color: var(--ink); }
}
.btn:active { transform: scale(0.98); }
.btn.primary {
  background: linear-gradient(135deg, var(--accent), #9ad93f);
  color: #0f180a;
  border: none;
  box-shadow: 0 8px 20px rgba(120, 170, 40, 0.25);
}
.btn.danger {
  color: #ffd0d0;
  border-color: rgba(232, 93, 93, 0.45);
}

.hint { color: var(--muted); font-size: 0.8rem; margin: 0 0 10px; line-height: 1.4; }
.hidden { display: none !important; }

.alliance-list, .rally-list, .team-board {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}
.card strong { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.02em; }
.card .meta { color: var(--muted); font-size: 0.8rem; }
.card.active { border-color: rgba(196, 240, 98, 0.55); box-shadow: inset 0 0 0 1px rgba(196, 240, 98, 0.15); }

.active-alliance {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(196, 240, 98, 0.08);
  border: 1px solid rgba(196, 240, 98, 0.25);
  font-size: 0.9rem;
}
.active-alliance code {
  font-family: ui-monospace, Menlo, monospace;
  color: var(--accent);
  letter-spacing: 0.08em;
  user-select: all;
  -webkit-user-select: all;
}

.troop-heading {
  margin: 16px 0 6px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #d5e8c8;
}
.troop-sliders {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 12px;
}
.hero-pick-panel,
.march-boosts-panel {
  margin: 10px 0 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(140, 180, 120, 0.22);
  background: rgba(0, 0, 0, 0.18);
}
.hero-pick-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.hero-pick-title {
  margin: 0;
}
.hero-pick-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent, #7dd3a0);
}
.hero-pick-search-lab {
  display: block;
  margin: 8px 0;
}
.hero-pick-search-lab input {
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  padding: 8px 12px;
  font: inherit;
}
.hero-pick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding: 2px 0 4px;
}
.hero-pick-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(140, 180, 120, 0.28);
  background: rgba(20, 32, 24, 0.75);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  line-height: 1.2;
}

/* Pets · beasts picker (type filters) */
.pet-pick-panel {
  margin: 10px 0 14px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(140, 180, 90, 0.28);
  background: rgba(30, 50, 28, 0.28);
}
.pet-type-filters,
.pet-gen-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.pet-type-chip,
.pet-gen-chip {
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
}
.pet-type-chip.on,
.pet-gen-chip.on {
  border-color: rgba(196, 240, 98, 0.55);
  background: rgba(90, 140, 50, 0.35);
  color: var(--accent);
}
.pet-type-chip[data-type="utility"].on {
  border-color: rgba(120, 180, 220, 0.55);
  background: rgba(40, 90, 120, 0.35);
  color: #b8dff0;
}
.pet-type-chip[data-type="combat"].on {
  border-color: rgba(230, 120, 90, 0.55);
  background: rgba(120, 50, 30, 0.35);
  color: #f0c0a8;
}
.pet-pick-chips .hero-pick-chip {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 100%;
}
.pet-pick-meta {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 600;
}
.pet-pick-skill {
  font-size: 0.68rem;
  color: #c8e0a8;
  font-weight: 500;
  line-height: 1.25;
}
.pet-names-lab {
  display: block;
  margin: 8px 0;
}
.pet-names-lab span {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 4px;
}

.hero-pick-chip.on {
  border-color: rgba(125, 211, 160, 0.75);
  background: linear-gradient(165deg, rgba(56, 120, 72, 0.55), rgba(24, 48, 32, 0.7));
  box-shadow: 0 0 0 1px rgba(125, 211, 160, 0.25);
}
.hero-pick-name {
  font-weight: 700;
}
.hero-pick-cls {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 500;
}
.march-boosts-panel .order-boosts-checks {
  margin-top: 6px;
}
.troop-card {
  display: grid;
  grid-template-columns: 144px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
}
.troop-img {
  width: 144px;
  height: 144px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  background: #0a100c;
}
.troop-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.troop-name-row {
  display: grid;
  grid-template-columns: minmax(4.2em, auto) minmax(7.5rem, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.troop-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #e8f2e4;
  white-space: nowrap;
}
.troop-tier-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.troop-tier-edge {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.troop-tier-val {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: #f0d060;
  font-variant-numeric: tabular-nums;
  min-width: 2.1em;
  text-align: right;
}
.troop-tier-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  margin: 0;
  padding: 0;
  cursor: pointer;
  min-width: 0;
}
.troop-tier-range:focus {
  outline: none;
}
.troop-tier-range::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(120, 100, 40, 0.45), rgba(240, 200, 80, 0.65));
  border: 1px solid rgba(200, 170, 60, 0.35);
}
.troop-tier-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffe38a, #e0b020);
  border: 2px solid #2a2208;
  box-shadow: 0 3px 8px rgba(180, 140, 30, 0.45);
}
.troop-tier-range::-moz-range-track {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(120, 100, 40, 0.45), rgba(240, 200, 80, 0.65));
  border: 1px solid rgba(200, 170, 60, 0.35);
}
.troop-tier-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffe38a, #e0b020);
  border: 2px solid #2a2208;
  box-shadow: 0 3px 8px rgba(180, 140, 30, 0.45);
}
.troop-pct {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 3.2em;
  text-align: right;
}
@media (max-width: 420px) {
  .troop-name-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name pct"
      "tier tier";
  }
  .troop-name { grid-area: name; }
  .troop-pct { grid-area: pct; }
  .troop-tier-wrap { grid-area: tier; }
}
.troop-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.troop-range:focus {
  outline: none;
}
.troop-range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(90, 143, 42, 0.35), rgba(196, 240, 98, 0.55));
  border: 1px solid var(--line);
}
.troop-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -9px;
  border-radius: 50%;
  background: linear-gradient(145deg, #d4f573, #8fd93a);
  border: 2px solid #10200a;
  box-shadow: 0 4px 12px rgba(120, 170, 40, 0.4);
}
.troop-range::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(90, 143, 42, 0.35), rgba(196, 240, 98, 0.55));
  border: 1px solid var(--line);
}
.troop-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(145deg, #d4f573, #8fd93a);
  border: 2px solid #10200a;
  box-shadow: 0 4px 12px rgba(120, 170, 40, 0.4);
}
.troop-count-input {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 8px 10px;
}
.troop-sliders .troop-count-input[data-troop-abs],
.troop-count-pick input[data-troop-abs] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.troop-sliders[data-troop-unit="count"] .troop-pct {
  color: #f0c14b;
}
.order-preset-row {
  margin: 8px 0 10px;
}
.order-preset-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 700;
}
.order-preset-label select {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  padding: 8px 10px;
}
.order-preset-using {
  margin: 4px 0 0;
}

.march-preset-bar {
  margin: 10px 0 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
}
.march-preset-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 10px;
}
.march-preset-select-lab {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 200px;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 700;
}
.march-preset-select-lab select {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  padding: 8px 10px;
}
.march-preset-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.march-preset-chip {
  display: grid;
  grid-template-columns: minmax(5em, auto) 1fr;
  grid-template-areas:
    "name heroes"
    "troop troop";
  gap: 4px 10px;
  text-align: left;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  touch-action: manipulation;
}
.march-preset-chip.on {
  border-color: rgba(196, 240, 98, 0.55);
  background: rgba(90, 143, 42, 0.18);
  box-shadow: 0 0 0 1px rgba(196, 240, 98, 0.2);
}
.march-preset-chip-name {
  grid-area: name;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}
.march-preset-chip-name em {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--accent);
  margin-left: 4px;
}
.march-preset-chip-heroes {
  grid-area: heroes;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.march-preset-chip-troop {
  grid-area: troop;
  font-size: 0.78rem;
  color: #d0e8b8;
  line-height: 1.35;
}
.orders-march-presets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
}
.orders-march-preset-card {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.2);
}
.orders-march-preset-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.orders-march-preset-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.orders-march-preset-unit {
  font-weight: 800;
  color: var(--accent);
  font-size: 0.85rem;
}
.orders-march-preset-troop {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: #d0e8b8;
  line-height: 1.35;
}
.orders-march-preset-actions {
  margin-top: 8px;
}
.team-chip.is-saved {
  border-style: dashed;
}
.troop-total {
  margin: 0 0 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}
.troop-total.ok {
  color: var(--accent);
}
.troop-total.warn {
  color: var(--warn);
}

.team-troop-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.team-troop-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
}
.team-troop-chip img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.team-troop-chip strong {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.team-troop-chip .team-troop-tier {
  font-style: normal;
  font-weight: 800;
  color: #f0d060;
  font-variant-numeric: tabular-nums;
}

.team-slot {
  border-left: 3px solid var(--accent-deep);
  padding: 12px 12px 12px 14px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 0 12px 12px 0;
}
.team-slot .when {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.team-slot .countdown {
  font-weight: 600;
  color: var(--warn);
  font-variant-numeric: tabular-nums;
}
.team-slot .countdown.due { color: var(--danger); animation: pulse 1s infinite; }
.team-slot .countdown.go { color: var(--accent); }
@keyframes pulse {
  50% { opacity: 0.55; }
}

.chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.chat-head h2 { margin: 0; }
.chat-head select { max-width: min(100%, 280px); }

.lang-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(196, 240, 98, 0.06);
  border: 1px solid rgba(196, 240, 98, 0.16);
}
.check-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
  flex: 1;
  min-width: 200px;
}
.check-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.lang-pick {
  min-width: 160px;
  max-width: 220px;
}
.lang-hint { margin-top: 0; }

.invite-row { margin-bottom: 10px; }
.chat-log {
  height: min(280px, 38vh);
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.msg {
  font-size: 0.9rem;
  line-height: 1.35;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  word-break: break-word;
}
.msg-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.msg-av-wrap {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
}
button.msg-av-btn {
  cursor: pointer;
  border-radius: 50%;
}
button.msg-av-btn:focus-visible {
  outline: 2px solid #c4f062;
  outline-offset: 2px;
}
.chat-player-hero {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.chat-player-photo,
.chat-player-fallback {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}
.chat-player-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: rgba(196, 240, 98, 0.85);
  color: #10200a;
}
.chat-player-actions {
  flex-wrap: wrap;
}
.msg-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
}
.msg-av-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #10200a;
  background: rgba(196, 240, 98, 0.85);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
}
.msg-main {
  flex: 1 1 auto;
  min-width: 0;
}
.msg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  margin-bottom: 2px;
}
.msg-time {
  margin-inline-start: auto;
  font-size: 0.68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.9;
}
.chat-day-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 6px;
  padding: 0 4px;
  user-select: none;
}
.chat-day-sep::before,
.chat-day-sep::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(196, 240, 98, 0.18);
}
.chat-day-sep span {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(196, 240, 98, 0.28);
  background: rgba(196, 240, 98, 0.1);
  color: var(--accent, #c4f062);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.msg .who {
  font-weight: 600;
  color: var(--accent);
  margin-right: 0;
}

/* Chat: tappable name → order setup; order code copy chips */
.msg button.who.msg-name-order {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(196, 240, 98, 0.35);
  text-underline-offset: 2px;
}
.msg button.who.msg-name-order:hover,
.msg button.who.msg-name-order:focus-visible {
  text-decoration-color: var(--accent);
  outline: none;
}
.msg-order-code-wrap {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0;
  max-width: 100%;
  vertical-align: middle;
}
.msg-order-code {
  font-size: 0.78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.01em;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid rgba(140, 180, 90, 0.4);
  background: rgba(40, 70, 30, 0.35);
  color: #d8f0a8;
  word-break: break-all;
  max-width: 100%;
}
.msg-order-copy {
  min-height: 28px;
  font-size: 0.72rem;
  padding: 4px 8px;
  flex: 0 0 auto;
}
.msg-order-copies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.msg-srv {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
}
.msg-ally {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #c8e0a8;
  background: rgba(80, 120, 50, 0.22);
  border: 1px solid rgba(140, 180, 90, 0.4);
  border-radius: 6px;
  padding: 1px 6px;
  max-width: 9.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-tr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.68rem;
  cursor: pointer;
  padding: 0;
}
.msg-tr-badge {
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(94, 196, 150, 0.12);
  border: 1px solid rgba(94, 196, 150, 0.28);
  border-radius: 6px;
  padding: 1px 6px;
}
.msg-tr-action {
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.9;
}
.msg-tr-toggle:hover .msg-tr-action {
  color: var(--accent);
}
.msg-body {
  color: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-coords-pick {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(120, 190, 150, 0.35);
  background: rgba(30, 70, 50, 0.28);
}
.msg-coords-pick-label {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--muted);
}
.msg-coords-pick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.msg-coord-chip {
  min-height: 36px;
  font-size: 0.82rem;
  padding: 6px 10px;
  font-variant-numeric: tabular-nums;
}
.msg .t {
  color: var(--muted);
  font-size: 0.72rem;
  margin-left: 6px;
}
.msg .body { display: inline; }

.profile-photo-block {
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
}
.profile-photo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.profile-photo-preview {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.profile-photo-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.profile-photo-initials {
  font-size: 1.15rem;
  font-weight: 700;
  color: #10200a;
  background: rgba(196, 240, 98, 0.9);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.msg .badge-tr {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #10200a;
  background: rgba(196, 240, 98, 0.75);
  border-radius: 999px;
  padding: 1px 7px;
  vertical-align: middle;
}
.msg .orig {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}
.msg .orig-toggle {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  min-height: auto;
}
.chat-form {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 6px;
  align-items: center;
  margin: 0;
  padding: 0;
}
/* WKWebView / iOS: force visible typed text (never inherit transparent / autofill washout) */
.chat-form #chatInput {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--accent, #c4f062);
  background: rgba(6, 12, 9, 0.65);
}
.chat-form #chatInput::placeholder {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  opacity: 0.85;
}
.chat-form #btnChatPhoto,
.chat-form #btnChatEmoji,
.chat-form .chat-form-ico {
  min-width: 44px;
  padding: 0 8px;
  font-size: 1.15rem;
}
.chat-form #btnChatEmoji.on {
  border-color: rgba(196, 240, 98, 0.55);
  background: rgba(196, 240, 98, 0.16);
}
.chat-received-list,
.chat-orders-tray-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-order-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.18);
}
.chat-order-card h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
}
.chat-order-card .hint {
  margin: 0 0 8px;
  font-size: 0.8rem;
}
.chat-order-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.share-code-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0;
  font-size: 0.9rem;
}
.share-code-check input {
  margin-top: 3px;
}
.chat-orders-tray-card {
  max-height: min(86vh, 640px);
  overflow: auto;
}
.msg-img-wrap {
  display: block;
  margin-top: 6px;
  max-width: 100%;
}
.msg-img {
  display: block;
  max-width: min(100%, 420px);
  max-height: 320px;
  width: auto;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.msg-img-caption {
  display: block;
  margin-top: 4px;
}
.chat-uploading {
  opacity: 0.75;
  pointer-events: none;
}

.foot {
  text-align: center;
  color: var(--muted);
  font-size: 0.75rem;
  padding: 8px;
  line-height: 1.5;
}
.foot-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.foot-chat-btn {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 800;
  color: var(--accent);
  cursor: pointer;
}
.foot-link:hover { text-decoration: underline; }
.install-hint { opacity: 0.9; }

/* Phones / narrow */
@media (max-width: 700px) {
  .row, .row-2 { grid-template-columns: 1fr; }
  .clock-block { text-align: left; width: 100%; }
  .clock-mode { justify-content: flex-start; }
  .chat {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding-bottom: max(8px, var(--safe-bottom));
  }
  .shell {
    padding-left: 12px;
    padding-right: 12px;
  }
  .mark {
    width: 72px;
    height: 72px;
    border-radius: 16px;
  }
  .top {
    gap: 10px;
    align-items: flex-start;
  }
  .brand {
    width: 100%;
    gap: 10px;
  }
  .tag {
    font-size: 0.82rem;
  }
  .live-clock {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
    word-break: break-word;
  }
  .big-countdown {
    padding: 14px 10px;
  }
  .big-countdown-time {
    font-size: clamp(1.8rem, 10vw, 2.8rem);
    word-break: break-word;
  }
  /* Multi-sender rows: stack so nothing is cut off sideways */
  .sync-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas:
      "ord name status"
      "ord path path"
      "ord send send";
  }
  .sync-ord { grid-area: ord; }
  .sync-name { grid-area: name; white-space: normal; }
  .sync-status { grid-area: status; justify-self: end; }
  .sync-path { grid-area: path; white-space: normal; }
  .sync-send { grid-area: send; white-space: normal; }
  .troop-name-row {
    grid-template-columns: 1fr;
  }
  .chat-form {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
  }
  .chat-toolbar {
    flex-wrap: wrap;
  }
  .chat-toolbar-mid {
    flex: 1 1 100%;
  }
  .panel,
  .screen {
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
  }
}

/* iPad portrait & small tablets */
@media (min-width: 701px) and (max-width: 1023px) {
  .shell { padding: 24px 22px 40px; }
  .chat-log { height: min(480px, 58vh); }
}

/* iPad landscape + Mac: split canvas, chat pinned */
@media (min-width: 1024px) {
  .shell {
    padding: 28px 28px 40px;
    gap: 20px;
  }
  .workspace {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 18px;
  }
  .chat-col {
    position: sticky;
    top: max(12px, var(--safe-top));
    align-self: start;
    min-width: 0;
  }
  .chat.panel {
    min-height: min(78vh, 880px);
    max-height: calc(100dvh - 140px);
  }
  .chat-log {
    flex: 1;
    height: auto;
    min-height: 280px;
  }
  .live-clock { font-size: 3rem; }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .team-slot .countdown.due { animation: none; }
  .btn:active { transform: none; }
}

.menu-item.tab-alert-orders,
.dock-item.tab-alert-orders {
  animation: tab-flash-orders 1.05s ease-in-out infinite;
  color: #e8ffb0;
}
.menu-item.tab-alert-mail,
.dock-item.tab-alert-mail {
  animation: tab-flash-mail 1.05s ease-in-out infinite;
  color: #ffe7b0;
}
.menu-item.tab-alert-in,
.dock-item.tab-alert-in {
  animation: tab-flash-in 1.05s ease-in-out infinite;
  color: #ffd0d0;
}
.menu-item.tab-alert-out,
.dock-item.tab-alert-out {
  animation: tab-flash-out 1.05s ease-in-out infinite;
  color: #d8ffe8;
}
.menu-item.tab-alert .menu-ico {
  animation: inherit;
}
@keyframes tab-flash-mail {
  0%,
  100% {
    background: rgba(196, 240, 98, 0.12);
    box-shadow: 0 0 0 0 rgba(196, 240, 98, 0);
  }
  50% {
    background: rgba(196, 240, 98, 0.42);
    box-shadow: 0 0 0 3px rgba(196, 240, 98, 0.75);
  }
}
@keyframes tab-flash-orders {
  0%,
  100% {
    background: rgba(196, 240, 98, 0.12);
    box-shadow: 0 0 0 0 rgba(196, 240, 98, 0);
  }
  50% {
    background: rgba(196, 240, 98, 0.42);
    box-shadow: 0 0 0 3px rgba(196, 240, 98, 0.75);
  }
}
@keyframes tab-flash-in {
  0%,
  100% {
    background: rgba(180, 40, 40, 0.2);
    box-shadow: 0 0 0 0 rgba(255, 80, 80, 0);
  }
  50% {
    background: rgba(200, 40, 40, 0.72);
    box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.85);
    color: #fff;
  }
}
@keyframes tab-flash-out {
  0%,
  100% {
    background: rgba(30, 120, 70, 0.2);
    box-shadow: 0 0 0 0 rgba(80, 220, 120, 0);
  }
  50% {
    background: rgba(30, 140, 80, 0.78);
    box-shadow: 0 0 0 3px rgba(90, 230, 140, 0.85);
    color: #fff;
  }
}
/* Active tab still selected look, flash clears right after open */
.menu-item.on.tab-alert,
.dock-item.on.tab-alert {
  animation: none;
}

/* Live marches tab */
.menu-item .menu-ico.city-ico {
  color: #f0c98a;
  background: rgba(180, 90, 40, 0.35);
}
.menu-item.on .menu-ico.city-ico {
  color: #1a1208;
  background: rgba(240, 180, 90, 0.95);
}
.menu-item.on[data-go="city"] {
  border-color: rgba(240, 180, 90, 0.55);
}
.dock-item.dock-city.on {
  color: #f0c98a;
}
.city-reinforce-board {
  margin-top: 8px;
}

.menu-item .menu-ico.live-ico-in,
.dock-live-in.on {
  color: #ffb4b4;
}
.menu-item.on .menu-ico.live-ico-in {
  background: rgba(180, 40, 40, 0.35);
  color: #ffd0d0;
}
.menu-item.on[data-go="liveIn"] {
  background: rgba(180, 40, 40, 0.85);
  color: #fff;
}
.menu-item .menu-ico.live-ico-out {
  color: #b8f0cc;
}
.menu-item.on .menu-ico.live-ico-out {
  background: rgba(30, 120, 70, 0.4);
  color: #d8ffe8;
}
.menu-item.on[data-go="liveOut"] {
  background: rgba(30, 120, 70, 0.9);
  color: #fff;
}
.dock-live-in.on {
  background: rgba(180, 40, 40, 0.35) !important;
  color: #ffd0d0 !important;
}
.dock-live-out.on {
  background: rgba(30, 120, 70, 0.4) !important;
  color: #d8ffe8 !important;
}
.live-heading-in { color: #ffb4b4; }
.live-heading-out { color: #b8f0cc; }
.live-subtabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px 0 12px;
}
.live-subtab {
  min-height: 48px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.15;
  padding: 8px 6px;
  cursor: pointer;
  touch-action: manipulation;
}
.live-subtab-in.on {
  border-color: rgba(255, 90, 90, 0.75);
  background: rgba(180, 40, 40, 0.35);
  color: #ffd0d0;
}
.live-subtab-out.on {
  border-color: rgba(80, 200, 120, 0.75);
  background: rgba(30, 120, 70, 0.35);
  color: #c8f5d8;
}
.live-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.88rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.22);
}
.live-pill.in {
  border-color: rgba(255, 90, 90, 0.55);
  background: rgba(180, 40, 40, 0.22);
  color: #ffc9c9;
}
.live-pill.out {
  border-color: rgba(80, 200, 120, 0.55);
  background: rgba(30, 120, 70, 0.22);
  color: #c8f5d8;
}
.live-pill.pending {
  border-color: rgba(240, 200, 80, 0.4);
  color: #f0e0a8;
}
.live-pill.order-pend {
  border-color: rgba(120, 180, 255, 0.5);
  background: rgba(40, 70, 120, 0.28);
  color: #c4dbff;
}
.live-march-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.live-card {
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.live-card.dir-in {
  border-color: rgba(255, 80, 80, 0.55);
  background: linear-gradient(145deg, rgba(120, 25, 25, 0.35), rgba(20, 8, 8, 0.55));
  box-shadow: 0 0 0 1px rgba(255, 80, 80, 0.12);
}
.live-card.dir-out {
  border-color: rgba(70, 200, 110, 0.55);
  background: linear-gradient(145deg, rgba(20, 90, 50, 0.32), rgba(8, 20, 12, 0.55));
  box-shadow: 0 0 0 1px rgba(70, 200, 110, 0.12);
}
.live-card.is-done {
  opacity: 0.62;
}
.live-card.is-now {
  outline: 2px solid rgba(255, 220, 90, 0.55);
}
.live-card.is-order-pending {
  outline: 2px solid rgba(120, 170, 255, 0.45);
}
.live-card.is-order-pending.dir-in {
  border-color: rgba(160, 120, 255, 0.5);
}
.live-card.is-order-pending.dir-out {
  border-color: rgba(100, 170, 255, 0.55);
}
.live-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.live-dir-badge {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
.live-card.dir-in .live-dir-badge {
  background: rgba(255, 90, 90, 0.25);
  color: #ffb4b4;
}
.live-card.dir-out .live-dir-badge {
  background: rgba(80, 200, 120, 0.25);
  color: #b8f0cc;
}
.live-status {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}
.live-status.pending {
  color: #f0e0a8;
}
.live-status.pending-order {
  color: #b8d4ff;
  background: rgba(60, 100, 180, 0.25);
}
.live-status.hold {
  color: #f0e6a0;
  background: rgba(120, 100, 30, 0.28);
}
.live-card.is-group-hold {
  border-color: rgba(200, 180, 60, 0.35);
}
.live-status.now {
  color: #ffd54a;
}
.live-status.done {
  color: var(--muted);
}
.live-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.live-card-meta {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink);
}
.live-card-meta strong {
  color: var(--muted);
  font-weight: 600;
}
.live-people {
  margin: 2px 0 0;
  font-size: 0.88rem;
  line-height: 1.35;
}
.live-count {
  display: inline-block;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
}

/* Chat paywall — Pet Guardian–style Free vs Chat */
.pg-paywall {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: -4px -4px 0;
  padding: 20px 16px 28px;
  border-radius: 16px;
  background: linear-gradient(165deg, #0b1a12 0%, #122018 42%, #0c1410 100%);
  border: 1px solid rgba(196, 240, 98, 0.18);
  min-height: 0;
  max-height: min(92dvh, calc(100dvh - 5rem));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* MUST beat .pg-paywall { display:flex } or hidden paywall stays as a blank green slab + X */
.pg-paywall[hidden],
.pg-paywall-success[hidden],
.pg-paywall-main[hidden] {
  display: none !important;
}
.chat-need-list {
  margin: 6px 0 10px;
  padding-left: 1.15rem;
  font-size: 0.84rem;
  line-height: 1.4;
  opacity: 0.95;
}
.chat-need-list li { margin: 2px 0; }
.chat-active[hidden] {
  display: none !important;
}
/* When subscribed / rooms open, never show the paywall shell */
body.chat-unlocked .pg-paywall,
.screen.chat.chat-rooms-open .pg-paywall {
  display: none !important;
}
.pg-paywall-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.pg-paywall-brand {
  margin: 8px 0 0;
  font-family: var(--font-display, inherit);
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
  letter-spacing: 0.02em;
}
.pg-download-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 28rem;
  margin: 8px auto 12px;
}
.pg-download-lead {
  margin: 0 0 2px;
  text-align: center;
  font-weight: 800;
  color: #fff;
}
.pg-download-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #111;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.pg-download-name {
  font-size: 1.05rem;
  font-weight: 800;
}
.pg-download-hit {
  font-size: 0.92rem;
  font-weight: 800;
  color: #c4f062;
  white-space: nowrap;
}
.pg-download-list-more {
  margin: 0 0 10px;
  max-width: none;
}
.pg-get-app {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: stretch;
  margin: 4px 0 8px;
}
.pg-get-app[hidden] {
  display: none !important;
}
.pg-store-btn {
  flex: 1 1 140px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #111;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.pg-store-btn.apple { background: #000; }
.pg-store-btn.android { background: #16301f; border-color: rgba(196, 240, 98, 0.45); }
.pg-store-btn.pc { background: #1b2838; border-color: rgba(102, 192, 244, 0.55); }
.pg-store-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.pg-store-name {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.1;
}
.pg-paywall-hero-tag {
  margin: 6px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(196, 240, 98, 0.85);
  text-align: center;
}
.pg-paywall-title {
  margin: 8px 0 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}
.pg-paywall-sub {
  margin: 8px auto 0;
  max-width: 34rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}
.pg-paywall-whats {
  margin: 16px 0 12px;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
}
.pg-paywall-iap-note {
  margin: -4px auto 14px;
  max-width: 28rem;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(196, 240, 98, 0.4);
  background: rgba(196, 240, 98, 0.14);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
  color: #e8f6b8;
}
.pg-paywall-included-title {
  margin: 4px 0 6px;
}
.pg-paywall-included-lead {
  margin: 0 auto 10px;
  max-width: 34rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(232, 242, 228, 0.88);
  text-align: center;
}
.pg-included-list {
  margin: 0 auto 16px;
  max-width: 34rem;
  padding: 12px 12px 12px 2rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 214, 10, 0.45);
  background: rgba(255, 214, 10, 0.08);
  color: #f4f0e0;
}
.pg-included-list li {
  margin: 0 0 8px;
  font-size: 0.92rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.pg-included-list li:last-child {
  margin-bottom: 0;
}
.pg-plan-list li {
  margin: 0 0 7px;
  font-size: 0.8rem;
  line-height: 1.35;
}
.pg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin-bottom: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  border: none;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}
.pg-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.pg-btn-primary {
  background: var(--accent, #c4f062);
  color: #0a1208;
}
.pg-btn-subscribe {
  min-height: 72px;
}
.pg-btn-free {
  background: #fff;
  color: #0a1208;
}
.pg-btn-restore {
  min-height: 52px;
  margin-bottom: 16px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #e8f7f0;
  font-weight: 700;
  font-size: 0.98rem;
}
.pg-paywall-status {
  margin: 0 0 14px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}
.pg-paywall-status.is-error {
  color: #ffb4a8;
  font-weight: 700;
}
.pg-review-demo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 22px 0 4px;
  padding: 12px 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.16);
  text-align: left;
}
.pg-review-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(232, 247, 240, 0.72);
}
.pg-review-hint {
  margin: 0 0 2px;
  font-size: 0.76rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
}
.pg-review-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
}
.pg-review-demo input {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.96);
  color: #0a1208;
  padding: 8px 12px;
  font-size: 1rem;
}
.pg-compare-row {
  display: flex;
  gap: 10px;
  margin: 4px 0 16px;
  align-items: stretch;
}
/* Phone: stack plans so long bullets stay readable (iPad Split / slim Mac window too) */
@media (max-width: 560px) {
  .pg-compare-row {
    flex-direction: column;
  }
}
/* iPad + Mac: center paywall, roomier type, pointer-friendly controls */
@media (min-width: 700px) {
  .pg-paywall {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    min-height: auto;
    padding: 28px 28px 36px;
  }
  .pg-paywall-sub {
    max-width: 40rem;
    font-size: 1rem;
  }
  .pg-btn {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .pg-compare-row {
    gap: 16px;
  }
  .pg-plan-list li {
    font-size: 0.88rem;
    padding-bottom: 12px;
  }
  .pg-plan-sub {
    font-size: 0.85rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .pg-btn-primary:hover:not(:disabled) {
    filter: brightness(1.06);
  }
  .pg-btn-free:hover:not(:disabled) {
    background: #f3f3f3;
  }
  .pg-btn-restore:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
  }
  .pg-paywall-close:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}
.pg-plan-col {
  flex: 1;
  min-width: 0;
  padding: 12px 10px 14px;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}
.pg-plan-col.pg-plan-free {
  border-color: rgba(100, 210, 170, 0.55);
}
.pg-plan-col.pg-plan-chat {
  border-color: rgba(255, 214, 10, 0.65);
}
.pg-plan-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0a1208;
  margin-bottom: 8px;
}
.pg-plan-badge.free {
  background: #4ecdc4;
}
.pg-plan-badge.chat {
  background: #ffd60a;
}
.pg-plan-sub {
  margin: 0 0 10px;
  font-size: 0.75rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.65);
}
.pg-plan-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pg-plan-list li {
  position: relative;
  padding: 0 0 10px 22px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
.pg-plan-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
  font-size: 0.85rem;
}
.pg-plan-free .pg-plan-list li::before {
  color: #4ecdc4;
}
.pg-plan-chat .pg-plan-list li::before {
  color: #ffd60a;
}
.pg-apple-disclosure {
  margin: 18px 0 8px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(196, 240, 98, 0.4);
  background: rgba(12, 22, 16, 0.72);
  text-align: left;
}
.pg-apple-disclosure-title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #e8f6b8;
  text-align: center;
}
.pg-apple-disclosure-list {
  margin: 0 0 10px;
  padding: 0 0 0 1.15rem;
  color: rgba(232, 242, 228, 0.92);
  font-size: 0.88rem;
  line-height: 1.45;
}
.pg-apple-disclosure-list li {
  margin: 0 0 6px;
}
.pg-legal-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.pg-legal-btns {
  flex-wrap: wrap;
  margin-top: 10px;
  gap: 10px;
}
.pg-legal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(196, 240, 98, 0.55);
  background: rgba(196, 240, 98, 0.16);
  color: #e8f6b8;
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
  flex: 1 1 10rem;
}
.pg-legal-btn:hover,
.pg-legal-btn:focus-visible {
  background: rgba(196, 240, 98, 0.28);
  outline: none;
}
.pg-legal-link {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  text-decoration: underline;
}
.pg-legal-dot {
  color: rgba(255, 255, 255, 0.4);
}
.pg-paywall-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 28px 8px 12px;
}
.pg-paywall-success h2 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
}
.pg-paywall-body {
  margin: 0 0 8px;
  font-size: 0.98rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}
.pg-pro-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  background: #ffd60a;
  color: #0a1208;
  font-size: 0.95rem;
  font-weight: 800;
}
.chat-sub-card {
  margin: 12px 0 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(196, 240, 98, 0.28);
  background: rgba(196, 240, 98, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-sub-card.is-active {
  border-color: rgba(120, 220, 140, 0.4);
  background: rgba(80, 180, 100, 0.1);
}
.chat-sub-card .timer-actions {
  margin-top: 4px;
}
.dock-item.chat-locked {
  opacity: 0.72;
}
.dock-item.chat-locked::after {
  content: "🔒";
  font-size: 0.65rem;
  margin-left: 2px;
}

/* panel screen chat: no extra card gap when paywall fills */
.screen.chat.is-active {
  padding-bottom: 8px;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Multi-player pick + same-target hit sync */
.order-pick-multi {
  width: 100%;
  min-height: 6.5rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  padding: 6px;
}
.order-assign-pick {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.order-assign-pick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hit-rank-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: rgba(125, 211, 160, 0.18);
  color: var(--accent, #7dd3a0);
  border: 1px solid rgba(125, 211, 160, 0.35);
  vertical-align: middle;
}
.hit-rank-badge.rank-1 {
  background: rgba(240, 193, 75, 0.2);
  border-color: rgba(240, 193, 75, 0.45);
  color: #f0c14b;
}
.hit-planned-meta {
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--muted, #a8b0bc);
  margin-top: 4px;
}
.hit-planned-meta strong {
  color: var(--accent, #c4f062);
  font-variant-numeric: tabular-nums;
}
.hit-sync-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 16px;
}
.hit-sync-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.28);
}
.hit-sync-card.is-same {
  border-color: rgba(125, 211, 160, 0.4);
}
.hit-sync-card.is-staggered {
  border-color: rgba(240, 193, 75, 0.35);
}
.hit-sync-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.hit-sync-where {
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.hit-sync-pill {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hit-sync-pill.same {
  background: rgba(125, 211, 160, 0.18);
  color: #9ee6b5;
}
.hit-sync-pill.staggered {
  background: rgba(240, 193, 75, 0.15);
  color: #f0c14b;
}
.hit-sync-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hit-sync-person {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 10px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid transparent;
}
.hit-sync-person.is-first,
.hit-sync-person.is-tied {
  border-color: rgba(240, 193, 75, 0.35);
}
.hit-sync-rank {
  font-weight: 900;
  color: #f0c14b;
  font-variant-numeric: tabular-nums;
}
.hit-sync-name {
  font-weight: 700;
}
.hit-sync-rel {
  grid-column: 3;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent, #7dd3a0);
  text-align: right;
}
.hit-sync-when {
  grid-column: 2 / -1;
  font-size: 0.72rem;
  color: var(--muted, #a8b0bc);
}
.hit-sync-team {
  color: var(--ink);
  font-weight: 600;
}
.hit-sync-tip {
  margin: 8px 0 0;
}

/* How-to: real Kingshot Deploy clock (march time) */
.march-from-game-fig {
  margin: 10px 0 14px;
  padding: 10px 12px 12px;
  border-radius: 12px;
  background: rgba(20, 28, 24, 0.55);
  border: 1px solid rgba(120, 150, 110, 0.28);
  text-align: center;
}
.team-code-import {
  margin: 12px 0 16px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(196, 240, 98, 0.28);
  background: rgba(40, 60, 30, 0.22);
}
.team-code-paste-lab {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.team-code-paste {
  width: 100%;
  min-height: 72px;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  padding: 10px 12px;
  resize: vertical;
}
.share-code-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
  font-weight: 700;
  font-size: 0.88rem;
}
.share-code-field select {
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  padding: 10px 12px;
}
body.share-code-open .shell {
  pointer-events: none;
}
body.share-code-open #shareCodeChatOverlay {
  pointer-events: auto;
}
#shareCodeChatOverlay:not([hidden]) {
  display: flex;
}
/* Must sit ABOVE immersive chat (body.chat-fs .screen.chat is z-index 10050) */
#shareCodeChatOverlay {
  z-index: 70000;
}
#chatOrderActionOverlay {
  position: fixed;
  inset: 0;
  z-index: 71000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#chatOrderActionOverlay[hidden] {
  display: none !important;
}
#chatOrderActionOverlay:not([hidden]) {
  display: flex !important;
  pointer-events: auto;
}
body.chat-order-action-open .shell,
body.chat-fs.chat-order-action-open .screen.chat {
  pointer-events: none;
}
body.chat-order-action-open #chatOrderActionOverlay {
  pointer-events: auto;
}
body.chat-fs.share-code-open .screen.chat {
  pointer-events: none;
}
body.chat-fs.share-code-open #shareCodeChatOverlay {
  pointer-events: auto;
}
.chat-active .chat-log {
  height: min(420px, 58vh);
}
.chat-toolbar-paste,
.chat-view-tabs,
.chat-orders-lab,
.chat-keyboard-hint,
.chat-status-line,
.chat-identity-banner {
  display: none !important;
}
.march-from-game-fig img {
  display: block;
  width: min(100%, 340px);
  max-width: 100%;
  height: auto;
  margin: 0 auto 8px;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.march-from-game-fig figcaption {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--muted, #b0c0a8);
  font-weight: 650;
  text-align: left;
}
.march-from-game-fig[data-path-family]:not([data-path-family="deployClock"]) img,
.march-from-game-fig img[hidden] {
  display: none;
}
/* Rally target: real in-game city click showing X:Y coords */
.rally-coords-example-fig {
  margin-top: 8px;
  max-width: 100%;
}
.rally-coords-example-fig img {
  width: min(100%, 360px);
}
.order-march-fig {
  margin-top: 6px;
}
.legal-body .faq-march-fig {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.legal-body .faq-march-fig figcaption {
  color: #4a5548;
}

.sync-boot-btn {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  min-height: 0 !important;
  line-height: 1.25 !important;
  border-color: rgba(200, 90, 70, 0.55) !important;
  color: #ffc8b8 !important;
  background: rgba(120, 40, 30, 0.35) !important;
}
.sync-boot-btn.is-urgent {
  border-color: rgba(240, 100, 80, 0.75) !important;
  color: #ffe0d4 !important;
  background: rgba(160, 45, 35, 0.5) !important;
}
.sync-boot-hint {
  margin: 4px 0 0 !important;
  color: #f0b090 !important;
  font-weight: 650 !important;
}
.sync-boot-why {
  margin: 4px 0 0 !important;
  color: #f0a090 !important;
  font-size: 0.78rem !important;
}

.leader-march-fig {
  margin: 8px 0 10px;
}
.step2-march-fig {
  max-width: 100%;
}
.step2-march-fig img {
  max-width: min(100%, 280px);
}
.leader-step-modal-card .march-from-game-fig {
  background: rgba(12, 18, 14, 0.65);
}

/* Full-screen SEND / GET READY (Mac + no-push backup) */
.android-shortcut-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 12px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #16301c;
  color: #f4ffe4;
}
.android-shortcut-bar[hidden] {
  display: none !important;
}
.android-shortcut-bar p {
  margin: 0;
  flex: 1 1 180px;
  font-size: 0.95rem;
  line-height: 1.35;
}

.pc-clock-pop {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 10070;
  width: min(360px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 12px 14px 13px;
  border: 0;
  border-radius: 14px;
  text-align: left;
  color: #f4ffe4;
  background: #16301c;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.48);
  cursor: pointer;
}
.pc-clock-pop[hidden] {
  display: none !important;
}
.pc-clock-pop.is-go {
  background: #4a1c14;
}
.pc-clock-pop.is-ready {
  background: #3a3210;
}
.pc-clock-pop-time {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.pc-clock-pop-title {
  font-weight: 700;
  font-size: 0.95rem;
}
.pc-clock-pop-body {
  font-size: 0.86rem;
  line-height: 1.3;
  opacity: 0.9;
}

.android-push-banner {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 12px;
  right: 12px;
  z-index: 10080;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  text-align: left;
  color: #f4ffe4;
  background: #16301c;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  animation: android-push-drop 0.28s ease-out both;
}
.android-push-banner[hidden] {
  display: none !important;
}
.android-push-banner-title {
  font-weight: 800;
  font-size: 1rem;
}
.android-push-banner-body {
  font-size: 0.92rem;
  line-height: 1.35;
  opacity: 0.92;
}
@keyframes android-push-drop {
  from { transform: translateY(-120%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.send-force-popup {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(4, 8, 6, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.send-force-popup[hidden] {
  display: none !important;
}
.send-force-card {
  width: min(100%, 440px);
  padding: 28px 24px 22px;
  border-radius: 22px;
  border: 3px solid var(--accent, #c4f062);
  background: linear-gradient(165deg, #1a2818 0%, #0c1410 100%);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(196, 240, 98, 0.15);
  text-align: center;
  animation: send-force-pop 0.35s cubic-bezier(0.2, 1.1, 0.4, 1) both;
}
.send-force-popup.is-send .send-force-card {
  border-color: #ff6b4a;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 80, 40, 0.25);
}
.send-force-popup.is-ready .send-force-card {
  border-color: #ffd60a;
}
@keyframes send-force-pop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.send-force-kicker {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 214, 10, 0.9);
  line-height: 1.35;
}
.send-force-title {
  margin: 0 0 8px;
  font-family: var(--font-display, inherit);
  font-size: clamp(2.2rem, 8vw, 3.2rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1.05;
}
.send-force-popup.is-send .send-force-title {
  color: #ff8a6a;
  animation: send-force-pulse 0.9s ease-in-out infinite alternate;
}
@keyframes send-force-pulse {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.25);
  }
}
.send-force-sub {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent, #c4f062);
}
.send-force-body {
  margin: 0 0 12px;
  font-size: 1rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}
.send-force-meta {
  margin: 0 0 20px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}
.send-force-dismiss {
  width: 100%;
  min-height: 56px;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
}
.mac-push-hint {
  color: #ffd60a !important;
  font-weight: 650 !important;
  border-left: 3px solid #ffd60a;
  padding-left: 10px;
}

/* —— Offline calculators —— */
.calc-panel {
  margin: 8px 0 18px;
  padding: 16px 14px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.22);
}
.calc-panel > .hint {
  font-size: 1rem;
  line-height: 1.45;
  margin: 0 0 12px;
}
.calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 10px 0 16px;
}
@media (min-width: 560px) {
  .calc-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.calc-grid label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 650;
  color: rgba(232, 242, 228, 0.92);
  padding: 14px 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 16, 12, 0.45);
}
.calc-mat-lab {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  line-height: 1.25;
}
.calc-mat-img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: contain;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.35);
}
.calc-mat-txt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.08rem;
  font-weight: 700;
}
.calc-bank-toggle {
  width: 100%;
  min-height: 52px;
  margin: 8px 0 12px;
  font-size: 1.08rem;
  font-weight: 750;
  border-radius: 14px;
}
.calc-bank-toggle.on {
  border-color: rgba(196, 240, 98, 0.7);
  background: rgba(196, 240, 98, 0.2);
  color: #c4f062;
}
.calc-bank.is-on {
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(196, 240, 98, 0.22);
}
.calc-grid input[type="number"],
.calc-grid input[type="text"],
.calc-grid select {
  min-height: 56px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.45);
  color: #e8f2e4;
  padding: 12px 14px;
  font-size: 1.2rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.calc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
}
.calc-panel .calc-actions .btn {
  min-height: 52px;
  font-size: 1.05rem;
  padding: 12px 20px;
}
.calc-result {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(196, 240, 98, 0.25);
  background: rgba(196, 240, 98, 0.08);
  font-size: 1.05rem;
  line-height: 1.45;
  color: #e8f2e4;
  white-space: pre-line;
}
.calc-result strong {
  color: #c4f062;
  font-weight: 700;
}
.calc-check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.05rem;
  margin: 6px 0 10px;
  color: rgba(232, 242, 228, 0.92);
}
.calc-grid > .calc-check,
.calc-grid > label.calc-check {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  min-height: 56px;
}
.calc-check input {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  flex: 0 0 auto;
  accent-color: #c4f062;
  -webkit-appearance: checkbox;
  appearance: auto;
  cursor: pointer;
}
.calc-subhead {
  margin: 8px 0 10px;
  font-size: 1.12rem;
  font-weight: 700;
  color: #c4f062;
}
.calc-top-list {
  margin: 8px 0 0;
  padding-left: 1.2rem;
  font-size: 1rem;
  color: rgba(232, 242, 228, 0.88);
}
.calc-group-row,
.calc-tool-row,
.calc-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
[data-screen="calc"] #calcToolPicker .event-type-chip,
[data-screen="calc"] #calcToolPicker .btn.preset {
  min-height: 48px;
  font-size: 1rem;
  padding: 10px 16px;
}
[data-screen="calc"] #calcToolPicker .calc-preset-row .btn {
  min-height: 48px;
  font-size: 0.98rem;
}
.calc-preset-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 12px;
}
.calc-preset-del {
  min-width: 2.4rem;
  min-height: 44px;
  padding: 6px 10px;
  opacity: 0.75;
}
.calc-disclaimer {
  margin: 0 0 12px !important;
  font-size: 0.9rem !important;
  opacity: 0.9;
}
.calc-result.short-ok {
  border-color: rgba(120, 220, 140, 0.45);
}
.calc-result.short-bad {
  border-color: rgba(255, 120, 100, 0.45);
  background: rgba(255, 80, 60, 0.08);
}

/* Map · coords directory */
.map-search-panel,
.map-save-panel {
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px solid rgba(120, 180, 150, 0.28);
  border-radius: 14px;
  background: rgba(20, 40, 32, 0.35);
}
.map-search-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
.map-search-label input,
.map-save-panel input,
.map-save-panel select,
.map-search-panel select {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  padding: 8px 10px;
}
.map-filter-row {
  margin-top: 10px;
  align-items: flex-end;
}
.map-search-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Easy X : Y coord entry */
.coord-field-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.coord-easy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.coord-easy-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.coord-easy-row .coord-part {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font-family: inherit;
  padding: 8px 6px;
}
.coord-easy-row .coord-part:focus {
  outline: 2px solid rgba(120, 200, 160, 0.55);
  outline-offset: 1px;
  border-color: rgba(120, 200, 160, 0.55);
}
.coord-colon {
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--muted);
  padding: 0 1px;
  user-select: none;
}

.coord-easy-tools {
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  margin-top: 2px;
}
.coord-easy-tools .coord-saved-select {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  padding: 6px 8px;
}
.coord-save-pin-btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 6px 10px;
  white-space: nowrap;
}
.coord-field-label .coord-easy {
  width: 100%;
}
.order-group-fields .coord-easy-tools .coord-saved-select {
  font-size: 0.8rem;
}

.coord-paste-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 12px;
  white-space: nowrap;
}
.coord-easy-preview {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.order-group-fields .coord-easy-row .coord-part {
  min-height: 40px;
}
@media (max-width: 420px) {
  .coord-paste-btn {
    padding: 8px 10px;
    font-size: 0.85rem;
  }
}
.map-kind-pick {
  margin-bottom: 10px;
}
.map-results-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.map-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.22);
}
.map-card-label {
  font-size: 1rem;
}
.map-card-coords {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  margin-top: 2px;
}
.map-card-meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 4px;
}
.map-card-notes {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: rgba(232, 242, 228, 0.85);
}
.map-card-actions {
  margin-top: 10px;
  flex-wrap: wrap;
}
.dock-map .dock-ico {
  color: #8fd4b0;
}


/* No how-to fluff above Chat rooms */
.screen.chat > .howto-card,
.screen.chat > .howto-card-mini {
  display: none !important;
}

/* One-time "what you paid for Chat" popup */
.chat-paid-popup {
  position: fixed;
  inset: 0;
  z-index: 60000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(4, 8, 6, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.chat-paid-popup[hidden] {
  display: none !important;
}
.chat-paid-popup-card {
  width: min(400px, 100%);
  max-height: min(88dvh, 640px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  border: 1px solid rgba(196, 240, 98, 0.28);
  background: linear-gradient(165deg, #1a2820 0%, #101814 100%);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
  padding: 18px 18px 16px;
}
.chat-paid-popup-card h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #e8ffb0;
}
.chat-paid-popup-sub {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: var(--muted);
}
.chat-paid-popup-list {
  margin: 0 0 16px;
  padding: 0 0 0 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink);
}
.chat-paid-popup-card .pg-btn {
  width: 100%;
  min-height: 48px;
}

/* —— Chat room chrome + immersive full screen —— */
.chat-toolbar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
  margin: 0 0 8px;
}
.chat-fs-btn,
.chat-toolbar-title,
.chat-toolbar-title .chat-badge {
  display: none !important;
}
.chat-tool-btn {
  flex: 0 0 auto;
  min-height: var(--touch);
  padding: 8px 12px;
  font-weight: 700;
  margin-top: 14px; /* align with paste input under label */
}
/* Paste orders — left side (after Back); lang EN on the right */
.chat-toolbar-paste.chat-code-paste,
.chat-code-paste {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  order: 0;
}
.chat-lang {
  flex: 0 0 auto;
  position: relative;
  margin-top: 14px;
  z-index: 40;
}
.chat-lang .header-lang-btn {
  min-height: 40px;
}
.chat-lang-pop.header-lang-pop,
.chat-lang .header-lang-pop {
  right: 0;
  left: auto;
  min-width: min(280px, 78vw);
  max-height: min(55vh, 360px);
  overflow: auto;
  z-index: 60;
}
body.chat-fs .chat-lang {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body.chat-fs .chat-lang-pop:not([hidden]) {
  display: flex !important;
}
.chat-code-paste-lab {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-code-paste-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.chat-code-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
}
.chat-code-input::placeholder {
  color: var(--muted);
  opacity: 0.9;
}
.chat-code-btn {
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
}
.chat-code-btn.primary {
  background: rgba(196, 240, 98, 0.18);
  border-color: rgba(196, 240, 98, 0.4);
  color: #e8ffb0;
  font-weight: 800;
}
.chat-code-btn:hover {
  filter: brightness(1.08);
}
body.chat-fs .chat-code-paste {
  flex: 1 1 180px;
}
body.chat-fs .chat-code-input {
  min-height: 42px;
}
.chat-room-bar {
  flex: 0 0 auto;
  margin: 0 0 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
}
@media (max-width: 520px) {
  .chat-room-bar {
    grid-template-columns: 1fr;
  }
}
.chat-room-lab,
.chat-orders-lab {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--muted);
  width: 100%;
  min-width: 0;
}
.chat-room-lab select,
.chat-room-select,
.chat-orders-lab select,
.chat-orders-select {
  width: 100%;
  max-width: none;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
}
.chat-status-line {
  display: none !important;
  margin: 0;
  font-size: 0.8rem;
  min-height: 0;
}
.chat-status-line:empty {
  display: none !important;
}
.chat-active {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

/* ===== Immersive chat room (full viewport — iPhone, iPad, Mac) ===== */
html.chat-fs,
body.chat-fs {
  overflow: hidden !important;
  overscroll-behavior: none;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  height: 100dvh !important;
  min-height: 100% !important;
  min-height: 100dvh !important;
}
body.chat-fs {
  padding: 0 !important;
  margin: 0 !important;
}
body.chat-fs .shell,
body.chat-fs #app {
  position: relative !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  min-height: var(--chat-vh, 100dvh) !important;
  height: var(--chat-vh, 100dvh) !important;
  overflow: hidden !important;
}
body.chat-fs .menu-bar,
body.chat-fs .menu-step,
body.chat-fs header.top,
body.chat-fs .profile-strip,
body.chat-fs .app-menu-dock,
body.chat-fs .dock-more-sheet,
body.chat-fs .app-menu,
body.chat-fs .header-tools,
body.chat-fs .header-code-paste,
body.chat-fs .howto-card,
body.chat-fs .howto-card-mini,
body.chat-fs .workspace > .primary-col,
body.chat-fs .screen:not(.chat) {
  display: none !important;
}
/* Leftover chat-fs must never cover Timer / Orders / Rally with the paywall */
html:not([data-screen="chat"]) .screen.chat,
body:not([data-screen="chat"]) .screen.chat {
  display: none !important;
  position: static !important;
  inset: auto !important;
  z-index: 0 !important;
}
html:not([data-screen="chat"]).chat-fs .screen.is-active:not(.chat):not([hidden]),
body:not([data-screen="chat"]).chat-fs .screen.is-active:not(.chat):not([hidden]) {
  display: block !important;
}
html:not([data-screen="chat"]).chat-fs .menu-bar,
html:not([data-screen="chat"]).chat-fs .menu-step,
html:not([data-screen="chat"]).chat-fs header.top,
html:not([data-screen="chat"]).chat-fs .profile-strip,
html:not([data-screen="chat"]).chat-fs .app-menu-dock,
html:not([data-screen="chat"]).chat-fs .app-menu,
html:not([data-screen="chat"]).chat-fs .header-tools,
html:not([data-screen="chat"]).chat-fs .workspace > .primary-col,
body:not([data-screen="chat"]).chat-fs .menu-bar,
body:not([data-screen="chat"]).chat-fs .menu-step,
body:not([data-screen="chat"]).chat-fs header.top,
body:not([data-screen="chat"]).chat-fs .profile-strip,
body:not([data-screen="chat"]).chat-fs .app-menu-dock,
body:not([data-screen="chat"]).chat-fs .app-menu,
body:not([data-screen="chat"]).chat-fs .header-tools,
body:not([data-screen="chat"]).chat-fs .workspace > .primary-col {
  display: revert !important;
}
/* Fixed full viewport so iPad/Mac layout media queries cannot cap height/width */
body.chat-fs .screen.chat,
body.chat-fs .screen.chat.is-active,
body.chat-fs .screen.chat.chat-fs-active {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 10050 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--chat-vh, 100dvh) !important;
  min-height: var(--chat-vh, 100dvh) !important;
  max-height: none !important;
  margin: 0 !important;
  padding:
    max(8px, env(safe-area-inset-top, 0px))
    max(12px, env(safe-area-inset-right, 0px))
    max(8px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px)) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--bg0, #0a0f0d) !important;
  overflow: hidden !important;
}
html:not([data-screen="chat"]).chat-fs .screen.chat,
html:not([data-screen="chat"]).chat-fs .screen.chat.is-active,
html:not([data-screen="chat"]).chat-fs .screen.chat.chat-fs-active,
body:not([data-screen="chat"]).chat-fs .screen.chat,
body:not([data-screen="chat"]).chat-fs .screen.chat.is-active,
body:not([data-screen="chat"]).chat-fs .screen.chat.chat-fs-active {
  display: none !important;
  position: static !important;
  inset: auto !important;
  z-index: 0 !important;
}
body.chat-fs .pg-paywall {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
body.chat-fs .screen.chat.panel,
body.chat-fs .chat.panel {
  min-height: 0 !important;
  max-height: none !important;
  height: var(--chat-vh, 100dvh) !important;
}
body.chat-fs .workspace,
body.chat-fs .chat-col,
body.chat-fs .workspace.chat-open .chat-col {
  display: block !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  position: static !important;
  top: auto !important;
  grid-template-columns: 1fr !important;
}
body.chat-fs .chat-active:not([hidden]) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: transparent !important;
}
body.chat-fs .chat-chrome-extra {
  display: none !important;
}
body.chat-fs .chat-toolbar {
  flex: 0 0 auto;
  margin-bottom: 6px;
}
body.chat-fs .chat-room-bar {
  flex: 0 0 auto;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(196, 240, 98, 0.22);
  background: rgba(196, 240, 98, 0.08);
}
body.chat-fs .chat-room-lab {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
body.chat-fs .chat-room-select {
  min-height: 46px;
  font-size: 1.02rem;
  border-color: rgba(196, 240, 98, 0.35);
  background: rgba(0, 0, 0, 0.45);
}
body.chat-fs .chat-active .chat-log,
body.chat-fs #chatLog,
body.chat-fs .chat-log {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 12px;
  overflow: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: rgba(0, 0, 0, 0.22);
}
body.chat-fs .chat-form {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 6px 0 max(6px, env(safe-area-inset-bottom, 0px)) !important;
}
body.chat-fs .chat-emoji-panel {
  flex: 0 0 auto;
}
body.chat-fs #chatStatus,
body.chat-fs .chat-status-line,
body.chat-fs .chat-keyboard-hint,
body.chat-fs .chat-order-messages-panel[hidden],
body.chat-fs #chatVkb[hidden] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
body.chat-fs .chat-fs-btn {
  display: none !important;
}
/* iPad + Mac media queries that cap chat height/width must not win while immersive */
@media (min-width: 701px) {
  body.chat-fs .shell,
  body.chat-fs #app {
    max-width: none !important;
    width: 100% !important;
  }
  body.chat-fs .screen.chat,
  body.chat-fs .chat.panel {
    max-height: none !important;
    min-height: var(--chat-vh, 100dvh) !important;
    height: var(--chat-vh, 100dvh) !important;
  }
  body.chat-fs .chat-log,
  body.chat-fs .chat-active .chat-log,
  body.chat-fs #chatLog {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 auto !important;
  }
}

/* Order cancel / leave */
.btn.danger-outline {
  border: 1px solid rgba(232, 93, 93, 0.55);
  color: #f0a0a0;
  background: rgba(232, 93, 93, 0.1);
  font-weight: 700;
}
.btn.danger-outline:hover,
.btn.danger-outline:focus-visible {
  background: rgba(232, 93, 93, 0.22);
  border-color: rgba(232, 93, 93, 0.8);
  color: #fff;
}
.alliance-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 8px;
}
.alliance-card-actions .btn {
  min-height: 40px;
}

/* —— Fit-to-screen: long tables / codes scroll inside, page does not —— */
.table-wrap,
.sync-board,
.alliance-board,
.order-groups-board,
.live-board,
.completed-log,
.chat-log {
  max-width: 100%;
  min-width: 0;
}
table {
  max-width: 100%;
}
pre,
code,
.team-code-paste,
.share-code-preview,
#shareCodePreview {
  max-width: 100%;
  overflow-x: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}
/* Dock is allowed to scroll horizontally *inside itself* only */
.app-menu-dock {
  max-width: 100%;
}
/* Prevent fixed full-bleed overlays from adding document width */
.overlay,
.setup-overlay,
#mailOrderOverlay,
#orderMarchOverlay,
#shareCodeChatOverlay,
#langPickOverlay,
.leader-step-modal,
.pg-paywall {
  max-width: 100vw;
  box-sizing: border-box;
}

/* Orders mode · rally codes */
.orders-team-mode { margin: 12px 0 16px; }
.orders-mode-row { flex-wrap: wrap; gap: 8px; }
.orders-code-panel { margin-top: 10px; }
.orders-code-out {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  color: inherit;
}

/* Deployment ready board */

/* Host generate orders on Deploy + Out */
.host-orders-gen {
  margin: 12px 0 14px;
  padding: 12px 12px 10px;
  border-radius: 12px;
  border: 1px solid rgba(140, 180, 90, 0.35);
  background: rgba(40, 70, 30, 0.22);
}
.host-orders-gen.is-need-times {
  border-color: rgba(200, 160, 80, 0.4);
  background: rgba(80, 60, 20, 0.2);
}
.host-orders-gen .host-gen-need {
  color: #f0d090;
  margin: 0 0 8px;
}
.host-orders-gen .host-gen-actions {
  flex-wrap: wrap;
  gap: 8px;
}
.host-orders-gen .orders-code-list {
  margin-top: 10px;
}
.host-orders-gen .orders-code-out {
  margin-top: 8px;
  width: 100%;
}
.host-orders-gen button.is-disabled,
.host-orders-gen button:disabled {
  opacity: 0.55;
}

.deploy-board { margin-top: 8px; }
.deploy-head { margin-bottom: 10px; }
.deploy-target { font-weight: 600; margin: 6px 0; }
.deploy-stats { opacity: 0.9; margin: 8px 0; }
.deploy-list { list-style: none; padding: 0; margin: 0 0 14px; }
.deploy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.deploy-row.is-ready { border-left: 3px solid #3dba7a; }
.deploy-row.is-missing { border-left: 3px solid #e07070; }
.deploy-name { font-weight: 600; min-width: 5rem; }
.deploy-meta { flex: 1 1 8rem; opacity: 0.85; font-size: 0.9em; }
.deploy-mark { width: 1.2rem; text-align: center; }

.lineup-board { margin-top: 8px; }
.lineup-leader-line {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 900;
  color: #ffe29a;
}
.lineup-leader-badge {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 210, 100, 0.22);
  color: #ffe29a;
  border: 1px solid rgba(255, 210, 100, 0.45);
}
.lineup-name.is-leader {
  box-shadow: inset 3px 0 0 #e6c35c;
}
.lineup-wave-meta {
  margin: 0 0 10px;
  font-size: 0.85rem;
}
.lineup-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.lineup-names {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.lineup-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.lineup-order-wrap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 42%;
  min-width: 0;
}
.lineup-order {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 900;
  opacity: 0.85;
  min-width: 1.6rem;
}
.lineup-team {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 800;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #c9e6ff;
}
.lineup-team.is-wait {
  max-width: 36%;
  color: #ffc9c9;
}
.lineup-path {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.lineup-cd {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #c8ffe0;
  min-width: 3.2rem;
  text-align: right;
}
.lineup-cd.is-static {
  color: #b8dcc8;
  opacity: 0.92;
}
.lineup-cd.is-live {
  color: #9dffc0;
}
.order-land-locked {
  margin-top: 4px;
}
.order-land-locked .order-land-auto {
  display: block;
  margin-top: 2px;
  font-weight: 500;
}
.shared-rally-rule-banner {
  margin: 6px 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  border-left: 3px solid rgba(120, 200, 140, 0.75);
  font-weight: 700;
}
.shared-rally-rule-banner.is-host {
  border-left-color: #4fd68a;
  color: #c8ffe0;
}
.shared-rally-rule-banner.is-follow {
  border-left-color: #7eb6ff;
  color: #c9e6ff;
}
.in-game-rally-pick {
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 196, 72, 0.14);
  border: 1px solid rgba(255, 196, 72, 0.55);
}
.in-game-rally-pick[hidden] {
  display: none;
}
.in-game-rally-pick-kicker {
  margin: 0;
  font-weight: 800;
  font-size: 0.95rem;
  color: #ffe7a8;
}
.in-game-rally-pick-value {
  margin: 4px 0 2px;
  font-size: 1.85rem;
  line-height: 1.1;
  color: #fff6c8;
  letter-spacing: 0.02em;
}
.in-game-rally-pick-hint {
  margin: 4px 0 0;
  font-weight: 650;
}
body.follow-host-rally #landAt,
body.follow-host-rally #sendAt {
  opacity: 0.85;
}
.my-times-card {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.my-times-team,
.my-times-land {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.my-times-team-lab {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}
.my-times-preview {
  margin: 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #9dffc0;
}
.my-times-actions {
  flex-wrap: wrap;
  gap: 8px;
}
.my-times-march-fig {
  margin: 0;
  max-width: 100%;
}
.my-times-march-fig img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 10px;
  margin: 0 auto;
}
.my-times-march-fig figcaption {
  margin-top: 6px;
  font-size: 0.82rem;
  opacity: 0.85;
  text-align: center;
}
.my-times-delay-lab.my-times-rally-lab input[readonly] {
  opacity: 0.95;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: default;
  color: inherit;
  background: rgba(0, 0, 0, 0.25);
}
.my-times-march {
  margin-top: 0;
}
.lineup-mark {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
}
.lineup-name-text {
  flex: 1 1 auto;
  min-width: 0;
}
.lineup-status {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.95;
}
.lineup-name.is-ready {
  color: #9dffc0;
  background: rgba(45, 120, 78, 0.22);
  box-shadow: inset 3px 0 0 #3dba7a;
}
.lineup-name.is-ready .lineup-mark {
  color: #102010;
  background: #4fd68a;
  box-shadow: 0 0 0 2px rgba(79, 214, 138, 0.35);
}
.lineup-name.is-ready .lineup-status {
  color: #8dffb8;
}
.lineup-name.is-waiting {
  color: #ff9a9a;
  background: rgba(140, 40, 40, 0.22);
  box-shadow: inset 3px 0 0 #e07070;
}
.lineup-name.is-waiting .lineup-mark {
  color: #2a1010;
  background: #ef6b6b;
  box-shadow: 0 0 0 2px rgba(239, 107, 107, 0.35);
}
.lineup-name.is-waiting .lineup-status {
  color: #ffb0b0;
}
.lineup-name.is-empty {
  font-weight: 600;
  opacity: 0.7;
  box-shadow: none;
}
@media (max-width: 560px) {
  .lineup-split {
    grid-template-columns: 1fr;
  }
}

.alliance-tab-actions {
  margin: 8px 0 12px;
}
.alliance-member-board {
  margin-top: 4px;
}
.alliance-member-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.alliance-member-row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "check info"
    "check sends";
  gap: 6px 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(180, 210, 170, 0.2);
  background: rgba(0, 0, 0, 0.28);
  color: var(--ink);
  font: inherit;
  cursor: default;
}
.alliance-member-row.is-just-joined {
  border-color: rgba(90, 210, 130, 0.7);
  box-shadow: 0 0 0 1px rgba(70, 190, 110, 0.35);
  background: rgba(30, 70, 42, 0.42);
}
.alliance-just-joined-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #2e8b57;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.alliance-you-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(180, 210, 170, 0.22);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: middle;
}
.alliance-member-check-lab {
  grid-area: check;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}
.alliance-member-check-lab input.alliance-member-check {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0.01;
  cursor: pointer;
  z-index: 1;
}
.alliance-member-check-lab .mail-order-check-ui {
  z-index: 0;
  margin-top: 0;
}
.alliance-member-check-lab:has(input:checked) .mail-order-check-ui {
  background: #c4f062;
  border-color: #9ed84a;
}
.alliance-member-check-lab:has(input:checked) .mail-order-check-ui::after {
  content: "✓";
  color: #12200c;
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1;
}
.alliance-member-check-lab input:disabled + .mail-order-check-ui {
  opacity: 0.4;
}
.alliance-member-info {
  grid-area: info;
  min-width: 0;
}
.alliance-member-sends {
  grid-area: sends;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.alliance-member-sends .alliance-send-btn {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 800;
}
.alliance-member-row:has(.alliance-member-check:checked) {
  border-color: rgba(196, 240, 98, 0.55);
  background: rgba(90, 143, 42, 0.16);
}
.alliance-member-row.is-left {
  opacity: 0.75;
}
.alliance-member-name {
  display: block;
  font-weight: 800;
  font-size: 1.05rem;
}
.alliance-member-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
}
.whale-hit-panel {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.whale-rally-panel {
  margin: 12px 0 16px;
}
.whale-rally-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}
.whale-rally-card {
  padding: 12px;
}
.whale-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.whale-rally-card .order-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.whale-roster-count {
  margin: 0 0 10px;
}
.whale-alliance-group {
  margin-bottom: 14px;
}
.whale-alliance-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 0.92rem;
  font-weight: 800;
  color: #f0d48a;
}
.whale-alliance-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(212, 175, 55, 0.2);
  color: #ffe9b8;
}
.whale-member-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.whale-member-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  background: rgba(28, 16, 10, 0.72);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.whale-member-row:hover,
.whale-member-row:focus-visible {
  border-color: rgba(212, 175, 55, 0.55);
  background: rgba(70, 42, 16, 0.5);
}
.whale-member-name {
  grid-column: 1;
  font-weight: 800;
  font-size: 1.05rem;
  color: #f3e6c8;
}
.whale-member-meta {
  grid-column: 1;
  font-size: 0.78rem;
  color: rgba(240, 212, 138, 0.75);
}
.whale-member-via {
  display: none;
}
.whale-member-ali {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 220, 140, 0.95);
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whale-member-cta {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1.15rem;
  color: rgba(255, 220, 140, 0.9);
}
.whale-mail-order {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
}
.cancel-tab-actions {
  margin: 8px 0 12px;
}
.cancel-order-board {
  margin-top: 4px;
}
.cancel-roster-count {
  margin: 0 0 10px;
}
.cancel-order-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cancel-order-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(212, 100, 80, 0.28);
  background: rgba(40, 12, 10, 0.55);
  cursor: pointer;
  position: relative;
}
.cancel-order-row:has(input:checked) {
  border-color: rgba(255, 120, 90, 0.7);
  background: rgba(90, 28, 20, 0.55);
}
.cancel-order-row input.cancel-order-check {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.cancel-order-mark {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px dashed rgba(255, 160, 120, 0.45);
  color: rgba(255, 200, 180, 0.55);
  font-size: 1.05rem;
  line-height: 1;
}
.cancel-order-mark::before {
  content: "☐";
}
.cancel-order-row:has(input:checked) .cancel-order-mark {
  border-style: solid;
  border-color: rgba(255, 140, 100, 0.9);
  background: rgba(120, 40, 28, 0.7);
  color: #ffd8c8;
}
.cancel-order-row:has(input:checked) .cancel-order-mark::before {
  content: "☑";
}
.cancel-order-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cancel-order-name {
  font-weight: 800;
  font-size: 1.05rem;
  color: #ffe6d8;
}
.cancel-order-title {
  font-size: 0.85rem;
  font-weight: 650;
  color: rgba(255, 220, 200, 0.9);
}
.cancel-order-meta {
  font-size: 0.72rem;
  color: rgba(255, 200, 180, 0.7);
}
.cancel-tab-run .btn {
  min-height: 44px;
}
.alliance-order-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.alliance-order-actions .btn {
  width: 100%;
  min-height: 48px;
  white-space: normal;
  line-height: 1.3;
}
.raid-friends-list { margin: 8px 0 12px; }
.raid-friend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.raid-friend-name { flex: 1 1 10rem; }
.msg-add-friend {
  font-size: 11px;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: inherit;
  cursor: pointer;
}
.msg-chat-restrict {
  font-size: 11px;
  padding: 2px 8px;
  margin-left: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: inherit;
  cursor: pointer;
}
.msg-chat-restrict.is-on {
  border-color: rgba(220, 80, 80, 0.45);
  background: rgba(220, 80, 80, 0.12);
}
.chat-restrict-list { margin: 4px 0 12px; }
.chat-restrict-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.chat-restrict-name { flex: 1 1 10rem; }
.troop-subheading {
  margin: 10px 0 4px;
  font-size: 0.92rem;
  font-weight: 650;
  opacity: 0.9;
}
.msg-meta { flex-wrap: wrap; }

/* Joiner role: hard-hide multi-sender / host chrome (beats JS unhiding) */
body.role-joiner .sender-only {
  display: none !important;
}
body.role-joiner .joiner-only[hidden] {
  display: none !important;
}
/* Unhide joiner chrome without forcing block (keeps flex/inline layout) */
body.role-joiner .joiner-only:not([hidden]) {
  display: revert;
  display: revert-layer;
}
body.role-joiner-pure #pathCollectBanner,
body.role-joiner-pure #multiSenderSyncBoard,
body.role-joiner-pure #syncPathWaitLabel,
body.role-joiner-pure #ordersCodePanel,
body.role-joiner-pure #hostHitSendBox {
  display: none !important;
}
body.role-joiner [data-go="deploy"] {
  display: none !important;
}


/* —— Timer slim: hide secondary chrome (IDs kept for JS) —— */
/* Keep #leaderMarchGuideFig visible next to distance controls */
#timerPanel .timer-slim-hide,
#timerPanel #joinerFlowSteps,
#timerPanel #timerSenderTabs,
#timerPanel #timerEventsOps,
#timerPanel #cityTabHintTimer,
#timerPanel #raidFriendsList,
#timerPanel #orderInviteList,
#timerPanel #completedLog,
#timerPanel #btnClearCompleted {
  display: none !important;
}

/* Distance H/M/S + Deploy-clock image side by side */

.timer-bundle-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 8px 0 4px;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--muted);
}
.timer-bundle-check.is-ok {
  color: var(--accent, #c4f062);
}
.timer-bundle-check.is-saved {
  font-weight: 800;
}
#btnUpdateTime.is-ready-save {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #c4f062) 55%, transparent);
}
.path-presets .btn.preset.on {
  border-color: color-mix(in srgb, var(--accent, #c4f062) 70%, transparent);
  background: color-mix(in srgb, var(--accent, #c4f062) 18%, transparent);
}
#landInBlock .btn.preset.on {
  border-color: #e8ff8a;
  background: #b6f04a;
  color: #0d1804;
  font-weight: 800;
  box-shadow:
    0 0 0 2px rgba(214, 255, 106, 0.95),
    0 0 16px rgba(180, 240, 70, 0.7);
}
#landInBlock .btn.preset.on:active {
  background: #c8ff62;
  color: #0d1804;
}

.march-path-with-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 16px;
  margin: 6px 0 4px;
}
.march-path-controls {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.march-path-guide-side {
  flex: 0 1 12rem;
  max-width: min(100%, 220px);
  margin: 0 !important;
  padding: 8px !important;
}
.march-path-guide-side img {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto 6px;
  border-radius: 8px;
  display: block;
}
.march-path-guide-side figcaption {
  font-size: 0.72rem;
  line-height: 1.3;
  margin: 0;
  text-align: left;
}
@media (max-width: 520px) {
  .march-path-with-guide {
    flex-direction: column;
  }
  .march-path-guide-side {
    max-width: 100%;
    order: -1; /* image above fields on narrow phones */
  }
  .march-path-guide-side img {
    max-width: min(100%, 280px);
  }
}


/* Compact order codes · labeled by team */
.orders-code-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 10px;
}
.orders-code-card {
  border: 1px solid color-mix(in srgb, var(--line, #3a4454) 80%, transparent);
  border-radius: 10px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--panel, #1a2230) 88%, #000);
}
.orders-code-card-head {
  margin-bottom: 6px;
}
.orders-code-card-team {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.orders-code-row {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 6px;
  align-items: start;
  margin-top: 4px;
}
.orders-code-role {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 5px;
  border-radius: 5px;
  text-align: center;
  line-height: 1.2;
  margin-top: 2px;
}
.orders-code-role.is-send {
  background: color-mix(in srgb, #2f9e6b 35%, transparent);
  color: #b8f0d0;
}
.orders-code-role.is-join {
  background: color-mix(in srgb, #3b82f6 35%, transparent);
  color: #c7dbff;
}
.orders-code-token {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  line-height: 1.35;
  word-break: break-all;
  white-space: pre-wrap;
  padding: 4px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, #000 35%, transparent);
  color: var(--text, #e8eef7);
}
.orders-code-out {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.35;
  min-height: 4.5rem;
  max-height: 10rem;
  resize: vertical;
  word-break: break-all;
}


/* Header order-code paste · left · grows to fill blank · EN stays right with gap */
.header-tools {
  position: relative;
  flex: 0 0 auto;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  z-index: 210;
  min-width: calc(var(--header-lang-slot, 60px) + 54px);
  margin-inline-start: auto;
}
#btnHeaderChat {
  display: none !important;
}
.header-chat-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 0 0 auto;
  min-width: 48px;
  padding: 4px 6px;
  border: 1px solid rgba(196, 240, 98, 0.28);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(28, 42, 34, 0.96), rgba(14, 22, 18, 0.96));
  color: var(--accent, #c4f062);
  cursor: pointer;
  touch-action: manipulation;
  font-family: var(--font-display);
  line-height: 1;
}
.header-chat-btn.is-muted .bg-music-on,
.brand-music-btn.is-muted .bg-music-on {
  display: none;
}
.header-chat-btn:not(.is-muted) .bg-music-off,
.brand-music-btn:not(.is-muted) .bg-music-off {
  display: none;
}
.brand-music-btn {
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(196, 240, 98, 0.35);
  background: rgba(14, 22, 18, 0.9);
  color: var(--accent, #c4f062);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.brand-music-btn.is-muted {
  color: #c9d4c4;
  border-color: rgba(201, 212, 196, 0.35);
}
.header-music-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  z-index: 220;
  pointer-events: auto !important;
}
.header-music-tracks-btn {
  min-height: 36px;
  padding: 4px 6px;
  min-width: 48px;
  pointer-events: auto !important;
  z-index: 221;
}
.header-music-tracks-btn .header-chat-lab {
  display: none;
}
.bg-music-pop[hidden] {
  display: none !important;
}
body.music-menu-open .bg-music-pop:not([hidden]) {
  display: flex !important;
}
.bg-music-pop-title {
  margin: 4px 8px 8px;
}
.bg-music-track.on {
  border-color: rgba(196, 240, 98, 0.45);
}
.bg-music-check {
  min-width: 1.2em;
  font-weight: 800;
  color: #c4f062;
}
.bg-music-loop-lab {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 6px 4px;
  font-size: 0.85rem;
}
.bg-music-pop-actions {
  margin: 8px 4px 4px;
}
.header-chat-btn:hover,
.header-chat-btn.on {
  border-color: rgba(196, 240, 98, 0.55);
  background: rgba(196, 240, 98, 0.16);
  color: #e8ffb0;
}
.header-chat-ico {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
}
.header-chat-ico svg {
  display: block;
  width: 18px;
  height: 18px;
}
.header-chat-lab {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
  color: inherit;
  user-select: none;
}
.header-chat-btn.chat-locked {
  opacity: 0.72;
}
.header-chat-btn.chat-locked::after {
  content: "🔒";
  position: absolute;
  font-size: 0.55rem;
  margin-top: -28px;
  margin-left: 18px;
  pointer-events: none;
}
body.chat-fs .header-chat-btn {
  display: none;
}
.dock-item .dock-ico.chat-ico,
.menu-item .menu-ico.chat-ico {
  font-size: 0.92rem;
}
.header-code-paste {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  /* Desk: wider field; mobile media grows it to fill before EN */
  flex: 0 1 360px;
  min-width: min(180px, 40vw);
  width: min(360px, 42vw);
  max-width: 420px;
  padding: 5px 8px 6px;
  border-radius: 14px;
  border: 1px solid rgba(196, 240, 98, 0.28);
  background: linear-gradient(160deg, rgba(28, 42, 34, 0.96), rgba(14, 22, 18, 0.96));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  z-index: 200;
  overflow: hidden;
}
.header-code-lab {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--accent, #c4f062);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  pointer-events: none;
  user-select: none;
}
.header-code-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.header-code-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink, #e8eef7);
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 2px 2px 1px;
}
.header-code-input::placeholder {
  color: color-mix(in srgb, var(--ink, #e8eef7) 45%, transparent);
}
.header-code-btn {
  flex: 0 0 auto;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink, #e8eef7);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  touch-action: manipulation;
}
.header-code-btn.primary {
  border-color: rgba(196, 240, 98, 0.45);
  background: rgba(196, 240, 98, 0.16);
  color: var(--accent, #c4f062);
  font-weight: 700;
}
.header-code-btn:hover {
  border-color: rgba(196, 240, 98, 0.55);
}
@media (max-width: 720px) {
  .menu-bar {
    gap: 10px;
    --header-code-en-gap: 10px;
  }
  .header-code-paste {
    width: auto;
    max-width: none;
    padding: 4px 6px 5px;
  }
  .header-code-lab {
    font-size: 0.58rem;
  }
  .header-code-input {
    font-size: 0.66rem;
  }
  .header-code-btn {
    min-width: 28px;
    height: 28px;
    font-size: 0.78rem;
  }
}

/* Per-code copy on order cards */
.orders-code-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: start;
  min-width: 0;
}
.orders-code-row {
  grid-template-columns: 3.4rem 1fr;
}
.orders-code-copy-btn {
  white-space: nowrap;
  font-size: 0.72rem !important;
  padding: 4px 8px !important;
  min-height: 28px;
}


/* Full labels: Rally sender code / Rally joiner code only */
.orders-code-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--line, #3a4454) 55%, transparent);
}
.orders-code-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.orders-code-label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.orders-code-role {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1.25;
  text-align: left;
  max-width: 100%;
}
.orders-code-team-tag {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.9;
}


/* Copied order code · only a green ✓ (not the whole row) */
.orders-code-token {
  cursor: pointer;
}
.orders-code-body {
  align-items: center;
}
.orders-code-copy-btn.is-copied {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.orders-code-copy-lab {
  font: inherit;
  color: inherit;
}
.orders-code-copy-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 1.05rem;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
  color: #4ade80 !important;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.45);
  animation: orders-code-check-in 0.18s ease-out;
}
@keyframes orders-code-check-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* Deploy wait · delayed UTC notice */
.deploy-delay-note {
  margin: 8px 0 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent);
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  color: var(--ink, #e8eef7);
  font-size: 0.88rem;
  line-height: 1.35;
  font-weight: 600;
}
.deploy-delay-note.is-wait {
  border-color: color-mix(in srgb, #ef4444 50%, transparent);
  background: color-mix(in srgb, #ef4444 12%, transparent);
}
.deploy-delay-note.is-live {
  border-color: color-mix(in srgb, #22c55e 50%, transparent);
  background: color-mix(in srgb, #22c55e 12%, transparent);
}
.order-hit-send-box.is-hold,
.host-hit-send-box.is-hold {
  border-color: color-mix(in srgb, #f59e0b 55%, transparent) !important;
  background: color-mix(in srgb, #f59e0b 12%, transparent) !important;
}
.deploy-release-btn {
  min-height: 32px;
  touch-action: manipulation;
}


/* Solo team hits gap chips under orders mode */
.solo-team-hit-gap-bar {
  margin: 8px 0 4px;
}
.orders-mode-row {
  flex-wrap: wrap;
  gap: 6px;
}
.orders-mode-row .role-chip {
  flex: 1 1 30%;
  min-height: 48px;
  font-weight: 800;
}


/* Share order codes to chat · sticky Sent */
.orders-code-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.orders-code-share-btn.is-sent {
  background: #16a34a !important;
  border-color: #4ade80 !important;
  color: #ecfdf5 !important;
  font-weight: 800 !important;
}
.orders-code-share-btn.is-sending {
  opacity: 0.75;
  pointer-events: none;
}


/* Solo team hits · single code label */
.orders-code-role.is-solo-hits {
  color: var(--accent, #c4f062);
  font-weight: 800;
}
.orders-code-row.is-solo-hits {
  border-left: 3px solid color-mix(in srgb, #c4f062 70%, transparent);
  padding-left: 8px;
}


/* Chat · copy order code only (all rooms) */
.msg-code-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(196, 240, 98, 0.28);
  background: rgba(14, 22, 18, 0.55);
}
.msg-code-token {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  word-break: break-all;
  color: var(--accent, #c4f062);
  cursor: pointer;
  user-select: all;
}
.msg-code-copy {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 700;
}
.msg-code-wrap.is-copied,
.msg-code-token.is-copied {
  border-color: color-mix(in srgb, #4ade80 55%, transparent);
  background: color-mix(in srgb, #22c55e 14%, transparent);
}
.msg-code-copy.is-copied {
  background: #16a34a !important;
  border-color: #4ade80 !important;
  color: #ecfdf5 !important;
}


/* Host cancel on Timer while waiting for teammates */
.host-cancel-order-bar {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.host-cancel-order-bar.is-compact {
  margin-top: 6px;
}
.host-cancel-order-bar .host-cancel-order-hint {
  margin: 0;
  flex: 1 1 12rem;
  font-size: 0.78rem;
  line-height: 1.3;
}
.host-cancel-order-btn {
  flex: 0 0 auto;
  min-height: 44px;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.timer-host-cancel-mount {
  margin: 10px 0 4px;
  position: relative;
  z-index: 8;
  pointer-events: auto;
}
.timer-host-cancel-mount[hidden] {
  display: none !important;
}

/* Land-together / who is deploying · march next to name */
.land-together-panel .lt-row {
  grid-template-columns: 1.1rem minmax(0, 1fr) auto;
}
.land-together-panel .lt-who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.land-together-panel .lt-name {
  font-weight: 800;
  color: #eef6d8;
}
.land-together-panel .lt-path {
  grid-column: auto !important;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  font-size: 0.8rem;
  opacity: 1;
  color: #c4f062;
}
.land-together-panel .lt-path.is-missing,
.land-together-panel .lt-path.is-missing .lt-path-v {
  color: #ffb070;
}
.land-together-panel .lt-path-k {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 750;
  opacity: 0.85;
  color: #b8c9a0;
}
.land-together-panel .lt-path-v {
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  color: #e8ff9a;
}
.land-together-panel .lt-path-sec {
  font-size: 0.72rem;
  opacity: 0.8;
  color: #a8c080;
}
.land-together-panel .lt-send {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}
.land-together-panel .lt-path-legend {
  margin: 0 0 6px;
  font-size: 0.74rem;
}

/* Path-collect waiting roster · march next to name */
.path-collect-preview-row {
  align-items: flex-start;
}
.path-collect-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.path-collect-name {
  font-weight: 800;
}
.path-collect-march {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  font-size: 0.8rem;
  color: #c4f062;
}
.path-collect-march.is-missing {
  color: #ffb070;
}
.path-collect-march-k {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 750;
  opacity: 0.85;
  color: #b8c9a0;
}
.path-collect-march strong {
  font-variant-numeric: tabular-nums;
  color: #e8ff9a;
}
.path-collect-march-sec {
  font-size: 0.72rem;
  opacity: 0.8;
}

/* Deploy ready board · march column */
.deploy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.deploy-path {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  font-size: 0.82rem;
  color: #c4f062;
  min-width: 7rem;
}
.deploy-path.is-missing {
  color: #ffb070;
}
.deploy-path-k {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 750;
  opacity: 0.85;
  color: #b8c9a0;
}
.deploy-path strong {
  font-variant-numeric: tabular-nums;
  color: #e8ff9a;
}
.deploy-path-sec {
  font-size: 0.72rem;
  opacity: 0.8;
}


/* Who cancelled this order */
.order-cancelled-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 8px 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 120, 90, 0.45);
  background: linear-gradient(160deg, rgba(90, 30, 24, 0.75), rgba(28, 14, 12, 0.88));
  color: #ffe8dc;
}
.order-cancelled-banner.is-self {
  border-color: rgba(255, 180, 90, 0.4);
  background: linear-gradient(160deg, rgba(70, 48, 18, 0.7), rgba(24, 18, 10, 0.88));
}
.order-cancelled-banner[hidden] {
  display: none !important;
}
.order-cancelled-banner-body {
  flex: 1 1 12rem;
  min-width: 0;
}
.order-cancelled-banner-body strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 850;
  color: #ffd0b8;
}
.order-cancelled-banner-body p {
  margin: 4px 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  opacity: 0.92;
}
.order-cancelled-banner-body .order-cancelled-utc {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.order-cancelled-dismiss {
  flex: 0 0 auto;
}


/* Client translate per message */
.msg-tr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  padding: 3px 8px;
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(196, 240, 98, 0.35);
  background: rgba(196, 240, 98, 0.12);
  color: #e8ffb0;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
  touch-action: manipulation;
  vertical-align: middle;
}
.msg-tr-toggle:disabled {
  opacity: 0.6;
  cursor: wait;
}
.msg-tr-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.9;
  color: #c4f062;
}
.msg-tr-badge[hidden] {
  display: none !important;
}
.msg-tr-action {
  white-space: nowrap;
}
.chat-keyboard-hint {
  display: none !important;
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.3;
  opacity: 0.85;
}
body.chat-fs .chat-keyboard-hint {
  display: none !important;
}


/* —— In-app chat keyboard (non-English) —— */
.chat-vkb {
  flex: 0 0 auto;
  margin: 6px 0 0;
  padding: 6px 4px 4px;
  border-radius: 14px;
  border: 1px solid rgba(196, 240, 98, 0.22);
  background: linear-gradient(180deg, rgba(18, 28, 20, 0.96), rgba(10, 16, 12, 0.98));
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.chat-vkb[hidden] {
  display: none !important;
}
.chat-vkb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px 6px;
}
.chat-vkb-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c4f062;
}
.chat-vkb-toggle {
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(196, 240, 98, 0.35);
  background: rgba(196, 240, 98, 0.1);
  color: #e8ffb0;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
}
.chat-vkb-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.chat-vkb-row {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.chat-vkb-key {
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  padding: 0 2px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
  color: #f2f6ea;
  font-size: 1.05rem;
  font-weight: 650;
  cursor: pointer;
  touch-action: manipulation;
  line-height: 1;
}
.chat-vkb-key:active {
  background: rgba(196, 240, 98, 0.28);
  border-color: rgba(196, 240, 98, 0.45);
}
.chat-vkb-key.is-wide {
  flex: 1.35 1 0;
  font-size: 0.78rem;
  font-weight: 750;
}
.chat-vkb-key.is-space {
  flex: 4 1 0;
  font-size: 0.78rem;
  text-transform: lowercase;
  opacity: 0.9;
}
.chat-vkb-key.is-enter {
  flex: 1.6 1 0;
  background: rgba(196, 240, 98, 0.22);
  border-color: rgba(196, 240, 98, 0.4);
  color: #e8ffb0;
  font-size: 0.78rem;
  font-weight: 800;
}
.chat-vkb-key.is-accent {
  background: rgba(120, 160, 220, 0.15);
  font-size: 0.95rem;
}
.chat-vkb.is-rtl .chat-vkb-rows {
  direction: rtl;
}
body.chat-fs .chat-vkb {
  flex: 0 0 auto;
  margin-bottom: max(4px, env(safe-area-inset-bottom, 0px));
}
body.chat-fs .chat-active:not([hidden]) {
  /* keep room for vkb */
}
.chat-form.is-vkb-mode #chatInput {
  caret-color: #c4f062;
}


/* Per-team troop order (≠ host March) + optional joiner mix */
.order-group-troop-section {
  margin: 12px 0 10px;
  display: grid;
  gap: 12px;
}
.order-group-troop-box {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(196, 240, 98, 0.28);
  background:
    linear-gradient(165deg, rgba(196, 240, 98, 0.1), rgba(12, 18, 14, 0.55));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}
.order-group-troop-box.is-joiner {
  border-color: rgba(120, 170, 220, 0.42);
  background:
    linear-gradient(165deg, rgba(100, 150, 220, 0.16), rgba(20, 32, 48, 0.55));
}
.order-group-troop-box-head {
  margin-bottom: 12px;
}
.order-group-troop-h {
  margin: 0 0 4px;
  font-size: 0.98rem;
  font-weight: 850;
  color: #e8f4c8;
  letter-spacing: 0.01em;
}
.order-group-troop-hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted, #8fa894);
}
.order-group-troop-box > .hint {
  margin: 0 0 10px;
  line-height: 1.35;
}
.order-group-troop-box .order-troop-grid {
  margin-top: 0;
}
.order-team-troop-actions {
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.order-team-troop-actions .btn {
  flex: 1 1 auto;
  min-height: 40px;
}
.order-group-troop-box .timer-actions {
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.order-joiner-troop-toggle {
  margin: 6px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.order-group-troop-box.is-joiner .order-group-loadout-pick.is-joiner-support {
  margin: 8px 0 12px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.order-group-troop-box.is-joiner .hero-pick-chips {
  max-height: 220px;
}

/* Rally open / path-distance fit */
.rally-fit-box {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(180, 140, 60, 0.45);
  background: rgba(255, 220, 120, 0.12);
}
.rally-fit-box.is-ok {
  border-color: rgba(60, 150, 90, 0.45);
  background: rgba(80, 180, 110, 0.1);
}
.rally-fit-box.is-bad {
  border-color: rgba(200, 80, 70, 0.55);
  background: rgba(220, 90, 80, 0.12);
}
.rally-fit-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 6px;
}
.rally-fit-ok,
.rally-fit-bad {
  margin: 0 0 6px;
  font-size: 0.88rem;
  line-height: 1.35;
}
.rally-fit-sends,
.rally-fit-far-list {
  list-style: none;
  margin: 6px 0 8px;
  padding: 0;
}
.rally-fit-send,
.rally-fit-far {
  display: grid;
  grid-template-columns: 2rem 1fr auto auto;
  gap: 6px 8px;
  align-items: baseline;
  font-size: 0.82rem;
  padding: 3px 0;
  border-bottom: 1px solid rgba(127, 127, 127, 0.15);
}
.rally-fit-far {
  grid-template-columns: 1fr;
}
.rally-fit-n {
  font-weight: 700;
  opacity: 0.75;
}
.rally-fit-apply {
  margin-top: 4px;
}
.rally-fit-send-head {
  margin: 8px 0 2px;
}


/* Solo team hits — same land time badge on order board */
.hit-same-land-badge {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text, #e8e6e3);
  opacity: 0.9;
  white-space: nowrap;
}


/* —— Novice 4-square hub removed from Timer (tab 1) —— */
#timerPanel #rallyOrderSteps.timer-step-hub,
#timerPanel #rallyModeBlock,
#timerPanel #noviceSquaresWrap,
#timerPanel #expertFreeHint {
  display: none !important;
}
body.role-joiner #timerPanel #rallyOrderSteps.timer-step-hub {
  display: none !important;
}
#timerPanel #rallyOrderSteps .rally-mode-block {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
}
#timerPanel #rallyOrderSteps .rally-mode-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  max-width: 100%;
}
#timerPanel #rallyOrderSteps .rally-mode-chip {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
#timerPanel #rallyOrderSteps .rally-mode-chip-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Novice 4-square wrap — hidden for Expert via HTML/JS + CSS fallback */
.novice-squares-wrap {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 100%;
  box-sizing: border-box;
}
.novice-squares-wrap[hidden],
body.rally-mode-expert .novice-squares-wrap {
  display: none !important;
}
body.rally-mode-expert .expert-free-hint:not([hidden]) {
  display: block;
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.18);
}
body.rally-mode-novice .expert-free-hint {
  display: none !important;
}

/* Strict non-overlapping 2×2 grid */
.rally-step-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;
  list-style: none;
  margin: 12px 0 8px;
  padding: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  isolation: isolate;
  align-items: stretch;
}
.rally-step-grid > .rally-step {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.28);
  overflow: hidden;
  /* kill legacy list stacking */
  float: none !important;
}
.rally-step-grid > .rally-step + .rally-step {
  margin-top: 0 !important;
}
.rally-step-grid .rally-step-hit {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 7.75rem;
  height: 100%;
  margin: 0;
  padding: 12px 11px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.rally-step-grid .step-mark {
  position: relative;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
}
.rally-step-grid .step-num-big,
.rally-step-grid .step-check {
  font-size: 1.05rem;
}
.rally-step-grid .step-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.rally-step-grid .step-title {
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.rally-step-grid .step-text {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.rally-step-grid .step-do {
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.7rem;
  font-weight: 750;
  color: rgba(240, 160, 90, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.rally-step-grid .rally-step.is-done {
  z-index: 1;
  border-color: rgba(95, 212, 160, 0.55);
  background: linear-gradient(160deg, rgba(24, 60, 42, 0.55), rgba(12, 28, 20, 0.4));
}
.rally-step-grid .rally-step.is-done .step-do {
  color: rgba(95, 212, 160, 0.95);
}
.rally-step-grid .rally-step.is-active:not(.is-done) {
  z-index: 2;
  border-color: rgba(240, 160, 90, 0.75);
  box-shadow: 0 0 0 1px rgba(240, 160, 90, 0.22);
}
.rally-step-grid .rally-step.is-locked {
  opacity: 0.48;
}
.rally-step-grid .rally-step.is-locked .rally-step-hit {
  cursor: not-allowed;
}
/* Legacy flex-list rules must not affect grid cells */
.rally-step-grid.rally-step-list {
  flex-direction: unset;
  gap: 12px;
}

/* Bottom dock / menus polish */
.app-menu-dock {
  max-width: 100vw;
  box-sizing: border-box;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.app-menu-dock::-webkit-scrollbar {
  display: none;
}
.menu-bar {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.menu-item {
  flex: 0 0 auto;
  min-width: 0;
}
.shell {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}
.panel.screen {
  max-width: 100%;
  box-sizing: border-box;
}

.leader-step-modal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.leader-step-modal-foot .btn {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 380px) {
  .rally-step-grid {
    gap: 10px;
  }
  .rally-step-grid .rally-step-hit {
    min-height: 7.1rem;
    padding: 10px 9px 9px;
  }
  .rally-step-grid .step-title {
    font-size: 0.82rem;
  }
  #timerPanel #rallyOrderSteps .rally-mode-chip-sub {
    font-size: 0.68rem;
  }
}
/* Very narrow: still 2 cols so the 4-box menu stays a square grid, no stacking overlap */
@media (max-width: 300px) {
  .rally-step-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }
}

/* —— Soft keyboard: keep inputs visible above bottom dock —— */
:root {
  --kb-inset: 0px;
}
/* While typing, hide fixed bottom menu so it cannot cover the focused field */
@media (max-width: 900px) {
  body.kb-open .app-menu-dock,
  body.kb-open .dock-more-sheet {
    display: none !important;
    visibility: hidden !important;
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }
  body.kb-open .foot {
    display: none !important;
  }
  body.kb-open .shell {
    /* Extra room to scroll the caret above the keyboard; dock is gone */
    padding-bottom: calc(16px + var(--safe-bottom, 0px)) !important;
  }
  /* Sticky chat composer also lifts with visual viewport padding */
  body.kb-open .chat.panel,
  body.kb-open .screen.chat .chat-compose,
  body.kb-open .chat-compose-wrap {
    padding-bottom: max(8px, calc(var(--kb-inset, 0px) * 0.02));
  }
  /* Leader step modal: keep actions reachable over keyboard */
  body.kb-open .leader-step-modal-card {
    max-height: min(92dvh, calc(100dvh - var(--kb-inset, 0px) - 12px));
    overflow: auto;
  }
  body.kb-open .setup-card,
  body.kb-open .leader-step-modal-body {
    padding-bottom: 24px;
  }
}
/* Prefer less aggressive browser auto-pan if we handle it */
html.kb-open,
body.kb-open {
  scroll-padding-bottom: calc(24px + var(--kb-inset, 0px));
}

/* —— Clean tabs: simple, scannable screens —— */
.screen-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(196, 240, 98, 0.12);
}
.screen-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.screen-head-top h2,
.screen-head-top .live-heading {
  flex: 1 1 8rem;
  min-width: 0;
}
.screen-head-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.screen-faq-btn,
.screen-chat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.screen-faq-btn {
  color: var(--accent, #c4f062);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(196, 240, 98, 0.4);
}
.screen-chat-btn {
  color: #10180c;
  background: var(--accent, #c4f062);
  border: 1px solid transparent;
}
.screen-chat-btn.chat-locked::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-radius: 50%;
  background: #5a3a10;
}
body[data-screen="chat"] .screen-head-links,
body[data-screen="chat"] .brand-chat-btn,
body[data-screen="mail"] .brand-my-orders-btn {
  display: none;
}
.screen-head h2,
.screen-head .live-heading {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.screen-lead {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--muted, #8fa894);
  line-height: 1.35;
}
.screen-one-line {
  margin: 0 0 8px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--muted, #8fa894);
}
.screen-block {
  margin: 0 0 14px;
  padding: 12px 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(196, 240, 98, 0.12);
  background: rgba(0, 0, 0, 0.32);
}
.screen-block-role {
  padding: 10px 12px;
}
.screen-block-countdown {
  border-color: rgba(196, 240, 98, 0.22);
  background:
    linear-gradient(165deg, rgba(196, 240, 98, 0.08), rgba(0, 0, 0, 0.18));
}
.screen-block-setup .troop-heading {
  margin-top: 10px;
  font-size: 0.95rem;
}
.screen-block-setup > .troop-heading:first-child,
.screen-block-setup > label:first-child {
  margin-top: 0;
}
.tab-more {
  margin: 10px 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(180, 210, 170, 0.16);
  background: rgba(0, 0, 0, 0.14);
  overflow: hidden;
}
.tab-more > .tab-more-sum {
  list-style: none;
  cursor: pointer;
  padding: 11px 12px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #d8efb0;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.tab-more > .tab-more-sum::-webkit-details-marker {
  display: none;
}
.tab-more > .tab-more-sum::before {
  content: "▸";
  color: var(--accent, #c4f062);
  font-size: 0.78rem;
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}
.tab-more[open] > .tab-more-sum::before {
  transform: rotate(90deg);
}
.tab-more-body {
  padding: 0 12px 12px;
  border-top: 1px solid rgba(180, 210, 170, 0.1);
}
.tab-more-body > :first-child {
  margin-top: 10px;
}
.game-pick-more .tab-more-sum .game-selector-active,
.game-pick-more .tab-more-sum [data-active-game-label] {
  color: var(--accent, #c4f062);
  font-weight: 800;
}
.game-pick-more .game-selector-top {
  display: none;
}
.game-pick-more .game-selector-bar {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.game-pick-more .tab-more-body {
  display: flex;
  flex-direction: column;
  max-height: min(62vh, 520px);
  overflow: hidden;
  padding-bottom: 0;
}
.game-pick-more .game-selector-bar,
.game-pick-more .calc-game-bar {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.game-pick-shell {
  display: flex;
  flex-direction: column;
  max-height: min(52vh, 440px);
  margin: 8px 0 10px;
}
.game-pick-shell .hero-game-row,
.game-pick-shell .tips-game-picker,
.game-pick-shell .heroes-game-picker,
.game-pick-shell .setup-game-pick {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.game-pick-continue {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(180, 210, 170, 0.22);
  background: linear-gradient(180deg, rgba(12, 20, 16, 0.94), rgba(10, 16, 14, 1));
  border-radius: 0 0 12px 12px;
}
.game-pick-continue-copy {
  font-size: 0.82rem;
  color: var(--muted);
  flex: 1 1 8rem;
}
.game-pick-continue-copy strong {
  color: var(--ink);
  font-weight: 800;
}
.game-pick-continue .btn.primary {
  flex: 1 1 11rem;
  min-height: 44px;
  font-weight: 800;
}
.game-pick-more .hero-game-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.game-pick-more .hero-game-row .role-chip {
  pointer-events: auto;
  touch-action: manipulation;
}
.hero-game-row {
  gap: 6px;
}
.hero-game-row .role-chip {
  font-size: 0.78rem;
  padding: 7px 10px;
  min-height: 36px;
}
.panel.screen > h2 {
  margin-bottom: 6px;
}
.panel.screen > .hint {
  margin-top: 0;
}
/* Compact global chrome on non-timer tabs */
body:not([data-screen="timer"]) .top .tag,
body:not([data-screen="timer"]) .clock-mode,
body:not([data-screen="timer"]) .view-tz-label {
  display: none !important;
}
body:not([data-screen="timer"]) .top {
  padding: 6px 0;
  gap: 8px;
}
body:not([data-screen="timer"]) .brand .mark {
  width: 36px;
  height: 36px;
}
body:not([data-screen="timer"]) .brand h1 {
  font-size: 1rem;
  margin: 0;
}
body:not([data-screen="timer"]) .brand-faq,
body:not([data-screen="timer"]) .brand-chat-btn,
body:not([data-screen="timer"]) .brand-my-orders-btn {
  min-height: 40px;
  padding: 7px 14px;
  font-size: 0.98rem;
}
body:not([data-screen="timer"]) .live-clock {
  font-size: 1.05rem;
}
body:not([data-screen="timer"]) .live-sub {
  font-size: 0.7rem;
}
/* Orders / Lineup / etc: hide ticking header clock — it reflowed the tab every 250ms */
body[data-screen="orders"] .clock-block,
body[data-screen="lineup"] .clock-block,
body[data-screen="mytimes"] .clock-block,
body[data-screen="alliance"] .clock-block,
body[data-screen="whale"] .clock-block,
body[data-screen="cancel"] .clock-block,
body[data-screen="city"] .clock-block,
body[data-screen="teams"] .clock-block,
body[data-screen="mail"] .clock-block,
body[data-screen="map"] .clock-block,
body[data-screen="calc"] .clock-block,
  body[data-screen="tips"] .clock-block,
  body[data-screen="help"] .clock-block,
body[data-screen="you"] .clock-block,
body[data-screen="alerts"] .clock-block {
  display: none !important;
}
body[data-screen="chat"] .top,
body[data-screen="chat"] .menu-step,
body[data-screen="chat"] .profile-strip {
  display: none !important;
}
.menu-step {
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(180, 210, 170, 0.1);
  line-height: 1.35;
}
/* Sticky primary action row feel for Orders / City / Deploy */
.panel.screen .timer-actions {
  gap: 8px;
}
.panel.screen .timer-actions .btn.primary {
  flex: 1 1 auto;
  min-width: min(100%, 10rem);
}
#timerPanel .big-countdown {
  margin: 4px 0 0;
}
#timerPanel .timer-team-pick,
#timerPanel .march-duration-block,
#timerPanel .land-in-block {
  margin-top: 8px;
}
.live-subtabs {
  margin: 0 0 10px;
}
.live-march-board,
.deploy-board,
.alliance-board,
.map-results-board,
.team-board {
  margin-top: 8px;
}
.city-hits-panel .troop-heading {
  margin-top: 0;
}
/* Reduce wall-of-text density on all panels */
.panel.screen .hint + .hint {
  margin-top: 4px;
}
.panel.screen .troop-heading {
  margin: 12px 0 6px;
  font-size: 0.98rem;
}
/* Chat keyboard hint quieter */
.chat-keyboard-hint {
  display: none !important;
  font-size: 0.74rem;
  opacity: 0.85;
}
/* Help cards denser */
.help-links {
  gap: 8px;
}
.help-card {
  padding: 12px 14px;
}
/* Map / calc tools more roomy for primary */
.map-search-panel label span,
.map-save-panel label span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}
/* Teams march setup cards */
#teamPick,
.team-pick {
  gap: 8px;
}
.march-preset-bar {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(180, 210, 170, 0.14);
  background: rgba(0, 0, 0, 0.14);
}
/* Alerts tighter */
[data-screen="alerts"] .rally-presets {
  margin: 6px 0 10px;
}
/* You: save button sticks visually */
[data-screen="you"] > .btn.primary[data-action="save-you"] {
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  position: sticky;
  bottom: calc(72px + var(--safe-bottom, 0px));
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Dock / menu: slightly clearer active */
.dock-item.on,
.menu-item.on {
  border-color: rgba(196, 240, 98, 0.45);
}

/* Alliance assign pick (Orders — players who set up the app) */
.order-assign-pick {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 4px;
}
.order-alliance-pick {
  border-radius: 14px;
  border: 1px solid rgba(196, 240, 98, 0.18);
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.order-alliance-pick-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(196, 240, 98, 0.1);
  background: rgba(196, 240, 98, 0.05);
}
.order-alliance-pick-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.order-alliance-pick-title strong {
  font-size: 0.9rem;
  font-weight: 800;
  color: #e8f4c8;
}
.order-alliance-pick-meta {
  font-size: 0.74rem;
  font-weight: 650;
  color: var(--muted, #8fa894);
}
.order-alliance-refresh {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 750;
}
.order-alliance-pick-list {
  max-height: 16rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.order-alliance-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(180, 210, 170, 0.08);
  cursor: pointer;
  background: transparent;
  transition: background 0.12s ease;
}
.order-alliance-pick-row:last-child {
  border-bottom: 0;
}
.order-alliance-pick-row:active {
  background: rgba(196, 240, 98, 0.06);
}
.order-alliance-pick-row.is-on-team {
  opacity: 0.55;
  cursor: default;
}
.order-alliance-pick-row.is-app:not(.is-on-team) {
  background: rgba(196, 240, 98, 0.03);
}
.order-alliance-pick-row input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  accent-color: var(--accent, #c4f062);
}
.order-alliance-pick-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.order-alliance-pick-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #eef6e4;
  line-height: 1.25;
}
.order-alliance-pick-sub {
  font-size: 0.74rem;
  color: var(--muted, #8fa894);
  line-height: 1.3;
}
.order-alliance-badge {
  display: inline;
  color: var(--accent, #c4f062);
  font-weight: 750;
}
.order-alliance-pick-row.is-manual .order-alliance-badge {
  color: #f0c14b;
}
.order-alliance-pick-empty {
  margin: 0;
  padding: 12px;
  line-height: 1.4;
}
.order-assign-pick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.order-assign-pick-actions .btn.primary {
  flex: 1 1 auto;
  min-height: 44px;
}

/* Host cancel on Out — keep visible even if role-joiner hides .sender-only */
.live-out-host-cancel,
body.role-joiner .live-out-host-cancel {
  display: block;
}
body.role-joiner .live-out-host-cancel[hidden] {
  display: none !important;
}
.live-cancel-order-btn,
button[data-action="cancel-orders"][data-host-cancel="1"] {
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: pointer;
}
/* Host cancel on Out page */
.live-out-host-cancel {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(232, 93, 93, 0.35);
  background: rgba(232, 93, 93, 0.08);
}
.live-out-cancel-lead {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--muted, #8fa894);
}
.live-out-cancel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
}
.live-out-cancel-row + .live-out-cancel-row {
  border-top: 1px solid rgba(232, 93, 93, 0.18);
}
.live-out-cancel-title {
  font-weight: 800;
  font-size: 0.9rem;
  color: #f0d0d0;
  min-width: 0;
  flex: 1 1 8rem;
}

.live-out-share-btn {
  min-height: 40px;
  font-size: 0.82rem;
}
.share-code-field {
  display: block;
  margin: 10px 0;
}
.share-code-field span {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 4px;
}
.share-code-field select {
  width: 100%;
}

.live-card-actions {
  flex-wrap: wrap;
  gap: 8px;
}
.live-cancel-order-btn {
  min-height: 40px;
}

/* Out tab · host vs sent-to-you sections */
.live-out-section {
  margin: 12px 0 18px;
  padding: 0;
}
.live-out-section-head {
  margin-bottom: 8px;
}
.live-out-section-title {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.live-out-section-count {
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0.75;
  min-width: 1.4em;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-green, #1a9b5c) 18%, transparent);
}
.live-out-section-host .live-out-section-count {
  background: color-mix(in srgb, var(--accent-green, #1a9b5c) 28%, transparent);
}
.live-out-section-tome .live-out-section-count {
  background: color-mix(in srgb, var(--accent, #3b82f6) 22%, transparent);
}
.live-out-section-lead {
  margin: 4px 0 8px;
}
.live-out-section-empty {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 10px;
}
.live-out-section-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.live-out-section-ally {
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 12px;
  padding: 8px 10px;
}
.live-out-section-sum {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-out-section-sum::-webkit-details-marker { display: none; }
.live-control-badge {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.live-control-badge.host {
  color: #0d5c36;
  background: color-mix(in srgb, #1a9b5c 22%, #fff);
}
.live-control-badge.tome {
  color: #1e3a8a;
  background: color-mix(in srgb, #3b82f6 20%, #fff);
}
.live-control-badge.ally {
  color: #475569;
  background: color-mix(in srgb, #94a3b8 24%, #fff);
}
.live-card.live-bucket-host {
  border-color: color-mix(in srgb, #1a9b5c 45%, transparent);
}
.live-card.live-bucket-toMe {
  border-color: color-mix(in srgb, #3b82f6 40%, transparent);
}
.live-pill.out.host {
  background: color-mix(in srgb, #1a9b5c 22%, transparent);
}
.live-pill.out.tome {
  background: color-mix(in srgb, #3b82f6 20%, transparent);
}

/* Durable order delivered / sent checks */
.orders-code-row.is-delivered .orders-code-token,
.orders-code-token.is-delivered {
  opacity: 0.85;
}
.orders-code-copy-btn.is-delivered {
  border-color: color-mix(in srgb, #1a9b5c 55%, transparent);
  color: #0d5c36;
  background: color-mix(in srgb, #1a9b5c 14%, transparent);
}
.orders-code-copy-btn.is-delivered .orders-code-copy-check {
  color: #0d8a4a;
  font-weight: 900;
  margin-left: 4px;
}
.orders-code-row.is-delivered::after {
  content: "";
}
.live-control-badge.delivered {
  color: #0d5c36;
  background: color-mix(in srgb, #1a9b5c 22%, #fff);
}
.live-out-share-btn.is-delivered {
  border-color: color-mix(in srgb, #1a9b5c 50%, transparent);
}

/* Chat order Copy → copied check */
.msg-order-copy.is-copied-flash,
.msg-order-copy.is-delivered {
  border-color: color-mix(in srgb, #1a9b5c 55%, transparent);
  color: #0d5c36;
  background: color-mix(in srgb, #1a9b5c 16%, transparent);
  font-weight: 700;
}
.msg-order-copy .msg-order-copy-check {
  color: #0d8a4a;
  font-weight: 900;
  margin-left: 4px;
}
.msg-order-copy.is-copied-flash .msg-order-copy-lab {
  font-weight: 800;
}
.msg-order-code-wrap:has(.msg-order-copy.is-delivered) .msg-order-code {
  border-color: color-mix(in srgb, #1a9b5c 35%, transparent);
}

/* Multi-sender team model strip */
.order-multi-model {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #1a9b5c 30%, transparent);
  background: color-mix(in srgb, #1a9b5c 8%, transparent);
}
.order-multi-model-title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 800;
}
.order-multi-model-list {
  margin: 0;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--muted, #555);
}
.order-sender-role-chip {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  color: #0d5c36;
  background: color-mix(in srgb, #1a9b5c 20%, #fff);
  vertical-align: middle;
  margin-left: 6px;
}
.order-sender-own-rally {
  margin: 2px 0 4px;
  font-size: 0.8rem;
}
.order-multi-assign-hint {
  margin-top: 0;
}


/* —— Per-tab step rail + sticky “finish first” bar —— */
.tab-flow-host {
  margin: 0 0 12px;
}
.tab-flow {
  border-radius: 14px;
  border: 1px solid rgba(196, 240, 98, 0.22);
  background:
    linear-gradient(165deg, rgba(196, 240, 98, 0.1), rgba(0, 0, 0, 0.22));
  padding: 12px 12px 14px;
}
.tab-flow-head {
  margin: 0 0 10px;
}
.tab-flow-title {
  display: block;
  font-size: 0.98rem;
  font-weight: 850;
  color: #e8f7c4;
  letter-spacing: 0.01em;
}
.tab-flow-tip {
  margin: 4px 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted, #8fa894);
  font-weight: 600;
}
.tab-flow-steps {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px 0;
}
.tab-flow-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  min-height: 46px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(196, 240, 98, 0.18);
  max-width: 100%;
}
.tab-flow-num {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 900;
  color: #0f180a;
  background: var(--accent, #c4f062);
}
.tab-flow-lab {
  font-size: 0.78rem;
  font-weight: 750;
  color: #dcefd0;
  line-height: 1.2;
  max-width: 7.5rem;
}
.tab-flow-arrow {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--accent, #c4f062);
  opacity: 0.9;
}
.tab-flow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tab-flow-actions .btn,
.tab-flow-do,
.tab-flow-next,
.tab-flow-stay {
  min-height: 48px;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 800;
  border-radius: 14px;
  flex: 1 1 auto;
  min-width: min(100%, 9.5rem);
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}
.tab-flow-next {
  border-color: rgba(196, 240, 98, 0.35);
}
.tab-flow-next-arrow {
  margin-left: 4px;
  font-weight: 900;
}
.tab-flow-highlight {
  outline: 2px solid var(--accent, #c4f062) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(196, 240, 98, 0.18);
  transition: outline 0.2s ease, box-shadow 0.2s ease;
}

/* Sticky next / primary action — sits ABOVE bottom dock (never covers menu) */
:root {
  --dock-bar-h: 0px;
  --tab-stay-h: 0px;
}
.tab-stay-bar {
  position: fixed;
  left: 0;
  right: 0;
  /* Default: above home indicator only (desktop / no dock) */
  bottom: 0;
  z-index: 50;
  padding: 6px 10px 8px;
  background: linear-gradient(180deg, rgba(8, 14, 10, 0), rgba(8, 14, 10, 0.88) 35%, rgba(8, 14, 10, 0.96));
  pointer-events: none;
}
.tab-stay-inner {
  pointer-events: auto;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(196, 240, 98, 0.28);
  background: rgba(12, 20, 14, 0.96);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.4);
}
.tab-stay-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.tab-stay-kicker {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #c4f062);
}
.tab-stay-title {
  display: block;
  font-size: 0.8rem;
  font-weight: 850;
  color: #eef8d8;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab-stay-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  flex: 0 0 auto;
  justify-content: flex-end;
}
.tab-stay-actions .btn {
  min-height: 44px;
  padding: 8px 12px;
  font-weight: 850;
  font-size: 0.82rem;
  border-radius: 12px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 11rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
/* Secondary next is optional on small screens to keep dock free */
.tab-stay-actions .tab-stay-next {
  display: none;
}
/* Phone: bottom dock is the real menu — never cover it */
@media (max-width: 900px) {
  :root {
    --dock-bar-h: calc(78px + var(--safe-bottom, 0px));
  }
  .app-menu-dock {
    z-index: 100 !important; /* always above stay bar */
  }
  .tab-stay-bar {
    bottom: var(--dock-bar-h);
    z-index: 55;
    padding-bottom: 6px;
  }
  body.has-tab-stay .shell,
  body.has-tab-stay #app {
    /* slim dock + stay strip + buffer */
    padding-bottom: calc(78px + 72px + var(--safe-bottom, 0px)) !important;
  }
  html.raids-native body.has-tab-stay .shell,
  html.raids-native body.has-tab-stay #app {
    padding-bottom: calc(72px + var(--safe-bottom, 0px)) !important;
  }
}
@media (min-width: 901px) {
  body.has-tab-stay .shell,
  body.has-tab-stay #app {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
  .tab-stay-actions .tab-stay-next {
    display: inline-flex;
  }
}
body.chat-fs .tab-stay-bar,
body.chat-fs-active .tab-stay-bar,
body[data-screen="chat"] .tab-stay-bar {
  display: none !important;
}
body.chat-fs .app-menu-dock,
body.chat-fs .dock-more-sheet,
body[data-screen="chat"] .app-menu-dock,
body[data-screen="chat"] .dock-more-sheet {
  display: none !important;
}

/* Bigger primary picks across tabs */
.panel.screen .timer-actions {
  gap: 10px;
}
.panel.screen .timer-actions .btn {
  min-height: 48px;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 750;
  border-radius: 14px;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}
.panel.screen .role-pick .role-chip,
.panel.screen .orders-mode-row .role-chip {
  min-height: 46px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 800;
  border-radius: 12px;
}
.stagger-rally-bar {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(12, 28, 22, 0.72);
  border: 1px solid rgba(196, 240, 98, 0.22);
}
.stagger-how-title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--accent, #c4f062);
}
.stagger-how-list {
  margin: 0 0 12px;
  padding-left: 1.15rem;
  display: grid;
  gap: 8px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: #d5e4d8;
}
.stagger-how-list li {
  padding-left: 2px;
}
.stagger-wave-block {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(8, 18, 14, 0.55);
  border: 1px solid rgba(196, 240, 98, 0.16);
}
.stagger-wave-badge {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--accent, #c4f062);
}
.stagger-send-title {
  margin: 0 0 4px;
  font-size: 0.9rem;
}
.stagger-send-row {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.stagger-send-chip {
  font-size: 0.82rem !important;
  min-height: 40px;
}
/* Novice squares already large — make step arrows between them clearer */
.rally-step-grid {
  gap: 10px;
}
.rally-step-list.rally-step-grid {
  position: relative;
}
.novice-squares-wrap .rally-step {
  position: relative;
}
.novice-squares-wrap .rally-step:not(:last-child)::after {
  content: "↓";
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--accent, #c4f062);
  text-shadow: 0 1px 0 #0a120e;
  pointer-events: none;
}
@media (min-width: 420px) {
  .novice-squares-wrap .rally-step-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .novice-squares-wrap .rally-step:not(:last-child)::after {
    content: "→";
    left: auto;
    right: -10px;
    bottom: 50%;
    transform: translateY(50%);
  }
  .novice-squares-wrap .rally-step:nth-child(2n)::after {
    content: "↓";
    right: auto;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
  }
  .novice-squares-wrap .rally-step:nth-child(2n)::before {
    content: none;
  }
}
.rally-step-hit {
  min-height: 88px;
  width: 100%;
  border-radius: 14px;
  padding: 12px;
}
.menu-item {
  min-height: 48px;
}
.menu-item .menu-label {
  font-weight: 750;
}

/* Live completion marks on step chips */
.tab-flow-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tab-flow-progress {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 850;
  color: var(--accent, #c4f062);
  background: rgba(196, 240, 98, 0.12);
  border: 1px solid rgba(196, 240, 98, 0.28);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
.tab-flow-step.is-done {
  border-color: rgba(196, 240, 98, 0.55);
  background: rgba(196, 240, 98, 0.14);
}
.tab-flow-step.is-done .tab-flow-num {
  background: #8fd93a;
  color: #0a1408;
}
.tab-flow-step.is-done .tab-flow-lab {
  color: #d8f5a8;
  text-decoration: line-through;
  text-decoration-color: rgba(196, 240, 98, 0.45);
}
.tab-flow-step.is-current:not(.is-done) {
  border-color: #f0a060;
  box-shadow: 0 0 0 2px rgba(240, 160, 96, 0.35);
  background: rgba(240, 140, 60, 0.14);
}
.tab-flow-step.is-current:not(.is-done) .tab-flow-num {
  background: #f08c3c;
  color: #1a0e06;
}
.tab-flow.is-all-done {
  border-color: rgba(196, 240, 98, 0.45);
}
.tab-stay-progress {
  display: block;
  font-size: 0.68rem;
  font-weight: 750;
  color: var(--muted, #8fa894);
  margin-top: 1px;
}
.tab-stay-inner.is-all-done {
  border-color: rgba(196, 240, 98, 0.5);
}
.tab-stay-inner.is-all-done .tab-stay-kicker {
  color: #c4f062;
}

/* Calculator validation */
[data-calc-field].calc-field-missing,
.calc-field-missing {
  border-color: #e88a4a !important;
  box-shadow: 0 0 0 2px rgba(232, 138, 74, 0.35);
  background: rgba(80, 40, 12, 0.35) !important;
}
.calc-missing-banner {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(232, 138, 74, 0.45);
  background: rgba(60, 28, 10, 0.55);
}
.calc-missing-banner.calc-missing-error {
  border-color: rgba(232, 93, 93, 0.55);
  background: rgba(70, 18, 18, 0.55);
}
.calc-missing-title {
  display: block;
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: #ffd0a8;
}
.calc-missing-list {
  margin: 0 0 6px;
  padding-left: 1.2em;
  color: #f0ddd0;
  font-size: 0.88rem;
  line-height: 1.4;
}
.calc-miss-hard {
  color: #ffb4b4;
  font-weight: 750;
}
.calc-miss-soft {
  color: #ffd8a8;
}
.calc-miss-data {
  color: #c8d8ff;
}
.calc-missing-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted, #8fa894);
}
.calc-result.is-error {
  border: 1px solid rgba(232, 93, 93, 0.4);
  border-radius: 12px;
  padding: 10px;
}
.calc-result.is-warn {
  border: 1px solid rgba(232, 138, 74, 0.35);
  border-radius: 12px;
  padding: 10px;
}
.calc-result.is-ok {
  border: 1px solid rgba(196, 240, 98, 0.22);
  border-radius: 12px;
  padding: 10px;
}

/* Hero name avatar (photo or initials + class-tinted plate) */
.hero-avatar {
  flex: 0 0 auto;
  width: 216px;
  height: 216px;
  border-radius: var(--ha-rx, 22px);
  background: var(--ha-bg, #243028);
  border: 1.5px solid var(--ha-bd, rgba(160,200,140,0.4));
  color: var(--ha-fg, #e8f5e0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  padding: 0;
  position: relative;
}
.hero-avatar-unique .hero-unique-svg,
.hero-avatar-fallback .hero-unique-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-avatar-unique .hero-avatar-name {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 6px;
  z-index: 2;
  font-size: 0.72rem;
  text-shadow: 0 1px 4px #000;
}
.hero-avatar-wash {
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, var(--ha-wash, transparent), transparent);
  mix-blend-mode: normal;
  opacity: 0.72;
}
.hero-avatar-photo {
  padding: 0;
  border-color: rgba(196, 240, 98, 0.35);
  background: #0a100c;
  position: relative;
}
.hero-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  filter: var(--ha-filter, none);
}
.hero-avatar-fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  padding: 4px;
}
.hero-avatar-photo:not(:has(.hero-avatar-img)) .hero-avatar-fallback,
.hero-avatar:not(.hero-avatar-photo) .hero-avatar-fallback {
  display: flex;
}
.hero-avatar-photo:not(:has(.hero-avatar-img)) {
  padding: 4px;
}
.hero-avatar-ini {
  font-weight: 900;
  font-size: 3.2rem;
  letter-spacing: 0.04em;
  line-height: 1;
}
.hero-avatar-name {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.9;
  max-width: 192px;
}
.hero-pick-chip {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 16px !important;
  padding: 8px 14px 8px 8px !important;
}
.hero-pick-chip .hero-avatar {
  width: 120px;
  height: 120px;
  border-radius: 16px;
}
.hero-pick-chip .hero-avatar-ini {
  font-size: 2.2rem;
}
.hero-pick-chip .hero-avatar-name {
  display: none;
}
.hero-pick-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}

/* Chat profile gate — collect ID / name / server before Chat */
/* Must sit ABOVE immersive chat (body.chat-fs .screen.chat is z-index 10050). iPad WKWebView clips lower overlays. */
#chatProfileOverlay {
  z-index: 80000;
}
#chatProfileOverlay:not([hidden]) {
  display: flex !important;
  pointer-events: auto;
}
body.chat-fs.chat-profile-open {
  overflow: visible !important;
}
body.chat-fs.chat-profile-open .screen.chat {
  pointer-events: none;
}
body.chat-profile-open #chatProfileOverlay {
  pointer-events: auto;
}
.chat-profile-overlay .chat-profile-card {
  max-width: min(420px, 94vw);
}
.chat-profile-overlay .setup-field-label {
  display: block;
  margin: 10px 0 0;
}
.chat-profile-overlay .setup-field-label input {
  width: 100%;
  margin-top: 4px;
}
.chat-profile-overlay .setup-wizard-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Multi chat identities */
.chat-identity-panel {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
}
.chat-id-pick-label {
  font-size: 0.82rem;
  opacity: 0.85;
  margin-bottom: 6px;
}
.chat-id-pick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-id-chip {
  font-size: 0.78rem;
  max-width: 100%;
}
.chat-identity-detect {
  margin: 6px 0 8px;
}
.chat-identity-banner {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
}


/* Chat composer + paste orders — always visible text in WKWebView */
.chat-form #chatInput,
.chat-code-input,
#teamCodePasteChat,
#teamCodePasteHeader {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--accent, #c4f062);
  opacity: 1 !important;
}
.chat-form #chatInput:disabled,
.chat-code-input:disabled {
  opacity: 0.6 !important;
}
.chat-order-action-card {
  max-width: min(520px, 94vw);
}
.chat-order-action-preview {
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.82rem;
  line-height: 1.35;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  margin: 8px 0 12px;
}
.chat-order-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.chat-order-action-row .btn {
  min-height: 44px;
}


/* —— War orders envelope in chat —— */
.war-order-env {
  position: relative;
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 4px 0 2px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.war-order-env-flap {
  display: block;
  height: 28px;
  margin: 0 2px;
  background:
    linear-gradient(165deg, rgba(90, 28, 18, 0.95), rgba(40, 12, 8, 0.98));
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.35);
}
.war-order-env-inner {
  display: grid;
  gap: 6px;
  justify-items: center;
  margin-top: -6px;
  padding: 18px 14px 14px;
  border-radius: 4px 4px 10px 10px;
  border: 1px solid rgba(212, 175, 55, 0.55);
  background:
    radial-gradient(120px 60px at 50% 0%, rgba(180, 40, 30, 0.35), transparent 70%),
    linear-gradient(180deg, #3a1810 0%, #1a0c08 55%, #120805 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    inset 0 0 24px rgba(80, 20, 10, 0.45),
    0 10px 22px rgba(0, 0, 0, 0.45);
  color: #f3e6c8;
}
.war-order-env-seal {
  width: 42px;
  height: 42px;
  margin-top: -28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  color: #3a140c;
  background:
    radial-gradient(circle at 35% 30%, #f0c45a, #b8841e 55%, #6a3a0c 100%);
  border: 2px solid rgba(255, 220, 140, 0.65);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}
.war-order-env-stamp {
  font-family: var(--font-display, "Barlow Condensed", system-ui, sans-serif);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f0d48a;
  text-shadow: 0 1px 0 #000, 0 0 12px rgba(200, 40, 30, 0.35);
  text-align: center;
  line-height: 1.15;
  padding: 0 6px;
}
.war-order-env-type {
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: rgba(0, 0, 0, 0.28);
  color: #ffe7b0;
  max-width: 100%;
}
.war-order-env.is-together .war-order-env-type,
.war-order-env-type.is-together {
  border-color: rgba(196, 240, 98, 0.5);
  background: rgba(20, 55, 40, 0.55);
  color: #c4f062;
}
.war-order-env.is-stagger .war-order-env-type,
.war-order-env-type.is-stagger {
  border-color: rgba(240, 160, 90, 0.55);
  background: rgba(80, 45, 12, 0.5);
  color: #f0c674;
}
.war-order-env.is-solo .war-order-env-type,
.war-order-env-type.is-solo {
  border-color: rgba(140, 190, 255, 0.5);
  background: rgba(20, 40, 70, 0.5);
  color: #b8d4ff;
}
.war-order-env.is-reinforce .war-order-env-type,
.war-order-env-type.is-reinforce {
  border-color: rgba(180, 220, 140, 0.45);
  background: rgba(30, 50, 28, 0.5);
  color: #d5ecc0;
}
.war-order-env-to {
  font-size: 0.92rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffe7b0;
  text-align: center;
  padding: 4px 8px;
  border-top: 1px dashed rgba(212, 175, 55, 0.4);
  border-bottom: 1px dashed rgba(212, 175, 55, 0.4);
  max-width: 100%;
  word-break: break-word;
}
.war-order-env-from {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #f0d48a;
  font-weight: 700;
}
.war-order-env-when {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: rgba(240, 220, 180, 0.75);
}
.war-order-env-hint {
  font-size: 0.75rem;
  font-weight: 650;
  color: rgba(243, 230, 200, 0.75);
}
.war-order-env:active .war-order-env-inner,
.war-order-env:focus-visible .war-order-env-inner {
  border-color: rgba(240, 200, 90, 0.9);
  filter: brightness(1.06);
}
.war-order-env-codes {
  margin-top: 6px;
}

/* Chat · Order messages tab */
.chat-view-tabs {
  display: none !important;
}
.chat-view-tab {
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
  color: inherit;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  min-height: 36px;
}
.chat-view-tab.on {
  border-color: rgba(212, 175, 55, 0.65);
  background: rgba(120, 40, 20, 0.35);
  color: #ffe7b0;
  font-weight: 700;
}
.chat-order-messages-panel {
  flex: 1 1 auto;
  min-height: 180px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.chat-order-messages-panel[hidden] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  flex: 0 0 0 !important;
}
.chat-order-messages-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-emoji-panel {
  flex: 0 0 auto;
  margin: 0 0 6px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(196, 240, 98, 0.28);
  background: rgba(8, 14, 11, 0.96);
  max-height: min(42vh, 280px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-emoji-panel[hidden] {
  display: none !important;
}
.chat-emoji-cats {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.chat-emoji-cat {
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.15rem;
  cursor: pointer;
  touch-action: manipulation;
}
.chat-emoji-cat.on {
  border-color: rgba(196, 240, 98, 0.45);
  background: rgba(196, 240, 98, 0.16);
}
.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: min(32vh, 220px);
  padding-bottom: 2px;
}
.chat-emoji-btn {
  min-height: 40px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  padding: 0;
}
.chat-emoji-btn:active,
.chat-emoji-btn:hover {
  background: rgba(196, 240, 98, 0.14);
}
@media (max-width: 420px) {
  .chat-emoji-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
.chat-order-msg-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: linear-gradient(160deg, rgba(40, 18, 12, 0.55), rgba(12, 8, 6, 0.4));
}
.chat-order-msg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  font-size: 0.8rem;
  color: var(--muted);
}
.chat-order-msg-from {
  color: #f0d48a;
  font-weight: 750;
}
.chat-order-msg-when {
  font-variant-numeric: tabular-nums;
}
.chat-order-msg-card .war-order-env {
  max-width: none;
}
body.chat-fs .chat-order-messages-panel {
  flex: 1 1 auto;
  min-height: 0;
}

/* Mail order — header shortcut + Orders picker */
.header-mail-order .header-mail-row {
  gap: 6px;
}
.header-mail-open-btn {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem !important;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 0 10px !important;
}
.mail-order-section {
  margin: 0 0 14px;
  padding: 12px 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background:
    linear-gradient(165deg, rgba(60, 36, 14, 0.55), rgba(18, 12, 8, 0.72));
}
.mail-order-section .troop-heading {
  margin-top: 0;
  color: #f0d48a;
}
.mail-order-scope {
  margin: 8px 0 10px;
}
.mail-order-send-prompt {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: rgba(20, 14, 6, 0.45);
}
.mail-order-prompt-actions {
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 8px;
}
.mail-order-filter-lab {
  display: grid;
  gap: 4px;
  margin: 0 0 8px;
}
.mail-order-people-filter {
  width: 100%;
  min-height: 2.4rem;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: rgba(0, 0, 0, 0.28);
  color: var(--ink, #f4e6c4);
  font-size: 1rem;
}
.mail-order-person-row.is-manual .mail-order-person-meta {
  color: rgba(255, 196, 120, 0.9);
}
.mail-order-pick-lab,
.mail-order-card .share-code-field {
  display: grid;
  gap: 4px;
  margin: 0 0 10px;
}
.mail-order-toolbar {
  margin-bottom: 8px;
  gap: 8px;
  flex-wrap: wrap;
}
.mail-order-people {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(42vh, 320px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  margin: 0 0 10px;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  background: rgba(0, 0, 0, 0.22);
  max-width: 100%;
}
.mail-order-person-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.mail-order-person-row.is-hidden .mail-order-person {
  opacity: 0.55;
}
.mail-order-person-row.is-left .mail-order-person,
.order-invite-row.is-left,
.follow-member-row.is-left,
.alliance-member-row.is-left {
  border-color: rgba(240, 160, 80, 0.45);
}
.mail-order-person-row.is-left .mail-order-person-meta {
  color: #f0c14b;
}
.mail-order-person {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  background: rgba(28, 16, 10, 0.65);
  cursor: pointer;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: none;
}
.mail-order-person:has(input:checked),
.mail-order-person.is-picked,
.mail-order-person-row.is-picked .mail-order-person {
  border: 1px solid rgba(90, 210, 130, 0.55);
  background: rgba(40, 130, 75, 0.18);
  box-shadow: inset 0 0 0 1px rgba(120, 220, 150, 0.14);
}
/* Full-row tap target — JS toggles; iOS ignores nearly-invisible checkboxes */
.mail-order-person input.mail-order-check {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}
.mail-order-check-ui {
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 2px;
  border-radius: 5px;
  border: 2px solid rgba(240, 212, 138, 0.75);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
}
.mail-order-person:has(input:checked) .mail-order-check-ui {
  background: #c4f062;
  border-color: #9ed84a;
}
.mail-order-person:has(input:checked) .mail-order-check-ui::after {
  content: "✓";
  color: #12200c;
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1;
}
.mail-order-env-mark {
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px dashed rgba(212, 175, 55, 0.4);
  background:
    linear-gradient(165deg, rgba(60, 36, 18, 0.9), rgba(22, 12, 8, 0.95));
  color: rgba(240, 212, 138, 0.55);
  font-size: 1.2rem;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.08);
}
.mail-order-env-mark::before {
  content: "✉";
}
.mail-order-person:has(input:checked) .mail-order-env-mark {
  border-style: solid;
  border-color: rgba(196, 240, 98, 0.85);
  background:
    linear-gradient(165deg, #3a5a18 0%, #1a2c0c 55%, #0c1408 100%);
  color: #e8ffc8;
  box-shadow:
    0 0 0 2px rgba(196, 240, 98, 0.28),
    inset 0 1px 0 rgba(220, 255, 180, 0.2);
}
.mail-order-person:has(input:checked) .mail-order-env-mark::before {
  content: "✉";
  filter: drop-shadow(0 0 4px rgba(196, 240, 98, 0.45));
}
.mail-order-person-text {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mail-order-person-name {
  font-weight: 800;
  color: #f3e6c8;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mail-order-person:has(input:checked) .mail-order-person-name,
.mail-order-person.is-picked .mail-order-person-name,
.mail-order-person-row.is-picked .mail-order-person-name {
  display: inline-block;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: 999px;
  color: #b6ffc8;
  background: rgba(50, 160, 90, 0.38);
  border: 1px solid rgba(120, 220, 150, 0.5);
  box-shadow: inset 0 0 0 1px rgba(120, 220, 150, 0.12);
}
.mail-order-person:has(input:checked) .mail-order-person-meta,
.mail-order-person.is-picked .mail-order-person-meta,
.mail-order-person-row.is-picked .mail-order-person-meta {
  color: #c8f5d4;
}
.mail-order-person:has(input:checked) .mail-order-person-name::after,
.mail-order-person.is-picked .mail-order-person-name::after {
  content: " · ✉";
  font-weight: 700;
  color: #8ef0a8;
  font-size: 0.85em;
}
.mail-order-hide-btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  align-self: center;
  min-height: 2.4rem;
  padding: 6px 10px;
  font-size: 0.82rem;
}
.mail-order-person-meta {
  font-size: 0.72rem;
  color: rgba(240, 212, 138, 0.75);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.lineup-mail-order {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
}
/* Send order to people — do not set pan-y on the whole sheet (iOS then drops name taps) */
#mailOrderOverlay,
.mail-order-section,
.mail-order-card {
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  box-sizing: border-box;
}
#mailOrderOverlay {
  overflow-y: auto;
  pointer-events: auto;
}
#mailOrderOverlay .mail-order-card {
  width: min(420px, 100%);
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: none;
}
body.mail-order-open .shell {
  pointer-events: none;
  user-select: none;
}
body.mail-order-open #mailOrderOverlay {
  pointer-events: auto;
  user-select: auto;
}
#mailOrderOverlay .hint,
.mail-order-section .hint,
.mail-order-send-prompt,
.mail-order-ready,
#mailOrderOverlayReady,
.mail-order-toolbar,
.mail-order-prompt-actions,
.mail-order-scope,
.mail-order-filter-lab,
.mail-order-pick-lab,
.mail-order-card .share-code-field,
.mail-order-card select,
.mail-order-people-filter {
  max-width: 100%;
  box-sizing: border-box;
}
.mail-order-scope {
  flex-wrap: wrap;
}
.mail-order-scope .role-chip {
  flex: 1 1 calc(50% - 8px);
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}
.mail-order-toolbar,
.mail-order-prompt-actions {
  flex-wrap: wrap;
  max-width: 100%;
}
.mail-order-toolbar .btn,
.mail-order-prompt-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}
body.mail-order-open,
body.send-order-prompt-open {
  overflow: hidden;
  overflow-x: hidden;
}
body.send-order-prompt-open .shell,
body.mail-order-open .shell,
body.mail-order-open .menu-bar,
body.send-order-prompt-open .menu-bar,
body.mail-order-open .leader-step-modal,
body.send-order-prompt-open .leader-step-modal,
body.mail-order-open .land-in-wheels,
body.send-order-prompt-open .land-in-wheels,
body.mail-order-open .big-countdown,
body.send-order-prompt-open .big-countdown {
  pointer-events: none;
  user-select: none;
}
body.mail-order-open .path-wait-skip-pick:not(#youPathWaitSkipPick),
body.mail-order-open .path-wait-deadline,
body.send-order-prompt-open .leader-step-modal {
  display: none !important;
}
#mailOrderOverlay,
#sendOrderPromptOverlay {
  z-index: 50000;
  background: #0a100e;
}
body.send-order-prompt-open #sendOrderPromptOverlay,
body.mail-order-open #mailOrderOverlay {
  pointer-events: auto;
  user-select: auto;
}
.send-order-prompt-card {
  max-width: 420px;
}
.send-order-prompt-later {
  margin: 12px 0 4px;
  line-height: 1.4;
}

/* Main Mail — full-screen real table + candles; theme follows selected game */
.panel.screen.mail-screen,
.mail-screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(88vh, 900px);
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(180, 120, 50, 0.35);
  background: #120c08 !important;
  background-image: none !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  padding: 0 !important;
}
.mail-war-desk {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.mail-war-desk-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.04);
}
.mail-war-desk-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Soft veil — candles and wood stay visible; center clear for letters */
  background:
    radial-gradient(70% 55% at 50% 48%, rgba(8, 5, 2, 0.08) 0%, rgba(8, 5, 2, 0.28) 55%, rgba(6, 4, 2, 0.55) 100%),
    linear-gradient(180deg, rgba(12, 8, 4, 0.42) 0%, transparent 18%, transparent 72%, rgba(8, 5, 2, 0.4) 100%);
}
.mail-screen[data-mail-theme="survival"] {
  border-color: rgba(120, 160, 180, 0.35);
  background: #0a1216 !important;
}
.mail-screen[data-mail-theme="survival"] .mail-war-desk-veil {
  background:
    radial-gradient(70% 55% at 50% 48%, rgba(6, 12, 16, 0.1) 0%, rgba(6, 12, 16, 0.32) 55%, rgba(4, 10, 14, 0.58) 100%),
    linear-gradient(180deg, rgba(8, 14, 18, 0.45) 0%, transparent 18%, transparent 72%, rgba(4, 10, 14, 0.42) 100%);
}
.mail-screen[data-mail-theme="fantasy"] {
  border-color: rgba(160, 120, 70, 0.4);
  background: #140e0a !important;
}
.mail-screen[data-mail-theme="fantasy"] .mail-war-desk-veil {
  background:
    radial-gradient(70% 55% at 50% 48%, rgba(10, 6, 3, 0.06) 0%, rgba(10, 6, 3, 0.26) 55%, rgba(8, 4, 2, 0.55) 100%),
    linear-gradient(180deg, rgba(16, 10, 6, 0.4) 0%, transparent 18%, transparent 72%, rgba(8, 4, 2, 0.38) 100%);
}
.mail-screen[data-mail-theme="tactical"] {
  border-color: rgba(140, 150, 100, 0.35);
  background: #0c100c !important;
}
.mail-screen[data-mail-theme="tactical"] .mail-war-desk-veil {
  background:
    radial-gradient(70% 55% at 50% 48%, rgba(6, 10, 6, 0.1) 0%, rgba(6, 10, 6, 0.3) 55%, rgba(4, 8, 4, 0.58) 100%),
    linear-gradient(180deg, rgba(10, 14, 10, 0.42) 0%, transparent 18%, transparent 72%, rgba(4, 8, 4, 0.4) 100%);
}
.mail-screen[data-mail-theme="urban"] {
  border-color: rgba(220, 80, 160, 0.4);
  background: #120814 !important;
}
.mail-screen[data-mail-theme="urban"] .mail-war-desk-veil {
  background:
    radial-gradient(70% 55% at 50% 48%, rgba(18, 6, 16, 0.08) 0%, rgba(18, 6, 16, 0.3) 55%, rgba(10, 4, 14, 0.58) 100%),
    linear-gradient(180deg, rgba(24, 8, 22, 0.45) 0%, transparent 18%, transparent 72%, rgba(10, 4, 14, 0.42) 100%);
}
.mail-screen[data-mail-theme="western"] {
  border-color: rgba(196, 140, 70, 0.4);
  background: #1a1208 !important;
}
.mail-screen[data-mail-theme="western"] .mail-war-desk-veil {
  background:
    radial-gradient(70% 55% at 50% 48%, rgba(20, 12, 4, 0.08) 0%, rgba(20, 12, 4, 0.28) 55%, rgba(12, 8, 2, 0.55) 100%),
    linear-gradient(180deg, rgba(28, 16, 6, 0.4) 0%, transparent 18%, transparent 72%, rgba(12, 8, 2, 0.38) 100%);
}
.mail-screen[data-mail-theme="primitive"] {
  border-color: rgba(160, 110, 60, 0.4);
  background: #16100a !important;
}
.mail-screen[data-mail-theme="primitive"] .mail-war-desk-veil {
  background:
    radial-gradient(70% 55% at 50% 48%, rgba(16, 10, 4, 0.08) 0%, rgba(16, 10, 4, 0.28) 55%, rgba(10, 6, 2, 0.55) 100%),
    linear-gradient(180deg, rgba(22, 12, 6, 0.42) 0%, transparent 18%, transparent 72%, rgba(10, 6, 2, 0.4) 100%);
}
.mail-screen[data-mail-theme="musketeer"] {
  border-color: rgba(180, 140, 70, 0.4);
  background: #120e08 !important;
}
.mail-screen[data-mail-theme="musketeer"] .mail-war-desk-veil {
  background:
    radial-gradient(70% 55% at 50% 48%, rgba(14, 10, 4, 0.08) 0%, rgba(14, 10, 4, 0.28) 55%, rgba(8, 6, 2, 0.55) 100%),
    linear-gradient(180deg, rgba(20, 14, 6, 0.4) 0%, transparent 18%, transparent 72%, rgba(8, 6, 2, 0.38) 100%);
}
.mail-war-desk-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: inherit;
  padding: 12px 12px 20px;
  box-sizing: border-box;
}
.mail-desk-head {
  padding: 8px 10px 6px;
  border-radius: 10px;
  background: rgba(18, 10, 6, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.22);
  backdrop-filter: blur(5px);
  max-width: 28rem;
  margin-inline: auto;
  width: 100%;
  text-align: center;
}
.mail-screen .screen-head h2 {
  color: #f3e2b8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75), 0 0 18px rgba(200, 120, 40, 0.25);
  letter-spacing: 0.04em;
}
.mail-screen .screen-lead,
.mail-screen .hint {
  color: rgba(236, 214, 170, 0.92) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
.mail-desk-hint {
  max-width: 28rem;
  margin-inline: auto;
  text-align: center;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(18, 10, 6, 0.45);
}
.mail-desk-actions {
  margin-bottom: 6px;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.mail-screen .mail-desk-actions .btn {
  background: rgba(42, 24, 14, 0.88);
  border-color: rgba(212, 175, 55, 0.5);
  color: #f0d48a;
  backdrop-filter: blur(4px);
}
.mail-screen .mail-desk-actions .btn:active,
.mail-screen .mail-desk-actions .btn:focus-visible {
  border-color: rgba(240, 200, 90, 0.85);
}
.mail-order-list,
.mail-desk-inbox {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 4px 28px;
  min-height: 42vh;
}
.mail-desk-inbox > .hint {
  margin: 28px auto;
  max-width: 28rem;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, 0.32);
  background: rgba(28, 16, 10, 0.78);
  text-align: center;
}
/* Letters lying on the table — no rotate (iOS hit-testing misses rotated buttons) */
.mail-desk-inbox .war-order-env {
  max-width: min(360px, 94%);
  width: 100%;
  margin-inline: auto;
  transform: none;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.62));
}
.mail-desk-inbox .war-order-env:nth-child(even),
.mail-desk-inbox .war-order-env:nth-child(3n) {
  transform: none;
}
.mail-desk-inbox .war-order-env:active,
.mail-desk-inbox .war-order-env:focus-visible {
  transform: scale(1.02);
}
.mail-desk-inbox .chat-order-msg-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
  width: 100%;
  max-width: min(380px, 100%);
  display: flex;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}
.mail-desk-inbox .chat-order-msg-meta {
  display: none;
}
.mail-desk-inbox .chat-order-msg-card.is-unread .war-order-env {
  animation: mail-env-glow 1.1s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(196, 240, 98, 0.55)) drop-shadow(0 14px 22px rgba(0, 0, 0, 0.62));
}
@keyframes mail-env-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(196, 240, 98, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(196, 240, 98, 0.85);
  }
}
.mail-envelope-body {
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #f3e2b8;
  background: rgba(18, 10, 6, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 8px;
  padding: 10px 12px;
  max-height: 28vh;
  overflow: auto;
  margin: 0 0 8px;
}
.mail-screen[data-mail-theme="survival"] .mail-desk-head,
.mail-screen[data-mail-theme="survival"] .mail-desk-hint,
.mail-screen[data-mail-theme="survival"] .mail-desk-inbox > .hint {
  border-color: rgba(140, 180, 200, 0.28);
  background: rgba(8, 16, 20, 0.55);
}
.mail-screen[data-mail-theme="survival"] .screen-head h2,
.mail-screen[data-mail-theme="survival"] .mail-desk-actions .btn {
  color: #d8e8f0;
  border-color: rgba(140, 180, 200, 0.45);
}
.mail-screen[data-mail-theme="tactical"] .mail-desk-head,
.mail-screen[data-mail-theme="tactical"] .mail-desk-hint {
  border-color: rgba(160, 180, 120, 0.28);
  background: rgba(10, 14, 10, 0.55);
}
.mail-screen[data-mail-theme="urban"] .mail-desk-head,
.mail-screen[data-mail-theme="urban"] .mail-desk-hint,
.mail-screen[data-mail-theme="urban"] .mail-desk-inbox > .hint {
  border-color: rgba(220, 80, 160, 0.32);
  background: rgba(18, 6, 16, 0.55);
}
.mail-screen[data-mail-theme="urban"] .screen-head h2,
.mail-screen[data-mail-theme="urban"] .mail-desk-actions .btn {
  color: #f4d4ea;
  border-color: rgba(220, 80, 160, 0.45);
}
.mail-screen[data-mail-theme="western"] .mail-desk-head,
.mail-screen[data-mail-theme="western"] .mail-desk-hint {
  border-color: rgba(196, 140, 70, 0.32);
  background: rgba(22, 12, 4, 0.55);
}
.mail-screen[data-mail-theme="primitive"] .mail-desk-head,
.mail-screen[data-mail-theme="primitive"] .mail-desk-hint {
  border-color: rgba(160, 110, 60, 0.32);
  background: rgba(18, 12, 6, 0.55);
}
.mail-screen[data-mail-theme="musketeer"] .mail-desk-head,
.mail-screen[data-mail-theme="musketeer"] .mail-desk-hint {
  border-color: rgba(180, 140, 70, 0.32);
  background: rgba(16, 12, 6, 0.55);
}
@media (max-width: 520px) {
  .mail-war-desk-img {
    object-position: center 42%;
  }
  .panel.screen.mail-screen,
  .mail-screen {
    min-height: min(92vh, 960px);
    border-radius: 0;
  }
}
@media (min-width: 720px) {
  .mail-screen {
    min-height: min(90vh, 960px);
  }
  .mail-war-desk-img {
    object-position: center 50%;
  }
  .mail-war-desk-content {
    padding: 16px 20px 28px;
  }
}
.menu-ico.mail-ico,
.dock-ico.mail-ico {
  font-size: 0.95em;
  line-height: 1;
}

/* —— March room: full-bleed weapon / troop types for selected game —— */
.panel.screen.march-screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(72vh, 640px);
  border-radius: 12px;
  background: #0a100c !important;
  background-image: none !important;
  padding: 0 !important;
}
.march-troop-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
  pointer-events: none;
  overflow: hidden;
  min-height: 100%;
}
.march-troop-backdrop[data-count="1"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.march-troop-backdrop[data-count="2"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.march-troop-backdrop[data-count="3"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.15fr 0.85fr;
}
.march-troop-backdrop[data-count="3"] .march-troop-backdrop-img:nth-child(1) {
  grid-column: 1 / -1;
}
.march-troop-backdrop[data-count="5"],
.march-troop-backdrop[data-count="6"] {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.march-troop-backdrop-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center 22%;
  filter: saturate(1.08) contrast(1.06);
  transform: scale(1.02);
}
.march-troop-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(95% 70% at 50% 28%, rgba(6, 12, 8, 0.28) 0%, rgba(6, 12, 8, 0.52) 62%, rgba(4, 8, 6, 0.72) 100%),
    linear-gradient(180deg, rgba(8, 14, 10, 0.4) 0%, rgba(8, 14, 10, 0.18) 26%, rgba(4, 8, 6, 0.58) 100%);
}
.march-troop-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: inherit;
  padding: 14px 14px 18px;
  box-sizing: border-box;
}
.march-screen .screen-head h2 {
  color: #e8f2dc;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75), 0 0 18px rgba(120, 180, 90, 0.22);
}
.march-screen .screen-lead,
.march-screen .hint,
.march-screen .troop-heading,
.march-screen .troop-total {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.march-screen .troop-card,
.march-screen .march-preset-bar,
.march-screen .hero-pick-panel,
.march-screen .pet-pick-panel,
.march-screen .march-boosts-panel,
.march-screen .loadout-banner,
.march-screen .team-board > *,
.march-screen .tab-more,
.march-screen .troop-unit-switch {
  background: rgba(8, 14, 10, 0.78) !important;
  border-color: rgba(180, 210, 150, 0.28);
  backdrop-filter: blur(4px);
}
.march-screen label {
  background: rgba(8, 14, 10, 0.72);
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(180, 210, 150, 0.18);
}
.march-screen label.troop-count-custom {
  background: rgba(240, 193, 75, 0.08);
  border-color: rgba(240, 193, 75, 0.35);
  padding: 0 10px;
}
.march-screen .team-chip,
.march-screen .role-chip {
  background: rgba(12, 20, 14, 0.88);
  backdrop-filter: blur(3px);
}
.march-screen .troop-pct-chips .role-chip,
.march-screen .troop-count-chips .role-chip,
.march-screen .troop-count-scale .role-chip {
  flex: 0 0 auto;
  min-width: 2.7rem;
  min-height: 38px;
}
.march-screen .troop-count-scale .role-chip {
  flex: 1 1 0;
}
.march-screen .team-chip.on {
  color: #10200a;
  background: var(--accent, #c4f062) !important;
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(196, 240, 98, 0.45);
  font-weight: 800;
}
.march-screen .role-chip.on {
  border-color: rgba(196, 240, 98, 0.65);
  background: rgba(90, 143, 42, 0.35) !important;
  color: #e8ffc4;
  box-shadow: 0 0 0 2px rgba(196, 240, 98, 0.35);
}
.march-screen .march-preset-chip.on {
  border-color: rgba(196, 240, 98, 0.65);
  background: rgba(90, 143, 42, 0.42) !important;
  box-shadow: 0 0 0 2px rgba(196, 240, 98, 0.4);
}
.march-screen .timer-actions .btn {
  background: rgba(14, 24, 16, 0.9);
  border-color: rgba(180, 210, 150, 0.35);
  backdrop-filter: blur(4px);
}
@media (max-width: 520px) {
  .march-troop-backdrop-img {
    object-position: center 18%;
  }
}
@media (min-width: 720px) {
  .panel.screen.march-screen {
    min-height: min(78vh, 720px);
  }
  .march-troop-content {
    padding: 18px 20px 22px;
  }
}

.chat-order-msg-card.is-unread {
  border-color: rgba(212, 175, 55, 0.7);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25);
}
.chat-order-msg-card.chat-order-join {
  border-color: rgba(120, 180, 140, 0.45);
  background: linear-gradient(160deg, rgba(18, 36, 22, 0.55), rgba(8, 12, 8, 0.4));
}
.chat-order-msg-card.chat-order-offer {
  border-color: rgba(212, 175, 55, 0.45);
  background: linear-gradient(160deg, rgba(36, 28, 12, 0.55), rgba(12, 10, 6, 0.4));
}
.mail-order-offer-actions {
  margin-top: 8px;
}
.chat-order-join-title {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
}
.chat-order-join-body {
  margin: 0;
}


/* Help — how-to first + leader SEND rules */
.help-howto-master,
.help-leader-send-card {
  margin: 0 0 14px;
  padding: 12px 14px 14px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: linear-gradient(165deg, rgba(48, 32, 14, 0.55), rgba(16, 12, 8, 0.72));
}
.help-leader-send-card {
  border-color: rgba(220, 90, 60, 0.45);
  background: linear-gradient(165deg, rgba(70, 28, 16, 0.55), rgba(22, 10, 8, 0.78));
}
.help-howto-master .troop-heading,
.help-leader-send-card .troop-heading {
  margin-top: 0;
  color: #f0d48a;
}
.help-howto-steps {
  margin: 8px 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 8px;
  color: rgba(240, 230, 200, 0.95);
  font-size: 0.92rem;
  line-height: 1.4;
}
.help-leader-send-body {
  display: grid;
  gap: 10px;
  color: rgba(255, 230, 210, 0.95);
  font-size: 0.92rem;
  line-height: 1.45;
}
.help-leader-send-body p {
  margin: 0;
}
.help-links-howto {
  margin: 0 0 12px;
}
.help-extra-more {
  margin-top: 16px;
}
.help-bullets-block {
  opacity: 0.92;
}


/* Hero type badge next to name */
.hero-pick-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.hero-pick-cls {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #e8f5d8 !important;
  background: rgba(80, 120, 60, 0.55);
  border: 1px solid rgba(180, 220, 120, 0.4);
  white-space: nowrap;
}
.hero-pick-cls[data-cls*="infan"],
.hero-pick-cls[data-cls*="tank"],
.hero-pick-cls[data-cls*="fighter"],
.hero-pick-cls[data-cls*="ground"],
.hero-pick-cls[data-cls*="sword"] {
  background: rgba(140, 70, 30, 0.55);
  border-color: rgba(230, 160, 90, 0.45);
  color: #ffe0c0 !important;
}
.hero-pick-cls[data-cls*="cav"],
.hero-pick-cls[data-cls*="lancer"],
.hero-pick-cls[data-cls*="rider"],
.hero-pick-cls[data-cls*="mount"] {
  background: rgba(120, 90, 30, 0.55);
  border-color: rgba(230, 200, 90, 0.45);
  color: #fff0b8 !important;
}
.hero-pick-cls[data-cls*="arch"],
.hero-pick-cls[data-cls*="marks"],
.hero-pick-cls[data-cls*="range"],
.hero-pick-cls[data-cls*="hunt"],
.hero-pick-cls[data-cls*="shoot"],
.hero-pick-cls[data-cls*="bow"] {
  background: rgba(40, 110, 70, 0.55);
  border-color: rgba(120, 220, 150, 0.45);
  color: #c8ffd8 !important;
}
.hero-pick-cls[data-cls*="mage"],
.hero-pick-cls[data-cls*="fly"],
.hero-pick-cls[data-cls*="siege"],
.hero-pick-cls[data-cls*="missile"],
.hero-pick-cls[data-cls*="aircraft"],
.hero-pick-cls[data-cls*="vehicle"] {
  background: rgba(70, 50, 120, 0.55);
  border-color: rgba(180, 150, 240, 0.45);
  color: #e0d0ff !important;
}

/* Pet picker: image + name + type */
.pet-avatar {
  width: 156px;
  height: 156px;
  border-radius: 16px;
  object-fit: cover;
  object-position: center 20%;
  flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #0a100c;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
}
.pet-chip {
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  max-width: min(100%, 420px);
  padding: 8px 14px 8px 8px !important;
  border-radius: 16px !important;
}
.pet-pick-meta-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.pet-pick-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pet-pick-type[data-pet-type="utility"] {
  background: rgba(40, 90, 120, 0.55);
  border: 1px solid rgba(120, 180, 220, 0.45);
  color: #b8dff0;
}
.pet-pick-type[data-pet-type="combat"] {
  background: rgba(120, 50, 30, 0.55);
  border: 1px solid rgba(230, 120, 90, 0.45);
  color: #f0c0a8;
}
.pet-chip[data-pet-type="combat"] .pet-avatar {
  border-color: rgba(230, 120, 90, 0.5);
}
.pet-chip[data-pet-type="utility"] .pet-avatar {
  border-color: rgba(120, 180, 220, 0.5);
}

/* —— Castle night backdrop (dim, behind UI; per-tab scenes) —— */
.realm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
  --sky0: #142028;
  --sky1: #18241e;
  --sky2: #0c1210;
  --glow: rgba(196, 240, 98, 0.16);
  --glow-x: 78%;
  --glow-y: 16%;
  --moon-x: 82%;
  --moon-y: 11%;
  --moon-s: 44px;
  --fort-x: 0%;
  --fort-y: 0px;
  --fort-s: 1;
  --veil-top: 0.16;
  --veil-mid: 0.32;
  --veil-bot: 0.46;
  --t1x: 16%;
  --t1y: 44%;
  --t2x: 42%;
  --t2y: 50%;
  --t3x: 58%;
  --t3y: 50%;
  --t4x: 84%;
  --t4y: 44%;
  --flame: 1;
  --win: 0.78;
}
.realm-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at var(--glow-x) var(--glow-y), var(--glow), transparent 58%),
    linear-gradient(180deg, var(--sky0), var(--sky1) 42%, var(--sky2));
}
.realm-stars {
  position: absolute;
  inset: 0;
  opacity: 0.72;
  background-image:
    radial-gradient(1px 1px at 8% 12%, rgba(255, 255, 240, 0.7), transparent),
    radial-gradient(1px 1px at 18% 22%, rgba(255, 255, 240, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 28% 8%, rgba(255, 255, 240, 0.65), transparent),
    radial-gradient(1px 1px at 42% 16%, rgba(255, 255, 240, 0.4), transparent),
    radial-gradient(1px 1px at 58% 10%, rgba(255, 255, 240, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 71% 20%, rgba(255, 255, 240, 0.4), transparent),
    radial-gradient(1px 1px at 88% 7%, rgba(255, 255, 240, 0.6), transparent),
    radial-gradient(1px 1px at 93% 24%, rgba(255, 255, 240, 0.35), transparent),
    radial-gradient(1px 1px at 12% 32%, rgba(255, 255, 240, 0.3), transparent),
    radial-gradient(1px 1px at 64% 28%, rgba(255, 255, 240, 0.28), transparent);
}
.realm-moon {
  position: absolute;
  top: var(--moon-y);
  left: var(--moon-x);
  width: var(--moon-s);
  height: var(--moon-s);
  margin-left: calc(var(--moon-s) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8e4, #ddd6b0 62%, #9a9478);
  box-shadow: 0 0 36px 12px rgba(240, 232, 190, 0.38);
  opacity: 0.88;
}
.realm-glow {
  position: absolute;
  inset: auto 0 18% 0;
  height: 40%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 150, 50, 0.16), transparent 70%);
  opacity: var(--flame);
}
.realm-backdrop .realm-svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  height: min(52vh, 420px);
  display: block;
}
.rk-hills-b { fill: #24362c; }
.rk-hills-f { fill: #1c2a22; }
.rk-fill { fill: #2a3c32; }
.rk-gate { fill: #121814; }
.rk-merlon {
  fill: none;
  stroke: #2a3c32;
  stroke-width: 16;
  stroke-linejoin: miter;
}
.rk-win {
  fill: #c47820;
  opacity: var(--win);
  animation: realmWin 2.6s ease-in-out infinite alternate;
}
.rk-banner {
  fill: #3a5a22;
  opacity: 0;
}
.rk-camp {
  fill: #1e2c24;
  opacity: 0;
}
.rk-fort {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: translate(var(--fort-x), var(--fort-y)) scale(var(--fort-s));
  filter: drop-shadow(0 0 14px rgba(196, 240, 98, 0.16));
}
.realm-extra {
  position: absolute;
  inset: 0;
}
.realm-torches {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(52vh, 420px);
  opacity: var(--flame);
}
.torch {
  position: absolute;
  left: var(--tx, 50%);
  bottom: var(--ty, 30%);
  width: 5px;
  height: 18px;
  margin-left: -2px;
  background: #1a1208;
  border-radius: 1px;
}
.torch.t1 { --tx: var(--t1x); --ty: var(--t1y); }
.torch.t2 { --tx: var(--t2x); --ty: var(--t2y); }
.torch.t3 { --tx: var(--t3x); --ty: var(--t3y); }
.torch.t4 { --tx: var(--t4x); --ty: var(--t4y); }
.torch .flame {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 16px;
  height: 22px;
  margin-left: -8px;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 50% 72%, #fff6c8 0%, #ffb020 40%, #ff6a10 70%, transparent 80%);
  box-shadow: 0 0 16px 6px rgba(255, 130, 20, 0.5);
  transform-origin: 50% 100%;
  animation: realmFlicker 0.18s infinite alternate;
}
.torch.t2 .flame { animation-delay: 0.05s; }
.torch.t3 .flame { animation-delay: 0.11s; }
.torch.t4 .flame { animation-delay: 0.07s; }
.realm-mist {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 28%;
  background: linear-gradient(180deg, transparent, rgba(8, 14, 12, 0.28));
  opacity: 0.5;
}
.realm-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 10, 8, var(--veil-top)) 0%,
    rgba(6, 10, 8, var(--veil-mid)) 42%,
    rgba(6, 10, 8, var(--veil-bot)) 100%
  );
}

@keyframes realmFlicker {
  from { transform: scaleY(0.9) scaleX(0.88); opacity: 0.78; }
  to { transform: scaleY(1.08) scaleX(1.06); opacity: 1; }
}
@keyframes realmWin {
  from { opacity: 0.38; }
  to { opacity: 0.7; }
}

/* Per-game night tint so the castle scene is not the same Kingshot green on every title */
body[data-hero-game="ggw"] .realm-backdrop {
  --sky0: #2a1814;
  --sky1: #1c1210;
  --glow: rgba(232, 168, 72, 0.22);
}
body[data-hero-game="lastwar"] .realm-backdrop,
body[data-hero-game="lastz"] .realm-backdrop {
  --sky0: #142818;
  --sky1: #102010;
  --glow: rgba(80, 220, 140, 0.2);
}
body[data-hero-game="whiteout"] .realm-backdrop {
  --sky0: #142028;
  --sky1: #101820;
  --glow: rgba(160, 210, 240, 0.2);
}
body[data-hero-game="rok"] .realm-backdrop,
body[data-hero-game="cod"] .realm-backdrop {
  --sky0: #181428;
  --sky1: #12101c;
  --glow: rgba(180, 140, 240, 0.18);
}
body[data-hero-game="topwar"] .realm-backdrop,
body[data-hero-game="mstrike"] .realm-backdrop {
  --sky0: #1c1c14;
  --sky1: #141410;
  --glow: rgba(220, 200, 80, 0.18);
}

/* Timer — courtyard keep, clock-side moon */
body[data-screen="timer"] .realm-backdrop {
  --glow: rgba(196, 240, 98, 0.18);
  --moon-x: 84%;
  --veil-mid: 0.34;
}

/* Orders — war table, warmer, banners */
body[data-screen="orders"] .realm-backdrop {
  --sky0: #16120e;
  --sky1: #141510;
  --glow: rgba(240, 176, 96, 0.14);
  --glow-x: 30%;
  --moon-x: 18%;
  --fort-x: -6%;
  --t1x: 16%;
  --t4x: 78%;
}
body[data-screen="orders"] .rk-banner { opacity: 0.85; fill: #8a3a22; }

/* Rally mail — hall pennants */
body[data-screen="mail"] .realm-backdrop {
  --sky0: #121816;
  --glow: rgba(180, 210, 120, 0.14);
  --fort-s: 1.08;
  --t2y: 42%;
  --t3y: 42%;
}
body[data-screen="mail"] .rk-banner { opacity: 0.9; fill: #3d6a28; }

/* Deploy — dispatch lanterns, wider spacing */
body[data-screen="deploy"] .realm-backdrop {
  --sky0: #10160f;
  --glow: rgba(196, 240, 98, 0.16);
  --t1x: 12%;
  --t2x: 34%;
  --t3x: 66%;
  --t4x: 88%;
  --t1y: 26%;
  --t4y: 26%;
}

/* Lineup — barracks, lower wider fort */
body[data-screen="lineup"] .realm-backdrop {
  --sky0: #101410;
  --fort-s: 0.92;
  --fort-y: 18px;
  --t1y: 24%;
  --t4y: 24%;
}
body[data-screen="lineup"] .rk-camp { opacity: 0.9; }

/* My times — taller clock keep */
body[data-screen="mytimes"] .realm-backdrop {
  --moon-x: 50%;
  --moon-y: 8%;
  --fort-s: 1.18;
  --glow-x: 50%;
  --t2x: 46%;
  --t3x: 54%;
}

/* Alliance — green banners, hall */
body[data-screen="alliance"] .realm-backdrop {
  --sky0: #0e1812;
  --glow: rgba(90, 143, 42, 0.22);
  --fort-x: 4%;
}
body[data-screen="alliance"] .rk-banner { opacity: 1; fill: #5a8f2a; }

/* Whale — gold hall */
body[data-screen="whale"] .realm-backdrop {
  --sky0: #16140c;
  --sky1: #14120e;
  --glow: rgba(240, 200, 90, 0.18);
  --moon-s: 52px;
  --win: 0.8;
}
body[data-screen="whale"] .rk-win { fill: #e8c050; }
body[data-screen="whale"] .rk-banner { opacity: 0.9; fill: #c4a030; }

/* Cancel — dying embers */
body[data-screen="cancel"] .realm-backdrop {
  --sky0: #1a0c0c;
  --sky1: #120c0c;
  --glow: rgba(232, 93, 93, 0.16);
  --glow-x: 50%;
  --flame: 0.55;
  --win: 0.28;
  --veil-mid: 0.48;
}
body[data-screen="cancel"] .torch .flame {
  background: radial-gradient(circle at 50% 72%, #f0c090 0%, #c05020 50%, #601010 78%, transparent 86%);
}

/* City — wide walls */
body[data-screen="city"] .realm-backdrop {
  --sky0: #10161a;
  --fort-s: 1.22;
  --fort-y: 8px;
  --t1x: 10%;
  --t4x: 90%;
  --glow: rgba(120, 160, 180, 0.1);
}

/* Incoming — red gate, castle right */
body[data-screen="liveIn"] .realm-backdrop {
  --sky0: #1a1010;
  --glow: rgba(232, 93, 93, 0.2);
  --glow-x: 22%;
  --fort-x: 18%;
  --moon-x: 14%;
  --t1x: 48%;
  --t2x: 62%;
  --t3x: 76%;
  --t4x: 88%;
}

/* Outgoing — green march, castle left */
body[data-screen="liveOut"] .realm-backdrop {
  --sky0: #0e1812;
  --glow: rgba(196, 240, 98, 0.18);
  --glow-x: 80%;
  --fort-x: -16%;
  --moon-x: 88%;
  --t1x: 8%;
  --t2x: 22%;
  --t3x: 36%;
  --t4x: 50%;
}

/* Map — distant keep */
body[data-screen="map"] .realm-backdrop {
  --sky0: #0c141c;
  --fort-s: 0.58;
  --fort-y: 36px;
  --moon-s: 36px;
  --t1y: 22%;
  --t2y: 26%;
  --t3y: 26%;
  --t4y: 22%;
  --veil-top: 0.22;
  --flame: 0.7;
}

/* March / teams — camp tents */
body[data-screen="teams"] .realm-backdrop {
  --sky0: #12180f;
  --glow: rgba(240, 176, 96, 0.12);
  --glow-x: 50%;
  --glow-y: 70%;
  --fort-s: 0.82;
  --fort-y: 22px;
  --t1x: 12%;
  --t2x: 28%;
  --t3x: 72%;
  --t4x: 88%;
  --t1y: 18%;
  --t4y: 18%;
}
body[data-screen="teams"] .rk-camp { opacity: 1; }

/* Alerts — watchtower */
body[data-screen="alerts"] .realm-backdrop {
  --sky0: #0e1218;
  --fort-s: 1.28;
  --moon-x: 22%;
  --t2x: 48%;
  --t3x: 52%;
  --glow: rgba(240, 176, 96, 0.12);
}

/* You — close chamber wall */
body[data-screen="you"] .realm-backdrop {
  --sky0: #101410;
  --fort-s: 1.45;
  --fort-y: -20px;
  --veil-mid: 0.42;
  --veil-bot: 0.58;
  --win: 0.7;
  --t1x: 28%;
  --t4x: 72%;
}

/* Chat — tavern warm */
body[data-screen="chat"] .realm-backdrop,
body.chat-fs .realm-backdrop {
  --sky0: #1a140e;
  --sky1: #14100c;
  --glow: rgba(240, 160, 70, 0.16);
  --glow-y: 60%;
  --fort-s: 1.2;
  --veil-mid: 0.44;
  --veil-bot: 0.6;
  --t1y: 22%;
  --t4y: 22%;
}

/* Calcs — scriptorium moonlight */
body[data-screen="calc"] .realm-backdrop {
  --sky0: #0c141c;
  --sky1: #0e1618;
  --glow: rgba(120, 170, 210, 0.12);
  --moon-x: 16%;
  --veil-mid: 0.42;
  --flame: 0.65;
}
body[data-screen="calc"] .rk-win { fill: #8ec4e0; }

/* Tips — campfire, distant keep */
body[data-screen="tips"] .realm-backdrop {
  --sky0: #14100c;
  --glow: rgba(255, 140, 40, 0.2);
  --glow-x: 50%;
  --glow-y: 78%;
  --fort-s: 0.7;
  --fort-y: 28px;
  --t2x: 48%;
  --t3x: 52%;
  --t2y: 16%;
  --t3y: 16%;
}
body[data-screen="tips"] .rk-camp { opacity: 0.85; }

/* Heroes — throne keep */
body[data-screen="heroes"] .realm-backdrop {
  --sky0: #141210;
  --glow: rgba(232, 200, 120, 0.16);
  --fort-s: 1.25;
  --win: 0.85;
  --moon-s: 50px;
}
body[data-screen="heroes"] .rk-win { fill: #e8c878; }
body[data-screen="heroes"] .rk-banner { opacity: 0.8; fill: #a08030; }

/* Help — quiet chapel moonlight */
body[data-screen="help"] .realm-backdrop {
  --sky0: #0e1218;
  --glow: rgba(200, 210, 230, 0.1);
  --moon-x: 50%;
  --moon-s: 40px;
  --flame: 0.45;
  --veil-mid: 0.4;
  --fort-s: 0.9;
}

/* More sheet — armory hall */
body.dock-more-open .realm-backdrop {
  --sky0: #12180f;
  --glow: rgba(196, 240, 98, 0.14);
  --fort-s: 1.1;
  --veil-top: 0.28;
  --veil-mid: 0.4;
  --t1x: 14%;
  --t2x: 38%;
  --t3x: 62%;
  --t4x: 86%;
}
body.dock-more-open .rk-banner { opacity: 0.85; fill: #5a8f2a; }
body.dock-more-open .dock-more-panel {
  background: rgba(12, 18, 14, 0.96);
}

body.has-realm .screen-lead,
body.has-realm .screen-one-line,
body.has-realm .hint {
  color: #b7c8b6;
}
body.has-realm .live-clock,
body.has-realm .screen-head h2,
body.has-realm .screen-head .live-heading {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

body.legal-body {
  --sky0: #0e1218;
  background:
    radial-gradient(700px 320px at 82% 8%, rgba(220, 220, 200, 0.08), transparent 55%),
    linear-gradient(180deg, #0e1218, #0a100c 45%, #070a08);
}

@media (prefers-reduced-motion: reduce) {
  .torch .flame,
  .rk-win {
    animation: none;
  }
}

/* Per-tab how-tos / step rails disabled */
.howto-card,
.howto-card-mini,
.tab-flow-host,
.tab-stay-bar,
.howto-sections-block {
  display: none !important;
}