/* Fonts are served from this site: the app's own (SIL Open Font License, fonts/OFL-*.txt),
   cut down to the Latin characters the page uses and packed as WOFF2 (Website/README.md says
   how), so a visit contacts no one else and the four files weigh about a tenth of the originals. */
@font-face { font-family: "Baloo 2"; src: url("fonts/Baloo2-Bold.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("fonts/NunitoSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("fonts/NunitoSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("fonts/NunitoSans-Bold.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }

/* Colours are the app's own (Design/HANDOFF.md §2), light and dark by the same names. */
:root {
  --bg: #FAF6EE; --sand: #EFE8D9; --card: #FFFFFF; --cardLine: #E8E0CE; --line: #E4DCCA;
  --text: #23201B; --bodyText: #3A352E; --muted: #5C5449;
  --felt: #2F6B52; --feltDark: #24523F; --feltText: #CFE3D6;
  --accent: #B45F27; --accentSoft: #F3DCC9; --warn: #8E4A22;
  --goodBg: #DCEBE1; --goodText: #1F5A3E; --warnBg: #F6E3C8; --warnText: #6B3410;
  --plate: #F5EDE2; --shadow: rgba(20, 44, 34, .18);
  --display: "Baloo 2", ui-rounded, "SF Pro Rounded", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "PingFang TC", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #142621; --sand: #1F3932; --card: #243F37; --cardLine: #355549; --line: #355549;
    --text: #F2ECDF; --bodyText: #DCE3DB; --muted: #B5C2B8;
    --accentSoft: #4A2E1C; --warn: #E8A86B;
    --goodBg: #1F4A3A; --goodText: #A9DDC0; --warnBg: #4A3217; --warnText: #F2C892;
    --plate: #2C4B42; --shadow: rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #142621; --sand: #1F3932; --card: #243F37; --cardLine: #355549; --line: #355549;
  --text: #F2ECDF; --bodyText: #DCE3DB; --muted: #B5C2B8;
  --accentSoft: #4A2E1C; --warn: #E8A86B;
  --goodBg: #1F4A3A; --goodText: #A9DDC0; --warnBg: #4A3217; --warnText: #F2C892;
  --plate: #2C4B42; --shadow: rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--warn); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
:lang(zh-Hans) h1, :lang(zh-Hant) h1, :lang(zh-Hans) h2, :lang(zh-Hant) h2 { letter-spacing: .02em; line-height: 1.25; }
/* Japanese and Korean: no web font is shipped for them, so the Latin fonts come first and
   the phone's own Japanese or Korean font draws the rest. Naming them here (rather than
   leaving it to the Chinese fonts above) keeps Japanese kanji in Japanese shapes. */
:lang(ja) {
  --display: "Baloo 2", ui-rounded, "SF Pro Rounded", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
  --body: "Nunito Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  line-break: strict;
}
:lang(ko) {
  --display: "Baloo 2", ui-rounded, "SF Pro Rounded", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --body: "Nunito Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
  word-break: keep-all; overflow-wrap: break-word;
}
:lang(ja) h1, :lang(ja) h2, :lang(ko) h1, :lang(ko) h2 { letter-spacing: 0; line-height: 1.3; }
/* Browsers that can (Chrome, Edge) wrap Japanese headings between phrases, not mid-word. */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) summary { word-break: auto-phrase; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--card); padding: 8px 12px; border-radius: 10px; z-index: 10; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Top bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.brand img { width: 42px; height: 42px; border-radius: 11px; }
.brand b { font: 700 21px/1 var(--display); }
.brand small { display: block; font: 700 13px/1.2 var(--body); color: var(--muted); margin-top: 3px; }
/* The language switch: one globe button that opens a list; the chosen one is ticked. */
.menus { display: flex; gap: 8px; }
.langmenu { position: relative; }
/* The appearance button shows the icon of the mode in force: a half circle for Auto, a sun, a moon. */
.ic-light, .ic-dark { display: none; }
:root[data-theme="light"] .ic-light, :root[data-theme="dark"] .ic-dark { display: block; }
:root[data-theme] .ic-auto { display: none; }
.langbtn {
  appearance: none; display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 8px 0 10px;
  border: 0; border-radius: 13px; background: var(--sand); color: var(--text); cursor: pointer;
}
.langbtn svg { width: 22px; height: 22px; }
.langbtn .chev { width: 14px; height: 14px; color: var(--muted); }
.langname { font: 700 14px/1 var(--body); margin: 0 3px 0 7px; }
.langbtn[aria-expanded="true"] { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.langlist {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; margin: 0; padding: 6px; list-style: none; min-width: 180px;
  background: var(--card); border: 1px solid var(--cardLine); border-radius: 16px; box-shadow: 0 12px 30px var(--shadow);
}
.langlist button {
  appearance: none; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 42px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text);
  font: 600 15px/1.2 var(--body); text-align: left; cursor: pointer; white-space: nowrap;
}
.langlist button:hover, .langlist button:focus-visible { background: var(--sand); outline: none; }
.langlist button[aria-checked="true"] { font-weight: 700; }
.langlist button[aria-checked="true"]::after { content: ""; width: 7px; height: 12px; margin-right: 4px; border: solid var(--accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* Hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding-top: 40px; padding-bottom: 72px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; background: var(--goodBg); color: var(--goodText);
  font: 700 14px/1 var(--body); padding: 8px 13px; border-radius: 999px; margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hero h1 { font-size: clamp(42px, 6.6vw, 80px); }
.hero h1 em { font-style: normal; color: var(--accent); white-space: nowrap; }
.lede { font-size: 20px; line-height: 1.55; color: var(--bodyText); margin: 22px 0 30px; max-width: 34em; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; }
.cta .cta-note { flex-basis: 100%; }
.store {
  display: inline-flex; align-items: center; gap: 12px; background: var(--text); color: var(--bg);
  border-radius: 17px; padding: 12px 22px 12px 18px; text-decoration: none; min-height: 58px;
}
.store svg { width: 26px; height: 26px; flex: none; }
.store.play { background: var(--card); color: var(--text); border: 1.5px solid var(--cardLine); }
.store.play span { opacity: 1; color: var(--muted); }
.store span { display: block; font: 700 12px/1.1 var(--body); opacity: .8; }
.store strong { display: block; font: 700 19px/1.15 var(--display); }
.cta-note { color: var(--muted); font-weight: 600; font-size: 15px; }

/* The felt table with the buddies around it */
.tablescene { position: relative; aspect-ratio: 1 / .86; width: 100%; max-width: 540px; justify-self: center; container-type: inline-size; }
.felt {
  position: absolute; inset: 16% 9% 14%; border-radius: 50%;
  background: url("images/grain.png"), radial-gradient(ellipse at 50% 40%, #3A7D61 0%, var(--felt) 55%, #2A6049 100%);
  box-shadow: 0 0 0 10px var(--feltDark), 0 22px 40px var(--shadow), inset 0 6px 22px rgba(0,0,0,.18);
}
.felt-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0; }
.pcard, .tile {
  flex: none; width: 12.5cqw; height: 17.4cqw; background: #fff; border: 1.5px solid #D6CDB9; border-radius: 1.6cqw;
  display: flex; flex-direction: column; justify-content: space-between; padding: 1.1cqw 1.4cqw;
  font: 700 4.2cqw/1 var(--display); color: #23201B; box-shadow: 0 4px 10px rgba(0,0,0,.22);
}
.pcard.red { color: #C9403A; }
.pcard .s { align-self: flex-end; font-size: 1.3em; }
.pcard:nth-child(1) { transform: rotate(-12deg) translate(14%, 6%); margin-right: -2cqw; }
.pcard:nth-child(2) { transform: rotate(4deg) translateY(-4%); z-index: 1; }
.tile {
  width: 10.5cqw; height: 14cqw; background: linear-gradient(#FFFDF7, #F1EADB); border-radius: 1.4cqw; padding: 0;
  box-shadow: 0 .8cqw 0 #2C8A63, 0 1.2cqw 2cqw rgba(0,0,0,.25); align-items: center; justify-content: center;
  color: #C9403A; font: 700 7cqw/1 "PingFang SC", "Hiragino Sans GB", "Noto Serif SC", serif;
  transform: rotate(9deg) translate(-12%, 12%); margin-left: 4%;
}
.die {
  position: absolute; width: 7cqw; height: 7cqw; background: #fff; border: 1.5px solid #DCD3C1; border-radius: 1.6cqw;
  box-shadow: 0 3px 6px rgba(0,0,0,.25); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 1cqw;
}
.die i { width: 1.25cqw; height: 1.25cqw; border-radius: 50%; background: #23201B; place-self: center; }
.die.d1 { left: 24%; top: 64%; transform: rotate(-14deg); }
.die.d2 { left: 70%; top: 22%; transform: rotate(18deg); }
.buddy {
  position: absolute; width: 19%; aspect-ratio: 1; border-radius: 28%; background: var(--plate);
  box-shadow: 0 4px 10px var(--shadow); overflow: hidden;
}
.buddy img { width: 100%; height: 100%; object-fit: cover; }
.buddy, .buddies .pic { cursor: pointer; }
.buddy .face, .buddies .face { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(.6); pointer-events: none; }
.reacting .face { opacity: 1; transform: none; transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), opacity .12s; }
.reacting .base { opacity: 0; }
.b1 { left: 40.5%; top: 0; } .b2 { right: 1%; top: 18%; } .b3 { right: 1%; bottom: 16%; }
.b4 { left: 40.5%; bottom: 0; } .b5 { left: 1%; bottom: 16%; } .b6 { left: 1%; top: 18%; }
.bubble {
  position: absolute; left: 61%; top: 3%; background: #2E2420; color: #FAF6EE; font: 700 15px/1 var(--body);
  padding: 9px 13px; border-radius: 14px 14px 14px 4px; white-space: nowrap; box-shadow: 0 4px 10px var(--shadow);
}
@media (prefers-reduced-motion: no-preference) {
  /* On load: the seats fill clockwise from the host, the cards are dealt, the tile and dice land, the
     airplane badge appears; then the bear's thump-and-bubble loop starts. Everything is still without motion. */
  .buddy { animation: seat .55s cubic-bezier(.34, 1.56, .64, 1) both; }
  .b4 { animation-delay: .1s; } .b5 { animation-delay: .22s; } .b6 { animation-delay: .34s; }
  .b1 { animation: seat .55s cubic-bezier(.34, 1.56, .64, 1) .46s both, thump 3.2s ease-in-out 3.2s infinite; }
  .b2 { animation-delay: .58s; } .b3 { animation-delay: .7s; }
  .pcard:nth-child(1) { animation: deal1 .5s cubic-bezier(.2, .8, .3, 1) 1s both; }
  .pcard:nth-child(2) { animation: deal2 .5s cubic-bezier(.2, .8, .3, 1) 1.15s both; }
  .tile { animation: dealTile .5s cubic-bezier(.2, .8, .3, 1) 1.3s both; }
  .die.d1 { animation: roll1 .55s cubic-bezier(.2, .8, .3, 1) 1.6s both; }
  .die.d2 { animation: roll2 .55s cubic-bezier(.2, .8, .3, 1) 1.72s both; }
  .offline-pill { animation: fadein .4s ease-out 2.1s both; }
  .bubble { animation: pop 3.2s ease-in-out 3.2s infinite backwards; transform-origin: 0 100%; }  /* backwards: hidden until its first pop */
  @keyframes seat { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
  @keyframes deal1 { from { opacity: 0; transform: translate(10%, 150%) rotate(-40deg); } to { opacity: 1; transform: rotate(-12deg) translate(14%, 6%); } }
  @keyframes deal2 { from { opacity: 0; transform: translate(0, 150%) rotate(-20deg); } to { opacity: 1; transform: rotate(4deg) translateY(-4%); } }
  @keyframes dealTile { from { opacity: 0; transform: translate(-10%, 150%) rotate(30deg); } to { opacity: 1; transform: rotate(9deg) translate(-12%, 12%); } }
  @keyframes roll1 { from { opacity: 0; transform: translate(120%, -180%) rotate(-300deg); } to { opacity: 1; transform: rotate(-14deg); } }
  @keyframes roll2 { from { opacity: 0; transform: translate(-150%, 160%) rotate(320deg); } to { opacity: 1; transform: rotate(18deg); } }
  @keyframes fadein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @keyframes thump { 0%, 70%, 100% { transform: none; } 76% { transform: translateY(6%) scale(1.03, .96); } 82% { transform: translateY(-3%); } 88% { transform: none; } }
  @keyframes pop { 0%, 72% { opacity: 0; transform: scale(.6); } 78%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
}

/* Sections */
section { padding: 76px 0; }
.band { background: var(--sand); }
/* The felt section is the table itself: a felt panel with the app's 6 pt rim, set in from the page edge. */
.feltband {
  background: url("images/grain.png"), var(--felt); color: #F2ECDF;
  margin: 0 clamp(12px, 2vw, 24px); border-radius: 48px; box-shadow: inset 0 0 0 6px var(--feltDark);
}
.head { max-width: 40em; margin-bottom: 40px; }
.head h2 { font-size: clamp(32px, 4.4vw, 46px); }
.head p { color: var(--bodyText); font-size: 19px; margin-top: 14px; }
.feltband .head p { color: var(--feltText); }
.feltband .head h2 em { font-style: normal; color: #F3DCC9; }

/* Offline */
.offline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.diagram { margin: 0; }
.diagram svg { width: 100%; max-width: 460px; display: block; margin: 0 auto; }
.diagram figcaption { color: #F2ECDF; font-size: 17px; margin-top: 10px; }
.link { stroke: #CFE3D6; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 9; fill: none; }
@media (prefers-reduced-motion: no-preference) {
  .link { animation: flow 1.6s linear infinite; }
  .link.out { animation-direction: reverse; }
  @keyframes flow { to { stroke-dashoffset: -20; } }
}
.nots { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nots li { display: flex; gap: 16px; align-items: flex-start; background: rgba(0, 0, 0, .16); border-radius: 18px; padding: 16px 18px; }
.nots .x { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #F2ECDF; color: var(--accent); display: grid; place-items: center; }
.nots .x svg { width: 18px; height: 18px; }
.nots b { display: block; font: 700 20px/1.25 var(--display); }
.nots span { color: var(--feltText); font-size: 16px; }
.places { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.places > span {
  display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid rgba(242, 236, 223, .35); border-radius: 999px;
  padding: 9px 15px 9px 12px; font: 700 15px/1.2 var(--body);
}
.places svg { width: 20px; height: 20px; flex: none; }
.feltband .note { margin-top: 28px; }
.offline-pill {
  position: absolute; left: 0; top: 3%; display: inline-flex; align-items: center; gap: 7px;
  background: #2E2420; color: #FAF6EE; font: 700 14px/1 var(--body); padding: 8px 12px 8px 10px; border-radius: 999px;
  box-shadow: 0 4px 10px var(--shadow); white-space: nowrap;
}
.offline-pill svg { width: 16px; height: 16px; }
.offline-pill i { width: 1px; height: 12px; background: rgba(250, 246, 238, .3); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.step { background: var(--card); border: 1px solid var(--cardLine); border-radius: 20px; padding: 24px; }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--accent); color: #fff;
  font: 700 22px/1 var(--display); margin-bottom: 18px;
}
.step h3 { font-size: 22px; margin-bottom: 8px; }
.step p { color: var(--bodyText); }
.note {
  margin-top: 22px; display: flex; gap: 12px; align-items: flex-start; background: var(--warnBg); color: var(--warnText);
  border-radius: 16px; padding: 16px 18px; font-weight: 600; max-width: 820px;
}
.note svg { flex: none; width: 22px; height: 22px; margin-top: 2px; }

.aside { margin-top: 22px; color: var(--bodyText); font-size: 16px; font-weight: 600; max-width: 760px; padding-left: 18px; border-left: 3px solid var(--accent); }

/* Screens */
/* Two upright phones on the left, two sideways ones stacked on the right; both halves 470 wide. */
.shots { display: flex; gap: 28px 24px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.uprights { display: flex; gap: 24px; }
.wides { display: flex; flex-direction: column; gap: 24px; }
.shots figure { width: 223px; }
.uprights figure:first-child .phone { transform: rotate(-2.5deg); }
.uprights figure:last-child .phone { transform: rotate(1.5deg) translateY(10px); }
.wides figure:first-child .phone { transform: rotate(1deg); }
.wides figure:last-child .phone { transform: rotate(-1.2deg); }
.shots figure.wide { width: 470px; }
.phone {
  border-radius: 40px; padding: 9px; background: #0F1A16;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 24px 48px rgba(0,0,0,.32);
}
.phone img { border-radius: 32px; width: 100%; height: auto; aspect-ratio: 1206 / 2622; object-fit: cover; background: #1F3932; }
.wide .phone { border-radius: 36px; }
.wide .phone img { aspect-ratio: 2622 / 1206; border-radius: 28px; }
figure { margin: 0; }
figcaption { text-align: center; font: 700 15px/1.3 var(--body); color: var(--muted); margin-top: 14px; }

/* Games */
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.group { background: var(--card); border: 1px solid var(--cardLine); border-radius: 20px; padding: 22px 22px 14px; }
.group h3 { font-size: 22px; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.group h3 .ic {
  width: 40px; height: 40px; border-radius: 12px; background: var(--felt); display: grid; place-items: center; flex: none;
}
.group h3 .ic svg { width: 22px; height: 22px; }
.group ul { list-style: none; margin: 0; padding: 0; }
.group li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.group li:first-child { border-top: 0; }
.group li span { font-weight: 600; }
.group li small { font: 700 13px/1 var(--body); color: var(--muted); white-space: nowrap; }

/* Features */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { background: var(--card); border: 1px solid var(--cardLine); border-radius: 20px; padding: 24px; }
.feature .ic { width: 44px; height: 44px; border-radius: 13px; background: var(--sand); display: grid; place-items: center; margin-bottom: 16px; color: var(--felt); }
:root[data-theme="dark"] .feature .ic { color: #5FBF92; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feature .ic { color: #5FBF92; } }
.feature .ic svg { width: 24px; height: 24px; }
.feature h3 { font-size: 20px; margin-bottom: 8px; }
.feature p { color: var(--bodyText); font-size: 16px; }

/* Buddies */
.buddies { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.buddies figure { text-align: center; }
.buddies .pic {
  appearance: none; display: block; width: 100%; padding: 0; border: 0; position: relative;
  aspect-ratio: 1; border-radius: 28%; background: var(--plate); box-shadow: 0 4px 10px var(--shadow); overflow: hidden;
}
.buddies .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.buddies .pic:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.buddies figcaption { color: var(--text); margin-top: 10px; }

/* FAQ */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq summary {
  cursor: pointer; list-style: none; font: 700 19px/1.35 var(--display); padding: 14px 32px 14px 0; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 22px; width: 10px; height: 10px;
  border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted); transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 27px; }
.faq details p { color: var(--bodyText); padding: 0 0 18px; }

/* Footer */
footer { padding: 40px 0 56px; color: var(--muted); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; text-align: center; border-top: 1px solid var(--line); padding-top: 28px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 16px; }
  .tablescene { max-width: 460px; }
  .steps, .features { grid-template-columns: 1fr 1fr; }
  .buddies { grid-template-columns: repeat(3, 1fr); }
  .faq { grid-template-columns: 1fr; }
  .offline-grid { grid-template-columns: 1fr; gap: 32px; }
  .uprights, .wides { width: 100%; max-width: 560px; justify-content: center; }
  .uprights { max-width: 470px; }
  .shots figure.wide { width: 100%; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .brand small { display: none; }
  .langname { display: none; }
  .lede { font-size: 18px; }
  section { padding: 56px 0; }
  .steps, .features { grid-template-columns: 1fr; }
  .games { grid-template-columns: 1fr; }
  .uprights { max-width: none; }
  .shots figure { width: calc(50% - 12px); }
  .phone { border-radius: 28px; padding: 6px; }
  .phone img { border-radius: 23px; }
  .shots figure.wide { width: 100%; }
  .wide .phone { border-radius: 22px; }
  .wide .phone img { border-radius: 17px; }
  .bubble { font-size: 13px; padding: 7px 10px; }
  .offline-pill { font-size: 13px; padding: 7px 10px 7px 9px; top: 1%; }
  .offline-pill i, .offline-pill span + i + span { display: none; }
}
.die .r1 { grid-row: 1; } .die .r2 { grid-row: 2; } .die .r3 { grid-row: 3; }
.die .c1 { grid-column: 1; } .die .c2 { grid-column: 2; } .die .c3 { grid-column: 3; }

/* Support stays visible without making the landing page a separate help app. */
.support-link { margin-left: auto; margin-right: 18px; font-weight: 700; color: var(--text); text-underline-offset: 4px; }
.support-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.cta .purchase-note { flex-basis: 100%; margin: 0; color: var(--bodyText); font-size: 15px; }
#support { display: block; scroll-margin-top: 24px; }
@media (max-width: 600px) {
  .top { flex-wrap: wrap; row-gap: 12px; }
  .top > .support-link { order: 3; flex-basis: 100%; margin: 0; font-size: 15px; }
  .hero .lede { margin-top: 16px; margin-bottom: 22px; }
}