/* Minimal clean UI + HUD */
:root{
  --bg:#0c1220; --panel:#111a2e; --text:#e8f0ff; --muted:#9fb3d9; --accent:#00ffcc;
  --good:#31d07c; --warn:#e7b416; --bad:#ff4d6d;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; background:var(--bg); color:var(--text); font-family:system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; overflow:hidden; }
button{ border:0; background:#233357; color:var(--text); padding:.7rem 1.1rem; border-radius:12px; cursor:pointer; }
button.primary{ background:linear-gradient(135deg,#1f9ab0,#16c4a7); }
button.success{ background:linear-gradient(135deg,#2aa960,#2bd08a); }
button.secondary{ background:#21314f; }
button:disabled{ opacity:.6; cursor:not-allowed; }
input,select{ width:100%; padding:.6rem; border-radius:10px; border:1px solid #2a3b63; background:#0e1730; color:var(--text); }
label{ display:block; margin:.7rem 0; }
fieldset{ border:1px solid #2a3b63; border-radius:12px; padding:.8rem 1rem; }
legend{ padding:0 .4rem; color:var(--muted); }

.screen{ display:none; height:100%; }
.screen.visible{ display:block; }

.panel{ max-width:980px; margin:8vh auto; padding:1.2rem 1.4rem; background:var(--panel); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.panel-wide{ max-width:1080px; }

.subtitle{ color:var(--muted); }
.mt{ margin-top:.8rem; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.8rem; }
.settings-form{ display:flex; flex-direction:column; gap:.6rem; }
.settings-form .row-right{ margin-top:.6rem; }
.row-right{ display:flex; gap:.6rem; justify-content:flex-end; }
.small{ font-size:.9rem; color:var(--muted); }

/* Character creator */
.creator-panel{ padding:1.4rem 1.6rem; }
.creator-layout{ display:grid; grid-template-columns:minmax(320px,1fr) minmax(360px,1fr); gap:1.2rem; align-items:stretch; }
.creator-preview-column{ display:flex; }
.creator-preview-card{ position:relative; flex:1; min-height:440px; background:linear-gradient(180deg,#0c1426,#080d18); border:1px solid #1e2c4b; border-radius:18px; overflow:hidden; box-shadow:0 14px 40px rgba(4,8,16,.35); }
#creator-preview-canvas{ width:100%; height:100%; display:block; }
.creator-preview-hint{ position:absolute; left:0; right:0; bottom:0; padding:.55rem .85rem; background:linear-gradient(180deg,rgba(8,13,24,0),rgba(8,13,24,0.88)); font-size:.78rem; letter-spacing:.04em; text-align:center; color:var(--muted); }
.creator-form-column{ display:flex; flex-direction:column; gap:1rem; }
.creator-header h2{ margin:0 0 .2rem; }
.creator-selectors{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.75rem; }
.selector-group{ display:flex; flex-direction:column; gap:.35rem; padding:.65rem .75rem; background:rgba(15,24,42,0.75); border:1px solid #223356; border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,0.18) inset; }
.selector-group-inline{ grid-column:span 2; display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:.6rem; align-items:flex-start; }
.selector-group-inline .selector-field{ display:flex; flex-direction:column; gap:.35rem; }
.selector-group-inline .selector-label{ margin-bottom:0; }
.selector-group-accessories{ grid-column:1/-1; }
.selector-label{ font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.selector-group select{ width:100%; }
.accessory-grid{ display:flex; flex-wrap:wrap; gap:.45rem; }
.accessory-grid label{ display:flex; align-items:center; gap:.35rem; padding:.25rem .55rem; border-radius:10px; border:1px solid #25355a; background:#101a2e; cursor:pointer; transition:background .2s ease,border-color .2s ease; }
.accessory-grid input{ width:auto; }
.accessory-grid label:hover{ background:#16243f; border-color:#2f4573; }
.accessory-grid label.selected{ background:linear-gradient(135deg,rgba(30,154,176,0.4),rgba(22,196,167,0.4)); border-color:#32c5a9; color:#e8f9ff; }

@media (max-width: 1080px){
  .creator-layout{ grid-template-columns:1fr; }
  .selector-group-inline{ grid-column:1/-1; }
}

@media (max-width: 720px){
  .creator-preview-card{ min-height:360px; }
}

/* Game */
#game-canvas{ width:100%; height:100%; display:block; outline:none; }

#hud{ position:fixed; inset:0; pointer-events:none; padding:.6rem; }
.hud-left{ position:absolute; top:.6rem; left:.6rem; }
.hud-right{ position:absolute; top:.6rem; right:.6rem; min-width:260px; display:flex; flex-direction:column; gap:.55rem; align-items:stretch; }
#hud-name{ font-weight:700; }
#hud-nen,#hud-level{ font-size:.9rem; color:var(--muted); }

.bar{ height:12px; background:#1a2744; border-radius:12px; overflow:hidden; margin:.3rem 0; }
.bar.small{ height:8px; }
.bar>span{ display:block; height:100%; width:100%; background:linear-gradient(90deg,#ff6b6b,#ff9f6b); }
.bar.alt>span{ background:linear-gradient(90deg,#47a8bd,#00ffcc); }

#hud-bottom{ position:absolute; left:0; right:0; bottom:.6rem; display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:1.5rem; pointer-events:none; padding:0 1.5rem; }
#hud-bottom-left{ justify-self:end; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:flex-end; gap:.5rem; pointer-events:auto; max-width:min(34vw,460px); }
#hud-bottom-center{ justify-self:center; display:flex; flex-direction:column; align-items:center; pointer-events:none; }
#hud-bottom-right{ justify-self:start; display:flex; align-items:flex-end; pointer-events:auto; }
#hud-message{ padding:.4rem 1rem; background:#0f1a30cc; border:1px solid #27355e; border-radius:12px; max-width:min(70vw,440px); margin:0 0 5px; text-align:center; pointer-events:none; }
#cooldowns{ display:flex; gap:.4rem; pointer-events:auto; }
.cd{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:#101a2e; border:1px solid #27355e; color:#9fb3d9; position:relative; overflow:hidden; }
.cd::after{ content:""; position:absolute; inset:0; background:#0008; transform:translateY(100%); transition:transform .15s linear; }
.cd.cooling::after{ transform:translateY(var(--pct,100%)); }

.overlay{ position:fixed; inset:0; background:#0008; display:none; justify-content:center; align-items:center; z-index:10; }
.overlay.visible{ display:flex; }

.stat-row{ display:flex; justify-content:space-between; align-items:center; margin:.4rem 0; }
.stat-row .plus{ pointer-events:auto; padding:.3rem .6rem; }

/* Menu */
#screen--menu{ position:relative; overflow:hidden; }
#screen--menu .menu-bg{ position:absolute; inset:0; }
#screen--menu .menu-bg{ z-index:0; }
#menu-canvas{ width:100%; height:100%; display:block;
/* ↓ ADD: let clicks pass through the background canvas */
  pointer-events:none;
}
#screen--menu .menu-contents{
  position:relative; z-index:2; max-width:900px; margin:2.5rem auto; padding:1.25rem 1.5rem;
  background:linear-gradient(180deg,rgba(10,16,28,.65),rgba(10,16,28,.35));
  border:1px solid #223154; border-radius:16px; box-shadow:0 8px 40px rgba(0,0,0,.35); backdrop-filter:blur(4px);
/* ↓ ADD (explicit): the panel should accept clicks */
  pointer-events:auto;
}
const c = document.getElementById("menu-canvas");
if (c) c.style.pointerEvents = "none";

#screen--menu .btn-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin:.4rem 0 1rem; }
#screen--menu details.small summary{ cursor:pointer; }

/* Rig screen layout */
#screen--rig .rig-layout{
  --panel-w:0px; --panel-min:260px; --panel-max:60vw; --split-w:10px;
  display:grid; grid-template-columns:1fr var(--split-w) var(--panel-w); gap:.8rem; height:100%;
}
#screen--rig .rig-canvas-wrap{ position:relative; min-width:320px; height:100%; }

/* ADD: animation panel visibility + layout */
#anim-panel{
  display: none;                 /* hidden by default; shown when .anim-open is on */
  position: absolute;
  top: 8px; right: 8px; left: 8px;
  height: 50%;                   /* requested: reduce height by ~50% of view */
  max-height: 50vh;
  padding: 10px;
  overflow: auto;
  background: rgba(8,12,18,0.85);
  border: 1px solid #223154;
  border-radius: 10px;
  z-index: 5;                    /* above canvas/gizmos, below any modals */
}

/* when the screen has .anim-open, show the panel */
#screen--rig.anim-open #anim-panel{
  display: block;
}

#rig-canvas{ width:100%; height:100%; display:block; }
.rig-resizer, .rig-panel{ display:none; }

.anim-top{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.6rem;
}

.anim-top .transport{
  display:flex;
  align-items:center;
  gap:.35rem;
  flex-wrap:wrap;
}

.anim-top .transport input[type="range"]{
  width:220px;
}

.anim-top .transport button{
  min-width:32px;
}

.anim-top .right{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
}

.anim-top .right label{
  display:flex;
  gap:.3rem;
  align-items:center;
  font-size:.85rem;
  color:#c6d4ff;
}

.anim-top .right input{
  width:60px;
}

.timeline{
  position:relative;
  --timeline-label-width: 220px;
  min-height:240px;
  height:240px;
  background:linear-gradient(180deg, rgba(14,22,36,0.95), rgba(10,16,25,0.95));
  border:1px solid #1f2f50;
  border-radius:10px;
  overflow:hidden;
  user-select:none;
  cursor:default;
  display:flex;
  flex-direction:column;
  color:#c6d4ff;
}

.dope-header{
  display:flex;
  align-items:center;
  gap:0.4rem;
  height:38px;
  background:rgba(12,19,31,0.9);
  border-bottom:1px solid #26385f;
}

.dope-header-left{
  flex:0 0 var(--timeline-label-width);
  padding:0.4rem 0.6rem;
  border-right:1px solid #26385f;
  display:flex;
  align-items:center;
  gap:0.45rem;
  font-size:0.8rem;
}

.dope-filter{
  display:flex;
  align-items:center;
  gap:0.4rem;
  color:#8fb7ff;
  font-size:0.75rem;
}

.dope-filter select{
  background:#142035;
  border:1px solid #2a3c61;
  color:#c6d4ff;
  border-radius:6px;
  padding:0.15rem 0.45rem;
  font-size:0.75rem;
}

.dope-header-right{
  position:relative;
  flex:1;
  height:100%;
}

.timeline-ruler .tick{
  position:absolute;
  bottom:0;
  width:1px;
  background:#3d5a8c;
  height:100%;
}

.timeline-ruler .tick-label{
  position:absolute;
  top:6px;
  transform:translateX(-50%);
  font-size:0.7rem;
  color:#8fb7ff;
  pointer-events:none;
}

.dope-body{
  position:relative;
  flex:1;
  overflow:auto;
  background:rgba(9,15,24,0.85);
}

.dope-rows{
  display:flex;
  flex-direction:column;
}

.dope-row{
  display:flex;
  min-height:32px;
}

.dope-label{
  flex:0 0 var(--timeline-label-width);
  padding:0.45rem 0.7rem;
  border-right:1px solid #26385f;
  display:flex;
  align-items:center;
  gap:0.45rem;
  background:rgba(16,23,35,0.82);
  color:#c6d4ff;
  font-size:0.78rem;
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease;
}

.dope-label .label-text{
  flex:1;
}

.channel-indicators{
  display:flex;
  align-items:center;
  gap:0.35rem;
  margin-left:auto;
}

.channel-indicator{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(110,138,187,0.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18);
  pointer-events:none;
  transition:transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.channel-indicator.channel-pos[data-keyed="true"]{
  background:#4ec9b0;
  box-shadow:0 0 6px rgba(78,201,176,0.55);
}

.channel-indicator.channel-rot[data-keyed="true"]{
  background:#ffd166;
  box-shadow:0 0 6px rgba(255,209,102,0.55);
}

.channel-indicator.channel-scl[data-keyed="true"]{
  background:#56ccf2;
  box-shadow:0 0 6px rgba(86,204,242,0.55);
}

.channel-indicator[data-active="true"]{
  background:#ffef7a;
  box-shadow:0 0 10px rgba(255,239,122,0.85);
  transform:scale(1.2);
}

.dope-label.channel .channel-indicator{
  margin-right:0.5rem;
}

.dope-label.joint{
  font-weight:600;
}

.dope-label.channel{
  font-size:0.72rem;
  padding-left:1.3rem;
  background:rgba(14,22,36,0.78);
}

.dope-row.active .dope-label{
  background:linear-gradient(90deg, rgba(76,118,187,0.55), rgba(47,74,122,0.65));
  color:#ffffff;
}

.dope-row:hover .dope-label{
  background:rgba(34,52,88,0.68);
}

.dope-row.active:hover .dope-label{
  background:linear-gradient(90deg, rgba(76,118,187,0.55), rgba(47,74,122,0.65));
}

.dope-caret{
  all:unset;
  color:#8fb7ff;
  font-size:0.85rem;
  line-height:1;
  cursor:pointer;
  transition:color 0.15s ease;
}

.dope-caret:hover{
  color:#ffd166;
}

.dope-track{
  position:relative;
  flex:1;
  border-bottom:1px solid #1f2f50;
  min-height:32px;
  background:rgba(8,13,21,0.7);
}

.dope-track.channel{
  background:rgba(11,18,29,0.78);
}

.dope-track.channel::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    to right,
    rgba(44,66,104,0.35) 0,
    rgba(44,66,104,0.35) 1px,
    transparent 1px,
    transparent 12px
  );
  opacity:0.45;
  pointer-events:none;
}

.empty-msg{
  position:absolute;
  left:0.85rem;
  top:50%;
  transform:translateY(-50%);
  font-size:0.7rem;
  color:#5f739c;
  pointer-events:none;
}

.dope-empty{
  padding:1.5rem;
  text-align:center;
  font-size:0.85rem;
  color:#5f739c;
}

.dope-overlay{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--timeline-label-width);
  right:0;
  pointer-events:none;
  z-index:2;
}

.timeline-playhead{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:#ff4d6d;
  pointer-events:none;
  transform:translateX(-50%);
  box-shadow:0 0 8px rgba(255,77,109,0.55);
}

.timeline-playhead::after{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%, -50%) rotate(45deg);
  width:14px;
  height:14px;
  background:#ff4d6d;
  border-radius:2px;
}

.playhead-handle{
  position:absolute;
  top:0;
  width:26px;
  height:26px;
  transform:translate(-50%, -60%);
  cursor:ew-resize;
  pointer-events:auto;
  z-index:3;
}

.playhead-handle::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) rotate(45deg);
  width:16px;
  height:16px;
  background:rgba(255,77,109,0.92);
  border-radius:2px;
  box-shadow:0 0 8px rgba(255,77,109,0.65);
}

.dope-selection{
  position:absolute;
  border:1px dashed rgba(143,183,255,0.6);
  background:rgba(143,183,255,0.15);
  pointer-events:none;
}

.timeline-key{
  position:absolute;
  width:14px;
  height:14px;
  transform:translate(-50%, -50%) rotate(45deg);
  top:50%;
  border-radius:2px;
  cursor:pointer;
  border:1px solid rgba(0,0,0,0.45);
  transition:transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  --timeline-key-shadow: none;
  box-shadow:var(--timeline-key-shadow);
  overflow:visible;
  z-index:1;
}

.timeline-key.channel-pos{
  background:#4ec9b0;
  border-color:#0f3b35;
  --timeline-key-shadow:0 0 6px rgba(78,201,176,0.55);
}

.timeline-key.channel-rot{
  background:#ffd166;
  border-color:#604b14;
  --timeline-key-shadow:0 0 6px rgba(255,209,102,0.6);
}

.timeline-key.channel-scl{
  background:#56ccf2;
  border-color:#14485d;
  --timeline-key-shadow:0 0 6px rgba(86,204,242,0.6);
}

.timeline-key::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:4px;
  background:linear-gradient(135deg, rgba(255,243,168,0.35), rgba(255,209,102,0.18));
  opacity:0;
  pointer-events:none;
  box-shadow:0 0 10px rgba(255,226,138,0.45);
  transition:opacity 0.12s ease;
}

.timeline-key.selected{
  border-color:#ffe28a;
  box-shadow:var(--timeline-key-shadow), 0 0 12px rgba(255,226,138,0.75);
  filter:brightness(1.05) saturate(1.15);
  z-index:2;
}

.timeline-key.selected::before{
  opacity:1;
}

.timeline-key.dragging{
  opacity:0.75;
}

.timeline-key:hover{
  transform:translate(-50%, -50%) rotate(45deg) scale(1.08);
}

/* Toolbar on canvas */
.rig-toolbar{
  position:absolute; left:.6rem; top:.6rem; z-index:2; display:flex; flex-direction:column; gap:.4rem;
  background:#0f1a30cc; border:1px solid #27355e; border-radius:10px; padding:.45rem .55rem; backdrop-filter:blur(2px);
}
.rig-toolbar .btns{ display:flex; g

#hud-control-dock .hud-cosmetic-card {
  flex: 1 1 220px;
}

#hud-control-dock .cosmetic-test-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

#hud-control-dock .hud-cosmetic-card button {
  flex: 1 1 120px;
}