/* FlashBox v2.2.1 Stable - style.css */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial,Helvetica,sans-serif;
}

:root{
  --bg1:#0f172a;
  --bg2:#1e293b;
  --bg3:#111827;
  --panel:rgba(255,255,255,.08);
  --panel-border:rgba(255,255,255,.12);
  --text:#fff;
  --muted:#cbd5e1;
  --game:#1f2937;
  --accent:#10b981;
  --danger:#ef4444;
  --gold:#fbbf24;
}

body{
  background:linear-gradient(180deg,var(--bg1),var(--bg2),var(--bg3));
  color:var(--text);
  overflow:hidden;
  user-select:none;
}

header{
  text-align:center;
  padding:18px 16px 10px;
}

header h1{
  font-size:40px;
  letter-spacing:1px;
}

header p{
  margin-top:6px;
  color:var(--muted);
}

#hud{
  width:min(95%,1100px);
  margin:10px auto 12px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.card{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:16px;
  padding:12px;
  text-align:center;
  backdrop-filter:blur(8px);
  box-shadow:0 8px 18px rgba(0,0,0,.15);
  transition:transform .18s ease, background .18s ease;
}

.card:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.1);
}

.emoji{
  font-size:28px;
  line-height:1;
}

.title{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
}

.card #score,
.card #life,
.card #high,
.card #level{
  margin-top:6px;
  font-size:24px;
  font-weight:700;
}

#gameArea{
  position:relative;
  width:min(95vw,1100px);
  height:65vh;
  margin:0 auto;
  background:var(--game);
  border-radius:18px;
  border:2px solid rgba(255,255,255,.08);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  overflow:hidden;
}

.item{
  position:absolute;
  width:80px;
  height:80px;
  cursor:pointer;
  transition:opacity .15s ease, transform .15s ease, left .15s linear, top .15s linear;
  will-change:left,top,transform,opacity;
}

.item:active{
  transform:scale(.94);
}

.target{
  background:var(--danger);
  border-radius:18px;
  box-shadow:0 0 20px rgba(239,68,68,.7);
  animation:pop .18s ease;
}

.target.hidden{
  display:none !important;
}

.bomb,
.diamond,
.heart,
.slow{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:46px;
  width:70px;
  height:70px;
  text-shadow:0 0 10px rgba(0,0,0,.2);
}

.bomb::before{content:"💣";}
.diamond::before{content:"💎";}
.heart::before{content:"❤️";}
.slow::before{content:"⏰";}

#popup{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.96);
  font-size:34px;
  font-weight:800;
  opacity:0;
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
  text-shadow:0 0 14px rgba(255,255,255,.9);
}

.screen{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.88);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:18px;
  padding:20px;
  text-align:center;
  z-index:999;
}

.screen h1{
  font-size:50px;
}

.screen h2{
  font-size:38px;
}

.screen p{
  max-width:340px;
  line-height:1.6;
  color:#d1d5db;
}

button{
  padding:14px 26px;
  border:none;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease, filter .15s ease, opacity .15s ease;
}

button:hover{
  transform:scale(1.04);
  filter:brightness(1.05);
}

button:active{
  transform:scale(.97);
}

button:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}

#countdown{
  font-size:56px;
  font-weight:800;
  color:var(--gold);
  line-height:1;
}

.hidden{
  display:none !important;
}

@keyframes pop{
  from{
    transform:scale(.25);
    opacity:0;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}

@media (max-width:700px){
  header h1{
    font-size:30px;
  }

  #hud{
    grid-template-columns:repeat(2,1fr);
  }

  #gameArea{
    height:62vh;
  }

  .item{
    width:72px;
    height:72px;
  }

  .bomb,
  .diamond,
  .heart,
  .slow{
    font-size:42px;
  }

  .screen h1{
    font-size:38px;
  }
}