/* Maduma website. The colours, fonts and tile shapes are the game's own (Blockpress/Theme.swift). */

@font-face { font-family: "Fraunces Display"; font-weight: 900; font-display: swap; src: url("/fonts/FrauncesMadumaDisplay-Black.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 900; font-display: swap; src: url("/fonts/FrauncesMaduma-Black.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("/fonts/Figtree-Regular.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("/fonts/Figtree-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url("/fonts/Figtree-Bold.woff2") format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-weight: 700; font-display: swap; src: url("/fonts/ZillaSlab-Bold.woff2") format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-weight: 600; font-style: italic; font-display: swap; src: url("/fonts/ZillaSlab-SemiBoldItalic.woff2") format("woff2"); }

:root {
  /* The felt and what sits on it */
  --felt: #1E3527;
  --felt-glow: #26452F;
  --panel: rgba(9, 20, 13, .38);
  --ink: #F3E9D2;            /* 11.9:1 on the felt */
  --ink-2: #C3C0AA;          /* supporting text, 6.9:1 */
  --ink-3: #A2A591;          /* quiet text, 5.1:1 */
  --accent: #E39A6B;         /* a headline's second line, 5.6:1 */
  --rule: rgba(243, 233, 210, .14);

  /* The game's colours */
  --terracotta: #C9652F;
  --ochre: #D3A04A;
  --sage: #A9C0A2;
  --leaf: #2E5634;
  --starter: #1F3A27;
  --starter-ink: #F2E2BE;

  /* Cards and tiles */
  --paper: #F2EDE2;
  --paper-sunk: #E6DDCA;
  --paper-ink: #2B211A;
  --paper-quiet: #645A50;    /* 5.7:1 on paper, 4.9:1 on the sunken panels */
  --paper-link: #9C4419;     /* 5.5:1 on paper, 4.8:1 on the sunken panels */
  --tile: #FBF6EA;
  --tile-edge: #CDBE9C;

  --f-display: "Fraunces Display", "Fraunces", Georgia, serif;
  --f-title: "Fraunces", Georgia, serif;
  --f-slab: "Zilla Slab", Georgia, serif;
  --f-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* One scale for type, one for space */
  --t-xs: 13px; --t-s: 15px; --t-m: 17px; --t-l: 20px; --t-xl: 24px;
  --t-2xl: 30px; --t-3xl: 38px; --t-4xl: 48px; --t-5xl: 64px; --t-6xl: 80px; --t-7xl: 112px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;
  --r-s: 10px; --r-m: 18px; --r-l: 28px;

  --lift-1: 0 2px 6px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .14);
  --lift-2: 0 14px 36px rgba(0, 0, 0, .30), 0 4px 10px rgba(0, 0, 0, .18);
  --lift-3: 0 36px 90px rgba(0, 0, 0, .48), 0 12px 28px rgba(0, 0, 0, .28);

  --gutter: var(--s-4);
  --section: var(--s-9);
}
@media (min-width: 600px) { :root { --gutter: var(--s-5); --section: var(--s-10); } }
@media (min-width: 900px) { :root { --gutter: var(--s-6); --section: var(--s-11); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--felt) url("/img/grain.png");
  color: var(--ink);
  font: 400 var(--t-m)/1.6 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, ul { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ochre); outline-offset: 3px; border-radius: 4px; }
.br-wide { display: none; }
@media (min-width: 600px) { .br-wide { display: inline; } .br-narrow { display: none; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 10; padding: var(--s-2) var(--s-4); border-radius: var(--r-s); background: var(--tile); color: var(--paper-ink); font-weight: 700; text-decoration: none; }
.skip:focus { top: var(--s-4); }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0 0; }
.center { text-align: center; }

/* ---- Headlines: the store pictures' voice ---- */
.headline {
  font: 900 var(--t-3xl)/1.05 var(--f-title);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.headline em { font-style: normal; color: var(--accent); }
@media (min-width: 900px) { .headline { font-family: var(--f-display); font-size: var(--t-5xl); line-height: 1.03; } }
.lead {
  margin-top: var(--s-4);
  font-weight: 600; font-size: var(--t-m); line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (min-width: 600px) { .lead { font-size: var(--t-l); } }
.center .lead { margin-left: auto; margin-right: auto; max-width: 30em; }
.note { color: var(--ink-3); font-size: var(--t-s); line-height: 1.55; }

/* ---- Letter tiles, as on the board ---- */
.tile {
  --s: 48px;
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--s); height: var(--s);
  border-radius: calc(var(--s) * .16);
  background: var(--tile); color: var(--paper-ink);
  font: 700 calc(var(--s) * .58)/1 var(--f-slab);
  box-shadow: 0 calc(var(--s) * .07) 0 var(--tile-edge), 0 calc(var(--s) * .14) calc(var(--s) * .2) rgba(0, 0, 0, .18);
}
.tile i {
  position: absolute; right: calc(var(--s) * .1); bottom: calc(var(--s) * .06);
  font: 600 calc(var(--s) * .2)/1 var(--f-sans); font-style: normal;
}
.tile.starter { background: var(--starter); color: var(--starter-ink); font-style: italic; font-weight: 600; box-shadow: 0 calc(var(--s) * .07) 0 #122419; }
.word { display: flex; justify-content: center; gap: calc(var(--s, 48px) * .18); }

/* The Maltese cement tiles (bonus squares) */
.madum { border-radius: 5%; box-shadow: 0 0 0 .75px rgba(0, 0, 0, .1), var(--lift-1); overflow: hidden; }

/* ---- Hero ---- */
.hero {
  padding-top: var(--s-9);
  background: radial-gradient(90% 60% at 50% 0%, var(--felt-glow) 0%, rgba(38, 69, 47, 0) 100%);
  text-align: center;
}
@media (min-width: 900px) { .hero { padding-top: var(--s-10); } }
.wordmark {
  font: 900 var(--t-6xl)/1 var(--f-display);
  letter-spacing: -.01em;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .28);
}
@media (min-width: 600px) { .wordmark { font-size: var(--t-7xl); } }
.hero-tiles { display: flex; justify-content: center; gap: var(--s-2); margin-top: var(--s-5); }
.hero-tiles svg { width: 44px; height: 44px; }
@media (min-width: 600px) { .hero-tiles { gap: var(--s-3); } .hero-tiles svg { width: 56px; height: 56px; } }
.tagline { margin-top: var(--s-7); font: 900 var(--t-2xl)/1.1 var(--f-title); letter-spacing: -.005em; }
.tagline em { font-style: normal; color: var(--accent); }
@media (min-width: 600px) { .tagline { font-size: var(--t-3xl); } }
@media (min-width: 900px) { .tagline { font-family: var(--f-display); font-size: var(--t-4xl); } }

.get { margin-top: var(--s-6); display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.badge { display: block; border-radius: 9px; }
.badge img { width: 150px; height: auto; }
@media (min-width: 600px) { .badge img { width: 162px; } }
.get .note { font-weight: 600; }

.ipad-wrap { width: min(520px, 100%); margin: var(--s-8) auto 0; }
@media (min-width: 900px) { .ipad-wrap { margin-top: var(--s-9); } }
.ipad {
  padding: 3%;
  border-radius: 6.4% / 4.8%;
  background: #0D110E;
  box-shadow: 0 0 0 1.5px #3B443E, 0 0 0 3px #121713, var(--lift-3);
}
.ipad img { width: 100%; height: auto; border-radius: 2.1% / 1.6%; }

/* ---- The River ---- */
.river { margin-top: var(--s-7); }
.river picture, .river img { display: block; width: 100%; height: auto; }
.river img { border-radius: var(--r-m); box-shadow: var(--lift-3); }
@media (min-width: 600px) { .river img { border-radius: var(--r-l); } }
.river + .note { margin: var(--s-6) auto 0; max-width: 34em; }

/* ---- Bonus squares ---- */
.bonus { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) { .bonus { grid-template-columns: 5fr 6fr; gap: var(--s-8); } }
.legend { display: flex; gap: var(--s-2); margin-top: var(--s-6); }
.legend svg { width: 64px; height: 64px; }
@media (min-width: 600px) { .legend { gap: var(--s-4); } .legend svg { width: 76px; height: 76px; } }
.legend + .note { margin-top: var(--s-5); max-width: 26em; }
@media (max-width: 899px) { .bonus > div { text-align: center; } .legend { justify-content: center; } .legend + .note { margin-left: auto; margin-right: auto; } }
.board img { width: 100%; height: auto; border-radius: var(--r-m); box-shadow: var(--lift-3); }

/* ---- Three short pitches ---- */
.trio { display: grid; gap: var(--s-8); }
@media (min-width: 900px) { .trio { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.pitch img { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-m); box-shadow: var(--lift-2); }
.pitch h3 { margin-top: var(--s-5); font: 900 var(--t-2xl)/1.08 var(--f-title); letter-spacing: -.005em; text-wrap: balance; }
.pitch h3 em { font-style: normal; color: var(--accent); }
.pitch p { margin-top: var(--s-2); color: var(--ink-2); font-weight: 600; line-height: 1.45; }
@media (min-width: 600px) and (max-width: 899px) {
  .pitch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; }
  .pitch h3 { margin-top: 0; }
}

/* ---- Play it your way ---- */
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-7); }
@media (min-width: 600px) { .presets { gap: var(--s-4); } }
@media (min-width: 1000px) { .presets { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } }
.preset {
  padding: var(--s-3) var(--s-3) var(--s-4);
  border-radius: var(--r-m);
  background: #F0EADE linear-gradient(#F6F1E7, #ECE5D6);
  color: var(--paper-ink);
  box-shadow: var(--lift-2);
  text-align: left;
}
@media (min-width: 600px) { .preset { padding: var(--s-4) var(--s-4) var(--s-5); border-radius: var(--r-l); } }
.preset .art {
  height: 96px; border-radius: var(--r-s);
  background: var(--paper-sunk); box-shadow: inset 0 2px 6px rgba(60, 40, 20, .10);
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
}
@media (min-width: 600px) { .preset .art { height: 128px; border-radius: var(--r-m); gap: var(--s-4); } }
.preset h3 { margin-top: var(--s-4); font: 700 var(--t-xl)/1.1 var(--f-slab); }
@media (max-width: 599px) {
  .presets { grid-template-columns: 1fr; }
  .preset { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-4); align-items: center; padding: var(--s-3); }
  .preset .art { width: 96px; height: 96px; gap: 6px; }
  .preset h3 { margin-top: 0; }
  .preset .mini { width: 68px; gap: 3px; }
  .preset .clock { font-size: var(--t-l); border-width: 2px; border-radius: 8px; padding: 3px 8px; }
  .preset .icon-line { width: 22px; height: 22px; }
  .preset .word { --s: 24px !important; gap: 4px; }
  .preset .word .tile { --s: 24px !important; }
}
@media (min-width: 600px) { .preset h3 { font-size: var(--t-2xl); } }
.preset p { margin-top: var(--s-1); color: var(--paper-quiet); font-size: var(--t-s); font-weight: 600; line-height: 1.4; }
.mini { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; width: 112px; }
.mini i { aspect-ratio: 1; border-radius: 3px; background: #F8F3E8; box-shadow: 0 1px 0 rgba(120, 100, 70, .18); }
@media (min-width: 600px) { .mini { width: 136px; gap: 5px; } }
.clock {
  border: 3px solid currentColor; border-radius: 12px; padding: 4px 12px;
  font: 700 var(--t-2xl)/1 var(--f-sans); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
@media (min-width: 600px) { .clock { font-size: var(--t-3xl); border-width: 4px; padding: 8px 16px; } }
.icon-line { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.preset .icon-line { width: 34px; height: 34px; color: var(--terracotta); }
@media (min-width: 600px) { .preset .icon-line { width: 40px; height: 40px; } }

.rules {
  margin-top: var(--s-5);
  padding: var(--s-5) var(--s-4);
  border-radius: var(--r-m);
  border: 2px solid var(--terracotta);
  background: var(--panel);
}
@media (min-width: 600px) { .rules { margin-top: var(--s-6); padding: var(--s-6); border-radius: var(--r-l); } }
.rules h3 { font: 700 var(--t-xl)/1.1 var(--f-slab); text-align: left; }
.rule-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-5); padding: 0; list-style: none; }
.rule-list li {
  flex: 1 1 140px; max-width: 220px;
  padding: var(--s-5) var(--s-2);
  border-radius: var(--r-m);
  background: rgba(8, 18, 12, .45);
  text-align: center;
}
.rule-list .art { height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); }
.rule-list .label { margin-top: var(--s-4); font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.rule-list .value { margin-top: var(--s-1); font: 700 var(--t-l)/1.15 var(--f-slab); }
.rule-list .clock { font-size: var(--t-l); border-width: 2px; border-radius: 8px; padding: 4px 8px; color: var(--ink); }
.rule-list .icon-line { width: 26px; height: 26px; color: var(--ink); }
.of3 { font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; color: var(--ink-3); }

/* ---- Made with care ---- */
.perks { display: grid; gap: var(--s-3); margin-top: var(--s-7); padding: 0; list-style: none; text-align: left; }
@media (min-width: 600px) { .perks { grid-template-columns: 1fr 1fr; gap: var(--s-4); } }
.perk {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start;
  padding: var(--s-5);
  border-radius: var(--r-m);
  background: var(--panel);
}
@media (min-width: 900px) { .perk { gap: var(--s-5); padding: var(--s-5) var(--s-6); border-radius: var(--r-l); } }
.perk .icon {
  width: 48px; height: 48px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tile); color: var(--paper-ink);
  box-shadow: 0 3px 0 var(--tile-edge), 0 6px 12px rgba(0, 0, 0, .3);
}
.perk .icon svg { width: 28px; height: 28px; }
.perk h3 { font: 700 var(--t-l)/1.15 var(--f-slab); }
.perk p { margin-top: var(--s-1); color: var(--ink-2); font-size: var(--t-s); line-height: 1.5; }

/* ---- The end of the page ---- */
.closing { padding-bottom: var(--section); }
.closing .app-icon { width: 88px; height: 88px; margin: 0 auto var(--s-6); border-radius: 22.37%; box-shadow: var(--lift-2); }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding: 0 var(--s-6);
  border-radius: 14px;
  background: var(--tile); color: var(--paper-link);
  font: 700 var(--t-m)/1 var(--f-sans);
  text-decoration: none;
  box-shadow: 0 4px 0 var(--tile-edge), 0 10px 22px rgba(0, 0, 0, .3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--tile-edge), 0 14px 26px rgba(0, 0, 0, .32); }
.button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tile-edge), 0 4px 10px rgba(0, 0, 0, .3); }
.button svg { width: 18px; height: 18px; }
.closing .get { margin-top: var(--s-7); }

/* ---- Footer ---- */
.foot { border-top: 1px solid var(--rule); padding: var(--s-7) 0 var(--s-8); color: var(--ink-3); font-size: var(--t-s); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--ink); text-decoration: none; font: 900 var(--t-xl)/1 var(--f-title); }
.brand img { width: 32px; height: 32px; border-radius: 22.37%; }
.links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; }
.links a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.small { margin-top: var(--s-6); max-width: 36em; font-size: var(--t-xs); line-height: 1.6; }
.small + .small { margin-top: var(--s-2); }
.small a { color: var(--ink-2); text-underline-offset: 2px; }

/* ---- Privacy, Support and other text pages ---- */
.top { padding: var(--s-5) 0; }
.doc-wrap { max-width: 800px; }
.doc {
  margin: var(--s-4) 0 var(--section);
  padding: var(--s-6) var(--s-5) var(--s-7);
  border-radius: var(--r-l);
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: var(--lift-3);
}
@media (min-width: 600px) { .doc { padding: var(--s-8) var(--s-8) var(--s-8); } }
.doc h1 { font: 900 var(--t-3xl)/1.05 var(--f-title); letter-spacing: -.01em; }
@media (min-width: 600px) { .doc h1 { font-family: var(--f-display); font-size: var(--t-4xl); } }
.doc .dated { margin-top: var(--s-2); color: var(--paper-quiet); font-size: var(--t-s); font-weight: 600; }
.doc .summary { margin-top: var(--s-5); font-size: var(--t-l); font-weight: 600; line-height: 1.45; }
.doc h2 { margin-top: var(--s-7); font: 700 var(--t-xl)/1.2 var(--f-slab); }
.doc h3 { margin-top: var(--s-6); font: 700 var(--t-l)/1.25 var(--f-slab); }
.doc p, .doc ul { margin-top: var(--s-3); max-width: 38em; }
.doc ul { padding-left: 1.2em; }
.doc li + li { margin-top: var(--s-2); }
.doc li::marker { color: var(--terracotta); }
.doc a { color: var(--paper-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc a:hover { text-decoration-thickness: 2px; }
.doc strong { font-weight: 700; }
.toc { margin-top: var(--s-6); padding: var(--s-5); border-radius: var(--r-m); background: var(--paper-sunk); }
.toc h2 { margin: 0; font: 700 var(--t-xs)/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-quiet); }
.toc ul { margin-top: var(--s-3); padding: 0; list-style: none; columns: 2 220px; column-gap: var(--s-6); }
.toc li { margin: 0 0 var(--s-2); break-inside: avoid; }
.toc li + li { margin-top: 0; }
.mail {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-6); padding: var(--s-5);
  border-radius: var(--r-m);
  background: var(--starter); color: var(--ink);
}
.mail p { flex: 1 1 240px; margin: 0; color: var(--ink-2); font-size: var(--t-s); line-height: 1.5; }
.mail strong { display: block; color: var(--ink); font: 700 var(--t-l)/1.2 var(--f-slab); }
.doc .mail .button { color: var(--paper-link); text-decoration: none; }
.doc .mail .button:hover { text-decoration: none; }
.back { display: inline-block; margin-top: var(--s-7); font-weight: 700; }

/* Not found */
.lost { padding: var(--s-10) 0 var(--section); text-align: center; }
.lost .word { --s: 56px; margin-bottom: var(--s-7); }
.lost .lead { margin-bottom: var(--s-6); }

@media (prefers-reduced-motion: reduce) { .button { transition: none; } }