body {
    margin:0;
    padding:0;
}

#container {
    margin:0 auto;
    width:1600px;
}

#loading_screen {
    position:fixed;
    top:        0; 
    left:       0; 
    z-index:200;
    min-width:100%;
    min-height:100%;
    background-color:white;
    text-align:center;
}

#updatebar {
    top:0;
    position:fixed;
    width:100%;
    background-color:#f9b370;
    border-bottom:1px solid #e8760a;
    color:white;
    font-weight:bold;
    text-align:center;
    z-index:100;
}

#warningbar {
    top:0;
    position:fixed;
    width:100%;
    background-color:#f4586b;
    border-bottom:1px solid #48050d;
    color:white;
    font-weight:bold;
    text-align:center;
    z-index:100;
}

#gamecontainer {
    margin:0 auto;
    padding:15px;
    width:1050px;
    text-align:center;
    float:left;
}

#quickdetails {
    display:block;
    position:fixed;
    top:0px;
    width:80%;
    padding-top:10px;
    background-color:white;

    /* FIX: ensure HUD stays above other game elements */
    z-index:50;
}


#quickdetails table {
    margin-left:50px;
}

#save {
    float:left;
    width:240px;
    font-size:19px;
    margin:20px 50px 0 10px;
}

#save img {
    vertical-align:middle;
}

#upgrades_container {
    float:left;
    width:33%;
}

#upgrades_container a {
    color:white;
    text-decoration:none;
}

#mining_container {
    float:left;
    margin:0 auto;
    width:33%;
}

#vault_container {
    float:right;
    width:33%;
}

#shrine {
    float:left;
    margin:0 auto;
    width:33%;
}

.button_mine {
    width:100%;
    font-size:26px;
}

#mine_box {
    margin-top:10px;
}

/*div[name="globalBossContainer"] {
    
}*/

div[name="globalBossContainer"] div[name="lobby"] {
    text-align:left;
}

#employment {
    margin-top:100px;
}

#employment table[name="workers"] span.ore {
    font-size:13px;
    float:left;
    margin-right:8px;
}

#employment div[name="items_holder"] span.item {
    float:left;
    display:inline-block;
    height:210px;
    width:225px;
    margin-right:15px;
    margin-bottom:7px;
    text-align:center;
}

#employment div[name="items_holder"] span.item span[name="item_details"] {
    display:block;
    width:100%;
    text-align:left;
}
td.widebuttons button {
    width:100%;
    clear:both;
}

.upgrade {
    width:70%;
    padding:7px;
    margin:0 auto;
    margin-bottom:7px;
    border:1px solid grey;
    background-color:grey;
    color:white;
    text-align:left;
}

.upgrade img {
    margin-right:10px;
    float:left;
}

#money_display {
    padding:6px;
    color:white;
    background-color:#367C17;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

.displaytext {
    padding:6px;
    color:white;
    background-color:grey;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

td.globalbossevent {
    border:1px solid #2c7e07;
    background-color:#cffbbc;
    font-weight:bold;
    font-size:13px;
    padding:3px;
}

.globalbossGreen {
    border:1px solid #2c7e07;
    background-color:#cffbbc;
}

#inventory td {
    background-color:grey;
    border:1px solid black;
}

table[name="stats"] {
    font-size:20px;
}

.popup {
    z-index: 100000; /* higher so it always overlays */
    width: 400px;
    max-width: calc(100vw - 32px);

    position: fixed;                 /* key change */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* true centering */

    background-repeat: repeat;
    background-image: url('../game/img/style/transparent_bg_black.png');

    padding: 15px;
    color: #919191;
    word-wrap: break-word;

    box-sizing: border-box;
}


.popup button {
    float:right;
    background-color:transparent;
    font-weight:bold;
    color:#C4B56B;
    border:none;
    cursor:pointer;
}

.popup p.title {
    text-align:center;
    margin-bottom:7px;
    color:#C6A500;
}

.popup input, .popup textarea {
    background-color:grey;
    border:1px solid black;
    color:black;
}

span.popup_item {
    float:left;
    display:inline-block;
    margin-right:7px;
    margin-top:8px;
    text-align:center;
}

span.popup_rewardstitle {
    display:block;
    margin:0 auto;
    color:#C6A500;
    border-bottom:1px dashed #C6A500;
    font-size:19px;
}

.research {
    text-align:left;
    max-width:600px;
}

.bar {
        padding:0;
        height:25px;
        width:300px;
        border:1px solid #295dfd;
        overflow:hidden;
}

.bar span {
        display:inline-block;
        padding:0;
        margin:0;
        height:25px;
        color:white;
        text-align:center;
        background-color:#7d9dfe;
        border:1px solid #7d9dfe;
        overflow:hidden;
}

.healthbar {
        padding:0;
        height:5px;
        width:300px;
        background-color:green;
        overflow:hidden;
}

.healthbar span {
        display:inline-block;
        float:right;
        padding:0;
        margin:0;
        height:5px;
        color:white;
        text-align:center;
        background-color:red;
        border:1px solid red;
        overflow:hidden;
}

.healthbar.large, .healthbar.large span {
    height:15px;
}

.globalBossBar {
    padding:0;
    height:25px;
    background-color:green;
    overflow:hidden;
}

.globalBossBar span {
    display:inline-block;
    float:right;
    padding:0;
    margin:0;
    height:25px;
    color:white;
    text-align:center;
    background-color:red;
    border:1px solid red;
    overflow:hidden;
}

.votebar{
    height:20px;
    display:inline-block;
    border:1px solid #9c6006;
    background-color:#facb85;
    color:black;
    font-weight:bold;
    font-size:13px;
    overflow:hidden;
    text-align:right;
}

.enderBox {
    border:1px solid #1d4a4e;
    background-color:#21565b;
    color:#389199;
}

.leftMargin {
    float:left;
    min-width:180px;
    max-width:180px;
    margin-right:10px;
    margin-bottom:6px;
}

.general {
    border:1px solid #532289;
    background-color:#dcc9f2;
    color:#2a1145;
}

.general2 {
    border:1px solid #C43D48;
    background-color:#FF9BA3;
    color:#912B34;
}

.general3 {
    border:1px solid #DBAC2B;
    background-color:#FFE99B;
    color:#967B33;
}

#chatbox {
    margin:0 auto;
    width:900px;
    height:300px;
    background-color:grey;
}

.hidden {display:none;}
.title {font-size:26px;text-transform:uppercase;padding:0;margin:0;}
#employment .title {font-size:24px;text-transform:uppercase;padding:0;margin:0;}
.left {float:left;}
.center {margin:0 auto;}
.right {float:right;}
.max50 {max-width:50%;}
.max30 {max-width:30%;}
.textleft {text-align:left;}
.textright {text-align:right;}
.clear {clear:both;}
.vtext {vertical-align:middle;}

.red{
    background-color:#FF7777;
}

.green {
    background-color:#4CA555;
}

.selected {
    background-color:#D8D8D8 ;
}

a {
    color:black;
    text-decoration:none;
}

a img {
    border:0;
}

/* ===== Modern loading spinner (7 dots in a circle) ===== */
.loader-dots {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 18px auto 10px auto; /* centers inside loading screen */
}

.loader-dots span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px; /* centers each dot */
    border-radius: 50%;
    background: #4CA555; /* matches your green accent */
    opacity: 0.18;
    transform: rotate(var(--r)) translate(22px);
    animation: loaderDotsFade 0.9s linear infinite;
    animation-delay: var(--d);
}

/* 7 dots around the circle */
.loader-dots span:nth-child(1) { --r: 0deg;   --d: 0s; }
.loader-dots span:nth-child(2) { --r: 51deg;  --d: 0.08s; }
.loader-dots span:nth-child(3) { --r: 102deg; --d: 0.16s; }
.loader-dots span:nth-child(4) { --r: 153deg; --d: 0.24s; }
.loader-dots span:nth-child(5) { --r: 204deg; --d: 0.32s; }
.loader-dots span:nth-child(6) { --r: 255deg; --d: 0.40s; }
.loader-dots span:nth-child(7) { --r: 306deg; --d: 0.48s; }

@keyframes loaderDotsFade {
    0%   { opacity: 1;   transform: rotate(var(--r)) translate(22px) scale(1.05); }
    100% { opacity: 0.12; transform: rotate(var(--r)) translate(22px) scale(0.85); }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .loader-dots span { animation: none; opacity: 0.6; }
}

/* ===== Chat: Wide Dock Redesign ===== */

.chat-drawer {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(1100px, calc(100vw - 24px)); /* nearly full width, but not edge-to-edge */
  height: 320px;
  max-height: 46vh;
  min-height: 220px;

  background: #121316;              /* simple flat base */
  border: 1px solid #2a2d33;
  border-radius: 12px;

  box-shadow: 0 16px 50px rgba(0,0,0,0.45);
  overflow: hidden;

  display: none;
  z-index: 99999;
  color: #e9eaee;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.chat-drawer.open { display: block; }

/* Collapsed becomes a thin dock bar */
.chat-drawer.collapsed {
  height: 52px;
  min-height: 52px;
  max-height: 52px;
}

/* Header: looks like an app bar */
.chat-header {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 12px;
  background: #17181c;
  border-bottom: 1px solid #2a2d33;
}

.chat-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6ee7b7; /* subtle mint, not neon */
}

/* Right side buttons: flat + small */
.chat-actions {
  display: flex;
  gap: 8px;
}

.chat-icon-btn {
  height: 30px;
  width: 34px;
  border-radius: 8px;
  border: 1px solid #2a2d33;
  background: #121316;
  color: #e9eaee;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.chat-icon-btn:hover {
  background: #1b1d22;
}

.chat-icon-btn:active {
  transform: translateY(1px);
}

/* Body is split into feed + input */
.chat-body {
  height: calc(100% - 46px);
  display: flex;
  flex-direction: column;
}

.chat-drawer.collapsed .chat-body { display: none; }

/* Message feed: “log” style */
.chat-messages {
  flex: 1;
  padding: 10px 12px;
  overflow-y: auto;

  /* subtle grid feel */
  background:
    linear-gradient(#121316, #121316),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.02) 0px,
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 24px
    );
  background-blend-mode: normal;
}

/* Each line is compact; no bubble boxes */
.chat-msg {
  padding: 6px 0;
  margin: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  line-height: 1.25;
  word-break: break-word;
}

.chat-meta {
  font-size: 11px;
  color: #9aa0aa;
  margin-bottom: 2px;
}

/* Username emphasis */
.chat-meta strong {
  color: #e9eaee;
  font-weight: 700;
}

/* Input row: looks like a dock footer */
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  background: #17181c;
  border-top: 1px solid #2a2d33;
}

.chat-input {
  flex: 1;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #2a2d33;
  background: #0f1012;
  color: #e9eaee;
  padding: 0 12px;
  outline: none;
}

.chat-input:focus {
  border-color: #5b5f69;
}

/* Basic button */
.chat-send {
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid #2a2d33;
  background: #23262d;
  color: #e9eaee;
  cursor: pointer;
  font-weight: 700;
}

.chat-send:hover {
  background: #2a2e37;
}

/* Scrollbar: subtle */
.chat-messages::-webkit-scrollbar {
  width: 10px;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: #2a2d33;
  border-radius: 10px;
}
.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

/* Fix: keep drawer centered when collapsed (override any old left/right rules) */
#chatDrawer.chat-drawer,
#chatDrawer.chat-drawer.collapsed {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep width consistent while collapsed too */
#chatDrawer.chat-drawer.collapsed {
  width: min(1100px, calc(100vw - 24px)) !important;
}

.chat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;

  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;

  background: #e53935;   /* red bubble */
  color: #fff;

  vertical-align: middle;
}


#openChatLink {
    color:rgb(155, 26, 26);
}