:root {
  --main-bg: #11161e;
  --canvas-bg: radial-gradient(ellipse at center, #263238 0%, #0d1317 100%);
  --ui-bg: rgba(30,40,50,0.92);
  --ui-bg-light: #f9fafd;
  --accent: #e3faff;
  --border: #6ea7db;
  --shadow: 0 2px 12px #0006;
  --chat-bg: rgba(24,24,24,0.91);
  --chat-bubble: #263258;
  --minimap-bg: #fff8;
  --creature-viewer-bg: #f3f8fd;
  --font-main: 'Segoe UI', Arial, sans-serif;
  --button-bg: #223044;
  --button-hover: #294265;
  --button-accent: #3ae1ff;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background: var(--main-bg);
  color: #eef6fa;
  font-family: var(--font-main);
  text-align: center;
  /* overflow: hidden;   <-- DELETE or COMMENT this out */
}

h1 {
  margin: 0.5em 0 0.2em;
}
p {
  margin-top: 0.2em;
  font-size: 1em;
  color: #a3b5c0;
}

/* Main Layout */
main {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ======= CANVAS, SVG ======= */
.world-canvas, #worldCanvas {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  background: var(--canvas-bg);
  display: block;
  border: 1.5px solid var(--border);
  cursor: crosshair;
  z-index: 2;
}
.creature-svg {
  pointer-events: none;
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 3;
}

/* ======= CHAT BOX ======= */
#viewer-chat {
  position: absolute;
  top: 12px; left: 12px;
  width: 295px;
  max-width: 99vw;
  background: var(--chat-bg);
  color: #fff;
  border-radius: 9px;
  padding: 12px 10px 10px 13px;
  box-shadow: var(--shadow);
  z-index: 200;
  font-size: 15px;
  text-align: left;
}
#chat-messages {
  max-height: 140px;
  overflow-y: auto;
  background: rgba(0,0,0,0.11);
  border-radius: 4px;
  margin-bottom: 8px;
  padding: 6px 5px 2px 5px;
  font-size: 14px;
  line-height: 1.35;
  min-height: 38px;
}
#chat-form {
  display: flex;
  gap: 4px;
}
#chat-name, #chat-input {
  border-radius: 4px;
  border: none;
  padding: 5px 6px;
  font-size: 13px;
  background: #fff4;
  color: #fff;
  outline: none;
}
#chat-name { width: 29%; }
#chat-input { flex: 1; }
#chat-form button {
  background: var(--button-accent);
  color: #233;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  padding: 5px 13px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.16s;
}
#chat-form button:hover {
  background: #72e1fc;
}
#chat-error {
  font-size: 12px;
  color: #ffd0d0;
  margin-top: 3px;
}

/* ======= CREATURE VIEWER ======= */
.creatureViewer, #creatureViewer {
  position: fixed;
  top: 82px; right: 0;
  width: 315px; max-width: 99vw;
  height: 430px;
  background: var(--creature-viewer-bg);
  border-left: 2.5px solid #86bbfc;
  box-shadow: -2px 0 12px #0004;
  overflow-y: auto;
  padding: 12px 10px 10px 16px;
  z-index: 120;
  text-align: left;
  color: #1b2340;
}
#viewerContent svg {
  width: 98%;
  height: auto;
  display: block;
}
#toggleView {
  float: right;
  margin-bottom: 3px;
  background: var(--button-accent);
  color: #112;
  border: none;
  border-radius: 6px;
  padding: 4px 14px;
  font-size: 13px;
  cursor: pointer;
}

/* ======= UI PANEL (Top-Right) ======= */
.ui-panel, #ui-panel {
  position: absolute;
  top: 12px;
  right: 10px;
  background: var(--ui-bg);
  border-radius: 11px;
  padding: 13px 17px 13px 14px;
  z-index: 100;
  min-width: 190px;
  text-align: left;
  box-shadow: var(--shadow);
  font-size: 15px;
}
.stats-panel, #stats-panel, .creature-info, #creature-info, .debug-panel, #debug-panel {
  margin-top: 11px;
  font-size: 14px;
  max-width: 350px;
  word-break: break-word;
  color: #f3faff;
}
.hidden { display: none !important; }
button, .ui-panel button {
  margin-right: 8px;
  margin-bottom: 5px;
  border-radius: 6px;
  border: 1px solid #2b3e57;
  background: var(--button-bg);
  color: #fff;
  cursor: pointer;
  padding: 6px 14px;
  font-size: 1em;
  transition: background 0.18s;
  box-shadow: 0 1px 4px #0002;
}
button:hover, .ui-panel button:hover {
  background: var(--button-hover);
}

.creature-info {
  background: #263340;
  color: #ffe300;
  border-radius: 7px;
  padding: 8px 14px;
  margin: 8px 0 0 0;
  font-size: 15px;
  min-width: 200px;
  max-width: 300px;
  z-index: 202;
}
.creature-info.hidden {
  display: none;
}

/* ======= STATS OVERLAY ======= */
#stats-overlay {
  position: absolute;
  left: 38vw; top: 16px;
  background: rgba(18,16,32,0.97);
  border-radius: 10px;
  z-index: 1000;
  padding: 13px 20px 18px 18px;
  border: 1.5px solid #5ad;
  min-width: 260px;
  color: #e9f6ff;
  box-shadow: var(--shadow);
}
#stats-overlay canvas {
  margin: 9px 0 6px 0;
  background: #1a222a;
  border-radius: 5px;
}
#trait-avgs {
  font-size: 13px;
  color: #9ae;
  margin-top: 5px;
}
#hide-stats-overlay, #show-stats-overlay {
  float: right;
  background: #fff4;
  color: #112;
  border: none;
  border-radius: 6px;
  padding: 3px 12px;
  margin: 0 0 4px 6px;
  font-size: 15px;
  cursor: pointer;
}
#show-stats-overlay {
  position: absolute; left: 13px; bottom: 22px; z-index: 300; background: #224; color: #fff;
  border: 1.5px solid #88a;
  box-shadow: 0 2px 6px #0005;
  font-size: 16px;
  border-radius: 7px;
}
#show-stats-overlay:hover, #hide-stats-overlay:hover { background: #addcff; color: #113; }

/* ======= SCROLLBAR ======= */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: #5cc4ee99;
  border-radius: 5px;
}

/* ======= RESPONSIVE ======= */
@media (max-width: 900px) {
  .creatureViewer, #creatureViewer, .ui-panel, #ui-panel {
    width: 94vw;
    max-width: 99vw;
    right: 2vw;
    left: auto;
    font-size: 14px;
  }
  .world-canvas, #worldCanvas, .creature-svg {
    width: 100vw !important;
    height: 70vh !important;
    min-width: 260px;
  }
  #viewer-chat {
    width: 97vw;
    left: 1vw;
    padding: 7px 3px 8px 8px;
  }
  #stats-overlay {
    left: 2vw; top: 5vw;
    min-width: 90vw;
    max-width: 96vw;
    font-size: 14px;
  }
  #show-stats-overlay {
    left: 8px; bottom: 8px;
    font-size: 15px;
  }
}

/* Utility */
.noselect, .ui-panel, #ui-panel, .creatureViewer, #creatureViewer {
  user-select: none;
}

/* --- Place minimap in bottom right --- */
.minimap {
  position: absolute;
  right: 15px;
  bottom: 15px;
  z-index: 200;
  width: 200px !important;
  height: 200px !important;
  border-radius: 8px;
  background: #202b2c;
  box-shadow: 0 2px 12px #0008;
}

/* --- Zoom UI above minimap, bottom right --- */
.zoomUI {
  position: absolute;
  right: 15px;
  bottom: 235px;
  z-index: 201;
  background: rgba(44,44,64,0.92);
  color: #fff;
  border-radius: 7px;
  padding: 3px 7px;
  font-size: 13px;
  box-shadow: 0 2px 10px #0004;
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  top: auto;
  left: auto;
}

.zoomUI button {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 5px;
  background: #3a4c62;
  color: #fff;
  border: none;
  cursor: pointer;
  margin-left: 5px;
}

#zoom-ui { user-select: none; }

/* =======================
   Judu Admin Panel Styles
   ======================= */

/* Global dark mode (body + all panels) */
body {
  background: #191c22;
  color: #eaeaea;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}

/* Admin login panel */
.admin-login-panel {
  background: #232632;
  border-radius: 18px;
  max-width: 340px;
  margin: 70px auto 0 auto;
  padding: 32px 28px;
  box-shadow: 0 6px 32px rgba(0,0,0,0.4);
  border: 1.5px solid #2e3240;
}

.admin-login-panel h2 {
  margin-top: 0;
  text-align: center;
  font-weight: 700;
  color: #80a0ff;
  letter-spacing: 1px;
}

.admin-login-panel label {
  display: block;
  margin-top: 12px;
  font-size: 1rem;
  color: #aabbee;
}

.admin-login-panel input[type="text"],
.admin-login-panel input[type="password"] {
  width: 97%;
  margin-top: 5px;
  padding: 7px 10px;
  border: 1px solid #384264;
  border-radius: 8px;
  background: #232a3a;
  color: #eaeaea;
  margin-bottom: 14px;
  font-size: 1.08rem;
}

.admin-login-panel button {
  width: 100%;
  padding: 8px 0;
  background: linear-gradient(90deg, #3153cc, #2196f3);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-weight: bold;
  font-size: 1.07rem;
  cursor: pointer;
  transition: background 0.2s;
}

.admin-login-panel button:hover {
  background: linear-gradient(90deg, #4268d6, #1484d6);
}

/* Error messages */
.admin-error {
  color: #ff7575;
  margin-top: 12px;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
}

/* ====================
   Admin Dashboard Panel
   ==================== */
.admin-dashboard-panel {
  background: #24273b;
  border-radius: 20px;
  max-width: 800px;
  margin: 40px auto;
  padding: 34px 32px 26px 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  border: 1.5px solid #343757;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #374076;
  margin-bottom: 22px;
  padding-bottom: 8px;
}

.admin-header h2 {
  color: #8db1ff;
  letter-spacing: 1px;
  font-weight: 800;
  font-size: 1.4rem;
}

#logout-btn {
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  background: #2a2e40;
  color: #ffacb0;
  font-weight: bold;
  font-size: 1.02rem;
  cursor: pointer;
  transition: background 0.15s;
}
#logout-btn:hover {
  background: #403c4a;
  color: #f98b92;
}

.admin-sections {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.admin-section {
  background: #232840;
  border-radius: 14px;
  flex: 1 1 220px;
  min-width: 220px;
  margin-bottom: 22px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  border: 1.1px solid #2f3248;
}

.admin-section h3 {
  margin-top: 0;
  font-size: 1.09rem;
  color: #86b7ff;
  letter-spacing: 0.5px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Server status list */
#live-status ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#live-status li {
  font-size: 1.01rem;
  margin: 5px 0;
  color: #eee;
  padding-left: 8px;
  position: relative;
}
#live-status li:before {
  content: "⦿";
  color: #7cefff;
  font-size: 0.83rem;
  margin-right: 5px;
  vertical-align: middle;
}

/* Backups list */
#backup-list {
  margin-top: 9px;
  padding-left: 0;
  list-style: none;
}
#backup-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dashed #394272;
  font-size: 0.99rem;
}
#backup-list button {
  margin-left: 18px;
  background: #163b6c;
  color: #b9e1ff;
  border: none;
  border-radius: 7px;
  padding: 4px 13px;
  font-size: 0.96rem;
  cursor: pointer;
  transition: background 0.18s;
}
#backup-list button:hover {
  background: #2073b4;
  color: #fff;
}

#backup-now-btn, #reset-world-btn {
  margin-right: 8px;
  margin-bottom: 7px;
  background: linear-gradient(90deg, #2f6fc8, #11a7de);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1rem;
  padding: 6px 17px;
  cursor: pointer;
  transition: background 0.22s;
}
#backup-now-btn:hover, #reset-world-btn:hover {
  background: linear-gradient(90deg, #4388df, #138cc0);
}

.admin-confirm {
  color: #b0ffb0;
  font-weight: bold;
  margin-top: 7px;
  font-size: 1.01rem;
}

/* Logs section */
#admin-logs {
  background: #161922;
  color: #a6f3cd;
  font-family: 'Fira Mono', 'Consolas', monospace;
  border-radius: 9px;
  padding: 11px 12px;
  max-height: 230px;
  overflow-y: auto;
  font-size: 0.98rem;
  margin-top: 4px;
  border: 1px solid #2b3440;
}

#admin-body {
  overflow-y: auto !important;
  min-height: 100vh;
  height: auto;
}

/* General button and input tweaks for all admin UI */
.admin-dashboard-panel button,
.admin-dashboard-panel input[type="text"],
.admin-dashboard-panel input[type="password"] {
  outline: none;
  transition: box-shadow 0.14s;
}

.admin-dashboard-panel button:active {
  box-shadow: 0 0 0 2px #2b395a44;
}

input[type="text"]:focus,
input[type="password"]:focus {
  box-shadow: 0 0 0 2px #49b3fc66;
}

/* Responsive tweaks */
@media (max-width: 880px) {
  .admin-dashboard-panel { max-width: 98vw; padding: 12px; }
  .admin-sections { flex-direction: column; gap: 0; }
  .admin-section { margin-bottom: 18px; }
}

.admin-dashboard-panel {
  width: 100vw;
  min-height: 100vh;
  max-height: none;
  box-sizing: border-box;
  overflow-y: auto;
  padding-bottom: 24px;
}

#viewer-controls {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ui-bg);
  border-radius: 9px;
  padding: 8px 14px;
  z-index: 400;
  display: flex;
  gap: 16px;
  box-shadow: var(--shadow);
}
#viewer-controls button {
  background: var(--button-bg);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 7px 16px;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.17s;
}
#viewer-controls button.active {
  background: var(--button-accent);
  color: #112;
}

body {
  margin: 0;
  padding: 0;
  background: #183148;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #fff;
}

#app-layout {
  display: grid;
  grid-template-areas:
    "admin  admin   admin"
    "chat   world   minimap"
    "upcom  world   minimap"
    "talk   world   minimap"
    "answer world   minimap";
  grid-template-columns: 210px 1fr 120px;
  grid-template-rows: 48px 1fr 54px 42px 42px;
  height: 100vh;
  width: 100vw;
  gap: 6px;
  background: #222;
}

/* Responsive for small screens */
@media (max-width: 900px) {
  #app-layout {
    grid-template-areas:
      "admin"
      "world"
      "minimap"
      "chat"
      "upcom"
      "talk"
      "answer";
    grid-template-columns: 1fr;
    grid-template-rows: 48px 1fr 90px 90px 68px 56px 56px;
    height: auto;
    min-height: 100vh;
  }
  #minimap { min-height: 60px !important; }
}

/* Admin bar */
#admin-bar {
  grid-area: admin;
  background: #1260dd;
  color: #fff;
  display: flex; align-items: center; padding: 0 12px;
  gap: 12px;
  border-radius: 0 0 12px 12px;
}
#admin-bar button {
  background: #1642a5;
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 7px 18px;
  margin-right: 7px;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
}
#admin-bar button:hover {
  background: #2771ee;
}

/* Chat */
#chat-panel {
  grid-area: chat;
  background: #5bc7fc;
  border-radius: 12px;
  padding: 9px 12px 8px 12px;
  color: #0e2737;
  font-size: 15px;
  box-shadow: 0 2px 12px #0005;
  min-width: 120px; max-width: 220px;
  overflow: auto;
}

/* Main simulation area */
#world-area {
  grid-area: world;
  background: orange;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 16px #0007;
}

/* Minimap */
#minimap {
  grid-area: minimap;
  background: #9133fc;
  border-radius: 13px;
  width: 110px; min-width: 90px; min-height: 120px;
  margin: 6px 5px 0 0;
  box-shadow: 0 2px 12px #2228;
  padding: 8px 0;
}

/* UPCOM Bar */
#upcom-bar {
  grid-area: upcom;
  background: #ffe066;
  display: flex; align-items: center;
  border-radius: 11px;
  padding: 2px 10px;
  box-shadow: 0 2px 9px #0004;
  min-width: 180px;
  min-height: 40px;
  font-size: 18px;
}
.upcom-icons { flex: 1; display: flex; gap: 8px; overflow-x: auto; }
.upcom-btn {
  background: #fffbe8;
  color: #38342d;
  border-radius: 8px;
  border: none;
  font-size: 1.7em;
  margin: 0 2px;
  padding: 2px 8px;
  cursor: pointer;
  box-shadow: 0 1px 6px #0002;
  outline: none;
  vertical-align: middle;
  transition: background 0.13s;
}
.upcom-btn.active, .upcom-btn:active {
  background: #ffef98;
  color: #c90033;
}

.upcom-scroll-left, .upcom-scroll-right {
  cursor: pointer;
  font-size: 28px;
  padding: 0 7px;
  color: #be9800;
  user-select: none;
  font-weight: bold;
}

@media (max-width: 700px) {
  #upcom-bar { font-size: 15px; }
  .upcom-btn { font-size: 1.25em; }
}

/* Talk (input) */
#talk-panel {
  grid-area: talk;
  background: #e84242;
  color: #fff;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 16px;
  margin-top: 2px;
  display: flex; align-items: center; gap: 8px;
}

/* Answer (output) */
#answer-panel {
  grid-area: answer;
  background: #48e88a;
  color: #0b2f14;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 16px;
  margin-bottom: 2px;
  display: flex; align-items: center; gap: 8px;
}

/* Basic button style */
button, .upcom-btn {
  outline: none;
  border: none;
}

::-webkit-scrollbar { height: 7px; background: #edc; }
::-webkit-scrollbar-thumb { background: #fbd47b; border-radius: 7px; }

#app-layout {
  display: grid;
  grid-template-areas:
    "admin  admin   admin"
    "chat   world   minimap"
    "upcom  world   minimap"
    "talk   world   minimap"
    "answer world   minimap";
  grid-template-columns: 210px 1fr 120px;
  grid-template-rows: 48px 1fr 54px 42px 42px;
  height: 100vh;
  width: 100vw;
  gap: 6px;
}

#admin-bar { grid-area: admin; }
#chat-panel { grid-area: chat; }
#world-area { grid-area: world; position: relative; }
#minimap { grid-area: minimap; }
#upcom-bar { grid-area: upcom; }
#talk-panel { grid-area: talk; }
#answer-panel { grid-area: answer; }

.world-canvas, #world-canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--canvas-bg);
}
.minimap, #minimap {
  width: 100%;
  height: 100%;
  display: block;
  background: #202b2c;
}