/* 作成：セレナ（ChatGPT）／2026-10-20 — トップだけの昼夜切り替え */
.day-picture,.day-world-name{display:none}
html[data-home-theme="day"] .day-picture{display:block}
html[data-home-theme="day"] .night-picture:not(.day-picture),
html[data-home-theme="day"] .night-fixed-face,
html[data-home-theme="day"] .fireflies{display:none}
html[data-home-theme="day"] .night-world{
  aspect-ratio:1.7;min-height:590px;max-height:1100px;height:auto;background:#caecf7;
}
html[data-home-theme="day"] .day-picture .night-image{
  inset:0;object-fit:cover;object-position:center 52%;width:100%;height:100%;
}
/* 昼のキャッチ文字：クリーム色の文字を濃い青の細いふちで囲む（箱は敷かない）。ふちは文字の形に沿う。
   ※ maskのかかった要素自身のfilterは切り抜かれるので、親の .night-copy にかける（2026-10-21 ひめ「囲まない方がいい。色自体を囲むならあり」） */
html[data-home-theme="day"] .night-copy{
  filter:drop-shadow(1px 0 0 #17394a) drop-shadow(-1px 0 0 #17394a) drop-shadow(0 1px 0 #17394a) drop-shadow(0 -1px 0 #17394a) drop-shadow(0 2px 4px #17394a88);
}
html[data-home-theme="day"] .night-copy-art{background:#fff6df;filter:none}
html[data-home-theme="day"] .night-spot{
  color:#fff6df;background:linear-gradient(175deg,#704b34,#513521);
  border:1px solid #b79264;border-radius:5px;text-shadow:none;
  font-weight:700;box-shadow:0 2px 4px #35251630;
}
html[data-home-theme="day"] .night-spot:focus-visible{
  outline:3px solid #174e50;outline-offset:4px;
}
html[data-home-theme="day"] .day-world-name{
  display:flex;position:absolute;left:28%;top:48%;transform:translate(-50%,-50%);
  flex-direction:column;align-items:center;z-index:2;pointer-events:none;
  color:#fff6df;text-shadow:0 1px 3px #513521;font-family:var(--hime-hand);
  font-size:clamp(15px,1.55vw,25px);font-weight:500;line-height:1.4;
}
.day-world-name small{font-family:var(--hime-round);font-size:.6em;letter-spacing:.04em}
@media(min-width:701px){
  html[data-home-theme="day"] .night-spot{transform:translate(-50%,-50%) rotate(var(--board-angle,0deg));font-size:clamp(15px,1.25vw,20px);padding:5px 9px}
  html[data-home-theme="day"] .video-spot{left:64.5%;right:auto;top:18.8%;--board-angle:-2deg}
  html[data-home-theme="day"] .gather-spot{left:64.8%;right:auto;top:49.5%;--board-angle:4deg}
  html[data-home-theme="day"] .question-spot{left:21.2%;right:auto;top:65%;--board-angle:-7deg}
  html[data-home-theme="day"] .talk-spot{left:89.4%;right:auto;top:62%;--board-angle:5deg}
}
@media(min-width:701px) and (max-width:900px){
  html[data-home-theme="day"] .night-world{aspect-ratio:1.45;min-height:570px}
  html[data-home-theme="day"] .talk-spot{left:84%;top:84%;--board-angle:0deg}
}
@media(max-width:700px){
  html[data-home-theme="day"] .night-world{aspect-ratio:2/3;min-height:0;max-height:none}
  html[data-home-theme="day"] .day-picture .night-image{object-fit:contain;object-position:center}
  html[data-home-theme="day"] .night-spot{
    background:linear-gradient(175deg,#fff7e7,#f5e7cd);color:#174e50;
    border:3px solid #65432e;border-radius:9px;box-shadow:0 2px 0 #432c22;
    font-size:clamp(17px,4.6vw,20px);font-weight:700;padding:9px 10px;min-height:48px;
  }
  html[data-home-theme="day"] .night-copy{top:10%;left:6%}
  html[data-home-theme="day"] .video-spot{left:25%;right:auto;top:44.8%}
  html[data-home-theme="day"] .gather-spot{left:67%;right:auto;top:55%}
  html[data-home-theme="day"] .question-spot{left:26%;right:auto;top:78.5%}
  html[data-home-theme="day"] .talk-spot{left:71%;right:auto;top:85%}
  html[data-home-theme="day"] .day-world-name{display:none}
}
/* 追記：レイ／2026-10-21 — スマホでも寄り道の矢印をピコピコさせる（動きを減らす設定の人は止まる） */
@media(max-width:700px){
  .home .night-spot>span.pixel-arrow[aria-hidden="true"]{display:block;left:-22px;top:50%;margin-top:-12px;font-size:18px}
}
/* 昼夜の切り替えボタン（レイ／2026-10-21）。大きさは昼夜で同じ。色は夜＝濃い青緑、昼＝キャッチ文字と同じ半透明の青緑 */
.home-time-toggle{
  position:absolute;right:20px;top:18px;z-index:4;min-height:30px;padding:3px 11px;
  font:700 13px/1.2 var(--hime-round,sans-serif);color:#fff6df;background:#174e50;
  border:1px solid #fff6dfcc;border-radius:999px;box-shadow:0 2px 6px #0004;cursor:pointer;
}
html[data-home-theme="day"] .home-time-toggle{background:rgba(20,48,52,.68);border-color:#fff6df99;box-shadow:0 2px 6px #0003}
.home-time-toggle:hover{filter:brightness(1.08)}
.home-time-toggle:focus-visible{outline:3px solid #ff95c6;outline-offset:3px}
@media(max-width:700px){.home-time-toggle{right:10px;top:10px;font-size:12px;padding:3px 10px}}
/* 昼夜の切り替えは、ふわっと重ねて変える（対応ブラウザのみ。動きを減らす設定の人は、JS側で即切り替え） */
::view-transition-old(root),::view-transition-new(root){animation-duration:.7s}
/* ヒーローを絵と同じ縦横比に固定して切り取らない。これで看板の文字が、どの画面幅でも絵の木札からずれない（2026-10-21 ひめ「開き方によって看板の文字がずれる」）。
   看板の位置は、元の「縦横比1.7で上下を切り取った状態」から、絵そのものの座標に換算し直した値 */
@media(min-width:901px){
  html .home .night-world{aspect-ratio:1586/992;height:auto;min-height:0;max-height:none}
  html[data-home-theme] .night-picture .night-image{inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
  html .home .video-spot{left:64.5%;right:auto;top:20.75%}
  html .home .gather-spot{left:64.8%;right:auto;top:49.65%}
  html .home .question-spot{left:21.2%;right:auto;top:64.2%}
  html .home .talk-spot{left:89.4%;right:auto;top:61.4%}
}
/* キャッチ文字は一回り大きく（サブの行も読みやすく） */
.home .night-copy-art{width:min(30vw,500px)}
@media(min-width:701px) and (max-width:900px){.home .night-copy-art{width:34vw}}
@media(max-width:700px){.home .night-copy-art{width:min(58vw,290px)}}
@media(prefers-reduced-motion:reduce){
  .home .pixel-arrow,.home .fireflies i{animation:none}
  .home .night-spot{transition:none}
}