/* Coarse pointers, including large tablets, get a complete touch interface.
   JavaScript also enables this layout for narrow desktop windows. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
html, body { width:100%; height:100%; overscroll-behavior:none; }
body { height:100dvh; }
#world { width:100%; height:100%; -webkit-touch-callout:none; }
button { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.hud { user-select:none; -webkit-user-select:none; }
.mobile-only { display:none; }
.minimap-wrap { pointer-events:none; }
input { font-size:16px; }
.login-overlay {
  align-items:flex-start;
  overflow-y:auto;
  padding:calc(20px + var(--safe-top)) calc(16px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(16px + var(--safe-left));
}
.login-card { margin:auto; flex-shrink:0; }
.login-footer { display:none; }
dialog { max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px); overflow-y:auto; overscroll-behavior:contain; }
dialog .close { width:44px; height:44px; right:5px; top:3px; }
.compact-ui .mobile-only { display:block; }
.compact-ui .topbar {
  height:calc(52px + var(--safe-top));
  padding:var(--safe-top) calc(8px + var(--safe-right)) 0 calc(8px + var(--safe-left));
}
.compact-ui .brand { font-size:14px; letter-spacing:1.5px; gap:5px; }
.compact-ui .brand-mark { font-size:28px; }
.compact-ui .brand small { font-size:6px; letter-spacing:2px; margin-top:4px; }
.compact-ui .build, .compact-ui .connection { display:none; }
.compact-ui .top-actions { gap:2px; }
.compact-ui .top-actions button { min-width:44px; min-height:44px; }
.compact-ui .top-actions .text-btn { font-size:0; }
.compact-ui .top-actions .text-btn span { font-size:21px; margin:0; }
.compact-ui .round-btn { border-radius:8px; border-color:transparent; font-size:20px; }
.quest-toggle { font-size:10px; padding:4px 8px; color:var(--gold); border:1px solid transparent; border-radius:6px; }
.quest-toggle span { display:block; font-size:9px; margin-top:3px; color:#aabb95; }
.quest-toggle[aria-expanded="true"], .quest-toggle.ready { border-color:#b4a46a77; background:#76693d33; }
.compact-ui .character { top:calc(62px + var(--safe-top)); left:calc(10px + var(--safe-left)); width:196px; padding:7px; gap:7px; }
.compact-ui .portrait { width:38px; height:54px; }
.compact-ui .character .name-line { margin:0 0 6px; gap:5px; }
.compact-ui .character .name-line strong { font-size:12px; max-width:96px; }
.compact-ui .character .name-line>span { font-size:8px; }
.compact-ui .pet { top:calc(140px + var(--safe-top)); left:calc(10px + var(--safe-left)); width:196px; height:58px; padding:6px 5px 6px 10px; gap:4px; }
.compact-ui .pet .wolf-symbol { display:none; }
.compact-ui .pet .name-line strong { font-size:11px; }
.compact-ui .pet small { font-size:9px; line-height:1.25; }
.compact-ui .pet button { width:44px; height:44px; flex-shrink:0; }
.compact-ui .map-column { right:calc(10px + var(--safe-right)); top:calc(62px + var(--safe-top)); width:94px; }
.compact-ui .location { padding-bottom:6px; }
.compact-ui .location h1 { font-size:14px; margin:0 0 5px; }
.compact-ui .location .eyebrow, .compact-ui .location p { display:none; }
.compact-ui .minimap-wrap { height:76px; padding:3px; }
.compact-ui .map-coordinates, .compact-ui .north { display:none; }
.compact-ui .map-footer { font-size:9px; padding:6px 0; }
.compact-ui .quest {
  display:none; position:fixed; z-index:4; top:calc(62px + var(--safe-top));
  left:calc(10px + var(--safe-left)); right:calc(10px + var(--safe-right)); bottom:auto;
  width:auto; max-width:350px; max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 105px);
  overflow-y:auto; overscroll-behavior:contain; padding:22px 18px; margin:0; pointer-events:auto;
  background:#19271ff5; box-shadow:0 18px 60px #0009;
}
.compact-ui.quest-open .quest { display:block; }
.compact-ui .quest p, .compact-ui .quest-reward { display:block; }
.compact-ui .quest h2 { font-size:24px; }
.compact-ui .quest p { font-size:12px; }
.compact-ui .objective { font-size:11px; margin:16px 0; }
.compact-ui .objective b { font-size:11px; }
.compact-ui .quest .eyebrow { font-size:9px; }
.quest-close { position:absolute; right:3px; top:3px; width:44px; height:44px; font-size:24px; color:#c1c5ab; }
.compact-ui .quest-claim { min-height:48px; font-size:12px; }
.compact-ui .target-panel { top:calc(210px + var(--safe-top)); bottom:auto; width:218px; padding:8px 10px; }
.compact-ui .target-panel strong { font-size:12px; }
.compact-ui .target-panel small, .compact-ui .left-bottom, .compact-ui .bottom-right { display:none; }
.compact-ui .bottom-center {
  left:auto; right:calc(12px + var(--safe-right)); bottom:calc(82px + var(--safe-bottom));
  transform:none; width:136px;
}
.compact-ui .action-dock { display:block; padding:0; background:none; border:0; box-shadow:none; }
.compact-ui .skills { display:grid; grid-template-columns:repeat(2,64px); gap:8px; }
.compact-ui .skill { width:64px; height:64px; border-radius:9px; background-color:#15241e; }
.compact-ui .skill svg { width:33px; height:33px; margin:3px auto; }
.compact-ui .skill span { font-size:10px; }
.compact-ui .skill kbd, .compact-ui .orb, .compact-ui .dock-separator { display:none; }
.compact-ui .inventory-btn {
  position:fixed; right:calc(160px + var(--safe-right)); bottom:calc(25px + var(--safe-bottom));
  width:48px; height:48px; border:1px solid var(--border); border-radius:9px; background:#19291fe8; gap:2px;
}
.compact-ui .inventory-btn svg { width:25px; height:25px; }
.compact-ui .inventory-btn kbd { display:none; }
.compact-ui .inventory-btn>span { font-size:9px; }
.compact-ui .xp-row { position:fixed; left:calc(12px + var(--safe-left)); right:calc(12px + var(--safe-right)); bottom:calc(7px + var(--safe-bottom)); margin:0; height:9px; font-size:7px; }
.compact-ui .context-hint { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(235px + var(--safe-bottom)); width:min(340px,90vw); height:auto; font-size:10px; line-height:1.5; }
.compact-ui .toasts { top:43%; width:min(90vw,380px); z-index:5; }
.compact-ui .toast { font-size:11px; padding:10px 12px; }
.mobile-controls { position:absolute; inset:0; pointer-events:none; }
.joystick { position:absolute; left:calc(12px + var(--safe-left)); bottom:calc(27px + var(--safe-bottom)); width:116px; height:116px; pointer-events:auto; touch-action:none; -webkit-touch-callout:none; }
.stick-track { position:absolute; inset:0; border-radius:50%; border:1px solid #b7c39944; background:radial-gradient(#8ba46e17,#1b302a77); box-shadow:inset 0 0 0 16px #97b17808; }
.stick-track:before, .stick-track:after { content:''; position:absolute; background:#b7c39920; }
.stick-track:before { width:1px; top:16px; bottom:16px; left:50%; }
.stick-track:after { height:1px; left:16px; right:16px; top:50%; }
.stick-knob { position:absolute; top:36px; left:36px; width:44px; height:44px; border:1px solid #cbd3aa77; border-radius:50%; background:radial-gradient(circle at 35% 30%,#91a077aa,#455e48bb); box-shadow:0 3px 12px #0004; pointer-events:none; }
.joystick>span { position:absolute; bottom:-14px; left:0; right:0; text-align:center; font-size:7px; letter-spacing:1.5px; color:#a7b49c; }
.joystick.active .stick-track { border-color:#b7c39999; }
.mobile-actions { position:absolute; right:calc(12px + var(--safe-right)); bottom:calc(24px + var(--safe-bottom)); display:flex; gap:8px; }
.mobile-actions button { display:flex; flex-direction:column; align-items:center; justify-content:center; width:64px; height:50px; background:#233629ee; border:1px solid #b8b78155; border-radius:9px; font-size:10px; }
.mobile-actions button>span { font-size:21px; line-height:1.1; margin-bottom:2px; color:#d1c897; }
.mobile-actions button.ready { background:#53623cee; border-color:#d8c882; box-shadow:0 0 14px #d8c82222; }
.touch-help { font-size:12px; line-height:1.7; color:#b9c4a9; }
.touch-help b { color:#dfddbf; font-weight:400; }
.mobile-sound { min-height:44px; width:100%; border:1px solid var(--border); padding:10px; color:var(--gold); }
.compact-ui #help .help-row { display:none; }
.compact-ui .login-card { width:min(100%,430px); padding:24px; }
.compact-ui dialog { width:min(94vw,460px); padding:24px; }
.compact-ui .help-row { font-size:12px; }
@media(max-width:359px) {
  .compact-ui .brand { font-size:12px; letter-spacing:1px; }
  .compact-ui .brand-mark { display:none; }
  .compact-ui .character, .compact-ui .pet { width:180px; }
  .compact-ui .portrait { display:none; }
  .compact-ui .map-column { width:90px; }
  .compact-ui .joystick { width:96px; height:96px; }
  .compact-ui .stick-knob { top:26px; left:26px; }
}
@media(max-height:540px) and (min-width:540px) {
  .compact-ui .topbar { height:calc(44px + var(--safe-top)); }
  .compact-ui .character { top:calc(52px + var(--safe-top)); width:178px; }
  .compact-ui .portrait { display:none; }
  .compact-ui .pet { top:calc(116px + var(--safe-top)); width:178px; height:52px; }
  .compact-ui .map-column { top:calc(52px + var(--safe-top)); }
  .compact-ui .minimap-wrap { display:none; }
  .compact-ui .target-panel { top:calc(52px + var(--safe-top)); }
  .compact-ui .quest { top:calc(52px + var(--safe-top)); }
  .compact-ui .context-hint { bottom:calc(20px + var(--safe-bottom)); max-width:260px; }
  .compact-ui .inventory-btn { bottom:calc(82px + var(--safe-bottom)); }
  .compact-ui .login-emblem, .compact-ui .login-intro, .compact-ui .ornament, .compact-ui .login-details, .compact-ui .save-note { display:none; }
  .compact-ui .login-card h1 { font-size:30px; margin:6px 0 16px; }
  .compact-ui .login-card { padding:20px 28px; }
}

/* Keep the fullscreen control reachable even on narrow phones. */
.compact-ui #invite{display:none}
.network-options { margin:14px 0; padding:12px; border:1px solid #a9b88c44; border-radius:8px; }
.network-options label { display:block; margin-bottom:8px; }
.network-options select, .network-options button { padding:10px; color:#e2dfc8; background:#25372c; border:1px solid #83976a66; border-radius:5px; min-height:44px; }
#networkStatus { white-space:pre-line; font-size:12px; line-height:1.6; overflow-wrap:anywhere; color:#ccd2ba; }