/* ── BOARD ───────────────────────────────────────────────────────
   --mj-tw is the tile width. The script measures the room this wrapper
   actually has and writes the value back, because the space left over
   depends on the ad sidebar, not on the viewport. It only drives the
   glyph size here; each tile gets its box set in px. The wrapper keeps
   overflow-x as a safety net for screens too narrow even for the
   smallest tiles. */
.mj-scroll {
  overflow-x: auto;
  overflow-y: visible;
  margin: 0 -4px;
  padding: 0 4px 8px;
}

#mjBoard {
  --mj-cols: 15;
  --mj-tw: 46px;

  position: relative;
  margin: 0 auto;
  transition: filter .25s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#mjBoard.blurred { filter: blur(8px); pointer-events: none; }

/* ── TILE ────────────────────────────────────────────────────────
   The face is a light slab with a thicker bottom-right edge, which is
   what gives the board its stacked look. */
.mj-tile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 5px;
  background: linear-gradient(160deg, #fffdf6 0%, #f3ead6 100%);
  border: 1px solid #cbbda0;
  box-shadow: 2px 3px 0 #b9a884, 3px 4px 6px rgba(40, 30, 10, .28);
  font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Apple Symbols',
               'Segoe UI Emoji', sans-serif;
  font-size: calc(var(--mj-tw) * .82);
  line-height: 1;
  color: #2b2b2b;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, opacity .2s;
  overflow: hidden;
}

[data-theme="dark"] .mj-tile {
  background: linear-gradient(160deg, #f0ead9 0%, #d9cdb2 100%);
  border-color: #8d7f63;
  box-shadow: 2px 3px 0 #6f6349, 3px 4px 8px rgba(0, 0, 0, .5);
}

/* tiles that cannot be taken yet sit back a little */
.mj-tile.mj-blocked {
  filter: saturate(.55) brightness(.93);
  cursor: default;
}

.mj-tile:not(.mj-blocked):hover {
  transform: translateY(-2px);
  box-shadow: 2px 5px 0 #b9a884, 4px 7px 10px rgba(40, 30, 10, .33);
}

.mj-tile.mj-sel {
  outline: 3px solid var(--primary);
  outline-offset: -1px;
  transform: translateY(-3px);
  box-shadow: 2px 6px 0 #b9a884, 0 0 16px rgba(42, 111, 189, .55);
}

/* ── SUIT COLOURS ────────────────────────────────────────────── */
.mj-char   { color: #1d4ed8; }
.mj-bam    { color: #15803d; }
.mj-cir    { color: #9a3412; }
.mj-wind   { color: #334155; }
.mj-dr-r   { color: #b91c1c; }
.mj-dr-g   { color: #15803d; }
.mj-dr-w   { color: #1e3a8a; }
.mj-flower { color: #be185d; }
.mj-season { color: #a16207; }

/* ── TILE ANIMATIONS ─────────────────────────────────────────── */
@keyframes mj-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}
.mj-tile.mj-shake { animation: mj-shake .25s ease-in-out; }

@keyframes mj-gone {
  0%   { transform: scale(1);   opacity: 1; }
  40%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(.4);  opacity: 0; }
}
.mj-tile.mj-gone {
  animation: mj-gone .26s ease-in forwards;
  pointer-events: none;
}

@keyframes mj-back {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}
.mj-tile.mj-back { animation: mj-back .2s ease-out; }

@keyframes mj-hint-pulse {
  0%, 100% { box-shadow: 2px 3px 0 #b9a884, 0 0 0 3px #f59e0b; }
  50%      { box-shadow: 2px 3px 0 #b9a884, 0 0 18px 4px rgba(245, 158, 11, .8); }
}
.mj-tile.mj-hint { animation: mj-hint-pulse .6s ease-in-out 3; }

/* ── READOUTS ────────────────────────────────────────────────── */
.best-info {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.best-info b {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

.mj-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}
.mj-count b {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
}

/* ── MESSAGE LINE ────────────────────────────────────────────── */
#mjMsg {
  display: none;
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde047;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  margin: 10px auto 0;
  width: fit-content;
  max-width: 100%;
}
#mjMsg.show { display: block; }

[data-theme="dark"] #mjMsg {
  background: #422006;
  color: #fde047;
  border-color: #854d0e;
}

/* ── ACTIONS ─────────────────────────────────────────────────── */
.mj-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.act-btn.mj-btn-off { opacity: .45; cursor: not-allowed; }
.act-btn.mj-btn-off:hover {
  border-color: var(--btn-border);
  color: var(--btn-text);
  background: var(--card-bg);
}

/* ── HINT AD MODAL ───────────────────────────────────────────── */
#hintModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 15, 45, .72);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
#hintModal.show { display: flex; }

.hint-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 24px 72px rgba(0, 0, 40, .32);
  animation: pop .38s cubic-bezier(.34, 1.56, .64, 1);
  width: 360px;
  max-width: 90vw;
  position: relative;
}

#hintPhase1, #hintPhase2, #hintPhase3 { display: none; }
#hintPhase1.active, #hintPhase2.active, #hintPhase3.active { display: block; }

.hint-icon  { font-size: 50px; line-height: 1.15; }
.hint-title { font-size: 1.25em; font-weight: 800; color: var(--primary); margin: 10px 0 6px; }
.hint-sub   { font-size: 14px; color: var(--muted); line-height: 1.55; }

.hint-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }

.hint-btn-primary {
  padding: 11px 24px; border: none; border-radius: 26px;
  background: var(--primary); color: white;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: .16s;
}
.hint-btn-primary:hover { background: var(--primary-dk); transform: translateY(-1px); }

.hint-btn-ghost {
  padding: 9px 24px; border: 2px solid var(--btn-border); border-radius: 26px;
  background: transparent; color: var(--btn-text);
  font-size: 14px; font-weight: 600; cursor: pointer; transition: .16s;
}
.hint-btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

#hintPhase2 { position: relative; }
.hint-close-btn {
  position: absolute; top: -8px; right: -8px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--btn-border); background: var(--card-bg);
  cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center; transition: .14s;
}
.hint-close-btn:hover { border-color: var(--err-color); color: var(--err-color); }

#hintAdSlot { margin: 0 auto; }

.hint-progress-label { font-size: 13px; color: var(--muted); margin: 12px 0 6px; }
.hint-progress-wrap  { height: 8px; background: var(--border-light); border-radius: 4px; overflow: hidden; }
.hint-progress-bar   { height: 100%; width: 0%; background: var(--primary); border-radius: 4px; transition: width 1s linear; }

/* ── SIDE PANEL ADS (hidden by default) ─────────────────────── */
.side-panel-ad     { display: none; }
.side-panel-mid-ad { display: none; }
.game-mid-ad       { display: none; margin: 0 auto 14px; }

@media (max-width: 775px) {
  .hdr-nav .ad-leaderboard { display: none; }
  .game-mid-ad { display: flex; }
}
@media (max-width: 1100px) {
  .content-row { grid-template-columns: 1fr; }
}
@media (min-width: 775px) and (max-width: 1100px) {
  .right-sidebar { display: none; }
  .side-panel-ad { display: flex; }
}
@media (max-width: 650px) {
  .side-panel-mid-ad { display: flex; margin: 0 auto; }
}