/* The same local JetBrains Mono files and fallback metrics as the original. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-cyrillic-ext.992eea2f7021.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-cyrillic.af7486955880.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-greek.3edf363dbf9d.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-vietnamese.1390e86cc282.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin-ext.7db7affbce1f.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin.1e06740a02a4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono Fallback';
  src: local('Arial');
  ascent-override: 75.79%;
  descent-override: 22.29%;
  line-gap-override: 0%;
  size-adjust: 134.59%;
}

:root {
  --font-jetbrains-mono: 'JetBrains Mono', 'JetBrains Mono Fallback';
  color-scheme: dark;
  --ink: #130d1c;
  --paper: #fff8ed;
  --pink: #ff4fa3;
  --cyan: #65f8ee;
  --lime: #dcff5d;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-jetbrains-mono), 'Courier New', monospace;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; border-radius: 0; opacity: 1; appearance: button; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--pink); color: var(--ink); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 7px; }

.landing {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  padding: 90px 24px 66px;
  background: radial-gradient(ellipse at 50% 37%, #231329 0%, #160e20 38%, #100c17 80%);
}

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

.ambient {
  background:
    radial-gradient(ellipse at 43% 33%, #ff4fa312, transparent 32%),
    radial-gradient(ellipse at 68% 36%, #65f8ee0c, transparent 30%);
  animation: ambient-drift 16s ease-in-out infinite alternate;
}

.starfield {
  opacity: .36;
  background-image: radial-gradient(#ddd3e350 .7px, transparent .7px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 50% 42%, #000 5%, transparent 67%);
}

.site-header {
  position: absolute;
  inset: 28px clamp(24px, 4vw, 64px) auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: inherit;
  font-size: 11px;
}

.site-address { display: flex; align-items: center; gap: 10px; color: #a095ad; letter-spacing: .015em; }
.site-address i { width: 5px; height: 5px; background: var(--pink); box-shadow: 0 0 12px #ff4fa380; }
.language-switch { display: flex; align-items: center; gap: 5px; }
.language-switch > span { color: #6c5d78; }
.language-switch button { min-width: 38px; min-height: 40px; padding: 8px; border: 0; background: transparent; color: #a095ad; cursor: pointer; transition: color .2s; }
.language-switch button[aria-pressed='true'] { color: var(--paper); }
.language-switch button:hover { color: var(--pink); }

.intro { width: min(100%, 680px); text-align: center; }
.intro-copy { position: relative; z-index: 3; animation: arrive .9s .12s both; }
h1 { margin: 12px 0 22px; font-size: clamp(42px, 9vw, 72px); font-weight: 600; line-height: 1.15; letter-spacing: 0; }
.name-one { color: var(--cyan); }
.introduction { max-width: 610px; min-height: 116px; margin: 0 auto; color: #b4a8c0; font-size: 15px; line-height: 1.85; text-wrap: pretty; animation: copy-in .4s both; }
.profile-link { color: var(--pink); font-weight: 500; text-decoration: underline; text-decoration-color: #ff4fa360; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.profile-link:hover { color: var(--cyan); text-decoration-color: var(--cyan); }

.game-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 290px);
  margin: 30px auto 0;
  padding: 14px 24px 16px;
  text-align: center;
  border: 1px solid #f4c9ff30;
  border-radius: 5px;
  background: linear-gradient(120deg, #ffffff05, #ffffff02);
  transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
}

.game-link-copy { display: grid; justify-items: center; gap: 10px; }
.game-link-copy small { max-width: 240px; color: #ad9dbb; font-size: 11px; line-height: 1.65; text-wrap: balance; }
.game-logo { display: block; width: 168px; max-width: 100%; height: auto; }
.game-link:hover { transform: translateY(-3px); border-color: #ff4fa37a; background: #ff4fa309; box-shadow: 0 12px 45px #ff4fa30a; }
.game-link:active { transform: translateY(0); }

/* Keep the original mascot; the nested transforms separate scale, tilt and float. */
.bunny-stage { --bunny-scale: .84; position: relative; width: min(100%, 470px); height: 320px; margin: 0 auto 20px; display: grid; place-items: center; perspective: 900px; animation: arrive 1s both; }
.bunny-glow { position: absolute; width: 280px; height: 240px; background: radial-gradient(ellipse, #ff4fa32e, transparent 70%); filter: blur(28px); animation: glow 6s ease-in-out infinite; }
.bunny-tilt { z-index: 2; width: 260px; height: 330px; transform-style: preserve-3d; transform: rotateX(var(--turn-x, 0deg)) rotateY(var(--turn-y, 0deg)); transition: transform .5s ease-out; }
.bunny-scale { transform: scale(var(--bunny-scale)); transform-origin: center; }
.pixel-bunny { position: relative; width: 260px; height: 330px; transform-style: preserve-3d; animation: bunny-float 4.6s ease-in-out infinite; filter: drop-shadow(20px 24px 0 #00000025); }
.bunny-head, .bunny-body, .ear, .bunny-foot { position: absolute; image-rendering: pixelated; }
.bunny-head { z-index: 4; width: 190px; height: 158px; left: 35px; top: 82px; background: linear-gradient(135deg, #ff7cbc 0 45%, #ff4fa3 46%); box-shadow: 18px 0 0 #c72c75, 0 18px 0 #e43e89, 18px 18px 0 #a92061; }
.bunny-head::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 18px; background: #ff9bca; clip-path: polygon(0 100%, 10% 0, 90% 0, 100% 100%); }
.ear { z-index: 2; width: 54px; height: 120px; top: 0; background: #ff66ad; box-shadow: 12px 0 0 #be296e, 0 12px 0 #df3e87; transform-origin: bottom; }
.ear span { position: absolute; inset: 16px 15px 25px; background: #7e225c; }
.ear-left { left: 55px; transform: rotate(-7deg); animation: ear-left 4.6s ease-in-out infinite; }
.ear-right { right: 54px; transform: rotate(7deg); animation: ear-right 4.6s ease-in-out infinite; }
.eye { position: absolute; z-index: 3; top: 62px; width: 19px; height: 25px; background: var(--ink); box-shadow: 0 6px 0 #4c213e; }
.eye::after { content: ''; position: absolute; width: 6px; height: 6px; background: var(--cyan); top: 3px; left: 3px; }
.eye-left { left: 43px; }
.eye-right { right: 43px; }
.nose { position: absolute; left: 86px; top: 106px; width: 22px; height: 14px; background: var(--lime); box-shadow: 6px 6px 0 #8da833; }
.bunny-body { z-index: 1; width: 150px; height: 100px; left: 55px; top: 225px; background: #e83d88; box-shadow: 18px 0 0 #96205a, 0 18px 0 #bd2e70, 18px 18px 0 #6f1744; }
.bunny-foot { z-index: 5; bottom: -3px; width: 72px; height: 40px; background: #ff66ad; box-shadow: 10px 10px 0 #9a2059; }
.foot-left { left: 32px; }
.foot-right { right: 22px; }
.bunny-shadow { position: absolute; z-index: 0; width: 178px; height: 20px; bottom: 0; background: #07030f8c; filter: blur(12px); border-radius: 50%; animation: bunny-shadow 4.6s ease-in-out infinite; }

.orbit { position: absolute; left: 50%; top: 60%; width: 420px; height: 280px; border: 1px solid #65f8ee35; border-radius: 50%; transform: translate(-50%, -50%) rotateX(68deg) rotateZ(-18deg); animation: orbit 22s linear infinite; }
.orbit i { position: absolute; width: 6px; height: 6px; background: var(--cyan); box-shadow: 0 0 16px #65f8ee80; left: 13%; top: 12%; }
.orbit-two { width: 360px; height: 320px; border-color: #ff4fa32b; animation-duration: 30s; animation-direction: reverse; }
.orbit-two i { width: 5px; height: 5px; background: var(--lime); box-shadow: 0 0 14px #dcff5d80; }
.spark { position: absolute; width: 3px; height: 3px; background: var(--pink); opacity: .4; animation: twinkle 5s ease-in-out infinite; }
.spark-one { top: 19%; left: 16%; }
.spark-two { right: 14%; top: 48%; background: var(--cyan); animation-delay: -2s; }
.spark-three { bottom: 13%; left: 22%; background: var(--lime); animation-delay: -4s; }

@keyframes arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes copy-in { from { opacity: .3; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ambient-drift { to { transform: translate(3%, -3%) scale(1.08); } }
@keyframes glow { 50% { opacity: .65; transform: scale(1.15); } }
@keyframes bunny-float { 0%, 100% { transform: rotateX(-5deg) rotateY(-8deg); } 50% { transform: translateY(-18px) rotateX(1deg) rotateY(8deg); } }
@keyframes ear-left { 45%, 55% { transform: rotate(-12deg) translateY(-5px); } }
@keyframes ear-right { 45%, 55% { transform: rotate(12deg) translateY(-7px); } }
@keyframes bunny-shadow { 50% { transform: scale(.78); opacity: .55; } }
@keyframes orbit { to { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(342deg); } }
@keyframes twinkle { 50% { opacity: .85; transform: translateY(-7px); } }

@media (max-width: 600px) {
  .landing { padding: 90px 24px 48px; }
  .site-header { inset: 19px 22px auto; font-size: 10px; }
  .bunny-stage { --bunny-scale: .74; height: 285px; margin-bottom: 8px; }
  .orbit { width: 340px; height: 245px; }
  .orbit-two { width: 290px; height: 280px; }
  h1 { margin: 12px 0 22px; font-size: clamp(38px, 9vw, 54px); }
  .introduction { max-width: 470px; min-height: 154px; font-size: 14px; line-height: 1.85; }
  .game-link { margin-top: 26px; width: 270px; }
}

@media (min-width: 601px) and (max-height: 800px) {
  .landing { padding-top: 74px; padding-bottom: 38px; }
  .bunny-stage { --bunny-scale: .73; height: 275px; margin-bottom: 0; }
  h1 { font-size: clamp(48px, 7vw, 64px); margin-bottom: 18px; }
  .introduction { min-height: 108px; font-size: 14px; }
  .game-link { margin-top: 22px; }
}

@media (max-width: 600px) and (max-height: 820px) {
  .landing { padding-top: 74px; padding-bottom: 28px; }
  .bunny-stage { height: 250px; }
}

@media (max-width: 360px) {
  .landing { padding-inline: 20px; }
  h1 { font-size: clamp(32px, 11vw, 40px); }
  .bunny-stage { --bunny-scale: .67; height: 260px; }
  .introduction { min-height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pixel-bunny { transform: rotateX(-5deg) rotateY(-8deg); }
}