* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #081321;
  color: #eef6ff;
  font: 13px system-ui;
}
canvas {
  display: block;
  width: 100vw;
  height: 100dvh;
  touch-action: none;
}
header {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #10253eee;
  border: 1px solid #345373;
  border-radius: 12px;
}
strong {
  margin-right: auto;
}
small {
  display: block;
  color: #9fbbd7;
  font-size: 11px;
}
button,
select {
  background: #193854;
  color: #e9f6ff;
  border: 1px solid #507393;
  border-radius: 7px;
  padding: 8px;
  cursor: pointer;
}
button:disabled {
  opacity: 0.4;
}
aside {
  position: fixed;
  top: var(--header-bottom, 95px);
  left: 12px;
  padding: 12px;
  background: #10253ee8;
  border: 1px solid #345373;
  border-radius: 10px;
  max-width: 280px;
}
output {
  display: block;
  white-space: pre-line;
  font:
    12px/1.7 ui-monospace,
    monospace;
  margin: 10px 0;
  color: #a9dcff;
}
label {
  display: block;
  margin-top: 6px;
}
footer {
  position: fixed;
  bottom: 10px;
  left: 12px;
  right: 12px;
  font-size: 11px;
  line-height: 1.6;
  padding: 10px;
  background: #10253edb;
  border-radius: 8px;
  pointer-events: none;
  color: #bed4e9;
}
footer b {
  color: #ffd58e;
}
@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
  }
  strong {
    width: 100%;
  }
  aside {
    max-width: 240px;
    font-size: 11px;
  }
  button,
  select {
    padding: 6px;
  }
  footer {
    font-size: 10px;
  }
}

#diagnostics {
  display: none;
}
@media (max-width: 600px), (max-height: 500px) {
  header {
    flex-wrap: nowrap;
    padding: 7px;
    gap: 5px;
    top: 6px;
    left: 6px;
    right: 6px;
  }
  header strong {
    width: auto;
    font-size: 11px;
  }
  header small {
    font-size: 9px;
  }
  #diagnostics {
    display: block;
  }
  #reload,
  #tour,
  #export {
    display: none;
  }
  aside {
    padding: 7px 10px;
    left: 6px;
    pointer-events: none;
  }
  aside output,
  aside label,
  footer {
    display: none;
  }
  body.show-diagnostics header {
    flex-wrap: wrap;
  }
  body.show-diagnostics #reload,
  body.show-diagnostics #tour,
  body.show-diagnostics #export {
    display: block;
  }
  body.show-diagnostics aside {
    pointer-events: auto;
  }
  body.show-diagnostics aside output,
  body.show-diagnostics aside label,
  body.show-diagnostics footer {
    display: block;
  }
}

dialog {
  color: #eef6ff;
  background: #10253e;
  border: 1px solid #507393;
  border-radius: 12px;
  width: min(420px, calc(100vw - 24px));
  max-height: 90dvh;
  overflow: auto;
}
dialog::backdrop {
  background: #0008;
}
dialog input {
  display: block;
  width: 100%;
  padding: 10px;
  margin: 5px 0 12px;
  border-radius: 6px;
  border: 1px solid #507393;
  background: #193854;
  color: white;
}
dialog button {
  min-height: 40px;
  margin: 4px 2px;
}
#characters button {
  display: block;
  width: 100%;
  text-align: left;
}

body.login-screen header,
body.login-screen aside,
body.login-screen footer {
  visibility: hidden;
}

:fullscreen canvas { width:100vw; height:100dvh; }
@media(max-width:600px) { header { flex-wrap:wrap; } #reset-camera, #fullscreen {font-size:10px;} }


#combat-overlay {position:fixed;inset:0;pointer-events:none;width:100vw;height:100dvh;}
#target-info {position:fixed;bottom:12px;left:50%;transform:translateX(-50%);padding:8px 14px;background:#10253eee;border-radius:8px;font-size:12px;pointer-events:none;z-index:2;}

#self-hp {position:fixed;right:12px;top:var(--header-bottom,95px);padding:7px 12px;background:#10253eee;border-radius:7px;pointer-events:none;}
#respawn {position:fixed;bottom:50px;left:50%;transform:translateX(-50%);z-index:3;}

#training-guide{max-width:540px;max-height:80dvh;overflow:auto}#training-guide li{margin:12px 0}

#combat-controls{position:fixed;inset:0;pointer-events:none;z-index:8}#move-stick{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:100px;width:108px;height:108px;border:1px solid #8cd8ef88;border-radius:50%;background:#17374c55;pointer-events:auto;touch-action:none;display:grid;place-items:center}#stick-knob{width:42px;height:42px;border-radius:50%;background:#8edaf399;border:2px solid #d5f6ff;pointer-events:none}#attack-target{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:100px;width:76px;height:76px;border-radius:50%;pointer-events:auto;background:#ba922d;color:white;border:2px solid #ffe9a1;touch-action:manipulation}

#combat-controls[hidden]{display:none}

#inventory-dialog{width:min(520px,90vw);max-height:85dvh;overflow:auto}.bag-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #8dc7dd44}.bag-row small{display:block;margin-top:4px;color:#a9d5e7}.bag-row button{flex-shrink:0}

/* The game viewport is fixed; transient shake must not create scrollable overflow. */
html,body{width:100%;height:100%;overflow:hidden;overflow:clip;}

#login-submit:disabled{filter:grayscale(1);opacity:.55;cursor:not-allowed;box-shadow:none;pointer-events:none}

/* Shared popover geometry must exist before any lazy panel opens. */
.compact-game-menu{position:fixed;inset:auto;margin:0;padding:4px;min-width:140px;max-width:210px;border:1px solid #ffffff28;border-radius:6px;background:rgba(5,10,16,.85);color:#f2f6ff;font:11px Arial;box-sizing:border-box;user-select:none}
.compact-game-menu button{display:block;width:100%;height:25px;min-height:0;margin:0;padding:0 7px;border:0;border-radius:3px;background:transparent;color:inherit;text-align:left;font:inherit;outline:none;box-shadow:none;cursor:pointer}
.compact-game-menu button:hover,.compact-game-menu:not(:has(button:hover)) button:focus-visible{background:#83cfff24;text-shadow:0 0 5px #a1ddff}.compact-game-menu button:disabled{color:#8290a4;cursor:default}