#exterior-events { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; }
#exterior-debug { position: fixed; right: 18px; bottom: 18px; z-index: 30; width: 244px; color: #c7d7df; background: rgba(8, 17, 26, .93); border: 1px solid rgba(150, 187, 204, .24); font: 11px/1.5 "Avenir Next", "PingFang SC", sans-serif; text-align: left; user-select: none; }
#exterior-debug:not([open]) { width: auto; }
#exterior-debug[hidden] { display: none; }
#exterior-debug summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; list-style: none; padding: 9px 12px; min-height: 36px; cursor: pointer; color: #a9c0cc; }
#exterior-debug summary::-webkit-details-marker { display: none; }
#exterior-debug summary::after { content: "+"; font-size: 14px; color: #7695a6; }
#exterior-debug[open] summary { border-bottom: 1px solid rgba(150, 187, 204, .15); }
#exterior-debug[open] summary::after { content: "−"; }
.exterior-debug-body { padding: 11px; }
.exterior-debug-events { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#exterior-debug button { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 5px 8px; color: #c0d4df; background: rgba(145, 183, 204, .07); border: 1px solid rgba(145, 183, 204, .18); border-radius: 2px; font: inherit; letter-spacing: 0; cursor: pointer; transition: background .15s, border-color .15s; }
#exterior-debug button:hover:enabled { background: rgba(145, 183, 204, .17); border-color: rgba(168, 215, 234, .4); }
#exterior-debug button:disabled { opacity: .35; cursor: default; }
#exterior-debug button:focus-visible, #exterior-debug summary:focus-visible, #exterior-debug input:focus-visible { outline: 1px solid #b0e0e7; outline-offset: 3px; }
.exterior-debug-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.exterior-debug-auto { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #8faab9; cursor: pointer; }
#exterior-auto { appearance: none; -webkit-appearance: none; position: relative; width: 26px; height: 14px; flex: none; padding: 0; margin: 0; border: 1px solid #526571; border-radius: 8px; background: #18232c; cursor: pointer; }
#exterior-auto::after { content: ""; position: absolute; width: 8px; height: 8px; top: 2px; left: 2px; border-radius: 50%; background: #728b9b; }
#exterior-auto:checked { background: #24545c; border-color: #6cabb3; }
#exterior-auto:checked::after { transform: translateX(12px); background: #c2ece8; }
#exterior-status { display: block; min-height: 16px; margin-top: 9px; color: #738d9d; font-size: 10px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gated #exterior-debug, .gated #exterior-events { display: none; }
body.egg-playing #exterior-debug { visibility: hidden; pointer-events: none; }
body.egg-playing #exterior-events, body.egg-fading #exterior-events { transition: opacity .42s ease; }
@media(max-height:550px) { #exterior-debug { bottom: 8px; right: 8px; width: 218px; } #exterior-debug summary { padding: 6px 10px; min-height: 29px; } .exterior-debug-body { padding: 8px; } #exterior-debug button { min-height: 28px; } .exterior-debug-auto { margin-top: 8px; } }