:root {
  color: #d7d9dd;
  background: #111317;
  font: 13px/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 0; height: 100%; margin: 0; overflow: hidden; }
button { color: inherit; font: inherit; touch-action: manipulation; }
button:focus-visible, summary:focus-visible { outline: 2px solid #d2a568; outline-offset: -2px; }

.workspace {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: #17191e;
}

.explorer {
  min-width: 0;
  overflow: auto;
  border-right: 1px solid #30333a;
  background: #15171b;
}

.explorer > header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: grid;
  gap: 4px;
  padding: 13px 15px 12px;
  border-bottom: 1px solid #2a2d33;
  background: rgba(21, 23, 27, .96);
}

.explorer > header span { color: #858b96; font-size: 10px; letter-spacing: .14em; }
.explorer > header strong { color: #e4e6e9; font-size: 13px; font-weight: 580; }
#actor-tree { padding: 8px 0 30px; }

details { color: #c4c7cc; }
summary {
  display: flex;
  align-items: center;
  min-height: 27px;
  padding: 2px 10px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

summary::-webkit-details-marker { display: none; }
summary::before {
  width: 14px;
  color: #7e8490;
  content: "›";
  font-size: 17px;
  line-height: 1;
  transform: rotate(0);
}

details[open] > summary::before { transform: rotate(90deg); }
summary::after { margin-left: 7px; color: #c4a867; content: "▰"; font-size: 10px; }
summary:hover, .tree-actor:hover { background: #23262c; }
.tree-group { margin-left: 13px; border-left: 1px solid #282b31; }

.tree-actor {
  display: block;
  width: 100%;
  min-height: 27px;
  padding: 3px 12px 3px 29px;
  overflow: hidden;
  border: 0;
  background: transparent;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.tree-actor::before { display: inline-block; width: 20px; margin-left: -20px; color: #c4a867; content: "▰"; font-size: 10px; }
.tree-actor.is-selected { color: #fff; background: #30343c; box-shadow: inset 2px 0 #d2a568; }

.viewer { display: grid; min-width: 0; grid-template-rows: 39px minmax(0, 1fr) 72px; }
.tabbar { display: flex; align-items: stretch; overflow: hidden; border-bottom: 1px solid #30333a; background: #111317; }
.tab {
  display: block;
  max-width: 520px;
  height: 38px;
  padding: 11px 20px 9px;
  overflow: hidden;
  color: #aeb2b9;
  border-right: 1px solid #30333a;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab.is-active { color: #eceef1; background: #1b1e23; box-shadow: inset 0 1px #d2a568; }

.action-buttons { display: flex; align-items: center; gap: 5px; min-width: 0; margin-left: auto; padding: 4px 10px; }
.action-button {
  min-width: 58px;
  height: 29px;
  padding: 0 12px;
  border: 1px solid #343840;
  border-radius: 3px;
  background: #1b1e23;
  color: #aeb2b9;
  cursor: pointer;
}
.action-button:hover { border-color: #7f6a4e; background: #252930; }
.action-button.is-selected { border-color: #b9915e; background: #332b22; color: #f1dfbd; }

.stage-shell { display: grid; min-height: 0; place-items: center; padding: 24px; overflow: hidden; background: #1b1e23; }
.stage {
  position: relative;
  width: min(100%, calc((100vh - 160px) * 16 / 9));
  max-height: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid #3a3e46;
  background: #0b0c0e var(--stage-background, none) center 55% / cover no-repeat;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .45);
}

.stage-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 3, 2, .28), transparent 45%, rgba(4, 3, 2, .2));
  pointer-events: none;
}

.stage::after {
  position: absolute;
  right: 5%;
  bottom: 6%;
  width: 38%;
  height: 19%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .82), transparent 68%);
  filter: blur(9px);
  content: "";
}

.fighter {
  position: absolute;
  z-index: 2;
  left: 74%;
  top: 79%;
  width: 19.6875%;
  height: 79.17%;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
}

.fighter[data-side="enemy"] { transform: translate(-50%, -100%) scaleX(-1); }
.actor-motion { position: absolute; inset: 0 0 5.4%; filter: drop-shadow(0 18px 13px rgba(0, 0, 0, .82)); }
.sprite-canvas {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 190.5%;
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, 10.16%);
}

.empty-state {
  position: absolute;
  z-index: 4;
  inset: 50% auto auto 50%;
  margin: 0;
  color: #8f949d;
  transform: translate(-50%, -50%);
}

.transport {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(120px, 28vw) 76px auto auto;
  align-items: center;
  gap: 13px;
  padding: 11px 18px;
  border-top: 1px solid #30333a;
  background: #15171b;
}

.animation-readout { display: grid; min-width: 0; gap: 2px; }
.animation-readout strong, .animation-readout span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.animation-readout strong { color: #e8e9eb; font-weight: 560; }
.animation-readout span { color: #858b96; font: 11px/1.3 ui-monospace, monospace; }
.progress { height: 3px; overflow: hidden; background: #30343b; }
.progress i { display: block; width: 100%; height: 100%; background: #d2a568; transform: scaleX(0); transform-origin: left; }
.frame-readout { color: #9ea3ac; font: 12px/1 ui-monospace, monospace; text-align: center; }
.transport button {
  min-width: 84px;
  height: 36px;
  padding: 0 15px;
  border: 1px solid #444953;
  border-radius: 3px;
  background: #252930;
  cursor: pointer;
}
.transport button:hover:not(:disabled) { border-color: #b9915e; background: #30343c; }
.transport button:disabled { color: #696e77; cursor: default; }

@media (max-width: 1100px) {
  .workspace { grid-template-columns: 230px minmax(0, 1fr); }
  .transport { grid-template-columns: minmax(190px, 1fr) 100px 70px auto auto; gap: 8px; }
  .progress { display: none; }
  .action-button { min-width: 50px; padding-inline: 8px; }
}

@media (max-width: 767px) {
  :root { font-size: 14px; }

  .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56px minmax(0, 1fr);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }

  .explorer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid #30333a;
  }

  .explorer > header {
    position: static;
    align-content: center;
    min-width: 88px;
    padding: 8px 12px;
    border-right: 1px solid #2a2d33;
    border-bottom: 0;
  }

  .explorer > header span { display: none; }
  .explorer > header strong { font-size: 13px; white-space: nowrap; }

  #actor-tree {
    min-width: 0;
    padding: 6px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  #actor-tree details { height: 100%; }
  #actor-tree summary { display: none; }

  .tree-group {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 6px;
    margin-left: 0;
    border-left: 0;
  }

  .tree-actor {
    flex: 0 0 auto;
    width: auto;
    max-width: min(66vw, 240px);
    min-height: 44px;
    padding: 0 13px 0 30px;
    border: 1px solid #30343b;
    border-radius: 4px;
    background: #1b1e23;
    font-size: 13px;
  }

  .tree-actor.is-selected { border-color: #7f6a4e; box-shadow: inset 0 -2px #d2a568; }

  .viewer { grid-template-rows: auto minmax(0, 1fr) auto; }

  .tabbar { flex-direction: column; align-items: stretch; overflow: visible; }

  .tab {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 37px;
    padding: 8px 12px;
    border-right: 0;
    border-bottom: 1px solid #30333a;
  }

  .action-buttons {
    width: 100%;
    gap: 6px;
    margin-left: 0;
    padding: 6px 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .action-buttons::-webkit-scrollbar { display: none; }

  .action-button {
    flex: 1 0 64px;
    min-width: 64px;
    height: 44px;
    padding: 0 10px;
    font-size: 14px;
  }

  .stage-shell { padding: clamp(8px, 3vw, 14px); }
  .stage { width: min(100%, calc((100dvh - 302px) * 16 / 9)); box-shadow: 0 14px 38px rgba(0, 0, 0, .42); }

  .empty-state { max-width: 80%; font-size: 14px; text-align: center; }

  .transport {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "readout frame"
      "progress progress"
      "play restart";
    gap: 8px 12px;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  }

  .animation-readout { grid-area: readout; }
  .animation-readout strong { font-size: 14px; }
  .animation-readout span { font-size: 13px; }
  .progress { display: block; grid-area: progress; }
  .frame-readout { grid-area: frame; font-size: 13px; }
  #play-toggle { grid-area: play; }
  #restart { grid-area: restart; }

  .transport button {
    width: 100%;
    min-width: 0;
    height: 44px;
  }
}

@media (max-width: 420px) {
  .explorer { grid-template-columns: minmax(0, 1fr); }
  .explorer > header { display: none; }
  .tree-actor { max-width: 76vw; }
}

@media (max-width: 767px) and (max-height: 600px) {
  .workspace { grid-template-rows: 48px minmax(0, 1fr); }
  .explorer { grid-template-columns: minmax(0, 1fr); }
  .explorer > header { display: none; }
  #actor-tree { padding-block: 2px; }

  .viewer { grid-template-rows: 44px minmax(0, 1fr) 56px; }
  .tabbar { flex-direction: row; min-width: 0; }

  .tab {
    flex: 0 1 38%;
    width: auto;
    min-width: 140px;
    min-height: 44px;
    height: 44px;
    padding: 12px;
    border-right: 1px solid #30333a;
    border-bottom: 0;
  }

  .action-buttons {
    flex: 1;
    width: auto;
    min-width: 0;
    height: 44px;
    padding: 2px 6px;
  }

  .action-button { min-width: 58px; height: 40px; }
  .stage-shell { padding: 6px; }
  .stage { width: min(100%, calc((100dvh - 160px) * 16 / 9)); }

  .transport {
    grid-template-columns: minmax(130px, 1fr) 64px minmax(80px, .55fr) minmax(96px, .7fr);
    grid-template-areas: "readout frame play restart";
    gap: 8px;
    padding: 6px 8px max(6px, env(safe-area-inset-bottom));
  }

  .animation-readout span, .progress { display: none; }
}