/* Familien Krogsøe v2 – ren, moderne, legende. Ingen eksterne skrifttyper. */
:root{
  --bg:#fbf6ee; --card:#fff; --ink:#1f1a17; --muted:#5c5149; --line:#eadfd0;
  --coral:#d63a1f; --indigo:#2b2d6e; --plum:#5b2a6e; --sun:#ffb347;
  --grad:linear-gradient(135deg,#ff6b4a,#ffb347);
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --r:22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5;font-size:1.05rem;display:flex;flex-direction:column;min-height:100dvh;overflow-x:hidden;position:relative}
h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-.02em}
a{color:inherit}
:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;box-shadow:0 0 0 6px #fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:#fff;padding:.6rem 1rem;border-radius:10px;border:2px solid var(--ink);z-index:100}
.skip:focus{top:8px}

/* Svævende farveklatter i baggrunden */
.blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blobs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:float 18s ease-in-out infinite alternate}
.blobs i:nth-child(1){width:46vmax;height:46vmax;left:-14vmax;top:-18vmax;background:#ffc29a}
.blobs i:nth-child(2){width:38vmax;height:38vmax;right:-12vmax;top:10vh;background:#c9c4ff;animation-delay:-6s}
.blobs i:nth-child(3){width:34vmax;height:34vmax;left:30vw;bottom:-22vmax;background:#ffe3a1;animation-delay:-12s}
@keyframes float{to{transform:translate(4vmax,3vmax) scale(1.12)}}
.fig{position:absolute;transition:transform .6s ease-out}
.fig svg{width:100%;height:100%;display:block}
.fig .drift{animation:figdrift ease-in-out infinite alternate}
.fig .spin{animation:figspin linear infinite}
.fig .bob{animation:figbob ease-in-out infinite alternate}
@keyframes figdrift{from{transform:translate(-30px,10px) rotate(-15deg)}to{transform:translate(40px,-30px) rotate(25deg)}}
@keyframes figspin{to{transform:rotate(360deg)}}
@keyframes figbob{from{transform:translateY(-18px) scale(.9)}to{transform:translateY(18px) scale(1.12) rotate(18deg)}}
.bubble{position:absolute;bottom:-60px;border-radius:50%;border:2.5px solid;opacity:.4;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.7),transparent 60%);animation:rise linear infinite}
@keyframes rise{0%{transform:translate(0,0) scale(.8)}50%{transform:translate(var(--sw),-60vh) scale(1)}100%{transform:translate(calc(var(--sw)*-1),-125vh) scale(1.1);opacity:0}}
.glow{position:absolute;left:0;top:0;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(255,179,71,.28),transparent 65%);will-change:transform}
.shoot{position:absolute;width:120px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#ffb347 70%,#fff);transform:rotate(-30deg);opacity:0;animation:shoot 1.4s ease-out forwards}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(-30deg)}15%{opacity:1}100%{opacity:0;transform:translate(-520px,300px) rotate(-30deg)}}

.shell{position:relative;z-index:1;width:min(1180px,100% - 32px);margin-inline:auto;display:flex;flex-direction:column;flex:1}

/* Topbar */
.top{display:flex;align-items:center;gap:1rem;padding:14px 0 6px}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;min-height:44px}
.logo .mark{width:40px;height:40px;border-radius:12px;background:var(--grad);display:grid;place-items:center;box-shadow:0 6px 16px rgba(255,107,74,.35);transition:transform .4s}
.logo:hover .mark{transform:rotate(72deg)}
.logo svg{width:24px;height:24px}
.btn{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem 1.1rem;border:0;border-radius:999px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;background:var(--indigo);color:#fff;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(43,45,110,.3)}
.btn.sun{background:var(--grad);color:var(--ink)}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}

/* Menu */
.menu{display:flex;align-items:center;gap:.9rem;padding:0;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;margin-left:.6rem}
.menu::-webkit-scrollbar{display:none}
.menu ul{display:flex;gap:.4rem;margin:0;padding:0;list-style:none}
.menu .sep{width:1.5px;align-self:stretch;background:var(--line);margin:6px 0;flex:none}
.menu a{display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.2rem .9rem;border-radius:999px;text-decoration:none;font-weight:600;white-space:nowrap;transition:background .15s}
.menu a:hover{background:rgba(43,45,110,.08)}
.menu a[aria-current="page"]{background:var(--ink);color:#fff}

/* Visninger */
main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:10px 0 18px}
main>section{animation:enter .45s cubic-bezier(.2,.8,.2,1)}
@keyframes enter{from{opacity:0;transform:translateY(14px)}}
main h1:focus{outline:none}
.card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);box-shadow:0 10px 30px rgba(60,40,20,.07)}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;padding:.3rem .8rem;border-radius:999px;background:#fff;border:1.5px solid var(--line)}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:#2bb36a;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.7);opacity:.4}}

/* Hjem */
.home{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.2rem,4vw,3.5rem);align-items:center}
.home h1{font-size:clamp(2.4rem,6.4vw,5rem);font-weight:850;margin:1rem 0 .8rem}
.home h1 em{font-style:normal;color:var(--coral);position:relative;white-space:nowrap}
.home h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:.14em;border-radius:99px;background:var(--grad)}
.sub{color:var(--muted);max-width:32rem;margin:0 0 1.4rem}
.count{padding:1.1rem 1.2rem 1.2rem;max-width:560px}
.count h2{font-size:.95rem;font-weight:700;color:var(--muted);margin-bottom:.8rem;letter-spacing:0}
.cells{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.cell{background:var(--bg);border-radius:16px;padding:.6rem .2rem .45rem;text-align:center}
.num{display:block;font-weight:850;font-size:clamp(1.9rem,5vw,3.1rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.num.pop{animation:pop .35s ease-out}
@keyframes pop{40%{transform:translateY(-6px) scale(1.12);color:var(--coral)}}
.lbl{display:block;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.3rem}
.cell.sec{background:var(--grad)}
.cell.sec .lbl{color:var(--ink)}
.count.final .cell.sec{animation:beat .5s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.06)}}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:.9rem}
.week .d{text-align:center;font-size:.72rem;font-weight:700;color:var(--muted)}
.week .bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:.25rem}
.week .bar i{display:block;height:100%;width:0;background:var(--grad)}
.week .d.now{color:var(--ink)}

/* Kunstkort */
.art{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:10/11;max-height:60vh;margin-inline:auto;width:100%;box-shadow:0 30px 60px rgba(43,45,110,.28);transform-style:preserve-3d;transition:transform .2s}
.art svg{display:block;width:100%;height:100%}
.art .tw,.art .tw2{transform-box:fill-box;transform-origin:center}
.art .rays{transform-origin:200px 270px;animation:spin 80s linear infinite}
.art .ring{transform-origin:200px 270px;animation:ring 3.4s ease-out infinite}
.art .ring:nth-of-type(2){animation-delay:-1.1s}.art .ring:nth-of-type(3){animation-delay:-2.2s}
@keyframes ring{from{transform:scale(.8);opacity:.6}to{transform:scale(1.5);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
.art .star{animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.2}}
.art .cac{transform-box:fill-box;transform-origin:50% 100%;animation:sway 4s ease-in-out infinite alternate}
@keyframes sway{to{transform:rotate(3deg)}}
.art .roll{animation:rollx 14s linear infinite}
.art .tw{animation:turn 1.4s linear infinite}
@keyframes rollx{from{transform:translateX(-40px)}to{transform:translateX(460px)}}
@keyframes turn{to{transform:rotate(360deg)}}
.art .bird{animation:glide 16s linear infinite}
@keyframes glide{from{transform:translate(430px,0)}to{transform:translate(-60px,-24px)}}
.playbtn{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2}

/* Apps */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1.4rem}
.app{display:flex;flex-direction:column;gap:.5rem;padding:1.3rem;text-decoration:none;position:relative;transition:transform .2s,box-shadow .2s}
a.app:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 18px 36px rgba(60,40,20,.14)}
.app .ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.6rem;background:var(--grad)}
.app:nth-child(2) .ico{background:linear-gradient(135deg,#8c85ff,#c9c4ff)}
.app:nth-child(3) .ico{background:linear-gradient(135deg,#2bb3a3,#9ee6da)}
.app h3{font-size:1.3rem}
.app .host{color:var(--muted);font-weight:600;font-size:.9rem;overflow-wrap:anywhere}
.pill{position:absolute;top:1rem;right:1rem;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.15rem .6rem;border-radius:99px;background:#d9f5e5;color:#0d5c33}
.pill.soon{background:#eee7dc;color:#5c5149}
.app.soon{overflow:hidden}
.app.soon::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-100px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:sweep 5s ease-in-out infinite}
.app:nth-child(2).soon::after{animation-delay:-1.7s}.app:nth-child(3).soon::after{animation-delay:-3.4s}
@keyframes sweep{0%,60%{left:-100px}100%{left:120%}}
.app.soon .ico{animation:wob 3s ease-in-out infinite alternate}
@keyframes wob{to{transform:rotate(-8deg) scale(1.08)}}
.ad{position:relative;overflow:hidden;margin-top:1.2rem;padding:1.4rem clamp(1.2rem,4vw,2.2rem);border-radius:var(--r);color:#fff;
  background:linear-gradient(120deg,#2b2d6e,#5b2a6e,#b8325a,#5b2a6e,#2b2d6e);background-size:300% 100%;animation:adshift 10s linear infinite;display:flex;align-items:center;gap:1.4rem;box-shadow:0 14px 34px rgba(91,42,110,.3)}
@keyframes adshift{to{background-position:300% 0}}
.adtag{position:absolute;top:10px;left:14px;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.adtext{position:relative;z-index:1;padding-top:.8rem;flex:1}
.adtext h2{font-size:clamp(1.4rem,4vw,2.2rem);font-weight:850;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.adtext p{margin:.4rem 0;max-width:34rem}
.adtext small{opacity:.9}
.adburst{flex:none;width:96px;aspect-ratio:1;display:grid;place-items:center;background:var(--sun);color:var(--coral);font-weight:900;font-size:1.3rem;transform:rotate(-12deg);
  clip-path:polygon(50% 0,61% 20%,82% 9%,78% 33%,100% 38%,82% 55%,96% 78%,72% 76%,64% 100%,50% 84%,36% 100%,28% 76%,4% 78%,18% 55%,0 38%,22% 33%,18% 9%,39% 20%);animation:burstspin 6s ease-in-out infinite alternate}
@keyframes burstspin{from{transform:rotate(-16deg) scale(.95)}to{transform:rotate(10deg) scale(1.1)}}
.adrocket{position:absolute;bottom:-8px;left:0;font-size:1.8rem;animation:rocket 7s linear infinite;pointer-events:none}
@keyframes rocket{from{transform:translate(-40px,20px) rotate(-35deg)}to{transform:translate(110vw,-80px) rotate(-35deg)}}
.viewhead h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:850}
.viewhead p{color:var(--muted);margin:.4rem 0 0}

.muted{color:var(--muted);margin:0}
.cl{display:flex;align-items:center;gap:.6rem;min-height:48px;padding:.4rem .9rem;border-radius:14px;background:var(--bg);text-decoration:none;font-weight:600;overflow-wrap:anywhere;margin-top:.5rem}
.cl:hover{background:#fff;box-shadow:0 6px 16px rgba(60,40,20,.1)}
dialog:has(.contact){width:min(94vw,600px)}
.contact{text-align:center;padding:2.2rem clamp(1.4rem,6vw,3rem) 2.4rem;min-height:min(520px,86dvh);overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.sheet.contact{overflow:hidden}
.contact h2{padding-right:0;font-size:2rem}
.contact .muted{margin:.5rem 0 1.4rem}
.contact>*:not(.x):not(.sky){position:relative}
.contact .sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.sky{transition:transform .25s ease-out;inset:-12px!important}
.plane{position:absolute;left:0;top:0;width:calc(28px*var(--sc,1));offset-path:path("M-30 260 C 120 20, 240 420, 400 140 S 640 -20, 820 120");offset-rotate:auto;animation:fly linear infinite;filter:drop-shadow(0 3px 3px rgba(0,0,0,.18));opacity:.85}
@keyframes fly{from{offset-distance:0%}to{offset-distance:100%}}
.sp{position:absolute;font-size:1.3rem;animation:twirl 4s ease-in-out infinite alternate}
@keyframes twirl{from{transform:translateY(0) rotate(-12deg) scale(.9)}to{transform:translateY(-18px) rotate(14deg) scale(1.15)}}
.fling{position:absolute;left:50%;top:130px;font-size:1.5rem;opacity:0;animation:fling2 1.7s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes fling2{0%{opacity:1;transform:translate(-50%,0) scale(.4)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),var(--dy)) rotate(420deg) scale(1.2)}}
.env{animation:bobenv 3s ease-in-out 1.4s infinite alternate;width:190px;height:122px;margin:4.2rem auto 1.6rem;position:relative;flex:none}
.env>*{position:absolute;inset:0}
.env .back{background:#f29a45;border-radius:12px}
.env .letter{inset:auto 14px 12px;height:96px;background:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.18);display:grid;place-items:center;font-weight:800;font-size:1.3rem;z-index:1;animation:letter .8s .55s cubic-bezier(.2,1.3,.4,1) forwards}
.env .front{background:#ffb347;border-radius:12px;clip-path:polygon(0 100%,0 28%,50% 62%,100% 28%,100% 100%);z-index:2}
.env .flap{bottom:auto;height:62%;background:#ff7a4a;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;z-index:3;animation:flap .5s .15s ease-in forwards}
@keyframes bobenv{to{transform:translateY(-8px) rotate(-2deg)}}
@keyframes letter{to{transform:translateY(-70px) rotate(-3deg)}}
@keyframes flap{50%{z-index:3}51%{z-index:0}to{transform:perspective(500px) rotateX(180deg);z-index:0}}
.copy{margin-top:1rem;width:100%;justify-content:center}
.cl.big{justify-content:center;font-size:1.15rem;min-height:60px;background:var(--grad);margin-top:1rem}
.cl.nope{animation:shake .12s linear 4}
@keyframes shake{25%{transform:translateX(4px)}75%{transform:translateX(-4px)}}

/* Dialoger */
dialog{border:0;padding:0;background:none;width:min(94vw,720px);max-height:94dvh;overflow:visible;color:var(--ink)}
dialog::backdrop{background:rgba(31,26,23,.55);backdrop-filter:blur(6px)}
dialog[open]{animation:dpop .3s cubic-bezier(.2,1.3,.4,1)}
@keyframes dpop{from{transform:scale(.9) translateY(16px);opacity:0}}
.sheet{background:#fff;border-radius:26px;padding:1.4rem;max-height:94dvh;overflow:auto;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.sheet h2{font-size:1.6rem;padding-right:3.5rem}
.x{position:absolute;top:12px;right:12px;min-width:44px;min-height:44px;padding:0;justify-content:center;font-size:1.2rem}
.posters{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;margin-top:1rem}
.poster{background:var(--bg);border-radius:18px;padding:.9rem;text-align:center}
.poster svg{width:64px;height:64px;display:block;margin:0 auto .3rem}
.poster h3{font-size:1.05rem}
.poster p{margin:0 0 .3rem;color:var(--muted);font-size:.9rem}
.poster .cl{background:#fff;font-size:.88rem;justify-content:center}
.note{font-size:.9rem;color:var(--muted);margin:.9rem 0 0}

/* Spil */
.game canvas{display:block;width:100%;height:auto;border-radius:16px;margin-top:.8rem;background:#2b2d6e;touch-action:manipulation;cursor:pointer}
.gstats{display:flex;justify-content:space-between;gap:1rem;font-weight:700;margin-top:.7rem}
.gstats output{font-variant-numeric:tabular-nums}

footer{position:relative;z-index:1;text-align:center;color:var(--muted);font-size:.88rem;padding:6px 16px 14px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140px);z-index:100;background:var(--ink);color:#fff;border-radius:14px;padding:.7rem 1.1rem;max-width:90vw;transition:transform .3s;text-align:center}
.toast.show{transform:translate(-50%,0)}
.confetti{position:fixed;top:-12px;width:10px;height:14px;z-index:90;pointer-events:none;animation:drop linear forwards}
@keyframes drop{to{transform:translate(var(--dx),105vh) rotate(720deg)}}

@media (max-height:640px){
  .env{margin:2.6rem auto .8rem;zoom:.75}
  .contact{padding:1.2rem 1.4rem 1.4rem;min-height:0}
  .contact .muted{margin-bottom:.8rem}
}
@media (max-width:860px){
  .home{grid-template-columns:1fr}
  .art{max-height:34vh;aspect-ratio:16/10}
  .art svg{position:absolute;inset:0;height:100%}
  main{justify-content:flex-start}
  .logo span{font-size:1.05rem}
}
@media (max-width:600px){
  .adburst{display:none}
}
@media (max-width:540px){
  .logo span:not(.mark){display:none}
  .top{gap:.5rem}
  .menu{margin-left:0}
}
@media (max-width:480px){
  body{font-size:1rem}
  .btn span.t{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Reklame: Krogsøe Foto */
.ad.foto{background:linear-gradient(115deg,#1f1a2e,#3b2342,#7a2f4f);background-size:100% 100%;animation:none;min-height:230px;padding-right:min(46%,360px)}
.ad.foto .adtext{padding-top:1.2rem}
.ad.foto em{font-style:normal;color:#ffb347;position:relative}
.ad.foto .btn{margin-top:.6rem}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:3;animation:flashpop 7s ease-out infinite}
@keyframes flashpop{0%,92%{opacity:0}93%{opacity:.85}100%{opacity:0}}
.polas{position:absolute;right:clamp(10px,3vw,30px);top:50%;width:min(40%,320px);height:200px;transform:translateY(-50%);pointer-events:none}
.pola{position:absolute;margin:0;width:112px;background:#fff;padding:7px 7px 4px;border-radius:4px;box-shadow:0 10px 24px rgba(0,0,0,.4);color:var(--ink);text-align:center;font-weight:700;font-size:.78rem;animation:polaf 5s ease-in-out infinite alternate}
.pola .ph{display:block;height:92px;border-radius:2px}
.pola figcaption{padding:.25rem 0}
.pola.p1{left:0;top:22px;--r:-9deg;animation-delay:-1s}
.pola.p2{left:calc(50% - 56px);top:2px;--r:3deg;z-index:2}
.pola.p3{right:0;top:36px;--r:11deg;animation-delay:-2.5s}
.ph.a{background:linear-gradient(160deg,#ffd9e8,#f58aa8 60%,#8a3b6b)}
.ph.b{background:linear-gradient(160deg,#fff0b8,#ffb347 55%,#d6572f)}
.ph.c{background:linear-gradient(160deg,#d6e4ff,#8c85ff 55%,#2b2d6e)}
@keyframes polaf{from{transform:rotate(var(--r)) translateY(-6px)}to{transform:rotate(calc(var(--r) + 4deg)) translateY(8px)}}
.shutter{position:absolute;right:-26px;bottom:-26px;width:110px;opacity:.18;animation:burstspin 14s linear infinite}
@keyframes spinfull{to{transform:rotate(360deg)}}
.shutter{animation-name:spinfull}
.hrt{position:absolute;bottom:-10px;color:#ff6b8a;font-size:1.3rem;opacity:0;animation:hrt 6s ease-in infinite;pointer-events:none}
@keyframes hrt{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translateY(-230px) scale(1.2);opacity:0}}
@media (max-width:700px){
  .ad.foto{padding-right:clamp(1.2rem,4vw,2.2rem);flex-direction:column;align-items:flex-start}
  .polas{position:relative;right:auto;top:auto;transform:none;width:100%;height:150px;margin-top:.4rem}
  .pola{width:92px}.pola .ph{height:70px}
  .pola.p2{left:calc(50% - 46px)}
}

/* Karrusel + Ønskelisten-reklame */
.adslot{position:relative;margin-top:1.2rem}
.slides{display:grid}
.slides>.ad{grid-area:1/1;margin-top:0;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.slides>.ad.on{opacity:1;visibility:visible}
.adctl{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:2px;background:rgba(0,0,0,.35);border-radius:99px;padding:0 6px}
.adctl button{min-width:28px;min-height:28px;border:0;background:none;color:#fff;cursor:pointer;display:grid;place-items:center;font-size:.7rem}
.addot::before{content:"";width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);transition:transform .2s,background .2s}
.addot[aria-current]::before{background:#ffb347;transform:scale(1.3)}
.ad.wish{background:linear-gradient(120deg,#0f4c4a,#1f7a74 55%,#5a49c2)}
.giftart{position:absolute;right:clamp(10px,3vw,34px);top:50%;width:min(36%,250px);transform:translateY(-50%);pointer-events:none}
.giftart svg{width:100%;display:block;overflow:visible}
.bal{transform-box:fill-box;transform-origin:50% 100%;animation:balbob 4s ease-in-out infinite alternate}
.bal.b2{animation-delay:-1.3s}.bal.b3{animation-delay:-2.4s}
@keyframes balbob{from{transform:translateY(8px) rotate(-5deg)}to{transform:translateY(-12px) rotate(5deg)}}
.gbox{transform-box:fill-box;transform-origin:50% 100%;animation:gbounce 2.6s ease-in-out infinite}
@keyframes gbounce{0%,100%{transform:scale(1)}45%{transform:scale(1.04,.96)}60%{transform:scale(.98,1.04)}}
.conf{position:absolute;width:8px;height:12px;border-radius:2px;animation:confl 3.4s ease-out infinite;opacity:0}
.conf.c1{left:30%;top:60%;background:#ffd35a}.conf.c2{left:55%;top:55%;background:#ff7aa2;animation-delay:-.9s}
.conf.c3{left:70%;top:60%;background:#2bb3a3;animation-delay:-1.8s}.conf.c4{left:45%;top:62%;background:#b7a8ff;animation-delay:-2.6s}
@keyframes confl{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--cx,20px),-120px) rotate(300deg)}}
.conf.c2{--cx:-30px}.conf.c3{--cx:40px}.conf.c4{--cx:-10px}
@media (max-width:700px){
  .giftart{position:relative;right:auto;top:auto;transform:none;width:60%;margin:0 auto}
  .adctl{bottom:4px}
}

/* Interesser */
.ints{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.int{position:relative;animation:enter .5s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--d)}
.intbtn{width:100%;height:100%;min-height:200px;border:0;border-radius:var(--r);padding:1.1rem 1rem 1.2rem;background:linear-gradient(150deg,var(--c1),var(--c2));color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:0 10px 26px rgba(60,40,20,.1);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;gap:.35rem;overflow:hidden;position:relative}
.intbtn:hover{transform:translateY(-8px) rotate(-1.2deg);box-shadow:0 20px 40px rgba(60,40,20,.2)}
.intbtn:active,.intbtn.go{transform:scale(.97)}
.intbtn::after{content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.35)}
.int .ic{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.7);font-size:2.2rem;margin-bottom:.4rem;transform-origin:50% 60%}
.int h3{font-size:1.4rem;font-weight:850}
.int p{margin:0;font-size:.95rem;position:relative;z-index:1}
.intlink{position:absolute;left:1rem;bottom:.9rem;z-index:2;font-weight:700;font-size:.9rem;color:var(--ink);background:rgba(255,255,255,.85);padding:.2rem .7rem;border-radius:99px;text-decoration:none}
.intlink:hover{background:#fff}
.int:has(.intlink) .intbtn{padding-bottom:3.2rem}
.ic.swing{animation:swingi 2.4s ease-in-out infinite alternate}
.ic.pulse{animation:pulsei 1.6s ease-in-out infinite}
.ic.rise{animation:risei 2s ease-in-out infinite alternate}
.ic.strum{animation:strumi .5s linear infinite}
.ic.hop{animation:hopi 1.4s cubic-bezier(.3,.7,.5,1) infinite}
.ic.steam{animation:steami 3s ease-in-out infinite alternate}
.ic.flick{animation:flicki 2.6s steps(1) infinite}
.ic.snap{animation:snapi 3s ease-in-out infinite}
@keyframes swingi{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes pulsei{50%{transform:scale(1.2)}}
@keyframes risei{from{transform:translateY(4px) rotate(-6deg)}to{transform:translateY(-8px) rotate(6deg)}}
@keyframes strumi{25%{transform:rotate(-2deg) translateX(-1px)}75%{transform:rotate(2deg) translateX(1px)}}
@keyframes hopi{0%,100%{transform:translateY(0) scale(1.05,.92)}40%{transform:translateY(-12px) scale(.95,1.08)}}
@keyframes steami{from{transform:scale(1) rotate(-4deg)}to{transform:scale(1.12) rotate(5deg)}}
@keyframes flicki{0%,60%,100%{opacity:1}20%{opacity:.55}40%{opacity:.85}}
@keyframes snapi{0%,86%,100%{transform:scale(1)}90%{transform:scale(1.25);background:#fff}}
.ipart{position:absolute;left:50%;top:40%;z-index:5;pointer-events:none;animation:ipart 1.2s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes ipart{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(300deg) scale(1.2)}}
@media (max-width:900px){.ints{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.intbtn{min-height:170px;padding:.9rem}.int p{font-size:.88rem}}