:root{
  --red:#C41C23; --red-deep:#8E1218; --red-soft:#E94B52;
  --berry:#FF3D8B; --coral:#FF6F8E;
  --pink:#FFB5CD; --pink-soft:#FFE5EE; --pink-cream:#FFF7FA; --cream:#FFF9F7;
  --gold:#FFC94D; --gold-deep:#F7A93A; --sky:#BAE2F7;
  --ink:#1A1316; --ink-mid:#5C4B52; --white:#fff;
  --th:'Prompt',system-ui,sans-serif;
  --fun:'Kanit','Prompt',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--th); color:var(--ink);
  background:
    radial-gradient(70% 60% at 8% 6%, rgba(143,217,245,.55), transparent 55%),
    radial-gradient(60% 55% at 92% 10%, rgba(199,155,239,.45), transparent 55%),
    radial-gradient(70% 60% at 96% 55%, rgba(255,61,139,.3), transparent 55%),
    radial-gradient(80% 70% at 10% 70%, rgba(127,217,168,.35), transparent 55%),
    radial-gradient(120% 100% at 55% 112%, rgba(255,201,77,.4), transparent 55%),
    linear-gradient(165deg, #fff 0%, var(--pink-cream) 42%, var(--pink-soft) 100%);
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
}
/* fine grain overlay — kills the "smooth AI gradient" look, adds tactility */
body::after{content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* glossy 3D idol+ trinkets — ambient floating decoration around edges */
.deco3d{position:fixed;inset:0;z-index:0;pointer-events:none}
.deco3d .d{position:absolute;filter:drop-shadow(0 6px 10px rgba(196,28,35,.18));
  animation:trinket var(--td,6s) ease-in-out infinite;animation-delay:var(--tdd,0s);opacity:.9}
@keyframes trinket{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-12px) rotate(6deg)}}
.deco3d .d1{width:min(13vw,92px);top:5%;left:3%;--td:5.5s}
.deco3d .d2{width:min(9vw,64px);top:18%;right:4%;--td:6.5s;--tdd:-1s}
.deco3d .d3{width:min(12vw,82px);bottom:20%;left:2%;--td:7s;--tdd:-2s}
.deco3d .d4{width:min(10vw,72px);top:42%;right:2%;--td:6s;--tdd:-1.5s}
.deco3d .d5{width:min(8vw,54px);bottom:9%;right:10%;--td:5s;--tdd:-.5s}
@media (orientation:portrait){
  .deco3d .d1{width:min(18vw,80px);top:13%;left:2%} .deco3d .d2{width:min(13vw,56px);top:8%;right:3%}
  .deco3d .d3{display:none} .deco3d .d4{width:min(14vw,60px);top:37%;right:1%} .deco3d .d5{width:min(11vw,48px);bottom:15%;right:5%}
}

/* cute cat mascot — floating decoration, bottom-left */
.mascot{position:fixed;left:1.5vw;bottom:1vh;width:min(13vw,110px);z-index:1;pointer-events:none;
  filter:drop-shadow(0 8px 14px rgba(196,28,35,.2));animation:mascotBob 4s ease-in-out infinite}
@keyframes mascotBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@media (orientation:portrait){ .mascot{width:min(22vw,110px);left:1vw;bottom:.5vh} }

/* drifting candy sparkles */
.sparkles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sparkles i{position:absolute;opacity:.0;line-height:0;color:var(--pink);
  animation:drift var(--dur,9s) linear infinite;animation-delay:var(--dl,0s);
  filter:drop-shadow(0 2px 4px rgba(255,61,139,.3))}
.sparkles i .ic{width:var(--sz,18px);height:var(--sz,18px)}
.sparkles i:nth-child(3n){color:var(--gold)}
.sparkles i:nth-child(3n+1){color:var(--coral)}
@keyframes drift{
  0%{opacity:0;transform:translateY(20px) rotate(0) scale(.6)}
  15%{opacity:.9}
  85%{opacity:.9}
  100%{opacity:0;transform:translateY(-70px) rotate(180deg) scale(1)}
}

/* ---------- stage (landscape default) ---------- */
.stage{position:relative;height:100dvh;width:100vw;display:grid;
  grid-template-columns:minmax(240px,1fr) min(52vw,92dvh);
  align-items:center;gap:2vw;padding:2.5dvh 3vw}
.deco{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.9) 2px,transparent 3px),radial-gradient(circle,var(--pink) 2px,transparent 3px);
  background-size:120px 120px,200px 200px;background-position:0 0,60px 80px;opacity:.45}

.side{position:relative;z-index:1;display:flex;flex-direction:column;gap:2.2dvh;
  min-width:0;max-width:520px;justify-self:end;padding-left:1vw}
.brand{display:flex;align-items:flex-start;gap:12px}
/* glassmorphic 7.7 badge */
.brand__77{flex:none;position:relative;display:grid;place-items:center;width:min(11dvh,62px);height:min(11dvh,62px);
  border-radius:20px;transform:rotate(-5deg);
  background:linear-gradient(150deg, rgba(255,120,150,.85), rgba(196,28,35,.9));
  box-shadow:0 8px 20px rgba(196,28,35,.35), inset 0 2px 4px rgba(255,255,255,.5), inset 0 -6px 12px rgba(120,8,20,.4)}
.brand__77 b{font-family:var(--fun);font-weight:800;font-size:min(4.2dvh,25px);color:#fff;
  text-shadow:0 1px 3px rgba(120,8,20,.5)}
.brand__77::before{content:"";position:absolute;top:14%;left:16%;width:44%;height:26%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.85),transparent)}
/* title — clean single fill + layered shadow (no muddy double-stroke) */
/* readable sticker title: solid red fill + white outline + hard shadow */
.brand__title{font-family:var(--fun);font-weight:800;line-height:1.05;
  font-size:min(7.4dvh,46px);letter-spacing:0;color:var(--red);
  -webkit-text-stroke:5px #fff;paint-order:stroke fill;
  text-shadow:3px 3px 0 rgba(196,28,35,.25)}
.brand__title span{color:var(--gold-deep)}
.brand__sub{margin-top:7px;font-weight:600;color:var(--ink-mid);font-size:min(2.3dvh,15px)}

/* steps — clean glass chips with duotone SVG icon badge */
.steps{list-style:none;display:flex;flex-direction:column;gap:1.1dvh}
/* sticker-style cards: crisp border + hard offset shadow (hand-made, not floaty) */
.steps li{display:flex;gap:12px;align-items:center;background:#fff;
  border:2px solid var(--ink);border-radius:16px;
  padding:1.1dvh 15px;box-shadow:3px 3px 0 var(--ink)}
.steps__ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  color:#fff;background:linear-gradient(140deg,#ff6f8e,var(--red));
  box-shadow:0 4px 10px rgba(196,28,35,.3), inset 0 1px 2px rgba(255,255,255,.5)}
.steps__ic .ic{filter:drop-shadow(0 1px 1px rgba(120,8,20,.4))}
.steps span{font-weight:600;font-size:min(2.1dvh,14px);line-height:1.3}
.steps i{display:block;font-style:normal;font-weight:500;color:var(--red-soft);font-size:.86em;margin-top:2px}
.ic{display:inline-block;vertical-align:middle}
.mode__ic{display:inline-flex;vertical-align:-3px;margin-right:5px}

/* idol+ chibi hero fills the left column (desktop) */
.idol-hero{width:min(24dvh,220px);margin-top:.5dvh;align-self:center;
  filter:drop-shadow(0 12px 20px rgba(196,28,35,.22));animation:heroFloat 4.5s ease-in-out infinite}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.poweredby{display:flex;align-items:center;gap:6px;opacity:.75;text-decoration:none;
  font-size:11px;font-weight:600;color:var(--ink-mid);pointer-events:none}
.poweredby img{height:20px}

/* ---------- wheel ---------- */
.wheelwrap{position:relative;z-index:1;display:grid;place-items:center;height:100%;min-width:0;width:100%}
.wheel{position:relative;width:min(100%,92dvh,760px);aspect-ratio:1;display:grid;place-items:center;
  animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-10px) rotate(.6deg)}}
@media (prefers-reduced-motion:reduce){.wheel{animation:none}.sparkles,.wheel__glow{display:none}}
.wheel__glow{position:absolute;inset:-8%;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,61,139,.4), rgba(255,201,77,.4), rgba(186,226,247,.4), rgba(255,61,139,.4));
  filter:blur(22px);animation:hue 8s linear infinite}
@keyframes hue{to{transform:rotate(360deg)}}
/* glossy candy bezel ring behind the canvas */
.wheel::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:1;
  background:conic-gradient(from -90deg, var(--gold), #fff5cc, var(--gold-deep), #fff, var(--gold));
  box-shadow:0 16px 44px rgba(196,28,35,.32), inset 0 0 20px rgba(255,255,255,.7)}
.wheel::after{content:"";position:absolute;inset:2.4%;border-radius:50%;z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,.6), transparent 30%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.55);pointer-events:none}
.wheel__cv{position:absolute;inset:5%;width:90%;height:90%;border-radius:50%;transform:rotate(0deg);will-change:transform;z-index:2;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}

.bulbs{position:absolute;inset:0;z-index:3}
.bulbs i{position:absolute;top:50%;left:50%;width:3.2%;height:3.2%;margin:-1.6% 0 0 -1.6%;border-radius:50%;
  background:#fff;box-shadow:0 0 6px #fff,0 0 2px var(--gold);transition:background .1s}
.bulbs i.on{background:var(--gold);box-shadow:0 0 12px var(--gold),0 0 5px #fff}

.pointer{position:absolute;top:-1.5%;left:50%;width:8%;transform:translateX(-50%);z-index:4;
  filter:drop-shadow(0 4px 5px rgba(196,28,35,.4));transform-origin:50% 20%}
.pointer.kick{animation:kick .09s ease-out}
@keyframes kick{50%{transform:translateX(-50%) rotate(-11deg)}}

/* SPIN — clean bold candy button: white outline + gold ring + glossy red */
.spin{position:absolute;z-index:5;width:30%;aspect-ratio:1;border-radius:50%;border:none;cursor:pointer;
  padding:0;color:#fff;font-family:var(--fun);font-weight:800;overflow:hidden;
  display:grid;place-items:center;isolation:isolate;
  transition:transform .16s cubic-bezier(.2,1.5,.4,1);
  background:
    radial-gradient(60% 44% at 40% 26%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
    radial-gradient(130% 130% at 35% 24%, #ff6f8e, var(--red) 55%, var(--red-deep) 100%);
  box-shadow:
    0 10px 22px rgba(142,18,24,.45),
    0 0 0 6px #fff,               /* crisp white outline */
    0 0 0 11px var(--gold),       /* gold ring */
    inset 0 5px 12px rgba(255,255,255,.4), inset 0 -12px 18px rgba(120,8,20,.5)}
.spin__inner{position:relative;z-index:2;display:grid;place-content:center;text-align:center}
.spin__t{display:block;font-size:min(4dvh,27px);letter-spacing:1.5px;line-height:1;
  text-shadow:0 2px 0 rgba(120,8,20,.55)}
.spin__sub{display:block;font-size:min(1.6dvh,11px);font-weight:500;letter-spacing:.5px;margin-top:2px;opacity:.95}
.spin__shine{position:absolute;z-index:3;top:12%;left:20%;width:44%;height:24%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,.85), transparent);transform:rotate(-18deg)}
.spin:not(:disabled):hover{transform:scale(1.06)}
.spin:not(:disabled):active{transform:scale(.94)}
.spin:disabled{cursor:default;filter:saturate(.82) brightness(.97)}
.spin.pulse{animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 10px 22px rgba(142,18,24,.45),0 0 0 6px #fff,0 0 0 11px var(--gold),inset 0 5px 12px rgba(255,255,255,.4),inset 0 -12px 18px rgba(120,8,20,.5),0 0 0 11px rgba(255,201,77,.5)}
  50%{box-shadow:0 10px 22px rgba(142,18,24,.45),0 0 0 6px #fff,0 0 0 11px var(--gold),inset 0 5px 12px rgba(255,255,255,.4),inset 0 -12px 18px rgba(120,8,20,.5),0 0 0 22px rgba(255,201,77,0)}}

.stage.shake{animation:shake .4s linear infinite}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-1px)}}

/* ---------- GRAND win popup ---------- */
.win{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;
  background:rgba(142,18,24,.42);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.win[hidden]{display:none}
.win.show{opacity:1}
.win__rays{position:absolute;inset:0;z-index:-1;
  background:conic-gradient(from 0deg,rgba(255,181,205,.28) 0 10deg,transparent 10deg 20deg);
  animation:rays 14s linear infinite}
@keyframes rays{to{transform:rotate(360deg)}}
.win__card{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#fff,var(--pink-cream));
  border:3px solid #fff;border-radius:30px;padding:22px 30px 26px;
  width:min(90vw,380px);box-shadow:0 24px 70px rgba(142,18,24,.45);
  transform:scale(.4);opacity:0}
.win.show .win__card{animation:pop .6s cubic-bezier(.18,1.3,.4,1) forwards}
@keyframes pop{to{transform:scale(1);opacity:1}}
.win__ribic{display:inline-flex;vertical-align:-3px;margin-right:5px}
.win__ribbon{display:inline-flex;align-items:center;font-family:var(--fun);font-weight:700;color:#fff;font-size:16px;
  background:linear-gradient(100deg,#ff6f8e,var(--red));padding:6px 20px;border-radius:999px;
  box-shadow:0 6px 16px rgba(196,28,35,.35);margin-bottom:6px}
/* fx box: fixed max size; the effect's aspect ratio drives the box shape (set
   by JS via --fxar) so a tall effect gets a tall box → nothing is cropped. */
.win__fxwrap{position:relative;flex:none;
  width:min(78vw,300px); max-height:min(46vh,340px);
  aspect-ratio:var(--fxar,1);
  margin:6px auto 10px;display:flex;align-items:center;justify-content:center;border-radius:20px}
.win__fxwrap::before{content:"";position:absolute;inset:-4%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(255,215,120,.4),transparent 70%);animation:halo 2.4s ease-in-out infinite}
@keyframes halo{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.08);opacity:1}}
/* fill the (correctly-shaped) box — no crop because the box already matches the effect */
.win__fx{display:block;position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(196,28,35,.25))}
.win__name{font-family:var(--fun);font-weight:600;color:var(--ink-mid);font-size:16px;margin-top:4px;letter-spacing:.3px}
.win__amt{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:-2px}
.win__prize{font-family:var(--fun);font-weight:700;color:var(--red);font-size:min(15vw,76px);line-height:1;
  text-shadow:2px 2px 0 #fff,4px 4px 0 var(--pink)}
.win__candy{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(255,61,139,.35));
  animation:candyBob 2s ease-in-out infinite}
@keyframes candyBob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-5px) rotate(6deg)}}
.win__unit{font-family:var(--fun);font-weight:700;color:var(--gold-deep);font-size:22px;letter-spacing:2px}
.win__note{margin-top:8px;font-size:13px;color:var(--ink-mid)}
.win__close{margin-top:16px;border:none;cursor:pointer;font-family:var(--fun);font-weight:700;font-size:16px;color:#fff;
  background:linear-gradient(100deg,#ff6f8e,var(--red));border-radius:16px;padding:12px 30px;
  box-shadow:0 8px 20px rgba(196,28,35,.4);transition:transform .12s}
.win__close:active{transform:translateY(2px) scale(.97)}

.confetti{position:fixed;inset:0;z-index:65;pointer-events:none}
.confetti[hidden]{display:none}

/* LINE in-app browser gate */
.linegate{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;
  background:rgba(142,18,24,.5);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.linegate[hidden]{display:none}
.linegate.show{opacity:1}
.linegate__card{background:linear-gradient(180deg,#fff,var(--pink-cream));border:3px solid #fff;border-radius:24px;
  padding:26px 26px 22px;width:min(90vw,360px);text-align:center;box-shadow:0 22px 60px rgba(142,18,24,.4)}
.linegate__ic{display:inline-grid;place-items:center;width:52px;height:52px;margin:0 auto 10px;border-radius:15px;
  color:#fff;background:linear-gradient(140deg,#ff6f8e,var(--red));box-shadow:0 8px 18px rgba(196,28,35,.35)}
.linegate__ic .ic{width:28px;height:28px}
.linegate__t{font-family:var(--fun);font-weight:700;font-size:20px;color:var(--red)}
.linegate__s{font-size:14px;color:var(--ink-mid);margin:6px 0 16px;line-height:1.5}
.linegate .btn{width:100%}
.linegate__hint{font-size:12px;color:var(--ink-mid);margin-top:12px;line-height:1.5}
.linegate__hint b{color:var(--red)}

/* ---------- slots counter + mode toggle ---------- */
.wheeltop{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:1.4dvh;z-index:2}
.slots{font-family:var(--fun);font-weight:600;font-size:14px;color:var(--red);
  background:#fff;border:2px solid var(--gold);border-radius:999px;padding:6px 16px;
  box-shadow:0 4px 12px rgba(196,28,35,.12)}
.slots[hidden]{display:none}
.slots b{font-size:18px;color:var(--berry)}
.slots.slots--out{color:var(--ink-mid);border-color:var(--ink-line)}
.slots.slots--out b{color:var(--ink-mid)}
.modes{display:flex;gap:6px;background:rgba(255,255,255,.7);border-radius:999px;padding:4px;
  border:1.5px solid var(--pink-soft)}
.mode{border:none;cursor:pointer;font-family:var(--fun);font-weight:600;font-size:13.5px;
  border-radius:999px;padding:7px 15px;background:transparent;color:var(--ink-mid);transition:.15s}
.mode.on{background:var(--grad,linear-gradient(100deg,#ff6f8e,var(--red)));color:#fff;
  box-shadow:0 4px 12px rgba(196,28,35,.3)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:9dvh;transform:translateX(-50%) translateY(20px);z-index:80;
  background:rgba(26,19,22,.92);color:#fff;font-family:var(--fun);font-weight:600;font-size:14px;
  padding:11px 22px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.3);
  opacity:0;pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- VJ dialog ---------- */
.vjdlg{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;
  background:rgba(142,18,24,.4);backdrop-filter:blur(5px);opacity:0;transition:opacity .25s}
.vjdlg[hidden]{display:none}
.vjdlg.show{opacity:1}
.vjdlg__card{background:linear-gradient(180deg,#fff,var(--pink-cream));border:3px solid #fff;
  border-radius:26px;padding:26px 28px;width:min(90vw,360px);text-align:center;
  box-shadow:0 22px 60px rgba(142,18,24,.4);transform:scale(.85);transition:transform .3s cubic-bezier(.2,1.3,.4,1)}
.vjdlg.show .vjdlg__card{transform:scale(1)}
.vjdlg__ic{display:inline-grid;place-items:center;width:56px;height:56px;margin:0 auto 8px;border-radius:16px;
  color:#fff;background:linear-gradient(140deg,#ff6f8e,var(--red));
  box-shadow:0 8px 18px rgba(196,28,35,.35),inset 0 2px 4px rgba(255,255,255,.4)}
.vjdlg__ic .ic{width:30px;height:30px}
.vjdlg__t{font-family:var(--fun);font-weight:700;font-size:20px;color:var(--red)}
.confirm__big{font-family:var(--fun);font-weight:600;font-size:19px;color:var(--ink);margin:12px 0 4px}
.confirm__big b{color:var(--berry);font-size:22px}
.confirm__note{font-size:14px;color:var(--ink-mid);margin-bottom:4px}
.vjdlg__s{font-size:13px;color:var(--ink-mid);margin:5px 0 16px}
.vjdlg__in{width:100%;font-family:var(--fun);font-size:17px;text-align:center;
  padding:13px 14px;border:2px solid var(--pink);border-radius:14px;outline:none;color:var(--ink)}
.vjdlg__in:focus{border-color:var(--berry);box-shadow:0 0 0 4px rgba(255,61,139,.15)}
.vjdlg__row{display:flex;gap:10px;margin-top:16px}
.vjdlg__row .btn{flex:1}

/* ---------- shared candy buttons (win popup + dialogs) ---------- */
.btn{border:none;cursor:pointer;font-family:var(--fun);font-weight:700;font-size:15.5px;
  border-radius:15px;padding:13px 22px;transition:transform .12s,box-shadow .15s;letter-spacing:.3px}
.btn:active{transform:translateY(2px) scale(.98)}
.btn--save{color:#fff;
  background:radial-gradient(120% 120% at 30% 20%, var(--coral), var(--berry) 45%, var(--red) 100%);
  box-shadow:0 7px 16px rgba(196,28,35,.4), inset 0 2px 4px rgba(255,255,255,.4), 0 0 0 2px rgba(255,255,255,.7);}
.btn--save:hover{filter:brightness(1.05)}
.btn--again{color:var(--red);background:#fff;
  box-shadow:0 4px 10px rgba(196,28,35,.12), inset 0 0 0 2px var(--pink)}
.btn--again:hover{background:var(--pink-cream)}

/* ---------- PORTRAIT (phones/tablets held upright) — stack, no lock ---------- */
@media (orientation:portrait){
  .stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:1dvh;
    padding:2.4dvh 5vw 2dvh;justify-items:center}
  .side{justify-self:center;align-items:center;text-align:center;gap:1.6dvh;max-width:94vw;width:100%}
  .brand{align-items:center}
  .brand__title{font-size:min(6.2vh,40px)}
  /* three equal compact chips in one clean row */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
  .steps li{flex-direction:column;text-align:center;gap:5px;padding:11px 8px 12px}
  .steps__ic{width:32px;height:32px}
  .steps span{font-size:11.5px;line-height:1.25}
  .steps i{font-size:.82em;margin-top:1px}
  /* fill the screen: wheeltop up top, wheel grows to use the rest of the height */
  .wheelwrap{display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:0;height:100%;min-height:0;align-self:stretch}
  .wheeltop{flex:none;margin-top:0;margin-bottom:1.5dvh}
  .wheel{width:min(98vw,64dvh,640px);flex:none;margin:auto 0}
  /* hero → small floating accent in the corner; logo → bottom center */
  .idol-hero{position:fixed;right:-2vw;bottom:-1vh;width:min(30vw,150px);margin:0;z-index:1;opacity:.9;pointer-events:none}
  .poweredby{position:fixed;left:50%;bottom:1dvh;transform:translateX(-50%);z-index:1;opacity:.7}
}
/* short portrait phones: shrink chips, keep everything visible */
@media (orientation:portrait) and (max-height:720px){
  .steps li i{display:none}          /* drop the sub-line, keep the headline */
  .steps li{padding:9px 6px}
  .wheel{width:min(94vw,52dvh)}
}
/* ultra-wide desktop: cap width */
@media (min-aspect-ratio:2/1){ .stage{max-width:1400px;margin:0 auto} }
/* short landscape phones */
@media (orientation:landscape) and (max-height:430px){
  .side{gap:1.2dvh} .steps li{padding:.7dvh 12px}
}