/* Mahjong Cascade — game-specific visuals only.
   Shared chrome (top bar, menu, themes, celebration) comes from shared/shell.css.
   Tile faces are the school site's own vector tiles (.tl in assets/site.css). */

h1.mj-title{ margin:0; font-size:inherit; line-height:inherit; }

.cs-wrap{ display:flex; flex-direction:column; gap:12px; align-items:center; }

.cs-hud{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 16px;
  font-size:13px; color:var(--g-muted); }
.cs-hud b{ color:var(--g-heading); font-weight:700; }
.cs-lv{ font-family:var(--serif,'Cormorant Garamond',Georgia,serif); font-size:19px; font-weight:700;
  color:var(--g-heading); margin-right:6px; }

.cs-board{ display:flex; justify-content:center; width:100%; }
.cs-grid{ display:grid; gap:4px; }

.cs-cell{ display:flex; align-items:center; justify-content:center; border-radius:8px;
  background:rgba(127,127,127,.07); border:1px solid var(--g-line); }
.cs-cell .tl{ width:100%; height:100%; border-radius:6px; cursor:pointer; padding:0;
  transition:transform .09s ease, opacity .18s ease, box-shadow .15s ease; }
.cs-cell .tl:hover{ transform:translateY(-2px); box-shadow:var(--g-shadow-md); }
.cs-cell.picked{ outline:3px solid var(--g-accent); outline-offset:1px; }
.cs-cell.picked .tl{ transform:translateY(-3px); }
.cs-cell.gone .tl{ opacity:0; transform:scale(.8); }
.cs-cell.drop .tl{ animation:cs-drop .22s ease; }
.cs-cell.hint .tl{ animation:cs-hint 1s ease-in-out 0s 2; }

@keyframes cs-drop{
  from{ transform:translateY(-14px); opacity:.35; }
  to{ transform:none; opacity:1; }
}
@keyframes cs-hint{
  0%,100%{ box-shadow:0 0 0 0 rgba(0,0,0,0); }
  50%{ box-shadow:0 0 0 4px var(--g-accent-soft), 0 6px 16px var(--g-accent-soft); }
}

.cs-ctrl{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

.cs-levels{ width:100%; text-align:center; }
.cs-levels h2{ font-family:var(--serif,Georgia,serif); font-size:22px; color:var(--g-heading); margin-bottom:12px; }
.cs-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.cs-card{ text-align:left; background:linear-gradient(180deg, rgba(255,255,255,.45), var(--g-card));
  border:1px solid var(--g-line); border-radius:14px; padding:14px 16px; cursor:pointer;
  box-shadow:var(--g-shadow-md); transition:transform .12s, border-color .15s; font:inherit; color:var(--g-fg); }
.cs-card:hover{ transform:translateY(-2px); border-color:var(--g-accent); }
.cs-card .n{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--g-muted); font-weight:600; }
.cs-card .t{ display:block; font-family:var(--serif,Georgia,serif); font-size:19px; font-weight:700;
  color:var(--g-heading); margin:3px 0 4px; }
.cs-card .m{ font-size:12.5px; color:var(--g-muted); }
.cs-card .st{ color:var(--g-accent); font-size:14px; letter-spacing:.08em; }
.cs-card.locked{ opacity:.55; cursor:not-allowed; }
.cs-card.locked:hover{ transform:none; border-color:var(--g-line); }

/* Help overlay: opened by the top-right "?" button. Keeps the board area
   clean by moving the how-to-play copy out of the page flow. */
.cs-help{ position:fixed; inset:0; z-index:92; display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(10,14,18,.52); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .18s ease; }
.cs-help[hidden]{ display:none; }
.cs-help.show{ opacity:1; }

.cs-help-card{ position:relative; width:min(560px,94vw); max-height:86vh; overflow:auto;
  padding:26px 26px 28px; border-radius:16px;
  background:linear-gradient(180deg, var(--g-card), var(--g-bg));
  border:1px solid var(--g-accent-edge);
  box-shadow:0 0 0 4px var(--g-accent-soft), var(--g-shadow-lg), inset 0 1px 0 rgba(255,255,255,.28);
  transform:translateY(8px); transition:transform .18s ease; }
.cs-help.show .cs-help-card{ transform:translateY(0); }
.cs-help-card h2{ font-family:var(--serif,Georgia,serif); font-size:24px; color:var(--g-heading); margin:0 0 12px; }
.cs-help-card h3{ font-family:var(--serif,Georgia,serif); font-size:16px; color:var(--g-heading); margin:18px 0 6px; }
.cs-help-lead{ max-width:62ch; font-size:14px; line-height:1.66; color:var(--g-fg); margin:0 0 4px; }
.cs-help-card p{ max-width:64ch; font-size:13.5px; line-height:1.72; color:var(--g-muted); margin:8px 0 0; }
.cs-help-x{ position:absolute; top:12px; right:12px; width:34px; height:34px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font:inherit;
  font-size:22px; line-height:1; color:var(--g-strong);
  background:linear-gradient(180deg, var(--g-card), var(--g-bg));
  border:1px solid var(--g-line); border-radius:50%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--g-shadow-sm);
  transition:border-color .15s, color .15s, transform .12s; }
.cs-help-x:hover{ border-color:var(--g-accent); color:var(--g-accent); transform:translateY(-1px); }
.cs-help-x:focus-visible{ outline:2px solid var(--g-accent); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .cs-cell.drop .tl{ animation:none; }
  .cs-cell.hint .tl{ animation:none; outline:3px solid var(--g-accent); }
  .cs-cell.gone .tl{ transition:none; }
}