// workspace/norrath2/style/classic-menus.css
/* Column menus, parchment chat, stone plates and the transparent view. The frame stays put; only the fill changes. */
.ui-grid, .btn, button.btn, .win { font-family: Georgia, "Times New Roman", serif; }
.ui-grid[data-view="1"] .ui-left,
.ui-grid[data-view="1"] .ui-right,
.ui-grid[data-view="1"] .ui-chat,
.ui-grid[data-view="1"] .panel-box,
.ui-grid[data-view="1"] .classic-emblem {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.ui-grid[data-view="1"] .btn { background: rgba(36, 40, 44, 0.28); }
.ui-grid[data-view="1"] .chat-lines, .ui-grid[data-view="1"] .chat-input {
  background: rgba(18, 22, 18, 0.28);
  color: #f2f2ea;
  border-color: transparent;
}
.ui-grid[data-view="1"] .classic-left-slots { background: rgba(20, 20, 20, 0.25); }
.ui-grid[data-view="1"] .ui-viewport { border-color: rgba(180, 180, 170, 0.35); }
.classic-target-label { order: 4; flex: 0 0 auto; text-align: center; color: #e1d693; font-size: 10px; letter-spacing: .08em; font-weight: bold; }
.classic-status, .lag-meter {
  position: absolute;
  left: auto;
  right: 6px;
  bottom: 3px;
  width: auto;
  text-align: right;
  font: bold 11px Tahoma, Verdana, sans-serif;
  text-shadow: 0 1px 0 #000;
  pointer-events: none;
}
.lag-good { color: #39ff39; }
.lag-fair { color: #f0e040; }
.lag-bad { color: #ff2020; }
.xp-bar { left: 0; right: 0; bottom: 16px; width: auto; height: 6px; background: #143014; border: none; }
.xp-bar .bar-fill { background: #39d239; }
.player-window.in-combat { outline: 2px solid #e02020; }
.player-window .surname-line { color: #f1e3ad; font-size: 11px; }
.target-window .target-title, .target-window .bar, .target-window .faction-line { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.target-window { padding: 0; min-height: 0; }
.target-window .name-line { margin: 0; }
.group-row .bar-mana { height: 6px; margin-top: 1px; }
.casting-bar { top: 8px; bottom: auto; width: 180px; }
.casting-bar .bar { width: 180px; height: 10px; }
.casting-bar .bar-fill { background: #e060c0; }
.cast-name { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.cast-caption { color: #e7d998; font-weight: bold; letter-spacing: .14em; font-size: 11px; }
.gem.gem-ready { background: #e2c84a; }
.gem.gem-empty { background: #2c3038; }
.hotbar[data-page="0"] .hotbutton:nth-child(n+9), .hotbar[data-page="1"] .hotbutton:nth-child(-n+8) { display: none; }
.ui-chat { position: relative; }
.chat-lines { border-radius: 0 0 8px 8px; box-shadow: inset 0 10px 0 #c4b48a, inset 0 -6px 0 #b7a67a; }
.chat-detail {
  position: absolute;
  left: 18px;
  right: 22px;
  top: 16px;
  bottom: 28px;
  overflow: auto;
  color: #2a241a;
  font: 12px/1.25 Georgia, "Times New Roman", serif;
  white-space: pre-wrap;
  pointer-events: none;
}
.chat-window { position: relative; flex: 1; }
.ui-grid:has(.hud-skills:not([hidden])) .classic-emblem,
.ui-grid:has(.hud-skills:not([hidden])) .classic-left-menu,
.ui-grid:has(.hud-skills:not([hidden])) .classic-left-controls,
.ui-grid:has(.hud-skills:not([hidden])) .hud-hotbar,
.ui-grid:has(.hud-options:not([hidden])) .classic-emblem,
.ui-grid:has(.hud-options:not([hidden])) .classic-left-menu,
.ui-grid:has(.hud-options:not([hidden])) .classic-left-controls,
.ui-grid:has(.hud-options:not([hidden])) .hud-hotbar,
.ui-grid:has(.hud-loot:not([hidden])) .classic-emblem,
.ui-grid:has(.hud-loot:not([hidden])) .classic-left-menu,
.ui-grid:has(.hud-loot:not([hidden])) .classic-left-controls,
.ui-grid:has(.hud-loot:not([hidden])) .hud-hotbar { visibility: hidden; }
.hud-skills:not([hidden]), .hud-options:not([hidden]), .hud-loot:not([hidden]) {
  left: 0 !important; top: 0 !important; width: 196px !important; height: 100% !important; z-index: 30;
}
.hud-skills .win-title, .hud-options .win-title, .hud-loot .win-title, .hud-spellbook .win-title, .hud-inventory .win-title { display: none; }
.hud-skills .win-body, .hud-options .win-body, .hud-loot .win-body { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.skill-list { display: flex; flex-direction: column; gap: 3px; overflow: auto; }
.skill-plate { display: flex; flex-direction: column; background: #3e3c38; border: 2px solid; border-color: #1c1b18 #b0aa9a #b0aa9a #1c1b18; padding: 2px 4px; min-height: 36px; }
.skill-name { font-weight: bold; letter-spacing: .06em; text-transform: uppercase; color: #efe6c4; }
.skill-rank { letter-spacing: .08em; color: #c8bfa2; font-size: 10px; border-top: 1px solid #2a2824; }
.skill-value, .persona-weight-exact { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.persona { display: flex; flex-direction: column; gap: 4px; overflow: auto; color: #efe6c4; }
.persona-block { background: #3a3834; border: 2px solid; border-color: #1c1b18 #aea898 #aea898 #1c1b18; padding: 3px 4px; }
.persona-block .title-line { letter-spacing: .1em; }
.stat-row, .id-row { display: flex; justify-content: space-between; gap: 6px; }
.stat-up { color: #3dcc3d; }
.persona-name { font-weight: bold; text-align: center; }
.opt-shell { display: flex; flex-direction: column; height: 100%; gap: 4px; }
.opt-head, .opt-foot { flex: 0 0 auto; }
.opt-head { text-align: center; font-weight: bold; letter-spacing: .12em; color: #efe6c4; }
.opt-body { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.opt-foot { display: flex; gap: 4px; }
.opt-menu-btn, .opt-value, .opt-foot .btn { width: 100%; text-transform: uppercase; letter-spacing: .06em; font-weight: bold; }
.opt-name { text-align: center; letter-spacing: .06em; color: #efe6c4; font-size: 11px; font-weight: bold; }
.opt-value.off { background: #2a1010; color: #e03030; }
.opt-native { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.opt-slider { display: flex; align-items: center; gap: 3px; }
.opt-slider input[type="range"] { flex: 1; }
.opt-cycle { text-align: center; color: #d8d0b0; font-size: 11px; }
.key-line { display: flex; justify-content: space-between; gap: 4px; color: #efe6c4; font-size: 10px; }
.hud-spellbook:not([hidden]) {
  left: 196px !important;
  top: 0 !important;
  width: calc(100% - 410px) !important;
  height: calc(100% - 176px) !important;
  background: transparent;
  border: none;
  box-shadow: none;
  z-index: 25;
}
.book { display: flex; gap: 8px; background: #6a241c; border: 4px solid #c6a24a; padding: 10px; min-height: 180px; }
.book-page { flex: 1; background: #f3e6c4; color: #2a241a; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; position: relative; }
.book-spell { display: flex; flex-direction: column; align-items: center; text-align: center; color: #2a241a; }
.book-spell canvas { width: 36px; height: 36px; background: #f7f1dc; }
.book-num { position: absolute; bottom: 2px; font-size: 11px; color: #3a3020; }
.book-page:first-child .book-num { right: 6px; }
.book-page:last-child .book-num { left: 6px; }
.book-nav { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.book-page-label, .book-scribe { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.book-prev, .book-next, .book-meditate { min-width: 36px; min-height: 22px; font-weight: bold; letter-spacing: .08em; }
.hud-inventory:not([hidden]) {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: none;
  z-index: 24;
}
.hud-inventory .win-body { overflow: visible; height: 100%; pointer-events: none; }
.hud-inventory .paper-doll, .hud-inventory .inv-side, .hud-inventory .inv-bottom { pointer-events: auto; }
.hud-inventory .paper-doll { position: absolute; left: 208px; top: 8px; display: flex; flex-direction: column; gap: 4px; }
.hud-inventory:not(.inv-with-doll) .paper-doll, .hud-inventory:not(.inv-with-doll) .inv-bottom { display: none; }
.doll-row { display: flex; gap: 2px; padding: 2px; background: #5c5a54; border: 2px solid; border-color: #c2bba8 #262420 #262420 #c2bba8; }
.doll-row:nth-child(1) { margin-left: 36px; }
.doll-row:nth-child(4) { margin-left: 54px; }
.equip-slot, .general-slot, .loot-slot, .contents-window .slot-grid > * { width: 48px; height: 44px; }
.slot-label {
  position: absolute;
  inset: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 8px;
  line-height: 9px;
  letter-spacing: .04em;
  color: #d9d0b4;
  pointer-events: none;
}
.hud-inventory .inv-side {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 214px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
  box-sizing: border-box;
  background: linear-gradient(135deg, #77756c, #45443f);
}
.inv-portrait { flex: 1 1 40px; min-height: 48px; background: #000; border: 2px solid #111; }
.inv-general { width: 100%; grid-template-columns: 1fr 1fr; }
.inv-buttons .btn:first-child, .inv-weight, .inv-stats { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.inv-done, .loot-scroll { text-transform: uppercase; font-weight: bold; letter-spacing: .08em; }
.inv-coins { display: flex; gap: 3px; }
.inv-purse .coin { display: flex; flex-direction: column; min-width: 52px; }
.inv-purse .coin-value { background: #2a3148; color: #fff; padding: 2px 4px; }
.inv-purse .coin-gold .coin-value { background: #6a5420; }
.inv-purse .coin-silver .coin-value { background: #3e5348; }
.inv-purse .coin-copper .coin-value { background: #7a4a22; }
.inv-purse .coin-label { font-size: 8px; letter-spacing: .06em; text-align: center; }
.hud-inventory .inv-bottom { position: absolute; left: 208px; bottom: 184px; }
.ui-grid:has(.hud-inventory:not([hidden])) .ui-right > :not(.hud-gems) { visibility: hidden; }
.contents-window:not([hidden]) { left: 42% !important; top: 6% !important; width: 132px !important; z-index: 40; }
.contents-grid { grid-template-columns: 44px; }
.contents-head, .contents-combine, .contents-done { text-align: center; font-weight: bold; letter-spacing: .08em; }
.loot-grid { grid-template-columns: repeat(2, 48px); max-height: calc(100% - 70px); overflow: auto; }
.loot-coins { display: none; }
.hud-keybinds:not([hidden]), .hud-help:not([hidden]), .hud-map:not([hidden]) { z-index: 40; }
@media (max-width: 767px) {
.hud-skills:not([hidden]), .hud-options:not([hidden]), .hud-loot:not([hidden]) { width: clamp(102px, 25vw, 196px) !important; }
.hud-inventory .inv-side { width: clamp(124px, 28vw, 214px); }
.hud-inventory .paper-doll { left: clamp(106px, 26vw, 208px); }
.hud-spellbook:not([hidden]) {
  left: clamp(102px, 25vw, 196px) !important;
  width: calc(100% - clamp(102px, 25vw, 196px) - clamp(124px, 28vw, 214px)) !important;
  height: calc(100% - clamp(112px, 24dvh, 176px)) !important;
}
.hud-inventory .inv-bottom { left: clamp(106px, 26vw, 208px); bottom: calc(clamp(112px, 24dvh, 176px) + 8px); }
}
/* The classic client uses mottled blue-grey stone, raised parchment plates and engraved serif labels. */
.ui-left, .ui-right, .ui-chat, .win {
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0 2px, transparent 2px 9px),
    linear-gradient(45deg, rgba(12,15,21,.16) 0 1px, transparent 1px 7px),
    linear-gradient(135deg, #7f8793 0%, #58606d 48%, #858c97 100%);
  border-color: #c3c6c1 #282b32 #282b32 #c3c6c1;
  color: #e8e2d1;
}
.ui-left, .ui-right { box-shadow: inset 0 0 0 1px rgba(20,22,28,.7); }
.ui-viewport { border-color: #abb0ad; outline-color: #17191d; }
.btn, button.btn, .opt-value, .opt-cycle, .classic-menu-button, .classic-spells, .classic-view {
  background: linear-gradient(#f0ead5 0%, #d1c6a9 48%, #b5a98c 100%);
  border-color: #fff9df #4a4138 #4a4138 #fff9df;
  color: #30271d;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.btn:active, .btn.pressed, button.btn:active, .opt-value:active, .opt-cycle:active {
  background: linear-gradient(#c1b394 0%, #aa9b7d 100%);
  border-color: #4a4138 #fff9df #fff9df #4a4138;
  color: #30271d;
}
.btn.lit, .btn.lit:active { background: linear-gradient(#6d2524, #3d1012); color: #f2c0a5; border-color: #d8c9b0 #291012 #291012 #d8c9b0; }
.btn:disabled { background: #9f9889; color: #615b50; border-color: #c6c0af #504b43 #504b43 #c6c0af; }
.opt-name, .opt-head, .opt-menu-btn, .opt-foot .btn { font-family: Georgia, "Times New Roman", serif; }
.opt-value { min-height: 22px; }
.opt-value.off { background: linear-gradient(#3c1517, #210b0d); color: #f02f2f; border-color: #d1c5b0 #16090a #16090a #d1c5b0; text-shadow: 0 1px 0 #120000; }
.opt-value:not(.off) { background: linear-gradient(#f0ead5, #d1c6a9); color: #30271d; }
.opt-slider input[type="range"] { appearance: none; -webkit-appearance: none; height: 12px; background: transparent; }
.opt-slider input[type="range"]::-webkit-slider-runnable-track { height: 7px; background: #302b27; border: 1px solid #c7bda6; }
.opt-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 2px solid #eee5c9;
  background: #8b2820;
}
.opt-slider input[type="range"]::-moz-range-track { height: 7px; background: #302b27; border: 1px solid #c7bda6; }
.opt-slider input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #eee5c9; border-radius: 0; background: #8b2820; }
.classic-left-slots { background: linear-gradient(135deg, #59616e, #343a45); border-color: #292d35 #aeb3b3 #aeb3b3 #292d35; }
.classic-slot { background: #292d35; border-color: #aeb3b3; box-shadow: inset 0 0 0 2px #171a20; }
.ui-chat {
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0 2px, transparent 2px 9px),
    linear-gradient(45deg, rgba(12,15,21,.16) 0 1px, transparent 1px 7px),
    linear-gradient(135deg, #7f8793, #58606d 48%, #858c97);
}
.chat-lines, .chat-input { background: linear-gradient(180deg, #eee0bb 0%, #dfcda2 100%); color: #2e251b; border-color: #4a4138 #fff4d3 #fff4d3 #4a4138; }
.chat-lines { box-shadow: inset 0 8px 0 rgba(153,125,75,.18), inset 0 -7px 0 rgba(114,87,48,.16); }
.chat-input { font-family: Georgia, "Times New Roman", serif; }
.chat-say, .chat-hit { color: #2e251b; }
.chat-shout, .chat-hurt { color: #a52a1f; }
.chat-system, .chat-skillup { color: #8b551b; }
.target-window .name-line { background: #5e1718; color: #f3c8a3; }
.skill-plate, .persona-block {
  background: linear-gradient(135deg, rgba(255,255,255,.1), transparent 42%),
    linear-gradient(135deg, #747c88, #505865);
  border-color: #c1c5c2 #292d34 #292d34 #c1c5c2;
}
.skill-name, .skill-rank, .persona, .persona-block { color: #eee7d1; }
.opt-shell { color: #eee7d1; }
:root {
  --stone-face: #6f7783;
  --stone-top: #c7c9c5;
  --stone-bottom: #292d34;
  --plate-top: #fff9e7;
  --plate-face: #d6c9a9;
  --plate-bottom: #655b49;
}
.btn, button.btn, .opt-value, .opt-cycle, .classic-menu-button, .classic-spells, .classic-view {
  background: linear-gradient(135deg, var(--plate-top) 0%, #eee5cc 35%, var(--plate-face) 100%);
  border: 2px solid;
  border-color: var(--plate-top) var(--plate-bottom) var(--plate-bottom) var(--plate-top);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.55), inset -1px -1px 0 rgba(60,50,40,.22), 2px 2px 0 rgba(24,25,25,.5);
}
.btn:active, .btn.pressed, button.btn:active, .opt-value:active, .opt-cycle:active {
  background: linear-gradient(135deg, #c8b996 0%, #aa9b7d 100%);
  border-color: var(--plate-bottom) var(--plate-top) var(--plate-top) var(--plate-bottom);
  box-shadow: inset 1px 1px 0 rgba(55,45,35,.25), inset -1px -1px 0 rgba(255,255,255,.5), 0 0 0 rgba(0,0,0,0);
}
.ui-left, .ui-right, .ui-chat, .win {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.1) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(45deg, rgba(14,18,24,.12) 0 1px, transparent 1px 8px),
    linear-gradient(135deg, var(--stone-face), #505864 48%, #7d858f);
  border-color: var(--stone-top) var(--stone-bottom) var(--stone-bottom) var(--stone-top);
  box-shadow: inset 0 0 0 1px rgba(20,22,28,.7), 2px 2px 0 rgba(15,18,22,.55);
}
.server-buttons .btn {
  background: linear-gradient(135deg, var(--plate-top) 0%, #eee5cc 35%, var(--plate-face) 100%);
  border-color: var(--plate-top) var(--plate-bottom) var(--plate-bottom) var(--plate-top);
  color: #30271d;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.55), inset -1px -1px 0 rgba(60,50,40,.22), 2px 2px 0 rgba(24,25,25,.5);
}
.server-buttons .btn:active, .server-buttons .btn.pressed {
  background: linear-gradient(135deg, #c8b996, #aa9b7d);
  border-color: var(--plate-bottom) var(--plate-top) var(--plate-top) var(--plate-bottom);
}
.server-play, .server-play:active {
  background: linear-gradient(135deg, #fffdf3 0%, #f0e7cf 45%, #c7c0ae 100%) !important;
  border-color: #fffdf3 #6d6658 #6d6658 #fffdf3 !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.7), inset -1px -1px 0 rgba(100,90,70,.22), 2px 2px 0 rgba(24,25,25,.5);
}