﻿
/* Center the hero composition */
@media(min-width:981px){
  .hero{grid-template-columns:minmax(0,620px) 340px;justify-content:center;gap:18px;padding-left:24px;padding-right:24px}
  .hero-content{max-width:620px}
  .hero-carousel{height:190px}
}
@media(min-width:1400px){
  .hero{grid-template-columns:minmax(0,680px) 340px;gap:22px}
  .hero-content{max-width:680px}
}

/* Trendy theme swatches */
.swatch.ocean{background:linear-gradient(135deg,#0b2e4b,#66e3ff);color:#06131f}.swatch.sunset{background:linear-gradient(135deg,#ff647c,#ffc46b);color:#260b12}.swatch.lavender{background:linear-gradient(135deg,#7f5cff,#e0b7ff)}.swatch.carbon{background:linear-gradient(135deg,#08090b,#e6e8eb);color:#08090b}.swatch.mint{background:linear-gradient(135deg,#55d6b0,#a8ffe0);color:#071512}


/* Final compact homepage layout */
.hero{min-height:270px;padding-top:28px;padding-bottom:18px;gap:12px}
.hero-content{max-width:560px}
.hero-content h1{font-size:clamp(38px,6vw,68px);margin-bottom:8px}
.hero-content .hero-copy{font-size:14px;line-height:1.35}
.hero-actions{margin-top:12px;gap:8px}
.hero-actions a{min-height:36px;padding:0 14px;font-size:13px}
.hero-carousel{height:160px}
.notice-band,.section{padding-top:18px}
.notice-band{gap:12px}
.notice-band h2,.section-head h2,.service-copy h2{font-size:clamp(22px,3vw,30px);margin-bottom:4px}
.section-head{margin-bottom:8px}
.filters{margin-bottom:9px;gap:5px}
.filters button{min-height:32px;padding:0 10px;font-size:12px}
.game-grid{column-gap:12px;row-gap:12px}
.game-card.compact-game-card{padding:8px;gap:6px}
.compact-game-card .game-main-row{grid-template-columns:78px 1fr;gap:8px;min-height:82px}
.compact-game-card .game-cover{min-height:82px;border-radius:9px}
.compact-game-card .game-cover img,.compact-game-card .game-cover-placeholder{border-radius:9px}
.compact-game-card .game-card-head{margin-bottom:2px;font-size:10px}
.compact-game-card .game-tag{padding:2px 5px;font-size:9px}
.compact-game-card h3{font-size:16px;margin-bottom:1px}
.compact-game-card p{font-size:11px;line-height:1.3;-webkit-line-clamp:2}
.compact-game-card .game-meta{margin-top:4px;gap:3px}
.compact-game-card .game-meta div{padding:4px 5px;border-radius:7px}
.compact-game-card .game-meta strong{font-size:11px}
.compact-game-card .game-meta span{font-size:9px}
.compact-game-card .game-bottom-row{padding-top:5px}
.compact-game-card .card-actions{gap:4px}
.compact-game-card .card-actions a{padding:6px 4px;font-size:11px;border-radius:7px}
.service-zone{padding:12px;gap:10px}
.qr-box{max-width:145px}
.download-box{padding:12px}
.footer{margin-top:16px;padding-top:10px;padding-bottom:10px}
@media(min-width:981px){.hero{grid-template-columns:minmax(0,540px) 300px;gap:12px;padding-left:16px;padding-right:16px}.hero-carousel{height:160px}}
@media(max-width:980px){.hero{min-height:330px;gap:12px}.hero-carousel{height:160px}}
@media(max-width:640px){.hero{min-height:350px;padding-top:32px;padding-bottom:16px}.hero-carousel{height:150px}.notice-band,.section{padding-top:18px}.service-zone{padding:12px}}
@media(max-width:420px){.compact-game-card .game-main-row{grid-template-columns:70px 1fr}.compact-game-card .game-cover{min-height:76px}}

/* Blinking enter-game button */
.compact-game-card .card-actions a:last-child{
  position:relative;
  overflow:hidden;
  color:#101016;
  background:linear-gradient(135deg,var(--gold),var(--cyan));
  box-shadow:0 0 12px color-mix(in srgb,var(--gold) 55%,transparent),0 0 26px color-mix(in srgb,var(--cyan) 28%,transparent);
  animation:enterGamePulse 1.45s ease-in-out infinite;
}
.compact-game-card .card-actions a:last-child::after{
  content:"";
  position:absolute;
  inset:-40% -70%;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.78) 50%,transparent 65%);
  transform:translateX(-65%) rotate(12deg);
  animation:enterGameShine 2.2s ease-in-out infinite;
}
.compact-game-card .card-actions a:last-child:hover{
  transform:translateY(-1px);
  filter:brightness(1.12);
}
@keyframes enterGamePulse{
  0%,100%{filter:brightness(1);box-shadow:0 0 10px color-mix(in srgb,var(--gold) 45%,transparent),0 0 22px color-mix(in srgb,var(--cyan) 22%,transparent)}
  50%{filter:brightness(1.35);box-shadow:0 0 18px color-mix(in srgb,var(--gold) 70%,transparent),0 0 38px color-mix(in srgb,var(--cyan) 42%,transparent)}
}
@keyframes enterGameShine{
  0%,55%{transform:translateX(-70%) rotate(12deg);opacity:0}
  68%{opacity:1}
  100%{transform:translateX(70%) rotate(12deg);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .compact-game-card .card-actions a:last-child,
  .compact-game-card .card-actions a:last-child::after{animation:none}
}
