/* =========================================================
   BURBU'S QUIZ · Uga emotion game
   Uses the supplied rendered Uga/Burbu/cloud artwork as layers.
   ========================================================= */
.bq-page{
  --bq-sky:#A8F5F8;
  --bq-cream:#FFF9E9;
  --bq-orange:#F5943B;
  --bq-orange-deep:#C65E27;
  --bq-brown:#6A381F;
  --bq-brown-deep:#58301C;
  --bq-green:#A9E879;
  background:var(--sky);
}
.bq-page .uga-game-shell{padding-top:32px}
.bq-page .uga-game-wrap{max-width:1160px}
.bq-page .uga-game-back{position:relative;z-index:2}

.bq-head{
  display:grid;
  justify-items:center;
  gap:5px;
  margin:0 auto 24px;
  text-align:center;
  font-family:var(--font-display);
}
.bq-head-logo{width:clamp(108px,15vw,170px);height:auto;filter:drop-shadow(0 6px 0 rgba(90,51,32,.10))}
.bq-head h1{
  color:var(--bq-brown);
  font-family:var(--font-display);
  font-size:clamp(2rem,5vw,3.35rem);
  font-weight:800;
  line-height:1;
}
.bq-head p{
  max-width:58ch;
  margin:7px auto 0;
  color:var(--ink-soft);
  font-family:var(--font-display);
  font-size:clamp(1rem,2.2vw,1.2rem);
  font-weight:600;
  line-height:1.45;
}

.bq-game{width:100%;font-family:var(--font-display)}
.bq-layout{
  display:grid;
  grid-template-columns:minmax(0,650px) minmax(300px,1fr);
  gap:clamp(22px,3vw,36px);
  align-items:center;
}

/* ---------- Scene ---------- */
.bq-stage-shell{
  width:100%;
  max-width:650px;
  margin:0 auto;
  border-radius:36px;
  overflow:hidden;
  box-shadow:0 13px 0 rgba(90,51,32,.12);
  background:var(--bq-sky);
}
.bq-stage{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  isolation:isolate;
  background:var(--bq-sky);
}
.bq-camera{
  position:absolute;
  z-index:1;
  inset:0 0 auto;
  width:100%;
  height:116%;
  transform:translate3d(0,0,0);
  transition:transform 1.06s cubic-bezier(.22,.74,.18,1);
  will-change:transform;
}
.bq-game.is-reveal .bq-camera{transform:translate3d(0,-12%,0)}
.bq-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  user-select:none;
}
.bq-burbu{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:-5%;
  width:100%;
  height:auto;
  transform:translateX(-50%);
  transform-origin:50% 72%;
  pointer-events:none;
  user-select:none;
}
.bq-game.is-anticipating .bq-burbu{animation:bqBurbuAnticipate .70s cubic-bezier(.42,0,.28,1) forwards}
.bq-game.is-launching .bq-burbu{animation:bqBurbuLaunch 1.02s cubic-bezier(.18,.78,.2,1) forwards}
@keyframes bqBurbuAnticipate{
  0%{transform:translateX(-50%) translateY(0) scale(1)}
  55%{transform:translateX(-50%) translateY(1.7%) scale(1.022,.968)}
  100%{transform:translateX(-50%) translateY(1.35%) scale(1.018,.973)}
}
@keyframes bqBurbuLaunch{
  0%{transform:translateX(-50%) translateY(1.35%) scale(1.018,.973)}
  26%{transform:translateX(-50%) translateY(-2.15%) scale(.982,1.038)}
  55%{transform:translateX(-50%) translateY(.45%) scale(1.012,.992)}
  78%{transform:translateX(-50%) translateY(-.35%) scale(.996,1.008)}
  100%{transform:translateX(-50%) translateY(0) scale(1)}
}
.bq-cloud{
  position:absolute;
  z-index:5;
  top:4.2%;
  left:50%;
  width:59%;
  height:auto;
  opacity:0;
  transform:translate(-50%,148%) scale(.10) rotate(0deg);
  transform-origin:50% 68%;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 10px 10px rgba(60,93,122,.10));
}
.bq-game.is-launching .bq-cloud{animation:bqCloudPop 1.05s .10s cubic-bezier(.16,.82,.18,1.10) forwards}
.bq-game.is-cloud-ready .bq-cloud,
.bq-game.is-reveal .bq-cloud{
  opacity:1;
  transform:translate(-50%,0) scale(1) rotate(0deg);
  animation:bqCloudIdle 2.6s ease-in-out infinite;
}
@keyframes bqCloudPop{
  0%{opacity:0;transform:translate(-50%,148%) scale(.10) rotate(0deg)}
  28%{opacity:1}
  70%{opacity:1;transform:translate(-50%,-4%) scale(1.08) rotate(-2deg)}
  86%{opacity:1;transform:translate(-50%,1%) scale(.97) rotate(1.4deg)}
  100%{opacity:1;transform:translate(-50%,0) scale(1) rotate(0deg)}
}
@keyframes bqCloudIdle{
  0%{transform:translate(-50%,0) rotate(-2.2deg)}
  25%{transform:translate(-50%,-.6%) rotate(-.8deg)}
  50%{transform:translate(-50%,0) rotate(1.9deg)}
  75%{transform:translate(-50%,.5%) rotate(.6deg)}
  100%{transform:translate(-50%,0) rotate(-1.6deg)}
}
.bq-uga{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:1%;
  width:68%;
  max-height:76%;
  object-fit:contain;
  object-position:center bottom;
  opacity:0;
  transform:translate(-50%,22%) scale(.92);
  transform-origin:50% 100%;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 13px 12px rgba(90,51,32,.14));
  transition:opacity .35s ease .28s,transform .72s cubic-bezier(.2,.8,.18,1.06) .16s;
}
.bq-game.is-reveal .bq-uga{opacity:1;transform:translate(-50%,0) scale(1)}
.bq-foreground{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:-.5%;
  width:116%;
  max-width:none;
  height:auto;
  opacity:0;
  transform:translate(-50%,12%);
  pointer-events:none;
  user-select:none;
  transition:opacity .32s ease .28s,transform .62s cubic-bezier(.2,.8,.2,1) .2s;
}
.bq-game.is-reveal .bq-foreground{opacity:1;transform:translate(-50%,0)}

/* Start screen */
.bq-start{
  position:absolute;
  z-index:20;
  inset:0;
  display:grid;
  align-content:start;
  justify-items:center;
  gap:18px;
  padding:15% 28px 28px;
  background:#A8F5F8 url("/assets/img/games/burbu-quiz/start-scene.webp?v=1") center/cover no-repeat;
  transition:opacity .28s ease,visibility 0s linear .28s;
}
.bq-start::before,
.bq-start::after{display:none}
.bq-game:not(.is-start) .bq-start{opacity:0;visibility:hidden;pointer-events:none}
.bq-start-logo{
  width:min(80%,465px);
  height:auto;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.12));
}
.bq-start-btn,
.bq-next{
  border:0;
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:800;
  color:#fff;
  text-shadow:0 2px 0 rgba(90,51,32,.25);
  cursor:pointer;
}
.bq-start-btn{
  min-width:min(84%,320px);
  min-height:64px;
  padding:14px 30px 16px;
  background:linear-gradient(180deg,#F9A549 0%,#F5943B 100%);
  box-shadow:0 8px 0 var(--bq-brown-deep),0 0 0 7px rgba(106,56,31,.94);
  font-size:clamp(1.2rem,2.4vw,1.5rem);
}
.bq-start-btn:hover:not(:disabled),
.bq-start-btn:focus-visible:not(:disabled){transform:translateY(-1px)}
.bq-start-btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 4px 0 var(--bq-brown-deep),0 0 0 7px rgba(106,56,31,.94)}
.bq-start-btn:disabled{opacity:.7;cursor:progress}

/* Overlaid feedback on the scene */
.bq-stage-feedback{
  position:absolute;
  z-index:14;
  left:50%;
  top:36%;
  width:min(80%,380px);
  display:grid;
  justify-items:center;
  gap:2px;
  padding:16px 18px 18px;
  border-radius:24px;
  background:rgba(255,249,234,.96);
  border:3px solid rgba(255,255,255,.58);
  box-shadow:0 14px 26px rgba(90,51,32,.14),0 4px 0 rgba(90,51,32,.12);
  text-align:center;
  color:var(--bq-brown);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,10px) scale(.96);
  transition:opacity .24s ease,transform .34s cubic-bezier(.16,.8,.2,1.08),visibility 0s linear .34s;
  pointer-events:none;
}
.bq-game.is-reveal .bq-stage-feedback{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition-delay:.32s,.32s,0s}
.bq-stage-feedback strong{
  display:block;
  font-size:clamp(1.35rem,3.8vw,1.95rem);
  line-height:1.03;
  color:var(--bq-orange-deep);
}
.bq-stage-feedback span{
  display:block;
  margin-top:3px;
  font-size:clamp(.94rem,2vw,1.08rem);
  line-height:1.28;
  color:var(--bq-brown);
  font-weight:700;
}
.bq-stage-feedback.is-correct{background:rgba(242,255,217,.97)}
.bq-stage-feedback.is-correct strong{color:#6A9F32}

/* Side feedback not needed anymore */
.bq-feedback{display:none}

/* ---------- Answer panel ---------- */
.bq-controls{
  align-self:center;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(22px,3vw,32px);
  border-radius:32px;
  border:3px solid rgba(255,255,255,.7);
  background:
    radial-gradient(circle at 20% 16%,rgba(255,255,255,.72) 0 6%,transparent 6.2%),
    radial-gradient(circle at 28% 18%,rgba(255,255,255,.72) 0 4.7%,transparent 4.9%),
    radial-gradient(circle at 24% 12%,rgba(255,255,255,.82) 0 5.2%,transparent 5.4%),
    linear-gradient(180deg,#FFF8E5 0%,#FFF0CF 100%);
  box-shadow:0 10px 0 rgba(90,51,32,.10), inset 0 1px 0 rgba(255,255,255,.55);
  text-align:center;
}
.bq-controls::before,
.bq-controls::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
.bq-controls::before{
  left:-34px;
  bottom:-48px;
  width:166px;
  height:166px;
  background:radial-gradient(circle at 50% 50%,rgba(118,226,219,.55),rgba(118,226,219,.18) 66%,transparent 67%);
}
.bq-controls::after{
  top:-44px;
  right:-34px;
  width:154px;
  height:154px;
  background:radial-gradient(circle at 50% 50%,rgba(249,177,92,.36),rgba(249,177,92,.12) 67%,transparent 68%);
}
.bq-controls > *{position:relative;z-index:1}
.bq-status{
  min-height:2.4em;
  margin:0 auto 12px;
  color:var(--ink-soft);
  font-family:var(--font-display);
  font-size:clamp(.95rem,1.7vw,1.08rem);
  font-weight:700;
  line-height:1.25;
  max-width:20ch;
}
.bq-controls h2{
  margin:0 0 15px;
  color:var(--bq-orange-deep);
  font-family:var(--font-display);
  font-size:clamp(1.35rem,2.6vw,1.8rem);
  font-weight:800;
  opacity:.28;
  transition:opacity .22s ease;
}
.bq-game.is-choosing .bq-controls h2,
.bq-game.is-reveal .bq-controls h2{opacity:1}
.bq-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .25s ease,transform .3s ease,visibility 0s linear .3s;
}
.bq-game.is-choosing .bq-options{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.bq-game.is-reveal .bq-options{opacity:1;visibility:visible;transform:none;pointer-events:none;transition-delay:0s}
.bq-option{
  min-width:0;
  min-height:158px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:6px 4px 8px;
  border:3px solid rgba(255,255,255,.58);
  border-radius:24px;
  background:linear-gradient(180deg,#F3FBFF 0%,#E5F8FA 100%);
  color:var(--bq-brown);
  box-shadow:0 5px 0 rgba(90,51,32,.10);
  font-family:var(--font-display);
  font-weight:800;
  transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease,filter .16s ease,transform .16s ease;
}
.bq-option img{
  width:100%;
  height:134px;
  object-fit:contain;
  object-position:center bottom;
  pointer-events:none;
  user-select:none;
}
.bq-option span{display:none}
.bq-option:hover:not(:disabled),.bq-option:focus-visible:not(:disabled){border-color:var(--bq-orange);background:linear-gradient(180deg,#FFFDF0 0%,#FFF3D6 100%);transform:translateY(-1px)}
.bq-option:disabled{cursor:default}
.bq-option.is-correct,.bq-option.is-answer{border-color:#7EBB47;background:linear-gradient(180deg,#F7FFE5 0%,#E7FFC6 100%);box-shadow:0 5px 0 rgba(87,139,39,.18)}
.bq-option.is-wrong{border-color:#E87467;background:linear-gradient(180deg,#FFF7F3 0%,#FFE2DB 100%);filter:saturate(.82)}
.bq-next{
  width:100%;
  min-height:54px;
  margin-top:18px;
  background:var(--bq-orange);
  font-size:1.12rem;
  box-shadow:0 6px 0 var(--orange-deep);
}
.bq-next[hidden]{display:none}
.bq-next:active{transform:translateY(3px);box-shadow:0 3px 0 var(--orange-deep)}
.bq-next-stage{
  position:absolute;
  z-index:16;
  left:50%;
  bottom:5.2%;
  width:auto;
  min-width:170px;
  min-height:56px;
  margin:0;
  padding:10px 28px 12px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#F9A549 0%,#F5943B 100%);
  box-shadow:0 6px 0 var(--bq-brown-deep),0 0 0 4px rgba(255,255,255,.60);
  opacity:0;
  transition:opacity .25s ease .62s,transform .28s cubic-bezier(.16,.8,.2,1.08) .58s;
}
.bq-game.is-reveal .bq-next-stage:not([hidden]){opacity:1;transform:translateX(-50%) translateY(0)}
.bq-next-stage:active{transform:translateX(-50%) translateY(3px);box-shadow:0 3px 0 var(--bq-brown-deep),0 0 0 4px rgba(255,255,255,.60)}

@media (max-width:980px){
  .bq-layout{grid-template-columns:1fr;max-width:700px;margin:0 auto;gap:20px}
  .bq-stage-shell{max-width:590px}
  .bq-controls{order:2;width:100%;max-width:640px;margin:0 auto;padding:22px 20px 24px}
  .bq-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .bq-option{min-height:138px}
  .bq-option img{height:108px}
  .bq-stage-feedback{top:37%;width:min(82%,360px)}
  .bq-next-stage{bottom:4.6%;min-width:162px}
}
@media (max-width:700px){
  .bq-page .uga-game-shell{padding-top:20px}
  .bq-page .uga-game-wrap{padding-inline:12px}
  .bq-head{margin-bottom:15px}
  .bq-head-logo{width:104px}
  .bq-head h1{font-size:clamp(1.8rem,8vw,2.45rem)}
  .bq-head p{font-size:.98rem;line-height:1.35;max-width:42ch}
  .bq-stage-shell{max-width:540px;border-radius:27px;box-shadow:0 9px 0 rgba(90,51,32,.11)}
  .bq-cloud{width:61%;top:5%}
  .bq-uga{bottom:1.5%;width:69%;max-height:77%}
  .bq-start{gap:14px;padding:13% 18px 18px}
  .bq-start-logo{width:min(82%,380px)}
  .bq-start-btn{min-width:min(86%,270px);min-height:58px;font-size:1.1rem;box-shadow:0 7px 0 var(--bq-brown-deep),0 0 0 6px rgba(106,56,31,.94)}
  .bq-stage-feedback{top:35.5%;width:min(85%,320px);padding:12px 14px 14px;border-radius:20px}
  .bq-next-stage{bottom:4%;min-width:150px;min-height:51px;padding:8px 22px 10px;font-size:1rem}
  .bq-controls{padding:18px 10px 18px;border-radius:24px}
  .bq-status{min-height:1.9em;margin-bottom:8px;font-size:.92rem}
  .bq-controls h2{font-size:1.3rem;margin-bottom:11px}
  .bq-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .bq-option{min-height:118px;padding:4px 2px 6px;border-radius:18px;border-width:2px}
  .bq-option img{height:90px}
  .bq-option span{display:none}
}
@media (max-width:430px){
  .bq-page .uga-game-wrap{padding-inline:8px}
  .bq-head p{font-size:.9rem}
  .bq-stage-shell{border-radius:23px}
  .bq-cloud{width:63%;top:5.2%}
  .bq-uga{bottom:2%;width:70%;max-height:78%}
  .bq-stage-feedback{top:34%;width:88%;padding:10px 11px 12px}
  .bq-stage-feedback strong{font-size:1.32rem}
  .bq-stage-feedback span{font-size:.88rem}
  .bq-next-stage{bottom:3.5%;min-width:138px;min-height:48px;padding:7px 18px 9px}
  .bq-controls{padding:14px 7px 16px}
  .bq-options{gap:6px}
  .bq-option{min-height:112px}
  .bq-option img{height:86px}
}

@media (prefers-reduced-motion:reduce){
  .bq-camera,.bq-uga,.bq-foreground,.bq-start,.bq-stage-feedback{transition-duration:.01ms!important;transition-delay:0ms!important}
  .bq-game.is-anticipating .bq-burbu,.bq-game.is-launching .bq-burbu,.bq-game.is-launching .bq-cloud,.bq-game.is-cloud-ready .bq-cloud,.bq-game.is-reveal .bq-cloud{animation-duration:.01ms!important;animation-delay:0ms!important}
}

/* =========================================================
   Burbu Quiz v4 refinements
   - old cloud exits as camera returns
   - result + NEXT grouped above Uga's face
   - tighter mobile/tablet result layout
   ========================================================= */
.bq-game.is-cloud-exit .bq-cloud{
  opacity:1;
  animation:bqCloudExit .42s cubic-bezier(.42,0,.8,.2) forwards !important;
}
@keyframes bqCloudExit{
  0%{opacity:1;transform:translate(-50%,0) scale(1) rotate(-1deg)}
  45%{opacity:.76;transform:translate(-50%,-5%) scale(.94) rotate(2.2deg)}
  100%{opacity:0;transform:translate(-50%,-15%) scale(.78) rotate(-4deg)}
}

.bq-result-stack{
  position:absolute;
  z-index:16;
  left:50%;
  top:20%;
  width:min(80%,380px);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,10px) scale(.97);
  transition:opacity .24s ease,transform .34s cubic-bezier(.16,.8,.2,1.08),visibility 0s linear .34s;
  pointer-events:none;
}
.bq-game.is-reveal .bq-result-stack{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0) scale(1);
  transition-delay:.30s,.30s,0s;
  pointer-events:auto;
}
.bq-stage-feedback{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  top:auto !important;
  width:100% !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  transition:none !important;
  pointer-events:none;
}
.bq-next-stage{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  bottom:auto !important;
  width:min(74%,250px) !important;
  align-self:center;
  min-width:0 !important;
  min-height:54px;
  margin:0 !important;
  padding:10px 24px 12px;
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}
.bq-game.is-reveal .bq-next-stage:not([hidden]){opacity:1 !important;transform:none !important}
.bq-next-stage:active{transform:translateY(3px) !important}

@media (max-width:980px){
  .bq-result-stack{top:19%;width:min(78%,350px);gap:10px}
  .bq-next-stage{width:min(70%,220px) !important;min-height:52px}
}
@media (max-width:700px){
  .bq-result-stack{top:18%;width:min(82%,320px);gap:9px}
  .bq-stage-feedback{padding:11px 13px 13px !important;border-radius:20px !important}
  .bq-next-stage{width:min(72%,205px) !important;min-height:49px;padding:8px 18px 10px;font-size:1rem}
}
@media (max-width:430px){
  .bq-result-stack{top:16.5%;width:86%;gap:8px}
  .bq-stage-feedback{padding:9px 10px 11px !important}
  .bq-stage-feedback strong{font-size:1.28rem}
  .bq-stage-feedback span{font-size:.86rem}
  .bq-next-stage{width:min(74%,185px) !important;min-height:46px;padding:7px 16px 9px;font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  .bq-game.is-cloud-exit .bq-cloud{animation-duration:.01ms!important}
  .bq-result-stack{transition-duration:.01ms!important;transition-delay:0ms!important}
}