:root{
      --bg:#20120c; --bg2:#2d1a12; --card:#3a241a; --card2:#4a3024; --line:#6a4636;
      --text:#f7ead8; --muted:#b79d8b; --soft:#8b6f60; --coffee:#ffc879; --accent:#e19343;
      --green:#52d273; --green2:#1f7a3f; --red:#ef6b6b; --blue:#64a6ff; --purple:#b18cff;
      --shadow: 0 18px 50px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at top left,#54301d 0,#28150d 36%,#130b08 100%);overflow-x:hidden}
    body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,200,121,.09) 1px,transparent 1px);background-size:22px 22px;opacity:.45}
    button,input,textarea{font:inherit} button{border:0;color:inherit} .wrap{width:min(1240px,calc(100% - 24px));margin:0 auto;padding:18px 0 30px;position:relative;z-index:1}
    .topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid var(--line);background:rgba(58,36,26,.9);border-radius:24px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}
    .brand{display:flex;align-items:center;gap:12px;min-width:240px}.logo{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#6b3d25,#2c180f);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 8px 20px rgba(0,0,0,.25);font-size:24px}.brand h1{font-size:clamp(1.35rem,2.5vw,2.25rem);margin:0;line-height:1;color:var(--coffee)}.brand small{display:block;color:var(--muted);font-weight:800;margin-top:4px}.actions{display:flex;gap:8px;flex-wrap:nowrap;justify-content:flex-end;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.actions::-webkit-scrollbar{display:none}.btn.icon-only{width:48px;height:48px;padding:0;font-size:1.65rem;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#782828;color:#fff;font-size:0.65rem;padding:2px 5px;border-radius:10px;line-height:1;border:1px solid rgba(255,255,255,0.2);pointer-events:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 12px;border-radius:14px;background:#513326;border:1px solid rgba(255,255,255,.08);cursor:pointer;font-weight:900;transition:.15s;box-shadow:0 6px 16px rgba(0,0,0,.18);white-space:nowrap}.btn:hover{transform:translateY(-1px);background:#62402f}.btn:active{transform:translateY(1px) scale(.99)}.btn.primary{background:#9a5b22}.btn.green{background:#1d7540}.btn.blue{background:#225e9a}.btn.red{background:#782828}.btn.ghost{background:#2a1911}.btn:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.4);transform:none}.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,520px);gap:18px;margin-top:18px}.stack{display:grid;gap:18px}.card{background:rgba(58,36,26,.88);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:18px}.card.dark{background:rgba(31,18,12,.84)}.hero{position:relative;overflow:hidden;min-height:410px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.statsTop{position:absolute;top:16px;left:16px;right:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.stat{background:rgba(20,10,6,.55);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:10px}.stat b{display:block;font-size:clamp(1rem,2vw,1.3rem);color:var(--coffee)}.stat span{font-size:.72rem;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.05em}.coffeeNum{font-size:clamp(3rem,9vw,7rem);font-weight:1000;color:var(--coffee);line-height:1;text-shadow:0 8px 28px rgba(0,0,0,.45);margin-top:70px}.subline{font-size:clamp(1.1rem,3vw,2rem);font-weight:1000;color:#e2c9b7}.cup{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#ffe4b3 0,#d18435 18%,#6b3b22 52%,#1b0e08 100%);border:6px solid #6b4431;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 70px rgba(225,147,67,.25),inset 0 -18px 30px rgba(0,0,0,.3);font-size:76px;margin:22px auto 14px;transition:.12s}.cup:hover{transform:scale(1.025);box-shadow:0 0 90px rgba(255,200,121,.35),inset 0 -18px 30px rgba(0,0,0,.3)}.cup:active{transform:scale(.95)}.combo{width:min(420px,100%);margin:4px auto 8px}.bar{height:18px;background:#170c07;border:1px solid #674333;border-radius:999px;overflow:hidden}.fill{height:100%;width:0;background:linear-gradient(90deg,#70d86e,#e6cb50,#e88437,#ca50ff);transition:width .12s linear}.comboText{font-size:.85rem;color:var(--muted);font-weight:900;margin-top:6px}.miniGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.sectionTitle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}.sectionTitle h2,.sectionTitle h3{margin:0;color:var(--coffee)}.sectionTitle h2{font-size:1.55rem}.sectionTitle h3{font-size:1.15rem}.pill{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:#21120b;border:1px solid var(--line);font-size:.78rem;font-weight:1000;color:var(--muted)}.shop{position:sticky;top:154px;max-height:calc(100vh - 176px);display:flex;flex-direction:column}.shopScroll{overflow:auto;padding-right:6px;display:grid;gap:16px}.buyModes{display:flex;background:#1b0e08;border:1px solid var(--line);border-radius:14px;overflow:hidden}.buyModes button{background:transparent;color:var(--muted);padding:8px 10px;font-size:.8rem;font-weight:1000;cursor:pointer}.buyModes button.active{background:#8d5d46;color:white}.items{display:grid;gap:10px}.item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:18px;background:rgba(31,18,12,.75);border:1px solid rgba(255,255,255,.08)}.item .icon{width:42px;height:42px;border-radius:14px;background:#2f1b12;display:grid;place-items:center;font-size:22px}.item h4{margin:0 0 2px;font-size:1rem}.item p{margin:0;color:var(--muted);font-size:.82rem}.item .meta{font-size:.78rem;color:#a88470;margin-top:4px;font-weight:800}.item .buy{min-width:118px}.cost{font-weight:1000;color:var(--coffee);font-size:.9rem}.prestigeGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.prestigeBox{padding:15px;border-radius:20px;background:#21120b;border:1px solid rgba(255,255,255,.08)}.prestigeBox h3{margin:0 0 8px}.prestigeBox p{margin:4px 0;color:var(--muted);font-weight:800;font-size:.9rem}.assistantBox p{color:#d9c4b4;min-height:44px}.bonusLine{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.bonusLine .stat{padding:9px}.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:80;display:none;align-items:center;justify-content:center;padding:16px}.modal.open{display:flex}.modalBox{width:min(900px,100%);max-height:88vh;overflow:auto;background:#342016;border:1px solid var(--line);border-radius:28px;box-shadow:0 30px 100px rgba(0,0,0,.55);padding:18px}.modalHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.modalHeader h2{margin:0;color:var(--coffee);font-size:2rem}.modalHeader p{margin:6px 0 0;color:var(--muted)}.close{width:42px;height:42px;border-radius:14px;background:#1b0e08;cursor:pointer;font-weight:1000}.potGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.pot{min-height:210px;border-radius:22px;background:#21120b;border:1px solid rgba(255,255,255,.08);padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.potIcon{font-size:46px;margin-bottom:8px}.pot h3{margin:0 0 6px}.pot p{margin:0;color:var(--muted);font-size:.9rem}.progress{width:100%;height:16px;background:#140a06;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:12px 0}.progress span{display:block;height:100%;background:linear-gradient(90deg,#2f9b51,#72db79);width:0}.toastWrap{position:fixed;right:16px;bottom:16px;z-index:120;display:grid;gap:10px;pointer-events:none}.toast{background:rgba(158,91,33,.96);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:12px 14px;min-width:260px;box-shadow:var(--shadow);animation:toast 3.6s forwards}.toast b{display:block}.toast span{color:#ffe4c3;font-size:.9rem}.float{position:fixed;z-index:90;pointer-events:none;font-size:1.5rem;font-weight:1000;color:var(--coffee);animation:float 1s ease-out forwards;text-shadow:0 5px 18px rgba(0,0,0,.7)}.goldenBean{position:fixed;z-index:70;width:70px;height:70px;border-radius:50%;display:none;place-items:center;background:#ffc83d;color:#4a260c;box-shadow:0 0 35px rgba(255,200,61,.8);font-size:36px;cursor:pointer;border:4px solid rgba(255,255,255,.35);animation:bounce 1.2s infinite}.challengeBanner{display:none;position:fixed;left:50%;top:88px;transform:translateX(-50%);z-index:65;width:min(980px,calc(100% - 24px));background:rgba(112,30,30,.95);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:10px 16px;box-shadow:var(--shadow);align-items:center;justify-content:space-between;gap:12px}.challengeBanner.show{display:flex}.challengeBanner b{display:block}.challengeBanner span{color:#ffd1d1;font-size:.88rem}.list{display:grid;gap:10px}.textarea{width:100%;min-height:170px;background:#160c08;color:var(--text);border:1px solid var(--line);border-radius:18px;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem}.good{color:var(--green)!important}.bad{color:var(--red)!important}.blueText{color:var(--blue)!important}.muted{color:var(--muted)!important}.hidden{display:none!important}.developerBar{margin-top:12px;text-align:center;color:var(--muted);font-weight:900;font-size:.9rem;background:rgba(58,36,26,.8);border:1px solid var(--line);border-radius:14px;padding:8px 12px;box-shadow:0 4px 10px rgba(0,0,0,.15)}.developerBar b{color:var(--coffee)}@keyframes float{to{opacity:0;transform:translateY(-58px) scale(1.15)}}@keyframes toast{0%{transform:translateY(18px);opacity:0}10%,88%{transform:translateY(0);opacity:1}100%{transform:translateY(18px);opacity:0}}@keyframes bounce{50%{transform:translateY(-8px) scale(1.06)}}@media(max-width:960px){.grid{grid-template-columns:1fr}.shop{position:relative;top:auto;max-height:none}.statsTop{grid-template-columns:repeat(2,1fr)}.coffeeNum{margin-top:120px}.potGrid,.prestigeGrid,.bonusLine{grid-template-columns:1fr}.topbar{position:relative !important;top:auto !important;flex-direction:column;align-items:stretch;gap:10px;padding:12px 10px}.brand{justify-content:center}.actions{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}.btn.icon-only{width:42px;height:42px;font-size:1.4rem}.challengeBanner{top:10px;display:none;flex-direction:column;align-items:flex-start}.challengeBanner.show{display:flex}}
    /* ===== WETTER-SYSTEM v2.7 ===== */
    .weatherBar{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);background:rgba(58,36,26,.85);border-radius:16px;margin-top:10px;box-shadow:0 4px 12px rgba(0,0,0,.18);transition:background .6s ease,border-color .6s ease;position:relative;overflow:hidden}
    .weatherBar::before{content:'';position:absolute;inset:0;opacity:.10;pointer-events:none;transition:all .6s ease}
    .weatherBar.sunny{border-color:#ffd36e;background:rgba(78,46,8,.88)}.weatherBar.sunny::before{background:radial-gradient(ellipse at 50% -10%,#ffe066 0%,transparent 65%);opacity:.18}
    .weatherBar.rainy{border-color:#6abaff;background:rgba(14,28,52,.88)}.weatherBar.rainy::before{background:radial-gradient(ellipse at 50% -10%,#4a8fff 0%,transparent 65%);opacity:.18}
    .weatherBar.heatwave{border-color:#ff7550;background:rgba(60,16,4,.90)}.weatherBar.heatwave::before{background:radial-gradient(ellipse at 50% -10%,#ff4400 0%,transparent 65%);opacity:.22}
    .weatherBar.blizzard{border-color:#aad8ff;background:rgba(8,20,44,.90)}.weatherBar.blizzard::before{background:radial-gradient(ellipse at 50% -10%,#80c8ff 0%,transparent 65%);opacity:.20}
    .weatherIcon{font-size:2rem;flex-shrink:0;display:inline-block;animation:weatherPulse 2.8s ease-in-out infinite}
    .weatherInfo{display:flex;flex-direction:column;flex:1;gap:3px;min-width:0}
    .weatherName{font-weight:900;font-size:.92rem;color:var(--coffee)}
    .weatherBoni{display:flex;gap:5px;flex-wrap:wrap}
    .weatherBon{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;font-size:.70rem;font-weight:900;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.10)}
    .weatherBon.pos{color:#78e898;border-color:rgba(120,232,152,.3)}.weatherBon.neg{color:#f09090;border-color:rgba(240,144,144,.3)}
    .weatherTimer{font-size:.75rem;color:var(--muted);font-weight:800;white-space:nowrap;text-align:right;flex-shrink:0}
    @keyframes weatherPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.10)}}
    @keyframes weatherIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
    .weatherBar{animation:weatherIn .45s ease-out}
    @media(max-width:760px){.weatherBar{flex-wrap:wrap;gap:8px}.weatherTimer{width:100%;text-align:left}}
    /* ============================== */
    button,.btn,.cup,.goldenBean{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.shopHeader{margin-bottom:12px}.shopHeaderMain{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}.shopToggle,.sectionToggle{min-width:46px;width:46px;height:42px;padding:0;font-size:1.1rem;flex:0 0 auto}.shopSectionHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.shopSectionHeader h3{margin:0;color:var(--coffee)}.shopSectionMeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.shopSection.collapsed .items{display:none}.shopSection.collapsed .shopSectionHeader{margin-bottom:0}@media (max-width: 760px){html{scroll-padding-top:10px}body{background:radial-gradient(circle at top left,#4d2b1a 0,#24130d 42%,#100906 100%)}body:before{background-size:18px 18px;opacity:.24}.wrap{width:min(100% - 12px,1240px);padding:8px 0 92px}.topbar{position:relative !important;top:auto !important;padding:10px;border-radius:20px;display:flex;flex-direction:column;gap:10px}.brand{min-width:0;width:100%}.logo{width:42px;height:42px;border-radius:15px;font-size:21px;flex:0 0 auto}.brand h1{font-size:clamp(1.26rem,7vw,1.75rem)}.brand small{font-size:.73rem}.actions{width:100%;display:flex;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:4px;-webkit-overflow-scrolling:touch}.btn{width:100%;min-height:46px;padding:10px 9px;border-radius:13px;font-size:.88rem;line-height:1.15;white-space:normal;text-align:center}.btn.icon-only{width:42px;height:42px;min-height:42px;font-size:1.4rem;padding:0}.grid{grid-template-columns:1fr;gap:12px;margin-top:12px}.stack{gap:12px}.card{padding:13px;border-radius:22px}.hero{min-height:auto;justify-content:start;padding:12px}.statsTop{position:static;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:12px}.stat{padding:9px 8px;border-radius:15px}.stat b{font-size:clamp(.98rem,5vw,1.22rem);overflow-wrap:anywhere}.stat span{font-size:.66rem;line-height:1.15}.coffeeNum{margin-top:0;font-size:clamp(1.8rem,11vw,4.8rem);letter-spacing:-.045em;white-space:nowrap}.subline{font-size:clamp(1rem,5.4vw,1.42rem)}.cup{width:138px;height:138px;font-size:56px;margin:16px auto 12px}.combo{width:100%}.bar{height:16px}.bonusLine{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:100%}.prestigeGrid,.miniGrid,.potGrid{grid-template-columns:1fr;gap:10px}.prestigeBox{padding:14px;border-radius:20px}.prestigeBox p{font-size:.88rem}.assistantBox p{min-height:auto;line-height:1.45}.shop{position:relative;top:auto;max-height:none}.shopScroll{overflow:visible;padding-right:0;gap:12px}.sectionTitle{align-items:flex-start;flex-direction:column;gap:8px}.sectionTitle h2{font-size:1.34rem}.sectionTitle h3{font-size:1.03rem}.buyModes{width:100%;display:grid;grid-template-columns:repeat(4,1fr);border-radius:13px}.buyModes button{min-height:40px;padding:8px 5px;font-size:.78rem}.items{gap:8px}.item{grid-template-columns:42px minmax(0,1fr);gap:10px;padding:11px;border-radius:17px;align-items:start}.item .icon{width:40px;height:40px;border-radius:13px;font-size:20px}.item h4{font-size:.98rem;line-height:1.2}.item p{font-size:.8rem;line-height:1.35}.item .meta{font-size:.75rem;line-height:1.3}.item > div:last-child{grid-column:1 / -1;width:100%}.item .buy,.item > div:last-child .btn{width:100%;min-width:0}.pill{font-size:.74rem;white-space:normal}.modal{padding:7px;align-items:flex-start;overflow:auto}.modalBox{width:100%;max-height:none;margin:8px 0 96px;padding:14px;border-radius:22px}.modalHeader{gap:8px}.modalHeader h2{font-size:clamp(1.55rem,9vw,2rem);line-height:1.05}.modalHeader p{font-size:.88rem;line-height:1.4}.close{width:40px;height:40px;flex:0 0 auto}.pot{min-height:170px;padding:14px;border-radius:19px}.potIcon{font-size:38px}.textarea{min-height:210px;font-size:.76rem}.toastWrap{left:8px;right:8px;bottom:8px}.toast{min-width:0;width:100%;border-radius:15px;padding:10px 12px}.float{font-size:1.2rem}.goldenBean{width:58px;height:58px;font-size:29px}.challengeBanner{left:6px;right:6px;top:auto;bottom:8px;transform:none;width:auto;border-radius:18px;padding:10px;flex-direction:column;align-items:stretch}.challengeBanner > div:last-child{display:grid !important;grid-template-columns:1fr;gap:7px !important}}@media (max-width: 390px){.wrap{width:min(100% - 8px,1240px)}.actions{grid-template-columns:1fr}.statsTop,.bonusLine{grid-template-columns:1fr 1fr}.coffeeNum{font-size:clamp(1.5rem,10vw,3.8rem)}.cup{width:124px;height:124px;font-size:50px}}.tree-container{display:flex;flex-direction:column;gap:20px;padding:6px}.tree-exchange-panel{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;background:rgba(23,12,8,0.7);border:1px solid var(--line);padding:16px;border-radius:20px;text-align:center}.tree-exchange-panel .box{display:flex;flex-direction:column;align-items:center}.tree-exchange-panel .box b{font-size:1.6rem;color:var(--coffee)}.tree-exchange-panel .box span{font-size:0.8rem;color:var(--muted);font-weight:800;text-transform:uppercase}.tree-exchange-actions{display:flex;flex-direction:column;gap:8px;min-width:160px}.tree-exchange-actions .btn{width:100%;min-height:38px;padding:8px 10px}.tree-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}.tree-node{background:rgba(31,18,12,0.85);border:2px solid rgba(255,255,255,0.08);border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:8px;position:relative;cursor:pointer;transition:all 0.2s ease;box-shadow:var(--shadow)}.tree-node:hover:not(.locked):not(.exclusive-locked){transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 24px rgba(225,147,67,0.25)}.cup:disabled{opacity:0.4 !important;cursor:not-allowed !important;filter:saturate(0.3) !important;transform:none !important;pointer-events:none !important}.tree-summary-panel{background:rgba(30,20,14,0.8);border:1px solid var(--line);border-radius:20px;padding:12px;font-weight:800;font-size:0.9rem;text-align:center;color:var(--coffee);line-height:1.45}.tree-node.active{background:rgba(26,68,48,0.95) !important;border-color:var(--green) !important;box-shadow:0 0 25px rgba(82,210,115,0.35) !important}.tree-node.bought{background:rgba(30,60,40,0.85);border-color:var(--green);box-shadow:0 0 20px rgba(82,210,115,0.15)}.tree-node.available{border-color:var(--coffee);box-shadow:0 0 15px rgba(255,200,121,0.15)}@keyframes pulseGlow{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,200,121,0.4)}70%{transform:scale(1.02);box-shadow:0 0 0 6px rgba(255,200,121,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,200,121,0)}}.tree-node.locked{opacity:0.55;cursor:not-allowed}.tree-node.exclusive-locked{opacity:0.4;border-style:dashed;border-color:var(--red);cursor:not-allowed}.tree-node h4{margin:0;font-size:1.05rem;color:#ffe0b6;display:flex;align-items:center;gap:8px}.tree-node p{margin:0;font-size:0.84rem;color:var(--muted);line-height:1.35;flex-grow:1}.tree-node .node-meta{display:flex;justify-content:space-between;align-items:center;font-size:0.76rem;font-weight:800;margin-top:4px}.tree-node .node-cost{color:var(--coffee)}.tree-node .node-status{padding:2px 6px;border-radius:999px;font-size:0.68rem;background:rgba(0,0,0,0.3)}.tree-node.bought .node-status{background:var(--green2);color:white}.tree-node.locked .node-status{color:var(--muted)}.tree-node.exclusive-locked .node-status{background:var(--red);color:white}.tree-node.available .node-status{background:var(--accent-2);color:white}.tree-respec-btn{width:100%;margin-top:14px;padding:14px;font-size:1rem;border-radius:18px}.tree-help-text{font-size:0.86rem;color:var(--muted);text-align:center;line-height:1.45;margin-top:6px}@media (max-width: 760px){.tree-grid{grid-template-columns:1fr;gap:12px}.tree-exchange-panel{grid-template-columns:1fr;gap:12px}}
    /* === V3.1: Worldmap-System === */
    .worldmap-container {
      position: relative;
      width: 100%;
      height: 260px; /* Kompakte Höhe für perfektes UI-Fitting ohne Scrollen */
      background: radial-gradient(circle at center, #2d170b 0%, #100603 100%);
      border: 2px solid var(--line);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: inset 0 0 45px rgba(0,0,0,0.85), var(--shadow);
      margin-top: 14px;
    }
    .worldmap-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }
    .worldmap-bg-grid {
      position: absolute;
      inset: 0;
      background-image: radial-gradient(var(--line) 1px, transparent 1px);
      background-size: 24px 24px;
      opacity: 0.15;
      pointer-events: none;
    }
    .worldmap-pin {
      position: absolute;
      width: 46px;
      height: 46px;
      background: rgba(43, 23, 15, 0.85);
      border: 2px solid var(--coffee);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      cursor: pointer;
      transform: translate(-50%, -50%);
      transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 4px 15px rgba(0,0,0,0.5);
      z-index: 5;
    }
    .worldmap-pin:hover:not(.locked) {
      transform: translate(-50%, -50%) scale(1.18);
      border-color: var(--accent);
      box-shadow: 0 0 20px var(--accent);
    }
    .worldmap-pin::after {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 2px solid var(--accent);
      opacity: 0;
      animation: pinPulse 2s infinite ease-out;
    }
    @keyframes pinPulse {
      0% { transform: scale(0.8); opacity: 0.8; }
      100% { transform: scale(1.6); opacity: 0; }
    }
    .worldmap-pin.active {
      border-color: var(--green) !important;
      box-shadow: 0 0 25px var(--green) !important;
    }
    .worldmap-pin.locked {
      opacity: 0.35;
      filter: saturate(0);
      cursor: not-allowed;
    }
    .worldmap-pin.locked::after {
      animation: none;
    }
    #pin-seattle { top: 38%; left: 18%; }
    #pin-kenia { top: 62%; left: 54%; }
    #pin-tokio { top: 45%; left: 82%; }
    #pin-triest { top: 40%; left: 48%; }

    .worldmap-detail-panel {
      background: rgba(30, 18, 12, 0.85);
      backdrop-filter: blur(10px);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 18px;
      margin-top: 14px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 160px;
    }
    .worldmap-detail-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }
    .worldmap-detail-header h3 {
      margin: 0;
      font-size: 1.3rem;
      color: var(--coffee);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .worldmap-level-meter {
      display: flex;
      gap: 4px;
    }
    .worldmap-level-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.1);
    }
    .worldmap-level-dot.active {
      background: var(--green);
      box-shadow: 0 0 8px var(--green);
    }
    .worldmap-level-dot.super {
      background: var(--accent);
      box-shadow: 0 0 8px var(--accent);
    }
    @media (max-width: 760px) {
      .worldmap-container {
        height: 200px;
      }
    }
    /* === Feature-Unlock Animationen === */
    .btn.locked-feature{opacity:.38;filter:saturate(.12)}
    @keyframes featureUnlock{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(100,166,255,.75),var(--shadow)}50%{transform:scale(1.13);box-shadow:0 0 0 16px rgba(100,166,255,0),var(--shadow)}100%{transform:scale(1);box-shadow:var(--shadow)}}
    .btn.just-unlocked{animation:featureUnlock .75s cubic-bezier(.36,.07,.19,.97) forwards}
    @keyframes boerseReveal{from{opacity:0;transform:scale(.4) translateY(-12px)}to{opacity:1;transform:scale(1) translateY(0)}}
    .btn.boerse-reveal{animation:boerseReveal .5s cubic-bezier(.34,1.56,.64,1) forwards}
    .unlock-neu{position:absolute;top:-7px;right:-7px;background:var(--green);color:#fff;font-size:.52rem;padding:2px 5px;border-radius:8px;font-weight:900;line-height:1;pointer-events:none;z-index:10;animation:unlockBadgePop .3s ease-out}
    @keyframes unlockBadgePop{from{transform:translate(-50%, -50%) scale(0) rotate(-15deg)}to{transform:translate(-50%, -50%) scale(1) rotate(0)}}
    .blink-alert { animation: pulseGlow 1.5s infinite alternate !important; border-color: var(--green) !important; box-shadow: 0 0 15px rgba(82,210,115,0.4) !important; }
    .nav-icon {
      font-size: 1.65rem;
      display: inline-block;
      line-height: 1;
    }
    .nav-icon.large {
      font-size: 2.3rem;
    }
    @media(max-width:760px){
      .nav-icon {
        font-size: 1.4rem;
      }
      .nav-icon.large {
        font-size: 1.95rem;
      }
    }
    /* === V3.2: Cloud-Save & Account Update === */
    .cloud-btn-status {
      position: relative;
      transition: all 0.3s ease;
    }
    .cloud-btn-status.logged-in {
      border-color: var(--green) !important;
      animation: cloudPulseGreen 2.5s infinite alternate;
    }
    .cloud-btn-status.offline {
      border-color: var(--accent) !important;
      animation: cloudPulseOrange 2.5s infinite alternate;
    }
    @keyframes cloudPulseGreen {
      0% { box-shadow: 0 0 4px rgba(82, 210, 115, 0.2); }
      100% { box-shadow: 0 0 16px rgba(82, 210, 115, 0.65); }
    }
    @keyframes cloudPulseOrange {
      0% { box-shadow: 0 0 4px rgba(225, 147, 67, 0.2); }
      100% { box-shadow: 0 0 16px rgba(225, 147, 67, 0.65); }
    }
    
    /* Cloud-Modal spezifische Styles */
    .cloud-status-badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 800;
      margin-top: 6px;
      background: rgba(0,0,0,0.3);
    }
    .cloud-status-badge.connected { color: var(--green); border: 1px solid rgba(82, 210, 115, 0.3); }
    .cloud-status-badge.offline { color: var(--accent); border: 1px solid rgba(225, 147, 67, 0.3); }
    .cloud-status-badge.logged-out { color: var(--muted); border: 1px solid var(--line); }
    
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      text-align: left;
      margin-bottom: 14px;
    }
    .form-group label {
      font-size: 0.85rem;
      font-weight: 800;
      color: var(--muted);
    }
    .form-control {
      width: 100%;
      padding: 10px 14px;
      border-radius: 12px;
      background: rgba(20, 10, 6, 0.5);
      border: 1px solid var(--line);
      color: var(--text);
      font-size: 1rem;
      transition: border-color 0.2s;
    }
    .form-control:focus {
      outline: none;
      border-color: var(--coffee);
    }
    
    /* Konflikt Modal Styles */
    .conflict-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin: 18px 0;
    }
    .conflict-card {
      background: rgba(33, 18, 11, 0.85);
      border: 2px solid var(--line);
      border-radius: 20px;
      padding: 16px;
      text-align: center;
      transition: all 0.25s ease;
      cursor: pointer;
    }
    .conflict-card:hover {
      transform: translateY(-2px);
      border-color: var(--coffee);
      box-shadow: 0 8px 24px rgba(255, 200, 121, 0.15);
    }
    .conflict-card.selected {
      border-color: var(--green) !important;
      background: rgba(26, 68, 48, 0.7) !important;
      box-shadow: 0 0 25px rgba(82, 210, 115, 0.25) !important;
    }
    .conflict-card.better-save {
      border-color: rgba(82, 210, 115, 0.5);
      box-shadow: 0 0 15px rgba(82, 210, 115, 0.15);
    }
    .conflict-card.better-save:hover {
      border-color: var(--green);
      box-shadow: 0 0 25px rgba(82, 210, 115, 0.3);
    }
    .conflict-card.worse-save {
      border-color: rgba(239, 107, 107, 0.5);
      box-shadow: 0 0 15px rgba(239, 107, 107, 0.1);
    }
    .conflict-card.worse-save:hover {
      border-color: var(--red);
      box-shadow: 0 0 25px rgba(239, 107, 107, 0.2);
    }
    .conflict-header-title {
      font-size: 1.25rem;
      font-weight: 900;
      color: var(--coffee);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .conflict-stat-row {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      font-size: 0.9rem;
    }
    .conflict-stat-row:last-child {
      border-bottom: none;
    }
    .conflict-stat-label {
      color: var(--muted);
      font-weight: 700;
    }
    .conflict-stat-value {
      font-weight: 900;
    }
    @media(max-width: 760px) {
      .conflict-grid {
        grid-template-columns: 1fr;
      }
    }
    
    /* === V3.3: Global Leaderboard Styles === */
    .leaderboard-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 15px;
      text-align: left;
    }
    .leaderboard-table th {
      padding: 12px 14px;
      color: var(--muted);
      font-weight: 800;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-bottom: 2px solid var(--line);
    }
    .leaderboard-table td {
      padding: 12px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      font-size: 0.95rem;
      vertical-align: middle;
    }
    .leaderboard-row {
      transition: background 0.2s ease;
    }
    .leaderboard-row:hover {
      background: rgba(255, 255, 255, 0.02);
    }
    .leaderboard-row.own-player {
      background: rgba(82, 210, 115, 0.08) !important;
      border-left: 4px solid var(--green);
    }
    .leaderboard-row.own-player td {
      font-weight: 800;
      color: #fff;
    }
    
    /* Top 3 Ränge Auszeichnungen */
    .rank-badge {
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      font-weight: 900;
      font-size: 0.9rem;
      background: rgba(0,0,0,0.3);
    }
    .leaderboard-row.rank-1 .rank-badge {
      background: linear-gradient(135deg, #ffe066, #d4af37);
      color: #4a3300;
      box-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
    }
    .leaderboard-row.rank-2 .rank-badge {
      background: linear-gradient(135deg, #e3e3e3, #a1a1a1);
      color: #2b2b2b;
      box-shadow: 0 0 10px rgba(161, 161, 161, 0.35);
    }
    .leaderboard-row.rank-3 .rank-badge {
      background: linear-gradient(135deg, #d3a17e, #a05a2c);
      color: #fff;
      box-shadow: 0 0 10px rgba(160, 90, 44, 0.35);
    }
    .leaderboard-row.rank-1 {
      background: rgba(212, 175, 55, 0.03);
    }
    
    /* Lade-Spinner */
    .leaderboard-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 0;
      gap: 12px;
    }
    .leaderboard-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid rgba(255, 255, 255, 0.08);
      border-top-color: var(--coffee);
      border-radius: 50%;
      animation: spin 1s infinite linear;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    /* === Auto-Plant Toggle Switch Style === */
    .switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 26px;
    }
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.08);
      border: 1px solid var(--line);
      transition: .3s;
    }
    .slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: #fff;
      transition: .3s;
    }
    input:checked + .slider {
      background-color: var(--green);
      box-shadow: 0 0 10px rgba(82, 210, 115, 0.3);
      border-color: rgba(82, 210, 115, 0.5);
    }
    input:focus + .slider {
      box-shadow: 0 0 1px var(--green);
    }
    input:checked + .slider:before {
      transform: translateX(24px);
    }
    .slider.round {
      border-radius: 34px;
    }
    .slider.round:before {
      border-radius: 50%;
    }
    input:disabled + .slider {
      background-color: rgba(255, 255, 255, 0.03) !important;
      border-color: rgba(255, 255, 255, 0.05) !important;
      cursor: not-allowed;
    }
    input:disabled + .slider:before {
      background-color: rgba(255, 255, 255, 0.2) !important;
    }
    
    /* === V3.4: Fishing Minigame CSS === */
    .fishing-water-col {
      background: linear-gradient(180deg, #162a3d 0%, #07121b 100%) !important;
    }
    .fishing-bait-card {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(31, 18, 12, 0.6);
      border: 1px solid rgba(255,255,255,0.06);
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .fishing-bait-card:hover {
      background: rgba(31, 18, 12, 0.85);
      border-color: var(--coffee);
    }
    .fishing-bait-card.selected {
      background: rgba(43, 85, 115, 0.25);
      border-color: var(--blue);
      box-shadow: 0 0 10px rgba(100, 166, 255, 0.15);
    }
    .fish-item-card {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 8px 12px;
      border-radius: 14px;
      background: rgba(31, 18, 12, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.05);
      transition: all 0.2s;
    }
    .fish-item-card.captured {
      cursor: pointer;
    }
    .fish-item-card.captured:hover {
      transform: translateY(-1px);
      border-color: var(--green);
      background: rgba(30, 60, 40, 0.4);
    }
    .fish-item-card.equipped {
      background: rgba(82, 210, 115, 0.15);
      border-color: var(--green);
    }
    .fish-badge-rarity {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 8px;
      font-size: 0.65rem;
      font-weight: 800;
      text-transform: uppercase;
      margin-left: 6px;
    }
    .fish-badge-rarity.common { background: rgba(255,255,255,0.1); color: var(--muted); }
    .fish-badge-rarity.rare { background: rgba(100,166,255,0.2); color: var(--blue); }
    .fish-badge-rarity.legendary { background: rgba(225,147,67,0.25); color: var(--accent); animation: pulseGlow 2s infinite; }

    /* === V4.0: Reactor & Hard Mode === */
    body.reactor-active {
      background: radial-gradient(circle at top left, #1a1a1a 0, #0a0a0a 36%, #000 100%);
    }
    body.reactor-active .card {
      background: rgba(20, 20, 20, 0.9);
      border-color: #333;
    }
    body.reactor-active .topbar { background:rgba(20,20,20,.9); border-color:#333; }
    body.reactor-active .btn:not(.primary):not(.green):not(.blue):not(.red):not(.ghost) { background:#2a2a2a; border-color:#444; }
    body.reactor-active .btn:not(.primary):not(.green):not(.blue):not(.red):not(.ghost):hover { background:#3a3a3a; }
    body.reactor-active .prestigeBox, body.reactor-active .pot { background:#1a1a1a; border-color:#333; }
    body.reactor-active .stat { background:rgba(10,10,10,.55); border-color:#333; }
    body.reactor-active .modalBox { background:#1c1c1c; border-color:#333; }
    body.reactor-active .item { background:rgba(25,25,25,.75); border-color:#333; }
    body.reactor-active .item .icon { background:#111; }
    body.reactor-active .buyModes { background:#111; border-color:#333; }
    body.reactor-active .buyModes button.active { background:#444; color:#fff; }
    body.reactor-active .logo { background:linear-gradient(145deg,#333,#111); }
    body.reactor-active .close { background:#222; }
    body.reactor-active .pill { background:#111; border-color:#333; }
    body.reactor-active .textarea { background:#111; border-color:#333; }
    body.reactor-active .developerBar { background:#1c1c1c; border-color:#333; }
    body.reactor-hot .meltdown-overlay {
      opacity: 0.5;
      background: radial-gradient(circle, transparent 40%, rgba(255, 60, 0, 0.3) 100%);
      animation: heatPulse 2s infinite alternate;
    }
    @keyframes heatPulse {
      0% { box-shadow: inset 0 0 50px rgba(255, 60, 0, 0.2); }
      100% { box-shadow: inset 0 0 120px rgba(255, 60, 0, 0.5); }
    }
    body.reactor-meltdown .meltdown-overlay {
      opacity: 1;
      background: radial-gradient(circle, transparent 10%, rgba(200, 0, 0, 0.5) 100%);
    }
    body.reactor-meltdown .cup {
      filter: grayscale(100%) brightness(0.5);
      pointer-events: none;
      box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
    }
    .meltdown-overlay {
      position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s, background 1s; z-index: 50;
    }
    .meltdown-smoke {
      position: fixed; inset: 0; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="transparent"/><circle cx="50" cy="50" r="40" fill="rgba(255,255,255,0.02)" filter="blur(10px)"/></svg>'); opacity: 0; pointer-events: none; transition: opacity 2s; z-index: 51; mix-blend-mode: screen;
    }
    body.reactor-meltdown .meltdown-smoke {
      opacity: 1; animation: smokeMove 10s linear infinite;
    }
    @keyframes smokeMove {
      0% { background-position: 0 0; }
      100% { background-position: 200px 200px; }
    }
    .reactor-item-card {
      display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.06); margin-bottom:8px;
    }
    .reactor-item-card:hover {
      border-color: #ff4d4d; background: rgba(43, 17, 17, 0.85);
    }
    .reactor-item-card.cryo:hover {
      border-color: #4fc3f7; background: rgba(17, 34, 43, 0.85);
    }
    .assistantBox.glitched {
      border-color: rgba(239, 107, 107, 0.5);
      box-shadow: 0 0 15px rgba(239, 107, 107, 0.4), inset 0 0 10px rgba(239, 107, 107, 0.15);
      animation: glitchBoxGlow 3s infinite alternate;
    }
    .assistantBox.glitched h2, .assistantBox.glitched p {
      color: #ffbaba !important;
      text-shadow: 1px 1px 0px rgba(255,0,0,0.7), -1px -1px 0px rgba(0,255,255,0.7);
      animation: textFlacker 0.3s infinite alternate;
    }
    @keyframes glitchBoxGlow {
      0% { border-color: rgba(239, 107, 107, 0.4); box-shadow: 0 0 10px rgba(239, 107, 107, 0.2); }
      50% { border-color: rgba(100, 166, 255, 0.6); box-shadow: 0 0 18px rgba(100, 166, 255, 0.4); }
      100% { border-color: rgba(239, 107, 107, 0.7); box-shadow: 0 0 15px rgba(239, 107, 107, 0.35); }
    }
    @keyframes textFlacker {
      0% { opacity: 1; }
      50% { opacity: 0.8; }
      100% { opacity: 0.95; }
    }

/* --- Reaktor Tachometer --- */
.reactor-gauge-container {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.reactor-gauge {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.gauge-fill {
  transition: width 0.1s linear, background 0.3s ease, box-shadow 0.3s ease;
  display: block;
  height: 100%;
  border-radius: inherit;
  background-position: left center;
  background-repeat: no-repeat;
  position: relative;
}

.gauge-fill::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.15) 100%
  );
  pointer-events: none;
}

.reactor-progress {
  height: 28px !important;
  position: relative;
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden;
}

.gauge-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px black;
  pointer-events: none;
}

/* Farben */
.heat-cold { background-color: #00e5ff; box-shadow: 0 0 8px #00e5ff; }
.heat-normal { background-color: #ffd700; box-shadow: 0 0 8px #ffd700; }
.heat-optimal { background-color: #00ff44; box-shadow: 0 0 8px #00ff44; }
.heat-danger { background-color: #ff4500; box-shadow: 0 0 10px #ff4500; }
.heat-critical { background-color: #ffffff; box-shadow: 0 0 15px #ffffff; }

/* Tremble Animations */
@keyframes gaugeTrembleMild {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
  100% { transform: translate(1px, 1px); }
}

@keyframes gaugeTrembleSevere {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: translate(-2px, -2px); }
  80% { transform: translate(2px, 2px); }
  100% { transform: translate(0, 0); }
}

.tremble-mild {
  animation: gaugeTrembleMild 0.1s infinite alternate;
}
.tremble-severe {
  animation: gaugeTrembleSevere 0.05s infinite alternate;
}

/* === V4.0: Sticky Header & News Ticker Anchoring === */
.sticky-header {
  position: sticky;
  top: 10px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sticky-header .topbar {
  position: static !important;
  top: auto !important;
}
.sticky-header .developerBar {
  margin-top: 0 !important;
}
@media (max-width: 960px) {
  .sticky-header {
    position: sticky;
    top: 5px;
    gap: 6px;
  }
}