/* =========================
   Base
========================= */
.oto-kaleido-wrap{
  width:100vw;
  height:100vh;
  margin:0;
  padding:12px;
  box-sizing:border-box;
  background:#000;
  display:flex;
  flex-direction:column;
}

/* UI */
.oto-kaleido-ui{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  flex:0 0 auto;
}

.oto-btn{
  border:1px solid #333;
  background:#111;
  color:#eee;
  padding:8px 12px;
  cursor:pointer;
  user-select:none;
}

.oto-status{
  font-size:13px;
  opacity:.8;
  color:#ddd;
}

.oto-canvas{
  flex:1 1 auto;
  width:100%;
  height:100%;
  display:block;
  background:#000;
}

.oto-caption{
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  color:#ddd;
  flex:0 0 auto;
}

.oto-title{ font-weight:600; }
.oto-note{ font-size:12px; opacity:.75; }


/* =========================
   Background mode (FULLSCREEN)
   - 主役のまま背景化
========================= */
.oto-kaleido-wrap.oto-mode-bg{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  margin:0;
  padding:0;              /* ✅ 余白を消す */
  background:transparent; /* ✅ 黒塗りはJS側で */
  z-index:-1;             /* JSで上書き可 */
  pointer-events:none;    /* ✅ サイト操作を殺さない */
}

/* 背景モードでUI/キャプションを出す場合に備えた最低限（JS側でdisplay切替される） */
.oto-kaleido-wrap.oto-mode-bg .oto-kaleido-ui,
.oto-kaleido-wrap.oto-mode-bg .oto-caption{
  pointer-events:auto;
}

/* 背景モードではcanvasを絶対全面に */
.oto-kaleido-wrap.oto-mode-bg .oto-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:transparent;
}

/* 背景モードでUIを出すなら、読みやすさのためのパネル化 */
.oto-kaleido-wrap.oto-mode-bg .oto-kaleido-ui,
.oto-kaleido-wrap.oto-mode-bg .oto-caption{
  position:relative;
  z-index:1;
  margin:0;
  padding:10px 12px;
  background:rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* UIは上、captionは下に固定したいなら（任意）
.oto-kaleido-wrap.oto-mode-bg .oto-kaleido-ui{ position:absolute; top:12px; left:12px; right:12px; }
.oto-kaleido-wrap.oto-mode-bg .oto-caption{ position:absolute; bottom:12px; left:12px; right:12px; }
*/