:root{color-scheme:dark;--ink:#f2ead7;--muted:#b5b7a6;--gold:#e3b767;--edge:#454738;--bg:#171b16}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 10%,#30382b 0,transparent 65%),var(--bg);color:var(--ink);font:16px/1.6 system-ui,sans-serif}main{max-width:1136px;margin:auto;padding:0 32px}header{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--edge)}.brand{font:700 23px/1 Georgia,serif;letter-spacing:3px;color:var(--ink);text-decoration:none}.brand span{font-size:12px;letter-spacing:5px;display:block;margin-top:9px}.eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:700;color:var(--gold)}.intro{padding:38px 0 28px}.intro .eyebrow{margin:0 0 10px}h1{font:400 clamp(29px,4.3vw,49px)/1.13 Georgia,serif;letter-spacing:-1px;margin:0 0 12px}.intro>p:last-child{color:var(--muted);margin:0;font-size:15px}.arcade{border:1px solid #726443;border-radius:12px;overflow:hidden;box-shadow:0 24px 70px #0006;background:#20251d}.toolbar{display:flex;align-items:center;gap:10px;min-height:62px;padding:10px 20px}.live-label{font-size:10px;letter-spacing:2px;color:var(--muted);margin-right:auto}.live-label i{display:inline-block;width:6px;height:6px;background:var(--gold);border-radius:100%;margin-right:8px}.readout{font-size:9px;letter-spacing:1px;color:var(--muted);margin-right:15px}.readout strong{font-variant-numeric:tabular-nums;font-size:22px;letter-spacing:0;color:var(--ink);margin-left:8px}button{font:600 13px system-ui;cursor:pointer;background:#333b2d;color:var(--ink);border:1px solid #687051;border-radius:5px;padding:10px 16px;min-height:44px;touch-action:manipulation}button:hover:not(:disabled){background:#46503b}button:focus-visible,canvas:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}button:disabled{opacity:.45;cursor:default}.stage{aspect-ratio:1024/600;position:relative;background:#292e20;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:manipulation}.overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:linear-gradient(90deg,#10160d70,#10160dd9 25%,#10160dd9 75%,#10160d70);padding:16px}.overlay[hidden]{display:none}.card{text-align:center;max-width:470px}.card img{display:block;width:clamp(170px,28vw,350px);height:auto;margin:-20px auto 8px}.card h2{font:400 clamp(20px,2.7vw,30px)/1.2 Georgia,serif;margin:8px 0}.card p{font-size:14px;color:#d4d4c3;max-width:370px;margin:12px auto 18px;line-height:1.5}.primary{background:var(--gold);color:#272217;border-color:var(--gold);min-width:184px;font-size:15px;padding:13px 25px}.primary:hover:not(:disabled){background:#f3cc87}.card p.micro{font-size:11px;color:var(--muted);margin:12px 0 0}.controls{padding:13px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}.controls p{margin:0;font-size:11px;color:var(--muted)}kbd{border:1px solid var(--edge);border-radius:3px;padding:3px 5px;font:10px system-ui;color:var(--ink)}.divider{padding:0 6px}.action-buttons{display:flex;gap:10px}.action-buttons button{min-width:96px}.action-buttons #jump{background:#e3b767;color:#252316;border-color:#e3b767}.mobile-hint{display:none}.fieldnotes{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding:38px 0;border-bottom:1px solid var(--edge)}.number{color:var(--gold);font:12px Georgia,serif}.fieldnotes h3{font:400 20px Georgia,serif;margin:10px 0}.fieldnotes p{color:var(--muted);font-size:13px;line-height:1.7;margin:0}footer{display:flex;gap:20px;justify-content:space-between;align-items:center;padding:22px 0 30px;color:#969c88;font-size:10px}footer>span:first-child{letter-spacing:2px}footer p{margin:0}.toast{position:absolute;top:15px;left:50%;transform:translateX(-50%);color:var(--gold);font-weight:bold;pointer-events:none}body.embed main{max-width:1100px;padding:0}body.embed header,body.embed .intro,body.embed .fieldnotes,body.embed footer{display:none}body.embed .arcade{border-radius:0}body.embed{background:transparent}@media(max-width:650px){main{padding:0 14px}header{height:76px}header>.eyebrow{font-size:8px;letter-spacing:1px}.brand{font-size:18px}.brand span{font-size:9px}.intro{padding:27px 0 22px}.intro .eyebrow{font-size:8px}.intro>p:last-child{font-size:13px}.toolbar{padding:8px 10px;gap:6px;min-height:56px}.live-label{font-size:8px;letter-spacing:1px}.readout{margin-right:2px;font-size:8px}.readout strong{font-size:18px;margin-left:4px}.toolbar button{padding:8px 10px;font-size:11px}.overlay{padding:8px}.card img{width:165px;margin:0 auto 2px}.card h2{font-size:20px;margin:0}.card p{font-size:11px;max-width:270px;margin:6px auto 9px}.card .primary{font-size:13px;padding:8px 18px;min-height:40px}.card p.micro{display:none}.controls{padding:10px;flex-wrap:wrap}.controls p{font-size:11px;flex:1}.desktop-hint{display:none}.mobile-hint{display:inline}.action-buttons{width:100%}.action-buttons button{width:50%;min-height:48px}.fieldnotes{gap:22px;grid-template-columns:1fr;padding:27px 0}.fieldnotes h3{display:inline;margin-left:8px;font-size:19px}.fieldnotes p{margin-top:7px}footer{flex-wrap:wrap;gap:8px}footer p{width:100%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

[hidden]{display:none!important}
@media(max-width:400px){.card img{width:125px}.card p{font-size:10px;max-width:250px;margin:5px auto 7px}.card .primary{min-height:38px;padding:8px 16px}.live-label{letter-spacing:0}.readout{font-size:7px}.toolbar{gap:4px}.toolbar button{padding:7px 8px}}
/* End-of-run invitation: original artwork, no interruption during play. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.stage.is-over{min-height:570px}.stage.is-over canvas{visibility:hidden}.stage.is-over .overlay{background:radial-gradient(ellipse at 25% 50%,#5d4c2e 0,#24291e 55%,#192017 100%);padding:28px}.promo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:30px;align-items:center;width:min(100%,870px)}.promo-clyde{display:block;width:100%;height:440px;object-fit:contain;filter:drop-shadow(0 16px 20px #0005)}.promo-copy .eyebrow{font-size:8px;letter-spacing:1.4px;margin:0 0 12px}.run-result{font-size:12px;color:var(--muted);margin:0 0 20px}.run-result strong{color:var(--gold)}.promo h2{font:400 clamp(26px,3.1vw,38px)/1.15 Georgia,serif;margin:0 0 18px}.invitation{font-size:14px;line-height:1.6;margin:0 0 16px;color:var(--ink)}.promo address{font-size:12px;line-height:1.6;color:var(--muted);font-style:normal;margin-bottom:24px}.promo-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.visit-link{color:var(--gold);font-size:14px;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center;gap:8px}.promo-actions .primary{min-width:200px}@media(max-width:650px){.stage.is-over{min-height:720px}.stage.is-over .overlay{padding:18px}.promo{grid-template-columns:1fr;gap:6px;text-align:center}.promo-clyde{height:240px;max-width:210px;margin:auto}.promo-copy .eyebrow{font-size:7px;margin-bottom:8px}.run-result{margin-bottom:10px;font-size:11px}.promo h2{font-size:26px;margin-bottom:12px}.invitation{font-size:12px;max-width:285px;margin:0 auto 12px}.promo address{font-size:11px;margin-bottom:10px}.promo-actions{align-items:center;gap:6px}.visit-link{font-size:13px}.promo-actions .primary{min-height:46px}}

/* Authentic Vinland Meads shield, kept at its original aspect ratio. */
.card .shield-logo{display:block;width:110px;height:auto;object-fit:contain;margin:12px auto 16px}
.promo-shield{display:block;width:124px;height:auto;object-fit:contain;margin:0 0 12px}
.stage.is-over{min-height:650px}
@media(max-width:650px){.stage.is-ready{min-height:390px}.stage.is-ready canvas{object-fit:cover}.stage.is-over{min-height:850px}.card .shield-logo{width:104px;margin:10px auto 12px}.promo-shield{width:120px;margin:0 auto 12px}}

/* Keep the opening centered independently of intrinsic image/flex sizing. */
#stage > #overlay{width:100%;max-width:100%;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;left:0;right:0;transform:none}
#statusCard{width:min(100%,470px);max-width:100%;min-width:0;justify-self:center;margin:0 auto;position:relative;left:auto;right:auto;transform:none}
#statusCard > img{max-width:100%;object-fit:contain}
#statusCard > p{max-width:100%}
#promo{max-width:100%;min-width:0;justify-self:center}
#promo > *{min-width:0}
/* Embedded height follows visible content, not a preallocated tall viewport. */
body.embed{width:100%;overflow-x:hidden}
body.embed main{width:100%;max-width:1100px;margin:0 auto;padding:0}
body.embed #arcade{width:100%;box-shadow:none}
body.embed #stage{min-height:0;aspect-ratio:1024/600}
body.embed #stage > canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
body.embed #stage.is-ready,body.embed #stage.is-over{aspect-ratio:auto;min-height:0}
body.embed #stage.is-ready > #overlay:not([hidden]),body.embed #stage.is-over > #overlay:not([hidden]){position:relative;inset:auto;min-height:0;padding:28px 16px}
@media(max-width:650px){body.embed #stage > #overlay:not([hidden]){padding:20px 12px}}

/* Pause overlays the unchanged gameplay canvas; it never sizes the stage. */
body.embed #stage.is-paused{aspect-ratio:1024/600;min-height:0}
body.embed #stage.is-paused > #overlay{position:absolute;inset:0}
/* Width-based compact invitation avoids iframe-height/orientation feedback. */
@media(min-width:651px) and (max-width:950px){
 .stage.is-over{aspect-ratio:auto;min-height:0}
 #stage.is-over > #overlay:not([hidden]){position:relative;inset:auto;padding:16px 20px}
 #promo{grid-template-columns:minmax(120px,.65fr) minmax(0,1.35fr);gap:20px;max-width:740px}
 .promo-clyde{height:260px;max-width:200px;margin:auto}
 .promo-copy .eyebrow{font-size:7px;letter-spacing:1px;margin-bottom:6px}
 .run-result{font-size:11px;margin-bottom:8px}
 .promo h2{font-size:25px;margin-bottom:10px}
 .invitation{font-size:12px;line-height:1.4;margin-bottom:8px}
 .promo-shield{width:64px;margin-bottom:6px}
 .promo address{font-size:10px;line-height:1.4;margin-bottom:8px}
 .promo-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 16px}
 .visit-link{font-size:12px}
 .promo-actions .primary{min-width:140px;min-height:44px;padding:10px 16px;font-size:13px}
 body.embed #stage.is-over > #overlay:not([hidden]){padding:16px 20px}
}

/* A thin wood frame stays inside the existing responsive box. */
#arcade{border:4px solid #715033;border-image:repeating-linear-gradient(2deg,#4a2d1b 0px,#8e653e 2px,#654326 4px,#a87d4b 6px,#51321d 8px) 4;box-sizing:border-box}
#stage.is-ready > #overlay{background:linear-gradient(90deg,#10160d40,#10160dbb 30%,#10160dbb 70%,#10160d40)}
.card p.demo-label{font-size:11px;color:var(--gold);margin:8px auto}
@media(prefers-reduced-motion:reduce){.demo-label{display:none}}

#stage:not(.is-ready) .demo-label{display:none}

/* Full Screen is an explicit user action; its toolbar always retains Exit. */
.toolbar{flex-wrap:wrap}
#fullscreen{margin-left:auto}
.screen-help{padding:8px 14px;font-size:12px;line-height:1.4;background:#20251d;color:var(--ink)}
.screen-help a{color:var(--gold);display:inline-block;padding:8px 0;min-height:36px}
#arcade.is-fullscreen{width:100%;max-width:none;height:100vh;height:100dvh;overflow:auto;border-radius:0;background:#171b16;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#arcade.is-fullscreen .toolbar{position:sticky;top:0;z-index:5;background:#20251d;min-height:58px;padding:6px 10px}
#arcade.is-fullscreen #fullscreen{background:var(--gold);color:#272217;border-color:var(--gold)}
#arcade.is-fullscreen #stage{width:min(100%,calc((100vh - 180px) * 1.7066667));width:min(100%,calc((100dvh - 180px) * 1.7066667));margin:0 auto;min-height:0;aspect-ratio:1024/600}
#arcade.is-fullscreen #stage.is-ready,#arcade.is-fullscreen #stage.is-over{width:100%;aspect-ratio:auto}
#arcade.is-fullscreen #stage.is-ready > #overlay:not([hidden]),#arcade.is-fullscreen #stage.is-over > #overlay:not([hidden]){position:relative;inset:auto}
#arcade.is-fullscreen .controls{position:sticky;bottom:0;z-index:4;background:#20251d;padding:6px 10px}
#arcade.is-fullscreen .controls p{display:none}
#arcade.is-fullscreen .action-buttons{width:100%}
#arcade.is-fullscreen .action-buttons button{width:50%;min-height:44px}
@media(max-width:650px){.toolbar .live-label{flex:1}#fullscreen{font-size:11px;padding:8px;min-height:44px}.toolbar .readout{margin-right:0}}