/* ======================================================
   SHIFT OBJECT / PART 2
   基本設定
   ====================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050505;
}

body {
  font-family:
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
}

#webgl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}

#webgl:active {
  cursor: grabbing;
}

/* ======================================================
   名言表示
   ====================================================== */

.quote-layer {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 7vw;
}

.quote-wrap {
  width: min(760px, 76vw);
  text-align: center;

  transform: translateY(-2vh);
  text-shadow:
    0 2px 18px rgba(0, 0, 0, 0.6),
    0 1px 4px rgba(0, 0, 0, 0.8);

  animation: quoteIn 2.2s ease both;
}

.quote-category {
  margin: 0 0 22px;
  font-size: 10px;
  letter-spacing: 0.34em;
  opacity: 0.5;
}

.quote-en {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 66px);
  line-height: 1.14;
  font-weight: 300;
  letter-spacing: 0.11em;
}

.quote-jp {
  margin: 24px 0 0;
  font-size: clamp(13px, 1.2vw, 18px);
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: 0.13em;
}

.quote-author {
  margin: 18px 0 0;
  font-size: 11px;
  letter-spacing: 0.25em;
  opacity: 0.72;
}

@keyframes quoteIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(7px);
  }

  100% {
    opacity: 1;
    transform: translateY(-2vh);
    filter: blur(0);
  }
}

/* ======================================================
   ブランド表示
   ====================================================== */

.brand {
  position: fixed;
  left: 34px;
  bottom: 28px;
  z-index: 12;

  display: flex;
  flex-direction: column;
  gap: 6px;

  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0.26em;
  opacity: 0.52;

  pointer-events: none;
}

.hint {
  position: fixed;
  right: 30px;
  bottom: 28px;
  z-index: 12;

  font-size: 8px;
  letter-spacing: 0.32em;
  opacity: 0.34;

  pointer-events: none;
}

@media (max-width: 767px) {
  .quote-layer {
    padding: 8vw;
  }

  .quote-wrap {
    width: 90vw;
    transform: translateY(-5vh);
  }

  .quote-en {
    font-size: clamp(27px, 8vw, 42px);
    letter-spacing: 0.07em;
  }

  .quote-jp {
    margin-top: 18px;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .brand {
    left: 18px;
    bottom: 18px;
  }

  .hint {
    right: 18px;
    bottom: 18px;
    font-size: 7px;
  }
}

/* ======================================================
   SHIFTボタン
   ====================================================== */

.shift-button {
  position: fixed;
  right: 34px;
  top: 50%;
  z-index: 30;
  transform: translateY(-50%);

  width: 82px;
  height: 82px;
  padding: 0;

  border: 1px solid rgba(255,255,255,0.62);
  border-radius: 50%;
  background: rgba(0,0,0,0.30);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: #fff;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-indent: 0.22em;

  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.shift-button:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.92);
  transform: translateY(-50%) scale(1.05);
}

.shift-button:active {
  transform: translateY(-50%) scale(0.96);
}

@media (max-width: 767px) {
  .shift-button {
    right: 18px;
    width: 68px;
    height: 68px;
    font-size: 9px;
  }
}



/* ======================================================
   滑らかなクロスフェード
   旧シーンは第2WebGLキャンバスに保持
   ====================================================== */
#crossfadeWebgl{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:8;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .85s ease;
}

#crossfadeWebgl.is-visible{
  opacity:1;
  visibility:visible;
  transition:none;
}

#crossfadeWebgl.is-fading{
  opacity:0;
  visibility:visible;
  transition:opacity .85s ease;
}

.quote-wrap{
  transition:opacity .6s ease, filter .6s ease;
}


/* ======================================================
   Canvas文字レイヤー
   表示中の文字と崩壊する文字を同じCanvas系で扱う
   ====================================================== */
#quoteCanvas,
#shredCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

#quoteCanvas{
  z-index:10;
}

#shredCanvas{
  z-index:11;
}

/* ======================================================
   左上：CUDIORAロゴ＋ページタイトル
   ====================================================== */
.page-identity{
  position:fixed;
  left:30px;
  top:28px;
  z-index:32;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
  pointer-events:none;
}

.page-logo{
  display:block;
  width:118px;
  height:auto;
  object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.92;
}

.page-title{
  font-size:9px;
  line-height:1.2;
  letter-spacing:.28em;
  color:#fff;
  opacity:.64;
}

/* ======================================================
   EXITボタン
   ====================================================== */
.exit-button{
  position:fixed;
  right:32px;
  top:28px;
  z-index:34;

  display:flex;
  align-items:center;
  justify-content:center;

  width:70px;
  height:70px;

  border:1px solid rgba(255,255,255,.58);
  border-radius:50%;
  background:rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);

  color:#fff;
  text-decoration:none;
  font-size:10px;
  letter-spacing:.22em;
  text-indent:.22em;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.exit-button:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.92);
  transform:scale(1.05);
}

/* ======================================================
   読み上げ用非表示テキスト
   ====================================================== */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (max-width:767px){
  .page-identity{
    left:18px;
    top:18px;
    gap:7px;
  }

  .page-logo{
    width:96px;
  }

  .page-title{
    font-size:8px;
    letter-spacing:.22em;
  }

  .exit-button{
    right:18px;
    top:18px;
    width:60px;
    height:60px;
    font-size:9px;
  }
}


/* ======================================================
   SHIFT OBJECT 固定UI
   ====================================================== */

.so-page-identity{
  position:fixed !important;
  left:28px !important;
  top:26px !important;
  z-index:9999 !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:8px !important;

  pointer-events:none !important;
}

.so-page-logo{
  display:block !important;
  width:122px !important;
  height:auto !important;
  max-width:none !important;

  opacity:.96 !important;

  /* 元画像が白でも確実に白系表示 */
  filter:brightness(0) invert(1) !important;
}

.so-page-title{
  display:block !important;
  color:#fff !important;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif !important;

  font-size:9px !important;
  font-weight:400 !important;
  line-height:1.2 !important;

  letter-spacing:.26em !important;
  white-space:nowrap !important;

  opacity:.68 !important;
}

.so-exit-button{
  position:fixed !important;
  right:28px !important;
  top:24px !important;
  z-index:10000 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:72px !important;
  height:72px !important;
  box-sizing:border-box !important;

  border:1px solid rgba(255,255,255,.58) !important;
  border-radius:50% !important;

  background:rgba(0,0,0,.28) !important;

  -webkit-backdrop-filter:blur(8px) !important;
  backdrop-filter:blur(8px) !important;

  color:#fff !important;
  text-decoration:none !important;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif !important;

  font-size:10px !important;
  font-weight:400 !important;

  letter-spacing:.22em !important;
  text-indent:.22em !important;

  opacity:.92 !important;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease !important;
}

.so-exit-button:hover{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.95) !important;
  transform:scale(1.05) !important;
  color:#fff !important;
}

/* FULLの直下に、美術館へ戻る出口を置く */
.so-museum-exit{
  top:108px !important;
  width:54px !important;
  height:54px !important;
  right:37px !important;
  font-size:9px !important;
  letter-spacing:.18em !important;
  text-indent:.18em !important;
  border-color:rgba(255,255,255,.42) !important;
}

@media (max-width:767px){
  .so-page-identity{
    left:16px !important;
    top:16px !important;
  }

  .so-page-logo{
    width:98px !important;
  }

  .so-page-title{
    font-size:8px !important;
    letter-spacing:.20em !important;
  }

  .so-exit-button{
    right:16px !important;
    top:16px !important;
    width:60px !important;
    height:60px !important;
    font-size:9px !important;
  }
}


/* ======================================================
   CUDIORAロゴ：小型化＋ホバー
   ====================================================== */

.so-page-logo-link{
  display:inline-block !important;
  pointer-events:auto !important;
  line-height:0 !important;
  opacity:.78 !important;
  transition:
    opacity .28s ease,
    transform .28s ease !important;
  transform-origin:left top !important;
}

.so-page-logo{
  width:40px !important;
  height:auto !important;
  max-width:none !important;
  display:block !important;
  filter:brightness(0) invert(1) !important;
}

.so-page-logo-link:hover{
  opacity:1 !important;
  transform:scale(1.12) !important;
}

.so-page-logo-link:hover .so-page-logo{
  filter:brightness(0) invert(1) !important;
}

@media (max-width:767px){
  .so-page-logo{
    width:34px !important;
  }
}


/* ======================================================
   スマホ：SHIFTボタン位置
   右下の補助テキストより少し上
   ====================================================== */
@media (max-width:767px){
  .shift-button{
    top:auto !important;
    right:18px !important;
    bottom:78px !important;
    transform:none !important;
  }

  .shift-button:hover{
    transform:scale(1.05) !important;
  }

  .shift-button:active{
    transform:scale(.96) !important;
  }
}


/* ======================================================
   AUTOボタン
   AUTO ONの時だけ自動SHIFT
   ====================================================== */
.auto-button{
  position:fixed;
  right:41px;
  top:calc(50% + 104px);
  z-index:31;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;

  width:68px;
  height:68px;
  padding:0;

  border:1px solid rgba(255,255,255,.48);
  border-radius:50%;
  background:rgba(0,0,0,.24);

  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);

  color:#fff;
  font:inherit;
  cursor:pointer;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease,
    opacity .25s ease;
}

.auto-button span{
  display:block;
  font-size:9px;
  line-height:1;
  letter-spacing:.20em;
  text-indent:.20em;
}

.auto-button small{
  display:block;
  font-size:7px;
  line-height:1;
  letter-spacing:.16em;
  text-indent:.16em;
  opacity:.54;
}

.auto-button:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.86);
  transform:scale(1.05);
}

.auto-button.is-on{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.95);
}

.auto-button.is-on small{
  opacity:1;
}

@media(max-width:767px){
  .auto-button{
    top:auto;
    right:23px;
    bottom:154px;
    width:58px;
    height:58px;
  }

  .auto-button span{
    font-size:8px;
  }

  .auto-button small{
    font-size:6px;
  }
}


/* ======================================================
   SHIFT / AUTO ボタン：同一サイズ
   ====================================================== */
.shift-button,
.auto-button{
  width:72px !important;
  height:72px !important;
}

@media(max-width:767px){
  .shift-button,
  .auto-button{
    width:60px !important;
    height:60px !important;
  }
}


/* ======================================================
   BGMボタン
   SHIFT / AUTO と同じ直径
   ====================================================== */
.bgm-button{
  position:fixed;
  right:41px;
  top:calc(50% + 190px);
  z-index:31;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;

  width:72px;
  height:72px;
  padding:0;

  border:1px solid rgba(255,255,255,.48);
  border-radius:50%;
  background:rgba(0,0,0,.24);

  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);

  color:#fff;
  font:inherit;
  cursor:pointer;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease,
    opacity .25s ease;
}

.bgm-button span{
  display:block;
  font-size:9px;
  line-height:1;
  letter-spacing:.20em;
  text-indent:.20em;
}

.bgm-button small{
  display:block;
  font-size:7px;
  line-height:1;
  letter-spacing:.16em;
  text-indent:.16em;
  opacity:.54;
}

.bgm-button:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.86);
  transform:scale(1.05);
}

.bgm-button.is-on{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.95);
}

.bgm-button.is-on small{
  opacity:1;
}

@media(max-width:767px){
  .bgm-button{
    top:auto;
    right:23px;
    bottom:230px;
    width:60px;
    height:60px;
  }

  .bgm-button span{
    font-size:8px;
  }

  .bgm-button small{
    font-size:6px;
  }
}


/* ======================================================
   右側ボタン整列
   ※ボタン配置のみ。文字・円筒表示には影響させない。
   ====================================================== */

/* PC：4つすべて同じ円サイズ・同じ中心軸 */
.exit-button,
.shift-button,
.auto-button,
.bgm-button{
  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  min-height:72px !important;
  max-width:72px !important;
  max-height:72px !important;

  right:32px !important;
  left:auto !important;

  margin:0 !important;
  padding:0 !important;

  box-sizing:border-box !important;
  border-radius:50% !important;
}

/* EXIT：右上、下3つと同じ中心軸 */
.exit-button{
  top:28px !important;
  bottom:auto !important;
}

/* 下3つ：中心間隔88pxで統一 */
.shift-button{
  top:auto !important;
  bottom:244px !important;
}

.auto-button{
  top:auto !important;
  bottom:156px !important;
}

.bgm-button{
  top:auto !important;
  bottom:68px !important;
}

/* ======================================================
   スマホ
   ====================================================== */
@media(max-width:767px){

  .exit-button,
  .shift-button,
  .auto-button,
  .bgm-button{
    width:60px !important;
    height:60px !important;
    min-width:60px !important;
    min-height:60px !important;
    max-width:60px !important;
    max-height:60px !important;

    right:18px !important;
    left:auto !important;

    margin:0 !important;
    padding:0 !important;
  }

  .exit-button{
    top:18px !important;
    bottom:auto !important;
  }

  /* 下3つ：中心間隔76pxで統一 */
  .shift-button{
    top:auto !important;
    bottom:206px !important;
  }

  .auto-button{
    top:auto !important;
    bottom:130px !important;
  }

  .bgm-button{
    top:auto !important;
    bottom:54px !important;
  }
}


/* ======================================================
   PC右下3ボタン：最終位置固定
   SHIFT / AUTO / BGM の中心間隔を完全統一
   ====================================================== */
@media (min-width:768px){
  .shift-button,
  .auto-button,
  .bgm-button{
    width:72px !important;
    height:72px !important;
    min-width:72px !important;
    min-height:72px !important;
    max-width:72px !important;
    max-height:72px !important;

    right:32px !important;
    left:auto !important;
    top:auto !important;

    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    transform:none !important;
  }

  /*
    円の直径72px。
    中心間隔を96pxに統一。
    bottom差も96pxで統一。
  */
  .bgm-button{
    bottom:72px !important;
  }

  .auto-button{
    bottom:168px !important;
  }

  .shift-button{
    bottom:264px !important;
  }
}


/* ======================================================
   SHIFT OBJECT / 365 CLOCK
   時計・カレンダー常時表示
   ====================================================== */
.daily-clock{
  position:fixed;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:32;
  width:min(92vw,860px);
  text-align:center;
  pointer-events:none;
  text-shadow:0 2px 18px rgba(0,0,0,.78);
}
.daily-clock__time{
  font-size:clamp(54px,8.5vw,118px);
  line-height:.92;
  font-weight:200;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.daily-clock__meta{
  margin-top:13px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  font-size:clamp(9px,1vw,12px);
  letter-spacing:.22em;
  opacity:.72;
  white-space:nowrap;
}
.daily-clock__dot{opacity:.45;}

/* 時計端末ではブランドを控えめに下へ */
.so-page-identity{opacity:.58;}

@media (max-width:767px){
  .daily-clock{top:20px;width:94vw;}
  .daily-clock__time{font-size:clamp(48px,17vw,82px);}
  .daily-clock__meta{margin-top:9px;gap:7px;font-size:8px;letter-spacing:.13em;}
  .so-page-title{display:none;}
}

/* 横向きの古いタブレットを主対象 */
@media (orientation:landscape) and (max-height:620px){
  .daily-clock{top:14px;}
  .daily-clock__time{font-size:clamp(44px,10vh,72px);}
  .daily-clock__meta{margin-top:7px;}
}


/* ======================================================
   SHIFT OBJECT / 365 CLOCK v0.2
   古いスマホ・タブレット向け常時表示UI
   ====================================================== */

/* 時計は画面上部1/4に収め、作品領域を広く残す */
.daily-clock{
  top:max(16px, env(safe-area-inset-top));
  width:min(94vw,900px);
}
.daily-clock__time{
  font-size:clamp(50px,7.4vw,104px);
  line-height:.9;
  letter-spacing:.045em;
}
.daily-clock__meta{
  margin-top:10px;
  font-size:clamp(9px,.9vw,12px);
  letter-spacing:.18em;
}

/* 左上ブランドは時計よりさらに控えめに */
.so-page-identity{
  top:max(20px, calc(env(safe-area-inset-top) + 4px));
  left:22px;
  opacity:.38;
  transform:scale(.88);
  transform-origin:left top;
}

/* FULLも通常時は操作UIの一部として隠す */
.shift-button,
.auto-button,
.bgm-button,
.so-exit-button{
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .28s ease, background .25s ease, border-color .25s ease !important;
}
body.controls-visible .shift-button,
body.controls-visible .auto-button,
body.controls-visible .bgm-button,
body.controls-visible .so-exit-button{
  opacity:1 !important;
  pointer-events:auto !important;
}

/* 操作説明も普段はほぼ消す */
.hint{
  opacity:.18;
  transition:opacity .25s ease;
}
body.controls-visible .hint{opacity:.62;}

@media (max-width:767px){
  .daily-clock{
    top:max(12px, env(safe-area-inset-top));
    width:96vw;
  }
  .daily-clock__time{
    font-size:clamp(46px,14vw,70px);
  }
  .daily-clock__meta{
    margin-top:7px;
    gap:6px;
    font-size:7.5px;
    letter-spacing:.105em;
  }
  .so-page-identity{
    left:16px;
    top:max(16px, calc(env(safe-area-inset-top) + 2px));
    transform:scale(.70);
    opacity:.28;
  }
  .so-exit-button{
    top:max(20px, calc(env(safe-area-inset-top) + 8px)) !important;
    right:16px !important;
    width:58px !important;
    height:58px !important;
    font-size:9px !important;
  }
  .quote-layer{padding-top:22vh;}
}

/* 縦置きでは作品を少し下げ、時計と重ならないようにする */
@media (orientation:portrait){
  #quoteCanvas,
  #shredCanvas{
    transform:translateY(5vh);
  }
}

/* 横置きタブレットでは時計をさらに小さく */
@media (orientation:landscape) and (max-height:620px){
  .daily-clock__time{font-size:clamp(38px,9vh,58px);}
  .daily-clock__meta{font-size:7px;margin-top:5px;}
  .so-page-identity{transform:scale(.70);}
}

/* ======================================================
   SHIFT OBJECT / 365 CLOCK v0.2.1
   時計・カレンダー位置と視認性の調整
   ====================================================== */

/* 時計＋カレンダー全体を少し下へ */
.daily-clock{
  top:max(34px, calc(env(safe-area-inset-top) + 22px));
}

/* 時計下のカレンダー情報を一段大きく */
.daily-clock__meta{
  margin-top:12px;
  font-size:clamp(11px,1.15vw,15px);
  letter-spacing:.16em;
}

@media (max-width:767px){
  .daily-clock{
    top:max(38px, calc(env(safe-area-inset-top) + 26px));
  }
  .daily-clock__meta{
    margin-top:10px;
    gap:7px;
    font-size:10px;
    letter-spacing:.11em;
  }
}

@media (orientation:landscape) and (max-height:620px){
  .daily-clock{
    top:max(24px, calc(env(safe-area-inset-top) + 14px));
  }
  .daily-clock__meta{
    margin-top:7px;
    font-size:9px;
  }
}

/* ======================================================
   SHIFT OBJECT / 365 CLOCK v0.2.2
   時計・カレンダーを実機で明確に下へ移動
   ====================================================== */
@media (max-width:767px) and (orientation:portrait){
  .daily-clock{
    top:max(72px, calc(env(safe-area-inset-top) + 58px));
  }
  .daily-clock__meta{
    margin-top:12px;
    font-size:11px;
    letter-spacing:.105em;
  }
}

/* ======================================================
   SHIFT OBJECT / 365 CLOCK v0.2.3
   カレンダー2行化 + 反対側壁の動画URL差し替えUI
   ====================================================== */
.daily-clock__meta{
  display:block;
  text-align:center;
  line-height:1.45;
  width:100%;
}
.daily-clock__date,
.daily-clock__status{
  display:block;
  width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
}
.daily-clock__status{
  margin-top:4px;
  font-size:.86em;
  opacity:.84;
}

@media (max-width:767px) and (orientation:portrait){
  .daily-clock{
    top:max(72px, calc(env(safe-area-inset-top) + 58px));
    width:94vw;
  }
  .daily-clock__meta{
    margin-top:12px;
    font-size:11px;
    letter-spacing:.105em;
    line-height:1.5;
  }
  .daily-clock__status{
    margin-top:5px;
    font-size:9.5px;
    letter-spacing:.09em;
  }
}

/* 動画URL差し替えパネル：通常は非表示、画面タップ時だけ表示 */
.video-url-panel{
  position:fixed;
  z-index:120;
  left:18px;
  bottom:max(18px, calc(env(safe-area-inset-bottom) + 10px));
  width:min(560px, calc(100vw - 36px));
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:7px;
  align-items:center;
  padding:10px;
  background:rgba(0,0,0,.78);
  border:1px solid rgba(255,255,255,.28);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}
body.controls-visible .video-url-panel{
  opacity:1;
  pointer-events:auto;
}
.video-url-panel__label{
  grid-column:1 / -1;
  font-size:9px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.72);
}
.video-url-panel__input{
  min-width:0;
  width:100%;
  height:34px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.34);
  border-radius:0;
  background:#070707;
  color:#fff;
  padding:0 9px;
  font-size:11px;
  outline:none;
}
.video-url-panel__button{
  height:34px;
  min-width:58px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:0;
  background:#111;
  color:#fff;
  font-size:9px;
  letter-spacing:.13em;
  padding:0 10px;
}
.video-url-panel__button--sub{opacity:.72;}
.video-url-panel__status{
  grid-column:1 / -1;
  font-size:8px;
  letter-spacing:.12em;
  color:rgba(255,255,255,.50);
  min-height:12px;
}

@media (max-width:767px){
  .video-url-panel{
    left:12px;
    bottom:max(12px, calc(env(safe-area-inset-bottom) + 8px));
    width:calc(100vw - 24px);
    grid-template-columns:1fr 54px 54px;
    padding:9px;
  }
  .video-url-panel__input{font-size:10px;}
  .video-url-panel__button{min-width:0;padding:0 4px;font-size:8px;}
}


/* ======================================================
   v0.2.8 時計位置 最終上書き
   ====================================================== */
@media (max-width: 767px){
  .daily-clock{
    top: 10px !important;
    transform: translateX(-50%) !important;
  }
  .daily-clock__time{
    font-size: clamp(42px, 13vw, 64px) !important;
    line-height: .92 !important;
  }
  .daily-clock__meta{
    margin-top: 6px !important;
    font-size: 9px !important;
    line-height: 1.45 !important;
  }
}
@media (max-height: 700px) and (max-width: 767px){
  .daily-clock{ top: 6px !important; }
  .daily-clock__time{ font-size: clamp(38px, 11vw, 56px) !important; }
}


/* ======================================================
   v0.2.9 実機位置調整
   ・時計＋カレンダー：上すぎたため少し下へ
   ・名言：下すぎたためJS側centerYを上へ
   ====================================================== */
@media (max-width: 767px) and (orientation: portrait){
  .daily-clock{
    top: 48px !important;
    width: 94vw !important;
  }
  .daily-clock__time{
    font-size: clamp(40px, 12vw, 58px) !important;
    line-height: .92 !important;
  }
  .daily-clock__meta{
    margin-top: 7px !important;
    font-size: 9.5px !important;
    line-height: 1.45 !important;
  }
  .daily-clock__status{
    margin-top: 5px !important;
    font-size: 9px !important;
  }
}


/* ======================================================
   v0.3.1 PC版 最終位置調整
   ・動画URLバー：少し上へ＋CLOSE追加
   ・時計／カレンダー：少し下へ
   ====================================================== */
@media (min-width: 768px){
  .daily-clock{
    top: 42px !important;
  }

  .video-url-panel{
    bottom: 42px !important;
  }
}

.video-url-panel{
  position: fixed;
}
.video-url-panel__label{
  padding-right: 58px;
}
.video-url-panel__close{
  position: absolute;
  top: 8px;
  right: 9px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-size: 8px;
  letter-spacing: .11em;
  cursor: pointer;
}
.video-url-panel__close:hover{
  color: #fff;
  border-color: rgba(255,255,255,.65);
}
body.video-panel-closed .video-url-panel{
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ======================================================
   v0.3.2 PC再調整
   ・時計／カレンダーを明確に下へ
   ・動画URLバーをさらに上へ
   ・CLOSEを常時見える配置に
   ====================================================== */
@media (min-width: 768px){
  .daily-clock{
    top: 92px !important;
  }

  .video-url-panel{
    bottom: 88px !important;
    width: min(760px, calc(100vw - 48px)) !important;
    grid-template-columns: 1fr auto auto auto !important;
  }

  .video-url-panel__label{
    grid-column: 1 / 4 !important;
    padding-right: 0 !important;
  }

  .video-url-panel__close{
    position: static !important;
    grid-column: 4 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 58px !important;
    height: 28px !important;
    padding: 0 9px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .video-url-panel__input{
    grid-column: 1 / 3 !important;
  }

  .video-url-panel__button{
    min-width: 64px !important;
  }

  .video-url-panel__status{
    grid-column: 1 / -1 !important;
  }
}


/* ======================================================
   v0.3.3 PC修正
   ・動画URLバーのCLOSEを右上に常時固定表示
   ・人物説明はCanvas側で人物名の直下に表示
   ====================================================== */
@media (min-width: 768px){
  .video-url-panel{
    position: fixed !important;
    overflow: visible !important;
    padding-top: 44px !important;
  }

  .video-url-panel__label{
    position: absolute !important;
    top: 14px !important;
    left: 12px !important;
    right: 100px !important;
    width: auto !important;
    display: block !important;
  }

  .video-url-panel__close{
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 78px !important;
    min-width: 78px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    background: #080808 !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: .10em !important;
  }
}

/* ======================================================
   v0.3.6 PC：動画URLバーを1行に整理
   URL | LOAD | RESET | CLOSE
   ====================================================== */
@media (min-width: 768px){
  .video-url-panel{
    width: min(840px, calc(100vw - 48px)) !important;
    padding: 12px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 70px 70px 78px !important;
    grid-template-rows: auto 34px auto !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .video-url-panel__label{
    position: static !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: auto !important;
    padding: 0 !important;
    display: block !important;
  }

  .video-url-panel__input{
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #videoUrlLoad{
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  #videoUrlReset{
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  .video-url-panel__close{
    position: static !important;
    grid-column: 4 !important;
    grid-row: 2 !important;
    width: 78px !important;
    min-width: 78px !important;
    height: 34px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,.38) !important;
    background: #111 !important;
    color: #fff !important;
    font-size: 9px !important;
    letter-spacing: .10em !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .video-url-panel__status{
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}


/* ======================================================
   v0.3.8
   名言専用 STOP ボタン
   SHIFTの直下。AUTO / BGM は従来機能のまま。
   ====================================================== */
.quote-stop-button{
  position:fixed;
  z-index:31;
  display:flex;
  align-items:center;
  justify-content:center;
  width:72px;
  height:72px;
  padding:0;
  border:1px solid rgba(255,255,255,.48);
  border-radius:50%;
  background:rgba(0,0,0,.24);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:#fff;
  font:inherit;
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}

.quote-stop-button span{
  display:block;
  font-size:9px;
  line-height:1;
  letter-spacing:.16em;
  text-indent:.16em;
}

.quote-stop-button:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.86);
}

.quote-stop-button.is-on{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.95);
}

/* PC：SHIFT → STOP → AUTO → BGM の順に縦配置 */
@media (min-width:768px){
  .shift-button,
  .quote-stop-button,
  .auto-button,
  .bgm-button{
    width:72px !important;
    height:72px !important;
    min-width:72px !important;
    min-height:72px !important;
    max-width:72px !important;
    max-height:72px !important;
    right:32px !important;
    left:auto !important;
    top:auto !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    transform:none !important;
  }

  .bgm-button{ bottom:72px !important; }
  .auto-button{ bottom:168px !important; }
  .quote-stop-button{ bottom:264px !important; }
  .shift-button{ bottom:360px !important; }

  /* 動画URL欄をv0.3.7の約3/4幅へ短縮 */
  .video-url-panel{
    width:min(700px, calc(100vw - 48px)) !important;
  }
}

/* スマホでも4ボタンが重ならないよう縦配置 */
@media (max-width:767px){
  .quote-stop-button{
    right:18px !important;
    left:auto !important;
    top:auto !important;
    bottom:206px !important;
    width:60px !important;
    height:60px !important;
    min-width:60px !important;
    min-height:60px !important;
    max-width:60px !important;
    max-height:60px !important;
  }

  .shift-button{ bottom:282px !important; }
  .auto-button{ bottom:130px !important; }
  .bgm-button{ bottom:54px !important; }
}


/* =========================================================
   v0.4.1 PC 人物の生年・没年・年齢を読みやすくする
   ========================================================= */
@media (min-width: 768px){
  .quote-life,
  .person-life,
  .quote-person-life,
  .quote-meta-life,
  .life-info,
  .person-years,
  [data-role="person-life"]{
    font-size: 13px !important;
    line-height: 1.45 !important;
    letter-spacing: .02em !important;
  }
}

/* v0.4.2 cache-bust */


/* ======================================================
   v0.4.8 動画 / YouTube 読み込みインジケーター
   PC FIX済みの配置は変更しない。
   ====================================================== */
.video-url-panel__progress{
  width:100%;
  height:3px;
  overflow:hidden;
  background:rgba(255,255,255,.12);
  opacity:0;
  visibility:hidden;
  transition:opacity .15s ease;
}
.video-url-panel__progress.is-loading{
  opacity:1;
  visibility:visible;
}
.video-url-panel__progress-bar{
  width:34%;
  height:100%;
  background:rgba(255,255,255,.9);
  transform:translateX(-120%);
}
.video-url-panel__progress.is-loading .video-url-panel__progress-bar{
  animation:videoUrlLoading 1.05s linear infinite;
}
@keyframes videoUrlLoading{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(360%)}
}
@media (min-width:768px){
  .video-url-panel__progress{
    grid-column:1 / -1 !important;
    grid-row:4 !important;
  }
  .video-url-panel{
    grid-template-rows:auto 34px auto 3px !important;
  }
}


/* =========================================================
   v0.4.9 VIDEO SIZE SELECT
   PC FIXレイアウトを崩さず、NORMAL / LARGE を追加
   ========================================================= */
@media (min-width: 768px){
  .video-url-panel .video-size-btn{
    width: 62px !important;
    min-width: 62px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .video-url-panel .video-size-btn.is-active{
    background: #fff !important;
    color: #000 !important;
  }
}


/* =========================================================
   v0.5.0 PC VIDEO BAR FIX
   左：URL / 右上：LOAD RESET CLOSE / 右下：SMALL NORMAL LARGE
   ========================================================= */
@media (min-width: 768px){
  .video-url-panel{
    width: min(840px, calc(100vw - 48px)) !important;
    padding: 12px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 66px 66px 72px !important;
    grid-template-rows: auto 34px 34px auto !important;
    column-gap: 8px !important;
    row-gap: 7px !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  .video-url-panel__label{grid-column:1/-1 !important;grid-row:1 !important;}
  .video-url-panel__input{
    grid-column:1 !important;
    grid-row:2 / 4 !important;
    width:75% !important;
    justify-self:start !important;
    height:34px !important;
  }
  #videoUrlLoad{grid-column:2 !important;grid-row:2 !important;}
  #videoUrlReset{grid-column:3 !important;grid-row:2 !important;}
  .video-url-panel__close{
    position:static !important;grid-column:4 !important;grid-row:2 !important;
    width:72px !important;min-width:72px !important;height:34px !important;
  }
  #videoSizeSmall{grid-column:2 !important;grid-row:3 !important;}
  #videoSizeNormal{grid-column:3 !important;grid-row:3 !important;}
  #videoSizeLarge{grid-column:4 !important;grid-row:3 !important;}
  .video-url-panel .video-size-btn,
  #videoUrlLoad,#videoUrlReset{
    width:66px !important;min-width:66px !important;height:34px !important;
    padding:0 5px !important;margin:0 !important;
  }
  #videoSizeLarge{width:72px !important;min-width:72px !important;}
  .video-url-panel__status{grid-column:1/-1 !important;grid-row:4 !important;}
  .video-url-panel__progress{grid-column:1/-1 !important;}
  .video-url-panel .video-size-btn.is-active{background:#fff !important;color:#000 !important;}
}


/* =========================================================
   v0.5.2 WORD SOURCE PANEL
   PC成功版の既存配置を変更しない独立パネル
   ========================================================= */
.word-source-panel{
  position:fixed;
  left:22px;
  bottom:22px;
  z-index:92;
  display:flex;
  align-items:center;
  gap:6px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
body.controls-visible .word-source-panel{
  opacity:1;
  pointer-events:auto;
}
.word-source-button,
.word-source-select{
  height:34px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:0;
  background:#090909;
  color:#bbb;
  font:11px/1 Arial,sans-serif;
  letter-spacing:.08em;
  padding:0 10px;
}
.word-source-button.is-active{
  background:#efefef;
  color:#111;
}
.word-source-select:disabled{opacity:.4}
.word-source-status{
  color:#888;
  font:10px/1.2 Arial,sans-serif;
  letter-spacing:.05em;
  min-width:110px;
}
@media (max-width:767px){
  .word-source-panel{display:none!important;}
}


/* ======================================================
   v0.6.2
   SHIFTボタンのみ常時表示
   ====================================================== */
.shift-button{
  opacity:1 !important;
  pointer-events:auto !important;
}


/* ======================================================
   v0.6.3 SHIFT ALWAYS VISIBLE
   controls-visible の有無に関係なく常時表示
   ====================================================== */
html body .shift-button,
html body.controls-visible .shift-button{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}


/* =========================================================
   v0.7.4 VIDEO / BACKGROUND RANGE CONTROLS
   PC：3段階ボタンを連続スライダーへ変更
   ========================================================= */
@media (min-width:768px){
  .video-url-panel{
    width:min(900px, calc(100vw - 48px)) !important;
    grid-template-columns:minmax(0,1fr) 66px 66px 72px !important;
    grid-template-rows:auto 34px auto auto auto auto !important;
    overflow:visible !important;
  }

  .video-url-panel__input{
    grid-column:1 !important;
    grid-row:2 !important;
    width:100% !important;
    height:34px !important;
  }

  #videoUrlLoad{
    grid-column:2 !important;
    grid-row:2 !important;
  }

  #videoUrlReset{
    grid-column:3 !important;
    grid-row:2 !important;
  }

  .video-url-panel__close{
    grid-column:4 !important;
    grid-row:2 !important;
  }

  .visual-range-control{
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:118px minmax(0,1fr) 44px !important;
    align-items:center !important;
    gap:10px !important;
    min-height:30px !important;
  }

  .visual-range-control--size{
    grid-row:3 !important;
  }

  .visual-range-control--video-y{
    grid-row:4 !important;
  }

  .visual-range-control--bg-y{
    grid-row:5 !important;
  }

  .visual-range-control label{
    color:rgba(255,255,255,.72) !important;
    font:9px/1 Arial,sans-serif !important;
    letter-spacing:.12em !important;
    white-space:nowrap !important;
  }

  .visual-range-control input[type="range"]{
    width:100% !important;
    min-width:0 !important;
    accent-color:#fff;
    cursor:pointer;
  }

  .visual-range-control span{
    color:#fff !important;
    font:10px/1 Arial,sans-serif !important;
    letter-spacing:.06em !important;
    text-align:right !important;
    font-variant-numeric:tabular-nums;
  }

  .visual-reset-button{
    grid-column:4 !important;
    grid-row:6 !important;
    width:72px !important;
    min-width:72px !important;
    height:28px !important;
    padding:0 5px !important;
    font-size:8px !important;
  }

  .video-url-panel__status{
    grid-column:1 / 4 !important;
    grid-row:6 !important;
    align-self:center !important;
  }

  .video-url-panel__progress{
    grid-column:1 / -1 !important;
    grid-row:7 !important;
  }
}

/* スマホ版は現行方針を維持。スライダーはパネル内に収める */
@media (max-width:767px){
  .visual-range-control{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:92px minmax(0,1fr) 34px;
    gap:7px;
    align-items:center;
  }

  .visual-range-control label{
    color:rgba(255,255,255,.72);
    font-size:8px;
    letter-spacing:.08em;
  }

  .visual-range-control input[type="range"]{
    width:100%;
    min-width:0;
  }

  .visual-range-control span{
    color:#fff;
    font-size:9px;
    text-align:right;
  }

  .visual-reset-button{
    grid-column:3;
  }
}


/* =========================================================
   v0.7.5 VIDEO PANEL LAYOUT FIX
   旧grid指定を上書きして、崩れない縦積み配置に固定。
   ========================================================= */
@media (min-width:768px){
  .video-url-panel{
    width:min(900px, calc(100vw - 48px)) !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 96px 96px 108px !important;
    grid-template-rows:auto 50px 22px 36px 36px 36px 34px !important;
    column-gap:12px !important;
    row-gap:8px !important;
    padding:18px 20px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .video-url-panel__label{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    align-self:center !important;
    margin:0 !important;
  }

  .video-url-panel__input{
    grid-column:1 !important;
    grid-row:2 !important;
    width:100% !important;
    height:50px !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  #videoUrlLoad{
    grid-column:2 !important;
    grid-row:2 !important;
    width:96px !important;
    height:50px !important;
    margin:0 !important;
  }

  #videoUrlReset{
    grid-column:3 !important;
    grid-row:2 !important;
    width:96px !important;
    height:50px !important;
    margin:0 !important;
  }

  .video-url-panel__close{
    grid-column:4 !important;
    grid-row:2 !important;
    width:108px !important;
    height:50px !important;
    margin:0 !important;
  }

  .video-url-panel__status{
    grid-column:1 / -1 !important;
    grid-row:3 !important;
    align-self:center !important;
    margin:0 !important;
    min-width:0 !important;
  }

  .visual-range-control{
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:145px minmax(0,1fr) 52px !important;
    align-items:center !important;
    gap:14px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  .visual-range-control--size{
    grid-row:4 !important;
  }

  .visual-range-control--video-y{
    grid-row:5 !important;
  }

  .visual-range-control--bg-y{
    grid-row:6 !important;
  }

  .visual-range-control label{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    font:10px/1 Arial,sans-serif !important;
    letter-spacing:.12em !important;
    color:rgba(255,255,255,.72) !important;
    white-space:nowrap !important;
  }

  .visual-range-control input[type="range"]{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    height:20px !important;
    cursor:pointer !important;
  }

  .visual-range-control span{
    display:block !important;
    margin:0 !important;
    font:11px/1 Arial,sans-serif !important;
    color:#fff !important;
    text-align:right !important;
    font-variant-numeric:tabular-nums !important;
  }

  .visual-reset-button{
    grid-column:4 !important;
    grid-row:7 !important;
    width:108px !important;
    height:30px !important;
    min-width:108px !important;
    margin:0 !important;
    padding:0 8px !important;
    font-size:9px !important;
  }

  .video-url-panel__progress{
    grid-column:1 / 4 !important;
    grid-row:7 !important;
    align-self:center !important;
    width:100% !important;
    margin:0 !important;
  }
}


/* =========================================================
   v0.7.6 CLEAN VIDEO CONTROL PANEL
   上段操作と調整スライダーを明確に分離。
   ========================================================= */
@media (min-width:768px){
  .video-url-panel{
    width:min(860px, calc(100vw - 48px)) !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 82px 82px 94px !important;
    grid-template-rows:18px 42px 18px 30px 30px 30px 30px !important;
    column-gap:10px !important;
    row-gap:7px !important;
    padding:16px 18px 14px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .video-url-panel__label{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    margin:0 !important;
    align-self:start !important;
  }

  .video-url-panel__input{
    grid-column:1 !important;
    grid-row:2 !important;
    width:100% !important;
    height:42px !important;
    min-width:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  #videoUrlLoad{
    grid-column:2 !important;
    grid-row:2 !important;
    width:82px !important;
    min-width:82px !important;
    height:42px !important;
    margin:0 !important;
  }

  #videoUrlReset{
    grid-column:3 !important;
    grid-row:2 !important;
    width:82px !important;
    min-width:82px !important;
    height:42px !important;
    margin:0 !important;
  }

  .video-url-panel__close{
    grid-column:4 !important;
    grid-row:2 !important;
    width:94px !important;
    min-width:94px !important;
    height:42px !important;
    margin:0 !important;
  }

  .video-url-panel__status{
    grid-column:1 / -1 !important;
    grid-row:3 !important;
    margin:0 !important;
    align-self:center !important;
    font-size:9px !important;
  }

  .visual-range-control{
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:122px minmax(0,1fr) 42px !important;
    gap:12px !important;
    align-items:center !important;
    width:100% !important;
    min-width:0 !important;
    min-height:30px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .visual-range-control--size{ grid-row:4 !important; }
  .visual-range-control--video-y{ grid-row:5 !important; }
  .visual-range-control--bg-y{ grid-row:6 !important; }

  .visual-range-control label{
    margin:0 !important;
    padding:0 !important;
    font:9px/1 Arial,sans-serif !important;
    letter-spacing:.11em !important;
    color:rgba(255,255,255,.68) !important;
    white-space:nowrap !important;
  }

  .visual-range-control input[type="range"]{
    width:100% !important;
    min-width:0 !important;
    height:18px !important;
    margin:0 !important;
    padding:0 !important;
    cursor:pointer !important;
  }

  .visual-range-control span{
    margin:0 !important;
    font:10px/1 Arial,sans-serif !important;
    color:rgba(255,255,255,.88) !important;
    text-align:right !important;
    font-variant-numeric:tabular-nums !important;
  }

  /* RESET POSは独立した小ボタン */
  .visual-reset-button{
    grid-column:1 !important;
    grid-row:7 !important;
    justify-self:start !important;
    width:auto !important;
    min-width:0 !important;
    height:26px !important;
    margin:0 !important;
    padding:0 12px !important;
    font-size:8px !important;
    letter-spacing:.08em !important;
  }

  .video-url-panel__progress{
    grid-column:2 / -1 !important;
    grid-row:7 !important;
    width:100% !important;
    margin:0 !important;
    align-self:center !important;
  }
}


/* =========================================================
   v0.7.7 SEPARATE VIDEO / SLIDER PANELS
   URL・LOAD等の枠と、調整スライダー枠を完全に分離。
   ========================================================= */

/* 独立調整パネル：通常は非表示、操作表示時だけ表示 */
.visual-adjust-panel{
  position:fixed;
  z-index:121;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
  box-sizing:border-box;
  background:rgba(0,0,0,.78);
  border:1px solid rgba(255,255,255,.28);
}
body.controls-visible .visual-adjust-panel{
  opacity:1;
  pointer-events:auto;
}
body.video-panel-closed .visual-adjust-panel{
  opacity:0 !important;
  pointer-events:none !important;
}

.visual-adjust-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:rgba(255,255,255,.72);
  font:9px/1 Arial,sans-serif;
  letter-spacing:.16em;
}

.visual-adjust-reset{
  width:auto;
  min-width:0;
  height:24px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:0;
  background:transparent;
  color:rgba(255,255,255,.78);
  font:8px/1 Arial,sans-serif;
  letter-spacing:.10em;
  cursor:pointer;
}

.visual-adjust-reset:hover{
  color:#fff;
  border-color:rgba(255,255,255,.68);
}

@media (min-width:768px){
  /* 既存URL/ボタン枠をコンパクトにする */
  .video-url-panel{
    left:22px !important;
    bottom:88px !important;
    width:min(590px, calc(100vw - 390px)) !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 70px 70px 84px !important;
    grid-template-rows:18px 36px 16px !important;
    column-gap:8px !important;
    row-gap:7px !important;
    padding:13px 14px !important;
    overflow:hidden !important;
  }

  .video-url-panel__label{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    margin:0 !important;
    padding:0 !important;
    align-self:start !important;
  }

  .video-url-panel__input{
    grid-column:1 !important;
    grid-row:2 !important;
    height:36px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  #videoUrlLoad{
    grid-column:2 !important;
    grid-row:2 !important;
    width:70px !important;
    min-width:70px !important;
    height:36px !important;
    margin:0 !important;
  }

  #videoUrlReset{
    grid-column:3 !important;
    grid-row:2 !important;
    width:70px !important;
    min-width:70px !important;
    height:36px !important;
    margin:0 !important;
  }

  .video-url-panel__close{
    position:static !important;
    grid-column:4 !important;
    grid-row:2 !important;
    width:84px !important;
    min-width:84px !important;
    height:36px !important;
    margin:0 !important;
    padding:0 7px !important;
  }

  .video-url-panel__status{
    grid-column:1 / 4 !important;
    grid-row:3 !important;
    min-height:0 !important;
    margin:0 !important;
    align-self:center !important;
    font-size:8px !important;
  }

  .video-url-panel__progress{
    grid-column:4 !important;
    grid-row:3 !important;
    width:100% !important;
    margin:0 !important;
    align-self:center !important;
  }

  /* スライダー専用の別枠 */
  .visual-adjust-panel{
    left:626px;
    bottom:88px;
    width:300px;
    min-height:176px;
    padding:13px 14px 14px;
  }

  .visual-adjust-panel__head{
    height:24px;
    margin-bottom:11px;
  }

  .visual-range-control{
    display:grid !important;
    grid-template-columns:92px minmax(0,1fr) 38px !important;
    align-items:center !important;
    gap:9px !important;
    width:100% !important;
    min-height:31px !important;
    margin:0 0 7px !important;
    padding:0 !important;
  }

  .visual-range-control:last-child{
    margin-bottom:0 !important;
  }

  .visual-range-control label{
    margin:0 !important;
    padding:0 !important;
    color:rgba(255,255,255,.66) !important;
    font:8px/1 Arial,sans-serif !important;
    letter-spacing:.09em !important;
    white-space:nowrap !important;
  }

  .visual-range-control input[type="range"]{
    width:100% !important;
    min-width:0 !important;
    height:18px !important;
    margin:0 !important;
    padding:0 !important;
    cursor:pointer !important;
  }

  .visual-range-control span{
    margin:0 !important;
    padding:0 !important;
    color:rgba(255,255,255,.90) !important;
    font:10px/1 Arial,sans-serif !important;
    text-align:right !important;
    font-variant-numeric:tabular-nums !important;
  }
}

/* 横幅が狭いPCでは、調整枠をURL枠の下へ逃がす */
@media (min-width:768px) and (max-width:1040px){
  .video-url-panel{
    width:min(590px, calc(100vw - 44px)) !important;
  }

  .visual-adjust-panel{
    left:22px;
    bottom:276px;
    width:min(300px, calc(100vw - 44px));
  }
}

/* スマホでは従来方針どおり控えめに縦配置 */
@media (max-width:767px){
  .visual-adjust-panel{
    left:12px;
    right:12px;
    bottom:210px;
    padding:12px;
  }

  .visual-adjust-panel__head{
    margin-bottom:9px;
  }

  .visual-range-control{
    display:grid;
    grid-template-columns:88px minmax(0,1fr) 34px;
    gap:8px;
    align-items:center;
    min-height:30px;
  }

  .visual-range-control label{
    color:rgba(255,255,255,.68);
    font-size:8px;
    letter-spacing:.06em;
  }

  .visual-range-control input[type="range"]{
    width:100%;
    min-width:0;
  }

  .visual-range-control span{
    color:#fff;
    font-size:9px;
    text-align:right;
  }
}


/* =========================================================
   v0.8.2 CONTROL UI — REBUILT FROM v0.8.0
   旧fixed配置を捨て、外枠1つの中で素直にレイアウトする。
   ========================================================= */

@media (min-width:768px){

  .control-ui-wrap{
    position:fixed;
    z-index:120;
    left:18px;
    bottom:76px;

    display:grid;
    grid-template-columns:820px 420px;
    gap:16px;
    align-items:stretch;

    width:1256px;
    height:204px;

    opacity:0;
    pointer-events:none;
    transition:opacity .28s ease;
  }

  body.controls-visible .control-ui-wrap{
    opacity:1;
    pointer-events:auto;
  }

  /* ------------------------------
     左枠
     ------------------------------ */
  .control-left-frame{
    width:820px;
    height:204px;
    padding:13px 14px;
    box-sizing:border-box;

    display:grid;
    grid-template-rows:46px 10px 120px;

    background:rgba(0,0,0,.78);
    border:1px solid rgba(255,255,255,.28);
    overflow:hidden;
  }

  .control-left-gap{
    grid-row:2;
  }

  /* 名言切替：上段 */
  .control-left-frame > .word-source-panel{
    position:static !important;
    grid-row:1;

    width:100% !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 !important;
    margin:0 !important;

    display:grid !important;
    grid-template-columns:92px 92px minmax(0,1fr) 145px !important;
    gap:8px !important;
    align-items:stretch !important;

    border:0 !important;
    background:transparent !important;

    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    box-sizing:border-box !important;
  }

  .control-left-frame .word-source-button{
    width:92px !important;
    min-width:92px !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  .control-left-frame .word-source-select{
    width:100% !important;
    min-width:0 !important;
    height:46px !important;
    min-height:46px !important;
    margin:0 !important;
    padding:0 38px 0 14px !important;
    box-sizing:border-box !important;
  }

  .control-left-frame .word-source-status{
    width:145px !important;
    min-width:145px !important;
    height:46px !important;

    display:flex !important;
    align-items:center !important;

    margin:0 !important;
    padding:0 0 0 4px !important;
    box-sizing:border-box !important;

    white-space:nowrap !important;
    overflow:hidden !important;
  }

  /* 動画読込：下段 */
  .control-left-frame > .video-url-panel{
    position:static !important;
    grid-row:3;

    width:100% !important;
    height:120px !important;
    min-height:120px !important;
    padding:0 !important;
    margin:0 !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) 82px 82px 94px !important;
    grid-template-rows:20px 46px 18px !important;
    column-gap:8px !important;
    row-gap:7px !important;

    border:0 !important;
    background:transparent !important;

    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  .control-left-frame .video-url-panel__label{
    position:static !important;
    grid-column:1 / -1 !important;
    grid-row:1 !important;

    width:auto !important;
    height:20px !important;
    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;

    font-size:9px !important;
    box-sizing:border-box !important;
  }

  .control-left-frame .video-url-panel__input{
    grid-column:1 !important;
    grid-row:2 !important;

    width:100% !important;
    min-width:0 !important;
    height:46px !important;

    margin:0 !important;
    box-sizing:border-box !important;
  }

  .control-left-frame #videoUrlLoad{
    grid-column:2 !important;
    grid-row:2 !important;
    width:82px !important;
    min-width:82px !important;
    height:46px !important;
    margin:0 !important;
  }

  .control-left-frame #videoUrlReset{
    grid-column:3 !important;
    grid-row:2 !important;
    width:82px !important;
    min-width:82px !important;
    height:46px !important;
    margin:0 !important;
  }

  .control-left-frame .video-url-panel__close{
    position:static !important;
    grid-column:4 !important;
    grid-row:2 !important;

    width:94px !important;
    min-width:94px !important;
    height:46px !important;

    margin:0 !important;
    padding:0 8px !important;
    box-sizing:border-box !important;
  }

  .control-left-frame .video-url-panel__status{
    grid-column:1 / 4 !important;
    grid-row:3 !important;

    height:18px !important;
    min-height:18px !important;
    margin:0 !important;

    display:flex !important;
    align-items:center !important;

    font-size:8px !important;
  }

  .control-left-frame .video-url-panel__progress{
    grid-column:4 !important;
    grid-row:3 !important;

    width:100% !important;
    height:2px !important;
    margin:8px 0 0 !important;
    align-self:start !important;
  }

  /* CLOSE時は動画部分だけ隠す。名言切替は残す */
  body.video-panel-closed .control-left-frame > .video-url-panel{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* ------------------------------
     右枠
     ------------------------------ */
  .control-ui-wrap > .visual-adjust-panel{
    position:static !important;

    width:420px !important;
    min-width:420px !important;
    height:204px !important;
    min-height:204px !important;

    margin:0 !important;
    padding:15px 18px !important;
    box-sizing:border-box !important;

    display:block !important;

    background:rgba(0,0,0,.78) !important;
    border:1px solid rgba(255,255,255,.28) !important;

    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    overflow:hidden !important;
  }

  body.video-panel-closed .control-ui-wrap > .visual-adjust-panel{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .control-ui-wrap .visual-adjust-panel__head{
    height:32px !important;
    margin:0 0 14px !important;
  }

  .control-ui-wrap .visual-adjust-reset{
    width:auto !important;
    min-width:70px !important;
    height:28px !important;
    padding:0 11px !important;
    margin:0 !important;
  }

  .control-ui-wrap .visual-range-control{
    display:grid !important;
    grid-template-columns:116px minmax(0,1fr) 42px !important;
    gap:11px !important;
    align-items:center !important;

    width:100% !important;
    height:36px !important;
    min-height:36px !important;

    margin:0 0 9px !important;
    padding:0 !important;
  }

  .control-ui-wrap .visual-range-control:last-child{
    margin-bottom:0 !important;
  }

  .control-ui-wrap .visual-range-control input[type="range"]{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  .control-ui-wrap .visual-range-control span{
    width:42px !important;
    text-align:right !important;
  }
}

/* PC幅が狭い時だけ全体を比例的に詰める */
@media (min-width:768px) and (max-width:1320px){
  .control-ui-wrap{
    grid-template-columns:minmax(650px,1fr) 360px;
    width:auto;
    right:18px;
  }

  .control-left-frame{
    width:auto;
  }

  .control-ui-wrap > .visual-adjust-panel{
    width:360px !important;
    min-width:360px !important;
  }

  .control-left-frame > .word-source-panel{
    grid-template-columns:84px 84px minmax(0,1fr) 132px !important;
  }

  .control-left-frame .word-source-button{
    width:84px !important;
    min-width:84px !important;
  }
}


/* =========================================================
   v0.8.3 CLOSE = CONTROL UI ALL HIDE
   CLOSE押下時は左ボタン群 + 右スライダー群をまとめて非表示。
   ========================================================= */
@media (min-width:768px){
  body.video-panel-closed .control-ui-wrap{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

@media (max-width:767px){
  body.video-panel-closed .control-ui-wrap{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}


/* =========================================================
   v0.9.1 DIRECT VIDEO / YOUTUBE 2段分離
   ========================================================= */
.control-ui-wrap{
  align-items:stretch;
}
.control-left-frame,
.visual-adjust-panel{
  height:258px !important;
  box-sizing:border-box;
}
.control-left-frame{
  width:820px !important;
}
.visual-adjust-panel{
  width:420px !important;
}
.media-load-panel{
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
  min-height:142px !important;
}
.media-load-row{
  display:grid !important;
  grid-template-columns:110px minmax(0,1fr) 72px !important;
  align-items:center !important;
  gap:8px !important;
}
.media-load-row .video-url-panel__label{
  position:static !important;
  width:auto !important;
  margin:0 !important;
  white-space:nowrap !important;
}
.media-load-input{
  min-width:0 !important;
  width:100% !important;
}
.media-load-footer{
  display:grid !important;
  grid-template-columns:72px 86px minmax(0,1fr) !important;
  align-items:center !important;
  gap:8px !important;
}
.media-load-footer .video-url-panel__status{
  position:static !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.video-url-panel__progress{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  margin-top:1px !important;
}
.visual-adjust-panel{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}
.visual-range-control{
  margin:0 !important;
}
.visual-range-control--youtube-size label{
  white-space:nowrap !important;
}
.media-mode-direct #directVideoSizeControl{
  opacity:1;
}
.media-mode-direct #youtubeSizeControl{
  opacity:.32;
}
.media-mode-youtube #directVideoSizeControl{
  opacity:.32;
}
.media-mode-youtube #youtubeSizeControl{
  opacity:1;
}


/* =========================================================
   v0.9.2 CONTROL GRID ALIGNMENT
   左右を同じ高さ・同じ段組みに固定
   ========================================================= */
.control-ui-wrap{
  display:grid !important;
  grid-template-columns:minmax(0, 820px) 420px !important;
  gap:24px !important;
  align-items:stretch !important;
}
.control-left-frame,
.visual-adjust-panel{
  width:auto !important;
  height:306px !important;
  min-height:306px !important;
  max-height:306px !important;
  padding:20px !important;
  box-sizing:border-box !important;
}

/* 左：4段を同じ幅で揃える */
.control-left-frame{
  display:grid !important;
  grid-template-rows:58px 1px 58px 58px 45px !important;
  row-gap:10px !important;
}
.word-source-panel{
  width:100% !important;
  display:grid !important;
  grid-template-columns:138px 138px minmax(260px,1fr) 190px !important;
  gap:12px !important;
  align-items:stretch !important;
  position:static !important;
}
.word-source-button,
.word-source-select{
  width:100% !important;
  height:58px !important;
  min-height:58px !important;
  box-sizing:border-box !important;
}
.word-source-status{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-width:0 !important;
  height:58px !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}
.control-left-gap{
  width:100% !important;
  height:1px !important;
  margin:0 !important;
  background:rgba(255,255,255,.14) !important;
}
.media-load-panel{
  display:contents !important;
}
.media-load-row{
  width:100% !important;
  display:grid !important;
  grid-template-columns:138px minmax(0,1fr) 122px !important;
  gap:12px !important;
  align-items:stretch !important;
}
.media-load-row .video-url-panel__label{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  height:58px !important;
  padding:0 14px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-sizing:border-box !important;
  font-size:12px !important;
  letter-spacing:.10em !important;
}
.media-load-input{
  width:100% !important;
  height:58px !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
.media-load-row .video-url-panel__button{
  width:122px !important;
  height:58px !important;
  box-sizing:border-box !important;
}
.media-load-footer{
  width:100% !important;
  display:grid !important;
  grid-template-columns:122px 122px minmax(0,1fr) !important;
  gap:12px !important;
  align-items:center !important;
}
.media-load-footer .video-url-panel__button,
.media-load-footer .video-url-panel__close{
  width:122px !important;
  height:45px !important;
  box-sizing:border-box !important;
}
.media-load-footer .video-url-panel__status{
  width:100% !important;
  min-width:0 !important;
  height:45px !important;
  display:flex !important;
  align-items:center !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.video-url-panel__progress{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* 右：左と同じ総高さ。4段を均等に配置 */
.visual-adjust-panel{
  display:grid !important;
  grid-template-rows:45px 58px 58px 58px !important;
  row-gap:10px !important;
  align-content:start !important;
}
.visual-adjust-panel__head{
  height:45px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
.visual-adjust-reset{
  height:42px !important;
}
.visual-range-control{
  height:58px !important;
  display:grid !important;
  grid-template-columns:150px minmax(0,1fr) 48px !important;
  gap:10px !important;
  align-items:center !important;
  margin:0 !important;
}
.visual-range-control label{
  margin:0 !important;
}
.visual-range-control input[type="range"]{
  width:100% !important;
  min-width:0 !important;
}
.visual-range-control span{
  text-align:right !important;
}

/* 右側は要求どおりズーム/位置3段。
   BACKGROUND Y は表示を外し、既存値・機能はJS内に保持する。 */
.visual-range-control--bg-y{
  display:none !important;
}

@media (max-width: 1320px){
  .control-ui-wrap{
    grid-template-columns:minmax(0,1fr) 390px !important;
  }
  .word-source-panel{
    grid-template-columns:120px 120px minmax(220px,1fr) 170px !important;
  }
}


/* =========================================================
   v0.9.3 MEDIA CONTROL GRID — FINAL ALIGNMENT
   動画 / YouTube の入力欄・LOAD・補助ボタンを同一寸法で整列
   左右の外枠高さも完全一致
   ========================================================= */

/* 全体2カラム */
.control-ui-wrap{
  display:grid !important;
  grid-template-columns:820px 420px !important;
  gap:24px !important;
  align-items:stretch !important;
}

/* 左右の箱を完全に同じ高さへ */
.control-left-frame,
.visual-adjust-panel{
  height:300px !important;
  min-height:300px !important;
  max-height:300px !important;
  box-sizing:border-box !important;
  padding:18px !important;
}

/* ---------- 左：名言 + DIRECT + YOUTUBE + footer ---------- */
.control-left-frame{
  display:grid !important;
  grid-template-rows:54px 1px 54px 54px 42px !important;
  row-gap:9px !important;
  align-content:start !important;
}

/* 名言ソース行 */
.word-source-panel{
  display:grid !important;
  grid-template-columns:132px 132px minmax(0,1fr) 170px !important;
  gap:10px !important;
  align-items:stretch !important;
  width:100% !important;
  height:54px !important;
  position:static !important;
}
.word-source-button,
.word-source-select,
.word-source-status{
  width:100% !important;
  height:54px !important;
  min-height:54px !important;
  box-sizing:border-box !important;
  margin:0 !important;
}
.word-source-status{
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  padding:0 10px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* 名言と動画の間の細い区切り */
.control-left-gap{
  width:100% !important;
  height:1px !important;
  margin:0 !important;
  background:rgba(255,255,255,.18) !important;
}

/* media-load-panel のラッパー自体はレイアウトに介入させない */
.media-load-panel{
  display:contents !important;
}

/* DIRECT / YOUTUBE は完全に同じ3列 */
.media-load-row{
  display:grid !important;
  grid-template-columns:132px minmax(0,1fr) 112px !important;
  gap:10px !important;
  align-items:stretch !important;
  width:100% !important;
  height:54px !important;
}

/* 左ラベル */
.media-load-row .video-url-panel__label{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  height:54px !important;
  padding:0 12px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  border:1px solid rgba(255,255,255,.22) !important;
  white-space:nowrap !important;
}

/* URLバー */
.media-load-input{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:54px !important;
  margin:0 !important;
  padding:0 14px !important;
  box-sizing:border-box !important;
}

/* LOADボタン */
.media-load-row .video-url-panel__button{
  width:112px !important;
  min-width:112px !important;
  max-width:112px !important;
  height:54px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* 下段も同じピッチに揃える */
.media-load-footer{
  display:grid !important;
  grid-template-columns:112px 112px minmax(0,1fr) !important;
  gap:10px !important;
  align-items:stretch !important;
  width:100% !important;
  height:42px !important;
}
.media-load-footer .video-url-panel__button,
.media-load-footer .video-url-panel__close{
  width:112px !important;
  min-width:112px !important;
  max-width:112px !important;
  height:42px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
.media-load-footer .video-url-panel__status{
  position:static !important;
  width:100% !important;
  min-width:0 !important;
  height:42px !important;
  margin:0 !important;
  padding:0 10px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* プログレスバーは下端に細く保持 */
.video-url-panel__progress{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* ---------- 右：左と同高300px ---------- */
.visual-adjust-panel{
  display:grid !important;
  grid-template-rows:42px 54px 54px 54px !important;
  row-gap:9px !important;
  align-content:start !important;
}

.visual-adjust-panel__head{
  height:42px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

.visual-adjust-reset{
  width:92px !important;
  height:42px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

.visual-range-control{
  display:grid !important;
  grid-template-columns:132px minmax(0,1fr) 48px !important;
  gap:10px !important;
  align-items:center !important;
  width:100% !important;
  height:54px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
.visual-range-control label{
  margin:0 !important;
  white-space:nowrap !important;
}
.visual-range-control input[type="range"]{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
}
.visual-range-control span{
  text-align:right !important;
  white-space:nowrap !important;
}

/* 右は3段表示。BACKGROUND Yは従来通り内部保持のみ */
.visual-range-control--bg-y{
  display:none !important;
}

/* 中程度の幅でも崩れないよう縮小 */
@media (max-width: 1320px){
  .control-ui-wrap{
    grid-template-columns:minmax(0,1fr) 390px !important;
  }
  .word-source-panel{
    grid-template-columns:118px 118px minmax(0,1fr) 150px !important;
  }
  .media-load-row{
    grid-template-columns:118px minmax(0,1fr) 104px !important;
  }
  .media-load-row .video-url-panel__button{
    width:104px !important;
    min-width:104px !important;
    max-width:104px !important;
  }
}


/* =========================================================
   v0.9.4 CLEAN CONTROL PANEL
   既存のvideo/word-source系レイアウト指定に依存せず、
   ctl94系だけで左右の箱と4段の基準線を固定する。
   ========================================================= */
.ctl94-wrap{
  display:grid !important;
  grid-template-columns:minmax(0, 1.95fr) minmax(380px, 1fr) !important;
  gap:24px !important;
  align-items:stretch !important;
}

.ctl94-box{
  height:306px !important;
  min-height:306px !important;
  max-height:306px !important;
  box-sizing:border-box !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background:rgba(0,0,0,.74) !important;
  padding:18px !important;
}

/* 左右とも「4段・同じ縦ピッチ」 */
.ctl94-left,
.ctl94-right{
  display:grid !important;
  grid-template-rows:56px 56px 56px 56px !important;
  row-gap:12px !important;
  align-content:start !important;
}

/* -------- 左 -------- */
.ctl94-source-row{
  display:grid !important;
  grid-template-columns:138px 138px minmax(260px,1fr) 200px !important;
  gap:12px !important;
  align-items:stretch !important;
  min-width:0 !important;
}

.ctl94-media-row{
  display:grid !important;
  grid-template-columns:138px minmax(0,1fr) 116px !important;
  gap:12px !important;
  align-items:stretch !important;
  min-width:0 !important;
}

.ctl94-footer-row{
  display:grid !important;
  grid-template-columns:116px 116px minmax(0,1fr) !important;
  gap:12px !important;
  align-items:stretch !important;
  min-width:0 !important;
  position:relative !important;
}

.ctl94-btn,
.ctl94-select,
.ctl94-input,
.ctl94-label,
.ctl94-status{
  height:56px !important;
  min-height:56px !important;
  box-sizing:border-box !important;
  border-radius:0 !important;
  margin:0 !important;
  font:inherit !important;
}

.ctl94-btn{
  border:1px solid rgba(255,255,255,.28) !important;
  background:#050505 !important;
  color:#f1f1f1 !important;
  cursor:pointer !important;
  letter-spacing:.08em !important;
}

.ctl94-source-btn.is-active,
body .ctl94-source-btn.is-active{
  background:#efefef !important;
  color:#171717 !important;
}

.ctl94-select,
.ctl94-input{
  width:100% !important;
  min-width:0 !important;
  border:1px solid rgba(255,255,255,.28) !important;
  background:#050505 !important;
  color:#f1f1f1 !important;
  padding:0 16px !important;
  outline:none !important;
}

.ctl94-label{
  display:flex !important;
  align-items:center !important;
  padding:0 16px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#d7d7d7 !important;
  letter-spacing:.08em !important;
  white-space:nowrap !important;
}

.ctl94-status{
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  padding:0 14px !important;
  color:#8d8d8d !important;
  letter-spacing:.04em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.ctl94-small{
  width:116px !important;
  min-width:116px !important;
  height:56px !important;
}

.ctl94-progress{
  position:absolute !important;
  left:244px !important;
  right:0 !important;
  bottom:0 !important;
  height:2px !important;
  overflow:hidden !important;
}

/* -------- 右 -------- */
.ctl94-head-row,
.ctl94-range-row{
  display:grid !important;
  grid-template-columns:138px minmax(0,1fr) 52px !important;
  gap:12px !important;
  align-items:center !important;
  min-width:0 !important;
  height:56px !important;
}

.ctl94-head-row{
  grid-template-columns:minmax(0,1fr) 116px !important;
}

.ctl94-head-row > span{
  letter-spacing:.08em !important;
  color:#d7d7d7 !important;
}

.ctl94-range-row label{
  margin:0 !important;
  color:#bdbdbd !important;
  letter-spacing:.04em !important;
  white-space:nowrap !important;
}

.ctl94-range-row input[type="range"]{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
}

.ctl94-range-row > span{
  text-align:right !important;
  color:#f1f1f1 !important;
  white-space:nowrap !important;
}

/* 以前のメディアパネルのレイアウト指定を無効化 */
.ctl94-wrap .video-url-panel,
.ctl94-wrap .word-source-panel,
.ctl94-wrap .visual-adjust-panel{
  all:unset;
}

/* CLOSE後は左右まとめて消す */
body.video-panel-closed .ctl94-wrap{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* 幅が狭くなった場合も列の関係を維持 */
@media (max-width: 1350px){
  .ctl94-wrap{
    grid-template-columns:minmax(0, 1.7fr) minmax(360px, 1fr) !important;
  }
  .ctl94-source-row{
    grid-template-columns:118px 118px minmax(220px,1fr) 165px !important;
  }
  .ctl94-media-row{
    grid-template-columns:118px minmax(0,1fr) 104px !important;
  }
  .ctl94-footer-row{
    grid-template-columns:104px 104px minmax(0,1fr) !important;
  }
  .ctl94-small{
    width:104px !important;
    min-width:104px !important;
  }
}


/* =========================================================
   v0.9.9 CLEAN SINGLE GRID
   旧コントロール用CSSを切り離し、これだけで配置する。
   ========================================================= */

.ctl99-wrap{
  position:absolute !important;
  left:22px !important;
  right:22px !important;
  bottom:48px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1.92fr) minmax(360px,.98fr) !important;
  gap:22px !important;
  align-items:stretch !important;
  z-index:20 !important;
}

.ctl99-left,
.ctl99-right{
  height:162px !important;
  min-height:162px !important;
  max-height:162px !important;
  box-sizing:border-box !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background:rgba(0,0,0,.78) !important;
  padding:12px !important;
  overflow:hidden !important;
}

/* LEFT: 12 columns x 3 rows */
.ctl99-left{
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  grid-template-rows:36px 42px 36px !important;
  column-gap:8px !important;
  row-gap:8px !important;
  align-content:start !important;
}

/* row 1 */
.ctl99-online       { grid-column:1 / 3 !important; grid-row:1 !important; }
.ctl99-local        { grid-column:3 / 5 !important; grid-row:1 !important; }
.ctl99-category     { grid-column:5 / 11 !important; grid-row:1 !important; }
.ctl99-local-status { grid-column:11 / 13 !important; grid-row:1 !important; }

/* row 2 */
.ctl99-direct-label { grid-column:1 / 3 !important; grid-row:2 !important; }
.ctl99-direct-input { grid-column:3 / 6 !important; grid-row:2 !important; }
.ctl99-direct-load  { grid-column:6 / 7 !important; grid-row:2 !important; }

.ctl99-youtube-label{ grid-column:7 / 9 !important; grid-row:2 !important; }
.ctl99-youtube-input{ grid-column:9 / 12 !important; grid-row:2 !important; }
.ctl99-youtube-load { grid-column:12 / 13 !important; grid-row:2 !important; }

/* row 3 */
.ctl99-reset        { grid-column:1 / 7 !important; grid-row:3 !important; }
.ctl99-close        { grid-column:7 / 13 !important; grid-row:3 !important; }

/* shared */
.ctl99-btn,
.ctl99-select,
.ctl99-input,
.ctl99-label,
.ctl99-status{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 10px !important;
  box-sizing:border-box !important;
  border-radius:0 !important;
  font-size:11px !important;
  line-height:1 !important;
  letter-spacing:.045em !important;
}

.ctl99-btn{
  border:1px solid rgba(255,255,255,.26) !important;
  background:#050505 !important;
  color:#ededed !important;
  cursor:pointer !important;
}

.ctl99-online.is-active,
.ctl99-local.is-active{
  background:#efefef !important;
  color:#151515 !important;
}

.ctl99-select,
.ctl99-input{
  border:1px solid rgba(255,255,255,.22) !important;
  background:#050505 !important;
  color:#ededed !important;
  outline:none !important;
}

.ctl99-label{
  display:flex !important;
  align-items:center !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#d0d0d0 !important;
  white-space:nowrap !important;
}

.ctl99-status{
  display:flex !important;
  align-items:center !important;
  color:#8b8b8b !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* RIGHT */
.ctl99-right{
  display:grid !important;
  grid-template-columns:112px minmax(0,1fr) 42px !important;
  grid-template-rows:34px 30px 30px 30px !important;
  column-gap:8px !important;
  row-gap:6px !important;
  align-content:start !important;
}

.ctl99-right-head{
  grid-column:1 / 3 !important;
  grid-row:1 !important;
  display:flex !important;
  align-items:center !important;
  font-size:11px !important;
  letter-spacing:.06em !important;
  color:#d6d6d6 !important;
}

.ctl99-right-reset{
  grid-column:3 !important;
  grid-row:1 !important;
  width:100% !important;
  height:34px !important;
  padding:0 !important;
  font-size:10px !important;
}

.ctl99-range-label{
  font-size:11px !important;
  color:#bcbcbc !important;
  letter-spacing:.04em !important;
  align-self:center !important;
  margin:0 !important;
  white-space:nowrap !important;
}

.ctl99-range{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  align-self:center !important;
}

.ctl99-range-value{
  font-size:11px !important;
  color:#ededed !important;
  text-align:right !important;
  align-self:center !important;
}

.ctl99-right label[for="videoSizeRange"]{ grid-column:1 !important; grid-row:2 !important; }
#videoSizeRange{ grid-column:2 !important; grid-row:2 !important; }
#videoSizeValue{ grid-column:3 !important; grid-row:2 !important; }

.ctl99-right label[for="youtubeSizeRange"]{ grid-column:1 !important; grid-row:3 !important; }
#youtubeSizeRange{ grid-column:2 !important; grid-row:3 !important; }
#youtubeSizeValue{ grid-column:3 !important; grid-row:3 !important; }

.ctl99-right label[for="videoYRange"]{ grid-column:1 !important; grid-row:4 !important; }
#videoYRange{ grid-column:2 !important; grid-row:4 !important; }
#videoYValue{ grid-column:3 !important; grid-row:4 !important; }

body.video-panel-closed .ctl99-wrap{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

@media (max-width:1360px){
  .ctl99-wrap{
    grid-template-columns:minmax(0,1.7fr) minmax(340px,1fr) !important;
  }

  .ctl99-btn,
  .ctl99-select,
  .ctl99-input,
  .ctl99-label,
  .ctl99-status,
  .ctl99-right-head,
  .ctl99-range-label,
  .ctl99-range-value{
    font-size:10px !important;
  }
}


/* =========================================================
   v1.0.0 CLEAN ROOM / NUCLEAR RESET
   旧レイアウト指定より高いspecificityで全位置指定を無効化。
   ========================================================= */

html body #controlUiWrap.ctl100-wrap{
  position:absolute !important;
  left:22px !important;
  right:22px !important;
  bottom:48px !important;
  top:auto !important;

  display:grid !important;
  grid-template-columns:minmax(0,1.92fr) minmax(360px,.98fr) !important;
  gap:22px !important;
  align-items:stretch !important;

  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  z-index:20 !important;
}

/* 左右外枠 */
html body #controlUiWrap > .ctl100-left,
html body #controlUiWrap > .ctl100-right{
  position:relative !important;
  inset:auto !important;
  float:none !important;
  transform:none !important;

  width:auto !important;
  height:162px !important;
  min-height:162px !important;
  max-height:162px !important;

  margin:0 !important;
  padding:12px !important;
  box-sizing:border-box !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background:rgba(0,0,0,.78) !important;
  overflow:hidden !important;
}

/* LEFT : 12 COL × 3 ROW */
html body #controlUiWrap > .ctl100-left{
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  grid-template-rows:36px 42px 36px !important;
  column-gap:8px !important;
  row-gap:8px !important;
  align-content:start !important;
  align-items:stretch !important;
}

/* 旧button/input/select/label/status指定を完全リセット */
html body #controlUiWrap > .ctl100-left > button,
html body #controlUiWrap > .ctl100-left > input,
html body #controlUiWrap > .ctl100-left > select,
html body #controlUiWrap > .ctl100-left > div:not([hidden]){
  position:static !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  inset:auto !important;
  float:none !important;

  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;

  margin:0 !important;
  box-sizing:border-box !important;
  transform:none !important;
  align-self:stretch !important;
  justify-self:stretch !important;
}

/* 1段目 */
html body #controlUiWrap #wordModeOnline{
  grid-column:1 / 3 !important;
  grid-row:1 !important;
}
html body #controlUiWrap #wordModeLocal{
  grid-column:3 / 5 !important;
  grid-row:1 !important;
}
html body #controlUiWrap #localCategorySelect{
  grid-column:5 / 11 !important;
  grid-row:1 !important;
}
html body #controlUiWrap #localDataStatus{
  grid-column:11 / 13 !important;
  grid-row:1 !important;
}

/* 2段目：DIRECT VIDEO | URL | LOAD | YOUTUBE | URL | LOAD */
html body #controlUiWrap .ctl100-direct-label{
  grid-column:1 / 3 !important;
  grid-row:2 !important;
}
html body #controlUiWrap #videoUrlInput{
  grid-column:3 / 6 !important;
  grid-row:2 !important;
}
html body #controlUiWrap #videoUrlLoad{
  grid-column:6 / 7 !important;
  grid-row:2 !important;
}

html body #controlUiWrap .ctl100-youtube-label{
  grid-column:7 / 9 !important;
  grid-row:2 !important;
}
html body #controlUiWrap #youtubeUrlInput{
  grid-column:9 / 12 !important;
  grid-row:2 !important;
}
html body #controlUiWrap #youtubeUrlLoad{
  grid-column:12 / 13 !important;
  grid-row:2 !important;
}

/* 3段目：RESET | CLOSE */
html body #controlUiWrap #videoUrlReset{
  grid-column:1 / 7 !important;
  grid-row:3 !important;
}
html body #controlUiWrap #videoUrlClose{
  grid-column:7 / 13 !important;
  grid-row:3 !important;
}

/* 見た目 */
html body #controlUiWrap .ctl100-btn,
html body #controlUiWrap .ctl100-select,
html body #controlUiWrap .ctl100-input,
html body #controlUiWrap .ctl100-label,
html body #controlUiWrap .ctl100-status{
  padding:0 10px !important;
  border-radius:0 !important;
  font-size:11px !important;
  line-height:1 !important;
  letter-spacing:.045em !important;
}

html body #controlUiWrap .ctl100-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(255,255,255,.26) !important;
  background:#050505 !important;
  color:#ededed !important;
}

html body #controlUiWrap .ctl100-select,
html body #controlUiWrap .ctl100-input{
  display:block !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background:#050505 !important;
  color:#ededed !important;
  outline:none !important;
}

html body #controlUiWrap .ctl100-label,
html body #controlUiWrap .ctl100-status{
  display:flex !important;
  align-items:center !important;
}

html body #controlUiWrap .ctl100-label{
  border:1px solid rgba(255,255,255,.18) !important;
  color:#d0d0d0 !important;
}

html body #controlUiWrap .ctl100-status{
  color:#8b8b8b !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html body #controlUiWrap #wordModeOnline.is-active,
html body #controlUiWrap #wordModeLocal.is-active{
  background:#efefef !important;
  color:#151515 !important;
}

html body #controlUiWrap #videoUrlStatus,
html body #controlUiWrap #videoUrlProgress{
  display:none !important;
}

/* RIGHT */
html body #controlUiWrap > .ctl100-right{
  display:grid !important;
  grid-template-columns:112px minmax(0,1fr) 42px !important;
  grid-template-rows:34px 30px 30px 30px !important;
  column-gap:8px !important;
  row-gap:6px !important;
  align-content:start !important;
  align-items:center !important;
}

html body #controlUiWrap .ctl100-right-head{
  grid-column:1 / 3 !important;
  grid-row:1 !important;
  display:flex !important;
  align-items:center !important;
  font-size:11px !important;
  letter-spacing:.06em !important;
  color:#d6d6d6 !important;
}

html body #controlUiWrap #visualPositionReset{
  position:static !important;
  inset:auto !important;
  grid-column:3 !important;
  grid-row:1 !important;
  width:100% !important;
  height:34px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  font-size:10px !important;
}

html body #controlUiWrap .ctl100-range-label{
  font-size:11px !important;
  color:#bcbcbc !important;
  margin:0 !important;
}

html body #controlUiWrap .ctl100-range{
  position:static !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  transform:none !important;
}

html body #controlUiWrap .ctl100-range-value{
  font-size:11px !important;
  color:#ededed !important;
  text-align:right !important;
}

html body #controlUiWrap .ctl100-right label[for="videoSizeRange"]{grid-column:1!important;grid-row:2!important;}
html body #controlUiWrap #videoSizeRange{grid-column:2!important;grid-row:2!important;}
html body #controlUiWrap #videoSizeValue{grid-column:3!important;grid-row:2!important;}

html body #controlUiWrap .ctl100-right label[for="youtubeSizeRange"]{grid-column:1!important;grid-row:3!important;}
html body #controlUiWrap #youtubeSizeRange{grid-column:2!important;grid-row:3!important;}
html body #controlUiWrap #youtubeSizeValue{grid-column:3!important;grid-row:3!important;}

html body #controlUiWrap .ctl100-right label[for="videoYRange"]{grid-column:1!important;grid-row:4!important;}
html body #controlUiWrap #videoYRange{grid-column:2!important;grid-row:4!important;}
html body #controlUiWrap #videoYValue{grid-column:3!important;grid-row:4!important;}

body.video-panel-closed #controlUiWrap{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}


/* =========================================================
   v1.0.1 CONTROL GROUP WIDTH
   ボタン群全体を横幅いっぱいから約半分へ縮小
   ========================================================= */
html body #controlUiWrap.ctl100-wrap{
  left:22px !important;
  right:auto !important;
  width:min(980px, calc(100vw - 44px)) !important;

  grid-template-columns:minmax(0,1.92fr) minmax(320px,.98fr) !important;
  gap:18px !important;
}

/* 超横長画面では約50%幅に抑える */
@media (min-width:1600px){
  html body #controlUiWrap.ctl100-wrap{
    width:50vw !important;
    max-width:1100px !important;
    min-width:860px !important;
  }
}


/* v1.0.1a : POSITION / SIZE の RESET だけ少し広げる */
html body #controlUiWrap #visualPositionReset{
  width:64px !important;
  min-width:64px !important;
  max-width:64px !important;
  justify-self:end !important;
}


/* =========================================================
   v1.0.1b 左上ブランド表示
   ロゴ / ページタイトルを白くし、少し大きくする
   ========================================================= */
.brand,
.brand *,
.logo,
.logo *,
.site-logo,
.site-logo *,
.page-title,
.page-title *,
.app-title,
.app-title *,
.top-title,
.top-title *,
.title-wrap,
.title-wrap *{
  color:#fff !important;
}

/* 左上ロゴ */
.brand,
.logo,
.site-logo{
  font-size:17px !important;
}

/* ページタイトル */
.page-title,
.app-title,
.top-title,
.title-wrap{
  font-size:21px !important;
}


/* =========================================================
   v1.0.1c 左上ロゴ / タイトル — 実際のselectorへ直接指定
   ========================================================= */
html body .so-page-identity{
  opacity:1 !important;
}

html body .so-page-logo{
  width:150px !important;
  height:auto !important;
  max-width:none !important;
  opacity:1 !important;
  filter:brightness(0) invert(1) !important;
}

html body .so-page-title{
  display:block !important;
  color:#fff !important;
  opacity:1 !important;
  font-size:12px !important;
  font-weight:400 !important;
  line-height:1.25 !important;
  letter-spacing:.20em !important;
  white-space:nowrap !important;
}

/* PC / タブレット横向きでも縮小指定に負けない */
@media (min-width:768px){
  html body .so-page-logo{
    width:150px !important;
  }
  html body .so-page-title{
    display:block !important;
    font-size:12px !important;
  }
}


/* v1.0.1e 左上CUDIORAロゴのみ 1/3サイズ */
html body .so-page-logo{
  width:50px !important;
}
@media (min-width:768px){
  html body .so-page-logo{
    width:50px !important;
  }
}


/* =========================================================
   v1.0.1f SMARTPHONE ONLY
   PC版には一切影響させない。
   スマホでは3D表示の下へ操作パネルを縦スクロール配置。
   ========================================================= */
@media (max-width:767px){

  /* 右上 FULL はスマホでは不要 */
  html body .so-exit-button{
    display:none !important;
  }

  /* ページ自体を縦スクロール可能にする */
  html,
  body{
    width:100% !important;
    min-height:100% !important;
    height:auto !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  body{
    position:relative !important;
    overscroll-behavior-y:auto !important;
  }

  /*
     3Dキャンバスは最初の1画面に固定。
     その下へ通常フローの操作エリアを置く。
  */
  #app,
  .app,
  .scene-wrap,
  .scene-container,
  .webgl-wrap{
    min-height:100svh !important;
  }

  canvas.webgl,
  #webgl,
  #canvas,
  body > canvas:first-of-type{
    max-height:100svh !important;
  }

  /* 操作エリア全体を画面下へ押し込まず、通常フローへ */
  html body #controlUiWrap.ctl100-wrap{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    display:block !important;
    width:calc(100% - 24px) !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;

    margin:100svh 12px 28px !important;
    padding:0 !important;
    transform:none !important;
    z-index:30 !important;
  }

  /* 左右パネルともスマホでは1カラム */
  html body #controlUiWrap > .ctl100-left,
  html body #controlUiWrap > .ctl100-right{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:0 0 12px !important;
    padding:12px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  /* 左パネル：3段横組みを解除して縦積み */
  html body #controlUiWrap > .ctl100-left{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto !important;
    gap:8px !important;
  }

  /* ONLINE / LOCAL */
  html body #controlUiWrap #wordModeOnline{
    grid-column:1 !important;
    grid-row:auto !important;
  }
  html body #controlUiWrap #wordModeLocal{
    grid-column:2 !important;
    grid-row:auto !important;
  }

  /* CATEGORY / STATUS */
  html body #controlUiWrap #localCategorySelect{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
  }
  html body #controlUiWrap #localDataStatus{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    min-height:24px !important;
  }

  /* DIRECT VIDEO */
  html body #controlUiWrap .ctl100-direct-label{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    min-height:28px !important;
  }
  html body #controlUiWrap #videoUrlInput{
    grid-column:1 !important;
    grid-row:auto !important;
  }
  html body #controlUiWrap #videoUrlLoad{
    grid-column:2 !important;
    grid-row:auto !important;
  }

  /* YOUTUBE */
  html body #controlUiWrap .ctl100-youtube-label{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    min-height:28px !important;
  }
  html body #controlUiWrap #youtubeUrlInput{
    grid-column:1 !important;
    grid-row:auto !important;
  }
  html body #controlUiWrap #youtubeUrlLoad{
    grid-column:2 !important;
    grid-row:auto !important;
  }

  /* RESET / CLOSE */
  html body #controlUiWrap #videoUrlReset{
    grid-column:1 !important;
    grid-row:auto !important;
  }
  html body #controlUiWrap #videoUrlClose{
    grid-column:2 !important;
    grid-row:auto !important;
  }

  /* 左パネル内部要素の高さを統一 */
  html body #controlUiWrap > .ctl100-left > button,
  html body #controlUiWrap > .ctl100-left > input,
  html body #controlUiWrap > .ctl100-left > select{
    width:100% !important;
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    font-size:11px !important;
  }

  html body #controlUiWrap > .ctl100-left > div:not([hidden]){
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    font-size:11px !important;
  }

  /* 右側スライダー群も縦積み */
  html body #controlUiWrap > .ctl100-right{
    display:grid !important;
    grid-template-columns:108px minmax(0,1fr) 40px !important;
    grid-template-rows:auto !important;
    column-gap:8px !important;
    row-gap:12px !important;
    align-items:center !important;
  }

  html body #controlUiWrap .ctl100-right-head{
    grid-column:1 / 3 !important;
    grid-row:auto !important;
    min-height:32px !important;
  }

  html body #controlUiWrap #visualPositionReset{
    grid-column:3 !important;
    grid-row:1 !important;
    width:64px !important;
    min-width:64px !important;
    height:34px !important;
    justify-self:end !important;
  }

  html body #controlUiWrap .ctl100-right label[for="videoSizeRange"]{
    grid-column:1 !important;
    grid-row:2 !important;
  }
  html body #controlUiWrap #videoSizeRange{
    grid-column:2 !important;
    grid-row:2 !important;
  }
  html body #controlUiWrap #videoSizeValue{
    grid-column:3 !important;
    grid-row:2 !important;
  }

  html body #controlUiWrap .ctl100-right label[for="youtubeSizeRange"]{
    grid-column:1 !important;
    grid-row:3 !important;
  }
  html body #controlUiWrap #youtubeSizeRange{
    grid-column:2 !important;
    grid-row:3 !important;
  }
  html body #controlUiWrap #youtubeSizeValue{
    grid-column:3 !important;
    grid-row:3 !important;
  }

  html body #controlUiWrap .ctl100-right label[for="videoYRange"]{
    grid-column:1 !important;
    grid-row:4 !important;
  }
  html body #controlUiWrap #videoYRange{
    grid-column:2 !important;
    grid-row:4 !important;
  }
  html body #controlUiWrap #videoYValue{
    grid-column:3 !important;
    grid-row:4 !important;
  }

  /* スライダー操作性 */
  html body #controlUiWrap input[type="range"]{
    width:100% !important;
    min-width:0 !important;
  }

  /* CLOSE後はPC同様に全体を隠す */
  body.video-panel-closed #controlUiWrap{
    display:none !important;
  }
}


/* =========================================================
   v1.0.1g SMARTPHONE ONLY
   縦スクロール不能の原因だった WebGL の touch-action:none を解除。
   時計・カレンダーも少し下げる。
   PC版には影響しない。
   ========================================================= */
@media (max-width:767px){

  /* スクロールできるだけの実高さを明示 */
  html{
    min-height:100% !important;
    height:auto !important;
    overflow-y:auto !important;
  }

  body{
    min-height:200svh !important;
    height:auto !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* WebGLが指の縦スクロールを奪わないようにする */
  html body #webgl{
    touch-action:pan-y !important;
  }

  /* 操作エリアは確実に1画面下から始める */
  html body #controlUiWrap.ctl100-wrap{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    width:calc(100% - 24px) !important;
    margin:100svh 12px 32px !important;
  }

  /* 時刻・日付を上端から少し下げる */
  html body .daily-clock{
    top:72px !important;
  }
}


/* =========================================================
   v1.0.1h SMARTPHONE ONLY
   時計・カレンダーを少し下げ、名言エリアはさらに下へ。
   PC版には影響しない。
   ========================================================= */
@media (max-width:767px){

  /* 時計・カレンダーを少し下へ */
  html body .daily-clock{
    top:84px !important;
  }

  /* 名言描画キャンバス全体をさらに下へ */
  html body #quoteCanvas,
  html body #shredCanvas{
    transform:translateY(48px) !important;
  }

  /* HTMLレイヤー型の名言表示が残っている場合も同じく下げる */
  html body .quote-layer{
    transform:translateY(48px) !important;
  }
}

/* v1.0.1i SMARTPHONE ONLY：右の丸ボタン4個を下部横並びへ */
@media (max-width:767px){
  html body .shift-button,
  html body .quote-stop-button,
  html body .auto-button,
  html body .bgm-button{
    position:fixed !important;
    top:auto !important;
    bottom:max(18px, calc(env(safe-area-inset-bottom) + 10px)) !important;
    right:auto !important;
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    min-height:58px !important;
    max-width:58px !important;
    max-height:58px !important;
    margin:0 !important;
    transform:none !important;
    z-index:140 !important;
  }
  html body .shift-button{left:calc(50% - 127px) !important;}
  html body .quote-stop-button{left:calc(50% - 61px) !important;}
  html body .auto-button{left:calc(50% + 5px) !important;}
  html body .bgm-button{left:calc(50% + 71px) !important;}
}

/* Quiet crumble / REWORD: compact controls share the existing bottom line. */
html body #shiftButton,html body #rewordButton,html body #quoteStopButton{
 position:fixed!important;top:auto!important;right:auto!important;
 bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px))!important;
 width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;max-width:52px!important;max-height:52px!important;
 margin:0!important;padding:0!important;transform:none!important;box-sizing:border-box!important;
 display:flex!important;align-items:center;justify-content:center;border:1px solid #ffffff70;border-radius:50%;
 background:rgba(0,0,0,.24);backdrop-filter:blur(8px);color:white;
 font:500 9px/1 Arial,sans-serif!important;letter-spacing:.035em!important;z-index:150!important;
 visibility:visible!important;opacity:1!important;cursor:pointer;
}
html body #shiftButton{left:calc(50% - 86px)!important;}
html body #rewordButton{left:calc(50% - 26px)!important;}
html body #quoteStopButton{left:calc(50% + 34px)!important;}
html body #quoteStopButton span{font-size:9px!important;letter-spacing:.035em!important;text-indent:0!important;}
html body #shiftButton:disabled,html body #rewordButton:disabled{opacity:.42!important;cursor:default;}
html body #rewordButton:focus-visible{outline:2px solid white;outline-offset:4px;}
@media(max-width:767px){
 html body #shiftButton,html body #rewordButton,html body #quoteStopButton,html body #autoButton,html body #bgmButton{
  width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;max-width:48px!important;max-height:48px!important;
 }
 html body #shiftButton{left:calc(50% - 136px)!important;}
 html body #rewordButton{left:calc(50% - 80px)!important;}
 html body #quoteStopButton{left:calc(50% - 24px)!important;}
 html body #autoButton{left:calc(50% + 32px)!important;}
 html body #bgmButton{left:calc(50% + 88px)!important;}
}

/* Desktop keeps the controls in a compact right-hand column. */
@media(min-width:768px){
 html body #shiftButton,html body #rewordButton,html body #quoteStopButton,html body #autoButton,html body #bgmButton{
  position:fixed!important;left:auto!important;right:28px!important;top:auto!important;
  width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;max-width:52px!important;max-height:52px!important;
  margin:0!important;transform:none!important;
 }
 html body #shiftButton{bottom:280px!important;}
 html body #rewordButton{bottom:216px!important;}
 html body #quoteStopButton{bottom:152px!important;}
 html body #autoButton{bottom:88px!important;}
 html body #bgmButton{bottom:24px!important;}
}

#videoBoot{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;gap:18px;flex-direction:column;background:#050505;color:#aaa;font:12px/1.5 sans-serif;letter-spacing:.12em;}
#videoBoot button{background:transparent;color:#fff;border:1px solid #777;border-radius:20px;padding:10px 20px;cursor:pointer;}
html.video-booting body > :not(#videoBoot){visibility:hidden!important;}
@media(min-width:768px){
 html body #shiftButton{bottom:390px!important;}
 html body #rewordButton{bottom:326px!important;}
 html body #quoteStopButton{bottom:262px!important;}
 html body #autoButton{bottom:198px!important;}
 html body #bgmButton{bottom:134px!important;}
}

html body #rewordButton{flex-direction:column;gap:4px!important;}
#rewordCount{font:8px/1 Arial,sans-serif;letter-spacing:0;}
html body #rewordButton.is-ready{color:#ffdb9d;border-color:#e9b761;background:rgba(111,73,22,.32);box-shadow:0 0 12px #e9b76126;}

@media(max-width:767px){
  html body .so-museum-exit{display:flex!important;top:max(14px,env(safe-area-inset-top))!important;right:14px!important;width:48px!important;height:48px!important;font-size:8px!important;opacity:1!important;pointer-events:auto!important;z-index:10001!important;}
  html body #shiftButton,html body #rewordButton,html body #quoteStopButton,html body #autoButton,html body #bgmButton{bottom:max(32px,calc(env(safe-area-inset-bottom) + 24px))!important;}
  html body .hint{left:50%!important;right:auto!important;bottom:max(5px,calc(env(safe-area-inset-bottom) + 3px))!important;transform:translateX(-50%)!important;white-space:nowrap!important;font-size:6px!important;letter-spacing:.24em!important;z-index:160!important;}
}

#pillarControlHint{position:fixed;z-index:120;pointer-events:auto;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px;opacity:0;color:rgba(255,255,255,.84);text-align:center;white-space:nowrap;padding:16px 20px;cursor:pointer;transition:opacity .45s ease;}
#pillarControlHint.is-visible{opacity:1;animation:pillarControlPulse 2.8s ease-in-out infinite;}
#pillarControlHint span{font:400 9px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.20em;text-indent:.20em;}
#pillarControlHint small{font:400 10px/1 "Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;letter-spacing:.12em;opacity:.62;}
@keyframes pillarControlPulse{50%{opacity:.42;}}
@media(max-width:767px){#pillarControlHint{display:none!important;}}