/* Visual layer for the Rogue UI (palette + Traditional Chinese font). Loaded after the original stylesheet.
   Cosmetic only: no layout, size or interaction rules are changed here. */
@font-face {
  font-family: "Rogue TC";
  src: url(../fonts/NotoSansTC-subset.9d8d23a272.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  /* deep purple / navy base */
  --void: #0c0919;
  --ink: #140f2b;
  --ink-2: #1d1640;
  --ink-3: #2b2250;
  --line: #e9ddff24;
  --line-2: #e9ddff4d;
  --text: #f4edff;
  --muted: #b5a9d8;
  /* warm peach primary (was gold) */
  --gold: #f7c8a0;
  --gold-2: #ffe2c6;
  --ember: #ff9170;
  /* status colours: pink-violet danger, teal good */
  --red: #ff6f9c;
  --good: #67e8cb;
  --display: Sora, "Rogue TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --body: Figtree, "Rogue TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}
body, button, input, select, textarea { font-family: var(--body); }

/* Leaderboards need a backend that is not part of this build (see rogue/patches.mjs); hide the entry point. */
.screen-title .menu .row [data-arg="board"] { display: none; }

/* Title screen: the four characters as sticker standees on the right edge. Purely decorative. */
.screen-title { position: relative; }
.screen-title::after {
  content: "";
  position: absolute;
  right: 1.5vw;
  bottom: 0;
  width: min(44vw, 720px);
  height: min(80vh, 640px);
  pointer-events: none;
  background-repeat: no-repeat;
  background-image: var(--skin-yan, url(../skins/yan.webp?v=9d8d23a272)), var(--skin-yang, url(../skins/yang.webp?v=9d8d23a272)), var(--skin-tu, url(../skins/tu.webp?v=9d8d23a272)), var(--skin-wu, url(../skins/wu.webp?v=9d8d23a272));
  background-size: auto 78%, auto 72%, auto 72%, auto 66%;
  background-position: 54% 100%, 100% 100%, 4% 100%, 78% 100%;
  filter: drop-shadow(0 10px 22px #0009);
  opacity: 0.96;
}
@media (max-width: 760px), (max-aspect-ratio: 1/1) { .screen-title::after { display: none; } }

/* Gentle night-city colour grade over the 3D scene (cheap overlay, no post-processing cost). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg, #3a1f7a33 0%, #0c0a2a14 55%, #ff7aa31f 100%);
  mix-blend-mode: soft-light;
}

/* Phones in portrait: the skill bar used to be centred and ran under the 2x2 touch buttons.
   Put the bar bottom-left and the buttons bottom-right so they never share horizontal space
   (bar 12..232px, buttons 245..369px on a 393px screen). Layout only; no gameplay input is touched. */
@media (max-width: 520px) and (pointer: coarse) {
  .hud-bc { left: calc(12px + var(--safe-l, 0px)); transform: none; justify-items: start; }
  .slotbar { gap: 8px; }
  .hslot { width: 46px; height: 46px; }
  .hslot.is-ult { width: 58px; height: 58px; }
  .hslot .emblem { --s: 30px !important; }
  .hslot.is-ult .hslot-ico .emblem { --s: 46px !important; }
  .hslot .key { font-size: 0.56em; padding: 0 4px; max-width: 48px; }
  .tbtns { gap: 8px; grid-template-columns: repeat(2, 58px); }
  .tbtn { width: 58px; height: 58px; font-size: 0.68em; }
}
/* Overlap guard, measured with rogue-work/overlap.mjs on 13 viewports.
   Skill bar = 12..248px wide; the 2x2 touch pad starts at (vw - 148)px, so portrait phones narrower than
   ~420px collide (390px wide still overlapped by 6px). Lift the pad above the bar (bar top = 242px above the
   bottom edge) instead of shrinking the slots further. Same trigger as the base game's own touch rules
   (body.has-touch). Layout only: no input handler, hit-test or gameplay value is touched. */
@media (max-width: 440px) and (max-aspect-ratio: 1/1) {
  body.has-touch .tbtns { bottom: calc(254px + var(--safe-b, 0px)); }
}
/* Short landscape phones (e.g. 568x320): the pad used to start 2px from the top edge and touch the bar.
   Park it bottom-right, immediately left of the aim stick (stick = 140px wide + 24px margin). */
@media (max-height: 420px) and (min-aspect-ratio: 1/1) {
  body.has-touch .tbtns { right: calc(24px + 140px + 16px + var(--safe-r, 0px)); bottom: calc(24px + var(--safe-b, 0px)); transform: scale(.8); transform-origin: right bottom; }
}

/* Small portrait viewports (embeds, 300-360px wide x <= 560px tall): lifting the pad above the skill bar left only
   ~112px between the pause button (bottom edge ~126px) and the bar (top 238px at 480px high), so the top-right pad
   button touched the pause button. Scale the pad to 80% (bottom-right origin) so it fits in that gap. Layout only. */
@media (max-width: 440px) and (max-aspect-ratio: 1/1) and (max-height: 560px) {
  body.has-touch .tbtns { bottom: calc(248px + var(--safe-b, 0px)); transform: scale(.8); transform-origin: right bottom; }
}
/* Short landscape phones/embeds (<= 340px high, e.g. 568x320): the centred skill bar (172px above the bottom, 70px
   high) overlapped the room title line (bottom edge ~84px). Use the compact slot sizes of the portrait rule so the bar
   is ~62px high and ends exactly at the sticks' top edge (bar x 174..394 stays clear of the 164px move stick). */
@media (max-height: 340px) and (min-aspect-ratio: 1/1) and (pointer: coarse) {
  .slotbar { gap: 8px; }
  .hslot { width: 46px; height: 46px; }
  .hslot.is-ult { width: 58px; height: 58px; }
  .hslot .emblem { --s: 30px !important; }
  .hslot.is-ult .hslot-ico .emblem { --s: 46px !important; }
  .hslot .key { font-size: 0.56em; padding: 0 4px; max-width: 48px; }
  body.has-touch .hud-bc { bottom: calc(164px + var(--safe-b, 0px)); }
}

/* ---------------------------------------------------------------- 造型 (styling) panel — see rogue/overlay/styling.9d8d23a272.js */
.rs-modal {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  background: #05030acc; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); pointer-events: auto;
}
.rs-panel {
  display: flex; flex-direction: column; gap: 10px; width: min(760px, 100%); max-height: 100%; overflow: auto;
  padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 16px; color: var(--text);
  background: linear-gradient(180deg, var(--ink-2), var(--ink)); box-shadow: 0 18px 60px #000a;
}
.rs-panel header { display: flex; align-items: center; justify-content: space-between; }
.rs-panel h2 { font-size: 1.25em; color: var(--gold-2); }
.rs-x { width: 40px; height: 40px; border-radius: 12px; font-size: 1.5em; line-height: 1; }
.rs-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rs-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; min-height: 64px; border-radius: 12px; }
.rs-tab img { height: 44px; width: auto; max-width: 100%; object-fit: contain; object-position: top; pointer-events: none; }
.rs-tab.on { border-color: var(--gold); background: #f7c8a022; box-shadow: inset 0 0 0 1px var(--gold); }
.rs-star { position: absolute; top: 4px; right: 6px; font-size: .6em; color: var(--good); }
.rs-body { display: grid; grid-template-columns: minmax(150px, 38%) 1fr; gap: 14px; align-items: start; }
.rs-stage { position: relative; display: grid; place-items: center; min-height: 220px; border-radius: 12px; background: repeating-conic-gradient(#ffffff0d 0% 25%, #ffffff05 0% 50%) 0 0 / 18px 18px; }
.rs-preview { max-width: 100%; max-height: min(52vh, 420px); width: auto; height: auto; filter: drop-shadow(0 8px 14px #0008); }
.rs-busy { position: absolute; left: 8px; bottom: 6px; font-size: .78em; color: var(--muted); }
.rs-opts { display: grid; gap: 10px; }
.rs-part h3 { margin: 0 0 6px; font-size: .85em; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 999px; }
.rs-chip.on { border-color: var(--gold); background: #f7c8a02b; box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold-2); }
.rs-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #ffffff66; flex: none; }
.rs-dot-orig { background: conic-gradient(#f7c8a0, #67e8cb, #ff6f9c, #f7c8a0); }
.rs-note { margin: 0; font-size: .78em; color: var(--muted); }
.rs-panel footer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.rs-panel footer button { min-height: 44px; padding: 8px 16px; border-radius: 12px; }
.rs-primary { background: var(--gold); color: #2a1a12; border-color: var(--gold); font-weight: 700; }
.rs-open { order: -1; }
@media (max-width: 640px) {
  .rs-body { grid-template-columns: 1fr; }
  .rs-stage { min-height: 180px; }
  .rs-preview { max-height: 30vh; }
}
@media (prefers-reduced-motion: reduce) { .rs-modal { -webkit-backdrop-filter: none; backdrop-filter: none; } }
.rs-x { display: grid; place-items: center; padding: 0; }

/* ---- 出戰角色 (lead character) row in the 造型 panel */
.rs-leadwrap h3 { margin: 0 0 6px; font-size: .85em; }
.rs-lead { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rs-leadbtn { position: relative; min-height: 44px; padding: 6px 4px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.rs-leadbtn.on { border-color: var(--gold); background: #f7c8a022; box-shadow: inset 0 0 0 1px var(--gold); }
.rs-3d { font-style: normal; font-size: .62em; line-height: 1; padding: 2px 6px; border-radius: 999px; background: #7ee8d0; color: #10202a; font-weight: 700; }
.rs-hint { margin: 6px 0 0; font-size: .74em; color: var(--muted); }

/* ---- 偷心賊: hearts / coins flying into the character (canvas drawn by steal-fx.9d8d23a272.js; never takes input) */
.steal-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---- 手機版：計時文字不被右側暫停鈕蓋住（score 與 clock 都在 .hud-tr；暫停鈕 fixed 在其下方右側） */
body.has-touch .hud-tr .clock { margin-right: 62px; }

/* ---------------------------------------------------------------- touch camera zoom + exit guide (camera-hud.9d8d23a272.js / exit-guide.9d8d23a272.js) */
.rg-zoom { position: absolute; left: calc(12px + var(--safe-l, 0px)); top: calc(84px + var(--safe-t, 0px)); display: grid; gap: 8px; pointer-events: none; }
.rg-zbtn {
  pointer-events: auto; touch-action: none; width: 44px; height: 44px; padding: 0; border-radius: 9999px;
  border: 2px solid var(--gold, #f7c8a0); background: #140e20d9; color: var(--gold-2, #ffd9b8);
  font-size: 1.25em; font-weight: 800; line-height: 1; box-shadow: 0 2px 10px #0009;
}
.rg-zbtn.down { transform: scale(.92); background: #f7c8a033; }
body:not(.has-touch) .rg-zoom, body:not(.has-touch) .rg-guide { display: none; }
.rg-guide { position: fixed; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.rg-exit { position: absolute; left: 0; top: 0; display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; will-change: transform; }
.rg-exit.rg-off { flex-direction: column; }
.rg-arrow { font-size: 1.6em; line-height: 1; color: var(--gold-2, #ffd9b8); text-shadow: 0 0 10px #ff6f9c, 0 2px 4px #000; }
.rg-lab {
  padding: 3px 10px; border-radius: 9999px; font-size: .72em; font-weight: 700; white-space: nowrap;
  border: 1.5px solid var(--gold, #f7c8a0); background: #140e20e6; color: var(--gold-2, #ffd9b8); box-shadow: 0 2px 8px #000a;
}
.tbtn.t-use.rg-door-near { border-color: var(--gold-2, #ffd9b8); box-shadow: 0 0 0 3px #f7c8a0aa, 0 0 18px 4px #ff6f9caa; animation: rg-pulse 1s ease-in-out infinite; }
@keyframes rg-pulse { 50% { box-shadow: 0 0 0 5px #f7c8a0, 0 0 26px 8px #ff6f9c; } }
@media (prefers-reduced-motion: reduce) { .tbtn.t-use.rg-door-near { animation: none; } }
/* Short landscape phones (e.g. 568x320): the move stick's top edge is ~156px from the top, so the zoom pair goes side by side under the HP bar. */
@media (max-height: 420px) and (min-aspect-ratio: 1/1) {
  .rg-zoom { top: calc(82px + var(--safe-t, 0px)); grid-auto-flow: column; gap: 6px; }
  .rg-zbtn { width: 36px; height: 36px; font-size: 1.1em; }
}
/* Short landscape phones: the objective block (room title + 波次 line, top 64px) ran into the lifted skill bar (top ~94px) once the wave line appears. The block is only ~110px wide and clear of the HP bar (x<190) and timer, so lift it 28px. */
@media (max-height: 340px) and (min-aspect-ratio: 1/1) and (pointer: coarse) {
  body.has-touch .hud-tc { top: calc(36px + var(--safe-t, 0px)); }
}