/* Brush & Bond — cozy ASMR cat-grooming.
   Art direction: warm golden-hour grooming nook. Cream parchment, terracotta, sage, honey wood.
   Soft, tactile, hand-made. All art is CSS/Canvas; no asset files. */
:root{
  --cream:#fbf3e6;
  --parch:#fff8ee;
  --ink:#4a3b34;
  --ink-soft:#7a6657;
  --terra:#e08a5f;
  --terra-deep:#c96b44;
  --rose:#e58a9a;
  --sage:#8fb08a;
  --honey:#f0b860;
  --gold:#ffd98a;
  --calm:#8ec7c0;
  --warn:#ef9a52;
  --danger:#e8635a;
  --bg0:#3a2c28;
  --bg1:#2c211e;
  --shadow:0 18px 44px rgba(40,26,20,.5);
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:'Quicksand', ui-rounded, 'Segoe UI Rounded', 'Segoe UI', system-ui, sans-serif;
  color:var(--cream);
  background:
    radial-gradient(130% 110% at 50% -10%, #4d3a33 0%, #382923 55%, #241a17 100%) fixed;
  display:flex; align-items:center; justify-content:center;
  /* respect notch / home-indicator safe areas (viewport-fit=cover is set in index.html) */
  padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
          max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  min-height:100%;
  -webkit-user-select:none; user-select:none;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
button{ touch-action:manipulation; }   /* no double-tap-zoom delay on controls (Charter §3.8) */
.game{ width:100%; max-width:540px; }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================ HUD ============================ */
.hud{ display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.hud-cat{ display:flex; flex-direction:column; min-width:74px; line-height:1.05; }
.hud-name{ font-weight:900; font-size:1.04rem; letter-spacing:.01em; }
.hud-breed{ font-size:.6rem; opacity:.6; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.meters{ flex:1; display:flex; flex-direction:column; gap:5px; }
.meter{ display:flex; align-items:center; gap:7px; }
.meter-ico{ font-size:1rem; width:1.2em; text-align:center; }
.meter .bar{
  position:relative; flex:1; height:13px; border-radius:99px; overflow:hidden;
  background:rgba(0,0,0,.28); box-shadow:inset 0 1px 3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
}
.meter .fill{
  position:absolute; left:0; top:0; bottom:0; width:60%; border-radius:99px;
  transition:width .18s ease, background-color .3s ease;
}
.fill.tol{ background:linear-gradient(90deg,var(--sage),var(--calm)); }
.fill.tol.mid{ background:linear-gradient(90deg,var(--honey),var(--warn)); }
.fill.tol.low{ background:linear-gradient(90deg,var(--warn),var(--danger)); }
.fill.glo{ background:linear-gradient(90deg,#dcd3c2,var(--gold)); box-shadow:0 0 10px rgba(255,217,138,.5); }
.meter .thresh, .meter .goal{
  position:absolute; top:-2px; bottom:-2px; width:2px; background:rgba(255,255,255,.55);
  box-shadow:0 0 4px rgba(0,0,0,.5);
}
.meter-lbl{ font-size:.62rem; font-weight:800; opacity:.7; min-width:30px; text-align:right; letter-spacing:.02em; }
.meter.gloss .meter-lbl{ color:var(--gold); opacity:.9; }
.icon-btn{
  flex:none; width:44px; height:44px; border-radius:13px; font-size:1.05rem; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:var(--cream);
}
.icon-btn:active{ transform:translateY(1px); }

/* ============================ Stage ============================ */
.stage{
  position:relative; width:100%; aspect-ratio:4/3; border-radius:24px; overflow:hidden;
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.05);
  touch-action:none; cursor:default;
}
.stage.playing{ cursor:none; }
.stage.shake{ animation:flinch .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes flinch{
  0%,100%{ transform:translate(0,0);} 18%{ transform:translate(-7px,3px) rotate(-.3deg);}
  40%{ transform:translate(6px,-2px) rotate(.3deg);} 62%{ transform:translate(-4px,2px);} 82%{ transform:translate(3px,-1px);}
}

/* cozy nook */
.nook{ position:absolute; inset:0; }
.wall{
  position:absolute; inset:0;
  background:
    radial-gradient(95% 80% at 76% 22%, rgba(255,214,150,.30), transparent 58%),
    linear-gradient(#6f5346 0%, #5d4439 46%, #4c352c 100%);
}
.wall::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:30%;
  background:linear-gradient(#7a5a3f,#634428);
  box-shadow:inset 0 7px 12px rgba(0,0,0,.26), inset 0 2px 0 rgba(255,255,255,.07); }
.window{
  position:absolute; right:7%; top:8%; width:30%; height:34%; border-radius:10px 10px 7px 7px;
  background:linear-gradient(165deg,#ffe9b0,#ffc878 42%,#f2a07a 74%,#c98bb0 100%);
  box-shadow:0 0 44px 10px rgba(255,206,128,.40), inset 0 0 0 5px #7a5a3f, inset 0 0 0 7px rgba(0,0,0,.18);
}
.window::before,.window::after{ content:''; position:absolute; background:#7a5a3f; }
.window::before{ left:50%; top:4%; bottom:4%; width:5px; transform:translateX(-50%); }
.window::after{ top:50%; left:4%; right:4%; height:5px; transform:translateY(-50%); }
.window .sill{ position:absolute; left:-8%; right:-8%; bottom:-11%; height:11%; border-radius:4px;
  background:linear-gradient(#8a6646,#6b4a30); box-shadow:0 4px 8px rgba(0,0,0,.3); }
.sunbeam{
  position:absolute; right:10%; top:30%; width:52%; height:66%;
  background:linear-gradient(205deg, rgba(255,216,140,.26), transparent 62%);
  transform:skewX(-11deg); pointer-events:none; filter:blur(3px);
}
.shelf{ position:absolute; left:6%; top:14%; width:30%; height:7%;
  background:linear-gradient(#7a5a3f,#5f4329); border-radius:3px; box-shadow:0 6px 10px rgba(0,0,0,.3); }
.shelf>span{ position:absolute; bottom:100%; border-radius:3px 3px 0 0; }
.shelf .jar{ left:6%; width:16%; height:150%; border-radius:6px 6px 2px 2px;
  background:linear-gradient(#cfe6df,#a7ccc3); box-shadow:inset 0 4px 6px rgba(255,255,255,.4); }
.shelf .book{ width:8%; height:170%; }
.shelf .b1{ left:32%; background:#c96b44; transform:rotate(-4deg); }
.shelf .b2{ left:42%; background:#8fb08a; height:150%; }
.shelf .potplant{ right:6%; width:20%; height:175%;
  background:radial-gradient(circle at 50% 22%, #6fb36a 0 36%, transparent 38%),
             radial-gradient(circle at 30% 36%, #5fa15a 0 26%, transparent 28%),
             radial-gradient(circle at 70% 36%, #5fa15a 0 26%, transparent 28%),
             linear-gradient(transparent 56%, #d4794d 56%);
  border-radius:0 0 4px 4px; }
.garland{ position:absolute; left:0; right:0; top:5%; height:8%;
  background:radial-gradient(circle at 12% 0, var(--gold) 0 3px, transparent 4px) repeat-x;
  background-size:9% 100%; opacity:.85; filter:drop-shadow(0 0 5px rgba(255,217,138,.7)); }
.floor{ position:absolute; left:0; right:0; bottom:0; height:30%;
  background:
    repeating-linear-gradient(86deg, rgba(0,0,0,.05) 0 16px, rgba(255,255,255,.025) 16px 34px),
    linear-gradient(#8a6646,#6b4a30); }
.cushion{
  position:absolute; left:9%; right:9%; bottom:5%; height:21%; border-radius:50%;
  background:radial-gradient(circle at 50% 34%, #efb7a0 0%, #e29a86 50%, #c87a64 100%);
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.10), inset 0 6px 16px rgba(0,0,0,.18), 0 10px 22px rgba(0,0,0,.34);
}
.cushion::after{ content:''; position:absolute; inset:14% 8%; border-radius:50%;
  box-shadow:inset 0 0 0 3px rgba(120,70,55,.35); opacity:.5; }

.cat-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:5; display:block; touch-action:none; }

.hint{
  position:absolute; left:50%; bottom:8%; transform:translateX(-50%) translateY(8px);
  z-index:9; padding:7px 15px; border-radius:99px; font-weight:800; font-size:.82rem; white-space:nowrap;
  background:rgba(40,28,22,.72); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  box-shadow:0 5px 16px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.10);
  opacity:0; pointer-events:none; transition:opacity .35s ease, transform .35s ease;
}
.hint.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.hint b{ color:var(--gold); }

.warn-vignette{ position:absolute; inset:0; pointer-events:none; z-index:7; opacity:0;
  background:radial-gradient(120% 85% at 50% 45%, transparent 52%, rgba(232,99,90,.20));
  transition:opacity .2s ease; }
.warn-vignette.on{ opacity:1; }
.warn-vignette.crit{ opacity:1; animation:warnpulse .5s ease-in-out infinite alternate; }
@keyframes warnpulse{ from{ opacity:.55;} to{ opacity:1;} }
.vignette{ position:absolute; inset:0; pointer-events:none; z-index:7;
  box-shadow:inset 0 0 70px 16px rgba(0,0,0,.34); border-radius:24px; }

/* ============================ Tool dock ============================ */
.dock{ display:flex; gap:8px; margin-top:9px; }
.tool{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer;
  padding:8px 4px 6px; border-radius:15px; color:var(--cream);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10); transition:transform .12s ease, background-color .15s, box-shadow .15s;
  min-height:54px;
}
.tool .t-ico{ font-size:1.5rem; line-height:1; filter:drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.tool .t-name{ font-size:.66rem; font-weight:800; letter-spacing:.02em; opacity:.85; }
.tool:active{ transform:translateY(1px); }
.tool[aria-pressed="true"]{
  background:linear-gradient(rgba(240,184,96,.30),rgba(224,138,95,.22));
  border-color:rgba(255,217,138,.55);
  box-shadow:inset 0 0 0 1px rgba(255,217,138,.5), 0 5px 14px rgba(224,138,95,.28);
}
.tool[aria-pressed="true"] .t-name{ opacity:1; color:var(--gold); }

.foot{ text-align:center; font-size:.7rem; opacity:.45; margin-top:9px; font-weight:600; }

/* ============================ Overlays ============================ */
.overlay{
  position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background:rgba(30,20,16,.55); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  opacity:0; pointer-events:none; transition:opacity .28s ease; padding:14px;
}
.overlay.active{ opacity:1; pointer-events:auto; }
.panel{
  width:100%; max-width:360px; text-align:center; color:var(--ink);
  background:linear-gradient(180deg,var(--parch),var(--cream)); border-radius:24px; padding:20px 19px;
  box-shadow:0 22px 54px rgba(20,12,8,.55); border:3px solid #ffe6c2;
  max-height:calc(100% - 8px); overflow-y:auto;
}
.overlay.active .panel{ animation:panelin .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes panelin{ from{ transform:translateY(14px) scale(.93); opacity:0;} to{ transform:none; opacity:1;} }
.logo{ font-size:1.9rem; font-weight:900; color:var(--terra-deep); line-height:1.08; letter-spacing:-.01em; }
.logo span{ font-size:1.5rem; }
.tag{ margin:6px 0 10px; font-weight:600; color:var(--ink-soft); font-size:.92rem; }
.rules{ list-style:none; padding:0; margin:0 auto 12px; display:inline-block; text-align:left; }
.rules li{ margin:6px 0; font-weight:600; font-size:.86rem; color:var(--ink); }
.rules b{ color:var(--terra-deep); }
.rules .emo{ display:inline-block; width:1.7rem; font-size:1.05rem; }

/* cat carousel */
.carousel{ display:flex; align-items:center; justify-content:center; gap:6px; margin:2px 0 8px; }
.carousel-arrow{
  flex:none; width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:1.6rem; line-height:1;
  font-weight:900; color:var(--terra-deep); background:#fff1df; border:2px solid #ffe0c2;
  box-shadow:0 3px 0 #e8c69e; display:flex; align-items:center; justify-content:center; padding-bottom:3px;
}
.carousel-arrow:active{ transform:translateY(2px); box-shadow:0 1px 0 #e8c69e; }
.carousel-stage{
  position:relative; width:184px; height:150px; border-radius:18px; overflow:hidden;
  background:radial-gradient(circle at 50% 38%, #fff6e7, #f3e1c8);
  box-shadow:inset 0 0 0 2px rgba(224,138,95,.25), inset 0 -8px 16px rgba(0,0,0,.07);
}
.portrait-canvas{ width:100%; height:100%; display:block; }
.lock-overlay{
  position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:rgba(40,28,22,.62); color:#fff8ee; backdrop-filter:blur(2px);
}
.lock-overlay.on{ display:flex; }
.lock-overlay span{ font-size:2rem; }
.lock-overlay small{ font-size:.72rem; font-weight:700; max-width:80%; line-height:1.25; }

.cat-info{ min-height:74px; }
.ci-head{ display:flex; align-items:baseline; justify-content:center; gap:8px; }
.ci-head b{ font-size:1.25rem; color:var(--terra-deep); }
.diff{ font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:2px 8px; border-radius:99px; background:#fdeede; color:var(--ink-soft); }
.diff.d1{ color:#5a8a4f; background:#e9f3df; }
.diff.d2{ color:#9a7a2a; background:#f6eccb; }
.diff.d3{ color:#b5552e; background:#f8e0cf; }
.diff.d4{ color:#b53b3b; background:#f8d6d2; }
.blurb{ margin:6px 14px 8px; font-size:.82rem; font-weight:600; color:var(--ink-soft); line-height:1.32; min-height:2.1em; }
.ci-stats{ display:flex; justify-content:center; gap:14px; font-weight:800; font-size:.9rem; }
.ci-stats .bond{ color:var(--rose); }
.ci-stats .best{ color:var(--honey); }

.btn{
  margin-top:6px; font-family:inherit; font-size:1.05rem; font-weight:800; color:#fff;
  background:linear-gradient(var(--terra),var(--terra-deep)); border:none; border-radius:16px; padding:13px 30px;
  cursor:pointer; box-shadow:0 6px 0 #a85636, 0 11px 20px rgba(201,107,68,.4); letter-spacing:.01em;
}
.btn:active{ transform:translateY(3px); box-shadow:0 3px 0 #a85636; }
.btn.ghost{ background:#fff1df; color:var(--terra-deep); box-shadow:0 6px 0 #e8c69e, 0 10px 16px rgba(0,0,0,.12); }
.btn.ghost:active{ box-shadow:0 3px 0 #e8c69e; }
.dots{ display:flex; justify-content:center; gap:6px; margin-top:12px; }
.dots i{ width:7px; height:7px; border-radius:50%; background:#e3cdb0; transition:transform .2s, background-color .2s; }
.dots i.on{ background:var(--terra); transform:scale(1.35); }

/* result */
.badge{
  display:none; margin:6px auto 2px; width:max-content; font-weight:900; font-size:.78rem; letter-spacing:.12em;
  padding:5px 16px; border-radius:99px; color:#7a4a18;
  background:linear-gradient(#ffe7a8,#ffce6b); box-shadow:0 4px 12px rgba(240,184,96,.5), inset 0 1px 0 rgba(255,255,255,.6);
  animation:badgepop .5s cubic-bezier(.34,1.56,.64,1);
}
.badge.show{ display:block; }
@keyframes badgepop{ from{ transform:scale(.4) rotate(-8deg); opacity:0;} to{ transform:none; opacity:1;} }
.rank{ font-size:1.05rem; font-weight:800; color:#c2607a; margin:6px 0; }
.scoreboard{ display:flex; gap:8px; margin-top:8px; }
.scoreboard>div{ flex:1; background:#fff1e2; border:2px solid #ffe0c2; border-radius:13px; padding:8px 4px; }
.scoreboard .lbl{ display:block; font-size:.54rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; opacity:.6; }
.scoreboard b{ font-size:1.18rem; color:var(--ink); }
.bond-gain{ margin-top:10px; font-weight:800; color:var(--rose); font-size:.92rem; min-height:1.1em; }
.bond-gain .hearts{ letter-spacing:2px; }
.newhigh{ margin-top:6px; font-weight:900; color:var(--terra-deep); display:none; }
.unlock-msg{ margin-top:6px; font-weight:800; color:var(--sage); display:none; font-size:.92rem; }
.unlock-msg.show, .newhigh.show{ display:block; }
.result-btns{ display:flex; gap:9px; margin-top:14px; }
.result-btns .btn{ flex:1; margin-top:0; }

/* cursor tool ghost (rendered on canvas, but hide native) */
.stage.grabbing{ cursor:none; }

@media (max-width:400px){
  .logo{ font-size:1.6rem; }
  .hud-name{ font-size:.92rem; }
  .tool .t-ico{ font-size:1.3rem; }
  .blurb{ font-size:.78rem; }
  .carousel-stage{ width:160px; height:132px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
  .stage.shake{ animation:none; }
  .warn-vignette.crit{ animation:none; }
}