/* workspace/norrath2/style/base.css */
/* The 1999 screen: palette variables, the fixed grid over the canvas, the three panels, bars, slot boxes, con and chat colors. */
:root {
  --panel: #3a3a3c;
  --panel-light: #56565a;
  --panel-dark: #202022;
  --trough: #0a0a0a;
  --border: #000000;
  --text: #d8d8d0;
  --text-yellow: #f0e040;
  --text-dim: #9a9a90;
  --hp: #b02020;
  --mana: #2050c0;
  --stamina: #c0b020;
  --con-green: #12c012;
  --con-blue: #2860f0;
  --con-white: #f0f0f0;
  --con-yellow: #f0f000;
  --con-red: #f01818;
  --chat-say: #f0f0f0;
  --chat-shout: #f04040;
  --chat-ooc: #d0d0a0;
  --chat-auction: #d0a0d0;
  --chat-tell: #f0f0a0;
  --chat-group: #40e0e0;
  --chat-guild: #40e040;
  --chat-emote: #d0a060;
  --chat-npc: #a0c0ff;
  --chat-hit: #f0f0f0;
  --chat-hurt: #f04040;
  --chat-wearoff: #a0a0ff;
  --chat-skillup: #f0e040;
  --chat-system: #f0e040;
  --font: Tahoma, Verdana, 'Segoe UI', Arial, sans-serif;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--text);
  font-family: var(--font);
  font-size: 11px;
  line-height: 1.25;
  user-select: none;
}
button, input, select {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text);
}
#view { touch-action: none; -webkit-user-select: none; user-select: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.ui-grid, #ui {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 196px 1fr 214px;
  grid-template-rows: 1fr 176px;
  grid-template-areas: "left viewport right" "left chat right";
  pointer-events: none;
}
.ui-left, .ui-right, .ui-chat {
  pointer-events: auto;
  background: var(--panel);
  border: 2px solid;
  border-color: var(--panel-light) var(--panel-dark) var(--panel-dark) var(--panel-light);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  overflow: hidden;
}
.ui-left { grid-area: left; }
.ui-right { grid-area: right; }
.ui-chat { grid-area: chat; }
.ui-viewport {
  grid-area: viewport;
  position: relative;
  border: 2px solid var(--border);
  box-sizing: border-box;
  pointer-events: none;
}
.ui-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ui-overlay > * { pointer-events: auto; }
.ui-float {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ui-float > * { pointer-events: auto; }
.ui-grid[data-view="1"] { grid-template-columns: 0 1fr 48px; }
.ui-grid[data-view="1"] .ui-left { display: none; }
.ui-grid[data-view="1"] .ui-right > :not(.hud-gems) { display: none; }
.ui-grid[data-view="2"] { grid-template-columns: 0 1fr 0; }
.ui-grid[data-view="2"] .ui-left, .ui-grid[data-view="2"] .ui-right { display: none; }
.ui-grid[data-view="2"] .ui-viewport { border-color: transparent; }
.panel-box {
  background: var(--panel);
  border: 2px solid;
  border-color: var(--panel-light) var(--panel-dark) var(--panel-dark) var(--panel-light);
  padding: 3px;
  box-sizing: border-box;
}
.bar {
  position: relative;
  width: 180px;
  height: 12px;
  background: var(--trough);
  border: 2px solid;
  border-color: var(--panel-dark) var(--panel-light) var(--panel-light) var(--panel-dark);
  box-sizing: border-box;
  overflow: hidden;
}
.bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--hp);
}
.bar-hp .bar-fill { background: var(--hp); }
.bar-mana .bar-fill { background: var(--mana); }
.bar-stamina .bar-fill { background: var(--stamina); }
.bar-empty .bar-fill { background: #14183a; }
.bar-label {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 9px;
  line-height: 8px;
  color: #fff;
  opacity: 0;
}
.bar:hover .bar-label { opacity: 1; }
.slot {
  width: 40px;
  height: 40px;
  background: var(--trough);
  border: 2px solid;
  border-color: var(--panel-dark) var(--panel-light) var(--panel-light) var(--panel-dark);
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.slot canvas { width: 36px; height: 36px; display: block; }
.slot .slot-count {
  position: absolute;
  right: 1px;
  bottom: 0;
  font-size: 9px;
  color: #fff;
  text-shadow: 0 0 2px #000;
}
.slot.slot-drop { outline: 1px solid var(--text-yellow); }
.slot-grid { display: grid; grid-template-columns: repeat(2, 40px); gap: 2px; }
.btn, button.btn {
  background: var(--panel);
  border: 2px solid;
  border-color: var(--panel-light) var(--panel-dark) var(--panel-dark) var(--panel-light);
  color: var(--text);
  padding: 1px 4px;
  cursor: pointer;
  font-size: 10px;
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn:active, .btn.pressed {
  border-color: var(--panel-dark) var(--panel-light) var(--panel-light) var(--panel-dark);
  background: #2c2c2e;
}
.btn.lit { background: #8a1818; color: #fff; }
.btn:disabled { color: var(--text-dim); cursor: default; }
.hotbutton { width: 44px; height: 20px; padding: 0 2px; box-sizing: border-box; }
.hotbar { display: grid; grid-template-columns: repeat(2, 44px); gap: 2px; }
.gem {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: block;
  cursor: pointer;
}
.gem-stack { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.con-green { color: var(--con-green); }
.con-blue { color: var(--con-blue); }
.con-white { color: var(--con-white); }
.con-yellow { color: var(--con-yellow); }
.con-red { color: var(--con-red); }
.chat-lines {
  flex: 1;
  overflow-y: auto;
  font-size: 12px;
  background: var(--trough);
  border: 2px solid;
  border-color: var(--panel-dark) var(--panel-light) var(--panel-light) var(--panel-dark);
  padding: 2px 4px;
  user-select: text;
}
.chat-line { white-space: pre-wrap; word-break: break-word; }
.chat-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--trough);
  border: 2px solid;
  border-color: var(--panel-dark) var(--panel-light) var(--panel-light) var(--panel-dark);
  color: var(--text);
  font-size: 12px;
  padding: 1px 4px;
  outline: none;
}
.chat-say { color: var(--chat-say); }
.chat-shout { color: var(--chat-shout); }
.chat-ooc { color: var(--chat-ooc); }
.chat-auction { color: var(--chat-auction); }
.chat-tell { color: var(--chat-tell); }
.chat-group { color: var(--chat-group); }
.chat-guild { color: var(--chat-guild); }
.chat-emote { color: var(--chat-emote); }
.chat-npc { color: var(--chat-npc); }
.chat-system { color: var(--chat-system); }
.text-yellow { color: var(--text-yellow); }
.text-dim { color: var(--text-dim); }
.title-line { font-weight: bold; text-align: center; color: var(--text); }
.name-line { font-weight: bold; }
.coin-row { display: flex; gap: 6px; align-items: center; }
.coin-row input { width: 40px; }
.coin-row .coin-label { color: var(--text-yellow); }
.row { display: flex; gap: 4px; align-items: center; }
.center-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* The phone layout. ui/hud.js measures the window and writes data-layout and data-orientation on the grid; every rule below hangs off those. */
.phone-chat-close { display: none; }
.ui-grid[data-layout="phone"] {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --strip-height: 56px;
  --controls-height: 166px;
  --chat-height: 58px;
  --row-height: 52px;
  --touch-target: 44px;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "viewport";
}
.ui-grid[data-layout="phone"][data-orientation="landscape"] { --strip-height: 40px; --controls-height: 120px; --chat-height: 46px; --row-height: 48px; }
.ui-grid[data-layout="phone"] .ui-viewport { grid-area: viewport; border-color: transparent; }
.ui-grid[data-layout="phone"] .ui-left, .ui-grid[data-layout="phone"] .ui-right, .ui-grid[data-layout="phone"] .ui-chat {
  position: absolute;
  grid-area: viewport;
  border: none;
  gap: 6px;
}
.ui-grid[data-layout="phone"] .ui-left {
  top: 0;
  left: var(--safe-left);
  right: var(--safe-right);
  height: calc(var(--strip-height) + var(--safe-top));
  padding: calc(var(--safe-top) + 2px) 6px 2px;
  flex-direction: row;
  align-items: center;
  background: rgba(10, 10, 12, 0.72);
}
.ui-grid[data-layout="phone"] .ui-left > :not(.hud-player):not(.hud-target) { display: none; }
.ui-grid[data-layout="phone"] .hud-player, .ui-grid[data-layout="phone"] .hud-target {
  background: none;
  border: none;
  padding: 0;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
.ui-grid[data-layout="phone"] .ui-left .bar { width: 100%; height: 10px; }
.ui-grid[data-layout="phone"] .ui-left .bar-label { opacity: 1; }
.ui-grid[data-layout="phone"] .ui-left .bar-stamina { display: none; }
.ui-grid[data-layout="phone"] .ui-left .sitting-line, .ui-grid[data-layout="phone"] .ui-left .faction-line { display: none; }
.ui-grid[data-layout="phone"] .ui-right {
  left: var(--safe-left);
  right: var(--safe-right);
  bottom: calc(var(--safe-bottom) + var(--controls-height) + var(--chat-height));
  height: var(--row-height);
  flex-direction: row;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 6px;
  background: none;
  pointer-events: none;
}
.ui-grid[data-layout="phone"] .ui-right > * { flex: 0 0 auto; pointer-events: auto; }
.ui-grid[data-layout="phone"] .hud-actions { display: none; }
.ui-grid[data-layout="phone"] .hud-gems, .ui-grid[data-layout="phone"] .gem-stack { display: flex; flex-direction: row; gap: 6px; }
.ui-grid[data-layout="phone"] .gem { width: var(--touch-target); height: var(--touch-target); min-width: 44px; min-height: 44px; }
.ui-grid[data-layout="phone"] .hotbar { grid-template-columns: repeat(10, var(--touch-target)); grid-auto-rows: var(--touch-target); }
.ui-grid[data-layout="phone"] .hotbutton { width: var(--touch-target); height: var(--touch-target); min-width: 44px; min-height: 44px; }
.ui-grid[data-layout="phone"] .ui-chat {
  left: var(--safe-left);
  right: var(--safe-right);
  bottom: calc(var(--safe-bottom) + var(--controls-height));
  height: var(--chat-height);
  padding: 2px 6px;
  background: rgba(6, 6, 8, 0.82);
}
.ui-grid[data-layout="phone"] .ui-chat .chat-window { height: auto !important; flex: 1 1 auto; min-height: 0; }
.ui-grid[data-layout="phone"] .ui-chat .chat-lines { background: none; border: none; font-size: 13px; padding: 0; }
.ui-grid[data-layout="phone"] .ui-chat .chat-filter, .ui-grid[data-layout="phone"] .ui-chat .chat-input { display: none; }
.ui-grid[data-layout="phone"] .ui-chat[data-chat="open"] { top: 50%; bottom: calc(var(--safe-bottom) + var(--controls-height)); height: auto; }
.ui-grid[data-layout="phone"][data-chat="open"] .ui-right { display: none; }
.ui-grid[data-layout="phone"] .ui-chat[data-chat="open"] .chat-filter { display: block; min-width: 44px; min-height: 44px; }
.ui-grid[data-layout="phone"] .ui-chat[data-chat="open"] .chat-input { display: block; min-width: 44px; min-height: 44px; }
.ui-grid[data-layout="phone"] .ui-chat[data-chat="open"] .phone-chat-close { display: block; min-width: 44px; min-height: 44px; }
.ui-grid[data-layout="phone"] .compass, .ui-grid[data-layout="phone"] .buff-strip { top: calc(var(--strip-height) + var(--safe-top) + 4px); }
.ui-grid[data-layout="phone"] .casting-bar { bottom: calc(var(--safe-bottom) + var(--controls-height) + var(--chat-height) + var(--row-height) + 8px); }