/* The Lounge's frame for pages of words (the guide, the brain-training page, each game's how-to):
   a header with every game, the page beside a sidebar, and a footer of links.

   Direction (11-02, after the owner's "cheap", "far from GAFA", and "not right for its purpose"):
   - What it is: the way in to free puzzles played on one board with friends.
   - Character: calm, tactile, a little playful.
   - World: paper and ink spread on a table - the Lounge's own paper (#f6f5f2), its floor of
     pieces in the margins, white cards, and ink (#1e222a), not a borrowed grey.
   - Moments: the three games' real screens, above all four people at one jigsaw table. The
     colour lives there; the chrome stays paper and ink.
   - Signature: the logo's letter tiles, and only where they mean something (the steps' 1 2 3,
     a game's mark in a list).
   One accent, burnt coral #c94a1f (white on it 4.7:1; the logo's #ff8a5c is too light for
   words), for the press that starts a game and little else. Sizes from one scale, spacing on 4px, radius by size (controls 10, cards 16),
   one easing curve.

   The games' pages link this file from /shared/ too, so it leans only on what every Lounge
   page defines (--font, --round, --c-* tiles, --ease-out) and sets its own tones below. */

/* the tones: the whole page on the hub's pages of words (they have .site), only the frame's own
   parts on a game's page, whose words keep their own type and colours */
body:has(.masthead):has(.site), .masthead, .site-foot, .more-game, .lounge-rail, .lounge-dates {
  --display: var(--font);
  --display-weight: 700;
  --display-track: 0.02em;
  --page: #f6f5f2;
  --panel: #fff;
  --text: #1e222a;
  --text-2: #4f5562;
  --text-3: #6b7180;
  --hair: rgb(30 34 42 / 0.09);
  --act: #c94a1f;
  --act-press: #b0401a;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 150ms;
  --enter: 400ms;
  color: var(--text);
}

/* ---- type ----
   Two faces, the Lounge's own (fonts/lounge.css, never another): Noto Sans JP (500 to 700) for everything, headings at
   700 - a rounded 800 headline (tried 11-02) broke into three lines and read as a children's page
   beside the owner's ask for a company's quality; M PLUS Rounded 1c stays the logo's and the
   steps' tiles. Japanese is set
   the way it reads well: headings with proportional kana (palt) and a little air between them,
   text with a touch of tracking and room between lines, an opening bracket not pushing a line in (text-spacing-trim),
   lines broken between phrases (word-break: auto-phrase, from styles.css). */
body:has(.masthead):has(.site) { font-family: var(--font); font-weight: 500; letter-spacing: 0.03em; font-kerning: normal; text-spacing-trim: trim-start; }
:is(.start h1, .part > h2, .pick-body h2, .part .steps b, .scenes h3, .tabs [role="tabpanel"] h3, .minis b:not(.tile), .side .box.invite h2, .go) {
  font-family: var(--display); font-weight: var(--display-weight); font-feature-settings: "palt"; letter-spacing: var(--display-track);
}
:is(.start h1, .part > h2, .scenes h3, .pick-body h2, .tabs [role="tabpanel"] h3) { text-wrap: balance; }
/* the front page's paper under it all: the soft wash in the corners, the squared margins, and the
   floor of pieces and digits that can be picked up (page.js), kept off the words and the games
   (the owner, 11-02: "a little playful", as the Lounge's top is) */
.masthead, .frame-crumbs, .start, .site, .site-foot { position: relative; z-index: 3; }

/* ---- 1 header: the mark and a quiet way to every game, held at the top ---- */
.masthead { position: sticky; top: 0; z-index: 20; background: rgb(246 245 242 / 0.86); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--hair); }
.site-head .in { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1080px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 4px max(20px, env(safe-area-inset-left)); }
.site-head .mark-tiles { display: inline-flex; gap: 4px; }
.site-head .mark-tiles b { width: 24px; height: 24px; border-radius: 6px; font-size: 13px; box-shadow: none; }
/* The name in English (#143): twelve tiles and a gap, smaller on a phone so the menu still fits beside them. */
.site-head .mark-tiles .sp { width: 6px; }
@media (max-width: 600px) {
  .site-head .mark-tiles.en { gap: 2px; }
  .site-head .mark-tiles.en b { width: 16px; height: 16px; border-radius: 4px; font-size: 10px; }
  .site-head .mark-tiles.en .sp { width: 4px; }
}
/* the pages to read, on the mark's row between it and すべてのゲーム; on a phone, a row of their own under it (#113) */
.masthead .site-head .in { justify-content: flex-start; }
.masthead .head-read { margin-left: auto; margin-right: 12px; } /* beats the header reset below (.masthead :is(nav ...)) */
.head-read ul { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.head-read a { display: block; padding: 6px 0; color: var(--text-3); font-size: 13px; white-space: nowrap; transition: color var(--fast) var(--ease); }
.head-read a:hover { color: var(--text); }
.head-read a[aria-current="page"] { color: var(--text); font-weight: 700; box-shadow: inset 0 -2px 0 var(--text); }
@media (max-width: 600px) {
  .masthead .site-head .in { flex-wrap: wrap; row-gap: 2px; }
  .masthead .site-head .in { justify-content: space-between; }
  .masthead .head-read { order: 3; flex-basis: 100%; margin: 0; }
}

/* buttons: the filled one starts a game; the rest are words with a chevron */
:is(.masthead, .start, .site) .go { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 10px; background: var(--act); color: #fff; font-size: 15px; transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
:is(.masthead, .start, .site) .go:hover { background: var(--act-press); }
:is(.masthead, .start, .site) .go:active { transform: scale(0.98); }
:is(.masthead, .start, .site) .go.small { min-height: 32px; padding: 0 12px; border-radius: 8px; background: var(--page); color: var(--text); font-size: 13px; box-shadow: inset 0 0 0 1px var(--hair); }
:is(.masthead, .start, .site) .go.small:hover { background: var(--panel); }
/* (styles.css draws .more for the front page as a centred line in the rounded face: undone) */
:is(.masthead, .start, .site) .more { display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 44px; margin: 0; padding: 0; color: var(--text); font: 500 14px/1.4 var(--font); transition: color var(--fast) var(--ease); }
:is(.masthead, .start, .site) .more::after { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; rotate: 45deg; transition: transform var(--fast) var(--ease); }
:is(.masthead, .start, .site) .more:hover { color: var(--act); }
:is(.masthead, .start, .site) .more:hover::after { transform: translate(2px, -2px); }

.frame-crumbs { max-width: 1080px; margin: 0 auto; padding: 16px max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); color: var(--text-3); font-size: 12px; }
.frame-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.frame-crumbs li + li::before { content: "›"; margin-right: 8px; }
.frame-crumbs a { transition: color var(--fast) var(--ease); }
.frame-crumbs a:hover { color: var(--text); }

/* ---- the opening, for somebody who searched for a puzzle game to play together (the guide is
   4th for パズルゲーム 協力, 11-02): a headline with their words, the three games each with one
   press into making a room (?room=new), and beside them the proof - four people's cursors at one
   jigsaw table, moving, from the promo films' capture. Text and games on the left, the table on
   the right; on a phone the table comes after the headline and the games after it, all in the
   first screen or near it. ---- */
.start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: center; gap: 48px; max-width: 1080px; margin: 0 auto; padding: 40px max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
.start-text { min-width: 0; }
.start h1 { margin: 0; font-size: 36px; line-height: 1.4; }
.start-sub { margin: 12px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.8; }
.picks { display: grid; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.picks > .pick { box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgb(30 34 42 / 0.04); display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 12px 12px 12px; border-radius: 16px; background: var(--panel); }
.picks > .pick img { display: block; width: 88px; height: 64px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 1px var(--hair); }
.pick-body { display: grid; gap: 0; min-width: 0; }
.pick-body h2 { margin: 0; font-size: 18px; line-height: 1.4; }
.pick-body .meta { margin: 0; color: var(--text-3); font-size: 12px; }
.pick-body .line { margin: 4px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.picks > .pick .go { min-height: 40px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.start .facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; padding: 0; list-style: none; color: var(--text-3); font-size: 13px; }
.start .facts li { display: flex; align-items: center; gap: 8px; }
.start .facts li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); }

.live { min-width: 0; margin: 0; }
.live video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 16px; background: #eceae6; box-shadow: 0 0 0 1px var(--hair), 0 16px 40px rgb(30 34 42 / 0.10); }
.live figcaption { margin-top: 12px; color: var(--text-3); font-size: 13px; }

/* the one entrance: the opening rises into place once, the three games a beat apart */
@media (prefers-reduced-motion: no-preference) {
  .start h1, .start-sub, .picks > .pick, .start .facts, .live { animation: rise var(--enter) var(--ease) both; }
  .start-sub { animation-delay: 40ms; }
  .live { animation-delay: 60ms; }
  .picks > .pick:nth-child(1) { animation-delay: 100ms; }
  .picks > .pick:nth-child(2) { animation-delay: 150ms; }
  .picks > .pick:nth-child(3) { animation-delay: 200ms; }
  .start .facts { animation-delay: 250ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 900px) {
  .start { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 24px; }
  .start-text { display: contents; }
  .start h1 { order: 1; font-size: 26px; }
  .start-sub { order: 2; font-size: 14px; }
  .live { order: 3; margin-top: 16px; }
  .live video { border-radius: 12px; }
  .live figcaption { display: none; }
  .picks { order: 4; margin-top: 16px; }
  .start .facts { order: 5; margin-top: 16px; font-size: 12px; gap: 8px 16px; }
}
@media (max-width: 560px) {
  .picks > .pick { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 12px; }
  .picks > .pick img { width: 64px; height: 48px; }
  .pick-body h2 { font-size: 15px; }
  .pick-body .line { display: none; }
  .picks > .pick .go { min-height: 36px; padding: 0 12px; font-size: 13px; }
}

/* ---- 3 + 4 the page beside its sidebar ---- */
.site { max-width: 1080px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--hair); }
.layout > main { min-width: 0; }

/* the page's own contents: a row of words on a phone, held under the header while reading */
nav.toc { position: sticky; top: 76px; z-index: 5; margin: 0 -20px; padding: 12px 20px; background: rgb(246 245 242 / 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hair); }
nav.toc ul { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
nav.toc ul::-webkit-scrollbar { display: none; }
nav.toc a { display: block; color: var(--text-3); font-size: 13px; white-space: nowrap; transition: color var(--fast) var(--ease); }
nav.toc a.on { color: var(--text); font-weight: 700; }

/* a part of the page: a heading and room around it */
.part { margin-top: 96px; scroll-margin-top: 120px; }
main > .part:first-of-type, nav.toc + .part { margin-top: 48px; }
.part > h2 { margin: 0; font-size: 28px; line-height: 1.45; }
.part > .sub { max-width: 640px; margin: 12px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.8; }
.part > h2 + *:not(.sub), .part > .sub + *:not(.sub) { margin-top: 32px; }
.part > .note { margin: 24px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.8; }

/* the steps: each number on one of the logo's tiles, in the logo's order of colours */
.part .steps { gap: 32px; counter-reset: step; }
.part .steps li { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.part .steps li::before { position: static; display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 16px; border-radius: 8px; color: #fff; font: 800 16px/1 var(--round); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.12); }
.part .steps li:nth-child(1)::before { background: var(--c-coral); }
.part .steps li:nth-child(2)::before { background: var(--c-yellow); }
.part .steps li:nth-child(3)::before { background: var(--c-blue); }
.part .steps b { display: block; font-size: 17px; line-height: 1.5; }
.part .steps p { margin-top: 8px; color: var(--text-2); font-size: 15px; font-weight: 500; line-height: 1.9; }
.part .steps p br { display: none; }

/* the table: hairlines between rows, nothing around it */
.part .table-wrap { border-radius: 0; background: none; box-shadow: none; }
.part .facts-table { font-size: 15px; font-variant-numeric: tabular-nums; }
.part .facts-table th, .part .facts-table td { padding: 16px 12px 16px 0; border-top: 1px solid var(--hair); }
.part .facts-table thead th { border-top: 0; color: var(--text-3); font-size: 13px; font-weight: 500; }
.part .facts-table tbody th { font-family: var(--font); font-weight: 700; }

/* scenes: when this suits, and which game - words in two columns */
.scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.scenes section { display: grid; gap: 8px; align-content: start; padding-top: 20px; border-top: 1px solid var(--hair); }
.scenes h3 { margin: 0; font-size: 17px; line-height: 1.5; }
.scenes p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.9; }
.scenes .suits { margin-top: 4px; color: var(--text); font-size: 14px; font-weight: 700; }
.scenes .suits span { margin-right: 12px; color: var(--text-3); font-size: 12px; font-weight: 500; }

/* tabs: a segmented control, then the chosen game's part on paper */
.tabs { border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.tabs [role="tablist"] { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgb(30 34 42 / 0.05); }
.tabs [role="tab"] { padding: 8px 16px; border-radius: 8px; color: var(--text-3); font-size: 14px; font-weight: 500; transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.tabs [role="tab"]:hover { color: var(--text); }
.tabs [role="tab"][aria-selected="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgb(30 34 42 / 0.08), 0 0 0 1px var(--hair); }
.tabs [role="tabpanel"] { box-shadow: 0 0 0 1px var(--hair); margin-top: 20px; padding: 32px; border-radius: 16px; background: var(--panel); scroll-margin-top: 140px; }
@media (prefers-reduced-motion: no-preference) {
  .tabs [role="tabpanel"]:not([hidden]) { animation: rise 240ms var(--ease) both; }
}
.tabs [role="tabpanel"] h3 { margin: 0 0 16px; font-size: 20px; line-height: 1.4; }
.tabs [role="tabpanel"] p { margin: 0 0 12px; color: var(--text-2); font-size: 15px; line-height: 1.95; }
.tabs [role="tabpanel"] p:last-child { margin-bottom: 0; }
.tabs [role="tabpanel"] p b { color: var(--text); font-weight: 700; }
.tabs dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid var(--hair); font-size: 14px; }
.tabs dt { color: var(--text-3); }
.tabs dd { margin: 0; font-weight: 500; }
@media (max-width: 560px) {
  .tabs [role="tablist"] { display: flex; }
  .tabs [role="tab"] { flex: 1; padding: 8px 4px; font-size: 13px; }
  .tabs [role="tabpanel"] { padding: 24px 20px; }
}

/* small game links: a ruled list, each with its tile */
.minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; padding: 0; list-style: none; }
.minis a { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--hair); }
.minis a::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-top: 1.5px solid var(--text-3); border-right: 1.5px solid var(--text-3); rotate: 45deg; transition: transform var(--fast) var(--ease); }
.minis a:hover::after { transform: translate(2px, -2px); }
.minis .tile { width: 40px; height: 40px; border-radius: 10px; font-size: 18px; box-shadow: none; }
.minis b:not(.tile) { display: block; font-size: 16px; line-height: 1.5; transition: color var(--fast) var(--ease); }
.minis a:hover b:not(.tile) { color: var(--act); }
.minis small { display: block; margin-top: 4px; color: var(--text-3); font-size: 13px; }

/* questions that open: a ruled list, a plus that turns */
.qa h3 { margin: 48px 0 8px; color: var(--text-3); font-size: 13px; font-weight: 500; }
.qa h2 + h3 { margin-top: 32px; }
.qa details { border-bottom: 1px solid var(--hair); }
.qa h3 + details { border-top: 1px solid var(--hair); }
.qa summary { position: relative; padding: 20px 48px 20px 0; font: 700 15px/1.6 var(--font); list-style: none; cursor: pointer; transition: color var(--fast) var(--ease); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before, .qa summary::after { content: ""; position: absolute; top: 50%; right: 8px; width: 12px; height: 1.5px; background: var(--text-3); transition: transform 240ms var(--ease); }
.qa summary::after { transform: rotate(90deg); }
.qa details[open] summary::after { transform: rotate(0deg); }
.qa summary:hover { color: var(--act); }
.qa details p { margin: 0; padding: 0 48px 24px 0; color: var(--text-2); font-size: 15px; line-height: 1.95; }
@media (prefers-reduced-motion: no-preference) {
  .qa details[open] p { animation: rise 240ms var(--ease) both; }
}
.qa a { color: var(--act); text-decoration: underline; text-underline-offset: 2px; }

/* ---- 4 sidebar: plain lists under small titles ---- */
.side { display: grid; gap: 40px; align-content: start; font-size: 14px; }
.side .box { display: grid; gap: 8px; }
.side h2 { margin: 0; color: var(--text-3); font-size: 12px; font-weight: 500; }
.side ul, .side ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
/* the contents as a white card with numbered parts, the games' pages to read's own look */
.side .toc-side { padding: 18px 14px 14px; border-radius: 18px; background: var(--panel); box-shadow: 0 1px 2px rgb(22 28 45 / 0.06), 0 8px 24px -14px rgb(22 28 45 / 0.14); counter-reset: toc; }
.side .toc-side h2 { padding: 0 6px 4px; color: var(--text); font-size: 15px; font-weight: 700; }
.side .toc-side a { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 10px; color: var(--text-2); font-size: 13.5px; font-weight: 500; line-height: 1.45; transition: color var(--fast) var(--ease), background var(--fast) var(--ease); }
.side .toc-side a::before { counter-increment: toc; content: counter(toc); flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--acc, #ff8a5c); color: #fff; font-size: 11px; font-weight: 800; font-family: var(--round, inherit); }
.side .toc-side a:hover { color: var(--text); background: var(--page); }
.side .toc-side a.on { color: var(--text); font-weight: 700; background: color-mix(in srgb, var(--acc, #ff8a5c) 10%, transparent); }
.side .box.invite { box-shadow: 0 0 0 1px var(--hair); gap: 8px; padding: 20px; border-radius: 16px; background: var(--panel); }
.side .box.invite h2 { color: var(--text); font-size: 16px; }
.side .box.invite a { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--hair); color: var(--text); font-weight: 500; transition: color var(--fast) var(--ease); }
.side .box.invite li:first-child a { border-top: 0; }
.side .box.invite a::after { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; rotate: 45deg; }
.side .box.invite a:hover { color: var(--act); }
.side .links a { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--text); transition: color var(--fast) var(--ease); }
.side .links a:hover { color: var(--act); }
.side .links .tile { width: 20px; height: 20px; border-radius: 6px; font-size: 10px; box-shadow: none; }

/* ---- 5 footer: small type on the paper's darker tone ---- */
.site-foot { border-top: 1px solid var(--hair); margin-top: 128px; padding: 40px 0 max(32px, env(safe-area-inset-bottom)); background: var(--panel); color: var(--text-3); font-size: 12px; }
.site-foot .in { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.site-foot .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 640px) { .site-foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-foot h2 { margin: 0 0 12px; color: var(--text); font-size: 12px; font-weight: 700; }
.site-foot ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-foot a { transition: color var(--fast) var(--ease); }
.site-foot a:hover { color: var(--text); }
.site-foot .small { margin: 32px 0 0; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 12px; line-height: 1.8; }
.site-foot .small a { text-decoration: underline; }

:is(.masthead, .start, .site, .site-foot) :focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; border-radius: 4px; }

@media (min-width: 960px) {
  /* the contents on the left, as on every game's pages to read (the owner 11-05: ナビが右にあったり左にあったり) */
  .layout { grid-template-columns: 228px minmax(0, 1fr); align-items: start; gap: 48px; }
  .side { position: sticky; top: 112px; order: -1; }
  nav.toc { display: none; }
}
@media (max-width: 959px) { .side .toc-side { display: none; } }
/* one way to play on a 攻略 page (#113, the owner 11-05: ナビメニューのほうを残して): the game's card
   beside the contents where there is a side, the page's own button where the side falls below it */
@media (min-width: 960px) { .layout > main.guide-page > .guide-play { display: none; } .layout > main.guide-page > .guide-play + .g-sec { margin-top: 28px; } }
@media (max-width: 959px) { .side .guide-start { display: none; } }
@media (max-width: 640px) {
  .layout { margin-top: 48px; }
  .part { margin-top: 72px; }
  .part > h2 { font-size: 24px; }
  .scenes, .minis { grid-template-columns: minmax(0, 1fr); }
  .part .steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 560px) {
  /* four columns on a phone: smaller type, and the last column wide enough for いつでも whole */
  .part .facts-table { font-size: 13px; }
  .part .facts-table th, .part .facts-table td { padding: 12px 8px 12px 0; }
  .part .facts-table td:last-child { min-width: 7em; }
}

/* ---- how it behaves (11-02, "a company's quality - the UI and UX") ---- */

/* a way past the header for the keyboard */
.skip { position: absolute; left: 16px; top: -48px; z-index: 30; padding: 8px 16px; border-radius: 8px; background: var(--text); color: #fff; font-size: 14px; font-weight: 700; transition: top var(--fast) var(--ease); }
.skip:focus { top: 12px; }

/* within the page, the move is seen, not a jump */
@media (prefers-reduced-motion: no-preference) { html:has(.masthead) { scroll-behavior: smooth; } }

/* the header steps out of the way while reading down and comes back on the way up (site-frame.js
   sets .tucked and --head, the header's height, which what is held below it follows) */
body:has(.masthead):has(.site) { --head: 88px; }
.masthead { transition: transform 240ms var(--ease); }
.masthead.tucked { transform: translateY(-100%); }
nav.toc { top: var(--head); transition: top 240ms var(--ease); }
body:has(.masthead.tucked) nav.toc { top: 0; }
@media (min-width: 960px) {
  .side { top: calc(var(--head) + 24px); transition: top 240ms var(--ease); }
  body:has(.masthead.tucked) .side { top: 24px; }
}

/* a game's whole row starts it, not only its button: the button's link covers the row */
.picks > .pick { position: relative; transition: box-shadow var(--fast) var(--ease); }
.picks > .pick .go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.picks > .pick:has(.go:hover) { box-shadow: 0 0 0 1px rgb(30 34 42 / 0.18), 0 4px 12px rgb(30 34 42 / 0.06); }
.picks > .pick:has(.go:hover) .go { background: var(--act-press); }
/* (no scale on press here: the row moved under the finger between press and release, and the
   browser took it for no click at all) */
.picks > .pick:has(.go:active) { box-shadow: 0 0 0 1px rgb(30 34 42 / 0.24); }
.picks > .pick .go:active { transform: none; }
.picks > .pick:has(.go:focus-visible) { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.picks > .pick .go:focus-visible { outline: none; }

/* the loop can be stopped (it moves for more than five seconds) */
.live-frame { position: relative; }
.live-toggle { position: absolute; left: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgb(30 34 42 / 0.64); color: #fff; opacity: 0.8; transition: opacity var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.live-toggle:hover, .live-toggle:focus-visible { opacity: 1; background: rgb(30 34 42 / 0.84); }
.live-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.live-toggle .i-play { display: none; fill: currentColor; stroke: none; }
.live-toggle[aria-pressed="true"] .i-pause { display: none; }
.live-toggle[aria-pressed="true"] .i-play { display: block; }

/* ---- standing alone: a game's page has none of the hub's styles.css, so the frame brings what it
   draws with - the logo's tiles, the paper, the type - and leaves the page's own look inside ---- */
.masthead .tile { display: grid; place-items: center; color: #fff; font-family: "Lounge Round", "M PLUS Rounded 1c", sans-serif; font-weight: 900; line-height: 1; }
.masthead .c-coral { background: #ff8a5c; } .masthead .c-yellow { background: #f5b83d; }
.masthead .c-blue { background: #4aaef0; } .masthead .c-green { background: #6cc46e; }
.masthead, .site-foot, .more-game { --font: "Lounge Sans", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); }
.masthead a, .site-foot a, .side a, .frame-crumbs a { color: inherit; text-decoration: none; }
.masthead button, .side button { font: inherit; }
/* room for the parts before site-frame-parts.js fills them, so nothing below jumps */
[data-frame="head"] { display: block; min-height: 88px; }
[data-frame="foot"] { display: block; min-height: 240px; margin-top: 128px; }

/* ---- a page of words in the frame (the hub's about, privacy, brain-training, English guide...):
   its own main.about inside .layout, set as the guide is set ---- */
.layout > main.about { max-width: none; margin: 0; padding: 0; }
.layout > main.about h1 { margin: 0; font: 700 32px/1.4 var(--font); letter-spacing: 0.02em; font-feature-settings: "palt"; text-wrap: balance; }
.layout > main.about .lead, .layout > main.about > p { max-width: 680px; margin: 16px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.9; }
.layout > main.about h2 { margin: 72px 0 0; color: var(--text); font: 700 24px/1.45 var(--font); letter-spacing: 0.02em; font-feature-settings: "palt"; }
.layout > main.about h3 { margin: 24px 0 0; font: 700 17px/1.5 var(--font); }
.layout > main.about p, .layout > main.about li { font-size: 15px; line-height: 1.9; }
/* links in running words only: the page's own cards and buttons keep their look */
.layout > main.about :is(p, td, dd) > a:not([class]), .layout > main.about :not(.modes) > li > a:not([class]) { color: var(--act); text-decoration: underline; text-underline-offset: 2px; }
.layout > main.about .modes a, .layout > main.about .modes a * { text-decoration: none; }
.part-anchor { scroll-margin-top: 120px; }
/* a policy's numbered parts: white cards on the paper, as the guide's panels are */
.layout > main.policy > section { margin-top: 16px; padding: 24px 28px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--hair); }
.layout > main.policy > section:first-of-type { margin-top: 32px; }
.layout > main.policy h2 { margin: 0 0 12px; font-size: 18px; }
.layout > main.policy .dates { color: var(--text-3); font-size: 13px; }
@media (max-width: 640px) {
  .layout > main.about h1 { font-size: 26px; }
  .layout > main.about h2 { margin-top: 56px; font-size: 21px; }
  .layout > main.policy > section { padding: 20px; }
}

/* right under the crumbs, a page of words starts at once (the guide's layout comes after its
   opening, so it keeps its room and rule) */
.frame-crumbs + .site > .layout { margin-top: 24px; padding-top: 0; border-top: 0; }

/* ---- a game's page styles bare elements its own way (footer { text-align: center }, h2 { ... },
   ul { ... }, a { ... }): the frame's own parts set what they rely on, so they read the same on
   every page of the Lounge ---- */
.masthead, .site-foot, .more-game { box-sizing: border-box; text-align: left; line-height: 1.5; letter-spacing: 0.03em; font-family: var(--font); font-weight: 500; }
.masthead *, .site-foot * { box-sizing: border-box; }
.masthead :is(header, nav, ul, li, p, div), .site-foot :is(section, ul, li, div) { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; max-width: none; width: auto; }
.masthead ul, .site-foot ul { list-style: none; }
.masthead li::before, .masthead li::after, .site-foot li::before, .site-foot li::after, .site-foot h2::before, .site-foot h2::after { content: none; }
.site-foot { color: var(--text-3); font-size: 12px; }
.site-foot h2 { padding: 0; border: 0; background: none; font-family: var(--font); letter-spacing: 0.03em; text-align: left; }
.site-foot .cols { display: grid; }
.site-foot ul { display: grid; gap: 8px; }
.site-foot .small { margin: 32px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hair); }
.masthead .site-head .in { display: flex; }
.masthead .site-head .in { padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left)); }
.masthead .site-head .in, .site-foot .in { max-width: 1080px; margin: 0 auto; }
.site-foot { padding: 40px 0 max(32px, env(safe-area-inset-bottom)); }
.site-foot .in { padding: 0 20px; }

/* on paper: a printed puzzle or how-to is the page itself, without the Lounge's header and footer */
@media print { .masthead, .site-foot, [data-frame], .skip { display: none !important; } }

/* a game's footer { display: flex } is not the frame's */
.site-foot { display: block; }

/* ---- after dark: a game's pages turn dark with the device (jigsaw, mines...); there the frame's
   header and footer turn with them. The hub's own pages stay on paper, as they always are ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body:not(:has(.site)) :is(.masthead, .site-foot, .more-game, .lounge-rail, .lounge-dates) {
    --page: #181a1f; --panel: #20232a; --text: #e9eaee; --text-2: #b4b9c4; --text-3: #9aa0ac; --hair: rgb(255 255 255 / 0.1);
    color: var(--text);
  }
  :root:not([data-theme="light"]) body:not(:has(.site)) .masthead { background: rgb(24 26 31 / 0.86); }
  :root:not([data-theme="light"]) body:not(:has(.site)) .site-foot { background: var(--panel); }
}

/* ---- メニュー (#113): every game, how each is played and the pages to read, opened from the header ----
   (written after the header's reset above, and with .masthead in front, so the reset does not undo it) */
.masthead .menu-open { gap: 8px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--text); border: 1px solid var(--hair); }
.masthead .menu-bars { display: inline-grid; gap: 3px; width: 14px; }
.masthead .menu-bars i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform 220ms var(--ease), opacity 160ms var(--ease); }
.masthead .menu-open[aria-expanded="true"] .menu-bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.masthead .menu-open[aria-expanded="true"] .menu-bars i:nth-child(2) { opacity: 0; }
.masthead .menu-open[aria-expanded="true"] .menu-bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.masthead .site-menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--panel); border-bottom: 1px solid var(--hair); box-shadow: 0 18px 40px rgb(30 34 42 / 0.12); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; }
.masthead .site-menu:not([hidden]) { animation: menu-in 220ms var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.masthead .site-menu-in { display: grid; gap: 18px; max-width: 1080px; margin: 0 auto; padding: 22px max(20px, env(safe-area-inset-right)) 24px max(20px, env(safe-area-inset-left)); }
/* the games, one link each to their 攻略 page; then, under a rule and smaller, the Lounge's other pages */
.masthead .site-menu .m-games ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 12px; }
.masthead .site-menu .m-game { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: var(--text); font-size: 14px; font-weight: 700; }
.masthead .site-menu .m-games .tile { width: 30px; height: 30px; border-radius: 8px; font-size: 15px; box-shadow: none; flex: none; }
.masthead .site-menu .m-more { padding-top: 16px; border-top: 1px solid var(--hair); }
.masthead .site-menu .m-list { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.masthead .site-menu .m-list a { display: block; padding: 6px 8px; border-radius: 8px; color: var(--text-3); font-size: 13px; font-weight: 500; }
.masthead .site-menu a:hover { background: var(--page); color: var(--text); }
.masthead .site-menu a[aria-current="page"] { color: var(--act); }
@media (max-width: 760px) {
  .masthead .site-menu-in { gap: 14px; padding-top: 14px; }
  .masthead .site-menu .m-games ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .masthead .site-menu:not([hidden]) { animation: none; }
  .masthead .menu-bars i { transition: none; }
}

/* ---- 攻略 pages and the site map (#113, scripts/make-guides.mjs) ----
   Made to look like the games' own pages to read (the owner 11-05: 記事ページと見た目をそろえる):
   each part a white card with its number in the game's colour (--acc, set on main), the button to
   play in that colour, cards of pages with a small picture each (scripts/guide-pics.mjs). */
.guide-page { --acc: #ff8a5c; counter-reset: g-part; }
.frame-crumbs { font-size: 13px; font-weight: 500; color: var(--text-3); }
.layout > main.guide-page > .guide-play { margin: 22px 0 28px; }
.g-go, .g-go:visited { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 26px; border-radius: 16px; background: var(--acc); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; box-shadow: 0 6px 16px -8px var(--acc); transition: filter var(--fast) var(--ease), transform var(--fast) var(--ease); }
.g-go::after { content: "→"; }
.g-go:hover { filter: brightness(0.95); transform: translateY(-1px); }
.guide-page .g-sec { margin: 0 0 18px; padding: 22px 22px 20px; border-radius: 20px; background: var(--panel); box-shadow: 0 1px 2px rgb(22 28 45 / 0.06), 0 8px 24px -12px rgb(22 28 45 / 0.12); }
.layout > main.guide-page .g-sec > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 20px; }
.guide-page:not([data-guide=""]) .g-sec > h2::before { counter-increment: g-part; content: counter(g-part); display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--acc); color: #fff; font-family: var(--round, inherit); font-size: 16px; font-weight: 800; }
.guide-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.guide-list li { margin: 0; padding: 0; }
.guide-list li::before { content: none; }
.guide-list .g-item { display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: 14px; background: var(--panel); transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.guide-list .g-item:hover { border-color: color-mix(in srgb, var(--acc) 55%, transparent); box-shadow: 0 6px 18px -12px rgb(22 28 45 / 0.35); }
.guide-page .guide-list .g-card, .guide-page .guide-list .g-card:visited { display: flex; align-items: center; gap: 14px; flex: 1; padding: 12px 14px; color: var(--text); text-decoration: none; }
.g-card .g-art { flex: none; width: 64px; height: 64px; }
.g-pic { display: block; width: 64px; height: 64px; border-radius: 10px; }
.g-img { object-fit: cover; box-shadow: inset 0 0 0 1px var(--hair); }
.g-tan { display: grid; place-items: center; background: color-mix(in srgb, var(--acc) 10%, #fff); }
.g-tan svg { width: 54px; height: 54px; }
.g-card .g-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.guide-page .guide-list b { color: var(--text); font-size: 15px; line-height: 1.45; }
.guide-page .guide-list .g-text span { color: var(--text-3); font-size: 13px; line-height: 1.6; }
.g-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px 92px; }
.guide-page .g-chips a, .guide-page .g-chips a:visited { padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 12%, #fff); color: var(--text); font-size: 13px; font-weight: 700; text-decoration: none; }
.guide-page .g-chips a:hover { background: color-mix(in srgb, var(--acc) 24%, #fff); }
/* the drawn pictures: paper, ink and the game's colour */
.g-pic .p { fill: #fff; }
.g-pic .s { fill: color-mix(in srgb, var(--acc) 16%, #fff); }
.g-pic .x { fill: #eef0f3; }
.g-pic .u { fill: color-mix(in srgb, var(--acc) 30%, #dfe3ea); }
.g-pic .k { fill: var(--acc); }
.g-pic .k2 { fill: color-mix(in srgb, var(--acc) 60%, #1e222a); }
.g-pic .c2 { fill: #4aaef0; }
.g-pic .c3 { fill: #6cc46e; }
.g-pic .c4 { fill: #f5b83d; }
.g-pic .i { fill: #1e222a; opacity: 0.7; }
.g-pic .l { stroke: rgb(30 34 42 / 0.16); stroke-width: 0.5; fill: none; }
.g-pic .lb { stroke: rgb(30 34 42 / 0.55); stroke-width: 1; fill: none; }
.g-pic .cage { stroke: var(--acc); stroke-width: 0.8; stroke-dasharray: 1.6 1.2; fill: none; }
.g-pic .kline { stroke: var(--acc); stroke-width: 1.4; fill: none; }
.g-pic .sheet { fill: #fff; stroke: rgb(30 34 42 / 0.25); stroke-width: 1; }
.g-pic .fold { fill: color-mix(in srgb, var(--acc) 16%, #fff); stroke: rgb(30 34 42 / 0.25); stroke-width: 1; }
.g-pic .tan-sil path { fill: #1e222a; opacity: 0.75; }
.g-pic .num { font-family: var(--round, sans-serif); font-weight: 800; text-anchor: middle; }
.g-pic .n1 { fill: #2f6fd6; }
.g-pic .n2 { fill: #2e9a4a; }
.g-pic .n3 { fill: #d0452c; }
.g-pic .flag { fill: #d0452c; }
.g-pic .pole { stroke: #1e222a; stroke-width: 0.8; }
.g-pic .loopline { stroke: var(--acc); stroke-width: 2.6; fill: none; stroke-linejoin: round; }
.g-pic .piece { stroke: #fff; stroke-width: 1.4; }
.g-pic .link { stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.g-pic .l1 { stroke: #ff8a5c; fill: #ff8a5c; }
.g-pic .l2 { stroke: #4aaef0; fill: #4aaef0; }
.g-pic .l3 { stroke: #a68af2; fill: #a68af2; }
.g-pic .dot { stroke: #fff; stroke-width: 1.2; }
.g-pic .t1, .g-pic .t2, .g-pic .t3, .g-pic .t4, .g-pic .t5, .g-pic .t6, .g-pic .t7 { stroke: #fff; stroke-width: 0.06; }
.g-pic .t1 { fill: #ff8a5c; }
.g-pic .t2 { fill: #4aaef0; }
.g-pic .t3 { fill: #f5b83d; }
.g-pic .t4 { fill: #6cc46e; }
.g-pic .t5 { fill: #a68af2; }
.g-pic .t6 { fill: #f07aa0; }
.g-pic .t7 { fill: #3fbfb0; }
/* the other games: their tiles, in a row of cards */
.guide-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.guide-others li::before, .map-list li::before { content: none; }
.guide-page .g-game, .guide-page .g-game:visited { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 12px; color: var(--text); font-weight: 700; font-size: 14px; text-decoration: none; transition: border-color var(--fast) var(--ease); }
.guide-page .g-game:hover { border-color: var(--text-3); }
.guide-page .g-game .tile, .guide-page h2 .tile, .side .guide-start .tile { flex: none; width: 30px; height: 30px; border-radius: 8px; font-size: 15px; box-shadow: none; }
.layout > main.guide-page .g-map { margin: 16px 0 0; font-size: 14px; }
.layout > main.guide-page .g-map a { color: var(--text-2); font-weight: 700; text-decoration: none; }
.layout > main.guide-page .g-map a::after { content: " →"; }
.layout > main.guide-page .g-map a:hover { color: var(--text); }
.layout > main.guide-page > .lead + .g-sec { margin-top: 28px; }
.layout > main.guide-page :is(.map-list > li, .guide-play-line) > a:not([class]) { color: var(--text); text-decoration-color: var(--hair); text-decoration-thickness: 1px; }
.layout > main.guide-page :is(.map-list > li, .guide-play-line) > a:not([class]):hover { color: var(--act); text-decoration-color: currentColor; }
.map-list { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 8px 0 0; padding: 0; list-style: none; }
.layout > main.guide-page h3 { margin: 16px 0 0; font-size: 14px; color: var(--text-3); }
.guide-page h2 a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.guide-play-line { margin: 6px 0 0; font-size: 14px; }
/* the sidebar on a 攻略 page: the game, to play or to start reading */
.side .guide-start h2 { display: flex; align-items: center; gap: 10px; }
.side .guide-start p { margin: 4px 0 0; }
.side .box.guide-start a.g-go { display: flex; width: 100%; justify-content: center; min-height: 44px; padding: 0 16px; border: 0; color: #fff; font-size: 15px; }
.side .box.guide-start a.g-go::after { content: "→"; width: auto; height: auto; border: 0; rotate: none; }
.side .guide-start .first { margin-top: 10px; color: var(--text-3); font-size: 13px; line-height: 1.6; }
.side .box.guide-start .first a { display: inline; padding: 0; border: 0; color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.side .box.guide-start .first a::after { content: none; }
@media (max-width: 600px) {
  /* sized for a phone (#113, the owner 11-05: スマホの時には…ボタンがでかすぎます) */
  .layout > main.guide-page > h1 { font-size: 22px; line-height: 1.4; }
  .layout > main.guide-page > .lead { margin-top: 8px; font-size: 13.5px; line-height: 1.75; }
  .layout > main.guide-page > .guide-play { margin: 14px 0 18px; }
  .guide-page .g-go, .guide-page .g-go:visited { min-height: 38px; padding: 0 16px; gap: 6px; border-radius: 11px; font-size: 14px; box-shadow: 0 4px 10px -6px var(--acc); }
  .layout > main.guide-page .g-sec > h2 { gap: 8px; margin-bottom: 10px; font-size: 16px; }
  .guide-page:not([data-guide=""]) .g-sec > h2::before { width: 24px; height: 24px; border-radius: 7px; font-size: 13px; }
  .guide-page .g-sec { margin: 0 -4px 12px; padding: 14px 12px 12px; border-radius: 16px; }
  .guide-list { grid-template-columns: 1fr; gap: 8px; }
  .guide-page .guide-list .g-card, .guide-page .guide-list .g-card:visited { gap: 12px; padding: 10px 12px; }
  .guide-page .guide-list b { font-size: 14px; }
  .guide-page .guide-list .g-text span { font-size: 12.5px; line-height: 1.55; }
  .g-card .g-art, .g-pic { width: 48px; height: 48px; }
  .g-tan svg { width: 40px; height: 40px; }
  .g-chips { padding-left: 72px; }
  .guide-page .g-game, .guide-page .g-game:visited { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .guide-list .g-item, .g-go { transition: none; } .g-go:hover { transform: none; } }

/* ---- at the foot of a game's page: the rest of its part, and its other parts (#113) ---- */
.more-game { position: relative; z-index: 3; margin-top: 56px; border-top: 1px solid var(--hair); background: var(--panel); font-family: var(--font, inherit); }
.more-game .in { max-width: 1080px; margin: 0 auto; padding: 28px max(20px, env(safe-area-inset-right)) 32px max(20px, env(safe-area-inset-left)); }
.more-game h2 { margin: 0 0 8px; padding: 0; border: 0; background: none; font-size: 17px; text-align: left; }
.more-game h2::before, .more-game h2::after, .more-game h3::before, .more-game h3::after { content: none; }
.more-game h3 { margin: 16px 0 8px; padding: 0; border: 0; background: none; font-size: 12px; color: var(--text-3); letter-spacing: 0.04em; text-align: left; }
.more-game ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.more-game li { margin: 0; padding: 0; }
.more-game li::before { content: none; }
.more-game a { color: var(--text); text-decoration: none; }
.more-game h2 a:hover { text-decoration: underline; }
.more-game ul a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--hair); border-radius: 999px; background: var(--page); font-size: 13px; line-height: 1.4; }
.more-game ul a:hover { border-color: var(--text-3); }
.more-game ul a[aria-current="page"] { border-color: var(--text); font-weight: 700; }
.more-game ul small { color: var(--text-3); font-size: 11px; }
.more-game p { margin: 20px 0 0; }
.more-game .more-play { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 10px; background: var(--act); color: #fff; font-size: 14px; font-weight: 700; }
.more-game .more-play:hover { background: var(--act-press); }

/* ---- The rail and the page's dates on every game's page to read; the menu's search ----
   (the owner 11-05: 一流の攻略サイトと比べて - ナビを左に揃え、攻略メニュー・更新日・人気・新着・検索)
   A game's page wraps its words as
     <div class="lounge-cols"><aside class="lounge-rail" data-frame="rail"></aside><div class="lounge-body">…</div></div>
   On a wide screen the rail stands left of the words, 228px, in the same place on every game and on
   the Lounge's own pages (.layout above: the same 1040px, the same 48px between); on a phone it is
   not shown, and the foot of the page (.more-game) does its work. */
.lounge-cols { display: block; }
.lounge-rail { display: none; }
@media (min-width: 960px) {
  .lounge-cols { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 48px; align-items: start; box-sizing: border-box; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
  .lounge-body { min-width: 0; }
  .lounge-rail { display: block; position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 24px 2px 24px 0; }
  .has-rail .more-game { display: none; }
}
.lounge-rail .rail-in { display: grid; gap: 14px; font-family: var(--font, "Noto Sans JP", sans-serif); font-size: 13.5px; letter-spacing: 0.02em; }
.rail-card { padding: 16px 14px 12px; border-radius: 18px; background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgb(22 28 45 / 0.06), 0 8px 24px -14px rgb(22 28 45 / 0.14); }
.rail-card h2 { margin: 0 0 6px; padding: 0 6px; color: var(--text); font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.rail-card ol, .rail-card ul { margin: 0; padding: 0; list-style: none; }
.rail-card li { margin: 0; padding: 0; }
.rail-card li::before { content: none; }
.rail-card a { color: var(--text); font-weight: 500; text-decoration: none; }
.rail-card a:hover { color: var(--text); }
/* this page's contents: numbered, as each game numbers its parts */
.rail-toc ol { counter-reset: rail-toc; }
.rail-toc a { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; line-height: 1.45; }
.rail-toc a::before { counter-increment: rail-toc; content: counter(rail-toc); flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--acc, #ff8a5c); color: #fff; font-size: 11px; font-weight: 800; font-family: var(--round, inherit); }
.rail-toc a:hover { background: var(--page); }
.rail-toc a.on { color: var(--text); font-weight: 700; background: color-mix(in srgb, var(--acc, #ff8a5c) 10%, transparent); }
/* the game's 攻略 menu: its parts folded but the one this page is in */
.rail-menu h2 a { display: flex; align-items: center; gap: 8px; color: var(--text); }
.rail-menu h2 .tile { flex: none; width: 24px; height: 24px; border-radius: 7px; font-size: 12px; box-shadow: none; }
.rail-menu details { border-top: 1px solid var(--hair); }
.rail-menu summary { display: flex; align-items: center; gap: 6px; padding: 9px 6px; color: var(--text); font-weight: 700; cursor: pointer; list-style: none; }
.rail-menu summary::-webkit-details-marker { display: none; }
.rail-menu summary::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); rotate: 45deg; translate: 0 -2px; transition: rotate var(--fast, 150ms) ease; }
.rail-menu details[open] summary::after { rotate: 225deg; translate: 0 2px; }
.rail-menu summary small { color: var(--text-2); font-size: 11.5px; font-weight: 500; }
.rail-menu details ul { padding: 0 0 8px; }
.rail-menu details a { display: block; padding: 5px 6px 5px 12px; border-left: 2px solid var(--hair); line-height: 1.45; }
.rail-menu details a[aria-current="page"] { border-left-color: var(--acc, #ff8a5c); color: var(--text); font-weight: 700; background: color-mix(in srgb, var(--acc, #ff8a5c) 8%, transparent); border-radius: 0 8px 8px 0; }
.rail-menu .rail-play { margin: 6px 0 2px; padding: 10px 6px 0; border-top: 1px solid var(--hair); }
.rail-menu .rail-play a { display: flex; justify-content: center; padding: 9px 12px; border-radius: 12px; background: var(--acc, #ff8a5c); color: #fff; font-weight: 700; }
.rail-menu .rail-play a:hover { filter: brightness(0.95); color: #fff; }
/* the most read and the newest */
.rail-list ol { display: grid; gap: 2px; counter-reset: rail-list; }
.rail-list a { display: block; padding: 5px 6px; line-height: 1.45; border-radius: 8px; }
.rail-list a:hover { background: var(--page); }
.rail-list small { display: block; padding: 0 6px 4px; color: var(--text-2); font-size: 11.5px; }
/* the page's dates, under its title */
.lounge-dates { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 10px; color: var(--text-3, #6b7180); font-family: var(--font, "Noto Sans JP", sans-serif); font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; }
.lounge-dates span::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; border: 1.5px solid currentColor; border-radius: 50%; box-sizing: border-box; background: linear-gradient(currentColor, currentColor) 50% 30% / 1.5px 35% no-repeat, linear-gradient(currentColor, currentColor) 62% 55% / 30% 1.5px no-repeat; }
/* the menu's search */
.masthead .m-search { position: relative; }
.masthead .m-search label { display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--hair); border-radius: 12px; background: var(--page); }
.masthead .m-search label:focus-within { border-color: var(--text-3); background: var(--panel); }
.masthead .m-search-icon { flex: none; width: 14px; height: 14px; border: 2px solid var(--text-3); border-radius: 50%; box-sizing: border-box; position: relative; }
.masthead .m-search-icon::after { content: ""; position: absolute; right: -5px; bottom: -4px; width: 6px; height: 2px; background: var(--text-3); rotate: 45deg; border-radius: 2px; }
.masthead .m-search input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; color: var(--text); font: 500 15px/1 var(--font, sans-serif); outline: none; }
.masthead .m-search input::placeholder { color: var(--text-3); }
.masthead .m-results { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.masthead .m-results:not(:empty) { margin-top: 8px; }
.masthead .m-results a { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; color: var(--text); }
.masthead .m-results b { font-size: 14px; font-weight: 700; }
.masthead .m-results span { color: var(--text-3); font-size: 12px; }
.masthead .m-results .none { padding: 8px 10px; color: var(--text-3); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .rail-menu summary::after { transition: none; } }

/* The games' tiles in the frame's own parts, coloured here: a game's page has its own sheet, not the
   Lounge's styles.css, and there the menu's and the rail's tiles were left without colour (11-05). */
:is(.masthead, .lounge-rail) .tile { display: grid; place-items: center; flex: none; color: #fff; font-family: var(--round, "M PLUS Rounded 1c", sans-serif); font-weight: 900; line-height: 1; }
:is(.masthead, .lounge-rail) .tile.c-coral { background: #ff8a5c; }
:is(.masthead, .lounge-rail) .tile.c-yellow { background: #f5b83d; }
:is(.masthead, .lounge-rail) .tile.c-blue { background: #4aaef0; }
:is(.masthead, .lounge-rail) .tile.c-green { background: #6cc46e; }
:is(.masthead, .lounge-rail) .tile.c-purple { background: #a68af2; }
:is(.masthead, .lounge-rail) .tile.c-navy { background: #2f4a78; }
:is(.masthead, .lounge-rail) .tile.c-violet { background: #6a52c9; }
:is(.masthead, .lounge-rail) .tile.c-teal { background: #138a8a; }