/* Tileborne Zen — mahjong merge lounge. Board, tiles, HUD, overlays.
   Reads the shell's --g-* tokens so the whole frame themes with the Menu picker. */

/* Left home icon links to the site homepage; the game name text is plain. */
.tz-home-link{ text-decoration:none; color:inherit; display:inline-flex; align-items:center; gap:0;
  cursor:pointer; border-radius:8px; padding:4px; margin:-4px 0; transition:color .15s ease, background .15s ease; }
.tz-home-link:hover, .tz-home-link:focus-visible{ color:var(--g-accent); background:color-mix(in srgb,var(--g-accent) 10%, transparent); outline:none; }
.tz-home-link .tz-home-glyph{ width:20px; height:20px; flex:0 0 auto; display:block; }

.tz-wrap{ width:100%; max-width:560px; margin:0 auto; height:100%; display:flex; flex-direction:column; gap:14px; }
/* The board area claims the leftover height after HUD/tools/note, so the board
   can be sized in JS to fit exactly — no page or stage scroll at any size. */
.tz-board-fit{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }

.tz-hud{ display:flex; gap:10px 14px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.tz-stat{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--g-muted); }
.tz-stat b{ font-size:19px; color:var(--g-heading); font-variant-numeric:tabular-nums; }
.tz-bar{ width:96px; height:10px; border-radius:999px; background:var(--g-line); overflow:hidden; }
.tz-bar i{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--g-accent-lt),var(--g-accent)); transition:width .3s ease; }

.tz-board{ position:relative; display:grid; gap:7px;
  grid-template-columns:repeat(var(--cols,6), var(--cell,68px));
  grid-auto-rows:calc(var(--cell,68px) * 79 / 58);
  padding:14px; border-radius:18px; border:2px solid var(--g-accent-edge);
  background:linear-gradient(180deg, color-mix(in srgb,var(--g-accent) 9%, var(--g-card)), var(--g-bg));
  box-shadow:var(--g-shadow-md), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s ease, background .4s ease; }
/* Stage tints — subtle, so the climb reads without breaking the calm. */
.tz-board[data-stage="3"],.tz-board[data-stage="4"]{ background:linear-gradient(180deg, color-mix(in srgb,#2E8B6B 10%, var(--g-card)), #EEF3EE); }
.tz-board[data-stage="5"],.tz-board[data-stage="6"]{ background:linear-gradient(180deg, color-mix(in srgb,#E0B84A 12%, var(--g-card)), #F7F0E3); }
.tz-board[data-stage="7"],.tz-board[data-stage="8"]{ background:linear-gradient(180deg, color-mix(in srgb,#8B6FBF 11%, var(--g-card)), #F1ECF8); }
.tz-board[data-stage="9"],.tz-board[data-stage="10"]{ background:linear-gradient(180deg, color-mix(in srgb,#C0392B 9%, var(--g-card)), #FBF1EF); }
.tz-cell{ width:var(--cell,68px); height:calc(var(--cell,68px) * 79 / 58); border-radius:9px; background:rgba(0,0,0,.045); box-shadow:inset 0 1px 2px rgba(0,0,0,.10); }
.tz-cell.over{ outline:2px dashed var(--g-accent); outline-offset:2px; }

.tz-tile{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  cursor:grab; touch-action:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.18)); transition:transform .12s ease; }
.tz-tile .tl{ width:100%; height:100%; display:block; }
.tz-tile .tl svg{ width:100%; height:100%; display:block; }
.tz-tile.dragging{ cursor:grabbing; z-index:60; transition:none; filter:drop-shadow(0 9px 16px rgba(0,0,0,.34)); }
.tz-tile.hint{ animation:tzpulse 1s ease-in-out infinite; z-index:5; }
.tz-tile.set{ animation:tzpop .5s ease forwards; }
@keyframes tzpulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.09); filter:drop-shadow(0 0 0 3px var(--g-accent)); } }
@keyframes tzpop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.22); } 100%{ transform:scale(.1); opacity:0; } }
.tz-board.charleston{ animation:tzspin 1.4s cubic-bezier(.3,.7,.3,1); }
@keyframes tzspin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }

.tz-tools{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

.tz-note{ font-size:11.5px; line-height:1.55; color:var(--g-muted); text-align:center; max-width:560px;
  margin:2px auto 0; opacity:.82; }
.tz-note b{ color:var(--g-strong); font-weight:600; }

.tz-overlay{ position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(0,0,0,.5); backdrop-filter:blur(5px); }
.tz-overlay[hidden]{ display:none; }
.tz-card{ width:min(540px,92vw); max-height:86vh; overflow:auto; background:var(--g-panel); color:var(--g-fg);
  border:1px solid var(--g-line); border-top:3px solid var(--g-accent); border-radius:20px; padding:24px;
  box-shadow:var(--g-shadow-lg); }
.tz-card h2{ font-family:var(--serif,Georgia,serif); font-size:25px; color:var(--g-heading); margin:0 0 4px; }
.tz-card h3{ font-size:15px; color:var(--g-strong); margin:18px 0 6px; }
.tz-card p{ font-size:13.5px; line-height:1.6; color:var(--g-fg); margin:6px 0; }
.tz-card .tz-x{ position:sticky; top:0; float:right; margin:-6px -6px 0 0; }
.tz-card .tz-disc{ font-size:11.5px; color:var(--g-muted); margin-top:14px; padding-top:12px; border-top:1px solid var(--g-line); }

.tz-lad{ display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.tz-mini{ width:38px; height:51px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; background:var(--g-card); box-shadow:var(--g-shadow-sm); }
.tz-mini .tl{ width:100%; height:100%; display:block; }
.tz-mini .tl svg{ width:100%; height:100%; display:block; }
.tz-mini.undisc{ background:rgba(0,0,0,.06); box-shadow:none; }
.tz-mini.undisc::after{ content:"?"; font:700 18px Georgia,serif; color:var(--g-muted); }
.tz-ladcount{ font-size:13px; color:var(--g-muted); margin-top:8px; }