/* sidebar.css */

/* 1. Luxurious Sidebar Base (Dark Teal Marble & Polished Gold) */
.sb { 
  background-image: url('game_ui_assets.png') !important;
  background-position: center top;
  background-size: cover;
  box-shadow: inset -3px 0 10px rgba(0,0,0,0.5), 5px 0 15px rgba(0,0,0,0.4) !important;
  border-right: 2px solid #C9922A !important;
  position: relative;
  z-index: 100;
}

/* Base Filigree Inner Border */
.sb::before {
  content: ''; 
  position: absolute; 
  inset: 4px; 
  border: 1px solid rgba(201, 146, 42, 0.2); 
  pointer-events: none; 
  z-index: -1;
}

/* Profile Container - Framed in Gold */
.pc { 
  border-bottom: 2px solid #8B6010 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 20px 12px 16px !important;
  position: relative;
}

/* Portrait Frame Asset */
.avatar-frame {
  display: inline-block;
  background-image: url('game_ui_assets.png');
  background-position: 0px 0px; /* Adjust based on asset position */
  background-size: 320px; /* Match total sheet width */
  width: 90px;
  height: 100px;
  margin-bottom: 5px;
}

/* Character Portrait Positioned Inside Frame */
.char-portrait {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  position: absolute;
  top: 10px;
  left: 5px;
  z-index: 10;
}

.pn { color: #F4D070 !important; font-family: 'Cinzel', serif !important; font-size: 17px !important; font-weight: 900 !important; letter-spacing: .08em !important; margin-top: 5px !important; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.pt { color: #C9A86A !important; font-weight: 600 !important; font-size: 12px !important; margin-bottom: 8px !important; }
.mbl { color: #9AAABB !important; font-weight: 700 !important; text-shadow: 1px 1px 2px #000; }

/* 2. Wellness and Experience Bars (Gem Liquid & Channeled Gold) */
.bar-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  height: 48px;
}

.health-container {
  display: inline-block;
  background-image: url('game_ui_assets.png');
  background-position: -234px -5px; /* Adjust based on wellness asset position */
  background-size: 1000px; /* Match total sheet scale */
  width: 160px;
  height: 25px;
}

.experience-container {
  display: inline-block;
  background-image: url('game_ui_assets.png');
  background-position: -234px -23px; /* Adjust based on experience asset position */
  background-size: 1000px; /* Match total sheet scale */
  width: 160px;
  height: 25px;
}

.bar-container span {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  color: #FFF;
  text-shadow: 0 1px 2px #000;
}

/* 3. Full Image Buttons */
.ni {
    display: block !important;
    width: 100% !important; /* Or a fixed width like 200px if your sidebar has a fixed width */
    height: 65px !important; 
    margin: 8px 0 !important; /* Adjusted margin to prevent overflowing */
    padding: 0 !important;
    
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    
    transition: transform 0.2s, filter 0.2s !important;
    cursor: pointer !important;
}
/* Hide the old HTML text and tiny icon box */
.ni .nic, .ni .nl {
    display: none !important;
}

/* 4. Assign the full button images directly to the containers */
.ni-overview    { background-image: url('overview.png') !important; }
.ni-work        { background-image: url('Work.png') !important; }
.ni-market      { background-image: url('Market.png') !important; }
.ni-companies   { background-image: url('Companies.png') !important; }
.ni-real-estate { background-image: url('realestate.png') !important; }
.ni-banking     { background-image: url('Banking.png') !important; }
.ni-newspaper   { background-image: url('Newspaper.png') !important; }
.ni-military    { background-image: url('Military.png') !important; }
.ni-nations     { background-image: url('Nations.png') !important; }
.ni-politics    { background-image: url('Politics.png') !important; }
.ni-empire      { background-image: url('Empire.png') !important; }
.ni-leaderboard { background-image: url('Leaderboard.png') !important; }

/* 5. Hover and Active Effects */
.ni:hover {
    transform: scale(1.03) !important;
    filter: brightness(1.15) !important;
}

.ni.active {
    transform: scale(1.05) !important;
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(244,208,112,0.4)) !important;
}

/* Category Header Text */
.sbst {
  color: #C9A86A !important;
  text-align: center;
  letter-spacing: 0.25em !important;
  font-size: 10px !important;
  margin-top: 12px;
  position: relative;
  z-index: 1;
}

.sbst::after { display: none; }
.sbst::before, .sbst::after {
    content: ' ◈ '; 
    color: #8B6010;
    font-size: 8px;
    vertical-align: middle;
}
/* =========================================
   AVATAR FRAME & LUXURY BARS
   ========================================= */

/* Avatar Frame Positioning */
.avatar-wrapper {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 5px auto 15px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-wrapper .pav {
    width: 66px !important;
    height: 66px !important;
    border-radius: 50% !important; /* Forces it into a circle */
    border: none !important;
    background-color: #1a1a1a !important;
    z-index: 1;
    overflow: hidden;
}

.avatar-wrapper .frame-overlay {
    position: absolute;
    /* Adjust top/left slightly if your cropped frame sits too high/low */
    top: -24px; 
    left: -24px;
    width: 120px;
    height: 120px;
    background-image: url('avatar_frame.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
    pointer-events: none;
}

/* Bar Labels */
.bar-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    margin-bottom: 5px;
}
.bar-title { color: #C9A86A; }
.bar-value { color: #F4D070; }

/* The gold outer edge with pointed ends */
.luxury-bar-container {
    position: relative;
    width: 100%;
    height: 16px;
    background: linear-gradient(180deg, #F4D070 0%, #C9922A 30%, #8B6010 100%);
    padding: 2px; /* Creates the gold border thickness */
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
    margin-bottom: 14px;
}

/* The tiny blue gems embedded at the points */
.luxury-bar-container::before, .luxury-bar-container::after {
    content: '';
    position: absolute;
    top: 50%; 
    transform: translateY(-50%) rotate(45deg);
    width: 5px; 
    height: 5px;
    background: #2A5298; 
    border: 1px solid #F4D070;
    z-index: 5;
}
.luxury-bar-container::before { left: 2px; }
.luxury-bar-container::after { right: 2px; }

/* The dark inner background */
.luxury-bar-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #110a05 0%, #2a1a10 100%);
    clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
    position: relative;
}

/* The glowing gem fills */
.mbf {
    height: 100%;
    transition: width 0.5s ease-in-out;
    /* Clip the right edge of the fill to also be pointed */
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%, 0 50%);
}

.wellness-fill {
    background: linear-gradient(180deg, #A8E6CF 0%, #1D9E75 30%, #0F6E56 100%) !important;
    box-shadow: inset 0 2px 6px rgba(255,255,255,0.5);
}

.xp-fill {
    background: linear-gradient(180deg, #A8C0E6 0%, #2A5298 30%, #0F2447 100%) !important;
    box-shadow: inset 0 2px 6px rgba(255,255,255,0.5);
}
#game-bg-video {
    position: fixed; /* Keeps the video locked in place even if you scroll */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ensures the video scales to fill the screen without distorting */
    z-index: -1; /* Pushes the video behind all your game elements */
    pointer-events: none; /* Prevents the video from blocking mouse clicks on your game */
}