@font-face{font-family:Fredoka;src:url(fonts/Fredoka.ttf);font-weight:300 700}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:Fredoka,sans-serif;color:#3b2f2a;user-select:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
.card{background:rgba(255,250,242,.92);border-radius:18px;box-shadow:0 8px 30px rgba(60,30,10,.25),inset 0 -3px 0 rgba(0,0,0,.06);padding:12px 16px;backdrop-filter:blur(6px)}
.small{font-size:13px}.muted{opacity:.65}
#stats{position:fixed;left:16px;top:16px;min-width:190px}#money{font-size:28px;color:#2f7d4f}
.lvl{display:flex;align-items:center;gap:8px;margin-top:6px;font-weight:600;font-size:13px}.bar{flex:1;height:9px;border-radius:9px;background:#eadfcf;overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff9f5a,#ff5f6d);border-radius:9px;transition:width .3s}
#status{position:fixed;top:16px;left:50%;transform:translateX(-50%);font-weight:700;letter-spacing:1px;padding:8px 20px}
.pill{border-radius:40px}.open{color:#fff;background:#3fae6a!important}.closed{color:#fff;background:#d9534f!important}
#cross{position:fixed;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
#prompt{position:fixed;left:50%;top:calc(50% + 34px);transform:translateX(-50%);font-weight:600;color:#fff;text-shadow:0 2px 6px #000a;font-size:18px;white-space:nowrap}
#prompt kbd{background:#fff;color:#3b2f2a;border-radius:7px;padding:1px 8px;margin-right:6px;box-shadow:0 3px 0 #bba}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);font-weight:600;font-size:18px;color:#fff;text-shadow:0 2px 6px #000a;transition:opacity .4s}
#help{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);opacity:.85}
#modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(40,20,10,.35)}
.big{padding:24px 28px;max-width:860px;width:90vw;max-height:88vh;overflow:auto}
h2{margin:0 0 10px;font-size:26px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.prod{background:#fff;border-radius:14px;padding:10px;box-shadow:0 3px 0 #e7dccb;text-align:center}.prod.locked{opacity:.45}
.sw{width:54px;height:54px;border-radius:50%;margin:4px auto 6px;box-shadow:inset -6px -8px 0 rgba(0,0,0,.15),inset 5px 5px 0 rgba(255,255,255,.35)}
.btn{font-family:inherit;font-weight:700;font-size:16px;border:0;border-radius:12px;padding:9px 16px;background:#ff7a59;color:#fff;cursor:pointer;box-shadow:0 4px 0 #c8553b;transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #c8553b}.btn.g{background:#3fae6a;box-shadow:0 4px 0 #2b7f4c}.btn.s{background:#8b7d70;box-shadow:0 4px 0 #62574d}.btn.sm{padding:4px 10px;font-size:14px}
.qty{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px}
.foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:10px}
#start{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,rgba(255,220,180,.25),rgba(40,20,10,.7))}
.title{text-align:center;max-width:520px}.logo{font-size:64px;font-weight:700;color:#3fae6a;line-height:1}.logo span{color:#ff5f4a}.sub{margin:8px 0 22px;font-size:18px}.title .btn{font-size:22px;padding:14px 34px;margin-bottom:14px}
#checkout{position:fixed;right:16px;top:50%;transform:translateY(-50%);width:330px}
.disp{background:#1f2a24;color:#8dffb0;font-size:30px;border-radius:12px;padding:8px 14px;text-align:right;font-variant-numeric:tabular-nums;margin:6px 0}
.cash{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}.cash .btn{background:#e8c77a;color:#4a3a10;box-shadow:0 4px 0 #b89a4f}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.keys .btn{background:#5b6b7a;box-shadow:0 4px 0 #3d4954}
.price{font-size:44px;font-weight:700;text-align:center;color:#2f7d4f}
input[type=range]{width:100%}

#gear{position:fixed;right:16px;top:16px;font-size:22px;border:0;cursor:pointer;padding:6px 12px;font-family:inherit;color:#3b2f2a}
#fps{position:fixed;right:70px;top:18px;font-weight:600;font-variant-numeric:tabular-nums}
.tabs{display:inline-flex;gap:6px;background:#eee3d2;border-radius:12px;padding:4px}
.tab{font-family:inherit;font-weight:600;font-size:15px;border:0;border-radius:9px;padding:6px 14px;background:transparent;color:#6b5a4a;cursor:pointer}
.tab.on{background:#fff;color:#2f7d4f;box-shadow:0 2px 0 #d9ccb8}
.brand{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#2f8f58}
.bh{margin:14px 0 6px;font-size:16px;color:#2f8f58;border-bottom:2px dashed #e7dccb;padding-bottom:4px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 14px}
.rn{display:flex;flex-direction:column;font-size:12px;color:#8a7a6a;gap:2px}
.rn input{font-family:inherit;font-size:15px;border:2px solid #e7dccb;border-radius:9px;padding:5px 9px;color:#3b2f2a;background:#fff}
.rn input:focus{outline:none;border-color:#3fae6a}
.sticky{position:sticky;bottom:-24px;background:rgba(255,250,242,.97);padding:10px 0}
.set{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:10px 0}.set input[type=range]{width:220px}
.logo{font-size:56px}

#hud{pointer-events:none}#hud #gear{pointer-events:auto}
.clockrow{font-size:22px;margin-top:2px}#sunmoon{color:#f0a030}
.season::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--dot,#ff9fc0);margin-right:5px;vertical-align:1px}
.bar.day{margin-top:6px;height:6px}.bar.day i{background:linear-gradient(90deg,#ffd84a,#ff8a50,#5b6bd0)}
.pmenu{display:flex;flex-direction:column;gap:10px;max-width:320px}

#prompt{max-width:92vw;white-space:normal;text-align:center;line-height:1.5;padding:0 12px;box-sizing:border-box}
#prompt .pic{width:34px;height:34px;vertical-align:middle;margin-right:6px;filter:drop-shadow(0 2px 3px #0008)}
.thumb{width:84px;height:84px;display:block;margin:0 auto 2px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(60,30,10,.25))}
.pic{width:30px;height:30px;vertical-align:middle;object-fit:contain}
table.bill{width:100%;border-collapse:collapse;font-size:14px}table.bill td{padding:7px 6px;border-bottom:1px solid #eadfcf}table.bill td.r{text-align:right}table.bill tr.tot td{font-weight:700;font-size:16px;border-top:2px solid #cdbb9f}
table.bill td:last-child{text-align:right}
.ok{color:#2f7d4f;font-weight:600}.bad{color:#d9534f;font-weight:700}.warn{color:#c9902a;font-weight:600}
.alert{background:#d9534f;color:#fff;border-radius:12px;padding:10px 14px;margin:8px 0;font-weight:600}.alert.info{background:#4a90c8}
.tops{display:flex;flex-wrap:wrap;gap:8px}.top{background:#fff;border-radius:10px;padding:4px 10px;box-shadow:0 2px 0 #e7dccb}
.avatar{width:56px;height:56px;border-radius:50%;margin:4px auto 6px;color:#fff;font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -5px 0 rgba(0,0,0,.15)}
.stars{color:#f2b544;letter-spacing:1px}.req{font-size:13px;margin:2px 0}
.prod .btn{margin-top:6px}
#status[data-power=cut]::after{content:' · POWER CUT';color:#ffe0dc}

.shift{margin-top:2px}.shift.ok{color:#2f7d4f}.shift.bad{color:#d9534f}
table.sgrid{border-collapse:separate;border-spacing:4px;width:100%;font-size:12px}
.sgrid th{font-weight:700;color:#5a4a3a;padding:2px}.sgrid th.today{color:#e5533d}.sgrid th.sh{text-align:left;white-space:nowrap}
.sgrid td.cell{background:#f4fbf4;border:2px solid #bfe3c6;border-radius:10px;padding:4px;vertical-align:top}
.sgrid td.warn{background:#fff8e8;border-color:#f3d48a}.sgrid td.err{background:#fff0ef;border-color:#e88a84}
.sgrid td.now{box-shadow:0 0 0 3px #4a90c8}
.sgrid select{width:100%;font:inherit;font-size:12px;border-radius:6px;border:1px solid #d8cfc2;padding:2px;margin-bottom:2px;background:#fff}
.sgrid .msg{font-size:10.5px;color:#6a5a4a;line-height:1.2}.sgrid td.err .msg{color:#c0392b;font-weight:700}
.wlist{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0;font-size:12.5px}.wrow.bad{color:#c0392b;font-weight:600}
.wrow .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px}
#sleep{position:fixed;inset:0;z-index:40;background:radial-gradient(ellipse at center,rgba(20,24,52,.55),rgba(8,10,28,.88));color:#eef;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:inherit;pointer-events:auto}
#sleep.hidden{display:none}#sleep h2{margin:0;font-size:40px}#sleepInfo{font-size:18px;background:rgba(255,255,255,.1);padding:8px 16px;border-radius:12px}
#sleep .zz{font-size:56px;font-weight:700;color:#bcd0ff}#sleep .zz span{display:inline-block;animation:zz 1.6s infinite}#sleep .zz span:nth-child(2){animation-delay:.4s}
@keyframes zz{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-12px);opacity:1}}

.chart{width:100%;height:auto;background:#fbf8f2;border-radius:12px;margin:6px 0}table.rep{width:100%;border-collapse:collapse;font-size:12px}.rep th,.rep td{padding:3px 6px;text-align:right;border-bottom:1px solid #eee3d4}.rep td:first-child{text-align:left}tr.muted td{opacity:.75}

.wcwarn{color:#fff;background:#d9534f;border-radius:8px;padding:2px 8px;margin-top:3px;font-weight:700}.wcwarn.hidden{display:none}.pbar{display:inline-block;width:120px;height:10px;border-radius:6px;background:rgba(255,255,255,.3);vertical-align:middle;margin-left:8px;overflow:hidden}.pbar i{display:block;height:100%;background:#5fd38a}

#modal.office{background:#0b1220;align-items:stretch;justify-content:stretch}
#modal.office #modalCard{width:100vw;max-width:none;height:100vh;max-height:none;border-radius:0;padding:64px 28px 20px 150px;box-sizing:border-box;background:linear-gradient(135deg,#eef4f8,#f7f2e8)}
#modal.office #modalCard>h2:first-of-type{font-size:22px}
.osbar{position:fixed;top:0;left:0;right:0;height:46px;display:flex;align-items:center;gap:18px;padding:0 16px;background:linear-gradient(90deg,#24456b,#2f6f58);color:#fff;z-index:5}.osbar span{flex:1;opacity:.9;font-size:14px}
.dock{position:fixed;top:46px;bottom:0;left:0;width:128px;background:#1f2b3a;display:flex;flex-direction:column;gap:6px;padding:10px 8px;z-index:5}
.dock .app{background:transparent;border:0;color:#dfe8f2;font:inherit;font-size:13px;font-weight:600;border-radius:12px;padding:8px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.dock .app span{font-size:26px}.dock .app.on,.dock .app:hover{background:#34506f;color:#fff}.dock .app i{font-style:normal;background:#e5533d;border-radius:9px;padding:0 6px;font-size:11px}
.pin{width:80px;font:inherit;padding:3px 6px;border-radius:8px;border:1px solid #d8cfc2}table.prices td{vertical-align:middle}table.prices .pic{width:30px;height:30px;vertical-align:middle}

#tut{position:fixed;top:96px;right:20px;width:400px;max-width:44vw;z-index:60;background:#fffdf7;border-radius:20px;padding:16px 20px;box-shadow:0 10px 30px #0004,0 0 0 4px #ffd84a;font-size:18px;line-height:1.4;color:#3b2f2a}
#tut.hidden,#tutArrow.hidden{display:none}#tut.done{box-shadow:0 10px 30px #0004,0 0 0 4px #5fd38a}
#tut h3{margin:2px 0 6px;font-size:24px}#tut .tstep{font-size:13px;font-weight:700;color:#e5533d;text-transform:uppercase;letter-spacing:.06em}
#tut .tbtns{display:flex;justify-content:space-between;gap:8px;margin-top:12px}
#tutArrow{position:fixed;left:0;top:0;z-index:55;font-size:52px;color:#ffd84a;text-shadow:0 3px 0 #b8860b,0 0 14px #000a;pointer-events:none;animation:tbob 1s infinite;transform-origin:24px 35px}
#tutArrow.edge{animation:none}@keyframes tbob{50%{margin-top:-14px}}

#tut.mini{top:4px;left:50%;right:auto;transform:translateX(-50%);width:auto;max-width:60vw;padding:4px 14px;border-radius:14px;font-size:13px;pointer-events:none;z-index:70;opacity:.95}#tut.mini .tmsg,#tut.mini .tbtns{display:none}#tut.mini h3{font-size:15px;margin:0;display:inline}#tut.mini .tstep{display:inline;margin-right:8px}
