/* ============================================================
   Xorin feature scenes — shared core
   Palette sampled directly from the reference Unity captures.
   Every scene is authored inside a fixed 600 x 628 frame and
   scaled to its container by fit() in each scene file.
   ============================================================ */

:root {
  /* Unity editor chrome */
  --u-bar:    #2f2f2f;
  --u-panel:  #383838;
  --u-proj:   #333333;
  --u-field:  #2a2a2a;
  --u-sel:    #385c83;
  --u-line:   #232323;
  --u-text:   #d2d2d2;
  --u-dim:    #9a9a9a;

  /* Xorin panel */
  --x-panel:  #1a1a1a;
  --x-card:   #2b2b2b;
  --x-comp:   #292929;
  --x-user:   #3c5eb5;
  --x-name:   #7696d9;
  --x-amber:  #a39367;
  --x-green:  #6e9866;
  --x-ok:     #77db89;
  --x-err:    #e77975;
  --x-dot:    #7abc6e;
  --x-btn:    #354a80;
  --x-undo:   #c98f8e;

  --x-body:   #cfcfcf;
  --x-muted:  #8f8f8f;
  --x-faint:  #6a6a6a;
}

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

body {
  background: transparent;
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---------- frame + stage ---------- */
#frame {
  position: relative;
  flex: none;
  width: 600px;
  height: 628px;
  transform-origin: 50% 50%;
}
#stage { position: absolute; inset: 0; transform-origin: 50% 50%; }

.editor {
  position: absolute;
  inset: 0;
  background: var(--u-panel);
  border: 1px solid #1c1c1c;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 26px 55px -26px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .04);
}

/* ---------- window bar ---------- */
.win {
  position: absolute; left: 0; top: 0; width: 100%; height: 30px;
  background: var(--u-bar);
  border-bottom: 1px solid var(--u-line);
  display: flex; align-items: center; gap: 7px;
  padding: 0 12px;
}
.win .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.win .d1 { background: #f45d4c; } .win .d2 { background: #f5b32c; } .win .d3 { background: #4fc648; }
.win .title {
  flex: 1; text-align: center;
  font-size: 10.5px; letter-spacing: .2px; color: #8e8e8e;
  margin-right: 34px; white-space: nowrap;
}

/* ---------- generic Unity panel bits ---------- */
.ptab {
  height: 24px; display: flex; align-items: center; gap: 14px;
  padding: 0 10px; background: var(--u-proj);
  border-bottom: 1px solid var(--u-line);
}
.ptab span { font-size: 10px; color: var(--u-dim); white-space: nowrap; }
.ptab span.on { color: #e6e6e6; }

.hrow {
  position: relative; height: 20px; display: flex; align-items: center;
  gap: 6px; padding-left: 10px; font-size: 10.5px; color: var(--u-text);
  white-space: nowrap;
}
.hrow .hl {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: var(--u-sel); transform: scaleX(0); transform-origin: 0 50%;
}
.hrow .lbl, .hrow .cube, .hrow .arrow { position: relative; z-index: 1; }
.cube { width: 9px; height: 9px; flex: none; opacity: .8; }
.cube svg { display: block; width: 9px; height: 9px; }
.arrow { width: 7px; color: var(--u-dim); font-size: 7px; flex: none; }

/* ---------- Xorin panel ---------- */
.xpanel { background: var(--x-panel); }
.xhead {
  height: 28px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; border-bottom: 1px solid #262626;
}
.xhead .who { font-size: 10.5px; color: var(--x-name); font-weight: 600; }
.xhead .spend { margin-left: auto; font-size: 9.5px; color: var(--x-faint); font-family: "Fira Mono", monospace; }

.bub {
  background: var(--x-user); border-radius: 8px;
  padding: 9px 12px; font-size: 11.5px; line-height: 17px; color: #f2f4fb;
}
.card {
  background: var(--x-card); border-radius: 8px; padding: 11px 13px;
}
.card .name { font-size: 10px; color: var(--x-name); font-weight: 600; margin-bottom: 6px; }
.card p { font-size: 11.5px; line-height: 18px; color: var(--x-body); }

.eyebrow {
  font-family: "Fira Mono", monospace; font-size: 8.5px; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--x-faint);
}
.amber { color: var(--x-amber); font-weight: 600; font-size: 11px; }
.greenit { color: var(--x-green); font-style: italic; font-size: 10px; line-height: 16px; }

.chip {
  display: flex; align-items: center; gap: 8px;
  height: 26px; padding: 0 9px; border-radius: 6px;
  background: #232323; border: 1px solid #333;
}
.chip .ico {
  width: 15px; height: 15px; flex: none; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Fira Mono", monospace; font-size: 7.5px; font-weight: 700; color: #fff;
}
.chip .ct { font-size: 10px; color: var(--x-body); white-space: nowrap; }
.chip .cp { margin-left: auto; font-family: "Fira Mono", monospace; font-size: 8px; color: var(--x-faint); }

.btn {
  height: 22px; padding: 0 11px; border-radius: 4px; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; white-space: nowrap;
}
.btn-primary { background: var(--x-btn); color: #e8ecf7; }
.btn-ghost   { background: #303030; color: var(--x-body); border-color: #3d3d3d; }
.btn-danger  { background: transparent; color: var(--x-undo); border-color: rgba(201,143,142,.55); }

.badge {
  height: 15px; padding: 0 6px; border-radius: 3px;
  display: inline-flex; align-items: center;
  font-family: "Fira Mono", monospace; font-size: 8px; letter-spacing: .6px;
  background: #2f3a2f; color: var(--x-dot);
}

.composer {
  background: var(--x-comp); border: 1px solid #383838; border-radius: 9px;
  padding: 9px 11px;
}
.composer .ph { font-size: 10.5px; color: #6d6d6d; font-style: italic; }
.composer .row { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.composer .opt { font-size: 9.5px; color: var(--x-muted); white-space: nowrap; }
.composer .send {
  margin-left: auto; width: 19px; height: 19px; border-radius: 4px;
  background: var(--x-btn); display: flex; align-items: center; justify-content: center;
  color: #e8ecf7; font-size: 10px;
}

.statusbar {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 22px;
  background: var(--u-bar); border-top: 1px solid var(--u-line);
  display: flex; align-items: center; gap: 6px; padding: 0 12px;
  font-size: 9px; color: #9d9d9d; white-space: nowrap; overflow: hidden;
}

/* ---------- viewport ---------- */
.view { position: relative; overflow: hidden; background: #2d2d2d; }
.view img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- word-split streaming text ---------- */
.w { display: inline-block; will-change: transform, filter, opacity; }

/* ---------- check rows ---------- */
.ck { display: flex; align-items: center; gap: 9px; height: 18px; }
.ck .mk { width: 11px; flex: none; font-size: 10px; line-height: 1; text-align: center; }
.ck .ct { font-size: 10.5px; color: var(--x-body); white-space: nowrap; }
.ck .tm { margin-left: auto; font-family: "Fira Mono", monospace; font-size: 8.5px; color: var(--x-faint); }