/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==================== 自我修炼 v2：闭关系统 ==================== */
.meditation-container.meditation-v2 {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.05fr);
    gap: 16px;
    align-items: stretch;
    justify-content: stretch;
    min-height: auto;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 14px;
}

.meditation-v2 .meditation-stage,
.meditation-v2 .meditation-dashboard,
.meditation-v2 .meditation-panel-block,
.meditation-settlement-card {
    border: 1px solid rgba(117, 224, 208, 0.26);
    border-radius: 8px;
    background: rgba(7, 18, 20, 0.86);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.meditation-v2 .meditation-stage {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.meditation-stage-art,
.meditation-settlement-art,
.meditation-guardian-banner > img,
.meditation-event-art > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}

.meditation-stage-art {
    position: absolute;
    inset: 0;
    z-index: -3;
    filter: saturate(0.96) contrast(1.05);
}

.meditation-stage-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(5, 13, 15, 0.18), rgba(4, 13, 15, 0.76)),
        radial-gradient(circle at 52% 58%, rgba(238, 184, 82, 0.28), rgba(7, 18, 20, 0.2) 34%, rgba(7, 18, 20, 0.78) 72%);
}

.meditation-v2 .meditation-bg {
    inset: auto;
    width: 330px;
    height: 330px;
}

.meditation-v2 .meditation-circle:nth-child(1) {
    width: 116px;
    height: 116px;
}

.meditation-v2 .meditation-circle:nth-child(2) {
    width: 176px;
    height: 176px;
}

.meditation-v2 .meditation-circle:nth-child(3) {
    width: 238px;
    height: 238px;
}

.meditation-v2 .meditation-circle:nth-child(4) {
    width: 300px;
    height: 300px;
    animation-delay: 1.35s;
}

.meditation-v2 .meditator {
    width: min(300px, 82%);
    max-height: 380px;
    margin-inline: auto;
    object-fit: contain;
}

.meditation-stage-hud {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(117, 224, 208, 0.22);
    border-radius: 8px;
    background: rgba(5, 16, 18, 0.78);
    backdrop-filter: blur(8px);
}

.meditation-stage-hud span,
.meditation-stage-hud em,
.meditation-block-title span,
.meditation-secondary-stats span {
    color: rgba(221, 240, 232, 0.68);
    font-size: 12px;
    font-style: normal;
}

.meditation-stage-hud strong {
    color: #f1d48a;
    font-size: 15px;
    letter-spacing: 0;
}

.meditation-stage-hud em {
    justify-self: end;
    color: #75e0d0;
}

.meditation-stage-badges {
    position: absolute;
    left: 14px;
    top: 14px;
    right: 14px;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    pointer-events: none;
}

.meditation-stage-badge {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid rgba(117, 224, 208, 0.22);
    border-radius: 8px;
    background: rgba(5, 16, 18, 0.76);
    backdrop-filter: blur(6px);
}

.meditation-stage-badge em {
    color: rgba(221, 240, 232, 0.68);
    font-style: normal;
    font-size: 11px;
}

.meditation-stage-badge strong {
    color: #f1d48a;
    font-size: 12px;
    line-height: 1.2;
}

.meditation-v2 .meditation-dashboard {
    padding: 18px;
}

.meditation-header {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.meditation-eyebrow {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(241, 212, 138, 0.35);
    color: #f1d48a;
    background: rgba(241, 212, 138, 0.08);
    font-size: 12px;
    line-height: 1.2;
}

.meditation-v2 .meditation-info h3,
.meditation-v2 .meditation-header h3 {
    margin: 0;
    color: #f3ead8;
    font-size: 30px;
    line-height: 1.16;
    text-align: left;
    text-shadow: 0 0 20px rgba(117, 224, 208, 0.16);
}

.meditation-v2 .meditation-desc {
    margin: 0;
    color: rgba(232, 238, 231, 0.76);
    font-size: 14px;
    line-height: 1.7;
}

.meditation-v2 .meditation-stats {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0 0 14px;
}

.meditation-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.meditation-v2 .stat-item {
    display: grid;
    gap: 6px;
    align-items: start;
    justify-content: stretch;
    min-height: 74px;
    padding: 11px;
    border: 1px solid rgba(117, 224, 208, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.meditation-v2 .stat-value {
    color: #75e0d0;
    font-size: 18px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.meditation-v2 .stat-value.gain {
    color: #f1d48a;
}

.meditation-cycle-board {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(241, 212, 138, 0.24);
    background: linear-gradient(135deg, rgba(241, 212, 138, 0.10), rgba(74, 151, 142, 0.08));
}

.meditation-cycle-head,
.meditation-realm-row,
.meditation-block-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.meditation-cycle-head span,
.meditation-realm-row span {
    color: #f3ead8;
    font-weight: 700;
}

.meditation-cycle-head strong,
.meditation-realm-row strong,
.meditation-block-title strong {
    color: #75e0d0;
    font-size: 12px;
    text-align: right;
}

.meditation-progress-track {
    height: 8px;
    margin: 9px 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    overflow: hidden;
}

.meditation-progress-track.realm {
    margin-bottom: 0;
}

.meditation-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #75e0d0, #f1d48a);
    transition: width 0.28s ease;
}

.meditation-progress-fill.realm {
    background: linear-gradient(90deg, #b6e37a, #dc7666);
}

.meditation-secondary-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.meditation-secondary-stats > div {
    min-height: 58px;
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(4, 12, 14, 0.46);
}

.meditation-secondary-stats strong {
    color: #f3ead8;
    font-size: 15px;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
    font-variant-numeric: tabular-nums;
}

.meditation-v2 .meditation-control {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 0;
}

.meditation-v2 .btn-meditation,
.meditation-settlement-card .btn-meditation {
    min-height: 42px;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.2;
    gap: 8px;
}

.meditation-v2 .btn-icon,
.meditation-settlement-card .btn-icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(5, 16, 18, 0.22);
}

.btn-breakthrough {
    background: linear-gradient(135deg, #75e0d0, #b6e37a);
    color: #081315;
    box-shadow: 0 5px 20px rgba(117, 224, 208, 0.22);
}

.btn-breakthrough:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.meditation-panel-block {
    padding: 12px;
    min-width: 0;
}

.meditation-method-block,
.meditation-log-block,
.meditation-facility-block,
.meditation-synergy-block,
.meditation-season-block,
.meditation-atlas-block,
.meditation-goal-block {
    grid-column: 1 / -1;
}

.meditation-season-card,
.meditation-atlas-hero {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 12px;
    margin-top: 11px;
    padding: 11px;
    border: 1px solid rgba(117, 224, 208, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
    min-width: 0;
}

.meditation-season-card > img,
.meditation-atlas-art {
    width: 100%;
    min-width: 0;
    min-height: 180px;
    height: 100%;
    display: block;
    border-radius: 8px;
    object-fit: cover;
}

.meditation-season-copy,
.meditation-atlas-hero-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
    align-content: start;
}

.meditation-season-copy h4,
.meditation-atlas-hero-copy h4 {
    margin: 0;
    color: #f3ead8;
    font-size: 17px;
    line-height: 1.25;
}

.meditation-season-copy p,
.meditation-atlas-hero-copy p,
.meditation-season-stat strong,
.meditation-atlas-chip em,
.meditation-atlas-entry p,
.meditation-session-entry p {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.meditation-season-copy p,
.meditation-atlas-hero-copy p {
    margin: 0;
    color: rgba(232, 238, 231, 0.72);
    font-size: 12px;
    line-height: 1.55;
}

.meditation-season-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 11px;
}

.meditation-season-stat {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(4, 12, 14, 0.46);
}

.meditation-season-stat span {
    color: rgba(221, 240, 232, 0.68);
    font-size: 11px;
}

.meditation-season-stat strong {
    color: #f1d48a;
    font-size: 13px;
    line-height: 1.35;
}

.meditation-atlas-chips,
.meditation-atlas-list,
.meditation-session-list {
    display: grid;
    gap: 8px;
    margin-top: 11px;
}

.meditation-atlas-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.meditation-atlas-chip,
.meditation-atlas-entry,
.meditation-session-entry {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(4, 12, 14, 0.46);
}

.meditation-atlas-chip strong,
.meditation-atlas-entry strong,
.meditation-session-entry strong {
    color: #f3ead8;
    font-size: 13px;
    line-height: 1.35;
}

.meditation-atlas-chip em,
.meditation-atlas-entry time,
.meditation-session-entry span {
    color: rgba(221, 240, 232, 0.68);
    font-style: normal;
    font-size: 11px;
    line-height: 1.45;
}

.meditation-atlas-entry p,
.meditation-session-entry p {
    margin: 0;
    color: rgba(232, 238, 231, 0.72);
    font-size: 12px;
    line-height: 1.5;
}

.meditation-atlas-chip,
.meditation-atlas-entry.empty,
.meditation-session-entry.empty {
    opacity: 0.92;
}

.meditation-method-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 11px;
}

.meditation-skill-target {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
    color: rgba(232, 238, 231, 0.72);
    font-size: 12px;
}

.meditation-skill-picker {
    display: grid;
    gap: 4px;
    min-width: 180px;
    max-width: min(320px, 100%);
}

.meditation-skill-target select {
    width: 100%;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid rgba(117, 224, 208, 0.28);
    border-radius: 8px;
    background: rgba(4, 12, 14, 0.78);
    color: #e8eee7;
}

.meditation-skill-target small {
    color: rgba(232, 238, 231, 0.58);
    font-size: 11px;
    line-height: 1.35;
}

.meditation-method-card,
.meditation-guardian-card,
.meditation-event-card {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
    color: #e8eee7;
}

.meditation-method-card,
.meditation-guardian-card,
.meditation-mini-btn {
    appearance: none;
    font: inherit;
}

.meditation-method-card,
.meditation-guardian-card {
    width: 100%;
}

.meditation-method-card {
    min-height: 134px;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 6px;
    padding: 11px;
    cursor: pointer;
    text-align: left;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.meditation-method-card:hover,
.meditation-guardian-card:hover {
    transform: translateY(-2px);
    border-color: rgba(117, 224, 208, 0.42);
    background: rgba(117, 224, 208, 0.08);
}

.meditation-method-card.active,
.meditation-guardian-card.active {
    border-color: rgba(241, 212, 138, 0.76);
    background: linear-gradient(180deg, rgba(241, 212, 138, 0.16), rgba(117, 224, 208, 0.08));
}

.meditation-method-card .method-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.meditation-method-card .method-top strong {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meditation-method-card .method-mark {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #081315;
    background: #75e0d0;
    font-weight: 800;
    flex: 0 0 auto;
    white-space: nowrap;
}

.meditation-method-card .method-yield {
    margin-top: auto;
    color: #f1d48a;
    font-size: 12px;
    line-height: 1.35;
}

.meditation-method-card h4,
.meditation-event-card h4 {
    margin: 0;
    color: #f3ead8;
    font-size: 15px;
    line-height: 1.3;
}

.meditation-method-card p,
.meditation-event-card p,
.meditation-log-list p {
    margin: 0;
    color: rgba(232, 238, 231, 0.70);
    font-size: 12px;
    line-height: 1.55;
}

.meditation-guardian-banner {
    position: relative;
    min-height: 230px;
    margin-top: 11px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.meditation-guardian-banner::after,
.meditation-event-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 16, 18, 0.16), rgba(6, 16, 18, 0.84));
    pointer-events: none;
}

.meditation-guardian-list {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.meditation-guardian-card {
    min-height: 74px;
    padding: 9px;
    cursor: pointer;
    display: grid;
    gap: 4px;
}

.meditation-guardian-card h4 {
    margin: 0;
    color: #f3ead8;
    font-size: 13px;
}

.meditation-guardian-card p {
    margin: 0;
    color: rgba(232, 238, 231, 0.68);
    font-size: 11px;
    line-height: 1.45;
}

.meditation-guardian-card h4 span {
    display: inline-block;
    margin-left: 6px;
    color: #f1d48a;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.meditation-facility-list,
.meditation-goal-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 11px;
}

.meditation-synergy-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 11px;
}

.meditation-facility-card,
.meditation-goal-card {
    display: grid;
    gap: 8px;
    padding: 11px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.045);
}

.meditation-facility-card.maxed,
.meditation-goal-card.claimed {
    border-color: rgba(117, 224, 208, 0.32);
    background: rgba(117, 224, 208, 0.08);
}

.meditation-facility-card .facility-top,
.meditation-goal-card .goal-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.meditation-facility-card .facility-mark {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #75e0d0;
    color: #081315;
    font-weight: 800;
}

.meditation-facility-card h4,
.meditation-goal-card h4 {
    margin: 0;
    color: #f3ead8;
    font-size: 15px;
    line-height: 1.25;
}

.meditation-facility-card p,
.meditation-goal-card p {
    margin: 2px 0 0;
    color: rgba(232, 238, 231, 0.70);
    font-size: 12px;
    line-height: 1.5;
}

.meditation-facility-card strong,
.meditation-goal-card strong {
    color: #f1d48a;
    font-size: 12px;
    white-space: nowrap;
}

.meditation-progress-track.facility,
.meditation-progress-track.goal {
    margin: 0;
}

.meditation-facility-card .facility-bottom,
.meditation-goal-card .goal-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.meditation-facility-card .facility-bottom span,
.meditation-goal-card .goal-bottom span {
    flex: 1 1 220px;
    color: rgba(232, 238, 231, 0.76);
    font-size: 12px;
    line-height: 1.45;
}

.meditation-synergy-chip {
    display: grid;
    gap: 4px;
    padding: 11px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
}

.meditation-synergy-chip.active {
    border-color: rgba(241, 212, 138, 0.42);
    background: linear-gradient(180deg, rgba(241, 212, 138, 0.12), rgba(117, 224, 208, 0.06));
}

.meditation-synergy-chip span {
    color: rgba(232, 238, 231, 0.66);
    font-size: 11px;
}

.meditation-synergy-chip strong {
    color: #f3ead8;
    font-size: 14px;
    line-height: 1.3;
}

.meditation-synergy-chip em {
    color: #75e0d0;
    font-style: normal;
    font-size: 12px;
}

.meditation-season-card,
.meditation-atlas-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, 0.92fr) minmax(0, 1.08fr);
    gap: 0;
    margin-top: 11px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.045);
}

.meditation-season-art,
.meditation-atlas-art {
    width: 100%;
    height: 100%;
    min-height: 218px;
    object-fit: cover;
    display: block;
}

.meditation-season-copy,
.meditation-atlas-hero-copy {
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 16px;
    background:
        linear-gradient(135deg, rgba(7, 18, 20, 0.92), rgba(16, 32, 28, 0.86)),
        radial-gradient(circle at 100% 0, rgba(151, 91, 48, 0.18), transparent 42%);
}

.meditation-season-copy h4,
.meditation-atlas-hero-copy h4 {
    margin: 0;
    color: #f3ead8;
    font-size: 22px;
    line-height: 1.25;
}

.meditation-season-copy p,
.meditation-atlas-hero-copy p {
    margin: 0;
    color: rgba(232, 238, 231, 0.73);
    font-size: 13px;
    line-height: 1.6;
}

.meditation-stage-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.meditation-stage-meta strong,
.meditation-stage-meta span,
.meditation-stage-meta em {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(117, 224, 208, 0.22);
    background: rgba(117, 224, 208, 0.08);
    color: rgba(223, 249, 244, 0.84);
    font-size: 12px;
    font-style: normal;
}

.meditation-stage-meta strong {
    color: #081315;
    background: #f1d48a;
    border-color: transparent;
    font-weight: 800;
}

.meditation-season-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.meditation-season-stat {
    display: grid;
    gap: 5px;
    min-height: 70px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(117, 224, 208, 0.14);
    background: rgba(255, 255, 255, 0.04);
}

.meditation-season-stat span,
.meditation-atlas-chip em,
.meditation-session-entry span {
    color: rgba(232, 238, 231, 0.62);
    font-size: 11px;
    font-style: normal;
}

.meditation-season-stat strong {
    color: #f3ead8;
    font-size: 13px;
    line-height: 1.35;
}

.meditation-daily-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.meditation-daily-card {
    display: grid;
    gap: 8px;
    padding: 11px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.045);
}

.meditation-daily-card.ready {
    border-color: rgba(241, 212, 138, 0.50);
    background: linear-gradient(180deg, rgba(241, 212, 138, 0.12), rgba(117, 224, 208, 0.06));
}

.meditation-daily-card.claimed {
    border-color: rgba(117, 224, 208, 0.32);
    background: rgba(117, 224, 208, 0.08);
}

.meditation-daily-card .daily-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.meditation-daily-card h4 {
    margin: 0;
    color: #f3ead8;
    font-size: 14px;
}

.meditation-daily-card p {
    margin: 2px 0 0;
    color: rgba(232, 238, 231, 0.70);
    font-size: 12px;
    line-height: 1.45;
}

.meditation-daily-card .daily-top strong {
    color: #f1d48a;
    font-size: 12px;
    white-space: nowrap;
}

.meditation-daily-card .daily-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.meditation-daily-card .daily-bottom span {
    flex: 1 1 180px;
    color: rgba(232, 238, 231, 0.72);
    font-size: 12px;
}

.meditation-atlas-chips,
.meditation-atlas-list,
.meditation-session-list {
    display: grid;
    gap: 9px;
    margin-top: 10px;
}

.meditation-atlas-chips {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.meditation-atlas-chip,
.meditation-atlas-entry,
.meditation-session-entry {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.045);
}

.meditation-atlas-chip strong,
.meditation-atlas-entry strong,
.meditation-session-entry strong {
    color: #f3ead8;
    font-size: 13px;
    line-height: 1.35;
}

.meditation-atlas-entry p,
.meditation-session-entry p {
    margin: 0;
    color: rgba(232, 238, 231, 0.70);
    font-size: 12px;
    line-height: 1.5;
}

.meditation-atlas-entry time {
    color: #f1d48a;
    font-size: 11px;
}

.meditation-atlas-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.meditation-session-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meditation-event-block {
    min-height: 322px;
}

.meditation-event-art {
    position: relative;
    height: 118px;
    margin-top: 11px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.meditation-event-list {
    display: grid;
    gap: 8px;
    margin-top: 9px;
    max-height: 210px;
    overflow-y: auto;
}

.meditation-event-card {
    padding: 10px;
    display: grid;
    gap: 8px;
}

.meditation-event-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.meditation-mini-btn {
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid rgba(117, 224, 208, 0.28);
    border-radius: 8px;
    background: rgba(117, 224, 208, 0.10);
    color: #dff9f4;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.meditation-mini-btn:hover {
    background: rgba(117, 224, 208, 0.18);
    transform: translateY(-1px);
}

.meditation-mini-btn:disabled {
    opacity: 0.46;
    cursor: not-allowed;
    transform: none;
}

.meditation-log-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 11px;
}

.meditation-log-item {
    min-height: 62px;
    padding: 9px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.04);
}

.meditation-log-item time {
    display: block;
    color: #f1d48a;
    font-size: 11px;
    margin-bottom: 4px;
}

.meditation-v2 .meditation-tips {
    grid-column: 1 / -1;
    border-radius: 8px;
    border-color: rgba(117, 224, 208, 0.22);
    background: rgba(117, 224, 208, 0.08);
}

.meditation-v2 .meditation-tips p {
    color: rgba(223, 249, 244, 0.82);
}

.meditation-settlement-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(2, 8, 10, 0.72);
    backdrop-filter: blur(8px);
}

.meditation-settlement-card {
    width: min(820px, 100%);
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
    max-height: min(680px, 92vh);
}

.meditation-settlement-art {
    min-height: 360px;
}

.meditation-settlement-content {
    padding: 18px;
    overflow-y: auto;
}

.meditation-settlement-content h3 {
    margin: 10px 0 14px;
    color: #f3ead8;
    font-size: 26px;
}

.meditation-settlement-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 12px;
}

.meditation-settlement-grid > div {
    min-height: 66px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(117, 224, 208, 0.18);
    background: rgba(255, 255, 255, 0.05);
}

.meditation-settlement-grid span {
    display: block;
    color: rgba(232, 238, 231, 0.64);
    font-size: 12px;
    margin-bottom: 5px;
}

.meditation-settlement-grid strong {
    color: #f1d48a;
    font-size: 18px;
}

.meditation-settlement-log {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
    color: rgba(232, 238, 231, 0.78);
    font-size: 13px;
    line-height: 1.55;
}

.meditation-settlement-story {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(241, 212, 138, 0.22);
    background: rgba(241, 212, 138, 0.08);
    color: #f3ead8;
}

.meditation-settlement-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.meditation-settlement-tags span {
    padding: 4px 7px;
    border-radius: 8px;
    border: 1px solid rgba(117, 224, 208, 0.22);
    background: rgba(117, 224, 208, 0.08);
    color: #75e0d0;
    font-size: 11px;
}

@media (max-width: 980px) {
    .meditation-container.meditation-v2 {
        grid-template-columns: minmax(0, 1fr);
        padding: 10px;
    }

    .meditation-method-list,
    .meditation-log-list,
    .meditation-season-stats,
    .meditation-atlas-chips,
    .meditation-atlas-list,
    .meditation-session-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .meditation-v2 .meditation-stage {
        min-height: 410px;
    }

    .meditation-season-card,
    .meditation-atlas-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .meditation-season-card > img,
    .meditation-atlas-art {
        min-height: 180px;
        max-height: 220px;
    }

    .meditation-season-stats,
    .meditation-atlas-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .meditation-container.meditation-v2 {
        gap: 12px;
        padding: 8px;
    }

    .meditation-v2 .meditation-stage {
        min-height: 360px;
    }

    .meditation-v2 .meditator {
        width: min(240px, 76%);
    }

    .meditation-stage-badges {
        left: 10px;
        right: 10px;
        top: 10px;
    }

    .meditation-stage-badge {
        padding: 6px 8px;
    }

    .meditation-stage-hud {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .meditation-stage-hud em {
        justify-self: start;
    }

    .meditation-stat-grid,
    .meditation-secondary-stats,
    .meditation-method-list,
    .meditation-facility-list,
    .meditation-goal-list,
    .meditation-guardian-list,
    .meditation-synergy-list,
    .meditation-season-card,
    .meditation-atlas-hero,
    .meditation-daily-list,
    .meditation-atlas-chips,
    .meditation-atlas-list,
    .meditation-session-list,
    .meditation-log-list,
    .meditation-settlement-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .meditation-skill-target {
        align-items: stretch;
        flex-direction: column;
    }

    .meditation-skill-picker,
    .meditation-skill-target select {
        width: 100%;
        max-width: none;
    }

    .meditation-secondary-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .meditation-synergy-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .meditation-season-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .meditation-season-art,
    .meditation-atlas-art {
        min-height: 178px;
        max-height: 220px;
    }

    .meditation-season-stats,
    .meditation-atlas-chips {
        grid-template-columns: minmax(0, 1fr);
    }

    .meditation-v2 .meditation-control {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .meditation-v2 .btn-meditation {
        width: 100%;
        justify-content: center;
    }

    .meditation-settlement-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .meditation-settlement-art {
        min-height: 180px;
        max-height: 220px;
    }
}

/* GPT image item art */
.item-art,
.item-art-fallback {
    --item-art-size: 34px;
    width: var(--item-art-size);
    height: var(--item-art-size);
    min-width: var(--item-art-size);
    min-height: var(--item-art-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
    vertical-align: middle;
}

.item-art-image {
    background-repeat: no-repeat;
    background-color: rgba(10, 12, 24, 0.84);
    border: 1px solid rgba(255, 235, 180, 0.22);
    border-radius: 8px;
    box-shadow:
        inset 0 0 10px rgba(255, 255, 255, 0.06),
        0 4px 10px rgba(0, 0, 0, 0.35);
    object-fit: cover;
    object-position: center;
}

.item-art-fallback {
    font-size: calc(var(--item-art-size) * 0.68);
}

.item-art--sm {
    --item-art-size: 28px;
}

.item-art--md {
    --item-art-size: 36px;
}

.item-art--lg {
    --item-art-size: 62px;
    border-radius: 12px;
}

.item-art--tooltip {
    --item-art-size: 136px;
}

.item-art--slot {
    --item-art-size: 34px;
    border-radius: 9px;
}

.inventory-item-icon .item-art {
    --item-art-size: 36px;
}

.item-detail-icon.item-art {
    --item-art-size: 62px;
}

.equip-slot-icon .item-art {
    --item-art-size: 36px;
}

.bag-item-icon .item-art {
    --item-art-size: 38px;
}

.life-bag-detail-icon .item-art {
    --item-art-size: 58px;
}

.shop-item .item-icon.item-art,
.shop-item .item-icon.item-art-fallback {
    --item-art-size: 52px;
    display: inline-flex;
    margin-bottom: 8px;
}

.shop-item .item-icon.item-art-image {
    display: block;
}

.use-item-icon.item-art,
.sell-item-icon.item-art {
    --item-art-size: 54px;
}

#buy-quantity-dialog .buy-item-icon.item-art {
    --item-art-size: 42px;
}

html {
    min-height: 100%;
    background: #04090b;
}

body {
    font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
    color: #fff;
}

#game-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px 30px;
}

/* 游戏标题 */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 2px solid #e94560;
    margin-bottom: 30px;
}

.header-title {
    text-align: center;
    flex: 1;
}

.header-user {
    color: #4ecdc4;
    font-size: 0.95em;
    white-space: nowrap;
    margin: 0 14px 0 20px;
}

.logout-btn {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid #e94560;
    color: #e94560;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.logout-btn:hover {
    background: #e94560;
    color: white;
}

.game-header h1 {
    font-size: 3em;
    color: #e94560;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 10px;
}

.subtitle {
    font-size: 1.2em;
    color: #aaa;
    font-style: italic;
}

/* 屏幕切换 */
.screen {
    display: none;
    animation: fadeIn 0.5s ease;
}

.screen.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 开始界面 */
.intro-box {
    text-align: center;
    padding: 60px 20px;
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}

.intro-box h2 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #e94560;
}

.intro-box p {
    font-size: 1.2em;
    margin: 10px 0;
    color: #ccc;
}

/* 登录界面静态背景 */
#login-screen {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(3, 8, 10, 0.50), rgba(3, 8, 10, 0.16) 42%, rgba(3, 8, 10, 0.58)),
        radial-gradient(circle at 50% 48%, rgba(2, 5, 7, 0.46), rgba(2, 5, 7, 0.10) 34%, rgba(2, 5, 7, 0.62) 100%),
        url("images/ui/login-bg-bainian-world-v1.png") center / cover no-repeat;
}

#login-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(2, 6, 8, 0.18), rgba(2, 6, 8, 0.42)),
        repeating-linear-gradient(108deg, rgba(170, 206, 214, 0.055) 0 1px, transparent 1px 15px);
    opacity: 0.72;
}

.login-video-bg {
    display: none;
}

#login-screen .login-box {
    position: relative;
    z-index: 1;
}

/* 登录界面 */
.login-box {
    max-width: 400px;
    margin: 80px auto;
    padding: 40px;
    background: rgba(5, 12, 14, 0.72);
    border-radius: 14px;
    border: 1px solid rgba(241, 212, 138, 0.20);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(12px);
    text-align: center;
}

.login-box h2 {
    font-size: 2em;
    margin-bottom: 30px;
    color: #e94560;
}

.auth-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}

.auth-tab {
    flex: 1;
    padding: 12px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    color: #d9dde7;
    cursor: pointer;
    transition: all 0.25s ease;
}

.auth-tab.active {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.32), rgba(199, 62, 84, 0.32));
    border-color: rgba(233, 69, 96, 0.55);
    color: #fff;
    box-shadow: 0 8px 24px rgba(233, 69, 96, 0.2);
}

.auth-panel {
    display: none;
}

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

.auth-submit {
    width: 100%;
    margin: 12px 0 0;
}

.login-form .form-group {
    margin-bottom: 20px;
    text-align: left;
}

.login-form label {
    display: block;
    margin-bottom: 8px;
    color: #ccc;
    font-size: 1em;
}

.login-form input {
    width: 100%;
    padding: 12px 15px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 1em;
    transition: all 0.3s ease;
}

.login-form input:focus {
    outline: none;
    border-color: #e94560;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

.login-form input::placeholder {
    color: rgba(255,255,255,0.4);
}

.test-hint {
    margin-top: 20px;
    color: #4ecdc4;
    font-size: 0.9em;
}

.login-message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* 用户信息显示 */
.user-info {
    text-align: center;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(78, 205, 196, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(78, 205, 196, 0.3);
}

.user-info p {
    margin: 5px 0;
    color: #4ecdc4;
}

.user-info hr {
    margin: 10px 0;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.cloud-save-panel {
    margin-top: 14px;
    padding: 12px;
    background: rgba(8, 14, 24, 0.48);
    border: 1px solid rgba(78, 205, 196, 0.22);
    border-radius: 8px;
    text-align: left;
}

.cloud-save-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.cloud-save-head strong {
    color: #e8fbff;
}

.cloud-save-state {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #d7dce8;
    font-size: 12px;
}

.cloud-save-state.ready {
    background: rgba(78, 205, 196, 0.18);
    color: #4ecdc4;
}

.cloud-save-state.empty {
    background: rgba(255, 255, 255, 0.08);
    color: #b8c1d6;
}

.cloud-save-meta {
    min-height: 20px;
    color: #b9c6d7;
    font-size: 13px;
    line-height: 1.45;
}

.cloud-save-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.cloud-save-actions .btn {
    margin: 0;
}

.cloud-save-btn:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    transform: none;
    box-shadow: none;
}

/* 按钮样式 */
.btn {
    padding: 12px 30px;
    font-size: 1.1em;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 10px;
    font-family: inherit;
}

.btn-primary {
    background: linear-gradient(135deg, #e94560, #c73e54);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
}

.btn-small {
    padding: 8px 20px;
    font-size: 0.9em;
}

.btn-attack {
    background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
    color: white;
}

.btn-skill {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    color: white;
}

.btn-heal {
    background: linear-gradient(135deg, #95e1d3, #7ecdc0);
    color: #333;
}

.btn-flee {
    background: linear-gradient(135deg, #f38181, #e66767);
    color: white;
}

/* 角色创建 */
.creation-form {
    max-width: 600px;
    margin: 0 auto;
    background: rgba(255,255,255,0.05);
    padding: 40px;
    border-radius: 20px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #e94560;
}

.form-group input {
    width: 100%;
    padding: 12px;
    font-size: 1.1em;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    color: white;
}

.form-group input:focus {
    outline: none;
    border-color: #e94560;
}

.gender-select {
    display: flex;
    gap: 20px;
}

.gender-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 136px;
    padding: 16px 18px;
    background: rgba(255,255,255,0.1);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    color: white;
    font-size: 1.2em;
    line-height: 1;
}

.gender-btn:hover {
    background: rgba(255,255,255,0.2);
}

.gender-btn.selected {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.3);
}

.gender-btn .gender-avatar {
    display: block;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid rgba(234, 217, 171, 0.72);
    background: rgba(5, 12, 14, 0.72);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.gender-btn .gender-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gender-btn.selected .gender-avatar {
    border-color: #fff3d1;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.1),
        0 10px 22px rgba(0, 0, 0, 0.38);
}

.gender-btn .gender-label {
    display: block;
}

/* 属性列表 */
.attributes-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.attr-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
}

.attr-control {
    display: flex;
    align-items: center;
    gap: 15px;
}

.attr-control button {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 5px;
    background: #e94560;
    color: white;
    cursor: pointer;
    font-size: 1.2em;
}

.attr-control span {
    font-size: 1.3em;
    font-weight: bold;
    min-width: 30px;
    text-align: center;
}

/* 门派选择 */
.schools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.school-card {
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.school-card:hover {
    transform: translateY(-5px);
    border-color: #e94560;
    box-shadow: 0 10px 30px rgba(233, 69, 96, 0.3);
}

.school-card h3 {
    color: #e94560;
    margin-bottom: 10px;
    font-size: 1.3em;
}

.school-card p {
    color: #aaa;
    font-size: 0.9em;
    margin: 5px 0;
}

.school-founder {
    display: inline-block;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.85em;
    margin-top: 10px;
    background: linear-gradient(135deg, #e94560, #c73e54);
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.3);
}

/* 弹窗 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    padding: 40px;
    border-radius: 20px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    border: 2px solid #e94560;
}

.close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2em;
    cursor: pointer;
    color: #aaa;
}

.close:hover {
    color: #e94560;
}

.school-details h2 {
    color: #e94560;
    margin-bottom: 20px;
}

.school-info p {
    margin: 10px 0;
    color: #ccc;
}

.school-features, .school-skills {
    margin-top: 20px;
}

.school-features h3, .school-skills h3 {
    color: #4ecdc4;
    margin-bottom: 10px;
}

.school-features ul, .school-skills ul {
    list-style: none;
    padding: 0;
}

.school-features li, .school-skills li {
    padding: 5px 0;
    color: #aaa;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* 主游戏布局 */
.game-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

/* 角色资料页面 */
.character-profile {
    max-width: 800px;
    margin: 0 auto;
}

.profile-avatar {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 25px;
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    margin-bottom: 20px;
}

.profile-name h3 {
    color: #e94560;
    font-size: 1.8em;
    margin: 0 0 8px 0;
}

.profile-name p {
    color: #aaa;
    margin: 4px 0;
}

.profile-stats {
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
}

.profile-attrs,
.profile-combat,
.profile-info {
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
}

.profile-attrs h4,
.profile-combat h4,
.profile-info h4 {
    color: #4ecdc4;
    margin-bottom: 15px;
    font-size: 1.1em;
}

.combat-grid {
    display: flex;
    gap: 30px;
}

.combat-grid p {
    margin: 0;
    color: #ccc;
}

.profile-info p {
    margin: 8px 0;
    color: #ccc;
}

.profile-build {
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(78, 205, 196, 0.18);
}

.profile-build h4 {
    color: #4ecdc4;
    margin-bottom: 12px;
    font-size: 1.1em;
}

.profile-build p {
    margin: 8px 0;
    color: #d4d7de;
    line-height: 1.45;
}

.build-path-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 12px;
}

.build-path-btn {
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: #eceff4;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.build-path-btn:hover {
    background: rgba(255,255,255,0.14);
    transform: translateY(-1px);
}

.build-path-btn.active {
    color: #11151d;
    background: linear-gradient(135deg, #ffd166, #f4a261);
    border-color: rgba(255, 209, 102, 0.95);
    box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.35) inset;
}

/* 角色面板（已废弃，保留以免报错） */
.character-panel {
    display: none;
}

.avatar {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #ffffff, #e8e8e8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;
    margin: 0 auto 15px;
    overflow: hidden;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.character-avatar h3 {
    color: #e94560;
    font-size: 1.5em;
}

.character-avatar p {
    color: #aaa;
    margin: 5px 0;
}

/* 状态条 */
.stat-bar {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-bar label {
    width: 35px;
    color: #aaa;
    font-size: 0.8em;
    flex-shrink: 0;
}

.stat-bar .bar {
    flex: 1;
    height: 14px;
    background: rgba(255,255,255,0.1);
    border-radius: 7px;
    overflow: hidden;
    position: relative;
}

.stat-bar span {
    width: 50px;
    text-align: right;
    font-size: 0.75em;
    color: #aaa;
    flex-shrink: 0;
}

.bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.bar-fill.hp { background: linear-gradient(90deg, #e94560, #ff6b6b); }
.bar-fill.mp { background: linear-gradient(90deg, #4ecdc4, #44a08d); }
.bar-fill.exp { background: linear-gradient(90deg, #f7b731, #f5af19); }
.bar-fill.energy { background: linear-gradient(90deg, #2ecc71, #27ae60); }

/* 修为特殊样式 - 无进度条 */
.stat-bar.exp-bar {
    justify-content: space-between;
}

.stat-bar.exp-bar label {
    color: #f7b731;
}

.stat-bar.exp-bar span {
    color: #f7b731;
    font-weight: bold;
}

/* 银两特殊样式 - 无进度条 */
.stat-bar.gold-bar {
    justify-content: space-between;
}

.stat-bar.gold-bar label {
    color: #f39c12;
}

.stat-bar.gold-bar span {
    color: #f39c12;
    font-weight: bold;
}

/* 属性网格 */
.character-attrs, .character-combat {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.character-attrs h4, .character-combat h4 {
    color: #4ecdc4;
    margin-bottom: 15px;
}

.attr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.attr-box {
    background: rgba(255,255,255,0.05);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.attr-label {
    display: block;
    font-size: 0.85em;
    color: #aaa;
    margin-bottom: 5px;
}

.attr-value {
    font-size: 1.3em;
    font-weight: bold;
    color: #e94560;
}

.character-combat p {
    margin: 8px 0;
    color: #ccc;
}

/* 游戏内容区 */
.game-content {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255,255,255,0.1);
    gap: 20px;
}

.tab-content {
    flex: 1 1 0;
    width: 0;
    max-width: 100%;
    min-width: 0;
}

.content-tabs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-right: 2px solid rgba(255,255,255,0.1);
    padding-right: 15px;
    width: 140px;
    flex-shrink: 0;
}

.tab-btn {
    padding: 12px 15px;
    background: rgba(255,255,255,0.05);
    border: none;
    border-radius: 8px;
    color: #aaa;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1em;
}

.tab-btn:hover {
    background: rgba(255,255,255,0.1);
}

.tab-btn.active {
    background: #e94560;
    color: white;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@media (max-width: 760px) {
    #game-container {
        width: 100%;
        max-width: 100%;
        padding: 10px 8px;
    }

    .game-header {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 14px 10px;
        margin-bottom: 16px;
    }

    .header-title {
        flex: 1 1 100%;
        min-width: 0;
    }

    .game-header h1 {
        font-size: 2rem;
        line-height: 1.12;
        margin-bottom: 6px;
    }

    .subtitle {
        font-size: 0.95rem;
        line-height: 1.35;
    }

    .header-user {
        max-width: 100%;
        margin: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }

    .logout-btn {
        padding: 7px 12px;
        font-size: 0.85rem;
    }

    .game-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-direction: column;
        gap: 14px;
        padding: 12px;
        border-radius: 14px;
        overflow-x: hidden;
    }

    .business-balance-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .content-tabs {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 2px solid rgba(255,255,255,0.1);
        padding-right: 0;
        padding-bottom: 10px;
    }

    .content-tabs .tab-btn {
        flex: 0 0 auto;
        min-width: 72px;
        padding: 10px 12px;
        white-space: nowrap;
    }

    .tab-content,
    .tab-panel.active,
    #tab-trial,
    #jianghu-trial-root {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #tab-equipment,
    #tab-lifeskills {
        overflow-x: hidden;
    }

    .equipment-container {
        width: 100%;
        min-width: 0;
        flex-direction: column;
        gap: 16px;
    }

    .equipment-character,
    .equipment-inventory {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .equipment-inventory {
        padding: 14px;
    }

    .character-paper-doll {
        min-height: 460px;
        padding: 18px 14px;
    }

    .character-paper-doll .equip-slots-container {
        height: 410px;
    }

    .character-paper-doll::after {
        width: 155px;
        height: 260px;
    }

    .equip-slot {
        width: 56px;
        height: 56px;
        border-radius: 10px;
    }

    .equip-slot-icon {
        font-size: 22px;
    }

    .equip-slot-name {
        max-width: 48px;
        font-size: 10px;
    }

    .equip-slot-weapon {
        left: 18px;
    }

    .equip-slot-armor,
    .equip-slot-gloves,
    .equip-slot-accessory {
        right: 26px;
    }

    .equipment-stats .stat-row {
        gap: 12px;
        align-items: flex-start;
    }

    .equipment-stats .stat-name {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .equipment-stats .stat-value {
        flex: 0 0 auto;
        min-width: max-content;
        text-align: right;
        white-space: nowrap;
        font-size: 1rem;
    }

    .life-skills-container {
        min-width: 0;
        padding: 0;
    }

    .life-skills-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px;
    }

    .energy-display {
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
    }

    .energy-bar {
        flex: 1 1 100%;
        width: 100%;
    }

    .bag-button {
        justify-content: center;
        padding: 10px 12px;
    }

    .life-skills-categories {
        flex-direction: column;
        gap: 10px;
    }

    .life-category-btn {
        padding: 12px;
    }

    .gathering-skills-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .gathering-skill-card {
        min-width: 0;
        gap: 10px;
        padding: 12px;
    }

    .skill-icon-large {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        font-size: 2.4em;
    }

    .gathering-skill-info {
        min-width: 0;
    }

    .skill-name-row,
    .skill-cost,
    .crafting-skill-header {
        flex-wrap: wrap;
        gap: 6px;
    }

    .crafting-skill-header .skill-exp-bar {
        flex: 1 1 100%;
        width: 100%;
        margin-right: 0;
    }

    .meditation-container {
        min-width: 0;
        min-height: auto;
        gap: 16px;
    }

    .meditation-info {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .meditation-stats {
        padding: 16px;
    }

    .meditation-stats .stat-item {
        gap: 12px;
        align-items: flex-start;
    }

    .meditation-stats .stat-label {
        min-width: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .meditation-stats .stat-value {
        flex: 0 0 auto;
        min-width: max-content;
        text-align: right;
        white-space: nowrap;
        font-size: 1.1rem;
    }

    .btn-meditation {
        max-width: 100%;
        justify-content: center;
        padding: 14px 24px;
    }
}

.tab-panel h3 {
    color: #e94560;
    margin-bottom: 20px;
    font-size: 1.5em;
}

/* 信息区域 */
.info-section p {
    margin: 15px 0;
    padding: 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    color: #ccc;
}

.info-section strong {
    color: #4ecdc4;
}

/* 武功页面布局 */
.skills-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.skills-header h3 {
    margin: 0;
    color: #e94560;
}

.skills-exp-display {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(247, 183, 49, 0.1);
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(247, 183, 49, 0.3);
}

.exp-label {
    color: #aaa;
    font-size: 0.9em;
}

.exp-value {
    color: #f7b731;
    font-weight: bold;
    font-size: 1.2em;
}

.skills-container {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    height: 600px;
}

.skill-types-nav {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.1);
}

.skill-types-nav h3 {
    color: #e94560;
    margin-bottom: 15px;
    text-align: center;
    font-size: 1.1em;
}

.skill-type-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skill-type-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #aaa;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    font-size: 0.9em;
}

.skill-type-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.skill-type-btn.active {
    background: linear-gradient(135deg, #e94560, #c73e54);
    color: #fff;
    border-color: #e94560;
}

.skills-content {
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    overflow-y: auto;
}

.skills-content h3 {
    color: #4ecdc4;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* 武功列表 */
.skills-list {
    max-height: 520px;
    overflow-y: auto;
}

.skill-level-group {
    margin-bottom: 20px;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.skill-item {
    background: rgba(255,255,255,0.05);
    padding: 12px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.skill-item.learned {
    background: rgba(255,255,255,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.skill-item.learned:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-2px);
}

.skill-item.locked {
    background: rgba(30,30,30,0.5);
}

.skill-item h4 {
    font-size: 1.1em;
    margin-bottom: 5px;
}

.skill-item p {
    margin: 2px 0;
}

.skill-lore-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 20000;
    width: min(360px, calc(100vw - 28px));
    padding: 14px 16px;
    border: 1px solid rgba(247, 183, 49, 0.38);
    border-radius: 8px;
    background: rgba(18, 20, 24, 0.96);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    color: #f4efe2;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    line-height: 1.55;
}

.skill-lore-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.skill-lore-tooltip-title {
    color: #f7b731;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.skill-lore-tooltip-meta {
    color: #80d8d0;
    font-size: 12px;
    margin-bottom: 8px;
}

.skill-lore-tooltip-origin {
    color: #ffd98a;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.skill-lore-tooltip-body {
    color: #ddd6c9;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.skill-lore-tooltip-source {
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #9d9487;
    font-size: 11px;
}

.item-lore-tooltip {
    width: min(560px, calc(100vw - 28px));
    border-color: rgba(128, 216, 208, 0.4);
}

.item-lore-tooltip .skill-lore-tooltip-title {
    color: #80d8d0;
}

.item-lore-tooltip-layout {
    display: grid;
    grid-template-columns: minmax(132px, 1.2fr) minmax(0, 1.8fr);
    gap: 14px;
    align-items: stretch;
}

.item-lore-tooltip-visual {
    min-height: 168px;
    border: 1px solid rgba(128, 216, 208, 0.22);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 38%, rgba(128, 216, 208, 0.17), transparent 58%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    display: grid;
    place-items: center;
    overflow: hidden;
}

.item-lore-tooltip-copy {
    min-width: 0;
}

.item-lore-tooltip-art.item-art,
.item-lore-tooltip-art.item-art-fallback {
    width: min(136px, 78%);
    height: min(136px, 78%);
    min-width: 0;
    min-height: 0;
}

.item-lore-tooltip-art.item-art-image {
    object-fit: contain;
    border-radius: 6px;
    image-rendering: auto;
}

.item-lore-tooltip-art.item-art-fallback {
    display: grid;
    place-items: center;
    font-size: 64px;
    background: rgba(0, 0, 0, 0.18);
}

@media (max-width: 520px) {
    .item-lore-tooltip-layout {
        grid-template-columns: 1fr;
    }

    .item-lore-tooltip-visual {
        min-height: 126px;
    }

    .item-lore-tooltip-art.item-art,
    .item-lore-tooltip-art.item-art-fallback {
        width: 104px;
        height: 104px;
    }
}

/* 任务卡片 */
.mission-list {
    display: grid;
    gap: 15px;
}

.mission-intro {
    color: #888;
    font-size: 0.9em;
    margin-bottom: 10px;
    text-align: center;
}

.mission-types-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}

.mission-types-info span {
    font-size: 0.85em;
    color: #aaa;
    padding: 3px 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
}

.mission-card {
    background: rgba(255,255,255,0.05);
    padding: 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.mission-card:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.mission-card.easy {
    border-left: 4px solid #4ade80;
}

.mission-card.easy:hover {
    border-color: #4ade80;
}

.mission-card.normal {
    border-left: 4px solid #facc15;
}

.mission-card.normal:hover {
    border-color: #facc15;
}

.mission-card.hard {
    border-left: 4px solid #f87171;
}

.mission-card.hard:hover {
    border-color: #f87171;
}

.mission-card h4 {
    margin-bottom: 10px;
}

.mission-card.easy h4 {
    color: #4ade80;
}

.mission-card.normal h4 {
    color: #facc15;
}

.mission-card.hard h4 {
    color: #f87171;
}

.mission-rewards {
    color: #e94560;
    font-weight: bold;
    margin-bottom: 8px !important;
}

.mission-note {
    color: #666;
    font-size: 0.85em;
    margin-bottom: 10px !important;
}

/* 子标签系统 */
.sub-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sub-tab-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    color: #aaa;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.9em;
}

.sub-tab-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.sub-tab-btn.active {
    background: linear-gradient(135deg, #e94560, #c73e54);
    border-color: #e94560;
    color: #fff;
}

.sub-tab-panel {
    display: none;
}

.sub-tab-panel.active {
    display: block;
}

/* 原著剧情系统 */
.story-quest-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.story-quest-header {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.1), rgba(199, 62, 84, 0.1));
    padding: 15px 20px;
    border-radius: 10px;
    border-left: 3px solid #e94560;
}

.story-quest-header h3 {
    color: #e94560;
    margin: 0 0 5px 0;
    font-size: 1.1em;
}

.story-intro {
    color: #aaa;
    margin: 0;
    font-size: 0.85em;
}

/* 当前任务显示 */
.current-quest {
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    padding: 15px;
}

.no-quest {
    text-align: center;
    padding: 30px 20px;
    color: #666;
}

.no-quest .icon {
    font-size: 3em;
    display: block;
    margin-bottom: 15px;
}

.no-quest .hint {
    font-size: 0.85em;
    color: #555;
}

.quest-progress {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.quest-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #4ecdc4;
    margin-bottom: 10px;
}

.quest-description {
    color: #ccc;
    margin-bottom: 15px;
    line-height: 1.5;
}

.quest-steps {
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 15px;
}

.quest-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.quest-step:last-child {
    border-bottom: none;
}

.quest-step.completed {
    opacity: 0.5;
}

.quest-step.completed .step-icon {
    background: #4ecdc4;
}

.quest-step.current .step-icon {
    background: #e94560;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(233, 69, 96, 0); }
}

.step-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    flex-shrink: 0;
}

.step-text {
    flex: 1;
    color: #bbb;
    font-size: 0.9em;
}

.step-status {
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 10px;
}

.step-status.done {
    background: rgba(78, 205, 196, 0.2);
    color: #4ecdc4;
}

.step-status.current {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
}

.quest-actions {
    display: flex;
    gap: 10px;
}

.btn-secondary {
    background: rgba(255,255,255,0.1);
}

.btn-small {
    padding: 6px 12px;
    font-size: 13px;
}

/* 剧情章节列表 */
.story-chapters {
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    padding: 15px;
}

.story-chapters h4 {
    color: #888;
    margin: 0 0 12px 0;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.chapter-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chapter-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 12px 15px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 12px;
}

.chapter-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(78, 205, 196, 0.5);
    transform: translateX(5px);
}

.chapter-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.chapter-card.locked:hover {
    transform: none;
    border-color: rgba(255,255,255,0.1);
}

.chapter-card.completed {
    border-color: #4ecdc4;
}

.chapter-card.completed .chapter-icon {
    background: #4ecdc4;
}

.chapter-card.current {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.1);
}

.chapter-card.current .chapter-icon {
    background: #e94560;
}

.chapter-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    flex-shrink: 0;
}

.chapter-info {
    flex: 1;
}

.chapter-name {
    color: #fff;
    font-size: 0.95em;
    margin-bottom: 3px;
}

.chapter-location {
    color: #888;
    font-size: 0.8em;
}

.chapter-status {
    font-size: 0.75em;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.1);
    color: #aaa;
}

.chapter-card.completed .chapter-status {
    background: rgba(78, 205, 196, 0.2);
    color: #4ecdc4;
}

.chapter-card.current .chapter-status {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
}

.chapter-card.locked .chapter-status {
    background: rgba(255,255,255,0.05);
    color: #666;
}

/* 卷次容器 */
.volume-container {
    margin-bottom: 15px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.volume-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.15), rgba(78, 205, 196, 0.05));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s;
}

.volume-header:hover {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.25), rgba(78, 205, 196, 0.1));
}

.volume-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(78, 205, 196, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.volume-info {
    flex: 1;
    min-width: 0;
}

.volume-name {
    font-size: 16px;
    font-weight: bold;
    color: #4ecdc4;
    margin-bottom: 4px;
}

.volume-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.volume-progress {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 80px;
}

.progress-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ecdc4, #44a08d);
    transition: width 0.3s ease;
}

.volume-toggle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s;
    flex-shrink: 0;
}

.volume-content {
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    display: none;
}

.volume-content .chapter-card {
    margin-bottom: 8px;
}

.volume-content .chapter-card:last-child {
    margin-bottom: 0;
}

/* 历练选项 */
.adventure-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.adventure-card {
    background: rgba(255,255,255,0.05);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.adventure-card:hover {
    border-color: #4ecdc4;
    transform: translateY(-5px);
}

.adventure-card .icon {
    font-size: 3em;
    margin-bottom: 15px;
    display: block;
}

.adventure-card h4 {
    color: #4ecdc4;
    margin-bottom: 10px;
}

.adventure-card p {
    color: #aaa;
}

/* ==================== 自我修炼界面 ==================== */
.meditation-container {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: center;
    min-height: 500px;
}

.meditation-scene {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.meditation-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.meditation-circle {
    position: absolute;
    border: 2px solid rgba(78, 205, 196, 0.3);
    border-radius: 50%;
    animation: pulse 3s ease-in-out infinite;
}

.meditation-circle:nth-child(1) {
    width: 120px;
    height: 120px;
    animation-delay: 0s;
}

.meditation-circle:nth-child(2) {
    width: 180px;
    height: 180px;
    animation-delay: 0.5s;
}

.meditation-circle:nth-child(3) {
    width: 240px;
    height: 240px;
    animation-delay: 1s;
}

.meditation-circle.active {
    border-color: rgba(247, 183, 49, 0.6);
    animation: pulse-active 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.5;
    }
}

@keyframes pulse-active {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
        box-shadow: 0 0 20px rgba(247, 183, 49, 0.3);
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
        box-shadow: 0 0 40px rgba(247, 183, 49, 0.6);
    }
}

.meditation-character {
    position: relative;
    z-index: 2;
}

.meditator {
    width: 280px;
    max-width: 88%;
    height: auto;
    display: block;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
    animation: float-meditation 3s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(78, 205, 196, 0.5));
}

.meditator.active {
    filter: drop-shadow(0 0 30px rgba(247, 183, 49, 0.8));
    animation: float-meditation-active 2s ease-in-out infinite;
}

@keyframes float-meditation {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes float-meditation-active {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-15px) scale(1.05);
    }
}

.energy-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.energy-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #f7b731;
    border-radius: 50%;
    animation: rise-particle 2s ease-in infinite;
    opacity: 0;
}

@keyframes rise-particle {
    0% {
        transform: translateY(160px) scale(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(-50px) scale(1);
        opacity: 0;
    }
}

.meditation-info {
    flex: 1;
    max-width: 400px;
    text-align: center;
}

.meditation-info h3 {
    color: #f7b731;
    font-size: 2em;
    margin-bottom: 15px;
    text-shadow: 0 0 20px rgba(247, 183, 49, 0.3);
}

.meditation-desc {
    color: #ccc;
    font-size: 1.1em;
    margin-bottom: 25px;
    line-height: 1.6;
}

.meditation-desc .highlight {
    color: #f7b731;
    font-weight: bold;
    font-size: 1.2em;
}

.meditation-stats {
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid rgba(78, 205, 196, 0.2);
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-label {
    color: #aaa;
    font-size: 1em;
}

.stat-value {
    color: #4ecdc4;
    font-size: 1.3em;
    font-weight: bold;
}

.stat-value.gain {
    color: #f7b731;
    transition: transform 0.2s ease;
}

.stat-value.gain.pulse {
    transform: scale(1.2);
}

.meditation-control {
    margin-bottom: 20px;
}

.btn-meditation {
    padding: 15px 40px;
    font-size: 1.2em;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

.btn-start {
    background: linear-gradient(135deg, #f7b731, #e59f1d);
    color: #1a1a2e;
    box-shadow: 0 5px 20px rgba(247, 183, 49, 0.3);
}

.btn-start:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(247, 183, 49, 0.5);
}

.btn-stop {
    background: linear-gradient(135deg, #e94560, #c73e54);
    color: white;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.3);
}

.btn-stop:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(233, 69, 96, 0.5);
}

.btn-icon {
    font-size: 1.3em;
}

.meditation-tips {
    background: rgba(78, 205, 196, 0.1);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid rgba(78, 205, 196, 0.2);
}

.meditation-tips p {
    color: #4ecdc4;
    font-size: 0.9em;
    margin: 0;
}

/* 修炼进度条效果 */
.exp-gain-effect {
    position: absolute;
    color: #f7b731;
    font-weight: bold;
    font-size: 1.2em;
    animation: expFloat 1s ease-out forwards;
    pointer-events: none;
}

@keyframes expFloat {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px);
        opacity: 0;
    }
}

/* 学习武功界面 */
.learn-skill-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    background: rgba(0,0,0,0.8);
    border-radius: 20px;
}

.learn-skill-container h2 {
    text-align: center;
    color: #f7b731;
    margin-bottom: 20px;
}

.current-exp {
    text-align: center;
    font-size: 1.3em;
    color: #4ecdc4;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(78, 205, 196, 0.1);
    border-radius: 10px;
}

.skill-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.learn-skill-list {
    max-height: 500px;
    overflow-y: auto;
}

.learn-skill-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    border: 2px solid transparent;
    transition: all 0.3s;
}

.learn-skill-item:hover {
    background: rgba(255,255,255,0.1);
    border-color: #4ecdc4;
}

.learn-skill-item.learned {
    border-color: #4ecdc4;
    background: rgba(78, 205, 196, 0.1);
}

.learn-skill-item.learned::after {
    content: '✓ 已学会';
    color: #4ecdc4;
    font-weight: bold;
}

.skill-info h4 {
    color: #fff;
    margin-bottom: 5px;
}

.skill-info p {
    color: #aaa;
    font-size: 0.9em;
}

.skill-cost {
    text-align: right;
}

.skill-cost .exp-price {
    color: #f7b731;
    font-size: 1.2em;
    font-weight: bold;
}

.skill-cost button {
    margin-top: 8px;
    padding: 8px 20px;
    background: #4ecdc4;
    border: none;
    border-radius: 8px;
    color: #000;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
}

.skill-cost button:hover {
    background: #3dbdb4;
}

.skill-cost button:disabled {
    background: #555;
    cursor: not-allowed;
}

.skill-cost .learned-badge {
    color: #4ecdc4;
    font-weight: bold;
}

/* 商店 */
.shop-categories {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.shop-category-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255,255,255,0.05);
    border: 2px solid transparent;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s;
}

.shop-category-btn:hover {
    background: rgba(255,255,255,0.1);
}

.shop-category-btn.active {
    background: rgba(233, 69, 96, 0.2);
    border-color: #e94560;
}

.shop-category-btn .category-icon {
    font-size: 1.2em;
}

.shop-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}

.shop-item {
    background: rgba(255,255,255,0.05);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.shop-item:hover {
    border-color: #f7b731;
    transform: scale(1.05);
}

.shop-item .item-icon {
    font-size: 2.5em;
    margin-bottom: 10px;
    display: block;
}

.shop-item h4 {
    color: #f7b731;
    margin-bottom: 5px;
}

.shop-item p {
    color: #aaa;
    font-size: 0.9em;
}

.shop-item .price {
    color: #e94560;
    font-weight: bold;
    margin-top: 10px;
}

/* 客栈服务样式 */
.shop-service {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(33, 150, 243, 0.1) 100%);
    border-color: rgba(76, 175, 80, 0.3) !important;
}

.shop-service:hover {
    border-color: #4caf50 !important;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
}

.shop-service .service-badge {
    display: inline-block;
    background: rgba(76, 175, 80, 0.3);
    color: #4caf50;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    margin-top: 5px;
}

.empty-message {
    text-align: center;
    color: #aaa;
    padding: 40px;
}

/* ==================== 装备系统样式 ==================== */
.equipment-container {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

.equipment-character {
    flex: 0 0 420px;
    display: flex;
    flex-direction: column;
}

/* Paper-doll panel */
.character-paper-doll {
    background-color: #0d0b12;
    background-image:
        radial-gradient(circle at 50% 12%, rgba(255, 214, 120, 0.16) 0%, rgba(255, 214, 120, 0) 44%),
        radial-gradient(circle at 50% 80%, rgba(233, 69, 96, 0.08) 0%, rgba(233, 69, 96, 0) 45%),
        linear-gradient(180deg, rgba(17, 12, 32, 0.2) 0%, rgba(33, 23, 52, 0.1) 48%, rgba(16, 11, 30, 0.28) 100%),
        url('images/ui/equipment-paper-doll-wuxia-v1.png');
    background-position: center, center, center, center;
    background-repeat: no-repeat;
    background-size: auto, auto, cover, cover;
    border-radius: 16px;
    padding: 24px 28px 26px;
    position: relative;
    min-height: 560px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow:
        0 0 45px rgba(212, 175, 55, 0.1),
        0 16px 46px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Ambient effect */
.character-paper-doll::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 28%);
    pointer-events: none;
}

/* Slot board */
.character-paper-doll .equip-slots-container {
    position: relative;
    width: 100%;
    height: 500px;
    z-index: 2;
}

/* Slot cards */
.equip-slot {
    position: absolute;
    width: 68px;
    height: 68px;
    --slot-x: 0%;
    --slot-y: 0%;
    transform: translate(var(--slot-x), var(--slot-y));
    background: transparent;
    border: 0;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    transition: transform 0.24s ease, filter 0.24s ease;
    box-shadow: none;
    z-index: 10;
    opacity: 1;
}

.equip-slot::before {
    content: none;
}

.equip-slot:hover {
    transform: translate(var(--slot-x), var(--slot-y)) translateY(-1px) scale(1.03);
    filter: drop-shadow(0 0 8px rgba(255, 216, 120, 0.22));
}

.equip-slot:not(.equipped) .equip-slot-icon {
    display: none;
    filter: grayscale(0.8) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}

.equip-slot:not(.equipped) .equip-slot-name {
    color: rgba(216, 199, 141, 0.64);
}

.equip-slot.equipped {
    opacity: 1;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.equip-slot.equipped::after {
    content: none;
}

.equip-slot.equipped:hover {
    filter: drop-shadow(0 0 12px rgba(255, 216, 120, 0.36));
}

.equip-slot.equipped .equip-slot-icon {
    display: flex;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.75));
}

.equip-slot-icon {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
    pointer-events: none;
    transition: transform 0.3s ease;
    transform-origin: center;
}

.equip-slot:hover .equip-slot-icon {
    transform: scale(1.1);
}

.equip-slot-name {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: rgba(216, 199, 141, 0.72);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    font-weight: 500;
    letter-spacing: 0.3px;
    max-width: 100%;
    padding: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1.1;
    pointer-events: none;
}

.equip-slot.equipped .equip-slot-name {
    display: none;
}

.equip-slot-icon .item-art,
.equip-slot-icon .item-art-fallback {
    --item-art-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 13px;
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

.equip-slot-icon .item-art-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    object-fit: contain;
    object-position: center center;
}

/* Slot positions */
.equip-slot-helmet {
    top: 20px;
    left: 50%;
    --slot-x: -50%;
}

.equip-slot-weapon {
    top: 190px;
    left: 18px;
}

.equip-slot-cape {
    top: 184px;
    left: 50%;
    --slot-x: -50%;
}

.equip-slot-armor {
    top: 184px;
    right: 26px;
}

.equip-slot-gloves {
    top: 274px;
    right: 26px;
}

.equip-slot-accessory {
    top: 112px;
    right: 26px;
}

.equip-slot-legs {
    top: 344px;
    left: 50%;
    --slot-x: -50%;
}

.equip-slot-boots {
    bottom: 12px;
    left: 50%;
    --slot-x: -50%;
}

/* 各装备槽的主题颜色 */
.equip-slot-weapon {
    border-color: transparent;
}

.equip-slot-weapon:hover {
    box-shadow: none;
}

.equip-slot-helmet {
    border-color: transparent;
}

.equip-slot-helmet:hover {
    box-shadow: none;
}

.equip-slot-armor {
    border-color: transparent;
}

.equip-slot-armor:hover {
    box-shadow: none;
}

.equip-slot-gloves {
    border-color: transparent;
}

.equip-slot-gloves:hover {
    box-shadow: none;
}

.equip-slot-legs {
    border-color: transparent;
}

.equip-slot-legs:hover {
    box-shadow: none;
}

.equip-slot-boots {
    border-color: transparent;
}

.equip-slot-boots:hover {
    box-shadow: none;
}

.equip-slot-cape {
    border-color: transparent;
}

.equip-slot-cape:hover {
    box-shadow: none;
}

.equip-slot-accessory {
    border-color: transparent;
}

.equip-slot-accessory:hover {
    box-shadow: none;
}

/* 装备槽稀有度光效 */
.equip-slot[data-rarity="3"] {
    animation: none;
}

.equip-slot[data-rarity="4"] {
    animation: none;
}

.equip-slot[data-rarity="5"] {
    animation: none;
    border-color: transparent !important;
}

@keyframes rareGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(52, 152, 219, 0.3); }
    50% { box-shadow: 0 0 25px rgba(52, 152, 219, 0.5); }
}

@keyframes epicGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(155, 89, 182, 0.4); }
    50% { box-shadow: 0 0 30px rgba(155, 89, 182, 0.6); }
}

@keyframes legendaryPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(241, 196, 15, 0.5), 0 0 40px rgba(241, 196, 15, 0.2);
        border-color: rgba(241, 196, 15, 0.8);
    }
    50% {
        box-shadow: 0 0 35px rgba(241, 196, 15, 0.8), 0 0 60px rgba(241, 196, 15, 0.4);
        border-color: rgba(241, 196, 15, 1);
    }
}

/* 连接线效果 - 装备之间的装饰线 */
.character-paper-doll::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 320px;
    border: 1px dashed rgba(212, 175, 55, 0.15);
    border-radius: 100px;
    pointer-events: none;
    z-index: 1;
}

.equipment-stats {
    margin-top: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.equipment-stats h4 {
    margin-bottom: 15px;
    color: #f7b731;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-name {
    color: #aaa;
}

.stat-value {
    color: #4ade80;
    font-weight: bold;
}

.equipment-inventory {
    flex: 1.5;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.equipment-inventory h4 {
    margin-bottom: 15px;
    color: #f7b731;
}

.inventory-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #ccc;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s;
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.filter-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 5px;
}

.inventory-item {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #444;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.inventory-item:hover {
    border-color: #f7b731;
    background: rgba(233, 69, 96, 0.2);
}

.inventory-item.selected {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.3);
}

.inventory-item.equipped {
    border-color: #666;
    opacity: 0.6;
}

.inventory-item-icon {
    font-size: 24px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.item-count-badge {
    position: absolute;
    bottom: -2px;
    right: -8px;
    background: #e94560;
    color: #fff;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 8px;
    font-weight: bold;
    white-space: nowrap;
}

.inventory-item-name {
    font-size: 11px;
    color: #fff;
}

.inventory-item-rarity {
    font-size: 9px;
    color: #aaa;
}

.item-detail-panel {
    margin-top: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    min-height: 100px;
}

.item-detail-panel h4 {
    color: #f7b731;
    margin-bottom: 10px;
}

.item-detail-panel .empty-text {
    color: #666;
    text-align: center;
    padding: 20px;
}

.item-detail-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item-detail-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.item-detail-icon {
    font-size: 48px;
}

.item-detail-info h4 {
    color: #f7b731;
    font-size: 16px;
    margin: 0;
}

.item-detail-desc {
    color: #aaa;
    font-size: 13px;
}

.item-detail-stats {
    color: #aaa;
    font-size: 12px;
}

.equip-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.equip-btn {
    flex: 1;
    padding: 10px;
    background: #e94560;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s;
}

.equip-btn:hover {
    background: #ff6b6b;
}

.equip-btn:disabled {
    background: #666;
    cursor: not-allowed;
}

.unequip-btn {
    background: #f7b731;
}

.unequip-btn:hover {
    background: #ffa94d;
}

/* 稀有度颜色 */
.rarity-1 { color: #ffffff; }
.rarity-2 { color: #1eff00; }
.rarity-3 { color: #0070dd; }
.rarity-4 { color: #a335ee; }
.rarity-5 { color: #ff8000; }

/* 战斗界面 */
.battle-scene {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    transition: all 0.5s ease;
    background: transparent !important;
    pointer-events: none;
}

.battle-scene.forest {
    background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 50%, #f0f0f0 100%);
}

.battle-scene.town {
    background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 50%, #f0f0f0 100%);
}

.battle-scene.school {
    background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 50%, #f0f0f0 100%);
}

.battle-scene.night {
    background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 50%, #f0f0f0 100%);
}

.battle-scene.snow {
    background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 50%, #f0f0f0 100%);
}

.battle-scene.desert {
    background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 50%, #f0f0f0 100%);
}

.battle-scene.mountain {
    background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 50%, #f0f0f0 100%);
}

.battle-scene.water {
    background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 50%, #f0f0f0 100%);
}

.scene-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.battle-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    animation: float linear infinite;
}

@keyframes float {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

.battle-arena {
    position: relative;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.85);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    backdrop-filter: blur(3px);
    border-radius: 20px;
    padding: 20px 50px 0 50px;
    border: 2px solid #e94560;
    /* 16:9 宽高比 */
    aspect-ratio: 16 / 9;
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.battle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 15px 25px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.battle-scene-name {
    font-size: 1.5em;
    color: #f7b731;
}

.battle-turn {
     font-size: 1.2em;
     color: #4ecdc4;
}

.battle-arena h2 {
    text-align: center;
    color: #e94560;
    margin-bottom: 30px;
}

/* 伤害飘字特效 */
.damage-text {
    position: absolute;
    font-size: 2em;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    animation: damageFloat 1s ease-out forwards;
    pointer-events: none;
    z-index: 100;
}

.damage-text.crit {
    font-size: 2.5em;
    color: #ffd700;
    text-shadow: 0 0 20px #ffd700, 2px 2px 4px rgba(0,0,0,0.8);
}

.damage-text.heal {
    color: #4ecdc4;
}

.damage-text.dodge {
    color: #aaa;
    font-size: 1.5em;
}

@keyframes damageFloat {
    0% { transform: translateY(0) scale(0.5); opacity: 1; }
    50% { transform: translateY(-30px) scale(1.2); opacity: 1; }
    100% { transform: translateY(-60px) scale(1); opacity: 0; }
}

/* 暴击屏幕震动 */
.screen-shake {
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* 攻击动画 */
.fighter-attack-right {
    animation: attackRight 0.3s ease-in-out;
}

@keyframes attackRight {
    0% { transform: translateX(0); }
    50% { transform: translateX(50px); }
    100% { transform: translateX(0); }
}

.fighter-attack-left {
    animation: attackLeft 0.3s ease-in-out;
}

@keyframes attackLeft {
    0% { transform: translateX(0); }
    50% { transform: translateX(-50px); }
    100% { transform: translateX(0); }
}

/* 受伤闪烁 */
.fighter-hit {
    animation: hitFlash 0.2s ease-in-out 3;
}

@keyframes hitFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* 战斗胜利/失败特效 */
.battle-win {
    animation: winFlash 0.5s ease-in-out;
}

@keyframes winFlash {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
}

.battle-lose {
    animation: loseFlash 0.5s ease-in-out;
}

@keyframes loseFlash {
    0%, 100% { filter: grayscale(0); }
    50% { filter: grayscale(1); }
}

/* 技能菜单 */
.skill-menu {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid #4ecdc4;
    border-radius: 15px;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
}

.skill-menu h4 {
    color: #f7b731;
    margin-bottom: 15px;
}

.skill-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.skill-option {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.skill-option:hover {
    background: rgba(78, 205, 196, 0.2);
    border-color: #4ecdc4;
}

.skill-option .skill-name {
    color: #fff;
    font-weight: bold;
    margin-bottom: 5px;
}

.skill-option .skill-cost {
    color: #4ecdc4;
    font-size: 0.9em;
}

.skill-option .skill-power {
    color: #e94560;
    font-size: 0.8em;
}

.battle-field {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    margin-bottom: 0;
    position: relative;
    z-index: 3;
    /* 让人物贴紧底部 */
    padding-bottom: 0;
    flex: 1;
    min-height: 0;
    /* 🔥 整体上移人物位置 */
    padding-top: 8%;  /* 从顶部增加内边距，把人物往下推 */
}

.fighter {
    text-align: center;
    position: relative;
    /* 透明背景，让人物融入背景图 */
    background: transparent;
    border-radius: 20px;
    padding: 15px 25px 0 25px;
    /* 可选：添加轻微阴影让人物更突出 */
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
    z-index: 4;
    min-width: 220px;
    /* 让人物贴紧底部 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 40px;  /* 🔥 距离底部40px */
}

.fighter-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4em;
    margin: 0 auto 15px;
}

.player .fighter-avatar {
    background: linear-gradient(135deg, #ffffff, #e8e8e8);
}

.enemy .fighter-avatar {
    background: linear-gradient(135deg, #e94560, #c73e54);
}

/* 人物上方信息区域 - 透明背景 */
.fighter-info-top {
    margin-bottom: 8px;
    padding: 6px 8px;
    background: transparent;
    border-radius: 10px;
}

.fighter-info-top h3 {
    margin-bottom: 2px;
    color: #fff;
    font-size: 1em;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

.fighter-info-top .fighter-title {
    color: rgba(255,255,255,0.9);
    font-size: 0.8em;
    margin-bottom: 5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* 战斗状态条 - 横向布局 */
.fighter-info-top .status-bar {
    display: flex;
    align-items: center;
    margin: 3px 0;
    gap: 5px;
}

.fighter-info-top .status-bar .bar-container {
    height: 10px;
}

.fighter-info-top .status-bar .bar-text {
    font-size: 0.7em;
    min-width: 45px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.status-bar .bar-label {
    font-size: 0.9em;
    width: 18px;
    text-align: center;
}

.status-bar .bar-container {
    flex: 1;
    height: 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.status-bar .bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.3s ease;
}

.status-bar .bar-fill.hp {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.status-bar .bar-fill.mp {
    background: linear-gradient(90deg, #3498db, #2980b9);
}

.status-bar .bar-fill.sp {
    background: linear-gradient(90deg, #f39c12, #e67e22);
}

.status-bar .bar-text {
    font-size: 0.75em;
    color: #555;
    min-width: 50px;
    text-align: right;
}

/* 压缩战斗人物框 */
.fighter {
    padding: 12px;
    min-width: 140px;
}

/* 进一步压缩战斗人物信息 */
.fighter-info {
    margin-top: 8px;
}

.fighter-info .status-icons {
    margin-top: 6px;
}

.vs {
    font-size: 2em;
    color: #f7b731;
    font-weight: bold;
}

.battle-log {
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    padding: 20px;
    height: 200px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.battle-log p {
    margin: 5px 0;
    padding: 8px;
    border-radius: 5px;
}

.battle-log .player-action {
    background: rgba(78, 205, 196, 0.2);
    color: #4ecdc4;
}

.battle-log .enemy-action {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
}

.battle-log .system-msg {
    color: #f7b731;
    text-align: center;
}

.battle-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* 合并后的战斗操作行 */
/* 战斗操作区 - 在战斗框下方 */
.battle-actions-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap;
    margin-top: 20px;
    padding: 15px 25px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    backdrop-filter: blur(5px);
}

.battle-actions-row .btn {
    padding: 10px 16px;
    font-size: 0.9em;
    min-width: 90px;
    height: 55px;
    background: linear-gradient(145deg, #4a4a4a, #2a2a2a);
    border: 1px solid rgba(255,255,255,0.2);
}

.battle-actions-row .btn:hover {
    background: linear-gradient(145deg, #5a5a5a, #3a3a3a);
}

.battle-actions-row .btn-attack {
    background: linear-gradient(145deg, #e74c3c, #c0392b);
}

.battle-actions-row .btn-attack:hover {
    background: linear-gradient(145deg, #ff6b6b, #e74c3c);
}

.battle-actions-row .btn-skill {
    background: linear-gradient(145deg, #3498db, #2980b9);
}

.battle-actions-row .btn-skill:hover {
    background: linear-gradient(145deg, #5dade2, #3498db);
}

.battle-actions-row .btn-text {
    font-size: 0.9em;
}

.battle-actions-row .quick-skills {
    margin-bottom: 0;
    padding: 10px;
    gap: 8px;
    background: rgba(255,255,255,0.1);
}

.battle-actions-row .quick-skill-slot {
    width: 55px;
    height: 55px;
}

/* 消息提示 */
.message-box {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    background: #e94560;
    color: white;
    border-radius: 10px;
    display: none;
    z-index: 2000;
    animation: slideIn 0.3s ease;
}

.message-box.show {
    display: block;
}

/* 输入对话框 */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
}

/* 剧情对话框样式 */
.story-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
}

.story-dialog {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 30px;
    border-radius: 20px;
    border: 2px solid #ffd700;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

.story-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 10px;
}

.story-dialog-header h3 {
    color: #ffd700;
    margin: 0;
}

.story-dialog-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 24px;
    cursor: pointer;
}

.story-dialog-close:hover {
    color: #fff;
}

.story-dialog-body {
    color: #e0e0e0;
    line-height: 1.8;
}

.story-dialog-actions {
     display: flex;
     gap: 15px;
     justify-content: center;
     margin-top: 25px;
 }

 /* RPG风格对话框 */
 .rpg-dialog-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10000;
 }

 .rpg-dialog-container {
     width: 90%;
     max-width: 800px;
     background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
     border-radius: 20px;
     border: 3px solid #4ecdc4;
     box-shadow: 0 0 30px rgba(78, 205, 196, 0.3);
     overflow: hidden;
     display: flex;
     gap: 20px;
     padding: 30px;
 }

 /* RPG对话框的各个部分 */
 .rpg-character-portrait {
     display: flex;
     flex-direction: column;
     align-items: center;
     flex-shrink: 0;
 }

 .rpg-portrait-frame {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     border: 3px solid #4ecdc4;
     overflow: hidden;
     background: linear-gradient(135deg, #2d2d44 0%, #1a1a2e 100%);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .rpg-portrait-image {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 50px;
 }

 .rpg-portrait-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .rpg-portrait-name {
     margin-top: 10px;
     color: #4ecdc4;
     font-size: 14px;
     font-weight: bold;
     text-align: center;
 }

 .rpg-dialog-content {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     min-height: 100px;
     padding: 20px;
 }

 .rpg-dialog-text {
     color: #ffffff;
     font-size: 18px;
     line-height: 1.8;
     padding: 10px;
     min-height: 50px;
 }

 /* RPG对话框布局样式 */
 .rpg-dialog-container {
     display: flex;
     gap: 20px;
     padding: 30px;
 }

 .rpg-character-portrait {
     display: flex;
     flex-direction: column;
     align-items: center;
     flex-shrink: 0;
 }

 .rpg-portrait-frame {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     border: 3px solid #4ecdc4;
     overflow: hidden;
     background: linear-gradient(135deg, #2d2d44 0%, #1a1a2e 100%);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .rpg-portrait-image {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 50px;
 }

 .rpg-portrait-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .rpg-portrait-name {
     margin-top: 10px;
     color: #4ecdc4;
     font-size: 14px;
     font-weight: bold;
     text-align: center;
 }

 .rpg-dialog-controls {
     display: flex;
     justify-content: flex-end;
     padding-top: 20px;
 }

 .rpg-continue-btn {
     background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
     color: #1a1a2e;
     border: none;
     padding: 10px 25px;
     border-radius: 20px;
     font-size: 14px;
     font-weight: bold;
     cursor: pointer;
     transition: all 0.3s;
 }

 .rpg-continue-btn:hover {
     transform: scale(1.05);
     box-shadow: 0 0 15px rgba(78, 205, 196, 0.5);
 }

 .rpg-dialog-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 15px 25px;
     background: rgba(0, 0, 0, 0.3);
     border-top: 1px solid #333;
 }

 .rpg-dialog-hint {
     color: #666;
     font-size: 12px;
 }

 .rpg-next-btn {
     background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
     color: #1a1a2e;
     border: none;
     padding: 10px 25px;
     border-radius: 20px;
     font-size: 14px;
     font-weight: bold;
     cursor: pointer;
     transition: all 0.3s;
 }

 .rpg-next-btn:hover {
     transform: scale(1.05);
     box-shadow: 0 0 15px rgba(78, 205, 196, 0.5);
 }

 /* 旅行选择对话框 */
 .travel-dialog {
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
     padding: 30px;
     border-radius: 20px;
     border: 2px solid #4ecdc4;
     max-width: 500px;
     width: 90%;
     text-align: center;
 }

 .travel-options {
     display: flex;
     gap: 15px;
     justify-content: center;
     margin: 20px 0;
 }

 .travel-option {
     padding: 15px 25px;
     border: 2px solid #4ecdc4;
     border-radius: 10px;
     background: rgba(78, 205, 196, 0.1);
     color: #4ecdc4;
     cursor: pointer;
     transition: all 0.3s;
 }

 .travel-option:hover {
     background: rgba(78, 205, 196, 0.3);
     transform: translateY(-3px);
 }

 .travel-icon {
     font-size: 30px;
     display: block;
     margin-bottom: 10px;
 }

 .travel-title {
     font-weight: bold;
     display: block;
 }

 .travel-desc {
     font-size: 12px;
     opacity: 0.8;
 }

 /* 获得物品对话框 */
 .obtain-dialog {
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
     padding: 30px;
     border-radius: 20px;
     border: 2px solid #9b59b6;
     max-width: 500px;
     width: 90%;
 }

 /* 发誓对话框 */
 .vow-scene {
     text-align: center;
     padding: 20px;
 }

 .vow-promise {
     color: #ffd700;
     font-size: 18px;
     font-weight: bold;
     margin-top: 20px;
     padding: 15px;
     border: 1px solid #ffd700;
     border-radius: 10px;
 }

 /* 礼物对话框 */
 .gifts-list {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .gift-item {
     display: flex;
     align-items: center;
     gap: 15px;
     padding: 15px;
     border: 1px solid rgba(255, 215, 0, 0.3);
     border-radius: 10px;
 }

 .gift-icon {
     font-size: 40px;
 }

 .gift-info h4 {
     color: #ffd700;
     margin: 0 0 5px 0;
 }

 .gift-info p {
     color: #aaa;
     margin: 0;
     font-size: 14px;
 }

 .dialog-box {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 30px;
    border-radius: 20px;
    border: 2px solid #4ecdc4;
    text-align: center;
    min-width: 350px;
    box-shadow: 0 0 30px rgba(78, 205, 196, 0.3);
}

.dialog-box h3 {
    color: #f7b731;
    margin-bottom: 15px;
    font-size: 1.5em;
}

.dialog-box p {
    color: #ccc;
    margin-bottom: 20px;
}

.dialog-input {
    width: 80%;
    padding: 12px 20px;
    font-size: 1.2em;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid #4ecdc4;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    margin-bottom: 15px;
}

.dialog-input:focus {
    outline: none;
    border-color: #f7b731;
    box-shadow: 0 0 10px rgba(247, 183, 49, 0.3);
}

.dialog-info {
    color: #4ecdc4;
    margin-bottom: 20px;
    font-size: 1.1em;
}

.dialog-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn-confirm {
    background: #4ecdc4;
    color: #000;
    padding: 10px 30px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-confirm:hover {
    background: #3dbdb4;
    transform: scale(1.05);
}

.btn-cancel {
    background: #555;
    color: #fff;
    padding: 10px 30px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-cancel:hover {
    background: #666;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* 游戏日志 */
.game-log {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    max-height: 150px;
    background: rgba(0,0,0,0.8);
    border-radius: 10px;
    padding: 15px;
    overflow-y: auto;
    display: none;
}

.game-log.show {
    display: block;
}

/* 响应式设计 */
@media (max-width: 900px) {
    .game-layout {
        grid-template-columns: 1fr;
    }

    .character-panel {
        order: 2;
    }

    .adventure-options {
        grid-template-columns: 1fr;
    }

    .schools-grid {
        grid-template-columns: 1fr;
    }

    .meditation-container {
        flex-direction: column;
        gap: 20px;
    }

    .meditation-scene {
        width: 260px;
        height: 260px;
    }

    .meditator {
        width: 230px;
    }

    .meditation-circle:nth-child(1) {
        width: 100px;
        height: 100px;
    }

    .meditation-circle:nth-child(2) {
        width: 150px;
        height: 150px;
    }

    .meditation-circle:nth-child(3) {
        width: 200px;
        height: 200px;
    }
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #c73e54;
}

/* ==================== NPC系统样式 ==================== */

.npc-system {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 25px;
    height: 600px;
}

.npc-list-panel {
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    padding: 20px;
    overflow-y: auto;
}

.npc-list-panel h3 {
    color: #f7b731;
    margin-bottom: 10px;
    font-size: 1.3em;
}

.npc-intro {
    color: #aaa;
    font-size: 0.9em;
    margin-bottom: 20px;
    line-height: 1.5;
}

.npc-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* NPC 列表项 */
.npc-item {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 12px 15px;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 12px;
}

.npc-item:hover {
    background: rgba(255,255,255,0.1);
    border-color: #4ecdc4;
    transform: translateX(5px);
}

.npc-item.selected {
    background: rgba(247, 183, 49, 0.12);
    border-color: #f7b731;
    transform: translateX(5px);
}

.npc-item .npc-avatar {
    font-size: 2em;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    overflow: hidden;
}

.npc-item .npc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
}

.npc-item .npc-info {
    flex: 1;
}

.npc-item .npc-name {
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 3px;
}

.npc-item .npc-title {
    color: #aaa;
    font-size: 0.85em;
}

.npc-item .npc-arrow {
    color: #4ecdc4;
    font-size: 1.5em;
}

.npc-item.selected .npc-arrow {
    color: #f7b731;
}

/* NPC 详情内容 */
.npc-detail-content {
    color: #fff;
}

.npc-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    position: relative;
}

.npc-detail-avatar {
    font-size: 3em;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e94560, #f7b731);
    border-radius: 50%;
    overflow: hidden;
}

.npc-detail-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
}

.npc-detail-info {
    flex: 1;
}

.npc-detail-info h3 {
    color: #fff;
    margin: 0 0 5px 0;
    font-size: 1.5em;
}

.npc-detail-title {
    color: #f7b731;
    font-size: 0.95em;
    margin-bottom: 5px;
}

.npc-detail-novel {
    color: #4ecdc4;
    font-size: 0.85em;
}

.npc-close-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #aaa;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    transition: all 0.3s;
}

.npc-close-btn:hover {
    background: rgba(233, 69, 96, 0.5);
    color: #fff;
}

.npc-detail-body {
    margin-bottom: 20px;
}

.npc-bio {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 20px;
}

.npc-detail-section {
    margin-bottom: 20px;
}

.npc-detail-section h4 {
    color: #f7b731;
    font-size: 0.95em;
    margin-bottom: 10px;
    border-left: 3px solid #f7b731;
    padding-left: 8px;
}

.personality-tags, .topic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.personality-tag, .topic-tag {
    background: rgba(78, 205, 196, 0.15);
    color: #4ecdc4;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8em;
}

.topic-tag {
    background: rgba(247, 183, 49, 0.15);
    color: #f7b731;
}

.npc-quest-info {
    color: #4ecdc4;
    padding: 10px;
    background: rgba(78, 205, 196, 0.1);
    border-radius: 8px;
    text-align: center;
}

.npc-detail-actions {
    display: flex;
    gap: 10px;
}

.npc-detail-actions .btn {
    flex: 1;
    padding: 12px 20px;
}

.npc-action-row {
    flex-wrap: wrap;
}

.npc-action-btn {
    min-width: 140px;
}

.npc-detail-actions .npc-action-btn-danger {
    background: linear-gradient(135deg, rgba(164, 40, 40, 0.88), rgba(92, 25, 25, 0.9));
    color: #fff;
    border: 1px solid rgba(255, 105, 105, 0.45);
}

.npc-detail-actions .npc-action-btn-danger:hover {
    background: linear-gradient(135deg, rgba(205, 54, 54, 0.94), rgba(117, 28, 28, 0.96));
    box-shadow: 0 6px 18px rgba(205, 54, 54, 0.28);
}

.npc-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.npc-meta-item {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 12px;
}

.npc-meta-label {
    color: #888;
    font-size: 0.78em;
    margin-bottom: 4px;
}

.npc-meta-value {
    color: #fff;
    font-size: 0.95em;
}

.npc-memory-list,
.npc-gift-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.npc-memory-item,
.npc-gift-item,
.npc-empty-note {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 14px;
    color: #d7d7d7;
    line-height: 1.5;
}

.npc-empty-note {
    color: #999;
}

.npc-memory-time {
    display: inline-block;
    color: #f7b731;
    font-size: 0.78em;
    margin-bottom: 6px;
}

.npc-error {
    text-align: center;
    padding: 30px 20px;
    color: #e94560;
}

.npc-error p {
    margin-bottom: 15px;
    font-size: 1.1em;
}

.npc-card {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 12px;
}

.npc-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: #4ecdc4;
    transform: translateX(5px);
}

.npc-card.selected {
    border-color: #f7b731;
    background: rgba(247, 183, 49, 0.1);
}

.npc-card .npc-avatar {
    font-size: 2.5em;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    overflow: hidden;
}

.npc-card .npc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.npc-card .npc-info {
    flex: 1;
}

.npc-card .npc-info h4 {
    color: #fff;
    margin-bottom: 3px;
    font-size: 1em;
}

.npc-card .npc-title {
    color: #4ecdc4;
    font-size: 0.85em;
    margin-bottom: 2px;
}

.npc-card .npc-novel {
    color: #aaa;
    font-size: 0.8em;
    margin-bottom: 5px;
}

.npc-card .npc-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.trait-tag {
    background: rgba(78, 205, 196, 0.2);
    color: #4ecdc4;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75em;
}

.trait-tag.large {
    padding: 5px 12px;
    font-size: 0.9em;
}

.quest-badge {
    background: linear-gradient(135deg, #e94560, #ff6b6b);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    margin-top: 8px;
    display: inline-block;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.4);
}

/* NPC详情面板 */
.npc-detail-panel {
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    padding: 25px;
    overflow-y: auto;
}

.npc-placeholder {
    text-align: center;
    padding: 100px 20px;
    color: #aaa;
}

.npc-placeholder .icon {
    font-size: 5em;
    margin-bottom: 20px;
    display: block;
}

.npc-placeholder p {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.npc-placeholder .hint {
    font-size: 0.9em;
    color: #666;
}

/* NPC详情内容 */
.npc-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.npc-avatar-large {
    font-size: 5em;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e94560, #f7b731);
    border-radius: 50%;
    overflow: hidden;
}

.npc-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.npc-header-info h2 {
    color: #fff;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.npc-title-tag {
    background: #f7b731;
    color: #1a1a2e;
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 0.6em;
}

.npc-location {
    color: #4ecdc4;
    margin-bottom: 5px;
}

.npc-novel-tag {
    color: #aaa;
    font-size: 0.9em;
}

.npc-background, .npc-personality, .npc-relationships, .npc-knowledge, .npc-quests {
    margin-bottom: 25px;
}

.npc-background h3, .npc-personality h3, .npc-relationships h3, .npc-knowledge h3, .npc-quests h3 {
    color: #f7b731;
    margin-bottom: 12px;
    font-size: 1.1em;
    border-left: 3px solid #f7b731;
    padding-left: 10px;
}

.npc-background p {
    color: #ccc;
    line-height: 1.8;
}

.traits-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.personality-detail p {
    color: #aaa;
    margin: 8px 0;
    line-height: 1.6;
}

.npc-relationships ul {
    list-style: none;
    padding: 0;
}

.npc-relationships li {
    color: #ccc;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.npc-relationships li:last-child {
    border-bottom: none;
}

.knowledge-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skill-tag {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.9em;
}

.npc-quests ul {
    list-style: none;
    padding: 0;
}

.npc-quests li {
    color: #ccc;
    padding: 8px 0;
}

.quest-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quest-item {
    background: rgba(247, 183, 49, 0.1);
    border: 1px solid rgba(247, 183, 49, 0.3);
    border-radius: 8px;
    padding: 10px 15px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

.quest-item:hover {
    background: rgba(247, 183, 49, 0.2);
    transform: translateX(5px);
    cursor: pointer;
}

.quest-detail-popup {
    padding: 20px;
}

.quest-detail-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(247, 183, 49, 0.3);
}

.quest-detail-header h3 {
    color: #f7b731;
    margin: 0;
    font-size: 1.5em;
}

.quest-detail-body {
    margin-bottom: 20px;
}

.quest-description {
    color: #e0e0e0;
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.quest-rewards {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 8px;
    padding: 15px;
}

.quest-rewards h4 {
    color: #4caf50;
    margin: 10px 0;
}

.quest-rewards ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quest-rewards li {
    padding: 5px 0;
    color: #a5d6a7;
}

.quest-detail-footer {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.quest-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.quest-name {
    color: #f7b731;
    font-weight: bold;
}

.quest-reward {
    color: #888;
    font-size: 0.85em;
}

.quest-icon {
    font-size: 1.2em;
}

.btn-chat {
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    margin-top: 20px;
}

/* 对话弹窗 */
.chat-modal .modal-content {
    width: 98%;
    max-width: 1600px;
    height: 92vh;
    display: flex;
    /* 移除 flex-direction: column，让内容横向排列 */
}

/* 对话框主体布局 - 左侧人物照 + 右侧对话区 */
.chat-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* 左侧人物全景照区域 */
.chat-character-panel {
    width: 450px;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-right: 1px solid rgba(78, 205, 196, 0.2);
    position: relative;
}

.chat-character-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(78, 205, 196, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.chat-character-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.chat-character-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.chat-character-name {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* 右侧对话区域 */
.chat-dialogue-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* 右侧玩家头像区域 */
.chat-player-panel {
    width: 450px;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-left: 1px solid rgba(78, 205, 196, 0.2);
    position: relative;
}

.chat-player-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(52, 152, 219, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.chat-player-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.chat-player-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.chat-player-name {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* 右上角小关闭按钮 */
.chat-header-close {
    display: flex;
    justify-content: flex-end;
    padding: 15px 20px 0;
}

.close-btn-small {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.close-btn-small:hover {
    background: rgba(233, 69, 96, 0.8);
    color: #fff;
    border-color: rgba(233, 69, 96, 1);
    transform: rotate(90deg);
}

.chat-npc-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-avatar {
    font-size: 2em;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(78, 205, 196, 0.5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-name {
    font-size: 1.2em;
    font-weight: bold;
    color: #fff;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message {
    display: flex;
    gap: 10px;
    max-width: 85%;
}

.message.player {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message.npc {
    align-self: flex-start;
}

.message-avatar {
    font-size: 1.8em;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid rgba(78, 205, 196, 0.3);
}

.message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message-content {
    display: flex;
    flex-direction: column;
}

.message-bubble {
    padding: 10px 16px;
    border-radius: 15px;
    line-height: 1.5;
    word-wrap: break-word;
    font-size: 0.95em;
}

.message.player .message-bubble {
    background: #4ecdc4;
    color: #1a1a2e;
    border-bottom-right-radius: 5px;
}

.message.npc .message-bubble {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-bottom-left-radius: 5px;
}

.message-name {
    font-size: 0.8em;
    color: #aaa;
    margin-top: 5px;
}

.message.player .message-name {
    text-align: right;
}

/* 输入中动画 */
.typing-indicator {
    display: flex;
    gap: 5px;
    padding: 15px;
    align-self: flex-start;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    background: #4ecdc4;
    border-radius: 50%;
    animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-10px); }
}

.chat-input-area {
    padding: 20px;
    background: rgba(0,0,0,0.2);
    border-radius: 0 0 15px 15px;
}

.input-group {
    display: flex;
    gap: 10px;
}

#chat-input,
#action-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 0.95em;
    min-height: 60px;
    resize: none;
    line-height: 1.5;
}

#chat-input:focus,
#action-input:focus {
    outline: none;
    border-color: #4ecdc4;
    background: rgba(255,255,255,0.12);
}

#chat-input::placeholder,
#action-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.chat-hints {
    margin-top: 10px;
    color: #666;
}

/* ==================== 行为系统样式 ==================== */

.action-modal .modal-content {
    width: 90%;
    max-width: 800px;
    height: 85vh;
    display: flex;
    flex-direction: column;
}

.action-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(0,0,0,0.3);
    border-radius: 15px 15px 0 0;
}

.action-npc-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.action-avatar {
    font-size: 2.5em;
}

.action-name {
    font-size: 1.3em;
    font-weight: bold;
    color: #fff;
}

.action-body {
    flex: 1;
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    padding: 20px;
    overflow: hidden;
}

.action-categories {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-category {
    background: rgba(255,255,255,0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.action-category:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(78, 205, 196, 0.5);
}

.action-category.active {
    background: rgba(78, 205, 196, 0.15);
    border-color: #4ecdc4;
}

.action-category .action-icon {
    font-size: 1.8em;
}

.action-category .action-name {
    font-size: 1em;
    color: #fff;
    font-weight: bold;
}

.action-category .action-desc {
    font-size: 0.8em;
    color: #aaa;
}

.action-options {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 20px;
    overflow-y: auto;
}

.action-options h4 {
    color: #f7b731;
    margin-bottom: 20px;
    font-size: 1.2em;
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.option-card {
    background: rgba(255,255,255,0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.option-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: #f7b731;
    transform: translateY(-3px);
}

.option-card .option-icon {
    font-size: 2.5em;
}

.option-card .option-name {
    font-size: 1em;
    color: #fff;
    font-weight: bold;
}

.option-card .option-desc {
    font-size: 0.8em;
    color: #aaa;
}

.action-result {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 26, 46, 0.98);
    border-radius: 15px;
    padding: 30px;
    overflow-y: auto;
    z-index: 10;
}

.action-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 20px;
}

.action-loading p {
    color: #4ecdc4;
    font-size: 1.1em;
}

.action-response {
    max-width: 600px;
    margin: 0 auto;
}

.response-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.npc-avatar-small {
    font-size: 2.5em;
}

.response-header .npc-name {
    font-size: 1.2em;
    color: #fff;
    font-weight: bold;
}

.action-tag {
    background: #f7b731;
    color: #1a1a2e;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.8em;
    margin-left: auto;
}

.response-content {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    line-height: 1.8;
    color: #ccc;
}

.favor-change {
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-weight: bold;
}

.favor-change.positive {
    background: rgba(78, 205, 196, 0.2);
    color: #4ecdc4;
}

.favor-change.negative {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
}

.action-rewards {
    background: rgba(247, 183, 49, 0.1);
    border: 1px solid rgba(247, 183, 49, 0.3);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
}

.action-rewards h5 {
    color: #f7b731;
    margin-bottom: 10px;
}

.action-rewards ul {
    list-style: none;
    padding: 0;
}

.action-rewards li {
    color: #ccc;
    padding: 5px 0;
}

.action-error {
    text-align: center;
    padding: 50px;
    color: #e94560;
}

.btn-secondary {
    background: rgba(255,255,255,0.1);
    color: #fff;
    margin-top: 10px;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.2);
}

/* NPC系统响应式 */
@media (max-width: 900px) {
    .npc-system {
        grid-template-columns: 1fr;
        height: auto;
    }
    
    .npc-list-panel {
        max-height: 300px;
    }
    
    .chat-modal .modal-content {
        width: 95%;
        height: 90vh;
    }
    
    .action-modal .modal-content {
        width: 95%;
        height: 90vh;
    }
    
    .action-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    
    .action-categories {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
    }
    
    .action-category {
        min-width: 120px;
    }
}

/* ==================== 双输入框样式 ==================== */

/* 合并输入框样式 */
.input-section-combined {
    padding: 8px 15px;
}

.input-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    height: 100%;
}

.input-group-left {
    flex: 6;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 10px 15px;
    min-height: 80px;
}

.input-group-right {
    flex: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 10px 15px;
    min-height: 80px;
}

.input-icon {
    font-size: 1.2em;
}

.input-group input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.95em;
    outline: none;
}

.input-group input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.btn-send {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
    align-self: center;
    white-space: nowrap;
}

.btn-send:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);
}

.input-section {
    margin-bottom: 12px;
}

.input-label {
    display: block;
    color: #aaa;
    font-size: 0.85em;
    margin-bottom: 5px;
    padding-left: 5px;
}

.btn-action {
    background: linear-gradient(135deg, #f7b731, #e59f1d);
    color: #1a1a2e;
    font-weight: bold;
}

.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(247, 183, 49, 0.4);
}

.chat-toolbar {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 8px;
}

.toolbar-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 6px 12px;
    color: #888;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.3s;
}

.toolbar-btn:hover {
    background: rgba(233, 69, 96, 0.2);
    border-color: #e94560;
    color: #e94560;
}

/* 行为消息特殊样式 */
.action-message .action-bubble {
    background: rgba(247, 183, 49, 0.15) !important;
    border: 1px solid rgba(247, 183, 49, 0.3) !important;
    color: #f7b731 !important;
}

.action-icon {
    margin-right: 5px;
}

/* 快捷技能栏 */
.quick-skills {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: nowrap;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.quick-skill-slot {
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #444;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.quick-skill-slot.has-skill-art {
    background: rgba(12, 18, 30, 0.16);
}

.quick-skill-slot.has-skill-art::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--skill-slot-bg);
    background-size: 138% auto;
    background-position: center 35%;
    background-repeat: no-repeat;
    opacity: 0.96;
    filter: saturate(1.16) contrast(1.08) brightness(1.14);
    z-index: 0;
    pointer-events: none;
}

.quick-skill-slot:hover {
    border-color: #f7b731;
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.1);
}

.quick-skill-slot:active {
    transform: translateY(1px);
}

.quick-skill-slot.empty {
    border-style: dashed;
    opacity: 0.5;
}

.quick-skill-slot.has-skill-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 12, 22, 0.03) 0%, rgba(7, 12, 22, 0.18) 42%, rgba(7, 12, 22, 0.5) 100%);
    pointer-events: none;
    z-index: 1;
}

.quick-skill-slot .key-hint {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.7em;
    color: #aaa;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    z-index: 2;
}

.quick-skill-slot .skill-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 12px 3px 4px;
    gap: 3px;
    position: relative;
    z-index: 2;
}

.quick-skill-art {
    display: none;
}

.quick-skill-slot.has-skill-art .quick-skill-art {
    display: block;
    width: calc(100% - 6px);
    height: 24px;
    border-radius: 6px;
    background-image: var(--skill-slot-bg);
    background-size: 126% auto;
    background-position: center 38%;
    background-repeat: no-repeat;
    filter: saturate(1.2) contrast(1.12) brightness(1.16);
    opacity: 0.98;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.2);
}

.quick-skill-label {
    display: block;
    width: calc(100% - 2px);
    text-align: center;
    word-break: break-all;
    font-size: 9px;
    line-height: 1.06;
    font-weight: 700;
    color: #ffffff;
    padding: 2px 3px;
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(8, 12, 20, 0.5), rgba(8, 12, 20, 0.72));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92), 0 0 6px rgba(0, 0, 0, 0.6);
}

.skill-icon {
    width: 34px;
    height: 34px;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.8));
    opacity: 0.95;
}

.skill-icon.fallback {
    width: auto;
    height: auto;
    font-size: 0.85em;
    color: #fff;
    text-shadow: 1px 1px 2px black;
}

#quick-skill-list {
    max-height: 360px;
    overflow-y: auto;
    text-align: left;
    margin: 10px 0 15px 0;
}

.quick-skill-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    transition: all 0.2s;
}

.quick-skill-option:hover {
    border-color: rgba(247, 183, 49, 0.8);
    background: rgba(255,255,255,0.08);
}

.quick-skill-option.active {
    border-color: rgba(78, 205, 196, 0.9);
    background: rgba(78, 205, 196, 0.12);
}

.quick-skill-option .name {
    color: #fff;
    font-weight: bold;
    font-size: 1.05em;
}

.quick-skill-option .left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.quick-skill-option .left .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-skill-option .icon {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.8));
}

.quick-skill-option .meta {
    color: #aaa;
    font-size: 0.9em;
    white-space: nowrap;
}

/* ==================== 生活技能系统样式 ==================== */

/* 生活技能容器 */
.life-skills-container {
    padding: 20px;
}

/* 顶部状态栏 */
.life-skills-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    margin-bottom: 20px;
}

.energy-display {
    display: flex;
    align-items: center;
    gap: 10px;
}

.energy-icon {
    font-size: 1.5em;
}

.energy-label {
    font-weight: bold;
    color: #f7b731;
}

.energy-bar {
    width: 200px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(247, 183, 49, 0.3);
}

.energy-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f7b731, #ff9f00);
    transition: width 0.3s ease;
}

.energy-text {
    color: #f7b731;
    font-weight: bold;
}

.bag-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #4ecdc4, #26a69a);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bag-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(78, 205, 196, 0.4);
}

.bag-icon {
    font-size: 1.3em;
}

.bag-text {
    font-weight: bold;
}

.bag-count {
    background: #e94560;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.9em;
    font-weight: bold;
}

.life-business-bridge {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 20px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(243, 180, 90, 0.28);
    background: rgba(12, 18, 24, 0.86);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.life-business-bridge-art {
    position: relative;
    min-height: 128px;
    overflow: hidden;
    border-radius: 8px;
    background: #101820;
}

.life-business-bridge-art img {
    width: 100%;
    height: 100%;
    min-height: 128px;
    display: block;
    object-fit: cover;
}

.life-business-bridge-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(7, 10, 12, 0.68), rgba(7, 10, 12, 0.08));
}

.life-business-bridge-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.life-business-bridge-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.life-business-bridge-title span {
    color: #f5f7fb;
    font-size: 1.25em;
    font-weight: 800;
}

.life-business-bridge-title strong {
    padding: 3px 8px;
    border-radius: 999px;
    color: #ffd28c;
    background: rgba(243, 180, 90, 0.14);
    border: 1px solid rgba(243, 180, 90, 0.32);
    font-size: 0.78em;
}

.life-business-bridge-copy {
    color: #b9c6d3;
    font-size: 0.9em;
    line-height: 1.5;
}

.life-business-bridge-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
    gap: 8px;
}

.life-business-bridge-stats span {
    min-width: 0;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #dbe5ee;
    font-size: 0.78em;
    overflow-wrap: anywhere;
}

.life-business-bridge-action {
    align-self: center;
    min-width: 118px;
}

@media (max-width: 760px) {
    .life-business-bridge {
        grid-template-columns: 1fr;
    }

    .life-business-bridge-art,
    .life-business-bridge-art img {
        min-height: 150px;
    }

    .life-business-bridge-action {
        width: 100%;
    }
}

/* 生活技能分类 */
.life-skills-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.life-category-btn {
    flex: 1 1 160px;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.life-category-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.life-category-btn.active {
    background: rgba(233, 69, 96, 0.2);
    border-color: #e94560;
}

.category-icon {
    font-size: 2em;
}

.category-name {
    font-weight: bold;
    color: #fff;
}

/* 生活技能内容 */
.life-skills-content {
    display: none;
}

.life-skills-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* 采集技能网格 */
.gathering-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

.gathering-skill-card {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gathering-skill-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #4ecdc4;
    transform: translateY(-3px);
}

.gathering-skill-card.no-energy {
    opacity: 0.5;
    cursor: not-allowed;
}

.gathering-skill-card.unavailable,
.gathering-skill-card[aria-disabled="true"] {
    opacity: 0.58;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    filter: grayscale(0.35);
}

.gathering-skill-card.unavailable:hover,
.gathering-skill-card[aria-disabled="true"]:hover {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    transform: none;
}

.gathering-skill-card.unavailable .skill-exp-fill,
.gathering-skill-card[aria-disabled="true"] .skill-exp-fill {
    width: 0 !important;
}

.skill-icon-large {
    font-size: 3em;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.life-skill-icon-frame {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.life-skill-icon-frame--small {
    width: 42px;
    height: 42px;
}

.life-skill-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.45));
}

.life-skill-icon-img--large {
    width: 100%;
    height: 100%;
}

.life-skill-icon-img--small {
    width: 100%;
    height: 100%;
}

.life-skill-icon-emoji {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35em;
    line-height: 1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85);
}

.gathering-skill-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.skill-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skill-name {
    font-weight: bold;
    font-size: 1.1em;
}

.skill-level {
    background: linear-gradient(135deg, #4ecdc4, #26a69a);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: bold;
}

.skill-exp-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    overflow: hidden;
}

.skill-exp-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ecdc4, #26a69a);
    transition: width 0.3s ease;
}

.skill-rarity-range {
    font-size: 1.1em;
    margin: 3px 0;
    letter-spacing: 2px;
}

.skill-drop-chance {
    font-size: 0.75em;
    color: #888;
    margin: 2px 0;
    letter-spacing: 1px;
}

.skill-desc {
    font-size: 0.85em;
    color: #aaa;
}

.skill-cost {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
}

.energy-cost {
    color: #f7b731;
}

.locations {
    color: #888;
}

/* 加工技能列表 */
.crafting-skills-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crafting-skill-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.crafting-skill-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.crafting-skill-header:hover {
    background: rgba(255, 255, 255, 0.1);
}

.crafting-skill-header .skill-icon {
    font-size: 1.8em;
}

.crafting-skill-header .life-skill-icon-frame {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
}

.crafting-skill-header .skill-name {
    flex: 1;
    font-weight: bold;
    font-size: 1.1em;
}

.crafting-skill-header .skill-level {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: bold;
}

.crafting-skill-header .skill-exp-bar {
    width: 80px;
    margin-right: 10px;
}

.crafting-skill-header .arrow {
    font-size: 1.5em;
    color: #888;
    transition: transform 0.3s ease;
}

.crafting-skill-header:hover .arrow {
    transform: translateX(5px);
}

/* 经营之道 */
.business-way-shell {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 18px;
    background-color: #0b1118;
}

.business-way-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.16;
    background: linear-gradient(180deg, rgba(11, 17, 24, 0.82), rgba(11, 17, 24, 0.74));
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    mix-blend-mode: normal;
}

body.business-heavy-art-ready .business-way-shell::before {
    background:
        linear-gradient(180deg, rgba(11, 17, 24, 0.82), rgba(11, 17, 24, 0.74)),
        url('images/business/ui/business-ui-texture-v1.png');
    background-size: auto, 720px 720px;
    background-position: center, center;
    background-repeat: repeat, repeat;
}

.business-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.business-overview {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
    padding: 12px;
    overflow-x: visible;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    scrollbar-width: thin;
}

.business-overview > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 58px;
    padding: 8px 9px;
    border-radius: 7px;
    background: rgba(8, 13, 18, 0.46);
    color: #cfd6df;
    font-size: 0.9em;
    text-align: center;
}

.business-overview span {
    max-width: 100%;
    color: #93a4b7;
    font-size: 0.82em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.business-overview strong {
    color: #f3b45a;
    white-space: nowrap;
}

.business-guidance-band {
    display: grid;
    grid-template-columns: minmax(220px, 0.92fr) minmax(0, 1.48fr);
    gap: 12px;
    align-items: stretch;
}

.business-guidance-lead {
    position: relative;
    min-height: 210px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.business-guidance-lead img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.business-guidance-lead-copy {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #f5f7fb;
}

.business-guidance-lead-copy span {
    color: #f3b45a;
    font-size: 0.82em;
}

.business-guidance-lead-copy strong {
    font-size: 1.06em;
    line-height: 1.35;
}

.business-guidance-lead-copy em {
    font-style: normal;
    color: #d5dee8;
    font-size: 0.84em;
    line-height: 1.45;
}

.business-guidance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.business-guidance-card {
    min-width: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    min-height: 128px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.business-guidance-card.is-actionable {
    border-color: rgba(243, 180, 90, 0.32);
}

.business-guidance-art {
    position: relative;
    min-height: 100%;
}

.business-guidance-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.business-guidance-art span {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(13, 18, 26, 0.82);
    color: #f3b45a;
    font-size: 0.72em;
}

.business-guidance-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 11px;
}

.business-guidance-topline {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
}

.business-guidance-topline strong {
    min-width: 0;
    color: #f5f7fb;
    font-size: 0.95em;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.business-guidance-topline em {
    justify-self: start;
    max-width: 100%;
    font-style: normal;
    color: #93a4b7;
    font-size: 0.78em;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}

.business-guidance-body p {
    margin: 0;
    color: #c6d0da;
    font-size: 0.82em;
    line-height: 1.5;
}

.business-map-relation {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    align-items: start;
    padding: 7px 8px;
    border: 1px solid rgba(123, 194, 209, 0.18);
    border-radius: 8px;
    background: rgba(8, 13, 18, 0.42);
}

.business-map-relation span {
    max-width: 7em;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(123, 194, 209, 0.28);
    color: #cfe8f1;
    background: rgba(123, 194, 209, 0.12);
    font-size: 0.72em;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.business-map-relation strong {
    min-width: 0;
    color: #b9c6d3;
    font-size: 0.76em;
    line-height: 1.35;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.business-map-relation--asset span,
.business-map-relation--land span {
    border-color: rgba(243, 180, 90, 0.34);
    color: #ffe0a6;
    background: rgba(243, 180, 90, 0.13);
}

.business-map-relation--district span,
.business-map-relation--transport span {
    border-color: rgba(155, 225, 93, 0.28);
    color: #dff6c8;
    background: rgba(155, 225, 93, 0.11);
}

.business-map-relation--city span,
.business-map-relation--decor span {
    border-color: rgba(202, 156, 255, 0.26);
    color: #e5d2ff;
    background: rgba(202, 156, 255, 0.1);
}

.business-map-relation--task span,
.business-map-relation--trade span,
.business-map-relation--supply span {
    border-color: rgba(78, 205, 196, 0.28);
    color: #b7f1ec;
    background: rgba(78, 205, 196, 0.1);
}

.business-guidance-action {
    align-self: flex-start;
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.82em;
}

.business-guidance-note {
    color: #93a4b7;
    font-size: 0.8em;
}

.business-onboarding-band {
    display: grid;
    grid-template-columns: minmax(220px, 0.68fr) minmax(0, 1.32fr);
    gap: 12px;
    align-items: stretch;
}

.business-onboarding-lead,
.business-onboarding-step,
.business-balance-row,
.business-city-impact-card {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(12, 18, 24, 0.78);
}

.business-onboarding-lead {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}

.business-onboarding-lead.ready,
.business-onboarding-step.ready,
.business-balance-row.ready {
    border-color: rgba(155, 225, 93, 0.34);
    background: rgba(24, 39, 28, 0.72);
}

.business-onboarding-lead.done,
.business-onboarding-step.done,
.business-balance-row.done {
    border-color: rgba(123, 194, 209, 0.24);
}

.business-onboarding-lead span,
.business-onboarding-step span,
.business-balance-row span,
.business-city-impact-card span {
    color: #f3b45a;
    font-size: 0.76em;
    font-weight: 700;
}

.business-onboarding-lead strong {
    color: #f5f7fb;
    font-size: 1.12em;
    line-height: 1.35;
}

.business-onboarding-lead em {
    color: #c6d0da;
    font-size: 0.86em;
    font-style: normal;
    line-height: 1.5;
}

.business-onboarding-steps,
.business-balance-grid,
.business-city-impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.business-onboarding-step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 11px;
}

.business-onboarding-step strong,
.business-balance-row strong,
.business-city-impact-card strong {
    color: #f5f7fb;
    font-size: 0.9em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.business-onboarding-step em,
.business-balance-row em,
.business-city-impact-card em {
    color: #93a4b7;
    font-size: 0.76em;
    line-height: 1.35;
    font-style: normal;
}

.business-onboarding-step p {
    margin: 0;
    color: #c6d0da;
    font-size: 0.78em;
    line-height: 1.45;
}

.business-onboarding-step small {
    color: #93a4b7;
    font-size: 0.76em;
}

.business-onboarding-step .business-action-btn {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 0.78em;
}

.business-balance-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.business-balance-row,
.business-city-impact-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    padding: 10px 11px;
}

.business-balance-row {
    grid-template-areas:
        "label status"
        "cost cost"
        "return return";
    align-items: start;
    gap: 6px 8px;
}

.business-balance-row span,
.business-city-impact-card span {
    grid-column: 1 / -1;
}

.business-balance-row span {
    grid-area: label;
    min-width: 0;
    grid-column: auto;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.business-balance-row strong {
    grid-area: cost;
    max-width: 100%;
    line-height: 1.38;
    white-space: normal;
    overflow-wrap: anywhere;
}

.business-balance-row em {
    grid-area: return;
    max-width: 100%;
    line-height: 1.42;
    white-space: normal;
    overflow-wrap: anywhere;
}

.business-balance-row b {
    grid-area: status;
    justify-self: end;
    max-width: 100%;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(155, 225, 93, 0.1);
    color: #9be15d;
    font-size: 0.76em;
    line-height: 1.35;
    font-weight: 700;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
}

.business-balance-row.blocked b {
    color: #ffbd73;
    background: rgba(255, 189, 115, 0.1);
}

.business-city-project-summary {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.business-city-band {
    display: grid;
    grid-template-columns: minmax(260px, 1.05fr) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.business-city-hero {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.business-city-hero img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    display: block;
    object-fit: cover;
}

.business-city-hero-copy {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #f5f7fb;
}

.business-city-hero-copy span {
    color: #f3b45a;
    font-size: 0.82em;
    font-weight: 700;
}

.business-city-hero-copy strong {
    font-size: 1.03em;
    line-height: 1.45;
}

.business-city-hero-copy em {
    font-style: normal;
    color: #d7e1ea;
    font-size: 0.83em;
    line-height: 1.45;
}

.business-city-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.business-city-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.business-city-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 11px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(12, 18, 24, 0.72);
    min-width: 0;
}

.business-city-stat span,
.business-city-stat em {
    color: #93a4b7;
    font-size: 0.78em;
    line-height: 1.35;
    font-style: normal;
}

.business-city-stat strong {
    color: #f5f7fb;
    font-size: 0.98em;
    line-height: 1.35;
}

.business-city-map {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.business-city-map-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.business-city-map-head strong {
    color: #f5f7fb;
    font-size: 0.94em;
}

.business-city-map-head span {
    color: #93a4b7;
    font-size: 0.8em;
    white-space: nowrap;
}

.business-city-pins {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
}

.business-city-pin {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 9px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(12, 18, 24, 0.72);
}

.business-city-pin strong {
    color: #f5f7fb;
    font-size: 0.86em;
}

.business-city-pin em {
    color: #9fb0bf;
    font-style: normal;
    font-size: 0.76em;
    line-height: 1.3;
}

.business-city-pin.occupied {
    border-color: rgba(155, 225, 93, 0.28);
}

.business-city-pin.free {
    border-color: rgba(78, 205, 196, 0.28);
}

.business-city-pin.locked {
    opacity: 0.72;
}

.business-city-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.business-city-tags span {
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(243, 180, 90, 0.28);
    background: rgba(243, 180, 90, 0.08);
    color: #ffd28c;
    font-size: 0.78em;
    white-space: nowrap;
}

.business-grid-map-band {
    display: grid;
    grid-template-columns: minmax(300px, 1.35fr) minmax(220px, 0.85fr);
    gap: 12px;
    align-items: start;
}

.business-grid-map-board {
    position: relative;
    aspect-ratio: 9 / 6;
    min-height: 270px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(123, 194, 209, 0.24);
    background: rgba(8, 15, 20, 0.92);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.business-grid-map-board::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(180deg, rgba(6, 11, 15, 0.18), rgba(6, 11, 15, 0.5)),
        url("images/business/city/business-grid-map-v1.png");
    background-size: cover;
    background-position: center;
    opacity: 0.9;
}

.business-grid-map-board::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 6px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: calc(100% / var(--cols)) calc(100% / var(--rows));
    pointer-events: none;
    opacity: 0.55;
}

.business-grid-cells {
    position: relative;
    z-index: 1;
    min-height: 270px;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows), minmax(42px, 1fr));
    gap: 6px;
    padding: 12px;
}

.business-grid-cell {
    grid-column: var(--x) / span var(--w);
    grid-row: var(--y) / span var(--h);
    position: relative;
    min-width: 0;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 6px 7px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(10, 16, 21, 0.72);
    color: #f5f7fb;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.business-grid-tile-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    opacity: 0.5;
    filter: saturate(0.95) contrast(0.96);
}

.business-grid-decoration-art {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 1;
    width: min(38%, 34px);
    aspect-ratio: 1;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
    opacity: 0.95;
}

.business-grid-building-art {
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 1;
    width: min(48%, 42px);
    aspect-ratio: 1;
    border-radius: 5px;
    object-fit: cover;
    pointer-events: none;
    opacity: 0.42;
    filter: saturate(0.95) contrast(1.05);
}

.business-grid-building-art.business-grid-building-sprite {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 3px;
    width: min(72%, 58px);
    max-height: 78%;
    border-radius: 0;
    object-fit: contain;
    opacity: 0.82;
    transform: translateX(-50%);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.46)) saturate(0.96) contrast(1.04);
    mix-blend-mode: multiply;
}

.business-grid-cell:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(255, 210, 140, 0.58);
    background: rgba(22, 28, 33, 0.86);
}

.business-grid-cell span {
    position: relative;
    z-index: 2;
    color: #ffd28c;
    font-size: 0.66em;
    line-height: 1.15;
}

.business-grid-cell strong {
    position: relative;
    z-index: 2;
    min-width: 0;
    color: #f5f7fb;
    font-size: 0.78em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.business-grid-cell em {
    position: relative;
    z-index: 2;
    min-width: 0;
    color: #c6d0da;
    font-size: 0.66em;
    line-height: 1.15;
    font-style: normal;
    overflow-wrap: anywhere;
}

.business-grid-cell.district {
    background: rgba(74, 47, 23, 0.78);
    border-color: rgba(243, 180, 90, 0.38);
}

.business-grid-cell.plot.occupied {
    background: rgba(37, 72, 53, 0.78);
    border-color: rgba(155, 225, 93, 0.42);
}

.business-grid-cell.plot.free {
    background: rgba(25, 69, 76, 0.78);
    border-color: rgba(78, 205, 196, 0.42);
}

.business-grid-cell.locked {
    opacity: 0.66;
    background: rgba(17, 21, 27, 0.72);
    border-style: dashed;
}

.business-grid-cell.water,
.business-grid-cell.road {
    cursor: default;
    border-color: rgba(155, 186, 203, 0.2);
    background: rgba(8, 22, 34, 0.42);
    color: #c6d0da;
}

.business-grid-cell.road {
    background: rgba(65, 55, 39, 0.42);
}

.business-grid-cell.selected {
    border-color: rgba(255, 226, 151, 0.9);
    box-shadow: 0 0 0 2px rgba(255, 226, 151, 0.16), 0 10px 24px rgba(0, 0, 0, 0.24);
}

.business-map-ownership-chip {
    position: absolute;
    left: 50%;
    bottom: 4px;
    z-index: 4;
    max-width: calc(100% - 10px);
    padding: 3px 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #f5f7fb;
    background: rgba(3, 7, 11, 0.68);
    font-size: 0.62em;
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    transform: translateX(-50%);
}

.business-map-ownership-chip--owned {
    color: #e7ffd2;
    border-color: rgba(155, 225, 93, 0.42);
    background: rgba(39, 93, 54, 0.76);
}

.business-map-ownership-chip--acquire {
    color: #fff2c8;
    border-color: rgba(243, 180, 90, 0.48);
    background: rgba(127, 82, 27, 0.78);
}

.business-map-ownership-chip--public {
    color: #dffcff;
    border-color: rgba(78, 205, 196, 0.34);
    background: rgba(26, 78, 86, 0.72);
}

.business-map-ownership-chip--free {
    color: #dffcff;
    border-color: rgba(78, 205, 196, 0.34);
    background: rgba(20, 82, 88, 0.72);
}

.business-map-ownership-chip--locked,
.business-map-ownership-chip--warn {
    color: #ffe1ad;
    border-color: rgba(243, 180, 90, 0.42);
    background: rgba(112, 72, 22, 0.72);
}

.business-grid-detail {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(12, 18, 24, 0.78);
}

.business-grid-detail-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.business-grid-detail-head span {
    color: #f3b45a;
    font-size: 0.76em;
    font-weight: 700;
}

.business-grid-detail-head strong {
    color: #f5f7fb;
    font-size: 1em;
    line-height: 1.25;
}

.business-grid-detail-head em,
.business-grid-detail-empty {
    color: #c6d0da;
    font-size: 0.82em;
    line-height: 1.45;
    font-style: normal;
}

.business-grid-detail-rows {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.business-grid-detail-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 7px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.business-grid-detail-row span {
    color: #93a4b7;
    font-size: 0.78em;
}

.business-grid-detail-row strong {
    color: #f5f7fb;
    font-size: 0.82em;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.business-grid-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.business-grid-bonus,
.business-grid-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.business-grid-bonus span,
.business-grid-legend span {
    padding: 5px 7px;
    border-radius: 999px;
    border: 1px solid rgba(123, 194, 209, 0.2);
    background: rgba(123, 194, 209, 0.08);
    color: #cfe8f1;
    font-size: 0.74em;
    line-height: 1.2;
}

.business-city-project-band,
.business-decoration-band,
.business-transport-band,
.business-meta-progression {
    display: grid;
    gap: 12px;
    align-items: start;
}

.business-city-project-band,
.business-decoration-band,
.business-transport-band {
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
}

.business-meta-progression {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.business-industrial-band {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.business-industrial-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(123, 194, 209, 0.16);
    background: rgba(8, 13, 18, 0.52);
}

.business-industrial-art,
.business-ops-art {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(12, 18, 24, 0.9);
}

.business-industrial-art img,
.business-ops-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.business-liveops-backend-panel {
    grid-column: 1 / -1;
}

.business-city-card-panel {
    grid-column: 1 / -1;
}

.business-industrial-head {
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.business-industrial-head strong {
    color: #f5f7fb;
    font-size: 0.95em;
    line-height: 1.3;
}

.business-industrial-head span {
    color: #9fb1c3;
    font-size: 0.76em;
    line-height: 1.25;
    text-align: right;
    overflow-wrap: anywhere;
}

.business-city-card-body {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.1fr) auto;
    gap: 12px;
    align-items: stretch;
}

.business-city-namecard {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(243, 180, 90, 0.2);
    background: rgba(44, 32, 19, 0.58);
}

.business-city-namecard span {
    color: #f3b45a;
    font-size: 0.76em;
    font-weight: 700;
}

.business-city-namecard strong {
    color: #f5f7fb;
    font-size: 1.05em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.business-city-namecard em,
.business-city-namecard p {
    margin: 0;
    color: #c6d0da;
    font-size: 0.8em;
    line-height: 1.35;
    font-style: normal;
}

.business-city-card-layout-preview {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 4px;
}

.business-city-card-layout-preview img,
.business-city-card-layout-preview span {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 14, 18, 0.72);
}

.business-city-card-layout-preview img {
    object-fit: contain;
    padding: 2px;
}

.business-city-card-layout-preview span {
    display: grid;
    place-items: center;
    color: #d7e1ea;
    font-size: 0.56em;
    font-weight: 800;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.business-city-card-layout-preview.empty {
    color: #9fb1c3;
    font-size: 0.76em;
}

.business-city-card-stats {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
    gap: 8px;
}

.business-city-card-stats > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 10px;
    border-radius: 7px;
    background: rgba(12, 18, 24, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.business-city-card-stats span {
    color: #93a4b7;
    font-size: 0.76em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.business-city-card-stats strong {
    color: #f8d28a;
    font-size: 1.06em;
}

.business-city-card-actions {
    min-width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.business-filter-bar {
    grid-column: 1 / -1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.business-filter-chip {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 999px;
    border: 1px solid rgba(123, 194, 209, 0.2);
    background: rgba(8, 13, 18, 0.58);
    color: #cfe8f1;
    font-size: 0.78em;
    line-height: 1.2;
    cursor: pointer;
}

.business-filter-chip span {
    display: inline-grid;
    min-width: 22px;
    height: 20px;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #f8d28a;
    font-size: 0.86em;
    font-weight: 700;
}

.business-filter-chip.active {
    border-color: rgba(243, 180, 90, 0.45);
    background: rgba(50, 38, 20, 0.72);
    color: #fff3d4;
}

.business-filter-empty {
    min-width: 0;
    padding: 14px;
    border-radius: 8px;
    border: 1px dashed rgba(123, 194, 209, 0.22);
    color: #93a4b7;
    background: rgba(8, 13, 18, 0.5);
    font-size: 0.84em;
    line-height: 1.45;
}

.business-decoration-band .business-filter-bar + .business-decoration-grid,
.business-transport-band .business-filter-bar + .business-transport-grid,
.business-city-project-band .business-filter-bar + .business-project-grid {
    grid-column: 1 / -1;
}

.business-project-grid,
.business-resident-request-grid,
.business-collection-grid,
.business-operation-grid,
.business-contract-grid,
.business-decoration-grid,
.business-transport-grid,
.business-resident-role-grid,
.business-liveops-grid,
.business-leaderboard-grid,
.business-social-grid,
.business-commercial-grid,
.business-pipeline-grid,
.business-story-grid,
.business-art-manifest-grid,
.business-ops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.business-project-card,
.business-resident-request-card,
.business-collection-card,
.business-operation-card,
.business-contract-card,
.business-decoration-card,
.business-transport-card,
.business-resident-role-card,
.business-liveops-card,
.business-leaderboard-card,
.business-social-card,
.business-commercial-card,
.business-pipeline-card,
.business-story-card,
.business-art-manifest-card,
.business-ops-card,
.business-hub-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(12, 18, 24, 0.78);
}

.business-project-card.ready,
.business-resident-request-card.ready,
.business-collection-card.ready,
.business-operation-card.ready,
.business-contract-card.ready,
.business-decoration-card.ready,
.business-transport-card.ready,
.business-resident-role-card.ready,
.business-liveops-card.ready,
.business-social-card.ready,
.business-commercial-card.ready,
.business-pipeline-card.ready,
.business-story-card.ready,
.business-art-manifest-card.ready,
.business-ops-card.ready {
    border-color: rgba(155, 225, 93, 0.34);
    background: rgba(24, 39, 28, 0.72);
}

.business-project-card.built,
.business-collection-card.claimed,
.business-operation-card.claimed,
.business-contract-card.claimed,
.business-decoration-card.placed,
.business-transport-card.hubbed,
.business-resident-role-card.unlocked,
.business-liveops-card.claimed,
.business-social-card.claimed,
.business-commercial-card.claimed,
.business-story-card.claimed {
    opacity: 0.82;
    border-color: rgba(123, 194, 209, 0.22);
}

.business-commercial-card.claimed:not(.ready) {
    background: rgba(14, 20, 25, 0.72);
}

.business-commercial-card.claimed:not(.ready) .business-commercial-head em {
    color: #b9c2cc;
}

.business-story-art {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    border: 1px solid rgba(243, 180, 90, 0.16);
    background: #101820;
}

.business-story-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.business-ops-card.mock {
    border-color: rgba(243, 180, 90, 0.28);
    background: rgba(35, 28, 18, 0.62);
}

.business-leaderboard-card.self {
    border-color: rgba(243, 180, 90, 0.36);
    background: rgba(44, 32, 19, 0.66);
}

.business-leaderboard-toolbar {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.business-leaderboard-tabs,
.business-leaderboard-actions {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.business-leaderboard-actions {
    justify-content: flex-end;
}

.business-project-head,
.business-resident-request-head,
.business-collection-head,
.business-operation-head,
.business-contract-head,
.business-decoration-head,
.business-transport-head,
.business-resident-role-head,
.business-liveops-head,
.business-leaderboard-head,
.business-social-head,
.business-commercial-head,
.business-pipeline-head,
.business-story-head,
.business-art-manifest-head,
.business-ops-head,
.business-hub-head {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 8px;
    align-items: start;
}

.business-resident-role-head.has-avatar {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
}

.business-resident-role-avatar {
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid rgba(243, 180, 90, 0.34);
    background: rgba(12, 18, 24, 0.78);
}

.business-resident-role-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center bottom;
}

.business-resident-role-title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.business-project-head span,
.business-resident-request-head span,
.business-operation-head span,
.business-contract-head span,
.business-decoration-head span,
.business-transport-head span,
.business-resident-role-head span,
.business-liveops-head span,
.business-leaderboard-head span,
.business-social-head span,
.business-commercial-head span,
.business-pipeline-head span,
.business-story-head span,
.business-ops-head span,
.business-hub-head span {
    grid-column: 1 / -1;
    color: #f3b45a;
    font-size: 0.76em;
    font-weight: 700;
}

.business-project-head strong,
.business-resident-request-head strong,
.business-collection-head strong,
.business-operation-head strong,
.business-contract-head strong,
.business-decoration-head strong,
.business-transport-head strong,
.business-resident-role-head strong,
.business-liveops-head strong,
.business-leaderboard-head strong,
.business-social-head strong,
.business-commercial-head strong,
.business-pipeline-head strong,
.business-story-head strong,
.business-art-manifest-head strong,
.business-ops-head strong,
.business-hub-head strong {
    color: #f5f7fb;
    font-size: 0.95em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.business-project-head em,
.business-resident-request-head em,
.business-operation-head em,
.business-contract-head em,
.business-decoration-head em,
.business-transport-head em,
.business-resident-role-head em,
.business-liveops-head em,
.business-leaderboard-head em,
.business-social-head em,
.business-commercial-head em,
.business-pipeline-head em,
.business-story-head em,
.business-art-manifest-head em,
.business-ops-head em,
.business-hub-head em,
.business-collection-head span {
    grid-column: 1 / -1;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
    color: #93a4b7;
    font-size: 0.76em;
    line-height: 1.35;
    font-style: normal;
    white-space: normal;
    overflow-wrap: anywhere;
}

.business-project-card p,
.business-collection-card p,
.business-contract-card p,
.business-decoration-card p,
.business-transport-card p,
.business-resident-role-card p,
.business-liveops-card p,
.business-social-card p,
.business-commercial-card p,
.business-story-card p,
.business-art-manifest-card p,
.business-ops-card p {
    margin: 0;
    color: #c6d0da;
    font-size: 0.82em;
    line-height: 1.5;
}

.business-commercial-meta {
    align-self: flex-start;
    max-width: 100%;
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(243, 180, 90, 0.12);
    color: #e7c791;
    font-size: 0.72em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.business-payment-sandbox-panel {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 9px;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(123, 194, 209, 0.2);
    background: rgba(9, 22, 28, 0.56);
}

.business-payment-sandbox-panel span {
    min-width: 0;
    color: #d7e4ee;
    font-size: 0.76em;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.business-payment-sandbox-panel em {
    color: #9be15d;
    font-size: 0.72em;
    font-style: normal;
    white-space: nowrap;
}

.business-commercial-actions {
    grid-column: 1 / -1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.business-liveops-backend-toolbar {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.business-liveops-backend-switches,
.business-liveops-wallet {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.business-liveops-backend-switches span,
.business-liveops-wallet span {
    min-width: 0;
    padding: 5px 7px;
    border-radius: 999px;
    border: 1px solid rgba(123, 194, 209, 0.18);
    background: rgba(10, 16, 22, 0.62);
    color: #cfe8f1;
    font-size: 0.74em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.business-liveops-backend-switches span.on,
.business-liveops-backend-switches span.safe {
    border-color: rgba(155, 225, 93, 0.28);
    color: #dff6c8;
    background: rgba(24, 39, 28, 0.58);
}

.business-liveops-backend-switches span.off {
    border-color: rgba(243, 180, 90, 0.28);
    color: #e7c791;
    background: rgba(35, 28, 18, 0.58);
}

.business-liveops-wallet strong {
    color: #f8d28a;
}

.business-liveops-announcement-grid,
.business-liveops-backend-grid,
.business-liveops-pool-grid,
.business-liveops-exchange-grid,
.business-liveops-gray-grid,
.business-liveops-rollback-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.business-liveops-calendar-panel {
    grid-column: 1 / -1;
}

.business-liveops-calendar-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.business-liveops-month-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(104, 167, 214, 0.24);
    border-radius: 8px;
    background: rgba(17, 28, 37, 0.68);
}

.business-liveops-month-art,
.business-commercial-art {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(12, 18, 24, 0.9);
}

.business-liveops-month-art img,
.business-commercial-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.business-liveops-month-head {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
}

.business-liveops-month-head span {
    grid-column: 1 / -1;
    color: #f3b45a;
    font-size: 0.72em;
}

.business-liveops-month-head strong {
    min-width: 0;
    color: #f5f7fb;
    overflow-wrap: anywhere;
}

.business-liveops-month-head em {
    color: #93a4b7;
    font-size: 0.72em;
    font-style: normal;
    white-space: nowrap;
}

.business-liveops-month-card p {
    margin: 0;
    color: #c6d0da;
    font-size: 0.78em;
    line-height: 1.55;
}

.business-liveops-month-meta {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.business-liveops-month-meta span {
    min-width: 0;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: #dbe7ef;
    font-size: 0.72em;
    overflow-wrap: anywhere;
}

.business-liveops-announcement-card,
.business-liveops-backend-card,
.business-liveops-pool-card,
.business-liveops-exchange-card,
.business-liveops-gray-card,
.business-liveops-rollback-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(12, 18, 24, 0.72);
}

.business-liveops-backend-card.ready,
.business-liveops-pool-card.ready,
.business-liveops-exchange-card.ready,
.business-liveops-gray-card.ready,
.business-liveops-rollback-card.ready {
    border-color: rgba(155, 225, 93, 0.3);
    background: rgba(24, 39, 28, 0.64);
}

.business-liveops-backend-card.disabled,
.business-liveops-pool-card.disabled,
.business-liveops-exchange-card.disabled,
.business-liveops-gray-card.disabled {
    opacity: 0.72;
    background: rgba(14, 20, 25, 0.62);
}

.business-liveops-announcement-head,
.business-liveops-backend-head,
.business-liveops-pool-head,
.business-liveops-exchange-head,
.business-liveops-gray-head,
.business-liveops-rollback-head {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    align-items: start;
}

.business-liveops-announcement-head span,
.business-liveops-backend-head span,
.business-liveops-pool-head span,
.business-liveops-exchange-head span,
.business-liveops-gray-head span,
.business-liveops-rollback-head span {
    grid-column: 1 / -1;
    color: #f3b45a;
    font-size: 0.74em;
    font-weight: 700;
    line-height: 1.25;
}

.business-liveops-announcement-head strong,
.business-liveops-backend-head strong,
.business-liveops-pool-head strong,
.business-liveops-exchange-head strong,
.business-liveops-gray-head strong,
.business-liveops-rollback-head strong {
    min-width: 0;
    color: #f5f7fb;
    font-size: 0.9em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.business-liveops-announcement-head em,
.business-liveops-backend-head em,
.business-liveops-pool-head em,
.business-liveops-exchange-head em,
.business-liveops-gray-head em,
.business-liveops-rollback-head em {
    color: #93a4b7;
    font-size: 0.72em;
    line-height: 1.25;
    font-style: normal;
    text-align: right;
    overflow-wrap: anywhere;
}

.business-liveops-announcement-card p,
.business-liveops-pool-card p,
.business-liveops-gray-card p,
.business-liveops-rollback-card p {
    margin: 0;
    color: #c6d0da;
    font-size: 0.8em;
    line-height: 1.45;
}

.business-liveops-backend-task-list,
.business-liveops-exchange-list {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.business-liveops-backend-task,
.business-liveops-exchange-item {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(72px, auto);
    gap: 8px;
    align-items: center;
    padding: 8px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 13, 18, 0.56);
}

.business-liveops-backend-task .business-goal-bar {
    grid-column: 1 / -1;
}

.business-liveops-backend-task.ready,
.business-liveops-exchange-item.ready {
    border-color: rgba(155, 225, 93, 0.28);
    background: rgba(24, 39, 28, 0.54);
}

.business-liveops-backend-task.claimed,
.business-liveops-exchange-item.disabled {
    opacity: 0.72;
}

.business-liveops-backend-task strong,
.business-liveops-exchange-item strong {
    display: block;
    color: #f5f7fb;
    font-size: 0.84em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.business-liveops-backend-task span,
.business-liveops-exchange-item span {
    display: block;
    margin-top: 2px;
    color: #9fb1c3;
    font-size: 0.72em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.business-resident-role-art {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.16));
}

.business-resident-role-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.36));
}

.business-decoration-art {
    width: 100%;
    aspect-ratio: 1.35;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.12));
}

.business-decoration-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.34));
}

.business-decoration-art b {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    background: rgba(243, 180, 90, 0.16);
    color: #f8d28a;
    font-size: 1.1em;
}

.business-art-manifest-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: stretch;
}

.business-art-manifest-art {
    position: relative;
    min-height: 118px;
    overflow: hidden;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.28);
}

.business-art-manifest-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.business-art-manifest-art span {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 1;
    color: #f8d28a;
    font-size: 0.78em;
    font-weight: 700;
}

.business-art-manifest-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.business-art-manifest-body > span {
    color: #9fb1c3;
    font-size: 0.76em;
    line-height: 1.35;
}

.business-art-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.business-art-preview-group {
    min-width: 0;
    display: grid;
    gap: 9px;
    padding: 11px;
    border: 1px solid rgba(123, 194, 209, 0.18);
    border-radius: 8px;
    background: rgba(8, 13, 18, 0.52);
}

.business-art-preview-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.business-art-preview-head strong {
    color: #f5f7fb;
    font-size: 0.9em;
}

.business-art-preview-head span {
    color: #f3b45a;
    font-size: 0.82em;
}

.business-art-preview-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.business-art-preview-card {
    position: relative;
    flex: 0 0 82px;
    height: 68px;
    overflow: hidden;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.32);
}

.business-art-preview-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.business-art-preview-card span {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 4px;
    color: #f5f7fb;
    font-size: 0.68em;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.business-leaderboard-score {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.business-leaderboard-score span {
    color: #93a4b7;
    font-size: 0.76em;
}

.business-leaderboard-score strong {
    color: #f8d28a;
    font-size: 1em;
}

.business-project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.business-project-meta span,
.business-project-cost,
.business-contract-reward {
    min-width: 0;
    max-width: 100%;
    color: #cfe8f1;
    font-size: 0.76em;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}

.business-decoration-head strong {
    display: flex;
    align-items: center;
    gap: 7px;
}

.business-decoration-head b {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 8px;
    background: rgba(243, 180, 90, 0.16);
    color: #f8d28a;
    font-size: 0.82em;
}

.business-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.business-hub-chip {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(8, 13, 18, 0.72);
    color: #d9e4ef;
    padding: 9px;
    text-align: left;
    cursor: pointer;
}

.business-hub-chip:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.business-hub-chip.active {
    border-color: rgba(123, 194, 209, 0.4);
    background: rgba(34, 70, 82, 0.45);
}

.business-hub-chip strong,
.business-hub-chip span {
    display: block;
    overflow-wrap: anywhere;
}

.business-hub-chip strong {
    font-size: 0.86em;
}

.business-hub-chip span {
    margin-top: 4px;
    color: #93a4b7;
    font-size: 0.74em;
    line-height: 1.25;
}

.business-project-meta span {
    padding: 4px 7px;
    border-radius: 999px;
    border: 1px solid rgba(243, 180, 90, 0.2);
    background: rgba(243, 180, 90, 0.07);
}

.business-resident-request-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.business-newbie7-band {
    display: grid;
    grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
    gap: 12px;
    align-items: start;
}

.business-newbie7-lead,
.business-newbie7-card {
    min-width: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 18, 24, 0.84);
}

.business-newbie7-lead {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}

.business-newbie7-lead.ready,
.business-newbie7-card.ready {
    border-color: rgba(155, 225, 93, 0.34);
    background: rgba(24, 39, 28, 0.72);
}

.business-newbie7-lead.claimed,
.business-newbie7-card.claimed {
    opacity: 0.84;
    border-color: rgba(123, 194, 209, 0.24);
}

.business-newbie7-card.future {
    opacity: 0.64;
}

.business-newbie7-lead span,
.business-newbie7-reward {
    color: #f3b45a;
    font-size: 0.78em;
    font-weight: 700;
}

.business-newbie7-lead strong {
    color: #f5f7fb;
    font-size: 1.05em;
    line-height: 1.3;
}

.business-newbie7-lead em {
    color: #c6d0da;
    font-size: 0.84em;
    line-height: 1.5;
    font-style: normal;
}

.business-newbie7-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.business-newbie7-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.business-newbie7-art {
    position: relative;
    height: 118px;
    overflow: hidden;
}

.business-newbie7-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.business-newbie7-art span {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(13, 18, 26, 0.82);
    color: #f3b45a;
    font-size: 0.72em;
}

.business-newbie7-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 12px;
}

.business-newbie7-head,
.business-newbie7-objective {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.business-newbie7-head strong {
    min-width: 0;
    color: #f5f7fb;
    font-size: 0.95em;
    line-height: 1.3;
}

.business-newbie7-head em,
.business-newbie7-objective strong {
    color: #93a4b7;
    font-style: normal;
    font-size: 0.8em;
    white-space: nowrap;
}

.business-newbie7-body p {
    margin: 0;
    color: #c6d0da;
    font-size: 0.82em;
    line-height: 1.45;
}

.business-newbie7-objectives {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.business-newbie7-objective {
    padding: 5px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.business-newbie7-objective span {
    color: #b9c6d3;
    font-size: 0.78em;
    line-height: 1.35;
}

.business-newbie7-objective.done span,
.business-newbie7-objective.done strong {
    color: #b9ed8d;
}

.business-newbie7-body .business-action-btn {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.82em;
}

.business-weekly-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.business-weekly-card {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 18, 24, 0.84);
}

.business-weekly-card.ready {
    border-color: rgba(155, 225, 93, 0.34);
}

.business-weekly-card.claimed {
    opacity: 0.82;
}

.business-weekly-art {
    position: relative;
    height: 126px;
    overflow: hidden;
}

.business-weekly-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.business-weekly-art span {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(13, 18, 26, 0.82);
    color: #f3b45a;
    font-size: 0.72em;
}

.business-weekly-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 12px;
}

.business-weekly-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.business-weekly-head strong {
    min-width: 0;
    color: #f5f7fb;
    font-size: 0.95em;
}

.business-weekly-head em {
    color: #93a4b7;
    font-style: normal;
    font-size: 0.8em;
    white-space: nowrap;
}

.business-weekly-body p {
    margin: 0;
    color: #c6d0da;
    font-size: 0.82em;
    line-height: 1.45;
}

.business-weekly-reward {
    color: #ffd28c;
    font-size: 0.8em;
    line-height: 1.4;
}

.business-weekly-body .business-action-btn {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.82em;
}

.business-resident-gallery {
    display: grid;
    grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.business-resident-art {
    position: relative;
    min-height: 176px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.business-resident-art img {
    width: 100%;
    height: 100%;
    min-height: 176px;
    display: block;
    object-fit: contain;
    background: #e8dcc8;
}

.business-resident-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.business-resident-copy span {
    color: #f3b45a;
    font-size: 0.82em;
}

.business-resident-copy strong {
    color: #f5f7fb;
    font-size: 1.02em;
    line-height: 1.45;
}

.business-resident-copy em {
    color: #c6d0da;
    font-style: normal;
    font-size: 0.84em;
    line-height: 1.45;
}

.business-legacy-agent-strip {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.business-legacy-agent-portrait {
    position: relative;
    min-width: 0;
    min-height: 118px;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(243, 180, 90, 0.18);
    background: rgba(12, 18, 24, 0.78);
}

.business-legacy-agent-portrait img {
    width: 100%;
    height: 118px;
    display: block;
    object-fit: cover;
}

.business-legacy-agent-portrait figcaption {
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 6px;
    z-index: 1;
    color: #f5f7fb;
    font-size: 0.72em;
    font-weight: 800;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.88);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.business-legacy-agent-portrait::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 55%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
}

.business-resident-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.business-resident-stats span {
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 18, 24, 0.74);
    color: #dbe5ee;
    font-size: 0.78em;
    white-space: nowrap;
}

.business-ui-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(230px, 0.78fr) minmax(0, 1.42fr);
    gap: 12px;
    align-items: stretch;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.04);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.015));
    background-size: auto;
    background-position: 0 0;
    background-repeat: repeat;
    background-blend-mode: normal;
}

body.business-heavy-art-ready .business-ui-panel {
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.015)),
        url('images/business/ui/business-ui-texture-v1.png');
    background-size: auto, 560px 560px;
    background-position: 0 0, center;
    background-repeat: repeat, repeat;
    background-blend-mode: normal, soft-light;
}

.business-ui-art {
    position: relative;
    min-height: 210px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 18, 24, 0.76);
}

.business-ui-art img {
    width: 100%;
    height: 100%;
    min-height: 210px;
    display: block;
    object-fit: cover;
}

.business-ui-art span {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(12, 18, 24, 0.78);
    color: #ffd28c;
    font-size: 0.78em;
    font-weight: 800;
}

.business-ui-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.business-daily-grid,
.business-faction-grid,
.business-achievement-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.business-daily-card,
.business-faction-card,
.business-achievement-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(12, 18, 24, 0.72);
}

.business-daily-card.ready,
.business-achievement-card.ready {
    border-color: rgba(243, 180, 90, 0.4);
}

.business-daily-card.claimed,
.business-achievement-card.unlocked,
.business-faction-card.friendly {
    border-color: rgba(78, 205, 196, 0.34);
    background: rgba(78, 205, 196, 0.08);
}

.business-faction-card.hostile {
    border-color: rgba(233, 69, 96, 0.34);
}

.business-daily-head,
.business-faction-head,
.business-achievement-head {
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.business-daily-head strong,
.business-faction-head strong,
.business-achievement-head strong {
    min-width: 0;
    color: #f5f7fb;
    font-size: 0.92em;
    line-height: 1.35;
}

.business-daily-head span,
.business-faction-head span,
.business-achievement-head span {
    flex: 0 0 auto;
    color: #ffd28c;
    font-size: 0.76em;
    font-weight: 800;
    white-space: nowrap;
}

.business-daily-card p,
.business-achievement-card p {
    margin: 0;
    color: #aebdca;
    font-size: 0.8em;
    line-height: 1.45;
}

.business-daily-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.business-daily-foot em,
.business-faction-card em,
.business-faction-card span,
.business-achievement-card em {
    color: #c6d0da;
    font-style: normal;
    font-size: 0.78em;
    line-height: 1.42;
}

.business-daily-foot .business-action-btn {
    min-height: 30px;
    padding: 5px 9px;
    font-size: 0.78em;
}

.business-title-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.business-title-strip span {
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 18, 24, 0.68);
    color: #dbe5ee;
    font-size: 0.78em;
}

.business-title-strip span.active {
    border-color: rgba(243, 180, 90, 0.46);
    color: #ffd28c;
}

.business-season-band {
    display: grid;
    grid-template-columns: minmax(260px, 1.08fr) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.business-season-art {
    position: relative;
    min-height: 182px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.business-season-art img {
    width: 100%;
    height: 100%;
    min-height: 182px;
    display: block;
    object-fit: cover;
}

.business-season-copy {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #f5f7fb;
}

.business-season-copy span {
    color: #ffd28c;
    font-size: 0.82em;
}

.business-season-copy strong {
    font-size: 1.08em;
    line-height: 1.45;
}

.business-season-copy em {
    color: #dbe5ee;
    font-style: normal;
    font-size: 0.83em;
    line-height: 1.45;
}

.business-season-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.business-season-modifiers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.business-season-modifiers span {
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(243, 180, 90, 0.24);
    background: rgba(243, 180, 90, 0.08);
    color: #ffd28c;
    font-size: 0.78em;
    white-space: nowrap;
}

.business-weekly-meta {
    color: #93a4b7;
    font-size: 0.75em;
    line-height: 1.4;
}

.business-weekly-card.future {
    opacity: 0.72;
}

.business-dispatch-band {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.business-dispatch-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
}

.business-dispatch-head strong {
    color: #f5f7fb;
    font-size: 0.98em;
}

.business-dispatch-head span {
    color: #93a4b7;
    font-size: 0.8em;
}

.business-dispatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}

.business-dispatch-row {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 11px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 18, 24, 0.74);
}

.business-dispatch-row.ready {
    border-color: rgba(155, 225, 93, 0.28);
}

.business-dispatch-row span {
    color: #f5f7fb;
    font-size: 0.84em;
}

.business-dispatch-row strong {
    color: #ffd28c;
    font-size: 0.92em;
}

.business-dispatch-row em {
    color: #93a4b7;
    font-style: normal;
    font-size: 0.76em;
    line-height: 1.35;
}

.business-city-pin small {
    color: #d7e1ea;
    font-size: 0.72em;
    line-height: 1.25;
}

.business-tier-seed {
    border-color: rgba(143, 211, 255, 0.24) !important;
}

.business-tier-form {
    border-color: rgba(155, 225, 93, 0.28) !important;
}

.business-tier-grow {
    border-color: rgba(255, 210, 140, 0.32) !important;
}

.business-tier-rich {
    border-color: rgba(192, 162, 255, 0.32) !important;
}

.business-tier-peak {
    border-color: rgba(255, 181, 106, 0.42) !important;
    box-shadow: 0 0 0 1px rgba(255, 181, 106, 0.12);
}

.business-production-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.business-production-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(12, 18, 24, 0.82);
}

.business-production-card.available {
    border-color: rgba(78, 205, 196, 0.28);
}

.business-production-card.running {
    border-color: rgba(243, 180, 90, 0.28);
}

.business-production-card.ready {
    border-color: rgba(155, 225, 93, 0.34);
}

.business-production-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.business-production-head div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.business-production-head strong {
    color: #f5f7fb;
    font-size: 0.95em;
    line-height: 1.3;
}

.business-production-head span,
.business-production-head em,
.business-production-meta span {
    color: #93a4b7;
    font-style: normal;
    font-size: 0.78em;
    line-height: 1.35;
}

.business-production-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.business-production-reward {
    color: #ffd28c;
    font-size: 0.82em;
    line-height: 1.4;
}

.business-agent-card.locked {
    opacity: 0.82;
}

.business-agent-card.rarity-rare {
    border-color: rgba(143, 211, 255, 0.22);
}

.business-agent-card.rarity-epic {
    border-color: rgba(192, 162, 255, 0.28);
}

.business-agent-card.rarity-legendary {
    border-color: rgba(255, 207, 141, 0.34);
}

.business-agent-headline em {
    color: #ffd28c;
    font-style: normal;
    font-size: 0.76em;
    line-height: 1.35;
}

.business-mini-btn.recruit {
    border-color: rgba(155, 225, 93, 0.32);
    color: #dff6c8;
}

.business-mini-btn.recruit.locked {
    opacity: 0.62;
}

.business-pacing-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.business-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.business-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.business-section-head h3 {
    margin: 0;
    color: #f5f7fb;
    font-size: 1.05em;
    letter-spacing: 0;
}

.business-section-head span {
    color: #93a4b7;
    font-size: 0.86em;
    line-height: 1.45;
    text-align: right;
}

.business-section-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.business-section-copy span {
    text-align: left;
}

.business-section-action {
    max-width: 180px;
    white-space: normal;
}

.business-tab-panel .business-section {
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}

.business-tab-panel .business-section:has(.business-city-band),
.business-tab-panel .business-section:has(.business-guidance-band),
.business-tab-panel .business-section:has(.business-onboarding-band) {
    background: transparent;
    padding: 0;
}

.business-tab-panel .business-dashboard-fold > .business-section {
    margin: 0;
    padding: 12px;
    background: transparent;
}

.business-tab-panel .business-card-grid,
.business-tab-panel .business-production-grid,
.business-tab-panel .business-plot-grid,
.business-tab-panel .business-project-grid,
.business-tab-panel .business-decoration-grid,
.business-tab-panel .business-transport-grid,
.business-tab-panel .business-district-grid,
.business-tab-panel .business-trade-grid,
.business-tab-panel .business-order-grid,
.business-tab-panel .business-agent-grid,
.business-tab-panel .business-newbie7-grid,
.business-tab-panel .business-weekly-grid,
.business-tab-panel .business-daily-grid,
.business-tab-panel .business-collection-grid,
.business-tab-panel .business-operation-grid,
.business-tab-panel .business-contract-grid,
.business-tab-panel .business-resident-request-grid,
.business-tab-panel .business-resident-role-grid,
.business-tab-panel .business-story-grid,
.business-tab-panel .business-liveops-grid,
.business-tab-panel .business-leaderboard-grid,
.business-tab-panel .business-social-grid,
.business-tab-panel .business-commercial-grid,
.business-tab-panel .business-pipeline-grid,
.business-tab-panel .business-art-manifest-grid,
.business-tab-panel .business-ops-grid {
    max-height: min(58vh, 620px);
    overflow: auto;
    padding-right: 2px;
    scrollbar-width: thin;
}

.business-plot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.business-land-tile {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 18, 24, 0.84);
}

.business-land-tile.free {
    border-color: rgba(78, 205, 196, 0.34);
}

.business-land-tile.locked {
    opacity: 0.72;
    filter: saturate(0.7);
}

.business-land-thumb {
    position: relative;
    min-height: 120px;
    overflow: hidden;
    background: #101820;
}

.business-land-thumb img {
    width: 100%;
    height: 132px;
    display: block;
    object-fit: cover;
}

.business-land-thumb-empty,
.business-land-thumb-locked {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(78, 205, 196, 0.18), rgba(243, 180, 90, 0.1)),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 8px, rgba(255, 255, 255, 0.02) 8px 16px);
}

.business-land-thumb-locked {
    background:
        linear-gradient(135deg, rgba(100, 116, 139, 0.2), rgba(15, 23, 42, 0.18)),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 8px, rgba(255, 255, 255, 0.01) 8px 16px);
}

.business-land-slot {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(12, 18, 24, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #f5f7fb;
    font-size: 0.76em;
    font-weight: 700;
}

.business-land-mark {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(12, 18, 24, 0.54);
    border: 1px solid rgba(243, 180, 90, 0.34);
    color: #ffd28c;
    font-size: 0.86em;
    font-weight: 800;
}

.business-land-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
}

.business-land-body strong {
    min-width: 0;
    color: #f5f7fb;
    font-size: 0.94em;
}

.business-land-body span {
    color: #f3b45a;
    font-size: 0.78em;
    white-space: nowrap;
}

.business-plot-card {
    min-width: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 18, 24, 0.84);
}

.business-plot-card.is-locked {
    filter: saturate(0.74);
}

.business-plot-image {
    position: relative;
    height: 118px;
    overflow: hidden;
    background: #101820;
}

.business-plot-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.business-plot-badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(12, 18, 24, 0.72);
    border: 1px solid rgba(243, 180, 90, 0.42);
    color: #ffd28c;
    font-size: 0.78em;
    font-weight: 700;
}

.business-plot-body {
    padding: 10px 12px 12px;
}

.business-plot-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.business-plot-topline strong {
    min-width: 0;
    color: #f5f7fb;
    font-size: 0.95em;
}

.business-plot-topline span {
    color: #f3b45a;
    font-size: 0.78em;
    white-space: nowrap;
}

.business-plot-body p {
    margin: 6px 0 0;
    color: #b9c6d3;
    font-size: 0.82em;
    line-height: 1.42;
}

.business-trade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.business-district-grid,
.business-event-grid,
.business-goal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.business-atlas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.business-district-card,
.business-event-card,
.business-goal-card {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 18, 24, 0.84);
}

.business-district-card.is-locked {
    filter: saturate(0.72);
    opacity: 0.8;
}

.business-district-art,
.business-event-art {
    position: relative;
    height: 150px;
    overflow: hidden;
    background: #101820;
}

.business-district-art img,
.business-event-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.business-district-badge {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(12, 18, 24, 0.74);
    border: 1px solid rgba(243, 180, 90, 0.42);
    color: #ffd28c;
    font-size: 0.76em;
    font-weight: 800;
}

.business-district-title {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.78);
}

.business-district-title strong {
    font-size: 1.18em;
}

.business-district-title span {
    color: #d8e2e8;
    font-size: 0.82em;
    line-height: 1.35;
}

.business-district-body,
.business-event-body,
.business-goal-card {
    padding: 12px;
}

.business-district-body,
.business-event-body {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.business-event-body > strong {
    color: #f5f7fb;
    font-size: 1.04em;
}

.business-event-body p,
.business-goal-card p {
    margin: 0;
    color: #b9c6d3;
    font-size: 0.84em;
    line-height: 1.45;
}

.business-event-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.business-event-choice {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    padding: 9px;
    border-radius: 8px;
    border: 1px solid rgba(243, 180, 90, 0.26);
    background: rgba(255, 255, 255, 0.06);
    color: #dbe5ee;
    text-align: left;
    cursor: pointer;
}

.business-event-choice:hover:not(:disabled) {
    border-color: rgba(243, 180, 90, 0.58);
    background: rgba(243, 180, 90, 0.12);
}

.business-event-choice.blocked,
.business-event-choice:disabled {
    opacity: 0.52;
    cursor: not-allowed;
}

.business-event-choice strong {
    color: #ffd28c;
    font-size: 0.88em;
}

.business-event-choice span,
.business-event-choice em {
    color: #b9c6d3;
    font-size: 0.76em;
    line-height: 1.32;
    font-style: normal;
    overflow-wrap: anywhere;
}

.business-goal-card {
    gap: 10px;
}

.business-goal-card.ready {
    border-color: rgba(155, 225, 93, 0.4);
}

.business-goal-card.claimed {
    opacity: 0.72;
}

.business-goal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.business-goal-head strong {
    color: #f5f7fb;
}

.business-goal-head span {
    color: #ffd28c;
    font-size: 0.82em;
    font-weight: 800;
}

.business-goal-bar {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.business-goal-bar div {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #4ecdc4, #f3b45a);
}

.business-atlas-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(12, 18, 24, 0.84);
}

.business-atlas-item span {
    color: #93a4b7;
    font-size: 0.86em;
}

.business-atlas-item strong {
    color: #ffd28c;
}

.business-trade-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(12, 18, 24, 0.84);
}

.business-trade-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.business-trade-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(78, 205, 196, 0.12);
    border: 1px solid rgba(78, 205, 196, 0.28);
    font-size: 1.35em;
}

.business-trade-headline {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.business-trade-headline strong {
    color: #f5f7fb;
}

.business-trade-headline span {
    color: #9fb0bf;
    font-size: 0.8em;
    line-height: 1.4;
}

.business-trade-badge {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(243, 180, 90, 0.14);
    border: 1px solid rgba(243, 180, 90, 0.36);
    color: #ffd28c;
    font-size: 0.76em;
    font-weight: 700;
    white-space: nowrap;
}

.business-trade-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.business-trade-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: #cfd6df;
    font-size: 0.86em;
    line-height: 1.45;
}

.business-trade-row span {
    color: #93a4b7;
}

.business-trade-row strong {
    min-width: 0;
    color: #f5f7fb;
    font-weight: 600;
    word-break: break-word;
}

.business-trade-actions {
    margin-top: auto;
    display: grid;
}

.business-order-grid,
.business-agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 12px;
}

.business-order-card,
.business-agent-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(12, 18, 24, 0.84);
}

.business-order-card.ready {
    border-color: rgba(155, 225, 93, 0.36);
}

.business-order-card.blocked {
    filter: saturate(0.84);
}

.business-order-head,
.business-agent-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.business-agent-head {
    grid-template-columns: 42px minmax(0, 1fr);
}

.business-order-icon,
.business-agent-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(243, 180, 90, 0.13);
    border: 1px solid rgba(243, 180, 90, 0.34);
    font-size: 1.35em;
}

.business-agent-card.has-portrait .business-agent-head {
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: stretch;
}

.business-agent-portrait {
    width: 76px;
    height: 98px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(243, 180, 90, 0.32);
    background: rgba(12, 18, 24, 0.78);
}

.business-agent-portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center bottom;
}

.business-agent-card.locked .business-agent-portrait img {
    filter: saturate(0.72) brightness(0.74);
}

.business-order-headline,
.business-agent-headline {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.business-agent-name-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.business-agent-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    border: 1px solid rgba(243, 180, 90, 0.34);
    background: rgba(12, 18, 24, 0.78);
    object-fit: contain;
    object-position: center bottom;
}

.business-order-headline strong,
.business-agent-headline strong {
    color: #f5f7fb;
}

.business-order-headline span,
.business-agent-headline span {
    color: #9fb0bf;
    font-size: 0.8em;
    line-height: 1.4;
}

.business-order-body,
.business-agent-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.business-order-row,
.business-agent-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px;
    color: #cfd6df;
    font-size: 0.86em;
    line-height: 1.45;
}

.business-order-row span,
.business-agent-row span {
    color: #93a4b7;
}

.business-order-row strong,
.business-agent-row strong {
    min-width: 0;
    color: #f5f7fb;
    font-weight: 600;
    word-break: break-word;
}

.business-order-actions {
    margin-top: auto;
    display: grid;
}

.business-agent-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 3px;
}

.business-mini-btn {
    min-width: 0;
    min-height: 32px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #dbe5ee;
    font-size: 0.78em;
    font-weight: 700;
    cursor: pointer;
}

.business-mini-btn.active {
    border-color: rgba(243, 180, 90, 0.58);
    background: rgba(243, 180, 90, 0.18);
    color: #ffd28c;
}

.business-mini-btn:hover {
    border-color: rgba(78, 205, 196, 0.56);
}

.business-mini-btn.biography {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-color: rgba(255, 210, 140, 0.38);
    color: #ffd28c;
}

.business-mini-btn.biography::before {
    content: '';
    width: 10px;
    height: 12px;
    flex: 0 0 10px;
    border: 1px solid currentColor;
    border-radius: 2px 3px 2px 2px;
    background:
        linear-gradient(90deg, transparent 0 34%, currentColor 34% 40%, transparent 40% 100%),
        linear-gradient(180deg, transparent 0 18%, rgba(255, 210, 140, 0.34) 18% 22%, transparent 22% 100%);
    box-shadow: inset 2px 0 0 rgba(255, 210, 140, 0.22);
}

.business-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.business-property-card {
    overflow: hidden;
    background: rgba(12, 18, 24, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.business-property-card.is-locked {
    filter: saturate(0.7);
}

.business-card-art {
    position: relative;
    min-height: 210px;
    overflow: hidden;
    background: #101820;
}

.business-card-art img {
    width: 100%;
    height: 230px;
    display: block;
    object-fit: cover;
}

.business-art-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(7, 10, 12, 0.86), rgba(7, 10, 12, 0.34) 55%, rgba(7, 10, 12, 0.08)),
        linear-gradient(0deg, rgba(7, 10, 12, 0.75), rgba(7, 10, 12, 0.04) 58%);
}

.business-title-block {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

.business-title-block h3 {
    margin: 6px 0 4px;
    font-size: 1.55em;
    letter-spacing: 0;
}

.business-title-block p {
    margin: 0;
    max-width: 280px;
    color: #d8e2e8;
    line-height: 1.4;
}

.business-level {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(243, 180, 90, 0.2);
    border: 1px solid rgba(243, 180, 90, 0.55);
    color: #ffd28c;
    font-size: 0.82em;
    font-weight: 700;
}

.business-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}

.business-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.business-tags span {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(78, 205, 196, 0.12);
    border: 1px solid rgba(78, 205, 196, 0.32);
    color: #9ce2dc;
    font-size: 0.78em;
}

.business-stat-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    font-size: 0.88em;
    line-height: 1.45;
}

.business-stat-row span {
    color: #93a4b7;
}

.business-stat-row strong {
    min-width: 0;
    color: #f5f7fb;
    font-weight: 600;
    word-break: break-word;
}

.business-ok {
    color: #9be15d !important;
}

.business-warn {
    color: #ffbd73 !important;
}

.business-last-event {
    min-height: 36px;
    padding: 9px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #d9e0e8;
    font-size: 0.86em;
    line-height: 1.45;
}

.business-daily-opening-box {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(131, 215, 162, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(131, 215, 162, 0.08), rgba(243, 180, 90, 0.06)),
        rgba(7, 12, 18, 0.46);
}

.business-daily-opening-box.settled {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.045);
}

.business-daily-opening-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.business-daily-opening-head span {
    color: #83d7a2;
    font-size: 0.82em;
    font-weight: 800;
    white-space: nowrap;
}

.business-daily-opening-head strong {
    min-width: 0;
    color: #f2d6a2;
    font-size: 0.86em;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.business-daily-opening-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.business-daily-opening-actions .business-mini-btn {
    min-height: 30px;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 0.76em;
}

.business-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    gap: 8px;
}

.business-action-btn {
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.business-action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(243, 180, 90, 0.65);
    background: rgba(243, 180, 90, 0.16);
}

.business-action-btn.primary {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.9), rgba(243, 180, 90, 0.85));
    border-color: rgba(255, 210, 140, 0.55);
}

.business-action-btn:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.business-ledger {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.business-ledger-item,
.business-ledger-empty {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #b9c6d3;
    font-size: 0.82em;
}

.business-ledger-item strong {
    color: #f1d49b;
    text-align: right;
}

.business-biography-dialog {
    position: fixed;
    inset: 0;
    z-index: 4800;
    display: grid;
    place-items: center;
    padding: 20px;
}

.business-story-replay-dialog {
    position: fixed;
    inset: 0;
    z-index: 4810;
    display: grid;
    place-items: center;
    padding: 20px;
}

.business-biography-backdrop,
.business-story-replay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 9, 13, 0.74);
    backdrop-filter: blur(6px);
}

.business-biography-panel {
    position: relative;
    z-index: 1;
    width: min(940px, calc(100vw - 32px));
    max-height: min(760px, calc(100vh - 32px));
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(260px, 0.88fr) minmax(0, 1.12fr);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.46);
    background-color: rgba(13, 18, 24, 0.96);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.012));
    background-size: auto;
    background-position: 0 0;
    background-repeat: repeat;
    background-blend-mode: normal;
}

body.business-heavy-art-ready .business-biography-panel {
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.012)),
        url('images/business/ui/business-ui-texture-v1.png');
    background-size: auto, 560px 560px;
    background-position: 0 0, center;
    background-repeat: repeat, repeat;
    background-blend-mode: normal, soft-light;
}

.business-story-replay-panel {
    position: relative;
    z-index: 1;
    width: min(720px, calc(100vw - 32px));
    max-height: min(720px, calc(100vh - 32px));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.46);
    background-color: rgba(13, 18, 24, 0.96);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.012));
    background-size: auto;
    background-position: 0 0;
    background-repeat: repeat;
    background-blend-mode: normal;
}

body.business-heavy-art-ready .business-story-replay-panel {
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.012)),
        url('images/business/ui/business-ui-texture-v1.png');
    background-size: auto, 560px 560px;
    background-position: 0 0, center;
    background-repeat: repeat, repeat;
    background-blend-mode: normal, soft-light;
}

.business-biography-art {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    background: #0f151c;
}

.business-biography-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.business-biography-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 22px 18px;
    overflow-y: auto;
}

.business-biography-close,
.business-story-replay-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(12, 18, 24, 0.86);
    color: #fff;
    font-size: 1.2em;
    line-height: 1;
    cursor: pointer;
}

.business-biography-close:hover,
.business-story-replay-close:hover {
    border-color: rgba(243, 180, 90, 0.72);
    color: #ffd28c;
}

.business-biography-title,
.business-story-replay-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 44px;
}

.business-biography-title span,
.business-story-replay-title span {
    color: #f3b45a;
    font-size: 0.84em;
    letter-spacing: 0;
}

.business-biography-title strong,
.business-story-replay-title strong {
    color: #f5f7fb;
    font-size: 1.32em;
    line-height: 1.3;
}

.business-biography-title em,
.business-story-replay-title em {
    color: #c8d2dc;
    font-style: normal;
    font-size: 0.82em;
    line-height: 1.45;
}

.business-story-replay-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 15px;
    border: 1px solid rgba(243, 180, 90, 0.18);
    border-radius: 8px;
    background: rgba(12, 18, 24, 0.74);
}

.business-story-replay-art {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    border: 1px solid rgba(243, 180, 90, 0.2);
    background: #101820;
}

.business-story-replay-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.business-story-replay-body p {
    margin: 0;
    color: #d7e1ea;
    font-size: 0.9em;
    line-height: 1.7;
}

.business-biography-chapters {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.business-biography-chapter {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 13px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(12, 18, 24, 0.74);
}

.business-biography-chapter.unlocked {
    border-color: rgba(243, 180, 90, 0.3);
    background: rgba(243, 180, 90, 0.08);
}

.business-biography-chapter.locked {
    opacity: 0.68;
}

.business-biography-chapter-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.business-biography-chapter-head strong {
    color: #f5f7fb;
    font-size: 0.94em;
}

.business-biography-chapter-head span {
    color: #ffd28c;
    font-size: 0.76em;
    white-space: nowrap;
}

.business-biography-chapter p {
    margin: 0;
    color: #d7e1ea;
    font-size: 0.84em;
    line-height: 1.55;
}

.business-screen-fx {
    position: fixed;
    inset: 0;
    z-index: 4700;
    pointer-events: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    animation: businessFxFade 950ms ease-out forwards;
}

.business-screen-fx::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url("images/business/ui/business-action-feedback-v1-alpha.png"),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 58%);
    background-size: min(560px, 86vw) auto, cover;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    opacity: 0.58;
}

.business-screen-fx::after {
    content: var(--fx-label, '');
    position: relative;
    z-index: 2;
    margin-top: 136px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(10, 16, 22, 0.62);
    color: #fff;
    font-size: 0.9em;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.business-screen-fx-crit {
    --fx-main: #ffd15a;
    --fx-accent: #ff7a59;
    --fx-glow: rgba(255, 209, 90, 0.38);
    --fx-label: '暴击';
}

.business-screen-fx-gift {
    --fx-main: #9be15d;
    --fx-accent: #4ecdc4;
    --fx-glow: rgba(155, 225, 93, 0.34);
    --fx-label: '开盒';
}

.business-screen-fx-achievement {
    --fx-main: #ffd28c;
    --fx-accent: #e94560;
    --fx-glow: rgba(255, 210, 140, 0.38);
    --fx-label: '成就';
}

.business-screen-fx-spark {
    --fx-main: #8fd3ff;
    --fx-accent: #4ecdc4;
    --fx-glow: rgba(143, 211, 255, 0.28);
    --fx-label: '';
}

.business-fx-ring {
    position: absolute;
    width: 156px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--fx-main, #ffd15a);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 28px var(--fx-glow, rgba(255, 209, 90, 0.35));
    animation: businessFxRing 930ms ease-out forwards;
}

.business-fx-core {
    position: absolute;
    width: 76px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 18%, var(--fx-main, #ffd15a) 30%, rgba(255, 255, 255, 0) 72%);
    filter: blur(0.5px);
    animation: businessFxCore 860ms ease-out forwards;
}

.business-fx-sparks {
    position: absolute;
    width: 246px;
    aspect-ratio: 1;
}

.business-fx-sparks span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 18px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), var(--fx-main, #ffd15a) 52%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 0 12px var(--fx-glow, rgba(255, 209, 90, 0.32));
    transform:
        translate(-50%, -50%)
        rotate(var(--fx-angle))
        translateY(var(--fx-distance));
    transform-origin: center center;
    opacity: 0;
    animation: businessFxSpark 930ms ease-out forwards;
}

.business-fx-sparks span:nth-child(1) { --fx-angle: 0deg; --fx-distance: -98px; }
.business-fx-sparks span:nth-child(2) { --fx-angle: 45deg; --fx-distance: -88px; }
.business-fx-sparks span:nth-child(3) { --fx-angle: 90deg; --fx-distance: -100px; }
.business-fx-sparks span:nth-child(4) { --fx-angle: 135deg; --fx-distance: -90px; }
.business-fx-sparks span:nth-child(5) { --fx-angle: 180deg; --fx-distance: -102px; }
.business-fx-sparks span:nth-child(6) { --fx-angle: 225deg; --fx-distance: -92px; }
.business-fx-sparks span:nth-child(7) { --fx-angle: 270deg; --fx-distance: -98px; }
.business-fx-sparks span:nth-child(8) { --fx-angle: 315deg; --fx-distance: -88px; }

@keyframes businessFxFade {
    0% { opacity: 1; }
    72% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes businessFxRing {
    0% { transform: scale(0.34); opacity: 1; }
    70% { opacity: 0.72; }
    100% { transform: scale(2.45); opacity: 0; }
}

@keyframes businessFxCore {
    0% { transform: scale(0.35); opacity: 1; }
    45% { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(0.14); opacity: 0; }
}

@keyframes businessFxSpark {
    0% { transform: translate(-50%, -50%) rotate(var(--fx-angle)) translateY(0) scale(0.35); opacity: 0; }
    18% { opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(var(--fx-angle)) translateY(var(--fx-distance)) scale(0.7); opacity: 0; }
}

@media (max-width: 720px) {
    .business-biography-dialog,
    .business-story-replay-dialog {
        padding: 12px;
    }

    .business-map-relation {
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }

    .business-map-relation span {
        max-width: 100%;
        width: max-content;
    }

    .business-biography-panel {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        grid-template-columns: 1fr;
    }

    .business-story-replay-panel {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        padding: 16px;
    }

    .business-biography-art {
        min-height: 220px;
    }

    .business-biography-content {
        padding: 16px 16px 18px;
    }

    .business-biography-title strong {
        font-size: 1.14em;
    }

    .business-story-replay-title strong {
        font-size: 1.12em;
    }

    .business-biography-chapter-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .business-screen-fx::after {
        margin-top: 118px;
        font-size: 0.82em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .business-screen-fx,
    .business-fx-ring,
    .business-fx-core,
    .business-fx-sparks span {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 720px) {
    .business-way-shell {
        padding: 12px;
    }

    .business-guidance-band,
    .business-onboarding-band,
    .business-onboarding-steps,
    .business-balance-grid,
    .business-plot-grid,
    .business-district-grid,
    .business-event-grid,
    .business-goal-grid,
    .business-city-band,
    .business-city-project-band,
    .business-decoration-band,
    .business-transport-band,
    .business-city-impact-grid,
    .business-meta-progression,
    .business-industrial-band,
    .business-city-card-body,
    .business-city-highlights,
    .business-newbie7-band,
    .business-newbie7-grid,
    .business-weekly-grid,
    .business-ui-panel,
    .business-daily-grid,
    .business-faction-grid,
    .business-achievement-grid,
    .business-season-band,
    .business-dispatch-grid,
    .business-atlas-grid,
    .business-trade-grid,
    .business-order-grid,
    .business-agent-grid,
    .business-resident-gallery,
    .business-card-grid,
    .business-ledger {
        grid-template-columns: 1fr;
    }

    .business-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
    }

    .business-overview > div {
        min-height: 48px;
        padding: 7px 8px;
    }

    .business-city-card-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .business-leaderboard-toolbar {
        grid-template-columns: 1fr;
    }

    .business-liveops-backend-toolbar {
        grid-template-columns: 1fr;
    }

    .business-leaderboard-actions {
        justify-content: flex-start;
    }

    .business-city-card-actions {
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .business-guidance-band {
        display: block;
    }

    .business-guidance-lead {
        min-height: 132px;
        margin-bottom: 10px;
    }

    .business-guidance-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        overflow-x: visible;
    }

    .business-guidance-grid .business-guidance-card {
        width: 100%;
    }

    .business-onboarding-band {
        display: block;
    }

    .business-onboarding-lead {
        margin-bottom: 10px;
    }

    .business-onboarding-steps {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .business-balance-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        overflow-x: visible;
    }

    .business-onboarding-step {
        flex: 0 0 214px;
    }

    .business-balance-row {
        width: 100%;
        max-width: 100%;
    }

    .business-tab-panel .business-card-grid,
    .business-tab-panel .business-production-grid,
    .business-tab-panel .business-plot-grid,
    .business-tab-panel .business-project-grid,
    .business-tab-panel .business-decoration-grid,
    .business-tab-panel .business-transport-grid,
    .business-tab-panel .business-district-grid,
    .business-tab-panel .business-trade-grid,
    .business-tab-panel .business-order-grid,
    .business-tab-panel .business-agent-grid,
    .business-tab-panel .business-weekly-grid,
    .business-tab-panel .business-daily-grid,
    .business-tab-panel .business-collection-grid,
    .business-tab-panel .business-operation-grid,
    .business-tab-panel .business-contract-grid,
    .business-tab-panel .business-resident-request-grid,
    .business-tab-panel .business-resident-role-grid,
    .business-tab-panel .business-story-grid,
    .business-tab-panel .business-liveops-grid,
    .business-tab-panel .business-leaderboard-grid,
    .business-tab-panel .business-social-grid,
    .business-tab-panel .business-commercial-grid,
    .business-tab-panel .business-pipeline-grid,
    .business-tab-panel .business-art-manifest-grid,
    .business-tab-panel .business-ops-grid {
        max-height: min(50vh, 460px);
    }

    .business-section-head {
        align-items: start;
        flex-direction: column;
    }

    .business-section-head span {
        text-align: left;
    }

    .business-section-action {
        max-width: none;
        width: 100%;
    }

    .business-project-grid,
    .business-resident-request-grid,
    .business-collection-grid,
    .business-operation-grid,
    .business-contract-grid,
    .business-decoration-grid,
    .business-transport-grid,
    .business-resident-role-grid,
    .business-liveops-grid,
    .business-leaderboard-grid,
    .business-social-grid,
    .business-commercial-grid,
    .business-pipeline-grid,
    .business-story-grid,
    .business-art-manifest-grid,
    .business-ops-grid,
    .business-hub-grid {
        grid-template-columns: 1fr;
    }

    .business-liveops-announcement-grid,
    .business-liveops-backend-grid,
    .business-liveops-pool-grid,
    .business-liveops-exchange-grid,
    .business-liveops-gray-grid,
    .business-liveops-rollback-grid,
    .business-liveops-calendar-grid,
    .business-liveops-backend-task,
    .business-liveops-exchange-item {
        grid-template-columns: 1fr;
    }

    .business-art-manifest-card {
        grid-template-columns: 1fr;
    }

    .business-guidance-card {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .business-trade-head {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .business-trade-badge {
        grid-column: 2;
        justify-self: start;
    }

    .business-order-head {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .business-order-row,
    .business-agent-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .business-agent-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .business-agent-card.has-portrait .business-agent-head {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .business-agent-portrait {
        width: 68px;
        height: 88px;
    }

    .business-daily-foot {
        grid-template-columns: 1fr;
    }

    .business-event-choices {
        grid-template-columns: 1fr;
    }

    .business-actions {
        grid-template-columns: 1fr;
    }

    .business-card-art,
    .business-card-art img {
        min-height: 190px;
        height: 190px;
    }

    .business-stat-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .business-trade-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .business-guidance-band {
        grid-template-columns: 1fr;
    }

    .business-guidance-lead {
        min-height: 160px;
    }

    .business-city-hero,
    .business-city-hero img {
        min-height: 210px;
    }

    .business-city-map-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .business-city-map-head span {
        white-space: normal;
    }

    .business-grid-map-band {
        grid-template-columns: 1fr;
    }

    .business-grid-map-board {
        width: 100%;
        aspect-ratio: auto;
        min-height: 0;
    }

    .business-grid-cells {
        min-height: 0;
        height: auto;
    }

    .business-grid-cells {
        gap: 4px;
        padding: 8px;
        grid-template-rows: repeat(var(--rows), 40px);
    }

    .business-grid-map-board::after {
        inset: 8px;
    }

    .business-grid-cell {
        min-height: 40px;
        padding: 5px;
        border-radius: 6px;
    }

    .business-grid-cell span {
        display: none;
    }

    .business-grid-cell strong {
        font-size: 0.68em;
    }

    .business-grid-cell em {
        display: none;
    }

    .business-grid-detail-actions {
        grid-template-columns: 1fr;
    }

    .business-season-band {
        grid-template-columns: 1fr;
    }

    .business-dispatch-head {
        align-items: start;
        flex-direction: column;
    }

    .business-resident-art,
    .business-resident-art img {
        min-height: 160px;
    }
}

/* 加工弹窗 */
.life-craft-box {
    max-width: 500px;
    width: 90%;
    max-height: 70vh;
    overflow-y: auto;
}

.close-life-craft {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.5em;
    cursor: pointer;
    color: #888;
    transition: color 0.3s ease;
}

.close-life-craft:hover {
    color: #e94560;
}

.life-craft-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.craft-recipe-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.craft-recipe-card:hover:not(.disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: #a855f7;
    transform: translateY(-2px);
}

.craft-recipe-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.recipe-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.recipe-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.craft-recipe-icon.item-art,
.craft-recipe-icon.item-art-fallback {
    --item-art-size: 38px;
}

.craft-recipe-icon.item-art-image {
    display: block;
}

.recipe-name {
    font-weight: bold;
    font-size: 1.1em;
    overflow-wrap: anywhere;
}

.recipe-rarity {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.85em;
}

.recipe-materials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.material-item {
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    font-size: 0.9em;
}

.material-item.has {
    color: #4ecdc4;
}

.material-item.lack {
    color: #e94560;
}

.recipe-reward {
    display: flex;
    gap: 15px;
    font-size: 0.9em;
}

.exp-reward {
    color: #4ecdc4;
}

.price-reward {
    color: #f7b731;
}

.heal-reward {
    color: #e94560;
}

.success-rate {
    font-weight: bold;
    font-size: 0.95em;
}

.life-skill-action-row,
.life-craft-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.life-skill-action-btn {
    flex: 1 1 92px;
    min-height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 9px;
    color: #f8fbfc;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.life-skill-action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.life-skill-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.life-skill-action-btn--normal {
    background: linear-gradient(135deg, #243945, #31505d);
}

.life-skill-action-btn--focus {
    background: linear-gradient(135deg, #9b6b21, #d6a443);
    color: #1b1408;
    border-color: rgba(255, 210, 122, 0.62);
}

.life-mini-game-box {
    width: min(96vw, 1160px);
    max-height: min(92vh, 860px);
    overflow-y: auto;
    padding: 18px 20px;
    border: 1px solid rgba(255, 210, 122, 0.28);
    background:
        radial-gradient(circle at 15% 5%, rgba(255, 210, 122, 0.12), transparent 32%),
        linear-gradient(180deg, rgba(20, 31, 38, 0.98), rgba(9, 14, 18, 0.98));
}

.life-mini-game-box h3 {
    margin: 0 34px 10px;
    font-size: 1.18em;
    line-height: 1.25;
}

.life-mini-game-content {
    margin-top: 10px;
}

.life-mini-loading {
    min-height: min(64vh, 560px);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 16px;
    padding: 34px 24px;
    border: 1px solid rgba(255, 210, 122, 0.22);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(13, 28, 30, 0.96), rgba(36, 32, 24, 0.96)),
        repeating-linear-gradient(90deg, rgba(255, 210, 122, 0.04) 0 1px, transparent 1px 44px);
    box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.28);
    text-align: center;
}

.life-mini-loading__seal {
    width: 76px;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 210, 122, 0.72);
    border-radius: 50%;
    background:
        linear-gradient(45deg, transparent 45%, rgba(255, 210, 122, 0.62) 46% 54%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, rgba(125, 207, 155, 0.5) 46% 54%, transparent 55%),
        rgba(8, 16, 18, 0.7);
    box-shadow: 0 0 22px rgba(255, 210, 122, 0.18);
    animation: lifeMiniLoadingSeal 1.6s linear infinite;
}

.life-mini-loading__copy {
    display: grid;
    gap: 6px;
}

.life-mini-loading__copy span,
.life-mini-loading__copy em,
.life-mini-loading__progress {
    color: #aebfc3;
    font-size: 0.88em;
    font-style: normal;
}

.life-mini-loading__copy strong {
    color: #f7f0d2;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    line-height: 1.2;
}

.life-mini-loading__copy em {
    min-height: 1.2em;
}

.life-mini-loading__bar {
    width: min(520px, 92%);
    height: 12px;
    padding: 2px;
    border: 1px solid rgba(255, 210, 122, 0.34);
    border-radius: 999px;
    background: rgba(5, 10, 12, 0.72);
    overflow: hidden;
}

.life-mini-loading__bar i {
    display: block;
    height: 100%;
    min-width: 6px;
    border-radius: inherit;
    background: linear-gradient(90deg, #7dcf9b, #ffd27a, #d79a48);
    transition: width 0.18s ease;
}

.life-mini-loading__progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(70px, auto));
    justify-content: center;
    gap: 10px;
}

.life-mini-loading__progress span,
.life-mini-loading__progress b,
.life-mini-loading__progress em {
    min-width: 70px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.055);
    color: #f6f1d5;
    font-size: 0.9em;
    font-style: normal;
    font-weight: 800;
}

@keyframes lifeMiniLoadingSeal {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.life-mini-game-shell {
    display: grid;
    gap: 12px;
    text-align: left;
}

.life-mini-game-layout {
    display: grid;
    grid-template-columns: minmax(500px, 1fr) minmax(280px, 340px);
    gap: 14px;
    align-items: start;
}

.life-mini-game-main,
.life-mini-game-side {
    min-width: 0;
}

.life-mini-game-side {
    display: grid;
    align-content: start;
    gap: 10px;
    max-height: calc(92vh - 88px);
    overflow-y: auto;
    padding-right: 2px;
}

.life-mini-game-brief {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.045);
}

.life-mini-game-brief span {
    color: #ffd27a;
    font-size: 0.82em;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.life-mini-game-brief strong {
    color: #f8fbfc;
    font-size: 1.05em;
}

.life-mini-game-brief em {
    color: #9fb2bb;
    font-size: 0.85em;
    font-style: normal;
}

.life-mini-first-tip {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(125, 207, 155, 0.28);
    background: linear-gradient(135deg, rgba(32, 72, 62, 0.58), rgba(18, 30, 36, 0.72));
}

.life-mini-first-tip b {
    color: #8fe0af;
    font-size: 0.9em;
}

.life-mini-first-tip span {
    color: #dce7eb;
    font-size: 0.84em;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.life-mini-event-banner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr);
    align-items: center;
    gap: 8px 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 210, 122, 0.26);
    background: linear-gradient(135deg, rgba(72, 54, 30, 0.62), rgba(17, 28, 34, 0.78));
}

.life-mini-game-side .life-mini-event-banner {
    grid-template-columns: 1fr;
}

.life-mini-event-banner div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.life-mini-event-banner span {
    color: #ffd27a;
    font-size: 0.74em;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.life-mini-event-banner strong {
    color: #f8fbfc;
    font-size: 0.98em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.life-mini-event-banner em,
.life-mini-event-banner b {
    font-size: 0.82em;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.life-mini-event-banner em {
    color: #dce7eb;
    font-style: normal;
}

.life-mini-event-banner b {
    color: #ffe0a0;
}

.life-mini-event-banner--chance {
    border-color: rgba(125, 207, 155, 0.34);
    background: linear-gradient(135deg, rgba(32, 76, 58, 0.62), rgba(17, 28, 34, 0.78));
}

.life-mini-event-banner--chance span,
.life-mini-event-banner--chance b {
    color: #8fe0af;
}

.life-mini-event-banner--risk {
    border-color: rgba(255, 130, 108, 0.34);
    background: linear-gradient(135deg, rgba(82, 38, 32, 0.64), rgba(17, 28, 34, 0.8));
}

.life-mini-event-banner--risk span,
.life-mini-event-banner--risk b {
    color: #ffb08e;
}

.life-mini-event-banner--rare {
    border-color: rgba(170, 135, 255, 0.42);
    background: linear-gradient(135deg, rgba(55, 45, 90, 0.64), rgba(17, 28, 34, 0.8));
}

.life-mini-event-banner--rare span,
.life-mini-event-banner--rare b {
    color: #c9b6ff;
}

.life-mini-game-stage {
    padding: 8px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.life-mini-game-svg {
    width: 100%;
    min-height: 210px;
    display: block;
}

.life-mini-score {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}

.life-mini-game-side .life-mini-score {
    grid-template-columns: minmax(0, 1fr) auto;
}

.life-mini-game-side .life-mini-score em {
    grid-column: 1 / -1;
}

.life-mini-score span {
    color: #aebdc4;
    font-size: 0.85em;
}

.life-mini-score strong {
    color: #ffd27a;
    font-size: 1.45em;
}

.life-mini-score em {
    color: #dce7eb;
    font-size: 0.88em;
    font-style: normal;
    overflow-wrap: anywhere;
}

.life-mini-settlement-hero {
    display: grid;
    gap: 7px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 210, 122, 0.32);
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 210, 122, 0.22), transparent 34%),
        linear-gradient(135deg, rgba(72, 48, 23, 0.88), rgba(18, 30, 36, 0.94));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.life-mini-settlement-hero--rare {
    border-color: rgba(125, 207, 155, 0.42);
    background:
        radial-gradient(circle at 18% 12%, rgba(125, 207, 155, 0.24), transparent 34%),
        linear-gradient(135deg, rgba(33, 79, 62, 0.88), rgba(18, 30, 36, 0.94));
}

.life-mini-settlement-hero--epic {
    border-color: rgba(170, 135, 255, 0.48);
    background:
        radial-gradient(circle at 18% 12%, rgba(170, 135, 255, 0.24), transparent 34%),
        linear-gradient(135deg, rgba(58, 44, 94, 0.88), rgba(18, 30, 36, 0.94));
}

.life-mini-settlement-hero--jackpot {
    border-color: rgba(255, 210, 122, 0.72);
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 230, 150, 0.3), transparent 34%),
        linear-gradient(135deg, rgba(120, 70, 26, 0.95), rgba(33, 42, 54, 0.96));
    animation: lifeMiniJackpotPulse 1.1s ease-in-out 2;
}

.life-mini-settlement-hero span {
    color: #ffd27a;
    font-size: 0.78em;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.life-mini-settlement-hero strong {
    color: #f8fbfc;
    font-size: 1.55em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.life-mini-settlement-hero em {
    color: #dce7eb;
    font-size: 0.92em;
    font-style: normal;
    line-height: 1.5;
}

.life-mini-settlement-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.life-mini-settlement-metrics div,
.life-mini-settlement-surprise,
.life-mini-settlement-chip,
.life-mini-settlement-boost-grid article {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
}

.life-mini-settlement-metrics div {
    display: grid;
    gap: 4px;
    padding: 10px;
    text-align: center;
}

.life-mini-settlement-metrics span,
.life-mini-settlement-chip span,
.life-mini-settlement-surprise span {
    color: #aebdc4;
    font-size: 0.82em;
    line-height: 1.45;
}

.life-mini-settlement-metrics strong {
    color: #ffd27a;
    font-size: 1.35em;
}

.life-mini-settlement-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.life-mini-settlement-compare div {
    display: grid;
    gap: 5px;
    padding: 11px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.055);
}

.life-mini-settlement-compare .life-mini-settlement-compare--boost {
    border-color: rgba(255, 210, 122, 0.34);
    background: linear-gradient(135deg, rgba(82, 58, 28, 0.72), rgba(28, 44, 48, 0.72));
}

.life-mini-settlement-compare span {
    color: #aebdc4;
    font-size: 0.78em;
    font-weight: 800;
}

.life-mini-settlement-compare strong {
    color: #f8fbfc;
    font-size: 1em;
    overflow-wrap: anywhere;
}

.life-mini-settlement-compare em {
    color: #dce7eb;
    font-size: 0.82em;
    font-style: normal;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.life-mini-settlement-boost-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
    gap: 8px;
}

.life-mini-settlement-boost-grid article {
    display: grid;
    gap: 4px;
    min-height: 86px;
    padding: 10px 11px;
    border-color: rgba(255, 210, 122, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 210, 122, 0.08), rgba(116, 216, 191, 0.055)),
        rgba(255, 255, 255, 0.05);
}

.life-mini-settlement-boost-grid span {
    color: #aebdc4;
    font-size: 0.76em;
    font-weight: 900;
}

.life-mini-settlement-boost-grid strong {
    color: #ffd27a;
    font-size: 1.22em;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.life-mini-settlement-boost-grid em {
    color: #dce7eb;
    font-size: 0.78em;
    font-style: normal;
    line-height: 1.38;
    overflow-wrap: anywhere;
}

.life-mini-surprise-reveal {
    display: grid;
    gap: 8px;
}

.life-mini-surprise-head {
    display: grid;
    gap: 5px;
    padding: 13px 14px;
    border: 1px solid rgba(255, 210, 122, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 210, 122, 0.12), rgba(116, 216, 191, 0.08)),
        rgba(255, 255, 255, 0.055);
}

.life-mini-surprise-head span {
    color: #ffd27a;
    font-size: 0.76em;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.life-mini-surprise-head strong {
    color: #f8fbfc;
    font-size: 1.18em;
    overflow-wrap: anywhere;
}

.life-mini-surprise-head em {
    color: #dce7eb;
    font-size: 0.82em;
    font-style: normal;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.life-mini-surprise-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.life-mini-surprise-card {
    position: relative;
    display: grid;
    gap: 4px;
    min-height: 84px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.life-mini-surprise-card--rare {
    border-color: rgba(125, 207, 155, 0.24);
}

.life-mini-surprise-card--epic {
    border-color: rgba(170, 135, 255, 0.28);
}

.life-mini-surprise-card--jackpot {
    border-color: rgba(255, 210, 122, 0.32);
}

.life-mini-surprise-card--won {
    border-color: rgba(255, 210, 122, 0.7);
    background:
        linear-gradient(135deg, rgba(255, 210, 122, 0.22), rgba(116, 216, 191, 0.1)),
        rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 1px rgba(255, 210, 122, 0.12), 0 12px 26px rgba(0, 0, 0, 0.22);
    animation: lifeMiniSurpriseFlip 0.55s ease-out both;
}

.life-mini-surprise-card--won::after {
    content: "开";
    position: absolute;
    right: 8px;
    top: 8px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffd27a;
    color: #213035;
    font-size: 0.76em;
    font-weight: 900;
}

.life-mini-surprise-card--locked {
    opacity: 0.58;
}

.life-mini-surprise-card span {
    color: #aebdc4;
    font-size: 0.76em;
    font-weight: 900;
}

.life-mini-surprise-card strong {
    color: #ffd27a;
    font-size: 1.08em;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.life-mini-surprise-card em {
    color: #dce7eb;
    font-size: 0.76em;
    font-style: normal;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.life-mini-surprise-odds {
    display: grid;
    gap: 5px;
    padding: 10px 12px;
    border-left: 3px solid #ffd27a;
    border-radius: 8px;
    background: rgba(255, 210, 122, 0.075);
}

.life-mini-surprise-odds b {
    color: #f8fbfc;
    font-size: 0.88em;
    overflow-wrap: anywhere;
}

.life-mini-surprise-odds span,
.life-mini-surprise-odds em {
    color: #dce7eb;
    font-size: 0.8em;
    font-style: normal;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.life-mini-progress-hooks {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 8px;
}

.life-mini-pity-meter,
.life-mini-field-journal {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(116, 216, 191, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(116, 216, 191, 0.08), rgba(255, 210, 122, 0.055)),
        rgba(255, 255, 255, 0.05);
}

.life-mini-pity-meter div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    align-items: center;
}

.life-mini-pity-meter span,
.life-mini-field-journal span {
    color: #aebdc4;
    font-size: 0.76em;
    font-weight: 900;
}

.life-mini-pity-meter strong,
.life-mini-field-journal strong {
    min-width: 0;
    color: #f8fbfc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-mini-pity-meter em,
.life-mini-field-journal em,
.life-mini-field-journal small {
    color: #dce7eb;
    font-size: 0.78em;
    font-style: normal;
    line-height: 1.38;
    overflow-wrap: anywhere;
}

.life-mini-pity-meter b {
    display: block;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
}

.life-mini-pity-meter b i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #74d8bf, #ffd27a);
    box-shadow: 0 0 16px rgba(255, 210, 122, 0.35);
}

.life-mini-pity-meter--ready {
    border-color: rgba(255, 210, 122, 0.42);
    box-shadow: 0 0 18px rgba(255, 210, 122, 0.1);
}

.life-mini-settlement-surprise {
    display: grid;
    gap: 5px;
    padding: 12px;
}

.life-mini-settlement-surprise b,
.life-mini-settlement-chip b {
    color: #f8fbfc;
    overflow-wrap: anywhere;
}

.life-mini-settlement-milestones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.life-mini-settlement-chip {
    display: grid;
    gap: 4px;
    padding: 10px;
}

@keyframes lifeMiniJackpotPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    45% { transform: scale(1.015); filter: brightness(1.18); }
}

@keyframes lifeMiniSurpriseFlip {
    0% { transform: translateY(5px) scale(0.985); filter: brightness(0.92); }
    100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

.life-mini-game-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.life-mini-primary,
.life-mini-choice,
.life-mini-secondary {
    border: 0;
    border-radius: 10px;
    min-height: 40px;
    padding: 9px 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.life-mini-primary:hover,
.life-mini-choice:hover,
.life-mini-secondary:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.life-mini-primary:disabled,
.life-mini-choice:disabled,
.life-mini-secondary:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    transform: none;
    filter: grayscale(0.25);
}

.life-mini-primary {
    flex: 1 1 100%;
    color: #1b1408;
    background: linear-gradient(135deg, #ffd27a, #d39a35);
}

.life-mini-choice {
    flex: 1 1 120px;
    color: #f8fbfc;
    background: linear-gradient(135deg, #24434f, #315e69);
    border: 1px solid rgba(126, 205, 220, 0.25);
}

.life-mini-sequence-hint {
    flex: 1 1 100%;
    color: #ffd27a;
    font-size: 0.9em;
    font-weight: 700;
}

.life-orchard-catch {
    display: grid;
    gap: 10px;
    color: #edf8ee;
}

.life-orchard-head,
.life-orchard-hud,
.life-orchard-meter {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(8, 20, 17, 0.68);
}

.life-orchard-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 10px;
    align-items: center;
    padding: 8px 10px;
}

.life-orchard-head strong {
    color: #f8fbfc;
    font-size: 1em;
}

.life-orchard-head span {
    color: #ffd27a;
    font-weight: 900;
}

.life-orchard-head b,
.life-orchard-meter b {
    grid-column: 1 / -1;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.life-orchard-head i,
.life-orchard-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6fcf75, #ffd27a, #f08252);
    transition: width 0.18s ease;
}

.life-orchard-hud {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
}

.life-orchard-hud span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 7px 8px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
    color: #aec6ba;
    font-size: 0.78em;
}

.life-orchard-hud b {
    color: #fff3bf;
    font-size: 1.15em;
}

.life-orchard-meter {
    display: grid;
    grid-template-columns: auto minmax(110px, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    color: #ffd27a;
    font-weight: 800;
}

.life-orchard-meter b {
    grid-column: auto;
}

.life-orchard-meter em {
    color: #b9d7c2;
    font-size: 0.82em;
    font-style: normal;
}

.life-orchard-shake-meter i {
    background: linear-gradient(90deg, #7edcff, #fff3a8, #ff9f6e);
    box-shadow: 0 0 14px rgba(126, 220, 255, 0.22);
}

.life-orchard-catch--shake-ready .life-orchard-shake-meter {
    border-color: rgba(126, 220, 255, 0.46);
    box-shadow: 0 0 18px rgba(126, 220, 255, 0.12);
}

.life-orchard-field {
    position: relative;
    min-height: 360px;
    height: min(54vh, 520px);
    overflow: hidden;
    border: 1px solid rgba(126, 205, 146, 0.2);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(7, 14, 15, 0.08), rgba(7, 14, 15, 0.38)),
        url("images/business/harvest/jiangnan-orchard-stages-centered-v1.png") center 42% / cover no-repeat,
        linear-gradient(180deg, #243d2f, #12241e 56%, #2c2617);
    box-shadow: inset 0 -28px 52px rgba(0, 0, 0, 0.42);
    touch-action: none;
}

.life-orchard-field::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at 24% 20%, rgba(255, 243, 168, 0.28), transparent 18%),
        radial-gradient(circle at 73% 24%, rgba(126, 220, 255, 0.2), transparent 20%);
}

.life-orchard-catch--shake .life-orchard-field::after {
    animation: lifeOrchardBurstGlow 0.72s ease-in-out 0s 4 both;
}

.life-orchard-canopy {
    position: absolute;
    inset: 0 0 52% 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(18, 55, 34, 0.68), rgba(18, 55, 34, 0.08)),
        repeating-linear-gradient(115deg, rgba(255, 210, 122, 0.08) 0 6px, transparent 6px 18px);
}

.life-orchard-catch--shake .life-orchard-canopy {
    animation: lifeOrchardShake 0.18s ease-in-out 0s 16;
}

.life-orchard-item {
    position: absolute;
    top: -12%;
    left: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 34px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #142014;
    font-size: 13px;
    font-weight: 900;
    text-shadow: 0 1px rgba(255, 255, 255, 0.42);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.34);
    animation: lifeOrchardFall var(--fall-duration, 5200ms) linear var(--fall-delay, 0ms) both;
    will-change: top, transform, opacity;
}

.life-orchard-item--ordinary {
    background: radial-gradient(circle at 35% 28%, #d8ffd1, #68b966 58%, #2f7d45);
}

.life-orchard-item--ripe {
    background: radial-gradient(circle at 35% 28%, #fff2bd, #f0a947 58%, #b95632);
}

.life-orchard-item--golden {
    width: 42px;
    background: radial-gradient(circle at 34% 24%, #fff9c8, #ffd257 52%, #c77b17);
    box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.24), 0 8px 22px rgba(255, 184, 65, 0.36);
}

.life-orchard-item--bug {
    background: radial-gradient(circle at 34% 24%, #f8c4a3, #a94a42 58%, #5d2630);
    color: #fff0df;
    text-shadow: 0 1px rgba(0, 0, 0, 0.5);
}

.life-orchard-item--branch {
    width: 40px;
    border-radius: 14px 6px;
    background: linear-gradient(135deg, #845735, #3b291d);
    color: #f3dac1;
    transform-origin: center;
}

.life-orchard-item--pad {
    border-radius: 10px;
    background: linear-gradient(135deg, #bfe3a1, #68965f);
}

.life-orchard-item--caught,
.life-orchard-item--missed {
    opacity: 0;
    pointer-events: none;
    animation-play-state: paused;
}

.life-orchard-basket {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 5;
    height: 46px;
    transform: translateX(-50%);
    transition: left 0.08s linear, width 0.12s ease;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.42));
}

.life-orchard-basket span {
    display: block;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(255, 210, 122, 0.78);
    border-top: 0;
    border-radius: 0 0 22px 22px;
    background:
        repeating-linear-gradient(90deg, rgba(122, 76, 30, 0.72) 0 8px, rgba(205, 143, 65, 0.72) 8px 16px),
        linear-gradient(180deg, rgba(255, 210, 122, 0.4), rgba(89, 53, 24, 0.78));
}

.life-orchard-basket--stable span {
    border-color: rgba(163, 229, 255, 0.85);
    box-shadow: 0 0 20px rgba(145, 220, 255, 0.22);
}

.life-orchard-basket--frenzy span {
    border-color: rgba(255, 243, 168, 0.95);
    box-shadow: 0 0 22px rgba(255, 210, 122, 0.34), inset 0 0 18px rgba(255, 210, 122, 0.18);
}

.life-orchard-status {
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 210, 122, 0.18);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    color: #ffd27a;
    font-weight: 800;
}

.life-orchard-catch--frenzy .life-orchard-field {
    border-color: rgba(255, 210, 122, 0.55);
    filter: saturate(1.1) brightness(1.05);
}

.life-orchard-shake-button--ready {
    border-color: rgba(126, 220, 255, 0.54);
    background: linear-gradient(180deg, rgba(43, 96, 108, 0.92), rgba(24, 66, 77, 0.92));
    color: #f8fbfc;
    box-shadow: 0 0 18px rgba(126, 220, 255, 0.18);
}

@keyframes lifeOrchardFall {
    0% {
        top: -12%;
        opacity: 0;
        transform: translateX(-50%) scale(0.9);
    }
    8% {
        opacity: 1;
    }
    86% {
        opacity: 1;
    }
    100% {
        top: 94%;
        opacity: 0.92;
        transform: translateX(calc(-50% + var(--fall-drift, 0px))) scale(1.04);
    }
}

@keyframes lifeOrchardShake {
    0%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-7px);
    }
    50% {
        transform: translateX(5px);
    }
    75% {
        transform: translateX(-3px);
    }
}

@keyframes lifeOrchardBurstGlow {
    0%,
    100% {
        opacity: 0;
    }
    45% {
        opacity: 1;
    }
}

.life-orchard-match {
    display: grid;
    gap: 10px;
    color: #edf8ee;
}

.life-orchard-match-head,
.life-orchard-match-stats,
.life-orchard-match-orders,
.life-orchard-match-feedback {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(8, 20, 17, 0.72);
}

.life-orchard-match-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 9px 10px;
}

.life-orchard-match-head strong {
    min-width: 0;
    color: #f8fbfc;
    font-size: 1em;
}

.life-orchard-match-head span,
.life-orchard-match-head em {
    color: #ffd27a;
    font-style: normal;
    font-weight: 900;
}

.life-orchard-match-stats,
.life-orchard-match-orders {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
}

.life-orchard-match-orders {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.life-orchard-match-stats span,
.life-orchard-match-orders span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 7px 8px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
    color: #aec6ba;
    font-size: 0.78em;
}

.life-orchard-match-stats b,
.life-orchard-match-orders i {
    color: #fff3bf;
    font-size: 1.14em;
    font-style: normal;
    font-weight: 900;
}

.life-orchard-match-grid {
    display: grid;
    grid-template-columns: repeat(var(--orchard-match-size, 7), minmax(0, 1fr));
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(126, 205, 146, 0.2);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(7, 14, 15, 0.22), rgba(7, 14, 15, 0.5)),
        url("images/business/harvest/jiangnan-orchard-stages-centered-v1.png") center 42% / cover no-repeat,
        linear-gradient(180deg, #243d2f, #12241e 56%, #2c2617);
    box-shadow: inset 0 -28px 52px rgba(0, 0, 0, 0.42);
}

.life-orchard-match-cell {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    color: #f8fbfc;
    font: inherit;
    overflow: hidden;
}

.life-orchard-match-tile {
    gap: 2px;
    padding: 4px;
    background: rgba(11, 34, 27, 0.86);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.life-orchard-match-tile:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 210, 122, 0.45);
}

.life-orchard-match-tile b {
    display: grid;
    place-items: center;
    width: min(38px, 72%);
    aspect-ratio: 1;
    border-radius: 50%;
    font-size: clamp(0.82rem, 1.5vw, 1rem);
    font-weight: 900;
    color: #152018;
    text-shadow: 0 1px rgba(255, 255, 255, 0.38);
}

.life-orchard-match-tile span,
.life-orchard-match-cell--blocker span {
    max-width: 100%;
    overflow: hidden;
    color: rgba(237, 248, 238, 0.82);
    font-size: 0.66em;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-orchard-match-tile--selected {
    border-color: rgba(255, 210, 122, 0.86);
    box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.18), 0 0 18px rgba(255, 210, 122, 0.16);
}

.life-orchard-match-tile--red b {
    background: radial-gradient(circle at 35% 28%, #ffd7d1, #e86458 58%, #8e2e34);
}

.life-orchard-match-tile--gold b {
    background: radial-gradient(circle at 35% 28%, #fff4bf, #e4b64c 58%, #9f6a19);
}

.life-orchard-match-tile--rose b {
    background: radial-gradient(circle at 35% 28%, #ffe0bd, #f09a74 58%, #a94b43);
}

.life-orchard-match-tile--violet b {
    background: radial-gradient(circle at 35% 28%, #ece0ff, #8e70d3 58%, #4d347f);
    color: #f8fbfc;
    text-shadow: 0 1px rgba(0, 0, 0, 0.42);
}

.life-orchard-match-tile--jade b {
    background: radial-gradient(circle at 35% 28%, #dcffd6, #72bd69 58%, #2e7948);
}

.life-orchard-match-tile--amber b {
    background: radial-gradient(circle at 35% 28%, #fff0c8, #f0a44d 58%, #b75a28);
}

.life-orchard-match-tile--sun b {
    background: radial-gradient(circle at 35% 28%, #fff9c8, #f4ca4f 58%, #a97516);
}

.life-orchard-match-tile--fire b {
    background: radial-gradient(circle at 35% 28%, #ffd6ad, #e86535 58%, #8e3220);
}

.life-orchard-match-tile--ruby b {
    background: radial-gradient(circle at 35% 28%, #ffd3d9, #c83b56 58%, #681c39);
    color: #fff7f3;
    text-shadow: 0 1px rgba(0, 0, 0, 0.42);
}

.life-orchard-match-tile--chestnut b {
    background: radial-gradient(circle at 35% 28%, #efd5ac, #9d643c 58%, #4f2c1e);
    color: #fff4df;
    text-shadow: 0 1px rgba(0, 0, 0, 0.42);
}

.life-orchard-match-tile--magenta b {
    background: radial-gradient(circle at 35% 28%, #ffe0f2, #d85d9f 58%, #72275d);
    color: #fff7fb;
    text-shadow: 0 1px rgba(0, 0, 0, 0.42);
}

.life-orchard-match-tile--mint b {
    background: radial-gradient(circle at 35% 28%, #e4fff4, #65cfa1 58%, #287a62);
}

.life-orchard-match-tile--special {
    border-color: rgba(255, 243, 168, 0.6);
}

.life-orchard-match-tile--special::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(255, 243, 168, 0.44);
    border-radius: 7px;
    pointer-events: none;
}

.life-orchard-match-tile--line::after {
    background:
        linear-gradient(90deg, transparent 0 18%, rgba(255, 243, 168, 0.7) 18% 24%, transparent 24% 42%, rgba(255, 243, 168, 0.62) 42% 58%, transparent 58% 76%, rgba(255, 243, 168, 0.7) 76% 82%, transparent 82% 100%);
}

.life-orchard-match-tile--bomb::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 236, 0.92), rgba(255, 210, 122, 0.34) 42%, transparent 70%);
    pointer-events: none;
}

.life-orchard-match-tile--bomb {
    box-shadow: 0 0 20px rgba(255, 210, 122, 0.24);
}

.life-orchard-match-cell--blocker {
    gap: 2px;
    padding: 4px;
    background: linear-gradient(135deg, rgba(104, 71, 39, 0.94), rgba(44, 31, 21, 0.96));
    color: #f3dac1;
}

.life-orchard-match-cell--blocker b {
    font-weight: 900;
}

.life-orchard-match-cell--empty {
    opacity: 0.35;
    background: rgba(255, 255, 255, 0.04);
}

.life-orchard-match-feedback {
    min-height: 34px;
    padding: 8px 10px;
    color: #ffd27a;
    font-weight: 800;
}

.life-orchard-match--perfect .life-orchard-match-feedback {
    border-color: rgba(255, 210, 122, 0.42);
    box-shadow: 0 0 18px rgba(255, 210, 122, 0.12);
}

.life-orchard-match--miss .life-orchard-match-feedback {
    border-color: rgba(255, 125, 96, 0.42);
    color: #ffb59c;
}

.life-orchard-drop {
    position: relative;
    display: grid;
    gap: 10px;
    overflow: hidden;
    padding: 10px;
    border: 1px solid rgba(125, 207, 155, 0.24);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(7, 14, 15, 0.22), rgba(7, 14, 15, 0.5)),
        url("images/life-mini/orchard-drop/backgrounds/orchard-survival-bg-gpt-image2-v1.png?v=20260622-orchard-survival-bg-v1") center / cover no-repeat,
        linear-gradient(180deg, #243d2f, #12241e 56%, #2c2617);
    isolation: isolate;
}

.life-orchard-drop-head,
.life-orchard-drop-sky,
.life-orchard-drop-keymap,
.life-orchard-drop-stats,
.life-orchard-drop-orders,
.life-orchard-drop-feedback {
    border: 1px solid rgba(125, 207, 155, 0.18);
    border-radius: 8px;
    background: rgba(8, 22, 20, 0.78);
}

.life-orchard-drop-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
}

.life-orchard-drop-head strong {
    color: #f6f1d5;
    font-weight: 900;
}

.life-orchard-drop-head span,
.life-orchard-drop-head em {
    color: #ffd27a;
    font-style: normal;
    font-weight: 900;
}

.life-orchard-drop-sky {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 104px;
    gap: 8px;
    align-items: stretch;
    padding: 8px;
}

.life-orchard-drop-sky--survival {
    grid-template-columns: 96px minmax(0, 1fr) 96px;
    padding: 6px;
}

.life-orchard-drop-preview {
    display: grid;
    grid-template-rows: auto 54px auto;
    gap: 4px;
    place-items: center;
    min-width: 0;
    border: 1px solid rgba(255, 210, 122, 0.18);
    border-radius: 8px;
    background: rgba(5, 15, 17, 0.62);
}

.life-orchard-drop-preview span,
.life-orchard-drop-preview em {
    max-width: 100%;
    overflow: hidden;
    color: rgba(236, 247, 236, 0.86);
    font-size: 0.72em;
    font-style: normal;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-orchard-drop-preview--current {
    border-color: rgba(255, 210, 122, 0.46);
    box-shadow: 0 0 18px rgba(255, 210, 122, 0.16);
}

.life-orchard-drop-piece-preview {
    display: grid;
    grid-template-columns: repeat(var(--orchard-piece-length, 1), 30px);
    gap: 2px;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.life-orchard-drop-piece-preview .life-orchard-drop-fruit {
    width: 30px;
    height: 30px;
}

.life-orchard-drop-fruit,
.life-orchard-drop-tile b {
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #152018;
    font-weight: 900;
    text-shadow: 0 1px rgba(255, 255, 255, 0.38);
}

.life-orchard-drop-fruit {
    width: 54px;
    height: 54px;
    font-size: 1rem;
}

.life-orchard-drop-fruit-img {
    display: block;
    width: 118%;
    height: 118%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.28));
}

.life-orchard-drop-lanes {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
    align-self: center;
}

.life-orchard-drop-lane {
    display: grid;
    gap: 3px;
    place-items: center;
    min-height: 58px;
    border: 1px solid rgba(125, 207, 155, 0.28);
    border-radius: 8px;
    color: #f6f1d5;
    background:
        linear-gradient(180deg, rgba(116, 216, 191, 0.12), transparent 34%),
        rgba(7, 20, 19, 0.7);
    font: inherit;
    font-weight: 900;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.life-orchard-drop-lane b,
.life-orchard-drop-lane span {
    line-height: 1;
}

.life-orchard-drop-lane span {
    color: rgba(236, 247, 236, 0.72);
    font-size: 0.66em;
}

.life-orchard-drop-lane--selected,
.life-orchard-drop-lane--hint,
.life-orchard-drop-lane--active {
    transform: translateY(-1px);
    border-color: rgba(255, 210, 122, 0.76);
    box-shadow: inset 0 -18px 28px rgba(255, 210, 122, 0.12), 0 0 16px rgba(255, 210, 122, 0.14);
}

.life-orchard-drop-lane--active {
    border-color: rgba(116, 216, 191, 0.82);
    box-shadow: inset 0 -18px 28px rgba(116, 216, 191, 0.12), 0 0 16px rgba(116, 216, 191, 0.16);
}

.life-orchard-drop-keymap {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 7px 8px;
}

.life-orchard-drop-keymap span,
.life-orchard-drop-action-note {
    min-width: 0;
    overflow: hidden;
    color: rgba(236, 247, 236, 0.84);
    font-size: 0.72em;
    font-weight: 900;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-orchard-drop-action-note {
    padding: 8px 10px;
    border: 1px solid rgba(125, 207, 155, 0.18);
    border-radius: 8px;
    background: rgba(8, 22, 20, 0.62);
}

.life-orchard-drop-stats,
.life-orchard-drop-orders {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
}

.life-orchard-drop-orders {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.life-orchard-drop-stats span,
.life-orchard-drop-orders span {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: rgba(224, 242, 238, 0.82);
    font-size: 0.76em;
    font-weight: 800;
}

.life-orchard-drop-stats b,
.life-orchard-drop-orders i {
    color: #ffd27a;
    font-size: 1.12em;
    font-style: normal;
    font-weight: 900;
}

.life-orchard-drop-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--orchard-drop-cols, var(--orchard-drop-size, 7)), minmax(0, 1fr));
    gap: 6px;
    overflow: hidden;
    padding: 10px;
    border: 1px solid rgba(125, 207, 155, 0.3);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(7, 14, 15, 0.22), rgba(7, 14, 15, 0.5)),
        rgba(4, 15, 13, 0.58);
}

.life-orchard-drop--survival .life-orchard-drop-grid {
    width: min(100%, 370px);
    justify-self: center;
    gap: 3px;
    padding: 7px;
}

.life-orchard-drop--shake .life-orchard-drop-grid {
    animation: lifeOrchardDropShake 190ms ease-in-out both;
}

.life-orchard-drop--phase-clearing .life-orchard-drop-grid {
    box-shadow:
        0 0 0 1px rgba(255, 210, 122, 0.22),
        0 0 26px rgba(255, 210, 122, 0.15);
}

.life-orchard-drop-cell {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    color: #f8fbfc;
    font: inherit;
    overflow: hidden;
}

.life-orchard-drop-cell--empty {
    background:
        radial-gradient(circle at 50% 14%, rgba(255, 255, 255, 0.04), transparent 34%),
        rgba(5, 23, 18, 0.48);
}

.life-orchard-drop-cell--selected-column {
    border-color: rgba(255, 210, 122, 0.38);
    background-color: rgba(24, 49, 36, 0.66);
}

.life-orchard-drop-tile {
    gap: 2px;
    padding: 4px;
    background: rgba(11, 34, 27, 0.88);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    will-change: transform;
}

.life-orchard-drop--survival .life-orchard-drop-tile {
    padding: 2px;
}

.life-orchard-drop-tile--active-piece {
    border-color: rgba(116, 216, 191, 0.95);
    background: rgba(13, 45, 38, 0.88);
}

.life-orchard-drop-tile--falling {
    z-index: 2;
    border-color: rgba(116, 216, 191, 0.82);
    box-shadow: 0 0 18px rgba(116, 216, 191, 0.28);
    animation: lifeOrchardDropStep 110ms cubic-bezier(0.18, 0.9, 0.24, 1) both;
}

.life-orchard-drop-tile--clearing {
    z-index: 3;
    border-color: rgba(255, 243, 168, 0.88);
    box-shadow: 0 0 24px rgba(255, 210, 122, 0.42);
    animation: lifeOrchardDropClear 220ms ease-in-out infinite alternate;
}

.life-orchard-drop-tile--gravity {
    animation: lifeOrchardDropGravity 120ms cubic-bezier(0.18, 0.9, 0.24, 1) both;
}

.life-orchard-drop-tile b {
    width: min(68px, 78%);
    aspect-ratio: 1;
    font-size: clamp(0.82rem, 1.5vw, 1rem);
}

.life-orchard-drop--survival .life-orchard-drop-tile b {
    width: min(42px, 92%);
}

.life-orchard-drop-tile b .life-orchard-drop-fruit-img {
    width: 134%;
    height: 134%;
}

.life-orchard-drop-tile span {
    max-width: 100%;
    overflow: hidden;
    color: rgba(237, 248, 238, 0.82);
    font-size: 0.66em;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-orchard-drop--survival .life-orchard-drop-tile span {
    display: none;
}

.life-orchard-drop-fruit--red,
.life-orchard-drop-tile--red b {
    background: radial-gradient(circle at 35% 28%, #ffd7d1, #e86458 58%, #8e2e34);
}

.life-orchard-drop-fruit--gold,
.life-orchard-drop-tile--gold b {
    background: radial-gradient(circle at 35% 28%, #fff4bf, #e4b64c 58%, #9f6a19);
}

.life-orchard-drop-fruit--rose,
.life-orchard-drop-tile--rose b {
    background: radial-gradient(circle at 35% 28%, #ffe0bd, #f09a74 58%, #a94b43);
}

.life-orchard-drop-fruit--violet,
.life-orchard-drop-tile--violet b {
    color: #f8fbfc;
    background: radial-gradient(circle at 35% 28%, #ece0ff, #8e70d3 58%, #4d347f);
    text-shadow: 0 1px rgba(0, 0, 0, 0.42);
}

.life-orchard-drop-fruit--jade,
.life-orchard-drop-tile--jade b {
    background: radial-gradient(circle at 35% 28%, #dcffd6, #72bd69 58%, #2e7948);
}

.life-orchard-drop-fruit--amber,
.life-orchard-drop-tile--amber b {
    background: radial-gradient(circle at 35% 28%, #fff0c8, #f0a44d 58%, #b75a28);
}

.life-orchard-drop-fruit--sun,
.life-orchard-drop-tile--sun b {
    background: radial-gradient(circle at 35% 28%, #fff9c8, #f4ca4f 58%, #a97516);
}

.life-orchard-drop-fruit--fire,
.life-orchard-drop-tile--fire b {
    background: radial-gradient(circle at 35% 28%, #ffd6ad, #e86535 58%, #8e3220);
}

.life-orchard-drop-fruit--ruby,
.life-orchard-drop-tile--ruby b,
.life-orchard-drop-fruit--chestnut,
.life-orchard-drop-tile--chestnut b,
.life-orchard-drop-fruit--magenta,
.life-orchard-drop-tile--magenta b {
    color: #fff7f3;
    text-shadow: 0 1px rgba(0, 0, 0, 0.42);
}

.life-orchard-drop-fruit--ruby,
.life-orchard-drop-tile--ruby b {
    background: radial-gradient(circle at 35% 28%, #ffd3d9, #c83b56 58%, #681c39);
}

.life-orchard-drop-fruit--chestnut,
.life-orchard-drop-tile--chestnut b {
    background: radial-gradient(circle at 35% 28%, #efd5ac, #9d643c 58%, #4f2c1e);
}

.life-orchard-drop-fruit--magenta,
.life-orchard-drop-tile--magenta b {
    background: radial-gradient(circle at 35% 28%, #ffe0f2, #d85d9f 58%, #72275d);
}

.life-orchard-drop-fruit--mint,
.life-orchard-drop-tile--mint b {
    background: radial-gradient(circle at 35% 28%, #e4fff4, #65cfa1 58%, #287a62);
}

.life-orchard-drop-fruit.life-orchard-drop-fruit--image,
.life-orchard-drop-tile b.life-orchard-drop-fruit--image {
    background: transparent;
    box-shadow: none;
    color: inherit;
    text-shadow: none;
}

.life-orchard-drop-fruit.life-orchard-drop-fruit--image .life-orchard-drop-fruit-img {
    width: 118%;
    height: 118%;
    filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.28));
}

.life-orchard-drop-tile b.life-orchard-drop-fruit--image .life-orchard-drop-fruit-img {
    width: 124%;
    height: 124%;
    filter: drop-shadow(0 8px 7px rgba(0, 0, 0, 0.3));
}

.life-orchard-drop-tile--special {
    border-color: rgba(255, 243, 168, 0.6);
}

.life-orchard-drop-tile--special::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(255, 243, 168, 0.44);
    border-radius: 7px;
    pointer-events: none;
}

.life-orchard-drop-tile--line::after {
    background:
        linear-gradient(90deg, transparent 0 18%, rgba(255, 243, 168, 0.7) 18% 24%, transparent 24% 42%, rgba(255, 243, 168, 0.62) 42% 58%, transparent 58% 76%, rgba(255, 243, 168, 0.7) 76% 82%, transparent 82% 100%);
}

.life-orchard-drop-tile--bomb {
    box-shadow: 0 0 20px rgba(255, 210, 122, 0.24);
}

.life-orchard-drop-tile--bomb::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 236, 0.92), rgba(255, 210, 122, 0.34) 42%, transparent 70%);
    pointer-events: none;
}

.life-orchard-drop-fx-layer {
    position: absolute;
    inset: 0;
    z-index: 8;
    overflow: hidden;
    border-radius: 8px;
    pointer-events: none;
}

.life-orchard-drop-particle,
.life-orchard-drop-order-fly,
.life-orchard-drop-combo-pop,
.life-orchard-drop-special-fx {
    position: absolute;
    left: var(--fx-x, 50%);
    top: var(--fx-y, 50%);
}

.life-orchard-drop-particle {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: var(--fx-color, #ffd27a);
    box-shadow:
        0 0 9px var(--fx-color, #ffd27a),
        0 0 18px rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%) scale(0.72);
    animation: lifeOrchardDropParticle 560ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
    animation-delay: var(--fx-delay, 0ms);
}

.life-orchard-drop-combo-pop {
    z-index: 3;
    padding: 4px 9px;
    border: 1px solid rgba(255, 243, 168, 0.62);
    border-radius: 999px;
    color: #fff2a8;
    background: rgba(18, 31, 27, 0.88);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), 0 0 18px rgba(255, 210, 122, 0.26);
    font-size: 0.8em;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    white-space: nowrap;
    transform: translate(-50%, -50%) scale(0.82);
    animation: lifeOrchardDropComboPop 660ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.life-orchard-drop-order-fly {
    z-index: 4;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border: 1px solid rgba(255, 243, 168, 0.54);
    border-radius: 50%;
    color: #fff2a8;
    background: radial-gradient(circle at 35% 28%, rgba(255, 255, 236, 0.92), rgba(255, 210, 122, 0.28) 58%, rgba(22, 42, 31, 0.84));
    box-shadow: 0 0 20px rgba(255, 210, 122, 0.2);
    font-size: 0.72em;
    font-weight: 900;
    transform: translate(-50%, -50%) scale(0.8);
    animation: lifeOrchardDropOrderFly 760ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
    animation-delay: var(--fx-delay, 0ms);
}

.life-orchard-drop-order-fly img {
    display: block;
    width: 142%;
    height: 142%;
    object-fit: contain;
}

.life-orchard-drop-order-fly--image {
    overflow: visible;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.life-orchard-drop-order-fly--image img {
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.28));
}

.life-orchard-drop-special-fx {
    z-index: 2;
    width: calc(100% / var(--orchard-drop-size, 7));
    height: calc(100% / var(--orchard-drop-size, 7));
    transform: translate(-50%, -50%);
}

.life-orchard-drop-special-fx::before,
.life-orchard-drop-special-fx::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.life-orchard-drop-special-fx--line::before {
    left: 50%;
    top: 50%;
    width: 560%;
    height: 8px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 236, 0.28) 10%, rgba(255, 243, 168, 0.94) 50%, rgba(255, 255, 236, 0.28) 90%, transparent);
    box-shadow: 0 0 20px rgba(255, 210, 122, 0.42);
    transform: translate(-50%, -50%) scaleX(0.12);
    animation: lifeOrchardDropLineFlash 500ms ease-out both;
}

.life-orchard-drop-special-fx--line.life-orchard-drop-special-fx--v::before {
    width: 8px;
    height: 560%;
    transform: translate(-50%, -50%) scaleY(0.12);
    animation-name: lifeOrchardDropLineFlashV;
}

.life-orchard-drop-special-fx--bomb::before {
    inset: -48%;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 236, 0.92) 0 12%, rgba(255, 210, 122, 0.54) 28%, rgba(255, 126, 69, 0.24) 48%, transparent 72%);
    box-shadow: 0 0 30px rgba(255, 210, 122, 0.38);
    transform: scale(0.42);
    animation: lifeOrchardDropBombFlash 580ms ease-out both;
}

.life-orchard-drop-feedback {
    min-height: 34px;
    padding: 8px 10px;
    color: #f6f1d5;
    font-size: 0.86em;
    font-weight: 800;
    line-height: 1.35;
}

.life-orchard-drop--perfect .life-orchard-drop-feedback {
    border-color: rgba(125, 207, 155, 0.4);
    color: #9be1af;
}

.life-orchard-drop--miss .life-orchard-drop-feedback {
    border-color: rgba(230, 128, 112, 0.36);
    color: #efa195;
}

@keyframes lifeOrchardDropStep {
    0% { opacity: 1; transform: translate(var(--orchard-step-x, 0%), var(--orchard-step-y, 0%)) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lifeOrchardDropClear {
    0% { filter: brightness(1); transform: scale(1); }
    100% { filter: brightness(1.48); transform: scale(1.08); }
}

@keyframes lifeOrchardDropGravity {
    0% { transform: translateY(-86%) scale(0.98); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes lifeOrchardDropShake {
    0% { transform: translateX(0); }
    24% { transform: translateX(-3px); }
    52% { transform: translateX(3px); }
    78% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

@keyframes lifeOrchardDropParticle {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.48);
    }
    16% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--fx-dx, 0px)), calc(-50% + var(--fx-dy, -24px))) scale(0.18);
    }
}

@keyframes lifeOrchardDropComboPop {
    0% {
        opacity: 0;
        transform: translate(-50%, -40%) scale(0.72);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -62%) scale(1.08);
    }
    74% {
        opacity: 1;
        transform: translate(-50%, -96%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -124%) scale(0.86);
    }
}

@keyframes lifeOrchardDropOrderFly {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.62);
    }
    14% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + 48px), calc(-50% - 78px)) scale(0.28);
    }
}

@keyframes lifeOrchardDropLineFlash {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(0.12);
    }
    26% {
        opacity: 1;
        transform: translate(-50%, -50%) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(1.08);
    }
}

@keyframes lifeOrchardDropLineFlashV {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleY(0.12);
    }
    26% {
        opacity: 1;
        transform: translate(-50%, -50%) scaleY(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleY(1.08);
    }
}

@keyframes lifeOrchardDropBombFlash {
    0% {
        opacity: 0;
        transform: scale(0.35);
    }
    30% {
        opacity: 1;
        transform: scale(1.12);
    }
    100% {
        opacity: 0;
        transform: scale(1.85);
    }
}

@media (max-width: 760px) {
    .life-orchard-drop-sky {
        grid-template-columns: 82px minmax(0, 1fr) 82px;
    }

    .life-orchard-drop-keymap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .life-orchard-drop {
        padding: 8px;
    }

    .life-orchard-drop-sky,
    .life-orchard-drop-head,
    .life-orchard-drop-stats {
        grid-template-columns: 1fr;
    }

    .life-orchard-drop-keymap {
        grid-template-columns: 1fr;
    }
}

.life-rhythm-stage,
.life-timing-board,
.life-balance-board,
.life-aim-board,
.life-mix-board,
.life-sequence-board,
.life-sort-board,
.life-link-board,
.life-probe-board {
    display: grid;
    gap: 12px;
    color: #dfe8ea;
}

.life-rhythm-header,
.life-timing-head,
.life-balance-head,
.life-aim-head,
.life-mix-head,
.life-sequence-head,
.life-sort-head,
.life-link-head,
.life-probe-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    align-items: center;
}

.life-rhythm-header span,
.life-rhythm-header em,
.life-timing-head span,
.life-balance-head span,
.life-balance-head em,
.life-aim-head span,
.life-aim-head em,
.life-aim-head i,
.life-mix-head span,
.life-sequence-head span,
.life-sequence-head em,
.life-sort-head span,
.life-link-head span,
.life-link-head em,
.life-probe-head span,
.life-probe-head em,
.life-probe-head i,
.life-probe-head small {
    color: #ffd27a;
    font-size: 0.82em;
    font-style: normal;
    font-weight: 800;
}

.life-rhythm-header strong,
.life-timing-head strong,
.life-balance-head strong,
.life-aim-head strong,
.life-mix-head strong,
.life-sequence-head strong,
.life-sort-head strong,
.life-link-head strong,
.life-probe-head strong {
    grid-column: 1 / -1;
    color: #f8fbfc;
    font-size: 0.98em;
}

.life-rhythm-stage {
    min-height: 0;
    padding: 12px;
    border: 1px solid rgba(255, 210, 122, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(12, 13, 11, 0.08), rgba(12, 13, 11, 0.58)),
        url("images/life-mini-games/rhythm-work-board-v1.png") center / cover no-repeat,
        #171815;
}

.life-sort-board {
    min-height: 0;
    padding: 12px;
    border: 1px solid rgba(125, 207, 155, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(20, 18, 12, 0.06), rgba(20, 18, 12, 0.46)),
        url("images/life-mini-games/sort-grade-board-v1.png") center / cover no-repeat,
        #201b12;
}

.life-rhythm-header,
.life-sort-head {
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(8, 12, 12, 0.58);
}

.life-rhythm-chart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
    gap: 8px;
}

.life-rhythm-note,
.life-sort-sample,
.life-sort-bin {
    border: 1px solid rgba(126, 205, 220, 0.22);
    border-radius: 8px;
    background: rgba(28, 51, 60, 0.92);
    color: #f8fbfc;
    cursor: pointer;
}

.life-rhythm-note {
    min-height: 64px;
    display: grid;
    place-items: center;
    gap: 2px;
    padding: 7px 6px;
}

.life-rhythm-note b {
    font-size: 1.5em;
    line-height: 1;
}

.life-rhythm-note span,
.life-sort-sample span,
.life-sort-bin span {
    color: #b8c9d0;
    font-size: 0.78em;
}

.life-rhythm-note--active,
.life-sort-sample--selected {
    border-color: rgba(255, 210, 122, 0.9);
    box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.16);
}

.life-rhythm-note--perfect,
.life-sort-sample--perfect {
    background: rgba(37, 85, 54, 0.96);
    border-color: rgba(125, 207, 155, 0.85);
}

.life-rhythm-note--great,
.life-rhythm-note--good,
.life-sort-sample--good {
    background: rgba(83, 60, 28, 0.96);
    border-color: rgba(255, 210, 122, 0.72);
}

.life-rhythm-note--miss,
.life-sort-sample--miss {
    background: rgba(87, 45, 42, 0.96);
    border-color: rgba(230, 128, 112, 0.78);
}

.life-rhythm-note--accent {
    border-color: rgba(255, 210, 122, 0.72);
    box-shadow: inset 0 0 18px rgba(255, 210, 122, 0.12);
}

.life-rhythm-note--hold {
    border-color: rgba(116, 216, 191, 0.66);
}

.life-rhythm-note--hold::after {
    content: "";
    width: 54%;
    height: 3px;
    border-radius: 999px;
    background: rgba(116, 216, 191, 0.72);
}

.life-rhythm-note:disabled,
.life-sort-sample:disabled {
    cursor: default;
}

.life-timing-board {
    min-height: 0;
    padding: 12px;
    border: 1px solid rgba(255, 210, 122, 0.2);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(12, 9, 7, 0.08), rgba(12, 9, 7, 0.62)),
        url("images/life-mini-games/timing-strike-board-v1.png") center / cover no-repeat,
        #19130f;
}

.life-timing-head {
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(18, 13, 9, 0.62);
}

.life-timing-workbench {
    min-height: 176px;
    display: grid;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 46%, rgba(255, 210, 122, 0.14), transparent 30%),
        rgba(18, 13, 9, 0.36);
}

.life-timing-wood-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr) auto;
    gap: 8px;
    align-items: center;
}

.life-timing-wood-progress,
.life-timing-wood-risk {
    position: relative;
    display: block;
    min-width: 0;
    height: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(18, 13, 9, 0.54);
}

.life-timing-wood-progress b,
.life-timing-wood-risk b {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 0.24s ease;
}

.life-timing-wood-progress b {
    background: linear-gradient(90deg, #74d8bf, #ffd27a);
    box-shadow: 0 0 16px rgba(255, 210, 122, 0.26);
}

.life-timing-wood-risk b {
    background: linear-gradient(90deg, rgba(255, 210, 122, 0.45), #e68070);
    box-shadow: 0 0 14px rgba(230, 128, 112, 0.22);
}

.life-timing-wood-progress em,
.life-timing-wood-risk em {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #f8fbfc;
    font-size: 0.76em;
    font-style: normal;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.life-timing-wood-status strong {
    min-width: 64px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 210, 122, 0.18);
    border-radius: 999px;
    color: #ffd27a;
    background: rgba(18, 13, 9, 0.62);
    font-size: 0.78em;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .life-timing-wood-status {
        grid-template-columns: 1fr;
    }

    .life-timing-wood-status strong {
        justify-self: stretch;
    }
}

.life-timing-track {
    position: relative;
    height: 46px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(43, 31, 22, 0.92), rgba(79, 55, 30, 0.88), rgba(43, 31, 22, 0.92));
}

.life-timing-track em,
.life-timing-runner {
    position: absolute;
    top: 7px;
    bottom: 7px;
    border-radius: 8px;
}

.life-timing-track em {
    background: rgba(255, 210, 122, 0.24);
    outline: 1px solid rgba(255, 210, 122, 0.72);
}

.life-timing-runner {
    width: 5px;
    background: #f6f1d5;
    box-shadow: 0 0 0 8px rgba(246, 241, 213, 0.13), 0 0 18px rgba(255, 210, 122, 0.42);
    transform: translateX(-50%);
    animation: none;
    will-change: transform;
}

.life-timing-runner--stopped {
    animation: none;
}

.life-timing-feedback {
    min-height: 24px;
    padding: 7px 10px;
    border-radius: 8px;
    color: #f8fbfc;
    background: rgba(18, 13, 9, 0.62);
    font-size: 0.88em;
    font-weight: 800;
    text-align: center;
}

.life-timing-board--perfect .life-timing-feedback {
    color: #9be1af;
}

.life-timing-board--good .life-timing-feedback {
    color: #ffd27a;
}

.life-timing-board--miss .life-timing-feedback {
    color: #efa195;
}

.life-balance-board {
    min-height: 0;
    padding: 12px;
    border: 1px solid rgba(92, 184, 202, 0.22);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(5, 13, 18, 0.08), rgba(5, 13, 18, 0.66)),
        url("images/life-mini-games/fishing-balance-board-v1.png") center / cover no-repeat,
        #101d24;
}

.life-balance-head {
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(8, 17, 22, 0.62);
}

.life-balance-head em {
    color: #7dcf9b;
}

.life-balance-water {
    position: relative;
    min-height: 178px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background:
        radial-gradient(circle at 22% 74%, rgba(116, 216, 191, 0.2), transparent 18%),
        linear-gradient(180deg, rgba(16, 47, 62, 0.24), rgba(10, 32, 42, 0.72));
}

.life-balance-water::before,
.life-balance-water::after {
    content: "";
    position: absolute;
    inset: 18% 8%;
    border-top: 1px solid rgba(191, 232, 236, 0.22);
    border-radius: 50%;
    transform: rotate(-9deg);
}

.life-balance-water::after {
    inset: 34% 18% 30% 14%;
    border-color: rgba(255, 210, 122, 0.2);
    transform: rotate(7deg);
}

.life-balance-fish {
    position: absolute;
    left: 16%;
    bottom: 22%;
    display: grid;
    min-width: 72px;
    justify-items: center;
    gap: 3px;
    transform: translateX(-50%);
    transition: left 0.2s ease;
}

.life-balance-fish b {
    display: grid;
    width: 44px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 999px 999px 999px 28px;
    color: #102029;
    background: linear-gradient(135deg, #dff6f1, #74d8bf);
    box-shadow: 0 0 22px rgba(116, 216, 191, 0.34);
}

.life-balance-fish span {
    max-width: 92px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #f8fbfc;
    background: rgba(8, 17, 22, 0.62);
    font-size: 0.72em;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-balance-line {
    position: absolute;
    right: 8%;
    bottom: 34%;
    height: 2px;
    max-width: 82%;
    background: linear-gradient(90deg, rgba(246, 241, 213, 0.06), rgba(246, 241, 213, 0.88));
    transform-origin: right center;
    transform: rotate(-17deg);
    transition: width 0.2s ease;
}

.life-balance-cue {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    display: grid;
    gap: 3px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(8, 17, 22, 0.66);
}

.life-balance-cue b {
    color: #ffd27a;
    font-size: 0.95em;
}

.life-balance-cue span {
    color: #dfe8ea;
    font-size: 0.82em;
}

.life-balance-meters {
    display: grid;
    gap: 9px;
}

.life-balance-meter {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 42px;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(8, 17, 22, 0.62);
}

.life-balance-meter span {
    color: #b8c9d0;
    font-size: 0.78em;
    font-weight: 800;
}

.life-balance-meter b {
    color: #ffd27a;
    font-size: 0.82em;
    text-align: right;
}

.life-balance-track {
    position: relative;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.life-balance-track i,
.life-balance-track em {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
}

.life-balance-track i {
    background: linear-gradient(90deg, #5cb8ca, #ffd27a);
}

.life-balance-track--tension em {
    background: rgba(125, 207, 155, 0.22);
    outline: 1px solid rgba(125, 207, 155, 0.42);
}

.life-balance-track--tension i {
    background: linear-gradient(90deg, #74d8bf, #ffd27a, #efa195);
}

.life-balance-feedback {
    min-height: 24px;
    padding: 7px 10px;
    border-radius: 8px;
    color: #f8fbfc;
    background: rgba(8, 17, 22, 0.62);
    font-size: 0.88em;
    font-weight: 800;
    text-align: center;
}

.life-balance-board--perfect .life-balance-feedback {
    color: #9be1af;
}

.life-balance-board--good .life-balance-feedback {
    color: #ffd27a;
}

.life-balance-board--miss .life-balance-feedback {
    color: #efa195;
}

.life-balance-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 8px;
    align-items: center;
    text-align: left;
}

.life-balance-action b {
    grid-row: 1 / 3;
    display: grid;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #18323a;
    background: #ffd27a;
    font-size: 0.82em;
}

.life-balance-action strong {
    color: #f8fbfc;
    font-size: 0.9em;
    line-height: 1.1;
}

.life-balance-action span {
    color: rgba(223, 232, 234, 0.76);
    font-size: 0.72em;
    line-height: 1.1;
}

.life-fishing-arcade {
    display: grid;
    gap: 10px;
    min-height: 0;
    padding: 12px;
    border: 1px solid rgba(92, 184, 202, 0.24);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(5, 13, 18, 0.18), rgba(5, 13, 18, 0.74)),
        url("images/life-mini-games/fishing-balance-board-v1.png") center / cover no-repeat,
        #10202a;
}

.life-fishing-arcade-hud {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(8, 17, 22, 0.68);
    color: #dfe8ea;
    font-weight: 800;
}

.life-fishing-arcade-hud span,
.life-fishing-arcade-hud em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-fishing-arcade-hud strong {
    color: #ffd27a;
    text-align: center;
}

.life-fishing-arcade-hud em {
    color: #7dcf9b;
    font-style: normal;
    text-align: right;
}

.life-fishing-arcade-water {
    position: relative;
    min-height: 286px;
    overflow: hidden;
    touch-action: none;
    cursor: crosshair;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background:
        radial-gradient(circle at 18% 82%, rgba(116, 216, 191, 0.22), transparent 18%),
        radial-gradient(circle at 80% 22%, rgba(255, 210, 122, 0.14), transparent 24%),
        linear-gradient(180deg, rgba(22, 74, 91, 0.48), rgba(9, 35, 48, 0.86));
}

.life-fishing-arcade-water::before,
.life-fishing-arcade-water::after {
    content: "";
    position: absolute;
    inset: 18% -8%;
    border-top: 1px solid rgba(191, 232, 236, 0.2);
    border-radius: 50%;
    transform: rotate(-4deg);
    pointer-events: none;
}

.life-fishing-arcade-water::after {
    inset: 50% -12% 18%;
    border-color: rgba(255, 210, 122, 0.16);
    transform: rotate(6deg);
}

.life-fishing-arcade-fish {
    position: absolute;
    z-index: 3;
    display: block;
    transform: translate(-50%, -50%) scaleX(var(--fish-dir, 1));
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
    animation: lifeFishingArcadeBob 1.6s ease-in-out infinite alternate;
}

.life-fishing-arcade-fish i {
    position: absolute;
    inset: 0;
    border-radius: 65% 35% 55% 45%;
    background:
        radial-gradient(circle at 24% 36%, rgba(255, 255, 255, 0.9) 0 7%, transparent 8%),
        linear-gradient(135deg, #dff6f1, #5cb8ca 56%, #244f67);
    box-shadow: inset -8px -5px 10px rgba(9, 35, 48, 0.28), 0 0 16px rgba(92, 184, 202, 0.22);
}

.life-fishing-arcade-fish i::after {
    content: "";
    position: absolute;
    right: -26%;
    top: 18%;
    width: 38%;
    height: 64%;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    background: inherit;
}

.life-fishing-arcade-fish b {
    position: absolute;
    left: 50%;
    bottom: -18px;
    min-width: 28px;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(8, 17, 22, 0.72);
    color: #ffd27a;
    font-size: 0.68em;
    line-height: 1;
    text-align: center;
    transform: translateX(-50%) scaleX(var(--fish-dir, 1));
}

.life-fishing-arcade-fish--tier-2 i {
    background:
        radial-gradient(circle at 24% 36%, rgba(255, 255, 255, 0.9) 0 7%, transparent 8%),
        linear-gradient(135deg, #e6e0ff, #8da1ff 56%, #3f4f88);
}

.life-fishing-arcade-fish--tier-3 i {
    background:
        radial-gradient(circle at 24% 36%, rgba(255, 255, 255, 0.92) 0 7%, transparent 8%),
        linear-gradient(135deg, #ffe8a6, #d99d36 58%, #6f3f19);
}

.life-fishing-arcade-fish--tier-4 i,
.life-fishing-arcade-fish--rare i {
    background:
        radial-gradient(circle at 24% 36%, rgba(255, 255, 255, 0.95) 0 7%, transparent 8%),
        linear-gradient(135deg, #fff4bd, #e46f61 48%, #6f2c73);
    box-shadow: inset -8px -5px 10px rgba(9, 35, 48, 0.24), 0 0 22px rgba(255, 210, 122, 0.42);
}

.life-fishing-arcade-origin {
    position: absolute;
    left: 50%;
    bottom: 4%;
    z-index: 5;
    width: 46px;
    height: 24px;
    border-radius: 999px 999px 10px 10px;
    background: linear-gradient(180deg, #ffd27a, #9b6b21);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    transform: translateX(-50%);
}

.life-fishing-arcade-line {
    position: absolute;
    left: 50%;
    bottom: calc(4% + 14px);
    z-index: 4;
    height: 2px;
    max-width: 44%;
    background: linear-gradient(90deg, rgba(255, 210, 122, 0.95), rgba(255, 255, 255, 0.08));
    transform-origin: left center;
    pointer-events: none;
}

.life-fishing-arcade-target,
.life-fishing-arcade-net {
    position: absolute;
    z-index: 4;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.life-fishing-arcade-target {
    border: 1px dashed rgba(255, 210, 122, 0.76);
    background: rgba(255, 210, 122, 0.08);
}

.life-fishing-arcade-net {
    border: 2px solid rgba(223, 246, 241, 0.86);
    background:
        repeating-radial-gradient(circle, rgba(223, 246, 241, 0.16) 0 3px, transparent 4px 8px),
        rgba(92, 184, 202, 0.12);
    animation: lifeFishingArcadeNet 0.56s ease-out both;
}

.life-fishing-arcade-net--miss {
    border-color: rgba(239, 161, 149, 0.78);
}

.life-fishing-arcade-feedback {
    min-height: 26px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #f8fbfc;
    background: rgba(8, 17, 22, 0.66);
    font-size: 0.88em;
    font-weight: 800;
    text-align: center;
}

.life-fishing-arcade--perfect .life-fishing-arcade-feedback {
    color: #9be1af;
}

.life-fishing-arcade--good .life-fishing-arcade-feedback {
    color: #ffd27a;
}

.life-fishing-arcade--miss .life-fishing-arcade-feedback {
    color: #efa195;
}

.life-fishing-arcade-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 8px;
    align-items: center;
    text-align: left;
}

.life-fishing-arcade-control b {
    grid-row: 1 / 3;
    display: grid;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #18323a;
    background: #ffd27a;
    font-size: 0.82em;
}

.life-fishing-arcade-control strong {
    color: #f8fbfc;
    font-size: 0.9em;
    line-height: 1.1;
}

.life-fishing-arcade-control span {
    color: rgba(223, 232, 234, 0.76);
    font-size: 0.72em;
    line-height: 1.1;
}

.life-fishing-arcade-cast {
    grid-column: 1 / -1;
}

.life-fishing-arcade--v2 {
    position: relative;
    isolation: isolate;
    display: block;
    min-height: clamp(320px, 52vh, 520px);
    padding: 0;
    overflow: hidden;
    cursor: crosshair;
    touch-action: none;
    border-color: rgba(92, 184, 202, 0.36);
    background: #06131a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 18px 42px rgba(0, 0, 0, 0.28);
}

.life-fishing-arcade-canvas {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    background: #06131a;
    touch-action: none;
}

.life-fishing-arcade-hud--v2 {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 12px;
    left: 12px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    background: linear-gradient(180deg, rgba(5, 14, 19, 0.9), rgba(8, 24, 32, 0.72));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(8px);
}

.life-fishing-arcade-hud--v2 span,
.life-fishing-arcade-hud--v2 em,
.life-fishing-arcade-hud--v2 strong {
    text-align: center;
}

.life-fishing-arcade-hud--v2 [data-fishing-hud="wave"] {
    color: #9de7ff;
}

.life-fishing-arcade-hud--v2 [data-fishing-hud="multiplier"],
.life-fishing-arcade-hud--v2 [data-fishing-hud="best"] {
    color: #ffd27a;
}

.life-fishing-arcade-charge {
    position: absolute;
    z-index: 2;
    top: 58px;
    right: 16px;
    display: grid;
    grid-template-columns: auto 128px;
    gap: 8px;
    align-items: center;
    padding: 6px 9px;
    border: 1px solid rgba(255, 210, 122, 0.28);
    border-radius: 8px;
    background: rgba(5, 14, 19, 0.72);
    color: #ffd27a;
    font-size: 0.8em;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(8px);
}

.life-fishing-arcade-charge i,
.life-fishing-arcade-side-charge i {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.life-fishing-arcade-charge b,
.life-fishing-arcade-side-charge b {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7dcf9b, #ffd27a 62%, #ff8a66);
    box-shadow: 0 0 14px rgba(255, 210, 122, 0.45);
    transition: width 0.18s ease;
}

.life-fishing-arcade--v2 .life-fishing-arcade-feedback {
    position: absolute;
    z-index: 2;
    right: 12px;
    bottom: 10px;
    left: 12px;
    min-height: 0;
    background: linear-gradient(180deg, rgba(5, 14, 19, 0.72), rgba(8, 24, 32, 0.9));
    box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
}

#life-mini-game-dialog .life-mini-game-box:has(.life-mini-game-shell--fishingArcade) {
    width: min(1500px, calc(100vw - 32px));
    max-height: calc(100vh - 24px);
    padding: 20px 24px 24px;
}

.life-mini-game-shell--fishingArcade {
    display: block;
}

.life-mini-game-shell--fishingArcade .life-mini-game-layout {
    grid-template-columns: minmax(760px, 1fr) 360px;
    gap: 18px;
    align-items: stretch;
}

.life-mini-game-shell--fishingArcade .life-mini-game-main {
    min-width: 0;
}

.life-mini-game-shell--fishingArcade .life-mini-game-side {
    gap: 12px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

.life-mini-game-shell--fishingArcade .life-fishing-arcade--v2 {
    min-height: clamp(520px, 66vh, 650px);
    border-radius: 8px;
}

.life-mini-game-shell--fishingArcade .life-mini-game-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.life-mini-game-shell--fishingArcade .life-mini-primary,
.life-mini-game-shell--fishingArcade .life-mini-secondary {
    width: 100%;
    min-height: 48px;
    border-radius: 8px;
    font-size: 0.95em;
}

.life-fishing-arcade-side-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.life-fishing-arcade-side-status > div {
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(8, 17, 22, 0.72);
}

.life-fishing-arcade-side-status strong {
    display: block;
    overflow: hidden;
    color: #ffd27a;
    font-size: 1em;
    font-weight: 900;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-fishing-arcade-side-status span {
    display: block;
    margin-top: 4px;
    color: rgba(223, 232, 234, 0.72);
    font-size: 0.72em;
    font-weight: 800;
}

.life-fishing-arcade-side-charge {
    grid-column: 1 / -1;
}

.life-fishing-arcade-side-charge i {
    margin-top: 8px;
}

.life-fishing-arcade-super {
    border-color: rgba(255, 210, 122, 0.55);
    color: #102128;
    background: linear-gradient(180deg, #ffe08b, #e2aa3e);
    box-shadow: 0 12px 24px rgba(226, 170, 62, 0.18);
}

.life-fishing-arcade-super:disabled {
    color: rgba(223, 232, 234, 0.66);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.life-bee-survivor {
    position: relative;
    min-height: clamp(520px, 62vh, 760px);
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 214, 109, 0.24);
    background:
        radial-gradient(circle at 18% 18%, rgba(155, 225, 93, 0.22), transparent 28%),
        radial-gradient(circle at 82% 24%, rgba(126, 216, 230, 0.14), transparent 30%),
        linear-gradient(135deg, #142322, #27351f 48%, #3a2632);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 16px 38px rgba(0, 0, 0, 0.28);
}

.life-bee-shop {
    position: relative;
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: clamp(520px, 62vh, 760px);
    overflow: hidden;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 214, 109, 0.28);
    background:
        linear-gradient(180deg, rgba(8, 13, 12, 0.24), rgba(8, 13, 12, 0.84)),
        radial-gradient(circle at 18% 14%, rgba(255, 214, 109, 0.2), transparent 27%),
        radial-gradient(circle at 84% 22%, rgba(116, 216, 191, 0.12), transparent 30%),
        var(--bee-shop-bg) center / cover no-repeat,
        linear-gradient(135deg, #1c2a1d, #463221 54%, #271b1d);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 -160px 180px rgba(0, 0, 0, 0.34),
        0 16px 38px rgba(0, 0, 0, 0.28);
}

.life-bee-loadout {
    position: relative;
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: clamp(520px, 62vh, 760px);
    overflow: hidden;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid rgba(116, 216, 191, 0.28);
    background:
        linear-gradient(180deg, rgba(8, 13, 12, 0.28), rgba(8, 13, 12, 0.86)),
        radial-gradient(circle at 20% 18%, rgba(255, 214, 109, 0.18), transparent 28%),
        radial-gradient(circle at 80% 18%, rgba(116, 216, 191, 0.14), transparent 32%),
        linear-gradient(135deg, #142322, #26351e 50%, #312329);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 16px 38px rgba(0, 0, 0, 0.28);
}

.life-bee-shop-header {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.life-bee-shop-header strong,
.life-bee-shop-header span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(9, 18, 18, 0.72);
    color: #eaf7df;
    font-size: 0.84em;
    font-weight: 900;
    line-height: 1.1;
    backdrop-filter: blur(8px);
}

.life-bee-shop-header strong {
    color: #ffd66d;
}

.life-bee-shop-header span {
    color: #cfe6d2;
}

.life-bee-unlock-strip {
    position: relative;
    z-index: 1;
    width: fit-content;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 214, 109, 0.28);
    background: rgba(22, 30, 23, 0.78);
    color: #ffe8a3;
    font-size: 0.82em;
    font-weight: 900;
    line-height: 1.15;
}

.life-bee-meta-panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(7, 17, 17, 0.72);
    color: #eaf7df;
}

.life-bee-meta-panel header,
.life-bee-codex-row,
.life-bee-challenge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.life-bee-meta-panel header strong,
.life-bee-meta-panel header span,
.life-bee-codex-row span,
.life-bee-challenge-row span {
    min-width: 0;
    padding: 4px 7px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.76em;
    font-weight: 800;
    line-height: 1.15;
}

.life-bee-meta-panel header strong {
    color: #ffd66d;
}

.life-bee-growth-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.life-bee-growth-node {
    min-width: 0;
    min-height: 46px;
    display: grid;
    gap: 3px;
    align-content: center;
    padding: 7px;
    border-radius: 8px;
    border: 1px solid rgba(255, 214, 109, 0.22);
    background: rgba(22, 44, 40, 0.78);
    color: #f6f8dc;
    text-align: left;
    cursor: pointer;
}

.life-bee-growth-node:disabled {
    cursor: default;
    opacity: 0.72;
}

.life-bee-growth-node.is-owned {
    border-color: rgba(82, 218, 205, 0.46);
    background: rgba(42, 105, 96, 0.62);
}

.life-bee-growth-node b,
.life-bee-growth-node span {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.78em;
    line-height: 1.1;
}

.life-bee-growth-node span,
.life-bee-challenge-row span {
    color: #cfe6d2;
}

.life-bee-challenge-row span.is-done {
    color: #7df0d7;
}

.life-bee-synergy-panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.life-bee-synergy-track {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(54px, auto) auto;
    gap: 5px 8px;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 18, 18, 0.68);
}

.life-bee-synergy-track strong,
.life-bee-synergy-track span {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.78em;
    line-height: 1.1;
}

.life-bee-synergy-track strong {
    color: #fff0b8;
    font-weight: 900;
}

.life-bee-synergy-track span {
    justify-self: end;
    color: #9be15d;
    font-weight: 900;
}

.life-bee-synergy-track i {
    grid-column: 1 / -1;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.life-bee-synergy-track i::before {
    content: "";
    display: block;
    width: var(--bee-synergy-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9be15d, #ffd66d);
}

.life-bee-synergy-track em {
    grid-column: 1 / -1;
    display: flex;
    gap: 5px;
    align-items: center;
    font-style: normal;
}

.life-bee-synergy-track b {
    min-width: 22px;
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #9eadb5;
    background: rgba(255, 255, 255, 0.055);
    font-size: 0.7em;
    line-height: 1;
}

.life-bee-synergy-track b.is-active {
    border-color: rgba(255, 214, 109, 0.64);
    color: #101816;
    background: linear-gradient(180deg, #ffe08b, #d9a133);
}

.life-bee-synergy-track--active {
    border-color: rgba(255, 214, 109, 0.42);
    box-shadow: inset 0 0 0 1px rgba(255, 214, 109, 0.12);
}

.life-bee-shop-cards {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.life-bee-loadout-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.life-bee-loadout-card {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(44px, 1fr) auto auto auto;
    gap: 7px;
    padding: 12px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 214, 109, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 248, 205, 0.1), rgba(12, 20, 18, 0.7)),
        rgba(9, 18, 18, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 24px rgba(0, 0, 0, 0.22);
}

.life-bee-loadout-card strong,
.life-bee-loadout-card em,
.life-bee-loadout-card p {
    min-width: 0;
    overflow-wrap: anywhere;
}

.life-bee-loadout-card strong {
    color: #fff0b8;
    font-size: 1.05em;
    line-height: 1.18;
}

.life-bee-loadout-card em {
    color: #9be15d;
    font-size: 0.78em;
    font-style: normal;
    font-weight: 900;
    line-height: 1.2;
}

.life-bee-loadout-card p {
    margin: 0;
    color: #d4dfd8;
    font-size: 0.82em;
    line-height: 1.35;
}

.life-bee-loadout-meta {
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    color: rgba(208, 246, 234, 0.82);
    font-size: 0.76em;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.life-bee-difficulty-strip {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    align-items: stretch;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(95, 218, 198, 0.22);
    background: rgba(5, 18, 17, 0.72);
}

.life-bee-difficulty-chip {
    min-width: 0;
    display: grid;
    gap: 2px;
    padding: 7px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 214, 109, 0.2);
    background: rgba(13, 32, 31, 0.8);
    color: #e8f7ee;
    cursor: pointer;
}

.life-bee-difficulty-chip.is-active {
    border-color: rgba(95, 230, 205, 0.72);
    background: rgba(18, 76, 68, 0.78);
    box-shadow: 0 0 0 1px rgba(95, 230, 205, 0.24);
}

.life-bee-difficulty-chip strong,
.life-bee-difficulty-chip span,
.life-bee-difficulty-strip > em {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.18;
}

.life-bee-difficulty-chip strong {
    color: #fff0b8;
    font-size: 0.82em;
}

.life-bee-difficulty-chip span,
.life-bee-difficulty-strip > em {
    color: rgba(208, 246, 234, 0.8);
    font-size: 0.72em;
    font-style: normal;
    font-weight: 800;
}

.life-bee-difficulty-strip > em {
    grid-column: 1 / -1;
}

.life-bee-loadout-weapon {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(95, 218, 198, 0.24);
    background: rgba(7, 24, 24, 0.64);
}

.life-bee-loadout-weapon span,
.life-bee-loadout-weapon small {
    min-width: 0;
    color: rgba(197, 234, 226, 0.78);
    font-size: 0.72em;
    font-weight: 850;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.life-bee-loadout-weapon strong {
    color: #9ff5df;
    font-size: 0.9em;
}

.life-bee-loadout-weapon em {
    color: #ffd66d;
    font-size: 0.72em;
}

.life-bee-loadout-card .life-mini-primary {
    min-height: 36px;
}

.life-bee-shop-card {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(112px, 1fr) auto;
    gap: 9px;
    padding: 10px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 214, 109, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 248, 205, 0.1), rgba(28, 20, 14, 0.66)),
        rgba(11, 18, 16, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 24px rgba(0, 0, 0, 0.22);
}

.life-bee-shop-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 214, 109, 0.08);
    object-fit: cover;
}

.life-bee-shop-card > div {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 5px;
}

.life-bee-shop-card strong,
.life-bee-shop-card em,
.life-bee-shop-card p {
    min-width: 0;
    overflow-wrap: anywhere;
}

.life-bee-shop-card strong {
    color: #fff0b8;
    font-size: 0.96em;
    line-height: 1.16;
}

.life-bee-shop-card em {
    color: #9be15d;
    font-size: 0.76em;
    font-style: normal;
    font-weight: 900;
    line-height: 1.18;
}

.life-bee-shop-card small {
    display: block;
    min-width: 0;
    color: #f0c86a;
    font-size: 0.72em;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.life-bee-shop-card p {
    margin: 0;
    color: #d4dfd8;
    font-size: 0.78em;
    line-height: 1.35;
}

.life-bee-shop-card footer {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.life-bee-shop-card footer .life-mini-choice,
.life-bee-shop-card footer .life-mini-primary {
    min-width: 0;
    min-height: 36px;
    padding: 7px 8px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.life-bee-shop-card--rare {
    border-color: rgba(116, 216, 191, 0.5);
    box-shadow: inset 0 0 0 1px rgba(116, 216, 191, 0.12), 0 12px 24px rgba(0, 0, 0, 0.22);
}

.life-bee-shop-card--epic {
    border-color: rgba(255, 135, 177, 0.52);
    box-shadow: inset 0 0 0 1px rgba(255, 135, 177, 0.12), 0 12px 24px rgba(0, 0, 0, 0.22);
}

.life-bee-shop-card--legendary {
    border-color: rgba(255, 214, 109, 0.68);
    box-shadow:
        inset 0 0 0 1px rgba(255, 214, 109, 0.18),
        0 0 22px rgba(255, 214, 109, 0.14),
        0 12px 24px rgba(0, 0, 0, 0.22);
}

.life-bee-shop--failed {
    align-content: center;
    border-color: rgba(255, 107, 122, 0.28);
    background:
        linear-gradient(180deg, rgba(8, 13, 12, 0.42), rgba(8, 13, 12, 0.88)),
        radial-gradient(circle at 50% 24%, rgba(255, 107, 122, 0.12), transparent 32%),
        linear-gradient(135deg, #1c2520, #34281d 58%, #2c2024);
}

.life-bee-shop--failed .life-bee-shop-header {
    justify-content: center;
}

.life-bee-shop--failed .life-bee-survivor-feedback {
    position: relative;
    inset: auto;
}

.life-bee-shop > .life-bee-survivor-feedback {
    position: relative;
    inset: auto;
}

.life-bee-loadout > .life-bee-survivor-feedback {
    position: relative;
    inset: auto;
}

.life-bee-survivor-canvas {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: clamp(520px, 62vh, 760px);
    cursor: crosshair;
    touch-action: none;
}

.life-bee-survivor-hud {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    pointer-events: none;
}

.life-bee-survivor-hud span,
.life-bee-survivor-hud strong,
.life-bee-survivor-hud em {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(9, 18, 18, 0.74);
    color: #eaf7df;
    font-size: 0.8em;
    font-style: normal;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.life-bee-survivor-hud strong {
    color: #ffd66d;
}

.life-bee-survivor-hud em {
    color: #9be15d;
}

.life-bee-boss-chip {
    border-color: rgba(255, 107, 122, 0.38) !important;
    color: #ffcf70 !important;
    background: rgba(54, 12, 18, 0.78) !important;
}

.life-bee-burst-chip {
    border-color: rgba(255, 214, 109, 0.44) !important;
    color: #fff1a1 !important;
    background: linear-gradient(135deg, rgba(58, 38, 12, 0.84), rgba(13, 39, 34, 0.78)) !important;
    box-shadow: 0 0 16px rgba(255, 214, 109, 0.22);
}

.life-bee-overload-chip {
    border-color: rgba(110, 231, 211, 0.48) !important;
    color: #d7fff8 !important;
    background: linear-gradient(135deg, rgba(10, 54, 49, 0.86), rgba(72, 42, 9, 0.76)) !important;
    box-shadow: 0 0 18px rgba(110, 231, 211, 0.22);
}

.life-bee-survivor-feedback {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(9, 18, 18, 0.76);
    color: #f5f7fb;
    font-size: 0.84em;
    font-weight: 800;
    text-align: center;
    backdrop-filter: blur(10px);
}

.life-bee-survivor--perfect .life-bee-survivor-feedback {
    border-color: rgba(255, 214, 109, 0.44);
    color: #ffd66d;
}

.life-bee-survivor--good .life-bee-survivor-feedback {
    border-color: rgba(155, 225, 93, 0.38);
    color: #dff7b5;
}

.life-bee-survivor--miss .life-bee-survivor-feedback {
    border-color: rgba(255, 107, 122, 0.38);
    color: #ffb4bd;
}

#life-mini-game-dialog .life-mini-game-box:has(.life-mini-game-shell--beeSurvivor) {
    width: min(1500px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    padding: 18px;
}

.life-mini-game-shell--beeSurvivor .life-mini-game-layout {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: 12px;
}

.life-mini-game-shell--beeSurvivor .life-mini-game-actions {
    gap: 8px;
}

.life-bee-survivor-side-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.life-bee-survivor-side-status > div {
    min-width: 0;
    padding: 9px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.055);
    text-align: center;
}

.life-bee-survivor-side-status strong {
    display: block;
    color: #ffd66d;
    font-size: 1em;
    line-height: 1.1;
}

.life-bee-survivor-side-status span {
    display: block;
    margin-top: 3px;
    color: #aebdca;
    font-size: 0.74em;
}

.life-bee-survivor-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.life-bee-survivor-upgrades {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 214, 109, 0.28);
    background: rgba(255, 214, 109, 0.08);
}

.life-bee-survivor-upgrades > strong {
    color: #ffd66d;
    font-size: 0.9em;
    line-height: 1.2;
}

.life-bee-survivor-upgrade {
    min-height: 54px;
    align-items: flex-start;
    text-align: left;
}

.life-bee-survivor-upgrade b {
    display: block;
    color: #f8f2cf;
    font-size: 0.86em;
    line-height: 1.15;
}

.life-bee-survivor-upgrade span {
    display: block;
    margin-top: 4px;
    color: #b9c8cb;
    font-size: 0.74em;
    line-height: 1.25;
}

.life-bee-survivor-control {
    min-height: 48px;
    justify-content: center;
}

.life-bee-survivor-control b {
    display: block;
    color: #ffd66d;
    font-size: 1.08em;
    line-height: 1;
}

.life-bee-survivor-control strong {
    display: block;
    margin-top: 3px;
    color: #f5f7fb;
    font-size: 0.78em;
    line-height: 1.1;
}

.life-bee-survivor-control--up {
    grid-column: 2;
}

.life-bee-survivor-control--left {
    grid-column: 1;
}

.life-bee-survivor-control--stop {
    grid-column: 2;
}

.life-bee-survivor-control--right {
    grid-column: 3;
}

.life-bee-survivor-control--down {
    grid-column: 2;
}

.life-bee-survivor-settle {
    min-height: 40px;
}

.life-bee-settlement-highlights {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(255, 214, 109, 0.28);
    border-radius: 8px;
    background: rgba(7, 22, 20, 0.76);
}

.life-bee-settlement-highlights header,
.life-bee-settlement-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.life-bee-settlement-highlights strong,
.life-bee-settlement-row strong {
    color: #ffd66d;
}

.life-bee-settlement-highlights span,
.life-bee-settlement-row span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid rgba(110, 231, 211, 0.22);
    border-radius: 999px;
    background: rgba(10, 44, 39, 0.72);
    color: #d9fff6;
    font-size: 0.82rem;
}

.life-bee-wave-script-chip {
    border-color: rgba(255, 214, 109, 0.36) !important;
    background: rgba(92, 60, 16, 0.72) !important;
    color: #ffe7a1 !important;
}

@media (max-width: 760px) {
    #life-mini-game-dialog .life-mini-game-box:has(.life-mini-game-shell--fishingArcade) {
        width: min(380px, calc(100vw - 20px));
        max-height: calc(100vh - 20px);
        padding: 16px;
    }

    .life-mini-game-shell--fishingArcade {
        display: block;
    }

    .life-mini-game-shell--fishingArcade .life-mini-game-layout {
        display: block;
    }

    .life-mini-game-shell--fishingArcade .life-mini-game-side {
        max-height: none;
        overflow: visible;
    }

    .life-fishing-arcade--v2 {
        min-height: clamp(260px, 66vw, 380px);
        margin-bottom: 12px;
    }

    .life-fishing-arcade-hud--v2 {
        right: 8px;
        left: 8px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 7px 8px;
        font-size: 0.86em;
    }

    .life-fishing-arcade-charge {
        top: 82px;
        right: 10px;
        grid-template-columns: auto 84px;
        padding: 5px 7px;
        font-size: 0.74em;
    }

    .life-fishing-arcade--v2 .life-fishing-arcade-feedback {
        right: 8px;
        bottom: 8px;
        left: 8px;
        padding: 7px 8px;
        font-size: 0.82em;
    }

    #life-mini-game-dialog .life-mini-game-box:has(.life-mini-game-shell--beeSurvivor) {
        width: min(380px, calc(100vw - 20px));
        max-height: calc(100vh - 20px);
        padding: 16px;
    }

    .life-mini-game-shell--beeSurvivor .life-mini-game-layout {
        display: block;
    }

    .life-mini-game-shell--beeSurvivor .life-mini-game-side {
        max-height: none;
        overflow: visible;
    }

    .life-bee-survivor {
        min-height: 292px;
        margin-bottom: 12px;
    }

    .life-bee-shop {
        min-height: 292px;
        margin-bottom: 12px;
        padding: 10px;
        gap: 10px;
    }

    .life-bee-shop-header {
        gap: 6px;
    }

    .life-bee-shop-header strong,
    .life-bee-shop-header span {
        min-height: 26px;
        padding: 4px 8px;
        font-size: 0.74em;
    }

    .life-bee-shop-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .life-bee-synergy-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .life-bee-synergy-track {
        padding: 7px;
        gap: 4px 6px;
    }

    .life-bee-synergy-track strong,
    .life-bee-synergy-track span {
        font-size: 0.68em;
    }

    .life-bee-synergy-track b {
        min-width: 19px;
        min-height: 18px;
        font-size: 0.64em;
    }

    .life-bee-loadout {
        min-height: 292px;
        margin-bottom: 12px;
        padding: 10px;
        gap: 10px;
    }

    .life-bee-loadout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .life-bee-loadout-card {
        gap: 6px;
        padding: 9px;
    }

    .life-bee-loadout-card strong {
        font-size: 0.88em;
    }

    .life-bee-loadout-card em {
        font-size: 0.68em;
    }

    .life-bee-loadout-card p {
        font-size: 0.7em;
        line-height: 1.28;
    }

    .life-bee-difficulty-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        padding: 6px;
    }

    .life-bee-difficulty-chip {
        padding: 6px;
    }

    .life-bee-difficulty-chip strong {
        font-size: 0.72em;
    }

    .life-bee-difficulty-chip span,
    .life-bee-difficulty-strip > em {
        font-size: 0.62em;
    }

    .life-bee-loadout-meta,
    .life-bee-loadout-weapon span,
    .life-bee-loadout-weapon small {
        font-size: 0.64em;
    }

    .life-bee-loadout-weapon {
        gap: 3px;
        padding: 6px;
    }

    .life-bee-loadout-weapon strong {
        font-size: 0.76em;
    }

    .life-bee-shop-card {
        grid-template-rows: auto minmax(82px, 1fr) auto;
        gap: 7px;
        padding: 8px;
    }

    .life-bee-shop-card strong {
        font-size: 0.82em;
    }

    .life-bee-shop-card em {
        font-size: 0.68em;
    }

    .life-bee-shop-card small {
        font-size: 0.66em;
    }

    .life-bee-shop-card p {
        font-size: 0.7em;
        line-height: 1.28;
    }

    .life-bee-shop-card footer {
        gap: 5px;
    }

    .life-bee-shop-card footer .life-mini-choice,
    .life-bee-shop-card footer .life-mini-primary {
        min-height: 32px;
        padding: 6px 5px;
        font-size: 0.72em;
        line-height: 1.12;
    }

    .life-bee-survivor-canvas {
        min-height: 284px;
    }

    .life-bee-survivor-hud {
        gap: 5px;
    }

    .life-bee-survivor-hud span,
    .life-bee-survivor-hud strong,
    .life-bee-survivor-hud em {
        min-height: 25px;
        padding: 4px 7px;
        font-size: 0.72em;
    }
}

@keyframes lifeFishingArcadeBob {
    from { margin-top: -2px; }
    to { margin-top: 3px; }
}

@keyframes lifeFishingArcadeNet {
    from {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(0.35);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.45);
    }
}

.life-aim-board {
    min-height: 0;
    padding: 12px;
    border: 1px solid rgba(125, 207, 155, 0.2);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(8, 14, 14, 0.08), rgba(8, 14, 14, 0.62)),
        url("images/life-mini-games/hunting-aim-board-v1.png") center / cover no-repeat,
        #101915;
}

.life-aim-head {
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(8, 14, 14, 0.62);
}

.life-aim-head em {
    color: #ffd27a;
}

.life-aim-head i {
    color: #7dcf9b;
}

.life-aim-field {
    position: relative;
    min-height: 214px;
    display: grid;
    align-content: end;
    gap: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px;
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 210, 122, 0.13), transparent 26%),
        linear-gradient(180deg, rgba(21, 47, 36, 0.15), rgba(9, 19, 17, 0.62));
}

.life-aim-field::before {
    content: "";
    position: absolute;
    inset: 12% 12% 18%;
    border-left: 1px dashed rgba(246, 241, 213, 0.3);
    border-right: 1px dashed rgba(246, 241, 213, 0.3);
    pointer-events: none;
}

.life-aim-cue {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 3px;
    width: min(100%, 330px);
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(8, 14, 14, 0.66);
}

.life-aim-cue b {
    color: #ffd27a;
    font-size: 0.95em;
}

.life-aim-cue span,
.life-aim-cue em {
    color: #dfe8ea;
    font-size: 0.78em;
    font-style: normal;
}

.life-aim-cue em {
    color: #7dcf9b;
    font-weight: 800;
}

.life-aim-lanes {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.life-aim-lane {
    min-width: 0;
    min-height: 86px;
    display: grid;
    grid-template-rows: auto auto auto;
    place-items: center;
    gap: 2px;
    padding: 8px 6px;
    border: 1px solid rgba(223, 232, 234, 0.18);
    border-radius: 8px;
    color: #f8fbfc;
    cursor: pointer;
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.08), transparent 36%),
        linear-gradient(145deg, rgba(25, 47, 37, 0.88), rgba(10, 20, 18, 0.95));
}

.life-aim-lane b {
    display: grid;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #132019;
    background: #dfe8c7;
    font-size: 0.82em;
}

.life-aim-lane strong {
    max-width: 100%;
    color: #f8fbfc;
    font-size: 0.86em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-aim-lane span {
    max-width: 100%;
    color: rgba(223, 232, 234, 0.72);
    font-size: 0.72em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-aim-lane--target {
    border-color: rgba(255, 210, 122, 0.75);
    box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.13), inset 0 0 24px rgba(255, 210, 122, 0.1);
}

.life-aim-lane--target b {
    background: #ffd27a;
}

.life-aim-lane--perfect {
    border-color: rgba(125, 207, 155, 0.8);
    background: linear-gradient(145deg, rgba(31, 79, 48, 0.94), rgba(11, 33, 23, 0.96));
}

.life-aim-lane--good {
    border-color: rgba(255, 210, 122, 0.78);
}

.life-aim-lane--miss {
    border-color: rgba(230, 128, 112, 0.78);
    background: linear-gradient(145deg, rgba(80, 42, 40, 0.9), rgba(28, 19, 19, 0.96));
}

.life-aim-feedback {
    min-height: 24px;
    padding: 7px 10px;
    border-radius: 8px;
    color: #f8fbfc;
    background: rgba(8, 14, 14, 0.62);
    font-size: 0.88em;
    font-weight: 800;
    text-align: center;
}

.life-aim-board--perfect .life-aim-feedback {
    color: #9be1af;
}

.life-aim-board--good .life-aim-feedback {
    color: #ffd27a;
}

.life-aim-board--miss .life-aim-feedback {
    color: #efa195;
}

.life-aim-mode {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 8px;
    align-items: center;
    text-align: left;
}

.life-aim-mode b {
    grid-row: 1 / 3;
    display: grid;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #183022;
    background: #7dcf9b;
    font-size: 0.82em;
}

.life-aim-mode strong {
    color: #f8fbfc;
    font-size: 0.9em;
    line-height: 1.1;
}

.life-aim-mode span {
    color: rgba(223, 232, 234, 0.76);
    font-size: 0.72em;
    line-height: 1.1;
}

.life-aim-mode--selected {
    border-color: rgba(255, 210, 122, 0.72);
    box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.13);
}

.life-archery-board {
    border-color: rgba(255, 210, 122, 0.24);
    background:
        linear-gradient(180deg, rgba(8, 14, 14, 0.04), rgba(8, 14, 14, 0.64)),
        url("images/life-mini-games/hunting-aim-board-v1.png") center / cover no-repeat,
        #111916;
}

#life-mini-game-dialog .life-mini-game-box:has(.life-mini-game-shell--aim) {
    width: min(1500px, calc(100vw - 32px));
    max-height: calc(100vh - 24px);
    padding: 20px 24px 24px;
}

.life-mini-game-shell--aim .life-mini-game-layout {
    grid-template-columns: minmax(760px, 1fr) minmax(300px, 360px);
    gap: 18px;
}

.life-archery-range {
    position: relative;
    container-type: size;
    min-height: clamp(420px, 58vh, 560px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    cursor: crosshair;
    touch-action: none;
    background:
        radial-gradient(circle at 82% 26%, rgba(255, 210, 122, 0.16), transparent 20%),
        linear-gradient(180deg, rgba(21, 49, 52, 0.34) 0%, rgba(21, 45, 35, 0.5) 48%, rgba(14, 28, 19, 0.88) 100%);
}

.life-archery-range > * {
    pointer-events: none;
}

.life-archery-range__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.96) brightness(0.86);
}

.life-archery-range::before,
.life-archery-range::after {
    content: "";
    position: absolute;
    right: -6%;
    left: -6%;
    pointer-events: none;
}

.life-archery-range::before {
    z-index: 1;
    top: 42%;
    height: 24%;
    background:
        linear-gradient(7deg, transparent 0 34%, rgba(132, 151, 105, 0.2) 35% 48%, transparent 49%),
        linear-gradient(-5deg, transparent 0 42%, rgba(49, 90, 59, 0.24) 43% 56%, transparent 57%);
}

.life-archery-range::after {
    z-index: 1;
    bottom: 0;
    height: 34%;
    background:
        radial-gradient(ellipse at 20% 82%, rgba(93, 120, 66, 0.32), transparent 35%),
        radial-gradient(ellipse at 82% 88%, rgba(62, 96, 58, 0.3), transparent 38%),
        linear-gradient(180deg, rgba(31, 57, 34, 0.02), rgba(15, 30, 17, 0.46));
}

.life-archery-sky {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(4, 10, 10, 0.12), rgba(4, 10, 10, 0.36)),
        repeating-linear-gradient(90deg, transparent 0 72px, rgba(255, 255, 255, 0.02) 73px 74px),
        repeating-linear-gradient(0deg, transparent 0 54px, rgba(255, 255, 255, 0.015) 55px 56px);
    pointer-events: none;
}

.life-archery-target,
.life-archery-archer,
.life-archery-impact {
    position: absolute;
    z-index: 4;
    transform: translate(-50%, -50%);
}

.life-archery-target {
    display: grid;
    place-items: center;
    min-width: 34px;
    min-height: 34px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff9e4;
    box-shadow: none;
    transition: left 0.34s ease, top 0.34s ease, filter 0.22s ease, transform 0.22s ease;
}

.life-archery-ground-shadow {
    position: absolute;
    left: 50%;
    bottom: 3%;
    z-index: 0;
    width: calc(78% * var(--archery-ground-shadow-scale, 1));
    height: calc(17% * var(--archery-ground-shadow-scale, 1));
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.44) 0 18%, rgba(0, 0, 0, 0.24) 42%, transparent 72%);
    filter: blur(1px);
    opacity: 0.76;
    transform: translateX(-50%);
}

.life-archery-target-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(var(--archery-target-art-scale, 1));
    opacity: 0;
    visibility: hidden;
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 8px rgba(255, 224, 139, 0.16));
}

.life-archery-target-walk {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    display: block;
    width: calc(100% * var(--archery-walk-frame-ratio, 1.5));
    height: 100%;
    overflow: hidden;
    transform: translate(-50%, -50%) scale(var(--archery-target-art-scale, 1));
    transform-origin: center;
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 8px rgba(255, 224, 139, 0.16));
}

.life-archery-target-walk-strip {
    position: absolute;
    left: 0;
    top: 0;
    width: 600%;
    height: 100%;
    max-width: none;
    object-fit: fill;
    transform: translate3d(0, 0, 0);
    animation: lifeArcheryWalkCycle var(--archery-walk-duration, 760ms) steps(5, end) infinite;
    will-change: transform;
}

.life-archery-target > i {
    position: absolute;
    z-index: -1;
    font-style: normal;
    font-size: 1px;
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.life-archery-reward {
    position: absolute;
    top: -14px;
    right: -18px;
    z-index: 2;
    padding: 1px 5px;
    border: 1px solid rgba(255, 224, 139, 0.72);
    border-radius: 999px;
    background: rgba(32, 25, 14, 0.78);
    color: #ffe08b;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32);
}

.life-archery-target--beast-roe,
.life-archery-target--beast-deer {
    background:
        radial-gradient(circle at 36% 34%, rgba(255, 246, 211, 0.86) 0 6%, transparent 7%),
        linear-gradient(135deg, #e7c990, #9f6f3d 48%, #493423);
}

.life-archery-target--beast-hare {
    border-radius: 48% 52% 46% 54%;
    background:
        radial-gradient(circle at 37% 34%, rgba(255, 255, 238, 0.9) 0 7%, transparent 8%),
        linear-gradient(135deg, #f4ecd2, #b89058 50%, #5b4731);
}

.life-archery-target--beast-pheasant {
    border-radius: 58% 42% 52% 48%;
    background:
        radial-gradient(circle at 36% 35%, rgba(255, 246, 211, 0.86) 0 6%, transparent 7%),
        linear-gradient(135deg, #ddc35e, #547b54 48%, #2d3d2f);
}

.life-archery-target--beast-fox,
.life-archery-target--beast-whitefox {
    border-radius: 56% 44% 44% 56%;
    background:
        radial-gradient(circle at 36% 34%, rgba(255, 246, 211, 0.9) 0 6%, transparent 7%),
        linear-gradient(135deg, #f0b869, #b84d35 48%, #3b2521);
}

.life-archery-target--beast-whitefox {
    background:
        radial-gradient(circle at 36% 34%, rgba(255, 255, 240, 0.96) 0 7%, transparent 8%),
        linear-gradient(135deg, #fff8dc, #c7d9ce 48%, #51626a);
}

.life-archery-target--beast-boar {
    border-radius: 54% 46% 48% 52%;
    background:
        radial-gradient(circle at 36% 34%, rgba(255, 246, 211, 0.82) 0 5%, transparent 6%),
        linear-gradient(135deg, #b89a68, #596347 48%, #2b2920);
}

.life-archery-target[class*="life-archery-target--beast-"] {
    background: transparent;
    border-radius: 0;
}

.life-archery-target::before,
.life-archery-target::after {
    content: "";
    position: absolute;
    background: inherit;
    display: none;
}

.life-archery-target::before {
    right: -22%;
    top: 37%;
    width: 34%;
    height: 24%;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.life-archery-target::after {
    left: 16%;
    top: -18%;
    width: 36%;
    height: 30%;
    border-radius: 50% 50% 10% 10%;
    transform: rotate(-18deg);
}

.life-archery-target b,
.life-archery-motion-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.life-archery-target b {
    bottom: -27px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(8, 14, 14, 0.76);
    color: #ffd27a;
    font-size: 0.74em;
    line-height: 1.1;
}

.life-archery-motion-label {
    bottom: -44px;
    color: rgba(223, 232, 234, 0.76);
    font-size: 0.68em;
    font-weight: 800;
}

.life-archery-target--perfect {
    border-color: rgba(125, 207, 155, 0.92);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34), 0 0 0 10px rgba(125, 207, 155, 0.15);
}

.life-archery-target--miss {
    border-color: rgba(230, 128, 112, 0.82);
    filter: saturate(0.72);
}

.life-archery-target--motion-still {
    filter: saturate(0.82) brightness(0.92);
}

.life-archery-target--motion-still .life-archery-target-walk-strip {
    animation-play-state: paused;
}

.life-archery-target--motion-walk {
    transition-duration: 0.36s;
}

.life-archery-target--motion-run {
    filter: brightness(1.12) saturate(1.14);
    transition-duration: 0.18s;
}

.life-archery-target--motion-run .life-archery-target-walk-strip {
    animation-duration: min(var(--archery-walk-duration, 520ms), 520ms);
}

.life-archery-weapon .life-archery-shot-line {
    position: absolute;
    left: var(--archery-shot-origin-x, 54px);
    top: var(--archery-shot-origin-y, 50%);
    z-index: 2;
    width: var(--archery-shot-segment-length, 112px);
    height: 10px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform-origin: left center;
    --archery-shot-stage-unit: clamp(4.2px, 0.58vh, 5.6px);
    pointer-events: none;
    animation: lifeArcheryShotLineFlight 620ms cubic-bezier(0.18, 0.72, 0.18, 1) both;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.58)) drop-shadow(0 0 7px rgba(255, 215, 126, 0.26));
}

.life-archery-shot-line__art {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    opacity: 0;
    filter: saturate(1.06) brightness(1.08);
    transform: translateY(0);
    transform-origin: right center;
    animation: lifeArcheryShotLineTrail 620ms cubic-bezier(0.18, 0.72, 0.18, 1) both;
    pointer-events: none;
    user-select: none;
}

.life-archery-shot-line--perfect,
.life-archery-impact--perfect {
    filter: drop-shadow(0 0 8px rgba(125, 207, 155, 0.65));
}

.life-archery-shot-line--miss,
.life-archery-impact--miss {
    opacity: 0.72;
}

.life-archery-impact {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(255, 210, 122, 0.42));
    animation: lifeArcheryImpactPulse 360ms ease-out var(--archery-impact-delay, 0ms) both;
}

.life-archery-impact--perfect {
    filter: drop-shadow(0 0 14px rgba(125, 207, 155, 0.62));
}

.life-archery-impact--good {
    filter: drop-shadow(0 0 14px rgba(255, 210, 122, 0.56));
}

.life-archery-impact--miss {
    filter: drop-shadow(0 0 10px rgba(230, 128, 112, 0.42));
}

@keyframes lifeArcheryShotLineFlight {
    0% {
        transform: translateY(-50%) translateX(0) scaleX(0.72);
        opacity: 0;
    }
    10% {
        transform: translateY(-50%) translateX(0) scaleX(1);
        opacity: 1;
    }
    38% {
        transform: translateY(-50%) translateX(calc((var(--archery-shot-mid-a-units, 28) * var(--archery-shot-stage-unit)) + var(--archery-shot-pivot-offset, 42px) - var(--archery-shot-segment-length, 112px))) scaleX(1);
        opacity: 1;
    }
    68% {
        transform: translateY(-50%) translateX(calc((var(--archery-shot-mid-b-units, 53) * var(--archery-shot-stage-unit)) + var(--archery-shot-pivot-offset, 42px) - var(--archery-shot-segment-length, 112px))) scaleX(1);
        opacity: 1;
    }
    88% {
        transform: translateY(-50%) translateX(calc((var(--archery-shot-impact-units, 78) * var(--archery-shot-stage-unit)) + var(--archery-shot-pivot-offset, 42px) - var(--archery-shot-segment-length, 112px))) scaleX(0.94);
        opacity: 0.96;
    }
    96% {
        transform: translateY(-50%) translateX(calc((var(--archery-shot-impact-units, 78) * var(--archery-shot-stage-unit)) + var(--archery-shot-pivot-offset, 42px) - var(--archery-shot-segment-length, 112px))) scaleX(0.94);
        opacity: 0.92;
    }
    100% {
        transform: translateY(-50%) translateX(calc((var(--archery-shot-impact-units, 78) * var(--archery-shot-stage-unit)) + var(--archery-shot-pivot-offset, 42px) - var(--archery-shot-segment-length, 112px) + 14px)) scaleX(0.72);
        opacity: 0;
    }
}

@keyframes lifeArcheryShotLineTrail {
    0% {
        opacity: 0;
        transform: translateY(0) scaleX(0.28);
    }
    14% {
        opacity: 0.72;
        transform: translateY(0) scaleX(0.88);
    }
    96% {
        opacity: 0.76;
        transform: translateY(0) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: translateY(0) scaleX(0.72);
    }
}

@keyframes lifeArcheryWalkCycle {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-83.333333%, 0, 0);
    }
}

@keyframes lifeArcheryImpactPulse {
    0% {
        opacity: var(--archery-impact-start-opacity, 0);
        box-shadow: 0 0 0 rgba(255, 210, 122, 0);
    }
    18% {
        opacity: 1;
        box-shadow: 0 0 24px rgba(255, 210, 122, 0.48);
    }
    100% {
        opacity: 1;
        box-shadow: 0 0 18px rgba(255, 210, 122, 0.26);
    }
}

@keyframes lifeArcheryResultReveal {
    from {
        opacity: 0;
        transform: translateY(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.life-archery-archer {
    z-index: 7;
    width: 352px;
    height: 192px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ffd27a;
    box-shadow: none;
    transform: translate(-96px, -50%);
    pointer-events: none;
}

.life-archery-weapon {
    position: absolute;
    left: 0;
    top: 50%;
    width: 240px;
    height: 120px;
    transform: translateY(-50%) rotate(var(--archery-weapon-angle, -45deg));
    transform-origin: 96px 50%;
    filter: brightness(1.16) contrast(1.08) saturate(1.12) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.58)) drop-shadow(0 0 14px rgba(255, 210, 122, 0.42));
    transition: transform 90ms linear;
}

.life-archery-weapon-art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.life-archery-power {
    position: absolute;
    left: 128px;
    top: calc(50% + 42px);
    z-index: 2;
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 1px solid rgba(255, 210, 122, 0.42);
    border-radius: 50%;
    background: rgba(8, 14, 14, 0.78);
    color: rgba(246, 241, 213, 0.92);
    font-size: 0.68em;
    font-weight: 900;
    transform: translate(-50%, -50%);
}

.life-archery-readout {
    position: absolute;
    z-index: 6;
    left: 12px;
    bottom: 12px;
    display: grid;
    gap: 3px;
    max-width: min(360px, calc(100% - 24px));
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(8, 14, 14, 0.72);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(7px);
}

.life-archery-readout b {
    color: #ffd27a;
    font-size: 0.92em;
}

.life-archery-readout span,
.life-archery-readout em {
    color: rgba(223, 232, 234, 0.78);
    font-size: 0.76em;
    font-style: normal;
    font-weight: 800;
}

.life-archery-feedback {
    display: flex;
    min-width: 0;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.life-archery-feedback span {
    min-width: 0;
}

.life-archery-result {
    display: inline-grid;
    min-width: 58px;
    padding: 3px 8px;
    place-items: center;
    border: 1px solid rgba(255, 210, 122, 0.42);
    border-radius: 999px;
    background: rgba(8, 14, 14, 0.68);
    color: #ffd27a;
    font-size: 0.82em;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
}

.life-archery-result--hit {
    border-color: rgba(125, 207, 155, 0.72);
    color: #9be1af;
}

.life-archery-result--miss {
    border-color: rgba(230, 128, 112, 0.68);
    color: #efa195;
}

.life-archery-feedback--shot-result .life-archery-result,
.life-archery-feedback--shot-result > span {
    opacity: 0;
    animation: lifeArcheryResultReveal 130ms ease-out var(--archery-result-delay, 560ms) both;
}

.life-archery-board--perfect .life-archery-feedback {
    color: #9be1af;
}

.life-archery-board--good .life-archery-feedback {
    color: #ffd27a;
}

.life-archery-board--miss .life-archery-feedback {
    color: #efa195;
}

.life-archery-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 8px;
    align-items: center;
    text-align: left;
}

.life-archery-control b {
    grid-row: 1 / 3;
    display: grid;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #1b1408;
    background: #ffd27a;
    font-size: 0.82em;
}

.life-archery-control strong {
    color: #f8fbfc;
    font-size: 0.9em;
    line-height: 1.1;
}

.life-archery-control span {
    color: rgba(223, 232, 234, 0.76);
    font-size: 0.72em;
    line-height: 1.1;
}

.life-archery-shoot {
    grid-column: 1 / -1;
}

@media (max-width: 760px) {
    #life-mini-game-dialog .life-mini-game-box:has(.life-mini-game-shell--aim) {
        width: min(380px, calc(100vw - 20px));
        max-height: calc(100vh - 20px);
        padding: 16px;
    }

    .life-mini-game-shell--aim .life-mini-game-layout {
        display: block;
    }

    .life-archery-range {
        min-height: 220px;
    }

    .life-mini-game-shell--aim .life-mini-game-actions {
        order: -1;
    }

    .life-mini-game-shell--aim .life-mini-game-actions .life-mini-sequence-hint {
        font-size: 0.82em;
        line-height: 1.35;
    }
}

.life-mix-board {
    min-height: 0;
    padding: 12px;
    border: 1px solid rgba(255, 210, 122, 0.2);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(18, 12, 8, 0.04), rgba(18, 12, 8, 0.56)),
        url("images/life-mini-games/mix-tune-board-v1.png") center / cover no-repeat,
        #201812;
}

.life-mix-head {
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(22, 14, 10, 0.62);
}

.life-mix-panel {
    display: grid;
    gap: 10px;
    padding: 14px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(34, 24, 17, 0.5);
}

.life-mix-channel {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 46px;
    gap: 9px;
    align-items: center;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(15, 11, 8, 0.54);
}

.life-mix-channel--selected {
    border-color: rgba(255, 210, 122, 0.78);
    box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.13);
}

.life-mix-channel-name {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    align-items: center;
    padding: 0;
    border: 0;
    color: #f8fbfc;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.life-mix-channel-name b {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86em;
}

.life-mix-channel-name span {
    display: grid;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #241609;
    background: #ffd27a;
    font-size: 0.72em;
    font-weight: 900;
}

.life-mix-track {
    position: relative;
    height: 16px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(72, 45, 24, 0.88), rgba(51, 68, 57, 0.88), rgba(93, 53, 34, 0.88));
}

.life-mix-track em,
.life-mix-track i {
    position: absolute;
    top: 0;
    bottom: 0;
}

.life-mix-track em {
    border-radius: inherit;
    background: rgba(255, 210, 122, 0.24);
    outline: 1px solid rgba(255, 210, 122, 0.56);
}

.life-mix-track i {
    width: 4px;
    border-radius: 4px;
    background: #f6f1d5;
    box-shadow: 0 0 0 5px rgba(246, 241, 213, 0.12);
    transform: translateX(-50%);
}

.life-mix-channel strong {
    color: #ffd27a;
    font-size: 0.84em;
    text-align: right;
}

.life-mix-feedback {
    min-height: 24px;
    padding: 7px 10px;
    border-radius: 8px;
    color: #f8fbfc;
    background: rgba(22, 14, 10, 0.62);
    font-size: 0.88em;
    font-weight: 800;
    text-align: center;
}

.life-mix-board--perfect .life-mix-feedback {
    color: #9be1af;
}

.life-mix-board--good .life-mix-feedback {
    color: #ffd27a;
}

.life-mix-board--miss .life-mix-feedback {
    color: #efa195;
}

.life-sequence-board {
    min-height: 0;
    padding: 12px;
    border: 1px solid rgba(125, 207, 155, 0.2);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(15, 21, 12, 0.06), rgba(15, 21, 12, 0.52)),
        url("images/life-mini-games/sequence-flow-board-v1.png") center / cover no-repeat,
        #172115;
}

.life-sequence-head {
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(12, 18, 10, 0.62);
}

.life-sequence-head em {
    color: #7dcf9b;
}

.life-sequence-path {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    min-height: 178px;
    align-content: center;
    padding: 16px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(12, 18, 10, 0.28);
}

.life-sequence-node {
    min-width: 0;
    min-height: 96px;
    display: grid;
    grid-template-rows: 36px auto;
    place-items: center;
    gap: 6px;
    padding: 8px 6px;
    border: 1px solid rgba(223, 232, 234, 0.14);
    border-radius: 8px;
    background: rgba(20, 32, 20, 0.72);
}

.life-sequence-node b {
    display: grid;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #152018;
    background: #dfe8c7;
    font-size: 0.88em;
}

.life-sequence-node span {
    max-width: 100%;
    color: #dfe8ea;
    font-size: 0.82em;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-sequence-node--active {
    border-color: rgba(255, 210, 122, 0.84);
    box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.14);
}

.life-sequence-node--active b {
    background: #ffd27a;
}

.life-sequence-node--perfect {
    border-color: rgba(125, 207, 155, 0.82);
    background: rgba(24, 65, 36, 0.78);
}

.life-sequence-node--miss {
    border-color: rgba(230, 128, 112, 0.78);
    background: rgba(80, 42, 40, 0.76);
}

.life-sequence-feedback {
    min-height: 24px;
    padding: 7px 10px;
    border-radius: 8px;
    color: #f8fbfc;
    background: rgba(12, 18, 10, 0.62);
    font-size: 0.88em;
    font-weight: 800;
    text-align: center;
}

.life-sequence-board--perfect .life-sequence-feedback {
    color: #9be1af;
}

.life-sequence-board--miss .life-sequence-feedback {
    color: #efa195;
}

.life-sequence-action {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    text-align: left;
}

.life-sequence-action b {
    display: grid;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #183022;
    background: #ffd27a;
    font-size: 0.82em;
}

.life-sequence-action span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-sequence-action:disabled {
    cursor: default;
    opacity: 0.62;
    transform: none;
}

.life-rhythm-beat {
    display: grid;
    gap: 8px;
}

.life-rhythm-beat-track {
    position: relative;
    height: 42px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: linear-gradient(90deg, #203845, #315e69, #203845);
}

.life-rhythm-beat-target,
.life-rhythm-beat-runner {
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 4px;
    transform: translateX(-50%);
}

.life-rhythm-beat-target {
    background: #ffd27a;
    box-shadow: 0 0 0 8px rgba(255, 210, 122, 0.15);
}

.life-rhythm-beat-runner {
    left: 0%;
    background: #f6f1d5;
    animation: lifeRhythmRunner linear forwards;
}

.life-rhythm-judgement {
    min-height: 22px;
    color: #ffd27a;
    font-weight: 800;
    text-align: center;
}

.life-rhythm-pad {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(54px, 1fr));
    gap: 8px;
}

.life-rhythm-pad-btn {
    min-width: 0;
}

.life-silkworm-snake {
    display: grid;
    gap: 10px;
    min-height: 0;
    padding: 12px;
    border: 1px solid rgba(125, 207, 155, 0.24);
    border-radius: 8px;
    color: #e9f7ee;
    background:
        linear-gradient(180deg, rgba(12, 22, 17, 0.2), rgba(12, 18, 13, 0.66)),
        radial-gradient(circle at 18% 18%, rgba(255, 210, 122, 0.16), transparent 34%),
        linear-gradient(135deg, #17281d, #203326 48%, #1a2421);
}

.life-silkworm-snake-hud {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
}

.life-silkworm-snake-hud span,
.life-silkworm-snake-hud strong,
.life-silkworm-snake-hud em {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    color: #f6f1d5;
    background: rgba(8, 12, 12, 0.44);
    font-size: 0.82em;
    font-style: normal;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
}

.life-silkworm-snake-board {
    display: grid;
    grid-template-columns: repeat(var(--silkworm-cols), minmax(0, 1fr));
    grid-template-rows: repeat(var(--silkworm-rows), minmax(0, 1fr));
    gap: 0;
    width: min(100%, 760px);
    aspect-ratio: 4 / 3;
    margin: 0 auto;
    padding: 7.8% 7.4% 8.8%;
    border: 1px solid rgba(125, 207, 155, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(10, 18, 12, 0.08), rgba(10, 18, 12, 0.24)),
        url("images/life-mini-games/silkworm-snake/silkworm-snake-board-gpt-image2-v1.png") center / cover no-repeat,
        #102017;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.18);
}

.life-silkworm-snake-cell {
    position: relative;
    min-width: 0;
    min-height: 0;
    border-radius: 4px;
    background: transparent;
    isolation: isolate;
    overflow: visible;
}

.life-silkworm-snake-cell--body,
.life-silkworm-snake-cell--head {
    background: transparent;
}

.life-silkworm-snake-cell--segment {
    z-index: 2;
    --silkworm-body-skin:
        linear-gradient(180deg, #fff8de 0%, #f5dfb7 52%, #dba56e 100%);
    --silkworm-body-skin-vertical:
        linear-gradient(90deg, #fff8de 0%, #f5dfb7 52%, #dba56e 100%);
    --silkworm-body-ridges-horizontal:
        repeating-linear-gradient(90deg, transparent 0 22%, rgba(126, 78, 35, 0.12) 25%, rgba(126, 78, 35, 0.05) 30%, transparent 34%);
    --silkworm-body-ridges-vertical:
        repeating-linear-gradient(180deg, transparent 0 22%, rgba(126, 78, 35, 0.12) 25%, rgba(126, 78, 35, 0.05) 30%, transparent 34%);
}

.life-silkworm-snake-cell--segment::before {
    content: "";
    position: absolute;
    inset: 23% 8% 29%;
    z-index: 1;
    border-radius: 999px;
    background: var(--silkworm-body-skin);
    box-shadow:
        inset 0 -4px 7px rgba(132, 84, 40, 0.18),
        inset 0 3px 6px rgba(255, 255, 246, 0.72),
        0 4px 7px rgba(0, 0, 0, 0.18);
    display: none;
}

.life-silkworm-snake-cell--axis-vertical::before {
    inset: 8% 31%;
    background: var(--silkworm-body-skin-vertical);
}

.life-silkworm-snake-cell--axis-corner::before {
    inset: 18% 20%;
    display: block;
}

.life-silkworm-snake-cell--head-segment::before {
    display: block;
    opacity: 0.72;
}

.life-silkworm-snake-cell--tail::before {
    display: block;
    box-shadow:
        inset 0 -4px 7px rgba(132, 84, 40, 0.2),
        inset 0 3px 6px rgba(255, 255, 246, 0.75),
        0 4px 7px rgba(0, 0, 0, 0.2);
}

.life-silkworm-snake-link {
    position: absolute;
    z-index: 1;
    border-radius: 3px;
    background: var(--silkworm-body-skin);
    box-shadow: none;
}

.life-silkworm-snake-link--left,
.life-silkworm-snake-link--right {
    top: 23%;
    bottom: 29%;
}

.life-silkworm-snake-link--left {
    left: -14%;
    right: 42%;
}

.life-silkworm-snake-link--right {
    left: 42%;
    right: -14%;
}

.life-silkworm-snake-link--up,
.life-silkworm-snake-link--down {
    left: 31%;
    right: 31%;
    background: var(--silkworm-body-skin-vertical);
}

.life-silkworm-snake-link--up {
    top: -14%;
    bottom: 42%;
}

.life-silkworm-snake-link--down {
    top: 42%;
    bottom: -14%;
}

.life-silkworm-snake-body-art {
    position: relative;
    z-index: var(--silkworm-stack, 2);
    display: block;
    min-width: 0;
    min-height: 0;
    pointer-events: none;
    overflow: visible;
}

.life-silkworm-snake-body-art i {
    position: absolute;
    inset: -20% -30%;
    z-index: 1;
    display: block;
    background-image: url("images/life-mini-games/silkworm-snake/silkworm-unified-body-gpt-image2-v1.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.22));
    transform: translate3d(0, 0, 0) scale(1.06);
}

.life-silkworm-snake-link,
.life-silkworm-snake-cell--segment::before,
.life-silkworm-snake-cell--body i {
    display: none;
}

.life-silkworm-snake-body-piece--axis-vertical i {
    inset: -30% -20%;
    transform: rotate(90deg) scale(1.06);
}

.life-silkworm-snake-body-piece--axis-horizontal i {
    inset: -20% -30%;
}

.life-silkworm-snake-body-piece--axis-corner i {
    inset: -24% -28%;
}

.life-silkworm-snake-body-piece--tail-left i {
    transform: translateX(-7%) scale(1.08);
}

.life-silkworm-snake-body-piece--tail-right i {
    transform: translateX(7%) scale(1.08);
}

.life-silkworm-snake-body-piece--tail-up i {
    transform: translateY(-7%) rotate(90deg) scale(1.08);
}

.life-silkworm-snake-body-piece--tail-down i {
    transform: translateY(7%) rotate(90deg) scale(1.08);
}

.life-silkworm-snake-body-piece--axis-corner.life-silkworm-snake-body-piece--tail-left i {
    transform: translateX(-5%) scale(1.08);
}

.life-silkworm-snake-body-piece--axis-corner.life-silkworm-snake-body-piece--tail-right i {
    transform: translateX(5%) scale(1.08);
}

.life-silkworm-snake-body-piece--axis-corner.life-silkworm-snake-body-piece--tail-up i {
    transform: translateY(-5%) rotate(90deg) scale(1.08);
}

.life-silkworm-snake-body-piece--axis-corner.life-silkworm-snake-body-piece--tail-down i {
    transform: translateY(5%) rotate(90deg) scale(1.08);
}

.life-silkworm-snake-body-piece--head-left i {
    transform: translateX(-7%) scale(1.08);
}

.life-silkworm-snake-body-piece--head-right i {
    transform: translateX(7%) scale(1.08);
}

.life-silkworm-snake-body-piece--head-up i {
    transform: translateY(-7%) rotate(90deg) scale(1.08);
}

.life-silkworm-snake-body-piece--head-down i {
    transform: translateY(7%) rotate(90deg) scale(1.08);
}

.life-silkworm-snake-body-piece--axis-corner.life-silkworm-snake-body-piece--head-left i {
    transform: translateX(-5%) scale(1.08);
}

.life-silkworm-snake-body-piece--axis-corner.life-silkworm-snake-body-piece--head-right i {
    transform: translateX(5%) scale(1.08);
}

.life-silkworm-snake-body-piece--axis-corner.life-silkworm-snake-body-piece--head-up i {
    transform: translateY(-5%) rotate(90deg) scale(1.08);
}

.life-silkworm-snake-body-piece--axis-corner.life-silkworm-snake-body-piece--head-down i {
    transform: translateY(5%) rotate(90deg) scale(1.08);
}

.life-silkworm-snake-body-piece--neck i {
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.18));
}

.life-silkworm-snake-body-piece--tail i {
    opacity: 0.98;
}

.life-silkworm-snake-cell--body i,
.life-silkworm-snake-cell--head b,
.life-silkworm-snake-cell--leaf span {
    position: absolute;
    inset: -8%;
    display: grid;
    place-items: center;
    border-radius: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.28));
}

.life-silkworm-snake-cell--body i {
    display: none;
}

.life-silkworm-snake-cell--axis-vertical.life-silkworm-snake-cell--body i {
    inset: -9% 31%;
    background:
        linear-gradient(90deg, rgba(255, 255, 252, 0.32), rgba(255, 255, 252, 0.08) 42%, transparent 64%),
        radial-gradient(ellipse at 38% 30%, rgba(255, 255, 252, 0.14), transparent 42%);
    transform: none;
}

.life-silkworm-snake-cell--axis-corner.life-silkworm-snake-cell--body i {
    inset: 20%;
    opacity: 0.08;
}

.life-silkworm-snake-cell--head {
    z-index: 4;
}

.life-silkworm-snake-cell--head b {
    inset: -10%;
    z-index: 3;
    background-image: url("images/life-mini-games/silkworm-snake/silkworm-unified-head-down-gpt-image2-v1.png");
}

.life-silkworm-snake-cell--head-left b,
.life-silkworm-snake-cell--head-right b {
    inset: -18% -58%;
}

.life-silkworm-snake-cell--head-left b {
    background-image: url("images/life-mini-games/silkworm-snake/silkworm-unified-head-left-gpt-image2-v1.png");
}

.life-silkworm-snake-cell--head-right b {
    background-image: url("images/life-mini-games/silkworm-snake/silkworm-unified-head-right-gpt-image2-v1.png");
}

.life-silkworm-snake-cell--head-up b {
    inset: -16%;
    background-image: url("images/life-mini-games/silkworm-snake/silkworm-unified-head-up-gpt-image2-v1.png");
}

.life-silkworm-snake-cell--head-down b {
    background-image: url("images/life-mini-games/silkworm-snake/silkworm-unified-head-down-gpt-image2-v1.png");
}

.life-silkworm-snake-head-art {
    position: relative;
    z-index: 5;
    display: block;
    min-width: 0;
    min-height: 0;
    pointer-events: none;
    overflow: visible;
}

.life-silkworm-snake-head-art i {
    position: absolute;
    inset: -10%;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.24));
}

.life-silkworm-snake-head-art--left i,
.life-silkworm-snake-head-art--right i {
    inset: -18% -58%;
}

.life-silkworm-snake-head-art--left i {
    background-image: url("images/life-mini-games/silkworm-snake/silkworm-unified-head-left-gpt-image2-v1.png");
}

.life-silkworm-snake-head-art--right i {
    background-image: url("images/life-mini-games/silkworm-snake/silkworm-unified-head-right-gpt-image2-v1.png");
}

.life-silkworm-snake-head-art--up i {
    inset: -16%;
    background-image: url("images/life-mini-games/silkworm-snake/silkworm-unified-head-up-gpt-image2-v1.png");
}

.life-silkworm-snake-head-art--down i {
    background-image: url("images/life-mini-games/silkworm-snake/silkworm-unified-head-down-gpt-image2-v1.png");
}

.life-silkworm-snake-cell--head b {
    display: none;
}

.life-silkworm-snake-cell--leaf {
    z-index: 3;
}

.life-silkworm-snake-cell--leaf span {
    inset: 14%;
    z-index: 2;
    background-image: url("images/life-mini-games/silkworm-snake/mulberry-leaf-ordinary-gpt-image2-v1.png");
    transform: rotate(-18deg);
}

.life-silkworm-snake-cell--leaf-tender span {
    background-image: url("images/life-mini-games/silkworm-snake/mulberry-leaf-tender-gpt-image2-v1.png");
}

.life-silkworm-snake-cell--leaf-dewy span {
    background-image: url("images/life-mini-games/silkworm-snake/mulberry-leaf-dewy-gpt-image2-v1.png");
}

.life-silkworm-snake-cell--leaf-golden span {
    background-image: url("images/life-mini-games/silkworm-snake/mulberry-leaf-golden-gpt-image2-v1.png");
}

.life-silkworm-snake-feedback {
    min-height: 24px;
    color: #ffd27a;
    font-size: 0.92em;
    font-weight: 800;
    text-align: center;
}

.life-silkworm-snake--perfect .life-silkworm-snake-feedback {
    color: #f6f1d5;
}

.life-silkworm-snake--miss .life-silkworm-snake-feedback {
    color: #ff9d8f;
}

.life-silkworm-snake-action-hint {
    flex: 1 1 100%;
    color: #ffd27a;
    font-size: 0.86em;
    font-weight: 800;
}

.life-silkworm-snake-controls {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(48px, 1fr));
    gap: 8px;
}

.life-silkworm-snake-control {
    min-width: 0;
}

.life-silkworm-snake-control b {
    display: block;
    color: #ffd27a;
    font-size: 1.12em;
    line-height: 1;
}

.life-silkworm-snake-control strong {
    display: block;
    margin-top: 4px;
    font-size: 0.82em;
}

.life-silkworm-snake-settle {
    flex-basis: 100%;
}

.life-sort-samples {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.life-sort-rule {
    padding: 7px 10px;
    border: 1px solid rgba(255, 210, 122, 0.18);
    border-radius: 8px;
    color: #ffd27a;
    background: rgba(8, 12, 12, 0.56);
    font-size: 0.82em;
    font-weight: 800;
}

.life-sort-order {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(125, 207, 155, 0.24);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(125, 207, 155, 0.12), rgba(255, 210, 122, 0.08)),
        rgba(8, 18, 20, 0.68);
}

.life-sort-order b {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    color: #13211b;
    background: #7dcf9b;
    font-size: 0.78em;
    font-weight: 900;
    white-space: nowrap;
}

.life-sort-order span {
    min-width: 0;
    color: #f6f1d5;
    font-size: 0.84em;
    font-weight: 850;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.life-sort-sizzle-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.life-sort-sizzle-strip--order {
    grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
}

.life-sort-sizzle-strip span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(125, 207, 155, 0.2);
    border-radius: 8px;
    color: #bdd8d8;
    background: rgba(8, 18, 20, 0.66);
    font-size: 0.78em;
    font-weight: 800;
}

.life-sort-sizzle-strip b {
    color: #ffd27a;
    font-size: 1.08em;
}

.life-sort-timer {
    display: grid;
    grid-template-columns: auto auto minmax(120px, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 32px;
    padding: 7px 9px;
    border: 1px solid rgba(125, 207, 155, 0.26);
    border-radius: 8px;
    color: #d9f4ef;
    background: rgba(6, 20, 20, 0.72);
    font-size: 0.82em;
    font-weight: 850;
}

.life-sort-timer strong {
    color: #ffd27a;
    font-size: 1.04em;
}

.life-sort-timer b {
    display: block;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.life-sort-timer i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7dcf9b, #ffd27a);
    transition: width 0.24s ease;
}

.life-sort-timer--danger {
    border-color: rgba(255, 119, 86, 0.5);
    color: #ffe1d9;
    animation: lifeSortTimerPulse 0.62s ease-in-out infinite alternate;
}

.life-sort-timer--danger i {
    background: linear-gradient(90deg, #ff7756, #ffd27a);
}

@keyframes lifeSortTimerPulse {
    from { box-shadow: 0 0 0 rgba(255, 119, 86, 0); }
    to { box-shadow: 0 0 18px rgba(255, 119, 86, 0.22); }
}

.life-sort-rush-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(255, 210, 122, 0.48);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(69, 34, 16, 0.82), rgba(12, 44, 41, 0.82));
    box-shadow: inset 0 0 20px rgba(255, 210, 122, 0.12);
}

.life-sort-rush-offer span,
.life-sort-rush-offer strong,
.life-sort-rush-offer em {
    display: block;
}

.life-sort-rush-offer span {
    color: #ffd27a;
    font-size: 0.76em;
    font-weight: 900;
}

.life-sort-rush-offer strong {
    color: #fff7de;
    font-size: 0.98em;
}

.life-sort-rush-offer em {
    color: #cfe8df;
    font-size: 0.78em;
    font-style: normal;
    line-height: 1.35;
}

.life-sort-rush-offer button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 210, 122, 0.45);
    border-radius: 8px;
    color: #20180b;
    background: #ffd27a;
    font-weight: 900;
    cursor: pointer;
}

.life-sort-rush-offer button + button {
    color: #eaf7f4;
    border-color: rgba(190, 222, 219, 0.32);
    background: rgba(15, 42, 45, 0.92);
}

.life-sort-sample {
    display: grid;
    gap: 5px;
    min-height: 76px;
    padding: 10px;
    text-align: left;
}

.life-sort-sample:has(.life-sort-art) {
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
}

.life-sort-art {
    display: block;
    width: 58px;
    height: 58px;
    border-radius: 8px;
    background-repeat: no-repeat;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.life-sort-sample .life-sort-art {
    grid-row: 1 / span 4;
    background-image: url("images/life-mini-games/livestock-order/livestock-products-10x3-sheet-v3.png");
    background-size: 1000% 300%;
}

.life-sort-art--bin {
    background-image: url("images/life-mini-games/livestock-order/livestock-order-icons-concept-sheet-v1.png");
    background-size: 400% 300%;
}

.life-sort-art--egg-fresh { background-position: 0% 0%; }
.life-sort-art--milk-fresh { background-position: 11.111% 0%; }
.life-sort-art--wool-clean { background-position: 22.222% 0%; }
.life-sort-art--hide-smooth { background-position: 33.333% 0%; }
.life-sort-art--honey-golden { background-position: 44.444% 0%; }
.life-sort-art--feather-clean { background-position: 55.555% 0%; }
.life-sort-art--cheese-fresh { background-position: 66.666% 0%; }
.life-sort-art--butter-golden { background-position: 77.777% 0%; }
.life-sort-art--meat-premium { background-position: 88.888% 0%; }
.life-sort-art--beeswax-clean { background-position: 100% 0%; }
.life-sort-art--egg-cracked { background-position: 0% 50%; }
.life-sort-art--milk-cloudy { background-position: 11.111% 50%; }
.life-sort-art--wool-damp { background-position: 22.222% 50%; }
.life-sort-art--hide-scratched { background-position: 33.333% 50%; }
.life-sort-art--honey-cloudy { background-position: 44.444% 50%; }
.life-sort-art--feather-damp { background-position: 55.555% 50%; }
.life-sort-art--cheese-cracked { background-position: 66.666% 50%; }
.life-sort-art--butter-soft { background-position: 77.777% 50%; }
.life-sort-art--meat-uneven { background-position: 88.888% 50%; }
.life-sort-art--beeswax-cloudy { background-position: 100% 50%; }
.life-sort-art--egg-spoiled { background-position: 0% 100%; }
.life-sort-art--milk-sour { background-position: 11.111% 100%; }
.life-sort-art--wool-moldy { background-position: 22.222% 100%; }
.life-sort-art--hide-torn { background-position: 33.333% 100%; }
.life-sort-art--honey-fermented { background-position: 44.444% 100%; }
.life-sort-art--feather-dirty { background-position: 55.555% 100%; }
.life-sort-art--cheese-moldy { background-position: 66.666% 100%; }
.life-sort-art--butter-rancid { background-position: 77.777% 100%; }
.life-sort-art--meat-spoiled { background-position: 88.888% 100%; }
.life-sort-art--beeswax-cracked { background-position: 100% 100%; }
.life-sort-art--deliver { background-position: 0% 100%; }
.life-sort-art--rework { background-position: 33.333% 100%; }
.life-sort-art--discard { background-position: 66.666% 100%; }
.life-sort-art--reject { background-position: 100% 100%; }

.life-sort-sample b,
.life-sort-bin b {
    display: block;
    color: #f8fbfc;
    font-size: 0.95em;
}

.life-sort-sample em,
.life-sort-bin em {
    display: inline-flex;
    min-width: 22px;
    height: 22px;
    margin-top: 7px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #1b1408;
    background: #ffd27a;
    font-size: 0.76em;
    font-style: normal;
    font-weight: 900;
}

.life-sort-sample small {
    display: inline-flex;
    width: fit-content;
    margin-top: 6px;
    padding: 2px 7px;
    border: 1px solid rgba(255, 210, 122, 0.35);
    border-radius: 999px;
    color: #ffd27a;
    background: rgba(44, 31, 12, 0.72);
    font-size: 0.72em;
    font-weight: 900;
}

.life-sort-sample--placed {
    opacity: 0.86;
}

.life-sort-sample--spotlight {
    border-color: rgba(255, 210, 122, 0.5);
    box-shadow: inset 0 0 18px rgba(255, 210, 122, 0.1);
}

.life-sort-sample--hot {
    border-color: rgba(255, 210, 122, 0.95);
    box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.18), inset 0 0 24px rgba(255, 210, 122, 0.18);
}

.life-sort-bins {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.life-sort-bin {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 4px 8px;
    align-items: center;
    min-height: 84px;
    padding: 10px 8px;
}

.life-sort-bin .life-sort-art {
    width: 44px;
    height: 44px;
    grid-row: 1 / span 3;
}

.life-link-board {
    min-height: 0;
    padding: 12px;
    border: 1px solid rgba(255, 210, 122, 0.2);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(7, 11, 12, 0.12), rgba(7, 11, 12, 0.62)),
        url("images/life-mini-games/herbal-link-board-endless-v1.png") center / cover no-repeat,
        #162125;
}

.life-link-head {
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(10, 14, 15, 0.58);
}

.life-link-head em {
    color: #7dcf9b;
}

.life-link-timer {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    min-height: 28px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 210, 122, 0.2);
    border-radius: 8px;
    background: rgba(9, 14, 15, 0.66);
}

.life-link-timer span,
.life-link-timer strong {
    position: relative;
    z-index: 1;
    font-size: 0.82em;
    line-height: 1.2;
}

.life-link-timer span {
    color: #dfe8ea;
    font-weight: 800;
}

.life-link-timer strong {
    color: #ffd27a;
}

.life-link-timer b {
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #7dcf9b, #ffd27a, #efa195);
    transition: width 0.28s ease;
}

.life-link-grid {
    display: grid;
    grid-template-columns: repeat(var(--life-link-cols, 5), minmax(0, 1fr));
    gap: var(--life-link-gap, 6px);
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.life-link-cell {
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    border: 1px solid rgba(220, 235, 225, 0.16);
    border-radius: 8px;
    color: #f8fbfc;
}

.life-link-tile,
.life-link-cell--blocker {
    display: grid;
    grid-template-rows: minmax(20px, 1fr) auto auto;
    place-items: center;
    gap: 1px;
    padding: var(--life-link-tile-pad-y, 6px) var(--life-link-tile-pad-x, 5px);
    cursor: pointer;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.16), transparent 32%),
        linear-gradient(145deg, rgba(39, 72, 58, 0.96), rgba(16, 34, 31, 0.98));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 8px 18px rgba(0, 0, 0, 0.2);
}

.life-link-tile b,
.life-link-cell--blocker b {
    display: grid;
    width: var(--life-link-mark-size, 30px);
    height: var(--life-link-mark-size, 30px);
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #152018;
    background: #dfe8c7;
    font-size: var(--life-link-mark-font, 0.98em);
    line-height: 1;
}

.life-link-tile strong {
    max-width: 100%;
    color: #f8fbfc;
    font-size: var(--life-link-name-font, 0.82em);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-link-tile span,
.life-link-cell--blocker span {
    max-width: 100%;
    color: rgba(225, 237, 232, 0.8);
    font-size: var(--life-link-clue-font, 0.66em);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-link-tile--selected {
    border-color: rgba(255, 210, 122, 0.95);
    box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.2), 0 10px 24px rgba(0, 0, 0, 0.24);
    transform: translateY(-1px);
}

.life-link-tile--green {
    background: radial-gradient(circle at 30% 20%, rgba(218, 255, 207, 0.18), transparent 32%), linear-gradient(145deg, #315c3d, #132b25);
}

.life-link-tile--violet {
    background: radial-gradient(circle at 30% 20%, rgba(238, 211, 255, 0.18), transparent 32%), linear-gradient(145deg, #59416f, #211f3e);
}

.life-link-tile--ivory {
    background: radial-gradient(circle at 30% 20%, rgba(255, 250, 221, 0.22), transparent 32%), linear-gradient(145deg, #806d4f, #2c2a22);
}

.life-link-tile--red {
    background: radial-gradient(circle at 30% 20%, rgba(255, 215, 205, 0.18), transparent 32%), linear-gradient(145deg, #754037, #311d20);
}

.life-link-tile--gold {
    background: radial-gradient(circle at 30% 20%, rgba(255, 235, 167, 0.2), transparent 32%), linear-gradient(145deg, #76612b, #332912);
}

.life-link-tile--jade {
    background: radial-gradient(circle at 30% 20%, rgba(205, 255, 236, 0.18), transparent 32%), linear-gradient(145deg, #2d695e, #162d31);
}

.life-link-tile--amber {
    background: radial-gradient(circle at 30% 20%, rgba(255, 223, 178, 0.18), transparent 32%), linear-gradient(145deg, #714f2e, #2d2117);
}

.life-link-tile--rose {
    background: radial-gradient(circle at 30% 20%, rgba(255, 214, 229, 0.18), transparent 32%), linear-gradient(145deg, #70415a, #2c1f2c);
}

.life-link-tile--copper {
    background: radial-gradient(circle at 30% 20%, rgba(255, 206, 158, 0.18), transparent 32%), linear-gradient(145deg, #724837, #2d1e18);
}

.life-link-tile--snow {
    background: radial-gradient(circle at 30% 20%, rgba(244, 255, 255, 0.2), transparent 32%), linear-gradient(145deg, #4e6d70, #1d3038);
}

.life-link-tile--ink {
    background: radial-gradient(circle at 30% 20%, rgba(195, 208, 218, 0.18), transparent 32%), linear-gradient(145deg, #31384b, #151925);
}

.life-link-cell--blocker {
    border-style: dashed;
    color: #9fb2bb;
    background: linear-gradient(145deg, rgba(55, 56, 55, 0.82), rgba(18, 20, 20, 0.95));
    opacity: 0.72;
}

.life-link-cell--blocker b {
    color: #2c1b1b;
    background: #a87769;
}

.life-link-cell--empty {
    border-color: rgba(255, 255, 255, 0.04);
    background: rgba(0, 0, 0, 0.12);
}

.life-link-feedback {
    min-height: 24px;
    padding: 7px 10px;
    border-radius: 8px;
    color: #f8fbfc;
    background: rgba(10, 14, 15, 0.58);
    font-size: 0.88em;
    font-weight: 800;
    text-align: center;
}

.life-link-board--perfect .life-link-feedback {
    color: #9be1af;
}

.life-link-board--good .life-link-feedback {
    color: #ffd27a;
}

.life-link-board--miss .life-link-feedback {
    color: #efa195;
}

.life-probe-board {
    min-height: 0;
    padding: 12px;
    border: 1px solid rgba(116, 216, 191, 0.2);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(5, 10, 12, 0.08), rgba(5, 10, 12, 0.62)),
        url("images/life-mini-games/mining-probe-board-v1.png") center / cover no-repeat,
        #111719;
}

.life-probe-head {
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(8, 12, 14, 0.62);
}

.life-probe-head em {
    color: #efa195;
}

.life-probe-head i {
    color: #7dcf9b;
}

.life-probe-head small {
    color: #c9a8ff;
}

.life-probe-risk {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.life-probe-risk span {
    position: relative;
    min-height: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(7, 12, 14, 0.72);
}

.life-probe-risk b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6fd2b5, #ffd27a);
}

.life-probe-risk__pressure b {
    background: linear-gradient(90deg, #f2a56f, #e66f73);
}

.life-probe-risk em {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(248, 251, 252, 0.9);
    font-size: 0.68em;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.life-probe-grid {
    display: grid;
    grid-template-columns: repeat(var(--life-probe-cols, 5), minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.life-probe-cell {
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    border: 1px solid rgba(153, 203, 198, 0.16);
    border-radius: 8px;
    color: #f8fbfc;
}

.life-probe-cell {
    display: grid;
    grid-template-rows: minmax(22px, 1fr) auto;
    place-items: center;
    gap: 2px;
    padding: 6px 5px;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.12), transparent 34%),
        linear-gradient(145deg, rgba(42, 53, 54, 0.96), rgba(17, 24, 25, 0.98));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.22);
}

.life-probe-cell b {
    display: grid;
    width: 31px;
    height: 31px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #142020;
    background: #d9e6d0;
    font-size: 0.92em;
    line-height: 1;
}

.life-probe-cell span {
    max-width: 100%;
    color: rgba(226, 238, 236, 0.84);
    font-size: 0.66em;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-probe-cell--hidden {
    cursor: pointer;
    background:
        radial-gradient(circle at 35% 24%, rgba(116, 216, 191, 0.16), transparent 34%),
        linear-gradient(145deg, #263539, #121a1c);
}

.life-probe-cell--hidden b {
    color: #10201d;
    background: #74d8bf;
}

.life-probe-cell--hinted {
    border-color: rgba(255, 210, 122, 0.92);
    box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.18), 0 0 22px rgba(255, 210, 122, 0.22);
}

.life-probe-cell--hinted b {
    background: #ffd27a;
}

.life-probe-cell--ore {
    border-color: rgba(255, 210, 122, 0.72);
}

.life-probe-cell--ore b {
    background: #ffd27a;
}

.life-probe-cell--rare {
    border-color: rgba(201, 168, 255, 0.86);
    box-shadow: 0 0 0 2px rgba(201, 168, 255, 0.15), 0 0 24px rgba(201, 168, 255, 0.22);
}

.life-probe-cell--rare b {
    color: #201238;
    background: #d8c2ff;
}

.life-probe-cell--gold {
    background: radial-gradient(circle at 35% 24%, rgba(255, 228, 141, 0.22), transparent 34%), linear-gradient(145deg, #6f5524, #241f14);
}

.life-probe-cell--jade {
    background: radial-gradient(circle at 35% 24%, rgba(154, 255, 211, 0.2), transparent 34%), linear-gradient(145deg, #24604d, #152a2d);
}

.life-probe-cell--blue {
    background: radial-gradient(circle at 35% 24%, rgba(127, 210, 255, 0.22), transparent 34%), linear-gradient(145deg, #284f68, #182936);
}

.life-probe-cell--red {
    background: radial-gradient(circle at 35% 24%, rgba(255, 174, 145, 0.22), transparent 34%), linear-gradient(145deg, #6a3b31, #2b1d1b);
}

.life-probe-cell--stone {
    background: linear-gradient(145deg, rgba(48, 56, 57, 0.94), rgba(22, 28, 29, 0.96));
}

.life-probe-cell--stone b {
    color: #162022;
    background: #b7c3bd;
}

.life-probe-cell--warm b {
    background: #ffd27a;
}

.life-probe-cell--resonance {
    border-color: rgba(116, 216, 191, 0.82);
    box-shadow: 0 0 0 2px rgba(116, 216, 191, 0.13), inset 0 0 22px rgba(116, 216, 191, 0.12);
}

.life-probe-cell--fissure {
    border-color: rgba(230, 128, 112, 0.72);
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 110, 97, 0.2), transparent 34%),
        linear-gradient(145deg, #56313a, #1f171b);
}

.life-probe-cell--fissure b {
    color: #2c1414;
    background: #efa195;
}

.life-probe-feedback {
    min-height: 24px;
    padding: 7px 10px;
    border-radius: 8px;
    color: #f8fbfc;
    background: rgba(8, 12, 14, 0.62);
    font-size: 0.88em;
    font-weight: 800;
    text-align: center;
}

.life-probe-board--perfect .life-probe-feedback {
    color: #9be1af;
}

.life-probe-board--good .life-probe-feedback {
    color: #ffd27a;
}

.life-probe-board--miss .life-probe-feedback {
    color: #efa195;
}

.life-seed-board {
    min-height: 300px;
    padding: 14px;
    border: 1px solid rgba(126, 207, 155, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(26, 45, 34, 0.9), rgba(11, 22, 20, 0.94)),
        url("images/life-mini-games/sequence-flow-board-v1.png") center / cover no-repeat;
    box-shadow: inset 0 0 30px rgba(20, 38, 24, 0.72);
}

.life-seed-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.life-seed-head strong,
.life-seed-head span,
.life-seed-head em,
.life-seed-head i {
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid rgba(255, 210, 122, 0.18);
    border-radius: 999px;
    color: #f6f1d5;
    background: rgba(6, 20, 17, 0.72);
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-seed-draw-options,
.life-seed-blind-options {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.life-seed-blind-options--compact {
    margin-bottom: 10px;
}

.life-seed-draw-card,
.life-seed-blind-card {
    display: grid;
    min-width: 0;
    min-height: 146px;
    grid-template-rows: 58px auto auto auto;
    align-items: center;
    gap: 7px;
    padding: 12px 10px;
    border: 1px solid rgba(255, 210, 122, 0.22);
    border-radius: 8px;
    color: #f8fbfc;
    background: linear-gradient(180deg, rgba(33, 58, 42, 0.88), rgba(13, 28, 24, 0.92));
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.life-seed-draw-card:hover,
.life-seed-blind-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 210, 122, 0.74);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22), 0 0 18px rgba(255, 210, 122, 0.16);
    filter: brightness(1.06);
}

.life-seed-draw-card b,
.life-seed-blind-card b {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    justify-self: center;
    border-radius: 50%;
    color: #2c2410;
    background: #ffd27a;
    font-size: 1.08em;
    line-height: 1;
}

.life-seed-icon {
    display: block;
    width: 58px;
    height: 58px;
    justify-self: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 8px 9px rgba(0, 0, 0, 0.28));
    overflow: visible;
    text-align: initial;
}

.life-seed-icon--hidden {
    width: 62px;
    height: 62px;
}

.life-seed-icon--golden,
.life-seed-icon--rare {
    filter: drop-shadow(0 0 12px rgba(255, 210, 122, 0.42)) drop-shadow(0 8px 9px rgba(0, 0, 0, 0.26));
}

.life-seed-draw-card strong,
.life-seed-draw-card span,
.life-seed-draw-card em,
.life-seed-blind-card strong,
.life-seed-blind-card span,
.life-seed-blind-card em {
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
}

.life-seed-draw-card strong,
.life-seed-blind-card strong {
    color: #f6f1d5;
    font-size: 1em;
}

.life-seed-draw-card span,
.life-seed-draw-card em,
.life-seed-blind-card span,
.life-seed-blind-card em {
    color: rgba(225, 239, 218, 0.84);
    font-size: 0.78em;
    font-style: normal;
    font-weight: 800;
    line-height: 1.2;
}

.life-seed-draw-card--rare,
.life-seed-draw-card--golden,
.life-seed-blind-card--rare,
.life-seed-blind-card--golden {
    border-color: rgba(255, 210, 122, 0.34);
    background: linear-gradient(180deg, rgba(70, 52, 22, 0.9), rgba(27, 31, 22, 0.94));
}

.life-seed-draw-card--golden b,
.life-seed-blind-card--golden b {
    box-shadow: 0 0 18px rgba(255, 210, 122, 0.42);
}

.life-seed-blind-card--golden .life-seed-icon,
.life-seed-blind-card--rare .life-seed-icon {
    transform: translateY(-1px) scale(1.05);
}

.life-seed-blind-card--hidden {
    border-style: dashed;
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 210, 122, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(55, 47, 31, 0.92), rgba(17, 32, 27, 0.95));
}

.life-seed-blind-card--hidden b {
    color: #ffd27a;
    background: rgba(255, 210, 122, 0.12);
}

.life-seed-blind-card--hidden .life-seed-icon {
    filter: drop-shadow(0 0 13px rgba(255, 210, 122, 0.25)) drop-shadow(0 8px 9px rgba(0, 0, 0, 0.3));
}

.life-seed-blind-card--selected {
    border-color: rgba(255, 210, 122, 0.92);
    box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.18), 0 0 18px rgba(255, 210, 122, 0.18);
}

.life-seed-current {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 210, 122, 0.22);
    border-radius: 8px;
    color: #f6f1d5;
    background: rgba(6, 20, 17, 0.72);
    font-weight: 800;
}

.life-seed-current b {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    color: #2c2410;
    background: #ffd27a;
}

.life-seed-current .life-seed-icon {
    width: 52px;
    height: 52px;
    justify-self: center;
}

.life-seed-current span:not(.life-seed-icon) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-seed-harvest-reveal {
    margin: 12px 0 0;
    padding: 12px;
    border: 1px solid rgba(255, 210, 122, 0.24);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 210, 122, 0.18), transparent 34%),
        rgba(6, 18, 16, 0.76);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 12px 26px rgba(0, 0, 0, 0.22);
    animation: lifeSeedRevealPanel 420ms ease-out both;
}

.life-seed-harvest-reveal--perfect {
    border-color: rgba(255, 210, 122, 0.58);
    box-shadow: 0 0 28px rgba(255, 210, 122, 0.24), inset 0 1px rgba(255, 255, 255, 0.12);
}

.life-seed-harvest-reveal--miss {
    border-color: rgba(230, 128, 112, 0.44);
}

.life-seed-harvest-summary {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, minmax(0, 0.8fr));
    gap: 8px;
    margin-bottom: 10px;
}

.life-seed-harvest-summary strong,
.life-seed-harvest-summary span,
.life-seed-harvest-summary em,
.life-seed-harvest-summary i {
    min-width: 0;
    padding: 6px 10px;
    border-radius: 999px;
    color: #f6f1d5;
    background: rgba(5, 14, 13, 0.66);
    font-size: 0.84em;
    font-style: normal;
    font-weight: 900;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-seed-harvest-summary strong {
    color: #2c2410;
    background: #ffd27a;
}

.life-seed-harvest-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.life-seed-harvest-card {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 112px;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 4px 8px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid rgba(125, 207, 155, 0.32);
    border-radius: 8px;
    color: #eef7df;
    background:
        radial-gradient(circle at 18% 18%, rgba(125, 207, 155, 0.18), transparent 36%),
        linear-gradient(145deg, rgba(20, 56, 39, 0.9), rgba(8, 23, 20, 0.94));
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    animation: lifeSeedHarvestCardIn 520ms cubic-bezier(0.18, 0.9, 0.24, 1) both;
    animation-delay: calc(var(--life-seed-reveal-index, 0) * 85ms);
}

.life-seed-harvest-card::after {
    position: absolute;
    inset: -40% auto auto -35%;
    width: 70%;
    height: 160%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    transform: rotate(18deg) translateX(-120%);
    animation: lifeSeedHarvestSweep 1100ms ease-out both;
    animation-delay: calc(120ms + var(--life-seed-reveal-index, 0) * 85ms);
    pointer-events: none;
}

.life-seed-harvest-card .life-seed-icon {
    grid-row: 1 / span 3;
    width: 50px;
    height: 50px;
}

.life-seed-harvest-card b {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    justify-self: end;
    border-radius: 50%;
    color: #17231c;
    background: #9be1af;
    font-size: 0.88em;
    font-weight: 900;
}

.life-seed-harvest-card strong,
.life-seed-harvest-card span,
.life-seed-harvest-card em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-seed-harvest-card strong {
    color: #f6f1d5;
    font-size: 1em;
    font-weight: 900;
}

.life-seed-harvest-card span,
.life-seed-harvest-card em {
    color: rgba(225, 239, 218, 0.86);
    font-size: 0.78em;
    font-style: normal;
    font-weight: 800;
}

.life-seed-harvest-card--perfect {
    border-color: rgba(255, 210, 122, 0.76);
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 210, 122, 0.26), transparent 38%),
        linear-gradient(145deg, rgba(86, 61, 20, 0.94), rgba(22, 28, 17, 0.96));
    box-shadow: 0 0 24px rgba(255, 210, 122, 0.28), 0 10px 18px rgba(0, 0, 0, 0.24);
}

.life-seed-harvest-card--perfect b {
    color: #2c2410;
    background: #ffd27a;
    box-shadow: 0 0 16px rgba(255, 210, 122, 0.44);
}

.life-seed-harvest-card--burst {
    animation-name: lifeSeedHarvestCardIn, lifeSeedHarvestBurst;
    animation-duration: 520ms, 1200ms;
    animation-delay: calc(var(--life-seed-reveal-index, 0) * 85ms), 520ms;
    animation-timing-function: cubic-bezier(0.18, 0.9, 0.24, 1), ease-in-out;
    animation-fill-mode: both, both;
}

.life-seed-harvest-card--miss {
    border-color: rgba(230, 128, 112, 0.58);
    color: #ffe6e2;
    background:
        radial-gradient(circle at 18% 18%, rgba(230, 128, 112, 0.2), transparent 38%),
        linear-gradient(145deg, rgba(74, 35, 31, 0.94), rgba(24, 17, 17, 0.96));
    animation-name: lifeSeedHarvestCardIn, lifeSeedHarvestMiss;
    animation-duration: 520ms, 520ms;
    animation-delay: calc(var(--life-seed-reveal-index, 0) * 85ms), calc(360ms + var(--life-seed-reveal-index, 0) * 85ms);
    animation-timing-function: cubic-bezier(0.18, 0.9, 0.24, 1), ease-in-out;
    animation-fill-mode: both, both;
}

.life-seed-harvest-card--miss b {
    color: #2c1414;
    background: #efa195;
}

.life-seed-blind-card--harvested {
    pointer-events: none;
}

.life-seed-blind-card--result-good,
.life-seed-blind-card--result-perfect {
    border-color: rgba(125, 207, 155, 0.48);
}

.life-seed-blind-card--result-perfect {
    border-color: rgba(255, 210, 122, 0.72);
}

.life-seed-blind-card--result-miss {
    border-color: rgba(230, 128, 112, 0.54);
    opacity: 0.9;
}

.life-seed-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.life-seed-action-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.22));
}

.life-seed-harvest-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    margin: 10px 0 8px;
    color: #f6f1d5;
    font-weight: 800;
}

.life-seed-harvest-title strong {
    padding: 5px 10px;
    border: 1px solid rgba(255, 210, 122, 0.3);
    border-radius: 999px;
    background: rgba(6, 20, 17, 0.72);
}

.life-seed-harvest-title span {
    min-width: 0;
    color: rgba(225, 239, 218, 0.84);
    font-size: 0.82em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-seed-plots {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.life-seed-plot {
    display: flex;
    min-width: 0;
    min-height: 92px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(125, 207, 155, 0.25);
    border-radius: 8px;
    color: #eef7df;
    background: rgba(18, 45, 34, 0.72);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.life-seed-plot b {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    color: #ffd27a;
    background: rgba(255, 210, 122, 0.15);
    line-height: 1;
}

.life-seed-plot span {
    max-width: 100%;
    color: rgba(238, 247, 223, 0.9);
    font-size: 0.76em;
    font-weight: 800;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-seed-plot--hidden {
    cursor: pointer;
    border-color: rgba(255, 210, 122, 0.24);
    background: linear-gradient(180deg, rgba(62, 49, 25, 0.86), rgba(22, 36, 25, 0.9));
}

.life-seed-plot--good {
    border-color: rgba(125, 207, 155, 0.76);
    box-shadow: 0 0 18px rgba(125, 207, 155, 0.2);
}

.life-seed-plot--perfect {
    border-color: rgba(255, 210, 122, 0.9);
    box-shadow: 0 0 24px rgba(255, 210, 122, 0.32);
    transform: translateY(-2px);
}

.life-seed-plot--miss {
    border-color: rgba(255, 126, 118, 0.52);
    color: #ffd7d2;
}

.life-seed-plot--golden b,
.life-seed-plot--rare b,
.life-seed-plot--mutant b {
    color: #2c2410;
    background: #ffd27a;
}

.life-seed-feedback {
    min-height: 24px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #f6f1d5;
    background: rgba(6, 18, 16, 0.72);
    font-weight: 800;
    text-align: center;
}

.life-seed-board--perfect .life-seed-feedback {
    color: #9be1af;
}

.life-seed-board--good .life-seed-feedback {
    color: #ffd27a;
}

.life-seed-board--miss .life-seed-feedback {
    color: #efa195;
}

.life-seed-seed-choice {
    min-height: 62px;
}

.life-seed-seed-choice b {
    color: #ffd27a;
}

@media (min-width: 761px) {
    .life-mini-game-shell--probe .life-probe-board {
        gap: 8px;
        padding: 10px;
    }

    .life-mini-game-shell--probe .life-probe-head {
        padding: 7px 9px;
    }

    .life-mini-game-shell--probe .life-probe-grid {
        max-width: min(500px, calc(92vh - 295px));
    }

    .life-mini-game-shell--probe .life-probe-cell {
        border-radius: 7px;
    }

    .life-mini-game-shell--probe .life-probe-cell::before {
        width: min(44px, 72%);
        height: min(44px, 72%);
    }
}

.life-timing-workbench {
    position: relative;
    overflow: hidden;
}

.life-timing-workbench::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 104px;
    height: 104px;
    background: url("images/life-mini-games/elements/timing-anvil-v1.png?v=20260608-ai-v2") center / contain no-repeat;
    opacity: 0.72;
    transform: translateX(-50%);
    pointer-events: none;
}

.life-timing-track {
    z-index: 1;
    contain: layout paint;
}

.life-timing-track em {
    background:
        linear-gradient(90deg, rgba(255, 210, 122, 0.18), rgba(255, 210, 122, 0.46), rgba(255, 210, 122, 0.18));
}

.life-timing-track .life-timing-echo {
    background: rgba(116, 216, 191, 0.24);
    outline-color: rgba(116, 216, 191, 0.68);
}

.life-timing-danger {
    position: absolute;
    top: 7px;
    bottom: 7px;
    border-radius: 8px;
    background: rgba(230, 128, 112, 0.28);
    outline: 1px solid rgba(230, 128, 112, 0.74);
}

.life-timing-wood-heart {
    position: absolute;
    top: 4px;
    bottom: 4px;
    z-index: 2;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 246, 184, 0.9), rgba(255, 210, 122, 0.42) 44%, rgba(116, 216, 191, 0.2) 72%);
    outline: 1px solid rgba(255, 236, 164, 0.78);
    box-shadow: 0 0 18px rgba(255, 210, 122, 0.32), inset 0 0 12px rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

.life-timing-wood-heart span {
    max-width: 100%;
    padding: 0 4px;
    color: #2c2410;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-timing-wood-heart--hit {
    animation: lifeTimingWoodHeartHit 900ms ease both;
}

.life-timing-board--variant-drift .life-timing-track em:not(.life-timing-echo) {
    animation: lifeTimingBandPulse 1.2s ease-in-out infinite;
}

.life-timing-runner {
    top: -5px;
    bottom: auto;
    left: 0;
    width: 34px;
    height: 54px;
    background: url("images/life-mini-games/elements/timing-hammer-runner-v1.png?v=20260608-ai-v2") center / contain no-repeat;
    box-shadow: none;
    transform: translate3d(0, 0, 0) translateX(-50%);
    animation: none;
    will-change: transform;
}

.life-timing-score-pop {
    position: absolute;
    top: -34px;
    z-index: 4;
    min-width: 72px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #17100a;
    font-size: 15px;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
    background: linear-gradient(135deg, #fff3bd, #f6b943 72%, #d56f2a);
    box-shadow: 0 0 18px rgba(255, 210, 122, 0.72), 0 8px 18px rgba(0, 0, 0, 0.28);
    transform: translateX(-50%);
    animation: lifeTimingScorePop 920ms cubic-bezier(0.18, 0.9, 0.24, 1) both;
    pointer-events: none;
}

.life-timing-score-pop--good {
    color: #08231f;
    background: linear-gradient(135deg, #d7fff4, #74d8bf);
    box-shadow: 0 0 16px rgba(116, 216, 191, 0.55), 0 8px 18px rgba(0, 0, 0, 0.24);
}

.life-timing-score-pop--miss {
    color: #ffe8e2;
    background: linear-gradient(135deg, #75433d, #2b1818);
    box-shadow: 0 0 12px rgba(230, 128, 112, 0.42), 0 8px 18px rgba(0, 0, 0, 0.22);
}

.life-balance-fish b {
    width: 72px;
    height: 54px;
    color: transparent;
    background: url("images/life-mini-games/elements/fishing-fish-v1.png?v=20260608-ai-v2") center / contain no-repeat;
    box-shadow: 0 0 24px rgba(116, 216, 191, 0.28);
}

.life-balance-line {
    z-index: 1;
}

.life-balance-line::after {
    content: "";
    position: absolute;
    left: -17px;
    top: 50%;
    width: 34px;
    height: 34px;
    background: url("images/life-mini-games/elements/fishing-hook-v1.png?v=20260608-ai-v2") center / contain no-repeat;
    transform: translateY(-47%) rotate(17deg);
}

.life-aim-lane {
    position: relative;
    padding-top: 50px;
}

.life-aim-lane::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 46px;
    height: 46px;
    background: url("images/life-mini-games/elements/hunting-track-v1.png?v=20260608-ai-v2") center / contain no-repeat;
    opacity: 0.82;
    transform: translateX(-50%);
}

.life-aim-lane--target::before {
    width: 54px;
    height: 54px;
    background-image: url("images/life-mini-games/elements/hunting-beast-v1.png?v=20260608-ai-v2");
    opacity: 1;
}

.life-aim-mode b {
    background:
        rgba(125, 207, 155, 0.86)
        url("images/life-mini-games/elements/hunting-arrow-v1.png?v=20260608-ai-v2") center / 22px 22px no-repeat;
}

.life-mix-channel-name {
    grid-template-columns: 30px minmax(0, 1fr) auto;
}

.life-mix-channel-name::before {
    content: "";
    width: 28px;
    height: 28px;
    background: url("images/life-mini-games/elements/mix-vial-fire-v1.png?v=20260608-ai-v2") center / contain no-repeat;
}

.life-mix-channel--slot-1 .life-mix-channel-name::before {
    background-image: url("images/life-mini-games/elements/mix-vial-water-v1.png?v=20260608-ai-v2");
}

.life-mix-channel--slot-2 .life-mix-channel-name::before {
    background-image: url("images/life-mini-games/elements/mix-vial-jade-v1.png?v=20260608-ai-v2");
}

.life-sequence-node {
    grid-template-rows: 52px auto;
}

.life-sequence-node::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
    width: 48px;
    height: 48px;
    align-self: center;
    justify-self: center;
    background: url("images/life-mini-games/elements/sequence-token-seed-v1.png?v=20260608-ai-v2") center / contain no-repeat;
}

.life-sequence-node b {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    width: 22px;
    height: 22px;
    align-self: end;
    justify-self: end;
    margin-right: 18px;
    font-size: 0.74em;
}

.life-sequence-node span {
    grid-column: 1;
    grid-row: 2;
}

.life-sequence-node--step-1::before {
    background-image: url("images/life-mini-games/elements/sequence-token-water-v1.png?v=20260608-ai-v2");
}

.life-sequence-node--step-2::before {
    background-image: url("images/life-mini-games/elements/sequence-token-tool-v1.png?v=20260608-ai-v2");
}

.life-sequence-node--step-3::before {
    background-image: url("images/life-mini-games/elements/sequence-token-store-v1.png?v=20260608-ai-v2");
}

.life-rhythm-note b {
    width: 42px;
    height: 42px;
    color: transparent;
    background: url("images/life-mini-games/elements/rhythm-arrow-up-v1.png?v=20260608-ai-v2") center / contain no-repeat;
}

.life-rhythm-note--dir-left b {
    background-image: url("images/life-mini-games/elements/rhythm-arrow-left-v1.png?v=20260608-ai-v2");
}

.life-rhythm-note--dir-down b {
    background-image: url("images/life-mini-games/elements/rhythm-arrow-down-v1.png?v=20260608-ai-v2");
}

.life-rhythm-note--dir-right b {
    background-image: url("images/life-mini-games/elements/rhythm-arrow-right-v1.png?v=20260608-ai-v2");
}

.life-rhythm-beat-target {
    width: 34px;
    top: 4px;
    bottom: 4px;
    background: url("images/life-mini-games/elements/rhythm-beat-marker-v1.png?v=20260608-ai-v2") center / contain no-repeat;
    box-shadow: none;
}

.life-rhythm-pad-btn {
    display: inline-grid;
    grid-template-columns: 28px minmax(0, auto);
    gap: 6px;
    align-items: center;
    justify-content: center;
}

.life-rhythm-pad-btn::before {
    content: "";
    width: 26px;
    height: 26px;
    background: url("images/life-mini-games/elements/rhythm-arrow-up-v1.png?v=20260608-ai-v2") center / contain no-repeat;
}

.life-rhythm-pad-btn--left::before {
    background-image: url("images/life-mini-games/elements/rhythm-arrow-left-v1.png?v=20260608-ai-v2");
}

.life-rhythm-pad-btn--down::before {
    background-image: url("images/life-mini-games/elements/rhythm-arrow-down-v1.png?v=20260608-ai-v2");
}

.life-rhythm-pad-btn--right::before {
    background-image: url("images/life-mini-games/elements/rhythm-arrow-right-v1.png?v=20260608-ai-v2");
}

.life-sort-sample {
    position: relative;
    min-height: 88px;
    padding-left: 72px;
}

.life-sort-sample::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 52px;
    height: 52px;
    background: url("images/life-mini-games/elements/sort-sample-v1.png?v=20260608-ai-v2") center / contain no-repeat;
    transform: translateY(-50%);
}

.life-sort-bin {
    position: relative;
    padding-top: 56px;
}

.life-sort-bin::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    width: 48px;
    height: 48px;
    background: url("images/life-mini-games/elements/sort-bin-mid-v1.png?v=20260608-ai-v2") center / contain no-repeat;
    transform: translateX(-50%);
}

.life-sort-bin--top::before {
    background-image: url("images/life-mini-games/elements/sort-bin-top-v1.png?v=20260608-ai-v2");
}

.life-sort-bin--low::before {
    background-image: url("images/life-mini-games/elements/sort-bin-low-v1.png?v=20260608-ai-v2");
}

.life-link-tile b,
.life-link-cell--blocker b {
    width: 42px;
    height: 42px;
    color: transparent;
    background: url("images/life-mini-games/elements/herb-qingye-v1.png?v=20260608-ai-v2") center / contain no-repeat;
}

.life-link-tile--herb-zisu b {
    background-image: url("images/life-mini-games/elements/herb-zisu-v1.png?v=20260608-ai-v2");
}

.life-link-tile--herb-baizhi b {
    background-image: url("images/life-mini-games/elements/herb-baizhi-v1.png?v=20260608-ai-v2");
}

.life-link-tile--herb-chishao b {
    background-image: url("images/life-mini-games/elements/herb-chishao-v1.png?v=20260608-ai-v2");
}

.life-link-tile--herb-huangjing b {
    background-image: url("images/life-mini-games/elements/herb-huangjing-v1.png?v=20260608-ai-v2");
}

.life-link-tile--herb-fuling b {
    background-image: url("images/life-mini-games/elements/herb-fuling-v1.png?v=20260608-ai-v2");
}

.life-link-tile--herb-gancao b {
    background-image: url("images/life-mini-games/elements/herb-gancao-v1.png?v=20260608-ai-v2");
}

.life-link-tile--herb-danggui b {
    background-image: url("images/life-mini-games/elements/herb-danggui-v1.png?v=20260608-ai-v2");
}

.life-link-tile--herb-lingzhi b {
    background-image: url("images/life-mini-games/elements/herb-lingzhi-v1.png?v=20260608-ai-v2");
}

.life-link-tile--herb-xuelian b {
    background-image: url("images/life-mini-games/elements/herb-xuelian-v1.png?v=20260608-ai-v2");
}

.life-link-cell--blocker b {
    background-image: url("images/life-mini-games/elements/herb-blocker-v1.png?v=20260608-ai-v2");
}

.life-probe-cell {
    position: relative;
    grid-template-rows: 48px auto;
}

.life-probe-cell::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: 44px;
    align-self: center;
    justify-self: center;
    background: url("images/life-mini-games/elements/probe-stone-v1.png?v=20260608-ai-v2") center / contain no-repeat;
}

.life-probe-cell b {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    width: 25px;
    height: 25px;
    align-self: end;
    justify-self: end;
    margin-right: 10px;
    font-size: 0.7em;
}

.life-probe-cell span {
    grid-column: 1;
    grid-row: 2;
}

.life-probe-cell--hidden::before {
    background-image: url("images/life-mini-games/elements/probe-hidden-v1.png?v=20260608-ai-v2");
}

.life-probe-cell--ore::before {
    background-image: url("images/life-mini-games/elements/probe-ore-gold-v1.png?v=20260608-ai-v2");
}

.life-probe-cell--jade::before {
    background-image: url("images/life-mini-games/elements/probe-ore-jade-v1.png?v=20260608-ai-v2");
}

.life-probe-cell--blue::before {
    background-image: url("images/life-mini-games/elements/probe-ore-blue-v1.png?v=20260608-ai-v2");
}

.life-probe-cell--red::before {
    background-image: url("images/life-mini-games/elements/probe-ore-red-v1.png?v=20260608-ai-v2");
}

.life-probe-cell--fissure::before {
    background-image: url("images/life-mini-games/elements/probe-fissure-v1.png?v=20260608-ai-v2");
}

.life-mini-feedback-fx {
    position: fixed;
    z-index: 10020;
    width: 0;
    height: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: lifeMiniFxPop 0.72s ease-out forwards;
}

.life-mini-feedback-fx b,
.life-mini-feedback-fx em {
    position: absolute;
    left: 50%;
    white-space: nowrap;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
    transform: translateX(-50%);
}

.life-mini-feedback-fx b {
    top: -34px;
    color: #ffd27a;
    font-size: 1.25rem;
    font-weight: 950;
}

.life-mini-feedback-fx em {
    top: -5px;
    color: #f8fbfc;
    font-size: 0.86rem;
    font-style: normal;
    font-weight: 900;
}

.life-mini-feedback-fx i {
    position: absolute;
    left: -4px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ffd27a;
    box-shadow: 0 0 10px rgba(255, 210, 122, 0.72);
    animation: lifeMiniFxSpark 0.72s ease-out forwards;
}

.life-mini-feedback-fx i:nth-of-type(1) { --life-mini-fx-x: -78px; --life-mini-fx-y: -28px; }
.life-mini-feedback-fx i:nth-of-type(2) { --life-mini-fx-x: 72px; --life-mini-fx-y: -36px; }
.life-mini-feedback-fx i:nth-of-type(3) { --life-mini-fx-x: -58px; --life-mini-fx-y: 42px; }
.life-mini-feedback-fx i:nth-of-type(4) { --life-mini-fx-x: 64px; --life-mini-fx-y: 38px; }
.life-mini-feedback-fx i:nth-of-type(5) { --life-mini-fx-x: -10px; --life-mini-fx-y: -68px; }
.life-mini-feedback-fx i:nth-of-type(6) { --life-mini-fx-x: 12px; --life-mini-fx-y: 62px; }

.life-mini-feedback-fx--good b {
    color: #7dcf9b;
}

.life-mini-feedback-fx--miss b {
    color: #efa195;
}

.life-mini-feedback-fx--miss i {
    background: #efa195;
    box-shadow: 0 0 10px rgba(239, 161, 149, 0.64);
}

.life-mini-feedback-fx--balance i,
.life-mini-feedback-fx--probe i,
.life-mini-feedback-fx--link i {
    background: #74d8bf;
    box-shadow: 0 0 10px rgba(116, 216, 191, 0.68);
}

.life-mini-feedback-fx--rhythm i {
    background: #f6f1d5;
}

@keyframes lifeRhythmRunner {
    from { left: 0%; }
    to { left: 100%; }
}

@keyframes lifeTimingRunner {
    0% { transform: translate3d(0, 0, 0) translateX(-50%); }
    50% { transform: translate3d(100%, 0, 0) translateX(-50%); }
    100% { transform: translate3d(0, 0, 0) translateX(-50%); }
}

@keyframes lifeTimingBandPulse {
    0%, 100% { filter: brightness(0.9); }
    50% { filter: brightness(1.35); }
}

@keyframes lifeTimingScorePop {
    0% { opacity: 0; transform: translate(-50%, 8px) scale(0.68); }
    16% { opacity: 1; transform: translate(-50%, -6px) scale(1.16); }
    64% { opacity: 1; transform: translate(-50%, -12px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -24px) scale(0.94); }
}

@keyframes lifeTimingWoodHeartHit {
    0% { filter: brightness(1); transform: scale(1); }
    26% { filter: brightness(1.55); transform: scale(1.18); }
    100% { filter: brightness(1.08); transform: scale(1); }
}

@keyframes lifeMiniFxPop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
    12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    72% { opacity: 1; transform: translate(-50%, -58%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -66%) scale(0.94); }
}

@keyframes lifeMiniFxSpark {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    14% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--life-mini-fx-x), var(--life-mini-fx-y)) scale(0.1); }
}

@keyframes lifeSeedRevealPanel {
    0% { opacity: 0; transform: translateY(10px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lifeSeedHarvestCardIn {
    0% { opacity: 0; transform: translateY(14px) scale(0.9); }
    70% { opacity: 1; transform: translateY(-3px) scale(1.04); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lifeSeedHarvestSweep {
    0% { opacity: 0; transform: rotate(18deg) translateX(-120%); }
    18% { opacity: 0.9; }
    100% { opacity: 0; transform: rotate(18deg) translateX(260%); }
}

@keyframes lifeSeedHarvestBurst {
    0% { filter: brightness(1); box-shadow: 0 0 20px rgba(255, 210, 122, 0.24), 0 10px 18px rgba(0, 0, 0, 0.24); }
    35% { filter: brightness(1.42); box-shadow: 0 0 34px rgba(255, 210, 122, 0.52), 0 10px 22px rgba(0, 0, 0, 0.26); }
    100% { filter: brightness(1.08); box-shadow: 0 0 24px rgba(255, 210, 122, 0.28), 0 10px 18px rgba(0, 0, 0, 0.24); }
}

@keyframes lifeSeedHarvestMiss {
    0%, 100% { transform: translateX(0); }
    18% { transform: translateX(-3px); }
    36% { transform: translateX(3px); }
    54% { transform: translateX(-2px); }
    72% { transform: translateX(2px); }
}

.life-mini-game-footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.life-mini-secondary {
    color: #d8e4e8;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 760px) {
    .life-mini-game-box {
        width: 94vw;
        max-height: 86vh;
        padding: 16px;
    }

    .life-mini-game-box h3 {
        margin-right: 28px;
        margin-left: 28px;
    }

    .life-mini-game-layout {
        grid-template-columns: 1fr;
    }

    .life-mini-game-side {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}

@media (max-width: 560px) {
    .life-mini-game-box {
        width: 94vw;
        padding: 16px;
    }

    .life-mini-game-svg {
        min-height: 168px;
    }

    .life-mini-score {
        grid-template-columns: 1fr auto;
    }

    .life-mini-score em {
        grid-column: 1 / -1;
    }

    .life-mini-event-banner {
        grid-template-columns: 1fr;
    }

    .life-mini-settlement-metrics,
    .life-mini-settlement-compare,
    .life-mini-settlement-boost-grid,
    .life-mini-surprise-cards,
    .life-mini-progress-hooks,
    .life-mini-settlement-milestones {
        grid-template-columns: 1fr;
    }

    .life-mini-game-footer,
    .life-mini-secondary {
        width: 100%;
    }

    .life-rhythm-pad,
    .life-sort-bins {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .life-sort-samples {
        grid-template-columns: 1fr;
    }

    .life-sort-timer,
    .life-sort-rush-offer {
        grid-template-columns: 1fr;
    }

    .life-sort-rush-offer button {
        width: 100%;
    }

    .life-timing-board,
    .life-rhythm-stage,
    .life-silkworm-snake,
    .life-balance-board,
    .life-aim-board,
    .life-mix-board,
    .life-sort-board,
    .life-sequence-board,
    .life-link-board,
    .life-probe-board,
    .life-seed-board {
        padding: 8px;
    }

    .life-silkworm-snake-hud,
    .life-silkworm-snake-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .life-silkworm-snake-board {
        gap: 0;
        padding: 7px;
    }

    .life-balance-water {
        min-height: 148px;
    }

    .life-timing-workbench {
        min-height: 132px;
        padding: 12px 10px;
    }

    .life-aim-field {
        min-height: 176px;
        padding: 8px;
    }

    .life-aim-lanes {
        gap: 5px;
    }

    .life-aim-lane {
        min-height: 68px;
        padding: 6px 4px;
    }

    .life-aim-lane b {
        width: 24px;
        height: 24px;
    }

    .life-mix-panel {
        gap: 8px;
        padding: 10px 8px;
    }

    .life-mix-channel {
        grid-template-columns: 58px minmax(0, 1fr) 34px;
        gap: 6px;
        padding: 7px 6px;
    }

    .life-sequence-path {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 154px;
        gap: 6px;
        padding: 10px 8px;
    }

    .life-sequence-node {
        min-height: 70px;
        grid-template-rows: 28px auto;
        padding: 6px 4px;
    }

    .life-sequence-node b {
        width: 27px;
        height: 27px;
    }

    .life-balance-meter {
        grid-template-columns: 62px minmax(0, 1fr) 34px;
        gap: 6px;
        padding: 7px 8px;
    }

    .life-link-grid,
    .life-probe-grid,
    .life-seed-draw-options,
    .life-seed-blind-options,
    .life-seed-plots {
        gap: 4px;
    }

    .life-seed-head {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .life-seed-plots {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .life-seed-draw-options,
    .life-seed-blind-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .life-seed-draw-card,
    .life-seed-blind-card {
        min-height: 124px;
        grid-template-rows: 46px auto auto auto;
        gap: 4px;
        padding: 8px 6px;
    }

    .life-seed-draw-card b,
    .life-seed-blind-card b {
        width: 32px;
        height: 32px;
        font-size: 0.86em;
    }

    .life-seed-icon {
        width: 46px;
        height: 46px;
    }

    .life-seed-icon--hidden {
        width: 50px;
        height: 50px;
    }

    .life-seed-current {
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 7px 8px;
    }

    .life-seed-current .life-seed-icon {
        width: 42px;
        height: 42px;
    }

    .life-seed-action-icon {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }

    .life-seed-harvest-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .life-seed-harvest-grid {
        grid-template-columns: 1fr;
    }

    .life-seed-harvest-card {
        min-height: 92px;
        grid-template-columns: 44px minmax(0, 1fr) auto;
    }

    .life-seed-harvest-card .life-seed-icon {
        width: 42px;
        height: 42px;
    }

    .life-seed-harvest-title {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .life-seed-plot {
        min-height: 70px;
        padding: 4px 3px;
    }

    .life-seed-plot b {
        width: 28px;
        height: 28px;
        font-size: 0.82em;
    }

    .life-link-tile,
    .life-link-cell--blocker,
    .life-probe-cell {
        grid-template-rows: minmax(30px, 1fr) auto;
        padding: 4px 3px;
    }

    .life-probe-cell::before {
        width: 32px;
        height: 32px;
    }

    .life-link-tile b,
    .life-link-cell--blocker b,
    .life-probe-cell b {
        width: 20px;
        height: 20px;
        margin-right: 4px;
        font-size: 0.72em;
    }

    .life-link-tile strong {
        font-size: 0.7em;
    }

    .life-link-tile span,
    .life-link-cell--blocker span,
    .life-probe-cell span {
        display: none;
    }
}

/* 背包弹窗 */
.life-bag-box {
    max-width: 500px;
    width: 90%;
    max-height: 70vh;
}

.life-bag-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 15px 0;
}

.empty-bag {
    text-align: center;
    padding: 50px 20px;
    color: #888;
    font-size: 1.2em;
}

.bag-item-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: 10px;
}

.bag-item-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.9em;
}

.bag-item-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bag-item-name {
    font-weight: bold;
    font-size: 0.95em;
}

.bag-item-rarity {
    font-size: 0.75em;
    opacity: 0.8;
}

.bag-item-count {
    margin-left: auto;
    font-weight: bold;
    color: #fff;
}

.bag-item-card {
    cursor: pointer;
    transition: all 0.3s;
}

.bag-item-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 生活技能背包物品详情 */
.life-bag-detail-content {
    color: #fff;
}

.life-bag-detail-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    position: relative;
}

.life-bag-detail-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-weight: bold;
    font-size: 1.5em;
}

.life-bag-detail-info {
    flex: 1;
}

.life-bag-detail-info h3 {
    margin: 0 0 5px 0;
}

.life-bag-detail-rarity {
    font-size: 0.9em;
    opacity: 0.8;
}

.life-bag-detail-close {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.life-bag-detail-close:hover {
    background: rgba(233, 69, 96, 0.5);
}

.life-bag-detail-body {
    margin-top: 15px;
}

.life-bag-item-desc {
    color: #ccc;
    margin-bottom: 10px;
    line-height: 1.5;
}

.life-bag-item-count {
    font-size: 1.1em;
    margin-bottom: 15px;
}

.life-bag-detail-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* 对话框覆盖层 */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dialog-box {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 20px;
    padding: 25px 30px;
    min-width: 300px;
    position: relative;
}

.life-bag-box h3,
.life-craft-box h3 {
    text-align: center;
    margin-bottom: 15px;
}

/* 稀有度颜色 */
.rarity-1 { color: #ffffff; }
.rarity-2 { color: #1eff00; }
.rarity-3 { color: #0070dd; }
.rarity-4 { color: #a335ee; }
.rarity-5 { color: #ff8000; }

/* ==================== 剧情任务收集对话框样式 ==================== */
.story-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    animation: fadeIn 0.3s ease;
}

.story-dialog {
    background: linear-gradient(145deg, #1a1a2e, #16213e);
    border: 2px solid rgba(233, 69, 96, 0.4);
    border-radius: 15px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease;
}

.story-dialog.collect-dialog {
    border-color: rgba(78, 205, 196, 0.4);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.story-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(233, 69, 96, 0.1);
    border-bottom: 1px solid rgba(233, 69, 96, 0.2);
}

.story-dialog.collect-dialog .story-dialog-header {
    background: rgba(78, 205, 196, 0.1);
    border-bottom-color: rgba(78, 205, 196, 0.2);
}

.story-dialog-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: #e94560;
}

.story-dialog.collect-dialog .story-dialog-header h3 {
    color: #4ecdc4;
}

.story-dialog-close {
    background: none;
    border: none;
    color: #888;
    font-size: 1.5em;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.story-dialog-close:hover {
    background: rgba(233, 69, 96, 0.2);
    color: #fff;
}

.story-dialog-body {
    padding: 20px;
    max-height: 50vh;
    overflow-y: auto;
}

.scene-location {
    color: #4ecdc4;
    font-size: 0.95em;
    margin-bottom: 10px;
}

.scene-description {
    color: #ddd;
    line-height: 1.6;
    margin-bottom: 15px;
}

.collect-items-list {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 15px;
    margin: 15px 0;
}

.collect-items-list h4 {
    margin: 0 0 12px 0;
    color: #4ecdc4;
    font-size: 1em;
}

.collect-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    margin: 8px 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid;
    transition: all 0.2s;
}

.collect-item-row.incomplete {
    border-left-color: #e94560;
}

.collect-item-row.completed {
    border-left-color: #4ecdc4;
    background: rgba(78, 205, 196, 0.1);
}

.item-name {
    flex: 1;
    color: #fff;
    font-weight: 500;
}

.item-progress {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 15px;
}

.item-count {
    font-weight: bold;
    font-size: 1.1em;
}

.item-count.done {
    color: #4ecdc4;
}

.item-required {
    color: #888;
}

.item-source {
    font-size: 0.8em;
    color: #aaa;
    max-width: 140px;
    text-align: right;
}

.collect-hint {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    padding: 10px 15px;
    color: #ffc107;
    font-size: 0.9em;
    margin: 10px 0;
}

.story-dialog-actions {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 对话选择样式 */
.dialogue-entry {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
}

.dialogue-speaker {
    color: #4ecdc4;
    font-weight: bold;
    margin: 0 0 8px 0;
}

.dialogue-text {
    color: #ddd;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.dialogue-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dialogue-choice-btn {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9em;
}

.dialogue-choice-btn:hover {
    background: rgba(233, 69, 96, 0.4);
    transform: translateY(-1px);
}

.dialogue-response {
    margin-top: 12px;
    padding: 10px 15px;
    background: rgba(78, 205, 196, 0.1);
    border-left: 3px solid #4ecdc4;
    border-radius: 5px;
    animation: fadeIn 0.3s ease;
}

.dialogue-response p {
    margin: 0;
    color: #4ecdc4;
}

/* ==================== 好感度系统样式 ==================== */
.npc-affection-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.npc-affection-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 12px 15px;
    display: flex;
    gap: 12px;
    transition: all 0.3s;
}

.npc-affection-card.ai-contact {
    cursor: pointer;
}

.npc-affection-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(78, 205, 196, 0.3);
}

.npc-affection-card.recruited {
    border-color: #4ecdc4;
    background: rgba(78, 205, 196, 0.1);
}

.npc-avatar {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    flex-shrink: 0;
}

.npc-info {
    flex: 1;
    min-width: 0;
}

.npc-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.npc-name {
    color: #fff;
    font-weight: bold;
    font-size: 0.95em;
}

.npc-title {
    color: #888;
    font-size: 0.75em;
}

.npc-badge {
    font-size: 0.65em;
    padding: 2px 6px;
    border-radius: 8px;
    background: rgba(78, 205, 196, 0.2);
    color: #4ecdc4;
}

.npc-description {
    color: #999;
    font-size: 0.75em;
    margin-bottom: 8px;
    line-height: 1.4;
}

.affection-bar-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.affection-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}

.affection-fill {
    height: 100%;
    transition: width 0.5s ease, background-color 0.3s ease;
    border-radius: 3px;
}

.affection-value {
    font-size: 0.75em;
    font-weight: bold;
    min-width: 35px;
    text-align: right;
}

.affection-status {
    font-size: 0.7em;
    min-width: 40px;
    text-align: right;
}

.btn-recruit {
    margin-top: 8px;
    background: linear-gradient(135deg, #4ecdc4 0%, #45b7d1 100%);
    border: none;
    color: #fff;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-recruit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.4);
}

.btn-chat {
    margin-top: 8px;
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    border: none;
    color: #fff;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
}

.btn-chat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
}

.btn-icon {
    font-size: 1em;
}

/* 好感度变化提示 */
.affection-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.3s ease;
}

.affection-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.affection-toast-content {
    background: rgba(20, 20, 30, 0.95);
    border: 1px solid rgba(78, 205, 196, 0.3);
    border-radius: 10px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.affection-toast-content .npc-name {
    color: #fff;
    font-size: 0.9em;
}

.affection-change {
    font-weight: bold;
    font-size: 1em;
}

.affection-reason {
    color: #888;
    font-size: 0.75em;
}

/* NPC详情面板 */
.npc-detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    animation: fadeIn 0.2s ease;
}

.npc-detail-panel {
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(78, 205, 196, 0.3);
    border-radius: 15px;
    padding: 25px;
    max-width: 400px;
    width: 90%;
    position: relative;
    animation: slideUp 0.3s ease;
}

.npc-detail-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.npc-detail-close:hover {
    background: rgba(233, 69, 96, 0.5);
}

.npc-detail-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.npc-detail-avatar {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    background: rgba(78, 205, 196, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
}

.npc-detail-info h3 {
    margin: 0 0 5px 0;
    color: #fff;
}

.npc-detail-title {
    color: #888;
    font-size: 0.85em;
    margin: 0;
}

.npc-detail-body {
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.npc-detail-description {
    color: #ccc;
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 15px;
}

.npc-detail-affection {
    margin-bottom: 15px;
}

.affection-label {
    color: #888;
    font-size: 0.75em;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.affection-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.affection-progress .affection-bar {
    flex: 1;
    height: 8px;
}

.affection-progress .affection-value {
    font-size: 0.85em;
}

.npc-detail-affection .affection-status {
    font-size: 0.8em;
    text-align: left;
}

.npc-recruited-status {
    background: rgba(78, 205, 196, 0.2);
    color: #4ecdc4;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    font-size: 0.9em;
}

.btn-recruit-large {
    width: 100%;
    background: linear-gradient(135deg, #4ecdc4 0%, #45b7d1 100%);
    border: none;
    color: #fff;
    padding: 12px;
    border-radius: 10px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-recruit-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(78, 205, 196, 0.4);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== 连招选择界面样式 ==================== */
.combo-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
}

.combo-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.combo-menu-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #e94560;
    border-radius: 20px;
    box-shadow: 0 10px 50px rgba(233, 69, 96, 0.3);
    display: flex;
    flex-direction: column;
    animation: comboFadeIn 0.3s ease;
}

@keyframes comboFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* 连招头部 */
.combo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid rgba(233, 69, 96, 0.3);
    background: linear-gradient(90deg, rgba(233, 69, 96, 0.1) 0%, transparent 100%);
}

.combo-title h3 {
    font-size: 1.5em;
    color: #e94560;
    margin-bottom: 5px;
}

.combo-subtitle {
    color: #aaa;
    font-size: 0.9em;
}

.combo-subtitle span {
    color: #f39c12;
    font-weight: bold;
}

.combo-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(233, 69, 96, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1.2em;
}

.combo-close:hover {
    background: rgba(233, 69, 96, 0.4);
    transform: rotate(90deg);
}

/* 已选择的招式 */
.combo-selected {
    padding: 15px 25px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.combo-selected-label {
    font-size: 0.9em;
    color: #aaa;
    margin-bottom: 10px;
}

.combo-slots {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.combo-slot {
    width: 100px;
    height: 100px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.combo-slot.empty {
    color: rgba(255, 255, 255, 0.3);
    font-size: 2em;
}

.combo-slot.filled {
    border-style: solid;
    border-color: #e94560;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.2) 0%, rgba(233, 69, 96, 0.1) 100%);
    cursor: pointer;
}

.combo-slot.filled:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.3);
}

.combo-slot-number {
    position: absolute;
    top: 5px;
    left: 8px;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
}

.combo-slot-name {
    font-size: 0.85em;
    text-align: center;
    padding: 5px;
    font-weight: bold;
}

.combo-slot-type {
    font-size: 0.7em;
    color: #aaa;
    margin-top: 3px;
}

.combo-slot-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(231, 76, 60, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;
}

.combo-slot.filled:hover .combo-slot-remove {
    opacity: 1;
}

/* 连招加成效果 */
.combo-buffs {
    padding: 12px 25px;
    background: linear-gradient(90deg, rgba(243, 156, 18, 0.1) 0%, transparent 100%);
    border-bottom: 1px solid rgba(243, 156, 18, 0.2);
}

.combo-buff-label {
    font-size: 0.85em;
    color: #f39c12;
    margin-bottom: 8px;
}

.combo-buff-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 28px;
}

.combo-buff-item {
    background: rgba(243, 156, 18, 0.2);
    border: 1px solid rgba(243, 156, 18, 0.4);
    border-radius: 15px;
    padding: 4px 12px;
    font-size: 0.8em;
    color: #f39c12;
    display: flex;
    align-items: center;
    gap: 5px;
    animation: buffAppear 0.3s ease;
}

@keyframes buffAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.combo-buff-item .icon {
    font-size: 1.1em;
}

.no-buff {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85em;
    font-style: italic;
}

/* 武功列表容器 */
.combo-skills-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px 25px;
}

.combo-skills-container::-webkit-scrollbar {
    width: 8px;
}

.combo-skills-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.combo-skills-container::-webkit-scrollbar-thumb {
    background: rgba(233, 69, 96, 0.5);
    border-radius: 4px;
}

.combo-skills-container::-webkit-scrollbar-thumb:hover {
    background: rgba(233, 69, 96, 0.7);
}

/* 武功网格 */
.combo-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.combo-skill-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.combo-skill-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(233, 69, 96, 0.5);
    transform: translateY(-2px);
}

.combo-skill-card.selected {
    background: rgba(233, 69, 96, 0.2);
    border-color: #e94560;
}

.combo-skill-card.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.combo-skill-card.disabled:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.1);
}

.combo-skill-type {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: #aaa;
}

.combo-skill-name {
    font-weight: bold;
    font-size: 0.95em;
    margin-bottom: 8px;
    padding-right: 50px;
}

.combo-skill-power {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85em;
    color: #f39c12;
    margin-bottom: 5px;
}

.combo-skill-mp {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8em;
    color: #3498db;
}

.combo-skill-level {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8em;
    color: #4ecdc4;
}

.combo-skill-effect {
    font-size: 0.75em;
    color: #2ecc71;
    margin-top: 5px;
    line-height: 1.3;
}

/* 武功类型颜色 */
.combo-skill-type[data-type="内功"] { color: #9b59b6; }
.combo-skill-type[data-type="剑法"] { color: #3498db; }
.combo-skill-type[data-type="刀法"] { color: #e74c3c; }
.combo-skill-type[data-type="拳掌"] { color: #e67e22; }
.combo-skill-type[data-type="指法"] { color: #f39c12; }
.combo-skill-type[data-type="轻功"] { color: #1abc9c; }
.combo-skill-type[data-type="暗器"] { color: #34495e; }
.combo-skill-type[data-type="杖法"] { color: #7f8c8d; }
.combo-skill-type[data-type="特殊"] { color: #e94560; }

/* 操作按钮 */
.combo-actions {
    display: flex;
    gap: 15px;
    padding: 20px 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.combo-actions .btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: bold;
}

.combo-actions .btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.combo-actions .btn-cancel:hover {
    background: rgba(255, 255, 255, 0.2);
}

.combo-actions .btn-clear {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.4);
}

.combo-actions .btn-clear:hover {
    background: rgba(231, 76, 60, 0.3);
}

.combo-actions .btn-confirm {
    background: linear-gradient(135deg, #e94560 0%, #c73e54 100%);
    color: #fff;
    flex: 2;
}

.combo-actions .btn-confirm:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
}

.combo-actions .btn-confirm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 特殊组合技提示 */
.combo-special-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 3px solid #f39c12;
    border-radius: 20px;
    padding: 30px 40px;
    text-align: center;
    z-index: 1100;
    animation: specialAppear 0.5s ease;
    box-shadow: 0 0 50px rgba(243, 156, 18, 0.5);
}

@keyframes specialAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* 技能名称显示动画 */
@keyframes skillNameAppear {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.8);
    }
    20% {
        opacity: 1;
        transform: translateY(0) scale(1.1);
    }
    40% {
        transform: translateY(0) scale(1);
    }
    80% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-30px);
    }
}

#skill-name-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    font-weight: bold;
    color: #e94560;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.8), 0 0 40px rgba(233, 69, 96, 0.5);
    z-index: 100;
    pointer-events: none;
    white-space: nowrap;
}

.combo-special-alert h3 {
    font-size: 1.8em;
    color: #f39c12;
    margin-bottom: 10px;
}

.combo-special-alert p {
    color: #fff;
    margin-bottom: 15px;
}

.combo-special-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .combo-menu-content {
        width: 95%;
        max-height: 90vh;
    }

    .combo-skills-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .combo-slot {
        width: 70px;
        height: 70px;
    }

    .combo-slot-name {
        font-size: 0.7em;
    }

    .combo-actions .btn {
        padding: 10px 15px;
        font-size: 0.9em;
    }
}

@media (max-width: 760px) {
    #tab-skills,
    #tab-lifeskills {
        overflow-x: hidden;
    }

    .skills-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .skills-header .cultivation-points {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .skills-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        gap: 14px;
    }

    .skill-types-nav,
    .skills-content,
    .skills-list,
    .skill-level-group,
    .skills-grid,
    .skill-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .skill-types-nav {
        padding: 12px;
    }

    .skill-type-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .skill-type-btn {
        min-width: 0;
        padding: 10px 8px;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .skills-content {
        padding: 14px;
        overflow-x: hidden;
    }

    .skills-list {
        max-height: none;
        overflow-x: hidden;
    }

    .skills-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .skill-item h4,
    .skill-item p {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .skill-item > div,
    .skill-quick-slot,
    .skill-quick-slot select {
        max-width: 100%;
        min-width: 0;
    }

    .skill-icon-large {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        min-width: 48px;
        max-width: 48px;
        overflow: hidden;
        line-height: 1;
        font-size: 2.1em;
        box-sizing: border-box;
    }
}

/* Late self-cultivation overrides after legacy meditation styles. */
.meditation-container.meditation-v2 .meditation-stat-grid .stat-item {
    display: grid;
    gap: 6px;
    align-items: start;
    justify-content: stretch;
    min-height: 74px;
    padding: 11px;
    border: 1px solid rgba(117, 224, 208, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.meditation-container.meditation-v2 .meditation-stat-grid .stat-label {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.meditation-container.meditation-v2 .meditation-stat-grid .stat-value {
    color: #75e0d0;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
    font-variant-numeric: tabular-nums;
}

.meditation-container.meditation-v2 .meditation-stat-grid .stat-value.gain {
    color: #f1d48a;
}

.meditation-settlement-overlay .meditation-settlement-content h3 {
    color: #f3ead8;
    font-size: 26px;
    line-height: 1.2;
}

/* Compact self-cultivation layout: keep the core loop visible and page lower modules tabbed. */
.meditation-container.meditation-v2 {
    grid-template-columns: minmax(340px, 0.92fr) minmax(380px, 1.08fr);
    align-items: start;
    gap: 14px;
    max-width: 1180px;
    padding: 12px;
}

.meditation-container.meditation-v2 .meditation-stage {
    min-height: clamp(390px, 42vw, 500px);
}

.meditation-container.meditation-v2 .meditation-dashboard {
    min-width: 0;
}

.meditation-container.meditation-v2 .meditation-focus-nav,
.meditation-container.meditation-v2 .meditation-section-shell {
    grid-column: 1 / -1;
    min-width: 0;
}

.meditation-container.meditation-v2 .meditation-focus-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(117, 224, 208, 0.22);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(6, 16, 18, 0.94), rgba(15, 30, 27, 0.90)),
        radial-gradient(circle at 0 0, rgba(241, 212, 138, 0.12), transparent 38%);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
}

.meditation-focus-tab {
    appearance: none;
    display: grid;
    gap: 3px;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
    color: #e8eee7;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.meditation-focus-tab:hover {
    transform: translateY(-1px);
    border-color: rgba(117, 224, 208, 0.42);
    background: rgba(117, 224, 208, 0.09);
}

.meditation-focus-tab.active {
    border-color: rgba(241, 212, 138, 0.78);
    background:
        linear-gradient(135deg, rgba(241, 212, 138, 0.18), rgba(117, 224, 208, 0.10)),
        rgba(255, 255, 255, 0.04);
}

.meditation-focus-tab span {
    color: #f3ead8;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.meditation-focus-tab strong {
    color: rgba(223, 249, 244, 0.66);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
}

.meditation-section {
    display: none;
}

.meditation-section.active {
    display: block;
    animation: meditation-section-rise 0.22s ease-out;
}

@keyframes meditation-section-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.meditation-section-grid {
    display: grid;
    gap: 12px;
    align-items: start;
    min-width: 0;
}

.meditation-section-grid .meditation-panel-block,
.meditation-section-grid .meditation-tips {
    grid-column: auto;
    min-width: 0;
}

.meditation-section-grid-config {
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
}

.meditation-section-grid-config .meditation-method-block {
    grid-column: 1 / -1;
}

.meditation-section-grid-config .meditation-synergy-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meditation-section-grid-growth {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meditation-section-grid-growth .meditation-facility-list,
.meditation-section-grid-growth .meditation-goal-list {
    grid-template-columns: minmax(0, 1fr);
}

.meditation-section-grid-encounter {
    grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.78fr);
}

.meditation-section-grid-encounter .meditation-event-list {
    max-height: 270px;
}

.meditation-section-grid-archive {
    grid-template-columns: minmax(0, 1.32fr) minmax(280px, 0.68fr);
}

.meditation-section-grid-archive .meditation-atlas-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meditation-section-grid-archive .meditation-session-list,
.meditation-section-grid-archive .meditation-log-list {
    grid-template-columns: minmax(0, 1fr);
}

.meditation-section-grid-archive .meditation-log-list {
    max-height: 360px;
    overflow-y: auto;
}

.meditation-section-grid-archive .meditation-tips {
    grid-column: 1 / -1;
    padding: 12px;
}

@media (max-width: 980px) {
    .meditation-container.meditation-v2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .meditation-container.meditation-v2 .meditation-focus-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        position: static;
    }

    .meditation-section-grid,
    .meditation-section-grid-config,
    .meditation-section-grid-growth,
    .meditation-section-grid-encounter,
    .meditation-section-grid-archive {
        grid-template-columns: minmax(0, 1fr);
    }

    .meditation-section-grid-config .meditation-method-block,
    .meditation-section-grid-archive .meditation-tips {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .meditation-container.meditation-v2 .meditation-focus-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .meditation-focus-tab {
        min-height: 52px;
    }
}

/* Meditation compact pass v2: long data stays available without owning the page scroll. */
.meditation-section-grid-growth .meditation-facility-block,
.meditation-section-grid-growth .meditation-goal-block {
    display: flex;
    flex-direction: column;
    max-height: min(650px, 68vh);
}

.meditation-section-grid-growth .meditation-facility-list,
.meditation-section-grid-growth .meditation-goal-list,
.meditation-section-grid-encounter .meditation-event-list {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.meditation-section-grid-growth .meditation-facility-list,
.meditation-section-grid-growth .meditation-goal-list {
    align-content: start;
}

.meditation-secondary-toggle {
    display: none;
}

.meditation-section-grid-growth .meditation-facility-list::-webkit-scrollbar,
.meditation-section-grid-growth .meditation-goal-list::-webkit-scrollbar,
.meditation-section-grid-encounter .meditation-event-list::-webkit-scrollbar,
.meditation-section-grid-archive .meditation-log-list::-webkit-scrollbar {
    width: 6px;
}

.meditation-section-grid-growth .meditation-facility-list::-webkit-scrollbar-thumb,
.meditation-section-grid-growth .meditation-goal-list::-webkit-scrollbar-thumb,
.meditation-section-grid-encounter .meditation-event-list::-webkit-scrollbar-thumb,
.meditation-section-grid-archive .meditation-log-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(117, 224, 208, 0.32);
}

@media (max-width: 640px) {
    .meditation-container.meditation-v2 {
        gap: 8px;
        padding: 6px;
    }

    .meditation-container.meditation-v2 .meditation-stage {
        order: 1;
        min-height: 232px;
    }

    .meditation-container.meditation-v2 .meditation-focus-nav {
        order: 2;
    }

    .meditation-container.meditation-v2 .meditation-dashboard {
        order: 3;
    }

    .meditation-container.meditation-v2 .meditation-section-shell {
        order: 4;
    }

    .meditation-v2 .meditation-bg {
        width: 210px;
        height: 210px;
    }

    .meditation-v2 .meditation-circle:nth-child(1) {
        width: 80px;
        height: 80px;
    }

    .meditation-v2 .meditation-circle:nth-child(2) {
        width: 118px;
        height: 118px;
    }

    .meditation-v2 .meditation-circle:nth-child(3) {
        width: 158px;
        height: 158px;
    }

    .meditation-v2 .meditation-circle:nth-child(4) {
        width: 198px;
        height: 198px;
    }

    .meditation-v2 .meditator {
        width: min(154px, 52%);
        max-height: 205px;
    }

    .meditation-stage-badges {
        gap: 5px;
        left: 8px;
        right: 8px;
        top: 8px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .meditation-stage-badge {
        min-width: 0;
        padding: 5px 6px;
    }

    .meditation-stage-badge em,
    .meditation-stage-badge strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .meditation-stage-badge em {
        font-size: 10px;
    }

    .meditation-stage-badge strong {
        font-size: 11px;
    }

    .meditation-stage-hud {
        left: 8px;
        right: 8px;
        bottom: 8px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 8px 9px;
    }

    .meditation-stage-hud strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .meditation-stage-hud em {
        justify-self: end;
        white-space: nowrap;
    }

    .meditation-v2 .meditation-dashboard {
        display: flex;
        flex-direction: column;
        padding: 10px;
    }

    .meditation-header {
        order: 1;
        gap: 4px;
        margin-bottom: 10px;
    }

    .meditation-v2 .meditation-header h3 {
        font-size: 24px;
    }

    .meditation-v2 .meditation-desc {
        font-size: 12px;
        line-height: 1.45;
    }

    .meditation-stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    .meditation-v2 .meditation-stats {
        order: 2;
        margin: 0 0 7px;
    }

    .meditation-v2 .stat-item {
        min-height: 48px;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px;
        text-align: center;
    }

    .meditation-v2 .stat-label {
        font-size: 10px;
        line-height: 1.15;
    }

    .meditation-v2 .stat-value {
        font-size: 14px;
        line-height: 1.15;
    }

    .meditation-cycle-board {
        order: 4;
        padding: 7px 8px;
    }

    .meditation-progress-track {
        height: 6px;
        margin: 5px 0 7px;
    }

    .meditation-secondary-toggle {
        appearance: none;
        order: 5;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
        width: 100%;
        margin-top: 6px;
        padding: 6px 8px;
        border: 1px solid rgba(117, 224, 208, 0.22);
        border-radius: 8px;
        background:
            linear-gradient(135deg, rgba(117, 224, 208, 0.10), rgba(241, 212, 138, 0.06)),
            rgba(255, 255, 255, 0.035);
        color: #e8eee7;
        text-align: left;
        cursor: pointer;
    }

    .meditation-secondary-toggle span {
        color: rgba(223, 249, 244, 0.78);
        font-size: 11px;
        font-weight: 800;
        line-height: 1.2;
        white-space: nowrap;
    }

    .meditation-secondary-toggle strong {
        min-width: 0;
        color: #f3ead8;
        font-size: 12px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .meditation-secondary-toggle em {
        grid-column: auto;
        grid-row: auto;
        min-width: 42px;
        padding: 3px 7px;
        border-radius: 999px;
        background: rgba(117, 224, 208, 0.12);
        color: #75e0d0;
        font-size: 11px;
        font-style: normal;
        text-align: center;
    }

    .meditation-dashboard.stats-expanded .meditation-secondary-toggle em {
        background: rgba(241, 212, 138, 0.14);
        color: #f1d48a;
    }

    .meditation-v2 .meditation-secondary-stats {
        order: 6;
        display: none;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
        margin-top: 7px;
    }

    .meditation-v2 .meditation-dashboard.stats-expanded .meditation-secondary-stats {
        display: grid;
    }

    .meditation-secondary-stats > div {
        min-height: 46px;
        padding: 6px 4px;
    }

    .meditation-secondary-stats span {
        font-size: 10px;
    }

    .meditation-secondary-stats strong {
        font-size: 13px;
    }

    .meditation-v2 .meditation-control {
        order: 3;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin: 0 0 7px;
    }

    .meditation-v2 .btn-meditation {
        width: 100%;
        min-height: 38px;
        padding: 8px 10px;
    }

    .meditation-v2 .btn-icon {
        width: 18px;
        height: 18px;
    }

    .meditation-container.meditation-v2 .meditation-focus-nav {
        position: sticky;
        top: 0;
        display: flex;
        gap: 7px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding: 7px 18px 7px 7px;
        box-shadow:
            inset -34px 0 26px -24px rgba(241, 212, 138, 0.68),
            0 16px 34px rgba(0, 0, 0, 0.22);
    }

    .meditation-container.meditation-v2 .meditation-focus-nav::after {
        content: "";
        position: absolute;
        right: 0;
        top: 7px;
        bottom: 7px;
        transform: none;
        z-index: 2;
        width: 16px;
        height: auto;
        display: block;
        padding: 0;
        border: 0;
        border-radius: 0 10px 10px 0;
        background: linear-gradient(90deg, rgba(9, 19, 18, 0), rgba(241, 212, 138, 0.24));
        color: transparent;
        font-size: 0;
        line-height: 1;
        pointer-events: none;
    }

    .meditation-container.meditation-v2 .meditation-focus-nav::-webkit-scrollbar {
        height: 0;
    }

    .meditation-focus-tab {
        flex: 0 0 142px;
        min-height: 44px;
        padding: 7px 9px;
        scroll-snap-align: start;
    }

    .meditation-focus-tab span {
        font-size: 12px;
    }

    .meditation-focus-tab strong {
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .meditation-panel-block {
        padding: 10px;
    }

    .meditation-method-list,
    .meditation-facility-list,
    .meditation-goal-list,
    .meditation-guardian-list,
    .meditation-synergy-list,
    .meditation-season-stats,
    .meditation-atlas-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .meditation-method-card,
    .meditation-facility-card,
    .meditation-goal-card,
    .meditation-synergy-chip {
        padding: 9px;
    }

    .meditation-method-card {
        min-height: 116px;
    }

    .meditation-method-card p,
    .meditation-facility-card p,
    .meditation-goal-card p {
        font-size: 11px;
        line-height: 1.4;
    }

    .meditation-guardian-banner {
        min-height: 190px;
    }

    .meditation-guardian-card {
        min-height: 62px;
        padding: 7px;
    }

    .meditation-section-grid-growth .meditation-facility-block,
    .meditation-section-grid-growth .meditation-goal-block {
        max-height: 470px;
    }

    .meditation-section-grid-growth .meditation-facility-list,
    .meditation-section-grid-growth .meditation-goal-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Business external demo layer */
.business-demo-section {
    border-color: rgba(222, 184, 92, 0.34);
    background:
        linear-gradient(180deg, rgba(42, 34, 24, 0.82), rgba(19, 25, 28, 0.92)),
        rgba(20, 24, 28, 0.92);
}

.business-demo-status {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.business-demo-status > div,
.business-demo-notes {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(234, 208, 145, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.business-demo-status span,
.business-demo-status em,
.business-demo-notes span {
    display: block;
    min-width: 0;
    color: rgba(241, 226, 194, 0.76);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.business-demo-status strong {
    display: block;
    margin: 4px 0;
    color: #f3d27d;
    font-size: 18px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.business-demo-progress {
    margin: 6px 0 14px;
}

.business-demo-asset-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.business-demo-asset-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(234, 208, 145, 0.22);
    border-radius: 8px;
    background: rgba(6, 12, 14, 0.54);
}

.business-demo-asset-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
}

.business-demo-asset-body {
    display: grid;
    gap: 5px;
    padding: 10px;
}

.business-demo-asset-body span,
.business-demo-asset-body em {
    color: rgba(241, 226, 194, 0.72);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.business-demo-asset-body strong {
    color: #f7e6b1;
    font-size: 15px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.business-demo-step-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.business-demo-step-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    min-width: 0;
    min-height: 178px;
    padding: 10px;
    border: 1px solid rgba(210, 197, 156, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.048);
}

.business-demo-step-card.active {
    border-color: rgba(235, 184, 86, 0.52);
    background: rgba(92, 69, 32, 0.28);
}

.business-demo-step-card.done {
    border-color: rgba(97, 185, 134, 0.42);
    background: rgba(32, 74, 54, 0.24);
}

.business-demo-step-index {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #161a18;
    background: #e8c978;
    font-weight: 800;
    line-height: 1;
}

.business-demo-step-card.done .business-demo-step-index {
    background: #78c796;
}

.business-demo-step-body {
    display: grid;
    grid-template-rows: auto auto minmax(52px, 1fr) auto;
    gap: 6px;
    min-width: 0;
}

.business-demo-step-body span {
    color: rgba(241, 226, 194, 0.72);
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.business-demo-step-body strong {
    color: #f7e6b1;
    font-size: 15px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.business-demo-step-body p {
    margin: 0;
    color: rgba(241, 226, 194, 0.76);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.business-demo-step-body .business-action-btn {
    min-height: 34px;
}

@media (max-width: 980px) {
    .business-demo-status,
    .business-demo-step-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .business-demo-asset-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .business-demo-status,
    .business-demo-step-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .business-demo-step-card {
        min-height: 0;
    }
}

.world-linkage-panel {
    display: grid;
    align-content: flex-start;
    grid-auto-rows: max-content;
    gap: 10px;
    margin: 10px 0 12px;
    padding: 12px;
    border: 1px solid rgba(136, 189, 178, 0.26);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(10, 23, 27, 0.88), rgba(32, 28, 20, 0.82));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.world-linkage-panel[hidden] {
    display: none;
}

.world-linkage-header,
.world-linkage-item-main,
.world-linkage-actions {
    display: flex;
    align-items: center;
}

.world-linkage-header {
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.world-linkage-eyebrow {
    color: rgba(151, 216, 205, 0.78);
    font-size: 12px;
    line-height: 1.2;
}

.world-linkage-header h3 {
    margin: 2px 0 0;
    color: #f5e3b8;
    font-size: 18px;
    line-height: 1.25;
}

.world-linkage-actions {
    flex: 0 0 auto;
    gap: 8px;
}

.world-linkage-status,
.world-linkage-refresh,
.world-linkage-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    border: 1px solid rgba(232, 210, 152, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(249, 235, 199, 0.88);
    line-height: 1.25;
}

.world-linkage-status {
    padding: 6px 9px;
    font-size: 12px;
}

.world-linkage-refresh {
    min-height: 30px;
    padding: 5px 11px;
    cursor: pointer;
    font-size: 13px;
}

.world-linkage-refresh:hover {
    border-color: rgba(136, 189, 178, 0.5);
    background: rgba(136, 189, 178, 0.16);
}

.world-linkage-context-row,
.world-linkage-tag-row,
.world-linkage-entry-row,
.world-linkage-axis-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 6px;
    min-width: 0;
}

.world-linkage-chip {
    flex: 0 0 auto;
    align-self: flex-start;
    justify-content: flex-start;
    min-height: 24px;
    max-width: 100%;
    padding: 5px 8px;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.world-linkage-chip.tag {
    border-color: rgba(235, 176, 90, 0.24);
    color: #f1d28a;
}

.world-linkage-chip.entry {
    border-color: rgba(115, 185, 161, 0.28);
    color: #bfeade;
}

.world-linkage-chip.axis {
    color: rgba(235, 228, 207, 0.76);
}

.world-linkage-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.world-linkage-item {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
}

.world-linkage-item-main {
    gap: 9px;
    min-width: 0;
}

.world-linkage-rank {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #93d2c3;
    color: #10201d;
    font-weight: 800;
    line-height: 1;
}

.world-linkage-item-copy {
    min-width: 0;
}

.world-linkage-item-title {
    color: #fff1c9;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.world-linkage-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
    margin-top: 3px;
    color: rgba(238, 226, 196, 0.72);
    font-size: 12px;
    line-height: 1.25;
}

.world-linkage-details {
    min-width: 0;
    color: rgba(238, 226, 196, 0.78);
    font-size: 12px;
    line-height: 1.45;
}

.world-linkage-details summary {
    cursor: pointer;
    color: #9ddcca;
}

.world-linkage-details p {
    margin: 7px 0;
    overflow-wrap: anywhere;
}

.world-linkage-details ul {
    margin: 7px 0 0;
    padding-left: 16px;
}

.world-linkage-details li {
    margin: 3px 0;
    overflow-wrap: anywhere;
}

.world-linkage-details code {
    color: #efcf83;
    font-size: 11px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.world-linkage-empty {
    grid-column: 1 / -1;
    padding: 10px;
    color: rgba(238, 226, 196, 0.78);
    font-size: 13px;
}

.world-linkage-panel[data-world-linkage-status="offline"] {
    border-color: rgba(207, 103, 91, 0.36);
}

@media (max-width: 900px) {
    .world-linkage-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .world-linkage-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .world-linkage-actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* AI quota badge */
.ai-quota-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 10px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 8px;
    background: rgba(24, 20, 16, 0.72);
    color: #f2dfb6;
    font-size: 13px;
    line-height: 1.35;
}

.ai-quota-badge span {
    font-weight: 600;
}

.ai-quota-badge small {
    color: #bfae8a;
}