*{box-sizing:border-box}body{margin:0;background:#0b151a;color:#eee7d7;font:15px/1.5 system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:#e8e5d8;background:#1d3036;border:1px solid #405258;border-radius:8px;padding:9px 13px;touch-action:none}button:hover{background:#2d494c}button:focus-visible,a:focus-visible{outline:3px solid #f4bf69;outline-offset:3px}button:disabled{opacity:.6;cursor:wait}header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 28px;border-bottom:1px solid #26383c}.eyebrow{font-size:10px;letter-spacing:2.7px;color:#b4cbbf;font-weight:700}h1{font:28px Georgia,serif;margin:4px 0}h1 em{font:14px system-ui;color:#d5aa69;margin-left:12px}nav{display:flex;gap:7px}main{max-width:1600px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;padding:24px 28px}.game{min-width:0}.status{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1px;padding:0 4px 12px;color:#b9d3c9}#stage{position:relative;width:100%;aspect-ratio:16/9;background:#080d11;overflow:hidden;border:1px solid #3c4b49;border-radius:12px;box-shadow:0 20px 60px #0005}canvas{position:absolute}#paused{position:absolute;inset:0;display:grid;place-items:center;background:#06121bd4;font:32px Georgia;z-index:2}#paused[hidden]{display:none}.controls{display:flex;align-items:center;gap:12px;margin-top:15px}.controls p{font-size:11px;color:#a9bcb7;flex:1}.pad{display:flex;align-items:center;gap:4px}.pad>div{display:grid;gap:4px}.pad button{width:40px;height:36px;padding:0;font-size:20px}.siphon{background:#9b7134;color:#fff3d2;min-height:62px;font-weight:700;min-width:110px}aside{padding:16px 0 0 8px}h2{font:32px/1.15 Georgia,serif;margin:12px 0 24px}.specimen{display:flex;gap:12px;margin:20px 0;align-items:center}.crop{flex:0 0 68px;height:78px;background-image:url('./field-guide.webp');background-size:310px 175px;border-radius:12px;border:1px solid #4f594c}.ghost .crop{background-position:-62px -26px}.spark .crop{background-position:-110px -70px}.key .crop{background-position:-162px -70px}.specimen b{font-size:14px;color:#dfc38a}.specimen p{font-size:11px;color:#a6b9b3;margin:4px 0}meter{width:100%;height:9px}.note{font:italic 15px/1.5 Georgia;color:#c8b58e;border-top:1px solid #334344;padding-top:18px}footer{display:flex;justify-content:space-between;padding:12px 28px;color:#8b9f9b;font-size:11px;gap:12px}a{color:#d7be88}.modal{position:fixed;inset:0;z-index:5;background:#071118ef;display:grid;place-items:center;padding:24px;overflow:auto}.modal[hidden]{display:none}.modal article{width:min(940px,100%);display:grid;grid-template-columns:1.05fr 1fr;border:1px solid #4a5952;border-radius:20px;overflow:hidden;background:#122329;box-shadow:0 30px 100px #0009}.modal img{width:100%;height:100%;object-fit:cover;object-position:25% center;min-height:430px}.intro{padding:38px}.intro h2{font-size:47px;color:#f5e8cc;margin:15px 0 22px}.intro p{font-size:14px;color:#b9cbc4}.primary{background:#e0b46c;color:#16232a;border:0;font-weight:800;padding:14px 24px;margin:12px 0}.primary:hover{background:#f2ca8b}.intro .hint{font-size:11px;line-height:1.8}.modal~dialog{max-width:540px;width:90%;color:#e8e7dc;background:#15272d;border:1px solid #607269;border-radius:16px;padding:22px}dialog::backdrop{background:#030d13df}dialog img{width:100%;border-radius:8px}dialog h2{margin:16px 0}dialog p{font-size:14px}dialog button{width:100%}@media(max-width:1000px){main{grid-template-columns:minmax(0,1fr) 210px;padding:16px;gap:16px}header{padding:14px 16px}h1 em{display:block;margin:4px 0 0}aside{padding:10px 0}.crop{flex-basis:50px}.controls{gap:8px}.controls p{display:none}}@media(max-width:700px){header{align-items:flex-start}h1{font-size:22px}header .eyebrow{font-size:8px;letter-spacing:1.5px}nav{display:grid;grid-template-columns:1fr 1fr;gap:4px}nav button{font-size:10px;padding:6px}main{display:block;padding:12px}aside{display:flex;gap:10px;flex-wrap:wrap}aside>h2,aside>.eyebrow,.specimen p{display:none}.specimen{margin:6px 0;flex:1;gap:6px}.crop{flex-basis:34px;height:40px;background-size:220px 124px}.ghost .crop{background-position:-45px -22px}.spark .crop{background-position:-88px -57px}.key .crop{background-position:-126px -57px}.specimen b{font-size:10px}.note{width:100%;font-size:13px;margin:0;padding:8px 0;border:0}.controls{justify-content:space-between}.controls>button{font-size:12px;padding:8px}.pad button{width:37px}.status{font-size:10px}footer{padding:12px;flex-wrap:wrap;font-size:10px}.modal{padding:16px}.modal article{display:block;max-width:460px}.modal img{height:200px;min-height:0;object-position:center}.intro{padding:22px}.intro h2{font-size:35px;margin:10px 0}.intro p{font-size:13px}.intro .hint{font-size:10px}dialog p{font-size:12px}}@media(max-height:520px) and (min-width:700px){header{padding:6px 16px}h1{font-size:20px}header .eyebrow{display:none}h1 em{display:inline;margin-left:8px}main{padding:8px 16px;grid-template-columns:minmax(0,1fr) 200px}#stage{height:calc(100dvh - 160px);aspect-ratio:auto}.controls{margin-top:5px}.controls .pad{position:absolute;bottom:70px;left:24px;z-index:3;opacity:.7}.siphon{min-height:36px}aside h2{display:none}.specimen{margin:5px 0}.specimen .crop{height:50px}footer{display:none}.modal article{grid-template-columns:1fr 1fr;max-width:820px}.modal img{min-height:300px}.intro{padding:22px}.intro h2{font-size:32px}}