#sound[data-audio-state=blocked]{color:#f1d58a}
#sound[data-audio-state=starting]{color:var(--mint)}
.nabbit-dot{background:#aa1fbe}
@media(max-width:440px){body:has(#items:not([hidden])) .edition{display:none}body:has(#items:not([hidden])) #fullscreen-label{display:none}body:has(#items:not([hidden])) #fullscreen{width:44px;min-width:44px;padding:0}}
#character-picker:has(#choose-nabbit:not([hidden])){display:grid;grid-template-columns:1fr 1fr;gap:6px}
#character-picker:has(#choose-nabbit:not([hidden])) .character{min-height:40px}
.dialog-actions{display:flex;gap:16px;align-items:center}.dialog-actions .play-button{width:auto;min-width:100px}.dialog-actions .secondary-button{min-width:100px;margin:0}
#nabbit-dialog p{font-size:16px;line-height:1.55}
.item-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.item-choice{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;background:#2b3935;min-height:84px;border:1px solid #58766a;border-radius:10px;padding:10px;font-size:14px}.item-choice strong{font-size:20px}.item-choice:disabled{cursor:default}
.chase-hud{position:absolute;top:34px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:7px 10px;background:#20102dde;border:1px solid #d678e4;color:#fff;font:700 12px monospace;white-space:nowrap;pointer-events:none;z-index:2}.chase-hud span{font-size:14px;color:#f0cbfa}
@container(max-height:230px){#character-picker:has(#choose-nabbit:not([hidden]))~.play-button{min-height:40px}.overlay-content:has(#choose-nabbit:not([hidden])) h1{font-size:20px;margin:4px 0 8px}.overlay-content:has(#choose-nabbit:not([hidden])) .eyebrow{display:none}.overlay-content:has(#choose-nabbit:not([hidden])) p{display:none}}

.sonic-dot{background:#4242ff}
#character-picker:has(#choose-nabbit:not([hidden])):has(#choose-sonic:not([hidden])){grid-template-columns:repeat(3,minmax(0,1fr))}
#character-picker:has(#choose-sonic:not([hidden])) .character{min-width:0;gap:4px;padding:7px 4px;font-size:12px}
@container(max-height:340px){.overlay-content:has(#choose-sonic:not([hidden])) h1{font-size:22px;margin:4px 0 8px}.overlay-content:has(#choose-sonic:not([hidden])) .eyebrow,.overlay-content:has(#choose-sonic:not([hidden])) p{display:none}}
@container(max-height:160px){#character-picker:has(#choose-sonic:not([hidden])){gap:4px;margin-bottom:6px}.overlay-content:has(#choose-sonic:not([hidden])) h1{display:none}#character-picker:has(#choose-sonic:not([hidden])) .character{min-height:32px;padding:4px}}