/* styles.css */
:root{
  --bg: 0 0% 10%;
  --text: 0 0% 98%;
  --muted: 0 0% 70%;
  --accent: 264 88% 66%;
  --accent-2: 326 86% 66%;
  --blur: 14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:hsl(var(--text));
  background:hsl(var(--bg));
  overflow-x:hidden;
}

#bg{
  position:fixed; inset:0;
  background: url('assets/background.jpg') center/cover no-repeat;
  filter: saturate(1.1) brightness(.9);
  z-index:-2;
}
#bg::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(1200px 800px at 60% 80%, rgba(255,0,150,.18), transparent 60%),
              radial-gradient(900px 700px at 20% 20%, rgba(80,120,255,.22), transparent 60%);
  z-index:-1;
}

.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.15);
  border-radius:24px;
}

.topbar{
  position:sticky; top:0; margin:16px; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px}
.brand .logo{font-size:28px}
.brand h1{font-size:20px; margin:0; letter-spacing:.5px}
.nav{display:flex; gap:8px}

.shell{
  display:grid; gap:18px;
  grid-template-columns:minmax(280px,420px) 1fr;
  align-items:start;
  margin:18px;
}
@media (max-width: 980px){
  .shell{grid-template-columns:1fr}
}

.panel{padding:22px}
.panel .title{margin:.2rem 0 .2rem; font-weight:700; letter-spacing:.5px}
.subtitle{margin:.2rem 0 1rem; color:hsl(var(--muted)); font-weight:400}

.form-row{display:grid; gap:8px; margin:12px 0}
.form-row.grid{grid-template-columns:auto 1fr; gap:12px; align-items:center}
.label{font-weight:600}
.hint{opacity:.8; font-size:.9rem}

.chooser{display:flex; gap:16px; border:none; padding:0; margin:10px 0}
.chooser label{display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.25); padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.2)}

.custom-grid{display:flex; align-items:center; gap:8px}
.custom-grid input{
  width:64px; padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.25); color:white; outline:none;
}
.custom-grid span{opacity:.7}
select, input[type="file"]{
  background:rgba(0,0,0,.25);
  color:white; border:1px solid rgba(255,255,255,.2);
  padding:10px; border-radius:12px; outline:none;
}

.btn{
  padding:10px 14px; border-radius:999px; border:1px solid transparent;
  color:white; cursor:pointer; transition:.2s transform ease, .2s background, .2s border-color;
  background:linear-gradient(90deg, hsl(var(--accent)), hsl(var(--accent-2)));
  box-shadow: 0 10px 30px rgba(120, 60, 255, .35);
}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2);
  box-shadow:none;
}
.btn.pill{padding:10px 16px; font-weight:600}
.btn.primary{font-weight:700}
.btn.danger{background:linear-gradient(90deg, #ff5f6d, #ffc371); box-shadow:0 10px 30px rgba(255,100,120,.35)}

.btn-group{display:flex; gap:8px; flex-wrap:wrap}

.hud{
  padding:12px 16px; display:grid; gap:6px;
  grid-template-columns: repeat(4, minmax(110px, 1fr)) auto;
  align-items:center;
}
.hud-item{
  text-align:center; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.2);
  border-radius:14px; padding:10px 8px;
}
.hud-item span{display:block; font-size:.9rem; color:hsl(var(--muted))}
.hud-item strong{font-size:1.25rem}
.hud-actions{display:flex; gap:8px; justify-self:end; flex-wrap:wrap}

.board-wrap{position:relative; padding:16px; min-height:420px}
.board{display:grid; gap:12px; justify-content:center}
@media (max-width:600px){ .board-wrap{min-height:360px} }

.card{
  width:110px; height:110px; perspective:1000px;
  background:transparent; border:none; padding:0; cursor:pointer; position:relative; border-radius:16px;
  outline: none;
}
.card-inner{
  position:absolute; inset:0; transform-style:preserve-3d; transition: transform .45s cubic-bezier(.2,.7,.2,1);
  border-radius:16px;
}
.card:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.5)}
.card.flipped .card-inner{transform:rotateY(180deg)}
.card-face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:16px;
  display:flex; align-items:center; justify-content:center; font-size:46px; font-weight:700;
}
.card-face.front{
  background:linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.2);
}
.card-face.back{
  transform:rotateY(180deg);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.28);
  background-size:cover; background-position:center;
}

.countdown{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:72px; font-weight:800; text-shadow:0 10px 30px rgba(0,0,0,.5);
  backdrop-filter: blur(4px); background:rgba(0,0,0,.25);
  border-radius:20px; z-index:5;
}
.hidden{display:none !important}

.modal{
  position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.5);
}
.modal .modal-body{padding:24px; max-width:520px; text-align:center}
.modal .actions{display:flex; gap:10px; justify-content:center; margin-top:10px}

.foot{
  margin:16px; padding:12px 16px; display:flex; justify-content:center; align-items:center;
}

.confetti{position:absolute; inset:0; pointer-events:none;}

/* Stats page */
.bests, .recent{display:grid; gap:10px}
.recent .row, .bests .row{
  display:grid; grid-template-columns: 120px 100px 100px 80px 1fr; gap:8px;
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.2); padding:8px 10px; border-radius:12px;
}
.recent .row.header, .bests .row.header{font-weight:700; background:rgba(255,255,255,.08)}

/* Light theme */
.light{
  --bg: 216 71% 95%;
  --text: 220 20% 12%;
  --muted: 220 10% 40%;
}
.game-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
}