/* Mahjong Triple — 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; }

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

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

/* ---------- the layered tower ---------- */
.tp-board{ position:relative; width:100%; display:flex; justify-content:center; min-height:120px; }
.tp-board-inner{ position:relative; }

.tp-board .tl{ position:absolute; display:block; padding:0; border-radius:8px;
  transition:transform .09s ease, opacity .18s ease, box-shadow .15s ease; will-change:transform; }
.tp-board .tl.is-free{ cursor:pointer; }
.tp-board .tl.is-free:hover{ transform:translateY(-3px); box-shadow:var(--g-shadow-lg); }
/* Buried tiles stay legible but read as locked, so the free edge of the tower is obvious. */
.tp-board .tl:not(.is-free){ cursor:default; filter:saturate(.66) brightness(.9); opacity:.92; }
.tp-board .tl.hint{ animation:tp-hint 1s ease-in-out 0s 2; z-index:900 !important; }
.tp-board .tl.taken{ opacity:0; transform:translateY(-14px) scale(.82); pointer-events:none; }

@keyframes tp-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); }
}

/* ---------- rack ---------- */
.tp-rack{ display:flex; gap:6px; padding:8px 10px; border-radius:14px;
  border:1px solid var(--g-line); background:var(--g-card); box-shadow:var(--g-shadow-sm) inset;
  min-height:56px; align-items:center; justify-content:center; }
.tp-slot{ width:38px; height:52px; border-radius:7px; border:1px dashed var(--g-line);
  display:flex; align-items:center; justify-content:center; background:rgba(127,127,127,.06); }
.tp-slot.filled{ border-style:solid; background:transparent; }
.tp-slot .tl{ width:36px; height:50px; border-radius:6px; }
.tp-slot.pop .tl{ animation:tp-pop .22s ease forwards; }
@keyframes tp-pop{
  to{ transform:scale(.6); opacity:0; }
}
.tp-rack.full{ border-color:var(--g-accent); box-shadow:0 0 0 3px var(--g-accent-soft); }

@media (max-width:520px){
  .tp-slot{ width:32px; height:45px; }
  .tp-slot .tl{ width:30px; height:43px; }
}

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

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

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

.tp-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); }
.tp-about summary{ cursor:pointer; font-weight:600; color:var(--g-heading); font-size:14px; }
.tp-about p{ margin:10px 0 0; }

@media (prefers-reduced-motion: reduce){
  .tp-board .tl.hint{ animation:none; outline:3px solid var(--g-accent); }
  .tp-board .tl.taken{ transition:none; }
  .tp-slot.pop .tl{ animation:none; }
}