/* ==========================================================================
   ARENA showcase — site index, game detail pages and the playable demos.
   Builds on the tokens in styles.css: ink, muted, canvas, panel, line,
   lime (bronze), orange (terracotta), and the serif / mono / display faces.
   A detail page sets --game to that event's accent.
   ========================================================================== */

[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.skip-link { position: absolute; top: -80px; left: 16px; z-index: 60; padding: 10px 14px; color: var(--canvas); background: var(--lime); font-weight: 600; }
.skip-link:focus { top: 12px; }
.noscript { width: min(1160px, calc(100% - 48px)); margin: 40px auto; color: var(--muted); }

/* ---------------------------------------------------------------- header + nav */
/* The header sticks and condenses once the page scrolls (app.js toggles
   .is-condensed). Its own stacking layer keeps decorative hero layers from
   covering the nav. */
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background-color: rgba(23, 19, 17, 0); transition: background-color .3s ease, border-color .3s ease; }
.site-header.is-condensed { border-bottom-color: rgba(216, 179, 106, .32); background-color: rgba(23, 19, 17, .84); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; transition: min-height .3s ease; }
.site-header.is-condensed .site-header-inner { min-height: 64px; }
.site-header .wordmark-mark { transition: transform .35s ease, width .3s ease, height .3s ease; }
.site-header .wordmark:hover .wordmark-mark { transform: rotate(-8deg); }
.site-header.is-condensed .wordmark-mark { width: 26px; height: 26px; }
/* route changes focus <main> so screen readers announce the page; it is not a control */
#app:focus { outline: none; }

.primary-nav { gap: 4px; font-size: .86rem; }
.primary-nav a[data-route-link] { position: relative; padding: 10px 12px; color: var(--muted); transition: color .2s ease; }
.primary-nav a[data-route-link]::after { position: absolute; right: 12px; bottom: 3px; left: 12px; height: 1px; background: currentColor; content: ''; opacity: .6; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.primary-nav a[data-route-link]:hover { color: var(--ink); }
.primary-nav a[data-route-link]:hover::after { transform: scaleX(1); }
.primary-nav a[aria-current="page"], .primary-nav a[aria-current="page"]:hover { color: var(--lime); }
.primary-nav a[aria-current="page"]::after { height: 2px; opacity: 1; transform: scaleX(1); }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; padding: 9px 16px; border: 1px solid rgba(216, 179, 106, .55); color: var(--lime); font-weight: 600; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.nav-cta:hover { border-color: var(--lime); color: var(--canvas); background: var(--lime); }
.nav-cta span { transition: transform .2s ease; }
.nav-cta:hover span { transform: translate(2px, -2px); }

/* ---------------------------------------------------------------- site index */
.index-toggle, .index-close, .spoiler-toggle { border: 1px solid var(--line); padding: 9px 14px; color: var(--ink); background: transparent; font: inherit; cursor: pointer; }
.index-toggle:hover, .index-toggle[aria-expanded="true"], .index-close:hover { border-color: var(--lime); color: var(--lime); }
.index-toggle { display: inline-flex; align-items: center; gap: 10px; margin-left: 8px; transition: color .2s ease, border-color .2s ease; }
.index-toggle-icon { display: grid; gap: 3px; width: 14px; }
.index-toggle-icon i { display: block; height: 1px; background: currentColor; }
.index-toggle-icon i:nth-child(2) { width: 70%; justify-self: end; }
.index-toggle .label-narrow { display: none; }
body.index-open { overflow: hidden; }

.site-index { position: fixed; inset: 0; z-index: 40; display: grid; place-items: start center; padding: clamp(16px, 7vh, 80px) 16px; overflow-y: auto; background: rgba(12, 9, 8, .86); backdrop-filter: blur(6px); }
.site-index-panel { width: min(1080px, 100%); border: 1px solid var(--line); background: var(--canvas); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.site-index-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; border-bottom: 1px solid var(--line); }
.site-index-head h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: -.02em; }
.site-index-groups { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); }
.site-index-groups section { padding: 22px 26px 28px; border-right: 1px solid var(--line); }
.site-index-groups section:last-child { border-right: 0; }
.site-index-groups h3 { margin: 0 0 12px; color: var(--muted); font: 500 .82rem var(--display); }
.site-index-groups ul { margin: 0; padding: 0; list-style: none; }
.site-index-groups a { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font: 700 1.02rem var(--serif); }
.site-index-groups a:hover { color: var(--lime); }
.site-index-groups a small { color: var(--muted); font: .7rem var(--mono); }

/* ---------------------------------------------------------------- lineup + home */
a.game-card { color: inherit; }
.game-card-fact { margin: -10px 0 18px; font-size: .84rem; }
.spotlight-meta a { color: var(--spotlight-accent, var(--lime)); border-bottom: 1px solid currentColor; }
.spotlight-meta a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- detail page */
.detail { background: radial-gradient(ellipse 70% 640px at 18% 0%, color-mix(in srgb, var(--game) 16%, transparent), transparent 72%) no-repeat; }
.section.detail-hero { padding-block: 56px; border-bottom: 1px solid var(--line); }
.detail-back { display: inline-block; margin-bottom: 44px; color: var(--muted); font-size: .9rem; }
.detail-back:hover { color: var(--lime); }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.detail-meta li { padding: 5px 10px; border: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.detail-meta li:first-child { border-color: color-mix(in srgb, var(--game) 55%, transparent); color: var(--game); }
.detail-title { display: flex; flex-wrap: wrap; align-items: center; gap: .2em; max-width: none; }
.detail-icon { font-size: .62em; }
.detail-summary { max-width: 62ch; margin-bottom: 36px; color: var(--muted); font-size: 1.12rem; }
.detail-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; border-block: 1px solid var(--line); list-style: none; }
.detail-facts li { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px 0; }
.detail-facts li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.detail-facts strong { color: var(--game); font: 500 clamp(1.6rem, 3.4vw, 2.6rem)/1 var(--mono); }
.detail-facts span { color: var(--muted); font-size: .88rem; }

.section.detail-demo { padding-block: 64px; }
.detail-demo-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; margin-bottom: 24px; }
.detail-demo-head h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); }
.detail-demo-head p { max-width: 48ch; margin: 0; color: var(--muted); }
.demo-frame { position: relative; min-height: 420px; padding: clamp(18px, 3vw, 32px); border: 1px solid color-mix(in srgb, var(--game) 45%, var(--line)); background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--game) 12%, transparent), transparent 62%), var(--panel); }

.section.detail-loop, .section.detail-section { padding-block: 64px; border-top: 1px solid var(--line); }
.detail-loop h2, .detail-section h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); }
.detail-note { max-width: 60ch; margin: 14px 0 0; color: var(--muted); }
.detail-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: step; }
.detail-steps li { padding-top: 16px; border-top: 1px solid var(--line); counter-increment: step; }
.detail-steps li:first-child { border-top-color: var(--game); }
.detail-steps li::before { display: block; margin-bottom: 28px; color: var(--game); font: .78rem var(--mono); content: counter(step, decimal-leading-zero); }
.detail-steps h3 { margin: 0 0 8px; font: 700 1.15rem var(--serif); }
.detail-steps p { margin: 0; color: var(--muted); font-size: .9rem; }

.detail-section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.spoiler-toggle:hover, .spoiler-toggle[aria-pressed="true"] { border-color: var(--game); color: var(--game); }
.detail-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.detail-items li { padding: 20px; border: 1px solid var(--line); background: var(--panel); }
.item-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 8px; }
.item-head h3 { margin: 0; font: 700 1.05rem var(--serif); }
.item-tag { color: var(--game); font: .74rem var(--mono); }
.item-tag.is-hidden { color: var(--muted); }
.detail-items p { margin: 0; color: var(--muted); font-size: .9rem; }
.detail-items.is-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-items.is-chips li { padding: 8px 12px; }
.detail-items.is-chips .item-head { margin: 0; }
.detail-items.is-chips h3 { font: 500 .8rem var(--mono); }

.section.detail-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-block: 0 96px; }
.detail-pager a { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--line); }
.detail-pager a:hover { border-color: var(--lime); }
.detail-pager small { color: var(--muted); font-size: .8rem; }
.detail-pager span { font: 700 1.2rem var(--serif); }
.detail-pager .pager-next { align-items: flex-end; text-align: right; }

/* ---------------------------------------------------------------- demos: shared */
.demo-empty { margin: 0; color: var(--muted); }
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.demo-kicker { margin: 0; color: var(--game, var(--lime)); font: 500 .8rem var(--mono); letter-spacing: .04em; }
.demo-status { margin: 0; font-weight: 600; }
.demo-score { margin: 0; color: var(--muted); font: .82rem var(--mono); }
.demo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-stage { display: grid; gap: 16px; }
.demo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--lime); color: var(--canvas); background: var(--lime); font: 600 .92rem var(--display); cursor: pointer; transition: background .15s, border-color .15s; }
.demo-btn:hover:not(:disabled) { border-color: var(--ink); background: var(--ink); }
.demo-btn:disabled { cursor: not-allowed; opacity: .4; }
.demo-btn-hot { border-color: var(--orange); color: var(--ink); background: var(--orange); }
.demo-btn kbd { padding: 1px 6px; border: 1px solid currentColor; font: .7rem var(--mono); opacity: .8; }
.demo-lede { max-width: 68ch; margin: 0; }
.demo-hint { margin: 0; color: var(--muted); font-size: .86rem; }
.demo-prompt { max-width: 44ch; margin: 0; font: 700 clamp(1.2rem, 2.6vw, 1.85rem)/1.22 var(--serif); letter-spacing: -.01em; }
.demo-headline { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; margin: 0; font: 700 clamp(1.35rem, 3vw, 2.2rem)/1.12 var(--serif); }
.demo-stamp { justify-self: start; margin: 0; padding: 6px 12px; border: 2px solid currentColor; color: var(--lime); font: 500 .86rem var(--mono); letter-spacing: .08em; transform: rotate(-2deg); }
.demo-verdict { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.demo-verdict.is-win .demo-stamp, .demo-verdict.is-win .demo-headline { color: #9ccf86; }
.demo-verdict.is-loss .demo-stamp { color: #e0725f; }
.demo-verdict .demo-btn { justify-self: start; margin-top: 4px; }
.demo-stage > .demo-verdict:first-child { padding-top: 0; border-top: 0; }
.opt-emoji { font-family: system-ui, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; }

.demo-options { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 12px; }
.demo-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 150px; padding: 18px; border: 1px solid var(--line); color: var(--ink); background: rgba(0, 0, 0, .18); font: 700 clamp(1rem, 2vw, 1.4rem) var(--serif); cursor: pointer; transition: border-color .15s, transform .15s, background .15s; }
.demo-option:hover:not(:disabled) { border-color: var(--game, var(--lime)); transform: translateY(-3px); }
.demo-option:disabled { cursor: default; }
.demo-option.is-picked { border-color: var(--game, var(--lime)); background: color-mix(in srgb, var(--game, var(--lime)) 14%, transparent); }
.demo-option .opt-emoji { font-size: 2.6rem; line-height: 1; }
.demo-vs { align-self: center; color: var(--muted); font: .8rem var(--mono); }

.demo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.demo-chip { padding: 4px 10px; border: 1px solid var(--line); color: var(--muted); font: .74rem var(--mono); }
.demo-chip.is-hot { border-color: #e0725f; color: #e0725f; }
.tier-green { --tier: #7fbf7a; }
.tier-yellow { --tier: #e2b54a; }
.tier-red { --tier: #e0725f; }
.demo-chip.tier-green, .demo-chip.tier-yellow, .demo-chip.tier-red { border-color: var(--tier); color: var(--tier); }
.demo-tiers { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.demo-tiers li { padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--tier); color: var(--muted); font-size: .9rem; }
.demo-tiers b { margin-right: 6px; color: var(--ink); }

.demo-clock { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 26px; margin-bottom: 12px; border: 1px solid var(--line); }
.demo-clock i { position: absolute; inset: 0 auto 0 0; width: 100%; background: color-mix(in srgb, var(--game, var(--lime)) 36%, transparent); }
.demo-clock span { position: relative; padding: 0 8px; font: .74rem var(--mono); }
.demo-answers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.demo-answer { display: flex; align-items: flex-start; gap: 12px; min-height: 64px; padding: 14px 16px; border: 1px solid var(--line); color: var(--ink); background: rgba(0, 0, 0, .18); font: 500 .95rem/1.42 var(--display); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.demo-answer:hover:not(:disabled) { border-color: var(--game, var(--lime)); }
.demo-answer:disabled { cursor: default; }
.demo-answer:disabled:not(.is-correct):not(.is-wrong) { opacity: .55; }
.demo-answer.is-correct { border-color: #9ccf86; background: rgba(156, 207, 134, .14); }
.demo-answer.is-wrong { border-color: #e0725f; background: rgba(224, 114, 95, .14); }
.demo-mark { flex: none; min-width: 1.4em; color: var(--game, var(--lime)); font: 500 .9rem var(--mono); }

.demo-split, .gauntlet-split { display: flex; height: 38px; overflow: hidden; border: 1px solid var(--line); }
.demo-split i { display: block; height: 100%; }
.demo-split .a { background: #6aa8d8; }
.demo-split .b { background: #e0725f; }

.demo-evidence { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.evidence { border: 1px solid var(--line); background: rgba(0, 0, 0, .2); }
.evidence[open] { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--game, var(--lime)) 45%, var(--line)); }
.evidence summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 600; list-style: none; cursor: pointer; }
.evidence summary::-webkit-details-marker { display: none; }
.evidence summary::after { margin-left: auto; color: var(--muted); font: .9rem var(--mono); content: '+'; }
.evidence[open] summary::after { content: '−'; }
.evidence summary em { padding: 1px 6px; color: var(--canvas); background: var(--game, var(--lime)); font: normal .66rem var(--mono); }
.evidence-lines { margin: 0; padding: 0 14px 14px; overflow-x: auto; color: var(--muted); font: .8rem/1.65 var(--mono); list-style: none; }
.evidence-lines li { white-space: pre-wrap; }

/* ---------------------------------------------------------------- demos: per game */
.fix-incident { display: grid; gap: 10px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.fix-availability { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; color: var(--muted); font-size: .86rem; }
.fix-availability i { display: block; height: 10px; border: 1px solid var(--line); }
.fix-availability b { display: block; height: 100%; background: #e0725f; transition: background .3s; }
.fix-availability b.is-healthy { background: #9ccf86; }
.fix-availability strong { color: var(--ink); font: 500 1rem var(--mono); }
.breach-briefing { display: grid; gap: 10px; max-width: 70ch; padding-left: 16px; border-left: 2px solid var(--game, var(--lime)); }
.breach-briefing p { margin: 0; }

.duck-lanes { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.duck-lane { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; }
.duck-pick { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-left: 4px solid var(--lane); color: var(--ink); background: transparent; font: 600 .88rem var(--display); text-align: left; cursor: pointer; }
.duck-pick[aria-pressed="true"] { border-color: var(--lane); background: color-mix(in srgb, var(--lane) 20%, transparent); }
.duck-pick:disabled { cursor: default; }
.duck-track { position: relative; height: 48px; border: 1px solid var(--line); background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(242, 234, 219, .05) calc(10% - 1px) 10%), linear-gradient(90deg, transparent calc(100% - 3px), var(--ink) calc(100% - 3px)); }
.duck-lane.is-mine .duck-track { border-color: var(--lane); box-shadow: inset 0 0 0 1px var(--lane); }
.duck { position: absolute; top: 50%; left: calc(var(--p, 0) * (100% - 2.4rem)); font-size: 1.9rem; line-height: 1; transform: translateY(-50%) scaleX(-1); }
.duck-lane.is-boosted .duck { animation: duck-boost .6s ease-out; }
.duck-place { position: absolute; top: 50%; left: 10px; color: var(--muted); font: 500 .8rem var(--mono); transform: translateY(-50%); }
.duck-lane.is-winner .duck-place { color: var(--lime); font-weight: 700; }
.duck-charge { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; }
.duck-charge i { display: block; height: 6px; border: 1px solid var(--line); }
.duck-charge b { display: block; width: 100%; height: 100%; background: var(--orange); }
@keyframes duck-boost { 40% { filter: drop-shadow(0 0 12px var(--lane)); } }

.vox-listen, .vox-analysis { display: grid; gap: 16px; }
.vox-wave { display: flex; align-items: center; gap: 4px; height: 120px; padding: 0 4px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.vox-wave i { flex: 1; height: 100%; background: linear-gradient(#6aa8d8, #6fb7c4); transform: scaleY(.08); }
.vox-wave i:nth-child(n+15) { background: linear-gradient(#e0725f, #d98ab0); }
.vox-meters { display: grid; gap: 8px; }
.vox-meter { display: grid; grid-template-columns: minmax(120px, 200px) 1fr 70px; align-items: center; gap: 12px; font-weight: 600; }
.vox-meter span { display: flex; align-items: center; gap: 8px; }
.vox-meter i { display: block; height: 12px; border: 1px solid var(--line); }
.vox-meter b { display: block; width: 0; height: 100%; background: #e0725f; }
.vox-meter.is-you b { background: #6aa8d8; }
.vox-meter em { color: var(--muted); font: normal .8rem var(--mono); text-align: right; }
.vox-shout { min-height: 76px; border: 2px solid var(--game, var(--lime)); color: var(--ink); background: transparent; font: 700 clamp(1rem, 2.2vw, 1.3rem) var(--serif); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.vox-shout.is-on { color: var(--canvas); background: var(--game, var(--lime)); }

.gauntlet-ladder { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; font: .76rem var(--mono); }
.gauntlet-ladder li { padding: 3px 8px; border: 1px solid var(--line); color: var(--muted); }
.gauntlet-ladder li.is-now { border-color: var(--game, var(--lime)); color: var(--canvas); background: var(--game, var(--lime)); }
.gauntlet-split span { display: flex; align-items: center; justify-content: center; min-width: 0; color: var(--muted); background: rgba(242, 234, 219, .06); font: 500 .82rem var(--mono); }
.gauntlet-split span + span { border-left: 1px solid var(--line); }
.gauntlet-split span.is-alive { color: var(--canvas); background: var(--lime); }
.gauntlet-count { margin: 0; font: 500 clamp(1.6rem, 4vw, 2.6rem) var(--mono); }
.gauntlet-count s { color: var(--muted); }
.gauntlet-count b { color: var(--game, var(--lime)); font-weight: 500; }

.oracle-call { display: grid; gap: 8px; padding: 18px; border: 1px solid color-mix(in srgb, #e0725f 50%, var(--line)); background: rgba(224, 114, 95, .06); }
.oracle-share { color: #e0725f; font: 500 .8em var(--mono); }
.oracle-compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0; }
.oracle-compare div { padding: 12px 14px; border: 1px solid var(--line); }
.oracle-compare dt { color: var(--muted); font-size: .8rem; }
.oracle-compare dd { margin: 4px 0 0; font: 700 1.15rem var(--serif); }

.phish-context { font-style: italic; }
.phish-card { max-width: 640px; overflow-wrap: anywhere; border: 1px solid var(--line); background: rgba(242, 234, 219, .04); font-size: .95rem; }
.phish-card.is-phish { border-color: #e0725f; }
.phish-card.is-legit { border-color: #9ccf86; }
.phish-kind { margin: 0; padding: 6px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font: .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.phish-head { display: grid; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.phish-row { display: grid; grid-template-columns: 72px 1fr; gap: 10px; font-size: .88rem; }
.phish-row span { color: var(--muted); }
.phish-row b { font-weight: 600; }
.phish-body { padding: 12px 16px; white-space: pre-line; }
.phish-link, .phish-address { margin: 0 16px 14px; padding: 8px 12px; border: 1px solid var(--line); font: .82rem var(--mono); }
.phish-address { display: flex; gap: 8px; margin-top: 12px; }
.phish-sender { padding: 10px 16px 0; color: var(--muted); font: .82rem var(--mono); text-align: center; }
.phish-bubble { max-width: 88%; margin: 8px 16px 14px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: rgba(242, 234, 219, .08); }
.phish-bubble span { display: block; margin-top: 6px; font: .82rem var(--mono); text-decoration: underline; }
.phish-decoded small { display: block; margin: 0 16px; color: var(--muted); font: .7rem var(--mono); text-transform: uppercase; }
.phish-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.phish-actions span { padding: 10px; color: var(--muted); text-align: center; }
.phish-actions span + span { border-left: 1px solid var(--line); }
.phish-tell { padding: 0 2px; border-bottom: 2px solid #e0725f; background: rgba(224, 114, 95, .18); color: inherit; }
.is-legit .phish-tell { border-color: #9ccf86; background: rgba(156, 207, 134, .16); }
.phish-tell::before { margin-right: 4px; padding: 0 5px; background: #e0725f; color: var(--canvas); font: 600 .7em var(--mono); content: attr(data-n); }
.is-legit .phish-tell::before { background: #9ccf86; }
.phish-calls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 640px; }
.phish-call.is-phish { border-color: #e0725f; background: #e0725f; }
.phish-call.is-legit { border-color: #9ccf86; background: #9ccf86; }
.phish-call.is-picked { outline: 2px solid var(--ink); outline-offset: 2px; }
.phish-tells { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.phish-tells li { display: flex; align-items: baseline; gap: 10px; }
.phish-tells b { flex: none; min-width: 1.6em; padding: 0 5px; background: var(--game, var(--lime)); color: var(--canvas); font: 600 .75rem var(--mono); text-align: center; }
.demo-verdict .demo-stamp.is-phish { color: #e0725f; }
.demo-verdict .demo-stamp.is-legit { color: #9ccf86; }

.decrypt-board { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.decrypt-word { display: inline-flex; gap: 4px; }
.decrypt-tile { display: inline-flex; align-items: center; justify-content: center; width: clamp(17px, 4.4vw, 40px); height: clamp(26px, 6vw, 52px); border: 1px solid var(--line); background: rgba(0, 0, 0, .25); font: 600 clamp(.8rem, 2.4vw, 1.5rem) var(--mono); }
.decrypt-tile.is-open { border-color: var(--game, var(--lime)); background: color-mix(in srgb, var(--game, var(--lime)) 16%, transparent); }
.decrypt-tile.is-late { border-color: #e0725f; color: var(--muted); }
.decrypt-board.is-solved .decrypt-tile.is-late { border-color: #d8b36a; color: var(--ink); }
.decrypt-mark { align-self: center; color: var(--muted); font: 600 clamp(.8rem, 2.4vw, 1.5rem) var(--mono); }
.decrypt-meters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.decrypt-lock { display: flex; gap: 5px; }
.decrypt-lock i { display: block; width: 30px; height: 10px; border: 1px solid var(--line); }
.decrypt-lock i.is-on { border-color: #e0725f; background: #e0725f; }
.decrypt-chat { display: grid; align-content: end; gap: 2px; min-height: 6.2em; padding: 10px 12px; border: 1px solid var(--line); color: var(--muted); font: .8rem/1.4 var(--mono); }
.decrypt-chat p { margin: 0; }
.decrypt-chat b { margin-right: 6px; color: var(--ink); font-weight: 500; }
.decrypt-pad { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 5px; }
.decrypt-pad button { min-height: 40px; padding: 0; border: 1px solid var(--line); color: var(--ink); background: rgba(0, 0, 0, .18); font: 600 .95rem var(--mono); cursor: pointer; }
.decrypt-pad button:hover:not(:disabled) { border-color: var(--game, var(--lime)); }
.decrypt-pad button:disabled { cursor: default; opacity: .45; }
.decrypt-pad button.is-hit { border-color: #9ccf86; color: #9ccf86; opacity: 1; }
.decrypt-pad button.is-miss { border-color: #e0725f; color: #e0725f; text-decoration: line-through; opacity: 1; }
.decrypt-solve { display: flex; flex-wrap: wrap; gap: 8px; }
.decrypt-solve input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); color: var(--ink); background: rgba(0, 0, 0, .25); font: .95rem var(--mono); text-transform: uppercase; }
@media (max-width: 760px) { .decrypt-pad { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

.vault-demo { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; align-items: center; gap: 24px; }
.vault-ladder { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.vault-ladder li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); color: var(--muted); font: .82rem var(--mono); }
.vault-ladder li b { color: var(--ink); font-weight: 600; }
.vault-ladder li.is-cleared { border-color: var(--game, var(--lime)); color: var(--game, var(--lime)); }
.vault-ladder li.is-cleared b { color: var(--game, var(--lime)); }
.vault-ladder li.is-next { border-color: var(--ink); }
.vault-body { display: grid; justify-items: center; gap: 12px; text-align: center; }
.vault-door { display: grid; place-items: center; width: clamp(120px, 26vw, 180px); max-width: 100%; aspect-ratio: 1; border: 10px solid var(--game, var(--lime)); border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(242, 234, 219, .18), rgba(0, 0, 0, .35) 70%); }
.vault-door i { width: 40%; aspect-ratio: 1; border: 6px solid var(--lime); border-radius: 50%; }
.vault-door.is-cracking { animation: vault-shake .18s linear infinite; }
.vault-door.is-cracking i { animation: vault-spin .7s linear infinite; }
.vault-door.is-cracked { border-color: #e0725f; }
.vault-door.is-open { border-color: #9ccf86; }
@keyframes vault-shake { 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, 2px); } }
@keyframes vault-spin { to { transform: rotate(360deg); } }
.vault-pot { margin: 0; }
.vault-pot small { display: block; color: var(--muted); font: .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.vault-pot b { font: 700 clamp(2rem, 6vw, 3.2rem)/1 var(--serif); }
.vault-clock { width: min(320px, 100%); margin-bottom: 0; }
.vault-clock.is-idle { visibility: hidden; }
.vault-calls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 760px) {
  .vault-demo { grid-template-columns: 1fr; }
  .vault-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .vault-door.is-cracking, .vault-door.is-cracking i { animation: none; } }

.ballpark-prompt { margin: 0 0 6px; font: 700 clamp(1.1rem, 2.4vw, 1.5rem)/1.3 var(--serif); }
.ballpark-entry { display: grid; gap: 8px; max-width: 520px; margin-top: 14px; }
.ballpark-entry input { min-width: 0; min-height: 52px; padding: 8px 14px; border: 1px solid var(--line); color: var(--ink); background: rgba(0, 0, 0, .25); font: 500 1.4rem var(--mono); }
.ballpark-entry input:focus { border-color: var(--game, var(--lime)); outline: none; }
.ballpark-words { min-height: 1.4em; margin: 0; color: var(--muted); font: .82rem var(--mono); overflow-wrap: anywhere; }
.ballpark-mults { display: flex; flex-wrap: wrap; gap: 8px; }
.ballpark-answer { display: grid; margin: 0; }
.ballpark-answer small { color: var(--muted); font: .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ballpark-answer b { font: 700 clamp(1.8rem, 5vw, 2.8rem)/1.1 var(--serif); overflow-wrap: anywhere; }
.ballpark-answer span { color: var(--muted); font: .82rem var(--mono); }
.ballpark-line { position: relative; height: 76px; margin: 4px 28px 6px; }
.ballpark-line::before { position: absolute; top: 38px; right: 0; left: 0; height: 2px; background: var(--line); content: ''; }
.ballpark-window { position: absolute; top: 33px; height: 12px; background: color-mix(in srgb, var(--game, var(--lime)) 24%, transparent); }
.ballpark-mark { position: absolute; top: 0; bottom: 0; }
.ballpark-mark::before { position: absolute; left: 0; transform: translateX(-50%); content: ''; }
.ballpark-mark.is-answer::before { top: 16px; width: 3px; height: 44px; background: #9ccf86; }
.ballpark-mark.is-guess::before { top: 32px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); }
.ballpark-mark em { position: absolute; left: 0; color: var(--muted); font: normal .7rem var(--mono); white-space: nowrap; transform: translateX(-50%); }
.ballpark-mark.is-answer em { top: 0; color: #9ccf86; }
.ballpark-mark.is-guess em { bottom: 0; }

.stack-prompt { margin: 0 0 12px; font: 700 clamp(1.1rem, 2.4vw, 1.5rem)/1.3 var(--serif); }
.stack-build { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.stack-slots, .stack-answer { display: grid; gap: 6px; margin: 6px 0; padding: 0; list-style: none; }
.stack-slots li, .stack-answer li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 42px; padding: 6px 10px; border: 1px solid var(--line); font-size: .9rem; }
.stack-slots li.is-empty { border-style: dashed; }
.stack-slots b, .stack-answer b { color: var(--muted); font: 500 .8rem var(--mono); }
.stack-slots em, .stack-tile em { display: inline-grid; place-items: center; min-width: 1.6em; margin-right: 8px; padding: 1px 4px; color: var(--canvas); background: var(--game, var(--lime)); font: normal 600 .75rem var(--mono); }
.stack-tiles { display: grid; gap: 6px; }
.stack-tile { display: flex; align-items: center; min-height: 42px; padding: 8px 12px; border: 1px solid var(--line); color: var(--ink); background: rgba(0, 0, 0, .18); font: 500 .9rem/1.35 var(--display); text-align: left; cursor: pointer; }
.stack-tile:hover:not(:disabled) { border-color: var(--game, var(--lime)); }
.stack-tile:disabled { cursor: default; opacity: .4; }
.stack-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.stack-answer em { font-style: normal; font-weight: 700; }
.stack-answer em.is-right { color: #9ccf86; }
.stack-answer em.is-wrong { color: #e0725f; }
@media (max-width: 760px) { .stack-build { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- enhance demo */
.demo-enhance [hidden] { display: none !important; }
.enhance-demo { display: grid; grid-template-columns: minmax(0, 420px) minmax(220px, 360px); align-items: start; gap: 20px; }
.enhance-frame { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.enhance-frame canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.enhance-frame.is-sharp canvas { image-rendering: auto; }
.enhance-frame.is-waiting canvas { visibility: hidden; }
.enhance-frame.is-waiting::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--game, var(--lime)); font: 700 clamp(4rem, 14vw, 8rem) var(--serif); }
.enhance-frame.is-flash { animation: enhance-flash .35s ease-out; }
@keyframes enhance-flash { from { filter: brightness(1.6); } }
.enhance-side { display: grid; gap: 10px; }
.enhance-call { margin: 0; color: var(--muted); font: .82rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.enhance-call b { color: #e0725f; font-weight: 600; }
.enhance-steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.enhance-steps li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; border: 1px solid var(--line); color: var(--muted); font: .82rem var(--mono); }
.enhance-steps li b { color: var(--game, var(--lime)); font-weight: 600; }
.enhance-steps li.is-ai { border-style: dashed; }
.enhance-steps li.is-ai b { color: #e0725f; }
.enhance-steps li.is-call { border-style: solid; border-color: #e0725f; }
.enhance-steps li.is-past { opacity: .5; }
.enhance-steps li.is-now { border-color: var(--game, var(--lime)); color: var(--ink); }
.enhance-bar { height: 6px; border: 1px solid var(--line); }
.enhance-bar i { display: block; width: 0; height: 100%; background: var(--game, var(--lime)); }
.enhance-guess { display: flex; flex-wrap: wrap; gap: 8px; }
.enhance-guess input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); color: var(--ink); background: rgba(0, 0, 0, .25); font: .95rem var(--mono); text-transform: uppercase; }
@media (max-width: 760px) { .enhance-demo { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .enhance-frame.is-flash { animation: none; } }

/* ---------------------------------------------------------------- ping demo */
/* the pad flips with no transition anywhere: a reaction game may not ease */
/* align-content, or the two rows stretch apart and the sub-line drifts to the floor */
.ping-pad { display: grid; place-items: center; align-content: center; gap: 14px; min-height: clamp(220px, 34vw, 330px); padding: 24px 16px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); text-align: center; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.ping-pad:focus-visible { outline: 2px solid var(--game, var(--lime)); outline-offset: 2px; }
.ping-word { color: var(--ink); font: 700 clamp(2.4rem, 10vw, 5rem)/1 var(--serif); letter-spacing: -.02em; }
.ping-sub { color: var(--muted); font: .82rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ping-pad[data-state='ping'] { border-color: var(--game, var(--lime)); background: var(--game, var(--lime)); }
.ping-pad[data-state='pong'] { border-color: #d8b36a; background: #d8b36a; }
.ping-pad[data-state='ping'] .ping-word, .ping-pad[data-state='pong'] .ping-word,
.ping-pad[data-state='ping'] .ping-sub, .ping-pad[data-state='pong'] .ping-sub { color: var(--canvas); }
.ping-pad[data-state='early'] { border-color: #e0725f; }
.ping-pad[data-state='early'] .ping-word { color: #e0725f; }
.ping-pad[data-state='done'] .ping-word { color: var(--game, var(--lime)); font-family: var(--mono); }
.ping-strip { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 12px; }
.ping-strip span { display: grid; gap: 2px; color: var(--muted); font: .7rem var(--mono); letter-spacing: .12em; }
.ping-strip b { color: var(--ink); font: 700 1.5rem/1 var(--serif); letter-spacing: -.02em; }

/* ---------------------------------------------------------------- survey says demo */
.survey-prompt { margin: 0 0 12px; font: 700 clamp(1.1rem, 2.4vw, 1.5rem)/1.3 var(--serif); }
.survey-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.survey-tile { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, .18); font-size: .92rem; }
.survey-tile .s-num { flex: none; width: 1.4em; color: var(--muted); font: 600 .85rem var(--mono); text-align: center; }
.survey-tile .s-dots { color: var(--line); letter-spacing: .2em; }
.survey-tile.is-open { border-color: var(--game, var(--lime)); background: color-mix(in srgb, var(--game, var(--lime)) 16%, transparent); }
.survey-tile .s-text { min-width: 0; overflow: hidden; color: var(--ink); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.survey-tile .s-pts { flex: none; margin-left: auto; color: var(--game, var(--lime)); font: 700 1rem var(--mono); }
.survey-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.survey-strikes { display: flex; gap: 4px; }
.survey-strikes .s-x { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); color: var(--line); font-size: .9rem; }
.survey-strikes .s-x.on { border-color: #e0725f; color: #e0725f; }
.survey-input { flex: 1; min-width: 200px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); color: var(--ink); background: rgba(0, 0, 0, .25); font: .95rem var(--mono); }
.survey-input:focus { border-color: var(--game, var(--lime)); outline: none; }
@media (max-width: 760px) { .survey-tiles { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- commit message demo */
.cm-scenario { margin: 0 0 14px; font: 700 clamp(1.05rem, 2.2vw, 1.4rem)/1.35 var(--serif); }
.cm-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cm-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); color: var(--ink); background: rgba(0, 0, 0, .18); font: .95rem var(--mono); text-align: left; cursor: pointer; }
.cm-choice:hover:not(:disabled) { border-color: var(--game, var(--lime)); }
.cm-choice:disabled { cursor: default; opacity: .45; }
.cm-choice.is-picked { border-color: var(--game, var(--lime)); background: color-mix(in srgb, var(--game, var(--lime)) 14%, transparent); opacity: 1; }
.cm-hash { flex: none; color: #d8b36a; font: .9rem var(--mono); }
.cm-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-log { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 12px 0 16px; padding: 14px 16px; border: 1px solid var(--line); background: rgba(0, 0, 0, .28); }
.cm-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; font: .9rem var(--mono); }

/* ---------------------------------------------------------------- the forgery demo */
.fg-term { margin: 0 0 4px; font: 700 clamp(1.4rem, 3.4vw, 2.1rem)/1.2 var(--serif); letter-spacing: -.01em; }
.fg-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.fg-option { padding: 14px 16px; border: 1px solid var(--line); color: var(--ink); background: rgba(0, 0, 0, .18); font: 500 .95rem/1.45 var(--display); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.fg-option:hover:not(:disabled) { border-color: var(--game, var(--lime)); }
.fg-option:disabled { cursor: default; opacity: .5; }
.fg-option.is-real { border-color: #9ccf86; background: rgba(156, 207, 134, .14); opacity: 1; }
.fg-option.is-picked:not(.is-real) { border-color: #e0725f; background: rgba(224, 114, 95, .14); opacity: 1; }

/* ---------------------------------------------------------------- unmasked demo */
.um-cast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; }
.um-tribute { padding: 12px 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, .18); }
.um-tribute b { display: block; margin-bottom: 2px; color: var(--ink); font: 700 1rem var(--display); }
.um-tribute span { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.um-fact { margin: 0 0 4px; font: 700 clamp(1.15rem, 2.8vw, 1.7rem)/1.3 var(--serif); letter-spacing: -.01em; }
.um-clock { height: 6px; margin: 12px 0; border: 1px solid var(--line); background: rgba(0, 0, 0, .28); }
.um-clock i { display: block; height: 100%; background: var(--game, var(--lime)); }
.um-clock.is-low i { background: #e0725f; }
.um-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.um-name { padding: 14px 16px; border: 1px solid var(--line); color: var(--ink); background: rgba(0, 0, 0, .18); font: 600 .95rem var(--display); cursor: pointer; transition: border-color .15s, background .15s; }
.um-name:hover:not(:disabled) { border-color: var(--game, var(--lime)); }
.um-name:disabled { cursor: default; opacity: .5; }
.um-name.is-author { border-color: #9ccf86; background: rgba(156, 207, 134, .14); opacity: 1; }
.um-name.is-picked:not(.is-author) { border-color: #e0725f; background: rgba(224, 114, 95, .14); opacity: 1; }
@media (max-width: 760px) { .um-cast, .um-names { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- sudo says demo */
.ss-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ss-window { flex: none; padding: 2px 10px; border: 1px solid var(--line); color: var(--game, var(--lime)); font: 700 .85rem var(--mono); }
.ss-clock { flex: 1; height: 6px; border: 1px solid var(--line); background: rgba(0, 0, 0, .28); }
.ss-clock i { display: block; height: 100%; background: var(--game, var(--lime)); }
.ss-clock.is-low i { background: #e0725f; }
/* one uniform string, drawn with textContent — the prefix is the whole game */
.ss-cmd { margin: 0 0 6px; padding: 16px 18px; border: 1px solid var(--line); background: rgba(0, 0, 0, .22); color: var(--ink); font: 700 clamp(1.1rem, 2.8vw, 1.8rem)/1.35 var(--mono); word-break: break-word; }
.ss-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.ss-choice { padding: 16px; border: 1px solid var(--line); color: var(--ink); background: rgba(0, 0, 0, .18); font: 700 1rem var(--display); cursor: pointer; transition: border-color .15s, background .15s; }
.ss-choice:hover:not(:disabled) { border-color: var(--game, var(--lime)); }
.ss-choice:disabled { cursor: default; opacity: .5; }
.ss-choice.is-right { border-color: #9ccf86; background: rgba(156, 207, 134, .14); opacity: 1; }
.ss-choice.is-wrong { border-color: #e0725f; background: rgba(224, 114, 95, .14); opacity: 1; }
@media (max-width: 760px) { .ss-choices { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- built by: the works */
button.button { border: 0; font: inherit; font-size: .88rem; cursor: pointer; }
button.button-quiet { border-bottom: 1px solid var(--line); background: transparent; }
#the-works, #the-maker { scroll-margin-top: 72px; }

.works-hero { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(32px, 7vw, 96px); align-items: center; min-height: 640px; }
.works-pedestal { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 440px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(ellipse 90% 55% at 50% 100%, rgba(216, 179, 106, .2), transparent 70%), repeating-linear-gradient(180deg, transparent 0 26px, rgba(216, 179, 106, .045) 26px 27px); }
.works-pedestal img { position: relative; z-index: 1; width: min(230px, 64%); filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)) drop-shadow(0 0 34px rgba(216, 179, 106, .16)); }
.works-plinth { display: block; width: 72%; height: 78px; border: 1px solid rgba(216, 179, 106, .34); border-bottom: 0; background: repeating-linear-gradient(180deg, transparent 0 18px, rgba(242, 234, 219, .06) 18px 19px), linear-gradient(180deg, #2b231e, #1b1512); }
.works-preamble { margin: 0 0 12px; color: var(--muted); font: italic 1.05rem/1.4 Georgia, 'Times New Roman', serif; }
.works-inscription h1 { max-width: 780px; margin-bottom: 18px; font-size: clamp(2.5rem, 5.4vw, 5rem); line-height: 1; letter-spacing: -.03em; text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 -1px 0 rgba(255, 236, 196, .07); }
.works-cite { margin: 0 0 30px; color: var(--muted); font: .72rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.works-cite cite { color: var(--ink); font-style: normal; }

.works-wing + .works-wing { margin-top: 56px; }
.works-wing-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.works-wing-head > span:first-child { color: var(--orange); font: .72rem var(--mono); letter-spacing: .16em; }
.works-wing-head h3 { margin: 0; font: 700 clamp(1.3rem, 2.4vw, 1.8rem) var(--serif); letter-spacing: -.02em; }
.works-wing-count { margin-left: auto; color: var(--muted); font: .72rem var(--mono); }
.works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.work-tablet { position: relative; display: flex; flex-direction: column; min-height: 214px; padding: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(242, 234, 219, .035), transparent 70%); transition: opacity .6s ease, transform .3s ease, border-color .2s ease; }
.work-tablet::before { position: absolute; inset: 6px; border: 1px solid rgba(242, 234, 219, .05); content: ''; pointer-events: none; }
.work-tablet:hover { border-color: var(--lime); transform: translateY(-4px); }
.work-tablet h4 { margin: 34px 0 10px; font: 700 1.22rem var(--serif); letter-spacing: .01em; }
.work-tablet p { margin: 0 0 18px; color: var(--muted); font-size: .86rem; }
.work-link { margin-top: auto; color: var(--lime); font: .7rem var(--mono); overflow-wrap: anywhere; }
.work-tablet.is-here { border-color: rgba(181, 72, 50, .6); }
.work-tablet.is-here .work-link { color: var(--orange); }

.works-maker { border-top: 1px solid var(--line); }
.works-maker-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.works-persona { margin: 22px 0 18px; color: var(--lime); font: .74rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.works-intro { max-width: 540px; margin: 0; color: var(--muted); font-size: 1.05rem; }
.works-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.works-links a { display: inline-flex; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); font-size: .84rem; transition: border-color .2s ease, color .2s ease; }
.works-links a:hover { border-color: var(--lime); color: var(--lime); }
.works-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 12px; padding: 0; border: 1px solid var(--line); background: var(--line); list-style: none; }
.works-stats li { display: flex; flex-direction: column; gap: 6px; padding: 22px; background: var(--canvas); }
.works-stats strong { color: var(--lime); font: 700 clamp(1.7rem, 3.4vw, 2.5rem)/1 var(--serif); letter-spacing: -.02em; }
.works-stats span { color: var(--muted); font-size: .84rem; }
.works-creed { margin: 0; padding: 24px 26px; border: 1px solid var(--line); border-left: 3px solid var(--orange); background: var(--panel); }
.works-creed blockquote { margin: 0 0 16px; font: 700 clamp(1.15rem, 2.2vw, 1.5rem)/1.25 var(--serif); letter-spacing: -.01em; }
.works-creed p[lang="ar"] { margin: 0 0 4px; color: var(--lime); font: 1.35rem/1.7 serif; }
.works-creed figcaption { color: var(--muted); font-size: .86rem; }

.works-tribute-panel { max-width: 780px; margin: 0 auto; padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 56px); border: 1px solid rgba(216, 179, 106, .28); background: radial-gradient(circle at 50% 0%, rgba(216, 179, 106, .08), transparent 60%); text-align: center; }
.works-tribute-ar { margin: 0 0 6px; color: var(--lime); font: 2.1rem/1.5 serif; }
.works-tribute h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); letter-spacing: -.02em; }
.works-tribute-years { margin: 12px 0 22px; color: var(--muted); font: .78rem var(--mono); letter-spacing: .22em; }
.works-tribute-text { max-width: 560px; margin: 0 auto 26px; color: var(--muted); }

.works-close { border-top: 1px solid var(--line); text-align: center; }
.works-close blockquote { margin: 0 auto 22px; font: 700 clamp(2.2rem, 5.6vw, 4.6rem)/1 var(--serif); letter-spacing: -.04em; }
.works-close p { max-width: 560px; margin: 0 auto; color: var(--muted); }
.works-close .hero-actions { flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 860px) {
  .site-index-groups { grid-template-columns: 1fr 1fr; }
  .site-index-groups section { border-bottom: 1px solid var(--line); }
  .site-index-groups section:nth-child(2n) { border-right: 0; }
}
@media (max-width: 760px) {
  .primary-nav { gap: 2px; font-size: .84rem; }
  .primary-nav a[data-route-link]:not([href="#games"]) { display: none; }
  .nav-cta { display: none; }
  .site-header-inner { min-height: 68px; }
  .site-header.is-condensed .site-header-inner { min-height: 58px; }
  .index-toggle { margin-left: 4px; padding: 9px 12px; }
  .index-toggle .label-wide { display: none; }
  .index-toggle .label-narrow { display: inline; }
  /* the hero's rotating crest sweeps past the screen edge on phones; the old
     16-link nav hid this by zooming the whole page out */
  .hero { overflow-x: clip; }
  .site-index-groups { grid-template-columns: 1fr; }
  .site-index-groups section { border-right: 0; }
  .section.detail-hero { padding-block: 36px 40px; }
  .detail-back { margin-bottom: 28px; }
  .detail-facts { grid-template-columns: 1fr; }
  .detail-facts li, .detail-facts li + li { padding: 14px 0; border-left: 0; }
  .detail-facts li + li { border-top: 1px solid var(--line); }
  .section.detail-demo, .section.detail-loop, .section.detail-section { padding-block: 48px; }
  .demo-frame { min-height: 0; padding: 16px; }
  .demo-options { grid-template-columns: 1fr; }
  .demo-vs { justify-self: center; }
  .demo-option { flex-direction: row; min-height: 88px; }
  .demo-option .opt-emoji { font-size: 2rem; }
  .demo-answers { grid-template-columns: 1fr; }
  .duck-lane { grid-template-columns: 1fr; gap: 4px; }
  .duck-pick { min-height: 36px; }
  .vox-meter { grid-template-columns: 1fr 56px; }
  .vox-meter i { grid-column: 1 / -1; grid-row: 2; }
  .oracle-compare { grid-template-columns: 1fr; }
  .section.detail-pager { grid-template-columns: 1fr; }
  .detail-pager .pager-next { align-items: flex-start; text-align: left; }
  .works-hero { display: block; min-height: auto; padding-block: 56px 80px; }
  .works-pedestal { min-height: 250px; margin-bottom: 44px; }
  .works-hero .hero-actions { flex-wrap: wrap; gap: 14px 22px; }
  .works-wing-head { flex-wrap: wrap; gap: 6px 14px; }
  .works-grid { grid-template-columns: 1fr; }
  .work-tablet { min-height: 0; }
  .work-tablet h4 { margin-top: 22px; }
  .works-maker-grid { grid-template-columns: 1fr; }
  .works-stats li { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-option:hover:not(:disabled), .work-tablet:hover, .nav-cta:hover span { transform: none; }
}