/* =====================================================================================================
   GAME OVER (js/screens.js UI.gameOver): a soft card over the collapse scene. The BURNOUT face smokes on a sticker
   badge, the climb that got her there lights up face by face, Voss has his line, then what she cleared, one real tip
   and the way back in. Easy on the eyes: no red, nothing flashes, nothing shakes.
   ===================================================================================================== */
#screen-end .go-card { --base: translateY(-50%); position: absolute; left: 64px; top: 50%; width: 500px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 30px 26px; text-align: center;
  background: #fff7f0; border: 3px solid #3a2433; border-radius: 28px; box-shadow: 0 8px 0 #3a2433, 0 22px 44px rgba(30,16,36,.32);
  transform: var(--base) rotate(-1deg); animation: go-in .7s cubic-bezier(.25,1.3,.5,1) both; }
@keyframes go-in { from { transform: var(--base) translateY(46px) rotate(-3deg); opacity: 0; } to { transform: var(--base) rotate(-1deg); opacity: 1; } }
html.portrait #screen-end .go-card { --base: translate(-50%, -50%); left: 50%; width: 600px; gap: 14px; }

.go-card h3 { margin: 6px 0 0; color: #8a6a80; font: 900 13px var(--font-cute); letter-spacing: .2em; text-transform: uppercase; }
.go-card h2 { margin: 0; font: 400 54px/1 var(--font-display); letter-spacing: .02em; color: #fff; -webkit-text-stroke: 3px #3a2433; paint-order: stroke fill; text-shadow: 0 5px 0 #3a2433; }

/* ---------- the BURNOUT face, a sticker badge breaking the card's top edge, smoking ---------- */
.go-hero { position: relative; width: 120px; height: 120px; margin-top: -64px; order: -1; }
.go-face { width: 100%; height: 100%; box-sizing: border-box; padding: 6px; border-radius: 50%; background: #efe7ef; border: 4px solid #3a2433;
  box-shadow: 0 0 0 6px #b9a3e6, 0 0 0 9px #3a2433, 0 9px 0 9px rgba(58,36,51,.55); animation: go-woozy 3.2s ease-in-out infinite; }
.go-face .ico-svg { display: block; width: 100%; height: 100%; }
@keyframes go-woozy { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(6deg) translateY(2px); } }
.go-puff { position: absolute; top: 4px; left: 56%; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; background: #e6dfe8; border: 2.5px solid #3a2433;
  opacity: 0; animation: go-puff 2.7s ease-out infinite; }
.go-puff.p1 { left: 30%; width: 15px; height: 15px; animation-delay: .9s; --dx: -16px; }
.go-puff.p2 { left: 70%; width: 13px; height: 13px; animation-delay: 1.8s; --dx: 14px; }
@keyframes go-puff { 0% { transform: translate(0, 10px) scale(.3); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--dx, 6px), -46px) scale(1.25); opacity: 0; } }

/* ---------- the climb, replayed: each stage lights up in turn, ending on BURNOUT ---------- */
.go-climb { display: flex; align-items: center; margin: 2px 0 4px; }
.go-step { display: block; width: 40px; height: 40px; box-sizing: border-box; padding: 2px; border-radius: 50%; background: #fff7f0; border: 3px solid #3a2433;
  filter: grayscale(1) opacity(.45); animation: go-lit .45s cubic-bezier(.3,1.7,.5,1) calc(.55s + var(--i) * .24s) both; }
.go-step .ico-svg { display: block; width: 100%; height: 100%; }
.go-step.burn { width: 50px; height: 50px; background: #efe7ef; }
@keyframes go-lit { 0% { filter: grayscale(1) opacity(.45); transform: none; box-shadow: 0 0 0 0 var(--c); } 50% { filter: none; transform: scale(1.28); box-shadow: 0 0 0 5px var(--c); }
  100% { filter: none; transform: none; box-shadow: 0 0 0 0 var(--c); } }
.go-rung { display: block; flex: none; width: 20px; height: 11px; margin: 0 -2px; box-sizing: border-box; border-block: 3px solid #3a2433;
  background: #ece3ef linear-gradient(90deg, #d7c6f5, #b9a3e6) no-repeat; background-size: 0 100%; animation: go-fill .22s ease-out calc(.44s + var(--i) * .24s) both; }
@keyframes go-fill { to { background-size: 100% 100%; } }

/* ---------- Voss's line, in a speech bubble ---------- */
.go-quote { display: flex; align-items: center; gap: 12px; max-width: 100%; }
.go-voss { flex: none; width: 50px; height: 50px; box-sizing: border-box; padding: 3px; border-radius: 50%; background: #f3e6df; border: 3px solid #3a2433; }
.go-voss .ico-svg { display: block; width: 100%; height: 100%; }
.go-quote p { position: relative; margin: 0; padding: 8px 16px; background: #fff; border: 3px solid #3a2433; border-radius: 18px; box-shadow: 0 3px 0 #3a2433;
  font: 700 19px/1.3 var(--font-cute); color: #5a2e4e; text-align: left; }
.go-quote p::before { content: ''; position: absolute; left: -11px; top: 50%; width: 14px; height: 14px; margin-top: -8px; background: #fff;
  border-left: 3px solid #3a2433; border-bottom: 3px solid #3a2433; transform: rotate(45deg); }

/* ---------- what she got done, and one real tip ---------- */
.go-stats { display: flex; gap: 10px; }
.go-pill { display: inline-flex; align-items: baseline; gap: 7px; padding: 3px 14px 4px; border-radius: 999px; border: 2.5px solid #3a2433; box-shadow: 0 3px 0 #3a2433; }
.go-pill b { font: 400 24px/1 var(--font-display); color: #3a2433; }
.go-pill small { font: 900 12px var(--font-cute); letter-spacing: .14em; text-transform: uppercase; color: #6d5468; }
.go-pill.good { background: #dff7ea; } .go-pill.bad { background: #efe3f6; }
.go-tip { display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 14px; border-radius: 14px; background: #fff3c4; border: 2.5px dashed #d1a83c; text-align: left; }
.go-tip b { flex: none; margin-top: 1px; padding: 1px 9px; border-radius: 999px; background: #ffe36a; border: 2px solid #3a2433; font: 900 12px/1.5 var(--font-cute); letter-spacing: .12em; color: #3a2433; }
.go-tip p { margin: 0; font: 700 16px/1.35 var(--font-cute); color: #3a2433; }

.go-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }
.go-btns .btn { font-size: 19px; padding: 13px 24px; }
.go-retry { animation: go-bob 1.8s ease-in-out 2.2s infinite; }
@keyframes go-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }

html[dir=rtl] .go-quote p, html[dir=rtl] .go-tip { text-align: right; }
html[dir=rtl] .go-quote p::before { left: auto; right: -11px; transform: rotate(-135deg); }

@media (prefers-reduced-motion: reduce) {
  #screen-end .go-card { animation: none; }
  .go-face, .go-puff, .go-retry { animation: none; }
  .go-step, .go-rung { animation-duration: .01s; }
}