:root{
  color-scheme: dark;
  --bg0:#02090f;
  --bg1:#041822;
  --cyan:#42ddff;
  --green:#43ff78;
  --red:#ff4b67;
  --violet:#a768ff;
  --gold:#ffd85b;
  --text:#ecfbff;
  --muted:#8fb2bf;
  --line:rgba(111,211,239,.24);
  --panel:rgba(6,23,34,.64);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:
  radial-gradient(circle at 50% -10%, #0c3850 0, transparent 38%),
  radial-gradient(circle at 10% 80%, rgba(25,101,111,.24), transparent 28%),
  linear-gradient(180deg,var(--bg1),var(--bg0));color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
body{min-height:100dvh}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.2;background-image:
  linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent)}
.ambient{position:fixed;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.2}.ambient-a{width:260px;height:260px;background:#14d4ff;left:-120px;top:20%}.ambient-b{width:300px;height:300px;background:#4cff78;right:-170px;bottom:8%;opacity:.11}
.app-shell{width:min(1180px,100%);min-height:100dvh;margin:auto;padding:18px 18px 22px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px}
.glass,.glass-heavy{border:1px solid rgba(112,214,241,.24);background:linear-gradient(180deg,rgba(12,38,52,.78),rgba(4,20,30,.58));box-shadow:inset 0 1px rgba(255,255,255,.08),0 18px 60px rgba(0,0,0,.22);backdrop-filter:blur(18px)}
.top-hud{display:flex;justify-content:space-between;align-items:center;gap:14px;border-radius:22px;padding:14px 16px}.eyebrow{font-size:10px;letter-spacing:.22em;color:#73dff5;font-weight:800}.title-row{display:flex;align-items:center;gap:10px}.title-row h1{margin:2px 0 0;font-size:clamp(19px,3vw,29px);line-height:1}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}
.metrics{display:flex;align-items:center;gap:8px}.metric{min-width:86px;border:1px solid rgba(126,220,244,.16);background:rgba(2,12,18,.38);padding:8px 10px;border-radius:14px}.metric span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}.metric strong{font-size:18px}.metric:nth-child(1) strong{color:#78ff95}.metric:nth-child(2) strong{color:#ff7185}.icon-btn,.close-btn{border:1px solid rgba(128,221,245,.32);background:rgba(6,24,34,.72);color:#dffaff;border-radius:14px;cursor:pointer}.icon-btn{width:44px;height:44px;font-weight:900;font-size:17px}.icon-btn:hover,.close-btn:hover{border-color:var(--cyan);box-shadow:0 0 22px rgba(66,221,255,.15)}
.playfield-wrap{position:relative;min-height:430px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:30px;background:radial-gradient(circle at 50% 50%,rgba(19,70,82,.12),transparent 56%)}#gameCanvas{width:100%;height:100%;min-height:430px;display:block;touch-action:manipulation}.dish-label{position:absolute;font-size:9px;letter-spacing:.15em;font-weight:800;color:rgba(211,247,255,.5);pointer-events:none}.left-label{left:4%;top:12%}.right-label{right:4%;bottom:13%}.conflict-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px 13px;border-radius:999px;background:rgba(76,5,15,.76);border:1px solid rgba(255,94,118,.72);color:#ffc7ce;font-size:10px;letter-spacing:.16em;font-weight:900;box-shadow:0 0 30px rgba(255,61,90,.22);pointer-events:none;animation:pulse 1.4s infinite}.hidden{display:none!important}@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.04);box-shadow:0 0 38px rgba(255,61,90,.34)}}
.bottom-panel{border-radius:22px;padding:12px 14px;display:flex;gap:14px;align-items:center;justify-content:space-between}.strip-title{font-size:9px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}.gene-slots{display:flex;gap:8px;min-height:43px}.mini-gene{display:flex;align-items:center;gap:8px;border:1px solid rgba(120,218,245,.18);background:rgba(2,12,18,.4);padding:7px 9px;border-radius:12px}.mini-gene .orb{width:26px;height:26px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 14px currentColor inset,0 0 12px currentColor}.mini-gene span{font-size:11px;font-weight:800}.empty-slot{width:72px;height:43px;border:1px dashed rgba(128,221,245,.18);border-radius:12px;display:grid;place-items:center;color:#466773;font-size:18px}.actions{display:flex;gap:8px}.action{border-radius:16px;padding:10px 15px;border:1px solid rgba(125,218,242,.24);color:#ecfbff;display:flex;align-items:center;gap:10px;cursor:pointer;min-width:134px;justify-content:center}.action small{display:block;color:#8fb2bf;font-size:9px;text-transform:uppercase;letter-spacing:.12em}.action span:last-child{font-size:12px;font-weight:800}.action-icon{font-size:23px}.secondary{background:rgba(4,21,31,.62)}.primary{background:linear-gradient(180deg,rgba(21,142,73,.82),rgba(7,75,46,.86));border-color:rgba(78,255,129,.55);box-shadow:0 0 30px rgba(60,255,116,.12)}.action:hover{transform:translateY(-1px)}
.modal-backdrop{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:rgba(0,7,11,.74);backdrop-filter:blur(13px);z-index:20}.mutation-modal{position:relative;width:min(980px,100%);border-radius:28px;padding:28px;border-color:rgba(108,212,240,.34);box-shadow:0 35px 120px rgba(0,0,0,.55),0 0 70px rgba(42,183,224,.08)}.glass-heavy{background:linear-gradient(180deg,rgba(4,24,36,.95),rgba(2,10,18,.96))}.close-btn{position:absolute;right:16px;top:16px;width:36px;height:36px;font-size:22px}.mutation-kicker{color:#72e3fb;font-size:10px;letter-spacing:.22em;font-weight:900}.mutation-modal h2{font-size:clamp(28px,6vw,48px);margin:6px 0 4px;letter-spacing:-.04em}.mutation-modal>p{margin:0 0 22px;color:#8eb4c2;max-width:720px;font-size:13px;line-height:1.55}.gene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.gene-card{text-align:left;position:relative;overflow:hidden;border-radius:21px;min-height:205px;padding:18px;border:1px solid rgba(121,218,244,.18);background:linear-gradient(180deg,rgba(13,41,55,.74),rgba(4,18,28,.84));color:white;cursor:pointer;transition:.18s ease}.gene-card:before{content:"";position:absolute;inset:-40% 40% 45% -20%;background:radial-gradient(circle,currentColor,transparent 67%);opacity:.14;pointer-events:none}.gene-card:hover{transform:translateY(-2px);border-color:currentColor}.gene-card.selected{border-color:currentColor;box-shadow:0 0 0 1px currentColor inset,0 0 32px color-mix(in srgb,currentColor 22%,transparent)}.gene-icon{width:56px;height:56px;border-radius:20px;background:radial-gradient(circle at 40% 35%,#fff 0 3%,currentColor 8%,transparent 67%);background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden;filter:drop-shadow(0 0 11px currentColor);margin-bottom:16px;position:relative}.gene-icon:after{content:"";position:absolute;inset:8px;border:2px dotted currentColor;border-radius:50%;opacity:.7}.gene-name{font-size:17px;font-weight:900;margin-bottom:6px}.gene-desc{font-size:11px;color:#9bbbc6;line-height:1.45;min-height:48px}.gene-stat{margin-top:13px;font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:900;color:currentColor}.modal-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:20px}.selection-state{color:#8eb5c3;font-size:11px;text-transform:uppercase;letter-spacing:.12em}.continue-btn{border:1px solid rgba(74,255,126,.64);background:linear-gradient(180deg,#3fe66f,#158f47);color:#02140a;border-radius:16px;padding:14px 22px;font-weight:950;cursor:pointer;box-shadow:0 0 26px rgba(62,255,119,.17)}.continue-btn:disabled{opacity:.38;cursor:default}.toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:rgba(4,18,27,.9);border:1px solid rgba(120,218,242,.28);padding:10px 14px;border-radius:999px;color:#dffaff;font-size:11px;transition:.2s;z-index:30}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:720px){.app-shell{padding:10px 10px 14px;gap:9px}.top-hud{padding:11px 12px;border-radius:18px}.eyebrow{font-size:8px}.metric{min-width:62px;padding:7px}.metric span{font-size:7px}.metric strong{font-size:15px}.playfield-wrap,#gameCanvas{min-height:440px}.bottom-panel{align-items:stretch;flex-direction:column}.actions{width:100%}.action{flex:1;min-width:0}.gene-grid{grid-template-columns:1fr}.gene-card{min-height:150px}.mutation-modal{padding:22px 16px 16px;max-height:92dvh;overflow:auto}.modal-footer{position:sticky;bottom:-16px;padding:14px 0 0;background:linear-gradient(transparent,#06131c 25%)}.dish-label{display:none}}

/* v0.4 border renderer switcher */
.border-switch{display:flex;flex-direction:column;justify-content:center;min-width:190px}
.border-switch .strip-title{display:flex;justify-content:space-between;gap:10px;align-items:center}
#borderModeLabel{color:#dffaff;font-weight:900}
.border-buttons{display:flex;gap:6px}
.border-mode{width:38px;height:38px;border-radius:11px;border:1px solid rgba(125,218,242,.22);background:rgba(2,12,18,.48);color:#91b9c6;font-weight:950;cursor:pointer;transition:.15s ease}
.border-mode:hover{border-color:rgba(91,232,255,.62);color:#e9fdff;transform:translateY(-1px)}
.border-mode.active{color:#07150c;background:linear-gradient(180deg,#66f58c,#2bbd62);border-color:#7effa2;box-shadow:0 0 20px rgba(72,255,126,.16)}
@media(max-width:860px){.bottom-panel{flex-wrap:wrap}.border-switch{order:2;min-width:170px}.actions{order:3}}
@media(max-width:720px){.border-switch{width:100%;order:2}.border-buttons{width:100%}.border-mode{flex:1}.actions{order:3}}

/* v0.5.7 observation mode */
.conflict-badge{display:none!important}

/* v0.5.8 manual mutation lab */
.mutation-tabs{display:flex;gap:8px;margin:0 0 10px}.mutation-tab{flex:1;border:1px solid rgba(120,218,245,.22);background:rgba(3,18,27,.68);color:#9bc0cb;border-radius:14px;padding:10px 12px;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.mutation-tab.active{color:#082114;background:linear-gradient(180deg,#73ff9b,#2fcf69);border-color:#8bffab;box-shadow:0 0 20px rgba(69,255,126,.15)}.mutation-tab.bot.active{color:#27070e;background:linear-gradient(180deg,#ff8297,#d93658);border-color:#ff91a4;box-shadow:0 0 20px rgba(255,75,105,.14)}.side-hint{font-size:11px;color:#89afbc;margin:0 0 14px;padding:8px 10px;border-left:2px solid rgba(92,226,255,.34);background:rgba(3,17,26,.34);border-radius:0 10px 10px 0}.gene-card{cursor:default}.gene-card .gene-select-area{cursor:pointer}.gene-card .gene-select-area:focus{outline:none}.gene-card.unselected{opacity:.82}.gene-card.unselected .gene-icon{filter:drop-shadow(0 0 7px currentColor) saturate(.76)}.gene-control{margin-top:12px;padding-top:11px;border-top:1px solid rgba(132,217,240,.12)}.gene-control-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.gene-control-label{font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:#8fb4bf}.gene-control-value{font-size:13px;font-weight:950;color:currentColor;min-width:42px;text-align:right}.gene-slider{width:100%;accent-color:currentColor;cursor:pointer}.gene-effect{margin-top:7px;font-size:9px;line-height:1.35;color:#789eaa}.gene-card.selected .gene-control{border-top-color:color-mix(in srgb,currentColor 28%,transparent)}
@media(max-width:720px){.mutation-tabs{position:sticky;top:-22px;z-index:4;background:#06131c;padding:6px 0}.gene-control{margin-top:9px}.gene-effect{font-size:8px}}
.mutation-modal{max-height:94dvh;overflow:auto}


/* v0.5.9 simulation speed */
.speed-control{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid rgba(126,220,244,.16);background:rgba(2,12,18,.38);border-radius:13px}
.speed-btn{height:34px;min-width:38px;padding:0 8px;border:1px solid transparent;border-radius:9px;background:transparent;color:#86aebb;font-size:10px;font-weight:900;cursor:pointer;transition:.15s ease}
.speed-btn:hover{color:#e9fdff;border-color:rgba(91,232,255,.34)}
.speed-btn.active{background:rgba(73,226,255,.14);border-color:rgba(91,232,255,.48);color:#e8fcff;box-shadow:0 0 14px rgba(66,221,255,.08)}
@media(max-width:720px){.speed-control{order:3;width:100%;justify-content:center}.metrics{flex-wrap:wrap;justify-content:flex-end}.speed-btn{flex:1;max-width:72px}}


/* Android performance: avoid expensive live backdrop compositing over the animated canvas. */
@media (pointer:coarse) and (max-width:900px){
  .glass,.glass-heavy,.modal-backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
  .ambient{filter:blur(38px)}
}

/* v0.6.4 mobile portrait fit + sharper presentation */
@media (pointer:coarse) and (max-width:900px){
  html,body{height:100%;overflow:hidden}
  body{height:100dvh;min-height:0}
  .app-shell{
    height:100dvh;min-height:0;
    padding:4px 6px calc(4px + env(safe-area-inset-bottom));
    gap:5px;grid-template-rows:auto minmax(0,1fr) auto
  }
  .top-hud{padding:5px 7px;border-radius:13px;gap:5px;min-height:0}
  .eyebrow{display:none}
  .title-row{gap:5px}
  .title-row h1{font-size:0;margin:0;white-space:nowrap}
  .title-row h1:after{content:"PETRI";font-size:15px;letter-spacing:.02em}
  .live-dot{width:6px;height:6px}
  .metrics{gap:3px;flex-wrap:nowrap!important;justify-content:flex-end}
  .metric{min-width:44px;padding:3px 5px;border-radius:9px}
  .metric span{font-size:6px;letter-spacing:.07em}
  .metric strong{font-size:13px}
  .speed-control{order:initial!important;width:auto!important;justify-content:center;padding:2px;gap:2px;border-radius:9px}
  .speed-btn{flex:none!important;max-width:none!important;min-width:27px;height:27px;padding:0 3px;border-radius:7px;font-size:9px}
  .icon-btn{width:29px;height:29px;border-radius:9px;font-size:13px}

  .playfield-wrap,#gameCanvas{min-height:0!important;height:100%;border-radius:16px}

  .bottom-panel{
    display:grid!important;grid-template-columns:auto auto minmax(0,1fr);
    align-items:center!important;gap:6px;padding:5px 6px;border-radius:13px;
    flex-direction:unset!important;flex-wrap:nowrap!important
  }
  .strip-title{font-size:7px;letter-spacing:.08em;margin-bottom:3px;white-space:nowrap}
  .gene-strip{min-width:0}
  .gene-slots{min-height:0;gap:4px}
  .mini-gene{padding:2px 3px;border-radius:8px;gap:0}
  .mini-gene .orb{width:25px;height:25px;box-shadow:0 0 7px currentColor inset,0 0 5px currentColor}
  .mini-gene span{display:none}
  .empty-slot{width:31px;height:29px;border-radius:8px;font-size:13px}

  .border-switch{order:initial!important;width:auto!important;min-width:0!important}
  .border-switch .strip-title{gap:4px}
  .border-buttons{width:auto!important;gap:3px}
  .border-mode{flex:none!important;width:29px;height:29px;border-radius:8px;font-size:10px}

  .actions{order:initial!important;width:auto!important;gap:4px;justify-content:flex-end}
  .action{min-width:0!important;padding:4px 6px;border-radius:9px;gap:3px;min-height:31px}
  .action-icon{font-size:16px}
  .action span:last-child{font-size:0!important;line-height:1}
  .action small{display:block;font-size:7px;letter-spacing:.04em;color:#a7c4cc}

  .toast{bottom:calc(58px + env(safe-area-inset-bottom));font-size:9px;padding:7px 10px}
}

@media (pointer:coarse) and (max-width:900px) and (max-height:680px){
  .app-shell{padding-top:2px;gap:3px}
  .top-hud{padding:3px 5px}
  .bottom-panel{padding:3px 5px}
  .mini-gene .orb{width:22px;height:22px}
  .empty-slot,.border-mode{height:26px}
  .border-mode{width:27px}
  .action{min-height:28px;padding:3px 5px}
}


/* v0.6.5 first-contact mutation flow */
.auto-bot-toggle{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:10px 12px;border-radius:12px;border:1px solid rgba(122,218,244,.14);background:rgba(3,17,26,.42);color:#b8dbe6;font-size:11px;line-height:1.35}.auto-bot-toggle input{margin-top:2px;accent-color:#6dff98}.locked-slot{width:72px;height:43px;border:1px dashed rgba(255,216,91,.24);border-radius:12px;display:grid;place-items:center;color:#d2c07a;background:rgba(36,31,12,.18);font-size:15px}.locked-slot small{display:block;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#c8bb8c}.mutation-modal.first-contact{box-shadow:0 35px 120px rgba(0,0,0,.55),0 0 90px rgba(121,255,161,.12)}
@media(max-width:720px){.auto-bot-toggle{font-size:10px;padding:8px 10px}.locked-slot{width:31px;height:29px;border-radius:8px;font-size:11px}.locked-slot small{font-size:6px}}

/* v0.6.6 first collision plaque */
.collision-prompt{position:absolute;left:50%;top:11%;transform:translateX(-50%);width:min(440px,calc(100% - 24px));padding:14px 16px 16px;border-radius:20px;border:1px solid rgba(123,226,245,.28);background:linear-gradient(180deg,rgba(5,24,36,.94),rgba(3,14,22,.92));box-shadow:0 20px 70px rgba(0,0,0,.34),0 0 28px rgba(76,220,255,.09);backdrop-filter:blur(16px);z-index:6;text-align:left}.collision-chip{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid rgba(112,235,152,.34);background:rgba(18,88,45,.36);color:#8dffb0;font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.collision-title{margin-top:10px;font-size:clamp(18px,3vw,28px);font-weight:900;line-height:1.02;color:#f1fdff}.collision-text{margin-top:7px;color:#98c0cb;font-size:12px;line-height:1.45;max-width:34ch}.collision-btn{margin-top:13px;border:1px solid rgba(103,255,149,.58);background:linear-gradient(180deg,#45f07a,#19964f);color:#062012;border-radius:14px;padding:11px 14px;font-size:12px;font-weight:950;cursor:pointer;box-shadow:0 0 24px rgba(58,255,113,.12)}.collision-btn:hover{transform:translateY(-1px)}
@media(max-width:720px){.collision-prompt{top:9px;width:calc(100% - 14px);padding:10px 11px 12px;border-radius:16px}.collision-chip{font-size:7px;padding:3px 6px}.collision-title{margin-top:7px;font-size:18px}.collision-text{font-size:10px;line-height:1.35}.collision-btn{margin-top:9px;padding:9px 11px;border-radius:11px;font-size:10px}}


/* v0.6.8 collision point prompt */
.collision-prompt{position:absolute;left:50%;top:50%;transform:translate(-50%,-120%);width:auto;max-width:min(310px,74vw);z-index:7;pointer-events:auto}.collision-marker-ring{position:absolute;left:50%;top:100%;width:54px;height:54px;transform:translate(-50%,-18px);border-radius:999px;border:1px solid rgba(122,240,255,.46);background:radial-gradient(circle,rgba(84,233,255,.16),rgba(84,233,255,0) 70%);box-shadow:0 0 0 5px rgba(122,240,255,.04),0 0 28px rgba(84,233,255,.18)}.collision-marker-ring::before,.collision-marker-ring::after{content:"";position:absolute;border-radius:999px}.collision-marker-ring::before{inset:10px;border:1px dashed rgba(170,247,255,.30);animation:spinring 7s linear infinite}.collision-marker-ring::after{left:50%;top:50%;width:8px;height:8px;background:#bffaff;transform:translate(-50%,-50%);box-shadow:0 0 18px rgba(191,250,255,.5)}.collision-card{padding:12px 13px 13px;border-radius:18px;border:1px solid rgba(123,226,245,.28);background:linear-gradient(180deg,rgba(5,24,36,.96),rgba(3,14,22,.94));box-shadow:0 20px 70px rgba(0,0,0,.34),0 0 28px rgba(76,220,255,.09);backdrop-filter:blur(14px)}.collision-visual{width:64px;height:64px;margin:0 auto 8px;position:relative;border-radius:999px;border:1px solid rgba(151,239,255,.18);background:radial-gradient(circle at 40% 35%,rgba(33,62,78,.92),rgba(7,20,28,.92) 72%);box-shadow:inset 0 0 24px rgba(125,241,255,.07)}.collision-visual .orb{position:absolute;top:50%;width:18px;height:18px;border-radius:999px;transform:translateY(-50%)}.collision-visual .orb.green{left:12px;background:radial-gradient(circle at 35% 35%,#bbffcb,#42e471 58%,#0b4926 100%);box-shadow:0 0 20px rgba(66,228,113,.36)}.collision-visual .orb.red{right:12px;background:radial-gradient(circle at 35% 35%,#ffd0d8,#ff5a7d 58%,#5d1522 100%);box-shadow:0 0 20px rgba(255,90,125,.32)}.collision-visual .spark{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%) rotate(45deg);background:radial-gradient(circle,#d7fdff,rgba(215,253,255,0) 72%)}@keyframes spinring{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(max-width:720px){.collision-prompt{max-width:min(260px,76vw)}.collision-marker-ring{width:42px;height:42px;transform:translate(-50%,-12px)}.collision-marker-ring::before{inset:8px}.collision-marker-ring::after{width:6px;height:6px}.collision-card{padding:9px 10px 10px;border-radius:14px}.collision-visual{width:50px;height:50px;margin-bottom:6px}.collision-visual .orb{width:13px;height:13px}.collision-visual .orb.green{left:10px}.collision-visual .orb.red{right:10px}}

/* v0.6.9 bot genes strip */
.bot-gene-strip .strip-title{color:#ffb0bc}.bot-gene-slots .mini-gene{border-color:rgba(255,126,151,.20);background:rgba(30,8,14,.38)}.bot-gene-slots .mini-gene span{color:#ffd7de}.bot-gene-slots .mini-gene .orb{box-shadow:0 0 14px rgba(255,92,122,.28) inset,0 0 12px rgba(255,92,122,.25)}.bot-gene-slots .empty-slot{border-color:rgba(255,132,155,.18);color:#7f4b58}.bot-gene-slots .locked-slot{border-color:rgba(255,174,112,.22);background:rgba(48,21,8,.16);color:#f0bc8a}@media(max-width:720px){.bot-gene-strip{width:100%}}

/* v0.6.11 two-step collision prompt */
.collision-mini-prompt{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:7;pointer-events:auto}.collision-mini-ring{position:absolute;left:50%;top:100%;width:46px;height:46px;transform:translate(-50%,-13px);border-radius:999px;border:1px solid rgba(153,245,255,.48);background:radial-gradient(circle,rgba(95,230,255,.18),rgba(95,230,255,0) 72%);box-shadow:0 0 0 4px rgba(122,240,255,.06),0 0 28px rgba(84,233,255,.22);animation:minipulse 1.25s ease-in-out infinite}.collision-mini-ring::before{content:"";position:absolute;inset:8px;border-radius:999px;border:1px dashed rgba(187,247,255,.32);animation:spinring 6s linear infinite}.collision-mini-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:156px;padding:10px 12px;border-radius:15px;border:1px solid rgba(123,226,245,.28);background:linear-gradient(180deg,rgba(7,27,39,.96),rgba(4,17,25,.94));box-shadow:0 18px 60px rgba(0,0,0,.34),0 0 24px rgba(76,220,255,.08);backdrop-filter:blur(12px);color:#eefcff;cursor:pointer;text-align:left}.collision-mini-chip{display:inline-block;padding:3px 6px;border-radius:999px;border:1px solid rgba(112,235,152,.32);background:rgba(18,88,45,.30);color:#8dffb0;font-size:8px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.collision-mini-title{font-size:13px;font-weight:900;line-height:1.08}.collision-mini-hint{font-size:10px;color:#90bbc7}.collision-prompt{position:absolute;left:50%;top:50%;transform:translate(-50%,-120%);width:auto;max-width:min(310px,74vw);z-index:8;pointer-events:auto}.collision-marker-ring{position:absolute;left:50%;top:100%;width:54px;height:54px;transform:translate(-50%,-18px);border-radius:999px;border:1px solid rgba(122,240,255,.46);background:radial-gradient(circle,rgba(84,233,255,.16),rgba(84,233,255,0) 70%);box-shadow:0 0 0 5px rgba(122,240,255,.04),0 0 28px rgba(84,233,255,.18)}.collision-marker-ring::before,.collision-marker-ring::after{content:"";position:absolute;border-radius:999px}.collision-marker-ring::before{inset:10px;border:1px dashed rgba(170,247,255,.30);animation:spinring 7s linear infinite}.collision-marker-ring::after{left:50%;top:50%;width:8px;height:8px;background:#bffaff;transform:translate(-50%,-50%);box-shadow:0 0 18px rgba(191,250,255,.5)}.collision-card{padding:12px 13px 13px;border-radius:18px;border:1px solid rgba(123,226,245,.28);background:linear-gradient(180deg,rgba(5,24,36,.96),rgba(3,14,22,.94));box-shadow:0 20px 70px rgba(0,0,0,.34),0 0 28px rgba(76,220,255,.09);backdrop-filter:blur(14px)}@keyframes minipulse{0%,100%{transform:translate(-50%,-13px) scale(1);opacity:.92}50%{transform:translate(-50%,-13px) scale(1.08);opacity:1}}
@media(max-width:720px){.collision-mini-card{min-width:136px;padding:8px 10px;border-radius:12px}.collision-mini-title{font-size:11px}.collision-mini-hint{font-size:9px}.collision-mini-ring{width:38px;height:38px;transform:translate(-50%,-10px)}.collision-mini-ring::before{inset:7px}.collision-prompt{max-width:min(260px,76vw)}.collision-marker-ring{width:42px;height:42px;transform:translate(-50%,-12px)}.collision-marker-ring::before{inset:8px}.collision-marker-ring::after{width:6px;height:6px}.collision-card{padding:9px 10px 10px;border-radius:14px}.collision-visual{width:50px;height:50px;margin-bottom:6px}.collision-visual .orb{width:13px;height:13px}.collision-visual .orb.green{left:10px}.collision-visual .orb.red{right:10px}}

/* v0.6.12 refined collision UI + mobile edge cleanup */
.collision-mini-prompt{position:absolute;left:50%;top:50%;transform:translate(-50%,-94%);z-index:7;pointer-events:auto}.collision-mini-ring{position:absolute;left:50%;top:100%;width:38px;height:38px;transform:translate(-50%,-11px);border-radius:999px;border:1px solid rgba(153,245,255,.52);background:radial-gradient(circle,rgba(95,230,255,.14),rgba(95,230,255,0) 72%);box-shadow:0 0 0 3px rgba(122,240,255,.05),0 0 20px rgba(84,233,255,.16);animation:minipulse 1.25s ease-in-out infinite}.collision-mini-ring::before,.collision-mini-ring::after{display:none}.collision-mini-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:122px;padding:8px 10px;border-radius:13px;border:1px solid rgba(123,226,245,.24);background:linear-gradient(180deg,rgba(7,27,39,.96),rgba(4,17,25,.94));box-shadow:0 16px 52px rgba(0,0,0,.30),0 0 18px rgba(76,220,255,.05);backdrop-filter:blur(10px);color:#eefcff;cursor:pointer;text-align:left}.collision-mini-chip{display:none}.collision-mini-title{font-size:12px;font-weight:900;line-height:1.06}.collision-mini-hint{font-size:9px;color:#8fb8c4}.collision-prompt{position:absolute;left:50%;top:50%;transform:translate(-50%,-108%);width:auto;max-width:min(250px,70vw);z-index:8;pointer-events:auto}.collision-card-compact{padding:10px 11px 11px;border-radius:16px;min-width:210px;box-shadow:0 16px 56px rgba(0,0,0,.32),0 0 22px rgba(76,220,255,.06)}.collision-marker-ring{display:none}.collision-chip{display:none}.collision-title.compact{margin-top:6px;font-size:16px}.collision-text.compact{margin-top:4px;font-size:11px;line-height:1.35;color:#9fc2cc;max-width:26ch}.collision-btn.compact{margin-top:10px;padding:9px 11px;border-radius:12px;font-size:11px}.collision-clash-art{width:74px;height:54px;margin:0 auto 3px;position:relative}.microbe{position:absolute;top:11px;width:26px;height:26px;border-radius:56% 44% 52% 48%/45% 58% 42% 55%;filter:drop-shadow(0 0 12px rgba(255,255,255,.08))}.microbe::before,.microbe::after{content:"";position:absolute;border-radius:999px;background:currentColor;opacity:.95}.microbe::before{width:5px;height:5px;left:6px;top:7px;box-shadow:8px 2px 0 currentColor,4px 8px 0 rgba(255,255,255,.55)}.microbe::after{width:16px;height:2px;left:-7px;top:12px;background:linear-gradient(90deg,currentColor,transparent);transform:rotate(-20deg);opacity:.55}.microbe-green{left:3px;color:#75ff96;background:radial-gradient(circle at 35% 35%,#dfffe6 0,#83ff9c 24%,#2dc95f 56%,#0d5129 100%);box-shadow:0 0 18px rgba(70,233,114,.30)}.microbe-green::after{left:-6px;top:14px;transform:rotate(-24deg)}.microbe-red{right:3px;color:#ff7f9a;background:radial-gradient(circle at 35% 35%,#ffe6eb 0,#ff8ba2 26%,#eb4e71 58%,#611322 100%);box-shadow:0 0 18px rgba(255,94,120,.26)}.microbe-red::after{left:16px;top:11px;transform:rotate(18deg)}.microbe .sat{position:absolute;width:4px;height:4px;border-radius:999px;background:rgba(255,255,255,.8);box-shadow:0 0 8px currentColor}.microbe .s1{left:-3px;top:4px}.microbe .s2{right:-2px;top:18px}.microbe .s3{left:11px;bottom:-3px}.clash-core{position:absolute;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%) rotate(45deg);background:radial-gradient(circle,#e6fdff 0,rgba(230,253,255,.65) 34%,rgba(230,253,255,0) 72%)}.clash-core::before,.clash-core::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;transform:translate(-50%,-50%) rotate(0deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0))}.clash-core::after{transform:translate(-50%,-50%) rotate(90deg)}@media(max-width:720px){.collision-mini-card{min-width:110px;padding:7px 9px;border-radius:11px}.collision-mini-title{font-size:11px}.collision-mini-hint{font-size:8px}.collision-mini-ring{width:34px;height:34px;transform:translate(-50%,-9px)}.collision-prompt{max-width:min(224px,74vw);transform:translate(-50%,-104%)}.collision-card-compact{min-width:188px;padding:8px 9px 9px;border-radius:13px}.collision-clash-art{width:62px;height:46px}.microbe{width:21px;height:21px;top:11px}.collision-title.compact{font-size:14px;margin-top:4px}.collision-text.compact{font-size:10px;line-height:1.28}.collision-btn.compact{margin-top:8px;padding:8px 10px;border-radius:10px;font-size:10px}}


/* v0.6.13 asset-based collision icon */
.collision-mini-card{gap:4px;min-width:118px;padding:7px 9px 8px}.collision-mini-icon{width:40px;height:28px;display:block;pointer-events:none;animation:collisionFloat 1.8s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(139,245,255,.14))}.collision-card-compact{display:flex;flex-direction:column;align-items:flex-start}.collision-card-icon{width:86px;height:auto;display:block;margin:0 0 6px;align-self:center;filter:drop-shadow(0 0 14px rgba(143,245,255,.10))}.collision-title.compact{margin-top:2px}.collision-mini-ring{width:34px;height:34px;transform:translate(-50%,-10px)}@keyframes collisionFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@media(max-width:720px){.collision-mini-card{min-width:104px;padding:6px 8px 7px}.collision-mini-icon{width:34px;height:24px}.collision-card-icon{width:72px;margin-bottom:4px}.collision-prompt{max-width:min(212px,74vw)}.collision-card-compact{min-width:176px;padding:8px 9px 9px}}

/* v0.6.14 quick slot picker + PNG collision icon */
.gene-slots.player-slots .mini-gene,.gene-slots.player-slots .empty-slot,.gene-slots.player-slots .locked-slot{cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.gene-slots.player-slots .mini-gene:hover,.gene-slots.player-slots .empty-slot:hover{transform:translateY(-1px);border-color:rgba(134,238,255,.32);box-shadow:0 0 18px rgba(105,224,255,.08)}.mini-gene.active-pick{border-color:rgba(110,255,157,.55)!important;box-shadow:0 0 20px rgba(78,255,129,.12)}.slot-picker{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:30;padding:10px 12px 12px;border-radius:16px;border:1px solid rgba(124,220,246,.24);background:linear-gradient(180deg,rgba(7,24,35,.96),rgba(3,13,21,.95));backdrop-filter:blur(14px);box-shadow:0 24px 80px rgba(0,0,0,.4),0 0 26px rgba(78,221,255,.08)}.slot-picker-head{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#91b8c4;margin-bottom:8px}.slot-picker-grid{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.slot-pick-btn{width:52px;height:52px;border-radius:14px;border:1px solid rgba(120,218,245,.18);background:rgba(2,12,18,.45);display:grid;place-items:center;cursor:pointer;position:relative}.slot-pick-btn img{width:30px;height:30px;display:block;filter:drop-shadow(0 0 10px rgba(255,255,255,.08))}.slot-pick-btn.active{border-color:rgba(109,255,152,.48);box-shadow:0 0 18px rgba(65,238,120,.10)}.slot-pick-btn.taken::after{content:"";position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:999px;background:#88f8aa;box-shadow:0 0 10px rgba(136,248,170,.4)}.collision-mini-icon{object-fit:contain}.collision-card-icon{object-fit:contain}.collision-mini-card{align-items:center;text-align:center}.collision-card-compact{align-items:center;text-align:center}.collision-title.compact,.collision-text.compact{text-align:center}.collision-text.compact{max-width:22ch}.collision-prompt .collision-btn.compact{align-self:center}@media(max-width:720px){.slot-picker{bottom:66px;padding:8px 9px 9px;border-radius:13px}.slot-picker-head{font-size:8px;margin-bottom:6px}.slot-picker-grid{gap:6px}.slot-pick-btn{width:42px;height:42px;border-radius:11px}.slot-pick-btn img{width:25px;height:25px}.gene-slots.player-slots .mini-gene:hover,.gene-slots.player-slots .empty-slot:hover{transform:none}}

/* v0.6.15 generated collision sprite + reliable quick picker */
.collision-mini-card{min-width:132px;padding:7px 9px 8px;gap:4px;align-items:center;text-align:center}.collision-mini-icon{width:62px;height:34px;display:block;object-fit:cover;border-radius:8px;border:0!important;outline:0!important;box-shadow:none!important;animation:collisionFloat 1.65s ease-in-out infinite}.collision-mini-title{font-size:11px}.collision-mini-hint{font-size:8px}.collision-prompt{max-width:min(340px,78vw)}.collision-card-compact{display:flex;flex-direction:row;align-items:center;gap:10px;min-width:290px;padding:10px 11px;border-radius:15px;text-align:left}.collision-card-icon{width:112px;height:61px;flex:0 0 auto;display:block;object-fit:cover;border-radius:10px;border:0!important;outline:0!important;box-shadow:none!important;margin:0}.collision-card-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.collision-title.compact{text-align:left;margin:0;font-size:15px}.collision-text.compact{text-align:left;margin-top:4px;max-width:22ch;font-size:10px;line-height:1.3}.collision-btn.compact{align-self:flex-start;margin-top:8px;padding:8px 10px;font-size:10px}.slot-picker{display:block;position:fixed!important;left:50%!important;bottom:78px!important;transform:translateX(-50%)!important;z-index:9999!important;min-width:340px;max-width:calc(100vw - 20px);padding:10px 12px 12px;border-radius:16px;border:1px solid rgba(124,220,246,.34);background:linear-gradient(180deg,rgba(7,24,35,.985),rgba(3,13,21,.985));box-shadow:0 24px 80px rgba(0,0,0,.48),0 0 30px rgba(78,221,255,.10)}.slot-picker.hidden{display:none!important}.slot-picker-grid{display:grid;grid-template-columns:repeat(6,48px);gap:7px;justify-content:center}.slot-pick-btn{width:48px;height:48px}.slot-pick-btn img{width:29px;height:29px}.gene-slots.player-slots [data-slot-index]{pointer-events:auto!important;cursor:pointer!important}@media(max-width:720px){.collision-mini-card{min-width:116px;padding:6px 8px 7px}.collision-mini-icon{width:54px;height:30px}.collision-card-compact{min-width:236px;gap:8px;padding:8px 9px}.collision-card-icon{width:88px;height:48px}.collision-title.compact{font-size:13px}.collision-text.compact{font-size:9px;max-width:18ch}.collision-btn.compact{font-size:9px;padding:7px 9px}.slot-picker{bottom:58px!important;min-width:300px;padding:8px 9px 9px}.slot-picker-grid{grid-template-columns:repeat(6,40px);gap:6px}.slot-pick-btn{width:40px;height:40px}.slot-pick-btn img{width:24px;height:24px}}

/* v0.6.16 desktop layout + wider scalable background */
@media (min-width: 1100px){
  body{overflow-x:hidden}
  .app-shell{width:min(1500px,100%);padding:14px 18px 18px;gap:12px;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto minmax(0,1fr)}
  .top-hud{grid-column:1 / -1;grid-row:1}
  .playfield-wrap{grid-column:1;grid-row:2;min-height:calc(100dvh - 156px);border-radius:28px}
  #gameCanvas{min-height:calc(100dvh - 156px)}
  .bottom-panel{grid-column:2;grid-row:2;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:16px 16px 14px;gap:14px;min-height:calc(100dvh - 156px);border-radius:28px}
  .gene-strip,.border-switch,.actions{width:100%}
  .actions{margin-top:auto;display:grid;grid-template-columns:1fr;gap:12px}
  .action{width:100%;min-width:0;justify-content:center;padding:14px 14px}
  .slot-picker{left:auto;right:32px;bottom:24px;transform:none;max-width:340px}
  .slot-picker-grid{justify-content:flex-start}
}

/* smoother colony read at both desktop and mobile */
.playfield-wrap{background:radial-gradient(circle at 50% 50%,rgba(19,70,82,.13),rgba(4,18,27,.08) 58%,rgba(0,0,0,0) 100%)}
#gameCanvas{image-rendering:auto}


/* v0.6.17 full-width desktop + unified slot cards + in-style tooltip */
html,body{width:100%}
.app-shell{width:100%;max-width:none;padding:14px 16px 18px}
.top-hud{width:100%}
.playfield-wrap{width:100%}
.ui-tooltip{position:fixed;left:0;top:0;max-width:260px;padding:10px 12px;border-radius:14px;border:1px solid rgba(118,218,244,.28);background:linear-gradient(180deg,rgba(8,28,40,.98),rgba(4,15,24,.98));box-shadow:0 18px 60px rgba(0,0,0,.42),0 0 22px rgba(88,222,255,.08);color:#dff7ff;font-size:11px;line-height:1.35;z-index:10001;pointer-events:none;transform:translate(14px,14px)}
.ui-tooltip .tip-title{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#73dff5;margin-bottom:4px}.ui-tooltip .tip-body{color:#cfe8f0}.ui-tooltip .tip-accent{display:block;margin-top:5px;color:#90ffaf;font-size:10px;font-weight:800}
@media (min-width: 1100px){
  .app-shell{width:100vw;max-width:none;padding:12px 0 14px 14px;gap:12px;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto minmax(0,1fr)}
  .top-hud{grid-column:1 / -1;grid-row:1;border-radius:0 0 22px 22px;min-height:72px;margin-right:0;padding-left:18px;padding-right:18px}
  .playfield-wrap{grid-column:1;grid-row:2;min-height:calc(100dvh - 110px);border-radius:0;overflow:hidden}
  #gameCanvas{min-height:calc(100dvh - 110px)}
  .bottom-panel{grid-column:2;grid-row:2;min-height:calc(100dvh - 110px);border-radius:22px 0 0 22px;margin-right:0;padding:14px 16px 14px;gap:16px}
  .gene-strip{width:100%}
  .gene-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-height:0}
  .mini-gene,.empty-slot,.locked-slot{width:100%;min-width:0;min-height:52px}
  .mini-gene{padding:8px 10px;border-radius:13px}.mini-gene span{font-size:10px;line-height:1.2}
  .bottom-panel .actions{display:grid;grid-template-columns:1fr;gap:10px}
  .action{width:100%;min-width:0}
  .slot-picker{left:32px!important;top:88px!important;bottom:auto!important;right:auto!important;transform:none!important;min-width:420px;max-width:560px;border-radius:18px;padding:10px 12px 12px}
  .slot-picker-grid{display:grid;grid-template-columns:repeat(6,56px);gap:8px;justify-content:start}
  .slot-pick-btn{width:56px;height:56px;border-radius:15px}
  .slot-pick-btn img{width:34px;height:34px}
}
@media(max-width:720px){.ui-tooltip{max-width:210px;font-size:10px;padding:8px 10px;border-radius:12px}}


/* v0.6.18 desktop centering + right-panel picker */
@media (min-width: 1100px){
  .app-shell{
    width:100vw;
    max-width:none;
    margin:0;
    padding:12px 14px 14px 14px;
    gap:12px;
    grid-template-columns:minmax(150px,240px) minmax(0,1fr) 320px;
    grid-template-rows:auto minmax(0,1fr);
    align-items:stretch;
  }
  .top-hud{
    grid-column:1 / -1;
    grid-row:1;
    width:100%;
    border-radius:0 0 22px 22px;
    min-height:72px;
    padding-left:18px;
    padding-right:18px;
  }
  .playfield-wrap{
    grid-column:2;
    grid-row:2;
    width:100%;
    min-height:calc(100dvh - 112px);
    border-radius:0;
    overflow:hidden;
    justify-self:stretch;
  }
  #gameCanvas{min-height:calc(100dvh - 112px)}
  .bottom-panel{
    position:relative;
    grid-column:3;
    grid-row:2;
    min-height:calc(100dvh - 112px);
    border-radius:22px;
    padding:14px 16px 14px;
    gap:16px;
    margin-right:0;
    margin-left:0;
    align-self:stretch;
    overflow:visible;
  }
  .gene-strip,.border-switch,.actions{width:100%}
  .gene-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mini-gene,.empty-slot,.locked-slot{width:100%;min-width:0;min-height:52px}
  .actions{display:grid;grid-template-columns:1fr;gap:10px}
  .action{width:100%;min-width:0}

  /* quick gene picker appears under the right-side gene slots */
  .slot-picker{
    position:fixed!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    min-width:0!important;
    max-width:none!important;
    width:304px;
    border-radius:18px;
    padding:10px 12px 12px;
  }
  .slot-picker-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px;
    justify-content:stretch!important;
  }
  .slot-pick-btn{width:100%;height:auto;aspect-ratio:1/1;border-radius:14px}
  .slot-pick-btn img{width:34px;height:34px}
}


/* v0.6.19 stable full-screen desktop scene */
@media (min-width:900px){
  html,body{width:100%;height:100%;min-height:0;overflow:hidden!important}
  body{min-height:0!important}
  .app-shell{
    position:relative;
    width:100vw!important;
    height:100dvh!important;
    min-height:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:76px minmax(0,1fr)!important;
    gap:0!important;
    overflow:hidden!important;
  }
  .top-hud{
    position:relative;
    z-index:20;
    grid-column:1!important;
    grid-row:1!important;
    width:100vw!important;
    height:76px!important;
    min-height:76px!important;
    margin:0!important;
    border-radius:0 0 22px 22px!important;
    padding:12px 20px!important;
  }
  .playfield-wrap{
    position:relative;
    z-index:1;
    grid-column:1!important;
    grid-row:2!important;
    width:100vw!important;
    height:calc(100dvh - 76px)!important;
    min-height:0!important;
    margin:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:radial-gradient(circle at 50% 48%,rgba(19,70,82,.14),rgba(4,18,27,.06) 58%,rgba(0,0,0,0) 100%)!important;
  }
  #gameCanvas{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    display:block!important;
  }
  .bottom-panel{
    position:absolute!important;
    z-index:15;
    top:88px!important;
    right:18px!important;
    bottom:14px!important;
    left:auto!important;
    width:320px!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    border-radius:22px!important;
    padding:14px 16px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:14px!important;
    overflow:visible!important;
  }
  .gene-strip,.border-switch,.actions{width:100%!important}
  .gene-slots{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;min-height:0!important}
  .mini-gene,.empty-slot,.locked-slot{width:100%!important;min-width:0!important;min-height:52px!important}
  .mini-gene{padding:8px 10px!important;border-radius:13px!important}
  .mini-gene span{font-size:10px!important;line-height:1.2!important}
  .actions{margin-top:auto!important;display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .action{width:100%!important;min-width:0!important}

  /* Inline quick picker: always directly under player's active slots. */
  .slot-picker{
    position:relative!important;
    inset:auto!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:-4px 0 0!important;
    padding:9px 10px 10px!important;
    border-radius:15px!important;
    z-index:2!important;
  }
  .slot-picker-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    justify-content:stretch!important;
  }
  .slot-pick-btn{width:100%!important;height:auto!important;aspect-ratio:1/1!important;border-radius:12px!important}
  .slot-pick-btn img{width:30px!important;height:30px!important}
  .slot-picker-head{margin-bottom:7px!important}
}


/* v0.6.20 progression + true dish-zoom */
.side-panel{border-radius:22px;padding:14px 16px;display:flex;flex-direction:column;gap:14px;z-index:15}
.panel-group{display:flex;flex-direction:column;gap:8px}
.resource-card{display:flex;align-items:center;gap:12px;border:1px solid rgba(120,218,245,.18);background:rgba(2,12,18,.42);border-radius:16px;padding:11px 12px;min-height:72px}
.resource-icon-wrap{width:46px;height:46px;border-radius:14px;border:1px solid rgba(113,237,255,.26);display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(23,74,88,.85),rgba(4,21,31,.9))}
.resource-icon{width:30px;height:30px;display:block;filter:drop-shadow(0 0 10px rgba(97,236,255,.18))}
.resource-orb{width:46px;height:46px;border-radius:14px;border:1px solid rgba(113,237,255,.22);background:radial-gradient(circle at 35% 35%,rgba(107,255,178,.35),rgba(18,131,94,.24) 42%,rgba(4,21,31,.88) 75%);box-shadow:inset 0 0 18px rgba(78,255,129,.12),0 0 18px rgba(78,255,129,.08)}
.resource-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.resource-label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#95bac6}
.resource-copy strong{font-size:28px;line-height:1;color:#eefcff}
.resource-copy small{font-size:10px;line-height:1.28;color:#8baeb9;max-width:24ch}
.left-hint-panel{border:1px solid rgba(113,237,255,.14);background:rgba(2,12,18,.26);border-radius:16px;padding:10px 12px}
.left-hint-copy{font-size:11px;line-height:1.45;color:#94b6c1}

@media (min-width:900px){
  .left-panel{
    position:absolute!important;
    z-index:15!important;
    top:50%!important;
    left:18px!important;
    transform:translateY(-50%)!important;
    width:236px!important;
    max-width:236px!important;
    margin:0!important;
  }
  .bottom-panel{
    position:absolute!important;
    z-index:15!important;
    top:50%!important;
    right:26px!important;
    left:auto!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:308px!important;
    min-height:0!important;
    max-height:calc(100dvh - 120px)!important;
    overflow:auto!important;
    scrollbar-width:thin;
  }
  .playfield-wrap{width:100vw!important;height:calc(100dvh - 76px)!important;min-height:0!important;overflow:hidden!important}
  #gameCanvas{width:100%!important;height:100%!important;display:block!important}
  .slot-picker{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin-top:2px!important;
    z-index:2!important;
  }
  .slot-picker-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
    justify-content:stretch!important;
  }
  .slot-pick-btn{width:100%!important;height:auto!important;aspect-ratio:1/1!important}
}

@media (max-width:899px){
  .left-panel{order:2}
  .left-panel .panel-group:last-child{display:none}
  .side-panel{padding:12px 13px}
  .resource-card{min-height:64px}
  .resource-copy strong{font-size:24px}
}


/* v0.6.21 stronger zoom + refined resource assets + fixed desktop side panel */
.resource-icon-wrap{overflow:hidden;position:relative}
.resource-icon-wrap:after{content:"";position:absolute;inset:4px;border-radius:12px;pointer-events:none;box-shadow:inset 0 0 18px rgba(103,246,255,.08)}
.biomass-wrap{background:radial-gradient(circle at 50% 35%,rgba(13,56,41,.9),rgba(4,21,31,.94));border-color:rgba(118,255,175,.28)}
.biomass-icon{width:34px;height:34px;filter:drop-shadow(0 0 12px rgba(79,255,132,.22))}
.dna-resource .resource-icon{width:34px;height:34px;filter:drop-shadow(0 0 12px rgba(96,236,255,.24))}

@media (min-width:900px){
  .bottom-panel{
    right:18px!important;
    top:94px!important;
    bottom:18px!important;
    width:326px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    display:grid!important;
    grid-template-rows:auto 172px auto auto 1fr auto!important;
    align-content:start!important;
    gap:12px!important;
    overflow:hidden!important;
    border-radius:24px!important;
  }
  .bottom-panel .gene-strip,
  .bottom-panel .bot-gene-strip,
  .bottom-panel .border-switch,
  .bottom-panel .actions{width:100%!important;min-width:0!important}
  .bottom-panel .actions{margin-top:auto!important}
  .bottom-panel #slotPicker,
  .bottom-panel #slotPicker.hidden{
    display:block!important;
    width:100%!important;
    min-height:172px!important;
    margin:0!important;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
  }
  .bottom-panel #slotPicker:not(.hidden){visibility:visible!important;opacity:1!important;pointer-events:auto!important}
  .bottom-panel #slotPicker .slot-picker-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;align-content:start!important}
}

@media (max-width:899px){
  .biomass-icon,.dna-resource .resource-icon{width:30px;height:30px}
}


/* v0.6.22 — generated sprites + stable right panel + reliable quick picker */
.resource-icon-wrap{background:rgba(3,18,27,.42)!important;overflow:visible!important}
.resource-icon-wrap:after{display:none!important}
.resource-icon{width:42px!important;height:42px!important;object-fit:contain!important;filter:drop-shadow(0 0 13px rgba(101,239,255,.22))!important}
.biomass-icon{width:43px!important;height:43px!important;filter:drop-shadow(0 0 14px rgba(72,255,126,.25))!important}
.collision-mini-icon,.collision-card-icon{object-fit:contain!important;background:transparent!important;border:0!important;box-shadow:none!important}
.collision-mini-icon{width:76px!important;height:48px!important}
.collision-card-icon{width:118px!important;height:82px!important;border-radius:0!important}

@media (min-width:900px){
  html,body{width:100%!important;height:100%!important;overflow:hidden!important}
  body{min-height:100dvh!important}
  .app-shell{position:relative!important;width:100vw!important;height:100dvh!important;min-height:0!important;max-width:none!important;margin:0!important;padding:0!important;display:block!important;overflow:hidden!important}
  .top-hud{position:absolute!important;z-index:30!important;left:0!important;right:0!important;top:0!important;width:auto!important;height:76px!important;min-height:76px!important;border-radius:0 0 22px 22px!important;margin:0!important;padding:12px 18px!important}
  .playfield-wrap{position:absolute!important;z-index:1!important;inset:76px 0 0 0!important;width:auto!important;height:auto!important;min-height:0!important;border-radius:0!important;overflow:hidden!important}
  #gameCanvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;display:block!important}

  .left-panel{position:absolute!important;z-index:20!important;left:18px!important;top:50%!important;bottom:auto!important;right:auto!important;width:236px!important;max-width:236px!important;height:auto!important;transform:translateY(-44%)!important;margin:0!important}

  .bottom-panel{
    position:absolute!important;z-index:25!important;
    top:92px!important;right:20px!important;bottom:18px!important;left:auto!important;
    transform:none!important;
    width:326px!important;height:auto!important;min-height:0!important;max-height:none!important;
    margin:0!important;padding:14px 16px!important;border-radius:24px!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;
    gap:12px!important;overflow:hidden!important;
  }
  .bottom-panel .gene-strip,.bottom-panel .bot-gene-strip,.bottom-panel .border-switch,.bottom-panel .actions{width:100%!important;min-width:0!important;flex:0 0 auto!important}
  .bottom-panel .gene-slots{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;min-height:52px!important}
  .bottom-panel .mini-gene,.bottom-panel .empty-slot,.bottom-panel .locked-slot{width:100%!important;min-width:0!important;min-height:52px!important}
  .bottom-panel .actions{margin-top:auto!important;display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .bottom-panel .action{width:100%!important;min-width:0!important}

  /* Always reserve the same space: panel height never jumps when picker opens. */
  .bottom-panel #slotPicker,
  .bottom-panel #slotPicker.hidden{
    position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;width:100%!important;min-width:0!important;max-width:none!important;
    flex:0 0 150px!important;height:150px!important;min-height:150px!important;max-height:150px!important;
    margin:0!important;padding:9px 10px 10px!important;border-radius:15px!important;
    display:block!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;
    overflow:hidden!important;
  }
  .bottom-panel #slotPicker:not(.hidden){visibility:visible!important;opacity:1!important;pointer-events:auto!important}
  .bottom-panel #slotPicker .slot-picker-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important;justify-content:stretch!important;align-content:start!important}
  .bottom-panel #slotPicker .slot-pick-btn{width:100%!important;height:50px!important;aspect-ratio:auto!important;border-radius:12px!important}
  .bottom-panel #slotPicker .slot-pick-btn img{width:30px!important;height:30px!important}
  .bottom-panel #slotPicker .slot-picker-head{margin-bottom:7px!important}
}

@media (max-width:899px){
  .resource-icon{width:34px!important;height:34px!important}
  .biomass-icon{width:35px!important;height:35px!important}
  .collision-mini-icon{width:62px!important;height:42px!important}
  .collision-card-icon{width:96px!important;height:70px!important}
}


/* v0.6.23 mobile resource row + anchored quick picker + larger resource icons */
@media (min-width:900px){
  .left-panel{width:228px!important;max-width:228px!important}
  .resource-card{gap:14px!important;min-height:82px!important;padding:12px 14px!important}
  .resource-icon-wrap{width:60px!important;height:60px!important;border-radius:18px!important}
  .resource-icon{width:50px!important;height:50px!important}
  .biomass-icon{width:51px!important;height:51px!important}
}

@media (max-width:899px){
  html,body{overflow-x:hidden!important}
  .app-shell{position:relative!important;min-height:100dvh!important;padding:8px 8px 10px!important;gap:8px!important;overflow:hidden!important}
  .top-hud{position:relative!important;z-index:30!important;margin:0!important}
  .playfield-wrap{order:1;position:relative!important;min-height:calc(100dvh - 248px)!important;border-radius:24px!important;padding-top:78px!important;overflow:hidden!important}
  #gameCanvas{min-height:calc(100dvh - 248px)!important}
  .left-panel{
    order:2;
    position:absolute!important;
    z-index:26!important;
    top:84px!important;
    left:8px!important;
    right:8px!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
    margin:0!important;
    padding:8px 10px!important;
    border-radius:18px!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    align-items:stretch!important;
  }
  .left-panel .panel-group{min-width:0!important;gap:5px!important}
  .left-panel .panel-group:last-child{display:none!important}
  .left-panel .strip-title{margin-bottom:4px!important;font-size:8px!important;letter-spacing:.12em!important}
  .left-panel .resource-card{
    min-height:62px!important;
    padding:8px 10px!important;
    gap:10px!important;
    border-radius:14px!important;
  }
  .left-panel .resource-icon-wrap{width:56px!important;height:56px!important;border-radius:16px!important;flex:0 0 56px!important}
  .left-panel .resource-icon{width:44px!important;height:44px!important}
  .left-panel .biomass-icon{width:45px!important;height:45px!important}
  .left-panel .resource-copy{gap:0!important}
  .left-panel .resource-label{font-size:9px!important;letter-spacing:.11em!important}
  .left-panel .resource-copy strong{font-size:24px!important}
  .left-panel .resource-copy small{display:none!important}
  .bottom-panel{padding-top:10px!important}
  .slot-picker{
    position:fixed!important;
    left:8px;
    top:auto;
    bottom:auto;
    right:auto;
    transform:none!important;
    z-index:10020!important;
    width:min(292px,calc(100vw - 16px))!important;
    min-width:0!important;
    max-width:calc(100vw - 16px)!important;
    padding:8px 9px 9px!important;
    border-radius:14px!important;
  }
  .slot-picker-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;justify-content:stretch!important}
  .slot-pick-btn{width:100%!important;height:44px!important;aspect-ratio:auto!important}
  .slot-pick-btn img{width:28px!important;height:28px!important}
}


/* v0.6.24 mobile stacked layout: resources top, mutations bottom, dish centered */
@media (max-width:899px){
  html,body{width:100%!important;height:100%!important;overflow:hidden!important}
  body{min-height:100dvh!important}
  .app-shell{
    width:100vw!important;
    max-width:none!important;
    height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:8px 8px calc(10px + env(safe-area-inset-bottom))!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
    gap:8px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  .top-hud{
    grid-column:1!important;
    grid-row:1!important;
    position:relative!important;
    z-index:20!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:10px 12px!important;
    border-radius:18px!important;
  }
  .left-panel{
    grid-column:1!important;
    grid-row:2!important;
    position:relative!important;
    z-index:15!important;
    top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    transform:none!important;
    margin:0!important;
    padding:8px 10px!important;
    border-radius:18px!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    align-items:stretch!important;
  }
  .left-panel .panel-group{min-width:0!important;gap:5px!important}
  .left-panel .panel-group:last-child{display:none!important}
  .left-panel .strip-title{margin-bottom:4px!important;font-size:8px!important;letter-spacing:.12em!important}
  .left-panel .resource-card{min-height:62px!important;padding:8px 10px!important;gap:10px!important;border-radius:14px!important}
  .left-panel .resource-icon-wrap{width:56px!important;height:56px!important;border-radius:16px!important;flex:0 0 56px!important}
  .left-panel .resource-icon{width:44px!important;height:44px!important}
  .left-panel .biomass-icon{width:45px!important;height:45px!important}
  .left-panel .resource-copy strong{font-size:24px!important}
  .left-panel .resource-copy small{display:none!important}

  .playfield-wrap{
    grid-column:1!important;
    grid-row:3!important;
    order:initial!important;
    position:relative!important;
    z-index:1!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding-top:0!important;
    margin:0!important;
    border-radius:24px!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  #gameCanvas{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    display:block!important;
  }

  .bottom-panel{
    grid-column:1!important;
    grid-row:4!important;
    position:relative!important;
    z-index:18!important;
    top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:10px 12px!important;
    border-radius:18px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    overflow:visible!important;
  }
  .bottom-panel .gene-slots{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;min-height:0!important}
  .bottom-panel .mini-gene,.bottom-panel .empty-slot,.bottom-panel .locked-slot{width:100%!important;min-width:0!important;min-height:50px!important}
  .bottom-panel .actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;width:100%!important}
  .bottom-panel .action{min-width:0!important;width:100%!important}

  .slot-picker{
    position:fixed!important;
    z-index:10020!important;
    width:min(292px,calc(100vw - 16px))!important;
    max-width:calc(100vw - 16px)!important;
  }
}


/* v0.6.25 mobile single-line mutation bar; keep maximum dish space */
/* Remove the extra colored halo behind active mutation icons everywhere. */
.mini-gene .orb{
  border-radius:0!important;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}

@media (max-width:899px){
  .app-shell{
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
    gap:6px!important;
    padding:6px 6px calc(7px + env(safe-area-inset-bottom))!important;
  }
  .top-hud{padding:8px 9px!important;border-radius:16px!important}

  /* Resources stay directly below the top HUD, compact and side-by-side. */
  .left-panel{
    padding:6px 7px!important;
    gap:6px!important;
    border-radius:16px!important;
  }
  .left-panel .panel-group{gap:3px!important}
  .left-panel .strip-title{margin:0 0 2px!important;font-size:7px!important}
  .left-panel .resource-card{min-height:54px!important;padding:5px 7px!important;gap:7px!important;border-radius:12px!important}
  .left-panel .resource-icon-wrap{width:48px!important;height:48px!important;flex:0 0 48px!important;border-radius:14px!important}
  .left-panel .resource-icon{width:40px!important;height:40px!important}
  .left-panel .biomass-icon{width:41px!important;height:41px!important}
  .left-panel .resource-label{font-size:8px!important}
  .left-panel .resource-copy strong{font-size:21px!important}

  /* The free middle row belongs to the dish only. */
  .playfield-wrap{
    min-height:0!important;
    border-radius:18px!important;
  }

  /* One compact line: player genes | enemy genes | border | reset | mutation. */
  .bottom-panel{
    grid-row:4!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    flex-wrap:nowrap!important;
    gap:4px!important;
    padding:5px 6px 6px!important;
    border-radius:16px!important;
    overflow:visible!important;
  }
  .bottom-panel .gene-strip,
  .bottom-panel .bot-gene-strip,
  .bottom-panel .border-switch,
  .bottom-panel .actions{
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    flex:0 0 auto!important;
    order:initial!important;
  }
  .bottom-panel .gene-strip{width:77px!important}
  .bottom-panel .bot-gene-strip{width:77px!important}
  .bottom-panel .strip-title{
    height:10px!important;
    margin:0 0 3px!important;
    font-size:6px!important;
    line-height:10px!important;
    letter-spacing:.06em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }
  .bottom-panel .gene-slots{
    display:grid!important;
    grid-template-columns:repeat(2,35px)!important;
    gap:3px!important;
    min-height:35px!important;
  }
  .bottom-panel .mini-gene,
  .bottom-panel .empty-slot,
  .bottom-panel .locked-slot{
    width:35px!important;
    height:35px!important;
    min-width:35px!important;
    min-height:35px!important;
    padding:2px!important;
    border-radius:9px!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
  }
  .bottom-panel .mini-gene .orb{width:29px!important;height:29px!important;margin:0!important}
  .bottom-panel .mini-gene span{display:none!important}
  .bottom-panel .empty-slot{font-size:15px!important}
  .bottom-panel .locked-slot{font-size:11px!important}
  .bottom-panel .locked-slot small{display:none!important}

  .bottom-panel .border-switch{width:62px!important;min-width:62px!important}
  .bottom-panel .border-switch .strip-title{display:block!important}
  .bottom-panel .border-buttons{display:grid!important;grid-template-columns:repeat(2,29px)!important;gap:3px!important;width:62px!important}
  .bottom-panel .border-mode{width:29px!important;height:35px!important;min-width:29px!important;border-radius:9px!important;font-size:11px!important;padding:0!important}

  .bottom-panel .actions{
    display:grid!important;
    grid-template-columns:repeat(2,38px)!important;
    gap:3px!important;
    align-items:end!important;
  }
  .bottom-panel .action{
    width:38px!important;
    height:48px!important;
    min-width:38px!important;
    min-height:48px!important;
    padding:0!important;
    border-radius:10px!important;
    display:grid!important;
    place-items:center!important;
  }
  .bottom-panel .action-icon{font-size:19px!important;line-height:1!important}
  .bottom-panel .action span:last-child{display:none!important}

  /* Quick picker remains an overlay close to the tapped gene slot, not a layout row. */
  .bottom-panel #slotPicker,
  .bottom-panel #slotPicker.hidden{
    position:fixed!important;
    width:min(286px,calc(100vw - 12px))!important;
    min-width:0!important;
    max-width:calc(100vw - 12px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:7px 8px 8px!important;
    margin:0!important;
    flex:none!important;
    overflow:visible!important;
  }
  .bottom-panel #slotPicker.hidden{display:none!important}
  .bottom-panel #slotPicker:not(.hidden){display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
  .bottom-panel #slotPicker .slot-picker-head{margin:0 0 5px!important;font-size:7px!important}
  .bottom-panel #slotPicker .slot-picker-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}
  .bottom-panel #slotPicker .slot-pick-btn{width:100%!important;height:42px!important;border-radius:10px!important}
  .bottom-panel #slotPicker .slot-pick-btn img{width:27px!important;height:27px!important}
}

@media (max-width:380px){
  .bottom-panel{gap:2px!important;padding-left:4px!important;padding-right:4px!important}
  .bottom-panel .gene-strip,.bottom-panel .bot-gene-strip{width:70px!important}
  .bottom-panel .gene-slots{grid-template-columns:repeat(2,33px)!important;gap:2px!important}
  .bottom-panel .mini-gene,.bottom-panel .empty-slot,.bottom-panel .locked-slot{width:33px!important;height:33px!important;min-width:33px!important;min-height:33px!important}
  .bottom-panel .mini-gene .orb{width:27px!important;height:27px!important}
  .bottom-panel .border-switch{width:56px!important;min-width:56px!important}
  .bottom-panel .border-buttons{grid-template-columns:repeat(2,27px)!important;gap:2px!important;width:56px!important}
  .bottom-panel .border-mode{width:27px!important;height:33px!important;min-width:27px!important}
  .bottom-panel .actions{grid-template-columns:repeat(2,35px)!important;gap:2px!important}
  .bottom-panel .action{width:35px!important;height:46px!important;min-width:35px!important;min-height:46px!important}
}


/* v0.6.26 final mobile dock alignment */
@media (max-width:899px){
  .bottom-panel{min-height:58px!important}
  .bottom-panel .gene-strip,.bottom-panel .bot-gene-strip,.bottom-panel .border-switch,.bottom-panel .actions{align-self:flex-end!important}
  .bottom-panel .gene-strip,.bottom-panel .bot-gene-strip{flex-basis:77px!important}
  .bottom-panel .border-switch{flex-basis:62px!important}
  .bottom-panel .actions{flex-basis:79px!important}
  .bottom-panel .mini-gene,.bottom-panel .empty-slot,.bottom-panel .locked-slot,.bottom-panel .border-mode{box-shadow:none!important}
  .bottom-panel .mini-gene .orb{border:0!important;outline:0!important;box-shadow:none!important;filter:none!important}
}


/* v0.6.27 mobile layout hard-fix: top resources, center dish, bottom mutation dock */
@media (max-width:899px){
  html,body{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
  }
  body{min-height:100dvh!important}

  .app-shell{
    position:relative!important;
    width:100vw!important;
    max-width:none!important;
    height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:6px 6px calc(7px + env(safe-area-inset-bottom))!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
    gap:6px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .top-hud{
    grid-column:1!important;
    grid-row:1!important;
    position:relative!important;
    inset:auto!important;
    z-index:30!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:8px 9px!important;
    border-radius:16px!important;
  }

  .left-panel{
    grid-column:1!important;
    grid-row:2!important;
    position:relative!important;
    inset:auto!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    z-index:22!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    transform:none!important;
    margin:0!important;
    padding:6px 7px!important;
    border-radius:16px!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    align-items:stretch!important;
  }
  .left-panel .panel-group{min-width:0!important;gap:3px!important}
  .left-panel .panel-group:last-child{display:none!important}
  .left-panel .strip-title{height:auto!important;margin:0 0 2px!important;font-size:7px!important;line-height:1!important}
  .left-panel .resource-card{min-height:54px!important;height:54px!important;padding:5px 7px!important;gap:7px!important;border-radius:12px!important}
  .left-panel .resource-icon-wrap{width:48px!important;height:48px!important;min-width:48px!important;flex:0 0 48px!important;border-radius:14px!important}
  .left-panel .resource-icon{width:40px!important;height:40px!important}
  .left-panel .biomass-icon{width:41px!important;height:41px!important}
  .left-panel .resource-copy{gap:0!important;min-width:0!important}
  .left-panel .resource-label{font-size:8px!important;line-height:1!important}
  .left-panel .resource-copy strong{font-size:21px!important;line-height:1!important}
  .left-panel .resource-copy small{display:none!important}

  .playfield-wrap{
    grid-column:1!important;
    grid-row:3!important;
    position:relative!important;
    inset:auto!important;
    z-index:1!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border-radius:18px!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  #gameCanvas{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    display:block!important;
  }

  .bottom-panel{
    grid-column:1!important;
    grid-row:4!important;
    position:relative!important;
    inset:auto!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    z-index:24!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    margin:0!important;
    padding:5px 6px 6px!important;
    border-radius:16px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    flex-wrap:nowrap!important;
    gap:4px!important;
    overflow:visible!important;
  }

  .bottom-panel .gene-strip,
  .bottom-panel .bot-gene-strip,
  .bottom-panel .border-switch,
  .bottom-panel .actions{
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    flex:0 0 auto!important;
    align-self:flex-end!important;
    order:initial!important;
  }
  .bottom-panel .gene-strip,
  .bottom-panel .bot-gene-strip{width:77px!important;flex-basis:77px!important}
  .bottom-panel .strip-title{
    display:block!important;
    height:10px!important;
    margin:0 0 3px!important;
    font-size:6px!important;
    line-height:10px!important;
    letter-spacing:.055em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }
  .bottom-panel .gene-slots{
    display:grid!important;
    grid-template-columns:repeat(2,35px)!important;
    gap:3px!important;
    min-height:35px!important;
  }
  .bottom-panel .mini-gene,
  .bottom-panel .empty-slot,
  .bottom-panel .locked-slot{
    width:35px!important;
    height:35px!important;
    min-width:35px!important;
    min-height:35px!important;
    padding:2px!important;
    border-radius:9px!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
    box-shadow:none!important;
  }
  .bottom-panel .mini-gene .orb{
    width:29px!important;
    height:29px!important;
    margin:0!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    filter:none!important;
  }
  .bottom-panel .mini-gene span{display:none!important}
  .bottom-panel .locked-slot small{display:none!important}

  .bottom-panel .border-switch{width:62px!important;min-width:62px!important;flex-basis:62px!important}
  .bottom-panel .border-buttons{display:grid!important;grid-template-columns:repeat(2,29px)!important;gap:3px!important;width:62px!important}
  .bottom-panel .border-mode{width:29px!important;height:35px!important;min-width:29px!important;padding:0!important;border-radius:9px!important;box-shadow:none!important}

  .bottom-panel .actions{display:grid!important;grid-template-columns:repeat(2,38px)!important;gap:3px!important;flex-basis:79px!important}
  .bottom-panel .action{width:38px!important;height:48px!important;min-width:38px!important;min-height:48px!important;padding:0!important;border-radius:10px!important;display:grid!important;place-items:center!important}
  .bottom-panel .action-icon{font-size:19px!important;line-height:1!important}
  .bottom-panel .action span:last-child{display:none!important}

  .bottom-panel #slotPicker,
  .bottom-panel #slotPicker.hidden{
    position:fixed!important;
    width:min(286px,calc(100vw - 12px))!important;
    min-width:0!important;
    max-width:calc(100vw - 12px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:7px 8px 8px!important;
    margin:0!important;
    flex:none!important;
    overflow:visible!important;
    z-index:10020!important;
  }
  .bottom-panel #slotPicker.hidden{display:none!important}
  .bottom-panel #slotPicker:not(.hidden){display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
  .bottom-panel #slotPicker .slot-picker-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}
  .bottom-panel #slotPicker .slot-pick-btn{width:100%!important;height:42px!important;border-radius:10px!important}
  .bottom-panel #slotPicker .slot-pick-btn img{width:27px!important;height:27px!important}
}

@media (max-width:380px){
  .bottom-panel{gap:2px!important;padding-left:4px!important;padding-right:4px!important}
  .bottom-panel .gene-strip,.bottom-panel .bot-gene-strip{width:70px!important;flex-basis:70px!important}
  .bottom-panel .gene-slots{grid-template-columns:repeat(2,33px)!important;gap:2px!important}
  .bottom-panel .mini-gene,.bottom-panel .empty-slot,.bottom-panel .locked-slot{width:33px!important;height:33px!important;min-width:33px!important;min-height:33px!important}
  .bottom-panel .mini-gene .orb{width:27px!important;height:27px!important}
  .bottom-panel .border-switch{width:56px!important;min-width:56px!important;flex-basis:56px!important}
  .bottom-panel .border-buttons{grid-template-columns:repeat(2,27px)!important;gap:2px!important;width:56px!important}
  .bottom-panel .border-mode{width:27px!important;height:33px!important;min-width:27px!important}
  .bottom-panel .actions{grid-template-columns:repeat(2,35px)!important;gap:2px!important;flex-basis:72px!important}
  .bottom-panel .action{width:35px!important;height:46px!important;min-width:35px!important;min-height:46px!important}
}


/* v0.6.28 balance UI: mobile picker above dock + mutation modal always topmost */
.modal-backdrop{
  z-index:30000!important;
  position:fixed!important;
  inset:0!important;
}
.mutation-modal{z-index:30001!important}
.ui-tooltip{z-index:30010!important}

@media (max-width:899px){
  .bottom-panel #slotPicker,
  .bottom-panel #slotPicker.hidden{
    position:fixed!important;
    z-index:20000!important;
    width:min(270px,calc(100vw - 12px))!important;
    min-width:0!important;
    max-width:calc(100vw - 12px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:6px 7px 7px!important;
    margin:0!important;
    border-radius:13px!important;
    overflow:hidden!important;
  }
  .bottom-panel #slotPicker .slot-picker-head{display:none!important}
  .bottom-panel #slotPicker .slot-picker-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
  }
  .bottom-panel #slotPicker .slot-pick-btn{
    width:100%!important;
    height:39px!important;
    min-width:0!important;
    border-radius:10px!important;
  }
  .bottom-panel #slotPicker .slot-pick-btn img{width:25px!important;height:25px!important}
  .modal-backdrop{padding:10px!important}
  .mutation-modal{
    width:min(96vw,760px)!important;
    max-height:calc(100dvh - 20px)!important;
    overflow:auto!important;
  }
}


/* v0.6.29 developer settings: blur, border and mutation strengths */
.dev-settings-btn{font-size:16px}
.dev-settings-backdrop{z-index:32000!important;padding:14px!important}
.dev-settings-modal{position:relative;width:min(920px,96vw);max-height:calc(100dvh - 28px);overflow:auto;border-radius:26px;padding:24px;border:1px solid rgba(108,212,240,.34);box-shadow:0 35px 120px rgba(0,0,0,.62),0 0 70px rgba(42,183,224,.08)}
.dev-settings-modal h2{font-size:clamp(24px,5vw,40px);margin:6px 0 4px;letter-spacing:-.035em}
.dev-intro{margin:0 0 18px;color:#8eb4c2;font-size:12px;line-height:1.45}
.dev-section{border:1px solid rgba(118,218,244,.14);background:rgba(3,17,26,.38);border-radius:18px;padding:13px 14px;margin-top:12px}
.dev-section-title{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#74dff5;font-weight:900;margin-bottom:10px}
.dev-slider-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center}
.dev-slider-row span,.dev-border-row>span{display:flex;flex-direction:column;gap:3px}
.dev-slider-row b,.dev-border-row b{font-size:12px;color:#e9fbff}.dev-slider-row small,.dev-border-row small{font-size:9px;color:#7fa7b4}
.dev-slider-row output{font-size:13px;font-weight:900;color:#7fffa0;min-width:44px;text-align:right}
.dev-slider-row input{grid-column:1/-1;width:100%;accent-color:#69f590}
.dev-border-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;margin-top:14px}
.dev-border-row #borderModeLabel{min-width:18px;text-align:center;color:#dffaff}
.dev-border-buttons{display:flex;gap:6px}.dev-border-buttons .border-mode{width:38px;height:34px}
.dev-strength-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dev-gene-row{--gene-color:#6dff98;display:grid;grid-template-columns:42px minmax(0,1fr) 44px;grid-template-rows:auto auto;gap:4px 10px;align-items:center;border:1px solid rgba(118,218,244,.11);background:rgba(2,12,18,.38);border-radius:14px;padding:8px 10px}
.dev-gene-row>img{grid-row:1/3;width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--gene-color) 45%,transparent))}
.dev-gene-copy{display:flex;flex-direction:column;min-width:0}.dev-gene-copy b{font-size:11px;color:#eafaff}.dev-gene-copy small{font-size:8px;line-height:1.25;color:#789eaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-gene-row output{font-size:11px;font-weight:900;color:var(--gene-color);text-align:right}.dev-gene-row input{grid-column:2/4;width:100%;accent-color:var(--gene-color)}

/* Main mutation modal is choice-only now. */
.mutation-modal .mutation-tabs,.mutation-modal .auto-bot-toggle,.mutation-modal .gene-control{display:none!important}
.mutation-modal .gene-card{min-height:160px!important}.mutation-modal .gene-desc{min-height:38px!important}

/* Border controls live only in developer settings. */
.bottom-panel>.border-switch{display:none!important}

@media (max-width:899px){
  .dev-settings-btn{width:31px!important;height:31px!important;border-radius:9px!important;font-size:14px!important;padding:0!important}
  .dev-settings-modal{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:18px 12px 12px;border-radius:20px}
  .dev-settings-modal h2{font-size:25px;padding-right:34px}.dev-intro{font-size:10px;margin-bottom:12px}
  .dev-section{padding:10px;margin-top:8px;border-radius:14px}.dev-section-title{margin-bottom:8px;font-size:8px}
  .dev-strength-grid{grid-template-columns:1fr;gap:6px}
  .dev-gene-row{grid-template-columns:36px minmax(0,1fr) 40px;padding:6px 8px;border-radius:12px}.dev-gene-row>img{width:31px;height:31px}.dev-gene-copy b{font-size:10px}.dev-gene-copy small{font-size:7px}
  .dev-slider-row b,.dev-border-row b{font-size:11px}.dev-slider-row small,.dev-border-row small{font-size:8px}
  .dev-border-buttons .border-mode{width:36px;height:32px}
  /* Reclaim dock width after moving border controls out. */
  .bottom-panel{justify-content:center!important;gap:7px!important}
  .bottom-panel .gene-strip,.bottom-panel .bot-gene-strip{width:82px!important;flex-basis:82px!important}
  .bottom-panel .actions{flex-basis:84px!important;grid-template-columns:repeat(2,40px)!important;gap:4px!important}
  .bottom-panel .action{width:40px!important;min-width:40px!important}
}


/* v0.6.30 — integrated main menu using project assets */
.game-shell-hidden{display:none!important}
.main-menu{position:fixed;inset:0;z-index:4000;overflow:hidden;background:
  radial-gradient(circle at 50% 45%,rgba(17,77,83,.24),transparent 43%),
  radial-gradient(circle at 18% 60%,rgba(29,115,94,.13),transparent 28%),
  radial-gradient(circle at 82% 58%,rgba(126,29,44,.12),transparent 30%),
  linear-gradient(180deg,#041923 0%,#020a10 70%,#01070b 100%);color:var(--text);transition:opacity .28s ease,transform .28s ease}
.main-menu.menu-exit{opacity:0;transform:scale(1.015);pointer-events:none}
.menu-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 35%,rgba(0,0,0,.24) 72%,rgba(0,0,0,.52) 100%)}
.menu-flyers{position:absolute;inset:-8%;overflow:hidden;pointer-events:none;opacity:.9}
.menu-flyer{position:absolute;width:var(--s);height:var(--s);object-fit:contain;opacity:var(--a);filter:blur(var(--b)) drop-shadow(0 0 10px rgba(87,236,255,.08));animation:menuFly var(--d) ease-in-out infinite alternate;animation-delay:var(--delay)}
@keyframes menuFly{0%{transform:translate3d(-14px,9px,0) rotate(-4deg)}50%{transform:translate3d(8px,-12px,0) rotate(4deg)}100%{transform:translate3d(16px,11px,0) rotate(-2deg)}}
.menu-brand{position:absolute;z-index:4;left:50%;top:2.5vh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.menu-title-asset{width:min(430px,39vw);height:auto;display:block;filter:drop-shadow(0 0 20px rgba(100,244,255,.13))}
.menu-subtitle{margin-top:-3px;font-size:clamp(11px,1.25vw,18px);letter-spacing:.42em;text-transform:uppercase;color:#bfeff5;text-shadow:0 0 14px rgba(105,232,255,.18)}
.menu-dish-wrap{position:absolute;z-index:3;left:50%;top:51%;transform:translate(-50%,-50%);width:min(65vh,620px);aspect-ratio:1/1;display:grid;place-items:center;pointer-events:none}
.menu-dish-halo{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(75,236,255,.08) 50%,rgba(67,218,255,.14) 67%,transparent 75%);filter:blur(22px);opacity:.75}
.menu-dish{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 55px rgba(0,0,0,.52)) drop-shadow(0 0 24px rgba(82,224,255,.12));animation:menuDishBreath 7s ease-in-out infinite}
@keyframes menuDishBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
.menu-resource{position:absolute;z-index:5;top:4.2vh;display:flex;align-items:center;gap:12px;min-height:62px;padding:0;background:none;border:0;filter:drop-shadow(0 0 16px rgba(82,226,255,.12))}
.menu-resource img{width:58px;height:58px;object-fit:contain;display:block}
.menu-resource div{display:flex;flex-direction:column;gap:1px}
.menu-resource span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#b3dce5}
.menu-resource strong{font-size:27px;line-height:1;color:#f0fdff}
.menu-dna{left:4vw}.menu-biomass{right:4vw}.menu-biomass img{width:61px;height:61px}
.menu-actions{position:absolute;z-index:6;left:50%;bottom:4.5vh;transform:translateX(-50%);width:min(1120px,88vw);display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:12px}
.menu-action{height:72px;border-radius:20px;border:1px solid rgba(118,219,243,.27);background:linear-gradient(180deg,rgba(10,39,51,.85),rgba(4,18,27,.9));box-shadow:inset 0 1px rgba(255,255,255,.06),0 16px 44px rgba(0,0,0,.25);color:#eafcff;display:flex;align-items:center;justify-content:center;gap:13px;font:inherit;font-size:17px;font-weight:800;cursor:pointer;transition:.16s ease;backdrop-filter:blur(15px)}
.menu-action:hover{transform:translateY(-2px);border-color:rgba(118,236,255,.54);box-shadow:inset 0 1px rgba(255,255,255,.08),0 20px 48px rgba(0,0,0,.3),0 0 24px rgba(76,221,255,.07)}
.menu-action.primary-menu{border-color:rgba(77,255,130,.68);background:linear-gradient(180deg,rgba(22,125,64,.83),rgba(6,59,39,.92));box-shadow:inset 0 1px rgba(255,255,255,.09),0 0 28px rgba(70,255,126,.15),0 20px 48px rgba(0,0,0,.28)}
.menu-action.primary-menu:hover{box-shadow:inset 0 1px rgba(255,255,255,.1),0 0 38px rgba(70,255,126,.24),0 20px 48px rgba(0,0,0,.3)}
.menu-action-icon{width:32px;height:32px;display:grid;place-items:center;font-size:24px;color:#9ceffd;text-shadow:0 0 12px rgba(85,233,255,.32)}
.primary-menu .menu-action-icon{color:#83ff9e;text-shadow:0 0 14px rgba(81,255,132,.36)}
.menu-settings-backdrop{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:18px;background:rgba(0,6,10,.76);backdrop-filter:blur(14px)}
.menu-settings-card{position:relative;width:min(460px,94vw);border-radius:24px;padding:26px}
.menu-settings-card h2{margin:4px 0 20px;font-size:32px}
.menu-setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;border-top:1px solid rgba(117,218,244,.13)}
.menu-setting-row b{display:block;font-size:14px}.menu-setting-row small{display:block;margin-top:3px;color:#86aab6;font-size:10px}
.menu-switch{position:relative;width:48px;height:26px;flex:0 0 auto}.menu-switch input{position:absolute;opacity:0}.menu-switch span{position:absolute;inset:0;border-radius:999px;background:#15303a;border:1px solid rgba(126,220,244,.2);cursor:pointer;transition:.18s}.menu-switch span:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#86aab4;transition:.18s}.menu-switch input:checked+span{background:#0e6b3d;border-color:rgba(78,255,129,.55)}.menu-switch input:checked+span:before{left:25px;background:#87ffa4;box-shadow:0 0 12px rgba(94,255,141,.35)}
.menu-language-select{min-width:136px;border:1px solid rgba(122,219,244,.24);border-radius:12px;background:#071c26;color:#e8fbff;padding:9px 12px;font:inherit;font-size:12px}
.menu-volume-control{display:flex;align-items:center;gap:10px;min-width:190px}
.menu-volume-control input[type="range"]{width:142px;accent-color:#67f39b;cursor:pointer}
.menu-volume-control strong{width:42px;text-align:right;color:#dfffe8;font-size:12px;font-variant-numeric:tabular-nums}
.menu-volume-control.disabled{opacity:.42}
.menu-volume-control.disabled input{cursor:default}
@media(max-width:560px){.menu-volume-control{min-width:150px}.menu-volume-control input[type="range"]{width:105px}}
.menu-cloud-player{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9ceffd;font-size:10px;font-weight:700;letter-spacing:.03em}
.menu-cloud-btn{flex:0 0 auto;border:1px solid rgba(106,229,255,.36);border-radius:11px;background:linear-gradient(180deg,rgba(10,55,68,.92),rgba(4,28,37,.96));color:#e9fcff;padding:9px 12px;font:inherit;font-size:11px;font-weight:800;letter-spacing:.02em}
.menu-cloud-btn:disabled{opacity:.46}
.menu-cloud-redeem{display:flex;align-items:center;gap:8px;min-width:246px}
.menu-cloud-input{min-width:120px;width:132px;border:1px solid rgba(122,219,244,.24);border-radius:11px;background:#071c26;color:#e8fbff;padding:9px 10px;font:inherit;font-size:11px;text-transform:uppercase;letter-spacing:.08em;outline:none}
.menu-cloud-input:focus{border-color:rgba(105,239,255,.58);box-shadow:0 0 0 2px rgba(83,219,255,.08)}
#cloudStatus[data-state="online"]{color:#7fffa1}
#cloudStatus[data-state="offline"]{color:#ff9e9e}
#cloudLinkCode.is-code{color:#8dffad;font-size:12px;font-weight:900;letter-spacing:.09em}
@media(max-width:560px){.menu-settings-card{max-height:92dvh;overflow:auto}.menu-cloud-status-row,.menu-cloud-link-row,.menu-cloud-redeem-row{align-items:flex-start}.menu-cloud-redeem{min-width:0;flex:1;justify-content:flex-end}.menu-cloud-input{min-width:0;width:122px}.menu-cloud-player{max-width:116px}}

@media(max-width:900px){
  .menu-brand{top:2vh}.menu-title-asset{width:min(420px,74vw)}.menu-subtitle{font-size:10px;letter-spacing:.32em}
  .menu-resource{top:10vh;gap:7px}.menu-resource img{width:42px;height:42px}.menu-biomass img{width:44px;height:44px}.menu-resource span{font-size:9px}.menu-resource strong{font-size:21px}.menu-dna{left:4vw}.menu-biomass{right:4vw}
  .menu-dish-wrap{top:48%;width:min(58vh,74vw)}
  .menu-actions{bottom:3vh;width:min(640px,94vw);grid-template-columns:repeat(2,1fr);gap:8px}.menu-action{height:54px;border-radius:15px;font-size:13px;gap:9px}.menu-action-icon{width:24px;height:24px;font-size:18px}
}
@media(max-width:560px){
  .menu-brand{top:1.5vh}.menu-title-asset{width:68vw}.menu-subtitle{font-size:8px;margin-top:-1px}
  .menu-resource{top:8.7vh}.menu-resource img{width:38px;height:38px}.menu-biomass img{width:40px;height:40px}.menu-resource strong{font-size:18px}
  .menu-dish-wrap{top:46.5%;width:min(51vh,92vw)}
  .menu-actions{bottom:2.2vh;width:94vw}.menu-action{height:50px;font-size:12px;border-radius:14px}
}


/* v0.6.31 main menu polish: original generated dish + richer buttons/resources/background */
.main-menu{background:
  radial-gradient(circle at 50% 42%,rgba(15,74,80,.30),transparent 38%),
  radial-gradient(circle at 15% 54%,rgba(28,123,94,.14),transparent 30%),
  radial-gradient(circle at 84% 52%,rgba(139,29,49,.13),transparent 32%),
  linear-gradient(180deg,#031923 0%,#020b11 70%,#01070b 100%)!important}
.menu-flyers{inset:-10%!important;opacity:1!important}
.menu-flyer{filter:blur(var(--b)) drop-shadow(0 0 14px rgba(87,236,255,.10))!important;transform:rotate(var(--rot));mix-blend-mode:screen}
@keyframes menuFly{0%{transform:translate3d(-18px,12px,0) rotate(calc(var(--rot) - 3deg)) scale(.96)}50%{transform:translate3d(10px,-15px,0) rotate(calc(var(--rot) + 4deg)) scale(1.03)}100%{transform:translate3d(20px,13px,0) rotate(calc(var(--rot) - 1deg)) scale(.99)}}
.menu-brand{top:2.1vh!important}
.menu-title-asset{width:min(470px,41vw)!important;filter:drop-shadow(0 0 26px rgba(100,244,255,.18))!important}
.menu-subtitle{margin-top:2px!important;font-size:clamp(11px,1.18vw,17px)!important;letter-spacing:.40em!important}
.menu-dish-wrap{top:50.5%!important;width:min(68vh,660px)!important}
.menu-dish-halo{inset:3%!important;filter:blur(28px)!important;opacity:.68!important}
.menu-dish{filter:drop-shadow(0 32px 64px rgba(0,0,0,.56)) drop-shadow(0 0 30px rgba(82,224,255,.16))!important;animation:menuDishBreath 8s ease-in-out infinite!important}

.menu-resource{top:3.2vh!important;gap:16px!important;min-height:82px!important;filter:drop-shadow(0 0 22px rgba(82,226,255,.15))!important}
.menu-resource img{width:82px!important;height:82px!important}
.menu-biomass img{width:86px!important;height:86px!important}
.menu-resource span{font-size:12px!important;letter-spacing:.18em!important;font-weight:800!important;color:#c7eef4!important}
.menu-resource strong{font-size:34px!important;text-shadow:0 0 16px rgba(139,239,255,.15)!important}
.menu-dna{left:3.1vw!important}.menu-biomass{right:3.1vw!important}

.menu-actions{bottom:3.2vh!important;width:min(1180px,90vw)!important;gap:14px!important}
.menu-action{position:relative!important;height:82px!important;border-radius:0!important;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px)!important;border:1px solid rgba(121,224,246,.38)!important;background:linear-gradient(180deg,rgba(7,34,46,.90),rgba(3,15,23,.95))!important;box-shadow:inset 0 1px rgba(255,255,255,.07),0 18px 54px rgba(0,0,0,.32)!important;font-size:18px!important;letter-spacing:.03em!important;gap:16px!important;overflow:hidden!important}
.menu-action:before{content:"";position:absolute;left:12px;right:12px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(136,244,255,.72),transparent);opacity:.52}
.menu-action:hover{transform:translateY(-2px)!important;border-color:rgba(135,240,255,.66)!important;box-shadow:inset 0 1px rgba(255,255,255,.10),0 22px 58px rgba(0,0,0,.35),0 0 28px rgba(73,222,255,.10)!important}
.menu-action.primary-menu{border-color:rgba(82,255,137,.74)!important;background:linear-gradient(180deg,rgba(16,110,56,.92),rgba(4,54,35,.96))!important;box-shadow:inset 0 1px rgba(255,255,255,.10),0 0 34px rgba(65,255,123,.17),0 20px 52px rgba(0,0,0,.30)!important}
.menu-action.primary-menu:before{background:linear-gradient(90deg,transparent,rgba(126,255,164,.82),transparent)}
.menu-action-icon{width:44px!important;height:44px!important;display:grid!important;place-items:center!important;flex:0 0 44px!important}
.menu-action-icon img{width:40px!important;height:40px!important;display:block!important;object-fit:contain!important;filter:drop-shadow(0 0 12px rgba(101,239,255,.20))}
.primary-menu .menu-action-icon img{filter:drop-shadow(0 0 14px rgba(90,255,132,.28))}
.menu-action:disabled{opacity:.72;cursor:default}

@media(max-width:900px){
  .menu-brand{top:1.7vh!important}.menu-title-asset{width:min(440px,76vw)!important}.menu-subtitle{font-size:9px!important}
  .menu-resource{top:8.6vh!important;gap:8px!important}.menu-resource img{width:58px!important;height:58px!important}.menu-biomass img{width:61px!important;height:61px!important}.menu-resource span{font-size:9px!important}.menu-resource strong{font-size:24px!important}
  .menu-dish-wrap{top:47.5%!important;width:min(58vh,78vw)!important}
  .menu-actions{bottom:2.4vh!important;width:min(680px,95vw)!important;grid-template-columns:repeat(2,1fr)!important;gap:8px!important}.menu-action{height:60px!important;font-size:13px!important;gap:9px!important;clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px)!important}.menu-action-icon{width:30px!important;height:30px!important;flex-basis:30px!important}.menu-action-icon img{width:28px!important;height:28px!important}
}
@media(max-width:560px){
  .menu-resource{top:8.2vh!important}.menu-resource img{width:52px!important;height:52px!important}.menu-biomass img{width:55px!important;height:55px!important}.menu-resource strong{font-size:21px!important}
  .menu-dish-wrap{top:45.8%!important;width:min(50vh,94vw)!important}
  .menu-actions{bottom:1.8vh!important}.menu-action{height:55px!important;font-size:12px!important}
}

/* v0.6.32 final menu cleanup */
#mainMenu.main-menu{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
#mainMenu .menu-flyers,
#mainMenu .menu-vignette,
#mainMenu .menu-brand,
#mainMenu .menu-dish-wrap,
#mainMenu .menu-dish-halo{
  pointer-events:none!important;
}
#mainMenu .menu-resource,
#mainMenu .menu-actions,
#mainMenu .menu-actions *{
  pointer-events:auto!important;
}
#mainMenu .menu-vignette{z-index:1!important}
#mainMenu .menu-flyers{z-index:2!important}
#mainMenu .menu-dish-wrap{z-index:3!important}
#mainMenu .menu-brand{z-index:4!important}
#mainMenu .menu-resource{z-index:5!important}
#mainMenu .menu-actions{z-index:6!important}

#mainMenu .menu-brand{
  top:2.2vh!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  gap:8px!important;
}
#mainMenu .menu-title-asset{
  width:min(420px,38vw)!important;
  max-width:82vw!important;
}
#mainMenu .menu-subtitle{
  margin-top:0!important;
  font-size:clamp(11px,1vw,16px)!important;
  letter-spacing:.42em!important;
  text-align:center!important;
}
#mainMenu .menu-dish-wrap{
  top:50.8%!important;
  left:50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(56vh,560px)!important;
  aspect-ratio:1/1!important;
}
#mainMenu .menu-dish{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  image-rendering:auto!important;
  filter:drop-shadow(0 18px 42px rgba(0,0,0,.42)) drop-shadow(0 0 24px rgba(82,224,255,.15))!important;
}
#mainMenu .menu-resource{
  top:5.4vh!important;
  gap:14px!important;
  min-height:74px!important;
  align-items:center!important;
}
#mainMenu .menu-resource img{
  width:76px!important;
  height:76px!important;
}
#mainMenu .menu-resource > div{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:2px!important;
}
#mainMenu .menu-resource span{
  font-size:12px!important;
  letter-spacing:.16em!important;
  font-weight:800!important;
  color:#c5edf6!important;
}
#mainMenu .menu-resource strong{
  font-size:38px!important;
  line-height:1!important;
}
#mainMenu .menu-dna{left:4vw!important}
#mainMenu .menu-biomass{right:4vw!important}

#mainMenu .menu-actions{
  left:50%!important;
  bottom:3.4vh!important;
  transform:translateX(-50%)!important;
  width:min(1080px,88vw)!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
}
#mainMenu .menu-action{
  height:72px!important;
  border-radius:22px!important;
  clip-path:none!important;
  border:1px solid rgba(118,219,243,.30)!important;
  background:linear-gradient(180deg,rgba(10,39,51,.88),rgba(4,18,27,.92))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 16px 44px rgba(0,0,0,.28)!important;
  color:#eafcff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  font-size:17px!important;
  font-weight:800!important;
  cursor:pointer!important;
  overflow:hidden!important;
}
#mainMenu .menu-action::before{display:none!important;content:none!important}
#mainMenu .menu-action:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(118,236,255,.54)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 20px 48px rgba(0,0,0,.32),0 0 24px rgba(76,221,255,.08)!important;
}
#mainMenu .menu-action.primary-menu{
  border-color:rgba(77,255,130,.68)!important;
  background:linear-gradient(180deg,rgba(22,125,64,.88),rgba(6,59,39,.94))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 0 28px rgba(70,255,126,.14),0 20px 48px rgba(0,0,0,.30)!important;
}
#mainMenu .menu-action.primary-menu:hover{
  box-shadow:inset 0 1px rgba(255,255,255,.10),0 0 38px rgba(70,255,126,.20),0 20px 48px rgba(0,0,0,.32)!important;
}
#mainMenu .menu-action-icon{
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
  display:grid!important;
  place-items:center!important;
}
#mainMenu .menu-action-icon img{
  width:30px!important;
  height:30px!important;
  object-fit:contain!important;
  display:block!important;
}
#mainMenu .menu-action:disabled{opacity:.72!important;cursor:default!important}

@media (max-width:899px){
  #mainMenu .menu-brand{top:2vh!important;gap:5px!important}
  #mainMenu .menu-title-asset{width:min(320px,64vw)!important}
  #mainMenu .menu-subtitle{font-size:9px!important;letter-spacing:.32em!important}
  #mainMenu .menu-resource{
    top:10vh!important;
    gap:10px!important;
    min-height:56px!important;
  }
  #mainMenu .menu-resource img{width:58px!important;height:58px!important}
  #mainMenu .menu-resource span{font-size:10px!important}
  #mainMenu .menu-resource strong{font-size:30px!important}
  #mainMenu .menu-dish-wrap{
    top:47.2%!important;
    width:min(44vh,86vw)!important;
  }
  #mainMenu .menu-actions{
    bottom:2.6vh!important;
    width:min(700px,95vw)!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  #mainMenu .menu-action{
    height:58px!important;
    border-radius:18px!important;
    font-size:13px!important;
    gap:8px!important;
  }
  #mainMenu .menu-action-icon{width:28px!important;height:28px!important;flex-basis:28px!important}
  #mainMenu .menu-action-icon img{width:24px!important;height:24px!important}
}


/* v0.6.33 menu polish — symmetric resources + lighter mobile ambient */
#mainMenu .menu-flyers{
  inset:-4% !important;
  overflow:hidden !important;
}
#mainMenu .menu-flyer{
  animation:none !important;
  will-change:transform, opacity;
  filter:blur(var(--b)) drop-shadow(0 0 10px rgba(87,236,255,.08)) !important;
}
#mainMenu .menu-resource{
  top:5.6vh !important;
  gap:12px !important;
}
#mainMenu .menu-dna{left:4vw !important; right:auto !important;}
#mainMenu .menu-biomass{right:4vw !important; left:auto !important;}
#mainMenu .menu-biomass > div{
  align-items:flex-end !important;
  text-align:right !important;
}
#mainMenu .menu-biomass img{
  width:76px !important;
  height:76px !important;
}
#mainMenu .menu-subtitle{
  margin-top:6px !important;
}
#mainMenu .menu-dish-wrap{
  top:52.2% !important;
}

@media (max-width:899px){
  #mainMenu .menu-resource{
    top:11.8vh !important;
    gap:9px !important;
    min-height:54px !important;
  }
  #mainMenu .menu-resource img,
  #mainMenu .menu-biomass img{
    width:54px !important;
    height:54px !important;
  }
  #mainMenu .menu-resource span{font-size:9px !important;}
  #mainMenu .menu-resource strong{font-size:27px !important;}
  #mainMenu .menu-dish-wrap{
    top:49.2% !important;
    width:min(45vh,86vw) !important;
  }
  #mainMenu .menu-flyers{inset:-2% !important;}
}

@media (max-width:560px){
  #mainMenu .menu-brand{top:1.8vh !important;}
  #mainMenu .menu-title-asset{width:min(300px,68vw) !important;}
  #mainMenu .menu-subtitle{font-size:8px !important; letter-spacing:.28em !important; margin-top:4px !important;}
  #mainMenu .menu-resource{
    top:12.8vh !important;
    gap:7px !important;
  }
  #mainMenu .menu-resource img,
  #mainMenu .menu-biomass img{
    width:50px !important;
    height:50px !important;
  }
  #mainMenu .menu-resource strong{font-size:24px !important;}
  #mainMenu .menu-dish-wrap{
    top:49.6% !important;
    width:min(50vh,94vw) !important;
  }
}


/* v0.6.34 mobile main-menu stability + ambient tuning */
#mainMenu.main-menu{
  height:100svh !important;
  min-height:100svh !important;
}
#mainMenu .menu-dish{
  animation:none !important;
}
#mainMenu .menu-resource{
  transform:translateZ(0);
}
#mainMenu .menu-flyer{
  mix-blend-mode:screen;
}
@media (max-width:899px){
  #mainMenu .menu-resource{
    top:13.9svh !important;
  }
  #mainMenu .menu-dish-wrap{
    top:51.2% !important;
    width:min(86vw, 430px) !important;
  }
}
@media (max-width:560px){
  #mainMenu .menu-brand{top:1.6svh !important;}
  #mainMenu .menu-resource{
    top:15.8svh !important;
    gap:8px !important;
  }
  #mainMenu .menu-dna{left:4vw !important;}
  #mainMenu .menu-biomass{right:4vw !important;}
  #mainMenu .menu-resource img,
  #mainMenu .menu-biomass img{
    width:54px !important;
    height:54px !important;
  }
  #mainMenu .menu-resource strong{
    font-size:25px !important;
  }
  #mainMenu .menu-biomass > div{
    display:none !important;
  }
  #mainMenu .menu-dish-wrap{
    top:52.4% !important;
    width:min(92vw, 460px) !important;
  }
  #mainMenu .menu-flyers{
    inset:-3% !important;
  }
}


/* v0.6.35 Android render-path fix: one canvas instead of many filtered DOM layers */
#mainMenu .menu-flyers{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  opacity:1!important;
  display:block!important;
  pointer-events:none!important;
  transform:none!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}
#mainMenu .menu-dish{
  animation:none!important;
  transform:none!important;
}
@media(max-width:899px){
  #mainMenu.main-menu{height:100svh!important;min-height:100svh!important;}
  #mainMenu .menu-resource{top:16.8svh!important;}
  #mainMenu .menu-dish-wrap{top:53.0%!important;width:min(88vw,440px)!important;}
}
@media(max-width:560px){
  #mainMenu .menu-resource{top:18.0svh!important;}
  #mainMenu .menu-biomass>div{display:none!important;}
  #mainMenu .menu-dna{left:4vw!important;}
  #mainMenu .menu-biomass{right:5vw!important;}
  #mainMenu .menu-resource img,#mainMenu .menu-biomass img{width:58px!important;height:58px!important;}
  #mainMenu .menu-dish-wrap{top:54.0%!important;width:min(92vw,455px)!important;}
}


/* === v0.6.36 lab screen === */
.lab-screen{position:fixed;inset:0;z-index:40;padding:18px 20px 20px;display:flex;flex-direction:column;gap:16px;background:radial-gradient(circle at 50% 18%,rgba(27,84,95,.22),rgba(5,17,25,.98) 54%,#020910 100%);overflow:auto}.lab-screen-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 20%,rgba(95,255,179,.08),transparent 28%),radial-gradient(circle at 84% 16%,rgba(100,225,255,.08),transparent 22%),radial-gradient(circle at 50% 80%,rgba(183,106,255,.06),transparent 30%)}.lab-topbar,.lab-layout,.lab-catalog,.lab-detail{position:relative;z-index:1}.lab-topbar{display:grid;grid-template-columns:auto minmax(320px,1fr) auto;gap:18px;align-items:center;padding:18px 20px;border-radius:26px}.lab-back-btn{appearance:none;border:1px solid rgba(132,220,244,.28);background:linear-gradient(180deg,rgba(11,35,46,.92),rgba(4,16,24,.96));color:#e8fcff;border-radius:16px;padding:12px 16px;font-weight:800;letter-spacing:.04em;cursor:pointer;box-shadow:0 0 0 1px rgba(87,209,230,.08) inset}.lab-back-btn:hover{border-color:rgba(158,239,255,.45)}.lab-head-copy h1{margin:4px 0 6px;font-size:34px;line-height:1}.lab-head-copy p{margin:0;color:rgba(218,245,250,.72);font-size:13px;max-width:56ch}.lab-head-stats{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}.lab-stat-chip{min-width:170px;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:18px;border:1px solid rgba(126,217,239,.18);background:rgba(5,16,23,.54);box-shadow:0 0 0 1px rgba(114,224,255,.05) inset}.lab-stat-chip img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(95,255,183,.16))}.lab-stat-chip span{display:block;color:rgba(214,246,255,.65);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.lab-stat-chip strong{display:block;color:#f3feff;font-size:24px;line-height:1.05}.lab-layout{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(300px,.72fr);gap:16px;min-height:0}.lab-catalog,.lab-detail{padding:18px;border-radius:26px;min-height:0}.lab-section-head{font-size:11px;letter-spacing:.16em;font-weight:900;text-transform:uppercase;color:rgba(213,245,252,.62);margin-bottom:14px}.lab-gene-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.lab-gene-card{position:relative;display:grid;grid-template-columns:88px 1fr auto;gap:14px;align-items:center;padding:16px 16px 14px;border-radius:22px;border:1px solid rgba(117,216,239,.15);background:linear-gradient(180deg,rgba(8,24,35,.95),rgba(4,14,22,.96));cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.lab-gene-card:hover{transform:translateY(-1px);border-color:rgba(154,239,255,.33)}.lab-gene-card.active{border-color:rgba(180,246,255,.48);box-shadow:0 0 0 1px rgba(178,247,255,.10) inset,0 0 28px rgba(83,210,255,.10)}.lab-gene-icon-wrap{width:88px;height:88px;display:grid;place-items:center;border-radius:20px;background:radial-gradient(circle at 50% 50%,rgba(33,63,80,.66),rgba(8,20,29,.95));box-shadow:inset 0 0 30px rgba(134,230,255,.06),0 0 0 1px rgba(165,235,255,.06)}.lab-gene-icon-wrap img{width:58px;height:58px;object-fit:contain}.lab-gene-copy{min-width:0}.lab-gene-name{font-size:18px;font-weight:900;line-height:1.1;margin:0 0 6px}.lab-gene-desc{margin:0 0 7px;color:rgba(218,245,250,.72);font-size:12px;line-height:1.34}.lab-gene-meta{display:flex;gap:8px;flex-wrap:wrap}.lab-chip{padding:5px 8px;border-radius:999px;border:1px solid rgba(132,220,244,.18);background:rgba(8,24,34,.65);color:rgba(219,247,255,.82);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.lab-level-pips{display:flex;gap:8px;justify-content:flex-end}.lab-level-pips i{display:block;width:14px;height:14px;border-radius:999px;border:1px solid rgba(199,242,255,.14);background:rgba(255,255,255,.04);box-shadow:none}.lab-level-pips i.filled{background:rgba(154,255,190,.86);border-color:rgba(214,255,230,.7)}.lab-level-pips.level-2 i.filled,.lab-level-pips.level-2 i.current{box-shadow:0 0 10px rgba(105,255,194,.35),0 0 18px rgba(105,255,194,.16)}.lab-level-pips.level-3 i.filled,.lab-level-pips.level-3 i.current{box-shadow:0 0 13px rgba(84,255,202,.48),0 0 22px rgba(89,214,255,.20)}.lab-detail-body{display:flex;flex-direction:column;gap:14px}.lab-focus{display:flex;gap:14px;align-items:center;padding:14px;border-radius:22px;border:1px solid rgba(122,218,241,.16);background:linear-gradient(180deg,rgba(7,23,33,.9),rgba(4,14,22,.94))}.lab-focus-icon{width:98px;height:98px;flex:0 0 auto;display:grid;place-items:center;border-radius:24px;background:radial-gradient(circle at 50% 50%,rgba(30,66,82,.72),rgba(7,18,27,.96));box-shadow:inset 0 0 34px rgba(105,226,255,.08)}.lab-focus-icon img{width:68px;height:68px;object-fit:contain}.lab-focus-copy h3{margin:0 0 6px;font-size:28px;line-height:1}.lab-focus-copy p{margin:0;color:rgba(219,244,250,.74);font-size:12px;line-height:1.35}.lab-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.lab-detail-stat{padding:11px 12px;border-radius:18px;border:1px solid rgba(119,216,238,.14);background:rgba(6,18,27,.62)}.lab-detail-stat span{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(214,246,255,.58);margin-bottom:5px}.lab-detail-stat strong{display:block;color:#f4fdff;font-size:16px;line-height:1.1}.lab-upgrade-box{padding:14px;border-radius:22px;border:1px solid rgba(128,218,242,.18);background:linear-gradient(180deg,rgba(7,22,31,.92),rgba(4,14,21,.96));display:flex;flex-direction:column;gap:10px}.lab-upgrade-box h4{margin:0;font-size:15px}.lab-upgrade-box p{margin:0;color:rgba(213,244,251,.73);font-size:12px;line-height:1.34}.lab-upgrade-actions{display:flex;gap:10px;flex-wrap:wrap}.lab-btn{appearance:none;border:1px solid rgba(135,221,243,.24);border-radius:16px;padding:10px 13px;background:linear-gradient(180deg,rgba(11,34,47,.92),rgba(5,17,25,.96));color:#ebfeff;font-weight:800;letter-spacing:.03em;cursor:pointer}.lab-btn.primary{border-color:rgba(133,255,190,.36);box-shadow:0 0 18px rgba(78,255,173,.08)}.lab-btn:disabled{opacity:.48;cursor:not-allowed}.lab-research-box{padding:14px;border-radius:22px;border:1px solid rgba(122,219,241,.18);background:linear-gradient(180deg,rgba(8,23,34,.88),rgba(4,14,22,.96));display:flex;flex-direction:column;gap:10px}.lab-progress{height:10px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}.lab-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(120,255,192,.86),rgba(83,214,255,.86))}.lab-note{padding:12px 13px;border-radius:18px;background:rgba(7,20,29,.66);border:1px solid rgba(124,217,239,.12);font-size:12px;line-height:1.35;color:rgba(216,245,251,.68)}.level-1 .lab-gene-icon-wrap img,.level-1 .gene-level-visual,.level-1 .orb{filter:drop-shadow(0 0 7px rgba(110,228,255,.12))}.level-2 .lab-gene-icon-wrap,.level-2 .gene-level-visual,.level-2 .orb{box-shadow:0 0 0 1px rgba(115,255,193,.08) inset,0 0 24px rgba(109,255,198,.12)}.level-2 .lab-gene-icon-wrap img,.level-2 .gene-level-visual img,.level-2 .orb{filter:drop-shadow(0 0 14px rgba(110,255,194,.30))}.level-3 .lab-gene-icon-wrap,.level-3 .gene-level-visual,.level-3 .orb{box-shadow:0 0 0 1px rgba(108,255,204,.14) inset,0 0 34px rgba(94,255,214,.18)}.level-3 .lab-gene-icon-wrap img,.level-3 .gene-level-visual img,.level-3 .orb{filter:drop-shadow(0 0 22px rgba(104,255,206,.46))}.lab-entry-btn{width:100%;display:flex;align-items:center;gap:10px;justify-content:center;padding:12px 14px;border-radius:18px;border:1px solid rgba(133,223,244,.24);background:linear-gradient(180deg,rgba(10,31,43,.94),rgba(5,16,24,.96));color:#effcff;font-weight:900;letter-spacing:.04em;cursor:pointer}.lab-entry-icon{font-size:19px;line-height:1}.lab-entry-copy small{display:block;color:rgba(214,247,255,.54);font-size:9px;letter-spacing:.16em;text-transform:uppercase}.lab-entry-copy{line-height:1.1;text-align:left}.lab-gene-card.locked-next{opacity:.88}.lab-locked-mark{position:absolute;top:10px;right:10px;padding:4px 7px;border-radius:999px;background:rgba(24,44,55,.82);border:1px solid rgba(124,220,241,.14);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(211,247,255,.68)}@media(max-width:1024px){.lab-topbar{grid-template-columns:1fr;align-items:flex-start}.lab-head-stats{justify-content:flex-start}.lab-layout{grid-template-columns:1fr}.lab-focus-copy h3{font-size:24px}}@media(max-width:720px){.lab-screen{padding:10px 10px 12px}.lab-topbar,.lab-catalog,.lab-detail{padding:13px;border-radius:20px}.lab-head-copy h1{font-size:24px}.lab-head-copy p{font-size:11px}.lab-stat-chip{min-width:0;flex:1 1 140px;padding:10px 11px}.lab-stat-chip img{width:40px;height:40px}.lab-stat-chip strong{font-size:20px}.lab-gene-grid{grid-template-columns:1fr}.lab-gene-card{grid-template-columns:70px 1fr;gap:10px;padding:13px}.lab-gene-icon-wrap{width:70px;height:70px;border-radius:18px}.lab-gene-icon-wrap img{width:46px;height:46px}.lab-level-pips{grid-column:1/-1;justify-content:flex-start}.lab-focus{flex-direction:column;align-items:flex-start}.lab-focus-icon{width:84px;height:84px}.lab-focus-icon img{width:60px;height:60px}.lab-detail-grid{grid-template-columns:1fr}.lab-upgrade-actions{flex-direction:column}.lab-btn{width:100%}}


/* === v0.6.37 lab resource + match lab icon + dev DNA tool === */
.lab-head-stats{justify-content:flex-end}
.lab-stat-chip.lab-dna-combined{min-width:290px;gap:14px;padding:11px 15px}
.lab-stat-chip.lab-dna-combined>img{width:56px;height:56px;flex:0 0 56px}
.lab-dna-values{display:grid;grid-template-columns:1fr 1fr;gap:0;min-width:0;align-items:center}
.lab-dna-values>div{min-width:116px;padding:1px 13px}
.lab-dna-values>div+div{border-left:1px solid rgba(132,222,244,.15)}
.lab-dna-values span{white-space:nowrap}
.lab-dna-values strong{font-size:24px}
.lab-entry-btn{width:52px!important;height:52px!important;min-width:52px!important;padding:8px!important;margin:0 auto!important;display:grid!important;place-items:center!important;border-radius:16px!important}
.lab-entry-btn img{width:34px;height:34px;object-fit:contain;display:block;filter:drop-shadow(0 0 10px rgba(156,245,255,.18))}
.dev-admin-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dev-admin-row>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.dev-admin-row b{font-size:12px;color:#e9fbff}
.dev-admin-row small{font-size:9px;color:#7fa7b4;line-height:1.3}
.dev-admin-btn{appearance:none;flex:0 0 auto;border:1px solid rgba(94,255,151,.42);border-radius:13px;background:linear-gradient(180deg,rgba(17,105,57,.82),rgba(5,55,34,.94));color:#eafff0;padding:10px 14px;font:inherit;font-size:12px;font-weight:900;cursor:pointer;box-shadow:0 0 20px rgba(72,255,130,.09),inset 0 1px rgba(255,255,255,.07)}
.dev-admin-btn:hover{border-color:rgba(115,255,166,.68);box-shadow:0 0 28px rgba(72,255,130,.14),inset 0 1px rgba(255,255,255,.09)}
@media(max-width:1024px){.lab-head-stats{justify-content:flex-start}}
@media(max-width:720px){
  .lab-stat-chip.lab-dna-combined{min-width:0;width:100%;flex:0 0 auto;padding:9px 11px}
  .lab-stat-chip.lab-dna-combined>img{width:46px;height:46px;flex-basis:46px}
  .lab-dna-values{width:100%}
  .lab-dna-values>div{min-width:0;padding:0 9px}
  .lab-dna-values span{font-size:8px;letter-spacing:.06em}
  .lab-dna-values strong{font-size:19px}
  .lab-entry-btn{width:44px!important;height:44px!important;min-width:44px!important;padding:6px!important;border-radius:13px!important}
  .lab-entry-btn img{width:30px;height:30px}
  .dev-admin-row{align-items:stretch;flex-direction:column}
  .dev-admin-btn{width:100%}
}

/* v0.6.40 — restrained mutation levels: old icon, brighter II, contained bloom III */
/* No large aura, no rings, no glow outside the icon bounds. */
.gene-level-visual{
  position:relative;
  isolation:auto;
  overflow:hidden;
  --gene-color:#6fffd0;
}
.gene-level-visual::before,
.gene-level-visual::after{
  content:none!important;
  display:none!important;
}

/* Level I: exactly the normal project icon treatment. */
.level-1 .gene-level-visual img,
.gene-level-visual.level-1 img{
  filter:none!important;
}
.level-1.gene-level-visual{
  filter:none!important;
}

/* Level II: same asset, only clearly brighter / richer. */
.level-2 .gene-level-visual img,
.gene-level-visual.level-2 img{
  filter:brightness(1.28) saturate(1.16) contrast(1.04)!important;
}
.level-2.gene-level-visual{
  filter:brightness(1.28) saturate(1.16) contrast(1.04)!important;
}

/* Level III: brighter still + a compact bloom INSIDE the icon only. */
.level-3 .gene-level-visual img,
.gene-level-visual.level-3 img{
  filter:brightness(1.44) saturate(1.24) contrast(1.06)!important;
}
.level-3.gene-level-visual{
  filter:brightness(1.44) saturate(1.24) contrast(1.06)!important;
}
.level-3 .gene-level-visual,
.gene-level-visual.level-3{
  box-shadow:
    inset 0 0 9px color-mix(in srgb,var(--gene-color) 52%,transparent),
    inset 0 0 18px color-mix(in srgb,var(--gene-color) 24%,transparent)!important;
}

/* Restore cards/slots to the old restrained framing: level is on the icon, not around the whole card. */
.mini-gene.level-2,
.mini-gene.level-3,
.slot-pick-btn.level-2,
.slot-pick-btn.level-3,
.gene-card.level-2,
.gene-card.level-3{
  box-shadow:revert!important;
}
.lab-gene-card.level-2 .lab-gene-icon-wrap,
.lab-gene-card.level-3 .lab-gene-icon-wrap{
  border:1px solid rgba(165,235,255,.06)!important;
  box-shadow:inset 0 0 30px rgba(134,230,255,.06),0 0 0 1px rgba(165,235,255,.06)!important;
}
.lab-level-pips.level-2 i.filled,
.lab-level-pips.level-2 i.current,
.lab-level-pips.level-3 i.filled,
.lab-level-pips.level-3 i.current{
  box-shadow:none!important;
}

/* In-match orb keeps its old shape; II is brighter, III gets only an inset bloom. */
.mini-gene .orb.gene-level-visual.level-1{
  filter:none!important;
}
.mini-gene .orb.gene-level-visual.level-2{
  filter:brightness(1.28) saturate(1.16) contrast(1.04)!important;
}
.mini-gene .orb.gene-level-visual.level-3{
  filter:brightness(1.44) saturate(1.24) contrast(1.06)!important;
  box-shadow:
    inset 0 0 7px color-mix(in srgb,var(--gene-color) 58%,transparent),
    inset 0 0 14px color-mix(in srgb,var(--gene-color) 28%,transparent)!important;
}

/* The three laboratory previews remain for comparison, without external aura. */
.lab-level-effects{display:flex;flex-direction:column;gap:9px}
.lab-level-effect-row{--gene-color:#6fffd0;display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:center;min-height:72px;padding:10px 12px;border-radius:18px;border:1px solid rgba(124,217,239,.12);background:rgba(5,17,25,.58)}
.lab-level-effect-row.current{border-color:color-mix(in srgb,var(--gene-color) 42%,transparent);box-shadow:inset 0 0 18px color-mix(in srgb,var(--gene-color) 6%,transparent)}
.lab-level-preview{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:rgba(7,19,28,.88);overflow:hidden}
.lab-level-preview img{width:38px;height:38px;object-fit:contain}
.lab-level-effect-row b{display:block;font-size:12px;margin-bottom:3px;color:#effdff}
.lab-level-effect-row p{margin:0;color:rgba(214,245,251,.72);font-size:11px;line-height:1.32}
@media(max-width:720px){
  .lab-level-effect-row{grid-template-columns:50px minmax(0,1fr);padding:9px 10px}
  .lab-level-preview{width:42px;height:42px}
  .lab-level-preview img{width:33px;height:33px}
}


/* v0.6.41 — mutation level marker: Roman numeral only. */
/* All level-specific brightness/bloom from v0.6.39/40 is intentionally neutralized. */
.level-1 .gene-level-visual,
.level-2 .gene-level-visual,
.level-3 .gene-level-visual,
.gene-level-visual.level-1,
.gene-level-visual.level-2,
.gene-level-visual.level-3,
.level-1 .gene-level-visual img,
.level-2 .gene-level-visual img,
.level-3 .gene-level-visual img,
.gene-level-visual.level-1 img,
.gene-level-visual.level-2 img,
.gene-level-visual.level-3 img,
.mini-gene .orb.gene-level-visual.level-1,
.mini-gene .orb.gene-level-visual.level-2,
.mini-gene .orb.gene-level-visual.level-3{
  filter:none!important;
}
.level-1 .gene-level-visual,
.level-2 .gene-level-visual,
.level-3 .gene-level-visual,
.gene-level-visual.level-1,
.gene-level-visual.level-2,
.gene-level-visual.level-3,
.mini-gene .orb.gene-level-visual.level-1,
.mini-gene .orb.gene-level-visual.level-2,
.mini-gene .orb.gene-level-visual.level-3{
  box-shadow:none!important;
}
/* Keep the original project's normal framing on the actual UI element. */
.mini-gene .orb.gene-level-visual{
  box-shadow:0 0 14px currentColor inset,0 0 12px currentColor!important;
}
@media(max-width:899px){
  .mini-gene .orb.gene-level-visual{box-shadow:0 0 7px currentColor inset,0 0 5px currentColor!important}
}
.gene-level-visual{position:relative!important;overflow:hidden!important}
.gene-level-badge{
  position:absolute;
  right:3px;
  bottom:3px;
  z-index:4;
  min-width:17px;
  height:15px;
  padding:0 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  border:1px solid rgba(205,245,255,.28);
  background:rgba(1,10,16,.78);
  color:#e9fbff;
  font-size:9px;
  line-height:1;
  font-weight:950;
  letter-spacing:.03em;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  pointer-events:none;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.gene-level-badge-lg{right:6px;bottom:6px;min-width:22px;height:19px;font-size:11px;border-radius:7px}
.gene-level-badge-mini{right:1px;bottom:1px;min-width:13px;height:12px;padding:0 2px;font-size:7px;border-radius:4px}
.gene-icon .gene-level-badge{right:4px;bottom:4px}
.slot-pick-btn .gene-level-visual{width:100%;height:100%;display:grid;place-items:center;border-radius:inherit}
.slot-pick-btn .gene-level-badge{right:3px;bottom:3px}
.lab-level-preview .gene-level-badge{right:2px;bottom:2px;min-width:15px;height:13px;font-size:8px}


/* === v0.6.42 mobile cleanup: mutation dock, picker, lab and research status === */
.match-research-status{
  position:absolute;z-index:16;top:10px;right:10px;
  display:flex;align-items:center;gap:6px;
  min-height:34px;padding:5px 8px 5px 6px;
  border:1px solid color-mix(in srgb,var(--research-color,#70eaff) 38%,transparent);
  border-radius:12px;background:rgba(3,16,24,.88);color:#effcff;
  box-shadow:0 8px 28px rgba(0,0,0,.28);cursor:pointer;
  backdrop-filter:blur(8px);
}
.match-research-status img{width:24px;height:24px;object-fit:contain;display:block}
.match-research-status span{font-size:10px;font-weight:900;letter-spacing:.03em;white-space:nowrap}
.match-research-status.ready{border-color:rgba(99,255,151,.55)}

@media (max-width:899px){
  /* Mobile resource row: DNA | biomass | lab icon. The desktop-only overview hint is gone. */
  .left-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 46px!important;align-items:end!important}
  .left-panel .left-hint-panel{display:none!important}
  .left-panel .left-lab-panel{display:flex!important;align-items:flex-end!important;justify-content:center!important;min-width:46px!important}
  .left-panel .left-lab-panel .lab-entry-btn{display:grid!important;width:44px!important;height:44px!important;min-width:44px!important;margin:0!important;padding:6px!important}
  .left-panel .left-lab-panel .lab-entry-btn img{width:30px!important;height:30px!important}

  /* Roman numeral must remain visible on the selected mutations in the bottom dock, not just in the picker. */
  .bottom-panel .mini-gene .gene-level-badge{
    display:flex!important;position:absolute!important;right:0!important;bottom:0!important;
    min-width:13px!important;height:12px!important;padding:0 2px!important;
    font-size:7px!important;line-height:1!important;border-radius:4px!important;
    background:rgba(1,9,14,.88)!important;color:#f4fdff!important;
    border:1px solid rgba(214,247,255,.36)!important;z-index:6!important;
  }
  .bottom-panel .mini-gene .orb{position:relative!important;overflow:hidden!important}

  /* Stable picker: one viewport-safe row. No layout growth and no off-screen shift. */
  .bottom-panel #slotPicker,
  .bottom-panel #slotPicker.hidden{
    position:fixed!important;left:50%!important;right:auto!important;top:auto!important;
    bottom:calc(68px + env(safe-area-inset-bottom))!important;transform:translateX(-50%)!important;
    width:min(292px,calc(100vw - 12px))!important;max-width:calc(100vw - 12px)!important;
    min-width:0!important;height:auto!important;min-height:0!important;max-height:none!important;
    padding:7px!important;margin:0!important;border-radius:13px!important;overflow:hidden!important;
  }
  .bottom-panel #slotPicker.hidden{display:none!important}
  .bottom-panel #slotPicker:not(.hidden){display:block!important}
  .bottom-panel #slotPicker .slot-picker-grid{
    display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:4px!important;
  }
  .bottom-panel #slotPicker .slot-pick-btn{height:40px!important;min-width:0!important;width:100%!important;padding:0!important;border-radius:9px!important}
  .bottom-panel #slotPicker .slot-pick-btn img{width:25px!important;height:25px!important}
  .bottom-panel #slotPicker .gene-level-badge{display:flex!important;right:2px!important;bottom:2px!important}

  /* Small research timer lives on the field corner, outside the dish itself. */
  .match-research-status{top:7px!important;right:7px!important;min-height:31px!important;padding:4px 7px 4px 5px!important;border-radius:10px!important}
  .match-research-status img{width:22px!important;height:22px!important}
  .match-research-status span{font-size:9px!important}

  /* Mobile laboratory: compact 2x3 mutation chooser, then the selected mutation immediately below. */
  .lab-screen{padding:7px 7px 10px!important;gap:7px!important;overflow-y:auto!important;overflow-x:hidden!important}
  .lab-topbar{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:8px 10px!important;padding:9px!important;border-radius:16px!important;align-items:start!important}
  .lab-back-btn{grid-column:1!important;grid-row:1!important;padding:8px 10px!important;border-radius:11px!important;font-size:11px!important}
  .lab-head-copy{grid-column:2!important;grid-row:1!important;min-width:0!important}
  .lab-head-copy .eyebrow{font-size:6px!important;letter-spacing:.13em!important}
  .lab-head-copy h1{font-size:18px!important;margin:2px 0 0!important;line-height:1.05!important}
  .lab-head-copy p{display:none!important}
  .lab-head-stats{grid-column:1/-1!important;grid-row:2!important;width:100%!important;margin:0!important}
  .lab-stat-chip.lab-dna-combined{width:100%!important;min-width:0!important;min-height:48px!important;padding:6px 8px!important;border-radius:13px!important}
  .lab-stat-chip.lab-dna-combined>img{width:38px!important;height:38px!important;flex:0 0 38px!important}
  .lab-dna-values>div{padding:0 7px!important}
  .lab-dna-values span{font-size:7px!important}
  .lab-dna-values strong{font-size:17px!important}

  .lab-layout{display:flex!important;flex-direction:column!important;gap:7px!important}
  .lab-catalog,.lab-detail{padding:9px!important;border-radius:16px!important;width:100%!important;min-width:0!important}
  .lab-section-head{margin-bottom:7px!important;font-size:7px!important}
  .lab-gene-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  .lab-gene-card{
    display:grid!important;grid-template-columns:46px minmax(0,1fr)!important;grid-template-rows:auto!important;
    gap:7px!important;align-items:center!important;min-height:64px!important;padding:7px!important;border-radius:13px!important;overflow:hidden!important;
  }
  .lab-gene-card:hover{transform:none!important}
  .lab-gene-icon-wrap{width:46px!important;height:46px!important;border-radius:11px!important}
  .lab-gene-icon-wrap img{width:36px!important;height:36px!important}
  .lab-gene-name{font-size:11px!important;margin:0!important;line-height:1.1!important;padding-right:16px!important}
  .lab-gene-desc,.lab-gene-meta,.lab-level-pips{display:none!important}
  .lab-locked-mark{top:4px!important;right:4px!important;font-size:6px!important;padding:2px 4px!important;max-width:48px!important;white-space:nowrap!important;overflow:hidden!important}
  .lab-gene-card .gene-level-badge{display:flex!important}

  .lab-detail{order:2!important}
  .lab-detail-body{gap:7px!important}
  .lab-focus{display:grid!important;grid-template-columns:58px minmax(0,1fr)!important;gap:9px!important;padding:8px!important;border-radius:14px!important;align-items:center!important}
  .lab-focus-icon{width:58px!important;height:58px!important;border-radius:14px!important}
  .lab-focus-icon img{width:46px!important;height:46px!important}
  .lab-focus-copy h3{font-size:18px!important;margin:0 0 3px!important}
  .lab-focus-copy p{font-size:9px!important;line-height:1.25!important;margin:0!important}
  .lab-detail-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}
  .lab-detail-stat{padding:7px!important;border-radius:11px!important;min-width:0!important}
  .lab-detail-stat span{font-size:6px!important;margin-bottom:3px!important}
  .lab-detail-stat strong{font-size:11px!important;overflow-wrap:anywhere!important}
  .lab-upgrade-box,.lab-research-box,.lab-note{padding:8px!important;border-radius:13px!important;gap:6px!important}
  .lab-upgrade-box h4,.lab-research-box h4{font-size:11px!important;margin:0!important}
  .lab-upgrade-box p,.lab-research-box p,.lab-note{font-size:9px!important;line-height:1.3!important}
  .lab-upgrade-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
  .lab-btn{width:100%!important;padding:8px!important;border-radius:10px!important;font-size:10px!important}
  .lab-level-effects{gap:5px!important}
  .lab-level-effect-row{grid-template-columns:42px minmax(0,1fr)!important;gap:7px!important;min-height:56px!important;padding:6px 7px!important;border-radius:12px!important}
  .lab-level-preview{width:40px!important;height:40px!important;border-radius:10px!important;overflow:hidden!important}
  .lab-level-preview img{width:31px!important;height:31px!important}
  .lab-level-effect-row b{font-size:10px!important;margin-bottom:2px!important}
  .lab-level-effect-row p{font-size:8px!important;line-height:1.25!important;overflow-wrap:anywhere!important}
  .lab-level-preview .gene-level-badge{display:flex!important;right:1px!important;bottom:1px!important}
}

@media (max-width:370px){
  .bottom-panel #slotPicker, .bottom-panel #slotPicker.hidden{width:calc(100vw - 8px)!important;max-width:calc(100vw - 8px)!important}
  .bottom-panel #slotPicker .slot-picker-grid{gap:3px!important}
  .bottom-panel #slotPicker .slot-pick-btn{height:38px!important}
  .lab-gene-card{grid-template-columns:42px minmax(0,1fr)!important;padding:6px!important}
  .lab-gene-icon-wrap{width:42px!important;height:42px!important}.lab-gene-icon-wrap img{width:33px!important;height:33px!important}
}

/* v0.6.42.1 — lab must grow with its content on mobile; never let flex shrinking overlap rows. */
@media (max-width:899px){
  .lab-screen{display:block!important}
  .lab-topbar{margin-bottom:7px!important}
  .lab-layout{height:auto!important;min-height:auto!important;flex:none!important;overflow:visible!important}
  .lab-catalog,.lab-detail{height:auto!important;min-height:0!important;flex:none!important;overflow:visible!important}
  .lab-catalog{margin-bottom:7px!important}
}

/* v0.6.42.2 visibility corrections after mobile lab reflow */
#labScreen.hidden{display:none!important}
@media (max-width:899px){
  body .left-panel .panel-group.left-lab-panel:last-child{display:flex!important}
}


/* === v0.6.43 laboratory progression gate + layout cleanup === */
.lab-layout{align-items:start!important}
.lab-catalog,.lab-detail{height:auto!important;align-self:start!important}
.lab-detail-body{gap:10px!important}
.lab-level-effects{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
.lab-level-effect-row{position:relative!important;appearance:none!important;width:100%!important;text-align:left!important;color:inherit!important;cursor:pointer!important;grid-template-columns:44px minmax(0,1fr)!important;min-height:74px!important;padding:9px!important;border-radius:15px!important}
.lab-level-effect-row.inspected{border-color:rgba(185,245,255,.42)!important;box-shadow:0 0 0 1px rgba(171,239,255,.08) inset!important}
.lab-level-effect-row.locked{opacity:.58!important;filter:saturate(.55)!important}
.lab-level-effect-row.locked:hover{opacity:.72!important}
.lab-level-row-copy{display:block;min-width:0}
.lab-level-row-copy p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.lab-level-preview{position:relative!important;overflow:hidden!important}
.lab-level-lock{position:absolute;inset:0;display:grid;place-items:center;background:rgba(1,9,14,.42);font-size:14px;text-shadow:0 1px 5px #000}
.lab-action-zone{display:grid;grid-template-columns:1fr;gap:10px;align-items:start}
.lab-action-zone.has-research{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.lab-action-zone>.lab-upgrade-box,.lab-action-zone>.lab-research-box,.lab-action-zone>.lab-lock-message{margin:0!important;height:100%;min-width:0}
.lab-research-params{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.lab-lock-message{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:18px;border:1px solid rgba(255,207,91,.25);background:linear-gradient(180deg,rgba(40,30,11,.58),rgba(17,17,14,.72))}
.lab-lock-message-icon{flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(255,210,84,.08);border:1px solid rgba(255,211,88,.18);font-size:17px}
.lab-lock-message h4{margin:0 0 5px;font-size:14px;color:#fff2c8}
.lab-lock-message p{margin:0;color:rgba(247,238,208,.76);font-size:11px;line-height:1.38}
.lab-lock-message small{display:block;margin-top:7px;color:rgba(247,238,208,.55);font-size:10px}
.menu-action.lab-locked,.lab-entry-btn.lab-locked{position:relative;opacity:.62;filter:saturate(.65)}
.menu-action.lab-locked::after,.lab-entry-btn.lab-locked::after{content:'🔒';position:absolute;right:7px;top:6px;font-size:11px;line-height:1;filter:none}
.dev-admin-input-group{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.dev-admin-input{width:108px;min-width:0;padding:10px 11px;border-radius:12px;border:1px solid rgba(126,218,241,.24);background:rgba(4,16,24,.92);color:#effdff;font:inherit;font-weight:900;outline:none}
.dev-admin-input:focus{border-color:rgba(141,235,255,.52);box-shadow:0 0 0 2px rgba(88,215,255,.08)}
.dev-admin-btn-warn{border-color:rgba(255,176,92,.38)!important;background:linear-gradient(180deg,rgba(105,56,17,.82),rgba(56,27,7,.94))!important;color:#fff2df!important}
@media(max-width:1100px){
  .lab-level-effects{grid-template-columns:1fr!important}
  .lab-action-zone.has-research{grid-template-columns:1fr!important}
  .lab-level-effect-row{grid-template-columns:48px minmax(0,1fr)!important;min-height:62px!important}
  .lab-level-row-copy p{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important}
}
@media(max-width:720px){
  .lab-detail-body{gap:6px!important}
  .lab-level-effects{display:grid!important;grid-template-columns:1fr!important;gap:5px!important}
  .lab-level-effect-row{grid-template-columns:40px minmax(0,1fr)!important;min-height:52px!important;padding:6px 7px!important;border-radius:11px!important}
  .lab-level-effect-row.locked{opacity:.55!important}
  .lab-level-lock{font-size:12px!important}
  .lab-action-zone,.lab-action-zone.has-research{display:grid!important;grid-template-columns:1fr!important;gap:6px!important}
  .lab-research-params{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}
  .lab-research-params .lab-detail-stat{padding:6px!important}
  .lab-lock-message{padding:8px!important;gap:8px!important;border-radius:12px!important}
  .lab-lock-message-icon{width:30px;height:30px;border-radius:9px;font-size:13px}
  .lab-lock-message h4{font-size:11px!important;margin-bottom:3px!important}
  .lab-lock-message p{font-size:9px!important;line-height:1.3!important}
  .lab-lock-message small{font-size:8px!important;margin-top:4px!important}
  .dev-admin-input-group{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto}
  .dev-admin-input{width:100%;min-width:0}
}


/* === v0.6.45 match biomass actions === */
.biomass-mini-bar{width:100%;max-width:132px;height:4px;margin-top:4px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.biomass-mini-bar span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,rgba(198,224,95,.82),rgba(255,218,94,.96));box-shadow:0 0 8px rgba(242,215,87,.25);transition:width .18s ease}
.mini-gene{position:relative!important;overflow:visible!important}
.match-gene-upgrade{position:absolute;right:5px;bottom:5px;z-index:7;min-width:47px;height:26px;padding:2px 6px;border-radius:9px;border:1px solid rgba(217,225,116,.22);background:rgba(11,24,25,.94);color:rgba(236,245,207,.72);display:flex;align-items:center;justify-content:center;gap:4px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.match-gene-upgrade b{font-size:10px;line-height:1}.match-gene-upgrade small{font-size:9px;line-height:1;color:#e6d86e}.match-gene-upgrade.affordable{border-color:rgba(243,226,112,.58);color:#fffbe1;box-shadow:0 0 12px rgba(239,218,81,.13),0 4px 12px rgba(0,0,0,.25)}
.match-gene-upgrade.affordable small{color:#fff08a}.match-gene-max{position:absolute;right:6px;bottom:6px;z-index:6;padding:3px 5px;border-radius:7px;background:rgba(5,15,22,.82);border:1px solid rgba(154,224,241,.13);font-size:8px;font-weight:900;color:rgba(208,239,246,.52);letter-spacing:.05em}
@media(max-width:720px){
  .left-panel .biomass-mini-bar{max-width:76px;height:3px;margin-top:2px}
  .bottom-panel .mini-gene{overflow:visible!important}
  .bottom-panel .match-gene-upgrade{right:-2px;bottom:-8px;min-width:31px;height:17px;padding:1px 3px;border-radius:6px;gap:2px}
  .bottom-panel .match-gene-upgrade b{font-size:7px}.bottom-panel .match-gene-upgrade small{font-size:7px}
  .bottom-panel .match-gene-max{display:none}
}


/* === v0.6.46 match UI polish / biomass clarity / round reset === */
.match-lab-fab{
  position:fixed;z-index:24;left:92px;bottom:72px;width:54px;height:54px;padding:8px;
  display:grid;place-items:center;border-radius:17px;cursor:pointer;
  border:1px solid rgba(133,223,244,.30);
  background:linear-gradient(180deg,rgba(9,31,43,.96),rgba(4,15,23,.98));
  box-shadow:0 12px 34px rgba(0,0,0,.34),inset 0 0 18px rgba(94,220,247,.05);
  color:#effcff;
}
.match-lab-fab:hover{border-color:rgba(159,238,255,.58);transform:translateY(-1px);box-shadow:0 14px 38px rgba(0,0,0,.38),0 0 22px rgba(77,218,255,.10)}
.match-lab-fab img{width:36px;height:36px;object-fit:contain;display:block}
.match-lab-fab.lab-locked{opacity:.58;filter:saturate(.65)}
.match-lab-fab.lab-locked::after{content:'🔒';position:absolute;right:4px;top:3px;font-size:10px}

@media(min-width:1100px){
  .left-panel{top:43%!important;transform:translateY(-50%)!important}
}

/* Integrated mutation card action instead of the old tiny corner pill */
.mini-gene{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:7px!important;padding:8px!important;overflow:hidden!important}
.mini-gene-main{display:flex;align-items:center;gap:8px;min-width:0}
.mini-gene-main>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.match-gene-upgrade{
  position:static!important;width:100%!important;height:32px!important;min-width:0!important;padding:4px 7px!important;
  border-radius:10px!important;border:1px solid rgba(194,220,104,.24)!important;
  background:linear-gradient(180deg,rgba(25,35,26,.78),rgba(9,20,23,.92))!important;
  color:rgba(242,247,222,.82)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:7px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.03)!important;cursor:pointer;
}
.match-gene-upgrade .upgrade-copy{display:flex!important;align-items:baseline!important;gap:5px!important;min-width:0}
.match-gene-upgrade .upgrade-copy small{font-size:7px!important;letter-spacing:.12em!important;color:rgba(218,236,185,.54)!important;font-weight:900!important}
.match-gene-upgrade .upgrade-copy b{font-size:10px!important;color:#f4f7e8!important;line-height:1!important}
.match-gene-upgrade .upgrade-cost{display:flex!important;align-items:center!important;gap:3px!important;padding:2px 5px!important;border-radius:999px!important;background:rgba(223,207,81,.07)!important;border:1px solid rgba(233,218,99,.13)!important}
.match-gene-upgrade .upgrade-cost img{width:13px!important;height:13px!important;object-fit:contain!important;display:block!important}
.match-gene-upgrade .upgrade-cost b{font-size:9px!important;line-height:1!important;color:#ebdc72!important}
.match-gene-upgrade.affordable{border-color:rgba(231,221,104,.52)!important;background:linear-gradient(180deg,rgba(43,48,24,.84),rgba(13,25,24,.96))!important;box-shadow:0 0 14px rgba(228,211,72,.08),inset 0 1px rgba(255,255,255,.04)!important}
.match-gene-upgrade.affordable .upgrade-cost{background:rgba(242,220,70,.11)!important;border-color:rgba(245,225,88,.25)!important}
.match-gene-max{position:static!important;align-self:flex-end!important;margin-top:1px!important}

/* Switching cost is always visible before paying */
.slot-picker-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}
.slot-picker-cost{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border-radius:999px;background:rgba(215,205,78,.08);border:1px solid rgba(235,220,89,.18);color:#f5e77d;white-space:nowrap}
.slot-picker-cost img{width:15px!important;height:15px!important;object-fit:contain!important}
.slot-picker-cost b{font-size:10px;line-height:1}
.slot-pick-btn.paid-switch::before{content:attr(data-switch-cost);position:absolute;left:4px;bottom:4px;min-width:16px;height:14px;padding:0 3px;border-radius:6px;display:grid;place-items:center;background:rgba(9,20,21,.88);border:1px solid rgba(235,220,88,.20);color:#ebdc72;font-size:7px;font-weight:900;line-height:1;z-index:3}
.slot-pick-btn.paid-switch::after{content:'Б';position:absolute;left:22px;bottom:5px;color:rgba(235,220,88,.60);font-size:6px;font-weight:900;z-index:3}

/* Cleaner biomass resource copy */
.biomass-resource .resource-copy small{color:rgba(210,238,240,.58)!important}

@media(max-width:720px){
  .match-lab-fab{left:10px;bottom:74px;width:44px;height:44px;padding:6px;border-radius:13px}
  .match-lab-fab img{width:30px;height:30px}
  .left-panel{top:72px!important;transform:none!important}
  .bottom-panel .mini-gene{padding:4px!important;gap:3px!important;overflow:hidden!important}
  .bottom-panel .mini-gene-main{gap:2px!important}
  .bottom-panel .match-gene-upgrade{height:20px!important;padding:2px 4px!important;border-radius:7px!important;gap:3px!important}
  .bottom-panel .match-gene-upgrade .upgrade-copy small{display:none!important}
  .bottom-panel .match-gene-upgrade .upgrade-copy b{font-size:7px!important}
  .bottom-panel .match-gene-upgrade .upgrade-cost{padding:1px 3px!important;gap:2px!important}
  .bottom-panel .match-gene-upgrade .upgrade-cost img{width:10px!important;height:10px!important}
  .bottom-panel .match-gene-upgrade .upgrade-cost b{font-size:7px!important}
  .slot-picker-head{font-size:8px!important}
  .slot-picker-cost{padding:3px 5px}
  .slot-picker-cost img{width:12px!important;height:12px!important}
  .slot-picker-cost b{font-size:8px}
}

/* v0.6.46b switch-cost polish */
.selection-state{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.selection-cost-hint{padding:5px 8px;border-radius:999px;border:1px solid rgba(230,215,92,.18);background:rgba(220,205,75,.06);color:#e9dc79;font-size:9px;font-weight:900;letter-spacing:.05em;text-transform:none}.slot-pick-btn.paid-switch::before,.slot-pick-btn.paid-switch::after{content:none!important}.switch-cost-mini{position:absolute;left:3px;bottom:3px;display:flex;align-items:center;gap:1px;padding:1px 3px;border-radius:6px;background:rgba(5,16,20,.90);border:1px solid rgba(233,219,99,.18);z-index:4}.switch-cost-mini img{width:9px!important;height:9px!important;object-fit:contain!important}.switch-cost-mini b{font-size:7px;color:#eadb71;line-height:1}@media(max-width:720px){.selection-state{gap:6px}.selection-cost-hint{font-size:8px;padding:4px 6px}.switch-cost-mini{left:2px;bottom:2px;padding:1px 2px}.switch-cost-mini img{width:8px!important;height:8px!important}.switch-cost-mini b{font-size:6px}}


/* === v0.6.47 repair: standalone laboratory control + contained mutation upgrade UI === */
/* The lab entry is a standalone icon, never part of the resource panel. */
.match-lab-fab{
  position:fixed!important;
  z-index:40!important;
  left:92px!important;
  bottom:72px!important;
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  min-height:52px!important;
  padding:8px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  border-radius:16px!important;
  border:1px solid rgba(133,223,244,.28)!important;
  background:linear-gradient(180deg,rgba(10,31,43,.96),rgba(5,16,24,.98))!important;
  box-shadow:0 12px 32px rgba(0,0,0,.36),inset 0 0 18px rgba(94,220,247,.05)!important;
  color:#effcff!important;
  font-size:0!important;
  line-height:0!important;
  cursor:pointer!important;
}
.match-lab-fab img{
  display:block!important;
  width:34px!important;
  height:34px!important;
  max-width:34px!important;
  max-height:34px!important;
  object-fit:contain!important;
  margin:0!important;
  padding:0!important;
  filter:drop-shadow(0 0 10px rgba(156,245,255,.18))!important;
}
.match-lab-fab:hover{border-color:rgba(159,238,255,.55)!important;box-shadow:0 14px 36px rgba(0,0,0,.39),0 0 18px rgba(77,218,255,.09)!important}

/* Resource panel has only the two resources on mobile. Lab is separate. */
@media(max-width:899px){
  .left-panel{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .left-panel .left-lab-panel{display:none!important}
}

/* Keep the biomass icon inside the mutation-upgrade control; never allow intrinsic asset size to escape. */
.mini-gene{overflow:hidden!important}
.mini-gene-main{width:100%!important;min-width:0!important}
.match-gene-upgrade{
  position:static!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:31px!important;
  min-height:31px!important;
  padding:4px 7px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:6px!important;
  overflow:hidden!important;
}
.match-gene-upgrade .upgrade-copy{min-width:0!important;overflow:hidden!important;white-space:nowrap!important}
.match-gene-upgrade .upgrade-cost{flex:0 0 auto!important}
.match-gene-upgrade .upgrade-cost img,
.match-gene-upgrade img{
  display:block!important;
  width:13px!important;
  height:13px!important;
  min-width:13px!important;
  min-height:13px!important;
  max-width:13px!important;
  max-height:13px!important;
  object-fit:contain!important;
}

@media(max-width:720px){
  .match-lab-fab{
    left:10px!important;
    bottom:72px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    padding:6px!important;
    border-radius:13px!important;
  }
  .match-lab-fab img{
    width:30px!important;height:30px!important;max-width:30px!important;max-height:30px!important;
  }
  .bottom-panel .mini-gene{overflow:hidden!important}
  .bottom-panel .match-gene-upgrade{
    width:100%!important;
    height:20px!important;
    min-height:20px!important;
    padding:2px 4px!important;
    gap:3px!important;
    border-radius:7px!important;
  }
  .bottom-panel .match-gene-upgrade .upgrade-cost img,
  .bottom-panel .match-gene-upgrade img{
    width:10px!important;height:10px!important;min-width:10px!important;min-height:10px!important;max-width:10px!important;max-height:10px!important;
  }
}


/* === v0.6.48 free mutation switching ===
   Biomass is spent only on in-match level upgrades (I→II / II→III). */
.slot-picker-cost,
.selection-cost-hint,
.switch-cost-mini,
.slot-pick-btn.paid-switch::before,
.slot-pick-btn.paid-switch::after{display:none!important;content:none!important}
.slot-picker-head{justify-content:flex-start!important}

/* === v0.6.49 mutation UI + mobile resource row repair ===
   - mutation switching stays free
   - no misleading lock marker in the match dock when the next lab tier is not researched
   - mobile DNA/biomass row remains directly below the top HUD */
@media (max-width:899px){
  .left-panel{
    grid-column:1!important;
    grid-row:2!important;
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
}

/* === v0.6.51 microscope v2: three render styles + transparent targeting === */
.match-microscope-fab{
  position:fixed;z-index:40;left:154px;bottom:72px;
  width:52px;height:52px;min-width:52px;min-height:52px;padding:8px;margin:0;
  display:grid;place-items:center;border-radius:16px;cursor:pointer;
  border:1px solid rgba(133,223,244,.28);
  background:linear-gradient(180deg,rgba(10,31,43,.96),rgba(5,16,24,.98));
  box-shadow:0 12px 32px rgba(0,0,0,.36),inset 0 0 18px rgba(94,220,247,.05);
  color:#dffaff;transition:.16s ease;
}
.match-microscope-fab img{width:34px;height:34px;display:block;filter:drop-shadow(0 0 10px rgba(156,245,255,.15))}
.match-microscope-fab:hover{border-color:rgba(159,238,255,.58);transform:translateY(-1px);box-shadow:0 14px 38px rgba(0,0,0,.38),0 0 22px rgba(77,218,255,.10)}
.match-microscope-fab.active{
  color:#8effbd;border-color:rgba(111,255,177,.72);
  background:linear-gradient(180deg,rgba(16,65,48,.95),rgba(6,34,31,.98));
  box-shadow:0 0 0 1px rgba(98,255,174,.08) inset,0 0 26px rgba(80,255,174,.18),0 12px 34px rgba(0,0,0,.38);
}
.match-microscope-fab.viewing:not(.active){
  color:#a9f2ff;border-color:rgba(121,224,245,.46);box-shadow:0 12px 34px rgba(0,0,0,.38),0 0 20px rgba(78,218,246,.09);
}
.playfield-wrap.microscope-targeting #gameCanvas{cursor:default}

.microscope-target-preview,
.microscope-source-marker{
  position:absolute;transform:translate(-50%,-50%);border-radius:999px;pointer-events:none;
}
.microscope-target-preview{
  z-index:11;width:86px;height:86px;
  border:2px solid rgba(219,252,255,.90);
  background:radial-gradient(circle at 38% 34%,rgba(235,253,255,.12),rgba(90,224,246,.045) 34%,rgba(0,0,0,0) 67%);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 0 0 5px rgba(93,231,255,.025),0 0 24px rgba(100,235,255,.16),inset 0 0 18px rgba(151,247,255,.05);
}
.microscope-target-preview::before{
  content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(190,244,253,.24);
}
.microscope-target-preview::after{
  content:"";position:absolute;width:11px;height:38px;border-radius:6px;
  left:78%;top:78%;transform:translate(-5%,-5%) rotate(-45deg);transform-origin:50% 0%;
  background:linear-gradient(180deg,rgba(211,250,255,.92),rgba(87,197,220,.92));
  box-shadow:0 0 0 1px rgba(8,30,40,.42) inset,0 0 9px rgba(104,231,255,.18);
}
.microscope-source-marker{
  z-index:11;width:30px;height:30px;border:1px solid rgba(202,250,255,.76);
  box-shadow:0 0 0 5px rgba(93,231,255,.07),0 0 22px rgba(100,235,255,.30),inset 0 0 12px rgba(151,247,255,.12);
}
.microscope-source-marker::before,.microscope-source-marker::after{display:none!important}

.microscope-overlay{
  position:absolute;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%);
  width:340px;height:340px;pointer-events:none;filter:drop-shadow(0 24px 44px rgba(0,0,0,.46));
}
.microscope-shell{
  position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;
  border:3px solid rgba(185,245,255,.72);
  background:radial-gradient(circle at 40% 32%,rgba(20,61,71,.96),rgba(2,17,24,.985) 66%,rgba(0,7,12,.995));
  box-shadow:0 0 0 8px rgba(63,168,194,.10),0 0 0 12px rgba(186,247,255,.07),inset 0 0 34px rgba(75,217,244,.10),0 0 38px rgba(83,220,248,.16);
}
.microscope-shell::before{
  content:"";position:absolute;inset:6px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(228,252,255,.18);box-shadow:inset 0 0 26px rgba(0,0,0,.22),inset 0 0 44px rgba(117,232,255,.04);
}
.microscope-shell::after{
  content:"";position:absolute;left:11%;top:11%;width:27%;height:27%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.17),rgba(255,255,255,0) 72%);opacity:.9;filter:blur(2px);
}
#microscopeCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:50%}
.microscope-glass-glint{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:
  radial-gradient(circle at 27% 19%,rgba(255,255,255,.16),transparent 18%),
  linear-gradient(128deg,transparent 10%,rgba(221,252,255,.13) 21%,transparent 33%);mix-blend-mode:screen;opacity:.62}
.microscope-meta{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  padding:5px 10px;border-radius:999px;border:1px solid rgba(154,235,250,.20);background:rgba(2,15,23,.68);backdrop-filter:blur(8px);
  color:rgba(220,250,255,.74);font-size:8px;font-weight:900;letter-spacing:.14em;pointer-events:none;
}
.microscope-meta strong{color:#86ffb1;font-size:10px;letter-spacing:.03em}
.microscope-meta em{font-style:normal;color:#9ce7f8;font-size:9px;letter-spacing:.04em;padding:2px 6px;border-radius:999px;border:1px solid rgba(146,228,244,.12);background:rgba(7,27,38,.62)}
.microscope-close{
  position:absolute;right:16px;top:16px;width:30px;height:30px;border-radius:999px;pointer-events:auto;cursor:pointer;
  border:1px solid rgba(179,242,255,.30);background:rgba(2,17,24,.78);color:#e8fbff;font-size:20px;line-height:1;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
}
.microscope-close:hover{border-color:rgba(207,250,255,.68);background:rgba(6,31,42,.92)}
.microscope-dev-row{margin-top:12px;padding-top:11px;border-top:1px solid rgba(118,218,244,.10)}
.microscope-mode-row{margin-top:10px}
.microscope-mode-buttons{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:360px}
.microscope-mode-btn{min-width:84px}

@media(max-width:720px){
  .match-microscope-fab{left:62px;bottom:72px;width:44px;height:44px;min-width:44px;min-height:44px;padding:6px;border-radius:13px}
  .match-microscope-fab img{width:30px;height:30px}
  .microscope-target-preview{width:74px;height:74px}
  .microscope-target-preview::before{width:48px;height:48px}
  .microscope-meta{bottom:12px}
  .microscope-close{right:12px;top:12px;width:28px;height:28px}
  .microscope-mode-buttons{max-width:100%;justify-content:flex-start}
}


/* === v0.6.61 desktop tool rail: lab / microscope / settings === */
.match-settings-fab{
  position:fixed;z-index:40;left:92px;bottom:196px;
  width:52px;height:52px;min-width:52px;min-height:52px;padding:8px;margin:0;
  display:grid;place-items:center;border-radius:16px;cursor:pointer;
  border:1px solid rgba(133,223,244,.28);
  background:linear-gradient(180deg,rgba(10,31,43,.96),rgba(5,16,24,.98));
  box-shadow:0 12px 32px rgba(0,0,0,.36),inset 0 0 18px rgba(94,220,247,.05);
  color:#dffaff;transition:.16s ease;
}
.match-settings-fab img{width:34px;height:34px;display:block;object-fit:contain;filter:drop-shadow(0 0 10px rgba(156,245,255,.15))}
.match-settings-fab:hover{border-color:rgba(159,238,255,.58);transform:translateY(-1px);box-shadow:0 14px 38px rgba(0,0,0,.38),0 0 22px rgba(77,218,255,.10)}

@media(min-width:721px){
  .match-lab-fab{left:92px!important;bottom:72px!important}
  .match-microscope-fab{left:92px!important;bottom:134px!important}
  .match-settings-fab{left:92px!important;bottom:196px!important}
}
@media(max-width:720px){
  .match-settings-fab{display:none!important}
}


/* === v0.6.62 parity / floating resources / mobile match upgrades === */
/* Resource cards float independently: remove the large enclosing plaque and section captions. */
.left-panel{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding:0!important;
}
.left-panel>.panel-group>.strip-title{display:none!important}
.left-panel>.panel-group{gap:0!important}
.left-panel .resource-card{margin:0!important}
.left-hint-panel{display:none!important}

/* Tools belong to the resource column and keep one canonical order. */
.match-tool-rail{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  margin-top:2px;
  width:100%;
}
.match-tool-rail .match-lab-fab,
.match-tool-rail .match-microscope-fab,
.match-tool-rail .match-settings-fab{
  position:relative!important;
  inset:auto!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  transform:none!important;
  margin:0!important;
  flex:0 0 auto!important;
}

@media(min-width:900px){
  .left-panel{
    left:18px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:228px!important;
    max-width:228px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
  }
  .left-panel .resource-card{width:100%!important}
  .match-tool-rail{padding-left:0!important}
  .match-tool-rail .match-lab-fab,
  .match-tool-rail .match-microscope-fab,
  .match-tool-rail .match-settings-fab{
    width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;
  }
}

@media(max-width:899px){
  /* Same functions on mobile: two floating resource cards, then the three tools. */
  .left-panel{
    grid-column:1!important;
    grid-row:2!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    align-items:start!important;
  }
  .left-panel>.panel-group{min-width:0!important}
  .left-panel .resource-card{height:54px!important;min-height:54px!important;border-radius:12px!important}
  .match-tool-rail{
    grid-column:1/-1!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:6px!important;
    margin-top:0!important;
    width:auto!important;
  }
  .match-tool-rail .match-lab-fab,
  .match-tool-rail .match-microscope-fab,
  .match-tool-rail .match-settings-fab{
    display:grid!important;
    width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;
    padding:5px!important;border-radius:12px!important;
  }
  .match-tool-rail .match-lab-fab img,
  .match-tool-rail .match-microscope-fab img,
  .match-tool-rail .match-settings-fab img{
    width:28px!important;height:28px!important;max-width:28px!important;max-height:28px!important;
  }
  /* settings is a real mobile function too */
  .match-settings-fab{display:grid!important}

  /* Mobile in-match mutation upgrades: same mechanic as desktop, compact presentation. */
  .bottom-panel{height:70px!important;min-height:70px!important;max-height:70px!important}
  .bottom-panel .gene-strip:first-child{width:83px!important;flex-basis:83px!important}
  .bottom-panel .player-slots{grid-template-columns:repeat(2,38px)!important;gap:3px!important;min-height:48px!important}
  .bottom-panel .player-slots .mini-gene{
    position:relative!important;
    width:38px!important;height:48px!important;min-width:38px!important;min-height:48px!important;
    padding:2px 2px 16px!important;
    display:block!important;
    overflow:visible!important;
  }
  .bottom-panel .player-slots .mini-gene-main{display:grid!important;place-items:center!important;height:29px!important}
  .bottom-panel .player-slots .mini-gene .orb{width:27px!important;height:27px!important}
  .bottom-panel .player-slots .match-gene-upgrade{
    position:absolute!important;
    left:2px!important;right:2px!important;bottom:2px!important;
    width:auto!important;max-width:none!important;
    height:13px!important;min-height:13px!important;
    padding:0 2px!important;border-radius:5px!important;gap:1px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    overflow:visible!important;
  }
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-copy,
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-cost{display:flex!important}
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-copy small{display:none!important}
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-copy b{display:block!important;font-size:6px!important;line-height:1!important}
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-cost{
    padding:0!important;border:0!important;background:transparent!important;gap:1px!important;
  }
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-cost img{
    display:block!important;width:7px!important;height:7px!important;min-width:7px!important;min-height:7px!important;
  }
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-cost b{display:block!important;font-size:6px!important;line-height:1!important}
  .bottom-panel .player-slots .match-gene-max{display:none!important}
}

/* === v0.6.63 contact-only battle colour + stable mobile mutation cards + open resources === */
/* DNA / biomass text lives directly on the game background. Only the icon keeps its glass tile. */
.left-panel .resource-card{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding:4px 0!important;
}
.left-panel .resource-icon-wrap{
  border:1px solid rgba(113,237,255,.26)!important;
  background:radial-gradient(circle at 50% 35%,rgba(23,74,88,.76),rgba(4,21,31,.88))!important;
  box-shadow:inset 0 0 18px rgba(103,246,255,.06),0 7px 18px rgba(0,0,0,.18)!important;
  overflow:hidden!important;
}
.left-panel .resource-copy{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.left-panel .resource-label,
.left-panel .resource-copy strong{
  text-shadow:0 2px 8px rgba(0,0,0,.58)!important;
}

/* On desktop the wrapper is layout-neutral and preserves the existing card appearance. */
.match-gene-action-zone{display:contents}

@media(max-width:899px){
  /* The mutation tile never changes size when an upgrade appears/disappears. */
  .bottom-panel .gene-strip:first-child{width:89px!important;flex-basis:89px!important}
  .bottom-panel .player-slots{
    grid-template-columns:repeat(2,41px)!important;
    gap:4px!important;
    min-height:50px!important;
  }
  .bottom-panel .player-slots .mini-gene{
    box-sizing:border-box!important;
    width:41px!important;height:50px!important;
    min-width:41px!important;max-width:41px!important;
    min-height:50px!important;max-height:50px!important;
    padding:2px!important;
    display:grid!important;
    grid-template-rows:30px 14px!important;
    row-gap:2px!important;
    align-items:center!important;
    overflow:visible!important;
  }
  .bottom-panel .player-slots .mini-gene-main{
    width:100%!important;height:30px!important;min-height:30px!important;
    display:grid!important;place-items:center!important;
    cursor:pointer!important;
  }
  .bottom-panel .player-slots .mini-gene .orb{
    width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;
  }
  .bottom-panel .player-slots .match-gene-action-zone{
    display:flex!important;
    width:100%!important;height:14px!important;min-height:14px!important;max-height:14px!important;
    align-items:center!important;justify-content:center!important;
    position:relative!important;
    pointer-events:none!important;
  }
  .bottom-panel .player-slots .match-gene-action-zone .match-gene-upgrade{
    pointer-events:auto!important;
    position:static!important;
    width:100%!important;height:14px!important;min-height:14px!important;max-height:14px!important;
    margin:0!important;padding:0 2px!important;
    border-radius:5px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    gap:1px!important;
    box-sizing:border-box!important;
  }
  .bottom-panel .player-slots .match-gene-action-zone.no-upgrade{
    visibility:hidden!important;
  }
  .bottom-panel .player-slots .match-gene-action-zone .match-gene-upgrade .upgrade-copy b,
  .bottom-panel .player-slots .match-gene-action-zone .match-gene-upgrade .upgrade-cost b{
    font-size:6px!important;line-height:1!important;
  }
  .bottom-panel .player-slots .match-gene-action-zone .match-gene-upgrade .upgrade-copy small{display:none!important}
  .bottom-panel .player-slots .match-gene-action-zone .match-gene-upgrade .upgrade-cost{
    padding:0!important;border:0!important;background:transparent!important;gap:1px!important;
  }
  .bottom-panel .player-slots .match-gene-action-zone .match-gene-upgrade .upgrade-cost img{
    width:7px!important;height:7px!important;min-width:7px!important;min-height:7px!important;
  }

  /* Keep resource rows visually open on mobile too. */
  .left-panel .resource-card{
    height:54px!important;min-height:54px!important;
    padding:3px 0!important;
  }
}

/* v0.6.63 mobile upgrade affordance: visible without changing tile geometry. */
@media(max-width:899px){
  .bottom-panel .gene-strip:first-child{width:95px!important;flex-basis:95px!important}
  .bottom-panel .player-slots{grid-template-columns:repeat(2,43px)!important;gap:4px!important;min-height:52px!important}
  .bottom-panel .player-slots .mini-gene{
    width:43px!important;height:52px!important;min-width:43px!important;max-width:43px!important;min-height:52px!important;max-height:52px!important;
    grid-template-rows:32px 15px!important;row-gap:1px!important;
  }
  .bottom-panel .player-slots .mini-gene-main{height:32px!important;min-height:32px!important}
  .bottom-panel .player-slots .mini-gene .orb{width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important}
  .bottom-panel .player-slots .match-gene-action-zone{height:15px!important;min-height:15px!important;max-height:15px!important}
  .bottom-panel .player-slots .match-gene-action-zone .match-gene-upgrade{height:15px!important;min-height:15px!important;max-height:15px!important}
  .bottom-panel .player-slots .match-gene-action-zone .match-gene-upgrade .upgrade-copy b,
  .bottom-panel .player-slots .match-gene-action-zone .match-gene-upgrade .upgrade-cost b{font-size:7px!important}
  .bottom-panel .player-slots .mini-gene.can-upgrade{border-color:rgba(223,213,93,.28)!important}
  .bottom-panel .player-slots .mini-gene.upgrade-affordable{box-shadow:0 0 0 1px rgba(238,226,89,.08) inset,0 0 12px rgba(233,216,73,.10)!important}
}

/* === v0.6.65 mobile visual parity + stable dock + open HUD === */
.upgrade-arrow{display:none}
.match-lab-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
}
.match-lab-stack .match-research-status{
  position:relative!important;
  inset:auto!important;
  top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  margin:0!important;
  transform:none!important;
  z-index:1!important;
}

@media(min-width:900px){
  .match-lab-stack{align-items:flex-start;width:100%}
  .match-lab-stack .match-research-status{
    min-height:30px!important;
    padding:4px 7px 4px 5px!important;
    border-radius:10px!important;
    max-width:104px;
  }
  .match-lab-stack .match-research-status img{width:21px!important;height:21px!important}
  .match-lab-stack .match-research-status span{font-size:9px!important}
}

@media(max-width:899px){
  /* No combined glass plaque on the mobile upper UI: every control floats on the game background. */
  .top-hud,
  .left-panel,
  .left-panel>.panel-group,
  .match-tool-rail{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .top-hud{
    padding:5px 4px 3px!important;
    border-radius:0!important;
  }
  .left-panel{
    padding:2px 4px 0!important;
    gap:3px 8px!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    align-items:start!important;
  }
  .left-panel>.panel-group{padding:0!important;margin:0!important;min-width:0!important}
  .left-panel>.panel-group:nth-child(1){justify-self:stretch!important}
  .left-panel>.panel-group:nth-child(2){justify-self:stretch!important}
  .left-panel .resource-card{
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    padding:2px 0!important;
    gap:8px!important;
  }
  .left-panel .dna-resource{justify-content:flex-start!important}
  .left-panel .biomass-resource{
    flex-direction:row-reverse!important;
    justify-content:flex-start!important;
  }
  .left-panel .biomass-resource .resource-copy{
    align-items:flex-end!important;
    text-align:right!important;
  }
  .left-panel .resource-icon-wrap{
    width:54px!important;height:54px!important;min-width:54px!important;flex:0 0 54px!important;
    border-radius:15px!important;
  }
  .left-panel .resource-icon{width:43px!important;height:43px!important}
  .left-panel .biomass-icon{width:44px!important;height:44px!important}
  .left-panel .resource-copy{min-width:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
  .left-panel .resource-label{font-size:9px!important;line-height:1!important}
  .left-panel .resource-copy strong{font-size:24px!important;line-height:1!important}
  .left-panel .biomass-mini-bar{width:72px!important;max-width:72px!important;margin-top:4px!important}

  /* Lab / microscope / settings remain separate floating buttons. Research timer sits under the lab. */
  .match-tool-rail{
    grid-column:1/-1!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:8px!important;
    margin:1px 0 0!important;
    padding:0!important;
    width:auto!important;
  }
  .match-lab-stack{width:58px!important;gap:3px!important}
  .match-tool-rail .match-lab-fab,
  .match-tool-rail .match-microscope-fab,
  .match-tool-rail .match-settings-fab{
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
    padding:6px!important;border-radius:13px!important;
  }
  .match-tool-rail .match-lab-fab img,
  .match-tool-rail .match-microscope-fab img,
  .match-tool-rail .match-settings-fab img{
    width:31px!important;height:31px!important;max-width:31px!important;max-height:31px!important;
  }
  .match-lab-stack .match-research-status{
    min-height:24px!important;
    height:24px!important;
    padding:2px 4px!important;
    gap:3px!important;
    border-radius:8px!important;
    max-width:72px!important;
    background:rgba(3,16,24,.72)!important;
  }
  .match-lab-stack .match-research-status img{width:17px!important;height:17px!important}
  .match-lab-stack .match-research-status span{font-size:8px!important}

  /* Stable one-level bottom dock. All actual buttons are square and share one baseline. */
  .bottom-panel{
    height:76px!important;min-height:76px!important;max-height:76px!important;
    padding:5px 6px 6px!important;
    display:flex!important;flex-direction:row!important;align-items:flex-end!important;justify-content:center!important;
    gap:7px!important;overflow:visible!important;
  }
  .bottom-panel .gene-strip,
  .bottom-panel .bot-gene-strip{
    width:92px!important;flex:0 0 92px!important;
    height:65px!important;min-height:65px!important;
    display:flex!important;flex-direction:column!important;justify-content:flex-end!important;
    overflow:visible!important;
  }
  .bottom-panel .strip-title{
    height:8px!important;line-height:8px!important;
    margin:0 0 15px!important;
    font-size:6px!important;letter-spacing:.045em!important;
    overflow:visible!important;
  }
  .bottom-panel .gene-slots,
  .bottom-panel .player-slots,
  .bottom-panel .bot-gene-slots{
    display:grid!important;
    grid-template-columns:repeat(2,42px)!important;
    gap:4px!important;
    min-height:42px!important;height:42px!important;
    align-items:end!important;
    overflow:visible!important;
  }
  .bottom-panel .mini-gene,
  .bottom-panel .empty-slot,
  .bottom-panel .locked-slot,
  .bottom-panel .player-slots .mini-gene{
    position:relative!important;
    box-sizing:border-box!important;
    width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important;
    padding:3px!important;border-radius:10px!important;
    display:grid!important;place-items:center!important;
    grid-template-rows:1fr!important;
    overflow:visible!important;
  }
  .bottom-panel .mini-gene-main,
  .bottom-panel .player-slots .mini-gene-main{
    width:100%!important;height:100%!important;min-height:0!important;
    display:grid!important;place-items:center!important;
  }
  .bottom-panel .mini-gene .orb,
  .bottom-panel .player-slots .mini-gene .orb{
    width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
  }

  /* Upgrade affordance lives ABOVE the mutation square: arrow + price + tiny biomass icon, no backing plate. */
  .bottom-panel .player-slots .match-gene-action-zone{
    position:absolute!important;
    left:0!important;right:0!important;top:-17px!important;
    width:42px!important;height:14px!important;min-height:14px!important;max-height:14px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    pointer-events:none!important;
    overflow:visible!important;
  }
  .bottom-panel .player-slots .match-gene-action-zone.no-upgrade{visibility:hidden!important}
  .bottom-panel .player-slots .match-gene-action-zone .match-gene-upgrade{
    pointer-events:auto!important;
    position:static!important;
    width:42px!important;height:14px!important;min-height:14px!important;max-height:14px!important;
    margin:0!important;padding:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;gap:3px!important;
    color:#f4e978!important;
    border:0!important;border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-copy{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    min-width:0!important;overflow:visible!important;
  }
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-copy small,
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-copy b{display:none!important}
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-arrow{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    font-size:13px!important;line-height:1!important;font-weight:1000!important;color:#fff08a!important;
    text-shadow:0 0 8px rgba(255,224,84,.34)!important;
  }
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-cost{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    flex-direction:row-reverse!important;
    gap:2px!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;
  }
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-cost b{
    display:inline!important;font-size:8px!important;line-height:1!important;color:#fff0a0!important;
  }
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-cost img{
    display:block!important;width:9px!important;height:9px!important;min-width:9px!important;min-height:9px!important;max-width:9px!important;max-height:9px!important;
  }
  .bottom-panel .player-slots .mini-gene.can-upgrade,
  .bottom-panel .player-slots .mini-gene.upgrade-affordable{
    box-shadow:none!important;
  }

  .bottom-panel .actions{
    display:grid!important;grid-template-columns:repeat(2,42px)!important;gap:4px!important;
    width:88px!important;flex:0 0 88px!important;height:42px!important;align-self:flex-end!important;
  }
  .bottom-panel .action{
    width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important;
    padding:0!important;border-radius:10px!important;display:grid!important;place-items:center!important;
  }
  .bottom-panel .action-icon{font-size:20px!important;line-height:1!important}
  .bottom-panel .action span:last-child{display:none!important}
  .bottom-panel #slotPicker,
  .bottom-panel #slotPicker.hidden{bottom:calc(78px + env(safe-area-inset-bottom))!important}
}

@media(max-width:380px){
  .bottom-panel{gap:4px!important;padding-left:4px!important;padding-right:4px!important}
  .bottom-panel .gene-strip,.bottom-panel .bot-gene-strip{width:82px!important;flex-basis:82px!important}
  .bottom-panel .gene-slots,.bottom-panel .player-slots,.bottom-panel .bot-gene-slots{grid-template-columns:repeat(2,39px)!important;gap:3px!important}
  .bottom-panel .mini-gene,.bottom-panel .empty-slot,.bottom-panel .locked-slot,.bottom-panel .player-slots .mini-gene{width:39px!important;height:39px!important;min-width:39px!important;min-height:39px!important;max-width:39px!important;max-height:39px!important}
  .bottom-panel .mini-gene .orb,.bottom-panel .player-slots .mini-gene .orb{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important}
  .bottom-panel .player-slots .match-gene-action-zone,.bottom-panel .player-slots .match-gene-action-zone .match-gene-upgrade{width:39px!important}
  .bottom-panel .actions{grid-template-columns:repeat(2,39px)!important;gap:3px!important;width:81px!important;flex-basis:81px!important}
  .bottom-panel .action{width:39px!important;height:39px!important;min-width:39px!important;min-height:39px!important;max-width:39px!important;max-height:39px!important}
}

/* === v0.6.66 mobile HUD cleanup + icon sizing === */
@media(max-width:899px){
  /* Keep the glass plaque only for the true top HUD line. */
  .top-hud{
    background:linear-gradient(180deg,rgba(4,22,33,.92),rgba(2,12,20,.94))!important;
    border:1px solid rgba(120,218,245,.18)!important;
    box-shadow:0 16px 42px rgba(0,0,0,.22),inset 0 0 0 1px rgba(119,218,241,.04)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    padding:6px 8px 5px!important;
    border-radius:16px!important;
  }
  .left-panel,
  .left-panel>.panel-group,
  .match-tool-rail{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  /* Smaller icon tiles on mobile: same visual size as lab/microscope/settings buttons. */
  .left-panel{
    padding:3px 4px 0!important;
    gap:3px 10px!important;
    align-items:start!important;
  }
  .left-panel .resource-card{
    width:100%!important;
    height:56px!important;
    min-height:56px!important;
    gap:8px!important;
    padding:2px 0!important;
    align-items:center!important;
  }
  .left-panel .resource-icon-wrap{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    flex:0 0 44px!important;
    border-radius:12px!important;
  }
  .left-panel .resource-icon,
  .left-panel .biomass-icon{
    width:31px!important;
    height:31px!important;
  }
  .left-panel .resource-copy strong{
    font-size:22px!important;
    line-height:1!important;
  }
  .left-panel .resource-label{font-size:9px!important;line-height:1!important}
  .left-panel .resource-copy{gap:1px!important}

  /* Mirror biomass against DNA for clean symmetry. */
  .left-panel .dna-resource{justify-content:flex-start!important}
  .left-panel .biomass-resource{
    flex-direction:row-reverse!important;
    justify-content:flex-start!important;
  }
  .left-panel .biomass-resource .resource-copy{
    align-items:flex-start!important;
    text-align:left!important;
  }
  .left-panel .biomass-resource .resource-icon-wrap{margin-left:auto!important}
  .left-panel .biomass-mini-bar{width:70px!important;max-width:70px!important;margin-top:3px!important}

  /* Tool buttons stay as independent floating controls below the resources. */
  .match-tool-rail{
    margin-top:1px!important;
    gap:8px!important;
    align-items:flex-start!important;
  }
  .match-lab-stack{width:54px!important;align-items:flex-start!important;gap:4px!important}
  .match-tool-rail .match-lab-fab,
  .match-tool-rail .match-microscope-fab,
  .match-tool-rail .match-settings-fab{
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
    padding:6px!important;border-radius:13px!important;
  }
  .match-tool-rail .match-lab-fab img,
  .match-tool-rail .match-microscope-fab img,
  .match-tool-rail .match-settings-fab img{
    width:31px!important;height:31px!important;max-width:31px!important;max-height:31px!important;
  }
  .match-lab-stack .match-research-status{
    min-height:24px!important;height:24px!important;padding:2px 4px!important;gap:3px!important;
    border-radius:8px!important;max-width:74px!important;background:rgba(3,16,24,.72)!important;
  }
  .match-lab-stack .match-research-status img{width:17px!important;height:17px!important}
  .match-lab-stack .match-research-status span{font-size:8px!important}
}

/* === v0.6.75 mobile corrective rollback: UI only, original single game canvas === */
.biomass-mini-bar{display:none!important}
.match-gene-upgrade.affordable{animation:petriUpgradePulse75 1.2s ease-in-out infinite}
.match-gene-upgrade.affordable .upgrade-arrow{animation:petriUpgradeArrow75 1.2s ease-in-out infinite}
@keyframes petriUpgradePulse75{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.08);opacity:1}}
@keyframes petriUpgradeArrow75{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}

@media(max-width:899px){
  /* Do not re-enable live backdrop blur over the animated game on Android. */
  .top-hud{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:linear-gradient(180deg,rgba(4,22,33,.94),rgba(2,12,20,.96))!important;
  }

  /* DNA left, biomass mirrored on the right; text remains attached to its icon. */
  .left-panel>.panel-group:nth-child(1){justify-self:start!important;width:auto!important}
  .left-panel>.panel-group:nth-child(2){justify-self:end!important;width:auto!important}
  .left-panel .dna-resource{width:auto!important;justify-content:flex-start!important}
  .left-panel .biomass-resource{
    width:auto!important;
    flex-direction:row-reverse!important;
    justify-content:flex-start!important;
    gap:7px!important;
  }
  .left-panel .biomass-resource .resource-icon-wrap{margin:0!important}
  .left-panel .biomass-resource .resource-copy{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    align-items:flex-end!important;
    text-align:right!important;
  }
  .left-panel .biomass-resource .resource-label,
  .left-panel .biomass-resource .resource-copy strong,
  .left-panel .biomass-resource .resource-copy small{text-align:right!important}

  /* One fixed 44px rail. Timer shares the same left vertical line as the lab button. */
  .match-tool-rail{
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:8px!important;
  }
  .match-lab-stack{
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    flex:0 0 44px!important;
    align-items:flex-start!important;
    gap:8px!important;
  }
  .match-tool-rail .match-lab-fab,
  .match-tool-rail .match-microscope-fab,
  .match-tool-rail .match-settings-fab{
    flex:0 0 44px!important;
    width:44px!important;height:44px!important;
    min-width:44px!important;min-height:44px!important;
    max-width:44px!important;max-height:44px!important;
    margin:0!important;
    display:grid!important;place-items:center!important;
  }
  .match-lab-stack .match-research-status{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    margin:0!important;
    width:max-content!important;
    max-width:76px!important;
    align-self:flex-start!important;
  }

  /* Upgrade hint above a mutation has no backing plate. */
  .bottom-panel .player-slots .match-gene-action-zone{
    position:absolute!important;
    left:0!important;right:0!important;top:-17px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    pointer-events:none!important;overflow:visible!important;
  }
  .bottom-panel .player-slots .match-gene-action-zone.no-upgrade{visibility:hidden!important}
  .bottom-panel .player-slots .match-gene-action-zone .match-gene-upgrade{
    pointer-events:auto!important;
    position:static!important;
    margin:0!important;padding:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;gap:3px!important;
    border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  }
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-copy small,
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-copy b{display:none!important}
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-arrow{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    font-size:13px!important;line-height:1!important;font-weight:1000!important;color:#fff08a!important;
    text-shadow:0 0 8px rgba(255,224,84,.34)!important;
  }
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-cost{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    flex-direction:row-reverse!important;gap:2px!important;padding:0!important;margin:0!important;
    border:0!important;background:transparent!important;
  }
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-cost b{font-size:8px!important;color:#fff0a0!important}
  .bottom-panel .player-slots .match-gene-upgrade .upgrade-cost img{width:9px!important;height:9px!important}
}


/* === v0.6.77 mobile core cleanup === */
@media (pointer:coarse) and (max-width:900px){
  /* Always keep a visible blue/grey broth background, even before the ambient
     sprite set switches from menu to the selected match mutation. */
  .app-shell{
    background:
      radial-gradient(circle at 50% 34%,rgba(14,65,78,.26),transparent 48%),
      radial-gradient(circle at 12% 72%,rgba(23,92,91,.16),transparent 32%),
      linear-gradient(180deg,#041923 0%,#020b11 72%,#01070b 100%)!important;
  }

  /* Android/Yandex: never ask the compositor to live-blur a continuously
     animated canvas behind interactive match controls. */
  .top-hud,
  .bottom-panel,
  .collision-prompt,
  .collision-card,
  .collision-mini-card,
  .slot-picker,
  .match-research-status,
  .dev-settings-modal,
  .modal-backdrop{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}

/* v0.6.79: mobile match baseline must never depend on the ambient canvas for its broth colour. */
@media (max-width:899px){
  .app-shell{
    background:
      radial-gradient(circle at 50% 34%,rgba(14,65,78,.26),transparent 48%),
      radial-gradient(circle at 12% 72%,rgba(23,92,91,.16),transparent 32%),
      linear-gradient(180deg,#041923 0%,#020b11 72%,#01070b 100%)!important;
  }
  .app-shell>.playfield-wrap{
    background:radial-gradient(circle at 50% 48%,rgba(19,70,82,.14),rgba(4,18,27,.07) 58%,rgba(0,0,0,0) 100%)!important;
  }
  .top-hud,.bottom-panel,.collision-prompt,.collision-card,.collision-mini-card,.slot-picker,.match-research-status,.dev-settings-modal,.modal-backdrop{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
}

/* === v0.6.81 mobile: remove the dead resource-row background zone ===
   Keep one v0.6.58-style game canvas. It now spans behind the resource/tools row,
   so the same ambient mutations can pass underneath DNA / biomass / tools. */
@media (max-width:899px){
  .playfield-wrap{
    grid-column:1!important;
    grid-row:2 / 4!important;
    z-index:1!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:transparent!important;
  }
  .left-panel{
    grid-column:1!important;
    grid-row:2!important;
    z-index:22!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .left-panel>.panel-group,
  .match-tool-rail{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  #gameCanvas{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    background:transparent!important;
  }
}

/* === v0.6.82 match result screens === */
.match-result-overlay{
  position:fixed;
  inset:0;
  z-index:5200;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,7,11,.72);
}
.match-result-card{
  --result-accent:#69ff9a;
  --result-accent-rgb:105,255,154;
  position:relative;
  isolation:isolate;
  width:min(650px,calc(100vw - 28px));
  max-height:92dvh;
  overflow:auto;
  padding:24px 28px 26px;
  border:1px solid rgba(var(--result-accent-rgb),.34);
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 26%,rgba(var(--result-accent-rgb),.11),transparent 37%),
    linear-gradient(180deg,rgba(5,25,35,.97),rgba(2,11,18,.985));
  box-shadow:0 34px 110px rgba(0,0,0,.62),0 0 54px rgba(var(--result-accent-rgb),.08),inset 0 1px rgba(255,255,255,.06);
  text-align:center;
}
.match-result-card.result-defeat{
  --result-accent:#ff697b;
  --result-accent-rgb:255,105,123;
}
.match-result-kicker{
  position:relative;
  z-index:2;
  color:rgba(185,226,236,.68);
  font-size:9px;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.match-result-card h2{
  position:relative;
  z-index:2;
  margin:5px 0 0;
  color:var(--result-accent);
  font-size:clamp(40px,7vw,62px);
  line-height:.95;
  letter-spacing:.035em;
  text-shadow:0 0 26px rgba(var(--result-accent-rgb),.25);
}
.match-result-subtitle{
  position:relative;
  z-index:2;
  margin-top:9px;
  color:#ebfbff;
  font-size:clamp(16px,2.4vw,21px);
  font-weight:850;
}
.match-result-art-wrap{
  position:relative;
  z-index:1;
  width:min(310px,64vw);
  aspect-ratio:1/1;
  margin:3px auto -4px;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.match-result-art-glow{
  position:absolute;
  inset:17%;
  border-radius:50%;
  background:rgba(var(--result-accent-rgb),.13);
  filter:blur(30px);
}
.match-result-art{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.32));
}
.match-result-text{
  position:relative;
  z-index:2;
  max-width:520px;
  margin:0 auto 15px;
  color:rgba(224,246,251,.82);
  font-size:13px;
  line-height:1.52;
}
.match-result-reward{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  margin:0 auto 19px;
  padding:7px 16px 7px 9px;
  border:1px solid rgba(var(--result-accent-rgb),.18);
  border-radius:17px;
  background:rgba(4,18,25,.72);
  box-shadow:inset 0 0 20px rgba(var(--result-accent-rgb),.035);
}
.match-result-reward img{
  width:45px;
  height:45px;
  object-fit:contain;
}
.match-result-reward div{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
}
.match-result-reward span{
  color:rgba(184,218,226,.58);
  font-size:7px;
  font-weight:900;
  letter-spacing:.16em;
}
.match-result-reward strong{
  color:var(--result-accent);
  font-size:23px;
  line-height:1;
  text-shadow:0 0 14px rgba(var(--result-accent-rgb),.18);
}
.match-result-actions{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.08fr 1fr 1fr;
  gap:9px;
}
.match-result-btn{
  min-width:0;
  height:50px;
  padding:0 13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:14px;
  border:1px solid rgba(128,221,245,.25);
  background:linear-gradient(180deg,rgba(10,35,47,.94),rgba(4,17,25,.98));
  color:#ecfbff;
  font:inherit;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 9px 24px rgba(0,0,0,.18);
}
.match-result-btn img{
  width:24px;
  height:24px;
  object-fit:contain;
  flex:0 0 24px;
}
.match-result-btn.result-primary{
  border-color:rgba(79,255,132,.58);
  background:linear-gradient(180deg,rgba(23,151,77,.94),rgba(7,79,47,.98));
  box-shadow:0 0 24px rgba(68,255,123,.11),inset 0 1px rgba(255,255,255,.08);
}
.match-result-btn.result-lab{
  border-color:rgba(112,229,255,.38);
}
.result-menu-mark{
  display:grid;
  place-items:center;
  width:29px;
  height:24px;
  border:1px solid rgba(155,231,247,.19);
  border-radius:7px;
  color:#9defff;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.08em;
}
.match-result-btn:hover{transform:translateY(-1px);border-color:rgba(156,239,255,.55)}
.match-result-btn.result-primary:hover{border-color:rgba(116,255,158,.8);box-shadow:0 0 30px rgba(68,255,123,.18)}

@media(max-width:640px){
  .match-result-overlay{padding:10px}
  .match-result-card{
    width:min(96vw,520px);
    max-height:94dvh;
    padding:18px 14px 15px;
    border-radius:22px;
  }
  .match-result-card h2{font-size:39px}
  .match-result-subtitle{margin-top:7px;font-size:15px}
  .match-result-art-wrap{width:min(225px,58vw);margin:1px auto -6px}
  .match-result-text{max-width:390px;margin-bottom:11px;font-size:11px;line-height:1.42}
  .match-result-reward{min-height:48px;margin-bottom:12px;padding:5px 12px 5px 7px;border-radius:14px}
  .match-result-reward img{width:37px;height:37px}
  .match-result-reward strong{font-size:20px}
  .match-result-actions{grid-template-columns:1fr;gap:6px}
  .match-result-btn{height:43px;font-size:10px;border-radius:12px}
  .match-result-btn img{width:22px;height:22px;flex-basis:22px}
}

@media (pointer:coarse) and (max-width:900px){
  .match-result-overlay{background:rgba(0,7,11,.78)}
}
.match-result-overlay:not(.hidden) + .toast{z-index:5300}

/* === v0.6.83 laboratory simplification + first-collision cleanup === */
/* Laboratory catalog: match activity is a small green point, not another text chip. */
.lab-gene-card{position:relative!important}
.lab-active-match-dot{
  position:absolute;right:10px;top:10px;z-index:8;
  width:8px;height:8px;border-radius:50%;
  background:#67ff91;box-shadow:0 0 0 3px rgba(103,255,145,.08),0 0 13px rgba(103,255,145,.72);
}
.lab-gene-card.active-in-match{border-color:rgba(103,255,145,.22)}

/* The focus card owns the effect strength; the four duplicate summary boxes are gone. */
.lab-focus-copy{min-width:0}
.lab-focus-strength{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(213,245,251,.56)}
.lab-focus-strength strong{font-size:14px;letter-spacing:0;color:#effdff}

/* Every level is self-contained: description + one concise state in the corner. */
.lab-level-effect-row{padding-right:82px!important}
.lab-level-state{
  position:absolute;right:9px;top:9px;z-index:5;
  padding:3px 6px;border-radius:999px;
  font-size:7px;line-height:1;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(157,225,242,.15);background:rgba(3,14,21,.64);color:rgba(218,245,251,.58);
  pointer-events:none;
}
.lab-level-state.learned{color:#8dffae;border-color:rgba(103,255,145,.25);background:rgba(16,77,42,.24)}
.lab-level-state.available{color:#f1fdff;border-color:rgba(160,234,251,.28);background:rgba(23,54,66,.44)}
.lab-level-state.researching{color:#87f4ff;border-color:rgba(106,226,255,.34);background:rgba(18,73,88,.38)}
.lab-level-state.locked{color:rgba(219,232,236,.44);border-color:rgba(167,192,200,.12);background:rgba(20,28,32,.42)}
.lab-level-effect-row.available{opacity:.92!important;filter:none!important;background:linear-gradient(180deg,rgba(10,29,39,.72),rgba(5,18,26,.64))!important}
.lab-level-effect-row.learned{opacity:1!important}
.lab-level-effect-row.locked{opacity:.48!important;filter:saturate(.46)!important}
.lab-level-effect-row.researching{border-color:rgba(96,226,255,.33)!important;box-shadow:inset 0 0 18px rgba(84,220,255,.05)!important}
.lab-level-lock{background:rgba(1,9,14,.52)!important}

/* Starting a research is shown only while the actually available next level is inspected. */
.lab-research-start-box{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;gap:12px!important;align-items:center!important}
.lab-research-start-copy h4{margin:0 0 4px!important}
.lab-research-start-copy p{margin:0!important}
.lab-research-start-meta{display:flex;align-items:center;gap:7px;white-space:nowrap}
.lab-research-start-meta span{padding:5px 8px;border-radius:999px;border:1px solid rgba(126,219,241,.14);background:rgba(5,18,27,.58);font-size:9px;color:rgba(221,247,252,.72)}
.lab-research-start-meta b{color:#f3fdff}
.lab-research-start-box .lab-btn{width:auto!important;white-space:nowrap}

/* Running research is its own compact plaque: mutation icon + target level + remaining time. */
.lab-research-standalone{display:grid!important;grid-template-columns:62px minmax(0,1fr)!important;gap:12px!important;align-items:center!important}
.lab-running-research-icon{width:62px;height:62px;display:grid;place-items:center;border-radius:16px;background:radial-gradient(circle at 50% 50%,rgba(27,61,76,.66),rgba(5,17,25,.94));position:relative;overflow:hidden}
.lab-running-research-icon img{width:48px;height:48px;object-fit:contain}
.lab-running-research-copy{min-width:0}
.lab-running-research-copy h4{margin:0 0 4px!important;font-size:14px!important}
.lab-running-research-copy p{margin:0 0 8px!important}
.lab-running-research-copy .lab-btn{margin-top:8px!important;width:auto!important}

/* First collision: the first prompt is only the asset + text, with no dark backing plate. */
.collision-mini-prompt{transform:translate(-50%,-72%)!important}
.collision-mini-ring{display:none!important}
.collision-mini-card{
  min-width:0!important;padding:0!important;gap:2px!important;
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  overflow:visible!important;color:#f1fdff!important;
  animation:collisionPromptPulse 1.15s ease-in-out infinite!important;
}
.collision-mini-icon{width:78px!important;height:52px!important;object-fit:contain!important;border-radius:0!important;animation:collisionFloat 1.45s ease-in-out infinite!important;filter:drop-shadow(0 0 12px rgba(139,245,255,.20))!important}
.collision-mini-title{font-size:11px!important;line-height:1.08!important;font-weight:950!important;text-shadow:0 2px 5px rgba(0,0,0,.95),0 0 9px rgba(102,226,255,.20)}
.collision-mini-hint{font-size:8px!important;color:#b8e4ed!important;text-shadow:0 2px 5px rgba(0,0,0,.95)}
@keyframes collisionPromptPulse{0%,100%{opacity:.82;scale:.97}50%{opacity:1;scale:1.04}}

/* The second collision card has one backing plate only: the outer positioning wrapper is transparent. */
.collision-prompt{
  padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.collision-card-compact{
  border:1px solid rgba(123,226,245,.28)!important;
  background:linear-gradient(180deg,rgba(5,24,36,.96),rgba(3,14,22,.94))!important;
  box-shadow:0 18px 58px rgba(0,0,0,.34),0 0 22px rgba(76,220,255,.07)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

@media(max-width:899px){
  .lab-active-match-dot{right:5px;top:5px;width:7px;height:7px}
  .lab-focus-strength{margin-top:5px;font-size:7px;gap:5px}
  .lab-focus-strength strong{font-size:10px}
  .lab-level-effect-row{padding-right:68px!important}
  .lab-level-state{right:6px;top:6px;padding:2px 4px;font-size:6px}
  .lab-research-start-box{grid-template-columns:1fr!important;gap:6px!important}
  .lab-research-start-meta{gap:4px;flex-wrap:wrap}
  .lab-research-start-meta span{font-size:8px;padding:4px 6px}
  .lab-research-start-box .lab-btn{width:100%!important}
  .lab-research-standalone{grid-template-columns:48px minmax(0,1fr)!important;gap:8px!important}
  .lab-running-research-icon{width:48px;height:48px;border-radius:12px}
  .lab-running-research-icon img{width:37px;height:37px}
  .lab-running-research-copy h4{font-size:11px!important}
  .lab-running-research-copy p{font-size:9px!important;margin-bottom:6px!important}
  .lab-running-research-copy .lab-btn{width:100%!important;margin-top:6px!important}
  .collision-mini-prompt{transform:translate(-50%,-68%)!important}
  .collision-mini-icon{width:66px!important;height:44px!important}
  .collision-mini-title{font-size:10px!important}
  .collision-mini-hint{font-size:7px!important}
}
/* v0.6.83 final lab readability: the three research levels stay as full-width rows on desktop too. */
.lab-level-effects{grid-template-columns:1fr!important}

/* === v0.6.84 mobile menu feedback + first-collision prompt refinement === */
/* Menu notices must never sit underneath the fixed main menu. */
.toast{z-index:5600!important}

/* Play visibly acknowledges the tap while the remaining game assets finish warming. */
#menuPlayBtn.loading{opacity:.86!important;cursor:progress!important}
#menuPlayBtn.loading .menu-action-icon{animation:petriPlayLoading .8s linear infinite}
@keyframes petriPlayLoading{to{transform:rotate(360deg)}}

/* First collision: only the asset pulses/floats. The small Нажми control stays stable. */
.collision-mini-prompt{transform:translate(-50%,-56%)!important}
.collision-mini-card{
  animation:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
}
.collision-mini-icon{
  width:104px!important;
  height:70px!important;
  object-fit:contain!important;
  animation:collisionAssetAttention 1.35s ease-in-out infinite!important;
  transform-origin:center bottom!important;
  filter:drop-shadow(0 0 15px rgba(139,245,255,.25))!important;
}
.collision-mini-title{display:none!important}
.collision-mini-hint{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:58px!important;
  height:25px!important;
  padding:0 11px!important;
  border-radius:999px!important;
  border:1px solid rgba(133,226,245,.42)!important;
  background:rgba(5,24,34,.88)!important;
  color:#eaffff!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.05em!important;
  text-shadow:none!important;
  box-shadow:0 5px 15px rgba(0,0,0,.24),0 0 10px rgba(74,218,255,.06)!important;
  animation:none!important;
}
@keyframes collisionAssetAttention{
  0%,100%{transform:translateY(3px) scale(.98);opacity:.76}
  50%{transform:translateY(-5px) scale(1.03);opacity:1}
}

@media(max-width:899px){
  .collision-mini-prompt{transform:translate(-50%,-52%)!important}
  .collision-mini-icon{width:88px!important;height:60px!important}
  .collision-mini-hint{min-width:54px!important;height:23px!important;font-size:8px!important;padding:0 9px!important}
}

/* === v0.6.85 mobile touch feedback cleanup + collision hit target === */
@media (pointer:coarse), (max-width:899px){
  /* Android/Yandex browser blue tap rectangles are browser feedback, not PETRI UI. */
  button,
  [role="button"],
  .gene-card,
  .gene-select-area,
  .mini-gene,
  .empty-slot,
  .locked-slot,
  .slot-pick-btn,
  .collision-mini-prompt,
  .collision-mini-card,
  .collision-mini-icon,
  .collision-mini-hint{
    -webkit-tap-highlight-color:transparent!important;
    -webkit-touch-callout:none!important;
  }
  button:focus,
  .gene-select-area:focus,
  .slot-pick-btn:focus,
  .mini-gene:focus,
  .collision-mini-card:focus{
    outline:none!important;
  }
  button:focus-visible,
  .slot-pick-btn:focus-visible,
  .collision-mini-card:focus-visible{
    outline:none!important;
  }

  /* First-collision visual stays unchanged; the invisible hit target is larger. */
  .collision-mini-card{
    position:relative!important;
    touch-action:manipulation!important;
    min-width:112px!important;
    min-height:96px!important;
  }
  .collision-mini-card::before{
    content:"";
    position:absolute;
    inset:-14px -18px;
    border-radius:22px;
    background:transparent;
    pointer-events:auto;
  }

  /* Mutation buttons should react as one whole touch target, not only their artwork. */
  .gene-card .gene-select-area,
  .slot-pick-btn,
  .bottom-panel .player-slots .mini-gene-main{
    touch-action:manipulation!important;
  }
}

/* v0.6.87 — evolution ladder */
#mainMenu #menuEvolutionBtn.menu-evolution-btn{
  position:absolute!important;
  left:50%!important;
  top:calc(env(safe-area-inset-top, 0px) + 14px)!important;
  transform:translateX(-50%)!important;
  z-index:8!important;
  min-width:232px;
  min-height:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:10px 18px;
  border-radius:18px;
  border:1px solid rgba(122,227,255,.38);
  background:linear-gradient(180deg, rgba(5,25,37,.84), rgba(4,15,23,.90));
  color:#ecfdff;
  box-shadow:0 16px 34px rgba(0,0,0,.28), 0 0 24px rgba(43,208,255,.08);
  cursor:pointer;
}
#mainMenu #menuEvolutionBtn:hover,
#mainMenu #menuEvolutionBtn:focus-visible{
  border-color:rgba(139,242,255,.66);
  box-shadow:0 18px 36px rgba(0,0,0,.32), 0 0 28px rgba(43,208,255,.14);
  outline:none;
}
#mainMenu #menuEvolutionBtn .menu-evolution-label{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#83deef;
  font-weight:800;
}
#mainMenu #menuEvolutionBtn strong{
  font-size:20px;
  line-height:1.05;
  color:#f4feff;
}

.hud-evolution-chip{
  margin-top:10px;
  min-width:132px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  padding:8px 12px;
  border-radius:14px;
  border:1px solid rgba(123,227,255,.26);
  background:rgba(4,18,28,.54);
  color:#eafdff;
  cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hud-evolution-chip:hover,
.hud-evolution-chip:focus-visible{
  border-color:rgba(143,241,255,.56);
  box-shadow:0 0 18px rgba(54,214,255,.12);
  transform:translateY(-1px);
  outline:none;
}
.hud-evolution-chip span{
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#81dff2;
  font-weight:800;
}
.hud-evolution-chip strong{
  font-size:16px;
  line-height:1.1;
  color:#f1feff;
}

.evolution-backdrop{
  position:fixed;
  inset:0;
  z-index:4200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px;
  background:rgba(2,10,15,.72);
  backdrop-filter:blur(10px);
}
.evolution-card{
  width:min(980px, 100%);
  max-height:min(92dvh, 920px);
  overflow:auto;
  padding:28px 26px 24px;
}
.evolution-header{
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) minmax(260px, .8fr);
  gap:16px;
  align-items:start;
  margin-bottom:18px;
}
.evolution-copy h2{
  margin:6px 0 10px;
  font-size:clamp(28px, 4vw, 40px);
}
.evolution-copy p{
  margin:0;
  color:#b8dce5;
  line-height:1.45;
}
.evolution-summary{
  display:grid;
  gap:10px;
}
.evolution-summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(121,226,255,.18);
  background:rgba(3,15,23,.46);
}
.evolution-summary-row span{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#83deef;
}
.evolution-summary-row strong{
  font-size:18px;
  color:#f1feff;
  text-align:right;
}
.evolution-ladder{
  display:grid;
  gap:12px;
}
.evolution-step{
  display:grid;
  grid-template-columns:74px minmax(0, 1fr);
  gap:14px;
  align-items:stretch;
}
.evolution-step-marker{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:90px;
  border-radius:22px;
  border:1px solid rgba(121,226,255,.18);
  background:linear-gradient(180deg, rgba(7,30,44,.88), rgba(5,17,25,.9));
  font-size:30px;
  font-weight:900;
  color:#96f1ff;
  box-shadow:inset 0 0 18px rgba(25,131,172,.08);
}
.evolution-step-body{
  position:relative;
  padding:16px 18px 14px;
  border-radius:20px;
  border:1px solid rgba(121,226,255,.16);
  background:rgba(4,16,24,.72);
}
.evolution-step-top{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.evolution-step-kicker{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#7fdff0;
  font-weight:800;
  margin-bottom:4px;
}
.evolution-step h3{
  margin:0;
  font-size:24px;
  line-height:1.1;
}
.evolution-step p{
  margin:10px 0 0;
  color:#b8dce5;
  line-height:1.45;
}
.evolution-step-threshold{
  flex:0 0 auto;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(121,226,255,.18);
  background:rgba(3,14,21,.64);
  font-size:12px;
  font-weight:800;
  color:#ebfdff;
}
.evolution-step-footer{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:14px;
}
.evolution-step-status{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid rgba(120,226,255,.16);
  background:rgba(6,18,27,.58);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#dffcff;
}
.evolution-step-connector{
  flex:1 1 auto;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(72,227,140,.7), rgba(80,219,255,.18));
}
.evolution-step.is-current .evolution-step-marker,
.evolution-step.is-current .evolution-step-body{
  border-color:rgba(114,255,155,.44);
  box-shadow:0 0 0 1px rgba(114,255,155,.12), 0 0 24px rgba(67,227,116,.12);
}
.evolution-step.is-current .evolution-step-status{
  border-color:rgba(110,255,154,.38);
  color:#9cffbf;
}
.evolution-step.is-unlocked:not(.is-current) .evolution-step-marker{
  color:#86ecff;
}
.evolution-step.is-locked .evolution-step-marker,
.evolution-step.is-locked .evolution-step-body{
  opacity:.78;
  filter:saturate(.85);
}
.evolution-step.is-next .evolution-step-threshold{
  border-color:rgba(245,211,94,.45);
  color:#ffe07a;
}

@media (max-width: 900px){
  .evolution-header{grid-template-columns:1fr;}
}
@media (max-width: 720px){
  #mainMenu #menuEvolutionBtn.menu-evolution-btn{
    min-width:188px;
    min-height:50px;
    padding:8px 14px;
    top:calc(env(safe-area-inset-top, 0px) + 10px)!important;
  }
  #mainMenu #menuEvolutionBtn .menu-evolution-label{font-size:9px;}
  #mainMenu #menuEvolutionBtn strong{font-size:17px;}
  .hud-evolution-chip{
    margin-top:7px;
    min-width:104px;
    padding:6px 9px;
    border-radius:11px;
  }
  .hud-evolution-chip span{font-size:7px;}
  .hud-evolution-chip strong{font-size:13px;}
  .evolution-backdrop{padding:12px;}
  .evolution-card{padding:24px 16px 18px;}
  .evolution-step{grid-template-columns:56px minmax(0,1fr);gap:10px;}
  .evolution-step-marker{min-height:82px;font-size:24px;border-radius:18px;}
  .evolution-step-body{padding:14px 14px 12px;}
  .evolution-step h3{font-size:20px;}
  .evolution-step-top{flex-direction:column;gap:10px;}
}

/* v0.6.88 — evolution UI placement + visual pass */
#mainMenu .menu-evolution-link{
  position:absolute!important;
  z-index:7!important;
  left:4vw!important;
  top:calc(5.6vh + 82px)!important;
  width:auto!important;
  max-width:300px!important;
  min-height:42px!important;
  padding:4px 6px 4px 2px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#eefcff!important;
  text-align:left!important;
  cursor:pointer!important;
}
#mainMenu .menu-evolution-link>img{
  width:36px!important;
  height:36px!important;
  object-fit:contain!important;
  flex:0 0 36px!important;
  filter:drop-shadow(0 0 9px rgba(81,255,151,.22))!important;
}
#mainMenu .menu-evolution-copy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:2px!important;
}
#mainMenu .menu-evolution-copy small{
  color:#82ddec!important;
  font-size:9px!important;
  line-height:1!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
#mainMenu .menu-evolution-copy strong{
  color:#f5feff!important;
  font-size:13px!important;
  line-height:1.15!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
#mainMenu .menu-evolution-link:hover,
#mainMenu .menu-evolution-link:focus-visible{
  transform:translateX(2px)!important;
  outline:none!important;
}
#mainMenu .menu-evolution-link:hover .menu-evolution-copy strong,
#mainMenu .menu-evolution-link:focus-visible .menu-evolution-copy strong{color:#9dffc0!important}

/* Main-menu resource icons are always explicit and visible. */
#mainMenu .menu-biomass img,
#mainMenu .menu-dna img{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  object-fit:contain!important;
}

/* Match evolution entry: a compact clickable status, not a big button. */
.hud-evolution-link{
  margin-top:7px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  border:0!important;
  background:transparent!important;
  color:#edfaff!important;
  box-shadow:none!important;
  cursor:pointer!important;
  text-align:left!important;
}
.hud-evolution-link>img{
  width:28px!important;
  height:28px!important;
  object-fit:contain!important;
  flex:0 0 28px!important;
  filter:drop-shadow(0 0 7px rgba(84,255,154,.20))!important;
}
.hud-evolution-link>span{
  display:flex!important;
  flex-direction:column!important;
  gap:1px!important;
  min-width:0!important;
}
.hud-evolution-link small{
  font-size:7px!important;
  line-height:1!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  font-weight:850!important;
  color:#75d8ea!important;
}
.hud-evolution-link strong{
  font-size:11px!important;
  line-height:1.1!important;
  font-weight:850!important;
  color:#f1fdff!important;
  white-space:nowrap!important;
}
.hud-evolution-link:hover strong,
.hud-evolution-link:focus-visible strong{color:#9cffbd!important}
.hud-evolution-link:focus-visible{outline:none!important}

/* Evolution modal: distinct progression presentation instead of repeated flat cards. */
.evolution-backdrop{
  z-index:5700!important;
  padding:24px!important;
  background:
    radial-gradient(circle at 50% 12%,rgba(34,122,124,.17),transparent 34%),
    rgba(1,8,13,.80)!important;
}
.evolution-card{
  position:relative!important;
  width:min(930px,96vw)!important;
  max-height:min(92dvh,900px)!important;
  padding:28px 30px 30px!important;
  border:1px solid rgba(119,222,244,.26)!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 15% 0%,rgba(68,255,153,.07),transparent 26%),
    radial-gradient(circle at 90% 12%,rgba(70,214,255,.08),transparent 28%),
    linear-gradient(180deg,rgba(4,23,33,.985),rgba(2,12,19,.99))!important;
  box-shadow:0 34px 110px rgba(0,0,0,.60),0 0 64px rgba(56,210,241,.07)!important;
  overflow:auto!important;
}
.evolution-card>.close-btn{
  position:absolute!important;
  top:16px!important;
  right:16px!important;
  z-index:5!important;
  width:38px!important;
  height:38px!important;
}
.evolution-header{
  grid-template-columns:minmax(0,1.35fr) minmax(270px,.65fr)!important;
  gap:22px!important;
  margin:8px 48px 26px 0!important;
  align-items:end!important;
}
.evolution-copy h2{font-size:clamp(31px,4vw,46px)!important;letter-spacing:-.035em!important;margin:5px 0 8px!important}
.evolution-copy p{max-width:620px!important;color:#b5d5dd!important;font-size:13px!important}
.evolution-summary{gap:8px!important}
.evolution-summary-row{
  min-height:42px!important;
  padding:9px 12px!important;
  border-radius:13px!important;
  background:rgba(5,20,29,.58)!important;
  border-color:rgba(120,221,242,.15)!important;
}
.evolution-summary-row span{font-size:8px!important;color:#79cfdf!important}
.evolution-summary-row strong{font-size:13px!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:5px!important}
.evolution-summary-row strong b{font:inherit!important;color:inherit!important}
.evolution-summary-dna img{width:25px!important;height:25px!important;object-fit:contain!important;filter:drop-shadow(0 0 7px rgba(93,230,255,.18))!important}

.evolution-ladder{
  position:relative!important;
  display:grid!important;
  gap:8px!important;
  padding:2px 0 4px!important;
}
.evolution-ladder::before{
  content:"";
  position:absolute;
  left:30px;
  top:30px;
  bottom:30px;
  width:2px;
  background:linear-gradient(180deg,rgba(86,232,255,.18),rgba(87,255,153,.42),rgba(255,214,97,.22));
  box-shadow:0 0 14px rgba(87,225,255,.11);
}
.evolution-step{
  position:relative!important;
  display:grid!important;
  grid-template-columns:62px minmax(0,1fr)!important;
  gap:14px!important;
  align-items:center!important;
  min-height:84px!important;
}
.evolution-spine-node{
  position:relative!important;
  z-index:2!important;
  width:62px!important;
  height:62px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  border:1px solid color-mix(in srgb,var(--step-color) 45%,rgba(126,222,244,.12))!important;
  background:radial-gradient(circle at 42% 35%,rgba(255,255,255,.07),rgba(3,18,27,.98) 68%)!important;
  box-shadow:0 0 0 5px rgba(2,13,20,.92),0 0 18px color-mix(in srgb,var(--step-color) 14%,transparent)!important;
}
.evolution-step-icon{
  width:42px!important;
  height:42px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--step-color) 38%,transparent))!important;
  opacity:.94!important;
}
.evolution-step-number{
  position:absolute!important;
  left:-6px!important;
  bottom:-5px!important;
  min-width:24px!important;
  height:24px!important;
  padding:0 5px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  border:1px solid color-mix(in srgb,var(--step-color) 54%,#17303a)!important;
  background:#061821!important;
  color:var(--step-color)!important;
  font-size:11px!important;
  font-weight:950!important;
}
.evolution-step-body{
  position:relative!important;
  padding:13px 15px 12px 17px!important;
  border-radius:16px!important;
  border:1px solid rgba(118,218,239,.12)!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--step-color) 5%,rgba(5,18,27,.88)),rgba(3,14,22,.74))!important;
  overflow:hidden!important;
}
.evolution-step-body::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--step-color);
  opacity:.45;
}
.evolution-step-top{align-items:center!important}
.evolution-step-kicker{font-size:8px!important;color:color-mix(in srgb,var(--step-color) 76%,#dffaff)!important;margin-bottom:3px!important}
.evolution-step h3{font-size:20px!important;color:#f1fcff!important}
.evolution-step p{margin:6px 0 0!important;font-size:11px!important;line-height:1.4!important;color:#abcbd3!important}
.evolution-step-threshold{
  display:inline-flex!important;
  align-items:center!important;
  gap:3px!important;
  padding:4px 8px 4px 5px!important;
  border-radius:999px!important;
  color:#edfaff!important;
  border-color:rgba(116,218,239,.15)!important;
  background:rgba(2,12,18,.64)!important;
}
.evolution-step-threshold img{width:22px!important;height:22px!important;object-fit:contain!important}
.evolution-step-threshold strong{font-size:12px!important}
.evolution-step-threshold span{font-size:8px!important;letter-spacing:.08em!important;color:#8fcbd7!important}
.evolution-step-footer{margin-top:8px!important}
.evolution-step-status{
  min-height:22px!important;
  padding:3px 8px!important;
  border-radius:999px!important;
  font-size:8px!important;
  color:color-mix(in srgb,var(--step-color) 72%,#e7fbff)!important;
  border-color:color-mix(in srgb,var(--step-color) 24%,rgba(120,220,240,.12))!important;
  background:color-mix(in srgb,var(--step-color) 5%,rgba(3,14,21,.64))!important;
}
.evolution-step.is-current .evolution-spine-node{
  transform:scale(1.05)!important;
  border-color:color-mix(in srgb,var(--step-color) 78%,#efffff)!important;
  box-shadow:0 0 0 5px rgba(2,13,20,.92),0 0 26px color-mix(in srgb,var(--step-color) 32%,transparent)!important;
}
.evolution-step.is-current .evolution-step-body{
  border-color:color-mix(in srgb,var(--step-color) 42%,rgba(120,220,240,.14))!important;
  box-shadow:0 0 24px color-mix(in srgb,var(--step-color) 7%,transparent)!important;
}
.evolution-step.is-locked{opacity:.53!important;filter:saturate(.62)!important}
.evolution-step.is-locked .evolution-spine-node{box-shadow:0 0 0 5px rgba(2,13,20,.92)!important}
.evolution-step.is-next{opacity:.82!important}

@media(max-width:899px){
  #mainMenu .menu-evolution-link{
    left:4vw!important;
    top:calc(16.8svh + 59px)!important;
    max-width:245px!important;
    gap:6px!important;
  }
  #mainMenu .menu-evolution-link>img{width:30px!important;height:30px!important;flex-basis:30px!important}
  #mainMenu .menu-evolution-copy small{font-size:7px!important}
  #mainMenu .menu-evolution-copy strong{font-size:10px!important}

  .top-hud>div:first-child{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    min-width:0!important;
  }
  .top-hud .title-row{flex:0 0 auto!important}
  .hud-evolution-link{
    margin:0!important;
    gap:4px!important;
    max-width:180px!important;
    min-width:0!important;
  }
  .hud-evolution-link>img{width:23px!important;height:23px!important;flex-basis:23px!important}
  .hud-evolution-link small{display:none!important}
  .hud-evolution-link strong{
    max-width:145px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:8px!important;
  }

  .evolution-backdrop{padding:9px!important;align-items:stretch!important}
  .evolution-card{
    width:100%!important;
    max-height:calc(100dvh - 18px)!important;
    padding:18px 12px 18px!important;
    border-radius:20px!important;
  }
  .evolution-card>.close-btn{
    top:10px!important;
    right:10px!important;
    width:34px!important;
    height:34px!important;
  }
  .evolution-header{
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin:3px 44px 16px 0!important;
  }
  .evolution-copy h2{font-size:27px!important;margin-right:0!important}
  .evolution-copy p{font-size:10px!important;line-height:1.4!important}
  .evolution-summary{grid-template-columns:1fr 1fr!important;gap:6px!important}
  .evolution-summary-row{min-height:38px!important;padding:7px 8px!important}
  .evolution-summary-row span{font-size:6px!important;letter-spacing:.09em!important}
  .evolution-summary-row strong{font-size:10px!important}
  .evolution-summary-dna img{width:20px!important;height:20px!important}
  .evolution-ladder::before{left:23px!important;top:24px!important;bottom:24px!important}
  .evolution-step{grid-template-columns:48px minmax(0,1fr)!important;gap:8px!important;min-height:74px!important}
  .evolution-spine-node{width:48px!important;height:48px!important;box-shadow:0 0 0 4px rgba(2,13,20,.92)!important}
  .evolution-step-icon{width:32px!important;height:32px!important}
  .evolution-step-number{left:-4px!important;bottom:-4px!important;min-width:20px!important;height:20px!important;font-size:9px!important}
  .evolution-step-body{padding:10px 10px 9px 12px!important;border-radius:13px!important}
  .evolution-step-top{flex-direction:row!important;gap:8px!important}
  .evolution-step h3{font-size:15px!important}
  .evolution-step-kicker{font-size:6px!important}
  .evolution-step p{font-size:9px!important;margin-top:4px!important}
  .evolution-step-threshold{padding:3px 6px 3px 3px!important}
  .evolution-step-threshold img{width:18px!important;height:18px!important}
  .evolution-step-threshold strong{font-size:10px!important}
  .evolution-step-threshold span{font-size:6px!important}
  .evolution-step-footer{margin-top:5px!important}
  .evolution-step-status{font-size:6px!important;min-height:18px!important;padding:2px 6px!important}
}

@media(max-width:560px){
  #mainMenu .menu-evolution-link{
    top:calc(18svh + 61px)!important;
    max-width:205px!important;
  }
  #mainMenu .menu-evolution-copy strong{max-width:178px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.1!important}
  .hud-evolution-link{max-width:130px!important}
  .hud-evolution-link strong{max-width:101px!important;font-size:7px!important}
}
.hud-evolution-mobile-level{display:none!important}
@media(pointer:coarse) and (max-width:900px){
  .hud-evolution-link{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:none!important;
    gap:2px!important;
  }
  .hud-evolution-link>img{width:19px!important;height:19px!important;flex-basis:19px!important}
  .hud-evolution-link>span{display:block!important}
  .hud-evolution-link small,
  .hud-evolution-link strong{display:none!important}
  .hud-evolution-mobile-level{
    display:block!important;
    color:#9dffc0!important;
    font-size:7px!important;
    font-weight:900!important;
    letter-spacing:.03em!important;
    white-space:nowrap!important;
  }
}
.menu-evolution-link,.hud-evolution-link{
  -webkit-tap-highlight-color:transparent!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}

/* v0.6.89 — restore HUD geometry, precise evolution placement, clean ladder */

/* Main menu: evolution is a light clickable status, never a standalone panel. */
#mainMenu .menu-evolution-link{
  position:absolute!important;
  z-index:7!important;
  left:4vw!important;
  right:auto!important;
  top:calc(5.6vh + 82px)!important;
  width:auto!important;
  max-width:320px!important;
  min-height:36px!important;
  padding:2px 0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#eefcff!important;
  text-align:left!important;
  cursor:pointer!important;
  transform:none!important;
}
#mainMenu .menu-evolution-copy{
  order:1!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:2px!important;
}
#mainMenu .menu-evolution-link>img{
  order:2!important;
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 8px rgba(86,255,155,.18))!important;
}
#mainMenu .menu-evolution-copy small{
  font-size:8px!important;
  letter-spacing:.14em!important;
  line-height:1!important;
  color:#7bd9ea!important;
  text-transform:uppercase!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
#mainMenu .menu-evolution-copy strong{
  font-size:12px!important;
  line-height:1.1!important;
  color:#f2fdff!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
#mainMenu .menu-evolution-link:hover,
#mainMenu .menu-evolution-link:focus-visible{
  transform:none!important;
  outline:none!important;
}
#mainMenu .menu-evolution-link:hover strong,
#mainMenu .menu-evolution-link:focus-visible strong{color:#a0ffc1!important}

/* Match HUD: put evolution on the SAME title line, to the right. */
.top-hud>div:first-child{min-width:0!important}
.top-hud .title-row{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:9px!important;
}
.hud-evolution-link{
  margin:0 0 0 9px!important;
  padding:0!important;
  min-width:0!important;
  max-width:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#edfaff!important;
  cursor:pointer!important;
  text-align:left!important;
  flex:0 1 auto!important;
}
.hud-evolution-link>span{
  order:1!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:1px!important;
}
.hud-evolution-link>img{
  order:2!important;
  width:25px!important;
  height:25px!important;
  flex:0 0 25px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 7px rgba(84,255,154,.16))!important;
}
.hud-evolution-link small{
  display:block!important;
  font-size:7px!important;
  line-height:1!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  font-weight:850!important;
  color:#74d7e9!important;
}
.hud-evolution-link strong{
  display:block!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  font-size:10px!important;
  line-height:1.05!important;
  font-weight:850!important;
  color:#f1fdff!important;
  white-space:nowrap!important;
}
.hud-evolution-link:hover strong,
.hud-evolution-link:focus-visible strong{color:#9cffbd!important}
.hud-evolution-link:focus-visible{outline:none!important}
.hud-evolution-compact{display:none!important}

/* Evolution ladder: one continuous path, no random mutation icons. */
.evolution-ladder{
  position:relative!important;
  display:grid!important;
  gap:0!important;
  padding:2px 0 6px!important;
}
.evolution-ladder::before{
  content:""!important;
  position:absolute!important;
  left:25px!important;
  top:25px!important;
  bottom:25px!important;
  width:2px!important;
  background:linear-gradient(180deg,rgba(82,235,255,.62),rgba(74,255,146,.72) 72%,rgba(248,214,93,.54))!important;
  box-shadow:0 0 14px rgba(74,230,255,.14)!important;
}
.evolution-step{
  position:relative!important;
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  gap:14px!important;
  align-items:start!important;
  min-height:88px!important;
  opacity:1!important;
  filter:none!important;
}
.evolution-milestone{
  position:relative!important;
  z-index:2!important;
  width:42px!important;
  height:42px!important;
  margin:6px 0 0 5px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  border:1px solid rgba(118,222,244,.32)!important;
  background:radial-gradient(circle at 40% 34%,rgba(149,242,255,.15),rgba(5,22,31,.98) 68%)!important;
  box-shadow:0 0 0 5px rgba(3,15,22,.96),0 0 15px rgba(79,215,245,.08)!important;
}
.evolution-step-number{
  position:static!important;
  min-width:0!important;
  width:auto!important;
  height:auto!important;
  padding:0!important;
  display:block!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#95eaff!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:950!important;
}
.evolution-step-content{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:18px!important;
  align-items:center!important;
  padding:9px 4px 15px 2px!important;
  border-bottom:1px solid rgba(118,218,239,.10)!important;
  background:transparent!important;
}
.evolution-step-main{min-width:0!important}
.evolution-step-kicker{
  margin:0 0 3px!important;
  font-size:7px!important;
  line-height:1!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  color:#68cadc!important;
  font-weight:850!important;
}
.evolution-step h3{
  margin:0!important;
  font-size:20px!important;
  line-height:1.08!important;
  color:#f1fcff!important;
}
.evolution-step p{
  margin:5px 0 7px!important;
  max-width:620px!important;
  font-size:11px!important;
  line-height:1.4!important;
  color:#abcbd3!important;
}
.evolution-step-status{
  display:inline-flex!important;
  align-items:center!important;
  min-height:20px!important;
  padding:2px 7px!important;
  border-radius:999px!important;
  border:1px solid rgba(112,220,242,.16)!important;
  background:rgba(5,20,29,.54)!important;
  color:#8edceb!important;
  font-size:7px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
}
.evolution-step-threshold{
  min-width:96px!important;
  display:grid!important;
  grid-template-columns:auto auto auto!important;
  align-items:center!important;
  justify-content:end!important;
  gap:5px!important;
  padding:5px 7px!important;
  border-radius:13px!important;
  border:1px solid rgba(112,218,239,.14)!important;
  background:rgba(3,15,22,.46)!important;
}
.evolution-step-threshold>span{
  grid-column:1/-1!important;
  font-size:6px!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:#6dbdcd!important;
  text-align:right!important;
}
.evolution-step-threshold strong{
  font-size:15px!important;
  line-height:1!important;
  color:#effdff!important;
}
.evolution-step-threshold img{
  width:22px!important;
  height:22px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 6px rgba(84,220,255,.14))!important;
}
.evolution-step.is-unlocked:not(.is-current) .evolution-milestone{
  border-color:rgba(88,236,159,.40)!important;
  background:radial-gradient(circle at 40% 34%,rgba(115,255,175,.16),rgba(5,24,26,.98) 68%)!important;
}
.evolution-step.is-unlocked:not(.is-current) .evolution-step-number{color:#83f3ac!important}
.evolution-step.is-unlocked:not(.is-current) .evolution-step-status{color:#82e6a5!important;border-color:rgba(88,231,147,.20)!important}
.evolution-step.is-current .evolution-milestone{
  width:46px!important;
  height:46px!important;
  margin-left:3px!important;
  margin-top:4px!important;
  border-color:rgba(255,220,105,.62)!important;
  background:radial-gradient(circle at 40% 34%,rgba(255,224,119,.22),rgba(26,24,9,.98) 70%)!important;
  box-shadow:0 0 0 5px rgba(3,15,22,.96),0 0 24px rgba(255,211,76,.20)!important;
}
.evolution-step.is-current .evolution-step-number{color:#ffe07a!important;font-size:17px!important}
.evolution-step.is-current .evolution-step-content{
  margin:0 0 8px!important;
  padding:11px 12px 13px!important;
  border:1px solid rgba(255,218,93,.22)!important;
  border-radius:16px!important;
  background:linear-gradient(90deg,rgba(65,48,9,.18),rgba(4,18,26,.30))!important;
}
.evolution-step.is-current .evolution-step-status{
  color:#ffe18a!important;
  border-color:rgba(255,218,93,.25)!important;
  background:rgba(66,47,7,.18)!important;
}
.evolution-step.is-current .evolution-step-threshold{border-color:rgba(255,218,93,.22)!important}
.evolution-step.is-locked .evolution-milestone{
  border-color:rgba(120,169,181,.18)!important;
  background:rgba(4,15,21,.96)!important;
  box-shadow:0 0 0 5px rgba(3,15,22,.96)!important;
}
.evolution-step.is-locked .evolution-step-number{color:#6b929c!important}
.evolution-step.is-locked .evolution-step-content{opacity:.58!important}
.evolution-step.is-locked .evolution-step-status{color:#718f97!important}

/* Mobile menu: evolution sits under BIOMASS; text first, icon second. */
@media(pointer:coarse) and (max-width:900px){
  #mainMenu .menu-evolution-link{
    left:auto!important;
    right:4vw!important;
    top:calc(16.8svh + 58px)!important;
    max-width:220px!important;
    justify-content:flex-end!important;
    text-align:right!important;
    gap:5px!important;
  }
  #mainMenu .menu-evolution-copy{align-items:flex-end!important}
  #mainMenu .menu-evolution-link>img{width:27px!important;height:27px!important;flex-basis:27px!important}
  #mainMenu .menu-evolution-copy small{font-size:7px!important}
  #mainMenu .menu-evolution-copy strong{font-size:9px!important;max-width:170px!important;white-space:normal!important;text-align:right!important}

  /* Keep the top HUD exactly in its established compact layout. */
  .top-hud>div:first-child{
    display:block!important;
    min-width:0!important;
  }
  .top-hud .title-row{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
  }
  .hud-evolution-link{
    margin:0 0 0 5px!important;
    gap:3px!important;
    max-width:112px!important;
    flex:0 1 auto!important;
  }
  .hud-evolution-link>span{display:flex!important;min-width:0!important}
  .hud-evolution-link small{display:block!important;font-size:5px!important;letter-spacing:.09em!important}
  .hud-evolution-link strong{
    display:block!important;
    max-width:84px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:6px!important;
    white-space:nowrap!important;
  }
  .hud-evolution-link>img{width:17px!important;height:17px!important;flex-basis:17px!important}

  .evolution-ladder::before{left:20px!important;top:21px!important;bottom:21px!important}
  .evolution-step{grid-template-columns:42px minmax(0,1fr)!important;gap:8px!important;min-height:78px!important}
  .evolution-milestone{width:34px!important;height:34px!important;margin:5px 0 0 3px!important;box-shadow:0 0 0 4px rgba(3,15,22,.96)!important}
  .evolution-step-number{font-size:12px!important}
  .evolution-step.is-current .evolution-milestone{width:38px!important;height:38px!important;margin-left:1px!important;margin-top:3px!important;box-shadow:0 0 0 4px rgba(3,15,22,.96),0 0 18px rgba(255,211,76,.17)!important}
  .evolution-step.is-current .evolution-step-number{font-size:13px!important}
  .evolution-step-content{gap:8px!important;padding:7px 1px 11px!important}
  .evolution-step.is-current .evolution-step-content{padding:9px 9px 10px!important;border-radius:13px!important;margin-bottom:5px!important}
  .evolution-step-kicker{font-size:5px!important}
  .evolution-step h3{font-size:14px!important}
  .evolution-step p{font-size:8px!important;line-height:1.35!important;margin:3px 0 5px!important}
  .evolution-step-status{font-size:5px!important;min-height:17px!important;padding:2px 5px!important}
  .evolution-step-threshold{min-width:66px!important;padding:4px 5px!important;gap:3px!important;border-radius:10px!important}
  .evolution-step-threshold>span{font-size:5px!important}
  .evolution-step-threshold strong{font-size:10px!important}
  .evolution-step-threshold img{width:17px!important;height:17px!important}
}

@media(pointer:coarse) and (max-width:560px){
  #mainMenu .menu-evolution-link{
    top:calc(18svh + 60px)!important;
    right:5vw!important;
    max-width:205px!important;
  }
  #mainMenu .menu-evolution-copy strong{max-width:158px!important}
  .hud-evolution-link{max-width:94px!important}
  .hud-evolution-link strong{max-width:67px!important;font-size:5.5px!important}
}
@media(pointer:coarse) and (max-width:900px){
  .hud-evolution-link small,
  .hud-evolution-link strong{display:none!important}
  .hud-evolution-compact{
    display:block!important;
    color:#9dffc0!important;
    font-size:7px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.02em!important;
    white-space:nowrap!important;
  }
  .hud-evolution-link{max-width:none!important}
}

/* === v0.6.90 compact evolution ladder + smoother first contact === */
.evolution-card{
  width:min(920px,96vw)!important;
  max-height:94dvh!important;
  padding:18px 24px 18px!important;
  overflow:auto!important;
}
.evolution-card>.mutation-kicker{margin-bottom:4px!important}
.evolution-card>.close-btn{top:12px!important;right:12px!important;width:34px!important;height:34px!important}
.evolution-header{
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr)!important;
  gap:18px!important;
  margin:0 42px 10px 0!important;
  align-items:start!important;
}
.evolution-copy{min-width:0!important}
.evolution-win-stat{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  min-height:28px!important;
  margin:2px 0 5px!important;
  padding:3px 8px 3px 4px!important;
  border:1px solid rgba(101,232,159,.20)!important;
  border-radius:999px!important;
  background:rgba(7,34,24,.28)!important;
  color:#dfffee!important;
}
.evolution-win-stat img{
  width:22px!important;
  height:22px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 5px rgba(78,255,142,.16))!important;
}
.evolution-win-stat span{
  font-size:7px!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:#82dda4!important;
  font-weight:850!important;
}
.evolution-win-stat strong{font-size:13px!important;line-height:1!important;color:#f0fff6!important}
.evolution-copy h2{font-size:31px!important;line-height:1!important;margin:3px 0 5px!important}
.evolution-copy p{font-size:10px!important;line-height:1.35!important;max-width:520px!important;margin:0!important}
.evolution-summary{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:6px!important;
}
.evolution-summary-row{
  min-height:34px!important;
  padding:6px 8px!important;
  border-radius:10px!important;
}
.evolution-summary-row span{font-size:6px!important;letter-spacing:.10em!important}
.evolution-summary-row strong{font-size:10px!important;line-height:1.1!important}
.evolution-summary-dna img{width:18px!important;height:18px!important}

.evolution-ladder{
  gap:0!important;
  padding:0!important;
}
.evolution-ladder::before{
  left:17px!important;
  top:19px!important;
  bottom:19px!important;
  width:1px!important;
}
.evolution-step{
  grid-template-columns:36px minmax(0,1fr)!important;
  gap:9px!important;
  min-height:49px!important;
  align-items:center!important;
}
.evolution-milestone{
  width:28px!important;
  height:28px!important;
  margin:0 0 0 3px!important;
  box-shadow:0 0 0 3px rgba(3,15,22,.96),0 0 10px rgba(79,215,245,.07)!important;
}
.evolution-step-number{font-size:10px!important}
.evolution-step.is-current .evolution-milestone{
  width:31px!important;
  height:31px!important;
  margin:0 0 0 2px!important;
  box-shadow:0 0 0 3px rgba(3,15,22,.96),0 0 14px rgba(255,211,76,.14)!important;
}
.evolution-step.is-current .evolution-step-number{font-size:11px!important}
.evolution-step-content{
  grid-template-columns:minmax(0,1fr) 152px!important;
  gap:10px!important;
  min-height:48px!important;
  align-items:center!important;
  padding:4px 2px 4px 0!important;
  border-bottom:1px solid rgba(118,218,239,.08)!important;
  background:transparent!important;
}
.evolution-step.is-current .evolution-step-content{
  margin:1px 0!important;
  padding:5px 7px!important;
  border-radius:10px!important;
}
.evolution-step-main{min-width:0!important}
.evolution-step-kicker{display:none!important}
.evolution-step h3{
  margin:0!important;
  font-size:14px!important;
  line-height:1.04!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.evolution-step p{
  margin:3px 0 0!important;
  max-width:none!important;
  font-size:8px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.evolution-step-meta{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  justify-content:end!important;
  gap:5px!important;
}
.evolution-step-status{
  justify-self:end!important;
  min-height:18px!important;
  padding:2px 6px!important;
  font-size:6px!important;
  white-space:nowrap!important;
}
.evolution-step-threshold{
  min-width:58px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:3px!important;
  padding:2px 4px!important;
  border-radius:9px!important;
}
.evolution-step-threshold>span{display:none!important}
.evolution-step-threshold strong{font-size:10px!important}
.evolution-step-threshold img{width:16px!important;height:16px!important}

/* Position the collision prompt before it becomes visible, then keep only a very subtle organic float. */
.collision-mini-icon{
  animation:collisionAssetAttention090 2.2s cubic-bezier(.45,0,.55,1) infinite alternate!important;
  will-change:transform,opacity!important;
}
@keyframes collisionAssetAttention090{
  from{transform:translateY(0) scale(1);opacity:.90}
  to{transform:translateY(-2px) scale(1.01);opacity:1}
}

@media(pointer:coarse) and (max-width:900px){
  .evolution-backdrop{padding:6px!important}
  .evolution-card{
    width:min(96vw,620px)!important;
    max-height:96dvh!important;
    padding:12px 11px 10px!important;
    border-radius:18px!important;
  }
  .evolution-card>.close-btn{top:7px!important;right:7px!important;width:30px!important;height:30px!important}
  .evolution-card>.mutation-kicker{font-size:6px!important;margin:0 36px 2px 0!important}
  .evolution-header{
    grid-template-columns:1fr!important;
    gap:5px!important;
    margin:0 34px 6px 0!important;
  }
  .evolution-win-stat{min-height:22px!important;margin:1px 0 3px!important;padding:2px 6px 2px 3px!important;gap:4px!important}
  .evolution-win-stat img{width:17px!important;height:17px!important}
  .evolution-win-stat span{font-size:5px!important}
  .evolution-win-stat strong{font-size:10px!important}
  .evolution-copy h2{font-size:21px!important;margin:1px 0 3px!important}
  .evolution-copy p{font-size:7px!important;line-height:1.22!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .evolution-summary{grid-template-columns:1fr 1fr!important;gap:3px!important}
  .evolution-summary-row{min-height:25px!important;padding:3px 5px!important;border-radius:8px!important}
  .evolution-summary-row span{font-size:4.5px!important}
  .evolution-summary-row strong{font-size:7px!important}
  .evolution-summary-dna img{width:13px!important;height:13px!important}

  .evolution-ladder::before{left:13px!important;top:15px!important;bottom:15px!important}
  .evolution-step{grid-template-columns:28px minmax(0,1fr)!important;gap:6px!important;min-height:42px!important}
  .evolution-milestone{width:23px!important;height:23px!important;margin:0 0 0 2px!important;box-shadow:0 0 0 2px rgba(3,15,22,.96)!important}
  .evolution-step-number{font-size:8px!important}
  .evolution-step.is-current .evolution-milestone{width:25px!important;height:25px!important;margin-left:1px!important;box-shadow:0 0 0 2px rgba(3,15,22,.96),0 0 10px rgba(255,211,76,.12)!important}
  .evolution-step.is-current .evolution-step-number{font-size:9px!important}
  .evolution-step-content{grid-template-columns:minmax(0,1fr) 104px!important;gap:5px!important;min-height:41px!important;padding:3px 0!important}
  .evolution-step.is-current .evolution-step-content{padding:4px 5px!important;border-radius:8px!important;margin:0!important}
  .evolution-step h3{font-size:10px!important}
  .evolution-step p{font-size:6px!important;margin-top:2px!important}
  .evolution-step-meta{gap:3px!important}
  .evolution-step-status{min-height:15px!important;padding:1px 4px!important;font-size:4.5px!important}
  .evolution-step-threshold{min-width:43px!important;padding:1px 3px!important;gap:2px!important;border-radius:7px!important}
  .evolution-step-threshold strong{font-size:7px!important}
  .evolution-step-threshold img{width:12px!important;height:12px!important}
  .collision-mini-icon{animation-duration:2.5s!important}
}
/* v0.6.90 final compacting: keep mobile modal content-sized, not stretched. */
@media(pointer:coarse) and (max-width:900px){
  .evolution-backdrop{align-items:center!important}
  .evolution-card{height:auto!important;min-height:0!important}
}


/* === v0.6.92 targeted fix: keep v0.6.90 ladder, enlarge desktop only === */
@media (min-width:901px){
  .evolution-card{
    width:min(1080px,96vw)!important;
    max-height:94dvh!important;
    padding:22px 28px 22px!important;
  }
  .evolution-header{
    grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr)!important;
    gap:22px!important;
    margin:0 44px 13px 0!important;
  }
  .evolution-copy h2{font-size:35px!important}
  .evolution-copy p{font-size:11px!important;max-width:600px!important}
  .evolution-win-stat{min-height:34px!important;padding:4px 10px 4px 5px!important;gap:7px!important}
  .evolution-win-stat img{width:27px!important;height:27px!important}
  .evolution-win-stat span{font-size:8px!important}
  .evolution-win-stat strong{font-size:15px!important}
  .evolution-step{grid-template-columns:40px minmax(0,1fr)!important;gap:10px!important;min-height:55px!important}
  .evolution-milestone{width:31px!important;height:31px!important;margin-left:4px!important}
  .evolution-step.is-current .evolution-milestone{width:34px!important;height:34px!important;margin-left:2px!important}
  .evolution-step-content{grid-template-columns:minmax(0,1fr) 170px!important;min-height:54px!important;padding:5px 3px 5px 0!important}
  .evolution-step.is-current .evolution-step-content{padding:6px 8px!important}
  .evolution-step h3{font-size:16px!important}
  .evolution-step p{font-size:9px!important}
  .evolution-step-status{font-size:6.5px!important}
  .evolution-step-threshold strong{font-size:11px!important}
  .evolution-step-threshold img{width:18px!important;height:18px!important}
}

/* Mobile first-contact asset: smoother, calmer float with less vertical jump and no harsh pulse. */
@keyframes collisionAssetFloat100{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.97}
  20%{transform:translate3d(0,-1px,0) scale(1.003);opacity:.985}
  50%{transform:translate3d(0,-3px,0) scale(1.007);opacity:1}
  80%{transform:translate3d(0,-1px,0) scale(1.003);opacity:.985}
  100%{transform:translate3d(0,0,0) scale(1);opacity:.97}
}
@media(pointer:coarse) and (max-width:900px){
  .collision-mini-icon{
    animation:collisionAssetFloat100 3.6s cubic-bezier(.33,0,.22,1) infinite!important;
    will-change:transform,opacity!important;
  }
}
@media(max-width:900px){
  .collision-mini-icon{
    animation:collisionAssetFloat100 3.6s cubic-bezier(.33,0,.22,1) infinite!important;
    will-change:transform,opacity!important;
  }
}

/* v0.6.93 — startup splash/preloader */
.startup-splash{
  position:fixed;
  inset:0;
  z-index:20000;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  opacity:1;
  transition:opacity .18s ease;
}
.startup-splash.is-leaving{opacity:0;pointer-events:none;}
.startup-splash.hidden{display:none!important;}
.startup-splash-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  opacity:0;
  transform:scale(1.002);
  transition:opacity .22s ease;
  background:#000;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.startup-splash-image.is-active{opacity:1;}
body.booting{overflow:hidden;}
body.booting #mainMenu{pointer-events:none;}
@media (max-width:900px){
  .startup-splash-image{object-fit:contain;}
}

/* v0.6.95 — Anna + custom cursor package */
.anna-card{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:4900;
  width:min(430px,calc(100vw - 44px));
  min-height:138px;
  display:flex;
  align-items:stretch;
  gap:12px;
  overflow:hidden;
  border:1px solid rgba(111,235,255,.26);
  border-radius:22px;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,61,168,.08),transparent 28%),
    linear-gradient(155deg,rgba(4,24,34,.97),rgba(4,14,22,.985));
  box-shadow:0 24px 70px rgba(0,0,0,.50),0 0 30px rgba(52,218,255,.07);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  cursor:pointer;
  animation:annaCardIn .28s cubic-bezier(.2,.8,.2,1) both;
}
.anna-card.hidden{display:none!important;}
.anna-card.anna-major{
  border-color:rgba(112,255,164,.34);
  box-shadow:0 28px 78px rgba(0,0,0,.55),0 0 40px rgba(86,255,151,.10);
}
.anna-card.anna-on-result{
  top:22px;
  bottom:auto;
}
.anna-card-portrait{
  width:132px;
  min-width:132px;
  height:154px;
  align-self:flex-end;
  object-fit:contain;
  object-position:center bottom;
  margin:-12px 0 0 -4px;
  filter:drop-shadow(0 0 14px rgba(255,56,159,.08));
  pointer-events:none;
}
.anna-card-copy{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:19px 42px 18px 0;
}
.anna-card-name{
  font-size:9px;
  font-weight:900;
  letter-spacing:.24em;
  color:#7fe7f5;
}
.anna-card-line{
  font-size:15px;
  line-height:1.42;
  font-weight:700;
  color:#effdff;
  text-wrap:balance;
}
.anna-card-close{
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:999px;
  background:rgba(6,20,29,.68);
  color:#a6d9e2;
  font-size:19px;
  line-height:1;
  padding:0;
}
.anna-card-close:hover{color:#fff;background:rgba(14,40,51,.88);}
@keyframes annaCardIn{
  from{opacity:0;transform:translateY(12px) scale(.985);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

.petri-custom-cursor{
  position:fixed;
  left:0;
  top:0;
  z-index:40000;
  width:48px;
  height:48px;
  object-fit:contain;
  pointer-events:none!important;
  user-select:none;
  opacity:0;
  will-change:transform;
  transform:translate3d(-100px,-100px,0);
  transition:opacity .08s linear;
}
.petri-custom-cursor.is-visible{opacity:1;}
@media(pointer:fine){
  body.petri-cursor-enabled,
  body.petri-cursor-enabled *{cursor:none!important;}
}
@media(pointer:coarse){
  .petri-custom-cursor{display:none!important;}
}

@media(max-width:899px){
  .anna-card{
    left:12px;
    right:12px;
    bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
    width:auto;
    min-height:118px;
    border-radius:18px;
    gap:7px;
  }
  .anna-card.anna-on-result{
    top:calc(env(safe-area-inset-top,0px) + 10px);
    bottom:auto;
  }
  .anna-card-portrait{
    width:96px;
    min-width:96px;
    height:126px;
    margin:-8px 0 0 -4px;
  }
  .anna-card-copy{
    gap:6px;
    padding:15px 36px 14px 0;
  }
  .anna-card-name{font-size:8px;}
  .anna-card-line{font-size:13px;line-height:1.36;}
  .anna-card-close{width:28px;height:28px;top:7px;right:7px;}
}

/* === v0.6.97 targeted UI cleanup === */
/* Never reveal the native arrow/hand while the PETRI cursor is active.
   Some older UI rules use cursor:pointer !important with an ID selector, so they
   need matching/higher specificity here; otherwise both cursors can be visible. */
@media (pointer:fine){
  body.petri-cursor-enabled,
  body.petri-cursor-enabled *{cursor:none!important;}
  body.petri-cursor-enabled #mainMenu .menu-action,
  body.petri-cursor-enabled #mainMenu .menu-action:disabled,
  body.petri-cursor-enabled #menuPlayBtn.loading,
  body.petri-cursor-enabled #mainMenu .menu-evolution-link,
  body.petri-cursor-enabled .match-lab-fab,
  body.petri-cursor-enabled .lab-level-effect-row,
  body.petri-cursor-enabled .bottom-panel .player-slots .mini-gene-main,
  body.petri-cursor-enabled .hud-evolution-link,
  body.petri-cursor-enabled .gene-slots.player-slots [data-slot-index]{cursor:none!important;}
}

/* Battle HUD brand/title alignment.
   Desktop: use the PETRI asset, keep Strainborn as text, and align brand / title / evolution in one calm line. */
.top-hud > div:first-child{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}
.top-hud .title-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex-wrap:nowrap;
}
.top-hud .title-row h1{
  margin:0;
}
.hud-brand-home{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  color:#eafdff;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:1px;
  line-height:1;
  text-align:left;
  pointer-events:auto;
  flex:0 0 auto;
  border-radius:10px;
  transition:transform .14s ease,filter .14s ease,opacity .14s ease;
}
.hud-brand-home:hover{transform:translateY(-1px) scale(1.025);filter:brightness(1.08);}
.hud-brand-home:active{transform:translateY(0) scale(.985);filter:brightness(.96);}
.hud-brand-asset{
  display:block;
  width:clamp(126px, 11.5vw, 164px);
  max-width:164px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(84,224,247,.16));
}
.hud-brand-sub{display:none!important;}

/* Anna is dismissed by tapping/clicking the message itself; no separate X. */
.anna-card-copy{padding-right:18px!important;}

/* Mobile menu: fixed icon column so the two rows line up perfectly. */
@media (pointer:coarse) and (max-width:900px){
  #mainMenu .menu-action{
    position:relative!important;
    justify-content:center!important;
    padding-left:52px!important;
    padding-right:14px!important;
  }
  #mainMenu .menu-action-icon{
    position:absolute!important;
    left:16px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    margin:0!important;
  }

  /* Raise the whole mobile masthead, then pull subtitle/resources/evolution closer to PETRI. */
  #mainMenu .menu-brand{
    top:-.8svh!important;
  }
  #mainMenu .menu-subtitle{
    margin-top:-2px!important;
  }
  #mainMenu .menu-resource{
    top:13.2svh!important;
  }
  #mainMenu .menu-evolution-link{
    top:calc(13.2svh + 56px)!important;
  }

  /* On mobile PETRI/STRAINBORN is the compact home control. */
  .hud-brand-home{
    pointer-events:auto;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    margin:0 1px 0 0;
    min-width:42px;
  }
  .hud-brand-asset{width:88px;max-width:88px;}
  .hud-brand-sub{font-size:4.5px;letter-spacing:.14em;margin-top:1px;padding-left:1px;}
}

@media (pointer:coarse) and (max-width:560px){
  #mainMenu .menu-brand{top:-1.2svh!important;}
  #mainMenu .menu-resource{top:13.8svh!important;}
  #mainMenu .menu-evolution-link{top:calc(13.8svh + 58px)!important;}
  #mainMenu .menu-action{padding-left:48px!important;}
  #mainMenu .menu-action-icon{left:14px!important;}
}

/* Mobile battle masthead: PETRI / STRAINBORN is the single brand, evolution stays beside it. */
@media (min-width:900px){
  .top-hud{
    padding-top:13px!important;
    padding-bottom:13px!important;
  }
  .top-hud > div:first-child{
    gap:18px!important;
  }
  .hud-brand-home{
    transform:translateY(3px);
  }
  .title-row h1{
    font-size:clamp(21px,2.2vw,32px)!important;
  }
  .hud-evolution-link{
    align-self:center;
  }
}

@media (pointer:coarse) and (max-width:900px){
  .top-hud>div:first-child{
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    min-width:0!important;
  }
  .top-hud .title-row{
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    min-width:0!important;
  }
  .top-hud .title-row h1{display:none!important;}
  .top-hud .title-row h1::after{content:none!important;display:none!important;}
}


/* === v0.6.101 targeted input/audio UI repair ===
   Native CSS cursor removes DOM pointermove latency and can never sit below a modal. */
@media (pointer:fine){
  html, body, body *{
    cursor:url("assets/cursor/cursor_normal_48.png") 4 2, default!important;
  }
  button:not(:disabled),
  a[href],
  label,
  select,
  input[type="button"],
  input[type="submit"],
  input[type="checkbox"],
  input[type="radio"],
  input[type="range"],
  [role="button"],
  [data-slot-index],
  .gene-card,
  .gene-select-area,
  .anna-card,
  .menu-action:not(:disabled),
  .hud-evolution-link,
  .match-lab-fab,
  .match-microscope-fab,
  .match-settings-fab{
    cursor:url("assets/cursor/cursor_hover_48.png") 4 2, default!important;
  }
  button:not(:disabled):active,
  a[href]:active,
  label:active,
  [role="button"]:active,
  [data-slot-index]:active,
  .gene-card:active,
  .gene-select-area:active,
  .anna-card:active{
    cursor:url("assets/cursor/cursor_click_48.png") 4 2, default!important;
  }
  button:disabled,[aria-disabled="true"]{
    cursor:url("assets/cursor/cursor_normal_48.png") 4 2, default!important;
  }
  .playfield-wrap.microscope-targeting #gameCanvas{
    cursor:url("assets/cursor/cursor_hover_48.png") 4 2, default!important;
  }
  .petri-custom-cursor{display:none!important;}
}

/* Mutation confirmation button must visibly react like the rest of PETRI controls. */
.continue-btn{
  position:relative;
  transform:translateY(0) scale(1);
  transition:transform .10s ease,box-shadow .12s ease,filter .12s ease,border-color .12s ease!important;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}
.continue-btn:not(:disabled):hover{
  transform:translateY(-1px) scale(1.012);
  filter:brightness(1.08);
  border-color:rgba(126,255,161,.92);
  box-shadow:0 0 34px rgba(62,255,119,.27),inset 0 1px rgba(255,255,255,.18);
}
.continue-btn:not(:disabled):active{
  transform:translateY(2px) scale(.965);
  filter:brightness(.92);
  box-shadow:0 2px 10px rgba(0,0,0,.34),inset 0 3px 9px rgba(0,45,19,.30);
  transition-duration:.035s!important;
}
.continue-btn:focus-visible{
  outline:1px solid rgba(150,255,184,.75);
  outline-offset:2px;
}
.continue-btn:disabled{
  transform:none!important;
  filter:none!important;
}


/* === v0.6.102 exact HUD + cursor hardening === */
@media (min-width:901px){
  .hud-brand-home .hud-brand-sub{display:none!important;}
  .hud-strainborn-inline{
    display:inline-flex!important;
    align-items:center!important;
    white-space:nowrap!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:850!important;
    letter-spacing:.20em!important;
    text-transform:uppercase!important;
    color:#a9d1d9!important;
    margin:0!important;
  }
  .top-hud>div:first-child{gap:12px!important;}
  .top-hud .title-row{gap:9px!important;}
}
@media (max-width:900px){
  .hud-strainborn-inline{display:none!important;}
}

/* Never expose a browser arrow/hand if a custom PETRI cursor URL is temporarily unavailable.
   This block intentionally comes last and beats every legacy cursor:pointer rule. */
@media (pointer:fine){
  html, body, body *, body *::before, body *::after{
    cursor:url("assets/cursor/cursor_normal_48.png") 4 2, none!important;
  }
  body button:not(:disabled),
  body a[href],
  body label,
  body select,
  body input[type="button"],
  body input[type="submit"],
  body input[type="checkbox"],
  body input[type="radio"],
  body input[type="range"],
  body [role="button"],
  body [data-slot-index],
  body .gene-card,
  body .gene-select-area,
  body .anna-card,
  body .menu-action:not(:disabled),
  body .hud-evolution-link,
  body .match-lab-fab,
  body .match-settings-fab{
    cursor:url("assets/cursor/cursor_hover_48.png") 4 2, none!important;
  }
  body button:not(:disabled):active,
  body a[href]:active,
  body label:active,
  body [role="button"]:active,
  body [data-slot-index]:active,
  body .gene-card:active,
  body .gene-select-area:active,
  body .anna-card:active{
    cursor:url("assets/cursor/cursor_click_48.png") 4 2, none!important;
  }
  body button:disabled, body [aria-disabled="true"]{
    cursor:url("assets/cursor/cursor_normal_48.png") 4 2, none!important;
  }
}


/* === v0.6.103 main-menu cursor specificity fix ===
   Some legacy main-menu rules use #mainMenu + !important and were stronger than
   the generic native PETRI cursor rule. Cover the clickable control AND every child
   so crossing icon/text never falls back to the browser hand. */
@media (pointer:fine){
  body #mainMenu .menu-action,
  body #mainMenu .menu-action *,
  body #mainMenu .menu-action::before,
  body #mainMenu .menu-action::after,
  body #mainMenu .menu-evolution-link,
  body #mainMenu .menu-evolution-link *,
  body #mainMenu .menu-evolution-link::before,
  body #mainMenu .menu-evolution-link::after,
  body #menuPlayBtn,
  body #menuPlayBtn *{
    cursor:url("assets/cursor/cursor_hover_48.png") 4 2, none!important;
  }
  body #mainMenu .menu-action:active,
  body #mainMenu .menu-action:active *,
  body #mainMenu .menu-evolution-link:active,
  body #mainMenu .menu-evolution-link:active *,
  body #menuPlayBtn:active,
  body #menuPlayBtn:active *{
    cursor:url("assets/cursor/cursor_click_48.png") 4 2, none!important;
  }
  body #mainMenu .menu-action:disabled,
  body #mainMenu .menu-action:disabled *,
  body #menuPlayBtn:disabled,
  body #menuPlayBtn:disabled *{
    cursor:url("assets/cursor/cursor_normal_48.png") 4 2, none!important;
  }
}


/* v0.6.106 — second splash is a clean game-entry prompt, not a technical sound button. */
.startup-entry-prompt{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:18vh;
  transform:translateX(-50%);
  padding:0;
  border:0;
  background:none;
  color:rgba(235,253,255,.96);
  font:inherit;
  font-size:14px;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  text-shadow:0 0 8px rgba(130,239,255,.35),0 0 22px rgba(72,214,255,.18);
  animation:startupEntryPulse 1.35s ease-in-out infinite;
}
@keyframes startupEntryPulse{
  0%,100%{opacity:.38;transform:translateX(-50%) scale(.985)}
  50%{opacity:1;transform:translateX(-50%) scale(1)}
}
@media(pointer:coarse){
  .startup-entry-prompt{font-size:12px;letter-spacing:.18em;bottom:19svh;}
}
@media(max-width:560px){
  .startup-entry-prompt{font-size:11px;bottom:20svh;}
}


/* === v0.6.105 lab information flow rework ===
   Order: DNA header -> current research -> mutation catalog -> research chamber.
   Research starts directly from the level row; the separate start plaque is removed. */
.lab-current{position:relative;z-index:1;padding:18px;border-radius:26px}
.lab-current-body{display:flex;flex-direction:column;gap:12px}
.lab-current-card{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px;border-radius:22px;border:1px solid rgba(126,217,239,.16);background:linear-gradient(180deg,rgba(8,24,35,.92),rgba(4,14,22,.96))}
.lab-current-card.ready{border-color:rgba(103,255,145,.28);box-shadow:0 0 0 1px rgba(103,255,145,.08) inset}
.lab-current-card.running{border-color:rgba(108,227,255,.22)}
.lab-current-visual{width:88px;height:88px;display:grid;place-items:center;border-radius:22px;background:radial-gradient(circle at 50% 50%,rgba(33,63,80,.66),rgba(8,20,29,.95));box-shadow:inset 0 0 30px rgba(134,230,255,.06),0 0 0 1px rgba(165,235,255,.06)}
.lab-current-visual img{width:58px;height:58px;object-fit:contain}
.lab-current-copy{min-width:0}
.lab-current-copy small{display:block;margin-bottom:5px;color:rgba(157,235,251,.72);font-size:10px;letter-spacing:.16em;font-weight:900;text-transform:uppercase}
.lab-current-copy h3{margin:0 0 6px;font-size:24px;line-height:1.05}
.lab-current-copy p{margin:0 0 10px;color:rgba(219,244,250,.74);font-size:12px;line-height:1.35}
.lab-current-actions{display:flex;align-items:center;justify-content:flex-end}
.lab-current-timer{padding:10px 12px;border-radius:14px;border:1px solid rgba(127,218,241,.16);background:rgba(6,18,27,.62);color:#effcff;font-weight:900;white-space:nowrap}
.lab-current-idle{grid-template-columns:1fr;padding:14px 16px}
.lab-current-idle .lab-current-copy h3{font-size:18px}
.lab-current-idle .lab-current-copy p{margin-bottom:0}
.lab-level-effect-row{grid-template-columns:58px minmax(0,1fr) auto!important;padding-right:12px!important}
.lab-level-row-copy{min-width:0}
.lab-level-action-slot{display:flex;align-items:center;justify-content:flex-end;min-width:112px;position:relative;z-index:2}
.lab-level-state{position:static!important;display:inline-flex;align-items:center;justify-content:center;min-height:26px;white-space:nowrap}
.lab-level-action-btn{appearance:none;border:1px solid rgba(74,255,126,.48);background:linear-gradient(180deg,#3fe66f,#158f47);color:#04160b;border-radius:12px;padding:8px 12px;font-size:11px;font-weight:950;letter-spacing:.04em;cursor:pointer;box-shadow:0 0 18px rgba(62,255,119,.12);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.lab-level-action-btn:hover{transform:translateY(-1px);box-shadow:0 0 22px rgba(62,255,119,.18)}
.lab-level-action-btn:active{transform:translateY(0) scale(.98)}
.lab-upgrade-box.lab-research-start-box{display:none!important}
.lab-research-box.lab-research-standalone{display:none!important}

@media(max-width:1024px){
  .lab-current-card{grid-template-columns:78px minmax(0,1fr);align-items:start}
  .lab-current-actions{grid-column:2;justify-content:flex-start}
}
@media(max-width:720px){
  .lab-current{padding:9px!important;border-radius:16px!important}
  .lab-current-card{grid-template-columns:54px minmax(0,1fr)!important;gap:8px!important;padding:9px!important;border-radius:14px!important}
  .lab-current-visual{width:54px!important;height:54px!important;border-radius:13px!important}
  .lab-current-visual img{width:40px!important;height:40px!important}
  .lab-current-copy small{font-size:7px!important;margin-bottom:2px!important}
  .lab-current-copy h3{font-size:14px!important;margin:0 0 3px!important}
  .lab-current-copy p{font-size:9px!important;line-height:1.28!important;margin:0 0 6px!important}
  .lab-current-actions{grid-column:1/-1!important;justify-content:flex-start!important}
  .lab-current-timer{padding:7px 9px!important;border-radius:10px!important;font-size:10px!important}
  .lab-level-effect-row{grid-template-columns:40px minmax(0,1fr) auto!important;align-items:center!important}
  .lab-level-action-slot{min-width:78px!important}
  .lab-level-state{font-size:6px!important;min-height:22px!important;padding:3px 5px!important}
  .lab-level-action-btn{padding:6px 8px!important;border-radius:9px!important;font-size:8px!important;white-space:nowrap!important}
}


/* === v0.6.108 evolution level-up + dev progression test === */
.level-up-overlay{
  position:fixed;inset:0;z-index:5200;display:grid;place-items:center;padding:20px;
  background:rgba(0,7,11,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.level-up-card{
  width:min(620px,94vw);min-height:360px;position:relative;overflow:hidden;
  border-radius:30px;padding:28px 30px 26px;text-align:center;
  border-color:rgba(117,238,255,.32);
  background:
    radial-gradient(circle at 50% 10%,rgba(90,238,255,.12),transparent 36%),
    linear-gradient(180deg,rgba(6,30,42,.98),rgba(2,13,21,.99));
  box-shadow:0 34px 110px rgba(0,0,0,.62),0 0 54px rgba(83,226,255,.09),inset 0 1px rgba(255,255,255,.06);
}
.level-up-card::before{
  content:"";position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(142,246,255,.9),transparent);
}
.level-up-kicker{font-size:9px;font-weight:900;letter-spacing:.24em;color:#79eafa;text-transform:uppercase}
.level-up-number{
  width:96px;height:96px;margin:18px auto 15px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(130,239,255,.44);background:radial-gradient(circle,rgba(80,230,255,.18),rgba(8,30,41,.84) 68%);
  color:#e9fdff;font-size:48px;font-weight:950;line-height:1;
  box-shadow:0 0 0 7px rgba(108,234,255,.035),0 0 36px rgba(77,221,255,.16),inset 0 0 24px rgba(120,240,255,.08);
}
.level-up-label{display:block;font-size:10px;letter-spacing:.22em;font-weight:950;color:#8effbd;margin-bottom:6px}
.level-up-copy h2{margin:0;font-size:34px;line-height:1;color:#f3fdff}
.level-up-copy>p{max-width:470px;margin:11px auto 0;color:rgba(219,245,251,.78);font-size:13px;line-height:1.5}
.level-up-gameplay{
  max-width:500px;margin:14px auto 0;padding:11px 13px;border-radius:15px;
  border:1px solid rgba(123,222,245,.14);background:rgba(5,18,27,.58);
  color:#a9d5de;font-size:11px;line-height:1.42;
}
.level-up-ok{
  min-width:150px;height:46px;margin-top:20px;border-radius:14px;
  border:1px solid rgba(74,255,126,.62);background:linear-gradient(180deg,#43e873,#168d48);
  color:#04160b;font:inherit;font-size:13px;font-weight:950;letter-spacing:.06em;cursor:pointer;
  box-shadow:0 0 28px rgba(63,255,119,.14);transition:transform .14s ease,box-shadow .14s ease;
}
.level-up-ok:hover{transform:translateY(-1px);box-shadow:0 0 34px rgba(63,255,119,.20)}
.level-up-ok:active{transform:translateY(1px) scale(.985)}

.dev-admin-select{
  min-width:176px;border:1px solid rgba(122,219,244,.26);border-radius:12px;
  background:#071c26;color:#e8fbff;padding:9px 11px;font:inherit;font-size:11px;font-weight:800;
}
.dev-level-set-row .dev-admin-input-group{display:flex;align-items:center;gap:8px;flex:0 0 auto}

@media(max-width:720px){
  .level-up-overlay{padding:10px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .level-up-card{width:min(94vw,500px);min-height:0;padding:20px 16px 18px;border-radius:22px}
  .level-up-kicker{font-size:7px}
  .level-up-number{width:72px;height:72px;margin:13px auto 11px;font-size:36px}
  .level-up-label{font-size:8px;margin-bottom:5px}
  .level-up-copy h2{font-size:26px}
  .level-up-copy>p{font-size:11px;line-height:1.42;margin-top:9px}
  .level-up-gameplay{margin-top:10px;padding:9px 10px;font-size:9px;line-height:1.35}
  .level-up-ok{width:100%;height:43px;margin-top:14px;border-radius:12px}
  .dev-level-set-row .dev-admin-input-group{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto}
  .dev-admin-select{min-width:0;width:100%}
  .dev-level-set-row .dev-admin-btn{width:auto}
}


/* === v0.6.109 research-ready signal ===
   When a timed research reaches READY, every visible Laboratory entry pulses until the user activates it. */
@keyframes labResearchReadyPulse109{
  0%,100%{border-color:rgba(99,255,151,.48);box-shadow:0 0 0 1px rgba(95,255,160,.06) inset,0 0 12px rgba(77,255,139,.08)}
  50%{border-color:rgba(128,255,178,.96);box-shadow:0 0 0 1px rgba(117,255,173,.18) inset,0 0 30px rgba(73,255,137,.38),0 0 55px rgba(75,229,255,.13)}
}
@keyframes labResearchReadyIcon109{
  0%,100%{filter:drop-shadow(0 0 8px rgba(122,245,255,.16));transform:scale(1)}
  50%{filter:drop-shadow(0 0 18px rgba(105,255,157,.72));transform:scale(1.07)}
}
#menuLabBtn.research-ready,
#openLabFromMatchBtn.research-ready,
#resultLabBtn.research-ready{
  animation:labResearchReadyPulse109 1.15s ease-in-out infinite!important;
}
#menuLabBtn.research-ready .menu-action-icon img,
#openLabFromMatchBtn.research-ready img,
#resultLabBtn.research-ready img{
  animation:labResearchReadyIcon109 1.15s ease-in-out infinite!important;
  transform-origin:center;
}
.match-research-status.ready{
  animation:labResearchReadyPulse109 1.15s ease-in-out infinite!important;
}
@media (prefers-reduced-motion:reduce){
  #menuLabBtn.research-ready,
  #openLabFromMatchBtn.research-ready,
  #resultLabBtn.research-ready,
  .match-research-status.ready,
  #menuLabBtn.research-ready .menu-action-icon img,
  #openLabFromMatchBtn.research-ready img,
  #resultLabBtn.research-ready img{animation:none!important}
}


/* v0.6.113 unified PETRI: Strainborn asset branding */
.hud-strainborn-inline{display:none!important;}

.level-up-art-wrap{
  position:relative;
  width:min(320px,74vw);
  margin:14px auto 8px;
}
.level-up-art-glow{
  position:absolute;inset:12% 18%;
  background:radial-gradient(circle,rgba(87,255,142,.22),transparent 70%);
  filter:blur(24px);
  pointer-events:none;
}
.level-up-art{
  position:relative;display:block;width:100%;height:auto;object-fit:contain;
  filter:drop-shadow(0 0 28px rgba(64,255,136,.16));
}
.level-up-card .level-up-number{margin:4px auto 15px;}
@media(max-width:720px){
  .level-up-art-wrap{width:min(250px,82vw);margin:10px auto 6px;}
  .level-up-card .level-up-number{margin:2px auto 11px;}
}


/* === v0.6.114 canonical PETRI cursor + research timer + first-contact motion === */
/* One cursor authority for the entire fine-pointer document. Descendants never own
   cursor state; they inherit the root PETRI cursor, so browser arrow/hand cannot leak
   through legacy rules or newly-added controls. */
@media (pointer:fine){
  #petriRoot.petri-native-cursor{
    cursor:url("assets/cursor/cursor_normal_48.png") 4 2, none!important;
  }
  #petriRoot.petri-native-cursor.petri-cursor-hover{
    cursor:url("assets/cursor/cursor_hover_48.png") 4 2, none!important;
  }
  #petriRoot.petri-native-cursor.petri-cursor-click{
    cursor:url("assets/cursor/cursor_click_48.png") 4 2, none!important;
  }
  #petriRoot.petri-native-cursor #petriBody,
  #petriRoot.petri-native-cursor #petriBody *,
  #petriRoot.petri-native-cursor #petriBody *::before,
  #petriRoot.petri-native-cursor #petriBody *::after{
    cursor:inherit!important;
  }
  .petri-custom-cursor{display:none!important;}
}

/* Research timer uses the same neutral PETRI control frame as the rest of the HUD;
   mutation colour no longer paints its outline. Ready state stays green. */
.match-research-status{
  border-color:rgba(128,221,245,.32)!important;
}
.match-research-status:hover{
  border-color:var(--cyan)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.28),0 0 22px rgba(66,221,255,.15)!important;
}
.match-research-status:focus{outline:none!important;}
.match-research-status:focus-visible{
  outline:1px solid rgba(128,221,245,.58)!important;
  outline-offset:2px!important;
}
.match-research-status.ready{
  border-color:rgba(99,255,151,.55)!important;
}

/* First-contact asset only: preserve timing, increase vertical travel by exactly 1.5x
   from the previous 3px peak to 4.5px. No collision/simulation logic is touched. */
@keyframes collisionAssetFloat114{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.97}
  20%{transform:translate3d(0,-1.5px,0) scale(1.003);opacity:.985}
  50%{transform:translate3d(0,-4.5px,0) scale(1.007);opacity:1}
  80%{transform:translate3d(0,-1.5px,0) scale(1.003);opacity:.985}
  100%{transform:translate3d(0,0,0) scale(1);opacity:.97}
}
.collision-mini-icon{
  animation:collisionAssetFloat114 3.6s cubic-bezier(.33,0,.22,1) infinite!important;
  will-change:transform,opacity!important;
}


/* === v0.6.118 entry prompt: always a game-entry affordance, never an audio-status label === */
.startup-entry-prompt{
  position:absolute!important;
  z-index:4!important;
  left:50%!important;
  bottom:17.5vh!important;
  transform:translateX(-50%)!important;
  padding:8px 20px 9px!important;
  border:0!important;
  background:transparent!important;
  color:#dffcff!important;
  font-family:"Segoe UI",Inter,ui-sans-serif,system-ui,sans-serif!important;
  font-size:15px!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:.30em!important;
  text-transform:uppercase!important;
  text-align:center!important;
  white-space:nowrap!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-font-smoothing:antialiased!important;
  text-shadow:
    0 0 6px rgba(182,255,255,.72),
    0 0 15px rgba(50,231,255,.40),
    0 0 28px rgba(67,255,177,.18)!important;
  animation:petriEntryPrompt118 1.55s cubic-bezier(.4,0,.2,1) infinite!important;
}
.startup-entry-prompt::before,
.startup-entry-prompt::after{
  content:"";
  position:absolute;
  top:50%;
  width:38px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(117,246,255,.78));
  box-shadow:0 0 8px rgba(69,229,255,.30);
  opacity:.74;
}
.startup-entry-prompt::before{right:calc(100% + 6px)}
.startup-entry-prompt::after{left:calc(100% + 6px);transform:scaleX(-1)}
@keyframes petriEntryPrompt118{
  0%,100%{opacity:.48;filter:brightness(.92);transform:translateX(-50%) translateY(0)}
  50%{opacity:1;filter:brightness(1.12);transform:translateX(-50%) translateY(-1px)}
}
@media(pointer:coarse){
  .startup-entry-prompt{font-size:13px!important;letter-spacing:.25em!important;bottom:18.5svh!important;padding-inline:15px!important}
  .startup-entry-prompt::before,.startup-entry-prompt::after{width:28px}
}
@media(max-width:560px){
  .startup-entry-prompt{font-size:12px!important;letter-spacing:.22em!important;bottom:19svh!important}
}