/* =========================
   ■ Diary Room
   ========================= */

/* 全体 */
#diary_room .panel{
  position:relative;
  z-index:20;
}

/* Today's Orb */
.today-orb-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:10px 0 26px;
}

/* ガラス玉 */
.today-orb{

  --orb-r: 0;
  --orb-g: 180;
  --orb-b: 255;

  width:120px;
  height:120px;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 30% 30%,

      rgba(255,255,255,0.95),

      rgba(var(--orb-r),
             var(--orb-g),
             var(--orb-b),0.92),

      rgba(0,0,0,0.20)
    );

  box-shadow:

    0 0 40px
    rgba(var(--orb-r),
           var(--orb-g),
           var(--orb-b),0.35),

    inset 0 0 18px
    rgba(255,255,255,0.35);

  backdrop-filter:blur(12px);

  animation:
    orbFloat 5s ease-in-out infinite;
}

/* ラベル */
.orb-label{
  margin-top:14px;
  font-size:14px;
  color:
    rgba(255,255,255,0.78);
  letter-spacing:1px;
}

/* Shelf */
.aura-shelf{
  display:flex;
  gap:16px;
  overflow-x:auto;
  overflow-y:visible;
  padding:40px 4px 24px;
  margin-bottom:26px;
}

.aura-shelf::-webkit-scrollbar{
  height:6px;
}

.aura-shelf::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.15);
  border-radius:999px;
}

/* =========================
   Shelf
   ========================= */
.shelf-base{
  width:100%;
  height:12px;
  margin-top:-6px;
  border-radius:999px;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.25),
      rgba(255,255,255,0.04)
    );
  box-shadow:
    0 0 18px rgba(255,255,255,0.08),
    inset 0 2px 6px rgba(255,255,255,0.18);
  backdrop-filter:blur(10px);
}

/* -------------------------
   Shelf Layout
   ------------------------- */

.shelf-layout{

  display:flex;

  flex-direction:column;

  gap:24px;

  margin-top:20px;
}

/* 左 */
.shelf-left{
  width:100%;
}

/* =========================
   Calendar Month Bar
========================= */

.calendar-month-bar{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:18px;

  margin:
    18px 0 24px;

}

.calendar-month-bar button{

  width:40px;

  height:40px;

  border-radius:999px;

  border:none;

  background:
    rgba(255,255,255,0.08);

  color:white;

  cursor:pointer;

  font-size:18px;

  transition:0.2s;
}

.calendar-month-bar button:hover{

  background:
    rgba(120,220,255,0.18);
}

#calendarMonthLabel{

  font-size:20px;

  font-weight:700;

  letter-spacing:1px;

  min-width:140px;

  text-align:center;
}

/* 曜日 */

.day-week{

  text-align:center;

  font-size:11px;

  opacity:0.48;

  margin-bottom:8px;

  letter-spacing:1px;

  font-weight:700;
}

/* =========================
   Today Button
========================= */

.calendar-today-wrap{

  display:flex;

  justify-content:center;

  margin-bottom:28px;
}

#todayBtn{

  padding:
    10px 22px;

  border:none;

  border-radius:999px;

  background:
    rgba(120,220,255,0.12);

  color:white;

  font-weight:700;

  letter-spacing:1px;

  cursor:pointer;

  transition:0.2s;
}

#todayBtn:hover{

  background:
    rgba(120,220,255,0.24);

  transform:
    translateY(-2px);
}

/* =========================
   Calendar Fade
========================= */

.day-shelf{

  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.day-shelf.fade-out{

  opacity:0;

  transform:
    translateY(10px);
}

/* 右パネル */
.orb-detail-panel{

  width:min(240px, 100%);

  flex-shrink:0;

  padding:18px;

  border-radius:20px;

  background:
    rgba(255,255,255,0.06);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(14px);

  box-shadow:
    0 0 24px rgba(0,0,0,0.15);
}

/* タイトル */
.orb-detail-panel h3{

  margin-bottom:14px;

  font-size:18px;

  color:white;
}

.orb-date{
  margin-top:8px;
  font-size:11px;
  opacity:0.65;
  text-align:center;
}

/* 小Orb 時間 */
.orb-time{

  margin-top:2px;

  font-size:10px;

  opacity:0.55;

  text-align:center;

  letter-spacing:0.5px;
}

/* 小Orb metrics */
.orb-metrics{

  margin-top:4px;

  display:flex;

  gap:4px;

  justify-content:center;

  flex-wrap:wrap;

  font-size:9px;

  line-height:1.2;
}

/* 共通 */
.metric-chip{

  padding:2px 5px;

  border-radius:999px;

  background:
    rgba(255,255,255,0.08);

  border:
    1px solid rgba(255,255,255,0.06);

  backdrop-filter:blur(6px);

  font-weight:600;
}

/* Stress */
.metric-stress{

  color:#ff9090;
}

/* Energy */
.metric-energy{

  color:#7dffb3;
}

/* Emotion */
.metric-emotion{

  color:#8fd3ff;
}

.shelf-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
	position:relative;
}

/* 小Orb */
.shelf-orb{
  width:58px;
  height:58px;
  flex-shrink:0;
  border-radius:50%;
  cursor:pointer;

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(255,255,255,0.9),
      rgba(var(--orb-r), var(--orb-g), var(--orb-b),0.85),
      rgba(0,50,120,0.9)
    );

  box-shadow:
    0 0 18px rgba(var(--orb-r), var(--orb-g), var(--orb-b),0.30);

  transition:0.25s;
}

.shelf-item.active .shelf-orb{
  transform:scale(1.15);
  box-shadow:
    0 0 40px rgba(
      var(--orb-r),
      var(--orb-g),
      var(--orb-b),
      0.95
    );
}

.no-data{
  opacity:0.55;
  text-align:center;
  padding:20px 0;
}

/* 測定回数 */

.day-count{

  margin-top:6px;

  text-align:center;

  font-size:12px;

  opacity:0.55;

  font-weight:600;
}

/* =========================
   Day Tooltip
========================= */

.day-tooltip{

  position:absolute;

  bottom:110%;

  left:50%;

  transform:
    translateX(-50%);

  min-width:120px;

  padding:
    10px 12px;

  border-radius:14px;

  background:
    rgba(20,20,30,0.92);

  backdrop-filter:
    blur(14px);

  border:
    1px solid rgba(255,255,255,0.08);

  font-size:12px;

  line-height:1.6;

  opacity:0;

  pointer-events:none;

  transition:0.18s;

  z-index:20;
}

.info-day-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:14px;
  color:white;
}

.info-state-title{

  text-align:center;

  font-size:14px;

  opacity:0.72;

  margin-top:-6px;

  margin-bottom:10px;

  letter-spacing:1px;
}

/* =========================
   Aura Info Bar
========================= */

.info-bar-wrap{

  margin-bottom:14px;
}

.info-bar-top{

  display:flex;

  justify-content:
    space-between;

  margin-bottom:6px;

  font-size:13px;

  opacity:0.88;
}

.info-bar-bg{

  width:100%;

  height:10px;

  border-radius:999px;

  background:
    rgba(255,255,255,0.08);

  overflow:hidden;
}

.info-bar-fill{

  height:100%;

  border-radius:999px;

  transition:0.35s;
}

.mini-orb-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.mini-orb-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
  opacity:0.8;
  transition:0.2s;
}

.mini-orb-item:hover{
  opacity:1;
  transform:translateY(-3px);
}

.mini-orb-item.active{

  transform:translateY(-4px);

  opacity:1;
}

.mini-orb{
  width:36px;
  height:36px;
  border-radius:50%;

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(255,255,255,0.9),
      rgba(var(--orb-r), var(--orb-g), var(--orb-b),0.9),
      rgba(0,30,80,0.9)
    );

  box-shadow:
    0 0 18px rgba(var(--orb-r), var(--orb-g), var(--orb-b),0.45);
}

.mini-orb-item.active .mini-orb{
  transform:scale(1.15);
  box-shadow:
    0 0 26px rgba(var(--orb-r), var(--orb-g), var(--orb-b),0.8);
}

.mini-label{
  font-size:11px;
  opacity:0.75;
}

.mini-orb-detail{
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  line-height:1.8;
  color:rgba(255,255,255,0.88);
}

.mini-orb-detail hr{
  border:none;
  border-top:1px solid rgba(255,255,255,0.08);
  margin:12px 0;
}

/* =========================
   Day Shelf
========================= */

.day-shelf{

  display:grid;

  grid-template-columns:
    repeat(7, 1fr);

  gap:14px;

	row-gap:20px;

  overflow-x:auto;

  padding:
    10px 4px 18px;

  margin-bottom:28px;

	padding-bottom:20px;
	border-bottom:
		1px solid rgba(255,255,255,0.08);

	overflow:visible;

}

/* =========================
   Calendar Header
========================= */

.calendar-week-header{

  display:grid !important;

  grid-template-columns:
    repeat(7, 1fr);

  gap:14px;

  width:100%;

  margin-bottom:18px;

  text-align:center;

  font-size:12px;

  opacity:0.45;

  font-weight:700;

  letter-spacing:1px;

}

.calendar-empty{

  min-height:90px;

  opacity:0;
}

/* =========================
   Today Cell
========================= */

.day-orb-item.today-cell{

  border:
    1px solid
    rgba(120,220,255,0.85);

  background:
    rgba(120,220,255,0.06);

	box-shadow:

		0 0 40px
		rgba(var(--orb-r),
					 var(--orb-g),
					 var(--orb-b),0.35),

		inset 0 0 18px
		rgba(255,255,255,0.35),

		0 0 18px
		rgba(120,220,255,0.22);
		
	animation:
		todayPulse 3.2s ease-in-out infinite;
}

/* Day Orb */

.day-orb-item{
	position:relative;

	overflow:visible;
	
  min-width:72px;

  padding:12px;

  border-radius:18px;

  background:
    rgba(255,255,255,0.06);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(12px);

  cursor:pointer;

  transition:0.2s;
	
}


.day-orb-item:hover{

  background:
    rgba(255,255,255,0.10);

  box-shadow:

    0 0 18px
    rgba(255,255,255,0.06);
}


/* active */

.day-orb-item.active{

  border:
    1px solid rgba(120,220,255,0.55);

  box-shadow:
    0 0 18px rgba(120,220,255,0.25);
}


/* day orb */

.day-orb{

  width:36px;
  height:36px;

  margin:auto;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255,255,255,0.95),
      rgba(255,255,255,0.18) 28%,
      rgba(var(--orb-rgb),1) 70%
    );

  box-shadow:
    0 0 20px rgba(var(--orb-rgb),0.35);
}

.day-orb-item:hover .day-tooltip{

  opacity:1;

  transform:
    translateX(calc(-50% - 2px))
    translateY(-2px);
}

/* date */

.day-date{

  margin-top:10px;

  text-align:center;

  font-size:12px;

  opacity:0.82;
}

/* Hover */
.shelf-orb:hover{
  transform:
    translateY(-6px)
    scale(1.08);
  box-shadow:
    0 0 24px rgba(0,198,255,0.45);
}

/* 浮遊 */
@keyframes orbFloat{
  0%{
    transform:
      translateY(0px);
  }
  50%{
    transform:
      translateY(-8px);
  }
  100%{
    transform:
      translateY(0px);
  }
}

.orb-info{

  margin-top:16px;

  padding:14px 18px;

  border-radius:16px;

  background:
    rgba(255,255,255,0.06);

  color:
    rgba(255,255,255,0.88);

  line-height:1.8;

  font-size:14px;

  backdrop-filter:blur(10px);

  border:
    1px solid rgba(255,255,255,0.08);
}

.orb-mode-select{

  display:flex;

  gap:14px;

  flex-wrap:wrap;

  margin:
    10px 0 18px;

  font-size:13px;

  opacity:0.82;
}

.orb-mode-select label{

  display:flex;

  align-items:center;

  gap:4px;

  cursor:pointer;
}

.week-label.sun{

  color:
    rgba(255,120,120,0.9);
}

.week-label.sat{

  color:
    rgba(120,180,255,0.95);
}

/* =========================
   Future Day
========================= */

.future-day{

  opacity:0.35;

  filter:
    grayscale(0.45);

  background:
    rgba(255,255,255,0.02);

  border:
    1px solid
    rgba(255,255,255,0.04);
}

/* =========================
   Today Pulse
========================= */

@keyframes todayPulse{

  0%{

    box-shadow:

      0 0 18px
      rgba(120,220,255,0.18),

      inset 0 0 10px
      rgba(120,220,255,0.04);
  }

  50%{

    box-shadow:

      0 0 34px
      rgba(120,220,255,0.34),

      inset 0 0 22px
      rgba(120,220,255,0.10);
  }

  100%{

    box-shadow:

      0 0 18px
      rgba(120,220,255,0.18),

      inset 0 0 10px
      rgba(120,220,255,0.04);
  }
}

/* My Aura's Orb */
.my-aura-caption-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.my-aura-note{
  font-size:12px;
  line-height:1.6;
  opacity:0.78;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.10);
}

.day-orb-item.has-session .day-orb{
  opacity:1;
  filter:brightness(1.08);
}

.day-orb-item.no-session .day-orb{
  opacity:0.38;
  filter:brightness(0.65);
}

.day-orb-item.future-day .day-orb{
  opacity:0.22;
  filter:brightness(0.5);
}

.day-orb-item.active .day-orb,
.day-orb-item:hover .day-orb{
  opacity:1;
  filter:brightness(1.15);
}


/* =========================
   Day Shelf Cell Center Fix
========================= */

/* 7列グリッドの各セルを中央に置く */
.day-shelf{
  justify-items: center;
}

/* セル自体を列幅いっぱいにして、中身を完全中央 */
.day-orb-item{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;

  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-items: center;
  text-align: center;

  padding: 12px 0;
}

/* 日付・オーブ・回数を同じ中心線に乗せる */
.day-orb-item .day-date,
.day-orb-item .day-count{
  width: 100%;
  text-align: center;
  margin-left: 0;
  margin-right: 0;
}

/* オーブ本体 */
.day-orb-item .day-orb{
  display: block;
  justify-self: center;
  align-self: center;

  margin: 8px 0 4px 0;

  position: relative;
  left: 0;
  right: auto;
  transform: none;
}