/* 레이아웃: 화면 전체가 라운지와 창밖 바다, UI는 위 정보 띠와 아래 조작 띠만 얹는다 */
:root {
  --abyss: #030a12;
  --ink: #e6f1f2;
  --mute: #8fb0b8;
  --glass: rgba(4, 16, 26, 0.6);
  --line: rgba(180, 230, 235, 0.16);
  --glow: #7ff0e0;
  --glow-ink: #04211d;
  --brass: #e8d4a8;
  --display: "Gowun Batang", "Nanum Myeongjo", "Batang", serif;
  --body: "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--abyss); color: var(--ink); font-family: var(--body); overflow: hidden; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.vignette { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 85% 80% at 50% 45%, transparent 60%, rgba(0, 0, 0, 0.55) 100%); }

/* 다른 곳에서 넘어오는 중: 입장 화면 대신 이동 덮개(갑판·창가 방) 또는 하강 화면(심해)을 바로 보여 준다 */
.arriving #gate { display: none !important; }
.arriving #travel[hidden] { display: grid !important; opacity: 1; transition: none; }
.arriving #descent[hidden] { display: grid !important; }

/* ---------- 입장 ---------- */
.gate { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px var(--gutter-r) 24px var(--gutter-l);
  background: radial-gradient(ellipse at 50% 55%, rgba(3, 10, 18, 0.15), rgba(3, 10, 18, 0.7) 75%); }
.gate-card { width: min(380px, 100%); display: grid; gap: 10px; padding: 28px 26px 24px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 20px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.eyebrow { margin: 0; font-size: 12px; letter-spacing: 0.22em; color: var(--glow); }
.gate h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 54px; letter-spacing: 0.08em; line-height: 1.05; }
.lede { margin: 0; color: var(--mute); line-height: 1.65; font-size: 15px; }
.online { margin: 0 0 6px; font-size: 13px; color: var(--glow); font-variant-numeric: tabular-nums; }
label, legend { font-size: 12px; color: var(--mute); letter-spacing: 0.08em; }
#name-input { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 8px; padding: 0; border: 0; }
.swatches legend { margin-bottom: 8px; }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; padding: 0; }
.swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(127, 240, 224, 0.35); }
.primary { display: inline-flex; justify-content: center; align-items: center; padding: 13px 18px; border: 0; border-radius: 14px;
  background: var(--glow); color: var(--glow-ink); font-weight: 700; text-decoration: none; }
.primary:disabled { opacity: 0.6; cursor: default; }
.gate-room { margin: 2px 0 0; font-size: 12px; color: var(--mute); text-align: center; }
.gate-back { margin: 2px 0 0; font-size: 12px; text-align: center; }
.gate-back a { color: var(--mute); }

/* ---------- 하강 ---------- */
.descent { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px;
  background: linear-gradient(180deg, rgba(120, 214, 228, 0.92) 0%, rgba(10, 60, 90, 0.95) 45%, rgba(3, 10, 18, 0.97) 100%);
  transition: opacity 1.2s ease; }
.descent.done { opacity: 0; }
.descent-label { margin: 0; font-size: 14px; letter-spacing: 0.14em; color: var(--ink); }
.descent-depth { margin: 0; font-family: var(--display); font-size: 64px; font-variant-numeric: tabular-nums; }
.descent-depth small { font-size: 22px; margin-left: 4px; color: var(--mute); }

/* ---------- 상단 ---------- */
.hud { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter-r) 0 var(--gutter-l); pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-left { display: grid; gap: 8px; justify-items: start; }
.room { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.room strong { font-family: var(--display); color: var(--ink); font-size: 15px; letter-spacing: 0.06em; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #e0796b; }
.dot.on { background: var(--glow); box-shadow: 0 0 8px var(--glow); }
.gauge { display: grid; grid-template-columns: auto 90px auto; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line); font-size: 12px; color: var(--mute);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gauge-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
#gauge-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3fb8c9, var(--glow)); box-shadow: 0 0 8px var(--glow); transition: width 1s ease; }
.gauge-pct { color: var(--glow); font-variant-numeric: tabular-nums; }

.hud-right { display: grid; gap: 8px; justify-items: end; text-align: right; }
.depth { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums; }
.depth-label { font-size: 11px; letter-spacing: 0.2em; color: var(--mute); }
.depth-reading { font-family: var(--display); font-size: 30px; line-height: 1.1; }
.depth-reading small { font-size: 14px; margin-left: 2px; color: var(--mute); }
.depth-zone { font-size: 12px; color: var(--glow); }
.tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.tool { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); font-size: 12px; color: var(--mute);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tool[aria-pressed="true"] { color: var(--ink); }
.airship-tool { color: var(--glow); text-decoration: none; }

/* ---------- 하단 ---------- */
.hint { position: fixed; left: 50%; bottom: calc(118px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); margin: 0;
  font-size: 12px; color: var(--mute); white-space: nowrap; pointer-events: none; transition: opacity 1.2s; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
.toast { position: fixed; left: 50%; top: calc(110px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); margin: 0; max-width: calc(100% - 32px);
  padding: 9px 18px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-size: 14px; text-align: center;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.dock { position: fixed; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 8px;
  padding: 0 var(--gutter-r) calc(14px + env(safe-area-inset-bottom, 0px)) var(--gutter-l); }
.actions { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; padding: 5px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); scrollbar-width: none; }
.actions::-webkit-scrollbar { display: none; }
.actions button { flex: none; padding: 9px 15px; border: 0; border-radius: 999px; background: transparent; font-size: 14px; white-space: nowrap; }
.actions button:hover { background: rgba(255, 255, 255, 0.08); }
.actions button:active { background: rgba(127, 240, 224, 0.2); }
.actions .dive { background: var(--glow); color: var(--glow-ink); font-weight: 700; }
.actions .dive:hover { background: #9ff6ea; }
.actions .dive[aria-pressed="true"] { background: var(--brass); color: #2a1f0c; }

/* 잠수 중 위·아래 버튼 (휴대폰에서 특히 필요) */
.updown { position: fixed; right: var(--gutter-r); bottom: calc(130px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; }
.updown button { width: 64px; height: 52px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); font-size: 13px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); touch-action: none; user-select: none; -webkit-user-select: none; }
.updown button:active { background: rgba(127, 240, 224, 0.25); }

/* 에어록 전환: 물방울 가득한 화면이 잠깐 덮었다 걷힌다 */
.airlock { position: fixed; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 0.7s ease; pointer-events: none;
  background: radial-gradient(circle at 30% 70%, rgba(200, 245, 255, 0.35) 0 4%, transparent 5%),
    radial-gradient(circle at 70% 40%, rgba(200, 245, 255, 0.3) 0 3%, transparent 4%),
    radial-gradient(circle at 50% 85%, rgba(200, 245, 255, 0.25) 0 6%, transparent 7%),
    linear-gradient(180deg, rgba(6, 40, 60, 0.96), rgba(3, 10, 18, 0.98)); }
.airlock.on { opacity: 1; }
.airlock p { margin: 0; font-size: 15px; letter-spacing: 0.14em; color: var(--ink); }
.say { display: flex; gap: 6px; width: min(420px, 100%); }
.say input { flex: 1; min-width: 0; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.say button { padding: 9px 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--abyss); font-weight: 700; }

/* ---------- 후원 ---------- */
.support { width: min(440px, calc(100% - 32px)); max-height: calc(100% - 48px); overflow-y: auto; padding: 26px 24px; border-radius: 20px;
  border: 1px solid var(--line); background: #071521; color: var(--ink); }
.support::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); }
.support h2 { margin: 0 0 8px; font-family: var(--display); font-size: 24px; }
.support h3 { margin: 18px 0 6px; font-size: 13px; color: var(--mute); font-weight: 400; letter-spacing: 0.06em; }
.support p { margin: 0; line-height: 1.6; color: var(--mute); font-size: 14px; }
.support-amount { margin: 14px 0 10px !important; font-variant-numeric: tabular-nums; }
.support-amount strong { font-family: var(--display); font-size: 26px; color: var(--glow); }
.milestones { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.milestones li { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: baseline; font-size: 14px; color: var(--mute); }
.milestones li b { font-variant-numeric: tabular-nums; font-weight: 400; }
.milestones li.reached { color: var(--ink); }
.milestones li.reached b { color: var(--glow); }
.supporters { color: var(--ink) !important; }
.support-actions { display: flex; gap: 8px; margin-top: 20px; }
.support-actions .primary { flex: 1; }
.support-actions button { padding: 12px 18px; border-radius: 14px; border: 1px solid var(--line); background: transparent; }
/* 확인 버튼: 위의 투명 배경보다 우선해서, 밝은 바탕에 진한 글씨로 또렷하게 */
.support-actions .primary { background: var(--glow); color: var(--glow-ink); border-color: transparent; font-weight: 700; }
.support-actions .primary:hover { filter: brightness(1.08); }
.support-actions .primary:disabled { opacity: 0.55; filter: none; }

/* ---------- 기타 ---------- */
.flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.flash.on { opacity: 0.85; transition: none; }
.debug { position: fixed; left: var(--gutter-l); bottom: calc(130px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 4px; max-width: 340px;
  max-height: calc(100vh - 260px); overflow-y: auto; padding: 8px; border-radius: 12px; background: rgba(3, 10, 18, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.debug button { padding: 5px 10px; border-radius: 8px; border: 1px dashed var(--mute); background: var(--glass); font-size: 12px; }
.debug .debug-head { justify-self: start; border-style: solid; color: var(--glow); font-weight: 700; }
.debug-body { display: grid; gap: 4px; }
.debug-title { margin: 4px 0 0; font-size: 11px; letter-spacing: 0.08em; color: var(--mute); }
.debug-row { display: flex; flex-wrap: wrap; gap: 5px; }

@media (max-width: 640px) {
  .gate h1 { font-size: 44px; }
  .depth-reading { font-size: 24px; }
  .gauge { grid-template-columns: 60px auto; }
  .gauge-label { display: none; }
  .tools .tool { padding: 5px 9px; }
  .hint { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); white-space: normal; text-align: center; width: calc(100% - 32px); }
}

/* 높이가 낮은 화면: 조작 띠를 한 줄로 줄여 바닥을 가리지 않게 한다 */
@media (max-height: 560px) {
  .dock { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .actions { padding: 3px; }
  .actions button { padding: 6px 11px; font-size: 13px; }
  .say { width: min(260px, 100%); }
  .say input, .say button { padding: 6px 12px; font-size: 13px; }
  .hint { display: none; }
  .gauge { grid-template-columns: 60px auto; }
  .gauge-label { display: none; }
  .depth-reading { font-size: 22px; }
  .debug { bottom: auto; top: calc(96px + env(safe-area-inset-top, 0px)); }
  .updown { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .updown button { height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .descent, .hint, #gauge-fill, .flash, .airlock { transition: none; }
}

/* ---------- 보물 도감 ---------- */
.treasure-found { display: grid; justify-items: center; gap: 4px; margin: 4px 0 8px; padding: 14px; border-radius: 16px; background: rgba(255, 217, 138, 0.08); text-align: center; }
.treasure-found .icon { font-size: 48px; line-height: 1.1; }
.treasure-found strong { font-family: var(--display); font-size: 18px; }
.treasure-found .sub { font-size: 12px; color: var(--glow); }
.treasure-progress { margin: 0; font-size: 13px; color: var(--mute); }
.treasure-grid { list-style: none; margin: 6px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.treasure-grid li { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 8px 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.05);
  font-size: 11px; color: var(--ink); text-align: center; line-height: 1.3; }
.treasure-grid li .icon { font-size: 24px; }
.treasure-grid li.none { color: var(--mute); }
.treasure-grid li.none .icon { filter: grayscale(1) brightness(0.35); }
.treasure-tip { margin: 0; font-size: 12px; color: var(--mute); }

/* 입장 화면: 쓸 수 없는 이름을 알려 주는 줄 */
.name-error { margin: -4px 0 4px; font-size: 13px; color: #ff9c8a; line-height: 1.5; }

/* 휴대폰 방향기: 왼쪽 아래 둥근 판. 엄지로 밀면 그쪽으로 움직인다 (위·아래 버튼과 같은 높이) */
.joystick { position: fixed; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(130px + env(safe-area-inset-bottom, 0px));
  width: 116px; height: 116px; border-radius: 50%; z-index: 6; touch-action: none; user-select: none; -webkit-user-select: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04) 70%); border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px); display: grid; place-items: center; opacity: 0.75; transition: opacity 0.2s; }
.joystick.on { opacity: 1; }
.joystick-knob { width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  pointer-events: none; transition: transform 0.08s; }
.joystick.on .joystick-knob { transition: none; }
.updown { z-index: 6; }
@media (max-width: 640px) {
  .joystick { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); width: 104px; height: 104px; }
  .joystick-knob { width: 44px; height: 44px; }
}

/* 운영 공지 띠: 모든 장소 화면 위쪽 가운데 */
.notice-banner { position: fixed; top: calc(64px + env(safe-area-inset-top, 0px)); left: 50%; transform: translate(-50%, -12px); z-index: 40; max-width: calc(100% - 32px);
  padding: 12px 20px; border-radius: 16px; background: rgba(255, 238, 200, 0.95); color: #3a2a1c; font-size: 15px; line-height: 1.5; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  opacity: 0; transition: opacity 0.5s, transform 0.5s; pointer-events: none; text-align: center; }
.notice-banner.on { opacity: 1; transform: translate(-50%, 0); }
.notice-banner b { color: #b3541e; margin-right: 6px; }
/* 운영자가 내보냈을 때 */
.kicked-cover { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(6, 10, 18, 0.88); color: #f4ead2; text-align: center; padding: 24px; }
.kicked-cover h2 { margin: 0 0 8px; font-family: var(--display); }
/* 운영 패널 */
.tool.op-tool { color: #ffe6a8; border-color: rgba(255, 210, 120, 0.55); }
.op-panel h3 { margin: 16px 0 6px; }
.op-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.op-row button, .op-person button { padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--ink); cursor: pointer; font: inherit; font-size: 13px; }
.op-input { flex: 1 1 140px; min-width: 0; font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); color: var(--ink); }
.op-person { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.op-person span { flex: 1; }
.op-person .op-danger { color: #ff9c8a; }
.op-empty { color: var(--mute); font-size: 13px; }

/* 감사의 폭죽 신청 */
.fw-req .fwr-preview { width: 100%; height: 120px; background: #05070d; border-radius: 12px; margin: 6px 0; display: block; }
.fw-req .fwr-hint { font-size: 12px !important; }
.fw-req .fwr-done { margin: 12px 0; padding: 14px; border-radius: 14px; background: rgba(255, 220, 150, 0.12); text-align: center; }
.fw-req .fwr-done strong { display: block; font-size: 30px; letter-spacing: 0.2em; color: var(--glow); margin: 4px 0; font-variant-numeric: tabular-nums; }
.fw-req .fwr-done a { display: inline-block; margin-top: 8px; }
.fw-req .op-person small { color: var(--mute); }
.fw-req { overflow-x: hidden; }
.fw-req .op-row select { flex: 1 1 120px; }
.op-panel .op-fw-preview { width: 100%; height: 120px; background: #05070d; border-radius: 12px; display: block; margin: 4px 0 6px; }
.op-panel .op-file label { font-size: 13px; color: var(--mute); }
.op-panel .op-fw-count { flex: 1; font-size: 12px; color: var(--mute); align-self: center; }
.op-panel { overflow-x: hidden; }
dialog.support.op-panel, dialog.support.fw-req { overflow-x: hidden !important; }

/* 알림 안의 바로 가기 버튼 (광안리 → 심해 부캉이 떡밥 등) */
.toast .toast-go { margin-left: 8px; padding: 4px 12px; border-radius: 999px; border: 0; background: #f4d79a; color: #2a2116; font: inherit; font-weight: 700; cursor: pointer; }

/* 운영 패널 · 이 방 손님: 한 줄에 이름과 아이콘 버튼 */
.op-guests-head { margin: 2px 0 6px; }
.op-guests-head input { width: 100%; box-sizing: border-box; }
.op-legend { margin: 0 0 6px !important; font-size: 12px !important; color: var(--mute); }
.op-guest { display: flex; align-items: center; gap: 6px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.op-guest .g-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.op-guest .g-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.op-guest button { flex: none; width: 38px; height: 34px; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05);
  color: var(--ink); cursor: pointer; font: inherit; font-size: 17px; line-height: 1; }
.op-guest button.done { border-color: rgba(140, 220, 150, 0.8); background: rgba(140, 220, 150, 0.14); }
.op-guest button.op-danger[data-armed] { width: auto; padding: 0 8px; font-size: 12px; color: #ff9c8a; border-color: rgba(255, 140, 120, 0.7); }