/* The Cheats panel (renderer/cheats/cheats.js), inside the column beside a game: the in-app frame
   (.gs-dock) and a streamed game (.hs-stage-dock). The column's own controls step out while it is
   open and the panel takes their place; nothing ever covers the game. Tokens are the stream
   room's (.hs-stage-room in moonlight/hearthstream.css), with fallbacks for anywhere else. */
.gs-dock.cheating > :not(.hc-panel), .hs-stage-dock.cheating > :not(.hc-panel) { display: none !important; }
.gs-dock.cheating, .hs-stage-dock.cheating { gap: 0; overflow: hidden auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(156, 196, 255, .3) transparent; }
/* The panel runs longer than the column: a thin scrollbar says there is more below. */
.gs-dock.cheating::-webkit-scrollbar, .hs-stage-dock.cheating::-webkit-scrollbar { display: block; width: 6px; }
.gs-dock.cheating::-webkit-scrollbar-thumb, .hs-stage-dock.cheating::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(156, 196, 255, .3); }

.hc-panel { --hc-ember: var(--hs-ember, #f2a541); --hc-ember-hi: var(--hs-ember-hi, #ffc77a); --hc-moon: var(--hs-moon, #9cc4ff);
  --hc-ink: var(--hs-ink, #e9eefb); --hc-dim: var(--hs-ink-dim, #a9b3d1); --hc-line: var(--hs-line, rgba(156, 196, 255, .14));
  --hc-line-hi: var(--hs-line-hi, rgba(156, 196, 255, .34)); --hc-ease: var(--hs-ease, cubic-bezier(.16, 1, .3, 1));
  display: flex; flex-direction: column; gap: 12px; min-height: 100%; padding-bottom: 2px; color: var(--hc-ink); }
.hc-panel[hidden] { display: none; }
.hc-panel > * { animation: hcIn .42s var(--hc-ease) both; }
.hc-panel > .hc-status { animation-delay: .03s; }
.hc-panel > .hc-presets { animation-delay: .06s; }
.hc-panel > .hc-values { animation-delay: .1s; }
.hc-panel > .hc-find { animation-delay: .14s; }
@keyframes hcIn { from { opacity: 0; transform: translateX(10px); } }

/* head */
.hc-head { display: flex; align-items: center; gap: 8px; }
.hc-back { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px;
  border: 1px solid var(--hc-line); background: rgba(156, 196, 255, .06); color: var(--hc-dim); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s; }
.hc-back:hover { background: rgba(156, 196, 255, .14); color: var(--hc-ink); border-color: var(--hc-line-hi); }
.hc-tt { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hc-hook { flex: none; width: 24px; height: 24px; filter: drop-shadow(0 0 8px rgba(242, 165, 65, .35)); }
.hc-title { margin: 0; font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-size: 20px; font-weight: 700;
  line-height: 1.1; color: var(--hc-ink); white-space: nowrap; }
.hc-status { margin: -2px 0 0; padding: 7px 10px; border-radius: 10px; background: rgba(156, 196, 255, .06);
  font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--hc-dim); text-wrap: balance; transition: background .25s, color .25s; }
.hc-status.fight { background: rgba(242, 165, 65, .14); color: var(--hc-ember-hi); }
.hc-status.bad { background: rgba(232, 128, 111, .1); color: #ffc1b6; }
.hc-fix { min-height: 40px; padding: 8px 12px; border-radius: 12px; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  color: #1c1306; background: linear-gradient(180deg, var(--hc-ember-hi), var(--hc-ember)); box-shadow: 0 8px 22px rgba(242, 165, 65, .25); }
.hc-fix[hidden] { display: none; }

/* section headings */
.hc-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 10px; border-top: 1px solid var(--hc-line); }
.hc-sec[hidden] { display: none; }
.hc-k { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hc-moon); white-space: nowrap; }
.hc-empty { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--hc-dim); text-wrap: pretty; }

/* switches: the whole row is the switch; a track lights ember when it is on */
.hc-presets { display: grid; gap: 10px; }
.hc-presets[hidden] { display: none; }
.hc-switches { display: grid; gap: 6px; }
.hc-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 28px; align-items: center; gap: 8px; width: 100%;
  min-height: 46px; padding: 7px 8px; border-radius: 12px; border: 1px solid transparent; box-sizing: border-box;
  background: rgba(156, 196, 255, .05); color: var(--hc-ink); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .25s; }
.hc-row:hover { background: rgba(156, 196, 255, .1); border-color: var(--hc-line); }
.hc-row:disabled { cursor: default; opacity: .55; }
.hc-row[aria-checked="true"] { background: rgba(242, 165, 65, .12); border-color: rgba(242, 165, 65, .42); box-shadow: 0 0 18px rgba(242, 165, 65, .12) inset; }
.hc-row[aria-checked="true"]:disabled { opacity: .8; }
.hc-row.unknown .hc-sw { opacity: .5; }
.hc-ico { width: 26px; height: 26px; object-fit: contain; display: block; }
.hc-row[aria-checked="false"] .hc-ico { filter: saturate(.7) brightness(.92); }
.hc-lbl { min-width: 0; line-height: 1.2; }
.hc-sw { position: relative; width: 28px; height: 16px; border-radius: 999px; background: rgba(156, 196, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(156, 196, 255, .22); transition: background .2s; }
.hc-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--hc-dim); transition: transform .25s var(--hc-ease), background .2s; }
.hc-row[aria-checked="true"] .hc-sw { background: linear-gradient(180deg, var(--hc-ember-hi), var(--hc-ember)); box-shadow: 0 0 10px rgba(242, 165, 65, .4); }
.hc-row[aria-checked="true"] .hc-sw::after { transform: translateX(12px); background: #1c1306; }

/* a choice (game speed): its label, then a segmented row */
.hc-choice { display: grid; gap: 8px; padding: 8px; border-radius: 12px; background: rgba(156, 196, 255, .05); }
.hc-choice-top { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.hc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(9, 12, 26, .55); }
.hc-seg-btn { min-height: 34px; padding: 0 4px; border: 0; border-radius: 8px; background: transparent; color: var(--hc-dim);
  font: inherit; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s, color .15s; }
.hc-seg-btn:hover { color: var(--hc-ink); background: rgba(156, 196, 255, .1); }
.hc-seg-btn[aria-checked="true"] { color: #1c1306; background: linear-gradient(180deg, var(--hc-ember-hi), var(--hc-ember)); }
.hc-seg-btn:disabled { cursor: default; opacity: .6; }

/* one-press actions: peers, two by two */
.hc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hc-act { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 64px; padding: 9px 6px;
  border-radius: 12px; border: 1px solid var(--hc-line); background: rgba(9, 12, 26, .5); color: var(--hc-ink);
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.15; text-align: center; cursor: pointer;
  transition: background .18s, border-color .18s, transform .12s; }
.hc-act:hover { background: rgba(242, 165, 65, .1); border-color: rgba(242, 165, 65, .4); }
.hc-act:active { transform: translateY(1px) scale(.98); }
.hc-act:disabled { cursor: default; opacity: .42; transform: none; background: rgba(9, 12, 26, .35); border-color: var(--hc-line); }
.hc-act .hc-ico { width: 28px; height: 28px; }
.hc-act-lbl { min-width: 0; text-wrap: balance; }
.hc-act[data-key="winBattle"]:not(:disabled) { border-color: rgba(242, 165, 65, .55); background: rgba(242, 165, 65, .14); box-shadow: 0 0 20px rgba(242, 165, 65, .18); }

/* the party's health (RPG Maker), so "can't be hurt" shows itself working */
.hc-party { display: grid; gap: 7px; margin: 0; padding: 0 2px; list-style: none; }
.hc-party[hidden] { display: none; }
.hc-mem-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; }
.hc-mem-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.hc-mem-hp { flex: none; font-variant-numeric: tabular-nums; color: var(--hc-dim); white-space: nowrap; }
.hc-bar { height: 5px; margin-top: 4px; border-radius: 999px; background: rgba(156, 196, 255, .14); overflow: hidden; }
.hc-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6fcf97, #8fd6a8); transition: width .5s var(--hc-ease); }
.hc-bar.low > span { background: linear-gradient(90deg, #e8806f, #f0b35c); }

/* a value: its name and what it holds now, then what you can do to it */
.hc-list { display: grid; gap: 6px; }
.hc-val { display: grid; gap: 6px; padding: 8px; border-radius: 12px; border: 1px solid transparent; background: rgba(156, 196, 255, .05);
  transition: border-color .2s, background .2s; }
.hc-val.frozen { border-color: rgba(156, 196, 255, .45); background: rgba(156, 196, 255, .1); }
.hc-val-top { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; }
.hc-val-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.hc-val-now { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--hc-ember-hi); font-weight: 700; }
.hc-x { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; margin: -2px -2px -2px 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--hc-dim); cursor: pointer; opacity: .55; transition: opacity .15s, background .15s; }
.hc-val:hover .hc-x, .hc-x:focus-visible { opacity: 1; }
.hc-x:hover { background: rgba(232, 128, 111, .18); color: #ffc1b6; }
.hc-keep { flex: none; min-height: 26px; padding: 0 9px; border-radius: 8px; border: 1px solid rgba(242, 165, 65, .45); background: rgba(242, 165, 65, .12);
  color: var(--hc-ember-hi); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.hc-keep:hover { background: rgba(242, 165, 65, .22); }
.hc-val-ctl { display: flex; align-items: center; gap: 4px; min-width: 0; }
.hc-in { flex: 1 1 auto; min-width: 0; width: 0; height: 34px; padding: 0 8px; box-sizing: border-box; border-radius: 9px;
  border: 1px solid var(--hc-line-hi); background: rgba(9, 12, 26, .6); color: var(--hc-ink); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; }
.hc-in:focus { outline: none; border-color: var(--hc-moon); box-shadow: 0 0 0 3px rgba(156, 196, 255, .2); }
.hc-in { -moz-appearance: textfield; appearance: textfield; }
.hc-in::-webkit-inner-spin-button, .hc-in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hc-mini { flex: none; height: 34px; min-width: 40px; padding: 0 7px; border-radius: 9px; border: 1px solid var(--hc-line); background: rgba(156, 196, 255, .08);
  color: var(--hc-ink); font: inherit; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.hc-mini:hover { background: rgba(242, 165, 65, .14); border-color: rgba(242, 165, 65, .4); }
.hc-lock { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 9px; border: 1px solid var(--hc-line);
  background: rgba(156, 196, 255, .06); cursor: pointer; transition: background .15s, border-color .15s, box-shadow .2s; }
.hc-lock img { width: 20px; height: 20px; filter: saturate(.6) brightness(.85); transition: filter .2s; }
.hc-lock:hover { background: rgba(156, 196, 255, .14); }
.hc-lock[aria-pressed="true"] { border-color: var(--hc-moon); background: rgba(156, 196, 255, .2); box-shadow: 0 0 14px rgba(156, 196, 255, .3); }
.hc-lock[aria-pressed="true"] img { filter: none; }
.hc-row-mini { grid-template-columns: minmax(0, 1fr) 28px; min-height: 34px; padding: 4px 8px; }
.hc-val-ctl button:disabled, .hc-in:disabled { opacity: .5; cursor: default; }

/* find: one-tap concepts, then any word */
.hc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.hc-chip { min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--hc-line-hi); background: rgba(156, 196, 255, .06);
  color: var(--hc-ink); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s; }
.hc-chip:hover { background: rgba(156, 196, 255, .14); }
.hc-chip[aria-pressed="true"] { border-color: rgba(242, 165, 65, .6); background: rgba(242, 165, 65, .16); color: var(--hc-ember-hi); }
.hc-chip.busy { animation: hcPulse 1s ease-in-out infinite; }
.hc-chip:disabled { cursor: default; opacity: .55; }
@keyframes hcPulse { 50% { background: rgba(242, 165, 65, .2); } }
.hc-search { display: flex; gap: 4px; }
.hc-q { flex: 1 1 auto; min-width: 0; width: 0; height: 34px; padding: 0 10px; box-sizing: border-box; border-radius: 9px; border: 1px solid var(--hc-line-hi);
  background: rgba(9, 12, 26, .6); color: var(--hc-ink); font: inherit; font-size: 13px; }
.hc-q:focus { outline: none; border-color: var(--hc-moon); box-shadow: 0 0 0 3px rgba(156, 196, 255, .2); }
.hc-go { flex: none; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--hc-line-hi); background: rgba(156, 196, 255, .1);
  color: var(--hc-ink); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.hc-go:disabled { opacity: .55; cursor: default; }
.hc-found:empty { display: none; }

/* what the last press did */
.hc-say { margin: auto 0 0; min-height: 1.3em; font-size: 12.5px; line-height: 1.35; color: var(--hc-ember-hi); text-wrap: pretty; }
.hc-say.bad { color: #ffc1b6; }
.hc-say.lit { animation: hcSay .5s var(--hc-ease); }
@keyframes hcSay { from { opacity: 0; transform: translateY(4px); } }

.hc-panel button:focus-visible, .hc-panel input:focus-visible { outline: 2px solid var(--hc-moon); outline-offset: 1px; }
.gs-dock.short .hc-act, .hs-stage-dock.short .hc-act { min-height: 56px; }
.gs-dock.ch-tight .hc-party, .hs-stage-dock.short .hc-party { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hc-panel > *, .hc-say.lit, .hc-chip.busy { animation: none; }
  .hc-sw::after, .hc-bar > span { transition: none; }
}