/* ===== Кот на стуле — стили ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  --bg1:#ffe8d6; --bg2:#e7d4ff; --card:#fff8f0;
  --ink:#4a3728; --accent:#ff8c5a; --accent2:#ffb88c;
  --shadow:0 8px 24px rgba(90,60,30,.12);
}
html,body { height:100%; font-family:'Segoe UI', system-ui, -apple-system, sans-serif; }
body {
  background:linear-gradient(160deg,var(--bg1),var(--bg2));
  color:var(--ink); display:flex; justify-content:center; align-items:stretch;
  user-select:none;
}
#app { width:100%; max-width:430px; display:flex; flex-direction:column; height:100dvh; }

/* верх */
.topbar { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; }
.logo { font-weight:800; font-size:1.05rem; }
.fish { background:rgba(255,255,255,.7); padding:6px 12px; border-radius:20px; font-weight:700; }
.pro-btn { background:linear-gradient(135deg,#f6d365,#fda085); border:none; color:#fff; font-weight:800; padding:7px 14px; border-radius:20px; cursor:pointer; box-shadow:var(--shadow); }

/* комната */
.room { position:relative; height:240px; border-radius:24px; overflow:hidden; margin:0 12px;
  background:linear-gradient(180deg,#aee3ff 0%,#ffe8d6 55%,#e8c39e 100%);
  box-shadow:var(--shadow); }
.bg-item { position:absolute; inset:0; transition:opacity .5s; }
.cat-wrap { position:absolute; bottom:74px; left:50%; transform:translateX(-50%); z-index:3;
  font-size:96px; transition:transform .3s; }
.cat { line-height:1; filter:drop-shadow(0 6px 8px rgba(0,0,0,.25)); cursor:pointer; }
.cat.jump { animation:jump .6s ease; }
.cat.meow { animation:meow .5s ease; }
.chair { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); font-size:64px; z-index:2; filter:drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
@keyframes jump { 0%{transform:translateY(60px) scale(.8);opacity:0} 60%{transform:translateY(-10px)} 100%{transform:translateY(0) scale(1);opacity:1} }
@keyframes meow { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-8deg)} 75%{transform:rotate(8deg)} }
.gift-zone { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font-size:34px; z-index:4; display:flex; gap:6px; }
.gift-item { animation:giftPop .5s ease; }
@keyframes giftPop { 0%{transform:scale(0);opacity:0} 70%{transform:scale(1.3)} 100%{transform:scale(1)} }

/* таймер */
.timer-panel { background:var(--card); margin:12px; padding:18px; border-radius:24px; box-shadow:var(--shadow); text-align:center; }
.mode-tabs { display:flex; gap:8px; justify-content:center; margin-bottom:8px; }
.tab { border:none; background:rgba(255,140,90,.15); color:var(--ink); padding:8px 18px; border-radius:20px; font-weight:700; cursor:pointer; }
.tab.active { background:var(--accent); color:#fff; }
.time-display { font-size:3.4rem; font-weight:800; letter-spacing:2px; font-variant-numeric:tabular-nums; }
.big-btn { background:var(--accent); border:none; color:#fff; font-size:1.05rem; font-weight:800; padding:12px 26px; border-radius:24px; cursor:pointer; box-shadow:0 6px 16px rgba(255,120,80,.4); }
.big-btn:active { transform:scale(.96); }
.ghost-btn { background:rgba(0,0,0,.06); border:none; color:var(--ink); font-size:1rem; padding:12px 18px; border-radius:24px; cursor:pointer; }
.timer-controls { display:flex; gap:10px; justify-content:center; align-items:center; margin:10px 0; }
.session-counter { font-size:.85rem; opacity:.8; }

/* экраны */
.screen { display:none; flex:1; overflow-y:auto; padding-bottom:80px; }
.screen.active { display:block; }
.screen h2 { text-align:center; margin:16px 0; font-size:1.25rem; }
.collection-grid, .shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:0 12px; }
.cell { background:var(--card); border-radius:16px; padding:14px 6px; text-align:center; box-shadow:var(--shadow); }
.cell .emoji { font-size:2.2rem; display:block; }
.cell .nm { font-size:.72rem; font-weight:700; display:block; margin-top:4px; }
.cell .rarity { font-size:.6rem; opacity:.7; }
.cell.locked { filter:grayscale(1); opacity:.55; }
.sell-panel { text-align:center; margin:16px; }
.shop-tabs { display:flex; gap:8px; justify-content:center; margin-bottom:12px; }
.stab { border:none; background:rgba(0,0,0,.06); padding:7px 14px; border-radius:16px; font-weight:700; cursor:pointer; }
.stab.active { background:var(--accent2); }
.cell button { margin-top:8px; border:none; background:var(--accent); color:#fff; font-weight:700; padding:6px 12px; border-radius:12px; cursor:pointer; }

/* история */
#histChart { width:100%; padding:0 12px; }
.stats-row { display:flex; gap:10px; justify-content:center; margin:12px; }
.stat { background:var(--card); border-radius:16px; padding:12px 16px; text-align:center; box-shadow:var(--shadow); flex:1; }
.stat span { display:block; font-size:1.5rem; font-weight:800; }

/* todo */
.todo-add { display:flex; gap:8px; padding:0 12px; margin-bottom:12px; }
#todoInput { flex:1; border:none; border-radius:16px; padding:12px 14px; font-size:1rem; background:var(--card); box-shadow:var(--shadow); }
#todoList { list-style:none; padding:0 12px; }
#todoList li { background:var(--card); border-radius:14px; padding:12px 14px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; box-shadow:var(--shadow); }
#todoList li.done { opacity:.5; text-decoration:line-through; }
#todoList button { border:none; background:none; font-size:1.1rem; cursor:pointer; }

/* нижняя навигация */
.bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px); display:flex; justify-content:space-around;
  padding:10px 0 14px; border-top:1px solid rgba(0,0,0,.06); }
.nav-btn { border:none; background:none; font-size:1.5rem; padding:6px 14px; border-radius:14px; cursor:pointer; opacity:.5; }
.nav-btn.active { opacity:1; background:rgba(255,140,90,.15); }

/* модалка */
.modal { position:fixed; inset:0; background:rgba(40,20,10,.55); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal.hidden { display:none; }
.modal-box { background:#fff; border-radius:24px; padding:22px; width:90%; max-width:360px; text-align:center; }
.plan { display:flex; gap:10px; margin:14px 0; }
.plan-card { flex:1; background:var(--bg1); border-radius:16px; padding:14px; }
.plan-card .price { font-size:1.4rem; font-weight:800; margin:6px 0; }
.buy-btn { background:var(--accent); border:none; color:#fff; font-weight:800; padding:10px 18px; border-radius:16px; cursor:pointer; }
.fine { font-size:.68rem; opacity:.6; }