:root{
--bg-a:#ffd6e0; --bg-b:#c7b7ff; --bg-c:#7dd3fc;
--card: rgba(255,255,255,0.06);
--glass-border: rgba(255,255,255,0.08);
--ui: #06b6d4;
--muted:#b6c2d9;
--accent:#f472b6;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial}
body{
background: radial-gradient(800px 500px at 10% 10%, var(--bg-a) 0%, transparent 20%),
            radial-gradient(900px 600px at 90% 90%, var(--bg-b) 0%, transparent 20%),
            linear-gradient(180deg,#0f172a 0%, #071026 60%);
display:flex;align-items:center;justify-content:center;padding:0px;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
min-height:100vh;
}

/* floating candies in background (decorative) */
.floating {
position:fixed; inset:0; pointer-events:none; z-index:0;
}
.float-candy{
position:absolute; width:40px; height:40px; opacity:.08; filter:blur(.6px);
animation: floaty 10s linear infinite;
}
@keyframes floaty{
0%{ transform: translateY(0) rotate(0deg); }
50%{ transform: translateY(-40px) rotate(90deg); }
100%{ transform: translateY(0) rotate(180deg); }
}

.stage{
width:100%; max-width:920px; display:flex; gap:18px; align-items:flex-start; z-index:1;
flex-direction:column;
}

/* header + HUD card */
.topbar{
display:flex; gap:12px; align-items:center; justify-content:space-between;
width:100%;
}
.brand{
display:flex; gap:12px; align-items:center;
}
.logo{
width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font-size:22px;
background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
border:1px solid var(--glass-border);
box-shadow: 0 6px 20px rgba(2,6,23,0.6);
}
.title{ font-weight:800; font-size:18px; letter-spacing:.2px; color:#eaf2ff; }

.controls{
display:flex; gap:8px; align-items:center;
}

.pill{
padding:8px 12px; border-radius:12px; background:var(--card); border:1px solid var(--glass-border);
color:#eaf2ff; font-weight:700; font-size:13px;
}
.btn{ cursor:pointer; }

/* game card layout */
.game-wrap{
display: flex;
gap: 18px;
align-items: center;
width: 100% !important;
/* margin-top: 10px; */
height: 100vh;
padding: 10px;
}

/* left: board card */
.board-card{
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
border:1px solid var(--glass-border); border-radius:18px; padding:12px;
box-shadow: 0 14px 40px rgba(2,6,23,0.5);
display:flex; flex-direction:column; align-items:center; min-width:320px;
flex:1 1 600px;
max-width: 100%;
width: 100%;
margin: auto;
}

.board-outer{ padding:10px; border-radius:14px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.08)); }
canvas{ display:block; border-radius:12px; background:linear-gradient(180deg,#071226,#061124); touch-action:none; }

/* right: sidebar */
.side{
width:260px; display:flex; flex-direction:column; gap:12px;
}
.panel{
padding:12px; border-radius:12px; background:var(--card); border:1px solid var(--glass-border);
}
.stat{ display:flex; flex-direction:column; gap:6px; color:#eaf2ff; }
.stat strong{ font-size:18px; }

/* level select modal */
.overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(2,6,23,0.6); z-index:120; }
.panel-levels{ width: min(86vw,560px); display:flex; gap:12px; flex-direction:column; align-items:stretch; }
.levels-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.level-btn{ padding:12px; border-radius:10px; font-weight:700; border:1px solid rgba(255,255,255,0.04); background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); color:#eaf2ff; }

/* responsive */
@media (max-width:920px){
.game-wrap{ flex-direction:column; }
.side{ width:100%; order:2; }
.board-card{ order:1; }
.levels-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
  canvas{
      max-width: 340px;
      max-height: 340px;
  }
}
@media (max-width:420px){
.logo{ width:44px; height:44px; font-size:18px; border-radius:10px }
.title{ font-size:16px }
.pill{ padding:8px 10px; font-size:12px }
.side{ width:100% }
}

/* subtle progress fill */
.progress{ height:12px; border-radius:8px; background:rgba(255,255,255,0.03); overflow:hidden; border:1px solid rgba(255,255,255,0.04) }
.progress > .fill{ height:100%; width:0; background:linear-gradient(90deg,var(--ui),#7dd3fc); transition:width .25s linear; }

/* nicer small text */
.muted{ color:var(--muted); font-size:13px }