/* Mahjong Kong — a meld-matching solitaire.
   Console language (.game-bar / .stats / .controls-zone / .mode-tabs / .lvl-dots)
   comes from assets/tile-memory.css. Only the board itself is 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 two
   ghost buttons are re-inked here. The same defect is live on
   games/tile-memory.html — reported rather than edited, since that stylesheet
   is shared with other pages. */
.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 span{opacity:.5;font-variant-numeric:tabular-nums;margin-left:1px}
.controls-zone .btn-ghost:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

.kong-stage{position:relative}

/* The board is the table: dark evergreen felt, brass edge, so the cream tiles
   carry the contrast. Same felt family as mahjong-blocks, no new palette. */
.kong-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;
}
.kong-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);
}

.kong-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 "selected",
   so it is suppressed here and re-expressed on .is-sel. */
.kong-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);
}
.kong-cell:hover .tl{transform:none !important}
.kong-cell:focus{outline:none}
.kong-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 four-of-a-kind
   board reads as "nothing is clickable" far too often. */
.kong-cell.is-blocked{cursor:default}
.kong-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);
}
/* A veil on top of the face, because a saturate filter does almost nothing to
   the near-white soap dragon. The cue has to read on every face, not only on
   the colourful ones, so it is a flat wash rather than a colour operation. */
.kong-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));
}
.kong-cell.is-hinted .tl{animation:kongHint 1.05s ease-in-out 3}
@keyframes kongHint{
  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)}
}
.kong-cell.is-sel{z-index:80 !important;transform:translateY(-9px)}
.kong-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);
}
.kong-cell.is-out{z-index:90 !important;transform:translateY(-26px) scale(.84);opacity:0;pointer-events:none}

/* count chip: reads "2 of 4 craks" while a set is being picked. Height is
   reserved so the board never shifts when it appears. */
.kong-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;
}
.kong-pick.is-on{opacity:1}

.kong-seedline{
  margin:0 auto 14px;text-align:center;
  font-family:var(--sans);font-size:12.5px;color:var(--muted);
}
.kong-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;
}
.game-shell.danger #clock{color:#c0392b;animation:pulse 1s infinite}

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

.kong-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);
}
.kong-legend .k{display:inline-flex;align-items:center;gap:7px}
.kong-legend .dot{width:11px;height:11px;border-radius:3px;background:linear-gradient(180deg,#FDFBF7,#E7DFCE);border:1px solid rgba(176,141,87,.5)}
.kong-legend .dot.dim{filter:brightness(.78) saturate(.66)}
.kong-legend .dot.sel{background:linear-gradient(180deg,#C9A96A,#A6884F);border-color:#C9A96A}

/* score sheet */
.kong-sheet{
  display:none;margin:22px auto 0;max-width:520px;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);
}
.kong-sheet.is-on{display:block}
.kong-sheet h2{margin:0 0 12px;font-family:var(--serif);font-size:24px;color:var(--evergreen-deep)}
.kong-sheet dl{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:0;
  font-family:var(--sans);font-size:14px}
.kong-sheet dt{color:var(--muted)}
.kong-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 */
.kong-notes{max-width:760px;margin:0 auto;padding:0 20px 70px}
.kong-notes h2{font-family:var(--serif);font-size:28px;color:var(--evergreen-deep);margin:40px 0 12px}
.kong-notes p{font-size:15.5px;line-height:1.75;color:var(--ink-soft)}
.kong-notes ul{margin:12px 0 0;padding-left:20px}
.kong-notes li{font-size:15.5px;line-height:1.75;color:var(--ink-soft);margin-bottom:7px}
.kong-notes li b{color:var(--evergreen)}
.kong-notes .rules li{margin-bottom:5px}
.kong-notes .tl.inline{vertical-align:-10px}

.kong-swatches{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px}
.kong-swatches .sw{display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:700}

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

/* High-contrast reading theme gets a lighter felt edge so the board still reads
   as a distinct surface rather than merging into the page. */
html.th-hc .kong-board{border-color:rgba(212,180,131,.62)}