:root{--bg: #2b2018;--bg-deep: #1c140e;--panel: rgba(58, 42, 30, .88);--panel-edge: #6b4f37;--accent: #e8a23d;--accent-2: #c2703a;--text: #f4e6cf;--text-dim: #c8ab86;--shadow: rgba(0, 0, 0, .45);--bar-hunger: #e8703a;--bar-happiness: #f2c249;--bar-hygiene: #4fb4e8;--bar-energy: #8fd14f;--font-pixel: "Courier New", "Lucida Console", Monaco, monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg-deep);color:var(--text);font-family:var(--font-pixel);-webkit-font-smoothing:none;user-select:none}#game{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 38%,#3a2a1e 0%,var(--bg-deep) 100%)}#game canvas{image-rendering:pixelated;image-rendering:crisp-edges}#hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:12px}#hud button,#hud .modal{pointer-events:auto}.panel,#topbar,#needs,#readout,#actionbar{background:var(--panel);border:2px solid var(--panel-edge);border-radius:12px;box-shadow:0 4px 0 var(--shadow),inset 0 1px #ffffff0f}#topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;font-size:18px;letter-spacing:1px}#ranch-name{color:var(--accent);font-weight:700;text-shadow:0 2px 0 var(--shadow)}#coins{color:var(--text);font-weight:700;background:#00000040;padding:4px 12px;border-radius:8px}#needs{align-self:flex-start;margin-top:12px;padding:12px 14px;width:210px;display:flex;flex-direction:column;gap:10px;pointer-events:none}.need{display:flex;flex-direction:column;gap:4px}.need-label{font-size:12px;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase}.bar{height:14px;background:#0006;border:2px solid var(--panel-edge);border-radius:999px;overflow:hidden}.fill{height:100%;width:70%;border-radius:999px;transition:width .45s ease}#bar-hunger{background:var(--bar-hunger)}#bar-happiness{background:var(--bar-happiness)}#bar-hygiene{background:var(--bar-hygiene)}#bar-energy{background:var(--bar-energy)}#readout{position:absolute;top:70px;right:12px;padding:10px 14px;display:flex;flex-direction:column;gap:6px;text-align:right;font-size:13px;color:var(--text-dim);pointer-events:none}#mood{color:var(--text)}#multiplier{color:var(--accent);font-weight:700}#actionbar{align-self:center;display:flex;gap:8px;padding:10px;flex-wrap:wrap;justify-content:center}.action-btn{font-family:var(--font-pixel);font-size:14px;font-weight:700;color:var(--text);background:linear-gradient(180deg,var(--accent) 0%,var(--accent-2) 100%);border:2px solid #7a4a26;border-radius:10px;padding:10px 14px;cursor:pointer;box-shadow:0 4px #5a3318;transition:transform .06s ease,box-shadow .06s ease}.action-btn:hover{filter:brightness(1.08)}.action-btn:active{transform:translateY(3px);box-shadow:0 1px #5a3318}.modal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0000008c}.modal.hidden{display:none}.modal-card{width:min(420px,90vw);max-height:80vh;background:var(--panel);border:2px solid var(--panel-edge);border-radius:14px;box-shadow:0 8px 0 var(--shadow);overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:18px;color:var(--accent);font-weight:700;border-bottom:2px solid var(--panel-edge)}.modal-close{font-family:var(--font-pixel);background:transparent;border:none;color:var(--text-dim);font-size:18px;cursor:pointer}.modal-body{padding:16px;min-height:120px;color:var(--text-dim)}@media (max-width: 520px){#needs{width:160px}.action-btn{font-size:12px;padding:8px 10px}#topbar{font-size:15px}}