/* ==========================================================================
   今日御神签 / 今日の御神籤 / 오늘의 오미쿠지 / Daily Omikuji · daily-omikuji.site
   和纸 × 朱印 × 神社夜色（自动适配深浅色）
   ========================================================================== */

:root {
  --washi: #f5efe3;
  --washi-2: #efe6d4;
  --paper: #fdf9f0;
  --paper-edge: #e6d9bf;
  --ink: #2a2420;
  --ink-soft: #6f6355;
  --ink-faint: #a39581;
  --shu: #c8372d;          /* 朱 */
  --shu-deep: #9e2a22;
  --shu-soft: rgba(200, 55, 45, .1);
  --gold: #b0892f;
  --gold-soft: rgba(176, 137, 47, .35);
  --ai: #34406b;           /* 藍：凶签 */
  --matcha: #5d7a4a;
  --shadow-lg: 0 24px 60px -18px rgba(70, 45, 20, .28), 0 4px 14px rgba(70, 45, 20, .06);
  --shadow-sm: 0 2px 10px rgba(70, 45, 20, .08);
  --radius: 14px;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", "SimSun",
    "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* 签面上的日文签位（大吉／だいきち）：所有语言都优先使用日文字形 */
  --serif-ja: "Noto Serif JP", "Noto Serif CJK JP", "Source Han Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
    "Noto Serif CJK SC", "Noto Serif SC", serif;
  --sans: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
    "Noto Sans CJK SC", sans-serif;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cg fill='none' stroke='%23b0892f' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M0 40a20 20 0 0 1 40 0M8 40a12 12 0 0 1 24 0M16 40a4 4 0 0 1 8 0M40 40a20 20 0 0 1 40 0M48 40a12 12 0 0 1 24 0M56 40a4 4 0 0 1 8 0M-20 20a20 20 0 0 1 40 0M-12 20a12 12 0 0 1 24 0M20 20a20 20 0 0 1 40 0M28 20a12 12 0 0 1 24 0M60 20a20 20 0 0 1 40 0M68 20a12 12 0 0 1 24 0'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --washi: #16131b;
    --washi-2: #1d1923;
    --paper: #f3ead8;      /* 签纸在夜里依然是纸色，像灯笼下的签 */
    --paper-edge: #d8c7a3;
    --ink: #ece4d6;
    --ink-soft: #b9ad9b;
    --ink-faint: #85796a;
    --shu: #e0574a;
    --shu-deep: #c8372d;
    --shu-soft: rgba(224, 87, 74, .14);
    --gold: #d6b25e;
    --gold-soft: rgba(214, 178, 94, .3);
    --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, .7), 0 4px 18px rgba(0, 0, 0, .3);
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, .35);
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cg fill='none' stroke='%23d6b25e' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M0 40a20 20 0 0 1 40 0M8 40a12 12 0 0 1 24 0M16 40a4 4 0 0 1 8 0M40 40a20 20 0 0 1 40 0M48 40a12 12 0 0 1 24 0M56 40a4 4 0 0 1 8 0M-20 20a20 20 0 0 1 40 0M-12 20a12 12 0 0 1 24 0M20 20a20 20 0 0 1 40 0M28 20a12 12 0 0 1 24 0M60 20a20 20 0 0 1 40 0M68 20a12 12 0 0 1 24 0'/%3E%3C/g%3E%3C/svg%3E");
  }
}

/* 各语言优先使用本语言的字形（日文旧字形 / 韩文明朝 / 英文衬线） */
html[lang="ja"] {
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", "Source Han Serif JP", serif;
  --sans: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
}
html[lang="ko"] {
  --serif: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", "Noto Serif CJK KR", "Source Han Serif K", serif;
  --sans: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif;
}
html[lang="en"] {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--serif);
  color: var(--ink);
  background-color: var(--washi);
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -10%, var(--shu-soft), transparent 70%),
    var(--pattern);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--shu); text-underline-offset: 3px; }
a:hover { color: var(--shu-deep); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-weight: 700; line-height: 1.35; margin: 0; }
p { margin: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--washi); padding: 8px 14px; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--washi); }

/* ---------- Header / Footer ---------- */
.site-header {
  width: 100%; max-width: 1040px; margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 22px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark { width: 40px; height: 35px; color: var(--shu); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-size: 20px; letter-spacing: .22em; font-weight: 700; }
.brand-kana { font-size: 11px; letter-spacing: .3em; color: var(--ink-soft); font-family: var(--sans); }

.user-chip {
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--washi) 70%, transparent);
  border: 1px solid var(--gold-soft); border-radius: 999px; padding: 4px 6px 4px 4px;
  backdrop-filter: blur(6px); font-family: var(--sans); min-width: 0;
}
.avatar-wrap { display: block; flex: none; border-radius: 50%; overflow: hidden; background: var(--washi-2); }
.avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar-fallback { display: grid; place-items: center; flex: none; border-radius: 50%; color: #fff; background: var(--shu); font-family: var(--serif); font-weight: 700; }
.avatar-32 { width: 32px; height: 32px; font-size: 14px; }
.avatar-56 { width: 56px; height: 56px; font-size: 24px; }
.user-names { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-handle { font-size: 11px; color: var(--ink-soft); max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-form { margin: 0; }
.btn-text {
  font: inherit; font-size: 12px; color: var(--ink-soft); background: none; border: 1px solid transparent;
  padding: 6px 10px; border-radius: 999px; cursor: pointer;
}
.btn-text:hover { color: var(--shu); border-color: var(--gold-soft); }

.site-main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 28px 22px 48px; outline: none; }

.site-footer {
  text-align: center; font-size: 12px; color: var(--ink-faint); font-family: var(--sans);
  padding: 22px 20px max(26px, env(safe-area-inset-bottom)); letter-spacing: .06em;
}
.site-footer p + p { margin-top: 6px; }
.footer-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.footer-links a { color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--washi);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 28px; border-radius: 999px; border: 1px solid transparent;
  background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; font-weight: 600;
  letter-spacing: .08em; text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { color: var(--fg); transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .35); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-x { --bg: #0f0f0f; --fg: #fff; }
@media (prefers-color-scheme: dark) { .btn-x { --bg: #f4f1ea; --fg: #0f0f0f; } }
.btn-x .x-logo { width: 18px; height: 18px; }
.btn-primary { --bg: var(--shu); --fg: #fff; box-shadow: 0 8px 22px -10px var(--shu); }
.btn-primary:hover { background: var(--shu-deep); }
.btn-ghost { --bg: transparent; --fg: var(--ink); border-color: var(--gold-soft); }
.btn-ghost:hover { --fg: var(--shu); }
.btn-lg { min-height: 64px; padding: 12px 48px; flex-direction: column; gap: 0; line-height: 1.25; }
.btn-lg .btn-label { font-family: var(--serif); font-size: 22px; letter-spacing: .5em; text-indent: .5em; }
.btn-lg .btn-sub { font-size: 11px; font-weight: 400; letter-spacing: .25em; opacity: .85; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .7; cursor: progress; transform: none; box-shadow: none; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: .3em; color: var(--gold); font-family: var(--sans);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 22px; height: 1px; background: var(--gold-soft); }

.notice { padding: 12px 16px; border-radius: 10px; font-family: var(--sans); font-size: 14px; }
.notice-error { background: var(--shu-soft); color: var(--shu-deep); border: 1px solid color-mix(in srgb, var(--shu) 30%, transparent); }
@media (prefers-color-scheme: dark) { .notice-error { color: #ffb4aa; } }
.fine-print { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; }

/* ---------- Landing ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center;
  padding: 24px 0 40px;
}
.hero-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.hero-title { font-size: clamp(32px, 5.4vw, 54px); letter-spacing: .06em; line-height: 1.3; }
.hero-lead { font-size: 16.5px; color: var(--ink-soft); max-width: 32em; line-height: 2; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-art { position: relative; height: 420px; }
.sample-slip {
  position: absolute; left: 50%; top: 10px; width: 132px; height: 400px;
  transform: translateX(-30%) rotate(6deg);
  background: linear-gradient(180deg, var(--paper), #f3e8d2);
  border: 1px solid var(--paper-edge); border-radius: 4px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; align-items: center; padding: 18px 0; gap: 14px; color: #2a2420;
  animation: float 6s ease-in-out infinite;
}
.sample-slip::before {
  content: ""; position: absolute; inset: 7px; border: 1px solid rgba(176, 137, 47, .45); border-radius: 2px; pointer-events: none;
}
.sample-slip-2 { transform: translateX(-105%) rotate(-7deg); top: 40px; opacity: .92; animation-delay: -3s; animation-name: float2; }
.sample-slip > span { flex-shrink: 0; white-space: nowrap; }
.sample-no { font-size: 12px; letter-spacing: .3em; color: #6f6355; writing-mode: vertical-rl; }
.sample-level {
  writing-mode: vertical-rl; font-size: 50px; line-height: 1; font-weight: 900; color: #c8372d; letter-spacing: .1em;
  padding: 10px 8px; border: 2px solid rgba(200, 55, 45, .65); border-radius: 4px;
}
.sample-slip-2 .sample-level { color: #b0892f; border-color: rgba(176, 137, 47, .6); }
.sample-level .rank { padding-left: .28em; }
.sample-level .rank rt { font-size: .26em; padding-left: .2em; letter-spacing: .12em; color: #6f6355; font-weight: 500; }
.sample-poem { writing-mode: vertical-rl; font-size: 14px; letter-spacing: .25em; color: #2a2420; }
@keyframes float { 0%, 100% { transform: translateX(-30%) rotate(6deg) translateY(0); } 50% { transform: translateX(-30%) rotate(5deg) translateY(-12px); } }
@keyframes float2 { 0%, 100% { transform: translateX(-105%) rotate(-7deg) translateY(0); } 50% { transform: translateX(-105%) rotate(-6deg) translateY(-10px); } }

.section-title {
  display: flex; align-items: center; gap: 14px; justify-content: center;
  font-size: 20px; letter-spacing: .4em; text-indent: .4em; margin-bottom: 22px;
}
.section-title::before, .section-title::after { content: ""; flex: 0 1 60px; height: 1px; background: var(--gold-soft); }
.steps, .levels { padding: 28px 0; }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step-list li {
  background: color-mix(in srgb, var(--paper) 60%, transparent); border: 1px solid var(--gold-soft);
  border-radius: var(--radius); padding: 22px 20px; position: relative;
}
@media (prefers-color-scheme: dark) { .step-list li { background: rgba(255, 255, 255, .03); } }
.step-no {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--shu); color: #fff; font-size: 17px; margin-bottom: 10px;
}
.step-list h3 { font-size: 17px; letter-spacing: .12em; margin-bottom: 6px; }
.step-list p { font-size: 14px; color: var(--ink-soft); font-family: var(--sans); line-height: 1.8; }
.level-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.level-chip {
  min-width: 64px; text-align: center; padding: 8px 14px; border-radius: 6px; font-size: 18px; letter-spacing: .12em;
  border: 1px solid currentColor; background: color-mix(in srgb, currentColor 7%, transparent);
}
.level-chip.is-good { color: var(--shu); }
.level-chip.is-mid { color: var(--gold); }
.level-chip.is-bad { color: var(--ink-soft); }
.levels-note { text-align: center; margin-top: 16px; color: var(--ink-soft); font-size: 14px; font-family: var(--sans); }

/* ---------- Draw ---------- */
.draw { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding-top: 10px; }
.draw-title { font-size: clamp(24px, 4.2vw, 34px); letter-spacing: .1em; overflow-wrap: anywhere; }
.draw-lead { color: var(--ink-soft); font-size: 15px; }
.box-stage { position: relative; width: min(220px, 56vw); margin: 18px 0 8px; }
.kuji-box { width: 100%; height: auto; transform-origin: 50% 85%; filter: drop-shadow(0 18px 18px rgba(60, 30, 10, .25)); }
.kuji-label { font-family: var(--serif); font-weight: 700; }
.kuji-stick-out { transform-box: view-box; transform: translateY(60px); opacity: 0; transition: transform .7s cubic-bezier(.2, .9, .25, 1.15), opacity .2s; }
.box-shadow {
  position: absolute; left: 15%; right: 15%; bottom: -14px; height: 18px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 20, 5, .28), transparent);
}
.box-stage.is-shaking .kuji-box { animation: shake .42s ease-in-out infinite; }
.box-stage.is-shaking .box-shadow { animation: shadow .42s ease-in-out infinite; }
.box-stage.is-drawn .kuji-box { transform: rotate(-14deg); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.box-stage.is-drawn .kuji-stick-out { transform: translateY(-42px); opacity: 1; transition-delay: .25s; }
.box-stage.is-drawn::after { /* 签落下时的一圈金光 */
  content: ""; position: absolute; left: 50%; top: 4%; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 120, .55), transparent); animation: glow 1.2s ease-out .3s both; pointer-events: none;
}
@keyframes glow { from { transform: scale(.3); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes shake {
  0%, 100% { transform: rotate(-9deg) translateY(0); }
  25% { transform: rotate(0deg) translateY(-10px); }
  50% { transform: rotate(9deg) translateY(0); }
  75% { transform: rotate(0deg) translateY(-6px); }
}
@keyframes shadow { 0%, 50%, 100% { transform: scaleX(1); opacity: 1; } 25%, 75% { transform: scaleX(.8); opacity: .7; } }
.draw-form { margin: 14px 0 0; }
.draw-status { min-height: 1.75em; color: var(--gold); letter-spacing: .3em; font-size: 14px; }

/* ---------- Result slip ---------- */
.result { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.slip {
  --accent: var(--shu);
  width: 100%; max-width: 600px; position: relative; color: #2a2420;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .7), transparent 40%),
    linear-gradient(180deg, #fdf9f0 0%, #f7efdf 100%);
  border: 1px solid var(--paper-edge); border-radius: 6px; box-shadow: var(--shadow-lg);
  padding: 14px;
}
.tier-mid .slip { --accent: #a77d22; }
.tier-bad .slip { --accent: var(--ai); }
.slip::before, .slip::after { /* 签纸上下的朱色封带 */
  content: ""; position: absolute; left: 0; right: 0; height: 6px; background: var(--accent); opacity: .9;
}
.slip::before { top: 0; border-radius: 6px 6px 0 0; }
.slip::after { bottom: 0; border-radius: 0 0 6px 6px; }
.slip-inner {
  border: 1px solid rgba(176, 137, 47, .45); outline: 1px solid rgba(176, 137, 47, .2); outline-offset: 4px;
  border-radius: 3px; padding: 26px clamp(18px, 5vw, 44px) 34px; position: relative;
}
.slip-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #6f6355; letter-spacing: .25em; }
.slip-shrine { display: inline-flex; align-items: center; gap: 8px; }
.slip-torii { width: 20px; height: 18px; color: var(--accent); }
.slip-no { font-size: 15px; color: #2a2420; letter-spacing: .3em; }

.slip-hero { display: flex; flex-direction: column; align-items: center; padding: 26px 0 8px; position: relative; }
.level { position: relative; display: grid; place-items: center; min-height: 236px; min-width: 236px; }
.level::before { /* 朱印圆环，始终以签位文字为中心 */
  content: ""; position: absolute; left: 50%; top: 50%; width: 224px; height: 224px; margin: -112px 0 0 -112px; border-radius: 50%;
  border: 3px double color-mix(in srgb, var(--accent) 45%, transparent); transform: rotate(-4deg); pointer-events: none;
}
.level-name {
  display: block; writing-mode: vertical-rl; text-orientation: upright;
  font-size: clamp(56px, 14vw, 76px); line-height: 1.05; font-weight: 900; letter-spacing: .06em;
  color: var(--accent); min-height: 1.4em; padding: 10px 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 6px 18px color-mix(in srgb, var(--accent) 25%, transparent);
}
/* 签位（所有语言都是日文）：汉字 + 平假名注音；竖排时注音在右侧 */
.rank { font-family: var(--serif-ja); ruby-position: over; ruby-align: center; }
.rank rt { font-family: var(--serif-ja); font-weight: 500; color: #85796a; text-shadow: none; text-orientation: upright; }
.level-name .rank { padding-left: .3em; } /* 与右侧注音等宽，让汉字落在朱印圆环正中 */
.level-name .rank rt { font-size: .24em; letter-spacing: .14em; padding-left: .3em; color: #6f6355; }
.level-name[data-len="1"] { font-size: clamp(76px, 19vw, 104px); }
.level-name[data-len="1"] .rank rt { font-size: .2em; }
.level-headline { margin-top: 6px; font-size: 19px; letter-spacing: .3em; text-indent: .3em; font-weight: 700; }

.poem { margin: 22px 0 6px; display: flex; justify-content: center; }
.poem-lines {
  margin: 0; writing-mode: vertical-rl; text-orientation: upright;
  font-size: 19px; letter-spacing: .38em; line-height: 2.1; padding: 6px 22px;
  border-left: 1px solid rgba(176, 137, 47, .3); border-right: 1px solid rgba(176, 137, 47, .3);
}
.poem-lines p { white-space: nowrap; }
.poem-lines p:nth-child(2) { margin-left: .9em; } /* 两联之间留白 */

.divider { display: flex; align-items: center; gap: 12px; margin: 28px 0 16px; color: var(--accent); font-size: 14px; letter-spacing: .5em; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(176, 137, 47, .55), transparent); }
.divider span { padding-left: .5em; }
.message { font-size: 16px; line-height: 2.05; text-align: justify; }

.cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cat { background: rgba(176, 137, 47, .07); border: 1px solid rgba(176, 137, 47, .22); border-radius: 8px; padding: 12px 14px; }
.cat-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.cat-name { font-weight: 700; letter-spacing: .3em; font-size: 15px; }
.stars { letter-spacing: 1px; font-size: 14px; white-space: nowrap; }
.star { color: rgba(42, 36, 32, .18); }
.star.on { color: var(--accent); }
.cat-text { font-size: 13.5px; line-height: 1.85; color: #4b4136; font-family: var(--sans); }

.classic { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.classic-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(176, 137, 47, .35); align-items: baseline; }
.classic dt { flex: none; font-weight: 700; color: var(--accent); letter-spacing: .2em; }
.classic dd { margin: 0; font-size: 14.5px; }

.lucky { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lucky-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  padding: 12px 6px; border-radius: 8px; background: rgba(176, 137, 47, .07); border: 1px solid rgba(176, 137, 47, .22);
}
.lucky-wide { grid-column: 1 / -1; flex-direction: row; gap: 14px; }
.lucky dt { font-size: 12px; letter-spacing: .2em; color: #85796a; font-family: var(--sans); }
.lucky dd { margin: 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.lucky-number { font-size: 26px !important; color: var(--accent); font-family: Georgia, var(--serif); }
.swatch { width: 18px; height: 18px; color: #2a2420; }

.yiji { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.yiji-col { border-radius: 8px; padding: 14px 16px; display: flex; gap: 14px; align-items: flex-start; }
.yi { background: rgba(93, 122, 74, .09); border: 1px solid rgba(93, 122, 74, .3); }
.ji { background: rgba(200, 55, 45, .07); border: 1px solid rgba(200, 55, 45, .25); }
.yiji-title span {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 20px;
}
.yi .yiji-title span { background: var(--matcha); }
.ji .yiji-title span { background: #c8372d; }
.yiji ul { margin: 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.95; }

.closing { margin-top: 28px; text-align: center; font-size: 16px; letter-spacing: .12em; color: #4b4136; }
.seal {
  position: absolute; right: clamp(14px, 4vw, 28px); bottom: 18px; width: 46px; padding: 4px 0;
  border: 2px solid var(--accent); color: var(--accent); border-radius: 4px; opacity: .55;
  display: flex; flex-direction: column; align-items: center; font-size: 12px; line-height: 1.3; transform: rotate(-6deg);
}

.result-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }
.next-draw { font-family: var(--sans); font-size: 13.5px; color: var(--ink-soft); }
.next-draw time { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }

/* 签纸上的“为 @xxx 抽出” */
.slip-owner {
  display: flex; align-items: center; gap: 14px; margin: 18px auto 0; padding: 10px 18px 10px 10px; width: fit-content; max-width: 100%;
  border: 1px solid rgba(176, 137, 47, .35); border-radius: 999px; background: rgba(255, 255, 255, .55);
}
.owner-avatar { box-shadow: 0 0 0 2px #fdf9f0, 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent); }
.owner-text { min-width: 0; line-height: 1.45; }
.owner-name { font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18em; }
.owner-meta { font-size: 12.5px; color: #6f6355; font-family: var(--sans); }
.owner-handle { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
.owner-date::before { content: " · "; }

.action-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn-icon { width: 18px; height: 18px; }
.share-link { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); text-align: center; }

/* 分享页 */
.share { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.mini-cats { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; }
.mini-cats li { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px dashed rgba(176, 137, 47, .35); }
.share-card { margin: 0; width: 100%; max-width: 600px; }
.share-card img { width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow-sm); border: 1px solid var(--gold-soft); }

/* 揭签动画（只在刚抽完时播放一次） */
.is-reveal .slip { animation: unfold .9s cubic-bezier(.2, .8, .2, 1) both; transform-origin: 50% 0; }
.is-reveal .level-name { animation: stamp .6s cubic-bezier(.2, 1.6, .35, 1) .65s both; }
.is-reveal .level::before { animation: ring .7s ease .75s both; }
.is-reveal .poem-lines p { animation: ink .8s ease both; }
.is-reveal .poem-lines p:nth-child(1) { animation-delay: 1s; }
.is-reveal .poem-lines p:nth-child(2) { animation-delay: 1.15s; }
.is-reveal .poem-lines p:nth-child(3) { animation-delay: 1.3s; }
.is-reveal .poem-lines p:nth-child(4) { animation-delay: 1.45s; }
@keyframes unfold {
  0% { clip-path: inset(0 0 100% 0); transform: translateY(-20px) scale(.97); opacity: .4; }
  100% { clip-path: inset(0 0 0 0); transform: none; opacity: 1; }
}
@keyframes stamp { 0% { transform: scale(2.4) rotate(-12deg); opacity: 0; } 70% { transform: scale(.94) rotate(-2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes ring { from { transform: scale(1.5) rotate(-4deg); opacity: 0; } to { transform: scale(1) rotate(-4deg); opacity: 1; } }
@keyframes ink { from { opacity: 0; filter: blur(4px); transform: translateY(-8px); } to { opacity: 1; filter: none; transform: none; } }

/* 樱花瓣（JS 生成，仅大吉/吉/中吉） */
.petals { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.petal {
  position: absolute; top: -20px; width: 12px; height: 10px; border-radius: 12px 1px 12px 1px;
  background: linear-gradient(135deg, #ffd6df, #f3a5b8); opacity: .9;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translate3d(var(--dx, 40px), 105vh, 0) rotate(var(--rot, 540deg)); opacity: .2; }
}

/* ---------- Prose / Error ---------- */
.prose { max-width: 680px; margin: 0 auto; font-family: var(--sans); font-size: 15.5px; line-height: 1.95; }
.prose h1 { font-family: var(--serif); font-size: 30px; letter-spacing: .15em; margin-bottom: 18px; }
.prose h2 { font-family: var(--serif); font-size: 19px; letter-spacing: .1em; margin: 28px 0 8px; color: var(--shu); }
.prose ul { padding-left: 1.3em; }
.prose code { font-size: .9em; background: var(--shu-soft); padding: 1px 6px; border-radius: 4px; }
.prose .btn { margin-top: 24px; }

.error-page { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 0; }
.error-slip {
  width: 84px; height: 200px; background: linear-gradient(180deg, #fdf9f0, #f3e8d2); border: 1px solid var(--paper-edge);
  border-radius: 4px; box-shadow: var(--shadow-lg); display: grid; place-items: center; transform: rotate(-5deg); margin-bottom: 10px;
}
.error-slip span { font-size: 46px; font-weight: 900; color: var(--ai); }
.error-code { font-family: var(--sans); color: var(--ink-faint); letter-spacing: .4em; font-size: 13px; }
.error-page h1 { font-size: 28px; letter-spacing: .2em; }
.error-message { color: var(--ink-soft); max-width: 26em; margin-bottom: 12px; font-family: var(--sans); }

/* ---------- 语言切换 ---------- */
.header-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lang-switch ul { list-style: none; margin: 0; padding: 3px; display: flex; gap: 2px; border: 1px solid var(--gold-soft); border-radius: 999px; background: color-mix(in srgb, var(--washi) 70%, transparent); }
.lang-switch a {
  display: block; padding: 4px 10px; border-radius: 999px; font-family: system-ui, -apple-system, sans-serif; font-size: 12.5px; line-height: 1.4;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
}
.lang-switch a:hover { color: var(--shu); background: var(--shu-soft); }
.lang-switch a.is-current { background: var(--shu); color: #fff; }

/* ---------- 页脚开发者署名 ---------- */
.dev-credit {
  display: flex; align-items: center; justify-content: center; gap: 10px 14px; flex-wrap: wrap;
  margin: 12px auto 4px; padding: 8px 8px 8px 16px; width: fit-content; max-width: 100%;
  border: 1px dashed var(--gold-soft); border-radius: 999px; background: color-mix(in srgb, var(--paper) 35%, transparent);
}
.dev-line { color: var(--ink-soft); letter-spacing: .03em; }
.dev-name { color: var(--ink); font-weight: 600; }
.dev-handle { color: var(--shu); font-weight: 600; text-decoration: none; }
.dev-handle:hover { text-decoration: underline; }
.dev-follow {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--shu) 55%, transparent); color: var(--shu); background: var(--shu-soft);
  font-size: 12px; font-weight: 600; text-decoration: none; letter-spacing: .05em; transition: background-color .15s, color .15s;
}
.dev-follow:hover { background: var(--shu); color: #fff; }
.dev-follow .x-logo { width: 12px; height: 12px; }
.site-footer .dev-credit + .footer-links { margin-top: 8px; }

/* ---------- 横排语言（韩 / 英）的版式 ---------- */
.is-horizontal .poem-lines {
  writing-mode: horizontal-tb; text-orientation: mixed; letter-spacing: .02em; line-height: 1.9; text-align: center;
  border: 0; border-top: 1px solid rgba(176, 137, 47, .3); border-bottom: 1px solid rgba(176, 137, 47, .3); padding: 14px 6px; font-size: 18px;
}
.is-horizontal .poem-lines p { white-space: normal; }
.is-horizontal .poem-lines p:nth-child(2) { margin-left: 0; margin-bottom: .6em; }
.lang-en .poem-lines { font-style: italic; }
.is-horizontal .level-headline { letter-spacing: .04em; text-indent: 0; text-align: center; }
.lang-en .divider, .lang-en .cat-name, .lang-en .classic dt, .lang-en .section-title, .lang-en .eyebrow { letter-spacing: .12em; }
.lang-ko .divider, .lang-ko .section-title { letter-spacing: .2em; }
.lang-ko .cat-name, .lang-ko .classic dt, .lang-ko .eyebrow, .lang-ko .lucky dt, .lang-ko .slip-head, .lang-ko .brand-kana { letter-spacing: .06em; }
.is-horizontal .classic { grid-template-columns: 1fr; }
.lang-ko .classic dt { min-width: 7.5em; }
.lang-en .classic dt { min-width: 9em; }
.is-horizontal .yiji-col { flex-direction: column; gap: 8px; }
.is-horizontal .yiji-title span { white-space: nowrap; max-width: none; }
.lang-en .lucky dt, .lang-en .slip-head, .lang-en .brand-kana { letter-spacing: .06em; }
.is-horizontal .brand-name { letter-spacing: .06em; }
.is-horizontal .btn-lg .btn-label { letter-spacing: .08em; text-indent: 0; }
.is-horizontal .hero-title { letter-spacing: .01em; }
.lang-ja .hero-title { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: .03em; }
.lang-en .yiji-title span { width: auto; min-width: 40px; padding: 0 10px; border-radius: 20px; font-size: 14px; letter-spacing: .05em; }
.lang-ko .yiji-title span { width: auto; min-width: 40px; padding: 4px 10px; border-radius: 16px; font-size: 13px; height: auto; line-height: 1.3; max-width: 5.5em; text-align: center; }
.lang-en .sample-no { letter-spacing: .08em; }
.is-horizontal .sample-poem { letter-spacing: .06em; font-size: 13px; }
.level-chip { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.3; }
.level-chip-name { font-family: var(--serif-ja); }
.level-chip-sub { font-size: 11px; letter-spacing: .08em; opacity: .75; font-family: var(--serif-ja); }
.level-chip-gloss { font-size: 11.5px; letter-spacing: .02em; font-family: var(--sans); margin-top: 2px; color: var(--ink-soft); }
.seal-4 { width: 40px; font-size: 11px; }
.seal-h { width: auto; padding: 3px 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.lang-en .error-slip span { font-family: Georgia, var(--serif); }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 10px; padding-top: 8px; }
  .hero-art { height: 360px; order: -1; }
  .sample-slip { height: 310px; width: 100px; gap: 10px; }
  .sample-level { font-size: 34px; }
  .sample-poem { font-size: 12px; letter-spacing: .15em; }
  .sample-no { display: none; }
  .step-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .site-header { padding-left: 14px; padding-right: 14px; }
  .site-main { padding: 18px 14px 36px; }
  .brand-name { font-size: 17px; letter-spacing: .14em; }
  .brand-kana { display: none; }
  .user-names { display: none; }
  .site-header { flex-wrap: wrap; row-gap: 10px; }
  .header-right { width: 100%; justify-content: space-between; }
  .lang-switch a { padding: 4px 8px; font-size: 12px; }
  .dev-credit { border-radius: 14px; padding: 10px 12px; }
  .hero-title { font-size: 32px; }
  .hero-actions, .hero-actions .btn { width: 100%; }
  .slip { padding: 8px; }
  .slip-inner { padding: 20px 16px 30px; }
  .poem-lines { font-size: 17px; letter-spacing: .3em; }
  .cats, .classic, .yiji { grid-template-columns: 1fr; }
  .lucky { grid-template-columns: repeat(2, 1fr); }
  .mini-cats { grid-template-columns: repeat(2, 1fr); }
  .slip-owner { padding-right: 14px; }
  .owner-name { max-width: 11em; }
  .owner-date { display: block; }
  .owner-date::before { content: none; }
  .action-row, .action-row .btn { width: 100%; }
  .level { min-height: 204px; min-width: 204px; }
  .level::before { width: 192px; height: 192px; margin: -96px 0 0 -96px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .petals { display: none; }
}

@media print {
  body { background: #fff; }
  .site-header, .site-footer, .result-actions, .skip-link { display: none; }
  .slip { box-shadow: none; }
}