/* ════════════════════════════════════════════════════════════════════════════
   Mahjong — game-specific styles, layered on top of washi.css
   ════════════════════════════════════════════════════════════════════════════ */

html, body { height: 100%; overflow: hidden; }
body { display: flex; flex-direction: column; }

/* ── top bar ──────────────────────────────────────────────────────────────── */
.game-header {
  position: relative; z-index: 60; flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  padding-top: calc(var(--sp-3) + env(safe-area-inset-top));
  padding-left: calc(var(--sp-5) + env(safe-area-inset-left));
  padding-right: calc(var(--sp-5) + env(safe-area-inset-right));
  border-bottom: var(--bw-strong) solid var(--ink);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(6px);
}
.game-header .brand { gap: var(--sp-3); flex-wrap: wrap; }
.game-header .mark { font-size: var(--fs-lg); }
.game-header .mark-en { font-size: 0.6rem; }

.hud { display: flex; align-items: center; gap: var(--sp-5); margin-left: auto; flex-wrap: wrap; }
.hud .stat { gap: 0; }
.hud .stat-num { font-size: var(--fs-lg); }
.hud .stat-label { font-size: 0.58rem; }

/* ── control strip ────────────────────────────────────────────────────────── */
.controls {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--paper-2);
  overflow-x: auto;
}
.controls .segmented .btn { font-size: 0.6rem; }
.controls .spacer { flex: 1 1 auto; min-width: var(--sp-2); }
.diff-label {
  font-size: var(--fs-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--muted); margin-right: calc(var(--sp-2) * -1);
}

/* ── board area ───────────────────────────────────────────────────────────── */
#board-wrap {
  position: relative; flex: 1 1 auto; min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--jade) 9%, transparent), transparent 60%),
    radial-gradient(circle at 12% 90%, var(--accent-soft), transparent 50%),
    radial-gradient(circle at 88% 12%, var(--murasaki-soft), transparent 50%);
}
#board {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

/* ── a tile ───────────────────────────────────────────────────────────────── */
.tile {
  position: absolute;
  width: 63px;            /* TW + EDGE */
  height: 81px;           /* TH + EDGE */
  cursor: pointer;
  /* the L-shaped exposed edge = tile thickness */
  background: linear-gradient(135deg, #efe6d2 0%, #ddd0b4 55%, #cdbf9f 100%);
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(26,23,20,0.25);
  transition: filter .12s ease, transform .08s ease;
}
.tile-face {
  position: absolute; left: 0; top: 0;
  width: 56px; height: 74px;          /* TW x TH */
  border-radius: 9px;
  background: #fffdf6;
  box-shadow: inset 0 0 0 1px rgba(26,23,20,0.10), 0 1px 0 rgba(255,255,255,0.6);
  overflow: hidden;
}
.tile-face-svg { width: 100%; height: 100%; display: block; }

.tile.free:hover { filter: brightness(1.05); }
.tile.blocked { filter: brightness(0.9) saturate(0.9); }
.tile.blocked .tile-face { filter: brightness(0.94); }

.tile.selected { transform: translateY(-2px); }
.tile.selected .tile-face {
  box-shadow: inset 0 0 0 3px var(--accent), 0 0 0 2px var(--accent);
}
.tile.hint .tile-face { animation: tile-hint 0.7s ease-in-out 3; }
@keyframes tile-hint {
  0%,100% { box-shadow: inset 0 0 0 1px rgba(26,23,20,0.10); }
  50%     { box-shadow: inset 0 0 0 3px var(--jade), 0 0 14px 2px color-mix(in srgb,var(--jade) 55%,transparent); }
}
.tile.shake { animation: tile-shake 0.3s ease; }
@keyframes tile-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-3px); } 75% { transform: translateX(3px); }
}
.tile.removing {
  animation: tile-remove 0.26s ease forwards;
  z-index: 99999 !important;
}
@keyframes tile-remove {
  to { transform: scale(0.4) rotate(8deg); opacity: 0; }
}
.tile.gone { display: none; }

/* dark theme: deepen the felt + warm the tile edges */
[data-theme="sumi"] #board-wrap {
  background:
    radial-gradient(circle at 50% 35%, rgba(46,125,94,0.16), transparent 60%),
    radial-gradient(circle at 12% 90%, rgba(192,57,43,0.12), transparent 50%),
    radial-gradient(circle at 88% 12%, rgba(124,92,191,0.14), transparent 50%);
}
[data-theme="sumi"] .tile {
  background: linear-gradient(135deg, #c9bb9e 0%, #b3a283 55%, #998969 100%);
}

/* ── overlay tweaks ───────────────────────────────────────────────────────── */
#overlay .modal { max-width: 420px; }
.win-kanji.stuck { color: var(--accent); }
#ov-sub { font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted); }
#ov-buttons { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-5); flex-wrap: wrap; }

/* floating status toast */
#status {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px);
  z-index: 80; padding: 0.5em 1.1em; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
#status.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .game-header { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .game-header .mark-en { display: none; }
  .hud { gap: var(--sp-3); }
  .hud .stat-num { font-size: var(--fs-md); }
  .controls { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .controls .btn { padding: 0.55em 0.7em; }
  .diff-label { display: none; }
}
@media (max-width: 460px) {
  .hud .stat[data-opt] { display: none; }   /* hide secondary stats on tiny screens */
}