{
box-sizing: border-box;
}
body {
margin: 0;
padding: 20px 16px 100px;
background:
radial-gradient(ellipse at top, #54270e 0%, #1b0e08 55%, #100805 100%);
color: #fff2d0;
font-family: Arial, sans-serif;
}
.top {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
color: #ffc34d;
font-weight: 900;
letter-spacing: 2px;
text-shadow: 0 0 12px #ff9d25;
}
.balance {
background: #38200c;
border: 1px solid #a86b20;
padding: 10px 15px;
border-radius: 20px;
color: #ffd36b;
}
.hero {
margin-top: 28px;
padding: 38px 20px;
text-align: center;
border: 1px solid #d78a32;
border-radius: 22px;
background: linear-gradient(145deg, #a64e16, #54240d 65%, #241006);
box-shadow: 0 0 35px #ff8c263d;
}
.pixel {
color: #ffdc75;
font-size: 30px;
text-shadow: 0 0 15px #ffca54;
}
.small {
color: #ffca70;
font-size: 11px;
letter-spacing: 3px;
}
h1 {
color: #ffd36b;
font-size: 34px;
text-shadow: 0 0 15px #ff9d25;
}
.hero p {
line-height: 1.5;
}
.shop {
margin-top: 30px;
}
.shop h2 {
color: #ffc65b;
}
.gifts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.gift {
position: relative;
overflow: hidden;
background: linear-gradient(145deg, #38200f, #211208);
border: 1px solid #a86b20;
border-radius: 18px;
padding: 20px 12px;
text-align: center;
box-shadow: 0 0 14px #ffb52e20;
transition: transform 0.25s, box-shadow 0.25s;
}
.gift:hover {
transform: translateY(-5px);
box-shadow: 0 0 25px #ffb52e70;
}
.gift h3 {
color: #ffd36b;
font-size: 16px;
}
.gift p {
color: #d9b98a;
}
.gift button {
background: linear-gradient(90deg, #ffb52e, #ffdc70);
color: #351900;
border: none;
border-radius: 10px;
padding: 11px;
font-weight: bold;
width: 100%;
cursor: pointer;
}
.gift button:hover {
filter: brightness(1.15);
}
.gift:has(p:nth-of-type(1)) {
animation: appear 0.5s ease both;
}
.gift:nth-child(5n + 1) {
border-color: #d49a42;
box-shadow: 0 0 15px #d49a4240;
}
.gift:nth-child(5n + 2) {
border-color: #55baff;
box-shadow: 0 0 15px #55baff35;
}
.gift:nth-child(5n + 3) {
border-color: #bd70ff;
box-shadow: 0 0 15px #bd70ff40;
}
.gift:nth-child(5n + 4) {
border-color: #ffcf4a;
box-shadow: 0 0 18px #ffcf4a55;
}
.gift:nth-child(5n) {
border-color: #ff75e8;
box-shadow: 0 0 20px #ff75e855;
animation: cosmic 3s infinite alternate;
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
padding: 13px 4px;
background: #211208;
border-top: 1px solid #75451b;
z-index: 10;
}
.bottom button {
background: none;
border: none;
color: #ffd28a;
font-size: 11px;
cursor: pointer;
}
@keyframes appear {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes cosmic {
from {
box-shadow: 0 0 10px #ff75e855;
}
to {
box-shadow: 0 0 28px #ff75e8aa;
}
}
@media (max-width: 380px) {
.gifts {
gap: 9px;
}
.gift {
padding: 15px 8px;
}
h1 {
font-size: 28px;
}
}