/* Hallmark · macrostructure: Split Story Explorer · tone: Hum / Modern Youth · anchor hue: emerald-blue */
/* Hallmark · pre-emit critique: Philosophy 5 · Hierarchy 5 · Execution 4 · Specificity 5 · Restraint 4 · Variety 4 */

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.55;
    overflow-x: clip;
    transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out);
}

body.modal-open {
    overflow: hidden;
}

button,
input,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    border: 0;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

a {
    color: inherit;
}

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: var(--space-xs);
    left: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    transform: translateY(-180%);
    transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
    transform: translateY(0);
}


.featured-badge,
.new-pill,
.story-tag,
.story-progress {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

main {
    display: block;
}

.featured-section {
    width: min(100% - 128px, 1440px);
    margin: 0 auto;
    padding: var(--space-xl) 0 var(--space-sm);
}

.featured-heading {
    margin: 0 0 var(--space-sm);
    color: var(--color-text-secondary);
    font-size: var(--text-xl);
    font-weight: 800;
}

.featured-story-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    width: 100%;
    min-height: 230px;
    align-items: center;
    gap: var(--space-2xl);
    padding: var(--space-2xl);
    border: var(--rule-thin) solid var(--color-hero-border);
    border-radius: var(--radius-3xl);
    background: var(--color-hero);
    color: var(--color-hero-text);
    text-align: left;
    transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.featured-story-button:hover,
.featured-story-button:focus-visible {
    border-color: var(--color-primary);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--color-primary) 18%, transparent);
    transform: translateY(-2px);
}

.featured-story-button:active {
    transform: translateY(0);
}

.featured-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-sm);
}

.featured-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.featured-badge {
    padding: 3px var(--space-xs);
    border-radius: var(--radius-sm);
    background: var(--color-orange-soft);
    color: var(--color-orange-text);
    font-size: var(--text-sm);
    font-weight: 800;
}

.featured-meta .story-tags,
.featured-meta .story-metadata {
    color: var(--color-hero-muted);
}

.featured-copy h2 {
    max-width: 28ch;
    margin: 0;
    color: var(--color-hero-text);
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.featured-summary {
    max-width: 72ch;
    margin: 0;
    color: var(--color-hero-secondary);
    font-size: var(--text-md);
    line-height: 1.5;
}

.featured-empty,
.featured-loading {
    margin: 0;
    color: var(--color-hero-secondary);
}

.home-body {
    display: grid;
    grid-template-columns: minmax(0, 800px) minmax(320px, 480px);
    align-items: start;
    gap: 36px;
    width: min(100% - 128px, 1440px);
    margin: 0 auto;
    padding: var(--space-2xl) 0 var(--space-3xl);
}

.story-list-panel {
    min-width: 0;
}

.panel-heading {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-bottom: var(--space-lg);
}

.panel-heading h2,
.detail-panel h2 {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.panel-heading h2 {
    font-size: var(--text-3xl);
}

.panel-heading p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-md);
}

.catalog-filters {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.filter-row {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.tag-pills {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.tag-pill {
    min-height: 32px;
    padding: 6px var(--space-sm);
    border: var(--rule-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
}

.tag-pill:hover,
.tag-pill:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary-strong);
}

.tag-pill[aria-pressed="true"] {
    border-color: var(--color-primary-strong);
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.search-control {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-xs);
    padding: 0 var(--space-sm);
    border: var(--rule-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.search-control:focus-within {
    border-color: var(--color-primary);
    outline: 3px solid var(--color-primary-soft);
    outline-offset: 1px;
}

.search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
}

.search-icon svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.search-control input {
    width: 200px;
    min-width: 0;
    min-height: 34px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-sm);
}

.search-control input::placeholder {
    color: var(--color-text-faint);
}

.filter-select {
    display: none;
}

.catalog-status,
#tag-status,
#progress-status {
    min-height: 22px;
    margin: 0 0 var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.catalog-status:empty,
#tag-status:empty,
#progress-status:empty {
    min-height: 0;
    margin-bottom: 0;
}

#story-container {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-md);
}

.story-card {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    min-width: 0;
    align-items: stretch;
    gap: var(--space-md);
    padding: var(--space-md);
    border: var(--rule-thin) solid var(--color-border);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.story-card:hover,
.story-card:focus-within,
.story-card.selected {
    border-color: var(--color-primary);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--color-primary) 13%, transparent);
    transform: translateY(-1px);
}

.story-card.selected {
    border-width: var(--rule-emphasis);
}

.story-cover {
    --cover-art: var(--color-cover);
    --cover-accent: var(--color-teal);
    position: relative;
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    border: 1.5px solid var(--color-hero-border);
    border-radius: var(--radius-lg);
    background: var(--cover-art);
    isolation: isolate;
}

.cover-palette-0 {
    --cover-art: var(--color-cover);
    --cover-accent: var(--color-teal);
}

.cover-palette-1 {
    --cover-art: var(--color-cover-amber);
    --cover-accent: var(--color-warning);
}

.cover-palette-2 {
    --cover-art: var(--color-cover-indigo);
    --cover-accent: var(--color-indigo-text);
}

.cover-palette-3 {
    --cover-art: var(--color-cover-emerald);
    --cover-accent: var(--color-primary);
}

.story-cover-card {
    width: 160px;
    height: 90px;
}

.story-cover-hero {
    width: 320px;
    height: 180px;
    justify-self: end;
}

.story-cover-panel {
    width: 100%;
    height: 243px;
}

.story-cover img {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .78;
}

.story-cover::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(145deg, color-mix(in srgb, var(--cover-accent) 36%, transparent), transparent 58%), linear-gradient(180deg, transparent 30%, var(--cover-art) 100%);
    content: '';
}

.story-cover-flare {
    width: 50px;
    height: 50px;
    align-self: flex-end;
    margin: 10px 10px 0 0;
    border: 1px solid color-mix(in srgb, var(--cover-accent) 52%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--cover-accent) 10%, transparent), inset 0 0 20px color-mix(in srgb, var(--cover-accent) 18%, transparent);
    opacity: .8;
}

.story-cover-mark {
    align-self: flex-start;
    margin: 0 var(--space-sm);
    padding: 2px var(--space-xs);
    border-radius: var(--radius-xs);
    background: var(--color-hero-chip);
    color: var(--color-hero-text);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.story-cover-title {
    display: block;
    min-width: 0;
    margin: 0 var(--space-sm) var(--space-sm);
    overflow: hidden;
    color: var(--color-hero-text);
    font-size: var(--text-md);
    font-weight: 900;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-cover-panel .story-cover-title {
    font-size: var(--text-2xl);
}

.story-cover-fallback img {
    display: none;
}

.card-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-xs);
}

.story-title-row,
.card-action-row,
.title-group,
.story-metadata,
.story-tags {
    display: flex;
    min-width: 0;
    align-items: center;
}

.story-title-row {
    justify-content: space-between;
    gap: var(--space-sm);
}

.story-title-badges {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    flex-shrink: 0;
}

.card-energy-pill {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 2px 6px;
    border: var(--rule-thin) solid var(--color-warning-border);
    border-radius: var(--radius-xs);
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
    font-size: var(--text-xs);
    font-weight: 800;
    white-space: nowrap;
}

.card-action-row {
    justify-content: flex-end;
    gap: var(--space-sm);
}

.story-title-row h2 {
    min-width: 0;
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.3;
}

.story-detail-btn {
    max-width: 100%;
    padding: 0;
    overflow-wrap: anywhere;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.story-detail-btn:hover {
    color: var(--color-primary-strong);
}

.new-pill {
    flex: 0 0 auto;
    padding: 2px 6px;
    border: var(--rule-thin) solid var(--color-yellow-text);
    border-radius: var(--radius-xs);
    background: var(--color-new-soft);
    color: var(--color-new-text);
    font-size: var(--text-xs);
    font-weight: 800;
}

.story-tags,
.story-metadata {
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.35;
}

.story-tags-compact {
    max-width: 100%;
}

.story-tag,
.story-progress {
    padding: 2px 6px;
    border-radius: var(--radius-xs);
}

.story-tag {
    border: var(--rule-thin) solid var(--color-border);
    background: var(--color-surface-soft);
    color: var(--color-text-secondary);
}

.story-progress {
    border: var(--rule-thin) solid var(--color-border);
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
}

.story-progress[data-progress="in_progress"] {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    font-weight: 800;
}

.story-progress[data-progress="played"] {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-primary-strong);
    font-weight: 700;
}

.story-summary {
    display: -webkit-box;
    max-width: 70ch;
    margin: 0;
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.card-action-row {
    margin-top: var(--space-2xs);
}

.card-cost {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-actions,
.panel-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-xs);
}

.story-action,
.text-action,
.load-more-btn {
    min-height: 34px;
    padding: 7px var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 800;
    white-space: nowrap;
    transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.story-action {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.story-action:hover,
.story-action:focus-visible {
    background: var(--color-primary-strong);
    box-shadow: 0 7px 15px color-mix(in srgb, var(--color-primary) 20%, transparent);
    transform: translateY(-1px);
}

.story-action:active {
    transform: translateY(1px);
}

.story-action.restart-btn,
.story-action.guest-restart-btn,
.story-action.panel-restart-btn {
    border: var(--rule-thin) solid var(--color-border-strong);
    background: var(--color-surface-soft);
    color: var(--color-text-secondary);
}

.story-action.restart-btn:hover,
.story-action.restart-btn:focus-visible,
.story-action.guest-restart-btn:hover,
.story-action.guest-restart-btn:focus-visible,
.story-action.panel-restart-btn:hover,
.story-action.panel-restart-btn:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

.story-action:disabled,
.text-action:disabled,
.load-more-btn:disabled {
    cursor: wait;
    opacity: .58;
    transform: none;
}

.story-action[data-state="loading"]::after,
#daily-reward-claim-btn[data-state="loading"]::after {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: var(--space-xs);
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 800ms linear infinite;
    content: '';
    vertical-align: -2px;
}

.story-action[data-state="error"],
#daily-reward-claim-btn[data-state="error"] {
    background: var(--color-danger);
    color: var(--color-on-primary);
}

.story-action[data-state="success"],
#daily-reward-claim-btn[data-state="success"] {
    background: var(--color-primary-strong);
    color: var(--color-on-primary);
}

.text-action {
    border: var(--rule-thin) solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-primary-strong);
}

.text-action:hover,
.text-action:focus-visible,
.load-more-btn:hover,
.load-more-btn:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.skeleton-card {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    min-height: 150px;
    gap: var(--space-md);
    padding: var(--space-md);
    border: var(--rule-thin) solid var(--color-border);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
}

.skeleton-card span {
    display: block;
    min-height: 12px;
    grid-column: 2;
    border-radius: var(--radius-xs);
    background: var(--color-surface-soft);
    animation: pulse 1.4s var(--ease-in-out) infinite;
}

.skeleton-card span:first-child {
    min-height: 90px;
    grid-row: 1 / span 4;
    grid-column: 1;
    border-radius: var(--radius-lg);
}

.skeleton-card span:last-child {
    width: 58%;
}

.loading-indicator,
#load-more-btn {
    align-self: center;
}

.loading-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border-strong);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 800ms linear infinite;
}

.story-empty,
.story-load-error {
    padding: var(--space-2xl);
    border: var(--rule-thin) solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    text-align: center;
}

.story-load-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.detail-panel {
    position: sticky;
    top: var(--space-xl);
    min-width: 0;
    min-height: 500px;
    overflow: hidden;
    border: var(--rule-thin) solid var(--color-border);
    border-radius: var(--radius-3xl);
    background: var(--color-surface);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--color-text) 7%, transparent);
}

.detail-panel-header {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-xl) 0;
}

.detail-panel h2 {
    font-size: var(--text-2xl);
}

.detail-panel-content {
    display: flex;
    max-height: calc(100vh - 180px);
    min-width: 0;
    flex-direction: column;
    gap: var(--space-md);
    overflow-y: auto;
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
}

.panel-energy-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border: var(--rule-thin) solid var(--color-warning-border);
    border-radius: var(--radius-md);
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.45;
}

.panel-energy-hint svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--color-warning-icon, var(--color-warning-text));
}

.panel-tags {
    margin-top: -4px;
}

.panel-body {
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    line-height: 1.65;
}

.panel-body > :first-child {
    margin-top: 0;
}

.panel-body > :last-child {
    margin-bottom: 0;
}

.panel-body p,
.panel-body ul,
.panel-body h1,
.panel-body h2,
.panel-body h3 {
    margin: 0 0 var(--space-sm);
}

.panel-body ul {
    padding-left: var(--space-xl);
}

.panel-body code {
    padding: 1px 4px;
    border-radius: var(--radius-xs);
    background: var(--color-surface-soft);
    color: var(--color-primary-strong);
}

.panel-body a {
    color: var(--color-primary-strong);
}

.panel-difficulty {
    display: none;
}
.panel-progress {
    min-height: 28px;
}

.panel-progress .story-progress {
    width: fit-content;
}

.panel-endings {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: var(--rule-thin) solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-soft);
}

.endings-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
}

.endings-title-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.endings-title-group .trophy-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-warning-icon, var(--color-warning-text));
}

.endings-title {
    color: var(--color-text);
    font-size: 13px;
    font-weight: 800;
}

.unlock-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.ending-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ending-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding: 7px 10px;
    border: var(--rule-thin) solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.ending-left {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.ending-status-icon {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-text-faint);
}

.ending-name {
    min-width: 0;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ending-diff {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Difficulty color-coding (matching Pen values) */
.ending-item[data-difficulty="easy"] .ending-diff {
    color: var(--color-primary-strong);
}

.ending-item[data-difficulty="medium"] .ending-diff {
    color: var(--color-warning-icon, var(--color-warning-text));
}

.ending-item[data-difficulty="hard"] .ending-diff {
    color: var(--color-orange-text, var(--color-orange));
}

.ending-item[data-difficulty="extreme"] .ending-diff {
    color: var(--color-danger);
}

/* 5-star / extreme ending special styling (matches Pen UXELO) */
.ending-item[data-difficulty="extreme"]:not([data-achieved="true"]) {
    border-color: var(--color-yellow-border);
    background: var(--color-yellow-soft);
}

.ending-item[data-difficulty="extreme"]:not([data-achieved="true"]) .ending-status-icon {
    color: var(--color-yellow-text);
}

/* Achieved state (matches Pen r53ed) */
.ending-item[data-achieved="true"] {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
}

.ending-item[data-achieved="true"] .ending-status-icon,
.ending-item[data-achieved="true"] .ending-name,
.ending-item[data-achieved="true"] .ending-diff {
    color: var(--color-primary-strong);
}

.ending-item[data-achieved="true"] .ending-name {
    font-weight: 700;
}

.panel-tags:empty,
.panel-progress:empty {
    display: none;
}

.panel-actions {
    width: 100%;
    padding-top: var(--space-xs);
}

.panel-actions .story-action {
    min-height: 42px;
    padding-inline: var(--space-lg);
}

.mobile-back-btn {
    display: none;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px var(--space-sm);
    border: var(--rule-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 700;
}


.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: var(--space-xl);
    background: var(--color-backdrop);
    opacity: 1;
    transition: opacity var(--dur-base) var(--ease-out);
}

.modal.hidden {
    display: none;
}

.modal-content {
    width: min(640px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: var(--space-2xl);
    border: var(--rule-thin) solid var(--color-border);
    border-radius: var(--radius-3xl);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 24px 64px color-mix(in srgb, var(--color-text) 18%, transparent);
}

.modal-content h2,
.modal-content h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
}

.modal-content h2 {
    font-size: var(--text-2xl);
}

.modal-close,
.dr-close-btn {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}

.modal-close:hover,
.modal-close:focus-visible,
.dr-close-btn:hover,
.dr-close-btn:focus-visible {
    background: var(--color-surface-soft);
    color: var(--color-text);
}

.login-modal,
.daily-reward-modal,
.confirm-modal {
    position: relative;
}

.login-modal {
    width: min(420px, 100%);
}

.login-modal h2 {
    margin-bottom: var(--space-lg);
}

.login-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.login-option-btn {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border: var(--rule-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-soft);
    color: var(--color-text);
    font-weight: 700;
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.login-option-btn:hover,
.login-option-btn:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    transform: translateY(-1px);
}

.login-option-btn:active {
    transform: translateY(1px);
}

.confirm-modal {
    width: min(560px, 100%);
    border-color: var(--color-modal-border);
}

.confirm-modal h2 {
    color: var(--color-danger);
}

.confirm-message {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
    color: var(--color-text-secondary);
}

.confirm-message p {
    margin: 0;
}

.current-game-info {
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--color-danger-softer);
    color: var(--color-danger-strong);
    font-weight: 800;
}

.warning-text {
    color: var(--color-danger);
    font-weight: 700;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
}

.modal-btn {
    min-height: 42px;
    padding: 9px var(--space-lg);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-md);
    font-weight: 800;
    transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.cancel-btn {
    border: var(--rule-thin) solid var(--color-border-strong);
    background: var(--color-surface-soft);
    color: var(--color-text-secondary);
}

.cancel-btn:hover,
.cancel-btn:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.confirm-btn {
    background: var(--color-danger);
    color: var(--color-on-primary);
}

.confirm-btn:hover,
.confirm-btn:focus-visible {
    background: var(--color-danger-strong);
    transform: translateY(-1px);
}

.daily-reward-modal {
    width: min(640px, 100%);
}

.dr-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-right: var(--space-2xl);
}

.dr-icon-wrap {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: var(--rule-thin) solid var(--color-danger-border);
    border-radius: var(--radius-lg);
    background: var(--color-danger-soft);
    font-size: 22px;
}

.dr-title-group {
    min-width: 0;
}

.dr-title {
    color: var(--color-text);
}

.dr-subtitle,
.dr-comeback {
    margin: 3px 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.dr-streak {
    margin: var(--space-lg) 0 var(--space-sm);
    color: var(--color-orange-text);
    font-weight: 800;
}

.dr-reward {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
    font-size: var(--text-2xl);
    font-weight: 800;
}

.dr-progress-track {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-xs);
    margin: var(--space-lg) 0;
}

.dr-day-box {
    display: grid;
    min-height: 48px;
    place-items: center;
    border: var(--rule-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
}

.dr-day-box.active {
    border-color: var(--color-primary-strong);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

.dr-day-box:nth-child(7) {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
}

.dr-claim-btn {
    width: 100%;
    min-height: 44px;
    padding: 10px var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: var(--color-on-primary);
    cursor: pointer;
    font-weight: 800;
    transition: background-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.dr-claim-btn:hover,
.dr-claim-btn:focus-visible {
    background: var(--color-primary-strong);
    transform: translateY(-1px);
}

.dr-claim-btn:active {
    transform: translateY(1px);
}

.dr-claim-btn:disabled {
    cursor: default;
    opacity: .72;
    transform: none;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    50% { opacity: .55; }
}

@media (max-width: 1100px) {
    .featured-section,
    .home-body {
        width: min(100% - 64px, 1440px);
    }

    .home-body {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
        gap: var(--space-xl);
    }
}


@media (max-width: 899px) {
    .home-body {
        display: block;
    }

    .story-list-panel {
        margin-bottom: var(--space-2xl);
    }

    .detail-panel {
        position: static;
        display: none;
    }

    .detail-panel.active {
        display: block;
    }

    .story-list-panel.mobile-hidden {
        display: none;
    }

    .mobile-back-btn {
        display: inline-flex;
    }

    .detail-panel-header {
        align-items: center;
    }

    .detail-panel-content {
        max-height: none;
    }
}


@media (max-width: 767px) {
    .featured-section,
    .home-body {
        width: min(100% - 32px, 1440px);
    }

    .featured-section {
        padding-top: var(--space-lg);
    }

    .featured-story-button {
        grid-template-columns: minmax(0, 1fr) 132px;
        gap: var(--space-lg);
        min-height: 190px;
        padding: var(--space-lg);
    }

    .featured-copy h2 {
        font-size: var(--text-2xl);
    }

    .featured-summary {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .story-cover-hero {
        width: 132px;
        height: 74.25px;
    }

    .home-body {
        padding-top: var(--space-xl);
    }

    .filter-row {
        align-items: stretch;
        flex-direction: column;
    }

    .search-control,
    .search-control input {
        width: 100%;
    }

    .story-card {
        grid-template-columns: 128px minmax(0, 1fr);
        gap: var(--space-sm);
        padding: var(--space-sm);
    }

    .story-cover-card {
        width: 128px;
        height: 72px;
    }

    .story-title-row {
        align-items: flex-start;
    }

    .card-action-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .card-actions {
        width: 100%;
    }

    .card-actions .story-action {
        flex: 1 1 auto;
    }

}

@media (max-width: 599px) {
    .featured-story-button {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .story-cover-hero {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        justify-self: stretch;
    }

    .featured-copy {
        order: 1;
    }

    .story-cover-hero {
        order: 2;
    }

    .story-card {
        grid-template-columns: 1fr;
    }

    .story-cover-card {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .story-cover-title {
        font-size: var(--text-xl);
    }

    .story-title-row h2 {
        font-size: var(--text-lg);
    }

    .panel-actions,
    .confirm-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .panel-actions .story-action,
    .confirm-actions .modal-btn {
        width: 100%;
    }

    .dr-progress-track {
        gap: var(--space-2xs);
    }

    .dr-day-box {
        min-height: 42px;
        font-size: 10px;
    }

    .modal {
        padding: var(--space-sm);
    }

    .modal-content {
        padding: var(--space-xl) var(--space-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}