@font-face {
  font-family: "AstroSpace";
  src: url("AstroSpace-0Wl3o.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  font-family: Helvetica, Arial, Sans-Serif;
}

/* --- ADD CUSTOM SCROLLBAR HERE --- */
/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar { width: 25px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb {
  background: rgb(14, 110, 110);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: #0cc; }

/* Firefox , ... but also alters Chrome!!!???*/
html {
  scrollbar-color: rgb(14, 110, 110) #111;  /* thumb track */
  scrollbar-width: auto;
}
/* --- END CUSTOM SCROLLBAR --- */

.sheet-to-dpa {
  display: flex;
  height: 1035px;
}

.sheet-stack {
  position: relative;
  width: 800px;
  height: 1035px;
}

.full-sheet-container {
  position: relative;
  width: 800px;
  height: 1035px;
}

.condensed-character-sheet {
  width: 800px;
  height: 1035px;
  display: block;
}

.condensed-character-sheet img {
  width: 100%;
  height: 100%;
  display: block;
}

.name-container {
  z-index: 10;
  pointer-events: auto;
}

.name-container input,
.name-container select {
  background: transparent;
  border: none;
  color: #0ff;
  position: absolute;
}

.name-input {
  top: 22px;
  left: 295px;
  width: 140px;
}

.being-type-input {
  top: 22px;
  left: 548px;
  width: 136px;
}

.class-input {
  top: 45px;
  left: 295px;
  width: 189px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-left: 2px;
}

.class-input option {
  background-color: #000;  /* black menu background */
  color: #fff;             /* white text */
}

.level-input {
  top: 44px;
  left: 548px;
  width: 136px;
}

.lucky-card-1 {
  position: absolute;
  top: 109px;
  left: 234px;
  height: 47px;
  width: 30px;
  color: rgba(0, 255, 255, 0.45);
  background-color: transparent;
  border: solid;
  border-width: 1px;
  border-color: #0ff;
  text-align: center;
  line-height: 50px;
  font-size: 10px;
}

.lucky-card-2 {
  position: absolute;
  top: 109px;
  left: 270px;
  height: 47px;
  width: 30px;
  color: rgba(0, 255, 255, 0.45);
  background-color: transparent;
  border: solid;
  border-width: 1px;
  border-color: #0ff;
  text-align: center;
  line-height: 50px;
  font-size: 10px;
}

.lucky-card-3 {
  position: absolute;
  top: 109px;
  left: 307px;
  height: 47px;
  width: 30px;
  color: rgba(0, 255, 255, 0.45);
  background-color: transparent;
  border: solid;
  border-width: 1px;
  border-color: #0ff;
  text-align: center;
  line-height: 50px;
  font-size: 10px;
}

.lucky-card-4 {
  position: absolute;
  top: 109px;
  left: 344px;
  height: 47px;
  width: 30px;
  color: rgba(0, 255, 255, 0.45);
  background-color: transparent;
  border: solid;
  border-width: 1px;
  border-color: #0ff;
  text-align: center;
  line-height: 50px;
  font-size: 10px;
}

.lucky-card-5 {
  position: absolute;
  top: 109px;
  left: 380px;
  height: 47px;
  width: 30px;
  color: rgba(0, 255, 255, 0.45);
  background-color: transparent;
  border: solid;
  border-width: 1px;
  border-color: #0ff;
  text-align: center;
  line-height: 50px;
  font-size: 10px;
}

.lucky-face-card {
  position: absolute;
  top: 109px;
  left: 427px;
  height: 47px;
  width: 30px;
  color: rgba(0, 255, 255, 0.45);
  background-color: transparent;
  border: solid;
  border-width: 1px;
  border-color: #0ff;
  text-align: center;
  line-height: 50px;
  font-size: 10px;
}

.current-card-bonus {
  position: absolute;
  top: 96px;
  left: 470px;
  width: 77px;
  height: 77px;

  background: transparent;
  border: none;
  color: #fff;             
  font-size: 12px;
  font-family: inherit;

  padding: 2px 3px;         
  box-sizing: border-box;

  text-align: left;         
  resize: none;             
  overflow-y: auto;
  overflow-x: hidden;        
}

/* ============================
   LUCKY CARD PICKER
   ============================ */

/* Make all lucky card boxes behave like clickable slots */
.lucky-card-1,
.lucky-card-2,
.lucky-card-3,
.lucky-card-4,
.lucky-card-5,
.lucky-face-card {
  cursor: pointer;
  overflow: hidden; /* hide edges of the card image */
}

.lucky-card-has-image {
  color: transparent;

  /* ✅ Fallback that ALWAYS works */
  background-image: var(--lucky-card-thumb-webp);

  /* Preferred formats */
  background-image: image-set(
    var(--lucky-card-thumb-avif) type("image/avif"),
    var(--lucky-card-thumb-webp) type("image/webp")
  );

  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.lucky-card-has-image {
  color: transparent;

  /* ✅ Fallback that ALWAYS works */
  background-image: var(--lucky-card-thumb-webp);

  /* Preferred formats */
  background-image: image-set(
    var(--lucky-card-thumb-avif) type("image/avif"),
    var(--lucky-card-thumb-webp) type("image/webp")
  );

  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Overlay lives inside .full-sheet-container */
.card-picker-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 14000;                 /* above sheet and tooltips */
  pointer-events: none;           /* only panel is interactive */
}

.card-picker-overlay.hidden {
  display: none;
}

.card-picker-panel {
  position: absolute;
  width: 120px;
  max-height: 260px;
  background: rgba(0, 0, 0, 0.96);
  border: 1px solid #0ff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
  padding: 4px;
  box-sizing: border-box;
  overflow-y: auto;
  pointer-events: auto;           /* clickable area */
}

.card-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-picker-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

.card-picker-option img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
}

.card-picker-option:hover img {
  box-shadow: 0 0 8px #0ff;
}

.card-picker-label {
  font-size: 10px;
  color: #0ff;
  text-align: center;
}

.sheet-switch {
  position: absolute;
  width: 95px;
  height: 95px;
  top: 73px;
  border-radius: 50%;
  cursor: pointer;  
  z-index: 50;
  overflow: hidden;  /* Add this - masks image to circle */
}

.sheet-switch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;  /* Add this - prevents shifting */
  top: 0;              /* Add this - anchors to top */
  left: 0;             /* Add this - anchors to left */
}

.circle-left {  
  left: 564px;
}

.circle-right {  
  left: 676px;
}

/* Glow style for active sheet switch circle */
.sheet-switch.active-sheet {
  background: transparent;              /* center stays transparent */
  border: 3px solid #0ff;               /* glowing rim */
  box-shadow: 0 0 15px #0ff,            /* outer glow */
              0 0 10px #0ff,
              inset 0 0 8px #0ff;       /* faint inner rim glow */
  animation: pulse 4s infinite;
}

/* Token switch icons */
.token-switch-icon {
  position: absolute;
  width: 17px;
  height: 17px;
  top: 72px;
  cursor: pointer;
  z-index: 51;
  transition: transform 0.2s;
  display: block;  /* Add this line */
}

.token-switch-icon:hover {
  transform: scale(1.1);
}

.token-switch-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.token-switch-icon.character-icon {  
  left: 556px;
}

.token-switch-icon.ship-icon {  
  left: 668px;
}

.circle-radio {
  position: absolute;
  width: 15px;
  height: 15px;
  cursor: pointer;
  z-index: 10;
  opacity: 1;
  appearance: none;
  background: rgba(0, 255, 255, 0.25);
  border: 2px solid rgb(85, 175, 235);
  border-radius: 50%;
}

/* Checked state (still visible) */
.circle-radio:checked {
  background: rgba(255, 255, 255, 0.87);
  filter: drop-shadow(0 0 15px #0ff);
  animation: pulse 4s infinite;
}

@keyframes pulse {
  0%   { filter: drop-shadow(0 0 10px #0ff); }
  50%  { filter: drop-shadow(0 0 30px #0ff); }
  100% { filter: drop-shadow(0 0 10px #0ff); }
}

/* ---------------- POSITIONING ---------------- */

/* PHYSICAL (2 circles) */
.physical-radios .p1 { top: 219.7px; left: 30px; }
.physical-radios .p2 { top: 318.5px; left: 30px; }

/* ATHLETIC (2 circles) */
.athletic-radios .a1 { top: 418px; left: 30px; }
.athletic-radios .a2 { top: 515.7px; left: 30px; }

/* MENTAL (3 circles) */
.mental-radios .m1 { top: 614.8px; left: 30px; }
.mental-radios .m2 { top: 714px; left: 30px; }
.mental-radios .m3 { top: 813.2px; left: 30px; }

.primary-stat-scores {
  z-index: 10;
  pointer-events: auto;
}

.primary-stat-scores input {
  left: 52px;
  width: 45px;
  height: 46px;
  font-size: 40px;
  text-align: center;
  padding-left: 1px;
  background: transparent;
  border: none;
  color: #0ff;
  position: absolute;
}

.vitality-score-input { top: 204px; }
.endurance-score-input { top: 303px; }
.strength-score-input { top: 402px; }
.dexterity-score-input { top: 500.8px; }
.intelligence-score-input { top: 599.5px; }
.wisdom-score-input { top: 698.3px; }
.will-score-input { top: 798px; }
.luck-score-input { top: 897px; }

.primary-stat-tier {
  z-index: 10;
  pointer-events: auto;
}

.primary-stat-tier input {
  left: 105.5px;
  width: 5.3px;
  height: 7px;
  font-size: 8px;
  text-align: center;
  padding-left: 1.3px;
  background: transparent;
  border: none;
  color: #0ff;
  position: absolute;
}

.vitality-score-tier { top: 243px; }
.endurance-score-tier { top: 342.2px; }
.strength-score-tier { top: 441px; }
.dexterity-score-tier { top: 540.1px; }
.intelligence-score-tier { top: 639px; }
.wisdom-score-tier { top: 738.3px; }
.will-score-tier { top: 837px; }
.luck-score-tier { top: 936px; }

.primary-stat-die {
  z-index: 101;
  pointer-events: auto;
}

.primary-stat-die input {
  left: 96.4px;
  width: 16px;
  height: 10.8px;
  font-size: 9px;
  text-align: center;
  padding-left: 0px;
  background: transparent;
  border: none;
  color: yellow;
  position: absolute;
}

.vitality-score-die { top: 258px; }
.endurance-score-die { top: 357.2px; }
.strength-score-die { top: 456.1px; }
.dexterity-score-die { top: 554.7px; }
.intelligence-score-die { top: 653.7px; }
.wisdom-score-die { top: 752.5px; }
.will-score-die { top: 852px; }
.luck-score-die { top: 951px; }

.luck-pool {
  z-index: 102;
  pointer-events: auto;
}

.luck-pool input {
  top: 985px;
  width: 21px;
  height: 23px;
  font-size: 20px;
  text-align: center;
  background: transparent;
  border: none;
  color: #0ff;
  position: absolute;
}

.current-luck-die { left: 45px; }
.maximum-luck-die { left: 88px; }

.hp {
  z-index: 10;
  pointer-events: auto;
}

.hp-display {
  left: 130px;
  top: 198px;
  width: 31px;
  height: 19px;
  font-size: auto;
  text-align: center;
  padding-left: 1px;
  background: transparent;
  border: none;
  color: transparent;
  position: absolute;
  cursor: pointer;
}

.hp button:hover {
  border: solid;
  border-color: rgb(211, 35, 59, .7);
  border-radius: 4px;
  background-color: rgb(247, 240, 240, .2);
  filter: drop-shadow(0 0 15px rgb(197, 22, 51));
  animation: pulse 4s infinite;
}

.hp input {
  top: 190px;
  width: 56px;
  height: 23px;
  font-size: 20px;
  text-align: center;
  background: transparent;
  border: none;
  color: #0ff;
  position: absolute;
}

.current-hp { left: 165px; }
.maximum-hp { left: 250px; }

.os {
  z-index: 10;
  pointer-events: auto;
}

.os-display {
  left: 130px;
  top: 241px;
  width: 31px;
  height: 19px;
  font-size: auto;
  text-align: center;
  padding-left: 1px;
  background: transparent;
  border: none;
  color: transparent;
  position: absolute;
  cursor: pointer;
}

.os button:hover {
  border: solid;
  border-color: rgb(103, 134, 190, .7);
  border-radius: 4px;
  background-color: rgb(247, 240, 240, .2);
  filter: drop-shadow(0 0 15px rgb(56, 80, 219));
  animation: pulse 4s infinite;
}

.os input {
  top: 234px;
  width: 33px;
  height: 20px;
  font-size: 20px;
  text-align: center;
  background: transparent;
  border: none;
  color: #0ff;
  position: absolute;
}

.other-os { left: 162px; }
.current-os { left: 219px; }
.maximum-os { left: 278px; }

.passive-defense {
  z-index: 10;
  pointer-events: auto;
}

.passive-defense-display {
  left: 335px;
  top: 186px;
  width: 214px;
  height: 23px;
  font-size: auto;
  text-align: center;
  padding-left: 1px;
  background: transparent;
  border: none;
  color: transparent;
  position: absolute;
  cursor: pointer;
}

.passive-defense button:hover {
  background-color: rgb(247, 240, 240, .2);
  filter: drop-shadow(0 0 15px #0ff);
  animation: pulse 4s infinite;
}

.passive-defense input {
  top: 234px;
  width: 29px;
  height: 20px;
  font-size: 20px;
  text-align: center;
  background: transparent;
  border: none;
  color: #0ff;
  position: absolute;
}

.passive-defense input.passive-defense-stat {
  top: 211.5px;
  left: 474px;
  width: 68px;
  height: 15px;
  font-size: 14px;
}

.passive-defense-other { left: 339px; }
.passive-defense-armor { left: 396px; }
.passive-defense-stat-bonus { left: 454.5px; }
.passive-defense-total { left: 512px; }

/* CATAGORY ROLLS */
.category-rolls {
  z-index: 500;
}

.category-rolls button {
  left: 15.6px;
  width: 12px;
  font-size: auto;
  text-align: center;
  padding-left: 1px;
  background: transparent;
  border: solid;
  border-radius: 15px;
  color: transparent;
  position: absolute;
  cursor: pointer;
}

.category-rolls button:hover {
  background-color: rgb(247, 240, 240, .2);
  filter: drop-shadow(0 0 15px #0ff);
  animation: pulse 4s infinite;
}

.physical-roll { top: 236.5px; height: 87px; }
.athletic-roll { top: 435px; height: 86px; }
.mental-roll { top: 690px; height: 68px; }

.primary-stat-rolls {
  z-index: 500;
}

.primary-stat-rolls button {
  left: 41.5px;
  width: 75px;
  height: 16px;
  font-size: auto;
  text-align: center;
  padding-left: 1px;
  background: transparent;
  border: none;
  color: transparent;
  position: absolute;
  cursor: pointer;
}

.primary-stat-rolls button.luck-pool-roll {
  height: 14px;
}

.primary-stat-rolls button:hover {
  background-color: rgb(247, 240, 240, .2);
  filter: drop-shadow(0 0 15px #0ff);
  animation: pulse 4s infinite;
}

.vitality-roll { top: 185.3px; }
.endurance-roll { top: 284.5px; }
.strength-roll { top: 383.4px; }
.dexterity-roll { top: 482px; }
.intelligence-roll { top: 580.8px; }
.wisdom-roll { top: 679.7px; }
.will-roll { top: 779.3px; }
.luck-roll { top: 878.3px; }
.luck-pool-roll { top: 969.2px; }

.mod-die-rolls {
  z-index: 500;
}

.mod-die-rolls button {
  left: 41.5px;
  width: 75px;
  height: 20px;
  font-size: auto;
  text-align: center;
  padding-left: 1px;
  background: transparent;
  border: none;
  color: transparent;
  position: absolute;
  cursor: pointer;
}

.mod-die-rolls button:hover {
  background-color: rgb(247, 240, 240, .2);
  filter: drop-shadow(0 0 15px #0ff);
  animation: pulse 4s infinite;
}

.vitality-mod-die-roll { top: 254.4px; }
.endurance-mod-die-roll { top: 353.6px; }
.strength-mod-die-roll { top: 452.5px; }
.dexterity-mod-die-roll { top: 551px; }
.intelligence-mod-die-roll { top: 649.8px; }
.wisdom-mod-die-roll { top: 748.5px; }
.will-mod-die-roll { top: 848.4px; }
.luck-mod-die-roll { top: 947.5px; }

.mod-die-tier {
  z-index: 500;
}

.mod-die-tier button {
  padding: 0;
  margin: 0;
  left: 103.3px;
  width: 12px;
  height: 52px;
  font-size: auto;
  text-align: center;
  background: transparent;
  border: none;
  color: transparent;
  position: absolute;
  cursor: pointer;
}

.mod-die-tier button:hover {
  background-color: rgb(247, 240, 240, .2);
  filter: drop-shadow(0 0 15px #0ff);
  animation: pulse 4s infinite;
}

.vitality-mod-die-tier { top: 201.8px; }
.endurance-mod-die-tier { top: 301px; }
.strength-mod-die-tier { top: 399.8px; }
.dexterity-mod-die-tier { top: 498.4px; }
.intelligence-mod-die-tier { top: 597.2px; }
.wisdom-mod-die-tier { top: 696px; }
.will-mod-die-tier { top: 795.8px; }
.luck-mod-die-tier { top: 894.8px; }

.roll-popup {
  position: absolute;
  background: rgba(0, 255, 255, 0.95);
  color: #000;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 14px;
  pointer-events: none;
  z-index: 10000;
  white-space: nowrap;
  box-shadow: 0 0 10px #0ff;
  filter: drop-shadow(0 0 10px #0ff);
  animation: popup-fade 2s forwards;
}

@keyframes popup-fade {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}

/* ============================
   STAT-KEY HOTSPOT + TOOLTIP
   ============================ */

.stat-key {
  position: absolute;
  top: 40px;
  left: 27px;
  height: 110px;
  width: 110px;
  border-radius: 70px;
  background-color: transparent;
  transition: background-color 0.3s, filter 0.3s;
  z-index: 12000;   /* hotspot above sheet layers */
}

/* Hover glow */
.stat-key:hover {
  background-color: rgba(11, 159, 204, 0.07);
  filter: drop-shadow(0 0 15px rgb(10, 149, 214));
  animation: pulse 4s infinite;
}

/* Floating tooltip DIV (inside the sheet container) */
.stat-key-tooltip {
  position: absolute;     /* will be appended inside .full-sheet-container */
  top: 0;
  left: 0;

  display: inline-block;
  padding: 12px 14px;
  max-width: 260px;

  color: #0ff;
  font-size: 13px;
  line-height: 1.25em;
  white-space: normal;

  background: rgba(0, 0, 0, 0.95);
  border: 1px solid #0ff;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.9);

  max-height: 330px;
  overflow-y: auto;
  overflow-x: hidden;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s linear;

  /* Above Cybernetics, Held, class select, etc. */
  z-index: 9000;
}

.stat-key-tooltip.visible {
  opacity: 1;
  pointer-events: auto;
}

.roll-buttons {
  z-index: 500;
}

.roll-buttons button {
  font-size: auto;
  text-align: center;
  padding-left: 1px;
  background: transparent;
  border: none;
  color: transparent;
  position: absolute;
  cursor: pointer;
}

.roll-buttons button:hover {
  background-color: rgba(247, 240, 240, 0.14); /* softer */
  border-radius: 6px;                           /* smooth edges */
  filter: drop-shadow(0 0 12px #0ff);           /* softer glow */
  animation: pulse 4s infinite;
}

.d2-roll { top: 28px; left: 167px; width: 35px; height: 16px; }
.d4-roll { top: 49px; left: 167px; width: 34px; height: 14px; }
.d6-roll { top: 70px; left: 167px; width: 34px; height: 15px; }
.d8-roll { top: 90px; left: 167px; width: 35px; height: 16px; }
.d10-roll { top: 111px; left: 167px; width: 36px; height: 15px; }
.d12-roll { top: 130px; left: 167px; width: 35px; height: 17px; }
.d20-roll { top: 152px; left: 167px; width: 35px; height: 16px; }

.d10s-roll { top: 111px; left: 146px; width: 17px; height: 15px; }
.d100-roll { top: 126px; left: 146px; width: 17px; height: 41px; }

/* =======================
   RAW DICE MULTI-ROLL PANEL
   ======================= */

.roll-multi-panel {
  position: absolute;
  top: 0;
  left: 0;

  /* Stack header on top, buttons row under it */
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 6px;

  background: rgba(0, 0, 0, 0.95);
  border: 1px solid #0ff;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.9);

  font-size: 11px;
  line-height: 1;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s linear;

  /* Above the sheet content, like the stat-key tooltip */
  z-index: 9000;
}

.roll-multi-panel-header {
  width: 100%;
  text-align: left;
  margin-bottom: 0px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.3);
  color: #0ff;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
}
.roll-multi-panel-buttons {
  display: flex;
  gap: 4px;
}


.roll-multi-panel.visible {
  opacity: 1;
  pointer-events: auto;
}

.roll-multi-panel button {
  min-width: 18px;
  padding: 2px 4px;
  background: transparent;
  border-radius: 4px;
  border: 1px solid #0ff;
  color: #0ff;
  cursor: pointer;
  font-size: 11px;
}

.roll-multi-panel button:hover {
  background-color: rgba(247, 240, 240, 0.14);
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
}

.skill-tree-container{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.skill-tree-frame{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ===============================
   SKILL TREE INTEGRATION SCOPING
   (Not currently used - kept for future DOM integration)
   =============================== */

/* .skilltree-root would be used if we switch from iframe to DOM injection */
.skilltree-root {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Scoping wrapper - ensures tree fills its container */
.skilltree-scope {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden; /* stage will own the scrolling */
}

/* Override any sheet styles that might leak into tree */
.skilltree-scope * {
  box-sizing: border-box;
}