:root{font-family:Arial,Helvetica,sans-serif;color:#34473b;background:#f6f3e9}*{box-sizing:border-box}body{margin:0}header{height:86px;max-width:1480px;margin:auto;padding:0 5%;display:flex;align-items:center;gap:30px;border-bottom:1px solid #dedfd2}.brand{color:#34473b;text-decoration:none;font-family:Georgia,serif;font-size:27px;white-space:nowrap}.mark{font:36px Georgia;color:#8b9c60;margin-right:8px}.tag,.eyebrow{font-size:10px;letter-spacing:2px;color:#7c886e;font-weight:700}.tools{margin-left:auto;display:flex;gap:8px}button{border:1px solid #d4dacb;background:#fbfaf5;color:#405444;border-radius:24px;padding:11px 18px;font:600 12px Arial;cursor:pointer}button:hover{background:#e7eddf}button:focus-visible,canvas:focus-visible{outline:3px solid #68855b;outline-offset:3px}main{max-width:1360px;margin:auto;padding:30px 5% 18px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}h1{font:40px Georgia;margin:9px 0;color:#304936}.intro p:not(.eyebrow){font-size:14px;color:#7a826f}.join{display:flex;align-items:center;gap:12px;background:#e9edde;border-radius:16px;padding:15px 20px}.join strong{display:block;font-size:13px}.join small{display:block;font-size:11px;color:#79836d;margin-top:6px}.a{background:#69865c!important;color:white!important;border-radius:50%;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-size:13px}.playfield{position:relative;border-radius:24px;overflow:hidden;background:#e8ebcf;box-shadow:0 9px 35px #5e734b14;border:1px solid #dce1c9}canvas{width:100%;height:auto;display:block;touch-action:none}.scene-label{position:absolute;left:24px;top:22px;font-size:10px;letter-spacing:1.6px;font-weight:700;color:#5d7749;pointer-events:none}.scene-label span{margin-left:16px;font-size:11px;letter-spacing:0;font-weight:400;color:#7b8d62}#welcome{position:absolute;top:37%;left:50%;transform:translate(-50%,-50%);text-align:center;width:90%;pointer-events:none}#welcome>span{font-size:52px;color:#fffdf5}h2{font:27px Georgia;margin:8px}#welcome p{font-size:13px;color:#61754f}#welcome button{pointer-events:auto;background:#fffdf5;margin-top:7px}#players{position:absolute;bottom:17px;left:22px;display:flex;gap:8px;flex-wrap:wrap}.chip{background:#fffdf0e8;border-radius:20px;padding:8px 12px;font-size:11px;box-shadow:0 2px 5px #3e573218}.chip i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}#toast{position:absolute;top:55px;right:24px;font-size:12px;background:#fffdf1d9;border-radius:12px;padding:0}.bottom{display:flex;justify-content:space-between;align-items:center;margin:20px 0}.controls{display:flex;gap:24px;align-items:center;font-size:12px}.controls span{display:flex;align-items:center;gap:7px}.controls em{font-style:normal;color:#77806b}.controls b{font-size:12px}.x{color:#4f80b4}.y{color:#a78639}.touch{display:none;gap:8px;justify-content:center;margin:15px 0}.arrows{display:flex;gap:4px}.touch button{touch-action:none;user-select:none}details{font-size:12px;color:#78816e;line-height:1.7;background:#eeeee3;border-radius:15px;padding:14px 18px}summary{cursor:pointer;font-weight:600}pre{white-space:pre-wrap;background:#e4e7d8;padding:12px;border-radius:10px;font-size:11px;color:#456044}footer{display:flex;justify-content:space-between;font-size:10px;color:#939a86;margin-top:25px}@media(pointer:coarse){.touch{display:flex}}@media(max-width:700px){header{height:70px;padding:0 5%;gap:8px}.brand{font-size:21px}.tag{display:none}.tools button{padding:9px 10px;font-size:10px}main{padding-top:19px}.intro{align-items:flex-start;gap:10px}h1{font-size:28px}.eyebrow{font-size:8px}.intro p:not(.eyebrow){font-size:12px}.join{padding:10px;gap:8px}.join small{max-width:95px;font-size:9px}.join strong{font-size:11px}.scene-label{left:14px;top:12px;font-size:8px}.scene-label span{display:none}#welcome h2{font-size:20px}#welcome p{font-size:10px}#welcome>span{display:none}#welcome button{font-size:10px;padding:8px 12px}#players{left:10px;bottom:10px;gap:4px}.chip{font-size:9px;padding:5px 7px}.controls{gap:10px;flex-wrap:wrap;font-size:10px}.controls em{display:none}.bottom button{font-size:10px;padding:9px}footer span{display:none}.touch{flex-wrap:wrap}}
/* v2: keep the game inside the TV/browser viewport; help scrolls independently. */
html,body{width:100%;height:100%;overflow:hidden}body{height:100vh;height:100dvh;display:flex;flex-direction:column}header{height:62px;min-height:62px;width:100%;padding:0 3%}main{width:100%;max-width:1500px;flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 3% 8px}.intro{flex:none;margin-bottom:10px}h1{font-size:28px;margin:3px 0}.eyebrow{margin:0}.intro p:not(.eyebrow){margin:5px 0;font-size:12px}.join{padding:9px 14px}.playfield{flex:1;min-height:0;border-radius:18px}canvas{width:100%;height:100%;object-fit:contain}.bottom{flex:none;margin:8px 0;gap:10px}.extra{display:flex;gap:7px}.controls{gap:16px}#inputHud{flex:none;font-size:11px;line-height:1.4;background:#e6ebdb;color:#39533d;padding:7px 12px;border-radius:8px;margin-top:8px;min-height:29px}footer{display:none}#diagnostics{position:fixed;z-index:10;left:5%;right:5%;bottom:15px;max-height:75vh;overflow:auto;box-shadow:0 8px 80px #263c3566;background:#f8f7eb;border:1px solid #bdcaaa}#diagnostics:not([open]){display:none}#diagnostics summary{position:sticky;top:-14px;background:#f8f7eb;padding:10px 0;color:#354f39}.touch{flex:none;margin:3px 0}.scene-label{top:15px;left:18px}#welcome{top:42%}#welcome>span{display:none}#welcome p{max-width:450px;margin:10px auto;line-height:1.5}#toast:not(:empty){padding:7px 12px;max-width:70%}#players{bottom:10px}.touch button{padding:8px 15px}@media(max-height:650px){header{height:48px;min-height:48px}.intro{display:none}main{padding-top:8px}.bottom{margin:5px 0}#welcome h2{font-size:22px}#welcome p{font-size:11px}#inputHud{font-size:10px;padding:5px 9px}.scene-label{top:10px}}@media(max-width:700px){header{padding:0 3%;height:52px;min-height:52px}.intro{display:none}.controls{gap:8px}.extra button{font-size:9px;padding:8px}.brand{font-size:18px}.tools button{font-size:9px;padding:8px}#inputHud{font-size:10px}.scene-label{font-size:8px}#welcome h2{font-size:19px}.touch button{padding:7px 11px}}
/* v3: a warm, tactile 3D diorama with a quiet surrounding UI. */
:root{background:#f3efe5;color:#44503c}.playfield{background:#eee8da;border-color:#e6dece;box-shadow:0 10px 32px #6e65500e}canvas{object-fit:fill}.scene-label{color:#8a8c70}.scene-label span{color:#a09e88}#welcome{background:#f7f3e9e8;backdrop-filter:blur(8px);border:1px solid #e8e0d0;border-radius:22px;max-width:440px;padding:20px 24px;top:40%;box-shadow:0 8px 32px #76694b10}#welcome[hidden]{display:none}#welcome h2{font-size:25px}#inputHud{background:#e9e9db;color:#727b60}.chip{background:#fffaf0dc}.intro h1{color:#4c5741}.join{background:#e8eadc}header{border-color:#e3dfd3}@media(min-aspect-ratio:16/10){.intro{display:none}}@media(max-width:700px){#welcome{max-width:330px;padding:14px}#welcome h2{font-size:21px}}
.tools{gap:6px}.tools button{padding:9px 12px}.tools button[aria-pressed="false"]{background:#e7e5dc;color:#888c7c}.tools #audioStart{background:#69865c;color:#fff}.tools button[hidden]{display:none}#audioStatus{font-weight:600;color:#526b43}#diagnostics a{color:#4e7448}@media(max-width:800px){header .tag{display:none}.tools button{padding:8px;font-size:10px}.brand{font-size:19px}.brand .mark{font-size:25px;margin-right:3px}}@media(max-width:520px){header{height:78px;min-height:78px;flex-wrap:wrap;justify-content:center;padding:5px}.brand{font-size:18px}.tools{margin:0;gap:4px}.tools button{padding:7px;font-size:9px}}
#hatNotice{position:absolute;bottom:48px;right:20px;background:#fffbecf2;color:#627a48;border:1px solid #d7dfc2;border-radius:12px;padding:10px 16px;font-size:14px;font-weight:600}#hatNotice[hidden]{display:none}.creditsLink{font-size:11px;color:#6c7c5d;align-self:center;text-decoration:underline;white-space:nowrap}@media(max-width:650px){.creditsLink{font-size:9px}.extra{gap:5px}}
@media(max-aspect-ratio:3/4){.playfield{flex:0 0 auto;height:min(54vh,78vw);min-height:220px}#welcome h2{font-size:19px}#welcome p{font-size:10px;line-height:1.4}}

/* v8: let the meadow use the screen instead of a centered narrow card. */
header{max-width:none;padding-left:18px;padding-right:18px}main{max-width:none;padding-left:10px;padding-right:10px}.playfield{border-radius:12px}
@media(min-width:900px){main{padding-top:6px;padding-bottom:5px}.bottom{margin:5px 0}#inputHud{margin-top:5px}}
@media(display-mode:fullscreen){header{height:48px;min-height:48px}.intro{display:none}main{padding:4px}.playfield{border-radius:6px}}

.chip button{font-size:10px;padding:4px 8px;margin-left:4px;background:#fffaf0}.chip:focus-within{outline:2px solid #69865c}

/* Immersive play uses the full display; controls float above it instead of shrinking it. */
body.immersive main{padding:0;position:fixed;inset:0;max-width:none}body.immersive .playfield{position:absolute;inset:0;border:0;border-radius:0;min-height:0;height:100%;width:100%}body.immersive header{position:fixed;top:0;left:0;right:0;z-index:4;height:48px;min-height:48px;border:0;background:linear-gradient(#f3efe5e8,#f3efe500);pointer-events:none}body.immersive header button,body.immersive header a{pointer-events:auto}body.immersive .intro,body.immersive #inputHud{display:none}body.immersive .bottom{position:absolute;bottom:0;left:0;right:0;padding:8px 12px;margin:0;z-index:4;background:#f3efe5db}body.immersive #players{bottom:57px}body.immersive .scene-label{top:56px}body.immersive .touch{position:absolute;bottom:49px;left:50%;transform:translateX(-50%);z-index:5;width:max-content;max-width:100%}body.immersive #hatNotice{bottom:95px}@media(max-width:700px){body.immersive header{height:78px;min-height:78px}body.immersive .scene-label{top:85px}body.immersive .bottom{flex-wrap:wrap;padding:5px}body.immersive #players{bottom:115px}body.immersive .touch{bottom:75px}body.immersive #hatNotice{bottom:150px}}

body.immersive #toast{top:88px;right:16px;max-width:calc(100% - 32px)}@media(min-width:701px){body.immersive .bottom{left:auto;right:10px;bottom:8px;width:auto;border-radius:15px;padding:4px 6px;background:#f3efe5c9}body.immersive .bottom .controls{display:none}body.immersive .bottom button{padding:7px 10px}body.immersive #players{bottom:12px;max-width:65%}}@media(max-width:700px){body.immersive #toast{top:112px;left:14px;right:14px;max-width:none;font-size:10px}}

#eventHud{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:#fff9e4d9;border-radius:16px;padding:7px 13px;font-size:12px;color:#52623c;pointer-events:none;white-space:nowrap}body.immersive #eventHud{top:56px}body{transition:background-color .6s}body.dragon-mode{background:#201d2b}body.dragon-mode header{background:#292334da;border-color:#494050}body.dragon-mode .brand,body.dragon-mode .tag{color:#f6d4a1}body.dragon-mode #eventHud{background:#542d34e8;color:#ffe1a5}body.dragon-mode #inputHud{background:#3a3045;color:#ebd7bd}@media(max-width:700px){#eventHud{top:34px;font-size:10px;max-width:96%;white-space:normal;text-align:center}body.immersive #eventHud{top:96px}}@media(prefers-reduced-motion:reduce){body{transition:none}}
@media(max-width:700px){body.immersive #toast{top:140px}}
body.dragon-mode:not(.immersive) .bottom,body.dragon-mode:not(.immersive) .controls,body.dragon-mode:not(.immersive) .controls em{color:#f5dfbd}body.dragon-mode:not(.immersive) .creditsLink{color:#f5dfbd}