@font-face {
  font-family: f;
  src: url("/media/games/scream-ball/fonts/JungleAdventurer.ttf");
  font-display: swap;
}

#full-area {
  --sb-cyan: #4EFFF7;
  --sb-gold: #FFE04E;
  --sb-coin: #FFD54F;
  --sb-danger: #FF4E4E;
  --sb-warning: #FFC93C;
  --sb-ink: #16330A;
  --sb-outline: #120826;
  --sb-lab: "/media/games/scream-ball/images/lab";

  width: 100%;
  height: 100vh;
  background: #0C0718;
  position: absolute;
  overflow: hidden;
  user-select: none;
  font-family: f, sans-serif;
  color: #E8E4F5;
}

#full-area * {
  box-sizing: border-box;
}

#game-area {
  position: absolute;
  width: 1280px;
  height: 720px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: #000;
}

#arena {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.scrim {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}

.scrim-top {
  top: 0;
  height: 15%;
  background: linear-gradient(180deg, rgba(0, 0, 0, .68), transparent);
}

.scrim-bottom {
  bottom: 0;
  height: 24%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .55));
}

#content {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
}

.sb-outline {
  --o: 2px;
  text-shadow:
    calc(var(--o) * -1) calc(var(--o) * -1) 0 var(--sb-outline),
    0 calc(var(--o) * -1) 0 var(--sb-outline),
    var(--o) calc(var(--o) * -1) 0 var(--sb-outline),
    calc(var(--o) * -1) 0 0 var(--sb-outline),
    var(--o) 0 0 var(--sb-outline),
    calc(var(--o) * -1) var(--o) 0 var(--sb-outline),
    0 var(--o) 0 var(--sb-outline),
    var(--o) var(--o) 0 var(--sb-outline);
}

.hourglass {
  display: inline-block;
  object-fit: contain;
  transform-origin: 50% 70%;
}

@keyframes sbGlassShake {
  0%, 75% { transform: rotate(0deg); }
  78.5% { transform: rotate(-14deg); }
  82% { transform: rotate(14deg); }
  85.5% { transform: rotate(-9deg); }
  89% { transform: rotate(9deg); }
  92.5%, 100% { transform: rotate(0deg); }
}

@keyframes sbGlassTilt {
  from { transform: rotate(-7deg); }
  to { transform: rotate(7deg); }
}

.hourglass-sm {
  width: 28px;
  height: 41px;
}

.hourglass-lg {
  position: absolute;
  left: 0;
  top: -4px;
  width: 38px;
  height: 56px;
  z-index: 2;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6));
  animation: sbGlassShake 2s linear infinite;
}

.hourglass-xl {
  width: 104px;
  height: 154px;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .65));
  animation: sbGlassTilt .9s cubic-bezier(.4, 0, .2, 1) infinite alternate;
}

.orb-canvas {
  display: block;
  pointer-events: none;
}

#play-section,
#play-section .content {
  position: absolute;
  inset: 0;
}

#waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

#scene {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% - 85px);
  z-index: 5;
}

#bonus-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bonus-orb {
  position: absolute;
  width: 160px;
  height: 160px;
  pointer-events: none;
  will-change: transform, opacity;
}

#ball {
  position: absolute;
  width: 48px;
  height: 48px;
  z-index: 6;
  will-change: transform;
}

#ball-sprite {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 133px;
  height: 143px;
  object-fit: contain;
  will-change: transform;
}

#header {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.hud-pill {
  position: relative;
  --bed: 6px;
  --radius: 18px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
}

.hud-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateY(var(--bed));
  border-radius: var(--radius);
  background: rgba(6, 3, 15, .85);
  z-index: 0;
}

.hud-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #3B2A6B 0%, #241748 46%, #150C2E 100%);
  border: 1px solid rgba(255, 255, 255, .22);
  z-index: 1;
}

.hud-pill > * {
  position: relative;
  z-index: 2;
}

.hud-well {
  display: flex;
  align-items: center;
  justify-content: center;
}

#score-stack {
  position: absolute;
  top: 18px;
  left: -22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Padding is symmetric so the number sits dead centre in the pill; the orb
   overlaps the right edge without shifting it. */
#score {
  height: 55px;
  padding: 7px 37px 9px 37px;
}

#score .hud-well {
  width: 48px;
}

#score span {
  font-family: f, sans-serif;
  font-size: 37px;
  line-height: 1;
  color: #fff;
  transform: translateY(3px);
  will-change: transform;
}

.score-orb {
  position: absolute;
  right: -8px;
  top: 50%;
  margin-top: -29px;
  width: 58px;
  height: 58px;
  z-index: 2;
}

/* Extra left padding: the pill bleeds 22px off the stage, so the star needs to
   start inboard of that or it gets clipped by the screen edge. */
#best-pill {
  height: 38px;
  --bed: 5px;
  --radius: 999px;
  padding: 0 18px 0 38px;
  gap: 9px;
  font-family: f, sans-serif;
  font-size: 21px;
  color: #fff;
}

#best-pill img {
  width: 24px;
  height: 24px;
  flex: none;
  object-fit: contain;
}

#best-pill span {
  transform: translateY(1px);
}

/* Countdown sits centred at the top of the stage. */
#timer-box {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  height: 55px;
  padding: 7px 35px 9px 34px;
}

#timer-box .hud-well {
  width: 96px;
  justify-content: flex-end;
}

#timer {
  font-family: f, sans-serif;
  font-size: 37px;
  line-height: 1;
  color: #fff;
  text-align: right;
  transform: translateY(3px);
  will-change: transform;
}

#timer.is-warning {
  color: var(--sb-warning);
}

#timer.is-danger {
  color: var(--sb-danger);
}

/* Sits below the centred countdown pill (18px + 55px + breathing room). */
#transcription {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 92px;
  width: 56%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1px;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
}

#transcription span {
  font-family: f, sans-serif;
  font-weight: 900;
  font-size: 37px;
  line-height: 1;
  display: inline-block;
}

#transcription .rail-space {
  width: 12px;
}

#timesup-section {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.timesup-dim {
  position: absolute;
  inset: 0;
  background: rgba(6, 4, 14, .32);
}

#timesup-section .hourglass-xl,
.timesup-text {
  position: relative;
  z-index: 2;
}

.timesup-text {
  --o: 3px;
  font-family: f, sans-serif;
  font-size: 46px;
  letter-spacing: 2px;
  color: #fff;
  text-shadow:
    calc(var(--o) * -1) calc(var(--o) * -1) 0 var(--sb-outline),
    0 calc(var(--o) * -1) 0 var(--sb-outline),
    var(--o) calc(var(--o) * -1) 0 var(--sb-outline),
    calc(var(--o) * -1) 0 0 var(--sb-outline),
    var(--o) 0 0 var(--sb-outline),
    calc(var(--o) * -1) var(--o) 0 var(--sb-outline),
    0 var(--o) 0 var(--sb-outline),
    var(--o) var(--o) 0 var(--sb-outline);
}

#timesup-sprite {
  position: absolute;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  width: 158px;
  height: 170px;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .65));
}

/* Centre with flex, not transform: devhk.scaleIn() writes `transform: scale(1)`
   onto .content, which would wipe a translate(-50%,-50%) and throw the panel
   down and to the right. */

/* ── GAME OVER ─────────────────────────────────────────────────────────
   Ported from the Android EndView (ScreamBallScreen.kt): lab panel with a
   "GAME OVER" tab straddling its top edge, orb + hero score, BEST/coin
   pills, the AI scream report, and the slumped scientist below. */
#end-section {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999999999;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* Transparent so the live arena canvas keeps playing behind the panel. */
  background: rgba(6, 4, 14, .62);
}

#end-section .content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: scale(0);
  will-change: transform;
}

/* The lab card: panel_v.png stretched to the box, as the design does with
   `background-size: 100% 100%`. Its painted frame is 23px of a 532x932 source,
   so it lands at 4.3% of the box's width and 2.5% of its height — every
   .sb-panel needs horizontal padding past that or text sits on the border. */
.sb-panel {
  background: url("/media/games/scream-ball/images/lab/panel_v.png") 0 0 / 100% 100% no-repeat;
}

#end-panel {
  position: relative;
  width: 500px;
  max-width: 88%;
  /* Lifts the panel so the scientist hanging off the bottom stays on stage. */
  margin-bottom: 80px;
  /* 22px of frame down each side at this width, plus breathing room. */
  padding: 36px 34px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .55));
}

/* 3-slice title tab: fixed-width end caps with the centre slice stretched
   between them. Cap/inset/label ratios come from the 52px reference tab. */
.sb-tab {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  height: 66px;
  min-width: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background:
    url("/media/games/scream-ball/images/lab/title_orange_l.png") left center / 89px 100% no-repeat,
    url("/media/games/scream-ball/images/lab/title_orange_r.png") right center / 89px 100% no-repeat,
    url("/media/games/scream-ball/images/lab/title_orange_c.png") 86px center / calc(100% - 172px) 100% no-repeat;
}

/* The banner art carries a ridge along its top, so its optical centre sits
   below the geometric one — nudge the label down into the middle of the plate. */
.sb-tab-label {
  --o: 3px;
  padding: 0 96px;
  font-family: f, sans-serif;
  font-size: 31px;
  line-height: 1;
  letter-spacing: 1px;
  color: #fff;
  white-space: nowrap;
  transform: translateY(5px);
}

#end-score-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Same host size as an in-game collectible, so the star ring orbits at exactly
   the radius and rhythm it does during play. */
.sb-end-orb {
  width: 128px;
  height: 128px;
  flex: none;
}

.sb-end-orb.is-dim {
  opacity: .55;
}

.sb-end-orb .orb-canvas {
  width: 100%;
  height: 100%;
}

#final-score {
  --o: 3px;
  font-family: f, sans-serif;
  font-size: 68px;
  line-height: 1;
  color: var(--sb-gold);
}

#end-caption {
  margin-top: 5px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3.5px;
  color: rgba(255, 255, 255, .6);
}

#end-pills {
  margin-top: 12px;
  display: flex;
  gap: 10px;
}

.sb-stat-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 15px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .08);
}

.sb-stat-pill img {
  width: 21px;
  height: 21px;
  flex: none;
  object-fit: contain;
}

.sb-stat-pill span {
  font-family: f, sans-serif;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  transform: translateY(1px);
}

.sb-stat-pill .sb-coin-value {
  color: var(--sb-coin);
}

.sb-stat-pill em {
  font-style: normal;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .55);
}

/* A second, smaller lab panel nested inside the game-over panel. */
#analysis-container {
  margin-top: 18px;
  width: 100%;
  height: 162px;
  /* Wide and short, so the frame stretches to ~19px at the sides and ~4px top
     and bottom — the padding has to be asymmetric to match. */
  padding: 13px 28px 15px;
  display: flex;
  flex-direction: column;
  transform: scale(0);
}

.sb-report-title {
  font-family: f, sans-serif;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--sb-cyan);
  text-shadow: 0 0 12px rgba(78, 255, 247, .6);
}

.sb-report-rule {
  margin-top: 7px;
  height: 1px;
  background: rgba(78, 255, 247, .22);
}

/* `margin: auto 0` on the inner block centres it while it fits and still
   scrolls from the top once the report is longer than the card. */
.sb-report-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sb-report-inner {
  margin: auto 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.sb-report-spinner {
  display: none;
  width: 32px;
  height: 32px;
  flex: none;
}

#analysis-container.is-loading .sb-report-spinner {
  display: block;
}

#analysis-container #analysis-text {
  margin: 0;
  width: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.35;
  text-align: left;
  color: rgba(255, 255, 255, .94);
}

#analysis-container.is-loading #analysis-text,
#analysis-container.is-empty #analysis-text {
  text-align: center;
  font-weight: 500;
}

#analysis-container.is-empty #analysis-text {
  color: var(--sb-gold);
}

#end-btns {
  margin-top: 18px;
  width: 100%;
  display: flex;
  gap: 12px;
}

/* 3-slice lab button. The face carries the art so devhk.scaleIn()'s inline
   transform on the button itself can't wipe the pressed-state nudge. */
.sb-btn {
  position: relative;
  flex: 1;
  height: 58px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: scale(0);
}

.sb-btn-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: f, sans-serif;
  font-size: 19px;
  letter-spacing: 1px;
  color: var(--sb-ink);
  transition: transform .08s ease, filter .15s ease;
}

.sb-btn:hover .sb-btn-face {
  filter: brightness(1.07);
}

.sb-btn:active .sb-btn-face {
  transform: translateY(3px);
}

.sb-btn-blue .sb-btn-face {
  background:
    url("/media/games/scream-ball/images/lab/btn_blue_l.png") left center / 26px 100% no-repeat,
    url("/media/games/scream-ball/images/lab/btn_blue_r.png") right center / 26px 100% no-repeat,
    url("/media/games/scream-ball/images/lab/btn_blue_c.png") 24px center / calc(100% - 48px) 100% no-repeat;
}

.sb-btn-yellow .sb-btn-face {
  background:
    url("/media/games/scream-ball/images/lab/btn_yellow_l.png") left center / 26px 100% no-repeat,
    url("/media/games/scream-ball/images/lab/btn_yellow_r.png") right center / 26px 100% no-repeat,
    url("/media/games/scream-ball/images/lab/btn_yellow_c.png") 24px center / calc(100% - 48px) 100% no-repeat;
}

/* Sits low enough that the scientist's body clears the button row and only
   his silhouette straddles the panel's bottom edge. */
#end-sprite {
  position: absolute;
  left: 50%;
  bottom: -126px;
  transform: translateX(-50%);
  width: 185px;
  height: 202px;
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5));
}


#skip-intro-btn {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 999999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  font-family: f, sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  color: #fff;
  padding: 8px 22px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(180deg, #3B2A6B 0%, #241748 46%, #150C2E 100%);
  box-shadow: 0 6px 0 rgba(6, 3, 16, .85), 0 10px 18px rgba(0, 0, 0, .45);
}

#skip-intro-btn.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

@media (max-width: 600px) {
  #game-area {
    width: 100%;
    height: 100%;
  }

  #transcription {
    top: 15.5%;
    width: 70%;
  }

  #transcription span { font-size: 30px; }

  #score-stack, #timer-box { top: 12px; }

  #score span,
  #timer { font-size: 30px; }

  #timer-box .hud-well { width: 78px; }
  #score .hud-well { width: 39px; }

  /* The stage stops being a scaled 1280x720 box below 600px and becomes the
     viewport itself, so the game-over panel has to shrink on its own. */
  #end-panel {
    max-width: 92%;
    margin-bottom: 62px;
    padding: 30px 26px 26px;
  }

  .sb-tab {
    top: -34px;
    height: 56px;
    min-width: 290px;
    background-size: 76px 100%, 76px 100%, calc(100% - 146px) 100%;
  }

  .sb-tab-label {
    --o: 2px;
    padding: 0 80px;
    font-size: 26px;
  }

  /* .sb-end-orb keeps its 128px box: the orbiting stars are drawn at a fixed
     radius, so a smaller canvas would clip them. */
  #final-score { font-size: 56px; }
  #end-caption { font-size: 11px; letter-spacing: 3px; }

  .sb-stat-pill { padding: 5px 13px; }
  .sb-stat-pill img { width: 19px; height: 19px; }
  .sb-stat-pill span { font-size: 20px; }
  .sb-stat-pill em { font-size: 12px; }

  #analysis-container { height: 138px; margin-top: 14px; padding: 11px 21px 13px; }
  .sb-report-title { font-size: 15px; }
  #analysis-container #analysis-text { font-size: 15px; }

  /* Stacked full-width: side by side, "SWITCH GAME" runs off the flat centre
     slice onto the rounded caps once the stage is phone-width. */
  #end-btns { margin-top: 14px; gap: 9px; flex-direction: column; }
  /* flex:1 would divide the row's height between them once stacked. */
  .sb-btn { flex: none; width: 100%; height: 52px; }
  .sb-btn-face { font-size: 17px; }

  .sb-btn-blue .sb-btn-face {
    background:
      url("/media/games/scream-ball/images/lab/btn_blue_l.png") left center / 23px 100% no-repeat,
      url("/media/games/scream-ball/images/lab/btn_blue_r.png") right center / 23px 100% no-repeat,
      url("/media/games/scream-ball/images/lab/btn_blue_c.png") 21px center / calc(100% - 42px) 100% no-repeat;
  }

  .sb-btn-yellow .sb-btn-face {
    background:
      url("/media/games/scream-ball/images/lab/btn_yellow_l.png") left center / 23px 100% no-repeat,
      url("/media/games/scream-ball/images/lab/btn_yellow_r.png") right center / 23px 100% no-repeat,
      url("/media/games/scream-ball/images/lab/btn_yellow_c.png") 21px center / calc(100% - 42px) 100% no-repeat;
  }

  #end-sprite {
    width: 150px;
    height: 164px;
    bottom: -104px;
  }

  .timesup-text { font-size: 38px; }
  #timesup-sprite { width: 130px; height: 140px; }
}

/* Phone-width stages that are also short: the panel needs ~665px between the
   title tab and the scientist's feet, so shrink it whole rather than letting
   either end run off the stage. Each step is sized for the bottom of its
   range — the tab clearing the top edge is what binds. */
@media (max-width: 600px) and (max-height: 600px) {
  #end-panel { transform: scale(.76); }
}

@media (max-width: 600px) and (max-height: 520px) {
  #end-panel { transform: scale(.63); }
}

@media (max-width: 600px) and (max-height: 440px) {
  #end-panel { transform: scale(.49); }
}