/* Drone Delivery City : page-specific styles (shared: arcade-kit.css, sim3d.css for the banner / result card) */
.ddc-wrap { position: relative; width: 100%; }
.ddc-wrap .ak-stage { background: #94a3b8; touch-action: none; user-select: none; -webkit-user-select: none; }
.ddc-hud { position: absolute; inset: 0; pointer-events: none; font-family: system-ui, sans-serif; container-type: inline-size; }
.ddc-hud button, .ddc-hud .sim-result { pointer-events: auto; }
.ddc-card { position: absolute; left: 10px; top: 10px; background: rgba(15, 23, 42, .8); color: #fff; border-radius: 12px; padding: 6px 12px; min-width: 190px; }
.ddc-card b { display: block; font: 900 16px/1.2 system-ui, sans-serif; font-variant-numeric: tabular-nums; } .ddc-card span { display: block; font: 800 12px system-ui, sans-serif; color: #fde68a; margin-top: 3px; }
.ddc-bat { position: relative; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, .15); margin-top: 4px; overflow: hidden; }
.ddc-bat i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #22c55e, #a3e635); }
.ddc-bat.is-low i { background: linear-gradient(90deg, #ef4444, #f97316); animation: ddc-blink .5s infinite alternate; }
.ddc-bat em { position: relative; display: block; font: 800 10px/16px system-ui; font-style: normal; padding-left: 6px; }
@keyframes ddc-blink { to { opacity: .55; } }
.ddc-alt { position: absolute; right: 12px; top: 60px; width: 26px; height: 150px; border-radius: 13px; background: rgba(15, 23, 42, .7); border: 2px solid rgba(255, 255, 255, .3); overflow: hidden; }
.ddc-alt i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, #38bdf8, #a5f3fc); }
.ddc-alt b { position: absolute; left: -46px; bottom: 0; width: 42px; text-align: right; font: 900 12px system-ui; color: #fff; text-shadow: 0 1px 3px #000; }
.ddc-list { position: absolute; left: 10px; top: 92px; display: flex; flex-direction: column; gap: 3px; max-width: 46%; }
.ddc-list div { background: rgba(15, 23, 42, .72); color: #e2e8f0; border-radius: 8px; padding: 3px 8px; font: 700 12px system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ddc-list div.is-carry { background: rgba(21, 128, 61, .85); color: #fff; } .ddc-list div.is-late b { color: #fca5a5; } .ddc-list b { color: #fde047; }
.ddc-pop { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); font: 900 clamp(18px, 3.2cqw, 28px) system-ui, sans-serif; color: #fff; text-shadow: 0 2px 8px rgba(15, 23, 42, .9); opacity: 0; white-space: nowrap; text-align: center; }
.ddc-pop small { display: block; font-size: .55em; color: #fde68a; }
.ddc-pop.is-on { animation: ddc-pop 2s ease-out forwards; }
@keyframes ddc-pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%); } }
.ddc-tb { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.ddc-tb button, .ddc-tb .ak-mute { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(15, 23, 42, .7); color: #fff; font-size: 17px; cursor: pointer; }
.ddc-stick { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .5); background: rgba(15, 23, 42, .2); display: none; }
.ddc-stick.is-on { display: block; } .ddc-stick i { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(255, 255, 255, .75); }
.ddc-ud { position: absolute; right: 14px; bottom: 14px; display: none; flex-direction: column; gap: 8px; }
.ddc-ud button { width: 60px; height: 60px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .5); background: rgba(15, 23, 42, .55); font-size: 24px; touch-action: none; }
.ddc-ud button.is-on { background: rgba(14, 165, 233, .85); }
.ddc-hud.is-touch .ddc-ud { display: flex; }
.ddc-hud .sim-banner { pointer-events: none; }
.ddc-hud .sim-result[hidden] { display: none; }
.ddc-hud.is-over .ddc-tb, .ddc-hud.is-over .ddc-ud { display: none; }
.ddc-hint { opacity: .75; font-size: 13px; }
.ddc-opts { margin-top: 14px; } .ddc-opts h3 { margin: 12px 0 6px; } .ddc-coins { color: #fde047; font-size: 14px; margin-left: 8px; }
.ddc-grid, .ddc-up { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ddc-grid button, .ddc-up button { text-align: left; border-radius: 12px; padding: 8px 10px; border: 2px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .06); color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.ddc-grid button b, .ddc-up button b { font-size: 13.5px; } .ddc-grid button small, .ddc-up button small { font-size: 12px; opacity: .85; } .ddc-grid button em { font-style: normal; color: #fde047; font-size: 13px; }
.ddc-grid button[aria-pressed="true"] { border-color: #ffd54a; background: rgba(255, 213, 74, .14); }
.ddc-grid button:disabled, .ddc-up button:disabled { opacity: .45; cursor: not-allowed; }
@container (max-width: 600px) { .ddc-card { left: 6px; top: 6px; min-width: 0; } .ddc-card b { font-size: 14px; } .ddc-tb { right: 6px; top: 6px; gap: 4px; } .ddc-tb button, .ddc-tb .ak-mute { width: 36px; height: 36px; font-size: 15px; } .ddc-list { top: 86px; max-width: 60%; } .ddc-list div { font-size: 11px; } .ddc-alt { top: 52px; height: 110px; } }