/* Mahjong Groups — a group-matching solitaire.
   Console language (.game-bar / .stats / .controls-zone / .mode-tabs) comes from
   assets/tile-memory.css. Only the board and the sheet are defined here. */

/* site.css writes .btn-ghost for the dark hero: cream text on a dark field.
   Dropped into this light console that text is all but invisible, so the ghost
   buttons are re-inked here. The same defect is live on games/tile-memory.html;
   it is reported rather than edited, because that stylesheet is shared. */
.controls-zone .btn-ghost{
  background:var(--surface); color:var(--evergreen-deep); border-color:var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.controls-zone .btn-ghost:hover{background:var(--surface-2);border-color:var(--brass)}
.controls-zone .btn-ghost:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.controls-zone .btn-ghost span{opacity:.5;font-variant-numeric:tabular-nums;margin-left:1px}

.game-shell.danger #clock{color:#c0392b;animation:pulse 1s infinite}

.mg-stage{position:relative}

/* The board is the table: dark evergreen felt with a brass edge, so the cream
   tiles carry the contrast. Same felt family as mahjong-blocks, no new palette. */
.mg-board{
  position:relative;
  margin:0 auto;
  border:1px solid rgba(176,141,87,.34);
  border-radius:18px;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(201,169,106,.10), transparent 58%),
    linear-gradient(180deg,#1B4332 0%,#14342B 55%,#0E241C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px rgba(14,42,30,.24);
  overflow:hidden;
  touch-action:manipulation;
}
.mg-board:before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 2px,transparent 2px 5px);
}

.mg-cell{
  position:absolute;
  padding:0;border:0;background:none;
  cursor:pointer;
  transition:transform .18s ease, opacity .3s ease;
  -webkit-tap-highlight-color:transparent;
}
/* site.css lifts every .tl on hover; on a board the lift has to mean "taken",
   so it is suppressed here and re-expressed on .is-sel. */
.mg-cell .tl{
  width:100%;height:100%;transform:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 0 #E2D9C6, 0 3px 0 #D8CFBB,
             0 7px 14px rgba(0,0,0,.34);
}
.mg-cell:hover .tl{transform:none !important}
.mg-cell:focus{outline:none}
.mg-cell:focus-visible{outline:2px solid var(--brass-lt);outline-offset:3px;border-radius:10px}

/* Blocked tiles stay legible but step back. Without this cue a board where you
   need a whole group reads as "nothing is clickable". The veil is a flat wash
   rather than a colour operation, because a saturate filter does almost nothing
   to the near-white soap dragon. */
.mg-cell.is-blocked{cursor:default}
.mg-cell.is-blocked .tl{
  filter:brightness(.90) saturate(.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 0 #E2D9C6, 0 2px 0 #D8CFBB,
             0 3px 7px rgba(0,0,0,.26);
}
.mg-cell.is-blocked::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:10px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(11,25,19,.22),rgba(11,25,19,.34));
}
.mg-cell.is-hinted .tl{animation:mgHint 1.05s ease-in-out 3}
@keyframes mgHint{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 0 #D8CFBB,0 0 0 0 rgba(201,169,106,0)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 0 #D8CFBB,0 0 0 5px rgba(201,169,106,.95)}
}
.mg-cell.is-sel{z-index:80 !important;transform:translateY(-9px)}
.mg-cell.is-sel .tl{
  box-shadow:0 0 0 3px var(--brass-lt), inset 0 1px 0 rgba(255,255,255,.9),
             0 12px 22px rgba(0,0,0,.42);
}
/* The jokers that finish the set you are mid-way through picking. A board can
   hold several jokers at once, and making the player guess which one belongs to
   which set would be guesswork rather than reading. */
.mg-cell.is-partner .tl{animation:mgPartner 1.1s ease-in-out infinite}
@keyframes mgPartner{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 0 #D8CFBB,0 0 0 0 rgba(201,169,106,0)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 0 #D8CFBB,0 0 0 4px rgba(201,169,106,.85)}
}
.mg-cell.is-out{z-index:90 !important;transform:translateY(-26px) scale(.84);opacity:0;pointer-events:none}

/* "2 of 4 · 7 dots". Height is reserved so the board never shifts. */
.mg-pick{
  height:30px;margin:14px auto 0;width:fit-content;max-width:100%;
  display:flex;align-items:center;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--evergreen-deep);
  background:linear-gradient(180deg,rgba(201,169,106,.22),rgba(176,141,87,.16));
  border:1px solid rgba(176,141,87,.45);
  border-radius:999px;padding:0 14px;
  opacity:0;transition:opacity .18s;pointer-events:none;white-space:nowrap;
}
.mg-pick.is-on{opacity:1}

.mg-msg{
  margin:16px auto 0;max-width:640px;text-align:center;
  font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--muted);
  min-height:1.6em;
}
.mg-msg b{color:var(--evergreen)}
.mg-msg.is-warn{color:#9a5b2a}

.mg-legend{
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;
  margin:22px auto 0;max-width:700px;
  font-family:var(--sans);font-size:12.5px;color:var(--muted);
}
.mg-legend .k{display:inline-flex;align-items:center;gap:7px}
.mg-legend .dot{width:11px;height:11px;border-radius:3px;background:linear-gradient(180deg,#FDFBF7,#E7DFCE);border:1px solid rgba(176,141,87,.5)}
.mg-legend .dot.dim{background:linear-gradient(180deg,#A9A79B,#8D8B80)}
.mg-legend .dot.sel{background:linear-gradient(180deg,#C9A96A,#A6884F);border-color:#C9A96A}

.mg-seedline{
  margin:0 auto 14px;text-align:center;
  font-family:var(--sans);font-size:12.5px;color:var(--muted);
}
.mg-chip{
  display:inline-block;margin-right:8px;padding:3px 9px;
  font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-brass);background:var(--brass);
  border-radius:999px;vertical-align:1px;
}

.mg-sheet{
  display:none;margin:22px auto 0;max-width:540px;padding:20px 22px;
  border:1px solid var(--rule);border-radius:16px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  box-shadow:0 12px 28px rgba(20,42,30,.10), inset 0 1px 0 rgba(255,255,255,.75);
}
.mg-sheet.is-on{display:block}
.mg-sheet h2{margin:0 0 12px;font-family:var(--serif);font-size:24px;color:var(--evergreen-deep)}
.mg-sheet dl{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:0;
  font-family:var(--sans);font-size:14px}
.mg-sheet dt{color:var(--muted)}
.mg-sheet dd{margin:0;text-align:right;font-weight:700;color:var(--evergreen-deep);
  font-variant-numeric:tabular-nums}

/* the short teaching section under the board */
.mg-notes{max-width:760px;margin:0 auto;padding:0 20px 70px}
.mg-notes h2{font-family:var(--serif);font-size:28px;color:var(--evergreen-deep);margin:40px 0 12px}
.mg-notes p{font-size:15.5px;line-height:1.75;color:var(--ink-soft)}
.mg-notes ul{margin:12px 0 0;padding-left:20px}
.mg-notes li{font-size:15.5px;line-height:1.75;color:var(--ink-soft);margin-bottom:7px}
.mg-notes li b{color:var(--evergreen)}
.mg-notes .tl.inline{vertical-align:-10px}
/* Five columns of numbers do not fit a phone. Letting the one table scroll
   sideways keeps the page itself from scrolling sideways. */
.mg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0 4px}
.mg-scroll table{margin:0}
.mg-notes table{width:100%;min-width:420px;border-collapse:collapse;font-family:var(--sans);font-size:14px}
.mg-notes th,.mg-notes td{text-align:left;padding:9px 12px;border-bottom:1px solid rgba(176,141,87,.2)}
.mg-notes th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mg-notes td:first-child{font-weight:700;color:var(--evergreen-deep)}

@media (max-width:680px){
  .mg-board{border-radius:14px}
  .mg-legend{font-size:11.5px;gap:6px 13px}
  .mg-sheet{padding:16px 16px}
  .mg-notes h2{font-size:23px}
  .mg-notes p,.mg-notes li{font-size:14.8px}
  .mg-notes table{font-size:13px}
}

html.th-hc .mg-board{border-color:rgba(212,180,131,.62)}