@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
:root{font-family:'Be Vietnam Pro',system-ui,sans-serif;color:#17383c;background:#e9eeea;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;border:0;border-radius:9px;padding:12px 16px;background:#176b5d;color:white;font-weight:600;transition:.15s}button:hover{filter:brightness(1.1)}button:disabled{cursor:default;opacity:.5}header{height:82px;background:#102e33;color:white;display:flex;align-items:center;padding:0 30px;gap:24px}.brand{display:flex;align-items:center;gap:13px}.logo{border:1px solid #8cae9d;border-radius:10px;font-size:26px;padding:6px;color:#e9c77d;letter-spacing:-5px;padding-right:12px}.logo span{color:white}.brand strong{font-size:14px;letter-spacing:1px}.brand small{display:block;font-size:9px;letter-spacing:2px;color:#a1bbb7;margin-top:6px}.live{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:12px;color:#d3e4dd}.live i{width:7px;height:7px;background:#7ed3a7;border-radius:50%;box-shadow:0 0 12px #65c394}.live span{border-left:1px solid #45605c;margin-left:12px;padding-left:20px}.quiet{background:transparent;border:1px solid #b7c9c0;color:inherit}header .quiet{border-color:#496361;font-size:12px}main{display:grid;grid-template-columns:minmax(0,1fr) 355px;height:calc(100dvh - 82px);min-height:720px}.world{position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#d7e4de,#b8cfc6)}canvas{width:100%;height:100%;display:block;touch-action:none}.scene-title{position:absolute;top:26px;left:30px;pointer-events:none}.scene-title>span{font-size:10px;letter-spacing:2px;color:#54766b}.scene-title h1{font-size:29px;line-height:1.25;margin:10px 0;color:#224b43;letter-spacing:-1px}.scene-title p{font-size:11px;color:#597469}.view-controls{position:absolute;right:20px;top:24px;display:flex;gap:5px}.view-controls button{background:#ffffffd9;color:#36594f;border:1px solid #bacfc3;padding:8px 11px;font-size:12px;box-shadow:0 3px 8px #1643340a}.hint{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);border-radius:24px;padding:12px 20px;background:#153d37e8;color:#e7f1ea;font-size:11px;white-space:nowrap;box-shadow:0 6px 24px #20483b22}.legend{position:absolute;bottom:20px;left:25px;display:flex;gap:20px;font-size:10px;color:#47645b}.legend span{display:flex;gap:6px;align-items:center}.legend i{width:7px;height:7px;border-radius:2px}aside{background:#fcfcf8;padding:26px 23px;overflow:auto;border-left:1px solid #ccd8ce}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.6px;color:#6f8c80}.profile{display:flex;align-items:center;gap:11px;margin:17px 0 20px}.avatar{width:48px;height:51px;border-radius:14px;background:#e8eee2;font-size:32px;display:grid;place-items:center}.profile input{width:210px;border:0;background:transparent;font-size:18px;font-weight:700;color:#23493e;outline-color:#4b9e7d}.profile small{display:block;font-size:9px;color:#839085;margin-top:5px}.stats{display:flex;padding:17px 0;border-block:1px solid #e2e8df;justify-content:space-between}.stats strong{font-size:21px;display:block;color:#2b6350}.stats small{font-size:9px;color:#819084}.section-line{display:flex;align-items:center;justify-content:space-between;margin:23px 0 12px}.section-line h2{font-size:13px;margin:0}.section-line span{font-size:9px;color:#8a998e}#roles{display:grid;grid-template-columns:1fr 1fr;gap:8px}.role{background:#f3f5ee;border:1px solid #e2e7dc;color:#486454;text-align:left;padding:12px 9px;position:relative;min-height:76px}.role em{font-style:normal;font-size:21px;display:block;margin-bottom:5px}.role strong{font-size:10px;display:block}.role small{display:block;font-size:8px;font-weight:400;margin-top:4px;color:#859180}.role.selected{background:#e4f0df;border-color:#68a17b;box-shadow:inset 0 0 0 1px #68a17b}.role.selected:after{content:'✓';position:absolute;top:8px;right:8px;color:#3e7c4c}.job{margin-top:19px;background:#eff3e9;padding:15px;border-radius:12px}.job-top{display:flex;justify-content:space-between;font-size:11px}.job-top b{color:#6c9162}.job p{font-size:10px;line-height:1.65;color:#7a8972;min-height:32px}.track{height:5px;background:#dce5d4;border-radius:5px;overflow:hidden;margin:11px 0 14px}.track i{display:block;height:100%;width:0;background:#59936a;transition:width .15s}#work{width:100%;font-size:11px}.auto{width:100%;font-size:10px;padding:9px;margin-top:8px;border-color:#cbd7bf;color:#6b8061}.auto.on{background:#d8e8cf;color:#3b713f}.feed{margin-top:20px}.feed p{font-size:10px;line-height:1.8;color:#667c6a}footer{font-size:8px;line-height:1.9;color:#9aa598;margin-top:24px}dialog{border:0;border-radius:20px;padding:30px;max-width:470px;box-shadow:0 20px 100px #12382a55;color:#284e40;background:#fcfcf7}dialog::backdrop{background:#153b3880;backdrop-filter:blur(4px)}dialog h2{font-size:25px}dialog p{font-size:12px;line-height:2;color:#6b806f}.close{position:absolute;right:12px;top:8px;background:transparent;color:#67806e;font-size:23px;padding:2px 10px}#play{width:100%;margin-top:10px}@media(min-width:1600px){main{grid-template-columns:minmax(0,1fr) 390px}aside{padding:30px}}@media(max-width:900px){header{padding:0 16px;height:68px}.brand strong{font-size:11px}.brand small{font-size:7px}.live{display:none}header .quiet{margin-left:auto}main{display:flex;flex-direction:column;height:auto;min-height:0}.world{height:66dvh;min-height:470px}.scene-title{top:20px;left:18px}.scene-title h1{font-size:21px}.scene-title p{max-width:180px;line-height:1.6}.view-controls{top:18px;right:12px;gap:3px}.view-controls button{padding:7px;font-size:10px}aside{overflow:visible;padding:22px}.profile input{width:230px}#roles{grid-template-columns:repeat(3,1fr)}.hint{font-size:9px;padding:10px 12px;bottom:48px}.legend{font-size:9px}footer{margin-top:16px}.job p{min-height:0}}

/* Official project brand assets */
.chat-panel{margin-top:20px;border:1px solid #c9dacb;border-radius:12px;overflow:hidden;background:#f7faf3}.chat-heading{display:flex;align-items:center;justify-content:space-between;padding:13px;background:#e9f1e5}.chat-heading strong{font-size:11px;display:block}.chat-heading small{display:block;font-size:8px;color:#4b8667;margin-top:5px}.chat-heading small.disconnected{color:#ad7941}.chat-heading button{font-size:9px;padding:6px 8px;background:#d7e5d2;color:#4d6c4c}.chat-notice,.chat-footnote{font-size:8px;line-height:1.7;color:#7b9175;padding:0 12px}.chat-footnote{margin:0 0 10px}#chatMessages{list-style:none;margin:0;padding:0 12px;max-height:230px;overflow:auto;overscroll-behavior:contain}#chatMessages li{background:#eaf0e3;border-radius:8px;padding:9px 10px;margin:8px 0}#chatMessages li.mine{background:#dcecd8;border-left:2px solid #82ac76}#chatMessages li>div{display:flex;justify-content:space-between;gap:8px}#chatMessages b{font-size:9px;color:#35604a}#chatMessages time{font-size:8px;color:#8b9b80}#chatMessages p{font-size:11px;line-height:1.65;color:#365841;overflow-wrap:anywhere;margin:5px 0 0}#chatEmpty{font-size:10px;color:#87997c;padding:14px;line-height:1.8}#chatForm{padding:9px 12px 0}.chat-compose{display:flex;gap:6px}#chatInput{width:0;min-width:0;flex:1;font-size:10px;border:1px solid #c9d9c2;border-radius:7px;padding:10px;color:#355e45;background:white}#chatInput:focus{outline:2px solid #79a682}#chatSend{font-size:10px;padding:8px 11px}.chat-meta{display:flex;justify-content:space-between;gap:5px;min-height:24px;padding-top:5px;font-size:8px;color:#a37848}.chat-meta small{font-size:8px;color:#93a18a;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.avatar-tools{text-align:center;flex-shrink:0}.avatar-tools>small{font-size:8px;color:#658576;margin-top:3px}.avatar{border:1px solid #b7cdb4;padding:0;overflow:hidden;width:48px;height:51px}.avatar img{width:100%;height:100%;object-fit:cover}.avatar-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:8px;color:#7a8c78;margin:-10px 0 15px;line-height:1.6}.avatar-actions button{font-size:8px;padding:3px 6px;background:#edf0e5;color:#6c795d}.payroll{margin-top:22px;border:1px solid #d9e3d1;border-radius:13px;padding:15px;background:#f7f9f1}.payroll .section-line{margin:0 0 9px}.game-badge{background:#e4edcd;border-radius:4px;padding:4px 6px;color:#527044!important;font-weight:700;font-size:8px!important}.pay-clock{font-size:9px;color:#819378}.pay-amount{margin-top:15px;display:flex;flex-direction:column;gap:5px}.pay-amount small{font-size:10px;color:#71866a}.pay-amount strong{font-size:29px;color:#28664e;font-variant-numeric:tabular-nums}.pay-amount span{font-size:9px;color:#a18545}#payStatus{font-size:9px;color:#8a967c;border-bottom:1px solid #e0e8d7;padding-bottom:13px;line-height:1.7}#payStatus.earning{color:#267755}.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 8px}.pay-grid div{display:flex;flex-direction:column;gap:5px}.pay-grid small{font-size:8px;color:#819074}.pay-grid b{font-size:11px;color:#416044;font-variant-numeric:tabular-nums}.pay-grid span{font-size:8px;color:#8b967e}#historyButton{margin-top:17px;width:100%;font-size:10px;color:#52744c;padding:9px;border-color:#c8d5bd}.payroll details{margin:14px 0;font-size:9px;color:#6c8060}.payroll summary{cursor:pointer}.payroll details p{font-size:9px;line-height:1.9;color:#7e8d73}#payNote{display:block;font-size:8px;color:#95a18b;line-height:1.7}#salaryHistory{width:500px;max-height:80dvh}#salaryRows{list-style:none;padding:0}#salaryRows li{padding:13px 0;border-top:1px solid #e0e8d9}#salaryRows strong{display:block;font-size:12px}#salaryRows span{display:block;font-size:10px;color:#819175;margin-top:7px}#salaryEmpty{background:#edf2e3;padding:16px;border-radius:9px}
.brand{background:#fff;border-radius:10px;padding:6px 12px 6px 7px;gap:10px;flex-shrink:0}.brand-symbol{display:block;width:46px;height:46px;object-fit:contain}.brand-wordmark{display:block;width:250px;height:28px;object-fit:cover}.brand small{color:#476d62;font-size:8px;letter-spacing:1.5px;margin-top:2px}@media(max-width:900px){.brand{padding:4px 8px 4px 5px;gap:7px}.brand-symbol{width:36px;height:36px}.brand-wordmark{width:185px;height:22px}.brand small{font-size:6px;letter-spacing:1px}}

/* Full-width workshop, with the entire control dashboard below the scene. */
html{scroll-behavior:smooth;scroll-padding-top:16px}
main{display:flex;flex-direction:column;height:auto;min-height:0}
.world{width:100%;height:calc(100dvh - 82px);min-height:600px;flex:none}
aside{width:100%;border-left:0;border-top:1px solid #c7d6c8;overflow:visible;padding:28px;display:grid;grid-template-columns:minmax(230px,1fr) minmax(270px,1.2fr) minmax(260px,1fr) minmax(280px,1.1fr);gap:22px;align-items:start}
.employee-panel,.tasks-panel{min-width:0;padding:18px;border:1px solid #dce5d5;border-radius:13px;background:#f8faf4}
.employee-panel>.eyebrow{margin-bottom:12px}.profile{margin-top:12px}.profile>div:last-child{min-width:0;flex:1}.profile input{width:100%;font-size:17px}.profile small{line-height:1.7}.stats{gap:9px}.stats small{line-height:1.7}.tasks-panel>.section-line{margin-top:0}.tasks-panel .job{margin-top:14px}#roles{grid-template-columns:1fr 1fr}.payroll,.chat-panel{margin-top:0;min-width:0}.feed,aside>footer{grid-column:1/-1;margin:0}.feed{padding-top:4px;border-top:1px solid #e0e7da}.feed p{margin-bottom:0}aside>footer{display:flex;justify-content:space-between;align-items:center;gap:10px;line-height:1.8}aside>footer a{font-size:11px;color:#3c7256;text-decoration:none}.controls-link{position:absolute;bottom:18px;right:24px;z-index:1;border:1px solid #8dae9a;border-radius:20px;background:#f5f9eddc;color:#345d4b;padding:9px 14px;font-size:10px;text-decoration:none}.controls-link:hover{background:white}
@media(max-width:1250px){aside{grid-template-columns:1fr 1fr;gap:20px;padding:24px}.profile input{max-width:300px}.employee-panel{height:100%}#roles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.world{height:calc(100dvh - 68px);min-height:540px}aside{padding:18px;gap:16px}#roles{grid-template-columns:1fr 1fr}.controls-link{right:16px;font-size:9px}.legend{gap:12px}}
@media(max-width:600px){aside{grid-template-columns:minmax(0,1fr);padding:16px}.world{min-height:480px}.scene-title p{max-width:220px}.controls-link{bottom:16px;right:12px;padding:8px 10px}.legend{bottom:58px;left:16px}.hint{bottom:100px;font-size:9px;max-width:calc(100% - 24px);white-space:normal;text-align:center;width:max-content}.employee-panel,.tasks-panel{padding:16px}#roles{grid-template-columns:repeat(3,1fr)}aside>footer{display:block}.view-controls{top:148px}}

.director-banner{position:absolute;z-index:3;left:300px;right:300px;top:22px;display:flex;align-items:center;gap:10px;background:#eff5e8de;border:1px solid #9eb9a0;border-radius:9px;padding:8px 10px;box-shadow:0 3px 16px #365d3610;color:#345e47}.director-banner>strong{font-size:9px;letter-spacing:.4px;white-space:nowrap;flex:none}.director-ticker{overflow:hidden;flex:1;min-width:0}.director-ticker>span{display:block;white-space:nowrap;width:max-content;font-size:12px;font-weight:600;animation:director-scroll 22s linear infinite}.director-ticker.paused>span{animation-play-state:paused}.director-banner>button{padding:3px 6px;font-size:11px;background:#d6e4cc;color:#466d4a;flex:none}@keyframes director-scroll{from{transform:translateX(-100%)}to{transform:translateX(calc(100vw - 600px))}}.workshop-hud{position:absolute;z-index:2;right:22px;top:78px;width:260px;display:grid;gap:12px}.hud-pay,.hud-chat{background:#f5f9eeeb;border:1px solid #adc5a8;border-radius:11px;padding:14px;box-shadow:0 4px 20px #234e2c0c}.hud-caption{font-size:9px;font-weight:700;letter-spacing:1px;color:#426448;display:flex;justify-content:space-between;align-items:center}.hud-caption>span{font-size:7px;letter-spacing:.3px;background:#e1eccf;color:#6a8358;padding:3px 5px;border-radius:4px}.hud-values{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}.hud-values div{display:flex;flex-direction:column;gap:7px}.hud-values small{font-size:8px;color:#78916a}.hud-values b{font-size:16px;color:#28624a;font-variant-numeric:tabular-nums}#hudPayStatus{font-size:8px;line-height:1.6;color:#6b8461;margin:13px 0 7px}#hudDue{font-size:8px;color:#9e895b}.hud-caption>a{font-size:8px;letter-spacing:0;font-weight:500;color:#668658;text-decoration:none}#hudChatMessages{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:7px}#hudChatMessages li{font-size:10px;line-height:1.6;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;border-bottom:1px solid #dce6d3;padding-bottom:5px}#hudChatMessages li:last-child{border-bottom:0;padding-bottom:0}#hudChatMessages b{color:#4d7752}#hudChatMessages span{color:#5d7357}#hudChatEmpty{font-size:10px;line-height:1.7;color:#829576;margin:15px 0 3px}.manager-panel{grid-column:1/-1;border:1px solid #d5e0cb;background:#f4f8ee;padding:20px;border-radius:12px;display:grid;grid-template-columns:1fr 2fr;gap:24px}.manager-panel p{font-size:10px;color:#718768;line-height:1.8}.manager-panel a{font-size:11px;color:#3c7657}.manager-panel form{display:grid;gap:9px}.manager-panel form[hidden]{display:none}.manager-panel label{font-size:11px;font-weight:600}.manager-panel textarea{font:inherit;font-size:12px;line-height:1.7;padding:12px;width:100%;resize:vertical;border:1px solid #bfd0b8;border-radius:8px;color:#365f43}.manager-panel form>small{font-size:9px;color:#88977b}.manager-panel button{justify-self:start;font-size:11px}.manager-panel #managerStatus{font-size:10px;color:#60804e}#managerLogin[hidden],#managerDenied[hidden]{display:none}
@media(max-width:1250px){.director-banner{left:285px;right:22px;top:76px}.workshop-hud{top:136px;width:225px}.hud-values b{font-size:14px}@keyframes director-scroll{from{transform:translateX(-100%)}to{transform:translateX(calc(100vw - 307px))}}}
@media(max-width:900px){.director-banner{top:18px;left:245px;right:16px}.workshop-hud{top:110px;right:16px;width:205px}.hud-pay,.hud-chat{padding:11px}.hud-values{gap:8px}.hud-values b{font-size:12px}.manager-panel{grid-template-columns:1fr;gap:12px}@keyframes director-scroll{from{transform:translateX(-100%)}to{transform:translateX(calc(100vw - 261px))}}}
@media(max-width:600px){.director-banner{top:14px;left:12px;right:12px;padding:6px 8px;gap:7px}.director-banner>strong{font-size:8px}.director-ticker>span{font-size:10px}.scene-title{top:64px}.scene-title h1{font-size:18px}.scene-title p{font-size:9px;max-width:170px}.view-controls{top:190px;left:12px;right:auto}.workshop-hud{top:64px;right:10px;width:155px;gap:7px}.hud-caption{font-size:7px;letter-spacing:.2px}.hud-caption>span{display:none}.hud-values{grid-template-columns:1fr;gap:8px;margin-top:9px}.hud-values div{gap:3px}.hud-values b{font-size:13px}.hud-values small,#hudDue{font-size:7px}#hudPayStatus{font-size:7px;margin:8px 0 5px}.hud-chat{max-height:175px;overflow:auto}#hudChatMessages li{font-size:8px;line-height:1.5}#hudChatEmpty{font-size:8px}.hud-pay,.hud-chat{padding:9px}.world{min-height:660px}.manager-panel{padding:15px}@keyframes director-scroll{from{transform:translateX(-100%)}to{transform:translateX(calc(100vw - 24px))}}}
@media(prefers-reduced-motion:reduce){.director-ticker>span{animation:none;width:100%;overflow:hidden;text-overflow:ellipsis}}

body.admin-bar .world{height:calc(100dvh - 114px)}@media(max-width:782px){body.admin-bar .world{height:calc(100dvh - 114px)}}