:root{--silver:#c0c0c0;--navy:#000080;--desk:#008080;--ink:#101010;--paper:#fffdf4;--side:#ececec;font-family:"MS Sans Serif",Tahoma,Arial,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;min-height:100%;background:var(--desk);color:#000;font-size:13px}button,input,textarea,select{font:inherit}button{cursor:pointer}.win{background:var(--silver);border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:1px 1px 0 #808080}.titlebar{height:27px;background:linear-gradient(90deg,#000080,#1084d0);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 5px}.win-controls{font-family:monospace;letter-spacing:5px;background:#c0c0c0;color:#000;border:1px solid #fff;padding:1px 2px 1px 6px}.menubar{height:29px;display:flex;align-items:center;gap:16px;padding:2px 8px;border-bottom:1px solid #808080}.menubar button{background:transparent;border:0;padding:4px 2px}.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-window{width:min(470px,100%)}.auth-body{padding:18px}.brand{display:flex;align-items:center;gap:15px;margin-bottom:18px}.brand-mark{width:66px;height:58px;border:3px solid #111;border-radius:50%;background:#ffe84c;display:grid;place-items:center;font:900 26px Georgia;box-shadow:4px 4px 0 #111;transform:rotate(-4deg)}.brand b{display:block;font:italic 700 27px Georgia}.brand small{display:block;margin-top:4px}.tabs{display:flex;margin-bottom:12px}.tab{border:2px outset #fff;background:#c0c0c0;padding:7px 14px}.tab.active{background:#fff}.auth-body label{display:block;font-weight:700;margin:10px 0}.auth-body input{width:100%;display:block;margin-top:4px;padding:7px;border:2px inset #fff;background:#fff}.auth-body fieldset{margin:12px 0}.avatar-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.avatar-choice{height:72px;background:#fff;border:2px outset #ddd;overflow:hidden;position:relative}.avatar-choice.selected{outline:3px solid var(--navy);outline-offset:-4px}.avatar-choice svg{width:62px;height:72px}.dialog-actions{text-align:right}.win-btn{padding:7px 14px;min-width:78px;border:2px outset #fff;background:#c0c0c0}.win-btn:active{border-style:inset}.primary{font-weight:700}.error{min-height:18px;color:#a00000;font-weight:700}.auth-note{font-size:11px;border-top:1px solid #888;padding-top:10px;margin-bottom:0}.desktop{padding:10px;min-height:100vh}.app-window{width:min(1500px,100%);margin:0 auto}.toolbar{height:48px;display:flex;align-items:center;padding:3px 5px;border-bottom:2px groove #fff;gap:3px}.tool{height:40px;min-width:60px;border:1px solid transparent;background:transparent;display:grid;place-items:center;grid-template-rows:20px 13px}.tool.active,.tool:active{border:2px inset #fff;background:#ddd}.tool-icon{font-size:18px}.tool span:last-child{font-size:10px}.toolbar-space{flex:1}.me-status{display:flex;align-items:center;gap:5px;padding-right:7px}.me-status i{width:8px;height:8px;border-radius:50%;background:#00a000;border:1px solid #075507}.workspace{display:grid;grid-template-columns:205px minmax(0,1fr) 220px;height:calc(100vh - 143px);min-height:560px}.side{background:var(--side);border:2px inset #fff;overflow:auto}.pane-head{position:sticky;top:0;z-index:4;background:#000080;color:#fff;font-weight:700;padding:5px 6px}.private-head{margin-top:6px}.side-note{padding:8px;font-size:11px;color:#444}.room-list button{display:block;width:100%;border:0;border-bottom:1px dotted #aaa;background:transparent;text-align:left;padding:7px}.room-list button.active{background:#000080;color:#fff}.chat-area{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;border-block:2px inset #fff;background:#9a9a9a}.chat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#eee;border-bottom:1px solid #888;padding:6px 9px}.chat-head b,.chat-head small{display:block}.chat-head small{font-size:10px;color:#444}.chat-head>span{font-size:10px;color:#555}.comic-viewport{min-height:0;overflow:auto;background:#777;padding:16px}.comic-page{width:min(100%,1080px);min-height:100%;margin:0 auto;background:#fffdf2;border:1px solid #7a725f;box-shadow:0 0 0 1px #bbb;padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}.comic-title{grid-column:1/-1;border:4px solid #111;background:#fff;padding:16px 18px;min-height:96px;display:flex;justify-content:space-between;align-items:end;gap:16px;font-family:"Comic Sans MS","Trebuchet MS",sans-serif}.comic-title h2{margin:0;font-size:26px;letter-spacing:-1px}.comic-title p{margin:3px 0 0;font-size:11px}.comic-title .starring{text-align:right;font-size:11px}.comic-title .starring b{display:block;font-size:13px}.comic-empty{grid-column:1/-1;border:4px solid #111;background:#fff;padding:36px;text-align:center;font:700 18px "Comic Sans MS","Trebuchet MS",sans-serif}.panel{position:relative;min-height:315px;overflow:hidden;border:4px solid #111;background:#f1eee1;isolation:isolate}.panel.wide{grid-column:1/-1;min-height:350px}.panel:before{content:"";position:absolute;inset:0;z-index:-5;opacity:.55}.panel.bg-room:before{background:linear-gradient(180deg,#eee 0 65%,#d3c9b2 65%),repeating-linear-gradient(90deg,transparent 0 76px,#0001 76px 78px)}.panel.bg-field:before{background:linear-gradient(#dcecff 0 55%,#d8e9b9 55%),repeating-linear-gradient(160deg,transparent 0 30px,#73965b40 30px 32px)}.panel.bg-space:before{background:radial-gradient(circle at 15% 22%,#fff 0 1px,transparent 2px),radial-gradient(circle at 72% 15%,#fff 0 1px,transparent 2px),radial-gradient(circle at 45% 35%,#fff 0 1px,transparent 2px),#2d3147}.panel.bg-yellow:before{background:#fff2ac;background-image:radial-gradient(#7f6b1c33 1px,transparent 1px);background-size:7px 7px}.panel-number{position:absolute;left:6px;bottom:5px;z-index:20;background:#111;color:#fff;padding:2px 5px;font:700 9px Arial}.actor{position:absolute;bottom:0;z-index:5;transform-origin:bottom center}.actor svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(1px 1px 0 #fff)}.actor-name{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);background:#fff;border:2px solid #111;padding:2px 5px;font:700 9px Arial;white-space:nowrap;z-index:7}.bubble{position:absolute;z-index:12;background:#fff;border:3px solid #111;padding:11px 15px;text-align:center;font:700 14px/1.22 "Comic Sans MS","Trebuchet MS",Arial,sans-serif;unicode-bidi:plaintext;overflow-wrap:anywhere;box-shadow:1px 1px 0 #fff}.bubble.say,.bubble.whisper{border-radius:50%}.bubble.whisper{border-style:dashed;color:#333}.bubble.think{border-radius:48%}.bubble.think:after,.bubble.think:before{content:"";position:absolute;border:3px solid #111;border-radius:50%;background:#fff}.bubble.think:after{width:12px;height:12px;bottom:-18px}.bubble.think:before{width:6px;height:6px;bottom:-29px}.bubble.action{border-radius:0;background:#fffbe1;font-style:italic}.tail{position:absolute;z-index:11;width:0;height:0;border-style:solid;filter:drop-shadow(0 1px 0 #111)}.transcript-feed{min-height:0;overflow:auto;background:#fff;padding:8px;font:13px/1.45 "Courier New",monospace}.trans-row{padding:4px 6px;border-bottom:1px dotted #bbb;unicode-bidi:plaintext}.trans-row strong{color:#000080}.typing{height:21px;background:#eee;padding:3px 7px;font-size:10px;color:#555}.composer{display:grid;grid-template-columns:82px 90px minmax(0,1fr) 72px;gap:4px;padding:5px;background:#c0c0c0;border-top:2px groove #fff}.composer select,.composer textarea{border:2px inset #fff;background:#fff}.composer textarea{resize:none;min-width:0;padding:6px;font-size:16px}.send{font-weight:700;min-width:0}.count{padding:4px 6px;font-size:10px;border-bottom:1px solid #aaa}.people-list{padding:2px}.person{width:100%;border:0;border-bottom:1px dotted #aaa;background:transparent;text-align:left;padding:6px;display:grid;grid-template-columns:10px 34px minmax(0,1fr);align-items:center;gap:5px}.person .dot{width:8px;height:8px;border-radius:50%;background:#888}.person.online .dot{background:#00a000}.person svg{width:32px;height:34px}.person small{display:block;color:#666}.statusbar{height:23px;display:flex;align-items:center;justify-content:space-between;padding:2px 5px;border-top:2px groove #fff;font-size:10px}.toast{position:fixed;right:14px;bottom:14px;max-width:340px;background:#ffffdd;border:2px solid #111;padding:9px;box-shadow:4px 4px 0 #111;display:none;z-index:100}
@media(max-width:950px){.desktop{padding:0}.app-window{border-width:0}.workspace{grid-template-columns:1fr;height:calc(100vh - 128px);min-height:0}.side{display:none}.side.mobile-open{display:block;position:fixed;z-index:80;top:104px;bottom:22px;width:min(82vw,300px);box-shadow:5px 0 0 #000}.rooms-pane.mobile-open{left:0}.people-pane.mobile-open{right:0}.app-menu{display:none}.comic-viewport{padding:7px}.comic-page{padding:8px;grid-template-columns:1fr;gap:7px}.comic-title,.panel.wide,.panel{grid-column:1}.panel{min-height:330px}.composer{grid-template-columns:72px 76px minmax(0,1fr) 64px;padding:4px}.statusbar{display:none}}
@media(max-width:520px){.toolbar{height:47px}.tool{min-width:52px}.comic-page{border:0;box-shadow:none}.comic-title{min-height:78px;padding:10px}.comic-title h2{font-size:20px}.panel,.panel.wide{min-height:315px}.bubble{font-size:12px;padding:9px 10px}.composer{grid-template-columns:72px 72px 1fr 58px}.composer select{font-size:11px}.me-status{font-size:10px}}

/* Original Microsoft Comic Chat backdrops (MIT source archive) */
.panel.bg-room:before{background-image:linear-gradient(#ffffff12,#ffffff12),url('original/room.bmp');background-size:cover;background-position:center;opacity:.78}
.panel.bg-field:before{background-image:linear-gradient(#ffffff18,#ffffff18),url('original/field.bmp');background-size:cover;background-position:center;opacity:.78}
.panel.bg-yellow:before{background-image:linear-gradient(#fff4,#fff4),url('original/pastoral.bmp');background-size:cover;background-position:center;opacity:.72}

/* dComic v5 - Comic Chat style comic surface */
.comic-viewport{background:#d8d8d8;padding:10px}
.comic-page{width:min(100%,1180px);margin:0 auto;background:#fff;border:0;box-shadow:none;padding:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;align-content:start}
.comic-title{display:none!important}
.panel,.panel.wide{grid-column:auto;min-height:292px;aspect-ratio:1.02/1;border:4px solid #0b0b0b;background:#f5f5f5;box-shadow:none;overflow:hidden}
.panel:before{filter:grayscale(1) contrast(1.32) brightness(1.08);opacity:.72!important;background-repeat:no-repeat!important;background-size:cover!important;background-position:center!important}
.panel.bg-space:before{background-image:linear-gradient(#fff5,#fff5),url('original/field.bmp')!important}
.panel:after{content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;background-image:radial-gradient(#0000001c .7px,transparent .8px);background-size:4px 4px;mix-blend-mode:multiply}
.actor{bottom:-2px;z-index:5;transition:none}
.actor svg{width:100%;height:100%;filter:none;overflow:visible}
.actor-name{bottom:2px;background:#fff;color:#111;border:2px solid #111;padding:1px 4px;font:700 9px Arial;text-transform:none}
.zoom-close .actor{transform:scale(1.08);transform-origin:bottom center}
.zoom-wide .actor{transform:scale(.94);transform-origin:bottom center}
.bubble{z-index:13;background:#fff;border:3px solid #111;padding:10px 13px;text-align:center;color:#000;font:700 13px/1.15 "Comic Sans MS","Trebuchet MS",Arial,sans-serif;box-shadow:none;overflow:visible;max-height:42%;overflow-wrap:anywhere}
.bubble.say,.bubble.whisper{border-radius:53% 47% 58% 42% / 48% 55% 45% 52%}
.bubble.whisper{border-style:dashed;font-weight:600}
.bubble.think{border-radius:50%;border-width:3px}
.bubble.action{border-radius:0;background:#fff;border-width:3px;font-style:italic;font-family:Georgia,serif;text-align:left}
.bubble.pose-shout{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.2px}
.bubble.pose-laugh{font-size:14px;font-weight:900}
.tail{position:absolute;z-index:12;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:18px solid #111;transform-origin:50% 0;filter:none}
.panel-number{right:4px;left:auto;bottom:4px;background:#111;color:#fff;padding:1px 4px;font:700 9px Arial}
.comic-empty{grid-column:1/-1;border:4px solid #111;background:#fff;padding:44px;text-align:center;font:700 18px "Comic Sans MS","Trebuchet MS",sans-serif}
.bodycam-head{background:#000080;color:#fff;font-weight:700;padding:4px 6px;margin-top:4px}
.bodycam{height:235px;background:#fff;border-top:2px inset #fff;border-bottom:2px inset #fff;display:grid;place-items:center;overflow:hidden}
.bodycam svg{height:225px;width:175px}
.emotion-wheel{height:118px;position:relative;background:#d0d0d0;border-top:2px groove #fff}
.emotion-wheel:before{content:"";position:absolute;left:50%;top:50%;width:84px;height:84px;transform:translate(-50%,-50%);border:2px solid #777;border-radius:50%;background:#c0c0c0}
.emotion-wheel button{position:absolute;width:29px;height:29px;padding:0;border:2px outset #fff;background:#c0c0c0;font:700 16px Arial;z-index:2}
.emotion-wheel button.active,.emotion-wheel button:active{border-style:inset;background:#fff}
.emotion-wheel button:nth-child(1){left:50%;top:5px;transform:translateX(-50%)}
.emotion-wheel button:nth-child(2){right:25px;top:20px}
.emotion-wheel button:nth-child(3){right:25px;bottom:18px}
.emotion-wheel button:nth-child(4){left:25px;bottom:18px}
.emotion-wheel button:nth-child(6){left:25px;top:20px}
.emotion-wheel .emotion-center{left:50%;top:50%;transform:translate(-50%,-50%);width:43px;height:43px;border-radius:50%;font-size:9px;background:#fff}

@media(max-width:1180px) and (min-width:951px){.comic-page{grid-template-columns:repeat(2,minmax(0,1fr))}.panel,.panel.wide{min-height:300px}}
@media(max-width:950px){.comic-page{grid-template-columns:repeat(2,minmax(0,1fr));padding:6px;gap:6px}.panel,.panel.wide{grid-column:auto;min-height:300px;aspect-ratio:1/1}.bodycam,.bodycam-head,.emotion-wheel{display:none}.people-pane.mobile-open .bodycam,.people-pane.mobile-open .bodycam-head,.people-pane.mobile-open .emotion-wheel{display:grid}}
@media(max-width:640px){.comic-page{grid-template-columns:1fr}.panel,.panel.wide{min-height:330px;aspect-ratio:auto}.bubble{font-size:12px}.bubble.pose-shout{font-size:14px}}


/* dComic v6 - visible original comic-art backdrops */
.panel{background:#fff!important}
.panel:before{z-index:0!important;opacity:.96!important;filter:none!important;background-repeat:no-repeat!important;background-size:cover!important;background-position:center!important}
.panel:after{z-index:1!important;opacity:.12}
.panel.bg-room:before{background-image:url('original/room.png')!important}
.panel.bg-field:before{background-image:url('original/field.png')!important}
.panel.bg-pastoral:before{background-image:url('original/pastoral.png')!important}
.panel.bg-den:before{background-image:url('original/den.png')!important}
.panel.bg-volcano:before{background-image:url('original/volcano.png')!important}
.actor{z-index:6!important}
.actor-name{z-index:8!important}
.bubble{z-index:14!important}
.tail{z-index:13!important}
.panel-number{z-index:20!important}

/* dComic v7 complete UI */
.panel.bg-clouds:before{background-image:url('original/clouds.png')!important}
.panel.bg-space:before{background-image:url('original/space.png')!important}
.panel.bg-buckroom:before{background-image:url('original/buckroom.png')!important}
.panel.bg-yellow:before{background-image:url('original/yellow.png')!important}
.panel.bg-pastoral:before{background-image:url('original/pastoral.png')!important}
.panel.bg-den:before{background-image:url('original/den.png')!important}
.panel.bg-volcano:before{background-image:url('original/volcano.png')!important}
.scene-tool{display:flex;align-items:center;gap:4px;margin-left:6px;font-size:10px}.scene-tool select{height:30px;max-width:118px;border:2px inset #fff;background:#fff}.chat-head-actions{display:flex;align-items:center;gap:6px}.mini-btn{border:2px outset #fff;background:#c0c0c0;padding:3px 7px;font-size:10px}.mini-btn:active{border-style:inset}.person.away .dot{background:#d4a000}.person.busy .dot{background:#c00}.me-status i.away{background:#d4a000}.me-status i.busy{background:#c00}.me-status i.invisible{background:#777}.dialog-overlay{position:fixed;inset:0;z-index:200;background:#0008;display:grid;place-items:center;padding:18px}.dialog-window{width:min(560px,96vw);max-height:90vh;overflow:hidden}.admin-window{width:min(820px,96vw)}.title-close{min-width:22px;height:20px;padding:0;background:#c0c0c0;border:2px outset #fff;font-weight:700}.dialog-content{background:#c0c0c0;padding:14px;max-height:calc(90vh - 30px);overflow:auto}.dialog-content h3{margin:7px 0}.dialog-content label{display:block;font-weight:700;margin:9px 0}.dialog-content input,.dialog-content select{width:100%;padding:6px;border:2px inset #fff;background:#fff}.profile-avatars{grid-template-columns:repeat(4,1fr);margin-bottom:10px}.profile-avatars .avatar-choice{height:96px}.profile-avatars svg{height:92px!important;width:78px!important}.admin-stats{display:flex;flex-wrap:wrap;gap:10px;background:#fff;border:2px inset #fff;padding:9px;margin-bottom:12px}.admin-room-form{display:grid;grid-template-columns:160px 1fr 90px;gap:6px;margin-bottom:8px}.admin-list{background:#fff;border:2px inset #fff;max-height:240px;overflow:auto}.admin-row{display:flex;align-items:center;gap:5px;padding:6px;border-bottom:1px dotted #aaa}.admin-row span{flex:1;min-width:0}.win-btn.small{min-width:auto;padding:3px 7px;font-size:10px}.bodycam{background:linear-gradient(#fff,#e9e9e9)}
@media(max-width:950px){.scene-tool{margin-left:2px}.scene-tool select{max-width:82px}.toolbar .tool#settingsTool,.toolbar .tool#printBtn{min-width:48px}.dialog-overlay{padding:8px}.admin-room-form{grid-template-columns:1fr}.chat-head-actions .mini-btn{padding:2px 5px}}
@media(max-width:620px){.scene-tool{display:none}.toolbar .tool#settingsTool{display:none}.toolbar .tool#printBtn{display:none}.chat-head{padding:4px 5px}.chat-head-actions{gap:3px}.chat-head-actions #connectionState{display:none}.admin-row{flex-wrap:wrap}.admin-row span{flex-basis:100%}}
@media print{html,body{background:#fff!important}.desktop{padding:0!important}.app-window{border:0!important;box-shadow:none!important}.titlebar,.menubar,.toolbar,.rooms-pane,.people-pane,.chat-head,.typing,.composer,.statusbar,.toast,.dialog-overlay,.transcript-feed{display:none!important}.workspace,.chat-area{display:block!important;height:auto!important;border:0!important;background:#fff!important}.comic-viewport{display:block!important;overflow:visible!important;background:#fff!important;padding:0!important}.comic-page{display:grid!important;width:100%!important;max-width:none!important;padding:0!important;grid-template-columns:repeat(3,1fr)!important;gap:4mm!important}.panel,.panel.wide{break-inside:avoid;min-height:78mm!important;aspect-ratio:1/1!important}}
.emotion-wheel button[data-emotion]{background-color:#c0c0c0;background-repeat:no-repeat;background-position:center;background-size:22px 27px;color:transparent;text-indent:-9999px;overflow:hidden}.emotion-wheel button[data-emotion="happy"]{background-image:url('original/faces/hap.png')}.emotion-wheel button[data-emotion="surprised"]{background-image:url('original/faces/sho.png')}.emotion-wheel button[data-emotion="cool"]{background-image:url('original/faces/coy.png')}.emotion-wheel button[data-emotion="sad"]{background-image:url('original/faces/sad.png')}.emotion-wheel button[data-emotion="angry"]{background-image:url('original/faces/ang.png')}.emotion-wheel button[data-emotion="auto"]{background-image:url('original/faces/neu.png');background-size:29px 38px}
.about-window{width:min(500px,96vw)}.legal-note{font-size:10px;color:#444}.about-link{display:inline-block;color:#000;text-decoration:none}.about-link:active{border-style:inset}
.classic-avatar{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(1px 1px 0 #fff)}.classic-avatar.flip{transform:scaleX(-1)}.avatar-choice .classic-avatar{width:100%;height:100%;object-fit:contain}.person .classic-avatar{width:32px;height:34px;object-fit:contain}.bodycam .classic-avatar{width:100%;height:100%;max-height:225px;object-fit:contain}
.avatar-choices{grid-template-columns:repeat(5,minmax(0,1fr));max-height:360px;overflow:auto;padding:3px}.avatar-choice{height:104px;padding:0 2px 17px}.avatar-choice .classic-avatar,.avatar-choice svg{height:82px!important;width:100%!important}.avatar-choice small{position:absolute;left:2px;right:2px;bottom:2px;font:700 9px Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#111}.profile-avatars{grid-template-columns:repeat(5,minmax(0,1fr));max-height:390px}.profile-avatars .avatar-choice{height:110px}.profile-avatars .classic-avatar,.profile-avatars svg{height:88px!important}
@media(max-width:520px){.avatar-choices,.profile-avatars{grid-template-columns:repeat(3,minmax(0,1fr))}}