/* ===========================================================
   Playground — Global Theme
   Shared design tokens & base styles (extracted from Tetris UI)
   =========================================================== */

:root{
  /* Core palette */
  --bg0:#0a0e1a;
  --bg1:#131a2e;
  --panel:rgba(20,28,48,0.72);
  --line:rgba(120,160,255,0.14);
  --txt:#cdd8ff;
  --accent:#5ad1ff;
  --accent-2:#ffd86b;

  /* Surfaces & radii */
  --panel-radius:16px;
  --panel-pad:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  font-family:"Segoe UI",system-ui,sans-serif;
  color:var(--txt);
  background:
    radial-gradient(1200px 800px at 20% -10%, #1a2547 0%, transparent 60%),
    radial-gradient(1000px 700px at 110% 110%, #241a47 0%, transparent 55%),
    linear-gradient(160deg,var(--bg0),var(--bg1));
  min-height:100%;
}

/* ---------- Panels ---------- */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--panel-radius);
  padding:var(--panel-pad);
  backdrop-filter:blur(8px);
}

/* ---------- Typographic helpers ---------- */
.title{
  font-weight:800;letter-spacing:3px;text-transform:uppercase;
  color:var(--accent);opacity:.85;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  padding:10px 22px;border-radius:30px;
  border:1px solid var(--accent);
  background:linear-gradient(180deg,rgba(90,209,255,.25),rgba(90,209,255,.08));
  color:#eaf6ff;font-weight:700;letter-spacing:1px;cursor:pointer;font-size:13px;
  text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}
.btn:hover{
  background:linear-gradient(180deg,rgba(90,209,255,.4),rgba(90,209,255,.15));
}