:root {
  color-scheme: dark;
  --ink: #17201e;
  --paper: rgb(246 244 234 / 94%);
  --paper-solid: #f2efe4;
  --line: rgb(23 32 30 / 16%);
  --green: #315a53;
  --amber: #b58a24;
  --red: #a84133;
  font-family: "Yu Gothic UI", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #202825;
}

body { color: var(--ink); }

[hidden] { display: none !important; }

#quality-app { position: fixed; inset: 0; }

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}

#scene.is-looking { cursor: grabbing; }

#brand {
  position: absolute;
  top: clamp(16px, 2.4vw, 32px);
  left: clamp(16px, 3vw, 42px);
  max-width: 30rem;
  padding: 0.8rem 1.15rem 0.85rem;
  color: #f4f1e6;
  background: linear-gradient(90deg, rgb(19 27 25 / 74%), rgb(19 27 25 / 18%));
  border-left: 2px solid rgb(235 216 160 / 78%);
  text-shadow: 0 1px 10px rgb(0 0 0 / 48%);
  pointer-events: none;
}

#brand .eyebrow { margin: 0 0 0.25rem; font-size: 0.72rem; letter-spacing: 0.18em; opacity: 0.8; }
#brand h1 { margin: 0; font-size: clamp(1.45rem, 2.4vw, 2.35rem); font-weight: 650; letter-spacing: 0.04em; }
#brand p:last-child { margin: 0.35rem 0 0; font-size: 0.9rem; line-height: 1.55; opacity: 0.86; }

#panel {
  position: absolute;
  top: clamp(14px, 2vw, 26px);
  right: clamp(14px, 2.4vw, 34px);
  width: min(22rem, calc(100vw - 2rem));
  max-height: calc(100vh - 6rem);
  overflow: auto;
  padding: 0.95rem;
  background: var(--paper);
  border: 1px solid rgb(255 255 255 / 34%);
  box-shadow: 0 18px 50px rgb(0 0 0 / 26%);
  backdrop-filter: blur(12px);
}

#status-box { padding: 0.65rem 0.7rem; background: rgb(255 255 255 / 48%); border: 1px solid var(--line); }
#status { margin: 0; font-size: 0.98rem; font-weight: 700; letter-spacing: 0.02em; }
#status[data-tone="ready"] { color: var(--green); }
#status[data-tone="loading"] { color: #7c5c12; }
#status[data-tone="error"] { color: var(--red); }
#status-detail { margin: 0.25rem 0 0; font-size: 0.76rem; line-height: 1.45; color: rgb(23 32 30 / 72%); overflow-wrap: anywhere; }

.chooser { margin: 0.9rem 0 0; padding: 0; border: 0; }
.chooser legend, .section-label { margin: 0 0 0.35rem; padding: 0; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; color: var(--green); }
.hint, .privacy { margin: 0.25rem 0 0; font-size: 0.7rem; line-height: 1.5; color: rgb(23 32 30 / 64%); }

.button-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }

button, .file-button {
  appearance: none;
  border: 1px solid rgb(30 50 46 / 24%);
  border-radius: 2px;
  background: linear-gradient(#fffdf5, #e7e3d5);
  color: var(--ink);
  padding: 0.46rem 0.62rem;
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 1px 0 rgb(255 255 255 / 60%) inset, 0 2px 5px rgb(0 0 0 / 8%);
}

button:hover, .file-button:hover { border-color: rgb(49 90 83 / 55%); background: linear-gradient(#fffef8, #efecdf); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: default; transform: none; }
button[aria-pressed="true"] { background: var(--green); color: #f8f5e9; border-color: #223f3a; }

.file-button { display: block; margin-top: 0.5rem; text-align: center; }
.file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

#model-card { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
#character-link { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
#character-link .file-button { display: block; text-decoration: none; }
#npc-card { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
#npc-card .section-label { margin-bottom: 0.3rem; }
#npc-status { margin: 0; font-size: 0.82rem; font-weight: 700; }
#npc-detail { margin: 0.2rem 0 0; font-size: 0.7rem; line-height: 1.46; color: rgb(23 32 30 / 64%); overflow-wrap: anywhere; }
#model-name { margin: 0.15rem 0 0; font-weight: 700; font-size: 0.86rem; overflow-wrap: anywhere; }
#model-note { margin: 0.2rem 0 0.5rem; font-size: 0.7rem; line-height: 1.48; color: rgb(23 32 30 / 68%); }
#model-facts { display: grid; grid-template-columns: 6.2rem 1fr; gap: 0.18rem 0.6rem; margin: 0; font-size: 0.7rem; }
#model-facts dt { color: rgb(23 32 30 / 58%); }
#model-facts dd { margin: 0; overflow-wrap: anywhere; }

#clip-controls { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.small-button { padding: 0.32rem 0.5rem; font-size: 0.68rem; }
.speed-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; }
.speed-label input { width: 5.4rem; accent-color: var(--green); }

#technical { margin-top: 0.85rem; padding-top: 0.65rem; border-top: 1px solid var(--line); }
#technical summary { cursor: pointer; font-size: 0.74rem; font-weight: 700; color: var(--green); }
.technical-list { display: grid; grid-template-columns: 5.1rem 1fr; gap: 0.22rem 0.55rem; margin: 0.6rem 0 0; font-size: 0.66rem; line-height: 1.45; }
.technical-list dt { color: rgb(23 32 30 / 58%); }
.technical-list dd { margin: 0; overflow-wrap: anywhere; }
.warning { margin: 0.55rem 0 0; font-size: 0.66rem; line-height: 1.45; color: var(--red); }
.warning[data-warning="false"] { color: rgb(23 32 30 / 58%); }
.note { margin: 0.5rem 0 0; font-size: 0.64rem; line-height: 1.45; color: rgb(23 32 30 / 58%); }

#help {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.8rem;
  max-width: min(42rem, calc(100vw - 17rem));
  padding: 0.48rem 0.8rem;
  color: rgb(247 244 232 / 88%);
  background: rgb(20 28 26 / 64%);
  border: 1px solid rgb(255 255 255 / 14%);
  font-size: 0.68rem;
  pointer-events: none;
  text-shadow: 0 1px 6px rgb(0 0 0 / 68%);
}
#help b { color: #f0d99a; font-weight: 700; }

#move-pad {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 6.6rem;
  height: 6.6rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  opacity: 0.8;
}
#move-pad button { padding: 0; font-size: 0.8rem; }
#move-pad [data-move="forward"] { grid-column: 2; grid-row: 1; }
#move-pad [data-move="left"] { grid-column: 1; grid-row: 2; }
#move-pad [data-move="back"] { grid-column: 2; grid-row: 2; }
#move-pad [data-move="right"] { grid-column: 3; grid-row: 2; }

#turn-switches {
  position: absolute;
  left: 18px;
  bottom: 7.35rem;
  display: flex;
  gap: 0.35rem;
}
#turn-switches button {
  min-width: 4.9rem;
  padding: 0.48rem 0.62rem;
  border-color: rgb(236 209 131 / 45%);
  background: rgb(24 34 31 / 78%);
  color: #fff7dc;
  font-size: 0.72rem;
  font-weight: 700;
}

#reset-view { position: absolute; right: 22px; bottom: 20px; font-size: 0.72rem; }

#future-note {
  position: absolute;
  left: 50%;
  bottom: 4.8rem;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.42rem 0.7rem;
  color: #fff8e6;
  background: rgb(40 34 20 / 78%);
  border-left: 2px solid #d6b75e;
  font-size: 0.76rem;
}

#file-fallback {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background:
    radial-gradient(circle at 25% 15%, rgb(197 177 116 / 16%), transparent 32%),
    linear-gradient(145deg, #26302d, #111715);
}
.fallback-card { width: min(38rem, 100%); padding: clamp(1.2rem, 4vw, 2.6rem); background: var(--paper-solid); border: 1px solid rgb(255 255 255 / 45%); box-shadow: 0 28px 80px rgb(0 0 0 / 48%); }
.fallback-card .eyebrow { margin: 0 0 0.6rem; color: var(--green); font-size: 0.7rem; letter-spacing: 0.16em; }
.fallback-card h1 { margin: 0; font-size: clamp(1.25rem, 3vw, 1.85rem); line-height: 1.45; }
.fallback-card p { margin: 1rem 0 0; font-size: 0.9rem; line-height: 1.8; }
.fallback-card a { color: var(--green); font-weight: 700; }
.fallback-card code { display: block; margin-top: 0.9rem; font-size: 0.64rem; color: rgb(23 32 30 / 58%); overflow-wrap: anywhere; }

noscript { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 2rem; background: #f2efe4; color: #17201e; font-size: 1rem; }

@media (max-width: 820px) {
  #panel { top: auto; right: 10px; bottom: 10px; width: min(21rem, calc(100vw - 20px)); max-height: 56vh; }
  #brand { max-width: calc(100vw - 2rem); }
  #help { display: none; }
  #move-pad { bottom: auto; top: 10.5rem; left: 10px; opacity: 0.72; }
  #turn-switches { bottom: auto; top: 17.4rem; left: 10px; opacity: 0.82; }
  #reset-view { display: none; }
  #future-note { bottom: auto; top: 17.5rem; }
}