* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; user-select:none; touch-action:none; background:#15151b; }
.ic { width:1em; height:1em; fill:currentColor; display:inline-block; vertical-align:-0.15em; flex:none; }

.topbar { position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; gap:8px; padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top, 0px)); background:linear-gradient(180deg, rgba(10,10,16,.55), rgba(10,10,16,0)); pointer-events:none; }
.chip { pointer-events:auto; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; background:rgba(28,28,38,.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14); color:#fff; font-weight:800; font-size:14px; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.chip .ic { width:16px; height:16px; }
.chip.coin .ic { color:#ffd27a; }
.chip.token .ic { color:#5bc8f5; }
.cart-btn { pointer-events:auto; margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:none; border-radius:50%; background:rgba(28,28,38,.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14); color:#fff; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.35); transition:transform .12s, background .2s; }
.cart-btn .ic { width:20px; height:20px; }
.cart-btn:active { transform:scale(.92); background:rgba(255,255,255,.18); }

/* ---------- КАРУСЕЛЬ КОМНАТ ---------- */
.carousel { display:flex; width:300%; height:100%; transition:transform .25s ease-out; cursor:grab; }
.carousel:active { cursor:grabbing; }
.page { width:33.333%; height:100%; position:relative; flex-shrink:0; overflow:hidden; }
.page .bg { width:100%; height:100%; background-size:cover; background-position:center; background-repeat:no-repeat; }

/* ---------- КОТ ---------- */
.hud { position:fixed; inset:0; pointer-events:none; z-index:10; display:flex; align-items:center; justify-content:center; padding-bottom:210px; }
.pet { pointer-events:auto; cursor:pointer; transition:transform .15s ease; filter:drop-shadow(0 8px 16px rgba(0,0,0,.45)); }
.pet img { width:190px; height:auto; transition:filter .3s ease; user-select:none; -webkit-user-drag:none; image-rendering:pixelated; }
.pet.idle img  { filter:none; }
.pet.react img { filter:hue-rotate(-20deg) saturate(1.5) drop-shadow(0 0 14px rgba(255,122,162,.8)); }
.pet.eat img   { filter:sepia(1) saturate(2) hue-rotate(10deg) drop-shadow(0 0 14px rgba(255,179,71,.8)); }
.pet.sleep img { filter:brightness(.7) saturate(.5); }
.pet.hungry img{ filter:brightness(.6) saturate(.3) grayscale(.3); }
.pet.coding img{ filter:hue-rotate(120deg) saturate(1.7) brightness(1.05) drop-shadow(0 0 18px rgba(80,255,180,.9)); }
.pet.jump  { animation:jump .3s ease; }
.pet.shake { animation:shake .3s ease; }
@keyframes jump  { 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }
@keyframes shake { 0%,100%{transform:rotate(0);} 25%{transform:rotate(-10deg);} 75%{transform:rotate(10deg);} }

/* ---------- ИНДИКАТОР АКТИВНОГО ПРОЕКТА (поток задач) ---------- */
.coding-pill { position:fixed; left:50%; bottom:208px; transform:translateX(-50%); z-index:35; display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:18px; background:rgba(20,40,32,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(80,255,180,.35); box-shadow:0 6px 20px rgba(0,0,0,.4), 0 0 18px rgba(80,255,180,.15); color:#d6ffe9; max-width:92%; }
.coding-pill[hidden] { display:none; }
.cp-ic { width:18px; height:18px; color:#5fffb0; flex:none; }
.cp-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.cp-row { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.cp-title { font-weight:800; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-time { flex:none; font-variant-numeric:tabular-nums; font-size:12px; color:#9effc9; }
.cp-purpose { font-size:11px; color:rgba(214,255,233,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-track { position:relative; height:6px; border-radius:6px; background:rgba(0,0,0,.4); overflow:hidden; }
.cp-fill { position:absolute; inset:0 auto 0 0; width:0%; background:linear-gradient(90deg,#5fffb0,#2ecc71); border-radius:6px; transition:width .9s linear; }

/* ---------- НИЖНЯЯ GLASS-ПАНЕЛЬ ---------- */
.dock { position:fixed; left:50%; bottom:14px; transform:translateX(-50%); width:92%; max-width:430px; z-index:30; display:flex; align-items:stretch; gap:16px; padding:14px 16px; border-radius:26px; background:rgba(28,28,38,.55); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.14); box-shadow:0 12px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); }
.stats { display:flex; gap:14px; flex:1; }
.sc { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.sc-track { position:relative; width:100%; height:128px; border-radius:16px; overflow:hidden; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.10); box-shadow:inset 0 2px 8px rgba(0,0,0,.5); }
.sc-fill { position:absolute; left:0; right:0; bottom:0; height:50%; border-radius:14px 14px 0 0; transition:height .35s cubic-bezier(.34,1.2,.64,1); }
.sc-fill::after { content:''; position:absolute; inset:0 0 auto 0; height:38%; background:linear-gradient(rgba(255,255,255,.35), transparent); border-radius:14px 14px 0 0; }
.sc-fill.happiness { background:linear-gradient(180deg,#ff9ec4,#ff5e9c); box-shadow:0 0 16px rgba(255,94,156,.5); }
.sc-fill.fullness  { background:linear-gradient(180deg,#ffd27a,#ff9f1c); box-shadow:0 0 16px rgba(255,159,28,.5); }
.sc-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.7); z-index:2; }
.sc-label { font-size:11px; font-weight:600; letter-spacing:.3px; color:rgba(255,255,255,.85); text-shadow:0 1px 3px rgba(0,0,0,.8); }
.actions { display:flex; flex-direction:column; justify-content:center; gap:10px; min-width:120px; }
.act-btn { display:none; width:100%; padding:14px 18px; border:none; border-radius:18px; font-size:15px; font-weight:700; color:#fff; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.35); transition:transform .12s ease, filter .2s ease; align-items:center; justify-content:center; gap:8px; }
.act-btn.visible { display:inline-flex; }
.act-btn:active { transform:scale(.95); filter:brightness(1.08); }
.act-btn .ic { width:18px; height:18px; }
.feed-btn  { background:linear-gradient(135deg,#ff7aa2,#ff4d7e); }
.games-btn { background:linear-gradient(135deg,#5bc8f5,#3a8fd6); }
.vibe-btn  { background:linear-gradient(135deg,#5fffb0,#2ecc71); color:#0c2418; flex-direction:column; gap:2px; padding:10px 14px; }
.vibe-btn .ic { color:#0c2418; }
.vibe-btn > span:first-of-type { display:inline-flex; align-items:center; gap:8px; }
.vb-note { font-size:10px; font-weight:700; opacity:.8; }
.vibe-btn:disabled { filter:grayscale(.6) brightness(.8); cursor:not-allowed; }
.stop-btn  { background:linear-gradient(135deg,#ff6b6b,#e03131); }
.stop-btn .ic { color:#fff; }

/* ---------- УВЕДОМЛЕНИЕ ПРИ ВОЗВРАЩЕНИИ ---------- */
.notification { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:1000; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.notification.show { display:flex; animation:fadeIn .3s ease; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.notification-card { background:#fff; border-radius:24px; padding:28px; width:85%; max-width:340px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.4); animation:slideUp .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes slideUp { from{transform:translateY(40px);opacity:0;} to{transform:translateY(0);opacity:1;} }
.notif-emoji { width:64px; height:64px; margin:0 auto 8px; display:block; color:#ff7aa2; }
.notification-title { font-size:21px; font-weight:800; color:#1a1a1a; margin-bottom:8px; }
.notification-body { font-size:15px; color:#555; line-height:1.5; margin-bottom:18px; white-space:pre-line; }
.notification-btn { background:linear-gradient(135deg,#ff7aa2,#ff4d7e); color:#fff; border:none; padding:14px 28px; border-radius:20px; font-size:16px; font-weight:700; cursor:pointer; width:100%; box-shadow:0 6px 16px rgba(255,77,126,.4); }
.notification-btn:active { transform:scale(.97); }

/* ---------- МАГАЗИН ---------- */
.shop-overlay { position:fixed; inset:0; background:rgba(10,10,16,.7); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:none; align-items:center; justify-content:center; z-index:2000; }
.shop-overlay.show { display:flex; }
.shop-card { width:90%; max-width:380px; background:rgba(30,30,42,.94); border:1px solid rgba(255,255,255,.12); border-radius:24px; padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.5); color:#fff; }
.shop-head { display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:17px; margin-bottom:10px; }
.shop-head .title { display:flex; align-items:center; gap:8px; }
.shop-head .ic { width:20px; height:20px; }
.shop-x { border:none; background:rgba(255,255,255,.12); color:#fff; border-radius:50%; width:34px; height:34px; font-size:16px; cursor:pointer; transition:background .2s; }
.shop-x:active { background:rgba(255,255,255,.25); }
.shop-balance { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:rgba(255,255,255,.85); margin-bottom:12px; }
.mini-chip { display:inline-flex; align-items:center; gap:4px; }
.mini-chip .ic { width:14px; height:14px; color:#ffd27a; }
.shop-list { display:flex; flex-direction:column; gap:10px; }
.shop-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border-radius:18px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); transition:background .2s, opacity .2s; }
.shop-item.disabled { opacity:.55; }
.si-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.si-title { font-size:15px; font-weight:800; }
.si-desc { font-size:12px; color:rgba(255,255,255,.6); }
.si-buy { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none; }
.si-price { font-size:14px; font-weight:800; }
.si-note { font-size:11px; color:#ffb4b4; }
.si-btn { border:none; border-radius:14px; padding:9px 16px; font-size:14px; font-weight:800; color:#fff; cursor:pointer; background:linear-gradient(135deg,#ffd27a,#ff9f1c); box-shadow:0 4px 12px rgba(255,159,28,.35); transition:transform .12s; }
.si-btn:active { transform:scale(.95); }
.si-btn:disabled { background:rgba(255,255,255,.12); color:rgba(255,255,255,.5); cursor:not-allowed; box-shadow:none; }

/* ---------- ОВЕРЛЕЙ МИНИ-ИГР ---------- */
.games-overlay { position:fixed; inset:0; background:rgba(10,10,16,.7); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:none; align-items:center; justify-content:center; z-index:2000; }
.games-overlay.show { display:flex; }
.games-menu, .games-stage-wrap, .games-result { width:90%; max-width:380px; background:rgba(30,30,42,.92); border:1px solid rgba(255,255,255,.12); border-radius:24px; padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.5); color:#fff; }
.games-head { display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:17px; margin-bottom:14px; }
.games-head .title { display:flex; align-items:center; gap:8px; }
.games-head .ic { width:20px; height:20px; }
.games-x { border:none; background:rgba(255,255,255,.12); color:#fff; border-radius:50%; width:34px; height:34px; font-size:16px; cursor:pointer; transition:background .2s; }
.games-x:active { background:rgba(255,255,255,.25); }
.games-list { display:flex; flex-direction:column; gap:10px; }
.game-card { display:flex; align-items:center; gap:14px; padding:16px; border:none; border-radius:18px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); color:#fff; cursor:pointer; font-size:16px; font-weight:700; transition:transform .12s, background .2s; }
.game-card:hover { background:rgba(255,255,255,.12); }
.game-card:active { transform:scale(.98); }
.gc-icon { display:flex; align-items:center; justify-content:center; }
.gc-icon .ic { width:26px; height:26px; }
.game-stage { position:relative; height:340px; background:radial-gradient(circle at 50% 30%, #2a2a38, #16161e); border-radius:18px; overflow:hidden; touch-action:none; border:1px solid rgba(255,255,255,.08); }
.cc-hud, .rx-hud { position:absolute; top:10px; left:12px; right:12px; display:flex; justify-content:space-between; color:#fff; font-weight:800; font-size:15px; z-index:2; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.cc-cat { position:absolute; cursor:pointer; user-select:none; transition:left .12s ease-out, top .12s ease-out; color:#ffd27a; animation:pop .18s ease; }
.cc-cat .ic { width:46px; height:46px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
@keyframes pop { from{transform:scale(.4);} to{transform:scale(1);} }
.rx-target { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:30px; font-weight:900; cursor:pointer; background:rgba(255,255,255,.04); transition:background .12s, transform .08s; }
.rx-target.go { background:linear-gradient(135deg,#2ecc71,#27ae60); animation:pulse .5s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.03);} }
.games-result { text-align:center; }
.games-result-emoji { color:#ffd27a; margin-bottom:4px; }
.games-result-emoji .ic { width:54px; height:54px; }
.games-result-text { white-space:pre-line; margin:10px 0 18px; font-size:16px; color:#eee; }
.games-result-btn { width:100%; padding:14px; border:none; border-radius:18px; background:linear-gradient(135deg,#ff7aa2,#ff4d7e); color:#fff; font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 6px 16px rgba(255,77,126,.4); }
.games-result-btn:active { transform:scale(.97); }

#toasts { position:fixed; left:50%; bottom:268px; transform:translateX(-50%); z-index:1500; display:flex; flex-direction:column-reverse; gap:6px; align-items:center; pointer-events:none; width:max-content; max-width:92%; }
.toast { padding:8px 14px; border-radius:999px; font-size:13px; font-weight:700; color:#fff; background:rgba(30,30,42,.9); border:1px solid rgba(255,255,255,.12); box-shadow:0 6px 18px rgba(0,0,0,.4); opacity:0; transform:translateY(8px); transition:opacity .25s, transform .25s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:92vw; }
.toast.show { opacity:1; transform:translateY(0); }
.toast.good { border-color:rgba(80,255,180,.4); color:#bfffe0; }
.toast.warn { border-color:rgba(255,107,107,.4); color:#ffc4c4; }
.toast.gold { border-color:rgba(255,210,122,.5); color:#ffe9b0; background:rgba(60,45,15,.92); box-shadow:0 6px 18px rgba(0,0,0,.4), 0 0 14px rgba(255,210,122,.25); }

/* табы магазина */
.shop-tabs { display:flex; gap:6px; margin-bottom:12px; }
.stab { flex:1; padding:9px; border:none; border-radius:14px; background:rgba(255,255,255,.06); color:rgba(255,255,255,.6); font-weight:800; font-size:14px; cursor:pointer; transition:background .2s,color .2s; }
.stab.active { background:rgba(255,255,255,.14); color:#fff; }
/* история */
.hist-list { display:flex; flex-direction:column; gap:6px; max-height:340px; overflow-y:auto; }
.hist-empty { text-align:center; color:rgba(255,255,255,.5); font-size:14px; padding:20px 0; }
.hist-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.05); border-left:3px solid rgba(255,255,255,.15); }
.hist-row.good  { border-left-color:#5fffb0; }
.hist-row.warn  { border-left-color:#ff6b6b; }
.hist-row.gold  { border-left-color:#ffd27a; background:rgba(60,45,15,.4); }
.hr-mark { font-size:18px; font-weight:900; width:20px; text-align:center; flex:none; }
.hist-row.good .hr-mark{color:#5fffb0;} .hist-row.warn .hr-mark{color:#ff8a8a;} .hist-row.gold .hr-mark{color:#ffd27a;}
.hr-main { flex:1; min-width:0; }
.hr-title { font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hr-title em { font-style:normal; color:#ffb4b4; font-size:11px; font-weight:700; }
.hr-purpose { font-size:11px; color:rgba(255,255,255,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hr-meta { flex:none; text-align:right; font-size:13px; font-weight:800; }
.hr-meta .ic { width:12px; height:12px; color:#ffd27a; vertical-align:-1px; }
.hr-sub { font-size:11px; color:rgba(255,255,255,.55); font-weight:700; }
.hr-ago { font-size:10px; color:rgba(255,255,255,.35); }

/* ---------- общие HUD внутри игровых сцен ---------- */
.gi-hud { position:absolute; top:10px; left:12px; right:12px; display:flex; justify-content:space-between; color:#fff; font-weight:800; font-size:15px; z-index:2; text-shadow:0 1px 4px rgba(0,0,0,.6); }
/* memory */
.mem-grid { position:absolute; inset:44px 12px 12px; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:8px; }
.mem-card { border:none; border-radius:12px; background:rgba(255,255,255,.10); cursor:pointer; transition:transform .12s, background .2s, box-shadow .2s; }
.mem-card.open { box-shadow:0 0 0 2px rgba(255,255,255,.4) inset; }
.mem-card.matched { opacity:.35; cursor:default; box-shadow:none; }
.mem-card:active { transform:scale(.94); }
/* sequence (Simon) */
.sq-pad { position:absolute; inset:48px 24px 24px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:12px; }
.sq-btn { border:none; border-radius:18px; opacity:.45; cursor:pointer; transition:opacity .12s, transform .08s, box-shadow .12s; }
.sq-btn:active { transform:scale(.96); }
.sq-btn.lit { opacity:1; box-shadow:0 0 22px currentColor; }
.sq-r { background:#ff6b6b; color:#ff6b6b; } .sq-g { background:#5fffb0; color:#5fffb0; }
.sq-b { background:#5bc8f5; color:#5bc8f5; } .sq-y { background:#ffd27a; color:#ffd27a; }
/* math */
.mt-q { position:absolute; top:46px; left:0; right:0; text-align:center; font-size:34px; font-weight:900; color:#fff; }
.mt-opts { position:absolute; inset:auto 16px 16px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mt-opt { border:none; border-radius:16px; padding:18px 0; font-size:22px; font-weight:800; color:#fff; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.10); cursor:pointer; transition:transform .1s, background .2s; }
.mt-opt:active { transform:scale(.95); background:rgba(255,255,255,.2); }

/* записи мини-игр в общей ленте истории (отличаются голубым + svg-геймпадом) */
.hist-row.game { border-left-color:#5bc8f5; background:rgba(20,40,55,.4); }
.hist-row.game .hr-mark { color:#5bc8f5; display:flex; align-items:center; justify-content:center; }
.hist-row.game .hr-mark .ic { width:16px; height:16px; }

/* ---------- ЧИП УРОВНЯ ---------- */
.chip.level { gap:8px; }
.chip.level .ic { color:#ffd27a; }
.lv-num { font-weight:900; font-size:15px; min-width:14px; text-align:center; }
.lv-prog { position:relative; width:46px; height:6px; border-radius:6px; background:rgba(0,0,0,.4); overflow:hidden; }
.lv-prog-fill { position:absolute; inset:0 auto 0 0; width:0%; background:linear-gradient(90deg,#ffd27a,#ff9f1c); border-radius:6px; transition:width .4s ease; }
