:root{color-scheme:light;--cream:#f7f3e8;--paper:#fffdf6;--ink:#324e42;--muted:#687469;--sage:#416453;--gold:#b28b3c;--line:#dedfcf;--terracotta:#b86f52}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:15px/1.5 Georgia,'Times New Roman',serif}button,input{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;padding:9px 14px;transition:background .15s,transform .15s}button:hover:not(:disabled){background:#eaf0de}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b77540;outline-offset:3px}button.primary{background:var(--sage);border-color:var(--sage);color:white}button.primary:hover:not(:disabled){background:#2f5040}button.danger{color:#8e4432;border-color:#c39983}h1,h2,h3,p{margin:0}h2{font-size:23px;font-weight:normal;line-height:1.2}h3{font-size:17px}.topbar{max-width:1240px;margin:auto;display:flex;align-items:center;gap:12px;padding:22px 28px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);font-size:23px;line-height:1.2}.brand small{display:block;font:10px/1.7 Arial,sans-serif;text-transform:uppercase;letter-spacing:1.6px;color:var(--muted)}.brandmark{border:1px solid #899873;width:51px;height:51px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px}.brandmark span{font-size:13px;margin:0 2px}.resources{margin-left:auto;display:flex;gap:12px;align-items:center;font:13px/1.5 Arial,sans-serif}.resources>span{display:block;background:#eee8d4;padding:8px 13px;border-radius:18px}.resources small{display:block;font-size:10px;color:#637260}main{max-width:1240px;margin:auto;padding:0 28px}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:35px;padding:37px 0 18px}.hero h1{font-size:clamp(32px,4.2vw,54px);line-height:1.06;font-weight:normal;margin:13px 0 18px;letter-spacing:-1px}.hero h1 em{font-weight:normal;color:#74885c}.hero p:not(.eyebrow){max-width:450px;color:#5f705f}.eyebrow{font:10px/1.5 Arial,sans-serif;letter-spacing:1.6px;color:#6e7c59;font-weight:700;margin-bottom:8px}.campaign{margin-top:20px;max-width:385px;font:12px/1.5 Arial,sans-serif}.campaign progress{display:block;width:100%;height:7px;margin-top:8px;accent-color:var(--sage)}#scene svg{display:block;width:100%;max-height:290px}#zones{display:flex;gap:9px;margin:15px 0 23px;flex-wrap:wrap}#zones button{flex:1;text-align:left;padding:12px 15px;min-width:190px}#zones button.active{background:var(--sage);color:white;border-color:var(--sage)}#zones small{display:block;font:11px/1.5 Arial,sans-serif;opacity:.85;margin-top:3px}.workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:22px;align-items:start}.panel{border:1px solid var(--line);border-radius:20px;padding:22px;background:var(--paper);box-shadow:0 5px 17px #4b553608}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.section-head button{white-space:nowrap;font:12px Arial,sans-serif}.section-head button span,.smallbadge{border-radius:20px;background:#e9ecd9;padding:4px 8px;font:11px Arial,sans-serif}.hint{font:12px/1.5 Arial,sans-serif;color:var(--muted);margin:11px 0 16px}#board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:11px;background:#e9eadb;border:1px solid #d8dcc8;border-radius:15px}.cell{position:relative;aspect-ratio:1;padding:3px;min-width:0;border-radius:9px;background:#f7f6ed;border:1px solid #d9dfca;touch-action:pan-y;user-select:none;-webkit-user-select:none}.cell.empty{background:#f0f1e6;box-shadow:inset 0 2px 3px #52633207}.cell.selected{outline:3px solid #b58a37;outline-offset:-2px;background:#fcf0cf}.cell.drag-over{background:#d0dfc2;outline:2px dashed #4d704f}.cell .craft-art{width:85%;height:85%;display:block;margin:auto;pointer-events:none}.cell .level{position:absolute;right:4px;bottom:2px;font:bold 9px/1.2 Arial,sans-serif;background:#ffffffcf;border-radius:8px;padding:2px 4px}.cell .family-dot{position:absolute;top:5px;left:5px;width:6px;height:6px;border-radius:50%}.selection{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;font:12px/1.6 Arial,sans-serif;min-height:64px}.selection small{display:block;color:var(--muted)}#generators{display:grid;grid-template-columns:1fr 1fr;gap:9px}.generator{padding:11px;background:#f2f2e6;border:1px solid var(--line);border-radius:12px}.generator h3{font-size:15px}.generator p{font:11px/1.5 Arial,sans-serif;color:var(--muted);margin:6px 0}.generator .gen-actions{display:flex;flex-wrap:wrap;gap:5px}.generator button{font:11px Arial,sans-serif;padding:8px 9px}.generator.locked{background:#f2efe6}.orders-panel{padding-bottom:12px}.order{border-top:1px solid var(--line);padding:16px 0 13px;margin-top:15px}.order-head{display:flex;align-items:center;gap:11px}.portrait{width:46px;height:46px;border-radius:50%;flex-shrink:0}.order .customer{font:11px Arial,sans-serif;color:var(--muted)}.order .story{font-size:13px;color:#637161;margin:8px 0}.requirements{display:flex;gap:8px;align-items:center;margin:10px 0}.requirement{display:flex;align-items:center;gap:8px;font:12px/1.4 Arial,sans-serif}.requirement svg{width:42px;height:42px}.requirement small{display:block;color:#718065}.order-bottom{display:flex;align-items:center;justify-content:space-between;font:12px Arial,sans-serif}.order-bottom button{font:12px Arial,sans-serif;padding:9px 13px}.daily-panel{margin-top:18px}.task{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding:11px 0;font:12px/1.5 Arial,sans-serif}.task small{display:block;color:var(--muted)}.task button{font-size:11px;padding:8px 9px}.collections{margin-top:22px}#keepsakes{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:16px;text-align:center}.keepsake-art{width:62px;display:block;margin:0 auto 7px}.keepsake{font-size:12px;line-height:1.3}.keepsake.locked{opacity:.5}.keepsake small{display:block;font:10px/1.5 Arial,sans-serif;margin-top:4px}footer{text-align:center;padding:27px 5px 35px;font:11px/1.9 Arial,sans-serif;color:var(--muted)}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 30px);width:max-content;padding:12px 20px;background:#324e42;color:#fffdf4;border-radius:12px;font:13px/1.5 Arial,sans-serif;box-shadow:0 6px 18px #30403128;z-index:5;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}#storage-warning{position:fixed;top:0;left:0;right:0;padding:9px 18px;background:#ffe2a5;color:#573b1e;font:12px Arial,sans-serif;z-index:10;text-align:center}dialog{width:min(760px,calc(100vw - 30px));max-height:85vh;border:1px solid #c2cbb2;border-radius:20px;padding:24px;color:var(--ink);background:var(--paper);box-shadow:0 20px 80px #24372833}dialog::backdrop{background:#263c325c;backdrop-filter:blur(3px)}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.modal-head button{font:25px/1 Arial,sans-serif;padding:6px 12px}#modal-content p{margin:10px 0}#modal-content li{margin-bottom:8px}#modal-content .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.catalog-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}.catalog-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.catalog-item{background:#f1f2e7;border:1px solid #dfe3d2;border-radius:12px;text-align:center;padding:9px 5px;font:11px/1.4 Arial,sans-serif}.catalog-item svg{width:70px;height:70px}.catalog-item small{display:block;color:var(--muted);margin-top:5px}.silhouette{filter:brightness(0) opacity(.24)}.setting-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:14px 0;gap:10px}.setting-row small{display:block;color:var(--muted);font:12px Arial,sans-serif}.achievement{padding:13px;margin:8px 0;background:#f0f2e7;border-radius:10px}.achievement small{display:block;color:var(--muted)}.ending-art{display:block;width:100%;max-height:230px}.muted{color:var(--muted)}@media(max-width:900px){.topbar{padding:17px 18px}.workspace{grid-template-columns:minmax(0,1.15fr) minmax(265px,1fr);gap:14px}.panel{padding:15px}main{padding:0 18px}.hero{gap:10px}.resources{gap:5px}.resources>span{padding:7px 9px}#board{padding:7px;gap:4px}.hero h1{font-size:40px}#generators{grid-template-columns:1fr}#keepsakes{gap:10px}}@media(max-width:690px){.topbar{flex-wrap:wrap;gap:8px}.brand{font-size:20px}.resources{margin-left:auto}.topbar>button{font-size:12px;padding:7px 10px}.hero{grid-template-columns:1fr;padding-top:25px;gap:8px}.hero h1{font-size:40px}.hero>div:first-child{max-width:100%}.hero p:not(.eyebrow){max-width:100%}#scene svg{max-height:200px}.hero .campaign{max-width:100%}.workspace{grid-template-columns:1fr}.panel{padding:15px}#board{gap:5px;padding:8px}#generators{grid-template-columns:1fr 1fr}#zones{gap:6px}#zones button{min-width:100%;padding:9px 12px}.hero h1 br{display:none}#keepsakes{grid-template-columns:repeat(3,1fr);gap:20px}.catalog-grid{grid-template-columns:repeat(3,1fr)}dialog{padding:18px}.section-head h2{font-size:21px}.resources>span{font-size:12px}.brandmark{width:40px;height:40px}.brand small{font-size:8px;letter-spacing:1px}main{padding:0 12px}.cell .level{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
:root .output-label{font:11px Arial,sans-serif}select{font:12px Arial,sans-serif;color:var(--ink);background:var(--paper);border:1px solid #bdc7af;border-radius:6px;padding:4px;margin:0 0 8px 3px}select:focus-visible{outline:3px solid #b77540;outline-offset:2px}.catalog-tabs button[aria-pressed=true]{background:var(--sage);color:white}
:root .bench-layout{display:grid;grid-template-columns:minmax(0,1fr) 162px;gap:13px;align-items:start}:root #generators{grid-template-columns:1fr}:root .topbar{position:sticky;top:0;z-index:4;background:var(--cream)}:root .cell{min-height:44px}:root .gen-actions button{min-height:36px}:root .generator{padding:10px}:root .hero{padding-top:25px;padding-bottom:8px}:root .hero h1{font-size:clamp(32px,3.5vw,48px)}:root #scene svg{max-height:235px}@media(max-width:1100px){:root .bench-layout{grid-template-columns:1fr}:root #generators{grid-template-columns:1fr 1fr;grid-row:1}:root #generators .generator.locked{padding:7px 10px}:root .generator p{margin:4px 0}:root .generator{padding:8px}:root .board-wrap{max-width:510px;margin:auto;width:100%}}@media(max-width:690px){:root .topbar{position:static}:root #generators{grid-template-columns:1fr 1fr}:root .gen-actions button{min-height:44px}:root select{min-height:35px}:root .hero h1{font-size:40px}:root #scene svg{max-height:185px}}@media(min-width:1101px){:root .workspace{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr)}:root .bench{padding:20px}:root #board{padding:8px;gap:5px}:root .hero{grid-template-columns:1.25fr 1fr}:root .generator .gen-actions{display:grid;grid-template-columns:1fr}}
:root .board-wrap{min-width:0;max-width:420px;width:100%;margin:0 auto}:root #board,:root .cell{scroll-margin-top:120px}:root .generator{scroll-margin-top:120px}@media(max-width:690px){:root .board-wrap{max-width:none}:root #board,:root .cell,:root .generator{scroll-margin-top:15px}}

/* Stable action lanes: text has room to wrap without moving controls. */
button:active:not(:disabled){transform:none}
.resources{font-variant-numeric:tabular-nums;flex-shrink:0}
.resources #coins{width:143px;white-space:nowrap}.resources #energy{width:110px;min-height:49px}
.generator{display:grid;grid-template-rows:minmax(45px,auto) minmax(83px,auto) 18px 43px auto minmax(50px,auto);align-content:start}
.generator h3{line-height:1.5;overflow-wrap:anywhere}.generator>p:first-of-type{margin:4px 0;overflow-wrap:anywhere}
.generator .output-label{align-self:start}.generator select{width:100%;margin:0 0 8px;height:35px}
.generator .gen-actions{display:grid;grid-template-columns:1fr;gap:5px;align-self:start}
.generator .gen-actions button{width:100%;min-height:44px;line-height:1.3}
.generator.locked{display:block;min-height:140px}
.selection{min-height:116px;align-items:center}.selection #selection{min-width:0;min-height:90px;display:flex;flex-direction:column;justify-content:center}.selection #recycle{flex:0 0 87px;min-height:44px}
.order{display:grid;grid-template-rows:minmax(55px,auto) minmax(58px,auto) minmax(60px,auto) 42px;gap:0}
.order .order-head h3{line-height:1.35}.order .story{margin:8px 0}.order-bottom button{min-width:82px;min-height:42px}
.requirements{min-width:0}.requirement svg{flex:0 0 42px}.task button{min-width:68px;min-height:40px}
#recovery{min-height:54px}#hostline{min-height:72px}
@media(max-width:1100px){.generator{grid-template-rows:minmax(45px,auto) minmax(83px,auto) 18px 43px auto minmax(50px,auto)}}
@media(max-width:690px){.resources{margin-left:0;gap:5px;order:2;width:100%}.resources #coins{width:143px}.topbar>button{margin-left:auto}.topbar>button+button{margin-left:0}.generator{grid-template-rows:minmax(68px,auto) minmax(100px,auto) 18px 43px auto minmax(67px,auto)}.selection{min-height:144px}.selection #selection{min-height:118px}.order{grid-template-rows:minmax(65px,auto) minmax(78px,auto) minmax(72px,auto) 42px}#hostline{min-height:110px}}

/* Resource labels are static; only non-translatable numeric nodes tick. */
html{scrollbar-gutter:stable}
:root .topbar{height:117px;padding-top:17px;padding-bottom:17px;flex-wrap:nowrap}
:root .resources #energy{width:172px;height:82px;min-height:82px;padding:8px 12px;flex:none}
:root .resources #coins{width:143px;flex:none}
.energy-total{height:18px;line-height:18px;white-space:nowrap}
:root .resources .energy-status{position:relative;height:48px;font-size:10px;line-height:12px;margin:0}
.energy-status>span{position:absolute;inset:0;align-content:start;padding-top:2px}
.energy-status #energy-next{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:3px}
.energy-status #energy-next[hidden],.energy-status #energy-rested[hidden]{display:none}
#energy-next-label{overflow-wrap:anywhere}#energy-timer{font-size:11px;line-height:12px;text-align:right;white-space:nowrap}
@media(max-width:690px){:root .topbar{height:165px;flex-wrap:wrap;align-content:start;row-gap:8px}:root .resources{height:82px;align-items:center}:root .resources #energy{width:172px}}
/* Tablets keep resources on their own stable row, including translated labels. */
@media(min-width:691px) and (max-width:1000px){:root .topbar{height:176px;flex-wrap:wrap;align-content:start;row-gap:8px}:root .resources{height:82px;width:100%;margin-left:0;order:2;align-items:center}:root .topbar>button{margin-left:auto}:root .topbar>button+button{margin-left:0}}

/* Explicit two-row toolbar prevents translated captions making a third row. */
@media(max-width:1000px){:root .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:51px 82px;column-gap:8px;row-gap:8px;align-items:center}:root .brand{min-width:0}:root .brand>span:last-child{min-width:0}:root .brand small{overflow-wrap:anywhere}:root .resources{grid-column:1/-1;grid-row:2;width:100%;margin:0}:root .topbar>button,:root .topbar>button+button{margin:0}}
@media(max-width:690px){:root .topbar{grid-template-rows:40px 82px}:root .brand{font-size:18px;gap:8px}:root .brandmark{width:32px;height:32px;flex:0 0 32px}:root .brand small{letter-spacing:.5px}}
/* The mobile title and translated subtitle have a complete reserved first row. */
@media(max-width:690px){:root .topbar{height:189px;grid-template-rows:64px 82px}}

/* All gather actions stay immediately above the complete shared bench. */
:root .bench-layout{grid-template-columns:minmax(0,1fr);gap:10px}
:root #generators{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;grid-row:1}
:root .generator,:root .generator.locked{display:grid;grid-template-rows:28px 44px 24px;gap:3px;min-height:0;padding:7px;background:#f2f2e6}
:root .generator h3{font-size:13px;line-height:14px;min-width:0}
:root .generator .gen-actions{grid-template-columns:minmax(0,1fr) auto;gap:4px}
:root .generator .gen-actions button{min-height:44px;font:11px/13px Arial,sans-serif;padding:6px 5px}
.generator-status{display:block;font:10px/12px Arial,sans-serif;color:var(--muted)}
:root .board-wrap{width:100%;max-width:clamp(314px,calc((100dvh - 370px)*.75),420px)}
#modal-content .setting-row select{min-width:65px;margin:0;min-height:40px}
@media(min-width:691px) and (max-width:1000px){:root .workspace{grid-template-columns:minmax(0,1fr)}}
@media(max-width:690px){:root #generators{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}:root .board-wrap{max-width:420px}}
/* Toasts acknowledge gathers without covering newly added bench items. */
@media(min-width:1001px){#toast{left:auto;right:20px;transform:none;max-width:350px}}
@media(max-width:1000px){#toast{bottom:auto;top:8px}}
@media(min-width:691px) and (max-width:1000px){:root .board-wrap{max-width:clamp(314px,calc((100dvh - 430px)*.75),420px)}}

/* Achievements stay beside the field guide without widening the resource header. */
.bench-tools{display:flex;align-items:center;gap:6px;flex:none}
:root .bench-tools button{display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:7px 9px;font:12px/15px Arial,sans-serif}
:root .bench-tools .tool-icon,:root .bench-tools .tool-label{padding:0;background:none;border-radius:0}
:root .bench-tools .tool-icon{font-size:16px;line-height:20px}
:root #achievement-count{display:inline-block;min-width:36px;text-align:center;font-variant-numeric:tabular-nums;padding:3px 5px}
#achievement-notice{position:fixed;top:125px;right:20px;width:330px;max-width:calc(100vw - 24px);z-index:6;background:#fff8dd;color:#324e42;border:1px solid #bda162;border-radius:12px;box-shadow:0 5px 18px #30403128;padding:10px;opacity:0;pointer-events:none;font:12px/1.4 Arial,sans-serif}
#achievement-notice.show{opacity:1;pointer-events:auto}.achievement-copy{padding-right:22px}.achievement-copy>span,.achievement-copy>strong{display:block}
#achievement-label{font-size:10px;line-height:14px;color:#665425;margin-bottom:3px}#achievement-name{margin-bottom:3px}#achievement-description{font-size:11px}
#achievement-dismiss{position:absolute;right:5px;top:5px;font:18px/1 Arial,sans-serif;padding:3px 6px;min-width:27px;min-height:27px;border:0;background:transparent}
@media(max-width:1000px){#achievement-notice{left:12px;right:auto;top:8px;width:160px;font-size:11px;line-height:14px}#achievement-description{font-size:10px;line-height:13px}#toast{left:12px;right:auto;transform:none;width:160px;max-width:calc(50vw - 26px);font-size:11px;line-height:14px;padding:9px 11px}}
@media(max-width:690px){:root .bench-tools .tool-label{display:none}:root .bench .section-head>div:first-child{min-width:0}:root .bench .section-head>div:first-child .eyebrow{min-height:30px}:root .bench .section-head>div:first-child h2{min-height:50px}:root .bench .section-head{min-height:88px}:root .board-wrap{max-width:314px}}
/* Two generators to each side of the shared bench; text has separate lanes. */
:root .bench-layout{--side-board-size:clamp(314px,calc((100dvh - 370px)*.75),420px);grid-template-columns:minmax(120px,1fr) minmax(314px,var(--side-board-size)) minmax(120px,1fr);gap:10px;align-items:start}
:root #generators{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:subgrid;grid-template-rows:repeat(2,max-content);column-gap:10px;row-gap:8px;align-content:start;align-items:start}
:root #generators .generator:nth-child(1){grid-column:1;grid-row:1}:root #generators .generator:nth-child(2){grid-column:1;grid-row:2}:root #generators .generator:nth-child(3){grid-column:3;grid-row:1}:root #generators .generator:nth-child(4){grid-column:3;grid-row:2}
:root .board-wrap{grid-column:2;grid-row:1;position:relative;z-index:1;max-width:var(--side-board-size)}
:root .generator,:root .generator.locked{grid-template-rows:minmax(42px,auto) 80px minmax(32px,auto);gap:3px;padding:6px}
:root .generator h3{line-height:14px;overflow-wrap:anywhere}
:root .generator .gen-actions{grid-template-columns:minmax(0,1fr);grid-template-rows:44px 32px;gap:4px}
:root .generator .gen-actions button{height:44px;min-height:44px;font:11px/14px Arial,sans-serif;overflow-wrap:anywhere}
:root .generator .gen-actions button[id^="adjust-"]{height:32px;min-height:32px}
.generator-status{line-height:12px;overflow-wrap:anywhere}
@media(min-width:691px) and (max-width:1000px){:root .bench-layout{--side-board-size:clamp(314px,calc((100dvh - 430px)*.75),420px)}}
@media(max-width:690px){
 :root main{padding-left:8px;padding-right:8px}:root .bench{padding:8px;display:flex;flex-direction:column}
 :root .bench>.section-head{order:1}:root .bench>.bench-layout{order:2}:root .bench>p.hint:not(#recovery){order:3}:root .bench>#recovery{order:4}
 :root .bench-layout{grid-template-columns:minmax(0,1fr);gap:10px}
 :root #generators{grid-column:1;grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,max-content);gap:7px}
 :root #generators .generator:nth-child(n){grid-column:auto;grid-row:auto}
 :root .board-wrap{grid-column:1;grid-row:2;max-width:314px}
 :root .generator,:root .generator.locked{grid-template-rows:minmax(42px,auto) 44px minmax(24px,auto);gap:2px;padding:4px}
 :root .generator h3{font-size:12px;line-height:14px}
 :root .generator .gen-actions{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:44px;gap:4px}
 :root .generator .gen-actions button,:root .generator .gen-actions button[id^="adjust-"]{height:44px;min-height:44px;font:10px/12px Arial,sans-serif;padding:4px 5px}
}
@media(max-width:375px){#achievement-notice,#toast{width:150px}}

/* Tap-to-merge guidance keeps a fixed lane and leaves touch scrolling available. */
#merge-guide{height:60px;margin:0 0 4px;padding:6px 8px;box-sizing:border-box;font:12px/15px Arial,sans-serif;background:#edf0df;border-radius:10px;color:#284e3e;overflow-wrap:anywhere}
.cell.selected{outline:3px solid #254f41;outline-offset:-3px;background:#cfe0c8}
.cell.merge-match{outline:3px dashed #638044;outline-offset:-3px;background:#e0ebbd}
@media(max-width:690px){:root .bench-layout{gap:4px}}

/* Phone requests remain beside play, with every ingredient represented. */
#mobile-orders{display:none}
@media(max-width:690px){
 #mobile-orders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;height:80px;margin-bottom:4px}
 #mobile-orders .compact-request{display:grid;grid-template-rows:12px 40px 16px;align-items:center;padding:4px;gap:0;min-width:0;height:80px;box-sizing:border-box;border-radius:9px;font:10px/12px Arial,sans-serif;text-align:left}
 #mobile-orders .compact-request.ready{background:#dcebc6;border-color:#658346}
 .compact-order-number{font:10px/12px Arial,sans-serif}
 .compact-ingredients{display:flex;flex-direction:column;justify-content:center;gap:0;min-width:0}
 .compact-ingredient{display:flex;align-items:center;gap:2px;height:20px;white-space:nowrap;font:10px/12px Arial,sans-serif}
 .compact-ingredient svg{width:20px;height:20px;flex:none}
 .compact-order-state{font:10px/12px Arial,sans-serif;overflow-wrap:anywhere}
 .compact-freeplay{grid-column:1/-1;align-self:center;font:12px/16px Arial,sans-serif;text-align:center}
 :root .bench .section-head{min-height:44px;gap:4px}
 :root .bench .section-head>div:first-child .eyebrow{display:none}
 :root .bench .section-head>div:first-child h2{min-height:28px;font-size:18px;line-height:22px}
 :root .generator,:root .generator.locked{grid-template-rows:minmax(28px,auto) 44px 20px;gap:2px;padding:4px}
 :root .generator h3{font-size:11px;line-height:12px}
 :root .generator-status{font-size:9px;line-height:10px}
}
@media(max-width:690px){#mobile-orders{margin-bottom:0}#merge-guide{margin-bottom:0}:root #generators{row-gap:4px}}
@media(max-width:690px){.compact-ingredient:only-child{height:40px}.compact-ingredient:only-child svg{width:32px;height:32px}}
