/* Site layer for the help pages, loaded LAST (after style.css / terms.css / site-bar.css).
   1) all widths: the pages must fit exactly below the site bar (otherwise the bottom 57px of the page can never be scrolled to).
   2) 900px and wider: a desktop design - centred content with space on both sides and standard font sizes.
   Below 900px nothing changes: the phone/tablet design of the game is kept as it is. */
:root{--site-bar-h:57px}
.app{min-height:calc(100vh - var(--site-bar-h))}
.terms-app{height:calc(100vh - var(--site-bar-h));min-height:calc(100vh - var(--site-bar-h))}
@supports (height:100dvh){
  .app{min-height:calc(100dvh - var(--site-bar-h))}
  .terms-app{height:calc(100dvh - var(--site-bar-h));min-height:calc(100dvh - var(--site-bar-h))}
}

@media (min-width:900px){
  :root{--site-bar-h:65px}
  /* site bar */
  .site-bar-in{max-width:1144px;padding:0 32px;height:64px}   /* 1080 of content + 2 x 32: the logo lines up with the cards */
  body:has(.terms-app) .site-bar-in{max-width:1024px}   /* terms page content is 960 wide */
  .site-brand{font-size:17px;gap:11px}
  .site-logo{width:40px;height:40px}
  .site-home{font-size:16px;padding:9px 18px}

  /* guide: header, cards */
  .help-main-header{flex-basis:84px;height:84px;padding:0 32px}
  .help-header-content{max-width:1080px;height:84px}
  .help-header-ball{font-size:34px}
  .help-header-title{font-size:26px}
  .lesson-grid{padding:108px max(32px,calc((100% - 1080px) / 2)) 56px;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .lesson-card{min-height:150px;padding:18px 22px;border-radius:16px;grid-template-columns:1fr 120px;grid-template-rows:1fr auto;gap:8px 12px}
  .lesson-card img{width:112px;height:100px}
  .lesson-text{padding-right:0;padding-inline-end:6px}
  .lesson-text b{font-size:20px;line-height:1.5;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .lesson-text small{font-size:15px;line-height:1.7;margin-top:6px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .lesson-meta{font-size:16px;padding-top:8px}

  /* guide: the lesson panel */
  .detail-panel{width:min(100%,820px);border-radius:20px 0 0 20px}
  .detail-header{flex-basis:84px;padding:14px 22px;grid-template-columns:56px 1fr}
  .detail-header>span{font-size:18px}
  .detail-header .square-button{width:46px;height:46px;font-size:22px}
  .detail-content{padding:0 36px 48px}
  .detail-hero{min-height:280px}
  .detail-hero img{max-width:440px;height:260px}
  .detail-hero-fallback{max-width:440px;height:250px;font-size:110px}
  .detail-title h2{font-size:34px}
  .detail-title .description{font-size:17px;line-height:1.9;margin-top:6px}
  .detail-title .intro{font-size:18px;line-height:2;margin:18px 0}
  .detail-list,.accordion{gap:14px}
  .detail-list-item{padding:18px 22px;border-radius:14px}
  .detail-list-title h3{font-size:19px}
  .detail-list-text{font-size:17px;line-height:2}
  .accordion-item{border-radius:14px}
  .accordion-header{min-height:72px;padding:14px 20px;grid-template-columns:1fr 40px 44px}
  .accordion-header h3{font-size:19px}
  .accordion-number{width:34px;height:34px;font-size:14px}
  .accordion-content{padding:0 20px}
  .accordion-content p{font-size:17px;line-height:2}

  /* terms and privacy */
  .terms-page{padding:0 32px 56px}
  .terms-container{max-width:960px;padding-top:28px}
  .terms-update-badge{font-size:15px;padding:8px 20px}
  .terms-intro{padding:20px 26px;border-radius:12px}
  .terms-intro p{font-size:18px;line-height:2}
  .terms-accordion{gap:12px}
  .terms-accordion-header{min-height:84px;padding:14px 22px;grid-template-columns:48px 1fr 36px;gap:16px}
  .terms-accordion-number{width:40px;height:40px;font-size:15px}
  .terms-accordion-title h3{font-size:20px}
  .terms-accordion-title p{font-size:15px}
  .terms-accordion-content{padding:0 22px}
  .terms-accordion-inner p{font-size:17px;line-height:2.1}
  .terms-footer p{font-size:16px}
}
@media (min-width:1200px){
  .lesson-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ===== bigger guide fonts (2026-10-28) =====
   Card texts wrap instead of being cut with "..."; the card's bottom row grows with its text; phones get one column so 12px+ text has room. */
.lesson-text b,.lesson-text small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.lesson-card{grid-template-rows:1fr auto}
.lesson-meta{padding-top:6px;gap:10px}
/* the grid has a fixed, scrolling height: without this Chrome keeps every row at the card's min-height and the bottom row of a card falls outside it */
.lesson-grid{grid-auto-rows:max-content}
@media(max-width:480px){.lesson-grid{grid-template-columns:1fr}}