.card-stage { align-items: stretch; display: flex; gap: clamp(48px,4vw,84px); height: clamp(520px,68vh,620px); justify-content: center; margin: 0 auto; perspective: 1200px; }
.card-slot { --art-width:142%; --content-shift-x:0px; --mark-y:13%; --icon-y:25%; --icon-size:96px; --title-y:40%; --title-width:64%; --effect-y:52%; --effect-width:54%; --detail-y:69%; --detail-width:56%; --rule-y:68.5%; --rule-opacity:0; --card-mask:url("../assets/card-frames/variants/card-7.png"); display:grid; grid-template-rows:minmax(0,1fr) 54px; position:relative; width:clamp(280px,18vw,350px); }
.card-slot[data-visual="1"] { --art-width:146%; --mark-y:12%; --icon-y:25%; --icon-size:90px; --title-y:40%; --title-width:62%; --effect-y:51%; --effect-width:52%; --detail-y:69%; --detail-width:54%; --card-mask:url("../assets/card-frames/variants/card-1.png"); }
.card-slot[data-visual="2"] { --art-width:138%; --mark-y:14%; --icon-y:28%; --icon-size:98px; --title-y:43%; --title-width:64%; --effect-y:53%; --effect-width:54%; --detail-y:72%; --detail-width:56%; --rule-y:69%; --rule-opacity:.52; --card-mask:url("../assets/card-frames/variants/card-2.png"); }
.card-slot[data-visual="3"] { --art-width:146%; --mark-y:13%; --icon-y:25%; --icon-size:88px; --title-y:40%; --title-width:62%; --effect-y:54%; --effect-width:52%; --detail-y:71%; --detail-width:54%; --card-mask:url("../assets/card-frames/variants/card-3.png"); }
.card-slot[data-visual="4"] { --art-width:154%; --mark-y:12%; --icon-y:25%; --icon-size:92px; --title-y:41%; --title-width:62%; --effect-y:49%; --effect-width:52%; --detail-y:69%; --detail-width:54%; --card-mask:url("../assets/card-frames/variants/card-4.png"); }
.card-slot[data-visual="5"] { --art-width:136%; --content-shift-x:3px; --mark-y:15%; --icon-y:27%; --icon-size:92px; --title-y:43%; --title-width:58%; --effect-y:54%; --effect-width:46%; --detail-y:72%; --detail-width:48%; --rule-y:69%; --rule-opacity:.42; --card-mask:url("../assets/card-frames/variants/card-5.png"); }
.card-slot[data-visual="6"] { --art-width:148%; --mark-y:14%; --icon-y:28%; --icon-size:92px; --title-y:43%; --title-width:62%; --effect-y:54%; --effect-width:52%; --detail-y:70%; --detail-width:54%; --card-mask:url("../assets/card-frames/variants/card-6.png"); }
.card-slot[data-visual="7"] { --art-width:145%; --mark-y:13%; --icon-y:25%; --icon-size:92px; --title-y:40%; --title-width:62%; --effect-y:53%; --effect-width:52%; --detail-y:69%; --detail-width:54%; --card-mask:url("../assets/card-frames/variants/card-7.png"); }
.card-slot[data-visual="8"] { --art-width:136%; --mark-y:14%; --icon-y:25%; --icon-size:88px; --title-y:40%; --title-width:64%; --effect-y:51%; --effect-width:54%; --detail-y:69%; --detail-width:56%; --card-mask:url("../assets/card-frames/variants/card-8.png"); }
.card-slot[data-visual="9"] { --art-width:148%; --mark-y:14%; --icon-y:27%; --icon-size:92px; --title-y:41%; --title-width:62%; --effect-y:53%; --effect-width:52%; --detail-y:68%; --detail-width:54%; --card-mask:url("../assets/card-frames/variants/card-9.png"); }
.hex-card { background: transparent; border: 0; cursor: pointer; isolation: isolate; min-height: 0; padding: 0; perspective: 1200px; position: relative; }
.hex-card::before { animation: card-aura 15s var(--aura-delay,0s) var(--ease-in-out) infinite alternate; background:linear-gradient(155deg,var(--rarity-shadow),var(--rarity-glow) 48%,var(--rarity-shadow)); content:""; filter:blur(4px); height:100%; left:50%; mask-image:var(--card-mask); mask-position:center; mask-repeat:no-repeat; mask-size:100% 100%; opacity:.14; pointer-events:none; position:absolute; top:0; transform:translateX(-50%) scale(.988); width:var(--art-width); -webkit-mask-image:var(--card-mask); -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:100% 100%; z-index:0; }
.card-slot:nth-child(2) { --aura-delay: -5s; --sheen-delay: 360ms; }
.card-slot:nth-child(3) { --aura-delay: -10s; --sheen-delay: 720ms; }
.hex-card:disabled { cursor: default; }
.card-rotor { display:block; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 660ms var(--ease-emphasized); z-index:1; }
.card-slot.is-revealed .card-rotor { transform: rotateY(180deg); }
.card-face { backface-visibility: hidden; display:block; inset: 0; overflow: visible; position: absolute; transform: translateZ(0); }
.card-back { align-items: center; background: radial-gradient(circle at 50% 42%, rgba(98,116,131,.3),transparent 38%), linear-gradient(155deg,#142a26,#07110f 68%); border: 1px solid var(--rarity-border); box-shadow: 0 22px 45px rgba(0,0,0,.32), inset 0 0 45px rgba(217,223,218,.06); display: flex; flex-direction: column; justify-content: center; }
.card-back::before { border: 1px solid rgba(255,255,255,.18); content:""; inset: 15px; position:absolute; clip-path: polygon(50% 0,100% 19%,94% 84%,50% 100%,6% 84%,0 19%); }
.back-sigil { color: var(--rarity-color); font-size: 54px; filter: drop-shadow(0 0 12px var(--rarity-glow)); line-height: 1; }
.card-front { background:transparent; transform: rotateY(180deg); }
.card-front::after { --seal-angle:-90deg; background:conic-gradient(from var(--seal-angle),transparent 0 292deg,var(--rarity-shadow) 316deg,var(--rarity-color) 342deg,#fffbe9 351deg,transparent 360deg); content:""; height:100%; left:50%; mask-composite:exclude; mask-image:var(--card-mask),var(--card-mask); mask-position:center,center; mask-repeat:no-repeat,no-repeat; mask-size:100% 100%,calc(100% - 10px) calc(100% - 10px); opacity:0; pointer-events:none; position:absolute; top:0; transform:translateX(-50%); width:var(--art-width); -webkit-mask-composite:xor; -webkit-mask-image:var(--card-mask),var(--card-mask); -webkit-mask-position:center,center; -webkit-mask-repeat:no-repeat,no-repeat; -webkit-mask-size:100% 100%,calc(100% - 10px) calc(100% - 10px); z-index:3; }
.card-variant-art { animation:card-art-drift 16s var(--aura-delay,0s) var(--ease-in-out) infinite alternate; filter:drop-shadow(0 22px 24px rgba(0,0,0,.4)) drop-shadow(0 0 6px var(--rarity-shadow)); height:100%; left:50%; object-fit:fill; pointer-events:none; position:absolute; top:0; transform:translateX(-50%); width:var(--art-width); z-index:0; }
.card-sheen { animation:card-sweep 2200ms var(--sheen-delay,0ms) var(--ease-out) 1 both; background:linear-gradient(108deg,transparent 38%,rgba(255,255,255,.025) 44%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.05) 56%,transparent 62%); background-position:145% 0; background-size:320% 100%; height:100%; left:50%; mask-image:var(--card-mask); mask-position:center; mask-repeat:no-repeat; mask-size:100% 100%; opacity:.36; pointer-events:none; position:absolute; top:0; transform:translateX(-50%); width:var(--art-width); -webkit-mask-image:var(--card-mask); -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:100% 100%; z-index:1; }
.card-content { height:100%; inset:0; pointer-events:none; position:absolute; z-index:2; }
.rarity-mark { align-items:center; color:var(--rarity-color); display:flex; gap:14px; height:12px; justify-content:center; left:calc(50% + var(--content-shift-x)); position:absolute; top:var(--mark-y); transform:translate(-50%,-50%); }
.rarity-mark i { border: 1px solid currentColor; display: block; height: 7px; rotate:45deg; width:7px; }
.icon-well { align-items:center; display:flex; height:calc(var(--icon-size) + 16px); justify-content:center; left:calc(50% + var(--content-shift-x)); position:absolute; top:var(--icon-y); transform:translate(-50%,-50%); width:calc(var(--icon-size) + 30px); }
.icon-well::before { animation:icon-pulse 12s var(--aura-delay,0s) var(--ease-in-out) infinite alternate; background: radial-gradient(circle,var(--rarity-glow),transparent 68%); content:""; filter:blur(7px); inset:0; opacity:.48; position:absolute; }
.icon-well img { filter: drop-shadow(0 9px 12px rgba(0,0,0,.5)); height:var(--icon-size); object-fit: contain; position:relative; width:var(--icon-size); }
.card-content h2 { font-family:var(--font-display); font-size:clamp(22px,1.5vw,28px); font-weight:600; left:calc(50% + var(--content-shift-x)); letter-spacing:.02em; line-height:1.15; margin:0; overflow:hidden; position:absolute; text-align:center; text-overflow:ellipsis; text-wrap:balance; top:var(--title-y); transform:translate(-50%,-50%); white-space:nowrap; width:var(--title-width); }
.card-effect { color:var(--ink); display:-webkit-box; font-size:14px; font-weight:600; left:calc(50% + var(--content-shift-x)); line-height:1.55; margin:0; overflow:hidden; position:absolute; text-align:center; text-wrap:pretty; top:var(--effect-y); transform:translateX(-50%); width:var(--effect-width); -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.card-rule { background:linear-gradient(90deg,transparent,var(--rarity-border),transparent); height:1px; left:calc(50% + var(--content-shift-x)); opacity:var(--rule-opacity); position:absolute; top:var(--rule-y); transform:translateX(-50%); width:44%; }
.card-detail { color:var(--ink-muted); display:-webkit-box; font-size:12px; left:calc(50% + var(--content-shift-x)); line-height:1.65; margin:0; overflow:hidden; position:absolute; text-align:center; text-wrap:pretty; top:var(--detail-y); transform:translateX(-50%); width:var(--detail-width); -webkit-box-orient:vertical; -webkit-line-clamp:4; }
.reroll-button { align-self:center; background: radial-gradient(circle at 36% 30%,rgba(255,255,255,.16),transparent 30%), linear-gradient(145deg,#26362f,#0b1512); border:1px solid rgba(232,224,184,.42); border-radius:8px; box-shadow:0 6px 16px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.1); color:var(--gold-pale); cursor:pointer; display:grid; height:44px; justify-self:center; padding:0; place-items:center; position:relative; transition:border-color var(--motion-fast),box-shadow var(--motion-fast),transform 80ms; width:44px; }
.reroll-button::before { border:1px solid rgba(216,187,114,.22); border-radius:5px; content:""; inset:4px; position:absolute; }
.reroll-button svg { fill:none; height:23px; position:relative; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; transition:transform var(--motion-base) var(--ease-out); width:23px; }
.reroll-button:hover { border-color:var(--gold-pale); box-shadow:0 7px 20px rgba(0,0,0,.4),0 0 18px rgba(216,187,114,.22),inset 0 1px rgba(255,255,255,.14); }
.reroll-button:hover svg { transform:rotate(145deg); }
.reroll-button:active { transform:scale(.9); }
.reroll-button:disabled { color:var(--ink-faint); cursor:not-allowed; filter:saturate(.2); opacity:.48; }
.reroll-button:disabled svg { transform:none; }
.card-slot.is-rerolling .card-rotor { transform:rotateY(90deg); transition-duration:210ms; }
.card-slot.is-selected { z-index:5; }
.card-slot.is-selected .hex-card { animation:selected-rise 1250ms var(--ease-emphasized) forwards; }
.card-slot.is-selected .card-variant-art { filter:drop-shadow(0 22px 24px rgba(0,0,0,.4)) drop-shadow(0 0 15px var(--rarity-glow)); }
.card-slot.is-selected.is-sealing .card-front::after { animation:seal-trace 980ms 90ms var(--ease-out) 1 both; }
.card-slot.is-selected.is-sealing .icon-well img { animation:seal-icon-pulse 760ms 120ms var(--ease-out) 1 both; }
.card-slot.is-dismissed { animation:dismiss-card 680ms var(--ease-in-out) forwards; pointer-events:none; }
@property --seal-angle { syntax:"<angle>"; inherits:false; initial-value:-90deg; }
@keyframes selected-rise { 0%{opacity:1;transform:translateY(0) scale(1)} 7%{transform:translateY(2px) scale(.985)} 38%{transform:translateY(-8px) scale(1.035)} 78%{opacity:1;transform:translateY(-8px) scale(1.035)} 100%{opacity:0;transform:translateY(-5px) scale(1.02)} }
@keyframes dismiss-card { 0%{filter:saturate(1) brightness(1);opacity:1;transform:translateY(0) scale(1)} 100%{filter:saturate(.28) brightness(.52);opacity:0;transform:translateY(5px) scale(.96)} }
@keyframes seal-trace { 0%{--seal-angle:-90deg;filter:drop-shadow(0 0 2px var(--rarity-shadow));opacity:0} 12%{opacity:.42} 68%{filter:drop-shadow(0 0 9px var(--rarity-glow));opacity:.96} 100%{--seal-angle:270deg;filter:drop-shadow(0 0 3px var(--rarity-shadow));opacity:0} }
@keyframes seal-icon-pulse { 0%{filter:drop-shadow(0 9px 12px rgba(0,0,0,.5));transform:scale(1)} 42%{filter:drop-shadow(0 0 18px var(--rarity-glow));transform:scale(1.075)} 72%{filter:drop-shadow(0 0 10px var(--rarity-glow));transform:scale(1.025)} 100%{filter:drop-shadow(0 9px 12px rgba(0,0,0,.5));transform:scale(1)} }
@keyframes card-aura { to{opacity:.23;transform:translateX(-50%) scale(1.006)} }
@keyframes card-art-drift { to{transform:translateX(-50%) translateY(-1px) scale(1.002)} }
@keyframes icon-pulse { to{opacity:.67;transform:scale(1.022)} }
@keyframes card-sweep { from{background-position:145% 0} to{background-position:-45% 0} }
@keyframes card-sweep-hover { from{background-position:145% 0} to{background-position:-45% 0} }
.choice-toast { background:rgba(8,18,16,.88); border:1px solid var(--line-strong); border-radius:var(--radius-sm); bottom:44px; box-shadow:0 14px 44px rgba(0,0,0,.32); left:50%; padding:12px 22px; position:fixed; transform:translateX(-50%); z-index:40; }
.effect-canvas { inset:0; pointer-events:none; position:fixed; z-index:20; }
@media (max-height:850px) { .experience{padding-top:105px}.card-stage{gap:clamp(38px,4vw,64px);height:clamp(470px,70vh,530px)}.card-slot{width:clamp(260px,20vw,300px);--icon-size:80px}.card-slot[data-visual="1"],.card-slot[data-visual="3"],.card-slot[data-visual="8"]{--icon-size:78px}.card-slot[data-visual="2"]{--icon-size:84px}.card-slot[data-visual="4"],.card-slot[data-visual="5"],.card-slot[data-visual="6"],.card-slot[data-visual="7"],.card-slot[data-visual="9"]{--icon-size:80px}.card-detail{-webkit-line-clamp:3} }
@media (prefers-reduced-motion: reduce) { .card-rotor { transition:opacity 160ms ease; transform:none; } .card-face{transition:opacity 160ms ease}.card-front{opacity:0;transform:none}.card-slot.is-revealed .card-back{opacity:0}.card-slot.is-revealed .card-front{opacity:1}.card-slot.is-selected .hex-card{animation:none;opacity:1}.card-slot.is-dismissed{animation:none;opacity:.12}.card-front::after{display:none}.hex-card::before,.card-variant-art,.card-sheen,.icon-well::before,.icon-well img{animation:none!important} }
@media (hover:hover) and (pointer:fine) { .card-slot.is-revealed:not(.is-selected):not(.is-dismissed) .hex-card:not(:disabled):hover .card-front { transform:rotateY(180deg) translateY(-4px) scale(1.018); } .card-slot.is-revealed .hex-card:not(:disabled):hover .card-sheen{animation:card-sweep-hover 1500ms var(--ease-out) 1 both}.card-front { transition:transform var(--motion-base) var(--ease-out); } }