/* SHIP SHEET BASE */

.ship-sheet-container {
  position: relative;     /* so absolutely-positioned overlays anchor here */
  width: 800px;
  height: 1035px;
}

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

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

.primary-glow {
  position: absolute;
  width: 15px;
  height: 15px;
  cursor: pointer;
  z-index: 10;
  opacity: 1;
  appearance: none;
  background: rgba(255, 255, 255, 0.87);
  border: 2px solid rgb(85, 175, 235);
  border-radius: 50%;
  top: 219.7px; left: 30px;
  filter: drop-shadow(0 0 15px #0ff);
  animation: pulse 4s infinite;
}

/* STAT SCORES (PRIMARY + STR/DEX/INT/WIS/WILL/LUCK) */

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

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

.ship-name-input {
  top: 22px;
  left: 350px;
  width: 99px;
}

.ship-type-input {
  top: 22px;
  left: 553px;
  width: 131px;
}

.ship-class-input {
  top: 45px;
  left: 350px;
  width: 129px;  
}

.ship-grade-input {
  top: 44px;
  left: 553px;
  width: 131px;
}

.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;        
}

.ship-stat-scores {
  z-index: 10;
  pointer-events: none;   /* read-only mirror; change later if you want editing */
}

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

/* Using *identical* tops to the character sheet, mapped by name */

/* PRIMARY uses Vitality position */
.ship-primary-score-input      { top: 204px; }

/* Strength, Dex, Int, Wis, Will, Luck use their character positions */
.ship-strength-score-input     { top: 402px; }
.ship-dexterity-score-input    { top: 500.8px; }
.ship-intelligence-score-input { top: 599.5px; }
.ship-wisdom-score-input       { top: 698.3px; }
.ship-will-score-input         { top: 798px; }
.ship-luck-score-input         { top: 897px; }

/* TIERS */

.ship-stat-tier {
  z-index: 10;
  pointer-events: none;
}

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

/* PRIMARY uses Vitality-tier position */
.ship-primary-score-tier       { top: 243px; }

/* Strength, Dex, Int, Wis, Will, Luck use same tops as character sheet */
.ship-strength-score-tier      { top: 441px; }
.ship-dexterity-score-tier     { top: 540.1px; }
.ship-intelligence-score-tier  { top: 639px; }
.ship-wisdom-score-tier        { top: 738.3px; }
.ship-will-score-tier          { top: 837px; }
.ship-luck-score-tier          { top: 936px; }

/* MOD DIE (D4/D6/D8/etc) */

.ship-stat-die {
  z-index: 101;
  pointer-events: none;
}

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

/* PRIMARY uses Vitality-die position */
.ship-primary-score-die        { top: 258px; }

/* Strength, Dex, Int, Wis, Will, Luck same as character sheet */
.ship-strength-score-die       { top: 456.1px; }
.ship-dexterity-score-die      { top: 554.7px; }
.ship-intelligence-score-die   { top: 653.7px; }
.ship-wisdom-score-die         { top: 752.5px; }
.ship-will-score-die           { top: 852px; }
.ship-luck-score-die           { top: 951px; }

/* LUCK POOL UNDER STAT COLUMN */

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

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

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

/* CATEGORY ROLLS (only the ones in your red strip) */

.ship-category-rolls {
  z-index: 500;
}

/* same style as .category-rolls button on character sheet */
.ship-category-rolls button {
  position: absolute;
  left: 15.6px;
  width: 12px;
  font-size: auto;
  text-align: center;
  padding-left: 1px;
  background: transparent;
  border: solid;
  border-radius: 15px;
  color: transparent;
  cursor: pointer;
}

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

/* Athletic & Mental use same tops as character sheet */
.ship-athletic-roll { top: 435px; height: 86px; }
.ship-mental-roll   { top: 690px; height: 68px; }

/* PRIMARY + STAT ROLL BUTTONS */

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

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

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

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

/* Using the same tops by stat name */
.ship-primary-roll      { top: 185.3px; }  /* Vitality row on char sheet */
.ship-strength-roll     { top: 383.4px; }
.ship-dexterity-roll    { top: 482px; }
.ship-intelligence-roll { top: 580.8px; }
.ship-wisdom-roll       { top: 679.7px; }
.ship-will-roll         { top: 779.3px; }
.ship-luck-roll         { top: 878.3px; }
.ship-luck-pool-roll    { top: 969.2px; }

/* MOD DIE-ONLY ROLL BUTTONS */

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

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

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

/* Again, same tops as their character-sheet cousins */
.ship-primary-mod-die-roll     { top: 254.4px; }  /* vitality row */
.ship-strength-mod-die-roll    { top: 452.5px; }
.ship-dexterity-mod-die-roll   { top: 551px; }
.ship-intelligence-mod-die-roll{ top: 649.8px; }
.ship-wisdom-mod-die-roll      { top: 748.5px; }
.ship-will-mod-die-roll        { top: 848.4px; }
.ship-luck-mod-die-roll        { top: 947.5px; }

/* TIER BUTTON STRIP */

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

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

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

/* Same tops as the character mod-die-tier strip */
.ship-primary-mod-die-tier     { top: 201.8px; }  /* vitality band */
.ship-strength-mod-die-tier    { top: 399.8px; }
.ship-dexterity-mod-die-tier   { top: 498.4px; }
.ship-intelligence-mod-die-tier{ top: 597.2px; }
.ship-wisdom-mod-die-tier      { top: 696px; }
.ship-will-mod-die-tier        { top: 795.8px; }
.ship-luck-mod-die-tier        { top: 894.8px; }

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

.ship-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;
}

.ship-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;
}

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

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

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

.ship-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;
}

.ship-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;
}

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

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

/* ACTIVE DEFENSE */
.ship-passive-defense {
  z-index: 10;
  pointer-events: auto;
}

.ship-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;
}

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

.ship-passive-defense input {
  top: 214px;
  height: 39px;
  padding-top: 2px;
  font-size: 20px;
  text-align: center;
  background: transparent;
  border: none;
  color: #0ff;
  position: absolute;
}

.ship-passive-other { left: 341px; width: 43px; }
.ship-passive-armor { left: 424px; width: 40px; }
.ship-passive-total { left: 504px; width: 34px; }

/* ACTIVE DEFENSE */
.ariel-maneuver {
  z-index: 10;
  pointer-events: auto;
}

.ariel-maneuver-display {
  left: 561px;
  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;
}

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

.ariel-maneuver input {
  top: 214px;
  height: 39px;
  padding-top: 2px;
  font-size: 20px;
  text-align: center;
  background: transparent;
  border: none;
  color: #0ff;
  position: absolute;
}

.prime-stat-ariel { left: 568px; width: 53px; }
.boost-ariel { left: 658px; width: 25px; }
.ship-max-ariel { left: 721px; width: 43px; }

.ariel-maneuver-use {
  left: 561px;
  top: 210px;
  width: 214px;
  height: 49px;
  font-size: auto;
  text-align: center;
  padding-left: 1px;
  background: transparent;
  border: none;
  color: transparent;
  position: absolute;
  cursor: pointer;
  z-index: 50;
}

.ship-movement input {
  top: 551px;  
  height: 12px;
  padding-top: 3px;
  font-size: 12px;
  text-align: center;
  background: transparent;
  border: none;
  color: #0ff;
  position: absolute;
  z-index: 50;
  pointer-events: auto;
}

.ship-movement-base { left: 128px; width: 52px; }
.ship-movement-bonus { left: 190px; width: 59px; }
.ship-movement-total { left: 259px; width: 57px; }