@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800;900&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg-dark:#0a0e1a;--bg-panel:#111827;--bg-card:#1e293b;--border:#334155;--text:#e2e8f0;--text-dim:#94a3b8;--accent-blue:#3b82f6;--accent-cyan:#06b6d4;--accent-green:#10b981;--accent-amber:#f59e0b;--accent-red:#ef4444;--gold:#fbbf24}
body{font-family:'Outfit',system-ui,sans-serif;background:var(--bg-dark);color:var(--text);height:100vh;width:100vw;overflow:hidden;user-select:none;-webkit-user-select:none}

/* 动画 */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes dip{0%,100%{transform:translateY(0)}20%{transform:translateY(14px)}50%{transform:translateY(-3px)}70%{transform:translateY(16px)}}
@keyframes ripple{0%{width:0;height:0;opacity:.6;border-width:2px}100%{width:60px;height:24px;opacity:0;border-width:1px}}
@keyframes cloud-move{from{transform:translateX(100vw)}to{transform:translateX(-250px)}}
@keyframes shake{0%,100%{transform:translate(0)}25%{transform:translate(-3px,2px)}75%{transform:translate(3px,-2px)}}
@keyframes stripes{from{background-position:1rem 0}to{background-position:0 0}}
@keyframes fish-swim{0%{transform:translateX(-60px) scaleX(1)}49%{transform:translateX(calc(100%)) scaleX(1)}50%{transform:translateX(calc(100%)) scaleX(-1)}100%{transform:translateX(-60px) scaleX(-1)}}
@keyframes bubble-rise{0%{transform:translateY(0) scale(1);opacity:.6}100%{transform:translateY(-100px) scale(.3);opacity:0}}
@keyframes confetti-fall{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}
@keyframes fade-up{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes counter-pop{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes pulse{from{opacity:.7}to{opacity:1}}
@keyframes walk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes leg-swing{0%,100%{transform-origin:top;transform:rotate(-12deg)}50%{transform-origin:top;transform:rotate(12deg)}}
@keyframes npc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes glow-pulse{0%,100%{opacity:.5;filter:blur(6px)}50%{opacity:1;filter:blur(10px)}}
@keyframes prompt-bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
.shake-intense{animation:shake .15s ease-in-out infinite;border-color:var(--accent-red)!important;box-shadow:0 0 20px rgba(239,68,68,.4)!important}
.stat-pop{animation:counter-pop .3s ease-out}

/* 布局 */
#app{display:flex;flex-direction:column;height:100vh}
.header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:rgba(17,24,39,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);box-shadow:0 4px 20px rgba(0,0,0,.4);z-index:50;flex-shrink:0}
.header-left{display:flex;align-items:center;gap:10px}
.header-logo{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--accent-blue),var(--accent-cyan));display:flex;align-items:center;justify-content:center;font-size:22px}
.header-title{font-size:1.3rem;font-weight:900;letter-spacing:.15em;background:linear-gradient(90deg,#fff,#94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.header-stats{display:flex;gap:16px;align-items:center;background:rgba(0,0,0,.3);padding:6px 16px;border-radius:12px;border:1px solid rgba(51,65,85,.5)}
.stat-item{display:flex;flex-direction:column;align-items:center;gap:2px}
.stat-label{font-size:.6rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em}
.stat-value{font-size:1.1rem;font-weight:900}
.stat-cash{color:#34d399;text-shadow:0 0 8px rgba(52,211,153,.3)}
.stat-casts{color:var(--accent-cyan)}
.main{flex:1;display:flex;overflow:hidden;min-height:0}

/* 岛屿栏 */
.island-bar{display:flex;gap:6px;padding:6px 10px;flex-shrink:0;background:rgba(15,23,42,.9);border-bottom:1px solid var(--border);overflow-x:auto}
.island-bar::-webkit-scrollbar{display:none}
.island-btn{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:10px;border:2px solid var(--border);background:var(--bg-card);color:var(--text-dim);cursor:pointer;font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:700;white-space:nowrap;transition:all .2s;flex-shrink:0}
.island-btn:hover{border-color:rgba(59,130,246,.4);color:var(--text)}
.island-btn.active{border-color:var(--accent-cyan);color:white;background:rgba(6,182,212,.15)}
.island-btn.locked{opacity:.4;cursor:not-allowed}

/* ===== 世界 ===== */
.game-scene{flex:1;display:flex;flex-direction:column;position:relative;min-width:0}
.world-viewport{flex:1;position:relative;overflow:hidden;background:#1a1a2e}
.world{position:absolute;top:0;left:0;width:1800px;height:100%;transition:transform .1s ease-out}

/* 天空 */
.world-sky{position:absolute;top:0;left:0;right:0;bottom:140px;background:linear-gradient(180deg,#38bdf8 0%,#7dd3fc 50%,#bae6fd 100%)}
.sun{position:absolute;top:15px;right:200px;width:60px;height:60px;background:radial-gradient(circle,#fef9c3,#fde047);border-radius:50%;box-shadow:0 0 50px rgba(253,224,71,.7)}
.cloud{position:absolute;fill:white;opacity:.5;width:120px;height:60px}
.cloud-1{animation:cloud-move 50s linear infinite;top:10px;animation-delay:-12s}
.cloud-2{animation:cloud-move 30s linear infinite;top:60px;opacity:.3;width:160px;animation-delay:-5s}

/* 石头地面 */
.stone-ground{position:absolute;bottom:0;left:0;width:1050px;height:140px;background:#52525b;background-image:linear-gradient(to right,rgba(0,0,0,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.1) 1px,transparent 1px);background-size:32px 20px;border-top:4px solid #71717a;z-index:5}

/* 码头 */
.dock-ground{position:absolute;bottom:0;left:1030px;width:400px;height:140px;background:#5c4033;border-top:4px solid #78583c;z-index:5;background-image:repeating-linear-gradient(90deg,transparent,transparent 78px,#4a3224 78px,#4a3224 80px)}
.dock-support{position:absolute;bottom:0;width:20px;background:#4a3224;border:2px solid #3b2a1a;z-index:4}

/* 水面 */
.world-water{position:absolute;bottom:0;left:1000px;right:0;height:140px;background:linear-gradient(180deg,#0ea5e9 0%,#0284c7 30%,#0369a1 60%,#082f49 100%);z-index:2;border-top:3px solid rgba(56,189,248,.4)}
.swimming-fish{position:absolute;font-size:22px;z-index:3;pointer-events:none;animation:fish-swim 12s linear infinite}
.swimming-fish:nth-child(2){animation-duration:15s;animation-delay:-3s;top:40%}
.swimming-fish:nth-child(3){animation-duration:18s;animation-delay:-8s;top:65%;font-size:28px}
.bubble{position:absolute;bottom:0;width:6px;height:6px;background:rgba(255,255,255,.15);border-radius:50%;animation:bubble-rise 4s ease-out infinite;pointer-events:none}

/* ===== 建筑 ===== */
.building{position:absolute;z-index:8;bottom:140px}
.bldg-roof{height:30px;background:#7c2d12;clip-path:polygon(0 100%,50% 0,100% 100%);position:relative}
.bldg-roof::after{content:'';position:absolute;top:4px;left:8%;right:8%;bottom:0;background:#991b1b;clip-path:polygon(0 100%,50% 0,100% 100%)}
.bldg-body{background:#4b5563;border:2px solid #374151;position:relative;box-shadow:inset 0 0 15px rgba(0,0,0,.3)}
.bldg-sign{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:rgba(15,23,42,.9);color:var(--gold);padding:3px 10px;border-radius:5px;font-size:.55rem;font-weight:800;white-space:nowrap;border:1px solid var(--gold);z-index:1}
.bldg-door{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:32px;height:48px;background:#3b2a1a;border-radius:16px 16px 0 0;border:2px solid #2d1b13}
.bldg-window{position:absolute;width:24px;height:22px;background:rgba(253,224,71,.25);border:2px solid #374151;border-radius:3px;box-shadow:0 0 10px rgba(253,224,71,.2)}

/* 灯光 */
.lantern{position:absolute;z-index:9}
.lantern-body{width:14px;height:18px;background:radial-gradient(circle,#fde047,#f59e0b);border-radius:3px 3px 50% 50%;margin:0 auto;border:1px solid #b45309}
.lantern-glow{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:40px;height:40px;background:radial-gradient(circle,rgba(253,224,71,.4),transparent);border-radius:50%;animation:glow-pulse 3s ease-in-out infinite;pointer-events:none}
.lantern-chain{width:2px;height:20px;background:#78716c;margin:0 auto}
.string-lights{position:absolute;z-index:9;display:flex;align-items:flex-end;gap:18px;pointer-events:none}
.light-dot{width:6px;height:6px;border-radius:50%;box-shadow:0 0 6px currentColor;animation:glow-pulse 2s ease-in-out infinite}

/* NPC */
.npc{position:absolute;bottom:140px;z-index:12;cursor:pointer;text-align:center;animation:npc-bob 3s ease-in-out infinite}
.npc-sprite{font-size:2.2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));transition:transform .2s}
.npc:hover .npc-sprite{transform:scale(1.15)}
.npc-name{font-size:.5rem;font-weight:800;color:white;text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap;margin-top:2px}

/* 玩家 */
.player{position:absolute;bottom:140px;z-index:15;pointer-events:none;transition:none}
.player.walking{animation:walk-bob .35s ease-in-out infinite}
.player-body{position:relative;width:30px}
.p-head{width:20px;height:20px;border-radius:50%;background:#fecaca;margin:0 auto;position:relative}
.p-hat{position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:26px;height:12px;background:#ef4444;border-radius:8px 8px 2px 2px;z-index:1}
.p-hat::after{content:'';position:absolute;bottom:0;left:-2px;right:-2px;height:4px;background:#b91c1c;border-radius:2px}
.p-torso{width:18px;height:18px;background:#2563eb;margin:0 auto;border-radius:3px;position:relative}
.p-arm{position:absolute;top:2px;width:7px;height:14px;background:#fecaca;border-radius:4px}
.p-arm.l{left:-6px}.p-arm.r{right:-6px}
.p-legs{display:flex;justify-content:center;gap:3px}
.p-leg{width:7px;height:16px;background:#1e3a8a;border-radius:3px;transform-origin:top}
.player.walking .p-leg:first-child{animation:leg-swing .35s ease-in-out infinite}
.player.walking .p-leg:last-child{animation:leg-swing .35s ease-in-out infinite reverse}
.player.jumping .p-arm{transform:rotate(-18deg)}
.player.jumping .p-leg{transform:rotate(10deg)}

/* 钓鱼设备（仅在码头显示） */
.fishing-rig{position:absolute;bottom:140px;left:1180px;z-index:14;display:none}
.fishing-rig.visible{display:block}
.bobber{position:absolute;top:30px;left:120px;display:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.bobber-top{width:16px;height:16px;background:#ef4444;border-radius:50% 50% 0 0;border:2px solid #b91c1c}
.bobber-btm{width:16px;height:16px;background:white;border-radius:0 0 50% 50%;border:2px solid #cbd5e1}
.bobber-ripple{position:absolute;top:30px;left:8px;transform:translate(-50%,-50%);border-radius:100%;border-color:rgba(255,255,255,.4);border-style:solid;animation:ripple 2s infinite}
.bobber.visible{display:block}
.bobber.floating{animation:float 3s ease-in-out infinite}
.bobber.biting{animation:dip .5s ease-in-out infinite}
.alert-icon{position:absolute;top:-15px;left:115px;display:none;animation:float 1s ease-in-out infinite;z-index:16}
.alert-icon.visible{display:block}
.alert-icon svg{width:40px;height:40px;color:#fde047;filter:drop-shadow(0 0 8px rgba(253,224,71,.7))}

/* 交互提示 */
.interact-prompt{position:absolute;z-index:25;padding:5px 14px;border-radius:8px;background:rgba(15,23,42,.9);color:var(--gold);font-size:.7rem;font-weight:800;border:2px solid var(--gold);white-space:nowrap;display:none;animation:prompt-bounce 1.5s ease-in-out infinite;pointer-events:none}
.interact-prompt.visible{display:block}

/* 商店弹窗 */
.shop-overlay{position:absolute;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5)}
.shop-overlay.visible{display:flex}
.shop-popup{background:rgba(15,23,42,.95);backdrop-filter:blur(12px);border-radius:16px;border:2px solid var(--border);padding:20px;width:320px;box-shadow:0 20px 60px rgba(0,0,0,.7);animation:fade-up .3s ease-out}
.shop-popup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.shop-popup-title{font-size:1rem;font-weight:900}
.shop-close{background:none;border:none;color:var(--text-dim);font-size:1.2rem;cursor:pointer;padding:4px 8px;border-radius:6px}
.shop-close:hover{background:rgba(255,255,255,.1);color:white}
.shop-current{font-size:.7rem;color:var(--text-dim);margin-bottom:12px;padding:8px;background:rgba(0,0,0,.3);border-radius:8px}
.shop-current b{color:var(--text)}

/* 游戏 UI 覆盖 */
.game-hud{position:absolute;inset:0;pointer-events:none;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:20px}
.backpack-hud{pointer-events:auto;display:flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(15,23,42,.85);border-radius:12px;border:1px solid var(--border);margin-bottom:6px}
.bp-icon{font-size:1.1rem}
.bp-track{width:100px;height:8px;background:rgba(0,0,0,.5);border-radius:99px;overflow:hidden}
.bp-fill{height:100%;border-radius:99px;transition:width .3s,background .3s;background:linear-gradient(90deg,var(--accent-green),#34d399)}
.bp-fill.warn{background:linear-gradient(90deg,var(--accent-amber),#fbbf24)}
.bp-fill.full{background:linear-gradient(90deg,var(--accent-red),#f87171);animation:pulse .5s infinite alternate}
.bp-count{font-size:.7rem;font-weight:900;white-space:nowrap}
.bp-full-msg{pointer-events:auto;font-size:.65rem;font-weight:800;color:#fbbf24;background:rgba(15,23,42,.85);padding:4px 12px;border-radius:8px;margin-bottom:4px;display:none}
.bp-full-msg.visible{display:block;animation:pulse .5s infinite alternate}

.minigame-panel{background:rgba(15,23,42,.85);backdrop-filter:blur(12px);padding:20px;border-radius:16px;border:1px solid rgba(100,116,139,.4);box-shadow:0 10px 40px rgba(0,0,0,.5);width:90%;max-width:400px;display:none;pointer-events:auto}
.minigame-panel.visible{display:block}
.minigame-title{text-align:center;font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:.15em;color:var(--gold);margin-bottom:16px;animation:pulse .8s infinite alternate}
.bar-wrap{margin-bottom:14px}
.bar-label{display:flex;justify-content:space-between;font-size:.7rem;font-weight:700;color:var(--text-dim);margin-bottom:4px;text-transform:uppercase;letter-spacing:.08em}
.bar-track{height:18px;background:rgba(0,0,0,.6);border-radius:99px;overflow:hidden;border:2px solid rgba(51,65,85,.6)}
.bar-fill{height:100%;border-radius:99px;transition:width .1s linear,background-color .2s}
.bar-fill.safe{background:linear-gradient(90deg,#10b981,#34d399)}
.bar-fill.warn{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.bar-fill.danger{background:linear-gradient(90deg,#ef4444,#f87171);background-image:linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%);background-size:1rem 1rem;animation:stripes .5s linear infinite}
.bar-fill.distance{background:linear-gradient(90deg,#3b82f6,#06b6d4)}

/* 按钮 */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;font-family:'Outfit',sans-serif;font-weight:900;letter-spacing:.1em;border:none;cursor:pointer;border-radius:14px;transition:all .15s;text-transform:uppercase}
.btn:active{transform:scale(.96)}.btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.5)}
.btn-cast{pointer-events:auto;width:200px;padding:16px;font-size:1.4rem;color:white;background:linear-gradient(180deg,#3b82f6,#4338ca);box-shadow:0 6px 0 #312e81,0 12px 25px rgba(0,0,0,.4)}
.btn-cast:hover:not(:disabled){transform:translateY(-2px)}
.btn-cast:active:not(:disabled){transform:translateY(6px);box-shadow:0 0 0 #312e81}
.btn-cast.waiting{background:linear-gradient(180deg,#475569,#1e293b);box-shadow:0 6px 0 #0f172a}
.btn-cast.bite{background:linear-gradient(180deg,#ef4444,#be123c);box-shadow:0 6px 0 #9f1239;animation:pulse .4s infinite alternate}
.btn-reel{pointer-events:auto;width:100%;padding:14px;font-size:1.3rem;color:white;background:linear-gradient(180deg,#f59e0b,#ea580c);box-shadow:0 5px 0 #9a3412}
.btn-reel:active{transform:translateY(5px);box-shadow:0 0 0 #9a3412}
.btn-buy{width:100%;padding:10px 14px;font-size:.8rem;display:flex;justify-content:space-between;align-items:center;border-radius:10px;color:white;border-bottom:4px solid}
.btn-buy:active:not(:disabled){border-bottom-width:0;margin-top:4px}
.btn-buy.rod{background:var(--accent-blue);border-bottom-color:#1e40af}
.btn-buy.bait{background:var(--accent-pink,#ec4899);border-bottom-color:#9d174d}
.btn-buy.backpack{background:var(--accent-green);border-bottom-color:#047857}
.btn-buy.sell{background:#10b981;border-bottom-color:#047857}
.btn-buy.worker{background:#f59e0b;border-bottom-color:#92400e;color:#111827}
.crew-sell{margin-top:8px}
.btn-cost{color:#fde047;font-weight:900;background:rgba(0,0,0,.2);padding:2px 8px;border-radius:6px}

/* 控制提示 */
.controls-hint{position:absolute;bottom:8px;left:8px;z-index:30;font-size:.55rem;color:rgba(148,163,184,.5);pointer-events:none}

/* 右侧面板 */
.side-panel{width:320px;flex-shrink:0;display:flex;flex-direction:column;background:var(--bg-panel);border-left:1px solid var(--border);z-index:30}
.panel-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.panel-tab{flex:1;padding:10px;text-align:center;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;background:transparent;border:none;color:var(--text-dim);border-bottom:3px solid transparent;transition:all .2s;font-family:'Outfit',sans-serif}
.panel-tab:hover{color:var(--text);background:rgba(255,255,255,.03)}
.panel-tab.active{color:var(--accent-cyan);border-bottom-color:var(--accent-cyan);background:rgba(6,182,212,.05)}
.panel-content{flex:1;overflow-y:auto;min-height:0}
.panel-page{display:none;padding:14px;overflow-y:auto}
.panel-page.active{display:block}

.gear-display{background:var(--bg-card);border-radius:14px;padding:14px;border:1px solid var(--border);margin-bottom:14px}
.gear-title{font-size:.65rem;font-weight:900;color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:10px}
.gear-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0}
.gear-label{font-size:.75rem;color:var(--text-dim);font-weight:600}
.gear-value{font-size:.75rem;font-weight:800;padding:2px 8px;border-radius:6px}
.gear-rod{color:#93c5fd;background:rgba(59,130,246,.15)}
.gear-bait{color:#f9a8d4;background:rgba(236,72,153,.15)}
.gear-special{color:#fde047;background:rgba(251,191,36,.15)}

.worker-card{margin-top:12px;padding:10px;background:rgba(30,41,59,.9);border:1px solid var(--border);border-radius:12px}
.worker-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.75rem;margin-bottom:8px}
.worker-head span{color:var(--accent-green);font-weight:900;white-space:nowrap}
.worker-lines{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;color:var(--text-dim);font-size:.62rem;margin-bottom:8px}
.worker-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.worker-actions button,.crew-panel-btn{border:1px solid var(--border);border-radius:8px;background:rgba(15,23,42,.9);color:var(--text);font-family:'Outfit',sans-serif;font-size:.62rem;font-weight:800;padding:6px;cursor:pointer}
.worker-actions button:disabled,.crew-panel-btn:disabled{opacity:.4;cursor:not-allowed}
.worker-actions button:not(:disabled):hover,.crew-panel-btn:not(:disabled):hover{border-color:var(--accent-cyan);color:white}
.crew-mini-grid{display:flex;gap:4px;flex-wrap:wrap;min-height:24px;margin:8px 0}
.crew-mini-grid span{display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:rgba(15,23,42,.7);border:1px solid var(--border);border-radius:6px;font-size:.8rem}
.crew-panel-btn{width:100%;color:#34d399}

.backpack-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.bp-slot{aspect-ratio:1;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;position:relative}
.bp-slot.empty{opacity:.3}
.bp-slot .sv{position:absolute;bottom:1px;right:2px;font-size:.4rem;font-weight:800;color:var(--accent-green)}

.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.collection-item{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:8px;text-align:center}
.collection-item.caught{border-color:rgba(16,185,129,.3)}
.collection-item.uncaught{opacity:.4;filter:grayscale(1)}
.collection-emoji{font-size:1.5rem;margin-bottom:2px}
.collection-name{font-size:.55rem;font-weight:700;color:var(--text-dim)}
.collection-count{font-size:.55rem;font-weight:900;color:var(--accent-green);margin-top:2px}
.rarity-common{color:#94a3b8}.rarity-uncommon{color:#4ade80}.rarity-rare{color:#60a5fa}.rarity-epic{color:#c084fc}.rarity-legendary{color:#fbbf24}.rarity-mythic{color:#f43f5e;text-shadow:0 0 8px rgba(244,63,94,.5)}

.log-panel{height:160px;flex-shrink:0;background:rgba(0,0,0,.4);border-top:1px solid var(--border);display:flex;flex-direction:column}
.log-header{padding:6px 14px;font-size:.6rem;font-weight:900;color:var(--text-dim);text-transform:uppercase;letter-spacing:.15em;border-bottom:1px solid var(--border);background:rgba(17,24,39,.8)}
.log-content{flex:1;overflow-y:auto;padding:10px 14px;font-family:'JetBrains Mono','SF Mono',monospace;font-size:.65rem}
.log-entry{border-left:2px solid var(--border);padding-left:10px;padding-bottom:4px;margin-bottom:6px;line-height:1.5;animation:fade-up .3s ease-out}
.log-time{color:rgba(100,116,139,.6);font-weight:600;margin-right:8px}

.milestone-banner{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:100;pointer-events:none;opacity:0;transition:opacity .5s}
.milestone-banner.visible{opacity:1;pointer-events:auto}
.milestone-card{background:rgba(15,23,42,.95);backdrop-filter:blur(16px);border-radius:24px;padding:32px 48px;text-align:center;border:2px solid var(--gold);box-shadow:0 0 60px rgba(251,191,36,.3);animation:fade-up .5s ease-out}
.milestone-emoji{font-size:4rem;margin-bottom:8px}
.milestone-name{font-size:1.5rem;font-weight:900;margin-bottom:4px}
.milestone-value{font-size:1.2rem;font-weight:800;color:var(--accent-green)}
.milestone-sub{font-size:.75rem;color:var(--text-dim);margin-top:8px}

.confetti{position:fixed;top:0;width:10px;height:10px;z-index:99;animation:confetti-fall 3s ease-out forwards;pointer-events:none}
.toast-container{position:fixed;top:20%;left:50%;transform:translateX(-50%);z-index:60;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.toast{padding:8px 20px;background:rgba(15,23,42,.9);border-radius:14px;border:1px solid var(--border);font-weight:900;transition:all .5s ease-out;transform:scale(.5);opacity:0}
.toast.show{transform:scale(1) translateY(-20px);opacity:1}
.toast.hide{transform:scale(.8) translateY(-40px);opacity:0}

::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

@media(max-width:768px){
  .main{flex-direction:column}.side-panel{width:100%;height:40%;border-left:none;border-top:1px solid var(--border)}
}