/* Charleston Trainer — every color comes from the shell's --g-* variables,
   so the table survives any background and theme combination. */

.ch-wrap{
  width:100%; max-width:860px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}

.ch-hud{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 14px;
  font-size:13px; color:var(--g-muted);
}
.ch-hud b{ color:var(--g-heading); font-weight:600; }
.ch-lv{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:19px; font-weight:600; color:var(--g-heading);
}

/* the line you are building */
.ch-line{
  width:100%; padding:12px 14px; border-radius:var(--g-radius);
  background:var(--g-panel); border:1px solid var(--g-line); text-align:center;
}
.ch-line h2{
  margin:0 0 8px; font-size:13px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--g-muted);
}
.ch-groups{ display:flex; flex-wrap:wrap; gap:10px 14px; justify-content:center; }
.ch-group{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.ch-group .lab{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--g-muted); }
.ch-group .row{ display:flex; gap:3px; }
.ch-group .row .tl{ transform:scale(.62); transform-origin:top center; }
.ch-group .row{ min-height:56px; align-items:flex-start; }

/* rack */
.ch-rack{
  display:flex; flex-wrap:wrap; gap:7px; justify-content:center;
  padding:14px 12px; border-radius:var(--g-radius);
  background:var(--g-card); border:1px solid var(--g-line); box-shadow:var(--g-shadow-md);
}
.ch-tile{
  padding:0; border:1px solid var(--g-line); border-radius:11px; cursor:pointer;
  background:linear-gradient(180deg, var(--g-panel), var(--g-card));
  box-shadow:var(--g-shadow-sm);
  transition:transform .1s, box-shadow .15s, border-color .15s;
  display:flex; align-items:center; justify-content:center;
}
.ch-tile .tl{ transform:scale(.86); }
.ch-tile:hover{ transform:translateY(-3px); box-shadow:var(--g-shadow-lg); }
.ch-tile.sel{
  border-color:var(--g-accent); transform:translateY(-6px);
  box-shadow:0 0 0 3px var(--g-accent-soft), var(--g-shadow-md);
}
.ch-tile.keep{ border-color:var(--g-accent); }
.ch-tile.hint{ border-color:var(--g-accent-dk); animation:ch-pulse 1.1s ease infinite; }
@keyframes ch-pulse{ 0%,100%{ box-shadow:var(--g-shadow-sm); } 50%{ box-shadow:0 0 0 4px var(--g-accent-soft); } }
.ch-tile.gone{ opacity:.28; cursor:default; }

.ch-ctrl{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }
.ch-feed{ margin:0; min-height:22px; font-size:14px; color:var(--g-muted); text-align:center; max-width:620px; }
.ch-feed.warn{ color:var(--g-heading); font-weight:600; }
.ch-feed.ok{ color:var(--g-accent-dk); font-weight:600; }

/* result */
.ch-result{
  width:100%; text-align:center; padding:20px 16px; border-radius:var(--g-radius);
  background:var(--g-card); border:1px solid var(--g-line); box-shadow:var(--g-shadow-md);
}
.ch-result h2{
  margin:0 0 8px; font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:25px; color:var(--g-heading);
}
.ch-stars{ font-size:26px; letter-spacing:6px; color:var(--g-accent); margin-bottom:6px; }
.ch-line{ margin:0 0 14px; font-size:15px; color:var(--g-muted); }
.ch-line b{ color:var(--g-heading); }

/* level picker */
.ch-levels{ width:100%; text-align:center; }
.ch-levels h2{
  margin:0 0 12px; font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:21px; color:var(--g-heading);
}
.ch-cards{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.ch-card{
  text-align:left; padding:12px 13px; border-radius:14px; cursor:pointer;
  background:linear-gradient(180deg, var(--g-panel), var(--g-card));
  border:1px solid var(--g-line); box-shadow:var(--g-shadow-sm);
  transition:transform .1s, box-shadow .15s, border-color .15s;
}
.ch-card:hover{ transform:translateY(-2px); box-shadow:var(--g-shadow-md); border-color:var(--g-accent); }
.ch-card h3{ margin:0 0 3px; font-size:15px; font-weight:600; color:var(--g-heading); }
.ch-card p{ margin:0; font-size:12px; color:var(--g-muted); line-height:1.45; }
.ch-card .st{ display:block; margin-top:6px; font-size:13px; color:var(--g-accent); letter-spacing:2px; }
.ch-card .best{ display:block; margin-top:4px; font-size:11px; color:var(--g-muted); }
.ch-card.locked{ opacity:.5; cursor:not-allowed; }
.ch-card.locked:hover{ transform:none; box-shadow:var(--g-shadow-sm); border-color:var(--g-line); }

.ch-tip{
  margin:0; max-width:640px; text-align:center; font-size:13px;
  line-height:1.6; color:var(--g-muted);
}
.ch-about{
  width:100%; max-width:640px; font-size:13px; line-height:1.65; color:var(--g-muted);
  border-top:1px solid var(--g-line); padding-top:12px; text-align:left;
}
.ch-about summary{ cursor:pointer; color:var(--g-heading); font-weight:600; }
.ch-about p{ margin:10px 0 0; }

@media (max-width:560px){
  .ch-tile .tl{ transform:scale(.72); }
  .ch-group .row .tl{ transform:scale(.52); }
}