/* StuckMUD desktop shell -----------------------------------------------------
 *
 * This client deliberately starts at a monitor, not a phone. The native world
 * renderer remains the same proven renderer as the handheld client, while the
 * shell gives it persistent navigation, intelligence and command surfaces.
 */
:root {
  --desktop-bg: #071018;
  --desktop-panel: #0d1722;
  --desktop-panel-2: #101e2b;
  --desktop-edge: #263a49;
  --desktop-edge-hot: #62d7d0;
  --desktop-text: #dbe7e7;
  --desktop-muted: #80939d;
  --desktop-gold: #e8c878;
  --desktop-red: #ee6676;
  --desktop-blue: #5cc9e8;
  --desktop-green: #69d391;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html, body { width: 100%; height: 100%; min-width: 980px; }
body {
  display: block;
  color: var(--desktop-text);
  background:
    radial-gradient(circle at 58% -20%, #1b3f48 0, transparent 43%),
    linear-gradient(135deg, #050b11, #0a151e 48%, #071018);
  user-select: none;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: linear-gradient(#ffffff05 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.desktop-client.handheld {
  --control-unit: 58px;
  display: grid;
  grid-template-columns: 248px minmax(600px, 1fr) 338px;
  grid-template-rows: 62px minmax(500px, 1fr) 126px;
  gap: 12px;
  width: 100vw;
  height: 100vh;
  max-width: none;
  padding: 12px;
  overflow: hidden;
  color: var(--desktop-text);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.desktop-header {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 250px;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  background: linear-gradient(180deg, #132330f2, #0b151ef5);
  border: 1px solid var(--desktop-edge);
  border-radius: 10px;
  box-shadow: inset 0 1px #ffffff0d, 0 12px 35px #0005;
}
.desktop-brand { display: flex; align-items: center; gap: 10px; color: var(--desktop-text); text-decoration: none; letter-spacing: .12em; }
.desktop-brand > i { display: grid; place-items: center; width: 35px; height: 35px; color: #071018; background: linear-gradient(145deg, #8de8d5, #54b8d5); border-radius: 9px; box-shadow: 0 0 18px #61d9d744; font-style: normal; font-size: 20px; }
.desktop-brand span { font-size: 18px; font-weight: 300; }
.desktop-brand b { color: #f5d787; font-weight: 900; }
.desktop-location { min-width: 0; text-align: center; }
.desktop-location small, .desktop-location strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desktop-location small { color: var(--desktop-gold); font: 700 10px/1.4 ui-monospace, monospace; letter-spacing: .16em; }
.desktop-location strong { margin-top: 2px; font-size: 17px; letter-spacing: .04em; }
.desktop-connection { display: grid; grid-template-columns: 10px 1fr; align-items: center; column-gap: 8px; justify-self: end; min-width: 170px; }
.desktop-connection > i { grid-row: 1 / 3; width: 9px; height: 9px; border-radius: 50%; background: #67424a; box-shadow: 0 0 0 3px #0005; }
.desktop-connection > i.online { background: #70df9a; box-shadow: 0 0 11px #70df9a; }
.desktop-connection span { color: #d9e6e8; font: 800 11px/1 ui-monospace, monospace; letter-spacing: .12em; }
.desktop-connection small { color: var(--desktop-muted); font: 600 8px/1.4 ui-monospace, monospace; letter-spacing: .14em; }

.desktop-rail {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  overflow: auto;
  background: linear-gradient(180deg, #101c27f2, #0a131cfa);
  border: 1px solid var(--desktop-edge);
  border-radius: 10px;
  box-shadow: inset 0 1px #ffffff0b, 0 16px 36px #0004;
}
.desktop-hero-card { padding: 14px; background: linear-gradient(145deg, #192c38, #101c26); border: 1px solid #355060; border-radius: 8px; box-shadow: inset 0 1px #ffffff0c; }
.desktop-hero-card > small { display: block; color: var(--desktop-gold); font: 700 9px ui-monospace, monospace; letter-spacing: .16em; }
.desktop-hero-card > strong { display: block; margin-top: 5px; overflow: hidden; color: #f4f7f5; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.desktop-hero-card > span { display: block; margin: 2px 0 14px; color: var(--desktop-muted); font: 700 10px ui-monospace, monospace; letter-spacing: .05em; }
.desktop-resource { margin-top: 9px; }
.desktop-resource label { display: flex; justify-content: space-between; color: #aebfc5; font: 700 9px ui-monospace, monospace; letter-spacing: .08em; }
.desktop-resource label em { color: #dbe7e7; font-style: normal; letter-spacing: 0; }
.desktop-resource > i { display: block; height: 7px; margin-top: 4px; overflow: hidden; background: #04090d; border: 1px solid #263845; border-radius: 4px; }
.desktop-resource > i > span { display: block; width: 0; height: 100%; transition: width .25s ease-out; }
.desktop-resource.hp > i > span { background: linear-gradient(90deg, #b93f53, var(--desktop-red)); }
.desktop-resource.mp > i > span { background: linear-gradient(90deg, #347fa6, var(--desktop-blue)); }
.desktop-resource.sp > i > span { background: linear-gradient(90deg, #30875b, var(--desktop-green)); }

.desktop-nav { display: grid; gap: 5px; }
.desktop-nav button { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; min-height: 48px; padding: 7px 9px; color: #c9d7d9; background: #101e29; border: 1px solid #243a48; border-radius: 7px; text-align: left; transition: .15s ease; }
.desktop-nav button:hover, .desktop-nav button:focus-visible { color: #fff; background: #19313e; border-color: #54bfc2; outline: none; transform: translateX(2px); }
.desktop-nav button > i { color: #78d9d2; font-style: normal; font-size: 18px; text-align: center; }
.desktop-nav button > span { min-width: 0; font-size: 12px; font-weight: 750; }
.desktop-nav button small { display: block; margin-top: 2px; overflow: hidden; color: #718892; font: 500 9px ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
kbd { min-width: 20px; padding: 2px 5px; color: #9db0b7; background: #071018; border: 1px solid #30434f; border-bottom-color: #4b616d; border-radius: 4px; font: 700 9px ui-monospace, monospace; text-align: center; }
.desktop-key-help { margin-top: auto; display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; padding: 10px; color: var(--desktop-muted); border-top: 1px solid #243541; font: 600 9px ui-monospace, monospace; }
.desktop-key-help b { color: #d1dcde; font-size: 8px; letter-spacing: .12em; }
.desktop-key-help span { display: flex; align-items: center; gap: 3px; }

.desktop-client > .bezel {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #03080d;
  border: 1px solid #39505d;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #ffffff0a, 0 18px 45px #0007;
}
.desktop-client .screen { height: 100%; border: 0; box-shadow: none; }
.desktop-client .screen-label { display: none; }
.desktop-client .hud { height: 68px; padding: 11px 16px; background: linear-gradient(180deg, #08121df8, #101e2bf2); border-bottom: 1px solid #3f6971; }
.desktop-client .hud b { max-width: 300px; font: 800 16px/1.2 ui-sans-serif, system-ui; letter-spacing: .04em; }
.desktop-client .hud small { color: #91a8b0; font: 700 10px ui-monospace, monospace; }
.desktop-client .status-effects { max-width: min(360px, 34vw); }
.desktop-client .meters { width: 230px; }
.desktop-client .meters label { grid-template-columns: 24px 1fr 68px; gap: 7px; min-height: 14px; font: 700 10px ui-monospace, monospace; }
.desktop-client .meters i { height: 8px; border-color: #5c7580; border-radius: 4px; overflow: hidden; }
.desktop-client .world { inset: 68px 0 0; }
.desktop-client .world::after { background: linear-gradient(transparent 54%, #08181388); }
.desktop-client .room-card { top: 12px; left: 15px; right: auto; width: min(460px, calc(100% - 30px)); padding: 7px 12px; border-color: #7abcc7aa; background: #07121de8; }
.desktop-client .room-card small { font-size: 9px; }
.desktop-client .room-card b { margin-top: 2px; font: 800 15px/1.2 ui-sans-serif, system-ui; letter-spacing: .02em; }
.desktop-client .tutorial-objective { top: 65px; left: 15px; right: auto; width: min(460px, calc(100% - 30px)); padding: 7px 11px; }
.desktop-client .tutorial-objective small { font-size: 8px; }
.desktop-client .tutorial-objective b { font-size: 11px; }
.desktop-client .tutorial-objective span { font-size: 9px; }
.desktop-client .world-feed { display: none !important; }
.desktop-client .message { left: 50%; right: auto; bottom: 82px; width: min(680px, calc(100% - 80px)); padding: 9px 14px; transform: translateX(-50%); border: 1px solid #608695; border-radius: 7px; background: #07121ee8; font: 700 11px ui-monospace, monospace; letter-spacing: .03em; }
.desktop-client .exit-lights .east { right: 22px; }
.desktop-client .exit-lights .west { left: 22px; }
.desktop-client .exit-lights .up { right: 22px; }
.desktop-client .exit-lights .down { right: 22px; }
.desktop-client .exit-lights .south { bottom: 88px; }
.desktop-client .player-sprite { transform: translate(-50%, -82%) scale(1.55); }
.desktop-client .remote-player { scale: 1.18; }
.desktop-client .enemy { scale: 1.15; }

.desktop-client .game-shortcuts { inset: auto 0 0; }
.desktop-client .bottom-bar { left: 50%; right: auto; bottom: 10px; width: min(760px, calc(100% - 40px)); transform: translateX(-50%); padding: 6px; background: #07121ef2; border: 1px solid #385563; border-radius: 9px; box-shadow: 0 8px 30px #0007; }
.desktop-client .utility-actions { display: none; }
.desktop-client .slot-rail { width: 100%; justify-content: center; gap: 5px; }
.desktop-client .quick-slot { width: 54px; height: 49px; border-radius: 6px; }
.desktop-client .stand-button, .desktop-client .dismount-button, .desktop-client .panic-flee,
.desktop-client .event-button, .desktop-client .potion-button, .desktop-client .edit-button { transform: scale(1.08); }

.desktop-intel {
  grid-column: 3;
  grid-row: 2 / 4;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(120px, 1fr) minmax(120px, 1fr);
  gap: 10px;
  overflow: hidden;
}
.desktop-panel { min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, #101d28f5, #0a141dfa); border: 1px solid var(--desktop-edge); border-radius: 9px; box-shadow: inset 0 1px #ffffff0a, 0 12px 28px #0003; }
.desktop-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: #132431; border-bottom: 1px solid #28414f; }
.desktop-panel > header small, .desktop-panel > header b { display: block; }
.desktop-panel > header small { color: var(--desktop-muted); font: 700 8px ui-monospace, monospace; letter-spacing: .14em; }
.desktop-panel > header b { margin-top: 2px; color: #e6efef; font-size: 11px; letter-spacing: .06em; }
.desktop-panel > header button { padding: 5px 8px; color: #8ee2da; background: #0a151d; border: 1px solid #31525b; border-radius: 5px; font: 800 8px ui-monospace, monospace; letter-spacing: .08em; }
.desktop-panel > header button:hover { color: #071018; background: #86ded5; }
.desktop-quest-panel > p { margin: 0; padding: 11px 12px 6px; color: #aebfc5; font-size: 11px; line-height: 1.45; }
.desktop-quest-progress { display: flex; align-items: center; gap: 9px; padding: 4px 12px 12px; }
.desktop-quest-progress > i { flex: 1; height: 6px; overflow: hidden; background: #04090d; border-radius: 4px; }
.desktop-quest-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #bf994d, #f0dc8e); }
.desktop-quest-progress em { color: var(--desktop-gold); font: 700 9px ui-monospace, monospace; font-style: normal; }
.desktop-list { min-height: 0; flex: 1; padding: 8px 11px; overflow: auto; scrollbar-color: #35515f #09131b; scrollbar-width: thin; }
.desktop-list p { margin: 0; padding: 7px 3px; color: #8fa2aa; border-bottom: 1px solid #ffffff0a; font: 500 10px/1.45 ui-monospace, monospace; }
.desktop-list p:last-child { border-bottom: 0; }
.desktop-list p strong { color: #dce9e8; }
.desktop-world-panel .desktop-list p { color: #d9bf7e; }
.desktop-chat-panel .desktop-list p { color: #99cfe0; }

.desktop-client > .controls {
  grid-column: 1;
  grid-row: 3;
  display: grid;
  grid-template-columns: 116px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 10px 12px;
  background: linear-gradient(180deg, #101d28f2, #09131cfa);
  border: 1px solid var(--desktop-edge);
  border-radius: 10px;
  box-shadow: none;
}
.desktop-client .dpad { scale: .72; transform-origin: center; }
.desktop-client .action-buttons { display: grid; grid-template-columns: repeat(2, 42px); grid-template-rows: repeat(2, 42px); gap: 6px; transform: none; }
.desktop-client .action-buttons label { position: static; width: 42px; height: 42px; }
.desktop-client .action-buttons label button { width: 34px; height: 34px; font-size: 12px; }
.desktop-client .action-buttons label span { display: none; }
.desktop-client > .system-buttons { display: none; }

.desktop-console {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 42px;
  overflow: hidden;
  background: #071018eF;
  border: 1px solid var(--desktop-edge);
  border-radius: 10px;
  box-shadow: inset 0 1px #ffffff08;
}
.desktop-console-log { min-height: 0; padding: 9px 13px; overflow: auto; color: #8ea1a9; font: 500 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; user-select: text; }
.desktop-console-log span { display: block; }
#desktop-gossip-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 7px 6px 13px; background: #101d28; border-top: 1px solid #263d49; }
#desktop-gossip-form label { color: #68d6d0; font: 800 9px ui-monospace, monospace; letter-spacing: .12em; }
#desktop-gossip-input { width: 100%; height: 29px; padding: 0 10px; color: #e8eeee; background: #060d13; border: 1px solid #2e4855; border-radius: 5px; outline: none; font: 500 12px ui-monospace, monospace; user-select: text; }
#desktop-gossip-input:focus { border-color: #5fc9c5; box-shadow: 0 0 0 2px #5fc9c522; }
#desktop-gossip-form button { height: 29px; padding: 0 11px; color: #071018; background: linear-gradient(#8be0d7, #58babd); border: 0; border-radius: 5px; font: 800 9px ui-monospace, monospace; }
#desktop-gossip-form button kbd { margin-left: 5px; color: #28434a; background: #ffffff55; border-color: #ffffff66; }
.desktop-chat-dock .desktop-console-log { color: #9bd2df; }

.desktop-client .quick-menu { left: 50%; right: auto; top: 50%; bottom: auto; width: min(620px, calc(100% - 70px)); max-height: calc(100% - 80px); transform: translate(-50%, -50%); border: 1px solid #4c717d; border-radius: 10px; box-shadow: 0 28px 90px #000b; }
.desktop-client .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: min(620px, 66vh); overflow: auto; }
.desktop-client .menu-grid button { min-height: 56px; }
/* This edition is a graphical RPG client. The native server still speaks text
   internally, but no general command terminal is exposed to the player. */
.desktop-client .terminal, .desktop-client .auth-fallback { display: none !important; }
.desktop-client .auth-screen { padding: 34px max(40px, 18%); background: radial-gradient(circle at 50% 25%, #17323eee, #071019f7 72%); }
.desktop-client .auth-screen h2 { font-size: 25px; }
.desktop-client .auth-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(620px, 100%); }
.desktop-client .auth-choices button { min-height: 64px; }
.desktop-client .quest-scroll article, .desktop-client .mob-inspect article,
.desktop-client .score-sheet article, .desktop-client .world-atlas article { width: min(760px, calc(100% - 80px)); max-height: calc(100% - 70px); }

@media (max-width: 1260px) {
  .desktop-client.handheld { grid-template-columns: 220px minmax(580px, 1fr); }
  .desktop-intel { display: none; }
  .desktop-header { grid-template-columns: 220px 1fr 200px; }
  .desktop-client > .bezel, .desktop-console { grid-column: 2; }
}

@media (min-width: 1700px) {
  .desktop-client.handheld { grid-template-columns: 280px minmax(760px, 1fr) 390px; gap: 15px; padding: 15px; }
  .desktop-header { grid-template-columns: 280px minmax(0, 1fr) 280px; }
  .desktop-client .player-sprite { transform: translate(-50%, -82%) scale(1.75); }
  .desktop-client .remote-player { scale: 1.3; }
  .desktop-client .enemy { scale: 1.25; }
}