:root{font-family:system-ui,-apple-system,sans-serif;color:#edeaf4;background:#101119;color-scheme:dark;font-size:16px}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer;background:#262837;border:1px solid #59596f;border-radius:10px;padding:10px 16px;color:inherit;min-height:44px}button:hover{background:#3c3b54}button:focus-visible{outline:3px solid #c9b8ff;outline-offset:2px}main{max-width:1200px;margin:auto;padding:20px}header{display:flex;gap:16px;justify-content:space-between;align-items:center;margin-bottom:16px}h1{font-size:clamp(20px,4vw,30px);margin:6px 0;overflow-wrap:anywhere}.eyebrow{font-size:12px;letter-spacing:.13em;color:#b5a6d5}.stage{position:relative;min-height:320px;height:min(60vh,570px);border:1px solid #454050;border-radius:16px;overflow:hidden;background:#1b1c25}.stage canvas{display:block;width:100%;height:100%}#canvas{height:100%}#loading{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:16px;background:#171922;z-index:3;padding:24px;text-align:center}#loading[hidden],#finish[hidden],#retry[hidden]{display:none}.hud{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;pointer-events:none;gap:8px}.hud span{background:#101119dd;border:1px solid #61586e;padding:8px 12px;border-radius:9px;font-size:14px}#finish{position:absolute;inset:0;background:#101119db;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;backdrop-filter:blur(5px)}#finish strong{font-size:28px;color:#dfccff}footer{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#bcb8c8;font-size:14px}footer p{max-width:580px;line-height:1.65}.pad{display:grid;grid-template-columns:repeat(3,48px);gap:5px;flex-shrink:0;margin-top:12px;touch-action:none;user-select:none}.pad button{font-size:22px;padding:6px;touch-action:none}.pad button:first-child{grid-column:2}.pad button:nth-child(2){grid-column:1}@media(max-width:520px){main{padding:10px}header{gap:8px}.stage{height:48vh;min-height:300px}footer{align-items:flex-start}.pad{grid-template-columns:repeat(3,42px);gap:3px}footer p{font-size:13px}}

.overlay{position:absolute;inset:0;z-index:2;background:#171922d9;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px;backdrop-filter:blur(4px)}.overlay[hidden]{display:none}.overlay strong{font-size:clamp(20px,4vw,30px);margin:14px 0;color:#ffe0a1}.overlay p{font-size:15px;line-height:1.8;color:#cec7d7}.overlay button{background:#d5b077;color:#241e1a;border-color:#e8c792;font-weight:700}.objective{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);padding:9px 14px;border:1px solid #7e6844;background:#211b18eb;color:#ffe0a1;border-radius:20px;white-space:nowrap;font-size:13px}header>div{flex:1}header button{font-size:13px;padding:9px 10px}.pad{grid-template-columns:repeat(3,48px)}.pad button{min-width:44px}#finish{z-index:2}footer p{font-size:14px}@media(max-width:520px){header{flex-wrap:wrap}header>div{flex-basis:100%}.pad{grid-template-columns:repeat(3,44px)}.objective{font-size:11px;max-width:95%;white-space:normal;text-align:center}}
.camera-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:10px}.camera-controls button{font-size:13px;padding:7px 12px}.camera-controls button[aria-pressed="true"]{background:#6b5236;border-color:#d6b177}.camera-controls output{min-width:78px;text-align:center;font-size:12px;color:#cec5b8}.camera-controls button:disabled{opacity:.35;cursor:default}.overlay{word-break:keep-all}.stage canvas{touch-action:none}@media(max-width:520px){.stage{height:52vh}.camera-controls{gap:5px}.camera-controls button{padding:6px 9px}}
#zoom-in,#zoom-out{min-width:44px}

/* The starter is also rendered inside /starters as an iframe. Keep the
   standalone document unchanged, while the embed owns only the game surface. */
html.embed-mode,html.embed-mode body{width:100%;height:100%;overflow:hidden}
html.embed-mode body{min-width:0}
html.embed-mode #game{position:relative;width:100%;height:100%;max-width:none;margin:0;padding:0;overflow:hidden}
html.embed-mode header{position:absolute;inset:10px 10px auto;z-index:6;margin:0;pointer-events:none}
html.embed-mode header>div,html.embed-mode header>#restart{display:none}
html.embed-mode header>#pause{display:block;margin-left:auto;pointer-events:auto}
html.embed-mode:not([data-embed-state="playing"]):not([data-embed-state="paused"]) header>#pause{visibility:hidden;pointer-events:none}
html.embed-mode .stage{width:100%;height:100%;min-height:0;border:0;border-radius:0}
html.embed-mode footer{display:none}
html.embed-mode[data-embed-state="loading"] .hud,html.embed-mode[data-embed-state="loading"] .objective,html.embed-mode[data-embed-state="loading"] .camera-controls,html.embed-mode[data-embed-state="loading"] #move-pad,
html.embed-mode[data-embed-state="intro"] .hud,html.embed-mode[data-embed-state="intro"] .objective,html.embed-mode[data-embed-state="intro"] .camera-controls,html.embed-mode[data-embed-state="intro"] #move-pad,
html.embed-mode[data-embed-state="paused"] .hud,html.embed-mode[data-embed-state="paused"] .objective,html.embed-mode[data-embed-state="paused"] .camera-controls,html.embed-mode[data-embed-state="paused"] #move-pad,
html.embed-mode[data-embed-state="complete"] .hud,html.embed-mode[data-embed-state="complete"] .objective,html.embed-mode[data-embed-state="complete"] .camera-controls,html.embed-mode[data-embed-state="complete"] #move-pad{display:none}
html.embed-mode .camera-controls{position:absolute;left:12px;right:auto;bottom:12px;width:max-content;max-width:calc(100% - 184px);z-index:5;margin:0;padding:4px;justify-content:flex-start;background:#101119b8;border:1px solid #61586e;border-radius:10px;backdrop-filter:blur(6px)}
html.embed-mode .camera-controls output{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
html.embed-mode #move-pad{position:absolute;right:12px;bottom:12px;z-index:5;margin:0;grid-template-columns:repeat(3,48px);gap:2px}
html.embed-mode .hud{top:12px;left:12px;right:110px}
html.embed-mode .objective{top:68px;bottom:auto;z-index:4}
html.embed-mode[data-embed-state="playing"] .objective{display:block}
@media(max-width:520px){html.embed-mode .camera-controls{left:8px;right:auto;bottom:12px;width:min(206px,calc(100% - 184px));max-width:206px;gap:3px;padding:3px;justify-content:flex-start}html.embed-mode .camera-controls button{min-width:44px;padding:6px 8px}html.embed-mode .camera-controls output{min-width:60px}html.embed-mode #move-pad{right:8px;bottom:8px;grid-template-columns:repeat(3,44px);gap:3px}html.embed-mode .objective{top:68px;max-width:calc(100% - 16px)}}

.edit-toolbar{position:absolute;top:12px;left:50%;z-index:7;display:flex;align-items:center;gap:6px;max-width:calc(100% - 24px);padding:6px 8px;transform:translateX(-50%);border:1px solid #48d8b0;border-radius:10px;background:#101119e8;color:#e8fff8;box-shadow:0 8px 24px #0008;backdrop-filter:blur(6px)}
.edit-toolbar[hidden]{display:none}.edit-toolbar strong{white-space:nowrap;color:#6ce6c0;font-size:13px}.edit-toolbar span{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c6d6d2;font-size:12px}.edit-toolbar button{min-height:44px;padding:7px 10px;font-size:12px}.edit-toolbar button:disabled{opacity:.45;cursor:default}
.local-assets{display:flex;gap:4px;flex-wrap:wrap}.local-assets button{min-height:36px;padding:5px 8px;border-color:#4f8b7d;font-size:11px}.local-assets button[aria-pressed="true"]{background:#1f806a;border-color:#8bf0cf;color:#fff}
html[data-mine-mode="edit"] .edit-toolbar{display:flex}html[data-mine-mode="edit"] .pad{display:none}html[data-mine-mode="edit"] .objective{display:none}
html.embed-mode[data-embed-state="edit"] .hud,html.embed-mode[data-embed-state="edit"] .objective,html.embed-mode[data-embed-state="edit"] #move-pad{display:none}
@media(max-width:700px){.edit-toolbar{left:8px;right:8px;top:8px;max-width:none;transform:none;flex-wrap:wrap;justify-content:flex-start}.edit-toolbar strong{flex-basis:auto}.edit-toolbar span{flex:1 1 100%;order:3;max-width:none}.edit-toolbar button{flex:1 1 calc(50% - 6px)}}
@media(max-width:520px){.hud{flex-wrap:wrap;align-items:stretch;gap:4px}.hud span{min-width:0;padding:6px 8px;font-size:12px;line-height:1.25}.hud span:first-child{flex:1 1 100%}.hud span:nth-child(2),.hud span:last-child{flex:1 1 calc(50% - 4px)}html.embed-mode .hud{top:58px;right:8px}.pad button:active,.pad button[aria-pressed="true"]{background:#6b5236;border-color:#f6cf7e;color:#fff}html.embed-mode .objective{top:142px}}

.stage:fullscreen { width:100vw!important; height:100dvh!important; max-height:none!important; }

#game:fullscreen {width:100vw!important;height:100dvh!important;padding:0!important;background:#22212d;} #game:fullscreen .stage {height:calc(100dvh - 110px)!important;}

/* Editing controls stay outside the playable viewport. */
html[data-mine-mode="edit"] .edit-toolbar { position:fixed;top:8px;left:8px;right:auto;width:250px;max-height:42vh;overflow:auto;transform:none;display:flex;flex-wrap:wrap;align-content:start;font-size:12px; }
html[data-mine-mode="edit"] .edit-toolbar button { flex:0 1 auto;min-height:36px;padding:6px 9px; }
html[data-mine-mode="edit"] .local-assets {width:100%;display:grid;grid-template-columns:1fr 1fr;}
html[data-mine-mode="edit"] .edit-toolbar span {white-space:normal;max-width:100%;}