:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #1a3775;
  background: #e2f1fc;
  font-synthesis: none;
  --app-height: 100dvh;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #e2f1fc;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

body { touch-action: none; }
button { border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 4.608px solid rgba(47, 121, 191, .78); outline-offset: 4.8px; }
.is-hidden { display: none !important; }

#app {
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--app-height);
  overflow: hidden;
  isolation: isolate;
  background: #e2f1fc;
}

.home-backdrop, .game-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  will-change: opacity;
}
.home-backdrop {
  background: #e2f1fc;
}
.game-backdrop {
  opacity: 0;
  background: #e2f1fc url("assets/ui/game-background.png") center / cover no-repeat;
}
#app.playing .home-backdrop { opacity: 0; }
#app.playing .game-backdrop { opacity: 1; }

#gameCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  touch-action: none;
}
#app.playing #gameCanvas { opacity: 1; }
.screen,
.difficulty-layer,
.game-hud,
.dialog-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--logical-width, 886.154px);
  height: 1920px;
  transform: scale(var(--logical-scale, .5));
  transform-origin: 0 0;
}
.screen { z-index: 10; }
.home-screen { background: transparent; }

.loading-screen { background: #e2f1fc; }
.loading-logo {
  position: absolute;
  top: 42%;
  left: 50%;
  width: min(79%, 720px);
  transform: translate(-50%, -50%);
}

.home-logo {
  position: absolute;
  top: 22%;
  left: 50%;
  display: block;
  width: min(79%, 720px);
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.home-screen.is-entering .home-logo {
  animation: home-logo-in .42s cubic-bezier(.2,.82,.3,1.18) both;
}

.mode-list {
  position: absolute;
  top: 36.4%;
  left: 50%;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  width: min(82%, 760px);
  height: 45.6%;
  padding: 0;
  transform: translateX(-50%);
}
.mode-card {
  display: flex;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0 36px;
  align-items: center;
  justify-content: flex-start;
  border-radius: 48px;
  background: transparent;
}
.home-screen.is-entering .mode-card { animation: mode-card-in .38s cubic-bezier(.18,.82,.28,1) both; }
.home-screen.is-entering .mode-card:nth-child(1) { animation-delay: .14s; }
.home-screen.is-entering .mode-card:nth-child(2) { animation-delay: .2s; }
.home-screen.is-entering .mode-card:nth-child(3) { animation-delay: .26s; }
.mode-card img {
  display: block;
  flex: 0 0 auto;
  width: 202px;
  height: 202px;
  object-fit: contain;
  pointer-events: none;
}
.mode-card[data-mode="classic"] img { filter: drop-shadow(0 16px 11px rgba(25, 151, 239, .25)); }
.mode-card[data-mode="puzzle"] img { filter: drop-shadow(0 16px 11px rgba(241, 166, 26, .23)); }
.mode-card[data-mode="falling"] img { filter: drop-shadow(0 16px 11px rgba(135, 66, 220, .22)); }
.mode-card span {
  display: block;
  margin-left: 64px;
  text-align: left;
  color: #1a3775;
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.mode-card:active { transform: scale(.965); }

.difficulty-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  background: #e2f1fc;
}
.difficulty-back {
  position: absolute;
  z-index: 2;
  top: 38px;
  left: 36px;
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
  border-radius: 50%;
  background: transparent;
}
.difficulty-back img {
  display: block;
  width: 76px;
  height: auto;
  pointer-events: none;
}
.difficulty-back:active { transform: scale(.9); }
.difficulty-logo {
  position: absolute;
  top: 16.6%;
  left: 50%;
  display: block;
  width: min(62%, 580px);
  transform: translate(-50%, -50%);
  object-fit: contain;
  pointer-events: none;
}
.difficulty-layer h1 {
  position: absolute;
  top: 28.1%;
  left: 0;
  width: 100%;
  margin: 0;
  color: #1a3775;
  text-align: center;
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}
.difficulty-list {
  position: absolute;
  top: 35.8%;
  left: 50%;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  width: min(82%, 760px);
  height: 45.6%;
  transform: translateX(-50%);
}
.difficulty-card {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0 40px;
  align-items: center;
  justify-content: flex-start;
  border-radius: 48px;
  background: transparent;
}
.difficulty-card img {
  display: block;
  flex: 0 0 auto;
  width: 190px;
  height: 190px;
  object-fit: contain;
  pointer-events: none;
}
.difficulty-card.easy img { filter: drop-shadow(0 16px 11px rgba(25, 151, 239, .25)); }
.difficulty-card.normal img { filter: drop-shadow(0 16px 11px rgba(241, 166, 26, .23)); }
.difficulty-card.hard img { filter: drop-shadow(0 16px 11px rgba(232, 65, 73, .22)); }
.difficulty-card span {
  display: block;
  margin-left: 70px;
  color: #1a3775;
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.difficulty-card:active { transform: scale(.965); }
.difficulty-layer.is-entering .difficulty-logo {
  animation: difficulty-logo-in .38s cubic-bezier(.2,.82,.3,1.14) both;
}
.difficulty-layer.is-entering h1 { animation: difficulty-item-in .3s ease-out .08s both; }
.difficulty-layer.is-entering .difficulty-card { animation: difficulty-item-in .34s cubic-bezier(.18,.82,.28,1) both; }
.difficulty-layer.is-entering .difficulty-card:nth-child(1) { animation-delay: .12s; }
.difficulty-layer.is-entering .difficulty-card:nth-child(2) { animation-delay: .18s; }
.difficulty-layer.is-entering .difficulty-card:nth-child(3) { animation-delay: .24s; }
.difficulty-layer.is-closing { animation: difficulty-page-out .18s ease-in both; }

.game-hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.score-card {
  position: absolute;
  top: 85.9%;
  left: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(21%, 184px);
  height: 116px;
  padding: 7.296px 10.56px;
  transform: translateY(-50%);
  border: 1.92px solid rgba(255,255,255,.92);
  border-radius: 20.16px;
  background: rgba(249,252,255,.9);
  box-shadow: 0 5.376px 13.44px rgba(65, 95, 128, .1);
  text-align: center;
}
.score-card span { color: #58709c; font-size: 14.976px; font-weight: 800; line-height: 1; }
.score-card > strong { color: #1a3775; font-size: 39.36px; line-height: 1.08; }
.score-card small { color: #6f83a6; font-size: 14.592px; font-weight: 700; line-height: 1; }
.score-card b { color: #315f9a; }

.round-control {
  position: absolute;
  top: 85.9%;
  width: 76px;
  height: 76px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
}
.round-control img { display: block; width: 100%; height: 100%; pointer-events: none; }
.replay-control { right: max(58px, 6.5%); }
.home-control { right: calc(max(58px, 6.5%) + 84px); }
.round-control:active { transform: translateY(-50%) scale(.9); }

.dialog-layer { position: absolute; inset: 0; z-index: 30; background: rgba(19,42,78,.46); }
.dialog-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(calc(100% - 96px), 700px);
  height: 450px;
  padding: 44.16px 40.32px;
  transform: translate(-50%, -50%);
  border-radius: 44px;
  background: #fff;
  box-shadow: 0 23.04px 57.6px rgba(19,42,78,.2);
  text-align: center;
  animation: dialog-in .25s cubic-bezier(.2,1.2,.35,1) both;
}
.dialog-card h1 { margin: 0; color: #1a3775; font-size: 48px; line-height: 1; }
.dialog-card p { margin: 38.4px 0 3.84px; color: #7386a8; font-size: 18.24px; font-weight: 800; }
.dialog-card > strong { display: block; color: #1a3775; font-size: 104px; line-height: 1; }
.dialog-actions { position: absolute; right: 38.4px; bottom: 38.4px; left: 38.4px; display: flex; gap: 20.16px; }
.dialog-actions button { flex: 1; height: 73.92px; border-radius: 22.08px; font-size: 24.96px; font-weight: 800; }
#resultReplay { color: #fff; background: #7055bb; }
#resultHome { color: #58488f; background: #eee9fb; }
.dialog-actions button:active { transform: scale(.97); }

.toast {
  position: absolute;
  z-index: 50;
  top: max(2.5%, calc(env(safe-area-inset-top) + 8px));
  left: 50%;
  max-width: 78%;
  padding: 6px 12px;
  transform: translateX(-50%);
  border-radius: 14px;
  color: #fff;
  white-space: nowrap;
  background: rgba(26,55,117,.82);
  font-size: 14px;
  font-weight: 700;
}
.scene-fade {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: #e2f1fc;
  pointer-events: auto;
  will-change: opacity;
}
.scene-fade.is-covering { animation: scene-cover .12s ease-in both; }
.scene-fade.is-revealing { animation: scene-reveal .18s ease-out both; }

@keyframes dialog-in { from { opacity: 0; transform: translate(-50%,-50%) scale(.76); } }
@keyframes scene-cover { from { opacity: 0; } to { opacity: 1; } }
@keyframes scene-reveal { from { opacity: 1; } to { opacity: 0; } }
@keyframes home-logo-in {
  from { opacity: 0; transform: translate(-50%, -43%) scale(.84); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes mode-card-in {
  from { opacity: 0; transform: translateY(54px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes difficulty-logo-in {
  from { opacity: 0; transform: translate(-50%, -43%) scale(.86); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes difficulty-item-in {
  from { opacity: 0; transform: translateY(42px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes difficulty-page-out { to { opacity: 0; transform: translateY(34px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}