/* ==========================================================
   LuRana's World V5.9
   Full Visual Rebuild
   ========================================================== */

:root{
  --lr59-bg:#020609;
  --lr59-bg2:#050d11;
  --lr59-panel:#071116;
  --lr59-panel2:#0a171c;
  --lr59-panel3:#0d1d23;

  --lr59-line:#163e4d;
  --lr59-line-hi:#1b789b;

  --lr59-blue:#08aee4;
  --lr59-cyan:#55d7ff;
  --lr59-green:#65e28e;
  --lr59-amber:#f2b544;
  --lr59-red:#ee6262;

  --lr59-text:#eff8fa;
  --lr59-muted:#86a7b2;

  --lr59-shadow:
    0 20px 60px rgba(0,0,0,.55);
}

html{
  background:#010405!important;
}

body.lurana-v59{
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(17,126,160,.17),
      transparent 34%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(91,211,244,.018) 0 1px,
      transparent 1px 39px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(91,211,244,.014) 0 1px,
      transparent 1px 39px
    ),
    linear-gradient(
      180deg,
      #02070a,
      #010405 75%
    )!important;

  color:var(--lr59-text)!important;
}

/* ----------------------------------------------------------
   Global frame
   ---------------------------------------------------------- */

body.lurana-v59 .shell,
body.lurana-v59 main{
  max-width:1540px!important;
}

body.lurana-v59 .topbar,
body.lurana-v59 header{
  background:
    linear-gradient(
      180deg,
      rgba(2,10,13,.99),
      rgba(2,7,9,.98)
    )!important;

  border-bottom:
    1px solid rgba(85,215,255,.23)!important;

  box-shadow:
    0 12px 36px rgba(0,0,0,.5)!important;
}

body.lurana-v59 .brand h1,
body.lurana-v59 header .brand{
  color:#f4fbfc!important;
  text-shadow:
    0 2px 12px rgba(0,0,0,.7);
}

body.lurana-v59 .nav{
  background:
    rgba(2,8,11,.93)!important;

  border:
    1px solid rgba(31,105,132,.33)!important;

  padding:6px!important;
}

body.lurana-v59 .nav-btn,
body.lurana-v59 header nav a{
  background:
    linear-gradient(
      180deg,
      rgba(7,81,108,.82),
      rgba(4,52,70,.86)
    )!important;

  border:
    1px solid rgba(40,151,190,.45)!important;

  color:#b9d9e3!important;

  border-radius:1px!important;

  text-transform:uppercase!important;

  letter-spacing:.075em!important;
}

body.lurana-v59 .nav-btn:hover,
body.lurana-v59 .nav-btn.active,
body.lurana-v59 header nav a:hover{
  background:
    linear-gradient(
      180deg,
      #078bb8,
      #05566f
    )!important;

  border-color:
    var(--lr59-cyan)!important;

  color:white!important;

  box-shadow:
    inset 0 -2px 0 #62dcff,
    0 0 20px rgba(18,171,223,.18)!important;
}

/* ----------------------------------------------------------
   Remove old injected visual tops
   Functions remain in DOM.
   ---------------------------------------------------------- */

body.lurana-v59 #lr56-daily-forecast,
body.lurana-v59 #lr56-live-ops,
body.lurana-v59 #v58-command-root,
body.lurana-v59 .v58-status-grid,
body.lurana-v59 .v58-grid,
body.lurana-v59 .v58-live-strip{
  display:none!important;
}

/* ----------------------------------------------------------
   Dashboard hero
   ---------------------------------------------------------- */

.lr59-dashboard{
  margin:18px 0 28px;
}

.lr59-hero{
  position:relative;

  min-height:294px;

  display:flex;
  align-items:center;

  overflow:hidden;

  border:
    1px solid rgba(42,133,165,.45);

  background:
    linear-gradient(
      90deg,
      rgba(1,6,8,.95) 0%,
      rgba(1,7,9,.86) 40%,
      rgba(1,7,9,.26) 76%,
      rgba(1,7,9,.42)
    ),
    url("assets-v59/hero-panorama.svg")
    center / cover no-repeat;

  box-shadow:
    var(--lr59-shadow);
}

.lr59-hero:before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.018) 0 1px,
      transparent 1px 5px
    ),
    linear-gradient(
      180deg,
      transparent 70%,
      rgba(0,0,0,.42)
    );
}

.lr59-hero:after{
  content:"NEUE TAGE. NEUE GEFAHREN. DEER ISLE.";

  position:absolute;

  right:30px;
  bottom:22px;

  max-width:250px;

  color:
    rgba(220,239,243,.68);

  font:
    italic 700 15px/1.45
    "Segoe Script",
    "Comic Sans MS",
    cursive;

  text-align:right;

  transform:
    rotate(-3deg);

  text-shadow:
    0 2px 10px #000;
}

.lr59-hero-copy{
  position:relative;
  z-index:2;

  width:min(850px,68%);

  padding:
    34px 36px;
}

.lr59-kicker{
  color:
    var(--lr59-green);

  font-size:11px;

  font-weight:900;

  letter-spacing:.22em;

  text-transform:uppercase;
}

.lr59-hero h1{
  margin:
    7px 0 9px;

  color:#fff;

  font-family:
    Impact,
    "Arial Narrow",
    sans-serif;

  font-size:
    clamp(
      40px,
      5.1vw,
      72px
    );

  line-height:.93;

  text-transform:uppercase;

  letter-spacing:.025em;

  text-shadow:
    0 4px 20px #000;
}

.lr59-hero-copy p{
  max-width:710px;

  color:#bed2d8;

  font-size:14px;
}

.lr59-hero-chips{
  display:flex;
  flex-wrap:wrap;

  gap:7px;

  margin-top:19px;
}

.lr59-chip{
  display:inline-flex;

  padding:
    6px 9px;

  border:
    1px solid rgba(71,190,227,.42);

  background:
    rgba(2,13,17,.79);

  color:#c4e9f3;

  font:
    800 9px/1.2
    monospace;

  letter-spacing:.06em;

  text-transform:uppercase;
}

/* ----------------------------------------------------------
   Five situation cards
   ---------------------------------------------------------- */

.lr59-status-row{
  display:grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0,1fr)
    );

  gap:7px;

  margin-top:7px;
}

.lr59-status-card{
  min-height:120px;

  padding:
    13px 13px 12px;

  border:
    1px solid
    rgba(30,101,126,.45);

  background:
    linear-gradient(
      180deg,
      rgba(7,19,24,.98),
      rgba(3,10,13,.98)
    );

  position:relative;

  overflow:hidden;
}

.lr59-status-card:before{
  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:3px;

  background:
    var(--accent,var(--lr59-blue));
}

.lr59-status-head{
  display:flex;

  align-items:center;

  gap:9px;

  margin-bottom:7px;
}

.lr59-status-icon{
  display:grid;

  place-items:center;

  width:35px;
  height:35px;

  flex:0 0 35px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent,var(--lr59-blue)) 60%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--accent,var(--lr59-blue)) 10%,
      transparent
    );

  color:
    var(--accent,var(--lr59-blue));

  font-size:19px;
}

.lr59-status-card small{
  display:block;

  color:
    #729aa8;

  font-size:
    9px;

  letter-spacing:.14em;

  font-weight:900;

  text-transform:uppercase;
}

.lr59-status-card strong{
  display:block;

  color:#f5fbfc;

  font-size:15px;

  line-height:1.18;
}

.lr59-status-card p{
  margin:0;

  color:
    #849ca5;

  font-size:11px;

  line-height:1.45;
}

/* ----------------------------------------------------------
   Main tactical area
   ---------------------------------------------------------- */

.lr59-main-grid{
  display:grid;

  grid-template-columns:
    1.38fr .82fr;

  gap:8px;

  margin-top:8px;
}

.lr59-panel{
  position:relative;

  overflow:hidden;

  border:
    1px solid
    rgba(27,104,133,.47);

  background:
    linear-gradient(
      180deg,
      rgba(7,17,22,.98),
      rgba(2,8,11,.99)
    );

  box-shadow:
    0 15px 38px
    rgba(0,0,0,.38);
}

.lr59-panel:before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:2px;

  background:
    linear-gradient(
      90deg,
      var(--lr59-cyan),
      var(--lr59-green),
      transparent 72%
    );

  opacity:.76;
}

.lr59-panel-title{
  display:flex;

  align-items:flex-start;

  justify-content:
    space-between;

  gap:12px;

  padding:
    13px 15px 10px;

  border-bottom:
    1px solid
    rgba(69,175,208,.15);
}

.lr59-panel-title h2,
.lr59-panel-title h3{
  margin:1px 0 0;

  color:#f4fbfc;

  font-family:
    "Arial Narrow",
    Impact,
    sans-serif;

  text-transform:uppercase;

  letter-spacing:.05em;
}

.lr59-map{
  min-height:470px;

  position:relative;

  background:#020709;
}

.lr59-map img{
  display:block;

  width:100%;

  height:470px;

  object-fit:cover;

  filter:
    brightness(.77)
    contrast(1.16)
    saturate(.86);

  opacity:.95;
}

.lr59-map-overlay{
  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 49px,
      rgba(66,201,238,.07)
      50px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 49px,
      rgba(66,201,238,.07)
      50px
    );
}

.lr59-map-legend{
  position:absolute;

  left:11px;
  top:11px;

  width:185px;

  padding:
    10px 11px;

  border:
    1px solid
    rgba(80,198,232,.35);

  background:
    rgba(0,8,11,.88);

  box-shadow:
    0 7px 25px
    rgba(0,0,0,.55);

  font-size:10px;
}

.lr59-map-legend b{
  display:block;

  margin-bottom:6px;

  color:#fff;

  text-transform:uppercase;

  letter-spacing:.08em;
}

.lr59-map-legend span{
  display:block;

  padding:2px 0;

  color:#83a8b4;
}

.lr59-dispatch-image{
  height:190px;

  border-bottom:
    1px solid
    rgba(67,166,198,.24);

  background:
    linear-gradient(
      rgba(1,8,10,.08),
      rgba(1,8,10,.25)
    ),
    url("assets-v59/dispatch-medical.svg")
    center / cover no-repeat;
}

.lr59-dispatch-body{
  padding:
    16px 17px 18px;
}

.lr59-dispatch-body h2{
  margin:
    0 0 8px;

  color:#fff;

  font-family:
    "Arial Narrow",
    Impact,
    sans-serif;

  text-transform:uppercase;
}

.lr59-dispatch-body p{
  margin:
    5px 0;

  color:#b9ccd2;

  font-size:13px;

  line-height:1.45;
}

.lr59-dispatch-body b{
  color:
    #f4fafb;
}

.lr59-reward{
  margin:
    14px 0 13px;

  padding:
    12px 13px;

  border:
    1px solid
    rgba(242,181,68,.42);

  background:
    rgba(242,181,68,.055);

  color:
    var(--lr59-amber);

  font-weight:800;
}

.lr59-primary{
  display:block;

  width:100%;

  padding:
    11px 14px;

  border:
    1px solid
    #34c9f4;

  background:
    linear-gradient(
      180deg,
      #0b9fd2,
      #067299
    );

  color:#fff;

  text-align:center;

  text-decoration:none;

  text-transform:uppercase;

  font-weight:900;

  letter-spacing:.05em;
}

/* ----------------------------------------------------------
   Bottom server cards
   ---------------------------------------------------------- */

.lr59-bottom-row{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:7px;

  margin-top:8px;
}

.lr59-bottom{
  min-height:96px;

  padding:
    13px 14px;

  border:
    1px solid
    rgba(33,105,132,.42);

  background:
    linear-gradient(
      180deg,
      rgba(8,20,24,.97),
      rgba(3,9,12,.98)
    );
}

.lr59-bottom small{
  display:block;

  color:#74a5b6;

  font-size:9px;

  font-weight:900;

  text-transform:uppercase;

  letter-spacing:.13em;
}

.lr59-bottom strong{
  display:block;

  margin:
    5px 0;

  color:#fff;

  font-size:14px;
}

.lr59-bottom span{
  color:#8da6ae;

  font-size:11px;

  line-height:1.4;
}

/* ----------------------------------------------------------
   Live ticker
   ---------------------------------------------------------- */

.lr59-ticker{
  display:flex;

  align-items:center;

  gap:16px;

  min-height:35px;

  margin-top:7px;

  padding:
    0 12px;

  overflow:hidden;

  border:
    1px solid
    rgba(29,100,127,.38);

  background:
    #02080a;

  color:#89a8b2;

  font-size:10px;

  white-space:nowrap;
}

.lr59-ticker-label{
  color:
    var(--lr59-amber);

  font-weight:900;

  letter-spacing:.1em;

  text-transform:uppercase;
}

.lr59-ticker span:not(.lr59-ticker-label):before{
  content:"●";

  margin-right:7px;

  color:
    var(--lr59-cyan);

  font-size:7px;
}

/* ==========================================================
   PLAYER PORTAL
   ========================================================== */

.lr59-portal-hero{
  min-height:244px;

  margin:
    16px 0 7px;

  display:flex;

  align-items:center;

  position:relative;

  overflow:hidden;

  border:
    1px solid
    rgba(42,133,165,.44);

  background:
    linear-gradient(
      90deg,
      rgba(1,7,9,.97) 0%,
      rgba(1,7,9,.78) 45%,
      rgba(1,7,9,.24)
    ),
    url("assets-v59/hero-panorama.svg")
    center / cover no-repeat;
}

.lr59-portal-hero:after{
  content:"CHARAKTERE MACHEN DIESE WELT. WIE MACHST DU DEINE?";

  position:absolute;

  right:24px;
  bottom:22px;

  width:235px;

  color:
    rgba(221,237,241,.7);

  text-align:right;

  font:
    italic 700 13px/1.4
    "Segoe Script",
    cursive;

  transform:
    rotate(-3deg);
}

.lr59-portal-hero-copy{
  position:relative;

  z-index:2;

  padding:
    30px 32px;

  width:min(720px,68%);
}

.lr59-portal-hero h1{
  margin:
    6px 0;

  font:
    700 clamp(36px,4.6vw,64px)/.94
    Impact,
    "Arial Narrow",
    sans-serif;

  text-transform:uppercase;

  color:#fff;
}

.lr59-survivor-shell{
  display:grid;

  grid-template-columns:
    .72fr 1.28fr;

  gap:8px;

  margin:
    8px 0 12px;
}

.lr59-survivor-card{
  min-height:440px;

  display:grid;

  grid-template-columns:
    165px 1fr;

  gap:14px;

  padding:14px;

  border:
    1px solid
    rgba(37,115,142,.43);

  background:
    linear-gradient(
      180deg,
      rgba(8,19,23,.98),
      rgba(3,9,12,.99)
    );
}

.lr59-survivor-portrait{
  min-height:330px;

  background:
    url("assets-v59/survivor-profile.svg")
    center top / cover no-repeat;

  border:
    1px solid
    rgba(62,153,184,.31);
}

.lr59-survivor-content{
  min-width:0;
}

.lr59-survivor-content #profile{
  margin:0!important;

  min-height:0!important;
}

.lr59-gear{
  padding:15px;

  border:
    1px solid
    rgba(37,115,142,.43);

  background:
    linear-gradient(
      180deg,
      rgba(8,19,23,.98),
      rgba(3,9,12,.99)
    );
}

.lr59-gear-grid{
  display:grid;

  grid-template-columns:
    repeat(6,1fr);

  gap:7px;

  margin-top:10px;
}

.lr59-slot{
  aspect-ratio:1;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(52,132,159,.34);

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(26,118,150,.12),
      rgba(2,8,10,.95)
    );

  color:
    #6d929e;

  font-size:21px;
}

.lr59-gear-note{
  margin-top:12px;

  color:#829ea7;

  font-size:11px;
}

.lr59-player-module-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:8px;
}

body.lurana-v59 .v59-player-module{
  margin:0!important;

  min-height:220px;
}

/* Existing functional modules receive game UI look */

body.lurana-v59 #profile,
body.lurana-v59 .v47-player-dispatch,
body.lurana-v59 .v48-company-wrap,
body.lurana-v59 .v49-player-story-wrap,
body.lurana-v59 .v46-player-event-wrap,
body.lurana-v59 #team-view,
body.lurana-v59 #team-community-list,
body.lurana-v59 #team-public-view,
body.lurana-v59 #health-view{
  border:
    1px solid
    rgba(32,108,136,.40)!important;

  border-radius:1px!important;

  background:
    linear-gradient(
      180deg,
      rgba(8,19,23,.98),
      rgba(3,9,12,.99)
    )!important;

  box-shadow:
    0 12px 32px
    rgba(0,0,0,.34)!important;
}

body.lurana-v59 article,
body.lurana-v59 .card,
body.lurana-v59 .notice,
body.lurana-v59 .tb-card{
  border-radius:1px!important;

  background:
    linear-gradient(
      180deg,
      rgba(8,19,23,.97),
      rgba(3,9,12,.99)
    )!important;

  border-color:
    rgba(31,109,138,.38)!important;
}

body.lurana-v59 button,
body.lurana-v59 .button,
body.lurana-v59 .action-btn,
body.lurana-v59 .portal-link{
  border-radius:1px!important;

  border:
    1px solid
    #168dc0!important;

  background:
    linear-gradient(
      180deg,
      #087fa9,
      #055a77
    )!important;

  color:#fff!important;

  font-weight:800!important;

  text-transform:uppercase!important;
}

body.lurana-v59 button:hover,
body.lurana-v59 .button:hover,
body.lurana-v59 .action-btn:hover,
body.lurana-v59 .portal-link:hover{
  background:
    linear-gradient(
      180deg,
      #0dadde,
      #087396
    )!important;

  border-color:
    #5ad8ff!important;
}

body.lurana-v59 input,
body.lurana-v59 textarea,
body.lurana-v59 select{
  border-radius:1px!important;

  border-color:
    #21576b!important;

  background:
    #02080a!important;

  color:
    #e6f3f6!important;
}

body.lurana-v59 .eyebrow,
body.lurana-v59 .lr56-kicker{
  color:
    var(--lr59-green)!important;
}

/* Hide old portal hero visually;
   functional content remains. */

body.lurana-v59.v59-portal-page > main > .hero{
  display:none!important;
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media(max-width:1150px){
  .lr59-status-row{
    grid-template-columns:
      repeat(3,1fr);
  }

  .lr59-main-grid{
    grid-template-columns:
      1fr;
  }

  .lr59-bottom-row{
    grid-template-columns:
      repeat(2,1fr);
  }

  .lr59-survivor-shell{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  .lr59-hero{
    min-height:330px;
  }

  .lr59-hero-copy,
  .lr59-portal-hero-copy{
    width:100%;

    padding:
      25px 19px;
  }

  .lr59-hero:after,
  .lr59-portal-hero:after{
    display:none;
  }

  .lr59-status-row{
    grid-template-columns:
      1fr 1fr;
  }

  .lr59-bottom-row{
    grid-template-columns:1fr;
  }

  .lr59-map,
  .lr59-map img{
    height:340px;
    min-height:340px;
  }

  .lr59-survivor-card{
    grid-template-columns:1fr;
  }

  .lr59-survivor-portrait{
    height:300px;
    min-height:300px;
  }

  .lr59-player-module-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:520px){
  .lr59-status-row{
    grid-template-columns:1fr;
  }

  .lr59-gear-grid{
    grid-template-columns:
      repeat(3,1fr);
  }
}