/* 공사중 랜딩 — 네온 키보드 위를 달리는 블록 캐릭터.
   다른 페이지와 달리 어두운 게임 화면으로 고정한다. */
* { box-sizing: border-box; margin: 0; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  background: #0b1030;
  color: #eaf2ff;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  overflow-x: hidden;
}

.scene {
  position: relative;
  overflow: hidden;          /* 바닥이 무대 밖으로 나가 스크롤을 만들지 않게 */
  min-height: 100dvh;
  padding: 20px 16px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, #24356e 0%, transparent 60%),
    linear-gradient(#0e1638 0%, #0b1030 45%, #070b22 100%);
}
body.playing .scene { cursor: pointer; }

.glow-top {
  position: absolute;
  inset: 0 0 auto 0;
  height: 34%;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(90,140,255,.08) 46px 48px),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(90,140,255,.06) 46px 48px);
  mask-image: linear-gradient(#000, transparent);
  pointer-events: none;
}

/* ---------- 키보드 바닥 ---------- */
.floor {
  position: absolute;
  left: 50%;
  bottom: -26vh;
  width: 210vw;
  height: 150vh;
  transform: translateX(-50%) perspective(950px) rotateX(50deg);
  transform-origin: 50% 100%;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 9px;
  padding: 9px;
  pointer-events: none;
}

.key {
  border-radius: 7px;
  background: linear-gradient(#232a4d, #171d3d);
  border: 1px solid #303a6e;
  box-shadow: 0 3px 0 #0d1230, inset 0 1px 0 rgba(140,170,255,.18);
  color: #6f80c4;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  text-shadow: 0 0 6px rgba(120,150,255,.35);
}

.key.lit-cyan    { color: #5ef2ff; border-color: #35c7de; box-shadow: 0 3px 0 #0d1230, 0 0 14px rgba(70,230,255,.5), inset 0 0 8px rgba(70,230,255,.35); }
.key.lit-pink    { color: #ff7ae0; border-color: #d84fb6; box-shadow: 0 3px 0 #0d1230, 0 0 14px rgba(255,110,220,.5), inset 0 0 8px rgba(255,110,220,.3); }
.key.lit-green   { color: #7dff9e; border-color: #3fce69; box-shadow: 0 3px 0 #0d1230, 0 0 14px rgba(110,255,150,.45), inset 0 0 8px rgba(110,255,150,.3); }
.key.river {
  background: linear-gradient(120deg, #0d5f8f, #19b8d8 45%, #0d5f8f);
  background-size: 220% 100%;
  border-color: #2ad4ef;
  color: #bffaff;
  box-shadow: 0 3px 0 #0d1230, 0 0 16px rgba(60,220,255,.55);
  animation: flow 3.2s linear infinite;
}
/* 달리는 동안 물길이 빨라진다 */
body.playing .key.river { animation-duration: 1.1s; }

@keyframes flow { to { background-position: -220% 0; } }

.key.blink { animation: blink 2.6s ease-in-out infinite; }
@keyframes blink {
  0%, 100% { filter: brightness(.75); }
  50% { filter: brightness(1.5); }
}

/* ---------- 무대 ---------- */
.stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hero {
  width: min(46vw, 230px, 30vh);
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.55));
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
/* 놀이 중에는 점프를 JS 가 움직이므로 흔들림을 끈다 */
body.playing .hero { animation: none; will-change: transform; }
/* 점프 궤적만큼 말풍선을 위로 비켜 둔다 (캐릭터 폭 공식과 같은 기준) */
body.playing .bubble { margin-bottom: calc(min(46vw, 230px, 30vh) * 0.62); }
body:not(.playing) .hero { cursor: pointer; }

.arm-wave {
  transform-origin: 150px 112px;
  animation: wave 1.6s ease-in-out infinite;
}
@keyframes wave {
  0%, 100% { transform: rotate(8deg); }
  50% { transform: rotate(-38deg); }
}
.head {
  transform-origin: 101px 96px;
  animation: nod 2.4s ease-in-out infinite;
}
@keyframes nod {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(3deg); }
}

/* ---------- 달리기 자세 ---------- */
body.playing .leg-l { transform-origin: 85px 168px; animation: run-leg .28s linear infinite alternate; }
body.playing .leg-r { transform-origin: 117px 168px; animation: run-leg .28s linear infinite alternate-reverse; }
@keyframes run-leg {
  from { transform: rotate(22deg); }
  to   { transform: rotate(-22deg); }
}
body.playing .arm-wave { animation: run-arm .28s linear infinite alternate; }
body.playing .arm-back { transform-origin: 51px 116px; animation: run-arm .28s linear infinite alternate-reverse; }
@keyframes run-arm {
  from { transform: rotate(24deg); }
  to   { transform: rotate(-16deg); }
}
body.playing .head { animation-duration: .8s; }

/* ---------- 표정 바꿔 끼우기 ---------- */
.hero .face-wow, .hero .face-sad { display: none; }
.hero.wow .face-idle, .hero.sad .face-idle { display: none; }
.hero.wow .face-wow { display: inline; }
.hero.sad .face-sad { display: inline; }

/* ---------- 장애물 키캡 ---------- */
.lane {
  position: absolute;
  left: 0;
  top: 62%;
  width: 100%;
  height: 0;
  z-index: 2;
  pointer-events: none;
}
.obs {
  position: absolute;
  left: 0;
  bottom: 0;
  display: none;
  place-items: center;
  font-weight: 900;
  color: #6b3a00;
  background: linear-gradient(#ffd86b, #ff9d2e);
  border: 2px solid #fff3c4;
  border-radius: 8px;
  box-shadow: 0 4px 0 #7a3d00, 0 0 18px rgba(255,190,60,.65), inset 0 2px 0 rgba(255,255,255,.5);
  will-change: transform;
}

/* ---------- 말풍선 ---------- */
.bubble {
  position: relative;
  z-index: 3;              /* 점프한 캐릭터가 말풍선 뒤로 지나간다 */
  background: #f4f7ff;
  color: #131a36;
  border-radius: 22px;
  padding: clamp(10px, 2vh, 16px) clamp(16px, 4vw, 26px) clamp(9px, 1.8vh, 14px);
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 4px rgba(120,160,255,.15);
  animation: pop .5s cubic-bezier(.2,1.6,.4,1) both;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  border: 15px solid transparent;
  border-top-color: #f4f7ff;
  border-bottom: 0;
}
@keyframes pop { from { opacity: 0; transform: scale(.6) translateY(14px); } }

.bubble-en {
  display: block;
  font-size: clamp(1.5rem, min(6.5vw, 5.4vh), 2.6rem);
  font-weight: 900;
  letter-spacing: -.02em;
  background: linear-gradient(100deg, #ff3d81, #ff9f2e 45%, #22b8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 3s ease-in-out infinite alternate;
}
@keyframes shine { to { filter: hue-rotate(-35deg) brightness(1.15); } }

.bubble-en .em {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #131a36;
  -webkit-text-fill-color: initial;
}

/* 철자 칸 — 흐릿한 힌트 글자, 모으면 밝게 */
.bubble-word {
  display: block;
  margin-top: 6px;
  font-size: clamp(1.3rem, 5.6vw, 2rem);
  font-weight: 900;
  letter-spacing: .04em;
}
.bubble-word b {
  display: inline-block;
  min-width: 1.1em;
  margin: 0 2px;
  color: #c6cddd;
  border-bottom: 3px solid #d7ddeb;
  line-height: 1.15;
}
.bubble-word b.got {
  color: #ff8a2e;
  border-bottom-color: #ff8a2e;
  animation: slot-pop .35s cubic-bezier(.2,1.6,.4,1);
}
@keyframes slot-pop { from { transform: scale(1.6); } }

.bubble-ko {
  display: block;
  margin-top: 4px;
  font-size: clamp(.85rem, 3vw, 1rem);
  font-weight: 600;
  color: #4a5578;
}

/* ---------- +1 ---------- */
.plus {
  position: absolute;
  z-index: 3;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 2px #10152e;
  text-shadow: 0 4px 0 rgba(0,0,0,.35);
  pointer-events: none;
  animation: rise 1.8s ease-out forwards;
  transform: rotate(var(--tilt, 0deg));
}
@keyframes rise {
  0%   { opacity: 0; translate: 0 14px; scale: .5; }
  15%  { opacity: 1; scale: 1.15; }
  25%  { scale: 1; }
  100% { opacity: 0; translate: 0 -130px; }
}
.plus.star { -webkit-text-stroke: 0; text-shadow: none; }

/* ---------- 링크·단추·푸터 ---------- */
.controls {
  z-index: 2;
  align-items: stretch;
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.btn-play, .peek {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  box-sizing: border-box;
}

.btn-play {
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  color: #12183a;
  background: linear-gradient(#ffd86b, #ffab2e);
  border: none;
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
  box-shadow: 0 5px 0 #b96b00, 0 10px 24px rgba(255,170,40,.35);
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn-play:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #b96b00, 0 14px 28px rgba(255,170,40,.45); }
.btn-play:active { transform: translateY(3px); box-shadow: 0 2px 0 #b96b00; }

/* 짝을 이루는 단추 — 노란 단추와 두께·크기·눌리는 느낌을 똑같이 맞춘다 */
.peek {
  z-index: 2;
  color: #dce7ff;
  background: linear-gradient(#3a4d9c, #2a3878);
  border: none;
  border-radius: 999px;
  padding: 13px 26px;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 5px 0 #1b2454, 0 10px 24px rgba(40, 80, 200, .3);
  transition: transform .1s ease, box-shadow .1s ease;
}
.peek:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #1b2454, 0 14px 28px rgba(40, 80, 200, .4); }
.peek:active { transform: translateY(3px); box-shadow: 0 2px 0 #1b2454; }

.hint {
  width: 100%;
  text-align: center;
  margin-top: 2px;
  font-size: .85rem;
  font-weight: 600;
  color: #8fa0d6;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}

.foot {
  position: absolute;
  bottom: 14px;
  z-index: 2;
  font-size: .8rem;
  color: #7b89bd;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

@media (max-width: 480px) {
  .floor { width: 330vw; grid-template-columns: repeat(14, 1fr); }
}

/* 창이 낮을 때 — 브라우저 확대나 가로 모드 */
@media (max-height: 620px) {
  .scene { padding-top: 12px; padding-bottom: 40px; }
  .controls { margin-top: 12px; }
  .hero { animation-duration: 2.8s; }
}

/* ---------- 연출 ---------- */
/* 캐릭터 콕 찌르기(놀이 밖)용 폴짝 */
.hero.jump { animation: jump .34s cubic-bezier(.3,-0.5,.4,1.6); }
@keyframes jump {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-26px) scale(.94, 1.08); }
  70% { transform: translateY(0) scale(1.06, .94); }
}

/* 밟은 글자가 단어 칸으로 날아간다 */
.fly {
  position: absolute;
  z-index: 4;
  font-weight: 900;
  font-size: 1.7rem;
  color: #ffd86b;
  text-shadow: 0 0 12px rgba(255,190,60,.8);
  pointer-events: none;
  transition: transform .55s cubic-bezier(.3,.7,.4,1), opacity .55s ease;
}

/* 맞는 글자를 밟았을 때 통통 */
body.playing .hero.stomp { animation: stomp .22s ease-out; }
@keyframes stomp {
  40% { transform: translateY(4px) scale(1.06, .9); }
}

/* 응원 단계마다 화면이 살짝 들썩인다 */
.scene.kick { animation: kick .22s ease-out; }
@keyframes kick { 30% { transform: translateY(-5px); } }

/* 부딪힌 순간 붉게 번쩍 */
.scene.crash::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: rgba(255,60,60,.2);
  animation: crash-flash .5s ease-out forwards;
}
@keyframes crash-flash { from { opacity: 1; } to { opacity: 0; } }

/* 금색 = 지금 필요한 글자. 밟아서 가져간다 */
.obs-good {
  background: linear-gradient(#ffe680, #ffb02e);
  border-color: #fff6cc;
  box-shadow: 0 4px 0 #8a4a00, 0 0 22px rgba(255,200,70,.8), inset 0 2px 0 rgba(255,255,255,.6);
  animation: cap-glow 1.1s ease-in-out infinite;
}
/* 밟아야 하는 글자는 빛으로 알린다 (자리는 바닥, 다른 글자와 같다) */
@keyframes cap-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

/* 회색 = 필요 없는 글자. 뛰어넘어 피한다 */
.obs-bad {
  background: linear-gradient(#8a93b8, #59618a);
  border-color: #aab3d6;
  color: #1a1f38;
  box-shadow: 0 4px 0 #262c4a, inset 0 2px 0 rgba(255,255,255,.35);
  animation: none;
}

/* ---------- 놀이 카드 ----------
   설명과 기록이 각자 카드 안에 있어 어느 놀이 이야기인지 헷갈리지 않는다. */
.game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(300px, 82vw);
  padding: 18px 16px 16px;
  border-radius: 20px;
  background: rgba(16, 24, 60, .58);
  border: 1px solid rgba(120, 150, 240, .22);
  backdrop-filter: blur(2px);
}
.game-card .hint {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: #b8c6ef;
}
.game-card .best {
  margin: 0;
  font-size: .85rem;
  color: #ffd86b;
  font-weight: 700;
}

@media (max-width: 560px) {
  .game-card { width: min(320px, 88vw); padding: 14px 14px 12px; gap: 8px; }
  .game-card .hint { font-size: .84rem; }
}

/* ---------- 창고: 접어 둔 예전 놀이 ---------- */
.shed { display: block; text-align: center; padding-top: 10px; padding-bottom: 10px; }
.shed .btn-play { margin: 0 auto 10px; }
.shed .hint + .hint { margin-top: 8px; }
.shed summary { cursor: pointer; list-style: none; font-weight: 800; font-size: .95rem; color: #b8c4f2; padding: 4px 2px; text-align: center; }
.shed summary::-webkit-details-marker { display: none; }
.shed summary small { font-weight: 600; font-size: .78rem; opacity: .75; margin-left: 4px; }
.shed summary::after { content: " ▾"; opacity: .7; }
.shed[open] summary::after { content: " ▴"; }
.shed[open] summary { margin-bottom: 10px; }