:root { --ink:#f2f5df; --muted:#b9c6a1; --paper:#152114; --edge:#304128; --lime:#c7f85a; --orange:#ffb950; --night:#081007; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 15% 0%, #263e19, #0a1008 42rem); font:15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.masthead, main, footer { width:min(1380px, calc(100% - 40px)); margin-inline:auto; }
.masthead { display:flex; justify-content:space-between; align-items:start; gap:24px; padding:48px 0 26px; }
.eyebrow { margin:0 0 8px; color:#c3e990; font-size:11px; font-weight:800; letter-spacing:.14em; }.eyebrow span { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 14px var(--lime); }
h1,h2,p { margin-top:0; } h1 { margin-bottom:8px; font-size:clamp(30px, 5vw, 54px); letter-spacing:-.06em; line-height:1; } h1 span { color:var(--lime); }.lede { max-width:620px; color:var(--muted); font-size:16px; }.source-link { color:var(--ink); border:1px solid var(--edge); border-radius:999px; padding:9px 13px; text-decoration:none; white-space:nowrap; }
.control-panel { display:grid; gap:16px; padding:18px; border:1px solid var(--edge); border-radius:18px; background:rgb(20 32 16 / .82); box-shadow:0 18px 50px rgb(0 0 0 / .22); }.control-group { display:grid; grid-template-columns:68px 1fr; gap:14px; align-items:center; }.control-label { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }.segmented { display:flex; flex-wrap:wrap; gap:7px; }.segmented button { border:1px solid #405434; border-radius:9px; padding:8px 10px; color:#dce9c9; background:#1d2c18; font:inherit; font-size:13px; cursor:pointer; }.segmented button[aria-pressed="true"] { color:#132207; border-color:var(--lime); background:var(--lime); font-weight:800; }.guide-toggle { color:var(--muted); font-size:13px; cursor:pointer; }.guide-toggle input { accent-color:var(--lime); }
.bench { margin:28px 0; padding:20px; overflow:hidden; border:1px solid var(--edge); border-radius:22px; background:#111b0d; }.device-caption { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:0 auto 12px; width:min(100%, 1000px); color:var(--muted); font-size:12px; }.device-caption b { color:var(--ink); font-size:14px; }.device-frame { position:relative; width:min(100%, 1000px); height:min(62vw, 600px); min-height:330px; margin:auto; overflow:hidden; border:10px solid #26331e; border-radius:25px; background:#0a1308; box-shadow:0 24px 50px rgb(0 0 0 / .45); }.preview { width:100%; height:100%; }.safe-area { position:absolute; z-index:20; pointer-events:none; background:rgb(255 185 80 / .17); }.safe-top,.safe-bottom { left:0; right:0; height:0; }.safe-top{top:0}.safe-bottom{bottom:0}.device-frame[data-guides="on"] .safe-area { height:0; }.device-frame[data-device="phone"] .safe-top,.device-frame[data-device="duo-closed"] .safe-top { height:20px; }.device-frame[data-device="phone"] .safe-bottom,.device-frame[data-device="duo-closed"] .safe-bottom { height:18px; }.device-frame[data-device="phone-landscape"] .safe-top,.device-frame[data-device="duo-open"] .safe-top { height:11px; }
.safari-rail { display:none; position:absolute; z-index:31; top:0; right:0; bottom:0; width:58px; padding:11px 7px 9px; color:#e9f1dc; background:linear-gradient(90deg,#182118e8,#10180ff8); border-left:1px solid #a6c77655; flex-direction:column; align-items:center; gap:9px; font-size:10px; box-shadow:-5px 0 12px #07100555; }.safari-rail::before { content:"SAFARI"; margin-top:2px; color:#aebe9d; font-size:7px; font-weight:800; letter-spacing:.12em; writing-mode:vertical-rl; transform:rotate(180deg); }.safari-rail .camera { position:absolute; top:10px; right:10px; width:14px; height:14px; border-radius:50%; background:#020402; box-shadow:0 0 0 2px #38432f; }.safari-rail .rail-time { margin-top:18px; font-size:8px; }.safari-rail .rail-icon { display:grid; place-items:center; width:27px; height:27px; border:1px solid #d5e6bd55; border-radius:50%; font-size:15px; }.safari-rail .rail-more { margin-top:auto; color:#b9d285; letter-spacing:1px; }.device-frame[data-device="duo-closed"] .preview,.device-frame[data-device="duo-open"] .preview { width:calc(100% - 58px); }.device-frame[data-device="duo-closed"] .safari-rail,.device-frame[data-device="duo-open"] .safari-rail { display:flex; }.device-frame[data-device="duo-closed"] .safe-top { right:58px; height:17px; }.device-frame[data-device="duo-closed"] .safe-bottom { right:58px; height:14px; }.device-frame[data-guides="on"][data-device="duo-closed"] .safari-rail::after,.device-frame[data-guides="on"][data-device="duo-open"] .safari-rail::after { content:"SYSTEM + SAFARI\A SIDE BUFFER"; position:absolute; right:63px; bottom:10px; width:92px; padding:4px; color:#263814; background:#effad6ca; border-radius:4px; font-size:8px; font-weight:900; line-height:1.2; white-space:pre; text-align:center; }.device-frame[data-guides="on"][data-device="duo-closed"] .preview::after,.device-frame[data-guides="on"][data-device="duo-open"] .preview::after { content:"WEB CONTENT"; position:absolute; z-index:25; top:6px; right:64px; padding:3px 5px; border-radius:4px; color:#22370d; background:#effad6bb; font-size:8px; font-weight:900; letter-spacing:.08em; }
.bench-note { max-width:1000px; margin:13px auto 0; color:var(--muted); font-size:12px; }.principles { display:grid; grid-template-columns:.8fr 1.2fr; gap:28px; margin:45px 0; padding:28px 0; border-block:1px solid var(--edge); }.principles h2 { margin:0; font-size:clamp(24px,3vw,38px); letter-spacing:-.05em; line-height:1.05; }.principles ol { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:0; padding-left:20px; color:var(--muted); }.principles b { color:var(--ink); } footer { padding:0 0 30px; color:#879777; font-size:12px; } footer a{ color:#cde99e; }
.pvz { --panel:rgb(10 26 12 / .82); position:relative; display:grid; height:100%; overflow:hidden; background:linear-gradient(145deg,#91ccef 0 38%,#b5d977 38% 100%); }.pvz::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 10% 14%, rgb(255 255 255 /.55), transparent 20%), linear-gradient(90deg, rgb(0 0 0 /.18), transparent 30%, rgb(0 0 0 /.15)); }.appbar { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; color:#edf8d7; background:linear-gradient(#10200fdd,#10200f77); font-size:12px; }.brand{font-weight:900;letter-spacing:.08em}.app-actions{display:flex;gap:8px;align-items:center}.app-actions span{padding:5px 8px;border:1px solid #ffffff44;border-radius:7px}.menu-view { position:relative; z-index:1; display:grid; align-content:center; padding:clamp(24px,5vw,75px); background:linear-gradient(90deg,#10210fd9 0 38%,transparent 70%); }.menu-view .kicker{color:#d7fa83;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:11px}.menu-view h2{max-width:500px;margin:6px 0 9px;font-size:clamp(35px,6vw,72px);line-height:.9;letter-spacing:-.07em;text-shadow:0 4px 18px #10210f}.menu-view .copy{max-width:420px;color:#e4efd4}.primary{display:inline-flex;width:max-content;margin-top:14px;padding:12px 17px;border:0;border-radius:10px;background:var(--lime);color:#142408;font-weight:900;box-shadow:0 8px 18px #080f06aa}.destination-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.destination{padding:9px 11px;border:1px solid #d5f5a044;border-radius:9px;background:#11230ab5;color:#f1f8df;font-size:13px}.destination i{font-style:normal;color:var(--lime);margin-right:5px}
.game-view { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,4fr) minmax(180px,1.35fr); gap:16px; align-items:center; padding:16px; }.stage { position:relative; width:100%; max-height:calc(100% - 20px); aspect-ratio:4/3; overflow:hidden; border:3px solid #d6e9b7; border-radius:12px; background:linear-gradient(90deg,#6bac51 0 9%,transparent 9%), repeating-linear-gradient(0deg,transparent 0 19%,#b7d776aa 19.5% 20%),repeating-linear-gradient(90deg,#5c9a48 0 11%,#9dca63 11.5% 22%); box-shadow:0 14px 32px #14210988; }.stage::before{content:"PROTECTED 800 × 600 STAGE";position:absolute;left:10px;bottom:9px;padding:4px 6px;border-radius:5px;color:#eeffd4;background:#11200a99;font-size:10px;font-weight:800;letter-spacing:.08em}.zombie,.plant{position:absolute;display:grid;place-items:center;width:15%;aspect-ratio:1;border-radius:42% 47% 40% 44%;font-size:clamp(23px,4vw,50px);filter:drop-shadow(1px 5px 2px #223b1a77)}.plant{background:#65a936;left:33%;bottom:28%}.zombie{background:#859785;right:12%;bottom:19%}.sun{position:absolute;left:61%;top:25%;font-size:clamp(24px,4vw,46px)}.hud-rail{display:grid;align-content:center;gap:9px;padding:12px;border:1px solid #d2eba455;border-radius:13px;background:var(--panel);box-shadow:0 10px 25px #12210b77}.sun-count{display:flex;justify-content:space-between;align-items:center;padding:8px 9px;border-radius:8px;background:#2d4a1d;color:#fff5af;font-size:14px;font-weight:900}.seed-deck{display:grid;gap:7px}.seed{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:7px;min-height:46px;padding:6px;border:1px solid #badb87;border-radius:8px;background:#eff5cf;color:#1a3010;font-size:11px;font-weight:800}.seed.selected{outline:3px solid var(--orange);background:#fff7c8}.seed.cooling{opacity:.52}.seed-icon{display:grid;place-items:center;height:30px;border-radius:6px;background:#78b644;font-size:18px}.tool-row{display:flex;gap:7px}.tool{flex:1;padding:8px;border:1px solid #8eae6e;border-radius:7px;background:#253e17;color:#ebf8d4;font-size:11px;text-align:center}.guide-label{display:none;position:absolute;z-index:8;top:9px;left:10px;padding:3px 5px;color:#21350c;background:#effad6bb;border-radius:4px;font-size:9px;font-weight:900}.device-frame[data-guides="on"] .guide-label{display:block}.pause-sheet,.results-sheet{position:absolute;z-index:10;inset:0;display:grid;place-items:center;background:#07110499}.sheet{width:min(380px,88%);padding:23px;border:1px solid #d9f59a77;border-radius:16px;background:#142511;color:#f1fbdc;box-shadow:0 20px 45px #0009;text-align:center}.sheet h2{margin-bottom:7px;font-size:29px;letter-spacing:-.05em}.sheet p{color:#c3d7ad}.sheet .buttons{display:flex;justify-content:center;gap:8px}.small-button{padding:9px 11px;border:1px solid #8aa968;border-radius:8px;background:#243f16;color:#eff8db;font-weight:800}.small-button.primary{margin:0;background:var(--lime);color:#142408}.select-view{position:relative;z-index:1;display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:18px;background:linear-gradient(120deg,#1a3111d9,#45642b80)}.select-view h2{margin:0;font-size:clamp(24px,4vw,42px);letter-spacing:-.06em}.plant-library{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-content:center}.plant-card{min-height:80px;padding:10px;border:1px solid #def3ad77;border-radius:10px;background:#edf6d5;color:#1e3514;font-size:11px;font-weight:800}.plant-card strong{display:block;font-size:24px}.plant-card.chosen{outline:3px solid var(--orange);background:#fff5bd}.chosen-deck{display:flex;align-items:center;gap:7px;padding:10px;border-radius:10px;background:#12230ec7;color:#eaf6d7;font-size:12px}.deck-slots{display:flex;gap:5px}.deck-slot{display:grid;place-items:center;width:27px;height:27px;border-radius:5px;background:#78ad4c}.deck-slot.empty{background:#314425}
@media (max-width:700px){.masthead{padding-top:30px;flex-direction:column}.source-link{align-self:flex-start}.control-group{grid-template-columns:1fr}.bench{padding:10px}.device-frame{border-width:7px;border-radius:20px}.principles{grid-template-columns:1fr}.principles ol{grid-template-columns:1fr;gap:10px}.game-view{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;padding:10px;gap:7px}.hud-rail{grid-template-columns:1fr auto;align-items:center;padding:8px}.seed-deck{grid-template-columns:repeat(4,1fr)}.seed{grid-template-columns:1fr;min-height:39px;padding:4px;text-align:center}.seed span:not(.seed-icon){display:none}.seed-icon{height:28px}.sun-count{grid-row:1/3}.tool-row{grid-column:2}.select-view{padding:12px}.plant-library{grid-template-columns:repeat(3,1fr);gap:6px}.plant-card{min-height:65px;padding:7px}.plant-card strong{font-size:19px}}
.device-frame { height:auto; min-height:0; aspect-ratio:var(--viewport-ratio, 4 / 3); }.safari-rail { display:none !important; }.device-frame[data-device="duo-closed"] .preview,.device-frame[data-device="duo-open"] .preview { width:100%; }.device-frame[data-device="duo-closed"] .safe-top,.device-frame[data-device="duo-closed"] .safe-bottom,.device-frame[data-device="duo-open"] .safe-top { right:0; height:0; }.device-caption { flex-wrap:wrap; }.device-caption #device-reference { width:100%; color:#91a67c; }
.duo-closed-browser,.duo-system-rail,.duo-open-browser,.duo-home { display:none; }
.device-frame[data-device="duo-closed"],.device-frame[data-device="duo-open"] { overflow:hidden; padding:9px; border:2px solid #080b09; background:linear-gradient(115deg,#a0a69f,#282e2d 13%,#69726a 48%,#1b201e 84%,#a0a49b); box-shadow:0 0 0 1px #5f675e,0 2px 0 2px #080b09,5px 16px 25px #0008,inset 0 0 0 2px #9ca49755; }
.device-frame[data-device="duo-closed"] { border-radius:20px 72px 72px 20px; }.device-frame[data-device="duo-open"] { border-radius:70px; }
.device-frame[data-device="duo-closed"] .preview { position:absolute; left:9px; top:9px; width:382px; height:580px; }.device-frame[data-device="duo-closed"] .safe-area { display:none; }.device-frame[data-device="duo-closed"] .preview::after { right:6px; top:6px; }
.device-frame[data-device="duo-open"] .preview { position:absolute; left:9px; top:9px; width:867px; height:669px; }.device-frame[data-device="duo-open"] .safe-area { display:none; }.device-frame[data-device="duo-open"] .preview::after { right:6px; top:6px; }
.duo-closed-browser { position:absolute; left:9px; top:589px; width:382px; height:98px; padding:15px 14px 35px; align-items:center; gap:13px; background:linear-gradient(#241e16,#1d1812); color:#eee9dc; font-size:30px; }.device-frame[data-device="duo-closed"] .duo-closed-browser { display:flex; }.duo-address { display:flex; align-items:center; justify-content:space-between; flex:1; min-width:0; height:44px; padding:0 13px; border:1px solid #b0b8ae30; border-radius:25px; background:#d4d6ce22; font-size:11px; color:#e5e9df; white-space:nowrap; }.duo-address b { font-size:18px; }
.duo-system-rail { position:absolute; left:391px; top:9px; display:none; width:84px; height:678px; padding-top:91px; background:radial-gradient(ellipse at top,#333b38,#1d2420 65%,#141a16); border-left:1px solid #ffffff13; color:#dce4d6; text-align:center; }.device-frame[data-device="duo-closed"] .duo-system-rail { display:block; }.duo-system-rail strong { display:block; font-size:16px; font-weight:550; }.duo-system-rail small { display:block; margin-top:8px; color:#c4cbbf; font-size:9px; line-height:1.4; }.duo-system-rail div { margin:20px auto 0; font-size:21px; line-height:2.1; }.duo-system-rail i { position:absolute; bottom:62px; left:32px; width:20px; height:90px; border:1px solid #ffffff12; border-radius:20px; background:#050806; }.duo-camera { position:absolute; top:29px; left:18px; width:37px; height:37px; border-radius:50%; background:radial-gradient(circle,#0f192b 0 14%,#030609 17% 34%,#101717 38% 48%,#010201 52%); box-shadow:0 0 0 3px #070b08,0 0 0 4px #60685d50; }
.duo-webapp-rail { display:none; position:absolute; top:9px; left:876px; width:84px; height:669px; padding-top:21px; background:#110d08; color:#f4f4ee; text-align:center; border-left:1px solid #29241b; }
.device-frame[data-device="duo-open"] .duo-webapp-rail { display:block; }
.device-frame[data-device="duo-open"] .preview::after { display:none; }
.device-frame[data-device="duo-open"][data-guides="on"] .duo-webapp-rail::after { content:"SYSTEM\A STRIP"; position:absolute; bottom:18px; left:8px; right:8px; padding:5px 2px; color:#dce5cd; background:#ffffff12; font:800 8px/1.4 system-ui,sans-serif; letter-spacing:.08em; white-space:pre; }
.duo-app-pill { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:43px; height:72px; margin:0 auto 20px; border:2px solid #423d34; border-radius:24px; background:#030303; }
.duo-app-pill img { width:28px; height:28px; object-fit:contain; }
.duo-app-pill span { color:#aaa3e0; font-size:18px; line-height:1; }
.duo-webapp-rail>strong { font:700 17px/1 system-ui,sans-serif; }
.duo-status-ring { display:grid; place-items:center; position:relative; width:40px; height:40px; margin:10px auto 0; border:4px solid #66615a; border-left-color:#ed4357; border-bottom-color:transparent; border-radius:50%; }
.duo-status-ring b { position:absolute; top:-10px; padding-inline:3px; background:#110d08; font-size:10px; }
.duo-status-ring span { font-size:22px; line-height:1; }
.duo-home { position:absolute; z-index:5; width:120px; height:5px; bottom:8px; left:50%; border-radius:4px; background:#e3e5deaa; transform:translateX(-50%); }.device-frame[data-device="duo-closed"] .duo-home { display:block; }.device-frame[data-device="duo-closed"] .duo-home { left:191px; width:112px; }
.phone-browser{display:none}.device-frame[data-device="phone"],.device-frame[data-device="phone-landscape"]{padding:0!important;border:2px solid #0c110d!important;background:#151c16!important;box-shadow:0 0 0 1px #788076,0 8px 22px #000a!important}.device-frame[data-device="phone"]{border-radius:38px!important}.device-frame[data-device="phone-landscape"]{border-radius:28px!important}.device-frame[data-device="phone"]::before,.device-frame[data-device="phone-landscape"]::before{content:"9:41                  ◒  ▰  100%";position:absolute;z-index:33;top:0;left:0;width:100%;height:24px;padding:5px 19px;color:#eef0e8;background:#172019;font:600 9px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.02em}.device-frame[data-device="phone"] .preview{position:absolute;top:24px;left:0;width:100%;height:calc(100% - 110px)!important}.device-frame[data-device="phone-landscape"] .preview{position:absolute;top:24px;left:0;width:100%;height:calc(100% - 66px)!important}.phone-browser{position:absolute;z-index:32;bottom:0;left:0;width:100%;align-items:center;gap:10px;padding:10px 12px 27px;color:#f0eee7;background:linear-gradient(#29241e,#1d1915);font-size:25px}.device-frame[data-device="phone"] .phone-browser{display:flex;height:86px}.device-frame[data-device="phone-landscape"] .phone-browser{display:flex;height:42px;padding:5px 11px;font-size:18px}.phone-address{display:flex;align-items:center;justify-content:space-between;flex:1;min-width:0;height:34px;padding:0 10px;border:1px solid #c3c7bd2b;border-radius:18px;background:#d4d6ce1c;color:#e7e9df;font:10px/1 ui-sans-serif,system-ui,sans-serif;white-space:nowrap}.phone-address b{font-size:14px}.device-frame[data-device="phone-landscape"] .phone-address{height:27px;font-size:9px}.device-frame[data-device="phone"] .phone-browser::after{content:"";position:absolute;bottom:8px;left:50%;width:112px;height:4px;border-radius:4px;background:#e3e5deaa;transform:translateX(-50%)}

/* Menu composition. All menu geometry lives here; no per-iteration overrides. */
.preview { container-type:size; }
.menu-screen { isolation:isolate; grid-template-rows:92px minmax(0,1fr); color:#f5f0d5; background:#335b25; }
.menu-lawn { position:absolute; z-index:-2; inset:0; overflow:hidden; background:linear-gradient(90deg,#07180db8,#0e301080 42%,#10280c55),url("assets/images/background1.jpg") center 45%/cover no-repeat; }
.menu-lawn::after { content:""; position:absolute; inset:0; background:linear-gradient(#07130655,transparent 35%,#06140644); }
.cloud-one { display:none; }
.cloud-two { position:absolute; top:43%; left:18%; width:180px; height:38px; border-radius:50%; background:#efffd4; opacity:.1; filter:blur(16px); animation:menu-mist 22s ease-in-out infinite alternate; }
.lawn-glow { position:absolute; right:8%; bottom:-18%; width:45%; aspect-ratio:1; border-radius:50%; background:#d9ff9f1c; filter:blur(40px); }
.menu-bar { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:10px 24px; background:linear-gradient(#06120488,transparent); }
.menu-brand { display:block; width:152px; height:72px; object-fit:contain; filter:drop-shadow(0 3px 2px #102006) drop-shadow(0 5px 9px #071006); }
.menu-back { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:max-content; min-width:44px; height:40px; padding:0 10px; border:1px solid #b6a47b99; border-radius:2px; color:#f5f0d5; background:#261f18d9; box-shadow:inset 0 1px #ffffff22,0 3px 0 #0c0906; font:800 11px/1 ui-sans-serif,system-ui,sans-serif; text-decoration:none; cursor:pointer; }
.menu-back svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:square; stroke-linejoin:miter; }
.sound-tile svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.menu-stage { width:100%; margin:0; display:grid; grid-template-columns:330px max-content; grid-template-rows:1fr; justify-content:center; align-items:center; gap:38px; min-height:0; padding:12px 24px 30px; }
.mode-tombstone { position:relative; display:grid; place-items:center; width:330px; height:330px; filter:drop-shadow(0 12px 10px #041307a8); }
.tombstone-silhouette { position:absolute; inset:0; width:100%; height:100%; fill:#a4a69c; stroke:#3b403a; stroke-width:8; filter:drop-shadow(0 4px 0 #c2c4b9) drop-shadow(0 8px 0 #343832); }
.tombstone-silhouette path:nth-child(2) { stroke:#797e73; stroke-width:8; }
.mode-tombstone::after { content:""; position:absolute; inset:11% 13% 10%; border-radius:42% 42% 2px 2px; background:linear-gradient(115deg,#ffffff16,transparent 31%,#15191318),repeating-linear-gradient(0deg,transparent 0 17px,#ffffff0b 18px 19px); pointer-events:none; }
.tombstone-copy { position:relative; z-index:1; width:80%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:14% 0 11%; text-align:center; }
.tombstone-emblem { display:flex; flex-direction:column; align-items:center; gap:3px; flex:none; }
.tombstone-skull { display:block; width:54px; height:52px; fill:#151813; stroke:#151813; stroke-width:2.2; }
.tombstone-skull circle,.tombstone-skull path:nth-of-type(2) { fill:#a4a69c; stroke:none; }
.tombstone-skull path:last-child { fill:none; stroke:#a4a69c; stroke-width:1.5; }
.tombstone-copy p { margin:0; font:900 12px/1.2 ui-sans-serif,system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase; color:#151813; }
.tombstone-copy .rip { font:700 11px/1 Georgia,serif; letter-spacing:.22em; color:#151813; }
.tombstone-copy h2 { margin:0; color:#151813; font:700 31px/.99 Georgia,"Times New Roman",serif; letter-spacing:-.045em; }
.menu-primary { position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; gap:9px; width:max-content; max-width:100%; min-height:44px; margin-top:4px; padding:10px 13px; border:1px solid #76551b; border-radius:1px; outline:1px dotted #654b22; outline-offset:-5px; background:linear-gradient(130deg,#f5e9a5,#d4ad53 55%,#b4832b); box-shadow:inset 0 0 0 2px #f4db8a,0 3px 0 #604015,0 6px 10px #0b1a0a88; color:#29300f; font:900 11px/1.2 ui-sans-serif,system-ui,sans-serif; letter-spacing:.025em; text-transform:uppercase; white-space:nowrap; cursor:pointer; }
.menu-primary b { font-size:17px; line-height:1; }
.mode-picker { display:grid; grid-template-columns:repeat(2,168px); grid-auto-rows:44px; gap:7px; align-content:center; }
.mode-choice { display:flex; align-items:center; justify-content:flex-start; gap:7px; min-width:0; height:44px; padding:5px 8px; border:1px solid #b6a47b80; border-radius:2px; background:linear-gradient(135deg,#30251de8,#17120ee8); box-shadow:inset 0 1px #d9caa82c,0 3px 0 #0c0906; color:#ebf3dc; font:800 11px/1.15 ui-sans-serif,system-ui,sans-serif; text-align:left; cursor:pointer; }
.mode-choice img { display:block; flex:none; width:24px; height:27px; object-fit:contain; filter:drop-shadow(0 1px #000); }
.mode-choice span { display:block; }
.sound-tile { display:flex; }
.menu-back:hover,.mode-choice:hover { background:#453521ed; border-color:#e7d191; }
.menu-back:focus-visible,.mode-choice:focus-visible,.menu-primary:focus-visible { outline:3px solid #fff3a2; outline-offset:3px; }
.menu-primary:active { transform:translateY(2px); }
.menu-status { position:absolute; bottom:5px; right:14px; max-width:60%; margin:0; color:#f7f1d4; font-size:10px; text-align:right; text-shadow:0 1px 4px #041205; }
@container (max-width:620px) {
  .menu-screen { grid-template-rows:90px minmax(0,1fr); }
  .menu-bar { padding:8px 14px; gap:7px; }
  .menu-brand { width:138px; height:72px; }
  .menu-back { width:42px; min-width:42px; height:40px; padding:0; }
  .menu-back b { display:none; }
  .menu-stage { grid-template-columns:1fr; grid-template-rows:max-content max-content; align-content:space-evenly; justify-items:center; gap:20px; padding:0 14px 18px; }
  .mode-tombstone { width:300px; height:300px; }
  .tombstone-copy { gap:8px; }
  .tombstone-skull { width:46px; height:44px; }
  .tombstone-copy h2 { font-size:29px; }
  .menu-primary { font-size:11px; }
  .mode-picker { grid-template-columns:repeat(2,168px); grid-auto-rows:44px; gap:7px; }
  .menu-status { display:none; }
}
@container (max-width:620px) and (max-height:640px) {
  .menu-screen { grid-template-rows:82px minmax(0,1fr); }
  .menu-brand { width:132px; height:64px; }
  .menu-stage { gap:16px; padding-bottom:16px; }
  .mode-tombstone { width:278px; height:278px; }
  .tombstone-copy { gap:6px; }
  .tombstone-skull { width:40px; height:38px; }
  .tombstone-copy h2 { font-size:27px; }
  .mode-picker { grid-auto-rows:40px; gap:6px; }
  .mode-choice { height:40px; }
}
@container (min-width:621px) and (max-height:490px) {
  .menu-screen { grid-template-rows:72px minmax(0,1fr); }
  .menu-bar { padding-block:5px; }
  .menu-brand { height:62px; width:138px; }
  .menu-stage { grid-template-columns:290px max-content; gap:30px; padding:0 24px 14px; }
  .mode-tombstone { width:290px; height:290px; }
  .tombstone-skull { width:46px; height:44px; }
  .tombstone-copy { gap:6px; }
  .tombstone-copy h2 { font-size:28px; }
}
@container (min-width:621px) and (max-height:380px) {
  .menu-screen { grid-template-rows:64px minmax(0,1fr); }
  .menu-bar { padding:3px 20px; }
  .menu-brand { height:58px; width:126px; }
  .menu-stage { grid-template-columns:240px max-content; gap:30px; padding:0 18px 10px; }
  .mode-tombstone { width:240px; height:250px; }
  .tombstone-copy { gap:5px; padding:12% 0 8%; }
  .tombstone-skull { width:32px; height:31px; }
  .tombstone-copy .rip { font-size:9px; }
  .tombstone-copy p { font-size:10px; }
  .tombstone-copy h2 { font-size:23px; }
  .menu-primary { font-size:10px; min-height:40px; padding:8px 10px; }
  .mode-picker { grid-auto-rows:40px; gap:6px; }
  .mode-choice { height:40px; }
}
@keyframes menu-mist { from { transform:translateX(-20px); } to { transform:translateX(80px); } }
@media(prefers-reduced-motion:reduce) { .cloud-two { animation:none; } }

/* Unsupported phone postures keep state but show no compressed game controls. */
.posture-screen { isolation:isolate; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:24px; background:#213b18; }
.posture-screen::before { display:none; }
.posture-logo { width:190px; height:95px; object-fit:contain; filter:drop-shadow(0 4px 5px #081506); }
.posture-sign { width:100%; max-width:340px; padding:24px 20px; border:2px solid #b7a87a; border-radius:2px; background:linear-gradient(140deg,#3b3025f5,#211b15f5); box-shadow:inset 0 0 0 4px #201a13,0 5px 0 #11190c; color:#f3ebcf; text-align:center; }
.posture-sign svg { display:block; width:96px; height:70px; margin:0 auto 15px; fill:none; stroke:#e0c778; stroke-width:3; stroke-linecap:square; stroke-linejoin:round; }
.posture-sign h2 { margin:0 0 12px; font:700 29px/1.1 Georgia,serif; }
.posture-sign p { margin:0; font-size:15px; line-height:1.5; }
.posture-sign small { display:block; margin-top:17px; color:#bfc7a5; font-size:11px; line-height:1.4; }
/* No artificial corner spotlight on menu, preparation or collections.
   Gameplay's later scene-specific backdrop rule remains authoritative. */
.pvz::before { background:linear-gradient(90deg, rgb(0 0 0 /.18), transparent 30%, rgb(0 0 0 /.15)); }