/* Tower Season UI kit. Shared components; values come from tokens.css. The tower artwork remains independent. */
:root {
  /* Legacy names, kept as aliases of tokens.css (docs/06 still lists them). */
  --ui-ink: var(--c-text);
  --ui-muted: var(--c-text-2);
  --ui-line: var(--c-line);
  --ui-surface: var(--c-surface-2);
  --ui-surface-hi: var(--c-surface-4);
  --ui-gold: var(--c-gold);
  --ui-mint: var(--c-biomass);
  --ui-violet: var(--c-dragons);
  --ui-blue: var(--c-score);
  --ui-danger: var(--c-danger);
  --ui-radius-sm: var(--r-sm);
  --ui-radius-md: var(--r-md);
  --ui-radius-lg: var(--r-lg);
  --ui-shadow: 0 12px 32px #07192782;
}
.ui-icon { display: block; flex: none; width: 24px; height: 24px; fill: none; color: currentColor; }
.hero-emblem .hero-emblem-gem { position: absolute; width: 52px; height: 52px; color: #b5fff0; filter: drop-shadow(0 0 12px #8af9ec); }
.ghost { min-width: 44px; min-height: 44px; border-color: #8ca3a3; background: #16354abe; }

/* Resource tiles form a compact HUD; each icon retains meaning without its colour. */
#meters { gap: 5px; }
.resource-tile { position: relative; display: flex; align-items: center; gap: 5px; min-height: 51px; padding: 5px 6px; text-align: left; border-radius: var(--r-sm); background: linear-gradient(145deg, #1a394abf, #0b2436e8); box-shadow: inset 0 1px #ffffff24, 0 4px 15px #0008; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.resource-icon { display: grid; flex: 0 0 24px; place-items: center; width: 24px; height: 27px; filter: drop-shadow(0 0 6px currentColor); }
.resource-icon .ui-icon { width: 22px; height: 22px; }
.resource-copy { display: grid; min-width: 0; line-height: 1.08; }
.resource-tile strong { margin: 0; color: var(--ui-ink); font-size: 15px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: var(--num); }
/* Long labels ("Ресурс развития") wrap to a second line instead of being cut (UX-014). */
.resource-tile small { order: 2; display: -webkit-box; margin-top: 2px; color: #c6d1d1; font-size: var(--fs-xs); line-height: 1.05; font-weight: 650; white-space: normal; overflow: hidden; overflow-wrap: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.resource-credits { color: var(--c-credits); border-color: #d2a65b; }
.resource-biomass { color: var(--c-biomass); border-color: #69b6ae; }
.resource-score { color: var(--c-score); border-color: #7395b6; }

/* Primary navigation is always on the bottom edge of the play field. */
.tabs { gap: 3px; padding: 7px 7px calc(7px + var(--safe-bottom)); border-top: 1px solid #b8e7eb; background: linear-gradient(180deg, #16445bec, #092b43f6); box-shadow: inset 0 1px #ffffff47, 0 -10px 28px #071d3380; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tabs button { position: relative; align-content: center; gap: 4px; min-height: 58px; padding: 4px 1px; border: 1px solid transparent; border-radius: 10px; color: #b7dae3; font-size: var(--fs-xs); font-weight: 750; transition: background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) var(--ease-out); }
.tabs button::before { display: none !important; content: none !important; }
.tabs button .ui-icon { width: 25px; height: 25px; }
.tabs button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs button:active { transform: scale(.96); }
.tabs button.active { color: var(--c-heading); border-color: #dbd7aa9e; background: linear-gradient(#55809480, #1b527099); box-shadow: inset 0 1px #ffffff79, 0 0 16px #9cebf166; }
.tabs button.active .ui-icon { filter: drop-shadow(0 0 7px #eab465aa); }

/* Reusable cards, actions, tags and fields for all screens. */
.card { border-color: #7fb8c9; border-radius: var(--r-lg); background: linear-gradient(155deg, #245772f2, #0c304bf5); box-shadow: inset 0 1px #ffffff2a, var(--ui-shadow); }
.card::before { content: ""; position: absolute; inset: 5px; border: 1px solid #b4d4d019; border-radius: 11px; pointer-events: none; }
.card h2 { color: #fff6df; letter-spacing: -.02em; }
.card p { color: #d5e2e0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; border-radius: var(--r-sm); transition: filter var(--dur-1) ease, transform var(--dur-1) var(--ease-out), border-color var(--dur-1) ease; }
.btn:disabled { opacity: .45; filter: saturate(.5); }
.btn.secondary { background: linear-gradient(#3c7180, #1c485f); border-color: #83c4c6; color: #e8fff9; }
.btn.subtle { background: linear-gradient(#29495a, #173246); border-color: #648693; color: #e0f0ed; }
input, select { min-height: 44px; border-radius: var(--r-sm); background: #0a2233; }
input:focus, select:focus { border-color: var(--c-biomass); }
body.game-mode .resource-tile { min-height: 47px; padding: 5px; border: 1px solid #b6e7e79c; border-bottom-color: #e0c58f; background: linear-gradient(155deg, #1a4764ed, #0c2d45f2); box-shadow: inset 0 1px #ffffff61, inset 0 -1px #071b2866, 0 5px 14px #09263777; }
body.game-mode .resource-tile strong { color: var(--ui-ink); font-size: 15px; }
body.game-mode .resource-tile small { color: #c8d6d6; font-size: var(--fs-xs); letter-spacing: -.02em; }
body.game-mode .resource-credits .resource-icon { color: #ffe29b; }
body.game-mode .resource-biomass .resource-icon { color: #9ff5de; }
body.game-mode .resource-score .resource-icon { color: #a9e8ff; }
body.game-mode .tower-heading { top: calc(var(--safe-top) + 119px); padding: 7px 10px; border: 1px solid #b1e8ecb0; border-radius: var(--r-sm); background: linear-gradient(120deg, #0b304adf, #164661cc); box-shadow: inset 0 1px #ffffff50, 0 8px 20px #06203570; }
body.game-mode .tower-heading .eyebrow { color: #a5eff0; }
body.game-mode .tower-heading h2 { color: #fff9eb; text-shadow: 0 2px 7px #071e31; }
/* Floor buttons keep their 42 px look; the hit area grows to 46 px (FE-35). */
body.game-mode .tower-rail { top: 37%; width: 42px; gap: 8px; }
body.game-mode .tower-rail button { position: relative; width: 42px; height: 42px; border: 1px solid #afe8ec; color: #e9faff; background: linear-gradient(#1b5169e8, #10354fe8); box-shadow: inset 0 1px #ffffff52, 0 3px 10px #0926378c; font-weight: 800; font-variant-numeric: var(--num); backdrop-filter: blur(8px); }
body.game-mode .tower-rail button::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; }
body.game-mode .tower-rail button.active { border-color: #ffebb8; color: #16344b; background: linear-gradient(#fff4cf, #ddbb7a); box-shadow: 0 0 16px #ffe1a7a6; }
body.game-mode .game-action-bar { bottom: calc(78px + var(--safe-bottom)); display: grid; gap: 7px; padding: 8px 9px 9px; border: 1px solid #a8e2e7; border-bottom-color: #e4c48c; border-radius: var(--r-md); background: linear-gradient(145deg, #154866f2, #092d46f5); box-shadow: inset 0 1px #ffffff65, 0 8px 30px #061e32a1; }
.action-header { display: flex; align-items: center; gap: 5px; color: #fff5df; }
.action-header .ui-icon { width: 16px; height: 16px; color: var(--c-gold); }
.action-header > span { font-size: var(--fs-sm); font-weight: 850; }
.action-header small { margin-left: auto; color: #addde4; font-size: var(--fs-overline); font-weight: 800; letter-spacing: .12em; }
.action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.action-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.game-mode .game-action-bar .action-button { display: flex; flex-wrap: nowrap; justify-content: center; min-width: 0; min-height: 44px; padding: 4px 3px; border-radius: 8px; border-color: #83bfd1; color: #ecfbff; background: linear-gradient(#316780, #17455f); box-shadow: inset 0 1px #ffffff47; font-size: var(--fs-xs); line-height: 1; white-space: nowrap; }
body.game-mode .game-action-bar .action-button.secondary { border-color: #8cdbe0; background: linear-gradient(#3e8392, #236074); }
body.game-mode .game-action-bar .action-button.subtle { border-color: #779bae; background: linear-gradient(#31566b, #183d55); }
body.game-mode .game-action-bar #action-quest { border-color: #ffe8b3; color: #3f2c15; background: linear-gradient(#fff0ba, #e9b96d); box-shadow: inset 0 1px #fffce1, 0 2px 0 #926439; }
.action-button .ui-icon { width: 18px; height: 18px; }
.action-button .action-label { overflow: hidden; text-overflow: ellipsis; }
.action-button .action-cost { display: inline-block; padding: 2px 3px; border-radius: 4px; background: #061e2c88; color: #fce3aa; font-size: var(--fs-xs); font-variant-numeric: var(--num); }
.action-button#action-credit { color: #f7e1b2; }
.action-button#action-biomass .ui-icon { color: var(--c-biomass); }
.action-button#action-quest { background: linear-gradient(#f7d490, #d89d4f); color: #302011; }
body.game-mode .tower-spot-label { border-color: #bcdee0; border-radius: 6px; color: #fff9e9; background: #10394adf; box-shadow: inset 0 1px #ffffff46, 0 3px 10px #08263f99; }
.card .meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card .meter { text-align: left; padding: 9px 11px; background: #0c2839; }
.card .meter small { font-size: var(--fs-xs); }
.card .meter strong { font-size: 18px; }
input[type="checkbox"] { appearance: none; width: 20px; height: 20px; min-height: 20px; margin: 0 5px 0 0; vertical-align: middle; border: 1.5px solid #9ac9c5; border-radius: 5px; background: #102e3e; cursor: pointer; }
input[type="checkbox"]:checked { background: var(--c-biomass); border-color: var(--c-biomass); box-shadow: inset 0 0 0 4px #102e3e; }
.card label:has(input[type="checkbox"]) { display: inline-flex; align-items: center; min-height: 44px; }
.egg-shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.egg-offer { display: grid; justify-items: center; gap: 3px; min-width: 0; min-height: 96px; padding: 9px 4px; border: 1px solid #78949d; border-radius: 10px; color: #d5e9e3; background: linear-gradient(#2a5162, #123044); box-shadow: inset 0 1px #ffffff26; }
.egg-offer > .ui-icon { width: 25px; height: 25px; color: #f2d397; }
.egg-offer strong { font-family: var(--font-display); color: var(--c-heading); font-size: var(--fs-md); text-transform: capitalize; }
.egg-offer span { display: flex; align-items: center; gap: 3px; color: #f6d391; font-size: var(--fs-sm); font-weight: 900; font-variant-numeric: var(--num); }
.egg-offer span .ui-icon { width: 13px; height: 13px; }
.egg-offer small { color: #bbd4d2; font-size: var(--fs-xs); }
.egg-rare { border-color: #9b91b3; }
.egg-special { border-color: #d8b67d; }
.card .row .btn .ui-icon { width: 16px; height: 16px; }

/* Hover exists only where a real pointer hovers; on touch it would stick after a tap (FE-22). */
@media (hover: hover) and (pointer: fine) {
  .ghost:hover { border-color: var(--c-gold); color: #fff4db; }
  .tabs button:hover { color: #f0dfb8; background-color: #ffffff10; }
  .btn:hover:not(:disabled) { filter: brightness(1.1); }
  .egg-offer:hover { filter: brightness(1.1); }
  .utility-menu > button:hover { background: #a5e4e71a; }
}

@media (max-width: 380px) {
  .resource-tile { gap: 3px; padding-inline: 3px; }
  .resource-icon { flex-basis: 19px; width: 19px; }
  .resource-icon .ui-icon { width: 19px; height: 19px; }
  .resource-tile strong { font-size: 13px; }
  .action-button .ui-icon { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .tabs button, .btn { transition: none; } }

/* The play field begins at the top edge; only useful resource data floats above it. */
.menu-toggle { position: fixed; z-index: calc(var(--z-hud) + 1); top: calc(var(--safe-top) + 8px); right: max(8px, calc((100vw - 520px) / 2 + 8px)); display: grid; place-items: center; width: 47px; height: 47px; padding: 0; border-color: #b6e7e79c; background: linear-gradient(155deg, #1a4764ed, #0c2d45f2); box-shadow: inset 0 1px #ffffff61, 0 5px 14px #09263777; }
.menu-toggle.active { border-color: var(--c-gold); color: var(--c-gold); }
.menu-bars { display: grid; gap: 4px; }
.menu-bars i { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; }
.utility-menu { position: fixed; z-index: calc(var(--z-nav) + 1); top: calc(var(--safe-top) + var(--hud-h) + 7px); right: max(8px, calc((100vw - 520px) / 2 + 8px)); width: min(275px, calc(100vw - 16px)); max-height: calc(100dvh - var(--safe-top) - var(--hud-h) - var(--nav-h) - var(--safe-bottom) - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 7px; border: 1px solid #b6e7e7a8; border-radius: 13px; background: linear-gradient(155deg, #1d4d66f7, #08253dfb); box-shadow: 0 16px 42px #03131ee0, inset 0 1px #ffffff69; backdrop-filter: blur(18px); transform-origin: top right; transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
@starting-style { .utility-menu { opacity: 0; transform: scale(.97); } }
.utility-menu[hidden] { display: none; }
.utility-menu > button { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 49px; padding: 8px 10px; border: 0; border-bottom: 1px solid #abd5d537; color: #f5fbf8; background: transparent; text-align: left; font-size: 13px; font-weight: 750; }
.utility-menu > button .ui-icon, .utility-menu > button .icon { width: 20px; height: 20px; color: var(--c-gold); }
.utility-menu > button strong { margin-left: auto; color: var(--c-gold); }
.utility-menu p { margin: 9px 9px 5px; color: #b8d4da; font-size: var(--fs-xs); line-height: 1.4; }
body.game-mode #meters { top: calc(var(--safe-top) + 8px); width: min(calc(100% - 16px), 504px); padding-right: 52px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.siege-mode .hero { display: none; }
body.siege-mode #meters { padding-right: 52px; }

/* ===== UI primitives (contract with app.js: spec 3.4). =====
   Motion rules: enter with a strong ease-out, leave faster than entering, never from scale(0),
   transitions (interruptible) for anything that can be re-triggered, nothing over 400 ms. */

/* SVG icons from /assets/icons via a mask: colour follows `color`.
   <span class="icon icon-mask" style="--icon:url(/assets/icons/x.svg)" aria-hidden="true"></span> */
.icon { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -.2em; }
.icon-mask { background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }

/* Toasts: one stack above the bottom navigation; newest at the bottom, nearest the thumb. */
.toast-stack { position: fixed; z-index: var(--z-toast); left: 50%; bottom: calc(var(--nav-h) + var(--safe-bottom) + 10px); display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); width: min(calc(100% - 24px), 496px); transform: translateX(-50%); pointer-events: none; }
body.gate-mode .toast-stack, html.battle-open .toast-stack { bottom: calc(var(--safe-bottom) + 16px); }
.toast { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 9px 8px 9px 12px; border: 1px solid #a8d8e2b3; border-left-width: 3px; border-radius: var(--r-md); color: var(--c-text); background: linear-gradient(150deg, #19496aF7, #0b2b45fa); box-shadow: inset 0 1px #ffffff40, 0 10px 28px #020f1ccc; font-size: var(--fs-md); line-height: 1.35; pointer-events: auto; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
@starting-style { .toast { opacity: 0; transform: translateY(10px) scale(.98); } }
.toast--leaving { opacity: 0; transform: translateY(6px) scale(.98); transition-duration: var(--dur-1); pointer-events: none; }
.toast__icon { flex: none; width: 22px; height: 22px; color: var(--c-aqua); }
.toast__text, .toast__body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast__action { flex: none; min-height: 36px; padding: 6px 10px; border: 1px solid currentColor; border-radius: var(--r-sm); color: var(--c-gold); background: transparent; font-size: var(--fs-sm); font-weight: 800; }
.toast__close { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-sm); color: var(--c-text-2); background: transparent; font-size: 20px; line-height: 1; }
.toast__close::after { content: ""; position: absolute; inset: -6px; }
.toast--success { border-left-color: var(--c-success); }
.toast--success .toast__icon { color: var(--c-success); }
.toast--error { border-color: #e8a59ab3; border-left-color: var(--c-danger); background: linear-gradient(150deg, #4a2a35f7, #2b1a26fa); }
.toast--error .toast__icon { color: var(--c-danger); }
.toast--reward { border-color: #ffe0a0b3; border-left-color: var(--c-gold); box-shadow: inset 0 1px #fff3cf55, 0 0 22px #ffda9133, 0 10px 28px #020f1ccc; }
.toast--reward .toast__icon { color: var(--c-gold); }
.toast--info { border-left-color: var(--c-aqua); }

/* Sheets: one bottom sheet for every picker; the panel scrolls, the page does not. */
.sheet { position: fixed; z-index: var(--z-sheet); inset: 0; display: flex; align-items: flex-end; justify-content: center; visibility: hidden; pointer-events: none; transition: visibility 0s linear var(--dur-2); }
.sheet--open { visibility: visible; pointer-events: auto; transition: none; }
.sheet__backdrop { position: absolute; inset: 0; background: #061526cf; opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.sheet--open .sheet__backdrop { opacity: 1; }
.sheet__panel { position: relative; display: flex; flex-direction: column; width: min(100%, 520px); max-height: calc(100dvh - var(--safe-top) - 24px); border: 1px solid #b2dde1; border-bottom: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; color: var(--c-text); background: linear-gradient(#255e7a, #0c304b 58%, #08253b); box-shadow: 0 -14px 40px #020b17; transform: translateY(100%); transition: transform var(--dur-2) var(--ease-out); }
.sheet--open .sheet__panel { transform: none; transition: transform var(--dur-3) var(--ease-drawer); }
@starting-style { .sheet--open .sheet__panel { transform: translateY(100%); } .sheet--open .sheet__backdrop { opacity: 0; } }
.sheet__panel::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; border-radius: 2px; background: #cfe7ec55; transform: translateX(-50%); }
.sheet__panel:focus { outline: none; }
.sheet__head { display: flex; flex: none; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: 18px var(--sp-4) var(--sp-2); }
.sheet__title { margin: 0; color: var(--c-heading); font: 700 var(--fs-xl)/1.2 var(--font-display); font-variant-numeric: var(--num); }
.sheet__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -6px 0 0; padding: 0; border: 1px solid #aad9df; border-radius: var(--r-sm); color: #fff; background: #143b57; font-size: 24px; line-height: 1; }
.sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 var(--sp-4) calc(var(--sp-4) + var(--safe-bottom)); }

/* Confirmation dialog (web; Telegram uses its native confirm). Centred, so it scales from centre. */
.dialog { position: fixed; z-index: var(--z-dialog); inset: 0; display: grid; place-items: center; padding: var(--sp-4); background: #061526d9; transition: opacity var(--dur-1) var(--ease-out); }
@starting-style { .dialog { opacity: 0; } }
.dialog[hidden] { display: none; }
.dialog__panel { width: min(100%, 360px); padding: 20px; border: 1px solid #b2dde1; border-radius: var(--r-lg); color: var(--c-text); background: linear-gradient(160deg, #235b78, #0b2a45); box-shadow: inset 0 1px #ffffff55, 0 20px 50px #020b17; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
@starting-style { .dialog__panel { opacity: 0; transform: scale(.96); } }
.dialog__panel:focus { outline: none; }
.dialog__title { margin: 0 0 var(--sp-2); color: var(--c-heading); font: 700 var(--fs-xl)/1.2 var(--font-display); font-variant-numeric: var(--num); }
.dialog__body, .dialog__panel p { margin: 0; color: var(--c-text-2); font-size: var(--fs-md); line-height: 1.45; }
.dialog__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.dialog__actions .btn { flex: 1; min-width: 0; }
.dialog--danger .dialog__panel { border-color: #e8a59a; }

/* Skeletons: the shape of what is loading, with a slow sheen. */
.skeleton { position: relative; display: block; overflow: hidden; border-radius: var(--r-sm); background: #cfe7ec14; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ffffff12 50%, transparent); transform: translateX(-100%); animation: skeleton-sheen 1.3s linear infinite; }
.skeleton--line { height: 12px; margin: 8px 0; }
.skeleton--line:nth-child(3n+2) { width: 82%; }
.skeleton--line:nth-child(3n) { width: 58%; }
.skeleton--card { height: 112px; margin-bottom: var(--sp-3); border-radius: var(--r-lg); }
.skeleton--avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; }
.skeleton--row { height: 56px; margin-bottom: var(--sp-2); border-radius: var(--r-md); }
@keyframes skeleton-sheen { to { transform: translateX(100%); } }

/* "Something to collect" dot on a tab or menu item. */
.badge-dot { position: absolute; z-index: 1; top: 5px; right: calc(50% - 21px); width: 10px; height: 10px; border-radius: 50%; background: #ff8a6b; box-shadow: 0 0 0 2px #0b2b45; pointer-events: none; }
.utility-menu > button .badge-dot { position: static; flex: none; margin-left: auto; }
.utility-menu > button strong + .badge-dot { margin-left: 8px; }

/* Offline banner under the HUD. */
.net-banner { position: fixed; z-index: var(--z-toast); top: calc(var(--safe-top) + var(--hud-h) + 6px); left: 50%; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: max-content; max-width: calc(100% - 24px); min-height: 36px; padding: 6px 14px; border: 1px solid #e8a59ab3; border-radius: var(--r-pill); color: #ffe9e4; background: #4a2a35f2; box-shadow: 0 8px 22px #020f1ccc; font-size: var(--fs-sm); font-weight: 750; transform: translateX(-50%); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
@starting-style { .net-banner { opacity: 0; transform: translate(-50%, -6px); } }
.net-banner[hidden] { display: none; }

/* Reward flight from the source to its HUD tile (positioned and moved by rewardBurst()). */
.reward-fly { position: fixed; z-index: var(--z-toast); top: 0; left: 0; display: grid; place-items: center; width: 30px; height: 30px; pointer-events: none; filter: drop-shadow(0 0 8px currentColor); will-change: transform, opacity; }
.reward-fly > img, .reward-fly > .ui-icon, .reward-fly > .icon { width: 100%; height: 100%; }
.meter-delta { position: absolute; z-index: 2; top: -8px; right: 4px; padding: 1px 6px; border-radius: var(--r-pill); background: #0b2b45e6; font-size: var(--fs-sm); font-weight: 850; line-height: 1.3; font-variant-numeric: var(--num); white-space: nowrap; pointer-events: none; animation: meter-delta 1s var(--ease-out) both; }
.meter-delta--plus { color: var(--c-success); }
.meter-delta--minus { color: var(--c-danger); }
@keyframes meter-delta { 0% { opacity: 0; transform: translateY(4px); } 15%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }

/* Empty states: illustration, one line of title, one of guidance, at most one action. */
.empty-state { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); text-align: center; }
.empty-state__art { display: block; width: 160px; height: 120px; object-fit: contain; }
.empty-state__title { margin: var(--sp-1) 0 0; color: var(--c-heading); font: 700 var(--fs-xl)/1.2 var(--font-display); font-variant-numeric: var(--num); }
.empty-state__text { max-width: 300px; margin: 0; color: var(--c-text-2); font-size: 13px; line-height: 1.45; }
.empty-state .btn { margin-top: var(--sp-2); }

/* Monetisation surfaces. */
.btn-cta-buy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 1px solid #ffe0a0; border-radius: var(--r-sm); color: #fff3d6; background: linear-gradient(#3a6f86, #174a66); box-shadow: inset 0 1px #fff3cf66, 0 3px 0 #0a3049; font-weight: 850; font-variant-numeric: var(--num); text-decoration: none; transition: filter var(--dur-1) ease, transform var(--dur-1) var(--ease-out); }
.btn-cta-buy:active { transform: scale(.97); }
.btn-cta-buy .icon, .btn-cta-buy .ui-icon { width: 18px; height: 18px; color: var(--c-gold); }
.btn-cta-buy small { color: var(--c-gold); font-weight: 750; }
.offer-card { position: relative; padding: var(--sp-4); border: 1px solid #e7cf95; border-radius: var(--r-lg); color: var(--c-text); background: radial-gradient(circle at 88% 0%, #f3c77833, transparent 46%), linear-gradient(150deg, #2b5a78, #123a58 55%, #0b2a45); box-shadow: inset 0 1px #fff3cf70, 0 10px 26px #00192b8c; }
.offer-card__tag { position: absolute; top: -10px; right: var(--sp-3); padding: 3px 9px; border-radius: var(--r-pill); color: var(--c-gold-ink); background: linear-gradient(#fff2c3, var(--c-gold-2)); font-size: var(--fs-overline); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.offer-card__timer { display: inline-flex; align-items: center; gap: 5px; color: var(--c-warning); font-size: var(--fs-sm); font-weight: 800; font-variant-numeric: var(--num); }
.price-anchor { color: var(--c-text-3); font-size: .85em; font-weight: 600; font-variant-numeric: var(--num); text-decoration: line-through; text-decoration-thickness: 1px; }
.today-card { padding: 14px var(--sp-4); border: 1px solid #a8d8e2; border-radius: var(--r-lg); background: linear-gradient(150deg, #1f5574, #0c2f4a); box-shadow: inset 0 1px #ffffff55, 0 10px 24px #00192b85; }
.today-card__item { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: var(--sp-2) 0; border-top: 1px solid #a8d8e233; color: var(--c-text); font-size: var(--fs-md); }
.today-card__item:first-of-type { border-top: 0; }
.today-card__item .btn, .today-card__item .btn-cta-buy { flex: none; margin-left: auto; }
.coach-card { padding: var(--sp-3) 14px; border: 1px solid #87f5dd88; border-radius: var(--r-md); color: var(--c-text); background: #0f3a50; font-size: 13px; line-height: 1.45; }
.coach-card strong { color: var(--c-aqua); }

/* Tab change: short cross-fade, no movement. View Transitions get the same duration. */
.tab-enter { animation: tab-enter 180ms var(--ease-out) both; }
@keyframes tab-enter { from { opacity: 0; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: var(--ease-out); }

/* Battle feedback. */
.hp-fill { display: block; height: 100%; border-radius: inherit; transition: width var(--dur-2) var(--ease-out); }
.is-hit { animation: is-hit 200ms var(--ease-out); }
.is-acting { animation: is-acting 260ms var(--ease-out); }
.combat-fighters.theirs.is-acting { animation-name: is-acting-left; }
@keyframes is-hit { 25% { transform: translateX(-5px); filter: brightness(1.5); } 60% { transform: translateX(4px); } }
@keyframes is-acting { 45% { transform: translateX(14px); } }
@keyframes is-acting-left { 45% { transform: translateX(-14px); } }

/* Reduced motion keeps opacity and colour changes, removes movement and loops. */
@media (prefers-reduced-motion: reduce) {
  .toast, .toast--leaving, .net-banner, .utility-menu { transform: none; transition-property: opacity; }
  .sheet__panel, .sheet--open .sheet__panel { transform: none; transition: none; }
  .dialog__panel { transform: none; transition: opacity var(--dur-1) linear; }
  .skeleton::after { animation: none; }
  .meter-delta { animation: none; }
  .tab-enter, .is-hit, .is-acting { animation: none; }
  .hp-fill { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}