/* ✅ Police sympa (optionnel mais recommandé) */
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;900&family=Fredoka:wght@400;600;700&display=swap');

  :root{
    /* === Palette inspiree jeu de lettres classique ===
       Vert feutrine, bois chaud, ivoire, bordeaux
       Aucun element graphique proprietary. */
    --bg1: #1a3a1a;
    --bg2: #142e14;
    --bg3: #0e200e;

    --felt: #1e4620;
    --felt2: #245226;

    --wood:  #c8903c;
    --wood2: #e8b86a;
    --ivory: #f5ead8;

    --red:   #8b1a1a;
    --red2:  #b02020;

    --panel:  rgba(255,255,255,.08);
    --panel2: rgba(255,255,255,.12);
    --bd:     rgba(255,255,255,.15);

    --fg:    #f5ead8;
    --muted: rgba(245,234,216,.72);

    --ok:    rgba(80,200,100,.30);
    --bad:   rgba(200,60,60,.30);

    --accent:  #e8b86a;
    --accent2: #c8903c;

    --shadow:  0 18px 40px rgba(0,0,0,.50);
    --shadow2: 0 8px 20px rgba(0,0,0,.38);

    --r:  14px;
    --r2: 18px;
    --pad: 14px;

    --blinkA: rgba(232,184,106,.35);
    --blinkB: rgba(139,26,26,.30);
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; margin:0; }

  body{
    color:var(--fg);
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
      radial-gradient(ellipse 900px 600px at 20% 15%, rgba(46,100,46,.45), transparent 60%),
      radial-gradient(ellipse 700px 700px at 85% 80%, rgba(20,60,20,.55), transparent 60%),
      linear-gradient(160deg, var(--bg1), var(--bg2) 55%, var(--bg3));
  }

  a{ color:inherit; }
  .wrap{
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px;
    display:flex;
    flex-direction:column;
    gap: 12px;
  }

  header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 16px;
    background: linear-gradient(180deg, #7a4a18, #5a3210);
    border: 2px solid #c8903c;
    border-radius: var(--r2);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.18);
    gap: 12px;
    position: relative;
    overflow: hidden;
  }

  /* petites étoiles “cartoon” dans le header */
  header::before{
    content:"";
    position:absolute; inset:-40px;
    background:
      radial-gradient(circle at 10% 20%, rgba(255,255,255,.22) 0 2px, transparent 3px),
      radial-gradient(circle at 22% 65%, rgba(255,255,255,.16) 0 2px, transparent 3px),
      radial-gradient(circle at 58% 30%, rgba(255,255,255,.18) 0 2px, transparent 3px),
      radial-gradient(circle at 80% 55%, rgba(255,255,255,.14) 0 2px, transparent 3px);
    pointer-events:none;
    opacity:.55;
    transform: rotate(6deg);
  }

  .brand{ display:flex; flex-direction:column; gap: 4px; position:relative; z-index:1; }
  .brand h1{
    margin:0;
    font-size: 22px;
    letter-spacing:.4px;
    font-family: "Playfair Display", Georgia, serif;
    color: var(--wood2);
  }
  .brand .sub{ color:var(--muted); font-size: 13.5px; }

  .status{
    display:flex; align-items:center; gap: 10px;
    flex-wrap:wrap; justify-content:flex-end;
    position:relative; z-index:1;
  }

  .pill{
    display:inline-flex; align-items:center; gap: 8px;
    padding: 7px 12px; border-radius: 7px;
    border: 1px solid #5a7a3a;
    background: rgba(10,30,10,.55);
    color: var(--muted);
    font-size: 12px;
    font-family: "Playfair Display", Georgia, serif;
    white-space:nowrap;
    box-shadow: 0 3px 8px rgba(0,0,0,.35);
  }
  .dot{ width:10px; height:10px; border-radius:50%; background:#777; box-shadow: 0 0 0 3px rgba(255,255,255,.08) inset; }
  .dot.ok{ background: rgba(80,220,160,1); }
  .dot.bad{ background: rgba(255,120,120,1); }

  .miniBtn{
    cursor: pointer;
    padding: 7px 13px;
    border-radius: 7px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ivory);
    background: linear-gradient(180deg, #a06828, #5c3410);
    border-top:   1px solid #d4944a;
    border-left:  1px solid #c07838;
    border-right: 1px solid #4a2808;
    border-bottom:2px solid #3a1e04;
    box-shadow: 0 3px 8px rgba(0,0,0,.40);
    user-select: none;
    transition: none;
  }
  .miniBtn:hover{ filter: brightness(1.12); transform: translateY(-1px); }
  .miniBtn:active{ transform: translateY(1px); filter: brightness(.95); }

  .grid{
    display:grid;
    grid-template-columns: 380px 1fr;
    gap: 12px;
  }
  @media (max-width: 980px){ .grid{ grid-template-columns: 1fr; } }

  .card{
    border: 2px solid #c8903c;
    background: linear-gradient(170deg, #1a3a1a 0%, #142e14 100%);
    border-radius: var(--r2);
    box-shadow: var(--shadow), inset 0 0 40px rgba(0,0,0,.25);
    overflow: hidden;
  }
  .card .hd{
    padding: 12px 14px;
    border-bottom: 2px solid #c8903c;
    display:flex; align-items:center; justify-content:space-between; gap: 10px;
    background: linear-gradient(180deg, #5a3210 0%, #3a2008 100%);
  }
  .card .hd .t{ font-weight: 700; font-size: 14.5px; font-family: "Playfair Display", Georgia, serif; color: var(--wood2); letter-spacing: .3px; }
  .card .bd{ padding: 14px; }

  label{ display:block; font-size:13px; color:var(--muted); margin: 10px 0 6px; }
  input,select,button,textarea{ font: inherit; color: var(--fg); }

  input,select,textarea{
    width:100%;
    padding: 11px 12px;
    border-radius: 8px;
    border: 1px solid #7a5828;
    background: rgba(10,25,10,.60);
    outline: none;
    color: var(--ivory);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
  }
  input:focus,select:focus,textarea:focus{
    border-color: var(--wood2);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 2px rgba(200,144,60,.25);
  }

  .row{ display:flex; gap: 10px; align-items:center; }
  .row > *{ flex:1; }

  .btnRow{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 10px; }

  button{
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .3px;
    color: var(--ivory);
    /* Bois par defaut */
    background: linear-gradient(180deg, #a06828 0%, #7a4818 50%, #5c3410 100%);
    border-top:   2px solid #d4944a;
    border-left:  2px solid #c07838;
    border-right: 2px solid #4a2808;
    border-bottom:3px solid #3a1e04;
    box-shadow: 0 4px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
    transition: none;
    user-select: none;
  }
  button:hover{
    filter: brightness(1.12);
    transform: translateY(-2px);
    box-shadow: 0 7px 16px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.18);
  }
  button:active{
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(0,0,0,.40), inset 0 1px 0 rgba(0,0,0,.15);
    filter: brightness(.95);
  }

  button.primary{
    background: linear-gradient(180deg, #2e6e2e 0%, #1e4e1e 50%, #143414 100%);
    border-top:   2px solid #4a9e4a;
    border-left:  2px solid #3a8a3a;
    border-right: 2px solid #0e2e0e;
    border-bottom:3px solid #091a09;
  }
  button.blue{
    background: linear-gradient(180deg, #a06828 0%, #7a4818 50%, #5c3410 100%);
    border-top:   2px solid #d4944a;
    border-left:  2px solid #c07838;
    border-right: 2px solid #4a2808;
    border-bottom:3px solid #3a1e04;
  }
  button.danger{
    background: linear-gradient(180deg, #8b1a1a 0%, #6a1010 50%, #4a0808 100%);
    border-top:   2px solid #c04040;
    border-left:  2px solid #a03030;
    border-right: 2px solid #400808;
    border-bottom:3px solid #2a0404;
  }
  button:disabled{ cursor:not-allowed; opacity:.55; filter: saturate(.5) brightness(.75); }

  .players{ display:flex; flex-direction:column; gap: 8px; margin-top: 10px; }
  .pRow{
    display:flex; justify-content:space-between; align-items:center; gap: 8px;
    padding: 10px 12px;
    border: 1px solid #4a6e30;
    background: rgba(15,40,15,.50);
    border-radius: 10px;
  }
  .pRow .name{ font-weight:700; font-family: "Playfair Display", Georgia, serif; }
  .pRow .meta{ font-size: 12.5px; color: var(--muted); }
  .pRow.me{ border-color: var(--wood); box-shadow: 0 0 0 1px rgba(200,144,60,.20) inset; }
  .pRow.turn{ border-color: #7aaa7a; box-shadow: 0 0 0 1px rgba(120,180,120,.20) inset; }

  .board{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  @media (max-width: 980px){ .board{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 520px){ .board{ grid-template-columns: 1fr; } }

  .measure{
    border: 2px solid #4a6e30;
    background: rgba(15,40,15,.55);
    border-radius: 14px;
    padding: 12px;
    display:flex; flex-direction:column; gap: 10px;
    min-height: 156px;
    box-shadow: var(--shadow2), inset 0 0 20px rgba(0,0,0,.20);
  }
  .measure.active{
    border-color: var(--wood);
    box-shadow: 0 0 0 2px rgba(200,144,60,.25) inset, var(--shadow2);
  }
  .measure.done{
    border-color: #5aaa5a;
    box-shadow: 0 0 0 1px rgba(90,170,90,.20) inset, var(--shadow2);
    background: rgba(30,80,30,.45);
  }
  .mTop{ display:flex; justify-content:space-between; align-items:baseline; gap: 8px; }
  .mTop .mTitle{ font-weight:800; }
  .mTop .mChord{ color: var(--muted); font-size: 12.5px; text-align:right; }

  .slots{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .slot{
    border: 1px dashed rgba(200,144,60,.40);
    border-radius: 8px;
    padding: 10px 8px;
    text-align:center;
    background: rgba(10,30,10,.40);
    min-height: 46px;
    display:flex; align-items:center; justify-content:center;
    font-weight:700;
    font-family: "Fredoka", sans-serif;
    color: rgba(200,144,60,.50);
  }
  .slot.filled{
    border-style: solid;
    border-top:   2px solid rgba(255,255,255,.60);
    border-left:  2px solid rgba(255,255,255,.45);
    border-right: 2px solid rgba(140,100,30,.45);
    border-bottom:3px solid rgba(110,70,10,.60);
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E"),
      linear-gradient(160deg, #f0e2b8 0%, #dfc88a 45%, #c8a850 100%);
    color: #3a2000;
    font-weight: 700;
    font-size: clamp(8px, 1.4vw, 11px);
    line-height: 1.2;
    word-break: break-word;
    padding: 4px 3px;
    overflow: hidden;
    box-shadow:
      0 3px 8px rgba(0,0,0,.38),
      inset 0 1px 0 rgba(255,255,255,.45),
      inset 0 -1px 0 rgba(0,0,0,.12);
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
    border-radius: 6px;
  }

  .hint{ font-size: 12.5px; color: var(--muted); }

  .deck{
    display:flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
  }

  /* ===== Tuile style "jeu de lettres" ===== */
  .cardNote{
    position: relative;
    cursor: pointer;
    user-select: none;
    /* Tuile : taille absolue fixe */
    width: 92px;
    height: 92px;
    flex-shrink: 0;
    border-radius: 5px;
    /* Bois clair ivoire */
    background:
      /* grain bois SVG inline */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
      linear-gradient(160deg, #f5e9c6 0%, #e8d49a 40%, #d4b96a 100%);
    /* Relief 3D tuile */
    border-top:    2px solid rgba(255,255,255,.70);
    border-left:   2px solid rgba(255,255,255,.55);
    border-right:  2px solid rgba(160,120,40,.50);
    border-bottom: 3px solid rgba(130,90,20,.65);
    box-shadow:
      0 4px 10px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.50),
      inset 0 -1px 0 rgba(0,0,0,.15);
    /* Lettre */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Fredoka", ui-sans-serif, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    word-break: break-word;
    padding: 6px 4px;
    color: #3a2000;
    text-shadow: 0 1px 0 rgba(255,255,255,.40);
    letter-spacing: .5px;
    transition: opacity .10s ease;
  }
  .cardNote:hover{
    transform: translateY(-3px) scale(1.04);
    box-shadow:
      0 8px 18px rgba(0,0,0,.50),
      inset 0 1px 0 rgba(255,255,255,.50),
      inset 0 -1px 0 rgba(0,0,0,.15);
    filter: brightness(1.06);
  }
  .cardNote:active{
    transform: translateY(1px) scale(.98);
    box-shadow:
      0 2px 5px rgba(0,0,0,.40),
      inset 0 1px 0 rgba(255,255,255,.40);
  }
  .cardNote.disabled{
    opacity: .45;
    filter: grayscale(.80) brightness(.85);
    cursor: not-allowed;
  }
  .cardNote.disabled:hover{ transform: none; box-shadow: 0 4px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.50); filter: grayscale(.80) brightness(.85); }

  /* Petit badge valeur en bas-droite (comme les points Scrabble) */
  .cardNote::after{
    content: attr(data-pts);
    position: absolute;
    bottom: 5px;
    right: 7px;
    font-size: 11px;
    font-weight: 700;
    color: #5a3800;
    opacity: .75;
    line-height: 1;
  }

  .log{
    max-height: 210px;
    overflow:auto;
    padding-right: 6px;
    display:flex;
    flex-direction:column;
    gap: 8px;
  }
  .logItem{
    font-size: 12.5px;
    color: var(--muted);
    padding: 8px 10px;
    border: 1px solid #3a5a20;
    border-radius: 8px;
    background: rgba(10,30,10,.50);
  }

  .overlay{
    position: fixed; inset:0;
    background: rgba(0,0,0,.60);
    display:none;
    align-items:center;
    justify-content:center;
    padding: 18px;
    z-index: 50;
  }
  .overlay.show{ display:flex; }
  .modal{
    width: min(680px, 100%);
    border-radius: 16px;
    border: 2px solid #c8903c;
    background: #1a3a1a;
    box-shadow: 0 18px 60px rgba(0,0,0,.65);
    overflow: hidden;
  }
  .modal .mh{
    padding: 14px 16px;
    border-bottom: 2px solid #c8903c;
    background: linear-gradient(180deg, #5a3210, #3a2008);
    display:flex; justify-content:space-between; align-items:center; gap: 10px;
  }
  .modal .mh .ttl{ font-weight:900; }
  .modal .mb{ padding: 14px 16px; color: var(--muted); }
  .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .small{ font-size:12.5px; color: var(--muted); }

  /* ---------- Guidage (clignotement) ---------- */
  @keyframes blinkPulse{
    0%,100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(255,255,255,0); filter: none; }
    50%{
      box-shadow:
        0 0 0 3px var(--blinkA),
        0 0 0 10px rgba(255,255,255,.05);
      filter: saturate(1.25) brightness(1.07);
    }
  }
  .blink{
    animation: blinkPulse .9s ease-in-out infinite;
    border-color: rgba(255,210,120,.50) !important;
  }
  button.blink:disabled{
    opacity: .66;
    filter: none;
  }

  /* ---------- ✅ Dropdown rooms (inchangé, juste look +) ---------- */
  .roomField{ position:relative; }
  .roomDropdown{
    position:absolute;
    left:0; right:0;
    top: calc(100% + 6px);
    z-index: 70;
    display:none;
    border:1px solid rgba(255,255,255,.18);
    background: rgba(15,20,40,.98);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow:auto;
    max-height: 260px;
  }
  .roomDropdown.show{ display:block; }
  .roomDropdown.highlight{
    border-color: #c8903c;
    box-shadow: 0 0 0 3px rgba(200,144,60,.45), 0 8px 32px rgba(0,0,0,.6);
    animation: ddPulse 0.5s ease-in-out 2;
  }
  @keyframes ddPulse{
    0%,100% { transform: scaleY(1); }
    50%      { transform: scaleY(1.02); }
  }
  .roomOpt{
    padding: 10px 12px;
    cursor:pointer;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 13px;
    line-height: 1.2;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap: 10px;
  }
  .roomOpt:last-child{ border-bottom:none; }
  .roomOpt:hover{ background: rgba(255,255,255,.08); }
  .roomOpt .code{ font-weight: 900; letter-spacing: .10em; }
  .roomOpt .meta{ color: var(--muted); font-size: 12px; text-align:right; }
  .roomOpt.disabled{ cursor:not-allowed; opacity: .66; }