/* Only the demo navigation. Game/admin styling comes from the real views. */
* { box-sizing: border-box; }
.demo-host { margin: 0; background: #fff5ec; color: #26130b; font-family: system-ui, sans-serif; }
.demo-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 20px; background: #fffaf5; border-bottom: 1px solid #ecd4c0; }
.demo-bar a { color: #743e1a; text-decoration: none; }
.demo-bar strong { margin-right: auto; font-size: 14px; }
.demo-bar button { font: inherit; font-size: 13px; border: 1px solid #dfc3af; border-radius: 9px; background: #fff; padding: 9px 12px; cursor: pointer; color: #452615; }
.demo-views { display: flex; gap: 5px; }
#connection-demo-person-label { font-size:13px; display:flex; align-items:center; gap:8px; }
#connection-demo-person-label[hidden] { display:none; }
#connection-demo-person { max-width:min(230px,55vw); font:inherit; padding:8px; border:1px solid #dfc3af; border-radius:9px; background:#fff; color:#452615; }
.demo-views button[aria-pressed=true] { background: #3c2518; color: white; border-color: #3c2518; }
#demo-screen { display: block; width: 100%; height: calc(100vh - 68px); border: 0; }
#demo-status { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); max-width: min(600px,90%); border-radius: 12px; background: #302015; color: white; padding: 12px 20px; z-index: 100; margin: 0; box-shadow: 0 6px 30px #0003; }
#demo-status:empty { display: none; }
#demo-challenge { border: 1px solid #33445e; padding: 0; border-radius: 24px; width: min(760px, calc(100% - 24px)); background: #07101f; }
#demo-challenge::backdrop { background: #0009; }
#demo-challenge iframe { display: block; width: 100%; height: min(720px,85vh); border: 0; }
#demo-challenge-close { position: absolute; top: 9px; right: 12px; border: 0; color: white; background: #263851; border-radius: 50%; width: 32px; height: 32px; font-size: 24px; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #2587a7; outline-offset: 3px; }
@media(max-width:600px) { .demo-bar { padding: 10px; gap: 8px; }.demo-bar strong { font-size: 12px; }.demo-views { order: 3; width: 100%; }.demo-views button { flex: 1; }#demo-restart { font-size: 11px; padding: 7px; } }