:root { font-family: "ＭＳ Ｐゴシック", "MS PGothic", "Noto Sans CJK JP", sans-serif; color: #000; background: #fffdf5 url('/paw-tile.svg') repeat; }
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 8px; font-size: 16px; line-height: 1.4; }
main { max-width: 720px; margin: 0 auto; }
a { color: #00e; text-decoration: underline; }
a:visited { color: #551a8b; }
header { text-align: center; border-bottom: 2px groove #ddd; padding: 8px 0 12px; }
h1 { font-size: 26px; margin: 8px 0; color: #800000; }
.tagline { margin: 6px 0; }
nav { margin-top: 10px; }
.write-area { border: 2px groove #ddd; background: #efefef; margin: 12px 0; padding: 2px; }
.form-heading { text-align: center; font-size: 16px; background: #d2d9df; border-bottom: 1px solid #999; margin: 0; padding: 2px; }
form { width: min(100%, 760px); margin: 10px auto; padding: 0 8px; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
input, textarea, button { font: 16px "MS PGothic", "Noto Sans CJK JP", sans-serif; border-radius: 0; color: #000; }
input, textarea { border: 2px inset #ccc; background: #fff; padding: 2px 4px; }
input { width: 220px; max-width: 65%; }
.message-label { margin-top: 6px; }
.message-area { position: relative; }
/* 猫の腹を上辺に合わせ、垂れた前足としっぽだけを入力欄へ重ねる。 */
.cat-stage { position: relative; width: min(440px, 94%); aspect-ratio: 3; margin: -10px auto 0; margin-bottom: calc(min(440px, 88vw) * -.10); z-index: 2; pointer-events: none; }
.cat { width: 100%; height: 100%; background: url('/cat-sleep.png') center / 100% 100% no-repeat; transform-origin: center bottom; }
.phase-sleep .cat, .phase-judging .cat { animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.025); } }
.cat:has(img) { background-image: none; }
.cat img { display: block; width: 100%; height: 100%; cursor: grab; }
.cat-pet, .cat-pet:active { position: absolute; inset: 20% 5% 18%; padding: 0; border: 0; background: transparent; cursor: grab; pointer-events: auto; touch-action: manipulation; }
.cat-pet:active { cursor: grabbing; }
.cat-pet:disabled { pointer-events: none; }
.phase-sleep .is-petted .cat { animation: pet-cat .9s ease-in-out; }
@keyframes pet-cat { 0%, 100% { transform: scaleY(1); } 30%, 70% { transform: scaleY(.97) rotate(-.5deg); } 50% { transform: scaleY(1.02); } }
.paper-shell { background: #fff; border: 2px inset #ccc; }
textarea { width: 100%; display: block; padding-top: 24px; resize: vertical; min-height: 160px; position: relative; z-index: 1; line-height: 1.4; border: 0; }
.submit-row { margin: 6px 0; }
.submit-row span { font-size: 13px; }
button { padding: 2px 8px; border: 2px outset #ddd; background: #eee; cursor: pointer; }
button:active { border-style: inset; }
button:disabled { color: #666; cursor: wait; }
:focus-visible { outline: 2px solid #00e; outline-offset: 2px; }
.form-note { font-size: 13px; margin: 6px 0 0; }
.error { color: #c00; margin: 8px 0; }
#posts { border: 2px groove #ddd; padding: 4px 8px 12px; background: #efefef; }
.board-links { border-bottom: 1px solid #aaa; padding-bottom: 4px; }
#posts h2 { color: #c00; font-size: 22px; margin: 16px 0; }
.post { margin: 18px 0 26px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 0 6px; }
.delete-post { font-size: 12px; padding: 0 4px; }
.post-meta strong { color: #008000; }
time { font-size: 14px; }
.post p { margin: 4px 0 0 40px; white-space: pre-wrap; overflow-wrap: anywhere; }
.empty { margin: 20px 0; }
#about { border-top: 2px groove #ddd; margin-top: 16px; padding: 10px; font-size: 14px; line-height: 1.6; }
#about h2 { font-size: 14px; margin: 0 0 4px; }
#about p { margin: 4px 0; }
footer { text-align: right; border-top: 2px groove #ddd; margin-top: 12px; padding: 6px 0; font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 560px) { main { width: 100%; } body { font-size: 14px; } h1 { font-size: 22px; } form { padding: 0 4px; } .post p { margin-left: 20px; } #posts h2 { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }
/* 閉鎖中は睡眠画像を隠し、起床後の猫をその場に残す。 */
.closed-message { text-align: center; color: #8b3024; font-weight: bold; }
.is-closed .cat { visibility: hidden; animation: none; }
.cat-departure { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cat-departure { display: none; } }