:root { --ink: #1d1a14; --paper: rgba(250, 245, 232, 0.94); --gold: #b8892b; --red: #9a3b2c; --green: #1f6f5a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; touch-action: manipulation; -webkit-user-select: none; user-select: none; background: #0b0f14; font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; color: var(--ink); }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
#loading { position: fixed; inset: 0; display: grid; place-items: center; color: #f3e8c8; font-size: 22px; background: #0b0f14; z-index: 50; }

#title { position: fixed; top: 14px; left: 16px; background: var(--paper); border-left: 6px solid var(--red); padding: 10px 16px; border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,.35); max-width: 420px; }
#title h1 { margin: 0; font-size: 20px; letter-spacing: 1px; }
#title p { margin: 4px 0 0; font-size: 12px; opacity: .8; }
#mode { margin-top: 6px; font-size: 12px; color: var(--green); font-weight: 600; }

#crosshair { position: fixed; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; pointer-events: none; box-shadow: 0 0 6px rgba(0,0,0,.6); }
#look-label { position: fixed; left: 50%; top: calc(50% + 18px); transform: translateX(-50%); color: #fff6dc; font-size: 15px; font-weight: 700; text-shadow: 0 2px 6px #000; pointer-events: none; letter-spacing: 1px; }

#map-wrap { position: fixed; top: 14px; right: 16px; background: var(--paper); padding: 8px; border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,.35); text-align: center; }
#map-wrap.big { transform: scale(1.9); transform-origin: top right; }
#minimap { display: block; border-radius: 4px; cursor: pointer; }
#coords { font-size: 11px; margin-top: 4px; font-variant-numeric: tabular-nums; }
#map-wrap .hint { font-size: 10px; opacity: .6; }

#tour { position: fixed; right: 16px; top: 440px; bottom: 16px; width: 200px; background: var(--paper); border-radius: 6px; padding: 10px 6px 10px 12px; overflow: auto; box-shadow: 0 4px 18px rgba(0,0,0,.35); }
#tour h2 { font-size: 13px; margin: 0 0 6px; color: var(--red); }
#tour ul { list-style: none; margin: 0; padding: 0; }
#tour li { font-size: 12.5px; padding: 5px 6px; border-radius: 4px; cursor: pointer; }
#tour li:hover { background: rgba(184,137,43,.18); }
#tour li.active { background: var(--gold); color: #fff; font-weight: 700; }

#panel { position: fixed; left: 16px; bottom: 16px; width: min(560px, calc(100vw - 260px)); background: var(--paper); border-radius: 8px; padding: 14px 18px; box-shadow: 0 6px 26px rgba(0,0,0,.4); border-top: 5px solid var(--gold); transition: opacity .4s, transform .4s; max-height: 46vh; display: flex; flex-direction: column; }
#panel.idle { opacity: 0; transform: translateY(20px); pointer-events: none; }
#panel .head { display: flex; align-items: baseline; gap: 12px; }
#panel h2 { flex: 1; }
#btn-collapse { flex: none; align-self: center; }
#panel.collapsed { padding: 7px 14px; max-height: none; }
#panel.collapsed .head { cursor: pointer; align-items: center; }
#panel.collapsed #panel-hanja { font-size: 18px; }
#panel.collapsed h2 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#panel.collapsed #panel-text, #panel.collapsed .foot { display: none; }
#panel-hanja { font-size: 26px; color: var(--red); font-weight: 700; font-family: serif; }
#panel h2 { margin: 0; font-size: 18px; }
#panel-text { font-size: 14px; line-height: 1.65; margin: 8px 0 10px; overflow: auto; }
#panel .foot { display: flex; align-items: center; gap: 8px; font-size: 11px; opacity: .9; }
#panel .foot span { flex: 1; }
#panel button, #btn-help, #btn-collapse { border: 1px solid var(--gold); background: #fff; color: var(--ink); border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 12px; }
#panel button.on { background: var(--green); color: #fff; border-color: var(--green); }

#help { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; z-index: 40; cursor: pointer; }
#help.hidden { display: none; }
#help .card { background: var(--paper); padding: 22px 28px; border-radius: 10px; max-width: 560px; border-top: 6px solid var(--red); }
#help h2 { margin: 0 0 10px; }
#help li { margin: 6px 0; font-size: 14px; line-height: 1.5; }
#help .small { font-size: 12px; opacity: .6; text-align: right; margin: 8px 0 0; }

@media (max-width: 900px) {
  #tour { display: none; }
  #title { max-width: 60vw; }
  #panel { width: calc(100vw - 32px); max-height: 38vh; }
}

#palace-select { margin-top: 6px; display: flex; gap: 6px; }
#palace-select a { font-size: 12px; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--gold); color: var(--ink); text-decoration: none; }
#palace-select a.on { background: var(--red); color: #fff; border-color: var(--red); }

/* ── touch devices (phones / tablets) ── */
.touch-only { display: none; }
body.touch .touch-only { display: block; }
body.touch .desktop-only { display: none; }

#touch-ui { position: fixed; inset: 0; pointer-events: none; z-index: 30; --safe-b: env(safe-area-inset-bottom, 0px); }
#touch-ui[hidden] { display: none; }
#joy { position: absolute; left: 22px; bottom: calc(26px + var(--safe-b)); width: 132px; height: 132px; border-radius: 50%; background: rgba(250,245,232,.22); border: 2px solid rgba(250,245,232,.65); pointer-events: auto; touch-action: none; box-shadow: 0 2px 12px rgba(0,0,0,.35); }
#joy .knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(250,245,232,.9); border: 2px solid var(--gold); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
#touch-btns { position: absolute; right: 16px; bottom: calc(26px + var(--safe-b)); display: grid; grid-template-columns: repeat(2, auto); justify-content: end; gap: 8px; pointer-events: auto; }
#touch-btns button { min-width: 96px; padding: 10px 12px; font-size: 14px; font-weight: 600; border-radius: 22px; border: 1px solid var(--gold); background: var(--paper); color: var(--ink); touch-action: manipulation; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
#touch-btns button.on { background: var(--green); color: #fff; border-color: var(--green); }
#touch-btns button:active { background: var(--gold); color: #fff; }
#touch-btns .fly-only { display: none; }
body.fly #touch-btns .fly-only { display: block; }

body.touch #tour { display: none; }
body.touch.tour-open #panel { visibility: hidden; }
body.touch.tour-open #tour { display: block; position: fixed; left: 16px; right: 16px; top: auto; bottom: calc(192px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: 42vh; z-index: 36; }
body.touch #tour li { font-size: 15px; padding: 9px 8px; }
body.touch #panel { bottom: calc(192px + env(safe-area-inset-bottom, 0px)); left: 16px; width: calc(100vw - 32px); max-height: 30vh; padding: 10px 14px; }
body.touch #panel button, body.touch #btn-help { padding: 7px 10px; font-size: 13px; }
/* collapsed title bar sits just above the button grid (2 rows walking, 3 rows flying) */
body.touch #panel.collapsed { bottom: calc(134px + env(safe-area-inset-bottom, 0px)); left: 166px; width: calc(100vw - 182px); padding: 6px 10px; gap: 6px; }
body.touch #panel.collapsed .head { gap: 6px; }
body.touch #panel.collapsed #panel-hanja { font-size: 15px; }
body.touch #panel.collapsed h2 { font-size: 13px; }
body.touch.fly #panel.collapsed { bottom: calc(184px + env(safe-area-inset-bottom, 0px)); }
body.touch #map-wrap .hint { display: none; }
body.touch #title { padding: 8px 12px; }
body.touch #title h1 { font-size: 17px; }
body.touch #palace-select a { padding: 5px 10px; }

@media (max-width: 600px) {
  #title { max-width: calc(100vw - 150px); }
  #title p { display: none; }
  #palace-select { flex-wrap: wrap; }
  #minimap { width: 110px; height: 180px; }
  #map-wrap { padding: 5px; }
  #panel-text { font-size: 13px; line-height: 1.55; }
  #help .card { max-width: calc(100vw - 32px); padding: 16px 18px; max-height: 90vh; overflow: auto; }
  #help li { font-size: 13px; }
}

/* phone held sideways: little height, plenty of width */
@media (max-height: 500px) {
  #title { padding: 6px 10px; }
  #title p { display: none; }
  #minimap { width: 80px; height: 131px; }
  #map-wrap { padding: 4px; }
  #joy { width: 104px; height: 104px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  #joy .knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  #touch-btns { grid-template-columns: repeat(3, auto); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  #touch-btns button { min-width: 0; padding: 7px 10px; font-size: 12px; }
  body.touch #panel { left: 150px; width: calc(100vw - 500px); bottom: 14px; max-height: 50vh; }
  body.touch #panel.collapsed, body.touch.fly #panel.collapsed { bottom: 14px; left: 150px; width: calc(100vw - 500px); }
  body.touch.tour-open #tour { left: 150px; right: 350px; bottom: 14px; max-height: 60vh; }
}