/* petya.ai
   The games are the only colour on the page. Everything else is ink on a cool paper.
   Phones are drawn in CSS; sizes inside a phone use cqi, a percentage of that phone's width. */

:root {
  --paper: #eceef3;
  --ink: #151925;
  --ink-2: #596075;
  --line: #c3c8d4;
  --line-strong: #9ea5b4;
  --brand: #e3342f; /* the marker red of the logo sketch */
  --heart: var(--brand);
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(18px, 5vw, 48px);
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* no grey box flashing over whatever is tapped on iPhone: taps answer with their own motion */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.45;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }

/* Focus rings are for keyboards. Safari on iPhone also draws them after a tap when the script moves focus
   (to an opened game's title, or back to its tile), so they show only once Tab or an arrow key has been
   used (site.js puts .keyboard on <html>; a tap takes it off). */
:focus-visible { outline: none; }
.keyboard :focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 8px; }
[tabindex="-1"]:focus-visible { outline: none; } /* a title focused for screen readers, not a control */

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  width: min(1160px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ---------- Library (home) ---------- */

.intro { padding-block: clamp(28px, 7vw, 76px) clamp(28px, 5vw, 56px); }

.logo { margin: 0 0 clamp(18px, 2.4vw, 28px); color: var(--brand); line-height: 0; }
.logo svg { display: block; width: clamp(104px, 12vw, 148px); height: auto; overflow: visible; }

.intro__line {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(19px, 2.3vw, 25px);
  line-height: 1.3;
}

.intro__links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0; }
.intro__links a { font-weight: 600; }

.library {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 52px) clamp(16px, 3vw, 40px);
  padding-bottom: clamp(48px, 8vw, 96px);
}

@media (min-width: 900px) {
  .library { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tile { display: flex; flex-direction: column; }

.tile__link { display: block; color: inherit; text-decoration: none; }

.tile__stage { margin-bottom: 16px; }
.tile .phone-wrap { width: 86%; }
.tile .phone { --glow: color-mix(in srgb, var(--accent) 62%, transparent); }

.tile__title {
  margin: 0 0 4px;
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

a.tile__link:hover .tile__title { text-decoration: underline; }

.tile__line { margin: 0; color: var(--ink-2); font-size: clamp(14.5px, 1.3vw, 15.5px); line-height: 1.35; }

.tile__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.tile__foot:empty { display: none; }

.tile__badge { color: var(--ink-2); font-size: 14px; font-weight: 600; }

/* An item with no clip yet: a dashed slot the size of a phone, with a small branching drawing in it */
.slot {
  position: relative;
  padding: 3.3cqi;
  border-radius: 16cqi;
  outline: 1.5px dashed var(--line); /* an outline, not a border, so the slot is exactly phone-sized */
  outline-offset: -1.5px;
  color: var(--ink-2);
}
.slot::before { content: ""; display: block; aspect-ratio: 9 / 19.5; }
.mycelium {
  position: absolute;
  top: 9cqi;
  left: 9cqi;
  width: calc(100% - 18cqi);
  height: calc(100% - 15cqi);
  opacity: 0.6;
}

/* ---------- Phone ---------- */

.phone-wrap { container-type: inline-size; width: 100%; }

.phone {
  position: relative;
  padding: 3.3cqi;
  border-radius: 16cqi;
  background: linear-gradient(155deg, #5a5e67 0%, #24262c 16%, #101114 55%, #2d3036 100%);
  box-shadow:
    inset 0 0 0 0.55cqi #7d828c,
    inset 0 0 0 1.5cqi #08090b,
    0 1.5cqi 3cqi rgb(16 20 32 / 0.22),
    0 16cqi 30cqi -10cqi var(--glow, rgb(16 20 32 / 0.4));
}

/* side button on the right, two volume buttons on the left */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  width: 1.1cqi;
  border-radius: 1cqi;
  background: #3a3d44;
}
.phone::before { right: -0.8cqi; top: 26%; height: 19cqi; }
.phone::after { left: -0.8cqi; top: 21%; height: 11cqi; box-shadow: 0 14cqi 0 #3a3d44; }

.phone__screen {
  position: relative;
  aspect-ratio: 9 / 19.5;
  overflow: hidden;
  border-radius: 12.8cqi;
  background: #000;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* keeps Safari clipping video to the corners */
}

.phone__screen > video,
.phone__screen > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the island */
.phone__screen::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 2.8cqi;
  left: 50%;
  width: 28cqi;
  height: 8.2cqi;
  border-radius: 99px;
  background: #000;
  transform: translateX(-50%);
}

/* glass */
.phone__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(120deg, rgb(255 255 255 / 0.15) 0%, rgb(255 255 255 / 0.04) 30%, transparent 46%);
}

.clip-toggle {
  position: absolute;
  z-index: 4;
  bottom: 7cqi;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  border: 0;
  border-radius: 99px;
  background: rgb(0 0 0 / 0.6);
  color: #fff;
  font: 600 14px/1 var(--font);
  cursor: pointer;
}

/* ---------- Like ---------- */

.like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px 0 10px;
  border: 1.5px solid var(--line);
  border-radius: 99px;
  background: transparent;
  color: inherit;
  font: 600 14px/1 var(--font);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.like:hover { border-color: currentColor; }

.like__heart {
  width: 18px;
  height: 18px;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  transition: fill 0.15s, stroke 0.15s;
}

.like[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--heart) 55%, transparent);
  background: color-mix(in srgb, var(--heart) 12%, transparent);
}
.like[aria-pressed="true"] .like__heart { fill: var(--heart); stroke: var(--heart); }

.like.is-popping .like__heart { animation: like-pop 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes like-pop {
  40% { transform: scale(1.45); }
}

.like--big { height: 48px; padding: 0 18px 0 14px; gap: 8px; font-size: 16px; }
.like--big .like__heart { width: 22px; height: 22px; }

/* ---------- Game page ---------- */

body.game {
  --line: color-mix(in srgb, var(--ink) 30%, transparent);
  --ink-2: var(--soft);
  background: var(--bg);
  color: var(--ink);
}

.game__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px 6px;
}

/* Back to the library, top left where a phone's back button sits */
.game__back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 40px;
  padding: 0 16px 0 8px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s;
}
.game__back-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .game__back:hover { border-color: currentColor; }
}
.game__back:active { transform: scale(0.95); }

.game__home { display: inline-block; color: var(--brand); line-height: 0; border-radius: 6px; }
.game__home svg { display: block; width: auto; height: 34px; overflow: visible; }

.game__hero {
  display: grid;
  grid-template-areas: "phones" "text";
  gap: clamp(28px, 4vw, 56px);
  padding-block: 12px clamp(40px, 6vw, 72px);
}

@media (min-width: 900px) {
  .game__hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "text phones";
    align-items: center;
    min-height: min(80vh, 780px);
  }
}

.game__text { grid-area: text; max-width: 34rem; }

.game__icon { display: block; width: 76px; height: 76px; border-radius: 22%; box-shadow: 0 8px 22px rgb(0 0 0 / 0.25); }

.game__title {
  margin: 20px 0 12px;
  font-size: clamp(42px, 6vw, 76px);
  font-weight: 800;
  font-stretch: 82%;
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.game__tagline { margin: 0 0 14px; font-size: clamp(19px, 2vw, 23px); line-height: 1.3; }

.game__about { max-width: 46ch; margin: 0 0 26px; color: var(--soft); }

.game__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.store-badge { display: block; border-radius: 10px; }
.store-badge img { display: block; width: auto; height: 48px; }

.soon {
  margin: 0;
  padding: 13px 18px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  font-weight: 600;
  line-height: 1;
}

.game__note { margin: 14px 0 0; color: var(--soft); font-size: 14.5px; }

/* three phones: gameplay in the middle, store shots tilted behind it */
.game__phones {
  position: relative;
  grid-area: phones;
  display: grid;
  grid-template-columns: 0.82fr 1.3fr 0.82fr;
  align-items: center;
  width: min(100%, 640px);
  justify-self: center;
  perspective: 1600px;
}

.game__phones::before {
  content: "";
  position: absolute;
  inset: 8% -6%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent);
  pointer-events: none;
}

.game__phones .phone { --glow: color-mix(in srgb, var(--accent) 45%, transparent); }

.phone-wrap--main { position: relative; z-index: 2; transform: rotate(-3deg); }
.phone-wrap--side { position: relative; z-index: 1; }
.phone-wrap--left { transform: translateX(24%) rotateY(30deg) rotate(-8deg) scale(0.86); transform-origin: right center; }
.phone-wrap--right { transform: translateX(-24%) rotateY(-30deg) rotate(8deg) scale(0.86); transform-origin: left center; }

.more { border-top: 1px solid var(--line); padding-block: 22px 16px; }
.more__title { margin: 0 0 16px; font-size: 18px; font-weight: 700; }
.more__list { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 0; padding: 0; list-style: none; }
.more__list a { display: flex; align-items: center; gap: 12px; font-weight: 600; text-decoration: none; }
.more__list a:hover span { text-decoration: underline; }
.more__list img { width: 48px; height: 48px; border-radius: 22%; }

/* ---------- Company structure (bottom of the library) ---------- */

.team {
  padding-block: clamp(36px, 6vw, 64px) clamp(8px, 2vw, 16px);
  border-top: 1px solid var(--line);
  text-align: center;
}

.team__title {
  margin: 0 0 clamp(24px, 4vw, 40px);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

:where(.org, .org ol) { margin: 0; padding: 0; list-style: none; } /* no specificity, so the rules below win */

.org__head { display: flex; flex-direction: column; align-items: center; }

/* connectors: a line down from the head, a bar across, and a stub down to each report */
.org__reports { position: relative; display: flex; justify-content: center; margin-top: 22px; }
.org__reports::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 50%;
  height: 22px;
  border-left: 1.5px solid var(--line-strong);
}
.org__reports > li { position: relative; padding: 20px clamp(4px, 2.2vw, 28px) 0; }
.org__reports > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1.5px solid var(--line-strong);
}
.org__reports > li:first-child::before { left: 50%; }
.org__reports > li:last-child::before { right: 50%; }
.org__reports > li:only-child::before { display: none; }
.org__reports > li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 20px;
  border-left: 1.5px solid var(--line-strong);
}

.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: clamp(96px, 24vw, 160px);
  margin: 0;
}

/* round photos with a red ring, like the logo's circle */
.person__photo {
  display: block;
  width: clamp(78px, 19vw, 120px);
  height: auto; /* the img's height attribute would otherwise win over aspect-ratio */
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  background: #dfe2ea;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--brand);
}
.person--head .person__photo { width: clamp(100px, 24vw, 148px); }

/* until the photo arrives: a dashed circle with the mark in it */
.person__photo--empty {
  display: grid;
  place-items: center;
  background: transparent;
  box-shadow: none;
  outline: 1.5px dashed var(--line);
  outline-offset: -1.5px;
  color: var(--ink-2);
}
.person__photo--empty svg { width: 48%; height: auto; opacity: 0.5; }

.person figcaption { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.person__role { font-size: clamp(14.5px, 1.4vw, 16px); font-weight: 700; }
.person__name { color: var(--ink-2); font-size: 14px; }

/* Each photo opens that role's card (a popover, scripts/build.mjs) */
.person__open {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.person__open .person__photo { transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.4); }
@media (hover: hover) {
  .person__open:hover .person__photo { transform: scale(1.05); }
}
.person__open:active .person__photo { transform: scale(0.96); }
.person__open:focus-visible { border-radius: 50%; outline-offset: 8px; }

.person-card {
  width: min(320px, 100% - 32px);
  padding: 30px 24px 24px;
  border: 0;
  border-radius: 24px;
  background: #f7f8fb;
  color: #151925;
  text-align: center;
  box-shadow: 0 24px 64px rgb(21 25 37 / 0.3);
}
.person-card::backdrop { background: rgb(21 25 37 / 0.35); }
.person-card__photo {
  display: block;
  width: 152px;
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto 18px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px #f7f8fb, 0 0 0 7px var(--brand);
}
.person-card__role { margin: 0; color: #596075; font-size: 14px; font-weight: 700; }
.person-card__name { margin: 2px 0 0; font-size: 30px; line-height: 1.1; font-weight: 750; letter-spacing: -0.01em; }
.person-card__bio { margin: 12px 0 0; line-height: 1.4; }
.person-card__reports {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1.5px solid #c3c8d4;
  color: #596075;
  font-size: 15px;
}
.person-card__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #596075;
  font: 400 28px / 1 var(--font);
  cursor: pointer;
}
@media (hover: hover) {
  .person-card__close:hover { background: rgb(21 25 37 / 0.07); color: #151925; }
}

/* A quick pop in and out where the browser can animate popovers; elsewhere it just appears */
@media (prefers-reduced-motion: no-preference) {
  .person-card,
  .person-card::backdrop {
    transition: opacity 0.16s, transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.25), overlay 0.2s allow-discrete, display 0.2s allow-discrete;
  }
  .person-card:not(:popover-open) { opacity: 0; transform: scale(0.9); }
  .person-card:not(:popover-open)::backdrop { opacity: 0; }
  @starting-style {
    .person-card:popover-open { opacity: 0; transform: scale(0.9); }
    .person-card:popover-open::backdrop { opacity: 0; }
  }
}

/* ---------- Footer ---------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding-block: 24px 88px; /* room for the Feedback button in the corner */
  color: var(--ink-2);
  font-size: 14px;
}
.foot p { margin: 0; }

/* ---------- Feedback ---------- */

/* The corner button: ink on the library; on a game page, that game's colours turned around */
.feedback-open {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg, var(--paper));
  font: 650 15px / 1 var(--font);
  box-shadow: 0 6px 18px rgb(21 25 37 / 0.2);
  cursor: pointer;
  transition: transform 0.15s;
}
.feedback-open__icon { width: 18px; height: 18px; fill: currentColor; }
.feedback-open:active { transform: scale(0.95); }
@media (hover: hover) {
  .feedback-open:hover { transform: translateY(-2px); }
}
/* On a phone the pill would cover the Like button on a game's first screen: just the icon there */
@media (max-width: 560px) {
  .feedback-open { justify-content: center; width: 48px; min-height: 48px; padding: 0; }
  .feedback-open__icon { width: 20px; height: 20px; }
  .feedback-open__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* The form keeps the site's own ink and paper, on game pages too */
.feedback {
  --ink: #151925;
  --ink-2: #596075;
  --line: #c3c8d4;
  --line-strong: #9ea5b4;
  width: min(520px, 100% - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #f7f8fb;
  color: var(--ink);
  box-shadow: 0 24px 64px rgb(21 25 37 / 0.3);
}
.feedback::backdrop { background: rgb(21 25 37 / 0.45); }
.feedback__form,
.feedback__done { padding: clamp(20px, 5vw, 30px); }
.feedback__title { margin: 0; font-size: 27px; line-height: 1.15; font-weight: 700; }
.feedback__lead { margin: 6px 0 0; color: var(--ink-2); }
.feedback__topics { min-width: 0; margin: 22px 0 0; padding: 0; border: 0; }
.feedback__topics legend,
.feedback__field > span:first-child { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 700; }
.feedback__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.feedback__chips label { position: relative; }
.feedback__chips input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.feedback__chips span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}
.feedback__chips input:checked + span { background: var(--ink); border-color: var(--ink); color: #f7f8fb; }
.keyboard .feedback__chips input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }
.feedback__field { display: grid; margin-top: 18px; }
.feedback__hint { color: var(--ink-2); font-weight: 400; }
.feedback__field textarea,
.feedback__field input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  font: 400 16px / 1.4 var(--font); /* 16px keeps iOS from zooming in */
}
.feedback__field textarea { min-height: 120px; resize: vertical; }
.feedback__field textarea:focus,
.feedback__field input:focus { outline: none; border-color: var(--ink); }
.feedback__count { margin-top: 6px; color: var(--ink-2); font-size: 13px; }
.feedback__count:empty { display: none; }
.feedback__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feedback__error { margin: 14px 0 0; color: #c0261f; font-weight: 600; }
.feedback__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.feedback__actions button {
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: 650 15px / 1 var(--font);
  cursor: pointer;
}
.feedback__actions .feedback__send { background: var(--ink); border-color: var(--ink); color: #f7f8fb; }
.feedback__actions .feedback__send:disabled { opacity: 0.6; cursor: progress; }

/* Shown for a few seconds after opening a page with ?notrack or ?track (build.mjs, analytics) */
.track-note {
  position: fixed;
  inset: auto var(--gutter) max(16px, env(safe-area-inset-bottom));
  z-index: 10;
  width: fit-content;
  max-width: calc(100% - 2 * var(--gutter));
  margin: 0 auto;
  padding: 10px 18px;
  border-radius: 999px;
  background: #151925;
  color: #eceef3;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18);
  font-size: 15px;
  font-weight: 600;
}

/* ---------- Motion ---------- */

/* The phone you tap flies into its game page (browsers without view transitions just navigate). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

::view-transition-group(*) {
  animation-duration: 0.34s;
  animation-timing-function: cubic-bezier(0.25, 0.9, 0.25, 1);
}

/* the page colour swaps quickly; only the phone takes its time */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .like.is-popping .like__heart { animation: none; }
  .like, .like__heart { transition: none; }
}

/* The cheetah shakes its head when you point at the logo, or tap it on a touch screen (site.js adds
   .is-wiggling). The head turns about the circle's centre: see ANIMALS in scripts/logo.mjs. */
.logo-head { transform-box: view-box; transform-origin: 50px 50px; }

@media (prefers-reduced-motion: no-preference) {
  .logo svg.is-wiggling .logo-head,
  .game__home:focus-visible .logo-head { animation: head-wiggle 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .logo svg:hover .logo-head,
  .game__home:hover .logo-head { animation: head-wiggle 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
}
@keyframes head-wiggle {
  15% { transform: rotate(-7deg); }
  35% { transform: rotate(6deg); }
  55% { transform: rotate(-4deg); }
  75% { transform: rotate(2deg); }
}