:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e9f1dc;background:#192d37}*{box-sizing:border-box}html,body,#game{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;cursor:pointer}#game{position:relative;background:linear-gradient(180deg,#253d52 0%,#779a93 54%,#c7b892 100%)}#view,#view canvas,.skyline,.vignette{position:absolute;inset:0;width:100%;height:100%}#view canvas{display:block;touch-action:none}.skyline{background:radial-gradient(circle at 77% 20%,#e4d1a07a,transparent 38%);pointer-events:none}.vignette{pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,#10232b45 100%)}.topbar{position:absolute;top:0;left:0;right:0;padding:24px 31px;display:flex;align-items:center;justify-content:space-between;gap:15px;pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:11px;text-shadow:0 2px 12px #18262d7d}.brand-icon{color:#c5d98e;font-size:33px;line-height:1;text-shadow:0 3px 15px #a8d17299}.brand strong{display:block;font-size:15px;letter-spacing:.21em;font-weight:800}.brand small{display:block;font-size:9px;letter-spacing:.27em;color:#d1dfc6;margin-top:3px}.top-actions{display:flex;gap:12px;align-items:center}#presence{font-size:10px;letter-spacing:.15em;color:#e5efce;background:#162d32b8;border:1px solid #ffffff2a;padding:11px 14px;border-radius:6px;white-space:nowrap}#share{border:1px solid #d5e8b48a;border-radius:6px;padding:10px 13px;background:#b9d487e0;color:#203c31;font-size:10px;font-weight:800;letter-spacing:.15em;white-space:nowrap}#share:hover,#start:hover{filter:brightness(1.13)}#crosshair{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 1px 2px #18313d)}#crosshair i{position:absolute;background:#f8f5dd;border-radius:2px}#crosshair i:first-child{width:2px;height:22px;left:10px}#crosshair i:last-child{height:2px;width:22px;top:10px}#notice{position:absolute;top:21%;left:50%;transform:translateX(-50%);font-size:12px;color:#f2f5d8;text-shadow:0 2px 8px #162b2a;background:#192c2cc7;border-radius:5px;padding:8px 13px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}#notice.show{opacity:1}#hotbar{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);display:flex;gap:7px;padding:8px;border:1px solid #ffffff3a;background:#1b302fcf;backdrop-filter:blur(12px);border-radius:11px;box-shadow:0 10px 35px #0d1c209c}#hotbar button{width:64px;height:65px;border-radius:6px;border:1px solid transparent;background:#ffffff0e;color:#d2dac7;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:4px}#hotbar button.active{background:#c6da9d26;border-color:#d6e4ad;box-shadow:inset 0 0 0 1px #d6e4ad33}#hotbar button:hover{background:#ffffff2a}.swatch{height:23px;width:24px;transform:rotate(-24deg) skew(10deg);border:1px solid #ffffff47;box-shadow:3px 3px 0 #0004}.block-name{font-size:8px;letter-spacing:.11em;font-weight:700}.block-number{position:absolute;align-self:flex-start;margin-left:2px;margin-top:-2px;font-size:8px;color:#eff7d6a6}.footer-hint{position:absolute;bottom:23px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.19em;color:#eff3e0c9;text-shadow:0 2px 7px #172d30}.footer-hint b{color:#b4d27b;padding:0 9px}#welcome{position:absolute;inset:0;background:#1127299e;backdrop-filter:blur(7px);display:grid;place-items:center;padding:20px}#welcome.hidden{display:none}.welcome-card{width:min(505px,100%);padding:39px 43px 30px;border:1px solid #dae4c154;background:linear-gradient(155deg,#284344f4,#182d30f6);box-shadow:0 25px 90px #0c2226d9;border-radius:10px}.eyebrow{font-size:10px;color:#cadf96;font-weight:800;letter-spacing:.22em}.welcome-card h1{font-size:clamp(38px,5vw,61px);line-height:1.05;letter-spacing:-.045em;margin:20px 0 18px;font-weight:750}.welcome-card h1 em{font-family:Georgia,serif;font-weight:400;color:#d2e6a1}.welcome-card p{font-size:14px;line-height:1.7;color:#d2dfd1;max-width:390px;margin:0 0 28px}.instructions{display:grid;grid-template-columns:1fr 1fr;gap:11px 16px;border-top:1px solid #f1f4df2e;border-bottom:1px solid #f1f4df2e;padding:21px 0;margin-bottom:24px}.instructions span{font-size:11px;color:#d7e2d5;white-space:nowrap}.instructions b{display:inline-block;color:#e6f4cc;border:1px solid #d8e5c55c;background:#e2e9ce19;border-radius:3px;padding:5px 7px;letter-spacing:.08em;margin-right:7px;font-size:9px}#start{width:100%;padding:17px 19px;border:0;border-radius:5px;background:#c5dd92;color:#254036;font-size:12px;font-weight:850;letter-spacing:.17em;text-align:left;display:flex;justify-content:space-between}#start span{font-size:18px;line-height:12px}.welcome-foot{display:block;text-align:center;color:#b8c9b9;font-size:10px;letter-spacing:.03em;margin-top:19px}#touch{display:none}@media(pointer:coarse){.footer-hint{display:none}#touch{display:flex;position:absolute;bottom:104px;left:18px;right:18px;justify-content:space-between;align-items:end;pointer-events:none}.dpad,.touch-actions{pointer-events:auto}.dpad{display:flex;flex-direction:column;align-items:center;gap:5px}.dpad>div{display:flex;gap:5px}.dpad button,.touch-actions button{border:1px solid #f3fad98a;color:#f4f9de;background:#203c3ba8;border-radius:9px;backdrop-filter:blur(5px);height:50px;width:50px;font-size:18px;touch-action:none;user-select:none}.touch-actions{display:flex;gap:5px;align-items:end}.touch-actions button{width:54px;height:59px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.touch-actions small{font-size:8px;letter-spacing:.09em}.topbar{padding:14px}.brand strong{font-size:11px}.brand small{font-size:7px}#share{padding:8px}#share span{display:none}#presence{font-size:8px;padding:9px}#hotbar{bottom:17px;padding:5px;gap:3px}#hotbar button{width:51px;height:55px}.welcome-card{padding:27px 24px}.welcome-card p{font-size:12px}.welcome-card h1{font-size:43px}.instructions{gap:7px}.instructions span{font-size:9px}.instructions b{font-size:8px;margin-right:3px;padding:4px}}@media(max-height:650px){.welcome-card{padding:18px 25px}.welcome-card h1{font-size:37px;margin:10px 0}.welcome-card p{margin-bottom:10px}.instructions{padding:10px 0;margin-bottom:12px}.welcome-foot{margin-top:8px}}