/* Tile Parlor — high-end felt-table look.
   The board is a physical "table": a dark wood-and-brass inlay that reads as
   premium on both the dark evergreen theme and a light one. Region tints and
   tile faces come from the game; everything here is the frame around them. */

.tp-wrap { width: 100%; max-width: 560px; margin: 0 auto; }

/* ---- top HUD: difficulty pills, hearts, counter, hint ---- */
.tp-hud { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; margin-bottom: 16px; }
.tp-diff { display: flex; gap: 8px; }
.tp-pill { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px;
  border-radius: 999px; cursor: pointer; color: var(--g-fg);
  background: var(--g-card); border: 1px solid var(--g-line);
  box-shadow: var(--g-shadow-sm); transition: transform .1s, box-shadow .15s, background .15s, color .15s, border-color .15s; }
.tp-pill:hover { transform: translateY(-1px); }
.tp-pill.is-on { background: var(--g-accent); color: var(--g-on-accent); border-color: var(--g-accent);
  box-shadow: 0 3px 12px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18); }
.tp-meta { display: flex; align-items: center; gap: 12px; }
.tp-hearts { font-size: 19px; letter-spacing: 2px; line-height: 1; }
.tp-hearts .hp { color: rgba(255,255,255,.18); transition: color .2s, text-shadow .2s; }
.tp-hearts .hp.on { color: #e0556b; text-shadow: 0 0 9px rgba(224,85,107,.55); }
.tp-count { font-size: 13px; color: var(--g-muted); }
.tp-hint { margin-left: 2px; }

/* ---- the table ---- */
.tp-board-frame { padding: 14px; border-radius: 22px;
  background: linear-gradient(150deg, var(--g-card), var(--g-bg));
  border: 1px solid var(--g-accent-edge);
  box-shadow: var(--g-shadow-lg),
              inset 0 0 0 2px var(--g-accent-soft),
              inset 0 2px 0 rgba(255,255,255,.08);
  max-width: min(92vw, 540px); margin: 0 auto; }
.tp-board { display: grid; gap: 5px; padding: 9px; border-radius: 14px;
  background:
    radial-gradient(125% 120% at 50% 0%, var(--g-accent-soft), rgba(0,0,0,.28)),
    var(--g-bg);
  box-shadow: inset 0 2px 14px rgba(0,0,0,.40); }

/* ---- cells ---- */
.tp-cell { position: relative; aspect-ratio: 1; border-radius: 13px; cursor: pointer;
  background:
    linear-gradient(160deg, rgba(255,255,255,.07), rgba(0,0,0,.10)),
    hsla(var(--rh), 45%, 55%, 0.18);
  border: 1px solid hsla(var(--rh), 50%, 66%, 0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 2px 6px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.tp-cell:hover { transform: translateY(-2px); border-color: var(--g-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 7px 16px rgba(0,0,0,.30); }
.tp-cell.revealed { border-color: var(--g-accent-edge);
  box-shadow: inset 0 0 0 1px var(--g-accent-soft), 0 2px 6px rgba(0,0,0,.20); }

/* the mahjong tile sitting in a cell — a real ivory tile body, not a floating
   symbol. The suit SVG (viewBox 58×79) is centered on the face; the body keeps
   that exact ratio so nothing stretches. */
.tp-tile { position: relative; height: 92%; aspect-ratio: 58 / 79; max-width: 94%;
  border-radius: 9px;
  background: linear-gradient(180deg, #FDF9F0 0%, #F5EDDC 58%, #E9DFC8 100%);
  border: 1px solid rgba(118, 96, 56, .40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -4px 7px rgba(118, 96, 56, .22),
    0 3px 6px rgba(0,0,0,.42);
  display: flex; align-items: center; justify-content: center; }
.tp-tile .tl { position: relative; width: 100%; height: 100%; display: flex; }
.tp-tile .tl svg { width: 100%; height: 100%; display: block; }
.tp-tile .tl .cnr { position: absolute; top: 2px; left: 4px;
  font: 700 9px/1 Georgia, 'Times New Roman', serif; color: rgba(70, 52, 22, .55); }
.tp-cell.has-tile { background:
    linear-gradient(160deg, rgba(255,255,255,.10), rgba(0,0,0,.12)),
    hsla(var(--rh), 45%, 55%, 0.26); }

/* place animation: a small settle, like a tile dropped on the felt */
@keyframes tp-drop {
  0%   { transform: scale(1.34) translateY(-7px); opacity: 0; }
  60%  { transform: scale(.93) translateY(0); opacity: 1; }
  100% { transform: scale(1); }
}
.tp-tile.drop { animation: tp-drop .34s cubic-bezier(.2,.9,.3,1.2); }

/* pencil-mark ✕ */
.tp-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; }
.tp-mark svg { width: 46%; height: 46%; }
.tp-mark path { stroke: var(--g-muted); stroke-width: 4; stroke-linecap: round; fill: none;
  stroke-dasharray: 42; stroke-dashoffset: 42; animation: tp-draw .26s ease forwards; }
@keyframes tp-draw { to { stroke-dashoffset: 0; } }

/* wrong placement: shake + red ring */
@keyframes tp-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(3px); }
}
.tp-cell.mistake { animation: tp-shake .5s; border-color: #ff6b6b !important;
  box-shadow: 0 0 0 3px rgba(255,107,107,.45), inset 0 0 14px rgba(255,107,107,.40) !important; }

/* revealed answer tiles after a loss */
.tp-cell.ghost .tp-tile { opacity: .42; filter: saturate(.55) drop-shadow(0 2px 3px rgba(0,0,0,.35)); }

/* ---- feed line ---- */
.tp-feed { text-align: center; margin: 16px auto 0; max-width: 460px;
  font-size: 14px; color: var(--g-muted); min-height: 20px; line-height: 1.5; }

/* ---- result panel ---- */
.tp-result { text-align: center; margin-top: 18px;
  background: var(--g-card); border: 1px solid var(--g-line); border-radius: 18px;
  padding: 22px 18px; box-shadow: var(--g-shadow-lg); }
.tp-medal { font-size: 46px; line-height: 1; color: var(--g-accent);
  text-shadow: 0 0 18px var(--g-accent-soft); }
.tp-result h2 { margin: 8px 0 6px; font-family: var(--serif, Georgia, serif);
  font-size: 24px; color: var(--g-heading); }
.tp-result p { margin: 0; font-size: 14px; color: var(--g-muted); line-height: 1.5; }
.tp-ctrl { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

/* ---- help overlay (replaces the old bottom "How to play" block) ---- */
.tp-help { position: absolute; inset: 0; z-index: 42;
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.tp-help[hidden] { display: none; }
.tp-help-scrim { position: absolute; inset: 0;
  background: rgba(8, 19, 12, .54);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.tp-help-card { position: relative; z-index: 1; width: 100%; max-width: 440px; max-height: 86%;
  overflow: auto; background: var(--g-panel); border: 1px solid var(--g-accent-edge);
  border-radius: var(--g-radius); box-shadow: var(--g-shadow-lg); padding: 26px 26px 22px; color: var(--g-fg);
  animation: tpHelpIn .22s ease; }
@keyframes tpHelpIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.tp-help-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; padding: 0;
  border-radius: 50%; border: 1px solid var(--g-line); background: transparent; color: var(--g-muted);
  font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s; }
.tp-help-x:hover { color: var(--g-fg); border-color: var(--g-accent); }
.tp-help-card h2 { margin: 0 0 6px; font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 26px; color: var(--g-heading); letter-spacing: .01em; }
.tp-help-lead { margin: 0 0 14px; font-size: 14px; color: var(--g-muted); font-style: italic; line-height: 1.5; }
.tp-help-body p { margin: 0 0 12px; font-size: 14px; color: var(--g-fg); line-height: 1.7; }
.tp-help-body p:last-child { margin-bottom: 0; }
.tp-help-body b { color: var(--g-strong); font-weight: 600; }

/* ---- day mode: the felt and region tints must stay readable on a light page.
   Dark mode gets depth from darkness; day mode needs stronger tint saturation,
   a tinted (not white) felt under the tiles, and a firmer shadow under tiles. */
.mj-game[data-night="1"] .tp-board {
  background:
    radial-gradient(125% 120% at 50% 0%, rgba(255,255,255,.30), rgba(0,0,0,.12)),
    var(--g-bg2);
  box-shadow: inset 0 2px 14px rgba(0,0,0,.16); }
.mj-game[data-night="1"] .tp-cell {
  background:
    linear-gradient(160deg, rgba(255,255,255,.32), rgba(0,0,0,.07)),
    hsla(var(--rh), 38%, 44%, 0.34);
  border-color: hsla(var(--rh), 36%, 34%, 0.50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 5px rgba(0,0,0,.14); }
.mj-game[data-night="1"] .tp-cell.has-tile {
  background:
    linear-gradient(160deg, rgba(255,255,255,.30), rgba(0,0,0,.10)),
    hsla(var(--rh), 38%, 40%, 0.48); }
.mj-game[data-night="1"] .tp-tile {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.38)) drop-shadow(0 1px 1px rgba(0,0,0,.22)); }
.mj-game[data-night="1"] .tp-hearts .hp { color: rgba(0,0,0,.16); }

@media (max-width: 480px) {
  .tp-hud { justify-content: center; }
  .tp-board-frame { padding: 10px; border-radius: 18px; }
  .tp-board { gap: 4px; padding: 7px; }
}

/* green theme: the felt reads as a deeper, cleaner green at the top instead of
   the brass tint that was lifting the top of the board */
.mj-game[data-theme="green"] .tp-board{
  background:
    radial-gradient(125% 120% at 50% 0%, rgba(46,138,102,.18), rgba(0,0,0,.32)),
    var(--g-bg);
}