/* The Quest Complete card, after the owner's reference (art/production/questcomplete_mockup.webp) on the owner's frame
   and Continue button (assets/gen/ui/questcomplete, tools/cut_questcomplete_art.py). Markup: src/questui/complete.js.
   The card is laid out on the frame's own pixels (1508x954) and scaled uniformly to the window by --qc-scale: the frame
   is always whole and never stretched. Every light is drawn here, not painted (the owner: "add visual glow with code,
   instead of image"): rays fanning out behind the crest's medallion and slowly turning, a bloom around the crest, a
   glint on its gem, each tile's glow in its rarity's colour, and the entrance. Reduced motion keeps it all still. */

#ui #questUI #rewardCard.qc-card { position: fixed; inset: 0; top: 0; left: 0; width: auto; max-width: none; height: auto; transform: none; pointer-events: none;
  background: radial-gradient(ellipse 70% 70% at 50% 46%, rgba(6, 4, 2, .18), rgba(4, 2, 1, .6)); }
#ui #questUI #rewardCard.qc-card::before { content: none; }
#questUI:has(> #rewardCard.qc-card:not(.hidden)) { z-index: 32; }
/* The game's messages wait while the card is up (src/questui.js holdToasts): they would lie under its frame. */
#ui:has(#rewardCard.qc-card:not(.hidden)) #msgs { visibility: hidden; }
/* A line spoken over the card (the giver's thanks) drops below the frame; a phone has no room below it, so there the
   line is for screen readers only, as voice.css .voice-sr. */
#ui:has(#rewardCard.qc-card:not(.hidden)) #voiceSubtitle { top: auto; right: auto; bottom: 6px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(900px, 90vw); padding: 6px 16px; font-size: 15px; line-height: 1.35; text-align: center; }
body.mobile #ui:has(#rewardCard.qc-card:not(.hidden)) #voiceSubtitle { position: fixed !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; backdrop-filter: none !important; }
.qc { position: absolute; left: 50%; top: 50%; width: 1508px; height: 954px; transform: translate(-50%, -50%) scale(var(--qc-scale)); transform-origin: 50% 50%;
  pointer-events: auto; color: #f4e6c8; font: 32px/1.2 'EB Garamond', Georgia, serif; text-align: center; -webkit-font-smoothing: antialiased;
  animation: qc-in .55s cubic-bezier(.16, .9, .3, 1.12) both; }
.qc-frame { position: absolute; z-index: 1; left: 0; top: 0; width: 1508px; height: 954px; pointer-events: none; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .7)); }

/* ---- the light: rays behind the medallion (a box centred on it, clipped a little below it so they fan out above the
   frame), the bloom, the glint ---- */
.qc-glow { position: absolute; z-index: 0; left: -346px; top: -967px; width: 2200px; height: 1250px; overflow: hidden; pointer-events: none; }
.qc-rays { position: absolute; left: 0; top: 0; width: 2200px; height: 2200px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 216, 128, 0) 0deg, rgba(255, 216, 128, .62) 3.2deg, rgba(255, 216, 128, 0) 6.4deg, rgba(255, 216, 128, 0) 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 5%, rgba(0, 0, 0, .7) 16%, rgba(0, 0, 0, .25) 30%, transparent 46%); mask-image: radial-gradient(circle, #000 5%, rgba(0, 0, 0, .7) 16%, rgba(0, 0, 0, .25) 30%, transparent 46%);
  animation: qc-rays-in 1.2s .1s ease-out both, qc-turn 90s linear infinite; }
.qc-rays-b { opacity: .55; background: repeating-conic-gradient(from 7deg, rgba(255, 236, 180, 0) 0deg, rgba(255, 236, 180, .5) 1.6deg, rgba(255, 236, 180, 0) 3.2deg, rgba(255, 236, 180, 0) 11deg);
  animation: qc-rays-in 1.4s .2s ease-out both, qc-turn-back 140s linear infinite; }
.qc-bloom { position: absolute; left: 680px; top: 790px; width: 840px; height: 620px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 232, 160, .95) 0%, rgba(255, 196, 88, .55) 22%, rgba(255, 164, 52, .18) 46%, transparent 68%);
  animation: qc-bloom-in 1s ease-out both, qc-breathe 3.8s 1.1s ease-in-out infinite; }
.qc-shine { position: absolute; z-index: 2; left: 634px; top: 13px; width: 240px; height: 240px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 50%, rgba(255, 250, 225, .85) 0%, rgba(255, 226, 150, .45) 14%, rgba(255, 200, 100, .12) 34%, transparent 58%),
    conic-gradient(from 45deg, transparent 0deg, rgba(255, 245, 210, .5) 2deg, transparent 5deg 85deg, rgba(255, 245, 210, .5) 88deg, transparent 91deg 175deg, rgba(255, 245, 210, .5) 178deg, transparent 181deg 265deg, rgba(255, 245, 210, .5) 268deg, transparent 271deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 56%); mask-image: radial-gradient(circle, #000 18%, transparent 56%);
  animation: qc-fade .8s .35s both, qc-glint 3.8s 1.2s ease-in-out infinite; }

/* ---- the panel's content: the quest's name, the gains, the tiles, Continue ---- */
.qc-panel { position: absolute; z-index: 3; left: 181px; top: 377px; width: 1143px; height: 448px; box-sizing: border-box; padding: 10px 40px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; }
.qc-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* painted in the frame; for screen readers */
.qc-name { margin: 0; color: #f6e2ae; font: 700 50px/1.08 Cinzel, Georgia, serif; letter-spacing: .035em; text-wrap: balance; text-shadow: 0 3px 4px #000, 0 0 22px rgba(255, 186, 80, .28); animation: qc-rise .5s .25s ease-out both; }
.qc-gains { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 0; color: #f0dfbb; font: 600 40px/1 'EB Garamond', Georgia, serif; text-shadow: 0 2px 3px #000; animation: qc-rise .5s .38s ease-out both; }
.qc-gains > span { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.qc-gains b { color: #ffe7a8; font-weight: 600; font-variant-numeric: tabular-nums; }
.qc-gain-icon { width: auto; height: 50px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.qc-sep { width: 2px; height: 42px; background: linear-gradient(transparent, rgba(226, 180, 90, .85), transparent); }
/* The tiles: the items received, then (when there is one) the choice's three, side by side in one row. A tile is nearly
   square; its picture fills the upper half (--art, about 52% of its height), kept to its own shape, over a soft glow in
   the rim's colour, and a long item lies across it. Fewer, wider tiles get bigger pictures, up to --art-max. */
.qc-row { --n: 4; display: flex; align-items: flex-end; justify-content: center; gap: 40px; width: 100%; margin: 4px 0 0; }
.qc-tiles { display: flex; justify-content: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
.qc-tiles > li:not(.qc-tile) { display: contents; }
.qc-tile { --tile-w: min(230px, calc((1063px - (var(--n) - 1) * 24px) / var(--n))); --art: min(var(--art-max, 100px), calc(var(--tile-w) * .5));
  position: relative; flex: none; display: grid; grid-template-rows: var(--art) auto auto; justify-items: center; align-content: start; gap: 3px;
  width: var(--tile-w); min-height: calc(var(--art) * 1.92); box-sizing: border-box; margin: 0; padding: 9px 10px 8px; border: 3px solid var(--q-rim, #b98c47); border-radius: 12px;
  background: radial-gradient(ellipse 80% 70% at 50% 34%, color-mix(in srgb, var(--q-rim, #b98c47) 22%, #2b1d11), #130c06 78%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .65), inset 0 0 30px color-mix(in srgb, var(--q-rim, #b98c47) 20%, transparent), 0 0 24px color-mix(in srgb, var(--q-rim, #b98c47) 55%, transparent), 0 6px 14px rgba(0, 0, 0, .55);
  color: #f5e8cb; font: 600 28px/1.16 'EB Garamond', Georgia, serif; text-shadow: 0 2px 2px #000;
  animation: qc-tile-in .5s cubic-bezier(.2, .9, .3, 1.25) both; animation-delay: calc(.6s + var(--i, 0) * .14s); }
.qc-tile.q-normal { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .65), inset 0 0 22px rgba(0, 0, 0, .5), 0 0 12px rgba(185, 140, 71, .28), 0 6px 14px rgba(0, 0, 0, .55); }
.qc-tile-art { position: relative; display: grid; place-items: center; width: 100%; height: var(--art); }
.qc-tile-art::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--art) * 1.6); height: calc(var(--art) * 1.36); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--q-rim, #b98c47) 78%, transparent), color-mix(in srgb, var(--q-rim, #b98c47) 32%, transparent) 50%, transparent); }
.qc-tile.q-normal .qc-tile-art::before { opacity: .5; }
.qc-tile-art img { position: relative; display: block; width: min(100%, calc(var(--art) * 1.3)); height: var(--art); object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .75)); }
.qc-tall .qc-tile-art img { width: auto; max-width: none; height: calc(var(--art) * var(--len, 1.1)); transform: rotate(45deg); }
.qc-tile b { display: block; max-width: 100%; font-weight: 600; line-height: 1.16; text-wrap: balance; overflow-wrap: anywhere; }
.qc-tile small { color: #ecd29a; font: 600 26px/1.1 'EB Garamond', Georgia, serif; font-variant-numeric: tabular-nums; }
.qc-tile small.qc-dropped { color: #d9b98a; font-size: 19px; font-style: italic; }
.qc-tile.q-magic b { color: #c3c3ff; } .qc-tile.q-rare b { color: #fff08a; } .qc-tile.q-unique b { color: #f0d69c; } .qc-tile.q-set b { color: #9ff0bd; } .qc-tile.q-quest b { color: #ffc486; }
/* Up to three tiles have room to spare: one with a long label ("+25% Poison resistance") widens to keep it on a line. */
.qc-few .qc-tile { width: max-content; min-width: var(--tile-w); max-width: 330px; }
.qc-several .qc-tile { font-size: 25px; } .qc-several .qc-tile small { font-size: 23px; }
.qc-many .qc-tile { padding-top: 8px; font-size: 21px; border-width: 2.5px; } .qc-many .qc-tile small { font-size: 20px; }
/* A reward choice: three tiles to pick from (keys 1-3), beside "Choose one", Continue once one is chosen. */
.qc-choosing { --art-max: 80px; }
.qc-choosing .qc-tile { padding-top: 8px; font-size: 23px; }
.qc-choice { display: grid; justify-items: center; gap: 6px; width: 100%; }
.qc-choice > p { margin: 0; color: #ffd772; font: 700 26px/1 Cinzel, Georgia, serif; letter-spacing: .08em; text-shadow: 0 2px 3px #000; animation: qc-rise .4s .5s ease-out both; }
#ui #questUI #rewardCard button.qc-tile { min-height: calc(var(--art) * 1.92); margin: 0; padding: 8px 10px 10px; border: 3px solid var(--q-rim, #b98c47); border-image: none; border-radius: 12px; color: #f5e8cb; font: 600 23px/1.16 'EB Garamond', Georgia, serif; text-shadow: 0 2px 2px #000;
  background: radial-gradient(ellipse 80% 70% at 50% 34%, color-mix(in srgb, var(--q-rim, #b98c47) 22%, #2b1d11), #130c06 78%); }
#ui #questUI #rewardCard .qc-t-choice { cursor: pointer; transition: transform .14s, filter .14s; }
#ui #questUI #rewardCard .qc-t-choice:hover, #ui #questUI #rewardCard .qc-t-choice:focus-visible { transform: translateY(-4px); filter: brightness(1.15); outline: none; }
.qc-t-choice kbd { position: absolute; left: 8px; top: 6px; color: #ffd772; font: 700 22px/1 Cinzel, Georgia, serif; }
.qc-choice.chosen { animation: none; }
.qc-choice.chosen > p { color: #c9e6a8; }
.qc-choice li.qc-passed .qc-tile { opacity: .25; filter: grayscale(.7); transition: opacity .3s, filter .3s; pointer-events: none; }
.qc-choice li.qc-chosen .qc-tile { pointer-events: none; }
/* When the content would not fit the panel (long names on many tiles), it steps down a size (src/questui.js). */
.qc-tight .qc-panel { gap: 7px; }
.qc-tight .qc-name { font-size: 44px; } .qc-tight .qc-gains { font-size: 35px; } .qc-tight .qc-gain-icon { height: 44px; }
.qc-tight { --art-max: 84px; }
.qc-tight .qc-tile { padding-top: 8px; font-size: 23px; } .qc-tight .qc-tile small { font-size: 21px; }
#ui #questUI #rewardCard .qc-tight .qc-continue { width: 300px; }
/* Continue: the owner's painted button, lit on hover, pressed on click. */
#ui #questUI #rewardCard .qc-continue { position: relative; inset: auto; flex: none; display: block; width: 336px; min-width: 0; height: auto; min-height: 0; margin: 4px 0 0; padding: 0; border: 0; border-image: none; border-radius: 22px; white-space: normal;
  background: none; box-shadow: none; cursor: pointer; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); transition: filter .15s, transform .12s;
  animation: qc-rise .45s both; animation-delay: calc(.75s + var(--i, 0) * .14s); }
#ui #questUI #rewardCard .qc-continue img { display: block; width: 100%; height: auto; pointer-events: none; }
#ui #questUI #rewardCard .qc-continue:hover, #ui #questUI #rewardCard .qc-continue.pad-focus { filter: brightness(1.14) drop-shadow(0 0 14px rgba(255, 206, 110, .75)) drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
#ui #questUI #rewardCard .qc-continue:active { transform: scale(.965); filter: brightness(.9) drop-shadow(0 3px 6px rgba(0, 0, 0, .6)); }
#ui #questUI #rewardCard .qc-continue:focus-visible { outline: 3px solid #ffd66c; outline-offset: 4px; }
#ui #questUI #rewardCard .qc-continue.hidden { display: none; }
body.pad #ui #questUI #rewardCard .qc-continue.pad-focus { outline: 4px solid #ffd66c !important; outline-offset: 5px; box-shadow: none !important; }

/* ---- the entrance and the light's motion ---- */
@keyframes qc-in { from { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--qc-scale) * .82)); } to { opacity: 1; transform: translate(-50%, -50%) scale(var(--qc-scale)); } }
@keyframes qc-rays-in { from { opacity: 0; scale: .35; } to { opacity: 1; scale: 1; } }
@keyframes qc-turn { to { rotate: 360deg; } }
@keyframes qc-turn-back { to { rotate: -360deg; } }
@keyframes qc-bloom-in { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
@keyframes qc-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
@keyframes qc-glint { 0%, 100% { opacity: .85; scale: 1; } 50% { opacity: 1; scale: 1.08; } }
@keyframes qc-fade { from { opacity: 0; } }
@keyframes qc-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes qc-tile-in { from { opacity: 0; transform: translateY(26px) scale(.78); } }
/* Phones: a lighter card (owner, 2026-09-26: "my character gets kicked out to login when i try to turn in a quest on
   mobile"). At 3x the two turning, masked ray layers (2200 px each, about 3200 device px square) and the frame's
   drop-shadow filter over 1508x954 took hundreds of MB of graphics memory, enough for iOS to kill the page, which
   reloads to the title. Phones get no rays, a wider bloom in their place, no frame filter and no blend mode. */
body.mobile #rewardCard.qc-card .qc-rays { display: none; }
body.mobile #rewardCard.qc-card .qc-bloom { left: 520px; top: 680px; width: 1160px; height: 840px; }
body.mobile #rewardCard.qc-card .qc-frame { filter: none; }
body.mobile #rewardCard.qc-card .qc-shine { mix-blend-mode: normal; }
/* Reduced motion (the quest options' setting, or the system's): the card, its light and its tiles appear still. */
.quest-reduced-motion #rewardCard.qc-card :is(.qc, .qc-rays, .qc-bloom, .qc-shine, .qc-name, .qc-gains, .qc-tile, .qc-continue, .qc-choice > p) { animation: none !important; }
@media (prefers-reduced-motion: reduce) { #rewardCard.qc-card :is(.qc, .qc-rays, .qc-bloom, .qc-shine, .qc-name, .qc-gains, .qc-tile, .qc-continue, .qc-choice > p) { animation: none !important; } }