.db-campaign-active .brand-logo-art img { object-fit: contain !important; }
#db-campaign { --db-gold: #ffe52c; font-family: Arial, 'Noto Sans JP', sans-serif; color: #fff; }
#db-campaign *, #db-campaign *::before { box-sizing: border-box; }
.db-spectacle { position: fixed; inset: 0; z-index: 55; overflow: hidden; pointer-events: none; }
.db-orbit { position: absolute; left: 0; right: 0; bottom: max(5px, env(safe-area-inset-bottom)); height: 42px; overflow: hidden; }
.db-ball { position: absolute; left: -55px; bottom: 0; width: 36px; height: 36px; border: 1px solid #ffdd57; border-radius: 50%; background: radial-gradient(circle at 28% 23%, #fffad1 0, #ffdf56 14%, #ffad16 48%, #ef6e04 80%, #913900 100%); box-shadow: 0 0 12px #ffa00066, inset -3px -4px 5px #9c390060; animation: db-roll 27s linear infinite; animation-delay: calc(var(--i) * -3.8s); }
.db-stars { display: flex; align-content: center; justify-content: center; flex-wrap: wrap; width: 25px; height: 25px; margin: 5px; }
.db-stars i { font-style: normal; font-size: 8px; line-height: 8px; color: #be2605; width: 8px; text-align: center; }
@keyframes db-roll { from { transform: translateX(-40px) rotate(0); } to { transform: translateX(calc(100vw + 110px)) rotate(1080deg); } }
.db-dragon { position: absolute; right: 12px; bottom: 145px; width: clamp(130px, 19vw, 250px); max-height: 50vh; object-fit: contain; opacity: 0; transform: translateY(28px) scale(.94); transition: opacity 1s ease, transform 1.4s ease; mask-image: radial-gradient(ellipse 51% 49% at center, #000 70%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 51% 49% at center, #000 70%, transparent 100%); }
.db-reveal .db-dragon { opacity: .94; transform: translateY(0) scale(1); }
.db-notice { position: fixed; z-index: 56; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 150px); transform: translate(-50%, -8px); width: min(520px, calc(100vw - 28px)); padding: 12px 18px; border: 1px solid #ffdd55; border-radius: 12px; background: linear-gradient(120deg, #281907f5, #080d0df5); box-shadow: 0 5px 24px #0009, inset 0 0 20px #ffb90013; text-align: center; text-decoration: none; pointer-events: auto; opacity: 0; visibility: hidden; transition: opacity .4s, transform .4s, visibility .4s; }
.db-notice span { display: block; font-size: 9px; color: #edc96f; letter-spacing: 3px; margin-bottom: 4px; }
.db-notice strong { display: block; color: var(--db-gold); font-size: clamp(15px, 2.3vw, 23px); line-height: 1.5; text-wrap: balance; }
.db-reveal .db-notice { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.db-controls { position: fixed; z-index: 80; left: 12px; bottom: calc(49px + env(safe-area-inset-bottom, 0px)); width: 218px; padding: 8px; background: #090c12f5; border: 1px solid #e8a82099; border-radius: 12px; box-shadow: 0 4px 20px #0008; }
.db-label { display: block; font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--db-gold); margin: 0 3px 6px; }
.db-label small { font-size: 10px; color: #d4c7a0; float: right; letter-spacing: 0; }
.db-buttons { display: flex; gap: 5px; }
#db-campaign button { appearance: none; cursor: pointer; border: 1px solid #e7c65e70; border-radius: 7px; color: #f9e8af; background: #272414; font-size: 12px; line-height: 1.2; min-height: 36px; padding: 8px; flex: 1; white-space: nowrap; }
#db-campaign button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#db-campaign button[aria-pressed='true'] { background: #574315; border-color: #ffe52c; }
.db-effects-off .db-spectacle, .db-effects-off .db-notice { display: none; }
.db-reduced .db-ball { animation: none; left: calc(var(--i) * 12%); }
.db-reduced .db-dragon, .db-reduced .db-notice { transition: none; transform: none; }
.db-reduced .db-notice { transform: translateX(-50%); }
@media (max-width: 600px) {
  .db-dragon { right: 0; bottom: 82px; width: 110px; max-height: 24vh; }
  .db-controls { left: 8px; bottom: calc(132px + env(safe-area-inset-bottom, 0px)); width: 186px; padding: 6px; }
  #db-campaign button { min-height: 38px; font-size: 11px; padding: 7px 5px; }
  .db-label { font-size: 10px; letter-spacing: .7px; }
  .db-notice { top: calc(env(safe-area-inset-top, 0px) + 108px); padding: 9px 12px; }
  .db-ball { width: 30px; height: 30px; }
  .db-stars { margin: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .db-ball { animation: none; left: calc(var(--i) * 12%); }
  .db-dragon, .db-notice { transition: none; }
}

.db-notice:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#db-campaign:has(.db-notice:focus-visible) .db-notice { opacity: 1; visibility: visible; }