*{box-sizing:border-box} :root{font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:#3d422f;font-synthesis:none}body{margin:0;min-height:100svh;background:#d9eccb}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #115b93;outline-offset:5px}button:disabled{cursor:default}button[hidden],[hidden]{display:none!important}.landscape{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:linear-gradient(#a9dfea 0%,#d5eee2 52%,#e6edc8 72%,#b4cf8e 100%);z-index:-1}.sun{position:absolute;width:180px;height:180px;border-radius:50%;background:#fff8d7;top:5%;right:11%;box-shadow:0 0 90px 60px #fff5bd55}.cloud{position:absolute;width:200px;height:42px;background:#ffffff75;border-radius:80%;top:16%;left:7%;filter:blur(2px)}.cloud:before{content:'';position:absolute;width:90px;height:65px;border-radius:50%;background:inherit;left:45px;bottom:0}.c2{left:73%;top:34%;transform:scale(.65)}.hill{position:absolute;border-radius:50% 60% 0 0;width:140%;height:42%;bottom:-5%;left:-20%;background:#a1cda2}.far{transform:rotate(-7deg);bottom:4%;background:#b8d7ad}.near{transform:rotate(7deg);background:linear-gradient(#b3cf90,#9bb977)}.tree{position:absolute;bottom:15%;height:40%;width:33px;background:#9b9f74;border-radius:70% 30% 0 0}.tree:before,.tree:after{content:'';position:absolute;width:210px;height:310px;border-radius:55% 45% 50% 40%;background:#719d7f;bottom:45%;left:-90px;transform:rotate(-10deg)}.tree:after{width:120px;height:210px;left:-30px;background:#82ad86;bottom:75%}.t1{left:-1%;transform:rotate(-8deg)}.t2{right:2%;transform:rotate(9deg)}.t3{left:15%;transform:scale(.5);opacity:.25;bottom:21%}.t4{right:19%;transform:scale(.45);opacity:.3;bottom:16%}.bush{position:absolute;width:330px;height:220px;border-radius:50%;background:#427a69;bottom:-130px;box-shadow:90px -30px 0 -10px #609875,-90px -20px 0 -30px #547f60}.b1{left:-130px}.b2{right:-140px;transform:rotate(-15deg)}.flowers{position:absolute;bottom:5%;left:5%;width:90%;color:#f9efb5;font-size:40px;letter-spacing:6vw}
main{width:min(100% - 32px,990px);margin:auto;padding:28px 0 22px;text-align:center}header{position:relative}.eyebrow{display:block;font-size:10px;font-weight:900;letter-spacing:3px;color:#487568}h1{position:relative;display:inline-block;margin:7px 0 0;font-size:clamp(44px,6.1vw,74px);font-weight:1000;letter-spacing:-4px;line-height:1.1;color:#fff6db;text-shadow:0 3px #8c613b,2px 0 #8c613b,-2px 0 #8c613b,0 -2px #8c613b,0 6px 0 #65482d,0 9px 16px #46644640;transform:rotate(-2deg)}h1>span{color:#f5d477}h1 b{font-size:.9em;margin-left:9px;text-shadow:0 3px #125b97,1px 0 #125b97,-1px 0 #125b97,0 -1px #125b97,0 6px #154f79}h1 b.red{margin-left:3px;text-shadow:0 3px #9d3d26,1px 0 #9d3d26,-1px 0 #9d3d26,0 -1px #9d3d26,0 6px #823c26}.blue{color:#219ced}.red{color:#f36a47}header p{font-size:13px;color:#416b5f;margin:16px 0 18px;font-weight:600}.leaf{position:absolute;right:-20px;top:0;width:29px;height:17px;background:#659b4f;border-radius:100% 0 100% 0;transform:rotate(-20deg);border-bottom:3px solid #477e45}.topline{width:min(100%,470px);display:flex;align-items:center;justify-content:space-between;margin:0 auto 18px}.pill{font-size:10px;letter-spacing:1.4px;font-weight:800;display:flex;align-items:center;gap:7px}.dot{width:6px;height:6px;background:#51845a;border-radius:50%}.tools{display:flex;gap:8px}.tool{border:1px solid #79947b45;background:#ffffff80;border-radius:50%;width:38px;height:38px;font-weight:800;font-size:20px;box-shadow:0 2px 0 #63835d19}.arena{display:grid;grid-template-columns:1fr minmax(260px,470px) 1fr;gap:20px;align-items:center}.game{min-width:0}.boardwrap{position:relative;border-radius:31px;padding:20px;background:repeating-linear-gradient(2deg,transparent 0 15px,#653a1d15 16px 18px,transparent 19px 39px),linear-gradient(110deg,#b77d44,#d49a57 35%,#af713c 80%);border:3px solid #86542e;box-shadow:inset 0 3px 0 #efc383,inset 0 -5px 0 #8e562d,0 8px 0 #704627,0 14px 0 #79502e25,0 22px 30px #5a704135}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:#85532e;border:6px solid #85532e;border-radius:17px;box-shadow:0 1px 0 #e4b47b;overflow:hidden}.cell{border:1px solid #c28e54;border-radius:12px;aspect-ratio:1;position:relative;display:grid;place-items:center;padding:8px;background:repeating-linear-gradient(-3deg,transparent 0 22px,#c28e5410 23px 24px,transparent 25px 39px),linear-gradient(120deg,#ffedcb,#f5d6a5);box-shadow:inset 0 3px 0 #fff4dc,0 4px 0 #b47a42;transition:filter .15s,transform .15s}.cell:not(:disabled):hover{filter:brightness(1.07);transform:translateY(-2px)}.cell:not(:disabled):active{transform:translateY(2px)}.cell svg{width:88%;height:88%;overflow:visible;filter:drop-shadow(0 4px 1px #5f2d2633);animation:pop .32s cubic-bezier(.2,1.7,.6,1)}.cell.winner{background:linear-gradient(135deg,#fff6c3,#f7d773);box-shadow:inset 0 0 0 3px #fff4aa,0 4px 0 #b47a42}.corner{position:absolute;width:8px;height:8px;border-radius:50%;background:#714823;box-shadow:inset 0 2px #51321c,0 1px #f6ca8d}.tl{left:8px;top:10px}.tr{right:8px;top:10px}.bl{left:8px;bottom:10px}.br{right:8px;bottom:10px}#winLine{position:absolute;inset:26px;width:calc(100% - 52px);height:calc(100% - 52px);pointer-events:none}#winLine line{stroke:#fffce4;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 1px 2px #8a5a28);stroke-dasharray:400;stroke-dashoffset:400}#winLine.show line{animation:draw .5s .2s forwards}.status{margin:22px auto 0;font-weight:900;font-size:19px;color:#3c543b;min-height:26px}.status .blue{color:#1372b3}.substatus{font-size:12px;margin-top:6px;min-height:17px;color:#536847}.player{position:relative;align-self:center;padding-bottom:55px}.mascot{max-width:185px;margin:auto;animation:bob 3.5s ease-in-out infinite}.twig .mascot{animation-delay:-1.5s}.mascot svg{width:100%;overflow:visible;filter:drop-shadow(0 14px 7px #476c4133)}.speech{font-size:12px;font-weight:700;display:inline-block;border-radius:15px 15px 15px 3px;padding:12px 15px;background:#fffdf0d9;margin-bottom:10px;box-shadow:0 3px #76906d12}.nameplate{padding:10px 12px;margin:-4px auto 0;background:#fff9e7b8;box-shadow:0 4px 0 #93a16a35;border:1px solid #fffef0;border-radius:16px;max-width:168px}.nameplate strong{display:block;font-size:20px}.mark{margin-left:5px;font-weight:1000}.nameplate small{font-size:10px;color:#697451}.score{margin:17px auto 0;display:flex;flex-direction:column;gap:3px}.score strong{font-size:27px}.score span{font-size:9px;letter-spacing:2px;font-weight:800;color:#677751}.you .score strong{color:#2172a3}.twig .score strong{color:#ba4b33}.player.active .nameplate{border:2px solid #72ad69;background:#fffbeb}.bottom{width:min(100%,470px);margin:22px auto 0}.difficulty{display:flex;padding:5px;background:#eff3dcbf;border:1px solid #a1b58a80;border-radius:18px;gap:4px}.difficulty button{flex:1;border:0;border-radius:12px;background:transparent;padding:9px 2px;font-size:13px;font-weight:900;transition:background .2s}.difficulty small{display:block;font-size:10px;font-weight:500;margin-top:3px;color:#647353}.difficulty .selected{background:#fff9e9;box-shadow:0 3px 0 #b8b99855;color:#476e3f}.difficulty button:disabled:not(.selected){opacity:.65}.roundinfo{display:flex;align-items:center;justify-content:center;gap:25px;font-size:12px;margin-top:16px;color:#526b47}.roundinfo button{border:0;background:transparent;padding:8px 0;font-size:12px;font-weight:800}.footnote{font-size:11px;color:#4b6743;margin:6px 0}.primary{background:linear-gradient(#7ea45e,#5d8844);border:1px solid #4b7337;box-shadow:inset 0 2px 0 #a4c283,0 4px 0 #3e6231;color:#fffbea;font-weight:800;border-radius:15px;padding:14px 22px;font-size:16px}.primary:hover{filter:brightness(1.06)}.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #3e6231}#next{margin-top:14px;width:100%}#next span{margin-left:12px}.secondary{display:block;border:0;background:transparent;width:100%;padding:15px;font-weight:700}dialog{border:2px solid #c5aa79;border-radius:26px;padding:30px;max-width:400px;width:calc(100% - 32px);background:#fff8e9;color:#465139;box-shadow:0 20px 90px #1b382a50;text-align:left}dialog::backdrop{background:#234e3b55;backdrop-filter:blur(5px)}dialog h2{font-size:25px;line-height:1.2;margin:12px 0 20px}dialog p,dialog li{font-size:14px;line-height:1.6}dialog ol{padding-left:22px}dialog li{margin:8px 0}dialog .fine{font-size:12px;color:#6c755e}dialog .primary{width:100%;margin-top:10px}.close{position:absolute;right:13px;top:10px;background:none;border:0;font-size:30px;width:40px;height:40px}.dialogbadge{font-size:30px;color:#1c96de;font-weight:1000;letter-spacing:5px}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;width:9px;height:16px;top:-20px;left:var(--x);background:var(--c);border-radius:2px;animation:fall 2.6s var(--delay) ease-in forwards}#saveNotice{font-size:11px;color:#923b1f}.paused *{animation-play-state:paused!important;transition:none!important}.paused main{pointer-events:none}@keyframes pop{from{transform:scale(.3) rotate(-15deg);opacity:.2}to{transform:scale(1) rotate(0);opacity:1}}@keyframes bob{50%{transform:translateY(-6px) rotate(2deg)}}@keyframes draw{to{stroke-dashoffset:0}}@keyframes fall{to{transform:translateY(110vh) rotate(620deg)}}
@media(max-width:700px){main{width:min(100% - 28px,480px);padding:18px 0}header .eyebrow{display:block;font-size:8px;letter-spacing:2px}h1{font-size:53px;letter-spacing:-3px}header p{font-size:11px;margin:12px 0}.topline{margin-bottom:6px}.pill{font-size:8px;letter-spacing:1px}.tool{width:36px;height:36px}.arena{grid-template-columns:1fr 1fr;gap:9px 30px}.game{grid-column:1/-1;grid-row:2}.player{display:grid;grid-template-columns:58px 1fr;align-items:center;padding:0;gap:0 5px}.player .speech{display:none}.mascot{width:58px;grid-row:1/3}.nameplate{background:none!important;box-shadow:none;border:none!important;padding:0;margin:0;text-align:left}.nameplate strong{font-size:16px;white-space:nowrap}.nameplate small{font-size:8px}.score{flex-direction:row;margin:3px 0;align-items:baseline;gap:5px}.score strong{font-size:18px}.score span{font-size:8px;letter-spacing:1px}.twig{grid-template-columns:1fr 58px}.twig .mascot{grid-column:2}.twig .nameplate{text-align:right}.twig .score{justify-content:flex-end}.boardwrap{padding:15px;border-radius:25px}.board{gap:8px;border-width:5px;border-radius:14px}.cell{border-radius:10px}#winLine{inset:20px;width:calc(100% - 40px);height:calc(100% - 40px)}.status{margin-top:17px;font-size:18px}.bottom{margin-top:15px}.difficulty button{font-size:12px;padding:8px 1px}.roundinfo{margin-top:7px;gap:24px}.footnote{font-size:10px}.tree:before{width:130px;height:250px}.t1{left:-55px}.t2{right:-40px}}
@media(max-height:740px) and (max-width:700px){main{padding-top:10px}header p{display:none}h1{font-size:45px;margin-bottom:10px}.mascot{width:44px}.player{grid-template-columns:44px 1fr}.twig{grid-template-columns:1fr 44px}.boardwrap{max-width:min(100%,calc(100svh - 310px));margin:auto}.status{margin-top:12px}.bottom{margin-top:10px}.substatus{font-size:11px}.difficulty button{padding:6px 1px}.roundinfo{margin-top:3px}.footnote{margin-top:3px}}
@media(max-height:540px) and (min-width:600px){main{padding:10px 0;width: min(100% - 32px,850px)}header .eyebrow,header p{display:none}h1{font-size:38px;margin:0}.topline{margin:0 auto 5px;width:330px}.arena{grid-template-columns:1fr minmax(200px,310px) 1fr;gap:18px}.game{grid-row:auto;grid-column:auto}.player{display:block;padding-bottom:0}.player .mascot{width:100px}.player .speech{display:none}.nameplate{text-align:center!important}.score{justify-content:center!important}.boardwrap{width:min(310px,calc(100svh - 165px));margin:auto;padding:12px}.board{gap:6px;border-width:4px}.cell{padding:4px}.status{font-size:15px;margin-top:12px}.substatus{display:none}.bottom{position:absolute;left:18px;bottom:20px;width:calc((100% - 380px)/2);max-width:240px}.difficulty{flex-direction:column}.difficulty button{padding:5px}.difficulty small{display:inline;margin-left:7px}.roundinfo{flex-wrap:wrap;gap:0 12px}.footnote{display:none}#next{padding:8px;margin-top:5px}.topline .tool{width:30px;height:30px}#winLine{inset:19px;width:calc(100% - 38px);height:calc(100% - 38px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}

@media(max-height:540px) and (min-width:600px){.bottom{bottom:8px}.difficulty{flex-direction:row}.difficulty button{font-size:10px;padding:7px 1px}.difficulty small{display:block;font-size:9px;margin:3px 0 0}.player{align-self:start;padding-top:8px}.player .mascot{width:75px}.nameplate{padding:7px}.nameplate strong{font-size:16px}.nameplate small{font-size:9px}.score{margin-top:8px}.score strong{font-size:19px}.roundinfo{font-size:10px}.roundinfo button{font-size:10px}}
.bottom{background:#f6f5dfed;border:1px solid #fff7df;border-radius:21px;padding:10px 12px;box-shadow:0 4px 15px #4771420d}.difficulty{background:#e5eace90}.footnote{color:#475f3e}.roundinfo{color:#455e3d}
@media(max-height:740px) and (max-width:700px){.boardwrap{max-width:min(100%,calc(100svh - 340px))}.bottom{padding:7px 10px}.footnote{display:none}}
@media(max-height:540px) and (min-width:600px){.bottom{padding:5px 7px}.score span{font-size:8px}.score{margin-top:4px}.roundinfo{margin-top:4px}.roundinfo button{padding:6px 0}}
@media(max-height:740px) and (max-width:700px){.boardwrap{max-width:min(100%,calc(100svh - 400px))}.bottom{margin-top:8px}.status{font-size:16px;margin-top:12px}.substatus{margin-top:3px}.arena{gap:6px 24px}}
@media(max-height:540px) and (min-width:600px){.boardwrap{max-width:none;width:min(310px,calc(100svh - 165px))}.bottom{width:calc((100% - 280px)/2);max-width:220px;left:10px}.arena{gap:18px}.status{margin-top:12px}}
/* Keep fullscreen presentation independent of the current game state. */
#fullscreen{display:grid;place-items:center;flex-shrink:0}
#fullscreen[aria-pressed="true"]{background:#fff8df;border-color:#678b50}
#fullscreenNotice{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:14px 18px;border-radius:14px;background:#fff8e9;color:#3d5034;border:1px solid #b3bd91;box-shadow:0 4px 22px #28432b33;text-align:center;font-size:14px;z-index:100;pointer-events:none}
html:fullscreen,html:-webkit-full-screen{background:#d9eccb;overflow:auto}
