:root {
    --bg: #05050d;
    --panel: rgba(255, 255, 255, 0.078);
    --panel-strong: rgba(255, 255, 255, 0.13);
    --text: #ffffff;
    --muted: rgba(255, 255, 255, 0.72);
    --soft: rgba(255, 255, 255, 0.56);
    --line: rgba(255, 255, 255, 0.13);
    --yellow: #fff36a;
    --pink: #ff67d5;
    --cyan: #61f7ff;
    --green: #94ff76;
    --orange: #ffad4d;
    --shadow: 0 24px 90px rgba(0,0,0,0.36);
  }

  * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }

  html {
    min-height: 100%;
    background: #05050d;
    scroll-behavior: smooth;
  }

  body {
    min-height: 100%;
    margin: 0;
    color: var(--text);
    background:
      radial-gradient(circle at 15% 10%, rgba(255, 103, 213, 0.18), transparent 32%),
      radial-gradient(circle at 82% 8%, rgba(97, 247, 255, 0.15), transparent 30%),
      radial-gradient(circle at 48% 86%, rgba(255, 243, 106, 0.11), transparent 36%),
      linear-gradient(135deg, #070716 0%, #090922 46%, #030307 100%);
    font-family: Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
  }

  body.game-mode {
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
    touch-action: none;
  }

  body.game-mode,
  body.game-mode * {
    cursor: none !important;
  }

  button,
  a {
    font: inherit;
  }

  a {
    color: inherit;
  }

  .siteShell {
    min-height: 100svh;
    position: relative;
    /* flow-root = a block formatting context WITHOUT being scrollable.
       overflow:hidden used to create one implicitly, keeping the sticky
       header's top margin inside the shell; overflow:clip does not, so
       the margin collapsed through and a strip of raw page background
       appeared above the site. This restores containment cleanly. */
    display: flow-root;
    /* clip, NOT hidden: hidden makes this element a programmatically-
     scrollable container — scrollIntoView (the About button) scrolls BOTH
     the window and this element, but the mouse wheel only scrolls the
     window, leaving .siteShell's internal scrollTop stuck forever: the
     whole site appears shifted up past the top boundary with no way to
     scroll back. overflow:clip clips visuals identically but is not
     scrollable at all. hidden is kept first as a fallback for old engines. */
  overflow: hidden;
  overflow: clip;
  }

  body.game-mode .siteShell {
    display: none;
  }

  .siteShell::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
    background-image:
      radial-gradient(circle, rgba(255,255,255,0.16) 0 1px, transparent 1.5px),
      radial-gradient(circle, rgba(255,255,255,0.10) 0 1px, transparent 1.5px);
    background-size: 46px 46px, 86px 86px;
    background-position: 0 0, 22px 30px;
    mask-image: linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
  }

  .siteHeader,
  .hero,
  .siteSection,
  .siteFooter {
    width: min(1120px, calc(100% - 36px));
    margin-inline: auto;
    position: relative;
    z-index: 2;
  }

  .siteHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0 12px;
  }

  .siteLogo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    min-width: 0;
  }

  .logoBubble {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 28% 42% 34% 44%;
    font-size: 30px;
    background:
      radial-gradient(circle at 31% 25%, rgba(255,255,255,0.95) 0 8%, transparent 9%),
      linear-gradient(135deg, var(--yellow), var(--pink) 48%, #7b61ff 74%, var(--cyan));
    box-shadow:
      0 0 0 4px rgba(255,255,255,0.12),
      0 16px 34px rgba(0,0,0,0.28),
      0 0 36px rgba(255,103,213,0.26);
  }

  .logoText {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 1000;
    line-height: 1;
    letter-spacing: -0.055em;
    color: transparent;
    background: linear-gradient(90deg, var(--yellow), var(--pink), var(--cyan), var(--green));
    -webkit-background-clip: text;
    background-clip: text;
  }

  .headerTag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255,255,255,0.055);
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
    backdrop-filter: blur(14px);
  }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.82fr);
    gap: clamp(28px, 5vw, 74px);
    align-items: center;
    padding: clamp(48px, 8vw, 94px) 0 clamp(54px, 7vw, 86px);
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 9px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.075);
    color: rgba(255,255,255,0.82);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  h1 {
    margin: 0;
    max-width: 860px;
    font-size: clamp(48px, 8.2vw, 96px);
    line-height: 0.91;
    letter-spacing: -0.073em;
  }

  .gradientText {
    color: transparent;
    background: linear-gradient(90deg, #ffffff 0%, var(--yellow) 24%, var(--pink) 58%, var(--cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }

  .heroLead {
    max-width: 700px;
    margin: 24px 0 0;
    color: var(--muted);
    font-size: clamp(19px, 2.2vw, 25px);
    line-height: 1.48;
  }

  .heroLead strong {
    color: #fff;
  }

  .heroActions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    align-items: center;
    margin-top: 34px;
  }

  .startButton {
    border: 0;
    border-radius: 999px;
    padding: 18px 28px;
    min-height: 60px;
    color: #160b05;
    background: linear-gradient(135deg, var(--yellow), var(--orange) 48%, #ff6bbd);
    box-shadow: 0 16px 38px rgba(255, 173, 77, 0.26), inset 0 -2px 0 rgba(0,0,0,0.16);
    font-weight: 1000;
    font-size: 18px;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
  }

  .startButton:hover {
    transform: translateY(-2px) scale(1.015);
    filter: saturate(1.08);
    box-shadow: 0 22px 48px rgba(255, 173, 77, 0.34), inset 0 -2px 0 rgba(0,0,0,0.16);
  }

  .startButton:active {
    transform: translateY(0) scale(0.99);
  }

  .startButton:focus-visible,
  .footerLink:focus-visible {
    outline: 4px solid rgba(97,247,255,0.65);
    outline-offset: 4px;
  }

  .microNote {
    color: var(--soft);
    font-weight: 750;
    font-size: 14px;
  }

  .trustGrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 34px;
    max-width: 760px;
  }

  .trustChip {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.84);
    text-align: center;
    font-weight: 900;
    font-size: 13px;
    backdrop-filter: blur(14px);
  }

  .previewCard {
    position: relative;
    min-height: 480px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 38px;
    background:
      radial-gradient(circle at 23% 19%, rgba(255,243,106,0.22), transparent 26%),
      radial-gradient(circle at 80% 28%, rgba(97,247,255,0.18), transparent 27%),
      radial-gradient(circle at 50% 80%, rgba(255,103,213,0.20), transparent 31%),
      rgba(255,255,255,0.065);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .previewCard::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,0.10);
  }

  .previewLetter {
    position: absolute;
    font-weight: 1000;
    line-height: 1;
    text-shadow: 0 14px 26px rgba(0,0,0,0.42), 0 0 22px currentColor;
    animation: previewFloat 4.8s ease-in-out infinite;
  }

  .previewLetter.one {
    left: 14%;
    top: 18%;
    color: var(--yellow);
    font-size: clamp(86px, 9vw, 132px);
    transform: rotate(-10deg);
  }

  .previewLetter.two {
    right: 12%;
    top: 32%;
    color: var(--cyan);
    font-size: clamp(70px, 8vw, 116px);
    animation-delay: -1.1s;
    transform: rotate(12deg);
  }

  .previewLetter.three {
    left: 26%;
    bottom: 20%;
    color: var(--pink);
    font-size: clamp(72px, 8.6vw, 124px);
    animation-delay: -2.2s;
    transform: rotate(7deg);
  }

  .previewMascot {
    position: absolute;
    right: 30px;
    bottom: 26px;
    font-size: clamp(56px, 7vw, 86px);
    filter: drop-shadow(0 16px 22px rgba(0,0,0,0.42));
    animation: mascotHop 2.4s ease-in-out infinite;
  }

  .previewBadge {
    position: absolute;
    left: 26px;
    bottom: 28px;
    max-width: 220px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 20px;
    background: rgba(0,0,0,0.24);
    color: rgba(255,255,255,0.84);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 750;
    backdrop-filter: blur(16px);
  }

  .siteSection {
    padding: 26px 0;
  }

  .infoPanel {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 24px;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid var(--line);
    border-radius: 34px;
    background: rgba(255,255,255,0.062);
    box-shadow: 0 18px 60px rgba(0,0,0,0.20);
    backdrop-filter: blur(18px);
  }

  .sectionKicker {
    margin: 0 0 10px;
    color: var(--yellow);
    font-size: 13px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  h2 {
    margin: 0;
    font-size: clamp(30px, 4.2vw, 52px);
    line-height: 1;
    letter-spacing: -0.055em;
  }

  .infoPanel p {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.62;
  }

  .featureList {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
  }

  .featureCard {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.18);
  }

  .featureCard h3 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.1;
  }

  .featureCard p {
    font-size: 14px;
    line-height: 1.5;
  }

  .siteFooter {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: end;
    padding: 34px 0 42px;
    color: rgba(255,255,255,0.62);
    font-size: 14px;
  }

  .footerTitle {
    margin: 0 0 8px;
    color: #fff;
    font-weight: 1000;
    font-size: 18px;
  }

  .footerText {
    margin: 0;
    max-width: 760px;
    line-height: 1.65;
  }

  .footerLink {
    color: #fff;
    font-weight: 850;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.35);
  }

  .footerLink:hover {
    color: var(--cyan);
    border-color: var(--cyan);
  }

  .copyright {
    white-space: nowrap;
  }

  #game {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow: hidden;
    background: radial-gradient(circle at center, #121226 0%, #05050d 58%, #000 100%);
    touch-action: none;
  }

  body.game-mode #game {
    display: block;
  }

  #playground {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 12% 18%, rgba(255,255,255,0.055), transparent 9%),
      radial-gradient(circle at 78% 25%, rgba(255,255,255,0.04), transparent 8%),
      radial-gradient(circle at 48% 82%, rgba(255,255,255,0.035), transparent 10%);
  }

  #backHomeButton {
    position: fixed;
    right: clamp(14px, 2.2vw, 28px);
    top: clamp(14px, 2.2vw, 28px);
    z-index: 90;
    width: 108px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.26);
    border-radius: 999px;
    padding: 12px 14px;
    background: rgba(5, 5, 13, 0.58);
    color: #fff;
    font-weight: 950;
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.01em;
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.14);
    pointer-events: auto;
  }

  body.game-mode #backHomeButton,
  body.game-mode #backHomeButton * {
    cursor: pointer !important;
  }

  #backHomeButton:hover,
  #backHomeButton:focus-visible {
    outline: none;
    border-color: rgba(114,247,255,0.72);
    background: rgba(255,255,255,0.13);
    transform: translateY(-1px);
  }

  #backHomeButton:active {
    transform: translateY(1px) scale(0.98);
  }

  #gameBrand {
    position: fixed;
    left: clamp(14px, 2.4vw, 34px);
    top: clamp(12px, 2.2vw, 28px);
    z-index: 70;
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.1vw, 14px);
    pointer-events: none;
    opacity: 0.95;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.42));
    animation: brandFloat 4.2s ease-in-out infinite;
  }

  #gameBrandLogo {
    width: clamp(46px, 6vw, 72px);
    height: clamp(46px, 6vw, 72px);
    border-radius: 26% 42% 30% 46%;
    display: grid;
    place-items: center;
    font-size: clamp(26px, 3.8vw, 44px);
    background:
      radial-gradient(circle at 32% 24%, rgba(255,255,255,0.95) 0 9%, transparent 10%),
      linear-gradient(135deg, #ffdf3f, #ff4fb8 45%, #7a5cff 76%, #19e6ff);
    box-shadow:
      0 0 0 4px rgba(255,255,255,0.16),
      0 0 26px rgba(255,79,184,0.45),
      inset 0 -10px 18px rgba(0,0,0,0.18);
  }

  #gameBrandName {
    display: inline-block;
    font-size: clamp(32px, 6vw, 74px);
    font-weight: 1000;
    line-height: 1.08;
    letter-spacing: -0.055em;
    padding-right: 0.12em;
    padding-bottom: 0.05em;
    overflow: visible;
    color: transparent;
    background: linear-gradient(90deg, #fff36a, #ff73d9, #72f7ff, #9cff6b, #fff36a);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 5px 22px rgba(0,0,0,0.35);
    animation: brandGradient 4s linear infinite;
  }

  #flash {
    position: fixed;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 5;
  }

  #hint {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.86);
    text-align: center;
    font-weight: 900;
    font-size: clamp(34px, 7vw, 86px);
    letter-spacing: 0.02em;
    text-shadow: 0 0 20px rgba(255,255,255,0.25), 0 6px 30px rgba(0,0,0,0.65);
    z-index: 50;
    animation: hintBreathe 1.8s ease-in-out infinite;
    transition: opacity 0.55s ease, transform 0.55s ease, filter 0.55s ease;
    padding: 0 8vw;
  }

  #hint.hidden {
    opacity: 0;
    transform: translate(-50%, -56%) scale(0.92);
    filter: blur(8px);
    pointer-events: none;
  }

  .letter {
    position: fixed;
    left: var(--x);
    top: var(--y);
    z-index: 20;
    color: var(--color);
    font-size: var(--size);
    font-weight: 1000;
    line-height: 1;
    text-shadow:
      0 0 8px color-mix(in srgb, var(--color), white 28%),
      0 0 22px var(--color),
      0 10px 24px rgba(0,0,0,0.55);
    filter: saturate(1.4);
    will-change: transform, opacity;
    animation: floatLetter 2.05s cubic-bezier(.16,.84,.22,1) forwards;
    pointer-events: none;
  }

  .spark {
    position: fixed;
    left: var(--x);
    top: var(--y);
    width: var(--sparkSize);
    height: var(--sparkSize);
    border-radius: 999px;
    z-index: 15;
    background: var(--color);
    box-shadow: 0 0 10px var(--color), 0 0 22px var(--color);
    will-change: transform, opacity;
    animation: sparkFly var(--duration) ease-out forwards;
    pointer-events: none;
  }

  .spark.star {
    border-radius: 25%;
    transform: rotate(45deg);
  }

  .celebration {
    position: fixed;
    left: 50%;
    top: 43%;
    z-index: 35;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: clamp(54px, 12vw, 170px);
    font-weight: 1000;
    line-height: 0.92;
    letter-spacing: 0.02em;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(255,255,255,0.75), 0 0 40px var(--glow), 0 15px 38px rgba(0,0,0,0.7);
    pointer-events: none;
    will-change: transform, opacity, filter;
    animation: celebrateText 2.35s cubic-bezier(.12,.9,.23,1) forwards;
  }

  .celebration .emoji {
    display: block;
    font-size: 0.7em;
    margin-bottom: 0.06em;
    animation: emojiBounce 0.5s ease-in-out infinite alternate;
  }

  .flyingEmoji {
    position: fixed;
    left: var(--startX);
    top: var(--startY);
    z-index: 32;
    font-size: var(--size);
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.45));
    pointer-events: none;
    will-change: transform, opacity;
    animation: emojiFly var(--duration) cubic-bezier(.15,.78,.18,1) forwards;
  }

  .clickText {
    position: fixed;
    left: var(--x);
    top: var(--y);
    z-index: 34;
    font-size: clamp(46px, 10vw, 120px);
    font-weight: 1000;
    line-height: 1;
    white-space: nowrap;
    background: linear-gradient(90deg, #ff4df8, #4dfcff, #fff64d, #68ff5d, #ff884d);
    background-size: 320% 100%;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 10px 30px rgba(0,0,0,0.7);
    pointer-events: none;
    will-change: transform, opacity, filter;
    animation: clickPop 1.35s ease-out forwards, gradientMove 0.85s linear infinite;
  }


  #hint span {
    display: block;
    margin-top: 0.18em;
    font-size: 0.46em;
    color: rgba(255,255,255,0.66);
    letter-spacing: 0.01em;
  }

  .mobileKeyboard {
    position: fixed;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 85;
    display: none;
    max-width: 760px;
    margin-inline: auto;
    padding: 10px 10px 56px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 28px;
    background: rgba(5, 5, 13, 0.58);
    box-shadow: 0 18px 42px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.11);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    pointer-events: auto;
    touch-action: manipulation;
  }


  .mobileKeyboardTop {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 18px;
    margin-bottom: 7px;
  }

  .keyboardModeToggle {
    position: absolute;
    right: 10px;
    bottom: 10px;
    min-width: 96px;
    min-height: 42px;
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 999px;
    color: #10121a;
    background: linear-gradient(135deg, #fff36a, #7dffdf);
    box-shadow: 0 10px 24px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.55);
    font-size: 13px;
    font-weight: 1000;
    letter-spacing: 0.06em;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }

  .keyboardModeToggle:active {
    transform: translateY(2px) scale(0.96);
    filter: brightness(1.1) saturate(1.15);
  }

  body.game-mode.keyboard-visible #mobileKeyboard {
    display: block;
  }

  .mobileKeyboardHint {
    margin: 0 0 7px;
    text-align: center;
    color: rgba(255,255,255,0.62);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .mobileKeyRows {
    display: grid;
    gap: 7px;
  }

  .mobileKeyRow {
    display: flex;
    justify-content: center;
    gap: 6px;
  }

  .mobileKey,
  .mobileActionKey {
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 15px;
    min-height: 44px;
    color: #130916;
    background: linear-gradient(135deg, #fff36a, #ffad4d 48%, #ff67d5);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28), inset 0 -2px 0 rgba(0,0,0,0.14);
    font-weight: 1000;
    font-size: clamp(16px, 4.4vw, 22px);
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }

  .mobileKey {
    flex: 1 1 0;
    max-width: 58px;
    padding: 0 2px;
  }

  .mobileKey.numberKey {
    background: linear-gradient(135deg, #72f7ff, #7a5cff 55%, #fff36a);
  }

  .mobileActionKey {
    flex: 1 1 0;
    min-height: 42px;
    padding: 0 12px;
    font-size: clamp(13px, 3.4vw, 17px);
    color: #fff;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
  }

  .mobileActionKey.clear {
    background: rgba(255,103,213,0.20);
  }

  .mobileKey:active,
  .mobileActionKey:active {
    transform: translateY(2px) scale(0.96);
    filter: brightness(1.1) saturate(1.15);
  }

  .mobileKeyActions {
    display: flex;
    gap: 7px;
    margin-top: 8px;
  }

  .bufferBadge {
    position: fixed;
    left: 18px;
    bottom: 14px;
    z-index: 2;
    color: rgba(255,255,255,0.08);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.12em;
    pointer-events: none;
  }

  .flashPulse {
    animation: flashPulse 0.42s ease-out forwards;
  }

  @keyframes previewFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -18px; }
  }

  @keyframes mascotHop {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-16px) rotate(5deg); }
  }

  @keyframes brandFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  @keyframes brandGradient {
    from { background-position: 0% 50%; }
    to { background-position: 260% 50%; }
  }

  @keyframes hintBreathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.04); }
  }

  @keyframes floatLetter {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.35);
      filter: blur(1px) saturate(1.6);
    }
    12% { opacity: 1; }
    45% { opacity: 0.98; }
    100% {
      opacity: 0;
      transform: translate(calc(-50% + var(--driftX)), calc(-50% - var(--rise))) rotate(calc(var(--rot) + var(--spin))) scale(1.2);
      filter: blur(2px) saturate(1.8);
    }
  }

  @keyframes sparkFly {
    0% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    100% {
      opacity: 0;
      transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.05) rotate(var(--spin));
    }
  }

  @keyframes celebrateText {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-7deg); filter: blur(8px); }
    14% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(3deg); filter: blur(0); }
    28% { transform: translate(-50%, -50%) scale(0.98) rotate(-1deg); }
    68% { opacity: 1; transform: translate(-50%, -62%) scale(1.04) rotate(1deg); }
    100% { opacity: 0; transform: translate(-50%, -92%) scale(0.86) rotate(0deg); filter: blur(7px); }
  }

  @keyframes emojiBounce {
    from { transform: translateY(0) rotate(-5deg) scale(1); }
    to { transform: translateY(-12px) rotate(5deg) scale(1.08); }
  }

  @keyframes emojiFly {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35) rotate(0deg); }
    10% { opacity: 1; }
    78% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--endX), var(--endY)) scale(1.35) rotate(var(--spin)); }
  }

  @keyframes clickPop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25) rotate(-10deg); filter: blur(5px); }
    16% { opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(3deg); filter: blur(0); }
    100% { opacity: 0; transform: translate(-50%, -115%) scale(0.92) rotate(0deg); filter: blur(4px); }
  }

  @keyframes gradientMove {
    from { background-position: 0% 50%; }
    to { background-position: 320% 50%; }
  }

  @keyframes flashPulse {
    0% { opacity: 0; }
    18% { opacity: 0.24; }
    100% { opacity: 0; }
  }

  @media (max-width: 880px) {
    .siteHeader {
      align-items: flex-start;
      padding-top: 18px;
    }

    .headerTag {
      display: none;
    }

    .hero {
      grid-template-columns: 1fr;
      padding-top: 36px;
    }

    .previewCard {
      min-height: 360px;
    }

    .trustGrid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .infoPanel {
      grid-template-columns: 1fr;
    }

    .featureList {
      grid-template-columns: 1fr;
    }

    .siteFooter {
      grid-template-columns: 1fr;
    }

    .copyright {
      white-space: normal;
    }
  }

  @media (max-width: 520px) {
    .siteHeader,
    .hero,
    .siteSection,
    .siteFooter {
      width: min(100% - 26px, 1120px);
    }

    .logoBubble {
      width: 46px;
      height: 46px;
      font-size: 27px;
    }

    .heroActions {
      align-items: stretch;
    }

    .startButton {
      width: 100%;
    }

    .trustGrid {
      grid-template-columns: 1fr;
    }

    .previewCard {
      min-height: 300px;
      border-radius: 28px;
    }
  }


  @media (hover: none), (pointer: coarse), (any-pointer: coarse), (max-width: 760px) {
    body.game-mode #mobileKeyboard {
      display: block;
    }

    body.game-mode #gameBrand {
      top: max(10px, env(safe-area-inset-top));
      left: max(12px, env(safe-area-inset-left));
      transform-origin: left top;
    }

    body.game-mode #gameBrandLogo {
      width: clamp(38px, 10vw, 52px);
      height: clamp(38px, 10vw, 52px);
      font-size: clamp(22px, 6vw, 31px);
    }

    body.game-mode #gameBrandName {
      font-size: clamp(26px, 9vw, 46px);
    }

    body.game-mode #backHomeButton {
      top: max(10px, env(safe-area-inset-top));
      right: max(10px, env(safe-area-inset-right));
      padding: 10px 14px;
      font-size: 14px;
    }

    body.game-mode #hint {
      top: 34%;
      font-size: clamp(30px, 11vw, 58px);
      padding-inline: 18px;
    }

    body.game-mode .celebration {
      top: 35%;
      font-size: clamp(44px, 17vw, 92px);
    }

    body.game-mode .letter {
      font-size: min(var(--size), 104px);
    }

    body.game-mode .bufferBadge {
      bottom: calc(max(10px, env(safe-area-inset-bottom)) + 186px);
      left: 14px;
    }
  }

  @media (max-width: 390px) {
    .mobileKeyboard {
      padding: 8px;
      border-radius: 22px;
    }

    .mobileKeyRows {
      gap: 5px;
    }

    .mobileKeyRow {
      gap: 4px;
    }

    .mobileKey {
      min-height: 39px;
      border-radius: 12px;
      font-size: 15px;
    }

    .mobileActionKey {
      min-height: 38px;
      border-radius: 12px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
    }
  }


  /* Desktop-only parent lock + PIN unlock. Hidden on phones/tablets. */
  #screenLockButton {
    position: fixed;
    right: calc(clamp(14px, 2.2vw, 28px) + 120px);
    top: clamp(14px, 2.2vw, 28px);
    z-index: 91;
    width: 132px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.26);
    border-radius: 999px;
    padding: 12px 12px;
    background: rgba(5, 5, 13, 0.58);
    color: #fff;
    font-weight: 950;
    font-size: clamp(14px, 1.45vw, 17px);
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    letter-spacing: 0.01em;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.14);
    pointer-events: auto;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }

  body.game-mode #screenLockButton,
  body.game-mode #screenLockButton *,
  body.game-mode #screenKeyboardButton,
  body.game-mode #screenKeyboardButton *,
  body.game-mode .pinUnlockOverlay,
  body.game-mode .pinUnlockOverlay * {
    cursor: pointer !important;
  }


  /* Desktop on-screen keyboard: keep the mouse cursor visible over keys.
     The main game hides the cursor for toddler play, but parents need a visible pointer
     when using the optional desktop keyboard. */
  body.game-mode #mobileKeyboard {
    cursor: default !important;
  }

  body.game-mode #mobileKeyboard *,
  body.game-mode #keyboardModeToggle {
    cursor: pointer !important;
  }

  @media (hover: hover) and (pointer: fine) {
    body.game-mode.keyboard-visible #mobileKeyboard.mobileKeyboard {
      opacity: 0.72;
      transform: translateY(8px);
      transition: opacity 180ms ease, transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }

    body.game-mode.keyboard-visible #mobileKeyboard.mobileKeyboard:hover,
    body.game-mode.keyboard-visible #mobileKeyboard.mobileKeyboard:focus-within {
      opacity: 1;
      transform: translateY(0);
      background: rgba(5, 5, 13, 0.78);
      border-color: rgba(125,255,223,0.42);
      box-shadow: 0 22px 58px rgba(0,0,0,0.56), 0 0 0 3px rgba(125,255,223,0.10), inset 0 1px 0 rgba(255,255,255,0.15);
    }
  }

  #screenLockButton:hover,
  #screenLockButton:focus-visible {
    outline: none;
    border-color: rgba(114,247,255,0.72);
    background: rgba(255,255,255,0.13);
    transform: translateY(-1px);
  }

  #screenLockButton:active {
    transform: translateY(1px) scale(0.98);
  }

  #screenLockButton.locked {
    border-color: rgba(255,243,106,0.82);
    background: linear-gradient(135deg, rgba(255,243,106,0.24), rgba(255,103,213,0.18));
    box-shadow: 0 0 0 3px rgba(255,243,106,0.13), 0 14px 32px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.18);
  }


  #screenKeyboardButton {
    position: fixed;
    right: calc(clamp(14px, 2.2vw, 28px) + 264px);
    top: clamp(14px, 2.2vw, 28px);
    z-index: 91;
    width: 162px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.26);
    border-radius: 999px;
    padding: 12px 12px;
    background: rgba(5, 5, 13, 0.58);
    color: #fff;
    font-weight: 950;
    font-size: clamp(14px, 1.45vw, 17px);
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    letter-spacing: 0.01em;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.14);
    pointer-events: auto;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }

  body.keyboard-visible #screenKeyboardButton {
    border-color: rgba(125,255,223,0.82);
    background: linear-gradient(135deg, rgba(125,255,223,0.20), rgba(114,247,255,0.14));
    box-shadow: 0 0 0 3px rgba(125,255,223,0.12), 0 14px 32px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.18);
  }

  #screenKeyboardButton:hover,
  #screenKeyboardButton:focus-visible {
    outline: none;
    border-color: rgba(125,255,223,0.72);
    background: rgba(255,255,255,0.13);
    transform: translateY(-1px);
  }

  #screenKeyboardButton:active {
    transform: translateY(1px) scale(0.98);
  }

  body.screen-locked #backHomeButton {
    opacity: 0.48;
    filter: grayscale(0.2);
  }

  .pinUnlockOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483200;
    place-items: center;
    padding: 24px;
    background: rgba(0,0,0,0.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
  }

  .pinUnlockOverlay.show { display: grid; }

  .pinUnlockPanel {
    width: min(360px, calc(100vw - 36px));
    padding: 22px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 28px;
    background:
      radial-gradient(circle at 20% 10%, rgba(255,243,106,0.20), transparent 34%),
      radial-gradient(circle at 80% 20%, rgba(97,247,255,0.16), transparent 34%),
      rgba(7, 7, 22, 0.94);
    box-shadow: 0 28px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.12);
    text-align: center;
  }

  .pinUnlockTitle { font-size: 24px; font-weight: 1000; letter-spacing: -0.035em; }

  .pinUnlockText { margin-top: 6px; color: rgba(255,255,255,0.72); font-weight: 850; font-size: 14px; }

  .pinUnlockCode {
    margin: 12px auto 10px;
    padding: 10px 18px;
    width: fit-content;
    border-radius: 18px;
    color: #10121a;
    background: linear-gradient(135deg, #fff36a, #7dffdf);
    box-shadow: 0 12px 24px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.65);
    font-size: 34px;
    font-weight: 1000;
    letter-spacing: 0.14em;
  }

  .pinUnlockDots {
    min-height: 28px;
    margin-bottom: 12px;
    color: rgba(255,255,255,0.84);
    font-size: 22px;
    font-weight: 1000;
    letter-spacing: 0.18em;
  }

  .pinUnlockPanel.shake { animation: pinShake 0.26s ease-in-out; }

  .pinUnlockPad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

  .pinUnlockPad button {
    min-height: 58px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 18px;
    color: #fff;
    background: rgba(255,255,255,0.11);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 22px rgba(0,0,0,0.24);
    font-size: 23px;
    font-weight: 1000;
    touch-action: manipulation;
  }

  .pinUnlockPad button:active { transform: translateY(2px) scale(0.97); filter: brightness(1.15); }

  @keyframes pinShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-7px); }
    50% { transform: translateX(7px); }
    75% { transform: translateX(-4px); }
  }

  @media (hover: none), (pointer: coarse), (any-pointer: coarse), (max-width: 980px) {
    #screenLockButton, #screenKeyboardButton { display: none !important; }
  }



  /* Language switch buttons */
  .langToggle,
  #gameLanguageToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,0.075);
    font-weight: 1000;
    letter-spacing: 0.03em;
    box-shadow: 0 12px 30px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.13);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }

  .langToggle {
    min-width: 104px;
    padding: 10px 14px;
    font-size: 14px;
  }

  .langToggle:hover,
  .langToggle:focus-visible,
  #gameLanguageToggle:hover,
  #gameLanguageToggle:focus-visible {
    outline: none;
    border-color: rgba(255,243,106,0.72);
    background: rgba(255,255,255,0.13);
    transform: translateY(-1px);
  }

  .langToggle:active,
  #gameLanguageToggle:active {
    transform: translateY(1px) scale(0.98);
  }

  #gameLanguageToggle {
    position: fixed;
    right: calc(clamp(14px, 2.2vw, 28px) + 438px);
    top: clamp(14px, 2.2vw, 28px);
    z-index: 91;
    width: 110px;
    box-sizing: border-box;
    padding: 12px 12px;
    font-size: clamp(14px, 1.45vw, 17px);
    line-height: 1.1;
    pointer-events: auto;
  }

  body.game-mode #gameLanguageToggle,
  body.game-mode #gameLanguageToggle * {
    cursor: pointer !important;
  }

  @media (hover: none), (pointer: coarse), (any-pointer: coarse), (max-width: 980px) {
    #gameLanguageToggle {
      left: 50%;
      right: auto;
      top: max(14px, env(safe-area-inset-top));
      width: 96px;
      padding: 10px 12px;
      transform: translateX(-50%);
      font-size: 14px;
    }

    #gameLanguageToggle:hover,
    #gameLanguageToggle:focus-visible,
    #gameLanguageToggle:active {
      transform: translateX(-50%);
    }
  }

  @media (max-width: 520px) {
    .langToggle {
      min-width: 94px;
      padding: 9px 12px;
      font-size: 13px;
    }
  }


  /* Real CSS flag badges for language switch. This avoids broken flag emoji rendering on some devices. */
  .flagIcon {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 17px;
    border-radius: 4px;
    overflow: hidden;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.34), 0 5px 12px rgba(0,0,0,0.28);
    transform: translateY(1px);
  }

  .flagIcon.flag-lt {
    background: linear-gradient(to bottom,
      #fdb913 0%, #fdb913 33.333%,
      #006a44 33.333%, #006a44 66.666%,
      #c1272d 66.666%, #c1272d 100%);
  }

  .flagIcon.flag-gb {
    background:
      linear-gradient(0deg, transparent 39%, #ffffff 39%, #ffffff 61%, transparent 61%),
      linear-gradient(90deg, transparent 42%, #ffffff 42%, #ffffff 58%, transparent 58%),
      linear-gradient(34deg, transparent 43%, #ffffff 43%, #ffffff 51%, transparent 51%),
      linear-gradient(-34deg, transparent 43%, #ffffff 43%, #ffffff 51%, transparent 51%),
      #012169;
  }

  .flagIcon.flag-gb::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(0deg, transparent 44%, #c8102e 44%, #c8102e 56%, transparent 56%),
      linear-gradient(90deg, transparent 46%, #c8102e 46%, #c8102e 54%, transparent 54%);
  }

  .langCode {
    display: inline-block;
    min-width: 22px;
    text-align: left;
  }



  /* Clickaroo LT text clipping fix — CSS only. No buttons/JS/markup changed. */
  html[lang="lt"] .gradientText,
  :lang(lt) .gradientText {
    display: inline-block !important;
    line-height: 1.2 !important;
    letter-spacing: -0.045em !important;
    padding-left: 0.02em !important;
    padding-right: 0.18em !important;
    padding-top: 0.02em !important;
    padding-bottom: 0.12em !important;
    margin-right: -0.02em !important;
    overflow: visible !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  html[lang="lt"] h1,
  html[lang="lt"] h2,
  html[lang="lt"] h3,
  :lang(lt) h1,
  :lang(lt) h2,
  :lang(lt) h3 {
    line-height: 1.18 !important;
    letter-spacing: -0.04em !important;
    padding-right: 0.16em !important;
    padding-bottom: 0.1em !important;
    overflow: visible !important;
    max-width: none;
  }

  html[lang="lt"] .logoText,
  html[lang="lt"] #gameBrandName,
  :lang(lt) .logoText,
  :lang(lt) #gameBrandName {
    display: inline-block !important;
    line-height: 1.12 !important;
    letter-spacing: -0.045em !important;
    padding-right: 0.2em !important;
    padding-bottom: 0.1em !important;
    overflow: visible !important;
    max-width: none !important;
  }

  html[lang="lt"] .heroLead,
  html[lang="lt"] .infoPanel p,
  html[lang="lt"] .featureCard h3,
  html[lang="lt"] .featureCard p,
  html[lang="lt"] .footerText,
  html[lang="lt"] .copyright,
  :lang(lt) .heroLead,
  :lang(lt) .infoPanel p,
  :lang(lt) .featureCard h3,
  :lang(lt) .featureCard p,
  :lang(lt) .footerText,
  :lang(lt) .copyright {
    line-height: 1.62 !important;
    letter-spacing: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  html[lang="lt"] .trustChip,
  :lang(lt) .trustChip {
    min-height: 66px !important;
    height: auto !important;
    padding: 14px 14px !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    text-align: center;
  }

  html[lang="lt"] .startButton,
  :lang(lt) .startButton {
    min-height: 64px !important;
    line-height: 1.25 !important;
    padding: 18px 32px 20px !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  html[lang="lt"] .sectionKicker,
  :lang(lt) .sectionKicker,
  html[lang="lt"] .eyebrow,
  :lang(lt) .eyebrow {
    letter-spacing: 0.045em !important;
    line-height: 1.35 !important;
    padding-right: 0.12em !important;
    padding-bottom: 0.04em !important;
    overflow: visible !important;
  }

  @media (max-width: 760px) {
    html[lang="lt"] h1,
    :lang(lt) h1 {
      font-size: clamp(39px, 12.2vw, 62px) !important;
      line-height: 1.12 !important;
      letter-spacing: -0.035em !important;
    }

    html[lang="lt"] h2,
    :lang(lt) h2 {
      line-height: 1.15 !important;
      letter-spacing: -0.035em !important;
    }

    html[lang="lt"] .heroLead,
    :lang(lt) .heroLead {
      font-size: clamp(17px, 4.8vw, 22px) !important;
      line-height: 1.56 !important;
    }
  }


/* Wordaroo — Lithuanian word education mini-game */
.wordarooLaunchButton {
  color: #06141a;
  background: linear-gradient(135deg, #72f7ff, #9cff6b 52%, #fff36a);
  box-shadow: 0 16px 38px rgba(97, 247, 255, 0.22), inset 0 -2px 0 rgba(0,0,0,0.14);
}

.wordarooLaunchButton:hover {
  box-shadow: 0 22px 48px rgba(97, 247, 255, 0.30), inset 0 -2px 0 rgba(0,0,0,0.14);
}

body.wordaroo-mode {
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
}

body.wordaroo-mode .siteShell {
  display: none;
}

#wordaroo {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: auto;
  color: #fff;
  background:
    radial-gradient(circle at 16% 16%, rgba(114,247,255,0.20), transparent 30%),
    radial-gradient(circle at 80% 20%, rgba(255,103,213,0.18), transparent 30%),
    radial-gradient(circle at 50% 84%, rgba(255,243,106,0.12), transparent 32%),
    linear-gradient(135deg, #070716 0%, #080826 48%, #030307 100%);
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

body.wordaroo-mode #wordaroo {
  display: block;
}

.wordarooTopBar {
  width: min(980px, 100%);
  margin: 0 auto 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.wordarooBrand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-weight: 1000;
  letter-spacing: -0.04em;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.08;
}

.wordarooBrandIcon {
  width: clamp(42px, 8vw, 58px);
  height: clamp(42px, 8vw, 58px);
  display: grid;
  place-items: center;
  border-radius: 30% 42% 34% 44%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,0.92) 0 8%, transparent 9%),
    linear-gradient(135deg, #72f7ff, #9cff6b 55%, #fff36a);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.13), 0 18px 38px rgba(0,0,0,0.28);
}

.wordarooTopControls {
  display: flex;
  gap: 10px;
  align-items: center;
}

#wordarooBackButton,
#wordarooLanguageToggle {
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  padding: 12px 15px;
  color: #fff;
  background: rgba(255,255,255,0.075);
  font-weight: 1000;
  box-shadow: 0 14px 34px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  touch-action: manipulation;
}

#wordarooLanguageToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 86px;
}

.wordarooCard {
  width: min(980px, 100%);
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: clamp(26px, 4vw, 42px);
  background: rgba(255,255,255,0.075);
  box-shadow: 0 24px 90px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: clamp(18px, 4vw, 38px);
  overflow: hidden;
  position: relative;
}

.wordarooCard::before {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.14) 0 1px, transparent 1.5px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
}

.wordarooCard > * {
  position: relative;
  z-index: 2;
}

.wordarooIntro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.wordarooKicker {
  margin: 0 0 8px;
  color: rgba(255,255,255,0.72);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}

.wordarooTitle {
  margin: 0;
  font-size: clamp(34px, 7vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.065em;
}

.wordarooSubtitle {
  margin: 16px 0 0;
  max-width: 720px;
  color: rgba(255,255,255,0.72);
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.45;
  font-weight: 750;
}

.wordarooProgress {
  justify-self: end;
  min-width: 112px;
  min-height: 112px;
  display: grid;
  place-items: center;
  border-radius: 34px;
  font-size: clamp(30px, 7vw, 52px);
  font-weight: 1000;
  color: #101018;
  background: linear-gradient(135deg, #fff36a, #72f7ff 58%, #9cff6b);
  box-shadow: 0 18px 42px rgba(114,247,255,0.22), inset 0 -8px 22px rgba(0,0,0,0.12);
}

.wordarooPlayArea {
  display: grid;
  grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 34px);
  align-items: center;
  margin-top: clamp(22px, 4vw, 38px);
}

.wordarooCluePanel {
  min-height: 250px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 34px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.13), transparent 32%),
    rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  padding: 18px;
}

.wordarooEmoji {
  font-size: clamp(72px, 14vw, 132px);
  line-height: 1;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,0.32));
}

.wordarooCategory {
  margin-top: 12px;
  color: rgba(255,255,255,0.78);
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wordarooSlots {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.8vw, 14px);
  justify-content: center;
  align-items: center;
  min-height: 96px;
  padding: 12px 0;
}

.wordarooSlot {
  width: clamp(42px, 8vw, 72px);
  height: clamp(56px, 10vw, 88px);
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  font-size: clamp(28px, 6vw, 54px);
  line-height: 1;
  font-weight: 1000;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 -5px 18px rgba(0,0,0,0.18);
}

.wordarooSlot.revealed {
  color: #101018;
  background: linear-gradient(135deg, #fff36a, #72f7ff);
  border-color: rgba(255,255,255,0.34);
}

.wordarooMessage {
  min-height: 34px;
  margin: 10px 0 0;
  text-align: center;
  color: rgba(255,255,255,0.84);
  font-weight: 950;
  font-size: clamp(17px, 2.1vw, 22px);
}

.wordarooWrong {
  min-height: 34px;
  margin-top: 12px;
  text-align: center;
  color: rgba(255,255,255,0.64);
  font-size: 14px;
  font-weight: 850;
}

.wordarooKeyboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(20px, 4vw, 34px);
}

.wordarooKey {
  width: clamp(38px, 8vw, 56px);
  height: clamp(42px, 8vw, 58px);
  border: 0;
  border-radius: 16px;
  color: #101018;
  background: linear-gradient(135deg, #ffffff, #dffcff);
  font-weight: 1000;
  font-size: clamp(18px, 4.6vw, 26px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22), inset 0 -3px 0 rgba(0,0,0,0.13);
  cursor: pointer;
  touch-action: manipulation;
}

.wordarooKey:active {
  transform: translateY(1px) scale(0.98);
}

.wordarooKey.used {
  opacity: 0.35;
  filter: grayscale(0.5);
}

.wordarooActions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

#wordarooNextButton {
  border: 0;
  border-radius: 999px;
  padding: 15px 22px;
  min-height: 54px;
  color: #101018;
  background: linear-gradient(135deg, #9cff6b, #72f7ff);
  font-weight: 1000;
  font-size: 17px;
  box-shadow: 0 16px 34px rgba(114,247,255,0.22), inset 0 -2px 0 rgba(0,0,0,0.14);
  cursor: pointer;
}

.wordarooConfetti {
  position: fixed;
  z-index: 1010;
  pointer-events: none;
  font-size: 32px;
  animation: wordarooFly 1.1s ease-out forwards;
}

@keyframes wordarooFly {
  from { transform: translate3d(0, 0, 0) scale(0.8) rotate(0deg); opacity: 0; }
  18% { opacity: 1; }
  to { transform: translate3d(var(--x), var(--y), 0) scale(1.5) rotate(22deg); opacity: 0; }
}

.wordarooShake {
  animation: wordarooShake 0.28s ease-in-out;
}

@keyframes wordarooShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@media (max-width: 760px) {
  .wordarooTopBar {
    align-items: flex-start;
  }

  .wordarooBrand {
    font-size: 30px;
  }

  .wordarooTopControls {
    flex-direction: column;
    align-items: flex-end;
  }

  #wordarooBackButton,
  #wordarooLanguageToggle {
    padding: 10px 13px;
    font-size: 14px;
  }

  .wordarooIntro {
    grid-template-columns: 1fr;
  }

  .wordarooProgress {
    justify-self: start;
    min-width: 86px;
    min-height: 72px;
    border-radius: 24px;
    font-size: 30px;
  }

  .wordarooPlayArea {
    grid-template-columns: 1fr;
  }

  .wordarooCluePanel {
    min-height: 178px;
  }

  .wordarooSlots {
    min-height: 76px;
  }

  .wordarooSlot {
    width: clamp(34px, 10vw, 52px);
    height: clamp(46px, 13vw, 62px);
    border-radius: 14px;
  }

  .wordarooKeyboard {
    gap: 6px;
  }
}


/* Wordaroo long-word fit fix — keeps longer Lithuanian words on one line */
.wordarooCard {
  width: min(1120px, 100%);
}

.wordarooPlayArea {
  grid-template-columns: minmax(170px, 0.28fr) minmax(0, 1fr);
}

.wordarooSlots {
  flex-wrap: nowrap;
  gap: clamp(5px, 1.1vw, 10px);
  overflow: visible;
}

.wordarooSlot {
  width: clamp(34px, 5.2vw, 58px);
  height: clamp(52px, 8.2vw, 78px);
  font-size: clamp(26px, 4.8vw, 46px);
}

@media (max-width: 760px) {
  .wordarooCard {
    padding-left: clamp(12px, 4vw, 22px);
    padding-right: clamp(12px, 4vw, 22px);
  }

  .wordarooSlots {
    gap: clamp(4px, 1.2vw, 7px);
  }

  .wordarooSlot {
    width: clamp(30px, 9.1vw, 42px);
    height: clamp(44px, 12vw, 58px);
    font-size: clamp(23px, 7vw, 36px);
    border-radius: 12px;
  }
}

@media (max-width: 380px) {
  .wordarooSlot {
    width: clamp(27px, 8.7vw, 34px);
    height: 44px;
    font-size: 23px;
  }

  .wordarooSlots {
    gap: 4px;
  }
}


/* Wordaroo navigation + completed check */
.wordarooProgress.completed {
  color: #07140a;
  background: linear-gradient(135deg, #9cff6b, #62ff8f 58%, #fff36a);
  box-shadow: 0 18px 42px rgba(156,255,107,0.32), inset 0 -8px 22px rgba(0,0,0,0.12);
}

#wordarooPrevButton,
#wordarooRestartButton {
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px;
  padding: 15px 18px;
  min-height: 54px;
  color: #fff;
  background: rgba(255,255,255,0.09);
  font-weight: 1000;
  font-size: 16px;
  box-shadow: 0 16px 34px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
  cursor: pointer;
  touch-action: manipulation;
}

#wordarooPrevButton:disabled {
  opacity: 0.38;
  cursor: default;
}

@media (max-width: 760px) {
  .wordarooActions {
    flex-wrap: wrap;
  }

  #wordarooPrevButton,
  #wordarooRestartButton,
  #wordarooNextButton {
    flex: 1 1 150px;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 15px;
  }
}


/* Uploaded Clickaroo logo — visible IMG integration */
.siteLogo,
#gameBrand,
.wordarooBrand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.clickarooLogoImage,
.gameLogoImage,
.wordarooLogoImage {
  display: block;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.32));
}

.clickarooLogoImage {
  width: clamp(190px, 30vw, 430px);
  max-width: min(430px, 70vw);
}

.gameLogoImage,
.wordarooLogoImage {
  width: clamp(170px, 28vw, 390px);
  max-width: min(390px, 56vw);
}

@media (max-width: 760px) {
  .clickarooLogoImage {
    width: clamp(150px, 54vw, 250px);
    max-width: 66vw;
  }

  .gameLogoImage,
  .wordarooLogoImage {
    width: clamp(130px, 48vw, 220px);
    max-width: 52vw;
  }
}

@media (max-width: 420px) {
  .clickarooLogoImage {
    width: clamp(132px, 52vw, 210px);
  }

  .gameLogoImage,
  .wordarooLogoImage {
    width: clamp(118px, 44vw, 185px);
  }
}


.wordarooQuestion {
  margin-top: 12px;
  color: rgba(255,255,255,0.94);
  font-size: clamp(18px, 2.4vw, 25px);
  font-weight: 1000;
  line-height: 1.2;
  text-wrap: balance;
}



/* Compact kids-app style playground hint */
#hint {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: min(92vw, 560px);
  padding: 16px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 18px 60px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(255,255,255,0.96);
  font-size: clamp(20px, 3.8vw, 38px) !important;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-align: center;
  text-shadow: 0 3px 18px rgba(0,0,0,0.28);
}

#hint.hidden {
  display: none !important;
}

#hint .hintIcon {
  flex: 0 0 auto;
  font-size: 0.95em;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25));
}

#hint .hintText {
  display: inline-block;
  margin: 0;
  white-space: nowrap;
}

#hint strong {
  font-weight: 1000;
  color: #fff36d;
  text-shadow: 0 0 22px rgba(255,230,80,0.30);
}

@media (max-width: 520px) {
  #hint {
    gap: 9px;
    padding: 13px 16px;
    font-size: clamp(18px, 6.2vw, 28px) !important;
  }

  #hint .hintText {
    white-space: normal;
  }
}


/* Slightly wider hint for "try to write" wording */
#hint {
  max-width: min(94vw, 720px);
}

#hint .hintText {
  white-space: normal;
}


/* ===== Landing proportional fix ===== */
.hero {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: clamp(32px, 4vw, 60px);
  align-items: center;
}

.hero > div:first-child {
  max-width: 620px;
}

#hero-title {
  max-width: 8ch;
}

#hero-title .gradientText {
  display: inline-block;
  text-wrap: balance;
}

h1 {
  font-size: clamp(58px, 6.6vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.06em;
}

.heroLead {
  max-width: 610px;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.5;
}

.heroActions {
  gap: 14px;
}

.heroActions .microNote {
  flex-basis: 100%;
  margin-top: 2px;
}

.startButton {
  min-width: 240px;
  justify-content: center;
  text-align: center;
}

.gamesShowcase {
  display: grid;
  gap: 16px;
  width: min(100%, 430px);
}

.landingGameCard {
  position: relative;
  min-height: 250px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 30px;
  background:
    radial-gradient(circle at 20% 22%, rgba(255,243,106,0.16), transparent 24%),
    radial-gradient(circle at 78% 22%, rgba(97,247,255,0.16), transparent 26%),
    radial-gradient(circle at 52% 80%, rgba(255,103,213,0.16), transparent 32%),
    rgba(255,255,255,0.05);
  color: #fff;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 20px 55px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.landingGameCard:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.24);
  box-shadow: 0 24px 60px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.1);
}

.landingGameCard:focus-visible {
  outline: 4px solid rgba(97,247,255,0.65);
  outline-offset: 4px;
}

.landingGamePill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(5,8,24,0.46);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.84);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.landingGameBottom {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
}

.landingGameBottom h3 {
  margin: 0;
  font-size: clamp(38px, 4.2vw, 54px);
  line-height: 1;
  letter-spacing: -0.05em;
}

.landingGameBottom p {
  margin: 8px 0 0;
  max-width: 280px;
  color: rgba(255,255,255,0.74);
  font-size: 16px;
  line-height: 1.35;
}

.landingGameLetters span {
  position: absolute;
  font-weight: 1000;
  line-height: 1;
  filter: drop-shadow(0 0 14px currentColor);
}
.landingGameLetters .l1 {
  top: 56px;
  left: 42px;
  color: #fff36a;
  font-size: 92px;
  transform: rotate(-7deg);
}
.landingGameLetters .l2 {
  top: 66px;
  right: 46px;
  color: #72f7ff;
  font-size: 88px;
  transform: rotate(8deg);
}
.landingGameLetters .l3 {
  top: 132px;
  left: 86px;
  color: #ff67d5;
  font-size: 84px;
  transform: rotate(-5deg);
}

.landingWordarooIcons span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  font-size: 28px;
  background: rgba(255,255,255,0.10);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.landingWordarooIcons span:nth-child(1) {
  top: 68px;
  left: 28px;
}
.landingWordarooIcons span:nth-child(2) {
  top: 82px;
  right: 38px;
}
.landingWordarooIcons span:nth-child(3) {
  top: 144px;
  left: 92px;
}

.wordarooCard .landingGameBottom p {
  max-width: 300px;
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .gamesShowcase {
    width: min(100%, 520px);
  }
}

@media (max-width: 700px) {
  h1 {
    font-size: clamp(46px, 11vw, 72px);
    line-height: 1.04;
  }

  .heroLead {
    font-size: 18px;
  }

  .startButton {
    width: 100%;
    min-width: 0;
  }

  .landingGameCard {
    min-height: 220px;
  }

  .landingGameBottom h3 {
    font-size: 34px;
  }

  .landingGameBottom p {
    font-size: 15px;
  }
}

html[lang="lt"] h1,
:lang(lt) h1 {
  max-width: 9ch;
  font-size: clamp(52px, 6.3vw, 86px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.05em !important;
}

html[lang="lt"] .heroLead,
:lang(lt) .heroLead {
  max-width: 620px;
}


/* ===== Size correction for landing game cards ===== */
.gamesShowcase {
  width: min(100%, 460px);
  gap: 18px;
}

.landingGameCard {
  min-height: 270px;
  padding: 22px;
}

.landingGamePill {
  position: relative;
  z-index: 5;
}

.landingGameBottom {
  z-index: 5;
  left: 22px;
  right: 22px;
  bottom: 22px;
  padding-top: 42px;
  background: linear-gradient(to bottom, transparent 0%, rgba(6,7,18,0.36) 38%, rgba(6,7,18,0.72) 100%);
  border-radius: 0 0 22px 22px;
}

.landingGameBottom h3 {
  font-size: clamp(30px, 3.25vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.landingGameBottom p {
  margin-top: 7px;
  max-width: 340px;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(255,255,255,0.76);
}

.landingGameLetters,
.landingWordarooIcons {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.landingGameLetters span {
  opacity: 0.9;
}

.landingGameLetters .l1 {
  top: 58px;
  left: 42px;
  font-size: 80px;
}

.landingGameLetters .l2 {
  top: 58px;
  right: 46px;
  font-size: 78px;
}

.landingGameLetters .l3 {
  top: 120px;
  left: 92px;
  font-size: 72px;
}

.landingWordarooIcons span {
  z-index: 1;
  opacity: 0.92;
}

.landingWordarooIcons span:nth-child(1) {
  top: 64px;
  left: 34px;
}

.landingWordarooIcons span:nth-child(2) {
  top: 72px;
  right: 42px;
}

.landingWordarooIcons span:nth-child(3) {
  top: 130px;
  left: 118px;
}

@media (max-width: 700px) {
  .gamesShowcase {
    gap: 14px;
  }

  .landingGameCard {
    min-height: 245px;
    padding: 18px;
  }

  .landingGameBottom {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .landingGameBottom h3 {
    font-size: clamp(28px, 8vw, 36px);
  }

  .landingGameBottom p {
    font-size: 14px;
  }

  .landingGameLetters .l1 {
    top: 58px;
    left: 28px;
    font-size: 68px;
  }

  .landingGameLetters .l2 {
    top: 62px;
    right: 30px;
    font-size: 64px;
  }

  .landingGameLetters .l3 {
    top: 116px;
    left: 74px;
    font-size: 58px;
  }

  .landingWordarooIcons span:nth-child(1) {
    top: 62px;
    left: 24px;
  }

  .landingWordarooIcons span:nth-child(2) {
    top: 76px;
    right: 28px;
  }

  .landingWordarooIcons span:nth-child(3) {
    top: 128px;
    left: 82px;
  }
}


/* ===== Extra landing card correction ===== */
.gamesShowcase {
  width: min(100%, 470px);
}

.landingGameCard {
  min-height: 282px !important;
  padding: 18px !important;
}

.landingGamePill {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 6 !important;
  font-size: 11px !important;
  padding: 0 12px !important;
  min-height: 32px !important;
}

.landingGameBottom {
  position: absolute !important;
  z-index: 6 !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  padding: 28px 0 2px !important;
  background: linear-gradient(to bottom, rgba(6,7,18,0.02) 0%, rgba(6,7,18,0.40) 28%, rgba(6,7,18,0.88) 78%, rgba(6,7,18,0.94) 100%) !important;
  border-radius: 20px !important;
}

.landingGameBottom h3 {
  font-size: clamp(26px, 3vw, 36px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
}

.landingGameBottom p {
  max-width: 320px !important;
  margin-top: 8px !important;
  font-size: 13px !important;
  line-height: 1.34 !important;
}

.landingGameLetters .l1 {
  top: 54px !important;
  left: 34px !important;
  font-size: 72px !important;
}

.landingGameLetters .l2 {
  top: 56px !important;
  right: 34px !important;
  font-size: 68px !important;
}

.landingGameLetters .l3 {
  top: 112px !important;
  left: 84px !important;
  font-size: 58px !important;
  opacity: 0.78 !important;
}

.landingWordarooIcons span {
  width: 48px !important;
  height: 48px !important;
  font-size: 24px !important;
}

.landingWordarooIcons span:nth-child(1) {
  top: 64px !important;
  left: 28px !important;
}

.landingWordarooIcons span:nth-child(2) {
  top: 74px !important;
  right: 34px !important;
}

.landingWordarooIcons span:nth-child(3) {
  top: 136px !important;
  left: 112px !important;
}

.wordarooCard .landingGameBottom p {
  max-width: 300px !important;
}

@media (max-width: 700px) {
  .landingGameCard {
    min-height: 250px !important;
    padding: 16px !important;
  }

  .landingGamePill {
    top: 16px !important;
    left: 16px !important;
  }

  .landingGameBottom {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    padding-top: 22px !important;
  }

  .landingGameBottom h3 {
    font-size: 30px !important;
  }

  .landingGameBottom p {
    font-size: 13px !important;
  }

  .landingGameLetters .l1 {
    top: 52px !important;
    left: 26px !important;
    font-size: 62px !important;
  }

  .landingGameLetters .l2 {
    top: 56px !important;
    right: 28px !important;
    font-size: 58px !important;
  }

  .landingGameLetters .l3 {
    top: 106px !important;
    left: 72px !important;
    font-size: 50px !important;
  }

  .landingWordarooIcons span:nth-child(1) {
    top: 60px !important;
    left: 22px !important;
  }

  .landingWordarooIcons span:nth-child(2) {
    top: 70px !important;
    right: 28px !important;
  }

  .landingWordarooIcons span:nth-child(3) {
    top: 126px !important;
    left: 82px !important;
  }
}


/* ===== Floating animation for landing card letters and emojis ===== */
@keyframes clickarooFloatA {
  0%   { transform: translate3d(0, 0, 0) rotate(-7deg) scale(1); }
  25%  { transform: translate3d(2px, -8px, 0) rotate(-5deg) scale(1.02); }
  50%  { transform: translate3d(-2px, -14px, 0) rotate(-8deg) scale(1.04); }
  75%  { transform: translate3d(-4px, -6px, 0) rotate(-10deg) scale(1.02); }
  100% { transform: translate3d(0, 0, 0) rotate(-7deg) scale(1); }
}

@keyframes clickarooFloatB {
  0%   { transform: translate3d(0, 0, 0) rotate(8deg) scale(1); }
  25%  { transform: translate3d(-4px, -7px, 0) rotate(10deg) scale(1.02); }
  50%  { transform: translate3d(2px, -13px, 0) rotate(7deg) scale(1.04); }
  75%  { transform: translate3d(4px, -5px, 0) rotate(11deg) scale(1.02); }
  100% { transform: translate3d(0, 0, 0) rotate(8deg) scale(1); }
}

@keyframes clickarooFloatC {
  0%   { transform: translate3d(0, 0, 0) rotate(-5deg) scale(1); }
  25%  { transform: translate3d(3px, -6px, 0) rotate(-2deg) scale(1.01); }
  50%  { transform: translate3d(-3px, -11px, 0) rotate(-7deg) scale(1.03); }
  75%  { transform: translate3d(-1px, -4px, 0) rotate(-4deg) scale(1.015); }
  100% { transform: translate3d(0, 0, 0) rotate(-5deg) scale(1); }
}

@keyframes clickarooFloatEmoji1 {
  0%   { transform: translate3d(0, 0, 0) rotate(-4deg); }
  25%  { transform: translate3d(-2px, -7px, 0) rotate(2deg); }
  50%  { transform: translate3d(1px, -12px, 0) rotate(-3deg); }
  75%  { transform: translate3d(3px, -5px, 0) rotate(3deg); }
  100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
}

@keyframes clickarooFloatEmoji2 {
  0%   { transform: translate3d(0, 0, 0) rotate(3deg); }
  25%  { transform: translate3d(3px, -8px, 0) rotate(-1deg); }
  50%  { transform: translate3d(-2px, -14px, 0) rotate(4deg); }
  75%  { transform: translate3d(-4px, -6px, 0) rotate(0deg); }
  100% { transform: translate3d(0, 0, 0) rotate(3deg); }
}

@keyframes clickarooFloatEmoji3 {
  0%   { transform: translate3d(0, 0, 0) rotate(-2deg); }
  25%  { transform: translate3d(-3px, -5px, 0) rotate(3deg); }
  50%  { transform: translate3d(2px, -10px, 0) rotate(-1deg); }
  75%  { transform: translate3d(4px, -4px, 0) rotate(2deg); }
  100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
}

.landingGameLetters span {
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.landingGameLetters .l1 {
  animation: clickarooFloatA 4.2s ease-in-out infinite;
}

.landingGameLetters .l2 {
  animation: clickarooFloatB 4.8s ease-in-out infinite 0.35s;
}

.landingGameLetters .l3 {
  animation: clickarooFloatC 4.5s ease-in-out infinite 0.18s;
}

.landingWordarooIcons span {
  will-change: transform;
}

.landingWordarooIcons span:nth-child(1) {
  animation: clickarooFloatEmoji1 4.4s ease-in-out infinite;
}

.landingWordarooIcons span:nth-child(2) {
  animation: clickarooFloatEmoji2 5.1s ease-in-out infinite 0.25s;
}

.landingWordarooIcons span:nth-child(3) {
  animation: clickarooFloatEmoji3 4.7s ease-in-out infinite 0.5s;
}


@media (prefers-reduced-motion: reduce) {
  .landingGameLetters .l1,
  .landingGameLetters .l2,
  .landingGameLetters .l3,
  .landingWordarooIcons span {
    animation: none !important;
  }
}


/* ===== Letter Pop game + launch card ===== */
.letterPopLaunchButton {
  color: #06141a;
  background: linear-gradient(135deg, #ff9bea, #72f7ff 50%, #fff36a);
  box-shadow: 0 16px 38px rgba(255, 103, 213, 0.22), inset 0 -2px 0 rgba(0,0,0,0.14);
}

.landingLetterPopIcons {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.landingLetterPopIcons span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 18px;
  font-size: 25px;
  font-weight: 1000;
  color: #fff;
  background: rgba(255,255,255,0.10);
  box-shadow: 0 14px 32px rgba(0,0,0,0.24);
  will-change: transform;
}

.landingLetterPopIcons span:nth-child(1) {
  top: 64px;
  left: 28px;
  background: linear-gradient(135deg, #ff67d5, #fff36a);
  animation: clickarooFloatEmoji1 4.6s ease-in-out infinite;
}

.landingLetterPopIcons span:nth-child(2) {
  top: 74px;
  right: 34px;
  background: linear-gradient(135deg, #72f7ff, #5ee35a);
  animation: clickarooFloatEmoji2 5.2s ease-in-out infinite 0.25s;
}

.landingLetterPopIcons span:nth-child(3) {
  top: 136px;
  left: 112px;
  background: linear-gradient(135deg, #8b5cf6, #ff67d5);
  animation: clickarooFloatEmoji3 4.8s ease-in-out infinite 0.5s;
}

body.letterpop-mode {
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
}

body.letterpop-mode .siteShell,
body.letterpop-mode #game,
body.letterpop-mode #wordaroo {
  display: none !important;
}

.letterPopGame {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,103,213,0.22), transparent 31%),
    radial-gradient(circle at 78% 18%, rgba(114,247,255,0.20), transparent 30%),
    radial-gradient(circle at 52% 86%, rgba(255,243,106,0.13), transparent 34%),
    linear-gradient(135deg, #070716 0%, #080826 48%, #030307 100%);
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

body.letterpop-mode .letterPopGame {
  display: block;
}

.letterPopTopBar {
  width: min(1100px, 100%);
  margin: 0 auto 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.letterPopBrand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 1000;
  letter-spacing: -0.04em;
  font-size: clamp(30px, 5vw, 54px);
}

.letterPopBrandIcon {
  width: clamp(44px, 8vw, 62px);
  height: clamp(44px, 8vw, 62px);
  display: grid;
  place-items: center;
  border-radius: 30% 42% 34% 44%;
  background: linear-gradient(135deg, #ff67d5, #72f7ff 55%, #fff36a);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.13), 0 18px 38px rgba(0,0,0,0.28);
}

.letterPopTopControls {
  display: flex;
  gap: 10px;
  align-items: center;
}

#letterPopBackButton,
#letterPopLanguageToggle {
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  padding: 12px 15px;
  font-weight: 950;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.letterPopStage {
  position: relative;
  width: min(1100px, 100%);
  height: calc(100svh - 112px);
  min-height: 540px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 38px;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,243,106,0.12), transparent 28%),
    radial-gradient(circle at 80% 34%, rgba(114,247,255,0.12), transparent 26%),
    rgba(255,255,255,0.05);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.10);
}

.letterPopHud {
  position: absolute;
  left: clamp(18px, 4vw, 46px);
  top: clamp(18px, 4vw, 46px);
  z-index: 5;
  width: min(410px, calc(100% - 36px));
  padding: clamp(20px, 3vw, 30px);
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(5,5,13,0.42);
  box-shadow: 0 24px 70px rgba(0,0,0,0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.letterPopKicker {
  color: rgba(255,255,255,0.58);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 12px;
  font-weight: 1000;
}

#letterPopTitle {
  margin: 8px 0 0;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.05em;
}

.letterPopTarget {
  margin-top: 12px;
  font-size: clamp(84px, 13vw, 150px);
  line-height: 0.92;
  font-weight: 1000;
  color: #fff36a;
  text-shadow: 0 0 34px rgba(255,243,106,0.46), 0 16px 46px rgba(0,0,0,0.32);
}

#letterPopMessage {
  margin: 16px 0 0;
  color: rgba(255,255,255,0.78);
  font-weight: 850;
  font-size: clamp(16px, 2.2vw, 21px);
  line-height: 1.38;
}

.letterPopScore {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  font-weight: 950;
}

.letterPopBubbles {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.letterBubble {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(74px, 8vw, 104px);
  height: clamp(74px, 8vw, 104px);
  border: 0;
  border-radius: 30% 42% 34% 44%;
  color: #11121d;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(0,0,0,0.26), inset 0 -3px 0 rgba(0,0,0,0.14), inset 0 2px 0 rgba(255,255,255,0.35);
  animation: letterBubbleFloat var(--dur, 4.4s) ease-in-out infinite;
  transform: translate3d(0,0,0) rotate(var(--rot, 0deg));
}

.letterBubble.wrong {
  animation: letterBubbleWrong 0.34s ease both;
}

.letterBubble.correct {
  animation: letterBubbleCorrect 0.54s ease both;
}

@keyframes letterBubbleFloat {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
  50%  { transform: translate3d(var(--dx, 8px), var(--dy, -16px), 0) rotate(calc(var(--rot, 0deg) + 5deg)); }
  100% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
}

@keyframes letterBubbleWrong {
  0%, 100% { transform: translateX(0) rotate(var(--rot, 0deg)); }
  25% { transform: translateX(-9px) rotate(calc(var(--rot, 0deg) - 7deg)); }
  75% { transform: translateX(9px) rotate(calc(var(--rot, 0deg) + 7deg)); }
}

@keyframes letterBubbleCorrect {
  0% { transform: scale(1) rotate(var(--rot, 0deg)); opacity: 1; }
  100% { transform: scale(1.5) rotate(calc(var(--rot, 0deg) + 18deg)); opacity: 0; }
}

.letterPopStar {
  position: fixed;
  z-index: 1300;
  pointer-events: none;
  font-size: 28px;
  animation: letterPopStarBurst 720ms ease-out forwards;
}

@keyframes letterPopStarBurst {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1.15) rotate(40deg); opacity: 0; }
}

@media (max-width: 700px) {
  .letterPopTopBar {
    align-items: flex-start;
  }

  .letterPopBrand {
    font-size: 30px;
  }

  .letterPopStage {
    min-height: 0;
    height: calc(100svh - 104px);
    border-radius: 30px;
  }

  .letterPopHud {
    left: 14px;
    right: 14px;
    top: 14px;
    width: auto;
    padding: 18px;
    border-radius: 24px;
  }

  .letterBubble {
    width: 68px;
    height: 68px;
    font-size: 38px;
  }
}


/* ===== Letter Pop performance + touch registration fix ===== */
.letterPopBrand {
  min-width: 0;
}

.letterPopLogoImage {
  display: block;
  width: clamp(180px, 24vw, 340px);
  max-width: 52vw;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.26));
}

.letterPopStage {
  touch-action: manipulation;
}

.letterPopBubbles {
  pointer-events: none;
}

.letterBubble {
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  z-index: 10;
  width: clamp(92px, 9vw, 118px) !important;
  height: clamp(92px, 9vw, 118px) !important;
  font-size: clamp(48px, 5.6vw, 68px) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.20),
    inset 0 -2px 0 rgba(0,0,0,0.13),
    inset 0 2px 0 rgba(255,255,255,0.30) !important;
  animation-duration: 5.6s !important;
}

.letterBubble:hover {
  filter: brightness(1.06);
}

.letterPopHud {
  z-index: 20;
  box-shadow: 0 12px 34px rgba(0,0,0,0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.letterPopTarget {
  text-shadow: 0 0 20px rgba(255,243,106,0.30), 0 10px 30px rgba(0,0,0,0.26);
}

.letterPopStar {
  will-change: transform, opacity;
}

@media (max-width: 700px) {
  .letterPopLogoImage {
    width: clamp(150px, 52vw, 240px);
    max-width: 58vw;
  }

  .letterPopStage {
    height: calc(100svh - 98px);
  }

  .letterBubble {
    width: 82px !important;
    height: 82px !important;
    font-size: 46px !important;
  }

  .letterPopHud {
    padding: 15px;
  }

  .letterPopTarget {
    font-size: clamp(72px, 18vw, 110px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .letterBubble {
    animation: none !important;
  }
}


/* Letter Pop language toggle flag fix */
.letterPopLangToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}

.letterPopLangToggle .flagIcon {
  flex: 0 0 auto;
}

.letterPopLangToggle .langCode {
  font-weight: 950;
  line-height: 1;
}


/* Real emoji flags for Letter Pop language toggle */
.letterPopLangToggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.letterPopLangToggle .realFlag {
  display: inline-block;
  font-size: 17px;
  line-height: 1;
}

.letterPopLangToggle .langCode {
  display: inline-block;
  font-weight: 950;
  line-height: 1;
}


/* Letter Pop real SVG flags — not emoji, not CSS background */
.letterPopLangToggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 78px;
}

.letterPopLangToggle .svgFlagSlot,
.letterPopLangToggle .svgFlagSlot svg {
  display: inline-block !important;
  width: 22px !important;
  height: 15px !important;
  flex: 0 0 22px !important;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.22);
}

.letterPopLangToggle .langCode {
  display: inline-block !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}


/* ===== SEO + AI clarity content ===== */
.seoInfoSection {
  position: relative;
  z-index: 2;
  padding: clamp(42px, 8vw, 92px) 20px;
  color: #fff;
}

.seoInfoInner {
  width: min(1040px, 100%);
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 34px;
  background: rgba(255,255,255,0.055);
  box-shadow: 0 24px 80px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.10);
  padding: clamp(24px, 5vw, 48px);
}

.seoEyebrow {
  margin: 0 0 10px;
  color: rgba(255,255,255,0.62);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 1000;
}

.seoInfoInner h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.seoInfoInner p {
  color: rgba(255,255,255,0.78);
  font-weight: 760;
  line-height: 1.55;
  max-width: 820px;
}

.seoGameGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0;
}

.seoGameGrid article,
.seoFaq details {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  background: rgba(255,255,255,0.07);
  padding: 18px;
}

.seoGameGrid h3 {
  margin: 0 0 8px;
  font-size: 21px;
}

.seoGameGrid p,
.seoFaq p {
  margin: 0;
  font-size: 15px;
}

.seoFaq {
  display: grid;
  gap: 10px;
}

.seoFaq h2 {
  margin-top: 10px;
  font-size: clamp(26px, 4vw, 42px);
}

.seoFaq summary {
  cursor: pointer;
  font-weight: 950;
  color: #fff;
}

.seoFaq details[open] summary {
  margin-bottom: 10px;
}

@media (max-width: 760px) {
  .seoGameGrid {
    grid-template-columns: 1fr;
  }
}


/* ===== SAFE mobile layout fix — CSS only, no click interception ===== */
@media (max-width: 760px) {
  /* Keyboard Playground: keep top controls separated on phones */
  body.game-mode #gameBrand {
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    max-width: 46vw;
    animation: none;
  }

  body.game-mode .gameLogoImage {
    width: clamp(126px, 42vw, 168px) !important;
    max-width: 46vw !important;
  }

  body.game-mode #gameLanguageToggle {
    left: auto;
    right: max(110px, calc(env(safe-area-inset-right) + 112px));
    top: max(14px, env(safe-area-inset-top));
    transform: none !important;
    width: 86px;
    min-width: 86px;
    padding: 9px 10px;
    font-size: 13px;
    z-index: 120;
  }

  body.game-mode #backHomeButton {
    top: max(14px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: 94px;
    min-width: 94px;
    padding: 9px 12px;
    font-size: 13px;
    z-index: 121;
  }

  body.game-mode #mobileKeyboard {
    z-index: 85;
  }

  /* Letter Pop / Letter Game: compact top area, but keep original button handlers */
  .letterPopGame {
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .letterPopTopBar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center !important;
    gap: 8px;
    margin-bottom: 10px;
  }

  .letterPopBrand {
    min-width: 0;
  }

  .letterPopLogoImage {
    width: clamp(126px, 40vw, 170px) !important;
    max-width: 44vw !important;
  }

  .letterPopTopControls {
    gap: 7px;
    justify-content: flex-end;
  }

  #letterPopBackButton,
  #letterPopLanguageToggle {
    min-height: 38px;
    padding: 9px 11px;
    font-size: 13px;
    line-height: 1;
  }

  #letterPopLanguageToggle {
    min-width: 74px;
  }

  #letterPopBackButton {
    min-width: 84px;
  }

  .letterPopStage {
    height: calc(100svh - 108px) !important;
    min-height: 0 !important;
    border-radius: 24px;
  }

  .letterPopHud {
    left: 12px;
    right: 12px;
    top: 12px;
    width: auto;
    padding: 13px;
    border-radius: 22px;
  }

  .letterPopKicker {
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  #letterPopTitle {
    font-size: clamp(22px, 7vw, 32px);
  }

  .letterPopTarget {
    margin-top: 7px;
    font-size: clamp(60px, 16vw, 92px) !important;
  }

  #letterPopMessage {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.25;
    max-width: 82%;
  }

  .letterPopScore {
    margin-top: 10px;
    min-height: 34px;
    padding: 0 12px;
    font-size: 14px;
  }

  .letterBubble {
    width: 68px !important;
    height: 68px !important;
    font-size: 36px !important;
  }
}

@media (max-width: 420px) {
  body.game-mode .gameLogoImage {
    width: clamp(118px, 38vw, 150px) !important;
    max-width: 40vw !important;
  }

  body.game-mode #gameLanguageToggle {
    width: 78px;
    min-width: 78px;
    padding: 8px 9px;
    right: 104px;
  }

  body.game-mode #backHomeButton {
    width: 86px;
    min-width: 86px;
    padding: 8px 10px;
  }

  .letterPopLogoImage {
    width: clamp(116px, 37vw, 148px) !important;
    max-width: 39vw !important;
  }

  #letterPopLanguageToggle {
    min-width: 70px;
    padding-left: 9px;
    padding-right: 9px;
  }

  #letterPopBackButton {
    min-width: 78px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .letterPopTopControls {
    gap: 6px;
  }

  .letterPopStage {
    height: calc(100svh - 104px) !important;
  }

  .letterBubble {
    width: 62px !important;
    height: 62px !important;
    font-size: 33px !important;
  }
}



/* ============================================================
   iPad reliability: WebKit can report hover:hover / pointer:fine
   on iPadOS due to system-wide mouse support (WebKit bug 209292),
   which made the touch-adaptation media queries above silently
   fail on iPad — the Playground's on-screen keyboard never
   auto-appeared, leaving toddlers with nothing to tap. The
   (any-pointer: coarse) additions above are the spec-correct fix;
   these class-based rules are the guarantee layer, driven by the
   maxTouchPoints check in the first inline script (same reliable
   detection used by install-hint.js and the V28 decoration fix).
   ============================================================ */

html.clickarooTouch body.game-mode #mobileKeyboard {
  display: block;
}

/* Neutralize the desktop "dim until hover" treatment on touch devices:
   iPad falsely matching (hover:hover)(pointer:fine) left the keyboard
   permanently at 0.72 opacity, since a finger never "hovers". */
html.clickarooTouch body.game-mode.keyboard-visible #mobileKeyboard.mobileKeyboard {
  opacity: 1;
  transform: none;
}


/* ============================================================
   V34 · Gentle motion: prefers-reduced-motion now SOFTENS
   decorative animation (ambient layers at 2x duration) and
   keeps brief functional feedback, instead of freezing the
   whole product. Auto-generated from the base rules so names
   and CSS vars always match. Placed last: overrides earlier
   animation:none kills inside the same media query.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .previewLetter { animation: previewFloat 4.8s ease-in-out infinite !important; }
  .previewMascot { animation: mascotHop 2.4s ease-in-out infinite !important; }
  #gameBrand { animation: brandFloat 4.2s ease-in-out infinite !important; }
  #gameBrandName { animation: brandGradient 4s linear infinite !important; }
  #hint { animation: hintBreathe 1.8s ease-in-out infinite !important; }
  .letter { animation: floatLetter 2.05s cubic-bezier(.16,.84,.22,1) forwards !important; }
  .spark { animation: sparkFly var(--duration) ease-out forwards !important; }
  .celebration { animation: celebrateText 2.35s cubic-bezier(.12,.9,.23,1) forwards !important; }
  .celebration .emoji { animation: emojiBounce 0.5s ease-in-out infinite alternate !important; }
  .flyingEmoji { animation: emojiFly var(--duration) cubic-bezier(.15,.78,.18,1) forwards !important; }
  .clickText { animation: clickPop 1.35s ease-out forwards, gradientMove 0.85s linear infinite !important; }
  .flashPulse { animation: flashPulse 0.42s ease-out forwards !important; }
  .pinUnlockPanel.shake { animation: pinShake 0.26s ease-in-out !important; }
  .wordarooConfetti { animation: wordarooFly 1.1s ease-out forwards !important; }
  .wordarooShake { animation: wordarooShake 0.28s ease-in-out !important; }
  .landingGameLetters .l1 { animation: clickarooFloatA 4.2s ease-in-out infinite !important; }
  .landingGameLetters .l2 { animation: clickarooFloatB 4.8s ease-in-out infinite 0.35s !important; }
  .landingGameLetters .l3 { animation: clickarooFloatC 4.5s ease-in-out infinite 0.18s !important; }
  .landingWordarooIcons span:nth-child(1) { animation: clickarooFloatEmoji1 4.4s ease-in-out infinite !important; }
  .landingWordarooIcons span:nth-child(2) { animation: clickarooFloatEmoji2 5.1s ease-in-out infinite 0.25s !important; }
  .landingWordarooIcons span:nth-child(3) { animation: clickarooFloatEmoji3 4.7s ease-in-out infinite 0.5s !important; }
  .landingLetterPopIcons span:nth-child(1) { animation: clickarooFloatEmoji1 4.6s ease-in-out infinite !important; }
  .landingLetterPopIcons span:nth-child(2) { animation: clickarooFloatEmoji2 5.2s ease-in-out infinite 0.25s !important; }
  .landingLetterPopIcons span:nth-child(3) { animation: clickarooFloatEmoji3 4.8s ease-in-out infinite 0.5s !important; }
  .letterBubble { animation: letterBubbleFloat var(--dur, 4.4s) ease-in-out infinite !important; }
  .letterBubble.wrong { animation: letterBubbleWrong 0.34s ease both !important; }
  .letterBubble.correct { animation: letterBubbleCorrect 0.54s ease both !important; }
  .letterPopStar { animation: letterPopStarBurst 720ms ease-out forwards !important; }
}