/* =====================================================
   七夕短冊ビューアー スタイルシート（完全版）
   ===================================================== */

/* ----- リセット & ベース ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --sky-top:    #070d24;
  --sky-mid:    #0f2060;
  --sky-bot:    #1a4499;
  --gold:       #fde86b;
  --gold-dim:   rgba(253,232,107,0.35);
  --white:      #ffffff;
  --font-title: 'M PLUS Rounded 1c', sans-serif;
  --font-wish:  'Kiwi Maru', serif;
  --font-serif: 'Noto Serif JP', serif;

  /* 短冊パステルカラー（明度高め、和風） */
  --tz-green:  #d4f1df;
  --tz-pink:   #fcd8ea;
  --tz-yellow: #fdf3c8;
  --tz-blue:   #d4e9fa;
  --tz-purple: #ead4f5;

  --tz-green-b:  #7ecb9a;
  --tz-pink-b:   #f4a0c8;
  --tz-yellow-b: #e6cc6a;
  --tz-blue-b:   #7ab8e8;
  --tz-purple-b: #b880d8;

  --tz-green-t:  #1a4a2a;
  --tz-pink-t:   #6a1a40;
  --tz-yellow-t: #5a4800;
  --tz-blue-t:   #0e2e56;
  --tz-purple-t: #38145c;

  --col-w: 260px;   /* bamboo column width (desktop) */
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: var(--font-serif);
  background: var(--sky-top);
  color: var(--white);
  -webkit-tap-highlight-color: transparent;
  /* flex 列で ヘッダー + 笹エリア を縦に並べる */
  display: flex;
  flex-direction: column;
}

/* ----- 星空背景 ----- */
.sky {
  position: fixed;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--sky-top)  0%,
    var(--sky-mid) 50%,
    var(--sky-bot) 100%
  );
  z-index: 0;
  overflow: hidden;
}

.nebula {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 45% at 50% 25%,
    rgba(140, 200, 255, 0.3) 0%,
    rgba(200, 160, 255, 0.15) 50%,
    transparent 80%
  );
}

.stars {
  position: absolute;
  inset: 0;
  background: transparent;
}

.s1 {
  box-shadow:
    180px 70px 0 1px rgba(255,255,255,0.65),
    340px 170px 0 1px rgba(255,255,255,0.7),
    780px 90px 0 1px rgba(255,255,255,0.55),
    1150px 230px 0 1px rgba(255,255,255,0.65),
    90px 470px 0 1px rgba(255,255,255,0.55),
    580px 610px 0 1px rgba(255,255,255,0.65),
    880px 370px 0 1px rgba(255,255,255,0.55),
    1390px 710px 0 1px rgba(255,255,255,0.65),
    230px 290px 0 1px rgba(255,255,255,0.5),
    680px 460px 0 1px rgba(255,255,255,0.55),
    1050px 130px 0 1px rgba(255,255,255,0.7),
    1480px 380px 0 1px rgba(255,255,255,0.5);
  width: 2px; height: 2px;
  animation: blink 3s ease-in-out infinite alternate;
}

.s2 {
  box-shadow:
    270px 310px 0 2px rgba(253,232,107,0.7),
    640px 110px 0 2px rgba(253,232,107,0.75),
    910px 205px 0 2px rgba(253,232,107,0.65),
    1240px 145px 0 2px rgba(253,232,107,0.7),
    150px 745px 0 2px rgba(253,232,107,0.6),
    720px 572px 0 2px rgba(253,232,107,0.7),
    1080px 790px 0 2px rgba(253,232,107,0.65),
    420px 520px 0 2px rgba(253,232,107,0.6);
  width: 3px; height: 3px;
  animation: blink 5s ease-in-out infinite alternate-reverse;
}

@keyframes blink {
  0%   { opacity: 0.25; }
  100% { opacity: 1; }
}

/* 流れ星 */
.shooting-star-el {
  position: absolute;
  width: 180px; height: 2px;
  background: linear-gradient(-45deg, rgba(255,255,255,0.9), transparent);
  border-radius: 1px;
  filter: drop-shadow(0 0 5px var(--gold));
  animation: shoot 2s ease-in forwards;
  transform-origin: left center;
}

@keyframes shoot {
  0%   { opacity: 0; transform: rotate(-40deg) translateX(0); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(-40deg) translateX(-700px); }
}

/* ----- 折り紙チェーン飾り ----- */
.deco-chain {
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 5;
  pointer-events: none;
}

.deco-chain.left  { left: 2vw; }
.deco-chain.right { right: 2vw; }

.ring {
  width: 22px; height: 32px;
  border-radius: 11px;
  margin-top: -10px;
  opacity: 0.85;
  box-shadow: 1px 2px 5px rgba(0,0,0,0.4);
}
.ring:nth-child(even) { width: 26px; transform: rotate(-12deg); }
.ring:nth-child(odd)  { transform: rotate(8deg); }

.r1 { background: #ff6fa8; }
.r2 { background: #ffd020; }
.r3 { background: #3fc87a; }
.r4 { background: #3ea8f0; }
.r5 { background: #b572f0; }
.r6 { background: #ff9040; }

/* ----- ヘッダー ----- */
.site-header {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: clamp(0.6rem, 1.8vh, 1.4rem) 1rem 0.2rem;
  pointer-events: none;
  flex-shrink: 0;   /* flex 子要素: 縮まない */
}

.site-title {
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 8vw, 4.8rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #ffe770 0%, #ffadcf 50%, #c494ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  letter-spacing: 0.08em;
}

.title-star {
  font-size: 0.55em;
  vertical-align: middle;
  animation: sparkle 1.6s ease-in-out infinite alternate;
  display: inline-block;
}

@keyframes sparkle {
  0%   { transform: scale(0.85) rotate(0deg); filter: brightness(0.8); }
  100% { transform: scale(1.15) rotate(15deg); filter: brightness(1.4); }
}

.site-subtitle {
  font-family: var(--font-title);
  font-size: clamp(1rem, 4vw, 1.8rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.18em;
  margin-top: 0.1em;
}

.site-desc {
  font-size: clamp(0.65rem, 2vw, 0.82rem);
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.1em;
  margin-top: 0.3em;
}

/* ----- 笹グローブ（横スクロール） ----- */
.grove-viewport {
  position: relative;
  z-index: 10;
  width: 100%;
  flex: 1;           /* ヘッダーの残り高さをすべて使う */
  min-height: 0;     /* flex 子要素の overflow 制御に必要 */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.grove-viewport::-webkit-scrollbar { display: none; }
.grove-viewport.dragging { cursor: grabbing; }

.bamboo-grove {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  height: 100%;
  min-width: max-content;
  /* 左右の padding は JS で動的設定（センタリング用） */
  padding: 0;
  /* デフォルト: 中央揃え。コンテンツがはみ出す場合はスクロールで対応 */
  justify-content: center;
}

/* ----- bamboo-col: 各竹の柱ユニット ----- */
.bamboo-col {
  position: relative;
  width: var(--col-w);
  height: 100%;
  flex-shrink: 0;
}

.bamboo-col svg.bamboo-svg {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: visible;
}

/* ----- 短冊カード ----- */
.tanzaku-card {
  position: absolute;
  width: 56px;
  cursor: pointer;
  transform-origin: top center;
  /* sway は JS でランダムに設定 */
  /* top / left は JS で枝の先端に合わせて設定 */
}

.tanzaku-card .string {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: rgba(255,255,255,0.7);
  /* height は JS で設定 (枝先端からカードtopまでの距離) */
}

.tanzaku-body {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 3px;
  border: 1.5px solid rgba(255,255,255,0.5);
  box-shadow:
    2px 4px 10px rgba(0,0,0,0.35),
    inset 0 1px 2px rgba(255,255,255,0.6);
  padding: 10px 5px 8px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  backface-visibility: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tanzaku-body:hover {
  transform: scale(1.07);
  box-shadow: 3px 6px 16px rgba(0,0,0,0.5), 0 0 12px rgba(255,255,255,0.25);
  z-index: 50;
}

/* 表裏ラベルドット */
.tanzaku-body::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
}

.tanzaku-body .tz-text {
  font-family: var(--font-wish);
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1.3;
  letter-spacing: 0.04em;
  word-break: break-all;
  max-height: calc(100% - 20px);
  overflow: hidden;
}

/* ゆらゆらアニメーション */
@keyframes sway-a { 0%{transform:rotate(-4deg)} 100%{transform:rotate(4deg)} }
@keyframes sway-b { 0%{transform:rotate(-5deg)} 100%{transform:rotate(3deg)} }
@keyframes sway-c { 0%{transform:rotate(-3deg)} 100%{transform:rotate(5deg)} }
@keyframes sway-d { 0%{transform:rotate(-4.5deg)} 100%{transform:rotate(3.5deg)} }

.sway-a { animation: sway-a var(--sw-dur,4s) ease-in-out var(--sw-del,0s) infinite alternate; }
.sway-b { animation: sway-b var(--sw-dur,5s) ease-in-out var(--sw-del,0s) infinite alternate; }
.sway-c { animation: sway-c var(--sw-dur,4.5s) ease-in-out var(--sw-del,0s) infinite alternate; }
.sway-d { animation: sway-d var(--sw-dur,3.8s) ease-in-out var(--sw-del,0s) infinite alternate; }

/* カラーバリエーション */
.tz-green  { background: var(--tz-green);  border-color: var(--tz-green-b);  color: var(--tz-green-t); }
.tz-pink   { background: var(--tz-pink);   border-color: var(--tz-pink-b);   color: var(--tz-pink-t); }
.tz-yellow { background: var(--tz-yellow); border-color: var(--tz-yellow-b); color: var(--tz-yellow-t); }
.tz-blue   { background: var(--tz-blue);   border-color: var(--tz-blue-b);   color: var(--tz-blue-t); }
.tz-purple { background: var(--tz-purple); border-color: var(--tz-purple-b); color: var(--tz-purple-t); }

/* ----- 枚数バッジ ----- */
.count-badge {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 25, 70, 0.8);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  padding: 0.3em 1.2em;
  font-family: var(--font-title);
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  z-index: 20;
  pointer-events: none;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ----- 読み込みオーバーレイ ----- */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 13, 36, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  z-index: 200;
  font-family: var(--font-title);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
  transition: opacity 0.5s ease;
}

.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-spinner {
  width: 44px; height: 44px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ----- モーダル ----- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 35, 0.88);
  backdrop-filter: blur(10px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  padding: 1rem;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background: linear-gradient(160deg, #ffffff 0%, #eef4fc 100%);
  border: 2px solid rgba(42, 107, 204, 0.5);
  border-radius: 14px;
  padding: 2rem 1.4rem 1.4rem;
  position: relative;
  max-width: 520px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  transform: scale(0.94);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
  max-height: 90vh;
}

.modal-overlay.open .modal-box { transform: scale(1); }

.modal-close {
  position: absolute;
  top: 0.6rem; right: 0.8rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: #345;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: background 0.2s;
}

.modal-close:hover { background: rgba(0,0,0,0.08); }

.modal-cards {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  overflow: hidden;
}

.modal-tanzaku {
  flex: 0 0 120px;
  min-height: 340px;
  max-height: 50vh;
  border-radius: 4px;
  border: 1.5px solid rgba(0,0,0,0.15);
  box-shadow: 3px 6px 18px rgba(0,0,0,0.18);
  padding: 36px 10px 14px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

#modal-front { transform: rotate(-1.5deg); }
#modal-back  { transform: rotate(1.2deg); }

.modal-label {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-title);
  font-size: 0.58rem;
  font-weight: 900;
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 20px;
  color: #fff;
}

.coop-label     { background: #e83060; }
.personal-label { background: #2a6bcc; }

.tanzaku-inner-text {
  font-family: var(--font-wish);
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1.45;
  letter-spacing: 0.06em;
  word-break: break-all;
  font-size: 1.2rem;
  max-height: 100%;
  overflow: hidden;
}

.modal-timestamp {
  margin-top: 1rem;
  font-size: 0.72rem;
  color: #7890b0;
  font-family: var(--font-title);
  font-weight: 700;
}

/* ----- スクロールヒントの矢印 ----- */
.scroll-hint {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 1.6rem;
  width: 36px; height: 70px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 15;
  transition: all 0.25s;
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

.scroll-hint:hover { background: rgba(255,255,255,0.3); color: #fff; }
.scroll-hint.sh-left  { left: 0.4rem; }
.scroll-hint.sh-right { right: 0.4rem; }
.scroll-hint.hidden { opacity: 0; pointer-events: none; }

/* ----- モバイル調整 ----- */
@media (max-width: 600px) {
  :root {
    --col-w: 175px;
  }

  .deco-chain { display: none; }

  .site-header { padding: 0.5rem 1rem 0.1rem; }

  .tanzaku-card { width: 44px; }
  .tanzaku-body { padding: 8px 4px 6px; }
  .tanzaku-body .tz-text { font-size: 0.72rem; }

  .modal-tanzaku { flex: 0 0 100px; min-height: 280px; padding: 32px 8px 10px; }
  .tanzaku-inner-text { font-size: 1rem; }

  .scroll-hint { width: 30px; height: 56px; font-size: 1.2rem; }
}

@media (max-width: 390px) {
  :root { --col-w: 150px; }
  .tanzaku-card { width: 38px; }
  .modal-cards { gap: 10px; }
  .modal-tanzaku { flex: 0 0 88px; min-height: 250px; }
}