/* Fluffy Grid official site. Colours are the game's own (apps/client/ui/palette.gd). */
@font-face {
  font-family: "FluffyGrid Round";
  src: url("fluffygrid-round-site.woff") format("woff");
  font-display: swap;
}

:root {
  --bg: #F7F2EF;
  --card: #FFFFFF;
  --ink: #935A5A;
  --ink-strong: #6E3E3E;
  --accent: #F19320;
  --accent-deep: #C9700A;
  --line: #EADFD8;
  --shadow: 0 6px 18px rgba(148, 89, 89, 0.16);
  --r1: #38A9C0; --r2: #D36F8F; --r3: #FBD983; --r4: #FA9D5C; --r5: #8BD57D;
  --r6: #F59DE6; --r7: #8C7BDD;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "FluffyGrid Round", "Varela Round", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-deep); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--ink-strong); outline-offset: 3px; border-radius: 8px; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* Top bar: just the language switch; the logo lives in the hero. */
.top { display: flex; justify-content: flex-end; padding-top: 18px; }
.lang {
  font-size: 15px; text-decoration: none; color: var(--ink);
  background: var(--card); border-radius: 999px; padding: 6px 16px; box-shadow: var(--shadow);
}

/* Hero: the pitch on the left, a playable board on the right. */
.hero {
  display: grid; grid-template-columns: 1fr minmax(300px, 420px); gap: 48px; align-items: center;
  padding: 28px 0 64px;
}
.hero h1 { margin: 0; }
.hero h1 img { width: min(420px, 100%); }
.pitch { font-size: 22px; line-height: 1.5; color: var(--ink-strong); margin: 22px 0 28px; max-width: 30em; }
.play {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  font-size: 22px; padding: 16px 36px; border-radius: 999px;
  box-shadow: 0 8px 0 var(--accent-deep), 0 12px 24px rgba(241, 147, 32, 0.35);
  transition: transform 0.12s, box-shadow 0.12s;
}
.play:hover { transform: translateY(-2px); }
.play:active { transform: translateY(4px); box-shadow: 0 4px 0 var(--accent-deep), 0 6px 12px rgba(241, 147, 32, 0.3); }
.note { font-size: 15px; margin-top: 18px; }

.try { background: var(--card); border-radius: 28px; padding: 22px; box-shadow: var(--shadow); }
.try p { margin: 0 0 14px; font-size: 15px; }
.board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cell.held { transform: scale(0.9); transition: transform 0.12s; }
.cell {
  aspect-ratio: 1; border: 0; border-radius: 10px; padding: 0; cursor: pointer;
  display: grid; place-items: center; font: inherit; color: #fff; font-size: 28px; line-height: 1;
}
.cell img { width: 86%; pointer-events: none; animation: pop 0.22s ease-out; }
.cell.x::after { content: "✕"; font-weight: bold; }
.cell.bad { box-shadow: inset 0 0 0 4px #E0484A; }
.status { min-height: 1.6em; margin-top: 14px; font-size: 16px; color: var(--ink-strong); text-align: center; }
.status a { font-weight: bold; }
@keyframes pop { from { transform: scale(0.4); } to { transform: scale(1); } }

/* Region colours, shared by the playable board and the rule pictures. */
.c1 { background: var(--r1); } .c2 { background: var(--r2); } .c3 { background: var(--r3); }
.c4 { background: var(--r4); } .c5 { background: var(--r5); } .c6 { background: var(--r6); }
.c7 { background: var(--r7); }

section { padding: 56px 0; }
h2 { font-size: 34px; line-height: 1.25; color: var(--ink-strong); margin: 0 0 28px; font-weight: normal; }
h3 { font-size: 21px; color: var(--ink-strong); margin: 14px 0 6px; font-weight: normal; }

/* Rules: each one drawn as a tiny board rather than an icon. */
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.rules p { margin: 0; max-width: 22em; }
.mini { display: grid; gap: 4px; width: 168px; }
.mini.n4 { grid-template-columns: repeat(4, 1fr); }
.mini.n3 { grid-template-columns: repeat(3, 1fr); width: 128px; }
.mini span { aspect-ratio: 1; border-radius: 6px; background: #EDE3DC; display: grid; place-items: center; color: #fff; font-size: 15px; }
.mini span img { width: 84%; }
.mini .hl { background: var(--r3); }
.mini .x::after { content: "✕"; color: #B59A8E; }

/* Modes: a plain two-column list, no cards. */
.modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 56px; }
.modes div { padding: 18px 0; border-top: 2px solid var(--line); }
.modes p { margin: 0; }

/* Pals stand on one shared floor line. */
.pals { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; align-items: end; border-bottom: 6px solid #E8D9CF; padding-bottom: 0; }
.pal { text-align: center; }
.pal img { margin: 0 auto -4px; width: 100%; max-width: 150px; }
.pal-names { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; text-align: center; margin-top: 12px; }
.pal-names b { display: block; color: var(--ink-strong); font-weight: normal; font-size: 18px; }
.pal-names small { font-size: 14px; }
.den { margin-top: 28px; max-width: 40em; }

.cta { text-align: center; padding: 64px 0 72px; }
.cta img { width: 180px; margin: 0 auto 8px; }
.cta p { margin: 0 0 26px; font-size: 20px; color: var(--ink-strong); }

footer { border-top: 2px solid var(--line); padding: 28px 0 40px; font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* Privacy policy pages. */
.doc { max-width: 720px; padding-bottom: 64px; }
.doc h1 { font-size: 34px; font-weight: normal; color: var(--ink-strong); margin: 24px 0 4px; }
.doc h2 { font-size: 23px; margin: 36px 0 10px; }
.doc .home img { width: 180px; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
  .rules { grid-template-columns: 1fr; gap: 32px; }
  .modes { grid-template-columns: 1fr; }
  .pitch { font-size: 19px; }
  h2 { font-size: 28px; }
}
@media (max-width: 520px) {
  .wrap { padding: 0 16px; }
  .pals, .pal-names { gap: 4px; grid-template-columns: repeat(4, 1fr); }
  .pal-names b { font-size: 15px; }
  .pal-names small { font-size: 11px; white-space: nowrap; }
  .play { font-size: 20px; padding: 14px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .cell img { animation: none; }
  .play { transition: none; }
}
.after { margin-top: 32px; max-width: 40em; }
/* The grey .mini span default must not hide a rule picture's region colour. */
.mini .c1 { background: var(--r1); } .mini .c2 { background: var(--r2); }
.mini .c5 { background: var(--r5); } .mini .c7 { background: var(--r7); }

/* New ways to play: the headline section, two demos that solve themselves. */
.twists { background: var(--card); border-radius: 36px; padding: 48px; box-shadow: var(--shadow); }
.twists > p { max-width: 40em; margin: -12px 0 36px; font-size: 18px; }
.twist { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: center; padding: 28px 0; }
.twist + .twist { border-top: 2px solid var(--line); }
.twist h3 { font-size: 27px; margin: 0 0 10px; }
.twist p { margin: 0 0 10px; max-width: 30em; }
.twist .eg { font-size: 15px; color: var(--accent-deep); }
.demo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; width: 260px; }
.demo span {
  position: relative; aspect-ratio: 1; border-radius: 9px; display: grid; place-items: center;
  transition: opacity 0.35s, transform 0.35s, box-shadow 0.35s;
}
.demo span > .piece { width: 84%; animation: drop 0.4s cubic-bezier(.3, 1.6, .5, 1); }
.demo span.x::after { content: "✕"; position: absolute; color: #fff; font-size: 26px; animation: pop 0.25s ease-out; }
.demo .clue { background: #FFF1D6; }
.demo .clue img { width: 92%; opacity: 0.55; }
.demo .clue b { position: absolute; font-size: 34px; font-weight: normal; color: #5B3434; }
.demo .clue.cheer b { animation: cheer 0.6s ease-in-out 2; color: var(--accent-deep); }
.demo span i {
  position: absolute; z-index: 1; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: var(--ink-strong); font-style: normal; font-size: 14px; line-height: 22px; text-align: center;
}
.demo.lighting span:not(.lit), .demo.focusing span:not(.on) { opacity: 0.28; }
.demo span.lit { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--accent); }
.demo.focusing span.on { transform: scale(1.04); }
.demo.done { animation: hop 0.5s ease-out; }
@keyframes drop { from { transform: translateY(-40%) scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cheer { 50% { transform: scale(1.35); } }
@keyframes hop { 40% { transform: translateY(-8px); } }

/* Pals breathe like they do in the game (scale from the feet), each on its own beat. */
.pal img, .den-states img { transform-origin: 50% 100%; animation: breathe 3.2s ease-in-out infinite; }
.pal:nth-child(2) img { animation-delay: -0.6s; } .pal:nth-child(3) img { animation-delay: -1.3s; }
.pal:nth-child(4) img { animation-delay: -2s; } .pal:nth-child(5) img { animation-delay: -2.6s; }
.pal:hover img { animation: hop 0.5s ease-out; }
@keyframes breathe { 50% { transform: scale(1.035, 0.965); } }

.den-states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; text-align: center; }
.den-states figure { margin: 0; position: relative; }
.den-states img { width: 100%; max-width: 190px; margin: 0 auto; }
.den-states figcaption { margin-top: 8px; font-size: 18px; color: var(--ink-strong); }
.den-states figure:nth-child(2) img { animation-delay: -1.1s; }
.den-states figure:nth-child(3) img { animation-duration: 4.6s; }
.zz { position: absolute; top: 4%; right: 18%; font-size: 22px; color: var(--r7); opacity: 0; animation: zz 3.6s ease-out infinite; }
.zz + .zz { animation-delay: 1.2s; right: 12%; font-size: 17px; }
@keyframes zz { 15% { opacity: 1; } 100% { transform: translate(14px, -46px); opacity: 0; } }

@media (max-width: 820px) {
  .twists { padding: 32px 20px; border-radius: 28px; }
  .twist { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 520px) {
  .den-states { gap: 8px; }
  .den-states figcaption { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .pal img, .den-states img, .zz, .demo span > .piece, .demo.done { animation: none; }
}

/* .wrap's side padding outranks the plain `section` rule, so sections set both here. */
section.wrap { padding: 56px 20px; }
section.wrap.cta { padding: 64px 20px 72px; }
.den-states { align-items: end; }
.modes { grid-template-columns: repeat(3, 1fr); gap: 8px 40px; }
@media (max-width: 820px) { .modes { grid-template-columns: 1fr; } }
@media (max-width: 520px) { section.wrap { padding: 44px 16px; } section.wrap.cta { padding: 52px 16px 60px; } }

/* The in-game recording inside the twists card: a phone-shaped frame. */
.inplay { border-top: 2px solid var(--line); }
.phone { width: 220px; justify-self: center; border-radius: 30px; overflow: hidden; border: 6px solid #fff;
  box-shadow: var(--shadow); background: #FFF9F0; aspect-ratio: 9 / 16; }
.phone video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .phone { width: min(260px, 70vw); } }