/* Tap Garage — big targets, calm colors, the car never moves on
   the screen; only the tapped part answers. Adapted from Tap
   Grove's proven stylesheet (house pattern, U-1 contrast values). */
:root{ --ink:#17251a; --paper:#f6f9ee; --card:#ffffff; --accent:#247a38; --accent2:#1971c2; --muted:#4f6154; }
*{ 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); }
body:has(#homeScreen:not([hidden])){ background:radial-gradient(120% 60% at 50% 0%, #ffffff 0%, var(--paper) 55%); }
.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; }
.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{ 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); }
.expTag{ font-size:.72rem; font-weight:700; color:#a33; vertical-align:super; margin-left:6px; }
.holdTrack{ width:120px; height:4px; margin:2px auto 0; }
#holdFill{ display:block; height:100%; width:0%; background:rgba(36,122,56,.35); pointer-events:none; }
#versionTag{ touch-action:none; user-select:none; -webkit-user-select: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); min-height:170px; justify-content:center; text-align:center; }
button.tile{ cursor:pointer; }
button.tile:active{ transform:scale(.97); }
.tile img{ width:110px; height:110px; object-fit:contain; pointer-events:none; }
.soonTile{ color:var(--muted); background:repeating-linear-gradient(45deg,#fdfdf8 0 18px,#f1f3ea 18px 36px); box-shadow:none; border:3px dashed #c9d4c6; font-size:1.05rem; cursor:default; }
.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; }
/* The Garage: one big scene; the car's parts are transparent tap
   overlays pinned over the drawn scene — the drawing never shifts. */
.carStage{ margin-top:12px; border-radius:22px; background:var(--card); box-shadow:0 3px 10px rgba(0,0,0,.09); padding:10px; }
.carWrap{ position:relative; width:100%; }
.carWrap svg{ display:block; width:100%; height:auto; }
.partHot{ position:absolute; background:transparent; border:0; border-radius:24px; cursor:pointer; padding:0; margin:0; -webkit-tap-highlight-color:transparent; }
.partHot:focus-visible{ outline:4px solid var(--accent2); outline-offset:2px; }
.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,.07); }
.setupBlock h3{ margin-top:4px; }
.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; }
.recState.silent{ background:#f3e2c2; color:#7a5410; }
.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; }
/* her surfaces never offer text selection (family rule). */
.tile,.partHot{ user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
/* Part answers — small, contingent, only ever caused by her tap.
   Transform/opacity only, on the drawn group itself. */
@keyframes tgNod{ 0%,100%{ transform:translateY(0); } 35%{ transform:translateY(10px); } }
@keyframes tgSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes tgSwing{ 0%,100%{ transform:rotate(0deg); } 30%{ transform:rotate(-7deg); } 70%{ transform:rotate(3deg); } }
@keyframes tgFlash{ 0%,100%{ opacity:1; } 50%{ opacity:.15; } }
.anim-nod{ animation:tgNod .8s ease; }
.anim-spin{ animation:tgSpin .9s linear; }
.anim-swing{ animation:tgSwing 1s ease; }
.anim-flash{ animation:tgFlash .9s ease; }
/* Reduced motion: nothing animates; state changes stay instant.
   The answer still happens — the sound and the part's still
   response — only the movement is stilled. */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
  .bigbtn:active,button.tile:active{ transform:none !important; }
}