:root {
  color-scheme: dark;
  --ink: #0e0a1c;
  --purple: #9146ff;
  --gold: #f5c451;
  --deep-gold: #b8862b;
  --parchment: #f7f3ff;
  --ember: #ff4d4d;
  --magenta: #ff3ea5;
  --cyan: #3ee6ff;
  --lime: #b6ff3e;
  --ivory: #fff4d6;
  --serif: 'Inter', Arial, sans-serif;
  --display: 'Cinzel', Georgia, serif;
  --story: 'Inter', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
body { color: var(--parchment); font-family: var(--serif); }
button { font: inherit; }

#overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; overflow: hidden; isolation: isolate; pointer-events: none; }
#particle-canvas, #ray-field, #vignette, #flash, #shockwave, #chromatic-flash, #scene-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
#particle-canvas { z-index: 1; mix-blend-mode: screen; }
#ray-field { z-index: 0; opacity: 0; background: conic-gradient(from 0deg at 50% 45%, transparent 0deg, #f5c4510d 13deg, transparent 30deg, #9146ff0c 53deg, transparent 78deg, #f5c4510b 99deg, transparent 124deg, #f5c4510c 150deg, transparent 181deg, #9146ff0a 212deg, transparent 248deg, #f5c4510a 280deg, transparent 322deg, #f5c4510d 345deg, transparent 360deg); filter: blur(20px); }
#vignette { z-index: 6; opacity: 0; background: radial-gradient(ellipse at center, transparent 28%, #08050db8 100%); }
#flash { z-index: 12; opacity: 0; background: radial-gradient(circle at center, #fff8d8 0%, #f5c451 22%, #fff 55%, transparent 78%); mix-blend-mode: screen; }
#shockwave { z-index: 13; inset: auto; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px; border: 4px solid #fff3b8; border-radius: 50%; opacity: 0; transform: scale(.1); filter: drop-shadow(0 0 18px #f5c451); }
#chromatic-flash { z-index: 14; opacity: 0; background: linear-gradient(117deg, #ff3ea54b, transparent 36%, #3ee6ff55); mix-blend-mode: screen; }
#scene-layer { z-index: 5; opacity: 0; transform: translateZ(0); }
#pressure { position: absolute; z-index: 8; left: 66px; bottom: 60px; width: 180px; height: 180px; opacity: 0; transform: translate3d(0, 28px, 0) scale(.92); filter: drop-shadow(0 0 16px #9146ff66); }
#pressure-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pressure-track { fill: none; stroke: #f5c4512e; stroke-width: 2; }
.pressure-fill { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; filter: drop-shadow(0 0 7px #f5c451); }
.pressure-rune { fill: #f5c451b8; font: 13px var(--display); text-anchor: middle; dominant-baseline: middle; }
#pressure-rune-ring { transform-box: fill-box; transform-origin: center; animation: runeTurn 88s linear infinite; }
@keyframes runeTurn { to { transform: rotate(360deg); } }
.pressure-copy { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 5px; text-align: center; padding: 36px; }
.pressure-bubble { position: relative; max-width: 132px; padding: 7px 11px; overflow: hidden; color: var(--ivory); border: 1px solid #f5c451a6; border-radius: 14px; background: linear-gradient(135deg, #211333ed, #0b0714ed); box-shadow: inset 0 0 14px #9146ff60, 0 3px 13px #0009; font: 700 12px/1.2 var(--serif); text-shadow: 0 0 14px #f5c451; }
.pressure-bubble:after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); border-right: 1px solid #f5c451a6; border-bottom: 1px solid #f5c451a6; background: #140d21; }
.pressure-copy small { color: #c6b0d8; font: 500 11px var(--story); }
#pressure.is-surging #pressure-svg { animation: pressureBeat 1.15s ease-in-out infinite; }
@keyframes pressureBeat { 0%, 100% { transform: scale(1); } 17% { transform: scale(1.07); } 31% { transform: scale(.99); } 44% { transform: scale(1.04); } 60% { transform: scale(1); } }
.pressure-orbit { position: absolute; inset: 5px; border-radius: 50%; transform-origin: center; animation: orbitTurn 7s linear infinite; }
.pressure-orbit i { position: absolute; left: 50%; top: -3px; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan), 0 0 18px var(--gold); }
.pressure-orbit i:nth-child(2) { transform: rotate(120deg) translateY(0); background: var(--magenta); box-shadow: 0 0 10px var(--magenta); }
.pressure-orbit i:nth-child(3) { transform: rotate(240deg); background: var(--gold); }
@keyframes orbitTurn { to { transform: rotate(360deg); } }
#corner-chip { position: absolute; z-index: 9; top: 42px; right: 54px; display: flex; align-items: center; gap: 12px; padding: 10px 17px; opacity: 0; transform: translate3d(0, -20px, 0) scale(.9); color: var(--gold); border: 1px solid #f5c45177; background: linear-gradient(120deg, #100b19dd, #261932dd); box-shadow: 0 0 24px #9146ff50, inset 0 0 14px #f5c45115; font: 700 15px var(--serif); letter-spacing: .16em; }
#corner-chip .chip-sigil { font-size: 22px; filter: drop-shadow(0 0 8px #f5c451); }
#sound-enable { position: absolute; z-index: 30; right: 24px; bottom: 24px; display: none; pointer-events: auto; padding: 9px 13px; border: 1px solid #f5c45188; background: #100b19e8; color: var(--gold); font: 600 10px var(--serif); letter-spacing: .14em; cursor: pointer; }

.scene { position: absolute; inset: 0; opacity: 1; overflow: hidden; transform: translateZ(0); }
.scene-backwash { position: absolute; inset: 0; opacity: .6; background: radial-gradient(ellipse at center, #24153328 0%, transparent 62%); }
.scene-title { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); color: var(--gold); font: 700 25px var(--display); letter-spacing: .27em; text-shadow: 0 0 28px #f5c45190; white-space: nowrap; }
.scene-subtitle { color: #e7d5b3; font: 500 17px var(--story); letter-spacing: .05em; text-shadow: 0 2px 9px #08050d; }

/* Summoning geometry */
.summon-scene { perspective: 1000px; }
.summon-title { top: 7%; font-size: 31px; }
.summon-subtitle { position: absolute; top: 14.5%; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.summoning-circle { position: absolute; left: 50%; top: 54%; width: min(66vh, 720px); height: min(66vh, 720px); transform: translate(-50%, -35%); filter: drop-shadow(0 0 20px #9146ff66) drop-shadow(0 0 55px #f5c45120); }
.summoning-circle svg { width: 100%; height: 100%; overflow: visible; }
.circle-line { fill: none; stroke: #f5c451a8; stroke-width: 1.4; }
.circle-line.dim { stroke: #9146ff85; stroke-width: 2; }
.circle-runes { fill: #f5c451c9; font: 20px var(--display); text-anchor: middle; dominant-baseline: middle; }
.pentagram { fill: none; stroke: #fff0bf; stroke-width: 1.1; stroke-dasharray: 1300; stroke-dashoffset: 1300; filter: drop-shadow(0 0 9px #f5c451); }
.countdown-ring { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 8px #f5c451); transform: rotate(-90deg); transform-origin: center; }
.summon-avatar-slot { position: absolute; left: 50%; top: 50%; width: 94px; margin: -47px; display: grid; justify-items: center; gap: 8px; opacity: 0; filter: drop-shadow(0 0 13px #f5c45188); }
.summon-avatar-slot img { width: 68px; height: 68px; border: 2px solid var(--gold); border-radius: 50%; object-fit: cover; background: #171020; box-shadow: 0 0 18px #f5c45188, inset 0 0 10px #0b0714; }
.summon-avatar-slot span { max-width: 120px; color: var(--parchment); font: 600 13px var(--serif); text-shadow: 0 2px 8px #000; white-space: nowrap; }
.summon-pillar { position: absolute; left: 50%; top: 23%; width: 120px; height: 70%; opacity: 0; transform: translateX(-50%) scaleY(.1); transform-origin: bottom; background: linear-gradient(0deg, #fff5c3aa, #f5c45133 38%, transparent); filter: blur(16px); }
.fizzle-title { position: absolute; left: 50%; top: 17%; transform: translateX(-50%); font: 700 25px var(--display); color: #b9a9a0; letter-spacing: .17em; text-shadow: 0 0 16px #948a84; text-align: center; }

/* Archive tome */
.decipher-scene, .canon-scene { perspective: 1500px; }
.tome-wrap { position: absolute; left: 50%; top: 50%; width: 820px; height: 540px; transform: translate(-50%, -50%); perspective: 1600px; filter: drop-shadow(0 35px 52px #000a) drop-shadow(0 0 36px #9146ff50); }
.tome { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(12deg) rotateY(-7deg); }
.tome-pages { position: absolute; inset: 12px 18px 4px; border: 1px solid #a58a5b; border-radius: 7px 15px 14px 7px; background: repeating-linear-gradient(0deg, #dfcfaf 0 2px, #bca77e 2px 3px); box-shadow: inset 0 0 40px #76552542; }
.tome-page { position: absolute; top: 18px; bottom: 16px; width: 49%; padding: 42px 44px; color: #2b1a19; background: radial-gradient(ellipse at 52% 45%, #f5e8ca, #d7c29b 76%, #ae9062); box-shadow: inset 0 0 30px #6c4b2026; overflow: hidden; }
.tome-page.left { left: 18px; border-radius: 8px 2px 3px 8px; }
.tome-page.right { right: 18px; border-radius: 2px 8px 8px 3px; }
.tome-seam { position: absolute; left: 50%; top: 18px; bottom: 15px; width: 28px; transform: translateX(-50%); background: linear-gradient(90deg, #5a361c55, transparent 45%, #fff5d233); z-index: 3; }
.tome-cover { position: absolute; z-index: 4; inset: 4px 50% 4px 0; transform-origin: left center; transform-style: preserve-3d; backface-visibility: hidden; border: 9px solid #55331c; border-radius: 10px 4px 4px 10px; background: radial-gradient(ellipse at 50% 42%, #6d321b 0%, #3d1c17 62%, #1f1013 100%); box-shadow: inset 0 0 0 2px #b8862b, inset 0 0 35px #0b0714; }
.tome-cover:before { content: ''; position: absolute; inset: 18px; border: 1px solid #d5a54488; box-shadow: 0 0 12px #f5c45124; }
.cover-sigil { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 82px; color: var(--gold); filter: drop-shadow(0 0 18px #f5c451); }
.tome-runes { color: #7837ca; font: 600 18px/2 var(--display); letter-spacing: .28em; text-shadow: 0 0 10px #9146ff; overflow-wrap: anywhere; }
.archive-title { margin: 0 0 18px; color: #6a3da3; font: 700 25px var(--display); text-align: center; letter-spacing: .12em; }
.archive-copy { color: #32221e; font: 20px/1.6 var(--story); text-align: center; }
.light-rays { position: absolute; inset: -70px; opacity: .4; background: conic-gradient(from 180deg at 50% 50%, transparent 0 12deg, #f5c45116 18deg, transparent 28deg, #9146ff18 47deg, transparent 61deg, #f5c45118 82deg, transparent 105deg, #f5c45112 136deg, transparent 160deg); filter: blur(16px); }
.decipher-caption { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); color: var(--gold); font: 700 24px var(--display); letter-spacing: .22em; text-shadow: 0 0 22px #9146ff; white-space: nowrap; }

/* Vote scrolls */
.vote-heading { top: 8%; }
.vote-question { position: absolute; top: 15%; left: 50%; width: 74%; transform: translateX(-50%); text-align: center; color: var(--parchment); font: 500 22px var(--story); }
.scroll-row { position: absolute; left: 50%; top: 52%; display: flex; width: min(1400px, 88vw); gap: 34px; transform: translate(-50%, -50%); perspective: 900px; }
.vote-scroll { position: relative; flex: 1; min-width: 0; height: 440px; padding: 44px 32px 28px; overflow: hidden; color: #3c2515; transform: scaleY(.04); transform-origin: center; background: linear-gradient(90deg, #9a7442, #ddc99f 12%, #f2e4c7 50%, #d7bf92 87%, #98703c); border: 2px solid #b8862b; box-shadow: inset 0 0 26px #6640185c, 0 20px 40px #0008; }
.vote-scroll:before, .vote-scroll:after { content: ''; position: absolute; left: -3%; width: 106%; height: 22px; border: 2px solid #8a612d; border-radius: 50%; background: linear-gradient(#e6d2aa, #9b713e); box-shadow: 0 3px 7px #0005; }
.vote-scroll:before { top: -10px; }
.vote-scroll:after { bottom: -10px; }
.vote-scroll.leading { filter: drop-shadow(0 0 19px #f5c451b8); }
.vote-number { margin: 13px 0 0; text-align: center; color: #d49f32; font: 900 54px var(--display); text-shadow: 0 1px #fff5; }
.vote-howto { margin: 0 0 15px; color: #8b6123; font: 700 13px var(--serif); letter-spacing: .12em; text-align: center; }
.vote-title { min-height: 96px; display: grid; place-items: center; color: #321d13; font: 700 22px/1.35 var(--display); text-align: center; text-shadow: 0 1px #fff8; }
.vote-count { margin: 12px 0; color: #684820; font: 16px var(--story); text-align: center; }
.vote-bar-track { position: absolute; left: 10%; right: 10%; bottom: 41px; height: 22px; border: 1px solid #87602c; border-radius: 12px; background: #72552d66; overflow: hidden; }
.vote-bar-fill { position: relative; width: 100%; height: 100%; border-radius: inherit; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, #a36a13, #f5c451, #fff2b8); box-shadow: 0 0 16px #f5c451; }
.vote-bar-fill:after { content: ''; position: absolute; inset: -3px 0; width: 32%; background: linear-gradient(90deg, transparent, #fffbdcdd, transparent); filter: blur(4px); animation: goldWave 1.8s ease-in-out infinite; }
@keyframes goldWave { from { transform: translateX(-120%); } to { transform: translateX(420%); } }
.vote-percent { margin-top: 8px; color: #705020; text-align: center; font: 600 13px var(--serif); }
.countdown { position: absolute; left: 50%; bottom: 4%; width: 120px; height: 120px; transform: translateX(-50%); }
.countdown circle { fill: #120b19c7; stroke: #f5c45135; stroke-width: 3; }
.countdown .countdown-progress { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; stroke-dasharray: 314.2; stroke-dashoffset: 0; filter: drop-shadow(0 0 8px #f5c451); }
.countdown text { fill: var(--parchment); font: 700 20px var(--serif); text-anchor: middle; dominant-baseline: middle; }

/* Canonization, initiation, trials */
.canon-scene .tome-wrap { width: min(1100px, 92vw); height: min(640px, 72vh); top: 50%; transform: translate(-50%, -50%); }
.canon-scene .tome-page { padding: 36px 42px; }
.canon-page-left, .canon-page-right { z-index: 2; }
.canon-page-left { display: flex; flex-direction: column; align-items: center; }
.canon-title { margin: 4px 0 13px; color: #9c6c22; font: 900 27px/1.18 var(--display); text-align: center; text-shadow: 0 0 16px #f5c45166; }
.canon-sigil { display: block; margin: 0 auto 3px; font-size: 48px; text-align: center; filter: drop-shadow(0 0 12px #f5c451); }
.canon-story { position: relative; width: 100%; margin: 0 0 10px; color: #33221b; font: 500 17px/1.42 var(--story); text-align: center; -webkit-mask-image: radial-gradient(ellipse, #000 0%, #000 48%, transparent 72%); mask-image: radial-gradient(ellipse, #000 0%, #000 48%, transparent 72%); -webkit-mask-size: 0% 0%; mask-size: 0% 0%; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.canon-explainer { width: 100%; margin: 0; color: #543719; font: 600 14px/1.4 var(--serif); text-align: center; }
.wax-frame { height: 285px; display: grid; place-items: center; padding: 14px; border: 8px ridge #b8862b; border-radius: 48% 48% 44% 44%; background: radial-gradient(ellipse, #f6e8ca, #9a6a2d); box-shadow: 0 0 0 4px #603e21, 0 0 25px #f5c45188; overflow: hidden; }
.wax-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 44%; }
.preserved { color: #68431d; font: 700 20px var(--display); text-align: center; letter-spacing: .1em; }
.witness-title { margin-top: 17px; color: #7d5525; font: 700 13px var(--serif); letter-spacing: .3em; text-align: center; }
.witness-row { position: static; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 8px 12px; width: 100%; margin-top: 8px; }
.witness { display: grid; justify-items: center; gap: 5px; color: var(--parchment); font: 11px var(--serif); text-shadow: 0 2px 5px #000; opacity: 0; }
.witness img { width: 47px; height: 47px; border: 2px solid var(--gold); border-radius: 50%; object-fit: cover; background: #160e1d; box-shadow: 0 0 13px #f5c45188; }
.canon-page-right .witness-row { gap: 6px 9px; margin-top: 7px; }
.canon-page-right .witness { gap: 2px; color: #513618; font-size: 9px; text-shadow: none; }
.canon-page-right .witness img { width: 36px; height: 36px; }
.canon-stamp { position: absolute; z-index: 6; left: 50%; top: 30%; padding: 10px 18px; transform: translate(-50%, -50%) rotate(-12deg) scale(3); border: 5px double #b22d27; color: #b52f2a; background: #eadbc0bb; font: 900 23px var(--display); letter-spacing: .06em; text-shadow: 1px 2px #6b141444; opacity: 0; white-space: nowrap; }
.lost-scroll { position: absolute; top: 40%; width: 260px; height: 320px; display: grid; place-items: center; padding: 24px; color: #3b2515; background: linear-gradient(90deg, #9a7442, #f2e4c7, #98703c); border: 3px solid #b8862b; box-shadow: 0 15px 40px #0009; font: 700 18px var(--display); text-align: center; }
.lost-scroll.left { left: 7%; }
.lost-scroll.right { right: 7%; }
.initiation-title { top: 15%; }
.initiation-avatar { position: absolute; left: 24%; top: 50%; width: 240px; height: 240px; transform: translateY(-50%) scale(.5); border: 4px solid var(--gold); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 14px #f5c4511b, 0 0 45px #f5c451bb; }
.candle-ring { position: absolute; left: 24%; top: 50%; width: 410px; height: 410px; transform: translate(-50%, -50%); }
.candle { position: absolute; width: 20px; height: 42px; border-radius: 50% 50% 35% 35%; background: radial-gradient(ellipse at 50% 75%, #fff5bd 0 18%, #f5c451 42%, #ff8d33 69%, transparent 72%); filter: drop-shadow(0 0 12px #ff9e39); animation: flame 1.1s ease-in-out infinite alternate; }
@keyframes flame { from { transform: scale(.88, 1.08) rotate(-3deg); filter: drop-shadow(0 0 8px #ff9e39); } to { transform: scale(1.12, .9) rotate(4deg); filter: drop-shadow(0 0 18px #ffe28b); } }
.initiation-scroll { position: absolute; left: 43%; top: 50%; width: 600px; min-height: 410px; transform: translateY(-50%) scaleY(.08); padding: 54px 60px; color: #39261b; background: linear-gradient(90deg, #ad8851, #f0dfbc 12%, #ead7b1 85%, #987042); border: 2px solid #b8862b; box-shadow: inset 0 0 35px #71501f66, 0 25px 55px #0008; text-align: center; }
.initiation-scroll h2 { color: #885a20; font: 700 22px var(--serif); letter-spacing: .1em; }
.initiation-scroll h3 { color: #3a2117; font: 700 30px var(--display); }
.initiation-scroll p { color: #392b21; font: 500 22px/1.5 var(--story); }
.initiate-number { color: #a37225; font: 700 15px var(--serif); letter-spacing: .2em; }
.trial-banner { position: absolute; left: 50%; top: 6%; transform: translate(-50%, -140px) rotate(-2deg); padding: 13px 42px; border: 2px solid #f5c451; color: var(--gold); background: linear-gradient(90deg, #24112c, #0b0714, #24112c); box-shadow: 0 0 35px #9146ff7a, inset 0 0 20px #f5c45120; font: 900 27px var(--display); letter-spacing: .22em; white-space: nowrap; }
.trial-question { position: absolute; left: 50%; top: 20%; width: 70%; transform: translateX(-50%) scale(.8); padding: 28px 42px; color: #39261b; background: linear-gradient(90deg, #a47b44, #f1e3c7, #a47b44); border: 2px solid #b8862b; box-shadow: 0 15px 38px #0007; font: 500 23px var(--story); text-align: center; }
.trial-grid { position: absolute; left: 50%; top: 61%; display: grid; width: min(1040px, 80vw); grid-template-columns: 1fr 1fr; gap: 22px; transform: translate(-50%, -50%); }
.trial-result-scene .trial-grid { top: 39%; width: min(900px, 76vw); }
.trial-tile { min-height: 155px; display: flex; align-items: center; gap: 22px; padding: 25px 34px; transform: rotateX(18deg) scale(.8); color: var(--parchment); border: 2px solid #9d70d6; background: linear-gradient(135deg, #30223b, #171020 70%, #33202d); box-shadow: inset 0 0 24px #9146ff3a, 0 14px 22px #0008; }
.trial-tile .tile-rune { width: 61px; height: 61px; flex: 0 0 auto; display: grid; place-items: center; border: 2px solid #f5c45199; border-radius: 10px; color: var(--gold); background: #0b0714; font: 700 23px var(--display); box-shadow: 0 0 16px #f5c45144; }
.trial-tile .tile-copy { flex: 1; font: 600 17px/1.35 var(--serif); }
.trial-tile .tile-count { min-width: 35px; color: #d7b6ff; font: 700 20px var(--serif); text-align: right; }
.trial-tile.correct { border-color: #ffe79a; background: linear-gradient(135deg, #b8862b, #f5c451 45%, #734a17); color: #2d1a08; filter: drop-shadow(0 0 23px #f5c451); }
.trial-tile.wrong { opacity: .28; filter: grayscale(1) blur(1px); }
.trial-result-panel { position: absolute; left: 50%; top: 18%; width: 78%; transform: translateX(-50%); display: grid; justify-items: center; }
.trial-result-scene .trial-result-panel { top: 62%; }
.correct-rain { min-height: 110px; display: flex; justify-content: center; gap: 18px; }
.correct-rain img { width: 62px; height: 62px; border: 2px solid var(--gold); border-radius: 50%; object-fit: cover; box-shadow: 0 0 18px #f5c451; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 18px; margin-top: 20px; }
.podium-user { min-width: 170px; padding: 18px; color: #2d1a08; background: linear-gradient(#f5e8ca, #b8862b); border: 2px solid #fff0b0; text-align: center; box-shadow: 0 0 20px #f5c45166; }
.podium-user.first { min-height: 190px; order: 2; font-size: 19px; }
.podium-user.second { min-height: 150px; order: 1; }
.podium-user.third { min-height: 125px; order: 3; }
.podium-user small { display: block; margin-top: 8px; font: 13px var(--serif); }
.podium-user .crown { display: block; margin-bottom: 5px; font-size: 34px; }
.podium-rest { display: flex; gap: 24px; margin-top: 18px; color: var(--parchment); font: 13px var(--serif); }
.fizzle-scene { background: radial-gradient(ellipse at center 65%, #827b7422, transparent 58%); }

@media (max-width: 1000px) {
  .tome-wrap { transform: translate(-50%, -45%) scale(.72); }
  .canon-scene .tome-wrap { transform: translate(-50%, -45%) scale(.67); }
  .scroll-row { gap: 10px; width: 96vw; }
  .vote-scroll { padding: 36px 18px 24px; }
  .vote-title { font-size: 17px; }
  .initiation-scroll { left: 39%; transform-origin: left center; scale: .78; }
}

/* Collectible card art pass */
.avatar-orb { --avatar-hue: 42; display: inline-block; flex: 0 0 auto; width: 52px; height: 52px; overflow: hidden; border: 2px solid var(--rarity-color, var(--gold)); border-radius: 50%; background: radial-gradient(circle at 34% 28%, hsl(var(--avatar-hue) 90% 82%), hsl(var(--avatar-hue) 62% 35%) 54%, #100c19 78%); box-shadow: 0 0 14px color-mix(in srgb, var(--rarity-color, var(--gold)) 60%, transparent); }
.avatar-orb svg { width: 100%; height: 100%; }
.avatar-orb circle:first-child { fill: #fff1; stroke: #fff9; stroke-width: 1; }
.avatar-orb path { fill: #100c19aa; }
.avatar-orb circle:nth-of-type(2) { fill: #f8e7ce; stroke: #291a2f; stroke-width: 2; }
.avatar-orb text { fill: #fff; font: 700 12px var(--serif); text-anchor: middle; }
.summon-avatar-slot .avatar-orb { width: 68px; height: 68px; --rarity-color: var(--gold); }
.pressure-orbit i:nth-child(2) { left: auto; top: 22%; right: 7%; }
.pressure-orbit i:nth-child(3) { left: 9%; top: 72%; }
.pressure-orbit i:nth-child(2), .pressure-orbit i:nth-child(3) { transform: none; }
.summon-avatar-slot .summon-plus { font: 900 23px var(--display); }
.summon-plus, .summon-combo { position: absolute; z-index: 4; color: var(--lime); font: 900 23px var(--display); text-shadow: 0 0 12px var(--lime), 2px 3px #000; animation: floatUp .9s ease-out both; }
.summon-plus { top: -13px; right: -4px; }
.summon-combo { left: 50%; top: 45%; transform: translate(-50%, -50%); color: var(--cyan); font-size: 28px; white-space: nowrap; }
@keyframes floatUp { from { opacity: 0; translate: 0 18px; scale: .6; } 35% { opacity: 1; } to { opacity: 0; translate: 0 -38px; scale: 1.15; } }
.impact-callout { position: absolute; z-index: 18; left: 50%; top: 50%; transform: translate(-50%, -50%); color: transparent; background: linear-gradient(180deg, #fff, var(--callout-color, var(--gold)) 48%, #ff8f3e); background-clip: text; -webkit-background-clip: text; font: 900 clamp(44px, 8vw, 112px)/.95 var(--display); letter-spacing: .08em; text-align: center; white-space: nowrap; -webkit-text-stroke: 3px #130a1c; paint-order: stroke fill; text-shadow: 0 7px 0 #130a1c, 0 0 24px var(--callout-color), 0 0 58px #fff8; filter: drop-shadow(0 16px 20px #000b); pointer-events: none; }
.rarity-callout { top: 13%; font-size: clamp(34px, 5vw, 68px); opacity: 0; background: linear-gradient(#fff, var(--callout-color)); color: transparent; background-clip: text; -webkit-background-clip: text; }
.canon-scene { perspective: 1500px; background: radial-gradient(ellipse at center, #342044b8, #09060fe8 70%); }
.card-rays { position: absolute; inset: -20%; opacity: .35; background: repeating-conic-gradient(from 0deg at 50% 50%, #f5c45120 0deg 5deg, transparent 5deg 15deg, #9146ff20 15deg 19deg, transparent 19deg 30deg); filter: blur(13px); animation: raysTurn 32s linear infinite; }
@keyframes raysTurn { to { rotate: 360deg; } }
.card-pack { position: absolute; z-index: 3; left: 50%; top: 50%; width: 130px; height: 180px; display: grid; place-items: center; margin: -90px -65px; border: 2px solid #fff3b8; border-radius: 24px 24px 34px 34px; background: radial-gradient(circle at 50% 44%, #fff8c8, #f5c451 13%, #ff3ea5 40%, #341254 75%); box-shadow: 0 0 32px #fff, 0 0 90px #ff3ea5, inset 0 0 28px #fff8; font-size: 64px; }
.card-pack:before, .card-pack:after { content: ''; position: absolute; inset: -19px; border: 2px solid #f5c45180; border-radius: 50%; animation: packOrbit 2.2s linear infinite; }
.card-pack:after { inset: -36px; border-color: #3ee6ff66; animation-direction: reverse; }
.card-pack span { filter: drop-shadow(0 0 14px #fff); }
@keyframes packOrbit { to { rotate: 360deg; } }
.card-wrap { position: absolute; z-index: 5; left: 50%; top: 50%; width: min(520px, 76vw); height: min(760px, 82vh); aspect-ratio: 13 / 19; transform: translate(-50%, -50%); perspective: 1500px; }
.card-shell { position: absolute; inset: 0; transform-style: preserve-3d; }
.card-face, .lore-card { position: absolute; inset: 0; overflow: hidden; border-radius: 24px; backface-visibility: hidden; }
.card-back { display: grid; align-content: center; justify-items: center; gap: 20px; transform: rotateY(180deg); border: 8px double #f5c451; background: radial-gradient(circle, #51216b, #100819 72%); box-shadow: 0 0 55px #9146ff; color: var(--gold); text-align: center; letter-spacing: .2em; }
.card-back .back-sigil { font-size: 140px; text-shadow: 0 0 26px #f5c451; }
.card-back small { color: #e8d6ff; font-size: 10px; }
.lore-card { display: flex; flex-direction: column; padding: 19px 22px 14px; color: #fff5d6; border: 3px solid var(--rarity-color); background: linear-gradient(145deg, #291543, #0c0917 48%, #21102e); box-shadow: 0 0 0 5px #100a1a, 0 0 38px var(--rarity-color), inset 0 0 35px color-mix(in srgb, var(--rarity-color) 18%, transparent); }
.lore-card.common { --rarity-color: #c9cdd6; }
.lore-card.rare { --rarity-color: #3ee6ff; }
.lore-card.epic { --rarity-color: #ff3ea5; }
.lore-card.legendary { --rarity-color: #f5c451; }
.card-edge { position: absolute; inset: 9px; border: 1px solid color-mix(in srgb, var(--rarity-color) 70%, transparent); border-radius: 17px; pointer-events: none; }
.card-meta, .card-footer { z-index: 2; display: flex; justify-content: space-between; color: var(--rarity-color); font: 700 11px var(--serif); letter-spacing: .12em; }
.card-meta { padding: 3px 6px 10px; }
.card-art { position: relative; flex: 0 0 31%; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--rarity-color); background: radial-gradient(ellipse at 50% 42%, #9c55cb, #261239 45%, #090712); }
.nebula { position: absolute; inset: -50%; background: conic-gradient(from 20deg, transparent, #ff3ea54d, #3ee6ff70, transparent, #b6ff3e45, transparent); filter: blur(16px); animation: raysTurn 18s linear infinite; }
.sigil-art { z-index: 1; color: #fff3b8; font: 180px/1 var(--display); text-shadow: 0 0 9px #fff, 0 0 25px var(--rarity-color), 0 0 56px var(--rarity-color); }
.art-caption { position: absolute; z-index: 2; bottom: 8px; color: #fff; font: 700 9px var(--serif); letter-spacing: .3em; text-shadow: 0 2px 7px #000; }
.card-ribbon { z-index: 2; position: relative; margin: -13px -30px 0; padding: 13px 24px 10px; transform: rotate(-1deg); border-top: 1px solid #fff8; border-bottom: 2px solid var(--rarity-color); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rarity-color) 62%, #21102e), #251433 52%, color-mix(in srgb, var(--rarity-color) 62%, #21102e), transparent); text-align: center; }
.card-ribbon h1 { margin: 0; color: #fff8dc; font: 900 clamp(17px, 2vw, 25px)/1.15 var(--display); text-shadow: 0 2px #25112f, 0 0 16px var(--rarity-color); }
.card-copy { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 8px 6px; text-align: center; }
.card-story { margin: 0; color: #f2e6d8; font: 500 17px/1.35 var(--story); }
.card-explainer { margin: 0; color: #c3b4d2; font: 11px/1.3 var(--serif); }
.card-witness-title { z-index: 2; margin: 0 0 6px; color: var(--rarity-color); font: 700 10px var(--serif); letter-spacing: .25em; text-align: center; }
.card-witnesses { z-index: 2; min-height: 70px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 5px 9px; }
.card-witness { display: grid; justify-items: center; gap: 2px; color: #e7dced; font: 8px var(--serif); }
.card-witness .avatar-orb { width: 34px; height: 34px; }
.card-stamp { position: absolute; z-index: 8; left: 50%; top: 48%; padding: 8px 15px; transform: translate(-50%, -50%) rotate(-13deg) scale(2.7); border: 4px double #ff5c58; color: #ff514d; background: #f7e3d0d9; font: 900 20px var(--display); letter-spacing: .08em; text-shadow: 1px 2px #6b1414; white-space: nowrap; opacity: 0; }
.card-foil { position: absolute; z-index: 7; inset: 0; opacity: .35; pointer-events: none; background: linear-gradient(115deg, transparent 27%, #fff8 42%, #3ee6ff55 48%, #ff3ea555 54%, transparent 69%); background-size: 240% 100%; animation: foilSweep 3.4s ease-in-out infinite; mix-blend-mode: color-dodge; }
@keyframes foilSweep { 0%, 20% { background-position: 130% 0; } 65%, 100% { background-position: -130% 0; } }
.card-footer { padding-top: 6px; font-size: 8px; }
/* Achievement and vote spectacle */
.achievement-pill { position: absolute; z-index: 12; left: 50%; bottom: 5%; width: min(560px, 90vw); transform: translateX(-50%); min-height: 112px; display: flex; align-items: center; gap: 20px; overflow: hidden; padding: 16px 24px; border: 1px solid #f5c451; border-left: 6px solid #f5c451; border-radius: 999px; background: linear-gradient(110deg, #14101eee, #29203bef); box-shadow: 0 0 28px #f5c45155, 0 15px 50px #000a; }
.achievement-icon { position: relative; flex: 0 0 auto; animation: iconSpin 1.1s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes iconSpin { from { transform: rotate(-180deg) scale(.4); } to { transform: rotate(0) scale(1); } }
.achievement-icon .avatar-orb { width: 68px; height: 68px; --rarity-color: var(--gold); }
.candle-icon { position: absolute; right: -4px; bottom: -3px; color: #ffe890; font-size: 24px; text-shadow: 0 0 12px #ff8d33; }
.achievement-copy { z-index: 1; display: grid; gap: 6px; }
.achievement-copy b { color: var(--gold); font: 900 13px var(--serif); letter-spacing: .13em; }
.achievement-copy strong { color: #fff; font: 600 14px/1.3 var(--serif); }
.achievement-copy small { color: var(--lime); font: 900 13px var(--serif); letter-spacing: .1em; }
.achievement-sheen { position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(100deg, transparent, #fff2, transparent); animation: foilSweep 2.4s ease-in-out infinite; }
.vote-scroll { background: linear-gradient(90deg, #172633, #dce2dc 12%, #f4f0dd 50%, #c9e1df 87%, #12303a); border-color: #3ee6ff; }
.vote-scroll.leading { z-index: 2; filter: drop-shadow(0 0 20px #3ee6ff) drop-shadow(0 0 38px #ff3ea5); animation: leadPulse .8s ease-in-out infinite alternate; }
.vote-scroll.leading:before { animation: flame 0.35s ease-in-out infinite alternate; }
.vote-scroll.leading:after { background: linear-gradient(90deg, #3ee6ff, #ff3ea5, #b6ff3e); box-shadow: 0 0 23px #3ee6ff; }
.vote-bar-track { background: #081c2c; border-color: #3ee6ff; }
.vote-bar-fill { background: linear-gradient(90deg, #3ee6ff, #9146ff, #ff3ea5, #f5c451); box-shadow: 0 0 20px #3ee6ff; }
@keyframes leadPulse { to { filter: drop-shadow(0 0 30px #3ee6ff) drop-shadow(0 0 55px #ff3ea5); } }
.final-countdown { position: absolute; z-index: 8; left: 50%; top: 49%; display: none; transform: translate(-50%, -50%); color: #fff; font: 900 clamp(90px, 18vw, 230px)/1 var(--display); -webkit-text-stroke: 5px #100719; paint-order: stroke fill; text-shadow: 0 0 32px #3ee6ff, 0 0 70px #ff3ea5, 0 10px #000; pointer-events: none; }
.final-countdown.is-live { display: block; }
.trial-scene:before, .trial-result-scene:before { content: ''; position: absolute; inset: -25%; opacity: .35; background: repeating-conic-gradient(from 0deg at 50% 35%, #fff3 0deg 4deg, transparent 4deg 22deg); animation: raysTurn 20s linear infinite; }
.trial-tile[data-tile="0"], .trial-tile[data-result-tile="0"] { --tile-color: #ff3ea5; }
.trial-tile[data-tile="1"], .trial-tile[data-result-tile="1"] { --tile-color: #3ee6ff; }
.trial-tile[data-tile="2"], .trial-tile[data-result-tile="2"] { --tile-color: #b6ff3e; }
.trial-tile[data-tile="3"], .trial-tile[data-result-tile="3"] { --tile-color: #f5c451; }
.trial-tile { position: relative; z-index: 1; border-color: var(--tile-color); box-shadow: inset 0 0 24px color-mix(in srgb, var(--tile-color) 22%, transparent), 0 0 19px color-mix(in srgb, var(--tile-color) 30%, transparent), 0 14px 22px #0008; }
.trial-tile .tile-rune { color: var(--tile-color); border-color: var(--tile-color); box-shadow: 0 0 17px var(--tile-color); }
.trial-tile.correct { filter: drop-shadow(0 0 26px var(--tile-color)); }
.trial-result-scene .trial-tile.wrong { opacity: .18; }
.correct-rain .avatar-orb { width: 62px; height: 62px; --rarity-color: var(--lime); }
.trial-result-panel:before { content: 'LOREMASTER'; margin-bottom: 8px; padding: 7px 20px; color: #1b1206; background: linear-gradient(90deg, #f5c451, #fff2b2, #f5c451); border: 1px solid #fff5c1; box-shadow: 0 0 25px #f5c451; font: 900 17px var(--display); letter-spacing: .2em; }

@media (max-width: 700px) {
  .card-wrap { width: min(420px, 82vw); height: min(640px, 84vh); }
  .card-art { flex-basis: 27%; }
  .sigil-art { font-size: 125px; }
  .card-story { font-size: 14px; }
  .card-witnesses { gap: 3px 5px; }
  .card-witness .avatar-orb { width: 28px; height: 28px; }
  .card-witness { font-size: 7px; }
  .achievement-pill { left: 50%; right: auto; bottom: 4%; gap: 12px; padding: 12px; }
  .achievement-copy strong { font-size: 12px; }
  .trial-tile { min-height: 125px; padding: 14px; gap: 10px; }
  .trial-tile .tile-rune { width: 44px; height: 44px; }
}

/* Raid welcome and lore recall broadcast zones */
.raid-banner { position: absolute; z-index: 11; left: 50%; bottom: 7%; display: flex; align-items: center; gap: 16px; width: min(920px, 88vw); padding: 14px 22px; opacity: 0; transform: translate(-50%, 32px); border: 1px solid #f5c451a8; border-radius: 14px; background: linear-gradient(100deg, #100b19f2, #30203deF 48%, #100b19f2); box-shadow: 0 14px 42px #0009, inset 0 0 24px #f5c45119; transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.raid-banner.is-visible { opacity: 1; transform: translate(-50%, 0); }
.raid-avatar-wrap { flex: 0 0 54px; width: 54px; height: 54px; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--gold); border-radius: 50%; background: #251833; color: var(--gold); font: 800 22px var(--display); }
.raid-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
.raid-banner-copy { display: grid; gap: 1px; }
.raid-banner-copy small { color: var(--gold); font: 800 12px/1.2 var(--serif); letter-spacing: .2em; }
.raid-banner-copy strong { color: var(--parchment); font: 800 clamp(20px, 2vw, 28px)/1.2 var(--display); }
.raid-banner-copy > span { color: #d3c4e0; font: 600 14px/1.2 var(--serif); }
.raid-panel { position: absolute; z-index: 10; top: 150px; right: 54px; width: min(370px, 30vw); padding: 16px; opacity: 0; transform: translateX(24px); border: 1px solid #f5c45177; border-radius: 14px; background: linear-gradient(145deg, #171020f5, #0c0914f5); box-shadow: 0 14px 42px #0009, inset 0 0 24px #9146ff20; transition: opacity .35s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.raid-panel.is-visible { opacity: 1; transform: translateX(0); }
.raid-panel-heading { margin-bottom: 12px; color: var(--gold); font: 800 13px/1.2 var(--display); letter-spacing: .12em; }
.raid-lore-card { display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 12px; border: 1px solid #ffffff1a; border-radius: 10px; background: #ffffff08; animation: raidDeal .35s cubic-bezier(.2,.8,.2,1) both; }
.raid-lore-sigil { flex: 0 0 40px; color: var(--gold); font: 700 30px/1 var(--display); text-align: center; text-shadow: 0 0 16px #f5c45199; }
.raid-lore-copy { display: grid; min-width: 0; gap: 4px; }
.raid-lore-copy strong { overflow: hidden; color: var(--parchment); font: 800 15px/1.2 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.raid-lore-copy span { display: -webkit-box; overflow: hidden; color: #c9bed4; font: 500 12px/1.35 var(--serif); -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.raid-card-count { display: block; margin-top: 8px; color: #ad9bbb; font: 700 10px/1 var(--serif); letter-spacing: .14em; text-align: right; }
.raid-empty { margin: 0; color: #c9bed4; font: 500 13px/1.4 var(--serif); }
@keyframes raidDeal { from { opacity: 0; transform: translateY(12px) rotateX(-8deg); } to { opacity: 1; transform: translateY(0) rotateX(0); } }
.recall-chip { position: absolute; z-index: 12; top: 96px; right: 54px; display: flex; align-items: center; gap: 10px; width: min(370px, 34vw); padding: 9px 13px; overflow: hidden; opacity: 0; transform: translateY(-8px); border: 1px solid #f5c45180; border-radius: 10px; background: linear-gradient(110deg, #120d1cf2, #2b1c35f2); box-shadow: 0 8px 28px #0008, inset 0 0 14px #f5c45113; transition: opacity .25s ease, transform .25s ease; }
.recall-chip.is-visible { opacity: 1; transform: translateY(0); }
.recall-chip:after { position: absolute; inset: 0; content: ''; pointer-events: none; background: linear-gradient(105deg, transparent 28%, #fff5 47%, #f5c45166 52%, transparent 68%); transform: translateX(-120%); }
.recall-chip.is-visible:after { animation: recallShimmer 1.25s ease-in-out 2; }
.recall-chip .chip-sigil { flex: 0 0 auto; color: var(--gold); font: 700 22px/1 var(--display); filter: drop-shadow(0 0 8px #f5c451); }
.recall-copy { display: grid; min-width: 0; gap: 2px; }
.recall-copy strong { color: var(--gold); font: 800 10px/1.1 var(--serif); letter-spacing: .13em; }
.recall-title { overflow: hidden; color: var(--parchment); font: 700 13px/1.2 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.recall-copy small { color: #d6c5a0; font: 600 10px/1.1 var(--serif); }
@keyframes recallShimmer { to { transform: translateX(120%); } }
@media (max-width: 700px) {
  .raid-banner { bottom: 4%; width: 92vw; gap: 12px; padding: 12px 14px; }
  .raid-avatar-wrap { flex-basis: 44px; width: 44px; height: 44px; }
  .raid-panel { top: 128px; right: 12px; width: min(340px, 82vw); }
  .recall-chip { top: 88px; right: 12px; width: min(340px, 82vw); }
}


/* Second review layout polish */
.summoning-circle { top: 52%; width: min(620px, 60vh); height: min(620px, 60vh); transform: translate(-50%, -50%); }
.summon-avatar-slot { z-index: 4; width: 104px; margin: -52px; justify-items: center; gap: 5px; }
.summon-avatar-slot .avatar-orb { width: 66px; height: 66px; }
.summon-avatar-slot > span:not(.avatar-orb) { display: block; max-width: 136px; overflow: hidden; color: #fff4d6; font: 700 12px/1.15 var(--serif); text-align: center; text-overflow: ellipsis; text-shadow: 0 2px 8px #000, 0 0 9px #000; }
.summon-plus { top: -10px; right: 7px; font-size: 30px; -webkit-text-stroke: 2px #0b0714; paint-order: stroke fill; animation: none; }
.summon-combo-display { position: absolute; z-index: 6; left: calc(50% + min(355px, 37vw)); top: 52%; min-width: 205px; transform: translateY(-50%) scale(.7); opacity: 0; color: var(--lime); font: 900 clamp(23px, 2.4vw, 40px)/1.1 var(--display); letter-spacing: .04em; text-align: center; -webkit-text-stroke: 2px #100817; paint-order: stroke fill; text-shadow: 0 3px 0 #100817, 0 0 22px var(--lime), 0 0 40px #3ee6ff; pointer-events: none; }
.summon-combo-display.is-visible { opacity: 1; }
.sigil-geometry { fill: none; stroke: #fff0bf; stroke-width: 3; transform-box: view-box; transform-origin: 50% 50%; filter: drop-shadow(0 0 9px #f5c451); }
#sigil-triangle { stroke: #3ee6ff; stroke-width: 2.4; }
#sigil-core { stroke: #ff3ea5; stroke-width: 3; }
.circle-runes { fill: #f5c451; font-size: 22px; filter: drop-shadow(0 0 5px #f5c451); }
.card-stamp { left: auto; right: 16px; top: 35%; transform: rotate(-13deg) scale(2.7); }
.rarity-callout { top: 3.5%; }
.art-caption { bottom: 30px; }
.trial-result-scene .trial-question { top: 15%; width: min(980px, 86vw); min-height: 66px; display: grid; place-items: center; padding: 15px 28px; color: #160d1c; background: linear-gradient(90deg, #f5c451, #fff0c6 18%, #f4e5c4 82%, #b8862b); border: 3px solid #fff1b9; font: 900 clamp(17px, 1.8vw, 25px)/1.25 var(--display); font-style: normal; text-shadow: 0 1px #fff8; }
.trial-result-scene .trial-grid { top: 41%; width: min(1000px, 84vw); gap: 16px; }
.trial-tile { border-color: var(--tile-color); background: linear-gradient(135deg, color-mix(in srgb, var(--tile-color) 82%, white), var(--tile-color) 52%, color-mix(in srgb, var(--tile-color) 70%, #8a557f)); color: #140b19; }
.trial-tile .tile-copy { color: #140b19; font-weight: 800; text-shadow: 0 1px #fff6; }
.trial-tile .tile-rune { width: 72px; height: 72px; color: #140b19; border: 3px solid #140b19; background: #ffffffa8; box-shadow: 0 3px 0 #140b19; font-size: 33px; font-weight: 900; }
.trial-tile .tile-count { color: #140b19; font-size: 26px; text-shadow: 0 1px #fff8; }
.trial-result-scene .trial-tile { min-height: 145px; }
.trial-result-scene .trial-tile.correct { z-index: 3; opacity: 1; background: linear-gradient(135deg, #fff, var(--tile-color) 42%, color-mix(in srgb, var(--tile-color) 70%, white)); box-shadow: 0 0 0 3px #fff, 0 0 35px var(--tile-color), inset 0 0 22px #fff8; }
.trial-result-scene .trial-tile.wrong { opacity: .35; filter: saturate(.55) brightness(.65); }
.trial-result-scene .trial-result-panel { top: auto; bottom: 3%; width: min(1000px, 86vw); }
.trial-result-scene .correct-rain { min-height: 76px; align-items: center; }
.trial-result-scene .podium { gap: 16px; margin-top: 7px; align-items: end; }
.trial-result-scene .podium-user { min-width: 180px; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 12px 15px; border: 2px solid #fff6d4; color: #1a101a; box-shadow: 0 0 22px #f5c45188; }
.trial-result-scene .podium-user.first { min-height: 178px; background: linear-gradient(145deg, #fff4a8, #f5c451 48%, #b57918); }
.trial-result-scene .podium-user.second { min-height: 150px; background: linear-gradient(145deg, #fff, #c9cdd6 48%, #7d8494); border-color: #fff; }
.trial-result-scene .podium-user.third { min-height: 132px; background: linear-gradient(145deg, #ffe0c1, #c27c43 50%, #7a3f27); border-color: #ffdab5; }
.trial-result-scene .podium-user .avatar-orb { width: 52px; height: 52px; --rarity-color: #fff1b8; }
.trial-result-scene .podium-user strong { font-size: 13px; }
.trial-result-scene .podium-user small { margin-top: 1px; font-size: 10px; }
.trial-result-scene .podium-user .crown { margin: -14px 0 -4px; font-size: 27px; }
.trial-result-scene .podium-rest { margin-top: 8px; font-size: 11px; }
.achievement-sheen { animation-delay: .18s; animation-duration: 1.3s; }

@media (max-width: 1000px) {
  .summon-combo-display { left: auto; right: 3%; top: 52%; min-width: 120px; font-size: 20px; }
  .trial-result-scene .trial-grid { top: 41%; width: 92vw; gap: 8px; }
  .trial-result-scene .trial-tile { min-height: 115px; padding: 10px; gap: 8px; }
  .trial-result-scene .trial-tile .tile-rune { width: 50px; height: 50px; font-size: 24px; }
  .trial-result-scene .trial-result-panel { width: 96vw; }
  .trial-result-scene .podium-user { min-width: 0; width: 29vw; padding: 8px; }
}

/* LORE broadcast readability system */
:root {
  --ink: #0e0a1c;
  --surface: rgba(14, 10, 28, .94);
  --surface-raised: #19142a;
  --text-primary: #f7f3ff;
  --text-muted: #b9b0d6;
  --gold: #f5c451;
  --purple: #9146ff;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --radius-card: 16px;
  --radius-display: 24px;
  --shadow-panel: 0 16px 48px rgba(0, 0, 0, .42);
  --duration-fast: 200ms;
  --duration-ui: 300ms;
  --duration-scene: 400ms;
  --font-body: 'Inter', Arial, sans-serif;
  --font-display: 'Cinzel', Georgia, serif;
}

#overlay *, #overlay *::before, #overlay *::after {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

#overlay {
  color: var(--text-primary);
  background: transparent;
}

#scene-layer { z-index: 5; }
#particle-canvas { z-index: 1; mix-blend-mode: screen; }
#ray-field { opacity: 0; }
#vignette { opacity: 0; background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, .3) 100%); }

.scene {
  padding: 64px;
  background: rgba(14, 10, 28, .2);
}

.scene-title, .trial-banner, .impact-callout, .rarity-callout, .archive-title, .fizzle-title {
  z-index: 4;
  max-width: calc(100vw - 128px);
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--gold);
  font-family: var(--font-display) !important;
  font-size: 42px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .04em;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
  white-space: normal;
}

.scene-title { top: 64px; }
.summon-title { top: 64px; }
.vote-heading { top: 64px; }
.scene-subtitle, .summon-subtitle, .decipher-caption, .vote-question {
  max-width: min(1000px, calc(100vw - 128px));
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

.summon-subtitle { top: 15%; }
.summon-avatar-slot { filter: none; }
.summon-avatar-slot > span:not(.avatar-orb) {
  max-width: 220px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
}

.pressure-copy { padding: 24px; }
#pressure {
  left: 64px;
  bottom: 64px;
  width: 188px;
  height: 188px;
  filter: none;
}
.pressure-bubble {
  max-width: 148px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: none;
}
.pressure-copy small { color: var(--text-muted); font-size: 16px; font-weight: 600; }
#corner-chip {
  top: 64px;
  right: 64px;
  max-width: 360px;
  min-height: 72px;
  padding: 16px 24px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: var(--shadow-panel);
}
#corner-chip .chip-sigil { font-size: 28px; }
#sound-enable {
  padding: 16px 24px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 700;
}

.tome-page { background: #f4ead3; color: #20182c; }
.tome-page.left, .tome-page.right { border: 1px solid rgba(255, 255, 255, .12); }
.tome-runes { font-family: var(--font-body) !important; color: #5e3a91; text-shadow: none; }
.archive-copy { max-width: 34ch; margin: auto; padding: 24px; border-radius: 12px; background: #f4ead3; color: #21172c; font-size: 26px; line-height: 1.35; }
.decipher-caption { bottom: 64px; left: 50%; transform: translateX(-50%); }

.vote-question {
  top: 17%;
  left: 50%;
  width: auto;
  transform: translateX(-50%);
  color: var(--text-primary);
}
.scroll-row {
  top: 54%;
  width: min(1600px, calc(100vw - 128px));
  gap: 24px;
}
.vote-scroll {
  min-width: 0;
  height: 500px;
  padding: 32px 28px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-display);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-panel);
  transform-origin: center;
}
.vote-scroll::before, .vote-scroll::after { display: none; }
.vote-scroll.leading {
  border-color: var(--gold);
  background: #211833;
  filter: none;
  animation: none;
}
.vote-number {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: #0e0a1c;
  color: var(--gold);
  font-size: 48px;
  font-weight: 800;
  text-shadow: none;
}
.vote-title {
  min-height: 140px;
  padding: 20px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: #0e0a1c;
  color: var(--text-primary);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.25;
  text-shadow: none;
}
.vote-count { margin: 16px 0 0; color: var(--text-muted); font-size: 20px; font-weight: 600; }
.vote-percent { margin-top: 10px; color: var(--gold); font-size: 44px; font-weight: 800; line-height: 1; }
.vote-bar-track { bottom: 32px; height: 16px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 99px; background: #070611; }
.vote-bar-fill { background: var(--gold); box-shadow: none; }
.vote-bar-fill::after { display: none; }
.countdown { bottom: 32px; width: 96px; height: 96px; }
.countdown text { fill: var(--text-primary); font-size: 20px; font-weight: 800; }

.canon-scene::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  pointer-events: none;
}
.card-rays { z-index: 1; opacity: .22; }
.card-wrap { z-index: 5; width: min(560px, 76vw); height: min(820px, 86vh); }
.lore-card {
  padding: 20px 24px 18px;
  border-radius: var(--radius-display);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 0 0 5px #0e0a1c, 0 0 28px color-mix(in srgb, var(--rarity-color) 48%, transparent);
}
.card-meta {
  min-height: 38px;
  align-items: center;
  padding: 4px 0 8px;
  color: var(--text-primary);
  font-family: var(--font-body) !important;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .04em;
}
.rarity-pill {
  position: absolute;
  z-index: 8;
  top: 16px;
  left: 18px;
  padding: 8px 12px;
  border: 1px solid var(--rarity-color);
  border-radius: 99px;
  background: #0e0a1c;
  color: var(--rarity-color);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .08em;
}
.card-art {
  position: relative;
  flex: 0 0 42%;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 42%, #44245e, #181126 72%);
}
.card-art .nebula { pointer-events: none; }
.art-caption {
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
}
.card-ribbon {
  z-index: 6;
  min-height: 104px;
  display: grid;
  place-items: center;
  margin: 0 -12px;
  padding: 12px 18px;
  transform: none;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: #0e0a1c;
}
.card-ribbon h1 {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-family: var(--font-display) !important;
  font-size: clamp(42px, 3.4vw, 66px);
  font-weight: 900;
  line-height: 1.12;
  text-align: center;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.card-copy {
  flex: 1;
  min-height: 0;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
}
.card-story {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-body) !important;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.35;
  max-width: 60ch;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.card-explainer {
  display: -webkit-box;
  overflow: hidden;
  max-width: 60ch;
  color: var(--text-muted);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.card-witness-title { margin: 12px 0 8px; color: var(--text-primary); font-size: 20px; font-weight: 700; letter-spacing: .08em; }
.card-witnesses { min-height: 60px; gap: 8px; }
.card-witness { opacity: 0; }
.card-witness .avatar-orb { width: 48px; height: 48px; }
.card-witness-overflow {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: #29213a;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 800;
}
.card-foil { z-index: 0; clip-path: inset(80px 0 58% 0 round 20px); opacity: .16; }
.card-footer { padding-top: 8px; color: var(--text-muted); font-size: 16px; }
.card-stamp { background: #0e0a1c; font-family: var(--font-body) !important; font-size: 24px; font-weight: 800; text-shadow: none; }
.impact-callout {
  z-index: 18;
  max-width: calc(100vw - 128px);
  padding: 24px 40px;
  border: 2px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-display);
  background: var(--surface);
  color: var(--callout-color, var(--gold));
  font-family: var(--font-display) !important;
  font-size: clamp(90px, 6.5vw, 128px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
  -webkit-text-stroke: 0;
  filter: none;
}
.rarity-callout { top: 64px; font-size: 38px; }

.achievement-pill {
  left: 50%;
  right: auto;
  bottom: 64px;
  width: min(1200px, calc(100vw - 128px));
  min-height: 144px;
  gap: 24px;
  padding: 24px 32px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 8px solid var(--gold);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}
.achievement-copy { gap: 8px; max-width: 60ch; }
.achievement-copy b { color: var(--gold); font-size: 20px; font-weight: 800; letter-spacing: .08em; }
.achievement-copy strong { color: var(--text-primary); font-size: 26px; font-weight: 700; line-height: 1.35; }
.achievement-copy small { color: var(--gold); font-size: 20px; font-weight: 800; }
.achievement-sheen { display: none; }

.trial-scene::before { display: none; }
.trial-result-scene::before {
  inset: 0;
  opacity: .25;
  background: repeating-conic-gradient(from 0deg at 50% 35%, #fff2 0deg 4deg, transparent 4deg 22deg);
}
.trial-banner {
  top: 64px;
  padding: 14px 24px;
  transform: translate(-50%, -140px);
  border-color: var(--gold);
  border-radius: var(--radius-card);
  background: var(--surface);
  font-size: 40px;
  letter-spacing: .04em;
}
.trial-question, .trial-result-scene .trial-question {
  z-index: 3;
  top: 18%;
  width: min(1200px, calc(100vw - 128px));
  min-height: 104px;
  display: grid;
  place-items: center;
  padding: 24px 32px;
  transform: translateX(-50%) scale(.8);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
.trial-grid { width: min(1240px, calc(100vw - 128px)); gap: 24px; }
.trial-result-scene .trial-grid { top: 39%; width: min(1240px, calc(100vw - 128px)); }
.trial-tile {
  min-height: 168px;
  gap: 24px;
  padding: 24px 28px;
  transform: rotateX(10deg) scale(.92);
  border: 1px solid var(--tile-color);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-panel);
}
.trial-tile .tile-rune {
  width: 72px;
  height: 72px;
  border: 2px solid var(--tile-color);
  border-radius: 12px;
  background: #0e0a1c;
  color: var(--tile-color);
  font-family: var(--font-body) !important;
  font-size: 32px;
  font-weight: 800;
  box-shadow: none;
}
.trial-tile .tile-copy { flex: 1; color: var(--text-primary); font-size: 30px; font-weight: 700; line-height: 1.35; }
.trial-tile .tile-count { color: var(--text-muted); font-size: 26px; font-weight: 800; }
.trial-tile.correct, .trial-result-scene .trial-tile.correct { background: #f5c451; color: #0e0a1c; }
.trial-tile.correct .tile-copy, .trial-tile.correct .tile-count { color: #0e0a1c; }
.trial-result-scene .trial-tile.wrong { opacity: .4; filter: saturate(.6); }
.trial-result-panel:before { padding: 10px 20px; border-radius: 99px; background: #f5c451; font-family: var(--font-body) !important; font-size: 20px; font-weight: 800; box-shadow: none; }
.trial-result-scene .trial-result-panel { bottom: 32px; }
.trial-result-scene .podium { gap: 24px; }
.trial-result-scene .podium-user { min-width: 220px; border-radius: 16px 16px 8px 8px; }
.trial-result-scene .podium-user strong { font-size: 22px; font-weight: 700; }
.trial-result-scene .podium-user small, .trial-result-scene .podium-rest { font-size: 18px; font-weight: 600; }

.trial-result-scene .trial-question { top: 14%; }
.trial-result-scene .trial-grid { top: 39%; }
.countdown { bottom: 32px; }

@media (max-width: 1000px) {
  .scene { padding: 32px; }
  .scene-title, .summon-title, .vote-heading, .trial-banner { top: 32px; max-width: calc(100vw - 64px); font-size: clamp(24px, 4vw, 36px); }
  .summon-subtitle, .vote-question, .trial-question, .trial-result-scene .trial-question { max-width: calc(100vw - 64px); width: min(820px, calc(100vw - 64px)); font-size: clamp(20px, 2.6vw, 28px); }
  .scroll-row, .trial-grid, .trial-result-scene .trial-grid { width: calc(100vw - 64px); gap: 12px; }
  .vote-scroll { height: 420px; padding: 24px 16px; }
  .vote-title { font-size: clamp(22px, 3vw, 30px); }
  .trial-tile { min-height: 128px; padding: 16px; gap: 12px; }
  .trial-tile .tile-copy { font-size: clamp(21px, 2.5vw, 28px); }
  .card-story { font-size: clamp(20px, 2.5vw, 26px); }
  .achievement-pill { bottom: 32px; width: calc(100vw - 64px); }
  #pressure { left: 32px; bottom: 32px; }
  #corner-chip { top: 32px; right: 32px; }
}

@media (max-width: 700px) {
  .scene { padding: 24px; }
  .scene-title, .summon-title, .vote-heading, .trial-banner { top: 24px; max-width: calc(100vw - 48px); padding: 10px 14px; font-size: clamp(22px, 5vw, 30px); letter-spacing: .02em; }
  .summon-subtitle, .vote-question, .trial-question, .trial-result-scene .trial-question { max-width: calc(100vw - 48px); width: calc(100vw - 48px); padding: 12px; font-size: 18px; }
  .summon-subtitle { top: 13%; }
  .scroll-row { top: 55%; width: calc(100vw - 48px); gap: 8px; }
  .vote-scroll { height: min(390px, 50vh); padding: 18px 10px; border-radius: 16px; }
  .vote-number { width: 52px; height: 52px; margin-bottom: 14px; font-size: 30px; }
  .vote-title { min-height: 100px; padding: 10px 6px; font-size: clamp(16px, 3.5vw, 22px); }
  .vote-count { font-size: 15px; }
  .vote-percent { font-size: 30px; }
  .vote-bar-track { bottom: 18px; }
  .card-wrap { width: min(520px, calc(100vw - 48px)); height: min(760px, 82vh); }
  .lore-card { padding: 14px; }
  .card-ribbon h1 { font-size: clamp(30px, 7vw, 44px); }
  .card-story { font-size: 18px; }
  .card-explainer { font-size: 16px; }
  .card-meta { font-size: 14px; }
  .card-witness-title { font-size: 16px; }
  .card-witness .avatar-orb, .card-witness-overflow { width: 36px; height: 36px; }
  .impact-callout { max-width: calc(100vw - 48px); padding: 16px 20px; font-size: clamp(42px, 10vw, 72px); white-space: normal; }
  .achievement-pill { bottom: 24px; width: calc(100vw - 48px); min-height: 110px; padding: 16px; border-radius: 16px; }
  .achievement-icon .avatar-orb { width: 52px; height: 52px; }
  .achievement-copy b, .achievement-copy small { font-size: 14px; }
  .achievement-copy strong { font-size: 17px; }
  #pressure { left: 24px; bottom: 24px; width: 150px; height: 150px; }
  #corner-chip { top: 24px; right: 24px; max-width: 220px; min-height: 54px; padding: 10px 14px; font-size: 16px; }
  .trial-question, .trial-result-scene .trial-question { top: 16%; min-height: 72px; }
  .trial-grid, .trial-result-scene .trial-grid { width: calc(100vw - 48px); gap: 8px; }
  .trial-tile { min-height: 108px; padding: 10px; gap: 8px; }
  .trial-tile .tile-rune { width: 42px; height: 42px; font-size: 22px; }
  .trial-tile .tile-copy { font-size: 16px; }
  .trial-tile .tile-count { font-size: 16px; }
  .trial-result-scene .trial-result-panel { bottom: 16px; }
  .trial-result-scene .podium { gap: 8px; }
  .trial-result-scene .podium-user { min-height: 96px; width: 29vw; min-width: 0; padding: 8px; }
  .trial-result-scene .podium-user strong { font-size: 14px; }
  .trial-result-scene .podium-user small, .trial-result-scene .podium-rest { font-size: 12px; }
}


/* LORE readability finish */
:root { --font-body: 'Inter', Arial, sans-serif; --font-display: 'Cinzel', Georgia, serif; --duration-fast: 200ms; --duration-ui: 300ms; --duration-scene: 400ms; }
#overlay *, #overlay *::before, #overlay *::after { font-family: var(--font-body) !important; font-style: normal !important; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
#overlay .scene-title, #overlay .trial-banner, #overlay .impact-callout, #overlay .card-ribbon h1 { font-family: var(--font-display) !important; }
#ray-field { opacity: 0; }
#vignette { opacity: 0; background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.3) 100%); }
.trial-scene::before { display: none; }
.trial-result-scene::before { opacity: .25; }
.scene-title, .summon-title, .vote-heading, .trial-banner { width: min(1000px, calc(100vw - 512px)); }
.countdown { border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(14,10,28,.96); box-shadow: var(--shadow-panel); }
.impact-callout { padding: 24px 40px; border: 2px solid rgba(255,255,255,.16); border-radius: 24px; background: rgba(14,10,28,.96); color: var(--gold); font-size: clamp(120px,6.5vw,140px); line-height: 1.05; -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0; filter: none; }
.card-rays { opacity: .22; }
.card-foil { z-index: 0; opacity: .12; clip-path: inset(0 0 58% 0 round 20px); }
.card-ribbon, .card-copy, .card-witness-title, .card-witnesses, .card-footer { position: relative; z-index: 2; }
.card-ribbon { background: #0e0a1c; }
.card-ribbon h1 { max-width: 100%; color: var(--text-primary); font-size: clamp(56px,3.4vw,72px); line-height: 1.12; }
.card-story { font: 500 26px/1.35 var(--font-body); }
.card-explainer { font: 500 20px/1.35 var(--font-body); }
.summon-avatar-slot { z-index: 4; filter: none; gap: 8px; }
.summon-avatar-slot > span:not(.avatar-orb) { max-width: 220px; overflow: hidden; padding: 8px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(14,10,28,.96); color: var(--text-primary); font: 700 20px/1.25 var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.summon-plus, .summon-combo, .summon-combo-display { color: var(--gold); font-family: var(--font-body); text-shadow: 0 2px 8px rgba(0,0,0,.6); -webkit-text-stroke: 0; }
.summon-plus, .summon-combo, .summon-combo-display { padding: 8px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(14,10,28,.96); }
.summon-subtitle, .decipher-caption, .vote-question, .scene-subtitle { border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(14,10,28,.96); color: var(--text-primary); font: 700 20px/1.35 var(--font-body); }
.trial-result-scene .trial-question { width: min(1200px,calc(100vw - 128px)); min-height: 104px; padding: 24px 32px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(14,10,28,.96); color: var(--text-primary); font: 700 34px/1.35 var(--font-body); }
.trial-result-scene .trial-tile.correct { border-color: var(--gold); background: #f5c451; color: #0e0a1c; box-shadow: var(--shadow-panel); }
.trial-result-scene .trial-tile.correct .tile-copy, .trial-result-scene .trial-tile.correct .tile-count { color: #0e0a1c; }
.trial-tile { border-color: var(--tile-color); background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-panel); }
.trial-tile .tile-copy, .trial-tile .tile-count { color: var(--text-primary); text-shadow: none; }
.trial-tile .tile-rune { border: 2px solid var(--tile-color); background: #0e0a1c; color: var(--tile-color); box-shadow: none; }
.trial-tile[data-tile="0"], .trial-tile[data-result-tile="0"] { --tile-color: var(--gold); }
.trial-tile[data-tile="1"], .trial-tile[data-result-tile="1"] { --tile-color: var(--purple); }
.trial-tile[data-tile="2"], .trial-tile[data-result-tile="2"] { --tile-color: var(--text-muted); }
.trial-tile[data-tile="3"], .trial-tile[data-result-tile="3"] { --tile-color: var(--gold); }
.correct-rain .avatar-orb { --rarity-color: var(--gold); }
.trial-result-scene .trial-result-panel { padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(14,10,28,.96); }
.trial-result-panel::before { border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: var(--gold); color: var(--ink); font: 800 20px/1.2 var(--font-body); box-shadow: none; }
.trial-result-scene .podium-user, .trial-result-scene .podium-user.first, .trial-result-scene .podium-user.second, .trial-result-scene .podium-user.third { border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: #19142a; color: var(--text-primary); box-shadow: none; }
.trial-result-scene .podium-user.first { border-color: var(--gold); }
.trial-result-scene .podium-user strong { font: 700 22px/1.25 var(--font-body); }
.trial-result-scene .podium-user small, .trial-result-scene .podium-rest { color: var(--text-muted); font: 600 18px/1.35 var(--font-body); }
.trial-result-scene .podium-rest span { display: inline-block; margin: 4px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #19142a; color: var(--text-primary); }
.card-footer { flex-wrap: wrap; gap: 8px; }
.pressure-copy small { color: var(--text-muted); font: 600 16px/1.35 var(--font-body); }
.pressure-copy small { display: block; margin-top: 8px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(14,10,28,.96); }
.card-back b, .card-back small { padding: 10px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(14,10,28,.96); color: var(--text-primary); font: 700 20px/1.35 var(--font-body); letter-spacing: .08em; }
.summon-combo-display { border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(14,10,28,.96); font-size: clamp(22px,2.2vw,34px); }
#sigil-triangle, #sigil-core { stroke: var(--purple); }
.pressure-copy small, .rarity-pill, .art-caption, .card-footer { font-size: 20px; }
.achievement-copy strong { font: 700 26px/1.35 var(--font-body); }
@media (max-width: 1000px) { .scene-title, .summon-title, .vote-heading, .trial-banner { width: calc(100vw - 64px); } .impact-callout { font-size: clamp(72px,8vw,110px); } .trial-result-scene .trial-question { width: calc(100vw - 64px); font-size: 28px; } .card-ribbon h1 { font-size: clamp(42px,5vw,56px); } }
@media (max-width: 700px) { .scene-title, .summon-title, .vote-heading, .trial-banner { width: calc(100vw - 48px); } .impact-callout { max-width: calc(100vw - 48px); padding: 16px 20px; font-size: clamp(42px,10vw,72px); } .trial-result-scene .trial-question { width: calc(100vw - 48px); min-height: 72px; padding: 12px; font-size: 18px; } .summon-avatar-slot > span:not(.avatar-orb) { max-width: 136px; font-size: 16px; } .card-ribbon h1 { font-size: clamp(30px,7vw,44px); } .card-story { font-size: 18px; } .card-explainer { font-size: 16px; } }

/* LORE broadcast layout zones */
#stage-preview { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
#stage-preview[hidden] { display: none; }
#scene-layer, .scene, .canon-scene { background: transparent; }
.scene-backwash, .summon-pillar { display: none; }
.trial-result-scene::before { display: none; }
#ray-field { z-index: 0; opacity: 0; }
#particle-canvas { z-index: 1; }
#scene-layer { z-index: 5; }
#pressure { z-index: 8; left: 64px; bottom: 276px; width: 144px; height: 144px; }
#corner-chip { z-index: 9; top: 40px; right: 64px; max-width: 400px; padding: 12px 18px; border-radius: 16px; background: rgba(14,10,28,.96); box-shadow: var(--shadow-panel); font: 700 20px/1.25 var(--font-body); letter-spacing: .02em; }
#corner-chip { min-width: 300px; }
#corner-chip .chip-sigil { font-size: 24px; }
.fizzle-scene .fizzle-title { top: 160px; left: auto; right: 64px; width: 416px; padding: 20px; transform: none; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: rgba(14,10,28,.96); color: var(--text-primary); font: 800 28px/1.25 var(--font-body); text-align: center; }
.fizzle-scene #fizzle-circle { top: 410px; left: auto; right: 122px; width: 300px; height: 300px; margin: 0; transform: none; }
.fizzle-scene .scene-subtitle { display: block; margin-top: 10px; padding: 8px; }
.canon-scene::before { background: rgba(5,3,12,.45); }
#vignette { z-index: 2; }
.summon-scene, .decipher-scene, .trial-scene, .trial-result-scene { background: transparent; }
.broadcast-panel { position: absolute; top: 120px; right: 64px; width: 416px; height: min(780px,calc(100vh - 240px)); overflow: hidden; padding: 24px; border: 1px solid rgba(255,255,255,.12); border-top: 6px solid var(--gold); border-radius: 24px; background: rgba(14,10,28,.96); box-shadow: var(--shadow-panel); }
.panel-heading { position: relative; z-index: 4; margin: 0; color: var(--text-primary); font: 800 40px/1.15 var(--font-display); text-align: center; }
.summon-panel .summon-title { position: relative; top: auto; left: auto; width: auto; transform: none; }
#overlay .panel-heading { font-family: var(--font-display) !important; }
.summon-panel .summoning-circle { position: absolute; left: 50%; top: 40%; width: 300px; height: 300px; margin: 0; transform: translate(-50%,-50%); filter: none; }
.summoning-circle svg { display: block; width: 100%; height: 100%; overflow: visible; }
.summoning-circle .circle-line { fill: none; stroke: rgba(245,196,81,.62); stroke-width: 2; }
.summoning-circle .circle-line.dim { stroke: rgba(185,176,214,.3); }
.circle-runes { fill: var(--gold); font: 700 22px var(--font-body); }
.sigil-geometry { stroke: var(--purple); stroke-width: 3; }
#sigil-triangle, #sigil-core { stroke: var(--gold); }
#summon-slots { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.summon-avatar-slot { position: absolute; width: 128px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%,-50%); opacity: 0; filter: none; }
.summon-avatar-slot .avatar-orb { width: 64px; height: 64px; border: 2px solid var(--gold); box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.summon-avatar-slot > span:not(.avatar-orb) { max-width: 128px; padding: 4px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(14,10,28,.96); color: var(--text-primary); font: 600 16px/1.2 var(--font-body); text-align: center; }
.summon-plus { display: none; }
.summon-counter-row { position: absolute; top: 72%; left: 24px; right: 24px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.summon-witness-counter { color: var(--text-primary); font: 800 44px/1.1 var(--font-body); text-align: center; white-space: nowrap; }
.summon-combo-display { position: static; min-width: 56px; padding: 8px 12px; transform: none; opacity: 0; border: 1px solid rgba(245,196,81,.5); border-radius: 12px; background: #211833; color: var(--gold); font: 800 24px/1 var(--font-body); text-align: center; }
.summon-combo-display.is-visible { opacity: 1; }
.summon-countdown-track, .trial-countdown-track { position: absolute; left: 24px; right: 24px; bottom: 82px; height: 8px; overflow: hidden; border-radius: 99px; background: #312744; }
.summon-countdown-track { bottom: 96px; }
.summon-countdown-track span, .trial-countdown-track span { display: block; width: 100%; height: 100%; transform-origin: left center; border-radius: inherit; background: var(--gold); }
.summon-instruction { position: absolute; left: 24px; right: 24px; bottom: 26px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #19142a; color: var(--text-primary); font: 700 28px/1.25 var(--font-body); text-align: center; }
.summon-panel.threshold-flash { animation: summonPanelFlash .5s ease-out; }
@keyframes summonPanelFlash { 0%,100% { border-top-color: var(--gold); box-shadow: var(--shadow-panel); } 35% { border-color: var(--gold); box-shadow: 0 0 42px rgba(245,196,81,.55); } }
.decipher-panel { height: 500px; }
.decipher-panel .panel-heading { margin-bottom: 24px; font-size: 32px; }
.decipher-runes { min-height: 270px; overflow: hidden; padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: #19142a; color: #d5c7f2; font: 600 16px/1.55 var(--font-body); letter-spacing: .12em; overflow-wrap: anywhere; }
.decipher-progress { position: relative; height: 10px; margin-top: 24px; overflow: hidden; border-radius: 99px; background: #312744; }
.decipher-progress span { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--purple), var(--gold)); }
.decipher-progress span::after { position: absolute; inset: 0; content: ''; background: linear-gradient(90deg, transparent, #fff, transparent); animation: decipherShimmer .9s linear infinite; }
@keyframes decipherShimmer { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
.vote-lower-third { position: absolute; left: 64px; right: 64px; bottom: 64px; height: 196px; display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 24px; padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: rgba(14,10,28,.96); box-shadow: var(--shadow-panel); }
.vote-label-block { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px; border-right: 1px solid rgba(255,255,255,.12); color: var(--text-primary); text-align: center; }
.vote-label-block strong { font: 800 20px/1.25 var(--font-body); letter-spacing: .08em; }
.vote-label-block > span { color: var(--text-muted); font: 600 18px/1.25 var(--font-body); }
.vote-label-block .countdown { position: relative; left: auto; bottom: auto; width: 76px; height: 76px; transform: none; border: 0; background: transparent; box-shadow: none; }
.vote-label-block .countdown circle { fill: none; }
.vote-label-block .countdown-progress { stroke: var(--gold); }
.vote-options { min-width: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; align-items: stretch; }
.vote-scroll { position: relative; min-width: 0; height: 164px; display: grid; grid-template-columns: 64px minmax(0,1fr) auto; grid-template-rows: minmax(0,1fr) auto; align-items: center; column-gap: 14px; row-gap: 4px; padding: 14px 18px 20px; overflow: visible; transform: none; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: #19142a; color: var(--text-primary); box-shadow: none; transition: transform .3s cubic-bezier(.215,.61,.355,1), border-color .3s cubic-bezier(.215,.61,.355,1), box-shadow .3s cubic-bezier(.215,.61,.355,1); }
.vote-scroll::before, .vote-scroll::after { display: none; }
.vote-scroll.leading { transform: translateY(-8px); border-color: var(--gold); background: #211833; box-shadow: 0 0 24px rgba(245,196,81,.24); }
.vote-number { grid-row: 1 / span 2; width: 64px; height: 64px; display: grid; place-items: center; margin: 0; border: 2px solid var(--gold); border-radius: 50%; background: #0e0a1c; color: var(--gold); font: 800 36px/1 var(--font-body); text-shadow: none; }
.vote-title { min-height: 0; max-height: 78px; display: -webkit-box; overflow: hidden; place-items: initial; color: var(--text-primary); font: 800 30px/1.2 var(--font-body); text-align: left; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-shadow: none; }
.vote-count { grid-column: 2; margin: 0; color: var(--text-muted); font: 600 16px/1.2 var(--font-body); text-align: left; }
.vote-percent { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin: 0; color: var(--gold); font: 800 40px/1 var(--font-body); text-align: right; }
.vote-bar-track { left: 16px; right: 16px; bottom: 8px; height: 8px; border: 0; background: #090714; }
.vote-bar-fill { background: var(--gold); box-shadow: none; }
.vote-bar-fill::after { display: none; }
.vote-leader-badge:not([hidden]) { position: absolute; top: -14px; right: 16px; z-index: 2; padding: 6px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: var(--gold); color: var(--ink); font: 800 14px/1.1 var(--font-body); letter-spacing: .04em; }
.achievement-pill { left: 50%; right: auto; bottom: 64px; width: min(1493px,calc((100vw - 128px)/1.2)); min-height: 164px; transform-origin: center bottom; padding: 24px 32px; border: 1px solid rgba(255,255,255,.12); border-left: 8px solid var(--gold); border-radius: 24px; background: rgba(14,10,28,.96); box-shadow: var(--shadow-panel); }
.trial-panel { padding: 20px 24px 24px; }
.trial-panel .panel-heading { margin-bottom: 18px; font-size: 32px; }
.trial-question, .trial-result-scene .trial-question { position: absolute; top: 78px; left: 24px; width: calc(100% - 48px); min-height: 82px; display: grid; place-items: center; padding: 12px 16px; transform: none; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: #19142a; color: var(--text-primary); font: 700 28px/1.25 var(--font-body); text-align: center; }
.trial-grid, .trial-result-scene .trial-grid { position: absolute; top: 184px; left: 24px; width: calc(100% - 48px); display: grid; grid-template-columns: 1fr; gap: 10px; transform: none; }
.trial-tile { position: relative; min-height: 92px; display: grid; grid-template-columns: 56px minmax(0,1fr) 36px; grid-template-rows: 1fr; align-items: center; gap: 12px; padding: 12px 14px; overflow: hidden; transform: none; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: #19142a; color: var(--text-primary); box-shadow: none; }
.trial-tile[data-tile="0"], .trial-tile[data-result-tile="0"] { --tile-color: #ff3ea5; }
.trial-tile[data-tile="1"], .trial-tile[data-result-tile="1"] { --tile-color: #3ee6ff; }
.trial-tile[data-tile="2"], .trial-tile[data-result-tile="2"] { --tile-color: #b6ff3e; }
.trial-tile[data-tile="3"], .trial-tile[data-result-tile="3"] { --tile-color: #f5c451; }
.trial-tile .tile-rune { position: relative; z-index: 2; width: 56px; height: 56px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--tile-color); color: #0e0a1c; font: 800 26px/1 var(--font-body); box-shadow: none; }
.trial-tile .tile-copy { position: relative; z-index: 2; min-width: 0; color: var(--text-primary); font: 700 26px/1.2 var(--font-body); }
.trial-tile .tile-count { position: relative; z-index: 2; min-width: 36px; color: var(--text-primary); font: 800 22px/1 var(--font-body); text-align: right; }
.tile-bar { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.08); }
.tile-bar > span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: var(--tile-color); }
.trial-countdown-track { bottom: 20px; left: 24px; right: 24px; height: 7px; }
.trial-result-scene .trial-panel .trial-question { top: 76px; }
.trial-result-scene .trial-grid { top: 174px; gap: 8px; }
.trial-result-scene .trial-tile { min-height: 62px; grid-template-columns: 42px minmax(0,1fr) 32px; padding: 8px 10px; }
.trial-result-scene .trial-tile .tile-rune { width: 42px; height: 42px; font-size: 22px; }
.trial-result-scene .trial-tile .tile-copy { font-size: 20px; }
.trial-result-scene .trial-tile .tile-count { font-size: 18px; }
.trial-result-scene .trial-tile.correct { transform: scale(1.06); transform-origin: center; border-color: var(--gold); background: #f5c451; color: var(--ink); box-shadow: 0 0 24px rgba(245,196,81,.25); }
.trial-result-scene .trial-tile.correct .tile-copy, .trial-result-scene .trial-tile.correct .tile-count { color: var(--ink); }
.trial-result-scene .trial-tile.wrong { opacity: .38; filter: none; }
.trial-result-scene .trial-result-panel { position: absolute; top: auto; left: 24px; right: 24px; bottom: 18px; width: auto; min-height: 140px; display: block; padding: 26px 12px 10px; transform: none; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: #19142a; }
.trial-result-panel::before { position: absolute; top: -13px; left: 16px; content: 'TOP LOREMASTERS'; margin: 0; padding: 5px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: var(--gold); color: var(--ink); font: 800 14px/1.1 var(--font-body); letter-spacing: .06em; box-shadow: none; }
.trial-result-scene .podium { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 8px; margin: 0; }
.trial-result-scene .podium-user, .trial-result-scene .podium-user.first, .trial-result-scene .podium-user.second, .trial-result-scene .podium-user.third { min-width: 0; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; order: initial; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #0e0a1c; color: var(--text-primary); box-shadow: none; }
.trial-result-scene .podium-user .podium-avatar { width: 36px; height: 36px; }
.trial-result-scene .podium-user .crown { display: none; }
.trial-result-scene .podium-user strong { max-width: 100%; overflow: hidden; color: var(--text-primary); font: 700 16px/1.15 var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.trial-result-scene .podium-user small { margin: 0; color: var(--text-muted); font: 600 14px/1.1 var(--font-body); }
.trial-result-scene .podium-rest { justify-content: center; gap: 4px; margin-top: 6px; color: var(--text-muted); font: 600 14px/1.2 var(--font-body); }
.trial-result-scene .podium-rest span { margin: 0 3px; padding: 4px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: #0e0a1c; color: var(--text-primary); }
.trial-banner { display: none; }
.canon-scene::before { background: rgba(5,3,12,.45); }
.card-ribbon h1 { font-size: 44px; }
.card-story { font-size: 24px; }
.rarity-callout { font-size: 40px; }
.impact-callout { max-width: calc(100vw - 128px); font-size: clamp(72px,6.5vw,124px); }
@media (max-width: 1100px) {
  #pressure { bottom: 250px; }
  .broadcast-panel { top: 80px; right: 32px; width: min(416px,calc(100vw - 64px)); height: calc(100vh - 160px); }
  .summon-counter-row { top: 70%; }
  .vote-lower-third { left: 32px; right: 32px; bottom: 32px; grid-template-columns: 180px minmax(0,1fr); gap: 12px; }
  .vote-options { gap: 8px; }
  .vote-scroll { grid-template-columns: 48px minmax(0,1fr) auto; column-gap: 8px; padding: 12px 10px 18px; }
  .vote-number { width: 48px; height: 48px; font-size: 28px; }
  .vote-title { font-size: 22px; }
  .vote-percent { font-size: 30px; }
  .trial-tile .tile-copy { font-size: 20px; }
  .trial-result-scene .trial-tile .tile-copy { font-size: 17px; }
}
@media (max-width: 700px) {
  #pressure { left: 24px; bottom: 224px; width: 112px; height: 112px; }
  #corner-chip { top: 20px; right: 20px; max-width: 240px; font-size: 16px; }
  .broadcast-panel { top: 64px; right: 16px; width: min(416px,calc(100vw - 32px)); height: calc(100vh - 128px); padding: 18px; }
  .panel-heading { font-size: 30px; }
  .summon-panel .summoning-circle { width: 250px; height: 250px; }
  .summon-counter-row { top: 70%; left: 12px; right: 12px; }
  .summon-witness-counter { font-size: 32px; }
  .summon-instruction { left: 18px; right: 18px; font-size: 20px; }
  .vote-lower-third { left: 16px; right: 16px; bottom: 16px; height: auto; min-height: 300px; grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .vote-label-block { display: grid; grid-template-columns: 1fr auto; justify-items: start; text-align: left; border-right: 0; }
  .vote-label-block .countdown { grid-column: 2; grid-row: 1 / span 2; width: 56px; height: 56px; }
  .vote-options { grid-template-columns: 1fr; gap: 6px; }
  .vote-scroll { height: 68px; min-height: 68px; grid-template-columns: 44px minmax(0,1fr) auto; grid-template-rows: 1fr; padding: 8px 12px 12px; }
  .vote-number { grid-row: 1; width: 44px; height: 44px; font-size: 24px; }
  .vote-title { max-height: 48px; font-size: 18px; }
  .vote-count { display: none; }
  .vote-percent { grid-row: 1; font-size: 24px; }
  .vote-leader-badge:not([hidden]) { top: -10px; right: 10px; font-size: 11px; }
  .achievement-pill { width: calc((100vw - 32px)/1.2); min-height: 132px; bottom: 16px; padding: 16px; }
  .achievement-copy strong { font-size: 20px; }
  .trial-question, .trial-result-scene .trial-question { left: 18px; width: calc(100% - 36px); font-size: 20px; }
  .trial-grid, .trial-result-scene .trial-grid { left: 18px; width: calc(100% - 36px); }
  .trial-tile { min-height: 78px; grid-template-columns: 44px minmax(0,1fr) 30px; gap: 8px; padding: 8px; }
  .trial-tile .tile-rune { width: 44px; height: 44px; }
  .trial-result-scene .trial-result-panel { left: 18px; right: 18px; }
  .trial-result-scene .podium-user strong { font-size: 13px; }
  .trial-result-scene .podium-user small { font-size: 11px; }
  .impact-callout { max-width: calc(100vw - 32px); padding: 16px 20px; font-size: clamp(48px,11vw,84px); }
  .card-ribbon h1 { font-size: clamp(32px,7vw,44px); }
  .card-story { font-size: 18px; }
}