@font-face{font-family:Chicano;src:url('assets/fonts/chicano-fino.ttf')}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#58172d66,transparent 650px),#0e0a0e;color:#fff1d8;font:15px/1.55 Arial,sans-serif}.community{max-width:820px;margin:auto;padding:20px 18px max(28px,env(safe-area-inset-bottom))}header,.follow-line,.room-heading,.composer-bottom,.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:12px}header{margin-bottom:26px}a{color:#efc880;text-decoration:none}button{cursor:pointer;border:1px solid #bb894f;background:linear-gradient(130deg,#492134,#24141d);color:#ffe4ac;border-radius:12px;min-height:44px;padding:10px 16px;font:700 14px/1.4 Arial,sans-serif;touch-action:manipulation}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #ffe5a5;outline-offset:3px}.welcome{text-align:center}.eyebrow{color:#d7ad76;letter-spacing:.16em;font-size:11px}h1{font:46px/1.15 Chicano,Georgia,serif;margin:16px 0}h1 em{display:block;font-style:normal;color:#f5d18f;text-shadow:0 4px 16px #c01262}.welcome p{color:#d0b6bf}.follow-line{justify-content:center;flex-wrap:wrap;margin:24px 0 6px}.follow-line span{font-size:12px;color:#ceb8bf}.follow-line b{display:block;font-size:25px;color:#f6d598}#follow{box-shadow:0 0 0 3px #6c293d55,0 0 24px #bb255a55;background:linear-gradient(115deg,#f4d693,#bf8547);color:#26101a;animation:crown-light 4s ease-in-out infinite}#follow[aria-pressed=true]{background:#3d2939;color:#ffe0a1}.tabs{display:flex;gap:8px;margin:25px 0 12px}.tabs button{flex:1;font-size:13px;background:#1c111a;border-color:#5e3445}.tabs button[aria-pressed=true]{border-color:#f4d293;box-shadow:0 3px 15px #8d174755}.room{border:1px solid #a77c50;border-radius:20px;padding:20px;background:#171018dc;box-shadow:0 0 30px #6e153733}.room h2{margin:0;font-size:20px}.room-heading small,#room-info,.rules{color:#bea5ad;font-size:12px}#refresh{font-size:11px;padding:8px}.status{font-size:13px;color:#edca8f;min-height:20px}#messages{max-height:47dvh;min-height:180px;overflow:auto;overscroll-behavior:contain;padding:6px 3px;scrollbar-color:#845162 #20121c}.message{border:1px solid #63324966;border-radius:15px 15px 15px 3px;padding:12px 14px;margin:10px 0;background:#271725}.message.own{background:#3a2430;border-color:#b18b5266;border-radius:15px 15px 3px 15px}.message strong{color:#f4d18c;font-size:13px}.message time{font-size:10px;color:#c2a4af;margin-left:10px}.message p{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0;font-size:14px}.message button{min-height:30px;padding:4px 8px;font-size:10px;background:none;border-color:#7b4e5b}.empty{text-align:center;padding:40px 10px;color:#c6aab4}label{display:block;font-size:12px;color:#e5c395;margin:12px 0 6px}input,textarea{display:block;width:100%;font:16px/1.5 Arial,sans-serif;color:#fff0db;background:#100c12;border:1px solid #704153;border-radius:10px;padding:12px;resize:vertical}textarea{min-height:90px;max-height:220px}.composer-bottom{margin-top:10px}.composer-bottom small{font-size:11px;color:#ba9caa}#older{display:block;margin:10px auto}.rules{margin-bottom:0}footer{text-align:center;font-size:11px;color:#ad8f9c;padding:24px 0}dialog{width:min(440px,calc(100% - 28px));max-height:90dvh;overflow:auto;color:#f7e5cf;background:#21131e;border:1px solid #daa96c;border-radius:20px;padding:24px;box-shadow:0 0 60px #a41c5355}dialog::backdrop{background:#09070cdd;backdrop-filter:blur(6px)}dialog h2{margin:0;font-size:24px}dialog p{font-size:13px;color:#d1b3bf}#close-auth{font-size:24px;padding:0 12px}#auth-tabs{display:flex;gap:8px}#auth-tabs button{flex:1;font-size:12px}#auth-tabs button[aria-pressed=true]{background:#b98d55;color:#1a0b15}#auth-submit{width:100%;margin-top:14px}#auth-error{color:#ffacbf} [hidden]{display:none!important}@keyframes crown-light{50%{box-shadow:0 0 0 3px #94435d66,0 0 30px #c3437266}}@media(max-width:420px){.community{padding:14px 12px}.room{padding:15px}.tabs button{padding:10px 8px}h1{font-size:40px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* Futuristic community skin: light stays at the edges, away from the conversation. */
@property --frame-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
body{background:radial-gradient(ellipse at 50% 0,#681d3e66,transparent 650px),linear-gradient(#bc577008 1px,transparent 1px),linear-gradient(90deg,#bc577008 1px,transparent 1px),#0e0a0e;background-size:auto,38px 38px,38px 38px,auto}
.community{padding-top:22px}
.welcome{position:relative;padding:27px 20px 20px;border:1px solid #a3695366;border-radius:28px 8px 28px 8px;background:radial-gradient(ellipse at 50% 0,#7a234b55,transparent 75%),linear-gradient(145deg,#24131fe8,#120d14f5);box-shadow:inset 0 0 40px #a91f4211,0 15px 45px #0004;isolation:isolate}
.welcome:before{content:'';position:absolute;left:18%;right:18%;top:-1px;height:2px;background:linear-gradient(90deg,transparent,#d64a7b,#ffe0a1,#c22b61,transparent);background-size:200% 100%;box-shadow:0 0 14px #ed477b88;animation:panel-signal 5s ease-in-out infinite;pointer-events:none}
.welcome:after{content:'✦';position:absolute;right:16px;bottom:13px;font-size:17px;color:#edbd86;opacity:.6;pointer-events:none}
.welcome h1{text-shadow:0 0 28px #a32d5244}.welcome h1 em{text-shadow:0 2px 8px #bc285b,0 0 30px #92204a55}
.welcome .eyebrow{font-size:10px;line-height:1.7;letter-spacing:.13em}
.room{position:relative;isolation:isolate;border-color:#bb865f88;border-radius:24px 8px 24px 8px;background:linear-gradient(150deg,#231521f7,#140e17fa 45%,#21101cf7);box-shadow:0 0 24px #9b204b33,0 18px 45px #0005;overflow:visible}
.room:before{content:'';position:absolute;inset:-2px;padding:2px;border-radius:inherit;background:conic-gradient(from var(--frame-angle),#9b305c44 0deg,#9b305c44 65deg,#d84d7888 92deg,#ffe5ac 105deg,#b6326255 125deg,#82405d44 230deg,#ebba7888 265deg,#f9d995 280deg,#7e254844 300deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;animation:frame-circuit 8s linear infinite}
.room:after{content:'';position:absolute;inset:8px;border-radius:18px 4px 18px 4px;border:1px solid #d2a36b15;pointer-events:none}
.room-heading{position:relative;padding-bottom:16px;border-bottom:1px solid #a36a5944;margin-bottom:14px;gap:8px}
.room-heading:after{content:'';position:absolute;left:0;bottom:-1px;width:38%;height:2px;background:linear-gradient(90deg,transparent,#edbe83,#d64777,transparent);animation:heading-signal 6s ease-in-out infinite;pointer-events:none}
.room h2{font-size:20px;color:#ffe5ba;text-shadow:0 0 15px #c9426744}
#messages{border:1px solid #77445844;border-radius:13px;background:#0d0a1155;padding:10px;box-shadow:inset 0 0 24px #0003}
#messages>.empty,#messages>p{font-size:13px;line-height:1.7;color:#cbb3bd}
.message{box-shadow:inset 3px 0 #af547c44}.message.own{box-shadow:inset 3px 0 #eac17d55}
button{position:relative;isolation:isolate;overflow:hidden;border-radius:13px 5px 13px 5px;transition:box-shadow .2s,transform .2s,border-color .2s}
button:not(:disabled):not(.message button):after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 25%,#ffdeb827 49%,transparent 65%);background-size:320% 100%;background-position:100% 0;pointer-events:none;animation:button-signal 6s ease-in-out infinite}
button:nth-child(even):after{animation-delay:1.6s!important}
button:not(:disabled):hover{border-color:#f6d696;box-shadow:0 0 18px #bc3f7155}
button:not(:disabled):active{transform:scale(.97)}
.tabs{gap:10px;margin-top:24px;margin-bottom:18px}
.tabs button{min-height:54px;border-color:#89475f;background:linear-gradient(145deg,#291322,#190f1b);box-shadow:inset 0 0 16px #97314e11}
.tabs button[aria-pressed=true]{border-color:#e9bc83;background:linear-gradient(135deg,#6c2345,#32152b);color:#ffebc2;box-shadow:0 0 14px #b43d6e44,inset 0 -2px #efcc8c99}
#follow{border-radius:16px 5px 16px 5px;box-shadow:0 0 0 3px #6c293d44,0 0 22px #bb255a44}
#send,#auth-submit{background:linear-gradient(120deg,#eac88b,#f7dda8,#bc874d);color:#28101c;border-color:#ffe5b0}
#send:disabled{background:linear-gradient(130deg,#492134,#24141d);color:#d9b78b}
input,textarea{transition:border-color .2s,box-shadow .2s;background:#100b13dd}
input:focus,textarea:focus{border-color:#e5bd80;box-shadow:0 0 14px #bb356044}
dialog{border-radius:24px 8px 24px 8px;background:radial-gradient(at top right,#70274455,transparent 65%),#21131e;box-shadow:0 0 0 4px #8b325622,0 0 45px #a41c5344}
.back{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
footer{letter-spacing:.04em}
@keyframes frame-circuit{to{--frame-angle:360deg}}
@keyframes panel-signal{50%{background-position:100% 0;opacity:.6}}
@keyframes heading-signal{50%{transform:translateX(155%)}}
@keyframes button-signal{0%,15%{background-position:100% 0}75%,100%{background-position:0 0}}
@media(max-width:420px){.welcome{padding:24px 14px 18px}.welcome h1{font-size:39px}.room{padding:17px 14px}.room-heading small{font-size:10px}.tabs button{font-size:12px;padding:10px 7px}#messages{padding:8px}.community{padding:14px 12px max(28px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.room:before{--frame-angle:105deg}}
