/* Dragon treasury theme: panel 10px, art cards 6px, forged controls 4px.
   Existing modal layers stay unchanged: nest 10020, detail 10030, confirmation 10045.
   Image zoom (_whDragonZoomImage) is 10050 so the enlarged art is never covered. */
.dragon-overlay,
#confirmOverlay.dragon-confirm-theme {
    --dragon-stone: #0d1719;
    --dragon-raised: #1c2b2b;
    --dragon-ink: #efe4cc;
    --dragon-muted: #c0b69e;
    --dragon-gold: #ddbe7e;
    --dragon-bronze: #82704b;
    --dragon-scales: url('asset/ui/dragon-nest-theme/scales.webp');
}
#page-home #btnDragonNest.home-side-btn-dragon-nest {
    right: var(--huis-7,7px) !important;
    top: calc(var(--huis-262,262px) + var(--huis-50,50px)) !important;
    width: var(--huis-40,40px) !important;
    min-height: var(--huis-40,40px) !important;
    padding: var(--huis-5,5px) var(--huis-3,3px) !important;
    border-radius: 4px !important;
    border: 1px solid #baa16c !important;
    color: #e8d7ad !important;
    background: linear-gradient(160deg,#142322b8,#0c171aec),url('asset/ui/dragon-nest-theme/scales.webp') center/160px !important;
    box-shadow: inset 0 0 0 2px #0c171a,inset 0 0 0 3px #b2945c55,0 4px 9px #030b0e99 !important;
}
.dragon-overlay {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
    box-sizing: border-box;
    background: #03090edb;
}
.dragon-nest-panel,
.dragon-detail-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
    color: var(--dragon-ink);
    border: 3px double var(--dragon-bronze);
    border-radius: 10px;
    outline: 1px solid #273a36;
    outline-offset: -7px;
    background: linear-gradient(145deg,#172321e8,#0b1518f5 65%),var(--dragon-scales) center top/280px repeat;
    box-shadow: 0 20px 70px #020a0dcc,inset 0 1px 0 #f2d69855,inset 0 -2px 0 #040c0e;
    scrollbar-color: #826f47 #0b1518;
    scrollbar-width: thin;
}
.dragon-overlay header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: -2px 0 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #9a805842;
    background: linear-gradient(90deg,#c9ab6600,#c9ab6612 50%,#c9ab6600);
}
.dragon-heading { display: flex; align-items: center; gap: 13px; min-width: 0; }
.dragon-heading-crest {
    position: relative;
    flex: 0 0 48px;
    width: 48px;
    height: 62px;
    border: 1px solid #cfb279;
    border-radius: 4px;
    background: linear-gradient(180deg,#17222100,#17222120),url('asset/dragon/白龙.webp') 50% 13%/190% auto no-repeat;
    box-shadow: 0 0 0 3px #0a1416,inset 0 0 0 2px #090f1655;
}
.dragon-heading-crest::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid #e4c48c55;
    border-radius: 2px;
    pointer-events: none;
}
.dragon-eyebrow {
    color: var(--dragon-gold);
    font-size: 10px;
    letter-spacing: 3px;
    margin: 0 0 4px !important;
}
.dragon-overlay h2,.dragon-overlay h3 {
    margin: 0 0 5px;
    color: #f1dfb7;
    font-family: "Noto Serif SC","Songti SC","SimSun",serif;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.2;
}
.dragon-overlay h2 { font-size: 26px; }
.dragon-overlay h3 { font-size: 21px; }
.dragon-overlay p { line-height: 1.6; margin: 8px 0; }
.dragon-census { color: var(--dragon-muted); font-size: 12px; margin: 0 !important; }
.dragon-census b { color: var(--dragon-ink); font-variant-numeric: tabular-nums; }
.dragon-overlay button,
.dragon-overlay select {
    position: relative;
    box-sizing: border-box;
    min-height: 42px;
    padding: 9px 13px;
    color: var(--dragon-ink);
    border: 1px solid #8b78515c;
    border-radius: 4px;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    background: linear-gradient(180deg,#283936,#162627);
    box-shadow: inset 0 1px 0 #d7c99e1c,inset 0 -2px 0 #040c0e70,0 2px 3px #020b0d55;
    cursor: pointer;
    transition: border-color .16s ease,background-color .16s ease,transform .16s ease;
}
.dragon-overlay button:not(.dragon-card)::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid #d4bc7b12;
    border-radius: 1px;
    pointer-events: none;
}
.dragon-overlay button:active:not(:disabled) { transform: translateY(1px); }
.dragon-overlay button:disabled { opacity: .5; cursor: wait; box-shadow: none; }
.dragon-overlay button:focus-visible,.dragon-overlay select:focus-visible {
    outline: 2px solid #edcf88;
    outline-offset: 3px;
}
.dragon-overlay .dragon-primary {
    color: #2a2113;
    border-color: #e1c68c;
    background: linear-gradient(115deg,#b68d4b,#e4c995 48%,#c9a45f);
    box-shadow: inset 0 1px 0 #fff3cb80,inset 0 -2px 0 #684718,0 3px 7px #030b0d99;
    font-weight: 700;
}
.dragon-overlay .dragon-primary::after { border-color: #62482038; }
.dragon-overlay [data-dragon-action="upgrade"],
.dragon-overlay [data-dragon-action="feed-ruby"] {
    color: #f1d4aa;
    border-color: #aa805554;
    background: linear-gradient(160deg,#483129,#241d20);
}
.dragon-overlay .dragon-danger {
    color: #ffbeb1;
    border-color: #c05b4b66;
    background: linear-gradient(180deg,#3f2524,#28191c);
}
.dragon-overlay header>button {
    min-height: 34px;
    padding: 6px 12px;
    color: #d6c9ab;
    border-color: #9b825244;
    background: #102022;
    box-shadow: inset 0 1px 0 #bca3721c;
}
.dragon-note { font-size: 12px; color: var(--dragon-muted); }
.dragon-nest-panel>.dragon-note { padding-left: 10px; border-left: 2px solid #ae8d524f; }
.dragon-warning { font-size: 12px; color: #ffc185; }
.dragon-title { color: #db00db; font-size: 15px; font-weight: 700; text-align: center; }
.dragon-stats { font-variant-numeric: tabular-nums; font-weight: 700; color: #edce91; }
.dragon-toolbar {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
    margin: 16px 0 14px;
}
.dragon-toolbar button { min-width: 0; white-space: nowrap; }
.dragon-filter { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 17px; }
.dragon-filter button {
    min-width: 56px;
    min-height: 36px;
    padding: 7px 12px;
    color: #c3b89d;
    background: #0e1d20;
    border-color: #49605b88;
    box-shadow: inset 0 1px 0 #e1d2ad0b;
}
.dragon-filter button[aria-pressed=true] {
    color: #f2d59c;
    border-color: #c09d5f;
    background: linear-gradient(180deg,#443d29,#282d23);
    box-shadow: inset 0 -2px 0 #d2b27180,inset 0 1px 0 #ebd7a622;
}
.dragon-filter select { min-height: 36px; margin-left: auto; min-width: 140px; background: #0d1b1e; border-color: #6b7b6470; }
.dragon-filter option { background: #132122; color: #efe4cc; }
.dragon-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.dragon-overlay .dragon-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    padding: 0 0 12px;
    text-align: left;
    overflow: hidden;
    background: #080f12;
    border: 1px solid #a7895666;
    border-radius: 6px;
    box-shadow: 0 3px 8px #02090c66,inset 0 -2px 0 #95815922;
}
.dragon-card::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid #c1a4702c;
    border-radius: 3px;
    pointer-events: none;
}
.dragon-card img {
    display: block;
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: contain;
    margin-bottom: 5px;
    border-bottom: 1px solid #c4a16c70;
    background: #101218;
}
.dragon-card span,.dragon-card small { padding: 0 12px; max-width: 100%; box-sizing: border-box; }
.dragon-card-name { font-size: 14px; font-weight: 700; color: #db00db; }
.dragon-card small { font-size: 11px; line-height: 1.5; color: #c4beae; }
.dragon-card span:not(.dragon-card-name) { font-size: 11px; color: #c9b588; }
.dragon-card .dragon-claimable { color: #FFD700; }
.dragon-card.dragon-baby .dragon-card-name,.dragon-title.dragon-baby { color: #FF8800; }
.dragon-empty { grid-column: 1/-1; text-align: center; color: var(--dragon-muted); padding: 34px 8px; border-block: 1px solid #ad8b4938; }
.dragon-detail-overlay { z-index: 10030; }
.dragon-detail-panel { max-width: 440px; }
.dragon-detail-panel>button { display: block; width: 100%; margin-top: 10px; }
.dragon-detail-art {
    display: block;
    max-width: 100%;
    width: 210px;
    aspect-ratio: 3/4;
    object-fit: contain;
    margin: 3px auto 14px;
    border: 2px solid #aa8b58;
    border-radius: 5px;
    outline: 1px solid #d3b47744;
    outline-offset: 4px;
    box-shadow: 0 5px 16px #03090c99;
    cursor: zoom-in;
}
.dragon-detail-panel progress { width: 100%; height: 9px; accent-color: #FF8800; }
.dragon-detail-panel progress::-webkit-progress-bar { background: #091415; border: 1px solid #9a81534d; border-radius: 3px; }
.dragon-detail-panel progress::-webkit-progress-value { background: linear-gradient(90deg,#985a26,#e4b760); border-radius: 2px; }
.dragon-reward {
    padding: 15px;
    margin: 12px 0;
    border: 1px solid #a98b4f70;
    border-left: 3px solid #d5b672;
    border-radius: 4px;
    color: #ecd4a1;
    background: linear-gradient(130deg,#8a663522,#15211d77);
    box-shadow: inset 0 1px 0 #e6ce9420;
}
.dragon-reward strong { font-size: 12px; letter-spacing: 1px; color: #e5c785; }
.dragon-reward p { font-size: 15px; font-weight: 700; }
.dragon-reward small { font-size: 11px; line-height: 1.6; color: #c0b69e; }
.dragon-materials { display: flex; flex-direction: column; gap: 9px; margin: 14px 0; }
.dragon-materials label {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px;
    border: 1px solid #766c4c88;
    border-radius: 4px;
    background: linear-gradient(120deg,#22302b,#122021);
    box-shadow: inset 0 1px 0 #cbb98912;
    cursor: pointer;
}
.dragon-materials label:has(input:checked) { border-color: #ddbe7e; background: linear-gradient(120deg,#3e3d2a,#1b2d29); box-shadow: inset 3px 0 0 #ddbe7e; }
.dragon-materials img { width: 42px; aspect-ratio: 3/4; object-fit: contain; border: 1px solid #c3a26b70; border-radius: 3px; }
.dragon-materials input { flex: 0 0 20px; width: 20px; height: 20px; accent-color: #d7b776; }
.dragon-materials input:focus-visible { outline: 2px solid #edcf88; outline-offset: 3px; }
.dragon-materials span { font-size: 12px; line-height: 1.6; color: #ded3ba; }
.dragon-pending { margin: 12px 0; padding: 9px; border-left: 2px solid #c59259; color: #ffc185; background: #8a562914; }
#confirmOverlay.dragon-confirm-theme .confirm-box {
    max-width: 440px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    border: 3px double #9e8254;
    border-radius: 9px;
    background: linear-gradient(145deg,#172321eb,#0b1518f5),var(--dragon-scales) center/280px repeat;
    box-shadow: 0 20px 60px #020a0dbb,inset 0 1px 0 #f2d69844;
    color: var(--dragon-ink);
}
#confirmOverlay.dragon-confirm-theme .confirm-msg { color: #eadfc8; line-height: 1.7; white-space: pre-line; text-align: left; }
#confirmOverlay.dragon-confirm-theme .confirm-btns button { min-height: 42px; border-radius: 4px; border: 1px solid #92795288; }
#confirmOverlay.dragon-confirm-theme .confirm-btn-cancel { background: linear-gradient(180deg,#283936,#162627); color: #efe4cc; }
#confirmOverlay.dragon-confirm-theme .confirm-btn-confirm { background: linear-gradient(115deg,#b68d4b,#e4c995 48%,#c9a45f); color: #2a2113; border-color: #e1c68c; }
#confirmOverlay.dragon-confirm-theme button:focus-visible { outline: 2px solid #edcf88; outline-offset: 3px; }
@media(hover:hover) and (pointer:fine) {
    .dragon-overlay button:hover:not(:disabled) { border-color: #d9be82; }
    .dragon-overlay .dragon-primary:hover:not(:disabled) { background: linear-gradient(115deg,#cca558,#f0dbae 48%,#d7b575); }
    .dragon-overlay .dragon-card:hover:not(:disabled) { transform: translateY(-2px); border-color: #cbb078; }
}
@media(max-width:480px) {
    .dragon-overlay { padding: max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); }
    .dragon-nest-panel,.dragon-detail-panel { padding: 15px 12px; }
    .dragon-overlay header { gap: 8px; padding-bottom: 12px; margin-bottom: 12px; }
    .dragon-heading { gap: 10px; }
    .dragon-heading-crest { flex-basis: 42px; width: 42px; height: 56px; }
    .dragon-overlay h2 { font-size: 24px; }
    .dragon-overlay h3 { font-size: 19px; }
    .dragon-eyebrow { font-size: 9px; letter-spacing: 2px; }
    .dragon-toolbar { gap: 8px; margin: 14px 0; }
    .dragon-toolbar button { font-size: 12px; padding: 9px 7px; }
    .dragon-filter { gap: 6px; margin-bottom: 15px; }
    .dragon-filter button { flex: 1; min-width: 0; padding: 7px 8px; font-size: 12px; }
    .dragon-filter select { width: 100%; margin-left: 0; }
    .dragon-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .dragon-card span,.dragon-card small { padding: 0 10px; }
    .dragon-card-name { font-size: 13px; }
    .dragon-detail-art { width: 180px; }
}
@media(min-width:840px) { .dragon-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { .dragon-overlay button { transition: none; } .dragon-overlay .dragon-card:hover:not(:disabled) { transform: none; } }