:root {
  --gold-1: #ffe27a;
  --gold-2: #ffb21c;
  --gold-3: #ff7a00;
  --brown: #3b1706;
  --brown-2: #6e2a07;
  --cream: #fff6dc;
  --cream-dim: rgb(255 246 220 / 78%);
  --night: #1c0e24;
  --night-2: #25132f;
  --panel: #2d1838;
  --panel-edge: #5b3a24;
  --teal: #44d6c2;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-width: 1200px;
  background: linear-gradient(180deg, #2a1236 0%, #1c0e24 35%, #120a1c 70%, #0c0714 100%) fixed var(--night);
  color: var(--cream);
  font: 600 17px/1.6 "Nunito", system-ui, sans-serif;
}
img { max-width: 100%; }
a { color: inherit; }
.muted { color: var(--cream-dim); }

/* ---------------- shared type ---------------- */
.section-title {
  margin: 0 0 12px; text-align: center;
  font: 400 clamp(38px, 3vw, 54px)/1.1 "Lilita One", sans-serif; letter-spacing: .5px;
  color: var(--gold-1);
  -webkit-text-stroke: 7px var(--brown); paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--brown);
  text-wrap: balance;
}
.section-lead { margin: 0 auto 36px; text-align: center; color: var(--cream-dim); max-width: 60ch; }

/* ---------------- top bar ---------------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: 40px;
  padding: 14px 48px;
  background: linear-gradient(to bottom, rgb(20 8 26 / 75%), rgb(20 8 26 / 0%));
  transition: background .25s, padding .25s;
}
.topbar.is-solid { background: rgb(22 10 30 / 94%); padding: 8px 48px; box-shadow: 0 6px 24px rgb(0 0 0 / 45%); }
.brand img { height: 52px; width: auto; display: block; opacity: 0; transition: opacity .25s; }
.topbar.is-solid .brand img { opacity: 1; }
.topbar nav { display: flex; gap: 34px; margin-left: auto; }
.topbar nav a {
  font: 400 21px "Lilita One", sans-serif; letter-spacing: .5px; text-decoration: none;
  color: var(--cream); text-shadow: 0 2px 0 var(--brown), 0 0 12px rgb(0 0 0 / 45%);
}
.topbar nav a:hover { color: var(--gold-1); }

/* ---------------- PLAY button: same material as the logo ---------------- */
.play {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  padding: 20px 74px 24px; border-radius: 999px;
  border: 6px solid var(--brown);
  background:
    radial-gradient(120% 70% at 50% 0%, rgb(255 255 255 / 65%) 0 32%, transparent 33%),
    linear-gradient(to bottom, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 100%);
  box-shadow: 0 9px 0 var(--brown-2), 0 9px 0 6px var(--brown), 0 22px 34px rgb(0 0 0 / 55%),
              inset 0 -8px 0 rgb(190 70 0 / 55%);
  font: 400 clamp(40px, 3.3vw, 62px)/1 "Lilita One", sans-serif; letter-spacing: 2px; color: #fff;
  -webkit-text-stroke: 6px var(--brown); paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--brown);
  text-decoration: none; cursor: pointer; overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, filter .2s;
}
.play:hover {
  transform: translateY(-4px) scale(1.03); filter: brightness(1.08) saturate(1.1);
  box-shadow: 0 13px 0 var(--brown-2), 0 13px 0 6px var(--brown), 0 30px 44px rgb(0 0 0 / 55%),
              inset 0 -8px 0 rgb(190 70 0 / 55%), 0 0 40px rgb(255 190 40 / 55%);
}
.play:active {
  transform: translateY(6px);
  box-shadow: 0 3px 0 var(--brown-2), 0 3px 0 6px var(--brown), 0 10px 18px rgb(0 0 0 / 55%),
              inset 0 -5px 0 rgb(190 70 0 / 55%);
}
.play:focus-visible { outline: 4px solid #fff; outline-offset: 8px; }
.play .tri {
  width: 0; height: 0; margin-left: -6px;
  border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-left: 34px solid #fff;
  filter: drop-shadow(3px 0 0 var(--brown)) drop-shadow(-3px 0 0 var(--brown))
          drop-shadow(0 3px 0 var(--brown)) drop-shadow(0 -3px 0 var(--brown));
}
.play::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 55%) 45%, transparent 55%);
  background-size: 250% 100%; background-position: 130% 0;
  animation: shine 3.6s ease-in-out infinite;
}
.play--small {
  padding: 8px 30px 10px; border-width: 4px; font-size: 26px; -webkit-text-stroke-width: 4px;
  box-shadow: 0 5px 0 var(--brown-2), 0 5px 0 4px var(--brown), 0 10px 18px rgb(0 0 0 / 45%),
              inset 0 -5px 0 rgb(190 70 0 / 55%);
}
.play--small::after { animation-duration: 5s; }

/* ---------------- hero ---------------- */
.hero {
  position: relative; height: 100vh; min-height: 720px; overflow: hidden;
  background: url("capa.jpg") center right / cover no-repeat;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(28 10 36 / 62%) 0%, rgb(28 10 36 / 35%) 32%, rgb(28 10 36 / 0%) 55%);
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 180px;
  background: linear-gradient(to bottom, rgb(28 14 36 / 0%), var(--night));
}
.hero-inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: min(52vw, 980px); padding-left: 4vw;
}
.logo { width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgb(0 0 0 / 55%)); animation: drop-in 1.1s cubic-bezier(.2,1.4,.4,1) both, float 5s ease-in-out 1.1s infinite; }
.tagline {
  margin: 10px 0 34px; text-align: center;
  font: 400 clamp(20px, 1.6vw, 30px) "Lilita One", sans-serif; letter-spacing: .6px;
  text-shadow: 0 3px 0 var(--brown), 0 0 18px rgb(0 0 0 / 60%);
}
.sub { margin-top: 26px; font-weight: 800; font-size: 16px; letter-spacing: .4px; color: var(--cream-dim); text-shadow: 0 2px 6px rgb(0 0 0 / 70%); }
.scroll-cue {
  position: absolute; z-index: 3; left: 50%; bottom: 100px; /* clear of the status strip that overlaps the hero by 70px */ width: 34px; height: 34px; margin-left: -17px;
  border-right: 5px solid var(--gold-1); border-bottom: 5px solid var(--gold-1); transform: rotate(45deg);
  filter: drop-shadow(0 2px 0 var(--brown)); animation: nudge 1.8s ease-in-out infinite;
}

/* ---------------- status strip ---------------- */
.status {
  position: relative; z-index: 4; margin: -70px auto 0; width: min(1180px, 92vw);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 5px solid var(--brown); border-radius: 22px; overflow: hidden;
  background: linear-gradient(to bottom, #fff0c4, #f4d488);
  box-shadow: 0 8px 0 var(--brown-2), 0 20px 40px rgb(0 0 0 / 50%);
}
.status-item { padding: 22px 16px; text-align: center; color: var(--brown); }
.status-item + .status-item { border-left: 3px solid rgb(59 23 6 / 25%); }
.status-num { display: block; font: 400 32px/1.1 "Lilita One", sans-serif; color: var(--brown-2); }
.status-label { font-weight: 800; font-size: 15px; letter-spacing: .6px; text-transform: uppercase; opacity: .8; }

/* ---------------- features ---------------- */
.features { width: min(1180px, 92vw); margin: 0 auto; padding: 120px 0 40px; }
.feature {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px;
  margin: 70px 0;
}
.feature--flip .feature-art { order: 2; }
.feature-art {
  position: relative; display: grid; place-items: center; min-height: 420px;
}
.feature-art::before { /* golden halo behind the art */
  content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 178 28 / 38%), rgb(255 122 0 / 0%) 68%);
}
.feature-art img { position: relative; width: 100%; max-width: 480px; height: auto; filter: drop-shadow(0 18px 24px rgb(0 0 0 / 50%)); }
.feature-art img.is-placeholder { /* temporary crops from the cover, until the real art arrives */
  border-radius: 28px; border: 6px solid var(--brown); max-width: 440px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 15px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--teal);
}
.soon {
  font-style: normal; font-size: 12px; letter-spacing: 1px; padding: 3px 10px; border-radius: 999px;
  background: rgb(68 214 194 / 16%); border: 1px solid rgb(68 214 194 / 55%);
}
.feature h3 {
  margin: 8px 0 14px; font: 400 40px/1.12 "Lilita One", sans-serif; color: var(--cream);
  text-shadow: 0 3px 0 var(--brown); text-wrap: balance;
}
.feature p { margin: 0 0 16px; color: var(--cream-dim); max-width: 52ch; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-1), var(--gold-3)); border: 2px solid var(--brown);
}

/* ---------------- leaderboard ---------------- */
.board { width: min(980px, 92vw); margin: 0 auto; padding: 90px 0 40px; }
.board-panel {
  border: 6px solid var(--brown); border-radius: 22px; overflow: hidden;
  background: linear-gradient(to bottom, #3a2140, #2a1532);
  box-shadow: 0 8px 0 var(--brown-2), 0 24px 44px rgb(0 0 0 / 50%);
}
.board-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.board-table th {
  padding: 16px 20px; text-align: left; font: 400 20px "Lilita One", sans-serif; letter-spacing: .5px;
  color: var(--brown); background: linear-gradient(to bottom, var(--gold-1), var(--gold-2));
}
.board-table td { padding: 14px 20px; border-top: 1px solid rgb(255 246 220 / 10%); }
.board-table tr:nth-child(even) td { background: rgb(255 255 255 / 3%); }
.board-table .num { text-align: right; }
.rank { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 400 18px "Lilita One", sans-serif; }
.rank-1 { background: linear-gradient(#ffe27a, #e0a100); color: var(--brown); border: 3px solid var(--brown); }
.rank-2 { background: linear-gradient(#f1f1f1, #aeb7c2); color: #333; border: 3px solid #4a4a4a; }
.rank-3 { background: linear-gradient(#f6c28b, #b8702c); color: #3b1706; border: 3px solid var(--brown); }
.world {
  display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 14px; font-weight: 800;
  background: rgb(68 214 194 / 14%); color: var(--teal); border: 1px solid rgb(68 214 194 / 45%);
}
.player { font-weight: 800; }

/* ---------------- how to play ---------------- */
.how { width: min(1180px, 92vw); margin: 0 auto; padding: 90px 0 40px; text-align: center; }
.steps { list-style: none; padding: 0; margin: 36px 0 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.steps li {
  position: relative; padding: 46px 28px 30px; border-radius: 22px; text-align: center;
  border: 5px solid var(--brown);
  background: linear-gradient(to bottom, #fff0c4, #f4d488); color: var(--brown);
  box-shadow: 0 8px 0 var(--brown-2), 0 20px 36px rgb(0 0 0 / 45%);
}
.step-n {
  position: absolute; top: -30px; left: 50%; margin-left: -30px; width: 60px; height: 60px;
  display: grid; place-items: center; border-radius: 50%; border: 5px solid var(--brown);
  background: linear-gradient(var(--gold-1), var(--gold-3));
  font: 400 30px "Lilita One", sans-serif; color: #fff; -webkit-text-stroke: 4px var(--brown); paint-order: stroke fill;
}
.steps h3 { margin: 0 0 6px; font: 400 28px "Lilita One", sans-serif; color: var(--brown-2); }
.steps p { margin: 0; font-weight: 700; }

/* ---------------- news ---------------- */
.news { width: min(1180px, 92vw); margin: 0 auto; padding: 90px 0 60px; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 36px; }
.news-card {
  padding: 26px 26px 28px; border-radius: 20px; background: var(--panel);
  border: 2px solid var(--panel-edge);
}
.news-card time { font-weight: 800; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--teal); }
.news-card h3 { margin: 6px 0 8px; font: 400 26px/1.2 "Lilita One", sans-serif; color: var(--cream); }
.news-card p { margin: 0; color: var(--cream-dim); }

/* ---------------- footer ---------------- */
.footer { margin-top: 60px; padding: 50px 20px 60px; text-align: center; background: #140a1a; border-top: 4px solid var(--brown); }
.footer-logo { width: 260px; }
.footer p { margin: 8px 0 0; }

/* ---------------- motion ---------------- */
.reveal { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
.reveal.is-waiting { opacity: 0; transform: translateY(28px); }
@keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes shine { 0%, 55% { background-position: 130% 0 } 100% { background-position: -30% 0 } }
@keyframes nudge { 0%, 100% { transform: translateY(0) rotate(45deg) } 50% { transform: translateY(8px) rotate(45deg) } }
@media (prefers-reduced-motion: reduce) {
  .logo, .play::after, .scroll-cue { animation: none; }
  .reveal.is-waiting { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}


/* =====================================================================
   Frills: the animated layer and everything that moves.
   ===================================================================== */

/* the canvas from fx.js sits above the hero art and below every piece of content */
.fx-layer { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.hero-inner, .status, .features, .board, .how, .news, .footer, .clouds { position: relative; z-index: 2; }
.topbar { z-index: 30; }

/* hero art drifts a little with the mouse (JS sets --mx / --my) */
.hero { background-position: calc(100% + var(--mx, 0px)) calc(50% + var(--my, 0px)); transition: background-position .6s ease-out; }
.tagline { animation: rise .8s ease-out .5s both; }
/* on the wrapper, not the button: a filled transform animation would pin the button's
   transform and swallow its :hover lift and :active press */
.hero .play-wrap { animation: rise .7s cubic-bezier(.2,1.3,.4,1) .75s both; }
.sub { animation: rise .7s ease-out 1s both; }

/* a pulsing ring around the big PLAY buttons */
.play-wrap { position: relative; display: inline-block; }
.play-wrap::before, .play-wrap::after {
  content: ""; position: absolute; inset: -10px; border-radius: 999px; pointer-events: none;
  border: 4px solid rgb(255 210 80 / 70%);
  animation: ring 2.4s ease-out infinite;
}
.play-wrap::after { animation-delay: 1.2s; }

/* clouds drifting across the bottom of the hero, in front of the art */
.clouds { position: absolute; left: 0; right: 0; bottom: -40px; height: 220px; pointer-events: none; overflow: hidden; }
.clouds span {
  position: absolute; bottom: 0; width: 520px; height: 150px; border-radius: 50%;
  background:
    radial-gradient(circle at 25% 60%, #fff 0 34%, transparent 35%),
    radial-gradient(circle at 50% 45%, #fff 0 38%, transparent 39%),
    radial-gradient(circle at 75% 62%, #fff 0 32%, transparent 33%),
    radial-gradient(ellipse at 50% 85%, #fff 0 46%, transparent 47%);
  opacity: .22; filter: blur(2px);
  animation: drift linear infinite;
}
.clouds span:nth-child(1) { left: -10%; animation-duration: 70s; }
.clouds span:nth-child(2) { left: 30%; bottom: -30px; transform: scale(1.4); opacity: .16; animation-duration: 95s; animation-delay: -30s; }
.clouds span:nth-child(3) { left: 65%; bottom: 10px; transform: scale(.8); animation-duration: 60s; animation-delay: -12s; }

/* section titles: a slow golden glint */
.section-title { position: relative; background: none; }
.section-title::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  -webkit-text-stroke: 0; text-shadow: none;
  background: linear-gradient(100deg, transparent 40%, rgb(255 255 255 / 85%) 50%, transparent 60%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: glint 5s ease-in-out infinite;
}

/* feature art bobs, and wiggles when hovered */
.feature-art { isolation: isolate; }   /* the ring below stays behind the art, not over it */
.feature-art img { position: relative; z-index: 1; animation: bob 4.5s ease-in-out infinite; transform-origin: 50% 80%; }
.feature:nth-child(odd) .feature-art img { animation-delay: -2.2s; }
.feature-art:hover img { animation: wiggle .6s ease-in-out, bob 4.5s ease-in-out .6s infinite; }
.feature-art::after { /* rotating sparkle ring behind the art */
  content: ""; position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%;
  border: 3px dashed rgb(255 210 80 / 28%); animation: spin 40s linear infinite; z-index: 0;
}

/* status numbers pop when they finish counting */
.status-num.is-done { animation: pop .5s cubic-bezier(.2,1.6,.4,1); }
.status-item { transition: transform .2s; }
.status-item:hover { transform: translateY(-4px); }

/* leaderboard: rows slide in, the leader wears a crown and a shimmer */
.board-table tbody tr { animation: slide-in .5s ease-out both; }
.board-table tbody tr:nth-child(2) { animation-delay: .06s; } .board-table tbody tr:nth-child(3) { animation-delay: .12s; }
.board-table tbody tr:nth-child(4) { animation-delay: .18s; } .board-table tbody tr:nth-child(5) { animation-delay: .24s; }
.board-table tbody tr:nth-child(6) { animation-delay: .30s; } .board-table tbody tr:nth-child(7) { animation-delay: .36s; }
.board-table tbody tr:nth-child(8) { animation-delay: .42s; } .board-table tbody tr:nth-child(9) { animation-delay: .48s; }
.board-table tbody tr:nth-child(10) { animation-delay: .54s; }
.board-table tbody tr:first-child td { background: linear-gradient(90deg, rgb(255 210 80 / 16%), rgb(255 210 80 / 4%)); }
.board-table tbody tr:first-child .player { color: var(--gold-1); }
.rank-1 { position: relative; box-shadow: 0 0 16px rgb(255 210 80 / 70%); }
.rank-1::before { /* little crown */
  content: ""; position: absolute; top: -17px; left: 50%; width: 26px; height: 15px; margin-left: -13px;
  background: linear-gradient(#ffe27a, #e0a100);
  clip-path: polygon(0 100%, 0 20%, 25% 60%, 50% 0, 75% 60%, 100% 20%, 100% 100%);
  filter: drop-shadow(0 1px 0 #3b1706); animation: bob 2.6s ease-in-out infinite;
}
.board-table tbody tr { transition: background .2s; }
.board-table tbody tr:hover td { background: rgb(255 255 255 / 7%); }

/* steps and news react to the pointer */
.steps li { transition: transform .25s cubic-bezier(.2,1.4,.4,1); }
.steps li:hover { transform: translateY(-8px) rotate(-1.2deg); }
.steps li:nth-child(2):hover { transform: translateY(-8px) rotate(1.2deg); }
.news-card { transition: transform .25s, border-color .25s, box-shadow .25s; }
.news-card:hover { transform: translateY(-6px); border-color: var(--gold-2); box-shadow: 0 16px 34px rgb(0 0 0 / 45%), 0 0 24px rgb(255 178 28 / 22%); }

/* a floating island of grass under the footer logo */
.footer { background: linear-gradient(to bottom, #140a1a, #0b0610); overflow: hidden; }
.footer-logo { animation: float 5s ease-in-out infinite; }

@keyframes drop-in { 0% { transform: translateY(-120px) scale(.7); opacity: 0 } 60% { opacity: 1 } 100% { transform: none } }
@keyframes rise { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes ring { 0% { inset: -8px; opacity: .9 } 100% { inset: -30px; opacity: 0 } }
@keyframes drift { from { translate: -20vw 0 } to { translate: 130vw 0 } }
@keyframes glint { 0%, 60% { background-position: 150% 0 } 100% { background-position: -50% 0 } }
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
@keyframes wiggle { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-4deg) scale(1.04) } 75% { transform: rotate(4deg) scale(1.04) } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes pop { 0% { transform: scale(1) } 50% { transform: scale(1.25) } 100% { transform: scale(1) } }
@keyframes slide-in { from { transform: translateX(-30px); opacity: 0 } to { transform: none; opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .logo, .tagline, .hero .play-wrap, .sub, .play-wrap::before, .play-wrap::after, .clouds span,
  .section-title::after, .feature-art img, .feature-art::after, .board-table tbody tr, .rank-1::before, .footer-logo {
    animation: none !important;
  }
}

/* the hammer from the loading minigame is the cursor; a click plays its swing (site.js) */
html { cursor: url("hammer-up.png") 8 39, auto; }
a, button, .play { cursor: url("hammer-up.png") 8 39, pointer; }
html.is-hitting, html.is-hitting * { cursor: none !important; }
.hammer-hit {
  position: fixed; z-index: 1000; pointer-events: none;
  width: 111px; height: 61px;
  background: url("hammer-hit-sheet.png") 0 0 / 555px 61px no-repeat;
  animation: hammer-swing .36s steps(5) forwards;
}
@keyframes hammer-swing { to { background-position: -555px 0; } }

/* ---------------- top-bar switches for the hammer cursor and the bombs ---------------- */
.fx-toggles { display: flex; gap: 10px; }
.fx-toggle {
  position: relative; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  border: 3px solid var(--brown); background: linear-gradient(to bottom, #fff0c4, #f4d488);
  box-shadow: 0 3px 0 var(--brown-2); transition: transform .12s, filter .2s, opacity .2s;
}
.fx-toggle:hover { transform: translateY(-2px); filter: brightness(1.08); }
.fx-toggle:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--brown-2); }
.fx-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.fx-toggle img { width: 20px; height: auto; }
.fx-toggle svg { width: 28px; height: 28px; }
/* off: greyed out and struck through */
.fx-toggle[aria-pressed="false"] { filter: grayscale(1); opacity: .6; }
.fx-toggle[aria-pressed="false"]::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 4px; margin-top: -2px;
  border-radius: 2px; background: #e0342b; box-shadow: 0 0 0 1.5px var(--brown); transform: rotate(-45deg);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* hammer switched off: the normal arrow and hand */
html.no-hammer { cursor: auto; }
html.no-hammer a, html.no-hammer button, html.no-hammer .play { cursor: pointer; }

/* Navigation paints the destination in place; avoid stretching loading placeholders. */
@view-transition { navigation: none; }