/* Readability layer (replica). Loaded right after upstream/css/style.css.
 * Root cause of the ghosted labels: upstream .box sets `text-shadow: 2px 2px 0 var(--shadow)`, and every
 * descendant inherits it. On small CJK text, and on coloured chips like 已擁有 / 已進化過, that hard 2px copy
 * reads as a second, offset line of text. Adapters also named a font that does not exist ("PixelifyPS"), so
 * Chinese fell back to a monospace face.
 * Fix: replace inherited hard shadows with a soft, zero-offset halo; chips get none; Chinese uses a real CJK face
 * after the pixel Latin face; small text gets a 12px floor. Explicit large-title shadows in upstream keep winning (higher specificity).
 */
:root {
  --rq-cjk: 'PingFang TC', 'Hiragino Sans TC', 'Hiragino Sans', 'Microsoft JhengHei', 'Noto Sans CJK TC', 'Noto Sans TC', 'Source Han Sans TC', 'Noto Sans CJK SC', sans-serif;
  --rq-font: 'Pixelify', var(--rq-cjk);
  --font: var(--rq-font);
}
body, body * { text-shadow: 0 0 2px rgba(3, 8, 26, .9); }
body { font-family: var(--rq-font); }
input, button, select, textarea { font-family: inherit; }
:lang(zh) body, html[lang^="zh"] body { line-height: 1.4; }

/* chips / tags with their own background: no shadow at all */
.rqe-st, .rq-seen-tag, .tag-chip, #rq-slots .tag, .btn.gold, .btn.gold *, .rqf-item .btn, .stage-chip, .chip { text-shadow: none !important; }
.rqe-st { font: 700 12px/1.35 var(--rq-font) !important; padding: 1px 5px !important; letter-spacing: 0; white-space: nowrap; }

/* 12px floor for upstream small text */
.cell .no, .cell .stars, .menu-item small, .tag-chip, .gen-tab small, .leg-cell small, #scr-dex .cell b { font-size: 12px; }
.logo .t2 { font-size: max(12px, 1em); }
@media (max-width: 700px) { .menu-item small { font-size: 12px; } .logo .t2 { font-size: 12px; } }
.sub, small { line-height: 1.4; }

/* pixel art stays crisp */
canvas, img.sprite, .stage canvas { image-rendering: pixelated; }

/* upstream buttons / tabs / menu items set an explicit 2px hard shadow (beats the body rule): soften on CJK-sized text */
.btn, .btn *, .gen-tab, .gen-tab *, .menu-item, .menu-item *, .set-close, .logo .t2, .logo .t2.rq-sub, #digi-no, .tab, .pill, .pill *, .partner-card .nm { text-shadow: 0 0 2px rgba(3, 8, 26, .9); }
body:has(#scr-rq-evo:not(.hidden)) .lang-corner { display: none; }

/* In-run notifications. Upstream puts achievements top-centre (on the timer / area line; on narrow screens at the bottom,
 * on the skill row) and toasts bottom-centre (on the skill row / key hint). During a run they move to the right column,
 * stacked just above the Q panel: below the damage meter, beside (not on) the evolution banner, clear of the card row.
 * Text wraps; nothing is hidden. --rq-q-h is the live Q panel height (q.js). */
body.rq-in-run .ach-pop, body.rq-in-run .toast {
  left: auto; right: 14px; top: auto; transform: none;
  max-width: min(330px, calc(100vw - 28px)); white-space: normal; overflow-wrap: anywhere; text-align: left;
}
body.rq-in-run .ach-pop { bottom: calc(86px + var(--rq-safe, 0px) + var(--rq-q-h, 56px) + 10px); padding: 8px 12px; }
body.rq-in-run .toast { bottom: calc(86px + var(--rq-safe, 0px) + var(--rq-q-h, 56px) + 10px); z-index: 79; }
body.rq-in-run:has(#ach-pop:not(.hidden)) .toast { bottom: calc(86px + var(--rq-safe, 0px) + var(--rq-q-h, 56px) + var(--rq-ach-h, 64px) + 18px); }
/* short landscape: no vertical room above the panel (damage meter is top-right), so the toast sits left of the achievement */
/* Portrait menus use one scroll container; fixed credits and nested scrolling
   previously covered controls and cropped the bottom of the menu. */
@media (max-width: 760px) and (min-height: 521px) {
  #scr-menu { justify-content: flex-start; overflow-y: auto; }
  #scr-menu .menu-left { flex: 0 0 auto; padding: 112px 14px 24px; }
  #scr-menu .menu-right { flex: 0 0 auto; width: 100%; overflow: visible; padding: 18px 20px; }
  #scr-menu .menu-right > :first-child,
  #scr-menu .menu-right > :last-child { margin-block: 0; }
  #scr-menu .credits-line { position: static; flex: 0 0 auto; padding: 14px 20px 24px;
    width: 100%; box-sizing: border-box; line-height: 1.6; font-size: 12px;
    background: rgba(5,10,25,.85); text-shadow: none; color: #c2d2ed; }
  #topbar { left: 8px; right: 8px; top: max(8px,env(safe-area-inset-top)); flex-wrap: wrap;
    justify-content: flex-end; gap: 6px; background: rgba(5,10,25,.92); padding: 5px; }
  #topbar .pill { padding: 4px 8px; font-size: 14px; gap: 5px; }
}
@media (max-height: 480px) {
  body.rq-in-run:has(#ach-pop:not(.hidden)) .toast { bottom: calc(86px + var(--rq-safe, 0px) + var(--rq-q-h, 56px) + 10px); right: calc(14px + min(420px, 50vw) + 8px); max-width: min(300px, calc(50vw - 36px)); }
  body.rq-in-run .ach-pop { max-width: min(420px, 50vw); }
}