:root{color-scheme:dark;font-family:Verdana,Arial,sans-serif;color:#eee;background:#292929;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:18px}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;border-radius:3px}button:hover{color:#93bc4b}button:focus-visible{outline:3px solid #93bc4b;outline-offset:3px}button:disabled{opacity:.35;cursor:default}button:disabled:hover{color:inherit}.hidden{display:none!important}#shell{width:min(1016px,100%,calc((100dvh - 195px)*1.6));margin:auto}#header{height:76px;border:8px solid #666;border-radius:5px;background:#000;margin:0 5px 8px;display:flex;align-items:center;justify-content:center;padding:0 20px;position:relative}#brand{font-size:38px;letter-spacing:.44em;white-space:nowrap;margin-left:.44em}#status{font-size:14px;position:absolute;right:18px;color:#bbb;max-width:32%;text-align:right}#viewport{border:8px solid #666;border-radius:5px;position:relative;overflow:hidden;aspect-ratio:1016/641;background:#ddd}#stage{width:1000px;height:625px;position:absolute;transform-origin:top left;overflow:hidden}#game{position:absolute;inset:0;width:1000px;height:625px;touch-action:none;outline:0}.screen{position:absolute;inset:0}.small{font-size:12px;color:#777}#loading{background:#ddd;color:#111;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading-title{font-size:60px;letter-spacing:.35em;margin-left:.35em}.loader{width:150px;height:3px;background:#aaa;position:relative;margin:35px 0 12px;overflow:hidden}.loader:after{content:"";position:absolute;inset:0;background:#679900;animation:load 1.2s ease-in-out infinite;transform-origin:left}@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.title-menu{position:absolute;left:700px;top:293px;display:flex;flex-direction:column;align-items:flex-start;gap:3px}.title-menu button{font-size:36px;font-weight:bold;color:#000;padding:4px 0;white-space:nowrap}.title-menu button:hover{color:#679900}.title-menu .subtle{font-size:15px;font-weight:normal;margin-top:17px}.credit,.edition{position:absolute;bottom:10px;right:12px;color:#aaa;font-size:13px}.edition{right:auto;left:12px}#select-screen{background:#333}.selection-heading{height:80px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;color:white}.selection-heading h1{font-size:39px;font-weight:normal;margin:0}.selection-heading strong{display:block;font-size:27px;font-weight:normal;text-align:right}.selection-heading span{display:block;font-size:12px;color:#aaa;text-align:right;margin-top:5px}.selection-tabs{height:40px;display:flex;background:#222;padding-left:12px;gap:8px}.selection-tabs button{padding:8px 20px;border-radius:0}.selection-tabs .active{background:#fff;color:#111}#level-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(5,1fr);height:465px;background:#fff;gap:1px;padding:2px}.level-card{position:relative;overflow:hidden;background:#eee;color:#111;border:2px solid transparent;border-radius:0;text-align:left;padding:0}.level-card:hover{border-color:#679900;color:#111}.level-card img{display:block;width:100%;height:100%;object-fit:cover;opacity:.85}.level-card .card-title{position:absolute;top:4px;left:6px;font-size:12px;font-weight:bold;background:#fffffff0;padding:3px 5px}.level-card .card-score{position:absolute;bottom:5px;right:6px;background:#111e;color:white;padding:3px 6px;font-size:12px}.level-card.complete .card-score{background:#537d00}.level-card.complete:after{content:'✓';position:absolute;bottom:5px;left:6px;background:#679900;color:white;width:21px;height:21px;text-align:center;border-radius:50%;line-height:21px}.selection-bottom{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 14px;font-size:11px;color:#bbb}.selection-bottom button{font-size:12px}#level-grid.tutorial-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:230px;align-content:center;padding:25px;gap:14px}.tutorial-grid .card-title{font-size:16px;top:10px;left:10px}#help-screen{background:#ddd;color:#111}#help-screen .selection-heading{background:#333}.help-copy{padding:15px 35px;height:545px;overflow:auto;font-size:16px;line-height:1.65}.help-copy h2{font-size:21px;margin:12px 0 5px}.help-copy p{margin:5px 0 15px}.primary{background:#679900!important;color:#fff!important;padding:11px 19px!important}.primary:hover{background:#78ae0a!important}.help-copy .primary{margin-top:4px}#game-hud{position:absolute;inset:0;pointer-events:none}#game-hud button,#game-hud nav,#tutorial-panel,#result-panel{pointer-events:auto}#level-label{position:absolute;top:15px;left:18px;font-size:17px;color:#111;text-shadow:0 1px #fffa}#helper-toggle{position:absolute;right:15px;top:12px;background:#ffffffa8;color:#333;padding:7px 10px;font-size:12px}#start-panel{position:absolute;left:340px;top:310px;width:320px;text-align:center;color:#fff;text-shadow:0 1px 3px #111}#start-panel p{font-size:16px;margin:13px 0 5px}#start-panel small{font-size:11px}.start-circle{background:#679900;color:white;width:70px;height:70px;border-radius:50%;font-size:31px;padding-left:11px;box-shadow:0 2px 8px #0005}.start-circle:hover{background:#7bab19;color:white}#pause-panel{position:absolute;top:220px;left:350px;width:300px;padding:25px;background:#222e;text-align:center;border:1px solid #777}#pause-panel h2{font-size:27px;font-weight:normal;margin:0 0 22px}#result-panel{position:absolute;top:100px;right:35px;width:275px;background:#111e;padding:20px 22px;border:1px solid #555;box-shadow:0 8px 22px #0002;animation:appear .25s ease-out}#result-panel h2{font-size:21px;font-weight:normal;margin:0 0 5px;color:#ddd}#result-panel.success h2{color:#9aca48}.result-score{display:flex;align-items:baseline;gap:9px}.result-score>span{font-size:58px;line-height:1.2}.result-score small{font-size:17px;color:#888}#result-checks{font-size:12px;line-height:2.1;margin:14px 0}.check{display:flex;justify-content:space-between}.check .yes{color:#a5cd65}.check .no{color:#ff8c7c}.result-actions{display:flex;flex-direction:column;gap:10px}.result-actions button{font-size:13px;padding:7px}#level-nav{position:absolute;bottom:12px;left:20px;right:20px;display:flex;align-items:center;justify-content:center;gap:22px;color:#eee;font-size:12px}#level-nav button{background:#0007;padding:7px 10px}kbd{font:10px Verdana;color:#aaa;margin-left:5px}#tutorial-panel{position:absolute;left:15px;top:48px;width:970px;background:#ffffffe8;color:#111;border-left:5px solid #679900;padding:12px 18px;box-shadow:0 2px 8px #0001}#tutorial-panel>div{display:flex;justify-content:space-between;font-size:14px}#tutorial-count{font-size:12px;color:#666}#tutorial-message{font-size:15px;line-height:1.5;margin:8px 0 10px;max-width:840px}#tutorial-panel button{font-size:12px;padding:8px 14px}#tutorial-next{float:right}#toolbar{display:flex;gap:14px;align-items:center;border:7px solid #666;border-radius:5px;margin:8px 5px 0;min-height:43px;background:#000;padding:0 8px;font-size:13px}#toolbar button{padding:4px 0;white-space:nowrap}#footer-hint{flex:1;text-align:center;color:#777;font-size:12px}#fullscreen{font-size:22px}#outside-hint{font-size:11px;text-align:center;color:#777;margin:12px 0 0}#blazor-error-ui{position:fixed;bottom:0;left:0;right:0;background:#622;padding:14px;text-align:center;z-index:99}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}:fullscreen{background:#292929;display:flex!important;flex-direction:column;justify-content:center;padding:10px;max-width:none!important;width:100vw!important}#shell:fullscreen #viewport{width:min(100%,calc((100vh - 145px)*1.585));align-self:center}#shell:fullscreen #header,#shell:fullscreen #toolbar{width:min(100%,calc((100vh - 145px)*1.585));align-self:center}@media(max-width:700px){#shell{width:min(1016px,100%,calc((100dvh - 150px)*1.6))}#shell:has(#tutorial-panel:not(.hidden)){width:min(1016px,100%,calc((100dvh - 205px)*1.6))}body{padding:5px}#header{height:52px;border-width:5px;margin:0 0 5px}#brand{font-size:25px}#status{font-size:10px;right:8px}#viewport{border-width:5px}#toolbar{border-width:5px;margin:5px 0 0;font-size:11px;gap:12px;padding:0 6px}#footer-hint{display:none}#sound{margin-left:auto}#outside-hint{font-size:10px}#fullscreen{font-size:19px}}
#header #tutorial-panel{inset:0;width:100%;height:60px;padding:5px 8px;background:#000;color:#ddd;border:0;box-shadow:none;display:grid;grid-template-columns:175px 1fr 60px 90px;align-items:center;gap:8px}#header #tutorial-panel>div{display:flex;flex-direction:column;text-align:center;gap:5px}#header #tutorial-message{margin:0;font-size:13px;line-height:1.35;color:#e5e174}#header #tutorial-title{font-size:16px}#header #tutorial-count{font-size:10px}#header #tutorial-next{float:none;padding:8px 10px!important;font-size:12px}#header #tutorial-back{padding:5px;font-size:10px}@media(max-width:700px){#header:has(#tutorial-panel:not(.hidden)){height:106px}#header #tutorial-panel{height:96px;grid-template-columns:100px 1fr 55px;gap:5px;padding:5px}#header #tutorial-message{font-size:10px}#header #tutorial-title{font-size:12px}#header #tutorial-back{display:none}#header #tutorial-next{font-size:10px;padding:8px 3px!important}}

/* Width drives the canvas height; an aspect ratio plus an explicit JS height feeds back into auto width. */
#viewport{width:100%;aspect-ratio:auto}


#message-dialog{width:min(520px,90vw);background:#252525;color:#eee;border:3px solid #777;border-radius:5px;padding:25px;box-shadow:0 15px 70px #0008}#message-dialog::backdrop{background:#0008}#message-title{margin-top:0;font-size:22px}#message-copy{line-height:1.6}#message-actions{display:flex;justify-content:flex-end;gap:12px}

#message-copy{white-space:pre-line}
/* The authoritative Page.xaml uses a continuous thin frame. */
#header{height:62px;border-width:2px 2px 0;border-radius:0;margin:0}
#viewport{border-width:1px 2px 2px;border-radius:0}
#toolbar{border-width:0 2px 2px;border-radius:0;margin:0;min-height:30px;flex-wrap:wrap}
.credit{font-size:12px}
#message-dialog{max-height:90dvh;overflow:auto}