/* ---------------------------------------------------------------
   Keytar – simple responsive layout
   - Landscape: 3 columns, page doesn't scroll
   - Portrait:  3 rows, page may scroll
   - Keytar frame stays EXACTLY 3:2 (matches the SVG)
   --------------------------------------------------------------- */
@import url("./keyboard-buttons.css");

/* ========== Variables ========== */
:root{
  --pad: .75rem;                  /* page padding */
  --gap: 1rem;                    /* grid gap */

  --edge: #ff2a36;                /* frame/card border color */
  --card-bg: #222338;
  --row-bg:  #11111c;

  --brand-w: clamp(9rem, 15vmin, 14rem);
  --side-w:  clamp(14rem, 24vmin, 22rem);

  --frame: .25rem;                /* keytar frame border thickness */
  --keytar-ar: 3 / 2;             /* aspect ratio (3:2) */

  --key-size: clamp(1.4rem, 6vw, 2.4rem); /* keyboard icon size */
}

/* ========== Base ========== */
* { box-sizing: border-box; }

html, body{
  margin:0;
  font-family:"Liberator", monospace;
  text-transform:uppercase;
  background:#000;
  color:#fff;
}

#app-wrapper{ padding: var(--pad); }

/* Cards / panels */
.panel{
  background: var(--card-bg);
  border: var(--frame) solid var(--edge);
  border-radius: .5rem;
  padding: .6rem;
}

/* Branding */
#branding{
  display:flex; flex-direction:column; gap:.25rem;
  width: var(--brand-w);
}
#branding img.logo{ width:100%; height:auto; display:block; }
#branding .brand-text{ font-weight:900; letter-spacing:.06em; }

/* Keytar frame (the red-bordered box) */
#keytar-container{
  border: var(--frame) solid var(--edge);
  border-radius: .5rem;
  display:grid; place-items:center;
  background:#fed024;

  /* Let aspect-ratio govern the box by default */
  aspect-ratio: var(--keytar-ar);
  width: 100%;
  height: auto;
  max-width: 100%;
  box-sizing: border-box;
}
#keytar-container svg{ width:100%; height:100%; display:block; }

/* Sidebar */
#sidebar{ display:flex; flex-direction:column; gap:.75rem; }
#sidebar, #sidebar * { min-width:0; }  /* avoid text forcing width */

/* Settings rows */
.settings-panel{ display:flex; flex-direction:column; gap:.2rem; }
.item-header{ font-weight:700; font-size:.7rem; letter-spacing:.05em; }

.item-box{
  background: var(--row-bg);
  border-radius:.25rem;
  display:grid;
  grid-template-columns: var(--key-size) 1px minmax(0,1fr); /* icon | divider | text */
  align-items:center;
  column-gap:.2rem;
  min-width:0;
}
.item-box .divider{ width:1px; height:100%; background:#8b8b8b; opacity:.32; }
.item-box .value{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Key icons */
.key-icon{
  width:var(--key-size);
  height:var(--key-size);
  background-size:contain; background-repeat:no-repeat; background-position:center;
}
.key-icon.pressed{ filter:drop-shadow(0 0 .3rem rgba(255,255,255,.6)); }

/* Transport & utility */
.transport-row{
  margin-top:.4rem; padding-top:.4rem;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-around; gap:.5rem;
}
.ctrl-btn{
  width: clamp(4rem, 6vw, 2rem);
  height: clamp(4rem, 6vw, 2rem);
  background:transparent; border:0; cursor:pointer;
  background-size:contain; background-repeat:no-repeat; background-position:center;
}
.ctrl-btn.record        { background-image:url("/keytar/assets/record_button_off.svg"); }
.ctrl-btn.record.active { background-image:url("/keytar/assets/record_button_on.svg");  }
.ctrl-btn.play          { background-image:url("/keytar/assets/play_button_off.svg");   }
.ctrl-btn.play.active   { background-image:url("/keytar/assets/play_button_on.svg");    }

.utility-panel{
  margin-top:auto;
  width:50%;
  align-self:flex-end;            /* right-align in sidebar */
  display:flex; justify-content:center; gap:.5rem; padding:.5rem;
}
.utility-btn{
  width: clamp(1.8rem, 4.5vw, 2.4rem);
  height: clamp(1.8rem, 4.5vw, 2.4rem);
  background:#2b2d3c; border:0; border-radius:.35rem;
  display:grid; place-items:center; cursor:pointer;
}
.utility-btn img{ width:70%; height:auto; display:block; }

/* WebUSB gating modal */
.webusb-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  z-index:1000;
}

.webusb-modal{
  max-width:22rem;
  width:100%;
  text-align:center;
  border-color: var(--edge);
  background: var(--row-bg);
}

.webusb-modal__title{
  font-size:1.2rem;
  letter-spacing:.06em;
  margin-bottom:.5rem;
}

.webusb-modal__body{
  margin:0 0 1rem;
  font-family:"Tiny5", monospace;
  letter-spacing:.05em;
}

.webusb-modal__button{
  width:100%;
  padding:.75rem 1rem;
  margin-bottom:.75rem;
  background:#fed024;
  color:#000;
  border: var(--frame) solid var(--edge);
  border-radius:.35rem;
  font-weight:700;
  cursor:pointer;
  text-transform:uppercase;
}

.webusb-modal__button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.webusb-modal__button--secondary{
  background:#2b2d3c;
  color:#f5f5f5;
}

.webusb-modal__input{
  width:100%;
  padding:.65rem .75rem;
  margin:0 0 .75rem;
  border: var(--frame) solid var(--edge);
  border-radius:.35rem;
  font-family:"Tiny5", monospace;
  letter-spacing:.05em;
  background:#fffdf4;
  color:#15161f;
}

.webusb-modal__error{
  background:rgba(255,42,54,.14);
  color:#ff7e88;
  padding:.65rem;
  border-radius:.25rem;
  border:1px solid rgba(255,42,54,.4);
  font-family:"Tiny5", monospace;
  letter-spacing:.04em;
}

/* ============================================================
   LANDSCAPE — 3 columns, page doesn't scroll
   (Let aspect-ratio work by NOT stretching the grid row)
   ============================================================ */
@media (min-aspect-ratio: 1/1){
  html, body { height: 100dvh; overflow: hidden; }

  #app-wrapper{
    height:100%;
    display:grid;
    grid-template-columns: var(--brand-w) minmax(0,1fr) var(--side-w);
    gap: var(--gap);
    align-items: start;               /* <- don't stretch the row */
  }

  /* Keep one dimension auto so aspect-ratio applies.
     Cap width by the height-allowed 3:2 box so it never bleeds. */
  #keytar-container{
    place-self: start;                /* don't stretch */
    height: auto;                     /* aspect-ratio controls height */
    max-height: calc(100dvh - 2*var(--pad) - 2*var(--frame));
    width: min(
      100%,
      calc( (100dvh - 2*var(--pad) - 2*var(--frame)) * (3/2) )
    );
  }

  /* Sidebar can scroll within itself if needed */
  #sidebar{ max-height:100%; overflow:auto; }
}

/* ============================================================
   PORTRAIT — 3 rows, page may scroll
   ============================================================ */
@media (max-aspect-ratio: 1/1){
  html, body { height:auto; overflow:auto; }

  #app-wrapper{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "branding utility"
      "keytar   keytar"
      "settings settings";
    gap: var(--gap);
    align-items:start;
  }

  #branding{
    grid-area: branding;
    width:auto;
    max-width:var(--brand-w);
    justify-self:start;
    align-self:start;
  }

  #keytar-container{
    grid-area: keytar;
    width:100%;
    height:auto;
    max-width:100%;
    max-height:none;                   /* page can scroll in portrait */
  }

  #sidebar{
    display:contents;
    max-height:none;
    overflow:visible;
  }

  #sidebar .settings-panel{
    grid-area: settings;
    width:100%;
  }

  #sidebar .utility-panel{
    grid-area: utility;
    margin-top:0;
    align-self:start;
    justify-self:end;
    justify-content:flex-end;
    padding:.5rem;
  }
}

/* Active key/wire highlight inside the SVG */
#keytar-container .active,
#keytar-container svg .active {
  fill:  #30de28 !important;
  stroke:#30de28 !important;
  filter: drop-shadow(0 0 .35rem rgba(48,222,40,.9));
  transition: fill .06s, stroke .06s, filter .06s;
}

  #branding{ 
   transition: all .2s;
    transform: rotate(0deg) scale(1); 
  }
  #branding:hover {
    transform: rotate(-5deg) scale(1.2); 
  }