/* Eden game icons: decorative CSS keeps dynamic button labels and handlers intact. */
#tab-care::before { content: ""; display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; background: url("../assets/icons/eden/care.svg") center / contain no-repeat; pointer-events: none; }
#tab-play::before { content: ""; display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; background: url("../assets/icons/eden/play.svg") center / contain no-repeat; pointer-events: none; }
#act-walk::before { content: ""; display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; background: url("../assets/icons/eden/walk.svg") center / contain no-repeat; pointer-events: none; }
#act-rest::before { content: ""; display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; background: url("../assets/icons/eden/rest.svg") center / contain no-repeat; pointer-events: none; }
#act-park::before { content: ""; display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; background: url("../assets/icons/eden/park.svg") center / contain no-repeat; pointer-events: none; }
#rd-call::before { content: ""; display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; background: url("../assets/icons/eden/call.svg") center / contain no-repeat; pointer-events: none; }
#rd-pet::before { content: ""; display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; background: url("../assets/icons/eden/pet.svg") center / contain no-repeat; pointer-events: none; }
#rd-ball::before { content: ""; display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; background: url("../assets/icons/eden/ball.svg") center / contain no-repeat; pointer-events: none; }
#tab-emote::before { content: ""; display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; background: url("../assets/icons/eden/gesture.svg") center / contain no-repeat; pointer-events: none; }
#hud-fb::before, #sky-feedback::before { content: ""; display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; background: url("../assets/icons/eden/help.svg") center / contain no-repeat; pointer-events: none; }
#hud-sky::before { content: ""; display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; background: url("../assets/icons/eden/islands.svg") center / contain no-repeat; pointer-events: none; }
#tab-menu::before { content: ""; display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; background: url("../assets/icons/eden/menu.svg") center / contain no-repeat; pointer-events: none; }
#rd-flower::before { content: ""; display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; background: url("../assets/icons/eden/flower.svg") center / contain no-repeat; pointer-events: none; }
#rd-candle::before { content: ""; display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; background: url("../assets/icons/eden/candle.svg") center / contain no-repeat; pointer-events: none; }
#tab-talk::before { content: ""; display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; background: url("../assets/icons/eden/chat.svg") center / contain no-repeat; pointer-events: none; }

#actions .act { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:12px; padding:3px 2px; }
#actions .act[hidden] { display:none; }
#actions .act.on::before { background-color:#fff5df; border-radius:7px; }
#rounds .round > svg, #hud-fb > svg, #sky-feedback > svg { display:none; }
#rounds .round::before { width:26px; height:26px; background-color:#fff4dc; border-radius:9px; background-size:23px; }
#hud-fb, #sky-feedback, #hud-sky, #tab-menu, #tab-talk { gap:4px; }
#hud-fb::before, #sky-feedback::before, #hud-sky::before, #tab-menu::before, #tab-talk::before { width:18px; height:18px; background-color:#fff4dc; border-radius:5px; background-size:16px; }
@media(max-width:420px) { .hud-right #hud-fb, .hud-right #hud-sky, .hud-right #tab-menu { padding-left:8px; padding-right:8px; font-size:12px; } }

/* Game HUD: compact cream controls with existing Eden artwork. */
#hud { --eden-cream: #fff8e9; --eden-ink: #3b5140; --eden-edge: #d8dfca; --eden-active: #e3edcf; }
#actions { left:10px; right:10px; bottom:calc(8px + env(safe-area-inset-bottom)); padding:5px; gap:4px; border:1px solid rgba(255,255,245,.85); border-radius:20px; background:rgba(255,250,234,.92); box-shadow:0 5px 22px rgba(44,62,34,.2); }
#actions .act { min-height:58px; background:transparent; color:var(--eden-ink); box-shadow:none; border:1px solid transparent; border-radius:14px; gap:4px; font-size:12px; font-weight:700; }
#actions .act::before { width:27px; height:27px; }
#actions .act.on, #actions .act[aria-expanded="true"] { background:var(--eden-active); border-color:#91aa77; color:#30472d; box-shadow:inset 0 -2px 0 rgba(102,136,78,.12); }
#actions .act.on::before { background-color:transparent; }
#act-park[data-eden-icon="home"]::before { background-image:url('../assets/icons/eden/home.svg'); }
#act-park[data-eden-icon="islands"]::before { background-image:url('../assets/icons/eden/islands.svg'); }
#rounds { bottom:calc(88px + env(safe-area-inset-bottom)); gap:7px; }
#rounds .round { background:rgba(255,248,233,.96); border:1px solid #d5ddc7; color:var(--eden-ink); box-shadow:0 3px 10px rgba(40,60,30,.18); }
#rounds .round::before { width:27px; height:27px; background-color:transparent; background-size:contain; border-radius:0; }
#rounds .round.on { background:var(--eden-active); border-color:#7e9c68; }
#joy { bottom:calc(88px + env(safe-area-inset-bottom)); }
#pills { bottom:calc(218px + env(safe-area-inset-bottom)) !important; }
#hud .sheet { bottom:calc(88px + env(safe-area-inset-bottom)); max-height:calc(100% - 174px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y:auto; background:rgba(255,250,239,.98); border:1px solid #dce2d0; border-radius:18px; padding:14px; box-shadow:0 6px 28px rgba(42,57,35,.22); }
#hud .sheet > p { color:var(--eden-ink); font-size:14px; padding:0 2px 4px; }
#hud .sheet-grid { gap:7px; }
#hud .sheet-grid .act { min-height:52px; padding:8px 5px; background:#f0f0e1; border:1px solid #e1e3d3; border-radius:12px; color:var(--eden-ink); font-size:12px; display:flex; align-items:center; justify-content:center; gap:5px; flex-wrap:wrap; }
#hud .sheet-grid .act[hidden] { display:none; }
#hud .sheet-grid .act.strong { background:#e5ebd3; border-color:#b2c699; }
#hud .hud-right .pill { min-height:40px; padding:0 10px; background:rgba(255,248,233,.95); color:var(--eden-ink); border:1px solid #d8dfcb; box-shadow:0 2px 7px rgba(40,60,30,.1); }
#hud .hud-right .pill[aria-expanded="true"] { background:var(--eden-active); border-color:#91aa77; }
#hud-name { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; line-height:40px; min-height:40px; padding:0 11px; }
#hud .hud-right { flex-shrink:0; }
#hud-fb::before, #hud-sky::before, #tab-menu::before { background-color:transparent; background-size:contain; }
#mission { top:calc(57px + env(safe-area-inset-top)); font-size:12px; background:rgba(49,70,46,.82); color:#fff2c9; }
#hud button:focus-visible { outline:3px solid #a97135; outline-offset:3px; }
#hud button:active { filter:brightness(.94); }
@media(min-width:760px) { #actions { max-width:610px; margin:0 auto; } #hud .sheet { max-width:600px; margin:0 auto; } }
@media(max-width:360px) { #actions { left:6px; right:6px; padding:4px; gap:2px; } #actions .act { font-size:11px; } #hud .hud-right .pill { font-size:11px; padding:0 7px; gap:3px; } #hud-name { font-size:11px; padding:0 8px; } #hud .sheet-grid { gap:5px; } }
#hud #act-feed::before { content:""; width:23px; height:23px; display:inline-block; flex:none; pointer-events:none; background:url("../assets/icons/eden/care.svg") center/contain no-repeat; }
#hud #act-pet::before { content:""; width:23px; height:23px; display:inline-block; flex:none; pointer-events:none; background:url("../assets/icons/eden/pet.svg") center/contain no-repeat; }
#hud [data-bond="fetch"]::before { content:""; width:23px; height:23px; display:inline-block; flex:none; pointer-events:none; background:url("../assets/icons/eden/ball.svg") center/contain no-repeat; }
#hud [data-bond="call"]::before { content:""; width:23px; height:23px; display:inline-block; flex:none; pointer-events:none; background:url("../assets/icons/eden/call.svg") center/contain no-repeat; }
#hud [data-bond="paw"]::before { content:""; width:23px; height:23px; display:inline-block; flex:none; pointer-events:none; background:url("../assets/icons/eden/gesture.svg") center/contain no-repeat; }
#hud #em-wave::before { content:""; width:23px; height:23px; display:inline-block; flex:none; pointer-events:none; background:url("../assets/icons/eden/gesture.svg") center/contain no-repeat; }
#hud #em-rest::before { content:""; width:23px; height:23px; display:inline-block; flex:none; pointer-events:none; background:url("../assets/icons/eden/rest.svg") center/contain no-repeat; }
#hud #act-wave::before { content:""; width:23px; height:23px; display:inline-block; flex:none; pointer-events:none; background:url("../assets/icons/eden/gesture.svg") center/contain no-repeat; }
#hud #act-sky::before { content:""; width:23px; height:23px; display:inline-block; flex:none; pointer-events:none; background:url("../assets/icons/eden/islands.svg") center/contain no-repeat; }

/* Keep controls behind an open panel from overlapping its choices. */
#hud[data-eden-panel]:not([data-eden-panel=""]) #rounds,
#hud[data-eden-panel]:not([data-eden-panel=""]) #joy,
#hud[data-eden-panel]:not([data-eden-panel=""]) #pills { visibility:hidden; pointer-events:none; }

/* 행동 세부 메뉴: 바깥 패널만 투명하게, 개별 버튼은 유지한다. */
#hud #sheet-emote { background:transparent; border-color:transparent; box-shadow:none; backdrop-filter:none; }

/* 모든 세부 행동: 문구가 바뀌어도 유지되는 장식 아이콘. */
#hud #act-water::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/water.svg") center/contain no-repeat; }
#hud [data-bond="treat"]::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/treat.svg") center/contain no-repeat; }
#hud [data-bond="hug"]::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/hug.svg") center/contain no-repeat; }
#hud [data-bond="belly"]::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/belly.svg") center/contain no-repeat; }
#hud #act-bath::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/bath.svg") center/contain no-repeat; }
#hud #act-bath[data-eden-icon="brush"]::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/brush.svg") center/contain no-repeat; }
#hud #act-calm::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/calm.svg") center/contain no-repeat; }
#hud #em-heart::before, #hud #act-brag::before, #hud #act-visitok::before, #hud #act-playpal::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/heart.svg") center/contain no-repeat; }
#hud #act-handball::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/ball.svg") center/contain no-repeat; }
#hud #act-handdisc::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/disc.svg") center/contain no-repeat; }
#hud [data-bond="sit"]::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/sit.svg") center/contain no-repeat; }
#hud [data-bond="down"]::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/down.svg") center/contain no-repeat; }
#hud [data-bond="eye"]::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/eye.svg") center/contain no-repeat; }
#hud #act-bark::before, #hud #hud-sound::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/call.svg") center/contain no-repeat; }
#hud #act-dig::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/dig.svg") center/contain no-repeat; }
#hud #act-picnic::before, #hud #act-basket::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/picnic.svg") center/contain no-repeat; }
#hud #act-season::before, #hud #act-garden::before, #hud #act-farm::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/season.svg") center/contain no-repeat; }
#hud #act-herd::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/sheep.svg") center/contain no-repeat; }
#hud #act-playground::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/park.svg") center/contain no-repeat; }
#hud #ph-now::before, #hud #rd-photo::before, #hud #act-contest::before, #hud #hud-contest::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/camera.svg") center/contain no-repeat; }
#hud #ph-face::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/portrait.svg") center/contain no-repeat; }
#hud #ph-pose::before, #hud #act-greet::before, #hud #act-greetok::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/gesture.svg") center/contain no-repeat; }
#hud #act-whisper::before, #hud #sheet-talk [data-say]::before, #hud #act-talkok::before, #hud #hud-talk::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/chat.svg") center/contain no-repeat; }
#hud #act-mute::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/mute.svg") center/contain no-repeat; }
#hud #act-report::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/flag.svg") center/contain no-repeat; }
#hud #talk-form button::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/send.svg") center/contain no-repeat; }
#hud #hud-edit::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/edit.svg") center/contain no-repeat; }
#hud #act-manage::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/care.svg") center/contain no-repeat; }
#hud #act-memory::before, #hud #act-album::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/album.svg") center/contain no-repeat; }
#hud #act-public::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/lock.svg") center/contain no-repeat; }
#hud #act-news::before, #hud #act-pet-news::before, #hud #act-notify::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/news.svg") center/contain no-repeat; }
#hud #act-install::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/install.svg") center/contain no-repeat; }
#hud #act-fb::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/help.svg") center/contain no-repeat; }
#hud #act-pick::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/poop.svg") center/contain no-repeat; }
#hud #act-play-item::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/jump.svg") center/contain no-repeat; }
#hud #act-cropview::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/view.svg") center/contain no-repeat; }
#hud #act-walkwith::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/walk.svg") center/contain no-repeat; }
#hud #pills button { display:inline-flex; align-items:center; justify-content:center; gap:5px; }
#hud #pills button[hidden] { display:none; }
#hud #talk-form button { display:inline-flex; align-items:center; justify-content:center; gap:5px; }

/* 비대화형 숫자 표시가 다른 조작 버튼의 터치를 가리지 않는다. */
#pills span.pill { pointer-events:none; }
#pills[hidden] { display:none; }
/* 강아지 빗질 단추(고양이는 목욕 단추가 빗질) */
#hud #act-brush::before { content:""; display:inline-block; width:23px; height:23px; flex:0 0 23px; pointer-events:none; background:url("../assets/icons/eden/brush.svg") center/contain no-repeat; }
/* 내 창고 단추 */
#hud #hud-store::before { content:""; display:inline-block; width:20px; height:20px; flex:0 0 20px; margin-right:4px; vertical-align:-4px; pointer-events:none; background:url("../assets/icons/eden/storage.svg") center/contain no-repeat; }