* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; background: #0d0b14; overflow: hidden; overscroll-behavior: none; }
body {
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #fff; user-select: none; -webkit-user-select: none;
  display: flex; align-items: center; justify-content: center;
}

/* 9:16 휴대폰 화면 */
#stage {
  position: relative; overflow: hidden; touch-action: none;
  /* 폰처럼 화면이 9:16 보다 길면 화면 전체를 쓰고(게임은 가운데, 위아래는 배경을 늘려 채움),
     컴퓨터처럼 넓으면 9:16 세로 화면으로 보여 준다 */
  height: 100vh; height: 100dvh; width: min(100vw, calc(100dvh * 9 / 16));
  background: #000;
}
@supports not (height: 100dvh) {
  #stage { height: 100vh; width: calc(100vh * 9 / 16); }
}

#slots { position: absolute; inset: 0; }
.slot { position: absolute; inset: 0; will-change: transform; }
.slot.anim { transition: transform 0.28s cubic-bezier(.2,.8,.2,1); }
.slot canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }

/* 피드 위 정보 */
.info { position: absolute; inset: 0; pointer-events: none; transition: opacity .2s; }
.slot.playing .info { opacity: 0; }
.slot.playing .info * { pointer-events: none !important; }
.top {
  position: absolute; left: 0; right: 0; top: 0; padding: 16px 70px 30px 16px;
  background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0));
}
.title { font-size: 22px; font-weight: 900; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.title .new {
  display: inline-block; font-size: 11px; background: #ff3b6b; border-radius: 6px;
  padding: 2px 6px; margin-left: 6px; vertical-align: middle;
}
.tagline { font-size: 14px; margin-top: 4px; opacity: .95; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.side {
  position: absolute; right: 10px; bottom: 120px; display: flex; flex-direction: column;
  gap: 18px; align-items: center;
}
.side .btn {
  pointer-events: auto; background: rgba(0,0,0,.28); border: none; color: #fff;
  width: 52px; height: 52px; border-radius: 50%; font-size: 26px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.side .lbl { font-size: 12px; font-weight: 700; margin-top: 3px; text-align: center; text-shadow: 0 1px 2px #000; }
.heart.on { color: #ff3b6b; animation: pop .3s; }
@keyframes pop { 50% { transform: scale(1.3); } }
.hint {
  position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%);
  background: rgba(0,0,0,.45); padding: 10px 20px; border-radius: 30px;
  font-weight: 800; font-size: 17px; white-space: nowrap; animation: pulse 1.2s infinite;
}
@keyframes pulse { 50% { transform: translateX(-50%) scale(1.07); } }
.tags { position: absolute; left: 16px; bottom: 20px; font-size: 13px; opacity: .9; text-shadow: 0 1px 3px #000; }

/* 플레이 중 */
#exitBtn {
  position: absolute; left: 12px; top: 12px; z-index: 10; width: 40px; height: 40px;
  border-radius: 50%; border: none; background: rgba(0,0,0,.35); color: #fff;
  font-size: 20px; cursor: pointer;
}
#hudScore {
  position: absolute; top: 18px; left: 0; right: 0; text-align: center; z-index: 9;
  font-size: 46px; font-weight: 900; pointer-events: none;
  -webkit-text-stroke: 2px #2b2340; text-shadow: 0 4px 0 #2b2340;
}

/* 결과 */
#result {
  position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: rgba(15,10,30,.45);
  animation: fade .25s;
}
@keyframes fade { from { opacity: 0; } }
#result .card {
  background: #fff; color: #2b2340; border-radius: 26px; padding: 22px 30px; min-width: 230px;
  text-align: center; border: 4px solid #2b2340; box-shadow: 0 8px 0 #2b2340;
  animation: up .35s cubic-bezier(.2,1.4,.4,1);
}
@keyframes up { from { transform: translateY(40px) scale(.9); } }
.r-title { font-weight: 800; font-size: 16px; opacity: .7; }
.r-newrec { font-weight: 900; color: #ff3b6b; font-size: 18px; margin-top: 4px; }
.r-score { font-size: 64px; font-weight: 900; line-height: 1.1; }
.r-best { font-weight: 700; font-size: 15px; margin-bottom: 14px; }
#retryBtn {
  border: 3px solid #2b2340; background: #ffcf3b; color: #2b2340; font-weight: 900;
  font-size: 19px; border-radius: 16px; padding: 10px 26px; cursor: pointer; box-shadow: 0 4px 0 #2b2340;
}
#retryBtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #2b2340; }
.r-next { margin-top: 26px; font-weight: 800; animation: bob 1s infinite; text-shadow: 0 2px 4px #000; }
@keyframes bob { 50% { transform: translateY(-6px); } }

#loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 900; background: #1a1428; z-index: 50;
}

.slot.empty .info { display: none; }
.slot.broken .hint { display: none; }

/* 소개와 전체 게임 목록은 미리보기에서만 노출한다. */
#aboutLink { position:absolute; z-index:12; right:12px; top:12px; display:flex; gap:6px; align-items:center; padding:9px 11px; border:1px solid #ffffff50; border-radius:20px; background:#17271ed9; color:white; font-size:19px; text-decoration:none; }
#aboutLink span { font-size:10px; font-weight:750; }
#aboutLink[hidden] { display:none; }
#aboutLink:focus-visible { outline:3px solid #d7ef74; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }