/* -------------------------
   GENERAL RESET & FONTS
------------------------- */
* { margin:0; padding:0; box-sizing:border-box; font-family: -apple-system,BlinkMacSystemFont,Segoe UI, Tahoma, Geneva, Verdana, sans-serif; }

/* -------------------------
   STORY PAGE
------------------------- */
body.story-page { background:#111; color:white; overflow-x:hidden; }
body.story-page .scroll-container { height:100vh; overflow-y:scroll; scroll-behavior:smooth; scroll-snap-type:y mandatory; margin-top:70px; height: calc(100vh - 70px); }

body.story-page .sticky { position:sticky; top:0; height:100vh; width:100%; overflow:hidden; z-index:-1; }
body.story-page .image-container img { width:100%; height:auto; transform:translateY(0); transition:transform 0.3s ease, filter 0.5s ease; }
body.story-page .fog { position:absolute; top:0; left:0; width:100%; height:100%; background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.7)); pointer-events:none; z-index:2; }

body.story-page .panel { height:100vh; display:flex; justify-content:center; align-items:center; scroll-snap-align:start; position:relative; }
body.story-page .panel h1 { font-size:3rem; max-width:900px; opacity:0; transform:translateY(40px); transition:opacity 0.8s ease, transform 0.8s ease, color 0.8s ease; text-align:center; z-index:3; }
body.story-page .panel.active h1 { opacity:1; transform:translateY(0); }

body.story-page .red h1 { color:rgba(255,80,80,1); }
body.story-page .shake { animation: shake 0.3s; }
@keyframes shake {
 0% { transform:translate(2px,1px); }
 25% { transform:translate(-2px,-1px); }
 50% { transform:translate(2px,-1px); }
 75% { transform:translate(-2px,1px); }
 100% { transform:translate(0); }
}

body.story-page #lastPanel { flex-direction:column; justify-content:center; align-items:center; gap:100px; }
body.story-page .login-container { opacity:0; transform:translateY(40px); transition:opacity 0.8s ease, transform 0.8s ease; }
body.story-page .login-button { display:inline-block; padding:15px 40px; background: rgba(255,255,255,0.9); color:black; text-decoration:none; font-weight:bold; font-size:1.2rem; border-radius:8px; transition: all 0.3s ease; }
body.story-page .login-button:hover { background:white; color:#111; transform: scale(1.05); }

/* Story Page Banner */
body.story-page .top-banner { position: fixed; top: 0; left: 0; width: 100%; height: 70px; background: rgba(0,0,0,0.85); backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:space-between; padding:0 30px; z-index:1000; border-bottom:1px solid rgba(255,255,255,0.1); }
body.story-page .banner-title { font-size:1.2rem; font-weight:bold; letter-spacing:1px; background:linear-gradient(45deg,#ffcc33,#ffd700); background-clip:text; -webkit-background-clip:text; color:transparent !important; -webkit-text-fill-color:transparent !important; text-shadow:2px 2px 6px rgba(0,0,0,0.7); }
body.story-page .banner-logo { height:50px; width:auto; }

/* Story Page Responsive */
@media (max-width:480px){
  body.story-page .panel h1 { font-size:1.5rem; max-width:90%; padding:0 10px; }
  body.story-page .sticky { height:100vh; }
  body.story-page .login-button { font-size:1rem; padding:10px 30px; }
  body.story-page #lastPanel { gap:60px; }
  body.story-page .image-container img { width:auto; min-width:80%; max-width:none; height:auto; }
  body.story-page .top-banner { height:60px; padding:0 15px; }
  body.story-page .banner-title { font-size:1.1rem; }
  body.story-page .banner-logo { height:40px; }
  body.story-page .scroll-container { margin-top:60px; height: calc(100vh - 60px); }
}

/* -------------------------
   LOGIN PAGE
------------------------- */
body.login-page { height:100%; width:100%; display:flex; justify-content:center; align-items:center; background: url('images/tractor.jpg') no-repeat center 40%; background-size:cover; color:white; overflow-y:auto; }
body.login-page .overlay { position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.2); z-index:1; }
body.login-page .login-container { position:relative; z-index:2; background: rgba(0,0,0,0.5); padding:40px 60px; border-radius:12px; text-align:center; max-width:400px; width:90%; }
body.login-page .login-container h1 { margin-bottom:15px; font-size:2rem; }
body.login-page .login-container p { margin-bottom:20px; font-size:0.95rem; opacity:0.9; }
body.login-page .login-container input { width:100%; padding:12px 15px; margin-bottom:15px; border-radius:8px; border:none; font-size:1rem; }
body.login-page .login-container button { width:100%; padding:12px; font-size:1rem; font-weight:bold; border:none; border-radius:8px; background:white; color:#111; cursor:pointer; transition: transform 0.2s ease; }
body.login-page .login-container button:hover { transform: scale(1.05); }
body.login-page .message { margin-top:15px; font-size:0.95rem; color:#aaffaa; }
/* MOBILE LOGIN FORM WIDTH FIX */
@media (max-width: 480px) {
  body.login-page .login-container {
    width: 95%;       /* almost full width of mobile screen */
    max-width: none;  /* remove 400px restriction */
    padding: 30px 20px; /* optional: smaller padding for mobile */
  }

  body.login-page .login-container input,
  body.login-page .login-container button {
    width: 100%;      /* ensures inputs and button fill container */
  }
}
/* -------------------------
   RULES, TRADER, DASHBOARD PAGES
   (All share similar header / overlay / main)
------------------------- */
body.rules-page, body.trader-page, body.dashboard-page {
  height:100%; width:100%; color:#eee; background: url('images/apocalypse-bg.jpg') no-repeat center center; background-size:cover;
}
body.rules-page .overlay, body.trader-page .overlay, body.dashboard-page .overlay { position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); z-index:0; }

body.rules-page .header, body.trader-page .header, body.dashboard-page .header {
  position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; padding:20px 40px; background: rgba(20,20,20,0.85); border-bottom:2px solid #444;
}
body.rules-page .server-name, body.trader-page .server-name, body.dashboard-page .server-name {
  font-size:1.2rem; font-weight:bold; background: linear-gradient(45deg,#ffcc33,#ffd700); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow:2px 2px 6px rgba(0,0,0,0.7),0 0 10px rgba(255,200,50,0.4);
}
body.rules-page nav a, body.trader-page nav a, body.dashboard-page nav a { color:#eee; text-decoration:none; margin-left:15px; font-weight:bold; transition:0.2s; }
body.rules-page nav a:hover, body.trader-page nav a:hover, body.dashboard-page nav a:hover { color:#ffcc33; }
body.rules-page nav a.active, body.trader-page nav a.active, body.dashboard-page nav a.active { text-decoration:underline; color:#ffcc33; }

body.rules-page .main, body.trader-page .main, body.dashboard-page .main {
  position:relative; z-index:1; padding:50px 40px; text-align:center;
}
body.rules-page .card, body.trader-page .card, body.dashboard-page .card {
  background: rgba(30,30,30,0.85); border:1px solid #555; border-radius:10px; padding:30px; margin:20px auto; max-width:800px; color:#ddd; text-shadow:0 0 2px #000;
}
body.rules-page .card h2, body.trader-page .card h2, body.dashboard-page .card h2 { font-size:1.8rem; color:#ffcc33; margin-bottom:15px; text-shadow:1px 1px 5px #000; }

/* -------------------- Gold Coins Styling -------------------- */
.header .balance {
    font-size: 1.3rem;      /* bigger text */
    color: gold;          /* golden text */
    font-weight: bold;    /* bold */
    text-shadow: 1px 1px 5px #000; /* subtle shadow for contrast */
}

/* Responsive tweak */
@media (max-width: 768px) {
    .header .balance {
        font-size: 1rem; /* slightly smaller on mobile */
    }
}
/* Responsive adjustments */
@media(max-width:768px){
  body.rules-page .header, body.trader-page .header, body.dashboard-page .header { flex-direction:column; align-items:flex-start; padding:15px 20px; }
  body.rules-page .server-name, body.trader-page .server-name, body.dashboard-page .server-name { font-size:1.0rem; margin-bottom:10px; text-align:left; }
  body.rules-page nav a, body.trader-page nav a, body.dashboard-page nav a { margin-left:0; margin-right:15px; }
}
/* Ensure each form label and field is full width on mobile */
body.trader-page form label,
body.trader-page form select,
body.trader-page form input,
body.trader-page form button {
    flex: 1 1 100%;
    width: 100%;
    margin-bottom: 15px;  /* adds spacing between fields */
}
/* Mobile fix for story page scrolling */
@media (max-width: 480px) {
  .sticky {
    position: relative; /* so it scrolls naturally */
    height: auto;       /* allow full image height */
  }

  .image-container img {
    width: 100%;       /* full width */
    height: auto;
    transform: translateY(0); /* reset any previous transforms */
  }

  .panel {
    min-height: 100vh;          /* still fill viewport */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #lastPanel {
    gap: 60px;                  /* reduce gap for mobile */
  }

  .login-container {
    transform: translateY(0);   /* show login correctly */
  }

  .panel h1 {
    font-size: 1.5rem;          /* smaller for mobile */
    max-width: 90%;
    padding: 0 10px;
  }
}
/* -------------------------
   MOBILE: widen dashboard/rules/trader cards
------------------------- */
@media (max-width: 480px) {
  body.dashboard-page .card,
  body.rules-page .card,
  body.trader-page .card {
    width: 95%;       /* nearly full width of mobile screen */
    max-width: none;  /* remove desktop max-width restriction */
    padding: 20px;    /* optional: smaller padding on mobile */
    margin: 15px auto; /* optional: reduce vertical spacing */
  }

  body.dashboard-page .main,
  body.rules-page .main,
  body.trader-page .main {
    padding: 20px 10px; /* optional: reduce side padding for extra width */
  }
}
/* Jobs form styling */
body.dashboard-page form {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
}

body.dashboard-page form label {
    width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

body.dashboard-page form input,
body.dashboard-page form select,
body.dashboard-page form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: none;
    font-size: 1rem;
}

body.dashboard-page form textarea {
    resize: vertical;
}

body.dashboard-page form button {
    padding: 12px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    background: white;
    color: #111;
    cursor: pointer;
    transition: 0.2s;
}

body.dashboard-page form button:hover {
    transform: scale(1.05);
}
body.rules-page .card {
    text-align: left;   /* overrides center for everything inside */
}

body.rules-page .card h2 {
    text-align: center; /* keep title centered */
}

body.rules-page .card p {
    margin-bottom: 15px;
    line-height: 1.7;
}
.gold-coin {
    color: gold;
    font-weight: bold;
}
/* Toggle buttons */
.trader-toggle {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.trader-toggle button {
    padding: 12px 20px;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.order-amount {
  font-size: 1.5rem; /* bigger text */
  font-weight: bold;
  color: gold;
}
/* ITEM TEXT */
.item-info {
  display: flex;
  flex-direction: column;
}

.item-name {
  font-weight: bold;
}

.item-price {
  font-size: 0.9rem;
  color: #ffcc33;
}
/* DIVIDER */
.trader-divider {
  margin: 25px 0;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.2);
}
/* GRID LAYOUT */
.trader-items-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 15px;
}

/* EACH ITEM */
.trader-item {
  background: rgba(50,50,50,0.6);
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* TEXT */
.item-name {
  font-weight: bold;
}

.item-price {
  font-size: 0.9rem;
  color: #ffcc33;
}

/* +/- CONTROLS */
.qty-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.qty-btn {
  background: #ffcc33;
  border: none;
  padding: 5px 10px;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
}

.qty-btn:hover {
  background: #ffd700;
}

.qty-controls input {
  width: 50px;
  text-align: center;
  border-radius: 6px;
  border: none;
  padding: 5px;
}

/* MOBILE: stack back to 1 column */
@media (max-width: 480px) {
  .trader-items-grid {
    grid-template-columns: 1fr;
  }
}
.table-wrapper {
    overflow-x: auto; /* horizontal scroll on small screens */
    -webkit-overflow-scrolling: touch; /* smooth scrolling on mobile */
}

.table-wrapper table {
    width: 100%; /* keep table full width */
    border-collapse: collapse;
}

.table-wrapper th,
.table-wrapper td {
    padding: 8px;
    text-align: left;
    white-space: nowrap; /* prevent breaking item names */
}
.trader-ad {
    max-width: 350px;
    margin: 20px auto;
    padding: 20px;
    border: 2px solid #f39c12;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    text-align: center;
    font-family: Arial, sans-serif;
}

.trader-ad h3 {
    color: #e67e22;
    margin-bottom: 10px;
}

.trader-ad p {
    color: #333;
    margin-bottom: 15px;
}

.trader-ad a {
    display: inline-block;
    padding: 12px 25px;
    background-color: #f6b26b;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.3s;
}

.trader-ad a:hover {
    background-color: #d35400;
}
/* Modal overlay */
.modal {
    display: none; /* hidden by default */
    position: fixed;
    z-index: 1000; /* above everything */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* scroll if needed */
    background-color: rgba(0,0,0,0.7); /* dim background */
}

/* Robbo added for live player map - allow map inside modal to behave properly */
.modal #map {
    width: 95%;
    height: 80vh;
    margin: 5vh auto;
    background: #111;
    border-radius: 10px;
}

/* Modal content (image) */
.modal-content {
    margin: 10% auto;
    display: block;
    max-width: 90%;
    max-height: 80%;
    border: 3px solid #fff;
    border-radius: 8px;
}

/* Caption */
#caption {
    text-align: center;
    color: #fff;
    margin-top: 10px;
}

/* Close button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: #ccc;
}

/* Optional: small screen adjustments */
@media (max-width: 600px) {
    .modal-content {
        max-width: 180%;
        max-height: 180%;
        margin: 0;
    }
}
/* Robbo this is for CHAT UI */
.chat-card {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
    display: flex;          /* flex layout */
    flex-direction: column; /* stack messages above input */
    height: auto;          /* total chat card height */
}

#chat-box {
    background: rgba(0,0,0,0.6);
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #444;
    font-size: 0.85rem;
    overflow-y: auto;       /* scroll inside box */
    flex: 1;                /* take all space above input */
}

#chat-form {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

#chat-form input {
    flex: 1;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #888;
}

#chat-form button {
    padding: 8px 12px;
    border-radius: 5px;
    border: none;
    background: #ffcc33;
    font-weight: bold;
    cursor: pointer;
}

/* EACH MESSAGE */
.chat-message {
    margin-bottom: 6px;
    line-height: 1.4;
    text-align: left;    /* always left-aligned */
}

/* USERNAME */
.chat-user {
    color: #ffcc33; /* gold */
    font-weight: bold;
}

/* MESSAGE TEXT */
.chat-text {
    color: #ddd;
}

/* TIME */
.chat-time {
    color: #888;
    font-size: 0.7rem;
    margin-left: 6px; /* right after message */
}
/* MOBILE STYLING */
@media (max-width: 768px) {
    .chat-card {
        width: 95%;
        height: auto; /* let it grow naturally */
    }
    #chat-box {
        height: 300px; /* optional smaller box height */
    }
}
@media (max-width: 480px) {
    /* Slightly smaller font and padding for dashboard tables */
    .table-wrapper table,
    .table-wrapper th,
    .table-wrapper td {
        font-size: 0.85rem;  /* smaller font for mobile */
        padding: 4px;        /* less padding to fit screen */
    }
}
.kill {
    color: #ff4d4d;
    font-weight: bold;
    font-size: 1.1em;
}
.empty {
    opacity: 0.6;
    font-style: italic;
    padding: 10px;
}

/* Robbo added this for the live position player map  */
#mapModal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
}

/* On Mobile: Force the map to be big so you can scroll */
@media screen and (max-width: 768px) {
    #mapImg {
        /* 600px is the "Comfortable" zoom level */
        width: 600px !important; 
        max-width: none !important;
        height: auto !important;
        display: block;
    }

    #mapWrapper {
        width: 600px !important;
        margin: 0; /* Align to left so user knows they can swipe right */
    }

    #mapContainer {
        display: block !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        background-color: #000;
    }

    .modal .close {
        position: fixed !important;
        right: 15px !important;
        top: 15px !important;
        z-index: 2000 !important;
        background: rgba(255, 204, 51, 0.9);
        color: #000;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }
}