/* 컬러 카멜레온 — 픽셀 스타일 UI (매쓰 닌자와 같은 톤) */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink: #2c2338;
  --cream: #fff6e5;
  --pink: #ff9eb5;
  --mint: #7ee8c0;
  --leaf: #6fd08c;
  --sky: #aee6ff;
  --sun: #ffd66b;
}

html, body {
  width: 100%; height: 100%;
  background: #1b1526;
  overflow: hidden;
  font-family: 'Galmuri11', 'Galmuri9', 'DungGeunMo', monospace;
  color: var(--ink);
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

#stage {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* 3D 캔버스와 HUD 캔버스를 같은 상자 위에 겹쳐 놓는다 */
#view {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  width: min(100dvw, calc(100dvh * 16 / 9));
  height: min(100dvh, calc(100dvw * 9 / 16));
  background: #2b2338;
}
#game, #hud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
#game { cursor: crosshair; }
#hud {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none; /* 입력은 전부 3D 캔버스가 받아 HUD 좌표로 변환한다 */
}

/* ===== 오버레이 화면 ===== */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  background: rgba(27, 21, 38, .55);
  z-index: 10;
  text-align: center;
}
.hidden { display: none !important; }

/* 메뉴 뒤에서 데모 카멜레온이 걸어다니는 게 보이도록 */
#screen-menu {
  background: linear-gradient(rgba(27, 21, 38, .62), rgba(27, 21, 38, .28) 40%, rgba(27, 21, 38, .7));
  pointer-events: none;
}
#screen-menu button { pointer-events: auto; }

#logo {
  font-size: clamp(34px, 8vw, 76px);
  color: #eafff2;
  letter-spacing: 2px;
  text-shadow:
    4px 4px 0 var(--ink),
    -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
    8px 8px 0 rgba(0, 0, 0, .25);
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.tagline {
  font-size: clamp(13px, 2.4vw, 21px);
  color: #fff;
  text-shadow: 2px 2px 0 var(--ink);
}

/* 메인 메뉴: 왼쪽 = 이 기기 하나로, 오른쪽 = 온라인 (좁으면 위아래로 쌓인다) */
.menu-buttons {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px;
  align-items: stretch; justify-content: center;
}
.menu-group {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 18px 14px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: rgba(27, 21, 38, .58);        /* 세계가 알록달록해도 글씨가 읽히게 */
  box-shadow: 0 4px 0 rgba(0, 0, 0, .28);
}
.menu-group.online { background: rgba(18, 52, 46, .62); }
.menu-group.online .group-title { color: var(--mint); }
.group-title {
  color: var(--sun);
  font-size: clamp(12px, 1.9vw, 17px);
  text-shadow: 2px 2px 0 var(--ink);
}
.group-note {
  color: #cdbfdb;
  font-size: clamp(10px, 1.5vw, 13px);
  line-height: 1.5;
  text-shadow: 1px 1px 0 var(--ink);
}
.group-note b { color: var(--sun); }
.menu-foot { display: flex; gap: 10px; margin-top: 4px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }

/* 대기실의 두 놀이 방식 — 같은 크기 카드로 나란히. 어느 쪽도 곁다리가 아니다.
   좁으면 위아래로 접힌다 (stretch 라 높이는 늘 서로 맞는다) */
.lobby-modes {
  display: flex; gap: 12px;
  align-items: stretch; flex-wrap: wrap; justify-content: center;
  width: 100%;
}
/* 둘이 항상 한 줄에 나란히 — 기준폭을 작게 잡고 남는 자리를 나눠 갖는다.
   진짜로 좁을 때(한 장에 200px 도 안 나올 때)만 위아래로 접힌다 */
.lobby-modes .menu-group { flex: 1 1 200px; min-width: 0; max-width: 320px; padding: 12px 12px 14px; }
.lobby-modes select { max-width: 100%; }
.lobby-modes .pixel-btn { margin-top: auto; }

.mp-row { display: flex; align-items: center; gap: 8px; }
.mp-label {
  color: #fff;
  font-size: clamp(13px, 2.1vw, 18px);
  text-shadow: 2px 2px 0 var(--ink);
  margin-right: 2px;
}
.pixel-btn.mp { background: var(--mint); padding: 10px 16px; }
.pixel-btn.mp:hover { background: #9df0d0; }

/* 화면이 낮으면 메뉴를 촘촘하게 (폰 가로·작은 태블릿) — 잘려서 안 보이면 안 되니까 */
@media (max-height: 640px) {
  /* 낮은 화면에서는 메뉴를 위에서부터 쌓고, 넘치면 스크롤되게 (잘려서 안 보이면 안 된다) */
  #screen-menu {
    justify-content: flex-start;
    padding: 8px 8px 14px;
    overflow-y: auto;
    pointer-events: auto;
  }
  .screen { gap: 7px; }
  .menu-buttons { gap: 8px; margin-top: 0; }
  .menu-group { padding: 8px 12px 10px; gap: 6px; }
  .group-note, .tagline { display: none; }
  #logo { font-size: clamp(22px, 5.4vw, 40px); }
  .pixel-btn { padding: 8px 14px; }
  .pixel-btn.big { padding: 10px 18px; }
  .pixel-btn.small { padding: 5px 9px; }
  .menu-foot { gap: 7px; margin-top: 0; }
}
@media (max-height: 460px) {
  .best-line { display: none; }
  #screen-menu .name-row { display: none; }   /* 이름은 결과 화면에서도 적을 수 있다 */
  .screen { gap: 5px; }
  .menu-group { padding: 6px 10px 8px; gap: 5px; }
  #logo { font-size: clamp(20px, 4.6vw, 32px); }
}

.best-line {
  color: var(--sun);
  text-shadow: 2px 2px 0 var(--ink);
  font-size: clamp(11px, 1.9vw, 17px);
  line-height: 1.6;
}

/* ===== 픽셀 버튼 ===== */
.pixel-btn {
  font-family: inherit;
  font-size: clamp(14px, 2.3vw, 21px);
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 8px;
  padding: 10px 22px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .06s, box-shadow .06s;
}
.pixel-btn:hover { background: #fff; }
.pixel-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.pixel-btn.big { font-size: clamp(17px, 2.9vw, 25px); padding: 13px 28px; background: var(--leaf); }
.pixel-btn.big:hover { background: #8ee0a4; }
.pixel-btn.small { font-size: clamp(11px, 1.7vw, 15px); padding: 7px 13px; box-shadow: 0 3px 0 var(--ink); }
/* 잠긴 버튼 — 흐리게, 눌리는 움직임도 없이 */
.pixel-btn:disabled { opacity: .45; pointer-events: none; }

/* ===== 패널 ===== */
.panel {
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 6px 0 var(--ink), 0 12px 24px rgba(0, 0, 0, .35);
  padding: 22px 30px;
  max-width: min(88vw, 580px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  /* 화면보다 커지면 잘리는 대신 굴러가야 한다. 학교 노트북(1366x768)은 브라우저
     창 높이가 640px 남짓이라, 대기실처럼 내용이 긴 창은 위아래가 잘려 나갔다 */
  max-height: 88vh; overflow-y: auto;
}
/* 넘칠 때 줄어드는 건 창 전체(굴러감)여야 한다. 안 그러면 제 스크롤이 있는 칸
   (대기실 명단·기록 목록)이 넘친 만큼 다 떠안고 0px 로 접혀 사라진다 */
.panel > * { flex-shrink: 0; }
.panel h2 { font-size: clamp(19px, 3.2vw, 29px); }
.panel p { font-size: clamp(12px, 1.9vw, 16px); line-height: 1.75; }
.panel.scrolly { max-height: 88vh; overflow-y: auto; text-align: left; }
.panel.scrolly h2, .panel.scrolly button { align-self: center; }

.big-score { font-size: clamp(24px, 4.6vw, 40px) !important; color: #e2684f; }
.stars { font-size: clamp(20px, 3.6vw, 32px) !important; letter-spacing: 4px; color: var(--sun); }

.race-ranks {
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
  font-size: clamp(13px, 2.2vw, 19px);
}
.race-ranks li { display: flex; gap: 10px; justify-content: space-between; min-width: min(70vw, 320px); }
.race-ranks .pct { color: #2f9e6e; }

/* 명예의 전당 크레딧 롤 */
#credits {
  position: absolute;
  right: 10px; top: 6%; bottom: 6%;
  width: clamp(140px, 17vw, 220px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  text-align: center;
}
#credits-inner {
  animation: creditRoll 32s linear infinite;
  color: #fff;
  text-shadow: 2px 2px 0 var(--ink);
}
@keyframes creditRoll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.credits-header { font-size: clamp(14px, 2vw, 19px); color: var(--sun); margin-bottom: 12px; }
.credits-section { font-size: clamp(11px, 1.7vw, 15px); color: var(--mint); margin: 16px 0 6px; }
.credits-line {
  display: flex; justify-content: space-between; gap: 6px;
  font-size: clamp(10px, 1.4vw, 13px); line-height: 1.9; padding: 0 8px;
}
.credits-line.empty { display: block; line-height: 1.7; margin-top: 6px; }
@media (max-width: 780px) { #credits { display: none; } }

/* ===== 상단 바 ===== */
#topbar { position: absolute; top: 10px; right: 10px; z-index: 5; display: flex; gap: 8px; }
.icon-btn {
  font-family: inherit;
  width: 40px; height: 40px;
  font-size: 19px;
  color: var(--cream);
  background: rgba(44, 35, 56, .75);
  border: 2px solid var(--cream);
  border-radius: 8px;
  cursor: pointer;
}
.icon-btn:active { transform: translateY(2px); }

/* ===== 로딩 스피너 ===== */
.spinner {
  width: 34px; height: 34px;
  border: 5px solid rgba(44, 35, 56, .2);
  border-top-color: var(--leaf);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 수업용 화면 공통 ===== */
.panel.wide { max-width: min(94vw, 760px); width: min(94vw, 760px); }
.hint { color: #6b5f74; font-size: clamp(11px, 1.6vw, 14px) !important; }
.panel h3 { font-size: clamp(14px, 2.2vw, 19px); align-self: flex-start; margin-top: 6px; }

/* 이름 입력 */
.name-row { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.name-row label {
  color: #fff; text-shadow: 2px 2px 0 var(--ink);
  font-size: clamp(11px, 1.7vw, 15px);
}
.name-row input, .reflect input {
  font-family: inherit;
  font-size: clamp(11px, 1.7vw, 15px);
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 8px;
  padding: 6px 10px;
}
.name-row input { width: min(52vw, 240px); }

/* 판정 결과: 색/무늬 점수 + 조언 + 성찰 */
.subscores { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.subscores .sub {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 92px;
  background: rgba(44, 35, 56, .07);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 5px 12px;
}
.subscores .sub b { font-size: clamp(15px, 2.6vw, 22px); }
.subscores .sub span { font-size: clamp(10px, 1.5vw, 13px); color: #6b5f74; }
.advice {
  background: var(--sun);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: clamp(11px, 1.8vw, 15px) !important;
}
.reflect { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.reflect label { font-size: clamp(10px, 1.5vw, 13px); color: #6b5f74; }
.reflect input { width: 100%; }

/* 색 노트 */
.note-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px; width: 100%;
}
.note-card {
  border: 3px solid var(--ink); border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column;
}
.note-chip { height: 42px; }
.note-body { padding: 5px 7px; background: #fffdf7; font-size: clamp(9px, 1.3vw, 12px); line-height: 1.5; }
.note-body input {
  width: 100%; font-family: inherit; font-size: inherit;
  border: 2px solid var(--ink); border-radius: 5px; padding: 2px 5px; margin-bottom: 3px;
}
.note-body .meta { color: #6b5f74; }
.note-del { align-self: flex-end; background: none; border: 0; cursor: pointer; font-size: 12px; }

/* 학습 기록 */
.record-list { width: 100%; display: flex; flex-direction: column; gap: 5px; max-height: 46vh; overflow-y: auto; }
.record-row {
  display: grid; grid-template-columns: 1fr auto; gap: 6px;
  border: 2px solid var(--ink); border-radius: 7px; padding: 5px 9px;
  background: #fffdf7; font-size: clamp(10px, 1.5vw, 13px); text-align: left;
}
.record-row .camo { font-weight: bold; }
.record-row .pass { color: #2f9e6e; }
.record-row .fail { color: #e2684f; }
.record-row .why { grid-column: 1 / -1; color: #6b5f74; }

/* 성취기준 카드 */
.std-card {
  border: 2px solid var(--ink); border-radius: 8px; padding: 7px 10px; margin-bottom: 6px;
  background: #fffdf7; text-align: left; font-size: clamp(10px, 1.5vw, 13px); line-height: 1.6;
}
.std-card .code { font-weight: bold; color: #2f6f9e; }
.std-card .tag {
  display: inline-block; border-radius: 4px; padding: 0 5px; margin-left: 5px;
  font-size: .85em; background: var(--mint); border: 1px solid var(--ink);
}
.std-card .tag.key { background: var(--sun); }
.std-card .link { color: #6b5f74; }
.flow { text-align: left; font-size: clamp(10px, 1.5vw, 13px); line-height: 1.8; padding-left: 20px; }

/* ===== 온라인 ===== */
.err { color: #e2684f; font-size: clamp(11px, 1.7vw, 14px) !important; white-space: pre-line; }
.join-row { display: flex; gap: 8px; align-items: center; }
.join-row input {
  font-family: inherit; width: 130px; text-align: center; letter-spacing: 4px;
  font-size: clamp(16px, 2.6vw, 24px);
  color: var(--ink); background: var(--cream);
  border: 3px solid var(--ink); border-radius: 8px; padding: 6px 8px;
  text-transform: uppercase;
}
.code-big { color: #2f6f9e; letter-spacing: 6px; }
#lobby-url { color: #2f6f9e; }
.lobby-players {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  max-height: 34vh; overflow-y: auto; width: 100%;
}
.lobby-players .who {
  border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px;
  background: #fffdf7; font-size: clamp(10px, 1.6vw, 14px);
}
.lobby-players .who.host { background: var(--sun); }
.lobby-players .who.done { background: var(--mint); }
.rank-list {
  list-style: none; width: 100%;
  display: flex; flex-direction: column; gap: 5px;
  font-size: clamp(11px, 1.8vw, 15px);
}
.rank-list li {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center;
  border: 2px solid var(--ink); border-radius: 7px; padding: 5px 10px; background: #fffdf7;
}
.rank-list li.me { background: var(--sun); }
.rank-list .sub2 { color: #6b5f74; font-size: .85em; }

#card-score { color: #2f6f9e !important; }

/* ===== 팀 대전 ===== */
.role-banner {
  background: var(--sun); border: 3px solid var(--ink); border-radius: 10px;
  padding: 8px 18px; font-size: clamp(14px, 2.4vw, 20px) !important;
}
.team-cols { display: flex; gap: 12px; width: 100%; justify-content: center; flex-wrap: wrap; }
.team-col {
  flex: 1; min-width: 180px; max-width: 300px;
  border: 3px solid var(--ink); border-radius: 10px; padding: 8px 10px; background: #fffdf7;
}
.team-col h3 { text-align: center; margin-bottom: 6px; align-self: center !important; }
.team-col.teamA { border-color: #3f9e5f; }
.team-col.teamB { border-color: #ff8a3d; }
.team-col .who {
  display: inline-block; margin: 2px; border: 2px solid var(--ink); border-radius: 999px;
  padding: 3px 10px; font-size: clamp(10px, 1.6vw, 14px); background: var(--cream);
}
.team-col .who.me { background: var(--sun); font-weight: bold; }
.lobby-players .who.teamA { border-color: #3f9e5f; border-width: 3px; }
.lobby-players .who.teamB { border-color: #ff8a3d; border-width: 3px; }
.rr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.rr-grid h3 { align-self: flex-start; font-size: clamp(12px, 1.9vw, 16px); margin-bottom: 4px; }
@media (max-width: 640px) { .rr-grid { grid-template-columns: 1fr; } }
#lobby-modes select {
  font-family: inherit; font-size: clamp(11px, 1.7vw, 15px);
  color: var(--ink); background: var(--cream);
  border: 3px solid var(--ink); border-radius: 8px; padding: 5px 7px;
}
#lobby-match label, #lobby-host label {
  font-size: clamp(11px, 1.6vw, 14px); color: var(--ink);
}

/* ===== 메뉴 서버 현황 위젯 ===== */
.server-stats {
  pointer-events: auto;
  background: rgba(27, 21, 38, .72);
  border: 2px solid rgba(255, 246, 229, .5);
  border-radius: 10px;
  padding: 8px 14px;
  display: flex; flex-direction: column; gap: 5px;
  /* 메뉴 왼쪽 중단에 고정 (오른쪽 명예의 전당과 짝) */
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(230px, 22vw, 300px);
}
/* 좁은 화면에서는 겹치므로 원래 흐름(하단)으로 되돌린다 */
@media (max-width: 900px) {
  .server-stats {
    position: static;
    transform: none;
    width: auto;
    min-width: min(84vw, 330px);
  }
}
.ss-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ss-chip {
  color: #fff; font-size: clamp(10px, 1.5vw, 13px);
  background: rgba(255, 246, 229, .14);
  border-radius: 999px; padding: 2px 10px;
}
.ss-chip b { color: var(--mint); }
.ss-gauge { display: flex; flex-direction: column; gap: 2px; }
.ss-gauge > span { color: #cfc4da; font-size: clamp(9px, 1.4vw, 12px); }
.ss-gauge b { color: var(--sun); }
.ss-bar {
  height: 6px; border-radius: 4px; overflow: hidden;
  background: rgba(255, 255, 255, .15);
}
.ss-bar > div { height: 100%; width: 0%; background: var(--leaf); transition: width .6s; }
.ss-note { color: #8e8298; font-size: clamp(8px, 1.2vw, 11px) !important; text-align: center; }

/* 음성 통화 (온라인 방에서만) */
.voice-opt {
  display: inline-flex; align-items: center; gap: 6px;
  /* 패널 바탕이 크림색이라 글자는 어두워야 읽힌다 */
  color: var(--ink); font-size: clamp(11px, 1.6vw, 13px); cursor: pointer;
}
.voice-opt input { width: 16px; height: 16px; accent-color: var(--mint); }
/* 맵·목소리는 둘 다 방을 열 때 한 번 정하는 값이라 한 줄에 같이 둔다.
   각자 자기 조건으로 숨으므로(맵은 방장만, 목소리는 켠 방에서만) 감싼 줄은 늘 떠 있다 */
.lobby-setup {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  align-items: center; justify-content: center; width: 100%;
}
.setup-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.voice-note { color: #6b5f74; font-size: clamp(10px, 1.4vw, 12px); }

/* 한 번에 들어오는 초대 주소 */
/* 소리 조절바 */
.vol-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  color: var(--ink); font-size: clamp(11px, 1.7vw, 14px);
}
.vol-row label { flex: 0 0 auto; min-width: 6.5em; }
.vol-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--mint); }
.vol-row b { flex: 0 0 auto; min-width: 2.6em; text-align: right; color: #6b5f74; }

/* 맵 고르기 — 그림을 눌러 고른다 */
.maps-grid {
  display: grid; gap: 10px; width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.map-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px; cursor: pointer;
  background: rgba(38, 28, 44, .06);
  border: 3px solid var(--ink); border-radius: 10px;
  font: inherit; color: var(--ink);
}
.map-card:hover, .map-card:focus-visible { background: rgba(126, 232, 192, .3); }
.map-card canvas {
  width: 100%; height: auto; display: block;
  border-radius: 6px; background: #cfd8e0;
}
.map-card b { font-size: clamp(12px, 1.8vw, 15px); }
.map-card span { color: #6b5f74; font-size: clamp(10px, 1.4vw, 12px); }

/* QR 은 찍는 것, 주소는 붙여넣는 것 — 좌우로 나눈다. 세로로 쌓으면 대기실이 한 화면을 넘긴다 */
.lobby-share { display: flex; align-items: center; gap: 12px; width: 100%; justify-content: center; }
.lobby-share .qr { flex: 0 0 auto; }
.share-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.share-side .hint { margin: 0; text-align: left; }
/* 옆자리가 남지 않을 만큼 좁아지면 그때만 위아래로 */
@media (max-width: 430px) {
  .lobby-share { flex-direction: column; }
  .share-side .hint { text-align: center; }
}
.join-link { display: flex; gap: 6px; align-items: center; width: 100%; }
.join-link input {
  flex: 1; min-width: 0;
  font-size: clamp(10px, 1.5vw, 13px);
  text-align: center;
}

/* 둘러보는 중에만 뜨는 '결과로' 단추 — 게임 화면 위, 상단 버튼과 겹치지 않게 왼쪽에 */
.watch-back {
  position: absolute; top: 10px; left: 10px; z-index: 6;
  font-family: inherit; font-size: 12px;
  color: var(--cream); background: rgba(38, 28, 44, .8);
  border: 2px solid var(--cream); border-radius: 6px;
  padding: 6px 10px; cursor: pointer;
}

/* 방 QR — 칸이 뭉개지면 못 읽으니 늘릴 때도 또렷하게 */
/* 칸 하나가 화면 픽셀에 딱 맞게 그리고, CSS 로는 늘리지 않는다 (늘리면 못 읽는다) */
.qr {
  image-rendering: pixelated;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 6px;
  cursor: pointer;
}
.qr-big {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  background: rgba(12, 8, 18, .95);
  cursor: pointer;
}
.qr-big canvas {
  image-rendering: pixelated;
  background: #fff;
  border-radius: 10px;
}
.qr-big p { color: var(--cream); font-size: clamp(13px, 3vw, 20px); }
.qr-big b { color: var(--sun); letter-spacing: 3px; }


/* ===== 제작자 표시 =====
   모든 화면 위에 떠 있으나 손가락을 가로채지 않는다 (pointer-events: none).
   조이스틱은 HUD 640×360 기준 y=244±46 에 있어 아래 70px 가 비어 있다 — 거기 앉는다.
   QR 큰 화면(z-index 60)은 덮어야 하므로 그보다 낮게 둔다. */
.app-footer {
  /* left:50% + translateX 로 가운데를 맞추면 쓸 수 있는 폭이 반칸으로 줄어들어
     좋은 화면에서도 두 줄로 쌀린다. 폭을 꽉 쓰고 글자만 가운데로 모은다. */
  position: fixed; bottom: 6px; left: 0; right: 0;
  text-align: center;
  z-index: 40;
  pointer-events: none;
  /* 시작 화면에서만 보인다. 놀 때는 화면을 비워 준다 —
     메뉴는 열릴 때 .hidden 이 빠지므로 형제 선택자로 따라붙으면
     자바스크립트를 한 줄도 안 쓰고도 항상 맞는다. */
  display: none;
}
#screen-menu:not(.hidden) ~ .app-footer { display: block; }
.copyright {
  /* flex 금지 — flex 는 자식 사이 공백 노드를 버려서 봉투 양옆 띄어쓰기가 사라진다 */
  display: inline-block;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  color: rgba(255, 255, 255, .95);
  background: rgba(0, 0, 0, .45);
  border-radius: 999px; padding: 4px 12px;
  user-select: none; -webkit-user-select: none;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.copyright__mail {
  width: 14px; height: 14px;
  display: inline-block; vertical-align: -2px;
  /* 봉투가 뷰박스를 꽉 채워 공백 하나로는 주소에 붙어 보인다 */
  margin-right: 3px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
/* 좀은 화면에서는 'All rights reserved.' 를 먼저 둔다 — 없어도 저작권은 그대로고,
   세 줄로 쌀려 뒤의 판을 덮는 쪽이 더 손해다. 그래도 넘치면 줄바꿈을 허락한다. */
@media (max-width: 420px) {
  .copyright__full { display: none; }
  .copyright { white-space: normal; }
}