@font-face {
  font-family: "OneMobilePop";
  src: url("./assets/font/ONE-Mobile-POP.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SBAggroBold";
  src: url("./assets/font/SB-Aggro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --stage-width: 844;
  --stage-height: 1766;
  --app-height: 100vh;
  --shadow-soft: 0 24px 80px rgba(14, 35, 100, 0.28);
  --panel-grad: linear-gradient(180deg, #fff9df 0%, #ffefb2 100%);
  --row-grad: linear-gradient(180deg, #fff6d2 0%, #ffeeb2 100%);
  --line-brown: #f2a136;
  --ink-brown: #a45300;
  --ink-purple: #4a47b8;
  --backdrop: rgba(4, 26, 70, 0.62);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Trebuchet MS", "Malgun Gothic", sans-serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(77, 141, 255, 0.2), rgba(15, 32, 93, 0.88)),
    #071845;
  color: #23122d;
  overflow: hidden;
}

body.capture-stage {
  width: 844px;
  height: 1766px;
  background: transparent;
}

body.capture-stage #app,
body.capture-stage .stage-shell,
body.capture-stage .stage-viewport {
  width: 844px;
  height: 1766px;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

#app {
  width: 100vw;
  height: var(--app-height);
}

.stage-shell {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

body.capture-stage .stage-shell {
  padding: 0;
  align-items: flex-start;
  justify-content: flex-start;
}

.stage-viewport {
  position: relative;
  overflow: visible;
  touch-action: manipulation;
}

.stage {
  position: absolute;
  inset: 0 auto auto 0;
  width: calc(var(--stage-width) * 1px);
  height: calc(var(--stage-height) * 1px);
  transform-origin: top left;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border-radius: 32px;
}

.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.screen.is-active {
  opacity: 1;
  pointer-events: auto;
}

.screen-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.asset {
  position: absolute;
}

.asset-button {
  position: absolute;
  transition: transform 180ms ease;
}

.asset-button > img {
  width: 100%;
  height: 100%;
}

.asset-button:hover,
.asset-button:focus-visible {
  transform: translateY(-6px) scale(1.01);
  outline: none;
}

.asset-button:active {
  transform: translateY(-2px) scale(0.99);
}

.screen-dim {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(6px);
}

.menu-title {
  left: 110px;
  top: 466px;
  width: 625px;
  height: 417px;
}

.menu-album-hint {
  left: 271px;
  top: 81px;
  width: 476px;
  height: 149px;
}

.menu-album-button {
  left: 638px;
  top: 66px;
  width: 175px;
  height: 184px;
}

.menu-ranking-button {
  left: 132px;
  top: 1036px;
  width: 580px;
  height: 131px;
}

.menu-start-button {
  left: 132px;
  top: 1184px;
  width: 580px;
  height: 131px;
}

.menu-guide {
  left: 38px;
  top: 1382px;
  width: 768px;
  height: 319px;
}

.menu-badges {
  position: absolute;
  left: 388px;
  top: 1199px;
  width: 307px;
  height: 32px;
  pointer-events: none;
}

.menu-badge {
  position: absolute;
  top: 0;
}

.menu-badge.badge-left {
  left: 0;
  width: 54px;
  height: 32px;
}

.menu-badge.badge-right {
  right: 0;
  width: 66px;
  height: 32px;
}

.hud-panel {
  width: 204px;
  height: 105px;
}

.hud-panel.score {
  left: 100px;
  top: 65px;
}

.hud-panel.accuracy {
  left: 320px;
  top: 65px;
}

.hud-panel.time {
  left: 540px;
  top: 65px;
  width: 205px;
}

.hud-value {
  position: absolute;
  width: 96px;
  text-align: center;
  font-family: "Arial Black", "Malgun Gothic", sans-serif;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -1px;
  color: #4d3da6;
  text-shadow: 0 4px 0 rgba(255, 255, 255, 0.85);
}

.hud-value.score {
  left: 181px;
  top: 94px;
}

.hud-value.accuracy {
  left: 402px;
  top: 94px;
}

.hud-value.time {
  left: 622px;
  top: 94px;
}

.game-grid {
  position: absolute;
  left: 55px;
  top: 197px;
  width: 734px;
  height: 1353px;
  display: grid;
  grid-template-columns: repeat(3, 236px);
  grid-template-rows: repeat(4, 330px);
  column-gap: 13px;
  row-gap: 11px;
}

.memory-card {
  position: relative;
  width: 236px;
  height: 330px;
  perspective: 1200px;
}

.memory-card button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 24px;
}

.memory-card.is-disabled button {
  cursor: default;
}

.memory-card .card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 320ms ease;
}

.memory-card.is-flipped .card-inner,
.memory-card.is-matched .card-inner {
  transform: rotateY(180deg);
}

.memory-card.is-matched {
  filter: drop-shadow(0 12px 18px rgba(255, 231, 125, 0.55));
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 24px;
  overflow: hidden;
}

.card-face img {
  width: 100%;
  height: 100%;
}

.card-face.front {
  transform: rotateY(180deg);
}

.game-action-button {
  width: 373px;
  height: 131px;
}

.game-action-button.restart {
  left: 32px;
  top: 1569px;
}

.game-action-button.hint {
  left: 440px;
  top: 1569px;
  width: 372px;
}

.screen-title {
  position: absolute;
  top: 72px;
  width: 100%;
  text-align: center;
  font-size: 44px;
  font-weight: 900;
  color: #fff7db;
  text-shadow:
    0 6px 0 rgba(60, 46, 136, 0.95),
    0 0 18px rgba(255, 255, 255, 0.2);
  letter-spacing: -1px;
}

.album-book {
  left: 0;
  top: 180px;
  width: 828px;
  height: 1369px;
}

.album-home-button {
  left: 169px;
  top: 1568px;
  width: 507px;
  height: 131px;
}

.album-arrow {
  width: 74px;
  height: 107px;
  top: 792px;
}

.album-arrow.left {
  left: 85px;
}

.album-arrow.right {
  left: 658px;
}

.album-grid {
  position: absolute;
  inset: 0;
}

.album-card {
  position: absolute;
  width: 220px;
  height: 308px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(61, 82, 155, 0.24);
  transition: transform 180ms ease;
}

.album-card:hover,
.album-card:focus-visible {
  transform: translateY(-8px) scale(1.02);
  outline: none;
}

.album-card img {
  width: 100%;
  height: 100%;
}

.album-pager {
  position: absolute;
  left: 254px;
  top: 1401px;
  width: 282px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: "Arial Black", "Malgun Gothic", sans-serif;
  font-size: 24px;
  color: #bd94d9;
}

.pager-bullet {
  min-width: 22px;
  text-align: center;
}

.pager-bullet.is-active {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #c58cff 0%, #8a59ec 75%);
  color: #fff;
  box-shadow: 0 6px 14px rgba(79, 52, 194, 0.34);
  line-height: 38px;
}

.ranking-window {
  left: 40px;
  top: 44px;
  width: 764px;
  height: 1358px;
}

.ranking-home-button {
  left: 168px;
  top: 1462px;
  width: 507px;
  height: 131px;
}

.ranking-viewport {
  position: absolute;
  left: 76px;
  top: 503px;
  width: 664px;
  height: 821px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.ranking-viewport::-webkit-scrollbar {
  display: none;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0 0 24px;
}

.ranking-list.is-empty {
  padding: 0;
}

.rank-row {
  position: relative;
  width: 662px;
  height: 104px;
  flex: 0 0 104px;
  color: var(--ink-brown);
}

.rank-row-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rank-number,
.rank-name,
.rank-score,
.rank-accuracy,
.rank-time {
  position: absolute;
  z-index: 1;
}

.rank-number {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.rank-number.rank-image img {
  width: 100%;
  height: 100%;
}

.rank-number.rank-1 {
  left: 27px;
  top: 26px;
  width: 27px;
  height: 50px;
}

.rank-number.rank-2 {
  left: 27px;
  top: 27px;
  width: 35px;
  height: 48px;
}

.rank-number.rank-3 {
  left: 25px;
  top: 25px;
  width: 35px;
  height: 49px;
}

.rank-number.rank-text {
  left: 27px;
  top: 28px;
  min-width: 32px;
  height: 50px;
  font-family: "SBAggroBold", "Arial Black", sans-serif;
  font-size: 42px;
  color: #fff6e7;
  -webkit-text-stroke: 4px #cf6b23;
  paint-order: stroke fill;
  text-shadow:
    1px 0 0 #cf6b23,
    -1px 0 0 #cf6b23,
    0 1px 0 #cf6b23,
    0 -1px 0 #cf6b23,
    2px 0 0 #cf6b23,
    -2px 0 0 #cf6b23,
    0 2px 0 #cf6b23,
    0 -2px 0 #cf6b23,
    3px 0 0 #aa5519,
    -3px 0 0 #aa5519,
    0 3px 0 #aa5519,
    0 -3px 0 #aa5519,
    2px 2px 0 #aa5519,
    -2px 2px 0 #aa5519,
    2px -2px 0 #aa5519,
    -2px -2px 0 #aa5519;
}

.rank-name {
  left: 78px;
  top: 28px;
  width: 168px;
  font-family: "OneMobilePop", "Malgun Gothic", sans-serif;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 40px;
  color: #a04400;
}

.rank-score,
.rank-accuracy,
.rank-time {
  top: 35px;
  font-family: "OneMobilePop", "Malgun Gothic", sans-serif;
  font-size: 28px;
  color: #a16d48;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

.rank-score {
  left: 341px;
  min-width: 64px;
}

.rank-accuracy {
  left: 452px;
  min-width: 36px;
}

.rank-time {
  left: 589px;
  min-width: 100px;
  letter-spacing: -1.5px;
}

.ranking-empty {
  min-height: 821px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #a46622;
  font-size: 30px;
  font-weight: 800;
}

.ranking-track {
  position: absolute;
  left: 765px;
  top: 513px;
  width: 7px;
  height: 822px;
}

.ranking-thumb {
  position: absolute;
  left: 756px;
  top: 500px;
  width: 24px;
  height: 148px;
  cursor: grab;
  touch-action: none;
}

.ranking-track.is-hidden,
.ranking-thumb.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.ranking-thumb.is-dragging {
  cursor: grabbing;
}

.result-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.result-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.result-bg {
  z-index: 0;
}

.result-window {
  left: 39px;
  top: 162px;
  width: 766px;
  height: 1494px;
}

.result-trophy {
  left: 9px;
  top: 7px;
  width: 821px;
  height: 713px;
}

.result-ribbon {
  left: 58px;
  top: 506px;
  width: 727px;
  height: 111px;
}

.result-save-box {
  left: 55px;
  top: 674px;
  width: 734px;
  height: 247px;
}

.result-stat-card {
  top: 959px;
  width: 236px;
  height: 303px;
}

.result-stat-card.words {
  left: 56px;
}

.result-stat-card.accuracy {
  left: 304px;
}

.result-stat-card.time {
  left: 551px;
}

.result-save-interact {
  position: absolute;
  left: 87px;
  top: 782px;
  width: 670px;
  height: 110px;
}

.result-name-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 530px;
  height: 72px;
  border: 0;
  background: transparent;
  padding: 0 26px;
  font-family: "Arial Black", "Malgun Gothic", sans-serif;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #7d6ce0;
  caret-color: #6f5ad4;
}

.result-name-input::placeholder {
  color: #9d8de4;
  opacity: 1;
}

.result-name-input:focus {
  outline: none;
}

.result-save-button {
  position: absolute;
  left: 552px;
  top: 0;
  width: 118px;
  height: 72px;
  border-radius: 18px;
  background: transparent;
}

.result-save-button:focus-visible {
  outline: 3px solid rgba(89, 62, 208, 0.95);
  outline-offset: 4px;
}

.result-note {
  position: absolute;
  left: 8px;
  top: 84px;
  width: 520px;
  min-height: 22px;
  font-size: 18px;
  line-height: 1.2;
  color: #7055cf;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.result-value {
  position: absolute;
  transform: translateX(-50%);
  font-family: "Arial Black", "Malgun Gothic", sans-serif;
  font-size: 50px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  letter-spacing: 1.1px;
  -webkit-text-stroke: 6px #4d3f89;
  paint-order: stroke fill;
  text-shadow: 0 6px 0 rgba(75, 58, 142, 0.22);
}

.result-value.words {
  left: 174px;
  top: 1191px;
}

.result-value.accuracy {
  left: 421.5px;
  top: 1191px;
}

.result-value.time {
  left: 668.5px;
  top: 1191px;
  letter-spacing: 1.5px;
}

.result-action {
  width: 507px;
  height: 131px;
  left: 168.5px;
}

.result-action.restart {
  top: 1299px;
}

.result-action.home {
  top: 1449px;
}

.candy-button {
  width: 100%;
  min-height: 86px;
  border-radius: 26px;
  border: 4px solid rgba(132, 78, 25, 0.35);
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
  box-shadow: 0 10px 0 rgba(77, 55, 22, 0.18);
  transition: transform 160ms ease;
}

.candy-button:hover,
.candy-button:focus-visible {
  transform: translateY(-4px);
  outline: none;
}

.candy-button:active {
  transform: translateY(1px);
}

.candy-button.save {
  background: linear-gradient(180deg, #5c97ff 0%, #5564e8 100%);
}

.candy-button.restart {
  background: linear-gradient(180deg, #62d933 0%, #2fb613 100%);
}

.candy-button.secondary {
  background: linear-gradient(180deg, #ff9dbf 0%, #f35f8b 100%);
}

.toast {
  position: absolute;
  left: 50%;
  top: 146px;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 620px;
  padding: 18px 26px;
  border-radius: 999px;
  background: rgba(29, 33, 104, 0.88);
  color: #fff8d9;
  font-size: 24px;
  font-weight: 800;
  box-shadow: 0 16px 30px rgba(8, 11, 58, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.toast.is-visible {
  opacity: 1;
}

.replay-ad-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  background: #071845;
  transition: opacity 160ms ease;
}

.replay-ad-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.replay-ad-image {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.replay-ad-counter {
  position: absolute;
  right: 20px;
  top: 27px;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  font-family: "Arial Black", "Malgun Gothic", sans-serif;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  color: #2f3340;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
}

.replay-ad-counter-badge {
  position: absolute;
  inset: 4px;
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.36));
}

.replay-ad-counter span {
  position: relative;
  z-index: 1;
  transform: translateY(-1px);
}

.preview-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.preview-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.preview-card {
  position: absolute;
  left: 106px;
  top: 370px;
  width: 632px;
  min-height: 796px;
  padding: 34px 32px 44px;
  border-radius: 34px;
  background: linear-gradient(180deg, #fffaf0 0%, #ffe9bc 100%);
  border: 4px solid rgba(241, 155, 43, 0.9);
  box-shadow: 0 30px 70px rgba(16, 26, 78, 0.45);
}

.preview-title {
  text-align: center;
  font-size: 42px;
  font-weight: 900;
  color: #4d40c5;
  margin-bottom: 24px;
}

.preview-pair {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.preview-pair img {
  width: 236px;
  height: 330px;
  border-radius: 26px;
  box-shadow: 0 10px 20px rgba(54, 74, 158, 0.28);
}

.preview-close {
  margin-top: 28px;
}

.screen-home-cue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 42px;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
  font-size: 20px;
  font-weight: 700;
  pointer-events: none;
}

@media (max-width: 640px) {
  body {
    background: #0a2167;
  }
}