:root{
  --bg:#06100a;--panel:rgba(15,31,21,.80);--panel2:rgba(18,38,27,.93);
  --line:rgba(160,255,194,.12);--text:#f3f8f4;--muted:#8fa69a;
  --green:#5cf08e;--green2:#2bc663;--amber:#f0c565;--red:#ff7d7d;
  --blue:#78b8ff;--radius:22px;--shadow:0 22px 70px rgba(0,0,0,.36)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:
  radial-gradient(circle at 50% -10%,rgba(71,173,100,.17),transparent 35%),
  linear-gradient(180deg,#08130c,#050907 72%);color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh;overflow-x:hidden}
button,input{font:inherit}
button{touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.glass{background:linear-gradient(180deg,rgba(20,43,29,.8),rgba(10,22,15,.76));
  border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.app-shell{width:min(1180px,100%);margin:0 auto;padding:18px 18px 118px;min-height:100vh}
.topbar{border-radius:24px;padding:14px 17px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:10px;z-index:20}
.brand-wrap{display:flex;align-items:center;gap:11px;min-width:0}
.brand-logo{width:42px;height:42px;filter:drop-shadow(0 0 16px rgba(92,240,142,.25))}
.brand-copy{min-width:0}.brand{font-weight:850;font-size:19px;letter-spacing:-.02em}.version{font-size:11px;color:var(--muted);margin-left:5px}
.eyebrow{font-size:10px;letter-spacing:.18em;color:#83e8a4;font-weight:850;margin-bottom:4px}
.hud{display:flex;gap:6px}.hud-item{padding:7px 10px;min-width:68px;border-radius:13px;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.03);display:flex;flex-direction:column}
.hud-item span{font-size:9px;color:var(--muted)}.hud-item strong{font-size:13px}.hud-item.money strong{color:#d6ffdf}
main{padding-top:25px}.view{display:none;animation:viewIn .25s ease both}.view.active{display:block}
@keyframes viewIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:6px 3px 15px}
h1,h2,h3,p{margin-top:0}h1{font-size:clamp(29px,4vw,45px);letter-spacing:-.045em;margin-bottom:0}h2{font-size:21px;letter-spacing:-.03em;margin-bottom:0}
.speed-panel{display:flex;gap:5px;padding:4px;border-radius:16px}.speed-btn,.icon-btn{border:0;color:var(--muted);background:transparent;border-radius:11px;min-width:39px;height:38px;cursor:pointer}
.speed-btn.active{background:rgba(92,240,142,.12);color:var(--green)}.icon-btn.paused{color:var(--amber);background:rgba(240,197,101,.09)}
.status-strip{border-radius:16px;padding:11px 13px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.status-strip strong{margin-left:auto;color:var(--text)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(92,240,142,.75)}
.status-dot.warn{background:var(--amber);box-shadow:0 0 12px rgba(240,197,101,.7)}.grow-note{padding-left:8px;border-left:1px solid rgba(255,255,255,.08)}
.room-scene{height:min(51vw,510px);min-height:390px;margin:18px 0;border-radius:31px;overflow:hidden;position:relative;border:1px solid rgba(140,255,176,.11);
 background:
 linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px),
 linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
 radial-gradient(ellipse at 50% 12%,rgba(116,255,159,.15),transparent 34%),
 linear-gradient(180deg,#101d15,#07100b 78%);
 background-size:38px 38px,38px 38px,auto,auto;box-shadow:inset 0 0 90px rgba(0,0,0,.44),var(--shadow)}
.room-scene.night{filter:saturate(.88) brightness(.82)}.ceiling-glow{position:absolute;left:20%;right:20%;top:-30px;height:110px;border-radius:50%;background:rgba(123,255,163,.1);filter:blur(28px)}
.rack{position:absolute;inset:8% 4% 6%;display:flex;align-items:center;justify-content:center}.lamp{position:absolute;top:4%;left:50%;right:auto;width:min(64%,720px);height:16px;transform:translateX(-50%) rotate(0deg);transform-origin:center center;border-radius:999px;background:linear-gradient(90deg,rgba(34,52,41,.98) 0%,rgba(214,255,225,.98) 18%,rgba(234,255,240,1) 50%,rgba(214,255,225,.98) 82%,rgba(34,52,41,.98) 100%);border:1px solid rgba(210,255,223,.18);box-shadow:0 0 18px rgba(201,255,217,.58),0 0 68px rgba(92,240,142,.18),0 14px 34px rgba(0,0,0,.22);}.lamp:before{content:"";position:absolute;left:50%;top:-8px;transform:translateX(-50%);width:74%;height:5px;border-radius:999px;background:rgba(226,255,235,.42);filter:blur(.3px)}.lamp:after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);width:88%;height:72px;pointer-events:none;background:radial-gradient(ellipse at center,rgba(160,255,191,.17) 0%,rgba(160,255,191,.10) 34%,rgba(160,255,191,.04) 58%,rgba(160,255,191,0) 78%);filter:blur(10px)}.lamp.l2{height:18px;box-shadow:0 0 21px rgba(214,255,225,.66),0 0 94px rgba(92,240,142,.24),0 14px 34px rgba(0,0,0,.22)}.lamp.l3{height:20px;box-shadow:0 0 24px rgba(230,255,238,.78),0 0 120px rgba(92,240,142,.30),0 14px 34px rgba(0,0,0,.22)}
.plant-grid{width:100%;display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:13px;align-items:end;padding:75px 6px 30px;z-index:2}
.plant-slot{min-width:0;height:235px;border:1px solid rgba(127,237,160,.1);border-radius:21px;background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(0,0,0,.17));position:relative;overflow:hidden;cursor:pointer;transition:.2s}
.plant-slot.empty:before{content:"+";position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:47px;height:47px;border-radius:50%;display:grid;place-items:center;color:var(--green);font-size:24px;background:rgba(92,240,142,.07);border:1px dashed rgba(92,240,142,.3)}
.plant-slot.empty:after{content:attr(data-label);position:absolute;left:4px;right:4px;bottom:22px;text-align:center;font-size:11px;color:var(--muted)}
.plant-slot.progress-locked{opacity:.48;cursor:not-allowed;border-style:dashed}
.plant-slot.progress-locked:before{content:"🔒";font-size:18px;color:var(--muted);border-style:solid;background:rgba(255,255,255,.035)}
.plant-slot.progress-locked:after{color:#a7b6ad}
.plant-slot.attention{border-color:rgba(240,197,101,.34)}.plant-slot.ready{border-color:rgba(92,240,142,.32);box-shadow:inset 0 0 22px rgba(92,240,142,.05)}
.plant-tag{position:absolute;z-index:5;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;gap:7px;font-size:10px}.plant-tag b{display:block;max-width:95px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.plant-stage{color:#93eaae;margin-top:2px}
.progress-ring{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-size:8px;background:conic-gradient(var(--green) var(--progress),rgba(255,255,255,.08) 0);position:relative;flex:0 0 auto}.progress-ring:after{content:"";position:absolute;inset:4px;border-radius:50%;background:#112019}.progress-ring span{position:relative;z-index:2}
.plant-visual{position:absolute;left:50%;bottom:62px;width:145px;height:142px;transform:translateX(-50%) scale(var(--plant-scale,.55));transform-origin:50% 100%;transition:transform .4s ease}
.stem{position:absolute;left:50%;bottom:0;width:6px;height:94px;border-radius:8px;background:linear-gradient(#66df82,#2b7f45);transform:translateX(-50%)}
.leaf{position:absolute;width:58px;height:27px;border-radius:100% 0 100% 0;background:linear-gradient(135deg,#70e98a,#1c8c48);transform-origin:100% 100%}.leaf.r{border-radius:0 100% 0 100%;transform-origin:0 100%}
.l1{left:17px;bottom:27px;transform:rotate(15deg)}.l2{right:17px;bottom:35px;transform:rotate(-17deg)}.l3{left:24px;bottom:61px;transform:rotate(30deg) scale(.9)}.l4{right:24px;bottom:69px;transform:rotate(-30deg) scale(.9)}.l5{left:44px;bottom:88px;transform:rotate(50deg) scale(.72)}.l6{right:44px;bottom:92px;transform:rotate(-50deg) scale(.72)}
.pot{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:74px;height:55px;border-radius:8px 8px 23px 23px;background:linear-gradient(135deg,#2b352f,#111a14);border:1px solid rgba(255,255,255,.08)}
.alert-badge{position:absolute;left:9px;bottom:9px;z-index:6;font-size:9px;color:#ffe6a4;background:rgba(125,87,10,.65);border:1px solid rgba(240,197,101,.24);padding:5px 7px;border-radius:999px}
.rack-floor{position:absolute;left:1%;right:1%;bottom:9px;height:8px;border-radius:10px;background:#2b4635}
.room-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.stat-card{border-radius:18px;padding:14px;display:grid;grid-template-columns:39px 1fr auto;align-items:center;gap:11px}.stat-card span{display:block;font-size:10px;color:var(--muted)}.stat-card strong{font-size:15px}.stat-card small{color:var(--muted);font-size:10px}
.stat-icon{width:39px;height:39px;border-radius:13px;background:rgba(92,240,142,.08);color:var(--green);display:grid;place-items:center;font-size:19px}
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.panel{border-radius:20px;padding:16px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.level-badge{border-radius:999px;padding:6px 9px;background:rgba(92,240,142,.09);color:var(--green);font-size:11px;font-weight:800}
.xp-row{margin-top:15px}.xp-row span{font-size:11px;color:var(--muted)}.progress{height:7px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden;margin-top:6px}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green2),var(--green));border-radius:inherit}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.mini-stats div{padding:9px;border-radius:12px;background:rgba(255,255,255,.025)}.mini-stats span{display:block;font-size:9px;color:var(--muted)}.mini-stats strong{font-size:12px}
.event-log{display:grid;gap:8px;margin-top:12px;max-height:160px;overflow:auto;padding-right:3px}.event-row{display:grid;grid-template-columns:auto 1fr;gap:8px;font-size:11px}.event-row time{color:var(--muted)}.event-row span{color:#dbe7df}.event-empty{font-size:11px;color:var(--muted);padding:16px 0}
.text-btn{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:11px}
.bottom-nav{position:fixed;z-index:30;left:50%;bottom:17px;transform:translateX(-50%);width:min(760px,calc(100% - 26px));border-radius:23px;padding:6px;display:grid;grid-template-columns:repeat(5,1fr)}
.nav-btn{border:0;background:transparent;color:#748b7e;border-radius:15px;padding:8px 5px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}.nav-btn span{font-size:18px}.nav-btn b{font-size:9px}.nav-btn.active{background:rgba(92,240,142,.09);color:var(--green)}
.primary-btn,.secondary-btn,.danger-btn{border-radius:13px;padding:10px 13px;font-weight:800;cursor:pointer}.primary-btn{border:0;background:linear-gradient(135deg,var(--green),#30c664);color:#071d0e}.secondary-btn{border:1px solid rgba(92,240,142,.17);background:rgba(92,240,142,.09);color:var(--green)}.danger-btn{border:1px solid rgba(255,125,125,.16);background:rgba(255,125,125,.08);color:#ff9e9e}
.filter-row,.shop-tabs{display:flex;gap:5px;padding:5px;border-radius:15px;margin-bottom:13px;overflow:auto}.filter-btn,.shop-tab{border:0;background:transparent;color:var(--muted);border-radius:10px;padding:9px 11px;cursor:pointer;white-space:nowrap;font-size:11px}.filter-btn.active,.shop-tab.active{background:rgba(92,240,142,.1);color:var(--green)}
.plant-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.plant-list-empty,.warehouse-empty{grid-column:1/-1;padding:44px 18px;text-align:center;border:1px dashed rgba(92,240,142,.17);border-radius:20px;color:var(--muted);font-size:12px}
.plant-card{border-radius:20px;padding:15px;display:grid;grid-template-columns:66px 1fr auto;gap:12px;align-items:center;cursor:pointer}.mini-plant{height:66px;border-radius:17px;background:radial-gradient(circle at 50% 30%,rgba(92,240,142,.16),transparent 58%),rgba(255,255,255,.02);display:grid;place-items:center;font-size:31px}.plant-card h3{font-size:16px;margin:0 0 3px}.plant-card p{font-size:11px;color:var(--muted);margin:0}.card-progress{margin-top:8px;height:6px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}.card-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--green2),var(--green));border-radius:inherit}.card-status{font-size:9px;padding:5px 7px;border-radius:999px;background:rgba(255,255,255,.05);color:var(--muted)}.card-status.warn{color:#ffe2a2;background:rgba(240,197,101,.08)}
.shop-panel{display:none}.shop-panel.active{display:block}.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.shop-card{border-radius:20px;padding:16px;min-height:205px;display:flex;flex-direction:column}.shop-icon{font-size:31px;margin-bottom:13px}.shop-card h3{font-size:16px;margin-bottom:5px}.shop-card p{color:var(--muted);font-size:11px;line-height:1.5}.shop-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:12px}.shop-meta strong{font-size:13px}.shop-meta small{color:var(--muted)}
.shop-card.locked{opacity:.55}.pill{display:inline-flex;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.05);color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.pill.success{color:var(--green);background:rgba(92,240,142,.08)}
.warehouse-summary{border-radius:18px;padding:14px;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:12px;margin-bottom:12px}.warehouse-summary span{display:block;font-size:10px;color:var(--muted)}.warehouse-summary strong{font-size:15px}.warehouse-list{display:grid;gap:10px}.batch-card{border-radius:18px;padding:14px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.batch-card h3{font-size:14px;margin:0 0 3px}.batch-card p{font-size:10px;color:var(--muted);margin:0}.batch-actions{display:flex;align-items:center;gap:9px}.quality{font-size:9px;font-weight:850;padding:5px 8px;border-radius:999px;background:rgba(120,184,255,.08);color:#acd3ff}
.mission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mission-card{border-radius:20px;padding:16px}.mission-top{display:flex;justify-content:space-between;gap:10px}.mission-card h3{font-size:16px;margin-bottom:4px}.mission-card p{font-size:11px;color:var(--muted);line-height:1.45}.mission-reward{font-size:11px;color:#c8ffd5}.mission-card.done{border-color:rgba(92,240,142,.26)}.mission-card.claimed{opacity:.6}
.settings-card{border-radius:21px;padding:4px 17px}.setting-row{padding:17px 2px;border-bottom:1px solid rgba(255,255,255,.055);display:flex;align-items:center;justify-content:space-between;gap:16px}.setting-row strong{display:block}.setting-row span:not(.pill){display:block;color:var(--muted);font-size:11px;margin-top:3px}.about-box{padding:18px 2px}.about-box p{font-size:11px;color:var(--muted);line-height:1.55;margin:5px 0 0}.file-label input{display:none}
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.67);display:grid;place-items:center;padding:18px;backdrop-filter:blur(8px);transition:.2s}.modal-backdrop.hidden{opacity:0;pointer-events:none}.modal{width:min(610px,100%);max-height:88vh;overflow:auto;border-radius:25px;padding:23px;position:relative}.detail-modal{width:min(720px,100%)}.modal-close{position:absolute;right:14px;top:13px;border:0;width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.055);color:var(--muted);font-size:22px;cursor:pointer}.modal-intro{color:var(--muted);font-size:12px;line-height:1.5}
.seed-options{display:grid;gap:9px;margin-top:16px}.seed-option{border:1px solid rgba(92,240,142,.11);background:rgba(255,255,255,.022);color:var(--text);border-radius:16px;padding:13px;display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:11px;text-align:left;cursor:pointer}.seed-option .seed-icon{font-size:25px}.seed-option b{display:block;font-size:13px}.seed-option span{display:block;font-size:10px;color:var(--muted);margin-top:2px}.seed-option strong{font-size:12px;color:#caffd6}
.detail-head{display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:center;margin-bottom:17px}.detail-plant-icon{height:74px;border-radius:19px;background:radial-gradient(circle,rgba(92,240,142,.17),transparent 63%),rgba(255,255,255,.02);display:grid;place-items:center;font-size:37px}.detail-head h2{margin-bottom:2px}.detail-head p{margin:0;font-size:11px;color:var(--muted)}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.metric{padding:10px;border-radius:13px;background:rgba(255,255,255,.025)}.metric span{display:block;color:var(--muted);font-size:9px}.metric strong{font-size:12px}.meter{height:5px;background:rgba(255,255,255,.055);border-radius:999px;overflow:hidden;margin-top:5px}.meter i{display:block;height:100%;background:var(--green);border-radius:inherit}
.detail-section{margin-top:17px;padding-top:15px;border-top:1px solid rgba(255,255,255,.06)}.detail-section h3{font-size:13px;margin-bottom:10px}.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.action-btn{border:1px solid rgba(92,240,142,.12);background:rgba(255,255,255,.025);color:var(--text);border-radius:14px;padding:11px;text-align:left;cursor:pointer}.action-btn b{display:block;font-size:11px}.action-btn span{font-size:9px;color:var(--muted)}.action-btn:disabled{opacity:.42;cursor:not-allowed}.harvest-btn{width:100%;margin-top:10px}
.toast{position:fixed;z-index:150;left:50%;bottom:104px;transform:translate(-50%,13px);background:#17271d;color:#eaffef;border:1px solid rgba(92,240,142,.16);border-radius:13px;padding:10px 13px;font-size:11px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (hover:hover) and (pointer:fine){.plant-slot:hover,.plant-card:hover,.seed-option:hover{transform:translateY(-3px);border-color:rgba(92,240,142,.28)}.primary-btn:hover,.secondary-btn:hover{filter:brightness(1.06)}}
@media(max-width:820px){
 .app-shell{padding:10px 10px 108px}.topbar{top:7px;padding:11px}.brand-logo{width:36px;height:36px}.brand{font-size:16px}.version{display:none}.hud{gap:3px}.hud-item{padding:6px 7px;min-width:auto}.hud-item span{font-size:8px}.hud-item strong{font-size:10px}
 .room-scene{height:575px}.rack{inset:6% 2% 5%}.plant-grid{grid-template-columns:repeat(2,1fr)!important;gap:9px;padding:62px 4px 22px}.plant-slot{height:225px}.room-stats{grid-template-columns:1fr}.dashboard-grid{grid-template-columns:1fr}.shop-grid{grid-template-columns:1fr 1fr}.mission-grid{grid-template-columns:1fr}.plant-list{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(2,1fr)}.action-grid{grid-template-columns:1fr}.warehouse-summary{grid-template-columns:1fr 1fr}.warehouse-summary button{grid-column:1/-1}.grow-note{display:none}
}
@media(max-width:500px){
 .brand-copy .eyebrow{display:none}.hud-item:nth-child(1){display:none}.section-head{align-items:flex-end}.section-head h1{font-size:30px}.speed-btn,.icon-btn{min-width:33px;height:34px;font-size:11px}
 .room-scene{height:540px}.plant-slot{height:205px}.plant-visual{width:130px;height:125px}.pot{width:62px;height:48px}.plant-tag b{max-width:78px}.shop-grid{grid-template-columns:1fr}.bottom-nav{bottom:12px}.nav-btn b{font-size:8px}.warehouse-summary{grid-template-columns:1fr}.warehouse-summary button{grid-column:auto}.detail-head{grid-template-columns:60px 1fr}.detail-plant-icon{height:60px}
}

.save-hud strong{color:#bfffd0}
.save-hud.saving strong{color:var(--amber)}
.save-hud.error strong{color:var(--red)}

.room-scene .lamp,.room-scene .lamp:before,.room-scene .lamp:after{backface-visibility:hidden;-webkit-backface-visibility:hidden}


/* CannaGrow 0.3.3 – reale Pflanzen-Sprites aus dem Projektbild */
.plant-real-image{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:7px;
  transform:translateX(-50%);
  width:auto;
  max-width:96%;
  object-fit:contain;
  object-position:center bottom;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.28));
  transition:height .35s ease,filter .25s ease;
}
.plant-real-image.stage-1{height:31%}
.plant-real-image.stage-2{height:43%}
.plant-real-image.stage-3{height:62%}
.plant-real-image.stage-4{height:78%}
.plant-real-image.stage-5{height:83%}

.plant-slot.attention .plant-real-image{
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.28)) saturate(.9);
}
.plant-slot.ready .plant-real-image{
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.28)) drop-shadow(0 0 7px rgba(92,240,142,.16));
}

.mini-plant{
  overflow:hidden;
  padding:4px;
}
.mini-plant img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  user-select:none;
  -webkit-user-drag:none;
}

.seed-option .seed-icon{
  width:42px;
  height:48px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.seed-option .seed-icon img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center bottom;
}

.detail-plant-icon{
  height:150px;
  min-height:150px;
  width:112px;
  overflow:hidden;
  padding:3px;
  align-self:end;
}
.detail-plant-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  user-select:none;
  -webkit-user-drag:none;
}
.detail-head{
  grid-template-columns:112px 1fr;
  min-height:150px;
}

@media(max-width:820px){
  .plant-real-image.stage-1{height:29%}
  .plant-real-image.stage-2{height:41%}
  .plant-real-image.stage-3{height:59%}
  .plant-real-image.stage-4{height:75%}
  .plant-real-image.stage-5{height:80%}
}
@media(max-width:500px){
  .detail-head{grid-template-columns:88px 1fr;min-height:120px}
  .detail-plant-icon{width:88px;height:120px;min-height:120px}
}


/* --- CannaGrow 0.3.4: Tisch + einzelne Hängeleuchten pro Topf --- */
.room-scene{
  perspective: 1200px;
}

.rack{
  inset: 7% 4% 5%;
  align-items: stretch;
}

.lamp-main-hidden{
  display:none !important;
}

.plant-grid{
  position:relative;
  z-index:4;
  width:100%;
  display:grid;
  grid-template-columns:repeat(var(--cols,4),1fr);
  gap:14px;
  align-items:end;
  padding:36px 8px 62px;
}

.plant-slot{
  height:250px;
  border:1px solid rgba(127,237,160,.11);
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.12)),
    linear-gradient(180deg, rgba(38,67,46,.08), rgba(7,12,8,.20));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  overflow:hidden;
}

.plant-slot.empty:before{
  top:58%;
  z-index:7;
}
.plant-slot.empty:after{
  bottom:10px;
  z-index:7;
}

.slot-lamp{
  position:absolute;
  left:50%;
  top:0;
  width:100%;
  height:120px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:2;
}
.slot-lamp-cable{
  position:absolute;
  left:50%;
  top:-4px;
  width:2px;
  height:42px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(220,240,228,.55), rgba(70,92,79,.95));
}
.slot-lamp-head{
  position:absolute;
  left:50%;
  top:34px;
  transform:translateX(-50%);
  width:60px;
  height:22px;
  border-radius:10px 10px 16px 16px;
  background:linear-gradient(180deg, rgba(232,245,237,.92), rgba(112,134,120,.92) 24%, rgba(34,47,38,.98) 100%);
  border:1px solid rgba(226,255,235,.18);
  box-shadow:
    0 3px 10px rgba(0,0,0,.28),
    0 0 18px rgba(206,255,220,.18);
}
.slot-lamp-head:before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-4px;
  width:36px;
  height:6px;
  border-radius:999px;
  transform:translateX(-50%);
  background:rgba(241,255,245,.78);
  filter:blur(.4px);
}
.slot-lamp-glow{
  position:absolute;
  left:50%;
  top:48px;
  width:120px;
  height:118px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(190,255,205,.25) 0%, rgba(160,255,191,.13) 38%, rgba(160,255,191,.05) 58%, rgba(160,255,191,0) 78%);
  filter:blur(6px);
  opacity:.95;
}

.grow-table{
  position:absolute;
  left:3%;
  right:3%;
  bottom:20px;
  height:112px;
  z-index:1;
  pointer-events:none;
}
.grow-table-top{
  position:absolute;
  left:0;
  right:0;
  top:18px;
  height:16px;
  border-radius:12px;
  background:linear-gradient(180deg, #82948a 0%, #55665d 20%, #28362e 100%);
  border:1px solid rgba(223,245,231,.12);
  box-shadow:
    0 4px 14px rgba(0,0,0,.35),
    0 0 16px rgba(178,255,204,.08);
}
.grow-table-front{
  position:absolute;
  left:0;
  right:0;
  top:31px;
  height:26px;
  border-radius:0 0 14px 14px;
  background:linear-gradient(180deg, #1f2a23 0%, #162019 100%);
  border:1px solid rgba(255,255,255,.05);
}
.grow-table-leg{
  position:absolute;
  bottom:0;
  width:16px;
  top:45px;
  border-radius:10px;
  background:linear-gradient(180deg, #3c4b42, #19211b);
  box-shadow:0 8px 12px rgba(0,0,0,.22);
}
.grow-table-leg.left{ left:26px; }
.grow-table-leg.right{ right:26px; }

.rack-floor{
  left:3%;
  right:3%;
  bottom:7px;
  height:9px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(84,123,95,.55), rgba(123,174,139,.35), rgba(84,123,95,.55));
  opacity:.7;
}

.plant-real-image{
  z-index:5;
  bottom:26px;
  max-width:90%;
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.28));
}
.plant-real-image.stage-1{height:27%}
.plant-real-image.stage-2{height:39%}
.plant-real-image.stage-3{height:58%}
.plant-real-image.stage-4{height:74%}
.plant-real-image.stage-5{height:80%}

.plant-tag{
  z-index:8;
  top:88px;
}
.alert-badge{
  z-index:8;
}

.plant-slot.progress-locked .slot-lamp-glow{
  opacity:.35;
}
.plant-slot.attention .slot-lamp-glow{
  background:radial-gradient(ellipse at center, rgba(255,217,138,.18) 0%, rgba(255,210,120,.09) 40%, rgba(255,210,120,0) 76%);
}
.plant-slot.ready .slot-lamp-glow{
  background:radial-gradient(ellipse at center, rgba(190,255,205,.28) 0%, rgba(160,255,191,.15) 40%, rgba(160,255,191,0) 76%);
}

@media(max-width:820px){
  .plant-grid{
    grid-template-columns:repeat(2,1fr)!important;
    padding:24px 4px 66px;
    gap:10px;
  }
  .plant-slot{
    height:236px;
  }
  .slot-lamp{
    height:110px;
  }
  .slot-lamp-head{
    top:32px;
    width:54px;
    height:20px;
  }
  .slot-lamp-glow{
    width:110px;
    height:108px;
  }
  .grow-table{
    left:2%;
    right:2%;
    height:104px;
  }
  .grow-table-top{
    top:17px;
  }
  .grow-table-front{
    top:30px;
  }
  .plant-real-image.stage-1{height:26%}
  .plant-real-image.stage-2{height:37%}
  .plant-real-image.stage-3{height:55%}
  .plant-real-image.stage-4{height:71%}
  .plant-real-image.stage-5{height:77%}
}
@media(max-width:500px){
  .plant-slot{
    height:220px;
  }
  .slot-lamp-cable{
    height:37px;
  }
  .slot-lamp-head{
    top:29px;
    width:48px;
    height:18px;
  }
  .slot-lamp-glow{
    top:44px;
    width:96px;
    height:96px;
  }
  .plant-tag{
    top:76px;
  }
  .grow-table{
    height:96px;
  }
  .grow-table-leg.left{left:16px}
  .grow-table-leg.right{right:16px}
}


/* --- CannaGrow 0.3.5: Hintergrundlampe entfernt, violette Lampen, Ventilator + Pflanzbewegung --- */
#lampVisual,
.lamp,
.lamp-main-hidden{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  width:0 !important;
  height:0 !important;
  box-shadow:none !important;
  background:none !important;
}

.room-scene{
  perspective:1200px;
  --fan-sway:0deg;
  --fan-cycle:0s;
  --fan-drift:0px;
}

.room-stats{
  grid-template-columns:repeat(4,1fr);
}

.fan-stat{
  grid-template-columns:39px 1fr auto;
  align-items:center;
}
.fan-controls{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:flex-end;
}
.fan-btn{
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid rgba(179,145,255,.18);
  background:rgba(141,94,255,.08);
  color:#d6cbff;
  cursor:pointer;
  font-weight:800;
  line-height:1;
}
.fan-btn.active{
  background:linear-gradient(135deg, rgba(171,121,255,.34), rgba(108,77,193,.44));
  color:#fff;
  box-shadow:0 0 16px rgba(162,113,255,.18), inset 0 0 0 1px rgba(255,255,255,.07);
}

.slot-lamp-cable{
  background:linear-gradient(180deg, rgba(230,224,255,.55), rgba(76,73,97,.95));
}
.slot-lamp-head{
  background:linear-gradient(180deg, rgba(241,236,255,.96), rgba(147,132,205,.94) 24%, rgba(43,35,63,.98) 100%);
  border:1px solid rgba(229,214,255,.24);
  box-shadow:
    0 3px 10px rgba(0,0,0,.28),
    0 0 18px rgba(195,144,255,.28);
}
.slot-lamp-head:before{
  background:rgba(244,236,255,.92);
}
.slot-lamp-glow{
  background:radial-gradient(ellipse at center,
    rgba(201,148,255,.33) 0%,
    rgba(163,108,255,.20) 34%,
    rgba(125,79,216,.09) 56%,
    rgba(125,79,216,0) 78%);
  filter:blur(8px);
}
.plant-slot.progress-locked .slot-lamp-glow{
  opacity:.22;
}
.plant-slot.attention .slot-lamp-glow{
  background:radial-gradient(ellipse at center, rgba(255,190,117,.18) 0%, rgba(255,172,81,.11) 40%, rgba(255,172,81,0) 76%);
}
.plant-slot.ready .slot-lamp-glow{
  background:radial-gradient(ellipse at center, rgba(195,146,255,.36) 0%, rgba(164,111,255,.22) 40%, rgba(164,111,255,0) 76%);
}

.wall-fan{
  position:absolute;
  right:18px;
  top:78px;
  width:108px;
  height:150px;
  z-index:6;
  pointer-events:none;
}
.fan-mount{
  position:absolute;
  right:24px;
  top:18px;
  width:10px;
  height:18px;
  border-radius:999px;
  background:linear-gradient(180deg,#63766e,#324039);
  box-shadow:0 2px 6px rgba(0,0,0,.22);
}
.fan-arm{
  position:absolute;
  right:28px;
  top:28px;
  width:3px;
  height:22px;
  background:linear-gradient(180deg, rgba(223,239,231,.58), rgba(74,95,83,.95));
}
.fan-head{
  position:absolute;
  right:0;
  top:44px;
  width:92px;
  height:92px;
  border-radius:50%;
  transform-origin:76% 18%;
  animation:fanOscillate 5.5s ease-in-out infinite;
}
.fan-cage{
  position:absolute;
  inset:0;
  border-radius:50%;
}
.fan-cage.outer{
  border:3px solid rgba(220,236,227,.54);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.03), rgba(0,0,0,.06));
  box-shadow:0 0 18px rgba(0,0,0,.14);
}
.fan-cage.inner{
  inset:8px;
  border:1px solid rgba(215,229,222,.25);
}
.fan-cage.outer:before,
.fan-cage.outer:after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  transform:translateX(-50%);
  background:rgba(219,231,225,.18);
}
.fan-cage.outer:after{
  left:0;
  right:0;
  top:50%;
  bottom:auto;
  width:auto;
  height:1px;
  transform:translateY(-50%);
}
.fan-blades{
  position:absolute;
  inset:15px;
  border-radius:50%;
  animation-play-state:paused;
}
.blade{
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:38px;
  margin-left:-9px;
  margin-top:-34px;
  border-radius:70% 70% 45% 45%;
  background:linear-gradient(180deg, rgba(198,232,213,.92), rgba(118,148,129,.84) 55%, rgba(69,86,76,.82) 100%);
  transform-origin:50% 34px;
  opacity:.94;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.18));
}
.blade.b1{ transform:rotate(0deg); }
.blade.b2{ transform:rotate(120deg); }
.blade.b3{ transform:rotate(240deg); }
.fan-center{
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:16px;
  margin-left:-8px;
  margin-top:-8px;
  border-radius:50%;
  background:linear-gradient(180deg,#d6e5dd,#6f897c);
  box-shadow:0 0 10px rgba(0,0,0,.22);
}

.wall-fan.speed-0 .fan-head{ animation-play-state:paused; }
.wall-fan.speed-0 .fan-blades{ animation:none; opacity:.92; }
.wall-fan.speed-1 .fan-blades{ animation:fanSpin 2.0s linear infinite; }
.wall-fan.speed-2 .fan-blades{ animation:fanSpin 1.0s linear infinite; }
.wall-fan.speed-3 .fan-blades{ animation:fanSpin .48s linear infinite; }

.room-scene.fan-active .plant-real-image{
  animation:plantSway var(--fan-cycle) ease-in-out infinite;
  transform-origin:50% 100%;
  will-change:transform;
}
.room-scene:not(.fan-active) .plant-real-image{
  animation:none;
}
@keyframes plantSway{
  0%{ transform:translateX(calc(-50% - var(--fan-drift))) rotate(calc(var(--fan-sway) * -0.75)); }
  25%{ transform:translateX(calc(-50% - (var(--fan-drift) * .45))) rotate(calc(var(--fan-sway) * -0.25)); }
  50%{ transform:translateX(calc(-50% + var(--fan-drift))) rotate(var(--fan-sway)); }
  75%{ transform:translateX(calc(-50% + (var(--fan-drift) * .4))) rotate(calc(var(--fan-sway) * .35)); }
  100%{ transform:translateX(calc(-50% - var(--fan-drift))) rotate(calc(var(--fan-sway) * -0.75)); }
}
@keyframes fanSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
@keyframes fanOscillate{
  0%,100%{ transform:rotate(-7deg); }
  50%{ transform:rotate(7deg); }
}

.plant-real-image{
  transition:height .35s ease, filter .25s ease;
}

@media(max-width:960px){
  .room-stats{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:820px){
  .wall-fan{
    right:10px;
    top:52px;
    width:88px;
    height:124px;
  }
  .fan-head{
    width:78px;
    height:78px;
  }
  .fan-stat{
    grid-template-columns:39px 1fr;
    gap:10px;
  }
  .fan-controls{
    grid-column:1 / -1;
    justify-content:flex-start;
    margin-left:49px;
  }
}
@media(max-width:560px){
  .room-stats{
    grid-template-columns:1fr;
  }
  .wall-fan{
    right:8px;
    top:46px;
    width:74px;
    height:108px;
    opacity:.92;
  }
  .fan-head{
    width:66px;
    height:66px;
  }
  .blade{
    width:14px;
    height:28px;
    margin-left:-7px;
    margin-top:-24px;
    transform-origin:50% 24px;
  }
  .slot-lamp-glow{
    filter:blur(7px);
  }
}


/* =====================================================================
   CannaGrow 0.3.6 – CSS-Pflanzen
   Reine CSS-Grafik: Topf, Stängel, Äste, Fächerblätter und Blüten.
   Blätter, Blüten und Stamm reagieren unterschiedlich auf den Ventilator.
   ===================================================================== */

.plant-css{
  position:absolute;
  left:50%;
  bottom:24px;
  z-index:5;
  width:154px;
  height:190px;
  transform:translateX(-50%);
  transform-origin:50% 100%;
  pointer-events:none;
  user-select:none;
  --plant-green-1:#7ecf69;
  --plant-green-2:#3c9b48;
  --plant-green-3:#1e6533;
  --plant-green-4:#123f26;
  --stem-1:#76a85c;
  --stem-2:#355f35;
  --bud-1:#88ad63;
  --bud-2:#587c48;
  --bud-3:#d4a878;
}

/* Je Entwicklungsphase wächst dieselbe CSS-Pflanze sichtbar hoch. */
.plant-css.stage-1{height:92px;width:105px}
.plant-css.stage-2{height:128px;width:125px}
.plant-css.stage-3{height:158px;width:140px}
.plant-css.stage-4{height:182px;width:150px}
.plant-css.stage-5{height:198px;width:160px}

.css-plant-body{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:34px;
  transform-origin:50% 100%;
}

.css-stem{
  position:absolute;
  left:50%;
  bottom:0;
  width:7px;
  height:78%;
  transform:translateX(-50%);
  transform-origin:50% 100%;
  border-radius:999px;
  background:
    linear-gradient(90deg,
      var(--stem-2) 0%,
      var(--stem-1) 34%,
      #93bb6f 52%,
      var(--stem-2) 100%);
  box-shadow:
    inset 1px 0 rgba(255,255,255,.12),
    1px 2px 4px rgba(0,0,0,.20);
}
.css-stem:after{
  content:"";
  position:absolute;
  left:50%;
  top:-5px;
  width:8px;
  height:10px;
  transform:translateX(-50%);
  border-radius:70% 70% 45% 45%;
  background:var(--plant-green-2);
}

.css-branch{
  position:absolute;
  left:50%;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--stem-2),var(--stem-1));
  transform-origin:0 50%;
  opacity:.94;
}
.branch-lower-left{bottom:24%;width:42px;transform:rotate(153deg)}
.branch-lower-right{bottom:29%;width:43px;transform:rotate(27deg)}
.branch-mid-left{bottom:43%;width:48px;transform:rotate(158deg)}
.branch-mid-right{bottom:49%;width:50px;transform:rotate(22deg)}
.branch-upper-left{bottom:62%;width:38px;transform:rotate(151deg)}
.branch-upper-right{bottom:67%;width:39px;transform:rotate(29deg)}

.seed-leaf{
  position:absolute;
  bottom:18%;
  width:37px;
  height:16px;
  border-radius:100% 15% 100% 15%;
  background:
    linear-gradient(135deg,#84d66d 0%,#43a950 50%,#256c36 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.seed-left{left:50%;transform:translateX(-96%) rotate(-12deg)}
.seed-right{right:50%;transform:translateX(96%) scaleX(-1) rotate(-12deg)}

/* Fächerblatt als sieben einzelne Blättchen */
.css-fan-leaf{
  position:absolute;
  width:72px;
  height:54px;
  transform-origin:50% 82%;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.22));
}
.leaflet{
  position:absolute;
  left:50%;
  bottom:4px;
  width:17px;
  height:43px;
  margin-left:-8.5px;
  transform-origin:50% 92%;
  border-radius:80% 18% 78% 18%;
  clip-path:polygon(
    50% 0%,
    64% 10%,
    73% 24%,
    68% 31%,
    80% 42%,
    69% 46%,
    76% 59%,
    62% 60%,
    66% 73%,
    54% 70%,
    50% 100%,
    45% 70%,
    34% 73%,
    38% 60%,
    24% 59%,
    31% 46%,
    20% 42%,
    32% 31%,
    27% 24%,
    36% 10%
  );
  background:
    linear-gradient(90deg,
      var(--plant-green-4) 0%,
      var(--plant-green-2) 43%,
      var(--plant-green-1) 52%,
      var(--plant-green-3) 66%,
      var(--plant-green-4) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.leaflet:after{
  content:"";
  position:absolute;
  left:50%;
  top:8%;
  bottom:9%;
  width:1px;
  transform:translateX(-50%);
  background:rgba(199,235,166,.38);
  box-shadow:
    -3px 8px 0 -0.45px rgba(184,225,153,.16),
    3px 13px 0 -0.45px rgba(184,225,153,.13);
}

.lf1{transform:rotate(-58deg) scale(.62)}
.lf2{transform:rotate(-38deg) scale(.80)}
.lf3{transform:rotate(-19deg) scale(.95)}
.lf4{transform:rotate(0deg) scale(1.08)}
.lf5{transform:rotate(19deg) scale(.95)}
.lf6{transform:rotate(38deg) scale(.80)}
.lf7{transform:rotate(58deg) scale(.62)}

.leaf-1{left:13%;bottom:13%;transform:rotate(-13deg) scale(.82)}
.leaf-2{right:11%;bottom:19%;transform:rotate(14deg) scale(.82)}
.leaf-3{left:29%;bottom:30%;transform:rotate(-4deg) scale(.76)}
.leaf-4{right:23%;bottom:37%;transform:rotate(7deg) scale(.94)}
.leaf-5{left:10%;bottom:43%;transform:rotate(-14deg) scale(.90)}
.leaf-6{right:7%;bottom:52%;transform:rotate(15deg) scale(.92)}
.leaf-7{left:23%;bottom:59%;transform:rotate(-5deg) scale(.78)}
.leaf-8{right:24%;bottom:67%;transform:rotate(8deg) scale(.78)}
.leaf-9{left:36%;bottom:74%;transform:rotate(-7deg) scale(.68)}
.leaf-10{right:35%;bottom:80%;transform:rotate(8deg) scale(.68)}

/* Blüten bestehen aus mehreren kleinen, unterschiedlich gefärbten Segmenten. */
.css-bud{
  position:absolute;
  width:34px;
  height:46px;
  transform-origin:50% 100%;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.24));
}
.bud-core,
.bud-node{
  position:absolute;
  border-radius:52% 48% 54% 46% / 60% 55% 45% 40%;
  background:
    radial-gradient(circle at 32% 24%,#a9c77d 0 8%,transparent 9%),
    radial-gradient(circle at 66% 34%,#7ea45c 0 12%,transparent 13%),
    linear-gradient(145deg,var(--bud-1),var(--bud-2) 72%);
  box-shadow:
    inset 0 0 4px rgba(255,255,255,.12),
    0 0 2px rgba(160,196,116,.22);
}
.bud-core{left:8px;top:4px;width:20px;height:34px}
.bud-node{width:17px;height:22px}
.bn1{left:0;top:17px;transform:rotate(-28deg)}
.bn2{right:0;top:15px;transform:rotate(31deg)}
.bn3{left:7px;top:0;transform:rotate(-5deg) scale(.78)}
.bn4{right:6px;top:26px;transform:rotate(15deg) scale(.70)}
.bud-hair{
  position:absolute;
  width:1px;
  height:18px;
  border-radius:999px;
  background:linear-gradient(180deg,#f0c18d,#b96f47);
  transform-origin:50% 100%;
  opacity:.86;
}
.bh1{left:9px;top:7px;transform:rotate(-42deg)}
.bh2{right:8px;top:8px;transform:rotate(39deg)}
.bh3{left:16px;top:-2px;transform:rotate(-8deg)}
.bh4{right:12px;top:22px;transform:rotate(56deg) scale(.75)}

.bud-1{left:38%;bottom:69%;transform:scale(.66)}
.bud-2{right:32%;bottom:61%;transform:scale(.62)}
.bud-3{left:24%;bottom:49%;transform:scale(.55)}
.bud-4{left:41%;bottom:81%;transform:scale(.94)}
.bud-5{right:18%;bottom:43%;transform:scale(.72)}
.bud-6{left:11%;bottom:39%;transform:scale(.68)}

/* Topf */
.css-pot{
  position:absolute;
  left:50%;
  bottom:0;
  width:72px;
  height:42px;
  transform:translateX(-50%);
  z-index:4;
}
.pot-rim{
  position:absolute;
  left:2px;
  right:2px;
  top:0;
  height:12px;
  border-radius:6px 6px 9px 9px;
  background:linear-gradient(180deg,#a86a40,#6f402a 72%,#4c2a1e);
  border:1px solid rgba(255,220,190,.10);
  box-shadow:0 2px 3px rgba(0,0,0,.28);
}
.pot-body{
  position:absolute;
  left:8px;
  right:8px;
  top:8px;
  bottom:0;
  clip-path:polygon(0 0,100% 0,86% 100%,14% 100%);
  background:
    linear-gradient(100deg,#5c3424,#9a5b36 48%,#633625 100%);
  box-shadow:inset 0 0 6px rgba(0,0,0,.28);
}
.pot-soil{
  position:absolute;
  left:9px;
  right:9px;
  top:4px;
  height:7px;
  border-radius:50%;
  background:
    radial-gradient(circle at 22% 48%,#70513a 0 3%,transparent 4%),
    radial-gradient(circle at 61% 30%,#9b795a 0 2.5%,transparent 3.5%),
    radial-gradient(circle at 78% 63%,#73533d 0 2.5%,transparent 3.5%),
    #2c2119;
}

/* Stufen steuern, welche Strukturen schon vorhanden sind. */
.plant-css.stage-1 .s2,
.plant-css.stage-1 .s3,
.plant-css.stage-1 .s4,
.plant-css.stage-1 .s5{display:none}
.plant-css.stage-2 .s3,
.plant-css.stage-2 .s4,
.plant-css.stage-2 .s5{display:none}
.plant-css.stage-3 .s4,
.plant-css.stage-3 .s5{display:none}
.plant-css.stage-4 .s5{display:none}
.plant-css.stage-2 .s1,
.plant-css.stage-3 .s1,
.plant-css.stage-4 .s1,
.plant-css.stage-5 .s1{display:none}

/* Stadium-spezifische Proportionen */
.plant-css.stage-1 .css-stem{height:52%;width:4px}
.plant-css.stage-2 .css-stem{height:70%;width:5px}
.plant-css.stage-3 .css-stem{height:78%;width:6px}
.plant-css.stage-4 .css-stem,
.plant-css.stage-5 .css-stem{height:82%}

/* Ventilator: Stamm minimal, Blätter deutlich, Blüten ruhiger und verzögert. */
.room-scene.fan-active .plant-room .css-plant-body{
  animation:cssStemSway var(--stem-cycle) ease-in-out infinite;
}
.room-scene.fan-active .plant-room .css-fan-leaf{
  animation:cssLeafSway var(--leaf-cycle) ease-in-out infinite;
}
.room-scene.fan-active .plant-room .css-bud{
  animation:cssBudSway var(--bud-cycle) ease-in-out infinite;
}
.room-scene.fan-active .plant-room .leaf-2,
.room-scene.fan-active .plant-room .leaf-5,
.room-scene.fan-active .plant-room .leaf-8{
  animation-delay:-.55s;
}
.room-scene.fan-active .plant-room .leaf-3,
.room-scene.fan-active .plant-room .leaf-6,
.room-scene.fan-active .plant-room .leaf-9{
  animation-delay:-1.05s;
}
.room-scene.fan-active .plant-room .css-bud:nth-of-type(even){
  animation-delay:-1.15s;
}

@keyframes cssStemSway{
  0%,100%{transform:rotate(calc(var(--stem-sway) * -0.55))}
  50%{transform:rotate(var(--stem-sway))}
}
@keyframes cssLeafSway{
  0%,100%{margin-left:-2px;rotate:calc(var(--leaf-sway) * -0.72)}
  50%{margin-left:3px;rotate:var(--leaf-sway)}
}
@keyframes cssBudSway{
  0%,100%{translate:-1px 0;rotate:calc(var(--bud-sway) * -0.55)}
  50%{translate:1.5px 0;rotate:var(--bud-sway)}
}

/* Im Growroom */
.plant-slot .plant-room{
  bottom:24px;
}
.plant-slot.attention .plant-room{
  filter:saturate(.86);
}
.plant-slot.ready .plant-room{
  filter:drop-shadow(0 0 6px rgba(150,99,255,.18));
}

/* Kleine Vorschauen nutzen dieselbe CSS-Pflanze, nur skaliert. */
.mini-plant{
  position:relative;
}
.mini-plant .plant-mini{
  left:50%;
  bottom:2px;
  width:74px;
  height:80px;
  transform:translateX(-50%) scale(.62);
  transform-origin:50% 100%;
}
.mini-plant .plant-mini .css-pot{transform:translateX(-50%) scale(.86)}

.seed-option .seed-icon{
  position:relative;
  overflow:visible;
}
.seed-icon .plant-seed{
  left:50%;
  bottom:-2px;
  width:68px;
  height:74px;
  transform:translateX(-50%) scale(.56);
  transform-origin:50% 100%;
}
.seed-icon .plant-seed .css-pot{transform:translateX(-50%) scale(.82)}

.detail-plant-icon{
  position:relative;
  overflow:visible;
}
.detail-plant-icon .plant-detail{
  left:50%;
  bottom:3px;
  width:128px;
  height:148px;
  transform:translateX(-50%) scale(.76);
  transform-origin:50% 100%;
}

/* Alte PNG-Pflanzen werden sicher nicht mehr angezeigt. */
.plant-real-image,
.mini-plant > img,
.seed-icon > img,
.detail-plant-icon > img{
  display:none !important;
}

@media(max-width:820px){
  .plant-slot .plant-room{
    transform:translateX(-50%) scale(.92);
  }
}
@media(max-width:500px){
  .plant-slot .plant-room{
    transform:translateX(-50%) scale(.84);
    bottom:20px;
  }
  .detail-plant-icon .plant-detail{
    transform:translateX(-50%) scale(.62);
  }
}

@media(prefers-reduced-motion:reduce){
  .plant-css .css-plant-body,
  .plant-css .css-fan-leaf,
  .plant-css .css-bud{
    animation:none !important;
  }
}


/* ==========================================================================
   CannaGrow 0.4.0 – PixiJS Growroom
   Pflanzenbilder als Sprites, Tisch/Regal per Pixi, Lampen pro Topf und Fan.
   ========================================================================== */
.pixi-growroom{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
}
.pixi-growroom canvas{
  width:100% !important;
  height:100% !important;
  display:block;
  pointer-events:none;
}

#lampVisual,
.lamp,
.lamp-main-hidden,
.grow-table,
.wall-fan,
.rack-floor,
.slot-lamp,
.plant-real-image,
.plant-css{
  display:none !important;
}

.room-scene{
  overflow:hidden;
}
.rack{
  position:absolute;
  inset:0;
  display:block;
}

.plant-grid.pixi-overlay{
  position:absolute;
  inset:0;
  z-index:8;
  display:grid;
  grid-template-columns:repeat(var(--cols,4),1fr);
  gap:14px;
  align-items:stretch;
  padding:34px 18px 74px;
  pointer-events:none;
}

.plant-slot.pixi-slot{
  position:relative;
  min-height:230px;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible;
  pointer-events:auto;
  cursor:pointer;
}
.plant-slot.pixi-slot.empty::before{
  top:54%;
  z-index:9;
  background:rgba(166,115,255,.16);
  border:1px dashed rgba(206,172,255,.42);
  color:#ebddff;
  box-shadow:0 0 22px rgba(159,107,255,.14);
}
.plant-slot.pixi-slot.empty::after{
  bottom:14px;
  z-index:9;
  color:#cfbee8;
  font-weight:700;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}
.plant-slot.pixi-slot.progress-locked::before{
  background:rgba(255,255,255,.03);
  border-style:solid;
  color:#aea3bf;
}
.plant-slot.pixi-slot.progress-locked::after{
  color:#aaa1b9;
}

.plant-slot.pixi-slot .plant-tag{
  position:absolute;
  left:50%;
  right:auto;
  top:auto;
  bottom:10px;
  transform:translateX(-50%);
  width:min(150px,92%);
  z-index:11;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-radius:14px;
  padding:7px 9px;
  background:linear-gradient(180deg, rgba(16,20,26,.78), rgba(11,12,18,.68));
  border:1px solid rgba(219,196,255,.11);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
  backdrop-filter:blur(8px);
}
.plant-slot.pixi-slot .plant-tag b{
  color:#f7f4ff;
}
.plant-slot.pixi-slot .plant-stage{
  color:#cdb8ff;
}
.plant-slot.pixi-slot .progress-ring{
  background:conic-gradient(#b66fff var(--progress),rgba(255,255,255,.09) 0);
}

.plant-slot.pixi-slot .alert-badge{
  left:50%;
  bottom:62px;
  transform:translateX(-50%);
  z-index:12;
  background:rgba(83,54,17,.82);
  border:1px solid rgba(255,201,108,.25);
}

@media (hover:hover) and (pointer:fine){
  .plant-slot.pixi-slot:hover .plant-tag{
    border-color:rgba(200,167,255,.22);
    transform:translateX(-50%) translateY(-2px);
  }
  .plant-slot.pixi-slot.empty:hover::before{
    box-shadow:0 0 28px rgba(159,107,255,.22);
  }
}

@media(max-width:960px){
  .room-stats{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:820px){
  .plant-grid.pixi-overlay{
    grid-template-columns:repeat(2,1fr) !important;
    padding:26px 10px 72px;
    gap:10px;
  }
  .plant-slot.pixi-slot{
    min-height:216px;
  }
}
@media(max-width:560px){
  .room-stats{
    grid-template-columns:1fr;
  }
  .plant-grid.pixi-overlay{
    padding:18px 8px 70px;
  }
  .plant-slot.pixi-slot{
    min-height:206px;
  }
  .plant-slot.pixi-slot .plant-tag{
    width:min(138px,94%);
    padding:6px 8px;
  }
}


/* CannaGrow 0.4.1 – PixiJS Einzelteile */
.pixi-growroom{
  isolation:isolate;
}
.plant-slot.pixi-slot .plant-tag{
  bottom:8px;
}
.plant-slot.pixi-slot.empty::before{
  top:57%;
}


/* CannaGrow 0.4.3 – Status-Layout-Fix */
.plant-slot.pixi-slot .plant-tag{
  top:14px;
  bottom:auto !important;
  left:14px;
  right:auto;
  transform:none !important;
  width:min(128px,68%);
  min-height:46px;
  padding:7px 8px;
  gap:7px;
  justify-content:space-between;
  align-items:center;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(14,18,24,.86), rgba(10,12,18,.76));
  border:1px solid rgba(219,196,255,.13);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  z-index:10;
}
.plant-slot.pixi-slot .plant-tag > div:first-child{
  min-width:0;
}
.plant-slot.pixi-slot .plant-tag b{
  display:block;
  font-size:12px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.plant-slot.pixi-slot .plant-stage{
  display:block;
  font-size:11px;
  line-height:1.1;
  margin-top:3px;
}
.plant-slot.pixi-slot .progress-ring{
  width:34px;
  height:34px;
  min-width:34px;
}
.plant-slot.pixi-slot .progress-ring span{
  font-size:9px;
}

.plant-slot.pixi-slot .alert-badge{
  left:auto;
  right:14px;
  bottom:14px;
  transform:none;
  z-index:10;
  max-width:64%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (hover:hover) and (pointer:fine){
  .plant-slot.pixi-slot:hover .plant-tag{
    transform:translateY(-2px) !important;
  }
}

@media(max-width:560px){
  .plant-slot.pixi-slot .plant-tag{
    top:10px;
    left:10px;
    width:min(118px,72%);
    padding:6px 7px;
  }
  .plant-slot.pixi-slot .progress-ring{
    width:31px;
    height:31px;
    min-width:31px;
  }
  .plant-slot.pixi-slot .alert-badge{
    right:10px;
    bottom:10px;
    max-width:70%;
  }
}


/* CannaGrow 0.4.4 – Lamp/Room cap/centering */
.plant-grid.pixi-overlay{
  grid-template-columns:repeat(var(--cols,3),1fr);
}
@media(max-width:820px){
  .plant-grid.pixi-overlay{
    grid-template-columns:repeat(min(2, var(--cols,2)),1fr) !important;
  }
}


/* CannaGrow 0.4.6 – Growroom-Komposition */
.plant-slot.pixi-slot.empty::before{
  top:auto !important;
  bottom:92px !important;
}
.plant-slot.pixi-slot.empty::after{
  bottom:61px !important;
  left:20% !important;
  right:20% !important;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(12,16,21,.64);
  border:1px solid rgba(207,190,232,.10);
}
.plant-slot.pixi-slot.progress-locked::before{
  bottom:92px !important;
}