/* Dark Zones (client/panels-zones.js): the city map, a zone's stage chain, battle prep, the zone shop. Night-blue
   steel cards; every zone tints its screens with its own colour (--zc). The battle itself uses the story classes (.sy-*). */
.dz-root { --zc: #6f8fb8; --cc: var(--zc); }
.dz-c { text-align: center; } .dz-mt { margin-top: 10px; }
.dz-card { padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; background: linear-gradient(#1a222c, #12181f); border: 1px solid #2c3a48; }
.dz-tok { font-weight: 800; }
.sy-rw.dz-tk { border-color: #b8923a; color: var(--c-amber-pale); }

/* ---------- city map ---------- */
.dz-today { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; margin-bottom: 8px; border-radius: 12px; background: linear-gradient(#18212c, #10161d); border: 1px solid #2c3a48; }
.dz-today small { display: block; font: 800 9.5px/1.2 system-ui; letter-spacing: .08em; color: #8fa3b8; }
.dz-today b { font: 900 14px/1.25 system-ui; color: #fff; white-space: nowrap; }
.dz-today .mid { min-width: 0; text-align: center; } .dz-today .mid b { display: block; font-size: 11.5px; line-height: 1.2; color: var(--c-amber-hi); white-space: normal; }
.dz-today > div:last-child { text-align: right; } .dz-today > div:last-child b { color: #9fd0ff; font-variant-numeric: tabular-nums; }
.dz-city { --r: 11.5%; position: relative; margin-bottom: 10px; border-radius: 16px; overflow: hidden; background: #0a0e13; border: 1px solid #33485c; box-shadow: 0 0 0 1px #05080b, 0 8px 22px rgba(0,0,0,.55), inset 0 0 0 1px rgba(160,200,230,.06); }
.dz-cv { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.36; }
.dz-city::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 16px; box-shadow: inset 0 0 40px rgba(0,0,0,.7);
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px); }
/* a pin is a tap target over the place drawn on the canvas, with its name plate hanging under it */
.dz-pin { position: absolute; z-index: 1; width: 46%; aspect-ratio: 1 / 1; max-width: 240px; margin: 0; padding: 0; transform: translate(-50%, -25%); border: 0; background: none; color: #fff; -webkit-tap-highlight-color: transparent; }
.dz-pin .plate { position: absolute; left: 50%; top: 50%; transform: translateX(-50%); width: max-content; max-width: 100%; display: grid; justify-items: center; gap: 1px; padding: 3px 9px 4px; border-radius: 10px;
  background: linear-gradient(rgba(16,22,30,.93), rgba(8,11,15,.93)); border: 1px solid #3a4856; box-shadow: 0 3px 8px rgba(0,0,0,.6); }
.dz-pin .plate b { font: 900 12.5px/1.2 system-ui; white-space: nowrap; color: #c3ccd6; }
.dz-pin .plate em { font: 800 10.5px/1.25 system-ui; font-style: normal; white-space: nowrap; color: #93a1b0; }
.dz-pin .plate em i { font-style: normal; padding: 0 5px; border-radius: 5px; background: var(--zc); color: #0a0d11; font-weight: 900; letter-spacing: .04em; }
.dz-pin .plate small { font: 700 9.5px/1.2 system-ui; color: #7c8997; white-space: nowrap; }
.dz-pin.open .plate { border-color: var(--zc); box-shadow: 0 3px 8px rgba(0,0,0,.6), 0 0 12px color-mix(in srgb, var(--zc) 55%, transparent); }
.dz-pin.open .plate b { color: #fff; text-shadow: 0 0 8px color-mix(in srgb, var(--zc) 80%, transparent); } .dz-pin.open .plate em { color: #e8eef4; } .dz-pin.open .plate small { color: #aeb9c5; }
.dz-pin:active .plate { transform: translateX(-50%) scale(.96); }
.dz-pin .pn-bdg { position: absolute; left: 50%; top: 22%; margin-left: 9%; }
.dz-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dz-week .d { display: grid; justify-items: center; gap: 3px; padding: 5px 0 6px; border-radius: 9px; background: #0d1217; border: 1px solid #232e3a; }
.dz-week .d small { font: 800 10px/1 system-ui; letter-spacing: .04em; color: #8494a5; text-transform: uppercase; }
.dz-week .d span { display: flex; gap: 2px; min-height: 22px; align-items: center; } .dz-week .d i { font-style: normal; font-size: 15px; line-height: 1; filter: drop-shadow(0 0 4px var(--zc)); }
.dz-week .d .all { font: 900 12px/1 system-ui; letter-spacing: .06em; color: var(--c-amber-hi); }
.dz-week .d.on { border-color: var(--pn-gold); background: linear-gradient(#2a2410, #14181d); box-shadow: 0 0 8px rgba(240,180,60,.3); } .dz-week .d.on small { color: var(--pn-gold); }
.dz-links { display: grid; margin-bottom: 10px; } .dz-links .sy-btn { min-height: 46px; font-size: 15px; }
.dz-foot { text-align: center; line-height: 1.4; }

/* ---------- zone ---------- */
.dz-banner { display: grid; grid-template-columns: 54px 1fr; gap: 6px 10px; align-items: center; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--zc) 34%, transparent), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--zc) 30%, #0b0f14), #0d1218 70%);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--zc) 70%, #fff), 0 6px 16px rgba(0,0,0,.5); }
.dz-banner.closed { filter: saturate(.45); box-shadow: 0 0 0 1.5px #4a5663, 0 6px 16px rgba(0,0,0,.5); }
.dz-banner .ic { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 30px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--zc) 60%, transparent), 0 0 14px color-mix(in srgb, var(--zc) 40%, transparent); }
.dz-banner .tx { min-width: 0; } .dz-banner .tx small { font: 800 10px/1.2 system-ui; letter-spacing: .1em; color: color-mix(in srgb, var(--zc) 55%, #fff); }
.dz-banner .tx > b { display: block; font: 900 20px/1.15 system-ui; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.dz-banner .lock { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font: 800 11.5px/1.35 system-ui; color: #fff; background: color-mix(in srgb, var(--fc) 38%, #0b0f14); border: 1px solid var(--fc); }
.dz-banner p { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.88); }
.dz-banner .st { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.dz-banner .pn-chip { background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.18); font-weight: 700; } .dz-banner .pn-chip.on { border-color: var(--c-good); color: #c9f5cf; } .dz-banner .pn-chip.off { border-color: #c98a3a; color: #ffd9a0; }
.dz-bar { position: relative; height: 18px; margin: 4px 22px 0 2px; }
.dz-bar .tr { position: absolute; left: 0; right: 0; top: 3px; height: 12px; border-radius: 7px; background: #080b0f; box-shadow: inset 0 0 0 1px #2c3a48; overflow: hidden; }
.dz-bar .tr i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, color-mix(in srgb, var(--zc) 70%, #000), var(--zc), #fff6d0); transition: width .4s; }
.dz-bar .ch { position: absolute; right: -24px; top: -7px; width: 32px; height: 32px; display: grid; place-items: center; font-size: 21px; border-radius: 50%; background: #121920; box-shadow: 0 0 0 2px #2c3a48; filter: grayscale(.7) brightness(.8); }
.dz-bar .ch.ready { filter: none; box-shadow: 0 0 0 2px var(--pn-gold), 0 0 12px rgba(255,215,106,.7); animation: dzBob 1.2s ease-in-out infinite; }
@keyframes dzBob { 50% { transform: translateY(-3px) scale(1.08); } }
.dz-barlb { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 11px; color: var(--muted); }
.dz-next { display: grid; gap: 4px; margin-top: 8px; } .dz-next small { font: 900 10px/1 system-ui; letter-spacing: .1em; color: #8fa3b8; }
.dz-chain { display: grid; grid-template-columns: repeat(9, 1fr); gap: 0; position: relative; }
.dz-chain::before { content: ''; position: absolute; left: 5%; right: 5%; top: 16px; height: 3px; border-radius: 2px; background: #26323e; }
.dz-node { position: relative; min-width: 0; padding: 0; display: grid; justify-items: center; gap: 2px; border: 0; background: none; color: #fff; }
.dz-node .disc { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 900 14px/1 system-ui; background: radial-gradient(circle at 50% 30%, #3b4653, #161c23); border: 2px solid #55626f; box-shadow: 0 3px 0 #06080b; }
.dz-node b { font: 800 10px/1.1 system-ui; color: #aab6c2; } .dz-node small { font-size: 8.5px; color: #77838f; white-space: nowrap; }
.dz-node.cleared .disc { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--zc) 80%, #fff), color-mix(in srgb, var(--zc) 55%, #000)); border-color: var(--pn-gold); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.dz-node.next .disc { background: radial-gradient(circle at 50% 30%, var(--c-amber-pale), #e0932a); border-color: #fff3c8; color: #3a2304; box-shadow: 0 3px 0 #06080b, 0 0 0 4px rgba(255,215,106,.22), 0 0 14px rgba(255,215,106,.7); }
.dz-node.next b { color: var(--c-amber-hi); } .dz-node.locked .disc { font-size: 12px; filter: grayscale(1) brightness(.8); }
.dz-node.last .disc { border-radius: 10px; font-size: 17px; } .dz-node.last.locked .disc { filter: grayscale(.6) brightness(.85); border-color: #a04a3a; }
.dz-done { text-align: center; } .dz-done b { font: 900 17px/1.3 system-ui; color: var(--c-amber-hi); } .dz-done p { margin: 4px 0 0; font-size: 13px; color: #c6cec6; }
.dz-rr { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid #232e3a; } .dz-rr:last-child { border-bottom: 0; }
.dz-rr b { font: 900 13px/1 system-ui; color: var(--pn-gold); }
.dz-zone .pn-rank { border-bottom-color: #232e3a; }

/* ---------- battle prep ---------- */
.dz-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px 8px; align-items: center; padding: 12px 12px 10px; margin-bottom: 10px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(40,90,150,.35), rgba(12,16,22,.2) 45%, rgba(12,16,22,.2) 55%, rgba(150,50,40,.35)), linear-gradient(#18202a, #10151b); border: 1px solid #2c3a48; }
.dz-vs small { display: block; font: 900 10px/1.2 system-ui; letter-spacing: .1em; color: #8fa3b8; }
.dz-vs .me b, .dz-vs .foe b { display: block; font: 900 25px/1.1 system-ui; font-variant-numeric: tabular-nums; }
.dz-vs .me b { color: #9fd0ff; text-shadow: 0 0 12px rgba(80,160,255,.45); } .dz-vs .foe { text-align: right; } .dz-vs .foe b { color: #ff9a86; text-shadow: 0 0 12px rgba(255,90,60,.4); }
.dz-vs .me span, .dz-vs .foe span { font-size: 11px; color: var(--muted); }
.dz-vs .mid { display: grid; justify-items: center; gap: 4px; } .dz-vs .mid i { font: italic 900 19px/1 system-ui; color: rgba(255,255,255,.3); letter-spacing: .08em; }
.dz-vs .bar { grid-column: 1 / -1; height: 8px; border-radius: 5px; overflow: hidden; background: linear-gradient(90deg, #c0392b, #ff8a6a); box-shadow: 0 0 0 1px #05080b; }
.dz-vs .bar i { display: block; height: 100%; background: linear-gradient(90deg, #2f6fa8, #7cc0ff); box-shadow: 2px 0 0 #05080b; transition: width .3s; }
.dz-vs .tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dz-vs .tag { padding: 3px 10px; border-radius: 999px; font: 800 11.5px/1.35 system-ui; color: #8f9aa6; background: rgba(0,0,0,.35); border: 1px dashed #3a4856; }
.dz-vs .tag.on { color: #c9f5a8; background: #1c3319; border: 1px solid var(--c-good-hi); box-shadow: 0 0 10px rgba(143,227,90,.25); }
.dz-vs .pn-note { grid-column: 1 / -1; }
.dz-only { padding: 2px 8px; border-radius: 999px; font: 800 11px/1.35 system-ui; white-space: nowrap; color: #fff; background: color-mix(in srgb, var(--fc) 38%, #0b0f14); border: 1px solid var(--fc); }
.dz-barred { width: 100%; margin-top: 8px; padding: 6px 8px; display: flex; align-items: center; gap: 8px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px dashed #3a4856; color: #8f9aa6; font: 700 11.5px/1.3 system-ui; text-align: left; }
.dz-barred .ps { display: flex; flex: none; } .dz-barred .ps > * { margin-left: -7px; } .dz-barred .ps > :first-child { margin-left: 0; }
img.dz-mini, .dz-mini.pn-portrait-fallback { border-radius: 50%; border: 1.5px solid #3a4856; object-position: top; filter: grayscale(1) brightness(.6); background: var(--c-ink); }
.dz-mini.pn-portrait-fallback b { display: none; }

/* ---------- battle overlay ---------- */
.dz-battle .sy-btags .pw { background: rgba(0,0,0,.4); border-color: #3a4856; color: #cfd8e2; }
.dz-battle .sy-bfoot .sy-btn { min-width: 0; flex: 1; max-width: 130px; }
.dz-paused { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 16px; border-radius: 999px; font: 900 14px/1.2 system-ui; letter-spacing: .1em; color: #fff; background: rgba(0,0,0,.75); box-shadow: 0 0 0 2px var(--c-amber-hi); }
.dz-battle.paused .dz-paused { display: block; } .dz-battle.paused .sy-bf { filter: saturate(.5) brightness(.8); }
.dz-rcard { gap: 7px; } .dz-rsub { font: 800 12.5px/1.2 system-ui; color: #d8dfd9; }
.dz-rprog { width: 100%; display: grid; gap: 3px; padding: 7px 9px; border-radius: 12px; background: rgba(0,0,0,.3); }
.dz-rprog .top { display: flex; justify-content: space-between; font: 800 12px/1.2 system-ui; color: #d8dfd9; } .dz-rprog .top b { color: var(--pn-gold); }
.dz-rprog .pn-bar { margin: 0; height: 9px; } .dz-rprog em { font: 800 12.5px/1.3 system-ui; font-style: normal; color: var(--c-amber-hi); }
.dz-rleft { font: 800 13px/1.3 system-ui; color: #ffb39a; }

/* ---------- shop ---------- */
.dz-wallet { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; background: linear-gradient(135deg, #3a2f12, #14181d 70%); border: 1px solid var(--pn-gold2); }
.dz-wallet .ic { font-size: 34px; text-align: center; filter: drop-shadow(0 0 8px rgba(255,215,106,.5)); }
.dz-wallet small { display: block; font: 800 9.5px/1.2 system-ui; letter-spacing: .08em; color: #c9b98a; } .dz-wallet b { font: 900 22px/1.1 system-ui; color: var(--c-amber-pale); }
.dz-wallet .r { text-align: right; } .dz-wallet .r b { font-size: 14px; color: #fff; }
.dz-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.dz-item { min-width: 0; display: grid; justify-items: center; gap: 3px; padding: 9px 4px 7px; border-radius: 12px; text-align: center; background: linear-gradient(#1a222c, #12181f); border: 1px solid #2c3a48; }
.dz-item .ic { width: 46px; height: 46px; display: grid; place-items: center; font-size: 26px; border-radius: 12px; background: #0b0f14; box-shadow: inset 0 0 0 1px #2c3a48; }
.dz-item b { font: 800 11.5px/1.2 system-ui; min-height: 28px; display: grid; align-content: center; } .dz-item small { font-size: 10px; color: var(--muted); }
.dz-item .sy-btn { width: 100%; padding: 4px 2px; } .dz-item.out { opacity: .55; }

@media (max-height: 560px) { /* phone landscape: the map beside nothing, just shorter */
  .dz-cv { aspect-ratio: 1 / 1.36; } .dz-vs .me b, .dz-vs .foe b { font-size: 20px; }
}