:root {


    --ui-bg:#f4f6f8;
    --ui-card:#ffffff;
    --ui-border:#e0e0e0;

    --ui-primary:#e51e9f;
    --ui-text:#2c3e50;
    --ui-muted:#7f8c8d;


    --border: 5px;
}


body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  margin: 0px;
  padding: 0px;
  user-select: none;
  margin-inline: auto;
  text-align: center;
}

h1 {
  font-size: 2rem;
  margin: 0px;
}
h2 {
  font-size: 1.25rem;
  margin: 0 0 8px;
}
h3 {
  font-size: 1rem;
  margin: 0px;
}
  button{
    background:var(--ui-primary);
    color:white;
    border:none;
    border-radius:8px;
    padding:6px 10px;
    cursor:pointer;
    transition:.15s;
  }
    button:hover:not(:disabled){
      filter:brightness(1.1);
    }

    button:disabled{
      opacity:.45;
      cursor:not-allowed;
    }



#divLeaderBoard {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

#winCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}





.score-histo {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 0px;
  padding: 12px 8px 4px;
  overflow-x: auto;
}

.score-histo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 6px;
}

.score-histo-value {
  font-size: 11px;
  line-height: 1;
  margin-bottom: 4px;
  min-height: 12px;
}

.score-histo-barwrap {
  /*height: 160px;*/
  display: flex;
  align-items: flex-end;
}

.score-histo-bar {
  width: 6px;
  min-height: 1px;
  background: #4caf50;
  border-radius: 6px 6px 0 0;
}

.score-histo-bar-score {
  background: var(--ui-primary) !important;
}

.score-histo-label {
  margin-top: 6px;
  font-size: .75rem;
  text-align: right;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: 50px;
}











.hidden { display:none !important; }
.wrap {
  margin: 0 auto;
  border-radius:12px;
    padding: 4px;
    background:var(--ui-bg);
    border: 4px solid var(--ui-border);
  }
.cadre { 
  padding: 4px 8px;
  background:var(--ui-card);
  color: var(--ui-text);
  border:1px solid var(--ui-border);
  border-radius:12px;
  min-width: 80%;
  overflow: auto;
}
    .row { display:flex;     justify-content: space-evenly;gap: 10px; flex-wrap:wrap; align-items:center; }



#gameContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.fta-tile {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  /*height: 25px;*/
}

.fta-tile img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.fta-tile.is-wrong {
  transform: scale(0.96);
  opacity: 0.75;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
}

.leaderboard-table th,
.leaderboard-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #ddd;
}







.gauge {
    position: relative;
    border-radius: 50%/100% 100% 0 0;
    background-color: var(--color, #a22);
    overflow: hidden;
}
.gauge:before{
    content: "";
    display: block;
    padding-top: 50%;   /* ratio of 2:1*/
}
.gauge .chart {
  overflow: hidden;
}
.gauge .mask {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0;
  top: 40%;
  background-color: #fff;
  border-radius: 50%/100% 100% 0 0;
}

.gauge .percentage {
    position:  absolute;
    top: -1px;
    left: -1px;
    bottom: 0;
    right: -1px;
    background-color: var(--background, #aaa);
    transform:rotate(var(--rotation)); 
    transform-origin: bottom center; 
    transition: transform 1s ease;
}
.gauge:hover {
  --rotation: 100deg;
}
.gauge .value {
  position:absolute; bottom:0%; left:0;   
  width:100%; 
  text-align: center;
}

.gauge .min {
  position:absolute; 
  bottom:0; left:5%;   
}
.gauge .max {
  position:absolute; 
  bottom:0; right:5%;   
 }