:root {
  --bg-top: #fffaf2;
  --bg-middle: #fff0ea;
  --bg-bottom: #f6e6ef;
  --card-bg: rgba(255, 253, 249, 0.94);
  --card-solid: #fffdfa;
  --accent: #ee8d80;
  --accent-dark: #c86460;
  --accent-deep: #a84e52;
  --accent-soft: #fbd5cc;
  --accent-pale: #fff0eb;
  --sage: #adc7ad;
  --sage-dark: #6f9478;
  --butter: #f5d58e;
  --text-main: #5f4941;
  --text-sub: #927a70;
  --line: #ead6cc;
  --shadow: rgba(116, 76, 64, 0.13);
  --shadow-strong: rgba(120, 68, 67, 0.2);
  --pill-idle: #f2e9e3;
  --pill-manual: #f8dfb2;
  --pill-playing: #f5cd71;
  --pill-resting: #cde1c9;
  --pill-sleeping: #d7d9ef;
  --error-text: #a94743;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
  color: var(--text-main);
  background:
    radial-gradient(circle at 14% 8%, rgba(245, 213, 142, 0.34) 0 7%, transparent 7.2%),
    radial-gradient(circle at 88% 18%, rgba(217, 203, 226, 0.38) 0 9%, transparent 9.2%),
    linear-gradient(165deg, var(--bg-top) 0%, var(--bg-middle) 48%, var(--bg-bottom) 100%);
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

body::before {
  width: 210px;
  height: 210px;
  right: -120px;
  bottom: 12%;
  background: rgba(238, 141, 128, 0.12);
}

body::after {
  width: 160px;
  height: 160px;
  left: -95px;
  bottom: 34%;
  background: rgba(173, 199, 173, 0.18);
}

button,
input { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(111, 148, 120, 0.55);
  outline-offset: 3px;
}

.app {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100svh;
  padding: max(24px, env(safe-area-inset-top)) 20px max(38px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.screen {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.screen.active {
  display: flex;
  animation: screen-arrive 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hidden { display: none !important; }

.desktop-mode-bar,
.task-pill { display: none; }

html.native-shell body {
  min-height: 0;
  background: linear-gradient(165deg, #fffaf2 0%, #fff0ea 58%, #f7e9ef 100%);
}

html.native-shell .app {
  max-width: none;
  min-height: 0;
  padding: 14px 15px 18px;
}

html.native-shell .desktop-mode-bar,
html.native-shell .task-pill,
html.native-shell #screen-home .logo,
html.native-shell #screen-home .stat-card,
html.native-shell #screen-home > .hint {
  display: none !important;
}

html.native-shell #screen-home { gap: 9px; }
html.native-shell .cat-room-stage { width: 100%; min-height: 250px; }

html.native-shell #screen-practice .one-liner-row,
html.native-shell #screen-practice .cat-name-small { display: none !important; }

html.native-shell #screen-practice .cat-stage-big { width: 190px; height: 190px; }
html.native-shell #screen-practice .stat-card { padding: 10px 16px; }
html.native-shell #screen-practice .stat-value { font-size: 24px; }

.logo {
  position: relative;
  margin: 3px 0 0;
  padding: 0 38px;
  color: var(--accent-deep);
  font-size: 31px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 0 #fff, 0 5px 12px rgba(168, 78, 82, 0.12);
}

.logo::before,
.logo::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 7px 8px 0 -2px var(--butter);
  opacity: 0.7;
}

.logo::before { left: 16px; top: 5px; transform: rotate(-12deg); }
.logo::after { right: 16px; bottom: 5px; transform: rotate(12deg); }

.cat-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 1;
}

.cat-name {
  position: relative;
  padding: 5px 15px 5px 24px;
  border: 1px solid rgba(234, 214, 204, 0.8);
  border-radius: 999px;
  color: var(--accent-dark);
  background: var(--card-solid);
  box-shadow: 0 4px 12px var(--shadow);
  font-size: 15px;
  font-weight: 800;
}

.cat-name::before {
  content: "●";
  position: absolute;
  left: 10px;
  top: 50%;
  color: var(--sage);
  font-size: 7px;
  transform: translateY(-50%);
}

.cat-name-small { margin: -6px 0 0; padding: 4px 12px 4px 20px; font-size: 12px; }
.cat-name-small::before { left: 9px; }

.icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(234, 214, 204, 0.8);
  border-radius: 50%;
  color: var(--text-sub);
  background: var(--card-solid);
  box-shadow: 0 4px 10px var(--shadow);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: transform 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.cat-change-btn {
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid rgba(111, 148, 120, 0.3);
  border-radius: 999px;
  color: var(--sage-dark);
  background: rgba(255, 253, 249, 0.9);
  box-shadow: 0 3px 9px rgba(91, 70, 54, 0.08);
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  transition: color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.cat-change-btn:hover { color: var(--accent-dark); box-shadow: 0 4px 11px rgba(91, 70, 54, 0.12); }
.cat-change-btn:active { transform: translateY(1px) scale(0.97); }

.icon-btn:hover { color: var(--accent-dark); box-shadow: 0 5px 13px var(--shadow-strong); }
.icon-btn:active { transform: translateY(1px) scale(0.9) rotate(-5deg); }

.cat-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.cat-stage {
  position: relative;
  width: 218px;
  height: 218px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(200, 151, 125, 0.17) 0 24%, transparent 25%),
    linear-gradient(145deg, rgba(255, 253, 249, 0.84), rgba(251, 213, 204, 0.46));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 14px 30px rgba(120, 68, 67, 0.08);
  animation: stage-breathe 6s ease-in-out infinite;
}

.cat-stage::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 50%;
  width: 42px;
  height: 10px;
  background:
    radial-gradient(circle, rgba(200, 100, 96, 0.3) 0 3px, transparent 3.5px) 0 0 / 21px 10px;
  transform: translateX(-50%) rotate(-5deg);
}

.cat-stage-big { width: 248px; height: 248px; }

.cat-room-stage {
  position: relative;
  width: calc(100% + 20px);
  max-width: 460px;
  min-height: 304px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border: 2px solid rgba(224, 187, 170, 0.75);
  border-radius: 26px 26px 20px 20px;
  background:
    linear-gradient(90deg, transparent 49.3%, rgba(204, 154, 135, 0.16) 49.5% 50.5%, transparent 50.7%) 0 0 / 72px 72px,
    linear-gradient(rgba(204, 154, 135, 0.13) 1px, transparent 1px) 0 0 / 100% 36px,
    linear-gradient(to bottom, #fff9ec 0 72%, #e8c7ad 72% 76%, #cfa98c 76% 100%);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.75), 0 12px 26px rgba(116, 76, 64, 0.14);
}

.cat-room-stage::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 32px;
  width: 76px;
  height: 68px;
  border: 5px solid #e4b9a0;
  border-radius: 9px;
  background:
    linear-gradient(90deg, transparent 46%, #e4b9a0 46% 54%, transparent 54%),
    linear-gradient(transparent 45%, #e4b9a0 45% 55%, transparent 55%),
    linear-gradient(145deg, #cde2e7, #fae8bd);
  box-shadow: 0 3px 0 rgba(116, 76, 64, 0.08);
  z-index: 0;
}

.cat-room-stage::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 9px;
  height: 34px;
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, #e8a7a0 0 13px, #f4bcb0 13px 26px);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.28), 0 3px 5px rgba(91, 70, 54, 0.13);
  opacity: 0.72;
  z-index: 0;
}

.cat-room-canvas {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 4;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 3px 2px rgba(91, 70, 54, 0.14));
}

.cat-sofa-canvas {
  top: 97px;
  bottom: auto;
  z-index: 2;
}

.room-sofa {
  position: absolute;
  top: 132px;
  left: 50%;
  z-index: 1;
  width: 204px;
  height: 75px;
  border: 2px solid #bd9579;
  border-radius: 22px 22px 8px 8px;
  background: linear-gradient(180deg, #f3dfc7, #e5c7aa);
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.34);
  clip-path: none;
  transform: translateX(-50%);
}

.sofa-cushion {
  position: absolute;
  top: 39px;
  width: 83px;
  height: 27px;
  border: 1px solid #c8a285;
  border-radius: 9px 9px 6px 6px;
  background: linear-gradient(180deg, #fff0db, #e9cdb2);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), 0 2px 2px rgba(91, 70, 54, 0.08);
}

.sofa-cushion-left { left: 18px; }
.sofa-cushion-right { right: 18px; }

.sofa-arm {
  position: absolute;
  top: 36px;
  z-index: 1;
  width: 24px;
  height: 39px;
  border: 2px solid #bd9579;
  border-radius: 11px 11px 6px 6px;
  background: #dfbfa1;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.28);
  clip-path: none;
}

.sofa-arm-left { left: -8px; }
.sofa-arm-right { right: -8px; }

.room-sofa-front {
  position: absolute;
  top: 202px;
  left: 50%;
  z-index: 3;
  width: 216px;
  height: 13px;
  border: 2px solid #795747;
  border-radius: 3px 3px 7px 7px;
  background: linear-gradient(180deg, #a5785e, #76513f);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    0 3px 3px rgba(91, 70, 54, 0.16),
    0 12px 8px -6px rgba(91, 70, 54, 0.28);
  clip-path: none;
  transform: translateX(-50%);
}

.room-sofa-front::before,
.room-sofa-front::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 12px;
  height: 14px;
  border-radius: 0 0 4px 4px;
  background: #73503e;
}

.room-sofa-front::before { left: 18px; }
.room-sofa-front::after { right: 18px; }

.room-plant {
  position: absolute;
  top: 160px;
  right: 40px;
  bottom: auto;
  z-index: 1;
  width: 48px;
  height: 64px;
  overflow: visible;
  filter: none;
  transform-origin: 50% 100%;
  animation: none;
}

.cat-canvas,
.cat-option-thumb,
.arrival-thumb {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.speech-bubble {
  position: relative;
  z-index: 2;
  max-width: 234px;
  margin: 0 0 -8px;
  padding: 10px 17px;
  border: 2px solid var(--accent-soft);
  border-radius: 20px 20px 20px 7px;
  color: var(--text-main);
  background: var(--card-solid);
  box-shadow: 0 7px 18px var(--shadow);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  animation: bubble-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 27px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--accent-soft);
  border-bottom: 2px solid var(--accent-soft);
  background: var(--card-solid);
  transform: rotate(45deg) skew(8deg, 8deg);
}

.stat-card {
  position: relative;
  width: 100%;
  padding: 17px 20px;
  overflow: hidden;
  border: 1px solid rgba(234, 214, 204, 0.9);
  border-radius: 22px 18px 23px 18px;
  background: var(--card-bg);
  box-shadow: 0 8px 0 rgba(222, 185, 171, 0.3), 0 13px 25px var(--shadow);
  text-align: center;
  backdrop-filter: blur(8px);
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--butter);
  box-shadow: calc(100vw - 74px) 0 0 var(--sage);
}

.stat-label {
  margin: 0 0 4px;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.stat-value {
  margin: 0;
  color: var(--accent-deep);
  font-size: clamp(29px, 9vw, 38px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 #fff;
}

#screen-home .stat-card {
  padding: 9px 18px 10px;
  border-radius: 17px 14px 18px 14px;
  box-shadow: 0 5px 0 rgba(222, 185, 171, 0.28), 0 9px 18px var(--shadow);
}

#screen-home .stat-label {
  margin-bottom: 1px;
  font-size: 10px;
}

#screen-home .stat-value {
  font-size: 23px;
}

.btn {
  position: relative;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.4), box-shadow 0.16s ease, background 0.16s ease, opacity 0.16s ease;
}

.btn:active { transform: translateY(4px) scale(0.985); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-big { width: 100%; padding: 17px 18px 16px; font-size: 17px; }

.btn-primary {
  border: 2px solid rgba(255, 255, 255, 0.64);
  color: #fffdfa;
  background: linear-gradient(180deg, #f09b8d, var(--accent) 62%, #df776f 100%);
  box-shadow: 0 7px 0 #bd5f5d, 0 13px 24px rgba(189, 95, 93, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 1px rgba(120, 52, 52, 0.2);
}

.btn-primary::before,
.btn-primary::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  transform: translateY(-55%);
}

.btn-primary::before { left: 19px; }
.btn-primary::after { right: 19px; }

.btn-primary:not(:disabled):hover {
  background: linear-gradient(180deg, #f3a397, #e7847d 62%, #d96c68 100%);
  box-shadow: 0 8px 0 #b85858, 0 15px 27px rgba(189, 95, 93, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.btn-primary:not(:disabled):active {
  box-shadow: 0 3px 0 #bd5f5d, 0 7px 14px rgba(189, 95, 93, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(4px) scale(0.985);
}

.btn-secondary {
  border: 1px solid var(--line);
  color: var(--text-main);
  background: #f5ede7;
  box-shadow: 0 4px 0 #dfcec4;
}

.btn-secondary:active { box-shadow: 0 1px 0 #dfcec4; }

.link-btn {
  padding: 6px 10px;
  border: 0;
  color: var(--text-sub);
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(146, 122, 112, 0.4);
  text-decoration-style: wavy;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 0.16s ease, transform 0.16s ease;
}

.link-btn:hover { color: var(--accent-dark); }
.link-btn:active { transform: scale(0.96); }

.home-links-row { display: flex; align-items: center; justify-content: center; gap: 4px; }
.home-links-row .link-btn + .link-btn { border-left: 1px solid var(--line); border-radius: 0; }

.export-csv-btn {
  align-self: center;
  padding: 5px 12px;
  color: #70806d;
  text-decoration-color: rgba(111, 148, 120, 0.45);
}

/* みんなの公園。猫は1枚の広い地面の前後に散らし、段に見えない奥行きを作る */
#screen-plaza {
  --park-sky: #e3f1e7;
  --park-grass-far: #bfd9ad;
  --park-grass-near: #91bd84;
  --park-path: #edddb9;
  gap: 11px;
}

#screen-plaza .result-title { color: #58785c; }

#screen-plaza #plaza-summary {
  min-width: min(94%, 350px);
  margin-bottom: 4px;
  padding: 11px 22px 11px 41px;
  border: 3px solid #8d684a;
  border-radius: 10px 7px 11px 8px;
  color: #fffaf0;
  background:
    linear-gradient(92deg, transparent 0 9%, rgba(255,255,255,.07) 9.5% 10.5%, transparent 11% 72%, rgba(72,57,40,.07) 72.5% 73.5%, transparent 74%),
    linear-gradient(180deg, #7f9d73, #67845f);
  box-shadow: inset 0 2px rgba(255,255,255,.18), 0 5px 0 #704e38, 0 9px 16px rgba(79, 66, 48, 0.2);
  font-size: 13px;
  letter-spacing: .02em;
  text-align: center;
  transform: rotate(-0.7deg);
}

#screen-plaza #plaza-summary::before {
  content: "✿";
  left: 14px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 0;
  color: #f8dfa0;
  background: none;
  font-size: 16px;
  line-height: 1;
  animation: none;
}

#screen-plaza #plaza-summary::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 20px;
  right: 20px;
  top: 100%;
  height: 13px;
  border-left: 7px solid #765239;
  border-right: 7px solid #765239;
  filter: drop-shadow(0 3px 0 rgba(84, 65, 44, .13));
}

.plaza-room-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 174px;
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 30px 25px 34px 28px;
  background:
    radial-gradient(ellipse 28% 18% at 18% 36%, rgba(110,157,101,.17) 0 69%, transparent 71%),
    radial-gradient(ellipse 31% 16% at 82% 39%, rgba(101,151,94,.16) 0 69%, transparent 71%),
    radial-gradient(ellipse 58% 27% at 50% 58%, #f3e5c7 0 68%, var(--park-path) 69% 78%, #d5bc90 79% 82%, transparent 83%),
    radial-gradient(ellipse 19% 10% at 39% 58%, rgba(255,255,255,0.24) 0 70%, transparent 72%),
    radial-gradient(ellipse 18% 9% at 61% 58%, rgba(219,196,151,0.34) 0 70%, transparent 72%),
    linear-gradient(to bottom, var(--park-sky) 0 24%, var(--park-grass-far) 24% 58%, var(--park-grass-near) 100%);
  box-shadow: inset 0 0 34px rgba(255, 255, 255, 0.42), inset 0 -18px 28px rgba(72,115,65,.09), 0 8px 0 rgba(112, 145, 96, 0.18), 0 14px 24px rgba(83, 91, 60, 0.14);
  overflow: hidden;
}

.plaza-room-canvas {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
}

.park-scenery,
.park-scenery > span { position: absolute; pointer-events: none; }
.park-scenery { z-index: 1; inset: 0; overflow: hidden; }

.park-cloud {
  top: 30px;
  width: 48px;
  height: 13px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
}

.park-cloud::before,
.park-cloud::after {
  content: "";
  position: absolute;
  bottom: 2px;
  border-radius: 50%;
  background: inherit;
}

.park-cloud::before { left: 9px; width: 19px; height: 19px; }
.park-cloud::after { right: 7px; width: 14px; height: 14px; }
.park-cloud-left { left: 51px; animation: park-drift 12s ease-in-out infinite alternate; }
.park-cloud-right { top: 69px; right: 82px; transform: scale(0.68); opacity: 0.72; }

.park-tree {
  width: 66px;
  height: 105px;
  background: none;
  transform-origin: 50% 100%;
  animation: park-tree-breathe 4.8s ease-in-out infinite alternate;
}

.park-tree::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 55px;
  width: 11px;
  height: 48px;
  border-radius: 7px 7px 3px 3px;
  background: #98745a;
  box-shadow: inset 3px 0 rgba(255,255,255,0.18);
}

.park-tree::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 7px;
  width: 50px;
  height: 64px;
  border-radius: 51% 49% 47% 53% / 48% 53% 47% 52%;
  background:
    radial-gradient(circle at 34% 25%, #c8dda0 0 9%, transparent 10%),
    radial-gradient(circle at 68% 58%, #709b68 0 13%, transparent 14%),
    radial-gradient(circle at 52% 43%, #9bc287 0 34%, #78a66f 35% 70%, #668f63 71%);
  box-shadow: -13px 15px 0 -5px #88b279, 14px 11px 0 -6px #74a270, 0 5px 12px rgba(67,101,61,.12);
}

.park-tree i {
  left: 17px;
  bottom: -2px;
  width: 34px;
  height: 8px;
  border-radius: 50%;
  background: rgba(72, 97, 60, 0.2);
}

.park-tree-left { top: 23px; left: 5px; transform: scale(0.78); }
.park-tree-right { top: 65px; right: -2px; transform: scale(0.9); animation-delay: -1.3s; }

.park-lamp {
  top: 42%;
  left: 22px;
  width: 5px;
  height: 74px;
  border-radius: 5px;
  background: #657469;
  box-shadow: 0 69px 0 4px #657469;
  opacity: 0.74;
}

.park-lamp::before {
  content: "";
  position: absolute;
  top: -11px;
  left: -7px;
  width: 19px;
  height: 22px;
  border: 3px solid #657469;
  border-radius: 8px 8px 5px 5px;
  background: rgba(255, 235, 169, 0.82);
}

.park-bench {
  top: 43%;
  right: 22px;
  width: 75px;
  height: 31px;
  border: 5px solid #87664d;
  border-width: 5px 0;
  border-radius: 3px;
  background: repeating-linear-gradient(to bottom, #b98760 0 5px, #d5aa78 5px 8px);
  opacity: 0.82;
  transform: scale(0.88);
}

.park-bench::before,
.park-bench::after {
  content: "";
  position: absolute;
  top: 30px;
  width: 5px;
  height: 21px;
  border-radius: 3px;
  background: #6c6558;
}

.park-bench::before { left: 11px; transform: rotate(7deg); }
.park-bench::after { right: 11px; transform: rotate(-7deg); }
.park-bench i { position: absolute; left: -6px; right: -6px; bottom: -8px; height: 7px; border-radius: 5px; background: #a97855; }

.park-stump {
  left: 18%;
  top: 52%;
  width: 34px;
  height: 25px;
  border: 3px solid #815d45;
  border-radius: 45% 48% 8px 9px;
  background: linear-gradient(90deg, #a97b57, #c39264 45%, #966a4d);
  box-shadow: 0 5px 0 rgba(75,91,54,.14);
  opacity: .88;
}

.park-stump::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -7px;
  width: 34px;
  height: 12px;
  border: 3px solid #815d45;
  border-radius: 50%;
  background: radial-gradient(ellipse, #d6ab77 0 27%, #ad7e56 29% 38%, #dfb984 40% 66%, #9b6e4c 68%);
}

.park-stump i { position: absolute; left: -7px; right: -7px; bottom: -7px; height: 7px; border-radius: 50%; background: rgba(65,91,55,.16); }

.park-box {
  right: 17%;
  top: 63%;
  width: 42px;
  height: 30px;
  border: 3px solid #a9754c;
  border-radius: 3px 3px 7px 6px;
  background: linear-gradient(145deg, #e0b57b, #c9945e);
  box-shadow: inset 0 -5px rgba(143,91,55,.12), 0 5px 0 rgba(75,91,54,.12);
  opacity: .9;
  transform: rotate(2deg);
}

.park-box::before,
.park-box::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 24px;
  height: 11px;
  border: 2px solid #a9754c;
  background: #e6bd83;
}

.park-box::before { left: -3px; transform: skewX(-27deg) rotate(-5deg); }
.park-box::after { right: -3px; transform: skewX(27deg) rotate(5deg); }
.park-box i { position: absolute; left: 17px; top: 0; width: 5px; height: 30px; background: rgba(255,232,186,.36); }

.park-ball {
  left: 53%;
  bottom: 24px;
  width: 18px;
  height: 18px;
  border: 2px solid #b66d72;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe7cc 0 17%, #e99a98 19% 48%, #cf7c82 50%);
  box-shadow: 0 4px 0 rgba(70,94,57,.14);
  animation: park-ball-wiggle 5.8s ease-in-out infinite;
}

.park-puddle {
  left: 34%;
  top: 70%;
  width: 58px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 32%, rgba(255,255,255,.55) 0 9%, transparent 10%), rgba(143,190,190,.46);
  box-shadow: inset 0 -3px rgba(90,144,146,.17), 0 1px 0 rgba(255,255,255,.3);
  transform: rotate(-4deg);
}

.park-hydrangea {
  left: 5px;
  bottom: 53px;
  width: 45px;
  height: 25px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 18% 42%, #d9b6dd 0 5px, transparent 5.5px),
    radial-gradient(circle at 39% 25%, #bfa9dc 0 6px, transparent 6.5px),
    radial-gradient(circle at 59% 47%, #d7bee7 0 6px, transparent 6.5px),
    radial-gradient(circle at 79% 30%, #adabd8 0 5px, transparent 5.5px),
    radial-gradient(circle at 48% 75%, #c3a8d6 0 6px, transparent 6.5px);
  filter: drop-shadow(0 4px 0 rgba(73,103,65,.14));
  opacity: .8;
}

.park-hydrangea::before,
.park-hydrangea::after {
  content: "";
  position: absolute;
  top: 19px;
  width: 18px;
  height: 8px;
  border-radius: 90% 15% 90% 20%;
  background: #719c6c;
}

.park-hydrangea::before { left: 7px; transform: rotate(24deg); }
.park-hydrangea::after { right: 5px; transform: scaleX(-1) rotate(24deg); }

.park-butterfly {
  left: 42%;
  top: 31%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8f765d;
  animation: park-butterfly-float 8s ease-in-out infinite;
}

.park-butterfly::before,
.park-butterfly::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 8px;
  height: 10px;
  border-radius: 70% 40% 65% 35%;
  background: rgba(245,184,143,.85);
  animation: park-wing 1s ease-in-out infinite alternate;
}

.park-butterfly::before { right: 3px; transform-origin: 100% 60%; transform: rotate(-22deg); }
.park-butterfly::after { left: 3px; transform-origin: 0 60%; transform: scaleX(-1) rotate(-22deg); }

.park-ladybug {
  right: 31%;
  bottom: 18px;
  width: 8px;
  height: 9px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 28% 45%, #4f463c 0 1px, transparent 1.5px), radial-gradient(circle at 72% 62%, #4f463c 0 1px, transparent 1.5px), linear-gradient(90deg, #d6675e 0 45%, #51463e 46% 54%, #d6675e 55%);
  box-shadow: 0 2px 0 rgba(58,75,47,.13);
  animation: park-ladybug-walk 7s ease-in-out infinite alternate;
}

.park-flowerbed {
  right: 12px;
  bottom: 13px;
  width: 92px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 13% 10%, #f9e69b 0 4px, transparent 4.5px),
    radial-gradient(circle at 38% 25%, #f4a4a0 0 4px, transparent 4.5px),
    radial-gradient(circle at 64% 9%, #fff3c7 0 4px, transparent 4.5px),
    radial-gradient(circle at 86% 30%, #dcb1d9 0 4px, transparent 4.5px),
    #769f69;
  box-shadow: 0 5px 0 #6d8d5e;
}

.park-picnic {
  left: 12%;
  bottom: 16px;
  width: 74px;
  height: 35px;
  border-radius: 45%;
  background:
    linear-gradient(90deg, transparent 47%, rgba(255,255,255,.5) 48% 53%, transparent 54%),
    linear-gradient(0deg, transparent 47%, rgba(255,255,255,.5) 48% 53%, transparent 54%),
    #e7a39a;
  box-shadow: 0 4px 7px rgba(81,83,53,.13);
  opacity: 0.7;
  transform: rotate(-5deg) skewX(-8deg);
}

.park-picnic::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: 4px;
  width: 13px;
  height: 29px;
  border-radius: 50%;
  background: #cf827f;
  box-shadow: inset 4px 0 rgba(255,255,255,.24);
}

/* 公園の小物は、記号的なCSS図形ではなく構造が読み取れる手描きSVGで表示する。 */
.park-prop {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  object-fit: contain;
  opacity: .9;
  filter: saturate(.88) drop-shadow(0 3px 2px rgba(62, 82, 54, .1));
}

.park-prop.park-tree {
  width: 83px;
  height: 112px;
  background: none;
  filter: saturate(.72) brightness(1.04) drop-shadow(0 5px 3px rgba(62, 82, 54, .12));
}

.park-prop.park-tree-left {
  top: 10px;
  left: -4px;
  transform: scale(.85);
}

.park-prop.park-tree-right {
  top: 55px;
  right: -7px;
  transform: scale(.92);
}

.park-prop.park-lamp {
  top: 35%;
  left: 9px;
  width: 38px;
  height: 102px;
  border: 0;
  background: none;
  box-shadow: none;
}

.park-prop.park-bench {
  top: 36%;
  left: 50%;
  right: auto;
  width: 100px;
  height: 100px;
  border: 0;
  background: none;
  opacity: .82;
  transform: translateX(-50%);
  filter: saturate(.72) brightness(1.07) drop-shadow(0 3px 2px rgba(77, 74, 50, .16));
}

.park-prop.park-stump {
  left: 17%;
  top: 53%;
  width: 51px;
  height: 46px;
  border: 0;
  background: none;
  box-shadow: none;
}

.park-prop.park-box {
  top: 54%;
  right: auto;
  left: 7px;
  width: 52px;
  height: 47px;
  border: 0;
  background: none;
  box-shadow: none;
  transform: rotate(1deg);
}

.park-prop.park-ball {
  left: 54%;
  bottom: 9px;
  width: 29px;
  height: 30px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.park-prop.park-puddle {
  left: 34%;
  top: 70%;
  width: 72px;
  height: 30px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: rotate(-3deg);
}

.park-prop.park-butterfly {
  left: 41%;
  top: 29%;
  width: 27px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: none;
  animation: park-butterfly-float 8s ease-in-out infinite;
}

.park-prop.park-ladybug {
  right: 30%;
  bottom: 14px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: park-ladybug-walk 7s ease-in-out infinite alternate;
}

.park-prop.park-hydrangea {
  left: -3px;
  bottom: 45px;
  width: 62px;
  height: 58px;
  border-radius: 0;
  background: none;
  opacity: .76;
  filter: saturate(.72) drop-shadow(0 4px 2px rgba(66, 91, 57, .12));
}

.park-prop.park-lamp::before,
.park-prop.park-bench::before,
.park-prop.park-bench::after,
.park-prop.park-stump::before,
.park-prop.park-box::before,
.park-prop.park-box::after,
.park-prop.park-butterfly::before,
.park-prop.park-butterfly::after {
  content: none;
}

.park-foreground {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.park-grass-bank {
  position: absolute;
  left: -5%;
  bottom: -1px;
  width: 110%;
  height: 90px;
  object-fit: fill;
  object-position: center bottom;
  opacity: .64;
  transform-origin: 50% 100%;
  filter: saturate(.72) brightness(1.04) drop-shadow(0 2px 1px rgba(55, 83, 50, .1));
  transform: skewX(-.7deg);
  animation: park-grass-bank-sway 5.6s ease-in-out infinite alternate;
}

#screen-plaza .hint { color: #6f8069; }
#screen-plaza .auto-judge-box {
  border: 2px dashed rgba(102, 130, 89, 0.42);
  border-radius: 12px;
  background: rgba(248, 246, 220, 0.78);
  box-shadow: 0 4px 0 rgba(119, 137, 87, 0.12);
}

#screen-plaza #plaza-back-btn {
  background: linear-gradient(180deg, #8fb782, #759e70);
  box-shadow: 0 5px 0 #587f59, 0 10px 18px rgba(74, 99, 68, 0.18);
}

/* 公園: ねこにホバー/タップしたときだけ出す情報カード。canvasには描かず、上に重ねるDOM要素として作る。 */
.plaza-cat-card {
  position: fixed;
  z-index: 9;
  width: 208px;
  max-width: calc(100vw - 20px);
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 20px 16px 21px 16px;
  background: var(--card-solid);
  box-shadow: 0 7px 0 rgba(186, 137, 120, 0.24), 0 16px 34px rgba(66, 44, 37, 0.22);
  animation: modal-pop 0.16s cubic-bezier(0.22, 1.18, 0.45, 1) both;
}

.plaza-cat-card-close-btn {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  color: var(--text-sub);
  background: rgba(91, 70, 54, 0.08);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.plaza-cat-card-close-btn:hover { color: var(--accent-dark); background: rgba(91, 70, 54, 0.14); }

.plaza-cat-card-head {
  width: 100%;
  padding-right: 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.plaza-cat-card-name { color: var(--accent-deep); font-size: 14.5px; font-weight: 900; }

.plaza-cat-card-own {
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.plaza-cat-card-time { margin: 0; color: var(--accent-dark); font-size: 12px; font-weight: 800; }

.plaza-cat-card-note {
  margin: 0;
  max-width: 100%;
  color: var(--text-main);
  font-size: 12.5px;
  line-height: 1.55;
  word-break: break-word;
}

.plaza-cat-card-report-btn {
  align-self: flex-end;
  margin-top: 4px;
  padding: 5px 12px;
  border: 1px solid rgba(224, 187, 170, 0.7);
  border-radius: 999px;
  color: var(--text-sub);
  background: transparent;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.plaza-cat-card-report-btn:hover { color: var(--accent-deep); border-color: var(--accent-soft); }

@keyframes park-drift {
  from { transform: translateX(-5px); }
  to { transform: translateX(7px); }
}

@keyframes park-tree-breathe {
  from { rotate: -1deg; }
  to { rotate: 1.5deg; }
}

@keyframes park-butterfly-float {
  0%, 100% { translate: -12px 4px; rotate: -8deg; }
  30% { translate: 8px -9px; rotate: 7deg; }
  62% { translate: 27px 4px; rotate: -3deg; }
  82% { translate: 12px -5px; rotate: 5deg; }
}

@keyframes park-wing {
  from { scale: .55 1; }
  to { scale: 1 1; }
}

@keyframes park-ladybug-walk {
  from { translate: -8px 0; rotate: -12deg; }
  to { translate: 10px -2px; rotate: 9deg; }
}

@keyframes park-ball-wiggle {
  0%, 84%, 100% { translate: 0 0; rotate: 0; }
  89% { translate: 3px -1px; rotate: 16deg; }
  94% { translate: -2px 0; rotate: -10deg; }
}

@keyframes park-grass-bank-sway {
  from { transform: skewX(-.7deg) translateX(-1px); }
  to { transform: skewX(.7deg) translateX(1px); }
}

.hint {
  max-width: 390px;
  margin: 1px 4px 0;
  color: var(--text-sub);
  font-size: 11.5px;
  line-height: 1.65;
  text-align: center;
}

.hint-small { margin-top: 7px; font-size: 10.5px; }
.error-text { color: var(--error-text); }

.practice-header { width: 100%; display: flex; justify-content: center; }

.status-pill {
  position: relative;
  margin: 0;
  padding: 8px 19px 8px 34px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  color: var(--text-main);
  background: var(--pill-idle);
  box-shadow: 0 5px 12px var(--shadow);
  font-size: 13px;
  font-weight: 800;
}

.status-pill::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  animation: status-pulse 1.8s ease-in-out infinite;
}

.status-manual { background: var(--pill-manual); }
.status-playing { background: var(--pill-playing); }
.status-resting { background: var(--pill-resting); }
.status-resting::before { background: var(--sage-dark); }
.status-sleeping { background: var(--pill-sleeping); }
.status-sleeping::before { background: #868aaa; animation: none; }

.auto-judge-box {
  width: 100%;
  padding: 13px 16px;
  border: 1px dashed rgba(200, 100, 96, 0.3);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.72);
  box-shadow: 0 5px 14px rgba(116, 76, 64, 0.07);
}

.auto-judge-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.auto-judge-row input[type="checkbox"] { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--accent); }

.one-liner-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.home-one-liner-row {
  width: auto;
  max-width: 100%;
  margin-top: -3px;
  padding: 4px 9px 4px 12px;
  border: 1px dashed rgba(111, 148, 120, 0.34);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.7);
}

.plaza-one-liner-row {
  width: min(100%, 390px);
  padding: 6px 9px 6px 12px;
  border: 1px dashed rgba(111, 148, 120, 0.42);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.78);
  box-shadow: 0 3px 10px rgba(69, 99, 65, 0.08);
}

.one-liner-label {
  flex: 0 0 auto;
  color: var(--sage-dark);
  font-size: 10px;
  font-weight: 900;
}

.one-liner-text {
  max-width: min(260px, calc(100vw - 100px));
  overflow: hidden;
  color: var(--text-sub);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-title {
  position: relative;
  margin: 4px 0 0;
  color: var(--accent-deep);
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 #fff;
}

.result-title::before,
.result-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--butter);
  transform: translateY(-50%);
  animation: sparkle 1.4s ease-in-out infinite alternate;
}

.result-title::before { left: -25px; }
.result-title::after { right: -24px; animation-delay: 0.35s; }

#screen-result.active .result-title {
  animation: result-title-arrive 0.58s cubic-bezier(0.2, 1.35, 0.35, 1) both;
}

#screen-result.active .cat-stage {
  animation:
    result-stage-arrive 0.72s 0.08s cubic-bezier(0.2, 1.35, 0.35, 1) both,
    stage-breathe 6s 0.8s ease-in-out infinite;
}

#screen-result.active #result-cat-canvas {
  transform-origin: 50% 88%;
  animation: result-cat-happy 2.2s 0.85s ease-in-out infinite;
}

.result-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.result-grid .stat-card {
  --result-card-y: 0px;
  min-width: 0;
  padding: 13px 6px 14px;
  border-radius: 17px 14px 18px 14px;
  box-shadow: 0 5px 0 rgba(222, 185, 171, 0.28), 0 9px 18px var(--shadow);
}

.result-grid .stat-card:nth-child(2) { transform: translateY(-4px); }
.result-grid .stat-label { min-height: 2.7em; display: flex; align-items: flex-end; justify-content: center; font-size: 10px; line-height: 1.35; }
.result-grid .stat-value { overflow: hidden; font-size: clamp(17px, 5.5vw, 24px); text-overflow: ellipsis; white-space: nowrap; }

#screen-result.active .result-grid .stat-card {
  animation: result-card-arrive 0.5s cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

#screen-result.active .result-grid .stat-card:nth-child(1) { animation-delay: 0.26s; }
#screen-result.active .result-grid .stat-card:nth-child(2) { animation-delay: 0.36s; }
#screen-result.active .result-grid .stat-card:nth-child(3) { animation-delay: 0.46s; }

.breakdown-list {
  width: 100%;
  margin: 9px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  list-style: none;
  font-size: 13px;
}

.breakdown-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
  color: var(--text-main);
}

.breakdown-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.breakdown-list li::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--sage-dark); }
.breakdown-list li b { margin-left: auto; color: var(--accent-dark); }

.result-message {
  margin: 1px 0;
  padding: 9px 18px;
  border-radius: 999px;
  color: var(--text-sub);
  background: rgba(255, 253, 249, 0.5);
  font-size: 13px;
  text-align: center;
}

#screen-result.active > .stat-card {
  animation: result-detail-arrive 0.5s 0.54s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#screen-result.active .result-message {
  animation: result-message-arrive 0.48s 0.65s cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

#screen-result.active #home-btn {
  animation: result-button-arrive 0.52s 0.74s cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(95, 73, 65, 0.38);
  backdrop-filter: blur(5px);
  animation: veil-in 0.2s ease both;
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 370px;
  max-height: min(82vh, 680px);
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 28px 22px 27px 22px;
  background:
    radial-gradient(circle at 15px 15px, rgba(245, 213, 142, 0.35) 0 3px, transparent 3.5px) 0 0 / 30px 30px,
    var(--card-solid);
  box-shadow: 0 10px 0 rgba(186, 137, 120, 0.24), 0 24px 55px rgba(66, 44, 37, 0.25);
  animation: modal-pop 0.36s cubic-bezier(0.22, 1.18, 0.45, 1) both;
}

.modal-card::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent-soft);
  transform: translateX(-50%);
}

.modal-title { margin: 0; color: var(--accent-deep); font-size: 18px; font-weight: 900; line-height: 1.45; text-align: center; }

.menu-options {
  width: 100%;
  display: block;
}

.practice-menu-input {
  width: 100%;
  padding: 13px 15px;
  border: 2px solid var(--accent-soft);
  border-radius: 14px 11px 15px 11px;
  color: var(--text-main);
  background: #fffaf6;
  box-shadow: inset 0 2px 5px rgba(116, 76, 64, 0.06);
  font-family: inherit;
  font-size: 15px;
}

.practice-menu-input:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(238, 141, 128, 0.18);
}

.practice-menu-input::placeholder { color: #baa59a; }
.practice-menu-hint { margin: 7px 0 0; }

.menu-option-btn {
  min-height: 48px;
  padding: 11px 7px;
  border: 1px solid rgba(224, 187, 170, 0.65);
  border-radius: 15px 12px 16px 12px;
  color: var(--text-main);
  background: linear-gradient(145deg, #fff8f4, var(--accent-pale));
  box-shadow: 0 4px 0 #ecc9bd;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.menu-option-btn:hover { background: linear-gradient(145deg, #fff9ef, #fde2d9); transform: translateY(-1px) rotate(-0.5deg); }
.menu-option-btn:nth-child(even):hover { transform: translateY(-1px) rotate(0.5deg); }
.menu-option-btn:active { box-shadow: 0 1px 0 #ecc9bd; transform: translateY(3px) scale(0.97); }

.cat-select-list {
  width: 100%;
  padding: 3px 2px 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--accent-soft) transparent;
}

.cat-option {
  position: relative;
  min-width: 0;
  min-height: 138px;
  padding: 9px 6px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: 1px solid rgba(224, 187, 170, 0.7);
  border-radius: 19px 15px 20px 15px;
  color: var(--text-main);
  background: linear-gradient(160deg, #fffaf5, #fae4dc);
  box-shadow: 0 5px 0 rgba(224, 187, 170, 0.58), 0 9px 15px rgba(116, 76, 64, 0.08);
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.cat-option:hover:not(.locked) { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(224, 187, 170, 0.58), 0 12px 18px rgba(116, 76, 64, 0.11); }
.cat-option.selected { border-color: var(--accent); background: linear-gradient(160deg, #fffaf2, #f9d8cf); box-shadow: 0 0 0 3px rgba(238, 141, 128, 0.18) inset, 0 5px 0 #d98379, 0 9px 15px rgba(116, 76, 64, 0.09); }

.cat-option.selected::after {
  content: "いっしょ";
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 3px 6px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-size: 8px;
  font-weight: 900;
}

.cat-option.locked { border-style: dashed; color: var(--text-sub); background: linear-gradient(160deg, #f8f3ef, #eee7e2); box-shadow: 0 4px 0 rgba(200, 184, 174, 0.55); cursor: default; }
.cat-option-thumb { width: 68px; height: 68px; filter: drop-shadow(0 3px 2px rgba(91, 70, 54, 0.12)); }
.cat-option-thumb.silhouette { filter: grayscale(1) brightness(0.75) opacity(0.27); }
.cat-option-name { max-width: 100%; overflow: hidden; color: var(--accent-deep); font-size: 12px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.cat-option-status,
.cat-option-hint { color: var(--text-sub); font-size: 9.5px; line-height: 1.35; text-align: center; }
.cat-option-status { font-weight: 800; }

.arrival-list { width: 100%; display: flex; flex-direction: column; gap: 9px; }

.arrival-item {
  position: relative;
  width: 100%;
  padding: 11px 15px;
  display: flex;
  align-items: center;
  gap: 11px;
  overflow: hidden;
  border: 2px solid rgba(245, 213, 142, 0.78);
  border-radius: 20px 16px 21px 16px;
  background: linear-gradient(120deg, #fffdf3, #fff1dc);
  box-shadow: 0 6px 0 rgba(228, 186, 105, 0.3), 0 12px 22px var(--shadow);
  animation: arrival-celebrate 0.65s cubic-bezier(0.2, 1.45, 0.5, 1) both;
}

.arrival-item::after { content: ""; position: absolute; top: 11px; right: 13px; width: 7px; height: 7px; border-radius: 2px; background: rgba(202, 151, 62, 0.5); box-shadow: 12px 7px 0 -2px rgba(202, 151, 62, 0.35); transform: rotate(45deg); }
.arrival-thumb { width: 52px; height: 52px; flex: 0 0 auto; filter: drop-shadow(0 3px 2px rgba(91, 70, 54, 0.12)); }
.arrival-text { color: var(--accent-deep); font-size: 13px; font-weight: 900; line-height: 1.45; }

.text-edit-input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--accent-soft);
  border-radius: 14px 11px 15px 11px;
  color: var(--text-main);
  background: #fffaf6;
  box-shadow: inset 0 2px 5px rgba(116, 76, 64, 0.06);
  font-family: inherit;
  font-size: 16px;
}

.text-edit-input:focus { border-color: var(--accent); outline: 3px solid rgba(238, 141, 128, 0.18); }
.modal-actions { width: 100%; display: flex; gap: 11px; }
.modal-actions .btn { flex: 1; padding: 12px 0; font-size: 14px; }

@keyframes screen-arrive {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes stage-breathe {
  0%, 100% { border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%; transform: translateY(0); }
  50% { border-radius: 52% 48% 54% 46% / 48% 54% 46% 52%; transform: translateY(-2px); }
}

@keyframes bubble-pop {
  from { opacity: 0; transform: translateY(5px) scale(0.88) rotate(-1deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(238, 141, 128, 0.35); }
  50% { box-shadow: 0 0 0 5px rgba(238, 141, 128, 0); }
}

@keyframes sparkle {
  from { opacity: 0.45; transform: translateY(-50%) scale(0.85) rotate(-8deg); }
  to { opacity: 1; transform: translateY(-50%) scale(1.12) rotate(8deg); }
}

@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes modal-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes arrival-celebrate {
  0% { opacity: 0; transform: translateY(12px) scale(0.9) rotate(-1deg); }
  70% { transform: translateY(-2px) scale(1.02) rotate(0.5deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes plant-sway {
  0%, 100% { transform: rotate(-0.8deg); }
  50% { transform: rotate(1.2deg); }
}

@keyframes result-title-arrive {
  0% { opacity: 0; transform: translateY(-10px) scale(0.82) rotate(-3deg); }
  72% { transform: translateY(2px) scale(1.04) rotate(1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes result-stage-arrive {
  0% { opacity: 0; transform: translateY(22px) scale(0.82); }
  68% { transform: translateY(-5px) scale(1.035); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes result-cat-happy {
  0%, 12%, 100% { transform: translateY(0) rotate(0); }
  5% { transform: translateY(-7px) rotate(-1.5deg); }
  8% { transform: translateY(-3px) rotate(1.5deg); }
}

@keyframes result-card-arrive {
  from { opacity: 0; transform: translateY(calc(var(--result-card-y) + 14px)) scale(0.9) rotate(-1deg); }
  to { opacity: 1; transform: translateY(var(--result-card-y)) scale(1) rotate(0); }
}

#screen-result.active .result-grid .stat-card:nth-child(2) {
  --result-card-y: -4px;
}

@keyframes result-detail-arrive {
  from { opacity: 0; transform: translateY(13px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes result-message-arrive {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes result-button-arrive {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 700px) {
  .desktop-mode-bar {
    width: 100%;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .desktop-widget-title,
  #task-collapse-btn { display: none; }

  .desktop-mode-action {
    padding: 6px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-sub);
    background: rgba(255, 253, 249, 0.78);
    box-shadow: 0 3px 8px rgba(116, 76, 64, 0.08);
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
  }

  .desktop-mode-action:hover { color: var(--accent-dark); background: #fffdfa; }

  .app.compact-mode {
    max-width: 460px;
    min-height: 0;
    height: auto;
    align-self: flex-start;
    margin: 24px;
    padding: 15px 16px 18px;
    border: 1px solid rgba(224, 187, 170, 0.78);
    border-radius: 26px;
    background: rgba(255, 249, 242, 0.9);
    box-shadow: 0 18px 48px rgba(91, 70, 54, 0.18);
    backdrop-filter: blur(12px);
  }

  .app.compact-mode .desktop-mode-bar { justify-content: flex-end; }
  .app.compact-mode .desktop-widget-title {
    display: block;
    margin-right: auto;
    color: var(--accent-deep);
    font-size: 14px;
    font-weight: 900;
  }

  .app.compact-mode #task-collapse-btn { display: inline-block; }
  .app.compact-mode #screen-home { gap: 10px; }
  .app.compact-mode #screen-home .logo,
  .app.compact-mode #screen-home .stat-card,
  .app.compact-mode #screen-home > .hint { display: none; }

  .app.compact-mode .cat-room-stage {
    width: 100%;
    min-height: 250px;
  }

  .app.compact-mode #screen-practice .one-liner-row,
  .app.compact-mode #screen-practice .cat-name-small { display: none; }

  .app.compact-mode #screen-practice .cat-stage-big {
    width: 190px;
    height: 190px;
  }

  .app.compact-mode #screen-practice .stat-card { padding: 10px 16px; }
  .app.compact-mode #screen-practice .stat-value { font-size: 24px; }

  .app.task-collapsed {
    width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  .app.task-collapsed .screen { display: none !important; }

  .app.task-collapsed .task-pill {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 20;
    padding: 11px 17px 11px 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    color: #fffdfa;
    background: linear-gradient(180deg, #ef9a8d, #df7770);
    box-shadow: 0 6px 0 #b95d5b, 0 14px 28px rgba(91, 70, 54, 0.24);
    font-family: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    animation: task-pill-arrive 0.3s cubic-bezier(0.2, 1.25, 0.35, 1) both;
  }

  .task-pill-dot {
    width: 9px;
    height: 9px;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    background: var(--butter);
  }
}

@keyframes task-pill-arrive {
  from { opacity: 0; transform: translateY(8px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 390px) {
  .app { padding-right: 16px; padding-left: 16px; }
  .screen { gap: 13px; }
  .cat-room-stage { min-height: 290px; }
  .cat-stage-big { width: 232px; height: 232px; }
  .stat-card::before { box-shadow: calc(100vw - 68px) 0 0 var(--sage); }
}

@media (max-width: 340px) {
  .app { padding-right: 13px; padding-left: 13px; }
  .logo { font-size: 28px; }
  .cat-room-stage { min-height: 270px; }
  .room-plant { top: 151px; right: 27px; width: 44px; height: 59px; }
  .cat-stage-big { width: 218px; height: 218px; }
  .result-grid { gap: 6px; }
  .result-grid .stat-card { padding-right: 4px; padding-left: 4px; }
  .menu-options,
  .cat-select-list { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 記録画面の吹き出し: スプライトは枠の下端に揃えて描くため、canvasの上側に空白がある。
   その分だけ吹き出しを下げて、ねこの頭のすぐ上に来るようにする（レイアウトは動かさない）。 */
.cat-column .speech-bubble {
  position: relative;
  z-index: 2;
  /* 実際の移動量は js/cat-sprite.js が姿勢に合わせて transform で指定する（固定値にしない） */
}