:root { --dg: #ff8a6a; --dg-lo: #7a2e22; }
[data-dg="1"] { --dga: #e8c060; } [data-dg="2"] { --dga: #9db4ff; } [data-dg="3"] { --dga: #ff8a4a; } [data-dg="4"] { --dga: #b98cff; } [data-dg="5"] { --dga: #7fe0ff; }
.itip.dgk { --rc: #ff9b7a; }
.dg-face { flex: none; display: inline-block; width: 5.6rem; height: 5.6rem; background: no-repeat 0 0 / 400% 200%; image-rendering: pixelated; filter: drop-shadow(0 .2rem .3rem rgba(0,0,0,.7)); }
.dg-face.big { width: 15rem; height: 15rem; }
#dgwin { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 124rem; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 1.6rem); z-index: 8; }
#dgwin header .dg-sub { margin-left: 1rem; font: 400 max(10px, 1.2rem) var(--sans); letter-spacing: .08em; color: var(--dg); order: 1; }
#dgwin header .dg-back { position: absolute; left: 1.2rem; top: .9rem; min-height: 3.2rem; padding: 0 1.2rem; border-width: .8rem; font-size: max(11px, 1.2rem); color: var(--sky); }
#voyagewin header .vw-dg { position: absolute; right: 5rem; top: .9rem; min-height: 3.2rem; padding: 0 1.2rem; border-width: .8rem; font-size: max(11px, 1.2rem); color: var(--dg); }
.dg-body { flex: 1; min-height: 0; display: flex; gap: 1.6rem; }
.dg-left { flex: 0 0 44rem; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .7rem; }
.dg-right { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .9rem; }
.dg-intro { margin: 0; font-size: max(11px, 1.2rem); line-height: 1.5; color: var(--ink2); }
.dg-list { flex: 1; min-height: 12rem; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .4rem; padding: .7rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.win .row.dg-row { position: relative; justify-content: flex-start; gap: 1rem; min-height: 6.6rem; padding: .3rem 1.2rem .3rem .4rem; cursor: pointer; }
.win .row.dg-row::before { content: ''; position: absolute; left: .5rem; top: .6rem; bottom: .6rem; width: .3rem; background: var(--dga); opacity: .8; }
.win .row.dg-row.sel { border-image-source: url(../assets/ui/dark/row_on.png); box-shadow: inset 0 0 0 1px var(--dga); }
.dg-row .dg-face { margin-left: .6rem; }
.dg-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.dg-rt > b { font: 600 max(13px, 1.55rem)/1.2 var(--serif); color: var(--dga); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win .row.dg-row .dg-rt small { white-space: normal; color: var(--ink3); } .dg-rt small b { color: var(--ink) !important; font-weight: 600; } .dg-rt small u { text-decoration: none; }
.dg-row em { flex: none; display: inline-flex; align-items: center; gap: .3rem; font: 700 max(12px, 1.4rem)/1 var(--serif); font-style: normal; color: var(--ink3); opacity: .55; }
.dg-row em.has { color: #fff; opacity: 1; }
.dg-row em > :first-child { width: 3.4rem; height: 3.4rem; }
.dg-seals { flex: none; padding: .7rem .9rem .9rem; background: linear-gradient(90deg, rgba(255,138,106,.1), rgba(255,138,106,.02)); border: 1px solid rgba(255,138,106,.28); }
.dg-seals h5, .dg-loot h5 { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; font: 600 max(11px, 1.2rem) var(--serif); letter-spacing: .1em; color: var(--brass); }
.dg-seals h5 b { flex: none; white-space: nowrap; font-weight: 600; }
.dg-seals h5 small { flex: 1; min-width: 0; font: 400 max(9px, 1.05rem)/1.35 var(--sans); letter-spacing: 0; color: var(--ink3); text-align: right; }
.dg-loot h5 + * { margin-bottom: .2rem; } .dg-loot h5:not(:first-child) { margin-top: .9rem; }
.dg-moves { margin: 0; padding: 0 0 0 1.8rem; display: flex; flex-direction: column; gap: .2rem; font-size: max(11px, 1.25rem); line-height: 1.45; color: var(--ink2); }
.dg-moves li::marker { color: var(--dga); }
.dg-sealrow { display: flex; align-items: center; gap: .6rem; }
.dg-seal { position: relative; flex: none; width: 5rem; display: flex; flex-direction: column; align-items: center; gap: .1rem; opacity: .45; }
.dg-seal.on { opacity: 1; }
.dg-seal > :first-child { width: 4rem; height: 4rem; }
.dg-seal b { position: absolute; right: .3rem; top: 2.4rem; font: 700 max(11px, 1.3rem)/1 var(--sans); color: #fff; text-shadow: 0 1px 0 #000, 0 0 .4rem #000; }
.dg-seal small { font: 400 max(9px, 1rem)/1.2 var(--sans); color: var(--dga); }
.dg-seal.five > :first-child { width: 4.6rem; height: 4.6rem; filter: drop-shadow(0 0 .8rem rgba(127,224,255,.5)); }
.dg-arrow { flex: none; font-size: max(14px, 1.8rem); color: var(--ink3); }
#dgwin .dg-fuse { margin-left: auto; min-width: 9rem; }
.dg-top { flex: none; display: flex; align-items: center; gap: 1.6rem; padding: .6rem 1.6rem .6rem .6rem; background: radial-gradient(ellipse at 12% 60%, color-mix(in srgb, var(--dga) 22%, transparent), transparent 60%), linear-gradient(#171b22, #0c0f14); border: 1px solid #000; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dga) 40%, #000); }
.dg-tt { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.dg-tt small { font: 600 max(10px, 1.15rem) var(--sans); letter-spacing: .2em; color: var(--ink3); }
.dg-tt > b { font: 600 max(20px, 3.2rem)/1.15 var(--serif); letter-spacing: .04em; color: var(--dga); text-shadow: 0 .2rem 0 #000, 0 0 1.6rem color-mix(in srgb, var(--dga) 45%, transparent); }
.dg-tt em { font: 400 max(12px, 1.45rem) var(--sans); font-style: normal; color: var(--ink2); } .dg-tt em b { color: #ff9d8a; font-weight: 600; }
.dg-stats { flex: none; display: flex; flex-wrap: wrap; gap: .4rem 2.2rem; padding: .5rem 1.4rem; background: linear-gradient(90deg, rgba(255,138,106,.12), rgba(255,138,106,.03)); border: 1px solid rgba(255,138,106,.3); }
.dg-stats > span { display: flex; flex-direction: column; line-height: 1.25; }
.dg-stats i { font: 400 max(9px, 1.05rem) var(--sans); font-style: normal; color: var(--ink3); white-space: nowrap; }
.dg-stats b { font: 600 max(12px, 1.5rem) var(--serif); color: var(--ink); white-space: nowrap; } .dg-stats b small { font: 400 max(9px, 1.05rem) var(--sans); color: var(--ink2); }
.dg-loot { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .7rem 1rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.dg-loot p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; font-size: max(11px, 1.3rem); color: var(--ink2); }
.dg-li { display: inline-flex; align-items: center; gap: .5rem; } .dg-li b { color: var(--ink); font-weight: 600; }
.dg-li > img, .dg-li > svg, .dg-li > :first-child:not(i):not(span) { width: 3rem; height: 3rem; }
.dg-li i { font-style: normal; font-size: max(12px, 1.5rem); } .dg-uq { color: #e8a05a; } .dg-jw { color: #9de0ff; } .dg-orb { color: #d9c391; }
.dg-or { font-size: max(10px, 1.1rem); color: var(--ink3); }
.dg-xk { margin: .5rem 0 0 !important; font-size: max(10px, 1.15rem) !important; color: #8fe0a8 !important; }
.dg-uqs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.dg-uqs span { display: inline-flex; align-items: center; gap: .5rem; padding: .2rem .8rem .2rem .3rem; background: rgba(232,160,90,.08); border: 1px solid rgba(232,160,90,.3); }
.dg-uqs span > :first-child { width: 3.2rem; height: 3.2rem; }
.dg-uqs b { font: 600 max(10px, 1.2rem)/1.3 var(--sans); color: #e8a05a; }
.dg-run { flex: none; display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; color: var(--dga); background: linear-gradient(90deg, color-mix(in srgb, var(--dga) 16%, transparent), transparent); border: 1px solid color-mix(in srgb, var(--dga) 50%, transparent); }
.dg-run > svg { flex: none; width: 2.6rem; height: 2.6rem; }
.dg-run > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.dg-run > span > b { font: 600 max(12px, 1.45rem) var(--serif); color: #fff; }
.dg-run small { font-size: max(10px, 1.1rem); color: var(--ink2); } .dg-run small b { color: #fff; font-variant-numeric: tabular-nums; } .dg-run small u { text-decoration: none; color: var(--ink3); }
#dgwin .dg-join { flex: none; min-width: 11rem; }
#dgwin footer { margin-top: 0; }
#dgwin footer .dg-note { flex: 1; text-align: left; font-size: max(10px, 1.1rem); line-height: 1.4; color: var(--ink3); }
#dgwin footer .dg-note .bad, #dgwin footer .dg-note .bad b { color: #ff8f80; }
#dgwin .dg-go { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-width: 22rem; min-height: 4.6rem; font-size: max(13px, 1.6rem); }
#dgwin .dg-go > :first-child { width: 3rem; height: 3rem; }
#dgwin .dg-go.armed { border-image-source: url(../assets/ui/dark/btn_primary.png) !important; color: #1a1206 !important; box-shadow: 0 0 0 2px #e0443a, 0 0 1.6rem rgba(224,68,58,.65); }
#dg-hud { position: absolute; z-index: 3; left: 50%; top: calc(1.6rem + var(--sat)); transform: translateX(-50%); width: max-content; max-width: 96vw; }
#dg-hud.hidden, #dg-banner.hidden, #dg-say.hidden, #dg-result.hidden, #dg-fail.hidden { display: none; }
body.patch-pending #dg-hud { top: calc(var(--patch-h, 0px) + 1rem + var(--sat)); }
.vy-plate.dg-plate { box-shadow: inset 0 0 0 1px var(--dg-lo), inset 0 0 0 .25rem #10151c, inset 0 0 0 calc(.25rem + 1px) color-mix(in srgb, var(--dga, var(--dg)) 45%, transparent), 0 .5rem 1.4rem rgba(0,0,0,.6); }
.dg-num { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; width: 7.2rem; padding-left: .8rem; border-right: 1px solid rgba(255,138,106,.3);
background: linear-gradient(90deg, color-mix(in srgb, var(--dga, var(--dg)) 22%, transparent), transparent); }
.dg-num b { font: 700 max(17px, 2.5rem)/1 var(--serif); color: var(--dga, #fff); text-shadow: 0 .2rem 0 #000, 0 0 .8rem rgba(0,0,0,.8); }
.dg-num small { font: 600 max(9px, 1rem)/1 var(--sans); color: var(--ink2); }
#dg-hud .vy-isle { color: #ffe9e0; }
#dg-hud[data-st="done"] .vy-isle { color: var(--teal); }
#dg-hud .vy-s small { font: 600 max(9px, 1.05rem) var(--sans); color: var(--ink3); }
#dg-hud .vy-s.ph { color: #7fe0ff; } #dg-hud .vy-s.ph b { color: #fff; }
#dg-hud .vy-s.bk { color: #ff9d8a; } #dg-hud .vy-s.bk b { color: #ffd0c4; }
#dg-hud.low .vy-s.time, #dg-hud.low .vy-s.time b { color: #ff6a52; }
#hud #dg-hud .vy-leave { border-left-color: rgba(255,138,106,.3); }
#dg-banner { position: absolute; z-index: 3; left: 50%; top: calc(13rem + var(--sat)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .4rem; width: max-content; max-width: 92vw; pointer-events: none; text-align: center; }
#dg-banner.show { animation: vy-banner var(--ms, 3600ms) ease-out both; }
#dg-banner small { font: 600 max(11px, 1.5rem)/1.3 var(--sans); letter-spacing: .25em; color: #ffd8cc; text-shadow: 0 1px 2px #000; }
#dg-banner small u { text-decoration: none; opacity: .6; }
#dg-banner .vb-name { padding: 0 6rem; font: 600 max(26px, 5.2rem)/1.2 var(--serif); letter-spacing: .08em; color: #fff0ea; text-shadow: 0 .3rem 0 #000, 0 0 2.4rem rgba(255,110,80,.75), 0 0 .6rem #000;
background: linear-gradient(90deg, transparent, rgba(18,4,2,.65) 22%, rgba(18,4,2,.65) 78%, transparent); border-top: 1px solid; border-bottom: 1px solid; border-image: linear-gradient(90deg, transparent, rgba(255,138,106,.75), transparent) 1; }
#dg-banner .vb-goal { font-size: max(12px, 1.7rem); letter-spacing: .04em; font-weight: 400; color: #fff; } #dg-banner .vb-goal b { color: #ff9d8a; font-weight: 600; }
#dg-say { position: absolute; z-index: 4; left: 50%; top: calc(17rem + var(--sat)); transform: translateX(-50%); max-width: min(90vw, 90rem); padding: .6rem 4rem; pointer-events: none; text-align: center;
font: 700 max(15px, 2.4rem)/1.35 var(--serif); letter-spacing: .03em; color: #ffe2d8; text-shadow: 0 .2rem 0 #000, 0 0 1.4rem rgba(255,60,30,.8);
background: linear-gradient(90deg, transparent, rgba(30,4,2,.75) 18%, rgba(30,4,2,.75) 82%, transparent); }
#dg-say.show { animation: dg-say 3.4s ease-out both; }
@keyframes dg-say { 0% { opacity: 0; transform: translateX(-50%) scale(1.25); } 8% { opacity: 1; transform: translateX(-50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
body.dg-hush .dk-skills, body.dg-hush .pc-skill, body.dg-hush [id^="sk-"] { filter: grayscale(1) brightness(.55); }
#dg-result { position: absolute; z-index: 5; left: 50%; top: calc(13.4rem + var(--sat)); transform: translateX(-50%); box-sizing: border-box; width: 50rem; max-width: 94vw; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.2rem 2.4rem 2rem; text-align: center; pointer-events: auto;
border: 0 solid transparent; border-image: url(../assets/ui/dark/panel.png) 64 / 3.2rem; background: #0e1116 url(../assets/ui/dark/panel_fill.png) 0 0 / 25.6rem 25.6rem; box-shadow: 0 1rem 2.5rem rgba(0,0,0,.6), 0 0 4rem rgba(255,110,80,.22); animation: vy-pop .35s ease-out both; }
#dg-result h3 { margin: 0; font: 600 max(20px, 3.2rem)/1.2 var(--serif); letter-spacing: .08em; color: #fff0ea; text-shadow: 0 .2rem 0 #000, 0 0 1.8rem rgba(255,110,80,.6); }
#dg-result p { margin: 0; font-size: max(12px, 1.4rem); line-height: 1.5; color: var(--ink2); }
#dg-result p b { color: var(--ink); } #dg-result p u { text-decoration: none; color: var(--ink3); }
#dg-result .vr-isle b:first-child { color: #ff9d8a !important; }
#hud #dg-result button { min-height: 3.8rem; min-width: 11rem; padding: 0 1.6rem; border: 1rem solid transparent; border-image: url(../assets/ui/dark/btn.png) 20 fill / 1rem; font: 700 max(12px, 1.35rem)/1.2 var(--sans); color: var(--ink); white-space: nowrap; }
#dg-fail { position: fixed; z-index: 9100; left: 50%; top: 30%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; width: max-content; max-width: 92vw; padding: 1.4rem 7rem 1.6rem; text-align: center; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(14,2,2,.92) 14%, rgba(14,2,2,.92) 86%, transparent); border-top: 1px solid; border-bottom: 1px solid; border-image: linear-gradient(90deg, transparent, rgba(224,68,58,.8), transparent) 1; transition: opacity .45s; animation: vy-pop .35s ease-out both; }
#dg-fail.out { opacity: 0; }
#dg-fail b { font: 700 max(24px, 4.4rem)/1.2 var(--serif); letter-spacing: .06em; color: #e0443a; text-shadow: 0 .3rem 1.4rem #000; }
#dg-fail span { font: 600 max(12px, 1.6rem)/1.5 var(--sans); color: var(--ink); text-shadow: 0 1px 2px #000; }
#dg-fail small { font: 400 max(11px, 1.3rem)/1.5 var(--sans); color: var(--ink2); text-shadow: 0 1px 2px #000; }
#dead em.dg-dead { display: none; font-style: normal; }
body.in-dungeon #dead b { visibility: visible; }
body.in-dungeon #dead em.dg-dead { display: block; padding: .3rem 1.8rem; font: 600 max(13px, 1.7rem)/1.5 var(--sans); color: #ffd8cc; text-shadow: 0 1px 3px #000, 0 0 .8rem #000; border: .8rem solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem; }
body.touch #dgwin { left: calc(.8rem + var(--sal)); right: calc(.8rem + var(--sar)); top: calc(.8rem + var(--sat)); bottom: calc(.8rem + var(--sab)); width: auto; height: auto; max-width: none; max-height: none; transform: none; padding-top: 5rem; }
body.touch .dg-body { gap: 1.2rem; }
body.touch .dg-left { flex: 0 0 34rem; gap: .5rem; }
body.touch .dg-intro { display: none; }
body.touch .dg-list { min-height: 0; padding: .5rem; }
body.touch .win .row.dg-row { min-height: 5rem; gap: .6rem; }
body.touch .dg-row .dg-face { width: 4.2rem; height: 4.2rem; }
body.touch .dg-rt > b { font-size: max(11px, 1.3rem); }
body.touch .win .row.dg-row .dg-rt small { font-size: max(9px, 1rem); }
body.touch .dg-row em > :first-child { width: 2.6rem; height: 2.6rem; }
body.touch .dg-seals { padding: .4rem .6rem .5rem; } body.touch .dg-seals h5 small { display: none; } body.touch .dg-seals h5 { margin-bottom: .2rem; }
body.touch .dg-seal { width: 4rem; } body.touch .dg-seal > :first-child { width: 3.2rem; height: 3.2rem; } body.touch .dg-seal b { top: 1.8rem; } body.touch .dg-seal small { display: none; }
body.touch #dgwin .dg-fuse { min-width: 0; min-height: 32px; padding: 0 .8rem; }
body.touch .dg-right { gap: .5rem; }
body.touch .dg-top { padding: .2rem 1rem .2rem .2rem; gap: 1rem; }
body.touch .dg-face.big { width: 7.6rem; height: 7.6rem; }
body.touch .dg-tt > b { font-size: max(16px, 2.2rem); }
body.touch .dg-stats { gap: .2rem 1.4rem; padding: .3rem 1rem; }
body.touch .dg-loot { padding: .4rem .6rem; } body.touch .dg-loot p { font-size: max(10px, 1.1rem); gap: .3rem 1rem; } body.touch .dg-li > :first-child:not(i):not(span) { width: 2.4rem; height: 2.4rem; }
body.touch .dg-uqs { margin-top: .4rem; } body.touch .dg-uqs span { font-size: max(9px, 1rem); }
body.touch .dg-run { padding: .3rem .6rem; }
body.touch #dgwin footer .dg-note { font-size: max(9px, 1rem); line-height: 1.3; }
body.touch #dgwin .dg-go { min-width: 16rem; min-height: 4.2rem; }
body.touch #dgwin header .dg-back { top: .7rem; }
body.touch #voyagewin header .vw-dg { top: .7rem; right: 4.6rem; }
body.touch #dg-hud { top: calc(.8rem + var(--sat)); left: calc((100vw + var(--sal) - var(--sar)) / 2 + 1.5rem); max-width: 46rem; }
body.touch .dg-num { width: 5rem; padding-left: .6rem; } body.touch .dg-num b { font-size: max(13px, 1.8rem); } body.touch .dg-num small { font-size: max(8px, .9rem); }
body.touch #dg-banner { top: calc(6.2rem + var(--sat)); left: calc((100vw + var(--sal) - var(--sar)) / 2 + 1.5rem); gap: .2rem; }
body.touch #dg-banner small { font-size: max(10px, 1.15rem); letter-spacing: .12em; }
body.touch #dg-banner .vb-name { font-size: max(20px, 3rem); padding: 0 4rem; }
body.touch #dg-say { top: calc(11.5rem + var(--sat)); left: calc((100vw + var(--sal) - var(--sar)) / 2 + 1.5rem); font-size: max(13px, 1.7rem); padding: .4rem 2.4rem; }
body.touch #dg-result { top: calc(6rem + var(--sat)); width: 48rem; padding: 1.2rem 2rem; gap: .2rem; }
body.touch #dg-result h3 { font-size: max(16px, 2.2rem); }
body.touch #dg-result p { font-size: max(11px, 1.2rem); line-height: 1.4; }
body.touch #dg-fail { top: 24%; padding: 1rem 3rem 1.2rem; } body.touch #dg-fail b { font-size: max(20px, 3rem); }