/* The solved or failed board stays underneath the result. */
body:has(#finish:not([hidden]),#failureDialog[open]) #game{visibility:visible;}
body:has(#finish:not([hidden]),#rank-screen:not([hidden]),#failureDialog[open]) #level-stat-toast{visibility:hidden;}
body:has(#finish:not([hidden])) #game .game-lower{visibility:hidden;}

#finish,
#failureDialog[open]{
  --outcome-width:min(100vw,540px);
  --action-width:min(73%,360px);
}

@font-face{
  font-family:Vanilla Caramel;
  src:url('assets/approved/vanilla-caramel-outcomes.woff') format('woff');
  font-display:swap;
}
:is(#finish-title,#failure-title,#rank-title){
  display:block;
  width:min(100%,480px);
  justify-self:center;
  padding:0;
  margin:0;
  line-height:1;
  text-shadow:none;
}
.outcome-title svg{display:block;width:100%;height:auto;overflow:visible;font-family:Vanilla Caramel,system-ui,sans-serif;stroke-linejoin:round;}
.outcome-title-shadow{fill:#29151e;stroke:#29151e;stroke-width:10;transform:translateY(5px);}
.outcome-title-edge{fill:#402023;stroke:#402023;stroke-width:10;}
.outcome-title-rim{fill:#e0a45b;stroke:#e0a45b;stroke-width:5;}
.outcome-title-face{fill:#fff4d9;}
#rank-screen .rank-content{gap:clamp(8px,1.5dvh,16px);}
#rank-climb-rows{gap:6px;}
#rank-climb-rows li{
  --rank-avatar-size:clamp(44px,10vw,48px);
  min-height:64px;grid-template-columns:32px minmax(0,1fr) auto;
  gap:clamp(6px,1.8vw,12px);padding:7px 9px;
  border:1px solid transparent;border-radius:12px;
}
#rank-climb-rows .rank-player{gap:8px;}
#rank-climb-rows .rank-player .beedoku-avatar{
  width:var(--rank-avatar-size);height:var(--rank-avatar-size);flex:none;
}
#rank-climb-rows .rank-position{text-align:center;font-variant-numeric:tabular-nums;}
#rank-climb-rows .rank-position-rail{background:#ffffff0d;color:#e3d8ec;border-color:#ffffff1f;}
#rank-climb-rows .rank-position-rail span{height:1px;background:#ffffff2b;}
#failure-title{
  animation:outcome-title-arrive .36s .23s cubic-bezier(.2,.72,.24,1.2) both;
}

#finish{
  --stage-height:clamp(146px,38dvh,370px);
  --performance-height:min(37dvh,365px);
  --performance-width:min(57vw,326px);
  --burst-color:#faac42c4;
  --burst-core:#ffc557;
  background:#0a0710f0;
}
#finish[data-tier=glow]{--burst-color:#c968f2c9;--burst-core:#e091ff;}
#finish[data-tier=complete]{--burst-color:#38d796bf;--burst-core:#76ffc8;}
#finish[data-tier=recap]{--burst-color:#6a8cf1c5;--burst-core:#a9b7ff;}
#failureDialog[open]{--burst-color:#4e84e797;--burst-core:#76abff;}
#finish .finish-content{
  width:var(--outcome-width);
  padding:var(--overlay-top,24px) 10px var(--overlay-bottom,24px);
  gap:clamp(5px,1dvh,11px);
}
#finish .rays,#failureDialog .rays{
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    repeating-conic-gradient(from 7deg at 50% var(--ray-center-y,43%),var(--burst-color) 0deg 8deg,transparent 14deg 29deg),
    radial-gradient(ellipse min(54vw,410px) 31% at 50% var(--ray-center-y,43%),var(--burst-core),var(--burst-color) 43%,transparent 100%);
  mask-image:radial-gradient(ellipse min(71vw,540px) 42% at 50% var(--ray-center-y,43%),#000 10%,#000 34%,transparent 97%);
}
#finish .bee-stage{height:var(--stage-height);width:100%;}
#finish-bee{
  inset:50% auto auto 50%;
  translate:calc(-50% + var(--mascot-axis-shift,0%)) -50%;
  width:var(--performance-width);
  height:var(--performance-height);
  max-width:none;
  will-change:transform;
}
#finish[data-tier=glow]{--mascot-axis-shift:.9%;}
#finish[data-tier=complete],#finish[data-tier=recap]{--mascot-axis-shift:-.75%;}
#finishcopy{
  width:min(96%,420px);
  margin:0;
  color:#ffdc65;
  font-size:clamp(20px,6.15vw,32px);
  font-weight:900;
  line-height:1.14;
  text-wrap:balance;
  -webkit-text-stroke:2px #342027;
  paint-order:stroke fill;
  text-shadow:0 2px 0 #342027;
}
#finish .finish-difficulty{
  display:table;
  margin:0 auto -2px;
  padding:4px 12px 5px;
  color:#211629;
  background:var(--win-accent);
  border:0;
  border-radius:9px 9px 0 0;
  font-weight:850;
  line-height:1;
  animation:none;
}
#finish .next-slot{width:var(--action-width);min-height:clamp(44px,6.5dvh,60px);margin-top:5px;}
#finish .next-slot:has(#next[hidden]) .finish-difficulty{visibility:hidden;}
#finish #next{
  min-height:clamp(44px,6.5dvh,60px);
  margin:0;
  border-radius:999px;
  background:linear-gradient(180deg,#fff8cd,var(--win-accent) 58%);
  box-shadow:0 3px 0 #7d514bbd,0 6px 14px #23172687;
  font-size:clamp(18px,5.25vw,27px);
}
#tool-reward{width:var(--action-width);gap:0;min-height:34px;padding-inline:6px;}
#tool-reward .reward-icon{
  display:block;
  width:clamp(45px,13vw,57px);
  height:clamp(45px,13vw,57px);
  flex:none;
  filter:drop-shadow(0 2px 6px #ffc9708f) drop-shadow(0 0 9px #ffb66166);
}
.reward-meter{gap:4px;}
.reward-meter span{height:clamp(10px,1.6dvh,16px);border-radius:5px;box-shadow:inset 0 2px 0 #ffffff25;}

#failureDialog[open]{
  background:#0b0b17eb;
}
#failureDialog::backdrop{background:#08061090;}
.failure-content{
  position:relative;
  z-index:1;
  width:var(--outcome-width);
  padding:var(--overlay-top,24px) 10px var(--overlay-bottom,24px);
  gap:clamp(8px,1.5dvh,14px);
}
#failureDialog .retry-scene{
  width:100%;
  height:clamp(143px,32dvh,330px);
  overflow:visible;
  animation:outcome-mascot-drop .41s cubic-bezier(.22,.61,.29,1.21) both;
}
#failureDialog .retry-scene img{width:min(52vw,305px);margin-inline:auto;translate:2% 0;}
#failure-copy{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.28em;
  color:#ffdc65;
  text-shadow:0 2px 0 #342027;
  font-size:clamp(18px,5vw,26px);
  font-weight:780;
  line-height:1.16;
  animation:outcome-layer-arrive .26s .56s both;
}
#failure-copy img{width:1.32em;height:1.32em;object-fit:contain;}
#failure-remaining{color:#ff7c80;}
.failure-actions{
  width:var(--action-width);
  margin-block-start:clamp(15px,9.4dvh,82px);
  gap:clamp(8px,1.3dvh,14px);
}
.failure-actions button{
  position:relative;
  min-height:clamp(46px,6.7dvh,62px);
  padding:0 10px;
  border-radius:999px;
  font-size:clamp(18px,6.2vw,29px);
  font-weight:900;
  animation:outcome-action-arrive .25s var(--outcome-action-delay) both;
}
#failure-reward{
  --outcome-action-delay:.76s;
  background:linear-gradient(#276ad8,#244caf);
  color:#fff;
  text-shadow:0 1px 2px #182e6687;
  box-shadow:inset 0 1px 0 #a9cfff88,0 4px 0 #152f7b;
}
#failure-reward:disabled{--outcome-action-alpha:.92;cursor:default;}
#failure-reward small{
  position:absolute;
  inset:-.45em .15em auto auto;
  padding:.14em .38em;
  border-radius:999px;
  background:#14874e;
  color:white;
  font-size:clamp(10px,2.85vw,13px);
  line-height:1.1;
}
#failure-reward small::before{content:'▷';margin-inline-end:.16em;}
#failure-retry{
  --outcome-action-delay:.91s;
  background:linear-gradient(#fff4bd,#ffc766);
  color:#4b2d11;
  box-shadow:inset 0 1px 0 #fff9d9,0 4px 0 #9e5d24;
}

#level-stat-toast{
  inset:50% 0 auto;
  margin:0;
  padding:clamp(9px,3cqw,17px) 3.8%;
  background:#261b29be;
  color:#fffaf3;
  font-size:clamp(17px,6.45cqw,33px);
  font-weight:750;
  line-height:1.22;
}
#level-stat-toast strong{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.16em;
  margin-bottom:.14em;
  color:#ff7468;
  font-size:1.38em;
  line-height:1;
  text-shadow:0 0 9px #f2493749;
}
.hard-flame{
  display:inline-block;
  width:1em;
  height:1em;
  flex:none;
  background:linear-gradient(180deg,#ffa65f,#ff5365 80%);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 1.2c.8 3.4 4.2 5.8 4.1 9.5 1-.7 1.6-1.8 1.8-2.7a9.1 9.1 0 0 1 2 5.9 9 9 0 1 1-18 0c0-3.8 2.1-7.3 5-9.4-.6 2.5 0 4.1 1.4 4.9.2-4 2.3-5.1 3.7-8.2ZM12 13c-1.5 1.8-3.1 2.8-3.1 4.6a3.1 3.1 0 1 0 6.2 0c0-1.7-1.2-3-3.1-4.6Z' fill-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;
}

@keyframes outcome-mascot-drop{
  from{opacity:0;transform:translateY(-32dvh) scale(.88);}
  to{opacity:1;transform:none;}
}
@keyframes outcome-title-arrive{
  from{opacity:0;transform:scale(1.26);}
  to{opacity:1;transform:scale(1);}
}
@keyframes outcome-layer-arrive{
  from{opacity:0;transform:translateY(7px);}
  to{opacity:1;transform:none;}
}
@keyframes outcome-action-arrive{
  from{visibility:hidden;opacity:0;transform:translateY(7px);}
  to{visibility:visible;opacity:var(--outcome-action-alpha,1);transform:none;}
}

@media(max-height:650px){
  #finish .finish-content{gap:5px;}
  #tool-reward .reward-icon{width:42px;height:42px;}
}
@media(prefers-reduced-motion:reduce){
  #failure-title,#failureDialog .retry-scene,#failure-copy,.failure-actions button{animation:none;}
}
.embedded-game #streakDialog {
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:var(--overlay-top,24px) 16px var(--overlay-bottom,24px);
  border:0; border-radius:0; box-sizing:border-box;
  background:radial-gradient(ellipse at 50% 25%,#fffdf2,#fff1d6 67%,#f6e4c9);
  color:#6f4a35;
}
#streakDialog::backdrop { background:#fff3dc; }
.streak-panel { width:min(100%,560px); min-height:100%; margin:auto; display:grid; align-content:center; justify-items:center; gap:clamp(14px,3dvh,32px); text-align:center; }
.streak-panel h2 { margin:0; font-size:clamp(22px,5.5vw,38px); }
.streak-panel h2:focus { outline:none; }
#streak-event-dates { margin:0; font-weight:750; }
#streakDialog #streak-sun {
  --ray-light:#f7e5b8; --ray-dark:#f2d8a2; --core-light:#fff6cd; --core-dark:#f8edba;
  display:grid; place-items:center; appearance:none; -webkit-appearance:none;
  width:min(41vw,32dvh,420px); aspect-ratio:1; padding:0; border:0; border-radius:50%;
  background:transparent; box-shadow:none; opacity:1; touch-action:manipulation;
}
#streakDialog #streak-sun svg { display:block; width:100%; height:auto; aspect-ratio:1; overflow:visible; stroke:none; }
#streak-sun:focus-visible { outline:2px solid #956326; outline-offset:5px; }
#streak-sun stop { transition:stop-color .4s ease; }
#streak-sun .sun-ray-light { stop-color:var(--ray-light); }
#streak-sun .sun-ray-dark { stop-color:var(--ray-dark); }
#streak-sun .sun-core-light { stop-color:var(--core-light); }
#streak-sun .sun-core-dark { stop-color:var(--core-dark); }
#streakDialog[data-lit=true] #streak-sun {
  --ray-light:#ffc13d; --ray-dark:#ec8c12; --core-light:#fff891; --core-dark:#ffce43;
  filter:drop-shadow(0 0 16px #ffb73f66);
}
#streak-prompt { max-width:23ch; margin:0; font-size:clamp(18px,4.8vw,27px); font-weight:750; line-height:1.3; }
#streak-prompt:focus { outline:none; }
#streak-details { width:min(100%,490px); }
#streak-details:not([hidden]) { display:grid; justify-items:center; gap:clamp(22px,3.8dvh,36px); }
#streak-details p { margin:0 0 8px; font-size:clamp(15px,3.9vw,22px); font-weight:750; }
#streak-details:not([hidden]) p { margin:0; }
#streak-calendar { width:100%; }
#streak-details #streak-month { font-size:15px; margin:0 0 10px; }
#streakDialog[data-event] #streak-details { gap:clamp(24px,3.8dvh,36px); }
#streak-details p#streak-event-goal { max-width:28ch; font-size:clamp(15px,3.9vw,22px); line-height:1.3; padding:0; background:none; border-radius:0; }
#streak-details p:nth-child(2) { display:inline-block; padding:4px 15px; border-radius:999px; background:#fffdf2; }
#streak-current { display:block; font-size:clamp(42px,8dvh,76px); line-height:1; color:#9b5018; }
#streak-days { width:100%; list-style:none; display:grid; grid-template-columns:repeat(7,1fr); gap:3px; padding:0; margin:0; }
#streak-days li { display:grid; gap:4px; place-items:center; font-size:10px; font-weight:800; }
#streak-days span { width:clamp(25px,7.6vw,44px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:#e6d8c4; }
#streak-days .lit span { color:#fff; background:#b96a25; }
#streak-days img { width:24px; }
#streak-days .lit img { width:13px; position:absolute; inset:auto -3px -2px auto; }
#streak-days .lit span { position:relative; }
#streak-continue { width:min(88%,280px); min-height:48px; border-radius:100px; border-color:#9d591e; background:#e99032; color:#392334; font-size:17px; }
@media(prefers-reduced-motion:reduce){#streak-sun stop{transition:none}}
.failure-encouragement { margin:3px 0; text-align:center; font-size:14px; font-weight:750; color:#fff4df; }
#finish[data-tier=persevered] { --burst-color:#e39a54c5; --burst-core:#ffd48c; }

#failure-copy>span{display:inline;line-height:inherit}
#failure-copy #failure-remaining{
  display:inline;position:static;vertical-align:baseline;transform:none;line-height:inherit;font:inherit;
}