@font-face {
  font-family: "Jersey 10";
  src: url("/media/games/sheep-squeeze/fonts/Jersey10-Regular.ttf") format("truetype");
  font-display: swap;
}
body {
  padding: 0;
  margin: 0;
}

::-webkit-scrollbar {
  width: 10px;
  background: transparent;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.327);
  height: 7px;
  border-radius: 100px;
}

::-webkit-scrollbar-thumb {
  background: #8ec3de;
  border-radius: 100px;
}

#full-area {
  width: 100%;
  height: 100vh;
  background: #000;
  position: absolute;
  overflow: hidden;
  user-select: none;
}

#game-area {
  position: absolute;
  width: 1180px;
  height: 720px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1) !important;
}

#gameContainer {
  width: 1280px;
  height: 720px;
  position: absolute;
  overflow: hidden;
  margin: 0 auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Jersey 10", "Fredoka", sans-serif;
}

#renderCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  display: block;
}

.loading-card {
  font-family: "Jersey 10", "Fredoka", sans-serif;
  color: #FFF8E7;
  text-align: center;
  letter-spacing: 1px;
}
.loading-card h2 {
  margin: 0;
  font-weight: 400;
  font-size: 44px;
}

.ss-head {
  display: block;
  height: auto;
  image-rendering: auto;
  pointer-events: none;
}

.squash-tall {
  transform: scale(0.6, 1.3);
}

.squash-flat {
  transform: scale(1.35, 0.6);
}

.start-screen,
.start-screen *,
.game-ui,
.game-ui *,
#sogPitchBar,
#sogPitchBar *,
.loading-card,
.loading-card * {
  font-family: "Jersey 10", "Fredoka", sans-serif;
}

.game-ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  font-family: "Jersey 10", "Fredoka", sans-serif;
}

.game-ui::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(rgba(20, 30, 20, 0.2), rgba(20, 30, 20, 0) 24%);
}

.sky-birds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.bird {
  position: absolute;
  left: -90px;
  will-change: transform;
  animation: birdFly linear infinite;
}
.bird svg {
  display: block;
  width: 100%;
  height: auto;
  fill: rgba(35, 55, 70, 0.75);
}
.bird .wings-up {
  animation: birdFlapUp steps(1) infinite;
}
.bird .wings-down {
  position: absolute;
  inset: 0;
  animation: birdFlapDown steps(1) infinite;
}

.bird.b1 {
  top: 64px;
  width: 42px;
  animation-duration: 26s;
}

.bird.b1 svg {
  animation-duration: 0.5s;
}

.bird.b2 {
  top: 122px;
  width: 35px;
  animation-duration: 34s;
  animation-delay: -13s;
}

.bird.b2 svg {
  animation-duration: 0.42s;
  animation-delay: 0.15s;
}

.bird.b3 {
  top: 38px;
  width: 28px;
  animation-duration: 42s;
  animation-delay: -27s;
}

.bird.b3 svg {
  animation-duration: 0.58s;
  animation-delay: 0.3s;
}

@keyframes birdFly {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(345px, -12px, 0);
  }
  50% {
    transform: translate3d(690px, 6px, 0);
  }
  75% {
    transform: translate3d(1035px, -12px, 0);
  }
  100% {
    transform: translate3d(1380px, 6px, 0);
  }
}
@keyframes birdFlapUp {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes birdFlapDown {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.sheep-hud {
  position: absolute;
  top: 16px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  z-index: 100;
}

.plaque {
  min-width: 150px;
  padding: 6px 20px 10px;
  background: #FFF8E7;
  border: 5px solid #9A6431;
  border-radius: 26px;
  box-shadow: 0 7px 0 #6B3F16, 0 20px 22px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.plaque.best {
  background: #FFE07A;
  border-color: #C98B00;
  box-shadow: 0 7px 0 #8A5A00, 0 20px 22px rgba(0, 0, 0, 0.3);
}

.plaque-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 22px;
  line-height: 1;
  color: #9A6431;
}
.plaque-label .crown {
  width: 17px;
  height: 17px;
  fill: #C98B00;
}

.plaque.best .plaque-label {
  color: #8A5A00;
}

.plaque-value-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.plaque-value {
  font-size: 54px;
  line-height: 1;
  color: #2D2A24;
}

.plaque-unit {
  font-size: 24px;
  line-height: 1;
  color: #9A8F7C;
}

.plaque.best .plaque-value {
  color: #5A3A00;
}

.plaque.best .plaque-unit {
  color: rgba(138, 90, 0, 0.8);
}

.ss-card {
  position: relative;
  width: 400px;
  box-sizing: border-box;
  padding: 66px 26px 26px;
  background: #FFF8E7;
  border: 7px solid #9A6431;
  border-radius: 40px;
  box-shadow: 0 10px 0 #6B3F16, 0 24px 22px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}

.card-head {
  position: absolute;
  left: 50%;
  top: -118px;
  width: 180px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 5px rgba(0, 0, 0, 0.3));
}

.ss-btn {
  width: 100%;
  height: 64px;
  border: none;
  border-radius: 26px;
  padding: 0 16px;
  margin-bottom: 8px;
  font-family: "Jersey 10", "Fredoka", sans-serif;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 1px;
  color: #fff;
  cursor: pointer;
  outline: none;
  pointer-events: auto;
  white-space: nowrap;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.ss-btn.green {
  background: #5CC23B;
  box-shadow: 0 8px 0 #3A8A22;
}
.ss-btn.orange {
  background: #FF9A2E;
  box-shadow: 0 8px 0 #C46A0E;
}
.ss-btn.stone {
  background: #A39A8A;
  box-shadow: 0 8px 0 #736B5D;
}
.ss-btn:hover {
  transform: translateY(-2px);
}
.ss-btn.green:hover {
  box-shadow: 0 10px 0 #3A8A22;
}
.ss-btn.orange:hover {
  box-shadow: 0 10px 0 #C46A0E;
}
.ss-btn.stone:hover {
  box-shadow: 0 10px 0 #736B5D;
}
.ss-btn:active {
  transform: translateY(6px);
}
.ss-btn.green:active {
  box-shadow: 0 2px 0 #3A8A22;
}
.ss-btn.orange:active {
  box-shadow: 0 2px 0 #C46A0E;
}
.ss-btn.stone:active {
  box-shadow: 0 2px 0 #736B5D;
}

.start-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 30;
  pointer-events: auto;
}

.start-screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50px;
  width: calc(100% + 100px);
  height: 100%;
  background: rgba(15, 27, 34, 0.35);
  z-index: 0;
}

@media (min-width: 601px) {
  .start-screen {
    z-index: 99999999999999;
    pointer-events: none;
  }
  .start-screen .game-title {
    display: none;
  }
  .start-screen {
    justify-content: flex-end;
    padding-bottom: 96px;
    box-sizing: border-box;
  }
  .start-screen::before {
    background: linear-gradient(to top, rgba(15, 27, 34, 0.55), rgba(15, 27, 34, 0) 40%);
  }
  .start-screen .ss-card {
    pointer-events: auto;
    width: auto;
    padding: 12px 14px;
    border-width: 6px;
    border-radius: 32px;
    box-shadow: 0 8px 0 #6B3F16, 0 18px 20px rgba(0, 0, 0, 0.3);
  }
  .start-screen .card-head,
  .start-screen .game-subtitle,
  .start-screen .instruction-row:last-child {
    display: none;
  }
  .start-screen .start-container,
  .start-screen .start-instructions {
    flex-direction: row;
    align-items: center;
    width: auto;
    gap: 10px;
  }
  .start-screen .instruction-row {
    padding: 6px 18px 6px 8px;
  }
  .start-screen .instruction-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
  }
  .start-screen .start-game-btn {
    width: 210px;
    margin: 0 0 8px;
  }
}
.game-title {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  z-index: 20;
}

.game-logo {
  width: 300px;
  height: auto;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.25));
}

.start-card {
  z-index: 1;
  animation: ssPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ssPop {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  55% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.start-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.game-subtitle {
  font-size: 30px;
  line-height: 1;
  color: #9A6431;
  text-align: center;
  margin-bottom: 2px;
}

.start-instructions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.instruction-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  background: #F3E6C6;
  border-radius: 20px;
}

.instruction-icon {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 17px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.instruction-icon .ss-head {
  width: 38px;
}
.instruction-icon .flag {
  width: 30px;
  height: 36px;
}
.instruction-icon .flag .pole {
  fill: #9A6431;
}
.instruction-icon .flag .pennant {
  fill: #C98B00;
}

.instruction-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  font-family: "Jersey 10", "Fredoka", sans-serif;
}
.instruction-text strong {
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
}
.instruction-text strong.high {
  color: #48B02A;
}
.instruction-text strong.low {
  color: #E0473A;
}
.instruction-text strong.goal {
  color: #D49A00;
}
.instruction-text span {
  font-size: 23px;
  line-height: 1;
  color: #6F5A3C;
  white-space: nowrap;
}

.start-game-btn {
  margin-top: 8px;
  margin-bottom: 0;
}

.game-over-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 25;
  pointer-events: auto;
  display: none;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-over-overlay.active {
  opacity: 1;
}

.game-over-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  z-index: 30;
  pointer-events: auto;
  opacity: 0;
  transform: scale(0.8);
  animation: none;
}

.game-over-modal.active {
  opacity: 1;
  animation: modalBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modalBounce {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  40% {
    transform: scale(1.05);
    opacity: 1;
  }
  60% {
    transform: scale(0.98);
  }
  80% {
    transform: scale(1.01);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.game-over-card {
  margin-top: 76px;
}

.game-over-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.game-over-title {
  white-space: nowrap;
  font-size: 54px;
  line-height: 1;
  color: #6B3F16;
  text-align: center;
}

.game-over-score-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.game-over-score {
  font-size: 110px;
  line-height: 0.9;
  color: #2D2A24;
}

.game-over-unit {
  font-size: 50px;
  line-height: 1;
  color: #9A8F7C;
}

.game-over-chips {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 27px;
  line-height: 1;
  white-space: nowrap;
  color: #8A5A00;
  box-sizing: border-box;
}
.chip.best {
  background: #FFE07A;
}
.chip .star {
  width: 18px;
  height: 18px;
  fill: #8A5A00;
}

.show-intro .sheep-hud {
  display: none !important;
}

#SOG-game-intro-video {
  margin-left: -50px !important;
}

#sogPitchBar {
  position: absolute;
  left: 50%;
  bottom: calc(var(--pitchbar-bottom, 95px) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  font-family: "Jersey 10", "Fredoka", sans-serif;
}

#pitchHold {
  display: flex;
  align-items: center;
  gap: 0.28em;
  padding: 3px 20px 5px;
  border-radius: 999px;
  background: #FFF8E7;
  border: 4px solid #9A6431;
  box-shadow: 0 4px 0 #6B3F16;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 1px;
  color: #6F5A3C;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.16s ease;
}
#pitchHold.show {
  opacity: 1;
}
#pitchHold .hold-zone.high {
  color: #48B02A;
}
#pitchHold .hold-zone.low {
  color: #E0473A;
}

#sogPitchBar .track {
  position: relative;
  width: 520px;
  height: 52px;
  border-radius: 999px;
  background: #FFF8E7;
  border: 7px solid #9A6431;
  box-sizing: border-box;
  box-shadow: 0 8px 0 #6B3F16, 0 22px 22px rgba(0, 0, 0, 0.3);
}

#sogPitchBar .zones {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 7px;
  border-radius: 999px;
  overflow: hidden;
}

#sogPitchBar .zone {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 1px;
  transition: background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}
#sogPitchBar .zone .ss-head {
  width: 28px;
}
#sogPitchBar .zone .dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
#sogPitchBar .zone.low {
  background: #FFB199;
  color: #A8321F;
}
#sogPitchBar .zone.mid {
  flex: 0.8 1 0;
  background: #F3E6C6;
  color: #B5AA96;
}
#sogPitchBar .zone.high {
  background: #C9F0AE;
  color: #2F7A14;
}

#sogPitchBar .track:not(.need-high):not(.need-low) .zone.mid,
#sogPitchBar .track.need-high .zone.high,
#sogPitchBar .track.need-low .zone.low {
  background: repeating-linear-gradient(135deg, #8FE35A 0 14px, #7ED64A 14px 28px);
  color: #2F7A14;
  box-shadow: inset 0 0 0 4px #fff, 0 0 16px #B8FF7A;
}

#pitchMarker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.35));
}

@media (max-width: 600px) {
  #gameContainer {
    width: 800px;
    height: 1180px;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .start-screen::before {
    background: rgba(15, 27, 34, 0.2);
  }
  .game-title {
    margin-bottom: 150px;
    width: 100%;
  }
  .game-logo {
    width: 470px;
  }
  .ss-card {
    width: 640px;
    padding: 110px 40px 40px;
    border-width: 10px;
    border-radius: 60px;
    box-shadow: 0 14px 0 #6B3F16, 0 28px 22px rgba(0, 0, 0, 0.3);
  }
  .card-head {
    width: 290px;
    top: -190px;
  }
  .ss-btn {
    height: 104px;
    border-radius: 40px;
    font-size: 52px;
    margin-bottom: 12px;
  }
  .ss-btn.green {
    box-shadow: 0 12px 0 #3A8A22;
  }
  .ss-btn.orange {
    box-shadow: 0 12px 0 #C46A0E;
  }
  .ss-btn.stone {
    box-shadow: 0 12px 0 #736B5D;
  }
  .start-container {
    gap: 16px;
  }
  .game-subtitle {
    font-size: 44px;
    margin-bottom: 6px;
  }
  .start-instructions {
    gap: 16px;
  }
  .instruction-row {
    gap: 22px;
    padding: 16px;
    border-radius: 32px;
  }
  .instruction-icon {
    width: 96px;
    height: 96px;
    border-radius: 28px;
  }
  .instruction-icon .ss-head {
    width: 64px;
  }
  .instruction-icon .flag {
    width: 52px;
    height: 60px;
  }
  .instruction-text {
    gap: 4px;
  }
  .instruction-text strong {
    font-size: 42px;
  }
  .instruction-text span {
    font-size: 31px;
  }
  .start-game-btn {
    margin-top: 14px;
  }
  .sheep-hud {
    top: 22px;
    left: 30px;
    right: 30px;
  }
  .plaque {
    min-width: 220px;
    padding: 14px 28px 16px;
    border-width: 8px;
    border-radius: 40px;
    box-shadow: 0 10px 0 #6B3F16, 0 24px 22px rgba(0, 0, 0, 0.3);
  }
  .plaque.best {
    box-shadow: 0 10px 0 #8A5A00, 0 24px 22px rgba(0, 0, 0, 0.3);
  }
  .plaque-label {
    font-size: 31px;
    gap: 6px;
  }
  .plaque-label .crown {
    width: 24px;
    height: 24px;
  }
  .plaque-value {
    font-size: 78px;
  }
  .plaque-unit {
    font-size: 36px;
  }
  .game-over-card {
    margin-top: 150px;
  }
  .game-over-content {
    gap: 14px;
  }
  .game-over-title {
    font-size: 68px;
  }
  .game-over-score {
    font-size: 166px;
  }
  .game-over-unit {
    font-size: 73px;
  }
  .game-over-chips {
    gap: 18px;
    margin-bottom: 22px;
  }
  .chip {
    gap: 10px;
    padding: 12px 26px 14px;
    font-size: 36px;
  }
  .chip .star {
    width: 24px;
    height: 24px;
  }
  #sogPitchBar {
    gap: 14px;
  }
  #pitchHold {
    padding: 4px 28px 8px;
    border-width: 6px;
    box-shadow: 0 6px 0 #6B3F16;
    font-size: 34px;
  }
  #sogPitchBar .track {
    width: 700px;
    height: 72px;
    border-width: 10px;
    box-shadow: 0 12px 0 #6B3F16, 0 26px 22px rgba(0, 0, 0, 0.3);
  }
  #sogPitchBar .zones {
    gap: 10px;
  }
  #sogPitchBar .zone {
    font-size: 29px;
    gap: 8px;
  }
  #sogPitchBar .zone .ss-head {
    width: 32px;
  }
  #sogPitchBar .zone .dot {
    width: 10px;
    height: 10px;
  }
  #sogPitchBar .track:not(.need-high):not(.need-low) .zone.mid,
  #sogPitchBar .track.need-high .zone.high,
  #sogPitchBar .track.need-low .zone.low {
    background: repeating-linear-gradient(135deg, #8FE35A 0 20px, #7ED64A 20px 40px);
    box-shadow: inset 0 0 0 6px #fff, 0 0 16px #B8FF7A;
  }
  #pitchMarker {
    width: 68px;
  }
}