*{box-sizing:border-box}[hidden]{display:none!important}
:root{color-scheme:light;font-family:system-ui,sans-serif;color:#3f3024;background:#30271f}
body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at top,#63503c,#30271f 70%)}
.shell{display:grid;grid-template-columns:86px minmax(0,1fr);width:min(960px,100%);height:min(780px,calc(100dvh - 48px));border:1px solid #9c7b52;border-radius:18px;overflow:hidden;box-shadow:0 16px 60px #1a120d99}
aside{display:flex;flex-direction:column;align-items:center;gap:12px;padding:19px 8px;background:#72583f;color:#f7e8cf;text-align:center;font-weight:700}
aside img{width:50px}aside button{margin-top:auto;background:#4c3928;font-size:20px}
.room{display:flex;flex-direction:column;min-height:0;background:#ede4d5}
header{padding:18px 24px;background:#ddccb0;border-bottom:1px solid #ba9d75}
h1,h2,p{margin:0}h1{font-size:24px;margin:3px 0}h2{font-size:20px}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.18em;color:#695137}
#status,.hint{font-size:13px;color:#675847}
#messages{flex:1;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:16px}
.message{display:flex;flex:none;align-items:flex-start;gap:9px}.message.mine{flex-direction:row-reverse}.mine .content{align-items:flex-end}
.content{max-width:min(78%,550px);display:flex;flex-direction:column;gap:4px}.meta{font-size:12px;color:#66543d}
.badge{display:grid;place-items:center;width:37px;height:37px;flex:none;border-radius:50%;border:2px solid #ad8d5e;background:#6b5139;color:#fff3dd;object-fit:cover}
.bubble{padding:9px 13px;background:#fffaf0;border:1px solid #dfd0b9;border-radius:4px 13px 13px;white-space:pre-wrap;overflow-wrap:anywhere}.mine .bubble{background:#e3cfac;border-radius:13px 4px 13px 13px}
.picture{display:block;max-width:100%;max-height:320px;border-radius:8px}.empty{margin:auto;color:#74624c;text-align:center}
#composer{padding:12px;background:#d7c2a2;border-top:1px solid #ba9d75}
.row{display:flex;align-items:center;gap:8px}.row input,.row h2{flex:1;min-width:0}
input,button,.button{font:inherit;border-radius:8px;padding:9px 12px}
input{border:1px solid #b69a74;background:#fffaf0;color:#3f3024;width:100%}
button,.button{border:0;background:#62472d;color:#fff6e6;cursor:pointer;white-space:nowrap}button:disabled{opacity:.6}
.attach input{position:absolute;width:1px;height:1px;opacity:0;padding:0}.attach:focus-within{outline:2px solid #30271f}
#attachment{padding-bottom:8px;display:flex;gap:8px;align-items:center}#filename{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login{margin:auto;width:min(90%,320px);display:grid;gap:13px}
dialog{width:min(420px,calc(100% - 24px));border:1px solid #a78660;border-radius:14px;background:#f5ebdb;color:inherit;padding:20px}dialog::backdrop{background:#251a12aa}
#profile{display:grid;gap:10px}label input{display:block;margin-top:4px}
dialog p{margin:8px 0}#error,#dialogError{color:#8b281b;font-size:13px}#error{padding:7px 13px}
@media(max-width:600px){body{padding:0}.shell{height:100dvh;border:0;border-radius:0;grid-template-columns:56px minmax(0,1fr)}aside img{width:38px}aside span{font-size:12px}header,#messages{padding:14px}#composer{padding-bottom:max(10px,env(safe-area-inset-bottom))}input{font-size:16px}}

/* Message styling follows the reference game's guild chat. */
#messages{background:#eee8dc}
.message{gap:17px;min-height:76px}
.badge{width:70px;height:70px;border:3px double #59616a;box-shadow:0 1px 3px #30271f66;background:#fffdf8;color:#8c6729;font-size:25px;font-weight:800}
.content{min-width:0;max-width:min(calc(100% - 87px),550px);align-items:flex-start;gap:3px}
.meta{display:flex;align-items:center;gap:6px;max-width:100%;min-height:26px;white-space:nowrap}
.level{display:grid;place-items:center;width:22px;height:26px;flex:none;padding-bottom:3px;background:#385ab4;color:#ffe7a0;clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);font-size:16px;font-weight:900}
.sender{overflow:hidden;text-overflow:ellipsis;color:#795d43;font-size:18px;font-weight:900;letter-spacing:-.035em}
.guild-mark{display:grid;place-items:center;width:18px;height:19px;flex:none;background:#cda000;color:#fff8d3;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);font-size:12px;font-weight:900}
.message-time{color:#a79a86;font-size:16px;font-weight:600}
.bubble,.mine .bubble{position:relative;padding:8px 11px;min-height:38px;background:#fff;border:0;border-radius:0 9px 9px 9px;color:#766c60;font-size:16px;font-weight:700;line-height:22px}
.mine .bubble{border-radius:9px 0 9px 9px;margin-right:2px}
.bubble::before{content:'';position:absolute;top:0;left:-10px;border:6px solid transparent;border-top-color:#fff;border-right-color:#fff}
.mine .bubble::before{left:auto;right:-10px;border-right-color:transparent;border-left-color:#fff}
@media(max-width:480px){.message{gap:11px}.badge{width:46px;height:46px;font-size:19px}.content{max-width:calc(100% - 57px)}.meta{gap:4px}.sender{font-size:16px}.message-time{font-size:13px}}

.chat-nav{gap:12px;padding:12px 0 18px 6px;background:#9e8871}
.chat-nav .nav-tile{margin:0;display:grid;justify-items:center;align-content:center;gap:4px;width:100%;min-height:65px;padding:6px 2px;border-radius:9px 0 0 9px;background:#b19b83;color:#513e2a;font:700 14px system-ui,sans-serif}
.chat-nav .nav-tile svg{width:34px;height:34px;fill:currentColor}
.chat-nav .active,.chat-nav .nav-tile:nth-child(5){background:#d4c0a4}
.chat-nav .nav-muted{margin-top:auto;background:transparent}
.room header{padding:7px 0 0;background:#eee8dc}
.partner{display:flex;align-items:center;gap:9px;width:min(210px,calc(100% - 20px));min-height:47px;margin:0 0 6px 6px;padding:6px 13px;border-radius:24px;background:linear-gradient(#503e2a,#9d876e);color:#f3e6d4;font-size:17px}
.partner span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.partner img{width:34px;height:34px;object-fit:cover;border-radius:50%}
.room-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:43px;padding:4px 12px;background:#fff}
.room-bar #status{font-size:16px;font-weight:700;overflow-wrap:anywhere}
.room-bar button{padding:3px 8px;font-size:18px}
.message-file{display:flex;align-items:flex-start;gap:6px;max-width:100%;min-width:0}
.image-preview{min-width:0}
.file-name{min-width:0;overflow-wrap:anywhere;background:#fff;border-radius:8px;padding:8px}
.download{flex:none;font-size:12px;text-decoration:none;padding:6px 7px}
@media(max-width:480px){.chat-nav .nav-tile{min-height:51px;font-size:11px}.chat-nav .nav-tile svg{width:25px;height:25px}}

.partner-title{margin:0}.partner{border:0;touch-action:manipulation}
.chat-nav button.nav-muted{margin-top:auto;background:transparent}
.chat-confirm{width:min(620px,calc(100% - 20px));max-width:none;padding:0;border:2px solid #a58964;border-radius:6px;background:#ded2bf;color:#5c4935;box-shadow:0 3px 0 #74573c,0 10px 35px #21170888}
#confirmTitle{padding:10px 18px;background:linear-gradient(110deg,#252859,#384578,#191e50);color:#fff4db;font-size:22px;font-style:italic;font-weight:900}
.chat-confirm form{padding:16px}
#confirmText{display:grid;place-items:center;min-height:clamp(125px,30dvh,210px);margin:0 0 14px;border:4px double #bfb19c;background:#ded5c7;text-align:center;white-space:pre-line;font-size:clamp(14px,3.6vw,18px);font-weight:750;padding:12px}
.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,4vw,30px)}
.confirm-actions button{min-height:52px;border:2px outset #b96b53;background:linear-gradient(#b9684f,#8d301d);color:#ffdbce;font-size:20px;font-weight:900}
.confirm-actions button[value=yes]{border-color:#6977c8;background:linear-gradient(#6470ba,#304392);color:#e3e6ff}

.room-bar .exit-chat{display:grid;place-items:center;flex:none;padding:2px 0 2px 4px;background:transparent;color:#53412f}.exit-chat svg{display:block;width:34px;height:34px}

.chat-nav #settings span{font-size:40px;line-height:1}
@media(max-width:480px){.chat-nav #settings span{font-size:31px}}

.shell:has(#login:not([hidden])){position:relative;display:block;width:min(1180px,100%);height:auto;min-height:360px;aspect-ratio:1180 / 666;background:#151c35 url('/login-background.png') center/contain no-repeat;border-color:#344365}
.shell:has(#login:not([hidden])) .chat-nav,.shell:has(#login:not([hidden])) header{display:none}
.shell:has(#login:not([hidden])) .room{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding:0 18px clamp(24px,6%,72px);background:transparent}
#login{width:min(420px,100%);margin:0;padding:clamp(18px,3vw,32px);gap:14px;background:linear-gradient(#1e2646,#2b3858);border:1px solid #4d5c80;border-radius:4px;box-shadow:0 12px 32px #111a3c9c}
.login-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#login input{min-height:46px;margin:0;border:1px solid transparent;border-radius:4px;background:#374667;color:#f0f5ff;text-align:center;font-size:16px}
#login input::placeholder{color:#aebdd8}
#login button{min-height:48px;margin-top:8px;border:1px solid #758eaf;border-radius:4px;background:#6083b1;color:#fff;font-size:18px;font-weight:800}
#login input:focus-visible,#login button:focus-visible{outline:2px solid #c7dcff;outline-offset:2px}
.shell:has(#login:not([hidden])) #error{max-width:min(420px,100%);margin-top:8px;background:#321d35;color:#ffdfdc;border-radius:4px;text-align:center}
@media(max-width:600px){
.shell:has(#login:not([hidden])){min-height:0;border:0}
}
@media (orientation:landscape) and (max-height:540px) and (pointer:coarse){
body{padding:0}
.shell{width:100%;height:100dvh;border:0;border-radius:0;grid-template-columns:56px minmax(0,1fr)}
.chat-nav{gap:4px;padding:4px 0 4px 4px;overflow-y:auto}
.chat-nav .nav-tile{min-height:34px;gap:2px;padding:3px 2px;font-size:10px}
.chat-nav .nav-tile svg{width:18px;height:18px}
.chat-nav #settings span{font-size:26px}
.partner{min-height:32px;margin-bottom:3px;padding-block:3px;font-size:15px}
.partner img{width:24px;height:24px}
.room-bar{min-height:32px;padding-block:0}
.exit-chat svg{width:26px;height:26px}
#messages{padding:8px 14px}
#composer{padding:5px 8px max(5px,env(safe-area-inset-bottom))}
#composer input{font-size:16px}
}
@media (max-width:600px), (orientation:landscape) and (max-height:540px) and (pointer:coarse){
body:has(#login:not([hidden])){background:#151c35}
.shell:has(#login:not([hidden])){width:min(100%,calc(100svh * 1180 / 666));height:auto;min-height:0;aspect-ratio:1180 / 666;container-type:inline-size;overflow:visible;background-size:100% 100%}
.shell:has(#login:not([hidden])) .room{justify-content:flex-end;padding:0 8px 6cqw}
#login{width:min(100%,clamp(225px,57cqw,420px));padding:clamp(8px,3cqw,24px);gap:clamp(5px,1.8cqw,14px)}
#login input,#login button{min-height:clamp(32px,6.3cqw,48px);padding-block:3px;font-size:16px}
#login button{margin-top:clamp(0px,1cqw,8px)}
.shell:has(#login:not([hidden])) #error{position:absolute;top:100%;margin:4px 0 0}
}

.avatar-frame{display:grid;place-items:center;flex:none;border:0;border-radius:50%;overflow:hidden;background:#646b72 url('/avatar-frame.png') 50% 21% / 116% 113% no-repeat}
.avatar-frame>img,.avatar-frame>span{display:grid;place-items:center;width:85%;height:85%;min-width:0;border-radius:50%;background:#fffdf8;object-fit:cover}
.partner .avatar-frame{width:34px;height:34px;overflow:hidden}
@media (orientation:landscape) and (max-height:540px) and (pointer:coarse){.partner .avatar-frame{width:24px;height:24px}}

.shell.nav-collapsed{grid-template-columns:minmax(0,1fr)}
.chat-nav .nav-toggle,#expandNav{display:grid;place-items:center;flex:none;min-width:34px;min-height:40px;padding:0 8px;font-size:24px;line-height:1}
.chat-nav:has(#collapseNav){padding-bottom:12px;overflow-y:auto}
.chat-nav #collapseNav{margin:0 4px 0 0;background:#6b533b}
.chat-nav #settings{flex:none;margin-top:auto}
@media(max-width:600px){.chat-nav:has(#collapseNav){padding-bottom:max(10px,env(safe-area-inset-bottom))}}
@media (max-width:600px), (orientation:landscape) and (max-height:540px) and (pointer:coarse){
.shell:has(#composer:not([hidden])){width:calc(100% - 12px);height:calc(100dvh - 12px);border:1px solid #a68e70;border-radius:14px}
}
@media (orientation:landscape) and (max-height:540px) and (pointer:coarse){
.chat-nav .nav-toggle,#expandNav{min-height:34px}
.chat-nav:has(#collapseNav){padding-bottom:max(5px,env(safe-area-inset-bottom))}
}

.profile-preview{display:grid;justify-items:center;gap:8px;color:#675847;font-size:13px;font-weight:700}
.profile-preview .badge{width:78px;height:78px}

.sound-settings{margin-top:14px}.sound-settings label{display:block;font-size:14px;font-weight:700;margin-bottom:5px}.sound-settings select{flex:1;min-width:0;padding:8px;border:1px solid #b69a74;border-radius:8px;background:#fffaf0;color:inherit;font:inherit}