/* css/hunter/lore.css */

/* =========================
   Hunter Lore
========================= */

.hunter-lore-card {
    margin: 14px 0 18px;
    padding: 0;

    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(251, 191, 36, .16), transparent 34%),
        linear-gradient(180deg, #fff7ed, #ffffff);

    border: 2px solid #f3d58b;

    color: #78350f;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 3px 0 #d6a94f,
        0 8px 18px rgba(15, 23, 42, .08);
}

.hunter-lore-card summary {
    cursor: pointer;

    padding: 13px 15px;

    color: #92400e;
    font-size: 14px;
    font-weight: 900;

    list-style: none;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hunter-lore-card summary::-webkit-details-marker {
    display: none;
}

.hunter-lore-card summary::after {
    content: "展開";

    padding: 2px 8px;
    border-radius: 999px;

    background: #fef3c7;
    color: #92400e;

    font-size: 11px;
    font-weight: 900;

    flex: 0 0 auto;
}

.hunter-lore-card summary:focus {
    outline: none;
}

.hunter-lore-card summary:focus-visible {
    outline: 3px solid rgba(245, 158, 11, .35);
    outline-offset: -3px;
}

.hunter-lore-card[open] summary::after {
    content: "收合";
}

.hunter-lore-content {
    padding: 0 15px 14px;
}

.hunter-lore-content p {
    max-width: none;
    width: 100%;

    margin: 0 0 10px;

    color: #78350f;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.7;
}

.hunter-lore-content p:last-child {
    margin-bottom: 0;
}

.hunter-story-status {
    display: grid;
    gap: 8px;
    margin: 14px 0 18px;
    padding: 18px;
    border: 2px solid #f3d58b;
    border-radius: 18px;
    background: #fff7ed;
    color: #78350f;
    font-weight: 800;
    text-align: center;
}

.hunter-story-status span {
    font-size: 13px;
    line-height: 1.6;
}

.hunter-story-status button {
    justify-self: center;
    padding: 8px 12px;
    border: 1px solid #d97706;
    border-radius: 999px;
    background: #92400e;
    color: #ffffff;
    font: inherit;
    cursor: pointer;
}

.hunter-story-status button:focus-visible {
    outline: 3px solid rgba(245, 158, 11, .4);
    outline-offset: 2px;
}

.hunter-story-chapter-status {
    margin: 0;
    padding: 14px;
    border-width: 1px;
    box-shadow: none;
}

/* =========================
   Scalable story reader
========================= */

.hunter-story-shell {
    margin: 14px 0 18px;
    overflow: hidden;
    border: 2px solid #d8a43b;
    border-radius: 20px;
    background: #fffbeb;
    color: #5b250f;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 3px 0 #b7791f,
        0 10px 24px rgba(92, 48, 10, .12);
}

.hunter-story-head {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(180, 120, 26, .34);
    background:
        radial-gradient(circle at 88% 10%, rgba(251, 191, 36, .26), transparent 32%),
        linear-gradient(135deg, #4a220e, #6f3514 58%, #3e1d0c);
    color: #fff7df;
}

.hunter-story-head-copy {
    display: grid;
    gap: 4px;
}

.hunter-story-kicker {
    color: #fbbf24;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .13em;
}

.hunter-story-head h3,
.hunter-story-head p,
.hunter-story-volume-head h4,
.hunter-story-volume-head p,
.hunter-story-reader-head h4 {
    margin: 0;
}

.hunter-story-head h3 {
    color: #fff7df;
    font-size: 21px;
    line-height: 1.35;
}

.hunter-story-head p {
    color: #f5dfb4;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.55;
}

.hunter-story-shell[data-story-view="reader"] .hunter-story-head {
    padding-block: 11px;
}

.hunter-story-shell[data-story-view="reader"] .hunter-story-head p {
    display: none;
}

.hunter-story-stage {
    padding: 14px;
}

.hunter-story-stage button {
    min-height: 44px;
    font-family: inherit;
}

.hunter-story-continue,
.hunter-story-volume-card,
.hunter-story-chapter-link,
.hunter-story-back-btn,
.hunter-story-nav-btn,
.hunter-story-directory-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;
}

.hunter-story-continue:focus-visible,
.hunter-story-volume-card:focus-visible,
.hunter-story-chapter-link:focus-visible,
.hunter-story-back-btn:focus-visible,
.hunter-story-nav-btn:focus-visible,
.hunter-story-directory-btn:focus-visible,
.hunter-story-reader-title:focus-visible,
.hunter-story-volume-head h4:focus-visible {
    outline: 3px solid rgba(245, 158, 11, .48);
    outline-offset: 3px;
}

.hunter-story-continue {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 12px;
    margin-bottom: 15px;
    padding: 13px 15px;
    border: 1px solid #d97706;
    border-radius: 16px;
    background:
        radial-gradient(circle at 92% 14%, rgba(255, 255, 255, .22), transparent 30%),
        linear-gradient(135deg, #b45309, #d97706);
    color: #ffffff;
    text-align: left;
    box-shadow: 0 4px 10px rgba(146, 64, 14, .2);
}

.hunter-story-continue > span {
    grid-row: 1 / span 2;
    align-self: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(69, 26, 3, .28);
    font-size: 12px;
    font-weight: 950;
}

.hunter-story-continue strong,
.hunter-story-continue small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hunter-story-continue strong {
    font-size: 15px;
    line-height: 1.35;
}

.hunter-story-continue small {
    color: #ffedd5;
    font-size: 11px;
    font-weight: 800;
}

.hunter-story-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 0 2px;
}

.hunter-story-section-head h4 {
    margin: 0;
    color: #6b2f0e;
    font-size: 16px;
}

.hunter-story-section-head > span {
    color: #9a5b24;
    font-size: 12px;
    font-weight: 850;
}

.hunter-story-volume-list,
.hunter-story-chapter-list {
    display: grid;
    gap: 10px;
}

.hunter-story-volume-card {
    position: relative;
    width: 100%;
    display: grid;
    gap: 4px;
    padding: 15px 58px 15px 15px;
    border: 1px solid #edc875;
    border-radius: 16px;
    background:
        radial-gradient(circle at 95% 12%, rgba(245, 158, 11, .14), transparent 34%),
        linear-gradient(180deg, #ffffff, #fff9eb);
    color: #5b250f;
    text-align: left;
    box-shadow: 0 2px 0 #d9ad55;
}

.hunter-story-volume-card:hover {
    transform: translateY(-1px);
    border-color: #d99b2b;
}

.hunter-story-volume-label {
    color: #b45309;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .05em;
}

.hunter-story-volume-card strong {
    font-size: 16px;
    line-height: 1.35;
}

.hunter-story-volume-card small {
    color: #8a5a30;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
}

.hunter-story-volume-count {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    padding: 5px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    font-weight: 950;
}

.hunter-story-toolbar {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 10px;
}

.hunter-story-back-btn {
    padding: 9px 12px;
    border: 1px solid #e6bc67;
    border-radius: 999px;
    background: #ffffff;
    color: #7c3b12;
    font-size: 13px;
    font-weight: 900;
}

.hunter-story-volume-head {
    display: grid;
    gap: 5px;
    padding: 5px 3px 14px;
}

.hunter-story-volume-head h4 {
    color: #5b250f;
    font-size: 21px;
    line-height: 1.35;
}

.hunter-story-volume-head p {
    color: #8a5a30;
    font-size: 13px;
    font-weight: 750;
}

.hunter-story-chapter-link {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 2px 11px;
    padding: 13px 14px;
    border: 1px solid #e7c77e;
    border-radius: 14px;
    background: #ffffff;
    color: #5b250f;
    text-align: left;
    box-shadow: 0 2px 0 rgba(180, 120, 26, .28);
}

.hunter-story-chapter-link:hover {
    border-color: #d99b2b;
    background: #fffaf0;
}

.hunter-story-chapter-link.is-last-read {
    border-color: #d97706;
    background: #fff7df;
}

.hunter-story-chapter-number {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    align-self: center;
    border-radius: 12px;
    background: #fef3c7;
    color: #92400e;
    font-size: 12px;
    font-weight: 1000;
}

.hunter-story-chapter-label {
    color: #a2551b;
    font-size: 11px;
    font-weight: 900;
}

.hunter-story-chapter-link strong {
    min-width: 0;
    color: inherit;
    font-size: 15px;
    line-height: 1.4;
}

.hunter-story-reader {
    overflow: hidden;
    border: 1px solid #e6c57b;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(92, 48, 10, .09);
}

.hunter-story-reader-toolbar {
    margin: 0;
    padding: 9px 12px;
    border-bottom: 1px solid #edd69f;
    background: #fff8e8;
}

.hunter-story-reader-head {
    display: grid;
    gap: 6px;
    padding: 20px 18px 14px;
    background:
        radial-gradient(circle at 92% 8%, rgba(251, 191, 36, .17), transparent 34%),
        #ffffff;
}

.hunter-story-reader-volume {
    color: #a2551b;
    font-size: 12px;
    font-weight: 900;
}

.hunter-story-reader-title {
    color: #5b250f;
    font-size: var(--hunter-reading-title-size, 21px);
    line-height: 1.45;
    text-wrap: balance;
}

.hunter-story-reader-body {
    padding: 8px 18px 24px;
}

.hunter-story-reader-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    padding: 14px;
    border-top: 1px solid #edd69f;
    background: #fff8e8;
}

.hunter-story-nav-btn,
.hunter-story-directory-btn {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid #dfbd74;
    border-radius: 12px;
    background: #ffffff;
    color: #6b2f0e;
    font-size: 12px;
    font-weight: 850;
}

.hunter-story-nav-btn {
    display: grid;
    gap: 3px;
    text-align: left;
}

.hunter-story-nav-btn--next {
    text-align: right;
}

.hunter-story-nav-btn span {
    color: #a2551b;
    font-size: 11px;
}

.hunter-story-nav-btn strong {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hunter-story-nav-btn:disabled {
    cursor: default;
    opacity: .5;
}

.hunter-story-directory-btn {
    align-self: stretch;
    background: #fef3c7;
    white-space: nowrap;
}

.hunter-story-inline-message {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #d97706;
    border-radius: 12px;
    background: #fff7df;
    color: #7c3b12;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.5;
}

.hunter-story-stage-status {
    margin: 0;
}

.hunter-story-status-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.hunter-story-status .hunter-story-status-secondary {
    border-color: #dfbd74;
    background: #ffffff;
    color: #7c3b12;
}

@media (max-width: 560px) {
    .hunter-story-head {
        padding: 14px;
    }

    .hunter-story-head h3 {
        font-size: 19px;
    }

    .hunter-story-stage {
        padding: 10px;
    }

    .hunter-story-reader-head {
        padding: 18px 14px 12px;
    }

    .hunter-story-reader-body {
        padding: 6px 14px 20px;
    }

    .hunter-story-reader-nav {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .hunter-story-directory-btn {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}