@font-face{font-family:Mitr;src:url('./games/farm/fonts/mitr-thai-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:Mitr;src:url('./games/farm/fonts/mitr-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Mitr;src:url('./games/farm/fonts/mitr-thai-500-normal.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:Mitr;src:url('./games/farm/fonts/mitr-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Nunito;src:url('./games/farm/fonts/nunito-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
:root{font-family:Mitr,sans-serif;color:#40564a;background:#f8f5e9;font-synthesis:none;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}body{margin:0;min-height:100svh;padding:0 max(24px,env(safe-area-inset-left)) 0 max(24px,env(safe-area-inset-right));background:radial-gradient(ellipse at 100% 0%,#e7eddb88,transparent 42%),radial-gradient(ellipse at 0% 90%,#f1dfd044,transparent 45%)}
a{color:inherit;text-decoration:none;touch-action:manipulation}button{font:inherit}svg{display:block;width:24px;height:24px}.symbols{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}
.skip-link{position:fixed;top:-100px;left:20px;padding:14px;background:#fff;z-index:10;border:3px solid #327eb4;border-radius:12px}.skip-link:focus{top:12px}
a:focus-visible{outline:4px solid #245e9a;outline-offset:5px}main:focus{outline:none}.site-header,main,footer{max-width:1080px;margin-inline:auto}.site-header{display:flex;align-items:center;justify-content:space-between;padding:17px 0 10px;gap:16px}.brand{display:flex;align-items:center;gap:13px}.brand-bunny{display:grid;place-items:center;width:53px;height:58px;background:#e9efdb;border:1px solid #dfe4cc;border-radius:24px 24px 21px 21px;box-shadow:0 4px 0 #e1e5cc}.brand-bunny svg{width:40px;height:45px}.brand small{display:block;font:700 9px Nunito,sans-serif;letter-spacing:2.6px;color:#81927a;margin-bottom:4px}.brand-title{font-size:18px;font-weight:500}.total-stars{display:flex;align-items:center;gap:10px;min-width:110px;padding:9px 17px;border:2px solid #e6d4a3;background:#fff3cc;border-radius:21px;box-shadow:0 3px 0 #ebdebb}.total-stars svg{width:30px;height:30px;fill:#e4ad39;stroke:#be8b25;stroke-width:1.2}.total-stars small{display:block;font-size:10px;color:#897244}.total-stars output{display:block;font:700 23px/1.1 Nunito,sans-serif;color:#805b26}
.intro{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:19px 4px 22px}.eyebrow{font-size:12px;color:#839078;margin:0 0 3px}h1{font-size:34px;line-height:1.45;font-weight:500;margin:0;letter-spacing:-.7px}h1>span{color:#d29c56}.instruction{display:flex;align-items:center;gap:8px;margin:5px 0 0;color:#75846c;font-size:14px}.instruction svg{width:21px;height:21px;color:#a8906c}.number-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:133px;height:81px;background:#eeeedb;border:1px dashed #c9d1ad;border-radius:20px;transform:rotate(4deg);margin-right:5px}.number-badge b{font:700 31px Nunito,sans-serif;letter-spacing:1px;color:#68826a}.number-badge>span{font-size:10px;color:#75846c;margin-top:2px}
.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.game-card{position:relative;display:block;min-width:0;border:2px solid var(--edge);border-radius:28px;background:var(--pale);box-shadow:0 7px 0 var(--edge),0 12px 20px -14px #78634877;transition:transform .15s ease,box-shadow .15s ease;isolation:isolate;overflow:hidden;--accent:#b55762;--edge:#e8b5ad;--pale:#fce4df;--paper:#fff9f5}
.garden{--accent:#34784a;--edge:#a9c995;--pale:#e6f0d1;--paper:#f8fbef}.train{--accent:#2e7da9;--edge:#96bfd6;--pale:#dff0f7;--paper:#f4fafc}.farm{--accent:#a06a25;--edge:#dfc274;--pale:#f9eac1;--paper:#fffbeb}
.card-art{height:182px;position:relative;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 90%,#ffffff77,transparent 72%)}.card-art canvas{width:100%;height:100%;display:block;object-fit:contain}.art-fallback{position:absolute;width:142px;height:142px;left:50%;top:50%;transform:translate(-50%,-50%);filter:drop-shadow(0 9px 4px #80664c20)}.card-art[data-ready] .art-fallback{display:none}.skill-sticker{position:absolute;top:18px;left:20px;border:1px solid #ffffffdd;background:#ffffff9c;box-shadow:0 2px 3px #66533408;border-radius:12px;padding:5px 9px;color:var(--accent);font:700 17px Nunito,sans-serif;letter-spacing:2px;transform:rotate(-6deg);pointer-events:none}.skill-sticker>span{opacity:.7}.recent{position:absolute;right:14px;top:17px;padding:5px 9px;border-radius:20px;background:#ffffffb8;color:var(--accent);font-size:10px}
.card-info{display:flex;align-items:center;gap:12px;padding:14px 19px 15px 22px;background:var(--paper);border-top:1px solid #ffffffa0;min-height:83px}.card-info>div{flex:1;min-width:0}.card-info h3{margin:0;color:var(--accent);font-weight:500;font-size:23px;line-height:1.35}.card-info p{font-size:12px;color:#7c8575;margin:4px 0 0}.play-button{display:grid;place-items:center;flex:0 0 auto;width:53px;height:53px;background:var(--accent);color:#fffdf7;border:3px solid #fff;outline:1px solid var(--edge);border-radius:20px;box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 72%,#312c25);transition:transform .15s ease}.play-button svg{width:26px;height:26px;margin-left:2px}.card-stars{display:flex;align-items:center;gap:4px;color:#927a43;font:700 15px Nunito,sans-serif}.card-stars svg{fill:#e3bd65;stroke:#bd9743;stroke-width:1;width:17px;height:17px}
@media(hover:hover){.game-card:hover{transform:translateY(-4px);box-shadow:0 11px 0 var(--edge),0 18px 26px -13px #78634866}.game-card:hover .play-button{transform:scale(1.06)}}.game-card:active{transform:translateY(5px);box-shadow:0 2px 0 var(--edge)}
footer{display:flex;justify-content:center;align-items:center;gap:8px;padding:22px 0 14px;color:#9a9e86;font-size:11px}.footer-dot{width:6px;height:6px;border-radius:50%;background:#b4caa0}.footer-heart{font-size:20px;line-height:1;color:#c99584}
@media(min-width:700px) and (min-height:950px){.site-header{padding-top:24px}.intro{margin-block:35px}.card-art{height:235px}.card-info{min-height:95px}.game-grid{gap:25px}footer{padding-top:30px}}
@media(min-width:700px) and (max-height:760px){.site-header{padding-top:12px}.intro{margin-block:10px 15px}h1{font-size:29px}.card-art{height:145px}.card-info{padding-block:11px;min-height:76px}.game-grid{gap:16px}footer{padding-top:17px}}
@media(max-width:699px){body{padding-inline:max(16px,env(safe-area-inset-left))}.site-header{gap:10px}.brand{gap:8px}.brand-title{font-size:14px}.brand small{font-size:7px;letter-spacing:1.8px}.brand-bunny{width:43px;height:48px}.brand-bunny svg{width:34px;height:38px}.total-stars{min-width:0;gap:5px;padding:8px 10px;border-radius:16px}.total-stars small{display:none}.total-stars svg{width:21px;height:21px}.total-stars output{font-size:21px}.intro{margin:21px 2px 22px}h1{font-size:29px}.number-badge{width:88px;height:70px}.number-badge b{font-size:26px}.number-badge>span{font-size:8px}.instruction{font-size:12px}.game-grid{gap:19px;grid-template-columns:1fr}.card-art{height:186px}.card-info h3{font-size:24px}.card-info p{font-size:13px}.play-button{width:56px;height:56px}.card-info{min-height:87px}}
@media(prefers-reduced-motion:reduce){.game-card,.play-button{transition:none}.game-card:hover,.game-card:active,.game-card:hover .play-button{transform:none}}
@media(forced-colors:active){.game-card,.play-button,.total-stars{border:2px solid ButtonText}.skill-sticker,.recent{background:Canvas}.play-button{color:LinkText}}
.flowers{--accent:#87559c;--edge:#c9abd8;--pale:#eee2f3;--paper:#fcf8ff}
.pond{--accent:#347f70;--edge:#92c8b5;--pale:#daeee3;--paper:#f6fcf4}
.picnic{--accent:#ad663d;--edge:#dfb189;--pale:#f7e0c7;--paper:#fff9ef}.picnic .art-fallback{inline-size:210px;max-inline-size:80%;block-size:142px}
.patterns{--accent:#6c779f;--edge:#b6c0db;--pale:#e3e8f5;--paper:#f8f9ff}.patterns .art-fallback{inline-size:252px;max-inline-size:88%;block-size:142px}.pattern-sticker svg{width:96px;height:24px}.patterns .card-info h3{font-size:21px}
.bridge{--accent:#3f8a8c;--edge:#a2ccca;--pale:#dcefee;--paper:#f5fcf8}.bridge .art-fallback{inline-size:244px;max-inline-size:88%;block-size:142px}
@media(min-width:700px) and (max-width:1099px){.game-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.game-card{grid-column:span 2}.game-card:last-child:nth-child(odd){grid-column:2/span 2}}
@media(min-width:1100px){.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card-info{gap:9px;padding-inline:16px}.card-info h3{font-size:21px}.play-button{width:46px;height:46px;border-radius:17px}}

/* Each group remains visible and follows its document order. */
.intro{flex-wrap:wrap;gap:18px}.group-shortcuts{display:flex;flex-wrap:wrap;gap:10px}.group-shortcuts a{display:flex;align-items:center;justify-content:center;gap:9px;min-block-size:54px;padding:9px 14px;border:2px solid #b8cba6;border-radius:18px;background:#eef4e1;color:#456b45;box-shadow:0 3px #b8cba6;font-size:13px;font-weight:500}.group-shortcuts b{font:700 17px Nunito,sans-serif}.group-shortcuts svg{inline-size:30px;block-size:30px}.group-shortcuts .skill-shortcut{background:#f0e9f8;border-color:#c5b4db;color:#785a91;box-shadow:0 3px #c5b4db}.group-shortcuts a:active{transform:translateY(2px);box-shadow:0 1px #b8cba6}.game-section{scroll-margin-block-start:20px;margin-block-start:28px}.game-section:focus{outline:none}.group-heading{display:flex;align-items:center;gap:13px;margin-block-end:18px;padding-inline:3px}.group-heading>div{min-inline-size:0}.group-heading h2{font-size:23px;line-height:1.4;font-weight:500;margin:0;color:#416c49}.group-heading p{font-size:12px;color:#7b8872;margin:3px 0 0}.group-mark{display:grid;place-items:center;flex:0 0 57px;block-size:57px;border-radius:18px;background:#e8efd7;border:2px solid #bdcfa6;box-shadow:0 3px #d4dfc1}.group-mark b{font:700 20px Nunito,sans-serif;color:#5a7b4d}.group-mark svg{inline-size:39px;block-size:39px}.group-count{margin-inline-start:auto;flex:none;padding:6px 11px;border-radius:13px;background:#eaf0df;color:#65805a;font-size:12px}.skill-section{margin-block-start:44px;padding-block-start:27px;border-block-start:2px dashed #d9cde4}.skill-section .group-heading h2{color:#785994}.skill-section .group-mark{background:#f0e9f8;border-color:#cebbdd;box-shadow:0 3px #e0d4e9}.skill-section .group-count{background:#eee7f5;color:#82639a}
@media(min-width:1100px){.number-grid>.game-card:last-child{grid-column:2}.skill-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.skill-grid>.game-card{grid-column:span 2}.skill-grid>.game-card:nth-last-child(2){grid-column:2/span 2}.skill-grid>.game-card:last-child{grid-column:4/span 2}}
@media(max-width:699px){.intro{margin-block-end:25px}.group-shortcuts{inline-size:100%}.group-shortcuts a{flex:1 1 135px;font-size:12px;padding-inline:9px}.group-heading{gap:10px}.group-heading h2{font-size:21px}.group-heading p{font-size:10px}.group-mark{flex-basis:49px;block-size:49px}.group-mark b{font-size:17px}.group-mark svg{inline-size:33px;block-size:33px}.group-count{font-size:10px;padding:6px 8px}.skill-section{margin-block-start:38px;padding-block-start:23px}}
@media(forced-colors:active){.group-shortcuts a,.group-mark,.group-count{border:2px solid ButtonText}}
.shadows{--accent:#9a7138;--edge:#d9c28c;--pale:#f4e9c9;--paper:#fffaf0}.shadows .art-fallback{inline-size:238px;max-inline-size:88%;block-size:150px}.shadow-sticker svg{width:96px;height:24px}
.odd-one-out{--accent:#a96848;--edge:#dfb799;--pale:#f7e6d5;--paper:#fff9f2}.odd-one-out .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.odd-one-out .card-info h3{font-size:21px}.odd-sticker svg{width:96px;height:24px}
.memory{--accent:#3d819b;--edge:#9fc5d2;--pale:#dfeef1;--paper:#f5fbfc}.memory .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.memory-sticker svg{width:92px;height:28px}
.blocks{--accent:#8a7146;--edge:#d0bf8e;--pale:#f0e9cf;--paper:#fffdf2}.blocks .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.blocks-sticker svg{width:92px;height:28px}
.missing-toy{--accent:#866397;--edge:#c6acd3;--pale:#eee2f2;--paper:#fcf8ff}.missing-toy .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.missing-sticker svg{width:92px;height:28px}
.bunny-home{--accent:#4b8973;--edge:#a6c9ac;--pale:#e3efda;--paper:#f9fcf2}.bunny-home .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.path-sticker svg{width:92px;height:28px}

.sorting{--accent:#a17842;--edge:#d5bd8e;--pale:#f1e8d0;--paper:#fffaf1}.sorting .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.sorting-sticker svg{width:92px;height:28px}

.balloons{--accent:#94637f;--edge:#ceb0c1;--pale:#f0e0e9;--paper:#fff8fc}.balloons .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.balloons-sticker svg{width:92px;height:28px}

.detective{--accent:#827044;--edge:#cbbd8d;--pale:#eae7cd;--paper:#fbfbf0}.detective .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.detective-sticker svg{width:92px;height:28px}

.band{--accent:#a2656d;--edge:#d8b0b5;--pale:#f4e2e4;--paper:#fff9f9}.band .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.band-sticker svg{width:92px;height:28px}

.positions{--accent:#6e8262;--edge:#b8c9a8;--pale:#e7eddc;--paper:#fcfcf4}.positions .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.positions-sticker svg{width:92px;height:28px}

.packing{--accent:#aa7162;--edge:#d7b49d;--pale:#f5e4d6;--paper:#fffaf4}.packing .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.packing-sticker svg{width:92px;height:28px}

.partners{--accent:#548b8b;--edge:#a6cdca;--pale:#e0f0e8;--paper:#f8fcf7}.partners .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.partners-sticker svg{width:92px;height:28px}

.colors{--accent:#9c6b55;--edge:#d5b494;--pale:#f4e8cd;--paper:#fffcf2}.colors .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.colors-sticker svg{width:92px;height:28px}

.sequence{--accent:#658459;--edge:#b5c89e;--pale:#e8eed5;--paper:#fcfdf4}.sequence .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.sequence-sticker svg{width:92px;height:28px}

.butterflies{--accent:#92677c;--edge:#d3b0c0;--pale:#f2e3e8;--paper:#fffbfc}.butterflies .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.butterflies-sticker svg{width:92px;height:28px}

.roads{--accent:#587d81;--edge:#a8c4c2;--pale:#e4eddf;--paper:#fbfcf3}.roads .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.roads-sticker svg{width:92px;height:28px}

.sizes{--accent:#9a754d;--edge:#d2bc94;--pale:#f0e7d1;--paper:#fffcf4}.sizes .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.sizes-sticker svg{width:92px;height:28px}

.fruit-puzzle{--accent:#7b8b52;--edge:#c1cd9a;--pale:#eef0d7;--paper:#fffdf3}.fruit-puzzle .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.fruit-puzzle-sticker svg{width:92px;height:28px}

.ice-cream{--accent:#a55b77;--edge:#d8adbf;--pale:#f5e3e9;--paper:#fff9fb}.ice-cream .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.ice-cream-sticker svg{width:92px;height:28px}

.builder{--accent:#987644;--edge:#d2bd91;--pale:#f1e8cf;--paper:#fffdf4}.builder .art-fallback{inline-size:244px;max-inline-size:88%;block-size:150px}.builder-sticker svg{width:92px;height:28px}