:root{--ink:#1e2945;--blue:#1982c4;--cream:#fff7db;--yellow:#ffca3a;--red:#ff595e;--purple:#6a4c93;--green:#8ac926;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:#def0f8;font-size:16px}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at top,#fff9e7,#d8eff6 70%)}button,select{font:inherit;color:inherit;min-height:44px;border:2px solid var(--ink);border-radius:12px;background:var(--cream);font-weight:800;padding:.45rem .8rem;cursor:pointer}button{box-shadow:0 3px 0 var(--ink)}button:hover:not(:disabled){background:#fff}button:active{box-shadow:none;transform:translateY(2px)}button:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible,summary:focus-visible{outline:4px solid var(--red);outline-offset:3px}[hidden]{display:none!important}#app{max-width:1120px;margin:auto;padding:12px;position:relative}header{display:flex;align-items:center;justify-content:space-between;gap:10px}header strong{font-size:1.25rem}header strong span{color:var(--blue)}#order{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;font-weight:900}#order span{background:var(--cream);border:2px solid #fff;border-radius:20px;padding:5px 12px}#resources{font-size:.85rem;font-weight:800;line-height:1.7;margin:8px 0}#workspace{position:relative;border:3px solid var(--ink);border-radius:24px;overflow:hidden;background:linear-gradient(#b8def1,#edf5df);box-shadow:0 5px 0 #9eb9bf}#boardScroll{height:min(52dvh,530px);min-height:250px;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y}#board{width:880px;height:540px;position:relative;transform-origin:0 0}#factory,#cells{position:absolute;inset:0;width:880px;height:540px;pointer-events:none}#cells .cell{position:absolute;width:48px;height:48px;min-height:48px;padding:0;border:2px solid transparent;border-radius:12px;background:transparent;box-shadow:none;pointer-events:auto;color:transparent;transform:none}#cells .cell.chosen{border-color:var(--red);background:#ffca3a33}#cells .cell:focus-visible{outline:3px solid var(--red)}.camera{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:7px;pointer-events:none}.camera button{pointer-events:auto;min-width:44px;padding:0;background:#ffffffed}.camera span{font-size:.7rem;background:#ffffffe8;border-radius:8px;padding:5px;max-width:100px}#operation{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}#run{background:var(--yellow)}#ship{background:var(--green)}#throughput{font-size:.8rem;font-weight:800}#builder{border-left:5px solid var(--blue);padding:0 0 0 12px;margin:12px 0}.toolrow{display:flex;gap:10px;align-items:end;flex-wrap:wrap}label{display:flex;flex-direction:column;gap:5px;font-size:.85rem;font-weight:900}select{max-width:100%}#selectedInfo{font-size:.85rem;line-height:1.5;margin-bottom:4px}#notice{min-height:1.5rem;font-size:.85rem;color:#763117;font-weight:800;margin:4px 0}.panel{position:fixed;inset:12px;margin:auto;max-width:560px;max-height:calc(100dvh - 24px);height:fit-content;overflow:auto;z-index:10;background:var(--cream);border:3px solid var(--ink);border-radius:28px;padding:24px;box-shadow:0 0 0 100vmax #1e29456b,0 8px 0 #1e2945}h1,h2{margin:6px 0 14px;text-align:center}.panel>p{line-height:1.5}.panel>label{margin:14px 0}.menuActions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.small{font-size:.82rem}.toyrobot{margin:auto;background:var(--blue);color:var(--yellow);font-size:3rem;font-weight:1000;width:80px;height:70px;text-align:center;border:4px solid var(--ink);border-radius:24px;box-shadow:6px 6px 0 #d3b77b}details{line-height:1.6;margin:20px 0}summary{font-weight:900;cursor:pointer;min-height:44px}label.check{flex-direction:row;align-items:center;min-height:44px}input[type=checkbox]{width:24px;height:24px}#confirm{background:var(--yellow)}@media(max-width:560px){#app{padding:8px}.toolrow{gap:7px}.toolrow label{flex:1 1 100px}.toolrow button{flex:1 1 100%}#resources{font-size:.75rem}#workspace{border-radius:18px}#boardScroll{height:40dvh;min-height:230px}.panel{padding:20px}#operation button{flex:1}header strong{font-size:1.05rem}.camera span{display:none}}

.robot{position:static;display:block;width:150px;height:150px;margin:0 auto;pointer-events:none}

.host{position:absolute;left:6px;bottom:3px;width:96px;height:96px;pointer-events:none}#resources,#throughput{font-variant-numeric:tabular-nums}

/* Camera and host occupy their own rail: they must never intercept a factory cell. */
.stageTools{display:flex;align-items:center;justify-content:space-between;gap:12px;height:98px;padding:0 8px;background:#e5f2ef;border-top:2px solid #97b9b8}
.stageTools .host{position:static;flex:0 0 96px;width:96px;height:96px}
.stageTools .camera{position:static;flex:0 0 auto;pointer-events:auto}
#boardScroll{height:min(44dvh,430px);min-height:200px}
@media(max-width:560px){#boardScroll{height:32dvh;min-height:180px}}

.menu-cover{display:block;width:100%;height:auto;max-height:170px;object-fit:cover;border-radius:16px;border:2px solid var(--ink);margin-bottom:12px}.panel>.robot{width:110px;height:110px}#boardScroll.routing{touch-action:none}.routing .cell{cursor:crosshair}

.menuSecondary{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.menuActions #play{background:var(--yellow)}.menuActions #continue{background:var(--blue);color:#fff}
@media(max-height:520px) and (min-width:600px){.panel .menu-cover{display:none}.panel>.robot{width:72px;height:72px}.panel{max-width:720px}.menuActions{margin:10px 0}}

/* Long translated words remain readable in narrow dialogs at large text sizes. */
.panel{overflow-wrap:anywhere}.panel button{max-width:100%;min-width:0}.panel select,.toolrow label{min-width:0}


header{flex-wrap:wrap}header strong{overflow-wrap:anywhere}button,select{min-width:0;max-width:100%}#operation button{flex:1 1 130px}#builder,#resources,#throughput,#graphicsNotice{overflow-wrap:anywhere}.cellrow{display:contents}
.sprite-pip{background-image:url('assets/pip-poses.webp');background-size:600% 100%;background-repeat:no-repeat}
#board.simple-board{width:1280px;height:auto;min-height:1120px}#board.simple-board #factory{display:none}#board.simple-board #cells{position:static;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:minmax(140px,auto);width:1280px;height:auto;gap:3px;padding:4px;background:#b8d1d1}
#board.simple-board .cell{position:static;width:auto;height:auto;min-height:140px;padding:8px;border:2px solid #456074;border-radius:10px;background:var(--cream);color:var(--ink);font-size:.72rem;white-space:pre-line;overflow-wrap:anywhere;line-height:1.4}
#board.simple-board .cell[data-kind=crate]{background:#b98858;color:#fff}#board.simple-board .cell[data-kind=feeder]{background:#ffe18c}#board.simple-board .cell[data-kind=cutter]{background:#b5def3}#board.simple-board .cell[data-kind=lathe]{background:#ded1ef}#board.simple-board .cell[data-kind=assembler]{background:#ffd4cc}#board.simple-board .cell[data-kind=depot]{background:#dcf2b2}#board.simple-board .cell.chosen{border:4px solid var(--red)}

#targets{font-size:.8rem;line-height:1.5;overflow-wrap:anywhere;margin:6px 0 10px}
/* Active controls also wrap long translated words at 200% text. */
button{overflow-wrap:anywhere}
/* Size controls from their text: large text gets full-width words, without shrinking it. */
#operation button{flex-basis:9.5em}.toolrow label{flex:1 1 9.5em}
#board.simple-board,#board.simple-board #cells{width:80rem}#board.simple-board{min-height:70rem}#board.simple-board #cells{grid-auto-rows:minmax(8.75rem,auto)}#board.simple-board .cell{min-height:8.75rem}