:root { color-scheme: dark; }
* { box-sizing: border-box; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
html, body { margin: 0; height: 100%; background: #101418; color: #e7e2d8; font: 16px/1.35 "Segoe UI", sans-serif; }
button, input { font: inherit; }
[hidden] { display: none !important; }
#gate:not([hidden]), #radio:not([hidden]) { min-height: 100%; display: flex; flex-direction: column; }
#gate { justify-content: center; gap: 10px; padding: 28px 22px calc(28px + env(safe-area-inset-bottom)); max-width: 420px; margin: 0 auto; }
.mark { width: 72px; height: 72px; border: 4px solid #c4a265; border-radius: 50%; margin: 0 auto 4px; box-shadow: inset 0 0 0 16px #c4a265; }
h1, .word { margin: 0; }
.word { display: flex; justify-content: center; align-items: baseline; gap: 1px; color: #c4a265; font-size: 1.7rem; letter-spacing: 0.02em; }
.word i, .word b { font-style: normal; font-weight: 600; display: inline-block; }
.word i:nth-child(1) { color: #f3e6c4; font-weight: 800; font-size: 1.16em; font-family: Georgia, serif; }
.word i:nth-child(2) { color: #c4a265; letter-spacing: 0.04em; }
.word i:nth-child(3) { color: #e7eef5; font-family: Georgia, serif; font-weight: 500; }
.word i:nth-child(4) { color: #c4a265; font-weight: 800; }
.word > b { width: 0.35em; }
.word i:nth-child(6) { color: #f3e6c4; font-weight: 800; font-size: 1.12em; font-family: Georgia, serif; }
.word i:nth-child(7) { color: #c4a265; }
.word i:nth-child(8) { color: #e7eef5; font-weight: 700; letter-spacing: 0.06em; }
.word i:nth-child(9) { color: #9a7b45; font-weight: 800; }
#gate .word i { animation: talk 2.6s ease-in-out infinite; }
#gate .word i:nth-child(2), #gate .word i:nth-child(6) { animation-delay: 0.15s; }
#gate .word i:nth-child(3), #gate .word i:nth-child(7) { animation-delay: 0.3s; }
#gate .word i:nth-child(4), #gate .word i:nth-child(9) { animation-delay: 0.45s; }
@keyframes talk { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.word.bar { font-size: 0.95rem; flex: 1; }
#gate p, #copy, #foot { margin: 0; text-align: center; color: #8b8578; }
label { display: flex; flex-direction: column; gap: 6px; color: #8b8578; font-size: 13px; }
input { height: 46px; border: 1px solid #31404c; border-radius: 10px; background: #171d24; color: #e7e2d8; padding: 0 12px; }
#gate button, #composer button, #sos, #leave { height: 48px; border: 0; border-radius: 12px; background: #c4a265; color: #1a140c; font-weight: 700; }
#gate-err { color: #e07a5f; }
header, nav, footer { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
header { padding-top: calc(8px + env(safe-area-inset-top)); background: #171d24; }
header b.word { flex: 1; text-align: center; color: #c4a265; }
#who, #floor { margin: 0; padding: 8px 12px; }
#floor { background: #1b242d; border-top: 1px solid #31404c; border-bottom: 1px solid #31404c; }
nav button, #leave { flex: 1; height: 40px; border-radius: 10px; border: 1px solid #31404c; background: #171d24; color: #e7e2d8; }
nav button.on { background: #c4a265; color: #1a140c; border-color: #c4a265; }
section { flex: 1; overflow: auto; padding: 8px 12px 8px; }
.card { padding: 12px 0; border-bottom: 1px solid #24303a; }
.card b { display: block; }
.card small { color: #8b8578; }
.card .row { display: flex; gap: 6px; margin-top: 8px; }
.card .row button, .card > button { flex: 1; height: 38px; border-radius: 9px; border: 1px solid #31404c; background: #171d24; color: #e7e2d8; }
#map { height: 100%; min-height: 280px; border-radius: 12px; }
#log { display: flex; flex-direction: column; gap: 8px; }
.bubble { background: #171d24; border-radius: 10px; padding: 8px 10px; }
#composer { display: flex; gap: 8px; margin-top: 8px; }
#composer input { flex: 1; }
footer { padding-bottom: calc(8px + env(safe-area-inset-bottom)); background: #171d24; }
#sos { background: #c4543a; color: white; flex: 1; }
#ptt { width: 92px; height: 92px; border-radius: 50%; border: 6px solid #8d7040; background: #c4a265; color: #1a140c; font-weight: 800; font-size: 18px; }
#ptt.tx { background: #d35b3e; color: white; border-color: #8a3224; }
#leave { flex: 1; background: #171d24; color: #e7e2d8; border: 1px solid #31404c; }
#foot { padding: 0 0 8px; }
.leaflet-container { background: #0e141a; font: inherit; }