:root{color-scheme:light;--paper:#f7f3e9;--ink:#243e43;--muted:#5f7778;--rule:#c8ddd9;--teal:#24686b;--coral:#db6b58;--cream:#fffdf7;--shadow:0 14px 35px rgba(40,65,59,.14)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:"Segoe UI",Arial,sans-serif;background:var(--paper);color:var(--ink)}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid var(--coral);outline-offset:3px}::selection{background:#f5bd9d;color:#173b3d}
.app{height:100dvh;min-height:0;display:flex;flex-direction:column}.topbar{height:72px;flex:none;display:flex;align-items:center;padding:0 28px;gap:25px;background:var(--cream);border-bottom:1px solid #e2e5da;z-index:3}.brand{display:flex;gap:12px;align-items:center;font-family:Georgia,serif;font-size:30px;font-weight:bold;letter-spacing:-.045em;white-space:nowrap}.dot{color:var(--coral)}.brandmark{width:33px;height:33px;position:relative;display:inline-block;transform:rotate(-12deg)}.brandmark i{display:block;position:absolute;border:2px solid var(--teal);border-radius:50%}.brandmark i:nth-child(1){width:22px;height:20px;left:4px;top:7px}.brandmark i:nth-child(2){width:6px;height:6px;left:7px;top:1px;background:var(--teal)}.brandmark i:nth-child(3){width:6px;height:6px;right:1px;bottom:0;background:var(--coral);border-color:var(--coral)}.subtitle{padding-left:24px;border-left:1px solid #d5ddd6;font-size:14px;font-weight:600;color:var(--muted)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:22px}.live{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;white-space:nowrap}.live span{height:7px;width:7px;border-radius:50%;background:#75aa72;box-shadow:0 0 0 3px #e6f1de}.quiet{border:0;background:transparent;color:var(--ink);font-weight:650;padding:11px 12px;border-radius:8px}.quiet:hover{background:#e9eee6}
.notebook{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--paper);cursor:crosshair;touch-action:none}#world{display:block;width:100%;height:100%;touch-action:none}.notebook-meta{position:absolute;top:24px;left:34px;right:34px;display:flex;justify-content:space-between;pointer-events:none;color:#789296;font:11px Georgia,serif;letter-spacing:.15em;text-transform:uppercase}.intro{position:absolute;top:18%;left:clamp(34px,8vw,132px);width:min(390px,calc(100vw - 70px));padding:29px 32px 27px;background:rgba(255,253,247,.97);box-shadow:var(--shadow);border:1px solid #e8e1d0;border-radius:4px;cursor:default;transition:opacity .25s,transform .25s}.intro.dismissed{opacity:0;transform:translateY(-10px);pointer-events:none}.intro-spark{font-size:28px;color:var(--coral)}.intro h1{font:normal 36px/1.18 Georgia,"Malgun Gothic",serif;letter-spacing:-.035em;margin:5px 0 17px}.intro p{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 19px}.intro button{background:var(--teal);color:white;border:0;border-radius:5px;padding:10px 16px;font-weight:700}.intro button:hover,.action:hover{background:#185154}.intro button span{margin-left:18px}
.guide{position:absolute;z-index:2;top:20px;right:24px;width:min(315px,calc(100% - 48px));padding:24px 26px;background:var(--cream);box-shadow:var(--shadow);border:1px solid #e1e1d5;border-radius:5px;cursor:default}.guide[hidden],.selected[hidden]{display:none}.guide h2{font:normal 23px Georgia,"Malgun Gothic",serif;margin:0 25px 10px 0}.guide>p{font-size:13px;line-height:1.65;color:var(--muted);margin:0 0 19px}.guide button{position:absolute;right:12px;top:9px;font-size:24px;border:0;background:transparent;color:var(--muted)}.guide-row{display:flex;gap:15px;align-items:center;margin:13px 0}.guide-row strong,.guide-row small{display:block}.guide-row strong{font-size:14px}.guide-row small{font-size:12px;color:var(--muted);margin-top:4px}.guide-icon{width:38px;height:38px;flex:none;border:2px solid var(--teal);display:block}.guide-icon.spike{clip-path:polygon(50% 0,62% 35%,100% 46%,65% 58%,49% 100%,37% 60%,0 49%,35% 37%);background:var(--teal)}.guide-icon.round{border-radius:50%}.guide-icon.wing{height:20px;border-radius:50% 50% 10% 10%}.guide .guide-note{border-top:1px solid #e1e9df;padding-top:15px;margin:18px 0 0}
.map-tools{position:absolute;z-index:2;top:48px;right:26px;display:flex;align-items:center;gap:9px;background:rgba(255,253,247,.94);padding:5px 5px 5px 13px;border:1px solid #d7e1d9;border-radius:7px;box-shadow:0 5px 18px rgba(40,65,59,.09);cursor:default}.map-tools span{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}.map-tools button{border:0;border-radius:5px;background:var(--teal);color:#fff;font-size:12px;font-weight:700;padding:9px 12px;white-space:nowrap;touch-action:manipulation}.map-tools button:hover{background:#185154}.map-tools button.at-limit{background:#66817a}.map-tools button.at-limit:hover{background:#516d66}
.map-tools #shrinkBtn{background:#e9eee6;color:var(--ink)}.map-tools #shrinkBtn:hover{background:#dce8dd}.map-tools #shrinkBtn.at-limit,.map-tools #shrinkBtn.at-limit:hover{background:#d8ded8;color:#74827d}
.draw-panel{position:absolute;z-index:2;top:48px;left:26px;width:min(380px,calc(100% - 52px));padding:8px;background:rgba(255,253,247,.96);box-shadow:0 5px 18px rgba(40,65,59,.09);border:1px solid #d7e1d9;border-radius:7px;cursor:default}.draw-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.draw-modes button{border:0;border-radius:5px;background:transparent;padding:9px 3px;color:var(--muted);font-size:12px;font-weight:700;white-space:nowrap}.draw-modes button[aria-pressed="true"]{background:var(--teal);color:#fff}.draw-modes button:hover:not([aria-pressed="true"]){background:#e9eee6}.draw-panel p{margin:8px 7px 3px;color:var(--muted);font-size:12px;line-height:1.35}.draft-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;padding:8px 2px 1px;border-top:1px solid #dce6dd}.draft-actions[hidden]{display:none}.draft-actions span{font-size:11px;font-weight:700;color:var(--muted);margin:0 auto 0 4px;white-space:nowrap}.draft-actions button{border:0;border-radius:5px;background:#e9eee6;color:var(--ink);font-size:11px;font-weight:700;padding:8px;white-space:nowrap}.draft-actions #hatchBtn{background:var(--teal);color:#fff}.draft-actions button:hover:not(:disabled){filter:brightness(.93)}.draft-actions button:disabled{opacity:.45;cursor:default}
.intro{z-index:3}.guide{z-index:4}
.guide-icon.tower{width:22px;height:38px;margin:0 8px;border-radius:9px 9px 2px 2px}.guide-icon.heavy{width:38px;height:33px;border-radius:8px}.guide-icon.walker{width:35px;height:27px;border-radius:7px 10px 4px 5px}.guide{max-height:calc(100% - 25px);overflow:auto}.guide::-webkit-scrollbar{width:7px}.guide::-webkit-scrollbar-thumb{background:#b7c7c1;border-radius:8px}
.toast{position:absolute;left:50%;bottom:20px;transform:translateX(-50%) translateY(12px);padding:10px 16px;background:var(--ink);color:#fff;border-radius:4px;font-size:13px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.selected{position:absolute;left:26px;bottom:24px;max-width:260px;padding:13px 15px;background:rgba(255,253,247,.95);border:1px solid #dce6dd;box-shadow:0 6px 18px rgba(40,65,59,.1);font-size:12px;line-height:1.7;pointer-events:none}.selected strong{display:block;font-size:15px}.selected span{color:var(--muted)}
.toolbar{height:83px;flex:none;padding:0 28px;background:var(--cream);border-top:1px solid #dedfd2;display:flex;align-items:center;gap:24px;z-index:2}.hint{display:flex;align-items:center;gap:15px;min-width:270px}.hint strong,.hint small{display:block}.hint strong{font-size:14px}.hint small{font-size:12px;color:var(--muted);margin-top:4px}.pen{width:30px;height:30px;display:block;position:relative;transform:rotate(-35deg)}.pen:before{content:"";position:absolute;left:11px;top:1px;width:8px;height:22px;border:2px solid var(--teal);border-radius:4px 4px 1px 1px}.pen:after{content:"";position:absolute;left:13px;top:25px;width:4px;height:6px;background:var(--coral);clip-path:polygon(0 0,100% 0,50% 100%)}.counts{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--muted);white-space:nowrap}.counts b{font:22px Georgia,serif;color:var(--ink);margin-right:3px}.divider{height:22px;width:1px;background:#d8e1d9}.controls{display:flex;gap:5px;margin-left:auto;align-items:center;white-space:nowrap}.controls .quiet{font-size:13px}.action{background:var(--teal);border:0;border-radius:5px;color:#fff;padding:11px 16px;font-size:13px;font-weight:700}.action span{font-size:11px;margin-right:7px;color:#ffb6a2}
.tool-toggle[aria-pressed="true"]{background:#f9ddd4;color:#9d3e35}#peaceBtn[aria-pressed="true"]{background:#e0eee2;color:#276441}#world.erasing{cursor:none}.selected{pointer-events:auto}.selected .drop-tool{display:inline-block;margin:8px 6px 0 0;padding:6px 9px;border:1px solid #b7d2ca;border-radius:5px;background:#eaf2ee;color:var(--teal);font-size:11px;font-weight:700}.selected .drop-tool:hover{background:#dbece6}
.ink-palette{display:flex;align-items:center;gap:8px;padding:7px 7px 2px}.ink-palette span{margin-right:3px;color:var(--muted);font-size:11px;font-weight:700}.ink-palette button{width:24px;height:24px;flex:none;border:2px solid #fffdf7;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #c8d4cc}.ink-palette button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink),0 0 0 5px #fffdf7}.ink-palette button[data-ink="#227275"]{--swatch:#227275}.ink-palette button[data-ink="#517996"]{--swatch:#517996}.ink-palette button[data-ink="#d76a55"]{--swatch:#d76a55}.ink-palette button[data-ink="#8c6897"]{--swatch:#8c6897}.ink-palette button[data-ink="#9a752f"]{--swatch:#9a752f}.ink-palette button[data-ink="#35444d"]{--swatch:#35444d}
.name-editor{position:absolute;z-index:3;left:300px;bottom:24px;width:230px;padding:13px;background:var(--cream);box-shadow:var(--shadow);border-radius:6px;display:grid;gap:8px}.name-editor[hidden]{display:none}.name-editor label{font-size:12px;font-weight:700;color:var(--ink)}.name-editor input{width:100%;padding:8px;border:1px solid #a9c2bb;border-radius:4px;background:#fff;color:var(--ink);font:14px "Segoe UI",Arial,sans-serif}.name-editor>div{display:flex;gap:6px}.name-editor button,.selected .rename-creature{border:1px solid #b7d2ca;border-radius:5px;background:#eaf2ee;color:var(--teal);padding:6px 9px;font-size:11px;font-weight:700}.name-editor button:first-child{background:var(--teal);color:white}.name-editor button:hover,.selected .rename-creature:hover{filter:brightness(.94)}.selected .rename-creature{margin-top:8px;margin-right:6px}
.selected{pointer-events:auto}.selected .drop-tool{display:block;margin-top:8px;padding:6px 9px;border:1px solid #b7d2ca;border-radius:5px;background:#eaf2ee;color:var(--teal);font-size:11px;font-weight:700}.selected .drop-tool:hover{background:#dbece6}.selected .durability{display:block;margin-top:2px;font-variant-numeric:tabular-nums}
@media(max-width:900px){.topbar{padding:0 16px;height:64px;gap:13px}.subtitle,.live{display:none}.toolbar{height:auto;min-height:82px;padding:11px 14px;gap:10px;flex-wrap:wrap}.hint{min-width:0;flex:1}.hint small{display:none}.counts{order:3;width:100%;justify-content:center}.controls{gap:0}.controls .quiet,.action{padding:10px 9px}.intro{top:14%;left:24px}.notebook-meta{left:18px;right:18px}}
@media(max-width:600px){.brand{font-size:25px}.top-actions{gap:0}.topbar .quiet{font-size:12px}.toolbar{display:grid;grid-template-columns:1fr auto;row-gap:8px}.hint{grid-column:1;grid-row:1}.hint strong{font-size:12px}.pen{display:none}.counts{grid-column:2;grid-row:1;width:auto;font-size:11px;gap:7px}.counts b{font-size:17px}.controls{grid-column:1/-1;grid-row:2;justify-content:space-between;width:100%}.controls .quiet,.action{font-size:12px;padding:8px 7px}.intro{top:11%;left:16px;padding:22px;width:min(330px,calc(100vw - 32px))}.intro h1{font-size:28px}.notebook-meta{top:12px;font-size:9px}.notebook-meta span:last-child{display:none}}
@media(max-width:600px){.controls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}.controls .quiet,.controls .action{width:100%;font-size:10px;padding:8px 2px}.controls .action span{display:none}.name-editor{left:11px;bottom:135px;width:min(230px,calc(100% - 22px))}}
@media(max-width:600px){.map-tools{top:30px;right:12px;gap:5px;padding-left:8px}.map-tools span{font-size:10px}.map-tools button{padding:8px 9px;font-size:11px}.guide{top:78px;right:12px;max-height:calc(100% - 88px)} }
@media(max-width:600px){.draw-panel{top:76px;left:12px;width:calc(100% - 24px);padding:6px}.draw-modes button{font-size:12px;padding:8px 4px}.draw-panel p{font-size:11px;margin:6px 5px 2px}.draft-actions{gap:4px}.draft-actions span{width:100%;margin:0 2px 3px}.draft-actions button{flex:1;font-size:11px}.intro{top:14%}}
@media(max-width:600px){.topbar{padding:0 7px;gap:5px}.brand{font-size:23px}.top-actions .quiet{padding:8px 5px;font-size:11px}.top-actions{gap:1px}.selected{max-width:220px;bottom:11px;left:11px}}
.draw-modes{grid-template-columns:repeat(4,minmax(0,1fr))}.draw-modes button{font-size:11px;white-space:normal;min-height:37px}.scenery-kinds{display:flex;gap:5px;padding:6px 6px 0}.scenery-kinds[hidden]{display:none}.scenery-kinds button{flex:1;border:1px solid #c7d8cd;border-radius:5px;background:#f3f6ef;color:var(--muted);padding:7px;font-size:11px;font-weight:700}.scenery-kinds button[aria-pressed="true"]{background:#dcebdc;border-color:#9cbe9e;color:#276441}.view-controls{position:absolute;z-index:2;top:101px;right:26px;display:flex;align-items:center;gap:4px;padding:5px;background:rgba(255,253,247,.96);border:1px solid #d7e1d9;border-radius:7px;box-shadow:0 5px 18px rgba(40,65,59,.09);cursor:default}.view-controls button{border:0;border-radius:5px;background:#e9eee6;color:var(--ink);min-height:30px;padding:5px 8px;font-size:11px;font-weight:700}.view-controls button:hover{background:#dce8dd}.view-controls button:disabled{opacity:.4;cursor:default}.view-controls #panBtn[aria-pressed="true"]{background:var(--teal);color:white}.view-controls span{min-width:65px;text-align:center;font-size:11px;color:var(--muted);font-weight:700}#world.panning{cursor:grab}#world.panning:active{cursor:grabbing}
@media(max-width:600px){.draw-modes{grid-template-columns:repeat(2,minmax(0,1fr))}.draw-modes button{min-height:32px}.view-controls{top:auto;bottom:12px;right:12px}.view-controls button{padding:5px 6px}.view-controls span{min-width:55px}.selected{bottom:65px}.name-editor{bottom:170px}}
@media(min-width:601px) and (max-width:900px){.view-controls{top:auto;bottom:14px;right:14px}.selected{bottom:64px}}
.solid-option{display:flex;align-items:center;gap:8px;margin:7px 7px 2px;padding:7px 9px;border-radius:5px;background:#edf3eb;color:#305d42;font-size:11px;font-weight:700;cursor:pointer}.solid-option[hidden]{display:none}.solid-option input{accent-color:#327253;width:16px;height:16px;margin:0}.selected .save-image{background:#e4eee9;color:#215d55}
.subtitle small{display:block;font-size:10px;font-weight:650;letter-spacing:.04em;color:#749994;margin-top:2px}
.draw-panel{width:min(430px,calc(100% - 52px))}
.scenery-kinds{flex-wrap:wrap}
.scenery-kinds button{min-width:calc(33.333% - 5px)}
.ink-palette{flex-wrap:wrap;gap:7px}
.ink-palette button[data-ink="#4d944d"]{--swatch:#4d944d}
.ink-palette button[data-ink="#91b853"]{--swatch:#91b853}
.ink-palette button[data-ink="#dfaa51"]{--swatch:#dfaa51}
.ink-palette button[data-ink="#e995a6"]{--swatch:#e995a6}
.ink-palette button[data-ink="#5caed0"]{--swatch:#5caed0}
.ink-palette button[data-ink="#92c7bd"]{--swatch:#92c7bd}
.custom-ink,.brush-option{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap}
.custom-ink input{width:32px;height:27px;padding:1px;border:1px solid #c7d8cd;border-radius:5px;background:#fffdf7;cursor:pointer}
.brush-option{padding:5px 7px 2px}
.brush-option input{width:140px;accent-color:var(--teal)}
#autoFoodBtn[aria-pressed="true"]{background:#e0eee2;color:#276441}
#autoFoodBtn[aria-pressed="false"]{background:#f3ede4;color:#776b55}
@media(min-width:901px) and (max-width:1200px){.toolbar{gap:12px;padding:0 16px}.hint{min-width:205px}.controls .quiet,.controls .action{font-size:11px;padding:9px 7px}}
@media(max-width:600px){.controls{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.draw-panel{width:calc(100% - 24px)}.ink-palette button{width:22px;height:22px}.scenery-kinds button{min-width:calc(33.333% - 5px)}}

/* An embedded phone screen gives the field priority. The tools open on demand. */
.tool-panel-toggle{display:none}
.open-full{display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}
@media(max-width:700px),(max-height:520px){
  html,body{height:100%;overflow-x:hidden;overflow-y:auto}
  .app{height:100vh;height:100dvh;min-height:430px}
  .topbar{height:46px;padding:0 8px;gap:4px}
  .brand{font-size:20px;gap:5px}
  .brandmark{transform:rotate(-12deg) scale(.72);width:26px;margin-left:-4px;margin-right:-4px}
  .top-actions{gap:0}
  .top-actions .quiet{font-size:10px;line-height:1.2;padding:7px 4px;white-space:nowrap}
  .notebook{min-height:280px}
  .notebook-meta{display:none}
  .toolbar{height:60px;min-height:60px;display:flex;align-items:center;padding:5px 8px;gap:0}
  .hint,.counts{display:none}
  .controls{display:flex;flex:1;min-width:0;gap:5px;margin:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin;justify-content:flex-start}
  .controls .quiet,.controls .action{flex:0 0 auto;width:auto;min-width:max-content;min-height:44px;padding:9px 10px;font-size:11px;scroll-snap-align:start}
  .controls #feedBtn{order:1}
  .controls #eraseBtn{order:2}
  .controls #pauseBtn{order:3}
  .controls #autoFoodBtn{order:4}
  .controls #jumpBtn{order:5}
  .controls #peaceBtn{order:6}
  .controls #resetBtn{order:7}
  .tool-panel-toggle{position:absolute;z-index:4;top:6px;left:8px;display:flex;align-items:center;gap:7px;min-height:44px;max-width:calc(100% - 165px);padding:7px 10px;border:0;border-radius:7px;background:#fffdf7;box-shadow:0 4px 13px rgba(40,65,59,.12);color:var(--ink);font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tool-panel-toggle[aria-expanded="true"]{background:var(--teal);color:#fff}
  .tool-glyph{display:block;flex:none;width:17px;height:17px;border:2px solid currentColor;border-radius:2px;transform:rotate(-27deg)}
  .tool-glyph:after{content:"";display:block;width:7px;height:2px;background:currentColor;transform:translate(4px,13px)}
  .tool-chevron{display:block;flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
  .tool-panel-toggle[aria-expanded="true"] .tool-chevron{transform:translateY(2px) rotate(225deg)}
  .draw-panel{display:none;top:55px;left:8px;right:8px;width:auto;max-height:clamp(160px,48vh,300px);max-height:clamp(160px,48dvh,300px);padding:8px;overflow-y:auto;overscroll-behavior:contain;z-index:4}
  .draw-panel.is-open{display:block}
  .draw-modes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .draw-modes button{min-height:44px;font-size:12px}
  .map-tools{z-index:5;top:6px;right:8px;padding:3px;gap:3px}
  .map-tools span{display:none}
  .map-tools button{min-height:44px;padding:7px 5px;font-size:10px}
  .map-tools #shrinkBtn{min-width:44px}
  .view-controls{top:auto;bottom:8px;right:8px;max-width:calc(100% - 16px);padding:3px;gap:2px}
  .view-controls button{min-height:40px;padding:5px 6px}
  .view-controls span{min-width:52px;font-size:10px}
  .intro{top:auto;bottom:55px;left:8px;right:8px;width:auto;max-width:none;padding:9px 10px;display:flex;align-items:center;gap:8px}
  .intro-spark,.intro p{display:none}
  .intro h1{font-size:14px;line-height:1.3;margin:0}
  .intro h1 br{display:none}
  .intro button{margin-left:auto;flex:none;min-height:44px;padding:7px 10px;font-size:11px}
  .selected{left:8px;bottom:53px;max-height:42%;max-width:min(250px,calc(100% - 16px));overflow-y:auto}
  .name-editor{left:8px;bottom:53px;max-width:calc(100% - 16px)}
  .guide{top:54px;right:8px;max-height:calc(100% - 62px)}
}
@media(max-width:360px){.brand{font-size:18px}.brandmark{display:none}.top-actions .quiet{padding:7px 3px}}
@media(max-height:360px){.open-full{background:var(--teal);color:white}.open-full:hover{background:#185154}}

/* Compact panels and a quiet, reversible canvas-only view. */
.draw-panel-head,.selected-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.draw-panel-head{margin:0 2px 7px;color:var(--ink);font-size:12px}
.draw-panel-head button,.selected-close{min-width:44px;min-height:44px;padding:8px;border:0;border-radius:6px;background:#e9eee6;color:var(--ink);font-size:11px;font-weight:700;touch-action:manipulation}
.draw-panel-head button:hover,.selected-close:hover{background:#dce8dd}
.draw-panel.is-dismissed{display:none}
.tool-panel-toggle.is-available{display:flex}
@media(min-width:701px) and (min-height:521px){
  .tool-panel-toggle.is-available{position:absolute;z-index:4;top:48px;left:26px;align-items:center;gap:7px;min-height:44px;padding:7px 10px;border:0;border-radius:7px;background:#fffdf7;box-shadow:0 4px 13px rgba(40,65,59,.12);color:var(--ink);font-size:12px;font-weight:700}
}
.selected-head{align-items:flex-start}
.selected-head strong{min-width:0;flex:1}
.selected-close{flex:none}
.ui-restore{display:none;position:fixed;z-index:10;top:calc(env(safe-area-inset-top) + 10px);right:calc(env(safe-area-inset-right) + 10px);align-items:center;justify-content:center;min-width:72px;min-height:44px;padding:8px 12px;border:1px solid #c7d8cd;border-radius:7px;background:rgba(255,253,247,.92);box-shadow:0 5px 18px rgba(40,65,59,.12);color:var(--ink);font-size:12px;font-weight:700;touch-action:manipulation}
.ui-restore:hover{background:#fffdf7}
.ui-restore[hidden]{display:none}
.app.ui-hidden{height:100vh;height:100dvh;min-height:0}
.app.ui-hidden .topbar,.app.ui-hidden .toolbar,.app.ui-hidden .map-tools,.app.ui-hidden .view-controls,.app.ui-hidden .tool-panel-toggle,.app.ui-hidden .draw-panel,.app.ui-hidden .notebook-meta,.app.ui-hidden .intro,.app.ui-hidden .guide,.app.ui-hidden .selected,.app.ui-hidden .name-editor,.app.ui-hidden .toast{display:none!important}
.app.ui-hidden .notebook{flex:1;min-height:0;cursor:grab}
.app.ui-hidden #world{cursor:grab}
.app.ui-hidden .ui-restore{display:flex}
@media(max-width:700px),(max-height:520px){
  .controls #uiToggleBtn{order:4}
  .controls #autoFoodBtn{order:5}
  .controls #jumpBtn{order:6}
  .controls #peaceBtn{order:7}
  .controls #resetBtn{order:8}
  .draw-panel-head{position:sticky;top:-8px;z-index:1;margin:-8px -8px 6px;padding:6px 8px;background:#fffdf7}
}