* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #dfe6e4; color: #2f3b2a;
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Gothic A1", sans-serif;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
/* 위: 유리 느낌 카드 */
#hud { position: fixed; left: 0; right: 0; top: max(10px, env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 12px; pointer-events: none; }
.pill, .stagecard { background: rgba(255,253,246,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 2px 12px rgba(60,70,50,.12); }
.pill { border-radius: 999px; padding: 5px 14px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.pill b { color: #4c7a2e; font-size: 16px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #6fbf4a; box-shadow: 0 0 6px #6fbf4a; animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.stagecard { border-radius: 16px; padding: 8px 14px; text-align: center; min-width: 250px; }
.row1 { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; }
.bar { width: 90px; height: 7px; border-radius: 4px; background: rgba(60,80,40,.15); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8cc152, #4c7a2e); transition: width .6s; }
.sub { color: #55604c; font-size: 12.5px; margin-top: 2px; }
/* 아래: 버튼 */
#actions { position: fixed; left: 0; right: 0; bottom: max(26px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 12px; }
.big { font: inherit; font-weight: 700; font-size: 19px; color: #fff; background: linear-gradient(180deg, #5f9b3a, #467a2a); border: 0; border-radius: 999px; box-shadow: 0 4px 14px rgba(40,70,20,.35); padding: 12px 28px; cursor: pointer; }
.big:active { transform: translateY(2px); }
.big:disabled { background: rgba(110,120,100,.75); cursor: default; }
.big.ghost { background: rgba(255,253,246,.88); color: #3b4a30; }
.big.small { font-size: 16px; padding: 9px 20px; }
.minirow { width: 100%; display: flex; justify-content: center; gap: 8px; }
.mini { font: inherit; font-size: 13.5px; color: #3b4a30; background: rgba(255,253,246,.7); border: 1px solid rgba(255,255,255,.8); border-radius: 999px; padding: 6px 14px; cursor: pointer; backdrop-filter: blur(6px); }
.note { width: 100%; text-align: center; margin: 0; font-size: 13px; color: #fff; min-height: 1.2em; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
/* 오늘 몇 번째 정원사 */
#badge { position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(.8); opacity: 0; pointer-events: none; z-index: 4;
  background: rgba(255,253,246,.92); border-radius: 22px; padding: 12px 22px; text-align: center; box-shadow: 0 6px 24px rgba(80,90,40,.25); display: flex; flex-direction: column; align-items: center; }
#badge b { font-size: 40px; color: #4c7a2e; line-height: 1.1; }
#badge small { font-size: 14px; color: #55604c; }
#badge.show { animation: badge 3.2s ease forwards; }
@keyframes badge { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.8); } 12%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
/* 창 */
.overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 10; background: rgba(40,50,35,.35); backdrop-filter: blur(3px); padding: 12px; }
.overlay.show { display: flex; }
.panel { background: #fffdf6; color: #2f3b2a; border-radius: 20px; box-shadow: 0 10px 40px rgba(30,40,20,.3); text-align: center;
  width: min(92vw, 420px); max-height: 88vh; padding: 18px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
h2 { margin: 0; font-size: 22px; color: #3f6b25; }
.rule, .how { margin: 0; font-size: 15px; line-height: 1.5; }
.how { color: #666; font-size: 13px; }
.how b { color: #3f6b25; }
label.how { display: flex; flex-direction: column; gap: 6px; width: 100%; }
input { font: inherit; font-size: 17px; padding: 8px 10px; border: 1px solid #b9c2ab; border-radius: 12px; text-align: center; }
.phrases { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.phrases button { font: inherit; font-size: 14px; padding: 9px 4px; border: 1px solid #c9d1bb; border-radius: 12px; background: #fff; cursor: pointer; color: #2f3b2a; }
.phrases button[aria-pressed="true"] { background: #dcefc8; border-color: #6c9a45; }
.row { display: flex; gap: 8px; }
.err { margin: 0; color: #b3401f; font-size: 13px; min-height: 1em; }
.loglist { width: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; text-align: left; font-size: 13px; }
.logrow { display: flex; gap: 10px; align-items: center; }
.logrow canvas { position: static; width: 60px; height: 60px; border-radius: 12px; flex: none; }
.logrow span { color: #666; }
.tip { position: fixed; z-index: 5; display: none; background: rgba(255,253,246,.96); color: #2f3b2a; border-radius: 12px; padding: 6px 12px; font-size: 14px; pointer-events: none; transform: translate(-50%, -130%); white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
#foot { position: fixed; bottom: 4px; left: 0; right: 0; text-align: center; margin: 0; font-size: 10.5px; color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
#foot a { color: #fff; }
body.card #hud, body.card #actions, body.card #foot, body.card #badge { display: none; }
/* ---------- v4 ---------- */
#hudToggle { font: inherit; border: 0; background: none; color: #55604c; padding: 0 0 0 4px; cursor: pointer; pointer-events: auto; font-size: 13px; }
#hud .pill { pointer-events: auto; }
body.hudmin .stagecard { display: none; }
body.hudmin #hudToggle { transform: rotate(-90deg); }
#chatBar { width: min(100%, 420px); display: flex; gap: 6px; background: rgba(255,253,246,.78); border: 1px solid rgba(255,255,255,.85); border-radius: 999px; padding: 4px 4px 4px 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(60,70,50,.15); }
#chatIn { flex: 1; min-width: 0; border: 0; background: none; text-align: left; font-size: 15px; padding: 6px 0; outline: none; color: #2f3b2a; }
#chatSend { font: inherit; font-weight: 700; font-size: 14px; border: 0; border-radius: 999px; padding: 7px 14px; color: #fff; background: #5f8f3a; cursor: pointer; min-width: 64px; }
#chatSend.wait { background: rgba(110,120,100,.7); }
#actions { gap: 6px; bottom: max(20px, env(safe-area-inset-bottom)); }
.btnrow { width: 100%; display: flex; justify-content: center; align-items: center; gap: 6px; }
.big { padding: 8px 18px; font-size: 16px; }
.btnrow .mini { padding: 7px 11px; font-size: 13px; }
#chatBar { padding-left: 4px; }
.inbar { font: inherit; font-size: 12.5px; color: #3b4a30; background: rgba(95,143,58,.12); border: 0; border-radius: 999px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.note { order: -1; }
.chatrow { display: grid; grid-template-columns: 10px auto 1fr auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 6px 2px; border-bottom: 1px solid #eee7d6; }
.chatrow i { width: 8px; height: 8px; border-radius: 50%; grid-row: 1; }
.chatrow b { font-size: 12.5px; color: #4c6b32; white-space: nowrap; }
.chatrow span { font-size: 14px; color: #2f3b2a; word-break: break-all; }
.chatrow small { grid-column: 2 / 4; color: #999; font-size: 11px; }
.chatrow .rep { grid-row: 1 / 3; grid-column: 4; font: inherit; font-size: 12px; color: #a0522d; background: none; border: 1px solid #e3c9b5; border-radius: 999px; padding: 3px 9px; cursor: pointer; }
/* 넓은 화면(가로·데스크톱): 위 정보 카드를 왼쪽 위로 작게 → 나무 꼭대기를 가리지 않음 */
@media (min-aspect-ratio: 3/4) {
  #hud { left: 16px; right: auto; top: 16px; align-items: flex-start; padding: 0; }
  .stagecard { text-align: left; min-width: 0; width: 240px; padding: 8px 12px; }
  .row1 { justify-content: flex-start; font-size: 15px; }
  #actions { left: auto; right: 16px; bottom: 28px; width: 380px; }
  #chatBar { width: 100%; }
}
@media (min-aspect-ratio: 3/4) and (max-height: 500px) { /* 폰 가로: 더 작게, 기본은 접힘 단추로 */
  .stagecard .sub { display: none; }
  .big { font-size: 15px; padding: 7px 16px; }
  #actions { bottom: 18px; gap: 5px; }
}
body.embed #hud { top: 64px; } /* 모형 페이지의 사이트 이름·메뉴 단추와 겹치지 않게 */
@media (max-aspect-ratio: 3/4) { body.embed #hud { top: 60px; } }
#waterN.harm { color: #8a5a2a; font-weight: 600; }
/* v5c: 작은 정사각 화면(X 플레이어 카드 약 480×480 iframe 등). 정보 카드는 위 한 줄, 버튼·말 칸은 아래 얇게 →
   나무는 그 사이 빈 칸에 맞춰 그림(app.js layout의 SMALL). 폰 세로·가로, 데스크톱은 이 규칙에 안 걸림 */
@media (max-height: 600px) and (min-aspect-ratio: 3/4) and (max-aspect-ratio: 4/3) {
  #hud { left: 8px; right: 8px; top: 8px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
  .pill { padding: 3px 10px; font-size: 12px; gap: 6px; }
  .pill b { font-size: 13px; }
  .stagecard { width: auto; padding: 4px 10px; border-radius: 999px; }
  .stagecard .sub { display: none; }
  .row1 { font-size: 12.5px; gap: 8px; white-space: nowrap; }
  .bar { width: 56px; height: 5px; }
  #actions { left: 8px; right: 8px; width: auto; bottom: 16px; gap: 4px; }
  .note { font-size: 11.5px; min-height: 1.25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .btnrow { gap: 5px; }
  .big { font-size: 13px; padding: 5px 13px; box-shadow: 0 2px 8px rgba(40,70,20,.3); }
  .btnrow .mini { font-size: 12px; padding: 4px 9px; }
  #chatBar { width: min(100%, 420px); padding: 2px; gap: 4px; }
  #chatIn { font-size: 13px; padding: 2px 0; }
  #chatSend { font-size: 12px; padding: 4px 10px; min-width: 52px; }
  .inbar { font-size: 11.5px; padding: 3px 8px; }
  #foot { bottom: 2px; font-size: 9.5px; }
}