/* stage4a.css — экраны волны 4а веб-приложения (на токенах kit.css).
 * Блоки: ТОКЕНЫ · ДОМ: КОМНАТА · ДОМ: ПРАВКА · ДОМ: ПАНЕЛЬ · КАТАЛОГ И
 * РЕМОНТ · СУНДУК · СОСЕДИ · СОЗВЕЗДИЕ · ВЫЛАЗКИ И ТРОФЕИ · НАЖИМАЕМОЕ.
 * Правила (как stage3b.css): цвета — только var(--…), currentColor,
 * transparent и color-mix(… var(--…) …); длительности — var(--dur-*)
 * (свои — токенами на :root); всё интерактивное не выделяется долгим
 * нажатием (user-select + -webkit-user-select + -webkit-touch-callout);
 * тап-цели ≥ 44 px; prefers-reduced-motion гасит движения.
 * Комната и небо — иллюстрации «keriteri night»: одни и те же в обеих темах
 * (как у десктопа); вокруг них — токены темы. На SVG — никаких CSS-фильтров
 * (Safari их не рисует): тени нарисованы в самом арте, туманности неба —
 * радиальными градиентами. */

/* == ТОКЕНЫ ================================================================ */
:root {
  --hr-bg: #171022; --hr-shade: #000; --hr-glow: #fff; --hr-lamp: #ffcf87; --hr-moon: #c8dcff;
  --hr-wood-lt: #a5744c; --hr-wood: #6e4a30; --hr-wood-dk: #4a331d; --hr-vig: #0e0816;
  --hr-wall-hi: #5b4874; --hr-wall-base: #4c3a62; --hr-wall-dark: #40304f;
  --hr-floor-hi: #7f5a3b; --hr-floor-base: #6e4a30; --hr-floor-dark: #583a24;
  --hr-ceil-base: #40314f; --hr-ceil-dark: #332748; --hr-star: #ffe9b0;
  --sky-bg1: #1b1438; --sky-bg2: #0b0818; --sky-star: #c4baf0; --sky-ready: #cfc4ff; --sky-ready-sense: #b9ecef;
  --sky-lit: #ffd66a; --sky-guest: #bcd9ff; --sky-edge: #b2a6ff; --sky-label: #e4defc; --sky-paw: #f0e8ff;
  --sky-neb-paws: #966eff; --sky-neb-sense: #5abec8; --sky-dust: #c8beff;
  --dur-twinkle: 3.2s; --dur-flare: 1.2s; --dur-zero: 0s;
}
:root[data-theme="light"] {
  /* Ночь в комнате и на небе — и в светлой теме (иллюстрация, как у десктопа). */
  --hr-bg: #171022; --sky-bg1: #241a4a; --sky-bg2: #110c24;
}

/* == ДОМ: КОМНАТА (ui/room.js) ============================================= */
.hs-body, .sk-body, .tr-body, .nb-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 4px var(--gutter) 24px; }
.scr-house .sub-title, .scr-stars .sub-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-stage { display: grid; justify-items: center; }
.hs-room {
  position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; max-height: 68vh;
  border-radius: var(--r-5); overflow: hidden; background: var(--hr-bg);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--hr-lamp) 14%, transparent), var(--e2);
  --wall-hi: var(--hr-wall-hi); --wall-base: var(--hr-wall-base); --wall-dark: var(--hr-wall-dark);
  --floor-hi: var(--hr-floor-hi); --floor-base: var(--hr-floor-base); --floor-dark: var(--hr-floor-dark);
  --ceil-base: var(--hr-ceil-base); --ceil-dark: var(--hr-ceil-dark);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.hs-room > div, .hr-window { position: absolute; pointer-events: none; }
.hr-ceil { inset: 0; clip-path: polygon(0 0, 100% 0, 84% 13%, 16% 13%); background: linear-gradient(180deg, var(--ceil-dark), var(--ceil-base)); }
.hr-wall-l { inset: 0; clip-path: polygon(0 0, 16% 13%, 16% 62%, 0 100%); background: linear-gradient(90deg, var(--wall-dark), var(--wall-hi)); }
.hr-wall-r { inset: 0; clip-path: polygon(100% 0, 84% 13%, 84% 62%, 100% 100%); background: linear-gradient(270deg, var(--wall-dark), var(--wall-hi)); }
.hr-wall {
  left: 16%; right: 16%; top: 13%; bottom: 38%;
  background: repeating-linear-gradient(90deg, transparent 0 30px, color-mix(in srgb, var(--hr-shade) 5%, transparent) 30px 31px),
    linear-gradient(180deg, var(--wall-hi), var(--wall-base) 68%, var(--wall-dark));
  box-shadow: inset 0 -22px 40px color-mix(in srgb, var(--hr-shade) 26%, transparent);
}
.hr-lamp { left: 6%; top: 4%; width: 60%; height: 70%; background: radial-gradient(52% 60% at 26% 22%, color-mix(in srgb, var(--hr-lamp) 30%, transparent), transparent 72%); }
.hr-window { left: 50%; bottom: 44%; width: 33%; height: 34%; transform: translateX(-50%); }
.hr-window svg { display: block; width: 100%; height: 100%; }
.hr-sill { left: 50%; transform: translateX(-50%); bottom: 42.4%; width: 37%; height: 1.9%; border-radius: 2px; background: linear-gradient(180deg, var(--hr-wood-lt), var(--hr-wood)); }
.hr-shelf { right: 16%; bottom: 58%; width: 20%; height: 2.2%; border-radius: 2px; background: linear-gradient(180deg, var(--hr-wood-lt), var(--hr-wood)); box-shadow: 0 5px 10px color-mix(in srgb, var(--hr-shade) 42%, transparent); }
.hr-floor {
  inset: 0; clip-path: polygon(0 100%, 100% 100%, 84% 62%, 16% 62%);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--hr-shade) 12%, transparent) 0 1px, transparent 1px 8%),
    linear-gradient(180deg, var(--floor-hi) 0, var(--floor-base) 46%, var(--floor-dark) 100%);
}
.hr-baseboard { left: 16%; right: 16%; bottom: 38%; height: 1.7%; background: linear-gradient(180deg, var(--floor-base), var(--floor-dark)); }
.hr-baseboard-l { inset: 0; clip-path: polygon(0 100%, 4% 100%, 19.4% 62%, 16% 62%); background: linear-gradient(120deg, var(--floor-dark), var(--floor-base)); }
.hr-baseboard-r { inset: 0; clip-path: polygon(100% 100%, 96% 100%, 80.6% 62%, 84% 62%); background: linear-gradient(240deg, var(--floor-dark), var(--floor-base)); }
.hr-vig { inset: 0; z-index: 9; background: radial-gradient(125% 92% at 50% 30%, transparent 50%, color-mix(in srgb, var(--hr-vig) 62%, transparent)); }
/* Текстуры ремонта (houselogic.themeLook — классы на корне комнаты). */
.hs-room.floor-checker .hr-floor { background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--hr-shade) 16%, transparent) 0 1px, transparent 1px 7%), repeating-conic-gradient(color-mix(in srgb, var(--hr-shade) 18%, transparent) 0 90deg, transparent 0 180deg); background-size: auto, 26px 26px; }
.hs-room.floor-marble .hr-floor { background-image: radial-gradient(60% 40% at 30% 30%, color-mix(in srgb, var(--hr-glow) 35%, transparent), transparent 60%), linear-gradient(180deg, var(--floor-hi) 0, var(--floor-base) 46%, var(--floor-dark) 100%); }
.hs-room.floor-grass .hr-floor { background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--hr-shade) 10%, transparent) 0 2px, transparent 2px 5px), linear-gradient(180deg, var(--floor-hi) 0, var(--floor-base) 46%, var(--floor-dark) 100%); }
.hs-room.floor-parquet .hr-floor { background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--hr-glow) 10%, transparent) 0 3px, transparent 3px 11px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--hr-shade) 10%, transparent) 0 3px, transparent 3px 11px), linear-gradient(180deg, var(--floor-hi) 0, var(--floor-base) 46%, var(--floor-dark) 100%); }
.hs-room.floor-tatami .hr-floor { background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--hr-shade) 30%, transparent) 0 2px, transparent 2px 25%), repeating-linear-gradient(0deg, color-mix(in srgb, var(--hr-shade) 22%, transparent) 0 2px, transparent 2px 50%), linear-gradient(180deg, var(--floor-hi) 0, var(--floor-base) 46%, var(--floor-dark) 100%); }
.hs-room.floor-sand .hr-floor { background-image: repeating-radial-gradient(120% 60% at 50% 120%, color-mix(in srgb, var(--hr-glow) 10%, transparent) 0 6px, transparent 6px 16px), linear-gradient(180deg, var(--floor-hi) 0, var(--floor-base) 46%, var(--floor-dark) 100%); }
.hs-room.wall-stripes .hr-wall { background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--hr-glow) 7%, transparent) 0 10px, transparent 10px 22px), linear-gradient(180deg, var(--wall-hi), var(--wall-base) 68%, var(--wall-dark)); }
.hs-room.wall-dots .hr-wall { background-image: radial-gradient(color-mix(in srgb, var(--hr-glow) 10%, transparent) 1.6px, transparent 2px), linear-gradient(180deg, var(--wall-hi), var(--wall-base) 68%, var(--wall-dark)); background-size: 20px 20px, auto; }
.hs-room.wall-brick .hr-wall { background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--hr-shade) 22%, transparent) 0 1px, transparent 1px 13px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--hr-shade) 22%, transparent) 0 1px, transparent 1px 26px), linear-gradient(180deg, var(--wall-hi), var(--wall-base) 68%, var(--wall-dark)); }
.hs-room.wall-forest .hr-wall { background-image: repeating-linear-gradient(63deg, color-mix(in srgb, var(--hr-shade) 30%, transparent) 0 9px, transparent 9px 26px), repeating-linear-gradient(-63deg, color-mix(in srgb, var(--hr-shade) 30%, transparent) 0 9px, transparent 9px 26px), linear-gradient(180deg, var(--wall-hi), var(--wall-base) 68%, var(--wall-dark)); }
.hs-room.wall-scales .hr-wall { background-image: radial-gradient(circle at 50% 100%, transparent 8px, color-mix(in srgb, var(--hr-glow) 13%, transparent) 9px, transparent 10px), linear-gradient(180deg, var(--wall-hi), var(--wall-base) 68%, var(--wall-dark)); background-size: 22px 11px, auto; }
.hs-room.wall-stars .hr-wall, .hs-room.ceil-stars .hr-ceil { background-image: radial-gradient(color-mix(in srgb, var(--hr-star) 90%, transparent) 1px, transparent 1.4px), radial-gradient(color-mix(in srgb, var(--hr-star) 50%, transparent) 1px, transparent 1.4px), linear-gradient(180deg, var(--wall-hi), var(--wall-dark)); background-size: 34px 34px, 54px 48px, auto; background-position: 0 0, 18px 14px, 0 0; }
.hs-room.ceil-stars .hr-ceil { background-image: radial-gradient(color-mix(in srgb, var(--hr-star) 90%, transparent) 1px, transparent 1.4px), radial-gradient(color-mix(in srgb, var(--hr-star) 50%, transparent) 1px, transparent 1.4px), linear-gradient(180deg, var(--ceil-dark), var(--ceil-base)); }
.hs-room.ceil-beams .hr-ceil { background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--hr-shade) 28%, transparent) 0 2px, transparent 2px 15%), linear-gradient(180deg, var(--ceil-dark), var(--ceil-base)); }
.hs-room.ceil-gild .hr-ceil { background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--hr-glow) 12%, transparent) 0 3px, transparent 3px 12px), linear-gradient(180deg, var(--ceil-dark), var(--ceil-base)); }
.hs-room.ceil-clouds .hr-ceil { background-image: radial-gradient(38% 60% at 22% 70%, color-mix(in srgb, var(--hr-glow) 24%, transparent), transparent 70%), radial-gradient(30% 52% at 58% 40%, color-mix(in srgb, var(--hr-glow) 18%, transparent), transparent 70%), linear-gradient(180deg, var(--ceil-dark), var(--ceil-base)); }
/* Мебель: кнопка-слот, арт — SVG с готовыми цветами. */
.hs-slot {
  position: absolute; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 1 / 1;
  padding: 0; border: 0; border-radius: var(--r-3); background: none; cursor: pointer; transform-origin: center bottom;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: translate var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
}
.hs-slot.k-center { align-items: center; }
.hs-slot.k-hang { align-items: flex-start; aspect-ratio: auto; }
.hs-slot.k-dress { align-items: stretch; aspect-ratio: auto; }
.hs-art { display: block; width: 100%; height: 100%; pointer-events: none; }
.hs-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hs-slot:focus-visible { outline: 2px solid var(--hr-lamp); outline-offset: 2px; }

/* == ДОМ: ПРАВКА («Обставить», перетаскивание) ============================= */
.hs-room.is-edit { touch-action: none; }        /* палец двигает мебель, а не страницу */
.hs-room.is-edit .hs-slot:not(.is-empty) { outline: 1.5px dashed color-mix(in srgb, var(--hr-lamp) 55%, transparent); outline-offset: -3px; }
.hs-plus {
  display: grid; place-items: center; width: min(44px, 80%); aspect-ratio: 1 / 1; margin: auto; border-radius: 50%;
  color: var(--hr-lamp); font-size: 20px; font-weight: 800; pointer-events: none;
  background: color-mix(in srgb, var(--hr-lamp) 12%, transparent); outline: 1.5px dashed color-mix(in srgb, var(--hr-lamp) 60%, transparent);
}
.hs-plus::before { content: "+"; }
.hs-slot.is-drag { z-index: 20 !important; opacity: .92; transition: none; cursor: grabbing; }
.hs-room.is-dragging .hs-slot:not(.is-drag):not(.is-drop) { opacity: .5; }
.hs-slot.is-drop { outline: 2px solid var(--hr-lamp) !important; outline-offset: -3px; background: color-mix(in srgb, var(--hr-lamp) 14%, transparent); }
.hs-hint { margin: 0; color: var(--ink-dim); font-size: 13px; font-weight: 700; line-height: 1.4; text-align: center; }

/* == ДОМ: ПАНЕЛЬ (уют, просьба, действия, гости) =========================== */
.hs-panel { display: grid; gap: 10px; }
.hs-req {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--r-4);
  background: color-mix(in srgb, var(--lav) 10%, var(--raise)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lav) 35%, transparent);
  color: var(--panel-fg); font-size: 14px; font-weight: 800; line-height: 1.35;
}
.hs-req .ki { flex: none; color: var(--lav); font-size: 20px; }
.hs-req span { flex: 1; min-width: 0; }
.hs-req small { flex: none; color: var(--gold-ink); font-size: 13px; font-weight: 900; }
.hs-cozy h2 .ki { color: var(--gold-ink); }
.hs-cozy-n { color: var(--ink-dim); font-size: 12px; font-weight: 700; }
.hs-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-acts > .btn, .hs-acts > .osh-act { flex: 1 1 calc(50% - 8px); min-width: 0; min-height: var(--tap); }
.hs-acts > .osh-act > .btn { width: 100%; }
.hs-acts .ask-row { flex-basis: 100%; }
.hs-chest-w:has(.ask-row) { flex-basis: 100%; }
.hs-glist { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
.hs-glist::-webkit-scrollbar { display: none; }
.hs-guest { display: grid; justify-items: center; gap: 2px; flex: none; width: 76px; min-height: var(--tap); color: var(--panel-fg); text-align: center; text-decoration: none; }
.hs-guest b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; }
.hs-guest small { color: var(--ink-dim); font-size: 12px; font-weight: 700; }

/* == КАТАЛОГ МЕСТА И РЕМОНТ (шторки) ======================================= */
.hs-pick, .hs-remont-box { display: grid; gap: 10px; padding-bottom: 4px; }
.hs-cards, .hs-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .hs-cards, .hs-themes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hs-cards > .osh-line { grid-column: 1 / -1; }
.hs-card, .hs-theme {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; min-height: 112px;
  padding: 8px 6px 9px; border: 0; border-radius: var(--r-4); cursor: pointer; color: var(--panel-fg);
  background: var(--hr-bg); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tier, var(--line-strong)) 55%, transparent);
  transition: background-color var(--dur-press) linear;
}
.hs-theme { background: var(--raise); }
.hs-card:active, .hs-theme:active { background: var(--accent-wash-2); }
.hs-card-art { display: block; width: 100%; height: 64px; }
.hs-card-art svg { display: block; width: 100%; height: 100%; }
.hs-card b, .hs-theme b { max-width: 100%; color: var(--hr-star); font-size: 12px; font-weight: 800; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.hs-theme b { color: var(--panel-fg); }
.hs-card small, .hs-theme small { color: color-mix(in srgb, var(--hr-star) 70%, transparent); font-size: 12px; font-weight: 700; text-align: center; }
.hs-theme small { color: var(--ink-dim); }
.hs-card.is-mine small, .hs-theme.is-owned small { color: var(--ok-ink); }
.hs-card.is-here { box-shadow: inset 0 0 0 2px var(--hr-lamp); }
.hs-theme.is-active { box-shadow: inset 0 0 0 2px var(--gold-ink); }
.hs-theme.is-active small { color: var(--gold-ink); }
.hs-swatch { display: block; width: 100%; height: 48px; border-radius: var(--r-2); box-shadow: inset 0 -8px 14px color-mix(in srgb, var(--hr-shade) 28%, transparent); }
.hs-noart { display: grid; place-items: center; height: 100%; color: var(--hr-lamp); font-size: 28px; font-weight: 900; }
.hs-pick-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 0 calc(4px + var(--safe-b)); background: var(--bg-2); }
.hs-pick-bar > .btn { flex: 1 1 auto; }

/* == СУНДУК ДЕКОРА ========================================================= */
.hs-reveal { display: grid; justify-items: center; gap: 6px; padding: 4px 0 8px; text-align: center; }
.hs-reveal-art {
  display: block; width: 132px; height: 132px; padding: 10px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tier, var(--lav)) 34%, var(--hr-bg)), var(--hr-bg) 72%);
  animation: hs-pop var(--dur-slow) var(--ease-pop);
}
.hs-reveal-art svg { display: block; width: 100%; height: 100%; }
.hs-reveal-tier { margin: 0; color: var(--tier, var(--lav)); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.hs-reveal-nm { margin: 0; font-size: 19px; font-weight: 900; }
.hs-reveal-bs { display: flex; gap: 8px; width: 100%; max-width: 360px; }
.hs-reveal-bs .btn { flex: 1 1 0; }
@keyframes hs-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* == СОСЕДИ ================================================================ */
.nb-sub { margin: 0; padding: 0 var(--gutter); color: var(--ink-dim); font-size: 14px; font-weight: 700; }
.nb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 520px) { .nb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nb-card {
  display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 12px 8px; border-radius: var(--r-4);
  background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); color: var(--panel-fg); text-align: center; text-decoration: none;
}
.nb-card:active { background: var(--accent-wash-2); }
.nb-card b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 900; }
.nb-card small { color: var(--ink-dim); font-size: 12px; font-weight: 700; }
.nb-sk { height: 132px; border-radius: var(--r-4); }

/* == СОЗВЕЗДИЕ (screens/stars.js) ========================================== */
.sk-trial { margin: 0; padding: 10px 12px; border-radius: var(--r-4); background: color-mix(in srgb, var(--sky-guest) 12%, var(--raise)); color: var(--panel-fg); font-size: 13px; font-weight: 700; line-height: 1.45; }
.sk-bar { display: grid; gap: 4px; }
.sk-bar small { color: var(--ink-dim); font-size: 12px; font-weight: 700; line-height: 1.4; }
.sk-map {
  position: relative; height: min(58vh, 440px); min-height: 280px; border-radius: var(--r-5); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, var(--sky-bg1), var(--sky-bg2));
  touch-action: none; cursor: grab;                 /* палец таскает небо, а не страницу */
}
.sky-svg { display: block; width: 100%; height: 100%; }
.sk-tools { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; gap: 6px; }
.sk-tool {
  display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--r-3); cursor: pointer;
  background: color-mix(in srgb, var(--sky-bg2) 70%, transparent); color: var(--sky-label); font-size: 20px; font-weight: 900;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sky-edge) 30%, transparent);
}
.sk-legend { position: absolute; left: 12px; top: 10px; z-index: 2; color: color-mix(in srgb, var(--sky-label) 70%, transparent); font-size: 12px; font-weight: 800; pointer-events: none; }
.sk-neb-in.br-paws { stop-color: var(--sky-neb-paws); stop-opacity: .22; }
.sk-neb-in.br-sense { stop-color: var(--sky-neb-sense); stop-opacity: .18; }
.sk-neb-out { stop-color: var(--sky-bg2); stop-opacity: 0; }
.sd0 { fill: color-mix(in srgb, var(--sky-dust) 16%, transparent); }
.sd1 { fill: color-mix(in srgb, var(--hr-star) 12%, transparent); }
.sd2 { fill: color-mix(in srgb, var(--sky-dust) 10%, transparent); }
.sky-edge { stroke: color-mix(in srgb, var(--sky-edge) 22%, transparent); stroke-width: 1.6; }
.sky-edge.is-lit { stroke: color-mix(in srgb, var(--sky-lit) 75%, transparent); stroke-width: 2.6; }
.sc-ring { fill: color-mix(in srgb, var(--sky-neb-paws) 26%, transparent); stroke: color-mix(in srgb, var(--sky-label) 50%, transparent); stroke-width: 1.4; }
.sc-paw { fill: var(--sky-paw); }
.sky-node { cursor: pointer; outline: none; }
.sn-hit { fill: transparent; }
.sn-halo { fill: color-mix(in srgb, var(--sky-star) 10%, transparent); }
.sn-star { fill: color-mix(in srgb, var(--sky-star) 50%, transparent); animation: sk-twinkle var(--dur-twinkle) ease-in-out var(--tw, var(--dur-zero)) infinite; }
.sn-label { fill: color-mix(in srgb, var(--sky-label) 58%, transparent); font-size: 12px; font-weight: 800; paint-order: stroke; stroke: var(--sky-bg2); stroke-width: 3px; }
.sn-flare { fill: var(--sky-lit); opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.sky-node.is-locked { opacity: .5; }
.sky-node.is-poor .sn-star { fill: color-mix(in srgb, var(--sky-star) 72%, transparent); }
.sky-node.is-ready .sn-star { fill: var(--sky-ready); }
.sky-node.is-ready .sn-halo { fill: color-mix(in srgb, var(--sky-ready) 26%, transparent); }
.sky-node.br-sense.is-ready .sn-star { fill: var(--sky-ready-sense); }
.sky-node.is-ready .sn-label, .sky-node.is-guest .sn-label { fill: var(--sky-label); }
.sky-node.is-guest .sn-star { fill: var(--sky-guest); }
.sky-node.is-guest .sn-halo { fill: color-mix(in srgb, var(--sky-guest) 20%, transparent); }
.sky-node.is-lit .sn-star { fill: var(--sky-lit); }
.sky-node.is-lit .sn-halo { fill: color-mix(in srgb, var(--sky-lit) 18%, transparent); }
.sky-node.is-lit .sn-label { fill: var(--hr-star); }
.sky-node.is-picked .sn-halo { stroke: var(--sky-label); stroke-width: 1.5; }
.sky-node:focus-visible .sn-star { stroke: var(--hr-glow); stroke-width: 1.4; }
.sky-node.is-mastery .sn-star { stroke: var(--sky-lit); stroke-width: 1; }
.sky-node.is-flare .sn-flare { animation: sk-flare var(--dur-flare) var(--ease-out); }
@keyframes sk-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
@keyframes sk-flare { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(3.2); } }
.sk-card.is-empty h2 { color: var(--ink-mid); }
.sk-chip { padding: 2px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; }
.sk-card.is-lit .sk-chip { color: var(--gold-ink); }
.sk-card.is-ready .sk-chip { color: var(--lav); }
.sk-card.is-guest .sk-chip { color: var(--lav); }
.sk-desc { margin: 0; color: var(--panel-fg); font-size: 15px; font-weight: 700; line-height: 1.45; }
.sk-meta { margin: 0; color: var(--ink-dim); font-size: 13px; font-weight: 700; line-height: 1.45; }
.sk-act .btn { flex: 1 1 auto; min-height: 48px; }
.sk-earn > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-size: 15px; font-weight: 900; list-style: none; }
.sk-earn > summary::-webkit-details-marker { display: none; }
.sk-earn-b { display: grid; gap: 8px; }
.sk-rules { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sk-rules li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 8px; font-size: 14px; font-weight: 700; }
.sk-rules b { color: var(--gold-ink); font-weight: 900; }
.sk-rules small { grid-column: 2; color: var(--ink-dim); font-size: 12px; }
.sk-pill .ki { color: var(--gold-ink); }

/* == ВЫЛАЗКИ И ТРОФЕИ (screens/trips.js) =================================== */
.tr-seg { top: calc(var(--hdr-h) + var(--safe-t) + 52px); }
.tr-left { color: var(--ink-dim); font-size: 13px; font-weight: 700; }
.tr-recall-w .btn { flex: 1 1 auto; }
.tr-routes, .tr-logs, .tr-evs { display: grid; gap: 8px; }
.tr-route {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border-radius: var(--r-4);
  background: var(--raise); box-shadow: inset 0 0 0 1px var(--line);
}
.tr-route.is-off { opacity: .7; }
.tr-em { flex: none; width: 36px; font-size: 28px; text-align: center; }
.tr-rt { display: grid; flex: 1; min-width: 0; gap: 2px; }
.tr-rt b { font-size: 15px; font-weight: 900; }
.tr-rt small { color: var(--ink-dim); font-size: 12px; font-weight: 700; line-height: 1.4; }
.tr-rt .tr-why { color: var(--warm-ink); }
.tr-go { flex: none; min-width: 76px; min-height: var(--tap); white-space: nowrap; }
.tr-ev { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--r-3); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 700; line-height: 1.45; }
.tr-ev .ts { flex: none; width: 44px; color: var(--ink-dim); font-size: 12px; font-weight: 800; }
.tr-ev.is-fish { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-ink) 40%, transparent); }
.tr-ev.is-trophy { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lav) 45%, transparent); }
.tr-log > small:first-child { flex: none; width: 52px; color: var(--ink-dim); font-size: 12px; font-weight: 800; }
.tr-log > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-log > small:last-child { flex: none; max-width: 42%; color: var(--gold-ink); font-size: 12px; font-weight: 900; text-align: right; }
.tr-back > span:first-child { flex: none; font-size: 26px; }
.tr-back span:last-child { display: grid; }
.tr-back small { color: var(--ink-dim); font-size: 12px; font-weight: 700; }
.tr-hero .ryb-hero-n { font-size: 34px; }
.tr-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 480px) { .tr-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tr-tp {
  display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 0; min-height: 96px; padding: 10px 6px;
  border: 0; border-radius: var(--r-4); cursor: pointer; color: var(--panel-fg); text-align: center;
  background: var(--raise); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rar, var(--line-strong)) 50%, transparent);
}
.tr-tp:active { background: var(--accent-wash-2); }
.tr-tp.r-rare { --rar: var(--t-rare); }
.tr-tp.r-legendary { --rar: var(--t-legendary); }
.tr-tp-e { font-size: 34px; line-height: 1.15; }
.tr-tp b { font-size: 12px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.tr-tp small { color: var(--ink-dim); font-size: 12px; font-weight: 800; }
.tr-tp.is-none { cursor: default; opacity: .5; box-shadow: inset 0 0 0 1px var(--line); }
.tr-tp.is-none .tr-tp-e { color: var(--ink-dim); font-weight: 900; }
.tr-sheet { display: grid; justify-items: center; gap: 6px; padding: 4px 0 10px; text-align: center; }
.tr-sheet-e { font-size: 64px; line-height: 1.1; }
.tr-sheet-r { margin: 0; color: var(--rar, var(--ink-dim)); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.tr-sheet.r-rare { --rar: var(--t-rare); }
.tr-sheet.r-legendary { --rar: var(--t-legendary); }
.tr-sheet-tale { margin: 0; max-width: 32ch; color: var(--panel-fg); font-size: 16px; font-weight: 700; line-height: 1.45; }
.tr-fin p { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.45; }
.tr-fin.is-done { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold-ink) 45%, transparent); }
.tr-find { display: flex; align-items: center; gap: 10px; }
.tr-find b { font-size: 14px; font-weight: 800; }
.tr-to { justify-self: center; min-height: var(--tap); }

/* == НАЖИМАЕМОЕ: долгое нажатие не выделяет текст (iPhone) ================= */
.hs-slot, .hs-card, .hs-theme, .hs-guest, .hs-req, .nb-card, .sk-map, .sk-tool, .sk-earn > summary,
.tr-route, .tr-tp, .tr-ev, .tr-back, .tr-log {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-twinkle: 1ms; --dur-flare: 1ms; }
  .sn-star { animation: none; }
  .hs-slot, .hs-reveal-art { transition: none; animation: none; }
}