:root{--cream:#fff7e7;--wood:#6e3f1e;--wood2:#3f2412;--green:#558f2f;--gold:#e0a52f;--shadow:0 8px 20px rgba(55,34,14,.22)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#d8ecff;color:#3b2a1d}button{font:inherit;touch-action:manipulation}body{display:flex;justify-content:center}.app-shell{width:min(100vw,560px);min-height:100vh;background:linear-gradient(#8fd0ff 0 25%,#b9df7f 25% 58%,#8fc457 58% 100%);position:relative;overflow:hidden;padding-bottom:max(8px,env(safe-area-inset-bottom))}.topbar{display:grid;grid-template-columns:48px 1fr 1.5fr 1fr;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 12px 6px;align-items:center;position:relative;z-index:4}.round,.pill,.level-card{border:3px solid var(--wood2);background:linear-gradient(#8b5b2e,#5f371d);color:#fff;box-shadow:var(--shadow)}.round{width:48px;height:48px;border-radius:50%;font-weight:900;font-size:18px}.pill{border-radius:999px;padding:8px 10px;font-weight:800;text-align:center}.level-card{border-radius:14px;padding:7px 10px;text-align:center}.level-card strong{font-size:15px}.level-card #stars{color:#ffd64f;letter-spacing:2px}.mission-row{position:relative;z-index:4;padding:0 14px 2px;display:flex;align-items:center;justify-content:space-between;gap:8px}.mission{border:2px solid #5a341c;border-radius:999px;background:#fff3c2;color:#69431f;padding:7px 11px;font-weight:900;box-shadow:0 3px 0 #d3b36e}.best{font-size:12px;font-weight:900;color:#4f3d28;background:#ffffffa8;padding:5px 8px;border-radius:999px}.scene{min-height:455px;position:relative;padding:0 16px}.scene:before{content:"";position:absolute;inset:auto -10% 0;height:50%;background:linear-gradient(#92c95d,#6da443);clip-path:ellipse(70% 55% at 50% 60%)}.sun{position:absolute;right:50px;top:35px;width:58px;height:58px;border-radius:50%;background:#ffe36b;box-shadow:0 0 28px #fff1a5}.cloud{position:absolute;width:80px;height:25px;border-radius:99px;background:#ffffffb9}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.cloud:before{width:35px;height:35px;left:15px;bottom:5px}.cloud:after{width:45px;height:45px;right:9px;bottom:2px}.cloud-a{top:50px;left:38px}.cloud-b{top:115px;right:60px;transform:scale(.72)}.barn{position:absolute;left:20px;top:150px;width:120px;height:112px;background:#b74935;border:5px solid #7c291d;border-radius:4px;opacity:.55}.barn:before{content:"";position:absolute;left:-14px;top:-55px;border-left:72px solid transparent;border-right:72px solid transparent;border-bottom:58px solid #6b2f20}.barn:after{content:"✕";position:absolute;left:38px;bottom:8px;width:42px;height:60px;background:#6a2f20;color:#fff;font-size:36px;line-height:58px;text-align:center;border:4px solid #fff}.silo{position:absolute;right:30px;top:175px;width:58px;height:120px;border-radius:30px 30px 8px 8px;background:#c4c9c7;opacity:.5;border:4px solid #8c9690}.board-wrap{position:relative;z-index:2;height:445px;display:flex;justify-content:center;align-items:center}.board{position:relative;width:420px;height:100%;transform-origin:top center}.tile{position:absolute;width:64px;height:70px;border-radius:12px;background:linear-gradient(#fffef9,#f2ead8);border:2px solid #d4c5a8;box-shadow:0 7px 0 #c6b48f,0 10px 14px rgba(0,0,0,.22);display:grid;place-items:center;font-size:35px;cursor:pointer;transition:.15s transform,.15s filter,.15s opacity;user-select:none}.tile:active{transform:translateY(-3px) scale(.97)}.tile.blocked{filter:brightness(.72) saturate(.75);cursor:not-allowed}.tile.hint{outline:4px solid #ffe354;animation:pulse .65s ease-in-out infinite alternate}.tray-wrap{position:relative;z-index:3;padding:0 16px}.tray{height:80px;padding:8px;background:linear-gradient(#5c351c,#3c2314);border:4px solid #2f1b0f;border-radius:16px;display:grid;grid-template-columns:repeat(7,1fr);gap:5px;box-shadow:var(--shadow)}.slot{border:2px dashed rgba(255,255,255,.35);border-radius:10px;display:grid;place-items:center;min-width:0}.slot.filled{background:linear-gradient(#fffef9,#efe5cf);border:2px solid #d1c0a0;font-size:28px;box-shadow:inset 0 -4px 0 #c5b08b}.tray-caption{text-align:center;font-weight:900;color:#fff;text-shadow:0 2px 3px #2f1b0f;padding:6px 0 4px}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:6px 14px 12px}.control{position:relative;border:3px solid #3c2417;border-radius:16px;background:linear-gradient(#9b6332,#6a3e21);color:#fff;padding:9px 5px;font-weight:900;box-shadow:var(--shadow);font-size:21px}.control span{display:block;font-size:12px;margin-top:2px}.control small{position:absolute;right:7px;top:-8px;background:#4e982f;border:2px solid #fff;border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;font-size:11px}.modal{position:fixed;inset:0;background:rgba(29,24,18,.6);display:grid;place-items:center;z-index:10;padding:24px}.hidden{display:none!important}.modal-card{position:relative;width:min(92vw,390px);max-height:82vh;overflow:auto;background:var(--cream);border:4px solid var(--wood2);border-radius:22px;text-align:center;padding:24px;box-shadow:0 18px 50px rgba(0,0,0,.35)}.close{position:absolute;right:10px;top:7px;border:0;background:transparent;font-size:28px;color:#69431f}.modal-card h2{font-size:31px;margin:4px 0 8px}.modal-card p{line-height:1.4}.modal-card>button:not(.close){width:100%;border:0;border-radius:12px;padding:13px;margin-top:8px;background:var(--green);color:#fff;font-weight:900;font-size:16px}.modal-card>button.secondary{background:#83532b}.big-stars{font-size:44px;color:#e7aa23;letter-spacing:4px}.reward{font-size:24px;font-weight:900;background:#fff0b5;padding:16px;border-radius:14px;margin:12px 0}.menu-list{display:grid;gap:9px;margin:14px 0}.menu-list button{border:2px solid #b8915d;background:#fffaf0;padding:12px;border-radius:12px;font-weight:900;color:#5e3a20}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0}.level-dot{aspect-ratio:1;border-radius:50%;border:3px solid #6f431f;background:linear-gradient(#f5c653,#d69020);color:#543015;display:grid;place-items:center;align-content:center;box-shadow:0 4px 0 #8a581e}.level-dot strong{font-size:18px}.level-dot span{font-size:8px;color:#fff}.level-dot:disabled{filter:grayscale(1);opacity:.55}.level-dot:not(:disabled):active{transform:translateY(2px);box-shadow:0 2px 0 #8a581e}@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.08)}}
@media(max-width:440px){.board{transform:scale(.88);margin-top:10px}.scene{min-height:410px}.board-wrap{height:405px}.topbar{grid-template-columns:44px 1fr 1.35fr 1fr;padding-left:9px;padding-right:9px}.round{width:44px;height:44px}.pill{font-size:12px;padding:7px}.controls{padding-bottom:8px}.mission-row{padding-inline:10px}}
@media(max-width:375px){.board{transform:scale(.80)}.scene{min-height:380px}.board-wrap{height:375px}.tile{font-size:32px}.tray{height:72px}.slot.filled{font-size:24px}}

.progress{position:relative;z-index:3;padding:0 18px 4px;color:#fff;text-shadow:0 1px 2px #3b2818;font-size:11px;font-weight:900}.progress>div:first-child{display:flex;justify-content:space-between;margin-bottom:4px}.progress-track{height:9px;border-radius:99px;background:#4b2c19;border:2px solid #342012;overflow:hidden}.progress-track i{display:block;height:100%;width:0;background:#ffe05c;transition:width .25s}.challenge-card{background:#fff0c4;border:2px solid #d3aa61;border-radius:15px;padding:15px;margin:12px 0}.challenge-card strong{font-size:20px}.challenge-card span{font-weight:900;color:#568b31}.mission-row{justify-content:flex-start}.mission-row .best{margin-left:auto}@media(max-width:390px){.mission{font-size:11px;padding:6px 8px}}

.tile img,.slot img{width:82%;height:82%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 1px rgba(0,0,0,.12))}
.tile:not(.blocked):hover{transform:translateY(-3px)}
.slot.filled{animation:slotIn .16s ease-out}
@keyframes slotIn{from{transform:scale(.7);opacity:.2}to{transform:scale(1);opacity:1}}
.toast{position:fixed;left:50%;bottom:138px;transform:translateX(-50%);z-index:20;background:#3d2515;color:#fff;border:3px solid #f7d77b;border-radius:999px;padding:10px 18px;font-weight:900;box-shadow:0 8px 24px #0005;animation:toastIn .2s ease-out}
@keyframes toastIn{from{transform:translate(-50%,12px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.home-screen{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;background:
linear-gradient(#8ed2ff 0 45%,#8dc85b 45% 100%)}
.home-screen:before{content:"";position:absolute;inset:auto -15% 0;height:42%;background:#6fa844;clip-path:ellipse(65% 50% at 50% 65%)}
.home-logo,.home-art,.home-screen p,.play-btn,.home-secondary,.home-screen small{position:relative;z-index:2}
.home-logo{padding:18px 28px 14px;border-radius:22px;background:linear-gradient(#7d4b25,#563018);border:5px solid #38200f;box-shadow:0 12px 0 #3e2414,0 20px 35px #0004;transform:rotate(-1deg)}
.home-logo span{display:block;font-size:42px;line-height:.9;color:#eff0d2;font-weight:1000;letter-spacing:2px;text-shadow:0 3px 0 #304d21}
.home-logo strong{display:block;font-size:48px;line-height:1;color:#ffd66a;text-shadow:0 3px 0 #8b3c21}
.home-art{font-size:56px;margin:30px 0 8px;filter:drop-shadow(0 5px 2px #0002)}
.home-art span{font-size:48px}
.home-screen p{font-weight:900;color:#4d331c;text-shadow:0 1px #fff9;margin:0 0 22px}
.play-btn,.home-secondary{width:min(78%,320px);border-radius:18px;font-weight:1000;letter-spacing:1px}
.play-btn{font-size:25px;padding:15px;border:4px solid #315b1d;background:linear-gradient(#72b94a,#4c8e2d);color:#fff;box-shadow:0 7px 0 #315b1d}
.home-secondary{margin-top:14px;padding:11px;border:3px solid #6c431f;background:#fff3cc;color:#63401f;box-shadow:0 5px 0 #cba85e}
.home-screen small{margin-top:16px;background:#ffffffb5;padding:6px 11px;border-radius:999px;font-weight:900}
.tutorial{display:grid;grid-template-columns:38px 1fr;gap:10px;text-align:left;align-items:center;margin:15px 0}
.tutorial div{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e3ad39;color:white;font-weight:1000;border:2px solid #936019}
.tutorial p{margin:4px 0}

.tile{touch-action:none;transition:transform .14s ease,filter .14s ease,opacity .14s ease}
.tile.dragging{transition:none;z-index:999!important;filter:drop-shadow(0 8px 8px rgba(0,0,0,.28));cursor:grabbing}
.tile:not(.blocked){cursor:grab}
.quick-actions{position:relative;z-index:3;display:grid;grid-template-columns:1.35fr .85fr;gap:8px;padding:4px 18px 8px}
.quick-btn{min-height:42px;border-radius:13px;border:3px solid #5b351c;background:#f8e3aa;color:#59351d;font-weight:900;box-shadow:0 3px 0 #8a5a2f;padding:6px 10px}
.quick-btn small{display:block;font-size:9px;font-weight:800;opacity:.72}
@media(max-width:380px){.quick-actions{padding-left:12px;padding-right:12px}.quick-btn{font-size:11px}}

.animal-fact{display:flex;gap:12px;align-items:center;text-align:left;background:#fff2c9;border:2px solid #d3aa61;border-radius:16px;padding:12px;margin:14px 0 4px}.animal-fact img{width:64px;height:64px;object-fit:contain;flex:0 0 64px}.animal-fact strong{color:#5f391d}.animal-fact p{margin:5px 0 0;font-size:13px;line-height:1.35}

.quick-actions.single{grid-template-columns:1fr}.quick-actions.single .quick-btn{max-width:260px;width:100%;margin:0 auto}

.tile img,.slot img{width:92%;height:92%;object-fit:cover;border-radius:9px;filter:none}
.tile{background:#efe6d2;border-color:#8b5c32;box-shadow:0 4px 0 #5f3a20,0 6px 10px rgba(0,0,0,.24)}
.slot img{border-radius:8px}
.animal-fact img{border-radius:12px;object-fit:cover}

.tile img,.slot img{
  width:91%;
  height:91%;
  object-fit:cover;
  border-radius:11px;
  filter:none;
}
.animal-fact img{
  border-radius:13px;
  object-fit:cover;
}
.fact-sound-note{
  margin-top:7px!important;
  font-size:12px!important;
  font-weight:800;
  color:#6a451f;
}
.controls{
  grid-template-columns:1fr 1fr;
}

.version-badge{margin-top:7px!important;font-size:10px!important;opacity:.7}

.tile{
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
}
.tile img{
  -webkit-user-drag:none;
  pointer-events:none;
}
.tile:not(.blocked){touch-action:manipulation}
.tile.dragging{touch-action:none}

.scene:before,.sun,.cloud,.barn,.silo{pointer-events:none!important}
.board-wrap,.board{pointer-events:auto!important}
.tile{pointer-events:auto!important;touch-action:manipulation!important;z-index:auto}
.tile.dragging{touch-action:none!important}
.tile img{pointer-events:none!important}

@media (hover:hover) and (pointer:fine){
  .tile:not(.blocked):hover{
    outline:3px solid rgba(255,225,84,.9);
    outline-offset:2px;
  }
}

.board-status{position:absolute;top:4px;right:18px;z-index:50;background:rgba(255,255,255,.88);color:#51331c;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:900;pointer-events:none}
.tile{pointer-events:auto!important;touch-action:auto!important}
.tile:not(:disabled){cursor:pointer!important}
.tile:disabled{cursor:not-allowed!important;opacity:.72}
.tile:not(:disabled):hover{outline:4px solid #ffe15a!important;outline-offset:2px}

.click-debug{
  position:absolute;
  top:32px;
  right:18px;
  z-index:60;
  background:rgba(255,255,255,.92);
  color:#51331c;
  border-radius:999px;
  padding:4px 8px;
  font-size:10px;
  font-weight:900;
  pointer-events:none;
}

.tile.dragging{
  z-index:999!important;
  transition:none!important;
  cursor:grabbing!important;
  filter:drop-shadow(0 10px 10px rgba(0,0,0,.3))!important;
}
.tile:not(:disabled){cursor:grab}

.reward-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:12px 0}
.reward-day{display:flex;flex-direction:column;gap:3px;align-items:center;padding:7px 3px;border-radius:10px;background:#fff3cf;font-size:9px;text-align:center}
.today-reward{outline:3px solid #e9a52e;background:#fff0b0}
.claimed-reward{opacity:.7}
@media(max-width:520px){.reward-calendar{grid-template-columns:repeat(4,1fr)}}

.tile.snapping-back{
  transition:transform .20s ease-out!important;
}

.tile.final-tile{
  outline:4px solid #ffe15a!important;
  outline-offset:2px;
  cursor:pointer!important;
  filter:none!important;
}

.tile{pointer-events:auto!important}
.tile:not(:disabled){cursor:grab!important}

#board{pointer-events:auto!important}
#board .tile{pointer-events:auto!important;user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none!important}
.board::before,.board::after{pointer-events:none!important}

.tile.peek-through{
  opacity:.30!important;
  pointer-events:none!important;
  filter:none!important;
}
.tile.snapping-back{
  transition:transform .20s ease-out!important;
}

.tile.match-ready{
  outline:4px solid #ffd84f!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.75),0 5px 14px rgba(0,0,0,.28)!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  opacity:1!important;
}

.tile.match-ready{
  cursor:pointer!important;
  touch-action:manipulation!important;
}