@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@700&family=Dosis:wght@300&display=swap');

:root {
  --color-dark: #405fa5;
  --color-light: #dae1f1;
  --fade-begin: 1px;
  --fade-end: 5px;
  --clock-gradient-filled:var(--color-dark);
  --clock-gradient-empty-start-odd: var(--color-dark);
  --clock-gradient-empty-end-odd: var(--color-light);
  --clock-gradient-empty-start-even: var(--color-dark);
  --clock-gradient-empty-end-even: var(--color-light);
}
.sheets-wrapper {
  width: 750px;
}

.character-tab,
.band-tab,
.revolution-tab,
.npc-tab {
  display: none;
  width: 100%;
}

.sheet-toggle[value="character"] ~ .character-tab {
  display:block;
}

.sheet-toggle[value="band"] ~ .band-tab {
  display:block;
}

.sheet-toggle[value="revolution"] ~ .revolution-tab {
  display:block;
}
.sheet-toggle[value="npcs"] ~ .npc-tab {
  display:block;
}

.header-section {
  display: grid;
  grid-template-columns: repeat(2, 365px);
  column-gap: 20px;
  grid-template-rows: 150px;
  height:200px;
  margin-bottom: 1em;
  background-image: url(https://raw.githubusercontent.com/richranallo/vg-charactersheet/ec2a05d8c12e775855bcd3c9a860430d2a93b5d2/img/right-block.svg);
  background-repeat: no-repeat;
  background-width: cover;
}
.logo-cell {
  grid-template-columns: 1;
  grid-template-rows: 1;
  z-index: 200;
}
.logo-cell img {
}
.sheet-type-cell {
  grid-template-columns: 2;
  grid-template-rows: 1;
  align-self: end;
  padding-left: 5em;
}
.sheet-type-cell h2 select {
  color: white;
}

.character-section {
  display: grid;
  justify-content: center;
  margin: auto;
  grid-template-columns: repeat(2, 365px);
  column-gap: 20px;
  grid-template-areas:
    "logo-cell      sheet-type-cell"
    "names          fame"
    "action-scores  descent"
    "action-scores  roles"
    "relationships  instruments"
    "relationships  genre"
    "solos          riffs"
    "injury         injury"
    "notes          gear"
    "mojo           mojo"
  }
.names-cell {
  grid-area: names;
  padding-top: 1em;
}
.descent-cell {
  grid-area: descent;
  padding-top: 1em;
}
.roles-cell {
  grid-area: roles;
  padding-top: 1em;
}
.fame-cell {
  grid-area: fame;
  padding-top: 1em;
}
.solos-cell {
  grid-area: solos;
  padding-top: 1em;
}
.riffs-cell {
  grid-area: riffs;
  padding-top: 1em;
}
.relationships-cell {
  grid-area: relationships;
  padding-top: 1em;
}
.genre-cell {
  grid-area: genre;
  padding-top: 1em;
}
.instruments-cell {
  grid-area: instruments;
  padding-top: 1em;
}
.action-score-cell {
  grid-area: action-scores;
  padding-top: 1em;
}
.stress-violence-cell {
  grid-area: injury;
  padding-top: 1em;
}
.notes-cell {
  grid-area: notes;
}
.gear-cell {
  grid-area: gear;
}
.mojo-cell {
  grid-area: mojo;
}
.descent-indicator[value="starchild" i] ~ .action-score-cell .action-grid .mojo {
  display: block;
}

.active-drop-target {
  background-color: aliceblue;
}

.band-section {
  display: grid;
  justify-content: center;
  margin: auto;
  column-gap: 20px;
  grid-template-columns: repeat(2, 365px);
  grid-template-areas:
    "band-name            band-fame"
    "band-genre           band-heat"
    "band-scene           band-faction-status"
    "band-sister-cells    band-connections"
    "band-assets          band-assets"
    "band-discography     band-discography"
    ;
}
.band-name {
  grid-area: band-name;
  padding-top: 1em;
}
.band-fame {
  grid-area: band-fame;
  padding-top: 1em;
}
.band-heat {
  grid-area: band-heat;
  padding-top: 1em;
}
.band-genre {
  grid-area: band-genre;
  padding-top: 1em;
}
.band-scene {
  grid-area: band-scene;
}
.band-faction-status {
  grid-area: band-faction-status;
}
.band-sister-cells {
  grid-area: band-sister-cells;
}
.band-connections {
  grid-area: band-connections;
}
.band-assets {
  grid-area: band-assets;
}
.band-discography {
  grid-area: band-discography;
}

.revolution-strategies {
  display: grid;
  row-gap: 20px;
  justify-content: center;
  grid-template-columns: repeat(5, 150px);
  grid-template-rows: repeat(4, auto) repeat(5, 5em) auto repeat(2, 3em);
}
.revolution-section .revolution-strategies .alienation {
  grid-column: 1;
  text-align: center;
  padding-left:5px;
  padding-right: 5px;
}
.revolution-section .revolution-strategies .propaganda {
  grid-column: 2;
  text-align: center;
  padding-left:5px;
  padding-right: 5px;
}
.revolution-section .revolution-strategies .surveillance {
  grid-column: 3;
  text-align: center;
  padding-left:5px;
  padding-right: 5px;
}
.revolution-section .revolution-strategies .subversion {
  grid-column: 4;
  text-align: center;
  padding-left:5px;
  padding-right: 5px;
}
.revolution-section .revolution-strategies .violence {
  grid-column: 5;
  text-align: center;
  padding-left:5px;
  padding-right: 5px;
}
.revolution-section .revolution-strategies .band-name {
  grid-column: 1 / span 3;
  grid-row: 1;
  padding-right: 20px;
}
.revolution-section .revolution-strategies .band-heat {
  grid-column: 4 / span 2;
  grid-row: 1;
  vertical-align: top;
  box-align: top;
}
.revolution-section .revolution-strategies .strategies-title {
  grid-row: 3;
  grid-column: 1 / span 5;
}
.revolution-section .revolution-strategies .title {
  grid-row: 4;
}
.revolution-section .revolution-strategies .width2 {
  grid-row: 5;
}
.revolution-section .revolution-strategies .width3 {
  grid-row: 6;
}
.revolution-section .revolution-strategies .width4 {
  grid-row: 7;
}
.revolution-section .revolution-strategies .width5 {
  grid-row: 8;
}
.revolution-section .revolution-strategies .width6 {
  grid-row: 9;
}
.revolution-section .revolution-strategies .praxis-title {
  grid-row: 10;
  grid-column: 1 / span 5;
}
.revolution-section .revolution-strategies .velvet {
  grid-row: 11;
}
.revolution-section .revolution-strategies .cobalt-army {
  grid-row: 12;
}

.centerer {  
  display: flex;
  justify-content: center;
  align-items: center;
}

.stress-header {
  grid-row: 1;
  grid-column: 1;
}
.injury-header {
  grid-row: 1;
  grid-column: 2;
}
.injury-limit {
  grid-row: 1;
  grid-column: 3;
}
.rough-label {
  grid-row: 3;
  grid-column: 2;
  text-align: center;
}
.bloody-label {
  grid-row: 3;
  grid-column: 3;
  text-align: center;
}
.deadly-label {
  grid-row: 3;
  grid-column: 4;
  text-align: center;
}

.ui-dialog .charsheet .action-grid input[type="number"].score {
  width: 2em;
  text-align: center;
}

body, p {
  font-family: 'Dosis', sans-serif;
  font-size: : 16px;
  line-height: 1.42857143;
  color: var(--color-dark);
}

h1, h2, h3, h4, h5, h6  {
  font-family: 'Exo 2',sans-serif;
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-dark);
}

h2 {
/*  background-image: url("https://raw.githubusercontent.com/richranallo/vg-charactersheet/31ade31e5d350025339cf1d5dc236d03f3ab52b5/img/swipe-pink.svg");*/
  background-repeat: no-repeat;
  background-size: 100%;
  background-opacity: .1;
  z-index: -1;
}

label {
  color:inherit;
}

input[type=text], input[type=number], select, textarea {
  padding: 5px;
  margin:3px;
  border: 0;
  background-color: white;
  box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
  border-radius: 5px;
  font-family: inherit;
  font-size: : inherit;
  color: var(--color-dark);
}

input[type=text].full {
  width: 100%;
  color: var(--color-dark);
}

select.full {
  width: 100%;
  color: var(--color-dark);
}

input[type="checkbox"].bubble,  input[type="radio"].bubble{
  width: 1.5em;
  height: 1em;
  background-color: white;
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid var(--color-dark);
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  margin:0;
}

input[type="checkbox"]:checked {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

input[type="radio"]:checked {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

textarea.full {
  height: 3em;
  width:98%;
}

.header-section select {
  background-color: transparent;
  box-shadow: none;
  color: var(--color-light);
  font-size: 24px;
  padding:0;
}
.no-show {
  opacity: 0;  
}

.repcontrol {
  padding-left: 5em;
  padding-right: 5em;
}

.repcontrol button {
  background-color: transparent;
  background-image: none;
  border: none;
  box-shadow: none;
  border-radius: 50%;
  color: var(--color-dark);
/*  padding-top: 3px;*/
/*  padding-bottom: 3px;*/
/*  padding-left: 8px;*/
/*  padding-right: 8px;*/
  text-shadow: none;
  text-align: center;
  display: inline-block;
  font-size: 12px;
}

.repcontrol button:hover {
  background-color: var(--color-light);
}

/* ACTION GRID */

  .action-grid {
    display: grid;
    grid-template-columns: 5em repeat(6,4em);
    grid-template-rows: auto repeat(5, 2em);
    align-items: center;
    text-align: center;
  }
  .table-topline {
    text-align: right;
    grid-row: 1;
  }

  .action-grid .action-roller button {
    border-radius: 5px;
    border: none;
    background-image: none;
    background:none;
    background-color: var(--color-dark);
    color: var(--color-light);
  }

  .action-grid .action-roller {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
  }

  .action-grid .mojo {
    display:none;
  }

  .table-topline>button, .left-column>button {
    border:none;
    background: none;
    border-radius: 5px;
  }


  .table-topline>button.selected, .left-column>button.selected {
    box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-dark);
  }

  .table-topline {
    text-align: center;
  }

  .action-grid .action-roller {
    grid-row: 1;
    grid-column: 1;
  }

  .action-grid .organize {  
      grid-row: 2;
  }

  .action-grid .perform {  
      grid-row: 3;
  }

  .action-grid .pose {  
      grid-row: 4;
  }

  .action-grid .perceive {  
      grid-row: 5;
  }

  .action-grid .evade {  
      grid-row: 6;
  }

  .action-grid .music {
      grid-column: 2;
  }

  .action-grid .violence {
      grid-column: 3;
  }

  .action-grid .tech {
      grid-column: 4;
  }

  .action-grid .authority {
      grid-column: 5;
  }

  .action-grid .minds {
      grid-column: 6;
  }

  .action-grid .mojo {
      grid-column: 7;
  }

  .action-grid .music:hover ~ .music > button {
    box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
  }

  .action-grid .violence:hover ~ .violence > button {
    box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
  }

  .action-grid .tech:hover ~ .tech > button {
    box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
  }

  .action-grid .authority:hover ~ .authority > button {
    box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
  }

  .action-grid .minds:hover ~ .minds > button {
    box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
  }

  .action-grid .mojo:hover ~ .mojo > button {
    box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
  }

  .action-grid .organize:hover ~ .organize > .left-column > button {
    box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
  }

  .action-grid .perform:hover ~ .perform > .left-column > button {
    box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
  }

  .action-grid .pose:hover ~ .pose > .left-column > button {
    box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
  }

  .action-grid .perceive:hover ~ .perceive > .left-column > button {
    box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
  }

  .action-grid .evade:hover ~ .evade > .left-column > button {
    box-shadow: 0 0 var(--fade-end) var(--fade-begin) var(--color-light);
  }

  .left-column {
    grid-column: 1;
    line-height: 0px;
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
    margin-bottom: 0px;
  }

  .action-grid input[type=number] {
    padding: 2px;
  }

/* SOLOS */
  .solo-line {
    display: grid;
    grid-template-columns: 2em 1fr;
    white-space: nowrap;
    column-gap: 15px;
  }

  .solo-name>input {
  /*  width: 100%;*/
  }

  .solo-spent {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .solo-name {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

/* RELATIONSHIPS */

  .relationship-line {
    display: grid;
    grid-template-columns: repeat(4, auto);
    column-gap: 15px;
  }

  .relationship-target input[type=text] {
  /*  width:75%;*/
  }

  .relationship-type select {
    width:100%;
  }

  .relationship-line ~ select {
  /*  width:100%;*/
  }

  .relationship-spent {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .relationship-target {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .relationship-strength {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }

  .relationship-type {
  grid-column: 4;
  grid-row: 1;
  align-self: center;
}

/* FAME  */
  .fame-line {
    display: grid;
    grid-template-columns: 2em 3fr 1fr;
    align-items: center;
    column-gap: 15px;
  }

  .fame-score,
  .fame-check,
  .fame-clock {
    align-self: center;
  }
  .fame-line .fame-check {
    grid-column: 1;
    grid-row: 1;
  }
  .fame-line .fame-score {
    grid-column: 2;
    grid-row: 1;
  }
  .fame-line .fame-clock {
    grid-column: 3;
    grid-row: 1;
  }

  .band-fame-line {
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center;
    column-gap: 15px;
  }
  .band-fame-line .fame-score {
    grid-column: 1;
    grid-row: 1;
  }
  .band-fame-line .fame-clock {
    grid-column: 2;
    grid-row: 1;
  }

/* INJURY/STRESS */
  .stress-violence-container {
    display: grid;
    align-content: left;
    grid-template-areas: 
    "stress   rough   bloody  deadly";
  }
  .stress-violence-container .stress-cell {
    grid-area: stress;
  }
  .stress-violence-container .rough-cell {
    grid-area: rough;
  }
  .stress-violence-container .bloody-cell {
    grid-area: bloody;
  }
  .stress-violence-container .deadly-cell {
    grid-area: deadly;
  }
  .injury-container {
    display: grid;
    grid-template-areas:
    "third-degree  clock"
    "second-degree clock"
    "first-degree  clock"
    "injury-label  injury-label";
    column-gap: 5px;
  }
  .injury-container .injury-clock {
    grid-area: clock;
  }
  .injury-container .third-degree {
    grid-area: third-degree;
    text-align: right;
  }
  .injury-container .second-degree {
    grid-area: second-degree;
    text-align: right;
  }
  .injury-container .first-degree {
    grid-area: first-degree;
    text-align: right;
  }
  .injury-container .injury-label {
  grid-area: injury-label;
  text-align: center;
}

/* MOJO */
  .mojo-cell {
    display: none;
  }

  .descent-indicator[value="starchild" i] ~ .mojo-cell {
    display: inherit;
  }

  .mojo-line {
    display: none;
    height: 5em;
  }

  .mojo-grid .repcontrol {
    display:none;
  }

  .mojo-talent {
    display: none;
    text-align: center;
  }

  .mojo-line h3 {
    width: 5em;
    margin: 10px;
  }

  .mojo-line p {
    width: 7em;
    margin: 10px;
  }

  .riff-indicator[value~="flex" i] ~ .flex {
    display: flex;
  }

  .riff-indicator[value~="sparkle" i] ~ .sparkle {
    display: flex;
  }

  .riff-indicator[value~="vibe" i] ~ .vibe {
    display: flex;
  }

  .organize-mojo-indicator[value="1"] ~ .mojo-grid .repcontainer .repitem .mojo-block .organize {
    display: block;
  }

  .perform-mojo-indicator[value="1"] ~ .mojo-grid .repcontainer .repitem .mojo-block .perform {
    display: block;
  }

  .pose-mojo-indicator[value="1"] ~ .mojo-grid .repcontainer .repitem .mojo-block .pose {
    display: block;
  }

  .evade-mojo-indicator[value="1"] ~ .mojo-grid .repcontainer .repitem .mojo-block .evade {
    display: block;
  }

  .perceive-mojo-indicator[value="1"] ~ .mojo-grid .repcontainer .repitem .mojo-block .perceive {
    display: block;
  }

/* FACTION STATUS */
  .faction-status-container {
    display: grid;
    grid-template-areas:
    "velvet  .             .            cobalt"
    "velvet5 velvetcheck5  cobaltcheck5 cobalt5"
    "velvet4 velvetcheck4  cobaltcheck4 cobalt4"
    "velvet3 velvetcheck3  cobaltcheck3 cobalt3"
    "velvet2 velvetcheck2  cobaltcheck2 cobalt2"
    "velvet1 velvetcheck1  cobaltcheck1 cobalt1"
    ;
  }

  .faction-status-container .velvet {
    grid-area: velvet;
  }
  .faction-status-container .velvet5 {
    grid-area: velvet5;
  }
  .faction-status-container .velvet4 {
    grid-area: velvet4;
  }
  .faction-status-container .velvet3 {
    grid-area: velvet3;
  }
  .faction-status-container .velvet2 {
    grid-area: velvet2;
  }
  .faction-status-container .velvet1 {
    grid-area: velvet1;
  }
  .faction-status-container .velvetcheck1 {
    grid-area: velvetcheck1;
  }
  .faction-status-container .velvetcheck2 {
    grid-area: velvetcheck2;
  }
  .faction-status-container .velvetcheck3 {
    grid-area: velvetcheck3;
  }
  .faction-status-container .velvetcheck4 {
    grid-area: velvetcheck4;
  }
  .faction-status-container .velvetcheck5 {
    grid-area: velvetcheck5;
  }
  .faction-status-container .cobalt {
    grid-area: cobalt;
  }
  .faction-status-container .cobalt5 {
    grid-area: cobalt5;
  }
  .faction-status-container .cobalt4 {
    grid-area: cobalt4;
  }
  .faction-status-container .cobalt3 {
    grid-area: cobalt3;
  }
  .faction-status-container .cobalt2 {
    grid-area: cobalt2;
  }
  .faction-status-container .cobalt1 {
    grid-area: cobalt1;
  }
  .faction-status-container .cobaltcheck5 {
    grid-area: cobaltcheck5;
  }
  .faction-status-container .cobaltcheck4 {
    grid-area: cobaltcheck4;
  }
  .faction-status-container .cobaltcheck3 {
    grid-area: cobaltcheck3;
  }
  .faction-status-container .cobaltcheck2 {
    grid-area: cobaltcheck2;
  }
  .faction-status-container .cobaltcheck1 {
    grid-area: cobaltcheck1;
  }
  .velvet-status:checked ~ .velvet-status {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
  }
  .cobalt-status:checked ~ .cobalt-status {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

/* SCENE */
  .band-scene-container {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-column-gap: 1em;
    grid-template-rows: repeat(6, auto);
  }

  .band-scene-container p {
    margin-top:9px;
  }

  .band-scene-container .fame {
    grid-column: 1;
  }

  .band-scene-container .level {
    grid-column: 2;
  }

  .band-scene-container .scene {
    grid-column: 3;
  }

  .band-scene-container .title {
    grid-row: 1;
  }

  .band-scene-container .global {
    grid-row: 2;
    display: none;
  }

  .band-scene-container .nation {
    grid-row: 3;
    display: none;
  }

  .band-scene-container .region {
    grid-row: 4;
    display: none;
  }

  .band-scene-container .city {
    grid-row: 5;
    display: none;
  }

  .band-scene-container .dims {
    grid-row: 6;
    display: none;
  }
  
  .fame-width-indicator[value="2"] ~ .dims {
    display: block;
  }  
      
  .fame-width-indicator[value="3"] ~ .dims,
  .fame-width-indicator[value="3"] ~ .city {
    display: block;
  }
      
  .fame-width-indicator[value="4"] ~ .dims,
  .fame-width-indicator[value="4"] ~ .city,
  .fame-width-indicator[value="4"] ~ .region {
    display: block;
  }
    
  .fame-width-indicator[value="5"] ~ .dims,
  .fame-width-indicator[value="5"] ~ .city,
  .fame-width-indicator[value="5"] ~ .region,
  .fame-width-indicator[value="5"] ~ .nation {
    display: block;
  }
  
  .fame-width-indicator[value="6"] ~ .dims,
  .fame-width-indicator[value="6"] ~ .city,
  .fame-width-indicator[value="6"] ~ .region,
  .fame-width-indicator[value="6"] ~ .nation,
  .fame-width-indicator[value="6"] ~ .global {
    display: block;
  }

/* ASSETS */

  .asset-container .repcontainer .repitem {
    width: 25%;
    padding-left: 10px;
    padding-right: 10px;
  }

  .asset-container .repcontainer {
    display: flex;
    flex-wrap: wrap;
  }
  .vehicle-options,
  .music-space-options,
  .hideout-options,
  .crime-lab-options,
  .community-options,
  .network-options {
    display: none;
  }

  .active-asset[value="vehicle"] ~ .vehicle-options {
    display: block;
  }

  .active-asset[value="musicSpace"] ~ .music-space-options {
    display: block;
  }

  .active-asset[value="hideout"] ~ .hideout-options {
    display: block;
  }

  .active-asset[value="crimeLab"] ~ .crime-lab-options {
    display: block;
  }

  .active-asset[value="community"] ~ .community-options {
    display: block;
  }

  .active-asset[value="network"] ~ .network-options {
  display: block;
}

/* DISCOGRAPHY */

  .song-container .repcontainer .repitem {
    width: 25%;
    padding-left: 10px;
    padding-right: 10px;
  }

  .song-container .repcontainer {
    display: flex;
    flex-wrap: wrap;
  }

  .song-container .repcontainer .repitem textarea {
    height:3em;
  }

/* NPCs */
  .npc-container{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(4, auto);
  }
  .npc-name {
    grid-column: 1/span 2;
    grid-row: 1;
  }
  .npc-action-scores {
    grid-column: 1;
    grid-row: 2/span 2;
  }
  .npc-secondary-stats {
    grid-column: 2;
    grid-row: 2;
  }
  .npc-injury {
    grid-column: 2;
    grid-row: 3;
  }
  .npc-injury .injury-container {
    padding-top: 10px;
  }
  .npc-notes {
    grid-column: 1/span 2;
    grid-row: 4;
  }
  .npc-secondary-stats .score-block {
    display: inline-block;
  }

  .dogsheet .repcontainer .repitem {
    width: 50%;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
  }

  .dogsheet .repcontainer {
    display: flex;
    flex-wrap: wrap;
  }
  input[type="checkbox"].npc-check {
    display:none;
  }
  .npc-score[value="1"] ~ .npc-check[class*="1"] {
    display: inline-block;
  }
  .npc-score[value="2"] ~ .npc-check[class*="2"] {
    display: inline-block;
  }
  .npc-score[value="3"] ~ .npc-check[class*="3"] {
    display: inline-block;
  }
  .npc-score[value="4"] ~ .npc-check[class*="4"] {
    display: inline-block;
  }
  .npc-score[value="5"] ~ .npc-check[class*="5"] {
    display: inline-block;
  }
  .npc-score[value="6"] ~ .npc-check[class*="6"] {
    display: inline-block;
  }


/*  CLOCK STUFF  */

  .clock-checkbox {
    width: 1em;
    height: 1em;
    align-self: center;
  }

  .clock-0 {
    grid-area: c0;
    align-self: center;
  }

  .clock-1 {
    grid-area: c1;
  }
  .clock-2 {
    grid-area: c2;
  }
  .clock-3 {
    grid-area: c3;
  }
  .clock-4 {
    grid-area: c4;
  }
  .clock-5 {
    grid-area: c5;
  }
  .clock-6 {
    grid-area: c6;
  }
  .clock-7 {
    grid-area: c7;
  }
  .clock-8 {
    grid-area: c8;
  }

  .clock-0:checked {
  opacity: 0;
}

/* 3-CLOCK  */

  .clock-container-3 {
    display: grid;
    grid-template-areas:
    ".  c3 c3  c1  c1  c0"
    ".  c3 c3  c1  c1  ww"
    ".  xx c2  c2  yy  yy"
    ".  xx c2  c2  yy  yy";
    width: 7.25em;
    height: 5em;
  }

  .clock-container-3 .clock {
    width: 100%;
    height: 100%;
    display: inline-block;
    border-radius: 50%;
    grid-column: 2 / span 4;
    grid-row: 1 / span 4;
    z-index: -1;
  }

  .clock-container-3 .clock-checkbox.clock-0:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-empty-start-odd) 0deg, var(--clock-gradient-empty-end-odd) 120deg,
      var(--clock-gradient-empty-start-even) 120deg, var(--clock-gradient-empty-end-even) 240deg,
      var(--clock-gradient-empty-start-odd) 240deg, var(--clock-gradient-empty-end-odd) 360deg
    );
  }

  .clock-container-3 .clock-checkbox.clock-1:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-filled) 60deg, var(--clock-gradient-filled) 120deg,
      var(--clock-gradient-empty-start-even) 120deg, var(--clock-gradient-empty-end-even) 240deg,
      var(--clock-gradient-empty-start-odd) 240deg, var(--clock-gradient-empty-end-odd) 360deg
    );
  }

  .clock-container-3 .clock-checkbox.clock-2:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-filled) 240deg, var(--clock-gradient-filled) 240deg,
      var(--clock-gradient-empty-start-odd) 240deg, var(--clock-gradient-empty-end-odd) 360deg
    );
  }

  .clock-container-3 .clock-checkbox.clock-3:checked ~ .clock {
  background: conic-gradient(
    var(--clock-gradient-filled) 360deg, var(--clock-gradient-filled) 360deg
  );
}

/* 6-CLOCK */

  .clock-container-6 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas:
    ".  c6   xx  c1  c0"
    ".  c5   xx  c2  yy"
    ".  c4   xx  c3  yy";
    width: 8em;
    height: 5em;
  }

  .clock-container-6 .clock {
    width: 100%;
    height: 100%;
    display: inline-block;
    border-radius: 50%;
    grid-column: 2 / span 3;
    grid-row: 1 / span 3;
    z-index: -1;
  }

  .clock-container-6 .clock-checkbox.clock-0:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-empty-start-odd) 0deg, var(--clock-gradient-empty-end-odd) 60deg,
      var(--clock-gradient-empty-start-even) 60deg, var(--clock-gradient-empty-end-even) 120deg,
      var(--clock-gradient-empty-start-odd) 120deg, var(--clock-gradient-empty-end-odd) 180deg,
      var(--clock-gradient-empty-start-even) 180deg, var(--clock-gradient-empty-end-even) 240deg,
      var(--clock-gradient-empty-start-odd) 240deg, var(--clock-gradient-empty-end-odd) 300deg,
      var(--clock-gradient-empty-start-even) 300deg, var(--clock-gradient-empty-end-even) 360deg
    );
  }

  .clock-container-6 .clock-checkbox.clock-1:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-filled) 60deg, var(--clock-gradient-filled) 60deg,
      var(--clock-gradient-empty-start-even) 60deg, var(--clock-gradient-empty-end-even) 120deg,
      var(--clock-gradient-empty-start-odd) 120deg, var(--clock-gradient-empty-end-odd) 180deg,
      var(--clock-gradient-empty-start-even) 180deg, var(--clock-gradient-empty-end-even) 240deg,
      var(--clock-gradient-empty-start-odd) 240deg, var(--clock-gradient-empty-end-odd) 300deg,
      var(--clock-gradient-empty-start-even) 300deg, var(--clock-gradient-empty-end-even) 360deg
    );
  }

  .clock-container-6 .clock-checkbox.clock-2:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-filled) 120deg, var(--clock-gradient-filled) 120deg,
      var(--clock-gradient-empty-start-odd) 120deg, var(--clock-gradient-empty-end-odd) 180deg,
      var(--clock-gradient-empty-start-even) 180deg, var(--clock-gradient-empty-end-even) 240deg,
      var(--clock-gradient-empty-start-odd) 240deg, var(--clock-gradient-empty-end-odd) 300deg,
      var(--clock-gradient-empty-start-even) 300deg, var(--clock-gradient-empty-end-even) 360deg
    );
  }

  .clock-container-6 .clock-checkbox.clock-3:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-filled) 180deg, var(--clock-gradient-filled) 180deg,
      var(--clock-gradient-empty-start-even) 180deg, var(--clock-gradient-empty-end-even) 240deg,
      var(--clock-gradient-empty-start-odd) 240deg, var(--clock-gradient-empty-end-odd) 300deg,
      var(--clock-gradient-empty-start-even) 300deg, var(--clock-gradient-empty-end-even) 360deg
    );
  }

  .clock-container-6 .clock-checkbox.clock-4:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-filled) 240deg, var(--clock-gradient-filled) 240deg,
      var(--clock-gradient-empty-start-odd) 240deg, var(--clock-gradient-empty-end-odd) 300deg,
      var(--clock-gradient-empty-start-even) 300deg, var(--clock-gradient-empty-end-even) 360deg
    );
  }

  .clock-container-6 .clock-checkbox.clock-5:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-filled), var(--clock-gradient-filled) 300deg,
      var(--clock-gradient-empty-start-even) 300deg, var(--clock-gradient-empty-end-even) 360deg
    );
  }

  .clock-container-6 .clock-checkbox.clock-6:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-filled) 360deg, var(--clock-gradient-filled) 360deg
    );
  }

/* 8-CLOCK */

  .clock-container-8 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
    ". .    c8  c1  .   c0"
    ". c7   .   .   c2  ."
    ". c6   .   .   c3  ."
    ". .    c5  c4  .   ."
    ;
    width: 7.25em;
    height: 5em;
  }

  .clock-container-8 .clock {
    width: 100%;
    height: 100%;
    display: inline-block;
    border-radius: 50%;
  /*   border: 2px solid black; */
    grid-column: 2 / span 4;
    grid-row: 1 / span 4;
    z-index: -1;
  }

  .clock-container-8 .clock-checkbox.clock-0:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-empty-start-odd) 0deg, var(--clock-gradient-empty-end-odd) 45deg,
      var(--clock-gradient-empty-start-even) 45deg, var(--clock-gradient-empty-end-even) 90deg,
      var(--clock-gradient-empty-start-odd) 90deg, var(--clock-gradient-empty-end-odd) 135deg,
      var(--clock-gradient-empty-start-even) 135deg, var(--clock-gradient-empty-end-even) 180deg,
      var(--clock-gradient-empty-start-odd) 180deg, var(--clock-gradient-empty-end-odd) 225deg,
      var(--clock-gradient-empty-start-even) 225deg, var(--clock-gradient-empty-end-even) 270deg,
      var(--clock-gradient-empty-start-odd) 270deg, var(--clock-gradient-empty-end-odd) 315deg,
      var(--clock-gradient-empty-start-even) 315deg, var(--clock-gradient-empty-end-even) 360deg
    );
  }

  .clock-container-8 .clock-checkbox.clock-1:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-filled) 45deg, var(--clock-gradient-filled) 45deg,
      var(--clock-gradient-empty-start-even) 45deg, var(--clock-gradient-empty-end-even) 90deg,
      var(--clock-gradient-empty-start-odd) 90deg, var(--clock-gradient-empty-end-odd) 135deg,
      var(--clock-gradient-empty-start-even) 135deg, var(--clock-gradient-empty-end-even) 180deg,
      var(--clock-gradient-empty-start-odd) 180deg, var(--clock-gradient-empty-end-odd) 225deg,
      var(--clock-gradient-empty-start-even) 225deg, var(--clock-gradient-empty-end-even) 270deg,
      var(--clock-gradient-empty-start-odd) 270deg, var(--clock-gradient-empty-end-odd) 315deg,
      var(--clock-gradient-empty-start-even) 315deg, var(--clock-gradient-empty-end-even) 360deg
    );
  }

  .clock-container-8 .clock-checkbox.clock-2:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-filled) 90deg, var(--clock-gradient-filled) 90deg,
      var(--clock-gradient-empty-start-odd) 90deg, var(--clock-gradient-empty-end-odd) 135deg,
      var(--clock-gradient-empty-start-even) 135deg, var(--clock-gradient-empty-end-even) 180deg,
      var(--clock-gradient-empty-start-odd) 180deg, var(--clock-gradient-empty-end-odd) 225deg,
      var(--clock-gradient-empty-start-even) 225deg, var(--clock-gradient-empty-end-even) 270deg,
      var(--clock-gradient-empty-start-odd) 270deg, var(--clock-gradient-empty-end-odd) 315deg,
      var(--clock-gradient-empty-start-even) 315deg, var(--clock-gradient-empty-end-even) 360deg
    );
  }

  .clock-container-8 .clock-checkbox.clock-3:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-filled) 135deg, var(--clock-gradient-filled) 135deg,
      var(--clock-gradient-empty-start-even) 135deg, var(--clock-gradient-empty-end-even) 180deg,
      var(--clock-gradient-empty-start-odd) 180deg, var(--clock-gradient-empty-end-odd) 225deg,
      var(--clock-gradient-empty-start-even) 225deg, var(--clock-gradient-empty-end-even) 270deg,
      var(--clock-gradient-empty-start-odd) 270deg, var(--clock-gradient-empty-end-odd) 315deg,
      var(--clock-gradient-empty-start-even) 315deg, var(--clock-gradient-empty-end-even) 360deg
    );
  }

  .clock-container-8 .clock-checkbox.clock-4:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-filled) 180deg, var(--clock-gradient-filled) 180deg,
      var(--clock-gradient-empty-start-odd) 180deg, var(--clock-gradient-empty-end-odd) 225deg,
      var(--clock-gradient-empty-start-even) 225deg, var(--clock-gradient-empty-end-even) 270deg,
      var(--clock-gradient-empty-start-odd) 270deg, var(--clock-gradient-empty-end-odd) 315deg,
      var(--clock-gradient-empty-start-even) 315deg, var(--clock-gradient-empty-end-even) 360deg
    );
  }

  .clock-container-8 .clock-checkbox.clock-5:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-filled) 225deg, var(--clock-gradient-filled) 225deg,
      var(--clock-gradient-empty-start-even) 225deg, var(--clock-gradient-empty-end-even) 270deg,
      var(--clock-gradient-empty-start-odd) 270deg, var(--clock-gradient-empty-end-odd) 315deg,
      var(--clock-gradient-empty-start-even) 315deg, var(--clock-gradient-empty-end-even) 360deg
    );
  }

  .clock-container-8 .clock-checkbox.clock-6:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-filled) 270deg, var(--clock-gradient-filled) 270deg,
      var(--clock-gradient-empty-start-odd) 270deg, var(--clock-gradient-empty-end-odd) 315deg,
      var(--clock-gradient-empty-start-even) 315deg, var(--clock-gradient-empty-end-even) 360deg
    );
  }

  .clock-container-8 .clock-checkbox.clock-7:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-filled) 315deg, var(--clock-gradient-filled) 315deg,
      var(--clock-gradient-empty-start-even) 315deg, var(--clock-gradient-empty-end-even) 360deg
    );
  }

  .clock-container-8 .clock-checkbox.clock-8:checked ~ .clock {
    background: conic-gradient(
      var(--clock-gradient-filled) 360deg, var(--clock-gradient-filled) 360deg
    );
  }