/* Tap Grove — big targets, calm colors, nothing moves on the shelf. */
:root{ --ink:#17251a; --paper:#f6f9ee; --card:#ffffff; --accent:#2f9e44; --accent2:#1971c2; --muted:#6b7a6e; --wing:#fff4e0; --wingInk:#5b3a12; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--paper); color:var(--ink); min-height:100vh; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.screen{ max-width:860px; margin:0 auto; padding:14px 14px 30px; }
[hidden]{ display:none !important; }
.card{ background:var(--card); border-radius:18px; padding:22px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.stamp{ font-weight:700; letter-spacing:.04em; font-size:.85rem; color:#a33; }
.bigbtn{ font:inherit; font-size:1.15rem; font-weight:700; border:0; border-radius:14px; padding:14px 22px; background:var(--accent); color:#fff; cursor:pointer; min-height:56px; }
.bigbtn.small{ font-size:1rem; padding:10px 16px; min-height:48px; }
.bigbtn:active{ transform:scale(.97); }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.row.center{ justify-content:center; }
.note{ color:var(--muted); font-size:.95rem; line-height:1.45; }
select,input[type=number],input[type=password],input[type=text]{ font:inherit; padding:10px; border-radius:10px; border:2px solid #c9d4c6; background:#fff; }
.homeHead{ display:flex; justify-content:center; padding:8px 0 4px; }
#appName{ position:relative; overflow:hidden; font-size:1.9rem; font-weight:800; padding:12px 26px; border-radius:16px; background:var(--card); box-shadow:0 2px 8px rgba(0,0,0,.07); user-select:none; -webkit-user-select:none; touch-action:none; cursor:default; }
.expTag{ font-size:.72rem; font-weight:700; color:#a33; vertical-align:super; margin-left:6px; }
#holdFill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:rgba(47,158,68,.25); pointer-events:none; }
.shelf{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin-top:18px; }
.tile{ font:inherit; border:0; border-radius:22px; background:var(--card); box-shadow:0 3px 10px rgba(0,0,0,.09); padding:18px 10px 14px; display:flex; flex-direction:column; align-items:center; gap:10px; font-size:1.25rem; font-weight:800; color:var(--ink); cursor:pointer; min-height:170px; justify-content:center; }
.tile img{ width:92px; height:92px; object-fit:contain; pointer-events:none; }
.tile:active{ transform:scale(.97); }
.wingDoor{ background:var(--wing); color:var(--wingInk); border:3px dashed #e8a13a; }
.doorLetters{ font-size:3rem; font-weight:900; line-height:1; }
.versionTag{ text-align:center; color:var(--muted); font-size:.78rem; margin-top:26px; }
.gameHead,.setupHead{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.gameHead h2,.setupHead h2{ margin:6px 0; font-size:1.5rem; }
.gardenGrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px; margin-top:16px; }
.gardenItem{ border:0; border-radius:22px; background:var(--card); box-shadow:0 3px 10px rgba(0,0,0,.09); padding:16px; cursor:pointer; min-height:150px; }
.gardenItem img{ width:104px; height:104px; object-fit:contain; pointer-events:none; }
.gardenItem.playing{ animation:bounce .5s ease; }
@keyframes bounce{ 0%{transform:scale(1)} 35%{transform:scale(1.12) rotate(-2deg)} 100%{transform:scale(1)} }
.wiggle{ animation:wiggle .35s ease; }
@keyframes wiggle{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
.celebrate{ animation:celebrate .6s ease; }
@keyframes celebrate{ 0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }
.missingStage,.patternRow{ display:flex; gap:14px; justify-content:center; align-items:center; margin:26px 0 8px; min-height:130px; flex-wrap:wrap; }
.stageItem,.patternItem,.slot{ width:118px; height:118px; border-radius:20px; background:var(--card); box-shadow:0 2px 8px rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; }
.stageItem img,.patternItem img,.choice img{ width:92px; height:92px; object-fit:contain; pointer-events:none; }
.stageItem.gone img{ opacity:.14; filter:grayscale(1); }
.stageItem.gone{ outline:4px dashed #adb5bd; outline-offset:-4px; box-shadow:none; background:transparent; }
.slot{ outline:4px dashed var(--accent); outline-offset:-4px; background:#e9f9ee; animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{outline-color:var(--accent)} 50%{outline-color:#a9e5b5} }
.stars{ text-align:center; font-size:2rem; color:#e8a13a; min-height:2.4rem; }
.choiceRow{ display:flex; gap:16px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.choice{ border:0; border-radius:22px; background:var(--card); box-shadow:0 3px 10px rgba(0,0,0,.1); padding:14px; cursor:pointer; min-width:118px; min-height:118px; font:inherit; }
.choice:active{ transform:scale(.96); }
.wingScreen{ background:linear-gradient(180deg,#fff8ea,var(--paper)); border-radius:18px; }
.wingNote{ text-align:center; color:var(--wingInk); font-size:1.1rem; }
.wingTile{ background:#fffdf6; }
.letterGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:12px; margin-top:14px; }
.letterBtn{ font:inherit; font-size:2.1rem; font-weight:900; border:0; border-radius:18px; background:var(--card); box-shadow:0 2px 8px rgba(0,0,0,.09); min-height:76px; cursor:pointer; color:var(--wingInk); }
.letterBtn:active{ transform:scale(.94); }
.wallBig{ text-align:center; font-size:6rem; font-weight:900; min-height:7.5rem; color:var(--wingInk); }
.findTarget{ text-align:center; font-size:4.2rem; font-weight:900; min-height:5.4rem; color:var(--wingInk); }
.letterChoices .choice{ font-size:3rem; font-weight:900; color:var(--wingInk); display:flex; align-items:center; justify-content:center; }
.modeBtn{ background:#a8b8a5; }
.modeBtn.active{ background:var(--accent2); }
.gateOverlay{ position:fixed; inset:0; background:rgba(10,20,10,.55); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; }
.gateCard{ background:#fff; border-radius:18px; padding:22px; max-width:420px; width:100%; }
.gateQ{ font-size:2rem; font-weight:900; text-align:center; }
.gateMsg{ color:#a33; min-height:1.2em; }
.setupBlock{ background:var(--card); border-radius:16px; padding:16px 18px; margin-top:16px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.recGroup h4{ margin:16px 0 6px; }
.recRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:8px 0; border-bottom:1px solid #eef2ea; }
.recRow .recLabel{ font-weight:700; min-width:110px; font-size:1.1rem; }
.recState{ font-size:.85rem; font-weight:700; padding:3px 10px; border-radius:999px; }
.recState.family{ background:#d8f5de; color:#1d6b31; }
.recState.device{ background:#e9ece9; color:#5c6a5e; }
.recRow button{ font:inherit; border:0; border-radius:10px; padding:9px 14px; background:#e6efe4; cursor:pointer; font-weight:700; min-height:44px; }
.recRow button.recording{ background:#ffc9c9; }
.fileLabel{ display:inline-flex; align-items:center; cursor:pointer; }