/* ════════════════════════════════════════════════════════════════
   GamesOMG /play/mahjong/ — game UI + sector skins
   Skins ride [data-skin] on #mj-app: felt + tile palette swap,
   layout and motion identical (the spades room contract).
   ════════════════════════════════════════════════════════════════ */

#mj-app {
  --felt-a: #10231c; --felt-b: #0a1a14; --felt-edge: #1e4a38;
  --ink: #e8f0e9; --ink-dim: #9ab3a2;
  --tile-face: #eef4ec; --tile-ink: #1a241c; --tile-edge: #b9c9b4; --tile-side: #93a58f;
  --accent: #49c98a; --accent-ink: #062416;
  --glow: 92, 225, 160;
}
#mj-app[data-skin="neon"] {
  --felt-a: #1b1c22; --felt-b: #121317; --felt-edge: #34363f;
  --ink: #f0f2f8; --ink-dim: #9aa0af;
  --tile-face: #f2f4f8; --tile-ink: #16181f; --tile-edge: #aab0bd; --tile-side: #8b93a3;
  --accent: #2ee6ff; --accent-ink: #04252b;
  --glow: 255, 46, 136;
}
#mj-app[data-skin="dino"] {
  --felt-a: #14402e; --felt-b: #0e3123; --felt-edge: #7d6534;
  --ink: #eef3ea; --ink-dim: #a9c0ad;
  --tile-face: #f8f2e0; --tile-ink: #26211a; --tile-edge: #c0b492; --tile-side: #a3966f;
  --accent: #c9a24b; --accent-ink: #241a04;
  --glow: 232, 200, 116;
}

#mj-app { position: relative; font-family: 'Manrope', sans-serif; }

.mj-frame {
  position: relative;
  background: radial-gradient(120% 130% at 50% 18%, var(--felt-a) 0%, var(--felt-b) 78%);
  border: 1px solid var(--felt-edge);
  border-radius: 22px;
  box-shadow: 0 24px 54px -18px rgba(8, 14, 10, .45), inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--ink);
  min-height: 620px;
  display: flex; flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
}

/* ── HUD ──────────────────────────────────────────────────────── */
.mj-hud {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .76rem; flex-wrap: wrap;
}
.mj-hud-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mj-title { font-weight: 800; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-sub { color: var(--ink-dim); font-size: .66rem; white-space: nowrap; }
.mj-hud-right { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.mj-btn {
  font: 800 .68rem 'Manrope', sans-serif; letter-spacing: .03em;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 10px; padding: 9px 14px; cursor: pointer;
  min-height: 38px; touch-action: manipulation;
  box-shadow: 0 5px 14px -6px rgba(0,0,0,.5);
  transition: transform .15s, filter .15s;
}
.mj-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.mj-btn:disabled { opacity: .45; cursor: default; transform: none; }
.mj-btn.mj-ghost { background: rgba(255,255,255,.07); color: var(--ink); border: 1px solid rgba(255,255,255,.18); }

/* ── Board ────────────────────────────────────────────────────── */
.mj-board-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 10px 12px 16px; min-height: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;   /* dense boards pan sideways on phones */
}
.mj-board { width: 100%; height: 100%; max-height: 74vh; min-width: min-content; margin: auto; }
.mj-board svg { width: 100%; height: 100%; display: block; }

.mj-tile { cursor: default; }
.mj-tile.free { cursor: pointer; }
.mj-tile .face { transition: transform .14s cubic-bezier(.2,.8,.3,1); }
.mj-tile.free:hover .face { transform: translateY(-2px); }
.mj-tile.selected .face-rect { stroke: var(--accent); stroke-width: 3; }
.mj-tile.selected .face { transform: translateY(-3px); filter: drop-shadow(0 0 8px rgba(var(--glow), .5)); }
.mj-tile.hinted .face-rect { stroke: var(--accent); stroke-width: 3; animation: mj-pulse 1s ease-in-out 3; }
.mj-tile.dim .face { filter: brightness(.88) saturate(.8); }   /* never opacity — see-through tiles read as broken */
.mj-tile.gone { pointer-events: none; }
.mj-tile.gone .face, .mj-tile.gone .side { animation: mj-out .28s ease-out forwards; }
@keyframes mj-out { to { opacity: 0; transform: translateY(-14px) scale(1.08); } }
@keyframes mj-pulse { 0%,100% { stroke-opacity: 1 } 50% { stroke-opacity: .25 } }
.mj-tile.shake { animation: mj-shake .3s; }
@keyframes mj-shake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-3px) } 75% { transform: translateX(3px) } }

/* ── Panels (recap / stuck / win) ─────────────────────────────── */
.mj-panel {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(6,10,8,.55), rgba(6,10,8,.72));
  animation: mj-fade .18s ease-out;
}
@keyframes mj-fade { from { opacity: 0 } }
.mj-panel-card {
  background: var(--felt-b); border: 1px solid var(--felt-edge);
  border-radius: 18px; padding: 22px 26px; max-width: min(520px, 92%);
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.6);
  text-align: center; max-height: 92%; overflow: auto;
}
.mj-panel-card h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 6px; }
.mj-panel-card .mj-p-sub { color: var(--ink-dim); font-size: .78rem; margin: 0 0 14px; }
.mj-stars { font-size: 2rem; letter-spacing: .12em; margin: 6px 0 2px; color: var(--accent); }
.mj-stars .off { opacity: .25; }
.mj-btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

/* ── Sector map ───────────────────────────────────────────────── */
.mj-map { flex: 1; overflow: auto; padding: 18px clamp(14px, 3cqw, 34px) 26px; }
.mj-map-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.mj-map-head h2 { font-size: 1rem; font-weight: 800; margin: 14px 0 2px; }
.mj-map-tag { color: var(--ink-dim); font-size: .72rem; margin: 0 0 10px; }
.mj-total { font-size: .72rem; color: var(--ink-dim); }
.mj-total b { color: var(--accent); font-size: .9rem; }
.mj-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; margin-bottom: 8px; }
.mj-level {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 10px 12px; cursor: pointer; text-align: left;
  color: var(--ink); font-family: inherit;
  transition: transform .14s, border-color .14s;
}
.mj-level:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(var(--glow), .6); }
.mj-level:disabled { opacity: .38; cursor: default; }
.mj-level .lv-name { font-weight: 800; font-size: .78rem; display: block; }
.mj-level .lv-meta { font-size: .62rem; color: var(--ink-dim); display: block; margin-top: 2px; }
.mj-level .lv-stars { color: var(--accent); font-size: .8rem; letter-spacing: .1em; display: block; margin-top: 4px; }
.mj-level .lv-stars .off { opacity: .25; }

/* sector skin chips on the map (preview the palette) */
.mj-sector-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.3); vertical-align: -2px; margin-right: 6px; }

/* ── Fullscreen (same contract as spades) ─────────────────────── */
#mj-app:fullscreen, #mj-app.mj-fs {
  background: var(--felt-b);
  display: flex; flex-direction: column; overflow: auto;
  padding: max(clamp(6px, 1.5vh, 16px), env(safe-area-inset-top))
           max(clamp(6px, 1.5vh, 16px), env(safe-area-inset-right))
           max(clamp(6px, 1.5vh, 16px), env(safe-area-inset-bottom))
           max(clamp(6px, 1.5vh, 16px), env(safe-area-inset-left));
}
#mj-app.mj-fs { position: fixed; inset: 0; z-index: 2147483000; }
#mj-app:fullscreen .mj-frame, #mj-app.mj-fs .mj-frame { flex: 1; min-height: 0; border-radius: 12px; }
#mj-app:fullscreen .mj-board, #mj-app.mj-fs .mj-board { max-height: none; }

@media (prefers-reduced-motion: reduce) {
  .mj-tile .face, .mj-btn, .mj-level { transition: none !important; animation: none !important; }
  .mj-tile.gone .face, .mj-tile.gone .side { animation: none; opacity: 0; }
  .mj-panel { animation: none; }
}

@media (max-width: 700px) {
  .mj-frame { min-height: 480px; border-radius: 16px; }
  .mj-hud { padding: 8px 10px; }
  .mj-hud-right .mj-btn { min-height: 40px; padding: 8px 10px; font-size: .62rem; }
  .mj-board { max-height: none; }
  .mj-levels { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
  .mj-m-hide { display: none; }
}