:root{
  --bg: #070a12;
  --panel: rgba(15, 18, 30, 0.72);
  --panel2: rgba(10, 12, 20, 0.55);
  --border: rgba(255,255,255,0.14);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);
  --shadow: 0 18px 60px rgba(0,0,0,0.55);
  --radius: 18px;
}
html, body {
  background-color: #05070d !important;
  color: var(--text);
}

/* Main layout */
body {
  background: var(--bg-main);
  color: var(--text-main);
}
.card{
  border-radius: var(--radius);
  border: 1px solid var(--border);

  background: linear-gradient(
    180deg,
    rgba(15, 18, 30, 0.60),
    rgba(10, 12, 20, 0.45)
  );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 18px 60px rgba(0,0,0,0.45);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: var(--text);
}


/* Stats / traits panels */
#mainContent td {
  background: var(--bg-panel);
}


font { FONT-FAMILY: Verdana,Helvetica; color:#336380 }
body         { FONT-FAMILY: Helvetica, Tahoma; color: #FFDBDE; font-size: 11px; background-color:#DEA6A5; }
td           { FONT-FAMILY: Helvetica, Tahoma; color: #FFDBDE; font-size: 11px; background-color: #8b5555; border: inset 1px #FFDBDE;}
a            { FONT-FAMILY: Helvetica, Tahoma; color: #FFB9BC; font-size: 11px; text-decoration:none;}
a:hover      { FONT-FAMILY: Helvetica, Tahoma; color: #ffffff; font-size: 11px; text-decoration:none;}
.navhead         { display: block; padding-left: 4px; padding-right: 4px; border: 1px solid #521410; background: url(images/banner.gif); color: #000; font-weight: bold; text-align: center;}
.contenthead         { display: block; padding-left: 4px; padding-right: 4px; border: 1px solid #521410; background: url(images/titlearea.bmp); color: #000; font-weight: bold; text-align: left;}
      ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; float: left; } 
      ul#tabs li a { color: #42454a; background-color: #dedbde; padding: 0.3em; text-decoration: none; }
      ul#tabs li a:hover { background-color: #f1f0ee; }
      ul#tabs li a.selected { color: #000; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
      div.tabContent { width: 600px; padding: 0.5em; }
      div.tabContent.hide { display: none; }
	  .xstooltip 
{
    visibility: hidden; 
    position: absolute; 
    top: 0;  
    left: 0; 	
    z-index: 2; 
    font: normal 8pt sans-serif; 
    padding: 6px; 
    border: solid 1px;
    background-color: #CD3333;
	width: 250px;
}
 .xstooltip2
{
    position: absolute; 
    top: 0;  
    left: 0; 	
    z-index: 2; 
    font: normal 8pt sans-serif; 
    padding: 6px; 
    border: solid 1px;
    background-color: #CD3333; 
}

/* ===============================
   Lakebane Modal (Training Help)
   =============================== */
.lb-modal-overlay{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: none; /* toggled to flex by JS */
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0,0,0,0.65);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.lb-modal{
	width: min(680px, 96vw);
	max-height: 90vh;
	overflow: auto;
	border-radius: 18px;
	border: 1px solid rgba(255,255,255,0.18);
	background: linear-gradient(180deg, rgba(15,18,30,0.94), rgba(10,12,20,0.90));
	box-shadow: 0 18px 60px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(255,255,255,0.06);
	color: rgba(255,255,255,0.92);
}

.lb-modal-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(255,255,255,0.10);
}

.lb-modal-header h2{
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.lb-modal-close{
	appearance: none;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(255,255,255,0.06);
	color: rgba(255,255,255,0.92);
	border-radius: 12px;
	width: 34px;
	height: 34px;
	line-height: 30px;
	font-size: 22px;
	cursor: pointer;
}

.lb-modal-close:hover{
	background: rgba(255,255,255,0.10);
}

.lb-modal-body{
	padding: 14px 16px 4px 16px;
	font-size: 12px;
	color: rgba(255,255,255,0.86);
}

.lb-modal-body ul{
	margin: 0;
	padding-left: 18px;
}

.lb-modal-body li{
	margin: 0 0 10px 0;
}

.lb-modal-footer{
	display: flex;
	justify-content: flex-end;
	padding: 10px 16px 16px 16px;
}

.lb-modal-primary{
	appearance: none;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.92);
	border-radius: 14px;
	padding: 10px 14px;
	cursor: pointer;
	font-weight: 700;
}

.lb-modal-primary:hover{
	background: rgba(255,255,255,0.12);
}

.invisbox {
	opacity: 0.4;
	filter: alpha(opacity=40);
}

.skillcap {
	color: #ffac00;
	font-weight:bold;
}

#mainContent {
	text-align: center;
	margin: 0;
	border: solid 1px black;
}

.center {
	text-align: center;
}
/* --- Lakebane tooltip theme override --- */
.xstooltip,
.xstooltip2 {
  background: rgba(0,0,0,0.80) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45) !important;
  max-width: 360px;
}

/* Make the title pop a bit (optional) */
.xstooltip b,
.xstooltip2 b {
  color: #fff !important;
}

/* If tooltip content uses <p> or <br> heavily, tighten line-height */
.xstooltip,
.xstooltip2 {
  line-height: 1.35;
  font-size: 14px;
}

/* Active category pill */
#tabs a.active {
  background: rgba(205,51,51,0.95);
  color: #111;
}
/* Buttons (+ / - / Max / Min / Reset / etc) */
button,
input[type="button"] {
  background: var(--btn-primary) !important;
  color: var(--btn-primary-text) !important;
  border: 1px solid rgba(255,255,255,0.2);
}

/* Stat buttons spacing polish */
button.Strength,
button.Dexterity,
button.Constitution,
button.Intelligence,
button.Spirit {
  border-radius: 10px;
}

/* Active category pill */
#tabs a.active {
  background: var(--bg-pill-active) !important;
  color: var(--btn-primary-text) !important;
}

/* Inactive pills */
#tabs a {
  background: var(--bg-pill) !important;
  color: var(--text-main) !important;
}
html, body {
  background: #141214 !important;   /* deep neutral */
  color: var(--text-main);
}

.wrap {
  background: transparent !important;
}

.card {
  background: rgba(20, 18, 20, 0.92) !important; /* darker card */
}

#mainContent td,
#mainContent table td,
#mainContent table th {
  background: rgba(35, 30, 33, 0.92) !important; /* remove pink bleed */
}
#mainContent table,
#mainContent td,
#mainContent th {
  background: var(--panel2) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
button,
input[type="button"] {
  background: rgba(255,255,255,0.10) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
}

button:hover {
  background: rgba(255,255,255,0.16) !important;
}
/* ===============================
   Stat control button fixes
   (+ / - / Max / Min)
   =============================== */

#mainContent button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  line-height: 1;
  font-weight: 600;

  padding: 0;
  margin: 2px;

  border-radius: 10px;
  white-space: nowrap;
}

/* + and - buttons */
#mainContent button[value="+"],
#mainContent button[value="-"] {
  width: 28px;
  height: 28px;
  font-size: 16px;
}

/* Max / Min buttons */
#mainContent button[value="Max"],
#mainContent button[value="Min"] {
  width: 44px;
  height: 28px;
  font-size: 12px;
}
/* Hide all trait/rune panels until JS picks one */
#traitTabs > div,
#mainContent td[align="right"] .tabContent {
  display: none;
}

/* =========================================
   Fix Statistical Runes heading spacing
   (prevents last item shifting left)
   ========================================= */

/* Only affect the Level 75 statistical rune tabs */
#strength75Tab h2,
#dexterity75Tab h2,
#constitution75Tab h2,
#intelligence75Tab h2,
#spirit75Tab h2,
#discipline75Tab h2,
#disciplines75Tab h2 {
  margin: 0 0 10px 0 !important;   /* kill big default h2 margins */
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* Also normalize the list container directly under the heading */
#strength75Tab > div,
#dexterity75Tab > div,
#constitution75Tab > div,
#intelligence75Tab > div,
#spirit75Tab > div,
#discipline75Tab > div,
#disciplines75Tab > div {
  margin-top: 0 !important;
}


/* Power picker (mobile): ensure text is readable inside the powers tooltip */
#powers_div { color: #fff; font: normal 12pt sans-serif; }
#powers_div select { color: #fff; }
#powers_div option { color: #111; }

/* ===============================
   Mobile fixes: Add Power popup + tiny power inputs
   =============================== */

/* 1) Make the Add Power list readable on mobile */
#powers_div,
#powers_div * { 
  color: rgba(255,255,255,0.92) !important;
}

#powers_div select {
  background: rgba(0,0,0,0.55) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}

/* iOS/Android: force option colors (otherwise you get dark-on-dark and it looks blank) */
#powers_div option {
  background: #111 !important;
  color: #fff !important;
}

/* 2) Make rank/max/bonus inputs usable on mobile */
@media (max-width: 700px) {
  #powerTable input[id^="powerrank"],
  #powerTable input[id^="powermax"],
  #powerTable input[id^="powerbonus"] {
    width: 2.6em !important;
    min-width: 2.6em !important;
    font-size: 16px !important;
    padding: 6px 6px !important;
    text-align: center !important;
  }

  /* Optional: slightly enlarge the power name fields too */
  #powerTable input[id^="powername"] {
    font-size: 15px !important;
    padding: 7px 10px !important;
  }
}

/* ===============================
   iOS (Chrome/Safari) select rendering nudge
   - Some iOS WebKit builds ignore option color in listbox-style selects.
   - Force text fill color explicitly.
   =============================== */
#powers_div select,
#powers_div option {
  -webkit-text-fill-color: rgba(255,255,255,0.92) !important;
}

/* Make the Add Power listbox a bit more legible on phones */
@media (max-width: 700px) {
  #powers_div select {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }
}


/* ===============================
   Mobile fixes (iOS/Android): power table rank cells can clip "40" -> show "4"
   Keep desktop unchanged.
   =============================== */
@media (max-width: 700px) {
  #powerTable td { white-space: nowrap; }
  /* Rank cells (2nd and 6th columns) need room for: rank input + slash + max input */
  #powerTable tr td:nth-child(2),
  #powerTable tr td:nth-child(6) {
    min-width: 7.8em !important;
  }
  /* Bonus cells (3rd and 7th columns) */
  #powerTable tr td:nth-child(3),
  #powerTable tr td:nth-child(7) {
    min-width: 3.2em !important;
  }
}