/* QueerCade dynamic archive (server-rendered /archive/ routes). Electric Arcade Dark tokens. */
.qc-archive { background: #0d1021; color: #f1f2f3; font-family: var(--font-body, "Source Sans 3", system-ui, sans-serif); min-height: 100vh; }
.qc-archive a { color: #adc6ff; }
/* Mobile overflow guard (0.17.1): an upstream stylesheet sets white-space:
   nowrap on buttons, which made long labels (the appreciation button, star
   directory entries) force their grid/flex tracks wider than the viewport.
   Plugin buttons always wrap. */
.qc-archive button { white-space: normal; }
.qc-wrap { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.qc-kicker { letter-spacing: .14em; font-size: .78rem; font-weight: 700; color: #ffb695; text-transform: uppercase; }
.qc-archive h1 { font-family: var(--font-heading, "Source Sans 3", sans-serif); font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; margin: .5rem 0 .75rem; background: linear-gradient(90deg, #adc6ff, #f1f2f3 55%, #ffb695); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qc-sub { color: #c1c6d6; max-width: 44rem; }
.qc-stats { color: #c1c6d6; font-size: .95rem; margin-top: .5rem; }
.qc-stats strong { color: #f1f2f3; }
.qc-search { display: flex; gap: .6rem; margin: 1.75rem 0 1rem; flex-wrap: wrap; }
.qc-search input[type="search"] { flex: 1 1 16rem; background: #161a30; border: 1px solid #2c3050; border-radius: .6rem; color: #f1f2f3; padding: .8rem 1rem; font-size: 1rem; }
.qc-search button { background: #0071ec; color: #fff; border: 0; border-radius: .6rem; padding: .8rem 1.4rem; font-weight: 700; cursor: pointer; }
.qc-collections { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.75rem; }
.qc-chip { display: inline-block; background: #1c1e30; border: 1px solid #2c3050; color: #f1f2f3; border-radius: 999px; padding: .35rem .8rem; font-size: .85rem; text-decoration: none; }
.qc-chip small { color: #c1c6d6; }
.qc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.1rem; }
.qc-card { background: #161a30; border: 1px solid #23264a; border-radius: .9rem; overflow: hidden; text-decoration: none; display: block; }
.qc-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: #1c1e30; }
.qc-card .qc-card-body { padding: .75rem .85rem 1rem; }
.qc-card h2 { font-size: 1rem; margin: 0 0 .25rem; color: #f1f2f3; font-family: var(--font-heading, "Source Sans 3", sans-serif); }
.qc-card p { margin: 0; color: #c1c6d6; font-size: .85rem; }
.qc-pager { display: flex; justify-content: space-between; margin-top: 2rem; }
.qc-pager a { background: #1c1e30; border: 1px solid #2c3050; border-radius: .6rem; padding: .6rem 1.1rem; text-decoration: none; }
.qc-detail { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; align-items: start; }
.qc-detail > div { min-width: 0; }
@media (max-width: 720px) { .qc-detail { grid-template-columns: 1fr; } .qc-detail img.qc-cover { max-width: 220px; } }
.qc-detail img.qc-cover { width: 100%; border-radius: 1rem; border: 1px solid #23264a; }
.qc-meta { color: #c1c6d6; margin: .25rem 0 1rem; }
.qc-rating { display: inline-block; background: #00ac49; color: #08130c; font-weight: 800; border-radius: .5rem; padding: .15rem .6rem; margin-left: .5rem; vertical-align: middle; font-size: .9rem; }
.qc-archive h2.qc-sec { font-family: var(--font-heading, "Source Sans 3", sans-serif); margin: 1.75rem 0 .6rem; font-size: 1.3rem; }
.qc-chars { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.qc-chars li { background: #161a30; border: 1px solid #23264a; border-radius: .7rem; padding: .7rem 1rem; }
.qc-chars .qc-id { color: #ffb695; font-weight: 700; }
.qc-stores { display: flex; gap: .6rem; flex-wrap: wrap; }
.qc-stores a { background: #0071ec; color: #fff; border-radius: .6rem; padding: .65rem 1.1rem; text-decoration: none; font-weight: 700; }
.qc-back { text-decoration: none; font-weight: 700; }
.qc-empty { background: #161a30; border: 1px solid #23264a; border-radius: 1rem; padding: 2rem; text-align: center; }
.qc-sitebar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: 72rem; margin: 0 auto; padding: 1.1rem 1.25rem 0; }
.qc-brand { font-family: var(--font-heading, "Source Sans 3", sans-serif); font-weight: 800; font-size: 1.35rem; color: #f1f2f3; text-decoration: none; }
.qc-brand span { color: #ffb695; }
.qc-brand .qc-logo-stack { width: 27px; height: 36px; margin-right: .5rem; }
.qc-brand .qc-logo-stack .fa-game-console-handheld { font-size: 36px; }
.qc-brand .qc-logo-stack .qc-logo-rainbow { font-size: 10px; }
.qc-sitenav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.qc-sitenav a { color: #c1c6d6; text-decoration: none; font-weight: 600; font-size: .95rem; }
.qc-sitenav a:hover, .qc-sitenav a[aria-current="page"] { color: #adc6ff; }
.qc-sitefoot { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem 2.5rem; color: #8a90a6; }
/* Parity surfaces (0.7.0): Discover, Library, Oracle, appreciation heart. */
.qc-discover-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; align-items: end; margin: 1.5rem 0 .5rem; }
.qc-field { display: grid; gap: .35rem; font-size: .85rem; font-weight: 700; color: #c1c6d6; }
.qc-field-wide { grid-column: span 2; }
.qc-field input, .qc-field select { background: #161a30; border: 1px solid #2c3050; border-radius: .6rem; color: #f1f2f3; padding: .7rem .9rem; font-size: 1rem; width: 100%; }
.qc-discover-go { background: #0071ec; color: #fff; border: 0; border-radius: .6rem; padding: .75rem 1.5rem; font-weight: 700; cursor: pointer; font-size: 1rem; }
.qc-discover-go:disabled { opacity: .45; cursor: not-allowed; }
.qc-lib-card { display: block; }
.qc-lib-cover { display: block; }
.qc-lib-snippet { color: #c1c6d6; font-size: .85rem; }
.qc-lib-links { margin-top: .5rem; font-size: .88rem; }
.qc-loadmore-wrap { justify-content: center; }
.qc-appreciate { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; background: #161a30; border: 1px solid #23264a; border-radius: 1rem; padding: 1rem 1.25rem; margin: 1.25rem 0; position: relative; overflow: visible; }
.qc-appreciate-body { min-width: 0; }
.qc-heart-canvas { image-rendering: pixelated; flex: none; }
.qc-heart-btn { background: #0071ec; color: #fff; border: 0; border-radius: .6rem; padding: .65rem 1.1rem; font-weight: 700; cursor: pointer; white-space: normal; }
.qc-heart-btn:disabled { opacity: .45; cursor: not-allowed; }
.qc-heart-count { margin: .4rem 0 0; color: #c1c6d6; font-size: .9rem; }
.qc-track { margin: .3rem 0 0; font-size: .9rem; }
.qc-particle { position: absolute; left: 34px; top: 24px; width: 6px; height: 6px; pointer-events: none; }
.qc-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; }
.qc-shots img { width: 100%; border-radius: .7rem; border: 1px solid #23264a; display: block; }
.qc-extlinks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }
.qc-oracle-group { font-family: var(--font-heading, "Source Sans 3", sans-serif); margin: 1.1rem 0 .5rem; font-size: 1.05rem; }
.qc-oracle-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
@media (max-width: 900px) { .qc-oracle-row { grid-template-columns: repeat(3, 1fr); } }
.qc-emoji { background: #161a30; border: 1px solid #2c3050; border-radius: .8rem; padding: .8rem .4rem .7rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; height: auto; min-width: 0; }
.qc-emoji-char { font-size: 1.9rem; line-height: 1; display: block; }
.qc-oracle-row-mood .qc-emoji-char { color: #fac22b; }
.qc-oracle-row-vibe .qc-emoji-char { color: #ffb695; }
.qc-oracle-row-setting .qc-emoji-char { color: #8be0c3; }
.qc-oracle-row-playstyle .qc-emoji-char { color: #adc6ff; }
.qc-emoji-label { color: #c1c6d6; font-size: .72rem; line-height: 1.35; text-align: center; }
.qc-emoji-on { border-color: #ffb695; background: #23264a; box-shadow: 0 0 0 1px #ffb695 inset; }
.qc-emoji:disabled { opacity: .5; cursor: not-allowed; }
.qc-oracle-again { background: #1c1e30; color: #f1f2f3; border: 1px solid #2c3050; border-radius: .6rem; padding: .75rem 1.3rem; font-weight: 700; cursor: pointer; }
/* Oracle action row breathing room (0.30.2, Demo's phone check): the
   Find my game / Try again row sat flush against the last tile row. */
.qc-oracle-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 1.6rem; }
.qc-oracle-reasons { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .45rem; }
.qc-oracle-reasons li { background: #161a30; border: 1px solid #23264a; border-radius: .7rem; padding: .6rem .95rem; }
.qc-oracle-card { max-width: 320px; }
/* Constellation (0.8.0, model port 0.9.0). */
.qc-star-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.75rem; align-items: start; margin-top: 1.25rem; }
.qc-star-layout > * { min-width: 0; }
/* Mobile (0.30.1): plain block stacking instead of a one-column grid.
   On Demo's phone (WKWebView) the grid kept its two-column shape and
   the canvas's inline pixel width inflated its track, squeezing the
   controls beside the map; block layout removes the track entirely.
   The canvas wrap also gets inline-size containment so the canvas
   can never widen its parent in any engine. */
@media (max-width: 900px) {
	.qc-star-layout { display: block; }
	.qc-star-panel { margin-top: 1.25rem; }
}
.qc-star-controls .qc-field { max-width: 26rem; }
/* Suggestion search (0.30.3): dropdown under the star search field. */
.qc-star-search-field { position: relative; }
.qc-star-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin-top: .35rem; background: #161a30; border: 1px solid #2c3050; border-radius: .7rem; overflow: hidden; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.qc-star-suggest[hidden] { display: none; }
.qc-suggest-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #23264a; color: #f1f2f3; padding: .65rem .9rem; font-size: .95rem; cursor: pointer; }
.qc-suggest-item:last-child { border-bottom: 0; }
.qc-suggest-item:hover, .qc-suggest-item.qc-suggest-on { background: #23264a; }
.qc-star-controls .qc-field input { margin-top: .35rem; background: #161a30; border: 1px solid #2c3050; border-radius: .6rem; color: #f1f2f3; padding: .7rem .9rem; font-size: 1rem; width: 100%; }
.qc-star-canvas-wrap { background: #10132a; border: 1px solid #23264a; border-radius: 1rem; overflow: hidden; margin-top: 1.25rem; min-width: 0; contain: inline-size; }
#qc-star-canvas { display: block; cursor: grab; touch-action: none; max-width: 100%; }
.qc-star-main { min-width: 0; }
#qc-star-canvas:active { cursor: grabbing; }
.qc-star-legend { display: flex; gap: 1.1rem; flex-wrap: wrap; margin: 0; padding: .6rem 1rem; color: #c1c6d6; font-size: .82rem; border-top: 1px solid #23264a; }
.qc-star-legend .qc-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; margin-right: .4rem; }
.qc-dot-identity { background: #adc6ff; }
.qc-dot-era { background: #8be0c3; }
.qc-dot-trope { background: #ffb695; }
.qc-star-panel { background: #161a30; border: 1px solid #23264a; border-radius: 1rem; padding: 1.25rem; }
.qc-star-panel .qc-sec { margin-top: 0; }
.qc-star-panel-head { display: flex; justify-content: space-between; align-items: start; gap: .75rem; }
.qc-star-panel-head .qc-sec { margin-bottom: 0; }
.qc-star-game-title { color: #adc6ff; font-weight: 700; margin: .35rem 0 .75rem; }
.qc-star-portrait { width: 100%; max-width: 220px; border-radius: .7rem; border: 1px solid #23264a; display: block; margin-bottom: .75rem; }
.qc-star-connected-h { font-family: var(--font-heading, "Source Sans 3", sans-serif); font-size: 1rem; margin: 1rem 0 .5rem; }
.qc-star-connected { display: grid; gap: .45rem; }
.qc-star-chip { background: #1c1e30; border: 1px solid #2c3050; color: #f1f2f3; border-radius: .6rem; padding: .5rem .8rem; font-size: .88rem; cursor: pointer; text-align: left; display: grid; gap: .1rem; }
.qc-star-chip:hover { border-color: #adc6ff; }
.qc-star-chip-kind { color: #c1c6d6; font-size: .75rem; }
.qc-star-layers { border: 1px solid #2c3050; border-radius: .7rem; padding: .8rem 1rem 1rem; margin: 1rem 0 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.qc-star-layers legend { font-size: .85rem; font-weight: 700; color: #c1c6d6; padding: 0 .35rem; }
.qc-star-layers label { display: flex; gap: .55rem; align-items: center; cursor: pointer; }
.qc-star-zoom { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 1rem 0 0; }
.qc-star-zoom .qc-stats { margin-top: 0; margin-left: .5rem; }
.qc-star-btn { background: #1c1e30; color: #f1f2f3; border: 1px solid #2c3050; border-radius: .6rem; padding: .55rem .95rem; font-weight: 700; cursor: pointer; }
.qc-star-btn:hover { border-color: #adc6ff; }
.qc-star-list { display: grid; gap: .35rem; min-width: 0; }
.qc-star-item { text-align: left; background: #161a30; border: 1px solid #23264a; color: #c1c6d6; border-radius: .55rem; padding: .45rem .7rem; font-size: .88rem; cursor: pointer; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.qc-star-item:hover { color: #f1f2f3; border-color: #adc6ff; }
.qc-star-item.qc-star-on { color: #f1f2f3; border-color: #ffb695; background: #23264a; }
/* Content pages (0.10.0) — append to assets/qc-archive.css at wiring time. */
.qc-content p { max-width: 46rem; }
.qc-content-list { max-width: 46rem; display: grid; gap: .5rem; padding-left: 1.25rem; }
.qc-content code { background: #1c1e30; border: 1px solid #2c3050; border-radius: .35rem; padding: .1rem .4rem; font-size: .88em; }
.qc-license-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-bottom: .5rem; }
.qc-license-card { background: #161a30; border: 1px solid #23264a; border-radius: .9rem; padding: 1rem 1.1rem; }
.qc-license-card h3 { margin: 0 0 .4rem; font-family: var(--font-heading, "Source Sans 3", sans-serif); font-size: 1rem; }
.qc-license-card p { margin: 0 0 .45rem; color: #c1c6d6; font-size: .88rem; }
/* Shared footer inventory (0.12.0) — append to assets/qc-archive.css at wiring time. */
.qc-sitefoot { display: grid; gap: 1rem; justify-items: center; text-align: center; }
.qc-foot-meta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; color: #c1c6d6; }
.qc-foot-legal, .qc-foot-social { display: flex; gap: .5rem 1.25rem; flex-wrap: wrap; justify-content: center; }
.qc-foot-legal a, .qc-foot-social a { color: #adc6ff; text-decoration: none; }
.qc-foot-legal a:hover, .qc-foot-social a:hover { text-decoration: underline; }
.qc-foot-badge img { display: block; max-width: 100%; height: auto; }
.qc-foot-carbon { margin: 0; color: #8be0c3; font-size: .85rem; }

/* WA-2 slice 1 (0.18.0): Oracle picked slots + Constellation loading
   skeleton. Additive visuals only; behavior and status text unchanged. */
.qc-oracle-slots { display: flex; gap: .5rem; margin: .9rem 0 .2rem; }
.qc-oracle-slot { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; font-size: 1.45rem; line-height: 1; background: #12142a; border: 1px dashed #2c2f52; border-radius: .75rem; }
.qc-oracle-slot.qc-filled { background: #1c1e30; border: 1px solid #0071ec; }
.qc-oracle-slot svg.svg-inline--fa { height: 1.55rem; width: auto; }
.qc-oracle-slots.qc-ready .qc-oracle-slot.qc-filled { border-color: #00ac49; }
.qc-star-skel { display: grid; gap: .6rem; padding: .4rem 0 1rem; }
.qc-star-skel wa-skeleton { display: block; height: 1.1rem; }
.qc-star-skel[hidden] { display: none; }

/* WA-2 slice 2 (0.19.0): on narrow screens the constellation star panel is
   mirrored into a wa-drawer bottom sheet (the Stitch mobile pattern). The
   aside stays as the fallback and is hidden only once wa-drawer is defined
   (the plugin adds .qc-drawer-on to the layout at that point). */
@media (max-width: 900px) {
	.qc-drawer-on .qc-star-panel { display: none; }
}
#qc-star-drawer-body .qc-star-portrait { max-width: 100%; height: auto; }

/* WA-2 slice 3 (0.20.0): the appreciation button carries a Web Awesome
   heart icon; the label lives in its own span so qc-heart.js can update
   the remaining-tap text without wiping the icon. The icon warms up once
   the visitor has tapped at least once. */
.qc-heart-btn { display: inline-flex; align-items: center; gap: .5rem; }
.qc-heart-ico { font-size: 1.05rem; color: #8a8fb0; transition: color .2s ease; }
.qc-heart-on .qc-heart-ico { color: #ff5d7e; }
.qc-heart-btn:disabled .qc-heart-ico { color: #ff5d7e; }

/* WA-2 glyph placement (0.20.1): the custom Font Awesome kit icons sit
   inline with the plugin page headings (triquetra on the Oracle,
   cabinet on the Constellation), served by wa-icon's kit library. */
.qc-h1-ico { color: #adc6ff; font-size: .85em; vertical-align: -.08em; margin-right: .35rem; }

/* F1 (0.21.0): identity filter chips, three-pane constellation on wide
   screens (directory rail / graph / dossier, as designed), and the
   directory overflow fix. */
.qc-star-filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.qc-fchip { background: #161a30; border: 1px solid #2c2f52; color: #c1c6d6; border-radius: 999px; padding: .35rem .8rem; font-size: .85rem; cursor: pointer; }
.qc-fchip:hover { border-color: #adc6ff; color: #f1f2f3; }
.qc-fchip.qc-on { background: #0071ec; border-color: #0071ec; color: #fff; }
.qc-star-list { grid-template-columns: minmax(0, 1fr); }
.qc-star-item { line-height: 1.4; }
.qc-star-layout > wa-drawer { position: fixed; }
@media (min-width: 1200px) {
	.qc-star-layout { grid-template-columns: 280px minmax(0, 1fr) 320px; grid-template-areas: "dir controls panel" "dir canvas panel"; }
	.qc-star-main { display: contents; }
	.qc-star-directory { grid-area: dir; }
	.qc-star-controls { grid-area: controls; }
	.qc-star-canvas-wrap { grid-area: canvas; }
	.qc-star-panel { grid-area: panel; }
}

/* F3 (0.23.0): game-detail dossier — archival record table and character
   cards (portrait when the data has one, the game's cover art otherwise). */
.qc-record { margin: .25rem 0 0; border: 1px solid #23264a; border-radius: 1rem; overflow: hidden; }
.qc-record-row { display: grid; grid-template-columns: 9.5rem 1fr; gap: .35rem 1rem; padding: .55rem 1rem; background: #12152a; }
.qc-record-row:nth-child(even) { background: #161a30; }
.qc-record-row dt { color: #8a8fb0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding-top: .15rem; }
.qc-record-row dd { margin: 0; color: #f1f2f3; font-size: .95rem; }
@media (max-width: 560px) { .qc-record-row { grid-template-columns: 1fr; gap: .1rem; } }
.qc-char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem; }
.qc-char-card .qc-char-img { aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; width: 100%; }
.qc-char-nopic { aspect-ratio: 4 / 5; width: 100%; background: #1c1e30; color: #545868; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; }
.qc-char-nopic i { font-size: 3rem; line-height: 1; }
.qc-char-nopic span { font-size: .8rem; letter-spacing: .04em; }
.qc-char-name { margin: 0 0 .4rem; font-size: 1rem; }
.qc-char-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.qc-char-tag { text-transform: capitalize; }
.qc-char-src { display: block; margin-top: .55rem; font-size: .85rem; }

/* F4 (0.24.0): Oracle chamber — the picked slots move into a panel at the
   top of the page (the design's chamber), and tile labels get room to
   breathe instead of crowding the tile's bottom edge. */
.qc-oracle-chamber { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: #12152a; border: 1px solid #23264a; border-radius: 1rem; padding: .8rem 1rem; margin: 0 0 1.25rem; }
.qc-oracle-chamber .qc-oracle-slots { margin: 0; }
.qc-oracle-chamber .qc-oracle-picked { margin: 0; }
/* (0.26.0: tile padding/label rules consolidated into the base .qc-emoji block above; the WA native button height cap that spilled labels on mobile is overridden there with height: auto.) */
.qc-char-nopic svg.svg-inline--fa { height: 6rem !important; width: auto !important; }