/* Six choices (five supplied transparent images + random) in Settings or at the table. */
.table-theme-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:14px 0 8px;width:100%}
.table-theme-option{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0;gap:7px;background:#0c2119;color:#e4cc99;border:1px solid #ac8a5077;border-radius:9px;padding:9px 7px;cursor:pointer;font-size:10px;line-height:1.3;text-align:center;transition:border-color .15s,background .15s}
.table-theme-option:hover{border-color:#f4d28d;background:#1e3527}
.table-theme-option.theme-selected{border-color:#ffe49c;background:#283b27;box-shadow:inset 0 0 0 1px #edc36b77}
.table-theme-option:focus-visible{outline:2px solid #fff2c4;outline-offset:3px}
.table-theme-preview{width:100%;aspect-ratio:1.45;display:grid;place-items:center;border-radius:5px;background:radial-gradient(#395238,#0b1710 70%);overflow:hidden}
.table-theme-preview img{width:100%;height:100%;object-fit:contain}
.table-theme-random{font-size:22px;color:#f5cb73;letter-spacing:.2em;line-height:1.15;transform:rotate(-9deg)}
.table-theme-option small{font-size:7px;letter-spacing:.07em;color:#d7b877}
.theme-setting{width:100%;padding:18px 0;border-bottom:1px solid #c6a76b33}
.theme-setting h3{color:#f4dfb4;font-size:17px;margin-bottom:7px}
.theme-setting p{font-size:11px;color:#b8aa91;line-height:1.5}
.theme-setting .table-theme-selector{grid-template-columns:repeat(3,minmax(0,1fr))}
.theme-setting .table-theme-option{font-size:11px}
.table-theme-current{font-size:11px;color:#d7be87;margin-top:12px}
.table-drawer .table-theme-selector{grid-template-columns:repeat(2,minmax(0,1fr))}
.table-drawer .table-theme-option{font-size:9px}
@media(max-width:600px){.theme-setting .table-theme-selector{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.table-theme-option,.table-square-card{transition:none}}

/* ── SÉLECTION VISUELLE DE TABLE EN PETITS CARRÉS (CRÉATION DE TABLE) ── */
.create-table-squares{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:6px 0 10px;width:100%}
.table-square-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 3px 6px;background:#0d1e17;border:1px solid #7d653777;border-radius:8px;cursor:pointer;transition:border-color .18s,background .18s,transform .18s;position:relative;text-align:center;color:#e4cc99;font-family:inherit}
.table-square-card:hover{border-color:#ffd688;background:#183327;transform:translateY(-2px)}
.table-square-card.selected{border-color:#ffe49c;background:linear-gradient(145deg,#1c3e2e,#0f241a);box-shadow:0 0 0 1px #ffe49caa,0 4px 14px rgba(255,214,136,.25)}
.table-square-card .square-thumb{width:100%;aspect-ratio:1/1;border-radius:6px;background:radial-gradient(circle at center,#243f32 0%,#0a1410 75%);display:grid;place-items:center;padding:3px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.table-square-card .square-thumb img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));transition:transform .18s ease}
.table-square-card:hover .square-thumb img{transform:scale(1.06)}
.table-square-card .square-check{display:none;position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:#ffd688;color:#121f18;font-size:9px;font-weight:800;line-height:14px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.table-square-card.selected .square-check{display:block}
.table-square-card .square-title{font-size:9px;font-weight:700;color:#ffdf9e;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.table-square-card .square-sub{font-size:7px;color:#a49779;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(max-width:540px){.create-table-squares{grid-template-columns:repeat(3,1fr)}}

/* Miniature colorée de table dans le lobby */
.table-theme-mini{display:grid;place-items:center;border-radius:4px;overflow:hidden;padding:2px}
.table-theme-mini img{width:100%;height:100%;object-fit:contain}
.table-color-tag{color:#d5bc84;font-style:italic}

/* ── BANNIÈRE PISTE MUSICALE (EKATHE - 10 SECONDES) ── */
#dknr-music-banner{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:9990;
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:rgba(9,27,21,0.92);
  border:1px solid #cbaa68aa;
  box-shadow:0 8px 24px rgba(0,0,0,0.65),inset 0 0 14px rgba(203,170,104,0.15);
  border-radius:24px;
  padding:8px 18px;
  color:#ffebad;
  font-family:Cinzel,Georgia,serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.07em;
  pointer-events:none;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
#dknr-music-banner.banner-visible{
  opacity:1;
  transform:translateY(0);
}
#dknr-music-banner.banner-hidden{
  opacity:0;
  transform:translateY(14px);
}
#dknr-music-banner .music-banner-icon{
  color:#ffd688;
  font-size:15px;
  display:inline-block;
  animation:music-note-bounce 2s ease-in-out infinite alternate;
}
@keyframes music-note-bounce{
  from{transform:translateY(0) scale(1)}
  to{transform:translateY(-2px) scale(1.18)}
}
@media(max-width:600px){
  #dknr-music-banner{
    bottom:14px;
    right:14px;
    font-size:10px;
    padding:6px 14px;
  }
}