/* TestMyDeck simulator interface. Author: Dan Rodriguez. */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500;600;700;800&family=Rajdhani:wght@500;600;700&display=swap');
:root{
  --bg:#0b1118;
  --panel:#121922;
  --panel2:#0f1620;
  --text:#e7eef8;
  --muted:#97a6b7;
  --accent:#31a8ff;
  --accent2:#77e2ff;
  --border:#2a3542;
  --card-w:132px;
  --card-h:184px;
  --card-mini-w:58px;
  --card-mini-h:81px;
}
*{box-sizing:border-box}
body{margin:0;min-width:320px;background:radial-gradient(circle at top,#152130 0%,var(--bg) 34rem);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}
button,input,textarea{font:inherit}
button,.file-button{border:1px solid var(--border);background:#1b2734;color:var(--text);border-radius:8px;min-height:38px;padding:8px 12px;cursor:pointer}
button:hover,.file-button:hover{background:#253548}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.secondary{background:transparent}
button.danger{border-color:#66323a}
.version{font-size:.65em;color:var(--accent2);font-weight:700}
.app-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px 10px}
.app-header h1{margin:0;font-size:clamp(1.3rem,3vw,2rem)}
.subtitle{color:var(--muted);margin-top:3px}
.header-actions,.button-row{display:flex;flex-wrap:wrap;gap:8px}
.game-strip{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:8px 20px;border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid var(--border);background:#0d141d}
.phase-block{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.phase-block>div{display:grid;min-width:90px}
.mini-label,.life-label{font-size:.65rem;letter-spacing:.1em;color:var(--muted);font-weight:800}
.compact-btn{min-height:32px;padding:4px 9px}
.life-panels{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:10px;min-width:340px}
.life-stack{background:rgba(18,25,34,.82);border:1px solid var(--border);border-radius:12px;padding:10px;display:grid;gap:7px}
.life-stack-title{font-size:.72rem;letter-spacing:.12em;color:var(--accent2);font-weight:800}
.life-row{display:flex;align-items:center;gap:6px}
.life-row button{min-height:30px;padding:2px 8px}
.life-row strong{min-width:25px;text-align:center;font-size:1.05rem}
.size-control{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.78rem}
.size-control input{width:110px}
.toolbar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 20px;background:rgba(9,13,18,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.toolbar-sep{width:1px;height:30px;background:var(--border);margin:0 4px}
.board{padding:14px;display:grid;gap:12px;position:relative}
.link-overlay{position:fixed;inset:0;pointer-events:none;z-index:18;overflow:visible}
.tether-line{stroke:#ffb24c;stroke-width:4.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,178,76,.55))}
.tether-knot{fill:#ffd28c;filter:drop-shadow(0 0 5px rgba(255,178,76,.65))}
.top-row{display:grid;grid-template-columns:minmax(160px,.8fr) minmax(160px,.8fr) minmax(340px,1.6fr) minmax(170px,.7fr);gap:12px}
.zone{min-width:0;background:rgba(18,25,34,.82);border:1px solid var(--border);border-radius:12px;padding:10px;position:relative}
.zone.drag-over{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.zone-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:8px;font-weight:700}
.zone-cards{min-height:calc(var(--card-h) + 12px);display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start;position:relative}
.large-zone{min-height:215px}
.strip-zone{min-height:205px;max-height:430px;overflow:auto}
.single-slot{justify-content:center}
.protocol-slots{display:grid;grid-template-columns:repeat(3,minmax(100px,1fr));gap:8px}
.protocol-slot{position:relative;min-height:204px;justify-content:center;border:1px dashed #3a4b5f;border-radius:8px;padding:5px}
.slot-label{position:absolute;top:4px;right:6px;color:var(--muted);font-size:.7rem}
.stats-panel{background:rgba(18,25,34,.82);border:1px solid var(--border);border-radius:12px;padding:10px 14px;display:grid;align-content:center;gap:8px}
.stats-panel div{display:flex;justify-content:space-between;gap:12px;color:var(--muted)}
.stats-panel strong{color:var(--text);font-size:.88rem}
.lower-grid{display:grid;grid-template-columns:150px 150px minmax(220px,1.2fr) minmax(220px,1fr) minmax(220px,1fr);gap:12px}
.pile-zone{text-align:center}
.pile-card{margin:0 auto;width:94px;height:132px;border:2px solid #42546a;border-radius:8px;display:grid;place-items:center;font-size:1.65rem;font-weight:800;background:repeating-linear-gradient(135deg,#162230,#162230 9px,#1e3042 9px,#1e3042 18px);box-shadow:6px 6px 0 #0d131b,10px 10px 0 #222f3e}
.ram-pile{background:repeating-linear-gradient(135deg,#172830,#172830 9px,#244652 9px,#244652 18px)}
.pile-note{color:var(--muted);font-size:.72rem;margin-top:10px}
.card-shell{width:var(--card-w);height:var(--card-h);position:relative;flex:0 0 auto;overflow:visible}
.card-shell.has-attached{margin:6px 10px 14px 10px}
.card-shell:hover{z-index:50}
.card{position:absolute;inset:0;border-radius:9px;user-select:none;cursor:pointer;transform-origin:center center;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease,opacity .16s ease;box-shadow:0 0 0 2px rgba(49,168,255,.88),0 0 18px rgba(49,168,255,.35);background:#1b2633;border:1px solid #4c6175;overflow:hidden;z-index:3}
.card.spent{box-shadow:0 0 0 1px #47515e;filter:saturate(.72) brightness(.86)}
.card.running{transform:rotate(90deg) scale(.71)}
.card.dragging{opacity:.45}
.card-shell:hover > .card:not(.running){transform:scale(1.72) translateY(-12px);z-index:60}
.card-shell:hover > .card.running{transform:rotate(90deg) scale(1.15) translateY(-6px);z-index:60}
.card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.card-fallback{height:100%;padding:10px;display:flex;flex-direction:column;background:linear-gradient(155deg,#213348,#111821 60%)}
.card-fallback .cost{font-size:1.1rem;font-weight:900;color:var(--accent2)}
.card-fallback .name{margin-top:10px;font-size:.95rem;line-height:1.05;font-weight:800}
.card-fallback .meta{margin-top:auto;font-size:.68rem;color:var(--muted)}
.card-attached-flag{position:absolute;left:5px;bottom:5px;background:rgba(8,12,18,.86);border:1px solid #60748a;color:#bdeaff;border-radius:999px;padding:2px 5px;font-size:.55rem;font-weight:900;z-index:4}
.badges{position:absolute;inset:4px;pointer-events:none;z-index:4}
.badge{position:absolute;padding:2px 5px;border-radius:999px;font-size:.58rem;font-weight:900;letter-spacing:.03em;background:rgba(4,8,12,.9);border:1px solid #60748a}
.spent-badge{top:0;left:0;color:#ffb1b7;border-color:#a14d56}
.ram-badge{top:0;right:0;color:#bdeaff;border-color:#3888ad}
.counter-badge{right:0;bottom:0;max-width:100%;white-space:normal;text-align:right}
.card-host-ring{position:absolute;inset:-5px;border:1px dashed rgba(119,226,255,.55);border-radius:14px;pointer-events:none}
.attached-layer{position:absolute;inset:-22px;pointer-events:none;z-index:2}
.gear-anchor{position:absolute;display:flex;gap:6px;pointer-events:none}
.gear-anchor .mini-shell{pointer-events:auto}
.slot-head{top:-10px;left:50%;transform:translateX(-50%)}
.slot-arms{left:-28px;top:50%;transform:translateY(-50%);flex-direction:column}
.slot-torso{right:-28px;top:50%;transform:translateY(-50%);flex-direction:column}
.slot-legs{left:50%;bottom:-10px;transform:translateX(-50%)}
.slot-utility{right:-24px;bottom:-4px;flex-direction:column}
.slot-mainframe-left{left:-22px;top:48%;transform:translateY(-50%)}
.slot-mainframe-top{left:50%;top:-16px;transform:translateX(-50%)}
.slot-mainframe-right{right:-22px;top:48%;transform:translateY(-50%)}
.mini-shell{width:var(--card-mini-w);height:var(--card-mini-h);position:relative;overflow:visible}
.mini-shell .card{box-shadow:0 0 0 1px rgba(49,168,255,.8),0 0 10px rgba(49,168,255,.25);border-width:1px}
.mini-shell:hover{z-index:70}
.mini-shell:hover > .card:not(.running){transform:scale(1.85) translateY(-4px)}
.mini-shell:hover > .card.running{transform:rotate(90deg) scale(1.2)}
.slot-chip{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);background:rgba(10,14,20,.92);border:1px solid #5e7288;border-radius:999px;padding:1px 5px;font-size:.52rem;color:#c7d4e0;font-weight:900;letter-spacing:.06em;pointer-events:none;z-index:4}
.protocol-mini-note{margin-top:8px;display:flex;justify-content:center;gap:8px;min-height:28px}
.protocol-mini-tile{display:flex;align-items:center;gap:5px;border:1px solid #334455;background:#111823;border-radius:999px;padding:4px 7px;color:#c4d4e3;font-size:.66rem}
.protocol-mini-tile img{width:18px;height:26px;border-radius:3px;object-fit:cover}
.context-menu{position:fixed;z-index:100;width:235px;max-height:78vh;overflow:auto;background:#101821;border:1px solid #3b4b5e;border-radius:10px;padding:6px;box-shadow:0 18px 48px rgba(0,0,0,.45)}
.context-menu.hidden{display:none}
.context-menu button{width:100%;border:0;background:transparent;text-align:left;min-height:32px;padding:6px 8px}
.context-menu button:hover{background:#1e2b3a}
.context-title{padding:7px 8px 8px;font-weight:800;font-size:.78rem;color:var(--accent2)}
.menu-divider{height:1px;background:var(--border);margin:5px}
.modal{width:min(800px,94vw);border:1px solid var(--border);border-radius:12px;padding:0;color:var(--text);background:#111923}
.wide-modal{width:min(1120px,96vw)}
.modal::backdrop{background:rgba(0,0,0,.7)}
.modal-shell{padding:18px}
.modal-head{display:flex;justify-content:space-between;gap:12px;align-items:start;margin-bottom:14px}
.modal h2,.modal h3{margin:0 0 4px}
.modal p{margin:0;color:var(--muted)}
.icon-btn{min-width:40px;padding:5px;font-size:1.35rem}
.text-input,textarea,input[type=number]{color:var(--text);background:#0b1118;border:1px solid var(--border);border-radius:8px;padding:10px}
.text-input,textarea{width:100%}
#deckText{min-height:440px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem}
.search-results{display:grid;gap:8px;margin-top:12px;max-height:62vh;overflow:auto}
.search-row{display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center;background:#17212d;border:1px solid var(--border);border-radius:8px;padding:8px 10px}
.search-thumb{width:50px;height:70px;object-fit:cover;border-radius:5px;background:#0b1118}
.search-row .muted,.muted{color:var(--muted);font-size:.75rem}
.search-actions{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}
.search-actions button{min-height:30px;font-size:.72rem;padding:4px 7px}
.data-grid,.analytics-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}
.help{font-size:.78rem;margin-top:9px!important;line-height:1.45}
code{color:#bdeaff}
.status-box{margin-top:12px;min-height:46px;padding:9px;background:#0b1118;border:1px solid var(--border);border-radius:8px;color:var(--muted);font-size:.78rem}
.toast{position:fixed;z-index:120;left:50%;bottom:22px;transform:translateX(-50%) translateY(15px);background:#172331;border:1px solid #3a526c;border-radius:9px;padding:9px 13px;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;margin-top:12px;max-height:65vh;overflow:auto}
.library-card{background:#151f2b;border:1px solid var(--border);border-radius:10px;padding:8px;display:grid;gap:6px}
.library-card img{width:100%;aspect-ratio:5/7;object-fit:cover;border-radius:7px;background:#0b1118}
.library-card strong{font-size:.75rem;line-height:1.15}
.library-card .button-row button{font-size:.68rem;padding:4px;min-height:28px}
.peek-controls{display:flex;gap:8px;align-items:center}
.peek-controls input{width:70px}
.analytics-grid label{display:grid;gap:5px;margin-bottom:10px;color:var(--muted);font-size:.8rem}
.analytics-grid textarea{min-height:220px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem}
.analytics-results{display:grid;gap:8px}
.result-row{background:#17212d;border:1px solid var(--border);border-radius:8px;padding:10px}
.result-row strong{display:flex;justify-content:space-between;gap:10px}
.bar{height:8px;background:#0b1118;border-radius:999px;margin-top:7px;overflow:hidden}.bar span{display:block;height:100%;background:var(--accent);border-radius:999px}
.file-button{display:inline-flex;align-items:center}.file-button input{display:none}
@media(max-width:1180px){.top-row{grid-template-columns:repeat(2,minmax(0,1fr))}.lower-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lower-grid>:nth-child(n+3){grid-column:span 2}.game-strip{align-items:flex-start;flex-direction:column}.life-panels{min-width:0}}
@media(max-width:760px){:root{--card-w:112px;--card-h:156px;--card-mini-w:48px;--card-mini-h:67px}.app-header{align-items:flex-start;flex-direction:column}.toolbar{padding:8px}.top-row,.lower-grid,.data-grid,.analytics-grid{grid-template-columns:1fr}.lower-grid>:nth-child(n+3){grid-column:auto}.protocol-slots{grid-template-columns:repeat(3,minmax(80px,1fr));overflow-x:auto}.zone-cards{min-height:calc(var(--card-h) + 12px)}.search-row{grid-template-columns:48px 1fr}.search-actions{grid-column:1/-1;justify-content:flex-start}.life-panels{grid-template-columns:1fr}.library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== v0.4 compact-board refinements ===== */
:root{--card-w:108px;--card-h:151px;--card-mini-w:48px;--card-mini-h:67px;--ram-w:54px;--ram-h:75px}
.zone-title span{color:#c7d7e8;font-weight:800;letter-spacing:0;text-transform:none}
.lower-grid{grid-template-columns:138px minmax(430px,2.5fr) minmax(150px,.75fr) minmax(150px,.75fr);align-items:start}
.pile-stack{display:grid;gap:10px}
.pile-stack .zone{padding:8px}
.pile-stack .pile-card{width:82px;height:114px;font-size:1.35rem;box-shadow:5px 5px 0 #0d131b,8px 8px 0 #222f3e}
.pile-stack .compact-pile-card{height:92px}
.ram-bank-zone{min-height:220px}
.ram-bank-cards{min-height:175px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;overflow:visible}
.ram-shell{width:var(--ram-w);height:var(--ram-h);position:relative;flex:0 0 auto;overflow:visible}
.ram-shell .card{border-radius:6px}
.ram-shell .badges{inset:2px}
.ram-shell .badge{font-size:.46rem;padding:1px 3px}
.ram-shell > .card:hover:not(.running){transform:scale(3.35) translateY(-10px);z-index:90}
.ram-shell > .card.running:hover{transform:rotate(90deg) scale(2.25) translateY(-6px);z-index:90}
.compact-pile-zone{min-height:220px;transition:min-height .22s ease,grid-column .22s ease}
.collapsed-stack-zone{min-height:165px;max-height:175px;display:flex;flex-wrap:nowrap;align-items:flex-start;overflow:hidden;padding:4px 2px 8px 2px;transition:max-height .2s ease}
.collapsed-stack-zone .card-shell{margin-left:calc(var(--card-w) * -.82);transition:margin .2s ease}
.collapsed-stack-zone .card-shell:first-child{margin-left:0}
.compact-pile-zone.expanded{grid-column:span 2;z-index:24}
.compact-pile-zone.expanded .collapsed-stack-zone{max-height:430px;min-height:230px;overflow:auto;flex-wrap:wrap;gap:10px}
.compact-pile-zone.expanded .collapsed-stack-zone .card-shell{margin-left:0}
.card-shell{width:var(--card-w);height:var(--card-h)}
.card-shell:hover{z-index:80}
.card-shell:hover > .card:not(.running){transform:none}
.card-shell:hover > .card.running{transform:rotate(90deg) scale(.71)}
.card:hover:not(.running){transform:scale(2.45) translateY(-13px);z-index:85}
.card.running:hover{transform:rotate(90deg) scale(1.68) translateY(-8px);z-index:85}
.mini-shell:hover > .card:not(.running){transform:none}
.mini-shell:hover > .card.running{transform:rotate(90deg) scale(.71)}
.mini-shell .card:hover:not(.running){transform:scale(3.25) translateY(-8px);z-index:95}
.mini-shell .card.running:hover{transform:rotate(90deg) scale(2.15) translateY(-5px);z-index:95}
.attached-layer{z-index:6}
.gear-anchor{z-index:7}
.slot-gear-top{top:-18px;left:50%;transform:translateX(-50%)}
.slot-gear-bottom{bottom:-20px;left:50%;transform:translateX(-50%)}
.slot-gear-left{left:-28px;top:50%;transform:translateY(-50%);flex-direction:column}
.slot-gear-right{right:-28px;top:50%;transform:translateY(-50%);flex-direction:column}
.slot-gear-utility{right:-24px;bottom:-6px;flex-direction:column}
.cache-modal{width:min(760px,94vw)}
.cache-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.cache-toolbar .text-input{flex:1 1 250px;width:auto}
.cache-status{color:var(--accent2);font-size:.78rem;font-weight:800;margin:8px 0}
.cache-list{display:grid;gap:8px;max-height:55vh;overflow:auto;padding:4px}
.cache-empty{border:1px dashed var(--border);border-radius:10px;padding:20px;text-align:center;color:var(--muted)}
.cache-item{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;background:#17212d;border:1px solid var(--border);border-radius:10px;padding:8px 10px;position:relative;overflow:hidden}
.cache-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.cache-item img{width:36px;height:50px;object-fit:cover;border-radius:4px;background:#0b1118}
.cache-item .cache-order{font-size:.68rem;color:var(--muted)}
.cache-item .cache-name{font-weight:800}
.cache-item .cache-note{font-size:.72rem;color:var(--muted);margin-top:2px}
.cache-item.resolving{animation:cacheDigitize .75s steps(8,end) forwards}
@keyframes cacheDigitize{0%{opacity:1;filter:none;transform:translateX(0)}55%{opacity:.7;filter:contrast(1.6) saturate(.3);transform:translateX(6px)}100%{opacity:0;filter:blur(5px);transform:translateX(70px) scale(.94)}}
@media(max-width:1180px){.lower-grid{grid-template-columns:130px minmax(320px,2fr) minmax(145px,.8fr)}.compact-pile-zone.expanded{grid-column:span 2}.lower-grid>.compact-pile-zone:last-child{grid-column:auto}.ram-bank-zone{grid-column:span 2}}
@media(max-width:760px){:root{--card-w:96px;--card-h:134px;--card-mini-w:44px;--card-mini-h:61px;--ram-w:48px;--ram-h:67px}.lower-grid{grid-template-columns:1fr}.ram-bank-zone,.compact-pile-zone.expanded{grid-column:auto}.pile-stack{grid-template-columns:1fr 1fr}.card:hover:not(.running){transform:scale(1.9) translateY(-8px)}.mini-shell .card:hover:not(.running){transform:scale(2.4) translateY(-5px)}}

/* ===== v0.5 readability + layout pass ===== */
:root{
  --card-w:96px;
  --card-h:134px;
  --card-mini-w:43px;
  --card-mini-h:60px;
  --ram-w:42px;
  --ram-h:59px;
}

button:disabled{opacity:.38;cursor:not-allowed;background:#141c25!important;color:#697787!important}

/* Compact primary toolbar + dropdown for secondary actions */
.toolbar{gap:9px;padding:9px 20px;overflow:visible}
.toolbar-more{position:relative;z-index:45}
.toolbar-more>summary{list-style:none;border:1px solid var(--border);background:#1b2734;color:var(--text);border-radius:8px;min-height:38px;padding:8px 12px;cursor:pointer;display:flex;align-items:center}
.toolbar-more>summary::-webkit-details-marker{display:none}
.toolbar-more[open]>summary{background:#253548}
.toolbar-more-menu{position:absolute;top:calc(100% + 6px);left:0;width:230px;padding:7px;background:#101821;border:1px solid #3b4b5e;border-radius:10px;box-shadow:0 18px 48px rgba(0,0,0,.5);display:grid;gap:4px}
.toolbar-more-menu button{width:100%;text-align:left;border:0;background:transparent;min-height:32px;padding:6px 8px}
.toolbar-more-menu button:hover{background:#1e2b3a}

/* Tighter top row. Environment and Protocol slots only need card-sized footprints. */
.top-row{grid-template-columns:minmax(215px,1.05fr) calc(var(--card-w) + 28px) minmax(340px,1.45fr) 185px;align-items:start}
[data-zone="environment"]{width:calc(var(--card-w) + 28px);justify-self:center;padding:8px}
#environmentZone{min-height:calc(var(--card-h) + 4px)}
.protocol-zone{padding:8px;min-width:0}
.protocol-slots{grid-template-columns:repeat(3,calc(var(--card-w) + 12px));gap:7px;justify-content:center}
.protocol-slot{min-height:calc(var(--card-h) + 10px);width:calc(var(--card-w) + 12px);padding:4px}
.protocol-slot .card-shell{margin:auto}
.ram-summary-panel{padding:12px;align-content:start;gap:12px;min-height:96px}
.ram-summary-panel div{font-size:.9rem}
.ram-summary-panel span{font-weight:900;color:var(--accent2);font-size:1.05rem}

/* Cleaner board density */
.zone-cards{gap:8px;min-height:calc(var(--card-h) + 10px)}
.large-zone{min-height:185px}
.card-shell.has-attached{margin:8px 16px 14px 16px}
.lower-grid{grid-template-columns:126px minmax(500px,3fr) minmax(138px,.66fr) minmax(138px,.66fr);gap:10px}
.ram-bank-zone{min-height:198px}
.ram-bank-cards{min-height:150px;gap:6px}
.compact-pile-zone{min-height:195px}
.collapsed-stack-zone{min-height:145px;max-height:152px}

/* Visual hover still enlarges cards, but Current Focus does the heavy lifting. */
.card-shell:hover{z-index:84}
.card-shell:hover > .card:not(.running){transform:scale(1.62) translateY(-8px)!important;z-index:88}
.card-shell:hover > .card.running{transform:rotate(90deg) scale(1.12) translateY(-4px)!important;z-index:88}
/* When the pointer is specifically on an equipped mini-card, don't also enlarge the host. */
.card-shell:has(.mini-shell:hover) > .card:not(.running){transform:none!important}
.card-shell:has(.mini-shell:hover) > .card.running{transform:rotate(90deg) scale(.71)!important}

/* Attached Gear sits above its host and remains independently hoverable/readable. */
.attached-layer{z-index:12;pointer-events:none;overflow:visible}
.gear-anchor{z-index:14;pointer-events:none}
.gear-anchor .mini-shell{pointer-events:auto;z-index:15}
.mini-shell:hover{z-index:110!important}
.mini-shell:hover > .card:not(.running){transform:scale(2.05) translateY(-4px)!important;z-index:112!important}
.mini-shell:hover > .card.running{transform:rotate(90deg) scale(1.42) translateY(-3px)!important;z-index:112!important}
.slot-gear-top{top:-23px;left:50%;transform:translateX(-50%)}
.slot-gear-bottom{bottom:-24px;left:50%;transform:translateX(-50%)}
.slot-gear-left{left:-32px;top:50%;transform:translateY(-50%);flex-direction:column}
.slot-gear-right{right:-32px;top:50%;transform:translateY(-50%);flex-direction:column}
.slot-mainframe-left{left:-28px}
.slot-mainframe-right{right:-28px}
.slot-mainframe-top{top:-22px}

/* RAM is deliberately tiny at rest; focus inspector makes it readable if needed. */
.ram-shell{width:var(--ram-w);height:var(--ram-h)}
.ram-shell > .card:hover:not(.running){transform:scale(1.7) translateY(-4px)!important;z-index:90}
.ram-shell > .card.running:hover{transform:rotate(90deg) scale(1.18)!important;z-index:90}

/* Current Focus: an upright, readable version of whatever card is under the pointer. */
.focus-inspector{position:fixed;right:14px;top:132px;width:min(330px,28vw);padding:10px;background:rgba(10,15,22,.97);border:1px solid #49617b;border-radius:13px;box-shadow:0 22px 60px rgba(0,0,0,.58),0 0 28px rgba(49,168,255,.16);z-index:98;pointer-events:none;transition:opacity .12s ease,transform .12s ease}
.focus-inspector.hidden{display:none}
.focus-kicker{font-size:.65rem;letter-spacing:.14em;color:var(--accent2);font-weight:900;margin-bottom:7px}
.focus-inspector img{display:block;width:100%;max-height:68vh;object-fit:contain;border-radius:9px;background:#080d13}
.focus-name{font-weight:900;margin-top:8px;font-size:.9rem}
.focus-meta{font-size:.68rem;color:var(--muted);margin-top:3px;line-height:1.25}

/* Collapsed bins are stacks; deliberate hover expands the zone. */
.collapsed-stack-zone .card-shell{margin-left:calc(var(--card-w) * -.84)}
.compact-pile-zone.expanded{grid-column:span 2;z-index:30}
.compact-pile-zone.expanded .collapsed-stack-zone{max-height:420px;min-height:215px;overflow:auto;flex-wrap:wrap;gap:8px}

@media(max-width:1180px){
  .top-row{grid-template-columns:minmax(200px,1fr) calc(var(--card-w) + 26px) minmax(310px,1.4fr)}
  .ram-summary-panel{grid-column:1/-1;display:flex;gap:24px;min-height:auto}
  .lower-grid{grid-template-columns:120px minmax(340px,2fr) minmax(135px,.75fr)}
  .ram-bank-zone{grid-column:span 2}
  .focus-inspector{width:300px;top:118px}
}
@media(max-width:760px){
  :root{--card-w:88px;--card-h:123px;--card-mini-w:40px;--card-mini-h:56px;--ram-w:38px;--ram-h:53px}
  .top-row{grid-template-columns:1fr}
  [data-zone="environment"]{width:100%;justify-self:stretch}
  .protocol-slots{grid-template-columns:repeat(3,minmax(82px,1fr));overflow-x:auto}
  .protocol-slot{width:auto}
  .lower-grid{grid-template-columns:1fr}
  .ram-bank-zone,.compact-pile-zone.expanded{grid-column:auto}
  .focus-inspector{right:7px;left:7px;top:auto;bottom:8px;width:auto;max-height:72vh}
  .focus-inspector img{max-height:58vh}
}


/* v0.6 layout pass: get everything on screen with less scrolling */
:root{--card-w:90px;--card-h:125px;--card-mini-w:42px;--card-mini-h:58px;--ram-w:34px;--ram-h:48px}
body{overflow-y:auto}
.app-header{padding:10px 14px 6px}
.toolbar{padding:8px 14px 10px}
.board{padding:8px 14px 14px;max-width:calc(100vw - 28px)}
.top-row{grid-template-columns:minmax(240px,1.15fr) calc(var(--card-w) + 20px) minmax(300px,1.4fr);gap:10px}
.mainframe-panel{position:relative;padding:8px 8px 10px}
.mf-quickbar{display:flex;gap:16px;align-items:center;justify-content:flex-start;margin:2px 0 6px;font-size:.72rem;letter-spacing:.04em;color:#91a6bd;font-weight:700;opacity:.92}
.mf-quickbar strong{font-size:.96rem;color:var(--accent2);margin-left:5px}
[data-zone="environment"]{width:calc(var(--card-w) + 20px);padding:6px}
#environmentZone{min-height:calc(var(--card-h) + 2px)}
.protocol-zone{padding:6px 8px 8px}
.protocol-slots{grid-template-columns:repeat(3,calc(var(--card-w) + 6px));gap:6px;justify-content:flex-start}
.protocol-slot{min-height:calc(var(--card-h) + 4px);width:calc(var(--card-w) + 6px);padding:3px}
.zone{padding:8px 10px}
.zone-title{margin-bottom:6px;font-size:.84rem}
.zone-cards{gap:6px;min-height:calc(var(--card-h) + 6px)}
.battlefield-zone .large-zone{min-height:162px}
.resource-grid{display:grid;grid-template-columns:118px minmax(380px,1fr) minmax(132px,.34fr) minmax(132px,.34fr);grid-template-rows:auto auto;grid-template-areas:"piles hand hand hand" "piles ram recycle purge";gap:10px;align-items:start}
.side-piles{grid-area:piles;display:grid;grid-template-rows:1fr 1fr;gap:10px;height:100%}
.side-piles .pile-zone{display:flex;flex-direction:column;justify-content:flex-start;min-height:0}
.side-piles .pile-zone:last-child{justify-content:flex-end}
.hand-zone{grid-area:hand}
.hand-cards{min-height:116px}
.ram-bank-zone{grid-area:ram;min-height:144px}
.ram-bank-cards{min-height:106px;gap:4px}
#recycleContainer{grid-area:recycle}
#purgeContainer{grid-area:purge}
.compact-pile-zone{min-height:144px}
.collapsed-stack-zone{min-height:102px;max-height:106px}
.pile-zone .pile-card{width:84px;height:116px}
.pile-zone .compact-pile-card{width:68px;height:94px}
.pile-stack .pile-note{font-size:.67rem;margin-top:5px}
.ram-summary-panel{display:none!important}
.focus-inspector{width:min(300px,25vw);top:118px}
.focus-inspector img{max-height:61vh}
.card-shell:hover > .card:not(.running){transform:scale(1.48) translateY(-6px)!important}
.card-shell:hover > .card.running{transform:rotate(90deg) scale(1.06) translateY(-3px)!important}
.mini-shell:hover > .card:not(.running){transform:scale(1.95) translateY(-3px)!important}
.ram-shell > .card:hover:not(.running){transform:scale(1.55) translateY(-3px)!important}
.compact-pile-zone.expanded{grid-column:auto;z-index:30;min-width:260px}
.compact-pile-zone.expanded .collapsed-stack-zone{max-height:320px;min-height:170px;overflow:auto;flex-wrap:wrap;gap:6px}
.context-menu #zoneContextButtons{display:flex;flex-direction:column;gap:2px}
@media(max-width:1320px){
  .resource-grid{grid-template-columns:110px minmax(300px,1fr) minmax(124px,.36fr) minmax(124px,.36fr)}
  .focus-inspector{width:270px}
}
@media(max-width:1080px){
  .top-row{grid-template-columns:minmax(220px,1fr) calc(var(--card-w) + 18px) minmax(240px,1.2fr)}
  .resource-grid{grid-template-columns:110px minmax(260px,1fr) minmax(120px,.38fr);grid-template-areas:"piles hand hand" "piles ram recycle" "piles ram purge"}
}
@media(max-width:760px){
  .resource-grid{grid-template-columns:1fr;grid-template-areas:"hand" "piles" "ram" "recycle" "purge"}
  .side-piles{grid-template-rows:auto auto}
}


/* ===== v0.7 layout / interaction pass ===== */
body.top-collapsed .game-strip,
body.top-collapsed .toolbar{display:none}
body.top-collapsed .board{padding-top:4px}
body.top-collapsed .focus-inspector{top:72px}

/* Shared systems row */
.systems-row{grid-template-columns:minmax(460px,1fr) calc(var(--card-w) + 22px);gap:10px;align-items:stretch}
.systems-panel,.environment-panel{min-height:170px;height:170px;padding:8px 10px;display:flex;flex-direction:column;justify-content:flex-start}
.systems-grid{display:grid;grid-template-columns:minmax(190px,220px) 1fr;gap:10px;align-items:start;height:100%}
.systems-mainframe,.systems-protocols{min-width:0}
.systems-mainframe .zone-title,.systems-protocols .zone-title,.environment-panel .zone-title{margin-bottom:4px}
.systems-mainframe #mainframeZone,.environment-panel #environmentZone{min-height:calc(var(--card-h) + 4px)}
.systems-protocols .protocol-slots{justify-content:flex-start;grid-template-columns:repeat(3,calc(var(--card-w) + 10px));gap:7px}
.systems-protocols .protocol-slot{width:calc(var(--card-w) + 10px);min-height:calc(var(--card-h) + 8px)}
.environment-panel{width:calc(var(--card-w) + 22px);justify-self:stretch}
.mf-quickbar{margin:0 0 4px;font-size:.7rem}

/* Resource area order: RAM above hand, matching bottom-player view */
.resource-grid{grid-template-columns:128px minmax(420px,1fr) minmax(145px,.34fr) minmax(145px,.34fr);grid-template-rows:150px 128px;grid-template-areas:
  "piles ram recycle purge"
  "piles hand hand hand";align-items:stretch}
.side-piles{height:100%;grid-template-rows:150px 128px}
.side-piles .pile-zone{height:100%}
.hand-zone,.ram-bank-zone,.compact-pile-zone{height:100%}
.hand-cards{min-height:102px}
.ram-bank-zone{min-height:150px}
.ram-bank-cards{min-height:98px}
.pile-zone .pile-card{width:82px;height:112px}
.pile-zone .compact-pile-card{width:66px;height:92px}

/* Equalize non-battlefield box feel */
.top-row .zone, .resource-grid .zone{border-radius:14px}
.battlefield-zone{min-height:182px}
.battlefield-zone .large-zone{min-height:140px}

/* Equip target overlay */
.equip-target-layer{position:absolute;inset:0;pointer-events:none;z-index:25}
.equip-target{position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid #9dd8ff;background:rgba(49,168,255,.18);box-shadow:0 0 10px rgba(49,168,255,.45);pointer-events:auto;cursor:pointer;padding:0}
.equip-target:hover{background:rgba(49,168,255,.4);transform:scale(1.08)}
.equip-target.gear-top{top:-8px;left:50%;transform:translateX(-50%)}
.equip-target.gear-bottom{bottom:-8px;left:50%;transform:translateX(-50%)}
.equip-target.gear-left{left:-8px;top:50%;transform:translateY(-50%)}
.equip-target.gear-right{right:-8px;top:50%;transform:translateY(-50%)}
.card-shell:has(.equip-target:hover) > .card:not(.running){transform:none!important}
.card-shell:has(.equip-target:hover) > .card.running{transform:rotate(90deg) scale(.71)!important}

/* Make fit tighter on common laptop screens */
.app-header{padding:8px 14px 4px}
.app-header h1{font-size:1.3rem}
.toolbar{padding:8px 14px 8px}
.board{padding:6px 14px 10px;gap:8px}
.zone-title{font-size:.82rem}
.link-overlay{z-index:40}

@media (max-width: 1380px){
  .resource-grid{grid-template-columns:120px minmax(330px,1fr) minmax(130px,.34fr) minmax(130px,.34fr)}
  .systems-row{grid-template-columns:minmax(420px,1fr) calc(var(--card-w) + 18px)}
}
@media (max-width: 1120px){
  .systems-row{grid-template-columns:1fr}
  .environment-panel{width:auto}
  .resource-grid{grid-template-columns:115px minmax(260px,1fr) minmax(120px,.34fr);grid-template-rows:150px 150px 128px;grid-template-areas:
    "piles ram recycle"
    "piles ram purge"
    "piles hand hand"}
  .side-piles{grid-template-rows:150px 150px}
}


/* ===== v0.8 visual refinement ===== */
body,button,input,select,textarea{font-family:"Exo 2","Rajdhani","Segoe UI",sans-serif}
.zone-title,.mini-label,.life-stack-title,.pile-note,.context-title,.focus-kicker,.toolbar button,.toolbar summary,.header-actions button{font-family:"Rajdhani","Exo 2","Segoe UI",sans-serif;letter-spacing:.08em}
.zone-title{font-size:.75rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.environment-panel .zone-title{font-size:.68rem;letter-spacing:.06em}
.mf-quickbar{position:relative;z-index:4}
.systems-mainframe .zone-title{position:relative;z-index:4}

/* Top collapse should be obvious and reclaim space */
body.top-collapsed .game-strip,
body.top-collapsed .toolbar{display:none !important}
body.top-collapsed .app-header{padding-bottom:4px}
body.top-collapsed .board{padding-top:2px}
body.top-collapsed .focus-inspector{top:56px}

/* Keep non-battlefield panels aligned */
.systems-row{grid-template-columns:minmax(500px,1fr) calc(var(--card-w) + 16px);gap:10px;align-items:stretch}
.systems-panel,.environment-panel{min-height:166px;height:166px;padding:8px 10px;overflow:hidden}
.systems-grid{height:100%;grid-template-columns:minmax(210px,240px) 1fr;gap:10px}
.systems-mainframe,.systems-protocols{min-height:0;height:100%}
.systems-protocols .protocol-slots{align-items:center;height:calc(100% - 22px)}
.systems-protocols .protocol-slot{padding:3px;overflow:visible}

/* Resource column order and fit */
.resource-grid{grid-template-columns:128px minmax(430px,1fr) minmax(136px,.34fr) minmax(136px,.34fr);grid-template-rows:148px 122px;grid-template-areas:
  "piles ram recycle purge"
  "piles hand hand hand";gap:10px;align-items:stretch}
.side-piles{grid-template-rows:122px 148px}
.side-piles .pile-zone:first-child{order:1} /* RAM on top */
.side-piles .pile-zone:last-child{order:2} /* Cyberdeck on bottom */
.hand-zone{min-height:122px}
.hand-cards{min-height:86px}
.ram-bank-zone{min-height:148px}
.ram-bank-cards{min-height:104px}
.pile-zone .pile-card{width:80px;height:110px}
.pile-zone .compact-pile-card{width:62px;height:86px}

/* Battlefield cue when Environment is active */
#boardRoot.environment-active .battlefield-zone{box-shadow:0 0 0 1px rgba(186,99,255,.55), 0 0 18px rgba(255,120,40,.28), inset 0 0 22px rgba(186,99,255,.08)}

/* Protocol cable visuals */
.protocol-plug-layer{z-index:10;pointer-events:none}
.protocol-plug-anchor{position:absolute;pointer-events:none}
.protocol-plug{display:block;opacity:.88;filter:drop-shadow(0 0 8px rgba(0,255,200,.24));transform-origin:center center}
.protocol-chip{position:absolute;background:rgba(10,22,30,.78)}
.protocol-plug-anchor.slot-mainframe-right{right:-128px;top:50%;transform:translateY(-50%)}
.protocol-plug-anchor.slot-mainframe-left{left:-128px;top:50%;transform:translateY(-50%)}
.protocol-plug-anchor.slot-mainframe-top{top:-120px;left:50%;transform:translateX(-50%)}
.protocol-plug.protocol-right{width:126px;height:auto;transform:none}
.protocol-plug.protocol-left{width:126px;height:auto;transform:rotate(180deg)}
.protocol-plug.protocol-top{width:112px;height:auto;transform:rotate(90deg)}
.protocol-plug-anchor.slot-mainframe-right .protocol-chip{left:30px;top:54px}
.protocol-plug-anchor.slot-mainframe-left .protocol-chip{right:30px;top:54px}
.protocol-plug-anchor.slot-mainframe-top .protocol-chip{left:44px;top:78px}

/* remove prior mini-card overlap feel */
.attached-layer{overflow:visible}
.systems-mainframe .card-shell{margin-top:4px}

/* attachment targets clearer */
.equip-target{width:20px;height:20px;border-width:2px;box-shadow:0 0 0 2px rgba(8,13,19,.7), 0 0 12px rgba(49,168,255,.6)}

@media (max-width: 1360px){
  .systems-row{grid-template-columns:minmax(440px,1fr) calc(var(--card-w) + 14px)}
  .resource-grid{grid-template-columns:120px minmax(340px,1fr) minmax(126px,.34fr) minmax(126px,.34fr)}
}


/* ===== v0.9 hardening pass ===== */
/* Exact row alignment: RAM deck ↔ RAM bank, Cyberdeck ↔ Hand */
.resource-grid{
  grid-template-columns:128px minmax(430px,1fr) minmax(136px,.34fr) minmax(136px,.34fr);
  grid-template-rows:156px 156px;
  grid-template-areas:
    "piles ram recycle purge"
    "piles hand hand hand";
  gap:10px;align-items:stretch
}
.side-piles{grid-template-rows:156px 156px;height:100%}
.side-piles .pile-zone{height:156px;min-height:156px;overflow:hidden}
.ram-bank-zone,.hand-zone,.compact-pile-zone{height:156px;min-height:156px;overflow:hidden}
.ram-bank-cards,.hand-cards{min-height:118px;max-height:118px;overflow-x:auto;overflow-y:hidden;align-items:flex-start;padding-bottom:4px}
.hand-zone .card-shell{flex:0 0 auto}
.hand-zone .zone-cards{flex-wrap:nowrap}
.pile-zone .pile-card{width:76px;height:105px}
.pile-zone .compact-pile-card{width:62px;height:86px}

/* Top panels align exactly. */
.systems-row{grid-template-columns:minmax(500px,1fr) calc(var(--card-w) + 18px);gap:10px;align-items:stretch}
.systems-panel,.environment-panel{height:164px;min-height:164px;max-height:164px;overflow:visible}
.environment-panel{overflow:hidden}
.systems-grid{height:100%;align-items:start}
.systems-mainframe,.systems-protocols{height:100%;overflow:visible}
.systems-protocols .protocol-slots{height:128px;align-items:start}
.systems-protocols .protocol-slot{height:128px;min-height:128px}
.environment-panel #environmentZone{height:128px;min-height:128px}
.environment-panel .zone-title{max-width:100%;font-size:.64rem;letter-spacing:.04em}

/* Restore the reliable v3/v4 equip presentation. */
.equip-target-layer{display:none!important}
.card-shell.has-attached{margin:7px 14px 12px 14px}
.attached-layer:not(.protocol-plug-layer){z-index:12;pointer-events:none;overflow:visible}
.gear-anchor{z-index:14;pointer-events:none}
.gear-anchor .mini-shell{pointer-events:auto;z-index:15}
.slot-gear-top{top:-20px;left:50%;transform:translateX(-50%)}
.slot-gear-bottom{bottom:-20px;left:50%;transform:translateX(-50%)}
.slot-gear-left{left:-28px;top:50%;transform:translateY(-50%);flex-direction:column}
.slot-gear-right{right:-28px;top:50%;transform:translateY(-50%);flex-direction:column}

/* Protocol plugs: short, behind the Mainframe, physically touching its edges. */
.systems-mainframe #mainframeZone{overflow:visible;position:relative;z-index:3}
.systems-mainframe .card-shell{z-index:4;margin-top:8px}
.protocol-plug-layer{z-index:1!important;pointer-events:none;overflow:visible}
.protocol-plug-anchor{position:absolute;pointer-events:none;z-index:1}
.protocol-plug{display:block;width:66px;height:auto;opacity:.82;filter:drop-shadow(0 0 5px rgba(0,255,200,.22));transform-origin:center center}
.protocol-plug-anchor.slot-mainframe-right{left:calc(100% - 5px);right:auto;top:50%;transform:translateY(-50%)}
.protocol-plug-anchor.slot-mainframe-left{right:calc(100% - 5px);left:auto;top:50%;transform:translateY(-50%)}
.protocol-plug-anchor.slot-mainframe-top{bottom:calc(100% - 5px);top:auto;left:50%;transform:translateX(-50%)}
.protocol-plug.protocol-right{transform:none}
.protocol-plug.protocol-left{transform:rotate(180deg)}
.protocol-plug.protocol-top{transform:rotate(-90deg)}

/* The card itself always sits over the connector head. */
.systems-mainframe .card-shell > .card{z-index:5}

/* Fully collapsed chrome: keep only a slim restore tab. */
body.top-collapsed .app-header{height:34px;min-height:34px;padding:3px 8px;display:flex;justify-content:flex-end;align-items:center;background:#0d141d;border-bottom:1px solid var(--border)}
body.top-collapsed .app-header>div:first-child,
body.top-collapsed .app-header .header-actions>*:not(#btnToggleTop){display:none!important}
body.top-collapsed #btnToggleTop{min-height:28px;height:28px;padding:3px 10px}
body.top-collapsed .game-strip,body.top-collapsed .toolbar{display:none!important}
body.top-collapsed .focus-inspector{top:42px}

@media (max-width:1360px){
  .resource-grid{grid-template-columns:118px minmax(340px,1fr) minmax(126px,.34fr) minmax(126px,.34fr)}
  .systems-row{grid-template-columns:minmax(450px,1fr) calc(var(--card-w) + 16px)}
}


/* ===== v0.10 fit + attachment hardening ===== */
/* Give Mainframe and Protocols the generous shared space they actually have. */
.systems-panel{padding:9px 14px;height:174px;min-height:174px;max-height:174px}
.environment-panel{height:174px;min-height:174px;max-height:174px}
.systems-grid{grid-template-columns:320px minmax(340px,1fr);gap:28px;align-items:start}
.systems-mainframe{padding:0 22px;overflow:visible}
.systems-mainframe #mainframeZone{justify-content:center;overflow:visible;min-height:130px;margin-top:4px;padding-top:4px}
.systems-protocols{padding-left:8px}
.systems-protocols .protocol-slots{justify-content:flex-start;gap:16px;height:134px}
.systems-protocols .protocol-slot{height:132px;min-height:132px;width:calc(var(--card-w) + 10px)}

/* Compact plugs: connector head tucks UNDER the Mainframe border, short tail points outward. */
.protocol-plug-layer{inset:0!important;z-index:1!important;pointer-events:none;overflow:visible}
.protocol-plug-anchor{position:absolute;pointer-events:none;z-index:1}
.protocol-plug{display:block;width:42px!important;height:auto;opacity:.86;filter:drop-shadow(0 0 4px rgba(0,255,200,.18));transform-origin:center center}
.protocol-plug-anchor.slot-mainframe-right{left:calc(100% - 12px)!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important}
.protocol-plug-anchor.slot-mainframe-left{right:calc(100% - 12px)!important;left:auto!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important}
.protocol-plug-anchor.slot-mainframe-top{left:50%!important;top:-25px!important;bottom:auto!important;transform:translateX(-50%)!important}
.protocol-plug.protocol-right{transform:none!important}
.protocol-plug.protocol-left{transform:rotate(180deg)!important}
.protocol-plug.protocol-top{transform:rotate(-90deg)!important}
.systems-mainframe .card-shell{z-index:5!important;margin-top:2px!important}
.systems-mainframe .card-shell>.card{z-index:6!important}

/* Hand: smaller idle cards + breathing room. Current Focus handles reading. */
.resource-grid{grid-template-rows:156px 150px}
.side-piles{grid-template-rows:156px 150px}
.hand-zone{height:150px!important;min-height:150px!important;overflow:hidden!important}
.hand-cards{min-height:112px!important;max-height:112px!important;overflow-x:auto!important;overflow-y:hidden!important;align-items:flex-start!important;gap:7px!important;padding:2px 2px 8px!important}
.hand-zone .card-shell{width:82px!important;height:114px!important;flex:0 0 82px!important}
.hand-zone .card-shell.has-attached{margin:0 10px 0 0!important}

/* Recycle / Purge are piles, NOT hand rows. */
.compact-pile-zone{position:relative;height:156px!important;min-height:156px!important;overflow:visible!important}
.compact-pile-zone .collapsed-stack-zone{display:flex!important;flex-wrap:nowrap!important;align-items:flex-start!important;gap:0!important;min-height:112px!important;max-height:112px!important;overflow:hidden!important;padding:2px 3px 6px!important}
.compact-pile-zone:not(.expanded) .collapsed-stack-zone .card-shell{width:76px!important;height:106px!important;flex:0 0 76px!important;margin-left:-58px!important}
.compact-pile-zone:not(.expanded) .collapsed-stack-zone .card-shell:first-child{margin-left:0!important}
.compact-pile-zone.expanded{z-index:70!important}
.compact-pile-zone.expanded .collapsed-stack-zone{position:absolute!important;left:6px!important;right:6px!important;top:30px!important;max-height:360px!important;min-height:170px!important;height:auto!important;overflow:auto!important;flex-wrap:wrap!important;gap:7px!important;padding:8px!important;background:rgba(12,18,26,.985)!important;border:1px solid #3c5269!important;border-radius:10px!important;box-shadow:0 20px 50px rgba(0,0,0,.55)!important}
.compact-pile-zone.expanded .collapsed-stack-zone .card-shell{width:82px!important;height:114px!important;flex:0 0 82px!important;margin-left:0!important}

/* Attached gear: honor inferred/metadata snap side consistently. */
.card-shell.has-attached{margin:7px 18px 14px 18px}
.slot-gear-top{top:-26px!important;left:50%!important;transform:translateX(-50%)!important}
.slot-gear-bottom{bottom:-26px!important;left:50%!important;transform:translateX(-50%)!important}
.slot-gear-left{left:-34px!important;top:50%!important;transform:translateY(-50%)!important;flex-direction:column}
.slot-gear-right{right:-34px!important;top:50%!important;transform:translateY(-50%)!important;flex-direction:column}

/* Slightly cleaner zone alignment. */
.zone-title{line-height:1.05}
.resource-grid>.zone,.side-piles>.zone{align-self:stretch}

@media(max-width:1360px){
  .systems-grid{grid-template-columns:285px minmax(310px,1fr);gap:20px}
  .systems-mainframe{padding:0 14px}
}


/* ===== v0.11 Mainframe alignment micro-pass ===== */
/* There is ample horizontal room here: give the Mainframe more breathing room and
   keep the actual card + plugs completely inside the systems panel. */
.systems-panel,
.environment-panel{
  height:182px!important;
  min-height:182px!important;
  max-height:182px!important;
}
.systems-grid{
  grid-template-columns:350px minmax(340px,1fr)!important;
  gap:24px!important;
  align-items:start!important;
}
.systems-mainframe{
  padding:0 28px 0 42px!important;
  overflow:visible!important;
}
.systems-mainframe #mainframeZone{
  justify-content:center!important;
  min-height:122px!important;
  margin-top:0!important;
  padding-top:0!important;
  overflow:visible!important;
}
/* Mainframe is a visual anchor, not something we need to read here because Current Focus handles that. */
.systems-mainframe #mainframeZone > .card-shell{
  width:84px!important;
  height:117px!important;
  flex:0 0 84px!important;
  margin-top:0!important;
}
/* Keep plug heads tucked under the card while ensuring no edge escapes the systems box. */
.systems-mainframe .protocol-plug{
  width:36px!important;
}
.protocol-plug-anchor.slot-mainframe-right{
  left:calc(100% - 10px)!important;
}
.protocol-plug-anchor.slot-mainframe-left{
  right:calc(100% - 10px)!important;
}
.protocol-plug-anchor.slot-mainframe-top{
  top:-20px!important;
}
/* Protocols get the room freed up by the Mainframe shrink without changing their card size. */
.systems-protocols{
  padding-left:12px!important;
}
.systems-protocols .protocol-slots{
  gap:18px!important;
}
@media(max-width:1360px){
  .systems-grid{grid-template-columns:320px minmax(310px,1fr)!important;gap:20px!important}
  .systems-mainframe{padding-left:30px!important;padding-right:20px!important}
}

/* RAM Bank only: full-size cards, then a single overlapping, shrinking row. */
.ram-bank-zone{display:flex;flex-direction:column}
.ram-bank-cards{
  --ram-bank-card-w:76px;
  --ram-bank-card-h:106px;
  --ram-bank-spacing:6px;
  flex:1;
  min-height:0;
  flex-wrap:nowrap;
  gap:0;
  padding:2px 3px 6px;
  overflow:hidden;
}
.ram-bank-cards > .ram-shell{
  width:var(--ram-bank-card-w);
  height:var(--ram-bank-card-h);
  flex:0 0 var(--ram-bank-card-w);
}
.ram-bank-cards > .ram-shell + .ram-shell{margin-left:var(--ram-bank-spacing)}
.ram-bank-cards > .ram-shell:hover{z-index:90}
/* Lift the hovered card above its neighbors; Current Focus provides the zoom. */
.ram-bank-cards > .ram-shell > .card:hover:not(.running){transform:none!important}
.ram-bank-cards > .ram-shell > .card.running:hover{transform:rotate(90deg) scale(.71)!important}