/* =========================================================
   Pooのくそさいと  —  紙とテープ
   ========================================================= */

:root {
    --paper:   #f4efe3;
    --paper-2: #eae2d2;
    --card:    #fbf8f0;
    --note:    #f7e9a6;
    --ink:     #2f2823;
    --ink-2:   #6b5f52;
    --rule:    #d9cfbc;
    --red:     #dc6969;
    --blue:    #3f5d9e;
    --tape:    rgba(212,184,120,0.55);
    --shadow:  0 10px 22px rgba(70,55,35,0.16);
}

/* よる ― 月あかりの 夜空 */
body.dark-mode {
    --paper:   #070b1c;
    --paper-2: #0e1530;
    --card:    #131c3c;
    --note:    #222d5c;
    --ink:     #e3ebff;
    --ink-2:   #98a6d4;
    --rule:    #2a3566;
    --red:     #ff96a8;
    --blue:    #8fb5ff;
    --tape:    rgba(150,175,235,0.22);
    --shadow:  0 12px 30px rgba(0,0,0,0.65);
}
/* 左うえに 月、右したに 沈んだ 雲。
   background-attachment:fixed は スマホで あてに ならないので
   画面いっぱいの うすい膜を いちまい 敷いて すませる。 */
body.dark-mode::before {
    content: '';
    position: fixed; inset: 0; z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(62vw 46vw at 12% -5%, rgba(150,192,255,0.22), rgba(0,0,0,0) 64%),
        radial-gradient(32vw 25vw at 12% -5%, rgba(198,224,255,0.20), rgba(0,0,0,0) 60%),
        radial-gradient(13vw 11vw at 12% -5%, rgba(232,244,255,0.22), rgba(0,0,0,0) 62%),
        radial-gradient(96vw 62vw at 86% 112%, rgba(46,68,142,0.24), rgba(0,0,0,0) 70%);
    /* 月が ゆっくり 息をする */
    animation: moon-breathe 23s ease-in-out infinite;
}
@keyframes moon-breathe {
    0%, 100% { opacity: 0.8; }
    50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body.dark-mode::before { animation: none; opacity: 1; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
    /* 全体の 文字を すこしだけ 大きく（16px -> 17px） */
    font-size: 106.25%;
    scroll-behavior: smooth; scroll-padding-top: 64px;
}

body {
    font-family: 'Zen Kurenaido', 'Hiragino Sans', sans-serif;
    background-color: var(--paper);
    color: var(--ink);
    line-height: 1.9;
    overflow-x: hidden;
    transition: background-color 0.4s, color 0.4s;
}

::selection { background: var(--red); color: #fff; }

a { color: var(--blue); }

/* 紙のざらつき */
.grain {
    position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: 0.5;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.4'/></svg>");
}
body.dark-mode .grain { mix-blend-mode: overlay; opacity: 0.22; }

/* ローダー */
.loader {
    position: fixed; inset: 0; z-index: 9999; background: var(--paper);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.loader.loaded { opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0.6s; }
.loader-text { font-family: 'Yomogi', cursive; font-size: 1rem; color: var(--ink-2); letter-spacing: 0.12em; }
.loader-text i { display: inline-block; font-style: normal; animation: load-bob 1.7s infinite ease-in-out; }
.loader-text i:nth-child(1) { animation-delay: 0.00s; }
.loader-text i:nth-child(2) { animation-delay: 0.08s; }
.loader-text i:nth-child(3) { animation-delay: 0.16s; }
.loader-text i:nth-child(4) { animation-delay: 0.24s; }
.loader-text i:nth-child(5) { animation-delay: 0.32s; }
.loader-text i:nth-child(6) { animation-delay: 0.40s; }
.loader-text i:nth-child(7) { animation-delay: 0.48s; }
@keyframes load-bob {
    0%, 55%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.5; }
    16%           { transform: translateY(-8px) rotate(-7deg); opacity: 1; }
    32%           { transform: translateY(0) rotate(2deg); opacity: 0.85; }
}
.loader-dots { display: flex; gap: 7px; }
.loader-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: hop 1.1s infinite ease-in-out; }
.loader-dots i:nth-child(2) { animation-delay: 0.15s; }
.loader-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hop { 0%, 70%, 100% { transform: translateY(0); opacity: 0.45; } 35% { transform: translateY(-7px); opacity: 1; } }

/* 台紙 */
/* 文字が 大きくなったぶん、一行の長さが 変わらないように 幅も すこし */
.page { max-width: 744px; margin: 0 auto; padding: 46px 20px 90px; position: relative; }

/* 見出し */
.masthead { position: relative; margin-bottom: 52px; padding-right: 76px; }
.logo {
    font-family: 'Yomogi', cursive; font-size: clamp(2rem, 8vw, 2.9rem);
    font-weight: 400; line-height: 1.25; letter-spacing: 0.01em;
}
.logo-em {
    color: var(--red); position: relative; padding-bottom: 6px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='12'><path d='M2 8 Q 50 2 100 7 T 198 6' stroke='%23dc6969' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat; background-position: left bottom; background-size: 100% 10px;
}
.sub { font-family: 'Yomogi', cursive; color: var(--ink-2); font-size: 0.95rem; margin-top: 10px; }

.paper-nav { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.paper-nav a {
    font-family: 'Yomogi', cursive; font-size: 0.95rem; color: var(--ink); text-decoration: none;
    border-bottom: 2px dotted var(--rule); padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s, transform 0.2s;
    display: inline-block;
}
.paper-nav a:hover { color: var(--red); border-bottom-color: var(--red); transform: rotate(-2deg); }

/* テーマ切り替え（スタンプ） */
.stamp {
    position: absolute; top: 2px; right: 0;
    width: 58px; height: 58px; border-radius: 50%;
    border: 2px dashed var(--red); background: transparent; color: var(--red);
    font-family: 'Yomogi', cursive; font-size: 0.85rem; cursor: pointer;
    transform: rotate(-11deg); transition: transform 0.25s, background 0.25s;
}
.stamp:hover { transform: rotate(4deg) scale(1.06); background: rgba(220,105,105,0.10); }

/* 貼りつけた紙 */
.sheet {
    position: relative; background: var(--card); border: 1px solid var(--rule);
    padding: 34px 28px 30px; margin-bottom: 46px; box-shadow: var(--shadow);
}
.sheet:nth-of-type(odd)  { transform: rotate(-0.55deg); }
.sheet:nth-of-type(even) { transform: rotate(0.6deg); }

/* マスキングテープ */
.tape {
    position: absolute; width: 118px; height: 30px; background: var(--tape);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 3px, transparent 3px 7px);
}
.tape-tl { top: -14px; left: 22px; transform: rotate(-5deg); }
.tape-tc { top: -14px; left: 50%; margin-left: -59px; transform: rotate(2.5deg); }
.tape-br { bottom: -14px; right: 26px; transform: rotate(3.5deg); }

/* じぶん */
.sheet-me { display: flex; gap: 28px; align-items: flex-start; }

.polaroid { flex-shrink: 0; transform: rotate(-3deg); transition: transform 0.35s; }
.polaroid:hover { transform: rotate(0deg) scale(1.02); }
.polaroid-img {
    position: relative; width: 168px; padding: 11px 11px 0;
    background: #fff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 6px 14px rgba(70,55,35,0.2);
}
body.dark-mode .polaroid-img { background: #e9e2d4; }
.polaroid-img img, .polaroid-ph {
    display: block; width: 146px; height: 146px; object-fit: cover; background: #ddd6c6;
}
.polaroid-ph {
    display: flex; align-items: center; justify-content: center;
    font-family: 'Yomogi', cursive; font-size: 2.4rem; color: #9a9080;
}
.polaroid-cap {
    font-family: 'Yomogi', cursive; font-size: 0.82rem; color: #4a4038;
    background: #fff; padding: 9px 11px 12px; margin: 0; min-height: 3.2em; text-align: center; line-height: 1.5;
}
body.dark-mode .polaroid-cap { background: #e9e2d4; }

.status-dot {
    position: absolute; right: 4px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%;
    border: 3px solid #fff; background: #9aa0a6;
}
body.dark-mode .status-dot { border-color: #e9e2d4; }
.status-dot.online  { background: #4f9d69; }
.status-dot.idle    { background: #d8a13c; }
.status-dot.dnd     { background: var(--red); }
.status-dot.offline { background: #9aa0a6; }

/* 罫線のメモ */
.ruled { flex: 1; min-width: 0; }
.hand-title { font-family: 'Yomogi', cursive; font-size: 1.5rem; font-weight: 400; margin-bottom: 14px; }
.hand-title.small { font-size: 1.2rem; margin-bottom: 18px; }
.ruled p { font-size: 0.95rem; }

.checklist { list-style: none; margin: 18px 0 6px; }
.checklist li { position: relative; padding-left: 26px; font-size: 0.92rem; }
.checklist li::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    font-family: 'Yomogi', cursive; color: var(--red); font-size: 1rem;
}
.scribble {
    font-family: 'Caveat', 'Yomogi', cursive; font-size: 1.05rem; color: var(--ink-2);
    transform: rotate(-2deg); display: inline-block; margin-top: 10px;
}
.scribble.right { display: block; text-align: right; transform: rotate(2deg); }

/* 付箋（Discord のいま） */
.sticky {
    position: relative; background: var(--note); color: var(--ink);
    padding: 26px 26px 24px; margin-bottom: 46px;
    transform: rotate(1.3deg);
    box-shadow: 4px 8px 16px rgba(70,55,35,0.2);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.pin {
    position: absolute; top: -9px; left: 50%; margin-left: -9px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--red); box-shadow: 0 3px 5px rgba(0,0,0,0.25), inset 0 -3px 4px rgba(0,0,0,0.18);
}
.sticky-title { font-family: 'Yomogi', cursive; font-size: 1.25rem; font-weight: 400; margin-bottom: 8px; }
.status-line { font-family: 'Yomogi', cursive; font-size: 0.95rem; display: flex; align-items: center; gap: 9px; }
.status-line .dot { width: 11px; height: 11px; border-radius: 50%; background: #9aa0a6; flex-shrink: 0; }
.status-line .dot.online { background: #4f9d69; }
.status-line .dot.idle { background: #d8a13c; }
.status-line .dot.dnd { background: var(--red); }

/* 活動のうえの 小さな見出し */
.now-state {
    margin: 18px 0 0 4px;
    font-family: 'Yomogi', cursive; font-size: 0.78rem;
    color: var(--ink-2); letter-spacing: 0.05em;
}

.acts {
    margin-top: 10px; display: flex; flex-direction: column; gap: 14px;
    position: relative;
    transition: height 0.44s cubic-bezier(0.22,1,0.36,1);
}
.acts.acts-moving { overflow: hidden; }

.act {
    display: flex; gap: 13px; align-items: flex-start;
    transition: opacity 0.34s, transform 0.36s cubic-bezier(0.22,1,0.36,1);
}
/* 入ってくる */
.act.act-in { opacity: 0; transform: translateY(12px) scale(0.985); }
/* 出ていく — 浮かせて まわりを すぐ詰める */
.act.act-out {
    position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
    opacity: 0; transform: translateY(-9px) scale(0.985);
}
/* あまったぶん */
.act-extra { display: none; }
.acts.open .act-extra { display: flex; }
.act-img {
    width: 48px; height: 48px; flex-shrink: 0; object-fit: cover;
    background: #fff; padding: 3px; border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 3px 6px rgba(70,55,35,0.2); transform: rotate(-2deg);
}
.act-body { min-width: 0; flex: 1; }
.act-label { font-family: 'Yomogi', cursive; font-size: 0.76rem; color: var(--ink-2); }
.act-name { font-size: 0.92rem; font-weight: 700; line-height: 1.45; word-break: break-word; }
.act-detail { font-size: 0.8rem; color: var(--ink-2); line-height: 1.45; }
.act-noimg { padding-left: 2px; }

/* ほかに ◯ こ */
.acts-toggle {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 14px;
    background: var(--card); border: 1px dashed var(--rule); border-radius: 999px;
    font-family: 'Yomogi', cursive; font-size: 0.76rem; color: var(--ink-2);
    cursor: pointer; transform: rotate(-0.9deg);
    box-shadow: 0 2px 5px rgba(70,55,35,0.12);
    transition: transform 0.25s, background 0.25s, color 0.25s;
}
.acts-toggle:hover {
    transform: rotate(0deg); background: var(--paper-2); color: var(--ink);
}
.acts-toggle i { font-size: 0.64rem; transition: transform 0.3s; }
.acts-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.act-none {
    font-family: 'Yomogi', cursive; font-size: 0.9rem; color: var(--ink-2);
    transition: opacity 0.34s;
}
.act-none.act-in { opacity: 0; }

.bar { margin-top: 8px; }
.bar-bg { height: 3px; background: rgba(0,0,0,0.16); position: relative; }
body.dark-mode .bar-bg { background: rgba(255,255,255,0.18); }
.bar-fill { height: 3px; width: 0%; background: var(--red); transition: width 1s linear; }
.bar-time { display: flex; justify-content: space-between; font-family: 'Caveat', cursive; font-size: 0.85rem; color: var(--ink-2); margin-top: 2px; }

/* シール */
.stickers { display: flex; flex-wrap: wrap; gap: 11px; }
.sticker {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 15px; border: 2px solid var(--ink); border-radius: 60% 40% 55% 45% / 50%;
    background: var(--paper-2); font-family: 'Yomogi', cursive; font-size: 0.85rem;
    transform: rotate(var(--r, 0deg)); transition: transform 0.28s, background 0.28s, color 0.28s;
    cursor: default;
}
.sticker i { font-size: 0.95rem; color: var(--red); transition: color 0.28s; }
.sticker:hover { transform: rotate(0deg) translateY(-3px); background: var(--red); color: #fff; border-color: var(--red); }
.sticker:hover i { color: #fff; }

/* りんく（切り抜き） */
.cuts { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cuts a {
    display: flex; align-items: baseline; gap: 9px; text-decoration: none; color: var(--ink);
    background: var(--paper-2); border: 1px dashed var(--rule); padding: 11px 14px;
    transform: rotate(-0.7deg); transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.cuts li:nth-child(even) a { transform: rotate(0.8deg); }
.cuts a:hover { transform: rotate(0deg) translateY(-3px); box-shadow: var(--shadow); border-color: var(--red); border-style: solid; }
.cuts i { color: var(--red); width: 18px; text-align: center; flex-shrink: 0; }
.cuts b { font-family: 'Yomogi', cursive; font-weight: 400; font-size: 0.95rem; }
.cuts em { font-family: 'Caveat', cursive; font-style: normal; font-size: 0.95rem; color: var(--ink-2); margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 奥付 */
.colophon { text-align: center; margin-top: 60px; padding-top: 26px; border-top: 1px dashed var(--rule); color: var(--ink-2); font-size: 0.82rem; }
.sign { font-family: 'Caveat', cursive; font-size: 2rem; color: var(--red); transform: rotate(-5deg); display: inline-block; margin-bottom: 6px; }

/* =========================================================
   こまかい うごき
   ========================================================= */

/* 付箋のピンが たまに ゆれる */
.sticky.reveal.active .pin { animation: pin-wobble 15s 4s ease-in-out infinite; }
@keyframes pin-wobble {
    0%, 87%, 100% { transform: rotate(0deg); }
    89% { transform: rotate(-10deg); }
    92% { transform: rotate(7deg); }
    95% { transform: rotate(-3deg); }
}

/* クリップも たまに ゆれる */
.slip.reveal.active .clip { animation: clip-wobble 19s 8s ease-in-out infinite; }
@keyframes clip-wobble {
    0%, 90%, 100% { transform: rotate(-9deg); }
    92% { transform: rotate(-18deg); }
    95% { transform: rotate(-3deg); }
    97% { transform: rotate(-12deg); }
}

/* レシートのハンコが ポンと押される */
.receipt.reveal.active .r-stamp {
    animation: stamp-in 0.5s 0.6s backwards cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes stamp-in {
    0%   { opacity: 0;    transform: rotate(-34deg) scale(2.2); }
    55%  { opacity: 0.9;  }
    100% { opacity: 0.65; transform: rotate(-16deg) scale(1); }
}

/* バーコードが 左から 読み取られる */
.spec.reveal.active .barcode {
    animation: barcode-in 0.95s 0.4s backwards cubic-bezier(0.22,1,0.36,1);
}
@keyframes barcode-in { from { clip-path: inset(0 100% 0 0); } }

/* しつもんの ＋ が ひらくとき はねる */
.faq summary::after { transition: color 0.25s, transform 0.25s; }
.faq summary:hover::after { color: var(--red); transform: scale(1.25); }
.faq details[open] summary::after {
    color: var(--red);
    animation: faq-pop 0.36s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes faq-pop { from { transform: scale(0.25) rotate(-100deg); } }

/* りんくの しるしが ホバーで はねる */
.cuts a:hover i { animation: icon-hop 0.46s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes icon-hop {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    40%      { transform: translateY(-6px) rotate(-10deg); }
}

/* うえへ */
.totop {
    position: fixed; right: 18px; bottom: 18px; z-index: 800;
    font-family: 'Yomogi', cursive; font-size: 0.82rem; text-decoration: none;
    color: var(--ink); background: var(--card); border: 1px solid var(--rule);
    padding: 8px 13px; box-shadow: var(--shadow); transform: rotate(-3deg);
    opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}
.totop.show { opacity: 1; visibility: visible; }
.totop:hover { transform: rotate(0deg) translateY(-3px); color: var(--red); border-color: var(--red); }

/* スマホの 丸いいどう */
.dots { display: none; }

@media (max-width: 720px) {
    .totop { display: none; }

    .dots {
        display: block;
        position: fixed; right: 16px; bottom: 16px; z-index: 850;
        opacity: 0; visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }
    .dots.show { opacity: 1; visibility: visible; }

    .dots-toggle {
        position: relative; z-index: 2;
        width: 52px; height: 52px; border-radius: 50%; padding: 0;
        background: var(--card); border: 1px dashed var(--rule); color: var(--red);
        font-size: 1rem; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 5px 12px rgba(70,55,35,0.26);
        transform: rotate(-5deg);
        transition: transform 0.28s, background 0.28s, border-color 0.28s, border-style 0.28s;
    }
    .dots.open .dots-toggle {
        background: var(--note); border-style: solid; border-color: var(--red);
        transform: rotate(0deg) scale(1.04);
    }
    .dots-toggle i { transition: transform 0.32s cubic-bezier(0.34,1.4,0.64,1); }
    .dots.open .dots-toggle i { transform: rotate(-24deg) scale(1.1); }

    .dots-list {
        list-style: none;
        position: absolute; right: 3px; bottom: 60px;
        /* 上から ページの 順に ならべる（じぶん → … → うえ） */
        display: flex; flex-direction: column; align-items: center; gap: 9px;
        pointer-events: none;
    }
    .dots.open .dots-list { pointer-events: auto; }

    .dots-list a {
        display: flex; align-items: center; justify-content: center; text-align: center;
        width: 46px; height: 46px; border-radius: 50%;
        background: var(--card); border: 1px solid var(--rule); color: var(--ink);
        font-family: 'Yomogi', cursive; font-size: 0.55rem; line-height: 1.25;
        text-decoration: none;
        box-shadow: 0 3px 9px rgba(70,55,35,0.2);
        opacity: 0;
        transition: opacity 0.26s, transform 0.3s cubic-bezier(0.34,1.45,0.64,1), border-color 0.2s, background 0.2s;
    }
    .dots-list a:active { background: var(--note); border-color: var(--red); }

    /* 手で ならべたように 少しずつ ずらす */
    .dots-list li:nth-child(odd)  a { transform: translateY(14px) scale(0.6) rotate(-4deg); }
    .dots-list li:nth-child(even) a { transform: translateY(14px) scale(0.6) rotate(3deg); }
    .dots.open .dots-list li:nth-child(odd)  a { opacity: 1; transform: translateY(0) scale(1) rotate(-4deg); }
    .dots.open .dots-list li:nth-child(even) a { opacity: 1; transform: translateY(0) scale(1) rotate(3deg); }

    /* ボタンに 近い 下のほうから じゅんばんに 出る */
    .dots.open .dots-list li:nth-child(7) a { transition-delay: 0.00s; }
    .dots.open .dots-list li:nth-child(6) a { transition-delay: 0.04s; }
    .dots.open .dots-list li:nth-child(5) a { transition-delay: 0.08s; }
    .dots.open .dots-list li:nth-child(4) a { transition-delay: 0.12s; }
    .dots.open .dots-list li:nth-child(3) a { transition-delay: 0.16s; }
    .dots.open .dots-list li:nth-child(2) a { transition-delay: 0.20s; }
    .dots.open .dots-list li:nth-child(1) a { transition-delay: 0.24s; }
}

/* 出てくる動き */
.reveal { opacity: 0; transform: translateY(16px) rotate(-1.4deg); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.active { opacity: 1; }
.sheet.reveal.active:nth-of-type(odd)  { transform: translateY(0) rotate(-0.55deg); }
.sheet.reveal.active:nth-of-type(even) { transform: translateY(0) rotate(0.6deg); }
.sticky.reveal.active { transform: translateY(0) rotate(1.3deg); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* せまい画面 */
@media (max-width: 640px) {
    .page { padding: 34px 16px 80px; }
    .masthead { padding-right: 66px; margin-bottom: 40px; }
    .stamp { width: 50px; height: 50px; font-size: 0.75rem; }
    .sheet { padding: 28px 18px 24px; margin-bottom: 38px; }
    .sheet-me { flex-direction: column; align-items: center; gap: 22px; }
    .polaroid { align-self: center; }
    .ruled { width: 100%; }
    .cuts { grid-template-columns: 1fr; }
    .sticky { padding: 22px 18px 20px; }
    .scribble.right { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    .reveal { opacity: 1; }
}

/* =========================================================
   追加ぶん — うごきと あたらしい紙
   ========================================================= */

/* 見出しの下線を手で引く */
.logo-em { background-image: none; padding-bottom: 10px; }
.logo-em .ul { position: absolute; left: 0; bottom: 0; width: 100%; height: 12px; overflow: visible; }
.logo-em .ul path {
    fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round;
    stroke-dasharray: 240; stroke-dashoffset: 240;
    animation: draw 1s 0.45s cubic-bezier(0.65,0,0.35,1) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* 見出しまわりが すっと出る */
.masthead-main { animation: riseIn 0.7s 0.05s backwards ease-out; }
.masthead .paper-nav { animation: riseIn 0.7s 0.22s backwards ease-out; }
.masthead .stamp { animation: riseIn 0.7s 0.36s backwards ease-out; }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } }

/* テープが貼られる */
.reveal.active .tape { animation: tapeIn 0.5s 0.12s backwards cubic-bezier(0.22,1,0.36,1); }
@keyframes tapeIn { from { opacity: 0; transform: scale(0.35) rotate(-16deg); } }

/* チェックが順に入る */
.checklist li::before { animation: pop 0.42s backwards cubic-bezier(0.34,1.56,0.64,1); }
.checklist li:nth-child(1)::before { animation-delay: 0.30s; }
.checklist li:nth-child(2)::before { animation-delay: 0.45s; }
.checklist li:nth-child(3)::before { animation-delay: 0.60s; }
.checklist li:nth-child(4)::before { animation-delay: 0.75s; }
@keyframes pop { from { opacity: 0; transform: scale(0.2) rotate(-30deg); } }

/* 付箋が そよぐ */
.sticky.reveal.active { animation: sway 9s 1.2s ease-in-out infinite; }
@keyframes sway {
    0%, 100% { transform: rotate(1.3deg) translateY(0); }
    50%      { transform: rotate(0.5deg) translateY(-4px); }
}

/* シールが ふるえる */
.sticker:hover { animation: wiggle 0.45s ease; }
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg) translateY(-3px); }
    30%      { transform: rotate(-6deg) translateY(-3px); }
    70%      { transform: rotate(6deg) translateY(-3px); }
}

/* きょうの ひとこと（短冊） */
.slip {
    position: relative; max-width: 540px; margin: 0 0 46px;
    background: var(--card); border: 1px solid var(--rule); border-left: 5px solid var(--red);
    padding: 20px 24px 20px 26px; box-shadow: var(--shadow); transform: rotate(-0.8deg);
}
.clip {
    position: absolute; top: -13px; left: 32px; width: 15px; height: 34px;
    border: 3px solid #b6aea0; border-radius: 9px; background: transparent; transform: rotate(-9deg);
}
body.dark-mode .clip { border-color: #5b6a99; }
.slip-label { font-family: 'Yomogi', cursive; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.14em; color: var(--ink-2); }
.slip-text { font-family: 'Yomogi', cursive; font-size: 1.05rem; line-height: 1.7; margin-top: 4px; min-height: 1.7em; }
.slip-text::after {
    content: ''; display: inline-block; width: 8px; height: 1em; vertical-align: -2px;
    background: var(--red); margin-left: 3px; animation: blink 1s steps(2) infinite;
}
.slip-text.done::after { display: none; }
@keyframes blink { 50% { opacity: 0; } }

/* よくある しつもん */
.faq details { border-bottom: 1px dashed var(--rule); }
.faq details:last-child { border-bottom: none; }
.faq summary {
    list-style: none; cursor: pointer; position: relative;
    padding: 13px 28px 13px 28px; font-family: 'Yomogi', cursive; font-size: 0.95rem;
    transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
    content: 'Q'; position: absolute; left: 2px; top: 11px;
    color: var(--red); font-family: 'Caveat', cursive; font-size: 1.2rem;
}
.faq summary::after { content: '＋'; position: absolute; right: 0; top: 13px; color: var(--ink-2); font-size: 0.85rem; }
.faq details[open] summary::after { content: '−'; }
.faq summary:hover { color: var(--red); }
.faq .a {
    position: relative; padding: 0 4px 16px 28px; font-size: 0.9rem; color: var(--ink-2);
    transform-origin: top center; animation: flap 0.34s cubic-bezier(0.22,1,0.36,1);
}
.faq .a::before {
    content: 'A'; position: absolute; left: 2px; top: -3px;
    color: var(--ink-2); font-family: 'Caveat', cursive; font-size: 1.2rem;
}
@keyframes flap { from { opacity: 0; transform: rotateX(-70deg); } }

/* あしあと */
/* =========================================================
   ページが ないとき
   ========================================================= */
.nf-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100svh; }
.nf-paper {
    position: relative; width: 100%; max-width: 430px;
    transform: rotate(-1.1deg);
    filter: drop-shadow(0 12px 22px rgba(70,55,35,0.2));
}
.nf-inner {
    --zig: 13px;
    background: var(--card);
    padding: 44px 30px 46px; text-align: center;
    -webkit-mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zig) var(--zig) repeat-x,
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--zig)) no-repeat;
    mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zig) var(--zig) repeat-x,
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--zig)) no-repeat;
}
.nf-num {
    position: relative; display: inline-block;
    font-family: 'Caveat', cursive; font-size: 4.6rem; line-height: 1;
    color: var(--red); transform: rotate(-2deg); margin-bottom: 14px;
}
.nf-scratch { position: absolute; left: -6%; bottom: 14%; width: 112%; height: 16px; overflow: visible; }
.nf-scratch path {
    fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; opacity: 0.55;
    stroke-dasharray: 260; stroke-dashoffset: 260;
    animation: nf-draw 1s 0.45s forwards cubic-bezier(0.22,1,0.36,1);
}
@keyframes nf-draw { to { stroke-dashoffset: 0; } }
.nf-title { font-family: 'Yomogi', cursive; font-size: 1.32rem; font-weight: 400; margin-bottom: 14px; }
.nf-lead { font-size: 0.9rem; color: var(--ink-2); line-height: 1.95; }
.nf-back {
    display: inline-flex; align-items: center; gap: 9px;
    margin-top: 26px; padding: 9px 20px;
    background: var(--paper-2); border: 1px dashed var(--rule); border-radius: 999px;
    font-family: 'Yomogi', cursive; font-size: 0.86rem; color: var(--ink);
    text-decoration: none; transform: rotate(-0.8deg);
    transition: transform 0.25s, background 0.25s;
}
.nf-back:hover { transform: rotate(0deg); background: var(--note); }
.nf-back i { font-size: 0.76rem; color: var(--red); }
.nf-sign {
    font-family: 'Caveat', cursive; font-size: 1.7rem; color: var(--red);
    transform: rotate(-5deg); margin-top: 44px; opacity: 0.8;
}
@media (max-width: 420px) {
    .nf-num { font-size: 3.6rem; }
    .nf-title { font-size: 1.1rem; }
}

@media (max-width: 640px) {
    .slip { max-width: 100%; margin-bottom: 38px; }
    .faq summary { font-size: 0.9rem; }
}

/* =========================================================
   そよ風 — 紙が ときどき ゆれる
   ========================================================= */

/* 写真：7.5 秒に 1 回くらい ふわっと */
.polaroid {
    transform-origin: 50% 8%;
    animation: breeze-photo 7.5s 1.6s ease-in-out infinite;
}
.polaroid:hover {
    transform: rotate(0deg) scale(1.03) !important;
    animation-play-state: paused;
}
@keyframes breeze-photo {
    0%, 56%, 100% { transform: rotate(-3deg) translateY(0); }
    62%  { transform: rotate(-5.4deg) translateY(-3px); }
    69%  { transform: rotate(-1.1deg) translateY(1px); }
    76%  { transform: rotate(-4.2deg) translateY(-1px); }
    84%  { transform: rotate(-2.3deg) translateY(0); }
    92%  { transform: rotate(-3.4deg) translateY(0); }
}

/* 短冊：位置が戻っていなかったのを直して、別の間隔で ゆらす */
.slip.reveal.active { transform: translateY(0) rotate(-0.8deg); }
.slip {
    transform-origin: 20% 0%;
    animation: breeze-slip 11s 4s ease-in-out infinite;
}
@keyframes breeze-slip {
    0%, 64%, 100% { transform: rotate(-0.8deg) translateY(0); }
    70%  { transform: rotate(-2.1deg) translateY(-2px); }
    78%  { transform: rotate(0.4deg) translateY(1px); }
    86%  { transform: rotate(-1.3deg) translateY(0); }
    93%  { transform: rotate(-0.5deg) translateY(0); }
}

/* りんくの紙も ときどき 一枚だけ めくれる */
.cuts li:nth-child(3) a { animation: breeze-cut 13s 6s ease-in-out infinite; }
.cuts li:nth-child(6) a { animation: breeze-cut 13s 10s ease-in-out infinite; }
@keyframes breeze-cut {
    0%, 88%, 100% { transform: rotate(-0.7deg) translateY(0); }
    92%  { transform: rotate(-1.8deg) translateY(-2px); }
    96%  { transform: rotate(0.2deg) translateY(0); }
}
.cuts a:hover { animation-play-state: paused; }

/* =========================================================
   風のすじ — 紙が ゆれるのに合わせて うすく 流れる
   ========================================================= */

:root       { --wind: rgba(96, 83, 66, 0.30); }
body.dark-mode { --wind: rgba(236, 227, 211, 0.20); }

.sheet-me::before,
.slip::before {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(90deg, transparent 0%, var(--wind) 34%, var(--wind) 64%, transparent 100%),
        linear-gradient(90deg, transparent 0%, var(--wind) 30%, var(--wind) 56%, transparent 100%),
        linear-gradient(90deg, transparent 0%, var(--wind) 38%, var(--wind) 60%, transparent 100%);
}

/* 写真のあたりを 7.5 秒ごとに ひとなで */
.sheet-me::before {
    left: -8%;
    top: 12%;
    width: 64%;
    height: 48%;
    background-size: 100% 1.5px, 62% 1.5px, 78% 1.5px;
    background-position: 0 20%, 24% 52%, 10% 82%;
    animation: wind-photo 7.5s 1.6s ease-in-out infinite;
}
@keyframes wind-photo {
    0%, 50%  { opacity: 0; transform: translate3d(-28%, 0, 0) skewX(-12deg); }
    57%      { opacity: 1; }
    68%      { opacity: 0.75; }
    78%      { opacity: 0; transform: translate3d(128%, -7px, 0) skewX(-12deg); }
    100%     { opacity: 0; transform: translate3d(-28%, 0, 0) skewX(-12deg); }
}

/* 短冊のほうは 11 秒ごと、すじも細め */
.slip::before {
    left: -6%;
    top: 20%;
    width: 72%;
    height: 56%;
    background-size: 86% 1.2px, 58% 1.2px, 70% 1.2px;
    background-position: 0 24%, 20% 60%, 8% 88%;
    animation: wind-slip 11s 4s ease-in-out infinite;
}
@keyframes wind-slip {
    0%, 58%  { opacity: 0; transform: translate3d(-26%, 0, 0) skewX(-10deg); }
    64%      { opacity: 0.9; }
    74%      { opacity: 0.6; }
    84%      { opacity: 0; transform: translate3d(126%, -5px, 0) skewX(-10deg); }
    100%     { opacity: 0; transform: translate3d(-26%, 0, 0) skewX(-10deg); }
}

/* 触っているあいだは 風も止める */
.sheet-me:hover::before, .slip:hover::before { animation-play-state: paused; opacity: 0; }

@media (max-width: 640px) {
    .sheet-me::before { left: -10%; top: 6%; width: 86%; height: 38%; }
    .slip::before { width: 84%; }
}

/* =========================================================
   風のすじ（作り直し）— 曲線で、もっと うすく
   ========================================================= */

.sheet-me::before,
.slip::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140' preserveAspectRatio='none'><g fill='none' stroke='%236f6050' stroke-opacity='0.42' stroke-width='1.6' stroke-linecap='round'><path d='M6 44 C 78 14 148 66 222 34 C 286 6 346 30 394 18'/><path d='M24 80 C 98 56 168 106 238 76 C 298 50 344 70 382 58'/><path d='M14 114 C 86 96 148 130 212 108 C 264 90 304 104 340 96'/></g></svg>");
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
}
body.dark-mode .sheet-me::before,
body.dark-mode .slip::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140' preserveAspectRatio='none'><g fill='none' stroke='%23eee4d4' stroke-opacity='0.38' stroke-width='1.6' stroke-linecap='round'><path d='M6 44 C 78 14 148 66 222 34 C 286 6 346 30 394 18'/><path d='M24 80 C 98 56 168 106 238 76 C 298 50 344 70 382 58'/><path d='M14 114 C 86 96 148 130 212 108 C 264 90 304 104 340 96'/></g></svg>");
}

.sheet-me::before {
    left: -10%;
    top: 8%;
    width: 72%;
    height: 56%;
}
.slip::before {
    left: -8%;
    top: 14%;
    width: 78%;
    height: 66%;
}

/* うっすら見えて、ゆるく右へ抜ける */
@keyframes wind-photo {
    0%, 50%  { opacity: 0; transform: translate3d(-30%, 4px, 0) rotate(1.5deg); }
    58%      { opacity: 0.5; }
    68%      { opacity: 0.42; transform: translate3d(48%, -3px, 0) rotate(-1deg); }
    80%      { opacity: 0; transform: translate3d(126%, -9px, 0) rotate(-2.5deg); }
    100%     { opacity: 0; transform: translate3d(-30%, 4px, 0) rotate(1.5deg); }
}
@keyframes wind-slip {
    0%, 58%  { opacity: 0; transform: translate3d(-28%, 3px, 0) rotate(1.2deg); }
    65%      { opacity: 0.42; }
    75%      { opacity: 0.34; transform: translate3d(46%, -2px, 0) rotate(-0.8deg); }
    86%      { opacity: 0; transform: translate3d(124%, -7px, 0) rotate(-2deg); }
    100%     { opacity: 0; transform: translate3d(-28%, 3px, 0) rotate(1.2deg); }
}

@media (max-width: 640px) {
    .sheet-me::before { left: -12%; top: 4%; width: 92%; height: 44%; }
    .slip::before { left: -8%; width: 90%; height: 70%; }
}

/* =========================================================
   風 — 曲線にそって すじが 流れていく（作り直し 2）
   ========================================================= */

/* 前の版（擬似要素で画像を動かすやり方）は停止 */
.sheet-me::before, .slip::before { content: none !important; display: none !important; }

:root          { --wind: rgba(102, 88, 70, 0.34); }
body.dark-mode { --wind: rgba(238, 228, 212, 0.30); }

.wind { position: absolute; pointer-events: none; z-index: 4; overflow: visible; }
.sheet-me > .wind { left: -10%; top: 8%;  width: 74%; height: 54%; animation: wind-drift 7.5s 1.6s ease-in-out infinite; }
.slip     > .wind { left: -8%;  top: 14%; width: 80%; height: 64%; animation: wind-drift 11s 4s ease-in-out infinite; }

.wind path {
    fill: none;
    stroke: var(--wind);
    stroke-width: 1.7;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 95 500;
    stroke-dashoffset: 95;
    opacity: 0;
}

/* 写真のあたり：7.5 秒ごと。3 本が わずかに ずれて流れる */
.sheet-me > .wind path                 { animation: gust 7.5s 1.60s ease-in-out infinite; }
.sheet-me > .wind path:nth-child(2)    { animation-delay: 1.76s; }
.sheet-me > .wind path:nth-child(3)    { animation-delay: 1.92s; }

/* 短冊：11 秒ごと */
.slip > .wind path                     { animation: gust-slip 11s 4.00s ease-in-out infinite; }
.slip > .wind path:nth-child(2)        { animation-delay: 4.18s; }
.slip > .wind path:nth-child(3)        { animation-delay: 4.34s; }

@keyframes gust {
    0%, 50% { stroke-dashoffset: 95;   opacity: 0; }
    55%     {                          opacity: 0.55; }
    70%     {                          opacity: 0.5; }
    84%     { stroke-dashoffset: -500; opacity: 0; }
    100%    { stroke-dashoffset: -500; opacity: 0; }
}
@keyframes gust-slip {
    0%, 58% { stroke-dashoffset: 95;   opacity: 0; }
    63%     {                          opacity: 0.45; }
    76%     {                          opacity: 0.4; }
    90%     { stroke-dashoffset: -500; opacity: 0; }
    100%    { stroke-dashoffset: -500; opacity: 0; }
}

/* 流れながら すこし上へ */
@keyframes wind-drift {
    0%, 50% { transform: translateY(4px); }
    84%     { transform: translateY(-7px); }
    100%    { transform: translateY(4px); }
}

/* さわっているあいだは 風も止める */
.sheet-me:hover .wind path, .slip:hover .wind path { animation-play-state: paused; }

@media (max-width: 640px) {
    .sheet-me > .wind { left: -12%; top: 3%; width: 94%; height: 42%; }
    .slip     > .wind { left: -8%;  width: 92%; height: 70%; }
}

/* 風のすじ — 長さと見え方の調整 */
.wind path {
    stroke-width: 1.8;
    stroke-dasharray: 210 640;
    stroke-dashoffset: 210;
}
@keyframes gust {
    0%, 48% { stroke-dashoffset: 210;  opacity: 0; }
    54%     {                          opacity: 0.7; }
    72%     {                          opacity: 0.62; }
    86%     { stroke-dashoffset: -640; opacity: 0; }
    100%    { stroke-dashoffset: -640; opacity: 0; }
}
@keyframes gust-slip {
    0%, 56% { stroke-dashoffset: 210;  opacity: 0; }
    62%     {                          opacity: 0.6; }
    78%     {                          opacity: 0.52; }
    92%     { stroke-dashoffset: -640; opacity: 0; }
    100%    { stroke-dashoffset: -640; opacity: 0; }
}

/* 付箋の折れ角の切り抜きで、画びょうが半分に切れていたので上へ広げる */
.sticky {
    clip-path: polygon(
        0 -16px,
        100% -16px,
        100% calc(100% - 22px),
        calc(100% - 22px) 100%,
        0 100%
    );
}
.pin {
    width: 20px;
    height: 20px;
    top: -10px;
    margin-left: -10px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.28), inset 0 -4px 5px rgba(0,0,0,0.20), inset 0 3px 4px rgba(255,255,255,0.35);
}

/* =========================================================
   「いま」を Discord のものだと分かるように
   ========================================================= */

.sticky-title { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.sticky-title .dc { color: #5865f2; font-size: 0.95rem; }
body.dark-mode .sticky-title .dc { color: #8d97f8; }
.sticky-sub {
    font-family: 'Yomogi', cursive; font-size: 0.72rem; letter-spacing: 0.08em;
    color: rgba(0,0,0,0.42);
}
body.dark-mode .sticky-sub { color: rgba(255,255,255,0.48); }

/* 付箋の足もと：Discord へ */
.sticky-foot {
    margin-top: 18px; padding-top: 13px;
    border-top: 1px dashed rgba(0,0,0,0.20);
}
body.dark-mode .sticky-foot { border-top-color: rgba(255,255,255,0.18); }
.sticky-foot a {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Yomogi', cursive; font-size: 0.82rem;
    color: inherit; text-decoration: none;
    transition: gap 0.25s ease, color 0.25s ease;
}
.sticky-foot a b { font-weight: 400; border-bottom: 1.5px solid var(--red); padding-bottom: 1px; }
.sticky-foot a .go { font-size: 0.7rem; color: var(--red); }
.sticky-foot a:hover { gap: 13px; color: var(--red); }

/* 写真ぜんたいが Discord へのリンク */
a.polaroid { display: block; text-decoration: none; color: inherit; }
a.polaroid:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }

/* やってる時間・曲へのリンク */
.act-time { font-family: 'Yomogi', cursive; font-size: 0.7rem; opacity: 0.7; margin-left: 6px; }
.act-name a { color: inherit; text-decoration: none; border-bottom: 1.5px solid var(--red); padding-bottom: 1px; }
.act-name a:hover { color: var(--red); }

@media (max-width: 640px) {
    .sticky-sub { font-size: 0.68rem; }
    .sticky-foot a { font-size: 0.78rem; }
}

/* =========================================================
   たまに なにかが 通りすぎる
   ========================================================= */

#sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.page { position: relative; z-index: 1; }

.floater {
    position: absolute;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}
.floater svg { display: block; transform: scale(var(--sc, 1)); }

/* 風船：下から ふわっと 上がっていく */
.f-balloon { bottom: -90px; animation-name: fly-balloon; animation-duration: 20s; }
@keyframes fly-balloon {
    0%   { transform: translate3d(0, 0, 0) rotate(-5deg);        opacity: 0; }
    7%   {                                                        opacity: 1; }
    25%  { transform: translate3d(26px, -30vh, 0) rotate(4deg); }
    50%  { transform: translate3d(-14px, -60vh, 0) rotate(-6deg); }
    75%  { transform: translate3d(30px, -90vh, 0) rotate(5deg); }
    92%  {                                                        opacity: 1; }
    100% { transform: translate3d(8px, -122vh, 0) rotate(-3deg);  opacity: 0; }
}

/* 紙ひこうき：左から右へ すーっと */
.f-plane { left: -70px; animation-name: fly-plane; animation-duration: 13s; }
@keyframes fly-plane {
    0%   { transform: translate3d(0, 0, 0) rotate(-6deg);          opacity: 0; }
    8%   {                                                          opacity: 1; }
    30%  { transform: translate3d(32vw, -22px, 0) rotate(-2deg); }
    55%  { transform: translate3d(58vw, 26px, 0) rotate(7deg); }
    80%  { transform: translate3d(84vw, -14px, 0) rotate(-4deg); }
    92%  {                                                          opacity: 1; }
    100% { transform: translate3d(112vw, -28px, 0) rotate(-8deg);   opacity: 0; }
}

/* 木の葉：上から くるくる 落ちてくる */
.f-leaf { top: -60px; animation-name: fly-leaf; animation-duration: 16s; }
@keyframes fly-leaf {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg);            opacity: 0; }
    8%   {                                                           opacity: 1; }
    25%  { transform: translate3d(-46px, 26vh, 0) rotate(-60deg); }
    50%  { transform: translate3d(38px, 52vh, 0) rotate(120deg); }
    75%  { transform: translate3d(-30px, 78vh, 0) rotate(240deg); }
    92%  {                                                           opacity: 1; }
    100% { transform: translate3d(20px, 112vh, 0) rotate(330deg);    opacity: 0; }
}

/* しゃぼん玉：ゆらゆら のぼって 消える */
.f-bubble { bottom: -60px; animation-name: fly-bubble; animation-duration: 17s; }
@keyframes fly-bubble {
    0%   { transform: translate3d(0, 0, 0) scale(0.9);             opacity: 0; }
    10%  {                                                          opacity: 0.9; }
    30%  { transform: translate3d(22px, -28vh, 0) scale(1); }
    55%  { transform: translate3d(-18px, -55vh, 0) scale(1.04); }
    80%  { transform: translate3d(16px, -82vh, 0) scale(1); }
    97%  { transform: translate3d(2px, -106vh, 0) scale(1.15);      opacity: 0.9; }
    100% { transform: translate3d(2px, -108vh, 0) scale(1.45);      opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #sky { display: none; }
}

/* 紙ひこうき：滑空らしく ふわっと（上書き） */
.f-plane {
    left: -90px;
    animation-name: fly-plane;
    animation-duration: 16s;
    /* 一区間ごとに ゆるめて ためる＝ 浮いて 落ちる感じ */
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
}
@keyframes fly-plane {
    0%   { transform: translate3d(0, -10px, 0) rotate(-2deg);    opacity: 0; }
    7%   { transform: translate3d(9vw, 8px, 0) rotate(5deg);     opacity: 1; }
    24%  { transform: translate3d(27vw, 38px, 0) rotate(8deg); }
    40%  { transform: translate3d(45vw, 14px, 0) rotate(-6deg); }
    56%  { transform: translate3d(62vw, 46px, 0) rotate(9deg); }
    72%  { transform: translate3d(79vw, 26px, 0) rotate(-5deg); }
    88%  { transform: translate3d(97vw, 58px, 0) rotate(7deg);   opacity: 1; }
    100% { transform: translate3d(114vw, 72px, 0) rotate(4deg);  opacity: 0; }
}

/* =========================================================
   すきな ごはん — レシート
   ========================================================= */

.receipt {
    position: relative;
    max-width: 320px;
    margin: 0 0 46px;
    padding: 30px 26px 34px;
    background: #fdfbf4;
    color: #33302b;
    transform: rotate(0.9deg);
    box-shadow: 0 10px 22px rgba(70,55,35,0.18);
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
    font-size: 0.78rem;
    line-height: 1.95;
    --zig: 12px;
    -webkit-mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zig) var(--zig) repeat-x,
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zig) var(--zig) repeat-x,
        linear-gradient(#000 0 0) center / 100% calc(100% - var(--zig) * 2) no-repeat;
    mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zig) var(--zig) repeat-x,
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zig) var(--zig) repeat-x,
        linear-gradient(#000 0 0) center / 100% calc(100% - var(--zig) * 2) no-repeat;
}
/* よるは レシートも 夜の紙に。すぐ となりの しよう板より
   ほんの すこし 明るくして、べつの 紙だと わかるようにする。 */
body.dark-mode .receipt {
    background: #16204a;
    color: #ccd6f5;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}
body.dark-mode .r-rule { border-top-color: rgba(186, 206, 255, 0.30); }
body.dark-mode .r-items li::after,
body.dark-mode .r-line::after { border-bottom-color: rgba(186, 206, 255, 0.26); }
body.dark-mode .r-stamp { border-color: #ff96a8; color: #ff96a8; opacity: 0.72; }
.receipt.reveal.active { transform: translateY(0) rotate(0.9deg); }

.r-head { text-align: center; font-size: 0.95rem; letter-spacing: 0.24em; font-weight: 700; }
.r-date { display: block; text-align: center; font-size: 0.62rem; opacity: 0.5; letter-spacing: 0.06em; margin-bottom: 6px; }
.r-rule { border-top: 1px dashed rgba(0,0,0,0.35); margin: 10px 0; }

.r-items { list-style: none; }
.r-items li, .r-line { display: flex; align-items: baseline; gap: 6px; }
.r-items li span, .r-line span { white-space: nowrap; }
.r-items li::after, .r-line::after {
    content: ''; flex: 1; order: 1;
    border-bottom: 1px dotted rgba(0,0,0,0.28); transform: translateY(-3px);
}
.r-items li b, .r-line b { order: 2; font-weight: 400; white-space: nowrap; }
.r-total b { font-weight: 700; }

.r-foot { text-align: center; font-size: 0.68rem; opacity: 0.7; line-height: 1.7; margin-top: 4px; }

.r-stamp {
    position: absolute; top: 12px; right: 8px;
    width: 60px; height: 60px; border: 2px dashed #c4584f; border-radius: 50%;
    color: #c4584f; font-family: 'Yomogi', cursive; font-size: 0.58rem; line-height: 1.3;
    display: flex; align-items: center; justify-content: center; text-align: center;
    transform: rotate(-16deg); opacity: 0.65;
}

@media (max-width: 640px) {
    .receipt { max-width: 100%; margin-bottom: 38px; }
}

/* =========================================================
   レシートの となり — PC の しよう
   ========================================================= */

.pair { display: flex; gap: 26px; align-items: flex-start; margin: 0 0 46px; flex-wrap: wrap; }
.pair > .receipt { flex: 0 0 320px; width: 320px; max-width: 320px; margin-bottom: 0; }

.spec {
    position: relative; flex: 1; min-width: 250px;
    background: var(--card); border: 1px solid var(--rule);
    padding: 24px 24px 20px; transform: rotate(-1.1deg);
    box-shadow: var(--shadow);
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
    font-size: 0.76rem; line-height: 1.6;
}
.spec.reveal.active { transform: translateY(0) rotate(-1.1deg); }

.spec-head {
    font-family: 'Yomogi', cursive; font-size: 0.92rem; font-weight: 400; letter-spacing: 0.2em;
    margin-bottom: 14px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.spec-head em {
    font-style: normal; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 0.6rem; opacity: 0.5; letter-spacing: 0.1em;
}

/* ほしいもの の 短冊。札の ことばは 手がきの 字で */
.wish { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.wish li { display: flex; gap: 12px; align-items: baseline; }
.wish li span { width: 4.2em; flex: none; opacity: 0.55; }
.wish li b {
    font-weight: 400; font-family: 'Yomogi', cursive; font-size: 0.9rem;
    line-height: 1.5;
}

.spec-rows { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.spec-rows li { display: flex; gap: 12px; align-items: baseline; }
.spec-rows li span { width: 6.2em; flex: none; opacity: 0.55; }
.spec-rows li b { font-weight: 400; }

/* ほしいもの の 一覧へ とぶ 札 */
.wish-go {
    display: flex; align-items: center; gap: 9px;
    margin-top: 14px;
    font-family: 'Yomogi', cursive; font-size: 0.82rem;
    text-decoration: none; color: var(--ink);
    background: var(--paper-2);
    border: 1px dashed var(--rule); border-radius: 3px;
    padding: 10px 16px;
    transition: border-color 0.2s, color 0.2s, border-style 0.2s;
}
.wish-go:hover { border-style: solid; border-color: var(--red); color: var(--red); }
.wish-go i { color: var(--red); }

.spec-rule {
    height: 1px; margin: 16px 0 12px;
    background: repeating-linear-gradient(90deg, var(--rule) 0 5px, transparent 5px 9px);
}
.spec-cap {
    font-family: 'Yomogi', cursive; font-size: 0.72rem;
    letter-spacing: 0.18em; opacity: 0.55; margin-bottom: 7px;
}
.spec-notes { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.spec-notes li {
    position: relative; padding-left: 14px;
    font-size: 0.7rem; line-height: 1.55; opacity: 0.72;
}
.spec-notes li::before {
    content: '※'; position: absolute; left: 0; top: 0; opacity: 0.6;
}

.barcode {
    height: 34px; margin-top: 18px; opacity: 0.7;
    background: repeating-linear-gradient(90deg,
        var(--ink) 0 2px, transparent 2px 5px,
        var(--ink) 5px 6px, transparent 6px 10px,
        var(--ink) 10px 13px, transparent 13px 15px,
        var(--ink) 15px 16px, transparent 16px 21px);
}
.spec-code { font-size: 0.6rem; letter-spacing: 0.34em; opacity: 0.5; text-align: center; margin-top: 5px; }

@media (max-width: 720px) {
    .pair { gap: 20px; }
    .pair > .receipt { flex: 1 1 100%; width: auto; max-width: 100%; }
    .spec { transform: rotate(-0.6deg); }
    .spec.reveal.active { transform: translateY(0) rotate(-0.6deg); }
}

/* レシートと 同じ大きさにそろえる */
.pair { align-items: stretch; }
.pair > .receipt,
.pair > .spec { flex: 1 1 0; width: auto; max-width: none; min-width: 0; }
.spec { display: flex; flex-direction: column; }
.spec .barcode { margin-top: auto; }

/* ほしいもの の 札は 中身ぶんの 高さで よい（レシートに そろえない） */
.pair > #wish { align-self: flex-start; }

@media (max-width: 720px) {
    .pair > .receipt,
    .pair > .spec { flex: 1 1 100%; }
}

/* =========================================================
   Discord から 持ってきた かざり
   ========================================================= */

/* デコレーション付きの丸アイコンを 写真に 貼る */
.polaroid { position: relative; }

/* 「いま」の中に アイコンと ● をまとめる */
.now-head { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.now-head .status-line { margin: 0; }
.now-text { min-width: 0; }
.now-name { display: none; }

/* ネームプレートは 焼き増しした写真を 一枚 貼った ということにする */
.now-wrap.has-plate {
    display: block; width: min(100%, 400px);
    margin: 12px 0 2px 6px;
    padding: 7px 7px 9px;
    box-sizing: border-box;
    background: var(--card);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 6px;
    box-shadow: 0 7px 15px rgba(70,55,35,0.20);
    transform: rotate(-1.4deg);
    position: relative;
    transition: transform 0.35s;
}
.now-wrap.has-plate:hover { transform: rotate(0deg); }
/* よるは ネームプレートの まわりも 夜に する。
   台紙・プレートの 地・かぶせる膜・文字・札を まとめて 青に よせる。 */
body.dark-mode .now-wrap.has-plate {
    background: #172152;
    border-color: rgba(190, 210, 255, 0.10);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.55);
}
body.dark-mode .now-head.has-plate {
    background-color: #0a1128;
    background-image: linear-gradient(103deg, #16204a 0%, #080d20 62%);
    box-shadow: inset 0 0 0 1px rgba(190, 210, 255, 0.09),
                inset 0 -20px 28px -22px rgba(0, 0, 0, 0.6);
}
/* 焼けた写真の膜 → 月あかりの膜 */
body.dark-mode .now-head.has-plate::after {
    background:
        radial-gradient(130% 150% at 26% 24%, rgba(168,204,255,0.18), rgba(0,0,0,0) 62%),
        linear-gradient(176deg, rgba(146,186,255,0.10) 0%, rgba(8,14,40,0.30) 100%);
}
body.dark-mode .now-head.has-plate .now-avatar .status-dot { border-color: #0a1128; }
body.dark-mode .now-head.has-plate .now-avatar .status-dot::after { color: #0a1128; }
body.dark-mode .now-head.has-plate .status-line { color: #aab7de; }
body.dark-mode .now-head.has-plate .guild-tag {
    background: #e8edfc;
    border-color: rgba(28, 42, 88, 0.28);
    color: #151f3e;
}
/* 角に ちいさく テープ */
.now-wrap.has-plate::before {
    content: ''; position: absolute; z-index: 4;
    top: -7px; left: -17px;
    width: 64px; height: 18px;
    background: var(--tape);
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 3px, transparent 3px 7px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    transform: rotate(-38deg);
}
.now-head.has-plate {
    position: relative; overflow: hidden;
    container-type: inline-size;
    width: 100%; height: auto; aspect-ratio: 448 / 84;
    /* 狭い画面で 中身が つぶれないように 高さの下限 */
    min-height: 62px;
    padding: 0 clamp(9px, 3.63cqw, 15px);
    gap: clamp(8px, 3.07cqw, 13px);
    margin-top: 0;
    border-radius: 4px;
    /* Discord の寒い黒ではなく 焼けた紙に近い こげ茶 */
    background-color: #2c231c;
    background-image: linear-gradient(103deg, #372b21 0%, #241c16 62%);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
    color: #f7f0e2;
    box-shadow: inset 0 0 0 1px rgba(255,244,222,0.07),
                inset 0 -20px 28px -22px rgba(0,0,0,0.5);
}
.now-head.has-plate .now-avatar {
    width: clamp(41px, 17.2cqw, 68px);
    height: clamp(41px, 17.2cqw, 68px);
}
.now-head.has-plate .now-avatar .status-dot {
    width: clamp(11px, 5.24cqw, 21px); height: clamp(11px, 5.24cqw, 21px);
    border-width: clamp(2px, 0.82cqw, 3px); border-color: #2c231c;
    right: 1px; bottom: 1px;
}
.now-head.has-plate .now-avatar .status-dot::after {
    color: #2c231c; font-size: clamp(5px, 2.5cqw, 10px);
}
/* デコレーションの中の顔は 少し大きめに見せる */
.now-head.has-plate .now-avatar.has-deco .deco-face { width: 79%; height: 79%; }

/* 動くネームプレート（読めないときは 静止画が下に残る） */
.now-plate {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: right center;
    pointer-events: none;
}
.now-plate[hidden] { display: none; }

/* プレート自体は Discord の暗い絵なので、上から 焼けた写真の膜をかけて 紙に寄せる */
.now-head.has-plate::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(130% 150% at 26% 24%, rgba(255,224,176,0.16), rgba(0,0,0,0) 62%),
        linear-gradient(176deg, rgba(255,209,150,0.10) 0%, rgba(58,32,14,0.20) 100%);
    mix-blend-mode: soft-light;
}
.now-head.has-plate > .now-avatar,
.now-head.has-plate > .now-text { position: relative; z-index: 2; }
.now-head.has-plate .now-name {
    display: block; font-size: clamp(0.72rem, 4.05cqw, 1rem); font-weight: 700; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.now-head.has-plate .status-line {
    font-size: clamp(0.6rem, 3.2cqw, 0.8rem); color: #cfc2af;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
/* 名前の右に サーバータグ（Discord と同じならび） */
.now-head.has-plate .name-row {
    gap: clamp(5px, 2.23cqw, 8px); flex-wrap: nowrap; min-width: 0;
}
.now-head.has-plate .name-row .now-name { min-width: 0; }
.now-head.has-plate .guild-tag {
    transform: none; flex: none;
    /* 暗いプレートの上なので しっかり明るい札に 濃い文字 */
    background: #fbf7ec;
    border-color: rgba(60,45,30,0.22);
    color: #241f1a;
    font-weight: 700;
    /* 札まわりは すべて 文字の大きさ基準にして まとめて伸び縮みさせる */
    font-size: clamp(0.56rem, 3.07cqw, 0.74rem);
    padding: 0.34em 0.94em 0.34em 0.68em;
    gap: 0.5em;
    border-radius: 0.55em;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.now-head.has-plate .guild-tag img { width: 1.4em; height: 1.4em; }
@media (max-width: 400px) {
    .now-wrap.has-plate { margin-left: 0; }
}

.now-avatar { position: relative; width: 72px; height: 72px; flex: none; display: block; }
.now-avatar .deco-face {
    position: absolute; left: 50%; top: 50%;
    width: 100%; height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%; object-fit: cover; display: block;
    background: rgba(0,0,0,0.07);
}
.now-avatar.has-deco .deco-face { width: 76%; height: 76%; }
.now-avatar .deco-ring { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.now-avatar .deco-ring[hidden] { display: none; }
.now-avatar .status-dot {
    position: absolute; right: 1px; bottom: 1px; z-index: 2;
    width: 21px; height: 21px; border: 3px solid var(--note);
}
.now-avatar .status-dot::after { font-size: 9px; color: var(--note); }

/* サーバータグ */
.name-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.guild-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px 5px 8px;
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px;
    font-family: 'Yomogi', cursive; font-size: 0.72rem; color: var(--ink-2);
    transform: rotate(-2.5deg);
    box-shadow: 0 2px 5px rgba(70,55,35,0.14);
    white-space: nowrap;
}
.guild-tag[hidden] { display: none; }
.guild-tag img { width: 16px; height: 16px; display: block; }
.guild-tag img[hidden] { display: none; }

@media (max-width: 950px) {
    .name-row { justify-content: center; }
}
@media (max-width: 720px) {
    .now-head { gap: 12px; }
    .now-avatar { width: 63px; height: 63px; }
    .now-avatar .status-dot { width: 18px; height: 18px; border-width: 3px; }
}

/* 付箋の上に置くときの見え方 */
.sticky-title .guild-tag {
    background: rgba(255,255,255,0.55);
    border-color: rgba(0,0,0,0.16);
    color: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
body.dark-mode .sticky-title .guild-tag { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }


/* =========================================================
   余白から はみ出している 紙きれ（かざり／ひろい画面だけ）
   ========================================================= */
.scrap {
    position: fixed; z-index: 0;
    pointer-events: none; user-select: none;
    background: var(--card);
    border: 1px solid rgba(0,0,0,0.07);
    box-shadow: 0 10px 26px rgba(70,55,35,0.20);
    font-family: 'Yomogi', cursive; color: var(--ink-2);
    opacity: 0;
    /* ポインタから 逃げる ときの もどり。うごきは script.js が つける */
    transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.3, 1);
    animation: scrap-in 0.9s ease forwards, scrap-sway 15s ease-in-out infinite;
}
/* 紙きれに 貼る テープ */
.scrap .scrap-tape {
    position: absolute; width: 86px; height: 24px;
    background: var(--tape);
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 3px, transparent 3px 7px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* はみ出す量は 画面の ひろさで きめる。
   ひろい画面では ほとんど 見せて、せまいときだけ 外へ にがす。
   min() の 左が いちばん 内がわ、右が 本文と ぶつからない ぎりぎり。 */

/* 左うえ ― もぎった 半券 */
.scrap-ticket {
    left: min(-18px, calc(50vw - 631px)); top: 9%;
    width: 212px; height: 96px;
    transform: rotate(-7deg);
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0 18px;
    font-size: 0.7rem; letter-spacing: 0.16em;
    animation-delay: 0.15s, 1.2s;
}
.scrap-ticket .scrap-tape { top: -12px; right: 26px; transform: rotate(6deg); }
/* 半券の ミシン目 */
.scrap-ticket::before {
    content: ''; position: absolute; left: 62px; top: 10px; bottom: 10px;
    border-left: 2px dotted rgba(0,0,0,0.16);
}

/* 左した ― レシートの 切れはし */
.scrap-receipt {
    left: min(-24px, calc(50vw - 613px)); bottom: 13%;
    width: 192px; height: 162px;
    transform: rotate(5deg);
    padding: 15px 18px 0;
    font-size: 0.62rem; letter-spacing: 0.1em; line-height: 2;
    --zig: 10px;
    -webkit-mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
            bottom / var(--zig) var(--zig) repeat-x,
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--zig)) no-repeat;
    mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
            bottom / var(--zig) var(--zig) repeat-x,
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--zig)) no-repeat;
    animation-delay: 0.45s, 3.6s;
    animation-duration: 0.9s, 19s;
}
.scrap-receipt b { display: block; font-weight: 400; }
.scrap-receipt span { display: flex; justify-content: space-between; }
.scrap-receipt em { font-style: normal; }
.scrap-receipt hr { border: none; border-top: 1px dashed rgba(0,0,0,0.20); margin: 4px 0; }
body.dark-mode .scrap-receipt hr { border-top-color: rgba(255,255,255,0.16); }

/* 右うえ ― 焼き増しした 写真 */
.scrap-photo {
    right: min(-20px, calc(50vw - 609px)); top: 15%;
    width: 184px; height: 205px;
    transform: rotate(6deg);
    padding: 11px 11px 32px;
    background: #fdfbf6;
    animation-delay: 0.3s, 2.4s;
    animation-duration: 0.9s, 17s;
}
.scrap-photo img {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
}
.scrap-photo .scrap-tape { top: -13px; left: 22px; transform: rotate(-5deg); }
body.dark-mode .scrap-photo { background: #e9e2d4; }
/* 写真だけは よるでも 明るいまま。月あかりが あたっている ことにする */

/* 右した ― はがれかけの ふせん */
.scrap-memo {
    right: min(-16px, calc(50vw - 592px)); bottom: 15%;
    width: 172px; height: 172px;
    transform: rotate(-4deg);
    border: none;
    background: var(--note);
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 0 20px;
    font-size: 1.15rem; letter-spacing: 0.1em; line-height: 1.8; color: var(--ink);
    animation-delay: 0.6s, 5.5s;
    animation-duration: 0.9s, 21s;
}

/* 左 まんなか ― 切手。ふちを ギザギザに 抜く */
.scrap-stamp {
    left: min(-10px, calc(50vw - 648px)); top: 44%;
    width: 104px; height: 124px;
    transform: rotate(-9deg);
    padding: 9px;
    border: none;
    /* まわりの 紙と 同じ色だと ギザギザが 見えないので すこし 色を つける */
    background: linear-gradient(160deg, rgba(200, 160, 110, 0.22), rgba(190, 120, 120, 0.16)), var(--card);
    animation-delay: 0.75s, 7.2s;
    animation-duration: 0.9s, 18s;
    --pf: 7px;
    -webkit-mask:
        radial-gradient(circle at 50% 0,    #0000 3.4px, #000 3.6px) top    / var(--pf) var(--pf) repeat-x,
        radial-gradient(circle at 50% 100%, #0000 3.4px, #000 3.6px) bottom / var(--pf) var(--pf) repeat-x,
        radial-gradient(circle at 0 50%,    #0000 3.4px, #000 3.6px) left   / var(--pf) var(--pf) repeat-y,
        radial-gradient(circle at 100% 50%, #0000 3.4px, #000 3.6px) right  / var(--pf) var(--pf) repeat-y,
        linear-gradient(#000 0 0) center / calc(100% - var(--pf) * 2) calc(100% - var(--pf) * 2) no-repeat;
    mask:
        radial-gradient(circle at 50% 0,    #0000 3.4px, #000 3.6px) top    / var(--pf) var(--pf) repeat-x,
        radial-gradient(circle at 50% 100%, #0000 3.4px, #000 3.6px) bottom / var(--pf) var(--pf) repeat-x,
        radial-gradient(circle at 0 50%,    #0000 3.4px, #000 3.6px) left   / var(--pf) var(--pf) repeat-y,
        radial-gradient(circle at 100% 50%, #0000 3.4px, #000 3.6px) right  / var(--pf) var(--pf) repeat-y,
        linear-gradient(#000 0 0) center / calc(100% - var(--pf) * 2) calc(100% - var(--pf) * 2) no-repeat;
}
.scrap-stamp i {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    border: 1px dashed rgba(120, 100, 70, 0.30);
    font-style: normal; font-size: 1.5rem; letter-spacing: 0.1em;
}

/* 左した ― 角が めくれた メモ。書きかけの 罫線だけ 置く */
.scrap-fold {
    left: min(-14px, calc(50vw - 626px)); bottom: 32%;
    width: 150px; height: 92px;
    transform: rotate(4deg);
    --fold-line: rgba(120, 100, 70, 0.22);
    animation-delay: 0.9s, 9.4s;
    animation-duration: 0.9s, 20s;
}
/* めくれた 角。ページの 色で 三角に 抜いて 影を 落とす */
.scrap-fold::before {
    content: ''; position: absolute; right: 0; bottom: 0;
    border: 17px solid transparent;
    border-right-color: var(--paper);
    border-bottom-color: var(--paper);
    filter: drop-shadow(-2px -2px 3px rgba(0, 0, 0, 0.22));
}
/* 罫線。角の 三角には かからない ように 内がわで とめる */
.scrap-fold::after {
    content: ''; position: absolute; left: 23px; right: 23px; top: 14px; bottom: 10px;
    background: repeating-linear-gradient(180deg,
        transparent 0 17px, var(--fold-line) 17px 18px);
}


@keyframes scrap-in { to { opacity: 1; } }
@keyframes scrap-sway {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -9px; }
}

/* よるは 紙きれを 沈ませる。月あかりから 遠い 机のすみ ということにして
   本文の 紙より 暗くする。写真だけ 明るいまま のこす。 */
body.dark-mode .scrap {
    background: #0c1230;
    border-color: rgba(150, 175, 235, 0.09);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    color: #8091bd;
}
body.dark-mode .scrap-memo { background: #1a2350; }
body.dark-mode .scrap-photo { background: #e9e2d4; }
body.dark-mode .scrap-ticket::before { border-left-color: rgba(190, 205, 240, 0.16); }
body.dark-mode .scrap-stamp {
    background: linear-gradient(160deg, rgba(150, 175, 235, 0.16), rgba(120, 140, 215, 0.10)), #0c1230;
}
body.dark-mode .scrap-stamp i { border-color: rgba(150, 175, 235, 0.22); }
body.dark-mode .scrap-fold { --fold-line: rgba(150, 175, 235, 0.20); }

/* せまい画面では じゃまなので ぜんぶ しまう */
@media (max-width: 1180px) {
    .scrap { display: none; }
}

/* うごきを へらす設定のときは そのまま 置いておく */
@media (prefers-reduced-motion: reduce) {
    .scrap { opacity: 1; animation: none; }
}


/* =========================================================
   スクロール中の 小さい見出し
   ========================================================= */
.minibar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 880;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 4px 14px rgba(70,55,35,0.10);
    opacity: 0; visibility: hidden;
    transform: translateY(-100%);
    transition: opacity 0.28s ease,
                transform 0.32s cubic-bezier(0.22,1,0.36,1),
                visibility 0.32s,
                background-color 0.4s;
}
.minibar.show { opacity: 1; visibility: visible; transform: none; }
body.dark-mode .minibar { box-shadow: 0 4px 16px rgba(0,0,0,0.45); }

.minibar-in {
    max-width: 744px; margin: 0 auto;
    padding: 8px 20px 9px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.minibar-logo {
    font-family: 'Yomogi', cursive; font-size: 1.06rem; line-height: 1.5;
    color: var(--ink); text-decoration: none; white-space: nowrap; flex: none;
}
.minibar-logo span {
    color: var(--red);
    border-bottom: 2px solid var(--red);
    padding-bottom: 1px;
}
.minibar-logo:hover span { border-bottom-style: dotted; }

.minibar-nav { display: flex; gap: 15px; min-width: 0; overflow: hidden; }
.minibar-nav a {
    font-family: 'Yomogi', cursive; font-size: 0.8rem; color: var(--ink-2);
    text-decoration: none; white-space: nowrap;
    border-bottom: 2px dotted transparent; padding-bottom: 1px;
    transition: color 0.2s, border-color 0.2s;
}
.minibar-nav a:hover { color: var(--red); border-bottom-color: var(--red); }

/* せまい画面では 名まえだけ（いどうは 丸ボタンに まかせる） */
@media (max-width: 720px) {
    .minibar-in { padding: 7px 16px 8px; justify-content: flex-start; }
    .minibar-nav { display: none; }
    .minibar-logo { font-size: 0.98rem; }
}
@media (prefers-reduced-motion: reduce) {
    .minibar { transition: opacity 0.001ms, visibility 0.001ms; transform: none; }
}


/* =========================================================
   よるだけ ― 蛍と、夜に 飛んでいるもの
   ========================================================= */

/* 蛍。ゆっくり ながれながら 明滅する */
#fireflies {
    position: fixed; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
}
.ff {
    position: absolute;
    width: var(--r, 4px); height: var(--r, 4px);
    border-radius: 50%;
    background: #fff8cd;
    box-shadow:
        0 0 6px 2px rgba(255,238,158,0.75),
        0 0 18px 7px rgba(255,214,96,0.26);
    opacity: 0;
    will-change: transform, opacity;
    animation:
        ff-drift var(--d, 22s) ease-in-out infinite alternate,
        ff-blink var(--b, 3.4s) ease-in-out infinite;
    animation-delay: var(--dd, 0s), var(--bd, 0s);
}
@keyframes ff-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(var(--dx, 60px), var(--dy, -80px), 0); }
}
@keyframes ff-blink {
    0%, 100% { opacity: 0; }
    14%      { opacity: 0.22; }
    50%      { opacity: 1; }
    74%      { opacity: 0.3; }
}

/* 蛾：はねを ふるわせながら 上へ */
.f-moth { bottom: -50px; animation-name: fly-moth; animation-duration: 15s; }
@keyframes fly-moth {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg);              opacity: 0; }
    8%   {                                                             opacity: 0.9; }
    22%  { transform: translate3d(36px, -22vh, 0) rotate(11deg); }
    40%  { transform: translate3d(-28px, -41vh, 0) rotate(-13deg); }
    58%  { transform: translate3d(42px, -59vh, 0) rotate(9deg); }
    76%  { transform: translate3d(-20px, -77vh, 0) rotate(-7deg); }
    92%  {                                                             opacity: 0.9; }
    100% { transform: translate3d(24px, -110vh, 0) rotate(5deg);       opacity: 0; }
}
.f-moth svg { animation: moth-flap 0.42s ease-in-out infinite alternate; }
@keyframes moth-flap {
    from { transform: scale(var(--sc, 1)) scaleX(1); }
    to   { transform: scale(var(--sc, 1)) scaleX(0.58); }
}

/* 流れ星：ななめに すっと 落ちて 消える */
.f-star { animation-name: fly-star; animation-duration: 2.4s;
          animation-timing-function: cubic-bezier(0.38, 0, 0.9, 0.62); }
@keyframes fly-star {
    0%   { transform: translate3d(0, 0, 0) scale(0.7);        opacity: 0; }
    12%  {                                                     opacity: 1; }
    68%  {                                                     opacity: 1; }
    100% { transform: translate3d(-56vw, 40vh, 0) scale(1);    opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #fireflies { display: none; }
}


/* =========================================================
   よるだけ ― 月を よこぎる 雲
   ========================================================= */
#clouds {
    position: fixed; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
}
/* かたまりを 3つ ずらして 重ねて、まるい ふちを くずす。
   まんなかは 月より 暗く、そとは 空より すこし 明るい。
   これだけで 空では 雲に 見えて、月の上では かげに なる。 */
.cloud {
    position: absolute;
    left: 100%;
    width: var(--w, 70vw);
    height: var(--h, 24vh);
    background:
        radial-gradient(40% 44% at 26% 56%, rgba(19, 28, 66, 0.52), rgba(0,0,0,0) 72%),
        radial-gradient(36% 54% at 52% 42%, rgba(23, 34, 78, 0.52), rgba(0,0,0,0) 74%),
        radial-gradient(34% 40% at 76% 58%, rgba(17, 25, 60, 0.48), rgba(0,0,0,0) 72%),
        radial-gradient(30% 34% at 40% 66%, rgba(21, 31, 72, 0.40), rgba(0,0,0,0) 76%),
        radial-gradient(64% 56% at 50% 50%, rgba(44, 68, 136, 0.20), rgba(0,0,0,0) 82%);
    will-change: transform;
    animation: cloud-drift var(--d, 190s) linear infinite;
    animation-delay: var(--dl, 0s);
}
@keyframes cloud-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-100vw - var(--w, 70vw)), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    #clouds { display: none; }
}


/* =========================================================
   そら ― 新宿の 本当の 天気が 背景に 出る
   ========================================================= */
#sora {
    position: fixed; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
}

/* あめ */
.drop {
    position: absolute; top: -12%;
    width: 1px; height: 46px;
    background: linear-gradient(rgba(118,148,198,0), rgba(118,148,198,0.45));
    animation: wx-fall linear infinite;
    will-change: transform;
}
body.dark-mode .drop {
    background: linear-gradient(rgba(150,180,235,0), rgba(150,180,235,0.55));
}
@keyframes wx-fall { to { transform: translate3d(-26px, 122vh, 0); } }

/* ゆき */
.flake {
    position: absolute; top: -4%;
    border-radius: 50%;
    background: rgba(188,204,232,0.75);
    animation: wx-drift linear infinite;
    will-change: transform;
}
body.dark-mode .flake { background: rgba(255,255,255,0.8); }
@keyframes wx-drift {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(22px, 56vh, 0); }
    100% { transform: translate3d(-14px, 116vh, 0); }
}

/* くもり・はれ ― よるは 雲の こさ、ひるは 空の 色みで 出す */
body.wx-cloudy #clouds .cloud { opacity: 1; }
body.wx-clear  #clouds .cloud { opacity: 0.35; }
body.light-mode.wx-cloudy #sora {
    background: linear-gradient(180deg, rgba(116,126,148,0.08), rgba(0,0,0,0) 46%);
}
body.light-mode.wx-clear #sora {
    background: linear-gradient(180deg, rgba(228,196,122,0.10), rgba(0,0,0,0) 38%);
}

@media (prefers-reduced-motion: reduce) {
    #sora .drop, #sora .flake { display: none; }
}


/* =========================================================
   つかっているもの ― 奥付から 出る 紙
   ========================================================= */
/* 紙が 開いている あいだ、うしろの ページを 止める */
body.api-locked {
    position: fixed;
    left: 0; right: 0; width: 100%;
    overflow-y: scroll;
}

.api-open {
    font-family: 'Yomogi', cursive; font-size: 0.8rem;
    color: var(--ink-2); background: none; border: none; cursor: pointer;
    border-bottom: 1px dotted var(--rule); padding: 0 2px 2px;
    transition: color 0.2s, border-color 0.2s;
}
.api-open:hover { color: var(--red); border-bottom-color: var(--red); }

.api-dlg {
    width: min(92vw, 660px);
    max-height: min(84vh, 760px);
    /* スマホは ツールバーの 出し入れで vh が ずれる。dvh が つかえるなら そちらを つかう */
    max-height: min(84dvh, 760px);
    padding: 0;
    border: 1px solid var(--rule);
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(70,55,35,0.34);
    /* テープが 紙の そとへ はみ出せるよう、ここでは 切らない。
       スクロールは 中の .api-body が 受けもつ */
    overflow: visible;
    position: fixed; inset: 0; margin: auto;
}
/* display は 開いている ときだけ。基底に 書くと、とじている dialog に
   かかる ブラウザ既定の display:none を 打ち消して しまう */
.api-dlg[open] { display: flex; }
.api-body {
    flex: 1 1 auto; min-height: 0; min-width: 0;
    overflow: auto;
    /* 中を 下まで ふっても うしろの ページを 動かさない */
    overscroll-behavior: contain;
    padding: 32px 30px 26px;
}
body.dark-mode .api-dlg { box-shadow: 0 24px 60px rgba(0,0,0,0.6); }
.api-dlg::backdrop { background: rgba(40,33,26,0.46); backdrop-filter: blur(2px); }
body.dark-mode .api-dlg::backdrop { background: rgba(4,7,20,0.62); }
.api-dlg[open] { animation: api-in 0.34s cubic-bezier(0.22,1,0.36,1); }
@keyframes api-in {
    from { opacity: 0; transform: translateY(14px) rotate(-0.8deg); }
    to   { opacity: 1; transform: none; }
}

.api-cap {
    font-family: 'Yomogi', cursive; font-size: 0.76rem;
    letter-spacing: 0.16em; color: var(--ink-2); opacity: 0.7;
    margin: 20px 0 9px; padding-bottom: 5px;
    border-bottom: 1px dashed var(--rule);
}
.api-cap:first-of-type { margin-top: 0; }

.api-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
/* なまえ・なにに・あて先 を よこ一列に。入らなければ 折りかえす */
.api-list li {
    position: relative; padding-left: 17px;
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.api-list b {
    flex: 0 0 9.6em;
    font-family: 'Yomogi', cursive; font-weight: 400; font-size: 0.95rem;
}
.api-list b a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.api-list b a:hover { color: var(--red); border-bottom-color: var(--red); }
.api-list em {
    flex: 1 1 8em;
    font-style: normal; font-size: 0.78rem; line-height: 1.6; color: var(--ink-2);
}
.api-list code {
    flex: 0 0 auto;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 0.66rem; letter-spacing: 0.02em;
    color: var(--ink-2); background: var(--paper-2);
    border: 1px solid var(--rule); border-radius: 3px; padding: 2px 8px;
}
@media (max-width: 560px) {
    .api-list li { display: block; }
    .api-list b { display: block; }
    .api-list code { margin: 5px 0 0; }
}

/* つながっているか の ●（本当の 状態） */
.api-dot {
    position: absolute; left: 0; top: 7px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--rule);
    box-shadow: 0 0 0 0 rgba(141,195,154,0.45);
}
.api-dot.on { background: #8dc39a; animation: api-pulse 2.4s ease-in-out infinite; }
.api-dot.off { background: var(--red); opacity: 0.7; }
@keyframes api-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(141,195,154,0.45); }
    50%      { box-shadow: 0 0 0 5px rgba(141,195,154,0); }
}

.api-foot {
    font-size: 0.72rem; color: var(--ink-2); opacity: 0.7;
    margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--rule);
}
.api-close {
    display: block; margin: 16px auto 0;
    font-family: 'Yomogi', cursive; font-size: 0.8rem; cursor: pointer;
    color: var(--ink); background: var(--paper-2);
    border: 1px dashed var(--rule); border-radius: 3px; padding: 8px 22px;
    transition: border-color 0.2s, color 0.2s, border-style 0.2s;
}
.api-close:hover { border-style: solid; border-color: var(--red); color: var(--red); }

@media (max-width: 640px) { .api-body { padding: 26px 20px 20px; } }
@media (prefers-reduced-motion: reduce) {
    .api-dlg[open] { animation: none; }
    .api-dot.on { animation: none; }
}

/* 紙の見出しに添える短い説明 */
.section-note {
    color: var(--ink-2);
    font-size: 0.88rem;
    line-height: 1.8;
    margin: 0 0 16px;
}