:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--sky:#9bd8f4;--soil:#6f462b;--leaf:#2f7c4d;--leaf-dark:#1f5637;--cream:#fff6d8;--paper:#fffaf0;--ink:#183321;--gold:#efb23e;--red:#d94f34;--blue:#2e7fd5;--violet:#6f4ca8}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);background:radial-gradient(circle at 18% 18%,#fff6d8d9 0 8%,#0000 18%),linear-gradient(#cdefff 0%,#f3edca 58%,#b8d878 100%);place-items:center;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:grid}.shell{width:min(100vw,1120px);padding:clamp(8px,2.2vw,24px)}.game-frame{aspect-ratio:16/9;background:var(--sky);border:5px solid #244c32;border-radius:8px;width:100%;position:relative;overflow:hidden;box-shadow:0 22px 55px #25402542,inset 0 0 0 3px #fffae894}.game-frame:before{content:"";pointer-events:none;z-index:1;position:absolute;inset:0;box-shadow:inset 0 0 90px #244c3233}canvas{outline:none;width:100%;height:100%;display:block}.overlay{z-index:2;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:linear-gradient(#9bd8f45c,#fff6d8b8),#27543529;place-items:center;padding:clamp(14px,3vw,30px);display:grid;position:absolute;inset:0;overflow-y:auto}.overlay.hidden{display:none}.menu-panel{text-align:center;width:min(690px,100%);max-width:100%;color:var(--ink);background:linear-gradient(#fffaf0fa,#fff3cbf5);border:3px solid #244c32;border-radius:8px;padding:14px 24px 18px;position:relative;box-shadow:0 18px #49311c26,0 28px 50px #142d1c52,inset 0 0 0 5px #31583814}.menu-panel:after{content:"";z-index:-1;background:#7d4d2e;border-radius:0 0 8px 8px;height:18px;position:absolute;bottom:-12px;left:24px;right:24px}.brand-mark{width:86px;height:44px;margin:0 auto 6px;position:relative;transform:scale(.82)}.sunburst{background:repeating-conic-gradient(from 10deg, var(--gold) 0 12deg, transparent 12deg 24deg), radial-gradient(circle, #ffda72 0 45%, #c87825 46% 100%);border-radius:50%;width:34px;height:34px;position:absolute;top:2px;left:7px}.barn-roof{background:#d94f34;border:3px solid #244c32;border-top:0;width:56px;height:34px;position:absolute;bottom:8px;left:31px}.barn-roof:before{content:"";background:#efb23e;border-top:3px solid #244c32;border-left:3px solid #244c32;width:45px;height:45px;position:absolute;top:-19px;left:2px;transform:rotate(45deg)}.book-icon{background:#2e7fd5;border-radius:4px;width:24px;height:23px;position:absolute;bottom:10px;right:4px;box-shadow:inset 12px 0 #ffffff3d}.eyebrow{color:#315838;letter-spacing:.09em;text-transform:uppercase;margin:0 0 5px;font-size:.78rem;font-weight:900}h1{letter-spacing:0;text-wrap:balance;margin:0 0 7px;font-size:clamp(1.9rem,4vw,2.95rem);line-height:.9}.tagline{max-width:48ch;margin:0 auto 12px;font-size:clamp(1rem,2vw,1.16rem);line-height:1.38}.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 12px;display:grid}.mode-card{min-height:68px;color:var(--ink);text-align:left;box-shadow:none;background:#ffffff8a;border:2px solid #244c3238;border-radius:8px;align-content:start;gap:6px;padding:8px 10px;display:grid}.mode-card:hover{transform:translateY(-1px)}.mode-card:active{box-shadow:none;transform:translateY(1px)}.mode-card.selected{background:linear-gradient(#fffae1fa,#efb23e3d);border-color:#244c32}.mode-card strong{font-size:.95rem;line-height:1.1}.mode-card span{font-size:.78rem;font-weight:700;line-height:1.25}.mode-best{color:#6a4d24;font-variant-numeric:tabular-nums}.mode-best:empty{display:none}.controls-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px;display:grid}.player-card{background:linear-gradient(#ffffffbd,#ffffff6b);border:2px solid #244c323d;border-radius:8px;grid-template-columns:1fr 1fr;gap:6px 10px;min-height:88px;padding:10px 12px;display:grid}.player-card strong{grid-column:1/-1;justify-content:center;align-items:center;gap:8px;font-size:1.04rem;display:flex}.player-card strong:before{content:"";border:2px solid #20331f;border-radius:3px;width:13px;height:13px}.player-one strong:before{background:var(--red)}.player-two strong:before{background:var(--blue)}.player-card span{background:#31583817;border-radius:6px;place-items:center;min-height:23px;padding:4px 8px;font-size:.9rem;font-weight:700;display:grid}.menu-actions{justify-content:center;align-items:center;gap:14px;display:flex}button{color:#20331f;min-height:42px;font:inherit;cursor:pointer;background:linear-gradient(#ffd56c,#efb23e);border:2px solid #244c32;border-radius:7px;padding:0 26px;font-weight:900;box-shadow:inset 0 -4px #00000029,0 5px #7d4d2e}button:hover{transform:translateY(-1px)}button:active{transform:translateY(3px);box-shadow:inset 0 -2px #00000029,0 2px #7d4d2e}button:focus-visible{outline-offset:4px;outline:3px solid #1b6aa5}.menu-actions span{color:#315838;font-size:.92rem;font-weight:800}.gamepad-status:empty{display:none}.gamepad-status{color:#244c32;background:#244c321f;border-radius:999px;padding:4px 10px;font-size:.82rem}.touch-controls{pointer-events:none;z-index:3;justify-content:space-between;padding:14px clamp(10px,4vw,36px);display:flex;position:absolute;inset:auto 0 0}.touch-pad{pointer-events:auto;grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.touch-btn{color:#20331f;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;width:clamp(46px,11vw,68px);min-height:clamp(46px,11vw,68px);box-shadow:none;background:#fff8dfc7;border:2px solid #244c328c;border-radius:50%;padding:0;font-size:1.2rem;font-weight:900}.touch-btn-commit{background:#f0b33fc7;font-size:.85rem}.touch-btn.pressed{background:#f0b33feb;transform:translateY(1px)}.overlay:not(.hidden)~.touch-controls{display:none}.back-to-menu{z-index:4;color:#20331f;cursor:pointer;background:#fff8dfeb;border:2px solid #244c328c;border-radius:6px;min-height:28px;padding:4px 12px;font-family:inherit;font-size:.78rem;font-weight:900;position:absolute;top:8px;right:8px;box-shadow:0 2px #49311c2e}.back-to-menu:hover{background:#fff8df}.overlay:not(.hidden)~.back-to-menu{display:none}@media (max-width:700px){.mode-grid,.controls-grid{grid-template-columns:1fr}.player-card{min-height:0}}@media (orientation:portrait) and (max-width:700px){.game-frame:has(>.overlay:not(.hidden)){aspect-ratio:auto;min-height:calc(100dvh - 16px)}.overlay{align-items:start}}@media (max-width:520px){.shell{padding:8px}.menu-panel{padding:14px}.brand-mark{width:100px;height:54px;margin-bottom:2px;transform:scale(.85)}.player-card{grid-template-columns:1fr}.controls-grid{display:none}.menu-actions{flex-direction:column;gap:10px}}