:root{color-scheme:dark;font-family:Georgia,'Times New Roman',serif;--accent:#ddbd69;--glow:#e6ad56;--ink:#081a27}
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:#f5e9d1;background:radial-gradient(circle at 55% 0%,#18384a,#051624 58%,#020d16)}
main{width:min(100%,1680px);margin:auto;padding:clamp(18px,3vw,42px)}.page-head{margin-bottom:20px}.eyebrow{margin:0 0 7px;color:#e9bb5c;font:700 11px Arial,sans-serif;letter-spacing:.25em}.page-head h1{margin:0;font-size:clamp(30px,4vw,55px);line-height:1.05}.intro{font:14px/1.5 Arial,sans-serif;color:#b6ccda;margin:8px 0 0}.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,430px);gap:12px}.scene-panel{overflow:hidden;border:1px solid #b58a48;border-radius:16px;background:#071622;box-shadow:0 22px 70px #000a}.stage{position:relative;aspect-ratio:7/4;isolation:isolate;overflow:hidden;background:#081724 url('assets/monstra-environment-base-v2.png') center/cover}.environment,.stage-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.stage-shade{background:linear-gradient(90deg,#05121a44,#07142122 53%,#0714215c);z-index:1}.summon-ring{position:absolute;left:50%;top:68%;width:56%;height:17%;border:clamp(5px,.65vw,10px) solid var(--accent);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 4px #fff,0 0 20px var(--glow),0 0 45px var(--glow),inset 0 0 12px var(--accent);z-index:2;opacity:.44;transition:opacity .5s}.summon-ring img{width:100%;height:100%;opacity:.65;filter:drop-shadow(0 0 5px var(--accent))}.stage.awakened .summon-ring{opacity:.95}.stage.summoning .summon-ring{animation:ring-awaken 2.6s ease-out forwards}.summon-beam{position:absolute;left:50%;top:58%;width:23%;height:52%;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,var(--glow) 48%,transparent);filter:blur(25px);opacity:0;z-index:2;pointer-events:none}.stage.summoning .summon-beam{animation:beam 2.5s ease-out}.card-shadow{position:absolute;left:50%;top:70%;width:13%;height:3%;border-radius:50%;background:#000a;filter:blur(5px);transform:translate(-50%,-50%);z-index:2}.table-card{position:absolute;left:50%;top:68%;width:11%;aspect-ratio:1113/1548;object-fit:contain;transform:translate(-50%,-50%) perspective(520px) rotateX(68deg);filter:drop-shadow(0 1px 1px #000);z-index:3}.reference-frame{position:absolute;left:50%;top:45%;width:min(34%,310px);height:65%;transform:translate(-50%,-50%) scale(.65);opacity:0;z-index:4;touch-action:pan-y;cursor:grab;outline:none;transition:opacity .6s,transform .8s cubic-bezier(.18,.85,.35,1)}.reference-frame:active{cursor:grabbing}.reference-frame img{width:100%;height:100%;object-fit:contain;border:1px solid #d9bc8666;border-radius:14px;box-shadow:0 18px 40px #000a,0 0 24px var(--glow);background:#45494bd9;user-select:none;pointer-events:none}.reference-glow{position:absolute;inset:-6%;border:1px solid var(--accent);border-radius:20px;filter:blur(9px);opacity:.45;pointer-events:none}.stage.awakened .reference-frame{opacity:1;transform:translate(-50%,-50%) scale(1);animation:idle-float 3.5s ease-in-out infinite}.stage.attack .reference-frame{animation:attack-lunge .65s ease-out}.stage.signature .reference-frame{animation:signature-pulse 1.3s ease-out}.view-label,.scene-badge{position:absolute;z-index:5;background:#061d2ace;border:1px solid #8db6b99a;border-radius:99px;color:#d6f1ee;font:700 10px/1.2 Arial,sans-serif;letter-spacing:.15em;padding:7px 12px}.view-label{left:18px;top:18px;opacity:0}.stage.awakened .view-label{opacity:1}.scene-badge{left:18px;bottom:17px;font-size:9px;color:#e4d4ac;border-color:#b99c5a8a}.effect{position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none}.effect span{position:absolute;left:50%;top:50%;width:10%;aspect-ratio:1;border:3px solid var(--accent);border-radius:50%;box-shadow:0 0 25px var(--glow)}.effect i{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 15px var(--accent)}.effect i:nth-of-type(1){--dx:-210px;--dy:-110px}.effect i:nth-of-type(2){--dx:170px;--dy:-85px}.effect i:nth-of-type(3){--dx:-80px;--dy:150px}.effect i:nth-of-type(4){--dx:195px;--dy:80px}.effect i:nth-of-type(5){--dx:12px;--dy:-180px}.effect i:nth-of-type(6){--dx:-160px;--dy:45px}.stage.attack .effect,.stage.signature .effect{animation:effect-appear 1s}.stage.attack .effect span,.stage.signature .effect span{animation:effect-ring 1s}.stage.attack .effect i,.stage.signature .effect i{animation:effect-sparks 1s}.toolbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:14px 18px;border-top:1px solid #775832;background:#071b2a}.toolbar button{border:1px solid var(--accent);border-radius:99px;padding:10px 16px;color:#ffe4ae;background:#102b38;font:700 12px Arial,sans-serif;cursor:pointer}.toolbar button:hover,.toolbar button:focus-visible{background:#205065;outline:1px solid var(--accent)}.toolbar button.primary{color:#132131;background:linear-gradient(120deg,#ffe6ae,#d79e47)}.status{margin-left:auto;color:#a8c3cc;font:12px Arial,sans-serif}.profile{position:relative;min-height:590px;overflow:hidden;border:4px double #d8a748;border-radius:22px;padding:20px 25px 18px;background:radial-gradient(circle at 50% 13%,#133a4a,#061e2f 48%,#031320);box-shadow:inset 0 0 30px #000,0 22px 70px #000a}.frame-corner{position:absolute;width:58px;height:58px;border:2px solid #dca53d}.tl{top:10px;left:10px;border-right:0;border-bottom:0;border-radius:20px 0 0 0}.tr{top:10px;right:10px;border-left:0;border-bottom:0;border-radius:0 20px 0 0}.bl{bottom:10px;left:10px;border-right:0;border-top:0;border-radius:0 0 0 20px}.br{bottom:10px;right:10px;border-left:0;border-top:0;border-radius:0 0 20px 0}.brand{text-align:center}.brand svg{display:block;width:80%;height:80px;margin:0 auto -2px}.brand span{display:block;color:#f3c976;letter-spacing:.3em;font:700 12px Arial,sans-serif}.ornament{text-align:center;color:#61d9f1;font-size:16px;margin:8px 0 0}.profile h2{text-align:center;color:#ffdea3;text-shadow:0 0 20px var(--glow);font-size:clamp(42px,4vw,70px);margin:4px 0 12px;line-height:1}.identity,.owner,.stats>div,.moves>div{border:1px solid #bc8948;border-radius:11px;background:#071a29d9}.identity{display:grid;grid-template-columns:1fr 1fr;padding:12px 16px;gap:20px}.identity>div+div{border-left:1px solid #b6884b;padding-left:20px}.profile small{display:block;color:#b6c9d5;font:700 10px Arial,sans-serif;letter-spacing:.17em}.profile strong{display:block;color:#ffe6b7}.identity strong{font-size:18px;margin-top:3px}.owner{margin-top:8px;padding:11px 17px}.owner strong{font-size:28px;margin:2px 0}.owner em{color:#4cb7ff;font:700 18px Arial,sans-serif}.owner span{font:10px Arial,sans-serif;letter-spacing:.18em;color:#b0ccd8}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.stats>div{display:flex;align-items:center;justify-content:space-between;padding:9px 15px}.stats strong{font-size:30px}.moves{margin-top:8px}.moves>div{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding:11px 14px;font:700 15px Arial,sans-serif}.moves strong{font:700 28px Georgia,serif}.profile-note{margin:18px 10px 0;text-align:center;color:#b6ccd4;font:11px/1.4 Arial,sans-serif;letter-spacing:.05em}.collection-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.collection-nav a{border:1px solid #806642;border-radius:99px;padding:8px 12px;color:#d8e6e7;text-decoration:none;font:12px Arial,sans-serif}.collection-nav a[aria-current="page"]{background:#284c5a;color:#fff3cf;border-color:#d9b66c}
@keyframes ring-awaken{0%{opacity:.2;transform:translate(-50%,-50%) scale(.6)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:.95;transform:translate(-50%,-50%) scale(1)}}@keyframes beam{0%,100%{opacity:0}25%,65%{opacity:.85}}@keyframes idle-float{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-6px)}}@keyframes attack-lunge{0%,100%{transform:translate(-50%,-50%)}40%{transform:translate(-44%,-56%) scale(1.13)}}@keyframes signature-pulse{0%,100%{transform:translate(-50%,-50%)}48%{transform:translate(-50%,-50%) scale(1.18);filter:brightness(1.35)}}@keyframes effect-appear{10%,80%{opacity:1}100%{opacity:0}}@keyframes effect-ring{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}30%{opacity:1}100%{transform:translate(-50%,-50%) scale(8);opacity:0}}@keyframes effect-sparks{0%{transform:translate(-50%,-50%);opacity:0}20%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
@media(max-width:950px){.layout{grid-template-columns:1fr}.profile{max-width:500px;width:100%;justify-self:center}.reference-frame{width:35%}}@media(max-width:600px){main{padding:14px}.stage{aspect-ratio:1.35}.reference-frame{width:42%;height:60%}.scene-badge{font-size:7px}.status{width:100%;margin-left:0}.profile{padding:18px;min-height:0}.brand svg{height:65px}.profile h2{font-size:48px}}
.creature-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:4;opacity:0;pointer-events:none;touch-action:pan-y;cursor:grab;transition:opacity .8s ease;outline:none}.stage.has-3d.awakened .creature-canvas{opacity:1;pointer-events:auto}.stage.has-3d .reference-frame,.stage.has-3d .view-label{display:none}.stage.has-3d .scene-badge{color:#ddf4ee;border-color:var(--accent)}.stage.has-3d.attack .creature-canvas{filter:brightness(1.1)}.stage.has-3d.signature .creature-canvas{filter:brightness(1.1)}.stage.has-3d .effect{display:none}
.stage.attack .effect span{animation:attack-wave .85s ease-out forwards}.stage.signature .effect span{animation:signature-wave 1.3s ease-out forwards}
.stage.attack .effect::before,.stage.attack .effect::after{content:"";position:absolute;left:43%;top:43%;width:27%;height:20%;border-top:clamp(4px,.55vw,8px) solid #fff8e4;border-radius:50%;filter:drop-shadow(0 0 5px var(--accent)) drop-shadow(0 0 13px var(--glow));opacity:0;transform:rotate(-35deg);animation:element-strike .8s ease-out forwards}
.stage.attack .effect::after{top:51%;left:48%;animation-delay:.1s;transform:rotate(-25deg)}
.stage.signature .effect::before{content:"";position:absolute;left:50%;top:55%;width:32%;height:15%;border:4px solid var(--accent);border-radius:50%;box-shadow:0 0 18px var(--glow),inset 0 0 18px var(--glow);opacity:0;transform:translate(-50%,-50%);animation:signature-orbit 1.3s ease-out forwards}

/* Match Flaro's engraved portal and recessed physical card on every scene. */
.summon-etching,.summon-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;pointer-events:none}
.summon-etching{z-index:2;transform:translateY(13.6%) scale(1.1,.55);opacity:.14;transition:opacity .45s}
.stage.summoning .summon-etching{opacity:.95;animation:portal-glow 4.8s ease-in-out both}
.stage.awakened .summon-etching{opacity:.77}
.summon-video{z-index:5;opacity:0;transform:translateY(13.6%) scale(1.1,.55)}
.stage.summoning .summon-video{animation:summon-video-handoff 5s linear forwards}
.summon-ring{background:radial-gradient(ellipse,#fff5c90a 30%,var(--glow) 100%);z-index:2}
.card-recess{position:absolute;left:50%;top:67%;width:11.5%;aspect-ratio:1113/1548;transform:translate(-50%,-50%) perspective(520px) rotateX(68deg);border:2px solid #39210f;border-radius:3px;background:#040c0d8a;box-shadow:inset 0 0 7px #000,0 1px 1px #f6a64a6b;z-index:2}
.table-card{top:67%;filter:drop-shadow(0 1px 0 #775126) drop-shadow(0 1px 1px #0009)}
.stage.summoning .table-card{filter:drop-shadow(0 2px 0 #7e5124) drop-shadow(0 0 20px var(--glow)) brightness(1.25)}
@keyframes portal-glow{0%{opacity:.18;filter:brightness(.6)}18%,70%{opacity:1;filter:brightness(1.35)}100%{opacity:.77;filter:brightness(1)}}
@keyframes summon-video-handoff{0%,68%{opacity:.95}96%,100%{opacity:0}}

/* The collectible profile carries the same fields as Flaro's, with each card's own data. */
.profile{isolation:isolate;display:flex;flex-direction:column;gap:7px;padding:19px 24px 18px;border:1px solid #b99058;border-radius:16px;background:radial-gradient(circle at 18% 12%,#2952684b,transparent 29%),linear-gradient(140deg,#06121f,#071b2b 46%,#03111d);box-shadow:inset 0 0 65px #000c,0 25px 80px #0008}
.profile::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(#ffe8a819 1px,transparent 1.5px);background-size:117px 151px}
.profile-frame{position:absolute;inset:0;z-index:0;pointer-events:none;background:url('assets/profile-frame.svg') center/100% 100% no-repeat;opacity:.96}
.profile>:not(.profile-frame){position:relative;z-index:1}
.brand svg{height:76px;max-width:285px}
.brand span{font-size:11px;color:#e3bd81}
.ornament{display:flex;align-items:center;gap:8px;height:14px;margin:0;color:#79e6f5;font-size:12px}
.ornament::before,.ornament::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#c79858,transparent)}
.profile h2{font-size:clamp(42px,4vw,69px);margin:0 0 3px}
.identity{grid-template-columns:1fr 1.32fr;min-height:63px;gap:0;padding:0;box-shadow:inset 0 0 17px #e0983421}
.identity>div{display:flex;align-items:center;gap:7px;min-width:0;padding:6px 8px}
.identity>div+div{padding-left:8px}
.profile-symbol{width:32px;height:42px;flex:none;object-fit:contain}
.identity strong{font-size:clamp(13px,1.1vw,18px);margin-top:3px}
.owner{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:81px;margin:0;padding:10px 11px 9px 14px;background:linear-gradient(115deg,#0c1825ee,#092335d9)}
.owner>div{min-width:0}.owner strong{margin:2px 0;line-height:1.05;font-size:clamp(24px,2.1vw,36px)}
.owner em{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;color:white;background:#168fde;font:700 15px Arial,sans-serif;vertical-align:middle;box-shadow:0 0 11px #2aaefa99}
.owner span{display:block;color:#d5d5ce;font:700 10px Arial,sans-serif;letter-spacing:.12em}
.profile-crest{width:67px;height:68px;flex:none;overflow:hidden}
.profile-meta{display:grid;gap:5px;margin:0;padding:10px 12px;border:1px solid #678b9b;border-radius:10px;background:#071a29d9}
.profile-meta>div{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.profile-meta dt{color:#c1d1d5;font:700 10px Arial,sans-serif;letter-spacing:.15em}
.profile-meta dd{overflow:hidden;margin:0;color:#f1d499;text-align:right;text-overflow:ellipsis;white-space:nowrap;font:700 clamp(11px,.8vw,14px) Arial,sans-serif}
.stats{gap:7px;margin:0}.stats>div{gap:7px;min-height:56px;padding:6px 9px;border-color:#e0b85e;box-shadow:inset 0 0 11px #ffb85c17}
.stat-symbol{width:34px;height:35px;flex:none;object-fit:contain}.stats small{margin-right:auto;color:#f1d9a9}.stats strong{font-size:clamp(27px,2.1vw,36px)}
.moves{margin:0}.moves>div{min-height:51px;margin-top:5px;padding:7px 12px;border-color:#86aab0;background:linear-gradient(95deg,#081925ef,#0b2736e8)}
.moves>div:first-child{margin-top:0}.moves small{display:block;margin-top:3px;color:#b4d4df;font:500 clamp(9px,.66vw,11px) Arial,sans-serif;letter-spacing:.08em}
.profile-foot{margin-top:auto;padding:21px 10px 5px;text-align:center;color:#d0bba0;font:700 10px Arial,sans-serif;letter-spacing:.25em}
.profile-foot::before{content:"◆";position:absolute;top:3px;left:14%;right:14%;border-bottom:1px solid #a4753e;color:#77ddea;text-align:center;line-height:14px}
@media(max-width:600px){.profile{padding:18px 19px}.profile h2{font-size:48px}.owner strong{font-size:28px}.profile-meta dd{font-size:11px}.card-recess{width:19%}.table-card{width:18.5%}}
@keyframes attack-wave{0%{transform:translate(-50%,-50%) scale(.25);opacity:0}22%{opacity:.9}100%{transform:translate(-50%,-50%) scale(4);opacity:0}}
@keyframes element-strike{0%{opacity:0;clip-path:inset(0 100% 0 0);translate:-15% 10%}25%{opacity:1}75%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:0;translate:15% -15%}}
@keyframes signature-wave{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}25%{opacity:1}100%{transform:translate(-50%,-50%) scale(8);opacity:0}}
@keyframes signature-orbit{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(0)}25%,68%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(2.8) rotate(45deg)}}

/* If a GLB is unavailable, keep the directional reference effect geometric too. */
.effect span,.effect i{display:none}
.stage.signature:not(.has-3d) .effect::before{left:50%;top:45%;width:28%;height:56%;border:1px solid var(--accent);border-radius:0;background:linear-gradient(120deg,transparent,var(--glow),transparent);box-shadow:inset 0 0 18px var(--glow),0 0 17px var(--glow);clip-path:polygon(50% 0,88% 13%,100% 62%,50% 100%,0 62%,12% 13%);animation:signature-facet 1.3s ease-out forwards}
@keyframes signature-facet{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}25%,70%{opacity:.65;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.16)}}

/* The collectible presentation uses the same entrance and controls as Flaro. */
.stage.has-3d.summoning .creature-canvas{opacity:1}
.model-loading{position:absolute;z-index:7;left:50%;top:42%;transform:translate(-50%,-50%);max-width:80%;padding:11px 17px;border:1px solid #d5aa64;border-radius:999px;background:#051927e8;color:#ffe5ad;font:700 13px/1.35 Arial,sans-serif;text-align:center;white-space:nowrap}
.model-loading[hidden]{display:none}
html.presentation body{min-height:0;background:transparent}
html.presentation main{width:100%;padding:0}
html.presentation .page-head,html.presentation .collection-nav,html.presentation main>p{display:none}
html.presentation .scene-badge{display:none}
html.presentation .layout{grid-template-columns:minmax(0,1fr) minmax(320px,430px);align-items:stretch}
html.presentation .scene-panel{position:relative;min-width:0}
html.presentation .toolbar{position:absolute;z-index:8;inset:0;display:block;padding:0;border:0;background:transparent;pointer-events:none}
html.presentation .toolbar button{display:none}
html.presentation .toolbar #awaken{position:absolute;top:49%;left:50%;display:block;transform:translate(-50%,-50%);padding:16px 28px;border-width:2px;font-size:16px;box-shadow:0 12px 36px #000b,0 0 28px var(--glow);pointer-events:auto}
html.presentation .stage.summoning+.toolbar #awaken{display:none}
html.presentation .stage.awakened+.toolbar #awaken{top:auto;left:17px;bottom:15px;transform:none;padding:9px 15px;border-width:1px;font-size:12px;background:#102b38e8;color:#ffe6ae;box-shadow:0 5px 17px #0009}
html.presentation .status{position:absolute;right:14px;bottom:13px;margin:0;padding:7px 10px;border-radius:7px;background:#061725ca;color:#c3d4dc;text-shadow:0 1px 2px #000}
@media(max-width:950px){html.presentation .layout{grid-template-columns:1fr}html.presentation .profile{width:min(100%,500px);justify-self:center}}
@media(max-width:600px){html.presentation .toolbar #awaken{padding:12px 17px;font-size:13px}html.presentation .stage.awakened+.toolbar #awaken{top:12px;left:12px;bottom:auto}html.presentation .status{left:12px;right:12px;text-align:center}.model-loading{white-space:normal}}