@font-face {
  font-family: "Joystix";
  src: url("font/joystix.otf") format("opentype");
  font-display: block;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg, #008241);
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

#stage {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  /* phones: full width. bigger screens: a portrait column, wider than a phone */
  width: min(100vw, 720px, max(440px, 62vh));
  overflow: hidden;
  background: var(--bg, #008241);
  font-family: "Joystix", monospace;
  text-transform: uppercase;
  visibility: hidden;
}
#stage.ready { visibility: visible; }

#stage > * { position: absolute; margin: 0; box-sizing: border-box; }

.logo { z-index: 1; pointer-events: none; }
.logo svg { display: block; width: 100%; height: 100%; overflow: visible; }

.media { z-index: 2; object-fit: cover; display: block; background: #000; }

.line {
  z-index: 3; white-space: pre; pointer-events: none;
  font-size: var(--f-medium); line-height: var(--lh-medium);
}

.box {
  z-index: 4; overflow: hidden; word-break: normal; overflow-wrap: anywhere;
  font-size: var(--f-small); line-height: var(--lh-small);
}

.sq { z-index: 5; }

.btn {
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
  white-space: pre;
  font-size: var(--f-large);
  font-weight: normal;
  -webkit-tap-highlight-color: transparent;
}
a.btn:active { filter: invert(1); }

/* ---------- sub page panel ---------- */
.panel {
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 24);
  padding: calc(var(--u) * 40);
  overflow: hidden;
}
.panel p, .panel h2 { margin: 0; font-weight: normal; }
.p-large { font-size: var(--f-large); line-height: 1.2; }
.p-medium { font-size: var(--f-medium); line-height: var(--lh-medium); }
.p-small { font-size: var(--f-small); line-height: var(--lh-small); }
.p-center { justify-content: center; align-items: center; text-align: center; }
.p-bottom { margin-top: auto; display: flex; flex-direction: column; gap: calc(var(--u) * 20); }

.pbtn {
  font: inherit;
  font-size: var(--f-medium);
  line-height: 1;
  text-transform: uppercase;
  border: 0;
  border-radius: 0;
  padding: calc(var(--u) * 30) calc(var(--u) * 20);
  background: var(--pt);
  color: var(--pc);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.pbtn:active { filter: invert(1); }

.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- MUSIK player ---------- */
.mframe { z-index: 4; }
.mframe button { font: inherit; text-transform: uppercase; border: 0; border-radius: 0; padding: 0; margin: 0; cursor: pointer; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; }
.mp { position: absolute; background: var(--mp); }
.mp::before {
  content: ""; position: absolute; pointer-events: none;
  inset: calc(var(--u) * 10);
  border: calc(var(--u) * 5) solid var(--ml);
}
.mp > * { position: absolute; box-sizing: border-box; }
.m-box { background: var(--mb); color: var(--mp); overflow: hidden; }
.m-box > * { position: absolute; }
.m-display .m-state svg { width: 100%; height: 100%; fill: var(--mp); }
.m-time { display: flex; align-items: center; justify-content: flex-end; line-height: 1; letter-spacing: 0; }
.m-title { display: flex; align-items: center; white-space: pre; }
.m-marq { position: static !important; padding-left: calc(var(--u) * 13); display: inline-block; }
.m-marq.run { animation: marq linear infinite; padding-left: 0; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.m-num { display: flex; align-items: center; justify-content: center; }
.m-label { display: flex; align-items: center; color: var(--mt); white-space: pre; }
.m-label b { font-weight: normal; }
.m-ms { color: var(--mb); }
.m-dim { opacity: .35; }

.m-ctl { background: var(--ml); color: var(--mp); display: flex; align-items: center; justify-content: center; }
.m-ctl svg { width: 62%; height: 62%; fill: currentColor; }
.m-ctl:active { filter: invert(1); }
.m-tog { background: var(--mf); color: var(--ml); display: flex; align-items: center; justify-content: center; }
.m-tog i { position: absolute; left: calc(var(--u) * 10); top: calc(var(--u) * 7); width: calc(var(--u) * 13); height: calc(var(--u) * 10); background: var(--ml); opacity: .25; }
.m-tog.on i { opacity: 1; }

.mrange { -webkit-appearance: none; appearance: none; background: transparent; margin: 0; padding: 0; cursor: pointer; touch-action: none; }
.mrange:focus { outline: none; }
.mrange::-webkit-slider-runnable-track { height: var(--th); background: var(--tc); }
.mrange::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; border: 0; border-radius: 0;
  width: var(--kw); height: var(--kh); background: var(--kc);
  margin-top: calc((var(--th) - var(--kh)) / 2);
}
.mrange::-moz-range-track { height: var(--th); background: var(--tc); border: 0; }
.mrange::-moz-range-thumb { border: 0; border-radius: 0; width: var(--kw); height: var(--kh); background: var(--kc); }

.mp-list { overflow: hidden; }
.m-rows {
  position: absolute; inset: calc(var(--u) * 15); padding: calc(var(--u) * 30) calc(var(--u) * 18);
  margin: 0; list-style: none; overflow-y: auto; color: var(--mt);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.m-rows::-webkit-scrollbar { display: none; }
.m-rows li { display: flex; justify-content: space-between; gap: calc(var(--u) * 20); cursor: pointer; white-space: nowrap; }
.m-rows li .m-name { overflow: hidden; text-overflow: clip; }
.m-rows li.cur { color: var(--mb); }
.m-rows li:active { color: var(--ma); }

/* video */
.vid { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; flex: none; }
.vid iframe, .vid .yt, .vid .poster, .vid .hit {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.vid .poster { object-fit: cover; transition: opacity .15s; }
.vid .hit { background: transparent; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.is-playing .vid .poster { opacity: 0; pointer-events: none; }
.vmeta { display: flex; flex-direction: column; gap: calc(var(--u) * 10); min-height: 0; overflow: hidden; }
.ctrls { margin-top: auto; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: calc(var(--u) * 20); }
.p-mail { color: inherit; text-decoration: none; text-transform: none; text-align: center; }