/* NALAROO Quest Result Hero & Responsive Layout Optimization v1.0
 * Only the composite Quest Complete scene is redesigned. Artwork, scores,
 * rewards, buttons and legacy fallback stay controlled by their JS owners.
 */

/* Remove the in-flow navigation row from result pages. The logo remains
 * accessible in the top-right, but can no longer push the hero down. */
body.quest-view #main:has(>.quest-result-page){min-height:0}
.quest-result-page{
  box-sizing:border-box;
  width:100%;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  min-height:100svh;
  padding:max(47px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
    max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
.quest-result-page>.quest-nav{
  position:absolute;
  z-index:5;
  inset-block-start:max(10px,env(safe-area-inset-top));
  inset-inline-end:max(16px,env(safe-area-inset-right));
  width:auto;
  max-width:none;
  margin:0;
  pointer-events:none;
}
.quest-result-page>.quest-nav .quest-logo{
  width:clamp(90px,10vw,134px);
}

/* Keep the result illustration above the parchment on every viewport.
 * The out-of-flow logo does not participate in this vertical composition. */
.quest-result-page .quest-complete[data-hero="composite"]{
  display:block;
  width:min(100%,640px);
  max-width:640px;
  padding:0;
  margin:auto;
  container-type:normal;
}
.quest-result-page .quest-complete[data-hero="composite"]::before{display:none}
.quest-result-page .quest-complete[data-hero="composite"] .quest-composite-hero{
  width:min(100%,clamp(260px,44svh,470px));
  margin-inline:auto;
  aspect-ratio:1672/941;
  container-type:inline-size;
  align-self:center;
  z-index:2;
  background:radial-gradient(ellipse at 50% 67%,#faf1df99 0%,transparent 65%);
}
.quest-result-page .quest-complete[data-hero="composite"] .quest-composite-image{
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity 180ms ease-out;
}
.quest-result-page .quest-complete[data-hero="composite"][data-loaded="true"] .quest-composite-image{
  opacity:1;
}
.quest-result-page .quest-complete[data-hero="composite"] .quest-composite-hero::after{
  content:"Menyiapkan ilustrasi…";
  position:absolute;
  top:58%;left:50%;
  transform:translate(-50%,-50%);
  width:80%;
  font:600 .85rem/1.4 var(--nr-font-ui,"Nunito",system-ui,sans-serif);
  color:#526950;
  text-align:center;
  pointer-events:none;
}
.quest-result-page .quest-complete[data-hero="composite"][data-loaded="true"] .quest-composite-hero::after{
  display:none;
}

/* The wooden ribbon is part of the image; only the live title is overlaid.
 * Container units now use the ART width, not the outer result panel width. */
.quest-result-page .quest-complete[data-hero="composite"] .quest-composite-title{
  left:49.6%;
  top:80%;
  transform:translate(-50%,-50%);
  width:61%;
  max-width:61%;
  font-family:var(--nr-font-ui,"Nunito",system-ui,sans-serif);
  font-weight:800;
  font-size:clamp(16px,5.5cqw,34px);
  line-height:1.05;
  letter-spacing:-.018em;
  color:#60391f;
  text-shadow:0 1px 0 #f7dbab9c;
  white-space:normal;
  opacity:0;
  transition:opacity 180ms ease-out;
}
.quest-result-page .quest-complete[data-hero="composite"][data-loaded="true"] .quest-composite-title{
  opacity:1;
}
.quest-result-page .quest-complete[data-hero="composite"] .quest-result-panel{
  width:100%;
  max-width:none;
  margin-top:clamp(-55px,-7.5vw,-25px);
  padding:clamp(30px,4.5vw,48px) clamp(16px,3vw,30px) 22px;
  border-radius:26px 28px 25px 27px;
  text-align:center;
}
.quest-result-page .quest-result-panel>.quest-result-message{
  font-size:clamp(.9rem,1.35vw,1rem);
  line-height:1.42;
  font-weight:600;
  color:#425e50;
  margin:0 auto!important;
}
.quest-result-page .quest-result-panel>.quest-result-body{
  margin-top:10px;
  max-width:none;
}
.quest-result-page .quest-result-panel .quest-mode{
  font-size:.8rem;
  line-height:1.35;
}
.quest-result-page .quest-result-panel .quest-explorer{
  font-size:.8125rem;
  margin-top:2px!important;
  line-height:1.35;
}
.quest-result-page .quest-result-panel .quest-score{
  margin-top:6px!important;
  font-size:clamp(1.5rem,2.2vw,2rem);
  font-weight:800;
  line-height:1.23;
}
.quest-result-page .quest-result-panel .quest-result-stats{
  gap:8px;
  margin-top:12px;
}
.quest-result-page .quest-result-panel .quest-result-stats>div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:1px;
  padding:9px 5px;
  min-height:82px;
}
.quest-result-page .quest-result-panel .quest-result-stats img{
  width:32px;height:32px;
}
.quest-result-page .quest-result-panel .quest-result-stats strong{
  font-size:clamp(1.25rem,1.8vw,1.625rem);
  font-weight:800;
  line-height:1.15;
}
.quest-result-page .quest-result-panel .quest-result-stats span{
  font-size:.8125rem;
  line-height:1.25;
}
.quest-result-page .quest-result-panel .quest-result-awards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:9px;
  margin-top:12px;
}
.quest-result-page .quest-result-panel .quest-result-awards .quest-award{
  min-width:0;
  flex-basis:auto;
  font-size:.875rem;
  gap:5px;
  white-space:nowrap;
}
.quest-result-page .quest-result-panel .quest-result-awards img{
  width:30px;height:30px;
}
.quest-result-page .quest-result-panel>.quest-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:14px;
}
.quest-result-page .quest-result-panel>.quest-actions .quest-button{
  width:100%;
  max-width:none;
  min-height:46px;
  margin:0;
  padding:9px 8px;
  gap:5px;
  font-size:.875rem;
  line-height:1.25;
}
.quest-result-page .quest-result-panel>.quest-actions .quest-button img{
  width:25px;height:25px;
}
.quest-result-page .quest-result-panel>.quest-actions>.quest-result-home{
  grid-column:1/-1;
}
.quest-result-page .quest-result-panel>.quest-actions:has(>.quest-button:nth-child(2):last-child)>.quest-result-home{
  grid-column:auto;
}

/* Portrait desktop/tablets use a single parchment book leaf with hero overlap. */
@media(max-width:919px), (orientation:portrait) and (max-width:1150px){
  .quest-result-page{
    padding-top:max(47px,env(safe-area-inset-top));
    justify-content:flex-start;
  }
  .quest-result-page .quest-complete[data-hero="composite"]{
    display:block;
    width:min(100%,640px);
    max-width:640px;
    margin:0 auto auto;
  }
  .quest-result-page .quest-complete[data-hero="composite"] .quest-composite-hero{
    width:min(100%,clamp(260px,44svh,470px));
    margin-inline:auto;
  }
  .quest-result-page .quest-complete[data-hero="composite"] .quest-result-panel{
    margin-top:clamp(-55px,-7.5vw,-25px);
    padding:clamp(30px,4.5vw,48px) clamp(16px,3vw,30px) 22px;
    border-radius:26px;
  }
  .quest-result-page .quest-complete[data-hero="composite"] .quest-result-panel>.quest-result-message{
    max-width:36ch;
  }
}
/* Short landscape remains stacked; allow normal vertical scrolling rather
 * than moving the hero beside the panel or clipping the actions. */
@media(min-width:560px) and (orientation:landscape) and (max-height:620px){
  .quest-result-page{
    justify-content:flex-start;
    padding-top:max(42px,env(safe-area-inset-top));
    padding-bottom:max(10px,env(safe-area-inset-bottom));
  }
  .quest-result-page .quest-complete[data-hero="composite"]{
    display:block;
    width:min(100%,640px);
    max-width:640px;
    margin:auto;
  }
  .quest-result-page .quest-complete[data-hero="composite"] .quest-composite-hero{
    width:min(100%,240px);
  }
  .quest-result-page .quest-complete[data-hero="composite"] .quest-result-panel{
    margin-top:-24px;
    padding:30px 12px 12px;
  }
  .quest-result-page .quest-result-panel>.quest-result-message{font-size:.82rem}
  .quest-result-page .quest-result-panel .quest-result-stats>div{min-height:62px;padding:5px}
  .quest-result-page .quest-result-panel .quest-result-stats img{width:25px;height:25px}
  .quest-result-page .quest-result-panel .quest-result-stats{margin-top:7px}
  .quest-result-page .quest-result-panel .quest-result-awards{margin-top:7px;padding:5px}
  .quest-result-page .quest-result-panel>.quest-actions{margin-top:8px}
}

/* Phone portrait: make the final score and buttons appear high on the page. */
@media(max-width:600px) and (orientation:portrait){
  .quest-result-page{
    padding: max(40px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right))
      max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  }
  .quest-result-page>.quest-nav{
    inset-block-start:max(6px,env(safe-area-inset-top));
    inset-inline-end:max(11px,env(safe-area-inset-right));
  }
  .quest-result-page>.quest-nav .quest-logo{width:100px}
  .quest-result-page .quest-complete[data-hero="composite"]{
    width:100%;
    max-width:440px;
  }
  .quest-result-page .quest-complete[data-hero="composite"] .quest-composite-hero{
    width:100%;
  }
  .quest-result-page .quest-complete[data-hero="composite"] .quest-result-panel{
    margin-top:-9%;
    padding:clamp(27px,7.5vw,37px) 14px 16px;
    border-radius:24px;
  }
  .quest-result-page .quest-complete[data-hero="composite"] .quest-composite-title{
    font-size:clamp(16px,5.5cqw,22px);
  }
  .quest-result-page .quest-result-panel>.quest-result-message{
    font-size:.875rem;
    line-height:1.4;
  }
  .quest-result-page .quest-result-panel>.quest-result-body{margin-top:7px}
  .quest-result-page .quest-result-panel .quest-score{
    font-size:clamp(1.4rem,6vw,1.7rem);
    margin-top:4px!important;
  }
  .quest-result-page .quest-result-panel .quest-result-stats{
    gap:6px;
    margin-top:8px;
  }
  .quest-result-page .quest-result-panel .quest-result-stats>div{
    min-height:72px;
    padding:6px 3px;
  }
  .quest-result-page .quest-result-panel .quest-result-stats img{width:28px;height:28px}
  .quest-result-page .quest-result-panel .quest-result-stats strong{font-size:1.375rem}
  .quest-result-page .quest-result-panel .quest-result-awards{
    padding:6px;
    gap:4px;
    margin-top:8px;
  }
  .quest-result-page .quest-result-panel .quest-result-awards .quest-award{
    font-size:.8125rem;
    gap:3px;
  }
  .quest-result-page .quest-result-panel .quest-result-awards img{width:25px;height:25px}
  .quest-result-page .quest-result-panel>.quest-actions{
    gap:7px;
    margin-top:10px;
  }
  .quest-result-page .quest-result-panel>.quest-actions .quest-button{
    min-height:44px;
    padding:8px 5px;
    font-size:.8125rem;
    gap:3px;
  }
  .quest-result-page .quest-result-panel>.quest-actions .quest-button img{width:22px;height:22px}
}
@media(max-width:345px){
  .quest-result-page .quest-result-panel>.quest-actions{
    grid-template-columns:1fr;
  }
  .quest-result-page .quest-result-panel>.quest-actions>.quest-result-home{
    grid-column:1/-1!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .quest-result-page .quest-composite-image,
  .quest-result-page .quest-composite-title{transition:none!important}
}