/* Blockare page. The game is always dark navy with glossy blocks, so the page uses its palette in both schemes. */
body.blockare {
  --bg: #12152B;
  --surface: #1F2347;
  --surface-2: #2A2F5C;
  --border: #2E3466;
  --text: #F2F3FA;
  --text-2: #A9AECB;
  --brand: #FFB84D;
  --on-brand: #12152B;
  --accent: #FFB84D;
  color-scheme: dark;
  background: linear-gradient(#1A1D3A, #0D0F22) fixed;
}
/* The game's block tints (Theme.tints). */
.blockare { --coral: #FF6B6B; --amber: #FFB84D; --mint: #7BD88F; --cyan: #4DD0E1; --blue: #6C8CFF; --violet: #B47CFF; }

.hero { text-align: center; padding: 56px 0 72px; display: grid; justify-items: center; }
.hero .icon { width: 128px; height: 128px; border-radius: 29px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); margin-bottom: 28px; }
.hero h1 { font-size: clamp(44px, 8vw, 76px); line-height: 1; font-weight: 800; margin: 0; }
.hero .slogan { font-family: Manrope, system-ui, sans-serif; font-size: clamp(20px, 3vw, 26px); font-weight: 700; color: var(--brand); margin: 14px 0 10px; }
.hero .lede { max-width: 560px; color: var(--text-2); font-size: 19px; margin: 0 0 28px; }

.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.features article { background: var(--surface); border-radius: var(--radius); padding: 26px 24px; }
.features h2 { font-size: 19px; margin: 18px 0 6px; }
.features p { margin: 0; color: var(--text-2); font-size: 16px; line-height: 1.5; }

/* Small pieces drawn like the game's blocks: one 14px block plus box-shadow copies on a 16px grid. */
.piece { width: 48px; height: 48px; position: relative; }
.piece::before {
  content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 4px;
  background: var(--tint); color: var(--tint);
}
.p-modes { --tint: var(--amber); }
.p-modes::before { box-shadow: 0 16px, 0 32px, 16px 32px; }
.p-combo { --tint: var(--violet); }
.p-combo::before { top: 16px; box-shadow: 16px 0, 32px 0, 16px -16px; }
.p-daily { --tint: var(--cyan); }
.p-daily::before { box-shadow: 16px 0, 32px 0, 0 16px, 16px 16px, 32px 16px, 0 32px, 16px 32px, 32px 32px var(--amber); }
.p-offline { --tint: var(--mint); }
.p-offline::before { left: 8px; top: 8px; box-shadow: 16px 0, 0 16px, 16px 16px; }
.p-gamecenter { --tint: var(--coral); }
.p-gamecenter::before { top: 16px; box-shadow: 16px 0, 16px 16px, 32px 16px; }
.p-calm { --tint: var(--blue); }
.p-calm::before { top: 16px; box-shadow: 16px 0, 32px 0; }

.promise { margin-top: 72px; text-align: center; max-width: 620px; margin-inline: auto; }
.promise h2 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 10px; }
.promise p { color: var(--text-2); margin: 0; }

/* Long-form pages: privacy policy and support. */
.doc { max-width: 720px; padding: 32px 0 0; }
.doc h1 { font-size: clamp(32px, 5vw, 44px); line-height: 1.1; margin: 0 0 6px; }
.doc .meta { color: var(--text-2); font-size: 15px; margin: 0 0 32px; }
.doc h2 { font-size: 22px; margin: 40px 0 8px; }
.doc h3 { font-size: 17px; margin: 24px 0 4px; }
.doc p, .doc li { color: var(--text); }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc .note { background: var(--surface); border-radius: 14px; padding: 16px 18px; color: var(--text-2); font-size: 15px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 20px; }