/* The pages to read on one base (#164, the owner 11-08): a firm frame like a company's site, the
   game's own paper behind the words, the play kept inside the eyecatches. Only a page that says
   <html data-article="<game>"> wears this; the games' own screens never do. */

/* From page to page without a seam: the header and the rail stay, the words change. The frame is
   drawn before the first paint (the page's script is render-blocking), so nothing arrives late. */
@view-transition { navigation: auto; }
html[data-article] .masthead { view-transition-name: a-head; }
html[data-article] .lounge-rail { view-transition-name: a-rail; }
html[data-article] main.lounge-body { view-transition-name: a-main; }
::view-transition-group(a-head), ::view-transition-group(a-rail) { animation: none; z-index: 2; }
::view-transition-old(a-head), ::view-transition-new(a-head), ::view-transition-old(a-rail), ::view-transition-new(a-rail) { animation: none; }
/* the page leaves upward and quickly, the next comes up from below and settles */
::view-transition-group(a-main) { animation: none; }
::view-transition-old(a-main) { animation: a-out 0.16s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(a-main) { animation: a-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both; }
@keyframes a-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes a-in { from { opacity: 0; transform: translateY(36px); } }
/* a card's picture grows into the top of the page it opens */
html[data-article] .a-lead { view-transition-name: a-pic; }
::view-transition-group(a-pic) { z-index: 3; overflow: hidden; border-radius: 14px; animation-duration: 0.46s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
::view-transition-old(a-pic), ::view-transition-new(a-pic) { height: 100%; object-fit: cover; animation-duration: 0.46s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html[data-article] .a-lead { view-transition-name: none; }
}

@media screen {
  html[data-article] {
    --round: "Lounge Maru", "Lounge Round", "M PLUS Rounded 1c", "Lounge Sans", system-ui, sans-serif;
    --a-ink: #1e222a;
    --a-ink-2: #4b5260;
    --a-ink-3: #6b7280;
    --a-hair: #e2e4e9;
    --a-mist: #f3f4f6;
    --a-shadow: 0 1px 2px rgb(22 28 45 / 0.06), 0 10px 28px rgb(59 51 82 / 0.08);
  }
  html[data-article="loop"] { --g: #6a52c9; --g-deep: #54409f; --g-wash: #efeafd; --a-paper: #f5f3fa; --a-dot: rgb(59 51 82 / 0.16); }
  html[data-article="nanpure"] { --g: #2b7cc4; --g-deep: #1f5f9c; --g-wash: #dcedfb; --a-paper: #f6f5f2; --a-dot: rgb(30 34 42 / 0.13); }
  html[data-article="mines"] { --g: #2f8f46; --g-deep: #226b34; --g-wash: #e0f3e1; --a-paper: #f6f5f2; --a-dot: rgb(30 34 42 / 0.13); }
  html[data-article="pentomino"] { --g: #138a8a; --g-deep: #0e6b6b; --g-wash: #dcf2f0; --a-paper: #f2f8f7; --a-dot: rgb(20 90 90 / 0.15); }
  html[data-article="colorlink"] { --g: #c2416b; --g-deep: #9c2f52; --g-wash: #fbe7ee; --a-paper: #fbf4f6; --a-dot: rgb(120 40 70 / 0.13); }
  html[data-article="tangram"] { --g: #c97a12; --g-deep: #9c5c08; --g-wash: #fdf0d6; --a-paper: #f6f5f2; --a-dot: rgb(90 70 30 / 0.15); }
  html[data-article="top"] { --g: #d3562c; --g-deep: #a8431f; --g-wash: #ffece2; --a-paper: #f6f5f2; --a-dot: transparent; }
  html[data-article="jigsaw"] { --g: #d3562c; --g-deep: #a8431f; --g-wash: #ffece2; --a-paper: #f6f5f2; --a-dot: rgb(90 60 30 / 0.14); }
  html[data-article="nonogram"] { --g: #2f4a78; --g-deep: #223761; --g-wash: #e3e9f4; --a-paper: #f6f5f2; --a-dot: rgb(30 34 42 / 0.13); }
  html[data-article] .lounge-rail { --acc: var(--g) !important; }

  html[data-article] body {
    color: var(--a-ink);
    background: var(--a-paper) radial-gradient(circle, var(--a-dot) 1.3px, transparent 1.8px) 0 0 / 28px 28px;
    font-family: "Lounge Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;
  }

  /* headings: Zen Maru Gothic, its Black for the page's title alone */
  html[data-article] h1, html[data-article] h2, html[data-article] h3 { font-family: var(--round); font-weight: 700; letter-spacing: -0.02em; word-break: auto-phrase; text-wrap: balance; }
  html[data-article] h1 { font-weight: 900; }
  /* the logo and everything like it stay the Lounge's own round type */
  html[data-article] .tile, html[data-article] .mark-tiles { font-family: "Lounge Round", "M PLUS Rounded 1c", sans-serif; letter-spacing: 0; }

  /* the games' floor of tiles stays on the games and the front page */
  html[data-article] .deco, html[data-article] main .tiles:not(section *) { display: none; }
  html[data-article] .floor, html[data-article] .behind { display: none; }

  .a-in { box-sizing: border-box; width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
  html[data-article] .site-head { background: #fff; border-bottom: 1px solid var(--a-hair); box-shadow: none; }
  html[data-article] .site-head .in { box-sizing: border-box; display: flex; align-items: center; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; min-height: 72px; gap: 26px; }
  html[data-article] .masthead .a-nav { margin-left: auto; }
  .a-nav ul { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
  .a-nav a { color: var(--a-ink); font-size: 14px; font-weight: 700; text-decoration: none; }
  .a-nav a:hover { color: var(--g-deep); }
  .a-nav a[aria-current="page"], .a-nav a.on { box-shadow: 0 2px 0 var(--a-ink); }
  .a-cta { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 10px; background: #e2582c; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
  .a-cta:hover { filter: brightness(0.95); }

  /* the header stays in sight */
  html[data-article] .masthead { position: sticky; top: 0; z-index: 30; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  html[data-article] .site-head { box-shadow: 0 1px 3px rgb(22 28 45 / 0.08); }
  html[data-article] { scroll-padding-top: 88px; }
  html[data-article] body { overflow-x: clip; }
  /* the logo, as large as a company's name is */
  html[data-article] .masthead .mark-tiles { gap: 3px; }
  html[data-article] .masthead .mark-tiles .tile { width: 34px; height: 34px; border-radius: 9px; font-size: 19px; }
  html[data-article] .masthead .a-cta { background: #cf4a20; color: #fff; }

  /* pressed: the answer comes at once, before the next page has arrived */
  .a-card.a-pressed { transform: scale(0.985); box-shadow: 0 0 0 2px var(--g), 0 6px 18px rgb(59 51 82 / 0.1); }
  html[data-article] a.a-pressed:not(.a-card, .a-btn, .a-cta) { color: var(--g-deep); }
  .a-btn.a-pressed, html[data-article] .masthead .a-cta.a-pressed { transform: scale(0.97); }
  .a-btn, html[data-article] .masthead .a-cta { transition: transform 0.08s; }
  html[data-article] main.lounge-body { transition: opacity 0.14s ease-out, transform 0.14s ease-out; }
  html.a-leaving[data-article] main.lounge-body { opacity: 0.5; transform: translateY(-6px); }
  html[data-article] .masthead .a-bar { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; margin: 0; padding: 0; background: var(--g); transform-origin: 0 50%; animation: a-bar 1.2s cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes a-bar { from { transform: scaleX(0.08); } to { transform: scaleX(0.9); } }

  /* the feel under the finger: things give, and answer, as the games' own buttons do */
  .a-btn, html[data-article] .masthead .a-cta { box-shadow: 0 3px 0 var(--edge, #4f3ca3); transition: transform 0.09s ease-out, box-shadow 0.09s ease-out, filter 0.12s; }
  .a-btn { --edge: var(--g-deep); }
  .a-btn.line { --edge: rgb(59 51 82 / 0.22); box-shadow: inset 0 0 0 1px rgb(59 51 82 / 0.16), 0 3px 0 var(--edge); }
  html[data-article] .masthead .a-cta { --edge: #9c3715; }
  .a-btn:active, .a-btn.a-pressed, html[data-article] .masthead .a-cta:active, html[data-article] .masthead .a-cta.a-pressed { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }
  .a-btn.line:active, .a-btn.line.a-pressed { box-shadow: inset 0 0 0 1px rgb(59 51 82 / 0.16), 0 0 0 var(--edge); }
  .a-card { transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.16s; }
  .a-card:active, .a-card.a-pressed { transform: translateY(2px) scale(0.985); transition-duration: 0.07s; }
  .ec-board { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .ec-tile { transform-box: fill-box; transform-origin: 50% 100%; }
  @media (hover: hover) {
    .a-card:hover { transform: translateY(-4px); }
    .a-card:hover .ec-board { transform: rotate(-3deg) scale(1.05); }
    .a-card:hover .ec-tile { animation: ec-hop 0.44s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 34ms) both; }
    .a-btn:hover, html[data-article] .masthead .a-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
    html[data-article] .rail-card a { transition: background 0.12s, padding-left 0.12s, color 0.12s; }
    html[data-article] .rail-menu details a:hover, html[data-article] .rail-list a:hover { padding-left: 10px; color: var(--g-deep); }
    .a-nav a { transition: color 0.12s, box-shadow 0.12s; }
    .a-nav a:hover { box-shadow: 0 2px 0 var(--g); }
  }
  .a-card.a-pressed .ec-tile { animation: ec-hop 0.44s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 34ms) both; }
  @keyframes ec-hop { 45% { transform: translateY(-11%) scale(1.06); } }

  /* back to the game: only when the page was opened from it */
  .a-back { background: #fff; box-shadow: inset 0 -1px 0 var(--a-hair); }
  .a-back a { display: inline-block; padding: 9px 0; color: var(--g-deep); font-size: 14px; font-weight: 700; text-decoration: none; }

  /* a page to read: the words on a white sheet, the rail at the right */
  html[data-article] .lounge-cols { display: grid; grid-template-columns: minmax(0, 1fr); box-sizing: border-box; max-width: 1120px; margin: 0 auto; padding: 20px 20px 56px; gap: 44px; align-items: start; }
  html[data-article] main.lounge-body { box-sizing: border-box; max-width: none; margin: 0; padding: 32px; border-radius: 22px; background: #fff; box-shadow: var(--a-shadow); }
  html[data-article] .guide { display: block; }
  html[data-article] .guide-main { min-width: 0; }
  html[data-article] .guide-head { display: grid; gap: 12px; margin: 0 0 22px; }
  html[data-article] .guide-head h1 { margin: 0; font-size: clamp(25px, 3.4vw, 34px); line-height: 1.4; }
  html[data-article] .guide-head .lead { margin: 0; color: var(--a-ink-2); font-size: 16.5px; }
  html[data-article] .crumbs, html[data-article] .frame-crumbs, html[data-article] main > nav { color: var(--a-ink-3); font-size: 12.5px; font-weight: 500; }
  html[data-article] main > nav a, html[data-article] .crumbs a { color: inherit; text-underline-offset: 3px; text-decoration-color: #c5c9d1; }
  html[data-article] .lounge-dates { order: 3; margin: 0; }
  .a-lead { overflow: hidden; border-radius: 14px; aspect-ratio: 640 / 360; background: var(--g-wash); }
  /* the header's room, kept until it is drawn */
  html[data-article] [data-frame="head"] { display: block; height: 73px; background: #fff; }
  html[data-article] [data-frame="foot"] { display: block; min-height: 340px; background: var(--a-ink); }
  .ec { display: block; width: 100%; height: auto; }
  .ec-t { font-family: var(--round); font-weight: 900; letter-spacing: -0.02em; }

  html[data-article] .guide-main section, html[data-article] main.lounge-body > section { margin: 0 0 36px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; scroll-margin-top: 88px; }
  html[data-article] main .part-anchor > h2, html[data-article] .guide-main section > h2, html[data-article] main.lounge-body > section > h2 { margin: 0 0 14px; padding: 11px 16px; border-radius: 10px; border-left: 6px solid var(--g); background: var(--g-wash); color: var(--a-ink); font-size: 22px; line-height: 1.4; }
  html[data-article] main section > h2 .n, html[data-article] main section > h2 .num { display: none; }
  html[data-article] section > h3, html[data-article] section h3 { font-size: 18px; line-height: 1.5; }
  html[data-article] .play { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 12px; background: var(--g); box-shadow: none; color: #fff; font-weight: 700; text-decoration: none; }
  html[data-article] .to-toc { display: none; }

  /* cards with their eyecatches: the 攻略 pages' lists, and 次に読む */
  .a-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 12px 0 0; padding: 0; list-style: none; }
  .a-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .a-cards li { display: flex; margin: 0; padding: 0; }
  .a-cards li::before { content: none; }
  .a-card { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgb(22 28 45 / 0.08), 0 6px 18px rgb(59 51 82 / 0.1); color: var(--a-ink); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
  .a-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(22 28 45 / 0.08), 0 12px 26px rgb(59 51 82 / 0.14); }
  .a-pic { position: relative; display: block; }
  .a-chip { position: absolute; top: 8px; left: 8px; padding: 0 10px; border-radius: 999px; background: #fff; color: var(--a-ink); font-size: 11.5px; font-weight: 700; line-height: 1.85; }
  .a-text { display: grid; gap: 3px; padding: 12px 14px 14px; }
  .a-text b { font-family: var(--round); font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: -0.02em; word-break: auto-phrase; }
  .a-text span { color: var(--a-ink-2); font-size: 13px; line-height: 1.6; }
  .a-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .a-wide .a-text { gap: 6px; padding: 20px 26px; }
  .a-wide .a-text b { font-size: 21px; }
  .a-wide .a-text span { font-size: 14px; }

  /* the 攻略 page: built as a page to read, its lists in sections */
  /* the articles' front: the Lounge's grid paper, the whole width for its cards */
  html[data-article="top"] body { background-image: linear-gradient(to right, rgb(30 34 42 / 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgb(30 34 42 / 0.05) 1px, transparent 1px); background-size: 28px 28px; }
  .a-cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  @media (min-width: 760px) { .a-cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  /* a link in an article's opening words, where no game's own rule colours it */
  :where(html[data-article] main) p > a:not([class]) { color: var(--g-deep); }
  .a-acts { display: flex; flex-wrap: wrap; gap: 10px; }
  .a-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 12px; background: var(--g); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
  .a-btn.line { background: #fff; color: var(--a-ink); box-shadow: inset 0 0 0 1px rgb(59 51 82 / 0.16); }
  .a-group { scroll-margin-top: 88px; }
  .a-group > p { margin: -4px 0 0; color: var(--a-ink-2); font-size: 15px; }

  /* the rail, on the right: flat, the game's colour on what is lit */
  html[data-article] .lounge-rail .rail-card { border-radius: 16px; background: #fff; box-shadow: var(--a-shadow); }
  html[data-article] .rail-toc a::before { background: var(--g); }
  html[data-article] .rail-menu .rail-play a { background: var(--g); }

  /* the footer: dark, a site map in four columns */
  html[data-article] .site-foot { margin-top: 0; padding-top: 44px; border-top: 0; background: var(--a-ink); color: #c9ced8; }
  html[data-article] .site-foot .cols { gap: 28px; }
  html[data-article] .site-foot .a-foot-end { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin: 36px 0 0; padding: 18px 0 0; border-top: 1px solid #3a404c; }
  html[data-article] .a-foot-end .small { margin: 0; padding: 0; border: 0; }
  .a-lang { display: flex; gap: 14px; margin: 0; font-size: 12.5px; white-space: nowrap; }
  .a-lang span { color: #fff; font-weight: 700; }
  html[data-article] .site-foot .in { max-width: 1120px; }
  html[data-article] .site-foot h2 { color: #fff; font-family: "Lounge Sans", sans-serif; font-size: 13.5px; letter-spacing: 0; }
  html[data-article] .site-foot a { color: #c9ced8; }
  html[data-article] .site-foot .small { color: #9aa1ad; }

  @media (min-width: 960px) {
    html[data-article] .lounge-cols { grid-template-columns: minmax(0, 1fr) 260px; }
    html[data-article] .lounge-cols.a-front { grid-template-columns: minmax(0, 1fr); }
    html[data-article] .lounge-cols > .lounge-rail { order: 2; position: sticky; top: 88px; padding: 0 2px 16px 0; max-height: calc(100vh - 104px); }
    html[data-article] .guide-side { display: none; }
  }

  @media (max-width: 720px) {
    html[data-article] { scroll-padding-top: 68px; }
    html[data-article] [data-frame="head"] { height: 57px; }
    html[data-article] .masthead .mark-tiles { gap: 2px; }
    html[data-article] .masthead .mark-tiles .tile { width: 28px; height: 28px; border-radius: 8px; font-size: 16px; }
    .a-nav, .a-cta { display: none; }
    html[data-article] .site-head .in { min-height: 56px; justify-content: space-between; flex-wrap: nowrap; }
    html[data-article] .lounge-cols { padding: 12px 12px 36px; }
    html[data-article] main.lounge-body { padding: 18px; border-radius: 18px; }
    html[data-article] .guide-main section > h2, html[data-article] main.lounge-body > section > h2 { font-size: 19px; }
    .a-cards, .a-cards.three { grid-template-columns: minmax(0, 1fr); }
    .a-cards.small { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .a-wide { grid-template-columns: minmax(0, 1fr); }
    .a-wide .a-text { padding: 12px 14px 14px; }
    .a-wide .a-text b { font-size: 17px; }
    .a-acts .a-btn { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    html[data-article] main.lounge-body { transition: none; }
    html.a-leaving[data-article] main.lounge-body { transform: none; }
    html[data-article] .masthead .a-bar { animation: none; transform: scaleX(0.6); }
    .a-card, .a-btn, .ec-board { transition: none; }
    .a-card:hover .ec-tile, .a-card.a-pressed .ec-tile { animation: none; }
    .a-card:hover .ec-board { transform: none; }
    .a-card:hover { transform: none; }
  }
}