/* ==========================================================================
   v30.27.0 — table designs
   The table picture comes from --table-bg (set on <html> by the page from the
   game's design); every stylesheet that draws the table uses
   var(--table-bg, <Royale picture>). Here: the host's picker in the lobby.
   ========================================================================== */
.table-theme-picker{margin:12px 0 10px;padding:10px;border:1px solid #2c4c68;border-radius:14px;background:linear-gradient(180deg,rgba(16,36,56,.85),rgba(8,20,33,.85))}
.table-theme-picker.hidden{display:none!important}
.ttp-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 8px}
.ttp-head strong{font-size:12px;letter-spacing:1.4px;color:#ffe591}
.ttp-head small{font-size:12px;color:#9fb7cc}
.ttp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.ttp-item{position:relative;display:flex;flex-direction:column;gap:4px;padding:4px 4px 6px;border:2px solid #29455f;border-radius:11px;background:#0b1a2a;color:#d9e8f5;font-weight:900;font-size:12px;cursor:pointer;text-align:center;transition:transform .12s ease,border-color .12s ease}
.ttp-item img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:7px}
.ttp-item:hover:not(:disabled),.ttp-item:focus-visible{transform:translateY(-2px);border-color:#ffe591}
.ttp-item.selected{border-color:#ffd766;box-shadow:0 0 0 2px rgba(255,214,102,.25),0 0 14px rgba(255,214,102,.35);color:#ffe591}
.ttp-item.selected::after{content:"✓";position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#ffd766;color:#2a1c00;font-size:12px}
.ttp-item:disabled{cursor:default;opacity:1}
.ttp-item.locked{grid-column:1/-1;max-width:260px}