/* Map-first play mode; menu and modal styling remain in style.css. */
body.playing{overflow:hidden;overscroll-behavior:none}
.play-screen{position:fixed;inset:0;isolation:isolate;background:#e9e7d4;color:#385d4e;--edge:max(16px,env(safe-area-inset-left));--bottom:max(16px,env(safe-area-inset-bottom))}
.play-map{position:absolute;inset:0;overflow:hidden;aspect-ratio:auto}
.play-screen #world{width:100%;height:100%;aspect-ratio:auto;touch-action:none;outline:none}
.play-screen #world:focus-visible{outline:2px solid #517a63;outline-offset:-3px}
.float-surface{background:#fffbeeef;border:1px solid #fdf9e8;box-shadow:0 3px 12px #354b3a13;border-radius:18px;backdrop-filter:blur(8px)}
.map-button{width:46px;height:46px;min-width:46px;display:inline-grid;place-items:center;border-radius:13px;background:transparent;color:#416452;padding:0;flex-shrink:0;touch-action:manipulation}
.map-button .icon{width:22px;height:22px}
.map-button:hover:not(:disabled){background:#dce7cf}
.play-location{position:absolute;top:max(16px,env(safe-area-inset-top));left:var(--edge);display:flex;align-items:center;gap:4px;padding:3px 16px 3px 3px;max-width:calc(50% - 140px)}
.play-location>div{min-width:0}
.play-location span{display:block;font-size:8px;letter-spacing:1.4px;color:#839179;margin-bottom:3px}
.play-location b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.play-score{position:absolute;left:50%;top:max(16px,env(safe-area-inset-top));transform:translateX(-50%);display:flex;gap:18px;align-items:center;min-height:52px;padding:0 18px}
.play-score>span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.play-score .icon{width:19px;height:19px;color:#8b9e79}
.play-score b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.play-score small{font-size:10px;margin-left:3px;color:#89967e;font-weight:400}
.play-score .traffic-dot{width:8px;height:8px;border-radius:100%;background:#729768;flex-shrink:0}
.play-score .warning{color:#b9674e}
.play-options{position:absolute;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));display:flex;padding:3px}
.play-controls{position:absolute;left:var(--edge);bottom:var(--bottom);display:flex;align-items:center;gap:4px;padding:5px}
.run-circle{background:#376e57;color:#fff9e7;border-radius:50%}
.run-circle:hover:not(:disabled){background:#2c5e4c}
.run-circle.is-running{background:#e3c581;color:#665b3d}
.speed-button{font-size:14px;font-weight:600}
.play-timer{min-width:67px;padding:0 9px 0 3px;color:#839075;font-size:10px;font-variant-numeric:tabular-nums}
.play-timer .timeline{width:57px;height:3px;margin-top:6px}
.play-tools{position:absolute;bottom:var(--bottom);left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:8px;pointer-events:none}
.play-tools>*{pointer-events:auto}
.tool-dock{display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:20px}
.dock-budget{display:flex;align-items:center;gap:4px;padding:0 8px 0 2px;min-width:44px;font-size:16px;border-right:1px solid #e0e3cf;margin-right:2px}
.dock-budget .icon{color:#bba15e;width:19px;height:19px}
.dock-tool{position:relative;width:49px;height:49px;flex-shrink:0;padding:5px;display:flex;align-items:center;justify-content:center;gap:2px;background:transparent;border-radius:13px;color:#66836c;touch-action:manipulation}
.dock-tool>.icon{width:25px;height:25px}
.dock-tool small{font-size:9px;align-self:flex-end;margin-bottom:5px}
.dock-tool.active{background:#d8e7c7;color:#356347;box-shadow:inset 0 0 0 1px #a0ba88}
.dock-tool:hover:not(:disabled){background:#e5ecd8}
.dock-tool:disabled{opacity:.26;cursor:default}
.remove-control{border-left:1px solid #e4e5d5;border-radius:0 12px 12px 0;margin-left:1px}
.remove-control .icon{width:19px;height:19px}
.stock-count{position:absolute;top:3px;right:4px;font-size:7px;font-style:normal;color:#9b956c}
.tool-tip{position:absolute;bottom:calc(100% + 13px);left:50%;transform:translateX(-50%);padding:7px 10px;background:#3b6552;color:#fffbea;border-radius:8px;font-size:10px;white-space:nowrap;opacity:0;pointer-events:none}
.dock-tool:hover:not(:disabled) .tool-tip,.dock-tool:focus-visible .tool-tip{opacity:1}
.tool-context{display:flex;align-items:center;gap:5px;min-height:26px;font-size:10px;color:#5c7a62;padding:0 10px;background:#fffbeecc;border-radius:20px;white-space:nowrap}
.tool-context:has(#context-label:empty){visibility:hidden}
.tool-context .map-button{width:36px;height:36px;min-width:36px}
.tool-context .icon{width:14px;height:14px}
.quick-config{display:flex;padding:10px 14px 6px;gap:16px;border-radius:14px}
.quick-slider{width:100px}
.quick-slider label{display:flex;justify-content:space-between;font-size:9px;color:#688168}
.quick-slider output{font-weight:600;color:#446b51}
.quick-slider input{width:100%;height:30px;accent-color:#57835f;cursor:pointer;touch-action:pan-x;margin:0}
.quick-axis{display:flex;padding:3px;gap:3px;border-radius:12px}
.quick-axis button{width:50px;height:40px;font-size:22px;background:transparent;border-radius:9px;color:#698469}
.quick-axis button.active{background:#d5e4c2;color:#345e46}
.play-view{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:var(--bottom);display:flex;padding:5px}
.rotate-curtain{display:none}
.node-access{position:absolute;left:15px;top:80px;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.node-access:focus-within{width:auto;height:auto;clip-path:none;display:flex;gap:4px;padding:6px;border-radius:12px;background:#fff9e7;z-index:5}
.node-access button{padding:10px;background:#e3ecd5;border-radius:8px;color:#476d51}
.playing .toast{bottom:95px;font-size:11px;padding:9px 15px}
@media(max-height:540px) and (orientation:landscape){
  .play-screen{--edge:max(10px,env(safe-area-inset-left));--bottom:max(8px,env(safe-area-inset-bottom))}
  .play-location,.play-score,.play-options{top:max(8px,env(safe-area-inset-top))}
  .play-location{padding-right:10px;max-width:calc(50% - 112px)}
  .play-location b{font-size:11px}.play-location span{font-size:7px}
  .map-button{width:44px;height:44px;min-width:44px}
  .play-score{min-height:48px;padding:0 12px;gap:12px}.play-score b{font-size:14px}.play-score small{font-size:9px}.play-score .icon{width:16px;height:16px}
  .play-options{right:max(10px,env(safe-area-inset-right));padding:2px}.play-options .map-button{width:40px;min-width:40px}
  .play-controls{padding:4px;gap:0}.play-timer{position:absolute;bottom:calc(100% + 7px);left:8px;background:#fffbeecc;border-radius:8px;padding:6px 8px;display:flex;align-items:center;gap:8px}.play-timer .timeline{margin:0;width:42px}
  .tool-dock{padding:4px;gap:2px;border-radius:16px}.dock-tool{width:44px;height:46px}.dock-tool>.icon{width:23px;height:23px}.dock-budget{font-size:14px;min-width:40px;padding-right:7px}.dock-budget .icon{width:16px;height:16px}
  .play-tools{gap:5px}.tool-context{font-size:9px;min-height:24px}.quick-config{gap:12px;padding:7px 12px 2px}.quick-slider{width:91px}.quick-slider input{height:28px}
  .play-view{right:max(10px,env(safe-area-inset-right));padding:4px}.play-view .map-button{width:42px;min-width:42px}
  .modal-shade{padding:8px}.modal{max-height:96dvh;padding:20px}.modal-head{margin-bottom:10px}.modal-head h2{font-size:21px}
}
@media(max-width:700px) and (orientation:landscape){
  .play-controls{display:grid;grid-template-columns:44px 44px;gap:0}.play-controls .play-timer{position:static;display:block;min-width:0;width:44px;background:transparent;font-size:8px;padding:5px}.play-timer .timeline{width:34px;margin-top:5px}
  .play-view{flex-direction:column}.play-options .map-button{width:36px;min-width:36px}.play-location{max-width:calc(50% - 99px)}.play-location b{font-size:10px}.play-score{gap:8px;padding:0 10px}.play-score .icon{display:none}.play-score b{font-size:13px}
  .dock-budget{min-width:33px;font-size:12px;padding-right:5px}.dock-budget .icon{width:14px}.tool-dock{gap:0}.dock-tool{width:44px}.quick-slider{width:83px}.quick-config{gap:8px}.tool-context{max-width:310px}
}
@media(orientation:portrait) and (max-width:1000px){
  .rotate-curtain{position:absolute;inset:0;z-index:20;background:#f3f0dfeF;backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:30px;text-align:center}
  .rotate-phone{color:#658464;transform:rotate(90deg);padding:16px}.rotate-phone .icon{width:68px;height:68px}
  .rotate-curtain h1{font-size:24px;letter-spacing:-.8px;margin:0}.rotate-curtain p{font-size:12px;color:#7c8b71;margin:0 0 16px}.rotate-curtain .small-button{border:0;background:none;font-size:11px}
  .play-screen>div:not(.rotate-curtain):not(.play-map),.play-tools,.node-access{visibility:hidden;pointer-events:none}
}