/* 색과 크기는 design-zip/게임 페이지.dc.html 시안을 따른다. */
:root {
  --mint: #cdeedd;
  --hill-1: #b3e3cb;
  --hill-2: #9dd8bb;
  --hill-3: #86cdab;
  --sun: #fff3c4;
  --card: #272b4a;
  --banner: #1e2240;
  --circle-dark: #343a6a;
  --circle-light: #6a6fb8;
  --slot: #1c1f38;
  --slot-stripe: #202440;
  --panel: #30355a;
  --line: #444a72;
  --coral: #f2655c;
  --coral-light: #ff7d74;
  --coral-dark: #b8433d;
  --text: #e4e5f0;
  --text-muted: #c9cbe0;
  --heading: #f3ead8;
  /* 시안 글꼴. 못 불러오면 컴퓨터에 있는 글꼴로 보인다 */
  --font: "Gowun Dodum", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-cute: "Jua", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;

  /* 컴퓨터 화면에서 게임 자리 높이: 화면 높이 - (위아래 여백 + 배너 + 칸 안쪽 여백) */
  --chrome: 210px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--mint);
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  padding: 16px;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 바탕 장식 */
.hill, .sun {
  position: fixed;
  border-radius: 50%;
  z-index: 0;
}
.hill-1 { left: -20vw; bottom: -30vh; width: 80vw; height: 70vh; background: var(--hill-1); }
.hill-2 { right: -25vw; bottom: -40vh; width: 90vw; height: 70vh; background: var(--hill-2); }
.hill-3 { left: -10vw; bottom: -48vh; width: 120vw; height: 70vh; background: var(--hill-3); }
.sun { left: 6vw; top: 14vh; width: 70px; height: 70px; background: var(--sun); }

/* 가운데 큰 카드 */
.page {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  background: var(--card);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(40, 90, 70, 0.25);
}

/* 맨 위 배너: 낮게 */
.game-banner {
  position: relative;
  overflow: hidden;
  min-height: 96px;
  padding: 18px 32px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: var(--banner);
}
.game-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--coral);
}
.banner-circle {
  position: absolute;
  border-radius: 50%;
}
.banner-circle-big { right: -40px; top: -90px; width: 220px; height: 220px; background: var(--circle-dark); }
.banner-circle-small { right: 160px; top: 40px; width: 72px; height: 72px; background: var(--circle-light); }
.banner-diamond {
  position: absolute;
  right: 60px;
  top: 22px;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  background: var(--coral);
}
/* 배너 오른쪽: 달(동그라미) 쪽으로 올라가는 발자국 */
.paw-trail {
  position: absolute;
  right: 250px;
  bottom: 14px;
  display: flex;
  gap: 14px;
  align-items: flex-end;
  font-size: 20px;
  opacity: 0.6;
  filter: grayscale(1) brightness(3); /* 진한 발자국 이모티콘을 밝은 색으로 */
}
.paw-trail span:nth-child(odd) { transform: rotate(-20deg); }
.paw-trail span:nth-child(even) { transform: rotate(20deg); }
.paw-trail span:nth-child(2) { margin-bottom: 6px; }
.paw-trail span:nth-child(3) { margin-bottom: 18px; }
.paw-trail span:nth-child(4) { margin-bottom: 26px; }

.game-banner h1 {
  position: relative;
  margin: 0;
  font-family: var(--font-cute);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.game-banner p {
  position: relative;
  margin: 0;
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.5;
  color: var(--text-muted);
}

/* 세 칸 */
.columns {
  display: grid;
  grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
  align-items: start;
}

h2 {
  margin: 0;
  font-family: var(--font-cute);
  font-size: 24px;
  font-weight: 400;
  color: var(--heading);
}

/* 왼쪽 칸: 9:16 게임 자리. 컴퓨터에서는 화면 높이에 맞춰 스크롤 없이 다 보인다. */
.game-slot {
  position: relative;
  overflow: hidden;
  height: clamp(360px, calc(100vh - var(--chrome)), 720px);
  aspect-ratio: 9 / 16;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: repeating-linear-gradient(135deg, var(--slot) 0 14px, var(--slot-stripe) 14px 28px);
}
.slot-platform {
  position: absolute;
  height: 10px;
  background: var(--circle-light);
}
.slot-platform-1 { left: 12%; bottom: 22%; width: 34%; }
.slot-platform-2 { right: 10%; bottom: 38%; width: 30%; }
.slot-platform-3 { left: 30%; bottom: 72%; width: 28%; }
.slot-hero {
  position: absolute;
  left: 22%;
  bottom: calc(22% + 10px);
  width: 22px;
  height: 22px;
  background: var(--coral);
}
.slot-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12%;
  background: var(--circle-dark);
}
.slot-label {
  position: relative;
  margin: 0;
  font-family: var(--font-cute);
  font-size: 18px;
  font-weight: 400;
  color: var(--text-muted);
  text-align: center;
}

/* 가운데 칸: 게임 소개 */
.game-about {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.about-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.about-block p {
  margin: 0;
  line-height: 1.75;
}
.muted {
  font-size: 15px;
  color: var(--text-muted);
}
.keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
kbd {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-cute);
  font-weight: 400;
  background: var(--heading);
  color: var(--banner);
  box-shadow: 0 3px 0 #a89c84;
}
.info {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 20px;
}
.info dt, .info dd {
  margin: 0;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.info dt { color: var(--text-muted); }
.info dd { font-weight: 600; }
.info dt:last-of-type, .info dd:last-of-type { border-bottom: 1px solid var(--line); }

/* 오른쪽 칸: 점수 */
.score-area {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.score-form, .comment-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--panel);
}
.score-form label, .comment-form label {
  font-size: 14px;
  color: var(--text);
}
.nickname-input, .score-input, .comment-input {
  width: 100%;
  min-height: 44px;
  margin-bottom: 6px;
  padding: 11px 12px;
  font-family: var(--font);
  font-size: 16px;
  color: #ffffff;
  background: var(--banner);
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
}
.nickname-input::placeholder, .score-input::placeholder, .comment-input::placeholder { color: #8a8db0; }
.nickname-input:focus, .score-input:focus, .comment-input:focus { border-color: var(--coral); }
.comment-input { resize: vertical; line-height: 1.6; }
/* 버튼 위 개인정보 안내 한 줄 */
.privacy-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.privacy-note::before { content: "🔒 "; }
.score-submit {
  min-height: 46px;
  margin-top: 4px;
  font-family: var(--font-cute);
  font-size: 17px;
  font-weight: 400;
  color: #1a1a1a;
  background: var(--coral);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--coral-dark);
}
.score-submit:hover { background: var(--coral-light); }
.score-submit:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--coral-dark); }

.scoreboard {
  list-style: none;
  margin: 0;
  padding: 0;
}
.scoreboard li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
}
/* "점수가 없어요" 같은 안내 한 줄은 칸을 나누지 않고 가로로 길게 */
.scoreboard li .name:only-child { grid-column: 1 / -1; }
.rank { font-family: var(--font-cute); font-size: 18px; color: var(--coral); }
.points { font-family: var(--font-cute); color: #ffffff; }

/* 맨 아래: 댓글. 세 칸과 같은 폭과 여백 */
.game-comments {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 24px 24px;
}
/* 댓글 하나하나를 고양이 귀가 달린 말풍선처럼 보이게 한다 */
.comment-list {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.comment-list li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 18px;
  background: var(--panel);
  border-radius: 20px;
}
.comment-list li::before,
.comment-list li::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 14px solid var(--panel);
}
.comment-list li::before { left: 18px; }
.comment-list li::after { left: 46px; }
.comment-name {
  font-family: var(--font-cute);
  font-size: 17px;
  color: var(--coral);
}
.comment-name::before { content: "🐱 "; }
.comment-body {
  font-family: var(--font-cute);
  font-size: 16px;
  color: var(--text);
  white-space: pre-wrap;
}
.comment-pending { font-family: var(--font-cute); color: var(--text-muted); }
.comment-pending::before { content: "💤 "; }

/* 관리자 페이지 */
.admin-area {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
}
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-button {
  min-height: 36px;
  padding: 0 14px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.admin-button:hover { border-color: var(--coral); }

/* 태블릿·휴대폰: 배너 → 게임 → 소개 → 점수 순서로 한 줄씩 쌓는다 */
@media (max-width: 960px) {
  .columns {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 16px;
  }
  .game-comments {
    padding: 0 16px 20px;
  }
  .game-slot {
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto;
  }
  .game-banner {
    padding: 16px 20px 20px;
  }
  .banner-circle-small,
  .paw-trail { display: none; }
}

@media (max-width: 480px) {
  body { padding: 8px; }
  .page { border-radius: 18px; }
}