/* =========================================================
   PlayMinesweeper.com - style.css
   The site is built from the game itself: the gray squares, the colored numbers,
   the green felt table and the yellow smiley. Font: Rubik (fonts/rubik.css).
   Part 1: the site (header, pages, footer). Part 2: the space for the game.
   ========================================================= */
:root {
  --max: 1200px;          /* site width (header, footer) */
  --col: 720px;           /* the reading column */
  --ink: #1c2827;         /* text */
  --muted: #535f5c;
  --field: #ece9e2;       /* page background: the open squares of the game */
  --paper: #fbfaf6;       /* header, panels */
  --line: #d3cec3;
  --tile: #dad6cd;        /* raised squares: guides, questions, keys */
  --tile-hover: #e4e1d9;
  --tile-hi: #fbfaf6;     /* light edge of a raised square */
  --tile-lo: #8b877d;     /* dark edge of a raised square */
  --felt: #2f8a8f;        /* the table */
  --felt-deep: #1d5c62;
  --felt-night: #133f43;  /* footer */
  --blue: #1c4fd6;        /* the 1: links */
  --blue-dark: #1438a8;
  --gold: #f5cf37;        /* the smiley: play buttons, the logo */
  --gold-hi: #fde57a;
  --gold-lo: #c99a12;
  --gold-ink: #2c2306;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 -.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --site-font: 'Rubik', 'Rubik Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; background: var(--field); color: var(--ink); font-family: var(--site-font); font-size: 18px; line-height: 1.7; }
img { max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--blue-dark); }
/* keyboard focus on the site (the game has its own) */
:where(#header, nav.desktop, nav.non_desktop, #wrapper, #footer) :is(a, button, summary):focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
button { font-family: inherit; }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }

/* a raised square, like the closed squares of the game; pressed, it sinks in */
.hamburger, .guide, .faq details, kbd {
  background: var(--tile);
  box-shadow: inset 2px 2px 0 var(--tile-hi), inset -2px -2px 0 var(--tile-lo);
}

/* ---------- Header (header.php) + navigation (navigation.php) ---------- */
#header { position: relative; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--line); }
.header_inner { max-width: var(--max); height: 76px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; position: relative; }
.logo { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.logo:hover { color: var(--ink); }
.logo-mark {
  position: relative; flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--gold); border-radius: 7px;
  box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo), 0 1px 2px rgba(28,40,39,.18);
}
.logo-mark > svg:first-child { width: 28px; height: 28px; }
.logo-name { display: block; font-size: 23px; font-weight: 800; line-height: 1; letter-spacing: -.015em; }
.logo-name .com { font-weight: 500; color: var(--muted); }
.logo-tag { display: block; margin-top: 5px; font-size: 13.5px; font-weight: 500; line-height: 1.2; color: var(--muted); }
/* the desktop menu sits on the right side of the header bar */
nav.desktop { position: relative; z-index: 6; width: 100%; max-width: var(--max); height: 76px; margin: -77px auto 1px; padding: 0 24px; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
ul.nav { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; pointer-events: auto; }
ul.nav a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.25; text-decoration: none; white-space: nowrap; }
ul.nav a:hover { background: rgba(28,40,39,.07); color: var(--ink); }
ul.nav a[aria-current="page"] { color: var(--blue); box-shadow: inset 0 -3px 0 var(--blue); border-radius: 6px 6px 0 0; }
ul.nav .nav_play { margin-left: 10px; }
/* Play buttons: the yellow of the smiley, a raised square that sinks in when pressed */
ul.nav a.pill, .btn-play {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--gold); color: var(--gold-ink); font-weight: 700; text-decoration: none; border-radius: 7px;
  box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -3px 0 var(--gold-lo), 0 2px 3px rgba(28,40,39,.16);
}
ul.nav a.pill { padding: 9px 18px 10px 15px; }
ul.nav a.pill::before, .btn-play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
ul.nav a.pill:hover, .btn-play:hover { background: #f8d84f; color: var(--gold-ink); }
ul.nav a.pill:active, .btn-play:active { box-shadow: inset 2px 2px 0 var(--gold-lo), inset -1px -1px 0 var(--gold-hi); transform: translateY(1px); }
ul.nav a.pill[aria-current="page"] { box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -3px 0 var(--gold-lo), 0 2px 3px rgba(28,40,39,.16); color: var(--gold-ink); }
/* mobile menu (opened with the hamburger from menu.js) */
.non_desktop { display: none; }
.hamburger { display: none; flex: none; align-items: center; justify-content: center; width: 46px; height: 42px; border-radius: 6px; font-size: 0; line-height: 0; text-decoration: none; }
/* The three lines are drawn here, so they look the same whatever menu.js puts in the button. */
.hamburger > * { display: none; }
.hamburger::before { content: ""; display: block; width: 20px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M1 1H19M1 8H19M1 15H19' fill='none' stroke='%231c2827' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/20px 16px; }
.hamburger:hover { background-color: var(--tile-hover); }
.hamburger[aria-expanded="true"] { background-color: var(--field); box-shadow: inset 2px 2px 0 var(--tile-lo), inset -1px -1px 0 var(--tile-hi); }
.non_desktop.open { display: block; position: relative; z-index: 4; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 10px 24px rgba(28,40,39,.12); }
.non_desktop ul { list-style: none; max-width: var(--max); margin: 0 auto; padding: 4px 24px 12px; }
.non_desktop li a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 17px; font-weight: 500; text-decoration: none; }
.non_desktop li:last-child a { border-bottom: 0; }
.non_desktop li a[aria-current="page"] { color: var(--blue); }
@media (max-width: 1200px) { ul.nav a { padding-left: 9px; padding-right: 9px; } ul.nav .nav_play { margin-left: 6px; } }
@media (max-width: 1100px) {
  nav.desktop { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 600px) {
  .header_inner { height: 66px; padding: 0 16px; }
  .logo { gap: 10px; }
  .logo-mark { width: 38px; height: 38px; }
  .logo-mark > svg:first-child { width: 25px; height: 25px; }
  .logo-name { font-size: 20px; }
  /* the line under the name stays one line (with bigger phone text it ends in ... rather than wrapping) */
  .logo > span:last-child { min-width: 0; }
  .logo-tag { font-size: 12.5px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .non_desktop ul { padding: 4px 16px 10px; }
}
/* the smallest phones: a little smaller, so the name, its line and the menu button all fit */
@media (max-width: 359px) {
  .logo { gap: 8px; }
  .logo-mark { width: 34px; height: 34px; }
  .logo-mark > svg:first-child { width: 22px; height: 22px; }
  .logo-name { font-size: 17px; }
  .logo-tag { font-size: 11.5px; margin-top: 3px; }
}

/* ---------- The page: crumb, title band and the reading column ---------- */
/* #wrapper is as wide as the window; everything in it keeps to the reading column */
#wrapper { flex: 1; width: 100%; }
.sub_main > *, .crumb { max-width: min(var(--col), calc(100% - 40px)); margin-left: auto; margin-right: auto; }
/* the green band at the top of a page: the felt of the game, with the crumb and the title */
.crumb, .sub_main_head { max-width: none; padding-left: max(20px, calc((100% - var(--col)) / 2)); padding-right: max(20px, calc((100% - var(--col)) / 2)); background-color: var(--felt-deep); color: #e3f0ee; }
.crumb { padding-top: 26px; font-size: 14.5px; line-height: 1.4; background-image: var(--noise); }
.crumb a { color: #e3f0ee; text-decoration-color: rgba(227,240,238,.45); }
.crumb a:hover { color: #fff; }
.sub_main_head {
  position: relative; overflow: hidden; margin-bottom: 44px; padding-top: 14px; padding-bottom: 52px;
  background-image: var(--noise), radial-gradient(ellipse 70% 95% at 78% 115%, rgba(66,160,163,.75) 0%, rgba(47,138,143,.35) 45%, rgba(29,92,98,0) 75%);
}
.crumb + .sub_main .sub_main_head { padding-top: 10px; }
.sub_main_head_title { position: relative; margin: 0; max-width: 16em; color: #fff; font-size: clamp(36px, 5.2vw, 54px); font-weight: 800; line-height: 1.06; letter-spacing: -.022em; text-wrap: balance; }
.sub_main_lead { position: relative; margin: 18px 0 0; color: #e3f0ee; font-size: 20px; line-height: 1.6; }
/* a page with the game on top: a Play button under the title goes up to it */
.sub_main_head .btn-play { margin-top: 24px; }
/* the top of a real board from our game peeks in on the right (big screens): a game in progress,
   with the mine counter, the smiley and the timer. The picture is img/minesweeper-board-corner.png */
@media (min-width: 1240px) {
  .sub_main_head::after { content: ""; position: absolute; right: -66px; bottom: -58px; width: 278px; height: 190px; background: url(/img/minesweeper-board-corner.png) no-repeat 0 0 / 278px 190px; transform: rotate(-8deg); transform-origin: 129px 95px; filter: drop-shadow(0 14px 18px rgba(0,0,0,.35)); }
  .sub_main_head { min-height: 230px; }
}
@media (min-width: 1560px) {
  .sub_main_head::after { right: calc(max(0px, (100% - 1560px) / 2) - 20px); bottom: -40px; }
}
.sub_main { padding-bottom: 72px; }
/* a heading reached from a link (the table of contents, the How to play button) keeps a little room above it */
.sub_main [id], #how-to-play { scroll-margin-top: 24px; }
.sub_main_title, .sub_main h2 { margin: 60px auto 14px; font-size: 31px; font-weight: 700; line-height: 1.18; letter-spacing: -.012em; text-wrap: balance; }
.sub_main h3 { margin: 32px auto 6px; font-size: 21px; font-weight: 700; line-height: 1.3; }
.sub_main_text, .sub_main p { margin-top: 0; margin-bottom: 16px; }
.sub_main ul, .sub_main ol { padding-left: 26px; margin-top: 0; margin-bottom: 18px; }
.sub_main li { margin: 0 0 6px; padding-left: 4px; }
.sub_main li::marker { color: var(--muted); font-weight: 600; }
.sub_main b, .sub_main strong { font-weight: 600; }
.small-print { margin-top: 36px !important; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
/* the short answer at the top of a guide: the gold ring of the Hint button */
.answer { margin-bottom: 26px; padding: 20px 24px; background: #fffcef; border: 2px solid var(--gold); border-radius: 10px; }
.answer p { margin: 0; }
.answer p + p { margin-top: 10px; }
/* on this page */
.toc { margin-bottom: 10px; padding: 18px 24px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.toc b { display: block; margin-bottom: 6px; font-weight: 600; }
.sub_main .toc ol { margin: 0; padding-left: 24px; columns: 2; column-gap: 32px; }
.toc li { break-inside: avoid; margin: 0 0 4px; font-size: 16.5px; line-height: 1.5; }
.toc li::marker { font-variant-numeric: tabular-nums; }
/* pictures */
.shot { margin-top: 18px; margin-bottom: 28px; }
.shot img { display: block; border-radius: 8px; box-shadow: 0 1px 0 rgba(28,40,39,.06), 0 8px 22px rgba(28,40,39,.16); }
.shot figcaption { margin-top: 12px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
/* keys */
kbd { display: inline-block; min-width: 28px; padding: 1px 8px 2px; border-radius: 5px; color: var(--ink); font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.55; text-align: center; vertical-align: 1px; }
/* tables: always as wide as the text, never a box that scrolls sideways (sizes like 18 × 14 stay on one line with class nw) */
.levels { width: 100%; margin-bottom: 18px; border-collapse: separate; border-spacing: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 17px; line-height: 1.5; }
.levels th, .levels td { padding: 12px 16px; text-align: left; vertical-align: top; }
.levels thead th { background: var(--tile); font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--line); }
.levels tbody tr + tr td { border-top: 1px solid #e3dfd6; }
.levels small { color: var(--muted); font-size: 14.5px; }
.timeline td:first-child { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.keys { width: 100%; margin-bottom: 20px; border-collapse: collapse; font-size: 17px; line-height: 1.55; }
.keys th, .keys td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.keys tr:first-child th, .keys tr:first-child td { border-top: 1px solid var(--line); }
.keys th { width: 36%; font-weight: 600; }
/* questions and answers: a closed square that opens when you click it */
.faq details { margin-bottom: 8px; border-radius: 6px; }
.faq summary { position: relative; display: block; padding: 15px 54px 15px 20px; font-weight: 600; line-height: 1.45; cursor: pointer; list-style: none; border-radius: 6px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg); transition: transform .15s; }
.faq details:not([open]):hover { background-color: var(--tile-hover); }
.faq details[open] { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq details p { margin: 0; padding: 0 20px 18px; }
/* the email address on the contact page: a click on the button shows it (it isn't in the page as text, so robots can't find it) */
.mail_box { margin-top: 26px; margin-bottom: 26px; }
.btn-mail { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px 14px 18px; background: var(--gold); color: var(--gold-ink); border-radius: 7px; font-size: 17px; font-weight: 700; line-height: 1.2; text-decoration: none; box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -3px 0 var(--gold-lo), 0 2px 3px rgba(28,40,39,.16); }
.btn-mail svg { width: 20px; height: 20px; flex: none; }
.btn-mail:hover { background: #f8d84f; color: var(--gold-ink); }
.btn-mail:active { box-shadow: inset 2px 2px 0 var(--gold-lo), inset -1px -1px 0 var(--gold-hi); transform: translateY(1px); }
.btn-mail.shown { background: var(--paper); color: var(--blue); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); user-select: all; -webkit-user-select: all; }
.btn-mail.shown:hover { color: var(--blue-dark); }
.mail_hint { display: block; margin-top: 10px; color: var(--muted); font-size: 15.5px; }
/* back to the game */
.cta { margin-top: 48px; padding: 24px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; color: #fff; border-radius: 10px; background-color: var(--felt-deep); background-image: var(--noise), radial-gradient(ellipse 80% 140% at 85% 120%, rgba(66,160,163,.7), rgba(29,92,98,0) 70%); }
.cta p { margin: 0; font-size: 20px; font-weight: 600; }
.btn-play { padding: 13px 22px 14px 18px; font-size: 17px; line-height: 1.2; }
/* the text under the game on a game page: no green band (the game is the green above) */
#game ~ #wrapper .sub_main_head, #game ~ #wrapper .crumb { background: none; color: var(--ink); }
#game ~ #wrapper .crumb { padding-top: 40px; color: var(--muted); }
#game ~ #wrapper .crumb a { color: var(--muted); text-decoration-color: rgba(85,97,94,.4); }
#game ~ #wrapper .sub_main_head { margin-bottom: 30px; padding-top: 56px; padding-bottom: 0; }
#game ~ #wrapper .crumb + .sub_main .sub_main_head { padding-top: 10px; }
#game ~ #wrapper .sub_main_head::after { content: none; }
#game ~ #wrapper .sub_main_head { min-height: 0; }
#game ~ #wrapper .sub_main_head_title { color: var(--ink); }
#game ~ #wrapper .sub_main_lead { color: var(--muted); }
@media (max-width: 600px) {
  body { font-size: 17px; }
  .crumb { padding-top: 20px; font-size: 14px; }
  .sub_main_head { margin-bottom: 32px; padding-bottom: 38px; }
  .sub_main_lead { margin-top: 14px; font-size: 18px; }
  .sub_main_title, .sub_main h2 { margin-top: 48px; font-size: 26px; }
  .sub_main h3 { font-size: 19px; }
  .sub_main { padding-bottom: 52px; }
  .sub_main .toc ol { columns: 1; }
  .answer { padding: 16px 18px; }
  .toc { padding: 16px 18px 14px; }
  .levels { font-size: 15.5px; }
  .levels th, .levels td { padding: 10px 11px; }
  .keys { font-size: 16px; }
  .keys th, .keys td { display: block; width: auto; padding-right: 0; }
  .keys th { padding-bottom: 2px; border-bottom: 0; }
  .keys tr:first-child td { border-top: 0; }
  .keys td { padding-top: 0; }
  .faq summary { padding: 14px 46px 14px 16px; }
  .faq summary::after { right: 18px; }
  .faq details p { padding: 0 16px 16px; }
  .cta { padding: 20px; }
  .cta p { font-size: 18px; }
  #game ~ #wrapper .sub_main_head { padding-top: 40px; }
  #game ~ #wrapper .crumb { padding-top: 28px; }
}
/* the smallest phones: a little less room in the tables, so the four-column one still fits */
@media (max-width: 374px) {
  .levels { font-size: 14.5px; }
  .levels th, .levels td { padding: 9px 8px; }
  .levels thead th { font-size: 14px; }
  .levels small { font-size: 13.5px; }
}
/* a table with long words (Polish level names, for example): less room inside the cells on phones */
@media (max-width: 420px) { .levels.tight th, .levels.tight td { padding-left: 6px; padding-right: 6px; } }
@media (max-width: 359px) { .levels.tight, .levels.tight thead th { font-size: 13px; } }

/* ---------- The guide squares (guides.php) ---------- */
/* as wide as the text: three squares in a row, the picture on top */
.guides { max-width: min(var(--col), calc(100% - 40px)); margin: 0 auto; }
.sub_main > .guides { margin-top: 8px; margin-bottom: 8px; }
#wrapper > .guides { padding: 0 0 80px; }
.guides_title { margin: 0 0 18px; font-size: 26px; font-weight: 700; line-height: 1.2; }
.guides .guides_list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.guides .guides_list li { min-width: 0; margin: 0; padding: 0; }
.guide { height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 16px 18px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.guide:hover { background-color: var(--tile-hover); color: var(--ink); }
.guide:active { background-color: var(--field); box-shadow: inset 2px 2px 0 var(--tile-lo), inset -1px -1px 0 var(--tile-hi); }
.guide:active .guide_icon { transform: translate(1px, 1px); }
.guide_icon { flex: none; }
.guide_icon svg { display: block; width: 48px; height: 48px; }
.guide_text b { display: block; font-size: 18px; font-weight: 700; line-height: 1.25; }
.guide_text > span { display: block; margin-top: 5px; color: var(--muted); font-size: 15px; line-height: 1.45; }
/* phones: one under the other, the picture on the left */
@media (max-width: 600px) {
  .guides .guides_list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .guide { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px 14px 12px; }
  .guide_text b { font-size: 19px; }
  .guide_text > span { font-size: 15.5px; }
  .guides_title { font-size: 23px; }
  #wrapper > .guides { padding-bottom: 56px; }
}

/* ---------- Footer (footer.php) ---------- */
#footer { padding: 56px 0 30px; background: var(--felt-night); background-image: var(--noise); color: #bcd3d0; font-size: 16px; line-height: 1.6; }
.footer_inner { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.footer-cols { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-logo { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.footer-logo .com { font-weight: 500; color: #bcd3d0; }
.footer-mark { width: 32px; height: 32px; display: grid; place-items: center; flex: none; background: var(--gold); border-radius: 6px; box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo); }
.footer-mark svg { width: 22px; height: 22px; }
.footer-cols p { margin: 16px 0 0; max-width: 30em; }
.footer-cols b { display: block; margin-bottom: 10px; color: #fff; font-weight: 600; }
.footer-cols a { display: block; padding: 3px 0; color: #bcd3d0; text-decoration: none; }
.footer-cols a:hover { color: #fff; text-decoration: underline; }
.copy { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 28px; font-size: 14.5px; }
.copy a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); }
.copy a:hover { color: #fff; }
.copy_note { margin-left: 6px; }
.langs { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.langs .lang_now { color: #fff; font-weight: 600; }
.langs a { text-decoration: none; }
.langs a:hover { text-decoration: underline; }
#footer a:focus-visible { outline-color: var(--gold); }
@media (max-width: 980px) { .footer-cols { grid-template-columns: 1fr 1fr; } .footer-cols > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  #footer { padding: 40px 0 26px; font-size: 15.5px; }
  .footer_inner { padding: 0 18px; }
  .footer-cols { gap: 26px 20px; }
  .copy_note { display: block; margin: 4px 0 0; }
}
@media (max-width: 360px) { .footer-cols { grid-template-columns: 1fr; } }

/* ---------- Japanese pages (lang="ja"): a line never starts with ー or a small kana, and short texts
   break between phrases instead of inside a word (Chrome and Edge; other browsers break as usual) ---------- */
:lang(ja) { line-break: strict; }
:lang(ja) :is(h1, h2, h3, summary, .crumb, .toc a, .guide_text b, .footer-cols a, .non_desktop a, .cta p) { word-break: auto-phrase; }

/* ---------- Less movement for people who ask for it ---------- */
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---------- Printing a guide: just the text ---------- */
@media print {
  #game, #header, nav.desktop, .non_desktop, #footer, .guides, .cta { display: none !important; }
  body { background: #fff; }
  .crumb, .sub_main_head { background: none !important; color: #000; padding-top: 0; }
  .sub_main_head_title, .sub_main_lead { color: #000; }
  .sub_main_head::after { content: none; }
}


/* =========================================================
   Part 2: the game. The engine (scripts/minesweeper.min.js) builds the game inside
   <section id="game"> and brings its own styles; its words are in scripts/lang-en.js.
   Here only the space it takes and the colour of its bar, so nothing moves while it loads.
   ========================================================= */
#game { position: relative; height: 100vh; height: 100dvh; min-height: 240px; background: #1d5c62; }
#game:empty::before { content: ""; display: block; height: 48px; background: linear-gradient(#fbf6ea, #efe6cf); border-bottom: 1px solid #dacca8; }

/* game pages: the text under the game is only laid out when it comes into view, so the game starts faster
   (the footer is small and always drawn, so checkers like Lighthouse see its dark background) */
#game ~ #wrapper { content-visibility: auto; contain-intrinsic-size: auto 5000px; }