:root {


  --c1:#1e88e5;   /* blue */
  --c2:#e53935;   /* red */
  --c3:#43a047;   /* green */
  --c4:#fdd835;   /* yellow */
  --c5:#fb8c00;   /* orange */
  --c6:#8e24aa;   /* purple */

  --board-glow:#2196F3;

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

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


  --border: 5px;
}


body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  margin: 0;
  padding: 4px;
  max-width: 400px;
  user-select: none;
  margin-inline: auto;
}

h1 {
  font-size: 3rem;
  margin: 0px;
  animation: pixelColor 4s linear infinite;
}
@keyframes pixelColor{
  0%  { color:#F44336; }
  20% { color:#FF9800; }
  40% { color:#FFEB3B; }
  60% { color:#4CAF50; }
  80% { color:#2196F3; }
  100%{ color:#9C27B0; }
}

h2 {
  font-size: 1.25rem;
  margin: 0 0 8px;
}


    .wrap {
      margin: 0 auto;
      border-radius:12px;
      padding: 4px;
      background:var(--ui-bg);
      border: 4px solid var(--ui-border);
     }
    .top {
      display:flex;
      gap: 14px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }
    .card { 
      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;
    }
    .flex {
      display:flex;
      flex-direction: column;
      align-items: center;
    }
    .row {
      display:flex;
      justify-content: space-evenly;
      /*gap: 10px;*/
      flex-wrap:wrap; 
      align-items:center;
      width: 100%;
    }
    .board { position:relative; 
      display:grid; 
      gap: 1px; 
      background:#ddd; 
      padding:1px; 
      /*border-radius: 12px; */
      width: fit-content; 
      margin: 14px auto; }
    
    .cell{
      border-radius: 2px;
      
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 6px;
      text-shadow: 
        0 0 2px black,
        0 0 4px black;

      --top: 0;
      --bottom: 0;
      --left: 0;
      --right: 0;

      box-sizing: border-box;
      box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.35),
        inset 0 -3px 0 rgba(0,0,0,0.25);

      transition: background-color .5s ease;
      will-change: background-color, transform;
        
      transform-style: preserve-3d;
    }

    .cell.bump{
      backface-visibility: visible !important;
      animation: bump 300ms ease, glow 2s ease-in-out infinite;
    }
    @keyframes bump {
      0% {
        transform: perspective(300px) rotateY(0deg);
        filter: brightness(1);
      }
      45% {
        transform: perspective(300px) rotateY(88deg);
        filter: brightness(1.1);
      }
      55% {
        transform: perspective(300px) rotateY(92deg);
        filter: brightness(1.1);
      }
      100% {
        transform: perspective(300px) rotateY(0deg);
        filter: brightness(1);
      }
    }


    @keyframes bumpOLD {
      from, to { transform: scale(1, 1); }
      25% { transform: scale(0.9, 1.1); }
      50% { transform: scale(1.1, 0.9); }
      75% { transform: scale(0.95, 1.05); }
    }
    @keyframes glow {
      0%,100% { filter: brightness(.9); }
      50% { filter: brightness(1.1); }
    }
    .blink {
      animation: blink 500ms ease infinite, glow 2s ease-in-out infinite;
    }
    @keyframes blink{
      0%{ transform: scale(1); }
      50%{ transform: scale(1.3); }
      100%{ transform: scale(1); }
    }



    .title span{
      display:inline-block;
      animation: flipPause 4s ease infinite;
    }

    /* delays progressifs */
    .title span:nth-child(1){ animation-delay:0s }
    .title span:nth-child(2){ animation-delay:.1s }
    .title span:nth-child(3){ animation-delay:.2s }
    .title span:nth-child(4){ animation-delay:.3s }
    .title span:nth-child(5){ animation-delay:.4s }
    .title span:nth-child(7){ animation-delay:.5s }
    .title span:nth-child(8){ animation-delay:.6s }
    .title span:nth-child(9){ animation-delay:.7s }
    .title span:nth-child(10){ animation-delay:.8s }

    /* espace */
    .space{
      width:10px;
    }

    @keyframes flipPause{
      0%{
        transform: perspective(400px) rotateY(0);
      }

      20%{
        transform: perspective(400px) rotateY(360deg);
      }

      /* pause */
      100%{
        transform: perspective(400px) rotateY(360deg);
      }
    }


    .flip {
      backface-visibility: visible !important;
      animation: flip 2s ease;
    }
    @keyframes flip {
      0% {
        transform: perspective(400px) rotateY(0);
        animation-timing-function: ease-out;
      }
      40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg);
        animation-timing-function: ease-out;
      }
      50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
      }
      80% {
        transform: perspective(400px) rotateY(360deg) scale(.95);
        animation-timing-function: ease-in;
      }
      100% {
        transform: perspective(400px) scale(1);
        animation-timing-function: ease-in;
      }
    }


    .hithere {
  animation: hithere 1s ease infinite;
}
@keyframes hithere {
  30% { transform: scale(1.2); }
  40%, 60% { transform: rotate(-5deg) scale(1.2); }
  50% { transform: rotate(5deg) scale(1.2); }
  70% { transform: rotate(0deg) scale(1.2); }
  100% { transform: scale(1); }
}

    .palette { 
      display:flex; gap:10px;
      flex-wrap: nowrap;
      justify-content: space-evenly;
      flex-direction: row;
}
    .swatch {
      font-size: .8em;
      text-shadow:
        -1px -1px 0 rgba(0,0,0,.8),
        1px -1px 0 rgba(0,0,0,.8),
        -1px  1px 0 rgba(0,0,0,.8),
        1px  1px 0 rgba(0,0,0,.8),
        0 0 3px rgba(0,0,0,.6);
      padding: 0px;
      width: 100%;
      aspect-ratio: 1/1;
      /*width: 44px;
      height: 44px;*/
      border: 5px solid rgba(0,0,0,.12);
      cursor:pointer;
    }
    .swatch:disabled { opacity:.45; cursor: default; }
    input, button { font: inherit; }
    .msg { color:#c00; font-weight:700; }
    .hidden { display:none !important; }

    input[type="range"] {
      accent-color:var(--ui-primary);
      cursor: pointer;
    }

    .control {
      margin: 6px 0;
      font-weight: 600;
    }


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

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  z-index:1000;
  max-width: 600px;
  margin-inline: auto;
}

.modal button{
  font-size:18px;
  padding:14px 24px;
  border-radius:10px;
}





.colorBox{
  display:inline-block;
  width:12px;
  height:12px;
  margin-right:2px;
  border-radius:3px;
}









.scorePanels{
  display:grid;
  gap:14px;
}

.scorePanel{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.scorePanelTitle{
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.rankingGroups{
  display:grid;
  gap:14px;
}

.rankGroup{
  display:flex;
  flex-direction: row;
  gap:10px;
  border: 1px solid black;
  border-radius: 5px;
}

.rankGroupHeader{
  display:flex;
  flex-direction: column;
  align-items:center;
  font-weight:800;
}

.rankGroupMedal{
  min-width: 36px;
  height: 36px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
}

.rankGroupScore{
  font-size: 1rem;
  text-wrap: nowrap;
}

.rankGroupPlayers{
  display:flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: space-evenly;
  width: 100%;
}

.leaderCard{
  padding:2px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.5);
  text-align: center;
}

.leaderCard.me{
  background: linear-gradient(90deg, rgba(255,215,0,.16), rgba(255,255,255,.06));
  border-color: rgba(255,215,0,.35);
  box-shadow: 0 0 0 1px rgba(255,215,0,.15), 0 6px 18px rgba(255,215,0,.10);
}

.leaderPseudo{
  font-weight: 700;
}

.leaderMeta{
  font-size: .9rem;
  opacity: .75;
}

.leaderScores{
  margin-top: 6px;
  font-weight: 600;
  opacity: .9;
}

.historyList{
  display:grid;
  gap:8px;
  max-height: 100px;
  overflow:auto;
  padding-right: 4px;
}

.historyRow{
  display:flex;
  /*grid-template-columns: 14px 1fr;*/
  gap:10px;
  align-items:start;
  /*padding:8px 4px;*/
  border-radius: 10px;
}

.historyRow.me{
  background: rgba(255,255,255,.05);
}

.historyText {
  display:flex;
  gap:6px;
  align-items:center;
}

.historyPseudo{
  font-weight: 700;
}

.historyScore{
  font-weight: 800;
}

.historyDate{
  margin-top: 2px;
  font-size: .85rem;
  opacity: .65;
}















.scoreTable{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
}

.scoreTable th,
.scoreTable td{
  border:1px solid rgba(0,0,0,.2);
  padding:0px 0px;
  text-align:center;
  min-width:32px;
}

.scoreTable th{
  background:rgba(255,255,255,.08);
  font-weight:700;
}

.rankCell{
  width:48px;
  font-size:1.2rem;
}

.playerName{
  text-align:left !important;
  white-space:nowrap;
  font-weight:700;
  padding-left:10px;
}

.scoreCell{
  background:transparent;
}

.scoreCell.filled{
  background:rgba(30,136,229,.15);
}

.scoreCell.exact{
  background:rgba(30,136,229,.45);
  font-weight:800;
  color:#0d223a;
}

.scoreTable tr.me td{
  box-shadow: inset 0 0 0 2px rgba(255,215,0,.65);
}