/* Mala Mahjong website. Colours, fonts and shapes follow the app designs in design/. */

@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url('fonts/Baloo2_800ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('fonts/Nunito_700Bold.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('fonts/Nunito_800ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Noto Serif SC'; font-weight: 900; font-display: swap; src: url('fonts/NotoSerifSC-Tiles.woff2') format('woff2'); }

:root {
  --sky: #9FD3F2;
  --ink: #1D2B53;
  --cherry: #E5484D;
  --butter: #FFD966;
  --mint: #7FD1AE;
  --pink: #EF7FA5;
  --white: #FFFFFF;
  --gutter: 20px;
  --heading: 'Baloo 2', 'Nunito', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sky); color: var(--ink); font-family: 'Nunito', -apple-system, 'Segoe UI', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.55; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--heading); font-weight: 800; line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0 0 10px; }
a { color: var(--ink); font-weight: 800; }
a:hover { color: var(--cherry); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
svg { display: block; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); padding: 10px 14px; border-radius: 12px; z-index: 10; }
.skip:focus { left: 8px; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; padding-bottom: 6px; position: relative; z-index: 2; }
.wordmark { font-family: var(--heading); font-weight: 800; font-size: 24px; line-height: 1; text-decoration: none; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wordmark span { color: var(--cherry); }
.wordmark:hover { color: var(--ink); }
/* The trademark sign: small, plain ink, tucked at the top right of the wordmark. */
.tm { font-family: 'Nunito', system-ui, sans-serif; font-size: 0.32em; font-weight: 800; color: var(--ink); text-shadow: none; vertical-align: super; line-height: 0; margin-left: 2px; }
.logo .tm { font-size: 0.2em; margin-left: 0.06em; vertical-align: 1.9em; }
.top nav { display: flex; gap: 2px; }
.top nav a { font-family: var(--heading); font-size: 18px; text-decoration: none; min-height: 44px; min-width: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; }
.top nav a:hover, .top nav a[aria-current] { background: rgba(255, 255, 255, 0.6); color: var(--ink); }

/* Buttons and pills */
.btn { min-height: 58px; padding: 6px 26px; border: 2.5px solid var(--ink); border-radius: 22px; background: var(--white); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-family: var(--heading); font-weight: 800; font-size: 21px; line-height: 1.1; text-align: center; }
a.btn:hover { color: var(--ink); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
a.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn.red { background: var(--cherry); color: var(--white); font-size: 23px; }
a.btn.red:hover { color: var(--white); }
.btn.soon { background: var(--butter); }
.btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* Hero */
.hero { position: relative; padding: 18px 0 56px; }
.hero .wrap { position: relative; display: grid; gap: 18px; justify-items: center; text-align: center; }
.sky-art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cloud { position: absolute; fill: var(--white); }
.star { position: absolute; right: 5%; top: 0; width: 30px; height: 30px; }
.logo { font-size: clamp(68px, 19vw, 124px); }
.logo div { font-family: var(--heading); font-weight: 800; }
.logo .a { line-height: 0.88; color: var(--ink); text-shadow: -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff, 0 4px 0 #fff, 6px 7px 0 var(--cherry); }
.logo .b { line-height: 0.95; color: var(--cherry); text-shadow: -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff, 0 4px 0 #fff, 6px 7px 0 var(--ink); transform: rotate(-3deg); }
.hero .lead { font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.3; max-width: 22em; margin: 6px 0 0; }
.hero .sub { font-size: clamp(16px, 1.7vw, 18px); max-width: 28em; margin: 0; }
.hero .btns { justify-content: center; margin-top: 8px; }

/* The panda holding three tiles, from the Welcome screen. Sized in em so it scales as one piece. */
.mascot { position: relative; width: 23em; height: 23.2em; font-size: clamp(10px, 2.9vw, 15px); }
.mascot svg { width: 23em; height: 23em; }
.mascot .held { position: absolute; filter: drop-shadow(2px 3px 0 rgba(29, 43, 83, 0.35)); }
.mascot .held .tile { font-size: 5.4em; }
.mascot .h1 { left: 3.4em; top: 15em; transform: rotate(-12deg); }
.mascot .h2 { left: 8.8em; top: 14em; }
.mascot .h3 { left: 14.2em; top: 15em; transform: rotate(12deg); }

/* Sections */
section { padding: 36px 0; }
.band { background: rgba(255, 255, 255, 0.45); }
.head { text-align: center; max-width: 40em; margin: 0 auto 22px; text-wrap: balance; }
.head h2 { font-size: clamp(30px, 5vw, 44px); }
.head p { margin: 8px 0 0; }
.card { background: var(--white); border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: 4px 4px 0 var(--ink); padding: 20px 22px; }
.card h3 { font-size: 23px; margin-bottom: 6px; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card ul { margin: 0 0 10px; padding-left: 1.2em; }
.card li { margin-bottom: 4px; }

/* Mahjong tiles. Drawn by tiles.js into <span class="tile" data-t="…">; font-size is the tile's width. */
.tile { --back: var(--pink); font-size: 44px; width: 1em; height: 1.4em; position: relative; display: inline-block; flex-shrink: 0; font-family: 'Noto Serif SC', serif; color: #16130F; vertical-align: middle; }
.tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0.63em; bottom: 0; background: var(--back); border-radius: 0.14em; }
.tile .face { position: absolute; left: 0; right: 0; top: 0; height: 1.27em; background: #FBF6EA; border: 1px solid #D6C9AC; border-radius: 0.14em; overflow: hidden; }
.tile .in { position: absolute; left: 0.12em; right: 0.12em; top: 0.12em; bottom: 0.12em; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; font-weight: 900; }
.tile .pip { position: absolute; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.tile .stick { position: absolute; border-radius: 99px; transform: translate(-50%, -50%); }
.tile .num { font-size: 0.34em; }
.tile .wan { font-size: 0.42em; color: #C8372D; margin-top: 1px; }
.tile .glyph { font-size: 0.6em; }

/* The goal: a winning hand */
.hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 20px; }
.set { display: grid; justify-items: center; gap: 8px; }
.set .tiles { display: flex; gap: 3px; }
.set .tile { font-size: clamp(30px, 4.6vw, 48px); }
.tag { font-family: var(--heading); font-size: 15px; line-height: 1; padding: 6px 12px 5px; border: 2px solid var(--ink); border-radius: 99px; background: var(--butter); }
.tag.mint { background: var(--mint); }
.tag.pink { background: #FFD6E0; }
.goal p.note { text-align: center; margin: 18px auto 0; max-width: 32em; }

/* Features */
.grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
.feature { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.feature .tile { font-size: 46px; margin-top: 4px; filter: drop-shadow(2px 3px 0 rgba(29, 43, 83, 0.25)); }

/* Bots */
.bots { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.bots .bot { flex: 0 0 calc((100% - 14px) / 2); }
.bots .bot { min-width: 0; }
.bot .level { flex-wrap: wrap; justify-content: center; }
.bot { padding: 14px; text-align: center; display: grid; justify-items: center; gap: 4px; align-content: start; }
.bot .face { width: 84px; height: 84px; border-radius: 50%; border: 2.5px solid var(--ink); display: grid; place-items: center; margin-bottom: 6px; }
.bot .face svg { width: 62px; height: 62px; }
.bot h3 { font-size: 21px; margin: 0; }
.bot p { font-size: 15px; line-height: 1.35; margin: 0; }
.level { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; margin-top: 4px; }
.level i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ink); }
.level i.on { background: var(--cherry); }
.level span { margin-left: 4px; }

/* The panda's road: fifteen numbered stops on a dashed path */
.road { display: grid; grid-template-columns: repeat(6, 44px); justify-content: center; gap: 12px 10px; padding: 4px 0; }
.road i { width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--butter); box-shadow: 3px 3px 0 var(--ink); font-family: var(--heading); font-style: normal; font-size: 21px; line-height: 1; padding-top: 2px; display: grid; place-items: center; }
.road i:nth-child(3n + 2) { background: var(--mint); }
.road i:nth-child(3n) { background: #FFD6E0; }
.road i.skill { background: var(--ink); color: var(--white); box-shadow: 3px 3px 0 var(--cherry); }

/* Easy, Medium and Hard */
.modes { display: grid; gap: 18px; grid-template-columns: 1fr; }
.mode { display: flex; flex-direction: column; gap: 6px; }
.mode h3 { font-size: 26px; margin: 0; }
.mode p { margin: 0; }
.mode .level i { width: 12px; height: 12px; }
.mode .opens { margin-top: auto; padding-top: 12px; border-top: 2px dashed rgba(29, 43, 83, 0.2); font-size: 15px; line-height: 1.4; }
.mode p:not(.opens) { margin-bottom: 10px; }

/* Closing card */
.closing .card { background: var(--butter); text-align: center; padding: 30px 22px; display: grid; justify-items: center; gap: 12px; }
.closing h2 { font-size: clamp(28px, 4.6vw, 40px); }
.closing p { max-width: 30em; margin: 0; }
.closing .small { margin-top: -6px; }
.closing .btn { margin-top: 6px; }

/* Waitlist */
.soon-tag { flex-basis: 100%; display: flex; justify-content: inherit; }
.closing .wrap { display: grid; gap: 22px; }
.closing .card.promise { background: var(--white); padding: 24px 22px; }
.waitlist .tag { font-size: 16px; }
.join { width: 100%; max-width: 520px; display: grid; gap: 8px; margin-top: 4px; text-align: left; }
.join label { font-weight: 800; font-size: 16px; }
.join-row { display: grid; gap: 12px; }
.join input { width: 100%; min-height: 58px; padding: 0 18px; border: 2.5px solid var(--ink); border-radius: 18px; background: var(--white); color: var(--ink); font: inherit; font-size: 18px; }
.join input::placeholder { color: #6B7594; }
.join input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.join input[aria-invalid="true"] { border-color: #B42318; }
.join .btn { width: 100%; font-size: 21px; cursor: pointer; }
.join .btn:disabled { opacity: 0.7; cursor: progress; }
.join .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.join .status { min-height: 1.4em; margin: 0; font-size: 15px; font-weight: 800; }
.join .status.bad { color: #B42318; }
.join.done { text-align: center; }
.joined { margin: 6px 0; padding: 16px 18px; border: 2.5px solid var(--ink); border-radius: 18px; background: var(--mint); font-weight: 800; font-size: 18px; }

/* Footer */
footer { background: var(--ink); color: var(--white); margin-top: 36px; padding: 26px 0 30px; font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; }
footer a { color: var(--white); display: inline-flex; align-items: center; min-height: 44px; }
footer a:hover { color: var(--butter); }
footer nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
footer p { margin: 0; opacity: 0.85; }

/* Help, Privacy and other text pages */
.page { max-width: 680px; margin: 0 auto; padding: 22px var(--gutter) 30px; }
.page h1 { font-size: clamp(36px, 7vw, 48px); margin-bottom: 4px; }
.page .card { margin-top: 16px; }
.page .card h2 { font-size: 23px; margin-bottom: 6px; }
.small { font-size: 15px; }
.lost { text-align: center; display: grid; justify-items: center; gap: 14px; padding-top: 40px; }

a.tap { display: inline-flex; align-items: center; min-height: 44px; }

/* On a phone the big logo is right below, so the home page header shows only its links */
@media (max-width: 639px) {
  .top.home { justify-content: center; }
  .top.home .wordmark { display: none; }
  .top nav a.wide { display: none; }
}

/* How-to-play guides */
.intro { font-size: 18px; margin: 10px 0 0; }
.crumb { font-size: 15px; margin: 0 0 6px; }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.guidepage .card h3 { font-size: 19px; margin: 14px 0 2px; }
.guidepage .card ol { margin: 0 0 10px; padding-left: 1.3em; }
.guidepage .hand { margin: 14px 0 16px; }
.guidepage .hand .tile { font-size: clamp(28px, 7.4vw, 38px); }
.row { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 14px; }
.row .tile { font-size: clamp(27px, 7.3vw, 40px); }
.fan { list-style: none; padding: 0 !important; display: grid; gap: 10px; }
.fan li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.fan .tag { white-space: nowrap; margin-top: 2px; }
.card.app { background: var(--butter); text-align: center; display: grid; justify-items: center; gap: 8px; margin-top: 28px; }
.more { font-size: 26px; margin: 32px 0 0; }
.guides { display: grid; gap: 14px; margin-top: 14px; }
a.guide { margin-top: 0 !important; text-decoration: none; font-weight: 700; display: block; }
a.guide:hover { color: var(--ink); }
a.guide p { margin: 0; font-size: 15px; }
.guide-link { text-align: center; margin: 26px 0 0; }
.jump { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 14px; font-size: 15px; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; }
.terms { margin: 0; }
.terms dt { font-family: var(--heading); font-weight: 800; font-size: 22px; line-height: 1.1; margin-top: 18px; padding-top: 16px; border-top: 2px dashed rgba(29, 43, 83, 0.2); scroll-margin-top: 12px; }
.terms dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.terms dd { margin: 4px 0 0; }
.terms .row { margin: 10px 0 0; }
.terms .row .tile { font-size: 32px; }
.tile .frame { position: absolute; inset: 8%; border: 0.05em solid #2459A6; border-radius: 0.14em; }

/* Tablet */
@media (min-width: 640px) {
  .star { right: 9%; top: 60px; width: 36px; height: 36px; }
  :root { --gutter: 32px; }
  section { padding: 48px 0; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .bots .bot { flex-basis: calc((100% - 28px) / 3); }
  .modes { grid-template-columns: repeat(3, 1fr); }
  /* Each card shares the grid's rows, so the dots, titles, text and dashed lines line up across all three. */
  .mode { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 6px; }
  .mode .opens { margin-top: 0; }
  .mode p:not(.opens) { margin-bottom: 4px; }
  .road { grid-template-columns: repeat(11, 44px); }
  .card { padding: 24px 26px; }
  .bot { padding: 18px 14px; }
  .wordmark { font-size: 28px; }
  .join-row { grid-template-columns: 1fr auto; }
  .join .btn { width: auto; }
  .top nav a { font-size: 20px; padding: 0 14px; }
}

/* Desktop */
@media (min-width: 960px) {
  .hero { padding: 40px 0 80px; }
  .hero .wrap { grid-template-columns: 1.1fr 0.9fr; grid-template-areas: 'logo art' 'lead art' 'sub art' 'btns art'; justify-items: start; text-align: left; align-content: center; column-gap: 40px; row-gap: 16px; }
  .logo { grid-area: logo; font-size: 132px; }
  .mascot { grid-area: art; justify-self: center; align-self: center; font-size: 19px; }
  .hero .lead { grid-area: lead; margin-top: 14px; }
  .hero .sub { grid-area: sub; }
  .hero .btns { grid-area: btns; justify-content: flex-start; }
  .bots .bot { flex-basis: calc((100% - 42px) / 4); }
}

/* Movement, only for people who haven't asked for less of it.
   The scroll effects need motion.js, so they sit behind .js: without it everything is simply shown. */
@media (prefers-reduced-motion: no-preference) {
  /* Always-on: bobbing panda, blinking eyes, drifting clouds, twinkling star */
  .mascot svg { animation: bob 4s ease-in-out infinite; }
  .eyes { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
  .cloud { animation: drift 16s ease-in-out infinite alternate; }
  .cloud:nth-child(2) { animation-duration: 22s; animation-direction: alternate-reverse; }
  .star { animation: twinkle 3.2s ease-in-out infinite; }

  /* The hero arrives: logo pops, panda rises, its tiles fan out, then the words */
  .logo .a { animation: pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards; }
  .logo .b { animation: pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4) 0.12s backwards; }
  .mascot { animation: rise 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.2) 0.25s backwards; }
  .mascot .held { animation: fan 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards; }
  .mascot .h1 { animation-delay: 0.65s; }
  .mascot .h2 { animation-delay: 0.75s; }
  .mascot .h3 { animation-delay: 0.85s; }
  .hero .lead { animation: rise 0.5s ease-out 0.45s backwards; }
  .hero .sub { animation: rise 0.5s ease-out 0.55s backwards; }
  .hero .btns { animation: rise 0.5s ease-out 0.65s backwards; }

  /* Headings and cards float up as they scroll into view */
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.5s ease-out var(--d, 0s), transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.2) var(--d, 0s); }
  .js .reveal.in { opacity: 1; transform: none; }

  /* The road's stops pop in one by one */
  .js .road:not(.in) i { opacity: 0; }
  .road.in i { animation: pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.4) calc(var(--i, 0) * 60ms) backwards; }

  /* The example hand is dealt tile by tile, then its labels pop */
  .js .hand:not(.in) .tile, .js .hand:not(.in) .tag { opacity: 0; }
  .hand.in .tile { animation: deal 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3) calc(var(--i, 0) * 70ms + 0.2s) backwards; }
  .hand.in .tag { animation: pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.4) calc(var(--i, 0) * 70ms + 0.45s) backwards; }

  /* Things you can point at */
  .btn, .card, .tile, .bot .face { transition: transform 0.15s, box-shadow 0.15s; }
  .grid .card:hover, .bots .card:hover, .modes .card:hover, a.guide:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
  .set .tile:hover { transform: translateY(-0.16em); }
  .bot:hover .face { animation: wiggle 0.5s ease-in-out; }
  .feature:hover .tile { transform: rotate(-6deg) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes drift { to { transform: translateX(26px); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
@keyframes twinkle { 50% { transform: scale(1.25) rotate(20deg); } }
@keyframes pop { from { opacity: 0; transform: scale(0.5); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes fan { from { opacity: 0; transform: translateY(3em) scale(0.6); } }
@keyframes deal { from { opacity: 0; transform: translateY(-0.5em) rotate(-8deg); } }
@keyframes wiggle { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }