:root{
  --bg: #0f1012;

  /* Panels */
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);

  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;

  /* Touch targets */
  --tap: 56px;
}

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

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

/* Bakgrund per läge */
body.mode-bells{
  background: url("../images/bg-sky.jpg") center/cover fixed no-repeat;
}
body.mode-keys{
  background: url("../images/bg2.jpg") center/cover fixed no-repeat;
}

/* Mjuk overlay för läsbarhet */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(1000px 700px at 90% 10%, rgba(195,67,111,.10), transparent 55%),
    linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,.38));
}

a{ color: inherit; opacity:.9; }
a:hover{ opacity:1; }

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  background: rgba(15,16,18,.72);
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 10px 12px;
}

/* Innehåll ovan overlay */
.topbar, .stage, .footer, .titleHero{
  position: relative;
  z-index: 1;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}
.brand__logo{
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.brand__title{ font-weight: 700; }
.brand__sub{ font-size: 12px; color: var(--muted); }

/* Controls */
.controls{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.segmented{
  display:inline-flex;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.segmented__btn{
  border:0;
  background: transparent;
  color: var(--muted);
  padding: 10px 14px;
  min-height: var(--tap);
  font-weight: 600;
  cursor: pointer;
}
.segmented__btn.is-active{
  background: var(--panel2);
  color: var(--text);
}

.rightBtns{ display:flex; gap: 10px; }

/* Ikonknappar */
.iconBtn{
  min-width: var(--tap);
  height: var(--tap);
  display:grid;
  place-items:center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--panel);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.iconBtn img{
  width: 26px;
  height: 26px;
}
.iconBtn[aria-pressed="true"]{
  background: rgba(255,255,255,.12);
}

/* Stage */
.stage{
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 12px 20px;
}

.view{ display:none; }
.view.is-active{ display:block; }

/* Klockor */
/* Klockspel – vertikal logik */
.bells{
 display: grid;
  grid-template-columns: repeat(5, max-content);
  gap: 22px 34px;
  justify-content: center;
  padding: 12px;
}

/* Tomma platser i klockpanelens grid */
.bellSpacer{
  width: 96px;   /* matcha ungefär toppradens storlek */
  height: 110px; /* lite mer för label-yta */
}

.bellBtn{
  width: var(--size);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;   /* <-- centrerar bild + label */
  justify-self: center;  /* <-- centrerar i grid-cellen */
}

.bellBtn img{
  width: var(--size);
  height: auto;
  display: block;
}
.bellBtn.is-down img{ transform: scale(0.98); }

.bellLabel{
  margin-top: 6px;
  text-align: center;
  width: 100%;
}

/* Klaviatur */
.pianoWrap{ overflow: hidden; }

.piano{
  display:flex;
  width:100%;
  height: 220px;
  padding: 6px;
}

/* Tangenter */
.key{
  position: relative;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0,0,0,.25);
}

.key.white{
  width: 46px;
  height: 210px;
  background: rgba(255,255,255,.92);
  margin: 0;
  box-shadow:
    inset -1px 0 0 rgba(0,0,0,.18),
    0 6px 10px rgba(0,0,0,.18);
}
.key.white::after{
  content:"";
  position:absolute;
  top:0; right:0;
  width:1px; height:100%;
  background: rgba(0,0,0,.22);
}
.key.white:last-child::after{ display:none; }

.key.black{
  width: 32px;
  height: 132px;
  background: rgba(20,20,20,.95);
  margin-left: -16px;
  margin-right: -16px;
  z-index: 2;
}

.key.is-down{ transform: translateY(1px); }

/* =========================
   Tangentbords-bokstäver
========================= */

.key .kbd{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 600;
  user-select: none;
  pointer-events: none;
  opacity: .25;
}

/* Vita – bokstav nere */
.key.white .kbd{
  bottom: 10px;
  color: rgba(0,0,0,.7);
}

/* Svarta – bokstav nere */
.key.black .kbd{
  bottom: 8px;
  color: rgba(255,255,255,.8);
  opacity: .35;
}

/* Footer */
.footer{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 12px 18px;
  color: var(--muted);
  font-size: 12px;
}

/* Desktop */
@media (min-width: 700px){
  .topbar{
    display:flex;
    justify-content: space-between;
  }
}

/* Mobil */
@media (max-width: 520px){
  .piano{ height: 200px; }
  .key.white{ width: 40px; height: 190px; }
  .key.black{
    width: 28px;
    height: 120px;
    margin-left: -14px;
    margin-right: -14px;
  }
}


/* =========================
   Demo-indikator (röd punkt)
========================= */

.iconBtn[data-demo]{
  position: relative;
}

/* röd LED */
.iconBtn[data-demo]::after{
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c62828;
  opacity: 0;
  box-shadow: 0 0 6px rgba(198,40,40,.8);
  transition: opacity .15s ease;
}

/* tänd när demo är aktiv */
.iconBtn[aria-pressed="true"]::after{
  opacity: 1;
}