/* ============================================
   FARM VALLEY — Stardew Pixel Style
   ============================================ */
:root {
    --wood-lt:#c8956c; --wood:#a0714a; --wood-dk:#6b4226; --wood-border:#4a2e18;
    --panel:#d4a05a; --panel-in:#e8c888;
    --gold:#f5c842; --gold-dk:#c8a020;
    --green:#4caf50; --green-dk:#2e7d32;
    --blue:#4a8cd8; --red:#e04040;
    --txt-lt:#ffeedd; --txt-dk:#3d2b1f; --txt-sh:#2a1a0e;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;font-family:'Press Start 2P',monospace}
body{overflow:hidden;height:100vh;width:100vw;user-select:none;-webkit-user-select:none;background:#2a6818}
body.season-spring{background:#2a6818}
body.season-summer{background:#2a6818}
body.season-autumn{background:#2a6818}
body.season-winter{background:#2a6818}

/* Weather */
.weather-overlay{position:fixed;inset:0;pointer-events:none;z-index:500;opacity:0;transition:opacity 1s}
body.weather-rain .weather-overlay{opacity:0.4;background:url('data:image/svg+xml;utf8,<svg width="16" height="60" viewBox="0 0 16 60" xmlns="http://www.w3.org/2000/svg"><line x1="8" y1="0" x2="5" y2="60" stroke="rgba(180,210,240,0.15)" stroke-width="0.5"/></svg>') repeat;background-size:32px 60px;animation:rain .6s linear infinite}
body.weather-rain{filter:brightness(.95) saturate(.92)}
@keyframes rain{from{background-position:0 0}to{background-position:-12px 50px}}
.hidden{display:none!important}

/* Pixel panels */
.pixel-panel{background:var(--panel);border:4px solid var(--wood-dk);border-radius:4px;box-shadow:inset 2px 2px 0 var(--panel-in),inset -2px -2px 0 var(--wood),0 4px 0 var(--wood-border),0 6px 12px rgba(0,0,0,.4)}
.pixel-panel-sm{background:var(--panel);border:3px solid var(--wood-dk);border-radius:3px;box-shadow:inset 1px 1px 0 var(--panel-in),inset -1px -1px 0 var(--wood),0 3px 0 var(--wood-border)}

/* Layout */
#app{display:flex;flex-direction:column;height:100vh;width:100vw;padding:0;gap:0;position:relative;z-index:1}

/* ===== HUD ===== */
.hud{position:relative;flex-shrink:0;z-index:10;border-radius:6px;overflow:hidden}
.hud-bg{position:absolute;inset:0;background:linear-gradient(180deg,#c49050 0%,#b07840 40%,#a06830 100%);border:3px solid var(--wood-border);border-radius:6px;box-shadow:inset 0 2px 0 rgba(255,255,255,.15),inset 0 -2px 0 rgba(0,0,0,.2),0 4px 0 #3a1e0a,0 6px 16px rgba(0,0,0,.5)}
.hud-bg::before{content:'';position:absolute;inset:3px;border:2px solid rgba(255,220,160,.12);border-radius:3px;pointer-events:none}
.hud-bg::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 8px,rgba(0,0,0,.015) 8px,rgba(0,0,0,.015) 16px);pointer-events:none}
.hud-content{position:relative;display:flex;align-items:center;gap:10px;padding:8px 18px;z-index:1}

.hud-logo{display:flex;align-items:center;gap:6px;flex-shrink:0}
.logo-leaf{font-size:20px;filter:drop-shadow(1px 2px 1px rgba(0,0,0,.4));animation:leafBob 3s ease-in-out infinite}
@keyframes leafBob{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.logo-text{font-size:1rem;color:#fff8e0;text-shadow:0 0 8px rgba(255,200,60,.3),2px 2px 0 #3a1e0a,-1px -1px 0 #5a3820;letter-spacing:1px;white-space:nowrap}

.hud-divider{width:2px;height:32px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.25) 20%,rgba(0,0,0,.25) 80%,transparent);flex-shrink:0;position:relative}
.hud-divider::after{content:'';position:absolute;left:1px;top:0;width:1px;height:100%;background:linear-gradient(180deg,transparent,rgba(255,220,160,.12) 20%,rgba(255,220,160,.12) 80%,transparent)}
.hud-divider-sm{width:1px;height:24px;background:rgba(0,0,0,.15);flex-shrink:0;margin:0 2px}

.hud-stats{display:flex;align-items:center;gap:6px;flex:1;justify-content:center}

.stat-badge{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.25));border:2px solid rgba(0,0,0,.2);border-radius:20px;position:relative}
.stat-badge::before{content:'';position:absolute;inset:0;border-radius:20px;border:1px solid rgba(255,220,160,.06);pointer-events:none}
.badge-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px;background:radial-gradient(circle,rgba(0,0,0,.2),rgba(0,0,0,.35));border-radius:50%;border:2px solid rgba(0,0,0,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);flex-shrink:0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.gold-icon{background:radial-gradient(circle,rgba(245,200,66,.15),rgba(0,0,0,.3));border-color:rgba(200,160,32,.3)}
.badge-info{display:flex;flex-direction:column;gap:1px}
.badge-title{font-size:.7rem;color:#ffe8b0;text-shadow:1px 1px 0 rgba(0,0,0,.5);letter-spacing:.5px}
.badge-sub{font-size:.55rem;color:rgba(255,232,176,.6);text-shadow:1px 1px 0 rgba(0,0,0,.4)}
.badge-value{font-size:.85rem;color:var(--gold);text-shadow:0 0 6px rgba(245,200,66,.25),1px 1px 0 rgba(0,0,0,.5);font-weight:bold;letter-spacing:.5px}
.badge-unit{font-size:.55rem;color:var(--gold-dk);margin-left:-2px}

.bar-badge{padding-right:6px}
.bar-col{display:flex;flex-direction:column;gap:3px;min-width:50px}
.bar-label{font-size:.45rem;color:rgba(255,232,176,.5);text-shadow:1px 1px 0 rgba(0,0,0,.4);letter-spacing:.3px}
.bar-outer{width:80px;height:10px;background:#1a0e06;border:1px solid #0e0804;border-radius:4px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.bar-outer-xp{width:64px;height:8px}
.bar-inner{height:100%;border-radius:3px;transition:width .3s ease;position:relative}
.energy-bar{background:linear-gradient(180deg,#7cdf50,#4caf50);width:100%;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15),0 0 4px rgba(76,175,80,.3)}
.xp-bar{background:linear-gradient(180deg,#ffe066,#f5c842);width:0%;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15),0 0 4px rgba(245,200,66,.3)}
.bar-num{font-size:.55rem;color:#ffe8b0;text-shadow:1px 1px 0 rgba(0,0,0,.4);min-width:20px;text-align:center}

.hud-sleep-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 14px;background:linear-gradient(180deg,#5a4490,#3d2d6b);border:2px solid #2a1e4a;border-radius:6px;cursor:pointer;box-shadow:0 3px 0 #1a1235,inset 0 1px 0 rgba(255,255,255,.1);transition:all .15s;flex-shrink:0}
.hud-sleep-btn:hover{background:linear-gradient(180deg,#6e54a8,#4a3680);transform:translateY(-1px);box-shadow:0 4px 0 #1a1235,0 0 12px rgba(100,80,180,.3)}
.hud-sleep-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #1a1235}
.sleep-icon{font-size:16px;filter:drop-shadow(0 0 3px rgba(180,160,255,.4))}
.sleep-text{font-size:.45rem;color:#c8b8f0;text-shadow:1px 1px 0 rgba(0,0,0,.4);letter-spacing:.5px}

/* Canvas area */
#game-wrap{flex:1;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:0;border:none;box-shadow:none;background:#2a6818}
#canvas{image-rendering:pixelated;image-rendering:-moz-crisp-edges;cursor:pointer}

/* Tooltip */
.tooltip{position:absolute;padding:7px 11px;background:var(--panel);border:3px solid var(--wood-dk);border-radius:3px;box-shadow:inset 1px 1px 0 var(--panel-in),inset -1px -1px 0 var(--wood),0 3px 0 var(--wood-border),0 6px 10px rgba(0,0,0,.5);z-index:200;pointer-events:none;max-width:210px}
.tt-title{font-size:.8rem;color:var(--txt-dk);margin-bottom:4px}
.tt-desc{font-size:.65rem;color:var(--wood-dk);line-height:1.7}

/* ===== TOOLBAR ===== */
.toolbar{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;flex-shrink:0;z-index:10;border-radius:6px;overflow:hidden}
.toolbar::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#c49050 0%,#b07840 40%,#a06830 100%);border:3px solid var(--wood-border);border-radius:6px;box-shadow:inset 0 2px 0 rgba(255,255,255,.15),inset 0 -2px 0 rgba(0,0,0,.2),0 4px 0 #3a1e0a,0 6px 16px rgba(0,0,0,.5)}
.toolbar::after{content:'';position:absolute;inset:3px;border:2px solid rgba(255,220,160,.12);border-radius:3px;pointer-events:none;z-index:0}
.tb-group{display:flex;gap:4px;position:relative;z-index:1}
.tb-sep{width:2px;height:40px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.25) 15%,rgba(0,0,0,.25) 85%,transparent);margin:0 6px;position:relative;z-index:1}
.tb-sep::after{content:'';position:absolute;left:1px;top:0;width:1px;height:100%;background:linear-gradient(180deg,transparent,rgba(255,220,160,.1) 15%,rgba(255,220,160,.1) 85%,transparent)}

.tb-slot{width:48px;height:48px;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.32));border:2px solid rgba(0,0,0,.25);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:all .15s;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.15)}
.tb-slot::before{content:'';position:absolute;inset:0;border-radius:4px;border:1px solid rgba(255,220,160,.04);pointer-events:none}
.tb-slot:hover{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.22));border-color:rgba(200,150,100,.4);transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 8px rgba(0,0,0,.3)}
.tb-slot.active{background:linear-gradient(180deg,rgba(245,200,66,.08),rgba(245,200,66,.15));border-color:var(--gold);box-shadow:0 0 10px rgba(245,200,66,.2),0 0 20px rgba(245,200,66,.08),inset 0 0 8px rgba(245,200,66,.06)}
.tb-slot.active::after{content:'';position:absolute;inset:-1px;border-radius:6px;border:1px solid rgba(245,200,66,.3);pointer-events:none;animation:slotPulse 2s ease-in-out infinite}
@keyframes slotPulse{0%,100%{opacity:.3}50%{opacity:.8}}

.tb-ico{font-size:22px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.tb-cnt{position:absolute;bottom:2px;right:3px;font-size:8px;color:#ffe8b0;text-shadow:1px 1px 0 #000,-1px -1px 0 rgba(0,0,0,.5);font-weight:bold}
.tb-key{position:absolute;top:2px;left:3px;font-size:7px;color:rgba(255,232,176,.3);text-shadow:1px 1px 0 rgba(0,0,0,.3)}

.tb-btn{width:48px;height:48px;font-size:20px;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.32));border:2px solid rgba(0,0,0,.25);border-radius:6px;cursor:pointer;transition:all .15s;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);position:relative;z-index:1}
.tb-btn:hover{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.22));border-color:rgba(200,150,100,.4);transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 8px rgba(0,0,0,.3)}

/* Side Panel */
.panel{position:absolute;top:6px;right:6px;bottom:6px;width:340px;background:var(--panel);border:4px solid var(--wood-dk);border-radius:4px;box-shadow:inset 2px 2px 0 var(--panel-in),inset -2px -2px 0 var(--wood),-4px 0 20px rgba(0,0,0,.5),0 4px 0 var(--wood-border);z-index:300;display:flex;flex-direction:column;animation:slideR .2s ease-out}
@keyframes slideR{from{transform:translateX(100%)}to{transform:translateX(0)}}
.panel-hdr{display:flex;justify-content:space-between;align-items:center;padding:8px 12px}
.panel-hdr h2{font-size:.85rem;color:var(--txt-dk)}
.btn-x{width:26px;height:26px;font-family:'Press Start 2P',monospace;font-size:9px;background:var(--red);color:#fff;border:2px solid #a02020;border-radius:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 #801818}
.btn-x:hover{background:#f05050}
.panel-body{flex:1;overflow-y:auto;padding:8px}

/* Panel content */
.inv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.inv-cell{aspect-ratio:1;background:var(--wood-dk);border:2px solid var(--wood-border);border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font-size:18px;position:relative;transition:all .1s;box-shadow:inset 1px 1px 0 rgba(255,255,255,.04)}
.inv-cell:hover{border-color:var(--wood-lt);background:var(--wood-border)}
.inv-cnt{position:absolute;bottom:1px;right:2px;font-size:10px;color:var(--txt-lt);text-shadow:1px 1px 0 #000}

.shop-item{display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--wood-dk);border:2px solid var(--wood-border);border-radius:3px;margin-bottom:4px;cursor:pointer;transition:all .1s;box-shadow:inset 1px 1px 0 rgba(255,255,255,.04)}
.shop-item:hover{border-color:var(--wood-lt);background:#7a5030}
.shop-ico{font-size:20px}
.shop-info{flex:1}
.shop-name{font-size:.75rem;color:var(--txt-lt);text-shadow:1px 1px 0 var(--txt-sh);margin-bottom:3px}
.shop-desc{font-size:.6rem;color:var(--gold-dk);line-height:1.6}
.shop-cost{font-size:.75rem;color:var(--gold);text-shadow:1px 1px 0 var(--txt-sh);white-space:nowrap}

.btn-act{font-family:'Press Start 2P',monospace;font-size:.65rem;padding:6px 12px;border:2px solid;border-radius:3px;cursor:pointer;transition:all .1s;text-shadow:1px 1px 0 rgba(0,0,0,.15)}
.btn-act:active{transform:translateY(2px);box-shadow:none}
.btn-green{background:var(--green);color:#fff;border-color:var(--green-dk);box-shadow:0 2px 0 #1a5a1e}
.btn-green:hover{background:#5abf5e}
.btn-green:disabled{background:#666;color:#999;border-color:#444;cursor:not-allowed}
.btn-gold{background:var(--gold);color:var(--txt-dk);border-color:var(--gold-dk);box-shadow:0 2px 0 #8a6a10;text-shadow:none}
.btn-gold:hover{background:#ffd860}

.prod-track{width:100%;height:7px;background:#1a0e06;border:1px solid #0e0804;border-radius:1px;overflow:hidden;margin-top:4px}
.prod-fill{height:100%;background:var(--blue);transition:width .3s}

/* Notifications */
.notif-stack{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:4px;pointer-events:none}
.notif{padding:9px 20px;background:var(--panel);border:3px solid var(--wood-dk);border-radius:3px;font-size:.75rem;color:var(--txt-dk);white-space:nowrap;text-align:center;box-shadow:inset 1px 1px 0 var(--panel-in),0 3px 0 var(--wood-border),0 5px 10px rgba(0,0,0,.4);animation:nIn .25s ease-out,nOut .4s 2.6s ease-in forwards}
.notif-gold{border-color:var(--gold-dk)}.notif-green{border-color:var(--green-dk)}.notif-red{border-color:#a02020}
@keyframes nIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes nOut{from{opacity:1}to{opacity:0;transform:translateY(-8px)}}

/* Scrollbar */
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--wood-dk)}::-webkit-scrollbar-thumb{background:var(--wood);border-radius:3px}