:root {
  color-scheme: dark;
  --bg: #0b0d12;
  --panel: #141821;
  --panel-2: #191e29;
  --text: #f4f6fb;
  --muted: #99a2b3;
  --border: rgba(255,255,255,.08);
  --accent: #7a6cff;
  --accent-2: #39d7b7;
  --health: #48d99a;
  --work: #7f8cff;
  --chores: #ffb45f;
  --danger: #ff6d7a;
  --shadow: 0 18px 55px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% -10%, rgba(122,108,255,.19), transparent 32rem),
    radial-gradient(circle at 85% 5%, rgba(57,215,183,.10), transparent 28rem),
    var(--bg);
}
button, input, select { font: inherit; }
button { color: inherit; }

.app-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 60px;
}

.topbar,
.section-head,
.panel-head,
.settings-head,
.settings-section-head,
.category-head,
.field-row,
.weight-row,
.action-editor-row,
.log-row,
.history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar { margin-bottom: 28px; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: 3px; font-size: clamp(1.65rem, 4vw, 2.35rem); letter-spacing: -.04em; }

.brand-title {
  width: fit-content;
  margin-bottom: 1px;
  font-weight: 900;
  background: linear-gradient(100deg, #f4f1ff 0%, #a99fff 45%, #67dfc8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 28px rgba(122,108,255,.16);
}

.app-version {
  margin-bottom: 4px;
  color: #7e8799;
  font-size: .63rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
h2 { margin-bottom: 0; font-size: 1.18rem; letter-spacing: -.025em; }
h3 { margin-bottom: 0; }
.eyebrow { font-size: .68rem; letter-spacing: .16em; font-weight: 800; color: #8f98aa; margin-bottom: 5px; }
.muted { color: var(--muted); }

.icon-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  font-size: 1.25rem;
}
.icon-button:hover { background: rgba(255,255,255,.08); }
.icon-button:focus-visible,
.action-button:focus-visible,
.primary-button:focus-visible,
.secondary-button:focus-visible,
.undo-button:focus-visible,
.edit-action:focus-visible,
.delete-action:focus-visible,
.action-edit-cancel:focus-visible,
.action-edit-apply:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(122,108,255,.32);
  outline-offset: 2px;
}

.hero-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  overflow: hidden;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(122,108,255,.13), rgba(57,215,183,.05)),
    var(--panel);
  box-shadow: var(--shadow);
}
.hero-card::after {
  content: "";
  position: absolute;
  inset: auto -70px -95px auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(122,108,255,.10);
  filter: blur(8px);
}
.hero-copy { align-self: center; min-width: 0; z-index: 1; }
.status-badge {
  display: inline-flex;
  padding: 6px 9px;
  border: 1px solid rgba(122,108,255,.28);
  border-radius: 999px;
  background: rgba(122,108,255,.11);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  color: #b9b2ff;
}
.hero-card h2 { margin: 12px 0 8px; font-size: clamp(2.4rem, 8vw, 4.7rem); letter-spacing: -.07em; line-height: .95; }
.hero-goal { font-size: .45em; color: #a7afbd; letter-spacing: -.035em; }
.hero-copy p { margin-bottom: 0; }

.xp-orb-wrap { align-self: center; z-index: 1; }
.xp-orb {
  --progress: 0deg;
  width: 126px;
  height: 126px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--accent-2) var(--progress), rgba(255,255,255,.08) 0);
  box-shadow: inset 0 0 30px rgba(255,255,255,.04);
}
.xp-orb::before {
  content: "";
  width: 102px;
  height: 102px;
  border-radius: 50%;
  background: #11151d;
  position: absolute;
}
.xp-orb-inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; }
.xp-orb-inner strong { font-size: 1.45rem; }
.xp-orb-inner span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }

.hero-progress {
  grid-column: 1 / -1;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}
.hero-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .28s ease;
}

.victory-banner {
  margin-top: 16px;
  padding: 16px 18px;
  display: flex;
  gap: 13px;
  align-items: center;
  border: 1px solid rgba(57,215,183,.26);
  background: rgba(57,215,183,.08);
  border-radius: 18px;
}
.victory-banner[hidden] { display: none; }
.victory-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(57,215,183,.16); color: #7de7d0; }
.victory-banner strong, .victory-banner span { display: block; }
.victory-banner span { margin-top: 2px; color: #b7c4c0; font-size: .9rem; }

.section-head { margin: 34px 0 14px; align-items: flex-end; }
.balance-note { color: var(--muted); font-size: .83rem; text-align: right; }
.categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 16px; }

.category-card {
  --category-color: var(--accent);
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), var(--panel);
}
.category-title-wrap { display: flex; gap: 11px; align-items: center; min-width: 0; }
.category-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--category-color) 17%, transparent); font-size: 1.18rem; flex: 0 0 auto; }
.category-title { font-size: 1rem; }
.category-subtitle { color: var(--muted); font-size: .75rem; margin-top: 2px; }
.category-score { font-weight: 850; font-size: .9rem; white-space: nowrap; }
.category-meter { height: 7px; margin: 15px 0 17px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.07); }
.category-meter-fill { width: 0; height: 100%; border-radius: inherit; background: var(--category-color); transition: width .25s ease; }
.actions-list { display: grid; gap: 8px; }
.action-button {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.action-button:hover { background: rgba(255,255,255,.065); border-color: color-mix(in srgb, var(--category-color) 28%, rgba(255,255,255,.09)); }
.action-button:active { transform: scale(.985); }
.action-button[disabled] { opacity: .46; cursor: default; }
.action-name { min-width: 0; }
.action-name strong { display: block; font-size: .88rem; }
.action-name small { display: block; margin-top: 2px; color: var(--muted); font-size: .68rem; }
.action-xp { color: var(--category-color); font-weight: 900; white-space: nowrap; }

.lower-grid { margin-top: 16px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
.panel { border: 1px solid var(--border); border-radius: 22px; background: var(--panel); padding: 20px; min-width: 0; }
.panel-head { margin-bottom: 10px; }
.log-list, .history-list { display: grid; }
.log-row, .history-row { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.log-row:last-child, .history-row:last-child { border-bottom: 0; }
.log-main { min-width: 0; }
.log-main strong { display: block; font-size: .87rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-main span { display: block; margin-top: 2px; color: var(--muted); font-size: .72rem; }
.log-actions { display: flex; align-items: center; gap: 10px; }
.log-xp { font-weight: 850; color: #c9c5ff; white-space: nowrap; }
.undo-button { border: 0; border-radius: 9px; background: rgba(255,255,255,.055); color: #adb5c4; padding: 6px 8px; cursor: pointer; font-size: .72rem; }
.undo-button:hover { background: rgba(255,109,122,.11); color: #ff9da7; }
.empty-state { color: var(--muted); font-size: .84rem; padding: 16px 0 7px; }
.history-date strong { display: block; font-size: .86rem; }
.history-date span { display: block; margin-top: 2px; font-size: .72rem; color: var(--muted); }
.history-score { font-weight: 850; text-align: right; }
.history-score span { display: block; font-size: .7rem; color: var(--muted); margin-top: 2px; }
.win-mark { color: #69dfc6; }

.settings-dialog {
  width: min(780px, calc(100% - 24px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  background: #10131a;
  color: var(--text);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.settings-dialog::backdrop { background: rgba(3,5,9,.72); backdrop-filter: blur(6px); }
.settings-card { padding: 24px; }
.settings-head { position: sticky; top: -24px; z-index: 5; margin: -24px -24px 0; padding: 24px; background: linear-gradient(#10131a 80%, rgba(16,19,26,0)); }
.settings-section { padding: 21px 0; border-top: 1px solid var(--border); }
.settings-section h3 { font-size: 1rem; }
.settings-section p { color: var(--muted); font-size: .78rem; margin: 5px 0 0; }
.field-row strong, .field-row small { display: block; }
.field-row small { color: var(--muted); margin-top: 3px; }
input, select {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 11px;
  background: #171b24;
  color: var(--text);
  padding: 8px 10px;
}
#goalInput { width: 105px; text-align: right; }
.categories-editor, .actions-editor { display: grid; gap: 9px; margin-top: 13px; }
.weight-row, .action-editor-row { padding: 11px 12px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.05); }
.weight-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.weight-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.05); }
.weight-controls { display: flex; align-items: center; gap: 8px; }
.weight-controls input { width: 82px; }
.weight-requirement { color: var(--muted); font-size: .74rem; min-width: 92px; text-align: right; }

.category-editor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.category-editor-row.is-editing {
  padding: 14px;
  border-color: rgba(122,108,255,.22);
  background: rgba(122,108,255,.055);
}
.category-editor-row.is-fallback {
  border-style: dashed;
  background: rgba(255,255,255,.018);
}
.category-editor-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.category-editor-main > div { min-width: 0; }
.category-editor-main strong {
  display: block;
  font-size: .85rem;
}
.category-editor-main span:not(.category-editor-icon) {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .72rem;
}
.category-editor-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: rgba(255,255,255,.055);
}
.category-editor-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.category-requirement {
  min-width: 92px;
  color: var(--muted);
  font-size: .72rem;
  text-align: right;
  white-space: nowrap;
}
.category-inline-editor {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) minmax(74px, .45fr) minmax(90px, .55fr) minmax(105px, .7fr) auto;
  gap: 9px;
  align-items: end;
}
.category-inline-editor label { min-width: 0; }
.category-inline-editor label > span {
  display: block;
  margin: 0 0 5px 2px;
  color: var(--muted);
  font-size: .68rem;
}
.category-inline-editor input { width: 100%; }
.category-edit-summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.category-edit-buttons {
  display: flex;
  align-items: center;
  gap: 7px;
}
.is-fallback-category {
  border-style: dashed;
  background: linear-gradient(180deg, rgba(255,255,255,.015), transparent), var(--panel);
}
.category-meter[hidden] { display: none; }
.action-editor-main { min-width: 0; }
.action-editor-main strong { display: block; font-size: .85rem; }
.action-editor-main span { display: block; color: var(--muted); font-size: .72rem; margin-top: 2px; }
.action-editor-controls { display: flex; align-items: center; gap: 8px; }
.action-editor-xp { white-space: nowrap; font-weight: 750; }
.edit-action, .action-edit-cancel, .action-edit-apply {
  min-height: 36px;
  border-radius: 10px;
  padding: 7px 11px;
  cursor: pointer;
  font-weight: 750;
}
.edit-action, .action-edit-cancel {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.055);
}
.edit-action:hover, .action-edit-cancel:hover { background: rgba(255,255,255,.09); }
.action-edit-apply {
  border: 1px solid rgba(122,108,255,.32);
  background: rgba(122,108,255,.17);
  color: #d7d3ff;
}
.action-edit-apply:hover { background: rgba(122,108,255,.25); }
.delete-action { width: 36px; height: 36px; border: 1px solid rgba(255,109,122,.12); border-radius: 10px; background: rgba(255,109,122,.06); color: #ff9da7; cursor: pointer; }
.delete-action:hover { background: rgba(255,109,122,.12); }
.action-editor-row.is-editing {
  padding: 14px;
  border-color: rgba(122,108,255,.22);
  background: rgba(122,108,255,.055);
}
.action-inline-editor {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) minmax(120px, .9fr) minmax(72px, .45fr) minmax(125px, .8fr) auto;
  gap: 9px;
  align-items: end;
}
.action-inline-editor label { min-width: 0; }
.action-inline-editor label > span { display: block; color: var(--muted); font-size: .68rem; margin: 0 0 5px 2px; }
.action-inline-editor input, .action-inline-editor select { width: 100%; }
.action-edit-buttons { display: flex; align-items: center; gap: 7px; }
.add-action-card,
.add-category-card { margin-top: 15px; padding: 16px; border: 1px dashed rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.02); }
.add-action-card h4,
.add-category-card h4 { margin-bottom: 12px; }
.add-action-grid { display: grid; grid-template-columns: 1.5fr 1fr .65fr 1fr; gap: 10px; }
.add-category-grid { display: grid; grid-template-columns: 1.5fr .45fr .65fr; gap: 10px; }
.add-action-grid label span,
.add-category-grid label span { display: block; color: var(--muted); font-size: .7rem; margin-bottom: 5px; }
.add-action-grid input, .add-action-grid select,
.add-category-grid input { width: 100%; }
.category-fallback-note { margin-top: 10px !important; }
.primary-button, .secondary-button {
  min-height: 44px;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}
.primary-button { border: 0; background: linear-gradient(90deg, #796cff, #58cdb8); color: white; }
.secondary-button { margin-top: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.055); }
.settings-message { min-height: 18px; color: #ff9da7; font-size: .75rem; margin-top: 8px; }
.settings-footer { display: flex; justify-content: flex-end; padding-top: 4px; }

@keyframes pulseVictory {
  0% { transform: scale(1); }
  45% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.victory-pop { animation: pulseVictory .42s ease; }

@media (max-width: 880px) {
  .categories-grid { grid-template-columns: 1fr; }
  .lower-grid { grid-template-columns: 1fr; }
  .add-action-grid, .add-category-grid { grid-template-columns: 1fr 1fr; }
  .action-inline-editor, .category-inline-editor { grid-template-columns: 1fr 1fr; }
  .category-edit-summary { justify-content: flex-start; }
  .category-edit-buttons { grid-column: 1 / -1; justify-content: flex-end; }
  .action-edit-name { grid-column: 1 / -1; }
  .action-edit-buttons { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 620px) {
  .app-shell { width: min(100% - 20px, 1180px); padding-top: 16px; }
  .hero-card { padding: 21px; grid-template-columns: 1fr; }
  .xp-orb-wrap { position: absolute; right: 18px; top: 20px; opacity: .88; }
  .xp-orb { width: 90px; height: 90px; }
  .xp-orb::before { width: 72px; height: 72px; }
  .xp-orb-inner strong { font-size: 1.05rem; }
  .hero-copy { padding-right: 92px; }
  .hero-card h2 { font-size: 3rem; }
  .section-head { display: block; }
  .balance-note { margin-top: 7px; text-align: left; }
  .category-card, .panel { padding: 16px; }
  .field-row, .weight-row, .action-editor-row, .category-editor-row { align-items: flex-start; }
  .weight-row { flex-wrap: wrap; }
  .weight-requirement { width: 100%; text-align: left; padding-left: 39px; }
  .category-editor-row, .action-editor-row { flex-direction: column; }
  .category-editor-main { width: 100%; }
  .category-editor-controls { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .category-requirement { margin-right: auto; text-align: left; }
  .action-editor-row { flex-direction: column; }
  .action-editor-controls { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .action-editor-main { width: 100%; }
  .action-editor-xp { margin-right: auto; }
  .action-inline-editor, .category-inline-editor { grid-template-columns: 1fr; }
  .action-edit-name, .action-edit-buttons, .category-edit-buttons { grid-column: auto; }
  .action-edit-buttons, .category-edit-buttons { justify-content: stretch; }
  .action-edit-buttons button, .category-edit-buttons button { flex: 1; min-height: 44px; }
  .category-edit-summary { min-height: 0; justify-content: flex-start; }
  .add-action-grid, .add-category-grid { grid-template-columns: 1fr; }
  .settings-card { padding: 18px; }
  .settings-head { top: -18px; margin: -18px -18px 0; padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}


/* Account + cloud sync */
.account-zone {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sync-status {
  color: var(--muted);
  font-size: .72rem;
  white-space: nowrap;
}

.sync-status[data-kind="ok"] { color: #69dfc6; }
.sync-status[data-kind="warning"] { color: #e8c56c; }
.sync-status[data-kind="error"] { color: #ff9da7; }

.account-button {
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  color: var(--text);
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 750;
}

.account-button:hover { background: rgba(255,255,255,.08); }

.login-dialog {
  width: min(420px, calc(100% - 24px));
  padding: 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: #10131a;
  color: var(--text);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}

.login-dialog::backdrop {
  background: rgba(3,5,9,.72);
  backdrop-filter: blur(6px);
}

.login-card {
  display: grid;
  gap: 15px;
  padding: 24px;
}

.login-card h2,
.login-card p {
  margin-bottom: 0;
}

.login-field span {
  display: block;
  margin: 0 0 6px 2px;
  color: var(--muted);
  font-size: .75rem;
}

.login-field input {
  width: 100%;
}

.login-message {
  min-height: 18px;
  color: #ff9da7;
  font-size: .78rem;
}

.login-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.login-buttons .secondary-button {
  margin-top: 0;
}

@media (max-width: 620px) {
  .topbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .account-zone {
    order: 3;
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }
}


/* Friendly account flow */
.account-button-secondary {
  background: transparent;
  color: var(--muted);
}

.account-button:disabled,
.primary-button:disabled,
.secondary-button:disabled,
.danger-button:disabled,
.small-button:disabled {
  opacity: .5;
  cursor: default;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}

.auth-tab {
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 800;
}

.auth-tab.is-active {
  background: rgba(122,108,255,.16);
  color: var(--text);
}

.remember-row {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: .8rem;
  cursor: pointer;
}

.remember-row input {
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0;
  accent-color: var(--accent);
}

.account-dialog {
  width: min(500px, calc(100% - 24px));
}

.invite-section {
  display: grid;
  gap: 11px;
  margin-top: 2px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}

.invite-section h3 {
  font-size: .95rem;
}

.invite-section p {
  margin-bottom: 0;
  font-size: .78rem;
}

.invite-section > .secondary-button {
  width: fit-content;
  margin-top: 0;
}

.generated-invite {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.generated-invite[hidden] {
  display: none;
}

.generated-invite input {
  width: 100%;
  min-width: 0;
  font-size: .76rem;
}

.generated-invite .secondary-button {
  margin-top: 0;
}

.generated-invite small {
  grid-column: 1 / -1;
}

.invite-list {
  display: grid;
  gap: 7px;
}

.invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.055);
}

.invite-row-copy {
  min-width: 0;
}

.invite-row-copy strong,
.invite-row-copy span {
  display: block;
}

.invite-row-copy strong {
  font-size: .8rem;
}

.invite-row-copy span {
  margin-top: 2px;
  font-size: .7rem;
}

.small-button,
.danger-button {
  border-radius: 10px;
  cursor: pointer;
  font-weight: 800;
}

.small-button {
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  color: var(--muted);
}

.small-button:hover {
  background: rgba(255,255,255,.075);
  color: var(--text);
}

.danger-button {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(255,109,122,.20);
  background: rgba(255,109,122,.08);
  color: #ff9da7;
}

.danger-button:hover {
  background: rgba(255,109,122,.14);
}

@media (max-width: 620px) {
  .account-zone {
    flex-wrap: wrap;
  }

  .account-zone .sync-status {
    margin-right: auto;
  }

  .generated-invite {
    grid-template-columns: 1fr;
  }

  .generated-invite .secondary-button {
    width: 100%;
  }

  .invite-row {
    align-items: flex-start;
  }
}


/* -------------------------------------------------------------------------- */
/* Crestfallen progression build v3                                            */
/* -------------------------------------------------------------------------- */

:root {
  --ink: #090b10;
  --paper: #e8dec8;
  --paper-ink: #28221b;
  --street-yellow: #f1ca5a;
  --street-pink: #ff789a;
}

body {
  background:
    radial-gradient(circle at 12% -8%, rgba(122,108,255,.22), transparent 32rem),
    radial-gradient(circle at 88% 2%, rgba(57,215,183,.13), transparent 28rem),
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 20rem),
    var(--bg);
}

.city-noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .24;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.13) 0 1px, transparent 1.2px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000, transparent 60%);
}

.brand-block { min-width: 0; }
.brand-title {
  position: relative;
  transform: rotate(-1.1deg);
  font-size: clamp(2rem, 5vw, 2.75rem);
  text-shadow:
    2px 3px 0 rgba(0,0,0,.55),
    0 0 28px rgba(122,108,255,.18);
}
.brand-subline {
  margin: -1px 0 4px;
  color: #b3bac7;
  font-size: .78rem;
  font-weight: 650;
}

.hero-card {
  border-width: 2px;
  border-color: rgba(255,255,255,.10);
  box-shadow:
    0 18px 55px rgba(0,0,0,.28),
    5px 6px 0 rgba(0,0,0,.18);
}
.hero-sticker {
  position: absolute;
  right: 178px;
  top: 18px;
  z-index: 2;
  padding: 5px 9px;
  border: 2px solid rgba(241,202,90,.65);
  border-radius: 5px;
  color: var(--street-yellow);
  font-size: .64rem;
  font-weight: 950;
  letter-spacing: .12em;
  transform: rotate(5deg);
  background: rgba(13,15,21,.76);
}

.status-badge {
  border-width: 2px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.25);
}

.progression-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(190px, .65fr) minmax(220px, .8fr);
  gap: 12px;
}

.rank-card,
.mini-stat-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 19px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    var(--panel);
  box-shadow: 3px 4px 0 rgba(0,0,0,.16);
}

.rank-card {
  min-height: 142px;
  padding: 20px 128px 18px 20px;
  border-color: rgba(241,202,90,.18);
  background:
    radial-gradient(circle at 100% 0, rgba(241,202,90,.10), transparent 12rem),
    linear-gradient(135deg, rgba(122,108,255,.10), transparent 65%),
    var(--panel);
}

.rank-eyebrow { color: #d3b95e; }
.rank-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.rank-name {
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.street-cred {
  color: #d8c77f;
  font-weight: 850;
  white-space: nowrap;
}
.rank-meter,
.mini-meter {
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}
.rank-meter {
  height: 8px;
  margin-top: 14px;
}
.rank-meter-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #a691ff, var(--street-yellow));
  transition: width .28s ease;
}
.rank-hint {
  margin-top: 8px;
  color: var(--muted);
  font-size: .73rem;
}
.rank-stamp {
  position: absolute;
  right: -13px;
  top: 39px;
  width: 132px;
  padding: 9px 7px;
  border: 3px solid rgba(241,202,90,.34);
  color: rgba(241,202,90,.52);
  font-size: .78rem;
  font-weight: 1000;
  letter-spacing: .12em;
  text-align: center;
  transform: rotate(11deg);
  border-radius: 7px;
}

.mini-stat-card {
  padding: 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  gap: 11px;
}
.mini-stat-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(122,108,255,.12);
  font-size: 1rem;
}
.mini-stat-value {
  display: block;
  margin-top: 1px;
  font-size: 1.45rem;
  line-height: 1;
}
.mini-stat-note {
  margin-top: 4px;
  color: var(--muted);
  font-size: .7rem;
}
.mini-meter {
  grid-column: 1 / -1;
  height: 6px;
  margin-top: 3px;
}
.mini-meter-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.streak-caption {
  grid-column: 1 / -1;
  align-self: end;
  color: #8e96a5;
  font-size: .66rem;
  line-height: 1.35;
}

.victory-banner {
  position: relative;
  border-width: 2px;
  box-shadow: 3px 4px 0 rgba(0,0,0,.17);
}
.victory-copy { min-width: 0; flex: 1; }
.report-button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(57,215,183,.34);
  border-radius: 11px;
  background: rgba(57,215,183,.12);
  color: #9af0de;
  cursor: pointer;
  font-weight: 850;
}
.report-button:hover { background: rgba(57,215,183,.19); }

.category-card {
  border-width: 2px;
  box-shadow: 3px 4px 0 rgba(0,0,0,.14);
}
.category-card:nth-child(3n + 1) { transform: rotate(-.12deg); }
.category-card:nth-child(3n + 2) { transform: rotate(.10deg); }

.category-score {
  color: var(--category-color);
  font-size: .95rem;
}
.efficiency-row {
  margin: 14px 0 17px;
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.045);
}
.efficiency-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}
.efficiency-label {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.efficiency-value {
  color: var(--category-color);
  font-size: .82rem;
}
.efficiency-row .category-meter {
  margin: 8px 0 6px;
  height: 5px;
}
.efficiency-next {
  color: #858e9e;
  font-size: .65rem;
}
.action-xp {
  min-width: 45px;
  text-align: right;
  font-size: .95rem;
}
.action-button {
  border-width: 1px;
}
.action-button:hover {
  transform: translateY(-1px) rotate(-.12deg);
  box-shadow: 2px 3px 0 rgba(0,0,0,.16);
}
.action-button[disabled]:hover {
  transform: none;
  box-shadow: none;
}

.history-row-button {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.history-row-button:hover {
  padding-left: 7px;
  padding-right: 7px;
  background: rgba(255,255,255,.025);
}
.history-row-button .history-score { margin-left: auto; }

/* Day report / newspaper */
.day-card-dialog {
  width: min(650px, calc(100vw - 20px));
  max-height: calc(100dvh - 16px);
  padding: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--paper-ink);
  box-shadow: 0 30px 100px rgba(0,0,0,.68);
}
.day-card-dialog::backdrop {
  background: rgba(4,5,8,.78);
  backdrop-filter: blur(5px);
}
.day-card {
  position: relative;
  width: calc(100% - 4px);
  margin: 2px auto;
  overflow: hidden;
  box-sizing: border-box;
  padding: clamp(22px, 5vw, 38px);
  border: 3px solid #b5a98e;
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 5%, rgba(255,255,255,.65), transparent 15rem),
    repeating-linear-gradient(0deg, rgba(65,51,34,.025) 0 1px, transparent 1px 4px),
    var(--paper);
  color: var(--paper-ink);
  transform: rotate(-.25deg);
}
.day-card::after {
  content: "APPROVED";
  position: absolute;
  right: -17px;
  bottom: 84px;
  padding: 8px 16px;
  border: 4px solid rgba(136,50,46,.32);
  color: rgba(136,50,46,.38);
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 1000;
  letter-spacing: .14em;
  transform: rotate(-13deg);
}
.newspaper-masthead {
  padding-bottom: 12px;
  border-bottom: 4px double #4a4034;
  text-align: center;
}
.newspaper-masthead span,
.newspaper-masthead strong,
.newspaper-masthead small {
  display: block;
}
.newspaper-masthead span {
  font-size: .62rem;
  letter-spacing: .32em;
}
.newspaper-masthead strong {
  margin: 1px 0 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 7vw, 3.35rem);
  line-height: .95;
  letter-spacing: -.045em;
}
.newspaper-masthead small {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .11em;
}
.day-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 10px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.day-type-stamp {
  width: fit-content;
  margin: 23px auto 17px;
  padding: 6px 10px;
  border: 3px solid #484037;
  border-radius: 4px;
  font-size: .69rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-align: center;
  transform: rotate(-1.4deg);
}
.day-card-headline {
  max-width: 13em;
  margin: 0 auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 6vw, 3rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-align: center;
  text-transform: uppercase;
}
.day-card-copy {
  max-width: 34em;
  margin: 18px auto 0;
  color: #4d4439;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}
.day-card-footer {
  margin-top: 30px;
  padding-top: 13px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  border-top: 2px solid #776b5a;
}
.day-card-footer span,
.day-card-footer strong { display: block; }
.day-card-footer span {
  font-size: .59rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.day-card-footer strong { margin-top: 2px; }
.newspaper-button {
  min-height: 40px;
  padding: 8px 12px;
  border: 2px solid #4b4135;
  border-radius: 4px;
  background: transparent;
  color: #342d26;
  cursor: pointer;
  font-weight: 900;
}
.newspaper-button:hover { background: rgba(75,65,53,.08); }

/* Settings v3 */
.settings-dialog {
  width: min(880px, calc(100% - 24px));
}
.category-direct-editor,
.action-direct-editor {
  width: 100%;
  display: grid;
  gap: 9px;
  align-items: end;
}
.category-direct-editor {
  grid-template-columns: minmax(160px, 1.5fr) 80px 92px minmax(120px, .8fr) 38px;
}
.action-direct-editor {
  grid-template-columns: minmax(180px, 1.5fr) minmax(125px, .8fr) 90px 125px 38px;
}
.category-direct-editor label,
.action-direct-editor label { min-width: 0; }
.category-direct-editor label > span,
.action-direct-editor label > span {
  display: block;
  margin: 0 0 5px 2px;
  color: var(--muted);
  font-size: .67rem;
}
.category-direct-editor input,
.action-direct-editor input,
.action-direct-editor select {
  width: 100%;
}
.category-band-preview {
  min-height: 42px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: .69rem;
}
.category-editor-row,
.action-editor-row {
  padding: 12px;
}
.danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.danger-zone > div { min-width: 0; }
.danger-zone .danger-button { flex: 0 0 auto; }
.settings-message {
  color: #e6c86c;
}

@media (max-width: 980px) {
  .progression-grid {
    grid-template-columns: 1fr 1fr;
  }
  .rank-card { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .category-direct-editor,
  .action-direct-editor {
    grid-template-columns: 1fr 1fr;
  }
  .category-band-preview {
    justify-content: flex-start;
  }
  .category-direct-editor .delete-action,
  .action-direct-editor .delete-action {
    justify-self: end;
  }
}

@media (max-width: 620px) {
  .brand-subline { font-size: .72rem; }
  .hero-sticker { display: none; }

  .progression-grid { grid-template-columns: 1fr; }
  .rank-card {
    grid-column: auto;
    padding-right: 95px;
  }
  .rank-stamp {
    width: 102px;
    right: -16px;
    font-size: .62rem;
  }

  .victory-banner {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .report-button {
    width: 100%;
  }

  .category-card:nth-child(n) { transform: none; }

  .category-direct-editor,
  .action-direct-editor {
    grid-template-columns: 1fr;
  }
  .category-direct-editor .delete-action,
  .action-direct-editor .delete-action {
    width: 100%;
    justify-self: stretch;
  }
  .category-band-preview { min-height: 0; }

  .danger-zone {
    align-items: stretch;
    flex-direction: column;
  }

  .day-card {
    transform: none;
  }
  .day-card-footer {
    grid-template-columns: 1fr 1fr;
  }
  .newspaper-button {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-title,
  .category-card,
  .day-card,
  .rank-stamp,
  .day-type-stamp {
    transform: none !important;
  }
}


/* -------------------------------------------------------------------------- */
/* MoLife identity + Crestfallen Newswire v3.1                                */
/* -------------------------------------------------------------------------- */

.brand-block {
  flex: 1 1 650px;
  min-width: 0;
}

.newswire {
  width: min(780px, 100%);
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  padding: 6px 10px 6px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid #ff718d;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,113,141,.075), transparent 34%),
    rgba(6,8,12,.55);
  box-shadow: 2px 3px 0 rgba(0,0,0,.14);
  white-space: nowrap;
}

.newswire-live,
.newswire-label {
  flex: 0 0 auto;
  font-size: .6rem;
  font-weight: 950;
  letter-spacing: .105em;
}

.newswire-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ff91a6;
}

.newswire-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff617f;
  box-shadow: 0 0 8px rgba(255,97,127,.8);
  animation: newswirePulse 1.8s ease-in-out infinite;
}

.newswire-label {
  color: #c0c6d2;
}

.newswire-chevron {
  flex: 0 0 auto;
  color: #596170;
  font-weight: 900;
}

.newswire-message {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: #f0f2f7;
  font-size: .67rem;
  font-weight: 760;
  letter-spacing: .025em;
  text-overflow: ellipsis;
}

.newswire-message.newswire-swap {
  animation: newswireSwap .34s ease-out;
}

@keyframes newswirePulse {
  0%, 100% { opacity: .45; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes newswireSwap {
  from { opacity: .2; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.brand-title {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: flex-start;
  width: fit-content;
  margin: 2px 0 5px 2px;
  overflow: visible;
  background: none;
  color: #f4f6fb;
  font-family: "Arial Black", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(2.35rem, 6vw, 3.45rem);
  font-style: italic;
  font-weight: 1000;
  line-height: .82;
  letter-spacing: -.095em;
  text-shadow:
    -2px 2px 0 #0a0c11,
    -4px 5px 0 rgba(0,0,0,.42),
    0 0 24px rgba(122,108,255,.17);
  transform: rotate(-1.7deg) skewX(-6deg);
}

.brand-title::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 4px;
  right: -10px;
  bottom: -8px;
  height: 7px;
  border-radius: 70% 18% 65% 30%;
  background: linear-gradient(90deg, #7a6cff, #4cd6bd 72%, transparent);
  opacity: .75;
  transform: rotate(-2.4deg) skewX(14deg);
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
}

.brand-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -15px;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4cd6bd;
  box-shadow:
    8px 8px 0 1px rgba(122,108,255,.72),
    -2px 15px 0 rgba(76,214,189,.62),
    13px 21px 0 -1px rgba(241,202,90,.72);
}

.brand-mo {
  color: #aaa2ff;
  -webkit-text-stroke: 1px rgba(243,241,255,.68);
}

.brand-life {
  color: #eef3f1;
  -webkit-text-stroke: 1px rgba(76,214,189,.42);
}

.brand-tm {
  margin: -.08em 0 0 .19em;
  color: #8b94a5;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: .22em;
  font-style: normal;
  letter-spacing: 0;
  -webkit-text-stroke: 0;
  transform: skewX(6deg) rotate(8deg);
}

.brand-subline {
  margin-top: 7px;
  color: #aab2c0;
  font-size: .75rem;
  font-weight: 650;
}

.day-cleared-flash .hero-card {
  animation: clearHeroPulse .8s ease-out;
}

.day-cleared-flash .newswire {
  animation: clearNewswirePulse .8s ease-out;
}

@keyframes clearHeroPulse {
  0% { box-shadow: var(--shadow); }
  35% { box-shadow: 0 0 0 3px rgba(57,215,183,.18), 0 20px 70px rgba(57,215,183,.18); }
  100% { box-shadow: var(--shadow); }
}

@keyframes clearNewswirePulse {
  0%, 100% { border-left-color: #ff718d; }
  35% { border-left-color: #63e2c7; background-color: rgba(57,215,183,.08); }
}

/* Track-o-Tron action decks: equal-height, touch-friendly, independently scrollable. */
.category-card {
  display: flex;
  flex-direction: column;
}

.action-deck {
  position: relative;
  height: 230px;
  min-height: 230px;
  margin-top: auto;
  overflow: hidden;
  border-radius: 14px;
}

.actions-list {
  height: 100%;
  max-height: 100%;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(151,158,176,.38) transparent;
  -webkit-overflow-scrolling: touch;
}

.actions-list::-webkit-scrollbar {
  width: 6px;
}

.actions-list::-webkit-scrollbar-track {
  background: transparent;
}

.actions-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(151,158,176,.34);
}

.actions-list::-webkit-scrollbar-thumb:hover {
  background: rgba(177,184,202,.52);
}

.action-deck::before,
.action-deck::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 7px;
  height: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s ease;
}

.action-deck::before {
  top: 0;
  background: linear-gradient(to bottom, var(--panel) 2%, transparent);
}

.action-deck::after {
  bottom: 0;
  background: linear-gradient(to top, var(--panel) 2%, transparent);
}

.action-deck.can-scroll-up::before,
.action-deck.can-scroll-down::after {
  opacity: .96;
}

.action-deck.is-scrollable {
  padding-bottom: 1px;
}

/* Straight-faced corporate footer. */
.corp-footer {
  margin-top: 42px;
  padding: 18px 4px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,.045);
  color: #687181;
  font-size: .65rem;
  letter-spacing: .035em;
  text-align: center;
}

.corp-footer strong {
  color: #8993a4;
  font-weight: 800;
}

.corp-footer-dot {
  color: #424956;
}

@media (max-width: 620px) {
  .newswire {
    gap: 6px;
    margin-bottom: 12px;
    padding-right: 8px;
  }

  .newswire-label {
    display: none;
  }

  .newswire-message {
    font-size: .63rem;
  }

  .brand-title {
    font-size: clamp(2.5rem, 14vw, 3.4rem);
  }

  .brand-subline {
    max-width: 31em;
  }

  .action-deck {
    height: 220px;
    min-height: 220px;
  }

  .corp-footer {
    flex-wrap: wrap;
    row-gap: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .newswire-live i,
  .newswire-message.newswire-swap,
  .day-cleared-flash .hero-card,
  .day-cleared-flash .newswire {
    animation: none !important;
  }

  .actions-list {
    scroll-behavior: auto;
  }
}


/* -------------------------------------------------------------------------- */
/* MoLife motion + mobile polish v3.2                                         */
/* -------------------------------------------------------------------------- */

:root {
  --motion-x: 50%;
  --motion-y: 24%;
  --motion-x-2: 76%;
  --motion-y-2: 16%;
  --motion-hue: 0deg;
  --motion-tilt: 0;
  --motion-energy: 0;
  --motion-shift-x: 0vw;
  --motion-shift-y: 0vh;
  --motion-rotate: 0deg;
  --motion-scale: 1.04;
  --motion-saturation: 1.25;
  --motion-brightness: 1.02;
  --motion-opacity: .52;
}

.motion-shimmer {
  position: fixed;
  inset: -16vmax;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--motion-x) var(--motion-y),
      rgba(126,108,255,.34),
      transparent 29vmax),
    radial-gradient(circle at var(--motion-x-2) var(--motion-y-2),
      rgba(55,221,190,.27),
      transparent 27vmax),
    radial-gradient(circle at calc(100% - var(--motion-x)) calc(100% - var(--motion-y)),
      rgba(234,105,190,.16),
      transparent 25vmax),
    radial-gradient(circle at 18% 82%,
      rgba(241,202,90,.09),
      transparent 24vmax);
  filter:
    hue-rotate(var(--motion-hue))
    saturate(var(--motion-saturation))
    brightness(var(--motion-brightness));
  transform:
    translate3d(var(--motion-shift-x), var(--motion-shift-y), 0)
    rotate(var(--motion-rotate))
    scale(var(--motion-scale));
  transform-origin: 50% 50%;
  transition: opacity .28s ease;
  will-change: transform, filter, opacity;
}

.ambient-fx-enabled .motion-shimmer {
  opacity: var(--motion-opacity);
}

/* Simpler wordmark: playful, but no fake graffiti construction. */
.brand-title {
  position: relative;
  isolation: auto;
  display: inline-flex;
  align-items: flex-start;
  width: fit-content;
  margin: 3px 0 11px 0;
  overflow: visible;
  background: linear-gradient(100deg, #f4f1ff 0%, #aaa2ff 44%, #6be2cc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  font-size: clamp(2.25rem, 5.5vw, 3.2rem);
  font-style: normal;
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.075em;
  text-shadow: 0 3px 22px rgba(122,108,255,.18);
  transform: none;
}

.brand-title::before,
.brand-title::after {
  content: none;
}

.brand-mo,
.brand-life {
  color: inherit;
  -webkit-text-stroke: 0;
}

.brand-tm {
  margin: -.02em 0 0 .20em;
  color: #8b94a5;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: .22em;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
  -webkit-text-stroke: 0;
  transform: none;
}

.brand-subline {
  margin-top: 0;
}

/* The Newswire now behaves like an actual ticker instead of truncating. */
.newswire {
  padding-right: 0;
}

.newswire-viewport {
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
  height: 1.05rem;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 9px, #000 calc(100% - 10px), transparent);
}

.newswire-message {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  width: max-content;
  max-width: none;
  min-width: max-content;
  overflow: visible;
  padding-right: 56px;
  color: #f0f2f7;
  font-size: .67rem;
  font-weight: 760;
  letter-spacing: .025em;
  line-height: 1.05rem;
  text-overflow: clip;
  white-space: nowrap;
  transform: translate3d(0,-50%,0);
  will-change: transform;
}

.newswire-message.newswire-swap {
  animation: none;
}

/* Only become an inner scroll surface when there is actually overflow. */
.action-deck {
  height: 230px;
  min-height: 230px;
}

.actions-list {
  overflow-y: visible;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
}

.action-deck.is-scrollable .actions-list {
  overflow-y: auto;
  overscroll-behavior-y: auto;
}

/* Motion FX setting */
.motion-fx-row {
  margin-top: 13px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}

.motion-fx-row strong,
.motion-fx-row small {
  display: block;
}

.motion-fx-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .72rem;
}

.motion-fx-row .secondary-button {
  flex: 0 0 auto;
  margin-top: 0;
}

/* Signed-in mobile header: sync, profile, settings on one compact right-aligned row. */
@media (max-width: 620px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 8px;
  }

  .brand-block {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
  }

  .account-zone {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    min-width: 0;
    margin-left: auto;
    justify-self: end;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 7px;
  }

  .account-zone .sync-status {
    margin-right: 0;
    flex: 0 1 auto;
  }

  .account-zone .account-button {
    min-width: 0;
    max-width: min(42vw, 180px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #settingsButton {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  .newswire {
    padding-right: 0;
  }

  .newswire-viewport {
    height: 1rem;
  }

  .newswire-message {
    font-size: .63rem;
  }

  .brand-title {
    margin-bottom: 12px;
    font-size: clamp(2.3rem, 13vw, 3.15rem);
  }

  .action-deck {
    height: 220px;
    min-height: 220px;
  }

  .motion-fx-row {
    align-items: stretch;
    flex-direction: column;
  }

  .motion-fx-row .secondary-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-shimmer {
    display: none;
  }

  .newswire-message {
    position: static;
    display: block;
    width: auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding-right: 0;
    text-overflow: ellipsis;
    transform: none !important;
  }
}


/* -------------------------------------------------------------------------- */
/* MoLife balance + Track-o-Tron visibility v3.3                              */
/* -------------------------------------------------------------------------- */

.settings-dialog {
  width: min(980px, calc(100% - 24px));
}

.goal-ramp-preview {
  margin-top: 5px !important;
  color: #b9b2ff !important;
}

.action-direct-editor {
  grid-template-columns:
    minmax(170px, 1.45fr)
    minmax(120px, .8fr)
    86px
    118px
    105px
    38px;
}

.action-visibility-field {
  min-width: 0;
}

.action-visibility-toggle,
.checkbox-row {
  min-height: 42px;
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 11px;
  background: #171b24;
  color: var(--text) !important;
  cursor: pointer;
}

.action-visibility-toggle > span,
.checkbox-row > span {
  display: inline !important;
  margin: 0 !important;
  color: var(--text) !important;
  font-size: .75rem !important;
  font-weight: 750;
}

.action-visibility-toggle input,
.checkbox-row input,
.add-action-grid .checkbox-row input,
.action-direct-editor .action-visibility-toggle input {
  width: 17px !important;
  height: 17px !important;
  min-height: 0 !important;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--accent-2);
}

.action-editor-row.is-track-hidden {
  opacity: .58;
  border-style: dashed;
}

.action-editor-row.is-track-hidden .action-visibility-toggle {
  opacity: 1;
}

.add-action-grid {
  grid-template-columns: 1.5fr 1fr .6fr .9fr .8fr;
}

.new-action-visibility {
  min-width: 0;
}

@media (max-width: 880px) {
  .add-action-grid {
    grid-template-columns: 1fr 1fr;
  }

  .action-direct-editor {
    grid-template-columns: 1fr 1fr;
  }

  .action-direct-editor .delete-action {
    justify-self: end;
  }
}

@media (max-width: 620px) {
  .add-action-grid,
  .action-direct-editor {
    grid-template-columns: 1fr;
  }

  .action-direct-editor .delete-action {
    width: 100%;
    justify-self: stretch;
  }
}

/* Correct the resting ticker position before JS applies its first frame. */
.newswire-message {
  transform: translate3d(0,0,0);
}


/* -------------------------------------------------------------------------- */
/* MoLife chromatic compliance v3.6                                           */
/* -------------------------------------------------------------------------- */

.newswire-wide {
  width: 100%;
  max-width: none;
  margin: 0 0 16px;
}

.category-card {
  --category-panel: var(--panel);
  --category-panel-alt: var(--panel-2);
  --category-surface: #1a2029;
  --category-border: rgba(255,255,255,.09);
  --category-glow: rgba(122,108,255,.10);
  border-color: var(--category-border);
  background:
    radial-gradient(circle at 100% 0, var(--category-glow), transparent 13rem),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.006)),
    var(--category-panel);
  box-shadow:
    3px 4px 0 rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.018);
}

.category-card.is-fallback-category {
  border-color: rgba(139,147,164,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent),
    #12161e;
}

.category-icon {
  color: var(--category-color);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--category-color) 16%, transparent), transparent),
    var(--category-surface);
  border: 1px solid color-mix(in srgb, var(--category-color) 18%, transparent);
}

.category-score,
.efficiency-value,
.action-xp {
  color: var(--category-color);
  text-shadow: 0 0 18px color-mix(in srgb, var(--category-color) 18%, transparent);
}

.efficiency-row {
  border-color: color-mix(in srgb, var(--category-color) 12%, rgba(255,255,255,.04));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--category-color) 5%, transparent), transparent 65%),
    var(--category-surface);
}

.category-meter {
  background: color-mix(in srgb, var(--category-color) 8%, rgba(255,255,255,.055));
}

.action-button {
  border-color: color-mix(in srgb, var(--category-color) 12%, rgba(255,255,255,.055));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--category-color) 5%, transparent), transparent 65%),
    var(--category-panel-alt);
}

.action-button:hover {
  border-color: color-mix(in srgb, var(--category-color) 32%, rgba(255,255,255,.08));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--category-color) 10%, transparent), transparent 65%),
    color-mix(in srgb, var(--category-panel-alt) 82%, white 3%);
}

.action-button[disabled] {
  filter: saturate(.65);
}

.category-direct-editor {
  grid-template-columns:
    minmax(160px, 1.45fr)
    76px
    88px
    72px
    minmax(120px, .8fr)
    38px;
}

.add-category-grid {
  grid-template-columns: 1.5fr .45fr .65fr .55fr;
}

.category-color-field input[type="color"] {
  width: 100%;
  min-width: 48px;
  height: 42px;
  min-height: 42px;
  padding: 4px;
  overflow: hidden;
  border-radius: 11px;
  cursor: pointer;
}

.category-color-field input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.category-color-field input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 7px;
}

.category-color-field input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: 7px;
}

.category-editor-row:not(.is-fallback) {
  border-left-color: color-mix(in srgb, var(--editor-category-color, var(--accent)) 42%, rgba(255,255,255,.05));
}

@media (max-width: 760px) {
  .category-direct-editor,
  .add-category-grid {
    grid-template-columns: 1fr 1fr;
  }

  .category-color-field input[type="color"] {
    max-width: 90px;
  }
}

@media (max-width: 620px) {
  .newswire-wide {
    margin-bottom: 14px;
  }

  .category-direct-editor,
  .add-category-grid {
    grid-template-columns: 1fr;
  }

  .category-color-field input[type="color"] {
    max-width: none;
  }
}


/* -------------------------------------------------------------------------- */
/* MoLife action ordering v3.8                                                */
/* -------------------------------------------------------------------------- */

.action-settings-head {
  align-items: flex-end;
}

.action-sort-control {
  flex: 0 0 auto;
  min-width: 150px;
}

.action-sort-control > span {
  display: block;
  margin: 0 0 5px 2px;
  color: var(--muted);
  font-size: .67rem;
}

.action-sort-control select {
  width: 100%;
  min-width: 150px;
}

.action-editor-row {
  --category-panel: var(--panel);
  --category-panel-alt: var(--panel-2);
  --category-surface: #1a2029;
  --category-border: rgba(255,255,255,.09);
  --category-glow: rgba(122,108,255,.10);
  position: relative;
  padding: 12px 12px 12px 48px;
  border-color: var(--category-border);
  background:
    radial-gradient(circle at 100% 0, var(--category-glow), transparent 10rem),
    linear-gradient(135deg, color-mix(in srgb, var(--category-color) 5%, transparent), transparent 65%),
    var(--category-panel-alt);
  transition:
    transform .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    opacity .14s ease;
}

.action-editor-row.is-track-hidden {
  opacity: .58;
}

.action-editor-row.is-dragging {
  z-index: 8;
  pointer-events: none;
  opacity: .94;
  border-color: color-mix(in srgb, var(--category-color) 48%, rgba(255,255,255,.12));
  box-shadow:
    0 16px 38px rgba(0,0,0,.38),
    0 0 0 1px color-mix(in srgb, var(--category-color) 20%, transparent);
  transform: scale(1.012);
}

.action-drag-handle {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 28px;
  height: 46px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--category-color) 20%, rgba(255,255,255,.07));
  border-radius: 9px;
  background: color-mix(in srgb, var(--category-color) 7%, rgba(255,255,255,.03));
  color: color-mix(in srgb, var(--category-color) 76%, white 24%);
  cursor: grab;
  touch-action: none;
  user-select: none;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: -.18em;
  line-height: 1;
}

.action-drag-handle:hover {
  background: color-mix(in srgb, var(--category-color) 13%, rgba(255,255,255,.05));
}

.action-drag-handle:active,
.is-reordering-actions .action-drag-handle {
  cursor: grabbing;
}

.is-reordering-actions {
  user-select: none;
}

@media (max-width: 760px) {
  .action-settings-head {
    align-items: stretch;
    flex-direction: column;
  }

  .action-sort-control {
    width: 100%;
    min-width: 0;
  }

  .action-sort-control select {
    width: 100%;
    min-width: 0;
  }

  .action-editor-row {
    padding-left: 48px;
  }

  .action-drag-handle {
    top: 13px;
    transform: none;
  }
}


/* MoLife v4.0 — Internal Hostilities */
.fight-card {
  position: relative;
  overflow: hidden;
}

.fight-name {
  margin-top: 10px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.fight-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 7px 0 10px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fight-stats strong {
  color: var(--text);
  font-size: .92rem;
}

.enemy-health .hero-progress-fill {
  transform-origin: left center;
}

.fight-orb-wrap {
  position: relative;
}

.fight-orb {
  filter: saturate(.72);
}

.fight-feedback {
  position: absolute;
  left: 50%;
  bottom: -22px;
  z-index: 4;
  width: max-content;
  max-width: 220px;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  color: var(--text);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}

.fight-feedback.is-combo {
  color: var(--accent);
}

.fight-feedback-pop {
  animation: fight-feedback-pop 900ms cubic-bezier(.2,.8,.2,1);
}

@keyframes fight-feedback-pop {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.88); }
  20% { opacity: 1; transform: translate(-50%, -5px) scale(1.06); }
  70% { opacity: 1; transform: translate(-50%, -11px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -18px) scale(.98); }
}

.track-subtitle {
  margin-top: 3px;
  color: var(--muted);
  font-size: .74rem;
}

.combos-panel {
  margin: 18px 0;
}

.combos-panel-head,
.combo-card-title,
.combo-editor-head,
.combo-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.combos-panel-head {
  margin-bottom: 14px;
}

.combos-panel-head h2 {
  margin-top: 2px;
}

.combo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
}

.combo-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  padding: 13px;
}

.combo-card.is-disabled {
  opacity: .62;
}

.combo-card-title strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.combo-card-title span {
  flex: 0 0 auto;
  color: var(--accent);
  font-weight: 900;
}

.combo-steps {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.combo-step {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: .78rem;
}

.combo-step-mark {
  color: var(--accent);
  font-weight: 900;
  text-align: center;
}

.combo-warning,
.combo-editor-status.is-warning {
  margin-top: 9px;
  color: var(--danger, #ff8f8f);
  font-size: .72rem;
  font-weight: 800;
}

.combo-log-row {
  box-shadow: inset 3px 0 0 var(--accent);
}

.day-battle-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 13px 0 5px;
}

.day-battle-stats > div {
  border-top: 1px solid currentColor;
  padding-top: 7px;
}

.day-battle-stats span,
.day-battle-stats strong {
  display: block;
}

.day-battle-stats span {
  font-size: .61rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.day-battle-stats strong {
  margin-top: 2px;
  font-size: 1.05rem;
}

.combos-editor {
  display: grid;
  gap: 12px;
}

.combo-editor-card,
.add-combo-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface, rgba(255,255,255,.025));
  padding: 14px;
}

.combo-editor-head {
  display: grid;
  grid-template-columns: minmax(150px, 2fr) minmax(100px, .7fr) minmax(100px, .7fr) auto;
  align-items: end;
}

.combo-editor-head label,
.add-combo-grid label {
  min-width: 0;
}

.combo-editor-head label > span:first-child,
.add-combo-grid label > span:first-child {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.combo-editor-head input,
.combo-editor-head select,
.add-combo-grid input,
.combo-step-editor select {
  width: 100%;
}

.combo-enabled-field .checkbox-row {
  min-height: 42px;
}

.combo-sequence-editor {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.combo-step-editor {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 36px 36px 36px;
  align-items: center;
  gap: 6px;
}

.combo-step-number {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  text-align: center;
}

.combo-step-button {
  min-width: 0;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
}

.combo-step-button:disabled {
  opacity: .28;
  cursor: default;
}

.combo-step-button.is-delete {
  color: var(--danger, #ff8f8f);
}

.combo-editor-footer {
  margin-top: 10px;
}

.combo-editor-status {
  color: var(--muted);
  font-size: .7rem;
  text-align: right;
}

.add-combo-card {
  margin-top: 12px;
}

.add-combo-card h4 {
  margin-bottom: 10px;
}

.add-combo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, .35fr);
  gap: 10px;
  margin-bottom: 10px;
}

@media (max-width: 760px) {
  .combo-editor-head {
    grid-template-columns: minmax(0, 1fr) minmax(100px, .45fr);
  }

  .combo-enabled-field {
    grid-column: 1 / 2;
  }

  .combo-delete {
    grid-column: 2 / 3;
    grid-row: 2;
    justify-self: end;
  }

  .day-battle-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .fight-stats {
    padding-right: 76px;
  }

  .fight-feedback {
    bottom: -18px;
  }

  .combos-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .combo-step-editor {
    grid-template-columns: 22px minmax(0, 1fr) 32px 32px 32px;
    gap: 4px;
  }

  .combo-step-button {
    height: 36px;
  }

  .combo-editor-head,
  .add-combo-grid {
    grid-template-columns: 1fr;
  }

  .combo-enabled-field,
  .combo-delete {
    grid-column: auto;
    grid-row: auto;
  }

  .combo-delete {
    justify-self: end;
  }

  .combo-editor-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .combo-editor-status {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fight-feedback-pop {
    animation: none;
    opacity: 1;
  }
}


/* v4.0 polish — report reveal and compact short-viewport layout */
.day-card-dialog[open].is-victory-reveal {
  animation: reportArrival .72s cubic-bezier(.18,.78,.18,1);
}

.day-card-dialog[open].is-victory-reveal::backdrop {
  animation: reportBackdropArrival .72s ease-out;
}

.day-card-dialog[open].is-victory-reveal .day-card::after {
  animation: approvedStamp .42s cubic-bezier(.2,.9,.25,1.15) .28s both;
  transform-origin: center;
}

@keyframes reportArrival {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(.972);
    filter:
      drop-shadow(0 0 28px rgba(57,215,183,.72))
      drop-shadow(0 0 58px rgba(225,190,102,.30));
  }
  42% {
    opacity: 1;
    transform: translateY(-2px) scale(1.006);
    filter:
      drop-shadow(0 0 20px rgba(57,215,183,.46))
      drop-shadow(0 0 38px rgba(225,190,102,.20));
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes reportBackdropArrival {
  0% {
    background: rgba(7,18,20,.58);
    backdrop-filter: blur(2px) brightness(1.12);
  }
  100% {
    background: rgba(4,5,8,.78);
    backdrop-filter: blur(5px) brightness(1);
  }
}

@keyframes approvedStamp {
  0% {
    opacity: 0;
    transform: rotate(-8deg) scale(1.38);
  }
  58% {
    opacity: 1;
    transform: rotate(-14deg) scale(.94);
  }
  100% {
    opacity: 1;
    transform: rotate(-13deg) scale(1);
  }
}

@media (min-width: 621px) and (max-height: 760px) {
  .day-card-dialog {
    width: min(680px, calc(100vw - 16px));
    max-height: calc(100dvh - 10px);
  }

  .day-card {
    padding: 18px 30px 20px;
  }

  .newspaper-masthead {
    padding-bottom: 8px;
  }

  .newspaper-masthead strong {
    font-size: clamp(2rem, 6vw, 2.85rem);
  }

  .day-card-meta {
    margin-top: 7px;
  }

  .day-battle-stats {
    margin: 8px 0 2px;
  }

  .day-type-stamp {
    margin: 13px auto 10px;
    padding: 5px 9px;
  }

  .day-card-headline {
    font-size: clamp(1.65rem, 5vw, 2.5rem);
    line-height: .96;
  }

  .day-card-copy {
    margin-top: 11px;
    line-height: 1.36;
  }

  .day-card-footer {
    margin-top: 15px;
    padding-top: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .day-card-dialog[open],
  .day-card-dialog[open]::backdrop,
  .day-card-dialog[open].is-victory-reveal .day-card::after {
    animation: none !important;
  }
}


/* -------------------------------------------------------------------------- */
/* MoLife v4.1 — street-fight HUD                                             */
/* -------------------------------------------------------------------------- */

.fight-card {
  --enemy-hp: #9dff2f;
  --enemy-hp-hot: #e1ff67;
  display: block;
  isolation: isolate;
  padding: 26px 30px 27px;
  border: 1px solid rgba(168,177,196,.20);
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(5,6,8,.90), rgba(14,12,14,.70)),
    repeating-linear-gradient(116deg, rgba(255,255,255,.016) 0 1px, transparent 1px 13px),
    radial-gradient(circle at 15% 18%, rgba(116,20,35,.20), transparent 24rem),
    radial-gradient(circle at 91% 12%, rgba(228,71,27,.08), transparent 18rem),
    #0d1015;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -24px 50px rgba(0,0,0,.20),
    0 18px 55px rgba(0,0,0,.30);
}

.fight-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: 6px;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(241,202,90,.82) 0 7px,
      rgba(20,20,18,.92) 7px 14px
    );
  opacity: .76;
}

.fight-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 0 72%, rgba(255,255,255,.025) 72% 72.25%, transparent 72.25%),
    radial-gradient(circle at 92% 22%, color-mix(in srgb, var(--enemy-hp) 17%, transparent), transparent 18rem),
    linear-gradient(180deg, transparent 55%, rgba(70,0,8,.10));
  filter: none;
  pointer-events: none;
}

.fight-card[data-health="active"] {
  border-color: rgba(157,255,47,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -30px 64px rgba(0,0,0,.26),
    0 18px 55px rgba(0,0,0,.34);
}

.fight-card[data-health="wounded"] {
  --enemy-hp: #ffb000;
  --enemy-hp-hot: #ffd84d;
  border-color: rgba(255,176,0,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -30px 64px rgba(0,0,0,.28),
    0 0 34px rgba(255,137,0,.07),
    0 18px 55px rgba(0,0,0,.38);
}

.fight-card[data-health="critical"] {
  --enemy-hp: #ff2b35;
  --enemy-hp-hot: #ff6a46;
  border-color: rgba(255,43,53,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 -36px 72px rgba(35,0,3,.34),
    0 0 42px rgba(255,31,42,.13),
    0 18px 58px rgba(0,0,0,.45);
}

.fight-card[data-health="down"] {
  --enemy-hp: #6a1f24;
  --enemy-hp-hot: #9d3a35;
  border-color: rgba(130,49,49,.30);
  filter: saturate(.78);
}

.fight-card-scratches {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: .32;
}

.fight-card-scratches::before,
.fight-card-scratches::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: rotate(-13deg);
}

.fight-card-scratches::before {
  right: 8%;
  top: 33%;
}

.fight-card-scratches::after {
  right: 3%;
  top: 38%;
  width: 116px;
}

.fight-topline,
.fight-card .hero-copy {
  position: relative;
  z-index: 1;
}

.fight-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
}

.fight-card .hero-sticker {
  position: static;
  flex: 0 0 auto;
  transform: rotate(4deg);
  border-color: rgba(241,202,90,.68);
  background: rgba(7,9,13,.70);
  color: #f1ca5a;
  box-shadow: 2px 3px 0 rgba(0,0,0,.34);
}

.fight-card .status-badge {
  padding: 6px 10px 5px;
  border: 1px solid color-mix(in srgb, var(--enemy-hp) 54%, rgba(255,255,255,.12));
  border-radius: 3px;
  background: color-mix(in srgb, var(--enemy-hp) 9%, rgba(0,0,0,.36));
  box-shadow: 3px 3px 0 rgba(0,0,0,.24);
  color: color-mix(in srgb, var(--enemy-hp-hot) 88%, white 12%);
  font-size: .64rem;
  letter-spacing: .14em;
  transform: rotate(-.4deg);
}

.fight-card .fight-name {
  margin-top: 0;
  color: #b3bac7;
  font-size: .78rem;
  letter-spacing: .22em;
}

.fight-card h2 {
  margin: 5px 0 16px;
  font-size: clamp(3.2rem, 7vw, 5.25rem);
  letter-spacing: -.075em;
  text-shadow: 3px 4px 0 rgba(0,0,0,.26);
}

.fight-card .hero-goal {
  color: #bbc1cb;
}

.fight-hud {
  position: relative;
  max-width: 100%;
  margin: 0 0 14px;
}

.fight-hud-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 3px 5px;
  color: #aeb6c2;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .15em;
}

.fight-hud-label strong {
  color: var(--enemy-hp-hot);
  font-size: .74rem;
}

.fight-card .enemy-health {
  position: relative;
  height: 28px;
  overflow: hidden;
  border: 3px solid #090b0f;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent),
    repeating-linear-gradient(135deg, rgba(95,14,18,.16) 0 7px, rgba(13,15,19,.25) 7px 14px),
    #171a20;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(255,255,255,.035),
    4px 5px 0 rgba(0,0,0,.28);
}

.fight-card .enemy-health-trail,
.fight-card .hero-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.fight-card .enemy-health-trail {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(255,239,164,.95), rgba(255,86,50,.92));
}

.fight-card .hero-progress-fill {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), transparent 37%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--enemy-hp) 82%, #121212 18%),
      var(--enemy-hp) 56%,
      var(--enemy-hp-hot));
  box-shadow:
    inset -2px 0 0 rgba(0,0,0,.24),
    0 0 24px color-mix(in srgb, var(--enemy-hp) 38%, transparent);
}

.fight-card.is-hud-live .hero-progress-fill {
  transition: width .16s cubic-bezier(.2,.8,.2,1);
}

.fight-card.is-hud-live .enemy-health-trail {
  transition: width .68s cubic-bezier(.18,.82,.22,1) .13s;
}

.enemy-health-segments {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(10% - 1px),
      rgba(5,7,10,.42) calc(10% - 1px) 10%
    );
  box-shadow:
    inset 0 1px rgba(255,255,255,.12),
    inset 0 -1px rgba(0,0,0,.38);
}

.fight-card .fight-stats {
  gap: 9px 24px;
  margin: 15px 0 7px;
  color: #868f9e;
}

.fight-card .fight-stats span {
  padding-left: 9px;
  border-left: 2px solid rgba(255,255,255,.12);
}

.fight-card .fight-stats strong {
  color: #eef0f4;
}

.fight-card #overkillValue {
  color: #d8b95e;
}

.fight-card .hero-copy p {
  max-width: 68rem;
  color: #a8b0bd;
  font-size: .88rem;
}

.fight-card .fight-feedback {
  left: auto;
  right: 8%;
  top: 18px;
  bottom: auto;
  z-index: 5;
  max-width: 280px;
  transform: none;
  color: #f2f4f7;
  font-size: .76rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.88);
}

.fight-card .fight-feedback.is-combo {
  color: #f1ca5a;
}

.fight-card .fight-feedback-pop {
  animation: streetDamagePop .78s cubic-bezier(.16,.86,.22,1);
}

.fight-card.fight-hit .enemy-health {
  animation: enemyBarKick .24s ease-out;
}

.fight-card.fight-hit::after {
  animation: fightImpactFlash .30s ease-out;
}

@keyframes streetDamagePop {
  0% { opacity: 0; transform: translate(8px, 10px) scale(.86) rotate(1deg); }
  18% { opacity: 1; transform: translate(0, -8px) scale(1.10) rotate(-1deg); }
  72% { opacity: 1; transform: translate(-2px, -13px) scale(1); }
  100% { opacity: 0; transform: translate(-4px, -20px) scale(.97); }
}

@keyframes enemyBarKick {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-3px); }
  65% { transform: translateX(2px); }
}

@keyframes fightImpactFlash {
  0% { background-color: rgba(255,255,255,.08); }
  100% { background-color: transparent; }
}


/* Underworld progression cards: records, not fitness goals */
.underworld-grid {
  gap: 10px;
}

.underworld-grid .dossier-card {
  border-radius: 11px;
  border-color: rgba(187,195,210,.16);
  background:
    linear-gradient(102deg, rgba(255,255,255,.027), transparent 46%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 5px),
    #151922;
  box-shadow:
    inset 0 1px rgba(255,255,255,.03),
    3px 4px 0 rgba(0,0,0,.20);
}

.underworld-grid .dossier-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 3px;
  background: rgba(241,202,90,.48);
}

.underworld-grid .street-card {
  border-color: rgba(241,202,90,.24);
  background:
    radial-gradient(circle at 88% 14%, rgba(241,202,90,.085), transparent 12rem),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 5px),
    #171921;
}

.underworld-grid .eyebrow {
  letter-spacing: .12em;
}

.underworld-grid .dossier-mark {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  background: rgba(0,0,0,.20);
  color: #c4cad4;
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .05em;
  transform: rotate(-2deg);
}

.underworld-grid .streak-card .dossier-mark {
  color: #e8bd57;
  font-size: 1.2rem;
}

.underworld-grid .case-meter {
  position: relative;
  border-radius: 1px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.065) 0 9%,
      rgba(255,255,255,.025) 9% 10%
    );
}

.underworld-grid .rank-meter-fill,
.underworld-grid .mini-meter-fill {
  border-radius: 1px;
  background: linear-gradient(90deg, #8578ee, #d6b34e);
  opacity: .86;
}

.underworld-grid .rank-stamp {
  border-radius: 2px;
  opacity: .82;
}

.underworld-grid .streak-caption,
.underworld-grid .rank-hint,
.underworld-grid .mini-stat-note {
  color: #8992a1;
}

@media (max-width: 620px) {
  .fight-card {
    padding: 20px 18px 21px 22px;
    border-radius: 16px;
  }

  .fight-topline {
    margin-bottom: 16px;
  }

  .fight-card .hero-sticker {
    display: block;
    font-size: .58rem;
  }

  .fight-card h2 {
    margin-bottom: 15px;
    font-size: clamp(3.1rem, 17vw, 4.5rem);
  }

  .fight-card .enemy-health {
    height: 25px;
  }

  .fight-card .fight-stats {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .fight-card .fight-feedback {
    right: 5%;
    font-size: .69rem;
  }

  .underworld-grid .rank-card {
    padding-right: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fight-card.is-hud-live .hero-progress-fill,
  .fight-card.is-hud-live .enemy-health-trail,
  .fight-card .fight-feedback-pop,
  .fight-card.fight-hit .enemy-health,
  .fight-card.fight-hit::after {
    transition: none !important;
    animation: none !important;
  }
}


/* v4.1.1 — danger palette */
.fight-card[data-health="wounded"]::after {
  background:
    linear-gradient(90deg, transparent 0 72%, rgba(255,255,255,.018) 72% 72.25%, transparent 72.25%),
    radial-gradient(circle at 88% 22%, rgba(255,140,0,.17), transparent 18rem),
    linear-gradient(180deg, transparent 52%, rgba(95,44,0,.12));
}

.fight-card[data-health="critical"]::after {
  background:
    linear-gradient(90deg, transparent 0 72%, rgba(255,255,255,.014) 72% 72.25%, transparent 72.25%),
    radial-gradient(circle at 88% 20%, rgba(255,31,42,.25), transparent 19rem),
    radial-gradient(circle at 16% 110%, rgba(128,0,11,.18), transparent 20rem),
    linear-gradient(180deg, transparent 42%, rgba(76,0,7,.19));
  animation: criticalThreatPulse 1.15s ease-in-out infinite alternate;
}

.fight-card[data-health="critical"] .status-badge {
  box-shadow:
    3px 3px 0 rgba(0,0,0,.34),
    0 0 18px rgba(255,35,45,.22);
}

.fight-card[data-health="critical"] .fight-hud-label strong {
  text-shadow: 0 0 12px rgba(255,45,45,.45);
}

.fight-card[data-health="down"]::after {
  background:
    radial-gradient(circle at 88% 22%, rgba(117,26,29,.12), transparent 18rem),
    linear-gradient(180deg, transparent 45%, rgba(0,0,0,.18));
}

@keyframes criticalThreatPulse {
  from { opacity: .72; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fight-card[data-health="critical"]::after {
    animation: none !important;
  }
}


/* -------------------------------------------------------------------------- */
/* MoLife v4.2 — Contraband & templates                                       */
/* -------------------------------------------------------------------------- */

.arsenal-panel {
  margin: 16px 0 18px;
  overflow: hidden;
  border-color: rgba(241,202,90,.22);
  background:
    linear-gradient(115deg, rgba(93,11,16,.12), transparent 34%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 5px),
    #12151b;
  box-shadow:
    inset 0 1px rgba(255,255,255,.03),
    4px 5px 0 rgba(0,0,0,.22);
}

.arsenal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.arsenal-head h2 {
  margin-bottom: 4px;
}

.arsenal-status,
.arsenal-note,
.loot-drop-message,
.template-status {
  color: var(--muted);
  font-size: .73rem;
  line-height: 1.45;
}

.arsenal-count {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(241,202,90,.26);
  border-radius: 3px;
  color: #e8c767;
  background: rgba(0,0,0,.22);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(1.5deg);
}

.loot-drop {
  margin: 12px 0 9px;
}

.loot-crate {
  position: relative;
  width: min(100%, 360px);
  min-height: 92px;
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  padding: 13px 16px;
  border: 2px solid rgba(241,202,90,.55);
  border-radius: 5px;
  background:
    repeating-linear-gradient(135deg, rgba(241,202,90,.15) 0 9px, rgba(20,19,15,.12) 9px 18px),
    #1b1915;
  color: #f3d46e;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.30),
    4px 5px 0 rgba(0,0,0,.30),
    0 0 26px rgba(241,202,90,.08);
  cursor: pointer;
  text-align: left;
  transform: rotate(-.35deg);
}

.loot-crate:hover {
  border-color: rgba(255,222,111,.88);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.30),
    4px 5px 0 rgba(0,0,0,.30),
    0 0 34px rgba(241,202,90,.16);
}

.loot-crate-lid {
  grid-row: 1 / 3;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  background: rgba(0,0,0,.24);
  font-size: 2rem;
  font-weight: 1000;
  line-height: 1;
  transform: rotate(3deg);
}

.loot-crate strong {
  align-self: end;
  font-size: .82rem;
  letter-spacing: .14em;
}

.loot-crate small {
  align-self: start;
  color: #a89d7c;
  font-size: .68rem;
}

.loot-drop:not([hidden]) .loot-crate {
  animation: contrabandCrateKnock 2.4s ease-in-out infinite;
}

@keyframes contrabandCrateKnock {
  0%, 78%, 100% { transform: rotate(-.35deg) translateX(0); }
  82% { transform: rotate(-1deg) translateX(-2px); }
  86% { transform: rotate(.7deg) translateX(2px); }
  90% { transform: rotate(-.35deg) translateX(0); }
}

.loot-drop-message {
  min-height: 1.1em;
  margin-bottom: 11px;
}

.arsenal-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 9px;
}

.arsenal-empty {
  padding: 16px;
  border: 1px dashed rgba(255,255,255,.10);
  color: #69717d;
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
}

.weapon-card {
  position: relative;
  min-height: 112px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 5px 10px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(182,190,204,.18);
  border-radius: 5px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 42%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
    #171a20;
  box-shadow:
    inset 0 1px rgba(255,255,255,.03),
    3px 4px 0 rgba(0,0,0,.20);
  color: #e8ebf0;
  cursor: pointer;
  text-align: left;
}

.weapon-card::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -36px;
  width: 110px;
  height: 110px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .05;
}

.weapon-card:not(:disabled):hover {
  border-color: rgba(232,190,76,.50);
  transform: translateY(-1px);
}

.weapon-card:disabled {
  cursor: default;
  filter: saturate(.45);
  opacity: .58;
}

.weapon-condition {
  grid-column: 1 / -1;
  color: #858d99;
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .14em;
}

.weapon-name {
  align-self: center;
  font-size: 1rem;
  line-height: 1.05;
}

.weapon-damage {
  align-self: center;
  color: #f0c84f;
  font-size: .83rem;
  font-weight: 1000;
}

.weapon-fire {
  grid-column: 1 / -1;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #c84f55;
  font-size: .64rem;
  font-weight: 1000;
  letter-spacing: .14em;
}

.weapon-card.condition-rusty {
  border-color: rgba(167,108,69,.24);
  background:
    radial-gradient(circle at 92% 13%, rgba(150,75,36,.12), transparent 7rem),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
    #171818;
}

.weapon-card.condition-clean {
  border-color: rgba(175,184,199,.24);
}

.weapon-card.condition-pimped {
  border-color: rgba(180,81,191,.38);
  box-shadow:
    inset 0 1px rgba(255,255,255,.04),
    0 0 18px rgba(171,65,189,.07),
    3px 4px 0 rgba(0,0,0,.20);
}

.weapon-card.condition-over-engineered {
  border-color: rgba(255,91,45,.48);
  background:
    linear-gradient(135deg, rgba(150,22,14,.13), transparent 45%),
    #191719;
  box-shadow:
    inset 0 1px rgba(255,255,255,.04),
    0 0 22px rgba(255,61,30,.09),
    3px 4px 0 rgba(0,0,0,.22);
}

.weapon-card.is-golden {
  border-color: rgba(255,212,72,.72);
  color: #ffe186;
  background:
    radial-gradient(circle at 80% 10%, rgba(255,220,92,.20), transparent 8rem),
    linear-gradient(145deg, rgba(121,87,9,.18), transparent 48%),
    #1b1912;
  box-shadow:
    inset 0 0 0 1px rgba(255,231,139,.12),
    0 0 30px rgba(255,199,34,.12),
    3px 4px 0 rgba(0,0,0,.25);
}

.weapon-card.is-golden .weapon-condition,
.weapon-card.is-golden .weapon-damage,
.weapon-card.is-golden .weapon-fire {
  color: #ffe071;
}

.weapon-log-row {
  box-shadow: inset 3px 0 0 #cf4048;
}

.arsenal-note {
  margin-top: 10px;
  color: #747d89;
}

.template-section {
  border-color: rgba(112,130,169,.16);
}

.template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 12px 0 7px;
}

.template-status {
  min-height: 1.1em;
  margin-top: 8px;
}

@media (max-width: 620px) {
  .arsenal-head {
    flex-direction: column;
  }

  .arsenal-count {
    align-self: flex-start;
  }

  .arsenal-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weapon-card {
    min-height: 105px;
  }

  .loot-crate {
    width: 100%;
  }
}

@media (max-width: 410px) {
  .arsenal-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loot-drop:not([hidden]) .loot-crate {
    animation: none !important;
  }
}


.weapon-card.is-new {
  animation: contrabandReveal .62s cubic-bezier(.18,.86,.2,1);
}

@keyframes contrabandReveal {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(.86) rotate(-2deg);
    filter: brightness(1.9);
  }
  45% {
    opacity: 1;
    transform: translateY(1px) scale(1.04) rotate(.6deg);
    filter: brightness(1.35);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .weapon-card.is-new {
    animation: none !important;
  }
}


.template-name-field {
  min-width: min(260px, 100%);
  flex: 1 1 240px;
}

.template-name-field > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.template-name-field input {
  width: 100%;
}

.template-actions > .secondary-button {
  align-self: end;
}


/* -------------------------------------------------------------------------- */
/* MoLife v4.3 — Crestfallen connections                                      */
/* -------------------------------------------------------------------------- */

.corp-footer {
  flex-direction: column;
  gap: 7px;
}

.corp-footer-fiction,
.corp-footer-real {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.corp-footer-real {
  color: #596271;
  font-size: .62rem;
}

.corp-footer-real em {
  color: #727c8d;
}

.corp-footer a,
.steam-link-button {
  color: #d8b95e;
  text-decoration: none;
}

.corp-footer a {
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(216,185,94,.30);
  font-weight: 800;
}

.corp-footer a:hover,
.steam-link-button:hover {
  color: #f0d57c;
}

.corp-footer a:focus-visible,
.steam-link-button:focus-visible {
  outline: 3px solid rgba(216,185,94,.24);
  outline-offset: 3px;
}

.crestfallen-about {
  position: relative;
  overflow: hidden;
  border-top-color: rgba(216,185,94,.18);
}

.crestfallen-about::after {
  content: "CRESTFALLEN";
  position: absolute;
  right: 3px;
  top: 18px;
  z-index: 0;
  color: rgba(216,185,94,.045);
  font-size: clamp(2rem, 8vw, 4.8rem);
  font-weight: 1000;
  letter-spacing: -.05em;
  pointer-events: none;
  transform: rotate(-3deg);
}

.crestfallen-about .settings-section-head,
.crestfallen-about .steam-link-button {
  position: relative;
  z-index: 1;
}

.steam-link-button {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  padding: 9px 12px;
  border: 1px solid rgba(216,185,94,.28);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(216,185,94,.08), transparent),
    rgba(0,0,0,.15);
  box-shadow: 3px 4px 0 rgba(0,0,0,.18);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
}

@media (max-width: 620px) {
  .corp-footer {
    gap: 8px;
  }

  .corp-footer-fiction,
  .corp-footer-real {
    gap: 5px 7px;
  }

  .corp-footer-real {
    max-width: 32em;
  }

  .crestfallen-about::after {
    top: 34px;
    right: -8px;
  }
}