html,body{margin:0;height:100%;background:#0f172a;overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans Thai,sans-serif}#app{position:fixed;inset:0}canvas{display:block}.glass{background:#ffffff1a;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.2);border-radius:1rem;box-shadow:0 20px 25px -5px #0000004d,0 8px 10px -6px #0000004d}.hud{position:fixed;pointer-events:none;color:#e2e8f0;z-index:10}.hud>*{pointer-events:auto}kbd{background:#ffffff1f;border:1px solid rgba(255,255,255,.25);border-radius:.375rem;padding:0 .4rem;font-size:.75rem}.need-bar{height:.45rem;border-radius:9999px;background:#ffffff1f;overflow:hidden}.need-fill{height:100%;border-radius:9999px;transition:width .2s linear,background-color .3s}.need-fill.ok{background:#4ade80}.need-fill.mid{background:#facc15}.need-fill.low{background:#ef4444}.queue-item{width:2.25rem;height:2.25rem;display:grid;place-items:center;font-size:1.1rem;border-radius:.75rem;background:#ffffff14;border:1px solid rgba(255,255,255,.15);cursor:pointer;position:relative;transition:background .15s}.queue-item:hover{background:#ef444459}.queue-item:hover:after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;font-size:.9rem;color:#fecaca;background:#0f172a99;border-radius:.75rem}.queue-item.active{border-color:#38bdf8;box-shadow:0 0 0 2px #38bdf859}.menu-item{display:flex;justify-content:space-between;gap:1rem;padding:.45rem .75rem;border-radius:.6rem;cursor:pointer;transition:background .12s}.menu-item:hover{background:#38bdf833}#toast{transition:opacity .25s ease,transform .25s ease}#toast.hidden{opacity:0;transform:translate(-50%,8px)}#toast.warn{color:#fcd34d}#toast.danger{color:#fca5a5}#toast.info{color:#bae6fd}.speed-btn{min-width:2.1rem;padding:.15rem .45rem;border-radius:.5rem;font-size:.75rem;border:1px solid rgba(255,255,255,.15);background:#ffffff0f;color:#cbd5e1;cursor:pointer;transition:background .12s}.speed-btn:hover{background:#ffffff24}.speed-btn.active{background:#38bdf84d;border-color:#38bdf8;color:#f0f9ff}.speed-btn.paused{background:#fbbf244d;border-color:#fbbf24;color:#fffbeb}.trait-chip{font-size:10px;padding:.1rem .45rem;border-radius:9999px;background:#ffffff14;border:1px solid rgba(255,255,255,.12);color:#cbd5e1}.moodlet-row{display:flex;justify-content:space-between;gap:.5rem;padding:.15rem 0}.moodlet-row .pos{color:#86efac}.moodlet-row .neg{color:#fca5a5}.portrait{display:flex;align-items:center;gap:.4rem;padding:.3rem .6rem .3rem .4rem;border-radius:9999px;cursor:pointer;font-size:.75rem;color:#e2e8f0;transition:background .15s,border-color .15s}.portrait:hover{background:#ffffff29}.portrait.selected{border-color:#38bdf8;box-shadow:0 0 0 2px #38bdf859}.portrait .dot{width:1.4rem;height:1.4rem;border-radius:9999px;display:grid;place-items:center;font-size:.9rem}.rel-row{display:flex;justify-content:space-between;gap:.5rem;color:#cbd5e1}.rel-row .num{color:#94a3b8;font-variant-numeric:tabular-nums}@media (max-width: 1180px){.hud{font-size:.9rem}.hud .glass{padding-left:.75rem;padding-right:.75rem}#needsList{gap:.25rem}.need-bar{height:.35rem}#buildPanel>.glass{width:16rem}#buildPanel{top:10.5rem}#debugPanel .controls{display:none}.portrait span:last-child{max-width:5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@media (max-width: 1180px) and (max-height: 820px){.hud.left-4.bottom-4>.glass{width:12.5rem}#residentStatus,#traitsRow{display:none}}@media (pointer: coarse){.speed-btn,.queue-item,.menu-item{min-height:2.5rem}}.menu-item.disabled{opacity:.45;cursor:not-allowed}.menu-item.disabled:hover{background:transparent}.xp-tag{color:#c4b5fd}