/* The button is a stationary hit area; tilt and flip have independent 3D axes. */
:root{--bg:#090b20;--panel:#121632;--gold:#bcaaff;--white:#f2f0ff;--muted:#979cbd}
body{background:radial-gradient(ellipse at 80% 5%,#562a743d,transparent 50%),radial-gradient(ellipse at 15% 35%,#204da233,transparent 55%),#090b20;background-attachment:fixed}
header{background:#0b102780}.brand-icon{color:#bcb1ff;filter:drop-shadow(0 0 15px #9691ff66)}
h1 em{background:linear-gradient(100deg,#95d8ff,#c3a0ff);color:transparent;background-clip:text}
main{max-width:1680px}.game-layout{gap:32px;grid-template-columns:minmax(0,1fr) 280px}
.cards{perspective:none;gap:26px 22px;grid-template-columns:repeat(5,minmax(0,1fr));padding:15px 4px 20px}
.card,.card:not(.opened):not(:disabled):hover,.card.opened{transform:none;filter:none;opacity:1;isolation:auto;perspective:850px;transition:none;transform-style:preserve-3d;touch-action:manipulation;user-select:none}
.card{z-index:0;display:block;aspect-ratio:1/1.48}.card.hovering,.card.revealing{z-index:5}
.card-tilt{width:100%;height:100%;position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s ease;will-change:auto}
.card.hovering .card-tilt{transform:translateZ(24px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:none;will-change:transform}
.card-inner{width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(0);transition:none;border-radius:15px}
.card.opened .card-inner{transform:rotateY(180deg)}
.card.revealing{animation:none}
.face{overflow:visible;transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:15px;border:1px solid #c0b4ff9c;transform:translateZ(1px);background:radial-gradient(ellipse at var(--mx,50%) var(--my,30%),#879bff36,transparent 65%),linear-gradient(145deg,#28396a,#1b1b44 50%,#29204e);box-shadow:inset 0 0 0 3px #10152f,inset 0 0 0 4px #9e9ae34d,inset 0 0 24px #3d5eff18,0 16px 26px #0008;transition:box-shadow .3s}
.face:before{inset:9px;border-color:#b8b2ff55;background:linear-gradient(145deg,#bcbcff12,transparent 40%,#80baff10);box-shadow:0 0 0 3px #aca4ff08;border-radius:8px;transform:translateZ(2px)}
.face:after{border-radius:14px;background:radial-gradient(ellipse at var(--mx,50%) var(--my,30%),#d8e8ff55,transparent 58%),linear-gradient(125deg,transparent 20%,#79cfff0f 38%,#d0a1ff18 50%,transparent 70%);opacity:.25;mix-blend-mode:normal;transform:translateZ(3px);transition:opacity .3s}
.hovering .face:after{opacity:.85}.hovering .back,.hovering .front{box-shadow:inset 0 0 0 3px #10152f,inset 0 0 0 4px #b7b0ff88,0 32px 35px #0009,0 0 30px #7169ff33}
.card-edge{display:none}.face *{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.engraving{background:repeating-linear-gradient(45deg,transparent 0 8px,#b3bbff30 8px 9px,transparent 9px 17px),repeating-linear-gradient(-45deg,transparent 0 8px,#b3bbff20 8px 9px,transparent 9px 17px);opacity:.3}
.sigil{transform:translate(-50%,-50%) translateZ(24px);transform-style:preserve-3d;width:55%;top:45%;background:repeating-conic-gradient(from 0deg,#c9c5ff88 0deg 1deg,transparent 1deg 10deg);border-color:#c8cbff99;box-shadow:0 0 0 4px #202649,0 0 0 5px #999eee88,0 0 0 10px #959aff0b,0 0 0 11px #aba1ff33,0 12px 18px #0005}
.sigil:before{background:linear-gradient(135deg,#5863a3,#2c2a59);border-color:#b9c8ff;box-shadow:inset 1px 1px #e6e2ff55,3px 5px 10px #05052088;transform:translateZ(5px) rotate(45deg)}
.sigil:after{border-color:#a3bcff88;transform:translateZ(3px)}
.sigil-gem{transform:translateZ(15px);font-size:46px;color:#e5edff;text-shadow:0 2px 0 #8589c1,0 5px 10px #131435,0 0 25px #a0caff88}
.sigil-orbit{border-color:#b5a3ff55;transform:translateZ(-8px) rotate(45deg)}
.card-corner{font-size:22px;transform:translateZ(13px);color:#e4e9ff;text-shadow:0 2px 5px #10112c;font-weight:600;top:17px;left:18px}
.card-corner.bottom{font-size:12px;transform:translateZ(10px) rotate(180deg);color:#a6b3e5}
.card-word{transform:translateZ(11px);color:#c1cfff;font-size:7px;letter-spacing:1.6px;bottom:20%}.card-edition{color:#8d9ecf;font-size:5px;letter-spacing:.7px;bottom:14%;transform:translateZ(8px)}
.front{transform:rotateY(180deg) translateZ(1px);color:#eef3ff;background:radial-gradient(ellipse at 20% 0,#6a82c9aa,transparent 65%),linear-gradient(145deg,#36336d,#181d43);box-shadow:inset 0 0 0 3px #151a36,inset 0 0 0 4px #aca2ff66,0 18px 30px #0008}
.front:before{border-color:#b9c3ff55;background:linear-gradient(135deg,#a6b6ff11,transparent)}
.front .prize-symbol{color:#bdceff;text-shadow:0 0 25px #8b9fff;transform:translateZ(20px)}
.prize-text{font-size:17px;text-shadow:0 2px 5px #0005;transform:translateZ(14px)}.front small{color:#a9b3de}.reveal-label{color:#c5cfff;font-size:6px;letter-spacing:1.5px}
.card.selected-ghost{aspect-ratio:1/1.48;border-color:#a49bff33;background:radial-gradient(ellipse,#9a86ff0a,transparent);color:#b4b4df88}
.reserved{background:radial-gradient(ellipse at 50% 35%,#7362b72e,transparent 70%),linear-gradient(145deg,#1d2448,#11132d);border-color:#9a9cdd55;box-shadow:inset 0 1px #ccbcff22,0 20px 60px #0004}
.reserved:before{background:linear-gradient(90deg,transparent,#b6c6ff,transparent);box-shadow:0 0 15px #9790ff}
.reserved-slot{perspective:none}.reserved-slot .card .face{box-shadow:inset 0 0 0 3px #151a36,inset 0 0 0 4px #aca2ff66,0 18px 30px #0008}
.empty-card{border-color:#a89bff44;color:#b6b4e1}.empty-card>span{color:#a69eff88}
body[data-phase="done"] .reserved-slot .card{filter:none}
.final-glow:not(.opened) .face{animation:none}.final-glow:not(.opened) .card-tilt{animation:final-float 3.5s ease-in-out infinite}
@keyframes final-float{0%,100%{transform:translateY(0) rotateX(0)}50%{transform:translateY(-8px) rotateX(5deg)}}
.final-glow.hovering .card-tilt,.final-glow.revealing .card-tilt{animation:none}
.flying-card{filter:none}.flying-card .card-tilt{animation:none;transform:rotateX(-8deg) rotateY(12deg)}
.primary{color:#f6f4ff;border-color:#aeb0ff88;background:linear-gradient(115deg,#566dd9,#7e54bb);box-shadow:inset 0 1px #fff4,0 5px 18px #7961e533}.primary:active{box-shadow:none}
.progress{background:linear-gradient(115deg,#26305866,#231e4166);border-color:#a2a3ec22}
.nav.active{background:#9d8dff18}.step.active{text-shadow:0 0 24px #bc9bff44}.rule-note,.subtle{color:#b8beda}
.live-dot{background:#94cfff;box-shadow:0 0 9px #94cfff}#toast{background:#d6d5ff;color:#232343}
.motion-toggle{padding:7px 10px;font-size:10px;white-space:nowrap}
.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important}
@media(max-width:1199px) and (min-width:1001px){.cards{gap:20px 14px}.game-layout{grid-template-columns:minmax(0,1fr) 230px;gap:22px}.card-word{font-size:5px}.card-corner{font-size:20px}.sigil-gem{font-size:34px}}
@media(max-width:1000px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.game-layout{grid-template-columns:minmax(0,1fr) 230px;gap:22px}}
@media(max-width:650px){.game-layout{display:flex}.cards{gap:22px 14px;grid-template-columns:repeat(2,minmax(0,1fr))}.card-corner{font-size:22px}.sigil-gem{font-size:40px}.card-word{font-size:6px}.card-edition{font-size:4px}.reserved-slot .card-corner{font-size:15px;top:12px;left:12px}.reserved-slot .sigil-gem{font-size:24px}.reserved-slot .card-word{font-size:4px;letter-spacing:.5px}.reserved-slot .sigil{transform:translate(-50%,-50%) translateZ(10px)}.reserved-slot .prize-text{font-size:10px}.prize-text{font-size:15px}}

/* Readable UI text; miniature lettering on the card artwork stays decorative. */
.card-corner{font-family:Arial,"Microsoft YaHei",sans-serif;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;letter-spacing:1px}
.step span{font-size:14px;line-height:1.5}.step small{font-size:12px;line-height:1.6;opacity:.85}
.step{color:#9299bb}.step.active{color:var(--gold)}
.brand small,.header-right,.eyebrow,.subtitle,.nav,.subtle,.motion-toggle,
.intro>.subtle,.intro>.primary,.pill,.hint,.aside-caption,.empty-card small,.empty-card p,
.reserved-note>span,.reserved-note p,.rule-note p,.rule-note small,.table-footer,footer,
.option-row>span,.settings small{font-size:12px}
.eyebrow{letter-spacing:2px;line-height:1.7}
.brand small{letter-spacing:1.5px}
.hint,.aside-caption,.reserved-note>span,.table-footer,footer{line-height:1.7}
.reserved-note>span{letter-spacing:1px}
.reserved-note p,.rule-note small{color:#a9b0d0}
.table-footer,footer,.settings small{color:#959dbf}
.reserved-slot{display:grid;align-content:start;min-width:0}
.reserved-slot .card{display:block;align-self:start}
.reserved-slot .prize-text{font-size:17px}
@media(max-width:650px){
 header{height:auto;min-height:78px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;row-gap:14px}
 .brand small{letter-spacing:1px}.nav{font-size:12px}
 .progress{gap:12px;align-items:flex-start}.progress i{display:none}.step{min-width:0;gap:6px;align-items:flex-start}.step b{padding-top:2px}.step span{font-size:14px}.step small{font-size:12px}
 .eyebrow{letter-spacing:1px}.subtitle{font-size:12px}
 .reserved{grid-template-columns:minmax(0,1fr) 110px;column-gap:12px}
 .reserved-note>span{letter-spacing:.3px;overflow-wrap:anywhere}
 .reserved-slot .prize-text{font-size:12px}
 .table-footer{gap:12px;align-items:flex-start}.table-footer>span:last-child{flex-shrink:0}
 footer{flex-wrap:wrap;gap:12px;letter-spacing:.5px}
}
/* Touch interaction remains available in the original midnight palette. */
.card{-webkit-touch-callout:none;-webkit-user-select:none;touch-action:manipulation}
.card[aria-disabled="true"]{cursor:default}
@media(hover:none){.card:not(.hovering) .face:after{opacity:.25}}
/* Plain controls and functional copy; the card emblem is a drawn shape, not a glyph. */
.sigil-gem{display:block;width:42%;height:42%;background:linear-gradient(135deg,#fff,#aab7fa);clip-path:polygon(50% 0,64% 35%,100% 50%,64% 65%,50% 100%,36% 65%,0 50%,36% 35%);box-shadow:none}
.sigil:after{content:""}
.reserved-note{font-size:12px;line-height:1.8;color:var(--muted)}
.table-footer{justify-content:flex-end}
.delete{font-size:12px;white-space:nowrap;padding:10px 4px}
.header-right .subtle{white-space:nowrap;padding:8px 12px}
input,textarea,select{font-size:16px}
@media(max-width:650px){.subtitle{max-width:260px}.reserved-slot{grid-row:1/5}.reserved .aside-caption{line-height:1.8}.reserved-note{grid-column:1}.option-row{gap:8px}}