*,*::before,*::after{box-sizing:border-box}
:root{
  --bg0:#100b24; --panel:#231b48; --panel-2:#2d2459; --card:#30276a; --edge:#0a0718;
  --ink:#f8f4ff; --ink-2:#d6ccf7; --ink-3:#ab9fdc;
  --gold:#ffcf4a; --pink:#ff7096; --green:#5ed37a; --blue:#4fb3ff; --violet:#a97cff; --red:#ff4757; --mint:#3fd9d3; --orange:#ff8a3d;
  --px:3; --gpx:2;
  --slot:calc(var(--px) * 17px);
  --pixel:"Pixelify Sans", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ui:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:16px;
  color-scheme:dark;
}
html{background:var(--bg0)}
body{
  margin:0; min-height:100vh; color:var(--ink); font:700 15px/1.45 var(--sans);
  background:
    radial-gradient(1100px 600px at 12% -10%, #3d2a8a66, transparent 60%),
    radial-gradient(900px 520px at 105% 0%, #ff709626, transparent 60%),
    radial-gradient(900px 600px at 50% 115%, #4fb3ff22, transparent 60%),
    var(--bg0);
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.45; z-index:0;
  background-image:
    linear-gradient(#fff,#fff), linear-gradient(#ffcf4a,#ffcf4a), linear-gradient(#a97cff,#a97cff);
  background-size:2px 2px; background-repeat:no-repeat;
  background-position:12% 18%, 78% 9%, 35% 70%;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.35;
  background-image:radial-gradient(#ffffff 1px, transparent 1.4px), radial-gradient(#ffcf4a 1px, transparent 1.4px);
  background-size:170px 170px, 260px 260px; background-position:0 0, 90px 120px;
}
body.dragging, body.dragging *{cursor:grabbing !important}
button{font:inherit; color:inherit}
img{display:block}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- buttons ---------- */
.btn{
  font:600 15px/1 var(--pixel); letter-spacing:.02em; color:var(--ink);
  background:#3d3180; border:3px solid var(--edge); border-radius:11px;
  padding:0 14px; min-height:44px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 4px 0 var(--edge), inset 0 -3px 0 #00000040, inset 0 2px 0 #ffffff26;
  transition:transform .16s cubic-bezier(.3,1.6,.5,1), box-shadow .12s, background-color .15s; white-space:nowrap;
}
.btn:hover{background:#4b3c9e}
.btn:hover:not([disabled]){transform:translateY(-1px)}
.btn:active:not([disabled]){transform:translateY(3px) scale(.97); box-shadow:0 1px 0 var(--edge), inset 0 -2px 0 #00000040; transition-duration:.05s}
.btn:focus-visible, .nest:focus-visible, .lv:focus-visible, .modes button:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
.btn[disabled]{opacity:.4; cursor:not-allowed; transform:none}
.btn--gold{background:var(--gold); color:#2b1900}
.btn--gold:hover{background:#ffdc70}
.btn--pink{background:var(--pink); color:#2b0614}
.btn--pink:hover{background:#ff8aa9}
.btn--big{font-size:19px; min-height:54px; padding:0 22px; border-radius:14px}
.icon-btn{width:44px; padding:0}
.icon-btn svg{width:22px; height:22px; image-rendering:pixelated}

/* ---------- top ---------- */
.app{position:relative; z-index:1; max-width:1380px; margin:0 auto; padding:14px 16px 32px}
.topbar{display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; margin-bottom:10px}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.brand-icon{width:60px; height:63px; image-rendering:pixelated; animation:bob 1.2s steps(1,end) infinite; --px:3}
.logo{font:700 36px/1 var(--pixel); letter-spacing:.05em; margin:0; color:var(--gold); text-shadow:3px 3px 0 #d8466c, 6px 6px 0 var(--edge)}
.logo-sub{display:block; margin-top:6px; font:800 13px/1 var(--ui); color:var(--ink-3); letter-spacing:.06em}
.modes{display:flex; gap:4px; background:var(--panel); padding:4px; border-radius:14px; border:3px solid var(--edge); box-shadow:0 4px 0 var(--edge)}
.modes button{font:600 15px/1 var(--pixel); background:transparent; color:var(--ink-2); border:0; border-radius:9px; padding:0 14px; min-height:40px; cursor:pointer}
.modes button:hover{color:var(--ink); background:#ffffff10}
.modes button[aria-selected="true"]{color:#160a33}
.hud{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.hud-box{position:relative; overflow:hidden; background:var(--panel); border:3px solid var(--edge); border-radius:12px; padding:5px 12px 7px; min-width:98px; box-shadow:0 4px 0 var(--edge)}
.hud-box span{display:block; font:800 10.5px/1.2 var(--ui); color:var(--ink-3); text-transform:uppercase; letter-spacing:.1em}
.hud-box b{display:block; font:700 23px/1.05 var(--pixel); font-variant-numeric:tabular-nums}
.combo-box i{position:absolute; left:0; bottom:0; height:4px; width:100%; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg,var(--pink),var(--gold))}
.combo-box.live i{animation:drain 6s linear forwards}
.combo-box.hot{background:#4a2a5a}
.combo-box.hot b{color:var(--gold)}
.combo-box.bump b{animation:pulse .35s}

/* ---------- level strip ---------- */
.levels{display:flex; gap:8px; overflow-x:auto; padding:6px 4px 12px; align-items:center; scrollbar-width:thin}
.lv-ch{flex:none; font:900 11px/1 var(--ui); color:var(--ink-3); text-transform:uppercase; letter-spacing:.12em; padding:0 2px 0 10px}
.lv-ch:first-child{padding-left:2px}
.lv{flex:none; display:grid; place-items:center; align-content:center; gap:3px; width:58px; height:58px; background:var(--panel); border:3px solid var(--edge); border-radius:13px; font:700 19px/1 var(--pixel); cursor:pointer; box-shadow:0 4px 0 var(--edge); padding:0}
.lv:hover{background:var(--panel-2)}
.lv small{font:900 11px/1 var(--ui); letter-spacing:1px; color:#ffffff40}
.lv small b{color:var(--gold); font-weight:600}
.lv[aria-current="true"]{background:var(--violet); color:#160a33}
.lv[aria-current="true"] small{color:#160a3366}
.lv[aria-current="true"] small b{color:#160a33}

/* ---------- layout ---------- */
.layout{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; align-items:start}
@media (max-width:1060px){.layout{grid-template-columns:1fr}}
.play{display:grid; gap:14px; min-width:0}

/* ---------- mission ---------- */
.mission{background:var(--panel); border:3px solid var(--edge); border-radius:var(--r); padding:14px 16px; box-shadow:0 5px 0 var(--edge); display:grid; gap:10px}
.mission-top{display:flex; gap:8px 12px; align-items:center; flex-wrap:wrap}
.chip-ch{font:900 11px/1 var(--ui); background:#ffffff14; border-radius:999px; padding:6px 10px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.1em}
.mission h2{font:700 25px/1.1 var(--pixel); margin:0}
.mission-meta{margin-left:auto; font:800 13px/1 var(--ui); color:var(--ink-3)}
.mission p{margin:0; color:var(--ink-2); max-width:78ch}
.mission p b{color:var(--ink)}
.targets{display:flex; flex-wrap:wrap; gap:6px}
.tgt{display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:7px; padding:5px 10px 5px 6px; border-radius:11px; background:#00000040; border:2px solid #ffffff1c; min-width:86px}
.tgt img{grid-row:span 2; width:33px; height:33px; image-rendering:pixelated}
.tgt b{font:900 14px/1.1 var(--ui)}
.tgt small{font:800 11px/1.15 var(--ui); color:var(--ink-3); letter-spacing:.04em}
.tgt.ok{border-color:var(--green); background:#5ed37a24}
.tgt.ok b::after{content:" ✓"; color:var(--green)}
.tgt.bad{border-color:var(--orange); background:#ff8a3d1f}
.tgt.next{border-color:var(--gold); animation:nextGlow 1.3s ease-in-out infinite}
.orig{display:flex; flex-wrap:wrap; gap:4px; align-items:stretch}
.orig-lab{font:900 11px/1 var(--ui); color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; align-self:center; margin-right:4px}
.oc{display:grid; text-align:center; padding:4px 6px; border-radius:8px; background:#00000040; border:2px solid #ffffff14; font:800 12px/1.2 var(--ui); color:var(--ink-2)}
.oc b{font:900 13px/1.2 var(--ui); color:var(--ink); letter-spacing:.06em}
.oc small{font-size:10px; color:var(--ink-3)}

/* ---------- stage ---------- */
.stage{
  position:relative; border:3px solid var(--edge); border-radius:22px; padding:14px 14px 14px;
  box-shadow:0 6px 0 var(--edge), inset 0 0 0 2px #ffffff0d;
  background:
    radial-gradient(circle at 18% 12%, #5a44b833, transparent 42%),
    radial-gradient(circle at 88% 85%, #ff709624, transparent 45%),
    linear-gradient(#211a4c, #181236);
  overflow:hidden;
}
.stage::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(#ffffff17 1.3px, transparent 1.5px); background-size:20px 20px}
.stage.shake{animation:shake .4s}
.stage-head{position:relative; display:flex; justify-content:space-between; align-items:center; gap:8px 12px; margin-bottom:12px; flex-wrap:wrap}
.stage-title{font:700 16px/1 var(--pixel); letter-spacing:.04em; display:flex; align-items:center; gap:10px}
.stage-title small{font:800 13px/1 var(--ui); color:var(--ink-3)}
.legend{display:flex; gap:6px 14px; flex-wrap:wrap; font:800 12px/1 var(--ui); color:var(--ink-3)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend img{image-rendering:pixelated; height:22px; width:auto}
.strand{position:relative; display:flex; flex-wrap:wrap; gap:16px 10px; align-items:flex-start; min-height:150px; --gpx:2; --slot:calc(var(--px) * 17px)}

/* pods */
.pod{position:relative; display:flex; flex-direction:column; background:var(--card); border:3px solid var(--edge); border-radius:15px; padding:3px 5px 6px; box-shadow:0 4px 0 var(--edge)}
.pod-tag{display:flex; justify-content:space-between; align-items:center; gap:6px; font:900 10.5px/1 var(--ui); color:var(--ink-3); padding:3px 3px 2px; letter-spacing:.05em; min-height:16px; white-space:nowrap}
.pod-tag em{font-style:normal; color:#ffffff59}
.pod--start{background:#264a52}
.pod--start .pod-tag{color:#8ff0a6}
.pod--stop{background:#4d2240}
.pod--stop .pod-tag{color:#ff9aac}
.pod--utr,.pod--partial,.pod--empty{background:#ffffff07; border:3px dashed #ffffff30; box-shadow:none}
.pod--utr .pod-tag{color:#ffffff66}
.pod.chomp{animation:chomp .28s}
.tier{display:flex}
.tier-rna{height:calc(var(--gpx) * 15px + 6px); align-items:flex-end}
.gh-cell{position:relative; width:var(--slot); display:flex; justify-content:center; align-items:flex-end; height:100%}
.gh{display:block; width:calc(var(--gpx) * 16px); height:calc(var(--gpx) * 15px); background-size:100% 100%; image-rendering:pixelated; opacity:.92; animation:float 2.4s ease-in-out var(--d,0s) infinite; filter:drop-shadow(0 0 6px var(--glow, #ffffff66))}
.gh.gh-new{animation:ghostOut .85s cubic-bezier(.2,1.2,.4,1) both, float 2.4s ease-in-out .85s infinite}
.gh-cell.born::before{content:""; position:absolute; left:50%; bottom:0; width:calc(var(--gpx) * 18px); height:calc(var(--gpx) * 18px); border-radius:50%; background:radial-gradient(#ffffffaa, #ffffff00 65%); pointer-events:none; animation:ghostPuff .75s ease-out forwards}
@keyframes ghostOut{0%{opacity:0; transform:translateY(calc(var(--gpx) * 26px)) scale(.3)}35%{opacity:.85}70%{transform:translateY(-6px) scale(1.12)}100%{opacity:.92; transform:none}}
@keyframes ghostPuff{from{opacity:.9; transform:translate(-50%, calc(var(--gpx) * 22px)) scale(.4)}to{opacity:0; transform:translate(-50%, -8px) scale(1.5)}}
.gh-l{position:absolute; top:0; right:2px; font:900 10px/1 var(--ui); color:#ffffff8c}
.slot{position:relative; width:var(--slot); height:calc(var(--px) * 21px + 16px); display:flex; justify-content:center; align-items:flex-end; padding:0 0 16px; margin:0; background:none; border:0; cursor:grab; touch-action:none; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none}
.slot:focus-visible{outline:3px solid var(--gold); outline-offset:-2px; border-radius:10px}
.slot .lbl{position:absolute; bottom:0; left:50%; transform:translateX(-50%); font:900 13px/1 var(--ui); color:var(--ink)}
.slot .shadow{position:absolute; bottom:14px; left:50%; width:calc(var(--px) * 13px); height:calc(var(--px) * 2px); transform:translateX(-50%); background:#00000059; border-radius:50%}
.slot.edited::before{content:""; position:absolute; top:2px; right:4px; width:8px; height:8px; background:var(--gold); transform:rotate(45deg); box-shadow:0 0 0 2px var(--edge); z-index:2}
.slot.lifted .cr-wrap{opacity:.2}
.cr-wrap{position:relative; display:block}
.cr{display:block; width:calc(var(--px) * 20px); height:calc(var(--px) * 21px); background-repeat:no-repeat; background-size:200% 100%; image-rendering:pixelated; animation:bob 1.2s steps(1,end) var(--d,0s) infinite, blink 5.2s step-end var(--d2,0s) infinite}
.cr-A{background-image:var(--spr-A)} .cr-T{background-image:var(--spr-T)} .cr-G{background-image:var(--spr-G)} .cr-C{background-image:var(--spr-C)}
.gh-A{background-image:var(--gh-A); --glow:#5ed37a99} .gh-G{background-image:var(--gh-G); --glow:#ffcf4a99} .gh-C{background-image:var(--gh-C); --glow:#4fb3ff99} .gh-U{background-image:var(--gh-U); --glow:#ff709699}
.slot.landed .cr-wrap{animation:land .5s cubic-bezier(.3,1.5,.5,1)}
.slot.drop-on .cr-wrap{animation:wiggle .3s steps(2) infinite}
.slot.drop-on::after{content:attr(data-drop); position:absolute; top:-4px; left:50%; transform:translateX(-50%); font:900 11px/1 var(--ui); background:var(--gold); color:#2b1900; padding:3px 6px; border-radius:6px; z-index:3; box-shadow:0 2px 0 var(--edge)}
.slot--empty{cursor:pointer}
.socket{width:calc(var(--px) * 13px); height:calc(var(--px) * 13px); margin-bottom:calc(var(--px) * 2px); border:3px dashed #ffffff38; border-radius:12px; display:grid; place-items:center; color:#ffffff4d; font:700 18px/1 var(--pixel); transition:all .15s}
.slot--empty:hover .socket, .slot--empty:focus-visible .socket{border-color:#ffffff80; color:#ffffffaa}
.slot--empty.next .socket{border-color:#ffcf4a99; color:var(--gold); animation:nextGlow 1.3s ease-in-out infinite}
.slot--empty.drop .socket{border-color:var(--gold); background:#ffcf4a26; color:var(--gold); transform:scale(1.08)}
.tier-aa{display:flex; align-items:center; justify-content:center; gap:6px; margin:0 0 3px; min-height:35px; padding:1px 6px; background:#00000038; border-radius:10px}
.tier-aa .bead{width:33px; height:33px; image-rendering:pixelated; flex:none}
.aa-txt{display:grid; font:900 13.5px/1.05 var(--ui)}
.aa-txt small{font:800 10px/1.2 var(--ui); color:var(--ink-3); white-space:nowrap}
.aa-none{font:800 12px/1 var(--ui); color:#ffffff4d}
.tier-aa.fresh .bead{animation:beadPop .55s cubic-bezier(.3,1.8,.5,1)}
.tier-aa.fresh{animation:pump .8s ease-out}
@keyframes pump{0%{box-shadow:0 0 0 0 #ffcf4aaa}100%{box-shadow:0 0 0 14px #ffcf4a00}}
.mark{position:absolute; top:-11px; right:8px; font:900 10px/1 var(--ui); text-transform:uppercase; padding:3px 6px; border-radius:6px; letter-spacing:.05em; box-shadow:0 2px 0 var(--edge); z-index:2}
.mark--silent{background:var(--green); color:#063018}
.mark--missense{background:var(--orange); color:#3a1400}
.mark--nonsense{background:#fff; color:#4a0b14}
.mark--frame{background:var(--blue); color:#04203d}
.mark--gone{background:var(--red); color:#fff}

/* talk */
.talk{position:relative; display:flex; gap:12px; align-items:center; margin:0 0 16px}
.talk .ribo{width:72px; height:45px; image-rendering:pixelated; flex:none; animation:bob 1.4s steps(1,end) infinite; --px:3}
.bubble{position:relative; flex:1; margin:0; background:#fbf8ff; color:#1d1438; border:3px solid var(--edge); border-radius:14px; padding:10px 14px; font:800 14.5px/1.42 var(--sans); box-shadow:0 4px 0 var(--edge); min-height:48px}
.bubble::before{content:""; position:absolute; left:-12px; top:50%; margin-top:-8px; border:8px solid transparent; border-right:10px solid var(--edge); border-left:0}
.bubble::after{content:""; position:absolute; left:-7px; top:50%; margin-top:-6px; border:6px solid transparent; border-right:8px solid #fbf8ff; border-left:0}
.bubble b{color:#5a2bd6}
.bubble .tag{display:inline-block; font:900 10.5px/1 var(--ui); text-transform:uppercase; letter-spacing:.08em; padding:3px 6px; border-radius:6px; background:#1d1438; color:#fff; margin-right:6px; vertical-align:2px}
.bubble.pop{animation:bubblePop .3s ease-out}

/* banner + toasts */
.banner{position:absolute; left:50%; top:46%; z-index:30; pointer-events:none; white-space:nowrap; font:700 clamp(30px,6.5vw,64px)/1 var(--pixel); letter-spacing:.04em; color:var(--gold); text-shadow:3px 3px 0 #d8466c, 6px 6px 0 var(--edge); animation:bannerIn 1.5s cubic-bezier(.2,1.3,.4,1) forwards}
.banner.l2{font-size:clamp(24px,4.5vw,40px); color:#fff; text-shadow:3px 3px 0 #7a5cff, 5px 5px 0 var(--edge)}
.banner.l5{background:linear-gradient(90deg,#ff7096,#ffcf4a,#5ed37a,#4fb3ff,#a97cff); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(4px 4px 0 var(--edge))}
.toast{position:fixed; z-index:80; pointer-events:none; transform:translate(-50%,0); font:700 17px/1 var(--pixel); color:var(--gold); text-shadow:2px 2px 0 var(--edge), -1px -1px 0 var(--edge); white-space:nowrap; animation:toastUp 1.7s ease-out forwards}
.toast small{display:block; font:900 12px/1 var(--ui); color:#fff; text-align:center; margin-top:3px}

/* tray */
.tray{position:sticky; bottom:8px; z-index:20; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px; border:3px solid var(--edge); border-radius:20px; background:linear-gradient(#2a2156f2,#1d1642f2); box-shadow:0 -6px 24px #00000066, 0 5px 0 var(--edge); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.nests{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.nest{position:relative; display:flex; align-items:center; gap:8px; min-width:0; padding:4px 10px 6px 4px; border:3px solid var(--edge); border-radius:15px; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; text-align:left; box-shadow:0 4px 0 var(--edge), inset 0 2px 0 #ffffff1f; transition:transform .1s; --px:3}
.nest:hover{transform:translateY(-2px)}
.nest:hover .cr-wrap{animation:hop .5s}
.nest[data-b="A"]{background:linear-gradient(#2f6e4a,#204e37)}
.nest[data-b="T"]{background:linear-gradient(#7d2b4e,#5a1d39)}
.nest[data-b="G"]{background:linear-gradient(#7a5913,#57400d)}
.nest[data-b="C"]{background:linear-gradient(#21508a,#173a66)}
.nest-txt{display:grid; min-width:0}
.nest-txt b{font:900 25px/1 var(--ui)}
.nest-txt span{font:900 14px/1.15 var(--ui); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nest-txt small{font:800 11px/1.25 var(--ui); color:#ffffffa6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nest.pulse{animation:nestPulse 1s ease-in-out infinite}
.tools{display:grid; grid-template-columns:1fr 1fr; gap:8px; width:244px}
.drop-hint{display:none; position:absolute; inset:0; margin:0; place-items:center; border-radius:17px; background:#ff47571f; border:3px dashed var(--red); font:900 18px/1 var(--ui); color:#fff; text-shadow:2px 2px 0 var(--edge); pointer-events:none}
.tray.can-delete .drop-hint{display:grid; background:#00000059; border-color:#ffffff59}
.tray.drop-delete .drop-hint{display:grid; background:#ff47574d; border-color:var(--red)}

@media (max-width:860px){
  .tray{grid-template-columns:1fr}
  .tools{width:auto; display:flex}
  .tools .btn{flex:1 1 0; min-width:0}
}
@media (max-width:600px){
  .app{padding:10px 10px 24px}
  .topbar{gap:8px 10px}
  .brand{gap:8px}
  .brand-icon{width:40px; height:42px}
  .logo{font-size:26px; text-shadow:2px 2px 0 #d8466c, 4px 4px 0 var(--edge)}
  .logo-sub{display:none}
  .modes button{padding:0 10px; font-size:14px; min-height:36px}
  .lv{width:48px; height:48px; font-size:16px; border-radius:11px}
  .mission{padding:12px}
  .mission h2{font-size:20px}
  .tgt{min-width:0; padding:4px 8px 4px 5px}
  .tgt img{width:22px; height:22px}
  .stage{padding:10px 8px; border-radius:18px}
  .stage-head{margin-bottom:8px}
  .legend{font-size:11px; gap:4px 10px}
  .strand{gap:12px 6px; --slot:calc(var(--px) * 16px)}
  .pod{padding:3px 3px 5px; border-radius:12px}
  .talk{gap:8px}
  .talk .ribo{width:48px; height:30px}
  .bubble{font-size:13.5px; padding:8px 11px}
  .tray{padding:8px; gap:8px; bottom:6px; border-radius:16px}
  .nests{gap:6px}
  .nest{flex-direction:column; justify-content:center; gap:0; padding:3px 2px 5px; --px:2}
  .nest-txt{justify-items:center}
  .nest-txt span, .nest-txt small{display:none}
  .nest-txt b{font-size:17px}
  .tools{gap:6px}
  .tools .btn{min-height:40px; font-size:13px; padding:0 4px}
  .hide-s{display:none}
}

/* side */
.side{display:grid; gap:14px}
.panel{background:var(--panel); border:3px solid var(--edge); border-radius:var(--r); padding:12px 14px 14px; box-shadow:0 5px 0 var(--edge)}
.panel h3{font:700 17px/1 var(--pixel); margin:2px 0 10px; display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.panel h3 small{font:800 12px/1 var(--ui); color:var(--ink-3)}
.fine{margin:8px 0 0; font:600 12px/1.35 var(--sans); color:var(--ink-3)}
.book{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px}
.book li{min-width:0}
.book button{width:100%; display:grid; gap:2px; text-align:left; padding:6px 8px; border-radius:10px; background:#00000038; border:2px solid #ffffff12; cursor:pointer; min-height:44px}
.book button:hover{border-color:#ffffff38}
.book b{font:900 13px/1.15 var(--ui); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.book small{font:700 11px/1.2 var(--ui); color:var(--ink-3)}
.book .found{background:#ffcf4a1a; border-color:#ffcf4a59}
.book .found b{color:var(--gold)}
.book .locked b{color:#ffffff66}
.zoo{list-style:none; margin:0; padding:0; display:grid; gap:8px; max-height:330px; overflow:auto; scrollbar-width:thin}
.zoo li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center; background:#00000038; border-radius:11px; padding:7px 9px; border:2px solid #ffffff10}
.zoo li.new{animation:zooIn .6s cubic-bezier(.2,1.5,.4,1)}
.zoo canvas{image-rendering:pixelated; width:92px; height:30px}
.zoo b{display:block; font:900 14px/1.2 var(--ui); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.zoo code{display:block; font:800 11px/1.3 var(--ui); color:var(--ink-3); letter-spacing:.06em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.zoo .tags{display:flex; gap:4px; flex-wrap:wrap; margin-top:3px}
.zoo .tags i{font:900 10px/1 var(--ui); font-style:normal; padding:2px 5px; border-radius:5px; background:#ffffff1a; color:var(--ink-2)}
.zoo .empty{display:block; color:var(--ink-3); font:600 13px/1.4 var(--sans); background:none; border:2px dashed #ffffff1f}
.ctable{display:grid; grid-template-columns:18px repeat(4,minmax(0,1fr)); gap:3px; font:800 11px/1.25 var(--ui)}
.ctable .h{display:grid; place-items:center; color:var(--ink-3); font-weight:600}
.ctable .cell{display:grid; gap:1px; padding:3px 4px; border-radius:6px; background:#00000038}
.ctable .cell span{display:flex; justify-content:space-between; gap:2px; white-space:nowrap}
.ctable .cell span i{font-style:normal; color:var(--ink-3)}
.ctable .cell span b{font-weight:900}

.foot{position:relative; z-index:1; max-width:1380px; margin:0 auto; padding:6px 16px 40px; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; font:600 13px/1.4 var(--sans); color:var(--ink-3)}
.foot a, .linklike{color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; background:none; border:0; padding:0; cursor:pointer; font:inherit}
.foot a:hover, .linklike:hover{color:var(--gold)}

/* Analytics consent stays above the welcome screen and mobile sheets. */
.analytics-banner{position:fixed; z-index:120; left:12px; bottom:max(12px,env(safe-area-inset-bottom)); width:min(340px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow-y:auto; padding:14px; background:var(--panel); color:var(--ink); border:3px solid var(--violet); border-radius:16px; box-shadow:0 8px 40px #0009; font:700 13px/1.45 var(--ui)}
.analytics-banner[hidden]{display:none}
.analytics-banner h2{font:700 23px/1.2 var(--pixel); color:var(--gold); margin:0 0 8px}
.analytics-banner p{margin:0 0 12px}
.analytics-banner summary{cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.analytics-banner details p{margin-top:10px; color:var(--ink-2)}
.analytics-banner a{color:var(--ink)}
.analytics-banner :focus-visible{outline:3px solid var(--gold); outline-offset:3px}
.analytics-status:empty{display:none}
.analytics-actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px}
.analytics-actions .btn{flex:1; min-width:120px; padding:0 8px; white-space:normal; font-size:14px}
@media(max-width:900px){.analytics-banner{top:max(12px,env(safe-area-inset-top)); bottom:auto}}

/* menu popover */
.menu{position:fixed; z-index:90; min-width:220px; background:var(--panel-2); border:3px solid var(--edge); border-radius:16px; padding:10px; box-shadow:0 6px 0 var(--edge), 0 18px 40px #0009; display:grid; gap:8px; animation:popIn .18s ease-out}
.menu h4{margin:0; font:900 12px/1 var(--ui); color:var(--ink-3); letter-spacing:.06em}
.menu .row{display:flex; gap:6px}
.menu .mb{display:grid; place-items:center; gap:2px; width:50px; height:58px; border-radius:11px; border:3px solid var(--edge); background:#3d3180; cursor:pointer; box-shadow:0 3px 0 var(--edge); font:900 13px/1 var(--ui); padding:2px 0 3px}
.menu .mb:hover, .menu .mb:focus-visible{background:#55459f; outline:none}
.menu .mb:focus-visible{box-shadow:0 0 0 3px var(--gold)}
.menu .mb img{width:30px; height:32px; image-rendering:pixelated}
.menu .del{min-height:40px}

/* drag */
.drag-layer{position:fixed; inset:0; pointer-events:none; z-index:75}
.avatar{position:absolute; left:0; top:0; --px:3; will-change:transform; filter:drop-shadow(0 10px 6px #0008)}
.avatar .cr{animation:wiggle .35s steps(2) infinite}
.ins{position:absolute; width:8px; border-radius:4px; background:var(--gold); box-shadow:0 0 0 2px var(--edge), 0 0 18px var(--gold); transform:translateX(-50%)}
.ins::after{content:"+"; position:absolute; top:-26px; left:50%; transform:translateX(-50%); font:700 20px/1 var(--pixel); color:var(--gold); text-shadow:2px 2px 0 var(--edge)}
.fx{position:fixed; inset:0; pointer-events:none; z-index:60}

/* modal */
.overlay{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px; background:#07051299; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px)}
.overlay[hidden]{display:none}
.dialog{position:relative; width:min(600px,100%); max-height:calc(100vh - 32px); overflow:auto; background:var(--panel); border:3px solid var(--edge); border-radius:22px; padding:22px 22px 20px; box-shadow:0 8px 0 var(--edge), 0 30px 80px #000a; animation:popIn .35s cubic-bezier(.2,1.4,.4,1)}
.dialog h2{font:700 28px/1.1 var(--pixel); margin:0 0 10px; color:var(--gold); text-shadow:2px 2px 0 var(--edge)}
.dialog h3{font:700 17px/1.2 var(--pixel); margin:16px 0 6px}
.dialog p, .dialog li{color:var(--ink-2); margin:0 0 8px}
.dialog ul{padding-left:20px; margin:0 0 8px}
.dialog .acts{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:16px}
.dialog .x{position:absolute; top:12px; right:12px}
.stars{display:flex; gap:10px; justify-content:center; margin:6px 0 12px}
.stars span{font:700 54px/1 var(--pixel); color:#ffffff1f; text-shadow:3px 3px 0 var(--edge)}
.stars span.on{color:var(--gold); animation:starIn .5s cubic-bezier(.2,1.6,.4,1) both}
.stars span.on:nth-child(2){animation-delay:.18s}
.stars span.on:nth-child(3){animation-delay:.36s}
.fact{background:#00000038; border:2px solid #ffffff14; border-radius:14px; padding:12px 14px; margin:10px 0 0}
.fact h3{margin:0 0 6px; color:var(--mint)}
.fact p{margin:0}
.res-stats{display:flex; justify-content:center; gap:10px; flex-wrap:wrap}
.res-stats div{background:#00000038; border-radius:12px; padding:8px 14px; text-align:center; font:800 12px/1.2 var(--ui); color:var(--ink-3)}
.res-stats b{display:block; font:700 22px/1.1 var(--pixel); color:var(--ink)}
.refs li{font:600 14px/1.45 var(--sans)}
.refs b{color:var(--ink)}

/* splash */
.splash{background:radial-gradient(900px 600px at 50% 30%, #3d2a8acc, #0a0718f2)}
.splash-in{text-align:center; display:grid; justify-items:center; gap:14px; max-width:720px}
.splash h1{font:700 clamp(54px,12vw,112px)/.9 var(--pixel); margin:0; letter-spacing:.05em; color:var(--gold); text-shadow:5px 5px 0 #d8466c, 10px 10px 0 var(--edge)}
.splash .tagline{font:600 clamp(16px,2.6vw,21px)/1.35 var(--pixel); color:var(--ink-2); margin:0}
.crew{display:flex; gap:clamp(8px,3vw,26px); align-items:flex-end; justify-content:center; margin:10px 0 2px; --px:4; --gpx:3}
.crew > div{display:grid; justify-items:center; gap:6px}
.crew .gh{animation-duration:2.2s}
.crew small{font:900 14px/1 var(--ui); color:var(--ink-2)}
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; width:100%; margin:4px 0 6px}
.steps div{background:#00000047; border:2px solid #ffffff17; border-radius:14px; padding:10px 12px; text-align:left; font:700 13.5px/1.35 var(--sans); color:var(--ink-2)}
.steps b{display:block; font:900 15px/1.2 var(--ui); color:var(--gold); margin-bottom:3px}
.splash .acts{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
@media (max-width:600px){ .crew{--px:3; --gpx:2} .steps{grid-template-columns:1fr} }

/* keyframes */
@keyframes bob{0%{transform:translateY(0)}50%{transform:translateY(calc(var(--px) * -1px))}}
@keyframes blink{0%,92%{background-position:0 0}93%,97%{background-position:100% 0}98%,100%{background-position:0 0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes rise{0%{opacity:0; transform:translateY(34px) scale(.3)}60%{opacity:1}100%{opacity:.92; transform:none}}
@keyframes land{0%{transform:translateY(-30px) scale(.8,1.2)}55%{transform:translateY(0) scale(1.25,.75)}78%{transform:scale(.93,1.07)}100%{transform:none}}
@keyframes wiggle{0%{transform:rotate(-6deg)}100%{transform:rotate(6deg)}}
@keyframes hop{0%,100%{transform:none}40%{transform:translateY(-8px) scale(.95,1.06)}70%{transform:translateY(0) scale(1.08,.92)}}
@keyframes beadPop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes chomp{0%,100%{transform:none}50%{transform:translateY(-4px) scale(1.04)}}
@keyframes drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes pulse{0%,100%{transform:none}50%{transform:scale(1.25)}}
@keyframes nextGlow{0%,100%{box-shadow:0 0 0 0 #ffcf4a00}50%{box-shadow:0 0 0 4px #ffcf4a33}}
@keyframes nestPulse{0%,100%{box-shadow:0 4px 0 var(--edge), 0 0 0 0 #ffcf4a00}50%{box-shadow:0 4px 0 var(--edge), 0 0 0 5px #ffcf4a99}}
@keyframes toastUp{0%{opacity:0; transform:translate(-50%,10px) scale(.6)}15%{opacity:1; transform:translate(-50%,0) scale(1.15)}25%{transform:translate(-50%,-6px) scale(1)}100%{opacity:0; transform:translate(-50%,-70px)}}
@keyframes bannerIn{0%{opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(-8deg)}18%{opacity:1; transform:translate(-50%,-50%) scale(1.15) rotate(3deg)}30%{transform:translate(-50%,-50%) scale(1) rotate(-1deg)}80%{opacity:1; transform:translate(-50%,-50%) scale(1)}100%{opacity:0; transform:translate(-50%,-70%) scale(.9)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-5px,2px)}40%{transform:translate(5px,-2px)}60%{transform:translate(-3px,-1px)}80%{transform:translate(3px,1px)}}
@keyframes popIn{0%{opacity:0; transform:scale(.85)}100%{opacity:1; transform:none}}
@keyframes bubblePop{0%{transform:scale(.97)}60%{transform:scale(1.01)}100%{transform:none}}
@keyframes starIn{0%{opacity:0; transform:scale(0) rotate(-40deg)}100%{opacity:1; transform:none}}
@keyframes zooIn{0%{opacity:0; transform:translateX(30px) scale(.9)}100%{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .cr, .gh, .brand-icon, .talk .ribo{animation:none !important}
  .stage.shake{animation:none}
  .banner{animation-duration:.01s; animation-delay:1.2s; animation-fill-mode:both}
}

/* =========================================================
   v2: modes, Evolution, sheets, mobile shell, motion
   ========================================================= */
body[data-mode="run"] .no-run{display:none !important}
body:not([data-mode="run"]) .run-only{display:none !important}
@media (max-width:760px){ .desk-only{display:none !important} }
@media (min-width:761px){ .mob-only{display:none !important} }

/* sliding mode pill */
.modes{position:relative}
.modes-pill{position:absolute; left:0; top:4px; bottom:4px; width:0; border-radius:9px; background:var(--violet); box-shadow:inset 0 -3px 0 #00000033; pointer-events:none}
.modes.ready .modes-pill{transition:transform .42s cubic-bezier(.3,1.35,.5,1), width .42s cubic-bezier(.3,1.35,.5,1)}
.modes button{position:relative; z-index:1; transition:color .2s}
button.chip-ch{border:0; cursor:pointer; color:var(--ink-2)}
button.chip-ch:hover{background:#ffffff24; color:var(--ink)}
.moves{font:900 12px/1 var(--ui); padding:6px 10px; border-radius:999px; background:#3fd9d326; border:2px solid #3fd9d366; color:#b8fff7; white-space:nowrap}
.moves.low{background:#ff8a3d2b; border-color:#ff8a3d99; color:#ffd2b0}
.moves.bump{animation:pulse .35s}

/* talk bubble text */
.bt{display:block}
.talk.speak .ribo{animation:hop .45s}

/* ---------- Evolution: run panel ---------- */
.runbar{background:var(--panel); border:3px solid var(--edge); border-radius:var(--r); padding:14px 16px; box-shadow:0 5px 0 var(--edge); display:grid; gap:12px}
.rb-top{display:flex; gap:8px 12px; align-items:center; flex-wrap:wrap}
.rb-top h2{font:700 24px/1.1 var(--pixel); margin:0}
.rb-top .linklike{margin-left:auto; font:800 13px/1 var(--ui)}
.rb-env{margin:0; font:800 13px/1.4 var(--ui); background:#ff47572b; border:2px solid #ff4757aa; color:#ffd6db; padding:7px 12px; border-radius:12px}
.rb-env b{color:#fff}
.rb-grid{display:grid; grid-template-columns:minmax(150px,1fr) auto minmax(220px,1.1fr); gap:12px; align-items:stretch}
.rb-goal{background:#00000038; border-radius:14px; padding:9px 12px; display:grid; gap:7px; align-content:center}
.rb-goal-top{display:flex; align-items:baseline; gap:8px}
.rb-goal-top small{margin-left:auto; font:800 12px/1 var(--ui); color:var(--ink-2)}
.rb-goal span, .rb-res span, .rb-calc span span{font:900 10.5px/1.1 var(--ui); text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3)}
.rb-goal b{font:700 24px/1 var(--pixel)}
.rb-bar{height:12px; background:#0007; border-radius:6px; overflow:hidden; border:2px solid var(--edge)}
.rb-bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--green),var(--gold)); transition:width .8s cubic-bezier(.2,1.2,.3,1); box-shadow:inset 0 2px 0 #ffffff55}
.rb-calc{display:flex; align-items:center; gap:6px; background:none; border:0; padding:0; color:inherit; cursor:default; text-align:center}
.rb-calc > span{display:block; min-width:80px; border-radius:13px; padding:6px 10px; border:3px solid var(--edge); box-shadow:0 3px 0 var(--edge), inset 0 2px 0 #ffffff26}
.rb-calc b{display:block; font:700 27px/1.05 var(--pixel); font-variant-numeric:tabular-nums; white-space:nowrap}
.rb-calc b i.x{font:900 12px var(--ui); font-style:normal; color:#ffe6a3; margin-left:4px; vertical-align:4px}
.rb-calc .bas{background:#1d6b67}
.rb-calc .mult{background:#8a2a55}
.rb-calc .tot{background:#2d2459; min-width:98px}
.rb-calc em{font:700 22px/1 var(--pixel); font-style:normal; color:var(--ink-3)}
.rb-calc .bump{animation:calcBump .32s cubic-bezier(.2,1.8,.4,1)}
@keyframes calcBump{0%{transform:scale(1)}40%{transform:scale(1.14) rotate(-2deg)}100%{transform:none}}
.rb-res{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px}
.rb-res div{background:#00000038; border-radius:12px; padding:6px 4px; text-align:center; min-width:0}
.rb-res b{display:block; font:700 20px/1.1 var(--pixel)}
.rb-res .low b{color:var(--orange)}
.rb-why{display:flex; flex-wrap:wrap; gap:5px; min-height:26px}
.rb-why span{font:800 11.5px/1 var(--ui); padding:6px 8px; border-radius:8px; background:#ffffff12; color:var(--ink-2)}
.rb-why span i{font-style:normal; font-weight:900}
.rb-why .b{background:#3fd9d324; color:#b8fff7}
.rb-why .m{background:#ff709627; color:#ffc7d7}
.rb-why .x{background:#ffcf4a29; color:#ffe6a3}
.rb-why .bad{background:#ff475733; color:#ffc0c8}
.rb-why .hit{animation:whyHit .4s cubic-bezier(.2,1.8,.4,1); box-shadow:0 0 0 2px var(--gold)}
@keyframes whyHit{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:none}}

/* hand */
.hand-wrap{display:grid; gap:6px; min-width:0}
.hand{display:flex; flex-wrap:wrap; gap:6px; align-items:flex-end; min-height:66px; --px:2}
.hand-empty{margin:0; font:800 13px var(--ui); color:var(--ink-3); align-self:center}
.hand-meta{font:800 12px/1 var(--ui); color:var(--ink-3)}
.hc{position:relative; display:grid; justify-items:center; width:50px; padding:3px 0 4px; border:3px solid var(--edge); border-radius:13px; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; color:var(--ink); box-shadow:0 3px 0 var(--edge), inset 0 2px 0 #ffffff1f; transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.hc:hover{transform:translateY(-6px) rotate(-3deg)}
.hc:active{transform:scale(.92)}
.hc:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.hc b{font:900 12px/1 var(--ui); margin-top:1px}
.hc[data-b="A"]{background:linear-gradient(#2f6e4a,#204e37)}
.hc[data-b="T"]{background:linear-gradient(#7d2b4e,#5a1d39)}
.hc[data-b="G"]{background:linear-gradient(#7a5913,#57400d)}
.hc[data-b="C"]{background:linear-gradient(#21508a,#173a66)}
.hc.drawn{animation:dealIn .5s cubic-bezier(.2,1.5,.4,1) both; animation-delay:calc(var(--k,0) * 45ms)}
@keyframes dealIn{from{opacity:0; transform:translateY(-34px) rotate(-14deg) scale(.5)}to{opacity:1; transform:none}}
.mod-fluo .cr{filter:drop-shadow(0 0 3px #7cff9b) drop-shadow(0 0 7px #7cff9b99)}
.hc.mod-fluo{box-shadow:0 3px 0 var(--edge), inset 0 0 0 2px #7cff9b}
.hc.mod-iso::after, .slot.mod-iso::before{content:""; position:absolute; top:3px; left:4px; width:11px; height:11px; border-radius:50%; background:radial-gradient(#1b1230 28%, #ffe14a 32%); box-shadow:0 0 0 2px var(--edge); z-index:2}
.avatar.mod-fluo .cr{filter:drop-shadow(0 0 4px #7cff9b)}

/* cell panel (side + sheet) */
.panel h3.sub{margin-top:16px}
.olist{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.olist li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; background:#00000038; border:2px solid #ffffff10; border-radius:12px; padding:7px 9px; transition:border-color .25s}
.olist li.empty{display:block; color:var(--ink-3); font:700 12.5px/1.4 var(--sans); border-style:dashed; background:none}
.olist b{display:block; font:900 13.5px/1.15 var(--ui)}
.olist p{margin:2px 0 0; font:700 12px/1.3 var(--sans); color:var(--ink-2)}
.olist .btn{min-height:34px; font-size:12.5px; padding:0 10px}
.olist li.fire{animation:orgFire .55s cubic-bezier(.2,1.6,.4,1); border-color:var(--gold)}
@keyframes orgFire{0%{transform:none}35%{transform:scale(1.07) rotate(-1.5deg)}100%{transform:none}}
.sym{display:grid; place-items:center; width:40px; height:40px; border-radius:10px; font:700 16px/1 var(--pixel); color:#160a33; box-shadow:inset 0 -4px 0 #00000038, 0 0 0 3px var(--edge); flex:none}
.sym img{width:26px; height:26px; image-rendering:pixelated}
.sym img.fluo{filter:drop-shadow(0 0 3px #7cff9b)}
.lvlist{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.lvlist li{display:grid; grid-template-columns:22px minmax(0,1fr) auto; column-gap:8px; align-items:center; font:800 12.5px/1.2 var(--ui); color:var(--ink-2)}
.lvlist img{width:20px; height:20px; image-rendering:pixelated; grid-row:span 2}
.lvlist b{font:900 12px var(--ui); color:var(--ink)}
.lvlist small{grid-column:2 / 4; font:700 11px var(--ui); color:var(--ink-3)}
.lvlist li.up b{color:var(--gold)}

/* shop + cards */
.dialog.wide{width:min(940px,100%)}
.shop-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.shop-head h2{margin:0}
.atp{margin-left:auto; font:700 22px/1 var(--pixel); color:var(--gold); background:#00000047; padding:8px 14px; border-radius:12px; border:2px solid #ffcf4a55}
.atp.bump{animation:pulse .35s}
.dialog .shop-next{margin:10px 0 0; font:700 14px/1.45 var(--sans)}
.env-chip{display:inline-block; margin-top:6px; font:800 12.5px/1.35 var(--ui); background:#ff47572e; border:2px solid #ff4757aa; color:#ffd6db; padding:5px 10px; border-radius:10px}
.shop-sec{display:flex; align-items:baseline; gap:8px; margin:18px 0 8px; font:900 12px/1 var(--ui); text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3)}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px}
.card{position:relative; display:flex; flex-direction:column; gap:7px; background:#30276a; border:3px solid var(--edge); border-radius:16px; padding:11px; box-shadow:0 4px 0 var(--edge); animation:cardIn .5s cubic-bezier(.2,1.4,.4,1) both; animation-delay:calc(var(--k,0) * 60ms)}
@keyframes cardIn{from{opacity:0; transform:translateY(16px) rotate(-2deg) scale(.94)}to{opacity:1; transform:none}}
.dialog.still .card, .dialog.still .pay li{animation:none}
.card.r2{box-shadow:0 4px 0 var(--edge), inset 0 0 0 2px #5ed37a99}
.card.r3{box-shadow:0 4px 0 var(--edge), inset 0 0 0 2px #ffcf4acc; background:linear-gradient(#3d3178,#30276a)}
.card-top{display:flex; gap:10px; align-items:center}
.card h4{margin:0; font:900 15px/1.15 var(--ui); color:var(--ink)}
.card .rar{display:block; margin-top:3px; font:900 10px/1.2 var(--ui); text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3)}
.card.r2 .rar{color:#8ff0a6}
.card.r3 .rar{color:var(--gold)}
.dialog .card p{margin:0; font:700 13px/1.4 var(--sans); color:var(--ink-2)}
.dialog .card p.f{font-size:11.5px; color:var(--ink-3)}
.card .btn{margin-top:auto; min-height:40px; font-size:14px}
.card.sold{opacity:.4; filter:grayscale(.6)}
.dialog .bagline{margin:10px 0 0; font:800 12.5px/1.4 var(--ui); color:var(--ink-3)}
.pay{list-style:none; padding:0; margin:12px 0; display:grid; gap:6px}
.pay li{display:flex; justify-content:space-between; align-items:center; background:#00000038; border-radius:10px; padding:8px 12px; font:800 14px var(--ui); color:var(--ink-2); animation:riseIn .45s cubic-bezier(.2,1.3,.4,1) both; animation-delay:calc(var(--k) * 110ms + .1s)}
.pay b{color:var(--gold); font:700 19px var(--pixel)}
.dialog .pay-sum{text-align:center; font:700 30px/1 var(--pixel); color:var(--gold); margin:4px 0 0}
.dialog .env-rule{font:800 16px/1.4 var(--ui); color:#ffd6db}
.dialog .best{font:800 13px/1.4 var(--ui); color:var(--gold)}

/* sheets */
.sheet-wrap{position:fixed; inset:0; z-index:95; display:flex; align-items:flex-end; justify-content:center; background:#07051200; transition:background .28s}
.sheet-wrap[hidden]{display:none}
.sheet-wrap.open{background:#070512b3}
.sheet{width:min(640px,100%); max-height:84vh; overflow:auto; overscroll-behavior:contain; background:var(--panel); border:3px solid var(--edge); border-bottom:0; border-radius:24px 24px 0 0; padding:8px 14px calc(20px + env(safe-area-inset-bottom)); transform:translateY(105%); transition:transform .42s cubic-bezier(.2,1.15,.3,1); box-shadow:0 -12px 40px #000a}
.sheet-wrap.open .sheet{transform:none}
.sheet-handle{width:46px; height:5px; border-radius:3px; background:#ffffff40; margin:2px auto 6px}
.sheet-head{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px}
.sheet-head h2{font:700 21px/1.1 var(--pixel); margin:0}
.sheet .panel{background:none; border:0; box-shadow:none; padding:0}
.sheet .zoo{max-height:none}
.sheet-list{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.sheet-list button, .sheet-list a{display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-height:52px; padding:6px 12px 6px 6px; border-radius:14px; border:3px solid var(--edge); background:var(--card); color:var(--ink); text-align:left; cursor:pointer; text-decoration:none; font:900 14.5px/1.2 var(--ui); box-shadow:0 3px 0 var(--edge); transition:transform .15s cubic-bezier(.3,1.6,.5,1)}
.sheet-list button:active, .sheet-list a:active{transform:scale(.97)}
.sheet-list .num{display:grid; place-items:center; width:44px; height:38px; border-radius:10px; background:#00000040; font:700 17px var(--pixel)}
.sheet-list small{display:block; font:800 11px var(--ui); color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em}
.sheet-list .st{font:700 13px var(--pixel); color:#ffffff33; letter-spacing:1px}
.sheet-list .st b{color:var(--gold); font-weight:700}
.sheet-list [aria-current="true"]{background:var(--violet); color:#160a33}
.sheet-list [aria-current="true"] small{color:#160a3399}
.sheet-list .lv-chap{margin:10px 0 0; font:900 11px var(--ui); color:var(--ink-3); text-transform:uppercase; letter-spacing:.12em}

/* drawers (mobile) */
.drawers{display:flex; gap:6px; flex-wrap:wrap}
.drawers button{font:900 12.5px/1 var(--ui); color:var(--ink); background:#ffffff14; border:2px solid #ffffff24; border-radius:999px; padding:0 12px; min-height:36px; cursor:pointer; transition:transform .16s cubic-bezier(.3,1.6,.5,1)}
.drawers button b{color:var(--gold); margin-left:4px}
.drawers button:active{transform:scale(.92)}
.drawers button.bump{animation:pulse .45s}

/* motion */
.play.swap > *{animation:riseIn .55s cubic-bezier(.2,1.25,.4,1) both}
.play.swap > :nth-child(2){animation-delay:.05s}
.play.swap > :nth-child(3){animation-delay:.1s}
.play.swap > :nth-child(4){animation-delay:.15s}
@keyframes riseIn{from{opacity:0; transform:translateY(18px) scale(.98)}to{opacity:1; transform:none}}
.strand.intro .pod{animation:podIn .55s cubic-bezier(.2,1.5,.4,1) both; animation-delay:calc(var(--n,0) * 40ms + .15s)}
@keyframes podIn{from{opacity:0; transform:translateY(18px) scale(.82)}to{opacity:1; transform:none}}
.pod.pod-new{animation:podPop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes podPop{0%{transform:scale(.9)}55%{transform:scale(1.06)}100%{transform:none}}
.tgt.just-ok{animation:chipPop .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes chipPop{0%{transform:scale(.8)}55%{transform:scale(1.14)}100%{transform:none}}
.dialog.swap{animation:popIn .32s cubic-bezier(.2,1.4,.4,1)}
.overlay.closing{animation:fadeOut .17s ease-in forwards}
.overlay.closing .dialog{animation:popOut .17s ease-in forwards}
@keyframes fadeOut{to{opacity:0}}
@keyframes popOut{to{opacity:0; transform:scale(.92) translateY(8px)}}
.splash .crew > div{animation:dropIn .75s cubic-bezier(.2,1.5,.4,1) both; animation-delay:calc(var(--i) * 95ms + .1s)}
@keyframes dropIn{from{opacity:0; transform:translateY(-70px)}to{opacity:1; transform:none}}
.splash h1{animation:popIn .6s cubic-bezier(.2,1.6,.4,1) .5s both}
.splash .tagline{animation:riseIn .5s ease-out .65s both}
.splash .steps{animation:riseIn .5s ease-out .75s both}
.splash .acts{animation:riseIn .5s ease-out .85s both}
.overlay.splash.leaving{animation:splashOut .35s ease-in forwards}
@keyframes splashOut{to{opacity:0; transform:scale(1.04)}}
.hud-box b.tick{animation:pulse .3s}
@media (prefers-reduced-motion:reduce){
  .play.swap > *, .strand.intro .pod, .pod.pod-new, .hc.drawn, .card, .pay li, .splash *, .dialog.swap{animation:none !important}
  .sheet, .modes.ready .modes-pill{transition:none}
}

/* ---------- mobile app shell ---------- */
@media (max-width:760px){
  .topbar{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"brand hud" "modes modes"; gap:10px 8px; margin-bottom:10px}
  .brand{grid-area:brand; margin:0; min-width:0}
  .hud{grid-area:hud; flex-wrap:nowrap; gap:6px}
  .modes{grid-area:modes}
  .modes button{flex:1 1 0; padding:0 6px}
  .hud-box{min-width:0; padding:3px 9px 5px; border-radius:11px}
  .hud-box span{font-size:9.5px}
  .hud-box b{font-size:17px}
  .icon-btn{width:42px; min-height:42px}
  .levels, .side{display:none}
  .mission{padding:12px; gap:8px}
  .mission-top{gap:6px 8px}
  .mission-meta{display:none}
  button.chip-ch::after{content:" ▾"}
  .clamp{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; cursor:pointer}
  .clamp.open{display:block}
  .bt{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
  .bubble{cursor:pointer}
  .bubble.open .bt{display:block}
  .runbar{padding:10px 12px; gap:8px}
  .rb-top h2{font-size:19px}
  .rb-grid{grid-template-columns:1fr; gap:8px}
  .rb-calc{cursor:pointer}
  .rb-calc > span{flex:1 1 0; min-width:0; padding:4px 6px}
  .rb-calc b{font-size:21px}
  .rb-res b{font-size:16px}
  .rb-res span{font-size:9px}
  .rb-why{display:none}
  .runbar.show-why .rb-why{display:flex}
  .hand{--px:1.5; gap:5px; min-height:52px}
  .hc{width:40px; border-radius:11px}
  .stage-head{align-items:flex-start}
}

/* ---------- protein cloud ("brew") ---------- */
.brew{position:relative; height:108px; margin:0 0 14px; border-radius:20px; border:2px dashed #ffffff1f; background:radial-gradient(ellipse 60% 70% at 50% 62%, #ffffff10, transparent 70%), #0000002e; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:8px 12px; pointer-events:none; transition:border-color .4s, box-shadow .4s}
.brew.hot{border-color:#ffcf4a88; box-shadow:0 0 30px #ffcf4a22 inset}
.brew-label{position:relative; z-index:5; font:900 10.5px/1 var(--ui); text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3)}
.brew-meter{position:relative; z-index:5; display:flex; align-items:center; gap:7px; font:900 10.5px/1 var(--ui); text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3)}
.brew-meter i{display:block; width:72px; height:9px; border-radius:5px; background:#0007; overflow:hidden; border:2px solid var(--edge)}
.brew-meter i b{display:block; height:100%; width:0; background:linear-gradient(90deg,#3fd9d3,#ffcf4a,#ff7096); transition:width .6s cubic-bezier(.2,1.2,.3,1)}
.brew.hot .brew-meter{color:var(--gold); animation:pulse 1s ease-in-out infinite}
.brew-empty{position:absolute; inset:0; display:grid; place-items:center; font:800 13px var(--ui); color:#ffffff38}
.brew-empty[hidden]{display:none}
.brew-cv{position:absolute; left:0; top:0; z-index:4; pointer-events:none; image-rendering:pixelated}
@media (max-width:760px){ .brew{height:80px; margin-bottom:10px; padding:6px 10px} .brew-meter i{width:52px} }

/* =========================================================
   v3: experiments, a calm first view, panels that appear
   when they become useful, and a clearer G
   ========================================================= */
/* welcome: one obvious way in */
.splash .acts{flex-direction:column; align-items:center; gap:12px; margin-top:6px}
.btn--hero{font-size:23px; min-height:64px; padding:0 36px; border-radius:16px}
.more-modes{font:800 14px/1 var(--ui); color:var(--ink-3); padding:8px 6px}
.more-modes::after{content:" ▾"}
.more-modes[aria-expanded="true"]::after{content:" ▴"}
.other-modes{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; animation:riseIn .35s ease-out}
.other-modes[hidden]{display:none}

/* panels and drawer chips: shown in the side column once unlocked, otherwise a small chip */
.targets[hidden]{display:none}
.stage-title:empty{display:none}
.drawers button.dim{opacity:.62; font-weight:800}
.drawers button.dim b{color:var(--ink-3)}
#sheetBody .panel{display:block}
@media (min-width:761px){
  #bookPanel, #zooPanel, #codonPanel{display:none}
  body.has-book #bookPanel, body.has-zoo #zooPanel, body.has-codon #codonPanel{display:block}
  body.has-book .drawers [data-d="bookPanel"], body.has-zoo .drawers [data-d="zooPanel"], body.has-codon .drawers [data-d="codonPanel"], .drawers [data-d="cellPanel"]{display:none}
  body.no-side .side{display:none}
  body.no-side .layout{grid-template-columns:minmax(0,1040px); justify-content:center}
  body.no-side .levels{max-width:1040px; margin:0 auto}
  .drawers button{min-height:32px; font-size:12px}
}
.panel.fresh{animation:panelIn .7s cubic-bezier(.2,1.3,.4,1)}
@keyframes panelIn{0%{opacity:0; transform:translateY(16px) scale(.96); box-shadow:0 5px 0 var(--edge), 0 0 0 0 #3fd9d300}60%{box-shadow:0 5px 0 var(--edge), 0 0 0 6px #3fd9d366}100%{opacity:1; transform:none}}

/* calm: while experimenting there are no scores to chase */
body.calm .hud-box, body.calm .legend, body.calm .brew-meter{display:none}
body.calm .modes{opacity:.6; transition:opacity .2s}
body.calm .modes:hover, body.calm .modes:focus-within{opacity:1}
body.calm .mission{gap:8px}
body.calm .mission h2{font-size:22px}
body.calm #mGoal{font:900 17px/1.35 var(--ui); color:var(--ink)}
body[data-mode="mission"] #sendBtn{display:none}
body[data-mode="mission"] #resetBtn{grid-column:span 2}
.btn.pulse{animation:nestPulse 1s ease-in-out infinite}
.mission-meta{display:flex; align-items:center; gap:6px}
.mission-meta .dot{display:block; width:11px; height:11px; border-radius:50%; background:#ffffff1f; border:2px solid #ffffff26}
.mission-meta .dot.now{background:var(--gold); border-color:var(--gold); animation:nextGlow 1.3s ease-in-out infinite}
.mission-meta .dot.on{background:var(--green); border-color:var(--green)}
#mGoal.bump{animation:chipPop .5s cubic-bezier(.2,1.6,.4,1)}

/* levels: experiments get a check, challenges wait */
.lv--exp small{font-size:13px; color:#ffffff40}
.lv--exp small b{color:var(--green)}
.lv-lock{flex:none; font:800 12px/1 var(--ui); color:var(--ink-3); padding:9px 12px; border:2px dashed #ffffff24; border-radius:999px; margin-left:10px; white-space:nowrap}

/* attempts and comparisons */
.tries{display:flex; flex-wrap:wrap; gap:5px}
.try, .oc{display:inline-flex; align-items:center; gap:5px}
.try{padding:4px 8px; border-radius:9px; background:#00000040; border:2px solid #ffffff14; font:800 12px/1 var(--ui); color:var(--ink-2); animation:chipPop .4s cubic-bezier(.2,1.6,.4,1)}
.try b{letter-spacing:.06em; color:var(--ink)}
.try.now{border-color:#ffcf4aaa}
.try img, .oc img{width:22px; height:22px; image-rendering:pixelated}
.try .zz{font-style:italic; color:var(--ink-3)}

/* the build itself: locked part, the letters to change, missing bases */
.slot.locked{cursor:default}
.slot.locked .lbl{opacity:.55}
.slot.focus::after{content:""; position:absolute; left:50%; bottom:11px; width:calc(var(--px) * 15px); height:calc(var(--px) * 4px); transform:translateX(-50%); border-radius:50%; background:#ffcf4a33; box-shadow:0 0 0 2px #ffcf4a99; animation:nextGlow 1.3s ease-in-out infinite; pointer-events:none}
.nest.off{opacity:.28; filter:grayscale(1); cursor:not-allowed}
.nest.off:hover{transform:none}
.nest.off:hover .cr-wrap{animation:none}

/* an empty cloud folds away */
.brew{transition:height .42s cubic-bezier(.2,1,.3,1), margin .42s, padding .42s, opacity .3s, border-color .4s, box-shadow .4s}
.brew.is-empty{height:0; margin-bottom:0; padding-top:0; padding-bottom:0; border-width:0; opacity:0}

/* Ribbe falls asleep without a start */
.talk.sleep .ribo{filter:grayscale(.7) brightness(.8); animation:none; transform:rotate(-8deg) translateY(3px)}
.talk.sleep::before{content:"z Z"; position:absolute; left:66px; top:-4px; font:700 17px/1 var(--pixel); color:var(--ink-2); animation:zzz 2.2s ease-in-out infinite; pointer-events:none}
@keyframes zzz{0%,100%{opacity:.3; transform:translateY(4px)}50%{opacity:1; transform:translateY(-4px)}}

/* the history behind an experiment */
.dialog .learned{font:800 18px/1.4 var(--ui); color:var(--ink); background:#5ed37a1f; border:2px solid #5ed37a66; border-radius:14px; padding:12px 14px; margin:4px 0 0}
.fact.unlock{border-color:#ffcf4a66; background:#ffcf4a14}
.fact.unlock h3{color:var(--gold)}

@media (max-width:760px){
  body.calm .mission-meta{display:flex}
  body.calm #mGoal{font-size:15.5px}
  .lv-lock{margin-left:4px}
  .btn--hero{font-size:20px; min-height:58px}
}
@media (prefers-reduced-motion:reduce){
  .panel.fresh, .try, .other-modes, #mGoal.bump, .talk.sleep::before, .mission-meta .dot.now, .slot.focus::after{animation:none !important}
  .brew{transition:none}
}

/* =========================================================
   v4: the page fits the window, pearls with letters,
   discoveries that never lock the game
   ========================================================= */
/* the page is exactly as tall as it needs: no scrollbar unless the content really is taller than the window */
body{min-height:100dvh; display:flex; flex-direction:column}
.app{flex:1 0 auto; width:100%; padding-bottom:12px}
.foot{padding:4px 16px 10px}
@media (min-width:761px){
  /* the side column scrolls by itself instead of stretching the page */
  .side{position:sticky; top:12px; align-content:start; max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding-bottom:6px}
  /* one panel at a time */
  .side > .panel{display:none !important}
  .side > .panel.on{display:block !important}
  .side.tabbed > #bookPanel > h3, .side.tabbed > #zooPanel > h3, .side.tabbed > #codonPanel > h3{display:none}
  body[data-mode="mission"] .tools{grid-template-columns:repeat(3,minmax(0,1fr)); width:300px}
  body[data-mode="mission"] #resetBtn{grid-column:auto}
}

/* while experimenting: no empty chips, no panel column, a slimmer frame */
body.calm .drawers button.dim{display:none}
body.calm:not(.has-zoo) .stage-head{display:none}
@media (min-width:761px){
  .app{padding-top:10px}
  .levels{padding:3px 4px 7px}
  .lv{height:52px}
  .play{gap:12px}
  .mission{padding:12px 16px}
  .stage-head{margin-bottom:8px}
  body.no-side .drawers [data-d]{display:inline-flex}
  body.calm .levels{padding:2px 4px 8px}
  body.calm .lv{width:48px; height:48px; font-size:17px; border-radius:11px}
  body.calm .talk{margin-bottom:10px}
  body.calm .brew{height:92px}
}

/* after a discovery Ribbe also asks the next question */
.bt .ask{display:block; margin-top:6px; color:#4a3a8a}

/* discoveries can be read again */
.found{font:800 12px/1 var(--ui); color:#bff5cb; background:#5ed37a1f; border:2px solid #5ed37a59; border-radius:999px; padding:5px 10px; cursor:pointer; animation:chipPop .4s cubic-bezier(.2,1.6,.4,1)}
.found:hover{background:#5ed37a33}

/* an experiment is done, but the bench stays open */
.m-next{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; animation:riseIn .4s ease-out}
.m-next[hidden]{display:none}
.m-next .btn{min-height:44px}
.m-unlock{flex-basis:100%; margin:0; font:900 14px/1.35 var(--ui); color:var(--gold)}

/* colour key under the codon table */
.cls-key{display:flex; flex-wrap:wrap; gap:4px 12px; margin:10px 0 0; font:800 11.5px/1.2 var(--ui); color:var(--ink-2)}
.cls-key span{display:inline-flex; align-items:center; gap:5px}
.cls-key i{width:11px; height:11px; border-radius:50%; border:2px solid var(--edge)}

@media (prefers-reduced-motion:reduce){
  .found, .m-next{animation:none}
}

/* side column tabs */
.side-tabs{display:flex; gap:4px; padding:4px; background:#0000004d; border:3px solid var(--edge); border-radius:14px; box-shadow:0 4px 0 var(--edge)}
.side-tabs[hidden]{display:none}
.side-tabs button{flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:36px; padding:0 8px; border:0; border-radius:10px; background:transparent; color:var(--ink-2); font:600 14px/1 var(--pixel); cursor:pointer; white-space:nowrap}
.side-tabs button b{font:900 11px/1 var(--ui); color:var(--gold)}
.side-tabs button[aria-selected="true"]{background:var(--violet); color:#1b0f3d; box-shadow:inset 0 -3px 0 #0003}
.side-tabs button[aria-selected="true"] b{color:#1b0f3d}
.side-tabs button:focus-visible{outline:3px solid var(--gold); outline-offset:1px}
@media (max-width:760px){ .side-tabs{display:none} }

/* the level strip scrolls sideways without a scrollbar of its own; faded edges show there is more */
.levels{scrollbar-width:none}
.levels::-webkit-scrollbar{display:none}
.levels.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.levels.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px); mask-image:linear-gradient(90deg,transparent,#000 48px)}
.levels.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent); mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}