/* Faker Night site, Game Show look (matches the app default theme). DigiRune Studios. */
:root {
  --bg: #fbf3e6; --surface: #fffaf2; --surface-2: #f7e6cf; --ink: #22050a; --ink-2: #5a3a3f; --line: #e3c9b0;
  --felt: #8a1426; --felt-2: #5e0c19; --on-felt: #fff8ec; --on-felt-2: #ffd9bf; --outline: #22050a;
  --mustard: #ffc62e; --tomato: #ffd9bf; --brick: #8a1426; --link: #8a1426; --shadow: 3px 3px 0 var(--outline);
  --serif: "Fredoka", "Trebuchet MS", system-ui, sans-serif; --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #1a0a0d; --surface: #2a1216; --surface-2: #3a1a1f; --ink: #fff3e8; --ink-2: #e2c6bf; --line: #4d2a30; --outline: #0b0204; --link: #ffc62e; }
}
:root[data-theme="dark"] { --bg: #1a0a0d; --surface: #2a1216; --surface-2: #3a1a1f; --ink: #fff3e8; --ink-2: #e2c6bf; --line: #4d2a30; --outline: #0b0204; --link: #ffc62e; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: radial-gradient(rgba(138, 20, 38, .06) 1.3px, transparent 1.7px) 0 0 / 14px 14px, var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); font-weight: 700; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); color: var(--ink); padding: 10px 14px; border: 2px solid var(--outline); border-radius: 10px; z-index: 10; }
.skip:focus { left: 12px; }
.wrap { max-width: 1080px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.stripes { height: 10px; background: linear-gradient(var(--mustard) 0 33%, var(--tomato) 33% 66%, var(--outline) 66%); }
/* top bar */
.bar { background: var(--felt); color: var(--on-felt); padding-top: env(safe-area-inset-top); }
.bar .wrap { display: flex; align-items: center; gap: 10px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--on-felt); text-decoration: none; font: 700 24px/1 var(--serif); min-height: 44px; }
.brand img { width: 40px; height: 40px; }
.bar nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.bar nav a { color: var(--on-felt); text-decoration: none; font-weight: 700; font-size: 16px; padding: 10px 10px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 10px; }
.bar nav a:hover { background: rgba(255, 246, 228, .12); }
/* hero: centered text beside the demo video; one column on phones */
.hero { background: var(--felt); color: var(--on-felt); padding: 0; }
.hero .wrap { display: grid; gap: 28px; padding-top: 28px; padding-bottom: 36px; align-items: center; justify-items: center; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: 1.1fr 1fr; padding-top: 44px; padding-bottom: 52px; gap: 40px; } }
.herotext { text-align: center; max-width: 36em; }
.hero h1 { font: 700 clamp(38px, 9vw, 64px)/1.02 var(--serif); margin: 0; text-shadow: 4px 4px 0 var(--outline); }
.hero .tag { font: 600 clamp(20px, 4.6vw, 26px)/1.25 var(--serif); color: var(--on-felt-2); margin: 10px 0 0; }
.hero p.lead { font-size: 18px; margin: 12px auto 0; max-width: 30em; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.pills li { background: var(--mustard); color: #26282c; border: 2px solid var(--outline); border-radius: 999px; padding: 6px 16px; font: 700 17px/1.2 var(--serif); box-shadow: 2px 2px 0 var(--outline); }
.sheetlink { margin: 14px 0 0; font-size: 18px; }
.hero .sheetlink a, .cta .sheetlink a { color: var(--on-felt-2); display: inline-flex; min-height: 44px; align-items: center; }
/* official store badges: equal 48px artwork height, clear space of at least a quarter of the height (12px) all round */
.stores { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 20px; margin: 20px 0 0; padding: 0; }
.badge { display: inline-block; line-height: 0; padding: 0; border-radius: 10px; }
.badge:focus-visible { outline-offset: 4px; }
.badge.apple img { height: 48px; width: auto; }
.badge .gp { display: block; position: relative; overflow: hidden; width: 161.14px; height: 48px; border-radius: 8px; }
.badge .gp img { position: absolute; left: -11.71px; top: -11.71px; width: 184.57px; height: 71.43px; max-width: none; }
/* QR codes only where a phone is not the device in hand: wide screens with a mouse (same rule as DigiRuneStudios.com) */
.qr-row { display: none; }
/* pre-launch line, in place of the store badges (same treatment as Stitch Scroll) */
.soon { font: 700 19px/1.35 var(--serif); margin: 18px auto 0; max-width: 22em; text-align: center; text-wrap: balance; }
.hero .soon, .cta .soon { color: var(--on-felt); }
@media (min-width: 1100px) and (hover: hover) {
  .qr-row { display: flex; justify-content: center; gap: 28px; margin: 18px 0 0; }
  .qr-row figure { margin: 0; text-align: center; }
  .qr-row img { width: 136px; height: 136px; border-radius: 10px; border: 2px solid var(--outline); margin: 0 auto; }
  .qr-row figcaption { font-size: 14px; margin-top: 6px; color: inherit; }
}
/* demo video */
.demo { margin: 0; width: min(100%, 420px); text-align: center; }
.demo-frame { position: relative; border: 4px solid var(--outline); border-radius: 22px; box-shadow: 6px 6px 0 var(--outline); overflow: hidden; background: #145c60; aspect-ratio: 3 / 4; }
.demo video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.demo figcaption { font: 600 17px/1.3 var(--serif); margin-top: 12px; color: var(--on-felt-2); }
/* The play and pause control sits under the video, beside its caption, so it never covers the app on screen.
   When the video waits (autoplay refused or reduced motion) it becomes a big play button centered on the poster. */
.demo { position: relative; container-type: inline-size; }
.demo figcaption { display: flex; align-items: center; justify-content: center; gap: 12px; }
.demo-toggle { flex: none; position: relative; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--outline); background: #fff6e4; box-shadow: 2px 2px 0 var(--outline); cursor: pointer; display: grid; place-items: center; padding: 0; }
.demo-toggle span { width: 14px; height: 16px; border-left: 5px solid #26282c; border-right: 5px solid #26282c; }
.demo-toggle.big { position: absolute; left: calc(50% - 44px); top: calc(66.6667cqw - 44px); width: 88px; height: 88px; background: var(--mustard); border-width: 3px; box-shadow: 4px 4px 0 var(--outline); z-index: 2; }
.demo-toggle.big span { width: 0; height: 0; border-top: 18px solid transparent; border-bottom: 18px solid transparent; border-left: 30px solid #26282c; border-right: 0; margin-left: 8px; }
.demo-toggle:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* sections: headings, intros and cards centered */
section { padding: 34px 0 8px; }
h2 { font: 700 clamp(28px, 6vw, 36px)/1.15 var(--serif); margin: 0 0 8px; text-align: center; text-wrap: balance; }
h2::before { content: ""; display: block; margin: 0 auto 10px; width: 34px; height: 10px; border-radius: 3px; background: linear-gradient(var(--mustard) 0 50%, var(--tomato) 50%); border: 2px solid var(--outline); }
h2.h3 { font: 600 24px/1.2 var(--serif); margin: 24px 0 8px; }
h2.h3::before { display: none; }
.intro { color: var(--ink-2); margin: 0 auto 18px; max-width: 42em; text-align: center; text-wrap: pretty; }
.card { background: var(--surface); border: 2px solid var(--outline); border-radius: 18px; box-shadow: var(--shadow); }
/* 8 games, 8 features, 8 sheets: 1, 2 or 4 columns so every row is full */
.games, .feats, .sheets { display: grid; grid-template-columns: 1fr; gap: 14px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 520px) { .games, .feats, .sheets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .games, .feats, .sheets { grid-template-columns: repeat(4, 1fr); } }
.game { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 14px; }
.game img { width: 64px; height: 64px; }
.game h3 { margin: 4px 0 0; font: 600 21px/1.2 var(--serif); }
.game p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.gallery { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.gallery figure { margin: 0; flex: 0 0 auto; width: min(62vw, 230px); scroll-snap-align: center; }
.gallery img { border: 2px solid var(--outline); border-radius: 14px; box-shadow: var(--shadow); }
.gallery figcaption { font-size: 14.5px; color: var(--ink-2); margin-top: 8px; text-align: center; }
@media (min-width: 960px) {
  .gallery { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; padding: 4px 0 8px; gap: 22px 18px; }
  .gallery figure { width: auto; }
  .swipehint { display: none; }
}
.feats li { padding: 16px 14px; text-align: center; }
.feats li::before { content: ""; display: block; margin: 0 auto 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--felt); border: 2px solid var(--outline); box-shadow: inset 0 0 0 3px var(--on-felt-2); }
.feats b { display: block; font: 600 18px/1.3 var(--serif); margin-bottom: 2px; }
.sheet { padding: 12px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.sheet .pv { border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.sheet h3 { margin: 0; font: 600 20px/1.2 var(--serif); }
.sheet .btn { margin-top: auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 14px; border: 2px solid var(--outline); background: var(--surface); color: var(--ink); font: 700 17px/1.2 var(--sans); text-decoration: none; box-shadow: var(--shadow); text-align: center; }
.btn.primary { background: var(--brick); color: #fff6e4; }
.btn.block { width: 100%; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--outline); }
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.panel { padding: 22px 20px; text-align: center; }
.panel p { margin: 0 auto; max-width: 34em; }
.cta { background: var(--felt); color: var(--on-felt); border-color: var(--outline); }
.cta h2, .cta h3 { color: var(--on-felt); }
.cta a:not(.btn):not(.badge) { color: var(--on-felt-2); }
#get .cta h2 { margin-bottom: 10px; }
footer { margin-top: 40px; background: var(--felt-2); color: var(--on-felt); padding: 22px 0 calc(28px + env(safe-area-inset-bottom)); font-size: 15px; text-align: center; }
footer a { color: var(--on-felt-2); }
footer .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin: 0 0 10px; padding: 0; list-style: none; }
footer .links a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 8px; }
footer p { margin: 6px auto; max-width: 44em; }
footer .tm { font-size: 13.5px; opacity: .92; }
/* printable pages */
.crumbs { font-size: 15px; margin: 18px 0 0; text-align: center; }
.crumbs a { display: inline-flex; min-height: 44px; align-items: center; }
.phead { padding-top: 8px; text-align: center; }
.split { display: grid; gap: 24px; justify-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } }
.split > div { min-width: 0; width: 100%; max-width: 520px; text-align: center; }
.keylist { margin: 0 auto; padding-left: 20px; max-width: 30em; text-align: left; }
.keylist li { margin: 6px 0; }
.note { margin-top: 12px; }
.pv-big { border: 2px solid var(--outline); border-radius: 8px; box-shadow: var(--shadow); background: #fff; margin: 0 auto; }
.pin { max-width: min(320px, 100%); border-radius: 10px; border: 2px solid var(--outline); margin: 0 auto; }
.pageh1 { font: 700 clamp(30px, 7vw, 44px)/1.12 var(--serif); margin: 0 0 6px; text-align: center; }
.morelinks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.appcta .stores { margin-top: 16px; }
/* top bar on small screens */
@media (max-width: 599px) {
  .bar .wrap { gap: 0 10px; justify-content: center; }
  .bar nav { margin-left: 0; width: 100%; justify-content: center; flex-wrap: nowrap; gap: 0; }
  .bar nav a { padding: 8px 10px; font-size: 15.5px; white-space: nowrap; }
}
@media (max-width: 359px) {
  .bar nav a { padding: 8px 6px; font-size: 14px; }
}
.row .btn { max-width: 100%; }
.sheet .btn { font-size: 15.5px; padding: 10px 8px; }

/* Balanced text (DigiRune premier brand standard): headings and captions are balanced; body text never ends on a lone word. */
h1, h2, h3, figcaption, .tag, .soon, .crumbs { text-wrap: balance; }
p, li, dd, dt { text-wrap: pretty; }
/* Centered lines are balanced so each line of a centered block is about the same length. */
.intro, .lead, .game p, .feats li, .gallery figcaption, .sheet h3, .panel p, footer p, .demo figcaption, .sheetlink, .phead .intro { text-wrap: balance; }

/* Phones (2026-10-04): the 8 free score sheets sit two by two as compact cards (the top of each sheet, its name and the
   download button) instead of one tall card each, so the section is about a third as long. */
@media (max-width: 519px) {
  .sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sheet { padding: 8px 8px 10px; gap: 8px; }
  .sheet .pv { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; }
  .sheet h3 { font-size: 17px; line-height: 1.15; }
  .sheet h3 .nm { white-space: nowrap; }
  .sheet h3 .ss { display: block; margin-top: 2px; font: 600 13.5px/1.2 var(--sans); color: var(--ink-2); }
  .sheet .btn { font-size: 14px; min-height: 44px; padding: 8px 6px; border-radius: 12px; }
}
.sheet .btn { text-wrap: balance; }
/* The narrowest phones (under 360 px): headings and the breadcrumb step down a touch so short headings stay on one line. */
@media (max-width: 359px) {
  h2 { font-size: 26px; }
  .h3, h2.h3 { font-size: 22.5px; }
  .crumbs { font-size: 13.5px; }
}
/* Phones (fresh-eyes round 2): the three price pills stay on one row ("Pay once" never drops to a line alone). */
@media (max-width: 559px) {
  .pills { gap: clamp(6px, 1.8vw, 10px); flex-wrap: nowrap; }
  .pills li { font-size: clamp(13px, 3.9vw, 17px); padding: 5px clamp(8px, 2.6vw, 16px); white-space: nowrap; }
}
/* Phones: the score sheet button reads "Free PDF" on one line (its full name stays in the accessible label). */
.sheet .btn .dl-short { display: none; }
@media (max-width: 519px) {
  .sheet .btn .dl-long { display: none; }
  .sheet .btn .dl-short { display: inline; }
  .sheet .btn::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m-5-5 5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m-5-5 5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat; }
}
@media (max-width: 519px) {
  .sheet h3 a { text-decoration: none; }
  .sheet h3 .nm { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/fredoka.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dm-sans.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}