/* =========================================================
   Rimba Idle - sistem desain
   Palet: tinta hutan, kunyit, daun, kembang sepatu
   Huruf: Plus Jakarta Sans (disimpan lokal)
   ========================================================= */

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../vendor/fonts/plus-jakarta-sans.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

[data-bs-theme="dark"] {
    --r-bg: #0d1517;
    --r-surface: #132024;
    --r-raised: #182a2f;
    --r-line: #223a40;
    --r-text: #e8efec;
    --r-muted: #8fa6a0;
    --r-kunyit: #f2b33d;
    --r-kunyit-ink: #f2b33d;
    --r-daun: #3fbf8a;
    --r-kembang: #ef5458;
    --r-hutan: #14532d;
    --r-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;
}

[data-bs-theme="light"] {
    --r-bg: #f4f7f5;
    --r-surface: #ffffff;
    --r-raised: #edf3f0;
    --r-line: #d6e1dc;
    --r-text: #10201c;
    --r-muted: #52665f;
    --r-kunyit: #f2b33d;
    --r-kunyit-ink: #9a6400;
    --r-daun: #1f9d6b;
    --r-kembang: #d93036;
    --r-hutan: #14532d;
    --r-shadow: 0 1px 2px rgba(16, 32, 28, .06);
}

[data-bs-theme] {
    --bs-body-bg: var(--r-bg);
    --bs-body-color: var(--r-text);
    --bs-emphasis-color: var(--r-text);
    --bs-heading-color: var(--r-text);
    --bs-secondary-color: var(--r-muted);
    --bs-tertiary-bg: var(--r-raised);
    --bs-secondary-bg: var(--r-raised);
    --bs-border-color: var(--r-line);
    --bs-link-color: var(--r-kunyit-ink);
    --bs-link-hover-color: var(--r-kunyit-ink);
    --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: .9375rem;
    --bs-body-line-height: 1.55;
}
[data-bs-theme="dark"] { --bs-link-color-rgb: 242, 179, 61; --bs-link-hover-color-rgb: 242, 179, 61; }
[data-bs-theme="light"] { --bs-link-color-rgb: 154, 100, 0; --bs-link-hover-color-rgb: 154, 100, 0; }

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.num, .pill, .lv { font-variant-numeric: tabular-nums; }
.muted { color: var(--r-muted); }
.min-w-0 { min-width: 0; }
.text-kunyit { color: var(--r-kunyit-ink) !important; }
.text-kembang { color: var(--r-kembang) !important; }

:focus-visible { outline: 2px solid var(--r-kunyit); outline-offset: 2px; border-radius: 4px; }

.skip-link {
    position: absolute; top: .75rem; left: .75rem; z-index: 2000;
    padding: .5rem 1rem; border-radius: .5rem;
    background: var(--r-kunyit); color: #1b1300; font-weight: 700;
}

[data-bs-theme="dark"] .show-in-light,
[data-bs-theme="light"] .show-in-dark { display: none !important; }

/* ---------- Dasar ---------- */
.logo { width: 2rem; height: 2rem; flex: none; object-fit: contain; }

.brand {
    display: inline-flex; align-items: center; gap: .6rem;
    font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em;
    color: var(--r-text);
}
.brand:hover { color: var(--r-text); text-decoration: none; }

.btn { font-weight: 700; border-radius: .7rem; }
.btn-lg { padding: .75rem 1.4rem; font-size: 1rem; }

.btn-kunyit {
    --bs-btn-color: #1b1300;
    --bs-btn-bg: var(--r-kunyit);
    --bs-btn-border-color: var(--r-kunyit);
    --bs-btn-hover-color: #1b1300;
    --bs-btn-hover-bg: #f6c25f;
    --bs-btn-hover-border-color: #f6c25f;
    --bs-btn-active-color: #1b1300;
    --bs-btn-active-bg: #dc9f2c;
    --bs-btn-active-border-color: #dc9f2c;
    --bs-btn-disabled-color: #1b1300;
    --bs-btn-disabled-bg: var(--r-kunyit);
    --bs-btn-disabled-border-color: var(--r-kunyit);
    --bs-btn-focus-shadow-rgb: 242, 179, 61;
}
.btn-kunyit:hover { text-decoration: none; }

.btn-ghost {
    --bs-btn-color: var(--r-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--r-line);
    --bs-btn-hover-color: var(--r-text);
    --bs-btn-hover-bg: var(--r-raised);
    --bs-btn-hover-border-color: var(--r-line);
    --bs-btn-active-color: var(--r-text);
    --bs-btn-active-bg: var(--r-raised);
    --bs-btn-active-border-color: var(--r-line);
}
.btn-ghost:hover { text-decoration: none; }

.icon-btn {
    display: inline-grid; place-items: center; flex: none;
    width: 2.5rem; height: 2.5rem;
    border: 1px solid var(--r-line); border-radius: .7rem;
    background: transparent; color: var(--r-muted);
}
.icon-btn:hover { background: var(--r-raised); color: var(--r-text); text-decoration: none; }

.form-control {
    border-color: var(--r-line); border-radius: .7rem;
    background-color: var(--r-surface); color: var(--r-text);
}
.form-control:focus {
    border-color: var(--r-kunyit); background-color: var(--r-surface); color: var(--r-text);
    box-shadow: 0 0 0 .2rem rgba(242, 179, 61, .22);
}
.input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.form-label { font-weight: 700; font-size: .875rem; }
.form-check-input:checked { background-color: var(--r-daun); border-color: var(--r-daun); }
.alert { border-radius: .8rem; }

.avatar {
    display: inline-grid; place-items: center; flex: none;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: var(--r-hutan); color: var(--r-kunyit);
    font-weight: 800; font-size: 1.1rem;
    box-shadow: 0 0 0 2px var(--r-surface), 0 0 0 3px var(--r-daun);
}
.avatar-sm { width: 2rem; height: 2rem; font-size: .85rem; box-shadow: 0 0 0 2px var(--r-surface), 0 0 0 3px var(--r-daun); }
.avatar-lg { width: 4.5rem; height: 4.5rem; font-size: 1.9rem; }

.lv {
    display: inline-block; padding: .05rem .45rem;
    border-radius: .4rem; background: var(--r-raised);
    font-size: .75rem; font-weight: 800; color: var(--r-text); white-space: nowrap;
}

progress.meter {
    appearance: none; display: block;
    height: .5rem; border: 0; border-radius: 999px;
    background: var(--r-raised); overflow: hidden;
    --meter-color: var(--r-daun);
}
progress.meter::-webkit-progress-bar { background: var(--r-raised); border-radius: 999px; }
progress.meter::-webkit-progress-value { background: var(--meter-color); border-radius: 999px; }
progress.meter::-moz-progress-bar { background: var(--meter-color); border-radius: 999px; }
.meter-daun { --meter-color: var(--r-daun); }
.meter-kembang { --meter-color: var(--r-kembang); }

.skill-badge {
    display: grid; place-items: center; flex: none;
    width: 2.75rem; height: 2.75rem; border-radius: .8rem;
    background: color-mix(in srgb, var(--r-daun) 16%, var(--r-surface));
    color: var(--r-daun); font-size: 1.25rem;
}

/* ---------- Dok aktivitas (elemen khas) ---------- */
.dock {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .75rem;
    border: 1px solid var(--r-line); border-radius: 1rem;
    background: var(--r-surface);
    box-shadow: var(--r-shadow);
}
.dock.is-running { border-color: color-mix(in srgb, var(--r-daun) 45%, var(--r-line)); }
.dock-icon {
    display: grid; place-items: center; flex: none;
    width: 2.4rem; height: 2.4rem; border-radius: .75rem;
    background: color-mix(in srgb, var(--r-daun) 16%, var(--r-surface));
    color: var(--r-daun); font-size: 1.15rem;
}
.dock.is-idle .dock-icon { background: var(--r-raised); color: var(--r-muted); }
.dock-body { display: grid; gap: .35rem; flex: 1; min-width: 0; }
.dock-title { font-weight: 700; font-size: .875rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dock-sub { font-size: .78rem; color: var(--r-muted); }
.dock-meter { height: .35rem; width: 100%; }
.dock-yield { display: grid; justify-items: end; line-height: 1.15; }
.dock-yield strong { color: var(--r-kunyit-ink); font-size: 1rem; font-variant-numeric: tabular-nums; }
.dock-yield small { font-size: .7rem; color: var(--r-muted); white-space: nowrap; }

.idle-bar { display: block; height: .35rem; border-radius: 999px; background: var(--r-raised); overflow: hidden; }
.idle-bar span { display: block; height: 100%; background: var(--r-daun); transform: scaleX(.45); transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
    .idle-bar span { animation: idle-fill 6s linear infinite; }
}
@keyframes idle-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Situs publik ---------- */
.site-header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding-top: calc(1rem + env(safe-area-inset-top)); padding-bottom: 1rem;
}
.site-header-actions { display: flex; align-items: center; gap: .5rem; }

.hero {
    display: grid; gap: 2.5rem; align-items: center;
    padding-top: 2.5rem; padding-bottom: 4rem;
}
@media (min-width: 992px) { .hero { grid-template-columns: 1.15fr 1fr; gap: 4rem; padding-top: 5rem; padding-bottom: 6rem; } }

.hero h1 { max-width: 13ch; margin-bottom: 1.25rem; font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1.02; }
.hero-lede { max-width: 34rem; margin-bottom: 2rem; font-size: 1.1rem; color: var(--r-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 575.98px) { .hero-actions .btn { width: 100%; } }

.hero-visual { display: grid; gap: .9rem; max-width: 28rem; width: 100%; justify-self: center; }
.return-card {
    padding: 1.4rem;
    border: 1px solid var(--r-line); border-radius: 1.25rem;
    background: var(--r-surface); box-shadow: var(--r-shadow);
}
.return-title { margin: 0 0 .2rem; font-weight: 800; font-size: 1.1rem; }
.return-sub { margin: 0 0 1rem; font-size: .875rem; color: var(--r-muted); }
.return-list { display: grid; gap: .5rem; margin: 0; }
.return-list li {
    display: flex; align-items: center; gap: .7rem;
    padding: .65rem .8rem; border-radius: .8rem; background: var(--r-raised);
}
.return-list i { color: var(--r-daun); font-size: 1.1rem; }
.return-list span { flex: 1; font-size: .9rem; }
.return-list strong { color: var(--r-kunyit-ink); font-variant-numeric: tabular-nums; }

.section { padding-top: 3.5rem; padding-bottom: 1rem; }
.section-title { margin-bottom: 1.75rem; font-size: clamp(1.5rem, 4vw, 2rem); }

.steps { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.steps li { counter-increment: step; padding-top: 1rem; border-top: 2px solid var(--r-line); }
.steps li::before {
    content: counter(step); display: block; margin-bottom: .5rem;
    font-weight: 800; font-size: 1.5rem; color: var(--r-kunyit-ink);
}
.steps h3, .skill-list h3 { margin-bottom: .35rem; font-size: 1.1rem; }
.steps p, .skill-list p { margin: 0; color: var(--r-muted); }

.skill-list { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 0; }
.skill-list .skill-badge { margin-bottom: .75rem; }

.faq { max-width: 48rem; }
.faq-item { border-bottom: 1px solid var(--r-line); }
.faq-item summary {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1rem 0; cursor: pointer; list-style: none; font-weight: 700;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "\F4FE"; font-family: "bootstrap-icons"; color: var(--r-muted); transition: transform .15s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 1rem; color: var(--r-muted); max-width: 40rem; }

.cta-band {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
    margin-top: 4rem; padding: 2rem;
    border-radius: 1.5rem; background: var(--r-hutan); color: #f3f7f4;
}
.cta-band h2 { margin: 0; max-width: 22ch; font-size: clamp(1.4rem, 3.5vw, 1.9rem); color: #f3f7f4; }

.site-footer { margin-top: 4rem; padding: 2rem 0 calc(2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--r-line); }
.site-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.site-footer-links a { color: var(--r-text); font-weight: 600; font-size: .9rem; }
.site-footer-copy { margin: 0; font-size: .85rem; color: var(--r-muted); }

/* ---------- Auth ---------- */
.auth-main { padding: 1rem 1rem calc(3rem + env(safe-area-inset-bottom)); }
.auth-card {
    max-width: 26rem; margin: 1.5rem auto 0; padding: 1.75rem;
    border: 1px solid var(--r-line); border-radius: 1.25rem;
    background: var(--r-surface); box-shadow: var(--r-shadow);
}
@media (max-width: 400px) { .auth-card { padding: 1.25rem; border: 0; background: transparent; box-shadow: none; } }
.auth-title { margin-bottom: .3rem; font-size: 1.5rem; }
.auth-sub { margin-bottom: 1.5rem; color: var(--r-muted); }
.auth-foot { margin: 1.25rem 0 0; text-align: center; font-size: .9rem; }

.seg {
    display: grid; grid-template-columns: 1fr 1fr; gap: .25rem;
    margin-bottom: 1.5rem; padding: .25rem;
    border-radius: .8rem; background: var(--r-raised);
}
.seg-item {
    padding: .55rem; border-radius: .6rem;
    text-align: center; font-weight: 700; color: var(--r-muted);
}
.seg-item:hover { color: var(--r-text); text-decoration: none; }
.seg-item.active { background: var(--r-surface); color: var(--r-text); box-shadow: var(--r-shadow); }

.name-preview { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; }
.name-preview-text { font-weight: 800; font-size: 1.15rem; overflow-wrap: anywhere; }

/* ---------- Aplikasi game ---------- */
.app { min-height: 100vh; }
@media (min-width: 992px) {
    .app { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); }
}

.side { display: none; }
@media (min-width: 992px) {
    .side {
        position: sticky; top: 0; height: 100vh;
        display: flex; flex-direction: column; gap: 1.5rem;
        padding: 1.25rem 1rem;
        border-right: 1px solid var(--r-line); background: var(--r-surface);
    }
}

.side-nav { display: grid; gap: .2rem; }
.side-nav .nav-item {
    display: flex; align-items: center; gap: .8rem;
    padding: .6rem .75rem; border-radius: .7rem;
    font-weight: 700; color: var(--r-muted);
}
.side-nav .nav-item i { font-size: 1.1rem; }
.side-nav a.nav-item:hover { background: var(--r-raised); color: var(--r-text); text-decoration: none; }
.side-nav .nav-item.active { background: var(--r-raised); color: var(--r-text); }
.side-nav .nav-item.active i { color: var(--r-daun); }
.nav-item.is-soon { opacity: .45; cursor: default; }

.side-bottom { display: grid; gap: .75rem; margin-top: auto; }

.account-row {
    display: flex; align-items: center; gap: .7rem; width: 100%;
    padding: .55rem .6rem; border: 0; border-radius: .8rem;
    background: transparent; color: var(--r-text); text-align: left;
}
.account-row:hover { background: var(--r-raised); }
.account-row-text { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.account-row-text strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.account-row-text small { color: var(--r-muted); font-weight: 600; }
.account-row > i { color: var(--r-muted); }

.app-main { min-width: 0; }

.topbar {
    position: sticky; top: 0; z-index: 1020;
    display: flex; align-items: center; gap: .75rem;
    padding: calc(.6rem + env(safe-area-inset-top)) 1rem .6rem;
    background: color-mix(in srgb, var(--r-bg) 90%, transparent);
    backdrop-filter: blur(10px);
}
@media (min-width: 992px) { .topbar { justify-content: flex-end; padding: 1rem 2rem .5rem; } }

.account-chip {
    display: flex; align-items: center; gap: .55rem; min-width: 0;
    padding: .2rem .7rem .2rem .2rem; border: 0; border-radius: 999px;
    background: transparent; color: var(--r-text); font-weight: 700;
}
.account-chip-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 9rem; }

.pills { display: flex; gap: .4rem; margin-left: auto; }
@media (min-width: 992px) { .pills { margin-left: 0; } }
.pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .8rem; border: 1px solid var(--r-line); border-radius: 999px;
    background: var(--r-surface); font-weight: 800; font-size: .875rem;
}

.app-content {
    width: 100%; max-width: 62rem; margin: 0 auto;
    padding: .5rem 1rem calc(9.5rem + env(safe-area-inset-bottom));
}
@media (min-width: 992px) { .app-content { padding: .75rem 2rem 3rem; } }

/* Bar bawah HP: dok + tab */
.mobile-bar {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 1030;
    display: grid; gap: .5rem;
    padding: .5rem .75rem 0;
    background: linear-gradient(to top, var(--r-bg) 70%, transparent);
}
@media (min-width: 992px) { .mobile-bar { display: none; } }

.tabbar {
    display: grid; grid-template-columns: repeat(6, 1fr);
    margin: 0 -.75rem;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--r-line); background: var(--r-surface);
}
.tabbar .nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    min-height: 3.6rem; padding: .35rem .2rem;
    font-size: .7rem; font-weight: 700; color: var(--r-muted);
}
.tabbar .nav-item i { font-size: 1.3rem; }
.tabbar a.nav-item:hover { text-decoration: none; color: var(--r-text); }
.tabbar .nav-item.active { color: var(--r-daun); }

/* Sheet akun (dialog bawaan browser) */
.sheet {
    width: min(26rem, calc(100% - 1.5rem));
    margin: auto auto 0; padding: 1rem;
    border: 1px solid var(--r-line); border-radius: 1.25rem 1.25rem 0 0;
    background: var(--r-surface); color: var(--r-text);
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
@media (min-width: 576px) { .sheet { margin: auto; border-radius: 1.25rem; } }
.sheet::backdrop { background: rgba(4, 10, 10, .55); }
.sheet-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.sheet-name { margin: 0; font-weight: 800; }
.sheet-sub { margin: 0; font-size: .85rem; color: var(--r-muted); }
.sheet-list { display: grid; gap: .25rem; }
.sheet-item {
    display: flex; align-items: center; gap: .8rem; width: 100%;
    padding: .8rem .75rem; border: 0; border-radius: .8rem;
    background: transparent; color: var(--r-text); font-weight: 700; text-align: left;
}
.sheet-item:hover { background: var(--r-raised); text-decoration: none; color: var(--r-text); }
.sheet-item > i { color: var(--r-muted); font-size: 1.1rem; }
.sheet-value { margin-left: auto; font-weight: 600; color: var(--r-muted); }

/* ---------- Kemah ---------- */
.greet { margin: .5rem 0 1.25rem; font-size: clamp(1.5rem, 4.5vw, 2.1rem); }
.greet span { display: block; font-size: .95rem; font-weight: 600; letter-spacing: 0; color: var(--r-muted); }

.task-card {
    margin-bottom: 1rem; padding: 1.5rem;
    border: 1px solid var(--r-line); border-radius: 1.25rem;
    background: var(--r-surface); box-shadow: var(--r-shadow);
}
.task-card.is-running { border-color: color-mix(in srgb, var(--r-daun) 45%, var(--r-line)); }
.task-card .dock { margin-top: 1rem; border: 0; padding: 0; background: transparent; box-shadow: none; }
.task-icon {
    display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .9rem;
    border-radius: .9rem; background: var(--r-raised); color: var(--r-muted); font-size: 1.4rem;
}
.task-label { margin: 0 0 .2rem; font-size: .8rem; font-weight: 700; color: var(--r-daun); }
.task-title { margin-bottom: .4rem; font-size: 1.35rem; }
.task-meta { max-width: 36rem; margin-bottom: 1.1rem; color: var(--r-muted); }
.task-card.is-running .task-meta { margin-bottom: 0; }
.task-note { margin: .6rem 0 0; font-size: .8rem; color: var(--r-muted); }

.kemah-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) {
    .kemah-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
    .kemah-skills { grid-row: span 2; }
}

.card-r {
    padding: 1.25rem;
    border: 1px solid var(--r-line); border-radius: 1.25rem;
    background: var(--r-surface); box-shadow: var(--r-shadow);
}
.card-r-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.card-r-head h2 { margin: 0; font-size: 1.05rem; }

.checklist { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.checklist li { display: flex; align-items: center; gap: .65rem; font-weight: 600; }
.checklist i { color: var(--r-muted); }
.checklist li.is-done { color: var(--r-muted); text-decoration: line-through; text-decoration-color: var(--r-line); }
.checklist li.is-done i { color: var(--r-daun); }

.skill-rows { display: grid; gap: 1rem; }
.skill-rows li { display: flex; gap: .85rem; align-items: center; }
.skill-row-body { display: grid; gap: .35rem; flex: 1; min-width: 0; }
.skill-row-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.skill-row-exp { font-size: .78rem; color: var(--r-muted); font-variant-numeric: tabular-nums; }

.cond-hp { margin-bottom: 1rem; }
.kv > div { display: flex; justify-content: space-between; padding: .55rem 0; border-top: 1px solid var(--r-line); }
.kv dt { font-weight: 600; color: var(--r-muted); }
.kv dd { margin: 0; font-weight: 700; }

/* =========================================================
   Fase 2: skill, pekerjaan, klaim, ringkasan offline
   ========================================================= */
a.dock { color: var(--r-text); }
a.dock:hover { text-decoration: none; border-color: var(--r-daun); }
a.dock-title { color: var(--r-text); }
a.dock-title:hover { color: var(--r-text); }
.dock-chevron { color: var(--r-muted); }
.dock-claim {
    flex: none;
    padding: .45rem .8rem; border: 0; border-radius: .65rem;
    background: var(--r-kunyit); color: #1b1300;
    font-weight: 800; font-size: .8rem;
}
.dock-claim:hover { background: #f6c25f; }
.dock-claim:disabled { opacity: .45; cursor: not-allowed; }
.dock form { margin: 0; }

.page-title { margin: .5rem 0 .35rem; font-size: clamp(1.5rem, 4.5vw, 2.1rem); }
.page-sub { max-width: 40rem; margin-bottom: 1.5rem; color: var(--r-muted); }

.skill-cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); margin: 0; }
.skill-card {
    display: grid; gap: .6rem; height: 100%;
    padding: 1.1rem;
    border: 1px solid var(--r-line); border-radius: 1.1rem;
    background: var(--r-surface); color: var(--r-text); box-shadow: var(--r-shadow);
}
.skill-card:hover { border-color: var(--r-daun); color: var(--r-text); text-decoration: none; }
.skill-card.is-active { border-color: color-mix(in srgb, var(--r-daun) 55%, var(--r-line)); }
.skill-card-top { display: flex; align-items: center; gap: .75rem; }
.skill-card-name { display: grid; flex: 1; min-width: 0; }

.tag-running {
    display: inline-flex; align-items: center; gap: .35rem; width: fit-content;
    font-size: .75rem; font-weight: 700; color: var(--r-daun);
}
.tag-running::before {
    content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--r-daun);
}
@media (prefers-reduced-motion: no-preference) {
    .tag-running::before { animation: pulse 1.6s ease-in-out infinite; }
}
@keyframes pulse { 50% { opacity: .3; } }

.skill-row-link { color: var(--r-text); font-weight: 700; }
.skill-row-link:hover { color: var(--r-text); }

.back-link { display: inline-flex; align-items: center; gap: .4rem; margin: .25rem 0 1rem; font-weight: 700; color: var(--r-muted); }
.back-link:hover { color: var(--r-text); text-decoration: none; }

.skill-head {
    display: flex; gap: 1rem; align-items: flex-start;
    margin-bottom: 1.75rem; padding: 1.25rem;
    border: 1px solid var(--r-line); border-radius: 1.25rem;
    background: var(--r-surface); box-shadow: var(--r-shadow);
}
.skill-badge-lg { width: 3.5rem; height: 3.5rem; border-radius: 1rem; font-size: 1.6rem; }
.skill-head-body { display: grid; gap: .45rem; flex: 1; min-width: 0; }
.skill-head-title { margin: 0; font-size: clamp(1.4rem, 4vw, 1.8rem); }
.lv-lg { font-size: .9rem; padding: .15rem .6rem; }
.skill-hint { display: flex; gap: .5rem; align-items: baseline; margin: .2rem 0 0; font-size: .875rem; color: var(--r-muted); }
.skill-hint i { color: var(--r-daun); }

.list-title { margin-bottom: .75rem; font-size: 1.05rem; }

.job-list { display: grid; gap: .6rem; margin: 0; }
.job {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .9rem; align-items: center;
    padding: 1rem;
    border: 1px solid var(--r-line); border-radius: 1rem;
    background: var(--r-surface);
}
@media (min-width: 576px) { .job { grid-template-columns: auto minmax(0, 1fr) auto; } }
.job.is-running { border-color: color-mix(in srgb, var(--r-daun) 55%, var(--r-line)); }
.job.is-locked { background: transparent; }
.job.is-locked .job-name, .job.is-locked .job-rate { opacity: .6; }
.job-icon {
    display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem; border-radius: .8rem;
    background: color-mix(in srgb, var(--r-daun) 16%, var(--r-surface)); color: var(--r-daun); font-size: 1.25rem;
}
.job.is-locked .job-icon { background: var(--r-raised); color: var(--r-muted); }
.job-body { display: grid; gap: .4rem; }
.job-name { margin: 0; font-weight: 800; }
.job-body .chips { margin: 0; }
.job-rate { margin: 0; font-size: .8rem; color: var(--r-muted); }
.job-action { display: flex; align-items: center; gap: .6rem; justify-content: flex-end; grid-column: 1 / -1; }
@media (min-width: 576px) { .job-action { grid-column: auto; } }
.job-action form { margin: 0; }
.job-locked-text { font-size: .85rem; font-weight: 700; color: var(--r-muted); }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .1rem .5rem; border-radius: .4rem;
    background: var(--r-raised);
    font-size: .75rem; font-weight: 700; color: var(--r-muted);
    font-variant-numeric: tabular-nums;
}
.chip-locked { background: color-mix(in srgb, var(--r-kembang) 15%, transparent); color: var(--r-kembang); }

.empty { text-align: center; padding: 2rem 1.25rem; }
.empty > i { font-size: 1.8rem; color: var(--r-muted); }
.empty-title { margin: .6rem 0 .2rem; font-weight: 800; }
.empty-text { max-width: 28rem; margin: 0 auto; color: var(--r-muted); }

/* Ringkasan offline */
.welcome-title { margin: 0 0 .3rem; font-size: 1.25rem; font-weight: 800; }
.welcome-sub { margin: 0 0 1rem; color: var(--r-muted); }
.welcome .return-list { margin-bottom: 1rem; }
.return-list li.is-levelup { background: color-mix(in srgb, var(--r-kunyit) 18%, var(--r-raised)); }
.return-list li.is-levelup i { color: var(--r-kunyit-ink); }
.welcome-note { display: flex; gap: .5rem; margin: 0 0 1rem; font-size: .85rem; color: var(--r-muted); }

/* Notifikasi singkat */
.toasts {
    position: fixed; z-index: 1100; left: 50%; transform: translateX(-50%);
    top: calc(.75rem + env(safe-area-inset-top));
    display: grid; gap: .5rem; width: min(24rem, calc(100% - 1.5rem));
    pointer-events: none;
}
.toast-r {
    display: flex; align-items: center; gap: .6rem;
    padding: .75rem 1rem; border: 1px solid var(--r-line); border-radius: .9rem;
    background: var(--r-surface); color: var(--r-text);
    font-weight: 700; font-size: .9rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.toast-r i { font-size: 1.1rem; }
.toast-r.is-success i { color: var(--r-daun); }
.toast-r.is-level { border-color: var(--r-kunyit); }
.toast-r.is-level i { color: var(--r-kunyit-ink); }
.toast-r.is-error i { color: var(--r-kembang); }
@media (prefers-reduced-motion: no-preference) {
    .toast-r { animation: toast-in .2s ease-out; }
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-.5rem); } }

/* =========================================================
   v1.2: bar atas, sidebar yang bisa diciutkan, footer,
   profil, pengaturan, catatan rilis
   ========================================================= */
.game { --appbar-h: 3.75rem; --side-w: 16rem; }
.game[data-sidebar="collapsed"] { --side-w: 4.75rem; }

/* Bar atas */
.appbar {
    position: sticky; top: 0; z-index: 1040;
    display: flex; align-items: center; gap: .65rem;
    min-height: calc(var(--appbar-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 1rem 0;
    border-bottom: 1px solid var(--r-line);
    background: color-mix(in srgb, var(--r-surface) 92%, transparent);
    backdrop-filter: blur(10px);
}
.appbar .brand-text { display: none; }
@media (min-width: 576px) { .appbar .brand-text { display: inline; } }
.appbar-right { display: flex; align-items: center; gap: .5rem; min-width: 0; margin-left: auto; }
.appbar-tools { display: none; gap: .4rem; }
@media (min-width: 576px) { .appbar-tools { display: flex; } }
.appbar .pills { margin-left: 0; }
.account-chip { padding: .2rem .4rem .2rem .2rem; }
.account-chip:hover { background: var(--r-raised); }
.account-chip-name, .account-chip-caret { display: none; }
@media (min-width: 768px) {
    .account-chip-name, .account-chip-caret { display: inline; }
    .account-chip { padding-right: .7rem; }
}
.account-chip-caret { font-size: .75rem; color: var(--r-muted); }

/* Kerangka halaman */
.app { display: block; min-height: auto; }
@media (min-width: 992px) {
    .app {
        display: grid;
        grid-template-columns: var(--side-w) minmax(0, 1fr);
        transition: grid-template-columns .2s ease;
    }
}
@media (prefers-reduced-motion: reduce) { .app { transition: none; } }

/* Sidebar: laci di HP */
.side {
    position: fixed; z-index: 1045;
    top: calc(var(--appbar-h) + env(safe-area-inset-top)); bottom: 0; left: 0;
    display: flex; flex-direction: column; gap: .25rem;
    width: min(18rem, 85vw); height: auto;
    padding: 1rem .9rem calc(1rem + env(safe-area-inset-bottom));
    border-right: 1px solid var(--r-line);
    background: var(--r-surface);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-105%); visibility: hidden;
    transition: transform .2s ease, visibility .2s;
}
.side.is-open { transform: none; visibility: visible; }
body.drawer-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }

.drawer-backdrop { position: fixed; inset: 0; z-index: 1042; background: rgba(4, 10, 10, .55); }

/* Sidebar: kolom tetap di desktop */
@media (min-width: 992px) {
    .side {
        position: sticky; z-index: auto;
        top: var(--appbar-h); height: calc(100vh - var(--appbar-h));
        width: auto; transform: none; visibility: visible;
        padding: 1rem .9rem 1.25rem;
    }
    .drawer-backdrop { display: none !important; }

    .game[data-sidebar="collapsed"] .side { padding-inline: .55rem; }
    .game[data-sidebar="collapsed"] .side .nav-item { justify-content: center; padding: .65rem 0; }
    .game[data-sidebar="collapsed"] .side .nav-item span {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .game[data-sidebar="collapsed"] .side .dock { flex-direction: column; gap: .45rem; padding: .55rem .45rem; }
    .game[data-sidebar="collapsed"] .side .dock-title,
    .game[data-sidebar="collapsed"] .side .dock-sub,
    .game[data-sidebar="collapsed"] .side .dock-yield,
    .game[data-sidebar="collapsed"] .side .dock form,
    .game[data-sidebar="collapsed"] .side .dock-chevron { display: none; }
    .game[data-sidebar="collapsed"] .side .dock-body { width: 100%; }
}

.side-sep { height: 1px; margin: .75rem .4rem; background: var(--r-line); }

/* Konten dan footer */
.app-main { display: flex; flex-direction: column; min-height: calc(100vh - var(--appbar-h)); }
.app-content { flex: 1; padding: 1rem 1rem 1.5rem; }
@media (min-width: 992px) { .app-content { padding: 1.5rem 2rem 2rem; } }

.app-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
    width: 100%; max-width: 62rem; margin: 0 auto;
    padding: 1.25rem 1rem calc(10rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--r-line);
    font-size: .85rem; color: var(--r-muted);
}
@media (min-width: 992px) { .app-footer { padding: 1.25rem 2rem 1.75rem; } }
.app-footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.app-footer-links a { color: var(--r-muted); font-weight: 600; }
.app-footer-links a:hover { color: var(--r-text); }

.version-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .65rem; border: 1px solid var(--r-line); border-radius: 999px;
    font-size: .78rem; font-weight: 700; color: var(--r-muted); white-space: nowrap;
}
.version-chip:hover { color: var(--r-text); border-color: var(--r-daun); text-decoration: none; }
.version-chip i { color: var(--r-kunyit-ink); }

.greet-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.greet-row .greet { margin: 0; }

/* Profil */
.profile-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--r-line); border-radius: 1.25rem;
    background: var(--r-surface); box-shadow: var(--r-shadow);
}
.profile-name { margin: 0; font-size: clamp(1.4rem, 4.5vw, 1.9rem); overflow-wrap: anywhere; }
.profile-meta { margin: .1rem 0 .55rem; color: var(--r-muted); font-size: .9rem; }
.profile-edit { margin-left: auto; }

.stat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
@media (min-width: 768px) { .stat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-tiles li {
    padding: 1rem;
    border: 1px solid var(--r-line); border-radius: 1rem;
    background: var(--r-surface);
}
.stat-label { display: block; margin-bottom: .2rem; font-size: .8rem; font-weight: 600; color: var(--r-muted); }
.stat-tiles strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }

/* Pengaturan */
.settings { display: grid; gap: 1rem; max-width: 46rem; }
.settings .card-r { scroll-margin-top: calc(var(--appbar-h) + 1rem); }
.settings fieldset { margin: 0; padding: 0; border: 0; }

.theme-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.theme-choice { position: relative; display: grid; gap: .5rem; cursor: pointer; }
.theme-choice input { position: absolute; opacity: 0; pointer-events: none; }
.theme-preview {
    display: grid; align-content: start; gap: .35rem;
    aspect-ratio: 4 / 3; padding: .55rem;
    border: 2px solid var(--r-line); border-radius: .9rem; overflow: hidden;
}
.theme-choice input:checked + .theme-preview { border-color: var(--r-kunyit); box-shadow: 0 0 0 3px rgba(242, 179, 61, .25); }
.theme-choice input:focus-visible + .theme-preview { outline: 2px solid var(--r-kunyit); outline-offset: 2px; }
.theme-preview span { display: block; border-radius: .3rem; }
.tp-bar { height: .45rem; }
.tp-card { height: 1.5rem; }
.tp-line { width: 60%; height: .3rem; }
.theme-preview-dark { background: #0d1517; }
.theme-preview-dark .tp-bar { background: #182a2f; }
.theme-preview-dark .tp-card { background: #132024; border: 1px solid #223a40; }
.theme-preview-dark .tp-line { background: #3fbf8a; }
.theme-preview-light { background: #f4f7f5; }
.theme-preview-light .tp-bar { background: #ffffff; }
.theme-preview-light .tp-card { background: #ffffff; border: 1px solid #d6e1dc; }
.theme-preview-light .tp-line { background: #1f9d6b; }
.theme-preview-system { background: linear-gradient(135deg, #0d1517 50%, #f4f7f5 50%); }
.theme-preview-system .tp-bar { background: #3fbf8a; opacity: .5; }
.theme-preview-system .tp-card { background: rgba(127, 140, 135, .35); }
.theme-preview-system .tp-line { background: #f2b33d; }
.theme-choice-label { text-align: center; font-weight: 700; font-size: .875rem; }

.setting-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem 0; border-top: 1px solid var(--r-line);
}
.card-r-head + .setting-row { border-top: 0; padding-top: 0; }
.setting-row-stack { flex-direction: column; align-items: stretch; gap: .4rem; }
.setting-text { display: grid; gap: .1rem; }
.setting-text span { font-size: .85rem; color: var(--r-muted); }
.form-switch .form-check-input { width: 2.7em; height: 1.45em; cursor: pointer; }
.form-switch .form-check-input:checked { background-color: var(--r-daun); border-color: var(--r-daun); }
.form-range::-webkit-slider-thumb { background: var(--r-kunyit); }
.form-range::-moz-range-thumb { background: var(--r-kunyit); }
.form-range:disabled { opacity: .45; }
.sound-tests { display: flex; flex-wrap: wrap; gap: .5rem; }
.setting-subtitle { margin-bottom: .75rem; font-size: 1rem; }

/* Catatan rilis */
.release-list { display: grid; gap: 1rem; max-width: 46rem; margin: 0; }
.release {
    padding: 1.25rem;
    border: 1px solid var(--r-line); border-radius: 1.25rem;
    background: var(--r-surface);
}
.release.is-latest { border-color: color-mix(in srgb, var(--r-daun) 50%, var(--r-line)); }
.release-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.release-version { padding: .1rem .6rem; border-radius: .45rem; background: var(--r-raised); font-weight: 800; font-size: .85rem; }
.release-date { margin-left: auto; font-size: .85rem; color: var(--r-muted); }
.release-title { margin: .7rem 0 .5rem; font-size: 1.1rem; }
.release-items { margin: 0; padding-left: 1.15rem; }
.release-items li { margin: .3rem 0; }
.release-items li::marker { color: var(--r-daun); }

/* =========================================================
   v1.3: tas, pedagang, perlengkapan
   ========================================================= */
[data-bs-theme="dark"] {
    --rar-common: #8fa6a0;
    --rar-uncommon: #3fbf8a;
    --rar-rare: #5aa2f0;
    --rar-epic: #b48cf2;
    --rar-legendary: #f2b33d;
}
[data-bs-theme="light"] {
    --rar-common: #6b7d77;
    --rar-uncommon: #1f9d6b;
    --rar-rare: #2f74c8;
    --rar-epic: #7d4cc9;
    --rar-legendary: #9a6400;
}
.rarity-common    { --rar: var(--rar-common); }
.rarity-uncommon  { --rar: var(--rar-uncommon); }
.rarity-rare      { --rar: var(--rar-rare); }
.rarity-epic      { --rar: var(--rar-epic); }
.rarity-legendary { --rar: var(--rar-legendary); }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-head .page-title { margin-top: 0; }

.seg-inline { display: inline-grid; grid-auto-flow: column; grid-template-columns: none; margin-bottom: 0; }
.seg-inline .seg-item { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .45rem .9rem; border: 0; background: transparent; font-size: .875rem; }
.seg-inline .seg-item.active { background: var(--r-surface); color: var(--r-text); }

.stat-tiles-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .stat-tiles-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Slot yang sedang dipakai */
.worn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 768px) { .worn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.worn {
    display: grid; gap: .2rem; align-content: start;
    padding: .75rem .85rem;
    border: 1px dashed var(--r-line); border-radius: .9rem;
}
.worn.is-filled { border-style: solid; border-left: 3px solid var(--rar, var(--r-line)); background: var(--r-raised); }
.worn-slot { font-size: .75rem; font-weight: 700; color: var(--r-muted); }
.worn-name { font-weight: 800; }
.worn-name i { color: var(--rar, var(--r-muted)); }
.worn-stats { font-size: .78rem; color: var(--r-muted); }
.worn-empty { font-size: .875rem; color: var(--r-muted); }
.worn form { margin: .35rem 0 0; }

/* Daftar barang */
.inv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.inv-search { position: relative; flex: 1 1 14rem; }
.inv-search i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--r-muted); pointer-events: none; }
.inv-search .form-control { padding-left: 2.4rem; }

.item-list { display: grid; gap: .55rem; margin: 0; }
.item {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .9rem; align-items: center;
    padding: .85rem 1rem;
    border: 1px solid var(--r-line); border-left: 3px solid var(--rar, var(--r-line)); border-radius: 1rem;
    background: var(--r-surface);
}
@media (min-width: 576px) { .item { grid-template-columns: auto minmax(0, 1fr) auto; } }
.item-icon {
    display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem; border-radius: .8rem;
    background: color-mix(in srgb, var(--rar, var(--r-muted)) 16%, var(--r-surface));
    color: var(--rar, var(--r-muted)); font-size: 1.25rem;
}
.item-body { display: grid; gap: .35rem; min-width: 0; }
.item-name { margin: 0; font-weight: 800; }
.item-qty { margin-left: .25rem; font-weight: 700; color: var(--r-muted); font-variant-numeric: tabular-nums; }
.chip-rarity { color: var(--rar, var(--r-muted)); background: color-mix(in srgb, var(--rar, var(--r-muted)) 14%, transparent); }
.chip-ok { color: var(--r-daun); background: color-mix(in srgb, var(--r-daun) 14%, transparent); }
.item-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; grid-column: 1 / -1; }
@media (min-width: 576px) { .item-actions { grid-column: auto; } }
.item-actions form { margin: 0; }
.item-actions-stack { gap: .75rem; }
.price { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Dialog jual */
.qty-row { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; }
.qty-row .icon-btn { width: 3rem; height: 3rem; }
.qty-quick { display: flex; gap: .5rem; margin: .75rem 0 1rem; }
.qty-quick .btn { flex: 1; }
.sell-total { margin: 0 0 1rem; text-align: center; color: var(--r-muted); }
.sell-total strong { color: var(--r-kunyit-ink); font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* =========================================================
   v1.4: bertarung
   ========================================================= */
.fighter { margin-bottom: 1.5rem; }
.fighter-top { display: flex; gap: 1rem; align-items: flex-start; }
.fighter-body { display: grid; gap: .45rem; flex: 1; min-width: 0; }
.fighter-title { margin: 0; font-size: 1.3rem; }
.fighter-stats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem;
    margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--r-line);
}
@media (min-width: 768px) { .fighter-stats { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.fighter-stats li { display: grid; gap: .25rem; align-content: start; }
.fighter-stats strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.fighter-warn {
    display: flex; gap: .5rem; align-items: baseline;
    margin: 1rem 0 0; padding: .7rem .9rem; border-radius: .8rem;
    background: color-mix(in srgb, var(--r-kembang) 12%, transparent); color: var(--r-text); font-size: .9rem;
}
.fighter-warn i { color: var(--r-kembang); }

.monster-list { display: grid; gap: .6rem; margin: 0; }
.monster {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem .9rem; align-items: center;
    padding: 1rem;
    border: 1px solid var(--r-line); border-radius: 1rem;
    background: var(--r-surface);
}
@media (min-width: 768px) { .monster { grid-template-columns: auto minmax(0, 1fr) auto; } }
.monster-avatar {
    display: grid; place-items: center; flex: none;
    width: 2.9rem; height: 2.9rem; border-radius: .85rem;
    background: color-mix(in srgb, var(--r-kembang) 16%, var(--r-surface)); color: var(--r-kembang);
    font-weight: 800; font-size: 1.15rem;
}
.monster-body { display: grid; gap: .4rem; min-width: 0; }
.monster-name { margin: 0; font-weight: 800; }
.monster-drops { margin: 0; font-size: .8rem; color: var(--r-muted); }
.drop-name { color: var(--rar, var(--r-text)); font-weight: 700; }
.monster-action { display: flex; align-items: center; justify-content: space-between; gap: .75rem; grid-column: 1 / -1; }
@media (min-width: 768px) { .monster-action { grid-column: auto; justify-content: flex-end; } }
.monster-action form { margin: 0; }
.win-chance { display: grid; justify-items: start; line-height: 1.25; }
@media (min-width: 768px) { .win-chance { justify-items: end; } }

.diff-tag { font-weight: 800; font-size: .85rem; }
.diff-easy   { --diff: var(--r-daun); }
.diff-even   { --diff: var(--r-kunyit-ink); }
.diff-hard   { --diff: #e07a3a; }
.diff-deadly { --diff: var(--r-kembang); }
.monster .diff-tag { color: var(--diff); }
.monster.diff-deadly { border-color: color-mix(in srgb, var(--r-kembang) 35%, var(--r-line)); }

.recent-list { display: grid; gap: .55rem; }
.recent-list li { display: flex; align-items: center; gap: .65rem; }
.result-dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.result-dot.is-win { background: var(--r-daun); }
.result-dot.is-loss { background: var(--r-kembang); }

/* Hasil pertarungan */
.battle { display: grid; gap: 1rem; }
.arena {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; align-items: center;
    padding: 1rem; border: 1px solid var(--r-line); border-radius: 1.25rem; background: var(--r-surface);
}
@media (min-width: 768px) { .arena { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; } }
.fighter-card { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.fighter-card-body { display: grid; gap: .3rem; flex: 1; min-width: 0; }
.fighter-card-name { margin: 0; font-weight: 800; }
.vs { justify-self: center; font-weight: 800; font-size: .85rem; color: var(--r-muted); }
.fighter-card.is-hit .avatar, .fighter-card.is-hit .monster-avatar { animation: hit-shake .25s; }
@keyframes hit-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .fighter-card.is-hit .avatar, .fighter-card.is-hit .monster-avatar { animation: none; } }

.battle-log-wrap { padding: 1rem; border: 1px solid var(--r-line); border-radius: 1.25rem; background: var(--r-surface); }
.battle-log-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.battle-log { display: grid; gap: .3rem; max-height: 18rem; margin: 0; overflow-y: auto; scroll-behavior: smooth; }
.log-row { display: flex; gap: .7rem; padding: .35rem .5rem; border-radius: .5rem; font-size: .9rem; }
.log-row.is-player { background: color-mix(in srgb, var(--r-daun) 8%, transparent); }
.log-row.is-monster { background: color-mix(in srgb, var(--r-kembang) 8%, transparent); }
.log-row.is-miss { color: var(--r-muted); }
.log-round { flex: none; width: 2.2rem; font-size: .75rem; font-weight: 800; color: var(--r-muted); font-variant-numeric: tabular-nums; padding-top: .1rem; }
.crit { color: var(--r-kunyit-ink); }
.battle.is-replaying .log-row:not(.is-shown) { display: none; }
.battle.is-replaying .battle-outcome { display: none; }

.battle-outcome { padding: 1.25rem; border: 1px solid var(--r-line); border-radius: 1.25rem; background: var(--r-surface); }
.battle-outcome.is-win { border-color: color-mix(in srgb, var(--r-daun) 50%, var(--r-line)); }
.battle-outcome.is-loss { border-color: color-mix(in srgb, var(--r-kembang) 40%, var(--r-line)); }
.outcome-title { margin: 0 0 .25rem; font-size: clamp(1.6rem, 5vw, 2.2rem); }
.battle-outcome.is-win .outcome-title { color: var(--r-daun); }
.battle-outcome.is-loss .outcome-title { color: var(--r-kembang); }
.outcome-sub { margin-bottom: 1rem; color: var(--r-muted); }
.battle-outcome .return-list { margin-bottom: 1rem; }
.return-list li[class*="rarity-"] i { color: var(--rar); }
.outcome-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.outcome-actions form { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
    .battle-outcome.is-revealed { animation: toast-in .25s ease-out; }
}

/* =========================================================
   v1.5: pasar
   ========================================================= */
.form-select {
    border-color: var(--r-line); border-radius: .7rem;
    background-color: var(--r-surface); color: var(--r-text);
}
.form-select:focus { border-color: var(--r-kunyit); box-shadow: 0 0 0 .2rem rgba(242, 179, 61, .22); }
.market-select { width: auto; flex: 0 1 auto; }

a.item-link { color: var(--r-text); }
a.item-link:hover { color: var(--r-text); text-decoration: none; border-color: var(--rar, var(--r-daun)); }
.item-link .item-name { display: block; }
.price-block { display: grid; justify-items: end; line-height: 1.2; }
.price-block small { font-size: .72rem; }
.item-icon-lg { width: 3.5rem; height: 3.5rem; border-radius: 1rem; font-size: 1.6rem; }

.book { width: 100%; border-collapse: collapse; font-size: .9rem; }
.book th { padding: .4rem .25rem; border-bottom: 1px solid var(--r-line); font-size: .75rem; font-weight: 700; color: var(--r-muted); }
.book td { padding: .5rem .25rem; border-bottom: 1px solid var(--r-line); }
.book tr:last-child td { border-bottom: 0; }
.book tr.is-mine td { color: var(--r-muted); }

.list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.price-hints {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem;
    margin: .75rem 0 .5rem; font-size: .85rem; color: var(--r-muted);
}
.price-hint-actions { display: flex; gap: .4rem; flex-wrap: wrap; width: 100%; }
.list-warn {
    display: flex; gap: .5rem; align-items: baseline;
    margin: .5rem 0; padding: .6rem .8rem; border-radius: .7rem;
    background: color-mix(in srgb, var(--r-kunyit) 14%, transparent); font-size: .85rem;
}
.list-warn i { color: var(--r-kunyit-ink); }
.list-summary { margin: .75rem 0 1rem; }
.list-summary dd { font-variant-numeric: tabular-nums; }

.history-list { display: grid; gap: .1rem; }
.history-list li {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .65rem 0; border-top: 1px solid var(--r-line);
}
.history-list li:first-child { border-top: 0; padding-top: 0; }
.history-list .text-end p { font-variant-numeric: tabular-nums; }

/* =========================================================
   v1.6: crafting
   ========================================================= */
.text-daun { color: var(--r-daun) !important; }
.job-inputs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; }
.job-inputs-label { font-size: .78rem; font-weight: 700; color: var(--r-muted); }
.chip-have { font-weight: 600; opacity: .75; }
.return-list li.is-used i { color: var(--r-muted); }
.return-list li.is-used strong { color: var(--r-muted); }

/* =========================================================
   v1.7: komunitas
   ========================================================= */
.player-link { color: var(--r-text); font-weight: 700; }
.player-link:hover { color: var(--r-text); }
.guild-tag { color: var(--r-kunyit-ink); font-weight: 800; }

.chip-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chip-link {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .8rem; border: 1px solid var(--r-line); border-radius: 999px;
    font-size: .85rem; font-weight: 700; color: var(--r-muted);
}
.chip-link:hover { color: var(--r-text); text-decoration: none; }
.chip-link.active { border-color: var(--r-daun); background: color-mix(in srgb, var(--r-daun) 14%, transparent); color: var(--r-text); }

.my-rank {
    display: flex; align-items: center; gap: .75rem;
    margin-bottom: 1rem; padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--r-kunyit) 45%, var(--r-line)); border-radius: 1rem;
    background: color-mix(in srgb, var(--r-kunyit) 8%, var(--r-surface)); color: var(--r-text);
}
a.my-rank:hover { color: var(--r-text); text-decoration: none; border-color: var(--r-kunyit); }
.rank-badge { font-weight: 800; color: var(--r-kunyit-ink); font-variant-numeric: tabular-nums; }

.rank-list { display: grid; gap: .3rem; margin: 0; }
.rank-row {
    display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: .75rem; align-items: center;
    padding: .65rem .9rem; border: 1px solid var(--r-line); border-radius: .85rem; background: var(--r-surface);
}
.rank-row.is-me { border-color: var(--r-daun); background: color-mix(in srgb, var(--r-daun) 8%, var(--r-surface)); }
.rank-num { font-weight: 800; color: var(--r-muted); text-align: center; font-variant-numeric: tabular-nums; }
.rank-row.is-top1 .rank-num { color: #e9b62e; }
.rank-row.is-top2 .rank-num { color: #a8b3b8; }
.rank-row.is-top3 .rank-num { color: #c98552; }
.rank-name { display: flex; align-items: center; gap: .5rem; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rank-score { display: grid; justify-items: end; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.rank-score small { font-weight: 600; }

/* Chat */
.chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-log {
    display: grid; align-content: start; gap: .65rem;
    height: min(60vh, 34rem); margin: 0; padding: 1rem; overflow-y: auto;
}
.chat-empty { text-align: center; padding: 2rem 0; }
.chat-msg { display: grid; gap: .1rem; max-width: 85%; }
.chat-msg.is-mine { justify-self: end; text-align: right; }
.chat-meta { display: flex; gap: .5rem; align-items: baseline; font-size: .82rem; }
.chat-msg.is-mine .chat-meta { justify-content: flex-end; }
.chat-time { font-size: .72rem; color: var(--r-muted); }
.chat-body {
    padding: .5rem .8rem; border-radius: .9rem .9rem .9rem .25rem;
    background: var(--r-raised); overflow-wrap: anywhere; text-align: left;
}
.chat-msg.is-mine .chat-body { border-radius: .9rem .9rem .25rem .9rem; background: color-mix(in srgb, var(--r-daun) 18%, var(--r-surface)); }
.chat-form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--r-line); }
.chat-form .btn { flex: none; }

/* Guild */
.guild-icon { width: auto; min-width: 2.75rem; padding: 0 .5rem; font-weight: 800; font-size: .85rem; color: var(--r-kunyit-ink); background: color-mix(in srgb, var(--r-kunyit) 14%, var(--r-surface)); }
.guild-icon-lg { min-width: 4.5rem; height: 4.5rem; font-size: 1.1rem; border-radius: 1rem; }
.create-guild summary { cursor: pointer; font-weight: 800; list-style: none; }
.create-guild summary::-webkit-details-marker { display: none; }
.create-guild summary i { color: var(--r-daun); }
.member-list { display: grid; gap: .1rem; }
.member-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .65rem 0; border-top: 1px solid var(--r-line); }
.member-list li:first-child { border-top: 0; padding-top: 0; }
.member-main { flex: 1; min-width: 8rem; }
.member-actions { display: flex; gap: .4rem; width: 100%; justify-content: flex-end; }
@media (min-width: 768px) { .member-actions { width: auto; } }
.member-actions form { margin: 0; }
.danger-zone { border-color: color-mix(in srgb, var(--r-kembang) 30%, var(--r-line)); }

/* =========================================================
   v1.8: panel admin
   ========================================================= */
.side-label { margin: 0 .75rem .35rem; font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: var(--r-muted); }
.game[data-sidebar="collapsed"] .side-label { display: none; }
.admin-content { max-width: 80rem; }
.admin-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .admin-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.admin-tiles .stat-label i { color: var(--r-daun); }
.admin-grid { display: grid; gap: 1rem; }
@media (min-width: 992px) { .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.admin-form { max-width: 42rem; }

.table-wrap { padding: 0; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.admin-table th { padding: .65rem .8rem; border-bottom: 1px solid var(--r-line); font-size: .75rem; font-weight: 800; color: var(--r-muted); text-align: left; white-space: nowrap; }
.admin-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--r-line); vertical-align: top; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--r-raised); }
.admin-table tr.is-deleted td { opacity: .55; }
.admin-table th.text-end { text-align: right; }
.admin-table form { margin: 0; display: inline; }
.chat-cell { max-width: 28rem; overflow-wrap: anywhere; }

.pager { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; }
.scroll-box { max-height: 18rem; overflow-y: auto; }

.log-type {
    display: inline-block; padding: .05rem .45rem; border-radius: .35rem;
    font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    background: var(--r-raised); color: var(--r-muted);
}
.log-admin  { background: color-mix(in srgb, var(--r-kembang) 16%, transparent); color: var(--r-kembang); }
.log-market { background: color-mix(in srgb, var(--r-daun) 16%, transparent); color: var(--r-daun); }
.log-shop   { background: color-mix(in srgb, var(--r-kunyit) 18%, transparent); color: var(--r-kunyit-ink); }
.log-guild  { background: color-mix(in srgb, #5aa2f0 18%, transparent); color: #5aa2f0; }
.log-data summary { font-size: .78rem; color: var(--r-muted); cursor: pointer; }
.log-data pre { margin: .4rem 0 0; padding: .6rem; border-radius: .5rem; background: var(--r-raised); font-size: .75rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* =========================================================
   v1.9 dan v1.10: notifikasi, harian, misi, pencapaian,
   halaman legal dan error, pengaturan admin
   ========================================================= */
.bell { position: relative; }
.bell-badge {
    position: absolute; top: -.35rem; right: -.35rem;
    min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
    border-radius: 999px; background: var(--r-kembang); color: #fff;
    font-size: .68rem; font-weight: 800; line-height: 1.15rem; text-align: center;
}

.daily-row { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .daily-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }
.daily-card.is-ready { border-color: color-mix(in srgb, var(--r-kunyit) 55%, var(--r-line)); }
.card-r-head h2 i { margin-right: .25rem; }

.mini-quests { display: grid; gap: .45rem; }
.mini-quests li { display: flex; justify-content: space-between; gap: .75rem; }
.mini-quest-title { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mini-quests li.is-done .muted { color: var(--r-kunyit-ink); font-weight: 700; }
.mini-quests li.is-claimed { opacity: .55; text-decoration: line-through; text-decoration-color: var(--r-line); }

.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; margin: 0; }
@media (max-width: 575.98px) { .week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.week-day {
    display: grid; justify-items: center; gap: .05rem;
    padding: .55rem .25rem; border: 1px solid var(--r-line); border-radius: .75rem;
    text-align: center; font-variant-numeric: tabular-nums;
}
.week-label { font-size: .7rem; font-weight: 700; color: var(--r-muted); }
.week-day.is-today { border-color: var(--r-kunyit); background: color-mix(in srgb, var(--r-kunyit) 12%, var(--r-surface)); }
.week-day.is-past { opacity: .5; }

.quest .item-body progress { margin: .1rem 0; }
.quest.is-done:not(.is-claimed) { border-color: color-mix(in srgb, var(--r-kunyit) 55%, var(--r-line)); }
.quest.is-claimed { opacity: .65; }

.ach-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); margin: 0; }
.ach {
    display: flex; gap: .85rem; align-items: flex-start;
    padding: 1rem; border: 1px solid var(--r-line); border-radius: 1rem; background: var(--r-surface);
}
.ach-icon {
    display: grid; place-items: center; flex: none;
    width: 2.9rem; height: 2.9rem; border-radius: .9rem;
    background: var(--r-raised); color: var(--r-muted); font-size: 1.35rem;
}
.ach.is-open { border-color: color-mix(in srgb, var(--r-kunyit) 50%, var(--r-line)); }
.ach.is-open .ach-icon { background: color-mix(in srgb, var(--r-kunyit) 18%, var(--r-surface)); color: var(--r-kunyit-ink); }
.ach-body { display: grid; gap: .3rem; flex: 1; min-width: 0; }
.ach-title { margin: 0; font-weight: 800; }
.ach-desc { margin: 0; font-size: .85rem; color: var(--r-muted); }

.badge-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.badge-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .7rem; border-radius: 999px;
    background: color-mix(in srgb, var(--r-kunyit) 14%, var(--r-surface)); color: var(--r-text);
    font-size: .8rem; font-weight: 700;
}
.badge-pill i { color: var(--r-kunyit-ink); }

.notif-list { display: grid; gap: .5rem; margin: 0; }
.notif {
    display: flex; align-items: center; gap: .85rem;
    padding: .85rem 1rem; border: 1px solid var(--r-line); border-radius: 1rem; background: var(--r-surface);
}
.notif.is-new { border-color: color-mix(in srgb, var(--r-daun) 50%, var(--r-line)); }
.notif-icon {
    display: grid; place-items: center; flex: none;
    width: 2.4rem; height: 2.4rem; border-radius: .75rem; background: var(--r-raised); color: var(--r-muted);
}
.notif-admin .notif-icon { color: var(--r-kembang); }
.notif-achievement .notif-icon { color: var(--r-kunyit-ink); }
.notif-market .notif-icon { color: var(--r-daun); }
.notif-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.food-list { display: grid; gap: .5rem; }
.food-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.food-list form { margin: 0; }

.legal { max-width: 46rem; padding-top: 1.5rem; }
.legal h1 { font-size: clamp(1.7rem, 5vw, 2.3rem); margin-bottom: .25rem; }
.legal-body h2 { margin: 1.75rem 0 .5rem; font-size: 1.2rem; }
.legal-body p, .legal-body li { color: var(--r-text); line-height: 1.7; }
.legal-body ul { padding-left: 1.2rem; }

.error-page {
    display: grid; justify-items: center; align-content: center; gap: .5rem;
    min-height: 100vh; padding: 2rem 1rem; text-align: center;
}
.error-page h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
.error-page p { max-width: 30rem; }
.error-code { margin: 0; font-size: clamp(3.5rem, 14vw, 6rem); font-weight: 800; line-height: 1; color: var(--r-kunyit-ink); }

.settings-admin { max-width: 52rem; }
.settings-admin .card-r { scroll-margin-top: calc(var(--appbar-h) + 1rem); }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }

.flag-card { padding: 1rem 1.1rem; }
.flag-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.flag-form .form-control { flex: 1 1 14rem; }

/* v1.10.1: panduan harga */
.price-guide {
    margin: .75rem 0 .5rem; padding: .75rem .9rem;
    border: 1px solid color-mix(in srgb, var(--r-kunyit) 40%, var(--r-line)); border-radius: .8rem;
    background: color-mix(in srgb, var(--r-kunyit) 7%, var(--r-surface));
}
.price-guide-main { display: flex; gap: .5rem; align-items: baseline; margin: 0 0 .25rem; }
.price-guide-main i { color: var(--r-kunyit-ink); }
.price-guide-main strong { color: var(--r-kunyit-ink); font-variant-numeric: tabular-nums; }
.price-guide-sub { display: flex; flex-wrap: wrap; gap: .2rem .75rem; margin: 0 0 .6rem; font-size: .82rem; color: var(--r-muted); }

/* v1.11.0: chat */
.count-badge, .nav-badge {
    display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
    border-radius: 999px; background: var(--r-kembang); color: #fff; font-size: .68rem; font-weight: 800;
}
.nav-item .nav-badge { margin-left: auto; }
.game[data-sidebar="collapsed"] .side .nav-badge { position: absolute; margin: -1.1rem 0 0 1.1rem; }
.chat-lock {
    display: flex; gap: .75rem; align-items: flex-start;
    margin-bottom: 1rem; padding: .9rem 1rem; border-radius: 1rem;
    background: color-mix(in srgb, var(--r-kunyit) 10%, var(--r-surface));
    border: 1px solid color-mix(in srgb, var(--r-kunyit) 40%, var(--r-line));
}
.chat-lock > i { font-size: 1.3rem; color: var(--r-kunyit-ink); }
.chat-report {
    padding: 0 .2rem; border: 0; background: transparent; color: var(--r-muted);
    font-size: .75rem; opacity: 0; transition: opacity .15s;
}
.chat-msg:hover .chat-report, .chat-report:focus-visible { opacity: 1; }
@media (hover: none) { .chat-report { opacity: .6; } }
.chat-report:disabled { opacity: .3; }

.dm-layout { display: grid; gap: 1rem; }
@media (min-width: 992px) { .dm-layout { grid-template-columns: 17rem minmax(0, 1fr); align-items: start; } }
.dm-new { display: flex; gap: .4rem; margin-bottom: .75rem; }
.dm-threads { display: grid; gap: .2rem; }
.dm-thread { display: flex; align-items: center; gap: .6rem; padding: .5rem; border-radius: .7rem; color: var(--r-text); }
.dm-thread:hover { background: var(--r-raised); color: var(--r-text); text-decoration: none; }
.dm-thread.active { background: var(--r-raised); }
.dm-thread-text { display: grid; min-width: 0; line-height: 1.25; }
.dm-thread-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--r-muted); }
.dm-thread.is-unread strong::after { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: .35rem; border-radius: 50%; background: var(--r-kembang); vertical-align: middle; }
.dm-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.dm-head form { margin: 0; }

/* v1.11.0: bahasa */
.lang-switch { display: inline-flex; gap: .15rem; padding: .15rem; border: 1px solid var(--r-line); border-radius: .6rem; }
.lang-switch a { padding: .2rem .45rem; border-radius: .45rem; font-size: .75rem; font-weight: 800; color: var(--r-muted); }
.lang-switch a:hover { color: var(--r-text); text-decoration: none; }
.lang-switch a.active { background: var(--r-raised); color: var(--r-text); }
.site-header-actions .lang-switch, .site-header .lang-switch { margin-right: .25rem; }
.lang-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.sheet-lang { cursor: default; }
.sheet-lang:hover { background: transparent; }

/* v1.12.0: ikon gambar */
.game-icon { display: block; width: 100%; height: 100%; object-fit: contain; }
.item-icon .game-icon, .skill-badge .game-icon, .dock-icon .game-icon, .job-icon .game-icon { width: 82%; height: 82%; }
.monster-avatar .game-icon { width: 90%; height: 90%; }
.worn-name .game-icon, .chip-link .game-icon, .return-list .game-icon {
    display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.2em;
}
.icon-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); margin: 0; }
.icon-card { display: grid; justify-items: center; gap: .35rem; padding: 1rem .75rem; text-align: center; border-top: 3px solid var(--rar, var(--r-line)); }
.icon-preview {
    display: grid; place-items: center; width: 4.5rem; height: 4.5rem;
    border-radius: 1rem; background: var(--r-raised); color: var(--rar, var(--r-muted)); font-size: 2rem;
}
.icon-preview .game-icon { width: 100%; height: 100%; }
.icon-name { margin: .25rem 0 0; font-weight: 800; }
.icon-meta { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; align-items: center; margin: 0 0 .25rem; }
.icon-upload, .icon-card form { margin: 0; }
.icon-pick { cursor: pointer; }

/* v1.12.0: wiki */
.wiki { display: grid; gap: 1.5rem; padding-top: 1rem; padding-bottom: 2rem; }
@media (min-width: 992px) { .wiki { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; } }
.wiki-side { display: grid; gap: 1rem; }
@media (min-width: 992px) { .wiki-side { position: sticky; top: 1rem; } }
.wiki-search { position: relative; }
.wiki-search i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--r-muted); pointer-events: none; }
.wiki-search .form-control { padding-left: 2.4rem; }
.wiki-side-label { margin: .5rem 0 .25rem; font-size: .75rem; font-weight: 800; color: var(--r-muted); }
.wiki-nav { display: grid; gap: .1rem; margin: 0; }
.wiki-nav a { display: block; padding: .35rem .6rem; border-radius: .5rem; color: var(--r-text); font-weight: 600; font-size: .9rem; }
.wiki-nav a:hover { background: var(--r-raised); text-decoration: none; }
.wiki-nav a.active { background: var(--r-raised); box-shadow: inset 3px 0 0 var(--r-daun); }
.wiki-main { min-width: 0; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem; font-size: .85rem; color: var(--r-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: .3rem; color: var(--r-line); }
.breadcrumbs a { color: var(--r-muted); }
.wiki-hero h1, .wiki-h1 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); }
.wiki-h2 { margin: 1.75rem 0 .75rem; font-size: 1.2rem; }
.wiki-cards { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 0; }
.wiki-card {
    display: grid; gap: .2rem; height: 100%; padding: 1rem;
    border: 1px solid var(--r-line); border-radius: 1rem; background: var(--r-surface); color: var(--r-text);
}
.wiki-card:hover { border-color: var(--r-daun); color: var(--r-text); text-decoration: none; }
.wiki-card strong i { color: var(--r-daun); margin-right: .25rem; }
.wiki-monster { display: flex; align-items: center; gap: .8rem; }
.wiki-results { display: grid; gap: .4rem; margin: 0; }
.wiki-results a { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border: 1px solid var(--r-line); border-radius: .8rem; background: var(--r-surface); color: var(--r-text); }
.wiki-results a:hover { border-color: var(--r-daun); text-decoration: none; }
.wiki-row-icon {
    display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; margin-right: .5rem;
    border-radius: .55rem; background: var(--r-raised); color: var(--rar, var(--r-daun)); vertical-align: middle;
}
.wiki-row-icon .game-icon { width: 85%; height: 85%; }
.wiki-results .wiki-row-icon { margin-right: 0; }
.wiki-item { color: var(--r-text); font-weight: 700; }
.wiki-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.wiki-head-icon {
    display: grid; place-items: center; flex: none; width: 4.5rem; height: 4.5rem;
    border-radius: 1rem; background: var(--r-raised); color: var(--rar, var(--r-daun)); font-size: 2rem;
}
.wiki-head-icon .game-icon { width: 85%; height: 85%; }
.wiki-facts { max-width: 34rem; }
.wiki-list { padding-left: 1.2rem; }
.wiki-list li { margin: .35rem 0; }
.wiki-table td { vertical-align: middle; }
.wiki-body { max-width: 46rem; line-height: 1.75; }
.wiki-body h2 { margin: 1.75rem 0 .5rem; font-size: 1.25rem; }
.wiki-body h3 { margin: 1.25rem 0 .4rem; font-size: 1.05rem; }
.wiki-body ul { padding-left: 1.2rem; }
.wiki-link { font-weight: 700; white-space: nowrap; }
.wiki-link-icon { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-right: .2em; vertical-align: -.25em; color: var(--rar, var(--r-daun)); }
.wiki-link-icon .game-icon { width: 100%; height: 100%; }

/* v1.13.0: peta dan wilayah */
:root { --danger-safe: #4caf7d; --danger-medium: #e0a83b; --danger-dangerous: #e06b3b; --danger-deadly: #c8364b; }
.map-card { padding: .75rem; overflow: hidden; }
.nusantara-map { display: block; width: 100%; height: auto; }
.nusantara-map .prov { fill: var(--r-raised); stroke: var(--r-surface); stroke-width: .6; }
.nusantara-map .prov-game { fill: color-mix(in srgb, var(--r-raised) 70%, var(--r-muted)); }
.nusantara-map .prov.danger-safe { fill: color-mix(in srgb, var(--danger-safe) 55%, var(--r-raised)); }
.nusantara-map .prov.danger-medium { fill: color-mix(in srgb, var(--danger-medium) 55%, var(--r-raised)); }
.nusantara-map .prov.danger-dangerous { fill: color-mix(in srgb, var(--danger-dangerous) 55%, var(--r-raised)); }
.nusantara-map .prov.danger-deadly { fill: color-mix(in srgb, var(--danger-deadly) 55%, var(--r-raised)); }
.nusantara-map .prov.is-locked { fill-opacity: .45; }
.nusantara-map .prov.is-here { stroke: var(--r-kunyit); stroke-width: 1.4; }
.map-marker circle { fill: var(--r-surface); stroke: var(--danger-safe); stroke-width: 3; }
.map-marker.danger-medium circle { stroke: var(--danger-medium); }
.map-marker.danger-dangerous circle { stroke: var(--danger-dangerous); }
.map-marker.danger-deadly circle { stroke: var(--danger-deadly); }
.map-marker.is-here circle { fill: var(--r-kunyit); }
.map-marker.is-locked { opacity: .6; }
.map-marker text { font: 800 13px var(--r-font, sans-serif); fill: var(--r-text); paint-order: stroke; stroke: var(--r-surface); stroke-width: 3px; }
.map-marker:hover circle, .map-marker:focus circle { stroke-width: 5; }
.map-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .5rem .25rem 0; font-size: .8rem; color: var(--r-muted); }
.legend-dot { display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem; border-radius: 50%; background: var(--danger-safe); vertical-align: -.05em; }
.legend-dot.danger-medium { background: var(--danger-medium); }
.legend-dot.danger-dangerous { background: var(--danger-dangerous); }
.legend-dot.danger-deadly { background: var(--danger-deadly); }
.legend-dot.is-locked { background: var(--r-line); }
.danger-chip.danger-safe { color: var(--danger-safe); }
.danger-chip.danger-medium { color: var(--danger-medium); }
.danger-chip.danger-dangerous { color: var(--danger-dangerous); }
.danger-chip.danger-deadly { color: var(--danger-deadly); }
.region-content { display: grid; gap: 1rem; }
@media (min-width: 768px) { .region-content { grid-template-columns: 1fr 1fr; } }
.region-h3 { margin: .25rem 0 .5rem; font-size: .95rem; }
.region-jobs { display: grid; gap: .3rem; margin: 0; }
.region-jobs a { display: inline-flex; align-items: center; gap: .45rem; color: var(--r-text); font-weight: 600; }
.region-job-icon { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: .45rem; background: var(--r-raised); color: var(--r-daun); font-size: .85rem; }
.region-job-icon.monster-avatar { width: 1.6rem; height: 1.6rem; font-size: .75rem; }
.region-job-icon .game-icon { width: 85%; height: 85%; }
.region-list { display: grid; gap: .75rem; margin: 0; }
@media (min-width: 992px) { .region-list { grid-template-columns: 1fr 1fr; } }
.region-card { border-left: 4px solid var(--danger-safe); }
.region-card.danger-medium { border-left-color: var(--danger-medium); }
.region-card.danger-dangerous { border-left-color: var(--danger-dangerous); }
.region-card.danger-deadly { border-left-color: var(--danger-deadly); }
.region-card.is-here { box-shadow: 0 0 0 2px color-mix(in srgb, var(--r-kunyit) 60%, transparent); }
.region-card-head { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; margin-bottom: .5rem; }
.region-name { margin: 0 0 .3rem; font-size: 1.1rem; }
.region-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.region-actions form, .region-card form { margin: 0; }
.req-list { display: grid; gap: .2rem; margin: 0 0 .6rem; font-size: .85rem; color: var(--r-muted); }
.req-list li.ok { color: var(--danger-safe); }
.travel-banner, .region-warn, .region-unlocked {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; padding: .75rem 1rem; border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--r-kunyit) 45%, var(--r-line)); background: color-mix(in srgb, var(--r-kunyit) 9%, var(--r-surface));
}
.travel-banner > i, .region-warn > i, .region-unlocked > i { font-size: 1.3rem; color: var(--r-kunyit-ink); }
.travel-banner span { flex: 1; min-width: 12rem; }
.region-warn { border-color: color-mix(in srgb, var(--danger-dangerous) 45%, var(--r-line)); background: color-mix(in srgb, var(--danger-dangerous) 9%, var(--r-surface)); }
.region-warn > i { color: var(--danger-dangerous); }
.region-unlocked { border-color: color-mix(in srgb, var(--danger-safe) 50%, var(--r-line)); background: color-mix(in srgb, var(--danger-safe) 10%, var(--r-surface)); }
.region-unlocked > i { color: var(--danger-safe); }
.tabbar .nav-item span { font-size: .68rem; }
.here-line { margin: -.25rem 0 1rem; font-size: .9rem; color: var(--r-muted); }
.here-line i { color: var(--r-kunyit-ink); }
.here-line a { font-weight: 700; }

/* v1.14.0: aplikasi, notifikasi, hapus akun */
.danger-zone { border-color: color-mix(in srgb, var(--danger-deadly, #c8364b) 45%, var(--r-line)); }
.danger-zone h2 { color: var(--danger-deadly, #c8364b); }
.btn-danger-soft { background: color-mix(in srgb, #c8364b 14%, var(--r-surface)); color: #e05a6c; border: 1px solid color-mix(in srgb, #c8364b 50%, var(--r-line)); font-weight: 700; }
.btn-danger-soft:hover { background: #c8364b; color: #fff; }
.offline-logo { border-radius: 1.1rem; margin-bottom: 1rem; }
.error-page main { display: grid; justify-items: center; text-align: center; gap: .25rem; padding: 2rem 1rem; }

/* v1.14.1: pengumuman */
.notif-text { white-space: pre-line; }
.notify-form fieldset legend { font-size: .9rem; }
.guardian-box { display: flex; gap: .75rem; align-items: center; margin: .25rem 0 .6rem; padding: .6rem; border-radius: .8rem; background: var(--r-raised); }
.guardian-box .monster-avatar { flex: none; }
.chip.chance-easy { color: var(--danger-safe, #4caf7d); }
.chip.chance-even { color: var(--danger-medium, #e0a83b); }
.chip.chance-hard { color: var(--danger-deadly, #c8364b); }

/* v1.16.0: dungeon */
.dungeon-facts { max-width: 40rem; }
.dungeon-stages, .dungeon-loot, .dungeon-log { display: grid; gap: .4rem; margin: 0 0 1rem; }
.dungeon-stages li { display: flex; align-items: center; gap: .75rem; padding: .5rem .7rem; border-radius: .8rem; background: var(--r-raised); }
.dungeon-stages .chip { margin-left: auto; }
.dungeon-loot li { display: flex; align-items: center; gap: .4rem; }
.dungeon-loot .unique-loot { padding: .4rem .6rem; border-radius: .7rem; background: color-mix(in srgb, var(--rar, var(--r-kunyit)) 12%, var(--r-surface)); }
.dungeon-log li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto auto; gap: .5rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--r-line); }
.dungeon-log li:last-child { border-bottom: 0; }

/* v1.16.2: sidebar berkelompok */
.nav-group > summary { list-style: none; cursor: pointer; user-select: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.side-nav .nav-group-head:hover { background: var(--r-raised); color: var(--r-text); }
.nav-group.has-active > .nav-group-head { color: var(--r-text); }
.nav-group-head .nav-caret { margin-left: auto; font-size: .75rem !important; opacity: .7; transition: transform .15s ease; }
.nav-group[open] > .nav-group-head .nav-caret { transform: rotate(180deg); }
.nav-group[open] > .nav-group-head .nav-group-badge { display: none; }
.nav-group-head .nav-group-badge + .nav-caret { margin-left: .4rem; }
.nav-group-head .nav-group-badge { margin-left: auto; }
.nav-group-items { display: grid; gap: .15rem; margin: .15rem 0 .35rem 1.05rem; padding-left: .55rem; border-left: 1px solid var(--r-line); }
.side-nav .nav-group-items .nav-item { padding-block: .5rem; font-size: .93rem; }
.side-nav .nav-group-items .nav-item .nav-badge { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .nav-group-head .nav-caret { transition: none; } }
@media (min-width: 992px) {
    /* Sidebar diciutkan menjadi deretan ikon: semua menu tampil langsung tanpa judul kelompok */
    .game[data-sidebar="collapsed"] .nav-group > summary { display: none; }
    .game[data-sidebar="collapsed"] .nav-group-items { margin: 0; padding: 0; border: 0; }
}

/* v1.17.0: panduan pemula */
.tutorial-card { margin-bottom: 1rem; border-color: color-mix(in srgb, var(--r-kunyit) 45%, var(--r-line)); background: color-mix(in srgb, var(--r-kunyit) 6%, var(--r-surface)); }
.tutorial-card form { margin: 0; }
.tutorial-pill {
    position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
    bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); width: min(92vw, 28rem);
    display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: 999px;
    background: var(--r-surface); color: var(--r-text); border: 1px solid color-mix(in srgb, var(--r-kunyit) 50%, var(--r-line));
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25); font-size: .85rem;
}
.tutorial-pill:hover { color: var(--r-text); text-decoration: none; border-color: var(--r-kunyit); }
.tutorial-pill > i { color: var(--r-kunyit-ink); font-size: 1.05rem; }
.tutorial-pill span:first-of-type { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tutorial-pill-go { flex: none; font-weight: 800; color: var(--r-kunyit-ink); }
@media (min-width: 992px) { .tutorial-pill { left: auto; right: 1.25rem; transform: none; bottom: 1.25rem; width: 24rem; } }
.tour-glow { position: relative; z-index: 1; border-radius: .9rem; animation: tour-glow 1.2s ease-in-out infinite; }
@keyframes tour-glow { 0%, 100% { box-shadow: 0 0 0 2px var(--r-kunyit); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--r-kunyit) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tour-glow { animation: none; box-shadow: 0 0 0 3px var(--r-kunyit); } }

/* v1.17.0: laporan masalah */
.fb-thread { display: grid; gap: .6rem; margin: 0 0 1rem; }
.fb-msg { padding: .75rem .9rem; border-radius: .9rem; background: var(--r-raised); max-width: 46rem; }
.fb-msg.is-admin { border-left: 3px solid var(--r-daun); }
.fb-msg.is-player { border-left: 3px solid var(--r-kunyit); }
.fb-msg.is-internal { background: color-mix(in srgb, var(--r-kunyit) 10%, var(--r-surface)); border-left-style: dashed; }
.fb-shot { display: block; max-width: 100%; max-height: 28rem; border-radius: .7rem; border: 1px solid var(--r-line); }
.fb-errors li { padding: .35rem 0; border-bottom: 1px solid var(--r-line); }
.fb-errors code { white-space: pre-wrap; word-break: break-word; }
.chip.fb-status-new { color: var(--r-kunyit-ink); }
.chip.fb-status-progress { color: #5aa9e6; }
.chip.fb-status-done { color: var(--danger-safe, #4caf7d); }
.chip.fb-status-rejected { color: var(--r-muted); }
.chip.fb-prio-high { color: var(--danger-dangerous, #e06b3b); }
.chip.fb-prio-critical { color: #fff; background: var(--danger-deadly, #c8364b); }

/* v1.18.0: guild */
.guild-logo { display: block; width: 100%; height: 100%; border-radius: 22%; object-fit: cover; }
.guild-logo-wrap { display: inline-block; flex: none; width: 3rem; height: 3rem; }
.guild-logo-wrap.is-large { width: 4.75rem; height: 4.75rem; }
.guild-logo-wrap.is-small { width: 2.25rem; height: 2.25rem; }
.guild-mine, .guild-row { display: flex; align-items: center; gap: .85rem; }
.guild-mine { margin-bottom: 1rem; color: var(--r-text); border-color: color-mix(in srgb, var(--r-kunyit) 45%, var(--r-line)); }
.guild-mine:hover { color: var(--r-text); text-decoration: none; border-color: var(--r-kunyit); }
.guild-list { display: grid; gap: .6rem; margin: 0; }
.guild-row form { margin: 0; }
.guild-search { flex-wrap: wrap; gap: .5rem; }
.guild-search .form-select { width: auto; min-width: 9rem; }
.guild-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.guild-head-action { margin-left: auto; min-width: 12rem; }
.guild-head-action form { margin: 0; }
.guild-tabs { margin-bottom: 1rem; flex-wrap: wrap; }
.guild-announce { border-left: 4px solid var(--r-kunyit); }
.guild-treasury { font-size: 1.6rem; margin: .25rem 0 .5rem; }
.guild-motifs { display: flex; flex-wrap: wrap; gap: .4rem; }
.tongkonan-card { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.tongkonan-art { display: grid; place-items: center; width: 6rem; height: 6rem; border-radius: 1.2rem; background: color-mix(in srgb, var(--r-kunyit) 14%, var(--r-raised)); color: var(--r-kunyit-ink); font-size: 2.6rem; }
.chip.role-leader { color: var(--r-kunyit-ink); }
.chip.role-vice { color: #5aa9e6; }
.chip.role-elder { color: var(--danger-safe, #4caf7d); }
td form { margin: 0; }

/* v1.18.1: gambar bangunan guild */
.building-art { display: block; width: 100%; height: auto; image-rendering: auto; }
.building-art.is-icon { display: grid; place-items: center; aspect-ratio: 1; border-radius: 1.2rem; background: color-mix(in srgb, var(--r-kunyit) 14%, var(--r-raised)); color: var(--r-kunyit-ink); font-size: 2.6rem; }
.building-art.is-hero { width: min(16rem, 100%); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.building-art.is-side { width: 7.5rem; flex: none; }
.guild-overview { display: flex; gap: 1.25rem; align-items: flex-start; }
@media (max-width: 575.98px) { .guild-overview { flex-direction: column; } .building-art.is-side { width: 9rem; align-self: center; } }
.tongkonan-visual { display: grid; justify-items: center; gap: .6rem; flex: 0 1 17rem; }
.building-steps { display: flex; gap: .5rem; margin: 0; }
.building-steps li { display: grid; justify-items: center; gap: .15rem; padding: .3rem; border-radius: .7rem; border: 1px solid var(--r-line); font-size: .72rem; color: var(--r-muted); opacity: .55; }
.building-steps li img { width: 3.2rem; height: 3.2rem; }
.building-steps li.is-done { opacity: .85; }
.building-steps li.is-now { opacity: 1; color: var(--r-text); border-color: var(--r-kunyit); background: color-mix(in srgb, var(--r-kunyit) 10%, transparent); }
.building-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.building-phase { display: grid; justify-items: center; text-align: center; gap: .25rem; }
.building-phase form { margin: 0; }
.building-phase-art { display: grid; place-items: center; width: 9rem; height: 9rem; border-radius: 1rem; background: var(--r-raised); font-size: 2rem; }
.building-phase-art img { width: 100%; height: 100%; object-fit: contain; }

/* v1.18.2: daftar guild yang lebih ringkas */
.guild-search { display: flex; flex-wrap: nowrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.guild-search .form-select { width: auto; flex: 0 0 auto; min-width: 11rem; }
@media (max-width: 575.98px) { .guild-search { flex-wrap: wrap; } .guild-search .form-select { width: 100%; } }
.create-guild { max-width: 36rem; }
.guild-tag-input { max-width: 9rem; letter-spacing: .08em; }
.create-guild-cost { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; margin: .5rem 0 1rem; border-radius: .8rem; background: var(--r-raised); }

/* v1.19.0: bangunan guild */
.building-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .8rem; margin: 0; }
.building-card { display: flex; gap: .9rem; align-items: flex-start; }
.building-card.is-locked { opacity: .55; }
.building-card-art { flex: none; width: 6rem; }
.building-card-body { min-width: 0; flex: 1; }
.building-card form { margin: 0; }
.building-name { font-size: 1rem; margin: 0 0 .35rem; }
.building-art.is-ghost { filter: grayscale(1) brightness(.6); opacity: .55; }
.building-cost { display: grid; gap: .1rem; margin: 0 0 .6rem; }
.building-cost li.ok { color: var(--r-text); }
.building-cost li.lack { color: var(--danger-dangerous, #e06b3b); }
.building-art-mini { display: inline-block; width: 3.5rem; flex: none; }
.guild-missions { display: grid; gap: .8rem; }
.guild-missions li.is-done strong { text-decoration: line-through; opacity: .7; }
.guild-bonus-list { display: grid; gap: .6rem; }
.guild-bonus-list li { display: flex; gap: .7rem; align-items: center; }
.chip.chip-guild { color: var(--r-kunyit-ink); border-color: color-mix(in srgb, var(--r-kunyit) 45%, var(--r-line)); }

/* v1.20.0: perang guild */
.war-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .8rem; margin-bottom: .6rem; }
.war-big { font-size: 1.5rem; }
.war-row { flex-wrap: wrap; }
.war-actions { display: flex; gap: .4rem; }
.war-actions form { margin: 0; }
.war-result { display: flex; gap: .9rem; align-items: center; }
.war-result > i { font-size: 2rem; }
.war-result.is-win { border-color: var(--r-kunyit); }
.war-result.is-win > i { color: var(--r-kunyit-ink); }
.war-result.is-loss > i { color: var(--r-muted); }
.war-outcome { margin: .5rem 0 1rem; }
.war-ranking { display: grid; gap: .45rem; }
.war-ranking li { display: flex; align-items: center; gap: .55rem; }
.war-ranking li.is-me { font-weight: 700; }
.war-rank { width: 1.6rem; text-align: center; font-weight: 800; color: var(--r-muted); }
.war-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(8, 12, 14, .72); }
.war-overlay-box { display: grid; justify-items: center; gap: .8rem; padding: 1.5rem 2rem; border-radius: 1rem; background: var(--r-surface); color: var(--r-text); border: 1px solid var(--r-line); }
.war-overlay-box p { margin: 0; font-weight: 700; }
.war-spinner { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 4px solid var(--r-line); border-top-color: var(--r-kunyit); animation: war-spin .8s linear infinite; }
@keyframes war-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .war-spinner { animation-duration: 2s; } }

/* v1.21.0: Tempa Pamor */
.pamor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .8rem; margin: 0; }
.pamor-card.is-empty { opacity: .7; }
.pamor-card form { margin: 0; }
.pamor-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.pamor-icon { flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; }
.pamor-level { margin-left: auto; font-size: 1.35rem; font-weight: 800; color: var(--r-muted); }
.pamor-level.lv-1, .pamor-level.lv-2, .pamor-level.lv-3 { color: var(--r-text); }
.pamor-level.lv-4, .pamor-level.lv-5, .pamor-level.lv-6 { color: #5aa9e6; }
.pamor-level.lv-7, .pamor-level.lv-8, .pamor-level.lv-9 { color: #b37feb; }
.pamor-level.lv-10 { color: var(--r-kunyit-ink); text-shadow: 0 0 10px color-mix(in srgb, var(--r-kunyit) 60%, transparent); }
.pamor-tag { font-weight: 800; color: var(--r-kunyit-ink); }
.pamor-result { display: flex; gap: .9rem; align-items: center; }
.pamor-result > i { font-size: 2rem; }
.pamor-result.is-win { border-color: var(--r-kunyit); }
.pamor-result.is-win > i { color: var(--r-kunyit-ink); }
.pamor-result.is-loss > i { color: var(--danger-dangerous, #e06b3b); }

/* v1.21.1: Tempa Pamor lebih ringkas */
.pamor-card { display: flex; flex-direction: column; }
.pamor-card form { margin-top: auto; }
.pamor-stats { display: grid; gap: .15rem; margin: 0 0 .7rem; font-size: .95rem; }
.pamor-stats li { display: flex; align-items: baseline; gap: .35rem; }
.pamor-stats li .muted:first-child { min-width: 5.5rem; }
.pamor-up { color: var(--danger-safe, #4caf7d); }
.pamor-odds { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .55rem; }
.pamor-pill { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-weight: 800; font-size: .85rem; background: var(--r-raised); }
.pamor-pill.chance-easy { color: var(--danger-safe, #4caf7d); }
.pamor-pill.chance-even { color: var(--r-kunyit-ink); }
.pamor-pill.chance-hard { color: var(--danger-dangerous, #e06b3b); }
.pamor-risk { font-size: .8rem; color: var(--danger-dangerous, #e06b3b); }
.pamor-cost { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .7rem; }
.pamor-cost li { padding: .15rem .55rem; border-radius: .5rem; background: var(--r-raised); font-size: .8rem; }
.pamor-cost li.lack { color: var(--danger-dangerous, #e06b3b); outline: 1px solid color-mix(in srgb, var(--danger-dangerous, #e06b3b) 45%, transparent); }
.pamor-help > summary { cursor: pointer; font-weight: 700; list-style: none; }
.pamor-help > summary::-webkit-details-marker { display: none; }
.pamor-help-body { margin-top: .7rem; }
.pamor-rules { display: grid; gap: .4rem; margin: 0 0 .7rem; }
.pamor-rules li { display: flex; gap: .6rem; align-items: baseline; }
.pamor-rules .pamor-pill { flex: none; min-width: 5.2rem; text-align: center; }
.pamor-result p { margin: 0; }

/* v1.21.3: kartu Tempa Pamor berlabel */
.pamor-info { display: grid; gap: .45rem; margin: 0 0 .8rem; }
.pamor-info > div { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); align-items: center; gap: .5rem; }
.pamor-info dt { margin: 0; font-weight: 500; font-size: .82rem; color: var(--r-muted); }
.pamor-info dd { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.pamor-note { font-size: .78rem; color: var(--r-muted); }
.pamor-info .pamor-pill { padding: .12rem .6rem; border: 1px solid currentColor; background: transparent; font-size: .82rem; }
.pamor-info .pamor-pill.chance-easy { color: var(--danger-safe, #4caf7d); }
.pamor-info .pamor-pill.chance-even { color: var(--r-kunyit, #e8b04a); }
.pamor-info .pamor-pill.chance-hard { color: var(--danger-dangerous, #e06b3b); }
.pamor-info .pamor-risk { font-size: .78rem; }
.pamor-info .pamor-cost { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.pamor-info .pamor-cost li { padding: .1rem .5rem; border-radius: .45rem; border: 1px solid var(--r-line); background: color-mix(in srgb, var(--r-text) 6%, transparent); font-size: .78rem; white-space: nowrap; }
.pamor-info .pamor-cost li.lack { color: var(--danger-dangerous, #e06b3b); border-color: color-mix(in srgb, var(--danger-dangerous, #e06b3b) 55%, transparent); background: color-mix(in srgb, var(--danger-dangerous, #e06b3b) 8%, transparent); outline: 0; }

/* v1.22.0: Toko, Token, dan keanggotaan */
.store-balance { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 999px; background: var(--r-raised); border: 1px solid var(--r-line); font-size: 1.1rem; }
.token-icon { width: 1.6rem; height: 1.6rem; }
.member-card { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.member-card.is-active { border-color: var(--r-kunyit); }
.member-card-art { width: 5.5rem; height: auto; flex: none; }
.member-card form { margin: 0; }
.member-perks { display: grid; gap: .25rem; margin: 0 0 .5rem; }
.member-perks i { color: var(--r-kunyit-ink); margin-right: .3rem; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .8rem; margin: 0; }
.store-item { display: flex; flex-direction: column; }
.store-item form { margin-top: auto; }
.store-item.is-worn { border-color: var(--r-kunyit); }
.cosmetic-preview { display: grid; place-items: center; height: 7rem; margin-bottom: .6rem; border-radius: .8rem; background: var(--r-raised); overflow: hidden; font-size: 1.8rem; }
.cosmetic-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cosmetic-background .cosmetic-preview img { width: 100%; height: 100%; object-fit: cover; }
.cosmetic-badge .cosmetic-preview img { width: 3.5rem; height: 3.5rem; }
.package-tokens { font-size: 1.3rem; font-weight: 800; color: var(--r-kunyit-ink); }
.member-mark { color: var(--r-kunyit-ink); font-size: .9em; margin-left: .15rem; }
.name-badge { width: 1.1em; height: 1.1em; vertical-align: -.15em; margin-left: .15rem; }
.avatar-wrap { position: relative; display: inline-grid; place-items: center; flex: none; }
.avatar-frame { position: absolute; inset: -18%; width: 136%; height: 136%; pointer-events: none; }
.profile-banner { margin: 0 0 -2.5rem; border-radius: 1rem; overflow: hidden; aspect-ratio: 3 / 1; max-height: 14rem; }
.profile-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-banner + .profile-head { position: relative; padding-left: 1rem; }
.store-admin-thumb { width: 3.5rem; height: 3.5rem; object-fit: contain; border-radius: .5rem; background: var(--r-raised); }
.store-admin-thumb.is-background { width: 9rem; height: 3rem; object-fit: cover; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; }
.stat-big { font-size: 1.5rem; font-weight: 800; }

/* v1.23.0: pembayaran QRIS */
.pay-pending { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; border-color: var(--r-kunyit); }
.pay-pending > i { font-size: 1.4rem; color: var(--r-kunyit-ink); }
.pay-grid { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 767.98px) { .pay-grid { grid-template-columns: 1fr; } }
.pay-qr { display: grid; justify-items: center; gap: .6rem; }
.qris-canvas { width: 100%; max-width: 20rem; height: auto; aspect-ratio: 1; border-radius: .8rem; background: #fff; image-rendering: pixelated; }
.pay-amount { font-size: 2.2rem; font-weight: 800; color: var(--r-kunyit-ink); margin: 0 0 .3rem; }
.pay-status { display: flex; align-items: center; gap: .5rem; margin: .8rem 0; font-weight: 600; }
.war-spinner.is-small { width: 1.1rem; height: 1.1rem; border-width: 3px; }
.pay-done { display: grid; justify-items: center; text-align: center; gap: .4rem; padding: 2rem 1rem; }
.pay-done > i { font-size: 3rem; color: var(--danger-safe, #4caf7d); }
.pay-done.is-off > i { color: var(--r-muted); }
.pay-steps { padding-left: 1.2rem; }

/* v1.25.0: kartu server di dashboard admin */
.server-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; }
.server-item { padding: .8rem; border-radius: .8rem; background: var(--r-raised); border: 1px solid var(--r-line); }
.server-pct { font-size: 1.6rem; font-weight: 800; }
.server-item.is-ok .server-pct { color: var(--danger-safe, #4caf7d); }
.server-item.is-warn { border-color: var(--r-kunyit); }
.server-item.is-warn .server-pct { color: var(--r-kunyit-ink); }
.server-item.is-bad { border-color: var(--danger-dangerous, #e06b3b); }
.server-item.is-bad .server-pct { color: var(--danger-dangerous, #e06b3b); }