/* Galaxy Bunny — 논리 화면 360×640 안의 요소는 전부 논리 px 로 적고, #stage 를 transform: scale(s) 한다. */
:root { --ink: #fff; --sub: #cfddf5; --gold: #ffe16d; --night: #091530; }
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--night);
  color: var(--ink); font-family: system-ui, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; overscroll-behavior: none;
}
.hidden { display: none !important; }
/* iOS Safari 는 <button> 에 기본 모양(appearance)을 입히고 그 상태에선 border-image 를 그리지 않는다
   → 버튼 그림이 사라지고 글자만 보였다(2026-09-21 아이폰 제보). 모든 버튼에서 기본 모양을 끈다. */
button { -webkit-appearance: none; appearance: none; border-radius: 0; }

#safe-probe {
  position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

#stage {
  position: fixed; left: 0; top: 0; width: 360px; height: 640px;
  transform-origin: 0 0; overflow: hidden; background: var(--night);
}
#cv { position: absolute; left: 0; top: 0; width: 360px; height: 640px; touch-action: none; display: block; }

/* ── 버튼: 이미지 9-slice. 알약 버튼은 좌우 끝이 늘어나지 않게 높이의 절반을 모서리로 쓴다(layout 이 --bh 지정) ── */
.btn {
  position: absolute; margin: 0; padding: 0 6px; cursor: pointer;
  border-style: solid; border-color: transparent; background: none;
  border-image-slice: 73 fill; border-image-width: calc(var(--bh, 44px) / 2); border-image-repeat: stretch;
  color: #fff; font: 800 18px/1 system-ui, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  letter-spacing: -0.3px; text-shadow: 0 1px 0 rgba(0, 20, 60, .55), 0 0 6px rgba(0, 20, 60, .35);
  touch-action: manipulation; white-space: nowrap;
  transition: transform 80ms, filter 80ms;
}
.btn.primary { border-image-source: url(../assets/button_primary.webp); }
.btn.secondary { border-image-source: url(../assets/button_secondary.webp); }
.btn.confirm { border-image-source: url(../assets/button_confirm.webp); }
.btn.small-text { font-size: 15px; }
.btn:active:not(:disabled) { transform: scale(.97); filter: brightness(.92); }
.btn:focus { outline: none; }
.btn:focus-visible, .icon-btn:focus-visible, .card:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.btn:disabled { border-image-source: url(../assets/button_disabled.webp); opacity: .85; cursor: default; color: #e6ebf3; }
/* 실제 터치 영역을 44 CSS px 이상으로(시각 크기는 그대로). --ex/--ey 는 논리 px, layout 이 이웃과 겹치지 않게 계산 */
.btn::before, .icon-btn::before, .card::before {
  content: ""; position: absolute;
  inset: calc(var(--ey-t, 0px) * -1) calc(var(--ex, 0px) * -1) calc(var(--ey-b, 0px) * -1);
}
.icon-btn {
  position: absolute; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation;
}
.icon-btn img { width: 100%; height: 100%; display: block; pointer-events: none; }
.icon-btn:active img { transform: scale(.94); filter: brightness(.92); }

/* ── 화면 ── */
.screen { position: absolute; inset: 0; }
.screen.dim { background: rgba(4, 10, 34, .68); }
.screen h1, .screen h2, .screen p, .screen span { margin: 0; }
.panel {
  position: absolute; border-style: solid; border-color: transparent;
  border-image: url(../assets/panel_modal.webp) 28 fill / 18px stretch;
}
.p-title, .opt-label, .r-label, .r-score, .r-line, .r-earned, .r-status, .note, .r-feedback, .closet-title {
  position: absolute; left: 0; right: 0; text-align: center; transform: translateY(-50%);
}
.p-title { font-size: 25px; font-weight: 800; }
.p-title.small { font-size: 19px; letter-spacing: -0.5px; }
.note { font-size: 12px; line-height: 1.55; color: #a5bbda; transform: none; }
.opt-label { left: 54px; right: auto; text-align: left; font-size: 16px; font-weight: 700; }
.btn.toggle { font-size: 15px; }
.btn.toggle[data-mode="system"] { font-size: 13px; }

#scr-title h1 { position: absolute; left: 24px; top: 50px; width: 312px; height: 130px; text-align: center; line-height: 1; }
#scr-title h1 .g { display: block; margin-top: 16px; font-size: 44px; color: #b7f5ff; letter-spacing: 1px; }
#scr-title h1 .b { display: block; margin-top: 5px; font-size: 53px; color: #fff; letter-spacing: 1px; }
#scr-title h1 span { font-weight: 900; text-shadow: 0 2px 0 #1b2f7a, 0 0 18px rgba(80, 170, 255, .75); }
#scr-title .sub { position: absolute; left: 0; right: 0; top: 180px; text-align: center; font-size: 14px; color: #b8c9e9; text-shadow: 0 1px 4px #000; }

/* HUD */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { position: absolute; }
#hud-carrot { left: 12px; top: 12px; width: 96px; height: 44px; display: flex; align-items: center; gap: 6px; }
#hud-carrot img { width: 24px; height: 27px; }
#hud-carrot span { font-size: 19px; font-weight: 800; color: #ffd977; text-shadow: 0 1px 2px #000; }
#hud-score {
  left: 120px; width: 120px; top: 29px; transform: translateY(-50%); text-align: center;
  font-size: 30px; font-weight: 900; color: #fff; -webkit-text-stroke: 1px rgba(10, 20, 60, .7);
  text-shadow: 0 2px 0 rgba(10, 20, 60, .8), 0 0 8px rgba(10, 20, 60, .6); font-variant-numeric: tabular-nums;
}
#hud-streak { left: 130px; width: 100px; top: 47px; height: 14px; display: flex; justify-content: center; align-items: center; gap: 3px; }
#hud-streak i {
  width: 12px; height: 12px; background: url(../assets/perfect_star.webp) center / contain no-repeat;
  filter: grayscale(1) brightness(.5); opacity: .55;
}
#hud-streak i.on { filter: none; opacity: 1; }
#hud-streak span { font-size: 11px; font-weight: 800; color: #ffe56c; margin-left: 3px; min-width: 30px; text-shadow: 0 1px 2px #000; }
#btn-pause { left: 304px; top: 10px; width: 44px; height: 44px; pointer-events: auto; }

#ready-tip { position: absolute; inset: 0; pointer-events: none; text-align: center; }
#ready-tip .big { position: absolute; left: 0; right: 0; top: 214px; font-size: 22px; font-weight: 800; text-shadow: 0 2px 6px #000; margin: 0; }
#ready-tip .pc { position: absolute; left: 0; right: 0; top: 248px; font-size: 14px; color: #cfddf5; text-shadow: 0 1px 4px #000; margin: 0; }
#ready-tip .hand { position: absolute; left: 80px; top: 384px; width: 42px; height: auto; }
#ready-tip.motion .hand { animation: tap 1.1s ease-in-out infinite; }
@keyframes tap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

#countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(4, 10, 34, .35); pointer-events: none; }
#countdown span { font-size: 34px; font-weight: 900; text-shadow: 0 2px 8px #000; }

#toast {
  position: absolute; left: 30px; right: 30px; top: 74px; padding: 8px 12px; border-radius: 12px;
  background: rgba(8, 20, 60, .88); border: 1px solid #3fc8ff; text-align: center;
  font-size: 13px; line-height: 1.45; pointer-events: none; z-index: 5;
}

/* 결과 */
#scr-result img { position: absolute; }
.r-label { font-size: 14px; color: var(--sub); }
.r-score { font-size: 52px; font-weight: 900; font-variant-numeric: tabular-nums; }
.r-line { font-size: 13px; color: var(--sub); font-weight: 700; }
.r-earned { font-size: 18px; font-weight: 800; color: #ffd56a; display: flex; justify-content: center; align-items: center; gap: 6px; }
.r-earned img { position: static !important; width: 22px; height: 25px; }
.r-status { font-size: 12px; color: #a5bbda; top: 390px; line-height: 1.2; }
#r-head.best { color: var(--gold); font-size: 21px; }
.r-feedback { font-size: 12px; color: #9fd6ff; transform: translateY(-50%); left: 120px; right: 120px; }

/* 토끼 선택 */
.closet-title { top: 60px; font-size: 25px; font-weight: 800; text-shadow: 0 2px 6px #000; }
.closet-wallet { position: absolute; left: 0; right: 0; top: 82px; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 20px; font-weight: 800; color: #ffe09b; }
.closet-wallet img { width: 23px; height: 26px; }
.card {
  position: absolute; padding: 0; margin: 0; cursor: pointer; color: #fff; font-family: inherit;
  border-style: solid; border-color: transparent; background: none;
  border-image: url(../assets/card_normal.webp) 28 fill / 18px stretch; touch-action: manipulation;
}
.card.sel { border-image-source: url(../assets/card_selected.webp); }
.card.locked { border-image-source: url(../assets/card_locked.webp); }
.card:disabled, .card[aria-disabled="true"] { cursor: default; }
.card:active:not(:disabled) { transform: scale(.97); filter: brightness(.92); }
.card canvas { position: absolute; left: 20px; top: 2px; width: 104px; height: 104px; pointer-events: none; }
.card .name { position: absolute; left: 0; right: 0; top: 100px; font-size: 14px; font-weight: 800; text-align: center; }
.card .act {
  position: absolute; left: 4px; right: 4px; top: 118px; height: 22px; display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 13px; font-weight: 800; color: #ffe477;
}
.card .act img { width: 16px; height: 18px; object-fit: contain; }
.card .need { position: absolute; left: 0; right: 0; top: 141px; text-align: center; font-size: 11px; color: #c8d3e6; font-weight: 700; letter-spacing: -0.4px; white-space: nowrap; }
.card .act.equip { color: #b7f5ff; }
#c-msg { top: 111px; left: 20px; right: 20px; text-align: center; font-size: 12px; color: #cfe; line-height: 1.3; }
.c-page { position: absolute; left: 132px; width: 96px; top: 528px; transform: translateY(-50%); text-align: center; font-size: 12px; font-weight: 800; color: #cfddf5;
  white-space: nowrap; text-shadow: 0 1px 3px #000; pointer-events: none; }
.c-page b { display: block; font-size: 11px; font-weight: 700; color: #b7f5ff; }
.icon-btn.arrow:disabled { opacity: .3; cursor: default; }
.icon-btn.arrow:disabled img { transform: none; filter: grayscale(1); }

/* 불러오기 */
.load-text { position: absolute; left: 0; right: 0; top: 290px; text-align: center; font-size: 16px; }
.load-bar { position: absolute; left: 80px; width: 200px; top: 322px; height: 8px; border-radius: 4px; background: #1c2f5f; overflow: hidden; }
.load-bar i { display: block; height: 100%; width: 0; background: #3fc8ff; transition: width .2s; }

/* 작은 창 안내 · 폰 가로 안내 */
#small {
  position: fixed; inset: 0; z-index: 2147483646; display: flex; align-items: center; justify-content: center;
  background: #11131a; color: #e8eaf0; font-size: 16px; line-height: 1.5; text-align: center;
}
#small p { margin: 0; }
#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='19' y='7' width='20' height='34' rx='4' stroke='%23e8eaf0'/%3E%3Cpath d='M26.5 37h5' stroke='%23e8eaf0'/%3E%3Cpath d='M13 33Q5 23 14 13M8.2 14.4 14 13l-.7 6' 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; }

/* 하단 광고 바(게임 밖). 크기는 layout() 이 정한다 */
#adbar {
  position: fixed; z-index: 40; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #050b1f;
}
#rotate:not(.hidden) ~ #adbar { display: none !important; }

/* 하우스 광고 자리 */
#house { position: fixed; z-index: 30; width: 320px; }
#house .house-ad { margin: 0; }
#house .house-ad__label { color: #b8c9e9; }

/* 설정 · 계정 줄, 결과 · 로그인 권유 */
.acct-name { position: absolute; right: 55px; top: 430px; transform: translateY(-50%); max-width: 150px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 15px; font-weight: 800; color: #b7f5ff; text-align: right; }
#o-note { font-size: 11.5px; }
.r-status a.r-login, a.r-login { color: #9fd6ff; text-decoration: underline; pointer-events: auto; }