/* =========================================================
   LANDING DEMO
   ========================================================= */
.landing-grid{
  width:min(350px,78vw);
  aspect-ratio:1;
  margin:16px auto 24px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px;
}

.landing-tile{
  border:1px solid rgba(52,211,153,.14);
  border-radius:7px;
  background:linear-gradient(145deg,#111a17,#09100e);
  box-shadow:inset 0 0 12px rgba(52,211,153,.025);
  transition:.2s ease;
}

.landing-tile.demo-flash{
  background:linear-gradient(145deg,#8effc9,#34d399);
  border-color:#34d399;
  box-shadow:0 0 28px rgba(52,211,153,.55);
}

/* =========================================================
   GAME GRID
   ========================================================= */

.game-grid{
  width:min(620px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px;
  aspect-ratio:1;
}

.game-tile{
  appearance:none;
  border:1px solid rgba(52,211,153,.2);
  border-radius:9px;
  background:linear-gradient(145deg,#111a17,#09100e);
  cursor:pointer;
  min-width:0;
  min-height:0;
  transition:
    background .12s ease,
    box-shadow .12s ease,
    transform .1s ease,
    border-color .12s ease;
}

.game-tile:hover:not(:disabled){
  border-color:rgba(52,211,153,.48);
  transform:translateY(-1px);
}

.game-tile.flash{
  background:linear-gradient(145deg,#8effc9,#34d399);
  border-color:#34d399;
  box-shadow:0 0 30px rgba(52,211,153,.65);
}

.game-tile.correct{
  background:linear-gradient(145deg,#34d399,#0f7d58);
  border-color:#34d399;
  box-shadow:0 0 20px rgba(52,211,153,.28);
}

.game-tile.wrong{
  background:linear-gradient(145deg,#a78bfa,#6d28d9);
  border-color:#a78bfa;
  box-shadow:0 0 22px rgba(139,92,246,.3);
}

.game-tile:disabled{
  cursor:default;
}

/* =========================
   RESPONSIVE
   ========================= */
@media(max-width:900px){

.page-wrapper{
display:block;
width:100%;
max-width:760px;
padding:24px 16px 40px;
}

#left-side,
#right-side{
display:none;
}

#central-column{
max-width:760px;
}
}

@media(max-width:650px){

.page-wrapper{
padding:18px 12px 32px;
}

.main-title{
font-size:clamp(2.25rem,10vw,3rem);
}

.subtitle{
font-size:1.05rem;
margin-bottom:22px;
}

.level-tabs{
gap:4px;
margin-bottom:19px;
}

.level-tab{
font-size:.59rem;
padding:8px 2px;
}

.cta-button{
margin-top:20px;
padding:15px 30px;
min-width:185px;
}

}

@media(max-width:400px){

.page-wrapper{
padding-left:9px;
padding-right:9px;
}

.main-title{
font-size:2.1rem;
}

.subtitle{
font-size:.92rem;
margin-bottom:18px;
}

.level-tabs{
gap:3px;
}

.level-tab{
font-size:.52rem;
padding:7px 1px;
}

.cta-button{
padding:14px 24px;
min-width:170px;
font-size:.92rem;
}
}

@media(max-width:360px){

.page-wrapper{
padding-left:7px;
padding-right:7px;
}

.main-title{
font-size:1.9rem;
}

.subtitle{
font-size:.86rem;
}

.level-tab{
font-size:.48rem;
}
}