/* HUD blueprint: title chip + LIVE top left, round minimap + fullscreen top right, joystick bottom left, round action button bottom right,
   5-tab bar along the bottom (phone portrait) or down the right edge (short landscape). Loaded last so it wins over the older HUD rules. */
:root{--hud-bg:rgba(14,22,48,.72);--hud-line:rgba(233,184,92,.62);--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --sal:max(12px,env(safe-area-inset-left,0px));--sar:max(12px,env(safe-area-inset-right,0px));--mm:96px;--rsv:172px;--joy-b:84px}

/* shared look: navy glass, gold 1px edge, 16px corners (round for circles) */
.brand,.livebar,.dock,#fs-btn,#fs-rot,#fs-pop,#emote-btn,#act-btn,.top-ctrl .pill,.top-ctrl .icon-btn{background:var(--hud-bg);border:1px solid var(--hud-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#fs-btn,#fs-rot,#emote-btn,#act-btn{color:var(--ink)}
#fs-pop{border-radius:16px}

/* top left: title chip, LIVE line under it */
.top{display:block;height:0;padding:0;background:none}
.top::before{content:"";position:fixed;left:0;right:0;top:0;height:calc(var(--sat) + 76px);background:linear-gradient(to bottom,rgba(7,9,18,.6),rgba(7,9,18,0));pointer-events:none}
.brand{position:fixed;left:var(--sal);top:calc(var(--sat) + 12px);height:44px;flex-direction:row;align-items:center;gap:8px;padding:0 14px 0 6px;border-radius:16px;max-width:calc(100% - var(--sal) - var(--rsv))}
.brand-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:rgba(233,184,92,.14);color:var(--gold);font-style:normal}
.brand-ico svg{width:22px;height:22px}
.brand-txt{display:flex;flex-direction:column;min-width:0}
.brand .eyebrow{display:none}
.brand b{font-size:15px;line-height:1.3}
.livebar{left:var(--sal);top:calc(var(--sat) + 62px);transform:none;padding:3px 12px;gap:8px;border-radius:999px;font-size:12px;max-width:calc(100% - var(--sal) - var(--rsv))}
body.sheet-open.wide .livebar{left:var(--sal)}
.hint,.netnote{left:var(--sal);transform:none;top:calc(var(--sat) + 94px);max-width:calc(100% - var(--sal) - var(--rsv))}
.banner{left:var(--sal);transform:none;top:calc(var(--sat) + 94px);max-width:min(680px,calc(100% - var(--sal) - var(--rsv)))}

/* top right: round minimap, fullscreen button beside it, small controls column under it */
#minimap{position:fixed;z-index:8;right:var(--sar);top:calc(var(--sat) + 12px);width:var(--mm);height:var(--mm);border-radius:50%;border:1.5px solid var(--hud-line);box-shadow:0 4px 16px rgba(0,0,0,.4)}
#fs-btn{right:calc(var(--sar) + var(--mm) + 8px);top:calc(var(--sat) + 12px + (var(--mm) - 40px) / 2);width:40px;height:40px}
#fs-btn svg,#fs-rot svg{width:20px;height:20px}
#fs-pop{right:calc(var(--sar) + var(--mm) + 54px);top:calc(var(--sat) + 12px + (var(--mm) - 40px) / 2)}
#fs-rot{display:none;position:fixed;z-index:31;width:40px;height:40px;padding:0;border-radius:50%;place-items:center;cursor:pointer;touch-action:manipulation}
.top-ctrl{position:fixed;right:var(--sar);top:calc(var(--sat) + 12px + var(--mm) + 10px);flex-direction:column;flex-wrap:nowrap;align-items:flex-end;gap:6px}
body.gated .top-ctrl{top:calc(var(--sat) + 12px)}
body.gated #fs-rot{display:none!important}
@media (max-width:860px){.top-ctrl .pill .lbl{display:none}}

.places{top:calc(var(--sat) + 132px)}
/* world pill sits under the controls column (4 x 40px + gaps), not on top of it; the hint gives way to top subtitles */
#world-pill.world-pill{top:calc(var(--sat) + 12px + var(--mm) + 10px + 186px)}
body.subs-top #hint.hint{display:none}

/* bottom right: round action button, small reactions circle above it */
.fab{right:var(--sar);bottom:calc(var(--sab) + var(--joy-b));gap:8px;align-items:center}
#act-btn{width:64px;height:64px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-size:12px;line-height:1.2;border-width:1.5px;touch-action:manipulation}
#act-btn svg{width:30px;height:30px;color:var(--gold)}
#act-btn:active{transform:scale(.95)}
#emote-btn{width:44px;height:44px}
.emotes:not([hidden]){max-height:calc(var(--vvh,100vh) - var(--sat) - 400px)}

/* chat button and chat panel stack above the joystick, never on it */
#chat-fab{bottom:calc(var(--sab) + var(--joy-b) + 124px)}
@media (max-width:860px){
  #chat-fab,body.chat-open #chat-fab{bottom:calc(var(--sab) + var(--joy-b) + 124px)}
  .chat{bottom:calc(var(--sab) + var(--joy-b) + 172px)}
  .subs{bottom:calc(var(--sab) + 156px)}
}

/* bottom tab bar: five round icons, gold ring on the open one */
.dock{gap:0;padding:4px 6px;border-radius:16px}
.dock button{flex:1;min-width:0;padding:2px 4px;gap:2px;font-size:11px;border-radius:12px}
.dock button svg{width:40px;height:40px;padding:7px;border-radius:50%;border:1px solid rgba(239,232,216,.2);stroke-width:1.4}
.dock button[aria-pressed="true"]{background:none;color:var(--ink)}
.dock button[aria-pressed="true"] svg{border-color:var(--hud-line);background:rgba(233,184,92,.12)}
@media (max-width:860px){
  .dock{left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));transform:none;max-width:none;bottom:calc(var(--sab) + 8px);height:64px;justify-content:space-around}
}
@media (min-width:861px){.dock button{flex:none;min-width:64px}}

/* short landscape (phone on its side): tabs down the right edge, minimap left of them, controls in a row, no bottom bar */
@media (orientation:landscape) and (max-height:500px){
  :root{--mm:84px;--joy-b:12px;--rsv:352px}
  #minimap{right:calc(var(--sar) + 58px)}
  #fs-btn{right:calc(var(--sar) + 4px);top:calc(var(--sat) + 12px);width:40px;height:40px}
  #fs-pop{right:calc(var(--sar) + 52px);top:calc(var(--sat) + 12px)}
  body.is-fs #fs-rot{display:grid}
  #fs-rot{right:calc(var(--sar) + 4px);top:calc(var(--sat) + 58px)}
  .top-ctrl,body.gated .top-ctrl{flex-direction:row;align-items:center;top:calc(var(--sat) + 12px);right:calc(var(--sar) + 58px + var(--mm) + 8px)}
  .dock{left:auto;right:var(--sar);top:calc(var(--sat) + 106px);bottom:calc(var(--sab) + 12px);width:48px;height:auto;transform:none;flex-direction:column;justify-content:space-between;padding:4px 2px}
  .dock button{flex:1;min-height:0;min-width:0;padding:0;justify-content:center;gap:0}
  .dock button svg{width:30px;height:30px;padding:6px}
  .dock button span{font-size:9.5px;line-height:1.2}
  #world-pill.world-pill{right:calc(var(--sar) + 58px + var(--mm) + 8px);top:calc(var(--sat) + 62px)}
  /* hymn card: compact, left of the tab rail under the minimap, ending above the action column */
  #hymn-card.hymn-card{right:calc(var(--sar) + 58px);top:calc(var(--sat) + 106px);width:min(220px,30vw);padding:6px 10px 8px;max-height:calc(var(--vvh,100vh) - var(--sat) - 106px - 172px);overflow:auto}
  #hymn-card .hc-orn,#hymn-card .hc-next{display:none}
  #hymn-card .hc-h{font-size:13px}
  #hymn-card .hc-cur{font-size:13px;padding:5px 8px;margin-top:4px}
  /* walking subtitles: top left under LIVE, two short lines, never reaching the hymn card, the chat button or my character */
  body.subs-top .subs{top:calc(var(--sat) + 100px);bottom:auto;left:var(--sal);right:auto;transform:none;width:calc(100% - var(--sal) - 58px - min(220px,30vw) - 36px);max-width:520px;max-height:calc(var(--vvh,100vh) - var(--sat) - 100px - 186px);overflow:hidden;flex-direction:row;align-items:center;gap:8px}
  body.subs-top .subs p{font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .fab{right:calc(var(--sar) + 60px);bottom:calc(var(--sab) + 12px)}
  #act-btn{width:56px;height:56px;font-size:11px}
  #act-btn svg{width:26px;height:26px}
  .emotes:not([hidden]){max-height:calc(var(--vvh,100vh) - var(--sat) - 150px)}
  .subs{bottom:calc(var(--sab) + 14px);left:50%;right:auto;transform:translateX(-50%);width:min(520px,calc(100% - 400px))}
  .subs p{font-size:14px}
  .sheet{left:auto;right:calc(var(--sar) + 58px);top:auto;bottom:calc(var(--sab) + 12px);width:min(440px,calc(100vw - 80px));height:min(calc(var(--vvh,100dvh) - var(--sat) - 100px),340px)}
}

/* D2 선 아이콘 (js/icons.js ico()) */
.ic{width:1em;height:1em;vertical-align:-.14em;flex:none;display:inline-block}