html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #09090b; }
/* RPG Maker owns canvas dimensions and centering. CSS transforms would break its input scale. */
#quest-controls { position: fixed; max-width: calc(100vw - 24px); top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); z-index: 100; font: 14px/1.5 system-ui, sans-serif; color: #f2ead9; }
#quest-controls button { min-height: 44px; padding: 8px 16px; border: 1px solid #77674c; border-radius: 6px; background: #171514ed; color: inherit; font: inherit; cursor: pointer; }
#quest-controls button:hover { background: #30291d; }
#quest-controls button:focus-visible { outline: 2px solid #e9c579; outline-offset: 3px; }
#quest-help { max-width: min(320px, calc(100vw - 48px)); margin-top: 8px; padding: 16px; border: 1px solid #77674c; border-radius: 8px; background: #171514f5; }
#quest-help p { margin: 10px 0 0; }
#quest-help[hidden] { display: none; }
#quest-save-status { display: block; margin: 6px 0; padding: 3px 8px; background: #171514ed; font-size: 12px; text-align: right; }
#quest-controls button:disabled { opacity: .5; cursor: default; }
#quest-wallet-dialog { width: min(500px, calc(100vw - 64px)); max-height: calc(100vh - 80px); overflow: auto; padding: 24px; color: #f2ead9; background: #171514; border: 1px solid #77674c; border-radius: 12px; font: 16px/1.5 system-ui, sans-serif; }
#quest-wallet-dialog::backdrop { background: #09090bd9; }
#quest-wallet-dialog h2 { margin: 0; }
#quest-wallet-dialog button { min-height: 44px; margin: 4px; padding: 8px 14px; color: inherit; font: inherit; background: #30291d; border: 1px solid #77674c; border-radius: 6px; cursor: pointer; }
#quest-wallet-dialog button:focus-visible { outline: 2px solid #e9c579; outline-offset: 2px; }
#quest-wallet-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-height: 260px; overflow-y: auto; }
@media (hover: hover) {
  #quest-controls { opacity: .85; transition: opacity .15s; }
  #quest-controls:hover, #quest-controls:focus-within, #quest-controls:has(button[aria-expanded="true"]) { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { #quest-controls { transition: none; } }
/* Guest hero picker */
#quest-wallet-dialog:has(.quest-hero) { width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 16px 20px; }
#quest-wallet-choices:has(.quest-hero) { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-height: none; }
#quest-wallet-dialog .quest-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
#quest-wallet-dialog .quest-hero span { font-size: 13px; line-height: 1.35; opacity: .85; }
#quest-wallet-dialog .quest-hero:hover { border-color: #e9c579; }
@media (max-height: 500px) {
  #quest-wallet-dialog:has(.quest-hero) { padding: 10px 14px; font-size: 14px; line-height: 1.35; }
  #quest-wallet-dialog:has(.quest-hero) h2 { font-size: 18px; }
  #quest-wallet-dialog:has(.quest-hero) p { margin: 4px 0; }
  #quest-wallet-choices:has(.quest-hero) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #quest-wallet-dialog .quest-hero { margin: 3px; padding: 6px 10px; }
  #quest-wallet-dialog .quest-hero span { font-size: 12px; }
}
#quest-relics-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 16px 20px; color: #f2ead9; background: #171514; border: 1px solid #77674c; border-radius: 12px; font: 15px/1.45 system-ui, sans-serif; }
#quest-relics-dialog::backdrop { background: #09090bd9; }
#quest-relics-dialog h2 { margin: 0 0 8px; font-size: 20px; }
#quest-relics-dialog p { margin: 6px 0; }
#quest-relics-dialog button { min-height: 44px; margin: 4px 4px 4px 0; padding: 8px 14px; color: inherit; font: inherit; background: #30291d; border: 1px solid #77674c; border-radius: 6px; cursor: pointer; }
#quest-relics-dialog button:disabled { opacity: .5; cursor: default; }
#quest-relics-dialog button:focus-visible, #quest-relics-dialog input:focus-visible { outline: 2px solid #e9c579; outline-offset: 2px; }
#quest-relics-dialog input { width: 7em; min-height: 40px; padding: 6px 8px; color: inherit; font: inherit; background: #0f0e0d; border: 1px solid #77674c; border-radius: 6px; }
#quest-relics-dialog a { color: #e9c579; }
.quest-relic { margin: 8px 0; padding: 10px 12px; border: 1px solid #3c3428; border-radius: 8px; }
.quest-relic b { display: block; }
.quest-relic small { display: block; opacity: .85; }
.quest-relic[data-rarity="Rare"] b { color: #7fb8ff; }
.quest-relic[data-rarity="Legendary"] b { color: #f0b74a; }
#quest-relics-dialog h3 { margin: 14px 0 4px; font-size: 16px; color: #e9c579; }
#quest-wallet-dialog .quest-hero:has(.quest-hero-face) { flex-direction: row; align-items: center; gap: 12px; }
#quest-wallet-dialog .quest-hero-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#quest-wallet-dialog .quest-hero-face { flex: none; width: 64px; height: 64px; border-radius: 8px; border: 1px solid #77674c; background-size: 400% 200%; background-repeat: no-repeat; }
@media (max-height: 500px) { #quest-wallet-dialog .quest-hero-face { width: 48px; height: 48px; } }
#quest-relics-dialog h3 + p, #quest-relics-dialog h3 ~ p { margin: 4px 0; font-size: 13px; opacity: .9; }