:root{
    --bg-deep:#06102b;
    --bg-mid:#16306e;
    --bg-bright:#2a5fd9;
    --panel:#0c0c12;
    --panel-line:#262631;
    --ink:#f4f4f2;
    --ink-dim:#a6a6b3;
    --accent:#7CFF6B;
    --accent-dim:#4fcf42;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html,body{
    min-height:100vh;
    font-family:'Manrope',sans-serif;
    background:
      radial-gradient(ellipse 140% 100% at 50% -10%, var(--bg-bright) 0%, var(--bg-mid) 45%, var(--bg-deep) 100%);
  }

  /* ---- top bar (identique aux autres pages) ---- */
  .topbar{
    background:#0c0c12;
    border-bottom:1px solid var(--panel-line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 28px;
    position:sticky;
    top:0;
    z-index:10;
  }
  .topbar .back{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--ink-dim);
    text-decoration:none;
    cursor:pointer;
    font-weight:700;
    font-size:15.5px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    background:none;
    border:none;
    transition:color .15s ease;
  }
  .topbar .back:hover{ color:var(--accent); }
  .topbar .back svg{width:18px;height:18px;}

  .topbar h1{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:24px;
    color:#fff;
    letter-spacing:0.01em;
  }

  .topbar .home{
    width:38px;height:38px;
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    color:var(--ink-dim);
    background:#15151d;
    border:1px solid var(--panel-line);
    cursor:pointer;
    transition:color .15s ease, border-color .15s ease;
  }
  .topbar .home:hover{ color:var(--accent); border-color:var(--accent-dim); }
  .topbar .home svg{width:18px;height:18px;}

  /* ---- content ---- */
  .content{
    max-width:980px;
    margin:0 auto;
    padding:36px 24px 60px;
  }

  .hint{
    font-family:'Manrope',sans-serif;
    font-weight:600;
    font-size:15.5px;
    color:var(--ink-dim);
    text-align:center;
    margin-bottom:20px;
  }

  /* ---- table panel ---- */
  .panel{
    width:100%;
    background:var(--panel);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 24px 48px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  }

  table{
    width:100%;
    border-collapse:collapse;
	table-layout:fixed;
  }

  thead th{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:16.5px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:#0c0c12;
    padding:16px 10px;
    text-align:center;
    background:#1a1a22;
  }
  thead th.mode-col{
	 width:30%;
    text-align:left;
    padding-left:22px;
    background:#15151d;
    color:var(--ink);
  }

  /* dégradé de difficulté cohérent — même teinte, intensité croissante */
  thead th.diff-1{ background:#274d2e; color:#bdf2c8; }
  thead th.diff-2{ background:#2f6b3a; color:#d6f7dc; }
  thead th.diff-3{ background:#3c9148; color:#0c0c12; }
  thead th.diff-4{ background:var(--accent-dim); color:#0c0c12; }
  thead th.diff-5{ background:var(--accent); color:#0c0c12; }

  thead .stars{
    display:flex;
    justify-content:center;
    gap:2px;
    font-size:14.5px;
  }

  tbody tr{
    border-bottom:1px solid var(--panel-line);
  }
  tbody tr:last-child{ border-bottom:none; }
  tbody tr:hover{ background:rgba(255,255,255,0.025); }

  tbody td{
    padding:16px 10px;
    text-align:center;
    font-family:'Manrope',sans-serif;
    font-weight:800;
    font-size:24px;
    color:var(--ink);
  }

  tbody td.mode-name{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-style:italic;
    font-size:24px;
    text-align:left;
    padding-left:22px;
    color:#fff;
  }

  tbody td.empty{
    color:#3a3a45;
    font-weight:600;
  }

  /* léger soulignement de couleur sous le score, repris du dégradé d'en-tête */
  tbody td[data-diff="1"]:not(.empty){ color:#bdf2c8; }
  tbody td[data-diff="2"]:not(.empty){ color:#9fe6ac; }
  tbody td[data-diff="3"]:not(.empty){ color:#7fda90; }
  tbody td[data-diff="4"]:not(.empty){ color:var(--accent-dim); }
  tbody td[data-diff="5"]:not(.empty){ color:var(--accent); }

  @media (max-width: 760px){
    .content{ padding:24px 12px 48px; }
    thead th{ font-size:24px; padding:12px 4px; }
    thead th.mode-col{ padding-left:14px; }
    tbody td{ font-size:15.5px; padding:12px 4px; }
    tbody td.mode-name{ font-size:15.5px; padding-left:14px; }
    .stars{ font-size:24px; }
  }
  
    .footer-cta{
    position:fixed;
    bottom:0; left:0; right:0;
    background:linear-gradient(180deg, rgba(6,16,43,0) 0%, rgba(6,16,43,0.92) 35%, rgba(6,16,43,1) 100%);
    padding:32px 24px 22px;
    display:flex;
    justify-content:center;
  }
  .apply-btn{
    width:100%;
    max-width:520px;
    border:none;
    cursor:pointer;
    border-radius:14px;
    padding:18px 28px;
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:24px;
    color:#0c0c12;
    background:linear-gradient(180deg, var(--accent) 0%, var(--accent-dim) 100%);
    box-shadow:0 1px 0 rgba(255,255,255,0.5) inset, 0 14px 28px -10px rgba(76,207,66,0.55);
    transition:transform .15s ease;
  }
  .apply-btn:hover{ transform:translateY(-2px); } 
  
    .mobile .topbar { padding:36px 56px; }
  .mobile .topbar h1 { font-size:48px;}
     .mobile .footer-cta .apply-btn { padding:36px 56px; font-size:48px;}
   .mobile .hint { font-size: 32px;}
	.mobile thead th {     font-size:25px; }
	.mobile td.mode-name,.mobile tbody td { font-size: 36px;}
	.mobile thead .stars { font-size:18px;}