:root{--accent:#42664e;--ink:#233e35;--cream:#f7f4e9;--line:#d9dfd1;--dim:#617264}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#edf0e5;color:var(--ink);font-family:'Nunito Sans',sans-serif}button,input,select{font:inherit}button{cursor:pointer;background:#fffdf7;border:1px solid var(--line);border-radius:12px;color:var(--ink);font-weight:800;padding:10px 13px;min-height:42px;transition:transform .14s,background .14s}button:hover:not(:disabled){background:#e9efdf;transform:translateY(-1px)}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #cf9d42;outline-offset:3px}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}#game{width:min(1440px,100%);margin:0 auto;max-height:1000px;min-height:620px;padding:20px 24px 10px}header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 0 18px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{background:var(--accent);color:#f7e4b6;display:grid;place-items:center;width:45px;height:45px;border-radius:15px;font-size:30px}.eyebrow{display:block;font-size:10px;letter-spacing:1.8px;font-weight:800;color:var(--dim)}h1,h2,p{margin:0}h1,h2{font-family:'Bricolage Grotesque',sans-serif}h1{font-size:clamp(19px,2.3vw,29px);font-weight:800;letter-spacing:-.6px;line-height:1.15;margin-top:3px}.top-controls{display:flex;gap:7px}.top-controls button{font-size:12px;border-radius:30px;padding:7px 12px}.top-controls #help-toggle{width:42px;padding:0}.layout{display:grid;grid-template-columns:minmax(0,1fr) 295px;background:var(--cream);border:1px solid #d3dbcb;border-radius:22px;overflow:hidden;box-shadow:0 15px 45px #334b3510}.play-area{min-width:0;background:#e9eddd;border-right:1px solid var(--line)}.level-strip{display:flex;justify-content:space-between;padding:15px 19px 11px;font-size:11px;color:var(--dim);letter-spacing:.7px}.level-strip b{color:var(--ink)}.progress{height:3px;background:#dde4d2}.progress i{display:block;background:var(--accent);height:100%;width:2%;transition:width .3s}#viewport{position:relative;height:clamp(360px,67vh,620px);isolation:isolate;touch-action:none;overflow:hidden}canvas{display:block;width:100%;height:100%;outline-offset:-4px!important}.viewport-corner{position:absolute;top:16px;left:19px;font-size:9px;letter-spacing:1.8px;color:#53664f;pointer-events:none}.view-caption{position:absolute;bottom:15px;left:18px;background:#fffdf6c9;padding:7px 13px;font-size:10px;border:1px solid #d5ddcb;border-radius:20px}.play-footer{min-height:52px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 17px;border-top:1px solid #d5dfca;background:#eef1e5}.play-footer p{font-size:12px;font-weight:700;line-height:1.45}.play-footer button{font-size:10px;min-height:32px;white-space:nowrap;padding:6px 10px}aside{padding:24px 22px;background:#fbfaf3}.panel-top{padding-bottom:20px}aside h2{font-size:26px;line-height:1.05;letter-spacing:-.6px;margin-top:10px}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;margin-bottom:22px}.metrics div{display:flex;flex-direction:column;gap:5px}.metrics span{font-size:9px;color:var(--dim);font-weight:700}.metrics strong{font-family:'Bricolage Grotesque';font-size:18px;line-height:1.1;overflow-wrap:anywhere}ol{list-style:none;padding:0;margin:10px 0 14px}li{display:flex;gap:10px;align-items:flex-start;margin:12px 0;font-size:12px;line-height:1.45}li b{font:800 10px 'Nunito Sans';background:#e9eedf;border-radius:7px;padding:5px;min-width:25px;text-align:center}li span{padding-top:2px}.input-note{font-size:10px;color:var(--dim);line-height:1.6}.tool-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin:20px 0}.tool-buttons button{font-size:11px;padding:7px 3px;min-height:38px}.campaign-controls{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:8px;padding-top:16px;border-top:1px solid var(--line)}label{font-size:10px;font-weight:800;display:flex;flex-direction:column;gap:7px}select,input{width:100%;border:1px solid var(--line);border-radius:9px;min-height:36px;background:#fffef9;color:var(--ink);padding:5px;font-size:11px}.tiny{font-size:9px;color:var(--dim);line-height:1.5;margin-top:11px}footer{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.4px;padding:12px 6px;color:var(--dim)}#intro,#paused{position:absolute;inset:0;display:grid;place-items:center;background:#dfe7d58c;backdrop-filter:blur(5px);z-index:5;padding:20px}.intro-card{display:flex;align-items:center;gap:25px;max-width:660px;background:#fbf9edf5;border:1px solid #fff;border-radius:24px;padding:24px;box-shadow:0 18px 60px #203c2d22}.intro-card img{width:42%;border-radius:16px}.intro-card h2{font-size:30px;line-height:1;margin:10px 0}.intro-card p{font-size:12px;line-height:1.6;margin-bottom:16px}.intro-card button{background:var(--accent);color:#fff5db;border:0;width:100%;font-size:15px}.intro-card small{display:block;font-size:9px;color:var(--dim);margin-top:10px;text-align:center}#win{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:14px;padding:14px 18px;background:#fbf8e9f5;box-shadow:0 10px 40px #1c382e22;border:1px solid white;border-radius:18px;white-space:nowrap}#win strong{font-family:'Bricolage Grotesque';font-size:17px}.win-star{font-size:32px;color:#c69a43}#next{background:var(--accent);color:#fff5d9;border:0}.board-controls{display:none;gap:5px;padding:12px}.board-controls.show{display:grid}.board-controls button{font-size:16px;min-height:39px}.hinted{outline:3px solid #ca9840}.action-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:15px}.action-buttons:empty{display:none}.action-buttons button{font-size:11px;padding:8px 5px}#paused{display:flex;flex-direction:column;gap:10px;color:var(--ink)}#paused strong{font:800 36px 'Bricolage Grotesque'}#paused span{font-size:13px}@media(max-width:760px){#game{padding:12px 10px 5px;max-height:1000px;overflow-y:auto;min-height:0}header{padding-bottom:12px;gap:8px}.brand{gap:8px}.brand-mark{width:35px;height:35px;border-radius:11px;font-size:24px}.eyebrow{font-size:8px;letter-spacing:1.3px}h1{font-size:20px}.brand .eyebrow{font-size:7px}.top-controls button{font-size:10px;padding:5px 8px;min-height:33px}.top-controls #pause{display:none}.top-controls #help-toggle{display:none}.layout{grid-template-columns:1fr;border-radius:17px}.play-area{border-right:0}.level-strip{padding:11px 13px 9px;font-size:10px}#viewport{height:clamp(300px,48vh,440px)}aside{padding:17px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.panel-top{padding-bottom:0}aside h2{font-size:22px;margin-top:5px}.metrics{margin:0;padding:7px 0;border-top:0;align-items:center;gap:6px}.metrics strong{font-size:15px}.metrics span{font-size:8px}#help-panel{grid-column:1/-1}.input-note{display:none}ol{display:flex;gap:12px;margin:7px 0 0}li{flex:1;display:block;font-size:10px;margin:0}li b{display:inline-block;margin-bottom:5px}li span{display:block}.tool-buttons{grid-column:1/-1;margin:0}.campaign-controls{grid-column:1/-1;padding-top:10px;grid-template-columns:1fr 105px}.tiny{display:none}.action-buttons{grid-column:1/-1;margin:0}.play-footer{padding:8px 12px;min-height:48px}.play-footer p{font-size:10px}.play-footer button{font-size:9px}.intro-card{display:block;text-align:center;max-width:330px;padding:18px}.intro-card img{width:100px;height:100px;object-fit:cover;border-radius:13px;float:left;margin:0 12px 5px 0}.intro-card h2{font-size:23px;text-align:left}.intro-card .eyebrow{font-size:7px;text-align:left}.intro-card p{font-size:10px;text-align:left;line-height:1.45}.intro-card button{clear:both;font-size:13px}.intro-card small{font-size:8px}#intro{padding:12px}#win{bottom:13px;padding:9px 11px;gap:8px}#win strong{font-size:14px}#win button{font-size:11px;min-height:35px}.win-star{font-size:24px}footer{font-size:6px;letter-spacing:.7px;padding:10px 2px}.viewport-corner{top:13px;left:13px;font-size:8px}.view-caption{bottom:12px;left:12px;font-size:9px}}@media(max-width:380px){h1{font-size:17px}.brand-mark{display:none}.top-controls button{font-size:9px}.metrics strong{font-size:13px}aside h2{font-size:20px}}