@import url("https://fonts.googleapis.com/css2?family=Song+Myung&family=Gowun+Batang:wght@400;700&family=Nanum+Myeongjo:wght@800&display=swap");

/* 표류목 함대: 양피지 해도, 먹 잉크, 놋쇠, 깃발 색 */
:root {
  --sea: #0c3a44;
  --parchment: #efe2c4;
  --parchment-deep: #e2cfa6;
  --ink: #3a2716;
  --ink-soft: #6b5236;
  --ink-faint: rgba(58, 39, 22, 0.35);
  --brass: #c9a24a;
  --wine: #8c2f22;
  --navy: #2c4f86;
  --gold: #f2c14e;
  --font-display: "Song Myung", "Gowun Batang", serif;
  --font-body: "Gowun Batang", "Noto Serif KR", serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; background: var(--sea); color: var(--ink); font-family: var(--font-body); }
[hidden] { display: none !important; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.stage { position: fixed; inset: 0; }
.world { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; user-select: none; }
.world.is-grabbing { cursor: grabbing; }
.world.can-grab { cursor: grab; }

/* 해도에 붙인 양피지 쪽지 */
/* 해역 이름: 상자 없이 바다 위에 굵은 명조로 띄운다 */
.hud { position: absolute; top: 18px; left: 22px; pointer-events: none; }
.zone-title { display: flex; align-items: center; gap: 10px; margin: 0; font-family: "Nanum Myeongjo", var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: 0.06em; line-height: 1; color: #f7ecd2; text-shadow: 0 2px 0 rgba(58, 39, 22, 0.75), 0 4px 18px rgba(0, 0, 0, 0.45); }
.zone-mark { flex: none; width: 0.78em; height: 0.78em; color: var(--gold); filter: drop-shadow(0 2px 0 rgba(58, 39, 22, 0.75)); }
.zone-title.is-new { animation: zone-in 2.4s ease-out; }
@keyframes zone-in {
  0% { opacity: 0; transform: translateY(-8px); letter-spacing: 0.3em; }
  35% { opacity: 1; }
  100% { opacity: 1; transform: none; letter-spacing: 0.06em; }
}

.hint { position: absolute; left: 50%; bottom: 22px; margin: 0; padding: 8px 18px; transform: translateX(-50%); border: 1px solid var(--ink-faint); border-radius: 2px; background: var(--parchment); color: var(--ink); font-size: 0.88rem; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }

.perf { position: absolute; left: 14px; bottom: 14px; margin: 0; padding: 10px 12px; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 2px; background: rgba(10, 20, 24, 0.9); color: #c8f4e6; font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre; pointer-events: none; z-index: 5; }

.help { position: absolute; top: 14px; right: 14px; width: 232px; padding: 12px 14px; border: 1px solid var(--ink-faint); border-radius: 2px; background: linear-gradient(180deg, var(--parchment), var(--parchment-deep)); font-size: 0.78rem; pointer-events: none; color: var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
.help strong { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: var(--wine); }
.help .help-sub { display: block; margin-top: 10px; }
.help dl { display: grid; gap: 4px; margin: 8px 0 0; }
.help dl div { display: flex; justify-content: space-between; gap: 8px; }
.help dt { color: var(--ink); font-weight: 700; white-space: nowrap; }
.help dd { margin: 0; color: var(--ink-soft); text-align: right; }
.tone-neutral { color: #8a7a52 !important; }
.tone-wary { color: var(--navy) !important; }
.tone-hostile { color: #b8321f !important; }

/* 시작, 종료 화면: 바다 위에 펼친 해도 */
.screen { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 30%, rgba(30, 110, 120, 0.4), rgba(3, 16, 22, 0.92) 72%); }
.screen-light { background: rgba(3, 16, 22, 0.55); }
.panel { position: relative; width: min(600px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 30px 34px 28px; border: 1px solid rgba(58, 39, 22, 0.45); border-radius: 3px; background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 250, 235, 0.55), transparent 65%),
    radial-gradient(ellipse at 100% 100%, rgba(150, 110, 60, 0.28), transparent 45%),
    radial-gradient(ellipse at 0% 0%, rgba(150, 110, 60, 0.22), transparent 40%),
    var(--parchment);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 6px rgba(255, 250, 235, 0.25), inset 0 0 0 7px rgba(58, 39, 22, 0.25); text-align: center; color: var(--ink); }
.panel-small { width: min(360px, 100%); }
.compass { display: block; width: 64px; height: 64px; margin: 0 auto 6px; color: var(--wine); }
.panel h1, .panel h2 { margin: 0; font-family: var(--font-display); font-weight: 400; }
.panel h1 { font-size: clamp(2.6rem, 9vw, 3.9rem); color: var(--ink); letter-spacing: 0.02em; }
.panel h2 { font-size: 2rem; color: var(--ink); }
.panel p { margin: 12px 0 0; color: #4a3520; line-height: 1.75; }
.panel .lede { color: var(--ink); font-size: 1.03rem; }
.panel .small { color: var(--ink-soft); font-size: 0.82rem; }
.panel .best { color: var(--navy); font-weight: 700; }
.panel .keys { margin-top: 6px; }
.eyebrow { margin: 0 0 4px !important; color: var(--wine) !important; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.34em; }
.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 14px; margin: 18px 0 0; padding: 12px 16px; list-style: none; text-align: left; font-size: 0.86rem; color: var(--ink); border-top: 1px solid var(--ink-faint); border-bottom: 1px solid var(--ink-faint); }
.legend + .legend { margin-top: 0; border-top: none; }
.legend li { display: flex; align-items: center; gap: 8px; }
.swatch { flex: none; width: 14px; height: 14px; border-radius: 2px; border: 1px solid rgba(58, 39, 22, 0.4); }
.swatch.core { background: radial-gradient(circle, #c9a24a 35%, #4a2f19 40%); border-radius: 50%; }
.swatch.hull { background: repeating-linear-gradient(180deg, #a8743f 0 4px, #3a2412 4px 5px); }
.swatch.thruster { background: #efe4c8; }
.swatch.gun { background: #c08a3e; }
.swatch.cannon { background: #2b2622; }
.swatch.ring { background: transparent; border: 2px solid; }
.swatch.neutral { border-color: #b8a67a; }
.swatch.wary { border-color: var(--navy); }
.swatch.hostile { border-color: #c63a26; }
.primary { min-width: 170px; min-height: 50px; margin-top: 22px; padding: 10px 28px; border: 1px solid #5a1c12; border-radius: 3px; background: linear-gradient(180deg, #a83a28, #7a2418); color: #f7ecd2; font-family: var(--font-display); font-size: 1.45rem; letter-spacing: 0.08em; cursor: pointer; box-shadow: 0 4px 0 #4a140c, 0 8px 18px rgba(0, 0, 0, 0.3); }
.primary:hover { filter: brightness(1.08); }
.primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #4a140c; }

.audio-controls { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 6px; }
.sound { min-height: 36px; padding: 6px 12px; border: 1px solid var(--ink-faint); border-radius: 2px; background: var(--parchment); color: var(--ink-soft); font-size: 0.78rem; cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); }
.sound[aria-pressed="true"] { color: var(--ink); font-weight: 700; }

@media (max-width: 720px) {
  .help { display: none; }
  .hud { top: 14px; left: 16px; }
  .hint { white-space: normal; width: calc(100% - 28px); text-align: center; }
}