/* Gate D — shared responsive UI design system */
:root {
  --d-space-1: 4px;
  --d-space-2: 8px;
  --d-space-3: 12px;
  --d-space-4: 16px;
  --d-space-5: 24px;
  --d-space-6: 32px;
  --d-radius-sm: 5px;
  --d-radius-md: 9px;
  --d-radius-lg: 14px;
  --d-touch-target: 44px;
  --d-ui-scale: 1;
  --d-chat-scale: 1;
  --d-focus: #ffe083;
  --d-warning: #f0bf59;
  --d-danger: #e46f63;
  --d-success: #83cf8c;
  --d-overlay: rgba(5, 4, 3, .78);
  --d-visual-viewport-height: 100dvh;
  --d-visual-viewport-width: 100vw;
}

/* Reusable windows, headers, buttons, tabs, fields, progress, and empty states. */
.game-frame,
.center-interface,
.panel-card,
.ui-window {
  border-radius: var(--d-radius-sm);
}
.center-interface-header,
.panel-card > header,
.ui-window__header {
  min-height: var(--d-touch-target);
  padding-inline: var(--d-space-3);
  gap: var(--d-space-2);
}
.interface-close,
#close-panel,
.ui-icon-button {
  min-width: var(--d-touch-target);
  min-height: var(--d-touch-target);
  display: inline-grid;
  place-items: center;
}
.primary-button,
.panel-button,
.setting-row button,
.context-option,
.tab-button,
#chat-tabs button,
.ui-button {
  min-height: 36px;
  border-radius: var(--d-radius-sm);
}
.setting-row {
  min-height: var(--d-touch-target);
  padding-block: var(--d-space-2);
}
.setting-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.context-option { padding: 10px 12px; }
#context-menu { border-radius: var(--d-radius-md); max-width: min(340px, calc(100vw - 20px)); }
#item-tooltip,
.role-tooltip,
#touch-tooltip {
  border-radius: var(--d-radius-md);
}
#touch-tooltip {
  position: fixed;
  z-index: 50000;
  width: min(280px, calc(100vw - 20px));
  padding: 10px 12px;
  color: #fff4cf;
  background: rgba(28, 23, 17, .97);
  border: 1px solid #a68a55;
  box-shadow: 0 12px 28px rgba(0,0,0,.62);
  pointer-events: none;
  font: 700 12px/1.4 "Courier New", monospace;
}

/* UI scale intentionally affects interface chrome, not the world canvas or NPC rendering. */
#status-orbs,
#minimap-panel,
#top-tabs,
#side-panel,
#chat-panel,
#action-line,
#performance-diagnostics,
#new-adventurer-guide,
.center-interface,
#dialogue,
#ui-tutorial-card,
#quest-complete-panel,
#context-menu,
#item-tooltip,
.role-tooltip {
  zoom: var(--d-ui-scale);
}
@supports not (zoom: 1) {
  #side-panel,
  #chat-panel,
  .center-interface,
  #dialogue { font-size: calc(1em * var(--d-ui-scale)); }
}

#chat-messages,
#chat-input,
#chat-tabs button {
  font-size: calc(13px * var(--d-chat-scale));
}
#chat-input { min-height: 30px; }

/* Keyboard and safe-area handling. */
.mobile-keyboard-open #chat-panel {
  bottom: max(6px, env(safe-area-inset-bottom));
  max-height: calc(var(--d-visual-viewport-height) - 18px);
}
.mobile-keyboard-open #top-tabs,
.mobile-keyboard-open #new-adventurer-guide,
.mobile-keyboard-open #status-orbs { visibility: hidden; pointer-events: none; }
.mobile-keyboard-open #side-panel { max-height: calc(var(--d-visual-viewport-height) - 24px); }

/* Touch alternatives: long-press already dispatches the same contextmenu handlers as right-click. */
html[data-touch-ui="coarse"] button,
html[data-touch-ui="coarse"] input,
html[data-touch-ui="coarse"] select,
html[data-touch-ui="coarse"] textarea,
html[data-touch-ui="coarse"] .context-option,
html[data-touch-ui="coarse"] [role="button"] {
  min-height: var(--d-touch-target);
}
html[data-touch-ui="coarse"] #context-menu { min-width: min(280px, calc(100vw - 20px)); }
html[data-touch-ui="coarse"] [data-tooltip],
html[data-touch-ui="coarse"] [title] { -webkit-touch-callout: none; }

/* Consistent modal behavior and scroll containment. */
.center-interface,
[role="dialog"],
[role="alertdialog"] {
  max-width: calc(100vw - 24px);
  max-height: calc(var(--d-visual-viewport-height) - 24px);
  overscroll-behavior: contain;
}
.center-interface > :not(header),
[role="dialog"] > :not(header) { scrollbar-gutter: stable; }

/* Accessibility: reduced motion and flashing. */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
html[data-flashing="reduced"] .session-warning-message,
html[data-flashing="reduced"] [data-title-animation],
html[data-flashing="reduced"] .xp-drop,
html[data-flashing="reduced"] .damage-flash {
  animation: none !important;
  filter: none !important;
}

/* Color-vision modes alter UI indicators only; canvas combat colors are selected in game.js. */
html[data-color-vision="deuteranopia"] { --red: #d17b00; --green: #2f82c9; --d-danger: #d17b00; --d-success: #2f82c9; }
html[data-color-vision="protanopia"] { --red: #b36b00; --green: #277db5; --d-danger: #b36b00; --d-success: #277db5; }
html[data-color-vision="tritanopia"] { --red: #d84a75; --green: #2f9a62; --blue: #8e6ad8; --d-danger: #d84a75; --d-success: #2f9a62; }
html[data-color-vision="highContrast"] { --red: #ff3b30; --green: #00e676; --blue: #00b7ff; --gold: #ffe600; --d-focus: #fff600; }
html[data-color-vision="highContrast"] .game-frame,
html[data-color-vision="highContrast"] .center-interface { box-shadow: inset 0 0 0 2px #fff8b0, 0 8px 28px #000; }

/* Focus is always visible for keyboard navigation. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--d-focus) !important;
  outline-offset: 2px !important;
}

/* Tablet and phone layouts. */
@media (max-width: 1024px) {
  #side-panel { width: min(390px, calc(100vw - 20px)); }
  .center-interface { width: min(760px, calc(100vw - 20px)); }
}
@media (max-width: 760px) {
  :root { --d-space-4: 13px; --d-space-5: 18px; }
  #game-shell { height: var(--d-visual-viewport-height); }
  #side-panel {
    border-radius: var(--d-radius-lg) var(--d-radius-lg) 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,.62);
  }
  #panel-content { padding: var(--d-space-3); }
  .center-interface {
    left: 6px !important;
    right: 6px !important;
    width: auto !important;
    transform: none !important;
    top: max(6px, env(safe-area-inset-top)) !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    max-height: none;
    overflow: auto;
    border-radius: var(--d-radius-lg);
  }
  #dialogue {
    left: 6px;
    right: 6px;
    width: auto;
    transform: none;
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
  #item-tooltip { display: none !important; }
  .context-option { min-height: 48px; font-size: 14px; }
}
@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
  #minimap-panel { transform: scale(.52); transform-origin: top right; }
  #top-tabs {
    left: auto !important;
    right: max(4px, env(safe-area-inset-right)) !important;
    bottom: max(4px, env(safe-area-inset-bottom)) !important;
    width: min(58vw, 620px) !important;
    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr)) !important;
    min-height: 54px !important;
    padding-bottom: 3px !important;
  }
  #top-tabs .tab-button { height: 48px !important; }
  #chat-panel { height: 132px; width: min(58vw, 650px); }
  #chat-messages { height: 71px; }
  #side-panel { max-height: calc(var(--d-visual-viewport-height) - 68px); }
  #new-adventurer-guide:not(.collapsed) { max-height: calc(var(--d-visual-viewport-height) - 24px); }
}
@media (max-width: 390px) {
  #top-tabs .tab-button small { display: none; }
  #top-tabs .tab-button { min-height: 52px; }
  #chat-tabs button { font-size: calc(10px * var(--d-chat-scale)); }
}


/* 3.7.0-alpha.34.5 — mobile HUD containment and compact control repair */
:root {
  --d-mobile-dock-height: 56px;
  --d-mobile-chat-height: 136px;
  --d-mobile-ui-gap: 6px;
}

/* Compact HUD controls must not inherit the general 44px form-button minimum.
   Matching width and height also prevents circular minimap controls from becoming ovals. */
html[data-touch-ui="coarse"] .minimap-icon-button {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  aspect-ratio: 1 / 1;
}
html[data-touch-ui="coarse"] .minimap-border-bubble {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  aspect-ratio: 1 / 1;
}
html[data-touch-ui="coarse"] .minimap-zoom-controls button {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
}
html[data-touch-ui="coarse"] .login-streak-button {
  height: 30px !important;
  min-height: 30px !important;
}
html[data-touch-ui="coarse"] #server-broadcast-toggle {
  height: 23px !important;
  min-height: 23px !important;
}
html[data-touch-ui="coarse"] #chat-tabs button {
  min-height: 32px !important;
}
html[data-touch-ui="coarse"] #chat-collapse-toggle {
  min-height: 34px !important;
}
html[data-touch-ui="coarse"] #server-clock {
  min-height: 30px !important;
}
html[data-touch-ui="coarse"] #performance-diagnostics-close {
  min-width: 26px !important;
  min-height: 26px !important;
}

.status-orb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  aspect-ratio: 1 / 1;
}
.minimap-icon-button,
.minimap-border-bubble,
.status-orb {
  box-sizing: border-box;
  border-radius: 50%;
}
#logout-button {
  overflow: hidden;
  line-height: 0;
}
#logout-button svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

@media (orientation: portrait) and (max-width: 760px) {
  :root {
    --d-mobile-dock-height: clamp(50px, 7.2dvh, 56px);
    --d-mobile-chat-height: clamp(112px, 18dvh, 140px);
  }

  #top-tabs {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: calc(var(--d-mobile-dock-height) + env(safe-area-inset-bottom)) !important;
    min-height: calc(var(--d-mobile-dock-height) + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch;
    gap: 2px !important;
    padding: 3px 3px calc(3px + env(safe-area-inset-bottom)) !important;
    overflow: hidden;
    transform: none !important;
  }
  #top-tabs .tab-button {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    height: calc(var(--d-mobile-dock-height) - 6px) !important;
    min-height: calc(var(--d-mobile-dock-height) - 6px) !important;
    padding: 2px 0 !important;
    gap: 0;
    overflow: hidden;
  }
  #top-tabs .tab-button span {
    font-size: clamp(15px, 4.6vw, 19px) !important;
  }
  #top-tabs .tab-button small { display: none !important; }

  #chat-panel {
    left: max(6px, env(safe-area-inset-left)) !important;
    right: max(6px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--d-mobile-dock-height) + var(--d-mobile-ui-gap) + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    min-width: 0 !important;
    height: var(--d-mobile-chat-height) !important;
    max-height: var(--d-mobile-chat-height) !important;
  }
  #chat-messages {
    height: calc(var(--d-mobile-chat-height) - 64px) !important;
    min-height: 34px;
  }
  #chat-tabs { height: 32px !important; }
  #chat-tabs button {
    height: 32px !important;
    min-height: 32px !important;
    padding: 2px !important;
  }
  #chat-panel.chat-collapsed {
    left: max(6px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: calc(var(--d-mobile-dock-height) + var(--d-mobile-ui-gap) + env(safe-area-inset-bottom)) !important;
    height: 0 !important;
  }

  #side-panel {
    left: max(5px, env(safe-area-inset-left)) !important;
    right: max(5px, env(safe-area-inset-right)) !important;
    top: clamp(128px, 22dvh, 186px) !important;
    bottom: calc(var(--d-mobile-dock-height) + var(--d-mobile-chat-height) + (var(--d-mobile-ui-gap) * 2) + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: none !important;
  }
  #panel-content { max-height: none !important; }
  #game-shell:has(#chat-panel.chat-collapsed) #side-panel {
    bottom: calc(var(--d-mobile-dock-height) + var(--d-mobile-ui-gap) + env(safe-area-inset-bottom)) !important;
  }

  #dialogue {
    bottom: calc(var(--d-mobile-dock-height) + var(--d-mobile-chat-height) + (var(--d-mobile-ui-gap) * 2) + env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - var(--d-mobile-dock-height) - var(--d-mobile-chat-height) - 30px - env(safe-area-inset-bottom));
    overflow: auto;
  }
  #game-shell:has(#chat-panel.chat-collapsed) #dialogue {
    bottom: calc(var(--d-mobile-dock-height) + var(--d-mobile-ui-gap) + env(safe-area-inset-bottom)) !important;
  }

  #new-adventurer-guide:not(.collapsed) {
    max-height: calc(100dvh - var(--d-mobile-dock-height) - var(--d-mobile-chat-height) - 92px - (var(--d-mobile-ui-gap) * 2) - env(safe-area-inset-bottom)) !important;
  }
  #new-adventurer-guide:not(.collapsed) #quest-guide-body {
    max-height: calc(100dvh - var(--d-mobile-dock-height) - var(--d-mobile-chat-height) - 144px - (var(--d-mobile-ui-gap) * 2) - env(safe-area-inset-bottom)) !important;
  }
  html[data-touch-ui="coarse"] #new-adventurer-guide:not(.collapsed) #quest-guide-collapse {
    min-width: 28px !important;
    min-height: 28px !important;
  }

  #status-orbs {
    left: max(6px, env(safe-area-inset-left)) !important;
    top: max(6px, env(safe-area-inset-top)) !important;
    gap: 6px;
    transform: none !important;
  }
  .status-orb {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    border-width: 3px;
  }
  .status-orb .orb-glass { inset: 4px; }
  .status-orb strong { font-size: 13px; }
}

@media (orientation: portrait) and (max-width: 430px) {
  :root {
    --d-mobile-dock-height: 50px;
    --d-mobile-chat-height: clamp(108px, 17dvh, 126px);
  }
  #top-tabs .tab-button span { font-size: clamp(14px, 4.2vw, 17px) !important; }
  .status-orb {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
  }
}

@media (orientation: landscape) and (max-height: 700px) and (pointer: coarse) {
  :root {
    --d-landscape-dock-width: min(56vw, 620px);
    --d-landscape-dock-height: 54px;
  }
  #top-tabs {
    left: auto !important;
    right: max(4px, env(safe-area-inset-right)) !important;
    bottom: max(4px, env(safe-area-inset-bottom)) !important;
    width: var(--d-landscape-dock-width) !important;
    max-width: var(--d-landscape-dock-width) !important;
    height: var(--d-landscape-dock-height) !important;
    min-height: var(--d-landscape-dock-height) !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: 2px !important;
    padding: 3px !important;
    overflow: hidden;
    transform: none !important;
  }
  #top-tabs .tab-button {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 2px 0 !important;
    gap: 0;
    overflow: hidden;
  }
  #top-tabs .tab-button span { font-size: 16px !important; }
  #top-tabs .tab-button small { display: none !important; }

  #chat-panel {
    left: max(4px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: max(4px, env(safe-area-inset-bottom)) !important;
    width: calc(100vw - var(--d-landscape-dock-width) - max(4px, env(safe-area-inset-left)) - max(4px, env(safe-area-inset-right)) - 12px) !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 122px !important;
  }
  #chat-messages { height: 58px !important; }
  #chat-tabs { height: 32px !important; }
  #chat-tabs button {
    height: 32px !important;
    min-height: 32px !important;
  }

  #side-panel {
    left: auto !important;
    right: max(5px, env(safe-area-inset-right)) !important;
    top: 122px !important;
    bottom: calc(var(--d-landscape-dock-height) + 8px + env(safe-area-inset-bottom)) !important;
    width: min(42vw, 360px) !important;
    max-height: none !important;
  }
  #panel-content { max-height: none !important; }

  #status-orbs {
    left: max(6px, env(safe-area-inset-left)) !important;
    top: max(6px, env(safe-area-inset-top)) !important;
    gap: 5px;
    transform: none !important;
  }
  .status-orb {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    border-width: 3px;
  }
  .status-orb strong { font-size: 12px; }

  #new-adventurer-guide:not(.collapsed) {
    top: max(62px, env(safe-area-inset-top)) !important;
    max-height: calc(100dvh - 190px - env(safe-area-inset-bottom)) !important;
  }
}

/* 3.7.0-alpha.34.6 — mobile primary-panel stacking and close-control containment */
#close-panel {
  flex: 0 0 28px;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px;
  max-height: 28px;
  padding: 0 !important;
  box-sizing: border-box;
  place-items: center;
  align-self: center;
  overflow: hidden;
  font-size: 17px;
  line-height: 1;
}

@media (max-width: 760px), (orientation: landscape) and (max-height: 700px) and (pointer: coarse) {
  /* Inventory, equipment, skills, and the other main tabs own the foreground
     while open. Auxiliary HUD controls resume immediately after the panel closes. */
  #side-panel:not([hidden]) {
    z-index: 180 !important;
  }
  #game-shell.main-panel-open #new-adventurer-guide,
  #game-shell.main-panel-open #server-clock,
  #game-shell.main-panel-open #chat-collapse-toggle,
  #game-shell:has(#side-panel:not([hidden])) #new-adventurer-guide,
  #game-shell:has(#side-panel:not([hidden])) #server-clock,
  #game-shell:has(#side-panel:not([hidden])) #chat-collapse-toggle {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}