:root {
  --paper: #f6ecd9;
  --paper2: #fffaf0;
  --ink: #5b3b25;
  --ink-soft: #8a6a50;
  --ham: #e0708f;
  --mon: #d9822b;
  --leaf: #7cb342;
  --gold: #f2b134;
  --s: 1;             /* 게임 논리 px → CSS px (JS 가 갱신) */
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #e9dcc3;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;   /* 더블탭 확대만 막는다. 게임 화면·버튼은 아래에서 none */
  word-break: keep-all;
}
#app { position: fixed; inset: 0; }
#cv { position: absolute; display: block; background: #cfe6b8; touch-action: none; }
#ui { position: absolute; overflow: hidden; pointer-events: none; }
#ui > * { pointer-events: auto; }
.hidden { display: none !important; }

button { font: inherit; color: inherit; cursor: pointer; }
.btn {
  min-height: 48px; min-width: 150px;
  padding: 10px 22px; border-radius: 16px;
  border: 3px solid var(--ink); background: var(--paper2);
  font-size: max(16px, calc(24px * var(--s))); font-weight: 700;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:focus-visible, .hud-btn:focus-visible, .portrait:focus-visible, .stage-card:focus-visible { outline: 4px solid #4a90d9; outline-offset: 3px; }
.btn.primary { background: #ffd66b; }
.btn.ghost { background: transparent; box-shadow: none; border-style: dashed; }
.btn.danger { background: #f7b6a8; }
.note { font-size: max(15px, calc(19px * var(--s))); color: var(--ink-soft); margin: 10px 0 0; }

/* ── 화면 공통 ─────────────────────────── */
.screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
}
.screen.dim { background: rgba(60, 40, 20, .45); }
.panel {
  background: var(--paper);
  border: 4px solid var(--ink); border-radius: 26px;
  box-shadow: 0 8px 0 rgba(91,59,37,.35);
  padding: max(14px, calc(26px * var(--s))) max(18px, calc(36px * var(--s)));
  max-height: 100%; overflow: auto;
  text-align: center;
  font-size: max(16px, calc(22px * var(--s)));
  min-width: min(92%, 420px);
}
.panel.wide { max-width: 94%; }
.panel h2 { margin: 0 0 12px; font-size: max(21px, calc(38px * var(--s))); }
.col { display: flex; flex-direction: column; gap: 12px; align-items: stretch; margin-top: 8px; }
.row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.bar { width: 280px; max-width: 100%; height: 16px; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; margin: 8px auto 0; background: #fff; }
.bar i { display: block; height: 100%; width: 0; background: var(--leaf); transition: width .15s; }

/* ── 타이틀 ─────────────────────────── */
#scr-title {
  background: url(../assets/title.webp) center bottom / cover no-repeat #cfe6b8;
  justify-content: flex-start; align-items: stretch;
  padding: 0;
}
.title-panel {
  width: 52%; min-width: 280px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 3% 3% 3% 5%;
}
.title-panel h1 {
  margin: 0; line-height: 1.12;
  font-size: max(30px, calc(66px * var(--s)));
  color: var(--ink);
  text-shadow: 0 3px 0 #fff, 3px 0 0 #fff, -3px 0 0 #fff, 0 -3px 0 #fff, 0 6px 10px rgba(255,255,255,.8);
}
.title-panel h1 span { color: #d0506f; }
.title-sub {
  margin: 10px 0 18px; font-weight: 700;
  font-size: max(16px, calc(24px * var(--s)));
  text-shadow: 0 0 6px #fff, 0 0 10px #fff;
}
.title-btns { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.title-btns .btn { min-width: max(200px, calc(300px * var(--s))); text-align: left; }
#t-msg { text-shadow: 0 0 6px #fff; color: #9a3b2b; font-weight: 700; }
.title-btns .btn.ghost { background: rgba(255,250,240,.8); }   /* 그림 위에서도 읽히게 */
.title-panel { overflow: hidden; }
/* 낮은 화면(폰 가로)에서 넘치면 JS 가 붙인다: 제목 축소 + 버튼 2열 → 그래도 넘치면 부제 숨김 */
.title-panel.compact { padding-top: 8px; padding-bottom: 8px; }
.title-panel.compact h1 { font-size: max(22px, calc(46px * var(--s))); }
.title-panel.compact .title-sub { margin: 4px 0 8px; font-size: 14px; }
.title-panel.compact { width: 62%; }
.title-panel.compact .title-btns { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; align-items: stretch; }
.title-panel.compact .title-btns .btn { min-width: 128px; padding: 6px 14px; font-size: 16px; text-align: center; white-space: nowrap; }
.title-panel.compact #t-msg { margin-top: 4px; font-size: 13px; }
.title-panel.tiny .title-sub { display: none; }
/* 타이틀 자사 배너: 그림의 하늘(오른쪽 위). 제목·버튼과 겹치면 붙이지 않는다(game.js titleAd).
   하단 애드센스 바와는 화면 반대편이라 두 광고가 붙어 보이지 않는다. */
#t-ad.title-ad { position: absolute; top: max(8px, 3%); right: max(8px, 2.5%); width: min(320px, 36%); }
#t-ad .house-ad { margin: 0; max-width: 100%; }
#t-ad .house-ad img { width: 100%; height: auto; }
#t-ad .house-ad__label { color: var(--ink); text-shadow: 0 0 4px #fff, 0 0 8px #fff; }

/* ── 스테이지 선택 ─────────────────────── */
#scr-select { background: url(../assets/title.webp) center / cover no-repeat; }
#scr-select::before { content: ""; position: absolute; inset: 0; background: rgba(246,236,217,.55); }
#scr-select .panel { position: relative; overflow: hidden; max-width: 96%; padding-top: max(10px, calc(20px * var(--s))); padding-bottom: max(10px, calc(18px * var(--s))); }
#scr-select .panel h2 { margin-bottom: 8px; }
#scr-select .row { margin-top: 10px; }
/* 스테이지 카드는 한 줄로 두고 좌우로 넘긴다 (위아래 스크롤 없음) */
#stage-cards {
  display: flex; flex-wrap: nowrap; gap: max(10px, calc(22px * var(--s)));
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding: 0 8px;
  padding: 4px 8px 12px;
  touch-action: pan-x; overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
#stage-cards > .stage-card { flex: 0 0 auto; scroll-snap-align: center; }
#stage-cards > .stage-card:first-child { margin-left: auto; }   /* 다 들어가면 가운데, 넘치면 왼쪽부터 */
#stage-cards > .stage-card:last-child { margin-right: auto; }
.stage-card {
  /* 화면 높이에 맞춰 줄인다: 제목·버튼을 뺀 높이 안에 카드(16:9 그림 + 글 3줄)가 들어가게 */
  width: max(140px, min(calc(300px * var(--s)), calc((var(--gh, 720px) - 300px) * 1.6)));
  border: 4px solid var(--ink); border-radius: 20px; background: var(--paper2);
  padding: 0 0 10px; overflow: hidden; text-align: center;
  box-shadow: 0 5px 0 var(--ink);
}
.stage-card:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.stage-card .thumb { display: block; width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; border-bottom: 3px solid var(--ink); }
.stage-card .name { display: block; font-weight: 800; font-size: max(16px, calc(26px * var(--s))); margin-top: 4px; }
.stage-card .status { display: block; font-size: max(14px, calc(19px * var(--s))); color: var(--ink-soft); }
.stage-card .snk { display: block; font-size: max(18px, calc(26px * var(--s))); letter-spacing: 2px; margin-top: 2px; }
.stage-card[disabled] { cursor: not-allowed; filter: grayscale(.8); opacity: .75; }
.stage-card[disabled] .thumb { filter: blur(2px) brightness(.85); }

/* ── HUD ─────────────────────────── */
#hud {
  position: absolute; left: 0; right: 0; top: 0;
  height: max(52px, calc(88px * var(--s)));
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(6px, calc(14px * var(--s)));
  gap: 8px;
  pointer-events: none;
}
#hud > * { pointer-events: auto; }
.hud-left, .hud-right { display: flex; gap: max(6px, calc(10px * var(--s))); align-items: center; }
.portrait {
  display: flex; align-items: center; gap: 4px;
  height: max(46px, calc(72px * var(--s)));
  padding: 2px 10px 2px 2px;
  border-radius: 40px; border: 3px solid rgba(91,59,37,.45);
  background: rgba(255,250,240,.82);
  opacity: .8;
}
.portrait canvas { height: 100%; aspect-ratio: 1; border-radius: 50%; background: #fff4e4; }
.portrait .p-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.portrait b { font-size: max(16px, calc(24px * var(--s))); }
.portrait small { font-size: max(12px, calc(16px * var(--s))); color: var(--ink-soft); }
.portrait.active { opacity: 1; border: 4px solid var(--ink); background: #fffaf0; box-shadow: 0 3px 0 var(--ink); }
.portrait.active[data-char="hamster"] { border-color: var(--ham); box-shadow: 0 3px 0 #b4506d; }
.portrait.active[data-char="monkey"] { border-color: var(--mon); box-shadow: 0 3px 0 #a55f16; }
.portrait.active small { color: var(--ink); font-weight: 700; }
.hud-center {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,250,240,.82); border: 3px solid rgba(91,59,37,.45); border-radius: 18px;
  padding: 2px 14px;
}
#hud-stage { font-weight: 800; font-size: max(15px, calc(22px * var(--s))); }
#hud-snacks { display: flex; gap: 4px; align-items: center; font-size: max(14px, calc(18px * var(--s))); font-weight: 700; }
#hud-snacks canvas { width: max(20px, calc(30px * var(--s))); height: max(20px, calc(30px * var(--s))); }
#hud-snacks canvas.miss { opacity: .25; filter: grayscale(1); }
.hud-btn {
  height: max(46px, calc(64px * var(--s))); min-width: max(48px, calc(64px * var(--s)));
  border-radius: 16px; border: 3px solid var(--ink); background: rgba(255,250,240,.92);
  font-size: max(18px, calc(24px * var(--s))); font-weight: 700;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  padding: 2px 8px;
}
.hud-btn span { font-size: max(11px, calc(14px * var(--s))); margin-top: 2px; }
.hud-btn.nudge { animation: nudge 1s ease-in-out infinite; background: #ffe7a1; }
@keyframes nudge { 50% { transform: scale(1.12); } }
.reduced .hud-btn.nudge { animation: none; }

#banner {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
  background: var(--paper); border: 4px solid var(--ink); border-radius: 22px;
  padding: 10px 28px; text-align: center; pointer-events: none;
  box-shadow: 0 6px 0 rgba(91,59,37,.35);
  animation: pop .35s ease-out;
}
.reduced #banner { animation: none; }
@keyframes pop { from { transform: translateX(-50%) scale(.8); opacity: 0; } }
.b-title { font-size: max(22px, calc(42px * var(--s))); font-weight: 800; }
.b-sub { font-size: max(16px, calc(22px * var(--s))); }

#hintbar {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(62px, calc(118px * var(--s)));
  max-width: 76%;
  display: flex; align-items: center; gap: 10px;
  background: #fffaf0; border: 3px solid var(--ink); border-radius: 18px;
  padding: 6px 8px 6px 16px;
  font-size: max(16px, calc(22px * var(--s))); font-weight: 700;
  box-shadow: 0 4px 0 rgba(91,59,37,.35);
}
#hintbar button { border: 2px solid var(--ink); background: #ffe7a1; border-radius: 12px; min-height: 40px; padding: 4px 10px; font-weight: 700; font-size: max(14px, calc(18px * var(--s))); white-space: nowrap; }
#hint-close { background: #fff !important; min-width: 40px; }

#toast {
  position: absolute; left: 50%; top: max(60px, calc(100px * var(--s))); transform: translateX(-50%);
  background: rgba(91,59,37,.92); color: #fff; border-radius: 14px;
  padding: 8px 18px; font-weight: 700; pointer-events: none;
  font-size: max(16px, calc(22px * var(--s))); max-width: 80%; text-align: center;
}
#holdreset {
  position: absolute; right: 16px; top: max(60px, calc(100px * var(--s)));
  display: flex; align-items: center; gap: 8px; pointer-events: none;
  background: var(--paper2); border: 3px solid var(--ink); border-radius: 30px; padding: 6px 14px 6px 6px; font-weight: 700;
}
#holdreset .ring { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(var(--ham) calc(var(--p, 0) * 1turn), #eee 0); border: 2px solid var(--ink); }

/* ── 결과 ─────────────────────────── */
#scr-result { justify-content: flex-start; padding-left: 4%; }
.panel.result { min-width: min(46%, 440px); max-width: 58%; }
.panel.result p { margin: 6px 0; }
.r-feedback a { color: var(--ink-soft); }
/* 결과 버튼: '다음'은 한 줄 전체, 나머지 둘은 나란히 → 세로 공간 절약 */
.panel.result .col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.panel.result .col .primary { grid-column: 1 / -1; }
.panel.result .col .btn { min-width: 0; padding-left: 12px; padding-right: 12px; }
/* 창이 넘치면 JS 가 붙이는 촘촘한 모드 (스크롤 대신) */
.panel.compact { padding-top: 10px; padding-bottom: 12px; }
.panel.compact h2 { margin-bottom: 4px; font-size: max(19px, calc(32px * var(--s))); }
.panel.compact .col { gap: 8px; margin-top: 4px; }
.panel.compact .btn { padding-top: 6px; padding-bottom: 6px; }
.panel.compact .note { margin-top: 4px; }
.panel.compact .house-slot .house-ad { margin-top: 6px; }
.panel.compact #r-snacks { margin: 4px 0; }
.panel.compact #r-snacks canvas { width: max(36px, calc(48px * var(--s))); height: max(36px, calc(48px * var(--s))); }
#r-snacks { display: flex; justify-content: center; gap: 10px; margin: 8px 0; }
#r-snacks canvas { width: max(44px, calc(64px * var(--s))); height: max(44px, calc(64px * var(--s))); }
#r-snacks canvas.miss { opacity: .25; filter: grayscale(1); }

/* ── 설정 ─────────────────────────── */
.opt { display: flex; align-items: center; gap: 10px; margin: 10px 0; text-align: left; min-height: 40px; }
.opt input[type=checkbox] { width: 28px; height: 28px; accent-color: var(--ham); }
.opt.slider { justify-content: space-between; padding-left: 38px; }
.opt.slider input { width: 50%; accent-color: var(--ham); }
.opt small { color: var(--ink-soft); }

/* ── 조작표 ─────────────────────────── */
.keys { border-collapse: collapse; margin: 0 auto; font-size: max(14px, calc(19px * var(--s))); text-align: left; }
.keys th, .keys td { border-bottom: 2px dashed rgba(91,59,37,.3); padding: 5px 10px; }
kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; margin: 1px 2px; border: 2px solid var(--ink); border-radius: 7px; background: #fff; font: inherit; font-weight: 700; text-align: center; box-shadow: 0 2px 0 var(--ink); }

/* ── 터치 조작 ─────────────────────────── */
#touch { position: absolute; pointer-events: none; touch-action: none; }
#touch .t-left, #touch .t-right { position: absolute; bottom: 0; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
#touch .t-left { left: 0; align-items: flex-start; }
#touch .t-right { right: 0; align-items: flex-end; }
#touch .t-row, #touch .t-climb { display: flex; gap: 10px; }
.tb {
  pointer-events: auto; touch-action: none;
  width: var(--tb, 64px); height: var(--tb, 64px);
  border-radius: 50%; border: 3px solid rgba(91,59,37,.8);
  background: rgba(255,250,240,.72);
  font-size: calc(var(--tb, 64px) * .38); font-weight: 800;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  padding: 0;
}
.tb small { font-size: 12px; margin-top: 2px; }
.tb.big { width: calc(var(--tb, 64px) * 1.2); height: calc(var(--tb, 64px) * 1.2); background: rgba(255,214,107,.85); }
.tb.hand { background: rgba(160,220,120,.92); animation: nudge 1s infinite; }
.reduced .tb.hand { animation: none; }
.tb.on { background: #ffd66b; transform: scale(.94); }

/* 세로 안내 — 사이트 미니게임과 같은 모양(SVG 아이콘 + 한 줄). 그림 문자는 폰마다 글꼴이 달라 쓰지 않는다. */
#rotate {
  position: fixed; inset: 0; z-index: 2147483647;
  display: flex; align-items: center; justify-content: center;
  padding-top: 84px;
  background: #11131a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='21' width='34' height='20' rx='4' stroke='%23e8eaf0'/%3E%3Cpath d='M37 28.5v5' stroke='%23e8eaf0'/%3E%3Cpath d='M12 15Q24 4 36 14M34.4 8.2 36 14l-6-.5' stroke='%23ffd76a'/%3E%3C/svg%3E") no-repeat center calc(50% - 34px) / 80px 80px;
  color: #e8eaf0; font-size: 17px; font-weight: 400; line-height: 1.5; letter-spacing: -0.2px; text-align: center;
}
#rotate p { margin: 0; }
/* 안내 중에는 광고 바를 숨긴다 — 가려진 광고를 요청하지 않는다(요청은 index.html 스크립트가 보일 때만 한다) */
#rotate:not(.hidden) ~ #adbar { display: none; }

/* ── 광고 ─────────────────────────── */
#adbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  max-height: 110px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #e9dcc3;
}
#adbar ins { width: 100%; max-width: 970px; }
@media (max-height: 520px) { #adbar { display: none; } }
.house-slot:empty { display: none; }
.house-slot .house-ad { margin: 12px auto 0; max-width: 320px; }
.house-slot .house-ad__label { color: var(--ink-soft); }