/* STACKABLES pages: one type system and palette for the home page, the towers, My Stackables, achievements and about.
   The controls are made of the collection's materials (materials.css, linked before this file): this file sets their sizes
   and places, materials.css their look and how they press. */
:root {
  --paper: #efe9dd;
  --paper-hi: #f7f3ea;
  --paper-lo: #e8e0d1;
  --ink: #2a2119;
  --ink-hover: #3a2e23;
  --soft: rgba(42, 33, 25, .72);
  --faint: rgba(42, 33, 25, .5);
  --hair: rgba(70, 52, 30, .14);
  --card: rgba(255, 252, 246, .66);
  --ok: #3d6b45;
  --warn: #8a4b21;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --pad: clamp(16px, 4vw, 48px);
  --radius: clamp(22px, 2.6vw, 34px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--paper); }
body {
  margin: 0; min-height: 100dvh; color: var(--ink);
  background: radial-gradient(120% 80% at 30% 20%, var(--paper-hi) 0%, var(--paper) 55%, var(--paper-lo) 100%) fixed;
  font: 500 17px/1.5 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: -.011em; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, select { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* side padding only, as longhands: pages and the footer set their own top and bottom */
.wrap { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }
h1, h2, h3 { font-family: 'Unbounded', 'Inter', sans-serif; font-weight: 700; letter-spacing: -.03em; margin: 0; }
h1 { font-size: clamp(34px, 5.6vw, 64px); line-height: 1.04; }
h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.1; }
h3 { font-size: 19px; line-height: 1.2; letter-spacing: -.02em; }
.lead { font-size: clamp(18px, 2vw, 21px); color: var(--soft); max-width: 36em; margin: 16px 0 0; }
.muted { color: var(--soft); }

/* top bar: the name, and on Mine the wallet */
.bar { display: flex; align-items: center; gap: 10px; padding-top: max(18px, env(safe-area-inset-top)); }
.bar .brand { font: 700 17px/1 'Unbounded', 'Inter', sans-serif; letter-spacing: -.02em; text-decoration: none; margin-right: auto; padding: 10px 0; }
.bar nav { display: flex; align-items: flex-start; gap: 8px; }
/* a small part for the wallet and the sound switch */
.pill {
  --d: 4px; --r: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 15px;
  margin-bottom: var(--d); text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap;
}
.pill.icon-btn, .pill.sound-btn { --r: 50%; width: 42px; min-width: 42px; padding: 0; }
.pill svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(var(--fg-sh)); }
.sound-btn .waves, .sound-btn .off { transition: opacity .3s var(--ease); }
.sound-btn[aria-pressed="false"] .waves { opacity: 0; }
.sound-btn .off { opacity: 0; }
.sound-btn[aria-pressed="false"] .off { opacity: 1; }
/* the sound switch is a switch, not a pressed key: it rests up when on and up when off, the icon tells which */
.sound-btn[aria-pressed="true"] { transform: none; }
.sound-btn[aria-pressed="true"]::before { transform: translateY(var(--d)); box-shadow: 0 1px 1px rgba(40, 26, 12, .28), 0 3px 5px -1px rgba(40, 26, 12, .26), 0 12px 22px -10px rgba(40, 26, 12, .5); }
.sound-btn[aria-pressed="true"]::after { filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 1px -1px rgba(20, 10, 0, .22), inset 0 0 0 1px rgba(30, 18, 6, .1); }

/* buttons: a slab of wood (walnut for the main one, pine for the next) or glazed ceramic */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  margin-bottom: var(--d, 5px); text-decoration: none; font-weight: 650; font-size: 16px; line-height: 1.1; white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(var(--fg-sh)); }
.row { display: flex; flex-wrap: wrap; gap: 10px 12px; }

/* cards and panels: a slab of glazed ceramic, or a shallow cut in the page */
.card { border-radius: var(--radius); }
.slab.card { --d: 7px; --r: var(--radius); }
.panel { padding: clamp(20px, 3vw, 36px); }
.note {
  padding: 14px 18px; border-radius: 16px; color: var(--soft); font-size: 15px;
  background: rgba(70, 52, 30, .055); box-shadow: inset 0 1px 3px rgba(40, 26, 12, .16), inset 0 -1px 0 rgba(255, 255, 255, .55);
}

/* the wallet button and its menu; once connected a small green glass bead shows it */
.wallet-btn { font-weight: 650; }
.dot-on, .wallet-btn .dot { width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #a7e3ac, #3d8b47 60%, #23592b); box-shadow: 0 1px 1px rgba(0, 0, 0, .3), inset 0 -1px 1px rgba(0, 0, 0, .2); }
dialog.sheet {
  border: 0; padding: 0 0 12px; color: var(--ink); background: none; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
}
dialog.sheet::backdrop { background: rgba(42, 33, 25, .32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet .in { --d: 7px; --r: 26px; padding: 24px; margin: 0; }
.sheet h2 { font-size: 22px; margin-bottom: 18px; padding-right: 48px; }
.sheet p { margin: 0 0 16px; color: var(--soft); font-size: 15px; }
.sheet .x { position: absolute; top: 14px; right: 14px; }
.sheet .x svg { width: 16px; height: 16px; }
.sheet .list { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.sheet .opt { --d: 4px; --r: 16px; width: 100%; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 16px; margin-bottom: var(--d); text-align: left; font-weight: 600; text-decoration: none; }
.sheet .opt img, .sheet .opt .ph { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.sheet .opt .ph { display: grid; place-items: center; background: rgba(70, 52, 30, .07); box-shadow: inset 0 1px 2px rgba(40, 26, 12, .2); }
.sheet .opt .ph svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sheet .opt small { display: block; font-weight: 500; color: var(--soft); font-size: 13px; }
.sheet form { display: flex; gap: 8px; align-items: flex-start; }
.sheet input { flex: 1; min-width: 0; }
.sheet .err { color: var(--warn); font-size: 14px; min-height: 1.4em; margin: 8px 0 0; }
.sheet .err:empty { min-height: 0; margin: 0; }
.sheet hr { border: 0; height: 2px; margin: 18px 0; background: none; box-shadow: inset 0 1px 0 rgba(40, 26, 12, .14), 0 1px 0 rgba(255, 255, 255, .7); }

/* the towers grid: every tower on a glazed tile that presses in */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 200px), 1fr)); gap: clamp(12px, 1.8vw, 20px) clamp(10px, 1.6vw, 18px); }
.tile { --d: 6px; --r: 22px; display: block; text-decoration: none; padding: 8px; margin-bottom: var(--d); text-shadow: none; }
.tile img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 15px; background: #ebe4d7; box-shadow: inset 0 0 0 1px rgba(40, 26, 12, .06); }
.tile .cap { display: block; padding: 9px 6px 5px; font-size: 14px; line-height: 1.3; }
.tile .cap b { display: block; font-weight: 650; font-size: 15px; }
.tile .cap span { color: var(--soft); }

footer.foot { margin-top: clamp(48px, 8vw, 96px); padding-top: 26px; padding-bottom: max(30px, env(safe-area-inset-bottom)); font-size: 15px; color: var(--soft); display: flex; flex-wrap: wrap; gap: 8px 24px;
  border-top: 0; background: linear-gradient(rgba(40, 26, 12, .12), rgba(40, 26, 12, .12)) top / 100% 1px no-repeat, linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)) 0 1px / 100% 1px no-repeat; }
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01s !important; animation-duration: .01s !important; } }