/* Small playful extras shared by the whole site: footer omikuji and the 404 page. */

/* ---------- Footer omikuji ---------- */
.omikuji { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; width: 100%; padding: 1.25rem 0 0; border-top: 1px solid var(--line-dark); }
.omikuji-button { display: inline-flex; align-items: center; gap: .7rem; padding: .35rem 1rem .35rem .35rem; border: 1px solid var(--line-dark); border-radius: 999px; background: transparent; color: var(--on-dark); font-size: .875rem; font-weight: 600; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.omikuji-button:hover { border-color: var(--acid); background: var(--acid); color: var(--ink); }
.omikuji-button:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }
.omikuji-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--acid); color: var(--ink); font-family: 'Noto Sans JP', sans-serif; font-size: .875rem; font-weight: 900; transition: transform .5s var(--spring), background .25s, color .25s; }
.omikuji-button:hover .omikuji-icon { background: var(--ink); color: var(--acid); transform: rotate(-16deg) scale(1.08); }
.omikuji-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; min-height: 1.6em; margin: 0; color: var(--on-dark); font-size: .9375rem; }
.omikuji-result strong { padding: 0 .4rem; border-radius: 3px; background: var(--acid); color: var(--ink); font-family: 'Noto Sans JP', sans-serif; font-size: 1.4rem; font-weight: 900; letter-spacing: .1em; }
.omikuji.is-drawn .omikuji-result { animation: omikuji-in .8s var(--spring); }
@keyframes omikuji-in { 0% { opacity: 0; transform: translateY(10px) rotate(-3deg); } 50% { opacity: 1; transform: rotate(2deg); } 100% { transform: none; } }

/* ---------- 404 ---------- */
.lost { display: grid; justify-items: start; gap: 1.5rem; padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(3rem, 6vw, 5rem); }
.lost .eyebrow { width: 100%; padding-bottom: .8rem; border-bottom: 1px solid var(--ink); }
.lost .lost-code { display: flex; align-items: center; gap: clamp(.25rem, 1vw, .75rem); margin: 0; font-family: var(--f-display); font-size: clamp(7rem, 30vw, 26rem); font-weight: 800; line-height: .85; letter-spacing: -.08em; color: var(--ink); }
.lost-mark { width: .79em; height: auto; transform: rotate(-8deg); animation: lost-wobble 6s ease-in-out infinite; cursor: pointer; }
.lost-mark.is-spin { animation: lost-spin .9s var(--ease); }
.lost h1 { font-family: var(--f-sig); font-size: clamp(1.8rem, 4vw, 3.4rem); font-weight: 800; line-height: 1.35; letter-spacing: -.06em; }
.lost h1 span { color: var(--acid-deep); }
.lost p { max-width: 34rem; color: var(--muted); line-height: 1.9; }
.lost-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.lost-links { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.lost-links a { display: inline-block; padding: .35rem .9rem; border: 1px solid var(--ink); border-radius: 999px; font-size: .875rem; font-weight: 500; transition: background .2s; }
.lost-links a:hover { background: var(--acid); }
.is-fun .lost .lost-code { color: var(--acid-deep); }
@keyframes lost-wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg) translateY(-.04em); } }
@keyframes lost-spin { to { transform: rotate(352deg); } }

@media (max-width: 680px) {
    .omikuji-result strong { font-size: 1.2rem; }
    .lost-actions .pill-button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .lost-mark, .lost-mark.is-spin, .omikuji.is-drawn .omikuji-result { animation: none; }
}