:root {
  --board-w: 1024px;
  --board-h: 715px;
  --ball-size: 61px;
  --ball-number-size: 24px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  overscroll-behavior-x: none;
}

.game-shell {
  position: relative;
  width: var(--board-w);
  height: var(--board-h);
  margin: 24px auto 0;
  overflow: visible;
}

.layer,
.ui-button,
.frame {
  position: absolute;
}

.layer,
.frame img,
.ui-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.background { left: 0; top: 106px; width: 1024px; height: 566px; }
.worksheet { left: 233px; top: 179px; width: 554px; height: 383px; }
.topbar { left: 0; top: 0; width: 1024px; height: 117px; }
.bottombar { left: 0; top: 664px; width: 1024px; height: 51px; }
.text-frame { left: 141px; top: 179px; width: 731px; height: 338px; pointer-events: none; }

.start { left: 397px; top: 566px; width: 226px; height: 93px; }
.level-1 { left: 14px; top: 121px; width: 150px; height: 58px; }
.level-2 { left: 859px; top: 123px; width: 150px; height: 58px; }
.score-frame { left: 139px; top: 17px; width: 145px; height: 62px; }

.worksheet {
  display: none;
}
.result { left: 465px; top: 5px; width: 89px; height: 89px; }
.timer-box { left: 719px; top: 17px; width: 145px; height: 62px; }
.sound { left: 872px; top: 32px; width: 40px; height: 40px; }
.info { left: 924px; top: 32px; width: 40px; height: 40px; }
.replay { left: 976px; top: 32px; width: 40px; height: 40px; }

.ui-button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.sound.is-muted {
  opacity: 0.45;
}

.level-button {
  position: absolute;
  z-index: 5;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.level-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.op-button {
  position: absolute;
  z-index: 5;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.4;
}

.op-plus {
  left: 312px;
  top: 24px;
  width: 51px;
  height: 51px;
}

.op-minus {
  left: 385px;
  top: 24px;
  width: 51px;
  height: 51px;
}

.op-button.is-active {
  opacity: 1;
}

.op-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.level-button.is-active {
  filter: none;
}

.ui-button-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  letter-spacing: 0.4px;
  user-select: none;
  pointer-events: none;
  color: #1f3c6e;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}

.start-label {
  font-size: 36px;
  color: #ffffff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
}

.level-label {
  font-size: 24px;
  color: #1f3c6e;
}

.prestart-hint {
  position: absolute;
  left: 190px;
  top: 130px;
  width: 644px;
  margin: 0;
  z-index: 5;
  text-align: center;
  color: #1f3c6e;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.frame {
  display: grid;
  place-items: center;
}

.frame-text {
  position: absolute;
  color: #1f3c6e;
  font-weight: 700;
  letter-spacing: 0.5px;
  user-select: none;
}

.score-frame .frame-text,
.timer-box .frame-text {
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
}

.result .frame-text {
  top: 50%;
  transform: translateY(-50%);
  font-size: 34px;
}

.start {
  z-index: 5;
}

.info-overlay {
  position: absolute;
  left: 141px;
  top: 179px;
  width: 731px;
  height: 338px;
  z-index: 7;
}

.info-frame-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.info-text {
  position: absolute;
  inset: 26px 42px;
  color: #12315d;
  font-weight: 400;
  text-align: center;
  line-height: 1.1;
}

.info-title {
  margin: 1px 0 10px;
  font-size: 28px;
}

.info-text p {
  margin: 0 0 4px;
  font-size: 23px;
}

#info-rules {
  white-space: pre-line;
}

.end-message {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-size: 42px;
  font-weight: 700;
  text-align: center;
  color: #12315d;
}

.info-text.end-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.info-text.end-state .info-title {
  margin: 0 0 14px;
}

.info-text.end-state .end-message {
  position: static;
  transform: none;
  margin: 0;
}

.balls-layer {
  position: absolute;
  left: 233px;
  top: 179px;
  width: 554px;
  height: 383px;
  z-index: 2;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.balls-layer.hide-numbers .ball-number {
  opacity: 0;
}

.ball {
  position: absolute;
  width: var(--ball-size);
  height: var(--ball-size);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

.ball.is-dragging {
  cursor: grabbing;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.25));
}

.ball.is-intro-dropping {
  animation: ballDropIn 450ms ease-out both;
}

.ball.success-merge {
  pointer-events: none;
  animation: successBlink 500ms ease-in-out, successExplode 500ms ease-in 500ms forwards;
}

.ball img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ball-number {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--ball-number-size);
  font-weight: 700;
  color: #0f172a;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25);
  user-select: none;
  transition: opacity 220ms ease;
}

@keyframes ballDropIn {
  from {
    transform: translateY(-120px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes successBlink {
  0% {
    filter: drop-shadow(0 0 0 rgba(220, 38, 38, 0));
  }
  25% {
    filter: drop-shadow(0 0 10px rgba(220, 38, 38, 0.85));
  }
  50% {
    filter: drop-shadow(0 0 2px rgba(220, 38, 38, 0.2));
  }
  75% {
    filter: drop-shadow(0 0 12px rgba(220, 38, 38, 0.95));
  }
  100% {
    filter: drop-shadow(0 0 0 rgba(220, 38, 38, 0));
  }
}

@keyframes successExplode {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@media (max-width: 1080px) {
  .game-shell {
    transform: scale(0.9);
    transform-origin: top center;
  }
}

body.mobile-layout .game-shell {
  width: 100%;
  height: auto;
  min-height: calc(100vh - 120px);
  margin: 0;
  padding: 0 0 24px;
  overflow: visible;
  transform: none;
  transform-origin: initial;
}

body.mobile-layout .prestart-hint {
  max-width: 644px;
  padding: 0 24px;
}

body.mobile-layout .topbar {
  height: 240px;
}

body.mobile-layout .background {
  top: 198px;
}

body.mobile-layout .level-1 {
  left: 0;
  top: 184px;
  width: 210px;
  height: 82px;
}

body.mobile-layout .level-2 {
  left: 814px;
  top: 184px;
  width: 210px;
  height: 82px;
}

body.mobile-layout .score-frame {
  left: 20px;
  top: 69px;
  width: 162px;
  height: 70px;
}

body.mobile-layout .result {
  left: 440px;
  top: 60px;
  width: 100px;
  height: 100px;
}

body.mobile-layout .timer-box {
  left: 565px;
  top: 69px;
  width: 162px;
  height: 70px;
}

body.mobile-layout .op-plus {
  left: 266px;
  top: 75px;
  width: 70px;
  height: 70px;
}

body.mobile-layout .op-minus {
  left: 350px;
  top: 75px;
  width: 70px;
  height: 70px;
}

body.mobile-layout .sound {
  left: 750px;
  top: 67px;
  width: 90px;
  height: 90px;
}

body.mobile-layout .info {
  left: 835px;
  top: 67px;
  width: 90px;
  height: 90px;
}

body.mobile-layout .replay {
  left: 930px;
  top: 67px;
  width: 90px;
  height: 90px;
}

body.mobile-layout .score-frame .frame-text,
body.mobile-layout .timer-box .frame-text {
  font-size: 36px;
}

body.mobile-layout .result .frame-text {
  font-size: 46px;
}

body.mobile-layout .level-label {
  font-size: 34px;
}

body.mobile-layout .start {
  left: 377px;
  top: 450px;
  width: 350px;
  height: 170px;
}

body.mobile-layout .start-label {
  font-size: 60px;
}

body.mobile-layout .prestart-hint {
  top: 242px;
  font-size: 34px;
}

body.mobile-layout .ball {
  cursor: grab;
}

body.mobile-layout .ball.is-dragging {
  cursor: grabbing;
}

body.mobile-layout #game-scale,
body.mobile-layout #game-scale img,
body.mobile-layout #game-scale button,
body.mobile-layout #game-scale .frame,
body.mobile-layout #game-scale .ball {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}

@media (orientation: portrait) {
  body.mobile-layout .game-shell {
    min-height: calc(100vh - 8px);
    padding-top: 0;
  }

  body.mobile-layout #game-scale {
    height: 1220px;
  }

  body.mobile-layout #game-scale .background {
    top: 170px;
    height: 986px;
    object-fit: fill;
    object-position: top center;
  }

  body.mobile-layout #game-scale .worksheet {
    left: 233px;
    top: 244px;
    width: 554px;
    height: 760px;
  }

  body.mobile-layout #game-scale .balls-layer {
    left: 162px;
    top: 244px;
    width: 700px;
    height: 760px;
  }

  body.mobile-layout #game-scale .text-frame,
  body.mobile-layout #game-scale .info-overlay {
    left: 18px;
    top: 300px;
    width: 990px;
    height: 980px;
    overflow: visible;
  }

  body.mobile-layout #game-scale .info-frame-bg {
    object-fit: contain;
    object-position: top center;
    transform: translateY(70px) scaleY(1.22);
    transform-origin: top center;
  }

  body.mobile-layout #game-scale .info-text {
    inset: 150px 48px 305px;
    line-height: 1.08;
  }

  body.mobile-layout #game-scale .info-text.end-state {
    inset: 110px 60px 360px;
    justify-content: center;
  }

  body.mobile-layout #game-scale .info-text.end-state .info-title {
    margin: 0 0 18px;
  }

  body.mobile-layout #game-scale .info-text.end-state .end-message {
    font-size: 42px;
  }

  body.mobile-layout #game-scale .info-title {
    margin: 0 0 10px;
    font-size: 52px;
  }

  body.mobile-layout #game-scale .info-text p {
    margin: 0 0 6px;
    font-size: 38px;
  }

  body.mobile-layout #game-scale .score-frame .frame-text,
  body.mobile-layout #game-scale .timer-box .frame-text {
    font-size: 44px;
  }

  body.mobile-layout #game-scale .result .frame-text {
    font-size: 55px;
  }

  body.mobile-layout #game-scale .end-message {
    font-size: 62px;
  }

  body.mobile-layout #game-scale .prestart-hint {
    left: 0;
    width: 1024px;
    max-width: none;
    top: 950px;
    font-size: 60px;
    padding: 0 24px;
  }

  body.mobile-layout #game-scale .level-1 {
    left: 124px;
    top: 194px;
    width: 252px;
    height: 98px;
  }

  body.mobile-layout #game-scale .level-2 {
    left: 648px;
    top: 194px;
    width: 252px;
    height: 98px;
  }

  body.mobile-layout #game-scale .level-label {
    font-size: 41px;
  }

  body.mobile-layout #game-scale .bottombar {
    top: 1148px;
  }
}

@media (orientation: landscape) {
  body.mobile-layout .game-shell {
    min-height: calc(100vh - 72px);
    padding-top: 0;
  }

  body.mobile-layout #game-scale .background {
    top: 170px;
    height: 500px;
    object-fit: fill;
    object-position: top center;
  }
}