:root {
    --bg: #060a08; --ink: #ece6d8; --dim: #a7ad9f; --warm: #f2b35c; --ember: #ff8a3c;
    --glass: rgba(8, 12, 10, .6); --line: rgba(255, 255, 255, .1);
    --sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
    --serif: "AppleMyungjo", "Nanum Myeongjo", "Noto Serif KR", "Iowan Old Style", Georgia, serif;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); overflow: hidden; -webkit-tap-highlight-color: transparent; }
  button { font: inherit; color: inherit; cursor: pointer; }
  #c { position: fixed; inset: 0; display: block; touch-action: none; }

  /* ---------- 입장 게이트 */
  #gate { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 60%, rgba(60, 40, 20, .45), rgba(6, 10, 8, .9) 70%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity 1.2s ease; z-index: 10; overflow: auto; }
  #gate.out { opacity: 0; pointer-events: none; }
  .gate-card { text-align: center; padding: 28px 22px; max-width: 420px; width: 100%; }
  .eyebrow { font: 500 11px/1 var(--sans); letter-spacing: .42em; color: var(--dim); text-transform: uppercase; margin-bottom: 14px; }
  h1 { margin: 0 0 12px; font: 400 44px/1.1 var(--serif); letter-spacing: .04em; color: #f6f0e4; text-shadow: 0 0 40px rgba(242, 179, 92, .35); }
  .lead { margin: 0 auto 28px; color: var(--dim); font-size: 14px; line-height: 1.7; max-width: 320px; }
  .lead b { color: var(--ink); font-weight: 600; }
  .orb { width: 118px; height: 118px; border-radius: 50%; border: 1px solid rgba(242, 179, 92, .55); background: radial-gradient(circle at 50% 40%, rgba(242, 179, 92, .18), rgba(0, 0, 0, 0) 70%); display: grid; place-items: center; margin: 0 auto 14px; transition: transform .25s ease;  }
  @media (hover: hover) { .orb:hover { transform: translateY(-2px); background-color: rgba(242,179,92,.08); } }
  .orb:active { transform: scale(.96); }
  .orb .ico { font-size: 48px; filter: drop-shadow(0 0 12px rgba(242, 179, 92, .5)); }
  @keyframes breathe { 0%, 100% { box-shadow: 0 0 0 10px rgba(242,179,92,.05), 0 0 60px rgba(242,179,92,.22), inset 0 0 30px rgba(242,179,92,.12); } 50% { box-shadow: 0 0 0 16px rgba(242,179,92,.04), 0 0 90px rgba(242,179,92,.3), inset 0 0 40px rgba(242,179,92,.2); } }
  .tap { font-size: 15px; font-weight: 600; margin-bottom: 24px; }
  .who { display: grid; gap: 10px; max-width: 320px; margin: 0 auto 18px; }
  .who input { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--ink); font: 500 14px var(--sans); text-align: center; outline: none; }
  .who input:focus { border-color: rgba(242,179,92,.5); }
  .who input::placeholder { color: rgba(167,173,159,.7); }
  .kinds { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
  .kinds button { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--dim); font-size: 12.5px; }
  .kinds button.on { border-color: rgba(242,179,92,.6); color: var(--ink); background: rgba(242,179,92,.12); }
  .online { font-size: 13px; color: var(--dim); }
  .online b { color: var(--warm); font-weight: 600; }
  .tip { margin-top: 22px; font-size: 11.5px; color: rgba(167,173,159,.75); line-height: 1.6; }

  /* ---------- HUD */
  #hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0; transition: opacity 1s ease .4s; }
  #hud.on { opacity: 1; }
  #hud > * { pointer-events: auto; }
  .chip { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; white-space: nowrap; }
  .chip b { color: var(--warm); font-weight: 600; }
  #count { top: calc(14px + env(safe-area-inset-top)); left: 14px; }
  #conn { top: calc(60px + env(safe-area-inset-top)); left: 14px; font-size: 12px; color: var(--dim); display: none; }
  #conn.show { display: inline-flex; }
  .icon { position: absolute; height: 40px; min-width: 40px; padding: 0 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .15s ease, border-color .2s ease; }
  .icon:active { transform: scale(.95); }
  #songToggle.on, #rainToggle.on { border-color: rgba(242,179,92,.6); background: rgba(242,179,92,.14); color: #ffe7bd; }
  #rainToggle.on { border-color: rgba(150,185,225,.65); background: rgba(120,160,210,.16); color: #dcebff; }
  #status { position: absolute; left: 50%; top: calc(18px + env(safe-area-inset-top)); transform: translateX(-50%); padding: 9px 16px; border-radius: 999px; background: rgba(40, 22, 8, .55); border: 1px solid rgba(242,179,92,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13.5px; white-space: nowrap; opacity: 0; transition: opacity .6s ease; max-width: calc(100vw - 200px); overflow: hidden; text-overflow: ellipsis; }
  #status.show { opacity: 1; }
  #actions { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 4px; padding: 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  #actions button { display: grid; place-items: center; gap: 2px; width: 76px; padding: 8px 0 7px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); font-size: 11.5px; transition: background .15s ease, transform .15s ease; }
  #actions button span { font-size: 20px; line-height: 1; }
  @media (hover: hover) { #actions button:hover { background: rgba(255,255,255,.06); } }
  #actions button:active { transform: scale(.94); }
  #actions button, #seatBar button { position: relative; transition: background .15s ease, transform .15s ease, opacity .3s ease; }
  #actions button.off, #seatBar button.off { opacity: .42; }
  #actLog.cool, #seatLog.cool { opacity: .5; }
  #hint { word-break: keep-all; position: absolute; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-size: 12px; color: var(--dim); white-space: nowrap; max-width: calc(100vw - 40px); overflow: hidden; text-overflow: ellipsis; transition: opacity 1.2s ease; }
  #hint.fade { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1.2s ease, visibility 0s linear 1.2s; }
  #map { position: absolute; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(242,179,92,.35); background: rgba(8,14,10,.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; cursor: crosshair; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
  #map.on { display: block; }
  #actShout small { font-size: 10.5px; color: var(--warm); font-weight: 600; }
  #actShout.ready { background: rgba(242,179,92,.14); box-shadow: inset 0 0 0 1px rgba(242,179,92,.55); }
  #shoutBox { position: absolute; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 6px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--glass); border: 1px solid rgba(242,179,92,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  #shoutBox[hidden] { display: none; }
  #shoutBox { width: max-content; max-width: calc(100vw - 24px); } /* left:50% 기준이라 폭을 내용대로 */
  #shoutBox input { min-width: 0; width: min(260px, calc(100vw - 150px)); background: transparent; border: 0; color: var(--ink); font: 500 14px var(--sans); outline: none; }
  #shoutBox button { flex: none; white-space: nowrap; padding: 8px 14px; border-radius: 999px; border: 0; background: rgba(242,179,92,.22); color: #ffe7bd; font-size: 13px; font-weight: 600; }
  #shout { position: absolute; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%) translateY(-6px); padding: 12px 20px; border-radius: 16px; background: rgba(40,22,8,.8); border: 1px solid rgba(242,179,92,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 16px; line-height: 1.4; width: max-content; max-width: min(520px, calc(100vw - 40px)); text-align: center; opacity: 0; transition: opacity .4s ease, transform .4s ease; pointer-events: none; box-shadow: 0 10px 40px rgba(0,0,0,.45); }
  #shout.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  #shout b { color: var(--warm); font-weight: 600; }
  #roastMenu { position: absolute; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--glass); border: 1px solid rgba(242,179,92,.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  #roastMenu[hidden] { display: none; }
  #roastMenu button { padding: 8px 12px; border-radius: 999px; border: 0; background: rgba(255,255,255,.05); color: var(--ink); font-size: 13px; white-space: nowrap; }
  #roastMenu { flex-wrap: wrap; justify-content: center; width: max-content; max-width: calc(100vw - 24px); border-radius: 18px; } /* left:50% 기준이라 폭을 내용대로 */
  #roastMenu button small { color: var(--dim); font-size: 10.5px; }
  #toasts { position: absolute; left: 14px; bottom: calc(150px + env(safe-area-inset-bottom)); display: grid; gap: 6px; pointer-events: none; max-width: min(360px, 44vw); justify-items: start; transition: bottom .25s ease; } /* bottom 은 app.js placeToasts 가 정한다 */
  .toast { word-break: keep-all; padding: 7px 12px; border-radius: 12px; background: rgba(8,12,10,.74); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 12.5px; line-height: 1.45; color: var(--ink); animation: toast 5s ease forwards; }
  @keyframes toast { 0% { opacity: 0; transform: translateY(6px); } 8%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  /* ---------- 도착 연출 · 불멍 의자 */
  #vignette { position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity 1.6s ease; background: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 52%, rgba(0,0,0,.5) 100%); }
  body.intro #vignette, body.seated #vignette { opacity: 1; }
  #arrive { position: fixed; left: 0; right: 0; top: 30%; display: grid; place-items: center; pointer-events: none; z-index: 6; }
  #arrive .line { text-align: center; font: 400 26px/1.3 var(--serif); letter-spacing: .06em; color: #f6f0e4; text-shadow: 0 2px 24px rgba(0,0,0,.7); opacity: 0; transform: translateY(8px); transition: opacity 1s ease, transform 1.4s ease; }
  #arrive .line.show { opacity: 1; transform: none; }
  #arrive small { display: block; margin-top: 8px; font: 400 13px/1.5 var(--sans); letter-spacing: .02em; color: var(--dim); }
  #skipIntro { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 6; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--dim); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .8s ease; }
  body.intro #skipIntro { opacity: 1; pointer-events: auto; }
  #hud > * { transition: opacity .8s ease; }
  body.seated #hud > :not(#toasts):not(#seatBar):not(#sceneTools):not(#ambiencePanel):not(#shout):not(#roastMenu):not(#roastGauge):not(#chat):not(#shoutBox) { opacity: 0; pointer-events: none; }
  body.seated #chat:not(:hover) { opacity: .6; }
  /* ---------- 확성기 채팅: 입력칸 없이, 확성기로 외친 말만 쌓인다 */
  #chat { position: absolute; left: 14px; top: calc(60px + env(safe-area-inset-top)); width: min(300px, calc(100vw - 80px)); border-radius: 16px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; }
  #conn.show ~ #chat { top: calc(104px + env(safe-area-inset-top)); }
  #chatHead { display: flex; align-items: center; gap: 7px; width: 100%; padding: 9px 13px; border: 0; background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; text-align: left; }
  #chatHead .chev { margin-left: auto; color: var(--dim); font-size: 11px; transition: transform .2s ease; }
  #chat:not(.open) #chatHead .chev { transform: rotate(-90deg); }
  #chat:not(.open) { width: auto; border-radius: 999px; }
  #chat:not(.open) #chatBody { display: none; }
  #chatBadge { min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--ember); color: #1a0e06; font-size: 11px; font-weight: 700; text-align: center; }
  #chatBadge[hidden] { display: none; }
  #chatList { list-style: none; margin: 0; padding: 2px 13px 8px; max-height: min(34vh, 300px); overflow-y: auto; display: grid; gap: 7px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(242,179,92,.3) transparent; }
  #chatList li { font-size: 13px; line-height: 1.45; color: var(--ink); word-break: break-all; }
  #chatList li time { color: var(--dim); font-size: 10.5px; margin-right: 6px; font-variant-numeric: tabular-nums; }
  #chatList li b { color: var(--warm); font-weight: 600; margin-right: 6px; }
  #chatList li.me b { color: #ffd88a; }
  #chatList li.me { padding: 4px 8px; margin: 0 -8px; border-radius: 10px; background: rgba(242,179,92,.1); }
  #chatList li.new { animation: chatIn .5s ease; }
  @keyframes chatIn { from { opacity: 0; transform: translateY(6px); } }
  #chatList li.empty { color: var(--dim); text-align: center; padding: 10px 0 4px; }
  #chatShout { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 20px); margin: 0 10px; padding: 8px 0; border-radius: 999px; border: 1px solid rgba(242,179,92,.45); background: rgba(242,179,92,.1); color: #ffe7bd; font-size: 12.5px; font-weight: 600; }
  #chatShout small { color: var(--warm); font-size: 11px; }
  .bump { animation: bump .7s ease; }
  @keyframes bump { 25% { transform: scale(1.16); filter: brightness(1.5); } }
  #chatShout.ready { background: rgba(242,179,92,.22); border-color: rgba(242,179,92,.8); }
  @media (max-width: 1060px) { #chat.open ~ #shout { display: none; } } /* 좁은 화면: 채팅 창이 열려 있으면 위 배너는 생략(채팅에 이미 뜬다) */
  #chat .note { margin: 6px 12px 10px; font-size: 10.5px; line-height: 1.45; color: var(--dim); text-align: center; }
  /* ---------- 굽기 익힘 게이지: 크림 → 황금 → 갈색 → 검정, 금빛 칸이 '딱 좋아요' */
  #roastGauge { position: absolute; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(280px, calc(100vw - 32px)); padding: 9px 14px 8px; border-radius: 16px; background: rgba(28,16,8,.62); border: 1px solid rgba(242,179,92,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: none; }
  #roastGauge[hidden] { display: none; }
  #roastGauge .rg-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
  #roastGauge .rg-top b { font-weight: 600; color: #ffe7bd; transition: color .3s ease; }
  #roastGauge[data-g="p"] .rg-top b { color: #ffd36a; text-shadow: 0 0 12px rgba(255,200,90,.6); }
  #roastGauge[data-g="o"] .rg-top b, #roastGauge[data-g="b"] .rg-top b { color: #ff9a7a; }
  #roastGauge .rg-bar { position: relative; height: 9px; margin: 7px 0 6px; border-radius: 999px; background: linear-gradient(90deg, #f6eddc 0%, #ecc98a 35%, #e0a24a 57%, #a55d24 74%, #4a2a16 86%, #140c08 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
  #roastGauge .rg-sweet { position: absolute; left: 53.1%; width: 18.8%; top: -3px; bottom: -3px; border-radius: 6px; box-shadow: 0 0 0 1.5px rgba(255,214,110,.95), 0 0 12px rgba(255,200,90,.45); }
  #roastGauge[data-g="p"] .rg-sweet { animation: sweet 0.9s ease-in-out infinite; }
  @keyframes sweet { 50% { box-shadow: 0 0 0 2px rgba(255,230,140,1), 0 0 20px rgba(255,210,100,.85); } }
  #rgNeedle { position: absolute; top: -5px; bottom: -5px; width: 4px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.6); transition: left .12s linear; }
  #roastGauge small { display: block; text-align: center; font-size: 11px; color: var(--dim); }
  #roastGauge.done { animation: gaugeDone .5s ease; }
  #roastGauge.done[data-g="p"] { border-color: rgba(255,214,110,.85); box-shadow: 0 0 28px rgba(255,200,90,.35); }
  @keyframes gaugeDone { 30% { transform: translateX(-50%) scale(1.04); } }
  #actRoast.ready { background: rgba(242,179,92,.14); box-shadow: inset 0 0 0 1px rgba(242,179,92,.55); }
  body.seated #roastMenu, body.seated #roastGauge { bottom: calc(72px + env(safe-area-inset-bottom)); }
  body.roasting #shoutBox { bottom: calc(166px + env(safe-area-inset-bottom)); }
  body.seated #shoutBox { bottom: calc(72px + env(safe-area-inset-bottom)); }
  body.seated.roasting #shoutBox { bottom: calc(150px + env(safe-area-inset-bottom)); }
  #seatBar { position: absolute; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(8,12,10,.45); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; color: var(--dim); white-space: nowrap; }
  #seatBar[hidden] { display: none; }
  #seatBar button { padding: 7px 13px; border-radius: 999px; border: 0; background: rgba(255,255,255,.08); color: var(--ink); font-size: 12.5px; }
  #seatBar button.on { background: rgba(242,179,92,.2); color: #ffe7bd; box-shadow: inset 0 0 0 1px rgba(242,179,92,.5); }
  /* ---------- 소리 깨우기 · 잠든 화면 */
  #soundNudge { position: fixed; left: 50%; top: 42%; transform: translateX(-50%); z-index: 7; padding: 13px 20px; border-radius: 999px; border: 1px solid rgba(242,179,92,.6); background: rgba(40,22,8,.82); color: #ffe7bd; font-size: 14.5px; font-weight: 600; box-shadow: 0 10px 40px rgba(0,0,0,.5); animation: breathe 3s ease-in-out infinite; white-space: nowrap; }
  #soundNudge[hidden] { display: none; }
  #sleepShade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 8; transition: opacity 1.2s ease; }
  body.sleeping #sleepShade { opacity: .88; transition: opacity 40s ease; }
  @media (max-width: 1000px) {
    #status { top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 24px); white-space: normal; text-align: center; border-radius: 16px; line-height: 1.4; }
    body.hinting #status, body.roasting #status, body:has(#roastMenu:not([hidden])) #status, body:has(#shoutBox:not([hidden])) #status { opacity: 0; }
    body.seated #status { bottom: calc(72px + env(safe-area-inset-bottom)); }
  }
  @media (max-width: 520px) { h1 { font-size: 36px; } #arrive .line { font-size: 21px; } #actions { gap: 2px; padding: 5px; }  #seatBar { flex-wrap: wrap; justify-content: center; border-radius: 20px; padding: 8px; gap: 6px; width: max-content; max-width: calc(100vw - 24px); } #seatText { width: 100%; text-align: center; }  #toasts { max-width: calc(100vw - 28px); } body.seated #roastMenu, body.seated #roastGauge { bottom: calc(112px + env(safe-area-inset-bottom)); } #actions { max-width: calc(100vw - 16px); } #actions button { width: 50px; font-size: 10.5px; padding: 6px 0 5px; } #actions button span { font-size: 17px; } #map { width: 132px; height: 132px; top: calc(196px + env(safe-area-inset-top)); bottom: auto; } #shout { top: calc(112px + env(safe-area-inset-top)); font-size: 14.5px; }  #timeSel button { padding: 4px 8px; font-size: 11px; } #status { bottom: calc(86px + env(safe-area-inset-bottom)); font-size: 12.5px; padding: 8px 14px; } body.seated #status { bottom: calc(112px + env(safe-area-inset-bottom)); } #hint { bottom: calc(86px + env(safe-area-inset-bottom)); } body.seated #shoutBox { bottom: calc(112px + env(safe-area-inset-bottom)); } body.seated.roasting #shoutBox { bottom: calc(190px + env(safe-area-inset-bottom)); } #hint { font-size: 11px; } }

  :root { --glass: rgba(8,12,10,.82); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --control: 44px; }
  button { min-height: var(--control); touch-action: manipulation; }
  button:focus-visible, input:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; }
  #c:focus-visible { outline: none; } /* 키보드로 움직일 때 화면 전체에 금색 테두리가 생기지 않게 — 버튼 포커스는 그대로 보인다 */
  button:hover { filter: brightness(1.12); }
  .kinds button { min-height: var(--control); }
  .icon { min-height: var(--control); }
  #actions { padding: var(--space-2); gap: var(--space-1); border-radius: var(--space-6); box-shadow: 0 8px 32px #0004; }
  #actions button { width: 72px; min-height: 58px; border-radius: var(--space-4); gap: 5px; padding: 7px 2px; }
  #actions button .label { font-size: 11.5px; }
  #actions button[aria-pressed="true"], #actions button[aria-expanded="true"] { background: #f2b35c26; color: #ffe0ad; }
  #moreActions { position: absolute; bottom: calc(110px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(380px, calc(100vw - 24px)); padding: var(--space-3); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); border: 1px solid var(--line); border-radius: var(--space-6); background: var(--glass); backdrop-filter: blur(12px); }
  #moreActions[hidden] { display: none; }
  #moreActions button { display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; background: #ffffff09; font-size: 13px; }
  #moreActions button:active { transform: scale(.96); }
  #moreActions p { grid-column: 1 / -1; margin: 4px 0 0; text-align: center; color: var(--dim); font-size: 11px; }
  #hint, #roastMenu, #roastGauge, #shoutBox { bottom: calc(110px + env(safe-area-inset-bottom)); }
  body:has(#moreActions:not([hidden])) #hint, body:has(#moreActions:not([hidden])) #status { visibility: hidden; }
  /* 굽기 메뉴·게이지·확성기 창은 조작 안내 줄과 같은 높이라, 열려 있는 동안 안내 줄을 숨긴다 */
  body.roasting #hint, body:has(#roastMenu:not([hidden])) #hint, body:has(#shoutBox:not([hidden])) #hint { visibility: hidden; }
  @media (max-width: 520px) {
    #actions { width: calc(100vw - 24px); max-width: 390px; gap: 2px; padding: 6px; bottom: calc(12px + env(safe-area-inset-bottom)); }
    #actions button { flex: 1; min-width: 0; width: auto; font-size: 11px; min-height: 58px; }
    #actions button .label { font-size: 11px; }
    #status, #hint { bottom: calc(98px + env(safe-area-inset-bottom)); }
    #hint { white-space: normal; text-align: center; width: max-content; line-height: 1.6; }
    #fireCount { display: none; }
    #timeSel button { padding: 4px 7px; }
    #map { top: calc(230px + env(safe-area-inset-top)); }
    .gate-card { padding-block: 24px; }
    .lead { margin-bottom: 18px; }
    .orb { width: 96px; height: 96px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .toast { opacity: 1; }
  }


/* Forest HUD: the scene stays open, secondary controls share one panel. */
:root { --panel: rgba(12,18,14,.94); --selected: #f2b35c26; --selected-ink: #ffe0ad; --surface-hover: #ffffff0b; --shadow: 0 12px 40px #0005; }
[hidden] { display: none !important; }
.ui-icon { display: block; width: 20px; height: 20px; flex: none; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex: none; }
button { line-height: 1.3; }
button:disabled { cursor: default; opacity: .5; }
button:hover { filter: none; }
/* 손가락으로 누른 버튼에 hover 배경이 남아 '켜진 것처럼' 보이지 않게, 마우스가 있는 기기에서만 */
@media (hover: hover) { button:hover:not(:disabled) { background-color: var(--surface-hover); } }
.orb .ui-icon { width: 48px; height: 48px; stroke-width: 1.2; }
.chip, .icon { border-color: var(--line); background: var(--glass); }
#count { gap: 12px; min-height: 44px; padding: 8px 14px; border-radius: 16px; }
.brand { font: 400 20px/1 var(--serif); letter-spacing: .02em; }
.presence { padding-left: 12px; border-left: 1px solid var(--line); font-size: 12px; color: var(--dim); }
#fireCount { font-size: 11px; color: var(--dim); }
#sceneTools { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; display: flex; gap: 8px; }
#sceneTools .icon { position: static; height: 44px; padding: 0 14px; border-radius: 14px; gap: 8px; font-size: 12px; }
#sceneTools #mute { padding: 0; width: 44px; }
#ambienceToggle[aria-expanded="true"] { color: var(--selected-ink); background: var(--selected); }
.floating-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#ambiencePanel { position: absolute; top: calc(70px + env(safe-area-inset-top)); right: 14px; width: 304px; max-width: calc(100vw - 28px); max-height: calc(100dvh - 180px); overflow-y: auto; overscroll-behavior: contain; padding: 20px; scrollbar-width: thin; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.overline { font-size: 10px; letter-spacing: .14em; color: var(--dim); margin: 0 0 8px; }
.panel-head h2 { font-size: 20px; font-weight: 500; margin: 0; }
.quiet-button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 12px; color: var(--dim); }
.field-label { margin: 0 0 10px; color: var(--dim); font-size: 12px; }
#timeSel { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #ffffff06; margin-bottom: 16px; }
#timeSel button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 0; background: transparent; color: var(--dim); border-radius: 10px; font-size: 12px; padding: 4px; }
#timeSel .ui-icon { width: 16px; height: 16px; }
#timeSel button.on { background: var(--selected); color: var(--selected-ink); }
.setting-row { display: flex; align-items: center; width: 100%; min-height: 64px; padding: 12px 0; gap: 12px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.setting-row > [data-icon] { color: var(--dim); }
.setting-copy { display: grid; gap: 4px; flex: 1; font-size: 13px; }
.setting-copy small { font-size: 11px; color: var(--dim); }
.switch-mark { width: 30px; height: 18px; padding: 3px; border-radius: 20px; background: #ffffff20; }
.switch-mark::after { content: ''; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--dim); transition: transform .16s ease; }
.setting-row[aria-pressed="true"] .switch-mark { background: var(--selected); }
.setting-row[aria-pressed="true"] .switch-mark::after { transform: translateX(12px); background: var(--warm); }
#songToggle.on, #rainToggle.on { border: 0; background: transparent; color: var(--ink); }
.control-guide { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; font-size: 12px; }
.control-guide summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; min-height: 44px; list-style: none; color: var(--dim); }
.control-guide summary::-webkit-details-marker { display: none; }
.control-guide summary .ui-icon { width: 14px; height: 14px; }
.control-guide[open] summary .ui-icon { transform: rotate(90deg); }
.control-guide p { font-size: 12px; line-height: 1.8; color: var(--dim); margin: 8px 0 16px; word-break: keep-all; }
.key-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 8px; color: var(--dim); font-size: 11px; }
kbd { font: 10px var(--sans); border: 1px solid var(--line); padding: 3px 5px; border-radius: 4px; margin-right: 3px; color: var(--ink); }
#chat { top: calc(70px + env(safe-area-inset-top)); border-radius: 16px; width: min(288px, calc(100vw - 28px)); }
#chat:not(.open) { width: auto; border-radius: 14px; }
#chatHead { min-height: 44px; gap: 8px; font-size: 12px; font-weight: 500; padding: 8px 14px; }
#chatHead .ui-icon { width: 16px; height: 16px; }
#chatShout { flex-wrap: wrap; gap: 6px; min-height: 44px; padding: 8px; }
#chatShout small { flex-basis: 100%; font-size: 10px; }
#chatShout .ui-icon { width: 16px; height: 16px; }
#chat .note { font-size: 11px; line-height: 1.65; margin: 12px; }
#actions { border-radius: 24px; padding: 8px; gap: 4px; bottom: calc(20px + env(safe-area-inset-bottom)); box-shadow: var(--shadow); }
#actions button { width: 72px; gap: 6px; border-radius: 16px; font-size: 12px; color: var(--dim); }
#actions button .label { font-size: 12px; }
#actions .ui-icon { width: 22px; height: 22px; }
#actions button[aria-pressed="true"], #actions button[aria-expanded="true"] { color: var(--selected-ink); background: var(--selected); }
#actions button:active { transform: scale(.96); }
#moreActions { width: min(380px, calc(100vw - 28px)); padding: 16px; background: var(--panel); border-radius: 20px; bottom: calc(112px + env(safe-area-inset-bottom)); }
#moreActions .menu-title { margin: 0 0 4px; text-align: left; color: var(--ink); font-size: 13px; }
#moreActions button { min-height: 52px; gap: 8px; font-size: 12px; }
#moreActions .ui-icon { width: 18px; height: 18px; }
#moreActions button[aria-pressed="true"] { background: var(--selected); color: var(--selected-ink); }
#actShout { grid-column: 1 / -1; white-space: nowrap; } /* 마지막 줄 혼자 남던 확성기를 한 줄로 — 좁은 화면에서 글자가 꺾이지 않게 */
#actShout .label { font-size: 12px; }
#actShout small { font-size: 11px; }
#status, #hint { border-color: var(--line); background: var(--glass); font-size: 12px; color: var(--dim); }
#hint { padding: 8px 16px; border-radius: 12px; }
#seatBar { padding: 8px; gap: 4px; border-radius: 20px; background: var(--glass); }
#seatText { padding: 0 12px; font-size: 12px; }
#seatBar button, #shoutBox button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 12px; border-radius: 12px; font-size: 12px; }
#seatBar .ui-icon, #shoutBox .ui-icon { width: 18px; height: 18px; }
#seatExit { color: var(--selected-ink); }
#toasts { max-width: min(320px, 44vw); }
.toast { padding: 10px 14px; font-size: 12px; line-height: 1.6; border-radius: 14px; }
#roastMenu { background: var(--panel); }
#roastMenu button { min-height: 44px; }
#map { z-index: 2; }
body:has(#ambiencePanel:not([hidden])) #map { display: none; }
/* 의자 막대가 버튼 44px로 커져서(위 끝 약 82px), 의자에서 여는 굽기 메뉴·게이지·확성기 창을 그 위로 올린다 */
body.seated #roastMenu, body.seated #roastGauge, body.seated #shoutBox { bottom: calc(96px + env(safe-area-inset-bottom)); }
body.seated.roasting #shoutBox { bottom: calc(196px + env(safe-area-inset-bottom)); }
@media (max-width: 520px) {
  /* 휴대폰 의자 막대는 두 줄(위 끝 약 104px) */
  body.seated #roastMenu, body.seated #roastGauge, body.seated #shoutBox { bottom: calc(116px + env(safe-area-inset-bottom)); }
  body.seated.roasting #shoutBox { bottom: calc(212px + env(safe-area-inset-bottom)); }
  #count { left: 12px; padding: 8px 12px; gap: 8px; }
  .brand { font-size: 18px; }
  .presence { padding-left: 8px; font-size: 11px; }
  #sceneTools { right: 12px; gap: 6px; }
  #sceneTools .icon { padding: 0 10px; }
  #ambienceToggle > span:last-child { display: none; }
  #ambienceToggle { width: 44px; }
  #ambiencePanel { right: 12px; width: min(320px, calc(100vw - 24px)); padding: 16px; }
  #chat { left: 12px; }
  #actions { width: calc(100vw - 24px); padding: 6px; gap: 2px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  #actions button { width: auto; flex: 1; min-width: 0; font-size: 11px; }
  #actions button .label { font-size: 11px; }
  #moreActions { bottom: calc(98px + env(safe-area-inset-bottom)); }
  #status, #hint { bottom: calc(98px + env(safe-area-inset-bottom)); }
  #toasts { max-width: calc(100vw - 24px); left: 12px; }
  #seatBar { width: calc(100vw - 24px); max-width: 390px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  #seatText { width: 100%; padding: 4px 0; }
  #seatBar button { flex: 1; padding: 8px 6px; font-size: 11px; }
  #seatBar .ui-icon { width: 16px; height: 16px; }
  #status { max-width: calc(100vw - 32px); }
}
@media (max-height: 560px) {
  #ambiencePanel { max-height: calc(100dvh - 94px); }
  #moreActions { max-height: calc(100dvh - 112px); overflow-y: auto; }
}