/* Компаньон Roll Gate — интерфейс для телефона (public/js/companion). Мир портала прежний:
   ночь, золото и фиолет; фирменный ход — чаша с кубиками дугой под большим пальцем. */

body.companion {
  --c-bg: #0b0812;
  --c-1: #140d1f;
  --c-2: #1d1430;
  --c-3: #251a3b;
  --c-ink: #efe6d2;
  --c-dim: #b3abc4; /* вторичный текст на фоне — 7:1 */
  --c-ok: #8fe0a0;
  --c-warn: #e8c15a;
  --c-bad: #f0857f;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  font-size: 16px;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  font-variant-numeric: lining-nums tabular-nums;
}
body.companion .help-btn,
body.companion .feedback-btn,
body.companion .app-version { display: none; }
body.companion button, body.companion a { touch-action: manipulation; }
body.companion :is(button, a, [role='button']) { -webkit-user-select: none; user-select: none; }

.cmp-ico { width: 22px; height: 22px; flex: none; }

/* ——— кнопки ——— */
.cmp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(232, 193, 90, 0.28);
  background: var(--c-2); color: var(--c-ink); font: 600 16px var(--display); text-decoration: none; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-fast) ease;
}
.cmp-btn:active { transform: scale(0.97); }
.cmp-btn:disabled { opacity: 0.5; }
.cmp-btn.gold { background: var(--gold); border-color: var(--gold); color: #1a1024; }
.cmp-btn.danger { background: #3a1820; border-color: rgba(240, 133, 127, 0.5); color: #ffd6d2; }
.cmp-btn.heal { background: #15301f; border-color: rgba(143, 224, 160, 0.5); color: #d8ffe0; }
.cmp-btn.sm { min-height: 40px; padding: 0 14px; font-size: 14.5px; border-radius: 12px; }
.cmp-btn.sm .cmp-ico { width: 18px; height: 18px; }
.cmp-btn.wide { width: 100%; }
.cmp-icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; border: 0;
  background: transparent; color: var(--c-ink); cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-fast) ease;
}
.cmp-icon-btn:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.06); }
.cmp-icon-btn.danger { color: var(--c-bad); }

.cmp-input {
  width: 100%; min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(232, 193, 90, 0.22);
  background: var(--c-bg); color: var(--c-ink); font: 16px var(--serif); caret-color: var(--gold);
}
.cmp-input::placeholder { color: #8d84a0; }
.cmp-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232, 193, 90, 0.18); }
.cmp-input[type='datetime-local'] { padding: 0 12px; color-scheme: dark; }
.cmp-num { font: 700 24px var(--title); text-align: center; }

.cmp-badge { padding: 2px 8px; border-radius: 99px; background: rgba(232, 193, 90, 0.16); color: var(--gold-3); font: 600 12px var(--display); flex: none; }
.cmp-badge.warn { background: rgba(184, 148, 255, 0.16); color: #d9c8ff; }
.cmp-note { margin: 0; color: var(--c-dim); font-size: 15px; line-height: 1.45; }
.cmp-sec { margin: 22px 0 10px; font: 600 15px var(--display); color: var(--c-dim); display: flex; align-items: center; gap: 10px; letter-spacing: 0.02em; }
.cmp-count { padding: 1px 8px; border-radius: 99px; background: var(--c-3); color: var(--gold-3); font-size: 13px; }

/* ——— рамка: содержимое + панель разделов ——— */
.cmp-shell { height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% -10%, #1c1230 0%, var(--c-bg) 60%); }
.cmp-content { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--safe-t) + 18px) 16px 28px; }
.cmp-content.enter > * { animation: cmp-rise 300ms var(--ease-out) both; }
@keyframes cmp-rise { from { opacity: 0; transform: translateY(8px); } }
.cmp-tabbar {
  display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 8px calc(var(--safe-b) + 6px);
  background: rgba(16, 10, 26, 0.96); border-top: 1px solid rgba(232, 193, 90, 0.16);
}
.cmp-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border-radius: 12px;
  color: var(--c-dim); text-decoration: none; font: 600 12px var(--display);
  transition: color var(--t-fast) ease, transform var(--t-press) var(--ease-out);
}
.cmp-tab:active { transform: scale(0.95); }
.cmp-tab .cmp-ico { width: 24px; height: 24px; transition: transform var(--t-ui) var(--ease-out); }
.cmp-tab.on { color: var(--gold-3); }
.cmp-tab.on .cmp-ico { transform: translateY(-1px); filter: drop-shadow(0 0 8px rgba(232, 193, 90, 0.45)); }

.cmp-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
.cmp-head-text { flex: 1; min-width: 0; }
.cmp-head h1 { margin: 0; font: 700 38px/1 var(--title); color: var(--gold-3); letter-spacing: -0.01em; }
.cmp-head p { margin: 8px 0 0; color: var(--c-dim); font-size: 15.5px; line-height: 1.4; }

/* ——— строки списков ——— */
.cmp-list { display: flex; flex-direction: column; gap: 10px; }
.cmp-row {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px 10px 10px; border-radius: 18px; border: 0;
  background: var(--c-2); color: var(--c-ink); text-align: left; text-decoration: none; font: inherit; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-fast) ease;
}
.cmp-row:active { transform: scale(0.98); background: var(--c-3); }
.cmp-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmp-row-text strong { font: 700 20px/1.15 var(--title); color: var(--gold-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-row-text span { font-size: 15px; color: var(--c-ink); }
.cmp-row-text small { font-size: 13.5px; color: var(--c-dim); }
.cmp-online { font-style: normal; color: var(--c-ok); }
.cmp-row-go { color: var(--c-dim); width: 18px; height: 18px; }
.cmp-poster { width: 50px; aspect-ratio: 7 / 10; border-radius: 8px; overflow: hidden; flex: none; background: var(--c-1); display: grid; place-items: center; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); }
.cmp-poster img { width: 100%; height: 100%; object-fit: cover; }
.cmp-poster .cmp-poster-d20 { width: 60%; height: auto; opacity: 0.6; }

/* ближайшая сессия: постер под тёмной вуалью */
.cmp-next { position: relative; display: block; overflow: hidden; border-radius: 22px; min-height: 190px; margin-bottom: 8px; color: var(--c-ink); text-decoration: none;
  background: linear-gradient(160deg, #2a1d45, var(--c-1)); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(232, 193, 90, 0.25);
  transition: transform var(--t-press) var(--ease-out); }
.cmp-next:active { transform: scale(0.985); }
.cmp-next-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.cmp-next::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 8, 18, 0.1) 0%, rgba(11, 8, 18, 0.92) 78%); }
.cmp-next-body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px; padding: 18px; }
.cmp-next h2 { margin: 0; font: 700 30px/1.05 var(--title); color: #fff3cf; text-wrap: balance; }
.cmp-next p { margin: 6px 0 0; font-size: 16px; }
.cmp-next-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.cmp-next-left { color: var(--gold-3); font: 600 15px var(--display); }

.cmp-empty { text-align: center; padding: 40px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cmp-empty img { width: 64px; opacity: 0.7; }
.cmp-empty h2 { margin: 0; font: 700 26px var(--title); color: var(--gold-3); }
.cmp-empty p { margin: 0 0 8px; color: var(--c-dim); max-width: 32ch; }

/* герои */
.cmp-create { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.cmp-hero { padding: 8px 6px 8px 8px; cursor: default; }
.cmp-hero:active { transform: none; background: var(--c-2); }
.cmp-hero-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.cmp-hero-open:active { transform: scale(0.98); }

/* портрет в рамке класса */
.cmp-portrait { --cc: #6b5a2c; --cc-dark: #140d1f; position: relative; aspect-ratio: 7 / 10; flex: none; }
.cmp-portrait.sm { width: 56px; }
.cmp-portrait.xs { width: 40px; }
.cmp-portrait-field { position: absolute; inset: 0; border-radius: 9px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--cc) 50%, #1a1026), var(--cc-dark) 80%);
  box-shadow: inset 0 0 0 1px rgba(232, 193, 90, 0.4); }
.cmp-portrait.has-art .cmp-portrait-field { inset: 9% 11% 8%; border-radius: 3px; box-shadow: none; }
.cmp-portrait-field > img:not(.cmp-emblem) { width: 100%; height: 100%; object-fit: cover; }
.cmp-emblem { width: 58%; }
.cmp-initial { font: 700 26px var(--title); color: rgba(247, 227, 161, 0.6); }
.cmp-portrait.xs .cmp-initial { font-size: 18px; }
.cmp-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* профиль: плитки и полная форма ниже */
.cmp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmp-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 92px; padding: 14px; border-radius: 18px; border: 0;
  background: var(--c-2); color: var(--c-ink); font: 600 15px/1.25 var(--display); text-align: left; text-decoration: none; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out);
}
.cmp-tile:active { transform: scale(0.97); }
.cmp-tile .cmp-ico { color: var(--gold); width: 26px; height: 26px; }
.cmp-profile { margin-top: 24px; }
.cmp-profile .section-head { display: none; }
.cmp-profile .panel { padding: 16px; border-radius: 18px; }
.cmp-profile input, .cmp-profile select, .cmp-profile textarea { font-size: 16px; }

/* ——— лист снизу ——— */
.cmp-sheet-back { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; background: rgba(5, 3, 10, 0); transition: background-color 280ms ease; }
.cmp-sheet-back.in { background: rgba(5, 3, 10, 0.62); }
.cmp-sheet {
  width: 100%; max-height: 88dvh; display: flex; flex-direction: column; border-radius: 24px 24px 0 0;
  background: var(--c-1); box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(232, 193, 90, 0.3);
  transform: translateY(100%); transition: transform 340ms var(--ease-drawer);
}
.cmp-sheet.tall { height: 88dvh; }
.cmp-sheet-back.in .cmp-sheet { transform: translateY(0); }
.cmp-sheet.dragging { transition: none; }
.cmp-sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: rgba(232, 193, 90, 0.35); margin: 10px auto 2px; touch-action: none; }
.cmp-sheet-head { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px 20px; touch-action: none; }
.cmp-sheet-head h2 { flex: 1; min-width: 0; margin: 0; font: 700 26px/1.1 var(--title); color: var(--gold-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px calc(var(--safe-b) + 24px); }
.cmp-stack { display: flex; flex-direction: column; gap: 14px; }
.cmp-form { display: flex; flex-direction: column; gap: 10px; }
.cmp-field { display: flex; flex-direction: column; gap: 6px; }
.cmp-field > span { font: 600 14px var(--display); color: var(--c-dim); }
.cmp-members { display: flex; flex-direction: column; gap: 8px; }
.cmp-member { display: flex; align-items: center; gap: 12px; padding: 8px 4px 8px 10px; border-radius: 14px; background: var(--c-2); }
.cmp-member .cmp-row-text strong { font-size: 18px; }
.cmp-code { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-radius: 16px; background: var(--c-2); box-shadow: inset 0 0 0 1px rgba(232, 193, 90, 0.35); }
.cmp-code small { color: var(--c-dim); }
.cmp-code strong { font: 700 30px var(--title); color: var(--gold-3); letter-spacing: 0.08em; }
.cmp-code p { margin: 0; color: var(--c-dim); font-size: 14.5px; }
.cmp-sec + .cmp-members { margin-top: -4px; }
.cmp-stack > .cmp-sec { margin: 6px 0 -4px; }

/* ——— игра ——— */
body.companion:has(.cmp-game) { overflow: hidden; }
.cmp-game { height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(130% 50% at 50% 0%, #1b1130 0%, var(--c-bg) 55%); overflow: hidden; }
.cmp-gtop { display: flex; align-items: center; gap: 10px; padding: calc(var(--safe-t) + 8px) 12px 10px 4px; background: var(--c-1); }
.cmp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmp-who strong { font: 700 21px/1.1 var(--title); color: var(--gold-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-who small { color: var(--c-dim); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-faces { display: flex; padding-left: 8px; }
.cmp-faces .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--c-1); }
.cmp-hp {
  display: grid; justify-items: end; padding: 4px 6px; border: 0; border-radius: 12px; background: none; color: var(--c-ink); cursor: pointer;
  font: inherit; text-align: right; transition: transform var(--t-press) var(--ease-out);
}
.cmp-hp:active { transform: scale(0.96); }
.cmp-hp b { font: 700 28px/1 var(--title); color: var(--c-ok); }
.cmp-hp b span { font-size: 17px; color: var(--c-dim); }
.cmp-hp i { font-style: normal; font: 700 14px var(--title); color: #9ec3ff; }
.cmp-hp small { color: var(--c-dim); font-size: 12.5px; margin-top: 2px; }
.cmp-hp.warn b { color: var(--c-warn); }
.cmp-hp.bad b, .cmp-hp.down b { color: var(--c-bad); }
.cmp-hp.none small { font-size: 13px; }
.cmp-hp.none span { color: var(--gold-3); font: 600 14px var(--display); }
.cmp-conds { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px; }
.cmp-gtop + .cmp-conds:not(:empty) { padding: 0 16px 10px; background: var(--c-1); }
.cmp-cond { padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 35%, #fff); font-size: 13px; font-weight: 500; }
.cmp-link { padding: 6px 16px; background: #3a1820; color: #ffd6d2; font-size: 14px; text-align: center; }

.cmp-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 8px;
  mask-image: linear-gradient(180deg, transparent 0, #000 18px); }
.cmp-log > :first-child { margin-top: auto; }
.cmp-log-empty { margin: auto; text-align: center; color: var(--c-dim); }
.cmp-log-empty img { width: 52px; opacity: 0.55; }
.cmp-log-empty p { margin: 8px 0 0; }
.cmp-msg { display: flex; align-items: center; gap: 12px; padding: 9px 9px 9px 14px; border-radius: 16px; background: var(--c-2); }
.cmp-msg.chat { flex-direction: column; align-items: stretch; gap: 3px; padding: 9px 14px; }
.cmp-msg.chat p { margin: 0; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.cmp-msg.mine { background: #2a1d45; }
.cmp-msg.imp { box-shadow: inset 0 0 0 1px rgba(232, 193, 90, 0.5); }
.cmp-msg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmp-msg-text > small { color: var(--c-dim); font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.cmp-msg-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cmp-msg-who strong { font-weight: 700; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-msg-who time { margin-left: auto; color: #8d84a0; font-size: 12px; flex: none; }
.cmp-hidden { display: inline-flex; align-items: center; gap: 3px; color: #d9c8ff; font-size: 12.5px; }
.cmp-hidden .cmp-ico { width: 13px; height: 13px; }
.cmp-res { width: 50px; height: 50px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--c-3); color: var(--gold-3); font: 700 25px var(--title); }
.cmp-res.crit { background: var(--gold); color: #1a1024; }
.cmp-res.fail { background: #4a1b24; color: #ffb3ad; }
.cmp-msg.mine .cmp-res:not(.crit):not(.fail) { box-shadow: inset 0 0 0 1px rgba(232, 193, 90, 0.45); }
.cmp-sys { display: flex; justify-content: center; align-items: baseline; gap: 8px; color: #cdb8ff; font: 600 13.5px var(--display); text-align: center; padding: 2px 8px; }
.cmp-sys time, .cmp-narr time { color: #8d84a0; font: 12px var(--serif); }
.cmp-narr { padding: 12px 14px; border-radius: 16px; background: rgba(184, 148, 255, 0.08); }
.cmp-narr p { margin: 0 0 4px; font-style: italic; font-size: 16px; line-height: 1.45; }

/* свежее сообщение — подъём; свой бросок — перебор граней и посадка (фирменный момент) */
.cmp-msg.fresh, .cmp-sys.fresh, .cmp-narr.fresh { animation: cmp-in 260ms var(--ease-out) both; }
@keyframes cmp-in { from { opacity: 0; transform: translateY(10px); } }
.cmp-res.rolling { color: rgba(247, 227, 161, 0.55); filter: blur(0.6px); }
.cmp-res.landed { animation: cmp-land 340ms var(--ease-out); }
@keyframes cmp-land {
  0% { transform: scale(1.18); box-shadow: 0 0 0 0 rgba(232, 193, 90, 0.55); }
  100% { transform: scale(1); box-shadow: 0 0 0 12px rgba(232, 193, 90, 0); }
}

.cmp-compose { display: flex; gap: 8px; padding: 6px 12px 8px; }
.cmp-compose .cmp-input { min-height: 44px; border-radius: 22px; background: var(--c-1); }
.cmp-send { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--c-3); color: var(--gold-3); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.cmp-send:active { transform: scale(0.92); }
.cmp-send .cmp-ico { width: 20px; height: 20px; }

/* чаша: верхний край — дуга с золотой кромкой */
.cmp-bowl { position: relative; flex: none; padding-bottom: var(--safe-b); isolation: isolate; }
.cmp-bowl::before {
  content: ''; position: absolute; z-index: -1; left: -30%; right: -30%; top: 0; bottom: 0;
  border-radius: 50% 50% 0 0 / 84px 84px 0 0; background: var(--c-1);
  box-shadow: 0 -1px 0 rgba(232, 193, 90, 0.4), 0 -24px 40px rgba(0, 0, 0, 0.35);
  transition: box-shadow var(--t-ui) ease;
}
.cmp-bowl.is-hidden::before { box-shadow: 0 -1px 0 rgba(184, 148, 255, 0.75), 0 -24px 50px rgba(141, 92, 246, 0.25); }
.cmp-quick { display: flex; gap: 8px; overflow-x: auto; padding: 22px 16px 4px; scrollbar-width: none; scroll-padding-inline: 16px; }
.cmp-quick::-webkit-scrollbar { display: none; }
.cmp-chip {
  flex: none; display: inline-flex; align-items: baseline; gap: 6px; min-height: 38px; padding: 8px 14px; border-radius: 99px; border: 0;
  background: var(--c-2); color: var(--c-ink); font: 600 14.5px var(--serif); cursor: pointer; white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-fast) ease;
}
.cmp-chip b { color: var(--gold); font: 700 15px var(--title); }
.cmp-chip:active { transform: scale(0.95); background: var(--c-3); }
.cmp-chip.fav { box-shadow: inset 0 0 0 1px rgba(232, 193, 90, 0.45); }
.cmp-chip.more { background: transparent; box-shadow: inset 0 0 0 1px rgba(179, 171, 196, 0.35); color: var(--c-dim); }
.cmp-chip.preset b { color: #cdb8ff; }

.cmp-arc { position: relative; height: 222px; }
.cmp-die, .cmp-d20, .cmp-mode { position: absolute; left: 0; top: 0; border: 0; cursor: pointer; }
.cmp-die {
  width: 54px; height: 54px; border-radius: 50%; background: var(--c-3); color: var(--gold-3); font: 700 18px var(--title);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 14px rgba(0, 0, 0, 0.35);
}
.cmp-die > span, .cmp-d20 > span { display: block; transition: transform var(--t-press) var(--ease-out); }
.cmp-die[data-f='100'] { font-size: 15px; }
.cmp-d20 {
  width: 84px; height: 84px; border-radius: 50%; background: var(--gold); color: #1a1024;
  display: grid; place-items: center; box-shadow: 0 10px 28px rgba(232, 193, 90, 0.28), 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: background-color var(--t-ui) ease, box-shadow var(--t-ui) ease;
}
.cmp-d20 img { position: absolute; inset: 14px; width: 56px; height: 56px; opacity: 0.18; filter: brightness(0); }
.cmp-d20 > span { position: relative; font: 700 26px var(--title); }
.cmp-d20.adv { box-shadow: 0 0 0 3px var(--c-1), 0 0 0 5px var(--c-ok), 0 10px 28px rgba(143, 224, 160, 0.3); }
.cmp-d20.dis { box-shadow: 0 0 0 3px var(--c-1), 0 0 0 5px var(--c-bad), 0 10px 28px rgba(240, 133, 127, 0.3); }
.is-hidden .cmp-d20 { background: #cdb8ff; }
.is-hidden .cmp-d20:not(.adv):not(.dis) { box-shadow: 0 10px 28px rgba(141, 92, 246, 0.4); }
.cmp-die:active > span, .cmp-d20:active > span { transform: scale(0.9); }
/* нажатие: кубик проседает, от него расходится кольцо */
.cmp-die::after, .cmp-d20::after, .cmp-chip::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
.cmp-chip { position: relative; }
.thrown::after { animation: cmp-ring 420ms var(--ease-out); }
@keyframes cmp-ring { from { opacity: 0.8; box-shadow: 0 0 0 0 rgba(247, 227, 161, 0.7); } to { opacity: 0; box-shadow: 0 0 0 16px rgba(247, 227, 161, 0); } }
.cmp-die:active, .cmp-d20:active { filter: brightness(1.12); }
.cmp-mode {
  min-width: 72px; height: 34px; padding: 0 10px; border-radius: 99px; background: transparent; color: var(--c-dim);
  box-shadow: inset 0 0 0 1px rgba(179, 171, 196, 0.35); font: 600 13px var(--display);
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.cmp-mode[aria-pressed='true'] { background: var(--c-3); color: var(--c-ink); }
.cmp-mode.dis[aria-pressed='true'] { box-shadow: inset 0 0 0 1px var(--c-bad); color: #ffd6d2; }
.cmp-mode.adv[aria-pressed='true'] { box-shadow: inset 0 0 0 1px var(--c-ok); color: #d8ffe0; }

.cmp-dock { display: grid; grid-template-columns: 1fr 1.15fr 0.85fr 1fr 1fr; padding: 0 6px 6px; }
.cmp-dock-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border: 0; border-radius: 12px; background: none;
  color: var(--c-dim); font: 600 12px var(--display); cursor: pointer; transition: color var(--t-fast) ease, transform var(--t-press) var(--ease-out);
}
.cmp-dock-btn:active { transform: scale(0.94); color: var(--c-ink); }
.cmp-dock-btn .cmp-ico { width: 24px; height: 24px; }
.cmp-hide[aria-pressed='true'] { color: #d9c8ff; }
.cmp-hide[aria-pressed='true'] .cmp-ico { filter: drop-shadow(0 0 8px rgba(184, 148, 255, 0.7)); }

/* невысокие телефоны: чаша ниже, кубики меньше */
@media (max-height: 720px) {
  .cmp-arc { height: 190px; }
  .cmp-die { width: 46px; height: 46px; font-size: 16px; }
  .cmp-d20 { width: 70px; height: 70px; }
  .cmp-d20 img { inset: 12px; width: 46px; height: 46px; }
  .cmp-d20 > span { font-size: 22px; }
  .cmp-quick { padding-top: 18px; }
}

/* хиты */
.cmp-hp-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cmp-hp-big b { font: 700 64px/1 var(--title); color: var(--c-ok); }
.cmp-hp-big.warn b { color: var(--c-warn); }
.cmp-hp-big.bad b, .cmp-hp-big.down b { color: var(--c-bad); }
.cmp-hp-big span { font-size: 18px; color: var(--c-dim); }
.cmp-hp-big i { font-style: normal; color: #9ec3ff; }
.cmp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmp-death { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; border-radius: 16px; background: var(--c-2); }
.cmp-death small { display: block; color: var(--c-dim); margin-bottom: 6px; }
.cmp-death .cmp-btn { grid-column: 1 / -1; }
.cmp-pips { display: flex; gap: 8px; }
.cmp-pips i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(179, 171, 196, 0.4); }
.cmp-pips.ok i.on { background: var(--c-ok); box-shadow: none; }
.cmp-pips.bad i.on { background: var(--c-bad); box-shadow: none; }

/* все проверки */
.cmp-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmp-check { display: flex; align-items: stretch; border-radius: 14px; background: var(--c-2); overflow: hidden; }
.cmp-check.prof { box-shadow: inset 0 0 0 1px rgba(232, 193, 90, 0.45); }
.cmp-check-roll { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 50px; padding: 0 4px 0 12px; border: 0; background: none; color: var(--c-ink); font: 15px var(--serif); text-align: left; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.cmp-check-roll span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-check-roll b { font: 700 18px var(--title); color: var(--gold-3); flex: none; }
.cmp-check-roll:active { transform: scale(0.96); }
.cmp-star { width: 38px; flex: none; border: 0; background: none; color: #6f6782; display: grid; place-items: center; cursor: pointer; }
.cmp-star .cmp-ico { width: 18px; height: 18px; }
.cmp-star[aria-pressed='true'] { color: var(--gold); }
.cmp-star[aria-pressed='true'] path { fill: currentColor; }
.cmp-checks > section:first-child .cmp-sec { margin-top: 12px; }

/* отряд */
.cmp-party { display: flex; flex-direction: column; gap: 10px; }
.cmp-member-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 18px; background: var(--c-2); }
.cmp-member-head { display: flex; align-items: center; gap: 12px; }
.cmp-member-card.online .cmp-member-head .cmp-row-text small:first-of-type { color: var(--c-ink); }
.cmp-dying { color: var(--c-bad) !important; }
.cmp-member-card .cmp-conds { padding: 0; }
.cmp-meter { position: relative; height: 26px; border-radius: 9px; background: var(--c-bg); overflow: hidden; }
.cmp-meter i { position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--c-ok); opacity: 0.32; transition: width var(--t-ui) var(--ease-out); }
.cmp-meter.warn i { background: var(--c-warn); }
.cmp-meter.bad i, .cmp-meter.down i { background: var(--c-bad); }
.cmp-meter span { position: relative; display: block; text-align: center; font: 700 16px/26px var(--title); }
.cmp-hp-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.cmp-hp-row .cmp-input { min-height: 40px; font-size: 18px; }

/* заклинания */
.cmp-spell-stats { display: flex; gap: 10px; }
.cmp-spell-stats div { flex: 1; padding: 10px 14px; border-radius: 14px; background: var(--c-2); }
.cmp-spell-stats small { display: block; color: var(--c-dim); font: 600 13px var(--display); }
.cmp-spell-stats b { font: 700 26px var(--title); color: var(--gold-3); }
.cmp-slots { display: flex; gap: 5px; margin-left: auto; }
.cmp-slots i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(232, 193, 90, 0.5); }
.cmp-slots i.on { background: var(--gold); box-shadow: none; }
.cmp-spell-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-spell { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border-radius: 12px; border: 0; background: var(--c-2); color: var(--c-ink); font: 600 15px var(--serif); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.cmp-spell:active { transform: scale(0.96); }
.cmp-spell i { font-style: normal; font: 700 11px var(--display); color: #cdb8ff; }
.cmp-spell .cmp-ico { width: 15px; height: 15px; color: var(--gold); }
.cmp-spell.unknown { color: var(--c-dim); background: transparent; box-shadow: inset 0 0 0 1px rgba(179, 171, 196, 0.25); }
.cmp-spells > .cmp-btn { margin-top: 22px; }
.cmp-sheet .spell-card { background: none; padding: 0; border: 0; box-shadow: none; }
.cmp-sheet .spell-card-head h3 { display: none; } /* название — в шапке листа */
.cmp-cast { display: flex; flex-direction: column; gap: 8px; }
.cmp-cast > small { color: var(--c-dim); font: 600 13px var(--display); }
.cmp-slot-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-slot-pick button { width: 54px; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 14px; border: 0; background: var(--c-2); color: var(--c-ink); cursor: pointer; }
.cmp-slot-pick button b { font: 700 20px var(--title); color: var(--gold-3); }
.cmp-slot-pick button small { color: var(--c-dim); font-size: 12px; }
.cmp-slot-pick button[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--gold); }
.cmp-slot-pick button.empty { opacity: 0.5; }
.cmp-check-line { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.cmp-check-line input { width: 20px; height: 20px; accent-color: var(--gold); }

/* лист персонажа и книга заклинаний поверх компаньона — во весь экран */
body.companion .sheet-panel { padding-top: var(--safe-t); }

@media (hover: hover) and (pointer: fine) {
  .cmp-row:hover, .cmp-chip:hover, .cmp-tile:hover { background: var(--c-3); }
  .cmp-tab:hover, .cmp-dock-btn:hover { color: var(--c-ink); }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-content.enter > *, .cmp-msg.fresh, .cmp-sys.fresh, .cmp-narr.fresh, .cmp-res.landed, .thrown::after { animation: none; }
  .cmp-sheet { transition: none; }
}
.cmp-caster { color: var(--gold-3); font-size: 17px; margin-top: 18px; }
.cmp-spell i.reaction { color: #ffc89a; }
.cmp-spell i.bonus { color: #f7e3a1; }
.cmp-log-more { align-self: center; flex: none; min-height: 36px; padding: 0 16px; border-radius: 99px; border: 1px solid rgba(232, 193, 90, 0.3); background: var(--c-1); color: var(--gold-3); font: 600 13px var(--display); }
.cmp-log-more:disabled { opacity: 0.5; }

/* ячейки договора колдуна — ромбы цвета потустороннего пламени */
.cmp-slots.pact { margin-left: 8px; }
.cmp-slots.pact i { border-radius: 2px; transform: rotate(45deg) scale(0.85); box-shadow: inset 0 0 0 1.5px rgba(95, 212, 176, 0.6); }
.cmp-slots.pact i.on { background: #5fd4b0; box-shadow: none; }
.cmp-slot-pick button.pact { box-shadow: inset 0 0 0 1.5px rgba(95, 212, 176, 0.55); }
.cmp-slot-pick button.pact b { color: #8fe3c8; }