:root{--green:#9af044;--ink:#28331e;--wood:#925323;--tile:clamp(37px,10.2vw,48px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#79bf36;font-family:"Arial Rounded MT Bold","PingFang SC",sans-serif;color:var(--ink)}
button{font:inherit;touch-action:manipulation}
#app{position:relative;width:min(100vw,500px);height:100dvh;min-height:600px;margin:auto;overflow:hidden;background:var(--green) url('assets/pasture-v2.png') center/cover no-repeat;box-shadow:0 0 50px #31531b}
.topbar{height:72px;padding:max(13px,env(safe-area-inset-top)) 13px 0;display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:20}
.square-btn{width:38px;height:38px;border:3px solid #124f79;border-radius:7px;background:linear-gradient(#67c8ff,#1796e6);color:#fff;box-shadow:inset 0 0 0 2px #b8ecff,0 2px 0 #0c5a86}.square-btn svg{width:27px;height:27px;fill:#fff;stroke:#17658c;stroke-width:1.2}
.more-btn{width:58px;height:29px;margin-top:5px;border:0;border-radius:16px;background:#e9f5dd88;color:#fff;display:flex;align-items:center;justify-content:space-around;padding:0 8px}.more-btn span{letter-spacing:2px;font-size:13px}.more-btn i{display:block;width:17px;height:17px;border:2px solid #fff;border-radius:50%}
.date-badge{margin-top:3px;min-width:126px;text-align:center}.date-badge span{display:block;padding:5px 12px;border-radius:5px;background:#111;color:white;font-weight:900;font-size:15px;box-shadow:0 2px 0 #435a26}.date-badge small{font-size:19px;line-height:18px;font-weight:bold}
.status-row{position:absolute;top:75px;left:12px;right:12px;display:flex;justify-content:space-between;color:#3c672a;font-size:13px;font-weight:800;z-index:8}
.board{position:absolute;left:0;right:0;top:105px;height:calc(100% - 300px);z-index:4}
.tile{position:absolute;width:var(--tile);height:var(--tile);padding:2px;border:2px solid #6d7849;border-radius:5px;background:#f8f4cf;box-shadow:inset 0 0 0 2px #fffdf0,0 3px 0 #56663a,0 4px 5px #47622c66;transition:left .25s,top .25s,transform .18s,opacity .2s,filter .2s;cursor:pointer}
.tile svg{width:100%;height:100%;filter:drop-shadow(0 1px 0 #fff)}
.level-1{--tile:clamp(43px,12vw,56px)}.level-2{--tile:clamp(36px,10.1vw,47px)}
.tile.covered{filter:brightness(.58) saturate(.7);cursor:not-allowed}.tile.covered:after{content:"";position:absolute;inset:0;background:#34442240;border-radius:3px}
.tile.side.covered{background:repeating-linear-gradient(0deg,#758260 0 3px,#a5af8c 3px 6px);border-color:#586145}.tile.side.covered svg{opacity:0}.tile.side{box-shadow:inset 0 0 0 2px #fffdf0,0 2px 0 #56663a,0 3px 3px #2f411f88}
.tile.pop{transform:scale(1.24) rotate(3deg);opacity:0}.tile.selected{transform:translateY(6px);opacity:0}
.tray-wrap{position:absolute;left:8px;right:8px;bottom:105px;height:74px;background:#925627;border:3px solid #5e391e;box-shadow:inset 0 5px #b97837,inset 0 -4px #6f3f20,0 4px 6px #3e501f77;z-index:10}
.tray{position:absolute;inset:8px 8px 7px;display:grid;grid-template-columns:repeat(7,1fr);gap:1px;align-items:center}.tray:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(14.285% - 2px),#6d3f21 calc(14.285% - 2px) 14.285%);opacity:.4}
.tray-tile{position:relative;z-index:2;width:100%;aspect-ratio:1;max-height:52px;padding:2px;border:2px solid #6d7849;border-radius:4px;background:#f8f4cf;box-shadow:inset 0 0 0 2px white,0 2px #573d28;animation:drop .22s ease-out}.tray-tile svg{width:100%;height:100%}.tray-tile.matched{animation:match .36s forwards}
@keyframes drop{from{transform:translateY(-50px) scale(.7);opacity:.4}}@keyframes match{50%{transform:scale(1.18);filter:brightness(1.5)}to{transform:scale(0);opacity:0}}
.tray-rail{position:absolute;left:-5px;right:-5px;height:6px;border-radius:4px;background:#a85f29;border:2px solid #613b22}.rail-top{top:-5px}.rail-bottom{bottom:-5px}
.tools{position:absolute;left:32px;right:32px;bottom:max(13px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;z-index:12}.tool{position:relative;width:74px;height:70px;border:3px solid #166f98;border-radius:6px;background:linear-gradient(#63d7ff 0 62%,#1a94d0 62%);box-shadow:inset 0 0 0 2px #aaf0ff,0 3px #0a5c84;color:#fff;text-shadow:0 2px #165d71}.tool:disabled{filter:grayscale(1);opacity:.55}.tool-art{display:block;font-size:29px;line-height:33px;font-weight:900}.tool b{font-size:15px}.tool i{position:absolute;right:-7px;top:-10px;width:22px;height:22px;border-radius:50%;background:#111;border:2px solid white;font-style:normal;font-size:12px;line-height:18px}
.reserve{position:absolute;left:7px;bottom:184px;z-index:7;display:flex;gap:2px}.reserve .tray-tile{width:40px;cursor:pointer}
.toast{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.8);padding:12px 25px;border-radius:7px;background:#0a0a0ae8;color:#fff;font-size:25px;font-weight:900;opacity:0;pointer-events:none;transition:.2s;z-index:30;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.modal{position:absolute;inset:0;background:#14220fa8;display:grid;place-items:center;z-index:40;opacity:0;pointer-events:none;transition:.25s}.modal.show{opacity:1;pointer-events:auto}.paper-card{position:relative;width:min(82%,330px);padding:44px 24px 20px;text-align:center;background:#fff;border:4px solid #313735;border-radius:8px;box-shadow:inset 0 0 0 4px #e4e4df,0 8px 20px #0007}.ribbon{position:absolute;left:50%;top:-17px;transform:translateX(-50%);background:#111;color:#fff;border-radius:4px;padding:6px 23px;font-weight:900}.modal-x{position:absolute;right:-19px;top:-21px;width:39px;height:39px;border:3px solid white;border-radius:50%;background:#111;color:white;font-size:30px;line-height:29px}.sheep-mark svg{width:180px;height:88px}.sheep-mark path:not(.bolt){fill:#fff;stroke:#252525;stroke-width:4}.sheep-mark .bolt{fill:#ffd91f;stroke:#202020;stroke-width:4}.paper-card h1{font-size:27px;margin:3px 0 8px}.paper-card p{font-size:14px;line-height:1.65;color:#555}.primary{width:75%;padding:10px;border:3px solid #2a251e;border-radius:5px;background:#f01925;color:#fff;box-shadow:inset 0 0 0 2px #ff7b7b,0 3px #85131a;font-size:22px;font-weight:900}.paper-card small{display:block;margin-top:15px;color:#777}
@media (max-height:700px){.board{top:86px;height:calc(100% - 265px)}.topbar{height:58px}.status-row{top:60px}.tray-wrap{bottom:92px}.tools{bottom:8px}.tool{height:62px}.reserve{bottom:166px}}