* { box-sizing: border-box; margin: 0; padding: 0; }

/* Dark scrollbars app-wide */
* {
  scrollbar-width: thin;
  scrollbar-color: #1a1b1e #2b2d31;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #1a1b1e; border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #111214; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

body { font-family: system-ui, -apple-system, sans-serif; background: #1e1f22; color: #dbdee1; height: 100vh; overflow: hidden; }
.hidden { display: none !important; }
.selector-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #1e1f22; }
.selector-container { background: #2b2d31; padding: 2rem; border-radius: 12px; width: 420px; }
.selector-container h1 { color: #fff; margin-bottom: 0.25rem; }
.subtitle { color: #949ba4; margin-bottom: 1.5rem; }
.server-list { margin-bottom: 1.5rem; }
.server-item { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: #1e1f22; border-radius: 8px; margin-bottom: 0.5rem; cursor: pointer; }
.server-item:hover { background: #35373c; }
.server-item .name { font-weight: 600; color: #fff; }
.server-item .url { font-size: 0.8rem; color: #949ba4; }
.add-server input { width: 100%; padding: 0.6rem; margin-bottom: 0.5rem; background: #1e1f22; border: 1px solid #3f4147; border-radius: 6px; color: #dbdee1; }
button { padding: 0.6rem 1.2rem; background: #5865f2; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem; }
button:hover { background: #4752c4; }
.error { color: #ed4245; margin-top: 0.5rem; }
.back-btn { margin-top: 1rem; background: #4e5058; width: 100%; }
.tab-btn { background: transparent; color: #949ba4; margin-right: 0.5rem; margin-bottom: 1rem; }
.tab-btn.active { color: #fff; border-bottom: 2px solid #5865f2; border-radius: 0; }
#login-form input, #register-form input { width: 100%; padding: 0.6rem; margin-bottom: 0.5rem; background: #1e1f22; border: 1px solid #3f4147; border-radius: 6px; color: #dbdee1; }
#login-form button, #register-form button { width: 100%; margin-top: 0.5rem; }

.app-layout { display: flex; height: 100vh; }
.place-rail, .server-rail { width: 72px; background: #1e1f22; padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#place-list { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; overflow-y: auto; }
.place-icon, .server-icon { width: 48px; height: 48px; border-radius: 50%; background: #313338; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; cursor: pointer; border: none; flex-shrink: 0; }
.place-icon:hover, .place-icon.active, .server-icon:hover, .server-icon.active { border-radius: 16px; background: #5865f2; }
.place-icon.add { background: #313338; color: #23a559; font-size: 1.5rem; }
.drop-overlay { position: absolute; inset: 0; background: rgba(88, 101, 242, 0.15); border: 2px dashed #5865f2; display: flex; align-items: center; justify-content: center; z-index: 100; pointer-events: none; }
.drop-overlay-inner { background: #2b2d31; padding: 1.5rem 2rem; border-radius: 12px; color: #fff; font-weight: 600; font-size: 1.1rem; }
.channel-sidebar { width: 240px; background: #2b2d31; display: flex; flex-direction: column; }
.channel-header { padding: 1rem; font-weight: 700; color: #fff; border-bottom: 1px solid #1f2023; display: flex; justify-content: space-between; align-items: center; }
.channel-list { flex: 0 1 auto; max-height: 38%; overflow-y: auto; padding: 0.5rem; }
.chat-tools-panel { flex: 1; min-height: 140px; display: flex; flex-direction: column; overflow: hidden; border-top: 1px solid #1f2023; padding: 0.5rem 0; }
.chat-tools-panel.hidden { display: none !important; }
.chat-tools-channel { font-size: 0.85rem; color: #fff; font-weight: 600; padding: 0 0.75rem 0.5rem; }
.chat-search { margin: 0 0.5rem 0.5rem; padding: 0.45rem 0.6rem; background: #1e1f22; border: 1px solid #3f4147; border-radius: 6px; color: #dbdee1; font-size: 0.85rem; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0 0.5rem 0.5rem; }
.filter-chip { padding: 0.25rem 0.5rem; font-size: 0.72rem; background: #35373c; border-radius: 999px; color: #949ba4; }
.filter-chip.active { background: #5865f2; color: #fff; }
.people-filter { margin: 0 0.5rem 0.5rem; padding: 0.4rem 0.5rem; background: #1e1f22; border: 1px solid #3f4147; border-radius: 6px; color: #dbdee1; font-size: 0.8rem; width: calc(100% - 1rem); }
.people-filter.hidden { display: none; }
.bookmark-list { flex: 1; overflow-y: auto; padding: 0 0.5rem; }
.bookmark-item { display: block; width: 100%; text-align: left; padding: 0.45rem 0.5rem; margin-bottom: 0.35rem; background: #35373c; border: none; border-radius: 6px; color: #dbdee1; cursor: pointer; }
.bookmark-item:hover { background: #404249; }
.bookmark-author { display: block; font-size: 0.75rem; font-weight: 600; color: #fff; }
.bookmark-preview { display: block; font-size: 0.72rem; color: #949ba4; margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-empty { font-size: 0.75rem; color: #949ba4; padding: 0.5rem; }
.channel-item { padding: 0.5rem 0.75rem; border-radius: 4px; cursor: pointer; color: #949ba4; }
.channel-item:hover, .channel-item.active { background: #35373c; color: #dbdee1; }
.add-channel { margin: 0.5rem; background: #35373c; }
.sidebar-section { padding: 0.5rem 0; border-top: 1px solid #1f2023; }
.sidebar-label { font-size: 0.7rem; text-transform: uppercase; color: #949ba4; padding: 0.5rem 1rem 0.25rem; }
.dm-list { max-height: 180px; }
.channel-item.dm-item { color: #dbdee1; }
.members-panel li.clickable { cursor: pointer; border-radius: 4px; padding: 0.25rem 0.5rem; margin: 0 -0.5rem; }
.members-panel li.clickable:hover { background: #35373c; }
.members-panel li.self { color: #949ba4; }
.canvas-toolbar { display: flex; gap: 0.5rem; margin-left: auto; margin-right: 1rem; }
.chat-header { display: flex; align-items: center; }
.main-content { flex: 1; display: flex; flex-direction: column; background: #313338; }
.chat-header { padding: 0.75rem 1rem; border-bottom: 1px solid #1f2023; font-weight: 600; color: #fff; display: flex; justify-content: space-between; }
.online-count { font-size: 0.8rem; color: #949ba4; font-weight: normal; }
.content-area { flex: 1; overflow: hidden; position: relative; }
.messages { height: 100%; overflow-y: auto; overflow-x: hidden; padding: 0.5rem 1rem 1rem; }
.date-divider { display: flex; align-items: center; margin: 1.25rem 0 0.5rem; }
.date-divider::before, .date-divider::after { content: ''; flex: 1; height: 1px; background: #3f4147; }
.date-divider span { padding: 0 0.75rem; font-size: 0.72rem; font-weight: 600; color: #949ba4; white-space: nowrap; }
.message-group { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 0.85rem; padding: 0.15rem 0.5rem 0.15rem 0.25rem; margin: 0 -0.5rem; border-radius: 4px; position: relative; overflow: hidden; }
.message-group:hover { background: rgba(0, 0, 0, 0.06); }
.message-group-compact { padding-top: 0.05rem; padding-bottom: 0.05rem; }
.message-group-compact .message-body { margin-top: -0.35rem; }
.message-highlight { background: rgba(88, 101, 242, 0.18) !important; }
.msg-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; color: #fff; flex-shrink: 0; margin-top: 0.1rem; }
.msg-avatar-spacer { width: 40px; }
.message-body { min-width: 0; padding-right: 3rem; }
.message-head { display: flex; align-items: baseline; gap: 0.5rem; line-height: 1.375rem; }
.message .author { font-weight: 600; color: #fff; font-size: 0.95rem; }
.message .time, .message-time-compact { font-size: 0.72rem; color: #949ba4; font-weight: 500; }
.message-time-compact { opacity: 0; margin-left: 0.25rem; }
.message-group-compact:hover .message-time-compact { opacity: 1; }
.message-group img.attach,
.message-group video.attach,
.message-group img.gif-attach { max-width: 100%; width: auto; height: auto; max-height: 360px; border-radius: 8px; margin-top: 0.35rem; display: block; object-fit: contain; }
.message-group video.attach { max-height: 420px; }
.message .content { line-height: 1.375; white-space: pre-wrap; color: #dbdee1; font-size: 0.95rem; word-break: break-word; overflow-wrap: anywhere; }
.message-actions { position: absolute; right: 0.5rem; top: 0.15rem; display: flex; gap: 0.2rem; padding: 0.2rem; background: #2b2d31; border: 1px solid #1f2023; border-radius: 6px; opacity: 0; transition: opacity 0.12s; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.message-group:hover .message-actions { opacity: 1; }
.message-reactions { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.thread-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; width: 100%; margin-top: 0.45rem; padding: 0.45rem 0.65rem; background: #2b2d31; border: 1px solid #3f4147; border-radius: 8px; color: #949ba4; font-size: 0.8rem; text-align: left; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.thread-bar:hover { background: #35373c; border-color: #5865f2; color: #dbdee1; }
.thread-bar-active { border-left: 3px solid #5865f2; }
.thread-bar-empty { opacity: 0; border-style: dashed; }
.message-group:hover .thread-bar-empty { opacity: 1; }
.thread-bar-icon { font-size: 0.85rem; }
.thread-bar-count { font-weight: 600; color: #5865f2; }
.thread-bar-active:hover .thread-bar-count { color: #7289ff; }
.thread-bar-sep { color: #5c5e66; }
.thread-bar-time { color: #949ba4; font-size: 0.75rem; }
.thread-bar-preview { flex: 1 1 100%; font-size: 0.75rem; color: #b5bac1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.1rem; }
.reaction-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.45rem; background: #404249; border: 1px solid transparent; border-radius: 8px; font-size: 0.85rem; color: #dbdee1; cursor: pointer; line-height: 1.3; }
.reaction-pill:hover { background: #4e5058; border-color: #5c5e66; }
.reaction-pill.active { background: rgba(88, 101, 242, 0.2); border-color: #5865f2; }
.reaction-pill .count { font-size: 0.72rem; color: #b5bac1; font-weight: 600; }
.emoji-picker-portal { position: fixed; z-index: 500; }
.msg-action { background: #404249; padding: 0.2rem 0.4rem; font-size: 0.78rem; border-radius: 4px; color: #dbdee1; min-width: 1.6rem; }
.msg-action:hover { background: #5865f2; color: #fff; }
.msg-action.active { color: #fee75c; background: #404249; }
.message-group .content a.msg-link, .thread-message .content a.msg-link { color: #00a8fc; text-decoration: none; }
.message-group .content a.msg-link:hover, .thread-message .content a.msg-link:hover { text-decoration: underline; }
.composer { display: flex; padding: 1rem; gap: 0.35rem; background: #2b2d31; position: relative; align-items: center; }
.composer input { flex: 1; padding: 0.75rem; background: #383a40; border: none; border-radius: 8px; color: #dbdee1; }
.icon-btn { background: transparent; padding: 0.5rem; font-size: 1.1rem; }
.members-panel { width: 200px; background: #2b2d31; padding: 1rem; overflow-y: auto; }
.members-panel h3 { font-size: 0.75rem; text-transform: uppercase; color: #949ba4; margin-bottom: 0.75rem; }
.members-panel li { padding: 0.25rem 0; color: #dbdee1; font-size: 0.9rem; }
.canvas-view { width: 100%; height: 100%; display: block; cursor: grab; }
.canvas-view:active { cursor: grabbing; }
.voice-view { padding: 2rem; text-align: center; }
.voice-view .peer { display: inline-block; margin: 1rem; padding: 1rem; background: #2b2d31; border-radius: 8px; }
.world3d-view { width: 100%; height: 100%; }

.thread-empty { color: #949ba4; font-size: 0.85rem; text-align: center; padding: 1.5rem 1rem; }

.thread-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 1.5rem; }
.thread-modal-inner { width: min(960px, 94vw); height: min(880px, 92vh); max-height: 92vh; background: #313338; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.55); border: 1px solid #1f2023; }
.thread-modal-header { display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1rem; border-bottom: 1px solid #1f2023; background: #2b2d31; flex-shrink: 0; }
.thread-header-title { flex: 1; min-width: 0; }
.thread-header-title h2 { font-size: 0.95rem; color: #fff; font-weight: 700; line-height: 1.2; }
.thread-header-sub { font-size: 0.72rem; color: #949ba4; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.thread-sort { padding: 0.35rem 0.5rem; background: #383a40; border: 1px solid #3f4147; border-radius: 6px; color: #dbdee1; font-size: 0.75rem; }
.thread-close-btn { color: #b5bac1; font-size: 1rem; padding: 0.35rem 0.5rem; border-radius: 4px; }
.thread-close-btn:hover { background: #404249; color: #fff; }
.thread-parent { flex-shrink: 0; padding: 0.85rem 1rem; background: #2b2d31; border-bottom: 1px solid #1f2023; }
.thread-body { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.thread-replies-label { padding: 0.65rem 1rem 0.35rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #949ba4; background: #313338; border-bottom: 1px solid #1f2023; position: sticky; top: 0; z-index: 1; }
.thread-replies { padding: 0.5rem 0.75rem 0.85rem; }
.thread-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 0.75rem; padding: 0.2rem 0.5rem; margin: 0 -0.25rem; border-radius: 4px; position: relative; }
.thread-msg:hover { background: rgba(0,0,0,0.12); }
.thread-msg-compact { padding-top: 0.05rem; padding-bottom: 0.05rem; }
.thread-msg-compact .thread-msg-body { margin-top: -0.3rem; }
.thread-msg-starter { margin: 0; padding: 0.65rem 0.75rem; background: rgba(0,0,0,0.15); border-radius: 8px; border-left: 3px solid #5865f2; }
.thread-msg-starter:hover { background: rgba(0,0,0,0.15); }
.thread-msg-body { min-width: 0; position: relative; }
.thread-msg .message-reactions { margin-top: 0.35rem; }
.thread-msg .message-actions { position: absolute; right: 0; top: 0; display: flex; gap: 0.2rem; padding: 0.2rem; background: #2b2d31; border: 1px solid #1f2023; border-radius: 6px; opacity: 0; transition: opacity 0.12s; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.thread-msg:hover .message-actions { opacity: 1; }
.thread-msg-starter .message-actions { top: 0.25rem; right: 0.25rem; }
.people-filter option[hidden] { display: none; }
.thread-msg .author { font-weight: 600; color: #fff; font-size: 0.92rem; }
.thread-msg .time, .thread-msg .message-time-compact { font-size: 0.7rem; color: #949ba4; font-weight: 500; }
.thread-msg .message-time-compact { opacity: 0; margin-left: 0.25rem; }
.thread-msg-compact:hover .message-time-compact { opacity: 1; }
.thread-msg .content { line-height: 1.375; white-space: pre-wrap; color: #dbdee1; font-size: 0.92rem; word-break: break-word; overflow-wrap: anywhere; margin-top: 0.15rem; }
.thread-msg .content a.msg-link { color: #00a8fc; text-decoration: none; }
.thread-msg .content a.msg-link:hover { text-decoration: underline; }
.thread-msg img.attach, .thread-msg img.gif-attach { max-width: 100%; max-height: 420px; border-radius: 8px; margin-top: 0.35rem; display: block; object-fit: contain; }
.thread-msg video.attach { max-width: 100%; max-height: 420px; border-radius: 8px; margin-top: 0.35rem; display: block; }
.thread-votes { display: inline-flex; align-items: center; gap: 0.15rem; margin-top: 0.4rem; padding: 0.15rem 0.35rem; background: #2b2d31; border: 1px solid #3f4147; border-radius: 999px; }
.thread-votes .vote-btn { background: transparent; color: #949ba4; padding: 0.1rem 0.35rem; font-size: 0.7rem; line-height: 1; border-radius: 4px; min-width: unset; }
.thread-votes .vote-btn:hover { color: #dbdee1; background: #404249; }
.thread-votes .vote-btn.active { color: #5865f2; }
.thread-votes .vote-score { font-size: 0.72rem; font-weight: 600; color: #b5bac1; min-width: 1rem; text-align: center; }
.thread-composer { display: flex; gap: 0.35rem; padding: 0.85rem 1rem; background: #2b2d31; border-top: 1px solid #1f2023; position: relative; align-items: center; flex-shrink: 0; }
.thread-composer input { flex: 1; padding: 0.65rem 0.75rem; background: #383a40; border: none; border-radius: 8px; color: #dbdee1; min-width: 0; font-size: 0.92rem; }
.thread-composer #thread-send-btn { padding: 0.55rem 1rem; font-size: 0.85rem; flex-shrink: 0; }
.thread-composer .icon-btn { color: #b5bac1; font-size: 1rem; padding: 0.35rem; border-radius: 4px; }
.thread-composer .icon-btn:hover { background: #404249; color: #fff; }
.emoji-picker, .gif-picker { position: absolute; bottom: calc(100% + 6px); left: 0.5rem; background: #2b2d31; border: 1px solid #3f4147; border-radius: 10px; padding: 0.5rem; z-index: 300; box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
.emoji-picker { display: grid; grid-template-columns: repeat(10, 1.75rem); gap: 0.15rem; width: min(280px, 90vw); }
.emoji-btn { background: transparent; padding: 0.15rem; font-size: 1.15rem; border-radius: 4px; line-height: 1; }
.emoji-btn:hover { background: #404249; }
.gif-picker { width: min(320px, 92vw); max-height: 340px; display: flex; flex-direction: column; }
.gif-search { padding: 0.45rem 0.6rem; background: #1e1f22; border: 1px solid #3f4147; border-radius: 6px; color: #dbdee1; margin-bottom: 0.5rem; font-size: 0.85rem; }
.gif-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.35rem; overflow-y: auto; flex: 1; }
.gif-item { background: #1e1f22; border: none; border-radius: 6px; overflow: hidden; padding: 0; cursor: pointer; aspect-ratio: 1; }
.gif-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-loading, .gif-hint { font-size: 0.75rem; color: #949ba4; padding: 0.5rem; text-align: center; }

/* Village prototype */
body.village-mode .place-rail, body.village-mode .channel-sidebar, body.village-mode .members-panel, body.village-mode .chat-header { display:none; }
body.village-mode.village-navigation .place-rail, body.village-mode.village-navigation .channel-sidebar { display:flex; }
body.village-mode .app-layout { display:flex; }
body.village-mode .main-content { flex:1; min-width:0; }
.world3d-view { position:relative; width:100%; height:100%; overflow:hidden; font-family:'Segoe UI',sans-serif; color:#344c42; background:#c9dfd4; }
.world3d-canvas { display:block; width:100%; height:100%; }
.village-top { position:absolute; top:30px; left:34px; right:34px; display:flex; justify-content:space-between; align-items:start; pointer-events:none; }
.village-eyebrow { font-size:10px; letter-spacing:2.5px; font-weight:700; }
.village-top h1 { font-family:Georgia,serif; font-size:34px; font-weight:normal; margin:8px 0; color:#304d40; }
.village-top h1 span { display:inline-block; vertical-align:middle; margin-left:14px; padding:6px 10px; border:1px solid #65816c55; border-radius:20px; font:10px 'Segoe UI',sans-serif; text-transform:uppercase; letter-spacing:1px; }
.village-top p { margin:0; font-size:13px; }
.village-menu,.village-actions button,.village-chat button { border:0; cursor:pointer; font:600 13px 'Segoe UI',sans-serif; color:#3d5548; background:#fff9e9; border-radius:24px; padding:12px 19px; box-shadow:0 3px 12px #344c4214; pointer-events:auto; }
.village-menu:hover,.village-actions button:hover { background:#fff; transform:translateY(-2px); }
.village-status { position:absolute; top:137px; left:35px; font-size:12px; max-width:360px; background:#fff9e9bc; padding:9px 14px; border-radius:18px; }
.village-bottom { position:absolute; bottom:25px; left:50%; transform:translateX(-50%); width:min(560px,85%); text-align:center; }
.village-hint { font-size:11px; color:#425b48; margin-bottom:13px; }
.village-actions { display:flex; justify-content:center; gap:8px; margin-bottom:13px; }
.village-chat { display:flex; align-items:center; gap:12px; border:1px solid #fff; background:#fffbedee; box-shadow:0 7px 30px #30463722; border-radius:30px; padding:7px 8px 7px 18px; }
.village-chat span { font-size:23px; }
.village-chat input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:#344c42; font:13px 'Segoe UI',sans-serif; }
.village-chat button { background:#426a53; color:#fffbed; }
.village-labels { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.village-landmark,.village-person { position:absolute; transform:translate(-50%,-100%); text-align:center; white-space:nowrap; }
.village-landmark { color:#3d5748; font-size:9px; letter-spacing:1.7px; font-weight:700; text-shadow:0 1px 3px #ffffee; }
.village-person span { display:inline-block; padding:4px 10px; background:#fffae8df; border-radius:12px; font-size:11px; }
.village-bubble { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); background:#fffdf4; color:#344c42; border-radius:18px 18px 18px 3px; padding:12px 16px; max-width:240px; min-width:70px; white-space:normal; overflow-wrap:anywhere; font-size:14px; box-shadow:0 5px 18px #344c4225; }
.village-browser { margin:0; width:100%; height:100dvh; overflow:hidden; background:#cadccc; }
.village-browser #world3d-view { height:100dvh; }
.village-browser [hidden] { display:none!important; }
#guest-entry { display:grid; place-items:center; min-height:100dvh; background:radial-gradient(ellipse at 25% 20%,#e9ead3,transparent 60%),#bad1be; color:#34523e; }
.guest-card { width:min(360px,86vw); text-align:center; padding:25px 0; }
.guest-illustration { font-size:74px; line-height:1; margin:25px 0 12px; color:#64866b; }
.guest-card h1 { font:normal 48px/1.1 Georgia,serif; margin:12px 0; }
.guest-card p { font:14px/1.7 'Segoe UI',sans-serif; }
.guest-card form { display:grid; gap:12px; margin:28px 0 10px; }
.guest-card label { text-align:left; font-size:12px; }
.guest-card input,.guest-card button { font:16px 'Segoe UI',sans-serif; padding:15px; border:0; border-radius:14px; }
.guest-card input { background:#fff9e9; color:#34523e; }
.guest-card button { background:#456c52; color:#fff9e9; cursor:pointer; }
.guest-card small { font-size:11px; line-height:1.8; opacity:.7; }
#guest-error { color:#873c31; margin:0; }
.world3d-canvas { touch-action:none; }
@media(max-width:700px) {
 .village-top { top:max(18px,env(safe-area-inset-top)); left:18px; right:18px; }
 .village-eyebrow { font-size:8px; letter-spacing:1.4px; }
 .village-top h1 { font-size:27px; }
 .village-top h1 span { display:none; }
 .village-top p { font-size:11px; }
 .village-menu { padding:10px 13px; font-size:11px; }
 .village-status { left:18px; top:113px; font-size:10px; max-width:270px; }
 .village-bottom { width:calc(100% - 28px); bottom:max(14px,env(safe-area-inset-bottom)); }
 .village-actions { gap:5px; }
 .village-actions button { font-size:11px; padding:11px 12px; }
 .village-chat input { font-size:16px; }
 .village-hint { font-size:10px; }
 .village-landmark { font-size:8px; letter-spacing:.8px; }
}

.village-bubble { width:max-content; max-width:min(240px,70vw); }

.village-actions { flex-wrap:wrap; }
.village-actions button[aria-pressed="true"] { background:#7d6594; color:#fff; }
.resident-name { pointer-events:auto; border:1px solid #fff9; border-radius:14px; padding:5px 10px; background:#fffae8e8; color:#45614a; font:11px 'Segoe UI',sans-serif; cursor:pointer; box-shadow:0 2px 7px #34523e18; }
.resident-name:hover { background:#fff; }
@media(max-width:700px) { .village-actions button { padding:10px 11px; } .resident-name { min-height:32px; } }

.character-picker { border:0; padding:0; margin:0; display:flex; gap:12px; }
.character-picker legend { font:12px 'Segoe UI',sans-serif; text-align:left; margin-bottom:10px; }
.character-picker label { flex:1; position:relative; cursor:pointer; }
.character-picker input { position:absolute; opacity:0; width:1px; height:1px; }
.character-option { display:flex; align-items:center; justify-content:center; gap:12px; border:2px solid transparent; background:#fff9e980; border-radius:14px; padding:10px; font:14px 'Segoe UI',sans-serif; }
.character-picker input:checked + .character-option { border-color:#456c52; background:#fff9e9; }
.character-picker input:focus-visible + .character-option { outline:3px solid #a479b5; outline-offset:3px; }
.character-portrait { width:35px; height:47px; position:relative; display:block; }
.character-portrait:before { content:''; position:absolute; width:22px; height:22px; border-radius:50%; background:#efd1ab; border-top:7px solid #665b51; top:0; left:6px; box-sizing:border-box; }
.character-portrait i { position:absolute; width:22px; height:21px; top:22px; left:6px; background:#d98c68; border-radius:8px 8px 3px 3px; }
.character-portrait.female:before { box-shadow:-4px 2px #665b51,4px 2px #665b51; }
.character-portrait.female i { clip-path:polygon(25% 0,75% 0,100% 100%,0 100%); width:30px; left:2px; }
#guest-entry { max-height:100dvh; overflow:auto; }
@media(max-height:760px) { .guest-illustration { font-size:44px; margin:8px 0; } .guest-card h1 { font-size:36px; } .guest-card form { margin-top:16px; } .guest-card { padding:18px 0; } }

.village-browser :focus-visible { outline:3px solid #163f34; outline-offset:4px; }
.village-access { pointer-events:auto; background:#fff9ed; color:#243e34; padding:8px 12px; border-radius:12px; max-width:420px; }
.village-access summary { cursor:pointer; min-height:32px; }
.village-access label { display:flex; align-items:center; gap:8px; }
.village-access input { width:24px; height:24px; }
.village-chat-log { max-height:150px; overflow:auto; }
.village-chat-log p { margin:6px 0; overflow-wrap:anywhere; }
.village-actions button,.resident-name { min-height:44px; }
@media(prefers-reduced-motion:reduce) { .village-browser *, .village-browser *::before,.village-browser *::after { animation:none!important; transition:none!important; } }

.guest-card .guest-consent { display:flex; align-items:flex-start; gap:10px; line-height:1.6; font-size:14px; }
.guest-card .guest-consent input { width:24px; height:24px; min-width:24px; padding:0; accent-color:#34523e; }
.guest-card a,.village-access a { color:#174c39; text-decoration:underline; }
.guest-card nav { font-size:14px; line-height:2; margin-top:16px; }
.guest-card .guest-safety { text-align:left; margin:0; color:#243e34; }

/* Accessible village layout: controls remain in document flow at zoom and on phones. */
body.village-browser { height:auto; min-height:100dvh; overflow:auto; color:#243e34; background:#fff9ed; }
.village-browser #guest-entry { max-height:none; overflow:visible; min-height:100dvh; padding:24px 12px; }
.village-browser .guest-card { width:min(420px,100%); }
.village-browser .guest-card small { font-size:.875rem; opacity:1; }
.village-browser .guest-card label,.village-browser .character-picker legend { font-size:1rem; }
.village-browser .guest-card input:not([type=radio]):not([type=checkbox]) { border:2px solid #456c52; }
.village-browser #world3d-view { height:auto; min-height:100dvh; overflow:visible; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,440px); align-items:start; background:#fff9ed; }
.village-top { position:static; grid-column:1/-1; padding:20px; gap:16px; background:#fff9ed; pointer-events:auto; }
.village-top h1 { font-size:2rem; }
.village-top p { font-size:1rem; }
.village-status { position:static; grid-column:1/-1; margin:0 20px 12px; background:#fff9ed; color:#243e34; font-size:1rem; max-width:none; }
.village-scene { position:sticky; top:0; height:75dvh; min-height:300px; overflow:hidden; background:#c9dfd4; }
.village-bottom { position:static; transform:none; width:auto; min-width:0; padding:20px; text-align:left; color:#243e34; background:#fff9ed; }
.village-bottom h2 { font-size:1.15rem; margin:20px 0 8px; }
.village-bottom p { font-size:1rem; line-height:1.6; margin:8px 0; }
.village-bottom button,.village-menu { min-height:44px; min-width:44px; border:2px solid #456c52; border-radius:10px; padding:10px 12px; background:#fff9ed; color:#243e34; font:600 1rem/1.4 'Segoe UI',sans-serif; cursor:pointer; }
.village-bottom button:hover,.village-menu:hover { background:#e2eadb; transform:none; }
.village-bottom button[aria-pressed=true] { background:#49365e; color:#fff; }
.village-bottom input { font-size:1rem; accent-color:#34523e; }
.village-settings label { display:flex; align-items:center; gap:10px; min-height:44px; line-height:1.5; }
.village-settings input { flex-shrink:0; width:24px; height:24px; }
.destination-buttons,.resident-controls,.camera-controls div,.village-actions { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px; }
.village-bottom details { margin:12px 0; }
.village-bottom summary { cursor:pointer; padding:12px 4px; min-height:44px; }
.village-bottom ul { padding-left:24px; }
.village-chat-log { max-height:300px; overflow:auto; border:2px solid #456c52; border-radius:8px; padding:12px; background:#fff; }
.village-chat-log:empty::before { content:'No messages yet.'; }
.village-chat { display:grid; grid-template-columns:minmax(0,1fr) auto; border:0; border-radius:0; padding:0; margin:12px 0; box-shadow:none; background:#fff9ed; }
.village-chat label { grid-column:1/-1; font-weight:600; }
.village-chat input { width:100%; border:2px solid #456c52; border-radius:8px; padding:12px; background:#fff; color:#243e34; font-size:1rem; }
.village-chat button { background:#34523e; color:#fff; }
.village-chat button:hover { background:#243e34; }
.chat-error { color:#873c31; }
.village-bottom nav { display:flex; gap:12px; flex-wrap:wrap; }
.village-bottom a,.guest-card a { color:#174c39; text-decoration:underline; }
.village-bottom nav a,.guest-card nav a { display:inline-block; padding:8px 0; }
.village-browser :focus-visible { outline:3px solid #123c8c!important; outline-offset:3px; box-shadow:0 0 0 6px #fff; }
.village-browser .character-picker input:focus-visible + .character-option { outline:3px solid #123c8c; outline-offset:3px; }
.skip-link { position:absolute; left:12px; top:0; transform:translateY(-150%); z-index:1000; padding:12px; background:#fff; color:#174c39; }
.skip-link:focus { transform:none; }
#world3d-view.text-mode { grid-template-columns:minmax(0,1fr); }
.text-mode .village-bottom { width:min(100%,800px); margin:auto; }
.text-mode .camera-controls { display:none; }
.village-person span,.resident-name { background:#fff9ed; color:#243e34; }
.village-landmark { background:#fff9ed; color:#243e34; padding:4px; text-shadow:none; }
@media(max-width:900px) {
 .village-browser #world3d-view { grid-template-columns:minmax(0,1fr); }
 .village-scene { position:relative; height:45dvh; min-height:240px; }
 .village-top { padding:16px; flex-wrap:wrap; }
 .village-bottom { padding:16px; }
 .village-chat { grid-template-columns:minmax(0,1fr); }
}
@media(forced-colors:active) { .village-browser button,.village-browser input,.village-chat-log { border:2px solid ButtonText; } .character-picker input:checked + .character-option { border:3px solid Highlight; } }

/* Default play stays immersive; optional tools live in the settings disclosure. */
.village-browser #world3d-view:not(.text-mode) { display:block; height:100dvh; min-height:520px; position:relative; overflow:hidden; }
.world3d-view:not(.text-mode) .village-scene { position:absolute; inset:0; height:100%; min-height:0; }
.world3d-view:not(.text-mode) .village-top { position:absolute; z-index:2; top:20px; left:24px; right:24px; padding:0; background:transparent; pointer-events:none; }
.world3d-view:not(.text-mode) .village-top>div { background:#fff9ede8; padding:10px 14px; border-radius:16px; }
.world3d-view:not(.text-mode) .village-top p { display:none; }
.world3d-view:not(.text-mode) .village-top h1 { margin:4px 0; }
.world3d-view:not(.text-mode) .village-menu { pointer-events:auto; }
.world3d-view:not(.text-mode) .village-status { position:absolute; z-index:2; top:118px; left:24px; margin:0; padding:8px 12px; border-radius:16px; font-size:.875rem; }
.world3d-view:not(.text-mode) .village-bottom { position:absolute; z-index:3; left:50%; bottom:16px; transform:translateX(-50%); width:min(620px,calc(100% - 24px)); padding:0; background:transparent; }
.world3d-view:not(.text-mode) .actions-heading,.world3d-view:not(.text-mode) .village-chat label { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.world3d-view:not(.text-mode) .village-actions { justify-content:center; margin:8px 0; }
.world3d-view:not(.text-mode) .village-chat { display:flex; gap:8px; padding:8px; border-radius:24px; margin:0; }
.world3d-view:not(.text-mode) .village-chat input { flex:1; min-width:0; border-radius:18px; }
.world3d-view:not(.text-mode) .village-chat button { font-size:.875rem; border-radius:18px; }
.world3d-view:not(.text-mode) .village-preferences { margin:0; }
.village-preferences>summary { width:max-content; border:2px solid #456c52; border-radius:20px; background:#fff9ed; color:#243e34; padding:10px 16px; min-height:44px; }
.world3d-view:not(.text-mode) .village-preferences>.settings-content { position:absolute; bottom:calc(100% + 8px); left:0; right:0; max-height:calc(100dvh - 240px); overflow:auto; background:#fff9ed; padding:18px; border:2px solid #456c52; border-radius:16px; box-shadow:0 8px 30px #243e3433; }
.world3d-view:not(.text-mode) .chat-error:not(:empty) { background:#fff9ed; padding:8px; border-radius:10px; }
@media(max-width:600px) {
 .world3d-view:not(.text-mode) .village-top { left:12px; right:12px; top:12px; flex-wrap:nowrap; }
 .world3d-view:not(.text-mode) .village-top h1 { font-size:1.5rem; }
 .world3d-view:not(.text-mode) .village-status { left:12px; top:110px; }
 .world3d-view:not(.text-mode) .village-actions { gap:5px; }
 .world3d-view:not(.text-mode) .village-actions button { padding:8px 10px; font-size:.875rem; }
}