/* ============================================================
   MAHJONG.NOW — Game board, tiles, and multiplayer UI
   Loaded on top of main.css (site design system).
   ============================================================ */

:root {
  --felt: #12694a;
  --felt-dark: #0c4a34;
  --felt-light: #178a63;
  --felt-line: rgba(255, 255, 255, 0.22);
  --gold: #e0b84a;
  --tile-face: #fffdf5;
  --tile-face-2: #efe7d2;
  --tile-edge: #cdbf9e;
  --tile-border: #d9cfb3;
}

/* ---- GAME SHELL ---- */
.game-shell {
  background: radial-gradient(ellipse at 50% -20%, var(--felt-light), var(--felt) 55%, var(--felt-dark));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 0 80px rgba(0,0,0,.25);
  padding: .75rem .75rem 1.25rem;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* ---- BACKGROUND THEMES (applied to .game-shell) ---- */
.game-shell.bg-blue     { background: radial-gradient(ellipse at 50% -20%, #3b82f6, #1e5fbf 55%, #143a7a); }
.game-shell.bg-charcoal { background: radial-gradient(ellipse at 50% -20%, #3a4453, #2a3140 55%, #171b22); }
.game-shell.bg-wood     { background: radial-gradient(ellipse at 50% -20%, #a9744f, #7a4e2e 55%, #4d3019); }
.game-shell.bg-plum     { background: radial-gradient(ellipse at 50% -20%, #9d5a99, #6d3f6b 55%, #43273f); }
.game-shell.bg-crimson  { background: radial-gradient(ellipse at 50% -20%, #ef4444, #b23b3b 55%, #7f2018); }

.game-shell:fullscreen { display:flex; flex-direction:column; justify-content:center; border-radius:0; padding:1rem; }
.game-shell:fullscreen .board-wrap { flex:1; height:auto; display:flex; align-items:center; }
/* In fullscreen the flex container centers vertically; drop the engine's own
   vertical margin so it is not centered twice. */
.game-shell:fullscreen .mj-board-sizer { margin-top:0 !important; }

/* ---- TOOLBAR ---- */
.game-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap; padding: .35rem .5rem .6rem;
}
.game-stats {
  display: flex; gap: 1rem; align-items: center; color: #fff;
  font-variant-numeric: tabular-nums; font-size: .85rem; font-weight: 600;
}
.game-stats .stat-label {
  opacity: .65; font-weight: 500; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; margin-right: .25rem;
}
.game-buttons { display: flex; gap: .4rem; flex-wrap: wrap; }
.btn-felt {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius-sm);
  padding: .35rem .7rem; font-size: .8rem; font-weight: 600; cursor: pointer;
  font-family: var(--font); transition: background .15s;
  display: inline-flex; align-items: center; gap: .35rem;
}
.btn-felt:hover { background: rgba(255,255,255,.22); color: #fff; }
.btn-felt:disabled { opacity: .4; cursor: default; }
/* Stable width so the hint counter (18 -> 9 -> ...) never re-wraps the toolbar. */
#btn-hint { min-width: 6.5em; justify-content: center; }
.btn-felt.btn-felt-primary { background: var(--gold); border-color: var(--gold); color: #5c3f0d; }
.btn-felt.btn-felt-primary:hover { background: #edc766; }

/* ---- BOARD ---- */
.board-wrap {
  position: relative; width: 100%; display: block; gap: 0; overflow: hidden;
  /* The play area's height comes from the layout's own aspect ratio (set as
     --board-ar in the template, per layout) so every board gets a snug,
     appropriately-shaped box — squat layouts stay short, tall ones get height.
     Because this is pure CSS it is reserved on the very first paint, so the
     board never pops in and shoves the page down (zero Cumulative Layout
     Shift). The engine only scales the board to fit WITHIN this box and centers
     it; it never changes the height. min/max keep ribbon layouts tappable and
     tall layouts on-screen. */
  aspect-ratio: var(--board-ar, 1.12);
  min-height: 200px;
  max-height: 82vh;
}
/* Very wide layouts (e.g. Dragon) pan horizontally on phones instead of
   shrinking tiles to an un-tappable size. pan-x keeps vertical page scroll and
   taps working; only sideways drags move the board. */
.board-wrap.scroll-x {
  overflow-x: auto; overflow-y: hidden;
  touch-action: pan-x pinch-zoom;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* Holds the board's *scaled* footprint so scrolling and centering are correct
   (a transform alone does not change an element's layout size). */
.mj-board-sizer { position: relative; }
.mj-board {
  position: absolute; top: 0; left: 0; transform-origin: top left;
}
.mj-board * { -webkit-tap-highlight-color: transparent; }

/* ---- TILES ---- */
/* A 3D-ish mahjong tile: an ivory top face with a beige right/bottom edge
   (the tile's thickness) and a soft drop shadow. Everything is scoped under
   .mj-board so generic names never leak onto content pages. */
.mj-board .mj-tile {
  position: absolute;
  border-radius: 7px;
  background: linear-gradient(158deg, var(--tile-face), var(--tile-face-2));
  border: 1px solid var(--tile-border);
  box-shadow: 3px 4px 0 -1px var(--tile-edge), 4px 6px 9px rgba(0,0,0,.32);
  cursor: default;
  will-change: transform, left, top;
  transition: left .16s ease, top .16s ease, box-shadow .12s ease, filter .12s ease;
  overflow: hidden;
}
.mj-board.no-animations .mj-tile { transition: none !important; }
.mj-board .mj-tile-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1;
}
.mj-board .mj-glyph { font-size: 30px; font-weight: 700; line-height: 1; }
.mj-board .mj-sub { font-size: 12px; font-weight: 700; margin-top: 2px; opacity: .85; }

/* Free (playable) tiles brighten and lift on hover; blocked tiles dim.
   Hover styling is gated to real pointers so a tap on a touch screen does not
   leave a tile stuck in the lifted/brightened state. */
.mj-board .mj-tile.free { cursor: pointer; }
@media (hover: hover) {
  .mj-board .mj-tile.free:hover { box-shadow: 3px 4px 0 -1px var(--tile-edge), 6px 9px 14px rgba(0,0,0,.4); filter: brightness(1.04); }
}
.mj-board .mj-tile.blocked::after {
  content: ""; position: absolute; inset: 0; border-radius: 7px;
  background: rgba(20, 30, 25, .26); pointer-events: none;
}
.mj-board .mj-tile.selected {
  outline: 3px solid var(--gold); outline-offset: -1px;
  box-shadow: 3px 4px 0 -1px var(--tile-edge), 0 0 0 3px rgba(224,184,74,.5), 6px 9px 14px rgba(0,0,0,.42);
  filter: brightness(1.06);
}
.mj-board .mj-tile.hint-glow { animation: hintPulse 1s ease-in-out 2; z-index: 9999 !important; }
@keyframes hintPulse {
  0%,100% { box-shadow: 3px 4px 0 -1px var(--tile-edge), 0 0 0 0 rgba(224,184,74,0); }
  50% { box-shadow: 3px 4px 0 -1px var(--tile-edge), 0 0 0 7px rgba(224,184,74,.8); }
}
.mj-board .mj-tile.shake { animation: tileShake .28s ease; }
@keyframes tileShake {
  0%,100% { margin-left: 0; } 25% { margin-left: -5px; } 75% { margin-left: 5px; }
}

/* Suit / honor / bonus glyph colours */
.mj-board .mj-tile.suit-dot .mj-glyph,  .mj-board .mj-tile.suit-dot .mj-sub  { color: #1d4ed8; }
.mj-board .mj-tile.suit-bam .mj-glyph,  .mj-board .mj-tile.suit-bam .mj-sub  { color: #15803d; }
.mj-board .mj-tile.suit-char .mj-glyph { color: #1e293b; }
.mj-board .mj-tile.suit-char .mj-sub   { color: #b23b3b; }
.mj-board .mj-tile.honor-wind .mj-glyph { color: #1e293b; }
.mj-board .mj-tile.dragon-red .mj-glyph { color: #c0392b; }
.mj-board .mj-tile.dragon-green .mj-glyph { color: #15803d; }
.mj-board .mj-tile.dragon-white .mj-glyph { color: #1d4ed8; }
.mj-board .mj-tile.bonus-flower .mj-glyph { color: #a83279; }
.mj-board .mj-tile.bonus-flower .mj-sub   { color: #a83279; }
.mj-board .mj-tile.bonus-season .mj-glyph { color: #0f766e; }
.mj-board .mj-tile.bonus-season .mj-sub   { color: #0f766e; }

/* Tile-style themes (settings) */
.mj-board[data-tiles="bamboo"] .mj-tile { background: linear-gradient(158deg,#f6fbf3,#dcecd6); border-color:#c2ddb9; }
.mj-board[data-tiles="slate"] .mj-tile { background: linear-gradient(158deg,#eef2f7,#cdd6e2); border-color:#b6c1d1; }
.mj-board[data-tiles="slate"] .mj-tile.suit-char .mj-glyph,
.mj-board[data-tiles="slate"] .mj-tile.honor-wind .mj-glyph { color:#0f172a; }

/* ---- WIN OVERLAY ---- */
.game-overlay {
  position: absolute; inset: 0; background: rgba(10, 40, 28, .82);
  backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center;
  z-index: 1200; border-radius: var(--radius-lg);
}
.game-overlay.open { display: flex; }
.game-overlay-card {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 2rem 2.25rem; max-width: 420px; width: calc(100% - 2rem); text-align: center;
}
.game-overlay-card h2, .game-overlay-card .overlay-title { font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin-bottom: .5rem; }
.win-stats { display: flex; justify-content: center; gap: 1.5rem; margin: 1rem 0 1.25rem; }
.win-stats > div { text-align: center; }
.win-stats .num { font-size: 1.4rem; font-weight: 800; color: var(--blue); font-variant-numeric: tabular-nums; }
.win-stats .lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; }
.overlay-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ---- SETTINGS MODAL ---- */
.mj-modal {
  position: fixed; inset: 0; z-index: 2000; background: rgba(15,23,42,.55);
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.mj-modal.open { display: flex; }
.mj-modal-card {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 440px; max-width: 100%; max-height: 88vh; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem;
}
.mj-modal-card h2 { font-size: 1.2rem; margin-bottom: 1rem; display:flex; justify-content:space-between; align-items:center; }
.mj-modal-close { background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--text-muted); line-height:1; }
.mj-set-row { margin-bottom: 1.1rem; }
.mj-set-row > .mj-set-label { font-weight:600; font-size:.9rem; margin-bottom:.45rem; display:block; }
.mj-swatches { display:flex; gap:.5rem; flex-wrap:wrap; }
.mj-swatch { width:48px; height:36px; border-radius:8px; cursor:pointer; border:3px solid transparent; box-shadow: var(--shadow-sm); }
.mj-swatch.active { border-color: var(--gold); }
/* Whole row is a tap target; the checkbox is enlarged for finger use. */
.mj-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.6rem 0; cursor:pointer; min-height:44px; }
.mj-toggle-row > span { font-size:.95rem; flex:1; }
.mj-toggle-row input[type="checkbox"] { width:22px; height:22px; flex-shrink:0; cursor:pointer; accent-color: var(--blue); }

/* ---- CONFETTI ---- */
.confetti {
  position: absolute; width: 10px; height: 14px; top: -20px; z-index: 1100;
  pointer-events: none; animation: confettiFall linear forwards;
}
@keyframes confettiFall { to { transform: translateY(110vh) rotate(720deg); opacity: .2; } }

/* Concise factual intro under the hero */
.home-intro { max-width: 62ch; margin: .25rem 0 1rem; font-size: 1.02rem; line-height: 1.7; color: var(--text-muted); }
.home-intro strong { color: var(--text); }

/* ---- GAME PAGE LAYOUT ---- */
.game-header { margin: 1.25rem 0 .75rem; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.game-header h1 { font-size: 1.45rem; }
.game-header .tagline { color: var(--text-muted); font-size: .92rem; }
.mode-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.mode-tab {
  padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: .82rem; font-weight: 600;
}
.mode-tab:hover { border-color: var(--blue); color: var(--blue); }
.mode-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Below-the-fold content */
.game-content { margin-top: 2.5rem; }
.game-content h2 { margin: 2rem 0 .75rem; font-size: 1.35rem; }
.game-content h3 { margin: 1.25rem 0 .5rem; }
.howto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; margin: 1rem 0; }
.howto-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm);
}
.howto-card h3 { margin: 0 0 .4rem; font-size: 1rem; color: var(--blue-dark); }
.howto-card p { font-size: .9rem; margin: 0; }
.howto-card.has-img { padding-top: 0; overflow: hidden; }
.howto-card .howto-img {
  width: calc(100% + 2.5rem); max-width: none; margin: 0 -1.25rem .95rem;
  height: 200px; object-fit: cover; object-position: center; display: block;
  border-bottom: 1px solid var(--border); background: var(--surface-3);
}
@media (max-width: 480px) { .howto-card .howto-img { height: 170px; } }
.strategy-list { margin: .75rem 0 1rem 1.25rem; color: var(--text-muted); }
.strategy-list li { margin-bottom: .55rem; font-size: .95rem; }
ol.strategy-list.numbered { list-style: decimal; padding-left: .5rem; }
ol.strategy-list.numbered li { padding-left: .35rem; }
ol.strategy-list.numbered li::marker { color: var(--blue); font-weight: 800; }

.tldr {
  background: var(--blue-light); border-left: 4px solid var(--blue); border-radius: var(--radius-sm);
  padding: .8rem 1.1rem; font-size: .96rem; line-height: 1.65; margin: 0 0 1.25rem; color: var(--text);
}
.tldr strong { color: var(--blue-dark); }
.tip-callout {
  background: var(--accent-light, #fdf7e3); border: 1px solid #f2dfa3; border-radius: var(--radius-sm);
  padding: .75rem 1rem; font-size: .95rem; line-height: 1.6; margin: .5rem 0 1rem;
}
.facts-table {
  width: 100%; border-collapse: collapse; margin: .5rem 0 1.5rem; font-size: .93rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.facts-table th, .facts-table td { padding: .6rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.facts-table tr:last-child th, .facts-table tr:last-child td { border-bottom: none; }
.facts-table th { width: 34%; background: var(--surface-2); font-weight: 700; color: var(--text); white-space: nowrap; }
.facts-table td { color: var(--text-muted); }
@media (max-width: 520px) { .facts-table th { width: 42%; white-space: normal; } }

/* ---- FAQ ACCORDION ---- */
.faq-accordion { margin-top: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.faq-acc-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.faq-acc-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.25rem; cursor: pointer; list-style: none; user-select: none;
}
.faq-acc-item summary::-webkit-details-marker { display: none; }
.faq-acc-item summary h3 { font-size: 1rem; margin: 0; color: var(--text); }
.faq-acc-item[open] summary h3 { color: var(--blue-dark); }
.faq-acc-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform .2s ease; }
.faq-acc-item[open] .faq-acc-chevron { transform: rotate(180deg); }
.faq-acc-item summary:hover h3 { color: var(--blue); }
.faq-acc-body { padding: 0 1.25rem 1.15rem; }
.faq-acc-body p { font-size: .92rem; margin: 0; color: var(--text-muted); }

.faq-list { margin-top: 1rem; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: .75rem; }
.faq-item h3 { margin: 0 0 .4rem; font-size: 1rem; }
.faq-item p { font-size: .92rem; margin: 0; }

.variant-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-top: 1rem; }
.variant-card {
  display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, border-color .15s; color: var(--text);
}
.variant-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--blue-border); color: var(--text); }
.variant-card .vc-name { font-weight: 700; color: var(--blue-dark); margin-bottom: .25rem; display: flex; align-items: center; gap: .4rem; }
.variant-card .vc-tag { font-size: .84rem; color: var(--text-muted); line-height: 1.45; }
.variant-card .vc-meta { margin-top: .6rem; font-size: .72rem; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: .04em; }

/* ---- 404 PAGE (tile hero) ---- */
.nf-hero {
  position: relative; text-align: center; color: #fff;
  background: radial-gradient(ellipse at 50% -10%, var(--felt-light), var(--felt) 55%, var(--felt-dark));
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), inset 0 0 80px rgba(0,0,0,.25);
  padding: 2.5rem 1.25rem 2.75rem; overflow: hidden;
}
.nf-hero h1 { color: #fff; font-size: 1.7rem; margin: .25rem 0 .5rem; }
.nf-hero p { color: rgba(255,255,255,.85); max-width: 34rem; margin: 0 auto 1.5rem; line-height: 1.6; }
.nf-code { font-size: 3rem; font-weight: 800; letter-spacing: .1em; color: var(--gold); line-height: 1; margin-top: 1rem; text-shadow: 0 2px 8px rgba(0,0,0,.3); }
.nf-cards { display: flex; justify-content: center; align-items: flex-end; gap: 0; height: 108px; margin-bottom: .25rem; }
.nf-card {
  width: 62px; height: 84px; border-radius: 8px;
  background: linear-gradient(158deg,#fffdf5,#efe7d2); border: 1px solid #d9cfb3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 800; box-shadow: 3px 5px 0 -1px #cdbf9e, 4px 8px 14px rgba(0,0,0,.4); margin: 0 -4px;
}
.nf-card b { font-size: 1.7rem; line-height: 1; }
.nf-card.t1 { color: #1d4ed8; transform: rotate(-10deg); }
.nf-card.t2 { color: #c0392b; transform: translateY(-12px) rotate(3deg) scale(1.06); z-index: 2; }
.nf-card.t3 { color: #15803d; transform: rotate(10deg); }
.nf-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.btn-outline-light {
  background: transparent; border: 1px solid rgba(255,255,255,.55); color: #fff;
  padding: .55rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem;
}
.btn-outline-light:hover { background: rgba(255,255,255,.14); color: #fff; }
.nf-linkcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.25rem; margin-top: 1rem; text-align: left; }
.nf-linkcols h3 { font-size: 1rem; color: var(--blue-dark); margin-bottom: .5rem; }
.nf-linkcols ul { list-style: none; padding: 0; margin: 0; }
.nf-linkcols li { margin-bottom: .4rem; }
.nf-linkcols a { font-size: .92rem; }

/* ---- MULTIPLAYER ---- */
.mp-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.mp-players { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mp-player { padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.mp-player.me { border-color: var(--blue-border); background: var(--blue-light); }
.mp-player .mp-name { font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.mp-player .mp-status { font-size: .75rem; color: var(--text-muted); }
.mp-progress-track { height: 10px; border-radius: 999px; background: var(--surface-3); margin-top: .5rem; overflow: hidden; }
.mp-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--blue), #22c55e); border-radius: 999px; transition: width .4s ease; }
.mp-code { font-size: 1.6rem; font-weight: 800; letter-spacing: .35em; font-variant-numeric: tabular-nums; background: var(--surface-3); border-radius: var(--radius-sm); padding: .4rem .6rem .4rem .9rem; display: inline-block; }
.mp-chat { max-height: 180px; overflow-y: auto; font-size: .85rem; margin: .5rem 0; }
.mp-chat .mp-chat-line { margin-bottom: .25rem; }
.mp-chat .mp-chat-name { font-weight: 700; color: var(--blue-dark); }
.mp-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mp-dot.on { background: #22c55e; }
.mp-dot.off { background: #cbd5e1; }

/* ---- RATING WIDGET ---- */
.rating-widget {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem;
  padding: .7rem 1.1rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); font-size: .9rem;
}
.rating-label { font-weight: 600; color: var(--text); }
.rating-stars { display: inline-flex; }
.rating-star { background: none; border: none; cursor: pointer; padding: 0 .1rem; font-size: 1.5rem; line-height: 1; color: #d1d5db; transition: color .1s; }
.rating-star.on { color: var(--gold); }
.rating-star:hover { color: #edc766; }
.rating-summary { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rating-widget.rated .rating-label::after { content: " thanks!"; color: var(--blue); font-weight: 400; }

/* ---- STATS BAR ---- */
.stats-strip {
  display: flex; gap: 1.75rem; flex-wrap: wrap; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem 1.25rem;
  margin-top: 1rem; box-shadow: var(--shadow-sm);
}
.stats-strip > div { text-align: center; }
.stats-strip .num { font-weight: 800; font-size: 1.1rem; color: var(--blue-dark); font-variant-numeric: tabular-nums; }
.stats-strip .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; }

@media (max-width: 640px) {
  .game-shell { padding: .4rem .4rem .75rem; border-radius: var(--radius); }
  .game-stats { gap: .6rem; font-size: .78rem; }
  .mp-players { grid-template-columns: 1fr; }
  .game-header h1 { font-size: 1.2rem; }
  .mj-board .mj-glyph { font-size: 26px; }

  /* Larger, finger-friendly toolbar controls (>=44px tall touch targets). */
  .game-buttons { gap: .35rem; }
  .btn-felt {
    min-height: 44px; padding: .5rem .8rem; font-size: .82rem;
  }
  #btn-settings, #btn-fullscreen { min-width: 44px; justify-content: center; padding: .5rem; font-size: 1rem; }
  /* Win-overlay + play-again buttons comfortable to tap. */
  .overlay-actions .btn, .overlay-actions a.btn { min-height: 44px; }
  .mode-tab { padding: .45rem .9rem; }
}