/* ===== 全体（スクロールなし・100dvh） ===== */
/* テーマ干渉よけ: すべて .tsuki-root の中だけに閉じる */
.tsuki-root,.tsuki-root *{box-sizing:border-box !important;-webkit-tap-highlight-color:transparent}
.tsuki-root{
  height:100dvh !important;display:flex !important;flex-direction:column !important;
  overflow:hidden !important;position:relative !important;
  margin:0 !important;padding:0 !important;max-width:none !important;width:100% !important;
  font-family:"M PLUS Rounded 1c","BIZ UDPGothic","Hiragino Maru Gothic ProN",sans-serif !important;
  background:#eef2f7;color:#1e3a5f;font-size:16px;line-height:1.5;
}
/* Cocoon などが付ける余白・装飾を打ち消す
   ※ div / span は対象にしない。詳細度がクラス指定より高くなり、
     モーダルの背景やパネルの余白まで消してしまうため */
.tsuki-root h1,.tsuki-root h2,.tsuki-root h3,
.tsuki-root p,.tsuki-root ul,.tsuki-root li{
  margin:0;padding:0;border:none;background:none;box-shadow:none;
  font-family:inherit;color:inherit;text-align:inherit;
}
.tsuki-root h1,.tsuki-root h2,.tsuki-root h3{
  border:none !important;background:none !important;padding:0 !important;
}
.tsuki-root h1::before,.tsuki-root h2::before,.tsuki-root h3::before,
.tsuki-root h1::after,.tsuki-root h2::after,.tsuki-root h3::after{
  content:none !important;display:none !important;
}
.tsuki-root ul,.tsuki-root li{list-style:disc}
.tsuki-root button{font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.tsuki-root input{font-family:inherit}
.tsuki-root canvas{max-width:none !important}

/* 管理バーが出ているときは、その分だけ高さを引く */
.admin-bar .tsuki-root{height:calc(100dvh - 32px) !important}
@media screen and (max-width:782px){
  .admin-bar .tsuki-root{height:calc(100dvh - 46px) !important}
}
.tsuki-root .hidden{display:none !important}

/* ===== ヘッダー ===== */
.tsuki-header{
  flex:0 0 auto !important;background:#1e3a5f !important;color:#fff !important;
  display:flex;align-items:center;gap:12px;padding:8px 14px;
}
.tsuki-header h1{font-size:17px;margin:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsuki-status{
  margin-left:auto;background:#d4af37 !important;color:#1e3a5f !important;font-weight:700;
  padding:5px 12px;border-radius:999px;font-size:14px;white-space:nowrap;
  width:330px;max-width:100%;text-align:center;overflow:hidden;flex:0 0 auto;  /* 修正: 幅を固定 */
}
.tsuki-yobina{
  background:#fff !important;border:2px solid #d4af37 !important;border-radius:14px;
  padding:3px 8px;white-space:nowrap;
  width:178px;text-align:center;overflow:hidden;flex:0 0 auto;   /* 修正: 呼び名も幅固定 */
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;
}
.tsuki-yb-name{color:#1e3a5f;font-weight:700;font-size:14px}
.tsuki-yb-kana{color:#7a8ba0;font-weight:700;font-size:10px;letter-spacing:.02em}

/* ===== 本体3分割 ===== */
.tsuki-main{
  flex:1 1 auto !important;min-height:0 !important;display:flex !important;gap:8px;
  padding:8px 66px 8px 8px;
}
.tsuki-col{flex:1 1 46%;min-width:0;display:flex;flex-direction:column;gap:8px}
.tsuki-pane{
  background:#fff !important;border:1px solid #dbe3ec !important;border-radius:12px;
  display:flex !important;flex-direction:column !important;min-height:0 !important;min-width:0;overflow:hidden !important;
}
.tsuki-pane-orbit{flex:1 1 54%}
.tsuki-pane-moon{flex:1 1 46%}
.tsuki-pane-sky{flex:1 1 54%}
.tsuki-pane-title{
  flex:0 0 auto;font-size:12px;font-weight:700;
  color:#54718f;padding:6px 10px 2px;
}
.tsuki-cv-wrap{flex:1 1 auto !important;position:relative !important;min-height:0 !important}
.tsuki-cv-wrap canvas{position:absolute !important;inset:0;width:100% !important;height:100% !important;display:block;touch-action:none}

/* ②のレイアウト */
.tsuki-moon-body{flex:1 1 auto;display:flex;min-height:0}
.tsuki-moon-cv{flex:0 0 42%;position:relative;min-width:0}
.tsuki-moon-cv canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tsuki-moon-info{flex:1 1 auto;min-width:0;padding:4px 10px 8px 0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.tsuki-name{font-size:19px;font-weight:700;color:#1e3a5f;line-height:1.2}
.tsuki-sub{font-size:12.5px;color:#54718f;line-height:1.45}

/* クイズの4択 */
.tsuki-choices{flex:1 1 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:4px 8px 8px;min-height:0}
.tsuki-choice{
  border:2px solid #dbe3ec !important;border-radius:10px;background:#fff !important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;padding:2px;min-height:0;
}
.tsuki-choice canvas{width:100%;height:auto;max-height:100%;display:block}
.tsuki-choice.picked{border-color:#d4af37;background:#fdf7e6}
.tsuki-choice.right{border-color:#2e9e6b;background:#eaf7f0}
.tsuki-choice.wrong{border-color:#ef4444;background:#fdeceb}

/* クイズパネル（③にかぶせる） */
.tsuki-quiz-panel{
  position:absolute !important;inset:0;background:#fff !important;
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:12px 16px;
}
.tsuki-q-meta{font-size:12.5px;color:#54718f;font-weight:700}
.tsuki-q-text{font-size:17px;font-weight:700;line-height:1.4}
.tsuki-q-judge{font-size:15px;font-weight:700;min-height:22px}
.tsuki-q-judge.ok{color:#2e9e6b}
.tsuki-q-judge.ng{color:#ef4444}
.tsuki-btn{
  align-self:flex-start;background:#1e3a5f !important;color:#fff !important;border:none;border-radius:999px;
  padding:9px 24px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;
}
.tsuki-btn.gold{background:#d4af37 !important;color:#1e3a5f !important}

/* ===== フッター（時こくスライダー） ===== */
.tsuki-footer{
  flex:0 0 auto !important;display:flex !important;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding:8px 66px 10px 16px;background:#fff;border-top:1px solid #dbe3ec;
}
.tsuki-flabel{font-size:13px;font-weight:700;color:#54718f;white-space:nowrap}
.tsuki-footer input[type=range]{flex:1 1 auto !important;min-width:0;height:28px;accent-color:#1e3a5f;-webkit-appearance:auto;appearance:auto}
.tsuki-ftime{font-size:15px;font-weight:700;min-width:66px;text-align:right}

/* ===== ツールバー（右下・縦） ===== */
.tsuki-toolbar{
  position:absolute !important;right:10px;top:56px;display:flex;flex-direction:column;gap:7px;z-index:20;
}
.tsuki-tbtn{
  width:44px;height:44px;border-radius:50%;border:2px solid #1e3a5f !important;background:#fff !important;
  color:#1e3a5f;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;line-height:1;padding:0;
}
.tsuki-tbtn.on{background:#d4af37 !important;border-color:#b8941f !important;color:#1e3a5f !important}
.tsuki-tbtn span{font-size:10px;display:block}

/* ===== スタート画面 ===== */
.tsuki-modal{
  position:absolute !important;inset:0;background:rgba(30,58,95,.92) !important;z-index:40;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.tsuki-modal-box{
  background:#fff !important;border-radius:18px;padding:26px 30px !important;text-align:center;max-width:440px;width:100%;
  max-height:92dvh;overflow:auto;
}
.tsuki-modal-box h2{margin:0 0 6px;font-size:21px}
.tsuki-modal-box p{margin:0 0 18px;font-size:13.5px;color:#54718f;line-height:1.6}
.tsuki-modal-box .tsuki-btn{align-self:auto;width:100%;margin-top:10px;padding:14px;font-size:17px}
.tsuki-btn.ghost{background:#eef2f7 !important;color:#1e3a5f !important}
.tsuki-note{text-align:left;background:#f7f9fc !important;border:1px solid #dbe3ec !important;border-radius:10px;padding:12px 14px !important}
.tsuki-note p{margin:0 0 10px;font-size:13.5px;color:#3d5872;line-height:1.7}
.tsuki-note p:last-child{margin-bottom:0}
.tsuki-note strong{color:#1e3a5f}
.tsuki-note ul{margin:0 0 10px;padding-left:20px}
.tsuki-note li{font-size:13px;color:#3d5872;line-height:1.65;margin-bottom:5px}

/* カレンダー */
.tsuki-cal-box{max-width:540px;text-align:left;padding:18px 18px 16px}
.tsuki-cal-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tsuki-cal-title{flex:1;text-align:center;font-size:19px;font-weight:700}
.tsuki-cal-nav{
  width:42px;height:42px;border-radius:50%;border:2px solid #1e3a5f !important;background:#fff !important;
  color:#1e3a5f;font-size:14px;cursor:pointer;font-family:inherit;flex:0 0 auto;
}
.tsuki-cal-wd,.tsuki-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.tsuki-cal-wd span{text-align:center;font-size:12px;font-weight:700;color:#54718f;padding:2px 0}
.tsuki-cal-wd span.sun{color:#ef4444}
.tsuki-cal-wd span.sat{color:#2f6bbf}
.tsuki-cal-day{
  border:2px solid #e6ebf2 !important;border-radius:8px;background:#fff !important;padding:3px 0 4px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:1px;font-family:inherit;
}
.tsuki-cal-day.empty{border:none;background:transparent;cursor:default}
.tsuki-cal-day .d{font-size:11px;font-weight:700;color:#1e3a5f}
.tsuki-cal-day canvas{width:30px;height:30px;display:block}
.tsuki-cal-day.today{border-color:#d4af37;background:#fdf7e6}
.tsuki-cal-day.sel{border-color:#1e3a5f;background:#e8eef6}
.tsuki-cal-foot{display:flex;gap:10px;margin-top:14px;justify-content:center}
.tsuki-cal-foot .tsuki-btn{width:auto;margin-top:0;padding:10px 26px;font-size:15px}

/* ===== タブレット縦・スマホ ===== */
@media (max-width:700px){
  .tsuki-header h1{display:none}
  .tsuki-status{width:auto}
  .tsuki-yobina{width:auto;min-width:120px}
}
@media (max-width:820px), (orientation:portrait){
  .tsuki-main{flex-direction:column;padding-right:66px}
  .tsuki-pane-orbit{flex:1 1 46%}
  .tsuki-col{flex:1 1 54%}
}