/* Cuissle motion: playful feedback without changing its blue-violet identity. */
:root{--motion-edge:rgba(42,54,111,.19);--motion-shadow:rgba(61,53,137,.12)}
:root[data-theme="dark"]{--motion-edge:rgba(5,8,32,.58);--motion-shadow:rgba(2,5,25,.38)}

.app-page .competition-hero,.app-page .form-card,.app-page .daily-teaser,
.app-page .daily-intro,.app-page .question-card,.app-page .result-card,
.app-page .ranking-card,.app-page .result-entry{
  border-radius:26px!important;
}
.app-page .competition-hero,.app-page .daily-teaser,.app-page .daily-intro,
.app-page .question-card,.app-page .result-card,.app-page .ranking-card{
  border:2px solid var(--line)!important;
  box-shadow:0 6px 0 var(--motion-edge),0 17px 30px var(--motion-shadow)!important;
}
.app-page .competition-hero{position:relative;isolation:isolate;overflow:hidden}
.app-page .competition-hero>*{position:relative;z-index:1}
.app-page .competition-hero::before{
  content:"✦";position:absolute;z-index:0;right:13%;top:18%;width:74px;height:74px;
  display:grid;place-items:center;border:4px solid var(--surface);border-radius:23px;
  background:var(--duo);color:#fff;font-size:2.5rem;line-height:1;
  box-shadow:0 6px 0 var(--motion-edge),0 14px 25px var(--motion-shadow);
  transform:rotate(13deg);pointer-events:none;
}
.app-page .competition-hero::after{
  content:"";position:absolute;right:-75px;top:-100px;width:270px;height:270px;
  border:2px solid rgba(101,51,200,.12);border-radius:48% 52% 57% 43%;
  box-shadow:0 0 0 34px rgba(7,95,201,.035),0 0 0 73px rgba(101,51,200,.025);
  pointer-events:none;animation:cuissle-orbit 9s ease-in-out infinite alternate;
}
.app-page .competition-hero:not(.is-loading),.app-page .daily-teaser,
.app-page .daily-intro,.app-page .ranking-card,.app-page .result-card{
  animation:cuissle-arrive .58s cubic-bezier(.18,1.3,.35,1) both;
}
.app-page .form-card,.app-page .result-entry{
  animation:cuissle-arrive .58s cubic-bezier(.18,1.3,.35,1) both;
  transition:transform .28s cubic-bezier(.2,1.2,.3,1),box-shadow .28s ease,border-color .28s ease!important;
}
.app-page .form-card{
  position:relative;isolation:isolate;overflow:hidden;
  border:2px solid var(--line)!important;
  box-shadow:0 6px 0 var(--motion-edge),0 14px 25px var(--motion-shadow)!important;
}
.app-page .form-card::before{
  content:"";position:absolute;z-index:-1;right:-38px;top:-60px;width:170px;height:170px;
  border-radius:50%;background:radial-gradient(circle,rgba(101,51,200,.12) 0 32%,transparent 33% 42%,rgba(7,95,201,.075) 43% 58%,transparent 59%);
  pointer-events:none;
}
.app-page .form-card[data-category="series"]::before{background:radial-gradient(circle,rgba(7,95,201,.15) 0 32%,transparent 33% 42%,rgba(101,51,200,.075) 43% 58%,transparent 59%)}
.app-page .form-card:nth-child(2),.app-page .result-entry:nth-child(2){animation-delay:.07s}
.app-page .form-card:nth-child(3),.app-page .result-entry:nth-child(3){animation-delay:.14s}
.app-page .form-card:hover{transform:translateY(-7px) rotate(-.4deg)!important;box-shadow:0 20px 36px var(--motion-shadow)!important}
.app-page .form-card:active{transform:translateY(-1px) scale(.99)!important}
.app-page .form-icon{
  width:52px;height:52px;border:1px solid rgba(101,51,200,.16);
  border-radius:17px!important;font-size:1.48rem;transform:rotate(-6deg);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 4px 0 var(--motion-edge);
  transition:transform .4s cubic-bezier(.2,1.7,.3,1),box-shadow .3s ease!important;
}
.app-page .form-card:hover .form-icon{transform:rotate(-9deg) scale(1.17);box-shadow:0 6px 16px var(--motion-shadow)}
.app-page .status-pill{
  display:inline-flex;align-items:center;min-height:29px;width:max-content;
  padding:.25rem .65rem;border:1px solid rgba(7,95,201,.2);border-radius:999px;
  background:var(--blue-soft);font-weight:800;letter-spacing:.04em;
}
.app-page .form-card h3{position:relative;font-size:1.3rem}

.button:not(:disabled){box-shadow:0 4px 0 var(--motion-edge),0 9px 19px var(--motion-shadow)!important;transition:transform .2s cubic-bezier(.2,1.4,.3,1),box-shadow .2s ease,background-color .2s ease!important}
.button-primary:not(:disabled){box-shadow:0 4px 0 #402394,0 11px 20px rgba(70,47,157,.2)!important}
.button:hover:not(:disabled){transform:translateY(-3px) scale(1.02)!important}
.button:active:not(:disabled){transform:translateY(3px) scale(.985)!important;box-shadow:0 1px 0 var(--motion-edge),0 3px 8px var(--motion-shadow)!important}
.button-primary:active:not(:disabled){box-shadow:0 1px 0 #402394,0 3px 8px rgba(70,47,157,.2)!important}

.answer:not(:disabled){transition:transform .18s cubic-bezier(.2,1.4,.3,1),box-shadow .18s ease,border-color .18s ease,background-color .18s ease!important}
.quiz-page .question-card h1,.daily-shell .question-card h1{line-height:1.2}
.quiz-page .question-card,.daily-shell .question-card{position:relative}
.quiz-page .question-card::before,.daily-shell .question-card::before{
  content:"✦";position:absolute;right:26px;top:20px;color:var(--violet);
  font-size:1.8rem;line-height:1;opacity:.45;pointer-events:none;
}
.quiz-page .answer,.daily-shell .answer{
  min-height:64px;padding:1rem 1.1rem;border:2px solid var(--line)!important;
  border-bottom-width:4px!important;border-radius:18px;
  box-shadow:0 3px 0 var(--motion-edge);font-weight:650;
}
.quiz-page .answer-letter,.daily-shell .answer-letter{
  flex:none;width:34px;height:34px;border:0;border-radius:11px;
  background:var(--blue-soft);color:var(--violet);font-size:.86rem;font-weight:800;
}
.quiz-page .answer.selected,.daily-shell .answer.selected{border-color:var(--violet)!important;box-shadow:0 3px 0 rgba(101,51,200,.24)}
.answer:hover:not(:disabled){transform:translateX(5px);box-shadow:0 4px 0 var(--motion-edge)!important}
.answer:active:not(:disabled){transform:translateX(2px) scale(.99)}
.answer.selected{animation:cuissle-choice .3s cubic-bezier(.2,1.5,.3,1) both}
.progress-track{height:12px;overflow:hidden;border:1px solid var(--line);border-radius:999px;background:var(--blue-soft)!important}
.progress-track i{height:100%;border-radius:999px}
.progress-track i{position:relative;transition:width .35s cubic-bezier(.2,1,.3,1)!important}
.progress-track i::after{content:"";position:absolute;inset:0 auto 0 -35%;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:cuissle-glint 2.8s ease-in-out infinite}

.landing-page .play-action:hover .play-disc,.landing-page .play-action:focus-visible .play-disc{transform:translateY(-5px) scale(1.08) rotate(-5deg)}
.landing-page .showcase-card[data-position="center"]:hover{transform:translate(-50%,-52%) scale(1.025)}
.landing-page .landing-hero::after{
  content:"✦";position:absolute;right:10%;top:13%;color:var(--violet);
  font-size:clamp(2rem,4vw,3.3rem);line-height:1;opacity:.72;
  pointer-events:none;animation:cuissle-spark 4.5s ease-in-out infinite;
}
.landing-page .feature-grid .step-card,.landing-page .showcase-card{
  border-width:2px;border-radius:27px;
  box-shadow:0 6px 0 var(--motion-edge),0 17px 30px var(--motion-shadow);
}

@keyframes cuissle-arrive{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cuissle-choice{0%{transform:scale(.98)}60%{transform:scale(1.015)}100%{transform:scale(1)}}
@keyframes cuissle-orbit{from{transform:translate(0,0) rotate(-12deg)}to{transform:translate(-25px,22px) rotate(16deg)}}
@keyframes cuissle-glint{0%,45%,100%{transform:translateX(0);opacity:0}55%{opacity:1}85%{transform:translateX(390%);opacity:0}}
@keyframes cuissle-spark{0%,100%{transform:translateY(0) rotate(-8deg) scale(.94)}50%{transform:translateY(-12px) rotate(12deg) scale(1.08)}}
@media(max-width:620px){.app-page .competition-hero::before{right:22px;top:18px;width:49px;height:49px;border-radius:16px;font-size:1.6rem;opacity:.8}.app-page .competition-hero>div{padding-top:1.5rem}.quiz-page .question-card::before,.daily-shell .question-card::before{right:16px;top:15px;font-size:1.35rem}}

@media(prefers-reduced-motion:reduce){
  .app-page .competition-hero,.app-page .form-card,.app-page .daily-teaser,
  .app-page .daily-intro,.app-page .question-card,.app-page .result-card,
  .app-page .ranking-card,.app-page .result-entry,.answer.selected{
    animation:none!important;
  }
  .app-page .competition-hero::after,.progress-track i::after,.landing-page .landing-hero::after{animation:none!important}
  .button:not(:disabled),.answer:not(:disabled),.app-page .form-card,.app-page .form-icon{transition:none!important}
  .button:hover:not(:disabled),.button:active:not(:disabled),.answer:hover:not(:disabled),
  .answer:active:not(:disabled),.app-page .form-card:hover,.app-page .form-card:active,
  .app-page .form-card:hover .form-icon,.landing-page .play-action:hover .play-disc,
  .landing-page .showcase-card[data-position="center"]:hover{transform:none!important}
}