:root { color-scheme: dark; --bg: #0c1422; --panel: #111f2f; --text: #eef0ec; --muted: #aeb8bf; --gold: #dfbc75; --gold-soft: #897343; --line: #665838; --serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", Georgia, serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.85 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
.brand { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 3.5%; border-bottom: 1px solid #695331; background: #08121e; color: var(--gold); }
.brand-name { display: flex; align-items: center; gap: 20px; font: 24px/1.3 Georgia, serif; letter-spacing: .12em; }
.guild-mark { width: 36px; height: 36px; stroke: var(--gold); fill: none; stroke-width: 1.3; flex: 0 0 auto; }
.brand-caption { font-family: var(--serif); letter-spacing: .25em; font-size: 17px; }
.brand-caption::before, .brand-caption::after { content: '✧'; display: inline-block; margin: 0 14px; color: var(--gold-soft); }
main { max-width: 1600px; margin: 0 auto; padding: 0 3.2%; }
.hero { position: relative; min-height: 0; aspect-ratio: 2170 / 725; margin: 0 -2% 24px; border: 1px solid var(--gold); background: #0a1825 url('./guild-banner.png') center / cover no-repeat; display: flex; align-items: center; isolation: isolate; }
.hero::before, .hero::after { position: absolute; content: ''; width: 12px; height: 12px; border: 1px solid var(--gold); pointer-events: none; }
.hero::before { left: 4px; top: 4px; border-right: 0; border-bottom: 0; }.hero::after { right: 4px; bottom: 4px; border-left: 0; border-top: 0; }
.hero-copy { padding: 35px 42px; text-shadow: 0 2px 7px #02080f, 0 0 26px #02080f; }
h1, h2, h3, p { margin: 0; }
h1 { font: 700 clamp(29px, 3.1vw, 46px)/1.55 var(--serif); letter-spacing: .04em; }
.hero-subtitle { font: 600 clamp(18px, 1.9vw, 28px)/1.7 var(--serif); margin-top: 5px; }
.hero-note { margin-top: 13px; font-size: 17px; letter-spacing: .06em; }
.hero-note span { color: var(--gold); margin-right: 10px; }
.board-heading { display: flex; align-items: center; gap: 25px; }
.board-heading h2 { font: 700 30px/1.5 var(--serif); letter-spacing: .06em; flex-shrink: 0; }
.heading-rule { flex: 1; height: 1px; background: #6d5938; position: relative; }
.heading-rule::before { content: '◇'; position: absolute; color: var(--gold); left: 0; top: -15px; font-size: 16px; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--gold); outline: 1px solid #66542f; outline-offset: 3px; border-radius: 1px; background: #0a1522; color: var(--gold); padding: 10px 18px; font: 600 16px/1.5 var(--serif); cursor: pointer; min-height: 46px; flex-shrink: 0; transition: background .2s, box-shadow .2s; }
button:hover { background: #20312e; box-shadow: 0 0 16px #ddbb7028; } button:disabled { opacity: .65; cursor: wait; }
button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
button:disabled svg { animation: turn 2s linear infinite; }
:focus-visible { outline: 2px solid #f7dba1; outline-offset: 5px; }
.notice { min-height: 24px; margin: 8px 0 12px; font-size: 13px; color: var(--muted); }
.notice.has-error, .error-message { color: #ffc3a0; }
.quest-list { display: grid; gap: 22px; }
.quest { position: relative; border: 1px solid #8c7343; border-left: 4px solid var(--gold); border-radius: 9px 2px 9px 2px; padding: 0 25px; background: linear-gradient(110deg, #132233, #101c29); box-shadow: -3px 0 13px #e5bd6820, inset 0 0 25px #0a142440; }
.quest::before, .quest::after { position: absolute; content: '◆'; color: var(--gold); font-size: 11px; left: -7px; line-height: 1; }
.quest::before { top: -4px; } .quest::after { bottom: -4px; }
.quest-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0 16px; border-bottom: 1px solid var(--line); }
.quest-title { display: flex; align-items: center; gap: 17px; flex-wrap: wrap; }
.quest-title h2 { font: 700 25px/1.5 var(--serif); letter-spacing: .015em; overflow-wrap: anywhere; }
.icon { width: 23px; height: 23px; stroke: var(--gold); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.quest-emblem { width: 36px; height: 36px; stroke-width: 1.2; }
.status { display: inline-block; font-size: 14px; line-height: 1.6; padding: 3px 12px; font-weight: 600; border: 1px solid transparent; border-radius: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.status.done { background: #196a40; border-color: #2c8a50; color: #f1ffef; }
.status.active { background: #4c262e; color: #ffcfcc; border-color: #79414a; }
.status.verify { background: #493d21; color: #ffe6a3; border-color: #756139; }
.status.blocked, .status.error { background: #4b3023; color: #ffd3af; border-color: #805039; }
.status.parked { background: #243b54; color: #c1e0ff; border-color: #416380; }
.clear-stamp { display: inline-flex; align-items: center; gap: 9px; font: 22px/1.3 Georgia, serif; letter-spacing: .06em; color: #f0cb7d; white-space: nowrap; flex-shrink: 0; }
.laurel { width: 26px; height: 36px; stroke-width: 1; fill: var(--gold); }
.laurel.mirrored { transform: scaleX(-1); }
.quest-columns { display: grid; grid-template-columns: 1fr 1.2fr 1.1fr; padding: 18px 0; }
.quest-section { padding: 0 22px; min-width: 0; }
.quest-section:first-child { padding-left: 6px; }
.quest-section:last-child { padding-right: 0; }
.quest-section + .quest-section { border-left: 1px solid var(--line); }
.quest-section h3 { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 1.7; margin-bottom: 10px; font-weight: 700; }
.quest-section p, .quest-section ul { font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
.quest-section > p, .quest-section ul { margin-left: 37px; }
.quest-section ul { margin-top: 0; margin-bottom: 0; padding-left: 18px; }
.quest-section li + li { margin-top: 4px; }
.quest-section .previous-date { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.quest-section .comparison-note { font-size: 12px; color: #d4bd89; margin-top: 12px; }
.next-guidance { font-weight: 600; color: #f6e1af; margin-bottom: 8px; }
.muted { color: var(--muted); }
.quest-footer { border-top: 1px solid var(--line); min-height: 61px; display: flex; align-items: center; padding: 12px 0; padding-right: 205px; }
.report-time { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; }
.report-time .icon { margin-right: 6px; }
.report-age { color: #e8c473; padding-left: 20px; margin-left: 10px; border-left: 1px solid #79623a; font-size: 14px; font-weight: 600; }
.source-record { border-top: 0; }
.source-record summary { position: absolute; right: 25px; bottom: 18px; font-size: 14px; color: var(--gold); cursor: pointer; list-style: none; user-select: none; }
.source-record summary::-webkit-details-marker { display: none; }
.source-record summary::after { content: ''; display: inline-block; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 17px; }
.source-record[open] { padding-bottom: 20px; }
.source-record[open] summary { position: static; text-align: right; padding: 0 0 14px; }
.source-record[open] summary::after { transform: rotate(135deg); }
.source-contents { padding: 20px; border: 1px solid #435165; background: #0c1725; font-size: 14px; }
.source-note { color: var(--muted); margin-bottom: 14px; }
dl { margin: 0 0 20px; display: grid; grid-template-columns: 155px minmax(0, 1fr); gap: 12px 20px; }
dt { color: #d8c297; } dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
a { color: #f0cf8f; text-underline-offset: 4px; }
.empty { border: 1px solid var(--line); padding: 70px 24px; text-align: center; color: var(--muted); }
footer { padding: 24px 0 30px; text-align: center; color: var(--muted); font-size: 13px; }
footer p + p { font-size: 12px; margin-top: 4px; }
.celebration { position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 15px); width: max-content; max-width: calc(100vw - 40px); padding: 17px 28px; border: 1px solid #efcf86; background: #183126; box-shadow: 0 0 35px #d1b36b30; color: #ffe6a7; font-weight: 600; text-align: center; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 5; }
.celebration.visible { opacity: 1; transform: translate(-50%, 0); }
.just-cleared { animation: quest-clear 1.4s ease-out; }
@keyframes quest-clear { 0%, 35% { box-shadow: 0 0 32px #e8c37580, inset 0 0 30px #af8e4020; } 100% { box-shadow: -3px 0 13px #e5bd6820; } }
@keyframes turn { to { transform: rotate(360deg); } }
@media (max-width: 1100px) { .brand-name { font-size: 20px; gap: 14px; } .brand-caption { font-size: 14px; }.quest { padding: 0 20px; } .quest-section { padding: 0 16px; } .quest-section > p, .quest-section ul { margin-left: 0; } .quest-title h2 { font-size: 23px; } .clear-stamp { font-size: 18px; } .report-age { margin-left: 0; padding-left: 12px; } .quest-footer { padding-right: 0; } .source-record summary { position: static; padding: 0 0 15px; text-align: right; } }
@media (max-width: 760px) { .brand { padding: 14px 20px; min-height: 62px; } .brand-name { font-size: 16px; letter-spacing: .05em; gap: 10px; } .guild-mark { width: 27px; height: 27px; } .brand-caption { display: none; } main { padding: 0 20px; } .hero { margin: 0 -10px 24px; min-height: 0; aspect-ratio: auto; padding-top: 220px; display: block; background-size: auto 220px; background-position: 65% top; } .hero-copy { padding: 24px 20px; max-width: 100%; background: #0a1825; border-top: 1px solid var(--line); } h1 { font-size: clamp(23px, 5.7vw, 34px); } .hero-subtitle { font-size: 17px; margin-top: 9px; } .hero-note { font-size: 13px; margin-top: 15px; } .board-heading { flex-wrap: wrap; gap: 15px; } .board-heading h2 { font-size: 25px; } .heading-rule { min-width: 20px; } button { font-size: 14px; padding: 9px 14px; } .board-heading button { margin-left: auto; } .notice { margin: 12px 0 15px; font-size: 12px; } .quest-list { gap: 24px; } .quest { padding: 0 18px; } .quest-heading { flex-wrap: wrap; gap: 9px; padding-top: 20px; } .quest-title { gap: 10px; } .quest-emblem { width: 27px; height: 27px; } .quest-title h2 { font-size: 21px; } .status { font-size: 12px; } .clear-stamp { margin-left: 37px; font-size: 16px; } .laurel { width: 20px; height: 25px; } .quest-columns { grid-template-columns: 1fr; padding: 0; } .quest-section, .quest-section:first-child, .quest-section:last-child { padding: 18px 0; } .quest-section + .quest-section { border-left: 0; border-top: 1px solid #45505a; } .quest-section h3 { font-size: 15px; margin-bottom: 8px; } .quest-section p, .quest-section ul { font-size: 14px; } .quest-section ul { padding-left: 19px; } .report-time { font-size: 12px; gap: 7px; } .report-age { font-size: 13px; border-left: 0; margin-left: 36px; padding: 0; flex-basis: 100%; } .time-label { display: none; } .quest-footer { padding: 15px 0 10px; } .source-record summary { padding: 8px 0 18px; font-size: 13px; } .source-contents { padding: 15px; } dl { grid-template-columns: 1fr; gap: 5px; } dd { margin-bottom: 12px; } footer { font-size: 12px; } footer p + p { font-size: 11px; } }
@media (max-width: 400px) { .board-heading button { width: 100%; } .quest-title .status { margin-left: 37px; } .quest-title h2 { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* A stable, shared portrait atlas: four columns, three rows, no resampling. */
.enemy-portrait { width: 100%; aspect-ratio: 1; background-image: url('./enemy-atlas.png'); background-size: 400% 300%; background-repeat: no-repeat; background-color: #0a1220; }
.enemy-coin-goblin { background-position: 0 0; }
.enemy-spectral-knight { background-position: 33.333333% 0; }
.enemy-fire-dragon { background-position: 66.666667% 0; }
.enemy-cave-spider { background-position: 100% 0; }
.enemy-frost-wolf { background-position: 0 50%; }
.enemy-scorpion-king { background-position: 33.333333% 50%; }
.enemy-obsidian-golem { background-position: 66.666667% 50%; }
.enemy-swamp-hydra { background-position: 100% 50%; }
.enemy-kraken { background-position: 0 100%; }
.enemy-cursed-ent { background-position: 33.333333% 100%; }
.enemy-necromancer { background-position: 66.666667% 100%; }
.enemy-demon-lord { background-position: 100% 100%; }
.quest-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 22px 0; align-items: start; }
.quest-body .quest-columns { padding: 0; }
.quest-body .quest-section { padding: 0 16px; }
.quest-body .quest-section:first-child { padding-left: 0; }
.quest-body .quest-section:last-child { padding-right: 0; }
.quest-body .quest-section > p, .quest-body .quest-section ul { margin-left: 0; }
.wanted-poster { margin: 0; padding: 8px; border: 1px solid #b99a5d; outline: 1px solid #6e5934; outline-offset: -4px; background: #cbb681; color: #271f17; box-shadow: 0 4px 12px #03070d60; }
.wanted-header { text-align: center; padding: 2px 0 8px; }
.wanted-word { display: block; font: 700 25px/1.1 Georgia, serif; letter-spacing: .13em; margin-left: .13em; }
.wanted-label { display: block; font: 600 11px/1.6 var(--serif); letter-spacing: .3em; margin-top: 3px; }
.wanted-art { border: 1px solid #4f402a; overflow: hidden; display: grid; grid-template-columns: 1fr; }
.wanted-poster.is-dual .wanted-art { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wanted-poster.is-dual .enemy-portrait + .enemy-portrait { border-left: 1px solid #c9b57f; }
.wanted-poster figcaption { text-align: center; margin-top: 8px; font: 700 13px/1.6 var(--serif); }
.enemy-name { display: block; overflow-wrap: anywhere; }
.wanted-state { display: block; width: fit-content; margin: 7px auto 2px; padding: 1px 10px; border: 1px solid #596342; color: #2f4933; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.quest:not(.done) .wanted-state { color: #5f3922; border-color: #896e48; }
.missing-enemy { padding: 36px 8px; text-align: center; font-size: 13px; }
.enemy-catalog { margin-top: 28px; padding: 0 22px; border: 1px solid #665838; background: #101b2a; }
.enemy-catalog > summary { color: var(--gold); font-family: var(--serif); cursor: pointer; padding: 17px 0; }
.enemy-catalog > summary span { font: 12px/1.5 sans-serif; margin-left: 12px; color: var(--muted); }
.catalog-note { font-size: 13px; color: var(--muted); margin: 2px 0 20px; }
.enemy-catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding-bottom: 24px; }
.catalog-enemy { margin: 0; border: 1px solid #887342; background: #0a1523; }
.catalog-enemy figcaption { text-align: center; padding: 12px 6px; font: 600 15px/1.6 var(--serif); color: #efd6a3; }
@media (max-width: 1200px) { .quest-body { grid-template-columns: 160px minmax(0, 1fr); gap: 18px; } .quest-body .quest-section { padding: 0 12px; } .quest-body .quest-section h3 { gap: 8px; } .wanted-word { font-size: 22px; } }
@media (min-width: 761px) and (max-width: 1000px) { .quest-body .quest-columns { grid-template-columns: 1fr; } .quest-body .quest-section { padding: 16px 0; } .quest-body .quest-section:first-child { padding-top: 0; } .quest-body .quest-section + .quest-section { border-left: 0; border-top: 1px solid #45505a; } }
@media (max-width: 760px) { .quest-body { grid-template-columns: 1fr; gap: 0; padding: 20px 0 0; } .wanted-poster { width: 180px; justify-self: center; margin-bottom: 20px; } .wanted-poster.is-dual { width: 100%; max-width: 300px; } .quest-body .quest-section, .quest-body .quest-section:first-child, .quest-body .quest-section:last-child { padding: 18px 0; } .quest-body .quest-columns { border-top: 1px solid #45505a; } .enemy-catalog { padding: 0 14px; } .enemy-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .catalog-enemy figcaption { font-size: 12px; } }