@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;900&family=Inconsolata:wght@300;400;700&family=Ubuntu:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');
:root{
  --bg:#070a0e;--panel:#0c1018;--border:#182030;--hi:#243448;
  --red:#d95f4a;--amber:#c8893a;--green:#4a9e6a;--blue:#4e88be;
  --plum:#8a6ab8;--teal:#4aadaa;
  --text:#b8ccdc;--muted:#3a5060;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inconsolata',monospace;
  height:100svh;padding:0px;overflow-x:hidden;
}
/* Camera background */
#cam-bg{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);opacity:0.13;
  pointer-events:none;
  transform:scaleX(-1); /* mirror */
}
#cam-diff{display:none;}
body>*{position:relative;z-index:1;}
/* 初期画面タイトル（ビューポート中央・白） */
.title-hero{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.title-hero[hidden]{
  display:none !important;
}
.title-hero h1{
  font-family:'Ubuntu',sans-serif;font-weight:500;
  color:#fff;text-align:center;margin:0;
  font-size:10vw;line-height:1.12;
}
@media (orientation:landscape){
  .title-hero h1{font-size:5vw;}
}
body::before{
  content:'';position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.025) 2px,rgba(0,0,0,0.025) 4px);
  pointer-events:none;z-index:999;
}
/* Motion indicator */
#motion-bar-wrap{
  position:fixed;bottom:0;left:0;right:0;z-index:998;
  height:2px;background:transparent;pointer-events:none;
}
#motion-bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--teal),var(--blue));
  transition:width 0.05s linear;
}
/* Motion display in knobs */
.motion-info{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  opacity:0.5;transition:opacity 0.3s;
}
.motion-info.live{opacity:1;}
.motion-info label{font-size:0.52rem;color:var(--muted);letter-spacing:0.13em;}
#v-motion{font-size:0.58rem;color:var(--teal);min-width:42px;text-align:center;}
h1{
  font-family:'Cinzel',serif;font-size:clamp(1.3rem,3vw,2rem);
  font-weight:900;letter-spacing:0.18em;color:var(--text);
  text-shadow:0 0 40px rgba(200,137,58,0.32);text-align:center;margin-bottom:4px;
}
.sub{font-size:0.62rem;color:var(--muted);letter-spacing:0.22em;text-align:center;margin-bottom:28px;}

/* Waveform */
.vis-wrap{width:100%;max-width:900px;margin-bottom:14px;position:relative;}
#vis{width:100%;height:96px;display:block;border:1px solid var(--hi);border-radius:5px;background:var(--panel);}
.vis-lbl{position:absolute;top:7px;left:11px;font-size:0.54rem;letter-spacing:0.15em;color:var(--muted);}

/* Phase bar */
.phase-wrap{width:100%;max-width:900px;margin-bottom:12px;}
.phase-bar{display:flex;height:4px;border-radius:2px;gap:2px;margin-bottom:4px;}
.pseg{height:100%;border-radius:2px;opacity:0.2;transition:opacity 0.5s;}
.pseg.done{opacity:0.45;}.pseg.now{opacity:1;}
#ps0{background:linear-gradient(90deg,var(--red),var(--amber));flex:2.2;}
#ps1{background:linear-gradient(90deg,var(--amber),#a87830);flex:2.8;}
#ps2{background:linear-gradient(90deg,#a87830,var(--green));flex:2.6;}
#ps3{background:linear-gradient(90deg,var(--green),var(--blue));flex:1.4;}
.phase-lbls{display:flex;gap:2px;}
.plbl{font-size:0.53rem;color:var(--muted);letter-spacing:0.07em;transition:color 0.4s;overflow:hidden;white-space:nowrap;}
.plbl.now{color:var(--amber);}
#pl0{flex:2.2;}#pl1{flex:2.8;}#pl2{flex:2.6;}#pl3{flex:1.4;}
.ph-row{
  position:fixed;bottom:138px;left:50%;transform:translateX(-50%);
  width:calc(100% - 40px);max-width:900px;height:2px;
  background:var(--border);border-radius:1px;
  z-index:100;
}
#ph{height:100%;background:linear-gradient(90deg,var(--amber),var(--red));border-radius:1px;width:0%;transition:width 0.06s linear;box-shadow:0 0 5px rgba(200,137,58,0.4);}

/* Controls */
.controls{display:none;}
.btns{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:100;display:flex;gap:10px;align-items:center;
  padding:8px 18px;
  border-radius:4px;
}
.btn{
  width:80px;height:80px;border-radius:50%;
  border:none;background:none;
  color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:opacity 0.2s,transform 0.15s;
  padding:0;
}
.btn:hover{opacity:0.7;transform:scale(1.08);}
.btn .material-symbols-outlined{font-size:48px;}
.knobs{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;}
.knob{display:flex;flex-direction:column;align-items:center;gap:3px;}
.knob label{font-size:0.52rem;color:var(--muted);letter-spacing:0.13em;}
.knob input[type=range]{
  -webkit-appearance:none;width:78px;height:3px;
  background:var(--hi);border-radius:2px;outline:none;cursor:pointer;
}
.knob input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:10px;height:10px;border-radius:50%;
  background:var(--amber);cursor:pointer;
}
.knob.inst input[type=range]::-webkit-slider-thumb{background:var(--teal);}
.kval{font-size:0.58rem;color:var(--amber);min-width:32px;text-align:center;}
.knob.inst .kval{color:var(--teal);}
.knob-divider{width:1px;height:36px;background:var(--border);align-self:center;}

/* Instrument status strip */
.inst-strip{
  width:100%;max-width:900px;
  display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;
}
.inst-badge{
  display:flex;align-items:center;gap:7px;
  background:var(--panel);border:1px solid var(--border);border-radius:4px;
  padding:7px 12px;font-size:0.6rem;color:var(--muted);
  transition:border-color 0.3s,color 0.3s;flex:1;min-width:140px;
}
.inst-badge.active{border-color:var(--teal);color:var(--text);}
.inst-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);transition:background 0.3s;}
.inst-badge.active .inst-dot{background:var(--teal);}
.inst-name{font-family:'Cinzel',serif;font-size:0.65rem;letter-spacing:0.1em;margin-right:4px;}
#ib-pizz.active .inst-dot{background:#c8893a;}
#ib-flute.active .inst-dot{background:#4e88be;}
#ib-bell.active .inst-dot{background:#8a6ab8;}
#ib-cello.active .inst-dot{background:#b04070;}
#ib-rhythm.active .inst-dot{background:#d4a832;}
#ib-pizz.active{border-color:#c8893a;}
#ib-flute.active{border-color:#4e88be;}
#ib-bell.active{border-color:#8a6ab8;}
#ib-cello.active{border-color:#b04070;}
#ib-rhythm.active{border-color:#d4a832;}
.c-btemp::after{background:linear-gradient(90deg,#8b1a3a,#b04070);}
.c-btemp .c-val{color:#b04070;}

/* Cards */
.cards{width:100%;max-width:900px;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px;margin-bottom:18px;}
.card{background:var(--panel);border:1px solid var(--border);border-radius:5px;padding:10px 13px;position:relative;overflow:hidden;}
.card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;border-radius:0 0 5px 5px;}
.c-temp::after{background:linear-gradient(90deg,var(--red),var(--amber));}
.c-note::after{background:linear-gradient(90deg,var(--blue),#7ab0d8);}
.c-phrase::after{background:linear-gradient(90deg,var(--amber),#dcc070);}
.c-acc::after{background:linear-gradient(90deg,var(--green),#6ac090);}
.c-lbl{font-size:0.52rem;letter-spacing:0.14em;color:var(--muted);margin-bottom:5px;}
.c-val{font-family:'Cinzel',serif;font-size:1.2rem;font-weight:600;line-height:1;}
.c-temp .c-val{color:var(--amber);}
.c-note .c-val{color:var(--blue);}
.c-phrase .c-val{color:var(--text);font-size:0.75rem;font-family:'Inconsolata',monospace;letter-spacing:0;line-height:1.5;}
.c-acc .c-val{color:var(--green);}
.c-sub{font-size:0.58rem;color:var(--muted);margin-top:3px;line-height:1.4;}

/* Score */
.score-wrap{
  width:100%;box-sizing:border-box;
  position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);
  z-index:1;
  border:1px solid var(--border);border-radius:5px;padding:13px 15px;
}
.score-ttl{font-size:0.52rem;letter-spacing:0.16em;color:var(--muted);margin-bottom:8px;}
#score{width:100%;height:88px;display:block;}

/* Legend */
.legend{width:100%;max-width:900px;display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px;}
.li{display:flex;align-items:center;gap:6px;font-size:0.58rem;color:var(--muted);}
.ld{width:7px;height:7px;border-radius:50%;}

/* Log */
.log{width:100%;max-width:900px;border-radius:5px;padding:8px 12px;font-size:0.62rem;min-height:38px;}
#log{color:var(--amber);line-height:1.7;}

/* 3D Visualization — fullscreen overlay */
.viz3d-wrap{
  position:fixed;inset:0;z-index:2;
  pointer-events:none;
}
#canvas3d{
  width:100%;height:100%;display:block;
}
.viz3d-lbl{
  /*position:fixed;top:9px;right:14px;*/
  font-size:0.52rem;letter-spacing:0.15em;color:var(--muted);
  pointer-events:none;z-index:3; padding: 0 0;
}
.viz3d-lbl span{color:var(--amber);margin-left:8px;}

/* 非表示要素 */
.vis-wrap,.inst-strip,.cards,.legend,.phase-wrap{display:none;}