:root {
  color-scheme: dark;
  font-family: Inter, Pretendard, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #101722; }
#application { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.pointer-lock-hint {
  position: fixed; z-index: 11; left: 50%; bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  transform: translateX(-50%); margin: 0; max-width: min(520px, calc(100vw - 32px)); padding: 7px 12px;
  border: 1px solid rgba(178,220,239,.34); border-radius: 999px; background: rgba(10,22,34,.78);
  color: #d6ebf9; font-size: 12px; font-weight: 750; text-align: center; pointer-events: none;
  backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0,0,0,.24);
}
.pointer-lock-hint[hidden] { display: none !important; }
.pointer-lock-hint[data-state="FALLBACK"] { color: #ffdf90; border-color: rgba(255,223,144,.45); }
@media (pointer: coarse) { .pointer-lock-hint { display: none !important; } }
/* Biryong place guidance can return directly to the desktop NPC interaction.
   Keep both instructions readable without moving Campus or touch controls. */
@media (pointer: fine) and (min-width: 700px) {
  body[data-world-region="BIRYONG_REALM"]:has(> #context-action:not([hidden])) > .pointer-lock-hint {
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px));
  }
}
.campus-location-stack {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  z-index: 10;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  pointer-events: none;
}
#hud {
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(10,16,25,.72);
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.brand { font-weight: 800; letter-spacing: .04em; }
.brand span { opacity: .6; font-size: .8em; margin-left: 6px; }
.return-home { display: inline-block; margin-top: 8px; color: #ffde86; font-size: 12px; font-weight: 700; pointer-events: auto; }
.return-home:focus-visible { outline: 2px solid #ffde86; outline-offset: 4px; }
.status { display: flex; gap: 14px; margin-top: 6px; font-size: 12px; opacity: .9; }
.hint { margin-top: 8px; font-size: 11px; opacity: .62; }
.map-credit { margin-top: 6px; font-size: 10px; color: #a8c7d5; }
.map-credit a { color: #ffde86; pointer-events: auto; }
.tour {
  z-index: 10; width: min(240px, calc(100vw - 32px)); padding: 10px 12px;
  border: 1px solid #f6d78a66; border-radius: 12px;
  background: #142e40dd; color: white; pointer-events: none;
}
.tour-heading { font-size: 12px; color: #ffdfa3; display: flex; justify-content: space-between; }
.tour-objective { font-size: 14px; font-weight: 800; margin-top: 4px; }
.tour-bearing { font-size: 12px; margin-top: 3px; color: #d6ebf9; }
.tour button { pointer-events: auto; border: 1px solid #ffd486; background: #263e52; color: white; border-radius: 8px; padding: 5px 8px; margin-top: 7px; }
.tour button[hidden] { display: none; }
#joystick {
  position: fixed;
  left: max(24px, env(safe-area-inset-left));
  bottom: max(28px, env(safe-area-inset-bottom));
  width: 116px; height: 116px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  display: none; touch-action: none; z-index: 12;
}
#joystick-knob {
  position: absolute; left: 36px; top: 36px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.72); transform: translate(0,0);
}
#run, #jump {
  position: fixed;
  right: max(28px, env(safe-area-inset-right));
  width: 76px; height: 76px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: white; font-weight: 800;
  display: none; z-index: 12; touch-action: none;
  -webkit-user-select: none; user-select: none;
}
#jump { bottom: max(42px, env(safe-area-inset-bottom)); }
#run { bottom: max(130px, calc(env(safe-area-inset-bottom) + 88px)); font-size: 13px; }
body[data-movement-state="MOUNT_FLIGHT"] #jump {
  bottom: max(218px, calc(env(safe-area-inset-bottom) + 176px));
}
body[data-movement-state="MOUNT_FLIGHT"] #descend {
  bottom: max(42px, env(safe-area-inset-bottom));
}
#run[aria-pressed="true"] { background: rgba(255, 195, 77, .45); border-color: rgba(255, 221, 148, .85); }
body.joystick-right #joystick { left: auto; right: max(24px, env(safe-area-inset-right)); }
body.joystick-right #run, body.joystick-right #jump { right: auto; left: max(28px, env(safe-area-inset-left)); }
.nameplate {
  position: fixed; z-index: 9; transform: translate(-50%, -100%);
  border: 1px solid #d4ecff77; border-radius: 999px; padding: 4px 9px;
  color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap;
  background: #122b46de; text-shadow: 0 1px 3px #000; pointer-events: none;
}
#online-status[data-state="ONLINE"] { color: #8ef0b0; }
#online-status[data-state="RECONNECTING"], #online-status[data-state="CONNECTING"] { color: #ffd98a; }
.remote-nameplate { z-index: 8; background: #2a3f58d0; }
.staff-badge {
  display: inline-flex; align-items: center; margin-left: 5px; padding: 1px 5px;
  border: 1px solid #ffe8a3; border-radius: 999px; background: #ffd86a; color: #362600;
  font-size: 9px; font-weight: 900; line-height: 1.35; letter-spacing: .04em;
  text-shadow: none; vertical-align: 1px;
}
.identity-actions {
  position: fixed; right: max(16px, env(safe-area-inset-right));
  top: max(16px, env(safe-area-inset-top)); z-index: 13;
  display: grid; gap: 8px;
}
.identity-actions button { min-height: 44px; touch-action: manipulation; }
.identity-actions button {
  border: 1px solid #b2dcef99; border-radius: 12px; padding: 10px 12px;
  background: #193650ed; color: white; font-weight: 800; cursor: pointer;
}
.identity-actions button[aria-pressed="true"] { background: #3779a8; }
.view-settings {
  position: fixed; z-index: 19; right: max(16px, env(safe-area-inset-right));
  top: max(216px, calc(env(safe-area-inset-top) + 200px));
  width: min(270px, calc(100vw - 32px)); padding: 16px;
  max-height: calc(100dvh - max(216px, calc(env(safe-area-inset-top) + 200px)) - 24px);
  overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid #a5cee2; border-radius: 14px; background: #10283cf5;
  color: #eef8ff; box-shadow: 0 8px 28px #0006;
}
.view-settings[hidden] { display: none; }
.view-settings h2 { font-size: 16px; margin: 0 30px 12px 0; }
.view-settings label { display: block; font-size: 13px; margin-bottom: 6px; }
.view-settings select { width: 100%; min-height: 44px; padding: 8px; border-radius: 8px; font: inherit; }
.view-settings p { font-size: 12px; line-height: 1.5; color: #bfd7e7; margin-bottom: 0; }
.view-settings p + label { margin-top: 12px; }
.desktop-camera-settings { display: none; margin-top: 12px; }
.camera-invert-option {
  display: flex !important; align-items: center; gap: 8px; min-height: 40px;
  margin: 8px 0 0 !important; cursor: pointer;
}
.camera-invert-option input { width: 18px; height: 18px; margin: 0; }
#mouse-look-hint { margin-top: 4px; }
@media (pointer: fine) {
  .desktop-camera-settings { display: block; }
}
#view-settings-status { color: #ffdf90; }
.profile-panel {
  position: fixed; z-index: 20; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: min(360px, calc(100vw - 32px));
  border: 1px solid #a5cee2; border-radius: 18px; padding: 22px;
  background: #10283cf5; box-shadow: 0 16px 54px #0009;
  color: #eef8ff;
}
.profile-panel[hidden], #descend[hidden], .nameplate[hidden] { display: none !important; }
.profile-panel h2 { margin: 0 28px 12px 0; font-size: 19px; }
.profile-panel label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.profile-close { position: absolute; top: 12px; right: 16px; border: 0; background: none; color: white; font-size: 26px; cursor: pointer; }
.profile-note { color: #acc3d1; font-size: 12px; line-height: 1.5; }
#descend {
  position: fixed; z-index: 12; right: max(28px, env(safe-area-inset-right));
  bottom: max(42px, env(safe-area-inset-bottom));
  width: 76px; height: 76px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: white;
  font-weight: 800; touch-action: none; -webkit-user-select: none; user-select: none;
}
#jump:disabled, #descend:disabled { opacity: .45; }
body.joystick-right #descend { right: auto; left: max(28px, env(safe-area-inset-left)); }
/* Social S1-B1 emotes: right column above RUN/JUMP/descend; bottom centre stays free for chat. */
#emote-toggle {
  position: fixed; z-index: 12; right: max(28px, env(safe-area-inset-right));
  bottom: max(290px, calc(env(safe-area-inset-bottom) + 248px));
  width: 76px; height: 56px; border-radius: 16px; display: grid; place-items: center; gap: 0;
  border: 1px solid #b2dcef99; background: #193650ed; color: white; font-size: 22px; line-height: 1;
  cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
#emote-toggle span { font-size: 11px; font-weight: 800; }
#emote-toggle[aria-expanded="true"] { background: #3779a8; }
#emote-toggle[hidden], .emote-menu[hidden] { display: none !important; }
.emote-menu {
  position: fixed; z-index: 13; right: max(28px, env(safe-area-inset-right));
  bottom: max(354px, calc(env(safe-area-inset-bottom) + 312px));
  display: flex; gap: 6px; padding: 6px; border-radius: 16px;
  background: #122b46ee; border: 1px solid #b2dcef66;
}
.emote-option {
  width: 52px; height: 58px; display: grid; place-items: center; gap: 2px; padding: 4px 2px;
  border: 1px solid #b2dcef55; border-radius: 12px; background: #1d3f5f; color: white;
  cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.emote-option:focus-visible, #emote-toggle:focus-visible { outline: 2px solid #ffd98a; outline-offset: 2px; }
.emote-icon { font-size: 20px; line-height: 1; }
.emote-label { font-size: 11px; font-weight: 800; line-height: 1.1; text-align: center; word-break: keep-all; }
.emote-option.emote-blocked { background: #5a3a2a; }
.emote-status {
  position: fixed; z-index: 13; right: max(28px, env(safe-area-inset-right));
  bottom: max(420px, calc(env(safe-area-inset-bottom) + 378px)); margin: 0;
  max-width: 220px; color: #ffdf90; font-size: 12px; text-shadow: 0 1px 3px #000; pointer-events: none;
}
.profile-link { color: #ffd98a; font-weight: 800; }
body.joystick-right #emote-toggle, body.joystick-right .emote-menu, body.joystick-right .emote-status { right: auto; left: max(28px, env(safe-area-inset-left)); }
@media (pointer: fine) { #descend:not([hidden]) { display: block; } }
@media (pointer: coarse) {
  #joystick, #jump, #run { display: block; }
  .hint { max-width: 290px; }
}
@media (max-width: 560px) {
  .view-settings { top: max(320px, calc(env(safe-area-inset-top) + 304px)); max-height: calc(100dvh - 350px); overflow: auto; width: min(250px, calc(100vw - 32px)); }
  #hud { max-width: calc(100vw - 165px); }
  .brand { font-size: 12px; }
  .status { flex-direction: column; gap: 2px; }
  .hint { display: none; }
  .map-credit { font-size: 9px; max-width: 170px; }
  .identity-actions { top: max(18px, env(safe-area-inset-top)); }
  .identity-actions button { font-size: 12px; padding: 8px; }
  .tour { width: min(205px, calc(100vw - 155px)); font-size: 11px; }
  .tour-objective { font-size: 12px; }
  .tour-bearing { font-size: 11px; }
}
/* Social S1-B2 local chat: mobile keeps the compact social cluster; desktop P2 uses a lower-left preview. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chat { position: static; }
#chat-toggle {
  position: fixed; z-index: 12; left: 50%; transform: translateX(-50%);
  bottom: max(42px, env(safe-area-inset-bottom)); width: 64px; height: 56px;
  display: grid; place-items: center; border-radius: 16px; border: 1px solid #b2dcef99;
  background: #193650ed; color: white; font-size: 20px; line-height: 1; cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
#chat-toggle span { font-size: 11px; font-weight: 800; }
#chat-toggle[aria-expanded="true"] { background: #3779a8; }
#chat-toggle.chat-disabled { opacity: .55; }
.chat-feed, .chat-form, .chat-hint {
  position: fixed; z-index: 12;
  left: max(16px, env(safe-area-inset-left)); right: calc(max(28px, env(safe-area-inset-right)) + 88px);
}
.chat-form { bottom: calc(max(156px, env(safe-area-inset-bottom) + 114px) + var(--keyboard-inset, 0px)); display: flex; gap: 6px; }
.chat-form[hidden], .chat-feed[hidden], .chat-bubble[hidden] { display: none !important; }
.chat-form input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid #abc8d6; font: inherit; font-size: 16px; }
.chat-form button { height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid #b2dcef99; background: #3779a8; color: white; font-weight: 800; }
.chat-feed {
  bottom: calc(max(228px, env(safe-area-inset-bottom) + 186px) + var(--keyboard-inset, 0px));
  margin: 0; padding: 6px 8px; list-style: none; max-height: 120px; overflow: hidden;
  border-radius: 12px; background: #0c1d2fb8; color: white; font-size: 13px; line-height: 1.45; pointer-events: none;
  opacity: 1; transition: opacity .34s ease, background-color .2s ease, max-height .2s ease;
}
.chat-feed li { overflow-wrap: anywhere; }
.chat-name { font-weight: 800; color: #9fd9ff; margin-right: 6px; }
.chat-self .chat-name { color: #ffd98a; }
.chat-hint { bottom: calc(max(206px, env(safe-area-inset-bottom) + 164px) + var(--keyboard-inset, 0px)); margin: 0; color: #ffdf90; font-size: 12px; text-shadow: 0 1px 3px #000; pointer-events: none; }
.chat-bubble {
  position: fixed; z-index: 9; transform: translate(-50%, -100%); max-width: min(220px, 60vw);
  padding: 6px 10px; border-radius: 12px; background: #ffffffee; color: #172430; font-size: 13px; font-weight: 700;
  line-height: 1.35; overflow-wrap: anywhere; box-shadow: 0 2px 8px #0005; pointer-events: none;
}
@media (pointer: coarse) {
  /* P4 mobile Chat: keep the expanded composer above the 48px Social Cluster.
     Preview stays at its existing height; only the open-chat layer moves upward. */
  .chat-form {
    bottom: calc(max(218px, env(safe-area-inset-bottom) + 176px) + var(--keyboard-inset, 0px));
  }
  .chat-feed[data-mode="EXPANDED"] {
    bottom: calc(max(290px, env(safe-area-inset-bottom) + 248px) + var(--keyboard-inset, 0px));
  }
  .chat-hint {
    bottom: calc(max(268px, env(safe-area-inset-bottom) + 226px) + var(--keyboard-inset, 0px));
  }
}
@media (pointer: fine) and (min-width: 700px) {
  .chat-feed, .chat-form, .chat-hint {
    left: max(20px, env(safe-area-inset-left)); right: auto; transform: none;
    width: min(430px, calc(100vw - 300px));
  }
  .chat-feed {
    bottom: max(68px, calc(env(safe-area-inset-bottom) + 60px));
    max-height: 118px;
    padding: 4px 6px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(7,19,30,.48) 0%, rgba(7,19,30,.22) 66%, rgba(7,19,30,0) 100%);
    text-shadow: 0 1px 4px rgba(0,0,0,.92);
  }
  .chat-feed[data-mode="PREVIEW"][data-faded="true"] { opacity: 0; }
  .chat-feed[data-mode="PREVIEW"][data-faded="false"] { opacity: 1; }
  .chat-feed[data-mode="EXPANDED"] {
    bottom: max(142px, calc(env(safe-area-inset-bottom) + 134px));
    max-height: 220px;
    padding: 10px 11px;
    overflow: hidden;
    background: rgba(8,24,38,.88);
    border: 1px solid rgba(178,220,239,.18);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    text-shadow: none;
    opacity: 1;
  }
  .chat-form {
    bottom: max(68px, calc(env(safe-area-inset-bottom) + 60px));
    gap: 7px;
  }
  .chat-hint {
    bottom: max(118px, calc(env(safe-area-inset-bottom) + 110px));
  }
}
/* P1 unified contextual action: NPC dialogue, mount and environment actions share one slot. */
#context-action {
  position: fixed; z-index: 14; left: 50%; transform: translateX(-50%);
  bottom: max(106px, calc(env(safe-area-inset-bottom) + 64px));
  width: fit-content; min-width: 112px; max-width: min(210px, calc(100vw - 196px)); min-height: 50px;
  padding: 10px 16px; border-radius: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid #8fe2d3; background: #196d65ee; color: white;
  font-weight: 850; font-size: 14px; line-height: 1.2; text-align: center;
  box-shadow: 0 5px 18px #0005; cursor: pointer; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
#context-action[hidden] { display: none !important; }
#context-action:disabled { opacity: .58; cursor: not-allowed; }
#context-action[aria-pressed="true"] { background: #315b6fee; border-color: #b6e8ff; }
#context-action:focus-visible { outline: 2px solid #ffdf90; outline-offset: 3px; }
@media (pointer: fine) {
  #context-action[data-shortcut]::before { content: attr(data-shortcut) " · "; color: #d9fff7; }
}
@media (max-width: 420px) {
  #context-action { min-width: 112px; max-width: min(180px, calc(100vw - 196px)); padding-inline: 14px; font-size: 13px; }
}
/* Transport slot (M): mount / dismount is a movement control, not a contextual-dialogue action.
   Touch keeps it in a stable action rail directly above RUN. Desktop keeps the same M authority in a
   compact right-bottom slot, while F interaction remains bottom-centre. */
#transport-action {
  position: fixed; z-index: 14; left: auto; right: max(28px, env(safe-area-inset-right)); transform: none;
  bottom: max(218px, calc(env(safe-area-inset-bottom) + 176px));
  width: 76px; min-width: 76px; max-width: 76px; min-height: 56px;
  padding: 8px 7px; border-radius: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid #9cc7ff; background: #27507aee; color: white;
  font-weight: 850; font-size: 13px; line-height: 1.15; text-align: center;
  box-shadow: 0 5px 18px #0005; cursor: pointer; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
#transport-action[hidden] { display: none !important; }
#transport-action:disabled { opacity: .58; cursor: not-allowed; }
#transport-action[aria-pressed="true"] { background: #3a4f7eee; border-color: #cfe0ff; }
#transport-action:focus-visible { outline: 2px solid #ffdf90; outline-offset: 3px; }
@media (pointer: fine) {
  #transport-action[data-shortcut]::before { content: attr(data-shortcut) " · "; color: #dfeaff; }
}
/* Touch action rail: JUMP → RUN → TRANSPORT. The slot never moves when F interaction appears/disappears. */
@media (pointer: coarse) {
  #transport-action,
  #context-action[hidden] + #transport-action {
    left: auto; right: max(28px, env(safe-area-inset-right)); transform: none;
    bottom: max(218px, calc(env(safe-area-inset-bottom) + 176px));
    width: 76px; min-width: 76px; max-width: 76px; min-height: 56px; padding-inline: 7px;
  }
  body[data-movement-state="MOUNT_FLIGHT"] #transport-action,
  body[data-movement-state="MOUNT_FLIGHT"] #context-action[hidden] + #transport-action {
    bottom: max(306px, calc(env(safe-area-inset-bottom) + 264px));
  }
  body.joystick-right #transport-action,
  body.joystick-right #context-action[hidden] + #transport-action {
    left: max(28px, env(safe-area-inset-left)); right: auto;
  }
}
/* Social S1-C2: one-line feedback when Follow stops by itself (text only, never a button). */
.follow-status {
  position: fixed; z-index: 14; left: 50%; transform: translateX(-50%);
  bottom: max(166px, calc(env(safe-area-inset-bottom) + 124px)); margin: 0;
  max-width: calc(100vw - 32px); padding: 6px 12px; border-radius: 12px; background: #0f2233d9;
  color: #ffdf90; font-size: 13px; font-weight: 700; text-align: center; pointer-events: none;
}
.follow-status[hidden] { display: none; }
/* P1c0 · phones: the status line sits above the social cluster (48px buttons), the RUN button and a
   visible transport button, for either joystick side (one fixed joystick size). */
@media (pointer: coarse) and (max-width: 560px) {
  .follow-status { bottom: max(212px, calc(env(safe-area-inset-bottom) + 184px)); }
  body:has(#transport-action:not([hidden])) .follow-status {
    bottom: max(286px, calc(env(safe-area-inset-bottom) + 258px));
  }
  body[data-movement-state="MOUNT_FLIGHT"]:has(#transport-action:not([hidden])) .follow-status {
    bottom: max(374px, calc(env(safe-area-inset-bottom) + 346px));
  }
}
/* Club Room P0: short fade while switching between the campus and a room scene. */
.space-fade { position: fixed; inset: 0; z-index: 60; background: #000; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.space-fade.on { opacity: 1; }
.space-fade[hidden] { display: none; }
/* Inside a room: the campus tour compass points at outdoor goals, so it steps aside. */
body[data-space] #tour { display: none; }
/* Social S1-C1: tappable remote nameplates, compact player card and friends panel. */
.nameplate.inspectable { pointer-events: auto; cursor: pointer; padding: 6px 11px; }
.nameplate.inspectable:focus-visible { outline: 2px solid #ffd98a; outline-offset: 2px; }
.player-card {
  position: fixed; z-index: 21; left: 50%; top: max(96px, calc(env(safe-area-inset-top) + 80px)); transform: translateX(-50%);
  width: min(300px, calc(100vw - 32px)); max-height: calc(100dvh - 140px); overflow: auto; padding: 14px 14px 12px;
  border: 1px solid #a5cee2; border-radius: 16px; background: #10283cf5; color: #eef8ff; box-shadow: 0 12px 40px #0009;
}
.player-card[hidden], .friend-panel[hidden], #open-friends[hidden] { display: none !important; }
.nearby-panel {
  position: fixed; z-index: 22; left: max(16px, env(safe-area-inset-left));
  bottom: max(215px, calc(env(safe-area-inset-bottom) + 175px));
  width: min(300px, calc(100vw - 32px)); max-height: min(55dvh, 420px); overflow: auto;
  padding: 14px; border: 1px solid #a5cee2; border-radius: 16px;
  background: #10283cf5; color: #eef8ff; box-shadow: 0 12px 40px #0009;
}
.nearby-panel[hidden], .accompany-panel[hidden] { display: none !important; }
.nearby-head { display: flex; justify-content: space-between; align-items: center; }
.nearby-head h2 { margin: 0; font-size: 17px; }
.nearby-list { display: grid; gap: 6px; margin: 10px 0; }
.nearby-row { display: flex; justify-content: space-between; gap: 8px; text-align: left; }
.nearby-row span, .nearby-empty, .nearby-hint { color: #b7ccda; font-size: 12px; }
.nearby-panel button, .accompany-panel button, .player-card-proposal button, .player-card-proposal select {
  min-height: 38px; padding: 6px 10px; border: 1px solid #b2dcef99;
  border-radius: 10px; background: #1d3f5f; color: #fff; cursor: pointer;
}
.nearby-close { font-size: 20px; }
.nearby-wave { width: 100%; }
.nearby-hint { margin: 6px 0 0; }
.player-card-proposal { display: grid; gap: 7px; margin-top: 10px; }
.player-card-proposal label { display: grid; gap: 5px; font-size: 12px; }
.accompany-panel {
  position: fixed; z-index: 18; left: 50%; transform: translateX(-50%);
  bottom: max(112px, calc(env(safe-area-inset-bottom) + 72px));
  width: min(360px, calc(100vw - 28px)); padding: 9px 12px; text-align: center;
  border: 1px solid #a5cee2; border-radius: 13px; background: #10283cf5; color: #eef8ff;
  box-shadow: 0 8px 24px #0008;
}
.accompany-panel strong { display: block; font-size: 13px; }
.accompany-actions { display: flex; justify-content: center; gap: 7px; margin-top: 7px; }
.accompany-panel p { margin: 6px 0 0; color: #ffdf90; font-size: 12px; }
.player-card-head { display: flex; gap: 10px; align-items: center; margin-right: 28px; }
.player-card-avatar, .friend-avatar { font-size: 26px; line-height: 1; }
.player-card-names { display: grid; min-width: 0; }
.player-card-nickname { font-size: 17px; overflow-wrap: anywhere; }
.player-card-title { font-size: 12px; color: #acc3d1; overflow-wrap: anywhere; }
.player-card-close { position: absolute; right: 10px; top: 8px; border: 0; background: none; color: #eef8ff; font-size: 22px; cursor: pointer; }
.player-card-status, .player-card-hint, .friend-hint { margin: 8px 0 0; font-size: 12px; color: #ffdf90; min-height: 16px; }
.player-card-actions, .player-card-report { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.player-card button:not(.player-card-close), .friend-row button {
  min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid #b2dcef99; background: #1d3f5f; color: white; font-weight: 800; cursor: pointer;
}
.player-card-report button { background: #5a3a2a; }
.friend-panel { max-height: calc(100dvh - 48px); overflow: auto; }
.friend-panel-head { display: flex; justify-content: space-between; align-items: center; }
.friend-panel-head h2 { margin: 0; }
.friend-section h3 { font-size: 13px; margin: 14px 0 6px; color: #acc3d1; }
.friend-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #ffffff14; }
.friend-names { display: grid; flex: 1; min-width: 0; }
.friend-names strong { overflow-wrap: anywhere; }
.friend-names small { color: #acc3d1; }
.friend-empty { font-size: 12px; color: #8fa6b4; margin: 4px 0; }


/* Campus HUD refresh · compact top information, menu drawer, one-line objective, social cluster. */
.campus-topbar {
  position: fixed;
  z-index: 16;
  top: max(10px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  height: 50px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.tour[hidden] { display: none; }
.campus-topbar .return-home,
.hud-menu-toggle,
.location-chip { pointer-events: auto; }
.campus-topbar .return-home {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 1px solid rgba(178,220,239,.48);
  border-radius: 14px;
  background: rgba(16,40,60,.82);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  backdrop-filter: blur(8px);
}
.location-chip {
  justify-self: center;
  min-width: 0;
  max-width: min(310px, 100%);
  height: 42px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid rgba(178,220,239,.38);
  border-radius: 999px;
  background: rgba(16,40,60,.78);
  color: #fff;
  backdrop-filter: blur(8px);
}
.location-chip strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.world-time-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding-left: 7px;
  border-left: 1px solid rgba(178,220,239,.28);
  color: #dcecf5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
}
.world-time-chip[hidden] { display: none !important; }
.hud-menu-toggle {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(178,220,239,.48);
  border-radius: 14px;
  background: rgba(16,40,60,.82);
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.hud-menu-toggle[aria-expanded="true"] { background: #3779a8; }

.identity-actions {
  top: max(66px, calc(env(safe-area-inset-top) + 56px));
  right: max(12px, env(safe-area-inset-right));
  width: min(220px, calc(100vw - 24px));
  padding: 10px;
  gap: 6px;
  border: 1px solid rgba(178,220,239,.55);
  border-radius: 16px;
  background: rgba(16,40,60,.96);
  box-shadow: 0 14px 40px #0007;
  backdrop-filter: blur(12px);
}
.identity-actions[hidden] { display: none !important; }
.hud-menu-title {
  padding: 3px 4px 7px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .03em;
}
.hud-menu-title span {
  display: block;
  margin-top: 2px;
  color: #a9c3d2;
  font-size: 10px;
  font-weight: 700;
}
.identity-actions button {
  width: 100%;
  /* Touch devices keep the 44px target (fine pointers shrink it below). */
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: left;
}
.hud-diagnostics {
  margin-top: 3px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #bcd1dc;
  font-size: 11px;
}
.hud-diagnostics summary {
  padding: 9px 4px 4px;
  color: #d7e6ed;
  cursor: pointer;
  font-weight: 800;
}
.hud-diagnostics .status {
  margin: 4px;
  display: grid;
  gap: 2px;
  font-size: 10px;
}
.hud-diagnostics .hint,
.hud-diagnostics .map-credit {
  display: block;
  margin: 6px 4px 2px;
  max-width: none;
  font-size: 9px;
  line-height: 1.4;
}
.hud-diagnostics .map-credit a { pointer-events: auto; }

/* OSM credit: unobtrusive, readable attribution below mobile touch controls.
   Keep it visible during Campus play; Photo Mode's HUD visibility rule still hides it. */
.campus-map-credit {
  position: fixed;
  z-index: 10;
  bottom: max(8px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  max-width: calc(100vw - 16px);
  padding: 1px 2px;
  border: 0;
  background: transparent;
  color: #e4edf3;
  font-size: 10px;
  line-height: 1.35;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.95);
  pointer-events: auto;
}
.campus-map-credit a,
.world-lobby-map-credit a {
  color: #ffdf90;
  text-decoration: underline;
  text-underline-offset: 2px;
  pointer-events: auto;
}
.campus-map-credit a:focus-visible,
.world-lobby-map-credit a:focus-visible {
  outline: 2px solid #ffdf90;
  outline-offset: 3px;
}
body[data-lobby-shell="true"] > .campus-map-credit,
body[data-space]:not([data-space="campus"]) > .campus-map-credit {
  display: none !important;
}
.world-lobby-map-credit {
  margin: 1px auto 0;
  padding: 4px 8px;
  max-width: 100%;
  color: #e4edf3;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
  pointer-events: auto;
}

.tour {
  position: fixed;
  z-index: 11;
  top: max(66px, calc(env(safe-area-inset-top) + 56px));
  left: max(12px, env(safe-area-inset-left));
  width: fit-content;
  max-width: min(340px, calc(100vw - 24px));
  min-height: 40px;
  padding: 8px 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(246,215,138,.38);
  border-radius: 14px;
  background: rgba(20,46,64,.80);
  color: white;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.tour-flag { flex: none; font-size: 13px; }
.tour-heading,
.tour-objective,
.tour-bearing {
  margin: 0;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.2;
}
.tour-heading { color: #ffdfa3; }
.tour-heading strong { margin-left: 2px; }
.tour-objective {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 850;
}
.tour-bearing { color: #d6ebf9; }
.tour button {
  flex: none;
  margin: 0;
  padding: 4px 7px;
  min-height: 28px;
  pointer-events: auto;
}

.social-cluster {
  position: fixed;
  z-index: 12;
  left: max(28px, env(safe-area-inset-left));
  bottom: max(154px, calc(env(safe-area-inset-bottom) + 126px));
  display: flex;
  gap: 8px;
}
.social-cluster #nearby-toggle,
.social-cluster #emote-toggle,
.social-cluster #chat-toggle {
  position: static;
  inset: auto;
  transform: none;
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 18px;
  background: rgba(25,54,80,.88);
}
.social-cluster > button > span:not(.world-ui-icon) {
  display: none;
}
body.joystick-right .social-cluster {
  left: auto;
  right: max(28px, env(safe-area-inset-right));
}
.emote-menu {
  left: max(20px, env(safe-area-inset-left));
  right: auto;
  bottom: max(212px, calc(env(safe-area-inset-bottom) + 184px));
  max-width: min(300px, calc(100vw - 40px));
  flex-wrap: wrap;
}
.emote-status {
  left: max(24px, env(safe-area-inset-left));
  right: auto;
  bottom: max(278px, calc(env(safe-area-inset-bottom) + 250px));
}
body.joystick-right .emote-menu,
body.joystick-right .emote-status {
  left: auto;
  right: max(20px, env(safe-area-inset-right));
}

/* Narrow touch HUD: keep locomotion on the edges and interaction on its own row.
   44px+ targets remain usable while the centre lane stops colliding with joystick/social controls. */
@media (pointer: coarse) and (max-width: 420px) {
  .social-cluster {
    left: max(20px, env(safe-area-inset-left));
    bottom: max(154px, calc(env(safe-area-inset-bottom) + 126px));
    gap: 6px;
  }
  .social-cluster #nearby-toggle,
  .social-cluster #emote-toggle,
  .social-cluster #chat-toggle {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }
  body.joystick-right .social-cluster {
    left: auto;
    right: max(20px, env(safe-area-inset-right));
  }

  #context-action {
    bottom: max(208px, calc(env(safe-area-inset-bottom) + 180px));
    min-width: 96px;
    max-width: min(148px, calc(100vw - 196px));
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 13px;
  }

  #run,
  #jump,
  #descend {
    right: max(20px, env(safe-area-inset-right));
    width: 68px;
    height: 68px;
  }
  #jump { bottom: max(34px, calc(env(safe-area-inset-bottom) + 6px)); }
  #run { bottom: max(112px, calc(env(safe-area-inset-bottom) + 84px)); }

  #transport-action,
  #context-action[hidden] + #transport-action {
    right: max(20px, env(safe-area-inset-right));
    bottom: max(190px, calc(env(safe-area-inset-bottom) + 162px));
    width: 68px;
    min-width: 68px;
    max-width: 68px;
    min-height: 48px;
    padding: 7px 5px;
    border-radius: 16px;
    font-size: 12px;
  }

  body[data-movement-state="MOUNT_FLIGHT"] #descend {
    bottom: max(34px, calc(env(safe-area-inset-bottom) + 6px));
  }
  body[data-movement-state="MOUNT_FLIGHT"] #jump {
    bottom: max(190px, calc(env(safe-area-inset-bottom) + 162px));
  }
  body[data-movement-state="MOUNT_FLIGHT"] #transport-action,
  body[data-movement-state="MOUNT_FLIGHT"] #context-action[hidden] + #transport-action {
    bottom: max(268px, calc(env(safe-area-inset-bottom) + 240px));
  }

  body.joystick-right #run,
  body.joystick-right #jump,
  body.joystick-right #descend {
    left: max(20px, env(safe-area-inset-left));
    right: auto;
  }
  body.joystick-right #transport-action,
  body.joystick-right #context-action[hidden] + #transport-action {
    left: max(20px, env(safe-area-inset-left));
    right: auto;
  }

  .follow-status {
    bottom: max(262px, calc(env(safe-area-inset-bottom) + 234px));
  }
  body[data-movement-state="MOUNT_FLIGHT"]:has(#transport-action:not([hidden])) .follow-status {
    bottom: max(340px, calc(env(safe-area-inset-bottom) + 312px));
  }

  body:has(#chat-form:not([hidden])) > #context-action,
  body:has(#chat-form:not([hidden])) > #transport-action {
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 560px) {
  .campus-topbar { left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); }
  .location-chip { max-width: 210px; height: 40px; padding-inline: 10px; }
  .location-chip strong { font-size: 12px; }
  .world-time-chip { padding-left: 5px; font-size: 10.5px; }
  .tour { max-width: calc(100vw - 20px); }
  .tour-heading, .tour-objective, .tour-bearing { font-size: 10.5px; }
  .tour-objective { max-width: 118px; }
  .view-settings {
    top: max(72px, calc(env(safe-area-inset-top) + 62px));
    right: max(12px, env(safe-area-inset-right));
    max-height: calc(100dvh - 96px);
    width: min(270px, calc(100vw - 24px));
  }
}
@media (max-width: 380px) {
  .location-chip { max-width: 178px; }
  .tour-heading { display: none; }
  .tour-objective { max-width: 142px; }
}


/* Keep the back action compact but make its destination explicit. */
.campus-topbar .return-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 2px 0 3px;
  font-size: inherit;
}
.return-home-arrow {
  font-size: 20px;
  line-height: 18px;
  font-weight: 900;
}
.return-home-label {
  margin-top: 2px;
  font-size: 8px;
  line-height: 9px;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
}


/* PC/fine-pointer HUD: keep the cross-platform information model, reduce touch-sized chrome. */
@media (pointer: fine) and (min-width: 700px) {
  #joystick,
  #run,
  #jump,
  #descend {
    display: none !important;
  }

  .campus-topbar {
    top: max(8px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    height: 42px;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 6px;
  }
  .campus-topbar .return-home,
  .hud-menu-toggle {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }
  .return-home-arrow { font-size: 17px; line-height: 15px; }
  .return-home-label { font-size: 7px; line-height: 8px; }
  .hud-menu-toggle { font-size: 16px; }
  .location-chip {
    height: 34px;
    max-width: 280px;
    padding-inline: 11px;
  }
  .location-chip strong { font-size: 12px; }

  .identity-actions {
    top: max(54px, calc(env(safe-area-inset-top) + 46px));
    width: 205px;
    padding: 8px;
  }
  .identity-actions button {
    min-height: 36px;
    padding: 6px 9px;
    font-size: 12px;
  }

  .tour {
    top: max(54px, calc(env(safe-area-inset-top) + 46px));
    min-height: 34px;
    padding: 6px 9px;
    gap: 5px;
  }
  .tour-heading,
  .tour-objective,
  .tour-bearing { font-size: 10.5px; }

  #context-action {
    bottom: 20px;
    min-width: 104px;
    min-height: 38px;
    max-width: 230px;
    padding: 7px 12px;
    border-radius: 12px;
    font-size: 12px;
  }
  #transport-action,
  #context-action[hidden] + #transport-action {
    left: auto;
    right: 20px;
    transform: none;
    bottom: 20px;
    width: fit-content;
    min-width: 104px;
    min-height: 38px;
    max-width: 230px;
    padding: 7px 12px;
    border-radius: 12px;
    font-size: 12px;
  }

  .social-cluster {
    left: 20px;
    bottom: 20px;
    gap: 6px;
  }
  .social-cluster #nearby-toggle,
  .social-cluster #emote-toggle,
  .social-cluster #chat-toggle {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 16px;
  }
  .emote-menu {
    left: 20px;
    bottom: 68px;
    max-width: 300px;
  }
  .emote-status {
    left: 20px;
    bottom: 134px;
  }
  body.joystick-right .social-cluster,
  body.joystick-right .emote-menu,
  body.joystick-right .emote-status {
    left: 20px;
    right: auto;
  }
}


/* Desktop keyboard reference panel. Hidden entirely on touch-first layouts. */
.desktop-only { display: none !important; }
.keyboard-shortcuts-panel {
  position: fixed;
  z-index: 20;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 48px));
  max-height: min(78vh, 640px);
  overflow: auto;
  padding: 20px;
  border: 1px solid #a5cee2;
  border-radius: 18px;
  background: #10283cf5;
  color: #eef8ff;
  box-shadow: 0 16px 54px #0009;
}
.keyboard-shortcuts-panel[hidden] { display: none !important; }
.keyboard-shortcuts-panel h2 {
  margin: 0 34px 16px 0;
  font-size: 20px;
}
.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.shortcut-group {
  padding: 12px;
  border: 1px solid #b2dcef2e;
  border-radius: 12px;
  background: #1936508c;
}
.shortcut-group h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #ffdfa3;
}
.shortcut-group p {
  margin: 6px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
.shortcut-group p span {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.shortcut-group p strong {
  color: #dceaf1;
  font-weight: 700;
  text-align: right;
}
kbd {
  display: inline-flex;
  min-width: 26px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border: 1px solid #afc7d5;
  border-bottom-width: 2px;
  border-radius: 6px;
  background: #0d1e2d;
  color: #fff;
  font: 700 11px/1 system-ui, sans-serif;
  box-shadow: inset 0 -1px 0 #0007;
}
.shortcut-note {
  margin: 14px 2px 0;
  color: #9fb7c5;
  font-size: 11px;
  line-height: 1.45;
}

@media (pointer: fine) and (min-width: 700px) {
  .desktop-only { display: block !important; }
}


/* Main Lobby P0.1 · shell only.
   Production gameplay remains the default; ?lobby=1 exposes this non-interactive layout preview.
   Camera, input lock, spawn cards and resume wiring belong to later P0 slices. */
.world-lobby[hidden] { display: none !important; }
.world-lobby {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  min-height: 100dvh;
  padding:
    max(12px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  color: #fff;
  pointer-events: none;
}
.world-lobby::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 14, 22, .54) 0%, rgba(5, 14, 22, .08) 38%, rgba(5, 14, 22, .58) 100%);
}
.world-lobby-topbar {
  width: min(1180px, 100%);
  min-height: 48px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.world-lobby-brand {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow: 0 2px 10px #0008;
}
.world-lobby-menu-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 13px;
  background: rgba(13,39,57,.72);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
.world-lobby-menu-button:hover {
  border-color: rgba(255,223,144,.58);
  background: rgba(20,58,81,.86);
}
.world-lobby-menu-button:focus-visible {
  outline: 2px solid #ffdf90;
  outline-offset: 3px;
}
.world-lobby-menu {
  position: absolute;
  top: max(66px, calc(env(safe-area-inset-top) + 54px));
  right: max(16px, env(safe-area-inset-right));
  z-index: 82;
  width: min(230px, calc(100vw - 32px));
  padding: 9px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(178,220,239,.4);
  border-radius: 16px;
  background: rgba(13,39,57,.96);
  box-shadow: 0 18px 50px rgba(0,0,0,.42);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}
.world-lobby-menu[hidden] { display: none !important; }
.world-lobby-menu-title {
  padding: 7px 9px 5px;
  color: #9fb7c5;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}
.world-lobby-menu button,
.world-lobby-menu-link {
  min-height: 42px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #eef8ff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.world-lobby-menu button:hover,
.world-lobby-menu-link:hover {
  border-color: rgba(178,220,239,.28);
  background: rgba(255,255,255,.07);
}
.world-lobby-menu button:focus-visible,
.world-lobby-menu-link:focus-visible {
  outline: 2px solid #ffdf90;
  outline-offset: 2px;
}
.world-lobby-frame {
  width: min(1180px, 100%);
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: end;
}
.world-lobby-stage-slot {
  min-height: 0;
  display: grid;
  place-items: end center;
  padding: 24px 0 20px;
}
.world-lobby-avatar-slot {
  width: 156px;
  height: 210px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 48% 48% 34% 34%;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.world-lobby-entry-slot {
  width: min(460px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 10px;
  padding-bottom: 18px;
}
.world-lobby-primary-slot,
.world-lobby-secondary-slot {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(13,39,57,.52);
  backdrop-filter: blur(8px);
}
.world-lobby-primary-slot {
  min-height: 92px;
  border-radius: 20px;
}
.world-lobby-secondary-slot {
  min-height: 46px;
  width: 72%;
  justify-self: center;
  border-radius: 15px;
}

body[data-lobby-shell="true"] > .campus-topbar,
body[data-lobby-shell="true"] > #tour,
body[data-lobby-shell="true"] > #nameplate,
body[data-lobby-shell="true"] > #hud-menu,
body[data-lobby-shell="true"] > #keyboard-shortcuts-panel,
body[data-lobby-shell="true"] > #player-card,
body[data-lobby-shell="true"] > #nearby-panel,
body[data-lobby-shell="true"] > #accompany-panel,
body[data-lobby-shell="true"] > #joystick,
body[data-lobby-shell="true"] > #run,
body[data-lobby-shell="true"] > #jump,
body[data-lobby-shell="true"] > #descend,
body[data-lobby-shell="true"] > .social-cluster,
body[data-lobby-shell="true"] > #emote-menu,
body[data-lobby-shell="true"] > #emote-status,
body[data-lobby-shell="true"] > #local-chat-bubble,
body[data-lobby-shell="true"] > #context-action,
body[data-lobby-shell="true"] > #transport-action,
body[data-lobby-shell="true"] > #follow-status,
body[data-lobby-shell="true"] > #shop-panel,
body[data-lobby-shell="true"] > #inventory-panel,
body[data-lobby-shell="true"] > #wardrobe-panel,
body[data-lobby-shell="true"] > #chat {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 560px) {
  .world-lobby {
    padding:
      max(10px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(14px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }
  .world-lobby-topbar { min-height: 44px; }
  .world-lobby-brand { font-size: 13px; }
  .world-lobby-menu-button { width: 40px; height: 40px; border-radius: 12px; }
  .world-lobby-stage-slot { padding: 12px 0 12px; }
  .world-lobby-avatar-slot { width: 112px; height: 148px; }
  .world-lobby-entry-slot { width: min(100%, 360px); gap: 7px; padding-bottom: 8px; }
  .world-lobby-primary-slot { min-height: 84px; border-radius: 18px; }
  .world-lobby-secondary-slot {
    min-height: 36px;
    width: 80%;
    border-radius: 13px;
    background: rgba(13,39,57,.44);
  }
}


/* Main Lobby P0.2 · the canvas now supplies the real player preview.
   Keep the P0.1 avatar slot only as layout reservation; do not draw a fake avatar over the real one. */
body[data-lobby-world="true"] .world-lobby-avatar-slot {
  visibility: hidden;
}
body[data-lobby-world="true"] #application {
  cursor: default;
}


/* Main Lobby P0.3 · MAIN_GATE primary action. */
.world-lobby-main-gate {
  width: 100%;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "kicker action"
    "title action";
  align-items: center;
  gap: 4px 18px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  font: inherit;
  box-shadow: 0 12px 34px rgba(0,0,0,.24);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.world-lobby-main-gate:hover {
  transform: translateY(-2px) scale(1.015);
  border-color: rgba(255,223,144,.72);
  background: rgba(20,58,81,.78);
}
.world-lobby-main-gate:focus-visible {
  outline: 3px solid #ffdf90;
  outline-offset: 3px;
}
/* P0 start latency: the press is shown on pointerdown and never waits for the click. */
.world-lobby-main-gate {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.world-lobby-main-gate:active,
.world-lobby-main-gate.is-activating {
  transform: scale(.97);
  border-color: rgba(255,223,144,.9);
  background: rgba(30,78,106,.86);
  transition: none;
}
.world-lobby-card-kicker {
  grid-area: kicker;
  color: #ffdf90;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}
.world-lobby-main-gate strong {
  grid-area: title;
  font-size: 18px;
  line-height: 1.25;
}
.world-lobby-card-action {
  grid-area: action;
  align-self: center;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .world-lobby-main-gate {
    padding: 14px 16px;
    gap: 3px 12px;
  }
  .world-lobby-main-gate strong { font-size: 16px; }
  .world-lobby-card-action { font-size: 13px; }
}


/* Main Lobby P0.4 · Resume is secondary to the MAIN_GATE action. */
.world-lobby-resume {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #eaf6fb;
  text-align: left;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}
.world-lobby-resume[hidden] { display: none !important; }
.world-lobby-resume > span:first-child { display: grid; gap: 2px; min-width: 0; }
.world-lobby-resume strong { font-size: 13px; line-height: 1.2; }
.world-lobby-resume small {
  color: #b8ceda;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.world-lobby-resume-age {
  flex: none;
  color: #ffdf90;
  font-size: 11px;
  font-weight: 800;
}
.world-lobby-resume:hover {
  border-color: rgba(178,220,239,.55);
  background: rgba(20,58,81,.66);
}
.world-lobby-resume:focus-visible {
  outline: 2px solid #ffdf90;
  outline-offset: 3px;
}
@media (max-width: 560px) {
  .world-lobby-resume {
    padding: 6px 12px;
    gap: 10px;
  }
  .world-lobby-resume strong { font-size: 12px; }
  .world-lobby-resume small { font-size: 10px; }
  .world-lobby-resume-age { font-size: 10px; }
}


/* Main Lobby P0.5 · Back Gate stays informative but never starts gameplay while locked. */
.world-lobby-locked-gate {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: #dbe8ee;
  text-align: left;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  opacity: .92;
}
.world-lobby-locked-gate > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.world-lobby-locked-gate strong { font-size: 13px; line-height: 1.2; }
.world-lobby-locked-gate small { color: #9fb6c3; font-size: 11px; }
.world-lobby-lock-icon { flex: none; font-size: 17px; }
.world-lobby-locked-gate:hover {
  border-color: rgba(178,220,239,.48);
  background: rgba(20,58,81,.58);
}
.world-lobby-locked-gate:focus-visible {
  outline: 2px solid #ffdf90;
  outline-offset: 3px;
}
@media (max-width: 560px) {
  .world-lobby-locked-gate {
    padding: 6px 12px;
    gap: 8px;
    opacity: .82;
  }
  .world-lobby-locked-gate strong { font-size: 12px; }
  .world-lobby-locked-gate small { font-size: 10px; }
  .world-lobby-lock-icon { font-size: 15px; }
}
.world-lobby-lock-dialog[hidden] { display: none !important; }
.world-lobby-lock-dialog {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding:
    max(20px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  background: rgba(3,10,16,.72);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
.world-lobby-lock-dialog-card {
  position: relative;
  width: min(390px, 100%);
  padding: 26px 22px 20px;
  border: 1px solid rgba(178,220,239,.48);
  border-radius: 22px;
  background: rgba(16,40,60,.97);
  color: #eef8ff;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  text-align: center;
}
.world-lobby-lock-dialog-icon { font-size: 30px; }
.world-lobby-lock-dialog-card h2 { margin: 8px 0 4px; font-size: 22px; }
.world-lobby-lock-dialog-card p {
  margin: 7px auto;
  max-width: 310px;
  color: #c4d8e2;
  font-size: 13px;
  line-height: 1.55;
}
.world-lobby-lock-dialog-card .world-lobby-lock-status {
  color: #ffdf90;
  font-weight: 900;
}
.world-lobby-lock-condition {
  margin: 16px 0 14px;
  padding: 11px 12px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 13px;
  background: rgba(255,255,255,.045);
}
.world-lobby-lock-condition span { color: #9fb6c3; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.world-lobby-lock-condition strong { font-size: 13px; }
.world-lobby-lock-dialog-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: #eef8ff;
  font-size: 25px;
  cursor: pointer;
}
.world-lobby-lock-confirm {
  min-width: 112px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #ffdf90;
  border-radius: 12px;
  background: #f3cb70;
  color: #172430;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.world-lobby-lock-dialog button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}


/* Main Lobby P0.6 · staged handoff from lobby UI to the live World. */
.lobby-transition-fade[hidden] { display: none !important; }
.lobby-transition-fade {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: #07111a;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}
.lobby-transition-fade.on { opacity: 1; }
.world-lobby {
  transition: opacity .16s ease, transform .16s ease;
}
.world-lobby.is-leaving {
  opacity: 0;
  transform: translateY(8px) scale(.995);
  pointer-events: none;
}
body[data-lobby-transition="true"] > .campus-topbar,
body[data-lobby-transition="true"] > #tour,
body[data-lobby-transition="true"] > #nameplate,
body[data-lobby-transition="true"] > #hud-menu,
body[data-lobby-transition="true"] > #joystick,
body[data-lobby-transition="true"] > #run,
body[data-lobby-transition="true"] > #jump,
body[data-lobby-transition="true"] > #descend,
body[data-lobby-transition="true"] > .social-cluster,
body[data-lobby-transition="true"] > #context-action,
body[data-lobby-transition="true"] > #transport-action,
body[data-lobby-transition="true"] > #chat {
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .lobby-transition-fade,
  .world-lobby {
    transition: none !important;
  }
}


/* Main Lobby P0.7 · compact short-mobile guardrail for 360px-class screens. */
@media (max-width: 380px) and (max-height: 720px) {
  .world-lobby { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .world-lobby-topbar { min-height: 38px; }
  .world-lobby-stage-slot { padding: 4px 0 6px; }
  .world-lobby-avatar-slot { width: 92px; height: 118px; }
  .world-lobby-entry-slot { gap: 6px; padding-bottom: 2px; }
  .world-lobby-main-gate { min-height: 72px; padding: 11px 13px; }
  .world-lobby-secondary-slot { min-height: 38px; }
  .world-lobby-locked-gate, .world-lobby-resume { padding: 8px 11px; }
}


/* Main Lobby P1.1 · reuse the existing profile/settings panels above the lobby. */
body[data-lobby-shell="true"] > #profile-panel:not([hidden]),
body[data-lobby-shell="true"] > #view-settings:not([hidden]) {
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 86;
}
@media (max-width: 560px) {
  .world-lobby-menu {
    top: max(58px, calc(env(safe-area-inset-top) + 48px));
    right: max(12px, env(safe-area-inset-right));
    width: min(220px, calc(100vw - 24px));
  }
}


/* Main Lobby P1.2 · compact player identity, subordinate to the spawn CTA. */
.world-lobby-player-summary {
  position: absolute;
  top: max(72px, calc(env(safe-area-inset-top) + 60px));
  left: max(16px, env(safe-area-inset-left));
  z-index: 76;
  width: min(220px, calc(100vw - 32px));
  padding: 11px 13px;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  background: rgba(8,28,43,.48);
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.world-lobby-player-eyebrow {
  color: #9fb7c5;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
}
.world-lobby-player-summary strong {
  margin-top: 1px;
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#lobby-player-look {
  margin-top: 2px;
  color: #d2e3eb;
  font-size: 11px;
}
.world-lobby-player-stats {
  min-width: 0;
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  color: #eef7fb;
  font-size: 10px;
  font-weight: 850;
}
.world-lobby-player-stats > span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#lobby-player-progression {
  color: #d8edf5;
}
#lobby-player-wallet {
  color: #ffdf90;
}
#lobby-player-account {
  width: max-content;
  margin-top: 5px;
  padding: 3px 7px;
  border: 1px solid rgba(255,223,144,.28);
  border-radius: 999px;
  background: rgba(255,223,144,.08);
  color: #ffdf90;
  font-size: 9px;
  font-weight: 900;
}
@media (max-width: 560px) {
  .world-lobby-player-summary {
    top: max(60px, calc(env(safe-area-inset-top) + 50px));
    left: max(12px, env(safe-area-inset-left));
    width: min(180px, calc(100vw - 88px));
    padding: 9px 10px;
  }
  .world-lobby-player-summary strong { font-size: 15px; }
  #lobby-player-look { display: none; }
  .world-lobby-player-stats { margin-top: 2px; flex-wrap: nowrap; font-size: 9.5px; gap: 3px 5px; }
  #lobby-player-account { margin-top: 3px; }
}
@media (max-width: 380px) and (max-height: 720px) {
  .world-lobby-player-summary {
    top: max(52px, calc(env(safe-area-inset-top) + 44px));
    width: min(164px, calc(100vw - 76px));
    padding: 7px 9px;
  }
  .world-lobby-player-eyebrow { display: none; }
  .world-lobby-player-summary strong { font-size: 14px; }
  #lobby-player-account { margin-top: 3px; }
}


/* Main Lobby P1.3 · world-wide active session count plus signed-in friend context.
   The total uses the public heartbeat aggregate and therefore includes guest/browser sessions. */
.world-lobby-presence-summary {
  position: absolute;
  top: max(72px, calc(env(safe-area-inset-top) + 60px));
  right: max(16px, env(safe-area-inset-right));
  z-index: 76;
  width: min(220px, calc(100vw - 32px));
  padding: 11px 13px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  background: rgba(8,28,43,.48);
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
.world-lobby-presence-eyebrow {
  color: #8fe8b1;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
}
.world-lobby-presence-summary strong {
  color: #fff;
  font-size: 14px;
  line-height: 1.25;
}
#lobby-friends-summary {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid rgba(178,220,239,.22);
  border-radius: 9px;
  background: rgba(255,255,255,.045);
  color: #d8e8ef;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
#lobby-friends-summary:hover:not(:disabled) {
  border-color: rgba(255,223,144,.48);
  background: rgba(255,255,255,.08);
}
#lobby-friends-summary:focus-visible {
  outline: 2px solid #ffdf90;
  outline-offset: 2px;
}
#lobby-friends-summary:disabled {
  opacity: .68;
  cursor: default;
}
body[data-lobby-shell="true"] > #friend-panel:not([hidden]) {
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 86;
}
@media (max-width: 560px) {
  .world-lobby-presence-summary {
    top: max(60px, calc(env(safe-area-inset-top) + 50px));
    right: max(12px, env(safe-area-inset-right));
    width: min(160px, calc(100vw - 210px));
    min-width: 132px;
    padding: 9px 10px;
  }
  .world-lobby-presence-summary strong { font-size: 12px; }
  #lobby-friends-summary { font-size: 9px; }
}
@media (max-width: 380px) and (max-height: 720px) {
  .world-lobby-presence-summary {
    top: max(52px, calc(env(safe-area-inset-top) + 44px));
    width: 138px;
    min-width: 0;
    padding: 7px 8px;
  }
  .world-lobby-presence-eyebrow { display: none; }
  .world-lobby-presence-summary strong { font-size: 11px; }
  #lobby-friends-summary { min-height: 26px; padding: 4px 6px; font-size: 8.5px; }
}

@media (max-width: 340px) {
  .world-lobby-player-summary {
    left: max(10px, env(safe-area-inset-left));
    width: calc(50vw - 15px);
    padding-left: 8px;
    padding-right: 8px;
  }
  .world-lobby-presence-summary {
    right: max(10px, env(safe-area-inset-right));
    width: calc(50vw - 15px);
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
  }
  .world-lobby-player-summary strong { font-size: 13px; }
  .world-lobby-player-stats { font-size: 9px; gap: 2px 4px; }
  #lobby-friends-summary { padding-left: 5px; padding-right: 5px; }
}


/* Main Lobby P1.4 · one factual quest highlight, subordinate to the spawn CTA. */
.world-lobby-quest-highlight {
  width: min(420px, 94%);
  justify-self: center;
  min-height: 54px;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "kicker state"
    "title progress"
    "objective progress";
  gap: 2px 10px;
  border: 1px solid rgba(255,223,144,.24);
  border-radius: 14px;
  background: rgba(9,31,46,.58);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.world-lobby-quest-highlight[hidden] { display: none !important; }
.world-lobby-quest-kicker {
  grid-area: kicker;
  color: #ffdf90;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
}
.world-lobby-quest-state {
  grid-area: state;
  color: #9fe1b6;
  font-size: 9px;
  font-weight: 900;
}
.world-lobby-quest-highlight strong {
  grid-area: title;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
}
#lobby-quest-objective {
  grid-area: objective;
  color: #c7dbe5;
  font-size: 10px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.world-lobby-quest-progress {
  grid-area: progress;
  align-self: center;
  color: #f4e9c8;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .world-lobby-quest-highlight {
    width: min(340px, 96%);
    min-height: 42px;
    padding: 6px 10px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "kicker title state"
      "objective objective progress";
    gap: 1px 7px;
    align-items: center;
  }
  .world-lobby-quest-kicker,
  .world-lobby-quest-state,
  .world-lobby-quest-progress { white-space: nowrap; }
  .world-lobby-quest-highlight strong {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #lobby-quest-objective { font-size: 9.5px; }
}
@media (max-width: 380px) and (max-height: 720px) {
  .world-lobby-quest-highlight {
    min-height: 36px;
    padding: 4px 8px;
    gap: 1px 6px;
  }
  .world-lobby-quest-kicker { display: none; }
  .world-lobby-quest-highlight strong { font-size: 11px; }
  #lobby-quest-objective { font-size: 9px; }
  .world-lobby-quest-progress { font-size: 9px; }
  .world-lobby-secondary-slot { min-height: 34px; }
  .world-lobby-locked-gate,
  .world-lobby-resume { padding: 5px 10px; }
}


/* Main Lobby P1.7 · World Loading / Boot UX */
.world-loading {
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 28%, rgba(63,112,142,.24), transparent 36%),
    linear-gradient(180deg, #10283a 0%, #0b1722 58%, #08121a 100%);
  color: #eef8ff;
  opacity: 1;
  transition: opacity .24s ease, visibility .24s ease;
}
#world-loading-detail { overflow-wrap: anywhere; }
.world-loading[hidden] { display: none !important; }
.world-loading.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.world-loading-card {
  width: min(440px, 92vw);
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.world-loading-brand {
  color: #c7dbe5;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}
.world-loading-duck {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 4px 0 2px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.24);
  font-size: 38px;
  animation: world-loading-walk 1.1s ease-in-out infinite;
}
.world-loading h1 {
  margin: 0;
  font-size: clamp(20px, 5vw, 28px);
  line-height: 1.15;
}
.world-loading-message {
  min-height: 1.4em;
  margin: 0;
  color: #ffdf90;
  font-size: 13px;
  font-weight: 850;
}
.world-loading-progress {
  width: 100%;
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}
.world-loading-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8bcce7, #ffdf90);
  transition: width .28s ease;
}
.world-loading-progress-meta {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  color: #9fb7c5;
  font-size: 10px;
  line-height: 1.45;
  text-align: left;
}
.world-loading-progress-meta strong {
  flex: none;
  color: #eef8ff;
  font-size: 11px;
}
#world-loading-continue, #world-loading-retry {
  min-height: 44px;
  margin-top: 5px;
  padding: 9px 14px;
  border: 1px solid rgba(255,223,144,.46);
  border-radius: 12px;
  background: rgba(255,223,144,.1);
  color: #ffecb7;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
#world-loading-continue:hover, #world-loading-retry:hover {
  background: rgba(255,223,144,.16);
}
#world-loading-continue:focus-visible, #world-loading-retry:focus-visible {
  outline: 2px solid #ffdf90;
  outline-offset: 3px;
}
.world-loading[data-state="ERROR"] .world-loading-message { color: #ffb5b5; }
.world-loading-affiliation {
  margin: 12px auto 0;
  max-width: 520px;
  color: rgba(231, 240, 245, .72);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}
@keyframes world-loading-walk {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .world-loading,
  .world-loading-progress > span { transition: none; }
  .world-loading-duck { animation: none; }
}
@media (max-width: 380px) {
  .world-loading-card { width: min(330px, 94vw); gap: 8px; }
  .world-loading-duck { width: 62px; height: 62px; font-size: 32px; }
  .world-loading-progress-meta { gap: 10px; font-size: 9px; }
}

@media (max-height: 480px) {
  .world-loading-card { gap: 6px; }
  .world-loading-duck { width: 48px; height: 48px; font-size: 28px; }
  .world-loading-affiliation { margin-top: 4px; }
}

/* Main-gate Guestbook P0: authenticated-only social trace panel. */
.guestbook-panel {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
}
.guestbook-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.guestbook-panel-titles h2 { margin: 0; }
.guestbook-panel-titles p {
  margin: 4px 0 0;
  color: #acc3d1;
  font-size: 12px;
}
.guestbook-editor {
  padding: 12px;
  border: 1px solid #b2dcef2e;
  border-radius: 14px;
  background: #1936508c;
}
.guestbook-editor h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #ffdfa3;
}
.guestbook-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 84px;
  resize: vertical;
  padding: 10px 11px;
  border: 1px solid #b2dcef80;
  border-radius: 10px;
  background: #0d1e2dcc;
  color: #fff;
  font: inherit;
  line-height: 1.45;
}
.guestbook-textarea:focus { outline: 2px solid #8fe2d3; outline-offset: 2px; }
.guestbook-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.guestbook-counter {
  color: #8fa6b4;
  font-size: 11px;
}
.guestbook-editor-actions { display: flex; gap: 6px; }
.guestbook-editor-actions button,
.guestbook-more {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #b2dcef99;
  border-radius: 10px;
  background: #1d3f5f;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.guestbook-editor-actions button:disabled,
.guestbook-more:disabled { opacity: .55; cursor: not-allowed; }
.guestbook-editor-actions .guestbook-delete { background: #5a3a2a; }
.guestbook-list { margin-top: 12px; }
.guestbook-entry {
  padding: 12px 2px;
  border-top: 1px solid #ffffff14;
}
.guestbook-entry:first-child { border-top: 0; }
.guestbook-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.guestbook-entry-identity {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.guestbook-entry-identity strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.guestbook-avatar { font-size: 19px; line-height: 1; }
.guestbook-verified,
.guestbook-mine {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}
.guestbook-verified { background: #1b6e63; color: #d9fff7; }
.guestbook-mine { background: #344c65; color: #dbeeff; }
.guestbook-time {
  flex: 0 0 auto;
  color: #8fa6b4;
  font-size: 10px;
}
.guestbook-content {
  margin: 8px 0 0;
  color: #eef8ff;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.guestbook-empty,
.guestbook-hint {
  margin: 10px 0 0;
  color: #9fb7c5;
  font-size: 12px;
  line-height: 1.5;
}
.guestbook-hint { color: #ffdf90; }
.guestbook-more {
  width: 100%;
  margin-top: 8px;
}


/* Main-gate floating Guestbook marker */
.guestbook-world-label {
  position: fixed;
  z-index: 15;
  left: 0;
  top: 0;
  min-width: 154px;
  max-width: min(230px, calc(100vw - 24px));
  padding: 9px 12px 8px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon copy"
    "pointer pointer";
  align-items: center;
  gap: 1px 9px;
  transform: translate(-50%, calc(-100% - 12px));
  border: 1px solid rgba(255, 223, 144, .88);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(9, 40, 57, .96), rgba(20, 76, 79, .94));
  color: #fff;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, .42),
    0 0 24px rgba(255, 218, 112, .28),
    inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(7px);
  pointer-events: none;
  user-select: none;
  animation: guestbook-marker-float 1.8s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.guestbook-world-label[hidden] { display: none !important; }
.guestbook-world-marker-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(255, 223, 144, .14);
  font-size: 23px;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.45));
}
.guestbook-world-marker-copy {
  grid-area: copy;
  display: grid;
  min-width: 0;
}
.guestbook-world-marker-copy strong {
  color: #fff3c4;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: .02em;
  line-height: 1.2;
}
.guestbook-world-marker-copy small {
  margin-top: 2px;
  color: #d9eef2;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.guestbook-world-marker-pointer {
  grid-area: pointer;
  justify-self: center;
  height: 8px;
  margin: 1px 0 -12px;
  color: #ffdf90;
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 2px 5px rgba(0,0,0,.55);
}
.guestbook-world-label.is-near {
  transform: translate(-50%, calc(-100% - 14px)) scale(1.08);
  border-color: #fff1ac;
  background: linear-gradient(145deg, rgba(13, 57, 75, .98), rgba(24, 103, 91, .97));
  box-shadow:
    0 10px 30px rgba(0,0,0,.48),
    0 0 0 3px rgba(255, 223, 144, .13),
    0 0 34px rgba(255, 218, 112, .50);
}
.guestbook-world-label.is-near .guestbook-world-marker-copy small {
  color: #fff1ac;
  font-size: 11px;
}
.guestbook-world-label[data-state="locked"] {
  border-color: rgba(184, 205, 216, .62);
  background: rgba(28, 43, 53, .92);
  box-shadow: 0 8px 22px rgba(0,0,0,.38);
}
.guestbook-world-label[data-state="locked"] .guestbook-world-marker-copy strong {
  color: #e5eef2;
}
@keyframes guestbook-marker-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}
@media (max-width: 560px) {
  .guestbook-world-label {
    min-width: 140px;
    padding: 8px 10px 7px;
    border-radius: 13px;
  }
  .guestbook-world-marker-icon { width: 30px; height: 30px; font-size: 20px; }
  .guestbook-world-marker-copy strong { font-size: 14px; }
  .guestbook-world-marker-copy small { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .guestbook-world-label { animation: none; }
}


/* Guestbook P1 multi-post + profile links */
.guestbook-rate,
.guestbook-limit-note {
  margin: 0 0 8px;
  color: #9fb7c5;
  font-size: 10px;
  line-height: 1.4;
}
.guestbook-limit-note {
  margin: 8px 0 0;
  color: #ffcf91;
}
.guestbook-profile-button {
  appearance: none;
  border: 0;
  padding: 3px 5px 3px 2px;
  margin: -3px 0 -3px -2px;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.guestbook-profile-button:hover {
  background: rgba(255,255,255,.06);
}
.guestbook-profile-button:focus-visible {
  outline: 2px solid #ffdf90;
  outline-offset: 2px;
}
.guestbook-profile-chevron {
  flex: 0 0 auto;
  margin-left: 1px;
  color: #8fe2d3;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}
.guestbook-entry-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}
.guestbook-entry-actions button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #b2dcef66;
  border-radius: 9px;
  background: #183550;
  color: #eaf6fb;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.guestbook-entry-actions .guestbook-entry-delete {
  background: #503229;
  border-color: #c9927a66;
}
.guestbook-entry-actions button:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.guestbook-cancel {
  background: #354758 !important;
}
.player-card-verified {
  width: max-content;
  margin-top: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #1b6e63;
  color: #d9fff7;
  font-size: 10px;
  font-weight: 850;
}
@media (max-width: 560px) {
  .guestbook-profile-button { max-width: calc(100vw - 150px); }
  .guestbook-entry-actions button { min-height: 36px; }
}


/* Shared right HUD rail: Mini-map -> guidance -> event chip.
   One set of offsets prevents independently positioned cards from colliding on portrait screens. */
body {
  --world-right-rail-top: max(66px, calc(env(safe-area-inset-top) + 56px));
  --world-right-rail-right: max(12px, env(safe-area-inset-right));
  --world-right-rail-map-size: 112px;
  --world-right-rail-gap: 8px;
  --world-right-rail-event-top: calc(
    var(--world-right-rail-top) + var(--world-right-rail-map-size) + var(--world-right-rail-gap)
  );
}
@media (max-width: 380px), (max-height: 640px) {
  body { --world-right-rail-map-size: 96px; }
}
@media (pointer: fine) and (min-width: 700px) {
  body { --world-right-rail-map-size: 156px; }
}

/* Mini-map M0 shell: display-only SVG overlay. Runtime state is owned by MiniMapController. */
:root {
  --world-map-bg: #282d3e;
  --world-map-building: #323748;
  --world-map-road: #697088;
  --world-map-path: #545b6e;
  --world-map-green: #314339;
  --world-map-water: #1e394e;
}
.minimap {
  --minimap-size: var(--world-right-rail-map-size, 112px);
  position: fixed;
  z-index: 10;
  top: var(--world-right-rail-top, max(66px, calc(env(safe-area-inset-top) + 56px)));
  right: var(--world-right-rail-right, max(12px, env(safe-area-inset-right)));
  width: var(--minimap-size);
  height: var(--minimap-size);
  border-radius: 20px;
  pointer-events: none;
  filter: drop-shadow(0 7px 18px rgba(0,0,0,.28));
  contain: layout paint;
}
.minimap[hidden],
.minimap[data-minimap-state="UNAVAILABLE"],
.minimap[data-minimap-state="HIDDEN"],
.minimap[data-minimap-state="SUSPENDED"] {
  display: none !important;
}
.minimap-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.minimap-base {
  fill: rgba(40, 45, 62, .96);
}
.minimap-frame {
  fill: none;
  stroke: rgba(181, 188, 208, .46);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.minimap-geometry {
  /* The SVG transform already translates the player to (56,56). A second
     origin offset pushes east/west-facing streets outside the clipped map. */
  transform-origin: 0 0;
}
.minimap-geometry [data-map-kind="BUILDING"] {
  fill: rgba(50, 55, 72, .98);
  stroke: rgba(130, 140, 164, .32);
  stroke-width: .55;
  vector-effect: non-scaling-stroke;
}
.minimap-geometry [data-map-kind="GREEN"] {
  fill: rgba(49, 67, 57, .74);
  stroke: rgba(91, 111, 97, .16);
  stroke-width: .45;
  vector-effect: non-scaling-stroke;
}
.minimap-geometry [data-map-kind="WATER"] {
  fill: rgba(30, 57, 78, .92);
  stroke: rgba(78, 111, 135, .34);
  stroke-width: .55;
  vector-effect: non-scaling-stroke;
}
.minimap-geometry [data-map-kind="GROUND"] {
  fill: rgba(48, 53, 68, .66);
  stroke: rgba(105, 113, 133, .14);
  stroke-width: .45;
  vector-effect: non-scaling-stroke;
}
.minimap-geometry [data-map-kind="ROAD"] {
  fill: rgba(105, 112, 136, .80);
  stroke: rgba(169, 177, 198, .18);
  stroke-width: .35;
  vector-effect: non-scaling-stroke;
}
.minimap-geometry [data-map-kind="PATH"] {
  fill: rgba(84, 91, 110, .58);
  stroke: rgba(155, 164, 185, .12);
  stroke-width: .3;
  vector-effect: non-scaling-stroke;
}
.minimap[data-map-mode="room"] .minimap-base {
  fill: rgba(55, 48, 40, .94);
}
.minimap-geometry [data-map-kind="ROOM_FLOOR"] {
  fill: rgba(157, 127, 91, .90);
  stroke: rgba(255, 231, 194, .72);
  stroke-width: .9;
  vector-effect: non-scaling-stroke;
}
.minimap-geometry [data-map-kind="ROOM_FURNITURE"] {
  fill: rgba(223, 234, 239, .94);
  stroke: rgba(255, 255, 255, .60);
  stroke-width: .65;
  vector-effect: non-scaling-stroke;
}
.minimap-pois {
  transform-origin: 56px 56px;
}
.minimap-poi {
  vector-effect: non-scaling-stroke;
}
.minimap-poi-dot {
  fill: rgba(34, 39, 54, .98);
  stroke: rgba(239, 242, 248, .82);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}
.minimap-poi-glyph {
  fill: #ffffff;
  font: 800 6.5px/1 Inter, Pretendard, system-ui, sans-serif;
  paint-order: stroke;
  stroke: rgba(31, 35, 49, .90);
  stroke-width: 1.2px;
  stroke-linejoin: round;
  user-select: none;
}
.minimap-poi[data-presentation="LOCKED"] .minimap-poi-dot {
  stroke-dasharray: 2 1.4;
}
.minimap-poi[data-presentation="UNKNOWN"] .minimap-poi-dot,
.minimap-poi[data-presentation="UNDISCOVERED"] .minimap-poi-dot {
  fill: rgba(64, 69, 84, .96);
}
.minimap-poi[data-presentation="NORMAL"] { opacity: 1; }
.minimap-poi[data-presentation="LOCKED"] { opacity: .72; }
.minimap-poi[data-presentation="COMING_SOON"],
.minimap-poi[data-presentation="DISABLED"],
.minimap-poi[data-presentation="UNKNOWN"],
.minimap-poi[data-presentation="UNDISCOVERED"] { opacity: .58; }
.minimap-objective-ring {
  fill: rgba(255, 193, 77, .96);
  stroke: #fff2c8;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(255, 193, 77, .72));
}
.minimap-objective-glyph {
  fill: #182430;
  font: 950 8px/1 Inter, Pretendard, system-ui, sans-serif;
  user-select: none;
}
.minimap-objective[data-objective-kind="quest-npc"] .minimap-objective-ring {
  fill: rgba(143, 226, 211, .98);
  stroke: #e4fff9;
}
.minimap-objective[data-edge="true"] .minimap-objective-ring {
  stroke-width: 2;
  stroke-dasharray: 2.5 1.2;
}
.minimap-social-dot {
  fill: rgba(187, 209, 219, .92);
  stroke: rgba(15, 34, 48, .92);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}
.minimap-social-core {
  fill: #ffffff;
}
.minimap-social-marker[data-social-kind="friend"] .minimap-social-dot {
  fill: rgba(143, 226, 211, .98);
  stroke: #e7fff9;
  stroke-width: 1.4;
}
.minimap-social-marker[data-social-kind="friend"] .minimap-social-core {
  fill: #17353d;
}
.minimap-player-marker {
  fill: #ffffff;
  stroke: rgba(17, 21, 31, .98);
  stroke-width: 1.7;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
  vector-effect: non-scaling-stroke;
}
.minimap-compass-north {
  fill: rgba(255,255,255,.84);
  font: 800 8px/1 Inter, Pretendard, system-ui, sans-serif;
  paint-order: stroke;
  stroke: rgba(28, 32, 45, .90);
  stroke-width: 2px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  user-select: none;
}
@media (max-width: 380px), (max-height: 640px) {
  .minimap {
    --minimap-size: 96px;
    border-radius: 18px;
  }
}
@media (pointer: fine) and (min-width: 700px) {
  .minimap {
    --minimap-size: 156px;
    top: max(54px, calc(env(safe-area-inset-top) + 46px));
    right: max(10px, env(safe-area-inset-right));
    border-radius: 22px;
  }
}


/* Full Map M2-1: North-up campus overview opened from the Mini-map. */
.minimap-open-map {
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: transparent;
  cursor: pointer;
  pointer-events: auto;
}
.minimap-open-map:focus-visible {
  outline: 2px solid #fff0a8;
  outline-offset: 3px;
}

.full-map-panel {
  position: fixed;
  inset: 0;
  z-index: 72;
  display: grid;
  place-items: center;
  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  background: rgba(6, 14, 22, .74);
  backdrop-filter: blur(8px);
}
.full-map-panel[hidden] { display: none !important; }
.full-map-card {
  --full-map-search-height: 0px;
  width: min(1040px, 100%);
  max-height: 100%;
  overflow: auto;
  border: 1px solid rgba(173, 215, 232, .42);
  border-radius: 24px;
  background: rgba(13, 29, 43, .98);
  color: #eef8fb;
  box-shadow: 0 24px 70px rgba(0,0,0,.48);
}
.full-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 10px;
}
.full-map-kicker,
.full-map-info-kicker {
  display: block;
  color: #8ed8ca;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}
.full-map-header h2 {
  margin: 2px 0 0;
  font-size: 20px;
}
.full-map-close {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(178,220,239,.42);
  border-radius: 13px;
  background: #183550;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}
.full-map-card:has(> .full-map-search:not([hidden])) { --full-map-search-height: 54px; }
.full-map-search[hidden] { display: none !important; }
.full-map-search {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
  margin: 0 18px 10px;
}
.full-map-search-input {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #83adbe;
  border-radius: 11px;
  background: #102638;
  color: #eef8fb;
  font: 16px/1.4 system-ui, sans-serif;
}
.full-map-search-input::placeholder { color: #b6cbd6; }
.full-map-search-clear {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #83adbe;
  border-radius: 11px;
  background: #24516a;
  color: #f5fbfd;
  cursor: pointer;
}
.full-map-search-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: min(220px, 35dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #83adbe;
  border-radius: 11px;
  background: #102638;
  box-shadow: 0 10px 22px rgba(0,0,0,.4);
}
.full-map-search-panel[hidden], .full-map-search-clear[hidden] { display: none !important; }
.full-map-search-status { margin: 0; padding: 9px 12px; color: #b6cbd6; font-size: 12px; }
.full-map-search-results { list-style: none; padding: 0; margin: 0; }
.full-map-search-result {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-top: 1px solid rgba(178,220,239,.2);
  background: transparent;
  color: #eef8fb;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  font: 14px/1.5 system-ui, sans-serif;
}
.full-map-search-result:hover { background: #24516a; }
.full-map-search-input:focus-visible, .full-map-search-clear:focus-visible,
.full-map-search-result:focus-visible, #full-map-info-title:focus-visible {
  outline: 2px solid #fff0a8;
  outline-offset: -3px;
}
.full-map-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 270px);
  gap: 14px;
  padding: 0 18px 18px;
}
.full-map-body:has(> .full-map-info[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}
.full-map-stage {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: min(100%, calc(100dvh - 160px - var(--full-map-search-height)));
  justify-self: center;
}
.full-map-surface {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  border: 1px solid rgba(178,220,239,.28);
  border-radius: 20px;
  overflow: hidden;
  background: #282d3e;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.full-map-svg,
.full-map-marker-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}
.full-map-base { fill: #282d3e; }
.full-map-geometry [data-map-kind="BUILDING"] {
  fill: rgba(50,55,72,.98);
  stroke: rgba(130,140,164,.32);
  stroke-width: 1;
}
.full-map-geometry [data-map-kind="GREEN"] {
  fill: rgba(49,67,57,.76);
  stroke: rgba(91,111,97,.16);
  stroke-width: .8;
}
.full-map-geometry [data-map-kind="WATER"] {
  fill: rgba(30,57,78,.94);
  stroke: rgba(78,111,135,.34);
  stroke-width: .9;
}
.full-map-geometry [data-map-kind="GROUND"] {
  fill: rgba(48,53,68,.68);
  stroke: rgba(105,113,133,.14);
  stroke-width: .7;
}
.full-map-geometry [data-map-kind="ROAD"] {
  fill: rgba(105,112,136,.82);
  stroke: rgba(169,177,198,.20);
  stroke-width: .65;
}
.full-map-geometry [data-map-kind="PATH"] {
  fill: rgba(84,91,110,.60);
  stroke: rgba(155,164,185,.12);
  stroke-width: .55;
}
.full-map-geometry [data-map-kind="ROOM_FLOOR"] {
  fill: rgba(176,137,99,.52);
  stroke: rgba(242,221,191,.48);
  stroke-width: 1.1;
}
.full-map-geometry [data-map-kind="ROOM_FURNITURE"] {
  fill: rgba(214,226,232,.76);
  stroke: rgba(248,252,253,.36);
  stroke-width: .8;
}
/* Regional paint travels with Biryong geometry, so campus/room maps keep their
   own palette after a source switch. Opaque fills separate roads from solids. */
.minimap-geometry [data-map-style="biryong"][data-map-kind="GROUND"],
.full-map-geometry [data-map-style="biryong"][data-map-kind="GROUND"] {
  fill: #263d40;
  stroke: #526669;
  stroke-width: .6;
  vector-effect: non-scaling-stroke;
}
.minimap-geometry [data-map-style="biryong"][data-map-kind="ROAD"],
.full-map-geometry [data-map-style="biryong"][data-map-kind="ROAD"] {
  fill: #eedfb9;
  stroke: #fff5db;
  stroke-width: .65;
  vector-effect: non-scaling-stroke;
}
.minimap-geometry [data-map-style="biryong"][data-map-kind="BUILDING"],
.full-map-geometry [data-map-style="biryong"][data-map-kind="BUILDING"] {
  fill: #846951;
  stroke: #e8cda5;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.minimap-geometry [data-map-style="biryong"][data-map-kind="WATER"],
.full-map-geometry [data-map-style="biryong"][data-map-kind="WATER"] {
  fill: #237f9e;
  stroke: #9de7f6;
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}
.full-map-marker-layer {
  pointer-events: none;
}
.full-map-pois,
.full-map-social {
  position: absolute;
  inset: 0;
}
.full-map-poi {
  position: absolute;
  translate: -50% -50%;
  scale: var(--full-map-inverse-zoom, 1);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #f2f6fd;
  cursor: pointer;
  pointer-events: auto;
}
.full-map-poi-icon {
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 1px solid rgba(239,242,248,.78);
  border-radius: 50%;
  background: rgba(34,39,54,.98);
  box-shadow: 0 3px 9px rgba(0,0,0,.30);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.full-map-poi:hover .full-map-poi-icon,
.full-map-poi:focus-visible .full-map-poi-icon,
.full-map-poi.is-selected .full-map-poi-icon {
  border-color: #fff2b2;
  box-shadow: 0 0 0 3px rgba(255,222,112,.28), 0 4px 12px rgba(0,0,0,.34);
}
.full-map-poi:focus-visible {
  outline: 2px solid #fff2b2;
  outline-offset: 1px;
}
.full-map-poi[data-emphasized="true"] { z-index: 4; }
.full-map-poi-label {
  position: absolute;
  width: max-content;
  color: #eff2f8;
  font: 800 12px/16px Inter, Pretendard, system-ui, sans-serif;
  letter-spacing: -.01em;
  white-space: nowrap;
  visibility: hidden;
  text-shadow: 0 1px 3px #0a0d14, 1px 0 1px #0a0d14, -1px 0 1px #0a0d14, 0 -1px 1px #0a0d14;
  pointer-events: none;
}
.full-map-poi[data-label-visible="true"] .full-map-poi-label {
  visibility: visible;
  pointer-events: auto;
}
/* Keep the existing F1 stop recognizable by its return glyph, shape and label,
   without moving its marker or changing any other region's exit treatment. */
.minimap-poi[data-poi-id="poi.biryong-realm.return"] .minimap-poi-dot {
  fill: #ffe29a;
  stroke: #553b11;
  stroke-width: 2;
}
.minimap-poi[data-poi-id="poi.biryong-realm.return"] .minimap-poi-glyph {
  fill: #36270d;
  font-weight: 950;
}
.full-map-poi[data-poi-id="poi.biryong-realm.return"] .full-map-poi-icon {
  color: #ffe29a;
  background: #553b11;
  border: 2px solid #ffe29a;
  border-radius: 9px;
}
.full-map-poi[data-poi-id="poi.biryong-realm.return"][data-emphasized="false"] {
  z-index: 1;
}
.full-map-poi[data-poi-id="poi.biryong-realm.return"] .full-map-poi-label {
  color: #ffe29a;
  background: #203137;
  padding: 2px 4px;
  border-radius: 4px;
  /* The full name must fit beside the stop even on the 260px landscape map. */
  max-width: 96px;
  white-space: normal;
  word-break: keep-all;
  text-align: center;
}
.full-map-poi-state {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #aab6c9;
  border-radius: 50%;
  background: #202738;
  color: #f2f6fd;
  box-shadow: 0 1px 3px #10141c;
  pointer-events: none;
}
.full-map-poi-state[hidden] { display: none !important; }
.full-map-poi-state-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.full-map-poi[data-presentation="LOCKED"] .full-map-poi-state { color: #ffe09a; border-color: #ffe09a; }
.full-map-poi[data-presentation="UNDISCOVERED"] .full-map-poi-state { border-style: dashed; }
.full-map-poi[data-presentation="DISABLED"] .full-map-poi-state { color: #ffb9b1; border-color: #ffb9b1; }
@media (max-width: 720px) {
  .full-map-poi-label { font-size: 11px; }
}
.full-map-player,
.full-map-objective,
.full-map-destination,
.full-map-social-marker {
  position: absolute;
  translate: -50% -50%;
  scale: var(--full-map-inverse-zoom, 1);
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* display:grid above would otherwise override the hidden attribute and leave stale markers
   (e.g. a campus destination or tour "!") visible on a room map. */
.full-map-player[hidden],
.full-map-objective[hidden],
.full-map-destination[hidden],
.full-map-social-marker[hidden] {
  display: none !important;
}
.full-map-player {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  color: #11151f;
  border: 2px solid #11151f;
  box-shadow: 0 2px 7px rgba(0,0,0,.46);
  font-size: 13px;
  font-weight: 950;
  z-index: 5;
}
.full-map-objective {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #ffc14d;
  color: #182430;
  border: 2px solid #fff4c9;
  font-weight: 950;
  z-index: 4;
}
.full-map-objective[data-objective-kind="quest-npc"] {
  background: #8fe2d3;
}
.full-map-destination {
  color: #ff7c6d;
  font-size: 26px;
  text-shadow: 0 2px 5px rgba(0,0,0,.55);
  z-index: 4;
}
.full-map-social-marker {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #c0d4de;
  border: 2px solid #1b1f2b;
  z-index: 3;
}
.full-map-social-marker[data-social-kind="friend"] {
  width: 16px;
  height: 16px;
  background: #8fe2d3;
  border-color: #e7fff9;
}
.full-map-info {
  align-self: start;
  display: grid;
  gap: 8px;
  padding: 15px;
  border: 1px solid rgba(178,220,239,.26);
  border-radius: 16px;
  background: rgba(20, 47, 65, .86);
}
.full-map-info[hidden] { display: none !important; }
.full-map-info strong {
  font-size: 18px;
}
#full-map-info-meta {
  color: #b6cbd6;
  font-size: 12px;
}
.full-map-info-actions {
  display: grid;
  gap: 7px;
  margin-top: 6px;
}
.full-map-info-actions button {
  min-height: 40px;
  border: 1px solid rgba(178,220,239,.38);
  border-radius: 11px;
  background: #24516a;
  color: #f5fbfd;
  font-weight: 850;
  cursor: pointer;
}
.full-map-info-actions button:disabled {
  opacity: .48;
  cursor: not-allowed;
}
#full-map-clear-destination {
  background: #4b3a3a;
}

.full-map-controls {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(181, 220, 236, .30);
  border-radius: 14px;
  background: rgba(12, 32, 45, .88);
  box-shadow: 0 5px 18px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  cursor: default;
  pointer-events: auto;
}
.full-map-controls button {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(190,224,239,.34);
  border-radius: 9px;
  background: #1b4359;
  color: #effaff;
  font: 850 12px/1 system-ui, sans-serif;
  cursor: pointer;
}
.full-map-controls button#full-map-zoom-in,
.full-map-controls button#full-map-zoom-out {
  width: 34px;
  padding: 0;
  font-size: 20px;
}
.full-map-controls button:disabled {
  opacity: .42;
  cursor: not-allowed;
}
.full-map-controls button:focus-visible {
  outline: 2px solid #fff0a8;
  outline-offset: 2px;
}
.full-map-zoom-label {
  min-width: 42px;
  color: #c7dce5;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .full-map-panel {
    place-items: start stretch;
    overflow: auto;
  }
  .full-map-card {
    width: 100%;
    max-height: none;
    border-radius: 20px;
  }
  .full-map-body {
    grid-template-columns: 1fr;
    padding: 0 12px 14px;
  }
  .full-map-search { margin-inline: 12px; }
  .full-map-header {
    padding: 14px 12px 9px;
  }
  .full-map-surface {
    width: 100%;
  }
  .full-map-info {
    padding: 12px;
  }
  .full-map-controls {
    left: 8px;
    right: 8px;
    bottom: 8px;
    justify-content: center;
    gap: 5px;
    padding: 5px;
  }
  .full-map-controls button {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 11px;
  }
}

/* Full Map portrait: keep controls outside the drawable map so south-campus geometry/POIs stay visible. */
@media (orientation: portrait) and (max-width: 720px) {
  .full-map-stage {
    display: grid;
    gap: 8px;
  }
  .full-map-controls {
    position: static;
    width: 100%;
    transform: none;
  }
}
.editor-world-runtime-status {
  position: fixed;
  z-index: 200;
  right: 12px;
  bottom: 12px;
  max-width: min(430px, calc(100vw - 24px));
  padding: 8px 11px;
  border: 1px solid #4b879c;
  border-radius: 8px;
  background: #10212be8;
  color: #e2f5fc;
  font: 11px/1.4 system-ui, sans-serif;
}

/* M3 navigation: coral route + ◆ destination (Full Map #full-map-destination colour), kept
   apart from amber quest "!", teal NPC/friend markers and beige road/walkway geometry. */
.minimap-route {
  pointer-events: none;
}
.minimap-route path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.minimap-route-casing {
  stroke: rgba(40, 14, 12, .72);
  stroke-width: 5.2;
}
.minimap-route-line {
  stroke: #ff7c6d;
  stroke-width: 3.1;
}
.minimap-navigation-marker {
  fill: #ff7c6d;
  stroke: #fff1ee;
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2.5px rgba(255, 124, 109, .7));
}
.minimap-navigation-arrow {
  fill: #ff7c6d;
  stroke: rgba(40, 14, 12, .8);
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
  visibility: hidden;
}
.minimap-navigation[data-edge="true"] .minimap-navigation-arrow { visibility: inherit; }
.minimap-navigation[data-edge="true"] .minimap-navigation-marker {
  stroke-dasharray: 2.4 1.2;
}

.nav-guidance {
  --nav-minimap-size: var(--world-right-rail-map-size, 112px);
  --nav-minimap-top: var(--world-right-rail-top, max(66px, calc(env(safe-area-inset-top) + 56px)));
  position: fixed;
  z-index: 10;
  top: calc(var(--nav-minimap-top) + var(--nav-minimap-size) + var(--world-right-rail-gap, 8px));
  right: var(--world-right-rail-right, max(12px, env(safe-area-inset-right)));
  width: max-content;
  max-width: min(236px, calc(100vw - 24px));
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 4px 4px 8px;
  border: 1px solid rgba(255, 164, 150, .55);
  border-radius: 14px;
  background: rgba(20, 46, 64, .86);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.26);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.nav-guidance[hidden] { display: none !important; }
.auto-move-hud {
  top: calc(var(--nav-minimap-top) + var(--nav-minimap-size) + 56px);
  border-color: rgba(143, 226, 211, .6);
}
.auto-move-hud .auto-move-icon {
  background: #8fe2d3;
  color: #123a38;
  transform: none;
}
.auto-move-hud[data-status="PAUSED"] {
  border-color: rgba(255, 223, 144, .66);
}
.auto-move-hud[data-status="PAUSED"] .auto-move-icon {
  background: #ffdf90;
  color: #3b2d0f;
}
#auto-move-detail {
  color: #b9f3e8;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.auto-move-hud[data-status="PAUSED"] #auto-move-detail { color: #ffecb7; }
.auto-move-pause,
.auto-move-resume {
  width: auto;
  min-width: 48px;
  padding: 0 8px;
  font-size: 11px;
}
.nav-guidance-arrow {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ff7c6d;
  color: #2a0f0c;
  font: 950 15px/1 Inter, Pretendard, system-ui, sans-serif;
  transform: rotate(var(--nav-bearing, 0deg));
  transition: transform .12s linear;
}
.nav-guidance:not([data-status="GUIDING"]) .nav-guidance-arrow {
  transform: none;
  font-size: 12px;
}
.nav-guidance[data-status="PAUSED"] .nav-guidance-arrow { background: #9fb3bf; }
.nav-guidance[data-status="ARRIVED"] .nav-guidance-arrow { background: #8fe2d3; }
.nav-guidance[data-status="ARRIVED"] { border-color: rgba(143, 226, 211, .7); }
.nav-guidance-text {
  min-width: 0;
  display: grid;
  line-height: 1.2;
}
.nav-guidance-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
}
#nav-guidance-detail {
  color: #ffd9d3;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nav-guidance[data-status="PAUSED"] #nav-guidance-detail { color: #c8d7df; font-weight: 700; }
.nav-guidance[data-status="ARRIVED"] #nav-guidance-detail { color: #b9f3e8; }
.nav-guidance-cancel {
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(190,224,239,.34);
  border-radius: 10px;
  background: #1b4359;
  color: #effaff;
  font: 800 17px/1 system-ui, sans-serif;
  cursor: pointer;
  pointer-events: auto;
}
.nav-guidance-cancel:focus-visible {
  outline: 2px solid #fff0a8;
  outline-offset: 2px;
}
.nav-guidance-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .nav-guidance-arrow { transition: none; }
}
@media (max-width: 380px), (max-height: 640px) {
  .nav-guidance {
    --nav-minimap-size: 96px;
    max-width: min(210px, calc(100vw - 24px));
  }
}
@media (pointer: fine) and (min-width: 700px) {
  .nav-guidance {
    --nav-minimap-size: 156px;
    --nav-minimap-top: max(54px, calc(env(safe-area-inset-top) + 46px));
    right: max(10px, env(safe-area-inset-right));
  }
}

.full-map-route {
  fill: none;
  stroke: #ff7c6d;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(40, 14, 12, .8));
  pointer-events: none;
}
.full-map-pick {
  position: absolute;
  translate: -50% -50%;
  scale: var(--full-map-inverse-zoom, 1);
  width: 22px;
  height: 22px;
  border: 3px solid #ff7c6d;
  border-radius: 50%;
  background: radial-gradient(circle, #fff1ee 0 3px, rgba(255,124,109,.25) 4px);
  box-shadow: 0 0 0 2px rgba(40,14,12,.7), 0 2px 6px rgba(0,0,0,.45);
  pointer-events: none;
  z-index: 4;
}
.full-map-pick[hidden] { display: none !important; }
.full-map-pick[data-supported="false"] {
  border-color: #9fb3bf;
  border-style: dashed;
  background: radial-gradient(circle, #c8d7df 0 3px, rgba(159,179,191,.2) 4px);
}
.full-map-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 18px 10px;
  padding: 6px 6px 6px 10px;
  border: 1px solid rgba(255, 164, 150, .45);
  border-radius: 12px;
  background: rgba(62, 30, 29, .55);
  font-size: 13px;
  font-weight: 800;
}
.full-map-nav[hidden] { display: none !important; }
.full-map-nav-glyph { color: #ff7c6d; }
.full-map-nav[data-status="ARRIVED"] .full-map-nav-glyph { color: #8fe2d3; }
.full-map-nav[data-status="PAUSED"] .full-map-nav-glyph { color: #9fb3bf; }
.full-map-nav-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.full-map-nav-clear {
  flex: none;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(178,220,239,.38);
  border-radius: 9px;
  background: #4b3a3a;
  color: #f5fbfd;
  font-weight: 850;
  cursor: pointer;
}
@media (max-width: 720px) {
  .full-map-nav { margin: 0 12px 9px; }
}

/* 비룡탑 · 울림돌 · BR01: discovery toast, echo caption, event objective and NPC dialogue. */
#biryong-ui { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
body[data-lobby-shell="true"] > #biryong-ui,
body[data-space]:not([data-space="campus"]) > #biryong-ui { visibility: hidden !important; }
.biryong-ui [hidden] { display: none !important; }
.biryong-toast {
  position: absolute; left: 50%; top: max(84px, calc(env(safe-area-inset-top) + 72px)); transform: translateX(-50%);
  width: min(360px, calc(100vw - 32px)); margin: 0; padding: 12px 16px 13px;
  border: 1px solid rgba(255, 222, 134, .55); border-radius: 14px;
  background: linear-gradient(180deg, rgba(24, 33, 46, .94), rgba(13, 22, 33, .94));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); color: #f4f8f7; text-align: center;
  animation: biryong-toast-in .45s ease-out;
}
.biryong-toast-kicker { margin: 0 0 3px; color: #ffde86; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.biryong-toast-title { display: block; font-size: 20px; font-weight: 850; }
.biryong-toast-detail { margin: 5px 0 0; color: #c9d8dc; font-size: 13px; line-height: 1.45; }
@keyframes biryong-toast-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.biryong-echo-caption {
  position: absolute; left: 50%; top: 34%; transform: translateX(-50%); margin: 0;
  max-width: calc(100vw - 32px); color: #fffaf0; font-size: clamp(22px, 5vw, 34px); font-weight: 850;
  letter-spacing: .02em; text-align: center; text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
  animation: biryong-caption .9s ease-out;
}
@keyframes biryong-caption { from { opacity: 0; letter-spacing: .2em; } to { opacity: 1; letter-spacing: .02em; } }
.biryong-objective {
  position: absolute; left: 50%; top: max(66px, calc(env(safe-area-inset-top) + 56px)); transform: translateX(-50%); margin: 0;
  max-width: min(440px, calc(100vw - 32px)); padding: 7px 13px; border: 1px solid rgba(255, 222, 134, .4);
  border-radius: 14px; background: rgba(10, 16, 25, .78); color: #ffe9a8; font-size: 13px; font-weight: 750;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.biryong-objective-text { display: block; overflow: hidden; text-overflow: ellipsis; }
.biryong-objective-text::before { content: "🐉 "; }
.biryong-cloud-status {
  display: flex; align-items: center; gap: 8px; white-space: normal; overflow-wrap: anywhere; line-height: 1.4;
}
.biryong-objective-text:not([hidden]) + .biryong-cloud-status { margin-top: 6px; }
.biryong-cloud-status > span { min-width: 0; flex: 1; }
.biryong-cloud-retry {
  flex: none; min-height: 44px; padding: 4px 9px; border: 1px solid #7aa8a4; border-radius: 9px;
  background: #244955; color: #f4f8f7; font: inherit; cursor: pointer; pointer-events: auto;
}
.biryong-cloud-retry:focus-visible { outline: 2px solid #ffde86; outline-offset: -3px; }
.biryong-cloud-retry:disabled { opacity: .65; cursor: default; }
@media (max-width: 560px) {
  /* Keep the event objective below the topbar and out of the Mini-map's right-hand column. */
  .biryong-objective {
    left: max(10px, env(safe-area-inset-left));
    right: calc(max(12px, env(safe-area-inset-right)) + 120px);
    transform: none;
    max-width: none;
  }
}
.biryong-dialogue {
  position: absolute; left: 50%; bottom: max(115px, calc(env(safe-area-inset-bottom) + 96px)); transform: translateX(-50%);
  width: min(420px, calc(100vw - 16px)); max-height: min(60vh, 540px); overflow: auto; padding: 10px 12px 12px;
  border: 1px solid #73bdb4; border-radius: 12px; background: #102632f5; color: #f4f8f7;
  font: 14px/1.42 system-ui, sans-serif; box-shadow: 0 8px 28px #0008; pointer-events: auto;
}
.biryong-dialogue-header { display: flex; align-items: center; gap: 10px; }
.biryong-dialogue-portrait {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: #3f6f8f; border: 2px solid #def6e9; color: #102632; font-weight: 900; font-size: 18px;
}
.biryong-dialogue-identity { min-width: 0; flex: 1; }
.biryong-dialogue-identity strong { display: block; font-size: 17px; }
.biryong-dialogue-identity small { display: block; color: #c2d6d3; line-height: 1.35; }
.biryong-dialogue-close {
  align-self: flex-start; min-width: 32px; min-height: 32px; border-radius: 50%;
  font: inherit; color: #f4f8f7; background: #24424b; border: 1px solid #7aa8a4; cursor: pointer;
}
.biryong-dialogue-player {
  max-width: 88%; margin: 12px 0 7px auto; padding: 8px 11px; border-radius: 12px 12px 2px 12px;
  background: #255c68; text-align: right;
}
.biryong-dialogue-line {
  margin: 10px 0; padding: 12px; border-radius: 3px 12px 12px 12px;
  background: #e7f2e9; color: #152d32; font-size: 15px; line-height: 1.5;
}
.biryong-dialogue-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px; margin-top: 10px; }
.biryong-dialogue-choice {
  min-height: 42px; padding: 4px 10px; border-radius: 9px; font: inherit; color: #f4f8f7;
  background: #244955; border: 1px solid #7aa8a4; text-align: left; cursor: pointer;
}
.biryong-dialogue-choice:hover, .biryong-dialogue-choice:focus-visible { background: #2d5c69; outline: 2px solid #ffde86; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .biryong-toast, .biryong-echo-caption { animation: none; }
}


/* Main 02 · fixed back-gate guide NPC dialogue. */
.main2-guide-dialogue {
  position: fixed;
  left: 50%;
  bottom: max(115px, calc(env(safe-area-inset-bottom) + 96px));
  z-index: 101;
  width: min(420px, calc(100vw - 24px));
  transform: translateX(-50%);
  padding: 12px;
  border: 1px solid rgba(157, 228, 207, .64);
  border-radius: 14px;
  background: rgba(16, 38, 50, .97);
  color: #f4f8f7;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .45);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}
.main2-guide-dialogue[hidden] { display: none !important; }
.main2-guide-dialogue-header { display: flex; align-items: center; gap: 10px; }
.main2-guide-dialogue-portrait {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: 2px solid #def6e9;
  border-radius: 50%;
  background: #efc85a;
  color: #18303a;
  font-weight: 900;
}
.main2-guide-dialogue-identity { min-width: 0; flex: 1; }
.main2-guide-dialogue-identity strong { display: block; font-size: 17px; }
.main2-guide-dialogue-identity small { display: block; margin-top: 2px; color: #c2d6d3; font-size: 12px; }
.main2-guide-dialogue-close {
  align-self: flex-start;
  min-width: 32px;
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor: pointer;
}
.main2-guide-dialogue-line {
  margin: 10px 0;
  padding: 12px;
  border-radius: 3px 12px 12px 12px;
  background: #e7f2e9;
  color: #152d32;
  font-size: 15px;
  line-height: 1.5;
}
.main2-guide-dialogue-choices { display: grid; gap: 7px; }
.main2-guide-dialogue-choice {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #7aa8a4;
  border-radius: 9px;
  background: #244955;
  color: #f4f8f7;
  font: inherit;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}
.main2-guide-dialogue-choice:disabled { opacity: .55; cursor: wait; }
body[data-lobby-shell="true"] > .main2-guide-dialogue,
body[data-space]:not([data-space="campus"]) > .main2-guide-dialogue { display: none !important; }
@media (max-width: 560px) {
  .main2-guide-dialogue {
    bottom: max(104px, calc(env(safe-area-inset-bottom) + 88px));
    width: min(420px, calc(100vw - 16px));
    padding: 10px;
  }
}


/* Tracked Quest HUD P2: one card for the Quest Runtime's single tracked quest. */
.tracked-quest-hud {
  width: min(360px, calc(100vw - 24px));
  min-height: 56px;
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.tracked-quest-hud[hidden] { display: none !important; }
.tracked-quest-hud-open {
  width: 100%;
  min-width: 0;
  min-height: 56px !important;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-areas:
    "flag heading bearing"
    "flag objective bearing";
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: transparent !important;
  color: inherit !important;
  text-align: left;
  cursor: pointer;
}
.tracked-quest-hud-open:hover { background: rgba(255,255,255,.055) !important; }
.tracked-quest-hud-open:focus-visible { outline: 2px solid #ffdf90; outline-offset: -3px; }
.tracked-quest-hud .tour-flag { grid-area: flag; font-size: 16px; }
.tracked-quest-hud .tour-heading {
  grid-area: heading;
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffdfa3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}
.tracked-quest-hud .tour-objective {
  grid-area: objective;
  max-width: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.25;
}
.tracked-quest-bearing {
  grid-area: bearing;
  min-width: 68px;
  padding: 7px 8px;
  border: 1px solid rgba(214,235,249,.22);
  border-radius: 10px;
  background: rgba(6,22,34,.48);
  color: #eef8ff;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  letter-spacing: .01em;
}
.tracked-quest-bearing[hidden] { display: none !important; }
body[data-lobby-shell="true"] > .tracked-quest-hud,
body[data-space]:not([data-space="campus"]) > .tracked-quest-hud { display: none !important; }

@media (max-width: 560px) {
  .tracked-quest-hud {
    right: max(10px, env(safe-area-inset-right));
    width: auto;
    max-width: none;
    min-height: 64px;
  }
  .tracked-quest-hud-open {
    min-height: 64px !important;
    grid-template-columns: 18px minmax(0, 1fr);
    grid-template-areas:
      "flag heading"
      "flag objective"
      "bearing bearing";
    column-gap: 6px;
    row-gap: 2px;
    padding: 7px 9px !important;
  }
  /* Mini-map owns the top-right 112px rail; the single tracked card never slides underneath it. */
  body:has(> #minimap:not([hidden])) > .tracked-quest-hud {
    right: calc(max(12px, env(safe-area-inset-right)) + 120px);
  }
  .tracked-quest-hud .tour-flag { align-self: start; margin-top: 2px; font-size: 14px; }
  .tracked-quest-hud .tour-heading { font-size: 9.5px; }
  .tracked-quest-hud .tour-objective { max-width: none; font-size: 12px; }
  .tracked-quest-bearing {
    justify-self: start;
    min-width: 0;
    max-width: 100%;
    padding: 4px 7px;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tracked-quest-hud .next-discovery { padding: 0 9px 7px; }
}
@media (max-width: 380px) {
  .tracked-quest-hud .tour-heading { display: block; }
}

/* BG01 · Back Gate first-arrival cinematic. Runtime DOM is created by back-gate-arrival-event.js. */
#back-gate-arrival-ui {
  position: fixed;
  inset: 0;
  z-index: 34;
  pointer-events: none;
  color: #fff;
  font-family: inherit;
}
#back-gate-arrival-ui[hidden] { display: none !important; }
.back-gate-arrival-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 48%, transparent 39%, rgba(4,9,16,.14) 75%, rgba(4,9,16,.42) 100%);
}
.back-gate-cinematic-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(24px, 5.5vh, 58px);
  background: rgba(5,10,16,.9);
}
.back-gate-cinematic-bar.top { top: 0; }
.back-gate-cinematic-bar.bottom { bottom: 0; }
.back-gate-arrival-title,
.back-gate-guide-line {
  position: absolute;
  opacity: 0;
  transition: opacity .42s ease, transform .42s ease;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.back-gate-arrival-title {
  top: 15%;
  left: 50%;
  width: min(620px, calc(100vw - 36px));
  transform: translate(-50%, 12px);
  text-align: center;
}
.back-gate-arrival-title small {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #f0ca66;
}
.back-gate-arrival-title strong {
  display: block;
  font-size: clamp(25px, 4vw, 42px);
  letter-spacing: -.03em;
}
.back-gate-guide-line {
  left: 50%;
  bottom: clamp(82px, 15vh, 150px);
  width: min(720px, calc(100vw - 32px));
  transform: translate(-50%, 12px);
  padding: 15px 18px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(7,14,23,.82);
  backdrop-filter: blur(9px);
}
.back-gate-guide-line strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #efc85a;
}
.back-gate-guide-line p {
  margin: 0;
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.55;
}
#back-gate-arrival-ui[data-beat="ARRIVAL"] .back-gate-arrival-title {
  opacity: 1;
  transform: translate(-50%, 0);
}
#back-gate-arrival-ui[data-beat="GUIDE"] .back-gate-guide-line {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (max-width: 640px) {
  .back-gate-guide-line { bottom: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .back-gate-arrival-title,
  .back-gate-guide-line { transition: none; }
}

/* P0-F3a · Progression HUD: read-only server Level / EXP. Wide screens show a small pill under the
   location chip (clear of the Main Quest HUD on the left and the Mini-map on the right); narrower
   screens show only a compact Lv badge inside the location chip, with the full EXP line in the menu. */
.progression-bar {
  display: block;
  overflow: hidden;
  height: 3px;
  border-radius: 2px;
  background: rgba(178,220,239,.28);
}
.progression-bar[hidden] { display: none; }
.progression-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #ffde86;
}
.progression-badge {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 2px;
  padding-left: 7px;
  border-left: 1px solid rgba(178,220,239,.34);
  color: #ffde86;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.progression-badge .progression-bar { width: 100%; min-width: 26px; }
.progression-badge[hidden] { display: none; }
.progression-hud {
  position: fixed;
  z-index: 16;
  top: max(54px, calc(env(safe-area-inset-top) + 46px));
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(178,220,239,.32);
  border-radius: 999px;
  background: rgba(16,40,60,.74);
  color: #e8f3f8;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.progression-hud strong { color: #ffde86; font-weight: 900; }
.progression-hud .progression-bar { width: 56px; }
.progression-menu-line {
  margin: -3px 4px 7px;
  color: #ffde86;
  font-size: 11px;
  font-weight: 800;
}
.progression-menu-line[hidden] { display: none; }
@media (min-width: 960px) {
  .progression-hud:not([hidden]) { display: flex; }
  .progression-badge { display: none !important; }
}
body[data-lobby-shell="true"] > .progression-hud,
body[data-space]:not([data-space="campus"]) > .progression-hud { display: none !important; }

/* P0-F3b · Student Center shop panel. Deliberately plain: name, description, price, Level, status and
   one buy button per offer. Lock / buyable state comes from the server offer (see shop-panel.js). */
.shop-panel {
  /* A modal: above the fixed event chip / HUD (z 65–66), below event dialogue & modal (102+). */
  z-index: 70;
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  padding: 18px 16px 16px;
}
.shop-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.shop-panel-titles h2 { margin: 0; }
.shop-panel-level { margin: 4px 0 0; color: #ffde86; font-size: 12px; font-weight: 800; }
.shop-panel-titles { min-width: 0; }
.shop-panel-wallet {
  margin: 4px 0 0;
  color: #fff3c4;
  font-size: 13px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.shop-panel-wallet[hidden] { display: none; }
.shop-panel-wallet[data-state="UNAVAILABLE"] { color: #acc3d1; font-weight: 700; }
.shop-hint {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #0b1d2bcc;
  color: #ffdf90;
  font-size: 13px;
  font-weight: 700;
}
.shop-hint[hidden] { display: none; }
.shop-panel-body { min-height: 0; margin-top: 12px; overflow-y: auto; overscroll-behavior: contain; }
.shop-empty { margin: 8px 0; color: #acc3d1; font-size: 13px; }
.shop-retry,
.shop-offer-buy {
  min-width: 72px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #8fe2d3;
  border-radius: 12px;
  background: #196d65;
  color: #fff;
  font-weight: 850;
  cursor: pointer;
  touch-action: manipulation;
}
.shop-offer-buy:disabled { border-color: #5c7281; background: #2a3d4b; color: #9fb3bf; cursor: not-allowed; }
.shop-offers { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.shop-offer {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(178,220,239,.28);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}
.shop-offer-locked { border-style: dashed; opacity: .9; }
.shop-offer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.shop-offer-name { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.shop-offer-price { flex: none; color: #ffde86; font-size: 13px; font-weight: 850; white-space: nowrap; }
.shop-offer-description { margin: 4px 0 0; color: #acc3d1; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.shop-offer-furniture, .shop-furniture-note { margin: 6px 0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.shop-offer-furniture { color: #c5dded; }
.shop-furniture-receipt { margin-top: 10px; padding-top: 8px; border-top: 1px solid #5c7281; }
.shop-furniture-action { max-width: 100%; min-height: 44px; padding: 8px 12px; white-space: normal; }
.shop-furniture-action:disabled { background: #2a3d4b; color: #c5dded; cursor: wait; }
.shop-purchased-furniture { margin-top: 12px; padding: 10px; border: 1px solid #5c7281; border-radius: 12px; }
.shop-offer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.shop-offer-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-size: 12px; font-weight: 800; }
.shop-offer-level { color: #d6ebf9; }
.shop-offer-status { color: #8ef0b0; }
.shop-offer-locked .shop-offer-status { color: #ffd98a; }
.shop-offer-unavailable .shop-offer-status { color: #9fb3bf; }
/* Inventory P0 · read-only owned items. Reuses the shop modal shell (.shop-panel head/body); cards are
   text-only (no icon assets yet): name, quantity, description, kind · rarity, source, catalog status. */
/* 44px touch target for the close button (the shared .profile-close glyph is smaller). */
.inventory-panel .profile-close { display: grid; place-items: center; min-width: 44px; min-height: 44px; top: 6px; right: 8px; padding: 0; }
.inventory-panel .shop-panel-titles { padding-right: 40px; }
.inventory-summary { margin: 4px 0 0; color: #ffde86; font-size: 12px; font-weight: 800; }
.inventory-tabs {
  display: flex; gap: 6px; margin: 0 0 10px; padding: 0 0 2px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.inventory-tab {
  flex: 0 0 auto; min-width: 58px; min-height: 44px; padding: 0 12px;
  border: 1px solid rgba(178,220,239,.34); border-radius: 12px;
  background: rgba(255,255,255,.045); color: #cfe5f3; font-size: 12px; font-weight: 850; cursor: pointer;
}
.inventory-tab:hover { background: rgba(255,255,255,.08); }
.inventory-tab[aria-selected="true"] { border-color: #8fe2d3; background: #196d65; color: #fff; }
.inventory-tab:focus-visible { outline: 2px solid #ffde86; outline-offset: 2px; }
.inventory-items { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.inventory-item {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(178,220,239,.28);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}
.inventory-item-with-icon { display: flex; align-items: flex-start; gap: 12px; }
.inventory-item-copy { flex: 1; min-width: 0; }
.item-icon {
  display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px;
  overflow: hidden; border-radius: 10px; background: rgba(178,220,239,.06);
}
.item-icon-image { width: 100%; height: 100%; object-fit: contain; }
.item-icon-fallback { color: #acc3d1; font-size: 24px; line-height: 1; }
.item-icon > [hidden] { display: none; }
.inventory-item-muted { border-style: dashed; opacity: .78; }
.inventory-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.inventory-item-name { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.inventory-item-quantity { flex: none; color: #ffde86; font-size: 13px; font-weight: 850; white-space: nowrap; }
.inventory-item-description { margin: 4px 0 0; color: #acc3d1; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.inventory-item-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; min-width: 0; font-size: 12px; font-weight: 800; }
.inventory-item-kind { color: #d6ebf9; }
.inventory-item-source { color: #9fc4d6; }
.inventory-item-status {
  padding: 0 6px;
  border: 1px solid rgba(255,217,138,.55);
  border-radius: 999px;
  color: #ffd98a;
}

/* Quest Journal P1 · one MAIN/SIDE journal over the existing quest authorities. */
.quest-journal-panel {
  width: min(760px, calc(100vw - 32px));
  max-height: min(680px, calc(100dvh - 40px));
}
.quest-journal-summary { margin: 4px 0 0; color: #acc3d1; font-size: 12px; line-height: 1.45; }
.quest-journal-tabs { display: flex; gap: 8px; margin-top: 12px; }
.quest-journal-tab {
  min-width: 88px; min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(178,220,239,.42); border-radius: 12px;
  background: rgba(255,255,255,.05); color: #dceffc; font-weight: 850; cursor: pointer;
}
.quest-journal-tab[aria-pressed="true"] { border-color: #8fe2d3; background: #196d65; color: #fff; }
.quest-journal-body {
  display: grid; grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); gap: 12px;
  min-height: 300px; margin-top: 12px; overflow: hidden;
}
.quest-journal-list {
  display: grid; align-content: start; gap: 7px; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.quest-journal-item {
  display: grid; gap: 3px; position: relative; width: 100%; min-height: 64px; padding: 10px 12px;
  border: 1px solid rgba(178,220,239,.25); border-radius: 13px;
  background: rgba(255,255,255,.035); color: #eef8ff; text-align: left; cursor: pointer;
}
.quest-journal-item[aria-pressed="true"] { border-color: #8fe2d3; background: rgba(25,109,101,.34); }
.quest-journal-item[data-state="LOCKED"] { opacity: .65; border-style: dashed; }
.quest-journal-item strong { overflow-wrap: anywhere; font-size: 13px; }
.quest-journal-item > span { color: #acc3d1; font-size: 11px; font-weight: 750; }
.quest-journal-tracked { color: #ffde86; font-size: 10px; font-weight: 900; }
.quest-journal-detail {
  min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px; border: 1px solid rgba(178,220,239,.18); border-radius: 15px;
  background: rgba(6,21,34,.34);
}
.quest-journal-kicker { color: #8fe2d3; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.quest-journal-detail h3 { margin: 4px 0 2px; font-size: 20px; overflow-wrap: anywhere; }
.quest-journal-state {
  display: inline-flex; margin-top: 5px; padding: 3px 8px; border-radius: 999px;
  background: rgba(143,226,211,.12); color: #a9f4e6; font-size: 11px; font-weight: 850;
}
.quest-journal-state[data-state="LOCKED"] { background: rgba(255,255,255,.06); color: #9fb3bf; }
.quest-journal-state[data-state="COMPLETED"], .quest-journal-state[data-state="CLAIMED"] {
  background: rgba(142,240,176,.12); color: #8ef0b0;
}
.quest-journal-description { margin: 10px 0 0; color: #bfd7e7; font-size: 13px; line-height: 1.55; }
.quest-journal-objective {
  display: grid; gap: 4px; margin-top: 14px; padding: 12px;
  border-radius: 13px; background: rgba(255,222,134,.08); border: 1px solid rgba(255,222,134,.22);
}
.quest-journal-objective-label { color: #ffde86; font-size: 11px; font-weight: 900; }
.quest-journal-objective strong { font-size: 14px; line-height: 1.45; }
.quest-journal-complete { margin: 14px 0 0; color: #8ef0b0; font-weight: 850; }
.quest-journal-progress {
  display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; margin-top: 14px;
  color: #acc3d1; font-size: 12px; font-weight: 800;
}
.quest-journal-progress progress { grid-column: 1 / -1; width: 100%; height: 8px; accent-color: #8fe2d3; }
.quest-journal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.quest-journal-primary, .quest-journal-secondary {
  min-height: 44px; padding: 0 14px; border-radius: 12px; font-weight: 850; cursor: pointer;
}
.quest-journal-primary { border: 1px solid #8fe2d3; background: #196d65; color: #fff; }
.quest-journal-secondary { border: 1px solid rgba(178,220,239,.42); background: #193650; color: #eef8ff; }
.quest-journal-secondary:disabled { opacity: .65; cursor: default; }
.quest-journal-empty { grid-column: 1 / -1; margin: 16px 4px; color: #acc3d1; font-size: 13px; }
@media (max-width: 640px) {
  .quest-journal-panel { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 16px 12px 12px; }
  .quest-journal-body { grid-template-columns: 1fr; min-height: 0; }
  .quest-journal-list { display: flex; overflow-x: auto; overflow-y: hidden; max-height: 90px; padding-bottom: 2px; }
  .quest-journal-item { flex: 0 0 min(230px, 76vw); min-height: 68px; }
  .quest-journal-detail { min-height: 250px; }
  .quest-journal-tabs { margin-top: 8px; }
  .quest-journal-tab { flex: 1; }
}
/* Wardrobe P0 · server loadout (9 slots) + owned wearables. Reuses the shop/inventory modal shell and
   inventory cards; buttons keep the 44px touch target. */
.wardrobe-subtitle { margin: 4px 0 0; color: #acc3d1; font-size: 12px; }
.wardrobe-section-title { margin: 4px 0 8px; color: #d6ebf9; font-size: 13px; font-weight: 850; }
.wardrobe-owned { margin-top: 14px; }
.wardrobe-slots { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wardrobe-slot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 44px;
  padding: 4px 10px; border: 1px solid rgba(178,220,239,.22); border-radius: 12px; background: rgba(255,255,255,.03);
}
.wardrobe-slot-empty { border-style: dashed; }
.wardrobe-slot-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.wardrobe-slot-label { color: #9fc4d6; font-size: 11px; font-weight: 800; }
.wardrobe-slot-item { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.wardrobe-slot-empty .wardrobe-slot-item { color: #8aa3b2; font-weight: 700; }
.wardrobe-item-equipped { border-color: rgba(142,240,176,.6); }
.wardrobe-equipped-chip { flex: none; color: #8ef0b0; font-size: 12px; font-weight: 850; white-space: nowrap; }
.wardrobe-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.wardrobe-item-foot .inventory-item-meta { margin-top: 0; }

/* P1e · Campus Daily Quiz: the shop / inventory panel with one question card and four answer buttons. */
.daily-quiz-card { display: grid; gap: 8px; }
.daily-quiz-step { color: #ffde86; font-size: 12px; font-weight: 850; }
.daily-quiz-prompt { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.daily-quiz-options { display: grid; gap: 8px; }
.daily-quiz-option { width: 100%; text-align: left; overflow-wrap: anywhere; }
.daily-quiz-start { width: 100%; margin-top: 10px; }
.daily-quiz-rewards { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none;
  color: #fff3c4; font-size: 13px; font-weight: 850; }
.daily-quiz-feedback { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 850; }
.daily-quiz-correct { background: #1a4d3acc; color: #b8f5d4; }
.daily-quiz-wrong { background: #4d2a2acc; color: #ffc9c0; }

/* P1f · 캠퍼스 출석부: summary card, milestone row and a month stamp grid in the shop / inventory panel. */
.attendance-summary { display: grid; gap: 8px; }
.attendance-done { color: #b8f5d4; }
.attendance-rewards { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none;
  color: #fff3c4; font-size: 13px; font-weight: 850; }
.attendance-claim { width: 100%; min-height: 48px; }
.attendance-milestones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.attendance-milestone { display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border: 1px solid rgba(178,220,239,.28);
  border-radius: 10px; color: #acc3d1; font-size: 12px; font-weight: 800; }
.attendance-milestone-claimed { border-color: #8fe2d3; color: #b8f5d4; }
.attendance-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.attendance-weekday { color: #9fc4d6; font-size: 11px; font-weight: 800; text-align: center; }
.attendance-day { display: grid; place-items: center; min-height: 32px; border-radius: 8px; background: rgba(255,255,255,.04);
  color: #d6ebf9; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.attendance-blank { background: none; }
.attendance-stamped { background: #1a4d3acc; font-size: 16px; }
.attendance-today { outline: 2px solid #ffde86; outline-offset: -2px; }
.attendance-future { opacity: .45; }

/* Life Skill Book P0: skill rows, tree node cards and the free reset in the shop / inventory panel. */
.life-skill-list, .life-node-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.life-skill-row { display: grid; gap: 4px; }
.life-skill-open { justify-self: start; padding: 0; border: 0; background: none; color: #fff3c4; font: inherit;
  font-size: 15px; font-weight: 900; text-align: left; cursor: pointer; touch-action: manipulation; }
.life-skill-sp { color: #b8f5d4; font-weight: 850; }
.life-skill-back { margin-bottom: 8px; }
.life-tree-summary { display: grid; gap: 4px; margin-bottom: 8px; }
.life-node { display: grid; gap: 4px; }
.life-node-ready { border-color: #8fe2d3; }
.life-node-facts { color: #9fc4d6; font-size: 12px; }
.life-node-prerequisites { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 12px; font-weight: 800; }
.life-prerequisite-met { color: #b8f5d4; }
.life-prerequisite-missing { color: #ffc9c0; }
.life-node-lock { margin: 0; }
.life-node-unlock { width: 100%; min-height: 44px; }
.life-tree-reset { display: grid; gap: 6px; margin-top: 10px; }
.life-tree-reset-button { width: 100%; min-height: 44px; }
.life-tree-reset-button:disabled { opacity: .5; cursor: not-allowed; }
.fishing-panel { width: min(360px, calc(100vw - 24px)); }
.fishing-body { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }
.fishing-skill { margin: 0; }
.fishing-bobber { font-size: 44px; line-height: 1; transition: transform .12s ease-out; }
.fishing-bobber[data-phase="BITE"] { transform: translateY(6px) scale(1.15); animation: fishing-bite .25s ease-in-out infinite alternate; }
@keyframes fishing-bite { from { transform: translateY(2px) scale(1.1); } to { transform: translateY(8px) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .fishing-bobber[data-phase="BITE"] { animation: none; } }
.fishing-status, .fishing-result { margin: 0; font-size: 15px; font-weight: 850; }
.fishing-panel[data-phase="BITE"] .fishing-status { color: #ffde86; }
.fishing-reward { margin: 0; color: #9ff0d6; font-weight: 800; font-variant-numeric: tabular-nums; }
.fishing-panel .shop-offer-buy, .fishing-panel .shop-retry { width: 100%; }
.wardrobe-action {
  flex: none; min-width: 72px; min-height: 44px; padding: 0 14px; border: 1px solid #8fe2d3; border-radius: 12px;
  background: #196d65; color: #fff; font-weight: 850; cursor: pointer; touch-action: manipulation;
}
.wardrobe-action:disabled { border-color: #5c7281; background: #2a3d4b; color: #9fb3bf; cursor: not-allowed; }
.wardrobe-unknown { margin-top: 12px; padding: 8px 10px; border: 1px dashed rgba(255,217,138,.45); border-radius: 12px; }
.wardrobe-unknown-title { margin: 0 0 4px; color: #ffd98a; font-size: 12px; font-weight: 850; }
.wardrobe-unknown-list { margin: 0; padding-left: 16px; color: #acc3d1; font-size: 12px; overflow-wrap: anywhere; }
.wardrobe-note { margin: 12px 0 0; color: #8aa3b2; font-size: 11px; }

/* The ☰ menu is a transient dropdown the player opened on purpose; the fixed event chip (z-index 65,
   right column) must not sit on top of its rows and swallow their clicks. */
body:has(#hud-menu:not([hidden])) > .mcm26-chip,
body:has(#view-settings:not([hidden])) > .mcm26-chip { visibility: hidden; pointer-events: none; }

/* Right HUD rail: reserve one 48px row for guidance and another for auto-move when present. */
body:has(#nav-guidance:not([hidden])) {
  --world-right-rail-event-top: calc(
    var(--world-right-rail-top) + var(--world-right-rail-map-size) + 56px
  );
}
body:has(#auto-move-hud:not([hidden])) {
  --world-right-rail-event-top: calc(
    var(--world-right-rail-top) + var(--world-right-rail-map-size) + 104px
  );
}


/* CORE-15 C15.3 · one-time Inkyung interaction-density guide.
   On mobile this is a brief toast, then a small reopen chip so the world keeps the center lane clear. */
.inkyung-living-moment {
  position: fixed;
  z-index: 11;
  top: max(66px, calc(env(safe-area-inset-top) + 56px));
  right: max(12px, env(safe-area-inset-right));
  width: min(300px, calc(100vw - 24px));
  color: #f4fffa;
  pointer-events: none;
}
.inkyung-living-moment[hidden] { display: none !important; }
.inkyung-living-panel {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border: 1px solid rgba(146, 221, 183, .38);
  border-radius: 14px;
  background: rgba(13, 48, 46, .84);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  backdrop-filter: blur(8px);
}
.inkyung-living-toggle {
  display: none;
  min-height: 38px;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid rgba(146, 221, 183, .42);
  border-radius: 999px;
  background: rgba(13, 48, 46, .9);
  color: #f4fffa;
  box-shadow: 0 8px 22px rgba(0,0,0,.2);
  backdrop-filter: blur(8px);
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  pointer-events: auto;
  touch-action: manipulation;
}
.inkyung-living-count {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(155, 231, 189, .17);
  color: #bff6d4;
  font-size: 10px;
}
.inkyung-living-moment[data-mode="COLLAPSED"] {
  width: auto;
}
.inkyung-living-moment[data-mode="COLLAPSED"] .inkyung-living-panel {
  display: none;
}
.inkyung-living-moment[data-mode="COLLAPSED"] .inkyung-living-toggle {
  display: flex;
}
.inkyung-living-kicker {
  color: #9be7bd;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
}
.inkyung-living-moment strong { font-size: 13px; }
.inkyung-living-actions {
  color: #d8efe3;
  font-size: 11px;
  line-height: 1.45;
}
body[data-lobby-shell="true"] > .inkyung-living-moment,
body[data-lobby-transition="true"] > .inkyung-living-moment,
body[data-space]:not([data-space="campus"]) > .inkyung-living-moment {
  display: none !important;
}
@media (max-width: 560px) {
  .inkyung-living-moment {
    /* Share the same rail baseline as the event chip; when the event is visible, live below it. */
    top: calc(
      var(--world-right-rail-top, max(66px, calc(env(safe-area-inset-top) + 56px)))
      + var(--world-right-rail-map-size, 112px)
      + var(--world-right-rail-gap, 8px)
    );
    right: max(10px, env(safe-area-inset-right));
    width: min(230px, calc(100vw - 20px));
  }
  .inkyung-living-panel {
    padding: 8px 10px;
  }
  .inkyung-living-moment strong { font-size: 12px; }
  .inkyung-living-actions { font-size: 10px; }
  .inkyung-living-moment[data-mode="COLLAPSED"] { width: auto; }
  body:has(> .mcm26-chip:not([hidden])) > .inkyung-living-moment {
    top: calc(var(--world-right-rail-event-top) + 44px);
  }
}


/* Main 1 → Main 2: one action inside the existing quest HUD, no floating card. */
.next-discovery { justify-self: end; padding: 0 10px 8px; }
.next-discovery[hidden] { display: none !important; }
#next-discovery-primary {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(255,221,144,.58);
  border-radius: 10px;
  background: rgba(255,212,134,.13);
  color: #eef8ff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  pointer-events: auto;
}


/* Main Lobby P2 · "오늘의 캠퍼스": one compact card under the Main Gate, two launcher buttons side by side.
   Same border / blur / radius language as the quest highlight; the Main Gate stays the primary action. */
.world-lobby-daily-loop {
  width: min(420px, 94%);
  justify-self: center;
  padding: 7px 9px 8px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(178,220,239,.22);
  border-radius: 14px;
  background: rgba(9,31,46,.58);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.world-lobby-daily-loop[hidden],
.world-lobby-daily-loop-note[hidden] { display: none !important; }
.world-lobby-daily-loop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}
.world-lobby-daily-loop-kicker {
  color: #b9dff0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
}
.world-lobby-daily-loop-note {
  color: #9fe1b6;
  font-size: 9px;
  font-weight: 800;
  text-align: right;
}
.world-lobby-daily-loop-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.world-lobby-daily-row {
  min-width: 0;
  min-height: 40px;
  padding: 5px 8px;
  display: grid;
  gap: 1px;
  align-content: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 11px;
  background: rgba(255,255,255,.05);
  color: #eef8ff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}
.world-lobby-daily-row:hover { border-color: rgba(178,220,239,.4); background: rgba(255,255,255,.09); }
.world-lobby-daily-row:focus-visible { outline: 2px solid #ffdf90; outline-offset: 2px; }
.world-lobby-daily-row-label { font-size: 12px; font-weight: 850; line-height: 1.2; }
.world-lobby-daily-row-status {
  color: #c7dbe5;
  font-size: 10.5px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.world-lobby-daily-row[data-status="ACTIONABLE"] .world-lobby-daily-row-status,
.world-lobby-daily-row[data-status="IN_PROGRESS"] .world-lobby-daily-row-status { color: #ffdf90; }
.world-lobby-daily-row[data-status="COMPLETE"] .world-lobby-daily-row-status { color: #9fe1b6; }
@media (max-width: 959px) {
  /* Phones / tablets: the title becomes a narrow left column so the card is one row of launchers (~48px). */
  .world-lobby-daily-loop {
    padding: 5px 7px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
  }
  .world-lobby-daily-loop-head { padding: 0 0 0 2px; }
  .world-lobby-daily-loop-kicker { display: block; max-width: 3.6em; line-height: 1.25; letter-spacing: 0; }
  .world-lobby-daily-loop-note { display: none !important; }
  .world-lobby-daily-row { min-height: 38px; padding: 4px 7px; }
  .world-lobby-daily-row-status { font-size: 10px; }
}
@media (max-width: 560px) {
  .world-lobby-daily-loop { width: min(340px, 96%); }
}
@media (max-width: 380px) and (max-height: 720px) {
  .world-lobby-daily-loop { grid-template-columns: minmax(0, 1fr); padding: 4px 6px; }
  .world-lobby-daily-loop-head { display: none; }
  .world-lobby-daily-row { min-height: 34px; }
}
/* Wide screens: the card sits beside the entry column, out of flow, so the stage / Main Gate stack (and the
   avatar clearance above the quest highlight) is exactly what it was without the card. */
@media (min-width: 960px) {
  .world-lobby-entry-slot { position: relative; }
  .world-lobby-daily-loop {
    position: absolute;
    left: calc(100% + 16px);
    bottom: 18px;
    width: 216px;
    padding: 8px 10px 10px;
  }
  .world-lobby-daily-loop-rows { grid-template-columns: minmax(0, 1fr); }
}

/* Main Lobby mobile-landscape correction.
   Width-only desktop rules are a poor proxy on phones held sideways: keep the useful
   identity/presence facts, but collapse them into small pills and spend the scarce
   vertical space on the actual entry actions. */
@media (orientation: landscape) and (max-height: 640px) and (pointer: coarse) {
  .world-lobby {
    grid-template-rows: 40px minmax(0, 1fr);
    padding:
      max(6px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }
  .world-lobby-topbar { min-height: 38px; }
  .world-lobby-brand { font-size: 12px; }
  .world-lobby-menu-button { width: 38px; height: 38px; border-radius: 11px; }
  .world-lobby-menu {
    top: max(48px, calc(env(safe-area-inset-top) + 42px));
    right: max(10px, env(safe-area-inset-right));
  }

  .world-lobby-player-summary {
    top: max(50px, calc(env(safe-area-inset-top) + 44px));
    left: max(10px, env(safe-area-inset-left));
    width: auto;
    min-width: 0;
    max-width: min(230px, 32vw);
    min-height: 34px;
    padding: 6px 9px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 12px;
  }
  .world-lobby-player-eyebrow,
  #lobby-player-look,
  #lobby-player-account { display: none; }
  .world-lobby-player-summary strong {
    max-width: 112px;
    margin: 0;
    font-size: 13px;
  }
  .world-lobby-player-stats {
    margin: 0;
    flex-wrap: nowrap;
    gap: 3px 5px;
    font-size: 9px;
  }

  .world-lobby-presence-summary {
    top: max(50px, calc(env(safe-area-inset-top) + 44px));
    right: max(58px, calc(env(safe-area-inset-right) + 48px));
    width: auto;
    min-width: 0;
    max-width: min(220px, 31vw);
    min-height: 34px;
    padding: 6px 9px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 12px;
  }
  .world-lobby-presence-eyebrow { font-size: 8px; }
  .world-lobby-presence-summary strong {
    font-size: 11px;
    white-space: nowrap;
  }
  #lobby-friends-summary { display: none; }

  .world-lobby-frame { width: min(720px, calc(100% - 20px)); }
  .world-lobby-stage-slot { padding: 40px 0 4px; }
  .world-lobby-avatar-slot { width: 78px; height: 96px; }
  .world-lobby-entry-slot {
    width: min(420px, calc(100vw - 32px));
    gap: 5px;
    padding-bottom: 0;
  }
  .world-lobby-quest-highlight {
    width: 100%;
    min-height: 32px;
    padding: 4px 8px;
  }
  .world-lobby-main-gate {
    min-height: 60px;
    padding: 8px 12px;
    gap: 2px 10px;
    border-radius: 15px;
  }
  .world-lobby-card-kicker { font-size: 10px; }
  .world-lobby-main-gate strong { font-size: 14px; }
  .world-lobby-card-action { font-size: 11px; }

  .world-lobby-daily-loop {
    position: static;
    left: auto;
    bottom: auto;
    width: 100%;
    padding: 4px 6px;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .world-lobby-daily-loop-head { display: none; }
  .world-lobby-daily-loop-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  .world-lobby-daily-row {
    min-height: 32px;
    padding: 3px 6px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
  }
  .world-lobby-daily-row-label { font-size: 10px; white-space: nowrap; }
  .world-lobby-daily-row-status { font-size: 9px; }

  .world-lobby-secondary-slot {
    width: 100%;
    min-height: 30px;
    border-radius: 11px;
  }
  .world-lobby-resume,
  .world-lobby-locked-gate { padding: 4px 8px; }
  .world-lobby-resume strong,
  .world-lobby-locked-gate strong { font-size: 10px; }
  .world-lobby-resume small,
  .world-lobby-locked-gate small,
  .world-lobby-resume-age { font-size: 9px; }
}

@media (orientation: landscape) and (max-height: 460px) and (pointer: coarse) {
  .world-lobby-stage-slot { padding: 30px 0 2px; }
  .world-lobby-entry-slot { gap: 4px; }
  .world-lobby-quest-highlight {
    min-height: 28px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "kicker title state";
  }
  #lobby-quest-objective,
  .world-lobby-quest-progress { display: none; }
  .world-lobby-secondary-slot { min-height: 28px; }
}

/* Social S1-D2 · Personal Room HUD: the Tour slot (top-left), clear of the Mini-map rail. */
.room-hud {
  position: fixed; z-index: 15;
  top: max(66px, calc(env(safe-area-inset-top) + 56px));
  left: max(12px, env(safe-area-inset-left));
  max-width: min(320px, calc(100vw - var(--minimap-size, 112px) - 44px));
  display: grid; gap: 4px; padding: 8px 10px; border-radius: 14px;
  background: rgba(16,40,60,.86); border: 1px solid rgba(178,220,239,.36); color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.25); pointer-events: auto;
}
.room-hud[hidden] { display: none; }
.room-hud-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-hud-meta { font-size: 12px; color: #d6ebf9; }
.room-hud-note { font-size: 11.5px; color: #ffdf90; }
.room-hud-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.room-hud-actions button {
  min-height: 36px; padding: 4px 10px; border-radius: 10px; border: 1px solid #9fd3ea;
  background: #263e52; color: #fff; font-size: 12.5px; font-weight: 700;
}
.room-hud-actions button:disabled { opacity: .6; }
.room-hud-leave { border-color: #ffd486 !important; }
@media (pointer: coarse) {
  .room-hud-actions button { min-height: 44px; }
}
@media (max-width: 560px) {
  .room-hud { max-width: calc(100vw - 96px - 44px); top: max(58px, calc(env(safe-area-inset-top) + 50px)); }
}

/* Room Photo Story: one entry in the existing Room HUD, a focus-owned guide when opened. */
.room-photo-story[hidden] { display: none; }
.room-photo-story { position: fixed; inset: 0; z-index: 77; display: grid; place-items: center;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: #091e32a6; color: #f7fbff; }
.room-photo-story-card { box-sizing: border-box; width: min(480px, 100%); max-height: calc(100dvh - 32px);
  overflow-y: auto; overscroll-behavior: contain; padding: 18px; border: 1px solid #a6cfdf; border-radius: 18px;
  background: #193447; box-shadow: 0 18px 60px #0006; }
.room-photo-story header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.room-photo-story h2 { margin: 0; font-size: 20px; }
.room-photo-story h3 { font-size: 17px; }
.room-photo-story p { font-size: 14px; line-height: 1.6; }
.room-photo-story-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.room-photo-story button { min-height: 44px; padding: 9px 12px; border: 1px solid #9fd3ea; border-radius: 10px;
  color: #fff; background: #284c63; font: inherit; cursor: pointer; }
.room-photo-story button:disabled { opacity: .5; cursor: default; }
.room-photo-story button:focus-visible { outline: 3px solid #ffe6a2; outline-offset: 2px; }
.room-photo-story .room-photo-story-privacy { color: #bdd4e2; font-size: 12px; }

/* Housing H3 · owner knock prompt: the last row of the owner Room HUD (it inherits the HUD slot). */
.room-knock-prompt {
  display: grid; gap: 6px; margin-top: 2px; padding: 8px; border-radius: 12px;
  background: rgba(255,212,134,.14); border: 1px solid rgba(255,212,134,.6);
}
.room-knock-prompt[hidden] { display: none; }
.room-knock-title { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-knock-note { font-size: 12px; color: #ffdf90; }
.room-knock-actions { display: flex; gap: 8px; }
.room-knock-actions button {
  flex: 1; min-height: 40px; padding: 4px 8px; border-radius: 10px; border: 1px solid #9fd3ea;
  background: #263e52; color: #fff; font-size: 12.5px; font-weight: 800;
}
.room-knock-actions .room-knock-accept { background: #2f7d5b; border-color: #8fe0b6; }
.room-knock-actions button:disabled { opacity: .6; }
@media (pointer: coarse) {
  .room-knock-actions button { min-height: 46px; }
}

/* EXPLORE-MOBILE-HUD:start
   Explore-mode mobile polish. This is presentation-only and is gated by the P0 HUD Context tokens:
   touch device + EXPLORE + no blocking overlay. It keeps existing DOM, input authority, Safe Area
   contracts and thumb controls, while giving the Mini-map + tracked quest one coherent right rail. */
@media (pointer: coarse) {
  body[data-hud-mode="EXPLORE"][data-hud-overlay="NONE"] .campus-topbar .return-home,
  body[data-hud-mode="EXPLORE"][data-hud-overlay="NONE"] .hud-menu-toggle,
  body[data-hud-mode="EXPLORE"][data-hud-overlay="NONE"] .location-chip {
    background: rgba(13, 38, 62, .86);
    border-color: rgba(174, 222, 245, .46);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .18);
  }

  body[data-hud-mode="EXPLORE"][data-hud-overlay="NONE"] .minimap {
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.32));
  }

  body[data-hud-mode="EXPLORE"][data-hud-overlay="NONE"] .tracked-quest-hud {
    border-color: rgba(174, 222, 245, .34);
    background: rgba(13, 38, 62, .84);
    box-shadow: 0 7px 20px rgba(0,0,0,.22);
    backdrop-filter: blur(9px);
  }

  body[data-hud-mode="EXPLORE"][data-hud-overlay="NONE"] .tracked-quest-hud-open {
    border-radius: inherit !important;
  }

  body[data-hud-mode="EXPLORE"][data-hud-overlay="NONE"] #context-action {
    border-color: rgba(174, 229, 255, .88);
    background: rgba(24, 91, 137, .94);
    box-shadow: 0 7px 22px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.06) inset;
  }

  body[data-hud-mode="EXPLORE"][data-hud-overlay="NONE"] .social-cluster #nearby-toggle,
  body[data-hud-mode="EXPLORE"][data-hud-overlay="NONE"] .social-cluster #emote-toggle {
    opacity: .84;
  }

  body[data-hud-mode="EXPLORE"][data-hud-overlay="NONE"] .social-cluster #chat-toggle {
    border-color: rgba(174, 229, 255, .72);
    background: rgba(24, 91, 137, .92);
    box-shadow: 0 5px 16px rgba(0,0,0,.24);
  }
}

/* Portrait: Mini-map -> one tracked quest. Guidance/event UI is pushed below that rail when needed. */
@media (pointer: coarse) and (orientation: portrait) and (max-width: 720px) {
  body[data-hud-mode="EXPLORE"][data-hud-overlay="NONE"]:has(> #minimap:not([hidden])) > .tracked-quest-hud {
    top: calc(var(--world-right-rail-top) + var(--world-right-rail-map-size) + 8px);
    right: var(--world-right-rail-right);
    left: auto;
    width: min(204px, calc(100vw - 28px));
    max-width: 204px;
    min-height: 46px;
  }

  body[data-hud-mode="EXPLORE"][data-hud-overlay="NONE"] > .tracked-quest-hud .tracked-quest-hud-open {
    min-height: 46px !important;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    grid-template-areas: "flag objective bearing";
    column-gap: 6px;
    row-gap: 0;
    padding: 6px 8px !important;
  }

  body[data-hud-mode="EXPLORE"][data-hud-overlay="NONE"] > .tracked-quest-hud .tour-heading {
    display: none;
  }

  body[data-hud-mode="EXPLORE"][data-hud-overlay="NONE"] > .tracked-quest-hud .tour-objective {
    max-width: 112px;
    font-size: 11px;
    white-space: nowrap;
  }

  body[data-hud-mode="EXPLORE"][data-hud-overlay="NONE"] > .tracked-quest-hud .tracked-quest-bearing {
    max-width: 66px;
    padding: 3px 6px;
    font-size: 10px;
    white-space: nowrap;
  }

  body[data-hud-mode="EXPLORE"][data-hud-overlay="NONE"]:has(> #quest-hud:not([hidden])) {
    --world-right-rail-event-top: calc(
      var(--world-right-rail-top) + var(--world-right-rail-map-size) + 62px
    );
  }
}
/* EXPLORE-MOBILE-HUD:end */

/* Helicopter Flight Instrument HUD P0.6 */
.helicopter-flight-hud {
  position: fixed;
  z-index: 15;
  top: max(86px, calc(env(safe-area-inset-top) + 76px));
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: minmax(116px, 1fr) 124px minmax(116px, 1fr);
  gap: 8px 12px;
  align-items: center;
  padding: 9px 12px 7px;
  border: 1px solid rgba(166, 210, 235, .28);
  border-radius: 18px;
  background: rgba(7, 20, 31, .72);
  color: #eef8ff;
  box-shadow: 0 10px 34px rgba(0,0,0,.24);
  backdrop-filter: blur(10px);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.helicopter-flight-hud[hidden] { display: none !important; }
.helicopter-flight-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.helicopter-flight-readout {
  min-width: 0;
  padding: 4px 6px;
  border-radius: 9px;
  background: rgba(255,255,255,.045);
}
.helicopter-flight-readout span {
  display: block;
  color: #8fb3c8;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.1;
}
.helicopter-flight-readout strong {
  display: block;
  margin-top: 2px;
  color: #f4fbff;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}
.helicopter-attitude {
  display: grid;
  place-items: center;
  gap: 3px;
}
.helicopter-horizon {
  position: relative;
  width: 112px;
  height: 62px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: #315d7b;
}
.helicopter-horizon-plane {
  --flight-horizon-roll: 0deg;
  --flight-horizon-pitch: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%) translateY(var(--flight-horizon-pitch)) rotate(var(--flight-horizon-roll));
  background: linear-gradient(to bottom, #315d7b 0 50%, #5b4a37 50% 100%);
  transform-origin: center;
}
.helicopter-horizon-line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 1px);
  height: 2px;
  background: rgba(255,255,255,.9);
}
.helicopter-pitch-mark {
  position: absolute;
  left: 50%;
  width: 42px;
  height: 1px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.62);
}
.helicopter-pitch-mark-up { top: calc(50% - 16px); }
.helicopter-pitch-mark-down { top: calc(50% + 16px); }
.helicopter-aircraft-symbol {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 16px;
  transform: translate(-50%, -50%);
}
.helicopter-aircraft-symbol::before,
.helicopter-aircraft-symbol::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 19px;
  height: 2px;
  background: #67d4ff;
}
.helicopter-aircraft-symbol::before { left: 0; }
.helicopter-aircraft-symbol::after { right: 0; }
.helicopter-attitude small {
  color: #a9c4d3;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}
.helicopter-flight-footer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  color: #91adbd;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
}
.helicopter-flight-footer strong {
  padding: 3px 9px;
  border: 1px solid rgba(103,212,255,.28);
  border-radius: 999px;
  background: rgba(73,170,212,.13);
  color: #dff7ff;
  letter-spacing: .08em;
}
.helicopter-flight-footer span:last-child { text-align: right; }
body[data-lobby-shell="true"] > .helicopter-flight-hud,
body[data-space]:not([data-space="campus"]) > .helicopter-flight-hud { display: none !important; }

@media (pointer: coarse) and (max-width: 560px) {
  .helicopter-flight-hud {
    top: max(176px, calc(env(safe-area-inset-top) + 166px));
    width: min(300px, calc(100vw - 24px));
    grid-template-columns: 72px 104px 72px;
    gap: 5px 7px;
    padding: 7px 8px 6px;
    border-radius: 15px;
    background: rgba(7, 20, 31, .66);
  }
  .helicopter-flight-column { grid-template-columns: 1fr; gap: 3px; }
  .helicopter-flight-readout { padding: 3px 5px; border-radius: 7px; }
  .helicopter-flight-readout span { font-size: 7px; }
  .helicopter-flight-readout strong { font-size: 10px; }
  .helicopter-horizon { width: 96px; height: 56px; border-radius: 10px; }
  .helicopter-attitude small { font-size: 8px; }
  .helicopter-flight-footer { font-size: 8px; }
  .helicopter-flight-footer strong { padding: 2px 7px; }
}

.helicopter-flight-hud-toggle {
  position: fixed;
  z-index: 17;
  top: max(92px, calc(env(safe-area-inset-top) + 82px));
  left: 50%;
  transform: translateX(178px);
  min-width: 70px;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid rgba(103,212,255,.34);
  border-radius: 999px;
  background: rgba(7,20,31,.84);
  color: #dff7ff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .03em;
  box-shadow: 0 5px 16px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  cursor: pointer;
  touch-action: manipulation;
}
.helicopter-flight-hud-toggle[hidden] { display: none !important; }
.helicopter-flight-hud-toggle[aria-pressed="false"] {
  border-color: rgba(255,222,134,.46);
  color: #ffde86;
}
body[data-lobby-shell="true"] > .helicopter-flight-hud-toggle,
body[data-space]:not([data-space="campus"]) > .helicopter-flight-hud-toggle { display: none !important; }

@media (pointer: coarse) and (max-width: 560px) {
  .helicopter-flight-hud-toggle {
    top: max(182px, calc(env(safe-area-inset-top) + 172px));
    transform: translateX(70px);
    min-width: 66px;
    min-height: 28px;
    font-size: 9px;
  }
}


/* Mobility Book P0.8 · Registry browser / default-mount / summon surface. */
.mobility-book-panel {
  width: min(920px, calc(100vw - 24px));
  max-width: 920px;
  max-height: min(720px, calc(100dvh - 24px));
  overflow: hidden;
}
.mobility-book-panel[hidden] { display: none; }
.mobility-book-summary { margin: 2px 0 0; color: #92aabd; font-size: 11px; }
.mobility-book-body {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  max-height: min(620px, calc(100dvh - 120px));
  padding: 0 16px 16px;
  overflow: hidden;
}
.mobility-browser {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}
.mobility-filters {
  display: flex;
  gap: 6px;
  padding-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mobility-filter,
.mobility-favorite-only {
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid #ffffff1f;
  border-radius: 999px;
  background: #ffffff08;
  color: #a9bbc8;
  font: 750 11px/1 system-ui, sans-serif;
  white-space: nowrap;
}
.mobility-filter.active,
.mobility-favorite-only.active {
  border-color: #66cef777;
  background: #66cef719;
  color: #eafaff;
}
.mobility-search-row { display: flex; gap: 7px; margin-bottom: 9px; }
.mobility-search {
  min-width: 0;
  flex: 1;
  min-height: 38px;
  border: 1px solid #ffffff1f;
  border-radius: 11px;
  outline: none;
  padding: 8px 10px;
  background: #07121de8;
  color: #edf6ff;
}
.mobility-search:focus { border-color: #66cef777; }
.mobility-favorite-only { width: 40px; padding: 0; border-radius: 11px; font-size: 17px; }
.mobility-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobility-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #ffffff1b;
  border-radius: 14px;
  background: #ffffff07;
}
.mobility-card[data-selected="true"] {
  border-color: #66cef77a;
  background: #66cef711;
}
.mobility-card-main {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  min-height: 90px;
  padding: 9px 42px 9px 9px;
  border: 0;
  background: transparent;
  color: #edf6ff;
  text-align: left;
}
.mobility-card-art {
  display: grid;
  place-items: center;
  height: 70px;
  border-radius: 12px;
  background: linear-gradient(145deg, #163147, #0c1c29);
  font-size: 34px;
}
.mobility-card-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; }
.mobility-card-name {
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobility-card-category { margin-top: 2px; color: #8fa5b5; font-size: 9px; }
.mobility-card-domains, .mobility-detail-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mobility-domain-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border: 1px solid #ffffff1f;
  border-radius: 999px;
  color: #bdd0dc;
  font-size: 8px;
}
.mobility-status {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  padding: 3px 6px;
  border: 1px solid #ffffff1f;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 850;
}
.mobility-status-experimental { border-color: #d8a6ff66; background: #d8a6ff18; color: #efd8ff; }
.mobility-status-event { border-color: #ffdc8566; background: #ffdc8515; color: #ffe8a6; }
.mobility-status-available { border-color: #77d79a66; background: #77d79a15; color: #baf3cd; }
.mobility-status-soon { color: #b9c6cf; }
.mobility-favorite {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 1px solid #ffffff1f;
  border-radius: 9px;
  background: #08131de8;
  color: #aebdcc;
  font-size: 16px;
}
.mobility-favorite.on { border-color: #ffdc8566; background: #ffdc8512; color: #ffdc85; }
.mobility-detail {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 3px 4px 10px;
}
.mobility-detail-hero { display: flex; gap: 12px; align-items: center; }
.mobility-detail-emoji {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  border: 1px solid #ffffff1b;
  border-radius: 18px;
  background: linear-gradient(145deg, #173650, #0d1e2d);
  font-size: 48px;
}
.mobility-detail-title { min-width: 0; }
.mobility-detail-title h3 { margin: 2px 0 0; font-size: 22px; }
.mobility-detail-category { color: #91a9ba; font-size: 9px; font-weight: 800; letter-spacing: .05em; }
.mobility-detail-description {
  margin: 12px 0;
  padding: 10px 11px;
  border: 1px solid #ffffff18;
  border-radius: 12px;
  background: #ffffff05;
  color: #c6d7e2;
  font-size: 11px;
  line-height: 1.5;
}
.mobility-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.mobility-fact {
  padding: 9px;
  border: 1px solid #ffffff17;
  border-radius: 10px;
  background: #07131e99;
}
.mobility-fact span,
.mobility-tech-item span { display: block; color: #758c9d; font-size: 8px; }
.mobility-fact strong,
.mobility-tech-item strong { display: block; margin-top: 3px; color: #dceaf2; font-size: 10px; }
.mobility-summon-hint,
.mobility-action-note { margin: 9px 0 0; color: #a9bbc8; font-size: 9.5px; line-height: 1.45; }
.mobility-tech {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #ffffff17;
  border-radius: 11px;
  background: #ffffff04;
}
.mobility-tech summary { padding: 9px 10px; color: #b7cad6; font-size: 10px; font-weight: 800; cursor: pointer; }
.mobility-tech-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 9px 9px; }
.mobility-tech-item { min-width: 0; padding: 7px; border-radius: 9px; background: #07131e; }
.mobility-tech-item strong { overflow-wrap: anywhere; }
.mobility-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.mobility-primary,
.mobility-secondary {
  min-height: 38px;
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 10px;
  font-weight: 800;
}
.mobility-primary { border: 1px solid #66cef777; background: #1a5470; color: #fff; }
.mobility-secondary { border: 1px solid #ffffff1f; background: #ffffff08; color: #d5e4ed; }
.mobility-primary:disabled,
.mobility-secondary:disabled { opacity: .4; cursor: not-allowed; }
body[data-lobby-shell="true"] > #mobility-book-panel { display: none !important; }

@media (max-width: 720px) {
  .mobility-book-panel {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  .mobility-book-body {
    display: block;
    max-height: calc(100dvh - 86px);
    overflow-y: auto;
    padding: 0 10px 12px;
  }
  .mobility-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; overflow: visible; }
  .mobility-card-main { display: block; min-height: 0; padding: 7px 7px 9px; }
  .mobility-card-art { height: 68px; }
  .mobility-card-name { margin-top: 6px; font-size: 10.5px; }
  .mobility-card-domains { display: none; }
  .mobility-detail {
    margin-top: 12px;
    padding: 11px;
    border: 1px solid #ffffff18;
    border-radius: 14px;
    background: #081621cc;
    overflow: visible;
  }
  .mobility-detail-emoji { width: 70px; height: 70px; font-size: 40px; }
  .mobility-detail-title h3 { font-size: 18px; }
  .mobility-tech-grid { grid-template-columns: 1fr; }
}

/* Back-gate 37165: static route information, game F1 remains unavailable. */
.transit-panel { gap: 12px; overflow-y: auto; overscroll-behavior: contain; }
.transit-route { border: 1px solid #496b7d; border-radius: 12px; padding: 12px; }
.transit-route-real { border-left: 4px solid #79b788; }
.transit-route-game { border-left: 4px solid #7ad2df; }
.transit-route .profile-note { margin: 6px 0 0; }
.transit-coming-soon { width: 100%; min-height: 44px; margin-top: 12px; border: 1px solid #496b7d;
  border-radius: 9px; color: #acc3d1; background: #203b4c; opacity: 1; cursor: default; }
body[data-lobby-shell="true"] > #backgate-transit-panel { display: none !important; }

/* COMBAT-V03-RUNTIME-P0:start
   Building 5 local Combat slice. Presentation only: Combat Runtime owns action state;
   Encounter/Reward/Equipment authorities remain separate. */
.combat-hud-v03 {
  position: fixed; z-index: 15;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px));
  width: min(430px, calc(100vw - 36px)); padding: 10px;
  border: 1px solid rgba(120, 220, 255, .58); border-radius: 16px;
  background: rgba(7, 24, 39, .90); box-shadow: 0 10px 30px rgba(0,0,0,.34);
  color: #eefaff; pointer-events: auto;
}
.combat-hud-v03[hidden] { display: none !important; }
.combat-impact-feedback {
  position:fixed; inset:0; z-index:14; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 54%,rgba(255,255,255,.18),transparent 44%);
}
.combat-impact-feedback.show { animation:combat-impact-flash 95ms ease-out both; }
.combat-impact-feedback[data-kind="playerHit"],
.combat-impact-feedback[data-kind="defeat"] {
  background:radial-gradient(circle at 50% 54%,rgba(255,92,92,.18),transparent 46%),
    linear-gradient(180deg,rgba(255,68,68,.10),rgba(255,68,68,0));
}
.combat-impact-feedback[data-kind="perfect"] {
  background:radial-gradient(circle at 50% 54%,rgba(124,244,255,.24),transparent 44%);
}
.combat-impact-feedback[data-kind="break"] {
  background:radial-gradient(circle at 50% 54%,rgba(255,213,106,.25),transparent 46%);
}
@keyframes combat-impact-flash { 0%{opacity:0} 18%{opacity:1} 100%{opacity:0} }
#application.combat-camera-kick[data-combat-kick="basic"] { animation:combat-kick-basic 70ms ease-out; }
#application.combat-camera-kick[data-combat-kick="skill"] { animation:combat-kick-skill 90ms ease-out; }
#application.combat-camera-kick[data-combat-kick="heavy"],
#application.combat-camera-kick[data-combat-kick="break"] { animation:combat-kick-heavy 120ms ease-out; }
#application.combat-camera-kick[data-combat-kick="player-hit"],
#application.combat-camera-kick[data-combat-kick="defeat"] { animation:combat-kick-player 110ms ease-out; }
#application.combat-camera-kick[data-combat-kick="perfect"] { animation:combat-kick-perfect 130ms ease-out; }
@keyframes combat-kick-basic { 0%{transform:translate(0,0)} 40%{transform:translate(-1px,1px)} 100%{transform:translate(0,0)} }
@keyframes combat-kick-skill { 0%{transform:translate(0,0)} 35%{transform:translate(-2px,1px)} 70%{transform:translate(1px,-1px)} 100%{transform:translate(0,0)} }
@keyframes combat-kick-heavy { 0%{transform:translate(0,0)} 30%{transform:translate(-3px,2px) rotate(-.08deg)} 65%{transform:translate(2px,-2px) rotate(.06deg)} 100%{transform:translate(0,0)} }
@keyframes combat-kick-player { 0%{transform:translate(0,0)} 30%{transform:translate(4px,-2px) rotate(.10deg)} 65%{transform:translate(-3px,1px) rotate(-.08deg)} 100%{transform:translate(0,0)} }
@keyframes combat-kick-perfect { 0%{transform:translate(0,0) scale(1)} 38%{transform:translate(-1px,0) scale(1.004)} 100%{transform:translate(0,0) scale(1)} }
.combat-hud-v03-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:11px; }
.combat-hud-v03-head strong { font-size:13px; letter-spacing:.06em; }
.combat-hud-v03-head span { padding:3px 7px; border:1px solid rgba(148,210,239,.28); border-radius:999px; color:#bcd7e8; }
.combat-hud-v03-player,
.combat-hud-v03-target {
  margin-bottom:8px; padding:8px; border:1px solid rgba(148,210,239,.22); border-radius:12px;
  background:rgba(3,18,30,.58);
}
.combat-hud-v03-player {
  border-color:rgba(116,231,255,.30);
  background:rgba(8,34,46,.66);
}
.combat-hud-v03-target-head,.combat-hud-v03-resource-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.combat-hud-v03-target-head strong { font-size:12px; }
.combat-hud-v03-target-head span,.combat-hud-v03-resource-row span { color:#bcd7e8; font-size:10px; font-weight:800; }
.combat-hud-v03-meter-row {
  display:grid; grid-template-columns:44px 1fr 72px; align-items:center; gap:7px; margin-top:6px;
  font-size:9px; font-weight:800; color:#dceef7;
}
.combat-hud-v03-meter-row i { display:block; height:7px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.12); }
.combat-hud-v03-meter-row b { display:block; width:0; height:100%; border-radius:999px; background:#74e7ff; transition:width .12s linear; }
.combat-hud-v03-break b { background:#ffd56a; }
.combat-hud-v03-player-hp b { background:#72f0b0; }
.combat-hud-v03-meter-row em { font-style:normal; text-align:right; color:#9fc0d2; }
[data-combat-dodge-state][data-state="DODGE"] { color:#b7ddff; }
[data-combat-dodge-state][data-state="IFRAME"] { color:#8feeff; border-color:rgba(143,238,255,.55); }
[data-combat-dodge-state][data-state="PERFECT"] { color:#ffe48f; border-color:rgba(255,228,143,.72); }
[data-combat-dodge-state][data-state="DEFEAT"] { color:#ff9d9d; border-color:rgba(255,120,120,.62); }
.combat-hud-v03-resource-row { margin-top:7px; }
.combat-hud-v03-resource-row button {
  min-height:30px; border:1px solid rgba(255,213,106,.55); border-radius:9px; padding:4px 8px;
  background:rgba(103,70,18,.82); color:#fff0bd; font:800 9px/1.1 system-ui,sans-serif; touch-action:manipulation;
}
.combat-hud-v03-resource-row button[hidden] { display:none !important; }
.combat-hud-v03-telegraph {
  margin-top:7px; padding:6px 8px; border:1px solid rgba(255,164,87,.66); border-radius:9px;
  background:rgba(111,55,18,.78); color:#ffe2b9; font-size:10px; font-weight:900; text-align:center;
}
.combat-hud-v03-telegraph[hidden] { display:none !important; }
.combat-hud-v03-telegraph[data-urgent="true"] {
  border-color:rgba(255,92,98,.78); background:rgba(117,29,34,.88); color:#ffd1d3;
}
.combat-hud-v03-actions { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
.combat-hud-v03-actions button {
  min-height:44px; border:1px solid rgba(121,204,238,.5); border-radius:11px;
  background:rgba(17,70,98,.94); color:white; font:800 10px/1.15 system-ui,sans-serif;
  overflow:hidden; text-overflow:ellipsis; touch-action:manipulation;
}
.combat-hud-v03-actions button:disabled { opacity:.46; }
.combat-hud-v03-actions button[aria-pressed="true"] { border-color:#ffe08a; background:rgba(128,84,24,.95); }
.combat-hud-v03 small { display:block; margin-top:7px; color:#8db0c5; font-size:9px; line-height:1.35; }
body[data-hud-mode="COMBAT"] #transport-action,
body[data-hud-mode="COMBAT"] .social-cluster,
body[data-hud-mode="COMBAT"] #run,
body[data-hud-mode="COMBAT"] #jump { display:none !important; }
@media (pointer: coarse) {
  .combat-hud-v03 {
    left:max(10px,env(safe-area-inset-left)); right:max(10px,env(safe-area-inset-right));
    bottom:max(10px,calc(env(safe-area-inset-bottom) + 8px)); width:auto;
  }
  .combat-hud-v03-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .combat-hud-v03 small { display:none; }
}
/* COMBAT-V03-RUNTIME-P0:end */
/* Full Map short-landscape: independent of the legacy HUD block. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  /* Full Map: short landscape phones keep the square map height-bound instead of inheriting the desktop 2-column width. */
  body .full-map-panel {
    place-items: center;
    overflow: hidden;
    padding:
      max(6px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }
  body .full-map-card {
    --ls-full-map-available-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
    /* Existing 60px chrome; only Campus reserves the additional 54px search row. */
    --ls-full-map-size: min(430px, calc(var(--ls-full-map-available-height) - 60px - var(--full-map-search-height)));
    width: min(700px, calc(100vw - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right))));
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
    overflow: hidden;
    border-radius: 16px;
  }
  body .full-map-card:has(> .full-map-nav:not([hidden])) {
    /* Guidance adds a 40px bar and its 6px bottom gap. */
    --ls-full-map-size: min(390px, calc(var(--ls-full-map-available-height) - 106px - var(--full-map-search-height)));
  }
  /* With no selected POI the desktop detail column must not reserve empty width. */
  body .full-map-card:has(.full-map-info[hidden]) {
    width: fit-content;
    max-width: calc(100vw - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right)));
  }
  body .full-map-header {
    gap: 10px;
    padding: 7px 10px 5px;
  }
  body .full-map-kicker { font-size: 8.5px; }
  body .full-map-header h2 { font-size: 16px; }
  body .full-map-close {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 21px;
  }
  body .full-map-nav {
    margin: 0 10px 6px;
    padding: 4px 5px 4px 8px;
    font-size: 11px;
  }
  body .full-map-nav-clear {
    min-height: 30px;
    padding-inline: 8px;
    font-size: 11px;
  }
  body .full-map-body {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    grid-template-columns: calc(var(--ls-full-map-size) + 76px) minmax(170px, 210px);
    align-items: start;
    gap: 8px;
    min-height: 0;
    padding: 0 10px 10px;
  }
  body .full-map-body:has(> .full-map-info[hidden]) {
    grid-template-columns: calc(var(--ls-full-map-size) + 76px);
  }
  /* Keep the surface square so SVG geometry and percentage-positioned marker layers remain aligned. */
  body .full-map-stage {
    display: grid;
    grid-template-columns: var(--ls-full-map-size) 68px;
    gap: 8px;
    align-items: center;
    width: auto;
    max-width: none;
  }
  body .full-map-surface {
    width: var(--ls-full-map-size);
    max-width: 100%;
    height: var(--ls-full-map-size);
    aspect-ratio: 1;
    justify-self: center;
    border-radius: 14px;
  }
  body .full-map-info {
    max-height: var(--ls-full-map-size);
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 6px;
    padding: 10px;
    border-radius: 12px;
  }
  body .full-map-info strong { font-size: 15px; }
  body .full-map-info-actions { gap: 5px; margin-top: 4px; }
  body .full-map-info-actions button { min-height: 36px; font-size: 12px; }
  body .full-map-controls {
    position: static;
    width: 68px;
    max-width: 100%;
    flex-direction: column;
    align-items: stretch;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    gap: 3px;
    padding: 4px;
    border-radius: 11px;
  }
  body .full-map-controls button {
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    font-size: 10.5px;
  }
  body .full-map-controls button#full-map-zoom-in,
  body .full-map-controls button#full-map-zoom-out {
    width: 100%;
    padding: 0;
    font-size: 18px;
  }
  body .full-map-zoom-label { min-width: 36px; font-size: 10px; }

}
/* FULL-MAP-LANDSCAPE:end */

/* FULL-MAP-COMPACT-SEARCH:start */
/* At 568x320, a separate search row would shrink guidance below the existing
   153px control rail. Reuse the header's spare width on this compact surface. */
@media (pointer: coarse) and (orientation: landscape) and (min-width: 568px) and (max-height: 340px) {
  body .full-map-card:has(> .full-map-search:not([hidden])) {
    position: relative;
    --full-map-search-height: 0px;
    width: min(700px, calc(100vw - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right))));
  }
  body .full-map-search {
    position: absolute;
    top: 7px;
    left: 185px;
    right: 58px;
    margin: 0;
    gap: 6px;
  }
  body .full-map-search-input, body .full-map-search-clear {
    min-height: 36px;
    height: 36px;
    padding: 4px 8px;
  }
}
/* FULL-MAP-COMPACT-SEARCH:end */

/* Collection furniture editor: input is owned by BLOCKING_UI while this modal is open. */
.furniture-editor-backdrop { position:fixed; inset:0; z-index:1090; background:#10203355; }
.furniture-editor { position:fixed; z-index:1100; right:14px; top:14px; bottom:14px; width:min(430px,calc(100vw - 28px)); overflow:auto; overscroll-behavior:contain; padding:18px; box-sizing:border-box; border:1px solid #b8c9d8; border-radius:18px; background:#f8fbff; color:#24394d; box-shadow:0 12px 50px #091b3c66; font:14px/1.5 sans-serif; }
.furniture-editor[hidden],.furniture-editor-backdrop[hidden] { display:none; }
.furniture-editor header,.furniture-editor footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.furniture-editor h2 { font-size:20px; margin:0; }
.furniture-editor button,.furniture-editor select { min-height:44px; padding:8px 12px; border:1px solid #b7c9d8; border-radius:10px; background:white; color:#203d59; font:inherit; cursor:pointer; }
.furniture-editor button:disabled,.furniture-editor select:disabled { opacity:.5; cursor:default; }
.furniture-editor button:focus-visible,.furniture-editor select:focus-visible { outline:3px solid #3488ca; outline-offset:2px; }
.furniture-help { margin:12px 0; color:#566b7e; }
.furniture-plan { display:block; width:100%; aspect-ratio:10.8/8.4; border:2px solid #8f7760; border-radius:8px; cursor:crosshair; }
.furniture-owned,.furniture-controls,.furniture-history { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; }
.furniture-history button { flex:1; }
.furniture-recommendations { margin:12px 0; padding:12px; border:1px solid #c3d6e5; border-radius:12px; background:#edf5fc; }
.furniture-recommendations h3 { margin:0 0 6px; font-size:15px; }
.furniture-recommendations button { margin:3px 4px 3px 0; }
.furniture-recommendations button[aria-pressed="true"] { background:#2868a4; border-color:#2868a4; color:#fff; }

.furniture-history-help { margin:0 0 12px; color:#566b7e; font-size:12px; }
.furniture-owned button { flex:1 1 170px; font-size:13px; text-align:left; }
.furniture-editor label { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.furniture-controls label { width:100%; }
.furniture-note { padding:10px; border-radius:10px; background:#e5eef8; margin:12px 0; }
.furniture-editor footer button:first-child { flex:1; background:#2868a4; border-color:#2868a4; color:white; }
.furniture-confirm { border:1px solid #be7858; border-radius:12px; padding:10px; background:#fff0e7; }
.furniture-confirm button { margin:4px; }
@media(max-width:600px) { .furniture-editor { inset:8px; width:auto; padding:12px; border-radius:14px; } }
@media(max-height:500px) and (min-width:601px) { .furniture-editor { width:390px; top:6px; bottom:6px; padding:12px; } .furniture-plan { max-height:200px; } }

/* Photo Mode 2.0 · the frame stays clear: identity top-left, actions top-right, shutter
   bottom-centre, touch move controls on the bottom corners, settings only on request.
   Presentation-only: the underlying HUD's hidden/open state stays untouched. */
body[data-photo-mode="active"] > :not(#application):not(.photo-mode):not(script):not(style):not(#world-loading):not(#space-fade):not(#lobby-transition-fade) {
  visibility: hidden !important;
  pointer-events: none !important;
}
.photo-mode[hidden] { display: none; }
.photo-mode {
  --photo-edge-t: max(12px, env(safe-area-inset-top));
  --photo-edge-r: max(12px, env(safe-area-inset-right));
  --photo-edge-b: max(14px, env(safe-area-inset-bottom));
  --photo-edge-l: max(12px, env(safe-area-inset-left));
  --photo-glass: rgba(13, 28, 40, .6);
  --photo-line: rgba(187, 221, 237, .4);
  position: fixed; inset: 0; z-index: 180; pointer-events: none; color: #f6fbff;
}
.photo-mode [hidden] { display: none !important; }
.photo-mode button, .photo-mode input, .photo-mode select { pointer-events: auto; font: inherit; color: inherit; }
.photo-mode button { cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.photo-mode button:disabled { opacity: .5; cursor: not-allowed; }
.photo-mode :focus-visible { outline: 3px solid #9ee7ff; outline-offset: 3px; }
.photo-mode-top {
  position: absolute; top: var(--photo-edge-t); left: var(--photo-edge-l); right: var(--photo-edge-r);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.photo-mode-badge {
  display: flex; align-items: center; gap: 6px; min-height: 36px; box-sizing: border-box; padding: 6px 12px;
  border-radius: 999px; background: var(--photo-glass); border: 1px solid var(--photo-line);
  font-size: 13px; letter-spacing: .08em; backdrop-filter: blur(6px);
}
.photo-mode-precision { padding: 2px 8px; border-radius: 999px; background: #ffd98a; color: #1c2a36; font-size: 11px; font-weight: 800; letter-spacing: 0; }
.photo-mode-top-actions { display: flex; gap: 8px; }
.photo-mode-icon, .photo-mode-restore, .photo-mode-side, .photo-mode-lift {
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--photo-glass); border: 1px solid var(--photo-line); font-size: 18px; line-height: 1;
  backdrop-filter: blur(6px); overflow: hidden;
}
.photo-mode-icon[aria-expanded="true"] { background: #205671; border-color: #90d4ef; }
.photo-mode-restore { position: absolute; top: var(--photo-edge-t); right: var(--photo-edge-r); opacity: .5; }
.photo-mode-restore:hover, .photo-mode-restore:focus-visible { opacity: 1; }
/* CAMERA settings: right edge under the actions, secondary to the frame and scrollable. */
.photo-mode-settings {
  position: absolute; top: calc(var(--photo-edge-t) + 56px); right: var(--photo-edge-r);
  width: min(280px, calc(100vw - 32px)); max-height: calc(100dvh - var(--photo-edge-t) - var(--photo-edge-b) - 170px);
  overflow-y: auto; box-sizing: border-box; padding: 12px 14px; display: grid; gap: 8px;
  border-radius: 16px; background: rgba(13, 28, 40, .78); border: 1px solid var(--photo-line);
  pointer-events: auto; backdrop-filter: blur(8px);
}
.photo-mode-settings-title { margin: 0; font-size: 12px; letter-spacing: .14em; color: #9fc6da; }
.photo-mode-setting { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; min-height: 44px; font-size: 13px; }
.photo-mode-setting input[type="range"] { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 32px; margin: 0; accent-color: #90d4ef; }
.photo-mode-setting-value { grid-column: 2; grid-row: 1; font-variant-numeric: tabular-nums; color: #cfe8f5; }
.photo-mode-setting input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: #90d4ef; }
.photo-mode-setting select { min-height: 36px; padding: 4px 8px; border-radius: 10px; background: #102536; border: 1px solid var(--photo-line); }
.photo-mode-reset { min-height: 44px; border-radius: 12px; background: #205671; border: 1px solid #90d4ef; }
.photo-mode-help, .photo-mode-note { margin: 0; font-size: 12px; line-height: 1.5; color: #b3c6d1; }
.photo-mode-help-coarse { display: none; }
/* Bottom edge: one large shutter, flanked by pose and the last shot. */
.photo-mode-bottom { position: absolute; left: var(--photo-edge-l); right: var(--photo-edge-r); bottom: var(--photo-edge-b); height: 0; }
.photo-mode-shutter-row { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; }
.photo-mode-side { width: 48px; height: 48px; font-size: 20px; }
.photo-mode-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-mode-shutter {
  width: 72px; height: 72px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 4px solid #f6fbff; background: rgba(13, 28, 40, .35); box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}
.photo-mode-shutter::before { content: ""; width: 54px; height: 54px; border-radius: 50%; background: #f6fbff; transition: transform .12s ease-out; }
.photo-mode-shutter:active::before { transform: scale(.86); }
.photo-mode-shutter[aria-disabled="true"]::before { background: #9fb3c0; }
.photo-mode-status {
  position: absolute; left: 50%; bottom: 88px; transform: translateX(-50%); width: max-content;
  max-width: min(440px, calc(100vw - 32px)); margin: 0; padding: 6px 12px; box-sizing: border-box; border-radius: 999px;
  background: rgba(13, 28, 40, .7); font-size: 12px; line-height: 1.45; text-align: center; pointer-events: none;
}
.photo-mode-status:empty { display: none; }
/* Indeterminate activity only: canvas encoding exposes no percentage progress. */
.photo-mode[aria-busy="true"] .photo-mode-status::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px;
  border: 2px solid rgba(246, 251, 255, .35); border-top-color: #f6fbff;
  border-radius: 50%; vertical-align: -3px; animation: photo-save-spin .8s linear infinite;
}
@keyframes photo-save-spin { to { transform: rotate(360deg); } }
.photo-mode-cancel {
  min-height: 44px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--photo-line);
  background: var(--photo-glass); font-size: 12px; white-space: nowrap;
}
.photo-mode[aria-busy="true"] .photo-mode-top-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) {
  .photo-mode[aria-busy="true"] .photo-mode-status::before { animation: none; }
}
/* Touch move controls: small, photo-only (not the gameplay joystick), on the bottom corners. */
.photo-mode-pad, .photo-mode-vertical { display: none; }
@media (pointer: coarse) {
  .photo-mode-help-fine { display: none; }
  .photo-mode-help-coarse { display: inline; }
  .photo-mode-pad {
    position: absolute; left: 0; bottom: 0; width: 104px; height: 104px; display: grid; place-items: center;
    border-radius: 50%; background: rgba(13, 28, 40, .36); border: 1px solid var(--photo-line);
    pointer-events: auto; touch-action: none;
  }
  .photo-mode-pad-knob { width: 44px; height: 44px; border-radius: 50%; background: rgba(246, 251, 255, .78); pointer-events: none; }
  .photo-mode-vertical { position: absolute; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px; }
  .photo-mode-lift { width: 48px; height: 48px; font-size: 16px; touch-action: none; }
  body.joystick-right .photo-mode-pad { left: auto; right: 0; }
  body.joystick-right .photo-mode-vertical { right: auto; left: 0; }
}
/* Portrait phones are too narrow for pad + shutter row + lift in one band: the move controls sit just above it. */
@media (pointer: coarse) and (orientation: portrait) {
  .photo-mode-pad, .photo-mode-vertical { bottom: 92px; }
  .photo-mode-status { bottom: 210px; }
  .photo-mode-settings { max-height: calc(100dvh - var(--photo-edge-t) - var(--photo-edge-b) - 290px); }
}
/* Composition grid (rule of thirds). DOM-only, so it never reaches the saved PNG. */
.photo-mode-grid { position: absolute; inset: 0; display: none; pointer-events: none; }
.photo-mode[data-grid="thirds"] .photo-mode-grid {
  display: block;
  background:
    linear-gradient(to right, transparent calc(33.333% - .5px), rgba(255, 255, 255, .5) 0 calc(33.333% + .5px), transparent 0 calc(66.667% - .5px), rgba(255, 255, 255, .5) 0 calc(66.667% + .5px), transparent 0),
    linear-gradient(to bottom, transparent calc(33.333% - .5px), rgba(255, 255, 255, .5) 0 calc(33.333% + .5px), transparent 0 calc(66.667% - .5px), rgba(255, 255, 255, .5) 0 calc(66.667% + .5px), transparent 0);
}
.photo-mode-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.photo-mode-flash.is-on { animation: photo-mode-flash .32s ease-out; }
@keyframes photo-mode-flash { from { opacity: .55; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .photo-mode-flash.is-on { animation: none; } }
/* Last shot: long-press / right-click save for browsers without a download. */
.photo-mode-preview {
  position: absolute; left: 50%; bottom: calc(var(--photo-edge-b) + 124px); transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 32px)); box-sizing: border-box; padding: 6px; border-radius: 14px;
  background: rgba(13, 28, 40, .85); border: 1px solid var(--photo-line); pointer-events: auto;
}
.photo-mode-preview img { display: block; max-width: 100%; max-height: 40dvh; margin: auto; border-radius: 10px; object-fit: contain; user-select: auto; -webkit-touch-callout: default; }
/* UI hidden (H / 👁): a clean frame with one faint restore control. */
.photo-mode[data-ui="hidden"] > :not(.photo-mode-restore):not(.photo-mode-flash) { display: none !important; }
/* Short viewports (phones held sideways, short windows): tighter edges keep the frame's height. */
@media (max-height: 500px) {
  .photo-mode {
    --photo-edge-t: max(8px, env(safe-area-inset-top));
    --photo-edge-b: max(10px, env(safe-area-inset-bottom));
    --photo-edge-l: max(16px, env(safe-area-inset-left));
    --photo-edge-r: max(16px, env(safe-area-inset-right));
  }
  .photo-mode-shutter { width: 64px; height: 64px; }
  .photo-mode-shutter::before { width: 46px; height: 46px; }
  .photo-mode-status { bottom: 76px; }
  .photo-mode-preview { bottom: calc(var(--photo-edge-b) + 84px); }
  .photo-mode-preview img { max-height: 48dvh; }
  .photo-mode-settings {
    top: calc(var(--photo-edge-t) + 52px); width: min(250px, 38vw);
    max-height: calc(100dvh - var(--photo-edge-t) - var(--photo-edge-b) - 140px);
  }
}

/* Collection Book is a read-only view inside the existing inventory modal. */
.collection-book { display: grid; gap: 12px; }
.collection-book-heading { margin: 8px 0 0; font-size: 16px; }
.collection-book-note { margin: 0; font-size: 12px; line-height: 1.65; color: #8fa6c9; }
.collection-book-summary { margin: 0; font-size: 13px; color: #9ddfc8; }
.collection-book-navigation { margin-bottom: 16px; }
.collection-book-navigation .inventory-tab[aria-pressed="true"] { border-color: #75ccb8; color: #c4fff0; }
.collection-book-entry[data-state="UNKNOWN"] { border-style: dashed; }


.graphics-fps { position: fixed; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 40; padding: 4px 8px; border-radius: 6px; background: #10202dcc; color: #fff; font: 12px monospace; pointer-events: none; }
.graphics-fps[hidden] { display: none; }
#view-settings #graphics-reset { margin: 10px 0; min-height: 44px; }
#view-settings #graphics-show-fps { width: auto; }

/* B1 private, session-only owned memorabilia preview. Shares the housing dialog shell. */
.trophy-display-panel { width:min(430px,calc(100vw - 28px)); bottom:auto; max-height:calc(100dvh - 28px); }
.trophy-display-choices { display:grid; gap:8px; margin:14px 0; }
.trophy-display-choices button[aria-pressed="true"] { border-color:#2868a4; background:#deedf9; }
@media(max-width:600px) { .trophy-display-panel { width:auto; max-height:calc(100dvh - 16px); } }

/* JSL-A · Jeongseok virtual tag reader HUD (non-modal; claims no input). */
.jeongseok-gate {
  position: fixed; z-index: 13; left: 50%; transform: translateX(-50%);
  top: max(76px, calc(env(safe-area-inset-top) + 64px));
  width: min(340px, calc(100vw - 32px)); box-sizing: border-box;
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center;
  padding: 10px 14px; border-radius: 16px; background: #0f2233e8; color: #f3f8ff;
  border: 1px solid #5e7f99; box-shadow: 0 6px 20px #0006; pointer-events: none;
}
.jeongseok-gate[hidden] { display: none !important; }
.jeongseok-gate-reader { grid-row: span 3; position: relative; width: 38px; height: 50px; border-radius: 9px; background: #24384a; box-shadow: inset 0 0 0 2px #4d6a82; }
.jeongseok-gate-light { position: absolute; top: 6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #5b6d7c; }
.jeongseok-gate-card { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 18px; }
.jeongseok-gate[data-light="scan"] .jeongseok-gate-light { background: #7fc8ff; box-shadow: 0 0 10px #7fc8ff; animation: jeongseok-blink .5s steps(2) infinite; }
.jeongseok-gate[data-light="green"] .jeongseok-gate-light { background: #3dff98; box-shadow: 0 0 12px #3dff98; }
.jeongseok-gate[data-light="green"] { border-color: #3dff98; }
.jeongseok-gate[data-light="red"] .jeongseok-gate-light { background: #ff5a4f; box-shadow: 0 0 12px #ff5a4f; }
.jeongseok-gate[data-light="red"] { border-color: #ff8a80; }
.jeongseok-gate strong { font-size: 14px; }
.jeongseok-gate-status { margin: 0; font-size: 13px; line-height: 1.35; }
.jeongseok-gate small { font-size: 10px; opacity: .75; }
@keyframes jeongseok-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .jeongseok-gate-light { animation: none !important; } }

/* Dorm showroom: isolated visual treatment. Other RPC shop panels keep their existing layout. */
.shop-panel[data-presentation="furniture-showroom"] {
  width: min(600px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: hidden;
  color: #20384f;
  background: #f7f9fc;
  border: 1px solid #c2d7eb;
  border-radius: 24px;
  box-shadow: 0 20px 65px #071d3470;
}
.shop-panel[data-presentation="furniture-showroom"] .shop-panel-head {
  position: relative;
  padding: 23px 54px 22px 22px;
  background: linear-gradient(120deg, #123a71 0%, #1761a8 65%, #3395c6 100%);
  color: #fff;
}
.shop-panel[data-presentation="furniture-showroom"] .shop-panel-titles h2 {
  font-size: clamp(20px, 4.5vw, 27px);
  font-weight: 900;
  letter-spacing: -.04em;
}
.shop-panel[data-presentation="furniture-showroom"] .shop-panel-titles h2::before {
  content: "INHA WORLD · ROOM STORE";
  display: block;
  margin-bottom: 10px;
  color: #b1e6ff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .15em;
}
.shop-panel[data-presentation="furniture-showroom"] .shop-panel-level { color: #c8ecff; }
.shop-panel[data-presentation="furniture-showroom"] .shop-panel-wallet {
  display: inline-block;
  margin-top: 9px;
  padding: 7px 10px;
  border: 1px solid #ffffff32;
  border-radius: 40px;
  color: #fff5ca;
  background: #ffffff1d;
}
.shop-panel[data-presentation="furniture-showroom"] .shop-panel-wallet[hidden] { display: none; }
.shop-panel[data-presentation="furniture-showroom"] .profile-close {
  top: 13px; right: 12px; width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px; color: #fff; background: #ffffff24;
}
.shop-panel[data-presentation="furniture-showroom"] .shop-hint {
  margin: 9px 17px 0; color: #855300; background: #fff0ca;
}
.shop-panel[data-presentation="furniture-showroom"] .shop-panel-body {
  flex: 1 1 auto; min-height: 0; max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 18px 17px 23px;
  color: #23394f; scrollbar-width: thin;
}
.shop-showroom-tabs {
  display: flex; gap: 7px;
  margin: 0 -3px 13px; padding: 3px 3px 9px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.shop-showroom-tab {
  flex: none; min-height: 44px; padding: 0 13px;
  border: 1px solid #e0e8f0; border-radius: 999px;
  color: #617a93; background: #fff;
  font-size: 12px; font-weight: 800; cursor: pointer;
  touch-action: manipulation;
}
.shop-showroom-tab[aria-pressed="true"] {
  color: white; background: #1760a2; border-color: #1760a2;
  box-shadow: 0 3px 10px #124c832a;
}
.shop-showroom-count { margin: 0 2px 11px; color: #728ba0; font-size: 12px; font-weight: 700; }
.shop-panel[data-presentation="furniture-showroom"] .shop-showroom-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
.shop-panel[data-presentation="furniture-showroom"] .shop-showroom-card {
  overflow: hidden; padding: 0;
  border: 1px solid #e3ebf2; border-radius: 18px;
  background: #fff; box-shadow: 0 4px 13px #1c4b7410;
}
.shop-panel[data-presentation="furniture-showroom"] .shop-showroom-card.shop-offer-locked {
  border-style: solid; opacity: 1;
}
.shop-showroom-view {
  display: block; position: relative; width: 100%; padding: 0;
  overflow: hidden; border: 0; cursor: pointer;
  background: transparent; color: #406888; touch-action: manipulation;
}
.shop-showroom-picture {
  position: relative; display: grid; place-items: center;
  width: 100%; height: clamp(105px, 23vw, 164px);
  background: linear-gradient(140deg, #e0efff, #c9e0f7);
}
.shop-showroom-picture-light { background: linear-gradient(140deg, #fff2dd, #ffdfb7); }
.shop-showroom-picture-floor { background: linear-gradient(140deg, #e7ecff, #cfdcf5); }
.shop-showroom-picture-seating { background: linear-gradient(140deg, #dbf3ef, #b9e8df); }
.shop-showroom-picture-decor { background: linear-gradient(140deg, #ffe9ed, #ffdce8); }
.shop-showroom-picture-wall { background: linear-gradient(140deg, #eee8fd, #dcd7f1); }
.shop-showroom-picture-storage { background: linear-gradient(140deg, #f7efdf, #ecd9bb); }
.shop-showroom-picture-kitchen { background: linear-gradient(140deg, #e0f4da, #c9e9c4); }
.shop-showroom-thumbnail {
  display: block; width: 100%; height: 100%; object-fit: contain;
  position: absolute; inset: 0; z-index: 1;
}
.shop-showroom-thumbnail[hidden] { display: none; }
.shop-showroom-picture-fallback {
  font-size: 46px; font-weight: 900; color: #588ab57a; line-height: 1;
}
.shop-showroom-thumbnail:not([hidden]) + .shop-showroom-picture-fallback { display: none; }
.shop-showroom-view-label {
  display: block; padding: 6px 10px;
  color: #497aa6; background: #eef5fb;
  font-size: 11px; font-weight: 800; text-align: right;
}
.shop-showroom-copy { padding: 12px 11px; }
.shop-panel[data-presentation="furniture-showroom"] .shop-showroom-copy .shop-offer-head {
  flex-wrap: wrap; gap: 4px;
}
.shop-panel[data-presentation="furniture-showroom"] .shop-showroom-copy .shop-offer-name {
  color: #243c51; font-size: 13px; font-weight: 900;
}
.shop-panel[data-presentation="furniture-showroom"] .shop-showroom-copy .shop-offer-price {
  color: #24659f; font-size: 13px;
}
.shop-panel[data-presentation="furniture-showroom"] .shop-showroom-copy .shop-offer-foot {
  flex-wrap: wrap; align-items: stretch; margin-top: 10px;
}
.shop-panel[data-presentation="furniture-showroom"] .shop-showroom-copy .shop-offer-meta {
  width: 100%; font-size: 11px;
}
.shop-panel[data-presentation="furniture-showroom"] .shop-offer-level { color: #55738a; }
.shop-panel[data-presentation="furniture-showroom"] .shop-offer-status { color: #1b855e; }
.shop-panel[data-presentation="furniture-showroom"] .shop-offer-locked .shop-offer-status { color: #ad673a; }
.shop-panel[data-presentation="furniture-showroom"] .shop-offer-unavailable .shop-offer-status { color: #8b929d; }
.shop-panel[data-presentation="furniture-showroom"] .shop-showroom-copy .shop-offer-buy {
  width: 100%; background: #1c796e; border-color: #1c796e;
}
.shop-panel[data-presentation="furniture-showroom"] .shop-offer-buy:disabled {
  background: #e4ecf2; border-color: #d4e0e7; color: #768999;
}
.shop-panel[data-presentation="furniture-showroom"] .shop-furniture-receipt {
  border-top: 1px solid #d4e3ed; color: #446279;
}
.shop-panel[data-presentation="furniture-showroom"] .shop-furniture-note { color: #3d6078; }
.shop-showroom-detail { padding: 1px 2px 8px; }
.shop-showroom-back, .shop-showroom-rotate {
  min-height: 44px; border: 1px solid #d7e5f1;
  border-radius: 12px; padding: 0 12px; background: white;
  color: #276398; font-size: 12px; font-weight: 850;
  cursor: pointer; touch-action: manipulation;
}
.shop-showroom-back { margin-bottom: 12px; }
.shop-showroom-stage {
  position: relative; display: grid; place-items: center;
  height: clamp(172px, 39vw, 280px);
  border: 1px solid #dce9f3; border-radius: 16px;
  background: linear-gradient(135deg, #e3f1fc, #c9e3f7);
  overflow: hidden;
}
.shop-showroom-preview-fallback { padding: 20px; color: #6387a3; font-size: 12px; text-align: center; }
.shop-showroom-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.shop-showroom-canvas-offscreen {
  position: fixed !important; left: -9999px !important; top: -9999px !important;
  width: 256px; height: 192px; pointer-events: none !important;
}
.shop-showroom-rotation { display: flex; gap: 8px; justify-content: center; margin: 10px 0 14px; }
.shop-showroom-detail-name { margin: 0; font-size: 21px; letter-spacing: -.03em; }
.shop-showroom-detail-description { margin: 8px 0; color: #59748b; font-size: 13px; line-height: 1.5; }
.shop-showroom-placement { color: #466985; font-size: 12px; font-weight: 750; }
.shop-showroom-detail-bottom {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 13px; border-radius: 14px; background: #edf4f9;
}
.shop-showroom-detail-price { color: #2464a0; font-size: 16px; }
.shop-showroom-detail-level, .shop-showroom-detail-status { color: #56748d; font-size: 12px; }
.shop-showroom-detail-bottom .shop-offer-buy { margin-left: auto; }
.shop-panel[data-presentation="furniture-showroom"] button:focus-visible {
  outline: 3px solid #f5b83f; outline-offset: 2px;
}
@media (max-width: 360px) {
  .shop-panel[data-presentation="furniture-showroom"] .shop-panel-body { padding: 13px 10px 19px; }
  .shop-panel[data-presentation="furniture-showroom"] .shop-showroom-grid { gap: 8px; }
  .shop-showroom-copy { padding: 10px 8px; }
}
/* SHOWROOM-SHORT-LANDSCAPE:start */
@media (max-height: 440px) and (orientation: landscape) {
  .shop-panel[data-presentation="furniture-showroom"] .shop-panel-head { padding-top: 10px; padding-bottom: 10px; }
  .shop-panel[data-presentation="furniture-showroom"] .shop-panel-body { padding-top: 10px; }
}
/* SHOWROOM-SHORT-LANDSCAPE:end */
@media (prefers-reduced-motion: reduce) {
  .shop-panel[data-presentation="furniture-showroom"] * { scroll-behavior: auto !important; transition: none !important; }
}

/* MOBILE-UX-20261015: usable World drawer without disturbing the existing HUD contracts. */
.identity-actions {
  box-sizing: border-box;
  width: min(344px, calc(100vw - 24px));
  max-height: calc(100dvh - max(80px, calc(env(safe-area-inset-top) + 65px)) - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 14px;
  scrollbar-width: thin;
}
.hud-menu-grabber { display: none; }
.hud-menu-group-label {
  margin: 12px 2px 8px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .04em;
  color: #a9c3d2;
}
.hud-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.identity-actions .hud-menu-grid > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  width: 100%;
  min-height: 72px;
  padding: 10px 5px;
  text-align: center;
  border: 1px solid rgba(178,220,239,.28);
  background: rgba(32,72,98,.6);
  font-size: 19px;
  line-height: 1.2;
}
.identity-actions .hud-menu-grid > button span {
  font-size: 11px; font-weight: 800; overflow-wrap: anywhere;
}
.identity-actions button[hidden] { display: none !important; }
.identity-actions .hud-menu-phone {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 12px; padding: 10px 12px;
  background: rgba(24, 89, 105, .73); border-color: rgba(143,226,211,.48);
  font-weight: 800; font-size: 12px;
}
.identity-actions .hud-menu-phone span:first-of-type { flex: 1; min-width: 0; }
.identity-actions .hud-menu-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 8px; }
.identity-actions .hud-menu-tools > button {
  min-width: 0; min-height: 44px; padding: 8px 7px; font-size: 11px;
  text-align: center; border-color: rgba(178,220,239,.34);
}
.identity-actions .hud-diagnostics { margin-top: 10px; }

/* SETTINGS-2: category navigation shares unchanged controls and preferences. */
.view-settings {
  box-sizing: border-box;
  width: min(380px, calc(100vw - 24px));
  top: max(72px, calc(env(safe-area-inset-top) + 64px));
  right: max(12px, env(safe-area-inset-right));
  max-height: calc(100dvh - max(82px, calc(env(safe-area-inset-top) + 74px)) - 12px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.view-settings .settings2-header {
  display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center;
  gap: 4px; position: sticky; top: -16px; z-index: 2;
  padding: 8px 0 12px; margin-bottom: 4px;
  background: #142d46f5; border-bottom: 1px solid rgba(178,220,239,.2);
}
.view-settings .settings2-header h2 {
  margin: 0; text-align: center; font-size: 16px;
}
.view-settings .settings2-header #close-settings,
.view-settings .settings2-header #settings-section-back {
  position: static; display: grid; place-items: center;
  box-sizing: border-box; width: 44px; height: 44px;
  padding: 0; margin: 0; border-radius: 12px;
  border: 1px solid rgba(178,220,239,.3); color: #f5fbff;
  background: rgba(28,67,91,.9); font-size: 24px;
}
.view-settings .settings2-header #settings-section-back[hidden] { visibility: hidden; display: block; pointer-events: none; }
.view-settings .settings2-header #close-settings { grid-column: 3; }
.view-settings .settings2-home { display: grid; gap: 9px; padding: 4px 0 12px; }
.view-settings .settings2-intro { margin: 0 0 6px; font-size: 12px; color: #c8dfeb; }
.view-settings .settings2-category {
  display: grid; grid-template-columns: 36px minmax(0,1fr) 16px;
  align-items: center; gap: 10px; width: 100%; min-height: 70px;
  padding: 10px 12px; border: 1px solid rgba(178,220,239,.35);
  border-radius: 14px; background: rgba(37,76,101,.76);
  color: #effaff; text-align: left; cursor: pointer;
}
.view-settings .settings2-category > span:first-child { font-size: 24px; text-align: center; }
.view-settings .settings2-category strong { display: block; font-size: 14px; }
.view-settings .settings2-category small { display: block; font-size: 11px; margin-top: 4px; color: #b7d1e0; }
.view-settings .settings2-page { display: grid; gap: 7px; padding: 4px 0 12px; }
.view-settings .settings2-page h3 { font-size: 16px; margin: 2px 0 12px; }
.view-settings .settings2-page label { margin: 8px 0 0; }
.view-settings .settings2-page p { margin: 0 0 7px; }
.view-settings .settings2-page select { margin: 0 0 2px; }
.view-settings .settings2-page #graphics-reset { width: 100%; margin: 8px 0; }
.view-settings .settings2-page .desktop-camera-settings { margin: 0; }
.view-settings .settings2-status { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(4,19,34,.36); }
.view-settings .settings2-home[hidden],
.view-settings .settings2-page[hidden] { display: none !important; }
@media (max-width: 600px) {
  .identity-actions {
    position: fixed;
    top: auto; bottom: max(6px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    width: auto;
    max-height: calc(100dvh - max(75px, calc(env(safe-area-inset-top) + 60px)) - max(6px, env(safe-area-inset-bottom)));
    border-radius: 22px 22px 16px 16px; padding: 8px 14px max(14px, env(safe-area-inset-bottom));
  }
  .hud-menu-grabber { display: block; width: 40px; height: 4px; margin: 3px auto 12px; border-radius: 5px; background: #99b8c8a8; }
  .view-settings:not([data-phone-hosted="true"]) {
    top: max(60px, calc(env(safe-area-inset-top) + 48px));
    max-height: calc(100dvh - max(70px, calc(env(safe-area-inset-top) + 60px)) - 10px);
    right: max(8px, env(safe-area-inset-right));
    width: min(380px, calc(100vw - 16px));
  }
}
@media (max-height: 520px) {
  .identity-actions .hud-menu-grid > button { min-height: 54px; }
  .identity-actions .hud-menu-grid > button span { font-size: 10px; }
}

/* LANDSCAPE-HUD:start
   Mobile landscape HUD · phones held sideways (touch + landscape + short viewport).
   The portrait phone HUD keys off max-width, so a rotated phone (740–932px wide) used to fall through to the
   desktop-sized layout while joystick / jump / run were already active: the right rail and the action stack
   collided on 350–450px tall screens. This block is a pure override that only matches that situation — the
   portrait and desktop rules above are untouched and no DOM or JS authority changes.
   Layout: left = joystick + social row · right = Mini-map + one-line tracked quest, then a short 2-column action cluster ·
   top-left = first-tour card only · top rail beside the Mini-map = guidance / event chips ·
   bottom centre "lane" (between pad and cluster) = chat / toasts / dialogue, kept clear when idle.
   Mirrors with body.joystick-right through the --ls-* side tokens. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  body {
    --ls-top: max(6px, env(safe-area-inset-top));
    --ls-bar: 40px;
    --ls-edge-l: max(24px, env(safe-area-inset-left));
    --ls-edge-r: max(24px, env(safe-area-inset-right));
    --ls-bottom: max(16px, env(safe-area-inset-bottom));
    --ls-lane-bottom: max(10px, env(safe-area-inset-bottom));
    --ls-pad: 116px;
    --ls-btn: 68px;
    --ls-gap: 8px;
    --ls-map: 96px;
    --ls-row2: calc(var(--ls-bottom) + var(--ls-btn) + var(--ls-gap));
    /* Shared right rail: Mini-map is 96px, top-right, under the 40px top bar. */
    --world-right-rail-top: calc(var(--ls-top) + var(--ls-bar) + 6px);
    --world-right-rail-map-size: var(--ls-map);
    --world-right-rail-gap: 6px;
    /* Guidance / event chips sit in the column beside the Mini-map, not under it (that space is the thumb zone). */
    --ls-chip-right: calc(var(--world-right-rail-right) + var(--ls-map) + 8px);
    --ls-event-top: var(--world-right-rail-top);
    /* Side tokens · joystick on the left (default). `o1` = outer action column, `o2` = inner column. */
    --ls-pad-l: var(--ls-edge-l);
    --ls-pad-r: auto;
    --ls-o1-l: auto;
    --ls-o1-r: var(--ls-edge-r);
    --ls-o2-l: auto;
    --ls-o2-r: calc(var(--ls-edge-r) + var(--ls-btn) + 10px);
    --ls-o3-l: auto;
    --ls-o3-r: calc(var(--ls-edge-r) + (var(--ls-btn) + 10px) * 2);
    --ls-lane-left: calc(var(--ls-edge-l) + var(--ls-pad) + 12px);
    --ls-lane-end: calc(var(--ls-edge-r) + var(--ls-btn) * 2 + 22px);
  }
  body.joystick-right {
    --ls-pad-l: auto;
    --ls-pad-r: var(--ls-edge-r);
    --ls-o1-l: var(--ls-edge-l);
    --ls-o1-r: auto;
    --ls-o2-l: calc(var(--ls-edge-l) + var(--ls-btn) + 10px);
    --ls-o2-r: auto;
    --ls-o3-l: calc(var(--ls-edge-l) + (var(--ls-btn) + 10px) * 2);
    --ls-o3-r: auto;
    --ls-lane-left: calc(var(--ls-edge-l) + var(--ls-btn) * 2 + 22px);
    --ls-lane-end: calc(var(--ls-edge-r) + var(--ls-pad) + 12px);
  }
  body:has(#nav-guidance:not([hidden])) { --ls-event-top: calc(var(--world-right-rail-top) + 42px); }
  body:has(#auto-move-hud:not([hidden])) { --ls-event-top: calc(var(--world-right-rail-top) + 42px); }
  body:has(#nav-guidance:not([hidden])):has(#auto-move-hud:not([hidden])) { --ls-event-top: calc(var(--world-right-rail-top) + 84px); }
  body:has(> .mcm26-chip:not([hidden])) { --ls-inky-right: calc(var(--ls-chip-right) + 90px); }
  body:not(:has(> .mcm26-chip:not([hidden]))) { --ls-inky-right: var(--ls-chip-right); }

  /* Top bar: 40px controls, still above the 44px menu rows' reach. */
  .campus-topbar {
    top: var(--ls-top);
    height: var(--ls-bar);
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 6px;
  }
  .campus-topbar .return-home,
  .hud-menu-toggle { width: 40px; height: 40px; border-radius: 12px; }
  .return-home-arrow { font-size: 18px; line-height: 16px; }
  .location-chip { height: 36px; max-width: 280px; padding-inline: 11px; }
  .location-chip strong { font-size: 12px; }

  /* Left hand: joystick (unchanged size) + one row of social buttons above it. */
  body #joystick,
  body.joystick-right #joystick {
    left: var(--ls-pad-l);
    right: var(--ls-pad-r);
    bottom: var(--ls-bottom);
  }
  body .social-cluster,
  body.joystick-right .social-cluster {
    left: var(--ls-pad-l);
    right: var(--ls-pad-r);
    bottom: calc(var(--ls-bottom) + var(--ls-pad) + 8px);
    gap: 6px;
  }
  body .social-cluster #nearby-toggle,
  body .social-cluster #emote-toggle,
  body .social-cluster #chat-toggle { width: 44px; height: 44px; font-size: 17px; }
  /* Emote menu opens in the bottom lane (chat is closed while it is open), clear of the Mini-map for either hand. */
  body .emote-menu,
  body.joystick-right .emote-menu {
    left: var(--ls-lane-left);
    right: auto;
    bottom: var(--ls-lane-bottom);
    max-width: min(300px, calc(100vw - var(--ls-lane-left) - var(--ls-lane-end)));
  }
  body .emote-option { height: 52px; }
  body .emote-status,
  body.joystick-right .emote-status {
    left: var(--ls-lane-left);
    right: auto;
    bottom: calc(var(--ls-lane-bottom) + 70px);
  }

  /* Right hand: JUMP outer / RUN inner on the bottom row. */
  body #run,
  body #jump,
  body #descend,
  body.joystick-right #run,
  body.joystick-right #jump,
  body.joystick-right #descend {
    left: var(--ls-o1-l);
    right: var(--ls-o1-r);
    bottom: var(--ls-bottom);
    width: var(--ls-btn);
    height: var(--ls-btn);
  }
  body #run,
  body.joystick-right #run {
    left: var(--ls-o2-l);
    right: var(--ls-o2-r);
  }
  /* Flight: DESCEND takes the bottom outer slot, ASCEND (jump) the slot above it, RUN stays inner. */
  body[data-movement-state="MOUNT_FLIGHT"] #jump { bottom: var(--ls-row2); }
  body[data-movement-state="MOUNT_FLIGHT"] #descend { bottom: var(--ls-bottom); }

  /* Row 2: transport (mount / dismount) is the outer slot, the context action sits beside it. */
  body #transport-action,
  body #context-action[hidden] + #transport-action,
  body.joystick-right #transport-action,
  body.joystick-right #context-action[hidden] + #transport-action,
  body[data-movement-state="MOUNT_FLIGHT"] #transport-action,
  body[data-movement-state="MOUNT_FLIGHT"] #context-action[hidden] + #transport-action {
    left: var(--ls-o1-l);
    right: var(--ls-o1-r);
    transform: none;
    bottom: var(--ls-row2);
    width: var(--ls-btn);
    min-width: var(--ls-btn);
    max-width: var(--ls-btn);
    min-height: 44px;
    padding: 6px 4px;
    border-radius: 14px;
    font-size: 12px;
  }
  /* In flight row 2's outer slot is ASCEND, so transport moves to the inner slot of the same row. */
  body[data-movement-state="MOUNT_FLIGHT"] #transport-action,
  body[data-movement-state="MOUNT_FLIGHT"] #context-action[hidden] + #transport-action {
    left: var(--ls-o2-l);
    right: var(--ls-o2-r);
  }
  body #context-action {
    left: var(--ls-o2-l);
    right: var(--ls-o2-r);
    transform: none;
    bottom: var(--ls-row2);
    min-width: 96px;
    max-width: 164px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 13px;
  }
  /* No transport button: the context action takes the outer slot directly above JUMP. */
  body:has(> #transport-action[hidden]) > #context-action {
    left: var(--ls-o1-l);
    right: var(--ls-o1-r);
  }
  /* Flight: row 2 holds ASCEND + transport, so a (rare) context action sits beside them on the same row. */
  body[data-movement-state="MOUNT_FLIGHT"] #context-action {
    left: var(--ls-o3-l);
    right: var(--ls-o3-r);
    max-width: 132px;
  }

  /* Bottom lane (between joystick and cluster): chat, status and toasts, only while they are shown. */
  body .chat-feed,
  body .chat-form,
  body .chat-hint {
    left: var(--ls-lane-left);
    right: auto;
    width: min(340px, calc(100vw - var(--ls-lane-left) - var(--ls-lane-end)));
  }
  body .chat-form { bottom: calc(var(--ls-lane-bottom) + var(--keyboard-inset, 0px)); }
  /* Expanded chat must override the coarse-pointer portrait offset too. */
  body .chat-feed,
  body .chat-feed[data-mode="EXPANDED"] {
    bottom: calc(var(--ls-lane-bottom) + 50px + var(--keyboard-inset, 0px));
    max-height: 76px;
    font-size: 12px;
    line-height: 1.4;
  }
  body .chat-hint { bottom: calc(var(--ls-lane-bottom) + 50px + var(--keyboard-inset, 0px)); }
  body .follow-status {
    bottom: var(--ls-lane-bottom);
    max-width: calc(100vw - 2 * max(var(--ls-lane-left), var(--ls-lane-end)));
    padding: 5px 10px;
    font-size: 12px;
  }
  body .nearby-panel {
    left: var(--ls-lane-left);
    bottom: var(--ls-lane-bottom);
    width: min(300px, calc(100vw - var(--ls-lane-left) - var(--ls-lane-end)));
    max-height: calc(100dvh - var(--world-right-rail-top) - var(--ls-lane-bottom) - 6px);
  }
  body .accompany-panel {
    bottom: var(--ls-lane-bottom);
    width: min(360px, calc(100vw - 2 * max(var(--ls-lane-left), var(--ls-lane-end))));
  }

  /* Dialogue (NPC, Biryong, back-gate guide, MCM event): one lane-wide card that stays below the top bar. */
  body #npc-test-panel.npc-live-panel,
  body .biryong-dialogue,
  body .main2-guide-dialogue,
  body .mcm26-dialogue {
    bottom: var(--ls-lane-bottom);
    width: min(440px, calc(100vw - 2 * max(var(--ls-lane-left), var(--ls-lane-end))));
    max-height: calc(100dvh - var(--world-right-rail-top) - 46px - var(--ls-lane-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body .biryong-toast {
    top: auto;
    bottom: var(--ls-lane-bottom);
    width: min(320px, calc(100vw - 2 * max(var(--ls-lane-left), var(--ls-lane-end))));
    padding: 8px 12px 9px;
  }
  body .biryong-toast-title { font-size: 16px; }
  body .biryong-toast-detail { margin-top: 2px; font-size: 12px; line-height: 1.35; }

  /* Right rail: the Mini-map keeps the top-right corner, chips go in the column to its left. */
  body .nav-guidance {
    --nav-minimap-size: var(--ls-map);
    top: var(--world-right-rail-top);
    right: var(--ls-chip-right);
    max-width: min(250px, calc(100vw - var(--ls-chip-right) - 300px));
  }
  body .nav-guidance .nav-guidance-text { flex: 1 1 auto; }
  body #nav-guidance-detail,
  body #auto-move-detail { overflow: hidden; text-overflow: ellipsis; }
  /* .nav-guidance-cancel's font shorthand (declared later) resets the 11px label size, so restate it here. */
  body .auto-move-pause,
  body .auto-move-resume { width: auto; min-width: 52px; padding: 0 8px; font-size: 11px; white-space: nowrap; }
  body .auto-move-hud { top: var(--world-right-rail-top); }
  body:has(#nav-guidance:not([hidden])) .auto-move-hud { top: calc(var(--world-right-rail-top) + 42px); }
  body .minimap { --minimap-size: var(--ls-map); }
  body > .mcm26-chip {
    top: var(--ls-event-top);
    right: var(--ls-chip-right);
    min-width: 84px;
    min-height: 32px;
    padding: 5px 10px;
    font-size: 12px;
    text-align: center;
  }
  body > .mcm26-toast,
  body .mcm26-game-toast {
    bottom: var(--ls-lane-bottom);
    max-width: calc(100vw - 2 * max(var(--ls-lane-left), var(--ls-lane-end)));
    padding: 7px 12px;
    font-size: 12px;
    line-height: 1.4;
  }
  body .mcm26-game-hud { top: var(--world-right-rail-top); }
  body .inkyung-living-moment {
    top: var(--ls-event-top);
    right: var(--ls-inky-right);
    width: min(230px, calc(100vw - var(--ls-chip-right) - 300px));
  }
  body .inkyung-living-moment[data-mode="COLLAPSED"] { width: auto; }
  body .inkyung-living-toggle { min-height: 32px; padding: 4px 8px; font-size: 10.5px; }
  body .inkyung-living-panel { padding: 7px 10px; }
  body .inkyung-living-moment strong { font-size: 12px; }
  body .inkyung-living-actions { font-size: 10px; line-height: 1.35; }

  /* First-tour guidance stays top-left. The tracked quest joins the Mini-map rail on the right. */
  body .tour {
    top: var(--world-right-rail-top);
    left: max(12px, env(safe-area-inset-left));
    min-height: 34px;
    padding: 4px 9px;
    max-width: min(340px, calc(100vw - var(--ls-chip-right) - 210px));
  }
  body .tour .tour-objective { max-width: 150px; }
  body .tracked-quest-hud {
    top: calc(var(--world-right-rail-top) + var(--ls-map) + 6px);
    right: var(--world-right-rail-right);
    left: auto;
    width: min(210px, calc(100vw - 24px));
    max-width: 210px;
    min-height: 36px;
    display: flex;
    align-items: center;
    padding: 0;
  }
  body .tracked-quest-hud .tracked-quest-hud-open {
    min-height: 36px !important;
    padding: 4px 9px !important;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    grid-template-areas: "flag objective bearing";
    column-gap: 7px;
    row-gap: 0;
  }
  body .tracked-quest-hud .tour-heading { display: none; }
  body .tracked-quest-hud .tour-flag { font-size: 14px; }
  body .tracked-quest-hud .tour-objective { max-width: 190px; font-size: 12px; }
  body .tracked-quest-bearing { min-width: 0; padding: 3px 7px; font-size: 11px; border-radius: 8px; }
  body .tracked-quest-hud .next-discovery { padding: 0 6px 0 0; }
  body .tracked-quest-hud #next-discovery-primary { min-height: 32px; padding: 4px 8px; }
  body .biryong-objective {
    left: max(12px, env(safe-area-inset-left));
    top: calc(var(--world-right-rail-top) + 40px);
    transform: none;
    max-width: min(300px, calc(100vw - var(--ls-chip-right) - 210px));
    padding: 4px 10px;
    font-size: 12px;
  }

  /* Nested menu grids own their columns; the drawer remains one scroll surface. */
  body .identity-actions {
    display: block;
    top: auto;
    bottom: max(6px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    width: auto;
    max-height: calc(100dvh - 54px - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 12px;
  }
  body .identity-actions .hud-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body .identity-actions .hud-menu-grid > button { padding: 7px 4px; }
  body .view-settings:not([data-phone-hosted="true"]) {
    top: max(50px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    width: min(380px, calc(100vw - 16px));
    max-height: calc(100dvh - 58px - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 14px;
  }
  body .player-card {
    top: calc(var(--world-right-rail-top) + 4px);
    max-height: calc(100dvh - var(--world-right-rail-top) - 12px);
  }
  body .quest-journal-panel { max-height: calc(100dvh - 16px); }
  body .quest-journal-body { min-height: 0; flex: 1 1 auto; grid-template-rows: minmax(0, 1fr); margin-top: 8px; }
  body .quest-journal-tabs { margin-top: 8px; }

  /* Helicopter P0.6: compact instruments share the existing short-landscape HUD authority. */
  body .helicopter-flight-hud {
    top: var(--world-right-rail-top);
    width: min(330px, calc(100vw - 360px));
    grid-template-columns: 72px 96px 72px;
    gap: 4px 7px;
    padding: 6px 8px 5px;
    border-radius: 14px;
  }
  body .helicopter-flight-hud .helicopter-flight-column {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  body .helicopter-flight-hud .helicopter-flight-readout {
    padding: 2px 5px;
  }
  body .helicopter-flight-hud .helicopter-flight-secondary {
    display: none;
  }
  body .helicopter-flight-hud .helicopter-horizon {
    width: 90px;
    height: 50px;
  }
  body .helicopter-flight-hud .helicopter-flight-footer {
    font-size: 8px;
  }

  /* Helicopter P0.7: instrument toggle shares the existing short-landscape HUD authority. */
  body .helicopter-flight-hud-toggle {
    top: calc(var(--world-right-rail-top) + 4px);
    left: 50%;
    transform: translateX(92px);
    min-width: 64px;
    min-height: 26px;
    padding: 3px 7px;
    font-size: 9px;
  }
  /* Mobility Book P0.8: keep the modal usable on short landscape phones. */
  body .mobility-book-panel {
    width: min(880px, calc(100vw - 16px));
    max-height: calc(100dvh - 12px);
  }
  body .mobility-book-body {
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
    max-height: calc(100dvh - 72px);
    gap: 9px;
    padding: 0 10px 10px;
  }
  body .mobility-list { max-height: calc(100dvh - 158px); }
  body .mobility-detail-emoji { width: 62px; height: 62px; font-size: 34px; }
  body .mobility-detail-title h3 { font-size: 17px; }
  body .mobility-detail-description { margin: 7px 0; padding: 7px 8px; }
  body .mobility-actions { margin-top: 8px; }
  /* Photo Mode 2.0: the photo-only move pad and settings drawer share this short-landscape authority;
     the drawer stays clear of the ▲▼ column on the same edge. */
  body .photo-mode-pad { width: 96px; height: 96px; }
  body .photo-mode-settings { right: calc(var(--photo-edge-r) + 60px); }
  body.joystick-right .photo-mode-settings { right: var(--photo-edge-r); }

}
/* LANDSCAPE-HUD:end */