/* 隐匿对话: dark "cyber" look with comfortable reading and touch sizes.
   Base layout, then the cyber layer, then the ergonomics layer, then the
   parts only the real app has (members, host, QR, errors…). */
:root{color-scheme:dark;--bg:#180f36;--surface:#22154b;--line:#3d2a7c;--text:#f3f0fb;--muted:#8468d3;--cyan:#ffc933;--blue:#ffcb3d;--green:#3cddb7;--font:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button{color:inherit}a{color:inherit;text-decoration:none}button{border:0}button:disabled{cursor:not-allowed;opacity:.4}[hidden]{display:none!important}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}::selection{background:#4017b0;color:white}.site-header{height:98px;max-width:1440px;margin:auto;padding:0 64px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #312167;position:relative;z-index:2}.brand{display:flex;align-items:center;gap:12px;letter-spacing:-.7px;font-size:22px;font-weight:750}.brand b{color:var(--cyan)}.brand small{display:block;font-size:10px;letter-spacing:3.3px;color:#8f74d7;margin-top:5px;font-weight:400}.brand-icon{border:2px solid var(--cyan);border-radius:13px;width:44px;height:44px;display:grid;place-items:center;color:var(--cyan);box-shadow:0 0 22px #ffc9341b;position:relative}.brand-icon:after{content:"";position:absolute;bottom:-6px;left:7px;width:8px;height:9px;border-left:2px solid var(--cyan);transform:skewY(-38deg);background:var(--bg)}.brand-icon svg{width:23px;height:23px}.site-header nav{display:flex;align-items:center;gap:29px}.nav-link{background:none;padding:9px 0;color:#a28cde;display:flex;align-items:center;gap:8px;font-size:13px}.nav-link:hover{color:var(--cyan)}.nav-link svg{width:17px;height:17px}.prototype-pill{border:1px solid #4b3592;border-radius:30px;font-size:10px;letter-spacing:1px;padding:6px 10px;color:#6e4dcb}.hero{position:relative;overflow:hidden;min-height:665px}.hero-art{position:absolute;inset:0;background:linear-gradient(90deg,#180f36 1%,#180f36b0 35%,#180f3622 68%,#180f3688),linear-gradient(0deg,#180f36,transparent 35%,#180f3622 90%),url("assets/hero.webp") center 38%/cover no-repeat;opacity:.8}.hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 80% 80%,#ffc52714,transparent 60%)}.hero-inner{max-width:1440px;margin:auto;padding:79px 64px 74px;position:relative;z-index:1;display:grid;grid-template-columns:1fr 398px;gap:70px;align-items:center}.eyebrow{color:#a692df;letter-spacing:2px;font-size:10px;display:flex;gap:10px;align-items:center}.live-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--green);box-shadow:0 0 8px #3cddb744;flex-shrink:0}h1{font-size:clamp(44px,4.5vw,68px);line-height:1.17;font-weight:750;letter-spacing:-2.5px;margin:27px 0 24px}h1 em{display:inline-block;font-style:normal;color:var(--cyan);font-size:.62em;letter-spacing:-1.7px;margin-top:13px;font-weight:650}.cyan{color:var(--cyan)}.hero-description{color:#ac99e1;line-height:1.95;letter-spacing:.5px;font-size:15px}.hero-tags{display:flex;align-items:center;gap:23px;margin-top:27px;color:#c3b5ec;font-size:11px}.hero-tags span{display:flex;align-items:center;gap:7px}.hero-tags svg{width:15px;height:15px;color:var(--cyan)}.hero-tags span:last-child{border-left:1px solid #4d3795;padding-left:23px}.hero-note{margin-top:50px;display:flex;gap:12px;align-items:center;font-size:11px;color:#6845c9;letter-spacing:1px}.short-line{width:30px;height:1px;background:#3b247b}.entry-card{background:linear-gradient(145deg,#291a59f5,#1f1249ed);border:1px solid #4b3498;border-radius:20px;padding:27px 30px 21px;box-shadow:0 24px 60px #0006,0 0 60px #ffc31e09;backdrop-filter:blur(18px);position:relative}.entry-card:before{content:"";position:absolute;height:1px;width:50%;left:25%;top:-1px;background:linear-gradient(90deg,transparent,#ffd152aa,transparent)}.entry-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.overline{font-size:9px;letter-spacing:1.8px;color:#7758ce}.entry-card-top svg{width:19px;height:19px;color:#ffd152}.tabs{padding:4px;background:#1b0f40;border:1px solid #3a257d;border-radius:9px;display:flex;gap:4px}.tabs button{height:41px;flex:1;background:none;color:#8b70d5;border-radius:6px;font-size:13px}.tabs button.active{background:#3f298b;color:#e5dcff;box-shadow:0 2px 8px #0003}.entry-card h2{font-size:21px;letter-spacing:-.5px;margin:27px 0 9px;font-weight:650}.muted{color:var(--muted);line-height:1.8;font-size:12px;margin:0}form label{display:block;font-size:12px;font-weight:550;margin:26px 0 10px}.secret-input{display:flex;align-items:center;gap:11px;height:54px;padding:0 13px;background:#1a0f3f;border:1px solid #4c3597;border-radius:9px;transition:.2s}.secret-input:focus-within{border-color:#ffbe0c;box-shadow:0 0 0 3px #ffc01414}.secret-input>svg{color:#8a6fd5;width:18px;height:18px}.secret-input input{width:100%;min-width:0;background:transparent;border:0;outline:none;color:white;font-size:13px;height:50px;letter-spacing:1px}.secret-input input:focus-visible{outline:none}.secret-input input::placeholder{color:#5c38c0;letter-spacing:0}.icon-button{background:transparent;display:grid;place-items:center;padding:6px;color:#8062d2;min-width:32px;min-height:32px}.icon-button svg{width:17px;height:17px}.input-hint{font-size:10px;color:#7a5bd0;line-height:1.7;margin:10px 0 19px}.primary-button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;width:100%;padding:0 18px;border-radius:9px;background:linear-gradient(110deg,#ffc31d,#ffce49);color:white;font-size:13px;font-weight:600;box-shadow:0 7px 23px #ffc31f21;transition:filter .2s,transform .2s}.primary-button:hover{filter:brightness(1.14)}.primary-button:active{transform:translateY(1px)}.primary-button svg{width:18px;height:18px}.entry-meta{display:flex;align-items:center;justify-content:center;gap:7px;color:#a08add;font-size:10px;margin:19px 0 21px}.entry-meta .live-dot{width:4px;height:4px}.card-divider{height:1px;background:#3b287a;margin-bottom:17px}.privacy-link{background:transparent;display:flex;align-items:center;gap:8px;width:100%;font-size:10px;color:#8f75d7;padding:0}.privacy-link svg:first-child{color:#ffc832;width:15px;height:15px}.privacy-link svg:last-child{margin-left:auto;width:13px;height:13px}.random-button{width:100%;text-align:left;padding:12px 0 0;color:#ffd152;background:none;font-size:11px}.random-button span{float:right}.principles{max-width:1312px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #3a277a;border-radius:12px;background:linear-gradient(110deg,#261853,#1f1345)}.principles article{display:flex;align-items:center;gap:16px;position:relative;padding:30px 26px;min-height:118px}.principles article+article{border-left:1px solid #3d297f}.principle-number{font-family:Consolas,monospace;font-size:10px;color:#4a2d9a;position:absolute;top:12px;right:15px}.principles svg{width:30px;height:30px;color:var(--cyan)}.principles h3{font-size:13px;font-weight:550;letter-spacing:.4px;margin:0 0 8px}.principles p{color:#8a6ed5;font-size:10px;margin:0;line-height:1.7}footer{max-width:1440px;margin:auto;padding:35px 64px;display:flex;justify-content:space-between;align-items:center;color:#5936ba;font-size:10px;letter-spacing:.6px}footer button{background:none;color:#957dd9;font-size:10px;padding:8px 0}.footer-dot{margin:0 6px}footer button span{margin-left:8px;color:var(--cyan)}
/* Conversation */
body.in-chat .site-header{height:79px}.chat-shell{max-width:1370px;margin:26px auto 30px;display:grid;grid-template-columns:255px minmax(0,1fr);border:1px solid #452f8e;border-radius:16px;overflow:hidden;height:calc(var(--app-height,100dvh) - 135px);min-height:530px;background:#1f1346}.room-sidebar{display:flex;flex-direction:column;padding:30px 24px;background:linear-gradient(150deg,#28195a,#1e1247);border-right:1px solid #422c88}.sidebar-top{display:flex;align-items:center;justify-content:space-between}.mobile-close{display:none}.room-sidebar h2{font-size:15px;margin:20px 0 10px;display:flex;justify-content:space-between;align-items:center}.room-id{font-family:Consolas,monospace;font-size:11px;color:#7b5cd0;font-weight:400}.room-status{font-size:10px;color:#9076d7;display:flex;gap:7px;align-items:center}.sidebar-divider{height:1px;background:#432e8a;margin:25px 0}.members-heading{font-size:11px;display:flex;justify-content:space-between;color:#9076d7}.members-heading b{color:#e8e2f8;font-weight:500}.members-heading b span{color:#4e2fa4}.members{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:17px}.members li{display:flex;gap:12px;align-items:center;color:#c8baee;font-size:11px}.avatar{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #3b247a;border-radius:10px;font-size:10px;font-family:Consolas,monospace;flex-shrink:0;font-weight:600}.avatar-blue{color:#ffd152;background:#4426a6;border-color:#4624a5}.avatar-green{color:#70e9cd;background:#342174;border-color:#49309c}.avatar-violet{color:#b6a5f0;background:#29283f;border-color:#514875}.members small{font-size:9px;border:1px solid #4b3399;border-radius:3px;color:#947ad9;padding:2px 4px;margin-left:5px}.member-online{width:4px;height:4px;background:var(--green);border-radius:50%;margin-left:auto}.sidebar-note{font-size:9px;line-height:1.8;color:#7352cd;margin:20px 0 26px}.sidebar-actions{display:grid;gap:10px}.secondary-button{width:100%;min-height:43px;background:#311e6e;border:1px solid #4a329a;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:11px;color:#cbbdef;padding:10px 15px}.secondary-button:hover{background:#3e278b}.secondary-button svg{width:14px;height:14px;color:#ffd152}.sidebar-bottom{margin-top:auto;padding-top:35px}.mini-shield{color:#ffd152;font-size:10px;display:flex;align-items:center;gap:6px}.mini-shield svg{width:14px;height:14px}.sidebar-bottom p{font-size:10px;line-height:1.9;color:#7150cc}.leave-button{background:transparent;border:1px solid #4d3795;color:#9f88dd;width:100%;height:41px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;font-size:10px;margin-top:21px}.leave-button svg{width:15px;height:15px}.conversation{display:flex;flex-direction:column;min-width:0;min-height:0;background:radial-gradient(ellipse at 95% 5%,#2c1a6820,transparent 50%),#1e1245}.conversation-header{min-height:82px;padding:18px 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #3a277a;gap:15px}.conversation-header>div{display:flex;align-items:center;gap:12px}.conversation-header h2{font-size:15px;font-weight:550;margin:0 0 8px;letter-spacing:.4px}.conversation-header p{display:flex;gap:7px;align-items:center;margin:0;color:#7a5bcf;font-size:9px}.conversation-header p .live-dot{width:4px;height:4px}.clear-button{background:transparent;display:flex;gap:7px;align-items:center;color:#a08add;font-size:10px;min-height:35px;padding:4px}.clear-button svg{width:14px;height:14px}kbd{font-family:inherit;font-size:8px;color:#5a37bc;border:1px solid #4b3399;border-radius:3px;padding:2px 4px;margin-left:4px}.room-mobile-button{display:none}.chat-security{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 20px;background:#2a186424;border-bottom:1px solid #2f1d68;color:#7555ce;font-size:9px}.chat-security svg{width:12px;height:12px}.messages{flex:1;min-height:0;overflow:auto;padding:24px 30px;scrollbar-width:thin;scrollbar-color:#4a329a transparent}.date-marker{text-align:center;color:#5b37bf;font-size:9px;margin-bottom:20px}.date-marker span{padding:0 15px}.system-message{color:#7352cd;font-size:9px;text-align:center;line-height:1.8;margin:16px 0 29px;display:flex;align-items:center;justify-content:center;gap:6px}.message{display:flex;align-items:flex-start;gap:12px;margin:24px 0}.message>div{max-width:75%;min-width:0}.message-meta{font-size:9px;color:#9177d8;margin:0 0 7px;display:flex;gap:14px;align-items:center}.message-meta time{font-family:Consolas,monospace;font-size:9px;color:#5634b3}.bubble{padding:13px 16px;line-height:1.75;background:#332071;border:1px solid #442c94;color:#d9d0f3;border-radius:0 11px 11px 11px;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}.message.self{justify-content:flex-end}.self .message-meta{justify-content:flex-end}.self .bubble{background:linear-gradient(120deg,#3912a3,#ffbd06);border-color:#ffc219;border-radius:11px 0 11px 11px;color:#f4f0ff}.muted-system{color:#5f39c6}.muted-system svg{width:12px;height:12px}.composer-area{padding:15px 30px 20px;border-top:1px solid #382579;background:#23154e}.composer-tools{display:flex;justify-content:space-between;color:#6541c8;font-size:9px;align-items:center;margin-bottom:11px}.composer-tools label{display:flex;align-items:center;gap:8px}.composer-tools select{background:#311e6f;border:1px solid #4b3498;border-radius:4px;font-size:9px;color:#bbabe6;padding:4px 8px;min-height:26px}.composer{display:flex;align-items:flex-end;gap:15px;background:#1b0f40;border:1px solid #4b3399;border-radius:10px;padding:10px}.composer:focus-within{border-color:#ffbb01}.composer textarea{background:none;resize:none;width:100%;min-height:33px;max-height:96px;padding:8px 6px;line-height:1.65;border:0;outline:none;color:#e7e1f8;font-size:12px;scrollbar-width:thin}.composer textarea::placeholder{color:#6844c9}.composer textarea:focus-visible{outline:0}.send-button{width:35px;height:35px;display:grid;place-items:center;flex-shrink:0;border-radius:7px;background:#ffca3a;color:white}.send-button svg{width:19px;height:19px;transform:rotate(-90deg)}.composer-caption{display:flex;justify-content:space-between;gap:12px;line-height:1.7;font-size:8px;color:#704ecc;margin-top:10px}
/* Overlays */
dialog{max-width:480px;width:calc(100% - 32px);border:1px solid #4c3696;border-radius:18px;background:linear-gradient(135deg,#2d1d64,#20134a);color:var(--text);padding:26px;box-shadow:0 30px 100px #000a}dialog::backdrop{background:#140a33b8;backdrop-filter:blur(7px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px}.dialog-top .overline{font-size:8px}.dialog-emblem{width:48px;height:48px;display:grid;place-items:center;color:var(--cyan);background:#341b84;border:1px solid #4427a5;border-radius:12px;margin-top:5px}.dialog-emblem svg{width:27px;height:27px}dialog h2{font-size:22px;letter-spacing:-.5px;margin:22px 0 10px}.privacy-points{display:grid;gap:14px;margin:25px 0}.privacy-points b{font-size:12px;font-weight:550;color:#dbd1f4}.privacy-points p{font-size:11px;line-height:1.8;color:#957dd9;margin:5px 0 0}.demo-link{background:#1c1143;border:1px solid #4b3498;border-radius:8px;padding:20px;font-size:12px;color:#9f89dd;margin:25px 0}.dialog-actions{display:flex;gap:12px;margin-top:27px}.dialog-actions button{width:50%;font-size:12px}.dialog-actions .primary-button{justify-content:center}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);border:1px solid #3e2581;border-radius:9px;background:#2e1b6d;padding:13px 22px;color:#e3d9fd;font-size:12px;z-index:20;max-width:calc(100% - 36px);box-shadow:0 12px 50px #0009;white-space:nowrap}.drawer-scrim{position:fixed;inset:79px 0 0;background:#130935b3;backdrop-filter:blur(3px);z-index:4}
@media(min-width:1600px){.hero-art{background-position:center 42%}.hero{min-height:690px}.hero-inner{padding-top:95px}}
@media(max-width:1430px){.principles{margin-left:64px;margin-right:64px}.chat-shell{margin-left:32px;margin-right:32px}}
@media(max-width:1100px){.site-header{padding:0 40px;height:90px}.hero-inner{padding:63px 40px;grid-template-columns:minmax(0,1fr) 350px;gap:35px}.hero{min-height:630px}h1{font-size:49px}.hero-tags{gap:15px}.hero-tags span:last-child{padding-left:15px}.entry-card{padding:25px}.principles{margin:0 40px}.principles article{padding:29px 18px;gap:12px}.principles svg{width:25px;height:25px}.principles h3{font-size:12px}.principles p{font-size:9px}footer{padding:30px 40px}.chat-shell{grid-template-columns:225px minmax(0,1fr);margin:22px 24px;height:calc(var(--app-height,100dvh) - 123px)}.room-sidebar{padding:28px 20px}.conversation-header,.messages{padding-left:24px;padding-right:24px}.composer-area{padding-left:24px;padding-right:24px}}
@media(max-width:850px) and (min-width:601px){.hero-inner{padding:55px 50px 50px;grid-template-columns:1fr;gap:35px}.hero{min-height:unset}.hero-art{background-position:75% top;background-size:auto 740px;opacity:.6}.hero-copy h1{font-size:55px;margin-bottom:20px}.hero-copy h1 br:first-child{display:none}.hero-note{display:none}.hero-description{font-size:14px}.entry-card{width:100%;max-width:600px;margin:auto;padding:26px 30px}.entry-card-top{margin-bottom:18px}.entry-card h2{margin-top:24px}.hero-tags{margin-top:22px}.principles{margin:0 40px;grid-template-columns:1fr}.principles article{min-height:90px;padding:23px 28px}.principles article+article{border-left:0;border-top:1px solid #3d297f}.principles h3{font-size:13px}.principles p{font-size:11px}.principles svg{width:27px;height:27px}footer{flex-wrap:wrap;gap:16px}footer>span:nth-child(2){display:none}.chat-shell{grid-template-columns:200px minmax(0,1fr);margin:20px 18px;height:calc(var(--app-height,100dvh) - 119px)}.room-sidebar{padding:25px 17px}.room-sidebar h2{font-size:13px}.room-id{font-size:10px}.conversation-header,.messages{padding-left:20px;padding-right:20px}.composer-area{padding:15px 20px 20px}.desktop-hint{display:none}.bubble{font-size:12px;padding:11px 13px}.message>div{max-width:80%}}
@media(max-width:600px){.site-header{height:78px;padding:0 22px}.brand{font-size:19px;gap:10px}.brand-icon{width:35px;height:35px;border-radius:11px}.brand-icon svg{width:20px;height:20px}.brand small{font-size:8px;letter-spacing:2.5px}.site-header nav{gap:14px}.nav-link{font-size:11px}.nav-link svg{width:17px;height:17px}.nav-link a{padding:0}.nav-link span,.prototype-pill{display:none}.hero-inner{display:flex;flex-direction:column;align-items:stretch;padding:39px 22px 34px;gap:28px}.hero{min-height:unset}.hero-art{background:linear-gradient(90deg,#180f36da,#180f3640),linear-gradient(0deg,#180f36 34%,#180f3600 78%),url("assets/hero.webp") 65% 0/auto 420px no-repeat;opacity:.7}.eyebrow{font-size:8px;letter-spacing:1.5px;gap:8px}.hero-copy h1{font-size:43px;line-height:1.21;letter-spacing:-1.7px;margin:22px 0 15px}.hero-copy h1 br:first-child{display:none}.hero-copy h1 em{font-size:.66em;letter-spacing:-1px;margin-top:7px}.hero-description{font-size:12px;line-height:1.9;margin:0;color:#9981db}.hero-tags{font-size:9px;gap:14px;margin-top:20px}.hero-tags span:last-child{padding-left:14px}.hero-tags svg{width:12px;height:12px}.hero-note{display:none}.entry-card{padding:22px 21px 20px;border-radius:15px}.entry-card-top{margin-bottom:19px}.overline{font-size:8px}.entry-card-top svg{width:17px;height:17px}.tabs button{height:40px;font-size:12px}.entry-card h2{font-size:20px;margin:23px 0 8px}.muted{font-size:11px}.entry-card form label{margin-top:22px;font-size:11px}.secret-input{height:52px}.secret-input input{font-size:12px}.input-hint{font-size:9px;margin-bottom:17px}.primary-button{min-height:49px;font-size:12px}.entry-meta{font-size:9px;margin:17px 0 19px}.principles{margin:0 22px;grid-template-columns:1fr;border-radius:11px}.principles article{min-height:85px;padding:21px;gap:17px}.principles article+article{border-left:0;border-top:1px solid #3d297f}.principles svg{width:25px;height:25px}.principles h3{font-size:12px}.principles p{font-size:10px}.principle-number{font-size:9px;right:12px;top:12px}footer{padding:26px 22px 32px;gap:20px;font-size:8px}footer>span:nth-child(2){display:none}footer button{font-size:9px}.site-header nav>.nav-link:first-child{min-height:40px}body.in-chat .site-header{height:70px}body.in-chat .brand small{display:none}body.in-chat .site-header nav>.nav-link:first-child{display:none}.chat-shell{margin:0;border:0;border-radius:0;height:calc(var(--app-height,100dvh) - 70px);min-height:0;display:block}.conversation{height:100%}.conversation-header{min-height:76px;padding:15px 19px;gap:5px}.conversation-header h2{font-size:14px;margin-bottom:7px}.conversation-header p{font-size:8px;gap:5px}.room-mobile-button{display:grid;place-items:center;background:#321e72;border:1px solid #49309c;color:#ffd152;border-radius:8px;width:35px;height:35px;padding:0}.room-mobile-button svg{width:17px;height:17px}.conversation-header>div{gap:10px}.clear-button{font-size:10px;gap:5px}.clear-button kbd{display:none}.chat-security{font-size:8px;padding:10px 15px;gap:6px;line-height:1.8}.chat-security svg{width:11px;height:11px}.messages{padding:20px 17px}.message{gap:9px;margin:24px 0}.message .avatar{width:28px;height:28px;border-radius:8px;font-size:9px}.message>div{max-width:80%}.message-meta{font-size:8px;gap:10px}.message-meta time{font-size:8px}.bubble{font-size:12px;padding:11px 13px}.system-message{font-size:8px;margin-bottom:24px}.composer-area{padding:14px 16px calc(14px + env(safe-area-inset-bottom))}.composer-tools{font-size:8px}.composer-tools select{font-size:8px;min-height:28px}.composer-tools label{gap:6px}.composer{gap:10px;padding:9px;border-radius:9px}.composer textarea{font-size:12px}.composer-caption{font-size:8px}.desktop-hint{display:none}.room-sidebar{position:fixed;top:70px;bottom:0;left:0;width:min(300px,85vw);z-index:5;transform:translateX(-100%);transition:transform .2s;border-right:1px solid #4a329a;padding:27px 23px}.room-sidebar.open{transform:translateX(0)}.mobile-close{display:grid}.drawer-scrim{top:70px}.room-sidebar h2{font-size:15px}.members li{font-size:12px}.sidebar-note{font-size:10px}.sidebar-bottom p{font-size:11px}.sidebar-actions button,.leave-button{min-height:45px;font-size:12px}.toast{font-size:11px;bottom:23px;white-space:normal;width:max-content}dialog{padding:23px;max-height:calc(100dvh - 36px)}dialog h2{font-size:20px}.privacy-points{gap:12px;margin:23px 0}.privacy-points p{font-size:11px}.dialog-top .overline{font-size:7px;letter-spacing:1.3px}.icon-button{min-width:36px;min-height:36px}}
@media(max-width:360px){.hero-copy h1{font-size:38px}.hero-tags{gap:10px}.hero-tags span:last-child{padding-left:10px}.entry-card{padding:21px 18px}.entry-card h2{font-size:18px}.conversation-header{padding-left:12px;padding-right:12px}.conversation-header h2{font-size:12px}}
@media(max-width:600px){.hero-copy h1 br:first-child{display:initial}.hero-description{font-size:13px}.hero-tags{font-size:10px}.entry-card .muted{font-size:12px}.secret-input input{font-size:16px}.secret-input input::placeholder{font-size:12px}.input-hint{font-size:10px}.entry-meta,.privacy-link{font-size:10px}.entry-card form label{font-size:12px}.primary-button{font-size:14px}.principles h3{font-size:14px}.principles p{font-size:11px}.composer textarea{font-size:16px}.composer textarea::placeholder{font-size:12px}.bubble{font-size:14px}.message-meta,.conversation-header p{font-size:10px}.composer-caption{font-size:10px}.chat-security{font-size:10px}.composer-tools,.composer-tools select{font-size:10px}.clear-button{min-height:44px;min-width:44px}.room-mobile-button,.icon-button{min-height:44px;min-width:44px}.secret-input .icon-button{min-width:32px;min-height:44px}.privacy-points p{font-size:12px}}
.toast{pointer-events:none}
.composer textarea{overflow-y:hidden}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* --- cyber layer: decoration only, no access to app state --- */
:root{--cyan:#ffd050;--blue:#ffc831;--bg:#150c32}
body{background:#150c32}
.site-header{border-bottom-color:#45299e;background:linear-gradient(90deg,#1e114add,#150c32);max-width:none;padding-left:max(40px,calc((100vw - 1312px)/2));padding-right:max(40px,calc((100vw - 1312px)/2))}
.site-header:after{content:"";position:absolute;bottom:-1px;left:0;width:26%;height:2px;background:linear-gradient(90deg,transparent,#ffd050,#ffc831);box-shadow:0 0 16px #ffcc4080}
.brand{letter-spacing:-.8px;font-size:24px}.brand-icon{border-radius:5px 13px 5px 13px;box-shadow:0 0 15px #ffc93444,inset 0 0 15px #ffc93415;background:#2a1864}.brand b{color:#ffd152;text-shadow:0 0 22px #ffc93670}.brand small{letter-spacing:5px}.prototype-pill{border-color:#462ba1;background:#2e1a6d;color:#a590df;border-radius:3px}
.hero{min-height:700px;background:#150c32}
.hero-art{opacity:1;background-image:linear-gradient(90deg,#150c32f2 0%,#150c329c 34%,#150c3205 62%,#150c3254),linear-gradient(0deg,#150c32,transparent 30%,#150c3222 94%),url("assets/hero.webp");filter:saturate(1.28) contrast(1.09)}
.hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(#ffd1520c 1px,transparent 1px),linear-gradient(90deg,#ffd1520c 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,transparent,#0008 35%,#000 70%,transparent)}
.hero:after{z-index:1;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#00000016 4px),radial-gradient(ellipse at 67% 66%,#ffc62918,transparent 55%);opacity:.8}
.hero-inner{z-index:3;padding-top:100px;padding-bottom:70px;grid-template-columns:1fr 398px;gap:70px}
.hero-watermark{position:absolute;left:64px;top:12px;z-index:2;color:#bdaced05;-webkit-text-stroke:1px #ffd15215;font-size:clamp(80px,12.2vw,185px);font-weight:900;letter-spacing:-7px;white-space:nowrap;pointer-events:none;line-height:1}.hero-watermark span{color:#ffca3704}
.hero-coordinates{position:absolute;z-index:2;right:64px;top:33px;font:9px Consolas,monospace;color:#8466d6;display:flex;flex-direction:column;text-align:right;gap:5px;letter-spacing:2px}
.hero-copy{position:relative}.eyebrow{font-family:Consolas,monospace;font-size:10px;color:#b39dee;letter-spacing:2.1px;background:#2d1a6e88;border-left:2px solid #ffd050;width:max-content;max-width:100%;padding:8px 11px;box-shadow:0 0 20px #ffc6290c}.eyebrow .live-dot{background:#ffd151;box-shadow:0 0 12px #ffd151}
.hero-copy h1{font-size:clamp(50px,5.3vw,78px);line-height:1.13;letter-spacing:-3px;margin:27px 0 24px;filter:drop-shadow(0 3px 15px #0009)}.headline-secret{color:#291666;-webkit-text-stroke:1.4px #ffd152;text-shadow:0 0 35px #ffc62933;white-space:nowrap}.headline-secret .cyan{-webkit-text-stroke:0;color:#ffd151;text-shadow:0 0 26px #ffc62999}.hero-copy h1 em{font-size:.49em;font-weight:650;letter-spacing:0;color:#e5dcff;margin-top:20px;padding-left:17px;border-left:3px solid #ffd151}.hero-description{color:#bcade7}.hero-tags{gap:14px;margin-top:26px}.hero-tags span{padding:8px 10px;border:1px solid #472ba1;background:#25145b8c;border-radius:3px;font-size:10px}.hero-tags span:last-child{border-left:1px solid #472ba1;padding-left:10px}.hero-tags svg{filter:drop-shadow(0 0 5px #ffcc4188)}.hero-note{font-family:Consolas,"Microsoft YaHei",monospace;color:#947bd9;margin-top:33px}.short-line{background:#ffd151;box-shadow:0 0 10px #ffce47}
.orbit{position:absolute;width:420px;height:420px;top:80px;left:calc(64% - 210px);z-index:2;border:1px solid #ffd15235;border-radius:50%;pointer-events:none;background:radial-gradient(circle,transparent 63%,#ffcc4008 64%,transparent 65%);box-shadow:0 0 45px #ffc6290b,inset 0 0 45px #ffc62909}.orbit:before{content:"";position:absolute;inset:18px;border:1px dashed #ffd15242;border-radius:50%;animation:orbit-turn 80s linear infinite}.orbit:after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid transparent;border-top-color:#ffd0508c;border-bottom-color:#ffd0508c;transform:rotate(-30deg);animation:orbit-turn 45s linear infinite}.orbit-cross:before,.orbit-cross:after{content:"";position:absolute;background:#ffd15240}.orbit-cross:before{height:1px;width:45px;left:-25px;top:50%}.orbit-cross:after{width:1px;height:45px;left:50%;top:-25px}.orbit-label{font:8px Consolas,monospace;letter-spacing:2px;position:absolute;left:40px;bottom:20px;color:#a483ff85;background:#201153;padding:5px 8px}
.entry-card{border-radius:3px 24px 3px 24px;border:1px solid #4c2ca4;background:linear-gradient(135deg,#2d1a6eea,#20134ef7 60%,#29166aee);box-shadow:0 0 0 6px #ffce4708,0 30px 90px #0009,0 0 65px #ffc62915;backdrop-filter:blur(22px)}.entry-card:before{left:-1px;top:-1px;width:58%;height:2px;background:linear-gradient(90deg,#ae91ff,#ffcc41,transparent);box-shadow:0 0 18px #ffce4777}.entry-card:after{content:"";position:absolute;width:48px;height:48px;right:-1px;bottom:-1px;border-right:2px solid #ffd152;border-bottom:2px solid #ffd152;pointer-events:none}.entry-card-top .overline{font-family:Consolas,monospace;color:#ffd152;letter-spacing:2px}.entry-card-top svg{color:#ffd152;filter:drop-shadow(0 0 8px #ffd152aa)}.tabs{border-radius:3px;border-color:#382178;background:#180d3e}.tabs button{border-radius:2px;letter-spacing:.5px}.tabs button.active{background:linear-gradient(120deg,#4528a4,#2a1769);border:1px solid #ffbb02;color:#bea7ff;box-shadow:inset 0 -2px #ffd050,0 0 18px #ffc62914}.secret-input{border-radius:3px;border-color:#3d257e;box-shadow:inset 0 0 25px #1a0c47}.secret-input:focus-within{border-color:#ffd050;box-shadow:0 0 0 3px #ffd05016,0 0 25px #ffc93322}.secret-input>svg{color:#ffd152}.primary-button{border-radius:3px 10px 3px 10px;background:linear-gradient(105deg,#ffc31f,#ffc935);border:1px solid #ffd152;box-shadow:0 0 20px #ffc83038,inset 0 1px #b194ff77;position:relative;overflow:hidden;letter-spacing:.4px}.primary-button:before{content:"";position:absolute;inset:-60% auto -60% -45%;width:20%;background:#bea7ff22;transform:skewX(-25deg);transition:left .55s;pointer-events:none}.primary-button:hover:before{left:135%}.primary-button:hover{box-shadow:0 0 35px #ffcb3c65}.primary-button svg{filter:drop-shadow(0 0 4px #fff8)}.card-divider{background:linear-gradient(90deg,#ffd0505c,transparent)}.entry-meta{color:#ad9ae2}.entry-meta .live-dot{background:#ffd050}.privacy-link{color:#af9ce2}
.principles{background:linear-gradient(110deg,#261460,#20124d);border-color:#482e9e;border-radius:3px 16px 3px 16px;position:relative;box-shadow:0 0 40px #ffc62909}.principles:before{content:"";position:absolute;left:-1px;top:-1px;width:40px;height:40px;border-top:2px solid #ffd152;border-left:2px solid #ffd152;pointer-events:none}.principles article+article{border-left-color:#4a319b}.principle-number{color:#ffd152}.principles svg{filter:drop-shadow(0 0 9px #ffc62970)}.principles h3{color:#e4daff}.principles p{color:#947ad9}footer{font-family:Consolas,"Microsoft YaHei",monospace;color:#7a5bcf}
.chat-shell{border-radius:3px 16px 3px 16px;border-color:#3c247e;box-shadow:0 0 35px #ffc72f13}.room-sidebar{background:linear-gradient(155deg,#2d196c,#1e114a 60%);border-right-color:#482e9e;position:relative}.sidebar-top .overline{color:#9075dc;font-family:Consolas,monospace}.room-id{color:#ffd152}.sidebar-divider{background:linear-gradient(90deg,#ffd15155,transparent)}.avatar{border-radius:3px 9px 3px 9px;box-shadow:inset 0 0 12px #ffc9330b}.avatar-blue{border-color:#ffc527;box-shadow:0 0 15px #ffc83020}.member-online{box-shadow:0 0 7px #30e4ba}.secondary-button{border-radius:3px 8px 3px 8px;background:linear-gradient(100deg,#321c7a,#351f7b);border-color:#402785}.secondary-button:hover{border-color:#ffd050;background:#3f2594}.conversation{background:radial-gradient(ellipse at 100% 0%,#3f1eae19,transparent 50%),#1d1147}.conversation-header{border-bottom-color:#482d9f;background:linear-gradient(90deg,#2a1768aa,transparent)}.conversation-header h2{color:#ede6ff}.chat-security{background:#2f1a752b;border-bottom-color:#3b2586;color:#8f75d7}.bubble{background:linear-gradient(125deg,#341f79,#2f1e6a);border-color:#482d9f;border-radius:0 9px 9px 9px}.self .bubble{background:linear-gradient(120deg,#3307ad,#ffc21c);border-color:#ffd152;box-shadow:0 4px 24px #ffbe0c1b;border-radius:9px 0 9px 9px}.composer-area{background:linear-gradient(120deg,#291762,#22154f);border-top-color:#482e9e}.composer{border-radius:3px 10px 3px 10px;border-color:#462b92;background:#1a0e42}.composer:focus-within{border-color:#ffd050;box-shadow:0 0 20px #ffc93512}.send-button{border-radius:3px 8px 3px 8px;background:linear-gradient(135deg,#ffc527,#ffc72f);box-shadow:0 0 12px #ffca3a35}.room-mobile-button{border-color:#462994;color:#ffd152;background:#321c77}.date-marker span{font-family:Consolas,monospace}.leave-button{border-radius:3px 8px 3px 8px}dialog{border-radius:3px 20px 3px 20px;border-color:#4f2eab;background:linear-gradient(130deg,#311c78,#21144e);box-shadow:0 0 45px #ffc62920,0 30px 100px #000a}.dialog-emblem{border-radius:3px 12px 3px 12px;color:#ffd152;box-shadow:0 0 22px #ffc62924}.toast{border-radius:3px 9px 3px 9px;border-color:#ffc21c}
@keyframes orbit-turn{to{transform:rotate(360deg)}}
@media(min-width:1600px){.hero-inner{padding-top:110px}}
@media(max-width:1100px){.hero{min-height:660px}.hero-inner{grid-template-columns:minmax(0,1fr) 350px;gap:35px;padding:95px 40px 60px}.hero-copy h1{font-size:57px}.hero-watermark{left:40px;font-size:125px;top:12px}.hero-coordinates{right:40px;top:30px;font-size:8px}.orbit{width:370px;height:370px;left:calc(65% - 185px);top:95px}.site-header{padding:0 40px}.hero-tags{gap:8px}.hero-tags span{font-size:9px;padding:7px 8px}}
@media(max-width:850px) and (min-width:601px){.hero{min-height:unset}.hero-inner{grid-template-columns:1fr;padding:80px 50px 50px;gap:35px}.hero-copy h1{font-size:61px;letter-spacing:-2px}.hero-copy h1 br:first-child{display:initial}.hero-copy h1 em{font-size:.52em}.hero-watermark{font-size:100px;left:40px;top:17px;letter-spacing:-4px}.hero-coordinates{font-size:7px;right:40px;top:24px}.orbit{left:auto;right:-50px;top:110px;width:390px;height:390px}.hero-art{background-size:auto 800px;background-position:75% top}.hero-tags{gap:12px}.hero-tags span{font-size:10px;padding:8px 10px}.principles article+article{border-left:0;border-top-color:#4a319b}}
@media(max-width:600px){.site-header{padding:0 22px}.brand{font-size:19px}.brand small{letter-spacing:3px}.hero{min-height:unset}.hero-inner{display:flex;padding:63px 22px 36px;gap:31px}.hero-art{opacity:.92;background-image:linear-gradient(90deg,#150c32d0,#150c3215),linear-gradient(0deg,#150c32 38%,transparent 78%),url("assets/hero.webp");background-size:auto,auto,auto 485px;background-position:center,center,68% 0}.hero-watermark{font-size:66px;letter-spacing:-4px;left:20px;top:17px;color:#b7a0f807;-webkit-text-stroke-color:#ffd15228}.hero-coordinates{top:20px;right:22px;font-size:6px;letter-spacing:1px;gap:4px}.hero-coordinates span:first-child{display:none}.hero:before{background-size:40px 40px;opacity:.5}.hero:after{opacity:.5}.orbit{width:280px;height:280px;left:auto;right:-70px;top:82px;opacity:.65}.orbit-label{display:none}.hero-copy h1{font-size:48px;line-height:1.15;letter-spacing:-1.9px;margin:24px 0 21px}.headline-secret{-webkit-text-stroke-width:1px}.hero-copy h1 em{font-size:.58em;letter-spacing:-.5px;margin-top:16px;padding-left:12px;border-left-width:2px}.eyebrow{font-size:7px;letter-spacing:1.1px;padding:7px 9px;width:max-content;gap:6px}.hero-description{font-size:13px;color:#b9a8e6}.hero-tags{gap:7px;margin-top:22px}.hero-tags span{font-size:9px;padding:7px 8px;gap:5px}.hero-tags span:last-child{padding-left:8px}.entry-card{border-radius:3px 20px 3px 20px;box-shadow:0 0 0 4px #ffce4708,0 20px 50px #0008,0 0 40px #ffc62915}.entry-card-top .overline{font-size:8px;letter-spacing:1.7px}.principles{border-radius:3px 14px 3px 14px}.principles article+article{border-left:0;border-top-color:#4a319b}.room-sidebar{position:fixed}.chat-shell{border-radius:0;box-shadow:none}.conversation-header h2{font-size:14px}.composer-area{background:#251558}.hero-watermark,.hero-coordinates{pointer-events:none}.primary-button{font-size:14px}.hero-tags svg{width:12px;height:12px}}
@media(max-width:360px){.hero-copy h1{font-size:43px}.hero-copy h1 em{font-size:.56em}.hero-tags{gap:5px}.hero-tags span{font-size:8px;padding:7px 7px}.eyebrow{font-size:6px;letter-spacing:1px}.hero-watermark{font-size:59px}}
@media(max-width:600px){.hero-inner{padding-top:48px;gap:18px}.hero-copy h1{margin-top:20px;margin-bottom:14px}.hero-copy h1 em{margin-top:12px}.hero-tags{margin-top:18px}.entry-card-top{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.orbit:before,.orbit:after{animation:none}.primary-button:before{display:none}}

/* --- ergonomics layer --- */
:root{--muted:#af9ce2}
body{font-size:16px;line-height:1.6}
button,input,textarea,select{font-size:16px}
button,a,select{scroll-margin-block:24px}
button{min-height:44px;min-width:44px}
:focus-visible{outline:3px solid #ae91ff;outline-offset:3px}
.nav-link{font-size:14px;min-height:44px;padding:8px}.nav-link svg{width:20px;height:20px}.site-header nav{gap:16px}.prototype-pill{font-size:11px}
.hero-copy h1{line-height:1.2}.headline-secret{color:#dccfff;-webkit-text-stroke:.5px #ffd152;text-shadow:0 0 28px #ffc62920}
.hero-description{font-size:16px;line-height:1.85;color:#c7b9ee}.hero-tags span{font-size:13px}.hero-note{font-size:13px;color:#bbabe7}.eyebrow{font-size:11px}.hero:after{opacity:.3}.hero:before{opacity:.55}.hero-watermark{opacity:.5}.orbit:before,.orbit:after{animation:none}.orbit{opacity:.7}
.entry-card{background:linear-gradient(135deg,#2c196af7,#231452fc);padding:28px}.entry-card h2{font-size:24px;line-height:1.5;margin:23px 0 8px}.entry-card .muted{font-size:15px;color:#b9a9e6;line-height:1.7}.entry-card-top .overline,.overline{font-size:11px;letter-spacing:1.4px;color:#b09ee3}.entry-card-top{margin-bottom:18px}.tabs button{min-height:48px;font-size:16px}.secret-input{height:58px;gap:10px;padding-left:14px;padding-right:6px}.secret-input input{font-size:16px;letter-spacing:.4px;height:54px}.secret-input input::placeholder{font-size:15px;color:#a995e0}.icon-button{min-width:44px;min-height:44px;color:#bbabe6}.icon-button svg{width:20px;height:20px}.entry-card form label{font-size:15px;margin:20px 0 10px}.input-hint{font-size:13px;line-height:1.65;color:#bbabe6;margin:10px 0 18px}.primary-button{min-height:54px;font-size:16px;padding:0 18px;background:#3c08cb;border-color:#ffd152;letter-spacing:0}.primary-button:before{display:none}.primary-button:hover{background:#ffbf0e}.primary-button svg{width:21px;height:21px}.entry-meta{font-size:12px;line-height:1.7;color:#bfafeb;margin:16px 0}.card-divider{margin-bottom:8px}.privacy-link{font-size:13px;min-height:44px;color:#c3b4ec}.privacy-link svg:first-child{width:19px;height:19px}.random-button{font-size:14px;min-height:44px}.principles h3{font-size:16px;line-height:1.5}.principles p{font-size:14px;line-height:1.7;color:#bbabe7}.principles article{min-height:130px}.principle-number{font-size:12px;color:#b09de3}footer{font-size:12px;color:#aa96e1}footer button{font-size:13px;min-height:44px;color:#ccc0ef}
.room-sidebar{padding:25px 22px;overflow:auto}.room-sidebar h2{font-size:18px;line-height:1.5;margin:18px 0 10px}.room-id{font-size:13px;color:#a990ef}.room-status{font-size:13px;color:#beaeeb}.sidebar-divider{margin:21px 0}.members-heading{font-size:14px;color:#c1b1ec}.members li{font-size:14px;gap:12px}.members small{font-size:12px}.members{gap:16px;margin-top:18px}.avatar{width:36px;height:36px;font-size:12px}.sidebar-note{font-size:12px;line-height:1.7;color:#b09ee3;margin:18px 0 23px}.secondary-button{min-height:48px;font-size:14px;color:#d9d0f3}.secondary-button svg{width:18px;height:18px}.sidebar-actions{gap:12px}.sidebar-bottom{padding-top:24px}.mini-shield{font-size:13px}.sidebar-bottom p{font-size:13px;line-height:1.75;color:#b9a9e6}.leave-button{font-size:14px;min-height:48px;margin-top:20px;color:#c0b1eb;background:#2b1c5d}.leave-button svg{width:19px;height:19px}.members-heading b span{color:#a691df}
.conversation-header{min-height:90px;padding:18px 28px}.conversation-header h2{font-size:19px;line-height:1.5;margin:0 0 6px}.conversation-header p{font-size:12px;color:#b3a1e4}.clear-button{font-size:14px;padding:8px;min-height:44px;gap:8px}.clear-button svg{width:19px;height:19px}kbd{font-size:11px;color:#beadeb}.chat-security{font-size:12px;color:#b8a7e6;padding:11px 20px;line-height:1.6}.chat-security svg{width:16px;height:16px}.messages{padding:24px 28px}.date-marker{font-size:12px;color:#ac99e1}.system-message{font-size:12px;line-height:1.7;color:#ad9ae2;margin:16px 0 22px}.muted-system{color:#af9ce2}.message{margin:25px 0;gap:12px}.message>div{max-width:min(80%,62ch)}.message-meta{font-size:13px;line-height:1.5;color:#c3b4ec;margin-bottom:8px}.message-meta time{font-size:12px;color:#b09de3}.bubble{font-size:16px;line-height:1.75;padding:14px 17px;color:#e9e4f8}.self .bubble{background:#3a12a7;color:#fff}.composer-area{padding:15px 26px 18px}.composer-tools{font-size:12px;color:#beafe8;gap:10px;flex-wrap:wrap}.composer-tools label{font-size:13px;gap:8px}.composer-tools select{min-height:44px;font-size:13px;padding:8px;color:#d9d0f3}.composer{gap:12px;padding:8px}.composer textarea{font-size:16px;line-height:1.65;min-height:44px;padding:9px 8px;max-height:120px;overflow-y:auto}.composer textarea::placeholder{font-size:15px;color:#aa96e1}.send-button{min-width:48px;min-height:48px;width:48px;height:48px}.send-button svg{width:23px;height:23px}.composer-caption{font-size:12px;line-height:1.65;color:#b7a6e5;margin-top:10px}.desktop-hint{color:#b2a0e4}
.room-tools-button,.back-to-chat{display:none}.toast{font-size:14px;line-height:1.6;white-space:normal;width:max-content;max-width:min(540px,calc(100% - 36px));color:#e7e0fa;background:#301b76}.privacy-points b{font-size:16px}.privacy-points p{font-size:14px;line-height:1.75;color:#c0b1eb}.privacy-points{gap:18px}.dialog-top .overline{font-size:10px;letter-spacing:1px}dialog{max-width:540px;max-height:calc(100dvh - 40px);overflow:auto}dialog h2{font-size:24px;line-height:1.5}dialog .muted{font-size:14px;line-height:1.75}.demo-link{font-size:14px}.dialog-actions button{font-size:15px;min-height:48px}
@media(max-width:1100px){.hero-inner{grid-template-columns:minmax(0,1fr) 380px;gap:30px;padding:80px 40px 56px}.hero-copy h1{font-size:51px}.hero-tags{flex-wrap:wrap;gap:8px}.hero-tags span{font-size:12px}.entry-card{padding:24px}.entry-card h2{font-size:22px}.entry-card .muted{font-size:14px}.principles article{padding:27px 20px;gap:13px}.principles h3{font-size:15px}.principles p{font-size:13px}.chat-shell{grid-template-columns:240px minmax(0,1fr)}.conversation-header,.messages{padding-left:22px;padding-right:22px}.composer-area{padding-left:20px;padding-right:20px}}
@media(max-width:850px) and (min-width:601px){.hero-inner{grid-template-columns:1fr;padding:65px 44px 44px;gap:30px}.hero-copy h1{font-size:53px}.hero-copy h1 br:first-child{display:none}.hero-copy h1 em{font-size:.52em}.hero-copy h1 .headline-secret{white-space:normal}.entry-card{max-width:600px;padding:28px}.hero-coordinates{display:none}.hero-tags{flex-wrap:nowrap}.hero-tags span{font-size:13px}.chat-shell{grid-template-columns:225px minmax(0,1fr);margin:16px 12px;height:calc(var(--app-height,100dvh) - 111px)}.room-sidebar{padding:23px 16px}.room-sidebar h2{font-size:16px;flex-wrap:wrap;gap:5px}.members li{font-size:13px}.conversation-header{padding:16px;min-height:86px}.conversation-header h2{font-size:17px}.messages{padding:20px 16px}.composer-area{padding:13px 16px 17px}.bubble{font-size:16px;padding:12px 14px}.chat-security{font-size:12px;padding:11px 15px}.composer-caption{font-size:12px}.principles h3{font-size:16px}.principles p{font-size:14px}}
@media(max-width:600px){.site-header{height:72px;padding:0 16px}.brand{font-size:19px;gap:9px}.brand small{font-size:10px;letter-spacing:2px}.site-header nav{gap:4px}.nav-link{font-size:12px;min-width:44px;padding:8px}.nav-link svg{width:19px;height:19px}.hero-inner{padding:26px 16px 30px;gap:20px}.eyebrow{display:none}.hero-copy h1{font-size:38px;line-height:1.2;margin:12px 0 14px}.hero-copy h1 em{font-size:23px;margin-top:12px;padding-left:12px}.hero-description{font-size:14px;line-height:1.65}.hero-tags{margin-top:15px;gap:7px;flex-wrap:nowrap}.hero-tags span{font-size:11px;padding:6px 8px;min-height:30px}.hero-tags span:last-child{padding-left:8px}.hero-tags svg{width:14px;height:14px}.hero-watermark{font-size:55px;left:16px;top:7px;opacity:.3}.hero-coordinates{display:none}.hero-art{opacity:.68}.orbit{opacity:.32;right:-90px;top:40px}.hero:before,.hero:after{opacity:.2}.entry-card{padding:22px 20px 18px;max-width:100%;background:#271660f7}.entry-card-top{display:none}.tabs button{font-size:15px;min-height:48px;height:auto}.entry-card h2{font-size:21px;line-height:1.5;margin:18px 0 7px}.entry-card .muted{font-size:14px;line-height:1.65}.entry-card form label{font-size:14px;margin:17px 0 8px}.secret-input{height:56px;padding-left:12px;padding-right:5px}.secret-input input{font-size:16px;min-height:52px}.secret-input input::placeholder{font-size:14px}.secret-input .icon-button{min-width:44px;min-height:44px}.input-hint{font-size:12px;line-height:1.6;margin:10px 0 16px}.primary-button{min-height:54px;font-size:16px}.entry-meta{font-size:12px;line-height:1.7;margin:14px 0}.privacy-link{font-size:13px;min-height:44px}.principles{margin:0 16px}.principles article{padding:23px 20px;min-height:110px}.principles h3{font-size:16px}.principles p{font-size:14px}.principle-number{font-size:11px}footer{padding:20px 16px 25px;font-size:11px;gap:10px}footer button{font-size:12px}.in-chat{overflow:hidden}body.in-chat .site-header{height:64px}.chat-shell{height:calc(var(--app-height,100dvh) - 64px);margin:0;min-height:0;display:block}.conversation-header{padding:12px 16px;min-height:78px}.conversation-header>div{gap:10px}.conversation-header h2{font-size:17px}.conversation-header p{font-size:12px;gap:6px}.room-mobile-button{min-width:44px;min-height:44px;width:44px;height:44px}.clear-button{min-height:44px;min-width:56px;font-size:13px;gap:6px}.chat-security{font-size:12px;line-height:1.6;padding:9px 16px;justify-content:flex-start}.chat-security svg{width:16px;height:16px}.messages{padding:20px 16px;overscroll-behavior:contain}.message{gap:9px;margin:22px 0}.message .avatar{width:32px;height:32px;font-size:11px}.message-meta,.message-meta time{font-size:12px}.bubble{font-size:16px;line-height:1.7;padding:12px 14px}.message>div{max-width:calc(100% - 42px)}.system-message,.date-marker{font-size:12px}.composer-area{padding:12px 12px calc(12px + env(safe-area-inset-bottom))}.composer-tools{gap:8px;flex-wrap:nowrap;margin-bottom:9px;align-items:center}.composer-tools label{font-size:12px;gap:5px;white-space:nowrap}.composer-tools label .ttl-label{display:none}.composer-tools select{font-size:12px;min-height:44px;max-width:140px;padding:7px}.composer-tools #charCount{font-size:12px;white-space:nowrap;margin-left:auto}.room-tools-button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:67px;min-height:44px;padding:7px;background:#392188;border:1px solid #4e2fa4;border-radius:5px;font-size:13px;color:#dfd5fb}.room-tools-button svg{width:18px;height:18px}.composer textarea{font-size:16px;line-height:1.6;min-height:48px;padding:10px 7px}.composer textarea::placeholder{font-size:14px}.composer{gap:8px;padding:7px}.send-button{width:48px;height:48px;min-width:48px;min-height:48px}.composer-caption{font-size:12px;line-height:1.6;margin-top:8px}.room-sidebar{top:64px;bottom:0;width:min(330px,calc(100vw - 32px));padding:22px 20px;max-height:calc(var(--app-height,100dvh) - 64px);overflow:auto}.drawer-scrim{top:64px}.mobile-close{min-height:44px;min-width:44px}.sidebar-top .overline{font-size:11px}.room-sidebar h2{font-size:18px}.room-status,.sidebar-note{font-size:13px}.members li{font-size:15px}.members small{font-size:12px}.sidebar-bottom p{font-size:14px}.back-to-chat{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border:1px solid #ffd152;border-radius:5px;background:#4325a7;color:#e8e0ff;font-size:15px;margin-top:12px}.leave-button{min-height:48px;font-size:14px;margin-top:14px}.sidebar-bottom{padding-top:22px}.secondary-button{min-height:48px;font-size:15px}.toast{bottom:18px;font-size:13px;max-width:calc(100% - 32px)}dialog{max-height:calc(var(--app-height,100dvh) - 32px);padding:22px}.dialog-top .overline{font-size:9px}.privacy-points b{font-size:16px}.privacy-points p{font-size:14px}dialog h2{font-size:22px}dialog .muted{font-size:14px}.dialog-actions button{font-size:15px}.dialog-actions{gap:12px}}
@media(max-width:360px){.brand{font-size:17px}.site-header{padding:0 12px}.hero-copy h1{font-size:35px}.hero-copy h1 em{font-size:21px}.hero-tags{gap:5px}.hero-tags span{font-size:10px;padding:6px}.hero-inner{padding-left:14px;padding-right:14px}.entry-card{padding:20px 16px}.entry-card h2{font-size:19px}.composer-tools{gap:6px}.composer-tools select{max-width:125px}.composer-tools #charCount{font-size:11px}.room-tools-button{min-width:62px}}
@media(max-height:560px) and (max-width:850px){.chat-security{display:none}.conversation-header{min-height:68px;padding-top:8px;padding-bottom:8px}.composer-caption{display:none}.composer-area{padding-top:7px;padding-bottom:7px}.composer-tools{margin-bottom:5px}.sidebar-divider{margin:12px 0}.sidebar-bottom{padding-top:14px}.sidebar-note{margin:12px 0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.composer-status{font-size:13px;line-height:1.6;color:#ffcfad;margin:9px 0 0}.composer-status:empty{display:none}
.messages>.message,.messages>.date-marker,.messages>.system-message{max-width:860px;margin-left:auto;margin-right:auto}
@media(min-width:601px) and (max-width:1100px) and (max-height:850px){.room-sidebar{padding:18px 16px}.room-sidebar h2{font-size:16px;margin:12px 0 7px}.sidebar-divider{margin:16px 0}.members{gap:12px;margin-top:14px}.members .avatar{width:32px;height:32px}.members li{font-size:13px}.sidebar-note{margin:12px 0 16px}.sidebar-actions{gap:10px}.sidebar-bottom{padding-top:16px}.sidebar-bottom p{font-size:12px;margin:10px 0}.leave-button{margin-top:12px}}
@media(max-width:850px){.keyboard-open .chat-security,.keyboard-open .composer-caption{display:none}.keyboard-open .conversation-header{min-height:66px;padding-top:8px;padding-bottom:8px}.keyboard-open .composer-area{padding-top:7px;padding-bottom:7px}}

/* --- the real app --- */
.hidden{display:none!important}
.lang-select{min-height:44px;background:#2a1965;border:1px solid #482e9e;border-radius:3px 8px 3px 8px;color:#d9cff3;font-size:14px;padding:6px 8px}
.hero-tags b{font-weight:inherit}
.masked{-webkit-text-security:disc}
.insecure-note{margin:16px 0 0;padding:12px 14px;border:1px solid #a0522d;border-radius:6px;background:#2a1408;color:#ffd2b0;font-size:14px;line-height:1.6}
.input-error{margin:-8px 0 16px;color:#ffb48a;font-size:14px;line-height:1.6}
.random-button{display:flex;justify-content:space-between;align-items:center}
.random-button span:last-child{float:none}
.extras{max-width:1312px;margin:24px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.howto{border:1px solid #482e9e;border-radius:3px 14px 3px 14px;background:#20124f;padding:22px 26px}
.howto h3{margin:0 0 10px;font-size:16px;color:#e4daff;font-weight:600}
.howto p{margin:8px 0 0;font-size:14px;line-height:1.75;color:#bbabe7;overflow-wrap:anywhere}
.howto .fine{font-size:13px;color:#957cd9}
.howto code{font-family:Consolas,monospace;background:#2f1a73;border:1px solid #472ca0;border-radius:3px;padding:1px 5px;color:#ad8fff}
.howto a{color:#ffd152;text-decoration:underline;text-underline-offset:3px}
.members li{min-height:44px}
.members .avatar{font-size:19px;font-family:inherit;position:relative;background:#331e78;border-color:#3b247b}
.members .avatar.me{border-color:#ffd050;box-shadow:0 0 0 2px #ffd05040}
.avatar.host::after{content:"👑";position:absolute;top:-12px;right:-9px;font-size:15px;line-height:1}
.members li.away{opacity:.55}
.members .name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.members small{white-space:nowrap}
.members small.host-tag{border-color:#7a6420;color:#f3d27a}
.remove-button{margin-left:auto;min-height:36px;min-width:52px;padding:4px 10px;border:1px solid #6b3b2a;border-radius:3px 7px 3px 7px;background:#2a1510;color:#ffc7b0;font-size:13px}
.remove-button:hover{border-color:#ff9a76}
.members li .member-online+.remove-button{margin-left:10px}
.sidebar-note{min-height:1em}
.secondary-button span{white-space:nowrap}
.locked #lockButton{border-color:#a8822c;background:#2b2210;color:#ffe2a4}
.locked .room-status .live-dot{background:#f3c35a;box-shadow:0 0 8px #f3c35a66}
.tips{margin-top:18px;border:1px solid #482e9e;border-radius:3px 8px 3px 8px;background:#221353}
.tips summary{cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 14px;font-size:14px;color:#c5b6ed}
.tips ul{margin:0;padding:0 16px 14px 30px;font-size:13px;line-height:1.7;color:#b9a9e6}
.tips li+li{margin-top:6px}
.conversation-header p .sep{color:#5031a7}
.conversation-header p .live-dot{width:7px;height:7px}
.live-dot.off{background:#5433ae;box-shadow:none}
.message .avatar{font-size:17px;font-family:inherit;background:#331e78;border-color:#3b247b}
.message.outgoing{justify-content:flex-end}
.message.outgoing .message-meta{justify-content:flex-end}
.message .bubble{margin:0}
.message-meta .sent{color:#ffd152}
.message-meta .sent.all{color:#6ee7cb}
.system-message{max-width:860px;margin-left:auto;margin-right:auto;text-align:center}
.send-button .count{display:none;font-size:17px;font-weight:700}
.send-button.counting svg{display:none}
.send-button.counting .count{display:block}
#charCount.over{color:#ffc5a2}
.composer textarea:disabled{cursor:not-allowed}
.qr-dialog{max-width:400px;text-align:center}
.qr-dialog .dialog-top{text-align:left}
.qr-dialog h2{margin-top:6px}
.qr-code{background:#fff;border-radius:6px;padding:6px;margin:14px auto 0;max-width:300px}
.qr-code svg{display:block;width:100%;height:auto;stroke:none}
.qr-note{margin:16px 0;font-size:14px;line-height:1.65;color:#ffd2b0}
.qr-dialog .primary-button,.dialog-actions .primary-button{justify-content:center}
dialog .muted a{color:#ffd152;text-decoration:underline}
@media(max-width:1430px){.extras{margin-left:64px;margin-right:64px}}
@media(max-width:1100px){.extras{margin-left:40px;margin-right:40px}}
@media(max-width:850px){.extras{grid-template-columns:1fr}}
@media(max-width:600px){.extras{margin:16px 16px 0}.howto{padding:18px}.lang-select{font-size:13px;max-width:92px;padding:6px 4px}.site-header nav .nav-link span{display:none}.members .avatar{font-size:18px}}
@media(max-width:360px){.site-header nav{gap:0}.lang-select{max-width:76px}}
.room-sidebar>*{flex-shrink:0}
.brand>span:last-child{white-space:nowrap}
@media(max-width:600px){.site-header nav [data-open-privacy]{display:none}}
.hero-copy{min-width:0}
html:not([lang^=zh]) .headline-secret{white-space:normal}
html:not([lang^=zh]) .hero-copy h1{font-size:clamp(40px,4.4vw,64px)}
@media(max-width:600px){html:not([lang^=zh]) .hero-copy h1{font-size:32px;letter-spacing:-1px}}
dialog p.muted{margin:0 0 20px}
html:not([lang^=zh]) .brand small{display:none}
@media(max-width:420px){.site-header{padding:0 10px}.site-header nav{gap:0}.site-header .nav-link{min-width:40px;padding:8px 4px}.brand{font-size:17px;gap:7px}.lang-select{max-width:78px}}
@media(max-width:360px){.site-header .nav-link{min-width:32px;padding:8px 2px}.brand{font-size:15px}.brand-icon{width:32px;height:32px}.lang-select{max-width:64px}}

/* iOS Safari does not shrink the page for the on-screen keyboard: it slides the
   visible area down instead, past the end of a page that fits the screen, and
   the chat disappears. In a room the page is pinned to the visible area
   (--vv-top, --app-height from app.js), and on small screens the site header
   steps aside while typing so the messages keep some room (the room button
   and timer come back when the keyboard closes). */
body.in-chat{position:fixed;left:0;right:0;top:var(--vv-top,0px);height:var(--app-height,100dvh);overflow:hidden}
@media(max-width:600px){body.in-chat.keyboard-open .site-header,body.in-chat.keyboard-open .composer-tools{display:none}body.in-chat.keyboard-open .conversation-header{min-height:0;padding-top:6px;padding-bottom:6px}body.in-chat.keyboard-open .conversation-header h2{margin-bottom:2px}body.in-chat.keyboard-open .chat-shell{height:var(--app-height,100dvh)}body.in-chat.keyboard-open .room-sidebar,body.in-chat.keyboard-open .drawer-scrim{top:0;max-height:var(--app-height,100dvh)}}
/* Emergency exit and the veil shown while the page is in the background */
.chat-actions{display:flex;align-items:center;gap:14px}
.panic-button{color:#ff8f8f}
.panic-button:hover{color:#ffb4b4}
body.gone>*{display:none!important}
body.veiled .messages,body.veiled .composer,body.veiled .members{filter:blur(14px)}
@media(max-width:600px){.chat-actions{gap:10px}.panic-button span{display:none}}
/* Tablets: the header has room for icons only */
@media(min-width:601px) and (max-width:960px){.site-header{padding:0 28px}.site-header nav{gap:18px}.site-header .nav-link span{display:none}}
@media(min-width:601px) and (max-width:720px){.site-header nav{gap:6px}.site-header .nav-link{min-width:40px;padding:8px 6px}}
#charCount{direction:ltr;unicode-bidi:isolate}
/* Up to 25 members: the sidebar scrolls, and a long list is tighter. */
.room-sidebar{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#4a329a transparent}.members.many{gap:9px}.members.many .avatar{width:28px;height:28px}.avatar{font-variant-numeric:tabular-nums}
@media(pointer:fine){.members.many .remove-button{min-height:28px;padding:2px 9px}}
/* Protocol 3.1: the safety code check and the older-versions switch. */
#safetyNote{overflow-wrap:anywhere}#safetyNote.warn{color:#ffc7a0}.verify-button{margin:-12px 0 18px}.allow-old{display:flex;gap:8px;align-items:flex-start;font-size:11px;line-height:1.6;color:#9076d7;margin:0 0 22px;cursor:pointer}.allow-old input{margin-top:3px;accent-color:#ffc933}
@media(max-width:600px){.allow-old{font-size:13px}}
.game-start{margin-top:12px}
.game-panel{margin:0;padding:12px 30px;border-bottom:1px solid #482e9e;background:linear-gradient(100deg,#342172cc,#271759cc);color:#ded6f5;font-size:12px}
.game-panel[hidden]{display:none}
.game-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.game-head span{font-size:13px;letter-spacing:1px}
#gameLine{margin:6px 0 8px;color:#c2b3ec;line-height:1.6}
.game-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.game-actions .secondary-button{width:auto;min-height:36px;padding:6px 12px}
.game-word{user-select:none;-webkit-user-select:none;touch-action:none;min-width:130px}
.game-word.open{background:#126652;border-color:#30dab3;color:#f0fffc;font-size:15px;font-weight:600}
.game-votes{display:flex;flex-wrap:wrap;gap:6px}
.game-start+.game-start{margin-top:8px}
.game-word.open{white-space:pre-line;text-align:left}
.esc-form{display:flex;gap:6px;align-items:center}
.esc-form[hidden]{display:none}
.esc-form input{width:96px;min-height:36px;padding:6px 10px;border:1px solid #452a90;border-radius:8px;background:#241653;color:#f4f0ff;font:600 16px/1 ui-monospace,monospace;letter-spacing:3px}
.game-votes .secondary-button{min-width:48px}
.ghost-button{background:transparent;border:1px solid #3a2379;border-radius:6px;color:#a38dde;min-height:36px;padding:6px 12px;font-size:11px}
.message.said .bubble{border-color:#d9a441;box-shadow:0 0 0 1px #d9a44155}
.message.whisper .bubble{border:1px dashed #b48cf0;background:#2a1d45;color:#efe6ff}
.tr-form input{width:min(260px,52vw);letter-spacing:0;font:inherit;font-size:14px}
.pact-keep{border-color:#30dab3!important}
.pact-betray{border-color:#e0605a!important}
.sm-form select{min-height:36px;padding:4px 6px;border:1px solid #452a90;border-radius:8px;background:#241653;color:#f4f0ff}
.sm-form input{width:min(140px,36vw);letter-spacing:0;font:inherit;font-size:14px}
@media(max-width:600px){.game-panel{padding:10px 16px;font-size:14px}.game-actions .secondary-button,.ghost-button{min-height:44px;font-size:14px}}

.compat-hidden{position:absolute;opacity:0.001;pointer-events:none;width:20px;height:20px;overflow:hidden;z-index:-1}
.pic-button{width:35px;height:35px;display:grid;place-items:center;flex-shrink:0;border-radius:7px;background:transparent;color:#ffd152;border:1px solid #49309c}
.pic-button svg{width:19px;height:19px}
.bubble.picture{padding:4px;line-height:0}
.bubble.picture img{display:block;max-width:min(320px,100%);height:auto;border-radius:6px;cursor:zoom-in}
.bubble.picture img.full{position:fixed;inset:0;z-index:60;width:100vw;height:100%;max-width:none;object-fit:contain;background:#000;border-radius:0;cursor:zoom-out}
@media(max-width:600px){.pic-button{width:44px;height:48px;min-width:44px}}
.ww-setup{margin-top:8px;display:grid;gap:6px}
.ww-setup select{width:100%;min-height:36px;padding:4px 6px;border:1px solid #452a90;border-radius:8px;background:#241653;color:#f4f0ff;font-size:12px}
.ww-setup .allow-old{margin:0}
.ww-day{align-self:center;color:#ffd27a}
@keyframes nudge{0%{box-shadow:inset 0 0 0 0 #ffd27a00}30%{box-shadow:inset 0 0 0 3px #ffd27a}100%{box-shadow:inset 0 0 0 0 #ffd27a00}}
.game-panel.nudge{animation:nudge 1.2s ease-out 2}
.game-hint{margin:8px 0 0;font-size:11px;line-height:1.6}
.rules-dialog{max-height:calc(100vh - 24px);overflow-y:auto}
.rules-dialog select{width:100%;min-height:40px;padding:4px 8px;border:1px solid #452a90;border-radius:8px;background:#241653;color:#f4f0ff;font-size:13px}
.rules-text{white-space:pre-line;line-height:1.75;font-size:13px;color:#cec1f0;margin:16px 0 22px}
/* 2.18 theme: a night-sky game table (violet, gold buttons, lavender cards). */
:root{--sky1:#3a1f9e;--sky2:#1d1458;--gold1:#ffd84d;--gold2:#ffb21a;--gold-ink:#3b2200;--lav:#f1edff;--lav-ink:#2b1d63;--pink:#ff4f9a;--mint:#3ee6c1}
body{background:linear-gradient(180deg,#2c1a86 0,#1d1458 520px,#150f42 100%) fixed;background-color:#150f42}
.hero{background:radial-gradient(circle at 84% 18%,#fff6d955 0,#fff6d91a 70px,transparent 150px),radial-gradient(ellipse at 20% 0,#6a4cf044,transparent 60%)}
.hero-art,.hero-watermark,.orbit,.hero-coordinates{display:none}
.hero:before{background:radial-gradient(1.5px 1.5px at 12% 22%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 33% 12%,#fff8 50%,transparent 51%),radial-gradient(1.5px 1.5px at 58% 30%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 72% 8%,#fff9 50%,transparent 51%),radial-gradient(1.5px 1.5px at 91% 40%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 46% 52%,#fff5 50%,transparent 51%);mask-image:none;-webkit-mask-image:none;opacity:1}
.hero:after{display:none}
.headline-secret,.hero-copy h1 .cyan{color:var(--gold1);-webkit-text-stroke:0}
.eyebrow{border-radius:999px;background:#ffffff14;border:1px solid #ffffff26;color:#e9e2ff}
.hero-tags span{border-radius:999px;background:#ffffff12;border-color:#ffffff2a}
/* Gold game buttons. */
.primary-button{background:linear-gradient(180deg,var(--gold1),var(--gold2));color:var(--gold-ink);border:0;border-radius:999px;box-shadow:0 4px 0 #c97d00,0 8px 22px #ffb21a40;font-weight:700}
.primary-button:hover{filter:brightness(1.05);box-shadow:0 4px 0 #c97d00,0 10px 28px #ffb21a60}
.primary-button:active{transform:translateY(3px);box-shadow:0 1px 0 #c97d00}
.primary-button svg{filter:none}.primary-button:before{display:none}
/* The entry card: lavender-white, dark ink. */
.entry-card{background:linear-gradient(170deg,#fbf9ff,var(--lav));color:var(--lav-ink);border:0;border-radius:24px;box-shadow:0 0 0 4px #ffffff22,0 24px 60px #0a052e99}
.entry-card:before,.entry-card:after{display:none}
.entry-card h2{color:var(--lav-ink)}
.entry-card .muted,.entry-card .input-hint,.entry-card .entry-meta,.entry-card .overline{color:#5d4e94}
.entry-card-top svg{color:#7b5cf5;filter:none}
.entry-card form label{color:var(--lav-ink)}
.entry-card .tabs{background:#e2dbff;border:0;border-radius:999px;padding:4px}
.entry-card .tabs button{color:#5d4e94;border-radius:999px;border:0}
.entry-card .tabs button.active{background:#fff;color:var(--lav-ink);box-shadow:0 2px 8px #5b3fd833;border:0}
.entry-card .secret-input{background:#fff;border:2px solid #d6ccff;border-radius:16px;box-shadow:none}
.entry-card .secret-input:focus-within{border-color:#7b5cf5;box-shadow:0 0 0 4px #7b5cf533}
.entry-card .secret-input input{color:var(--lav-ink)}
.entry-card .secret-input input::placeholder{color:#9184c4}
.entry-card .secret-input>svg,.entry-card .icon-button{color:#7b5cf5}
.entry-card .random-button,.entry-card .privacy-link{color:#5b3fd8}
.entry-card .privacy-link svg:first-child{color:#7b5cf5}
.entry-card .card-divider{background:#d6ccff}
.entry-card .live-dot{background:#12b88f}
.entry-card .input-error{color:#c0144f}
.entry-card .insecure-note{color:#c0144f}
/* Rounded, friendly surfaces. */
.principles,.howto,.chat-shell,.room-sidebar,dialog{border-radius:20px}
.principles{background:#ffffff0d;border-color:#ffffff1f}
.principles svg{color:var(--gold1);filter:none}
.secondary-button{border-radius:14px}
.game-start{border-radius:999px;background:#ffffff14;border:1px solid #ffffff2e;color:#fff}
.game-start:not(:disabled):hover{background:#ffffff22}
/* The game panel: the table. */
.game-panel{background:linear-gradient(170deg,#4a2fc4ee,#2f1f8cee);border-bottom:0;border-radius:0 0 22px 22px;box-shadow:0 10px 30px #0a052e80;color:#fff}
.game-head strong{color:var(--gold1);font-size:15px}
#gameLine{color:#f1edff;font-weight:600}
.game-votes .secondary-button{min-width:52px;min-height:52px;border-radius:999px;background:var(--lav);color:var(--lav-ink);border:2px solid #fff;font-size:16px;font-weight:700;box-shadow:0 3px 0 #b9a8f5}
.game-votes .secondary-button:active{transform:translateY(2px);box-shadow:0 1px 0 #b9a8f5}
.game-votes .pact-keep{background:#d8fff3;border-color:var(--mint)!important}
.game-votes .pact-betray{background:#ffe0ee;border-color:var(--pink)!important}
.game-word{background:linear-gradient(180deg,var(--gold1),var(--gold2))!important;color:var(--gold-ink)!important;border:0!important;border-radius:999px!important;box-shadow:0 3px 0 #c97d00;font-weight:700}
.game-word.open{background:var(--lav)!important;color:var(--lav-ink)!important;border-radius:18px!important;box-shadow:0 0 0 3px var(--gold1)}
.game-panel .ghost-button{border-radius:999px;border-color:#ffffff40;color:#e9e2ff;background:#ffffff10}
.esc-form input,.sm-form select,.ww-setup select{border-radius:12px}
.ww-day{color:var(--gold1)}
@keyframes nudge{0%{box-shadow:inset 0 0 0 0 #ffd84d00}30%{box-shadow:inset 0 0 0 4px #ffd84d}100%{box-shadow:inset 0 0 0 0 #ffd84d00}}
/* Chat. */
.bubble{border-radius:18px}
.message.said .bubble{border-color:var(--gold1);box-shadow:0 0 0 1px #ffd84d55}
.message.whisper .bubble{border-color:#c9b6ff;background:#3a2783}
/* The games on the front page. */
.shelf{max-width:1312px;margin:0 auto 30px;padding:0}
.shelf h2{font-size:20px;margin:0 0 6px;color:#fff}
.shelf>p{color:#c9bff2;font-size:12px;margin:0 0 16px}
.shelf-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.shelf-card{display:flex;flex-direction:column;gap:6px;text-align:left;padding:18px 16px;border-radius:20px;background:#ffffff10;border:1px solid #ffffff22;color:#fff;min-height:132px;transition:transform .15s,background .15s}
.shelf-card:hover{background:#ffffff1c;transform:translateY(-2px)}
.shelf-card .icon{font-size:28px;line-height:1}
.shelf-card b{font-size:15px}
.shelf-card span{font-size:12px;color:#d6ccff;line-height:1.6}
.shelf-card em{font-style:normal;margin-top:auto;font-size:12px;font-weight:700;color:var(--gold1)}
.shelf-card.main{background:linear-gradient(160deg,#ff4f9a33,#ffffff10);border-color:#ff4f9a66}
@media(max-width:1430px){.shelf{margin-left:64px;margin-right:64px}}
@media(max-width:1100px){.shelf-grid{grid-template-columns:repeat(3,1fr)}.shelf{margin-left:40px;margin-right:40px}}
@media(max-width:600px){.shelf{margin:0 22px 26px}.shelf-grid{grid-template-columns:1fr 1fr;gap:10px}.shelf-card{min-height:118px;padding:14px}.shelf-card.main{grid-column:1/-1}}
/* Chrome 83 (Android 10/11 WebView) has no flex gap: spacing by margins. */
.hero-tags{gap:0;flex-wrap:wrap}.hero-tags span{margin:0 8px 8px 0}
.game-actions,.game-votes{gap:0}.game-actions>*,.game-votes>*{margin:0 8px 8px 0}
.shelf-card{gap:0}.shelf-card>*+*{margin-top:6px}
.ld-form select{min-height:44px;padding:4px 8px;border:2px solid #fff;border-radius:12px;background:var(--lav);color:var(--lav-ink);font-size:16px;font-weight:700}
.ld-form .secondary-button{min-height:44px;border-radius:999px;font-weight:700}
.ld-form #ldBid{background:linear-gradient(180deg,var(--gold1),var(--gold2));color:var(--gold-ink);border:0}
.ld-form .ld-call{background:var(--pink);color:#fff;border:0}
.ld-form>*{margin:0 6px 6px 0}
.ld-setup{margin:8px 0 0}
@media(max-width:1430px){.shelf-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1431px){.shelf-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:600px){.shelf-grid{grid-template-columns:1fr 1fr}}
/* 2.21: two ways in, the public tables waiting, the quick-play dialog. */
.hero-ctas{display:flex;flex-wrap:wrap;margin:6px 0 18px}
.hero-ctas>*{margin:0 12px 10px 0}
.quick-cta,.private-cta{width:auto;min-height:58px;padding:0 24px;border-radius:999px;justify-content:center;text-align:center}
.quick-cta span,.private-cta span{display:flex;flex-direction:column;line-height:1.25}
.quick-cta b,.private-cta b{font-size:16px}
.quick-cta small,.private-cta small{font-size:11px;font-weight:500;opacity:.85}
.private-cta{background:#ffffff14;border:1px solid #ffffff33;color:#fff;cursor:pointer}
.private-cta:hover{background:#ffffff22}
.lobby-panel{max-width:1312px;margin:0 auto 26px;padding:18px 20px;border-radius:20px;background:#ffffff0d;border:1px solid #ffffff1f}
.lobby-panel h2{font-size:18px;margin:0 0 4px;color:#fff}
.lobby-panel>p{color:#c9bff2;font-size:12px;margin:0 0 10px}
.lobby-row{display:flex;align-items:center;padding:10px 12px;border-radius:14px;background:#ffffff12;margin-top:8px}
.lobby-row .em{font-size:26px;width:40px;flex:none}
.lobby-row .info{flex:1;min-width:0}
.lobby-row .info b{display:block;color:#fff}
.lobby-row .info span{font-size:12px;color:#c9bff2}
.lobby-row .seats{display:flex;margin-top:4px}
.lobby-row .seats i{width:11px;height:11px;border-radius:50%;margin-right:3px;background:#ffffff30}
.lobby-row .seats i.on{background:var(--mint)}
.lobby-row .sit{min-height:40px;padding:0 18px;border-radius:999px;background:linear-gradient(180deg,var(--gold1),var(--gold2));color:var(--gold-ink);font-weight:700;border:0;box-shadow:0 3px 0 #c97d00;cursor:pointer;flex:none}
.lobby-row .sit:disabled{opacity:.5;cursor:default}
.lobby-empty{text-align:center;color:#c9bff2;padding:16px 8px;margin:0}
.shelf-meta{display:flex;flex-wrap:wrap;font-style:normal}
.shelf-meta span{font-size:11px;color:#d6ccff;margin:4px 8px 0 0}
.shelf-meta span[data-wait].live{color:#063b30;background:var(--mint);border-radius:999px;padding:0 8px;font-weight:700}
.quick-games{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.quick-games button:not(.banner-card){padding:10px 12px;border-radius:16px;background:#ffffff12;border:2px solid transparent;text-align:left;color:#fff;cursor:pointer;min-height:58px}
.quick-games button:not(.banner-card).on{border-color:var(--gold1);background:#ffffff22}
.quick-games button:not(.banner-card) small{display:block;font-size:11px;color:#c9bff2}
.quick-seats{display:flex;align-items:center;margin:0 0 12px;font-size:13px}
.quick-seats select{margin-left:10px;min-height:40px;padding:4px 10px;border-radius:12px;background:#0a1826;color:#fff;border:1px solid #2e6a8c}
.quick-note{font-size:12px;color:#ffd6e6;background:#ff4f9a22;border-left:3px solid var(--pink);padding:8px 10px;border-radius:8px}
.public-note{margin:0;padding:8px 16px;font-size:12px;color:#ffe9a8;background:#ffb21a22;border-bottom:1px solid #ffb21a55}
@media(max-width:1430px){.lobby-panel{margin-left:64px;margin-right:64px}}
@media(max-width:1100px){.lobby-panel{margin-left:40px;margin-right:40px}}
@media(max-width:600px){.lobby-panel{margin:0 22px 22px}.hero-ctas{display:grid;grid-template-columns:1fr}.hero-ctas>*{margin-right:0}.quick-cta,.private-cta{width:100%}}

/* --- Game Core 2.21: Seats bar, Quick Emojis, Mobile Tabs --- */
.game-seats{display:flex;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.seat{position:relative;margin-right:8px;margin-bottom:6px;display:inline-flex}
.seat .avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.seat .avatar.me{box-shadow:0 0 0 2px #fff}
.seat .avatar.turn{box-shadow:0 0 10px var(--cyan);border:2px solid var(--cyan)}
.seat .avatar.out{opacity:.35;filter:grayscale(1)}
.seat .avatar.away{border:2px dashed #8468d3;opacity:.6}
.emoji-bubble{position:absolute;top:-16px;right:-8px;font-size:18px;pointer-events:none;z-index:10;animation:popFloat 3s ease forwards}
@keyframes popFloat{0%{transform:scale(0.6) translateY(0);opacity:0}15%{transform:scale(1.2) translateY(-4px);opacity:1}25%{transform:scale(1) translateY(-6px);opacity:1}80%{opacity:1}100%{transform:translateY(-16px);opacity:0}}
.quick-emojis{display:flex;align-items:center;margin:10px 0}
.quick-emoji-btn{background:#2a185c;border:1px solid #482f91;border-radius:6px;padding:4px 8px;font-size:16px;margin-right:6px;cursor:pointer;line-height:1.2}
.quick-emoji-btn:hover{background:#3c2480;border-color:var(--cyan)}
.system-message.quick-reaction{font-size:13px;color:#ad9ce0;margin:3px auto}
.mobile-room-tabs{display:none}
@media(max-width:600px){
  .mobile-room-tabs{display:flex;background:#1b0f40;border-bottom:1px solid #3a257d;padding:6px 12px}
  .mobile-tab-btn{flex:1;background:none;border:none;color:#8b70d5;padding:8px 4px;font-size:14px;font-weight:600;border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer}
  .mobile-tab-btn.active{background:#3f298b;color:#e5dcff}
  .tab-badge{background:#ff5252;color:#fff;border-radius:10px;font-size:11px;padding:1px 6px;margin-left:5px;line-height:1.2}
  .chat-shell[data-tab="chat"] #messages,.chat-shell[data-tab="chat"] .composer-area{display:flex!important}
  .chat-shell[data-tab="chat"] #gamePanel{display:none!important}
  .chat-shell[data-tab="chat"] #roomSidebar:not(.open){display:none!important}
  .chat-shell[data-tab="game"] .conversation-header,.chat-shell[data-tab="game"] #messages,.chat-shell[data-tab="game"] .composer-area{display:none!important}
  .chat-shell[data-tab="game"] #gamePanel{display:block!important}
  .chat-shell[data-tab="game"].no-game #gamePanel{display:none!important}
  .chat-shell[data-tab="game"].no-game #roomSidebar:not(.open){display:block!important;position:static!important;width:100%!important;max-height:none!important;overflow-y:auto!important;border:none!important;box-shadow:none!important;padding:16px!important;transform:none!important}
  .chat-shell[data-tab="game"].no-game #roomSidebar:not(.open) .sidebar-top,.chat-shell[data-tab="game"].no-game #roomSidebar:not(.open) .sidebar-room-section,.chat-shell[data-tab="game"].no-game #roomSidebar:not(.open) .sidebar-room-actions,.chat-shell[data-tab="game"].no-game #roomSidebar:not(.open) .sidebar-bottom{display:none!important}
  .chat-shell[data-tab="game"].no-game #roomSidebar:not(.open) .sidebar-game-section{display:block!important}
  .chat-shell[data-tab="game"]:not(.no-game) #roomSidebar:not(.open){display:none!important}
  .chat-shell[data-tab="room"] .conversation{display:none!important}
  .chat-shell[data-tab="room"] #roomSidebar:not(.open){display:block!important;position:static!important;width:100%!important;max-height:none!important;overflow-y:auto!important;border:none!important;box-shadow:none!important;padding:16px!important;transform:none!important}
  .chat-shell[data-tab="room"] #roomSidebar:not(.open) .sidebar-game-section{display:none!important}
  .chat-shell[data-tab="room"] #roomSidebar:not(.open) .sidebar-room-section,.chat-shell[data-tab="room"] #roomSidebar:not(.open) .sidebar-room-actions{display:block!important}
}


/* Banner Card Component (shared by quick dialog and room game picker) */
.banner-list{display:flex;flex-wrap:wrap;margin:-6px 0;width:100%}
.banner-card{display:flex;align-items:center;text-align:left;border-radius:18px;border:1px solid rgba(255,255,255,0.28);padding:14px 16px;color:#ffffff;text-shadow:0 1px 3px rgba(0,0,0,0.65);width:calc(50% - 12px);margin:6px;box-shadow:0 4px 18px rgba(0,0,0,0.4);transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;cursor:pointer;position:relative;background:#22154b;min-height:84px;user-select:none;-webkit-user-select:none;box-sizing:border-box}
.banner-card:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 8px 26px rgba(0,0,0,0.5)}
.banner-card:active:not(:disabled){transform:scale(0.985);filter:brightness(1.15)}
.banner-card:disabled{opacity:.72;filter:saturate(0.55) brightness(0.82);cursor:not-allowed}

/* Gradients for different games */
.banner-ww,.banner-ww-intro,.banner-ww-standard,.banner-ww-advanced,.banner-ww-special,.quick-dialog .banner-ww,.quick-dialog .banner-ww-intro,.quick-dialog .banner-ww-standard,.quick-dialog .banner-ww-advanced,.quick-dialog .banner-ww-special{background:linear-gradient(135deg,#7f1d1d 0%,#b91c1c 45%,#ea580c 100%);border-color:#f97316}
.banner-ww-intro,.quick-dialog .banner-ww-intro{background:linear-gradient(135deg,#881337 0%,#be123c 45%,#ea580c 100%);border-color:#fb923c}
.banner-ww-standard,.quick-dialog .banner-ww-standard{background:linear-gradient(135deg,#7f1d1d 0%,#b91c1c 45%,#ea580c 100%);border-color:#f97316}
.banner-ww-advanced,.quick-dialog .banner-ww-advanced{background:linear-gradient(135deg,#701a75 0%,#991b1b 45%,#c2410c 100%);border-color:#ea580c}
.banner-ww-special,.quick-dialog .banner-ww-special{background:linear-gradient(135deg,#9a3412 0%,#c2410c 45%,#f97316 100%);border-color:#fdba74}
.banner-spy,.quick-dialog .banner-spy{background:linear-gradient(135deg,#0e7490 0%,#0284c7 45%,#1d4ed8 100%);border-color:#38bdf8}
.banner-ld,.quick-dialog .banner-ld{background:linear-gradient(135deg,#b45309 0%,#d97706 45%,#ea580c 100%);border-color:#f59e0b}
.banner-tr,.quick-dialog .banner-tr{background:linear-gradient(135deg,#047857 0%,#059669 45%,#0d9488 100%);border-color:#34d399}
.banner-sm,.quick-dialog .banner-sm{background:linear-gradient(135deg,#be185d 0%,#db2777 45%,#7c3aed 100%);border-color:#f472b6}
.banner-esc,.quick-dialog .banner-esc{background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 45%,#4338ca 100%);border-color:#60a5fa}

/* Card inner layout */
.banner-badge{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:14px;flex-shrink:0;background:rgba(255,255,255,0.2);box-shadow:0 0 18px rgba(255,255,255,0.35),inset 0 0 12px rgba(255,255,255,0.3);border:2px solid rgba(255,255,255,0.45)}
.banner-emoji{font-size:28px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4))}
.banner-main{flex:1;min-width:0}
.banner-title-row{display:flex;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.banner-title{font-size:17px;font-weight:800;color:#ffffff;margin-right:8px;letter-spacing:-.2px;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,0.8)}
.banner-players{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.3);color:#ffd152;margin-right:6px;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,0.8)}
.banner-tag{font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;background:#e02e49;color:#fff;margin-right:6px;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,0.4)}
.banner-desc{font-size:12px;color:rgba(255,255,255,0.92);line-height:1.45;word-break:break-word;text-shadow:0 1px 2px rgba(0,0,0,0.7)}
.banner-action{margin-left:10px;flex-shrink:0}
.banner-action-text{display:inline-block;padding:6px 12px;border-radius:10px;font-size:12px;font-weight:700;background:rgba(255,255,255,0.22);border:1px solid rgba(255,255,255,0.35);color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,0.6);box-shadow:0 2px 6px rgba(0,0,0,0.25)}
.banner-card:disabled .banner-action-text{background:rgba(0,0,0,0.25);color:rgba(255,255,255,0.75);border-color:rgba(255,255,255,0.18)}

/* Two-layer werewolf header in quick play & room */
.banner-layer-header{display:flex;align-items:center;justify-content:space-between;width:100%;margin:0 6px 12px}
.banner-back{font-size:13px;padding:6px 12px;border-radius:8px;background:#352075;border:1px solid #5a3ba8;color:#eee;cursor:pointer}
.banner-back:hover{background:#482c9e;color:#fff}
.banner-layer-title{font-size:16px;font-weight:700;color:#ffd152;margin-left:12px}

/* Quick dialog flat layout */
.quick-dialog{max-width:880px;width:95%}
.quick-dialog .quick-games{display:block;margin:16px 0}

/* Room sidebar game section banner cards */
.sidebar-game-section .banner-card{width:100%;margin:6px 0;padding:10px 12px;min-height:auto;flex-wrap:wrap;align-items:center}
.sidebar-game-section .banner-badge{width:32px;height:32px;margin-right:8px;flex-shrink:0}
.sidebar-game-section .banner-emoji{font-size:18px}
.sidebar-game-section .banner-main{flex:1;min-width:0}
.sidebar-game-section .banner-title-row{display:flex;align-items:center;flex-wrap:nowrap;margin-bottom:2px}
.sidebar-game-section .banner-title{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:4px;flex-shrink:1}
.sidebar-game-section .banner-players{font-size:10px;padding:1px 5px;white-space:nowrap;flex-shrink:0;margin-right:4px}
.sidebar-game-section .banner-tag{font-size:9px;padding:1px 4px;white-space:nowrap;flex-shrink:0}
.sidebar-game-section .banner-desc{width:100%;font-size:11px;margin-top:4px;line-height:1.35}
.sidebar-game-section .banner-action{width:100%;margin:6px 0 0;display:flex;justify-content:flex-end}
.sidebar-game-section .banner-action-text{padding:3px 8px;font-size:11px}
.sidebar-game-section .banner-list{margin:0}

/* Proposal / Switch Vote Bar */
.vote-bar{background:linear-gradient(135deg,#3c1d7a 0%,#200e46 100%);border:2px solid #ffd152;border-radius:14px;padding:12px 16px;margin:10px 0;display:flex;align-items:center;justify-content:space-between;box-shadow:0 6px 20px rgba(0,0,0,0.5);animation:fadeIn .2s ease;flex-wrap:wrap}
.vote-text{font-size:14px;font-weight:700;color:#fff;margin-right:12px;line-height:1.4}
.vote-actions{display:flex;align-items:center;margin:4px 0}
.vote-actions button{margin-right:8px;padding:6px 16px;font-size:13px;font-weight:600;border-radius:8px}
.vote-agree{background:var(--cyan);color:#180f36;font-weight:700}
.vote-decline{background:#352075;border:1px solid #5a3ba8;color:#eee}
.vote-tally{font-size:12px;color:#ffd152;margin-left:auto;white-space:nowrap}

/* Variable-player Public Table Ready Bar */
.ready-bar{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);border-radius:12px;padding:10px 14px;margin:8px 0;display:flex;align-items:center}
.ready-btn{padding:8px 18px;font-size:13px;font-weight:700;border-radius:8px;margin-right:12px;cursor:pointer}
.ready-btn.ready-done{background:#27a381;color:#fff}
.ready-status-text{font-size:13px;color:#ffd152;font-weight:600}

/* Responsive adjustments for mobile and 360px phones */
@media(max-width:600px){
  .banner-card{width:100%;margin:5px 0}
  .banner-badge{width:42px;height:42px;margin-right:10px}
  .banner-emoji{font-size:22px}
  .banner-title{font-size:15px}
  .banner-action-text{padding:5px 9px;font-size:11px}
  .vote-bar{flex-direction:column;align-items:flex-start}
  .vote-actions{margin-top:8px;width:100%}
  .vote-actions button{flex:1}
  .vote-tally{margin-left:0;margin-top:6px}
}
@media(max-width:360px){
  .banner-card{padding:10px 12px}
  .banner-badge{width:36px;height:36px;margin-right:8px}
  .banner-emoji{font-size:18px}
  .banner-title{font-size:14px}
  .banner-desc{font-size:11px}
  .banner-players{font-size:10px;padding:1px 5px}
  .banner-action-text{font-size:10px;padding:4px 8px}
}

/* Judge Selector in Room Sidebar */
.judge-selector{margin:12px 0;padding:10px 12px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);border-radius:10px}
.judge-selector-label{display:block;font-size:12px;font-weight:700;color:#ffd152;margin-bottom:6px}
.judge-select{width:100%;padding:8px 10px;background:#201244;color:#fff;border:1px solid #4a329a;border-radius:6px;font-size:12px;cursor:pointer}

/* Werewolf Round Table */
.ww-table{position:relative;width:100%;border-radius:18px;overflow:hidden;box-sizing:border-box;padding:12px;min-height:380px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 8px 30px rgba(0,0,0,0.5);transition:background .6s ease,border-color .6s ease,color .6s ease}
@media(prefers-reduced-motion:reduce){
  .ww-table, .ww-stage-title, .ww-seat.actionable .ww-seat-avatar{transition:none!important;animation:none!important}
}

/* Day & Night Themes (0.6s transition, pure CSS) */
.ww-table.ww-day-theme{
  background:
    radial-gradient(circle at 50% 12%, rgba(253, 224, 71, 0.4) 0%, rgba(251, 191, 36, 0.2) 26%, transparent 52%),
    linear-gradient(180deg, #1e3a8a 0%, #1e40af 35%, #0369a1 100%);
  border:2px solid #38bdf8;
  color:#fff;
}
.ww-table.ww-night{
  background:
    radial-gradient(circle at 50% 14%, #fef08a 0%, #fef08a 18px, rgba(254, 240, 138, 0.25) 24px, transparent 38px),
    radial-gradient(2px 2px at 15% 25%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 30% 15%, #ffffff, transparent),
    radial-gradient(2px 2px at 72% 20%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 85% 32%, #ffffff, transparent),
    radial-gradient(2px 2px at 25% 65%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 78% 70%, #ffffff, transparent),
    linear-gradient(180deg, #080d22 0%, #10173e 50%, #0d122e 100%);
  border:2px solid #4338ca;
  color:#e0e7ff;
}

/* Top bar */
.ww-top-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:8px;padding:0 4px}
.ww-mode-badge{font-size:12px;font-weight:750;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.25);color:#fff;margin-right:6px}
.ww-judge-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;background:rgba(59,130,246,0.3);border:1px solid rgba(147,197,253,0.35);color:#93c5fd}
.ww-view-toggle{font-size:11px;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:#fff;cursor:pointer}
.ww-view-toggle:hover{background:rgba(255,255,255,0.22)}

/* Arena */
.ww-arena{display:flex;justify-content:space-between;align-items:stretch;position:relative;width:100%;min-height:360px;margin:4px 0;flex:1}
.ww-seats-col{display:flex;flex-direction:column;justify-content:space-around;width:125px;flex-shrink:0;z-index:5}
.ww-seats-left{align-items:flex-start;padding-bottom:64px;box-sizing:border-box}
.ww-seats-right{align-items:flex-end}

/* Stage */
.ww-stage{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6px 2px;margin:0;position:relative;z-index:20;overflow:hidden}
.ww-stage-title{font-size:16px;font-weight:800;color:#ffffff;text-shadow:0 2px 8px rgba(0,0,0,0.85);letter-spacing:.3px;line-height:1.25;white-space:nowrap;margin-bottom:4px}
.ww-stage-title.fade-in{animation:stageFadeIn .4s ease}
@keyframes stageFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.ww-stage-sub{font-size:11px;font-weight:600;color:rgba(255,255,255,0.88);text-shadow:0 1px 3px rgba(0,0,0,0.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ww-stage-votes{background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.25);border-radius:8px;padding:4px 8px;margin-top:6px;font-size:11px;font-weight:600;color:#ffd152;text-shadow:0 1px 2px rgba(0,0,0,0.8);max-width:95%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Seats */
.ww-seat{position:relative;display:flex;align-items:center;margin:3px 0;width:100%;cursor:default}
.ww-seats-left .ww-seat{flex-direction:row}
.ww-seats-right .ww-seat{flex-direction:row-reverse}
.ww-seat-avatar-wrap{position:relative;width:56px;height:56px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ww-seat-avatar{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2.5px solid rgba(255,255,255,0.4);box-shadow:0 4px 12px rgba(0,0,0,0.5);overflow:hidden;position:relative;color:rgba(255,255,255,0.85);transition:transform .15s ease,box-shadow .15s ease}
.ww-avatar-icon{width:28px;height:28px;fill:currentColor;pointer-events:none}
.ww-avatar-voted{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);border-radius:50%;pointer-events:none;animation:checkPop .25s ease}
.ww-avatar-voted svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,0.9))}
@keyframes checkPop{from{opacity:0;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}
.ww-seat-num-badge{position:absolute;top:-3px;left:-3px;z-index:10;width:22px;height:22px;border-radius:50%;background:#16a34a;color:#fff;font-size:13px;font-weight:900;line-height:20px;text-align:center;border:1.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.6);pointer-events:none}

/* Seat Name Bar */
.ww-seat-name-bar{background:rgba(15,10,35,0.78);border:1px solid rgba(255,255,255,0.22);color:#fff;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px;text-shadow:0 1px 2px rgba(0,0,0,0.8)}
.ww-seats-left .ww-seat-name-bar{margin-left:-8px;padding:4px 8px 4px 12px;border-radius:0 14px 14px 0}
.ww-seats-right .ww-seat-name-bar{margin-right:-8px;padding:4px 12px 4px 8px;border-radius:14px 0 0 14px}
.ww-seat-name-bar.me{background:rgba(30,64,175,0.85);border-color:#60a5fa;color:#dbeafe}
.ww-name-short{display:none}
.ww-name-full{display:inline}

/* Badges on seat */
.ww-badge-me{display:none}
.ww-seat.is-me .ww-seat-avatar{border-color:#fbbf24!important;box-shadow:0 0 12px rgba(251,191,36,0.65)!important}
.ww-badge-sheriff{position:absolute;top:-5px;right:-4px;font-size:14px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6));z-index:11}
.ww-badge-dead{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:22px;line-height:1;z-index:13}
.ww-badge-wolf{position:absolute;bottom:-3px;right:-3px;font-size:14px;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.7));z-index:11}
.ww-seat.dead .ww-seat-avatar{opacity:.4;filter:grayscale(1)}
.ww-seat.away .ww-seat-avatar{border-style:dashed;opacity:.6}

/* Actionable seat highlight */
.ww-seat.actionable{cursor:pointer;touch-action:manipulation}
.ww-seat.actionable .ww-seat-avatar{border-color:#38bdf8;box-shadow:0 0 16px #38bdf8;animation:seatPulse 1.2s infinite alternate;cursor:pointer;touch-action:manipulation}
@media(hover:hover) and (pointer:fine){.ww-seat.actionable:hover .ww-seat-avatar{box-shadow:0 0 22px #38bdf8}}
.ww-seat.actionable .ww-seat-name-bar{border-color:#38bdf8}
@keyframes seatPulse{from{box-shadow:0 0 6px #38bdf8}to{box-shadow:0 0 18px #38bdf8}}

/* Speaking progress ring */
.ww-ring{position:absolute;top:-2px;left:-2px;width:60px;height:60px;transform:rotate(-90deg);pointer-events:none}
.ww-ring-bg{fill:none;stroke:rgba(255,255,255,0.15);stroke-width:2.5}
.ww-ring-bar{fill:none;stroke:#fbbf24;stroke-width:3.2;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.ww-seat.speaking .ww-seat-avatar{box-shadow:0 0 18px #fbbf24;border-color:#fbbf24}

/* Speech bubble beside seat */
.ww-seat-bubble{position:absolute;background:rgba(20,13,46,0.94);border:1px solid rgba(255,255,255,0.35);border-radius:10px;padding:5px 8px;font-size:11px;color:#fff;line-height:1.35;min-width:86px;max-width:min(150px,45vw);box-shadow:0 4px 14px rgba(0,0,0,0.65);z-index:15;white-space:normal;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;pointer-events:none;animation:bubbleFadeIn .25s ease}
.ww-seats-left .ww-seat-bubble{left:calc(100% + 4px);right:auto}
.ww-seats-right .ww-seat-bubble{right:calc(100% + 4px);left:auto}
.ww-seat-bubble.bubble-top{top:2px;bottom:auto}
.ww-seat-bubble.bubble-shift-up{top:-46px;bottom:auto}
.ww-seat-bubble.bubble-shift-down{top:auto;bottom:-36px}
.ww-seat-bubble.bubble-bottom{top:auto;bottom:2px}
@keyframes bubbleFadeIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}

/* Action confirmation popover */
.ww-confirm-dialog{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(18,12,42,0.96);border:1.5px solid #38bdf8;border-radius:14px;padding:14px 20px;box-shadow:0 8px 32px rgba(0,0,0,0.75);z-index:25;text-align:center;min-width:180px;animation:confirmPop .2s ease}
@keyframes confirmPop{from{opacity:0;transform:translate(-50%,-45%)}to{opacity:1;transform:translate(-50%,-50%)}}
.ww-confirm-text{font-size:14px;font-weight:700;color:#fff;margin:0 0 12px}
.ww-confirm-actions{display:flex;justify-content:center}
.ww-confirm-actions button{margin:0 5px;padding:6px 14px;font-size:12px;font-weight:700;border-radius:8px;touch-action:manipulation}

/* Witch potion panel */
.ww-potion-panel{background:rgba(18,12,42,0.94);border:1px solid #c084fc;border-radius:12px;padding:10px 14px;margin:8px 0;text-align:center;box-shadow:0 4px 18px rgba(0,0,0,0.5)}
.ww-potion-title{font-size:13px;font-weight:700;color:#e9d5ff;margin-bottom:8px}
.ww-potion-actions{display:flex;justify-content:center;flex-wrap:wrap;margin:-3px 0}
.ww-potion-actions button{margin:3px 5px;padding:6px 14px;font-size:12px;font-weight:700;border-radius:8px}

/* Table bottom controls */
.ww-bottom-row{display:flex;align-items:center;justify-content:center;margin-top:6px;width:100%}
.ww-pass-button{padding:10px 24px;font-size:14px;font-weight:800;background:linear-gradient(135deg,#eab308 0%,#ca8a04 100%);color:#000;border:1px solid #fef08a;border-radius:12px;box-shadow:0 4px 14px rgba(234,179,8,0.4);cursor:pointer;transition:transform .15s ease}
.ww-pass-button:hover{transform:scale(1.04)}

/* Mobile compact chat input */
.ww-mobile-chat{display:none;align-items:center;margin-top:8px;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}
.ww-mobile-input{flex:1 1 0%;min-width:0;width:0;height:38px;padding:0 12px;background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.25);border-radius:10px 0 0 10px;color:#fff;font-size:14px;outline:none;box-sizing:border-box}
.ww-mobile-input:focus{border-color:#38bdf8}
.ww-mobile-send{width:auto!important;max-width:80px!important;height:38px;min-height:38px!important;padding:0 16px;font-size:13px!important;font-weight:700;border-radius:0 10px 10px 0!important;background:linear-gradient(135deg,#38bdf8 0%,#2563eb 100%);color:#fff;border:none;flex-shrink:0;cursor:pointer;margin:0!important;box-sizing:border-box}

/* Full-screen settlement card (3-column Replay) */
.ww-settlement{position:absolute;top:0;left:0;right:0;bottom:0;z-index:40;background:rgba(10,6,26,0.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:stretch;padding:8px 6px;border-radius:18px;overflow:hidden;box-sizing:border-box}
.ww-settlement-card{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:660px;height:100%;max-height:100%;overflow:hidden;box-sizing:border-box}
.ww-replay-header{display:flex;flex-direction:column;align-items:center;margin-bottom:4px;width:100%;flex-shrink:0}
.ww-replay-title{font-size:12px;font-weight:800;color:#c084fc;letter-spacing:2px;text-transform:uppercase;margin-bottom:1px}
.ww-settlement-winner{font-size:20px;font-weight:850;color:#fde047;text-shadow:0 0 16px rgba(253,224,71,0.6);margin-bottom:0}
.ww-settlement-winner.wolves{color:#f87171;text-shadow:0 0 16px rgba(248,113,113,0.6)}
.ww-settlement-winner.lovers{color:#f472b6;text-shadow:0 0 16px rgba(244,114,182,0.6)}
.ww-settlement-grid.ww-replay-grid{display:flex;justify-content:space-between;align-items:stretch;width:100%;flex:1 1 0;min-height:0;overflow:hidden;margin:2px 0 4px}
.ww-replay-col{display:flex;flex-direction:column;justify-content:space-around;width:80px;flex-shrink:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ww-replay-col>.ww-settlement-player{flex-shrink:0}
.ww-settlement-player{display:flex;flex-direction:column;align-items:center;position:relative;padding:3px 2px;margin:2px 0;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:8px}
.ww-settlement-role-badge{font-size:10px;font-weight:850;color:#fff;background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.3);border-radius:8px;padding:1px 5px;margin-bottom:2px;white-space:nowrap}
.ww-settlement-avatar-wrap{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.ww-settlement-avatar-wrap .ww-seat-avatar{width:36px;height:36px;border-width:2px}
.ww-settlement-avatar-wrap .ww-settlement-role-icon{position:absolute;bottom:-2px;right:-2px;width:18px;height:18px;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.8));margin:0}
.ww-settlement-stamp{position:absolute;top:-4px;right:-6px;transform:rotate(10deg);border:1.5px solid #ef4444;color:#ef4444;font-size:9px;font-weight:900;line-height:1.1;padding:1px 3px;border-radius:3px;background:rgba(18,10,36,0.88);letter-spacing:0.5px;white-space:nowrap;pointer-events:none;box-shadow:0 0 6px rgba(239,68,68,0.4);z-index:5}
.ww-settlement-player-name{font-size:10px;font-weight:700;color:rgba(255,255,255,0.85);max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.ww-settlement-role-name{font-size:10px;color:#c084fc;font-weight:600;white-space:nowrap}
.ww-settlement-status{display:none}

/* Replay Timeline */
.ww-replay-timeline{flex:1 1 0;min-width:0;min-height:0;max-height:100%;background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.14);border-radius:12px;padding:6px 8px;margin:0 4px;overflow-y:auto;-webkit-overflow-scrolling:touch;text-align:left;display:flex;flex-direction:column}
.ww-replay-section{margin-bottom:8px}
.ww-replay-section-header{display:inline-block;font-size:10px;font-weight:800;padding:2px 6px;border-radius:8px;margin-bottom:3px}
.ww-replay-section-header.night{background:#312e81;color:#c7d2fe;border:1px solid #4338ca}
.ww-replay-section-header.day{background:#854d0e;color:#fef08a;border:1px solid #a16207}
.ww-replay-list{display:flex;flex-direction:column}
.ww-replay-row{font-size:10px;line-height:1.35;color:rgba(255,255,255,0.92);margin:2px 0;word-break:break-word}
.ww-replay-icon{margin-right:3px}
.ww-replay-out-text{color:#f87171;font-weight:700;margin-top:1px}
.ww-replay-empty{font-size:12px;color:rgba(255,255,255,0.6);text-align:center;padding:20px 0}
.ww-settlement-actions{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;width:100%;margin-top:4px;margin-bottom:2px;flex-shrink:0}
.ww-settlement-actions button{margin:0 3px;padding:6px 12px;font-size:12px;font-weight:700;border-radius:8px;white-space:nowrap;flex:1 1 0;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis}

/* Role Icon SVGs */
.role-icon-svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4))}

/* Identity Card */
.ww-arena .game-word.ww-card-active{position:absolute!important;bottom:6px!important;left:6px!important;width:48px!important;height:52px!important;min-width:48px!important;padding:4px 2px!important;border-radius:8px!important;background:linear-gradient(135deg,#2e1065 0%,#1e1b4b 50%,#0f172a 100%)!important;border:1.5px solid #a855f7!important;box-shadow:0 4px 14px rgba(0,0,0,0.6),inset 0 0 0 1.5px #4c1d95!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;font-size:11px!important;font-weight:700!important;color:#e9d5ff!important;text-align:center!important;line-height:1.25!important;cursor:pointer!important;z-index:10!important;transition:transform .2s ease,width .2s ease,height .2s ease!important}
.ww-arena .game-word.ww-card-active:hover{transform:translateY(-2px)!important;box-shadow:0 6px 18px rgba(168,85,247,0.4),inset 0 0 0 1.5px #6b21a8!important}
.ww-arena .game-word.ww-card-active.open{width:200px!important;height:auto!important;min-height:180px!important;max-width:240px!important;padding:12px 10px!important;border-radius:12px!important;background:linear-gradient(135deg,#1e1b4b 0%,#0f172a 100%)!important;border:2px solid #818cf8!important;box-shadow:0 12px 36px rgba(0,0,0,0.85),0 0 20px rgba(129,140,248,0.3)!important;font-size:13px!important;line-height:1.45!important;color:#fff!important;z-index:35!important}
.ww-table.ww-list-mode{min-height:0!important}
.ww-table.ww-list-mode .game-word.ww-card-active{position:relative!important;bottom:auto!important;left:auto!important;width:auto!important;min-width:120px!important;height:auto!important;min-height:48px!important;margin:8px auto!important;padding:10px 18px!important}

/* Mobile layout adjustments */
@media(max-width:600px){
  .ww-table{min-height:420px;padding:8px 4px}
  .ww-arena{min-height:330px}
  .ww-seats-col{width:105px}
  .ww-seats-left{padding-bottom:60px}
  .ww-seat-avatar-wrap{width:54px;height:54px}
  .ww-seat-avatar{width:52px;height:52px}
  .ww-ring{width:56px;height:56px}
  .ww-name-short{display:inline}
  .ww-name-full{display:none}
  .ww-seat-name-bar{max-width:48px;min-width:32px;font-size:11px;padding:3px 6px;text-align:center}
  .ww-stage-title{font-size:16px;white-space:nowrap}
  .ww-stage-sub{font-size:11px;white-space:nowrap}
  .ww-mobile-chat{display:flex}
  .ww-pass-button{padding:8px 18px;font-size:13px}
  .ww-settlement-player{width:68px;padding:2px}
  .ww-settlement-role-badge{display:none}
  .ww-settlement-avatar-wrap{width:38px;height:38px}
  .ww-settlement-avatar-wrap .ww-seat-avatar{width:34px;height:34px}
  .ww-settlement-role-icon{width:16px;height:16px}
  .ww-settlement-winner{font-size:18px}
  .ww-replay-col{width:70px}
  .ww-settlement-actions button{padding:6px 10px;font-size:12px}
}
@media(max-width:360px){
  .ww-table{padding:6px 0;min-height:400px;overflow:hidden;box-sizing:border-box}
  .ww-top-bar{padding:0 2px;max-width:100%;overflow:hidden;box-sizing:border-box}
  .ww-mode-badge{font-size:10px;padding:2px 4px;margin-right:2px}
  .ww-judge-badge{font-size:10px;padding:2px 4px}
  .ww-view-toggle{font-size:10px;padding:2px 4px}
  .ww-arena{max-width:100%;overflow:hidden;box-sizing:border-box}
  .ww-seats-col{width:82px;max-width:82px;flex:0 0 82px}
  .ww-seats-left{padding-bottom:58px}
  .ww-seat-avatar-wrap{width:52px;height:52px}
  .ww-seat-avatar{width:50px;height:50px}
  .ww-ring{width:54px;height:54px}
  .ww-seat-name-bar{max-width:44px;min-width:26px;font-size:10px;padding:2px 4px;text-align:center}
  .ww-stage{margin:0;padding:2px 1px;flex:1;min-width:0;max-width:calc(100% - 164px);overflow:hidden}
  .ww-stage-title{font-size:14px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .ww-stage-sub{font-size:10px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .ww-seat-bubble{min-width:86px;max-width:135px;font-size:10px;padding:4px 6px}
  .ww-seat-bubble.bubble-shift-up{top:-46px;bottom:auto}
  .ww-seat-bubble.bubble-shift-down{top:auto;bottom:-36px}
  .ww-replay-col{width:60px}
  .ww-settlement-player{width:58px}
  .ww-settlement-actions{gap:4px}
  .ww-settlement-actions button{padding:5px 8px;font-size:11px}
}