body[data-page="dive"] { --gold: #ffd65a; --gold-2: #f0a422; --aqua: #5fd8ff; --aqua-2: #1e9cf0; --mint: #6ff5c4; --deep: 4,16,36; }
.dv {
    position: relative; overflow: hidden; border-radius: var(--r-xl); height: 680px;
    background: #061a33;
    box-shadow: var(--sh-screen), 0 0 0 1px rgba(95,216,255,.28), 0 0 40px -8px rgba(47,183,255,.35);
    isolation: isolate; user-select: none; -webkit-user-select: none;
}
.dv-cv { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }

.dv::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(90% 75% at 50% 45%, transparent 55%, rgba(var(--deep),.5) 100%), linear-gradient(180deg, rgba(var(--deep),.35), transparent 22%); }

.dv-sign { position: absolute; left: 16px; top: 14px; z-index: 6; display: flex; align-items: center; gap: 9px; pointer-events: none;
    height: 40px; padding: 0 14px 0 9px; border-radius: 14px; white-space: nowrap;
    background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.06)), rgba(var(--deep),.6);
    box-shadow: inset 0 0 0 1px rgba(160,230,255,.35), 0 10px 26px -12px rgba(0,0,0,.8);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dv-sign b { font: 800 15px/1 Unbounded, sans-serif; letter-spacing: .01em; color: #fff; }
.dv-sign b span { color: var(--aqua); }
.dv-drop { width: 18px; height: 22px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform: rotate(0deg);
    background: radial-gradient(60% 50% at 35% 35%, #fff, #8be6ff 40%, #1e9cf0); clip-path: path('M9 0C9 0 0 10 0 15a9 7 0 0 0 18 0C18 10 9 0 9 0Z'); }

.dv-hud { position: absolute; right: 16px; top: 16px; z-index: 6; display: flex; justify-content: flex-end; width: min(50%, 440px); pointer-events: none; }
.dv-recent { flex: 1; min-width: 0; display: flex; justify-content: flex-end;

    flex-wrap: wrap; align-content: flex-start; gap: 40px 6px; max-height: 28px; overflow: hidden; }
.dv-recent span { flex: none; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 0 7px; border-radius: 10px;
    font: 800 11.5px/1 Unbounded, sans-serif; color: rgba(255,255,255,.62);
    background: rgba(var(--deep),.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dv-recent span i { width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 6px currentColor; }
.dv-recent span.lv-soldier i { background: #9fe6ff; }
.dv-recent span.lv-salto i { background: #b48cff; }
.dv-recent span.lv-bomb i { background: #ff8a5c; }
.dv-recent span.w { color: #05281b; background: linear-gradient(180deg, #d8fff0, var(--mint)); box-shadow: 0 4px 12px -6px rgba(111,245,196,.9); }
.dv-recent span.big { color: #2a1404; background: linear-gradient(180deg, #fff4c8, var(--gold)); box-shadow: 0 4px 14px -6px rgba(255,190,40,.9); }
.dv-recent span.new { animation: dvChip .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes dvChip { from { transform: translateX(24px) scale(.6); opacity: 0; } }

.dv-say { position: absolute; left: 62%; top: 70px; z-index: 7; translate: -50% 0; max-width: min(56%, 400px); width: max-content; pointer-events: none;
    padding: 10px 15px; border-radius: 16px; text-align: center;
    font: 700 13px/1.35 Manrope, sans-serif; color: #fff;
    background: rgba(var(--deep),.82); box-shadow: 0 10px 26px -12px rgba(0,0,0,.8), inset 0 0 0 1px rgba(95,216,255,.35);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dv-say.pop { animation: dvSay .4s cubic-bezier(.3,1.6,.5,1); }
@keyframes dvSay { from { transform: translateY(-8px) scale(.9); opacity: 0; } }

.dv-say.is-hint { font-size: 14.5px; color: #fff6d6; background: linear-gradient(180deg, rgba(60,36,6,.92), rgba(36,20,4,.94));
    box-shadow: 0 0 0 2px rgba(255,214,90,.7), 0 0 34px -6px rgba(255,190,40,.6); animation: dvSay .4s cubic-bezier(.3,1.6,.5,1), dvBeat .55s ease-in-out .4s infinite alternate; }
@keyframes dvBeat { to { transform: scale(1.04); } }
.dv:has(.dv-res:not([hidden])) .dv-say { display: none; }

.dv-res { position: absolute; left: 50%; top: 13%; z-index: 8; translate: -50% 0; display: grid; justify-items: center; gap: 5px; min-width: 230px;
    padding: 12px 24px 15px; border-radius: 22px; text-align: center; pointer-events: none;
    background: linear-gradient(180deg, rgba(8,34,66,.93), rgba(4,16,36,.95));
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(95,216,255,.5), 0 0 34px -4px rgba(47,183,255,.45);
    animation: dvRes .5s cubic-bezier(.2,1.5,.4,1); }
.dv-res.out { animation: dvResOut .26s ease-in forwards; }
@keyframes dvRes { from { transform: scale(.5) translateY(20px); opacity: 0; } }
@keyframes dvResOut { to { transform: scale(.85); opacity: 0; } }
.dv-res small { font: 700 12px/1.3 Manrope, sans-serif; color: rgba(255,255,255,.72); }
.dv-res strong { font: 800 50px/1 Unbounded, sans-serif; letter-spacing: -.03em;
    background: linear-gradient(180deg, #fff, #c9f3ff 55%, var(--aqua)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 14px rgba(47,183,255,.45)); }
.dv-res .w { font: 800 18px/1 Unbounded, sans-serif; color: var(--mint); }
.dv-res .l { font: 700 12.5px/1.2 Manrope, sans-serif; color: rgba(255,255,255,.6); }
.dv-res.miss { box-shadow: 0 24px 60px -20px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.16); }
.dv-res.miss strong { background: none; -webkit-text-fill-color: rgba(255,255,255,.7); color: rgba(255,255,255,.7); filter: none; font-size: 40px; }
.dv-res strong.z { -webkit-text-fill-color: rgba(255,255,255,.42); color: rgba(255,255,255,.42); }
.dv-res.t3, .dv-res.t4 { box-shadow: 0 0 0 2px rgba(255,214,90,.85), 0 0 60px 6px rgba(255,214,90,.42), 0 24px 60px -20px rgba(0,0,0,.9); }
.dv-res.t3 strong, .dv-res.t4 strong { font-size: 60px; background: linear-gradient(180deg, #fff6cf, var(--gold) 55%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 4px 18px rgba(255,190,40,.55)); }
.dv-res.five small { font: 800 15px/1.2 Unbounded, sans-serif; color: var(--gold); text-transform: uppercase; letter-spacing: .04em; }
.dv-res.five strong { font-size: 72px; }

.dv-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 26px 18px 0;
    background: linear-gradient(0deg, rgba(var(--deep),.94) 0%, rgba(var(--deep),.78) 55%, rgba(var(--deep),0) 100%); }

.dv-bar { display: flex; align-items: stretch; gap: 8px; max-width: 760px; width: 100%; margin: 0 auto; }
.dv-sum { flex: none; display: grid; place-items: center; align-content: center; gap: 3px; width: 66px; border-radius: 12px;
    background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(160,230,255,.25); transition: .3s; }
.dv-sum small { font: 800 9.5px/1 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.dv-sum b { font: 800 22px/1 Unbounded, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.dv-sum.on { background: linear-gradient(180deg, rgba(95,216,255,.3), rgba(30,156,240,.18)); box-shadow: inset 0 0 0 1px rgba(95,216,255,.7), 0 0 20px -4px rgba(95,216,255,.6); }
.dv-sum.on b { color: #e9fbff; text-shadow: 0 0 12px rgba(95,216,255,.8); }
.dv-ladder { position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 12px; padding: 4px;
    background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.dv-ladder.is-over { -webkit-mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.dv-track { display: flex; gap: 4px; transition: transform .45s cubic-bezier(.3,1.1,.4,1); }
.dv-step { flex: 1 1 0; min-width: 36px; display: grid; justify-items: center; gap: 3px; padding: 6px 2px 7px; border-radius: 9px;
    background: rgba(255,255,255,.06); transition: opacity .3s, background .3s, transform .3s, box-shadow .3s; }
.dv-step i { font: 700 10px/1 Manrope, sans-serif; font-style: normal; color: rgba(255,255,255,.55); white-space: nowrap; }
.dv-step b { font: 800 11.5px/1 Unbounded, sans-serif; color: #dff7ff; white-space: nowrap; letter-spacing: -.02em; }
.dv-step.zero b { color: rgba(255,255,255,.4); }
.dv-step.part b { color: #ffcf8a; }
.dv-step.gold b { color: var(--gold); text-shadow: 0 0 10px rgba(255,190,40,.6); }
.dv-ladder.is-bomb .dv-step i::after { content: '10'; display: inline-block; margin-left: 3px; padding: 1px 3px; border-radius: 4px; font: 800 8px/1.1 Unbounded, sans-serif; color: #2a1404; background: var(--gold); vertical-align: 1px; }
.dv-step.no { opacity: .28; }
.dv-step.may { background: rgba(95,216,255,.16); box-shadow: inset 0 0 0 1px rgba(95,216,255,.7); animation: dvMay .7s ease-in-out infinite alternate; }
@keyframes dvMay { to { background: rgba(95,216,255,.3); } }
.dv-step.hit { background: linear-gradient(180deg, #fff6d2, var(--gold) 60%, var(--gold-2)); box-shadow: 0 6px 18px -6px rgba(255,190,40,.95); transform: scale(1.08); animation: dvHit .5s cubic-bezier(.2,1.6,.4,1); }
.dv-step.hit i, .dv-step.hit b { color: #2a1404; text-shadow: none; }
@keyframes dvHit { from { transform: scale(.7); } }

.dv-judges { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 760px; width: 100%; margin: 0 auto; padding-bottom: 10px; }

.dv-judges::before { content: ''; position: absolute; left: -18px; right: -18px; bottom: 0; height: 34px; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(120,200,255,.28), rgba(20,60,110,.85) 30%, rgba(6,22,44,.96));
    box-shadow: inset 0 2px 0 rgba(160,235,255,.75), 0 -6px 24px -8px rgba(95,216,255,.6); }
.dv-j { position: relative; display: grid; justify-items: center; align-content: end; gap: 4px; }
.dv-j small { position: relative; z-index: 3; font: 800 10.5px/1 Manrope, sans-serif; color: rgba(220,245,255,.82); letter-spacing: .02em; margin-top: -2px; }
.dv-ava { position: relative; z-index: 1; width: 78px; height: 78px; margin-bottom: -12px; }
.dv-ava img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); transform-origin: 50% 100%; }
.dv-j.hop .dv-ava img { animation: dvNod .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes dvNod { 35% { transform: translateY(-6px) scale(1.06, .96); } }
.dv-j.out .dv-ava img { filter: grayscale(.6) brightness(.7) drop-shadow(0 6px 10px rgba(0,0,0,.45)); }

.dv-card { position: relative; z-index: 3; width: 58px; height: 66px; perspective: 500px; opacity: .55; transform: translateY(10px) scale(.86); transition: transform .4s cubic-bezier(.3,1.4,.5,1), opacity .3s, filter .3s; }
.dv-card-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,1.3,.5,1); }
.dv-card .bk, .dv-card .fc { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dv-card .bk { background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 6px, rgba(255,255,255,.02) 6px 12px), rgba(var(--deep),.55);
    box-shadow: inset 0 0 0 1.5px rgba(160,230,255,.35); }
.dv-card .bk::after { content: '?'; font: 800 20px/1 Unbounded, sans-serif; color: rgba(160,230,255,.45); }
.dv-card .fc { --c1: #ffffff; --c2: #e4eef8; --t: #0b2a4a; transform: rotateY(180deg);
    background: linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: 0 10px 22px -8px rgba(0,0,0,.7), inset 0 -3px 0 rgba(0,0,0,.12), inset 0 0 0 2px rgba(255,255,255,.7); }
.dv-card .fc::before { content: ''; position: absolute; left: 50%; bottom: -12px; width: 6px; height: 14px; translate: -50% 0; border-radius: 0 0 3px 3px; background: #c9d6e6; z-index: -1; }
.dv-card .fc b { font: 800 36px/1 Unbounded, sans-serif; letter-spacing: -.04em; color: var(--t); font-variant-numeric: tabular-nums; }
.dv-card.up { opacity: 1; transform: translateY(-6px); animation: dvRaise .55s cubic-bezier(.2,1.5,.4,1); }
.dv-card.up .dv-card-in { transform: rotateY(180deg); }
@keyframes dvRaise { 0% { transform: translateY(20px) scale(.8); } 60% { transform: translateY(-14px) scale(1.06); } }
.dv-card[data-tone="lo"] .fc { --c1: #ffd9de; --c2: #ff8a9a; --t: #6a0a1c; }
.dv-card[data-tone="mid"] .fc { --c1: #fff1d2; --c2: #ffc46b; --t: #5a3200; }
.dv-card[data-tone="ok"] .fc { --c1: #e2fff2; --c2: #7cf0bd; --t: #04402a; }
.dv-card[data-tone="hi"] .fc { --c1: #e6faff; --c2: #7fdcff; --t: #023452; }
.dv-card[data-tone="top"] .fc { --c1: #fff8d8; --c2: #ffcf3f; --t: #4a2600; box-shadow: 0 0 0 2px rgba(255,214,90,.9), 0 0 26px 2px rgba(255,200,60,.7), inset 0 -3px 0 rgba(0,0,0,.12); }
.dv-card[data-tone="top"].up { animation: dvRaise .55s cubic-bezier(.2,1.5,.4,1), dvGlow 1.2s ease-in-out .55s 2; }
@keyframes dvGlow { 50% { filter: brightness(1.25) drop-shadow(0 0 12px rgba(255,214,90,.9)); } }

.dv-card.tense { opacity: 1; animation: dvTense .12s linear infinite; }
.dv-card.tense .bk { box-shadow: inset 0 0 0 2px rgba(255,214,90,.85), 0 0 22px -2px rgba(255,190,40,.8); }
.dv-card.tense .bk::after { color: var(--gold); }
@keyframes dvTense { 25% { transform: translate(-1px, -2px) rotate(-1.5deg); } 75% { transform: translate(1px, -1px) rotate(1.5deg); } }

.dv-card.out { opacity: .5; filter: grayscale(.85); transform: translateY(14px) rotate(-10deg) scale(.82); }
.dv-j:nth-child(even) .dv-card.out { transform: translateY(14px) rotate(10deg) scale(.82); }
.dv-card.out .fc::after { content: ''; position: absolute; left: 10%; right: 10%; top: 50%; height: 3px; border-radius: 2px; background: #ff4d5e; transform: rotate(-24deg); box-shadow: 0 0 6px rgba(255,77,94,.8); }
.dv-j.keep .dv-card { transform: translateY(-10px) scale(1.04); }
.dv-j.keep .dv-card .fc { outline: 2px solid rgba(95,216,255,.9); outline-offset: 2px; }

.dv-panel.is-wet .dv-judges { animation: dvWet .5s ease-out; }
@keyframes dvWet { 20% { transform: translateY(4px); } 45% { transform: translateY(-2px); } }

.dv-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.dv-flash.on { animation: dvFlash .7s ease-out; background: radial-gradient(40% 40% at var(--fx, 60%) var(--fy, 70%), rgba(210,245,255,.5), rgba(95,216,255,.18) 45%, transparent 75%); }
.dv-flash.on.big { background: radial-gradient(70% 60% at var(--fx, 60%) var(--fy, 70%), rgba(235,252,255,.75), rgba(95,216,255,.3) 45%, transparent 80%); }
.dv-flash.on.gold { background: radial-gradient(70% 60% at var(--fx, 60%) var(--fy, 60%), rgba(255,240,170,.8), rgba(255,190,40,.35) 45%, transparent 80%); }
@keyframes dvFlash { 0% { opacity: 1; } 25% { opacity: .35; } 40% { opacity: .8; } 100% { opacity: 0; } }

.dv-bet.is-live .field, .dv-bet.is-live .quick-row, .dv-bet.is-live .dv-levels { opacity: .45; pointer-events: none; transition: opacity .3s; }
.dv-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 12px 0 2px; }
.dv-bet .dv-go { margin-top: 12px; }
.dv-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 4px; border-radius: 14px;
    background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
.dv-levels button { position: relative; display: grid; justify-items: center; align-content: end; gap: 3px; height: 92px; padding: 0 2px 9px; border-radius: 11px; color: var(--dim); transition: .2s; overflow: hidden; }
.dv-levels img { height: 44px; width: auto; max-width: 90%; object-fit: contain; margin-bottom: 2px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); transition: transform .25s; }
.dv-levels button[data-lv="salto"] img { transform: rotate(18deg); }
.dv-levels b { font: 800 12.5px/1 Manrope, sans-serif; color: var(--text); }
.dv-levels small { font: 800 11px/1 Unbounded, sans-serif; color: var(--aqua); white-space: nowrap; }
.dv-levels button[data-lv="bomb"] small { color: #ffb06a; }
.dv-levels button.on { background: linear-gradient(180deg, #e3f9ff, var(--aqua) 60%, var(--aqua-2)); box-shadow: 0 8px 18px -8px rgba(47,183,255,.95); }
.dv-levels button.on b, .dv-levels button.on small { color: #032238; }
.dv-levels button.on img { transform: translateY(-2px) scale(1.06); }
.dv-levels button[data-lv="salto"].on img { transform: translateY(-2px) rotate(18deg) scale(1.06); }
@media (hover: hover) { .dv-levels button:not(.on):hover { background: rgba(255,255,255,.05); } }
.dv-lvnote { margin: 10px 2px 0; font: 600 12px/1.45 Manrope, sans-serif; color: var(--dim); min-height: 34px; }
.dv-turbo { display: flex; justify-content: center; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 11px; font: 800 12px/1 Manrope, sans-serif; color: var(--dim);
    background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); transition: .2s; }
.dv-turbo .ic { filter: grayscale(1); opacity: .6; transition: .2s; }
.dv-turbo[aria-pressed="true"] { color: #032238; background: linear-gradient(180deg, #e3f9ff, var(--aqua) 55%, var(--aqua-2)); box-shadow: 0 6px 18px -8px rgba(47,183,255,.9); }
.dv-turbo[aria-pressed="true"] .ic { filter: none; opacity: 1; }
.dv-go, .dock [data-dv-go] { color: #032238 !important; background: linear-gradient(180deg, #e9fbff, var(--aqua) 50%, var(--aqua-2)) !important; box-shadow: 0 14px 30px -12px rgba(47,183,255,.95) !important; }
.dv-go.is-wait, .dock [data-dv-go].is-wait { opacity: .6; pointer-events: none; }

.dv-top-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dv-top-tag { padding: 4px 8px; border-radius: 999px; font: 800 10px/1 Manrope, sans-serif; letter-spacing: .06em; color: var(--dim); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
.dv-top-row { --c: 95,216,255; position: relative; overflow: hidden; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 12px 12px 10px; border-radius: 14px;
    background: linear-gradient(100deg, rgba(var(--c),.13), rgba(var(--c),.03) 55%, transparent), var(--surface-3); box-shadow: inset 0 0 0 1px rgba(var(--c),.16); }
.dv-top-row + .dv-top-row { margin-top: 8px; }
.dv-top-row.is-mult { --c: 255,214,90; }
.dv-top-row::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: rgb(var(--c)); box-shadow: 0 0 12px rgba(var(--c),.8); }
.dv-top-row i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-style: normal; background: rgba(var(--c),.1); box-shadow: inset 0 0 0 1px rgba(var(--c),.25); }
.dv-top-row svg { width: 20px; height: 20px; fill: none; stroke: rgb(var(--c)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(var(--c),.6)); }
.dv-top-row.is-mult svg { fill: rgba(var(--c),.25); }
.dv-top-row .v { min-width: 0; }
.dv-top-row small { display: block; font: 800 10px/1 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.dv-top-row b { display: block; font: 800 17px/1 Unbounded, sans-serif; letter-spacing: -.02em; color: rgb(var(--c)); text-shadow: 0 0 16px rgba(var(--c),.35); white-space: nowrap; }
.dv-top-row em { display: grid; justify-items: end; gap: 6px; font-style: normal; min-width: 0; }
.dv-top-row .nm { display: flex; align-items: center; gap: 6px; max-width: 110px; font: 700 12px/1 Manrope, sans-serif; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-top-row .nm.is-empty { color: var(--faint); }
.dv-top-row .av { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font: 800 9.5px/1 Manrope, sans-serif; color: #04121f; background: linear-gradient(180deg, #e3f9ff, rgb(var(--c))); }
.dv-top-row .px { padding: 4px 7px; border-radius: 7px; font: 800 11px/1 Manrope, sans-serif; color: var(--dim); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); }
.dv-top-row.is-empty b { color: var(--faint); text-shadow: none; }

@media (max-width: 1300px), (max-height: 900px) {
    .dv { height: 600px; }
}

@media (min-width: 761px) and (max-height: 800px) {
    .dv { height: calc(100vh - 110px); min-height: 460px; }
}

.dv.is-narrow .dv-panel { padding: 22px 8px 0; gap: 7px; }
.dv.is-narrow .dv-judges { gap: 4px; padding-bottom: 7px; }
.dv.is-narrow .dv-judges::before { left: -8px; right: -8px; height: 24px; }
.dv.is-narrow .dv-ava { width: 50px; height: 50px; margin-bottom: -8px; }
.dv.is-narrow .dv-j small { font-size: 9px; }
.dv.is-narrow .dv-card { width: 44px; height: 50px; }
.dv.is-narrow .dv-card .fc b { font-size: 26px; }
.dv.is-narrow .dv-card .bk::after { font-size: 16px; }
.dv.is-narrow .dv-sum { width: 50px; border-radius: 10px; }
.dv.is-narrow .dv-sum b { font-size: 18px; }
.dv.is-narrow .dv-sum small { font-size: 8.5px; }
.dv.is-narrow .dv-step { flex: 0 0 auto; min-width: 42px; padding: 5px 5px 6px; }
.dv.is-narrow .dv-step b { font-size: 11.5px; }
.dv.is-narrow .dv-step i { font-size: 9.5px; }
.dv.is-narrow .dv-say { left: 50%; top: 54px; max-width: calc(100% - 24px); border-radius: 14px; font-size: 12px; padding: 8px 12px; }
.dv.is-narrow .dv-say.is-hint { font-size: 13px; }
.dv.is-narrow .dv-res { top: 52px; min-width: 190px; padding: 10px 18px 12px; }
.dv.is-narrow .dv-res strong { font-size: 38px; }
.dv.is-narrow .dv-res.t3 strong, .dv.is-narrow .dv-res.t4 strong { font-size: 46px; }
.dv.is-narrow .dv-res.five strong { font-size: 54px; }
.dv.is-narrow .dv-res .w { font-size: 15px; }
.dv.is-narrow .dv-res.five small { font-size: 12px; }

@media (max-width: 760px) {

    .dv { height: max(250px, calc(var(--free, 640px) - 10px)); border-radius: var(--r-lg); }
    .dv-sign { left: 10px; top: 10px; height: 32px; padding: 0 10px 0 7px; gap: 7px; border-radius: 11px; }
    .dv-sign b { font-size: 12px; }
    .dv-drop { width: 14px; height: 18px; clip-path: path('M7 0C7 0 0 8 0 12a7 6 0 0 0 14 0C14 8 7 0 7 0Z'); }
    .dv-hud { right: 10px; top: 12px; width: 44%; }
    .dv-recent span:nth-child(n+4) { display: none; }
    .dv-recent span { height: 26px; padding: 0 7px 0 6px; font-size: 10.5px; }
    .dv-opts { margin-top: 0; grid-template-columns: minmax(0, 1fr) 46px; }
    .dv-opts .dv-turbo { padding: 0; height: auto; }
    .dv-opts .dv-turbo span:not(.ic) { display: none; }
    .dv-opts .dv-turbo .ic { font-size: 16px; }
    .dv-levels button { height: 62px; gap: 2px; padding-bottom: 7px; grid-template-columns: auto auto; grid-template-rows: auto auto; align-content: center; justify-content: center; column-gap: 6px; }
    .dv-levels img { grid-row: 1 / 3; height: 38px; max-width: 34px; margin: 0; }
    .dv-levels b { align-self: end; justify-self: start; font-size: 11.5px; }
    .dv-levels small { align-self: start; justify-self: start; font-size: 10px; }
    .dv-lvnote { display: none; }
}

@media (max-width: 359px) {
    .dv-levels button { grid-template-columns: 1fr; justify-items: center; }
    .dv-levels img { display: none; }
    .dv-levels b, .dv-levels small { justify-self: center; }
}

.dv.is-short .dv-panel { padding-top: 16px; gap: 5px; }
.dv.is-short .dv-ava { width: 40px; height: 40px; margin-bottom: -6px; }
.dv.is-short .dv-j small { display: none; }
.dv.is-short .dv-card { width: 38px; height: 42px; }
.dv.is-short .dv-card .fc b { font-size: 22px; }
.dv.is-short .dv-step { padding: 4px 4px 5px; }
.dv.is-short .dv-res { min-width: 0; gap: 2px; padding: 6px 16px 8px; border-radius: 14px; }
.dv.is-short .dv-res strong, .dv.is-short .dv-res.t3 strong, .dv.is-short .dv-res.t4 strong, .dv.is-short .dv-res.five strong { font-size: 30px; }
.dv.is-short .dv-res .w { font-size: 13px; }
.dv.is-short .dv-res.five small { font-size: 11px; }
.dv.is-short .dv-sum b { font-size: 15px; }
.dv.is-short .dv-sum small { display: none; }
.dv.is-short .dv-bar { min-height: 30px; }

.dv.is-short.is-narrow .dv-say:not(.is-hint) { display: none; }
.dv.is-short.is-narrow .dv-say.is-hint { top: 46px; font-size: 12px; padding: 6px 10px; }
.dv.is-short.is-narrow .dv-res { top: 44px; }

.is-lite .dv-recent span, .is-lite .dv-say, .is-lite .dv-sign { -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-lite .dv-step.may, .is-lite .dv-card.tense, .is-lite .dv-say.is-hint { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .dv *, .dv { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
}

.dv > .brandmark { --bm-y: 43%; }