:root{
  --orange:#ff8a1f; --orange-d:#e0640b; --ink:#4a2c6b; --cream:#fff8ec;
}
*{box-sizing:border-box}
html,body{
  margin:0; height:100%; overflow:hidden; background:#8fd3ff;
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--ink);
  -webkit-user-select:none; user-select:none; touch-action:none;
  -webkit-tap-highlight-color:transparent; overscroll-behavior:none;
}
canvas{display:block}
#bg{position:fixed; inset:0; width:100vw; height:100vh}
#gl{position:fixed; inset:0}
#gl canvas{width:100%; height:100%; cursor:crosshair}
#labels,#fx{position:fixed; inset:0; pointer-events:none; overflow:hidden}
button{font-family:inherit; cursor:pointer; border:none; color:inherit}

/* ---------- HUD ---------- */
#hud{
  position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between;
  align-items:flex-start; gap:8px; padding:max(10px,env(safe-area-inset-top)) 12px 0;
  pointer-events:none; z-index:5;
}
.pill{
  background:rgba(255,255,255,.9); border-radius:999px; padding:6px 14px; font-weight:900;
  font-size:17px; box-shadow:0 3px 0 rgba(74,44,107,.18); white-space:nowrap;
}
.pill.small{font-size:14px; padding:4px 12px}
.hud-left{display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.hud-mid .pill{font-size:19px; letter-spacing:1px}
.hud-mid .pill:empty{display:none}
.hud-right{display:flex; gap:8px; align-items:center; pointer-events:auto}
.icon-btn{
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.92);
  font-size:21px; box-shadow:0 3px 0 rgba(74,44,107,.2); display:grid; place-items:center; padding:0;
}
.icon-btn:active{transform:translateY(2px); box-shadow:none}

/* ---------- Панель еды ---------- */
#foodbar{
  position:fixed; left:50%; bottom:max(10px,env(safe-area-inset-bottom)); transform:translateX(-50%);
  display:flex; gap:8px; padding:8px 10px; background:rgba(255,255,255,.55); border-radius:24px;
  box-shadow:0 4px 0 rgba(74,44,107,.15); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:5;
}
.food{
  position:relative; width:64px; height:64px; border-radius:18px; background:#fff;
  box-shadow:0 4px 0 #e7d6c2; display:flex; flex-direction:column; align-items:center;
  justify-content:center; transition:transform .12s, box-shadow .12s; overflow:hidden; padding:0;
}
.food .em{font-size:32px; line-height:1}
.food .sat{font-size:12px; font-weight:900; color:#2fa84f; margin-top:2px}
.food .key{position:absolute; top:3px; left:6px; font-size:10px; font-weight:800; opacity:.35}
.food .cd{position:absolute; left:0; right:0; bottom:0; height:0; background:rgba(74,44,107,.35); pointer-events:none}
.food.sel{transform:translateY(-6px) scale(1.08); box-shadow:0 0 0 4px var(--orange), 0 7px 0 var(--orange-d)}
.food.locked{opacity:.55; filter:grayscale(1); cursor:default}
.food.locked .sat{color:#888}

/* ---------- Шкалы над котиками ---------- */
.cat-ui{
  position:absolute; left:0; top:0; display:flex; flex-direction:column; align-items:center;
  gap:3px; will-change:transform;
}
.bubble{
  position:relative; width:46px; height:46px; border-radius:50%; background:#fff;
  display:grid; place-items:center; font-size:27px; box-shadow:0 3px 0 rgba(74,44,107,.18); margin-bottom:5px;
}
.bubble:after{
  content:''; position:absolute; bottom:-7px; left:50%; margin-left:-7px;
  border:7px solid transparent; border-top-color:#fff; border-bottom:0;
}
.cat-ui .bars{display:flex; flex-direction:column; gap:3px}
.cat-ui .row{display:flex; align-items:center; gap:3px; font-size:12px; line-height:1}
.bar{width:62px; height:11px; border-radius:6px; background:rgba(74,44,107,.3); border:2px solid #fff; overflow:hidden}
.bar i{display:block; height:100%; width:100%; border-radius:4px; transition:width .15s linear, background .3s}
.bar.sat i{background:linear-gradient(90deg,#ffc061,#ff7a1a)}
.nm{font-weight:900; font-size:13px; color:#fff; text-shadow:0 2px 0 rgba(74,44,107,.65)}
.cat-ui.urgent .bubble{animation:shake .45s infinite}
.cat-ui.done .bars{display:none}
.cat-ui.done .bubble{animation:none; transform:scale(1.15)}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}

/* ---------- Всплывающий текст ---------- */
.ft{
  position:absolute; transform:translate(-50%,-50%); font-weight:900; font-size:24px; color:#fff;
  white-space:nowrap; text-shadow:0 2px 0 var(--orange-d), 0 0 8px rgba(0,0,0,.2);
  animation:ft 1.4s ease-out forwards;
}
.ft.meow{text-shadow:0 2px 0 #8a5cc7, 0 0 8px rgba(0,0,0,.15)}
.ft.sad{font-size:18px; text-shadow:0 2px 0 #5a6b8a}
.ft.coco{text-shadow:0 2px 0 #d94848}
.ft.zzz{font-size:22px; color:#e4efff; text-shadow:0 2px 0 #4a5d9c; animation-duration:2.2s}
.ft.heart{font-size:26px; text-shadow:none}
.ft.big{font-size:30px}
@keyframes ft{
  0%{opacity:0; transform:translate(-50%,-30%) scale(.6)}
  15%{opacity:1; transform:translate(-50%,-60%) scale(1.12)}
  100%{opacity:0; transform:translate(-50%,-260%) scale(1)}
}

/* ---------- Баннер и подсказка ---------- */
#banner{position:fixed; left:0; right:0; top:24%; text-align:center; pointer-events:none; opacity:0; z-index:4}
#banner.show{animation:banner 2.6s ease forwards}
#banner .t{font-size:clamp(34px,7vw,64px); font-weight:900; color:#fff; text-shadow:0 5px 0 var(--orange-d), 0 0 18px rgba(0,0,0,.15)}
#banner .s{font-size:clamp(18px,3vw,26px); font-weight:900; color:#fff; text-shadow:0 3px 0 rgba(74,44,107,.55)}
@keyframes banner{
  0%{opacity:0; transform:scale(.6)} 12%{opacity:1; transform:scale(1.08)} 20%{transform:scale(1)}
  80%{opacity:1} 100%{opacity:0; transform:translateY(-20px)}
}
#hint{
  position:fixed; left:50%; bottom:112px; transform:translateX(-50%); background:rgba(255,255,255,.94);
  padding:10px 18px; border-radius:18px; font-weight:900; font-size:18px; box-shadow:0 4px 0 rgba(74,44,107,.18);
  pointer-events:none; opacity:0; transition:opacity .4s; text-align:center; max-width:90vw; z-index:12;
}
#hint.show{opacity:1}

/* ---------- Экраны ---------- */
.screen{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(60,40,110,.28); z-index:10; padding:16px;
}
.hidden{display:none !important}
.card{
  background:var(--cream); border-radius:32px; padding:24px 28px; text-align:center;
  box-shadow:0 8px 0 rgba(74,44,107,.25); max-width:460px; width:100%; animation:pop .35s ease;
  max-height:calc(100vh - 32px); overflow:auto;
}
@keyframes pop{from{transform:scale(.8); opacity:0} to{transform:scale(1); opacity:1}}
.title{font-size:clamp(36px,8vw,58px); font-weight:900; line-height:1.05; color:var(--orange); text-shadow:0 4px 0 var(--orange-d); margin:6px 0 10px}
.card p{font-size:17px; font-weight:700; margin:8px 0}
.how{font-size:15px !important; opacity:.85}
.btn{
  display:block; width:100%; margin:12px 0 0; padding:14px 20px; font-size:23px; font-weight:900; color:#fff;
  background:linear-gradient(#ffa53d,var(--orange)); border-radius:20px; box-shadow:0 6px 0 var(--orange-d);
}
.btn:active{transform:translateY(4px); box-shadow:0 2px 0 var(--orange-d)}
.btn.green{background:linear-gradient(#6fe08a,#3cc45f); box-shadow:0 6px 0 #279a45; font-size:19px}
.btn.small{font-size:17px; padding:10px; background:linear-gradient(#b9a2e6,#9479d1); box-shadow:0 5px 0 #6f55ab}
.stars{font-size:50px; letter-spacing:4px; margin:4px 0}
.loader{font-size:22px; font-weight:900; color:#fff; text-shadow:0 3px 0 rgba(74,44,107,.5)}
.loader .paw{display:inline-block; animation:bounce .6s infinite alternate}
@keyframes bounce{to{transform:translateY(-10px)}}

@media (max-height:520px){
  .food{width:52px; height:52px; border-radius:15px}
  .food .em{font-size:26px}
  .food .sat{font-size:11px}
  #hint{bottom:84px; font-size:15px}
  .icon-btn{width:38px; height:38px; font-size:18px}
  .pill{font-size:15px; padding:5px 11px}
  .hud-mid .pill{font-size:16px}
  .bubble{width:38px; height:38px; font-size:22px}
  .bar{width:52px; height:9px}
  .card{padding:16px 22px}
  .card p{font-size:15px}
  .btn{padding:10px; font-size:20px}
}
@media (max-width:700px){
  .hud-mid{display:none}
}

/* ---------- Ежедневки ---------- */
.title.mid{font-size:clamp(28px,6vw,42px)}
.card.wide{max-width:620px}
.menu-row{display:flex; gap:10px; margin-top:14px}
.mbtn{
  position:relative; flex:1; background:#fff; border-radius:18px; padding:8px 4px 7px;
  box-shadow:0 4px 0 #e7d6c2; display:flex; flex-direction:column; align-items:center; gap:2px;
}
.mbtn b{font-size:30px; line-height:1}
.mbtn span{font-size:14px; font-weight:900}
.mbtn:active{transform:translateY(3px); box-shadow:0 1px 0 #e7d6c2}
.dot{position:absolute; top:-4px; right:-4px; width:18px; height:18px; border-radius:50%; background:#ff4d4d; border:3px solid #fff; animation:pulse 1s infinite alternate}
@keyframes pulse{to{transform:scale(1.25)}}
.fishline{margin-top:10px; font-weight:900; font-size:17px}

.gift-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:12px 0 4px}
.gday{background:#fff; border-radius:14px; padding:6px 2px; box-shadow:0 3px 0 #e7d6c2; font-weight:900; font-size:12px; position:relative}
.gday .gi{font-size:24px; line-height:1.3}
.gday .gf{font-size:11px; color:#2fa84f}
.gday.done{opacity:.5}
.gday.done:after{content:'✔'; position:absolute; inset:0; display:grid; place-items:center; font-size:30px; color:#3cc45f}
.gday.today{box-shadow:0 0 0 4px var(--orange),0 5px 0 var(--orange-d); transform:translateY(-3px)}
.gday.big{background:#fff3c4}
.swatch{display:inline-block; width:26px; height:26px; border-radius:50%; border:4px solid; vertical-align:middle}

.task-list{display:flex; flex-direction:column; gap:8px; margin:12px 0 4px; text-align:left}
.task{display:flex; align-items:center; gap:10px; background:#fff; border-radius:16px; padding:8px 10px; box-shadow:0 3px 0 #e7d6c2}
.task .ti{font-size:30px}
.task .tb{flex:1; min-width:0}
.task .tt{font-weight:900; font-size:15px}
.task .tbar{width:100%; height:12px; margin-top:4px; background:#eadff7; border-color:#eadff7}
.task .tbar i{background:linear-gradient(90deg,#6fe08a,#3cc45f)}
.task .tp{font-size:12px; font-weight:800; opacity:.6}
.tc{min-width:84px; padding:10px 8px; border-radius:14px; font-weight:900; font-size:15px; color:#fff; background:#c9c2d6}
.tc.ready{background:linear-gradient(#6fe08a,#3cc45f); box-shadow:0 4px 0 #279a45; animation:pulse 0.8s infinite alternate}
.tc.got{background:#fff; color:#3cc45f; font-size:22px}

.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; margin:12px 0 4px}
.ccard{background:#fff; border-radius:18px; padding:10px 6px; box-shadow:0 3px 0 #e7d6c2; display:flex; flex-direction:column; align-items:center; gap:4px}
.ccard .cface{width:62px; height:50px; border-radius:50% 50% 44% 44%; border:5px solid; position:relative; display:grid; place-items:center; font-size:20px}
.ccard .cface:before,.ccard .cface:after{content:''; position:absolute; top:-14px; width:0; height:0; border:9px solid transparent; border-bottom:14px solid var(--ear)}
.ccard .cface:before{left:2px} .ccard .cface:after{right:2px}
.ccard .cn{font-weight:900; font-size:14px}
.ccard button{width:100%; padding:8px 4px; border-radius:12px; font-weight:900; font-size:14px; color:#fff; background:linear-gradient(#ffa53d,var(--orange)); box-shadow:0 3px 0 var(--orange-d)}
.ccard button:disabled{background:#d5cfe0; box-shadow:none; color:#fff; cursor:default}
.ccard.owned button{background:#fff; color:#3cc45f; box-shadow:none}
@media (max-height:520px){
  .gday .gi{font-size:18px}
  .mbtn b{font-size:22px}
  .task{padding:5px 8px} .task .ti{font-size:22px}
}
.remind-cats{font-size:46px; letter-spacing:6px; animation:bounce .7s infinite alternate}

/* ---------- Магазин и новые скины ---------- */
.tabs{display:flex; gap:8px; justify-content:center; margin:6px 0 2px}
.tab{padding:9px 14px; border-radius:14px; background:#fff; font-weight:900; font-size:16px; box-shadow:0 3px 0 #e7d6c2}
.tab.sel{background:linear-gradient(#ffa53d,var(--orange)); color:#fff; box-shadow:0 3px 0 var(--orange-d)}
.cthumb{width:96px; height:96px; object-fit:contain}
.ccard .cdsc{font-size:11px; font-weight:700; opacity:.7; min-height:14px}
.ccard button.eq{background:linear-gradient(#6fe08a,#3cc45f); box-shadow:0 3px 0 #279a45}
.ccard button.got{background:#fff; color:#3cc45f; box-shadow:none}
.ccard.equipped{box-shadow:0 0 0 3px #3cc45f, 0 3px 0 #e7d6c2}
.rev-wrap{position:relative; display:grid; place-items:center; margin:4px auto}
.rev-wrap:before{content:''; position:absolute; width:200px; height:200px; border-radius:50%;
  background:repeating-conic-gradient(#ffe7a3 0 12deg, #fff8ec 12deg 24deg); animation:spin 8s linear infinite}
.rev-img{position:relative; width:180px; height:180px; animation:pop .5s ease}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-height:520px){ .cthumb{width:70px; height:70px} .rev-img{width:130px; height:130px} .rev-wrap:before{width:150px; height:150px} }

/* ---------- Реклама (по желанию, всегда подписана) ---------- */
.btn.ad{background:linear-gradient(#e9e3f5,#d9cfee); color:#5a3d8a; box-shadow:0 5px 0 #b9a8dc; font-size:17px; padding:11px}
.btn.ad:after{content:'Смотреть не обязательно'; display:block; font-size:11px; font-weight:800; opacity:.65; margin-top:2px}
.btn.ad.arming{opacity:.45}
.btn.ad:disabled{cursor:default}
.age{display:inline-block; vertical-align:middle; font-size:15px; line-height:1; color:#fff; background:#3cc45f; -webkit-text-stroke:0;
  text-shadow:none; border-radius:8px; padding:4px 6px; margin-left:4px; transform:translateY(-6px)}