/* 追加機能のスタイル：グリッド配置・ストップウォッチ・背景シーン・置き時計向けの調整 */

/* ---------- 焼き付き防止のわずかな移動 ----------
   数分に一度だけ、気づかない速さで位置をずらす。長い時間をかけて動かすと
   画面全体の再合成が続き、置き時計にしている端末の電池を余計に使ってしまう。 */
.clock {
  transform: translate(var(--drift-x, 0px), var(--drift-y, 0px));
  transition: transform 2.5s ease-in-out;
}
/* 背景を少し大きめに描いておき、ずらしても端が出ないようにする。
   写真切り替えの演出も同じ倍率で終わらせないと、演出の最後に背景が跳ねる。 */
.clock:before { transform: scale(1.05); }
@keyframes photoZoom { 0% { opacity: .4; transform: scale(1.13); } 100% { opacity: 1; transform: scale(1.05); } }
@keyframes photoSlide { 0% { opacity: .45; transform: translateX(4%) scale(1.05); } 100% { opacity: 1; transform: translateX(0) scale(1.05); } }

/* 設定画面のサムネイル。小さい画像があればそれを、無ければ元の写真を表示する。 */
.thumb-grid button { padding: 0; overflow: hidden; background: #241914; }
.thumb-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 時刻表示は画面全体を覆っているが、押すものは何もない。
   前面に居座ってねこや操作ボタンのタップを奪わないようにする。 */
.readout { pointer-events: none; }

/* ---------- ウィジェットのグリッド配置 ---------- */
/* 上端の切り替えボタン列と、下端の「設定 / 写真送り / お気に入り」を避けて内側に敷く。
   ここを詰めると、狭い画面でウィジェットが操作ボタンに重なって押せなくなる。 */
.anchor-grid {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  padding: calc(var(--widget-margin, 3vmin) + clamp(48px, 8vh, 64px))
           var(--widget-margin, 3vmin)
           calc(var(--widget-margin, 3vmin) + clamp(72px, 11vh, 88px));
  gap: var(--widget-margin, 3vmin);
  pointer-events: none;
}
.anchor-cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.anchor-cell > * { pointer-events: auto; }
.anchor-cell[data-anchor^="top"] { justify-content: flex-start; }
.anchor-cell[data-anchor="left"],
.anchor-cell[data-anchor="center"],
.anchor-cell[data-anchor="right"] { justify-content: center; }
.anchor-cell[data-anchor^="bottom"] { justify-content: flex-end; }
.anchor-cell[data-anchor$="left"] { align-items: flex-start; }
.anchor-cell[data-anchor="top"],
.anchor-cell[data-anchor="center"],
.anchor-cell[data-anchor="bottom"] { align-items: center; }
.anchor-cell[data-anchor$="right"] { align-items: flex-end; }

/* グリッドに載ったタイマーは、画面下中央への固定配置を解除する。 */
.anchor-cell .timer-readout {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
}
.widget-slot { display: flex; flex-direction: column; gap: 8px; }
.widget-slot:empty { display: none; }

/* ---------- 時計を四隅にも置けるようにする ---------- */
.clock.digital-pos-top-left .readout { place-content: start start; padding: 10vh 3vw 0 6vw; text-align: left; }
.clock.digital-pos-top-right .readout { place-content: start end; padding: 10vh 6vw 0 3vw; text-align: right; }
.clock.digital-pos-bottom-left .readout { place-content: end start; padding: 0 3vw 10vh 6vw; text-align: left; }
.clock.digital-pos-bottom-right .readout { place-content: end end; padding: 0 6vw 10vh 3vw; text-align: right; }
.clock.digital-pos-left .readout { text-align: left; }
.clock.digital-pos-right .readout { text-align: right; }
.clock.analog-pos-top-left .analog { place-content: start start; padding: 10vh 3vw 0 6vw; }
.clock.analog-pos-top-right .analog { place-content: start end; padding: 10vh 6vw 0 3vw; }
.clock.analog-pos-bottom-left .analog { place-content: end start; padding: 0 3vw 8vh 6vw; }
.clock.analog-pos-bottom-right .analog { place-content: end end; padding: 0 6vw 8vh 3vw; }

/* ---------- ストップウォッチ ---------- */
.stopwatch-readout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(20, 14, 12, .66);
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .85);
}
.stopwatch-readout[hidden] { display: none; }
.stopwatch-line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: clamp(13px, 1.5vw, 19px); opacity: .72; }
.stopwatch-line.running { opacity: 1; }
.stopwatch-name { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stopwatch-value { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.stopwatch-line.running .stopwatch-value { color: #ffd35a; }

.stopwatch-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; max-height: 190px; overflow: auto; }
.stopwatch-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 9px; border: 1px solid #5f4b40; border-radius: 8px; background: #241914; font-size: 12px;
}
.stopwatch-item.running { border-color: #d7834e; }
.stopwatch-item-name { flex: 1 1 90px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stopwatch-item-value { font-variant-numeric: tabular-nums; font-size: 14px; }
.stopwatch-actions { display: flex; gap: 5px; }
.stopwatch-actions .action { padding: 4px 8px; font-size: 11px; }

/* ---------- 背景シーン ---------- */
.scene-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; filter: brightness(var(--brightness, 1)); }
.scene-art:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(12, 16, 44, calc(var(--scene-night, 0) * .5));
  transition: background 4s linear;
}
.scene-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scene-overlay > * { pointer-events: auto; }
.clock.scene-on:before { display: none; }
.clock:not(.scene-on) .scene-art,
.clock:not(.scene-on) .scene-overlay { display: none; }
.box-scene { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 段ボール。箱の内側は影になるため、外のフラップより暗くする。 */
.box-floor { fill: #8e6a41; }
.box-wall { fill: #ac8055; }
.box-wall-top { fill: #c9a075; }
.box-wall-bottom { fill: #7d5c38; }
.box-wall-left { fill: #b1875b; }
.box-wall-right { fill: #9b744b; }
.box-creases line { stroke: rgba(58, 36, 12, .4); stroke-width: 2; }

/* ねこ。段ボールと同系色でも沈まないよう、輪郭と落ち影で分離する。 */
.box-cat { filter: drop-shadow(0 5px 9px rgba(38, 20, 4, .45)); }
.cat-fur { fill: var(--coat, #8f6b45); }
.box-cat .cat-fur, .roam-cat-svg .cat-fur, .cat-fur-shade {
  stroke: var(--coat-outline, #3f2d1a);
  stroke-width: 2.4;
  stroke-linejoin: round;
}
.cat-belly { fill: var(--coat-belly, #e6d5bd); opacity: .85; }
.cat-paw { fill: var(--coat-belly, #e6d5bd); stroke: var(--coat-outline, #3f2d1a); stroke-width: 1.8; opacity: .95; }
.cat-shadow { fill: rgba(30, 16, 2, .3); }
.cat-stripe { fill: none; stroke: var(--coat-stripe, #553d24); stroke-width: 6; stroke-linecap: round; opacity: .8; }
.cat-stripe-fine { stroke-width: 4; opacity: .6; }
.cat-tail-line { fill: none; stroke: var(--coat, #8f6b45); stroke-width: 21; stroke-linecap: round; }
.cat-tail-outline { fill: none; stroke: var(--coat-outline, #3f2d1a); stroke-width: 25.8; stroke-linecap: round; }
.cat-ear-inner { fill: var(--coat-ear, #e2a8a0); }
.cat-nose { fill: var(--coat-nose, #d98f8a); }
.cat-eye-closed { fill: none; stroke: #3a2c22; stroke-width: 3.4; stroke-linecap: round; }
.cat-eye-open { fill: #3a2c22; opacity: 0; }
.cat-mouth { fill: none; stroke: #3a2c22; stroke-width: 2.6; stroke-linecap: round; }
.cat-whisker { fill: none; stroke: rgba(255, 255, 255, .72); stroke-width: 2; stroke-linecap: round; }
.box-cat.awake .cat-eye-closed { opacity: 0; }
.box-cat.awake .cat-eye-open { opacity: 1; }
.cat-eye-closed, .cat-eye-open { transition: opacity .35s ease; }

/* 息づかい・尻尾・耳。動きは小さく、長時間表示でも気にならない程度に。
   SVGの部品を正しい位置で回すには transform-box が要る。対応していない環境では
   手足があらぬ方向へ飛ぶので、動かさずに静止した絵として見せる。 */
.cat-body, .cat-tail, .cat-ear-right, .cat-head { transform-box: fill-box; transform-origin: center; }
.cat-tail { transform-origin: 90% 30%; }
.cat-ear-right { transform-origin: 50% 90%; }
@supports (transform-box: fill-box) {
  .cat-body { animation: catBreathe 5s ease-in-out infinite alternate; }
  .cat-head { animation: catBreatheHead 5s ease-in-out infinite alternate; }
  .cat-tail { animation: catTail 9s ease-in-out infinite; }
  .cat-ear-right { animation: catEar 14s ease-in-out infinite; }
  .box-cat.poked .cat-head { animation: catPoke .8s ease-out; }
}

@keyframes catBreathe { from { transform: scale(1, 1); } to { transform: scale(1.008, 1.02); } }
@keyframes catBreatheHead { from { transform: translateY(0); } to { transform: translateY(-1.6px); } }
@keyframes catTail { 0%, 62%, 100% { transform: rotate(0deg); } 74% { transform: rotate(-3.5deg); } 86% { transform: rotate(2.5deg); } }
@keyframes catEar { 0%, 88%, 100% { transform: rotate(0deg); } 92% { transform: rotate(-9deg); } 96% { transform: rotate(5deg); } }
@keyframes catPoke { 0% { transform: translateY(0) rotate(0deg); } 40% { transform: translateY(-5px) rotate(-3deg); } 100% { transform: translateY(0) rotate(0deg); } }

/* はこ猫モードでは、時刻を上寄せにして箱の中のねこと場所を分ける。
   利用者が位置を選んでいる場合（中央以外）は、その設定を優先する。 */
.clock[data-scene="box"].digital-pos-center .readout { place-content: start center; padding-top: 13vh; }
.clock[data-scene="box"].analog-pos-center .analog { place-content: start center; padding-top: 9vh; }

/* 宅配伝票。上部のボタン列を避けた位置に貼る。 */
.box-label {
  position: absolute;
  top: clamp(56px, 8.5vh, 96px);
  right: clamp(10px, 4vmin, 46px);
  width: min(260px, 38vw);
  padding: 10px 12px 8px;
  border-radius: 3px;
  background: #f7f1e2;
  color: #2f2620;
  font-size: clamp(10px, 1.15vw, 13px);
  line-height: 1.5;
  box-shadow: 0 6px 18px rgba(50, 30, 10, .35);
  transform: rotate(-1.2deg);
}
.box-label-head { display: flex; align-items: center; gap: 7px; padding-bottom: 5px; border-bottom: 1px solid #b9ad96; }
.box-label-mark { padding: 1px 6px; border: 1.5px solid #b4462f; border-radius: 3px; color: #b4462f; font-weight: 900; letter-spacing: .04em; }
.box-label-title { color: #6a5f52; letter-spacing: .12em; }
.box-label-date { padding: 6px 0 5px; font-size: clamp(14px, 2vw, 22px); font-weight: 900; letter-spacing: .02em; }
.box-label-foot { display: flex; gap: 10px; padding-top: 4px; border-top: 1px dashed #c3b8a3; color: #7a6a58; font-size: clamp(9px, 1vw, 11px); }
/* 狭い画面では時刻と場所を取り合ってしまうため、伝票は表示しない。 */
@media (max-width: 640px) { .box-label { display: none; } }

/* ---------- 画面の中を歩くねこ ---------- */
.cat-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.cat-layer.hidden, .clock.scene-on .cat-layer { display: none; }
.roam-cat {
  position: absolute;
  bottom: 6%;
  left: 20%;
  width: min(22vmin, 190px);
  transform: translateX(-50%) scaleX(var(--facing, 1));
  transition: left 6s linear;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .38));
}
.cat-layer[data-size="small"] .roam-cat { width: min(15vmin, 130px); }
.cat-layer[data-size="large"] .roam-cat { width: min(31vmin, 265px); }
.roam-cat-svg { display: block; width: 100%; height: auto; overflow: visible; }
.roam-cat-svg .cat-tail-line { stroke-width: 13; }
.roam-cat-svg .cat-tail-outline { stroke-width: 17; }
.roam-cat-svg .cat-fur, .roam-cat-svg .cat-fur-shade { stroke-width: 2; }
.roam-cat-svg .cat-stripe { stroke-width: 5; }
.roam-cat-svg .cat-eye-closed { stroke-width: 2.6; }
.roam-cat-svg .cat-whisker { stroke-width: 1.6; }
.cat-fur-shade { fill: var(--coat-shade, #8a6743); }
.cat-zzz { fill: rgba(255, 255, 255, .8); font-size: 16px; font-weight: 900; letter-spacing: .12em; }

.pose { display: none; }
.roam-cat[data-state="sleep"] .pose-curl { display: block; }
.roam-cat[data-state="sit"] .pose-stand,
.roam-cat[data-state="walk"] .pose-stand { display: block; }
.pose-stand .cat-eye-closed { opacity: 0; }
.pose-stand .cat-eye-open { opacity: 1; }

.cat-leg { transform-box: fill-box; transform-origin: 50% 0%; }
.cat-body-roam, .cat-head-roam, .cat-tail-roam, .pose-curl { transform-box: fill-box; }
.cat-tail-roam { transform-origin: 10% 90%; }
.cat-head-roam { transform-origin: 70% 80%; }
.pose-curl { transform-origin: center; }
@supports (transform-box: fill-box) {
  .cat-tail-roam { animation: roamTail 7s ease-in-out infinite; }
  .roam-cat[data-state="walk"] .cat-leg-front-near { animation: legSwing .62s ease-in-out infinite; }
  .roam-cat[data-state="walk"] .cat-leg-back-near { animation: legSwing .62s ease-in-out infinite .31s; }
  .roam-cat[data-state="walk"] .cat-leg-front-far { animation: legSwing .62s ease-in-out infinite .31s; }
  .roam-cat[data-state="walk"] .cat-leg-back-far { animation: legSwing .62s ease-in-out infinite; }
  .roam-cat[data-state="walk"] .cat-body-roam { animation: roamBob .62s ease-in-out infinite; }
  .roam-cat[data-state="sit"] .cat-head-roam { animation: roamLook 11s ease-in-out infinite; }
  .roam-cat[data-state="sleep"] .pose-curl { animation: catBreathe 5s ease-in-out infinite alternate; }
  .roam-cat.reacting .cat-head-roam { animation: roamGreet .9s ease-out; }
}

@keyframes legSwing { 0%, 100% { transform: rotate(13deg); } 50% { transform: rotate(-13deg); } }
@keyframes roamBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes roamTail { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-7deg); } }
@keyframes roamLook { 0%, 82%, 100% { transform: rotate(0deg); } 88% { transform: rotate(-7deg); } 94% { transform: rotate(4deg); } }
@keyframes roamGreet { 0% { transform: translateY(0) rotate(0deg); } 35% { transform: translateY(-7px) rotate(-6deg); } 100% { transform: translateY(0) rotate(0deg); } }

.cat-affection {
  position: absolute;
  top: -14%;
  left: 50%;
  transform: translateX(-50%) scaleX(var(--facing, 1));
  color: #ffb3c7;
  font-size: clamp(18px, 3vmin, 30px);
  font-weight: 900;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
  animation: affectionRise 1.8s ease-out forwards;
  pointer-events: none;
}
@keyframes affectionRise {
  0% { opacity: 0; transform: translate(-50%, 6px) scaleX(var(--facing, 1)); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -34px) scaleX(var(--facing, 1)); }
}

/* なつきの表示 */
.bond-text { margin: 10px 0 6px; font-size: 13px; font-weight: 700; color: #ffd9b8; }
.bond-bar { position: relative; height: 8px; border-radius: 99px; background: #3a2b23; overflow: hidden; }
.bond-bar:after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--bond, 0%); background: linear-gradient(90deg, #d7834e, #ffd35a); transition: width .4s ease; }

/* ---------- 動きを減らす設定を尊重する ---------- */
@media (prefers-reduced-motion: reduce) {
  .clock { transition: none; }
  .cat-body, .cat-head, .cat-tail, .cat-ear-right, .box-cat.poked .cat-head,
  .cat-leg, .cat-body-roam, .cat-head-roam, .cat-tail-roam,
  .roam-cat[data-state="walk"] .cat-leg-front-near,
  .roam-cat[data-state="walk"] .cat-leg-back-near,
  .roam-cat[data-state="walk"] .cat-leg-front-far,
  .roam-cat[data-state="walk"] .cat-leg-back-far,
  .roam-cat[data-state="walk"] .cat-body-roam,
  .roam-cat[data-state="sit"] .cat-head-roam,
  .roam-cat.reacting .cat-head-roam,
  .roam-cat[data-state="sleep"] .pose-curl, .cat-affection { animation: none; }
  .roam-cat, .cat-eye-closed, .cat-eye-open, .bond-bar:after, .scene-art:after { transition: none; }
}