/* MahjongClassic.de: the game (top) and the pages around it */
:root{
  --panel:rgba(37,44,23,.74);
  --panel-hover:rgba(27,33,15,.86);
  --panel-press:rgba(18,23,9,.92);
  --chalk:#d5dbb6;
  --chalk-hi:#f5f6e8;
  --chalk-dim:rgba(213,219,182,.34);
  --rule:rgba(213,219,182,.16);
  --brass:#d6b660;
  --ivory:#f8f1d4;
  --paper:#f4eedc;
  --paper-2:#e9e1c6;
  --ink:#2a2b1e;
  --ink-soft:#5b5d46;
  --olive:#34402a;
  --olive-2:#46553a;
  --olive-deep:#232b1a;
  --line:rgba(42,43,30,.14);
  --ui:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Lora MC",Georgia,"Times New Roman",serif;
  /* the game's own look (top bar and dialogs), as in the original */
  --g-font:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --g-ivory:#f9f6ee;
  --g-ivory-2:#efe9db;
  --g-ink:#2b2118;
  --g-ink-soft:#6b5a48;
  --g-green:#547e2f;
  --g-green-deep:#3f6222;
  --g-line:rgba(43,33,24,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);-webkit-text-size-adjust:100%}
button{font:inherit;cursor:pointer}
a{color:inherit}

/* ================= game area ================= */
#game{
  position:relative;height:100vh;height:100svh;min-height:430px;
  display:flex;flex-direction:column;overflow:hidden;
  background:url("img/background-linen.png") repeat, url("img/background-bamboo.jpg") left center / cover no-repeat, #98a16e;   /* from the left: the bamboo stays in view on narrow screens */
  -webkit-user-select:none;user-select:none;
}
#stage{flex:1 1 auto;position:relative;min-height:0}
/* full screen: only the game (7 Nov 2026); the browser gives it the whole room, whatever it says about 100vh */
#game:fullscreen{height:100%;min-height:0}
#game:-webkit-full-screen{height:100%;min-height:0}
/* the dialogs live inside the game since then: their text can be selected again */
#game .veil{-webkit-user-select:text;user-select:text}
#cv{display:block;position:absolute;left:0;top:0;z-index:1;touch-action:manipulation}
/* no zooming in on a quick second tap anywhere in the game (7 Nov 2026, Boss: tapping Zurück quickly made the iPad
   zoom in); scrolling and zooming with two fingers stay as they are */
#game,#game button,#game a,#game .veil{touch-action:manipulation}
/* the version number, bottom left on the table, as if pressed into the cloth (Boss, 6 Nov 2026); under the canvas,
   so it can never cover a tile, and fit() hides it where a tile of the board can lie. The MahjongClassic.de mark
   that sat bottom centre was taken away the same day (Boss). */
#ver{position:absolute;left:10px;bottom:8px;z-index:0;font:600 12px/1 var(--g-font);letter-spacing:.02em;color:rgba(34,42,19,.42);text-shadow:0 1px 0 rgba(255,255,236,.32);pointer-events:none;user-select:none;-webkit-user-select:none}
#fx{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:30;display:none}

/* ---------- top bar: the original light bar, with the name in the middle ---------- */
/* Sizes for older eyes (Nov 2026). fitBar() in the script picks the biggest step that leaves room for the
   name on both sides (it measures, so it works in every language and with every layout name) and lets
   the name grow into the room that is left. The media queries below only give a first guess. */
#bar{
  --bf:17px;--bpx:14px;--lpx:12px;--sf:17px;--sg:20px;--ic:38px;--icf:19px;--brand:28px;--gap:6px;
  position:relative;z-index:2;flex:0 0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:var(--gap);
  padding:8px 14px;
  background:rgba(249,246,238,.94);
  border-bottom:1px solid var(--g-line);
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  font-family:var(--g-font);color:var(--g-ink);
}
#bar .group{display:flex;align-items:center;gap:var(--gap)}
#bar .left{justify-self:start}
#bar .right{justify-self:end;display:flex;align-items:center;gap:var(--gap)}
#bar .right > .group{margin-left:12px}   /* a little air between the counters and the icons */
/* b0 and b2: the word buttons are an odd number of pixels lower than the round icons (33 in 38, 31 in 34), so centring
   leaves them half a pixel low, which a normal screen shows as 11 px above and 10 below (Nov 2026, Boss, 1920 wide:
   "1 px te laag"). Half a pixel up makes it 10 above and 11 below; the bar keeps its height. */
#bar.b0 .left,#bar.b2 .left{position:relative;top:-.5px}
#bar .stats{display:flex;gap:var(--sg);font-size:var(--sf);color:var(--g-ink-soft);white-space:nowrap}
#bar .stats b{color:var(--g-ink);font-weight:600;font-variant-numeric:tabular-nums}
#bar .stats > span{display:inline-flex;gap:6px;align-items:baseline}
#layoutName{
  display:inline-flex;align-items:center;gap:8px;line-height:1;
  font-size:var(--bf);font-weight:600;padding:7px var(--lpx);border-radius:6px;
  border:1px solid var(--g-line);background:#fff;color:var(--g-ink);cursor:pointer;
}
#layoutName:hover{background:var(--g-ivory-2)}
.btn{
  border:1px solid var(--g-line);background:#fff;color:var(--g-ink);
  padding:7px var(--bpx);border-radius:6px;font-size:var(--bf);font-weight:600;
  line-height:1;
}
.btn:hover{background:var(--g-ivory-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.icon{width:var(--ic);height:var(--ic);padding:0;display:inline-grid;place-items:center;font-size:var(--icf)}
.btn.icon svg{width:var(--icf);height:var(--icf);display:block}
.btn:focus-visible,#layoutName:focus-visible{outline:2px solid var(--g-green);outline-offset:2px}
.btn,#layoutName,#bar .stats span{white-space:nowrap}
.btn .s,#bar .stats .s{display:none}
.btn .ic,#layoutName .ic,#layoutName .s{display:none}
#layoutName .caret{opacity:.55;font-size:.8em;line-height:1}
#bar [hidden]{display:none!important}
/* the name in the middle, as plain text */
.brand{justify-self:center;font-size:var(--brand);font-weight:700;letter-spacing:-.015em;line-height:1;color:var(--g-ink);text-decoration:none;white-space:nowrap;padding:4px 6px;border-radius:4px}
.brand b{font-weight:700;color:var(--g-green)}
.brand small{font-size:.7em;font-weight:600;color:var(--g-ink-soft);letter-spacing:0}
.brand:hover b{color:var(--g-green-deep)}
.brand:focus-visible{outline:2px solid var(--g-green);outline-offset:2px}
/* the thin see-through band under the bar, its shadow on the cloth (7 Nov 2026, Boss: "zet dezelfde transparante balk
   terug als schaduw, I love it", "misschien 1 px minder hoog"): the track of the yellow progress bar, which is gone,
   now 3 px instead of 4. It stays between the bar and the table: laid over the table it took the room above the
   board, and on some screens the top tiles came within a few pixels of it. */
#barShadow{flex:0 0 auto;position:relative;z-index:2;height:3px;background:rgba(0,0,0,.25)}
/* the steps, biggest first (fitBar picks). b0 to b2: the words on the buttons, getting a little smaller.
   i0 to i4 (Nov 2026, Boss: no two rows when the window gets narrower, use the icons): the five game buttons
   as icons, all on one row; i3 and i4 also "Frei" and "Paare". When even that does not fit, the menu bar of the
   phones and tablets (m1 to m2c, below). */
#bar.b1{--bf:16px;--bpx:12px;--lpx:11px;--sf:16px;--sg:16px;--ic:36px;--icf:18px;--brand:25px}
#bar.b2{--bf:15px;--bpx:10px;--lpx:10px;--sf:15px;--sg:12px;--ic:34px;--icf:16px;--brand:22px;--gap:5px;padding:6px 10px}
#bar.i0{--sf:17px;--sg:20px;--ic:38px;--icf:19px;--brand:28px;--gap:6px}
#bar.i1{--sf:16px;--sg:16px;--ic:36px;--icf:18px;--brand:25px;--gap:6px}
#bar.i2,#bar.i3{--sf:15px;--sg:12px;--ic:34px;--icf:16px;--brand:22px;--gap:5px;padding:6px 10px}
#bar.i4{--sf:14px;--sg:11px;--ic:32px;--icf:15px;--brand:19px;--gap:5px;padding:6px 9px}
#bar.i0 .left .btn,#bar.i1 .left .btn,#bar.i2 .left .btn,#bar.i3 .left .btn,#bar.i4 .left .btn,
#bar.i0 #layoutName,#bar.i1 #layoutName,#bar.i2 #layoutName,#bar.i3 #layoutName,#bar.i4 #layoutName{width:var(--ic);height:var(--ic);padding:0;display:inline-grid;place-items:center}
#bar.i0 .left .ic,#bar.i1 .left .ic,#bar.i2 .left .ic,#bar.i3 .left .ic,#bar.i4 .left .ic{display:block;width:calc(var(--icf) + 3px);height:calc(var(--icf) + 3px)}
#bar.i0 .left [data-t],#bar.i1 .left [data-t],#bar.i2 .left [data-t],#bar.i3 .left [data-t],#bar.i4 .left [data-t],
#bar.i0 #layoutLabel,#bar.i1 #layoutLabel,#bar.i2 #layoutLabel,#bar.i3 #layoutLabel,#bar.i4 #layoutLabel,
#bar.i0 #layoutName .caret,#bar.i1 #layoutName .caret,#bar.i2 #layoutName .caret,#bar.i3 #layoutName .caret,#bar.i4 #layoutName .caret{display:none}
#bar.i3 .stats .l,#bar.i4 .stats .l{display:none}
#bar.i3 .stats .s,#bar.i4 .stats .s{display:inline}
/* first guesses before the script has measured (German) */
@media (min-width:761px) and (max-width:1599px){#bar:not([class]){--bf:16px;--bpx:12px;--lpx:11px;--sf:16px;--sg:16px;--ic:36px;--icf:18px;--brand:25px}}
@media (min-width:761px) and (max-width:1440px){#bar:not([class]){--bf:15px;--bpx:10px;--lpx:10px;--sf:15px;--sg:12px;--ic:34px;--icf:16px;--brand:22px;--gap:5px;padding:6px 10px}}
/* phones and tablets (7 Nov 2026, Boss: "Horen stats, new game, geluid niet in een dropdown op kleine schermen?"):
   only the three buttons used while playing stay in the bar, each with its word beside the icon (beside, not under:
   the bar stays low), and Menü holds the rest (Neues Spiel, Layout, Statistik, Hilfe, Ton, Vollbild) in big rows
   with words. Buttons 44 px high, Apple's minimum for a finger. fitBar gives the bar the class mb and picks the
   step: m1 one row, m1s with the short counters, m1c and m1x smaller with the menu as an icon (a phone held
   sideways, where one row gives the tiles 7% more); two rows (mb2): m2, m2s, m2c, m2x, the name and the counters
   on top (held upright the board's width sets the tile size, so the second row costs the game nothing).
   A computer window too narrow for the full bar gets it too. */
#bMenu{display:none}
#bar.mb{--bf:17px;--sf:17px;--sg:16px;--brand:24px;--gap:8px;--mh:44px;--mpl:13px;--mpr:16px;--mi:22px;--mg:8px;padding:7px 14px}
#bar.mb :is(#bNew,#layoutName,.right > .group){display:none}
#bar.mb :is(#bUndo,#bHint,#bShuffle,#bMenu){display:inline-flex;align-items:center;justify-content:center;gap:var(--mg);height:var(--mh);padding:0 var(--mpr) 0 var(--mpl);border-radius:8px;font-size:var(--bf);font-weight:700}
#bar.mb .btn .ic{display:block;width:var(--mi);height:var(--mi);flex:none}
#bar.mb #bUndo .l{display:none}
#bar.mb #bUndo .s{display:inline}
#bar.mb .right{gap:16px}
#bar.mb:is(.m1s,.m1c,.m1x,.m2s,.m2c,.m2x) .stats .l{display:none}
#bar.mb:is(.m1s,.m1c,.m1x,.m2s,.m2c,.m2x) .stats .s{display:inline}
#bar.m1s{--brand:22px}
#bar.m2s{--bf:16px;--sf:16px;--sg:13px;--brand:22px;--gap:7px;--mpl:11px;--mpr:14px;--mi:21px}
#bar:is(.m1c,.m2c){--bf:15px;--sf:15px;--sg:12px;--brand:20px;--gap:6px;--mpl:8px;--mpr:10px;--mi:20px;--mg:6px;padding:6px 10px}
#bar:is(.m1x,.m2x){--bf:14px;--sf:13px;--sg:9px;--brand:16px;--gap:4px;--mh:42px;--mpl:6px;--mpr:8px;--mi:19px;--mg:5px;padding:5px 7px}
#bar.mb:is(.m1c,.m2c,.m1x,.m2x) #bMenu{width:var(--mh);padding:0}
#bar.mb:is(.m1c,.m2c,.m1x,.m2x) #bMenu [data-t]{display:none}
#bar.mb:is(.m1x,.m2x) .right{gap:10px}
#bar.mb:is(.m1x,.m2x) .stats .tlab{display:none}
#bar.mb2{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand stats stats" "left left menu";column-gap:12px;row-gap:7px;padding-bottom:8px}
#bar.mb2 .right{display:contents}
  #bar.mb2 .brand{grid-area:brand;justify-self:start;padding:2px}
  #bar.mb2 .stats{grid-area:stats;justify-self:end}
  #bar.mb2 #bMenu{grid-area:menu;justify-self:end}
  #bar.mb2 .left{grid-area:left}
#bar.m2x{column-gap:8px;padding-bottom:7px}
/* touch screens, phones and tablets (7 Nov 2026, Boss: "ja voor alle touch"): Zurück, Tipp and Mischen on the right,
   near the hand that taps (most people are right-handed, and in full screen Safari puts its own cross top left);
   Menü and the counters on the left, the name stays in the middle. A computer window with the menu bar keeps
   the order of the computer bar. One row: the two groups swap sides, Menü first; two rows: name and counters on
   top, Menü left and the three buttons right below. */
#bar.mt .right{grid-column:1;grid-row:1;justify-self:start;flex-direction:row-reverse}
#bar.mt .brand{grid-column:2;grid-row:1}
#bar.mt .left{grid-column:3;grid-row:1;justify-self:end}
#bar.mt.mb2{grid-template-areas:"brand brand stats" "menu left left"}
  #bar.mt.mb2 .brand{grid-area:brand}
  #bar.mt.mb2 .left{grid-area:left;justify-self:end}
  #bar.mt.mb2 #bMenu{justify-self:start}
@media (max-width:340px){#bar.m2x{--bf:13px;--mpl:5px;--mpr:6px;--mi:18px;--mg:4px;--gap:3px;padding:5px 5px 7px}}
@supports (text-box:trim-both cap alphabetic){
  #bar.mb :is(#bUndo,#bHint,#bShuffle,#bMenu) > span{text-box:trim-both cap alphabetic}
}
/* the menu: it hangs under the Menü button (openMenu sets where), big rows with icon and word */
#dMenu{align-items:flex-start;justify-content:flex-end;padding:var(--menu-top,64px) var(--menu-right,8px) 10px 10px;background:rgba(20,12,4,.32)}
#dMenu.from-left{justify-content:flex-start;padding:var(--menu-top,64px) 10px 10px var(--menu-left,8px)}   /* Menü on the left (touch) */
.dlg.menu-dlg{width:min(350px,100%);padding:0 0 4px}
/* the title and the cross both in the middle of the header (Boss on the iPad: "Menü staat te hoog, de x iets te
   laag"): the title trimmed to its capitals, the cross drawn, so neither depends on the font's own spacing */
.dlg.menu-dlg .menu-head{display:flex;align-items:center;justify-content:space-between;min-height:62px;padding:0 7px 0 20px}
.dlg.menu-dlg .menu-head h2{margin:0;padding:0;font-size:31px;line-height:1}
.dlg.menu-dlg .menu-head .x{position:static;flex:none;display:grid;place-items:center;width:46px;height:46px;padding:0}
.dlg.menu-dlg .menu-head .x svg{display:block;width:24px;height:24px}
@supports (text-box:trim-both cap alphabetic){.dlg.menu-dlg .menu-head h2{text-box:trim-both cap alphabetic}}
@supports not (text-box:trim-both cap alphabetic){.dlg.menu-dlg .menu-head h2{position:relative;top:.08em}}
.menu-list button{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:8px 20px;border:0;border-top:1px solid var(--g-line);background:transparent;color:var(--g-ink);font:700 20px/1.2 var(--g-font);text-align:left;cursor:pointer}
.menu-list button:hover{background:var(--g-ivory-2)}
.menu-list button:focus-visible{outline:2px solid var(--g-green);outline-offset:-3px}
.menu-list button[hidden]{display:none}
.menu-list svg{flex:none;width:24px;height:24px}
.menu-list small{margin-left:auto;padding-left:10px;font-size:17px;font-weight:600;color:var(--g-ink-soft);white-space:nowrap}
#mSound[aria-checked="true"] small{color:var(--g-green)}
/* narrow phones: a little smaller */
@media (max-width:360px){
  .menu-list button{min-height:52px;padding:6px 16px;gap:12px;font-size:18px}
  .menu-list small{font-size:15px}
}
/* a phone held sideways: two columns, so the menu fits under the bar */
@media (max-height:500px) and (min-width:560px){
  .dlg.menu-dlg{width:min(620px,100%)}
  .menu-list{display:grid;grid-template-columns:1fr 1fr}
  .menu-list button{min-height:50px;font-size:19px}
  .menu-list button:nth-child(even){border-left:1px solid var(--g-line)}
  #mLayoutName{display:none}         /* the name of the layout would make its row two lines high */
}

/* ================= dialogs: the original light style ================= */
.veil{position:fixed;inset:0;background:rgba(20,12,4,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:20}
.veil.open{display:flex}
/* sizes for older eyes (Nov 2026): text 20px, buttons 22px */
.dlg{
  background:var(--g-ivory);color:var(--g-ink);font-family:var(--g-font);font-size:20px;line-height:1.45;
  width:min(600px,100%);max-height:100%;overflow:auto;
  padding:28px 30px 30px;box-shadow:0 20px 60px rgba(0,0,0,.5);
  position:relative;
}
.dlg h2{margin:0 0 14px;font-size:31px;line-height:1.15;color:var(--g-green)}
.dlg p{margin:0 0 18px;font-size:20px;line-height:1.5}
.dlg .x{position:absolute;top:8px;right:8px;width:46px;height:46px;border:0;background:transparent;font-size:34px;color:var(--g-ink-soft);line-height:1}
.dlg .x:hover{color:var(--g-ink)}
.row{display:flex;justify-content:space-between;font-size:20px;padding:10px 0;border-bottom:1px solid var(--g-line)}
.row b{font-weight:600;font-variant-numeric:tabular-nums}
.actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.big{border:0;padding:16px 18px;--bpv:16px;font-size:22px;line-height:1.2;font-weight:700;color:#fff;background:var(--g-green)}
.big:hover{background:var(--g-green-deep)}
.big.alt{background:#6b7a63}
.big.alt:hover{background:#56634f}
.big.warn{background:transparent;color:#a9473b;box-shadow:inset 0 0 0 2px #a9473b}   /* clears the statistics: outlined in a calm red, as a warning */
.big.warn:hover{background:rgba(169,71,59,.08);color:#8e3a30;box-shadow:inset 0 0 0 2px #8e3a30}
.big:focus-visible,.grid button:focus-visible,.dlg .x:focus-visible,.star:focus-visible{outline:2px solid var(--g-green);outline-offset:2px}
.big.warn:focus-visible{outline-color:#a9473b}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:4px}
.grid button{border:1px solid var(--g-line);background:#fff;color:var(--g-ink);padding:12px 14px;text-align:left;font-size:20px;line-height:1.2}
.grid button:hover{background:var(--g-ivory-2)}
.grid button.cur{border-color:var(--g-green);box-shadow:inset 0 0 0 1px var(--g-green);font-weight:600}
.grid button{display:flex;align-items:center;justify-content:space-between;gap:8px}
.grid button .bigtag{display:none;flex:none;font-size:14px;font-weight:700;line-height:1;color:#fff;background:var(--g-green);border-radius:999px;padding:5px 9px}
.grid button.bigtiles .bigtag{display:inline-block}
@media (hover:none) and (pointer:coarse){.help .keys-line{display:none}}
.help{margin:0 0 12px;padding-left:24px}
.help li{margin:0 0 8px}
.dlg.help-dlg{width:min(760px,100%);display:flex;flex-direction:column}
.help-dlg > *{flex:0 0 auto}
.help-dlg .help{flex:0 1 auto;min-height:90px;overflow:auto;
  background:linear-gradient(var(--g-ivory) 30%,rgba(249,246,238,0)) top / 100% 36px no-repeat local,
    linear-gradient(rgba(249,246,238,0),var(--g-ivory) 70%) bottom / 100% 36px no-repeat local,
    radial-gradient(farthest-side at 50% 0,rgba(43,33,24,.2),transparent) top / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,rgba(43,33,24,.2),transparent) bottom / 100% 12px no-repeat scroll}
.dlg .help-more{margin:4px 0 14px;font-size:20px}
.dlg .help-more a{color:var(--g-green);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.dlg .help-more a:hover{color:var(--g-green-deep)}
/* win: the name and the streak on top, then the original rows and buttons */
.dlg.win .top{text-align:center}
.win-name{font-size:24px;font-weight:700;letter-spacing:-.015em;line-height:1;color:var(--g-ink);margin:0 0 14px}
.win-name b{font-weight:700;color:var(--g-green)}
.win-name small{font-size:.7em;font-weight:600;color:var(--g-ink-soft);letter-spacing:0}
.streak{display:flex;justify-content:center;gap:5px;margin:4px 0 12px;min-height:56px;align-items:flex-end}
.streak canvas,.streak .slot{width:39px;height:52px;display:block}
.streak .slot{border-radius:5px;box-shadow:inset 0 0 0 1.5px rgba(43,33,24,.13);background:rgba(43,33,24,.04)}
.streak .newest{animation:tileIn .55s cubic-bezier(.2,.9,.3,1.25) .35s both}
@keyframes tileIn{from{opacity:0;transform:translateY(-16px) scale(.9)}to{opacity:1;transform:none}}
.streak-line{margin:0 0 12px!important}
.streak-line b{display:block;font-size:26px;font-weight:700;color:var(--g-ink)}
.streak-line span{font-size:19px;color:var(--g-ink-soft)}
.streak-line .record{color:#a8761a;font-weight:700}
.remember{display:flex;align-items:center;gap:14px;margin:18px 0 0!important;padding-top:14px;border-top:1px solid var(--g-line);font-size:18px!important;line-height:1.4!important;color:var(--g-ink-soft)}
.star{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--g-line);border-radius:6px;background:#fff;color:var(--g-ink);padding:10px 15px;font-size:19px;font-weight:600;white-space:nowrap}
.star:hover{background:var(--g-ivory-2)}
.star svg{width:19px;height:19px;color:#d19a1c}
@media (min-width:600px){.dlg.win .actions{display:grid;grid-template-columns:1fr 1fr}.dlg.win .actions .big:first-child{grid-column:1 / -1}}
/* low screens (laptops) and phones: same letter sizes, less air, so the buttons stay in view */
@media (max-height:760px),(max-width:520px){
  .dlg{padding:20px 26px 22px}
  .dlg h2{margin-bottom:10px}
  .dlg p{margin-bottom:14px}
  .row{padding:7px 0}
  .actions{margin-top:16px;gap:8px}
  .big{padding:12px 18px;--bpv:12px}
  .grid button{padding:9px 14px}
  .help{margin-bottom:8px}
  .help li{margin-bottom:4px}
  .dlg .help-more{margin:2px 0 8px}
  .win-name{margin-bottom:8px}
  .streak{min-height:46px;margin:2px 0 8px}
  .streak canvas,.streak .slot{width:33px;height:44px}
  .streak-line{margin-bottom:8px!important}
  .remember{margin-top:12px!important;padding-top:10px}
  .star{padding:8px 14px}
}
/* very low screens: a little tighter still */
@media (max-height:620px){
  .dlg{padding:16px 24px 18px}
  .dlg h2{margin-bottom:8px}
  .row{padding:5px 0}
  .actions{margin-top:12px}
  .big{padding:10px 18px;--bpv:10px}
  .help li{margin-bottom:2px}
  .win-name{margin-bottom:4px}
  .streak{margin:0 0 6px}
}
/* phones: the whole help dialog scrolls, as phone pages do */
@media (max-width:520px){.dlg{padding-left:20px;padding-right:20px}.dlg h2{padding-right:34px}.dlg.help-dlg{display:block}.help-dlg .help{overflow:visible;background:none}}
@media (max-width:760px){.grid{grid-template-columns:1fr}}
@media (max-width:520px){.remember{flex-direction:column;align-items:flex-start}}
/* the win dialog has no close button, so on phones its title needs no room for one: in the middle like the name and
   the streak (7 Nov 2026; it sat 17 px left of the middle) */
@media (max-width:520px){.dlg.win h2{padding-right:0}}
/* The words in the middle of their buttons (Nov 2026, Boss on Windows: "a little too far down"). Every system's font
   sits a little higher or lower in its line (Segoe UI on Windows low, Helvetica on a Mac high), so the line is trimmed
   to the capital letters and those are centred: the same on every system, and every button keeps its height.
   In b0 (17 px words) the room comes out odd; the half pixel goes below, as the small letters sit low.
   Browsers without text-box (Firefox, for now) keep the old way. Checked with t_btntext.py on four systems' metrics. */
@supports (text-box:trim-both cap alphabetic){
  #bar.b0{--tb:.5px}
  #bar:is(.b0,.b1,.b2,:not([class])) .left .btn{display:inline-flex;align-items:center}
  #bar:is(.b0,.b1,.b2,:not([class])) .left .btn,#bar:is(.b0,.b1,.b2,:not([class])) #layoutName{padding-top:calc(7px - var(--tb,0px) + (1em - 1cap) / 2);padding-bottom:calc(7px + var(--tb,0px) + (1em - 1cap) / 2)}
  #bar:is(.b0,.b1,.b2,:not([class])) .left .btn > span,#bar:is(.b0,.b1,.b2,:not([class])) #layoutName > span{text-box:trim-both cap alphabetic}
  .big{text-box:trim-both cap alphabetic;padding-top:calc(var(--bpv) + (1.2em - 1cap) / 2);padding-bottom:calc(var(--bpv) + (1.2em - 1cap) / 2)}
}

/* ================= pages around the game (Nov 2026, second look) =================
   Like the rule booklet in the box of a Mahjong set: plain text in a very legible typeface
   (Atkinson Hyperlegible Next, made by the Braille Institute for people who see poorly), the real
   tiles as pictures, examples on white plates. Whatever you can click looks like a tile, because in
   this game you click tiles: an ivory face with its edge to the bottom right, pressed down when clicked. */
:root{
  --paper:#eef1ea;            /* light sage grey: the page next to the green table of the game */
  --plate:#fdfcf6;            /* examples lie on plates of a warm off-white (Boss: pure white hurt the eyes, a grey tint was too grey) */
  --ink:#1e2519;              /* bamboo ink */
  --ink-soft:#535b4d;
  --line:#d3d8cb;
  --link:#1c5596;             /* the blue of the circles */
  --red:#b3362c;              /* the red of the characters */
  --face:#f8f1d4;             /* a tile: its face ... */
  --face-hi:#fdf8e6;
  --edge:#cbaf82;             /* ... and its edge */
  --edge-deep:#a98d5f;
  --ui:"Atkinson Next","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
body{font-family:var(--ui)}
#site{max-width:740px;margin:0 auto;padding:50px 22px 34px;color:var(--ink)}
#site h1,#site h2,#site h3{font-family:var(--ui);color:var(--ink);line-height:1.15}
#site h1{font-size:clamp(34px,4.6vw,46px);font-weight:800;letter-spacing:-.012em;margin:0 0 20px}
#site h2{font-size:clamp(27px,3.3vw,32px);font-weight:800;letter-spacing:-.008em;margin:60px 0 16px;scroll-margin-top:16px}
#site h3{font-size:21px;font-weight:700;margin:0 0 4px}
#site p,#site li,#site td,#site th,#site dd{font-size:19px;line-height:1.6}
#site p{margin:0 0 16px}
#site .lead{font-size:21px;line-height:1.55}
#site ul,#site ol{padding-left:24px;margin:0 0 18px}
#site li{margin:0 0 8px}
#site b,#site strong{font-weight:700}
#site a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
#site a:hover{text-decoration-thickness:2px}
#site .keys{font-size:17px;color:var(--ink-soft)}
kbd{font-family:var(--ui);font-size:.85em;font-weight:700;background:var(--plate);border-radius:4px;box-shadow:inset 0 0 0 1px var(--line),0 1px 0 rgba(30,37,25,.2);padding:1px 7px}
.crumbs{font-size:16px;color:var(--ink-soft);margin:0 0 20px}
#site .crumbs a{color:var(--ink-soft)}

/* buttons: plain and calm, like the buttons in the game's own bar (white, a thin line, a small radius) */
.layout-links button,#footer .star{background:var(--plate);color:var(--ink);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 1px 2px rgba(30,37,25,.08);transition:border-color .12s,background-color .12s}
.layout-links button:hover{border-color:var(--g-green);background:#fffefa}
.layout-links button:active,.cta:active,#footer .star:active,ul.nav a.pill:active{transform:translateY(1px)}
.guide:focus-visible,.layout-links button:focus-visible,.cta:focus-visible{outline:3px solid var(--link);outline-offset:3px}
/* the green one: the way to the game */
.cta,ul.nav a.pill{background:var(--g-green);color:#fff!important;border:0;border-radius:8px;text-decoration:none!important;box-shadow:0 1px 2px rgba(30,37,25,.18)}
.cta:hover,ul.nav a.pill:hover{background:var(--g-green-deep)}
.cta{display:inline-block;font:700 20px/1 var(--ui);padding:18px 28px;margin:10px 0 20px}

/* numbered steps: the circle tiles count them, one dot, two dots ... */
.steps{list-style:none;padding:0!important;margin:0 0 22px!important}
.steps li{position:relative;padding:8px 0 0 64px;margin:0 0 14px!important;min-height:60px}
.steps li::before{content:"";position:absolute;left:0;top:0;width:44px;height:60px;background:url("img/steine/kreis-1.webp") 0 0 / 44px auto no-repeat}
.steps li:nth-child(2)::before{background-image:url("img/steine/kreis-2.webp")}
.steps li:nth-child(3)::before{background-image:url("img/steine/kreis-3.webp")}
.steps li:nth-child(4)::before{background-image:url("img/steine/kreis-4.webp")}
.steps li:nth-child(5)::before{background-image:url("img/steine/kreis-5.webp")}

/* tiles as pictures */
.tl{display:inline-flex;gap:4px;vertical-align:middle}
.tl img{width:52px;height:auto;display:block}
.mark{display:inline-block;font:700 15px/1 var(--ui);padding:5px 9px;border-radius:999px;color:#fff}
.mark.ok{background:var(--g-green)}
.mark.no{background:var(--red)}

/* white plates: the examples, the groups of tiles, the short summary */
.demo,.box,.suits.card{background:var(--plate);border:1px solid var(--line);border-radius:6px}
.demo{margin:22px 0 28px;padding:22px 24px}
.demo .trow{display:flex;gap:2px;align-items:flex-end;flex-wrap:wrap}
.demo .trow .t{width:78px}
.demo .trow .t img{width:78px}
.demo .trow .mark{font-size:14px;padding:5px 7px}
.demo .t{display:flex;flex-direction:column;align-items:center;gap:8px}
.demo .t img{width:60px;height:auto;display:block}
.demo .stack{position:relative;width:94px;height:98px}
.demo .stack img{position:absolute;width:60px;height:auto}
.demo .stack .under{left:32px;top:18px}
.demo .stack .over{left:0;top:0}
.demo .pair{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-end}
.demo figcaption{font-size:17px;line-height:1.5;color:var(--ink-soft);margin-top:14px}
.box{margin:26px 0 30px;padding:20px 24px 8px}
.box h2{margin:0 0 10px!important;font-size:24px!important}
.box.note{background:#fbf6e4;border-color:#e6d8b0}
.suits{display:grid;grid-template-columns:1fr;gap:2px;padding:0!important;list-style:none}
.suits.card{padding:4px 22px!important;margin:20px 0 28px!important}
.suits li{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:center;padding:14px 0;border-top:1px solid var(--line);margin:0!important}
.suits.card li:first-child{border-top:0}
.suits p{margin:0!important;font-size:18px!important;line-height:1.5!important}

/* a short list of points, each with its name on its own line (Mahjong für Senioren) */
.perks{list-style:none;padding:0!important;margin:20px 0 10px!important}
.perks li{margin:0 0 14px!important}
.perks b{display:block;font-size:20px}

/* questions and answers, open like in a printed booklet */
.faq h3{font-size:20px!important;margin:28px 0 6px!important}
.faq h3:first-child{margin-top:8px!important}

/* tables */
.tbl{width:100%;border-collapse:collapse;margin:16px 0 22px}
.tbl th,.tbl td{text-align:left;padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th{font-size:17px!important;color:var(--ink-soft);font-weight:700}
.tbl td:last-child,.tbl th:last-child{text-align:right;white-space:nowrap}
.tbl tfoot td{font-weight:700;border-bottom:0}
.tbl.plain td:last-child,.tbl.plain th:last-child{text-align:left;white-space:normal}
.tbl.plain td:first-child{width:38%;font-weight:700}

/* the 18 layouts: tiles that start the game */
.layout-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0 28px}
.layout-links button{padding:14px 16px;text-align:left;font:700 18px/1.2 var(--ui);color:var(--ink);cursor:pointer}
.layout-links button svg{display:none}

/* the buttons of the game, explained (Mahjong für Senioren): drawn like the real ones */
.keys-legend{list-style:none;padding:0!important;margin:20px 0 12px!important}
.keys-legend > li{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;padding:12px 0;border-top:1px solid var(--line);margin:0!important}
.keys-legend > li:last-child{border-bottom:1px solid var(--line)}
.kb{display:inline-flex;align-items:center;justify-content:center;gap:7px;justify-self:start;border:1px solid var(--g-line);background:#fff;color:var(--g-ink);padding:9px 14px;border-radius:6px;font:600 17px/1 var(--g-font);white-space:nowrap;box-shadow:0 1px 0 rgba(42,43,30,.12)}
.kb.icon{width:40px;height:40px;padding:0;font-size:19px}
.kb svg{width:19px;height:19px;display:block}
.kb .dim{opacity:.55}
.kb.sm{font-size:15px;padding:4px 8px;vertical-align:1px;box-shadow:none}
/* two screenshots side by side */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 28px}
.compare div{position:relative}
.compare img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 1px 5px rgba(42,43,30,.25)}
.compare span{position:absolute;left:10px;bottom:10px;background:rgba(30,37,25,.84);color:#fff;font:700 16px/1 var(--ui);padding:7px 10px;border-radius:5px}
.compare figcaption{grid-column:1 / -1;font-size:17px;line-height:1.5;color:var(--ink-soft)}
.legaltext p,.legaltext li{font-size:18px!important}
.legaltext h2{font-size:24px!important;margin:40px 0 10px!important}
#site .sources{font-size:16px;line-height:1.6;color:var(--ink-soft)}
#site > h3{margin:30px 0 12px}
@media (max-width:640px){
  #site{padding-top:32px}
  #site p,#site li,#site td,#site dd{font-size:18px}
  .suits li{grid-template-columns:1fr;gap:8px}
  .layout-links{grid-template-columns:1fr 1fr;gap:8px}
  .tl img{width:46px}
  .demo .t img{width:52px}
  .keys-legend > li{grid-template-columns:1fr;gap:8px}
  .compare{grid-template-columns:1fr}
  .tbl.plain thead{display:none}
  .tbl.plain tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
  .tbl.plain td{display:block;border:0;padding:2px 0;width:auto!important}
}

/* ================= footer (footer.php) ================= */
#footer{background:var(--olive-deep);color:var(--chalk);margin-top:56px;font-family:var(--ui)}
#footer .in{max-width:1000px;margin:0 auto;padding:46px 22px 28px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
#footer .name{font:700 26px/1 var(--g-font);letter-spacing:-.015em;color:#f5f6e8;margin:0 0 14px}
#footer .name b{font-weight:700;color:#a9cb7d}
#footer .name small{font-size:.7em;font-weight:600;color:#c3c9a3;letter-spacing:0}
#footer p{margin:0 0 20px;font-size:17px;line-height:1.6;max-width:36ch}
#footer h4{margin:4px 0 12px;font-size:16px;font-weight:700;color:var(--chalk-hi)}
#footer ul{list-style:none;margin:0;padding:0}
#footer li{margin:0 0 10px}
#footer a{color:var(--chalk);text-decoration:none;font-size:17px}
#footer a:hover{color:var(--chalk-hi);text-decoration:underline}
#footer .star{display:inline-flex;align-items:center;gap:9px;padding:12px 16px;font:700 17px/1 var(--ui);color:var(--ink);cursor:pointer;background:var(--g-ivory);border-color:transparent}
#footer .star:hover{background:#fffefa}
#footer .star svg{width:18px;height:18px;color:#c48f1c}
#footer .legal{grid-column:1 / -1;border-top:1px solid var(--rule);padding-top:18px;font-size:15px;color:rgba(213,219,182,.8);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:720px){#footer .in{grid-template-columns:1fr 1fr}#footer .about{grid-column:1 / -1}}

/* ================= header (header.php) and menu (navigation.php) ================= */
#header{position:relative;z-index:3;background:var(--g-ivory);border-bottom:1px solid var(--g-line);box-shadow:0 2px 10px rgba(0,0,0,.10);font-family:var(--g-font)}
.header_inner{max-width:1100px;margin:0 auto;padding:0 20px;min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-size:28px;font-weight:700;letter-spacing:-.015em;line-height:1;color:var(--g-ink);text-decoration:none;white-space:nowrap}
.logo b{font-weight:700;color:var(--g-green)}
.logo small{font-size:.7em;font-weight:600;color:var(--g-ink-soft);letter-spacing:0}
.logo:hover b{color:var(--g-green-deep)}
/* wide screens: the links of navigation.php line up at the right end of the header */
/* navigation.php comes right after the header (also under the game on the home page), so it is pulled up into the bar */
nav.desktop{position:relative;z-index:4;box-sizing:border-box;max-width:1100px;height:66px;margin:-67px auto 1px;padding:0 20px;display:flex;align-items:center;justify-content:flex-end;pointer-events:none;font-family:var(--ui)}
nav.desktop ul.nav{pointer-events:auto}
ul.nav{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
ul.nav a{display:block;padding:10px 14px;border-radius:6px;font-size:18px;font-weight:700;color:var(--g-ink);text-decoration:none}
ul.nav a:hover{text-decoration:underline;text-underline-offset:4px}
ul.nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px;text-decoration-color:var(--g-green)}
ul.nav .nav_play{margin-left:10px;margin-right:6px}
ul.nav a.pill{padding:11px 18px}
ul.nav a.pill:hover{text-decoration:none}
/* phones and small tablets: a "Menü" button (menu.js) opens the list of pages */
.menu_btn{display:none;align-items:center;gap:10px;border:1px solid var(--g-line);background:#fff;color:var(--g-ink);padding:10px 14px;border-radius:8px;font:700 17px/1 var(--ui);cursor:pointer}
.menu_btn .bars,.menu_btn .bars::before,.menu_btn .bars::after{display:block;width:20px;height:2px;border-radius:2px;background:currentColor}
.menu_btn .bars{position:relative}
.menu_btn .bars::before,.menu_btn .bars::after{content:"";position:absolute;left:0}
.menu_btn .bars::before{top:-6px}
.menu_btn .bars::after{top:6px}
.menu_btn[aria-expanded="true"]{background:var(--g-ivory-2)}
.non_desktop{display:none;position:relative;z-index:2;background:var(--g-ivory);border-bottom:1px solid var(--g-line);box-shadow:0 6px 14px rgba(0,0,0,.12);font-family:var(--ui)}
.non_desktop.open{display:block}
.non_desktop ul{list-style:none;margin:0 auto;padding:4px 0;max-width:1100px}
.non_desktop li a{display:block;padding:16px 20px;font-size:19px;font-weight:700;color:var(--g-ink);text-decoration:none;border-top:1px solid var(--g-line)}
.non_desktop li:first-child a{border-top:0}
.non_desktop li a[aria-current="page"]{color:var(--g-green)}
@media (max-width:760px){
  nav.desktop{display:none}
  .menu_btn{display:inline-flex}
  .header_inner{min-height:60px;padding:0 16px}
  .logo{font-size:24px}
}
@media (max-width:360px){.logo{font-size:21px}.menu_btn{padding:9px 11px}}
#header :is(a,button):focus-visible,nav :is(a,button):focus-visible,#footer :is(a,button):focus-visible{outline:3px solid var(--link);outline-offset:3px}

/* ================= the page under the header ================= */
#wrapper{display:block}

/* ================= links to the guide pages (guides.php): big tiles ================= */
nav.guides{max-width:740px;margin:0 auto;padding:0 22px 10px}
#site nav.guides{padding:0;margin:30px 0 10px}
.guides_title{font-family:var(--ui);color:var(--ink);font-size:clamp(27px,3.3vw,32px);font-weight:800;letter-spacing:-.008em;margin:20px 0 16px}
.guides_list{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;list-style:none;margin:0!important;padding:0!important}
.guides_list li{margin:0!important}
.guide{display:flex;gap:16px;align-items:center;height:100%;box-sizing:border-box;padding:16px 18px;background:var(--plate);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 1px 2px rgba(30,37,25,.08);color:var(--ink)!important;text-decoration:none!important;transition:border-color .12s}
.guide:hover{border-color:var(--link)}
.guide_icon{flex:none;display:flex;width:84px;justify-content:center}
.guide_icon img{width:52px;height:auto;display:block}
.guide_icon.pair img{width:42px}
.guide_icon.pair img + img{margin-left:2px}
.guide_text b{display:block;font-size:21px;font-weight:700;line-height:1.2;color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;margin:0 0 6px}
.guide:hover .guide_text b{text-decoration-thickness:2px}
.guide_text span{display:block;font-size:17px;line-height:1.45;color:var(--ink-soft)}
@media (max-width:640px){.guides_list{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}