@font-face {
font-family: "Loyola";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/loyola.otf") format("opentype");
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 500 900;
font-display: swap;
src: url("/assets/fonts/nunito-latin.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: "Lilita One";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/lilita-one.woff2") format("woff2");
}
@font-face {
font-family: "Fredoka";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/assets/fonts/fredoka.woff2") format("woff2");
}
@font-face {
font-family: "Baloo 2";
font-style: normal;
font-weight: 500 800;
font-display: swap;
src: url("/assets/fonts/baloo2.woff2") format("woff2");
}
:root {
--font-game: "Loyola", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
--font-text: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-menu: "Lilita One", "Loyola", "Arial Rounded MT Bold", sans-serif;
--font-card: "Fredoka", ui-rounded, "Nunito", system-ui, sans-serif;
--font-band: "Baloo 2", ui-rounded, "Nunito", system-ui, sans-serif;
--sun-top: rgb(255, 214, 71);
--sun-bottom: rgb(250, 158, 26);
--sun-edge: rgb(209, 115, 10);
--leaf-top: rgb(128, 219, 97);
--leaf-bottom: rgb(56, 168, 69);
--leaf-edge: rgb(33, 122, 46);
--sky-top: rgb(97, 173, 255);
--sky-bottom: rgb(41, 107, 230);
--sky-edge: rgb(23, 69, 173);
--bar-top: #ffa633;
--bar-mid: #ef9d33;
--bar-low: #dd7d00;
--bar-bottom: #d87a00;
--bar-outline: #dd7d00;
--box-top: #4ec3fe;
--box-bottom: #1274a5;
--box-outline: #1b6b9e;
--card-top: #ffffff;
--card-bottom: rgb(237, 245, 255);
--card-rim: #ffffff;
--card-rim-2: rgb(41, 107, 230);
--card-edge: rgb(23, 69, 173);
--strip-top: rgb(112, 186, 255);
--strip-bottom: rgb(52, 122, 235);
--title: rgb(31, 64, 128);
--text: rgb(44, 58, 92);
--muted: rgb(84, 99, 128);
--link: rgb(41, 107, 230);
--link-hover: rgb(23, 69, 173);
--line: rgba(33, 69, 128, 0.15);
--field: rgb(241, 247, 255);
--field-line: rgb(196, 216, 245);
--page-top: #4bcaf3;
--page-2: #70d5f5;
--page-3: #a5e4f9;
--page-4: #daf4fd;
--page-bottom: #ffffff;
--wide: 1120px;
--gutter: clamp(14px, 3vw, 24px);
--radius: 28px;
--ease-pop: cubic-bezier(0.3, 1.5, 0.5, 1);
color-scheme: light;
}
html[data-time="night"] {
--card-top: rgb(16, 30, 82);
--card-bottom: rgb(36, 56, 130);
--card-rim: rgb(255, 214, 71);
--card-rim-2: rgb(28, 44, 104);
--card-edge: rgb(10, 18, 50);
--title: rgb(255, 214, 71);
--text: rgb(222, 230, 255);
--muted: rgb(175, 195, 250);
--link: rgb(255, 214, 71);
--link-hover: #ffffff;
--line: rgba(160, 185, 255, 0.25);
--field: rgba(255, 255, 255, 0.08);
--field-line: rgba(160, 185, 255, 0.35);
--box-top: #3159b8;
--box-bottom: #142a6b;
--box-outline: #0d1c4d;
--page-top: #0a1430;
--page-2: #101c45;
--page-3: #17245a;
--page-4: #1f2a6b;
--page-bottom: #262e78;
color-scheme: dark;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: 20px;
}
body {
margin: 0;
min-height: 100vh;
color: var(--text);
font-family: var(--font-text);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
background:
linear-gradient(var(--page-top) 0, var(--page-2) 290px, var(--page-3) 580px, var(--page-4) 870px, var(--page-bottom) 1163px)
top / 100% 1163px no-repeat,
var(--page-bottom);
}
html[data-time="night"] body {
background:
radial-gradient(1.6px 1.6px at 8% 6%, #fff 50%, transparent 52%),
radial-gradient(1.2px 1.2px at 21% 14%, #fff 50%, transparent 52%),
radial-gradient(2px 2px at 33% 4%, #ffe9a3 50%, transparent 52%),
radial-gradient(1.2px 1.2px at 46% 11%, #fff 50%, transparent 52%),
radial-gradient(1.6px 1.6px at 58% 3%, #fff 50%, transparent 52%),
radial-gradient(1.2px 1.2px at 92% 21%, #fff 50%, transparent 52%),
radial-gradient(1.4px 1.4px at 4% 26%, #fff 50%, transparent 52%),
radial-gradient(1.2px 1.2px at 15% 36%, #fff 50%, transparent 52%),
radial-gradient(1.8px 1.8px at 97% 40%, #ffe9a3 50%, transparent 52%),
linear-gradient(var(--page-top) 0, var(--page-2) 290px, var(--page-3) 580px, var(--page-4) 870px, var(--page-bottom) 1163px)
top / 100% 1163px no-repeat,
var(--page-bottom);
}
.backdrop {
position: absolute;
inset: 0 0 auto;
z-index: -1;
height: 724px;
overflow: hidden;
pointer-events: none;
}
.backdrop__stage {
position: absolute;
top: 0;
left: 50%;
width: 1986px;
height: 724px;
margin-left: -993px;
background: image-set(url("/assets/images/art/backdrop-castle-day-1986.webp") 1x, url("/assets/images/art/backdrop-castle-day-3972.webp") 2x)
0 0 / 100% 100% no-repeat;
}
html[data-time="night"] .backdrop__stage {
background-image: image-set(url("/assets/images/art/backdrop-castle-night-1986.webp") 1x, url("/assets/images/art/backdrop-castle-night-3972.webp") 2x);
}
.backdrop__cloud {
position: absolute;
top: var(--y);
left: var(--x);
width: var(--w);
background: 0 0 / 100% 100% no-repeat;
animation: backdrop-drift var(--t) linear var(--d) infinite;
}
.backdrop__cloud--1 {
aspect-ratio: 320 / 200;
background-image: url("/assets/images/art/backdrop-cloud-1-day.webp");
}
.backdrop__cloud--2 {
aspect-ratio: 250 / 104;
background-image: url("/assets/images/art/backdrop-cloud-2-day.webp");
}
.backdrop__cloud--3 {
aspect-ratio: 190 / 84;
background-image: url("/assets/images/art/backdrop-cloud-3-day.webp");
}
html[data-time="night"] .backdrop__cloud {
opacity: 0.85;
}
html[data-time="night"] .backdrop__cloud--1 {
background-image: url("/assets/images/art/backdrop-cloud-1-night.webp");
}
html[data-time="night"] .backdrop__cloud--2 {
background-image: url("/assets/images/art/backdrop-cloud-2-night.webp");
}
html[data-time="night"] .backdrop__cloud--3 {
background-image: url("/assets/images/art/backdrop-cloud-3-night.webp");
}
@keyframes backdrop-drift {
from {
translate: calc(-100% - var(--x)) 0;
}
to {
translate: calc(100vw - var(--x)) 0;
}
}
.backdrop__flag {
position: absolute;
top: var(--y);
left: var(--x);
width: 54.5px;
height: 33.5px;
background: url("/assets/images/art/backdrop-flags-day.webp") 0 calc(var(--row) * -33.5px) / 654px 167.5px no-repeat;
animation: flag-wave var(--t) steps(12) var(--d) infinite;
}
html[data-time="night"] .backdrop__flag {
background-image: url("/assets/images/art/backdrop-flags-night.webp");
}
@keyframes flag-wave {
to {
background-position-x: -654px;
}
}
.backdrop__window {
position: absolute;
top: var(--y);
left: var(--x);
width: 40px;
height: 46px;
margin: -24px 0 0 -20px;
border-radius: 50%;
background: radial-gradient(closest-side, rgb(255, 240, 170) 18%, rgba(255, 200, 90, 0.55) 46%, rgba(255, 190, 80, 0));
opacity: 0;
animation: lights-on 0.8s ease-out var(--d) forwards, lights-glow 3.8s ease-in-out calc(var(--d) + 0.8s) infinite alternate;
}
html[data-time="night"] .backdrop__window {
width: 60px;
height: 66px;
margin: -34px 0 0 -30px;
}
img,
video,
svg {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
dl,
dd {
margin: 0;
}
:where(ul[class], ol[class]) {
list-style: none;
padding: 0;
}
h1,
h2,
h3 {
font-family: var(--font-game);
font-weight: 400;
color: var(--title);
line-height: 1.12;
}
h1 {
font-size: clamp(2rem, 1.5rem + 2vw, 2.7rem);
}
h2 {
font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.1rem);
}
h3 {
font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.45rem);
}
strong,
b {
font-weight: 800;
}
a {
color: var(--link);
font-weight: 800;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
a:hover {
color: var(--link-hover);
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
}
:focus-visible {
outline: 3px solid var(--sun-bottom);
outline-offset: 3px;
border-radius: 8px;
}
::selection {
background: var(--sun-top);
color: rgb(31, 64, 128);
}
main:focus {
outline: none;
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: 12px;
top: -100px;
z-index: 100;
padding: 10px 18px;
border-radius: 999px;
background: var(--sun-top);
color: rgb(31, 64, 128);
}
.skip-link:focus {
top: 12px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
.wrap {
width: 100%;
max-width: calc(var(--wide) + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
}
.page {
position: relative;
padding-bottom: 480px;
}
@media (max-width: 760px) {
.page {
padding-bottom: 270px;
}
}
.island {
--sea: linear-gradient(rgb(163, 228, 249), rgb(90, 205, 245));
--strip-w: 2552px;
--strip-h: 453px;
--strip-x: 348px;
--sea-h: 190px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
height: var(--strip-h);
overflow: hidden;
pointer-events: none;
}
.island > * {
position: absolute;
bottom: 0;
translate: 0 var(--rise, 0px);
}
.island__sky {
left: 0;
right: 0;
height: 100%;
background: linear-gradient(rgba(165, 228, 249, 0), rgb(196, 236, 252) 58%);
}
html[data-time="night"] .island__sky {
background: linear-gradient(rgba(38, 46, 120, 0), rgb(48, 64, 150) 58%);
}
.island__sea {
left: 0;
right: 0;
height: var(--sea-h);
background: var(--sea);
}
.island__strip {
left: calc(50% + var(--strip-x) - var(--strip-w) / 2);
width: var(--strip-w);
height: var(--strip-h);
background: image-set(url("/assets/images/art/island-still-day-2552.webp") 1x, url("/assets/images/art/island-still-day-5104.webp") 2x)
0 0 / 100% 100% no-repeat;
}
.island__life {
left: 0;
width: 100%;
height: 100%;
}
html[data-time="night"] .island {
--sea: linear-gradient(rgb(67, 108, 206), rgb(37, 97, 200));
}
html[data-time="night"] .island__strip {
background-image: image-set(url("/assets/images/art/island-still-night-2552.webp") 1x, url("/assets/images/art/island-still-night-5104.webp") 2x);
}
@media (max-width: 760px) {
.island {
--strip-w: 1400px;
--strip-h: 248.5px;
--strip-x: 191px;
--sea-h: 104px;
}
}
main {
display: grid;
gap: 26px;
padding-top: 34px;
}
:root {
--bar-h: 72px;
--bar-small: 56px;
--bar-room: 150px;
--logo-w: 230px;
}
.topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 40;
background: linear-gradient(var(--card-top) 50%, var(--card-bottom));
box-shadow: 0 4px 0 var(--sky-bottom), 0 8px 0 var(--sky-edge), 0 14px 22px rgba(13, 31, 77, 0.22);
}
html[data-time="night"] .topbar {
box-shadow: 0 3px 0 var(--card-rim), 0 7px 0 var(--card-edge), 0 14px 22px rgba(0, 0, 0, 0.35);
}
.topbar__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-rows: 100%;
align-items: center;
max-width: calc(1240px + var(--gutter) * 2);
height: var(--bar-h);
transition: height 0.3s ease;
}
.topbar.is-small .topbar__inner {
height: var(--bar-small);
}
.topnav {
display: contents;
}
.topnav__list {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-width: 0;
}
.topnav__list--start {
grid-column: 1;
grid-row: 1;
padding-right: 18px;
}
.topnav__list--end {
grid-column: 3;
grid-row: 1;
padding-left: 18px;
}
.topbar__logo {
grid-column: 2;
grid-row: 1;
align-self: start;
margin: 4px 22px 0;
transform-origin: 50% 0;
transition: scale 0.3s ease;
}
.topbar__logo img {
width: var(--logo-w);
filter: drop-shadow(0 6px 6px rgba(13, 31, 77, 0.35));
transition: translate 0.2s var(--ease-pop);
}
.topbar__logo:hover img {
translate: 0 -2px;
}
.topbar.is-small .topbar__logo {
scale: 0.48;
}
.topnav__link {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 10px 14px;
border: 0;
border-radius: 999px;
color: var(--title);
background: none;
font-family: var(--font-menu);
font-weight: 400;
font-size: 1.2rem;
line-height: 1;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: color 0.15s, background-color 0.15s;
}
.topnav__link .icon {
width: 20px;
height: 20px;
margin-right: -4px;
flex: none;
fill: currentColor;
transition: scale 0.2s;
}
.topnav__drop.is-open > .topnav__link .icon {
scale: 1 -1;
}
.topnav__link:hover,
.topnav__drop.is-open > .topnav__link {
color: var(--sky-bottom);
background: var(--field);
}
html[data-time="night"] .topnav__link:hover,
html[data-time="night"] .topnav__drop.is-open > .topnav__link {
color: #fff;
}
.topnav__drop {
position: relative;
z-index: 3;
}
.topnav__menu {
position: absolute;
top: calc(100% + 14px);
left: 50%;
z-index: 2;
display: grid;
gap: 4px;
width: 360px;
padding: 10px;
border-radius: 22px;
background: linear-gradient(var(--card-top) 45%, var(--card-bottom));
box-shadow: 0 0 0 3px var(--card-rim), 0 0 0 6px var(--card-rim-2), 0 6px 0 6px var(--card-edge), 0 18px 28px rgba(13, 31, 77, 0.3);
opacity: 0;
visibility: hidden;
translate: -50% 8px;
transition: opacity 0.15s, translate 0.2s var(--ease-pop), visibility 0s linear 0.2s;
}
.topnav__menu::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 20px;
}
.topnav__drop.is-open .topnav__menu {
opacity: 1;
visibility: visible;
translate: -50% 0;
transition: opacity 0.15s, translate 0.2s var(--ease-pop);
}
@media (hover: hover) {
.topnav__drop:hover .topnav__menu {
opacity: 1;
visibility: visible;
translate: -50% 0;
transition: opacity 0.15s, translate 0.2s var(--ease-pop);
}
.topnav__drop:hover > .topnav__link {
color: var(--sky-bottom);
background: var(--field);
}
html[data-time="night"] .topnav__drop:hover > .topnav__link {
color: #fff;
}
}
.topnav__link[aria-current="page"],
.topnav__drop:has([aria-current="page"]) > .topnav__link {
color: #fff;
text-shadow: 0 2px 0 var(--sky-edge);
background: linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--sky-top), var(--sky-bottom));
box-shadow: 0 3px 0 var(--sky-edge);
}
html[data-time="night"] .topnav__link[aria-current="page"],
html[data-time="night"] .topnav__drop:has([aria-current="page"]) > .topnav__link {
color: rgb(16, 30, 82);
text-shadow: none;
background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--sun-top), var(--sun-bottom));
box-shadow: 0 3px 0 var(--sun-edge);
}
.topnav__menu a {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 16px;
color: var(--text);
text-decoration: none;
transition: background-color 0.15s;
}
.topnav__menu a:hover,
.topnav__menu a[aria-current="page"] {
background: var(--field);
}
.topnav__bubble {
display: grid;
place-items: center;
width: 42px;
height: 42px;
flex: none;
border-radius: 50%;
color: #fff;
background: linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--sky-top), var(--sky-bottom));
box-shadow: 0 3px 0 var(--sky-edge);
}
html[data-time="night"] .topnav__bubble {
color: rgb(120, 70, 0);
background: linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--sun-top), var(--sun-bottom));
box-shadow: 0 3px 0 var(--sun-edge);
}
.topnav__bubble .icon {
width: 22px;
height: 22px;
fill: currentColor;
}
.topnav__menu b {
display: block;
color: var(--title);
font-family: var(--font-menu);
font-weight: 400;
font-size: 1.15rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.topnav__social {
display: flex;
gap: 8px;
margin-top: 4px;
padding: 10px 2px 2px;
border-top: 2px solid var(--field);
}
.topnav__social .chip-btn,
.topnav__social .chip-btn:hover {
flex: 1;
justify-content: center;
gap: 5px;
padding: 0 8px;
border-radius: 999px;
color: #fff;
font-size: 0.95rem;
background: linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--top), var(--bottom));
}
.topnav__menu small {
display: block;
margin-top: 2px;
color: var(--muted);
font-size: 0.84rem;
font-weight: 700;
line-height: 1.3;
}
.topnav__play {
min-height: 46px;
gap: 8px;
padding: 2px 20px 4px 16px;
border-radius: 14px;
font-family: var(--font-menu);
font-size: 1.15rem;
letter-spacing: 0.04em;
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18), 0 4px 0 var(--edge), 0 7px 8px rgba(0, 0, 0, 0.18);
}
.topnav__play .btn__icon {
width: 0.85em;
height: 0.85em;
}
.app-store {
display: block;
width: 46px;
height: 46px;
overflow: hidden;
border-radius: 22.5%;
box-shadow: 0 0 0 2px #fff, 0 4px 0 2px rgba(13, 31, 77, 0.22);
transition: transform 0.15s var(--ease-pop);
}
.app-store:hover {
transform: translateY(-2px);
}
.app-store img {
width: 100%;
height: 100%;
}
.round-button {
position: relative;
display: grid;
place-items: center;
width: 44px;
height: 44px;
flex: none;
border: 0;
border-radius: 50%;
color: #fff;
background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 50%), linear-gradient(var(--sky-top), var(--sky-bottom));
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 4px 0 var(--sky-edge), 0 6px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.15s var(--ease-pop), box-shadow 0.15s;
}
.round-button:hover {
transform: translateY(-2px);
}
.round-button:active {
transform: translateY(3px);
box-shadow: 0 1px 0 var(--sky-edge);
}
.round-button .icon {
width: 22px;
height: 22px;
fill: currentColor;
}
.round-button .sun {
display: none;
}
html[data-time="night"] .round-button.time-toggle {
color: rgb(120, 70, 0);
background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 50%), linear-gradient(var(--sun-top), var(--sun-bottom));
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 4px 0 var(--sun-edge), 0 6px 8px rgba(0, 0, 0, 0.2);
}
html[data-time="night"] .round-button .sun {
display: block;
}
html[data-time="night"] .round-button .moon {
display: none;
}
.menu-button {
display: none;
grid-column: 1;
grid-row: 1;
justify-self: start;
}
.page {
padding-top: var(--bar-room);
}
.page-home .page,
.page:has(.scene-head) {
padding-top: var(--bar-h);
}
.page:has(.scene-head) main {
gap: 0;
padding-top: 0;
}
@media (max-width: 1240px) {
:root {
--logo-w: 200px;
--bar-room: 140px;
}
.topnav__link {
padding-inline: 9px;
font-size: 1.02rem;
}
.topnav__play {
min-height: 42px;
padding-inline: 12px 14px;
font-size: 1rem;
}
}
@media (max-width: 1140px) {
:root {
--logo-w: 176px;
}
.topbar__logo {
margin-inline: 10px;
}
.topnav__list--start {
padding-right: 8px;
}
.topnav__list--end {
padding-left: 8px;
}
.topnav__link {
padding-inline: 7px;
font-size: 0.95rem;
}
.topnav__play {
padding-inline: 12px;
font-size: 0.95rem;
}
.topnav__play .btn__icon {
display: none;
}
}
@media (max-width: 1023px) {
:root {
--bar-h: 64px;
--bar-small: 54px;
--bar-room: 122px;
--logo-w: 170px;
}
.menu-button {
display: grid;
}
.topnav__list--start,
.topnav__drop {
display: none;
}
.topnav__list--end {
justify-content: flex-end;
gap: 12px;
padding-left: 0;
}
.topbar__logo {
margin-inline: 12px;
}
.topbar.is-small .topbar__logo {
scale: 0.58;
}
}
@media (max-width: 760px) {
:root {
--bar-h: 58px;
--bar-small: 50px;
--bar-room: 96px;
--logo-w: 132px;
}
.topbar {
box-shadow: 0 3px 0 var(--sky-bottom), 0 6px 0 var(--sky-edge), 0 10px 16px rgba(13, 31, 77, 0.2);
}
.topbar .menu-button {
width: 42px;
height: 42px;
}
.app-store {
width: 42px;
height: 42px;
}
.topbar.is-small .topbar__logo {
scale: 0.66;
}
}
.menu-sheet {
position: fixed;
inset: 0;
z-index: 60;
overflow-y: auto;
padding: 16px var(--gutter) 40px;
background: linear-gradient(var(--page-top), var(--page-3));
}
.menu-sheet[hidden] {
display: none;
}
.menu-sheet__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.menu-sheet__top img {
width: 150px;
}
.menu-sheet__links {
display: grid;
gap: 10px;
}
.menu-sheet__links a {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px 14px;
border-radius: 18px;
color: #fff;
font-family: var(--font-game);
font-weight: 400;
font-size: 1.5rem;
text-decoration: none;
text-shadow: 0 2px 0 var(--sky-edge);
background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--sky-top), var(--sky-bottom));
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3), 0 4px 0 var(--sky-edge);
}
.menu-sheet__links .icon {
width: 24px;
height: 24px;
fill: currentColor;
}
.menu-sheet__label {
margin: 8px 6px -2px;
color: var(--title);
font-family: var(--font-menu);
font-size: 1rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.menu-sheet__links .menu-sheet__play {
text-shadow: 0 2px 0 var(--leaf-edge);
background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--leaf-top), var(--leaf-bottom));
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3), 0 4px 0 var(--leaf-edge);
}
.menu-sheet__links .menu-sheet__app {
margin-top: 8px;
font-family: var(--font-text);
font-weight: 800;
font-size: 1.15rem;
text-shadow: none;
background: #111;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3), 0 4px 0 rgba(0, 0, 0, 0.3);
}
.menu-sheet__small {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin: 22px 4px;
}
.menu-sheet__small a {
color: var(--title);
}
.menu-sheet__time {
display: flex;
align-items: center;
gap: 12px;
margin: 0 4px 22px;
font-weight: 800;
color: var(--title);
}
body.menu-open {
overflow: hidden;
}
.footer {
position: relative;
color: #fff;
background: linear-gradient(var(--strip-bottom), var(--sky-edge) 70%, rgb(16, 46, 120));
}
html[data-time="night"] .footer {
background: linear-gradient(rgb(22, 38, 98), rgb(8, 14, 40));
}
.footer::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: calc(100% - 1px);
height: 26px;
pointer-events: none;
background:
radial-gradient(circle 22px at 50% 100%, var(--strip-bottom) 96%, transparent) -18px 100% / 74px 26px repeat-x,
radial-gradient(circle 14px at 50% 100%, var(--strip-bottom) 95%, transparent) 10px 100% / 46px 26px repeat-x;
}
html[data-time="night"] .footer::before {
background:
radial-gradient(circle 22px at 50% 100%, rgb(22, 38, 98) 96%, transparent) -18px 100% / 74px 26px repeat-x,
radial-gradient(circle 14px at 50% 100%, rgb(22, 38, 98) 95%, transparent) 10px 100% / 46px 26px repeat-x;
}
.footer__inner {
display: grid;
gap: 26px;
padding-block: 26px 22px;
}
@media (min-width: 900px) {
.footer__inner {
grid-template-columns: 150px minmax(0, 1fr) 230px;
align-items: start;
}
}
.footer__logo img {
width: 150px;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}
.footer__links {
display: grid;
gap: 18px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
.footer__links {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.footer__links h2 {
margin-bottom: 6px;
color: #fff;
font-size: 1.2rem;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
.footer__links ul,
.footer__legal ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer__links ul {
display: grid;
gap: 4px;
}
.footer__links a,
.footer__legal a {
color: #fff;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
opacity: 0.92;
}
.footer__links a:hover,
.footer__legal a:hover {
color: var(--sun-top);
text-decoration: underline;
opacity: 1;
}
.footer__tools {
display: grid;
gap: 12px;
}
.footer__tools .chip-btn {
justify-content: flex-start;
height: 44px;
font-size: 1.1rem;
}
.footer__tools .chip-btn .icon {
width: 20px;
height: 20px;
fill: currentColor;
}
.footer__time {
display: flex;
align-items: center;
gap: 10px;
font-weight: 800;
}
.footer__legal {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px 20px;
padding-top: 14px;
border-top: 2px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.85);
font-size: 0.85rem;
font-weight: 700;
}
.footer__legal ul {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
}
@media (max-width: 760px) {
.only-desktop {
display: none !important;
}
}
@media (min-width: 761px) {
.only-phone {
display: none !important;
}
}
.btn {
--top: var(--sun-top);
--bottom: var(--sun-bottom);
--edge: var(--sun-edge);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 56px;
padding: 4px 28px 6px;
border: 0;
border-radius: 18px;
color: #fff;
font-family: var(--font-game);
font-weight: 400;
font-size: 1.45rem;
line-height: 1;
letter-spacing: 0.01em;
text-transform: uppercase;
text-decoration: none;
text-shadow: 0 1.5px 1px rgba(0, 0, 0, 0.3);
white-space: nowrap;
background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 50%), linear-gradient(var(--top), var(--bottom));
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18), 0 5px 0 var(--edge), 0 9px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.15s var(--ease-pop), box-shadow 0.15s, filter 0.15s;
}
.btn:hover {
color: #fff;
filter: brightness(1.06);
transform: translateY(-2px);
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18), 0 7px 0 var(--edge), 0 12px 10px rgba(0, 0, 0, 0.2);
}
.btn:active {
transform: translateY(4px);
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18), 0 1px 0 var(--edge), 0 2px 3px rgba(0, 0, 0, 0.2);
}
.btn--green {
--top: var(--leaf-top);
--bottom: var(--leaf-bottom);
--edge: var(--leaf-edge);
}
.btn--blue {
--top: var(--sky-top);
--bottom: var(--sky-bottom);
--edge: var(--sky-edge);
}
.btn--big {
min-height: 66px;
padding-inline: 34px;
font-size: 1.7rem;
border-radius: 20px;
}
.btn__icon {
width: 1em;
height: 1em;
flex: none;
fill: currentColor;
}
.btn__tag {
padding: 3px 8px 2px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: var(--sun-edge);
font-family: var(--font-text);
font-weight: 900;
font-size: 0.55em;
letter-spacing: 0.06em;
text-shadow: none;
}
.btn--blue .btn__tag {
color: var(--sky-edge);
}
.chip-btn {
--top: var(--sky-top);
--bottom: var(--sky-bottom);
--edge: var(--sky-edge);
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 16px;
border: 0;
border-radius: 999px;
color: #fff;
font-family: var(--font-game);
font-weight: 400;
font-size: 1.05rem;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
white-space: nowrap;
background: linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--top), var(--bottom));
box-shadow: 0 3px 0 var(--edge), 0 4px 6px rgba(0, 0, 0, 0.18);
transition: transform 0.15s var(--ease-pop);
}
.chip-btn:hover {
color: #fff;
transform: translateY(-1px) scale(1.04);
}
.chip-btn:active {
transform: translateY(2px);
}
.chip-btn--sun {
--top: var(--sun-top);
--bottom: var(--sun-bottom);
--edge: var(--sun-edge);
}
.chip-btn--green {
--top: var(--leaf-top);
--bottom: var(--leaf-bottom);
--edge: var(--leaf-edge);
}
.chip-btn .btn__icon {
width: 0.95em;
height: 0.95em;
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: 14px 16px;
align-items: center;
}
.btn-row--center {
justify-content: center;
}
@keyframes twinkle {
from {
opacity: 0.25;
}
to {
opacity: 1;
}
}
.say {
position: relative;
display: inline-block;
padding: 7px 14px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.95);
color: #1a1a1a;
font-family: var(--font-text);
font-weight: 700;
font-size: 0.95rem;
line-height: 1.3;
box-shadow: 0 3px 8px rgba(13, 31, 77, 0.2);
}
.say::after {
content: "";
position: absolute;
top: calc(100% - 1px);
left: 12px;
border: 7px solid transparent;
border-top-color: rgba(255, 255, 255, 0.95);
border-left-color: rgba(255, 255, 255, 0.95);
}
.level-badge {
--edge: rgb(23, 69, 173);
position: relative;
display: grid;
flex: none;
place-items: center;
width: var(--size, 64px);
aspect-ratio: 1;
}
.level-badge > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.3));
}
.level-badge > b {
position: relative;
color: #fff;
font-family: var(--font-game);
font-weight: 400;
font-size: calc(var(--size, 64px) * 0.46);
line-height: 1;
-webkit-text-stroke: calc(var(--size, 64px) * 0.08) var(--edge);
paint-order: stroke fill;
}
.level-badge--copper { --edge: rgb(110, 48, 18); }
.level-badge--silver { --edge: rgb(78, 88, 110); }
.level-badge--gold { --edge: rgb(150, 85, 10); }
.level-badge--diamond { --edge: rgb(62, 66, 170); }
.clip {
position: relative;
overflow: hidden;
border-radius: 20px;
background: #0d1f4d;
box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--sky-bottom), 0 7px 0 7px var(--sky-edge), 0 14px 24px 4px rgba(13, 31, 77, 0.25);
margin: 7px 7px 14px;
aspect-ratio: 16 / 9;
}
html[data-time="night"] .clip {
box-shadow: 0 0 0 3px rgb(255, 214, 71), 0 0 0 6px rgb(28, 44, 104), 0 7px 0 6px rgb(10, 18, 50), 0 14px 24px 4px rgba(0, 0, 0, 0.35);
}
.clip > img,
.clip > video {
width: 100%;
height: 100%;
object-fit: cover;
}
.clip-toggle {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 2;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
color: #fff;
background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 50%), linear-gradient(var(--sky-top), var(--sky-bottom));
box-shadow: 0 3px 0 var(--sky-edge);
}
.clip-toggle svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.dots {
display: grid;
gap: 8px;
}
.dots li {
position: relative;
padding-left: 22px;
}
.dots li::before {
content: "";
position: absolute;
left: 4px;
top: 0.55em;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--sky-bottom);
box-shadow: 0 2px 0 var(--sky-edge);
}
html[data-time="night"] .dots li::before {
background: rgb(255, 214, 71);
box-shadow: 0 2px 0 rgb(150, 85, 10);
}
.muted {
color: var(--muted);
}
.perks {
display: grid;
gap: 14px;
}
.perk {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
gap: 12px;
align-items: start;
}
.perk__icon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 14px;
color: #fff;
background: linear-gradient(var(--top, rgb(66, 128, 240)), var(--bottom, rgb(41, 107, 230)));
box-shadow: 0 3px 0 var(--edge, var(--sky-edge));
}
.perk__icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.perk--sun .perk__icon { --top: var(--sun-top); --bottom: var(--sun-bottom); --edge: var(--sun-edge); }
.perk--green .perk__icon { --top: var(--leaf-top); --bottom: var(--leaf-bottom); --edge: var(--leaf-edge); }
.perk b {
display: block;
color: var(--title);
font-family: var(--font-game);
font-weight: 400;
font-size: 1.2rem;
line-height: 1.2;
}
.perk div span {
display: block;
color: var(--muted);
font-size: 0.98rem;
line-height: 1.5;
}
.faq {
display: grid;
gap: 10px;
}
.faq details {
border-radius: 16px;
background: var(--field);
border: 2px solid var(--field-line);
}
.faq summary {
position: relative;
padding: 13px 52px 13px 16px;
color: var(--title);
font-family: var(--font-game);
font-size: 1.15rem;
line-height: 1.3;
cursor: pointer;
list-style: none;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary::after {
content: "+";
position: absolute;
right: 12px;
top: 50%;
display: grid;
place-items: center;
width: 28px;
height: 28px;
margin-top: -14px;
border-radius: 50%;
color: #fff;
font-family: var(--font-text);
font-weight: 900;
font-size: 1.2rem;
line-height: 1;
background: linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--sky-top), var(--sky-bottom));
box-shadow: 0 2px 0 var(--sky-edge);
transition: transform 0.25s var(--ease-pop);
}
.faq details[open] summary::after {
transform: rotate(45deg);
}
.faq__answer {
display: grid;
gap: 10px;
padding: 0 16px 16px;
color: var(--text);
}
.form {
display: grid;
gap: 16px;
}
.field {
display: grid;
gap: 6px;
}
.field label {
color: var(--title);
font-family: var(--font-game);
font-size: 1.1rem;
}
.field__hint {
color: var(--muted);
font-size: 0.9rem;
}
.field input,
.field select,
.field textarea {
width: 100%;
min-height: 50px;
padding: 11px 14px;
border: 2px solid var(--field-line);
border-radius: 14px;
background: var(--field);
color: var(--text);
font-weight: 700;
}
.field textarea {
min-height: 150px;
resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--sky-bottom);
box-shadow: 0 0 0 4px rgba(41, 107, 230, 0.2);
}
html[data-time="night"] .field input:focus,
html[data-time="night"] .field select:focus,
html[data-time="night"] .field textarea:focus {
border-color: rgb(255, 214, 71);
box-shadow: 0 0 0 4px rgba(255, 214, 71, 0.22);
}
.form__trap {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.form__status {
min-height: 1.4em;
font-weight: 800;
}
.form__status.is-ok {
color: var(--leaf-bottom);
}
.form__status.is-error {
color: rgb(220, 60, 40);
}
.table-wrap {
overflow-x: auto;
border-radius: 16px;
border: 2px solid var(--field-line);
}
.table {
width: 100%;
min-width: 520px;
border-collapse: collapse;
}
.table th,
.table td {
padding: 11px 14px;
text-align: left;
vertical-align: top;
border-bottom: 2px solid var(--line);
}
.table th {
color: var(--title);
font-family: var(--font-game);
font-weight: 400;
background: var(--field);
}
.table tr:last-child td {
border-bottom: 0;
}
.trailer-dialog {
width: min(1000px, 94vw);
max-width: none;
padding: 0;
border: 0;
background: transparent;
overflow: visible;
}
.trailer-dialog::backdrop {
background: rgba(5, 10, 30, 0.75);
}
.trailer-dialog__frame {
position: relative;
}
.trailer-dialog__video {
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
.trailer-dialog__close {
position: absolute;
top: -18px;
right: -12px;
z-index: 3;
}
.news-dialog {
width: min(760px, calc(100vw - 32px));
max-width: none;
max-height: calc(100dvh - 48px);
padding: 0;
border: 0;
overflow: visible;
background: transparent;
}
.news-dialog::backdrop {
background: rgba(5, 10, 30, 0.72);
}
.news-dialog[open] {
animation: pop-in 0.3s var(--ease-pop);
}
.news-dialog__card {
max-height: calc(100dvh - 48px);
overflow: auto;
border-radius: 28px;
background: linear-gradient(var(--card-top), var(--card-bottom));
box-shadow: 0 0 0 4px var(--card-rim), 0 0 0 7px var(--card-rim-2), 0 8px 0 7px var(--card-edge), 0 24px 40px rgba(0, 0, 0, 0.35);
}
.news-dialog .news-post {
display: block;
padding: 0;
border: 0;
}
.news-dialog .news-post__picture {
width: 100%;
max-width: none;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 24px 24px 0 0;
}
.news-dialog .news-post__picture img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
.news-dialog .news-post__words {
display: grid;
gap: 12px;
padding: 24px clamp(20px, 4vw, 36px) 32px;
}
.news-dialog h2 {
color: var(--title);
font-family: var(--font-band);
font-weight: 800;
font-size: clamp(1.7rem, 4vw, 2.3rem);
line-height: 1.1;
}
.news-dialog .news-post__words p {
color: var(--text);
font-size: 1.1rem;
line-height: 1.65;
}
.news-dialog__close {
position: absolute;
top: -16px;
right: -12px;
z-index: 3;
}
.news-mini {
cursor: pointer;
}
.clip--phone {
aspect-ratio: 1280 / 590;
border-radius: 30px;
}
.btn .icon,
.chip-btn .icon {
width: 1em;
height: 1em;
flex: none;
fill: currentColor;
}
.self-start {
justify-self: start;
}
.bleed {
width: 100vw;
margin-left: calc(50% - 50vw);
}
.page-home main {
padding-top: 0;
}
.keyart {
position: relative;
}
.keyart__scene {
position: relative;
width: min(1240px, calc(100% - var(--gutter) * 2 - 14px));
height: clamp(380px, 46vw, 640px);
margin: 38px auto 0;
overflow: hidden;
isolation: isolate;
border-radius: var(--radius);
box-shadow: 0 0 0 4px var(--card-rim), 0 0 0 7px var(--card-rim-2), 0 8px 0 7px var(--card-edge),
0 18px 30px 6px rgba(13, 31, 77, 0.28);
}
.keyart__art {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
background: linear-gradient(rgb(149, 204, 254), rgb(160, 208, 254) 8%, rgb(198, 228, 255) 13%);
}
html[data-time="night"] .keyart__art {
background: linear-gradient(rgb(12, 20, 58), rgb(26, 40, 108) 8%, rgb(52, 76, 160) 14%);
}
html[data-time="night"] .keyart__art::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(1.2px 1.2px at 3.0% 1.5%, #fff 50%, transparent 52%),
radial-gradient(1.6px 1.6px at 64.8% 9.9%, #fff 50%, transparent 52%),
radial-gradient(2px 2px at 26.6% 7.3%, #ffe9a3 50%, transparent 52%),
radial-gradient(1.2px 1.2px at 88.4% 4.8%, #fff 50%, transparent 52%),
radial-gradient(1.6px 1.6px at 50.2% 2.2%, #fff 50%, transparent 52%),
radial-gradient(2px 2px at 12.0% 10.6%, #fff 50%, transparent 52%),
radial-gradient(1.2px 1.2px at 73.8% 8.0%, #fff 50%, transparent 52%),
radial-gradient(1.6px 1.6px at 35.6% 5.4%, #ffe9a3 50%, transparent 52%),
radial-gradient(2px 2px at 97.4% 2.9%, #fff 50%, transparent 52%),
radial-gradient(1.2px 1.2px at 59.2% 11.3%, #fff 50%, transparent 52%),
radial-gradient(1.6px 1.6px at 21.0% 8.7%, #fff 50%, transparent 52%),
radial-gradient(2px 2px at 82.8% 6.1%, #fff 50%, transparent 52%),
radial-gradient(1.2px 1.2px at 44.6% 3.6%, #ffe9a3 50%, transparent 52%),
radial-gradient(1.6px 1.6px at 6.4% 12.0%, #fff 50%, transparent 52%),
radial-gradient(2px 2px at 68.2% 9.4%, #fff 50%, transparent 52%),
radial-gradient(1.2px 1.2px at 30.1% 6.8%, #fff 50%, transparent 52%);
animation: twinkle 3s ease-in-out infinite alternate;
}
.keyart__clouds {
position: absolute;
top: 0;
left: 0;
height: 21%;
aspect-ratio: 24;
background: url("/assets/images/hero/sky-clouds-far-1680.webp") 0 0 / 33.3333% 100% repeat-x;
animation: clouds-by 150s linear infinite;
}
.keyart__clouds--near {
top: 2%;
height: 25%;
background-image: url("/assets/images/hero/sky-clouds-near-1680.webp");
animation-duration: 95s;
animation-delay: -40s;
}
html[data-time="night"] .keyart__clouds {
opacity: 0.22;
}
@keyframes clouds-by {
to {
translate: -33.3333% 0;
}
}
.keyart__hills,
.keyart__front,
.keyart__lights {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 18%;
}
html[data-time="night"] :is(.keyart__hills, .keyart__front) {
filter: brightness(0.5) saturate(1.2) hue-rotate(-8deg);
}
.keyart__lights {
opacity: 0;
animation: lights-on 1s ease-out 1.2s forwards, lights-glow 4.6s ease-in-out 2.2s infinite alternate;
}
.keyart__lights--2 {
animation-delay: 1.8s, 2.8s;
animation-duration: 1s, 5.8s;
}
.keyart__lights--3 {
animation-delay: 2.4s, 3.4s;
animation-duration: 1s, 3.9s;
}
@keyframes lights-on {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes lights-glow {
from {
opacity: 1;
}
to {
opacity: 0.45;
}
}
.keyart__scene::after {
content: "";
position: absolute;
left: 15%;
right: 15%;
bottom: -10%;
height: 60%;
z-index: -1;
background: radial-gradient(closest-side, rgba(255, 250, 220, 0.55), rgba(255, 250, 220, 0));
}
.cast-shot {
position: absolute;
inset: 0;
pointer-events: none;
transition: opacity 0.9s ease;
}
.cast-shot img {
position: absolute;
left: var(--x);
bottom: var(--y);
height: var(--h);
width: auto;
max-width: none;
transform: translateX(-50%);
filter: drop-shadow(0 14px 10px rgba(30, 50, 20, 0.35));
animation: cast-in 0.8s calc(0.15s + var(--i, 0) * 0.08s) var(--ease-pop) backwards;
}
.cast-shot .flip {
transform: translateX(-50%) scaleX(-1);
}
.cast-shot .fly {
animation: cast-in 0.8s calc(0.15s + var(--i, 0) * 0.08s) var(--ease-pop) backwards, hover 3.4s ease-in-out infinite alternate;
}
@keyframes cast-in {
from {
opacity: 0;
translate: 0 40px;
}
}
@keyframes hover {
to {
translate: 0 -14px;
}
}
.keyart__video {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
visibility: hidden;
transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.keyart.is-video .keyart__video {
opacity: 1;
visibility: visible;
transition: opacity 0.9s ease;
}
.keyart.is-video :is(.cast-shot, .keyart__trailer) {
opacity: 0;
pointer-events: none;
}
.keyart__toggle {
right: 16px;
bottom: 16px;
z-index: 4;
}
.keyart__trailer {
position: absolute;
right: clamp(14px, 3vw, 40px);
top: clamp(14px, 2.5vw, 30px);
z-index: 3;
display: grid;
gap: 6px;
width: clamp(170px, 18vw, 260px);
padding: 0;
border: 0;
background: none;
color: #fff;
font-family: var(--font-game);
font-size: 1.1rem;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
transition: transform 0.2s var(--ease-pop), opacity 0.6s ease;
}
.keyart__trailer:hover {
transform: scale(1.04);
}
.keyart__trailer .clip {
margin: 0;
border-radius: 16px;
}
.keyart__trailer .tile-play {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
.keyart__trailer-label {
position: relative;
justify-self: center;
margin-top: -20px;
}
.keyart__lawn {
position: relative;
z-index: 2;
padding: 0 var(--gutter) 18px;
text-align: center;
}
.keyart__play {
position: relative;
top: -30px;
min-height: 82px;
padding: 6px 54px 9px;
border-radius: 26px;
font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem);
box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.35), 0 7px 0 var(--edge), 0 14px 18px rgba(0, 0, 0, 0.3);
}
.keyart__play:hover {
box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.35), 0 9px 0 var(--edge), 0 18px 22px rgba(0, 0, 0, 0.3);
}
.keyart__play .btn__icon {
width: 0.8em;
height: 0.8em;
}
.badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: -10px;
}
.badge-store {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 52px;
padding: 6px 18px 6px 14px;
border: 2px solid rgba(255, 255, 255, 0.55);
border-radius: 12px;
background: #121212;
color: #fff;
text-align: left;
text-decoration: none;
line-height: 1.1;
transition: transform 0.15s var(--ease-pop);
}
.badge-store:hover {
color: #fff;
transform: translateY(-2px);
}
.badge-store .icon {
width: 28px;
height: 28px;
fill: currentColor;
flex: none;
}
.badge-store small {
display: block;
font-size: 0.7rem;
font-weight: 700;
opacity: 0.85;
}
.badge-store b {
display: block;
font-size: 1.1rem;
font-weight: 800;
}
.keyart__note {
margin-top: 14px;
color: var(--title);
font-weight: 800;
}
.poster {
position: relative;
overflow: hidden;
isolation: isolate;
min-height: clamp(360px, 36vw, 470px);
display: grid;
align-items: center;
border-radius: 30px;
margin: 7px 7px 15px;
box-shadow: 0 0 0 5px #fff6d6, 0 0 0 9px var(--sun-bottom), 0 9px 0 9px var(--sun-edge), 0 20px 34px 8px rgba(13, 31, 77, 0.3);
}
.poster__bg {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 25%;
}
.poster::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, rgba(150, 30, 10, 0.82) 0%, rgba(200, 70, 20, 0.5) 38%, rgba(255, 140, 40, 0) 65%),
linear-gradient(rgba(255, 120, 40, 0.25), rgba(255, 120, 40, 0));
}
.poster__art {
position: absolute;
inset: 0;
pointer-events: none;
}
.poster__art img {
position: absolute;
left: var(--x);
bottom: var(--y);
width: var(--w);
transform: translateX(-50%);
filter: drop-shadow(0 10px 10px rgba(60, 20, 0, 0.4));
}
.poster__art .ball {
animation: fling 2.6s ease-in-out infinite alternate;
}
@keyframes fling {
from {
translate: 0 0;
rotate: -8deg;
}
to {
translate: -14px -18px;
rotate: 10deg;
}
}
.poster__words {
position: relative;
display: grid;
gap: 14px;
justify-items: start;
max-width: 470px;
padding: 34px clamp(24px, 4vw, 54px);
}
.poster__title {
color: #fff;
font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem);
line-height: 0.95;
transform-origin: left center;
text-shadow:
-3px -3px 0 rgb(150, 30, 10), 3px -3px 0 rgb(150, 30, 10), -3px 3px 0 rgb(150, 30, 10), 3px 3px 0 rgb(150, 30, 10),
0 -3px 0 rgb(150, 30, 10), 0 3px 0 rgb(150, 30, 10), -3px 0 0 rgb(150, 30, 10), 3px 0 0 rgb(150, 30, 10),
0 8px 0 rgb(110, 20, 5), 0 12px 18px rgba(0, 0, 0, 0.35);
}
.poster__text {
color: #fff;
font-weight: 800;
font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
line-height: 1.45;
text-shadow: 0 2px 4px rgba(60, 10, 0, 0.6);
}
.ribbon {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px 6px;
border-radius: 10px;
color: #fff;
font-family: var(--font-game);
font-size: 1.05rem;
letter-spacing: 0.04em;
text-transform: uppercase;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--leaf-top), var(--leaf-bottom));
box-shadow: 0 3px 0 var(--leaf-edge), 0 5px 8px rgba(0, 0, 0, 0.2);
}
.ribbon .icon {
width: 18px;
height: 18px;
fill: currentColor;
}
.ribbon--gold {
color: rgb(110, 55, 0);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--sun-top), var(--sun-bottom));
box-shadow: 0 3px 0 var(--sun-edge), 0 5px 8px rgba(0, 0, 0, 0.2);
}
@media (max-width: 760px) {
.poster {
align-items: start;
min-height: 560px;
}
.poster::before {
background: linear-gradient(rgba(150, 30, 10, 0.85) 0%, rgba(200, 70, 20, 0.45) 45%, rgba(255, 140, 40, 0) 70%);
}
.poster__art img {
width: calc(var(--w) * 1.7);
left: calc(var(--x) * 1.3 - 30%);
}
}
.play-dot {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 50%), linear-gradient(var(--sun-top), var(--sun-bottom));
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.5), 0 4px 0 var(--sun-edge), 0 8px 12px rgba(0, 0, 0, 0.3);
}
.play-dot .icon {
width: 28px;
height: 28px;
margin-left: 3px;
fill: #fff;
}
.video-card .tile-play {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
.demo {
position: relative;
overflow: hidden;
border-radius: 30px;
margin: 7px 7px 15px;
background: linear-gradient(var(--card-top), var(--card-bottom));
box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--card-rim-2), 0 9px 0 9px var(--card-edge), 0 20px 34px 8px rgba(13, 31, 77, 0.3);
}
html[data-time="night"] .demo {
box-shadow: 0 0 0 4px rgb(255, 214, 71), 0 0 0 8px rgb(28, 44, 104), 0 9px 0 8px rgb(10, 18, 50), 0 20px 34px 8px rgba(0, 0, 0, 0.4);
}
.demo__head {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px 26px;
padding: 16px clamp(18px, 3vw, 28px) 16px;
background: linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--strip-top), var(--strip-bottom));
}
html[data-time="night"] .demo__head {
background: linear-gradient(rgb(34, 52, 120), rgb(22, 34, 86));
}
.demo__words {
display: grid;
gap: 6px;
justify-items: start;
}
.demo__title {
color: #fff;
font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem);
line-height: 1;
transform-origin: left center;
text-shadow:
-3px -3px 0 var(--sky-edge), 3px -3px 0 var(--sky-edge), -3px 3px 0 var(--sky-edge), 3px 3px 0 var(--sky-edge),
0 -3px 0 var(--sky-edge), 0 3px 0 var(--sky-edge), -3px 0 0 var(--sky-edge), 3px 0 0 var(--sky-edge),
0 7px 0 rgb(13, 40, 110), 0 10px 14px rgba(0, 0, 0, 0.3);
}
.demo__text {
max-width: 62ch;
color: #fff;
font-weight: 800;
text-shadow: 0 1px 2px rgba(10, 30, 90, 0.5);
}
.ribbon--blue {
background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--sun-top), var(--sun-bottom));
box-shadow: 0 3px 0 var(--sun-edge), 0 5px 8px rgba(0, 0, 0, 0.2);
}
.demo__cta {
flex: none;
}
.demo__stage {
position: relative;
aspect-ratio: 2 / 1;
background: rgb(110, 196, 188);
border-block: 4px solid var(--card-rim-2);
overflow: hidden;
}
html[data-time="night"] .demo__stage {
border-color: rgb(28, 44, 104);
}
.demo__canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
touch-action: manipulation;
cursor: default;
}
.demo.is-playing .demo__canvas {
cursor: pointer;
}
.demo__canvas:focus-visible {
outline: 4px solid var(--sun-top);
outline-offset: -4px;
}
.demo__start {
position: absolute;
inset: 0;
display: grid;
place-content: center;
justify-items: center;
gap: 10px;
padding: 0;
border: 0;
background: radial-gradient(ellipse at center, rgba(13, 31, 77, 0.05) 30%, rgba(13, 31, 77, 0.45));
cursor: pointer;
color: #fff;
}
.demo__play {
display: grid;
place-items: center;
width: clamp(84px, 11vw, 124px);
aspect-ratio: 1;
border-radius: 50%;
background: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 50%), linear-gradient(var(--leaf-top), var(--leaf-bottom));
box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.45), 0 0 0 6px #fff, 0 7px 0 6px var(--leaf-edge), 0 16px 24px 6px rgba(0, 0, 0, 0.3);
transition: transform 0.2s var(--ease-pop);
animation: demo-beat 2.4s ease-in-out infinite;
}
.demo__play .icon {
width: 48%;
height: 48%;
margin-left: 6%;
fill: #fff;
filter: drop-shadow(0 2px 0 var(--leaf-edge));
}
.demo__start:hover .demo__play {
transform: scale(1.08);
}
@keyframes demo-beat {
0%, 70%, 100% {
scale: 1;
}
80% {
scale: 1.07;
}
90% {
scale: 0.98;
}
}
.demo__start-words {
display: grid;
justify-items: center;
margin-top: 14px;
text-shadow: 0 2px 4px rgba(10, 30, 90, 0.6);
}
.demo__start-words b {
font-family: var(--font-game);
font-weight: normal;
font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
line-height: 1;
text-shadow:
-2px -2px 0 var(--leaf-edge), 2px -2px 0 var(--leaf-edge), -2px 2px 0 var(--leaf-edge), 2px 2px 0 var(--leaf-edge),
0 5px 0 rgb(20, 80, 30), 0 8px 12px rgba(0, 0, 0, 0.35);
}
.demo__start-words span {
font-weight: 800;
font-size: 1.05rem;
}
.demo__start[hidden],
.demo__actions[hidden] {
display: none;
}
.demo:not(.is-ready) .demo__start {
cursor: progress;
}
.demo:not(.is-ready) .demo__play {
animation: none;
filter: saturate(0.6);
}
.demo.is-broken .demo__start {
display: none;
}
.demo__hint {
position: absolute;
top: 14px;
left: 50%;
z-index: 2;
max-width: calc(100% - 28px);
padding: 9px 18px 10px;
border-radius: 999px;
color: var(--title);
font-family: var(--font-game);
font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.2rem);
text-align: center;
background: #fff;
box-shadow: 0 0 0 3px var(--sky-top), 0 4px 0 3px var(--sky-edge), 0 10px 16px rgba(0, 0, 0, 0.25);
pointer-events: none;
opacity: 0;
translate: -50% -14px;
transition: opacity 0.3s, translate 0.4s var(--ease-pop);
}
.demo__hint.is-on {
opacity: 1;
translate: -50% 0;
}
.demo__actions {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 2;
display: flex;
gap: 8px;
}
.demo-act {
--top: var(--sky-top);
--bottom: var(--sky-bottom);
--edge: var(--sky-edge);
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 46px;
padding: 0 16px 2px;
border: 0;
border-radius: 999px;
color: #fff;
font-family: var(--font-game);
font-size: 1.02rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--top), var(--bottom));
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 0 0 3px #fff, 0 5px 0 3px var(--edge), 0 9px 12px rgba(0, 0, 0, 0.25);
cursor: pointer;
transition: transform 0.15s var(--ease-pop);
}
.demo-act:hover {
transform: translateY(-2px);
}
.demo-act:active {
transform: translateY(2px);
}
.demo-act .icon {
width: 22px;
height: 22px;
fill: currentColor;
flex: none;
}
.demo-act--fire {
--top: rgb(255, 160, 60);
--bottom: rgb(235, 80, 30);
--edge: rgb(170, 40, 10);
}
.demo__emotes {
position: absolute;
right: 12px;
bottom: 74px;
z-index: 3;
display: grid;
grid-template-columns: repeat(3, 52px);
gap: 6px;
padding: 10px;
border-radius: 20px;
background: #fff;
box-shadow: 0 0 0 3px var(--sky-top), 0 5px 0 3px var(--sky-edge), 0 12px 18px rgba(0, 0, 0, 0.25);
animation: pop-in 0.2s var(--ease-pop) both;
}
.demo__emotes[hidden] {
display: none;
}
.demo-emote {
display: grid;
place-items: center;
width: 52px;
height: 52px;
padding: 0;
border: 0;
border-radius: 14px;
background: var(--field);
cursor: pointer;
transition: transform 0.15s var(--ease-pop);
}
.demo-emote:hover {
transform: scale(1.1);
}
.demo-emote img {
width: auto;
height: 42px;
}
.demo__tray {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 12px 22px;
padding: 14px clamp(14px, 2.4vw, 24px) 18px;
transition: opacity 0.3s;
}
.demo__side {
display: grid;
gap: 10px;
}
.demo:not(.is-ready) .demo__tray {
opacity: 0.55;
pointer-events: none;
}
.demo__tray-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.demo__who {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--title);
font-family: var(--font-game);
font-size: 1.25rem;
}
.demo__who::before {
content: "";
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--dot, rgb(235, 40, 40));
box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--line);
}
.demo__who[data-color="blue"] { --dot: rgb(40, 160, 240); }
.demo__who[data-color="green"] { --dot: rgb(110, 200, 40); }
.demo__who[data-color="pink"] { --dot: rgb(240, 110, 200); }
.demo__who[data-color="orange"] { --dot: rgb(250, 140, 20); }
.demo__who[data-color="yellow"] { --dot: rgb(250, 215, 40); }
.demo__who[data-color="purple"] { --dot: rgb(160, 60, 220); }
.demo__who[data-color="aqua"] { --dot: rgb(40, 220, 220); }
.demo__who[data-color="black"] { --dot: rgb(70, 70, 80); }
.demo__tabs {
display: grid;
grid-template-columns: repeat(4, 64px);
gap: 8px;
}
.demo-tab {
display: grid;
justify-items: center;
gap: 2px;
padding: 8px 4px 6px;
border: 0;
border-radius: 16px;
color: var(--muted);
font-family: var(--font-game);
font-size: 0.86rem;
background: var(--field);
cursor: pointer;
transition: transform 0.15s var(--ease-pop), background 0.15s;
}
.demo-tab img {
width: 42px;
height: 27px;
object-fit: contain;
}
.demo-tab:hover {
transform: translateY(-2px);
}
.demo-tab[aria-pressed="true"] {
color: var(--title);
background: #fff;
box-shadow: 0 0 0 3px var(--sky-top), 0 4px 0 3px var(--sky-edge);
}
.demo__items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
gap: 10px;
align-content: start;
padding-top: 4px;
}
.demo-item {
position: relative;
display: grid;
place-items: center;
height: 84px;
padding: 6px;
border: 0;
border-radius: 18px;
background: #fff;
box-shadow: 0 0 0 2px rgb(214, 228, 248), 0 4px 0 2px rgb(196, 214, 242);
cursor: grab;
touch-action: manipulation;
transition: transform 0.15s var(--ease-pop), box-shadow 0.15s;
}
.demo-item:hover {
transform: translateY(-3px);
box-shadow: 0 0 0 2px rgb(151, 196, 250), 0 6px 0 2px rgb(196, 214, 242);
}
.demo-item img {
max-width: 64px;
max-height: 54px;
object-fit: contain;
pointer-events: none;
user-select: none;
}
.demo-item[aria-pressed="true"] {
box-shadow: 0 0 0 3px var(--sky-bottom), 0 4px 0 3px var(--sky-edge);
}
.demo-item__tick {
position: absolute;
top: -7px;
right: -7px;
display: none;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--sky-bottom) no-repeat center / 16px
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
box-shadow: 0 0 0 3px #fff;
animation: pop-in 0.2s var(--ease-pop) both;
}
.demo-item[aria-pressed="true"] .demo-item__tick {
display: block;
}
.demo-ghost {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 72px;
margin: -36px 0 0 -36px;
pointer-events: none;
filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.3));
}
@keyframes pop-in {
from {
opacity: 0;
scale: 0.6;
}
}
.features {
--card-w: clamp(290px, 36vw, 500px);
--card-gap: 40px;
position: relative;
width: 100vw;
margin: 50px 0 0 calc(50% - 50vw);
}
.features__row {
display: grid;
grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr));
gap: 26px;
margin: 0;
padding: 8px 8px 22px;
list-style: none;
}
.features[data-carousel] .features__row {
grid-template-columns: none;
grid-auto-columns: var(--card-w);
grid-auto-flow: column;
gap: var(--card-gap);
overflow-x: auto;
padding: 14px max(18px, calc(50vw - var(--card-w) / 2)) 26px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.features[data-carousel] .features__row::-webkit-scrollbar {
display: none;
}
.features[data-carousel] .feature {
scroll-snap-align: center;
}
.features.is-live {
overflow: hidden;
}
.features.is-live .features__row {
grid-auto-columns: auto;
grid-template-columns: var(--card-w);
justify-content: center;
overflow: visible;
padding: 14px 0 26px;
touch-action: pan-y;
user-select: none;
}
.features.is-live .feature {
grid-area: 1 / 1;
scale: 0.93;
translate: calc(var(--o, 0) * (100% + var(--card-gap))) 0;
transition: translate 0.65s cubic-bezier(0.25, 0.9, 0.3, 1), opacity 0.65s ease, scale 0.65s ease;
}
.features.is-live .feature.is-centre {
z-index: 2;
scale: 1;
}
.features.is-live .feature.is-outer {
opacity: 0.45;
}
.features.is-live .feature:not(.is-centre) {
cursor: pointer;
}
.features.is-live .feature.is-jump {
transition: none;
}
.features.is-live .feature.is-far {
opacity: 0;
}
.features__arrow {
position: absolute;
top: calc(14px + var(--card-w) * 0.28);
z-index: 5;
}
.features__arrow--prev {
left: calc(50% - var(--card-w) / 2 - 70px);
}
.features__arrow--next {
right: calc(50% - var(--card-w) / 2 - 70px);
}
.features__arrow .icon {
width: 26px;
height: 26px;
}
.features__dots {
display: flex;
justify-content: center;
gap: 8px;
padding-bottom: 6px;
}
.features__dots button {
width: 12px;
height: 12px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(41, 107, 230, 0.25);
cursor: pointer;
transition: width 0.3s ease, background 0.3s ease;
}
html[data-time="night"] .features__dots button {
background: rgba(255, 255, 255, 0.3);
}
.features__dots button[aria-current="true"] {
width: 34px;
background: var(--sky-bottom);
}
html[data-time="night"] .features__dots button[aria-current="true"] {
background: var(--sun-top);
}
@media (max-width: 760px) {
.features {
--card-w: min(80vw, 380px);
--card-gap: 18px;
}
.features__arrow {
display: none;
}
}
.feature {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 22px 24px;
border-radius: 24px;
color: var(--text);
text-align: center;
background: linear-gradient(var(--card-top), var(--card-bottom));
box-shadow: 0 0 0 3px var(--card-rim), 0 0 0 6px var(--f-bottom), 0 8px 0 6px var(--f-edge), 0 18px 26px 4px rgba(13, 31, 77, 0.16);
}
.features--few .feature {
padding-inline: 14px;
transition: translate 0.2s var(--ease-pop);
}
.features--few .feature:hover {
translate: 0 -4px;
}
.feature--sky {
--f-top: var(--sky-top);
--f-bottom: var(--sky-bottom);
--f-edge: var(--sky-edge);
}
.feature--leaf {
--f-top: var(--leaf-top);
--f-bottom: var(--leaf-bottom);
--f-edge: var(--leaf-edge);
}
.feature--grape {
--f-top: rgb(186, 128, 250);
--f-bottom: rgb(130, 68, 220);
--f-edge: rgb(88, 38, 166);
}
.feature--sea {
--f-top: rgb(64, 214, 206);
--f-bottom: rgb(16, 160, 170);
--f-edge: rgb(6, 104, 116);
}
.feature--night {
--f-top: rgb(76, 96, 200);
--f-bottom: rgb(36, 52, 140);
--f-edge: rgb(16, 24, 76);
}
.feature--sun {
--f-top: var(--sun-top);
--f-bottom: var(--sun-bottom);
--f-edge: var(--sun-edge);
}
.feature--cherry {
--f-top: rgb(255, 120, 112);
--f-bottom: rgb(226, 58, 66);
--f-edge: rgb(156, 24, 38);
}
.feature--pumpkin {
--f-top: rgb(255, 160, 70);
--f-bottom: rgb(236, 104, 18);
--f-edge: rgb(166, 62, 6);
}
.feature__window--chat .say {
position: absolute;
top: var(--y);
left: var(--x);
z-index: 1;
translate: -50% -100%;
font-size: 0.82rem;
white-space: nowrap;
}
.feature--rose {
--f-top: rgb(255, 140, 198);
--f-bottom: rgb(228, 66, 150);
--f-edge: rgb(160, 28, 98);
}
.feature__window {
position: relative;
display: block;
align-self: stretch;
aspect-ratio: 16 / 9;
margin: 0 -22px;
overflow: hidden;
border-radius: 21px 21px 0 0;
background: var(--f-bottom);
}
.features--few .feature__window {
margin-inline: -14px;
}
.feature__window > img,
.feature__clip {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.feature__clip {
opacity: 0;
transition: opacity 0.4s ease;
}
.feature.is-playing .feature__clip {
opacity: 1;
}
.feature__window--icon {
display: grid;
place-items: center;
aspect-ratio: 1 / 0.62;
color: #fff;
background: radial-gradient(80% 70% at 50% 30%, rgba(255, 255, 255, 0.35), transparent 70%), linear-gradient(var(--f-top), var(--f-bottom));
}
.feature__window--icon .icon {
width: 46%;
max-width: 76px;
height: auto;
aspect-ratio: 1;
fill: currentColor;
filter: drop-shadow(0 3px 0 var(--f-edge));
transition: scale 0.3s var(--ease-pop);
}
.feature:hover .feature__window--icon .icon {
scale: 1.1;
}
.feature__window--levels {
container-type: inline-size;
}
.feature__window--levels > img {
object-position: 50% 30%;
}
.feature__badges {
position: absolute;
inset: auto 0 10% 0;
display: flex;
justify-content: center;
gap: 3cqi;
}
.feature__badges .level-badge {
--size: 15cqi;
}
.feature__window--beach > img {
object-position: 30% 62%;
}
.feature__window > .feature__dragon {
inset: auto auto 4% var(--x);
width: auto;
height: var(--h);
translate: -50% 0;
filter: drop-shadow(0 8px 6px rgba(30, 50, 20, 0.35));
}
.feature__window--phone {
background: radial-gradient(90% 80% at 50% 30%, rgba(255, 255, 255, 0.5), transparent 70%), linear-gradient(var(--page-top), var(--page-3));
}
.feature .feature__phone {
position: absolute;
top: 50%;
left: 50%;
display: grid;
width: 80%;
translate: -50% -50%;
}
.feature .feature__phone > img,
.feature .feature__phone > .feature__clip {
position: static;
grid-area: 1 / 1;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 9% / 20%;
}
.feature__ribbon {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: -16px;
padding: 5px 13px 6px;
border-radius: 10px;
color: #fff;
font-family: var(--font-game);
font-size: 0.95rem;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--f-top), var(--f-bottom));
box-shadow: 0 3px 0 var(--f-edge), 0 5px 8px rgba(0, 0, 0, 0.2);
}
.feature__ribbon .icon {
width: 17px;
height: 17px;
fill: currentColor;
}
.feature__title {
margin: 14px 0 8px;
color: var(--title);
font-family: var(--font-card);
font-weight: 700;
font-size: clamp(1.4rem, 2vw, 1.75rem);
line-height: 1.1;
}
.features--few .feature__title {
font-size: 1.36rem;
}
.feature__text {
max-width: 400px;
margin: 0 0 20px;
color: var(--text);
font-size: 1.02rem;
line-height: 1.5;
}
.features--few .feature__text {
font-size: 0.94rem;
}
.feature .feature__more {
--top: var(--f-top);
--bottom: var(--f-bottom);
--edge: var(--f-edge);
position: static;
min-height: 46px;
margin-top: auto;
padding: 3px 22px 5px;
border-radius: 15px;
font-size: 1.1rem;
white-space: normal;
}
.feature__more::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: 24px;
}
@media (max-width: 1199px) {
.features--few .features__row {
grid-template-columns: none;
grid-auto-columns: 236px;
grid-auto-flow: column;
overflow-x: auto;
scrollbar-width: none;
}
}
.btn--small {
min-height: 48px;
padding: 0 20px 3px;
font-size: 1.15rem;
gap: 8px;
}
.btn--small .icon {
width: 22px;
height: 22px;
}
.ribbon--sun {
color: rgb(110, 55, 0);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--sun-top), var(--sun-bottom));
box-shadow: 0 3px 0 var(--sun-edge), 0 5px 8px rgba(0, 0, 0, 0.2);
}
.phone-frame {
position: relative;
display: block;
aspect-ratio: 1280 / 590;
padding: 3.2%;
border-radius: 13% / 28%;
background: linear-gradient(135deg, rgb(70, 78, 96), rgb(20, 24, 34));
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25), 0 18px 30px rgba(10, 20, 60, 0.4);
}
.phone-frame > video,
.phone-frame > img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 9% / 20%;
}
.lower {
--band: rgb(28, 44, 110);
--band-2: rgb(14, 24, 66);
position: relative;
display: grid;
gap: 26px;
width: 100vw;
margin: 40px 0 26px calc(50% - 50vw);
padding: 46px max(var(--gutter), calc(50vw - 560px));
color: rgb(220, 228, 255);
background: radial-gradient(1.6px 1.6px at 6% 20%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 14% 70%, #fff 50%, transparent 52%), radial-gradient(2px 2px at 23% 35%, #ffe9a3 50%, transparent 52%), radial-gradient(1.2px 1.2px at 31% 82%, #fff 50%, transparent 52%), radial-gradient(1.6px 1.6px at 42% 18%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 55% 60%, #fff 50%, transparent 52%), radial-gradient(2px 2px at 63% 28%, #ffe9a3 50%, transparent 52%), radial-gradient(1.2px 1.2px at 71% 76%, #fff 50%, transparent 52%), radial-gradient(1.6px 1.6px at 82% 40%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 91% 14%, #fff 50%, transparent 52%), radial-gradient(1.8px 1.8px at 97% 66%, #ffe9a3 50%, transparent 52%),
linear-gradient(var(--band), var(--band-2));
}
.lower::before,
.lower::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 26px;
}
.lower::before {
bottom: calc(100% - 1px);
background: radial-gradient(circle 22px at 50% 100%, var(--band) 96%, transparent) -18px 100% / 74px 26px repeat-x,
radial-gradient(circle 14px at 50% 100%, var(--band) 95%, transparent) 10px 100% / 46px 26px repeat-x;
}
.lower::after {
top: calc(100% - 1px);
background: radial-gradient(circle 22px at 50% 0%, var(--band-2) 96%, transparent) -18px 0% / 74px 26px repeat-x,
radial-gradient(circle 14px at 50% 0%, var(--band-2) 95%, transparent) 10px 0% / 46px 26px repeat-x;
}
.whats-new {
display: grid;
gap: 16px;
}
.whats-new__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.whats-new .section-title {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--sun-top);
font-family: var(--font-band);
font-weight: 800;
font-size: 2.4rem;
text-shadow: 0 3px 0 rgb(120, 60, 0);
}
.whats-new .section-title .icon {
width: 34px;
height: 34px;
fill: var(--sun-top);
}
.whats-new__head .chip-btn {
--top: var(--sun-top);
--bottom: var(--sun-bottom);
--edge: var(--sun-edge);
}
.whats-new .news-mini {
padding: 8px 8px 16px;
border-radius: 24px;
background: rgb(36, 56, 130);
box-shadow: 0 0 0 2px rgba(255, 214, 71, 0.55), 0 6px 0 rgba(0, 0, 0, 0.3);
transition: transform 0.2s var(--ease-pop), box-shadow 0.2s;
}
.whats-new .news-mini:hover {
transform: translateY(-4px);
box-shadow: 0 0 0 2px var(--sun-top), 0 8px 0 rgba(0, 0, 0, 0.3), 0 0 26px rgba(255, 200, 80, 0.25);
}
.whats-new .news-mini h3 {
color: #fff;
font-family: var(--font-band);
font-weight: 800;
}
.whats-new .news-mini :is(p, .news-mini__meta) {
color: rgb(200, 212, 245);
}
.whats-new .news-mini__picture {
margin: 0 0 4px;
box-shadow: none;
}
.whats-new .news-mini > :not(.news-mini__picture) {
padding-inline: 8px;
}
.parents-strip {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 18px;
margin: 26px 7px 10px;
padding: 14px 24px 14px 130px;
border-radius: 999px;
color: rgb(220, 228, 255);
text-decoration: none;
background: rgba(255, 255, 255, 0.06);
box-shadow: inset 0 0 0 2px rgba(255, 214, 71, 0.55);
transition: transform 0.2s var(--ease-pop);
}
.parents-strip:hover {
transform: translateY(-3px);
}
.parents-strip__art {
position: absolute;
left: 18px;
bottom: 0;
width: 100px;
}
.parents-strip__words {
grid-column: 2;
display: grid;
gap: 2px;
}
.parents-strip__words b {
color: var(--sun-top);
font-family: var(--font-band);
font-weight: 800;
font-size: 1.4rem;
}
@media (max-width: 760px) {
.demo__head {
grid-template-columns: minmax(0, 1fr);
}
.demo__stage {
aspect-ratio: 1;
}
.demo-act__label {
display: none;
}
.demo-act {
width: 46px;
padding: 0;
justify-content: center;
}
.demo__tray {
grid-template-columns: minmax(0, 1fr);
}
.demo__tabs {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.demo__items {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.demo-item {
height: 68px;
}
.whats-new .section-title {
font-size: 1.9rem;
}
.parents-strip {
grid-template-columns: 1fr;
border-radius: 30px;
padding: 20px 20px 20px 110px;
gap: 10px;
}
.parents-strip__art {
width: 84px;
left: 14px;
}
.parents-strip__words {
grid-column: 1;
}
.parents-strip .chip-btn {
justify-self: start;
}
}
.page-home .page {
padding-bottom: clamp(250px, 30vw, 420px);
}
.see-you {
display: grid;
justify-items: center;
gap: 16px;
margin-top: 18px;
text-align: center;
}
.see-you__title {
color: var(--sun-top);
font-family: var(--font-band);
font-weight: 800;
font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem);
line-height: 1;
text-shadow: 0 3px 0 rgb(120, 60, 0), 0 0 24px rgba(255, 200, 80, 0.35);
}
.see-you__play {
min-width: 260px;
justify-content: center;
}
.see-you__social {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 4px;
}
.see-you__social .chip-btn {
min-width: 140px;
height: 44px;
padding: 0 20px;
justify-content: center;
gap: 8px;
font-size: 1.15rem;
}
.chip-btn--discord {
--top: rgb(122, 134, 255);
--bottom: rgb(88, 101, 242);
--edge: rgb(58, 66, 176);
}
.chip-btn--x {
--top: rgb(64, 64, 64);
--bottom: rgb(0, 0, 0);
--edge: rgb(90, 90, 90);
}
.chip-btn--facebook {
--top: rgb(66, 146, 255);
--bottom: rgb(8, 102, 255);
--edge: rgb(0, 66, 180);
}
@media (max-width: 760px) {
.keyart__scene {
margin-top: 26px;
}
.keyart__toggle {
top: 12px;
bottom: auto;
right: 12px;
}
.keyart__play {
min-height: 64px;
padding: 4px 30px 7px;
font-size: 1.6rem;
}
.keyart__hills,
.keyart__front,
.keyart__lights {
object-position: 50% 0;
}
.cast-shot .back,
.keyart__trailer,
.hide-sm {
display: none;
}
.cast-shot img {
height: calc(var(--h) * 0.9);
}
}
.section-title {
margin-bottom: 4px;
}
.cast {
display: grid;
gap: 26px;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
@media (min-width: 1100px) {
.cast {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.pal {
--c1: rgb(97, 173, 255);
--c2: rgb(41, 107, 230);
display: grid;
grid-template-rows: auto auto 1fr auto;
gap: 8px;
padding-bottom: 22px;
overflow: hidden;
border-radius: 26px;
background: #fff;
box-shadow: 0 0 0 2px rgb(214, 228, 248), 0 8px 0 rgb(196, 214, 242), 0 18px 28px rgba(13, 31, 77, 0.12);
scroll-margin-top: calc(var(--bar-small) + 24px);
}
html[data-time="night"] .pal {
background: rgb(28, 44, 104);
box-shadow: 0 0 0 2px rgba(255, 214, 71, 0.45), 0 8px 0 rgba(0, 0, 0, 0.3);
}
.pal__card {
position: relative;
overflow: hidden;
aspect-ratio: 388 / 400;
margin-bottom: 6px;
background: radial-gradient(110% 70% at 50% 22%, rgba(255, 255, 255, 0.45), transparent 60%), linear-gradient(var(--c1), var(--c2));
}
.pal__card img {
position: absolute;
left: 10%;
bottom: 0;
width: 80%;
filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.18));
transition: transform 0.3s var(--ease-pop);
}
.pal:hover .pal__card img {
transform: translateY(-6px);
}
.pal__name {
position: absolute;
left: 16px;
bottom: 12px;
z-index: 2;
color: #fff;
font-family: var(--font-card);
font-weight: 700;
font-size: 1.9rem;
line-height: 1;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}
.pal__role {
justify-self: start;
margin: 0 20px;
padding: 3px 12px 4px;
border-radius: 999px;
color: #fff;
font-family: var(--font-card);
font-weight: 600;
font-size: 0.95rem;
background: var(--c2);
}
.pal p {
margin: 0 20px;
color: var(--text);
font-size: 0.98rem;
line-height: 1.5;
}
.pal .say {
justify-self: start;
margin: 6px 20px 0;
}
.pal--greeny { --c1: #73d14d; --c2: #2e9940; }
.pal--bigly { --c1: #ffb84d; --c2: #cc7326; }
.pal--daren { --c1: #59b3ff; --c2: #3359d9; }
.pal--elmer { --c1: #f2b338; --c2: #409e99; }
.pal--bibby { --c1: #bf8cff; --c2: #804ce0; }
.pal--lola { --c1: #ff9ec7; --c2: #f26699; }
.pal--spinno { --c1: #66d9d9; --c2: #4d408c; }
.pal--bugz { --c1: #ffb333; --c2: #6bb338; }
.news-list {
display: grid;
gap: 18px;
}
.news-post {
display: grid;
gap: 16px;
padding-bottom: 18px;
border-bottom: 2px dashed var(--line);
scroll-margin-top: 20px;
}
.news-post:last-child {
border-bottom: 0;
padding-bottom: 0;
}
@media (min-width: 760px) {
.news-post {
grid-template-columns: 280px minmax(0, 1fr);
}
}
.news-post__picture {
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: 16px;
background: linear-gradient(var(--sky-top), var(--sky-bottom));
box-shadow: 0 3px 8px rgba(13, 31, 77, 0.18);
}
.news-post__picture img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-post__words {
display: grid;
gap: 8px;
align-content: start;
}
.news-post__meta {
display: flex;
gap: 8px;
align-items: center;
color: var(--muted);
font-size: 0.85rem;
font-weight: 800;
}
.downloads {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.downloads--wide {
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.download {
display: grid;
gap: 6px;
align-content: start;
text-align: center;
}
.download__picture {
display: block;
overflow: hidden;
border-radius: 16px;
background: #fff;
box-shadow: 0 0 0 3px #fff, 0 5px 0 3px rgba(13, 31, 77, 0.2), 0 8px 14px rgba(13, 31, 77, 0.18);
margin: 3px 3px 8px;
transition: transform 0.25s var(--ease-pop);
}
.download__picture:hover {
transform: translateY(-4px);
}
.download__picture img {
width: 100%;
}
.download b {
color: var(--title);
font-family: var(--font-game);
font-weight: 400;
font-size: 1.15rem;
}
.years {
display: grid;
gap: 14px;
}
.year {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: 14px;
align-items: start;
}
.year__badge {
display: grid;
place-items: center;
height: 40px;
border-radius: 999px;
color: #fff;
font-family: var(--font-game);
font-size: 1.25rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
background: linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--sun-top), var(--sun-bottom));
box-shadow: 0 3px 0 var(--sun-edge);
}
.year b {
display: block;
color: var(--title);
font-family: var(--font-game);
font-weight: 400;
font-size: 1.2rem;
}
.team {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.team li {
display: grid;
justify-items: center;
gap: 2px;
text-align: center;
}
.team img {
width: 96px;
}
.team b {
color: var(--title);
font-family: var(--font-game);
font-weight: 400;
font-size: 1.1rem;
}
.team span {
color: var(--muted);
font-size: 0.85rem;
}
.rulebook {
display: grid;
gap: 10px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) {
.rulebook {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.rulebook img {
width: 100%;
border-radius: 10px;
box-shadow: 0 3px 8px rgba(13, 31, 77, 0.2);
}
.side-links {
display: grid;
gap: 6px;
}
.legal {
display: grid;
gap: 12px;
max-width: 72ch;
}
.legal h2 {
margin-top: 14px;
font-size: 1.5rem;
}
.legal h3 {
margin-top: 6px;
font-size: 1.2rem;
}
.legal ul {
display: grid;
gap: 6px;
padding-left: 1.3em;
}
.phrases {
display: flex;
flex-wrap: wrap;
gap: 18px 10px;
padding-bottom: 8px;
}
.year p {
color: var(--text);
line-height: 1.45;
}
.news-row {
display: grid;
gap: 18px;
}
@media (min-width: 760px) {
.news-row {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.news-mini {
display: grid;
gap: 8px;
align-content: start;
color: var(--text);
text-decoration: none;
}
.news-mini__picture {
display: block;
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: 16px;
background: linear-gradient(var(--sky-top), var(--sky-bottom));
box-shadow: 0 0 0 3px #fff, 0 4px 0 3px rgba(13, 31, 77, 0.18);
margin: 3px;
}
.news-mini__picture img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.news-mini:hover .news-mini__picture img {
transform: scale(1.05);
}
.news-mini__meta {
display: flex;
gap: 8px;
align-items: center;
color: var(--muted);
font-size: 0.85rem;
font-weight: 800;
}
.news-mini h3 {
font-size: 1.3rem;
}
.news-mini p {
color: var(--muted);
font-size: 0.95rem;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tag {
padding: 2px 9px;
border-radius: 999px;
color: #fff;
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.05em;
text-transform: uppercase;
background: var(--tag, var(--sun-bottom));
}
.tag--update { --tag: rgb(41, 107, 230); }
.tag--event { --tag: rgb(175, 82, 222); }
.tag--news { --tag: rgb(56, 168, 69); }
.tag--tip { --tag: rgb(250, 158, 26); }
.video-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.video-card {
display: grid;
gap: 4px;
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--title);
font-family: var(--font-game);
font-size: 1.1rem;
text-align: left;
}
.video-card .clip {
margin: 7px 7px 10px;
}
.video-card--big {
grid-column: 1 / -1;
}
@media (min-width: 900px) {
.video-card--big {
grid-column: span 2;
grid-row: span 2;
}
}
.video-card b {
font-weight: 400;
}
.stickers {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.sticker-dl {
display: grid;
justify-items: center;
gap: 4px;
padding: 10px 6px 8px;
border-radius: 18px;
background: var(--field);
border: 2px solid var(--field-line);
color: var(--title);
font-family: var(--font-game);
font-weight: 400;
font-size: 0.95rem;
text-decoration: none;
transition: transform 0.2s var(--ease-pop);
}
.sticker-dl:hover {
transform: translateY(-4px);
}
.sticker-dl img {
width: 64px;
height: 64px;
object-fit: contain;
}
.banner-codes {
display: grid;
gap: 18px;
}
.banner-code {
display: grid;
gap: 8px;
margin: 0;
justify-items: start;
}
.banner-code img {
max-width: 100%;
height: auto;
}
.banner-code textarea {
width: 100%;
max-width: 728px;
padding: 10px 12px;
border: 2px solid var(--field-line);
border-radius: 12px;
background: var(--field);
color: var(--text);
font: 600 0.85rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
resize: none;
}
button.tile,
button.video-card {
cursor: pointer;
text-align: left;
font: inherit;
}
.tile {
text-align: left;
}
.is-disabled {
opacity: 0.75;
cursor: default;
pointer-events: none;
}
.is-soon {
cursor: default;
pointer-events: none;
}
.center {
text-align: center;
}
.perk__icon .icon {
width: 24px;
height: 24px;
fill: currentColor;
}
.scene-head {
--strip-top: var(--sky-top);
--strip-bottom: var(--sky-bottom);
--strip-edge: var(--sky-edge);
display: grid;
justify-items: center;
width: 100vw;
margin-left: calc(50% - 50vw);
padding-top: 38px;
text-align: center;
}
.scene-head--sun {
--strip-top: var(--sun-top);
--strip-bottom: var(--sun-bottom);
--strip-edge: var(--sun-edge);
}
.scene-head--leaf {
--strip-top: var(--leaf-top);
--strip-bottom: var(--leaf-bottom);
--strip-edge: var(--leaf-edge);
}
.scene-head__frame {
position: relative;
width: min(1240px, calc(100% - var(--gutter) * 2 - 14px));
height: clamp(290px, 31vw, 430px);
overflow: hidden;
isolation: isolate;
border-radius: var(--radius);
background: var(--sky-bottom);
box-shadow: 0 0 0 4px var(--card-rim), 0 0 0 7px var(--card-rim-2), 0 8px 0 7px var(--card-edge),
0 18px 30px 6px rgba(13, 31, 77, 0.28);
}
.scene-head--short .scene-head__frame {
height: clamp(200px, 20vw, 280px);
}
.scene-head__room {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--room-pos, 50% 50%);
}
html[data-time="night"] .scene-head__frame::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
background: rgb(128, 143, 204);
mix-blend-mode: multiply;
pointer-events: none;
}
.scene-head__cast img {
position: absolute;
left: var(--x);
bottom: var(--y, 3%);
height: var(--h);
width: auto;
max-width: none;
translate: -50% 0;
filter: drop-shadow(0 12px 10px rgba(30, 50, 20, 0.35));
animation: cast-in 0.8s calc(0.15s + var(--i, 0) * 0.08s) var(--ease-pop) backwards;
}
.scene-head__cast .fly {
animation: cast-in 0.8s calc(0.15s + var(--i, 0) * 0.08s) var(--ease-pop) backwards, hover 3.4s ease-in-out infinite alternate;
}
.scene-head__title {
position: relative;
z-index: 2;
max-width: calc(100% - var(--gutter) * 2);
margin: -38px 0 0;
padding: 8px 38px 13px;
border-radius: 24px;
color: #fff;
font-family: var(--font-menu);
font-weight: 400;
font-size: clamp(1.5rem, 4.4vw, 3.4rem);
line-height: 1.05;
letter-spacing: 0.03em;
text-transform: uppercase;
text-shadow: 0 3px 0 var(--strip-edge);
background: linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 52%), linear-gradient(var(--strip-top), var(--strip-bottom));
box-shadow: 0 0 0 4px #fff, 0 8px 0 4px var(--strip-edge), 0 16px 24px rgba(13, 31, 77, 0.28);
}
.scene-head__text {
max-width: min(700px, calc(100% - var(--gutter) * 2));
margin: 24px 0 0;
padding: 12px 24px 14px;
border-radius: 20px;
color: var(--title);
font-size: 1.16rem;
font-weight: 700;
line-height: 1.55;
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 6px 18px rgba(13, 31, 77, 0.1);
backdrop-filter: blur(6px);
}
html[data-time="night"] .scene-head__text {
color: var(--text);
background: rgba(16, 28, 74, 0.82);
}
@media (max-width: 560px) {
.scene-head__title {
margin-top: -28px;
padding: 7px 22px 10px;
}
.scene-head__text {
font-size: 1.02rem;
}
}
.scene-head .btn-row,
.scene-head .badges {
justify-content: center;
margin-top: 18px;
}
.jumps {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 20px var(--gutter) 0;
padding: 0;
list-style: none;
}
.band {
--band: var(--card-top);
--band-2: var(--card-bottom);
position: relative;
display: grid;
gap: 30px;
width: 100vw;
margin: 70px 0 0 calc(50% - 50vw);
padding: 54px max(var(--gutter), calc(50vw - 560px));
background: linear-gradient(var(--band), var(--band-2));
}
.band + .band {
margin-top: 26px;
}
.band::before,
.band::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 26px;
pointer-events: none;
}
.band::before {
bottom: calc(100% - 1px);
background: radial-gradient(circle 22px at 50% 100%, var(--band) 96%, transparent) -18px 100% / 74px 26px repeat-x,
radial-gradient(circle 14px at 50% 100%, var(--band) 95%, transparent) 10px 100% / 46px 26px repeat-x;
}
.band::after {
top: calc(100% - 1px);
background: radial-gradient(circle 22px at 50% 0%, var(--band-2) 96%, transparent) -18px 0% / 74px 26px repeat-x,
radial-gradient(circle 14px at 50% 0%, var(--band-2) 95%, transparent) 10px 0% / 46px 26px repeat-x;
}
.band:last-child {
margin-bottom: 40px;
}
.band--night {
--band: rgb(28, 44, 110);
--band-2: rgb(14, 24, 66);
--title: rgb(255, 214, 71);
--text: rgb(220, 228, 255);
--muted: rgb(180, 196, 240);
--link: rgb(255, 214, 71);
--link-hover: #fff;
color: var(--text);
background: radial-gradient(1.6px 1.6px at 6% 20%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 14% 70%, #fff 50%, transparent 52%),
radial-gradient(2px 2px at 23% 35%, #ffe9a3 50%, transparent 52%), radial-gradient(1.2px 1.2px at 31% 82%, #fff 50%, transparent 52%),
radial-gradient(1.6px 1.6px at 42% 18%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 55% 60%, #fff 50%, transparent 52%),
radial-gradient(2px 2px at 63% 28%, #ffe9a3 50%, transparent 52%), radial-gradient(1.2px 1.2px at 71% 76%, #fff 50%, transparent 52%),
radial-gradient(1.6px 1.6px at 82% 40%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 91% 14%, #fff 50%, transparent 52%),
radial-gradient(1.8px 1.8px at 97% 66%, #ffe9a3 50%, transparent 52%), linear-gradient(var(--band), var(--band-2));
}
.band--sun {
--band: rgb(255, 232, 140);
--band-2: rgb(255, 205, 92);
--title: rgb(120, 58, 0);
--text: rgb(96, 52, 8);
--muted: rgb(130, 78, 20);
--link: rgb(150, 70, 0);
--link-hover: rgb(100, 40, 0);
color: var(--text);
}
html[data-time="night"] .band:not(.band--night, .band--sun) {
--band: rgb(24, 38, 96);
--band-2: rgb(32, 50, 120);
}
.band__head {
display: grid;
justify-items: center;
gap: 10px;
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.band__head--start {
justify-items: start;
margin: 0;
text-align: left;
}
.band__title {
color: var(--title);
font-family: var(--font-band);
font-weight: 800;
font-size: clamp(2rem, 3.6vw, 2.7rem);
line-height: 1.05;
}
.band--night .band__title,
.band--sun .band__title {
text-shadow: 0 3px 0 rgba(120, 60, 0, 0.9);
}
.band--sun .band__title {
text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
}
.band__lead {
color: var(--text);
font-size: 1.1rem;
line-height: 1.6;
}
.split {
display: grid;
gap: 34px;
align-items: center;
}
@media (min-width: 860px) {
.split {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 54px;
}
.split--wide-media {
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
.split--flip > :first-child {
order: 2;
}
}
.split:has(> .sheet) {
align-items: stretch;
}
.split__words {
display: grid;
gap: 14px;
justify-items: start;
}
.split__title {
color: var(--title);
font-family: var(--font-card);
font-weight: 700;
font-size: clamp(1.7rem, 2.8vw, 2.2rem);
line-height: 1.1;
}
.split__words p {
line-height: 1.65;
}
.window {
position: relative;
overflow: hidden;
border-radius: 24px;
background: var(--sky-bottom);
box-shadow: 0 0 0 5px #fff, 0 9px 0 5px var(--sky-edge), 0 18px 30px rgba(13, 31, 77, 0.25);
}
.window > video,
.window > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.band--night .window {
box-shadow: 0 0 0 5px var(--sun-top), 0 9px 0 5px var(--sun-edge), 0 18px 30px rgba(0, 0, 0, 0.35);
}
.browser {
position: relative;
overflow: hidden;
border-radius: 18px;
background: rgb(236, 242, 252);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), 0 20px 36px rgba(0, 0, 0, 0.35);
}
.browser__bar {
display: flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 14px;
background: linear-gradient(#fff, rgb(226, 234, 248));
}
.browser__bar i {
width: 11px;
height: 11px;
border-radius: 50%;
background: rgb(255, 95, 86);
}
.browser__bar i:nth-child(2) {
background: rgb(255, 189, 46);
}
.browser__bar i:nth-child(3) {
background: rgb(39, 201, 63);
}
.browser__bar span {
flex: 1;
max-width: 300px;
margin-left: 12px;
padding: 3px 12px;
border-radius: 999px;
color: rgb(84, 99, 128);
font-size: 0.8rem;
font-weight: 700;
background: #fff;
box-shadow: inset 0 0 0 1px rgb(214, 226, 244);
}
.browser > video {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.steps {
display: grid;
gap: 34px 24px;
margin: 12px 0 0;
padding: 0;
list-style: none;
counter-reset: step;
}
@media (min-width: 820px) {
.steps {
grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
}
}
.step {
position: relative;
display: grid;
align-content: start;
gap: 8px;
padding: 40px 24px 26px;
border-radius: 24px;
color: var(--text);
background: #fff;
box-shadow: 0 0 0 2px rgb(214, 228, 248), 0 8px 0 rgb(196, 214, 242), 0 18px 28px rgba(13, 31, 77, 0.12);
}
html[data-time="night"] .step,
.band--night .step {
background: rgb(36, 56, 130);
box-shadow: 0 0 0 2px rgba(255, 214, 71, 0.55), 0 8px 0 rgba(0, 0, 0, 0.3);
}
.step::before {
counter-increment: step;
content: counter(step);
position: absolute;
top: -24px;
left: 24px;
display: grid;
place-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
color: #fff;
font-family: var(--font-menu);
font-size: 1.7rem;
text-shadow: 0 2px 0 var(--sun-edge);
background: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%), linear-gradient(var(--sun-top), var(--sun-bottom));
box-shadow: 0 0 0 4px #fff, 0 5px 0 4px var(--sun-edge);
}
.step b {
color: var(--title);
font-family: var(--font-card);
font-size: 1.3rem;
line-height: 1.2;
}
.step p {
line-height: 1.55;
}
.sheet {
padding: clamp(22px, 3vw, 34px);
border-radius: 28px;
color: var(--text);
background: #fff;
box-shadow: 0 0 0 2px rgb(214, 228, 248), 0 8px 0 rgb(196, 214, 242), 0 18px 28px rgba(13, 31, 77, 0.12);
}
html[data-time="night"] .sheet,
.band--night .sheet {
--title: rgb(255, 214, 71);
--text: rgb(222, 230, 255);
background: rgb(36, 56, 130);
box-shadow: 0 0 0 2px rgba(255, 214, 71, 0.55), 0 8px 0 rgba(0, 0, 0, 0.3);
}
.window--16x9 {
aspect-ratio: 16 / 9;
}
.perks--tiles {
gap: 22px;
}
@media (min-width: 700px) {
.perks--tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1000px) {
.perks--tiles {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.perks--tiles .perk {
grid-template-columns: 1fr;
align-content: start;
gap: 14px;
padding: 26px 24px;
border-radius: 24px;
background: #fff;
box-shadow: 0 0 0 2px rgb(214, 228, 248), 0 8px 0 rgb(196, 214, 242), 0 18px 28px rgba(13, 31, 77, 0.12);
}
html[data-time="night"] .perks--tiles .perk {
background: rgb(36, 56, 130);
box-shadow: 0 0 0 2px rgba(255, 214, 71, 0.5), 0 8px 0 rgba(0, 0, 0, 0.3);
}
.perks--tiles .perk__icon {
width: 62px;
height: 62px;
border-radius: 50%;
background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 55%),
linear-gradient(var(--top, rgb(66, 128, 240)), var(--bottom, rgb(41, 107, 230)));
box-shadow: 0 5px 0 var(--edge, var(--sky-edge));
}
.perks--tiles .perk__icon svg {
width: 32px;
height: 32px;
}
.perk__icon svg.icon {
fill: currentColor;
stroke: none;
}
.perks--tiles .perk b {
margin-bottom: 6px;
font-family: var(--font-card);
font-weight: 700;
font-size: 1.3rem;
}
.band--night .perk span {
color: var(--text);
}
.coins {
display: flex;
gap: 6px;
}
.coins img {
width: 56px;
filter: drop-shadow(0 4px 4px rgba(120, 60, 0, 0.3));
}
.old-figure {
display: grid;
gap: 12px;
justify-items: center;
}
.features--few {
width: auto;
margin: 0;
padding: 0;
}
@media (max-width: 1199px) and (min-width: 900px) {
.features--few .features__row {
grid-template-columns: repeat(var(--n), minmax(0, 1fr));
grid-auto-flow: row;
overflow: visible;
}
}
.doc {
display: grid;
gap: 26px;
align-items: start;
}
@media (min-width: 960px) {
.doc {
grid-template-columns: 250px minmax(0, 1fr);
gap: 40px;
}
}
.doc__toc {
display: grid;
gap: 4px;
padding: 20px;
border-radius: 22px;
background: var(--field);
box-shadow: inset 0 0 0 2px var(--field-line);
}
@media (min-width: 960px) {
.doc__toc {
position: sticky;
top: calc(var(--bar-small) + 24px);
}
}
.doc__toc b {
margin-bottom: 6px;
color: var(--title);
font-family: var(--font-card);
font-size: 1.1rem;
}
.doc__toc a {
padding: 5px 10px;
border-radius: 10px;
color: var(--text);
font-size: 0.95rem;
text-decoration: none;
}
.doc__toc a:hover {
color: var(--link);
background: var(--card-top);
}
.doc__body {
display: grid;
gap: 14px;
}
.doc__body h2 {
margin-top: 18px;
color: var(--title);
font-family: var(--font-card);
font-weight: 700;
font-size: 1.6rem;
scroll-margin-top: calc(var(--bar-small) + 24px);
}
.doc__body h2:first-child {
margin-top: 0;
}
.doc__body h3 {
margin-top: 6px;
color: var(--title);
font-size: 1.15rem;
}
.doc__body :is(p, li) {
line-height: 1.7;
}
.doc__body ul {
display: grid;
gap: 6px;
padding-left: 22px;
}
.apps-hero__phone {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: min(54%, 640px);
padding: 2%;
border-radius: 10% / 22%;
translate: -50% -54%;
}
.apps-hero__phone > video {
border-radius: 8% / 18%;
}
.phone-upright {
position: relative;
display: block;
aspect-ratio: 1320 / 2868;
padding: 3.4%;
border-radius: 16% / 7.4%;
background: linear-gradient(135deg, rgb(70, 78, 96), rgb(20, 24, 34));
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25), 0 20px 32px rgba(10, 20, 60, 0.35);
}
.phone-upright img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 13% / 6%;
}
.apps-pair {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 6%;
}
.apps-pair .phone-upright {
width: 42%;
max-width: 220px;
}
.apps-pair .phone-upright--night {
margin-top: 12%;
}
.apps-clips {
display: grid;
gap: 26px;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 900px) {
.apps-clips {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.apps-clips li {
display: grid;
justify-items: center;
gap: 14px;
}
.apps-clips .phone-frame {
width: 100%;
}
.apps-clips b {
color: var(--title);
font-family: var(--font-card);
font-size: 1.2rem;
}
.band .faq {
display: grid;
gap: 0;
max-width: 820px;
width: 100%;
margin: 0 auto;
}
@media (max-width: 760px) {
.apps-hero__phone {
width: 74%;
translate: -50% -62%;
}
}
.scene-head__ribbon {
position: absolute;
top: 20px;
left: 22px;
z-index: 4;
}
.band .years {
gap: 40px 24px;
margin-top: 14px;
}
@media (min-width: 700px) {
.band .years {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1000px) {
.band .years {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.band .year {
position: relative;
grid-template-columns: 1fr;
padding: 36px 24px 24px;
border-radius: 24px;
background: #fff;
box-shadow: 0 0 0 2px rgb(214, 228, 248), 0 8px 0 rgb(196, 214, 242), 0 18px 28px rgba(13, 31, 77, 0.12);
}
html[data-time="night"] .band .year {
background: rgb(36, 56, 130);
box-shadow: 0 0 0 2px rgba(255, 214, 71, 0.5), 0 8px 0 rgba(0, 0, 0, 0.3);
}
.band .year__badge {
position: absolute;
top: -21px;
left: 22px;
height: 42px;
padding: 0 18px;
}
.band .year b {
margin-bottom: 4px;
font-family: var(--font-card);
font-weight: 700;
font-size: 1.3rem;
}
.band .team {
gap: 22px;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.band .team li {
padding: 22px 12px 18px;
border-radius: 22px;
background: #fff;
box-shadow: 0 0 0 2px rgb(214, 228, 248), 0 6px 0 rgb(196, 214, 242);
}
html[data-time="night"] .band .team li {
background: rgb(36, 56, 130);
box-shadow: 0 0 0 2px rgba(255, 214, 71, 0.5), 0 6px 0 rgba(0, 0, 0, 0.3);
}
.band .team img {
margin-bottom: 8px;
border-radius: 50%;
box-shadow: 0 0 0 4px var(--sky-top);
}
.contact-grid {
display: grid;
gap: 26px;
align-items: start;
}
@media (min-width: 900px) {
.contact-grid {
grid-template-columns: minmax(0, 1fr) 320px;
}
}
.contact-grid aside {
display: grid;
gap: 14px;
}
.split .rulebook {
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
max-width: 460px;
}
.scene-head__text .say {
display: inline-block;
margin-bottom: 10px;
}
.band .downloads {
grid-template-columns: repeat(auto-fit, minmax(150px, 190px));
justify-content: center;
gap: 22px;
}
.band .downloads--wide {
grid-template-columns: repeat(auto-fit, minmax(210px, 270px));
}
.band .stickers {
justify-content: center;
}
.band .banner-codes {
justify-items: center;
gap: 30px;
}
.band .banner-code {
justify-items: center;
width: 100%;
max-width: 728px;
}
.band--night .banner-code textarea {
border-color: rgba(255, 214, 71, 0.6);
color: rgb(31, 64, 128);
background: rgba(255, 255, 255, 0.94);
}
.card-types {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 18px;
}
.card-type {
display: grid;
justify-items: center;
gap: 4px;
width: 168px;
padding: 22px 12px 18px;
border-radius: 24px;
text-align: center;
background: rgb(36, 56, 130);
box-shadow: 0 0 0 2px rgba(255, 214, 71, 0.5), 0 8px 0 rgba(0, 0, 0, 0.3);
}
.card-type .level-badge {
--size: 80px;
margin-bottom: 8px;
}
.card-type > b {
color: var(--title);
font-family: var(--font-card);
font-weight: 700;
font-size: 1.25rem;
}
.card-type > span:last-child {
color: var(--muted);
font-size: 0.95rem;
}
@media (max-width: 560px) {
.card-type {
width: calc(50% - 9px);
}
}
.band--night .perks--tiles .perk {
background: rgb(36, 56, 130);
box-shadow: 0 0 0 2px rgba(255, 214, 71, 0.5), 0 8px 0 rgba(0, 0, 0, 0.3);
}
.band--night .perks--tiles .perk b {
color: var(--title);
}
.quest-givers {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.quest-giver {
display: grid;
justify-items: center;
align-content: start;
gap: 10px;
padding-bottom: 16px;
overflow: hidden;
border-radius: 24px;
text-align: center;
background: #fff;
box-shadow: 0 0 0 2px rgb(214, 228, 248), 0 8px 0 rgb(196, 214, 242), 0 18px 28px rgba(13, 31, 77, 0.12);
}
html[data-time="night"] .quest-giver {
background: rgb(36, 56, 130);
box-shadow: 0 0 0 2px rgba(255, 214, 71, 0.5), 0 8px 0 rgba(0, 0, 0, 0.3);
}
.quest-giver__pic {
position: relative;
width: 100%;
aspect-ratio: 1 / 1.05;
background: radial-gradient(70% 60% at 50% 40%, rgba(255, 255, 255, 0.55), transparent 70%), linear-gradient(var(--sky-top), var(--sky-bottom));
}
.quest-giver__pic img {
position: absolute;
bottom: 0;
left: 50%;
width: auto;
height: 92%;
translate: -50% 0;
filter: drop-shadow(0 6px 5px rgba(13, 31, 77, 0.3));
}
.quest-giver > b {
color: var(--title);
font-family: var(--font-card);
font-weight: 700;
font-size: 1.2rem;
}
.quest-giver__items {
display: flex;
flex-wrap: wrap;
justify-content: center;
justify-self: stretch;
gap: 6px;
padding: 0 8px;
}
.quest-giver__items img {
width: 30px;
filter: drop-shadow(0 2px 2px rgba(13, 31, 77, 0.25));
}
.gift-scene > img + img {
position: absolute;
inset: auto auto 26% var(--x);
width: 13.5%;
height: auto;
translate: -50% 0;
filter: drop-shadow(0 8px 6px rgba(30, 50, 20, 0.35));
object-fit: contain;
}
.xp-ways {
display: grid;
gap: 18px;
}
.xp-ways__title {
color: var(--title);
font-family: var(--font-card);
font-weight: 700;
font-size: 1.5rem;
}
.xp-ways__list {
display: grid;
gap: 4px 40px;
}
@media (min-width: 860px) {
.xp-ways__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.xp-ways__list li {
display: grid;
grid-template-columns: 46px minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
padding: 12px 0;
border-bottom: 2px solid rgba(31, 64, 128, 0.08);
}
.xp-ways__list .perk__icon svg {
width: 26px;
height: 26px;
}
.xp-ways__words {
display: grid;
line-height: 1.4;
}
.xp-ways__words span {
color: var(--muted);
font-size: 0.95rem;
}
.xp-ways__xp {
padding: 4px 12px;
border-radius: 999px;
color: rgb(120, 58, 0);
font-family: var(--font-card);
font-weight: 700;
white-space: nowrap;
background: linear-gradient(var(--sun-top), var(--sun-bottom));
box-shadow: 0 3px 0 var(--sun-edge);
}