@font-face {
  font-family: 'Moneygraphy';
  src: url('../assets/Moneygraphy-Pixel.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #050916; }
body {
  font-family: 'Moneygraphy', 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  color: #f7f8ff;
}
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
body.playing canvas { cursor: none; }

.back-link, #title { display: none !important; }

.gdoc .game-return {
  display: inline-flex;
  align-items: center;
  margin: 0 0 28px;
  padding: 10px 15px;
  border: 1px solid #d9deea;
  border-radius: 999px;
  color: #28314a;
  background: #f7f9fc;
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.gdoc .game-return:active { transform: translateY(1px); }

.back-link {
  position: fixed; top: 12px; left: 12px; z-index: 20;
  background: rgba(9,14,31,0.80); color: rgba(255,255,255,0.84);
  padding: 6px 12px; border-radius: 999px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: 12px; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
}

#title {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 5;
  text-align: center; pointer-events: none;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  transition: opacity 250ms ease;
}
#title.faded { opacity: 0.16; }
#title h1 { font-size: 17px; font-weight: 400; letter-spacing: -0.01em; }
#title p { margin-top: 4px; font-size: 11px; color: rgba(229,235,255,0.62); }

#intro, #over {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(3,7,18,0.46);
  backdrop-filter: blur(5px);
}
#intro[hidden], #over[hidden] { display: none; }

#intro .card, #over .card {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 34px 28px 28px;
  color: #172039;
  background: rgba(250,252,255,0.96);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 25px;
  box-shadow: 0 20px 70px rgba(0,0,0,0.45);
  text-align: center;
  animation: rise 260ms cubic-bezier(0.22,1.2,0.36,1);
}
#intro .card { max-width: 430px; gap: 20px; padding: 44px 28px 36px; }
@keyframes rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
#intro .big, #over .over-title { font-size: 23px; line-height: 1.3; }
.intro-title {
  color: #172039;
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
#intro p { font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 13px; line-height: 1.65; color: #6c7488; }
#intro button, #over button {
  margin-top: 8px; border: 0; cursor: pointer;
  padding: 13px 34px; border-radius: 999px;
  font-family: inherit; font-size: 17px;
  color: #fff; background: #151c31;
  box-shadow: 0 5px 15px rgba(17,26,50,0.22);
}
.mode-row, .map-row { display: flex; gap: 7px; margin-top: 2px; }
.mode-row { width: 100%; justify-content: center; flex-wrap: wrap; }
.map-row { width: 100%; justify-content: center; flex-wrap: wrap; margin-top: -3px; }
.map-row[hidden] { display: none; }
#intro .mode-row button, #intro .map-row button {
  margin: 0; padding: 8px 13px;
  border: 1px solid #d9deea;
  background: #fff; color: #778095;
  box-shadow: none; font-size: 14px;
}
#intro .map-row button { padding: 7px 11px; font-size: 12px; }
#intro .mode-row button.on, #intro .map-row button.on { color: #fff; background: #151c31; border-color: #151c31; }
#over button.text {
  margin-top: -4px; padding: 6px 12px;
  color: #8b92a3; background: transparent; box-shadow: none;
  font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 12px;
}

.hero-preview {
  display: block; width: 132px; height: 112px;
  object-fit: contain; margin: -18px 0 -4px;
  filter: drop-shadow(0 9px 10px rgba(14,24,48,0.20));
}
.hero-preview.landing { width: 154px; height: 104px; margin: -19px 0 -6px; }

#over .badge {
  font-size: 11px; color: #fff; background: #da5f3e;
  padding: 5px 13px; border-radius: 999px;
}
#over .badge[hidden] { display: none; }
#over .result-time { display: flex; align-items: baseline; gap: 5px; color: #131a2c; }
#over .result-time strong { font-size: 58px; line-height: 1; }
#over .result-time span { font-size: 20px; }
#over .line { font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 13px; color: #747c90; }
#over .line + .line { margin-top: -6px; }

@media (max-height: 540px) {
  #intro .card, #over .card { padding: 22px 24px 20px; gap: 8px; }
  .hero-preview { width: 96px; height: 70px; margin-top: -14px; }
  .hero-preview.landing { width: 112px; height: 66px; }
}

@media (max-width: 390px) {
  #intro .card { padding-left: 20px; padding-right: 20px; }
  #intro .mode-row button { padding: 8px 10px; font-size: 12px; }
}