/* Game objects only. Shared shell lives unchanged in page.css. */
.relic-stage{position:relative;isolation:isolate;overflow:hidden;border:1px solid #807149;border-radius:22px;background:#071d22 var(--relic-background,url('assets/observatory.webp?v=20261018-1')) center/cover;box-shadow:0 18px 40px #0008,inset 0 0 30px #0008;padding:clamp(42px,13cqw,66px) 10px 16px;direction:ltr}
.relic-stage:before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(transparent,#02151830 25%,#02151820 80%,#02151880);pointer-events:none}
.relic-board{position:relative;width:100%;aspect-ratio:1.04;isolation:isolate;margin:6px auto 12px;touch-action:manipulation}
.relic-tile{position:absolute;width:17%;height:18%;padding:3px;border:1px solid #d4ba77;border-radius:12px;background:linear-gradient(145deg,#d7b96b,#63502e 6%,#172d30 9%,#0d2124 87%,#806436 90%,#d2b371);box-shadow:0 5px 0 #4a3923,0 7px 8px #000b,inset 0 0 0 2px #ba9b4d45;cursor:pointer;transition:filter .18s,transform .18s,box-shadow .18s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.relic-tile:after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 12px #0004;pointer-events:none}
.relic-tile[aria-disabled=true]{filter:brightness(.47) saturate(.65);cursor:default}
@media(hover:hover) and (pointer:fine){.relic-tile:not([aria-disabled=true]):hover{transform:translateY(-2px);box-shadow:0 7px 0 #4a3923,0 9px 14px #000a,0 0 12px #dfca8270}}
.relic-tile:focus-visible{outline:3px solid #fff1b3;outline-offset:3px}
.relic-sprite{display:block;width:100%;height:100%;border-radius:9px;background-image:var(--relic-art,url('assets/relics.webp?v=20261018-1'));background-size:400% 300%;background-position:var(--sx) var(--sy);background-repeat:no-repeat;pointer-events:none}
.relic-tray{display:grid;grid-template-columns:repeat(var(--slots),minmax(0,1fr));gap:5px;padding:10px 7px;border:1px solid #b59b5b;border-radius:13px;background:linear-gradient(#07181df0,#102c31ef);box-shadow:0 5px 16px #000b,inset 0 0 0 3px #c9aa6420}
.relic-slot{min-width:0;aspect-ratio:.82;border:1px solid #92835869;border-radius:8px;background:radial-gradient(#1c3940,#0a1d23);box-shadow:inset 0 2px 8px #0009;overflow:hidden}
.relic-slot:empty:after{content:'✧';display:grid;place-items:center;height:100%;color:#b6a16b75;font-size:22px}
.relic-slot.filled{border-color:#d9bd78}
.relic-burst{position:absolute;pointer-events:none;inset:25%;border-radius:50%;border:2px solid #f6db90;box-shadow:0 0 25px #c1fff0;animation:relic-burst .48s ease-out forwards;z-index:100}
.relic-progress{height:4px;margin:10px 12px 0;border-radius:4px;overflow:hidden;background:#d8bf6a30}
.relic-progress span{display:block;height:100%;background:linear-gradient(90deg,#77bcb7,#e5c97b);transition:width .25s}
.demo-finger{position:fixed;font-size:44px;z-index:10010;pointer-events:none;filter:drop-shadow(0 3px 5px #0009);line-height:1}
@keyframes relic-arrive{from{transform:translateY(-8px) scale(.85);opacity:.4}to{transform:none;opacity:1}}
@keyframes relic-burst{to{transform:scale(3);opacity:0}}
@media(prefers-reduced-motion:reduce){.relic-stage *{animation:none!important;transition:none!important}}
body.reduced-motion .relic-stage *{animation:none!important;transition:none!important}
@media(max-height:650px) and (orientation:landscape){.relic-stage{padding-top:18px}.relic-board{max-width:330px}.relic-tray{max-width:330px;margin:auto}}
@media(min-width:600px) and (orientation:portrait) and (pointer:coarse){.relic-board{aspect-ratio:1.3}.relic-stage{padding-top:60px}}
/* Transfer remains inside the stage so viewport centering never offsets its path. */
.relic-flight{z-index:1000!important;pointer-events:none;transform-origin:top left;will-change:transform,filter;box-shadow:0 7px 15px #0009,0 0 18px #e8cd7970;cursor:default}
.relic-slot.relic-landing{animation:relic-land .23s ease-out}
.relic-slot.relic-match{animation:relic-triple .32s ease-in forwards}
@keyframes relic-land{0%{transform:scale(1.09,.94);box-shadow:0 0 17px #f3d88d99}100%{transform:scale(1);box-shadow:inset 0 2px 8px #0009}}
@keyframes relic-triple{0%{filter:brightness(1);transform:scale(1)}55%{filter:brightness(1.5);transform:scale(1.09)}100%{filter:brightness(1.25);transform:scale(.86);opacity:.35}}

/* Decorative triple reward stays above the collection and out of the banner area. */
.relic-match-spark,.relic-match-halo{position:absolute;z-index:1001;pointer-events:none}
.relic-match-spark{width:6px;height:9px;border-radius:2px;background:#ffe8a3;box-shadow:0 0 9px #ffd36e;opacity:0;animation:relic-spark .34s var(--spark-delay) ease-out forwards}
.relic-match-spark:nth-child(even){background:#a9f1e0;width:4px;height:6px}
.relic-match-halo{border:2px solid #f8d47a;border-radius:50%;box-shadow:0 0 14px #f4c86866;animation:relic-halo .38s ease-out forwards}
@keyframes relic-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--spark-x),var(--spark-y)) scale(.1) rotate(135deg)}}
@keyframes relic-halo{0%{opacity:.85;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}

/* Theme changes affect only raster artwork; board geometry and frames stay identical. */
[data-relic-theme=coral] .relic-stage{--relic-background:url('assets/coral-palace.webp?v=20261018-themes-7');--relic-art:url('assets/coral-relics.webp?v=20261018-themes-7')}
[data-relic-theme=oasis] .relic-stage{--relic-background:url('assets/sunlit-oasis.webp?v=20261018-themes-7');--relic-art:url('assets/oasis-relics.webp?v=20261018-themes-7')}