border: 1px solid rgba(255, 217, 121, 0.34);
    border-radius: 8px;
    background: rgba(32, 25, 17, 0.96);
    color: #fff7df;
    box-shadow: var(--dash-shadow);
}

.city-place-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 217, 121, 0.42);
    border-radius: 50%;
    background: rgba(20, 14, 9, 0.78);
    color: #ffe7a0;
    font-size: 22px;
    line-height: 1;
}

.city-place-modal-media {
    position: relative;
    height: 150px;
    overflow: hidden;
}

.city-place-modal-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(32, 25, 17, 0.95));
}

.city-place-modal-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.city-place-modal-body {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.city-place-modal-body h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
}

.city-place-modal-body strong {
    color: #ffd979;
    font-size: 14px;
}

.city-place-modal-body p {
    margin: 0;
    color: rgba(255, 247, 223, 0.78);
    font-size: 13px;
    line-height: 1.45;
}

.city-place-modal-stats,
.city-place-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.city-place-modal-stats span {
    padding: 5px 8px;
    border: 1px solid rgba(255, 217, 121, 0.26);
    border-radius: 999px;
    background: rgba(255, 217, 121, 0.1);
    color: #ffe7a0;
    font-size: 11px;
    font-weight: 800;
}

.city-place-modal-actions button {
    flex: 1 1 130px;
    min-height: 40px;
    border: 1px solid rgba(255, 217, 121, 0.45);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffe39a, #b47a2d);
    color: #321d0c;
    font-weight: 900;
}

.city-place-modal-actions button.secondary {
    background: rgba(255, 247, 223, 0.08);
    color: #fff1bc;
}

.city-place-modal-actions button:disabled,
.city-place-modal-actions button.cooldown {
    cursor: not-allowed;
    border-color: rgba(126, 93, 42, 0.55);
    background: linear-gradient(180deg, #d5c8a4, #8b7651);
    color: rgba(54, 38, 18, 0.74);
    opacity: 0.82;
    box-shadow: none;
}

.event-modal {
    position: fixed;
    inset: 0;
    z-index: 21000;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100dvh;
    padding: var(--game-frame-modal-padding);
    overflow: hidden;
    box-sizing: border-box;
}

.event-modal.active {
    display: flex;
}

.event-modal-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 217, 121, 0.16), transparent 40%),
        rgba(10, 7, 3, 0.72);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.event-modal-card {
    position: relative;
    z-index: 1;
    width: min(100%, var(--game-frame-modal-width));
    max-width: var(--game-frame-modal-width);
    max-height: calc(100dvh - 24px);
    overflow: hidden auto;
    border: 1px solid rgba(255, 217, 121, 0.38);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(42, 30, 16, 0.98), rgba(17, 14, 8, 0.98)),
        #1e170c;
    color: #fff5d1;
    box-shadow:
        inset 0 1px 0 rgba(255, 241, 184, 0.18),
        0 18px 45px rgba(0, 0, 0, 0.58);
}

.event-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 217, 121, 0.42);
    border-radius: 50%;
    background: rgba(20, 14, 9, 0.82);
    color: #ffe7a0;
    font-size: 22px;
    line-height: 1;
}

.event-stage {
    display: grid;
    gap: 10px;
    padding: 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.event-balance-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-right: 34px;
}

.event-polarity {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid rgba(255, 217, 121, 0.18);
    border-radius: 7px;
    background: rgba(255, 247, 223, 0.06);
    color: rgba(255, 236, 178, 0.86);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
}

.event-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 217, 121, 0.22);
    border-radius: 8px;
    background: rgba(255, 247, 223, 0.06);
}

.event-header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.event-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 217, 121, 0.32);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, rgba(255, 242, 179, 0.42), rgba(151, 93, 23, 0.22) 58%, rgba(12, 8, 3, 0.4));
    font-size: 22px;
}

.event-title {
    display: grid;
    gap: 3px;
    color: #ffe6a1;
    font-size: 16px;
    font-weight: 950;
    line-height: 1.15;
}

.event-title small,
.event-flavor,
.event-body,
.event-impact-note {
    color: rgba(255, 247, 223, 0.72);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.38;
}

.event-flavor {
    color: rgba(255, 221, 143, 0.84);
    text-transform: uppercase;
}

.event-choices {
    display: grid;
    gap: 8px;
}

.choice-btn {
    display: grid;
    gap: 5px;
    width: 100%;
    min-height: 54px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 217, 121, 0.28);
    border-radius: 8px;
    background: rgba(255, 247, 223, 0.08);
    color: #fff4cf;
    text-align: left;
}

.choice-btn[data-tone="integritas"] {
    border-color: rgba(141, 219, 169, 0.38);
}

.choice-btn[data-tone="pragmatis"],
.choice-btn.corrupt {
    border-color: rgba(239, 139, 91, 0.46);
}

.choice-label {
    color: #ffe6a1;
    font-size: 12px;
    font-weight: 950;
}

.choice-content,
.choice-copy,
.choice-effect-preview {
    display: block;
    color: rgba(255, 247, 223, 0.72);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.32;
}

.choice-effect-preview {
    margin-top: 3px;
    color: rgba(255, 221, 143, 0.84);
}

.event-signal-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 9px;
    border: 1px solid rgba(255, 217, 121, 0.24);
    border-radius: 8px;
    background: rgba(29, 22, 12, 0.78);
}

.event-signal-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 217, 121, 0.13);
    font-size: 20px;
}

.event-signal-card strong,
.event-signal-card p {
    display: block;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-signal-card strong {
    color: #ffe6a1;
    font-size: 12px;
    font-weight: 950;
}

.event-signal-card p {
    color: rgba(255, 247, 223, 0.62);
    font-size: 10px;
    font-weight: 800;
}

.signal-open-btn {
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 217, 121, 0.42);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(255, 241, 198, 0.96), rgba(214, 165, 79, 0.9));
    color: #321d0c;
    font-size: 11px;
    font-weight: 950;
}

.beginner-tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 26000;
    display: block;
    width: 100vw;
    height: 100dvh;
    pointer-events: none;
}

.tutorial-scrim {
    position: absolute;
    inset: 0;
    background: rgba(7, 5, 2, 0.46);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    pointer-events: auto;
}

.tutorial-popover {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 16px;
    z-index: 2;
    display: grid;
    gap: 8px;
    width: min(340px, calc(100% - 24px));
    max-height: calc(100% - 32px);
    overflow: auto;
    padding: 12px;
    border: 1px solid rgba(255, 217, 121, 0.46);
    border-radius: 9px;
    background:
        linear-gradient(180deg, rgba(47, 33, 15, 0.98), rgba(18, 15, 9, 0.98)),
        #1f170c;
    color: #fff4c7;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.5);
    transform: translateX(-50%);
    pointer-events: auto;
}

.tutorial-popover.is-top {
    top: 16px;
    bottom: auto;
}

.tutorial-progress-row,
.tutorial-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tutorial-progress,
.tutorial-eyebrow {
    color: rgba(255, 221, 143, 0.82);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.tutorial-progress-track {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 247, 223, 0.12);
}

.tutorial-progress-track div {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffe39a, #b47a2d);
}

.tutorial-popover h3,
.tutorial-popover p {
    margin: 0;
}

.tutorial-popover h3 {
    color: #ffe6a1;
    font-size: 15px;
    font-weight: 950;
}

.tutorial-popover p,
.tutorial-point-list {
    color: rgba(255, 247, 223, 0.74);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.38;
}

.tutorial-point-list {
    margin: 0;
    padding-left: 18px;
}

.tutorial-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.tutorial-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 247, 223, 0.28);
}

.tutorial-dots span.active {
    background: #ffe39a;
}

.tutorial-actions button {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 217, 121, 0.38);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 950;
}

.tutorial-primary {
    background: linear-gradient(180deg, rgba(255, 241, 198, 0.96), rgba(214, 165, 79, 0.9));
    color: #321d0c;
}

.tutorial-secondary {
    background: rgba(255, 247, 223, 0.08);
    color: #fff1bc;
}

.tutorial-focus {
    z-index: 26001 !important;
    outline: 2px solid rgba(255, 226, 143, 0.9);
    outline-offset: 3px;
}

.city-place-cooldown-text {
    display: inline-block;
    min-width: 48px;
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

.dashboard-panel-card {
    width: 100%;
    padding: 14px;
    border: 1px solid rgba(255, 216, 112, 0.48);
    border-radius: 8px;
    background: rgba(31, 27, 18, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--dash-shadow);
}

.dashboard-panel-card strong,
.dashboard-panel-card span {
    display: block;
}

.dashboard-panel-card strong {
    color: #ffe6a1;
    font-size: 15px;
    font-weight: 900;
}

.dashboard-panel-card span {
    margin-top: 5px;
    color: #fff7d8;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}

.dashboard-v21-menu-card {
    position: relative;
    display: grid;
    gap: 10px;
    overflow: hidden;
}

.dashboard-v21-menu-head {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding-right: 28px;
}

.dashboard-v21-menu-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 217, 121, 0.28);
    border-radius: 8px;
    background: rgba(255, 247, 223, 0.08);
}

.dashboard-v21-menu-icon .dashboard-button-art {
    --button-art-size: 34px;
}

.dashboard-v21-menu-kicker {
    display: block;
    margin: 0 0 3px;
    color: #ffd979;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.dashboard-v21-menu-head p {
    margin: 5px 0 0;
    color: rgba(255, 247, 223, 0.78);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}

.dashboard-v21-menu-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.dashboard-v21-menu-stats span {
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding: 7px 8px;
    border: 1px solid rgba(255, 217, 121, 0.2);
    border-radius: 7px;
    background: rgba(255, 217, 121, 0.08);
    color: #fff5cd;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.15;
}

.dashboard-v21-menu-stats b {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 247, 223, 0.62);
    font-size: 9px;
    font-weight: 950;
    text-transform: uppercase;
}

.dashboard-v21-menu-steps {
    display: grid;
    gap: 5px;
}

.dashboard-v21-menu-steps span {
    position: relative;
    margin: 0;
    padding: 7px 8px 7px 22px;
    border: 1px solid rgba(255, 247, 223, 0.09);
    border-radius: 7px;
    background: rgba(255, 247, 223, 0.06);
    color: rgba(255, 247, 223, 0.82);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.28;
}

.dashboard-v21-menu-steps span::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffd979;
    box-shadow: 0 0 0 3px rgba(255, 217, 121, 0.14);
}

.dashboard-v21-menu-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-v21-menu-actions button {
    min-height: 40px;
    border: 1px solid rgba(255, 217, 121, 0.45);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffe39a, #b47a2d);
    color: #321d0c;
    font-size: 11px;
    font-weight: 950;
}

.dashboard-v21-menu-actions button.secondary {
    background: rgba(255, 247, 223, 0.08);
    color: #fff1bc;
}

.dashboard-system-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    padding: 8px;
    border: 2px solid rgba(211, 163, 91, 0.92);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(50, 35, 21, 0.9), rgba(21, 25, 17, 0.92)),
        radial-gradient(circle at 50% 0%, rgba(255, 225, 126, 0.18), transparent 42%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 230, 150, 0.32),
        0 16px 36px rgba(0, 0, 0, 0.45);
}

.dashboard-system-topbar {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    min-height: 48px;
    margin-top: 0;
    padding: 4px 6px;
    border-radius: 7px;
    background:
        url("../img/button/bar-tabs.webp") center / 100% 100% no-repeat,
        linear-gradient(180deg, rgba(75, 48, 24, 0.92), rgba(37, 26, 16, 0.98));
    box-shadow:
        inset 0 0 0 1px rgba(255, 230, 150, 0.26),
        0 5px 10px rgba(0, 0, 0, 0.24);
}

.dashboard-system-back {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.42));
}

.dashboard-system-back img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dashboard-system-back:focus-visible,
.dashboard-system-back:hover {
    outline: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.48)) brightness(1.08);
}

.dashboard-system-topbar-title {
    display: grid;
    min-width: 0;
    padding: 0 8px 1px 2px;
}

.dashboard-system-topbar-title span {
    margin: 0;
    color: rgba(255, 247, 223, 0.68);
    font-size: 9px;
    font-weight: 950;
    line-height: 1.1;
    text-transform: uppercase;
}

.dashboard-system-topbar-title strong {
    overflow: hidden;
    color: #ffe7a2;
    font-size: 15px;
    font-weight: 950;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-system-body {
    min-height: 0;
    overflow-y: auto;
    padding: 4px 3px 0 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(221, 173, 91, 0.86) rgba(35, 24, 14, 0.42);
}

.dashboard-system-body::-webkit-scrollbar {
    width: 7px;
}

.dashboard-system-body::-webkit-scrollbar-track {
    background: rgba(35, 24, 14, 0.42);
    border-radius: 999px;
}

.dashboard-system-body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(221, 173, 91, 0.86);
}

.dashboard-system-body .dashboard-v21-menu-card {
    border-radius: 7px;
    background: rgba(20, 16, 11, 0.68);
    box-shadow: none;
}

.dashboard-system-live {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.dashboard-career-panel,
.dashboard-mission-panel {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.dashboard-career-hero,
.dashboard-mission-hero {
    display: grid;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 217, 121, 0.24);
    border-radius: 8px;
    background: rgba(20, 16, 11, 0.72);
}

.dashboard-career-hero {
    grid-template-columns: 48px minmax(0, 1fr);
}

.dashboard-mission-hero {
    grid-template-columns: 48px minmax(0, 1fr);
}

.dashboard-career-icon,
.dashboard-mission-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 217, 121, 0.28);
    border-radius: 8px;
    background: rgba(255, 247, 223, 0.08);
}

.dashboard-career-icon .dashboard-button-art,
.dashboard-mission-icon .dashboard-button-art {
    --button-art-size: 36px;
}

.dashboard-career-hero div,
.dashboard-mission-hero div {
    min-width: 0;
}

.dashboard-career-hero span:not(.dashboard-career-icon),
.dashboard-mission-hero span:not(.dashboard-mission-icon) {
    margin: 0 0 3px;
    color: rgba(255, 247, 223, 0.64);
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.dashboard-career-hero strong,
.dashboard-mission-hero strong {
    display: block;
    overflow: hidden;
    color: #ffe6a1;
    font-size: 16px;
    font-weight: 950;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-mission-hero button {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255, 217, 121, 0.42);
    border-radius: 7px;
    background: rgba(255, 247, 223, 0.08);
    color: #fff1bc;
    font-size: 10px;
    font-weight: 950;
}

.dashboard-career-path {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(12, 32, 44, 0.48), rgba(20, 16, 11, 0.48));
}

.dashboard-career-path header,
.dashboard-mission-priority header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.dashboard-career-path header span,
.dashboard-mission-priority header span {
    color: rgba(255, 247, 223, 0.62);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.dashboard-career-path header strong,
.dashboard-mission-priority header strong {
    color: #ffe6a1;
    font-size: 12px;
    font-weight: 950;
}

.dashboard-career-path-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.dashboard-career-path-node {
    position: relative;
    min-height: 40px;
    margin: 0;
    padding: 8px 7px;
    border: 1px solid rgba(255, 247, 223, 0.1);
    border-radius: 7px;
    background: rgba(255, 247, 223, 0.055);
    color: rgba(255, 247, 223, 0.68);
}

.dashboard-career-path-node b {
    display: block;
    overflow: hidden;
    font-size: 10px;
    font-weight: 950;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-career-path-node.done,
.dashboard-career-path-node.active {
    border-color: rgba(125, 211, 252, 0.45);
    background: rgba(14, 116, 144, 0.22);
    color: #d9fbff;
}

.dashboard-career-path-node.available {
    border-color: rgba(255, 217, 121, 0.34);
    background: rgba(255, 217, 121, 0.1);
    color: #fff1bc;
}

.dashboard-career-path-node.locked {
    opacity: 0.72;
}

.dashboard-career-path-all {
    gap: 7px;
}

.dashboard-career-lane {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(255, 247, 223, 0.1);
    border-radius: 7px;
    background: rgba(255, 247, 223, 0.055);
}

.dashboard-career-lane div {
    min-width: 0;
}

.dashboard-career-lane span,
.dashboard-career-lane small {
    color: rgba(255, 247, 223, 0.62);
    font-size: 9px;
    font-weight: 950;
    text-transform: uppercase;
}

.dashboard-career-lane strong {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: #fff1bc;
    font-size: 10.5px;
    font-weight: 950;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-career-focus,
.dashboard-career-resource-grid,
.dashboard-mission-summary {
    display: grid;
    gap: 6px;
}

.dashboard-career-focus {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-career-resource-grid,
.dashboard-mission-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-career-focus div {
    min-width: 0;
    min-height: 48px;
    padding: 8px;
    border: 1px solid rgba(255, 217, 121, 0.2);
    border-radius: 7px;
    background: rgba(255, 217, 121, 0.08);
}

.dashboard-career-focus span {
    margin: 0 0 4px;
    color: rgba(255, 247, 223, 0.62);
    font-size: 9px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.dashboard-career-focus strong {
    display: block;
    overflow: hidden;
    color: #fff5cd;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-career-live,
.dashboard-mission-live {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.dashboard-career-board-wrap {
    padding: 10px;
    border: 1px solid rgba(125, 211, 252, 0.24);
    border-radius: 8px;
    background: rgba(8, 28, 39, 0.34);
}

.career-board-next {
    display: grid;
    gap: 3px;
    margin-bottom: 8px;
}

.career-board-next span {
    color: rgba(255, 247, 223, 0.62);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.career-board-next strong {
    color: #ffe6a1;
    font-size: 16px;
    font-weight: 950;
    line-height: 1.15;
}

.career-board-reqs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 8px 0;
}

.career-board-reqs span {
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(255, 217, 121, 0.18);
    border-radius: 7px;
    background: rgba(255, 247, 223, 0.06);
}

.career-board-reqs b {
    display: block;
    color: rgba(255, 247, 223, 0.62);
    font-size: 9px;
    font-weight: 950;
    text-transform: uppercase;
}

.career-board-reqs strong {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: #fff1bc;
    font-size: 11px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.career-board-reqs .met {
    color: #9ff3c1;
}

.career-board-reqs .not-met {
    color: #ffb4a8;
}

.career-board-reqs .target-sep {
    color: rgba(255, 247, 223, 0.42);
}

.career-board-reqs .target-val {
    color: #fff1bc;
}

.career-board-reqs span.assisted {
    border-color: rgba(125, 211, 252, 0.36);
    background: rgba(14, 116, 144, 0.18);
}

.career-risk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 8px 0;
}

.career-risk-box,
.career-machine-panel {
    padding: 8px;
    border: 1px solid rgba(255, 217, 121, 0.18);
    border-radius: 7px;
    background: rgba(255, 247, 223, 0.06);
}

.career-risk-box span {
    display: block;
    color: rgba(255, 247, 223, 0.62);
    font-size: 9px;
    font-weight: 950;
    text-transform: uppercase;
}

.career-risk-box strong {
    color: #fff1bc;
    font-size: 13px;
    font-weight: 950;
}

.career-risk-box.warn {
    border-color: rgba(255, 196, 87, 0.34);
}

.career-risk-box.danger {
    border-color: rgba(255, 118, 104, 0.42);
    background: rgba(127, 29, 29, 0.24);
}

.career-risk-box.active {
    border-color: rgba(125, 211, 252, 0.38);
    background: rgba(14, 116, 144, 0.16);
}

.career-machine-panel {
    display: grid;
    gap: 4px;
    margin: 8px 0;
    border-color: rgba(255, 196, 87, 0.35);
}

.career-machine-panel strong {
    color: #ffe6a1;
    font-size: 11px;
    font-weight: 950;
}

.career-machine-panel p,
.dashboard-career-board-wrap p {
    margin: 0;
    color: rgba(255, 247, 223, 0.76);
    font-size: 11px;
    line-height: 1.38;
}

.career-path-choice-grid {
    display: grid;
    gap: 8px;
}

.career-path-choice {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 217, 121, 0.22);
    border-radius: 8px;
    background: rgba(24, 18, 11, 0.62);
}

.career-path-choice.ready {
    border-color: rgba(255, 217, 121, 0.48);
    background: linear-gradient(180deg, rgba(86, 58, 19, 0.62), rgba(24, 18, 11, 0.72));
}

.career-path-choice header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.career-path-choice header span {
    color: rgba(255, 247, 223, 0.62);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.career-path-choice header strong {
    overflow: hidden;
    color: #ffe6a1;
    font-size: 14px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.career-path-choice p,
.career-path-choice small {
    margin: 0;
    color: rgba(255, 247, 223, 0.76);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}

.career-path-choice-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.career-path-choice-tags b {
    padding: 4px 7px;
    border: 1px solid rgba(125, 211, 252, 0.24);
    border-radius: 999px;
    background: rgba(14, 116, 144, 0.18);
    color: #d9fbff;
    font-size: 9px;
    font-weight: 950;
}

.career-path-choice button {
    min-height: 34px;
    border: 1px solid rgba(255, 217, 121, 0.42);
    border-radius: 7px;
    background: linear-gradient(180deg, #ffe39a, #b47a2d);
    color: #321d0c;
    font-size: 10px;
    font-weight: 950;
}

.career-path-choice button:disabled {
    background: rgba(255, 247, 223, 0.08);
    color: rgba(255, 247, 223, 0.46);
}

.career-board-reqs-v21.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-career-target-note {
    min-height: 34px;
    display: grid;
    place-items: center;
    padding: 8px;
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 7px;
    background: rgba(14, 116, 144, 0.16);
    color: #d9fbff;
    font-size: 10.5px;
    font-weight: 950;
    text-align: center;
}

.dashboard-mission-phase-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.dashboard-mission-phase {
    position: relative;
    display: grid;
    gap: 4px;
    min-height: 72px;
    padding: 9px;
    overflow: hidden;
    border: 1px solid rgba(255, 217, 121, 0.22);
    border-radius: 8px;
    background: rgba(55, 39, 18, 0.45);
    color: #fff1bc;
    text-align: left;
}

.dashboard-mission-phase span,
.dashboard-mission-phase b,
.dashboard-mission-phase strong {
    position: relative;
    z-index: 1;
    display: block;
}

.dashboard-mission-phase span {
    margin: 0;
    color: rgba(255, 247, 223, 0.62);
    font-size: 9px;
    font-weight: 950;
    text-transform: uppercase;
}

.dashboard-mission-phase strong {
    color: #ffe6a1;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.1;
}

.dashboard-mission-phase b {
    color: #fff7d8;
    font-size: 11px;
    font-weight: 950;
}

.dashboard-mission-phase i {
    position: absolute;
    left: 0;
    right: auto;
    bottom: 0;
    height: 4px;
    width: var(--mission-pct, 0%);
    background: #ffd979;
    box-shadow: 0 0 14px rgba(255, 217, 121, 0.42);
}

.dashboard-mission-phase.claimable {
    border-color: rgba(74, 222, 128, 0.44);
    background: rgba(20, 83, 45, 0.34);
}

.quest-phase-actions {
    position: relative;
    z-index: 2;
    margin-top: 4px;
}

.quest-phase-actions button {
    position: relative;
    width: 100%;
    min-height: 30px;
    border: 1px solid rgba(255, 217, 121, 0.48);
    border-radius: 7px;
    background: linear-gradient(180deg, #ffe39a, #b47a2d);
    color: #321d0c;
    font-size: 10px;
    font-weight: 950;
}

.quest-phase-actions button:disabled,
.quest-phase-actions .quest-cooldown-btn {
    cursor: not-allowed;
    border-color: rgba(126, 93, 42, 0.5);
    background: linear-gradient(180deg, #d5c8a4, #8b7651);
    color: rgba(54, 38, 18, 0.78);
    box-shadow: none;
}

.dashboard-mission-priority {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(255, 217, 121, 0.18);
    border-radius: 8px;
    background: rgba(20, 16, 11, 0.5);
}

.dashboard-mission-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 52px;
    padding: 8px;
    border: 1px solid rgba(255, 247, 223, 0.1);
    border-radius: 7px;
    background: rgba(255, 247, 223, 0.055);
}

.dashboard-mission-row div {
    min-width: 0;
}

.dashboard-mission-row strong,
.dashboard-mission-row span,
.dashboard-mission-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-mission-row strong {
    color: #fff1bc;
    font-size: 11px;
    font-weight: 950;
}

.dashboard-mission-row span {
    margin: 3px 0 0;
    color: rgba(255, 247, 223, 0.67);
    font-size: 9.5px;
    font-weight: 800;
}

.dashboard-mission-row small {
    margin-top: 3px;
    color: rgba(255, 217, 121, 0.86);
    font-size: 9px;
    font-weight: 900;
}

.dashboard-mission-row button {
    position: relative;
    min-height: 32px;
    border: 1px solid rgba(255, 217, 121, 0.45);
    border-radius: 7px;
    background: linear-gradient(180deg, #ffe39a, #b47a2d);
    color: #321d0c;
    font-size: 10px;
    font-weight: 950;
}

.dashboard-mission-row button:disabled,
.dashboard-mission-row .quest-cooldown-btn,
.fp-row-claim-btn.quest-cooldown-btn {
    cursor: not-allowed;
    border-color: rgba(126, 93, 42, 0.5);
    background: linear-gradient(180deg, #d5c8a4, #8b7651);
    color: rgba(54, 38, 18, 0.78);
    box-shadow: none;
}

.quest-cooldown-text {
    display: inline-block;
    min-width: 48px;
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

.has-action-badge {
    position: relative;
}

.has-action-badge::after,
body.has-claimable-quests .dashboard-start-actions button[data-start-action="misi"]::after,
body.has-runnable-quests .dashboard-start-actions button[data-start-action="misi"]::after,
body.has-runnable-city-quests .dashboard-start-actions button[data-start-action="kota"]::after,
body.has-city-explore-ready .dashboard-start-actions button[data-start-action="kota"]::after,
body.has-runnable-action-quests .dashboard-start-actions button[data-start-action="aksi"]::after,
body.has-ready-actions .dashboard-start-actions button[data-start-action="aksi"]::after,
body.has-claimable-quests .dashboard-quest-bar::after,
.dashboard-mission-phase.claimable::after {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 3;
    display: block;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(255, 225, 187, 0.8);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ff8275 0%, #f23d34 40%, #a80d16 100%);
    box-shadow: 0 2px 4px rgba(69, 0, 0, 0.5), 0 0 0 2px rgba(242, 61, 52, 0.15);
    animation: badge-pulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

@keyframes badge-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.dashboard-mission-phase.claimable::after {
    top: 4px;
    right: 4px;
}

.dashboard-hub-loading,
.dashboard-hub-empty {
    min-height: 46px;
    display: grid;
    place-items: center;
    padding: 10px;
    border: 1px solid rgba(255, 217, 121, 0.18);
    border-radius: 7px;
    background: rgba(255, 247, 223, 0.06);
    color: rgba(255, 247, 223, 0.76);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.35;
    text-align: center;
}

.dashboard-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.dashboard-hub-metric {
    min-width: 0;
    min-height: 48px;
    padding: 8px;
    border: 1px solid rgba(255, 217, 121, 0.2);
    border-radius: 7px;
    background: rgba(255, 217, 121, 0.08);
}

.dashboard-hub-metric span {
    display: block;
    margin: 0 0 4px;
    color: rgba(255, 247, 223, 0.62);
    font-size: 9px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.dashboard-hub-metric strong {
    display: block;
    overflow: hidden;
    color: #fff5cd;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-hub-card {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(255, 217, 121, 0.2);
    border-radius: 7px;
    background: rgba(255, 247, 223, 0.06);
}

.dashboard-hub-card.danger {
    border-color: rgba(248, 113, 113, 0.42);
    background: rgba(127, 29, 29, 0.24);
}

.dashboard-hub-card strong {
    color: #ffe6a1;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.15;
}

.dashboard-hub-card span {
    margin: 0;
    color: rgba(255, 247, 223, 0.78);
    font-size: 10.5px;
    font-weight: 750;
    line-height: 1.35;
}

.dashboard-hub-list {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.dashboard-hub-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 247, 223, 0.1);
    border-radius: 7px;
    background: rgba(255, 247, 223, 0.055);
}

.dashboard-hub-row div {
    min-width: 0;
}

.dashboard-hub-row strong,
.dashboard-hub-row span {
    display: block;
}

.dashboard-hub-row strong {
    overflow: hidden;
    color: #fff1bc;
    font-size: 11px;
    font-weight: 950;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-hub-row span {
    margin: 3px 0 0;
    overflow: hidden;
    color: rgba(255, 247, 223, 0.67);
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-hub-row button,
.dashboard-hub-actions button {
    position: relative;
    min-height: 32px;
    border: 1px solid rgba(255, 217, 121, 0.45);
    border-radius: 7px;
    background: linear-gradient(180deg, #ffe39a, #b47a2d);
    color: #321d0c;
    font-size: 10px;
    font-weight: 950;
}

.dashboard-hub-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.dashboard-hub-actions button.secondary {
    background: rgba(255, 247, 223, 0.08);
    color: #fff1bc;
}

.dashboard-hub-actions button.danger {
    border-color: rgba(255, 120, 96, 0.48);
    background: rgba(132, 35, 23, 0.88);
    color: #fff4e8;
}

.dashboard-party-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
}

.dashboard-system-partai .dashboard-v21-menu-card {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dashboard-system-partai .dashboard-v21-menu-head,
.dashboard-system-partai .dashboard-v21-menu-stats,
.dashboard-system-partai .dashboard-v21-menu-steps,
.dashboard-system-partai .dashboard-v21-menu-actions {
    display: none !important;
}

.dashboard-system-partai .dashboard-system-live {
    gap: 0;
}

.dashboard-party-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 0 8px;
}

.dashboard-party-tabs button {
    min-height: 38px;
    border: 1px solid rgba(255, 217, 121, 0.32);
    border-radius: 8px 8px 4px 4px;
    background:
        linear-gradient(180deg, rgba(90, 58, 27, 0.82), rgba(30, 20, 12, 0.88)),
        rgba(255, 247, 223, 0.08);
    color: rgba(255, 238, 190, 0.62);
    font-size: 12px;
    font-weight: 950;
}

.dashboard-party-tabs button.active {
    border-color: rgba(255, 217, 121, 0.72);
    background: linear-gradient(180deg, #7c4d1f, #2d1d10);
    color: #ffe6a1;
    box-shadow: inset 0 0 0 1px rgba(255, 230, 150, 0.18), 0 0 18px rgba(240, 171, 50, 0.24);
}

.dashboard-party-layout {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 10px;
    border: 1px solid rgba(255, 217, 121, 0.22);
    border-radius: 8px;
    background:
        radial-gradient(circle at 25% 10%, rgba(255, 217, 121, 0.1), transparent 34%),
        rgba(255, 247, 223, 0.065);
}

.dashboard-party-side {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 6px;
    border-right: 1px solid rgba(255, 217, 121, 0.16);
}

.dashboard-party-logo-frame.is-large {
    width: 118px !important;
    height: 186px !important;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    isolation: isolate;
}

.dashboard-party-logo-frame.is-large::before {
    content: none;
    display: none;
}

.dashboard-party-logo-frame.is-large .party-logo-preview {
    width: 100% !important;
    height: 100% !important;
    margin-top: 0;
    transform: none !important;
}

.dashboard-party-side-actions {
    display: grid;
    gap: 7px;
    width: 100%;
}

.dashboard-party-side-actions button,
.dashboard-party-actions button,
.dashboard-party-task-row button {
    min-height: 32px;
    border: 1px solid rgba(255, 217, 121, 0.45);
    border-radius: 7px;
    background: linear-gradient(180deg, #ffe39a, #b47a2d);
    color: #321d0c;
    font-size: 10px;
    font-weight: 950;
}

.dashboard-party-side-actions button.danger {
    border-color: rgba(255, 120, 96, 0.48);
    background: rgba(132, 35, 23, 0.9);
    color: #fff4e8;
}

.dashboard-party-content,
.dashboard-party-pane {
    min-width: 0;
    min-height: 0;
}

.dashboard-party-pane {
    display: grid;
    gap: 8px;
}

.dashboard-party-pane[hidden] {
    display: none;
}

.dashboard-party-title-card,
.dashboard-party-task-score,
.dashboard-party-section-head {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 217, 121, 0.18);
    border-radius: 8px;
    background: rgba(20, 16, 11, 0.52);
}

.dashboard-party-title-card strong,
.dashboard-party-section-head strong,
.dashboard-party-task-score span {
    color: #ffe6a1;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.15;
}

.dashboard-party-title-card span,
.dashboard-party-section-head span,
.dashboard-party-task-score small {
    color: rgba(255, 247, 223, 0.82);
    font-size: 10px;
    font-weight: 780;
    line-height: 1.3;
}

.dashboard-party-info-grid {
    display: grid;
    gap: 6px;
}

.dashboard-party-info-grid div {
    display: grid;
    grid-template-columns: minmax(82px, 0.72fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid rgba(171, 111, 46, 0.18);
    border-radius: 7px;
    background: rgba(255, 250, 237, 0.82);
}

.dashboard-party-info-grid span {
    color: #6a4924;
    font-size: 10px;
    font-weight: 900;
}

.dashboard-party-info-grid strong {
    overflow: hidden;
    color: #2d1808;
    font-size: 11.5px;
    font-weight: 950;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-party-info-grid i {
    grid-column: 1 / -1;
    position: relative;
    height: 11px;
    overflow: hidden;
    border: 1px solid rgba(255, 217, 121, 0.32);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.36);
    color: #fff7df;
    font-size: 8px;
    font-style: normal;
    font-weight: 950;
    line-height: 10px;
    text-align: center;
}

.dashboard-party-info-grid i::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--party-xp, 0%);
    background: linear-gradient(90deg, #2fa8cc, #ffd45d);
}

.dashboard-party-info-grid i b {
    position: relative;
    z-index: 1;
}

.dashboard-party-bonus-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}

.dashboard-party-bonus-row span {
    min-width: 0;
    padding: 6px 5px;
    border: 1px solid rgba(171, 111, 46, 0.18);
    border-radius: 7px;
    background: rgba(255, 239, 197, 0.88);
    color: #3d230d;
    font-size: 9px;
    font-weight: 950;
    text-align: center;
}

.dashboard-party-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.dashboard-party-note-list,
.dashboard-party-task-list,
.dashboard-party-member-table {
    display: grid;
    gap: 6px;
}

.dashboard-party-note-row,
.dashboard-party-task-row,
.dashboard-party-member-row {
    display: grid;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 247, 223, 0.1);
    border-radius: 7px;
    background: rgba(255, 247, 223, 0.055);
}

.dashboard-party-note-row,
.dashboard-party-task-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.dashboard-party-member-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(56px, 0.7fr) 42px minmax(64px, 0.8fr);
}

.dashboard-party-member-row.is-head {
    min-height: 30px;
    background: rgba(255, 217, 121, 0.1);
}

.dashboard-party-member-row span,
.dashboard-party-task-row span,
.dashboard-party-note-row span {
    min-width: 0;
}

.dashboard-party-member-row strong,
.dashboard-party-task-row strong {
    display: block;
    overflow: hidden;
    color: #fff1bc;
    font-size: 11px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-party-member-row small,
.dashboard-party-task-row small {
    display: block;
    overflow: hidden;
    color: #6c4a25;
    font-size: 8.5px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-party-member-row b,
.dashboard-party-member-row em,
.dashboard-party-member-row i,
.dashboard-party-note-row strong {
    overflow: hidden;
    color: #2f1a09;
    font-size: 9.5px;
    font-style: normal;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-party-task-score strong {
    color: #ffd979;
    font-size: 24px;
    font-weight: 950;
}

.dashboard-party-empty {
    padding: 10px;
    border-radius: 7px;
    background: rgba(255, 250, 237, 0.8);
    color: #5d4020;
    font-size: 10px;
    font-weight: 850;
    text-align: center;
}

@media (max-width: 640px) {
    .dashboard-party-tabs {
        gap: 4px;
        padding: 0;
    }

    .dashboard-party-tabs button {
        min-height: 34px;
        font-size: 10px;
    }

    .dashboard-party-layout {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
    }

    .dashboard-party-side {
        gap: 7px;
        padding: 6px 5px;
    }

    .dashboard-party-logo-frame.is-large {
        width: 88px !important;
        height: 156px !important;
    }

    .dashboard-party-logo-frame.is-large .party-logo-preview {
        width: 100% !important;
        height: 100% !important;
        margin-top: 0;
    }

    .dashboard-party-side-actions button {
        min-height: 29px;
        font-size: 8.5px;
    }

    .dashboard-party-info-grid div,
    .dashboard-party-member-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
    }

    .dashboard-party-info-grid strong,
    .dashboard-party-member-row b,
    .dashboard-party-member-row em,
    .dashboard-party-member-row i {
        text-align: left;
    }

    .dashboard-party-member-row.is-head {
        display: none;
    }

    .dashboard-party-bonus-row,
    .dashboard-party-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dashboard-title-with-tooltip,
.dashboard-row-title,
.dashboard-label-with-tooltip {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
}

.dashboard-title-with-tooltip strong,
.dashboard-row-title strong,
.dashboard-label-with-tooltip > span {
    display: block !important;
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-row-title {
    display: flex !important;
}

.dashboard-row-title strong {
    display: block;
}

.dashboard-tooltip-note {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 8px 0 6px;
    color: rgba(255, 247, 223, 0.72);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.ui-tooltip {
    position: relative;
    z-index: 4;
    display: inline-grid !important;
    place-items: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    overflow: visible !important;
    color: inherit;
    line-height: 1;
    text-transform: none;
    vertical-align: middle;
}

.ui-tooltip .ui-tooltip-trigger {
    display: grid !important;
    place-items: center !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 226, 159, 0.52) !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, rgba(123, 74, 36, 0.75), rgba(79, 45, 20, 0.75)) !important;
    color: #fff0be !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 11px !important;
    font-family: inherit !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-align: center !important;
    cursor: help !important;
}

.ui-tooltip .ui-tooltip-box {
    position: fixed !important;
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    z-index: 32000;
    width: var(--tooltip-width, max-content);
    min-width: min(156px, calc(100vw - 28px));
    max-width: min(320px, calc(100vw - 28px));
    padding: 8px 10px;
    border: 1px solid rgba(255, 232, 170, 0.28);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.9) !important;
    color: #fff7df !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1.38 !important;
    overflow-wrap: anywhere;
    text-align: left;
    text-transform: none !important;
    white-space: normal !important;
    opacity: 0;
    pointer-events: none;
    overflow: visible !important;
    scrollbar-width: none;
    transform: translateY(4px) scale(0.98);
    transform-origin: var(--tooltip-origin-x, 50%) bottom;
    transition: opacity 120ms ease, transform 120ms ease;
}

.ui-tooltip .ui-tooltip-box::-webkit-scrollbar {
    display: none;
}

.ui-tooltip .ui-tooltip-box::after {
    content: "";
    position: absolute;
    left: var(--tooltip-arrow-left, calc(100% - 13px));
    right: auto;
    bottom: -5px;
    width: 9px;
    height: 9px;
    border-right: 1px solid rgba(255, 232, 170, 0.24);
    border-bottom: 1px solid rgba(255, 232, 170, 0.24);
    background: rgba(0, 0, 0, 0.9);
    transform: translateX(-50%) rotate(45deg);
}

.ui-tooltip.is-tooltip-below .ui-tooltip-box::after {
    top: -5px;
    bottom: auto;
    border-top: 1px solid rgba(255, 232, 170, 0.24);
    border-left: 1px solid rgba(255, 232, 170, 0.24);
    border-right: 0;
    border-bottom: 0;
}

.ui-tooltip.is-tooltip-below .ui-tooltip-box {
    transform-origin: var(--tooltip-origin-x, 50%) top;
}

.ui-tooltip:hover .ui-tooltip-box,
.ui-tooltip:focus-within .ui-tooltip-box,
.ui-tooltip.is-open .ui-tooltip-box {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.dashboard-career-hero .dashboard-label-with-tooltip,
.dashboard-mission-hero .dashboard-label-with-tooltip,
.dashboard-career-focus .dashboard-label-with-tooltip,
.dashboard-hub-metric .dashboard-label-with-tooltip,
.dashboard-mission-priority .dashboard-label-with-tooltip,
.activity-command-bar .dashboard-label-with-tooltip,
.beginner-action-summary .dashboard-label-with-tooltip {
    margin: 0 0 4px !important;
}

.activity-command-meta .ui-tooltip {
    margin-left: 4px !important;
}

.dashboard-stage[data-dashboard-page="pesan"] .dashboard-quest-bar {
    display: none;
}

@media (max-width: 760px) {
    .dashboard-stage[data-dashboard-page="beranda"]:not([data-dashboard-subtab="inventaris"]) .dashboard-page-panel:not([hidden]) {
        left: 78px;
        right: 8px;
        top: auto;
        bottom: 86px;
        z-index: 44;
        display: block;
        max-height: min(48dvh, 360px);
        overflow: hidden auto;
        align-items: stretch;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-stage[data-dashboard-page="beranda"]:not([data-dashboard-subtab="inventaris"]) .dashboard-v21-menu-card {
        padding: 10px;
        border-radius: 9px;
        background: rgba(29, 23, 16, 0.94);
    }

    .dashboard-stage[data-dashboard-page="beranda"]:not([data-dashboard-subtab="inventaris"]) .dashboard-panel-card:not(.dashboard-v21-menu-card) {
        padding: 12px;
        border-radius: 9px;
        background: rgba(29, 23, 16, 0.94);
    }

    .dashboard-v21-menu-head {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 8px;
        padding-right: 24px;
    }

    .dashboard-v21-menu-icon {
        width: 42px;
        height: 42px;
    }

    .dashboard-v21-menu-icon .dashboard-button-art {
        --button-art-size: 31px;
    }

    .dashboard-v21-menu-head strong {
        font-size: 15px;
    }

    .dashboard-v21-menu-head p,
    .dashboard-v21-menu-steps span {
        font-size: 10.5px;
    }
}

.dashboard-stage[data-dashboard-subtab="inventaris"] .dashboard-side-nav,
.dashboard-stage[data-dashboard-subtab="inventaris"] .dashboard-build-btn,
.dashboard-stage[data-dashboard-subtab="inventaris"] .dashboard-map-label,
.dashboard-stage[data-dashboard-subtab="inventaris"] .dashboard-quest-bar {
    display: none;
}

.dashboard-stage:is(
    [data-dashboard-subtab="karier"],
    [data-dashboard-subtab="partai"],
    [data-dashboard-subtab="aset"],
    [data-dashboard-subtab="lelang"],
    [data-dashboard-subtab="pemilu"],
    [data-dashboard-subtab="pvp"],
    [data-dashboard-subtab="misi"],
    [data-dashboard-subtab="bangun"]
) .dashboard-side-nav,
.dashboard-stage:is(
    [data-dashboard-subtab="karier"],
    [data-dashboard-subtab="partai"],
    [data-dashboard-subtab="aset"],
    [data-dashboard-subtab="lelang"],
    [data-dashboard-subtab="pemilu"],
    [data-dashboard-subtab="pvp"],
    [data-dashboard-subtab="misi"],
    [data-dashboard-subtab="bangun"]
) .dashboard-build-btn,
.dashboard-stage:is(
    [data-dashboard-subtab="karier"],
    [data-dashboard-subtab="partai"],
    [data-dashboard-subtab="aset"],
    [data-dashboard-subtab="lelang"],
    [data-dashboard-subtab="pemilu"],
    [data-dashboard-subtab="pvp"],
    [data-dashboard-subtab="misi"],
    [data-dashboard-subtab="bangun"]
) .dashboard-map-label,
.dashboard-stage:is(
    [data-dashboard-subtab="karier"],
    [data-dashboard-subtab="partai"],
    [data-dashboard-subtab="aset"],
    [data-dashboard-subtab="lelang"],
    [data-dashboard-subtab="pemilu"],
    [data-dashboard-subtab="pvp"],
    [data-dashboard-subtab="misi"],
    [data-dashboard-subtab="bangun"]
) .dashboard-quest-bar {
    display: none;
}

.dashboard-stage[data-dashboard-subtab="inventaris"] .dashboard-page-panel {
    left: 8px;
    right: 8px;
    top: 128px;
    bottom: 74px;
    z-index: 46;
    align-items: stretch;
}

.dashboard-stage:is(
    [data-dashboard-subtab="aksi"],
    [data-dashboard-subtab="karier"],
    [data-dashboard-subtab="partai"],
    [data-dashboard-subtab="aset"],
    [data-dashboard-subtab="lelang"],
    [data-dashboard-subtab="pemilu"],
    [data-dashboard-subtab="pvp"],
    [data-dashboard-subtab="misi"],
    [data-dashboard-subtab="bangun"]
) .dashboard-page-panel {
    left: 8px;
    right: 8px;
    top: 128px;
    bottom: 74px;
    z-index: 46;
    display: grid;
    max-height: none;
    overflow: visible;
    align-items: stretch;
}

@media (max-width: 760px) {
    .dashboard-stage[data-dashboard-page="beranda"]:is(
        [data-dashboard-subtab="aksi"],
        [data-dashboard-subtab="karier"],
        [data-dashboard-subtab="partai"],
        [data-dashboard-subtab="aset"],
        [data-dashboard-subtab="lelang"],
        [data-dashboard-subtab="pemilu"],
        [data-dashboard-subtab="pvp"],
        [data-dashboard-subtab="misi"],
        [data-dashboard-subtab="bangun"]
    ) .dashboard-page-panel:not([hidden]) {
        left: 8px;
        right: 8px;
        top: 128px;
        bottom: 74px;
        z-index: 46;
        display: grid;
        max-height: none;
        overflow: visible;
        align-items: stretch;
    }
}

.dashboard-message-shell {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border: 2px solid rgba(211, 163, 91, 0.92);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(248, 230, 185, 0.96), rgba(211, 177, 126, 0.96)),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.36), transparent 42%);
    box-shadow:
        inset 0 0 0 2px rgba(255, 247, 218, 0.58),
        0 16px 36px rgba(0, 0, 0, 0.45);
}

.dashboard-message-tabs {
    display: grid;
    align-content: start;
    min-height: 0;
    padding-top: 5px;
    border-right: 1px solid rgba(122, 76, 30, 0.28);
    background: linear-gradient(180deg, rgba(122, 82, 52, 0.84), rgba(199, 168, 121, 0.72));
}

.dashboard-message-tabs button {
    position: relative;
    display: grid;
    place-items: center;
    gap: 3px;
    min-height: 58px;
    padding: 6px 5px 7px;
    border: 0;
    border-bottom: 1px solid rgba(255, 236, 188, 0.18);
    background: transparent;
    color: rgba(255, 246, 218, 0.86);
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.05;
    text-align: center;
    text-shadow: 0 1px 2px rgba(51, 28, 7, 0.38);
}

.dashboard-message-tabs button.is-direct-tab {
    padding-top: 8px;
    padding-inline: 8px;
}

.dashboard-message-tabs button span:not(.dashboard-message-channel-icon) {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-message-tabs button.active {
    margin-right: -8px;
    border-radius: 0 10px 10px 0;
    background: linear-gradient(180deg, #ffe991, #e7ad3f);
    color: #744716;
    box-shadow: 0 3px 9px rgba(87, 46, 11, 0.28);
}

.dashboard-message-tabs button i {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border: 1px solid #ffe1bb;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #ff8275 0 18%, #f23d34 52%, #a80d16 100%);
    color: #fff7df;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(69, 0, 0, 0.6);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.55),
        inset 0 -2px 2px rgba(94, 0, 0, 0.36),
        0 2px 4px rgba(20, 6, 0, 0.42),
        0 0 0 1px rgba(82, 0, 0, 0.24);
}

.dashboard-message-tabs button i::before {
    content: "!";
}

.dashboard-message-tabs button.is-direct-tab i {
    right: auto;
    left: 4px;
}

.dashboard-message-tab-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid !important;
    place-items: center;
    width: 16px;
    height: 16px;
    margin: 0 !important;
    border: 1px solid rgba(88, 45, 12, 0.28);
    border-radius: 50%;
    background: rgba(255, 252, 238, 0.9);
    color: #8b3c20;
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
    text-shadow: none;
    box-shadow: 0 1px 3px rgba(57, 24, 5, 0.18);
}

.dashboard-message-tab-delete:hover,
.dashboard-message-tab-delete:focus-visible {
    background: #f05c45;
    color: #fff8e4;
    outline: none;
}

.dashboard-message-board {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    padding: 8px;
    background:
        linear-gradient(180deg, rgba(255, 251, 237, 0.96), rgba(246, 237, 214, 0.94)),
        repeating-linear-gradient(45deg, rgba(141, 92, 37, 0.03), rgba(141, 92, 37, 0.03) 2px, transparent 2px, transparent 8px);
}

.dashboard-message-header {
    display: grid;
    gap: 2px;
    margin-bottom: 6px;
    padding: 4px 6px 7px;
    border-bottom: 1px solid rgba(141, 93, 37, 0.18);
}

.dashboard-message-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.dashboard-message-header-title {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.dashboard-message-header strong {
    min-width: 0;
    overflow: hidden;
    color: #684015;
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-message-new-btn {
    display: grid;
    flex: 0 0 30px;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #c88425;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffe487, #f0ab32);
    color: #744716;
    font: inherit;
    font-size: 22px;
    font-weight: 950;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 250, 220, 0.68), 0 2px 5px rgba(20, 10, 2, 0.2);
    cursor: pointer;
}

.dashboard-message-new-btn:hover,
.dashboard-message-new-btn:focus-visible {
    outline: none;
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.dashboard-message-list {
    min-height: 0;
    overflow-y: auto;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(174, 124, 51, 0.72) transparent;
}

.dashboard-message-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 7px;
    align-items: start;
    margin-bottom: 10px;
    padding-right: 14px;
    color: #5f4220;
}

.dashboard-message-item.is-own {
    grid-template-columns: minmax(0, 1fr) 46px;
    padding-right: 0;
    padding-left: 14px;
}

.dashboard-message-item.is-own .dashboard-message-content {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    background: rgba(236, 247, 232, 0.95);
    border-color: rgba(90, 139, 75, 0.44);
    text-align: right;
}

.dashboard-message-item.is-own .dashboard-message-content::before {
    left: auto;
    right: -7px;
    border-left: 0;
    border-bottom: 0;
    border-right: 1px solid rgba(90, 139, 75, 0.44);
    border-top: 1px solid rgba(90, 139, 75, 0.44);
    background: rgba(236, 247, 232, 0.95);
}

.dashboard-message-item.is-own .dashboard-message-avatar {
    grid-column: 2;
    grid-row: 1;
}

.dashboard-message-item.is-own .dashboard-message-name {
    justify-content: flex-end;
}

.dashboard-message-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    border: 2px solid #dcae5c;
    border-radius: 11px;
    overflow: hidden;
    background: linear-gradient(180deg, #f1d592, #7a4c1b);
    box-shadow: inset 0 0 0 1px rgba(255, 247, 213, 0.64), 0 2px 5px rgba(70, 39, 13, 0.24);
}

.dashboard-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-message-avatar.is-system img {
    padding: 6px;
    background: rgba(255, 255, 248, 0.9);
    object-fit: contain;
    box-sizing: border-box;
}

.dashboard-message-content {
    position: relative;
    justify-self: start;
    width: fit-content;
    max-width: min(360px, calc(100% - 4px));
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid rgba(193, 126, 67, 0.46);
    border-radius: 8px;
    background: rgba(255, 250, 237, 0.94);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
    cursor: pointer;
}

.dashboard-message-content:focus-visible {
    outline: 2px solid rgba(198, 132, 37, 0.55);
    outline-offset: 2px;
}

.dashboard-message-content::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 13px;
    width: 10px;
    height: 10px;
    border-left: 1px solid rgba(193, 126, 67, 0.46);
    border-bottom: 1px solid rgba(193, 126, 67, 0.46);
    background: rgba(255, 250, 237, 0.94);
    transform: rotate(45deg);
}

.dashboard-message-name {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
    margin-bottom: 6px;
}

.dashboard-message-name strong,
.dashboard-message-name-btn {
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: transparent;
    color: #72502a;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-message-name-btn {
    cursor: pointer;
    text-align: left;
}

.dashboard-message-name-btn:hover,
.dashboard-message-name-btn:focus-visible {
    color: #a8671e;
    text-decoration: underline;
    outline: none;
}

.dashboard-message-name em {
    flex: 0 0 auto;
    color: #b07a2b;
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
}

.dashboard-message-content p {
    margin: 0;
    color: #6a5030;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.dashboard-message-time {
    display: block;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    color: #8c6b3d;
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1.2;
    opacity: 0;
    transition: max-height 150ms ease, margin-top 150ms ease, opacity 150ms ease;
}

.dashboard-message-item.is-time-visible .dashboard-message-time {
    max-height: 18px;
    margin-top: 5px;
    opacity: 1;
}

.dashboard-message-item.has-emoticon.is-time-visible .dashboard-message-time {
    max-height: 22px;
    margin-top: 10px;
}

.dashboard-message-item.is-own .dashboard-message-time {
    text-align: right;
}

.dashboard-message-channel-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.dashboard-message-channel-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dashboard-message-channel-icon.is-direct-avatar {
    border: 1px solid rgba(255, 236, 188, 0.58);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 236, 175, 0.82), rgba(131, 79, 25, 0.72));
    box-shadow: inset 0 0 0 1px rgba(255, 247, 213, 0.46), 0 2px 5px rgba(43, 21, 6, 0.24);
}

.dashboard-message-channel-icon.is-direct-avatar img {
    object-fit: cover;
}

.dashboard-message-channel-icon.tab-icon {
    width: 34px;
    height: 34px;
    background: transparent;
    box-shadow: none;
}

.dashboard-message-tabs button.active .dashboard-message-channel-icon.tab-icon {
    background: transparent;
    box-shadow: none;
}

.dashboard-message-channel-icon.header-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
}

.dashboard-message-channel-icon.item-icon {
    width: 100%;
    height: 100%;
    background: transparent;
}

.dashboard-message-channel-icon.is-world img {
    width: 100%;
    height: 100%;
}

.dashboard-message-channel-icon.is-region img,
.dashboard-message-channel-icon.is-party img {
    width: 100%;
    height: 100%;
}

.dashboard-message-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px 40px;
    gap: 8px;
    align-items: center;
    padding-top: 7px;
    border-top: 1px solid rgba(141, 93, 37, 0.2);
}

.dashboard-message-composer.is-direct {
    grid-template-columns: minmax(0, 1fr) 36px 40px;
}

.dashboard-message-composer input {
    min-width: 0;
    height: 32px;
    padding: 0 9px;
    border: 1px solid rgba(129, 83, 35, 0.28);
    border-radius: 5px;
    background: rgba(255, 255, 248, 0.92);
    color: #5f4220;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    outline: none;
}

.dashboard-message-composer input:focus {
    border-color: rgba(198, 136, 42, 0.78);
    box-shadow: 0 0 0 2px rgba(255, 208, 91, 0.22);
}

.dashboard-message-composer.readonly {
    opacity: 0.72;
}

.dashboard-message-composer input:disabled,
.dashboard-message-composer button:disabled {
    cursor: not-allowed;
    filter: grayscale(0.35);
}

.dashboard-message-composer button {
    display: grid;
    place-items: center;
    height: 32px;
    border: 1px solid #c88425;
    border-radius: 5px;
    background: linear-gradient(180deg, #ffe487, #f0ab32);
    color: #744716;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255, 250, 220, 0.78), 0 2px 5px rgba(90, 49, 13, 0.24);
}

.dashboard-message-composer button img {
    display: block;
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.dashboard-message-emot-btn {
    background: linear-gradient(180deg, rgba(255, 247, 223, 0.98), rgba(255, 211, 104, 0.96)) !important;
}

.dashboard-message-emot-picker {
    grid-column: 1 / -1;
    display: none;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 7px;
    max-height: 126px;
    overflow: auto;
    padding: 8px;
    border: 1px solid rgba(141, 93, 37, 0.22);
    border-radius: 7px;
    background: rgba(255, 255, 248, 0.72);
}

.dashboard-message-emot-picker.show {
    display: grid;
}

.dashboard-message-emot-picker.disabled {
    display: none !important;
}

.dashboard-message-emot-option {
    width: 100%;
    height: 38px !important;
    min-width: 0;
    padding: 0;
    border-color: rgba(198, 136, 42, 0.36) !important;
    background: rgba(255, 255, 248, 0.78) !important;
    box-shadow: none !important;
}

.dashboard-message-emot-option img {
    width: 34px !important;
    height: 34px !important;
}

.dashboard-message-emot-inline {
    display: inline-block;
    width: 56px;
    height: 56px;
    margin: 2px 7px 4px;
    object-fit: contain;
    vertical-align: middle;
}

.dashboard-message-item.has-emoticon .dashboard-message-content p {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.dashboard-message-error {
    grid-column: 1 / -1;
    display: none;
    min-height: 20px;
    padding: 5px 7px;
    border: 1px solid rgba(191, 35, 35, 0.42);
    border-radius: 5px;
    background: rgba(255, 226, 226, 0.94);
    color: #a01818;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
}

.dashboard-message-error.show {
    display: block;
}

.dashboard-message-empty {
    display: grid;
    place-items: center;
    min-height: 120px;
    color: #8c6b3d;
    font-size: 12px;
    font-weight: 850;
    text-align: center;
}

.dashboard-message-empty.compact {
    min-height: 44px;
    padding: 8px;
}

.dashboard-friends-panel {
    display: grid;
    gap: 9px;
    align-content: start;
    max-height: 100%;
    overflow: auto;
    border-color: rgba(193, 126, 67, 0.42);
    background:
        linear-gradient(180deg, rgba(255, 250, 237, 0.96), rgba(232, 213, 177, 0.94));
    color: #6a5030;
}

.dashboard-friends-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 8px;
    padding: 9px;
    border: 1px solid rgba(193, 126, 67, 0.26);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 239, 195, 0.88), rgba(214, 166, 83, 0.32)),
        rgba(255, 255, 248, 0.58);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.dashboard-friends-head strong,
.dashboard-friends-panel > strong {
    color: #72502a;
}

.dashboard-friends-head span,
.dashboard-friends-panel > span {
    display: block;
    margin-top: 2px;
    color: #8c6b3d;
    font-size: 10px;
    font-weight: 850;
}

.dashboard-friend-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 6px;
}

.dashboard-friend-search input {
    min-width: 0;
    height: 32px;
    padding: 0 9px;
    border: 1px solid rgba(129, 83, 35, 0.28);
    border-radius: 5px;
    background: rgba(255, 255, 248, 0.92);
    color: #5f4220;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
}

.dashboard-friend-search button {
    min-height: 32px;
    border: 1px solid #c88425;
    border-radius: 5px;
    background: linear-gradient(180deg, #ffe487, #f0ab32);
    color: #744716;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
}

.dashboard-friend-list {
    display: grid;
    gap: 6px;
}

.dashboard-friend-list h4 {
    margin: 4px 0 0;
    color: #72502a;
    font-size: 11px;
    font-weight: 900;
}

.dashboard-friend-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    border: 1px solid rgba(193, 126, 67, 0.34);
    border-radius: 7px;
    background: rgba(255, 255, 248, 0.72);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.dashboard-friend-row:hover {
    border-color: rgba(193, 126, 67, 0.58);
    background: rgba(255, 255, 248, 0.88);
}

.dashboard-friend-avatar,
.dashboard-message-friend-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border: 2px solid rgba(216, 169, 87, 0.86);
    border-radius: 10px;
    background: linear-gradient(180deg, #f2d58a, #7b4a19);
    box-shadow: inset 0 0 0 1px rgba(255, 247, 213, 0.54), 0 2px 5px rgba(70, 39, 13, 0.2);
}

.dashboard-friend-avatar img,
.dashboard-message-friend-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-friend-row.blocked {
    background: rgba(255, 232, 226, 0.72);
    border-color: rgba(178, 72, 48, 0.34);
}

.dashboard-friend-row strong,
.dashboard-friend-row span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-friend-row strong {
    color: #72502a;
    font-size: 11px;
    font-weight: 900;
}

.dashboard-friend-row span {
    color: #8c6b3d;
    font-size: 9px;
    font-weight: 750;
}

.dashboard-friend-presence {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    margin-top: 3px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(139, 112, 72, 0.14);
    color: #8c6b3d;
    font-size: 8px !important;
    font-weight: 900 !important;
    line-height: 1.1;
    text-transform: uppercase;
}

.dashboard-friend-presence i,
.dashboard-message-friend-option em i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9c7f58;
    box-shadow: 0 0 0 2px rgba(156, 127, 88, 0.18);
}

.dashboard-friend-presence.online,
.dashboard-message-friend-option em.online {
    color: #27713a;
}

.dashboard-friend-presence.online i,
.dashboard-message-friend-option em.online i {
    background: #2ecc71;
    box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.18), 0 0 8px rgba(46, 204, 113, 0.48);
}

.dashboard-friend-row button,
.leaderboard-message-btn {
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid #c88425;
    border-radius: 5px;
    background: linear-gradient(180deg, #ffe487, #f0ab32);
    color: #744716;
    font: inherit;
    font-size: 10px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255, 250, 220, 0.68), 0 2px 5px rgba(20, 10, 2, 0.2);
}

.dashboard-friend-row button.secondary,
.leaderboard-message-btn.secondary {
    border-color: rgba(129, 83, 35, 0.28);
    background: rgba(255, 255, 248, 0.82);
    color: #744716;
}

.dashboard-friend-row button:disabled {
    cursor: not-allowed;
    border-color: rgba(149, 111, 65, 0.45);
    background: linear-gradient(180deg, #c7b99e, #8a7356);
    color: #fff2d1;
}

.leaderboard-message-btn.locked {
    border-color: rgba(149, 111, 65, 0.6);
    background: linear-gradient(180deg, #9b8568, #5f4a31);
    color: #f2dfb5;
}

.dashboard-message-friend-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 15000;
    display: grid;
    place-items: center;
    padding: 14px;
    background: rgba(21, 12, 4, 0.58);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.dashboard-message-friend-picker-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.dashboard-message-friend-picker-card {
    position: relative;
    display: grid;
    gap: 10px;
    width: min(330px, calc(100vw - 28px));
    max-height: min(520px, calc(100dvh - 28px));
    padding: 14px;
    overflow: hidden;
    border: 2px solid rgba(211, 163, 91, 0.92);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 250, 237, 0.98), rgba(232, 213, 177, 0.96)),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.42), transparent 42%);
    box-shadow:
        inset 0 0 0 2px rgba(255, 247, 218, 0.58),
        0 18px 42px rgba(0, 0, 0, 0.45);
}

.dashboard-message-friend-picker-card header {
    display: grid;
    gap: 3px;
    padding-right: 34px;
}

.dashboard-message-friend-picker-card header strong {
    color: #684015;
    font-size: 15px;
    font-weight: 950;
}

.dashboard-message-friend-picker-card header span {
    color: #8c6b3d;
    font-size: 10px;
    font-weight: 800;
}

.dashboard-message-friend-picker-close {
    position: absolute;
    top: 9px;
    right: 9px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(129, 83, 35, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 248, 0.86);
    color: #744716;
    font-size: 18px;
    font-weight: 950;
    line-height: 1;
}

.dashboard-message-friend-picker-list {
    display: grid;
    gap: 7px;
    min-height: 80px;
    overflow: auto;
    padding-right: 2px;
    scrollbar-width: thin;
}

.dashboard-message-friend-option {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px;
    border: 1px solid rgba(193, 126, 67, 0.34);
    border-radius: 7px;
    background: rgba(255, 255, 248, 0.72);
    color: #72502a;
    font: inherit;
    text-align: left;
}

.dashboard-message-friend-option strong,
.dashboard-message-friend-option small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-message-friend-option strong {
    font-size: 11px;
    font-weight: 900;
}

.dashboard-message-friend-option small {
    margin-top: 2px;
    color: #8c6b3d;
    font-size: 9px;
    font-weight: 750;
}

.dashboard-message-friend-option em {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #8c6b3d;
    font-size: 8px;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.dashboard-player-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: rgba(22, 13, 5, 0.22);
}

.dashboard-player-menu {
    position: fixed;
    display: grid;
    gap: 5px;
    width: min(220px, calc(100vw - 28px));
    padding: 8px;
    border: 1px solid rgba(193, 126, 67, 0.48);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(255, 250, 237, 0.98), rgba(232, 213, 177, 0.98));
    box-shadow: 0 18px 42px rgba(42, 23, 7, 0.36), inset 0 0 0 1px rgba(255, 255, 255, 0.44);
    color: #6a5030;
}

.dashboard-player-menu-head {
    min-width: 0;
    padding: 4px 5px 7px;
    border-bottom: 1px solid rgba(141, 93, 37, 0.2);
}

.dashboard-player-menu-head strong,
.dashboard-player-menu-head span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-player-menu-head strong {
    color: #72502a;
    font-size: 12px;
    font-weight: 950;
}

.dashboard-player-menu-head span {
    color: #8c6b3d;
    font-size: 10px;
    font-weight: 850;
}

.dashboard-player-menu-actions {
    display: grid;
    gap: 5px;
}

.dashboard-player-menu button {
    min-height: 31px;
    border: 1px solid rgba(129, 83, 35, 0.28);
    border-radius: 6px;
    background: rgba(255, 255, 248, 0.82);
    color: #744716;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    text-align: left;
    padding: 0 9px;
}

.dashboard-player-menu button:hover,
.dashboard-player-menu button:focus-visible {
    border-color: #c88425;
    background: linear-gradient(180deg, #ffe487, #f0ab32);
    outline: none;
}

.dashboard-player-menu button.danger {
    border-color: rgba(178, 72, 48, 0.42);
    color: #9c2f23;
}

.public-leader-profile-actions .public-leader-cancel-btn.secondary {
    border-color: rgba(129, 83, 35, 0.28);
    background: rgba(255, 255, 248, 0.82);
    color: #744716;
}

.public-leader-profile-actions .public-leader-cancel-btn.danger {
    border-color: rgba(178, 72, 48, 0.42);
    background: rgba(255, 232, 226, 0.86);
    color: #9c2f23;
}

.dashboard-inventory-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    padding: 8px;
    border: 2px solid rgba(211, 163, 91, 0.92);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(50, 35, 21, 0.9), rgba(21, 25, 17, 0.92)),
        radial-gradient(circle at 50% 0%, rgba(255, 225, 126, 0.18), transparent 42%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 230, 150, 0.32),
        0 16px 36px rgba(0, 0, 0, 0.45);
}

.dashboard-inventory-topbar {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    min-height: 48px;
    margin-top: 0;
    padding: 4px 6px;
    border-radius: 7px;
    background:
        url("../img/inventori/bar-tabs.webp") center / 100% 100% no-repeat,
        linear-gradient(180deg, rgba(75, 48, 24, 0.92), rgba(37, 26, 16, 0.98));
    box-shadow:
        inset 0 0 0 1px rgba(255, 230, 150, 0.26),
        0 5px 10px rgba(0, 0, 0, 0.24);
}

.dashboard-inventory-back {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.42));
}

.dashboard-inventory-back img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dashboard-inventory-back:focus-visible,
.dashboard-inventory-back:hover {
    outline: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.48)) brightness(1.08);
}

.dashboard-inventory-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    min-width: 0;
    transform: none;
}

.dashboard-inventory-tabs button {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    height: 39px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #ffe7a2;
    font: inherit;
    filter: saturate(0.92) brightness(0.86);
}

.dashboard-inventory-tabs button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.32));
}

.dashboard-inventory-tabs button.active,
.dashboard-inventory-tabs button:focus-visible,
.dashboard-inventory-tabs button:hover {
    color: #fff1b5;
    outline: none;
    filter: saturate(1.08) brightness(1.12);
    transform: translateY(-1px);
}

.dashboard-inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
    max-height: 100%;
    padding: 62px 5px 0 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(221, 173, 91, 0.86) rgba(35, 24, 14, 0.42);
}

.dashboard-inventory-grid::-webkit-scrollbar {
    width: 7px;
}

.dashboard-inventory-grid::-webkit-scrollbar-track {
    border: 1px solid rgba(255, 216, 112, 0.16);
    border-radius: 999px;
    background: rgba(35, 24, 14, 0.42);
}

.dashboard-inventory-grid::-webkit-scrollbar-thumb {
    border: 1px solid rgba(255, 238, 178, 0.42);
    border-radius: 999px;
    background: linear-gradient(180deg, #f3c86c, #8c5b24);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.32);
}

.dashboard-inventory-loading {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    min-height: 150px;
    color: #ffe6a1;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.dashboard-inventory-item {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: grid;
    grid-template-rows: 48px minmax(34px, auto);
    align-items: center;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    min-height: 102px;
    padding: 8px 4px 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.dashboard-inventory-empty-category {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    position: relative;
}

.dashboard-inventory-empty-category > strong {
    grid-column: 1 / -1;
    display: block;
    padding: 7px;
    border: 1px solid rgba(255, 216, 112, 0.28);
    border-radius: 7px;
    background: rgba(255, 246, 211, 0.1);
    color: #ffe6a1;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.dashboard-inventory-item.is-empty,
.dashboard-inventory-item.empty-slot {
    opacity: 0.58;
    filter: grayscale(0.16);
}

.dashboard-inventory-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
}

.dashboard-inventory-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.42));
}

.dashboard-inventory-icon b {
    position: absolute;
    right: -3px;
    bottom: -2px;
    min-width: 20px;
    padding: 2px 4px;
    border: 1px solid rgba(255, 232, 170, 0.86);
    border-radius: 999px;
    background: rgba(29, 19, 11, 0.84);
    color: #fff2bc;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

.dashboard-inventory-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    width: 100%;
    text-align: center;
}

.dashboard-inventory-copy strong,
.dashboard-inventory-copy span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-inventory-copy strong {
    color: #ffe6a1;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.08;
    white-space: nowrap;
}

.dashboard-inventory-copy span {
    color: #fff7d8;
    font-size: 8px;
    font-weight: 760;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.dashboard-inventory-item.empty-slot {
    cursor: default;
}

.dashboard-inventory-item:not(.empty-slot):hover .dashboard-inventory-icon img {
    transform: translateY(-1px);
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.5));
}

.dashboard-inventory-item.is-equipped {
    border-color: rgba(255, 226, 143, 0.95);
    box-shadow: inset 0 0 0 1px rgba(255, 226, 143, 0.45), 0 0 18px rgba(197,160,89,0.2);
}

.char-portrait.has-inventory-frame {
    box-shadow: 0 0 0 3px rgba(255, 226, 143, 0.72), 0 16px 38px rgba(0,0,0,0.3);
}

.dashboard-inventory-detail-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--game-frame-modal-padding);
    background: rgba(12, 7, 4, 0.72);
    backdrop-filter: blur(3px);
    z-index: 1500;
    overflow: hidden;
}

.ui-modal-overlay.dashboard-inventory-detail-modal {
    z-index: 24500;
}

.dashboard-inventory-detail-card {
    position: relative;
    width: min(420px, var(--game-frame-modal-width));
    max-width: var(--game-frame-modal-width);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(197,160,89,0.45);
    background:
        linear-gradient(180deg, rgba(57, 37, 20, 0.98), rgba(25, 18, 12, 0.98)),
        var(--brown-dark);
    box-shadow: 0 22px 70px rgba(0,0,0,0.42);
    color: #fff7d8;
}

.dashboard-inventory-detail-close {
    position: absolute;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 226, 143, 0.25);
    border-radius: 999px;
    background: rgba(12, 7, 4, 0.55);
    color: #fff7d8;
    font-size: 20px;
    line-height: 1;
    top: 10px;
    right: 12px;
}

.dashboard-inventory-detail-head {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}

.dashboard-inventory-detail-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    border: 1px solid rgba(255, 226, 143, 0.38);
    border-radius: 10px;
    background: rgba(255, 246, 211, 0.08);
}

.dashboard-inventory-detail-icon img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45));
}

.dashboard-inventory-detail-icon b {
    position: absolute;
    right: -5px;
    bottom: -5px;
    min-width: 26px;
    padding: 3px 6px;
    border: 1px solid rgba(255, 232, 170, 0.9);
    border-radius: 999px;
    background: rgba(17, 10, 5, 0.92);
    color: #ffe7a1;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.dashboard-inventory-detail-title {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.dashboard-inventory-detail-title span {
    color: var(--gold-light);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-inventory-detail-title strong {
    color: #fff0b8;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
}

.dashboard-inventory-detail-title em {
    color: rgba(255,247,216,0.62);
    font-size: 11px;
    font-style: normal;
    word-break: break-word;
}

.dashboard-inventory-detail-body {
    display: grid;
    gap: 14px;
}

.dashboard-inventory-detail-body p {
    margin: 0;
    color: #fff7d8;
    font-size: 13px;
    line-height: 1.55;
}

.dashboard-inventory-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-inventory-detail-stats span {
    display: grid;
    gap: 4px;
    padding: 9px 8px;
    border: 1px solid rgba(197,160,89,0.28);
    border-radius: 8px;
    background: rgba(255,246,211,0.08);
    color: #fff7d8;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.dashboard-inventory-detail-stats b {
    color: var(--gold-light);
    font-size: 9px;
    text-transform: uppercase;
}

.inventory-qty-panel {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(197,160,89,0.28);
    border-radius: 8px;
    background: rgba(255,246,211,0.08);
}

.inventory-qty-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.inventory-qty-heading span {
    color: var(--gold-light);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.inventory-qty-heading strong {
    color: #fff0b8;
    font-size: 13px;
    font-weight: 950;
}

.inventory-qty-heading b {
    color: #ffe487;
}

.dashboard-inventory-detail-card .inventory-qty-selector {
    display: grid;
    grid-template-columns: 34px 56px 34px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    margin: 0;
}

.dashboard-inventory-detail-card .inventory-qty-btn,
.dashboard-inventory-detail-card .inventory-qty-shortcuts button {
    min-width: 0;
    border: 1px solid rgba(255, 226, 143, 0.28);
    border-radius: 7px;
    background: rgba(255, 246, 211, 0.1);
    color: #fff7d8;
    font-weight: 900;
}

.dashboard-inventory-detail-card .inventory-qty-btn {
    width: 34px;
    height: 34px;
    font-size: 18px;
}

.dashboard-inventory-detail-card .inventory-qty-input {
    width: 56px;
    height: 34px;
    border-color: rgba(255, 226, 143, 0.34);
    background: rgba(12, 7, 4, 0.24);
    color: #fff7d8;
}

.dashboard-inventory-detail-card .inventory-qty-label {
    min-width: 0;
    color: rgba(255,247,216,0.68);
    font-size: 11px;
    font-weight: 800;
    text-align: right;
}

.inventory-qty-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.dashboard-inventory-detail-card .inventory-qty-shortcuts button {
    min-height: 28px;
    font-size: 11px;
}

.dashboard-inventory-detail-card .inventory-qty-btn:disabled,
.dashboard-inventory-detail-card .inventory-qty-shortcuts button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    filter: grayscale(0.35);
}

.dashboard-inventory-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.dashboard-inventory-detail-actions button {
    min-width: 86px;
    min-height: 36px;
    border: 1px solid #c88425;
    border-radius: 7px;
    background: linear-gradient(180deg, #ffe487, #f0ab32);
    color: #744716;
    font-weight: 900;
}

.dashboard-inventory-detail-actions button.secondary {
    border-color: rgba(255, 226, 143, 0.28);
    background: rgba(255, 246, 211, 0.1);
    color: #fff7d8;
}

.dashboard-inventory-detail-actions button:disabled {
    cursor: not-allowed;
    filter: grayscale(0.55);
    opacity: 0.62;
}

.dashboard-inventory-panel {
    background:
        linear-gradient(180deg, rgba(248, 230, 185, 0.97), rgba(216, 182, 132, 0.96)),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.36), transparent 44%);
    color: #684015;
    box-shadow:
        inset 0 0 0 2px rgba(255, 247, 218, 0.58),
        0 16px 36px rgba(0, 0, 0, 0.42);
}

.dashboard-inventory-grid {
    scrollbar-color: rgba(174, 124, 51, 0.72) rgba(255, 250, 237, 0.42);
}

.dashboard-inventory-grid::-webkit-scrollbar-track {
    border-color: rgba(141, 93, 37, 0.16);
    background: rgba(255, 250, 237, 0.42);
}

.dashboard-inventory-loading,
.dashboard-inventory-empty-category > strong {
    border-color: rgba(193, 126, 67, 0.34);
    background: rgba(255, 250, 237, 0.76);
    color: #684015;
}

.dashboard-inventory-copy strong {
    color: #684015;
}

.dashboard-inventory-copy span {
    color: #8c6b3d;
}

.dashboard-inventory-icon b {
    border-color: rgba(255, 232, 170, 0.92);
    background: rgba(116, 71, 22, 0.9);
    color: #fff2bc;
}

.dashboard-inventory-item.is-equipped {
    border: 1px solid rgba(216, 155, 53, 0.58);
    background: rgba(255, 239, 178, 0.34);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36), 0 0 18px rgba(197, 160, 89, 0.18);
}

.dashboard-inventory-detail-card {
    border-color: rgba(211, 163, 91, 0.92);
    background:
        linear-gradient(180deg, rgba(248, 230, 185, 0.98), rgba(216, 182, 132, 0.98)),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.36), transparent 44%);
    color: #684015;
    box-shadow:
        inset 0 0 0 2px rgba(255, 247, 218, 0.58),
        0 22px 70px rgba(0, 0, 0, 0.38);
}

.dashboard-inventory-detail-close,
.dashboard-inventory-detail-actions button.secondary {
    border-color: rgba(129, 83, 35, 0.28);
    background: rgba(255, 255, 248, 0.72);
    color: #744716;
}

.dashboard-inventory-detail-icon,
.dashboard-inventory-detail-stats span,
.inventory-qty-panel {
    border-color: rgba(193, 126, 67, 0.34);
    background: rgba(255, 250, 237, 0.76);
    color: #684015;
}

.dashboard-inventory-detail-title span,
.dashboard-inventory-detail-stats b,
.inventory-qty-heading span {
    color: #b07a2b;
}

.dashboard-inventory-detail-title strong,
.dashboard-inventory-detail-body p,
.inventory-qty-heading strong {
    color: #684015;
}

.dashboard-inventory-detail-title em,
.dashboard-inventory-detail-card .inventory-qty-label {
    color: #8c6b3d;
}

.dashboard-inventory-detail-card .inventory-qty-btn,
.dashboard-inventory-detail-card .inventory-qty-shortcuts button {
    border-color: rgba(129, 83, 35, 0.28);
    background: rgba(255, 255, 248, 0.72);
    color: #744716;
}

.dashboard-inventory-detail-card .inventory-qty-input {
    border-color: rgba(129, 83, 35, 0.28);
    background: rgba(255, 255, 248, 0.88);
    color: #5f4220;
}

.dashboard-stage:not([data-dashboard-page="beranda"]) .dashboard-side-nav,
.dashboard-stage:not([data-dashboard-page="beranda"]) .dashboard-build-btn,
.dashboard-stage:not([data-dashboard-page="beranda"]) .dashboard-map-label {
    display: none;
}

.dashboard-stage:not([data-dashboard-page="beranda"]) .dashboard-page-panel {
    left: 14px;
    right: 14px;
    top: 128px;
}

.dashboard-stage[data-dashboard-page="pesan"] .dashboard-page-panel {
    left: 8px;
    right: 8px;
    top: 158px;
    bottom: 74px;
    align-items: stretch;
}

.dashboard-build-btn {
    position: absolute;
    right: 14px;
    bottom: 138px;
    z-index: 42;
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    align-items: center;
    width: 66px;
    height: 66px;
    padding: 4px;
    border: 2px solid #e5b45d;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(96, 58, 21, 0.94), rgba(40, 23, 10, 0.98));
    color: #ffe49b;
    box-shadow: var(--dash-shadow);
    touch-action: manipulation;
    transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease;
}

.dashboard-build-btn .dashboard-button-art {
    --button-art-size: 38px;
    align-self: end;
}

.dashboard-build-btn:hover,
.dashboard-build-btn:focus-visible,
.dashboard-build-btn.active {
    border-color: #ffe093;
    filter: brightness(1.08) saturate(1.08);
    outline: none;
}

.dashboard-build-btn:hover .dashboard-button-art,
.dashboard-build-btn:focus-visible .dashboard-button-art,
.dashboard-build-btn.active .dashboard-button-art {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)) brightness(1.08);
}

.dashboard-build-btn:hover .dashboard-button-art img,
.dashboard-build-btn:focus-visible .dashboard-button-art img,
.dashboard-build-btn.active .dashboard-button-art img {
    transform: translateX(var(--sprite-hover-x, -56%));
}

.dashboard-build-btn:active {
    transform: translateY(1px) scale(0.98);
}

.dashboard-build-btn span {
    margin-top: -4px;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.dashboard-quest-bar {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 74px;
    z-index: 45;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto 38px;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 6px 5px 6px 9px;
    border: 1px solid rgba(255, 216, 112, 0.5);
    border-radius: 8px;
    background: rgba(35, 33, 21, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--dash-shadow);
    cursor: pointer;
    touch-action: manipulation;
}

.dashboard-quest-bar:hover,
.dashboard-quest-bar:focus-visible {
    outline: none;
    border-color: rgba(255, 232, 162, 0.78);
    filter: brightness(1.06);
}

.dashboard-quest-icon,
.dashboard-chest {
    width: 34px;
    height: 34px;
    margin: 0;
    align-self: center;
}

.dashboard-quest-icon {
    --button-art-size: 34px;
}

.dashboard-chest {
    --button-art-size: 34px;
}

.dashboard-quest-copy {
    min-width: 0;
}

.dashboard-quest-copy strong,
.dashboard-quest-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-quest-copy strong {
    color: #ffeaa2;
    font-size: 12px;
    font-weight: 900;
}

.dashboard-quest-copy span {
    color: #fff8de;
    font-size: 11px;
    font-weight: 750;
}

.dashboard-quest-progress {
    color: #7ee769;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.dashboard-footer-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    z-index: 48;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    box-sizing: border-box;
    height: 70px;
    padding: 5px 6px 6px;
    border-top: 1px solid rgba(255, 216, 112, 0.5);
    background:
        linear-gradient(180deg, rgba(108, 71, 34, 0.94), rgba(57, 34, 17, 0.98)),
        radial-gradient(circle at 50% 0%, rgba(255, 226, 143, 0.13), transparent 62%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.dashboard-footer-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-rows: 34px 14px;
    justify-items: center;
    align-content: center;
    align-items: center;
    gap: 2px;
    min-width: 0;
    min-height: 0;
    padding: 4px 3px 3px;
    border: 0;
    border-right: 1px solid rgba(255, 222, 127, 0.18);
    background: transparent;
    color: #e9d3a2;
    box-sizing: border-box;
    touch-action: manipulation;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease, filter 140ms ease;
}

.dashboard-footer-btn:last-child {
    border-right: 0;
}

.dashboard-footer-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("../img/button/framebottom.webp") center / 100% 100% no-repeat;
    opacity: 0;
    transition: opacity 120ms ease, filter 120ms ease;
}

.dashboard-footer-btn:hover,
.dashboard-footer-btn:focus-visible,
.dashboard-footer-btn.active {
    border-color: transparent;
    background: transparent;
    color: #fff1b4;
    box-shadow: inset 0 0 18px rgba(255, 207, 91, 0.18);
    outline: none;
}

.dashboard-footer-btn:hover::before,
.dashboard-footer-btn:focus-visible::before,
.dashboard-footer-btn.active::before {
    opacity: 1;
    filter: drop-shadow(0 -2px 7px rgba(255, 212, 91, 0.26));
}

.dashboard-footer-btn:hover .dashboard-button-art,
.dashboard-footer-btn:focus-visible .dashboard-button-art,
.dashboard-footer-btn.active .dashboard-button-art {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)) brightness(1.08);
}

.dashboard-footer-btn:hover .dashboard-button-art img,
.dashboard-footer-btn:focus-visible .dashboard-button-art img,
.dashboard-footer-btn.active .dashboard-button-art img {
    transform: translateX(var(--sprite-hover-x, -56%));
}

.dashboard-footer-btn:active {
    transform: translateY(1px) scale(0.985);
}

.dashboard-footer-btn .dashboard-button-art {
    --button-art-size: 32px;
    align-self: center;
    justify-self: center;
}

.dashboard-footer-btn img {
    width: 31px;
    height: 31px;
    object-fit: contain;
}

.dashboard-footer-btn b {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-menu-alert,
.dashboard-footer-alert {
    display: none;
    position: absolute;
    z-index: 2;
    place-items: center;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(255, 225, 187, 0.8);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ff8275 0%, #f23d34 40%, #a80d16 100%);
    box-shadow: 0 2px 4px rgba(69, 0, 0, 0.5), 0 0 0 2px rgba(242, 61, 52, 0.15);
    animation: badge-pulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-menu-alert::before,
.dashboard-footer-alert::before {
    content: "";
}

.dashboard-menu-alert {
    top: 3px;
    right: 4px;
    margin: 0;
}

.dashboard-build-btn .dashboard-menu-alert {
    top: 3px;
    right: 4px;
    margin: 0;
    font-size: 11px;
}

.dashboard-footer-alert {
    top: 5px;
    right: 15px;
}

.dashboard-menu-alert.show,
.dashboard-footer-alert.show {
    display: grid;
}

.dashboard-menu-alert,
.dashboard-footer-alert {
    display: none;
}

body.has-claimable-quests .dashboard-side-btn[data-dashboard-label="Misi"] .dashboard-menu-alert,
body.has-runnable-quests .dashboard-side-btn[data-dashboard-label="Misi"] .dashboard-menu-alert,
body.has-runnable-action-quests .dashboard-side-btn[data-dashboard-label="Aksi"] .dashboard-menu-alert,
body.has-ready-actions .dashboard-side-btn[data-dashboard-label="Aksi"] .dashboard-menu-alert,
body.has-city-explore-ready .dashboard-side-btn[data-dashboard-label="Kota"] .dashboard-menu-alert,
body.has-runnable-party-quests .dashboard-side-btn[data-dashboard-label="Partai"] .dashboard-menu-alert,
body.has-runnable-aset-quests .dashboard-side-btn[data-dashboard-label="Aset"] .dashboard-menu-alert,
body.has-runnable-aset-quests .dashboard-build-btn .dashboard-menu-alert,
body.has-runnable-election-quests .dashboard-side-btn[data-dashboard-label="Pemilu"] .dashboard-menu-alert,
body.has-runnable-pvp-quests .dashboard-side-btn[data-dashboard-label="PvP"] .dashboard-menu-alert,
body.has-unseen-misi .dashboard-side-btn[data-dashboard-label="Misi"] .dashboard-menu-alert,
body.has-unseen-karier .dashboard-side-btn[data-dashboard-label="Karier"] .dashboard-menu-alert,
body.has-career-ready .dashboard-side-btn[data-dashboard-label="Karier"] .dashboard-menu-alert,
body.has-unseen-partai .dashboard-side-btn[data-dashboard-label="Partai"] .dashboard-menu-alert,
body.has-unseen-aset .dashboard-side-btn[data-dashboard-label="Aset"] .dashboard-menu-alert,
body.has-unseen-aset .dashboard-build-btn .dashboard-menu-alert,
body.has-unseen-pemilu .dashboard-side-btn[data-dashboard-label="Pemilu"] .dashboard-menu-alert,
body.has-unseen-pvp .dashboard-side-btn[data-dashboard-label="PvP"] .dashboard-menu-alert,
body.has-unseen-inventaris .dashboard-side-btn[data-dashboard-label="Inventori"] .dashboard-menu-alert,
body.has-unseen-inventaris .dashboard-footer-btn[data-dashboard-label="Inventori"] .dashboard-footer-alert {
    display: grid;
}

body.has-unread-messages .dashboard-footer-btn[data-dashboard-label="Pesan"] .dashboard-footer-alert {
    display: grid;
}

.dashboard-start-guide {
    position: absolute;
    right: auto;
    bottom: 416px;
    left: 91px;
    z-index: 31;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    align-items: stretch;
    width: min(430px, calc(100% - 108px));
    padding: 10px;
    border: 1px solid rgba(219, 179, 93, 0.5);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(54, 36, 12, 0.9), rgba(17, 17, 9, 0.88)),
        rgba(24, 20, 10, 0.85);
    box-shadow:
        inset 0 1px 0 rgba(255, 239, 174, 0.18),
        0 8px 18px rgba(0, 0, 0, 0.32);
    color: #fff4c7;
    backdrop-filter: blur(8px);
}

.dashboard-stage:not([data-dashboard-page="beranda"]) .dashboard-start-guide,
.dashboard-stage[data-dashboard-subtab]:not([data-dashboard-subtab="kota"]) .dashboard-start-guide {
    display: none;
}

.dashboard-start-copy {
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 0;
}

.dashboard-start-copy span,
.dashboard-start-status b {
    color: rgba(255, 221, 143, 0.78);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.dashboard-start-copy strong {
    display: block;
    overflow: hidden;
    color: #fff7d5;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.25;
}

.dashboard-start-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.dashboard-start-status span {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid rgba(236, 198, 111, 0.25);
    border-radius: 6px;
    background: rgba(255, 241, 184, 0.08);
    color: #fff8df;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.08;
}

.dashboard-start-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.dashboard-start-actions button {
    position: relative;
    min-width: 0;
    min-height: 38px;
    padding: 6px 7px;
    border: 1px solid rgba(255, 223, 141, 0.45);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(147, 95, 29, 0.9), rgba(80, 50, 16, 0.94));
    color: #fff1bf;
    font-family: inherit;
    font-size: 10px;
    font-weight: 950;
    line-height: 1.05;
    text-align: center;
    text-shadow: 0 1px 1px rgba(44, 20, 0, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 181, 0.22),
        0 3px 8px rgba(0, 0, 0, 0.24);
    cursor: pointer;
}

.dashboard-start-actions button.secondary {
    background: linear-gradient(180deg, rgba(69, 72, 45, 0.9), rgba(35, 38, 24, 0.94));
}

.dashboard-start-actions button:focus-visible,
.dashboard-start-actions button:hover {
    border-color: rgba(255, 234, 160, 0.78);
    filter: brightness(1.08);
}

.dashboard-start-actions button:active {
    transform: translateY(1px);
}

.beginner-action-modal {
    z-index: 1750;
    background: rgba(9, 7, 4, 0.52);
    backdrop-filter: blur(5px);
}

.beginner-action-card-wrap {
    display: grid;
    gap: 9px;
    width: min(480px, var(--game-frame-modal-width));
    max-height: calc(100dvh - 18px);
    overflow: auto;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid rgba(219, 179, 93, 0.62);
    border-radius: 9px;
    background:
        linear-gradient(180deg, rgba(44, 31, 15, 0.98), rgba(13, 13, 8, 0.98)),
        #1f170c;
    color: #fff4c7;
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 181, 0.18),
        0 18px 46px rgba(0, 0, 0, 0.52);
}

.beginner-action-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.dashboard-action-panel {
    display: grid;
    gap: 9px;
}

.dashboard-action-live {
    display: grid;
    gap: 9px;
    min-height: 0;
}

.beginner-action-summary div,
.beginner-action-note {
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(255, 217, 121, 0.18);
    border-radius: 7px;
    background: rgba(255, 247, 223, 0.06);
}

.beginner-action-summary span,
.beginner-action-note span {
    display: block;
    color: rgba(255, 247, 223, 0.64);
    font-size: 9px;
    font-weight: 950;
    line-height: 1.2;
    text-transform: uppercase;
}

.beginner-action-summary strong,
.beginner-action-note strong {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: #ffe6a1;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beginner-action-note span {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.35;
    text-transform: none;
}

.beginner-action-list {
    display: grid;
    gap: 7px;
    min-height: 72px;
    padding: 2px 2px 4px;
    overflow: hidden auto;
}

.beginner-action-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 8px;
    min-width: 0;
    min-height: 76px;
    padding: 9px;
    border: 1px solid rgba(255, 217, 121, 0.26);
    border-left: 4px solid #d2a24d;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(56, 38, 15, 0.82), rgba(22, 18, 10, 0.88));
    color: #fff4c7;
    text-align: left;
}

.beginner-action-card.has-action-badge::after {
    top: 6px;
    right: 6px;
    z-index: 12;
    width: 18px;
    height: 18px;
    border-width: 1px;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.58),
        inset 0 -2px 2px rgba(94, 0, 0, 0.36),
        0 3px 7px rgba(20, 6, 0, 0.56),
        0 0 0 2px rgba(0, 0, 0, 0.26);
}

.beginner-action-card > * {
    position: relative;
    z-index: 1;
}

.beginner-action-card span {
    color: rgba(255, 247, 223, 0.58);
    font-size: 9px;
    font-weight: 950;
    text-transform: uppercase;
}

.beginner-action-card strong {
    display: block;
    margin-top: 2px;
    color: #fff1bc;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.15;
}

.beginner-action-card p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 4px 0 0;
    overflow: hidden;
    color: rgba(255, 247, 223, 0.72);
    font-size: 10px;
    line-height: 1.25;
}

.beginner-action-meta {
    display: grid;
    align-content: center;
    gap: 4px;
    min-width: 0;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 217, 121, 0.16);
    text-align: right;
}

.beginner-action-meta b {
    color: #ffe6a1;
    font-size: 10.5px;
    font-weight: 950;
}

.beginner-action-meta small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: rgba(255, 247, 223, 0.62);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.18;
}

.beginner-action-card:disabled {
    opacity: 0.58;
}

.beginner-action-modal {
    background: rgba(16, 10, 4, 0.38);
}

.beginner-action-card-wrap {
    border-color: rgba(211, 163, 91, 0.92);
    background:
        linear-gradient(180deg, rgba(248, 230, 185, 0.98), rgba(216, 182, 132, 0.98)),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.36), transparent 44%);
    color: #684015;
    box-shadow:
        inset 0 0 0 2px rgba(255, 247, 218, 0.58),
        0 18px 46px rgba(0, 0, 0, 0.42);
}

.beginner-action-summary div,
.beginner-action-note,
.beginner-action-card {
    border-color: rgba(193, 126, 67, 0.34);
    background: rgba(255, 250, 237, 0.78);
    color: #684015;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.beginner-action-card {
    border-left-color: #d89b35;
}

.beginner-action-summary span,
.beginner-action-note span,
.beginner-action-card span,
.beginner-action-card p,
.beginner-action-meta small {
    color: #8c6b3d;
}

.beginner-action-summary strong,
.beginner-action-note strong,
.beginner-action-card strong,
.beginner-action-meta b {
    color: #684015;
}

.beginner-action-meta {
    border-left-color: rgba(141, 93, 37, 0.2);
}

.dashboard-start-guide {
    border-color: rgba(211, 163, 91, 0.92);
    background:
        linear-gradient(180deg, rgba(248, 230, 185, 0.97), rgba(216, 182, 132, 0.96)),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.34), transparent 42%);
    color: #684015;
    box-shadow:
        inset 0 0 0 2px rgba(255, 247, 218, 0.5),
        0 8px 18px rgba(0, 0, 0, 0.24);
}

.dashboard-start-copy span,
.dashboard-start-status b {
    color: #8c6b3d;
}

.dashboard-start-copy strong {
    color: #684015;
}

.dashboard-start-status span {
    border-color: rgba(193, 126, 67, 0.3);
    background: rgba(255, 250, 237, 0.72);
    color: #684015;
}

.dashboard-start-actions button {
    border-color: #c88425;
    background: linear-gradient(180deg, #ffe487, #f0ab32);
    color: #744716;
    text-shadow: none;
}

.dashboard-start-actions button.secondary {
    border-color: rgba(129, 83, 35, 0.28);
    background: rgba(255, 255, 248, 0.76);
    color: #744716;
}

.career-job-choice-modal {
    z-index: 1760;
    background: rgba(16, 10, 4, 0.38);
    backdrop-filter: blur(5px);
}

.career-job-choice-wrap {
    display: grid;
    gap: 9px;
    width: min(480px, var(--game-frame-modal-width));
    max-height: calc(100dvh - 18px);
    overflow: auto;
    padding: 10px;
    border: 1px solid rgba(211, 163, 91, 0.92);
    border-radius: 9px;
    background:
        linear-gradient(180deg, rgba(248, 230, 185, 0.98), rgba(216, 182, 132, 0.98)),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.36), transparent 44%);
    color: #684015;
    box-shadow:
        inset 0 0 0 2px rgba(255, 247, 218, 0.58),
        0 18px 46px rgba(0, 0, 0, 0.42);
}

.career-job-choice-intro {
    display: grid;
    gap: 4px;
    padding: 9px;
    border: 1px solid rgba(193, 126, 67, 0.34);
    border-radius: 8px;
    background: rgba(255, 250, 237, 0.78);
}

.career-job-choice-intro strong {
    color: #684015;
    font-size: 13px;
    font-weight: 950;
}

.career-job-choice-intro span {
    color: #8c6b3d;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.35;
}

.career-job-choice-wrap .career-path-choice {
    background: rgba(255, 250, 237, 0.82);
}

.career-job-choice-wrap .career-path-choice p,
.career-job-choice-wrap .career-path-choice small {
    color: #7d5b32;
}

.career-job-choice-wrap .career-path-choice header span,
.career-job-choice-wrap .career-board-reqs b {
    color: #8c6b3d;
}

.career-job-choice-wrap .career-path-choice header strong,
.career-job-choice-wrap .career-board-reqs strong {
    color: #684015;
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-system-panel,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-system-panel p,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-system-panel small,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-system-panel .dashboard-hub-empty,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-system-panel .dashboard-hub-loading {
    color: #4a2a10;
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-v21-menu-kicker,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-v21-menu-stats b,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-v21-menu-head span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-metric span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-card span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-row span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-empty,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-loading {
    color: #6b4824;
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-v21-menu-head strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-v21-menu-stats span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-v21-menu-steps span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-metric strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-card strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-row strong {
    color: #3f240e;
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-v21-menu-head p {
    color: #56331a;
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-v21-menu-stats span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-v21-menu-steps span {
    border-color: rgba(193, 126, 67, 0.28);
    background: rgba(255, 255, 248, 0.58);
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-v21-menu-actions button.secondary {
    border-color: rgba(129, 83, 35, 0.28);
    background: rgba(255, 255, 248, 0.72);
    color: #744716;
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-system-panel p,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-system-panel small,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-v21-menu-head p,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-v21-menu-stats span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-v21-menu-stats b,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-v21-menu-steps span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-metric span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-metric strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-card span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-row span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-row strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-focus span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-focus strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-row span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-row small,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .phase3-mini-row span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .phase3-mini-row strong,
.phase3-modal-head span,
.phase3-form-field span,
.phase3-form-field small,
.phase3-form-field input,
.phase3-form-field select,
.phase3-form-field textarea,
.quest-phase-modal-head .fp-subtitle,
.fp-row-meta,
.beginner-action-summary span,
.beginner-action-note span,
.beginner-action-card span,
.beginner-action-card p,
.beginner-action-meta small,
.dashboard-start-copy span,
.dashboard-start-status b,
.dashboard-start-status span,
.dashboard-inventory-copy span,
.dashboard-inventory-detail-title span,
.dashboard-inventory-detail-title em,
.dashboard-inventory-detail-body p,
.dashboard-inventory-detail-stats span,
.career-job-choice-intro span,
.career-job-choice-wrap .career-path-choice p,
.career-job-choice-wrap .career-path-choice small {
    font-weight: 600;
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-system-topbar-title strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-hero strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-hero strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-v21-menu-head strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-card strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-priority header strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .phase3-subtitle,
.phase3-modal-head strong,
.quest-phase-modal-head .fp-title,
.fp-row-title,
.beginner-action-summary strong,
.beginner-action-note strong,
.beginner-action-card strong,
.dashboard-start-copy strong,
.dashboard-inventory-detail-title strong,
.career-job-choice-intro strong,
.career-job-choice-wrap .career-path-choice header strong {
    font-weight: 900;
}

@media (max-width: 760px) {
    .dashboard-start-guide {
        right: 8px;
        bottom: 416px;
        left: 78px;
        width: auto;
        gap: 6px;
        max-height: 36dvh;
        overflow: hidden auto;
        padding: 8px;
    }

    .dashboard-start-copy strong {
        font-size: 11px;
    }

    .dashboard-start-status span {
        padding: 5px 6px;
        font-size: 10px;
    }

    .dashboard-start-actions button {
        min-height: 34px;
        padding: 5px;
        font-size: 9.5px;
    }

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

    .beginner-action-meta {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        padding-top: 6px;
        padding-left: 0;
        border-top: 1px solid rgba(255, 217, 121, 0.16);
        border-left: 0;
        text-align: left;
    }
}

@media (max-width: 370px) {
    .dashboard-start-guide {
        left: 72px;
        bottom: 398px;
    }

    .dashboard-start-status,
    .dashboard-start-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-height: 640px) {
    .dashboard-start-guide {
        bottom: 362px;
        max-height: 30dvh;
    }
}

.dashboard-hidden-hooks {
    display: none;
}

.phase3-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.phase3-panel-head {
    display: grid;
    gap: 5px;
    margin-bottom: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(197,160,89,0.28);
    border-radius: 8px;
    background: rgba(255, 246, 211, 0.08);
}

.phase3-panel-head.party-panel-head {
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.party-logo-frame {
    position: relative;
    display: grid;
    place-items: center;
    width: 74px;
    height: 116px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    isolation: isolate;
}

.party-logo-preview {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: 7px;
    background: transparent;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.dashboard-party-logo-frame {
    width: 74px;
    height: 116px;
}

.dashboard-party-logo-frame .party-logo-preview {
    width: 100%;
    height: 100%;
}

.phase3-panel-head.danger {
    border-color: rgba(241, 96, 71, 0.48);
    background: rgba(103, 31, 20, 0.22);
}

.phase3-panel-head strong {
    color: #ffeaa2;
    font-size: 15px;
    font-weight: 950;
    line-height: 1.15;
}

.phase3-panel-head span {
    color: rgba(255,247,216,0.72);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
}

.phase3-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 12px;
}

.phase3-actions button,
.phase3-row button {
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #c88425;
    border-radius: 7px;
    background: linear-gradient(180deg, #ffe487, #f0ab32);
    color: #744716;
    font-size: 11px;
    font-weight: 950;
}

.phase3-actions button:hover,
.phase3-actions button:focus-visible,
.phase3-row button:hover,
.phase3-row button:focus-visible {
    filter: brightness(1.05);
    outline: none;
}

.phase3-actions button:disabled {
    cursor: not-allowed;
    border-color: rgba(197,160,89,0.22);
    background: rgba(255,246,211,0.12);
    color: rgba(255,247,216,0.45);
    filter: none;
}

.phase3-list {
    display: grid;
    gap: 8px;
}

.phase3-row,
.phase3-mini-row {
    display: grid;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(197,160,89,0.2);
    border-radius: 8px;
    background: rgba(21, 13, 7, 0.26);
}

.phase3-row {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 54px;
    padding: 9px 10px;
}

.phase3-row strong,
.phase3-row span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phase3-row strong {
    color: #fff0b8;
    font-size: 13px;
    font-weight: 950;
    white-space: nowrap;
}

.phase3-row span {
    color: rgba(255,247,216,0.68);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.3;
}

.phase3-mini-row {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 34px;
    padding: 7px 9px;
}

.phase3-mini-row span,
.phase3-mini-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phase3-mini-row span {
    color: #fff7d8;
    font-size: 11px;
    font-weight: 800;
}

.phase3-mini-row strong {
    color: #ffeaa2;
    font-size: 10px;
    font-weight: 950;
}

.phase3-role-select {
    width: 112px;
    min-height: 30px;
    border: 1px solid rgba(255,226,143,0.28);
    border-radius: 7px;
    background: rgba(255,246,211,0.12);
    color: #ffeaa2;
    font-size: 10px;
    font-weight: 900;
}

.phase3-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.phase3-stat-grid div {
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid rgba(197,160,89,0.22);
    border-radius: 8px;
    background: rgba(255,246,211,0.07);
    text-align: center;
}

.phase3-stat-grid span {
    color: rgba(255,247,216,0.62);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.phase3-stat-grid strong {
    color: #ffeaa2;
    font-size: 12px;
    font-weight: 950;
}

.phase3-bonus-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.phase3-bonus-strip span {
    padding: 5px 7px;
    border: 1px solid rgba(255,226,143,0.24);
    border-radius: 999px;
    background: rgba(255,246,211,0.08);
    color: #fff0b8;
    font-size: 10px;
    font-weight: 900;
}

.phase3-subtitle {
    margin: 14px 0 8px;
    color: #ffeaa2;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.phase3-filter-row,
.phase3-aib-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 8px 0 12px;
}

.phase3-filter-chip,
.phase3-aib-badge,
.phase3-muted {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 8px;
    border: 1px solid rgba(255,226,143,0.22);
    border-radius: 999px;
    background: rgba(255,246,211,0.08);
    color: rgba(255,247,216,0.72);
    font-size: 10px;
    font-weight: 900;
}

.phase3-filter-chip {
    cursor: pointer;
}

.phase3-filter-chip.active {
    border-color: #f0ab32;
    background: linear-gradient(180deg, #ffe487, #f0ab32);
    color: #744716;
}

.phase3-aib-badge {
    border-color: rgba(241, 96, 71, 0.5);
    background: rgba(103, 31, 20, 0.34);
    color: #ffd1c4;
    text-transform: capitalize;
}

.phase3-profile-aib {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.phase3-profile-aib .phase3-aib-badge {
    min-height: 20px;
    padding: 3px 6px;
    font-size: 8px;
}

.leaderboard-aib-strip {
    margin: 5px 0 0;
}

.leaderboard-aib-strip .phase3-aib-badge {
    min-height: 20px;
    padding: 3px 6px;
    font-size: 8px;
}

.phase3-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 24000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(5, 3, 2, 0.68);
    backdrop-filter: blur(6px);
}

.phase3-modal {
    display: grid;
    gap: 12px;
    width: min(520px, 100%);
    max-height: min(720px, calc(100dvh - 36px));
    overflow: auto;
    padding: 14px;
    border: 1px solid rgba(255,226,143,0.34);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(43, 27, 15, 0.98), rgba(20, 12, 8, 0.98));
    box-shadow: 0 18px 46px rgba(0,0,0,0.48);
    color: #fff7d8;
}

.phase3-modal-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 10px;
    align-items: start;
}

.phase3-modal-head strong {
    display: block;
    color: #ffeaa2;
    font-size: 16px;
    font-weight: 950;
}

.phase3-modal-head span {
    display: block;
    margin-top: 3px;
    color: rgba(255,247,216,0.68);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}

.phase3-modal-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,226,143,0.22);
    border-radius: 7px;
    background: rgba(255,246,211,0.08);
    color: #ffeaa2;
    font-size: 20px;
    font-weight: 900;
}

.phase3-form-body,
.phase3-form-field {
    display: grid;
    gap: 8px;
}

.phase3-form-field span {
    color: #ffeaa2;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.phase3-form-field input,
.phase3-form-field select,
.phase3-form-field textarea {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid rgba(255,226,143,0.28);
    border-radius: 7px;
    background: rgba(255,246,211,0.1);
    color: #fff7d8;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    outline: none;
}

.phase3-form-field textarea {
    min-height: 84px;
    resize: vertical;
}

.phase3-form-field small {
    color: rgba(255,247,216,0.58);
    font-size: 10px;
    font-weight: 750;
}

.phase3-form-error {
    padding: 8px 10px;
    border: 1px solid rgba(241, 96, 71, 0.45);
    border-radius: 7px;
    background: rgba(103, 31, 20, 0.28);
    color: #ffd1c4;
    font-size: 11px;
    font-weight: 850;
}

.phase3-target-list {
    display: grid;
    gap: 7px;
    max-height: 260px;
    overflow: auto;
}

.phase3-target-option {
    display: grid;
    gap: 3px;
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid rgba(255,226,143,0.2);
    border-radius: 7px;
    background: rgba(255,246,211,0.08);
    color: #fff7d8;
    text-align: left;
}

.phase3-target-option strong,
.phase3-target-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phase3-target-option strong {
    font-size: 12px;
    font-weight: 950;
}

.phase3-target-option span {
    color: rgba(255,247,216,0.62);
    font-size: 10px;
    font-weight: 800;
}

.phase3-target-option.active {
    border-color: #f0ab32;
    background: rgba(240, 171, 50, 0.18);
}

.phase3-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.phase3-modal-actions button {
    min-height: 38px;
    border: 1px solid #c88425;
    border-radius: 7px;
    background: linear-gradient(180deg, #ffe487, #f0ab32);
    color: #744716;
    font-size: 11px;
    font-weight: 950;
}

.phase3-modal-actions button.secondary {
    border-color: rgba(255,226,143,0.24);
    background: rgba(255,246,211,0.1);
    color: #ffeaa2;
}

.phase3-actions button.danger,
.phase3-modal-actions button.danger {
    border-color: rgba(255, 120, 96, 0.48);
    background: rgba(132, 35, 23, 0.88);
    color: #fff4e8;
}

@media (max-width: 760px) {
    .phase3-grid,
    .phase3-stat-grid {
        grid-template-columns: 1fr;
    }

    .phase3-row {
        grid-template-columns: 1fr;
    }

    .phase3-row button {
        width: 100%;
    }

    .phase3-modal-actions {
        grid-template-columns: 1fr;
    }
}

.vip-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    width: 100vw;
    height: 100dvh;
    padding: var(--game-frame-modal-padding);
    overflow: hidden;
    overscroll-behavior: contain;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: #43280d;
}

.vip-modal.active {
    display: flex;
}

.vip-modal-card {
    position: relative;
    width: min(380px, var(--game-frame-modal-width));
    max-width: var(--game-frame-modal-width);
    max-height: calc(100dvh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px;
    border: 2px solid #b98335;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 247, 222, 0.96), rgba(234, 207, 154, 0.96)),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.42), transparent 45%);
    box-shadow:
        inset 0 0 0 2px rgba(255, 242, 194, 0.74),
        inset 0 0 26px rgba(116, 68, 19, 0.22),
        0 18px 45px rgba(0, 0, 0, 0.48);
}

.vip-modal-title {
    margin: 0 36px 10px;
    color: #4a2a0c;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 249, 223, 0.8);
}

.vip-modal-subtitle {
    margin: -4px 0 12px;
    color: #6f522a;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

.vip-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(111, 70, 25, 0.46);
    border-radius: 50%;
    background: linear-gradient(180deg, #f7d98d, #9d6220);
    color: #3a210b;
    font-size: 19px;
    font-weight: 900;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 252, 230, 0.65), 0 4px 10px rgba(74, 39, 11, 0.28);
}

.vip-mall-card {
    width: min(360px, var(--game-frame-modal-width));
    max-width: var(--game-frame-modal-width);
    padding: 12px;
    border-radius: 12px;
}

.vip-mall-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(137, 84, 26, 0.28);
}

.vip-mall-card .vip-modal-title {
    margin-bottom: 5px;
}

.vip-mall-card .vip-modal-subtitle {
    margin-bottom: 0;
}

.vip-mall-balance {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid rgba(151, 104, 45, 0.28);
    border-radius: 8px;
    background: rgba(255, 250, 232, 0.64);
    box-shadow: inset 0 0 14px rgba(131, 82, 25, 0.08);
}

.vip-mall-balance span {
    color: #7a5430;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.vip-mall-balance strong {
    color: #3f270f;
    font-size: 12px;
    font-weight: 950;
}

.vip-mall-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 6px;
    margin-top: 10px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.vip-mall-tabs::-webkit-scrollbar {
    display: none;
}

.vip-mall-tab {
    min-height: 32px;
    padding: 7px 10px;
    border: 1px solid rgba(151, 104, 45, 0.34);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(255, 252, 240, 0.95), rgba(190, 174, 141, 0.82));
    color: #5d3a16;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 232, 0.56), 0 3px 8px rgba(84, 49, 13, 0.1);
}

.vip-mall-tab.active,
.vip-mall-tab:hover,
.vip-mall-tab:focus-visible {
    border-color: rgba(111, 70, 25, 0.58);
    background: linear-gradient(180deg, rgba(255, 241, 198, 0.96), rgba(214, 165, 79, 0.9));
    color: #43280d;
    outline: none;
}

.vip-mall-content {
    margin-top: 6px;
}

.vip-mall-diamond-hero {
    position: relative;
    display: grid;
    min-height: 74px;
    margin-bottom: 7px;
    overflow: hidden;
    border: 1px solid rgba(151, 104, 45, 0.42);
    border-radius: 9px;
    background: #6f4219;
    box-shadow: inset 0 0 0 1px rgba(255, 247, 213, 0.28), 0 5px 12px rgba(84, 49, 13, 0.18);
}

.vip-mall-diamond-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vip-mall-diamond-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(38, 20, 7, 0.72), rgba(38, 20, 7, 0.18));
}

.vip-mall-diamond-hero div {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    gap: 4px;
    max-width: 230px;
    padding: 10px 12px;
    color: #fff4c9;
}

.vip-mall-diamond-hero strong {
    font-size: 15px;
    font-weight: 950;
    line-height: 1.05;
    text-shadow: 0 2px 4px rgba(25, 10, 0, 0.5);
}

.vip-mall-diamond-hero span {
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(25, 10, 0, 0.55);
}

.vip-mall-grid,
.vip-package-grid {
    display: grid;
    gap: 6px;
}

.vip-package-btn,
.vip-mall-item {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(151, 104, 45, 0.34);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 241, 198, 0.94), rgba(214, 165, 79, 0.84));
    color: #43280d;
    box-shadow: inset 0 1px 0 rgba(255, 255, 232, 0.62), 0 4px 10px rgba(84, 49, 13, 0.14);
    font: inherit;
    text-align: left;
}

.vip-package-btn:hover,
.vip-package-btn:focus-visible,
.vip-mall-item:hover,
.vip-mall-item:focus-visible {
    border-color: rgba(111, 70, 25, 0.62);
    filter: brightness(1.04);
    outline: none;
}

.vip-package-btn {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas:
        "icon name amount"
        "icon note price";
    align-items: center;
    gap: 3px 8px;
    padding: 8px 10px;
}

.vip-mall-banner-grid .vip-package-btn {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    grid-template-areas:
        "banner name amount"
        "banner note price";
    overflow: hidden;
}

.vip-package-btn.featured {
    border-color: rgba(151, 97, 29, 0.72);
    box-shadow: inset 0 0 0 1px rgba(255, 238, 172, 0.56), 0 6px 13px rgba(84, 49, 13, 0.18);
}

.vip-tier-icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(111, 70, 25, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 248, 0.48);
    font-size: 17px;
}

.vip-mall-banner-grid .vip-tier-icon {
    display: none;
}

.vip-name {
    grid-area: name;
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vip-amount {
    grid-area: amount;
    font-size: 12px;
    font-weight: 950;
    text-align: right;
}

.vip-price-row {
    grid-area: price;
    display: grid;
    justify-items: end;
    gap: 1px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
}

.vip-price-row s,
.vip-mall-price s {
    color: rgba(89, 55, 21, 0.56);
    font-size: 9px;
}

.vip-price {
    color: #5a3510;
}

.vip-package-btn small {
    grid-area: note;
    min-width: 0;
    overflow: hidden;
    color: rgba(67, 40, 13, 0.76);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vip-mall-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
}

.vip-mall-item-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(111, 70, 25, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 248, 0.48);
    font-size: 17px;
}

.vip-mall-item-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.vip-mall-item-copy b {
    overflow: hidden;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vip-mall-item-copy small,
.vip-mall-item-copy em {
    overflow: hidden;
    color: rgba(67, 40, 13, 0.74);
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vip-mall-price {
    display: grid;
    justify-items: end;
    gap: 1px;
    font-size: 11px;
    font-weight: 950;
    line-height: 1.1;
}

.vip-mall-price span {
    color: #43280d;
}

.topup-image-tier {
    display: block;
    width: min(100%, 280px);
    min-height: 0 !important;
    padding: 0;
    margin-inline: auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    line-height: 0;
    aspect-ratio: 16 / 9;
}

.topup-image-tier::after {
    content: none;
}

.topup-image-tier:hover,
.topup-image-tier:focus-visible {
    transform: translateY(-1px);
    filter: none;
    outline: none;
}

.topup-package-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

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

.settings-modal-card {
    width: min(360px, var(--game-frame-modal-width));
    max-width: var(--game-frame-modal-width);
    max-height: min(680px, calc(100dvh - 24px));
    margin: auto;
    padding: 12px;
    border-radius: 12px;
}

#modal-settings {
    align-items: center !important;
    justify-content: center !important;
}

.settings-modal-overlay {
    padding: var(--game-frame-modal-padding-y) var(--game-frame-modal-padding-x) !important;
}

.settings-modal-overlay .settings-modal-card {
    position: relative;
    max-height: calc(100dvh - 32px);
    margin: auto !important;
    overflow-y: auto;
}

#modal-settings:has(#settings-whatsapp-panel:not([hidden])) .settings-modal-card {
    padding: 10px;
    overflow: visible;
}

#modal-settings:has(#settings-whatsapp-panel:not([hidden])) .settings-section {
    margin-top: 7px;
    padding: 8px;
}

#modal-settings:has(#settings-whatsapp-panel:not([hidden])) .settings-section:last-of-type {
    display: none;
}

#modal-settings:has(#settings-whatsapp-panel:not([hidden])) .settings-header {
    margin-bottom: 5px;
    padding-bottom: 5px;
}

#modal-settings:has(#settings-whatsapp-panel:not([hidden])) .settings-row {
    min-height: 30px;
    padding: 5px 0;
}

#modal-settings:has(#settings-whatsapp-panel:not([hidden])) .settings-menu-list {
    gap: 5px;
}

#modal-settings:has(#settings-whatsapp-panel:not([hidden])) .settings-menu-item {
    min-height: 40px;
    padding: 6px 8px;
}

#modal-settings:has(#settings-whatsapp-panel:not([hidden])) .settings-menu-icon {
    width: 28px;
    height: 28px;
}

#modal-settings:has(#settings-whatsapp-panel:not([hidden])) .settings-menu-copy small {
    display: none;
}

#modal-settings:has(#settings-whatsapp-panel:not([hidden])) .settings-account-summary {
    gap: 5px;
    margin-bottom: 6px;
}

#modal-settings:has(#settings-whatsapp-panel:not([hidden])) .settings-account-summary div {
    min-height: 28px;
    padding: 5px 7px;
}

#modal-settings:has(#settings-whatsapp-panel:not([hidden])) .settings-whatsapp-panel {
    margin-top: 7px;
    padding: 8px;
}

#modal-settings:has(#settings-whatsapp-panel:not([hidden])) .settings-whatsapp-actions {
    gap: 6px;
    margin-top: 8px;
}

.settings-modal-card::before,
.settings-modal-card::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(137, 84, 26, 0.48), transparent);
}

.settings-modal-card::before {
    top: 42px;
}

.settings-modal-card::after {
    bottom: 10px;
}

.settings-section {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(149, 104, 45, 0.32);
    border-radius: 8px;
    background: rgba(255, 250, 232, 0.62);
    box-shadow: inset 0 0 14px rgba(131, 82, 25, 0.08);
}

.settings-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(151, 104, 45, 0.24);
    color: #5a3510;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}

.settings-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(151, 104, 45, 0.14);
    color: #4e3518;
    font-size: 12px;
    font-weight: 800;
}

.settings-row:last-child {
    border-bottom: 0;
}

.settings-row strong {
    color: #3f270f;
    font-size: 12px;
    font-weight: 900;
    text-align: right;
}

.settings-control-pair {
    display: grid;
    grid-template-columns: minmax(0, 132px) 42px;
    gap: 8px;
    align-items: center;
}

.settings-row input[type="range"] {
    width: 132px;
    accent-color: #b9822f;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 25px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(111, 70, 25, 0.38);
    border-radius: 999px;
    background: #8b7658;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.22);
    transition: background 140ms ease;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff6d5, #d19a3a);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    transition: transform 140ms ease;
}

.toggle-switch input:checked + .toggle-slider {
    background: #4a9f51;
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.settings-section .vip-store-list {
    display: grid;
    gap: 7px;
}

.settings-section .vip-buy-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid rgba(151, 104, 45, 0.34);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(255, 241, 198, 0.94), rgba(214, 165, 79, 0.84));
    color: #43280d;
    box-shadow: inset 0 1px 0 rgba(255, 255, 232, 0.6), 0 3px 8px rgba(84, 49, 13, 0.14);
    font-size: 12px;
    font-weight: 900;
    text-align: left;
}

.settings-section .vip-buy-btn:hover,
.settings-section .vip-buy-btn:focus-visible {
    border-color: rgba(111, 70, 25, 0.6);
    filter: brightness(1.04);
}

.settings-menu-list {
    display: grid;
    gap: 7px;
}

.settings-menu-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 48px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(151, 104, 45, 0.34);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(255, 241, 198, 0.94), rgba(214, 165, 79, 0.84));
    color: #43280d;
    box-shadow: inset 0 1px 0 rgba(255, 255, 232, 0.6), 0 3px 8px rgba(84, 49, 13, 0.14);
    font: inherit;
    text-align: left;
}

.settings-menu-item:hover,
.settings-menu-item:focus-visible {
    border-color: rgba(111, 70, 25, 0.6);
    filter: brightness(1.04);
}

.settings-menu-item.danger {
    background: linear-gradient(180deg, rgba(255, 214, 195, 0.96), rgba(190, 83, 56, 0.88));
    color: #3d170c;
}

.settings-menu-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(111, 70, 25, 0.28);
    border-radius: 7px;
    background: rgba(255, 255, 248, 0.45);
    font-size: 16px;
}

.settings-menu-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.settings-menu-copy strong {
    color: inherit;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.1;
}

.settings-menu-copy small {
    overflow: hidden;
    color: rgba(67, 40, 13, 0.76);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-section .settings-danger-btn {
    background: linear-gradient(180deg, rgba(255, 214, 195, 0.96), rgba(190, 83, 56, 0.88));
    color: #3d170c;
}

.settings-section .settings-secondary-btn {
    background: linear-gradient(180deg, rgba(255, 252, 240, 0.95), rgba(190, 174, 141, 0.82));
}

.settings-account-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 8px;
}

.settings-account-summary div {
    display: grid;
    grid-template-columns: minmax(0, 92px) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 6px 8px;
    border: 1px solid rgba(151, 104, 45, 0.18);
    border-radius: 7px;
    background: rgba(255, 255, 248, 0.62);
}

.settings-account-summary span {
    color: #7a5430;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.settings-account-summary strong {
    min-width: 0;
    overflow: hidden;
    color: #3f270f;
    font-size: 11px;
    font-weight: 950;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-account-summary strong.is-warning {
    color: #a84e2f;
}

.settings-whatsapp-panel {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(129, 83, 35, 0.22);
    border-radius: 8px;
    background: rgba(255, 250, 237, 0.72);
}

.settings-whatsapp-title {
    margin-bottom: 6px;
    color: #5a3510;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.settings-row-stack {
    display: grid;
    gap: 6px;
    align-items: stretch;
}

.settings-row-stack input {
    width: 100%;
    min-width: 0;
    height: 34px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid rgba(129, 83, 35, 0.28);
    border-radius: 6px;
    background: rgba(255, 255, 248, 0.94);
    color: #5f4220;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    outline: none;
}

.settings-whatsapp-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.settings-whatsapp-message {
    min-height: 18px;
    margin-top: 8px;
    color: #a84e2f;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.3;
}

.settings-whatsapp-message.success {
    color: #2f7b52;
}

.required-whatsapp-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100dvh;
    padding: var(--game-frame-modal-padding);
    background: rgba(35, 22, 12, 0.72);
    box-sizing: border-box;
}

.game-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100dvh;
    padding: var(--game-frame-modal-padding);
    background: rgba(19, 11, 5, 0.72);
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 140ms ease;
}

.game-confirm-overlay.active {
    opacity: 1;
}

.game-confirm-card {
    position: relative;
    width: min(360px, var(--game-frame-modal-width));
    max-width: var(--game-frame-modal-width);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    padding: 14px;
    border: 1px solid rgba(219, 179, 93, 0.66);
    border-radius: 9px;
    background:
        linear-gradient(180deg, rgba(47, 33, 15, 0.98), rgba(18, 15, 9, 0.98)),
        #1f170c;
    color: #fff4c7;
    text-align: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 181, 0.18),
        0 18px 45px rgba(0, 0, 0, 0.48);
}

.game-confirm-close,
.result-close {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 217, 121, 0.28);
    border-radius: 7px;
    background: rgba(255, 247, 223, 0.08);
    color: #fff1bc;
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
    cursor: pointer;
}

.game-confirm-close:hover,
.game-confirm-close:focus-visible,
.result-close:hover,
.result-close:focus-visible {
    filter: brightness(1.08);
    outline: none;
}

.game-confirm-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    border: 1px solid rgba(255, 217, 121, 0.32);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, rgba(255, 242, 179, 0.42), rgba(151, 93, 23, 0.22) 58%, rgba(12, 8, 3, 0.4));
    font-size: 26px;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
}

.game-confirm-title {
    margin-bottom: 6px;
    color: #ffe6a1;
    font-size: 16px;
    font-weight: 950;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.game-confirm-message {
    max-height: 34dvh;
    overflow: auto;
    padding: 9px;
    border: 1px solid rgba(255, 217, 121, 0.16);
    border-radius: 8px;
    background: rgba(255, 247, 223, 0.06);
    color: rgba(255, 247, 223, 0.78);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.42;
    text-align: left;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.game-confirm-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.game-confirm-actions .game-confirm-btn:only-child {
    grid-column: 1 / -1;
}

.game-confirm-btn {
    min-height: 36px;
    border: 1px solid rgba(255, 217, 121, 0.42);
    border-radius: 7px;
    color: #321d0c;
    font-size: 12px;
    font-weight: 950;
}

.game-confirm-btn.primary {
    background: linear-gradient(180deg, rgba(255, 241, 198, 0.96), rgba(214, 165, 79, 0.9));
}

.game-confirm-btn.secondary {
    background: rgba(255, 247, 223, 0.08);
    color: #fff1bc;
}

.game-confirm-overlay.reward-confirm-overlay {
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 210, 92, 0.35), transparent 45%),
        linear-gradient(180deg, rgba(5, 8, 9, 0.82), rgba(14, 10, 4, 0.94));
    backdrop-filter: blur(8px);
}

.game-confirm-card.reward-confirm-card {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 13px;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 22px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.game-confirm-reward-title {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: min(360px, 94%);
    animation: item-pop 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.game-confirm-reward-title img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 140px;
    object-fit: contain;
    filter:
        drop-shadow(0 4px 0 rgba(111, 45, 0, 0.6))
        drop-shadow(0 0 24px rgba(255, 191, 63, 1))
        drop-shadow(0 0 45px rgba(255, 112, 28, 0.7));
}

.game-confirm-reward-title span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.reward-confirm-card .game-confirm-title,
.reward-confirm-card .game-confirm-message,
.reward-confirm-card .game-confirm-actions {
    position: relative;
    z-index: 1;
    width: min(360px, 94%);
}

.reward-confirm-card .game-confirm-title {
    color: #fff1bc;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.85);
}

.reward-confirm-card .game-confirm-message {
    max-height: 30dvh;
    border-color: rgba(255, 217, 121, 0.26);
    background: rgba(20, 12, 5, 0.48);
    color: rgba(255, 247, 223, 0.9);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.reward-confirm-card .game-confirm-actions {
    margin-top: 4px;
}

.ui-modal-overlay,
.public-leader-profile-modal,
.custom-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100dvh;
    padding: var(--game-frame-modal-padding);
    overflow: hidden;
    box-sizing: border-box;
}

.custom-modal-overlay {
    background: rgba(19, 11, 5, 0.48);
}

.result-overlay {
    position: fixed;
    inset: 0;
    z-index: 32000;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100dvh;
    padding: var(--game-frame-modal-padding);
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 210, 92, 0.18), transparent 34%),
        rgba(19, 11, 5, 0.74);
    box-sizing: border-box;
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

.result-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 10px;
    width: min(390px, var(--game-frame-modal-width));
    max-width: var(--game-frame-modal-width);
    max-height: calc(100dvh - 24px);
    overflow: hidden auto;
    padding: 18px 14px 14px;
    border: 1px solid rgba(219, 179, 93, 0.66);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(47, 33, 15, 0.98), rgba(18, 15, 9, 0.98)),
        #1f170c;
    color: #fff4c7;
    text-align: center;
    box-sizing: border-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 181, 0.18),
        0 18px 45px rgba(0, 0, 0, 0.52);
}

.result-card-glow {
    position: absolute;
    top: -86px;
    left: 50%;
    width: 260px;
    height: 150px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255, 221, 118, 0.48), rgba(255, 164, 46, 0.16) 46%, transparent 70%);
    pointer-events: none;
}

.result-icon-frame {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(255, 217, 121, 0.38);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, rgba(255, 242, 179, 0.46), rgba(151, 93, 23, 0.22) 58%, rgba(12, 8, 3, 0.42));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 10px 22px rgba(0, 0, 0, 0.34);
}

.result-icon {
    font-size: 28px;
    line-height: 1;
}

.result-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 7px;
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.result-copy strong {
    color: #ffe6a1;
    font-size: 15px;
    font-weight: 950;
    line-height: 1.24;
}

.result-lines {
    display: grid;
    gap: 5px;
    max-height: 28dvh;
    overflow: auto;
    padding: 8px;
    border: 1px solid rgba(255, 217, 121, 0.16);
    border-radius: 8px;
    background: rgba(255, 247, 223, 0.06);
}

.result-lines span {
    color: rgba(255, 247, 223, 0.78);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
}

.result-card button.result-ok {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(255, 217, 121, 0.46);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 227, 154, 0.98), rgba(180, 122, 45, 0.94));
    color: #321d0c;
    font-size: 12px;
    font-weight: 950;
}

.result-card button:hover,
.result-card button:focus-visible {
    filter: brightness(1.06);
    outline: none;
}

.obtained-overlay {
    position: fixed;
    inset: 0;
    z-index: 23000;
    display: grid;
    place-items: center;
    width: var(--game-frame-width) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    height: 100dvh;
    padding: var(--game-frame-modal-padding);
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 210, 92, 0.35), transparent 45%),
        linear-gradient(180deg, rgba(5, 8, 9, 0.82), rgba(14, 10, 4, 0.94));
    backdrop-filter: blur(8px);
    box-sizing: border-box;
    cursor: pointer;
    animation: obtained-fade-in 250ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.obtained-card {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 14px;
    width: 100vw;
    height: 100dvh;
    padding: 20px;
    overflow: hidden;
    color: #fff2ba;
    text-align: center;
    box-sizing: border-box;
}

.obtained-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(900px, 150vw);
    height: min(900px, 150vw);
    transform: translate(-50%, -50%);
    margin: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 246, 180, 0.7) 0, rgba(255, 178, 50, 0.3) 25%, transparent 60%),
        conic-gradient(from 0deg, transparent 0deg, rgba(255,200,100,0.4) 30deg, transparent 60deg, rgba(255,200,100,0.4) 90deg, transparent 120deg, rgba(255,200,100,0.4) 150deg, transparent 180deg, rgba(255,200,100,0.4) 210deg, transparent 240deg, rgba(255,200,100,0.4) 270deg, transparent 300deg, rgba(255,200,100,0.4) 330deg, transparent 360deg);
    filter: blur(2px);
    opacity: 0.9;
    pointer-events: none;
    animation: obtained-spin 20s linear infinite;
}

@keyframes obtained-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes item-pop {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.obtained-title {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: min(360px, 94%);
    margin-top: 0px;
    animation: item-pop 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.obtained-title img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 140px;
    object-fit: contain;
    filter:
        drop-shadow(0 4px 0 rgba(111, 45, 0, 0.6))
        drop-shadow(0 0 24px rgba(255, 191, 63, 1))
        drop-shadow(0 0 45px rgba(255, 112, 28, 0.7));
}

.obtained-title span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.obtained-subtitle {
    position: relative;
    z-index: 1;
    max-width: 320px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    animation: item-pop 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 100ms both;
}

.obtained-rewards {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    width: 100%;
    margin-top: 24px;
}

.obtained-reward {
    display: grid;
    justify-items: center;
    gap: 8px;
    width: 92px;
    min-width: 0;
    animation: item-pop 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.obtained-reward:nth-child(1) { animation-delay: 200ms; }
.obtained-reward:nth-child(2) { animation-delay: 300ms; }
.obtained-reward:nth-child(3) { animation-delay: 400ms; }
.obtained-reward:nth-child(4) { animation-delay: 500ms; }
.obtained-reward:nth-child(5) { animation-delay: 600ms; }

.obtained-reward-frame {
    position: relative;
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border: 2px solid rgba(255, 230, 160, 0.8);
    border-radius: 16px;
    background: radial-gradient(circle at top, rgba(255, 240, 200, 0.4), rgba(160, 100, 20, 0.6) 80%);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        0 8px 16px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(255, 180, 50, 0.5);
    backdrop-filter: blur(4px);
}

.obtained-reward.item .obtained-reward-frame {
    border-color: #ffd979;
    background: radial-gradient(circle at top, rgba(255, 220, 130, 0.5), rgba(110, 60, 10, 0.7) 80%);
}

.obtained-reward-frame img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    object-position: left center;
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.5));
    transition: transform 200ms ease;
}

.obtained-reward-frame:hover img {
    transform: scale(1.1) rotate(5deg);
}

.obtained-reward span {
    font-size: 13px;
    font-weight: 800;
    text-shadow: 0 1px 3px black;
}
.obtained-reward small {
    font-size: 11px;
    color: #ffc060;
}

.obtained-reward-frame b {
    position: absolute;
    right: 6px;
    bottom: 4px;
    color: #fff8d8;
    font-size: 12px;
    font-weight: 950;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.85);
}

.obtained-reward span,
.obtained-reward small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.obtained-reward span {
    color: #fff1bc;
    font-size: 11px;
    font-weight: 950;
    line-height: 1.15;
}

.obtained-reward small {
    color: rgba(255, 246, 211, 0.72);
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1.15;
}

.obtained-hint {
    position: absolute;
    right: 0;
    bottom: 24px;
    left: 0;
    color: rgba(255, 246, 211, 0.7);
    font-size: 12px;
    font-weight: 850;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.72);
}

@keyframes obtained-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.ui-modal-card,
.public-leader-profile-card,
.custom-modal {
    width: min(420px, var(--game-frame-modal-width));
    max-width: var(--game-frame-modal-width);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    box-sizing: border-box;
}

.custom-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border: 2px solid rgba(211, 163, 91, 0.92);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 250, 237, 0.98), rgba(232, 213, 177, 0.98)),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.38), transparent 42%);
    color: #67451e;
    box-shadow:
        inset 0 0 0 2px rgba(255, 247, 218, 0.56),
        0 20px 48px rgba(0, 0, 0, 0.48);
    overflow: hidden !important;
}

.custom-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(141, 93, 37, 0.2);
}

.custom-modal-header h3 {
    margin: 0;
    color: #684015;
    font-size: 15px;
    font-weight: 950;
}

.custom-modal-close {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(129, 83, 35, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 248, 0.88);
    color: #744716;
    font: inherit;
    font-size: 18px;
    font-weight: 950;
    line-height: 1;
}

.custom-modal-body {
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
}

.leaderboard-profile-card {
    width: min(500px, var(--game-frame-modal-width)) !important;
}

.quest-phase-modal {
    background: rgba(16, 10, 4, 0.66);
    backdrop-filter: blur(4px);
}

.quest-phase-modal-card {
    display: grid;
    gap: 10px;
    width: min(520px, var(--game-frame-modal-width));
    padding: 12px;
    border: 1px solid rgba(219, 179, 93, 0.62);
    border-radius: 9px;
    background:
        linear-gradient(180deg, rgba(50, 35, 16, 0.97), rgba(18, 15, 9, 0.98)),
        #1f170c;
    color: #fff4c7;
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 181, 0.18),
        0 18px 46px rgba(0, 0, 0, 0.52);
}

.quest-phase-modal-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 8px;
    align-items: start;
    padding: 10px;
    border: 1px solid rgba(255, 217, 121, 0.18);
    border-radius: 8px;
    background: rgba(255, 247, 223, 0.06);
}

.quest-phase-modal-head .fp-title {
    color: #ffe6a1;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.15;
}

.quest-phase-modal-head .fp-subtitle {
    margin-top: 3px;
    color: rgba(255, 247, 223, 0.68);
    font-size: 10.5px;
    font-weight: 850;
}

.quest-phase-modal-close {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 217, 121, 0.34);
    border-radius: 7px;
    background: rgba(255, 247, 223, 0.08);
    color: #fff1bc;
    font-size: 18px;
    font-weight: 950;
    line-height: 1;
}

.quest-phase-modal-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(74, 222, 128, 0.24);
    border-radius: 7px;
    background: rgba(20, 83, 45, 0.22);
}

.quest-phase-modal-summary span,
.quest-phase-modal-summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quest-phase-modal-summary span {
    color: rgba(255, 247, 223, 0.72);
    font-size: 10px;
    font-weight: 900;
}

.quest-phase-modal-summary strong {
    color: #dfffd3;
    font-size: 11px;
    font-weight: 950;
}

.quest-phase-modal-list {
    display: grid;
    gap: 7px;
    min-height: 0;
    overflow: auto;
}

.fp-row {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(255, 247, 223, 0.12);
    border-radius: 8px;
    background: rgba(255, 247, 223, 0.06);
}

.fp-row.fp-claimable {
    border-color: rgba(74, 222, 128, 0.46);
    background: rgba(20, 83, 45, 0.28);
}

.fp-row.fp-done {
    border-color: rgba(125, 211, 252, 0.24);
    background: rgba(14, 116, 144, 0.16);
    opacity: 0.84;
}

.fp-row-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 217, 121, 0.72);
    box-shadow: 0 0 0 3px rgba(255, 217, 121, 0.12);
}

.fp-row.fp-claimable .fp-row-dot {
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.16);
}

.fp-row-main {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.fp-row-title,
.fp-row-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fp-row-title {
    color: #fff1bc;
    font-size: 12px;
    font-weight: 950;
}

.fp-row-meta {
    color: rgba(255, 247, 223, 0.68);
    font-size: 10px;
    font-weight: 800;
}

.fp-focus-track {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 247, 223, 0.12);
}

.fp-focus-track-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffd979, #4ade80);
}

.fp-row-claim-btn {
    position: relative;
    min-width: 64px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(255, 217, 121, 0.48);
    border-radius: 7px;
    background: linear-gradient(180deg, #ffe39a, #b47a2d);
    color: #321d0c;
    font-size: 10px;
    font-weight: 950;
}

.fp-row-claim-btn.quest-route-btn {
    background: rgba(255, 247, 223, 0.14);
    color: #fff1bc;
}

/* Bright v2.1 modal theme: follows the lighter Pesan panel, excluding Inventori. */
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-system-panel {
    border-color: rgba(211, 163, 91, 0.92);
    background:
        linear-gradient(180deg, rgba(248, 230, 185, 0.97), rgba(216, 182, 132, 0.96)),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.36), transparent 44%);
    color: #684015;
    box-shadow:
        inset 0 0 0 2px rgba(255, 247, 218, 0.58),
        0 16px 36px rgba(0, 0, 0, 0.42);
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-system-body {
    scrollbar-color: rgba(174, 124, 51, 0.72) rgba(255, 250, 237, 0.42);
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-system-body::-webkit-scrollbar-track {
    background: rgba(255, 250, 237, 0.42);
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-system-body::-webkit-scrollbar-thumb {
    background: rgba(174, 124, 51, 0.72);
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-system-body .dashboard-v21-menu-card,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-hero,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-hero,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-path,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-lane,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-focus div,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-board-wrap,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .career-risk-box,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .career-machine-panel,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .career-path-choice,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-phase,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-priority,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-row,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-card,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-row,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-metric,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .phase3-panel-head,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .phase3-mini-card,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .phase3-mini-row,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .phase3-list,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .phase3-filter-row {
    border-color: rgba(193, 126, 67, 0.34);
    background: rgba(255, 250, 237, 0.76);
    color: #684015;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-path-node,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .career-board-reqs span {
    border-color: rgba(193, 126, 67, 0.28);
    background: rgba(255, 255, 248, 0.6);
    color: #72502a;
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-icon,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-icon {
    border-color: rgba(193, 126, 67, 0.38);
    background: linear-gradient(180deg, rgba(255, 244, 203, 0.94), rgba(230, 190, 126, 0.78));
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-hero span:not(.dashboard-career-icon),
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-hero span:not(.dashboard-mission-icon),
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-path header span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-priority header span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-lane span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-lane small,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-focus span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .career-board-next span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .career-board-reqs b,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .career-risk-box span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-phase span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-row span,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .phase3-muted,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .phase3-mini-row span {
    color: #8c6b3d;
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-hero strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-hero strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-path header strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-lane strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-focus strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .career-board-next strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .career-board-reqs strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .career-risk-box strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .career-machine-panel strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-phase strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-phase b,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-priority header strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-row strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .phase3-subtitle,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .phase3-panel-head strong,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .phase3-mini-row strong {
    color: #684015;
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .career-machine-panel p,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-board-wrap p,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .career-path-choice p,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .career-path-choice small,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .phase3-panel-head span {
    color: #7d5b32;
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-path-node.done,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-path-node.active,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .career-risk-box.active,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .career-board-reqs span.assisted,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-target-note {
    border-color: rgba(82, 137, 148, 0.38);
    background: rgba(226, 246, 245, 0.78);
    color: #2d6971;
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-career-path-node.available,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .career-path-choice.ready {
    border-color: rgba(216, 155, 53, 0.52);
    background: linear-gradient(180deg, rgba(255, 239, 178, 0.92), rgba(245, 214, 151, 0.72));
    color: #744716;
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-phase.claimable {
    border-color: rgba(90, 139, 75, 0.5);
    background: rgba(236, 247, 232, 0.9);
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-row small {
    color: #b07a2b;
}

.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-mission-hero button,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .phase3-actions button.secondary,
.dashboard-stage:not([data-dashboard-subtab="inventaris"]) .dashboard-hub-actions button.secondary {
    border-color: rgba(129, 83, 35, 0.28);
    background: rgba(255, 255, 248, 0.72);
    color: #744716;
}

.phase3-modal {
    border-color: rgba(211, 163, 91, 0.92);
    background:
        linear-gradient(180deg, rgba(248, 230, 185, 0.98), rgba(216, 182, 132, 0.98)),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.36), transparent 44%);
    color: #684015;
    box-shadow:
        inset 0 0 0 2px rgba(255, 247, 218, 0.58),
        0 18px 46px rgba(0, 0, 0, 0.42);
}

.phase3-modal-head {
    padding: 9px;
    border: 1px solid rgba(141, 93, 37, 0.18);
    border-radius: 8px;
    background: rgba(255, 251, 237, 0.7);
}

.phase3-modal-head strong,
.phase3-form-field span {
    color: #684015;
}

.phase3-modal-head span,
.phase3-form-field small {
    color: #8c6b3d;
}

.phase3-modal-close,
.phase3-modal-actions button.secondary {
    border-color: rgba(129, 83, 35, 0.28);
    background: rgba(255, 255, 248, 0.72);
    color: #744716;
}

.phase3-form-field input,
.phase3-form-field select,
.phase3-form-field textarea,
.phase3-target-option {
    border-color: rgba(129, 83, 35, 0.28);
    background: rgba(255, 255, 248, 0.88);
    color: #5f4220;
}

.phase3-target-option span {
    color: #8c6b3d;
}

.phase3-target-option.active {
    border-color: #d89b35;
    background: rgba(255, 232, 162, 0.72);
}

.quest-phase-modal-card {
    border-color: rgba(211, 163, 91, 0.92);
    background:
        linear-gradient(180deg, rgba(248, 230, 185, 0.98), rgba(216, 182, 132, 0.98)),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.36), transparent 44%);
    color: #684015;
    box-shadow:
        inset 0 0 0 2px rgba(255, 247, 218, 0.58),
        0 18px 46px rgba(0, 0, 0, 0.42);
}

.quest-phase-modal-head,
.fp-row {
    border-color: rgba(193, 126, 67, 0.34);
    background: rgba(255, 250, 237, 0.76);
    color: #684015;
}

.quest-phase-modal-head .fp-title,
.fp-row-title {
    color: #684015;
}

.quest-phase-modal-head .fp-subtitle,
.fp-row-meta {
    color: #8c6b3d;
}

.quest-phase-modal-close {
    border-color: rgba(129, 83, 35, 0.28);
    background: rgba(255, 255, 248, 0.72);
    color: #744716;
}

.quest-phase-modal-summary,
.fp-row.fp-claimable {
    border-color: rgba(90, 139, 75, 0.5);
    background: rgba(236, 247, 232, 0.9);
}

.quest-phase-modal-summary span {
    color: #5a7a3f;
}

.quest-phase-modal-summary strong {
    color: #2f6a32;
}

.fp-row.fp-done {
    border-color: rgba(82, 137, 148, 0.32);
    background: rgba(226, 246, 245, 0.72);
}

.required-whatsapp-card {
    width: min(420px, var(--game-frame-modal-width));
    max-width: var(--game-frame-modal-width);
    padding: 18px;
    border: 2px solid rgba(214, 165, 79, 0.78);
    border-radius: 8px;
    background: #fff6df;
    color: #4b2d12;
    box-shadow: 0 16px 48px rgba(38, 19, 8, 0.42);
}

.required-whatsapp-card h2 {
    margin: 0 0 8px;
    color: #43280d;
    font-size: 20px;
}

.required-whatsapp-card p {
    margin: 0 0 14px;
    color: #7a5430;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
}

.required-whatsapp-card label {
    display: block;
    margin: 10px 0 5px;
    color: #6a4422;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.required-whatsapp-card input {
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    padding: 0 11px;
    border: 1px solid rgba(129, 83, 35, 0.32);
    border-radius: 6px;
    background: rgba(255, 255, 248, 0.96);
    color: #4b2d12;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    outline: none;
}

.required-whatsapp-card button {
    width: 100%;
    min-height: 38px;
    margin-top: 10px;
    border: 1px solid rgba(111, 70, 25, 0.46);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(255, 241, 198, 0.96), rgba(214, 165, 79, 0.9));
    color: #43280d;
    font: inherit;
    font-size: 12px;
    font-weight: 950;
}

.required-whatsapp-message {
    min-height: 18px;
    margin-top: 9px;
    color: #a84e2f;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.35;
}

.required-whatsapp-message.success {
    color: #2f7b52;
}

@media (max-width: 370px) {
    :root {
        --game-frame-width: 100vw;
        --game-frame-modal-width: calc(100vw - 16px);
        --game-frame-modal-padding-x: 8px;
        --game-frame-modal-padding-y: 8px;
        --game-frame-modal-padding: var(--game-frame-modal-padding-y) var(--game-frame-modal-padding-x);
    }

    .settings-modal-card {
        width: var(--game-frame-modal-width);
        max-height: calc(100dvh - 16px);
        padding: 10px;
    }

    .vip-modal-title {
        font-size: 16px;
    }

    .settings-row input[type="range"] {
        width: 110px;
    }
}

@media (min-width: 760px) {
    .game-layout {
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .dashboard-home-active .game-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 370px) {
    .dashboard-stage {
        border-radius: 10px;
    }

    .dashboard-resources {
        width: 122px;
        right: 7px;
    }

    .dashboard-resource {
        grid-template-columns: 19px minmax(0, 1fr) 12px;
        gap: 4px;
    }

    .dashboard-resource span {
        font-size: 8px;
    }

    .dashboard-resource strong {
        font-size: 8px;
    }

    .dashboard-side-nav,
    .dashboard-side-btn {
        width: 66px;
    }

    .dashboard-side-btn b {
        font-size: 10px;
    }

    .dashboard-map-label {
        font-size: 11px;
        padding-inline: 10px;
        background: rgba(15, 10, 7, 0.85);
        color: #ffffff;
        border: 1px solid rgba(255, 217, 126, 0.4);
    }

    .dashboard-message-shell {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .dashboard-message-tabs button {
        min-height: 50px;
        font-size: 11px;
    }

    .dashboard-message-item {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 5px;
    }

    .dashboard-message-item.is-own {
        grid-template-columns: minmax(0, 1fr) 40px;
    }

    .dashboard-message-avatar {
        width: 40px;
        height: 40px;
    }

    .dashboard-message-channel-icon.tab-icon {
        width: 30px;
        height: 30px;
    }
}

@media (max-height: 720px) {
    .dashboard-profile {
        top: 7px;
        transform: scale(0.92);
        transform-origin: top left;
    }

    .dashboard-resources {
        top: 12px;
        transform: scale(0.94);
        transform-origin: top right;
    }

    .dashboard-side-nav {
        top: 112px;
        gap: 3px;
        width: 64px;
    }

    .dashboard-side-btn {
        width: 64px;
        height: 52px;
        padding-block: 4px 3px;
        gap: 2px;
    }

    .dashboard-side-btn .dashboard-button-art {
        --button-art-size: 27px;
    }

    .dashboard-side-btn b {
        font-size: 10px;
    }

    .dashboard-build-btn {
        bottom: 126px;
        width: 60px;
        height: 60px;
    }

    .dashboard-build-btn .dashboard-button-art {
        --button-art-size: 34px;
    }

    .dashboard-quest-bar {
        bottom: 64px;
        min-height: 48px;
        grid-template-columns: 32px minmax(0, 1fr) auto 36px;
    }

    .dashboard-quest-icon,
    .dashboard-chest {
        width: 32px;
        height: 32px;
        --button-art-size: 32px;
    }

    .dashboard-footer-nav {
        height: 62px;
    }

    .dashboard-footer-btn .dashboard-button-art {
        --button-art-size: 28px;
    }

    .dashboard-footer-btn b {
        font-size: 9px;
    }

    .dashboard-stage[data-dashboard-page="pesan"] .dashboard-page-panel {
        top: 140px;
        bottom: 66px;
    }

    .dashboard-stage[data-dashboard-subtab="inventaris"] .dashboard-page-panel {
        top: 120px;
        bottom: 66px;
    }

    .dashboard-stage:is(
        [data-dashboard-subtab="karier"],
        [data-dashboard-subtab="partai"],
        [data-dashboard-subtab="aset"],
        [data-dashboard-subtab="lelang"],
        [data-dashboard-subtab="pemilu"],
        [data-dashboard-subtab="pvp"],
        [data-dashboard-subtab="misi"],
        [data-dashboard-subtab="bangun"]
    ) .dashboard-page-panel {
        top: 120px;
        bottom: 66px;
    }

    .dashboard-inventory-topbar {
        min-height: 42px;
        grid-template-columns: 36px minmax(0, 1fr);
        margin-top: 0;
        padding: 3px 5px;
    }

    .dashboard-system-topbar {
        min-height: 42px;
        grid-template-columns: 36px minmax(0, 1fr);
        margin-top: 0;
        padding: 3px 5px;
    }

    .dashboard-inventory-back {
        width: 32px;
        height: 32px;
    }

    .dashboard-system-back {
        width: 32px;
        height: 32px;
    }

    .dashboard-inventory-tabs button {
        height: 34px;
    }

    .dashboard-inventory-grid {
        padding-top: 60px;
    }

    .dashboard-inventory-item {
        grid-template-rows: 40px minmax(30px, auto);
        min-height: 92px;
        padding: 7px 3px 5px;
    }

    .dashboard-inventory-icon {
        width: 40px;
        height: 40px;
    }

    .dashboard-message-shell {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .dashboard-message-tabs button {
        min-height: 50px;
        font-size: 11px;
    }

    .dashboard-message-board {
        grid-template-rows: auto minmax(0, 1fr) auto;
        padding: 6px;
    }

    .dashboard-message-item {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 6px;
        margin-bottom: 8px;
    }

    .dashboard-message-item.is-own {
        grid-template-columns: minmax(0, 1fr) 40px;
    }

    .dashboard-message-avatar {
        width: 40px;
        height: 40px;
    }

    .dashboard-message-composer {
        grid-template-columns: minmax(0, 1fr) 34px 38px;
        gap: 6px;
    }

    .dashboard-message-composer input,
    .dashboard-message-composer button {
        height: 29px;
        font-size: 11px;
    }
}

@media (max-height: 640px) {
    .dashboard-stage {
        min-height: 100dvh;
    }

    .dashboard-side-nav {
        top: 104px;
    }

    .dashboard-side-btn {
        height: 47px;
    }

    .dashboard-side-btn .dashboard-button-art {
        --button-art-size: 24px;
    }

    .dashboard-build-btn {
        right: 10px;
        bottom: 118px;
    }

    .dashboard-map-label {
        font-size: 9px;
        padding: 3px 6px;
    }
}

/* Onboarding and character creation use the same framed language as the runtime dashboard. */

.onboarding-stage {
    position: relative;
    isolation: isolate;
    width: var(--game-frame-width);
    height: 100dvh;
    min-height: min(680px, 100dvh);
    max-height: 820px;
    margin: auto;
    overflow: hidden;
    color: #fff4cc;
    border: 2px solid #d9a948;
    border-radius: 14px;
    background: #173b46;
    box-shadow:
        inset 0 0 0 2px rgba(67, 37, 13, 0.86),
        inset 0 0 30px rgba(20, 10, 4, 0.65),
        0 18px 48px rgba(0, 0, 0, 0.45);
}

.onboarding-stage .dashboard-map {
    transform: scale(1.03);
    filter: saturate(1.04) contrast(1.02);
}

.onboarding-stage .dashboard-vignette {
    background:
        linear-gradient(180deg, rgba(12, 20, 23, 0.12) 0%, rgba(16, 20, 17, 0.12) 34%, rgba(16, 10, 4, 0.78) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, transparent 25%, transparent 74%, rgba(0, 0, 0, 0.22) 100%);
}

.onboarding-topbar {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 54px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 216, 112, 0.36);
    border-radius: 8px;
    background: rgba(22, 20, 16, 0.78);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    box-shadow: var(--dash-shadow);
}

.onboarding-topbar .top-bar-logo {
    width: 38px;
    height: 38px;
}

.onboarding-topbar .top-bar-title {
    gap: 2px;
    font-size: 13px;
    line-height: 1.05;
}

.onboarding-topbar .top-bar-title small {
    max-width: 170px;
    font-size: 10px;
    line-height: 1.1;
}

.onboarding-icon-btn {
    min-width: 58px;
    min-height: 34px;
    padding: 0 9px;
    font-size: 11px;
    font-weight: 900;
}

.intro-profile-card {
    position: absolute;
    top: 86px;
    left: 13px;
    z-index: 30;
    display: grid;
    grid-template-columns: 88px 1fr;
    width: 190px;
    min-height: 108px;
    padding: 7px;
    color: #fff8d9;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.68);
}

.onboarding-card {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 18px;
    z-index: 35;
    display: grid;
    gap: 10px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid rgba(255, 216, 112, 0.48);
    border-radius: 8px;
    background: rgba(31, 27, 18, 0.86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--dash-shadow);
}

.cinematic-kicker {
    color: #ffd979;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.onboarding-card .cinematic-title,
.create-character-panel .cinematic-title {
    margin: 0;
    text-align: left;
}

.onboarding-card .create-copy {
    display: grid;
    gap: 8px;
}

.onboarding-card .create-copy p {
    margin: 0;
    color: #fff7d8;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.42;
}

.onboarding-card .create-copy strong {
    color: #ffe6a1;
}

.onboarding-primary-btn {
    width: 100%;
    min-height: 44px;
    font-size: 13px;
    font-weight: 950;
}

.create-character-screen {
    background: #173b46;
}

.create-side-panel {
    position: absolute;
    top: 78px;
    left: 12px;
    right: 12px;
    z-index: 32;
    display: grid;
    gap: 8px;
}

.create-character-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 306px;
    bottom: 12px;
    z-index: 34;
    display: grid;
    align-content: start;
    width: auto;
    max-height: none;
    overflow: hidden auto;
    padding: 13px;
    border: 1px solid rgba(255, 216, 112, 0.48);
    border-radius: 8px;
    background: rgba(31, 27, 18, 0.86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--dash-shadow);
}

.create-character-panel .create-helper {
    max-width: none;
    margin: 2px 0 12px;
    color: #fff7d8;
    text-align: left;
}

.create-helper.is-error,
.create-character-panel .create-helper.is-error {
    color: #ffb6a8;
}

.create-helper.is-notice,
.create-character-panel .create-helper.is-notice {
    color: #c7f7ad;
}

.create-hero-preview {
    min-height: 164px;
    border-radius: 8px;
    background: rgba(31, 27, 18, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.create-avatar-preview {
    left: 11px;
    bottom: 11px;
    width: 94px;
    height: 108px;
    border-radius: 8px;
}

.create-hero-preview strong {
    right: 11px;
    bottom: 11px;
    max-width: 178px;
}

.create-summary-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.create-summary-rail div {
    min-height: 42px;
    padding: 6px 7px;
    border: 1px solid rgba(255, 216, 112, 0.34);
    border-radius: 8px;
    background: rgba(31, 27, 18, 0.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.create-summary-rail span,
.create-summary-rail strong {
    display: block;
}

.create-summary-rail span {
    color: rgba(255, 247, 216, 0.72);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.create-summary-rail strong {
    margin-top: 2px;
    color: #ffe6a1;
    font-size: 12px;
    font-weight: 950;
}

.create-character-form {
    gap: 10px;
}

.form-group label {
    color: #ffd979;
}

.cinematic-input,
.cinematic-select {
    min-height: 40px;
    border-color: rgba(255, 216, 112, 0.38);
    background: rgba(16, 18, 15, 0.76);
}

.create-avatar-card,
.stat-alloc-row {
    border-color: rgba(255, 216, 112, 0.34);
    background: rgba(31, 27, 18, 0.78);
}

.create-avatar-card {
    min-height: 112px;
}

.create-avatar-card img {
    width: 68px;
    height: 76px;
}

.create-avatar-card:hover,
.create-avatar-card:focus-visible,
.create-avatar-card.active {
    border-color: #ffd979;
    background: rgba(75, 49, 22, 0.86);
}

.stat-alloc-grid {
    gap: 7px;
    margin-top: 0;
}

.stat-alloc-row {
    min-height: 42px;
    padding: 7px 8px;
}

.stat-alloc-row .stat-name {
    color: #fff4cf;
    font-size: 12px;
    font-weight: 850;
}

.stat-alloc-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(131, 91, 36, 0.9), rgba(55, 35, 17, 0.95)),
        url("../img/button/framebutton.webp") center top / 100% 200% no-repeat;
}

.create-start-btn {
    position: sticky;
    bottom: 0;
    z-index: 2;
    min-height: 44px;
    margin-top: 12px;
    font-size: 13px;
}

@media (max-width: 480px) {
    .onboarding-stage {
        width: 100%;
        min-height: 100dvh;
        max-height: none;
        border: 0;
        border-radius: 0;
    }

    .create-character-panel {
        top: 300px;
        border-radius: 8px;
        padding: 13px;
    }
}

@media (max-height: 720px) {
    .intro-profile-card {
        top: 76px;
        transform: scale(0.92);
        transform-origin: top left;
    }

    .onboarding-card {
        gap: 8px;
        padding: 12px;
    }

    .onboarding-card .create-copy p {
        font-size: 11px;
        line-height: 1.34;
    }

    .create-side-panel {
        top: 72px;
    }

    .create-hero-preview {
        min-height: 138px;
    }

    .create-avatar-preview {
        width: 82px;
        height: 94px;
    }

    .create-character-panel {
        top: 262px;
    }
}

.stat-alloc-grid[hidden] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Keep the character creation stat editor in-flow so it never covers other fields. */
.create-stat-editor-group,
.create-character-form .form-group:has(.create-stat-radar) {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 18px;
}

.create-stat-editor-group + .form-group,
.create-character-form .form-group:has(.create-stat-radar) + .form-group {
    position: relative;
    z-index: 2;
    clear: both;
    margin-top: 6px;
}

.create-character-panel {
    scroll-padding-bottom: 84px;
}

.create-character-form {
    padding-bottom: 72px;
}

@media (max-width: 480px) {
    .create-character-panel {
        bottom: 10px;
        padding-bottom: 10px;
    }

    .create-character-form {
        gap: 12px;
        padding-bottom: 76px;
    }

    .create-stat-radar {
        min-height: 342px;
        margin-bottom: 20px;
    }

    .create-stat-radar-board {
        width: min(100%, 292px);
        height: 318px;
        min-height: 318px;
    }

    .create-stat-svg {
        width: 156px;
        height: 156px;
        min-width: 156px;
    }

    .create-stat-axis {
        width: 60px;
        min-height: 64px;
    }

    .create-start-btn {
        margin-top: 14px;
    }
}

.podcast-panel {
    display: grid;
    gap: 10px;
    margin: 12px 0 14px;
    padding: 10px;
    border: 1px solid rgba(199, 137, 54, 0.4);
    border-radius: 8px;
    background:
        radial-gradient(circle at 18% 0%, rgba(235, 172, 72, 0.22), transparent 42%),
        linear-gradient(180deg, rgba(31, 18, 13, 0.96), rgba(12, 8, 6, 0.98));
    color: #fff2c2;
    box-shadow: inset 0 0 0 1px rgba(255, 230, 160, 0.12);
}

.podcast-panel-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
}

.podcast-panel-head img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.podcast-panel-head span,
.podcast-panel-head b,
.podcast-target-summary span,
.podcast-target-summary small,
.podcast-round-topic span,
.podcast-result-round span,
.podcast-result-round small {
    color: rgba(255, 244, 209, 0.72);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
}

.podcast-panel-head strong,
.podcast-target-summary strong,
.podcast-round-topic strong,
.podcast-result-round strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #ffe39a;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podcast-panel-head b {
    padding: 5px 7px;
    border: 1px solid rgba(255, 222, 128, 0.28);
    border-radius: 999px;
    background: rgba(255, 236, 171, 0.12);
    color: #ffe39a;
}

.podcast-panel-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.podcast-panel-actions button,
.podcast-row button {
    min-height: 32px;
    border: 1px solid #c88425;
    border-radius: 7px;
    background: linear-gradient(180deg, #ffe487, #f0ab32);
    color: #744716;
    font-size: 10px;
    font-weight: 950;
}

.podcast-panel-actions button:disabled {
    cursor: not-allowed;
    border-color: rgba(255, 226, 143, 0.18);
    background: rgba(255, 246, 211, 0.08);
    color: rgba(255, 247, 216, 0.44);
}

.podcast-image-button {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 54px !important;
    padding: 0 16px;
    border: 0 !important;
    border-radius: 8px;
    background: transparent !important;
    color: #2f1705 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 238, 180, 0.34);
    letter-spacing: 0;
    overflow: hidden;
}

.podcast-panel-actions .podcast-image-button,
.podcast-modal .phase3-modal-actions .podcast-image-button {
    min-height: 54px !important;
}

.podcast-image-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--podcast-button-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: 0;
}

.podcast-image-button > * {
    position: relative;
    z-index: 1;
}

.podcast-image-button:disabled {
    opacity: 0.46;
    filter: grayscale(0.15);
    cursor: not-allowed;
}

.podcast-image-button--cancel {
    color: #ffe9b2 !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42);
}

.podcast-list {
    display: grid;
    gap: 7px;
}

.podcast-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 48px;
    padding: 8px 9px;
    border: 1px solid rgba(255, 226, 143, 0.18);
    border-radius: 8px;
    background: rgba(255, 246, 211, 0.08);
}

.podcast-row.compact {
    min-height: 42px;
}

.podcast-round-topic {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.podcast-round-emblem {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.podcast-round-topic strong,
.podcast-result-round strong {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.podcast-result-round small {
    display: block;
    white-space: normal;
}

.podcast-inline-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}

.podcast-inline-icon.is-end {
    margin-left: auto;
}

.podcast-row strong,
.podcast-row span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podcast-row strong {
    color: #fff2c2;
    font-size: 12px;
    font-weight: 950;
}

.podcast-row span {
    color: rgba(255, 244, 209, 0.68);
    font-size: 10px;
    font-weight: 800;
}

.podcast-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 226, 143, 0.22);
    border-radius: 999px;
    background: rgba(255, 246, 211, 0.08);
    color: rgba(255, 244, 209, 0.72);
    font-size: 10px;
    font-weight: 950;
}

.podcast-rule-panel,
.podcast-read-panel,
.podcast-buff-line,
.podcast-host-line {
    border: 1px solid rgba(255, 226, 143, 0.22);
    border-radius: 8px;
    background: rgba(255, 246, 211, 0.08);
}

.podcast-rule-panel,
.podcast-read-panel {
    display: grid;
    gap: 4px;
    padding: 9px 10px;
}

.podcast-rule-panel.compact {
    padding: 8px 9px;
}

.podcast-rule-panel span,
.podcast-read-panel span {
    color: rgba(255, 244, 209, 0.68);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.podcast-rule-panel strong,
.podcast-read-panel strong {
    color: #ffe39a;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.15;
}

.podcast-rule-panel p,
.podcast-read-panel p {
    margin: 0;
    color: rgba(255, 244, 209, 0.76);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.38;
}

.podcast-leaderboard {
    display: grid;
    gap: 8px;
    margin-top: 2px;
}

.podcast-leaderboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.podcast-leaderboard-head span {
    color: rgba(255, 244, 209, 0.68);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.podcast-leaderboard-head strong {
    color: #ffe39a;
    font-size: 11px;
    font-weight: 950;
}

.podcast-leaderboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.podcast-leaderboard-grid section {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(255, 226, 143, 0.2);
    border-radius: 8px;
    background: rgba(255, 246, 211, 0.07);
}

.podcast-leaderboard-grid h4 {
    margin: 0;
    color: #ffe39a;
    font-size: 10px;
    font-weight: 950;
    line-height: 1.2;
}

.podcast-leader-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    min-height: 34px;
    padding: 5px;
    border-radius: 7px;
    background: rgba(18, 11, 8, 0.42);
}

.podcast-leader-row b {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 226, 143, 0.16);
    color: #ffe39a;
    font-size: 9px;
}

.podcast-leader-row strong,
.podcast-leader-row span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podcast-leader-row strong {
    color: #fff2c2;
    font-size: 10px;
    font-weight: 950;
}

.podcast-leader-row span,
.podcast-leader-empty {
    color: rgba(255, 244, 209, 0.62);
    font-size: 9px;
    font-weight: 800;
}

.podcast-leader-row em {
    color: #ffe39a;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    white-space: nowrap;
}

.podcast-leader-empty {
    padding: 8px 0;
}

.podcast-hub-card {
    border-color: rgba(199, 137, 54, 0.42) !important;
    background: linear-gradient(180deg, rgba(255, 246, 224, 0.9), rgba(238, 212, 164, 0.8)) !important;
}

.podcast-modal-overlay {
    z-index: 24500;
}

.podcast-modal {
    gap: 10px;
    padding: 11px;
    border-color: rgba(236, 176, 76, 0.62);
    background:
        radial-gradient(circle at 50% 0%, rgba(238, 181, 82, 0.18), transparent 46%),
        linear-gradient(180deg, rgba(37, 21, 15, 0.98), rgba(12, 8, 6, 0.98));
    color: #fff3cc;
}

.podcast-modal .phase3-modal-head,
.podcast-modal-head {
    border-color: rgba(255, 226, 143, 0.22);
    background: rgba(18, 11, 8, 0.68);
}

.podcast-modal .phase3-modal-head strong,
.podcast-modal .phase3-form-field span {
    color: #ffe39a;
}

.podcast-modal .phase3-modal-head span,
.podcast-modal .phase3-form-field small {
    color: rgba(255, 244, 209, 0.68);
}

.podcast-modal .phase3-modal-close,
.podcast-modal .phase3-modal-actions button.secondary {
    border-color: rgba(255, 226, 143, 0.24);
    background: rgba(255, 246, 211, 0.1);
    color: #ffe39a;
}

.podcast-modal .phase3-form-field select {
    border-color: rgba(255, 226, 143, 0.28);
    background: rgba(255, 246, 211, 0.12);
    color: #fff3cc;
}

.podcast-hero-head {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 10px 44px 4px;
    text-align: center;
}

.podcast-hero-crest {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

.podcast-hero-copy {
    display: grid;
    gap: 4px;
    justify-items: center;
}

.podcast-hero-copy span {
    color: rgba(255, 236, 184, 0.76);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0;
}

.podcast-hero-copy strong {
    color: #ffd978;
    font-size: clamp(28px, 4.6vw, 42px);
    font-weight: 950;
    line-height: 0.98;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
}

.podcast-hero-copy p {
    max-width: 520px;
    margin: 0;
    color: rgba(255, 244, 209, 0.82);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.38;
}

.podcast-modal .phase3-modal-close {
    position: absolute;
    top: 4px;
    right: 0;
}

.podcast-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    margin-bottom: 4px;
    text-align: center;
}

.podcast-section-title span {
    color: #f4c96a;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0;
}

.podcast-section-title--left {
    justify-content: flex-start;
    text-align: left;
}

.podcast-rule-panel,
.podcast-read-panel,
.podcast-buff-line,
.podcast-host-line,
.podcast-opponent-panel,
.podcast-round-board,
.podcast-target-summary,
.podcast-result-rewards,
.podcast-result-summary-panel,
.podcast-result-showcase,
.podcast-live-choice-panel,
.podcast-live-timer-card {
    border: 1px solid rgba(255, 226, 143, 0.22);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(47, 28, 19, 0.94), rgba(16, 10, 8, 0.96)),
        rgba(255, 246, 211, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 227, 149, 0.08);
}

.podcast-rule-panel,
.podcast-read-panel {
    display: grid;
    gap: 6px;
    padding: 12px;
}

.podcast-rule-panel.compact,
.podcast-rule-panel.live,
.podcast-rule-panel.summary {
    padding: 10px;
}

.podcast-rule-panel span,
.podcast-read-panel span {
    color: rgba(255, 244, 209, 0.68);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.podcast-rule-panel strong,
.podcast-read-panel strong {
    color: #ffe39a;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.18;
}

.podcast-rule-panel p,
.podcast-read-panel p {
    margin: 0;
    color: rgba(255, 244, 209, 0.78);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.42;
}

.podcast-rule-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
}

.podcast-rule-card {
    display: grid;
    gap: 4px;
    justify-items: center;
    padding: 8px 6px;
    border: 1px solid rgba(255, 226, 143, 0.2);
    border-radius: 8px;
    background: rgba(11, 8, 6, 0.5);
    text-align: center;
}

.podcast-rule-card img {
    width: min(100%, 108px);
    aspect-ratio: 3 / 4;
    object-fit: contain;
}

.podcast-rule-card strong {
    font-size: 12px;
}

.podcast-rule-card small {
    color: rgba(255, 244, 209, 0.64);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
}

.podcast-rule-arrow {
    color: #f4c96a;
    font-size: 34px;
    font-weight: 950;
    line-height: 1;
    text-align: center;
    text-shadow: 0 0 12px rgba(244, 201, 106, 0.4);
}

.podcast-opponent-panel,
.podcast-round-board,
.podcast-result-rewards,
.podcast-result-summary-panel,
.podcast-result-showcase,
.podcast-live-choice-panel {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.podcast-select-shell {
    display: block;
}

.podcast-select-shell select {
    min-height: 54px;
    font-size: 17px;
    font-weight: 900;
}

.podcast-opponent-read {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid rgba(255, 226, 143, 0.16);
    border-radius: 8px;
    background: rgba(255, 243, 205, 0.05);
}

.podcast-opponent-read strong {
    color: #ffe39a;
    font-size: 12px;
    font-weight: 950;
}

.podcast-opponent-read p {
    margin: 0;
    color: rgba(255, 244, 209, 0.78);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.42;
}

.podcast-cooldown-strip,
.podcast-live-rule-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 226, 143, 0.16);
    border-radius: 8px;
    background: rgba(8, 6, 5, 0.42);
    text-align: center;
}

.podcast-cooldown-strip span,
.podcast-live-rule-strip span {
    color: rgba(255, 244, 209, 0.82);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
}

.podcast-modal--challenge {
    position: relative;
    width: min(100%, 720px);
    padding: 14px 20px 18px;
    border-color: rgba(255, 226, 143, 0.34);
    background: linear-gradient(180deg, rgba(43, 27, 15, 0.98), rgba(20, 12, 8, 0.98));
    color: #fff7d8;
}

.podcast-modal--challenge .phase3-modal-close {
    top: 10px;
    right: 12px;
    z-index: 4;
}

.podcast-challenge-layout {
    display: grid;
    height: 100%;
    grid-template-rows: 14.6% 23.2% 16.8% 28.8% 5.4% 8.6%;
    align-content: stretch;
    gap: 0;
    overflow: hidden;
}

.podcast-challenge-hero,
.podcast-challenge-ruleboard,
.podcast-challenge-opponent,
.podcast-challenge-topics,
.podcast-challenge-cooldown,
.podcast-challenge-actions {
    position: relative;
    z-index: 1;
}

.podcast-challenge-hero {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 4px 42px 0;
    text-align: center;
}

.podcast-challenge-crest {
    width: 84px;
    height: 84px;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.48));
}

.podcast-challenge-hero strong {
    color: #ffeaa2;
    font-size: clamp(34px, 4.6vw, 56px);
    font-weight: 950;
    line-height: 0.98;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.34);
}

.podcast-challenge-hero span {
    color: rgba(255, 247, 216, 0.68);
    font-size: 18px;
    font-weight: 850;
    line-height: 1.2;
}

.podcast-modal--challenge .phase3-form-error {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 110px;
    z-index: 6;
    margin: 0;
}

.podcast-challenge-ruleboard,
.podcast-challenge-opponent,
.podcast-challenge-topics,
.podcast-challenge-cooldown {
    padding-inline: 20px;
    overflow: hidden;
}

.podcast-challenge-rulecards {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
    overflow: hidden;
}

.podcast-challenge-rule-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 4px 8px;
    border: 1px solid rgba(255, 226, 143, 0.2);
    border-radius: 8px;
    background: rgba(11, 8, 6, 0.5);
    text-align: center;
    overflow: hidden;
}

.podcast-challenge-rule-card img {
    width: min(100%, 96px);
    max-height: 110px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.podcast-challenge-rule-card strong {
    display: block;
    color: #ffe39a;
    font-size: 10px;
    font-weight: 950;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.podcast-challenge-rule-card small {
    display: block;
    color: rgba(255, 244, 209, 0.6);
    font-size: 9px;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.podcast-challenge-rule-arrow {
    color: #f4c96a;
    font-size: 28px;
    font-weight: 950;
    text-align: center;
    text-shadow: 0 0 12px rgba(244, 201, 106, 0.35);
    flex-shrink: 0;
    line-height: 1;
}

.podcast-challenge-opponent .podcast-select-shell,
.podcast-challenge-opponent-read,
.podcast-challenge-topic-list,
.podcast-challenge-cooldown {
    margin-top: 6px;
}

.podcast-challenge-opponent .podcast-select-shell select {
    min-height: 54px;
    padding-inline: 16px 44px;
    border-color: rgba(255, 226, 143, 0.28);
    background: rgba(255, 246, 211, 0.1);
    color: #fff7d8;
    font-size: 15px;
    font-weight: 900;
}

.podcast-challenge-opponent-read {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    color: rgba(255, 247, 216, 0.78);
}

.podcast-challenge-opponent-read p {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.42;
}

.podcast-challenge-topic-list {
    display: grid;
    gap: 8px;
    overflow: hidden;
}

.podcast-challenge-topic-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) minmax(170px, 0.92fr);
    gap: 12px;
    align-items: center;
    min-height: 78px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 226, 143, 0.22);
    border-radius: 8px;
    background: rgba(20, 13, 8, 0.55);
}

.podcast-challenge-topic-mark {
    display: grid;
    place-items: center;
}

.podcast-challenge-topic-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.podcast-challenge-topic-copy span {
    color: rgba(255, 247, 216, 0.58);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.podcast-challenge-topic-copy strong {
    color: #fff7d8;
    font-size: 18px;
    font-weight: 950;
    line-height: 1.12;
}

.podcast-challenge-topic-lock {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.podcast-challenge-topic-lock p {
    margin: 0;
    color: rgba(255, 247, 216, 0.68);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}

.podcast-challenge-cooldown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    color: rgba(255, 247, 216, 0.68);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;
    text-align: center;
}

.podcast-challenge-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.2fr);
    gap: 12px;
    align-items: end;
    padding: 0 18px;
    overflow: hidden;
}

.podcast-flat-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid #c88425;
    border-radius: 7px;
    background: linear-gradient(180deg, #ffe487, #f0ab32);
    color: #744716;
    font-family: inherit;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
    touch-action: manipulation;
    transition: filter 140ms ease, transform 140ms ease;
}

.podcast-flat-button:hover,
.podcast-flat-button:focus-visible {
    filter: brightness(1.06);
    outline: none;
}

.podcast-flat-button:active {
    transform: translateY(1px) scale(0.985);
}

.podcast-flat-button--cancel {
    border-color: rgba(255, 226, 143, 0.24);
    background: rgba(255, 246, 211, 0.08);
    color: #ffeaa2;
}

.podcast-flat-button--submit {
    border-color: #c88425;
    background: linear-gradient(180deg, #ffe487, #f0ab32);
    color: #744716;
}

.podcast-modal--challenge .podcast-image-button {
    min-height: 76px;
    font-size: 20px !important;
}

.podcast-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 2, 1, 0.05), rgba(4, 2, 1, 0.48));
    pointer-events: none;
}

.podcast-stage-host,
.podcast-vs {
    position: relative;
    z-index: 2;
}

.podcast-stage-host {
    height: 150px;
    overflow: hidden;
}

.podcast-stage-host img {
    width: 88%;
    max-width: none;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.podcast-stage-host.right img {
    transform: none;
    transform-origin: center;
}

.podcast-vs {
    align-self: center;
    width: 74px;
    height: 74px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
}

.podcast-target-summary {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
}

.podcast-round-grid {
    display: grid;
    gap: 8px;
}

.podcast-round-card {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(255, 226, 143, 0.2);
    border-radius: 8px;
    background: rgba(255, 246, 211, 0.06);
}

.podcast-round-card p {
    min-height: 34px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 244, 209, 0.74);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}

.podcast-round-card label {
    display: grid;
    gap: 5px;
}

.podcast-result-banner {
    position: relative;
    min-height: 112px;
    overflow: hidden;
    border: 1px solid rgba(255, 226, 143, 0.22);
    border-radius: 8px;
    background: rgba(15, 9, 7, 0.8);
}

.podcast-result-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.92;
}

.podcast-result-banner div {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 3px;
    min-height: 112px;
    align-content: center;
    justify-items: center;
    text-align: center;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(8, 5, 3, 0.2), rgba(8, 5, 3, 0.78));
}

.podcast-result-banner span,
.podcast-result-banner small {
    color: rgba(255, 244, 209, 0.78);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
}

.podcast-result-banner strong {
    color: #ffe39a;
    font-size: 26px;
    font-weight: 950;
    line-height: 1;
}

.podcast-result-effects {
    display: flex;
    justify-content: center;
    height: 54px;
    overflow: visible;
    pointer-events: none;
}

.podcast-result-effects img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    transform: translateY(-18px);
    opacity: 0.82;
}

.podcast-result-list {
    display: grid;
    gap: 8px;
}

.podcast-result-round {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 11px;
    border: 1px solid rgba(255, 226, 143, 0.2);
    border-radius: 8px;
    background: rgba(255, 246, 211, 0.08);
}

.podcast-result-round.win {
    border-color: rgba(255, 217, 95, 0.48);
    background: rgba(122, 78, 19, 0.24);
}

.podcast-result-round.lose {
    border-color: rgba(236, 95, 75, 0.46);
    background: rgba(103, 31, 20, 0.24);
}

.podcast-result-round.draw {
    border-color: rgba(180, 179, 166, 0.34);
}

.podcast-result-round p {
    margin: 0;
    color: rgba(255, 244, 209, 0.76);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}

.podcast-result-round.pending {
    border-color: rgba(180, 179, 166, 0.22);
}

.podcast-result-round-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.podcast-result-round-index {
    display: grid;
    place-items: center;
}

.podcast-result-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.podcast-result-status.win {
    background: rgba(133, 197, 76, 0.18);
    color: #9ef07b;
}

.podcast-result-status.lose {
    background: rgba(221, 90, 77, 0.18);
    color: #ff998a;
}

.podcast-result-status.draw,
.podcast-result-status.pending {
    background: rgba(221, 190, 102, 0.14);
    color: #f0d58c;
}

.podcast-result-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.podcast-result-badges span {
    padding: 5px 8px;
    border: 1px solid rgba(255, 217, 95, 0.38);
    border-radius: 999px;
    background: rgba(122, 78, 19, 0.22);
    color: #ffe39a;
    font-size: 10px;
    font-weight: 950;
}

.podcast-result-modal {
    gap: 12px;
}

.podcast-result-scorecase {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 16px 14px 14px;
    border: 1px solid rgba(255, 226, 143, 0.24);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 212, 101, 0.24), transparent 42%),
        linear-gradient(180deg, rgba(43, 24, 18, 0.96), rgba(13, 8, 6, 0.98));
    text-align: center;
}

.podcast-result-scorecase.victory {
    box-shadow: inset 0 1px 0 rgba(255, 227, 149, 0.1), 0 0 24px rgba(255, 196, 73, 0.08);
}

.podcast-result-scorecase.defeat {
    background:
        radial-gradient(circle at 50% 0%, rgba(219, 114, 79, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(43, 24, 18, 0.96), rgba(13, 8, 6, 0.98));
}

.podcast-result-scorecase.defeat .podcast-result-outcome {
    color: #ffb090;
    text-shadow: 0 0 18px rgba(255, 128, 86, 0.16);
}

.podcast-result-scorecase.draw .podcast-result-outcome {
    color: #f3d183;
}

.podcast-result-outcome {
    color: #ffd978;
    font-size: clamp(32px, 5.5vw, 54px);
    font-weight: 950;
    line-height: 0.98;
    text-shadow: 0 0 18px rgba(255, 200, 80, 0.22);
}

.podcast-result-scoreline {
    padding: 5px 16px;
    border: 1px solid rgba(255, 226, 143, 0.18);
    border-radius: 999px;
    background: rgba(9, 7, 5, 0.58);
    color: #f2d486;
    font-size: 14px;
    font-weight: 950;
}

.podcast-result-meta {
    color: rgba(255, 244, 209, 0.72);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.35;
}

.podcast-result-showdown {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 98px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.podcast-result-card {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 10px;
    border: 1px solid rgba(255, 226, 143, 0.18);
    border-radius: 8px;
    background: rgba(8, 6, 5, 0.45);
    text-align: center;
}

.podcast-result-card img {
    width: min(100%, 148px);
    aspect-ratio: 3 / 4;
    object-fit: contain;
}

.podcast-result-card strong {
    color: #fff1bd;
    font-size: 13px;
    font-weight: 950;
}

.podcast-result-card small {
    color: rgba(255, 244, 209, 0.7);
    font-size: 10px;
    font-weight: 900;
}

.podcast-result-vs {
    width: 98px;
    height: 98px;
    object-fit: contain;
    justify-self: center;
}

.podcast-result-highlight {
    margin: 0;
    color: rgba(255, 244, 209, 0.8);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.42;
    text-align: center;
}

.podcast-reward-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.podcast-reward-card {
    display: grid;
    gap: 5px;
    align-content: start;
    min-height: 132px;
    padding: 10px;
    border: 1px solid rgba(255, 226, 143, 0.18);
    border-radius: 8px;
    background: rgba(7, 5, 4, 0.45);
}

.podcast-reward-card span {
    color: rgba(255, 244, 209, 0.68);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.podcast-reward-card strong {
    color: #a8f36c;
    font-size: 27px;
    font-weight: 950;
    line-height: 1;
}

.podcast-reward-card small {
    color: rgba(255, 244, 209, 0.76);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}

.podcast-live-modal {
    width: min(680px, calc(100vw - 20px));
}

.podcast-live-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px minmax(0, 1fr);
    align-items: end;
    min-height: 260px;
    overflow: hidden;
    border: 1px solid rgba(255, 226, 143, 0.24);
    border-radius: 8px;
    background: #120907;
}

.podcast-live-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 2, 1, 0.08), rgba(4, 2, 1, 0.55));
    pointer-events: none;
}

.podcast-live-center {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    align-self: center;
}

.podcast-live-center .podcast-vs {
    width: 112px;
    height: 112px;
    animation: podcastVsPulse 1.1s ease-in-out infinite;
}

.podcast-live-impact {
    position: absolute;
    width: 112px;
    max-width: none;
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
}

.podcast-live-stage.is-revealed .podcast-live-impact {
    opacity: 0.82;
    animation: podcastImpactBurst 0.72s ease-out both;
}

.podcast-live-stage.is-revealed .podcast-live-participant.left {
    animation: podcastHostBumpLeft 0.55s ease-out both;
}

.podcast-live-stage.is-revealed .podcast-live-participant.right {
    animation: podcastHostBumpRight 0.55s ease-out both;
}

.podcast-live-participant {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    align-self: end;
    gap: 8px;
    padding: 10px 10px 14px;
}

.podcast-live-avatar {
    width: min(100%, 186px);
    height: 174px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.42));
}

.podcast-live-participant.right .podcast-live-avatar {
    transform: scaleX(-1);
}

.podcast-live-nameplate {
    display: grid;
    gap: 3px;
    min-width: min(100%, 190px);
    padding: 8px 10px;
    border: 1px solid rgba(255, 226, 143, 0.18);
    border-radius: 8px;
    background: rgba(8, 6, 5, 0.64);
    text-align: center;
}

.podcast-live-nameplate strong {
    color: #fff1bd;
    font-size: 12px;
    font-weight: 950;
}

.podcast-live-nameplate span {
    color: rgba(255, 244, 209, 0.64);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.podcast-live-topic-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 226, 143, 0.2);
    border-radius: 8px;
    background: rgba(15, 11, 9, 0.68);
    color: #f3d183;
    font-size: 17px;
    font-weight: 950;
    line-height: 1.2;
    text-align: center;
}

.podcast-live-timer-card {
    display: grid;
    grid-template-columns: 146px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px;
}

.podcast-live-timer-ring {
    --podcast-timer-progress: 360deg;
    position: relative;
    display: grid;
    place-items: center;
    width: 128px;
    height: 128px;
    margin-inline: auto;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(18, 11, 8, 0.94) 60%, transparent 61%),
        conic-gradient(#f1b94d 0deg var(--podcast-timer-progress), rgba(255, 226, 143, 0.12) var(--podcast-timer-progress) 360deg);
    box-shadow: inset 0 0 0 1px rgba(255, 226, 143, 0.2);
}

.podcast-live-timer-ring::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255, 226, 143, 0.16);
    border-radius: 50%;
}

.podcast-live-timer-ring strong {
    color: #ffd978;
    font-size: 44px;
    font-weight: 950;
    line-height: 0.9;
}

.podcast-live-timer-ring span {
    color: rgba(255, 244, 209, 0.82);
    font-size: 11px;
    font-weight: 900;
    text-transform: lowercase;
}

.podcast-live-timer-copy {
    display: grid;
    gap: 5px;
}

.podcast-live-timer-copy strong {
    color: #ffe39a;
    font-size: 18px;
    font-weight: 950;
    line-height: 1.1;
}

.podcast-live-timer-copy p,
.podcast-live-timer-copy small {
    margin: 0;
    color: rgba(255, 244, 209, 0.78);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.42;
}

.podcast-live-topic span,
.podcast-live-round-tab span,
.podcast-live-card-slot span,
.podcast-live-wait span,
.podcast-live-timer-copy small {
    color: rgba(255, 244, 209, 0.68);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.podcast-host-line {
    padding: 9px 10px;
    color: rgba(255, 226, 143, 0.86);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
}

.podcast-live-topic strong,
.podcast-live-wait strong {
    color: #ffe39a;
    font-size: 15px;
    font-weight: 950;
    line-height: 1.15;
}

.podcast-live-topic p {
    margin: 0;
    color: rgba(255, 244, 209, 0.78);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.38;
}

.podcast-live-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.podcast-buff-line {
    padding: 9px 10px;
    border-color: rgba(128, 226, 178, 0.38);
    background: rgba(61, 132, 92, 0.18);
    color: #c8ffdc;
    font-size: 11px;
    font-weight: 950;
    line-height: 1.35;
}

.podcast-live-card-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.podcast-live-card-slot {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 8px;
    min-height: 82px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(255, 226, 143, 0.22);
    border-radius: 8px;
    background: rgba(255, 246, 211, 0.08);
}

.podcast-live-card-slot.revealed {
    border-color: rgba(255, 217, 95, 0.58);
    background: rgba(124, 78, 18, 0.28);
    animation: podcastCardFlip 0.48s ease-out both;
}

.podcast-live-card-slot strong {
    color: #fff1bd;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.15;
}

.podcast-live-card-slot small {
    display: block;
    margin-top: 2px;
    color: rgba(255, 244, 209, 0.64);
    font-size: 10px;
    font-weight: 850;
    line-height: 1.35;
}

.podcast-live-card-slot > div {
    min-width: 0;
}

.podcast-live-card-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.podcast-live-round-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.podcast-live-round-tab {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 46px;
    align-items: center;
    border: 1px solid rgba(255, 226, 143, 0.2);
    border-radius: 8px;
    background: rgba(255, 246, 211, 0.07);
    padding: 6px 8px;
}

.podcast-live-round-tab.active {
    border-color: rgba(255, 217, 95, 0.55);
    background: rgba(122, 78, 19, 0.22);
}

.podcast-live-round-tab > div {
    min-width: 0;
}

.podcast-live-round-tab strong {
    color: #ffe39a;
    font-size: 11px;
    font-weight: 950;
}

.podcast-live-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.podcast-live-choice {
    display: grid;
    gap: 6px;
    min-height: 204px;
    padding: 12px;
    border: 1px solid rgba(255, 226, 143, 0.28);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(44, 24, 18, 0.96), rgba(18, 10, 8, 0.96));
    color: #fff1bd;
    text-align: left;
}

.podcast-live-choice-art {
    width: 76px;
    height: 98px;
    object-fit: contain;
    justify-self: center;
}

.podcast-live-choice:hover {
    border-color: rgba(255, 217, 95, 0.78);
    transform: translateY(-1px);
}

.podcast-live-choice span {
    color: #ffe39a;
    font-size: 13px;
    font-weight: 950;
}

.podcast-live-choice strong {
    color: rgba(255, 244, 209, 0.72);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.podcast-live-choice small {
    color: rgba(255, 244, 209, 0.74);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.podcast-live-choice em {
    margin-top: auto;
    color: rgba(255, 220, 132, 0.84);
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.podcast-live-wait {
    display: grid;
    gap: 5px;
    min-height: 72px;
    place-items: center;
    padding: 12px;
    border: 1px dashed rgba(255, 226, 143, 0.26);
    border-radius: 8px;
    background: rgba(255, 246, 211, 0.06);
    text-align: center;
}

@keyframes podcastVsPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55)); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 18px rgba(255, 207, 91, 0.72)); }
}

@keyframes podcastImpactBurst {
    0% { opacity: 0; transform: scale(0.35) rotate(-8deg); }
    45% { opacity: 0.92; transform: scale(1.18) rotate(2deg); }
    100% { opacity: 0.38; transform: scale(1) rotate(0deg); }
}

@keyframes podcastHostBumpLeft {
    0% { transform: translateX(0); }
    45% { transform: translateX(-8px); }
    100% { transform: translateX(0); }
}

@keyframes podcastHostBumpRight {
    0% { transform: translateX(0); }
    45% { transform: translateX(8px); }
    100% { transform: translateX(0); }
}

@keyframes podcastCardFlip {
    0% { transform: rotateY(72deg) scale(0.94); opacity: 0.3; }
    100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}

@media (max-width: 480px) {
    .podcast-panel-actions,
    .podcast-row {
        grid-template-columns: 1fr;
    }

    .podcast-row button {
        width: 100%;
    }

    .podcast-stage {
        grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
        min-height: 148px;
    }

    .podcast-stage-host {
        height: 126px;
    }

    .podcast-stage-host img {
        width: 92%;
    }

    .podcast-vs {
        width: 58px;
        height: 58px;
    }

    .podcast-image-button {
        min-height: 48px;
        font-size: 17px !important;
        padding: 0 11px;
    }

    .podcast-leaderboard-grid {
        grid-template-columns: 1fr;
    }

    .podcast-hero-copy strong,
    .podcast-result-outcome {
        font-size: 26px;
    }

    .podcast-rule-showcase,
    .podcast-result-showdown,
    .podcast-reward-grid,
    .podcast-live-timer-card {
        grid-template-columns: 1fr;
    }

    .podcast-rule-arrow,
    .podcast-result-vs {
        display: none;
    }

    .podcast-live-avatar {
        width: min(100%, 122px);
        height: 128px;
    }

    .podcast-live-stage {
        grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
        min-height: 192px;
    }

    .podcast-live-center .podcast-vs {
        width: 62px;
        height: 62px;
    }

    .podcast-live-impact {
        width: 88px;
    }

    .podcast-live-choices,
    .podcast-live-card-row,
    .podcast-live-meta-grid {
        grid-template-columns: 1fr;
    }

    .podcast-modal--challenge {
        width: calc(100vw - 12px);
        padding: 10px 10px 12px;
        background-size: cover;
    }

    .podcast-challenge-layout {
        gap: 10px;
    }

    .podcast-challenge-hero {
        padding: 10px 26px 0;
    }

    .podcast-challenge-crest {
        width: 62px;
        height: 62px;
    }

    .podcast-challenge-hero strong {
        font-size: 28px;
    }

    .podcast-challenge-hero span {
        font-size: 14px;
    }

    .podcast-challenge-ruleboard,
    .podcast-challenge-opponent,
    .podcast-challenge-topics,
    .podcast-challenge-cooldown {
        padding-inline: 8px;
    }

    .podcast-challenge-rulecards {
        gap: 4px;
    }

    .podcast-challenge-rule-card {
        padding: 5px 3px 6px;
    }

    .podcast-challenge-rule-card img {
        width: min(100%, 58px);
        max-height: 72px;
    }

    .podcast-challenge-rule-card strong {
        font-size: 9px;
    }

    .podcast-challenge-rule-card small {
        display: none;
    }

    .podcast-challenge-rule-arrow {
        font-size: 20px;
    }

    .podcast-challenge-topic-row {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .podcast-challenge-topic-lock {
        grid-column: 1 / -1;
    }

    .podcast-challenge-actions {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 0 8px;
    }

    .podcast-flat-button {
        min-height: 44px;
        font-size: 12px;
    }

    .podcast-modal--challenge .podcast-image-button {
        min-height: 58px;
        font-size: 17px !important;
    }

    .podcast-result-round {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .podcast-result-status {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* Runtime frame and modal stabilization. Keep every in-game layer centered inside
   the phone-sized frame, even when the browser viewport is much wider. */
body.game-runtime,
.game-shell {
    place-content: center;
}

body.game-runtime {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

.game-shell {
    min-height: 100vh;
    min-height: 100dvh;
}

.dashboard-stage,
.onboarding-stage,
.game-state-stage {
    margin: 0 auto;
}

.vip-modal,
.ui-modal-overlay,
.required-whatsapp-modal,
.city-place-modal-overlay,
.phase3-modal-overlay,
.podcast-modal-overlay,
.game-confirm-overlay,
.result-overlay,
.obtained-overlay,
.event-modal,
.dashboard-player-menu-overlay,
.public-leader-profile-modal,
.beginner-tutorial-overlay {
    left: 50% !important;
    right: auto !important;
    width: var(--game-frame-width) !important;
    min-width: 0 !important;
    height: 100vh;
    height: 100dvh;
    padding: var(--game-frame-modal-padding-y) var(--game-frame-modal-padding-x) !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box;
}

.vip-modal-card,
.settings-modal-card,
.character-profile-modal-card,
.game-confirm-card,
.phase3-modal,
.podcast-modal,
.ui-modal-card,
.public-leader-profile-card,
.quest-phase-modal-card,
.result-card,
.obtained-card,
.event-modal-card,
.required-whatsapp-card,
.city-place-modal {
    width: min(100%, var(--game-frame-modal-width)) !important;
    max-width: var(--game-frame-modal-width) !important;
    min-width: 0;
    max-height: calc(100dvh - (var(--game-frame-modal-padding-y) * 2));
    box-sizing: border-box;
}

#modal-mall.vip-modal {
    width: min(720px, calc(100vw - 24px)) !important;
    --game-frame-modal-width: min(680px, calc(100vw - 32px));
}

#modal-mall .vip-mall-card {
    width: min(680px, calc(100vw - 32px)) !important;
    max-width: min(680px, calc(100vw - 32px)) !important;
}

#modal-mall .vip-mall-head {
    gap: 6px;
    padding-bottom: 6px;
}

#modal-mall .vip-mall-content {
    display: grid;
    gap: 6px;
}

#modal-mall .vip-mall-tabs {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow-x: visible;
    padding-bottom: 0;
}

#modal-mall .vip-mall-tab {
    min-width: 0;
    padding-inline: 7px;
    white-space: normal;
}

#modal-mall .vip-mall-grid {
    grid-template-columns: 1fr;
    gap: 6px;
    max-width: 430px;
    margin-inline: auto;
}

#modal-mall .vip-mall-banner-grid {
    grid-template-columns: 1fr;
}

#modal-mall .vip-mall-topup-grid {
    grid-template-columns: 1fr;
    gap: 5px;
    max-width: 300px;
    margin-inline: auto;
    justify-items: center;
}

#modal-mall .topup-image-tier {
    width: min(100%, 280px);
    min-height: 0;
    padding: 0;
    margin: 0;
}

#modal-mall .vip-mall-item {
    min-height: 46px;
}

#modal-mall .vip-mall-item-copy b,
#modal-mall .vip-mall-item-copy small,
#modal-mall .vip-mall-item-copy em {
    white-space: normal;
    text-overflow: initial;
    overflow: visible;
}

@media (min-width: 760px) {
    .podcast-modal--challenge {
        width: min(748px, calc((100dvh - 24px) * 0.7186)) !important;
        max-width: min(748px, calc((100dvh - 24px) * 0.7186)) !important;
        height: min(calc(100dvh - 24px), 1040px) !important;
        max-height: min(calc(100dvh - 24px), 1040px) !important;
        min-height: min(calc(100dvh - 24px), 1040px) !important;
        aspect-ratio: 960 / 1336;
        overflow: hidden !important;
        padding: 16px 22px 18px;
    }

    .podcast-modal--challenge .podcast-challenge-layout {
        height: 100%;
        grid-template-rows: 13% auto auto 1fr 6% 10%;
        align-content: stretch;
        gap: 0;
    }

    .podcast-modal--challenge .phase3-form-error[hidden] {
        display: none;
    }

    .podcast-modal--challenge .phase3-form-error:not([hidden]) {
        position: absolute;
        left: 26px;
        right: 26px;
        top: 140px;
        z-index: 5;
    }

    .podcast-modal--challenge .podcast-challenge-ruleboard {
        padding-top: 18px;
    }

    .podcast-modal--challenge .podcast-challenge-opponent {
        padding-top: 18px;
    }

    .podcast-modal--challenge .podcast-challenge-topics {
        padding-top: 16px;
    }

    .podcast-modal--challenge .podcast-challenge-cooldown {
        padding-top: 8px;
    }

    .podcast-modal--challenge .podcast-challenge-actions {
        align-self: end;
        padding-top: 8px;
    }

    #modal-mall.vip-modal {
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        min-width: 100vw !important;
        transform: none !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 24px !important;
    }

    #modal-mall .vip-mall-card {
        margin: auto !important;
    }

    .phase3-modal-overlay.podcast-live-overlay,
    .podcast-modal-overlay.podcast-live-overlay {
        width: min(1120px, calc(100vw - 48px)) !important;
        --game-frame-modal-width: min(1080px, calc(100vw - 80px));
        padding-inline: 20px !important;
    }

    .podcast-live-overlay .podcast-live-modal {
        width: min(1080px, calc(100vw - 80px)) !important;
        max-width: min(1080px, calc(100vw - 80px)) !important;
    }

    .podcast-live-overlay .podcast-live-stage {
        grid-template-columns: minmax(260px, 1fr) 148px minmax(260px, 1fr);
        min-height: 320px;
    }

    .podcast-live-overlay .podcast-live-card-row {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .podcast-live-overlay .podcast-live-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 759px) {
    #modal-mall.vip-modal {
        width: 100vw !important;
        --game-frame-modal-width: calc(100vw - 16px);
    }

    #modal-mall .vip-mall-card {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }

    #modal-mall .vip-mall-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #modal-mall .vip-mall-grid,
    #modal-mall .vip-mall-banner-grid {
        grid-template-columns: 1fr;
    }

    #modal-mall .vip-mall-topup-grid {
        max-width: 290px;
    }

    .topup-image-tier {
        width: min(100%, 280px);
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 759px) {
    :root {
        --game-frame-width: 100vw;
        --game-frame-modal-width: calc(100vw - 16px);
        --game-frame-modal-padding-x: 8px;
        --game-frame-modal-padding-y: 8px;
        --game-frame-modal-padding: var(--game-frame-modal-padding-y) var(--game-frame-modal-padding-x);
    }

    body.game-runtime {
        display: block;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .game-shell {
        display: block;
        width: 100vw;
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0;
    }

    .dashboard-stage,
    .onboarding-stage,
    .game-state-stage {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: none;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .vip-modal,
    .ui-modal-overlay,
    .required-whatsapp-modal,
    .city-place-modal-overlay,
    .phase3-modal-overlay,
    .podcast-modal-overlay,
    .game-confirm-overlay,
    .result-overlay,
    .obtained-overlay,
    .event-modal,
    .dashboard-player-menu-overlay,
    .public-leader-profile-modal,
    .beginner-tutorial-overlay {
        left: 0 !important;
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        transform: none !important;
    }

    .dashboard-map {
        object-position: center center !important;
    }

    .dashboard-clouds {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: clamp(96px, 17vh, 150px) !important;
        max-height: none !important;
        z-index: 2 !important;
        pointer-events: none !important;
        overflow: hidden !important;
        transform: none !important;
        transform-origin: top left !important;
        transition: filter 0.4s ease, brightness 0.4s ease;
        contain: layout paint;
    }

    .dashboard-clouds::before,
    .dashboard-clouds::after {
        width: 230vw;
        height: 160%;
    }

    .dashboard-footer-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 0 !important;
        height: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 5px 6px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box !important;
        background:
            linear-gradient(180deg, rgba(108, 71, 34, 0.94), rgba(57, 34, 17, 0.98)),
            radial-gradient(circle at 50% 0%, rgba(255, 226, 143, 0.13), transparent 62%) !important;
    }

    .dashboard-footer-btn {
        grid-template-rows: 32px 13px !important;
        gap: 2px !important;
        padding: 3px 2px 4px !important;
    }

    .dashboard-footer-btn .dashboard-button-art {
        --button-art-size: 31px;
    }

    .dashboard-footer-btn b {
        font-size: 9px !important;
        line-height: 1 !important;
    }

    .custom-modal-overlay {
        backdrop-filter: blur(8px) !important;
        background-color: rgba(19, 11, 5, 0.4);
    }
}

@media (max-width: 759px) and (max-height: 720px) {
    .dashboard-footer-nav {
        height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 4px 5px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .dashboard-footer-btn {
        grid-template-rows: 28px 12px !important;
        gap: 1px !important;
    }

    .dashboard-footer-btn .dashboard-button-art {
        --button-art-size: 28px;
    }

    .dashboard-footer-btn b {
        font-size: 8px !important;
    }
}

@media (min-width: 760px) {
    body.game-runtime {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .game-shell {
        position: fixed;
        left: 0;
        top: 0;
        display: block;
        width: 100vw;
        height: 100dvh;
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        transform: none;
    }

    .dashboard-stage,
    .onboarding-stage,
    .game-state-stage {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        z-index: 10 !important;
    }



    .ui-modal-overlay,
    .result-overlay,
    .obtained-overlay,
    .city-place-modal-overlay,
    .podcast-modal-overlay,
    .game-confirm-overlay {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .ui-modal-card,
    .result-card,
    .obtained-modal,
    .city-place-modal,
    .game-confirm-card {
        margin: auto !important;
    }

    .dashboard-map,
    .dashboard-vignette {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        object-fit: cover !important;
        z-index: 1 !important;
        pointer-events: none;
        transition: filter 0.4s ease, brightness 0.4s ease;
    }

    .dashboard-clouds {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: clamp(138px, 20vh, 210px) !important;
        max-height: none !important;
        z-index: 2 !important;
        pointer-events: none !important;
        overflow: hidden !important;
        transform: none !important;
        transform-origin: top left !important;
        transition: filter 0.4s ease, brightness 0.4s ease;
        contain: layout paint;
    }

    .dashboard-clouds::before,
    .dashboard-clouds::after {
        width: 230vw;
        height: 160%;
    }

    .dashboard-map {
        object-position: center !important;
    }

    .dashboard-stage:not([data-dashboard-page="beranda"]) .dashboard-map,
    .dashboard-stage:not([data-dashboard-subtab="kota"]) .dashboard-map,
    .dashboard-stage:not([data-dashboard-page="beranda"]) .dashboard-clouds,
    .dashboard-stage:not([data-dashboard-subtab="kota"]) .dashboard-clouds {
        filter: blur(12px) brightness(0.6) !important;
    }

    .top-bar,
    .dashboard-profile {
        position: fixed !important;
        top: 20px !important;
        left: 20px !important;
        width: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        z-index: 50 !important;
    }

    .character-panel .char-portrait {
        position: fixed !important;
        top: 80px !important;
        left: 20px !important;
        z-index: 60 !important;
        width: 80px;
        height: 80px;
        margin: 0 !important;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    }
    
    .character-panel .char-portrait .rank-badge {
        bottom: -10px;
    }

    .dashboard-profile {
        grid-template-columns: 118px minmax(0, 1fr) !important;
        width: 264px !important;
        min-height: 138px !important;
        padding: 8px 10px 24px !important;
        align-items: start !important;
    }

    .dashboard-avatar-frame {
        width: 118px !important;
        height: 132px !important;
        overflow: hidden !important;
        border-radius: 8px !important;
    }

    .dashboard-avatar {
        left: -44px !important;
        top: -7px !important;
        width: 190px !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center top !important;
        clip-path: inset(0 34px 156px 50px) !important;
        -webkit-clip-path: inset(0 34px 156px 50px) !important;
    }

    .dashboard-avatar.is-female {
        left: -23px !important;
        top: -9px !important;
        width: 179px !important;
        clip-path: inset(0 32px 232px 31px) !important;
        -webkit-clip-path: inset(0 32px 232px 31px) !important;
    }

    .dashboard-avatar-frame::after {
        inset: -2px !important;
    }

    .dashboard-profile-copy {
        padding: 11px 0 0 10px !important;
    }

    .dashboard-profile-copy strong {
        font-size: 16px !important;
        line-height: 1.08 !important;
    }

    .dashboard-profile-copy span {
        margin-top: 6px !important;
        font-size: 13px !important;
    }

    .dashboard-profile-copy .dashboard-profile-job {
        font-size: 13px !important;
    }

    .dashboard-profile-copy .dashboard-profile-title-text {
        margin-top: 6px !important;
        font-size: 11px !important;
    }

    .dashboard-title-ribbon {
        top: 119px !important;
        left: 30px !important;
        width: 78px !important;
        max-width: 78px !important;
        font-size: 7.5px !important;
        line-height: 12px !important;
    }

    .dashboard-side-nav {
        position: fixed !important;
        top: 180px !important;
        left: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 50 !important;
        gap: 8px !important;
    }

    .character-panel {
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        max-width: 340px !important;
        height: auto !important;
        z-index: 50 !important;
        background: rgba(18, 12, 8, 0.85) !important;
        backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 219, 126, 0.15) !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
        padding: 16px !important;
    }
    
    .dashboard-resources {
        position: fixed !important;
        top: 20px !important;
        right: 40px !important;
        width: auto !important;
        z-index: 50 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 8px !important;
    }
    
    .character-detail-stack {
        display: block !important;
    }
    
    .character-info-toggle {
        display: none !important;
    }

    .beginner-action-card-wrap {
        width: min(480px, var(--game-frame-modal-width)) !important;
        margin: auto !important;
    }

    .dashboard-build-btn {
        position: fixed !important;
        bottom: 100px !important;
        right: 40px !important;
        z-index: 50 !important;
        width: 70px !important;
        height: 70px !important;
    }
    
    .dashboard-quest-bar {
        position: fixed !important;
        bottom: 110px !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        width: 400px !important;
        z-index: 60 !important;
    }

    .dashboard-page-panel {
        position: fixed !important;
        top: 120px !important;
        bottom: 120px !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        width: 600px !important;
        z-index: 80 !important;
        overflow-y: auto !important;
        pointer-events: auto !important;
    }
    
    .dashboard-resource {
        grid-template-columns: 34px minmax(0, 1fr) 20px !important;
        padding: 4px 12px 4px 5px !important;
        border-radius: 30px !important;
        background: rgba(0, 0, 0, 0.6) !important;
        border: 1px solid rgba(255, 219, 126, 0.2) !important;
        gap: 8px !important;
        min-height: 40px !important;
        min-width: 210px !important;
    }
    
    .dashboard-resource strong {
        font-size: 15px !important;
    }
    
    .dashboard-resource .dashboard-button-art {
        --button-art-size: 28px;
        width: 29px !important;
        height: 28px !important;
        overflow: hidden !important;
    }

    .dashboard-resource-uang .dashboard-button-art {
        width: 35px !important;
        height: 28px !important;
    }

    .dashboard-resource strong {
        justify-self: end !important;
        text-align: right !important;
    }

    .dashboard-resource button {
        width: 20px !important;
        height: 20px !important;
        font-size: 14px !important;
    }

    .game-loading-card {
        width: 360px !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        right: auto !important;
    }

    .dashboard-inventory-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        padding-top: 76px !important;
        gap: 2px !important;
    }

    .dashboard-inventory-item.empty-slot {
        display: none !important;
    }

    .dashboard-inventory-tabs {
        display: flex !important;
        justify-content: flex-end !important;
        gap: 6px !important;
    }

    .dashboard-inventory-tabs button {
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 auto !important;
    }
    
    .desktop-nav,
    .dashboard-footer-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 78px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
        box-sizing: border-box !important;
        background:
            linear-gradient(180deg, rgba(108, 71, 34, 0.94), rgba(57, 34, 17, 0.98)),
            radial-gradient(circle at 50% 0%, rgba(255, 226, 143, 0.13), transparent 62%) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        backdrop-filter: blur(10px) !important;
        border-top: 1px solid rgba(255, 216, 112, 0.5) !important;
        z-index: 100 !important;
        padding: 6px 0 8px !important;
    }

    .dashboard-footer-nav {
        bottom: 3px !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 86px)) !important;
        justify-content: center !important;
        overflow: visible !important;
        padding-bottom: 10px !important;
    }

    .desktop-nav .nav-tab,
    .dashboard-footer-nav button,
    .dashboard-footer-nav a {
        flex: 0 0 86px !important;
        width: 100% !important;
        height: 62px !important;
        position: relative !important;
        margin: 0 !important;
        border-right: 1px solid rgba(255, 222, 127, 0.18) !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    .dashboard-footer-nav button:last-child,
    .dashboard-footer-nav a:last-child {
        border-right: 0 !important;
    }

    .dashboard-footer-nav button .dashboard-button-art {
        --button-art-size: 34px;
        width: 34px !important;
        height: 34px !important;
        transform: none !important;
    }

    .dashboard-footer-nav button b {
        font-size: 11px !important;
        line-height: 1.05 !important;
        transform: none !important;
    }

    .dashboard-footer-nav button::before,
    .dashboard-footer-nav a::before {
        top: -3px !important;
        bottom: -2px !important;
        left: -6px !important;
        right: -6px !important;
    }

    .vip-modal,
    .ui-modal-overlay,
    .required-whatsapp-modal,
    .city-place-modal-overlay,
    .phase3-modal-overlay,
    .podcast-modal-overlay,
    .game-confirm-overlay,
    .result-overlay,
    .obtained-overlay,
    .event-modal,
    .dashboard-player-menu-overlay,
    .public-leader-profile-modal,
    .beginner-tutorial-overlay {
        left: 0 !important;
        top: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        transform: none !important;
    }

    .vip-modal-card,
    .settings-modal-card,
    .character-profile-modal-card,
    .game-confirm-card,
    .phase3-modal,
    .podcast-modal,
    .ui-modal-card,
    .public-leader-profile-card,
    .quest-phase-modal-card,
    .result-card,
    .obtained-card,
    .event-modal-card,
    .required-whatsapp-card,
    .city-place-modal {
        max-height: calc(100vh - 40px) !important;
    }

    .vip-modal-card,
    .ui-modal-card,
    .required-whatsapp-card,
    .city-place-modal,
    .phase3-modal,
    .podcast-modal,
    .game-confirm-card,
    .result-card,
    .obtained-card,
    .event-modal-card {
        cursor: grab;
        will-change: transform;
    }

    .vip-modal-card button,
    .ui-modal-card button,
    .required-whatsapp-card button,
    .city-place-modal button,
    .phase3-modal button,
    .podcast-modal button,
    .game-confirm-card button,
    .result-card button,
    .obtained-card button,
    .event-modal-card button,
    .vip-modal-card input,
    .ui-modal-card input,
    .required-whatsapp-card input,
    .city-place-modal input,
    .phase3-modal input,
    .podcast-modal input,
    .game-confirm-card input,
    .event-modal-card input,
    .vip-modal-card select,
    .ui-modal-card select,
    .required-whatsapp-card select,
    .city-place-modal select,
    .phase3-modal select,
    .podcast-modal select,
    .event-modal-card select,
    .vip-modal-card textarea,
    .ui-modal-card textarea,
    .required-whatsapp-card textarea,
    .city-place-modal textarea,
    .phase3-modal textarea,
    .podcast-modal textarea,
    .event-modal-card textarea {
        cursor: auto;
    }

    .is-frame-dragging {
        cursor: grabbing !important;
        user-select: none;
    }
}

@media (min-width: 760px) {
    .vip-modal-card.character-profile-modal-card,
    .character-profile-modal-card {
        width: min(720px, calc(100vw - 48px)) !important;
        max-width: 720px !important;
    }

    .character-profile-showcase {
        grid-template-columns: 240px minmax(0, 1fr);
        min-height: 258px;
        gap: 14px;
        padding: 11px;
    }

    .character-profile-fullbody-panel {
        min-height: 236px;
    }

    .character-profile-fullbody {
        width: min(232px, 100%);
        height: 248px;
    }

    .character-profile-fullbody.is-female {
        width: min(236px, 100%);
    }

    .character-profile-rank-pill {
        bottom: 9px;
    }

    .phase3-modal:not(.podcast-modal) {
        width: min(520px, calc(100vw - 48px)) !important;
        max-width: 520px !important;
    }

    .create-character-panel {
        width: min(520px, calc(100vw - 48px)) !important;
        max-width: 520px !important;
        margin: auto;
    }

    .game-confirm-card {
        width: min(420px, calc(100vw - 48px)) !important;
        max-width: 420px !important;
    }

    .character-profile-modern .character-profile-stat-row {
        grid-template-columns: 30px minmax(0, 1fr) 42px 36px !important;
        padding-right: 5px !important;
    }
}

@media (max-width: 759px) {
    .create-character-screen {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        max-height: none;
        overflow: hidden;
    }

    .create-character-screen .dashboard-map {
        transform: none;
        object-fit: cover;
        object-position: center center;
    }

    .create-character-screen .onboarding-topbar {
        top: 6px;
        left: 6px;
        right: 6px;
        min-height: 42px;
        padding: 5px 6px;
        gap: 6px;
    }

    .create-character-screen .onboarding-topbar .top-bar-logo {
        width: 30px;
        height: 30px;
    }

    .create-character-screen .onboarding-topbar .top-bar-title {
        gap: 0;
        font-size: 11px;
        line-height: 1;
    }

    .create-character-screen .onboarding-topbar .top-bar-title small {
        max-width: 150px;
        font-size: 8.5px;
        line-height: 1.05;
    }

    .create-character-screen .onboarding-icon-btn {
        min-width: 52px;
        min-height: 30px;
        padding: 0 8px;
        font-size: 10px;
    }

    .create-side-panel {
        top: 54px;
        left: 8px;
        right: 8px;
        gap: 0;
    }

    .create-hero-preview {
        height: 96px;
        min-height: 96px;
        border-radius: 8px;
    }

    .create-avatar-preview {
        left: 8px;
        bottom: 7px;
        width: 66px;
        height: 76px;
    }

    .create-hero-preview strong {
        right: 8px;
        bottom: 8px;
        max-width: calc(100% - 92px);
        padding: 6px 10px;
        font-size: 12px;
        line-height: 1;
    }

    .create-summary-rail {
        display: none;
    }

    .create-character-panel {
        top: 158px;
        left: 8px;
        right: 8px;
        bottom: 8px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 8px;
        overflow: hidden;
        border-radius: 8px;
    }

    .create-character-panel .cinematic-kicker {
        display: none;
    }

    .create-character-panel .cinematic-title {
        margin: 0;
        font-size: 15px;
        line-height: 1;
    }

    .create-character-panel .create-helper {
        flex: 0 0 auto;
        max-height: 24px;
        margin: 0;
        overflow: hidden;
        font-size: 10px;
        line-height: 1.2;
    }

    .create-character-form {
        flex: 1 1 auto;
        display: grid;
        grid-template-rows: auto auto auto minmax(0, 1fr) auto;
        gap: 5px;
        min-height: 0;
        padding-bottom: 0;
        overflow: hidden;
    }

    .create-character-form .form-group,
    .create-stat-editor-group,
    .create-character-form .form-group:has(.create-stat-radar) {
        min-height: 0;
        margin: 0;
        gap: 3px;
    }

    .create-character-form .form-group:has(.create-stat-radar) {
        overflow: hidden;
    }

    .create-character-form .form-group:has(.create-stat-radar) + .form-group {
        margin-top: 0;
    }

    .form-group label {
        font-size: 9px;
        line-height: 1;
    }

    .cinematic-input,
    .cinematic-select {
        height: 31px;
        min-height: 31px;
        padding: 5px 9px;
        border-radius: 7px;
        font-size: 12px;
    }

    .create-avatar-grid {
        gap: 5px;
    }

    .create-avatar-card {
        grid-template-columns: 24px minmax(0, 1fr);
        justify-items: start;
        align-items: center;
        gap: 6px;
        min-height: 34px;
        padding: 3px 7px;
    }

    .create-avatar-card img {
        width: 24px;
        height: 28px;
    }

    .create-avatar-card span {
        overflow: hidden;
        font-size: 10px;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .create-stat-radar {
        height: clamp(190px, 32dvh, 246px);
        min-height: 0;
        margin: 0;
        padding: 4px;
        border-radius: 8px;
    }

    .create-stat-radar-board {
        width: min(100%, 250px);
        height: 100%;
        min-height: 0;
    }

    .create-stat-svg {
        width: clamp(116px, 35vw, 142px);
        height: clamp(116px, 35vw, 142px);
        min-width: 0;
    }

    .create-stat-axis {
        width: 48px;
        min-height: 48px;
        gap: 1px;
        padding: 4px 3px;
        border-radius: 7px;
    }

    .create-stat-axis span {
        font-size: 8.5px;
    }

    .create-stat-axis b {
        font-size: 14px;
        line-height: 1;
    }

    .create-stat-axis .stat-triangle {
        width: 24px;
        height: 18px;
        border-radius: 5px;
    }

    .create-stat-axis .stat-triangle::before {
        border-left-width: 6px;
        border-right-width: 6px;
        border-bottom-width: 8px;
    }

    .axis-popularitas {
        top: 0;
    }

    .axis-integritas,
    .axis-penetrasi {
        top: 22%;
    }

    .axis-likuiditas,
    .axis-kredibilitas {
        bottom: 22%;
    }

    .axis-monopoli {
        bottom: 0;
    }

    .axis-popularitas .stat-triangle { transform: rotate(0deg); }
    .axis-integritas .stat-triangle { transform: rotate(60deg); }
    .axis-likuiditas .stat-triangle { transform: rotate(120deg); }
    .axis-monopoli .stat-triangle { transform: rotate(180deg); }
    .axis-kredibilitas .stat-triangle { transform: rotate(240deg); }
    .axis-penetrasi .stat-triangle { transform: rotate(300deg); }

    .create-start-btn {
        position: static;
        flex: 0 0 auto;
        min-height: 36px;
        margin-top: 5px;
        font-size: 12px;
    }
}

@media (max-width: 370px), (max-width: 759px) and (max-height: 700px) {
    .create-character-screen .onboarding-topbar {
        min-height: 38px;
        padding: 4px 6px;
    }

    .create-side-panel {
        top: 48px;
    }

    .create-hero-preview {
        height: 78px;
        min-height: 78px;
    }

    .create-avatar-preview {
        width: 54px;
        height: 62px;
    }

    .create-character-panel {
        top: 132px;
        gap: 3px;
        padding: 7px;
    }

    .create-character-panel .cinematic-title {
        font-size: 13px;
    }

    .create-character-panel .create-helper {
        max-height: 13px;
        font-size: 9px;
        line-height: 1.1;
    }

    .create-character-form {
        gap: 4px;
    }

    .cinematic-input,
    .cinematic-select {
        height: 28px;
        min-height: 28px;
        font-size: 11px;
    }

    .create-avatar-card {
        min-height: 30px;
    }

    .create-avatar-card img {
        width: 20px;
        height: 24px;
    }

    .create-stat-radar {
        height: clamp(158px, 30dvh, 205px);
    }

    .create-stat-radar-board {
        width: min(100%, 222px);
    }

    .create-stat-svg {
        width: clamp(98px, 32vw, 126px);
        height: clamp(98px, 32vw, 126px);
    }

    .create-stat-axis {
        width: 42px;
        min-height: 42px;
        padding: 3px 2px;
    }

    .create-stat-axis b {
        font-size: 12px;
    }

    .create-stat-axis .stat-triangle {
        width: 21px;
        height: 16px;
    }

    .create-start-btn {
        min-height: 32px;
        margin-top: 4px;
    }
}

/* Final modal pass: keep Aksi forms aligned with the same frame-sized custom modal system. */
.phase3-modal-overlay:not(.podcast-modal-overlay) {
    padding: var(--game-frame-modal-padding) !important;
}

.phase3-modal-overlay:not(.podcast-modal-overlay) .phase3-modal:not(.podcast-modal) {
    width: min(380px, var(--game-frame-modal-width)) !important;
    max-width: var(--game-frame-modal-width) !important;
    max-height: calc(100dvh - (var(--game-frame-modal-padding-y) * 2)) !important;
    box-sizing: border-box !important;
}

@media (max-width: 759px) {
    .vip-modal,
    .ui-modal-overlay,
    .required-whatsapp-modal,
    .city-place-modal-overlay,
    .phase3-modal-overlay,
    .podcast-modal-overlay,
    .game-confirm-overlay,
    .result-overlay,
    .obtained-overlay,
    .event-modal,
    .dashboard-player-menu-overlay,
    .public-leader-profile-modal,
    .beginner-tutorial-overlay,
    .custom-modal-overlay {
        background-color: rgba(19, 11, 5, 0.48) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        backdrop-filter: blur(8px) !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
    }

    .phase3-modal-overlay:not(.podcast-modal-overlay) .phase3-modal:not(.podcast-modal) {
        width: var(--game-frame-modal-width) !important;
        max-width: var(--game-frame-modal-width) !important;
        max-height: calc(100dvh - 16px) !important;
    }

    .beginner-action-modal,
    .phase3-modal-overlay:not(.podcast-modal-overlay) {
        position: fixed !important;
        inset: 0 !important;
        display: grid !important;
        place-items: center !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding: var(--game-frame-modal-padding) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .beginner-action-modal .beginner-action-card-wrap,
    .phase3-modal-overlay:not(.podcast-modal-overlay) .phase3-modal:not(.podcast-modal) {
        margin: auto !important;
        max-height: calc(100dvh - (var(--game-frame-modal-padding-y) * 2)) !important;
    }
}

.dashboard-stage .ui-tooltip,
.ui-modal-card .ui-tooltip,
.phase3-modal .ui-tooltip,
.vip-modal-card .ui-tooltip {
    display: inline-grid !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    overflow: visible !important;
    color: inherit !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-transform: none !important;
}

.dashboard-stage .ui-tooltip .ui-tooltip-box,
.ui-modal-card .ui-tooltip .ui-tooltip-box,
.phase3-modal .ui-tooltip .ui-tooltip-box,
.vip-modal-card .ui-tooltip .ui-tooltip-box {
    display: block !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.9) !important;
    color: #fff7df !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1.38 !important;
    overflow: visible !important;
    scrollbar-width: none !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
    text-overflow: clip !important;
    text-transform: none !important;
    white-space: normal !important;
}

/* Custom modals keep their dim overlay, but the page behind them must stay sharp. */
.vip-modal,
.settings-modal-overlay,
.ui-modal-overlay,
.required-whatsapp-modal,
.city-place-modal-overlay,
.phase3-modal-overlay,
.podcast-modal-overlay,
.game-confirm-overlay,
.result-overlay,
.obtained-overlay,
.event-modal,
.event-modal-backdrop,
.dashboard-player-menu-overlay,
.public-leader-profile-modal,
.beginner-action-modal,
.career-job-choice-modal,
.beginner-tutorial-overlay,
.startup-splash-overlay,
.custom-modal-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.startup-splash-overlay {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(7, 8, 10, 0.78);
    box-sizing: border-box;
    opacity: 1;
    transition: opacity 0.18s ease;
}

.startup-splash-overlay.is-closing {
    opacity: 0;
}

.startup-splash-card {
    position: relative;
    width: min(620px, calc(100vw - 36px));
    height: min(86dvh, 760px);
    border: 1px solid rgba(255, 217, 121, 0.42);
    border-radius: 16px;
    background: rgba(20, 13, 7, 0.96);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.62);
    overflow: hidden;
}

.startup-splash-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.startup-splash-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 245, 220, 0.5);
    border-radius: 50%;
    background: rgba(20, 13, 7, 0.78);
    color: #fff7df;
    cursor: pointer;
    font-size: 18px;
    font-weight: 950;
    line-height: 1;
}

.startup-splash-close:hover,
.startup-splash-close:focus-visible {
    background: rgba(197, 138, 50, 0.95);
    color: #1b1005;
    outline: none;
}

@media (max-width: 759px) {
    .startup-splash-overlay {
        padding: 8px;
    }

    .startup-splash-card {
        width: calc(100vw - 16px);
        height: calc(100dvh - 24px);
        border-radius: 12px;
    }

    .startup-splash-close {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
    }
}