@font-face  {
font-family: 'Lilita One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('assets/lilita-one-latin.d2575d4fa363.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: 'Nunito';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('assets/nunito-latin-variable.ba344451eab2.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;
}
:root {
--navy:#05245e;
--blue:#007bc6;
--cyan:#30d7ff;
--yellow:#ffdc18;
--white:#f5fdff
}
* {
box-sizing:border-box
}
html {
scroll-behavior:smooth;
scroll-padding-top:24px
}
body {
margin:0;
color:var(--navy);
font:700 16px/1.5 'Nunito',Arial,sans-serif;
background-color:#069bdb;
background-image:radial-gradient(ellipse at 50% 8%,#5de6ff88,transparent 50%),linear-gradient(90deg,#004e9444 2px,transparent 3px),linear-gradient(#00366b55 2px,transparent 3px),linear-gradient(90deg,#b1efff77 1px,transparent 4px),linear-gradient(#adebff77 1px,transparent 4px);
background-size:auto,94px 94px,94px 94px,94px 94px,94px 94px;
background-position:center,0 0,0 0,3px 3px,3px 3px
}
a {
color:inherit;
text-decoration:none
}
button,a {
-webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible {
outline:4px solid #ffca08;
outline-offset:5px
}
img {
max-width:100%;
height:auto;
display:block
}
h1,h2,h3,p {
margin:0
}
h2,h3 {
font-family:'Lilita One','Arial Rounded MT Bold',sans-serif;
font-weight:400;
line-height:1.12
}
.page-shell {
max-width:1200px;
margin:auto;
padding:14px 26px 0
}
.sr-only {
position:absolute;
width:1px;
height:1px;
padding:0;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap
}
.skip-link {
position:fixed;
top:5px;
left:5px;
background:#fff;
padding:10px;
transform:translateY(-150%);
z-index:100
}
.skip-link:focus {
transform:translateY(0)
}
.topbar {
position:relative;
z-index:2;
min-height:80px;
border:3px solid #55d1ff;
border-radius:45px;
display:flex;
align-items:center;
padding:6px 24px;
gap:22px;
background:linear-gradient(#1b99ed 0%,#0755b5 35%,#003480 100%);
box-shadow:inset 0 3px 3px #ffffff90,inset 0 -3px 4px #001e76,0 6px 0 #003c7f,0 8px 12px #002f6155
}
.company-brand {
width:230px;
flex-shrink:0
}
.company-brand img {
width:100%;
filter:drop-shadow(0 2px 2px #002d70)
}
.mini-brand {
display:flex;
flex-direction:column;
align-items:center;
line-height:.8;
transform:rotate(-5deg);
font-family:'Lilita One',sans-serif;
font-size:26px;
border-left:1px solid #7bdbff;
padding-left:24px;
text-shadow:0 3px #031b56,2px 0 #031b56,-2px 0 #031b56
}
.mini-brand span {
color:#ffd828;
font-size:33px
}
.mini-brand b {
font-weight:400;
color:#fff;
margin-top:4px
}
.topbar nav {
margin-left:auto;
display:flex;
align-items:center;
gap:10px
}
.topbar nav a {
font-size:19px;
font-weight:900;
color:#fff;
padding:7px 18px;
text-shadow:0 2px #043579;
border:2px solid transparent;
border-radius:25px
}
.topbar nav a:hover {
background:#ffffff20
}
.topbar nav a.active {
background:linear-gradient(#fff65a,#ffd20d 60%,#ff9900);
border-color:#fff297;
color:#05285b;
text-shadow:none;
box-shadow:inset 0 -3px #ec8c00,0 3px 4px #001b5b88
}
.hero {
position:relative;
margin:-5px -26px 30px
}
.hero-art {
width:100%;
border-bottom:2px solid #9eefff;
mask-image:linear-gradient(#000 97%,transparent);
-webkit-mask-image:linear-gradient(#000 97%,transparent)
}
.wood {
position:relative;
color:#fff;
background:repeating-linear-gradient(2deg,transparent 0 15px,#51200e22 16px 17px,transparent 18px 30px),linear-gradient(#d79148,#a85522 42%,#8a3d16 54%,#b86e30);
border:3px solid #743512;
border-radius:17px;
box-shadow:inset 0 3px 2px #ffc779,inset 0 -4px 2px #60290a,0 3px 0 #ffde9e,0 6px 0 #005e98,0 9px 12px #002b5d55;
text-align:center
}
.wood:before,.wood:after {
content:'';
position:absolute;
top:calc(50% - 5px);
height:10px;
width:10px;
border-radius:100%;
background:linear-gradient(135deg,#fff6d6,#8c8679);
border:1px solid #503a27;
box-shadow:0 2px 2px #44210c
}
.wood:before {
left:12px
}
.wood:after {
right:12px
}
.tagline {
width:85%;
margin:-26px auto 0;
padding:12px 30px;
font-family:'Lilita One',sans-serif;
font-size:clamp(20px,2.6vw,34px);
line-height:1.15;
transform:rotate(-.5deg);
text-shadow:2px 3px 0 #541d0d,-1px -1px 0 #541d0d
}
.tagline em {
font-style:normal;
color:#ffed24
}
.porcelain {
position:relative;
border:4px solid #fff;
border-radius:32px;
background:linear-gradient(115deg,#fff 0%,#ebfaff 45%,#c8edfa 100%);
box-shadow:inset 0 0 0 2px #a6e4fa,inset 0 -7px 5px #65c9ed55,0 5px 0 #65dbff,0 9px 0 #0073ac,0 13px 16px #003f7655
}
.featured {
display:grid;
grid-template-columns:1.28fr 1fr;
min-height:390px;
overflow:hidden;
padding:30px 36px;
margin:0 0 55px
}
.featured-copy {
position:relative;
z-index:1;
max-width:580px
}
.available {
display:flex;
gap:7px;
align-items:center;
color:#1c6940;
font-size:11px;
font-weight:900;
letter-spacing:1.6px;
margin-bottom:13px
}
.available span {
width:8px;
height:8px;
border-radius:50%;
background:#29b453;
box-shadow:0 0 0 4px #29b45315
}
.featured-heading {
display:flex;
align-items:center;
gap:18px;
margin-bottom:13px
}
.app-icon {
width:78px;
height:78px;
border:3px solid #fff;
box-shadow:0 3px 6px #0063b347;
border-radius:20px
}
.featured h2 {
font-size:49px;
color:#e58b00;
text-shadow:1px 2px #fff3a5,-1px -1px #8e390e;
letter-spacing:-1px
}
.featured h2 span {
display:block;
font-family:'Nunito',sans-serif;
font-weight:900;
font-size:18px;
line-height:1.15;
color:var(--navy);
text-shadow:none;
letter-spacing:0;
margin-top:4px
}
.featured-copy>p {
font-size:15px;
max-width:480px;
line-height:1.4
}
.featured-copy .duel-note {
font-size:14px;
margin-top:11px
}
.featured-actions {
display:flex;
gap:20px;
align-items:center;
margin-top:20px;
flex-wrap:wrap
}
.play-badge {
display:inline-flex;
gap:12px;
align-items:center;
background:linear-gradient(#171c22,#000);
border:2px solid #fff3a2;
outline:3px solid #e6a600;
border-radius:12px;
padding:7px 16px;
box-shadow:0 4px 5px #00244750;
color:#fff;
transition:transform .15s
}
.play-badge:hover {
transform:translateY(-3px)
}
.play-badge small {
display:block;
font:700 10px/1.3 Arial,sans-serif;
letter-spacing:1px
}
.play-badge b {
font:400 26px/1.15 Arial,sans-serif
}
.trailer-link {
font-weight:900;
font-size:13px;
text-decoration:underline;
text-underline-offset:4px
}
.featured-copy .fine-print {
margin-top:15px;
font-size:10px;
line-height:1.4;
color:#315478
}
.featured-art {
position:relative;
min-height:330px;
align-self:center
}
.phone {
position:absolute;
width:184px;
right:20px;
top:-30px;
transform:rotate(10deg);
padding:8px;
border-radius:27px;
background:#081728;
border:3px solid #4b6e92;
box-shadow:inset 0 0 0 2px #a8cad9,7px 12px 0 #007abc22,0 12px 16px #00336944
}
.phone>img {
border-radius:18px;
width:100%
}
.camera {
position:absolute;
top:11px;
left:calc(50% - 20px);
width:40px;
height:7px;
border-radius:0 0 8px 8px;
background:#081728
}
.featured-royal {
position:absolute;
z-index:1;
left:-30px;
bottom:8px;
width:260px;
filter:drop-shadow(0 12px 7px #006aaf45);
transform:rotate(-8deg)
}
.screenshot-label {
position:absolute;
right:7px;
bottom:-8px;
color:#355c79;
letter-spacing:1.4px;
font-size:8px;
transform:rotate(10deg)
}
.section-sign {
position:relative;
width:max-content;
max-width:95%;
margin:-30px auto 0;
padding:8px 36px 10px;
font-size:30px;
line-height:1;
text-shadow:2px 3px 0 #05245e,-1px -1px #05245e;
transform:rotate(-1deg);
z-index:1
}
.games-section {
padding:0 18px 22px;
margin-bottom:55px
}
.section-intro {
text-align:center;
font-size:14px;
margin:19px 0 17px;
color:#365b80
}
.game-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px
}
.game-card {
border:3px solid #fff;
border-radius:22px;
overflow:hidden;
background:#f4fcff;
box-shadow:0 3px 0 #58bde9,0 5px 8px #005a9b25;
transition:transform .2s
}
.game-card:hover {
transform:translateY(-4px)
}
.game-picture {
height:158px;
position:relative;
overflow:hidden;
background:radial-gradient(ellipse at 50% 100%,#fff45a,#ffc70a 60%,#ed7f00)
}
.game-picture:after {
content:'';
position:absolute;
inset:0;
box-shadow:inset 0 0 18px #003d6c20;
border-bottom:3px solid #fff9;
pointer-events:none
}
.game-picture>img {
position:absolute;
bottom:-1px;
width:95%;
left:2.5%;
filter:drop-shadow(0 6px 2px #09437833)
}
.game-ribbon {
position:absolute;
z-index:2;
right:-24px;
top:16px;
transform:rotate(28deg);
padding:4px 28px;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
box-shadow:0 2px 3px #08164b44
}
.live {
background:#207731;
color:#fff
}
.soon {
background:#ffdc20;
color:#182c60
}
.game-flapy .game-picture {
background:radial-gradient(ellipse at 60% 75%,#d4a7ff,#8441d9 75%)
}
.game-flapy .game-picture .flying-boblik {
width:77%;
left:20%;
bottom:11px;
transform:rotate(-18deg)
}
.air-trail {
position:absolute;
top:70px;
left:13px;
font-size:56px;
color:#e9cfff;
letter-spacing:2px;
transform:rotate(-10deg)
}
.game-flush .game-picture {
background:radial-gradient(#6bffcf,#0d9d9f)
}
.game-flush .game-picture .pipe-art {
width:126px;
left:8px;
bottom:-18px;
transform:rotate(40deg)
}
.game-flush .game-picture .pipe-boblik {
width:68%;
left:33%;
bottom:1px;
transform:rotate(8deg)
}
.game-angry .game-picture {
background:repeating-conic-gradient(from 5deg at 50% 100%,#fb7c35 0 15deg,#e65135 15deg 30deg)
}
.game-angry .game-picture .mystery-boblik {
filter:brightness(0) saturate(0);
opacity:.85
}
.mystery-mark {
position:absolute;
bottom:19px;
left:0;
right:0;
text-align:center;
color:#fff;
font-family:'Lilita One',sans-serif;
font-size:80px;
line-height:1;
text-shadow:0 4px #4e1c2c
}
.game-info {
text-align:center;
padding:13px 9px 15px
}
.game-info h3 {
font-size:28px;
margin-bottom:6px
}
.game-info p {
font-size:12px;
line-height:1.4;
min-height:35px;
font-weight:800
}
.chunky-button {
display:flex;
align-items:center;
justify-content:center;
gap:9px;
margin-top:14px;
padding:8px 7px;
border:2px solid #d3ff87;
border-radius:12px;
background:linear-gradient(#8cda38,#298d1d);
box-shadow:0 3px 0 #185921,0 5px 0 #ffbd12;
color:#fff;
font-size:13px;
font-weight:900;
text-shadow:0 2px #1a5c20;
transition:filter .15s
}
.chunky-button:hover {
filter:brightness(1.12)
}
.coming-label {
display:block;
padding:9px 7px 7px;
margin-top:13px;
color:#755014;
font-size:12px;
font-weight:900;
letter-spacing:.3px;
background:#fff1bd;
border-radius:10px
}
.reasons {
padding:0 15px 22px;
margin-bottom:35px
}
.reasons .section-sign {
font-size:26px
}
.reason-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
margin-top:26px
}
.reason {
display:flex;
align-items:center;
gap:8px;
padding:5px 12px;
border-right:1px solid #56add8
}
.reason:last-child {
border:0
}
.reason>img {
width:64px;
height:70px;
object-fit:contain;
flex-shrink:0
}
.reason h3 {
font-size:20px;
margin-bottom:6px
}
.reason p {
font-size:12px;
line-height:1.4
}
.about {
display:flex;
gap:24px;
align-items:center;
margin-bottom:30px;
padding:28px 30px;
overflow:hidden
}
.about-brand {
width:215px;
flex-shrink:0;
border-right:1px solid #5ba9d1;
padding-right:22px
}
.about-brand span {
display:block;
text-align:center;
font-size:8px;
letter-spacing:1.2px;
font-weight:900;
margin-top:10px
}
.about-copy {
position:relative;
z-index:1;
flex:1
}
.about h2 {
font-size:31px;
margin-bottom:11px
}
.about p {
font-size:13px;
line-height:1.5
}
.about p+p {
margin-top:7px
}
.about-boblik {
width:140px;
flex-shrink:0;
transform:rotate(-8deg);
margin-right:-24px
}
.contact {
display:flex;
align-items:center;
justify-content:space-between;
gap:25px;
padding:0 10px 32px;
color:#fff;
text-shadow:0 2px 2px #004a91
}
.contact h2 {
font-size:27px;
margin-bottom:4px
}
.contact p {
font-size:13px
}
.contact-button {
display:flex;
gap:24px;
align-items:center;
justify-content:center;
background:linear-gradient(#fff48d,#ffcb12);
border:2px solid #fff3a1;
color:var(--navy);
padding:11px 24px;
border-radius:14px;
font-weight:900;
white-space:nowrap;
text-shadow:none;
box-shadow:inset 0 -3px #e9a211,0 4px 0 #00649b
}
.contact-button:hover {
transform:translateY(-2px)
}
.footer {
background:linear-gradient(#0756a9,#03316b);
border-top:3px solid #5ed7ff;
box-shadow:0 -5px 15px #00538e44;
padding:20px 26px
}
.footer-inner {
max-width:1148px;
margin:auto;
display:flex;
align-items:center;
gap:24px;
color:#fff
}
.footer-inner>a:first-child {
width:175px;
flex-shrink:0
}
.footer-links {
display:flex;
flex:1;
gap:16px;
flex-wrap:wrap;
align-items:center;
font-size:12px;
font-weight:900
}
.footer-links a:hover {
text-decoration:underline
}
.footer p {
font-size:10px;
line-height:1.4;
border-left:1px solid #559bd2;
padding-left:20px;
white-space:nowrap
}
.youtube {
padding:7px;
transition:transform .15s
}
.youtube:hover {
transform:translateY(-3px)
}
.game-picture>img {
height:148px;
object-fit:contain
}
.game-flapy .game-picture .flying-boblik {
height:135px
}
.game-flush .game-picture .pipe-boblik {
height:123px
}
.game-flush .game-picture .pipe-art {
height:126px
}
.about-boblik {
max-height:140px;
object-fit:contain
}
@media(min-width:1500px) {
.page-shell {
padding-top:18px
}
}
@media(max-width:1050px) {
.topbar {
gap:14px;
padding:6px 18px
}
.company-brand {
width:190px
}
.mini-brand {
padding-left:18px
}
.topbar nav {
gap:2px
}
.topbar nav a {
font-size:17px;
padding:7px 14px
}
.featured {
padding:26px
}
.featured h2 {
font-size:41px
}
.featured-art {
min-height:350px
}
.phone {
width:170px;
right:8px;
top:-5px
}
.featured-royal {
width:210px;
left:-20px;
bottom:5px
}
.reason {
padding:5px 8px;
gap:5px
}
.reason>img {
width:45px
}
.reason h3 {
font-size:18px
}
.about {
gap:20px;
padding:26px
}
.about-brand {
width:180px
}
.about-boblik {
width:110px
}
.footer-inner {
gap:15px
}
.footer-links {
gap:12px
}
.footer-inner>a:first-child {
width:150px
}
}
@media(max-width:760px) {
.page-shell {
padding:10px 15px 0
}
.topbar {
padding:6px 12px;
min-height:65px;
gap:10px
}
.company-brand {
width:158px
}
.mini-brand {
display:none
}
.topbar nav {
gap:0
}
.topbar nav a {
font-size:14px;
padding:6px 10px
}
.hero {
margin:-4px -15px 24px
}
.tagline {
width:90%;
padding:11px 24px;
margin-top:-13px;
font-size:24px
}
.featured {
padding:24px;
grid-template-columns:1.3fr 1fr;
min-height:390px;
margin-bottom:50px
}
.featured h2 {
font-size:36px
}
.featured-heading {
gap:12px
}
.app-icon {
width:60px;
height:60px;
border-radius:15px
}
.featured h2 span {
font-size:15px
}
.featured-copy>p {
font-size:13px
}
.featured-copy .duel-note {
font-size:12px
}
.featured-actions {
gap:15px;
margin-top:18px
}
.play-badge {
padding:7px 12px;
gap:9px
}
.play-badge svg {
width:27px;
height:31px
}
.play-badge b {
font-size:23px
}
.trailer-link {
font-size:11px
}
.phone {
width:145px;
right:-5px;
top:8px
}
.featured-art {
min-height:325px
}
.featured-royal {
width:170px;
left:-17px;
bottom:22px
}
.game-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px
}
.game-picture {
height:175px
}
.game-picture>img {
max-width:260px;
left:50%;
transform:translateX(-50%)
}
.game-flapy .game-picture .flying-boblik {
left:25%;
transform:rotate(-18deg);
max-width:210px
}
.game-flush .game-picture .pipe-boblik {
max-width:195px;
left:30%;
transform:rotate(8deg)
}
.reason-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
gap:20px 0
}
.reason:nth-child(2) {
border:0
}
.reason {
padding:0 15px;
gap:12px
}
.reason>img {
width:65px
}
.reason h3 {
font-size:21px
}
.about {
gap:18px;
padding:25px
}
.about-brand {
width:155px;
padding-right:16px
}
.about h2 {
font-size:26px
}
.about-boblik {
display:none
}
.contact h2 {
font-size:24px
}
.contact p {
font-size:12px
}
.contact-button {
padding:10px 17px;
gap:10px;
font-size:14px
}
.footer-inner {
flex-wrap:wrap;
justify-content:center;
gap:18px
}
.footer-links {
flex:initial;
justify-content:center
}
.footer p {
border:0;
padding-left:0
}
.section-sign {
font-size:29px
}
}
@media(max-width:520px) {
.page-shell {
padding:10px 12px 0
}
.topbar {
border-radius:23px;
padding:5px 12px 9px;
flex-wrap:wrap;
justify-content:center;
gap:3px;
min-height:101px
}
.company-brand {
width:178px
}
.company-brand img {
height:55px;
object-fit:contain
}
.topbar nav {
width:100%;
justify-content:center;
margin:0;
gap:9px
}
.topbar nav a {
font-size:14px;
line-height:1.2;
padding:5px 12px
}
.hero {
margin:0 -12px 26px
}
.hero-art {
min-height:230px;
object-fit:cover;
object-position:center;
width:100%
}
.tagline {
width:92%;
margin-top:-9px;
padding:10px 23px;
font-size:19px;
border-radius:12px
}
.wood:before {
left:7px
}
.wood:after {
right:7px
}
.wood:before,.wood:after {
height:7px;
width:7px;
top:calc(50% - 3px)
}
.porcelain {
border-radius:24px;
border-width:3px
}
.featured {
display:flex;
flex-direction:column;
padding:22px 20px 10px;
overflow:hidden;
gap:8px
}
.featured-copy {
max-width:none
}
.featured-heading {
gap:13px
}
.featured h2 {
font-size:39px
}
.featured h2 span {
font-size:15px;
line-height:1.25
}
.app-icon {
width:68px;
height:68px
}
.featured-copy>p {
font-size:14px
}
.featured-copy .duel-note {
font-size:13px
}
.featured-copy .fine-print {
font-size:10px;
margin-top:15px
}
.featured-actions {
gap:19px
}
.play-badge b {
font-size:24px
}
.trailer-link {
font-size:12px
}
.featured-art {
width:100%;
height:286px;
min-height:0;
max-width:330px;
overflow:visible;
margin-top:18px
}
.phone {
width:147px;
right:26px;
top:-2px;
transform:rotate(8deg)
}
.featured-royal {
width:190px;
left:-7px;
bottom:3px
}
.screenshot-label {
bottom:-2px;
right:14px;
font-size:7px;
transform:rotate(8deg)
}
.featured {
padding-bottom:30px
}
.section-sign {
font-size:27px;
padding:9px 29px
}
.games-section {
padding:0 10px 15px
}
.section-intro {
font-size:12px;
margin:19px 2px 15px
}
.game-grid {
gap:12px
}
.game-card {
border-radius:17px;
border-width:2px
}
.game-picture {
height:133px
}
.game-ribbon {
font-size:7px;
right:-23px;
top:13px;
padding:4px 24px
}
.game-picture>img {
width:110%
}
.game-flapy .game-picture .flying-boblik {
width:90%;
left:19%;
bottom:12px
}
.game-flush .game-picture .pipe-art {
width:95px;
left:-5px;
bottom:-10px;
transform:rotate(40deg)
}
.game-flush .game-picture .pipe-boblik {
width:85%;
left:25%;
bottom:4px
}
.air-trail {
font-size:43px;
top:54px;
left:5px
}
.mystery-mark {
font-size:64px;
bottom:12px
}
.game-info {
padding:12px 7px 14px
}
.game-info h3 {
font-size:25px
}
.game-info p {
font-size:11px;
min-height:32px
}
.chunky-button {
font-size:11px;
gap:5px;
padding:8px 2px
}
.coming-label {
font-size:11px;
padding:8px 3px
}
.reasons {
padding:0 5px 22px;
margin-bottom:28px
}
.reasons .section-sign {
font-size:23px;
padding:10px 26px
}
.reason-grid {
gap:19px 0;
margin-top:25px
}
.reason {
padding:0 9px;
gap:7px
}
.reason>img {
width:39px;
height:56px
}
.reason h3 {
font-size:17px;
margin-bottom:5px
}
.reason p {
font-size:10px
}
.about {
display:block;
padding:24px 22px
}
.about-brand {
width:200px;
margin:0 auto 23px;
padding:0 0 17px;
border:0;
border-bottom:1px solid #73b3d5
}
.about-brand span {
font-size:7px
}
.about h2 {
font-size:29px
}
.about p {
font-size:13px
}
.contact {
flex-direction:column;
align-items:flex-start;
padding:0 9px 29px;
gap:14px
}
.contact h2 {
font-size:26px
}
.contact p {
font-size:12px;
max-width:290px
}
.contact-button {
width:100%;
padding:12px 20px;
justify-content:space-between
}
.footer {
padding:21px 20px
}
.footer-inner {
gap:17px
}
.footer-inner>a:first-child {
width:180px
}
.footer-links {
width:100%;
gap:14px 18px;
font-size:12px;
order:2
}
.footer p {
font-size:10px;
order:3;
width:100%;
text-align:center
}
.youtube {
order:1
}
.footer-inner>a:first-child {
order:0
}
}
@media(max-width:360px) {
.topbar nav {
gap:2px
}
.topbar nav a {
font-size:13px;
padding:5px 10px
}
.featured {
padding-left:15px;
padding-right:15px
}
.featured h2 {
font-size:31px
}
.featured-heading {
gap:9px
}
.app-icon {
width:54px;
height:54px
}
.featured h2 span {
font-size:13px
}
.featured-art {
height:270px
}
.phone {
width:134px;
right:8px
}
.featured-royal {
width:158px
}
.game-info h3 {
font-size:21px
}
.game-info p {
font-size:10px
}
.chunky-button {
font-size:10px
}
.reason {
padding:0 6px;
gap:5px
}
.reason>img {
width:31px
}
.reason h3 {
font-size:16px
}
.reasons .section-sign {
font-size:21px
}
.contact h2 {
font-size:24px
}
}
@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto
}
* {
transition:none!important
}
}