/* De Betoverde Toverspiegel / The Enchanted Mirror – eigen sfeer: nachtblauw, goud, lila, roze, mint. De telefoon is de spiegel:
   het speelscherm is één gouden spiegellijst met sterretjes, alles verschijnt "in het glas" met een mistige rimpeling.
   Bovenop platform.css. Fonts: Fredoka (koppen), Barlow (tekst). */
:root{--night:#1f2a44;--night2:#13102a;--deep:#2a2160;--glass:#17143a;--gold:#f4c20d;--gold2:#c99400;--pink:#ff8fab;--lila:#b794f6;--mint:#3ccfa8;--cream:#fff7e8;--paper:#fff7e8;--paper2:#f3ead6;--rule:#e2d6b8;--ink:#1f2a44;--ink2:#5a5a7a;--fog:#e8e4ff;--blood:#ff6b6b;--lamp:#f4c20d;
  --f-type:'Fredoka','Arial Rounded MT Bold',sans-serif;--f-cond:'Fredoka','Barlow Condensed',sans-serif}
body{background:var(--night2);color:var(--fog)}
#app{min-height:100%;position:relative}
.screen{min-height:100vh;min-height:100dvh;padding:12px 0 calc(28px + env(safe-area-inset-bottom,0px));position:relative}
h1,h2,h3{font-family:var(--f-type);font-weight:700}
.btn{border-radius:18px;padding:16px;font-size:18px;font-family:var(--f-type);font-weight:600;color:var(--ink);background:var(--gold)}
.btn.big{font-size:22px;padding:20px 18px;box-shadow:0 8px 30px rgba(244,194,13,.35)}
.btn.ghost{color:#fff;border:2px solid rgba(255,255,255,.6);background:rgba(255,255,255,.08)}
.btn.ghost.dk{color:var(--ink);border-color:var(--rule);background:transparent}
.btn.red{background:var(--blood);color:#fff}
.btn.sm{font-size:15px;padding:8px 16px}
a.btn{display:block;text-align:center;text-decoration:none}
.pill{border-radius:20px;border-color:rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.1);font-family:var(--f-type);letter-spacing:.04em;font-size:13px;text-transform:none}
.eyebrow{font-family:var(--f-type);letter-spacing:.06em;font-size:13px;text-transform:uppercase;color:var(--lila)}
.note{color:var(--fog);opacity:.85}
.seg{grid-template-columns:1fr 1fr 1fr}
.seg button{border-radius:14px;border:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);color:#fff;font-family:var(--f-type);font-size:14px;line-height:1.2;padding:10px 6px}
.seg button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.seg.two{grid-template-columns:1fr 1fr}
.seg.two button small{display:block;font-weight:400;font-size:12px;opacity:.85}
.paper .seg button{color:var(--ink);border-color:var(--rule);background:#fff}
.paper .seg button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold)}
.inp{border-radius:14px;font-family:var(--f-type);letter-spacing:.08em}
.err{color:#c2185b}
.paper{color:var(--ink)}.paper .note{color:var(--ink2);opacity:1}.paper .eyebrow{color:#7c4dd6}
/* ---- start ---- */
#home{background:radial-gradient(ellipse at 50% 0,#4b3a99 0,var(--deep) 35%,var(--night2) 75%)}
#home.photo{background:linear-gradient(180deg,rgba(19,16,42,0) 0,rgba(19,16,42,0) 380px,rgba(19,16,42,.94) 560px,var(--night2) 660px),url("img/hero.webp") center 0/100% auto no-repeat,var(--night2)}
@media (min-width:600px){#home.photo{background:linear-gradient(90deg,var(--night2) 0%,rgba(19,16,42,0) 25%,rgba(19,16,42,0) 75%,var(--night2) 100%),linear-gradient(180deg,rgba(19,16,42,0) 0,rgba(19,16,42,0) 380px,rgba(19,16,42,.94) 560px,var(--night2) 660px),url("img/hero.webp") center 0/min(100%,520px) auto no-repeat,var(--night2)}}
#home .stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 70% 20%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 85% 55%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 40% 70%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 10% 80%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 55% 45%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 92% 85%,#fff 50%,transparent 51%);background-size:420px 420px;opacity:.7}
#home .wrap{position:relative}
#home .gap{height:38vh;min-height:220px}
#home.photo .gap{height:46vh}
.masthead{margin:0 0 10px}
.masthead h1{font-size:40px;line-height:1;margin:0 0 8px;color:#fff;text-shadow:0 2px 0 var(--gold2),0 6px 24px rgba(0,0,0,.5)}
.masthead .tape{display:inline-block;background:var(--pink);color:var(--ink);font-family:var(--f-type);font-weight:600;padding:5px 12px;border-radius:12px;font-size:14px;transform:rotate(-1.5deg)}
.lead{color:var(--fog);font-size:17px}
.namebox{margin:14px 0 6px}.namebox label{display:block;font-family:var(--f-type);font-size:14px;color:var(--lila);margin-bottom:4px}
.namebox input,.namebox textarea{width:100%;box-sizing:border-box;border-radius:14px;border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font:600 17px var(--f-type);padding:12px 14px}
.namebox textarea{min-height:92px;resize:vertical;line-height:1.4}
.namebox input::placeholder,.namebox textarea::placeholder{color:rgba(255,255,255,.45)}
.how{color:var(--fog)}.how li{margin:0 0 10px}
.mock{display:flex;justify-content:center;margin:14px 0 4px}
.mock svg{width:120px;height:120px}
/* ---- speelscherm: de spiegel ---- */
#play{padding:8px;display:flex;flex-direction:column;align-items:center;background:radial-gradient(ellipse at 50% 20%,#3a2f7a 0,var(--deep) 40%,var(--night2) 85%)}
#mirror{position:relative;width:100%;max-width:520px;flex:1;display:flex;flex-direction:column;border-radius:46% 46% 28px 28px/18% 18% 28px 28px;padding:18px 14px 14px;background:linear-gradient(135deg,#fff1a8 0%,var(--gold) 22%,var(--gold2) 50%,var(--gold) 78%,#fff1a8 100%);box-shadow:0 0 0 3px #7a5a00 inset,0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(244,194,13,.25);min-height:calc(100dvh - 16px)}
#mirror:before{content:"";position:absolute;inset:6px;border-radius:inherit;border:3px dotted rgba(255,255,255,.55);pointer-events:none}
#mirror:after{content:"✦";position:absolute;top:-2px;left:50%;transform:translateX(-50%);font-size:30px;color:#fff;text-shadow:0 0 12px #fff,0 0 24px var(--gold);pointer-events:none}
#glassWrap{position:relative;flex:1;border-radius:40% 40% 18px 18px/14% 14% 18px 18px;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#2b2466 0,var(--glass) 55%,#0e0c24 100%);box-shadow:inset 0 0 40px rgba(0,0,0,.7),inset 0 0 0 2px rgba(255,255,255,.08)}
#glassWrap:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,.08) 100%);pointer-events:none;z-index:2}
#glass{position:relative;z-index:1;height:100%;overflow:auto;padding:16px 14px 20px;box-sizing:border-box;-webkit-overflow-scrolling:touch;animation:ripple .9s ease-out}
@keyframes ripple{0%{filter:blur(8px);opacity:0;transform:scale(1.03)}100%{filter:blur(0);opacity:1;transform:none}}
#hud{display:flex;justify-content:center;gap:14px;align-items:center;padding:2px 36px 8px;color:var(--ink);font-family:var(--f-type);font-weight:700;font-size:15px}
#hud button{background:rgba(0,0,0,.18);border:0;color:var(--ink);border-radius:12px;width:40px;height:34px;font-size:18px}
#pot{display:flex;align-items:center;gap:5px;justify-content:center;padding:10px 6px 4px}
#pot i{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.25);border:2px solid rgba(0,0,0,.25);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:18px;transition:transform .3s}
#pot i.on{background:var(--glass);border-color:#fff;box-shadow:0 0 12px var(--lila);transform:scale(1.08)}
#pot b{margin-left:6px;color:var(--ink);font-family:var(--f-type)}
/* inhoud in het glas */
.talk{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:100%;justify-content:center}
.talk h2{margin:0;font-size:26px;color:#fff}
.talk p{margin:0;color:var(--fog)}
.talk .big,.big{font-size:20px;line-height:1.35;color:#fff;font-weight:500}
.talk .whisper{color:var(--lila);font-style:italic}
.talk .btn{width:100%;max-width:340px}
.av{width:150px;height:150px;display:flex;align-items:center;justify-content:center}
.av.sm{width:90px;height:90px}
.av svg,.av img,.fig svg,.fig img{width:100%;height:100%;object-fit:contain}
.fig{width:140px;height:140px;margin:0 auto}
.gr g{animation:float 3s ease-in-out infinite;transform-origin:center}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.frog{animation:hop 2.4s ease-in-out infinite}
@keyframes hop{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-10px)}}
.mira{filter:drop-shadow(0 0 18px rgba(183,148,246,.7))}
.pass .who{font-family:var(--f-type);font-size:44px;font-weight:700;color:var(--gold);text-shadow:0 0 24px rgba(244,194,13,.6);padding:10px 0}
.burst{font-size:64px;animation:pop .6s ease-out}
@keyframes pop{0%{transform:scale(.2);opacity:0}70%{transform:scale(1.2)}100%{transform:none;opacity:1}}
.word{font-family:var(--f-type);font-size:34px;font-weight:700;color:var(--pink);text-shadow:0 0 20px rgba(255,143,171,.6);padding:14px 18px;border:3px dashed var(--lila);border-radius:20px;word-break:break-word}
.word.spell{font-size:28px;line-height:1.3;width:100%;box-sizing:border-box;text-align:center}
.th{text-align:center;margin-bottom:10px}.th p{margin:6px 0 0;color:#fff;font-size:18px;line-height:1.35}.th h2{margin:0;color:#fff}
.help{position:absolute;right:8px;top:8px;z-index:3;background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:10px;width:36px;height:32px;font-size:16px}
.opts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;width:100%;margin-top:6px}
.opts button{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.25);border-radius:18px;padding:10px 6px;color:#fff;font-family:var(--f-type);font-weight:600;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:4px}
.opts button svg{width:72px;height:72px}
.opts.big button svg{width:96px;height:110px}
.opts.words button{font-size:17px;padding:16px 6px;word-break:break-word}
.opts button.no{opacity:.35;transform:scale(.95)}
.opts button.ok{background:var(--mint);color:var(--ink);border-color:var(--mint)}
.opts button:disabled{opacity:1}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:10px}
.shot{width:100%;max-width:340px;border-radius:18px;border:4px solid var(--gold);display:block;margin:0 auto;box-shadow:0 10px 30px rgba(0,0,0,.5)}
/* 1 sterrenpot */
.jar{position:relative;width:170px;height:220px;margin:14px auto;border:4px solid rgba(255,255,255,.7);border-top-width:10px;border-radius:14px 14px 40px 40px;background:rgba(255,255,255,.06);overflow:hidden}
.jar .fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(180deg,#fff7c2,var(--gold));transition:height .15s;box-shadow:0 0 30px var(--gold)}
.jar .stars i{position:absolute;width:10px;height:10px;background:#fff;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:twinkle .8s ease-out forwards}
@keyframes twinkle{0%{transform:scale(0);opacity:0}40%{opacity:1}100%{transform:scale(1.6);opacity:0}}
/* 2 camera */
.camwrap{position:relative;width:100%;aspect-ratio:1;max-width:340px;margin:0 auto;border-radius:22px;overflow:hidden;background:#000;border:3px solid rgba(255,255,255,.3)}
.camwrap video{width:100%;height:100%;object-fit:cover;display:block}
.camwrap.selfie video{transform:scaleX(-1)}
.ring{--p:0deg;position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(var(--blood) var(--p),rgba(255,255,255,.25) 0);display:flex;align-items:center;justify-content:center;mask:radial-gradient(circle,transparent 60%,#000 62%);-webkit-mask:radial-gradient(circle,transparent 60%,#000 62%)}
.ring b{position:absolute;color:#fff;font-family:var(--f-type);font-size:20px;text-shadow:0 0 8px #000}
.still{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;padding:6px 14px;border-radius:12px;font-family:var(--f-type);font-size:15px}
.still.ok{background:var(--mint);color:var(--ink)}
.room{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;width:100%;margin-top:8px}
.room button{font-size:54px;padding:18px 0;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.25);border-radius:18px}
.room button.no{opacity:.3}
/* 3 doolhof */
#mz{width:100%;max-width:340px;display:block;margin:0 auto;border-radius:14px;touch-action:none}
/* 4 mist */
.mistbox{position:relative;width:100%;max-width:320px;aspect-ratio:1;margin:0 auto;border-radius:50%;overflow:hidden;background:radial-gradient(circle,#3a2f7a,#17143a)}
.mistbox .under{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.mistbox .under svg{filter:drop-shadow(0 0 12px rgba(255,255,255,.5))}
.mistbox canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
/* 5 ritme */
.moon{font-size:120px;text-align:center;line-height:1.2;transform-origin:center;filter:drop-shadow(0 0 20px rgba(244,194,13,.5))}
.moon.p{animation:beat .3s ease-out}
@keyframes beat{0%{transform:scale(1.25)}100%{transform:none}}
/* 7 spreken */
.vol{height:16px;border-radius:8px;background:rgba(255,255,255,.12);overflow:hidden;width:100%;max-width:340px;margin:10px auto}
.vol i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mint),var(--gold),var(--pink));transition:width .08s}
/* confetti */
.conf{position:fixed;inset:0;pointer-events:none;z-index:50}
/* vellen */
.sheet>.paper .btn{margin-top:8px}
#dipOut{margin:10px 0}
#file{position:absolute;left:-9999px}

#play[hidden],#home[hidden]{display:none}
/* ---- puzzels ---- */
.ptimer{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;background:rgba(0,0,0,.4);color:var(--gold);font-family:var(--f-type);font-weight:700;padding:4px 10px;border-radius:12px;font-size:14px}
.ptimer.up{color:var(--blood)}
.sky{position:relative;width:100%;aspect-ratio:1;max-width:340px;margin:0 auto;border-radius:20px;background:radial-gradient(circle at 30% 30%,#2b2466,#0e0c24);overflow:hidden}
.sky svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sky button{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:0;background:#fff;color:var(--ink);font:700 16px var(--f-type);box-shadow:0 0 14px #fff;clip-path:polygon(50% 0,63% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,37% 36%)}
.sky button.on{background:var(--gold);box-shadow:0 0 18px var(--gold)}
.sky button.lit{background:var(--pink);transform:scale(1.3);box-shadow:0 0 24px var(--pink)}
.garden{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:100%;max-width:300px;margin:0 auto 10px;background:#1a3a2a;border-radius:16px;padding:8px;box-sizing:border-box}
.garden svg{width:100%;height:auto}
.opts.four{grid-template-columns:repeat(4,1fr)}
.opts.four button span{font-size:26px}
.moons{display:flex;justify-content:center;gap:6px;font-size:34px;margin:8px 0 12px}
.moons .q{color:var(--gold);font-family:var(--f-type);font-weight:700}
.moonb{font-size:40px}
#fc{width:100%;max-width:340px;display:block;margin:0 auto;border-radius:18px;touch-action:none}
.mem{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:320px;margin:0 auto}
.mem.six{grid-template-columns:repeat(4,1fr)}
.mem button{aspect-ratio:3/4;border-radius:12px;border:2px solid var(--gold);background:linear-gradient(135deg,#5b44b8,#2a2160);font-size:32px;perspective:400px}
.mem button i{display:none;font-style:normal}
.mem button.up{background:#fff7e8}.mem button.up i{display:block}
.mem button.ok{border-color:var(--mint);background:#d9f7ec}
.mirtxt{display:flex;justify-content:center;gap:14px;font:700 84px var(--f-type);color:#fff;transform:scaleX(-1);text-shadow:0 0 24px rgba(183,148,246,.8);margin:6px 0 14px}
.word.gold{color:var(--gold);border-color:var(--gold);text-shadow:0 0 20px rgba(244,194,13,.6);font-size:64px}
.taunt{position:absolute;right:-10px;top:56px;z-index:4;width:110px;display:flex;flex-direction:column;align-items:center;animation:peek .5s ease-out;pointer-events:none}
.taunt svg{width:90px;height:110px;filter:drop-shadow(0 0 10px rgba(183,148,246,.7))}
.taunt span{background:#fff;color:var(--ink);font:600 12px var(--f-type);padding:6px 8px;border-radius:12px;text-align:center;margin-top:-6px}
.taunt.go{animation:peekOut .5s ease-in forwards}
@keyframes peek{from{transform:translateX(120px)}to{transform:none}}
@keyframes peekOut{to{transform:translateX(140px);opacity:0}}
/* ---- spiegelwereld ---- */
.roomWrap{position:relative;width:100%;height:min(60vh,420px);border-radius:18px;overflow:hidden;border:3px solid var(--gold2)}
.roomPan{height:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.roomPan::-webkit-scrollbar{display:none}
.roomS{height:100%;width:auto;display:block}
.hs{cursor:pointer}.hs:active{filter:brightness(1.3)}
.darkL{--x:50%;--y:50%;position:absolute;inset:0;background:radial-gradient(circle 95px at var(--x) var(--y),rgba(10,8,30,0) 0,rgba(10,8,30,.55) 70%,rgba(10,8,30,.985) 100%);pointer-events:none}
.rhint{text-align:center;margin:10px 0 4px}
.inv{text-align:center;font-family:var(--f-type);color:var(--gold);font-size:18px}
.wheels{display:flex;justify-content:center;gap:14px;margin:12px 0}
.wheels div{display:flex;flex-direction:column;align-items:center;gap:4px}
.wheels b{font:700 48px var(--f-type);color:var(--ink);background:#fff;border:3px solid var(--gold);border-radius:12px;width:64px;text-align:center}
.wheels button{border:0;background:var(--paper2);border-radius:10px;width:64px;height:36px;font-size:18px;color:var(--ink)}
.books{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin:10px 0}
.books button{height:70px;border:2px solid #2a2010;border-radius:4px;color:#fff;font:700 18px var(--f-type);text-shadow:0 1px 2px #000;padding:0}
.books button.ok{transform:translateY(-8px);box-shadow:0 0 12px var(--gold)}
.cands{display:flex;justify-content:center;gap:16px;margin:14px 0}
.cands button{width:48px;height:110px;border:0;border-radius:6px;background:var(--c);position:relative}
.cands button i{position:absolute;left:50%;top:-22px;width:16px;height:26px;margin-left:-8px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#ffd166;opacity:0;box-shadow:0 0 16px #ffb703}
.cands button.lit i{opacity:1;animation:flick .5s infinite alternate}
@keyframes flick{to{transform:scaleY(1.2)}}
/* speurboekje */
.clues{display:flex;justify-content:center;gap:12px;margin:8px 0 12px;flex-wrap:wrap}
.cl{display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.25);border-radius:14px;padding:8px 12px;min-width:80px;font:600 13px var(--f-type);color:#fff}
.paper .cl{background:#fff;border-color:var(--rule);color:var(--ink)}
.cl i{width:44px;height:44px;border-radius:50%;border:3px solid #1f2a44;display:block}
.cl svg{width:48px;height:44px}
.cl .eyes{font-size:22px;line-height:44px}
.inv .dg{display:block;font-size:15px;color:var(--fog)}.inv .dg b{color:var(--gold);font-size:20px;margin:0 3px}
/* artwork */
#pot i .ii{width:26px;height:26px;object-fit:contain}
.burst .bi{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(244,194,13,.5))}
.av img{filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.roomScene{position:relative;height:100%;aspect-ratio:2/1;background:#2b2466 center/cover no-repeat}
.ro{position:absolute}
.ro img{height:100%;width:auto;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
#hsPaint img{width:100%;height:auto}
.ro .flame{position:absolute;top:-6%;width:7%;height:12%;margin-left:-3.5%;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#fff7c2,#ffb703 60%,rgba(255,183,3,0) 72%);box-shadow:0 0 18px #ffb703;animation:flick .5s infinite alternate}
.pdots{position:absolute;inset:22% 16%;display:flex;align-items:center;justify-content:space-around}
.pdots i{width:18%;aspect-ratio:1;border-radius:50%;border:2px solid #1f2a44}
.pdots.q{color:var(--lila);font:700 34px var(--f-type)}
.invi{height:22px;vertical-align:middle}
/* spiegeljacht */
.seglbl{font-family:var(--f-type);font-size:14px;color:var(--lila);margin:12px 0 4px}
.seg button small{display:block;font-weight:400;font-size:11px;opacity:.85;margin-top:2px}
.sj .sjE{font-size:76px;line-height:1.1;animation:pop .6s ease-out}
.sj .sjT{font-size:26px;font-weight:700;color:var(--gold)}
.magic{position:relative;width:min(80%,300px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid var(--gold);box-shadow:0 0 30px rgba(244,194,13,.6),0 0 60px rgba(183,148,246,.5);animation:ripple 1.2s ease-out}
.magic img{width:100%;height:100%;object-fit:cover}
.magic i{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,0) 55%,rgba(183,148,246,.45) 100%);pointer-events:none}
.album{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.album figure{margin:0}.album img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:3px solid var(--gold)}
.album figcaption{font:500 11px var(--f-type);color:var(--ink2);text-align:center;line-height:1.2;margin-top:2px}