:root{--parch:#f3e2b3;--parch2:#e5cc8c;--wood:#6b4423;--ink:#3a2410;--gold:#f5b82e;--red:#c0392b;--green:#3d8b2f}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#2a6fb0;font-family:'VT323',monospace;color:var(--ink);font-size:20px}
#scene-container{position:fixed;inset:0}
.hidden{display:none!important}
.panel{position:fixed;background:var(--parch);border:4px solid var(--wood);box-shadow:0 0 0 2px var(--parch2) inset,4px 4px 0 rgba(0,0,0,.35);padding:6px 10px;line-height:1.1}
#banner{position:fixed;top:8px;left:50%;transform:translateX(-50%);font-family:'Press Start 2P';font-size:13px;background:var(--parch);border:4px double var(--wood);padding:8px 14px;white-space:nowrap}
#stats{top:50px;left:8px;min-width:170px}
#stats b{float:right;margin-left:10px}
#calendar{top:50px;right:8px;min-width:160px;text-align:center}
#sDate{font-family:'Press Start 2P';font-size:11px;margin-bottom:4px}
.meter{height:8px;background:#b89a5a;border:2px solid var(--wood);margin-top:4px}
.meter i{display:block;height:100%;background:var(--gold);width:0}
.small{font-size:16px}
#bills{bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:96vw}
.bill{padding:2px 6px;border:2px solid var(--wood);background:#fff6d8;font-size:17px}
.bill.paid{background:#bfe3a5;text-decoration:line-through;opacity:.7}
.bill.late{background:#f2a194;animation:blink 1s infinite}
@keyframes blink{50%{background:#e06050}}
#mood{bottom:60px;right:8px;text-align:center}
#moodFace{font-size:32px}
#prompt{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--gold);padding:6px 14px;border:3px solid var(--gold);font-size:22px}
#btnRow{position:fixed;bottom:60px;left:8px}
#compass{position:fixed;bottom:110px;left:12px;font-size:36px;opacity:.85}
.wbtn{font-family:'Press Start 2P';font-size:10px;background:var(--wood);color:var(--parch);border:3px solid #3b240f;padding:8px 10px;cursor:pointer;box-shadow:3px 3px 0 #0006}
.wbtn:hover{background:#86582f}
.wbtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #0006}
.wbtn.good{background:var(--green)}.wbtn.bad{background:var(--red)}
#joy,#btnAct{display:none}
@media (pointer:coarse){
 #joy{display:block;position:fixed;left:20px;bottom:130px;width:110px;height:110px;border-radius:50%;background:#0003;border:3px solid #fff8}
 #joyKnob{position:absolute;left:35px;top:35px;width:40px;height:40px;border-radius:50%;background:var(--gold)}
 #btnAct{display:block;position:fixed;right:20px;bottom:150px;width:64px;height:64px;font-size:18px;border-radius:50%}
 #compass{display:none}
}
@media (max-width:600px){
 body{font-size:16px}#banner{font-size:9px}#stats{min-width:130px;top:44px}#calendar{top:44px;min-width:120px}#sDate{font-size:8px}
 #bills{bottom:4px}.bill{font-size:14px}#mood{bottom:70px}
}
#toasts{position:fixed;top:170px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;z-index:30}
.toast{background:var(--ink);color:var(--parch);padding:6px 14px;border:3px solid var(--gold);font-size:22px;animation:tin .3s, tout .5s 2.5s forwards}
.toast.bad{border-color:var(--red)}
@keyframes tin{from{transform:translateY(-20px);opacity:0}}
@keyframes tout{to{opacity:0;transform:translateY(-10px)}}
#modal{position:fixed;inset:0;background:#0007;display:flex;align-items:center;justify-content:center;z-index:40;padding:10px}
.parch{background:var(--parch);border:6px solid var(--wood);box-shadow:0 0 0 3px var(--parch2) inset,8px 8px 0 #0006;padding:18px;max-width:520px;width:100%;max-height:90vh;overflow:auto}
.parch h2{font-family:'Press Start 2P';font-size:14px;margin:0 0 10px;color:var(--wood)}
.parch p{margin:6px 0}
.parch .btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
table.br{width:100%;border-collapse:collapse}table.br td{border-bottom:1px dashed var(--wood);padding:2px}table.br td:last-child{text-align:right}
.phone{background:#222;color:#eee;border-radius:14px;padding:12px;border:3px solid #555;font-size:20px}
.flag{background:#fff3c4;border-left:6px solid var(--red);padding:6px;margin-top:8px}
#loading{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:url('/api/images/22d16941f73557318ba1f460de803fe2848dedb54cedde18c7e3ddf98c939b83') center/cover;padding:10px}
#loading::before{content:'';position:absolute;inset:0;backdrop-filter:blur(6px);background:#1a3a5a66}
.loadcard{position:relative;text-align:center}
.loadcard h1{font-family:'Press Start 2P';font-size:16px;margin:8px 0}
.sub{font-family:'Press Start 2P';font-size:10px;color:var(--wood);margin-bottom:12px}
#tipTag{display:inline-block;background:var(--wood);color:var(--parch);padding:2px 10px;margin-bottom:6px}
#tipText{font-size:24px;min-height:80px}
#goldBar{display:flex;gap:3px;height:18px;margin:12px 0;justify-content:flex-start;border:3px solid var(--wood);padding:2px;background:#b89a5a}
#goldBar span{width:14px;background:var(--gold);box-shadow:inset -3px -3px 0 #b8860b;animation:drop .25s}
@keyframes drop{from{transform:translateY(-14px)}}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.coin{width:48px;height:48px;margin:0 auto;background:var(--gold);box-shadow:inset -6px -6px 0 #b8860b,inset 6px 6px 0 #ffe27a;animation:spin 1.2s linear infinite}
@keyframes spin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
footer{position:fixed;bottom:2px;right:6px;z-index:60;font-size:14px}
footer a{color:#fff;text-shadow:1px 1px 0 #000}
input[type=range]{width:100%}