/* 
  MuJoCo WASM Piano (MIDI) — Simple Christmas style (fixed)
  - Fixes a stray '}' that could break later rules (UI disappearing behind canvas)
  - Brings the status pill closer to the title (no margin-left:auto)
*/

:root{
  --bg0:#0b0f14;
  --bg1:#0f1b2d;
  --panel:rgba(12,16,22,.72);
  --text:#e9edf5;
  --muted:rgba(233,237,245,.78);

  --red:#e63946;
  --green:#2ecc71;
  --gold:#f4d35e;

  --shadow:rgba(0,0,0,.38);
  --radius:14px;
  --gap:10px;
}

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

body{
  margin:0;
  overflow:hidden;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";

  /* Festive but subtle background */
  background:
    radial-gradient(1100px 700px at 18% 8%, rgba(230,57,70,.18), transparent 60%),
    radial-gradient(900px 600px at 82% 18%, rgba(46,204,113,.14), transparent 55%),
    radial-gradient(700px 500px at 55% 0%, rgba(244,211,94,.10), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
}

/* Canvas fills the screen (lowest layer) */
#c{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  display:block;
  z-index:0;
}

/* Stronger falling snow (CSS-only) */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;

  background-image:
    radial-gradient(2px 2px at 18px 26px, rgba(255,255,255,.92) 50%, transparent 51%),
    radial-gradient(1px 1px at 62px 104px, rgba(255,255,255,.70) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 128px 44px, rgba(255,255,255,.80) 50%, transparent 51%),
    radial-gradient(1px 1px at 44px 146px, rgba(255,255,255,.62) 50%, transparent 51%),
    radial-gradient(2px 2px at 156px 162px, rgba(255,255,255,.84) 50%, transparent 51%),
    radial-gradient(1px 1px at 186px 70px, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 104px 176px, rgba(255,255,255,.58) 50%, transparent 51%),
    radial-gradient(2px 2px at 206px 122px, rgba(255,255,255,.76) 50%, transparent 51%);
  background-size:180px 180px;

  opacity:.48;
  filter: blur(.2px);
  will-change: transform, background-position;

  animation:
    snowFall 10s linear infinite,
    snowDrift 6s ease-in-out infinite alternate;

  z-index:1; /* above canvas, below UI */
}

body::after{
  background-size:280px 280px;
  opacity:.30;
  filter: blur(.7px);
  animation-duration: 18s, 9s;
}

@keyframes snowFall{
  from{ background-position:0 -220px; }
  to  { background-position:0 980px; }
}

@keyframes snowDrift{
  from{ transform: translateX(-10px); }
  to  { transform: translateX(10px); }
}

/* UI panel (always on top) */
#ui{
  position:fixed;
  top:16px;
  left:16px;
  right:16px;
  max-width:980px;
  margin:0 auto;
  padding:14px 16px;

  background:var(--panel);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  box-shadow:0 14px 40px var(--shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  z-index:10;
}

/* Subtle festive border glow */
#ui::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(90deg, rgba(230,57,70,.65), rgba(244,211,94,.55), rgba(46,204,113,.55));
  opacity:.32;
  pointer-events:none;

  /* hollow-out the center, keeping only the border */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Rows */
.row{
  display:flex;
  align-items:center;
  gap:var(--gap);
  flex-wrap:wrap;
}
.row + .row{ margin-top:10px; }

/* Header row: keep title + status close */
#ui > .row:first-child{
  gap:8px;
}
.title{
  font-size:16px;
  font-weight:700;
  letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}

/* Status pill (no auto push to the far right) */
.status{
  margin-left:0;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);
  font-variant-numeric:tabular-nums;

  /* avoid the UI stretching too wide when status is long */
  max-width:min(560px, 100%);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Controls layout */
.controls{ align-items:center; }

/* Buttons + file label as button */
.btn,
.filebtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  transition:background .18s ease, border-color .18s ease, transform .06s ease;
}
.btn:hover,
.filebtn:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
}
.btn:active,
.filebtn:active{ transform:translateY(1px); }

/* Hide the file input (label works as the button) */
.filebtn input{ display:none; }

/* Range control */
.range{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--muted);
}
.range input[type="range"]{
  width:140px;
  accent-color:var(--gold);
}
#speedValue{
  min-width:54px;
  text-align:right;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* Checkbox pills */
.chk{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--muted);
}
.chk input{ accent-color:var(--green); }

/* Hint */
.hint{
  font-size:17px;
  line-height:1.45;
  color:var(--muted);
}
.hint b{ color:var(--text); }
.hint a{ color:var(--gold); }

/* Focus styles */
.btn:focus-visible,
.filebtn:focus-visible,
.range input:focus-visible,
.chk input:focus-visible{
  outline:2px solid rgba(244,211,94,.85);
  outline-offset:2px;
}

/* Small screens */
@media (max-width: 640px){
  #ui{
    top:10px;
    left:10px;
    right:10px;
    padding:12px;
  }
  .range input[type="range"]{ width:110px; }
}