/* v0.7 — 撮影と編集で同一のカメラ表示領域を共有する。*/
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
#app{position:fixed;inset:0;width:100%;height:100%;min-height:0;overflow:hidden;background:#080d13}
#app .workspace{position:absolute;inset:0;display:block!important;min-height:0;overflow:hidden}
#app .shooting-column,#app.shoot-only .shooting-column{
  position:absolute!important;inset:0!important;display:block!important;box-sizing:border-box!important;
  width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;
  min-height:0!important;margin:0!important;padding:0!important;border:0!important;
}
#app .preview-container,#app.shoot-only .preview-container{
  position:absolute!important;inset:0!important;display:block!important;
  width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;
  padding:0!important;margin:0!important;overflow:hidden!important;
}
#app #stage{
  position:absolute!important;inset:0!important;
  box-sizing:border-box!important;width:100%!important;height:100%!important;
  min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;
  aspect-ratio:auto!important;border:0!important;border-radius:0!important;margin:0!important;background:#10151d;
}
#stage video,#stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#app .topbar{
  position:absolute!important;left:0;right:0;top:0;z-index:18;height:52px;
  background:linear-gradient(180deg,rgba(5,12,22,.85),rgba(5,12,22,.33));
  border:0;pointer-events:auto;
}
#app .mode-bar{
  position:absolute!important;z-index:19;left:12px;top:calc(54px + env(safe-area-inset-top,0px));width:min(335px,calc(100vw - 24px));
  padding:4px;margin:0;background:rgba(15,25,39,.83);border:1px solid rgba(255,255,255,.2);border-radius:13px;
  backdrop-filter:blur(8px);
}
#app .mode-bar .mode{padding:9px 8px;font-size:13px}
/* シャッターはプレビューの前面に直接浮かべる。*/
#app .camera-toolbar,#app.shoot-only .camera-toolbar{
  position:absolute!important;z-index:22;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom,0px));
  height:84px!important;width:auto!important;min-height:0!important;margin:0!important;
  padding:0!important;display:flex!important;align-items:center;justify-content:center!important;
  background:transparent!important;border:0!important;pointer-events:none;
}
#app .shutter{pointer-events:auto;display:grid;place-items:center;width:74px;height:74px;min-width:74px;
  background:rgba(0,0,0,.16);border:4px solid #eaffff;box-shadow:0 2px 12px rgba(0,0,0,.7)}
#app .shutter span{width:55px;height:55px;box-shadow:0 1px 6px rgba(0,0,0,.5)}
#app .point-info,#app .next-point{display:none!important}
/* ヒントやステータスは編集モードのみ。撮影時は非表示。 */
#app #statusText{position:absolute;left:12px;right:12px;bottom:calc(110px + env(safe-area-inset-bottom,0px));z-index:20;
  width:max-content;max-width:calc(100% - 24px);height:auto;padding:7px 10px;border-radius:8px;
  white-space:normal;background:rgba(2,10,20,.63);font-size:11px;pointer-events:none}
#app #previewHint{left:12px;right:12px;bottom:calc(198px + env(safe-area-inset-bottom,0px));z-index:5}
#app.shoot-only .topbar,#app.shoot-only .mode-bar,#app.shoot-only #statusText,#app.shoot-only #previewHint{display:none!important}
#app .shoot-edit-button{display:none;position:absolute;z-index:40;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));
  width:43px;height:43px;padding:0;border:1px solid rgba(255,255,255,.55);border-radius:50%;
  color:#fff;background:rgba(4,10,20,.38);font-size:20px;line-height:1;backdrop-filter:blur(5px);box-shadow:0 1px 7px #0007}
#app.shoot-only .shoot-edit-button{display:block}
/* 編集用の各種設定は透過パネルとして同じカメラ画面に重なる。*/
#app .settings-column{z-index:28;position:fixed!important;left:0;right:0;bottom:0;
  width:auto;max-height:min(70dvh,630px);min-height:0!important;background:rgba(16,28,43,.98);}
#app .section-head{min-height:56px}
#app .stage.edit-mode .board-object{outline:2px dashed rgba(112,214,192,.85)}
#app .toast{z-index:60}
@media (orientation:landscape){
  #app .camera-toolbar,#app.shoot-only .camera-toolbar{
    left:auto!important;right:calc(12px + env(safe-area-inset-right,0px));top:0!important;bottom:0!important;
    width:95px!important;height:100%!important;flex-direction:column;
  }
  #app .settings-column{
    left:0;right:auto;bottom:0;top:auto;width:min(390px,48vw);max-height:min(76dvh,600px);
    border-radius:14px 14px 0 0;
  }
  #app #statusText{right:auto;max-width:60vw;bottom:calc(8px + env(safe-area-inset-bottom,0px));}
  #app #previewHint{left:10px;right:auto;bottom:45px;max-width:60vw;}
}
@media (min-width:761px){
  #app .settings-column{left:auto;right:14px;bottom:12px;top:auto;width:min(500px,48vw);max-height:74dvh;}
}
@media (min-width:761px) and (orientation:landscape){
  #app .settings-column{left:10px;right:auto;width:min(500px,42vw);}
}