/* One navigation, neutral surfaces, consistent application controls. */
:root{--bg:#111315;--line:#303439;--muted:#a2a9b1;--accent:#d5b875;color-scheme:dark}
body{background:#111315;color:#eef0f2;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.5}
.app{max-width:1120px;padding:0 32px 40px}header{height:80px;background:#111315f5;border-color:#303439}.header-tools{gap:12px}.brand-emblem{width:34px;height:34px}.brand-wordmark{width:126px;height:auto}.logo{gap:7px}
main{padding-top:26px}.workspace-title{font-family:inherit;font-size:26px;letter-spacing:-.6px;margin:0 0 5px;line-height:1.3}.app main>.intro{font-size:14px;color:#a2a9b1;margin:0 0 24px;max-width:none}
.app-nav{top:80px;background:#191c20;border:1px solid #303439;padding:5px;border-radius:12px;gap:4px;margin:0 0 24px;box-shadow:none}.app-nav button{min-height:48px;border-radius:8px;color:#a2a9b1;font-weight:550}.app-nav button.selected{background:#30343a;color:#f3f4f5;box-shadow:inset 0 -2px 0 #d5b875}.app-nav button:hover:not(.selected){background:#25292e;color:#eef0f2}
body .app button:not(.okey-tile):not(.tavla-point),body dialog button{font-family:inherit;border-color:#3a4047;border-radius:10px;background:#25292e;color:#e7eaed;box-shadow:none;text-shadow:none;min-height:42px}
body .app button.primary,body dialog button.primary,body .app button[type=submit]{background:#d5b875;color:#191b1e;border:1px solid #d5b875;font-weight:650}
body .app .app-nav button{background:transparent;border:0;border-radius:8px;color:#a2a9b1}body .app .app-nav button.selected{background:#30343a;color:#f3f4f5;box-shadow:inset 0 -2px 0 #d5b875}body .app .app-nav button:hover{background:#25292e}
body .app .icon{border-radius:50%;min-height:40px;width:40px;height:40px;background:transparent}.language-control select{background:#191c20;color:#c7cdd3;border:1px solid #303439;border-radius:10px;min-height:40px}
body input:not([type=checkbox]):not([type=range]),body textarea,body select{font-family:inherit;background:#14171a;color:#eef0f2;border:1px solid #3a4047;border-radius:10px;box-shadow:none}body input::placeholder,body textarea::placeholder{color:#8b939d}body button:focus-visible,body input:focus-visible,body textarea:focus-visible,body select:focus-visible{outline-color:#d5b875}
body .room,body #friends[role=tabpanel],body #chat,body #games,body .table-hub{background:#191c20;border:1px solid #303439;border-radius:16px;box-shadow:none;color:#eef0f2}.room:after{display:none}.room{padding:24px}body #friends[role=tabpanel]{padding:24px}body #games{padding:24px}body .table-hub{border:0;padding:0;background:transparent}.table-choice{background:#111315;border-radius:12px}.table-choice button.selected{background:#30343a!important;color:#eef0f2!important;box-shadow:inset 0 -2px 0 #d5b875!important}
h2,h3,h4,.section-title h2,.room h2{font-family:inherit;color:#eef0f2;letter-spacing:-.3px}h2{font-size:22px}h3{font-size:17px}.hint,.intro,.chat-privacy,.room p,.friends-section-head p,.contact-meta{color:#a2a9b1}.tag,.eyebrow{color:#b9c0c7}.room .tag{letter-spacing:1px}.room .test{background:#25292e;color:#a2a9b1}.getting-started{background:#202429;border-color:#303439;border-radius:12px}.getting-started h2{font-size:17px}
body .chat-thread,body .conversation-header,body .chat-utility-bar,body .chat-form,body .chat-tools,body .conversation-list{background:#191c20;border-color:#303439}.conversation-header{padding:18px 20px}.conversation-avatar{background:#30343a;color:#e7eaed}.conversation-info strong{color:#eef0f2}.chat-utility-bar{gap:8px;padding:10px 20px}.chat-form{padding:16px 20px}body #chatVoiceCall,body #chatVideoCall{display:none!important}.chat-messages{background:#14171a}.message,.message-bubble{border-color:#303439;background:#25292e;color:#eef0f2}.message.mine,.mine .message-bubble{background:#32352f;border-color:#484d3e}.chat-tools{margin:0 20px}.chat-tools>summary{color:#a2a9b1}
body dialog{background:#191c20;color:#eef0f2;border:1px solid #3a4047;border-radius:20px;box-shadow:0 20px 80px #0008}body dialog::backdrop{background:#060708aa;backdrop-filter:blur(4px)}body dialog h2{color:#eef0f2}body dialog p,body dialog .hint{color:#a2a9b1}.profile-preview,.profile-card,.contact-card,.friend-card,.appearance-preview,.chat-gallery-card{background:#202429;border-color:#303439;border-radius:12px}.profile-preview h3,.contact-name,.friends-list-heading h3{color:#eef0f2}body .appearance-settings select,body #chatTextSizeQuick{background:#14171a;color:#eef0f2;border-color:#3a4047}.contact-filters button[aria-pressed=true]{background:#383d44!important;color:#eef0f2!important;border-color:#67717c!important}
.room-music{border-color:#303439}.room-music>summary{color:#c7cdd3}.room-music .sound,.room-music .own,.room-music .volume{background:#202429;border-color:#303439;border-radius:12px}.table-hub #tableStatus{background:#202429;border-left-color:#d5b875;color:#eef0f2}.table-seat{border-color:#3a4047;background:#202429}.table-seat.active{background:#2c3028;border-color:#7d8867}.table-next-step{color:#a2a9b1}.table-hub #tableLobby,.table-hub #tableControls{border-color:#303439}.table-room-status{color:#c7cdd3}.table-hub .okey-indicator,.discard-seat{background:#202429}.table-hub details{border-color:#303439}.room-music .section-title h2{font-size:18px}.table-hub h2{font-size:22px}
body[data-call-state=active] .call-actions{background:#191c20f5;border-color:#3a4047;border-radius:14px;box-shadow:0 8px 30px #0005}body .app #leaveCall,body dialog .danger-action{color:#f1a5a5;border-color:#704347;background:#352326}
footer{color:#8b939d;border-color:#303439}.footer-logo{opacity:.65}[hidden]{display:none!important}
@media(min-width:900px){.app{padding-left:40px;padding-right:40px}.workspace-title{font-size:28px}.app-nav{margin-bottom:28px}.app-nav button{min-height:50px}#chat{min-height:540px}}
@media(max-width:700px){.app{padding:0 16px calc(96px + env(safe-area-inset-bottom))}header{height:68px}.brand-wordmark{width:110px}.brand-emblem{width:29px;height:29px}.header-tools{gap:8px}main{padding-top:20px}.workspace-title{font-size:23px}.app main>.intro{font-size:13px;margin-bottom:18px}.app-nav{top:auto;bottom:0;background:#191c20f5;border-top:1px solid #303439;border-left:0;border-right:0;border-bottom:0;border-radius:0;gap:4px;padding:7px 12px calc(7px + env(safe-area-inset-bottom))}.app-nav button{min-height:52px}.app-nav button.selected{box-shadow:none!important;border-radius:9px!important}.app-nav button.selected svg{color:#d5b875}.room,body #friends[role=tabpanel],body #games{padding:18px;border-radius:14px}.conversation-header{padding:14px}.chat-utility-bar{padding:10px 14px}.chat-form{padding:14px}.language-control select{max-width:91px;font-size:12px}body[data-call-state=active] .call-actions{bottom:calc(80px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
body .chat-sidebar{background:#191c20;border-color:#303439}.chat-sidebar>summary{color:#c7cdd3}body .chat-message{background:#25292e;border-color:#303439;color:#eef0f2}body .chat-message.mine{background:#30362f;border-color:#485143;color:#eef0f2}.chat-message time,.chat-message .receipt,.chat-message .hint{color:#a2a9b1}body .chat-recipient{background:#202429;border-color:#303439;color:#c7cdd3}body .chat-recipient.selected{background:#30343a;border-color:#67717c;color:#eef0f2}.friend-avatar{background:#30343a;color:#d5b875}.chat-empty{color:#a2a9b1}body .chat-quote{background:#ffffff06;border-left-color:#879083;color:#c7cdd3}
@media(max-width:700px){.header-tools .language-control>span{display:none}.header-tools #help{display:none}.header-tools{gap:8px}.header-tools .language-control select{width:82px;max-width:82px;padding:7px;font-size:11px}.header-tools .account-button{width:38px;height:38px;min-height:38px}header .logo{min-width:0;flex-shrink:1}}@media(max-width:350px){header .brand-emblem{display:none}.app{padding-left:12px;padding-right:12px}}
.app main>.workspace-title,.app main>.intro{display:block}header{min-height:0}header .brand-wordmark{width:126px;height:auto}header .brand-emblem{width:34px;height:34px}body .chat-message small{color:#a2a9b1}body .chat-message.mine small{color:#b9c5b5}
@media(max-width:700px){header .brand-wordmark{width:110px;height:auto}header .brand-emblem{width:29px;height:29px}header .header-tools #help{display:inline-block;width:36px;min-width:36px;height:38px;min-height:38px}header .header-tools{gap:6px}}@media(max-width:350px){header .brand-emblem{display:none}header .brand-wordmark{width:94px}}
/* Mobile dock: desktop margins must never lift the fixed bar off the bottom. */
@media(max-width:700px){
  nav.app-nav{position:fixed;inset:auto 0 0 0;width:100%;margin:0;padding:7px max(12px,env(safe-area-inset-right,0px)) calc(7px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:#191c20;border-radius:0;border:0;border-top:1px solid #303439;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;z-index:60}
  nav.app-nav button{min-height:52px;touch-action:manipulation}
  .app{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  body[data-call-state=active] .app{padding-bottom:calc(172px + env(safe-area-inset-bottom,0px))}
}