/* Mahjong Drop — the falling-block game. Built from the site's own theme
   variables so it reads as one more room in the same house, and laid out with
   the same "control console" the memory and connect games use: a hero band, a
   framed stat bar, level dots, then the board.

   Suit colours are the one exception. They are functional, not decorative: a
   player has to tell a dot from a bam at a glance, so they are pinned here and
   not taken from the theme. */

/* Page hero reuses the site's standard .page-hero. It sits OUTSIDE <main> so
   its green band spans the viewport edge to edge; only the inner .wrap is
   scoped, so the text column lines up with the 920px well below it. */
.page-hero.game-hero{padding:50px 0 46px}
.page-hero.game-hero .wrap{max-width:860px;padding:0 20px}
.page-hero.game-hero .eyebrow{margin-bottom:12px}
.page-hero.game-hero h1{margin:0 0 14px}

/* While a level is running the hero gives most of its height back to the well,
   because on this game the board is the page. The band stays so the masthead
   does not butt straight into the console bar. */
html.mdrop-playing .page-hero.game-hero{display:none}
html.mdrop-playing #main{padding-top:22px}
@media (min-height:1000px){
  html.mdrop-playing .page-hero.game-hero{display:block;padding:12px 0 13px}
  html.mdrop-playing .page-hero.game-hero h1{font-size:22px;margin:0}
}
html.mdrop-playing .page-hero.game-hero .eyebrow,
html.mdrop-playing .page-hero.game-hero p{display:none}

.mdrop{position:relative}

/* ---- framed control console (same language as the other two games) ---- */
.game-bar{
  display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
  margin-bottom:16px;
  border:1px solid var(--rule);
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(150% 130% at 0% 0%, rgba(176,141,87,.12), transparent 55%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:0 12px 28px rgba(20,42,30,.10), inset 0 1px 0 rgba(255,255,255,.75);
}

/* stat block — small engraved label over a large serif value */
.stats{display:grid;flex:1 1 100%;min-width:0}
.console-4 .stats{grid-template-columns:repeat(4,1fr)}
.stat{
  display:flex;flex-direction:column;gap:4px;justify-content:center;
  padding:11px 14px;
  border-right:1px solid var(--rule);
  font-family:var(--sans);
}
.stat:last-child{border-right:none}
.stat .lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stat .val{display:flex;align-items:baseline;gap:3px;line-height:1}
.stat b{font-family:var(--serif);font-size:22px;color:var(--evergreen-deep);font-variant-numeric:tabular-nums;font-weight:700}
.stat .sep{font-size:16px;color:var(--muted);font-weight:600}
.stat .den{font-size:15px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
/* the clock turns red and pulses under 15s */
.stat b.low{color:#c0392b;animation:mdPulse 1s infinite}
@keyframes mdPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* control zone (next-piece preview, then the buttons) */
.controls-zone{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  width:100%;
  padding:10px 16px;
  background:rgba(255,255,255,.42);
  border-top:1px solid var(--rule);
}
.buttons{display:flex;gap:10px;align-items:center;margin-left:auto;flex-wrap:wrap}
.game-bar .btn-primary{padding:9px 16px;font-size:13.5px}
.game-bar .btn-ghost{padding:9px 16px;font-size:13.5px}
/* Ghost buttons must read on the light console bar. The global .btn-ghost is
   drawn for the dark hero, where its light text disappears on cream. */
.game-bar .btn-ghost{
  background:var(--cream,#f6f2e6);
  color:var(--evergreen-deep,#0E2A1E);
  border:1px solid var(--rule,#e2d8c3);
  box-shadow:0 2px 8px rgba(20,42,30,.10);
}
.game-bar .btn-ghost:hover{background:#efe7d6;transform:translateY(-2px)}

/* level name, sat next to the level select on the landing console */
.ctl{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12.5px;color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ctl .sel{font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 10px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);text-transform:none;letter-spacing:0;font-weight:500;transition:.15s}
.ctl .sel:hover{border-color:var(--brass)}
.lvname{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--evergreen-deep);text-transform:none;letter-spacing:0}
/* The preview keeps one fixed slot whatever the piece looks like, so the
     console bar never changes height while a level is running, and it scales
     itself down in JS when a five-tall bar would not fit. */
.mdrop-next{height:44px;display:flex;align-items:center;justify-content:center}
.mdrop-next .mdrop-nbox{transition:transform .12s ease}

/* level progress dots */
.lvl-dots{display:flex;gap:9px;justify-content:center;margin:0 0 14px}
.lvl-dot{width:11px;height:11px;border-radius:50%;background:var(--rule);border:1px solid var(--line);transition:.2s}
.lvl-dot.done{background:var(--evergreen);border-color:var(--evergreen)}
.lvl-dot.current{background:var(--brass);border-color:var(--brass);box-shadow:0 0 0 3px rgba(176,141,87,.25)}

/* landing help — the rules, as a definition list rather than a paragraph */
.mdrop-help{
  margin-top:4px;padding:20px 22px;
  border:1px solid var(--rule);border-radius:16px;
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 20px rgba(20,42,30,.07);
  font-family:var(--sans);
}
.mdrop-help h2{font:700 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.mdrop-help dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:0}
.mdrop-help dt{font:700 13.5px/1.55 var(--sans);color:var(--evergreen-deep);white-space:nowrap}
.mdrop-help dd{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.mdrop-help dd b{color:var(--evergreen-deep)}
.mdrop-help .best{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink-soft)}

/* ---- board card + well ----
   The well is the page, so it gets the house's framed board card around it:
   a cream panel, a label rail across the top, the felt inside with its brass
   frame. Without the card the tower floated on an empty page. */
.board-wrap{
  padding:16px 18px 20px;
  border:1px solid var(--rule);border-radius:18px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(176,141,87,.10), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:0 12px 30px rgba(20,42,30,.10), inset 0 1px 0 rgba(255,255,255,.7);
}
.board-label{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 12px;font-family:var(--sans);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.board-label span{display:inline-flex;align-items:center;gap:7px}
.board-label b{font-family:var(--sans);font-size:12px;color:var(--evergreen-deep);
  font-weight:700;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.board-wrap .lvl-dots{margin:0 0 12px}
/* The well and its rail sit side by side; the card is only as wide as the
   pair of them, so there is no empty felt to explain. */
.board-grid{display:flex;gap:18px;justify-content:center;align-items:flex-start}
.mdrop-stage{display:flex;justify-content:center}
.board-rail{
  width:196px;flex:0 0 auto;align-self:stretch;
  display:flex;flex-direction:column;gap:13px;
  padding:14px;border:1px solid var(--rule);border-radius:14px;
  background:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.rail-box{display:flex;flex-direction:column;gap:7px;align-items:center}
.rail-box .lbl,.rail-meta .lbl{font-family:var(--sans);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.rail-meta{display:flex;flex-direction:column;gap:2px;padding-top:11px;border-top:1px solid var(--rule)}
.rail-meta b{font-family:var(--serif);font-size:19px;color:var(--evergreen-deep);
  font-variant-numeric:tabular-nums;line-height:1.1}
.board-rail .lvl-dots{margin:0;justify-content:center}
.board-rail .mdrop-next{height:64px}
.board-rail .mdrop-pad{margin:auto 0 0;gap:9px}
.board-rail .mdrop-pbtn{width:52px;height:52px;border-radius:13px;font-size:18px}
.mdrop-well{position:relative;flex:0 0 auto;padding:12px;border:3px solid var(--brass);border-radius:16px;
  background:linear-gradient(180deg, var(--evergreen), var(--evergreen-deep));
  box-shadow:0 18px 44px rgba(20,42,30,.28), inset 0 0 70px rgba(0,0,0,.38)}
.mdrop-grid{display:grid;gap:3px;position:relative;z-index:2;grid-template-columns:repeat(10,var(--cs))}
.mdrop-cell{width:var(--cs);height:var(--cs);border-radius:5px;
  background:rgba(255,255,255,.075);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mdrop-cell.filled{background:none;box-shadow:none}
/* the glow has to sit outside the cell: a filled cell is covered by its block */
.mdrop-cell.hint{outline:2px solid rgba(201,169,106,.9);outline-offset:1px;box-shadow:0 0 12px rgba(201,169,106,.5)}
.mdrop-cell.ready{outline:2px solid rgba(230,206,146,1);outline-offset:1px;box-shadow:0 0 18px rgba(230,206,146,.8)}

/* One piece carries one suit, so a piece reads as a block and not as four loose
   tiles. Ink is a token pair: --fi fills, --fe outlines, --fj cuts the grooves.
   Any detail layer has to contrast with --fi or it is invisible on the face. */
.mdrop .bk{position:relative;display:block;width:100%;height:100%;border-radius:11%;padding:6%;
  background:linear-gradient(158deg,var(--bl),var(--bd));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.26), 0 2px 4px rgba(0,0,0,.34);
  --fi:rgba(255,255,255,.95);--fe:rgba(0,0,0,.24);--fj:rgba(0,0,0,.34)}
/* a soft sheen across the upper half keeps the block reading as a glazed tile */
.mdrop .bk::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(148deg,rgba(255,255,255,.2),rgba(255,255,255,0) 48%)}
.mdrop .bk .tf{display:block;width:100%;height:100%}
.mdrop .bk .fp{fill:var(--fi);stroke:var(--fe);stroke-width:1.1;paint-order:stroke fill}
.mdrop .bk .fr{fill:none;stroke:var(--fi);stroke-width:2.6}
.mdrop .bk .fj{fill:none;stroke:var(--fj);stroke-width:1.7;stroke-linecap:round}
.mdrop .bk .fhl{fill:none;stroke:rgba(0,0,0,.16);stroke-width:1.1;stroke-linecap:round}
.mdrop .bk .fd{fill:none;stroke:var(--fj);stroke-width:2.4}
.mdrop .bk .fs{fill:none;stroke:var(--fi);stroke-width:3.4}
.mdrop .bk .fsi{fill:none;stroke:var(--fi);stroke-width:2}
.mdrop .bk .ft{fill:var(--fi);stroke:var(--fe);stroke-width:.9;paint-order:stroke fill;
  font-family:'Songti SC','SimSun','Noto Serif CJK SC',Georgia,serif;font-weight:700}
.mdrop .bk.obs{filter:brightness(.76) saturate(.72)}
.mdrop .bk.dice{animation:mdDice 1s steps(2,end) infinite}
@keyframes mdDice{0%,100%{filter:brightness(1)}50%{filter:brightness(1.4) saturate(1.2)}}

/* Suit faces. Six families, each one colour, so a block's suit is legible from
   across the room. */
.mdrop [data-suit="dot"]{--bd:#2F7FA6;--bl:#63A8C8}
.mdrop [data-suit="bam"]{--bd:#3F8A55;--bl:#6FB383}
.mdrop [data-suit="crak"]{--bd:#B44E42;--bl:#DA7365}
.mdrop [data-suit="wind"]{--bd:#77589A;--bl:#9D7DBE}
.mdrop [data-suit="dragon"]{--bd:#BD9634;--bl:#E0C069}
.mdrop [data-suit="flower"]{--bd:#A2405C;--bl:#C4567A}
.mdrop [data-suit="joker"]{--bd:#B08D57;--bl:#DFC794;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.2), 0 0 12px rgba(223,199,148,.55)}
.mdrop [data-suit="joker"]{--fi:#3A2C12;--fe:transparent;--fj:rgba(58,44,18,.5)}
/* Gold and joker are the lightest faces in the set: white ink on either
   measures under 2:1 and the strokes wash out, dark ink measures above 7:1. */
.mdrop [data-suit="dragon"]{--fi:#3E2E10;--fe:transparent;--fj:rgba(62,46,16,.5)}

/* the falling piece */
.mdrop-piece{position:absolute;top:0;left:0;z-index:5;pointer-events:none;display:grid;gap:3px}
.mdrop-piece .pb{width:var(--cs);height:var(--cs)}
.mdrop-piece .pb.empty{background:none}

/* next-piece preview, sized to sit inside the console bar */
.mdrop-next{display:flex;align-items:center;justify-content:center;min-height:34px}
.mdrop-nbox{display:grid;gap:2px}
.mdrop-nbox .nb{width:var(--nb,15px);height:var(--nb,15px)}

/* ---- on-screen pad ---- */
.mdrop-pad{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0 0;flex-wrap:wrap}
.mdrop-sep{width:1px;height:36px;background:var(--rule)}
.mdrop-pbtn{width:56px;height:56px;border-radius:14px;border:1px solid var(--rule);
  background:var(--surface);color:var(--evergreen-deep);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font:700 19px/1 var(--sans);
  box-shadow:0 3px 10px rgba(20,42,30,.12);-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:.15s}
.mdrop-pbtn:hover{border-color:var(--brass);transform:translateY(-2px)}
.mdrop-pbtn:active{background:var(--cream);transform:translateY(1px)}
.mdrop-pbtn.key{background:var(--evergreen);color:#fff;border-color:var(--evergreen)}
.mdrop-pbtn.key:hover{background:var(--evergreen-deep)}

.mdrop-hintline{margin:14px 0 0;font-family:var(--sans);font-size:13px;color:var(--muted);text-align:center}

/* ---- overlay (pause, level lost, level cleared) ---- */
.mdrop-ov{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(8,22,15,.84);border-radius:16px;padding:20px;text-align:center}
.mdrop-ov[hidden]{display:none}
.mdrop-ovin{max-width:360px}
.mdrop-ovin h2{font:700 25px/1.2 var(--serif);color:var(--brass-lt);margin:0 0 8px}
.mdrop-ovin p{color:#D9D2C2;font-size:13.5px;line-height:1.65;margin:0 0 16px}
.mdrop-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.mdrop-btn{font-family:var(--sans);font-size:13.5px;font-weight:600;color:#fff;background:var(--evergreen);
  border:1px solid var(--evergreen);border-radius:10px;padding:9px 16px;cursor:pointer;transition:.15s}
.mdrop-btn:hover{filter:brightness(1.1)}
.mdrop-btn.ghost{background:rgba(255,255,255,.08);color:var(--brass-lt);border-color:rgba(212,180,131,.4)}
.mdrop-btn.ghost:hover{background:rgba(255,255,255,.15)}

/* ---- clear effects ---- */
.mdrop-fx{position:absolute;inset:0;z-index:14;pointer-events:none;overflow:hidden;border-radius:16px}
.mdrop-flash{position:absolute;left:0;right:0;pointer-events:none;border-radius:4px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent);
  mix-blend-mode:screen;animation:mdFlash .42s ease-out forwards}
@keyframes mdFlash{0%{opacity:0;transform:scaleX(.72)}35%{opacity:1;transform:scaleX(1.03)}100%{opacity:0;transform:scaleX(1.14)}}
.mdrop-spark{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#FFF8E2,var(--brass-lt));animation:mdSpark .62s ease-out forwards}
@keyframes mdSpark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
.mdrop-pop{position:absolute;font:700 22px/1 var(--serif);color:var(--brass-lt);pointer-events:none;
  text-shadow:0 2px 12px rgba(0,0,0,.6);animation:mdPop 1s ease-out forwards}
@keyframes mdPop{0%{opacity:0;transform:translateY(6px) scale(.8)}22%{opacity:1;transform:translateY(-4px) scale(1.12)}
  100%{opacity:0;transform:translateY(-40px) scale(1)}}
.mdrop-ring{position:absolute;border-radius:50%;pointer-events:none;border:3px solid var(--brass-lt);
  animation:mdRing .7s ease-out forwards}
@keyframes mdRing{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(1.9)}}
.mdrop-beam{position:absolute;top:-6%;width:44px;height:112%;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(201,169,106,.5),transparent);
  animation:mdBeam .95s ease-out forwards}
@keyframes mdBeam{0%{opacity:0;transform:translateX(0) skewX(-14deg)}25%{opacity:.85}
  100%{opacity:0;transform:translateX(-120px) skewX(-14deg)}}
.mdrop-shard{position:absolute;width:15px;height:20px;border-radius:3px;pointer-events:none;
  background:linear-gradient(150deg,var(--brass-lt),var(--brass));box-shadow:0 0 10px rgba(201,169,106,.5);
  animation:mdShard 1.25s cubic-bezier(.25,.6,.3,1) forwards}
@keyframes mdShard{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;
  transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}
.mdrop-wave{position:absolute;left:0;right:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--brass-lt),transparent);animation:mdWave .6s ease-out forwards}
@keyframes mdWave{0%{opacity:.9;transform:scaleY(1)}100%{opacity:0;transform:scaleY(6)}}
.mdrop-float{position:absolute;pointer-events:none;font:700 15px/1 var(--sans);color:var(--brass-lt);
  text-shadow:0 2px 10px rgba(0,0,0,.7);animation:mdFloat 1.05s ease-out forwards}
@keyframes mdFloat{0%{opacity:0;transform:translateY(4px)}18%{opacity:1}100%{opacity:0;transform:translateY(-34px)}}

/* ---- full screen ---- */
/* The shell goes fixed. z-index has to clear the site's own fixed masthead
   (z 60 in site.css) or the well ends up underneath the header. */
.mdrop.fs{position:fixed;inset:0;z-index:70;max-width:none;margin:0;overflow:auto;
  background:var(--surface);padding:14px 16px 22px}

/* ---- small screens ---- */
/* A short viewport cannot hold a 20-row board and the full chrome at a
   readable cell size, so the chrome gives way rather than the board: the band
   is already gone, the hint line and the dots' breathing room go next, the
   card tightens, and the pad pins itself to the bottom of the screen so the
   controls stay under the thumb. 860px of height is the break-even point. */
@media (max-height:999px){
  html.mdrop-playing #main{padding-top:12px}
  .game-bar{margin-bottom:12px}
  .board-wrap{padding:10px 14px 14px}
  /* the well-size note is dressing; the board is the point. It steps aside on
     a short screen, along with the hint line and the wide row gaps. The level
     name stays, because that one is orientation rather than decoration. */
  .board-label span:first-child{display:none}
  .mdrop-grid,.mdrop-piece{gap:2px}
  .mdrop-well{padding:8px}
  /* the pad is positioned for the phone in the block below; on a short
     desktop window the board shrinks until it fits, so it needs no help */
  .mdrop-hintline{display:none}
  .stat{padding:10px 13px}
  /* Stacked, the console costs about 146px of a 720px window, which leaves the
     well longer than the space it has and cuts the rail's keys off. Side by
     side it costs roughly half that, and the board gets the difference. Only
     where there is width for both; a narrow screen keeps them stacked. */
  .game-bar .stats{flex:1 1 auto}
  .game-bar .controls-zone{width:auto;flex:0 0 auto;border-top:none;border-left:1px solid var(--rule)}
}
@media (max-width:680px){
  /* the keyboard hint is desktop advice; on a phone it only eats height */
  .mdrop-hintline{display:none}
  .board-wrap{padding:12px 12px 14px;border-radius:14px}
  .game-bar{flex-direction:column}
  .console-6 .stats{grid-template-columns:repeat(3,1fr)}
  .console-4 .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid var(--rule)}
  .console-6 .stat:nth-child(3n){border-right:none}
  .console-4 .stat:nth-child(2n){border-right:none}
  .console-6 .stat:nth-child(n+4),
  .console-4 .stat:nth-child(n+3){border-bottom:none}
  .controls-zone{justify-content:flex-start}
  /* Four short stat cells still fit one row on a phone; folding them into two
     cost 64px of height, which the board wanted more. */
  .console-4 .stats{grid-template-columns:repeat(4,1fr)}
  .stat{padding:9px 9px}
  .stat .lbl{font-size:9px;letter-spacing:.09em}
  .stat b{font-size:18px}
  .stat .den{font-size:12px}
  .game-bar .btn-primary,.game-bar .btn-ghost{padding:8px 10px;font-size:12px}
  .buttons{gap:8px}
  .board-label{justify-content:center}
  /* the cabinet stacks: well first, then the rail under it as a strip */
  .board-grid{flex-direction:column;gap:12px;align-items:stretch}
  .board-rail{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;
    justify-content:center;gap:12px 18px;padding:12px}
  .board-rail .mdrop-next{height:44px}
  .board-rail .mdrop-pad{margin:0;width:100%}
  .rail-meta{flex-direction:row;align-items:baseline;gap:7px;padding-top:0;border-top:none}
  .rail-meta b{font-size:16px}
  .buttons{margin-left:0;width:100%}
  .buttons .btn{flex:1}
}
/* The site pins a 72px icon dock to the bottom of every screen at 1020px and
   under. Mid-game it is in the way of the keys, so it steps aside for as long
   as a level is running; the masthead Menu and the Levels button in the console
   both still lead out. */
@media (max-width:1020px){
  html.mdrop-playing .mobile-bar{display:none}
  html.mdrop-playing body{padding-bottom:0}
}
@media (max-width:560px){
  /* mid-game on a phone the rail is for the piece that is coming and the
     keys under your thumb; the best-run and drop readouts are for the landing
     screen, and the dots for the level picker. */
  .board-rail .lvl-dots,.board-rail .rail-meta{display:none}
  .mdrop-well{padding:8px;border-width:2px}
  .mdrop-grid{gap:2px}
  .mdrop-piece{gap:2px}
  .mdrop-help{padding:16px}
  .mdrop-help dl{grid-template-columns:1fr;gap:2px 0}
  .mdrop-help dt{margin-top:8px}
  /* same specificity as the rail rule above, so it actually wins */
  .board-rail .mdrop-pbtn{width:48px;height:48px;font-size:17px;border-radius:12px}
  .mdrop-pad{gap:7px}
  .mdrop-hintline{font-size:11.5px;margin-top:10px}
  .stat{padding:11px 12px}
  .stat b{font-size:20px}
}

/* The card hugs the well and its rail instead of stretching to the page width,
   which left roughly 200px of empty felt beside an eight-column well on a 1440
   screen. The 681-760px band is where the pair is wider than the space it has,
   so max-width clamps it there rather than pushing a scrollbar. */
@media (min-width:681px){
  .board-wrap{width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
}

/* Keys pinned to the bottom of the screen. Fixed rather than sticky: both the
   rail and the board card are only as tall as their contents, so a sticky box
   has no slack to travel in — trying it dropped the keys straight onto the
   readouts above them. A phone gets this by width, a squat window by height. */
@media (max-width:680px),(max-height:640px){
  .mdrop-pad{
    position:fixed;left:14px;right:14px;bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:12;margin:0;gap:8px;flex-wrap:nowrap;justify-content:center;
    padding:9px;border-radius:16px;
    background:rgba(253,251,247,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 10px 28px rgba(20,42,30,.18)
  }
  /* room under the board so the pinned keys never hide the last row */
  #mdGame{padding-bottom:86px}
}

/* Night vision: when dark-green night is on (html.md-night), the well re-tints
   to a dark phosphor green so the playfield reads as a night scope rather than
   flat black. Suit colours are untouched — they are functional, not decorative,
   so a player still tells a dot from a bam at a glance. */
html.md-night .mdrop-well{
  background:linear-gradient(180deg,#0E2A1E,#05130D);
  border-color:#1F6B4A;
  box-shadow:0 18px 44px rgba(0,0,0,.55), inset 0 0 92px rgba(46,160,110,.26), 0 0 0 1px rgba(46,160,110,.22);
}
html.md-night .mdrop-cell{background:rgba(124,204,162,.07);box-shadow:inset 0 0 0 1px rgba(124,204,162,.10)}
html.md-night .mdrop-cell.hint{outline-color:rgba(124,220,162,.9);box-shadow:0 0 12px rgba(124,220,162,.42)}
html.md-night .mdrop-cell.ready{outline-color:rgba(182,255,202,1);box-shadow:0 0 18px rgba(182,255,202,.68)}
/* The night toggle shows its active state with a green chip so it is obvious
   which mode is live, independent of the other ghost buttons in the console. */
[data-night][aria-pressed="true"]{background:#0E2A1E;color:#9BE7C4;border-color:#1F6B4A}
[data-night][aria-pressed="true"]:hover{background:#13382A}

/* ============================================================
   Night vision — a dedicated dark-green theme, matching the puzzle,
   spot-the-difference and memory games. Replaces the old reuse of the
   site's high-contrast token (html.th-hc), which left the page chrome
   cream / near-black while only the well turned green. The hero, console
   and well draw from site.css tokens, so re-scoping those tokens to night
   values re-tints the whole page to evergreen-night. Independent of the
   site reading themes (Evergreen / Warm / High-contrast).
   ============================================================ */
html.md-night{
  --paper:#0B1913; --paper-rgb:11,25,19;
  --surface:#0E2A1E; --surface-2:#08160F;
  --ink:#E9F2EC; --ink-soft:#C7D8CE;
  --muted:#8FA89C; --muted-lt:#A6BDB1;
  --evergreen:#2D6A4F; --evergreen-deep:#1B4332; --evergreen-2:#3FA173;
  --brass:#D8B985; --brass-lt:#EBD6AB; --brass-deep:#B8945A;
  --gold:#D8B985; --gold-2:#EBD6AB;
  --line:rgba(233,242,236,.12); --rule:rgba(233,242,236,.16); --rule-soft:rgba(233,242,236,.09);
  --cream:#12251C; --cream-deep:#0E2A1E;
  --hero-ink:#E9F2EC; --hero-soft:#C7D8CE;
  --nav-ink:#E9F2EC; --on-accent:#0B1913;
  --btn-bg:#2D6A4F; --btn-bg-lt:#3FA173;
  --footer-accent:#D8B985; --hero-accent:#D8B985;
  --evergreen-rgb:45,106,79;
}
/* keep the chrome evergreen even if the site high-contrast token is also on */
html.md-night .page-hero{background:linear-gradient(180deg,var(--evergreen-deep),var(--evergreen));color:var(--hero-ink)}
html.md-night .page-hero:before{background:none}
html.md-night .masthead{background:var(--evergreen-deep);color:var(--hero-ink)}
html.md-night .masthead .brand .mark,
html.md-night .masthead .brand .tag{color:var(--hero-ink)}
/* translucent "cream" panels become dim green glass in night */
html.md-night .controls-zone{background:rgba(255,255,255,.06)}
html.md-night .board-rail{background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
html.md-night .mdrop-pad{background:rgba(14,42,30,.92);box-shadow:0 10px 28px rgba(0,0,0,.4)}
/* text that was evergreen-deep on cream would vanish on the dark felt */
html.md-night .stat b,
html.md-night .stat .sep,
html.md-night .stat .den,
html.md-night .lvname,
html.md-night .mdrop-help dt,
html.md-night .mdrop-help dd,
html.md-night .rail-meta b,
html.md-night .board-label b{color:var(--ink)}
html.md-night .mdrop-help dd b{color:var(--brass-lt)}
/* on-screen direction keys read as dark glass with light ink in night */
html.md-night .mdrop-pbtn{background:var(--surface);color:var(--ink);border-color:var(--rule)}
html.md-night .mdrop-pbtn:active{background:var(--cream)}
html.md-night .mdrop-pbtn.key{background:var(--evergreen);color:#fff;border-color:var(--evergreen)}

/* help modal (opened by top-bar "?") */
.md-modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:82;
  background:rgba(0,0,0,.5); backdrop-filter:blur(5px); opacity:0; transition:opacity .3s; }
.md-modal.show{ opacity:1; }
.md-modal[hidden]{ display:none; }
.md-modal-card{ position:relative; width:min(520px,92vw); max-height:88vh; overflow:auto; text-align:left;
  padding:28px 26px; background:#fff; color:#14261F; border:1px solid rgba(20,38,31,.14);
  border-top:3px solid #B08D57; border-radius:20px;
  box-shadow:0 12px 28px rgba(20,38,31,.16), 0 30px 64px rgba(20,38,31,.20);
  transform:translateY(16px) scale(.96); transition:transform .35s cubic-bezier(.2,.9,.3,1.3); }
.md-modal.show .md-modal-card{ transform:none; }
.md-modal-card h2{ font-family:var(--serif,Georgia,serif); font-size:24px; color:#8A6B3B; margin:0 0 14px; }
.md-modal-card h3{ font-size:15px; color:#1B4332; margin:18px 0 6px; }
.md-modal-card p{ font-size:14px; line-height:1.6; color:#3a4a42; }
.md-modal-card dl{ display:grid; grid-template-columns:auto 1fr; gap:9px 18px; margin:0; }
.md-modal-card dt{ font:700 13.5px/1.55 var(--sans); color:#1B4332; white-space:nowrap; }
.md-modal-card dd{ margin:0; font-size:13.5px; line-height:1.55; color:#3a4a42; }
.md-modal-card dd b{ color:#1B4332; }
.md-modal-card .best{ margin:16px 0 0; padding-top:14px; border-top:1px solid rgba(20,38,31,.14); font-size:13.5px; color:#3a4a42; }
.md-modal-card .best b{ color:#1B4332; }
.md-modal-x{ position:absolute; top:10px; right:12px; width:34px; height:34px; border:none; cursor:pointer;
  font-size:22px; line-height:1; color:#6B7A72; background:transparent; border-radius:50%; }
.md-modal-x:hover{ color:#1B4332; background:rgba(27,67,50,.08); }