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

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

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

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

.sol-board{ position:relative; width:100%; display:flex; justify-content:center; }
.sol-board-inner{ position:relative; }

/* A tile keeps the site's .tl face; the board only adds position, depth and state. */
.sol-board .tl{ position:absolute; display:block; cursor:pointer; padding:0;
  border-radius:8px; transition:transform .08s ease, opacity .18s ease, box-shadow .15s ease;
  will-change:transform; }
.sol-board .tl:not(.is-free){ cursor:default; filter:saturate(.72) brightness(.94); }
.sol-board .tl.is-free:hover{ transform:translateY(-3px); }
.sol-board .tl.sel{ z-index:900 !important; transform:translateY(-3px);
  outline:3px solid var(--g-accent); outline-offset:1px; box-shadow:0 6px 18px var(--g-accent-soft); }
.sol-board .tl.hint{ animation:sol-hint 1s ease-in-out 0s 2; }
.sol-board .tl.gone{ opacity:0; transform:scale(.86) translateY(-6px); pointer-events:none; }

@keyframes sol-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); }
}
@media (prefers-reduced-motion: reduce){
  .sol-board .tl.hint{ animation:none; outline:3px solid var(--g-accent); }
  .sol-board .tl.gone{ transition:none; }
}

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

.sol-levels{ width:100%; text-align:center; }
.sol-levels h2{ font-family:var(--serif,Georgia,serif); font-size:22px; color:var(--g-heading); margin-bottom:12px; }
.sol-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.sol-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); }
.sol-card:hover{ transform:translateY(-2px); border-color:var(--g-accent); }
.sol-card .n{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--g-muted); font-weight:600; }
.sol-card .t{ display:block; font-family:var(--serif,Georgia,serif); font-size:19px; font-weight:700;
  color:var(--g-heading); margin:3px 0 4px; }
.sol-card .m{ font-size:12.5px; color:var(--g-muted); }
.sol-card .st{ color:var(--g-accent); font-size:14px; letter-spacing:.08em; }
.sol-card.locked{ opacity:.55; cursor:not-allowed; }
.sol-card.locked:hover{ transform:none; border-color:var(--g-line); }

.sol-tip{ max-width:60ch; text-align:center; font-size:13px; line-height:1.65; color:var(--g-muted); margin:0; }

.sol-about{ width:100%; max-width:70ch; font-size:13.5px; line-height:1.7; color:var(--g-muted);
  border:1px solid var(--g-line); border-radius:12px; padding:12px 16px; background:var(--g-card); }
.sol-about summary{ cursor:pointer; font-weight:600; color:var(--g-heading); font-size:14px; }
.sol-about p{ margin:10px 0 0; }