/* Cozy Cat Café — SPACIOUS REDESIGN - full fit, no extra screens, bright */
:root{
  --cream:#FFF8EC; --cream2:#FFF1D6; --peach:#FFD6C8; --pink:#FFD6E8; --mint:#FFD6E8;
  --cocoa:#5A3620; --wood:#E8C9A0; --wall:#FFF4E8;
  --shadow:0 8px 24px rgba(90,54,32,.12), 0 2px 8px rgba(90,54,32,.08);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background: #FFF8EC;
  color:var(--cocoa);
  font: 14px/1.45 ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
.app{
  height:100dvh; height:100vh;
  display:flex; flex-direction:column;
  padding: 0;
  overflow:hidden;
  background: #FFF8EC;
}
/* HUD */
.hud{
  flex-shrink:0;
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; margin:6px 8px 0;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border:1px solid rgba(90,54,32,.08); border-radius:14px; box-shadow:var(--shadow);
  z-index:10;
}
.logo{display:flex; align-items:center; gap:8px; min-width:0}
.logo-icon{width:32px;height:32px; display:grid; place-items:center; background:#FFF1D6; border-radius:8px; border:1px solid rgba(90,54,32,.08); font-size:18px}
.logo-text{font-weight:900; font-size:.98rem; letter-spacing:-.02em; white-space:nowrap}
.logo-sub{font-size:.72rem; opacity:.55; white-space:nowrap}
@media(max-width:560px){ .logo-sub{display:none} }
.hud-center{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 auto; }
.hud-right{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.pill{
  display:flex; align-items:center; gap:6px;
  background:white; border:1px solid rgba(90,54,32,.09); border-radius:999px;
  padding:5px 10px; font-weight:800; font-size:.8rem; box-shadow:0 2px 8px rgba(90,54,32,.06);
  cursor:pointer; transition: transform .12s;
}
.pill:hover{ transform: translateY(-1px); }
.pill:active{ transform: scale(.97); }
.pill-icon{ font-size:13px; }
.bar{ width:90px; height:8px; background:#FFF1D6; border-radius:999px; overflow:hidden; border:1px solid rgba(90,54,32,.09); }
.bar.small{ width:54px; height:6px; }
.fill{ height:100%; background: linear-gradient(90deg, #FFD6A8, #FF9A8B 60%, #FF6B8A); border-radius:999px; transition: width .3s; }
.icon-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(90,54,32,.12); background:white;
  display:grid; place-items:center; cursor:pointer; font-size:16px; box-shadow:0 2px 8px rgba(90,54,32,.06);
  transition: transform .12s, filter .12s;
}
.icon-btn:hover{ transform: scale(1.06); }
.icon-btn:active{ transform: scale(.95); }
.icon-btn.muted{ opacity:.5; filter:grayscale(.3); }

/* LAYOUT - spacious horizontal, full fit */
.layout{
  flex:1; min-height:0;
  display:flex; gap:8px;
  padding:8px; overflow:hidden;
}
.cafe{
  flex:1; min-width:0; min-height:0;
  background:white; border:none; border-radius:0; box-shadow:none; overflow:hidden; position:relative;
  display:flex; flex-direction:column;
  min-height: 580px;
}
.room{
  flex:1; position:relative; overflow:visible; background: var(--wall); min-height:0;
}
.wall{
  position:absolute; inset:0 0 42% 0;
  background:
    repeating-linear-gradient(90deg, #FF6B9A 0 18px, #FF8FAB 18px 36px, #FFB3D9 36px 54px, #C86BFA 54px 72px, #7DD3FF 72px 90px, #FFD93D 90px 108px, #FF6B9A 108px 126px),
    linear-gradient(180deg, #FFF0F5 0%, #FFE0EC 50%, #E0C8FF 100%);
}
.wall::after{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(0deg, transparent 0 28px, rgba(255,255,255,.22) 28px 30px, rgba(255,107,154,.12) 30px 32px);
}
.wall-deco{
  position:absolute; inset:0 0 42% 0; opacity:.10;
  background-image: radial-gradient(circle at 14% 22%, #FF6B9A 2px, transparent 2.4px), radial-gradient(circle at 38% 44%, #FFD93D 2px, transparent 2.4px), radial-gradient(circle at 64% 18%, #7DD3FF 2px, transparent 2.4px), radial-gradient(circle at 82% 30%, #C86BFA 1.8px, transparent 2.2px);
  background-size: 180px 140px;
}
.dessert-board{
  position:absolute; left:50%; top:3%; transform:translateX(-50%);
  width:min(660px, 82%); background: linear-gradient(90deg, #FF6B6B 0%, #FFD93D 22%, #6BCB77 44%, #4D96FF 66%, #845EC2 88%, #FF6EC7 100%);
  border:3px solid rgba(255,255,255,.9); border-radius:14px; padding:10px 12px 10px;
  box-shadow:0 8px 18px rgba(90,54,32,.18), inset 0 2px 0 rgba(255,255,255,.6); z-index:4; overflow:hidden;
}
.dessert-board::before{
  content:"♥  ♡  ♥  ♡  ♥  ♡  ♥  ♡  ♥  ♡  ♥"; position:absolute; top:4px; left:50%; transform:translateX(-50%); font-size:9px; letter-spacing:6px; color:rgba(255,255,255,.85); white-space:nowrap; pointer-events:none; text-shadow:0 1px 2px rgba(0,0,0,.15);
}
.dessert-board::after{
  content:""; position:absolute; inset:0; background: rgba(255,255,255,.18); backdrop-filter: blur(0px); border-radius:12px; pointer-events:none;
}
.board-title{ font-size:.92rem; font-weight:900; text-align:center; letter-spacing:.06em; margin-bottom:8px; color:#FFFFFF; text-shadow:0 2px 4px rgba(0,0,0,.35), 0 0 8px rgba(0,0,0,.2); }
.dessert-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:7px; } .dessert .board-have{ display:block; font-size:.66rem; font-weight:900; background:#FFFFFF; border:1.5px solid #8A5A2B; border-radius:999px; padding:2px 6px; margin-top:3px; color:#5A2E14; box-shadow:0 1px 3px rgba(0,0,0,.12); } .dessert.out{ opacity:.45; filter:grayscale(.3); }
.dessert{ background:white; border:1px solid rgba(90,54,32,.08); border-radius:10px; padding:5px 4px 4px; text-align:center; transition: transform .12s; cursor:pointer; }
.dessert:hover{ transform: translateY(-2px) scale(1.03); }
.dessert:active{ transform: scale(.97); }
.dessert-img{ width:100%; height:42px; border-radius:9px; border:1.5px solid rgba(90,54,32,.12); display:grid; place-items:center; font-size:18px; background:white; }
.dessert-img.strawberry{ background: linear-gradient(180deg, #FFD6E8 0 55%, #FFEEDC 55%); }
.dessert-img.strawberry::after{ content:"🍓"; }
.dessert-img.cheesecake{ background: linear-gradient(180deg, #FFF4C8, #FFE2B8); }
.dessert-img.cheesecake::after{ content:"🍰"; }
.dessert-img.cupcake{ background: linear-gradient(180deg, #FFDAB8 0 60%, #FFF8EC 60%); }
.dessert-img.cupcake::after{ content:"🧁"; }
.dessert-img.drink{ background: linear-gradient(180deg, #FFEEDC, #FFD6C8 55%, #FFF8EC 55%); }
.dessert-img.drink::after{ content:"☕"; }
.dessert span{ font-size:.68rem; font-weight:900; line-height:1.1; display:block; margin-top:3px; color:#3A2010; text-shadow:0 0 0 rgba(0,0,0,.01); }

.floor{
  position:absolute; left:0; right:0; bottom:0; height:42%;
  background: linear-gradient(180deg, #8B5A2B 0%, #6B3A1A 45%, #5A2E14 100%); overflow:hidden;
}
.planks{ position:absolute; inset:0; background: 
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 118px, rgba(255,255,255,.06) 118px 120px, rgba(0,0,0,.14) 120px 122px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 2px, transparent 2px 28px, rgba(255,255,255,.04) 28px 30px),
    linear-gradient(90deg, transparent 0 118px, rgba(0,0,0,.08) 118px 120px); }
.rug{ position:absolute; left:50%; bottom:2px; transform:translateX(-50%) perspective(400px) rotateX(58deg); transform-origin: bottom center; width:72%; height:46%; background: radial-gradient(ellipse at 50% 38%, #FFF8EA 0%, #FFE9C8 48%, #E8D0A8 100%); border-radius:50% / 42%; border:2px solid rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; gap:18px; font-size:11px; opacity:1; box-shadow: inset 0 8px 22px rgba(200,170,120,.22), 0 2px 0 rgba(0,0,0,.12); }
.rug span{ opacity:.3; }

/* Furniture - spacious */
.furniture{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.table{ position:absolute; bottom:11%; display:flex; flex-direction:column; align-items:center; pointer-events:auto; cursor:pointer; transition: transform .12s; filter: drop-shadow(0 5px 10px rgba(60,30,15,.12)); }
.table:hover{ transform: translateY(-2px); }
.table.t1{ left:7%; } .table.t2{ left:33%; } .table.t3{ right:14%; }
.table .top{ background: radial-gradient(ellipse at 30% 20%, #FFF8EC, #E8D0A8 55%, #C9A86A 100%); border:1px solid #B8935F; box-shadow: inset 0 2px 3px rgba(255,255,255,.8), 0 2px 6px rgba(0,0,0,.12); }
.table .leg{ background: linear-gradient(90deg, #7A4A22, #A66A32 50%, #7A4A22); box-shadow: 0 2px 4px rgba(0,0,0,.18); }
.table .cloth{ border-radius:10px 10px 6px 6px; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.cloth{ position:absolute; left:-10px; right:-10px; top:-8px; height:18px; border-radius:10px; border:1px solid rgba(90,54,32,.12); opacity:.95; }
.cloth.pink{ background:#FFD6E8; border-color:#E8A0B8; } .cloth.mint{ background:#FFD6C8; border-color:#E8A0B8; } .cloth.peach{ background:#FFDAB8; border-color:#E8A0A8; }
.top{ width:82px; height:12px; background: linear-gradient(180deg, #FFF8EC, #E8C9A0); border:1px solid rgba(90,54,32,.12); border-radius:999px; }
.leg{ width:6px; height:20px; background:#C99B64; border-radius:3px; margin-top:-2px; }
.vase{ position:absolute; left:50%; top:-16px; transform:translateX(-50%); width:10px; height:14px; background:white; border:1px solid #E8C9A0; border-radius:6px 6px 3px 3px; }
.vase::after{ content:"🌷"; position:absolute; top:-10px; left:50%; transform:translateX(-50%); font-size:10px; }
.vase.small::after{ content:"🌼"; }
.sofa{ position:absolute; bottom:11%; width:168px; height:92px; pointer-events:auto; cursor:pointer; transition: transform .12s; filter: drop-shadow(0 6px 12px rgba(60,30,15,.14)); }
.sofa:hover{ transform: translateY(-2px); }
.sofa.s1{ left:5%; } .sofa.s2{ right:5%; }
.sofa-body{ position:absolute; inset:10px 4px 14px; background: linear-gradient(180deg, #FFFEF8 0%, #FFF6EA 55%, #F5E6D3 100%); border:1.5px solid #D8C4A8; border-radius:14px; box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 0 -8px 14px rgba(180,150,110,.12); }
.sofa-body::before{ content:""; position:absolute; inset:10px 8px auto; height:6px; background: linear-gradient(90deg, transparent, rgba(200,170,120,.22), transparent); border-radius:999px; }
.sofa-body::after{ content:""; position:absolute; left:8px; right:8px; bottom:-6px; height:10px; background: #8B5A2B; border-radius:0 0 8px 8px; box-shadow: 0 3px 6px rgba(0,0,0,.16); }
.sofa .pillow{ position:absolute; right:12px; top:18px; width:30px; height:30px; background: linear-gradient(180deg, #FFF9E6, #F5E6C8); border:1.5px solid #D8C4A8; border-radius:12px; transform:rotate(6deg); display:grid; place-items:center; font-size:12px; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.sofa .pillow::after{ content:"✦"; color:#C9A86A; font-size:10px; }
.sofa .pillow.small{ right:auto; left:12px; width:40px; height:16px; top:36px; border-radius:999px; background: linear-gradient(180deg, #FFF9E6, #E8D9B8); }
.bed{ position:absolute; bottom:6%; width:110px; height:70px; pointer-events:auto; cursor:pointer; }
.bed.b1{ left:18%; } .bed.b2{ right:18%; }
.bed .rim{ position:absolute; inset:0; background: linear-gradient(180deg, #FFE8C8, #FFD7A8); border:2px solid #E8C9A0; border-radius:36px; }
.bed .inner{ position:absolute; left:8px; right:8px; top:14px; bottom:10px; background: radial-gradient(100px 50px at 50% 30%, #FFF8EC, #FFEEDC); border-radius:26px; border:1px solid rgba(90,54,32,.08); }
.cushion, .box{ position:absolute; bottom:9%; pointer-events:auto; cursor:pointer; transition: transform .12s, filter .12s; }
.cushion{ left:44%; width:90px; height:44px; }
.cush-body{ position:absolute; inset:4px 0 6px; background: linear-gradient(180deg, #FFEED0, #FFDAB8); border:2px solid #E8C9A0; border-radius:14px; }
.cushion span, .box span{ position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); background:rgba(255,255,255,.92); border:1px solid rgba(90,54,32,.1); border-radius:999px; font-size:.62rem; font-weight:700; padding:2px 6px; white-space:nowrap; opacity:0; transition: opacity .2s; }
.cushion:hover span, .box:hover span{ opacity:1; }
.box{ right:10%; width:74px; height:52px; }
.box-body{ position:absolute; inset:8px 4px 6px; background: linear-gradient(180deg, #E8C9A0, #C99B64); border:1.6px solid #B98A4E; border-radius:8px; }
.flap{ position:absolute; left:6px; right:6px; top:2px; height:10px; background: linear-gradient(180deg, #FFE8C8, #E8C9A0); border:1px solid #C99B64; border-radius:6px 6px 0 0; }
.cat-house{ display:none !important; position:absolute; left:50%; bottom:8%; top:auto; transform:translateX(-50%); width:340px; height:176px; pointer-events:auto; cursor:pointer; z-index:3; filter: drop-shadow(0 10px 20px rgba(60,30,15,.22)); transition: transform .14s; }
.cat-house:hover{ transform: translateX(-50%) translateY(-2px) scale(1.015); }
.cat-house .house-roof{ position:absolute; left:-8px; right:-8px; top:0; height:62px; background: linear-gradient(180deg, #B07A4A 0%, #8B5A2B 38%, #6B3A1A 72%, #5A2E12 100%); border:2px solid #5A3518; border-radius:18px 18px 8px 8px; box-shadow: inset 0 3px 0 rgba(255,255,255,.22), inset 0 -8px 14px rgba(50,20,8,.35); overflow:hidden; }
.cat-house .house-roof::before{ content:""; position:absolute; inset:0; background: repeating-linear-gradient(90deg, transparent 0 28px, rgba(0,0,0,.08) 28px 30px, transparent 30px 58px, rgba(255,255,255,.07) 58px 60px); }
.cat-house .house-roof::after{ content:""; position:absolute; left:8%; right:8%; bottom:-6px; height:14px; background: linear-gradient(180deg, #D9A86A, #B88A4A); border:1px solid #8B5A2B; border-radius:6px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.cat-house .house-body{ position:absolute; left:0; right:0; top:52px; bottom:0; background: linear-gradient(180deg, #FFEEDC 0%, #F7D9B8 45%, #E8C9A0 100%); border:2px solid #C9A86A; border-top:none; border-radius:0 0 14px 14px; box-shadow: inset 0 3px 0 rgba(255,255,255,.85), inset 0 -10px 18px rgba(180,140,90,.18); overflow:hidden; }
.cat-house .house-body::before{ content:""; position:absolute; inset:0; background: 
    linear-gradient(90deg, transparent 0 48px, rgba(180,140,90,.18) 48px 50px, transparent 50px 96px, rgba(180,140,90,.12) 96px 98px, transparent 98px 144px, rgba(180,140,90,.18) 144px 146px, transparent 146px 100%),
    linear-gradient(180deg, transparent 0 24px, rgba(180,140,90,.1) 24px 26px, transparent 26px 52px, rgba(180,140,90,.08) 52px 54px, transparent 54px 100%); }
.cat-house .house-door{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); width:38%; height:58%; background: radial-gradient(ellipse at 50% 18%, #6B4A2A 0%, #4A2E18 48%, #2E1A0A 100%); border:2.5px solid #8B5A2B; border-radius:22px 22px 8px 8px; box-shadow: inset 0 4px 10px rgba(0,0,0,.45), inset 0 -6px 12px rgba(80,40,15,.25), 0 3px 8px rgba(0,0,0,.22); }
.cat-house .house-door::after{ content:"🐾"; position:absolute; left:50%; top:18%; transform:translateX(-50%); font-size:18px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.cat-house .house-door::before{ content:""; position:absolute; right:-10px; top:48%; width:7px; height:7px; background: radial-gradient(circle, #FFD700 40%, #C9A00A 100%); border:1px solid #8B5A2B; border-radius:50%; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.cat-house .house-sign{ position:absolute; left:50%; top:16px; transform:translateX(-50%); background: linear-gradient(180deg, #FFF8EC, #FFEEDC); border:1.6px solid #C9A86A; border-radius:999px; padding:3px 10px; font-size:.62rem; font-weight:900; white-space:nowrap; color:#6B3A1A; box-shadow:0 2px 8px rgba(90,54,32,.14); letter-spacing:.03em; }
.cat-house .house-window{ position:absolute; right:14%; top:34%; width:28px; height:28px; background: radial-gradient(circle at 35% 30%, #FFF8EC 0%, #E8F4FF 45%, #B8D8EA 100%); border:2px solid #8AA8C8; border-radius:50%; box-shadow: inset 0 2px 4px rgba(255,255,255,.9), 0 2px 6px rgba(0,0,0,.12); display:block; }
.cat-house .house-window::after{ content:""; position:absolute; inset:5px; border:1.5px solid rgba(138,168,200,.35); border-radius:50%; }
.cat-house .house-window::before{ content:""; position:absolute; left:50%; top:50%; width:1px; height:16px; background: #8AA8C8; transform:translate(-50%,-50%); }


/* Cats - spacious */
.cats-layer{ position:absolute; inset:0; z-index:5; pointer-events:none; padding: 12px; }
.cat-wrap{
  position:absolute; width: clamp(180px, 18vw, 240px); aspect-ratio: 1.35/1;
  pointer-events:auto; cursor:grab; touch-action:none; overflow: visible;
  filter: drop-shadow(0 10px 16px rgba(90,54,32,.13));
  transition: transform .2s, filter .2s;
}
.cat-wrap.small{ width: clamp(140px, 14vw, 180px); }
.cat-wrap:hover{ filter: drop-shadow(0 10px 16px rgba(90,54,32,.15)); transform: translateY(-1px); }
.cat-wrap.drag-over{ filter: drop-shadow(0 0 12px rgba(255,154,58,.6)); transform: scale(1.04); }
.cat-wrap.selected{ outline: 2px solid #FF9A8B; outline-offset:2px; border-radius:14px; }
.cat{ position:absolute; inset:0; z-index:1; }
.thought{
  position:absolute; left:50%; top:-44px; transform:translateX(-50%);
  background:white; border:2px solid #E8C9A0; border-radius:16px; padding:6px 8px;
  display:flex; align-items:center; gap:6px; box-shadow:0 6px 14px rgba(90,54,32,.12);
  z-index:10; transition: opacity .2s, transform .2s;
}
.thought.hidden{ opacity:0; pointer-events:none; transform:translateX(-50%) translateY(6px) scale(.92); }
.thought:not(.hidden){ animation: thoughtPop 300ms ease; }
@keyframes thoughtPop{ 0%{ transform:translateX(-50%) scale(.9)} 100%{ transform:translateX(-50%) scale(1)} }
.bubble{ display:flex; align-items:center; gap:6px; }
.bubble-content{ width:36px; height:36px; display:grid; place-items:center; background: linear-gradient(180deg, #FFF8EC, #FFF1D6); border-radius:10px; border:1px solid #FFE0A8; font-size:20px; }
.bubble-content.milk::after{ content:"🍼"; } .bubble-content.tuna::after{ content:"🐟"; } .bubble-content.cookie::after{ content:"🍪"; } .bubble-content.cake::after{ content:"🍰"; } .bubble-content.cupcake::after{ content:"🧁"; } .bubble-content.drink::after{ content:"☕"; } .bubble-content.catnip::after{ content:"🌿"; } .bubble-content.petting::after{ content:"✋"; } .bubble-content.cushion::after{ content:"🛋️"; } .bubble-content.box::after{ content:"📦"; }
.bubble-label{ font-size:.64rem; font-weight:800; white-space:nowrap; }
.timer{ position:relative; width:32px; height:32px; display:grid; place-items:center; }
.timer span{ position:absolute; inset:0; display:grid; place-items:center; font-size:.62rem; font-weight:900; }
.timer svg{ width:28px; height:28px; transform: rotate(-90deg); }
.timer .bg{ stroke:#FFE0A8; stroke-width:3; fill:none; }
.timer .fg{ stroke:#FF9A8B; stroke-width:3; fill:none; stroke-linecap:round; stroke-dasharray:88; stroke-dashoffset:0; transition: stroke-dashoffset 1s linear; }
.hearts{ position:absolute; inset:0; pointer-events:none; }
.name-tag{
  position:absolute; left:50%; bottom:-18px; transform:translateX(-50%);
  background:white; border:1px solid rgba(90,54,32,.09); border-radius:999px;
  padding:3px 8px; font-size:.72rem; font-weight:800; display:flex; align-items:center; gap:4px;
  box-shadow:0 2px 8px rgba(90,54,32,.1); white-space:nowrap;
}
.name-tag.small{ bottom:-14px; font-size:.64rem; padding:2px 6px; }
.dot{ width:6px; height:6px; border-radius:50%; background:#FF9A8B; }
.hearts-layer{ position:absolute; inset:0; pointer-events:none; z-index:6; }
.float-heart{ position:absolute; left:50%; top:30%; font-size:16px; color:#FF6B8A; animation: float 900ms ease forwards; }
@keyframes float{ 0%{ transform:translate(-50%,0) scale(.8); opacity:0 } 15%{ opacity:1 } 100%{ transform:translate(-50%,-60px) scale(1.2); opacity:0 } }
.coin-pop{ position:absolute; left:50%; top:18%; transform:translateX(-50%); background: linear-gradient(180deg, #FFC94A, #FF9A3A); color:white; font-weight:900; padding:4px 8px; border-radius:999px; border:2px solid white; opacity:0; pointer-events:none; transition: opacity .2s; z-index:7; }
.coin-pop.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }

/* Treats panel - right, always visible, no extra screens */
.treats{
  width:280px; min-width:260px; max-width:320px;
  background:white; border-radius:var(--radius); border:1px solid rgba(90,54,32,.08); box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden; flex-shrink:0;
}
.treats-head{ padding:10px 12px 8px; border-bottom:1px solid rgba(90,54,32,.08); background: linear-gradient(180deg, #FFF8EC, #FFF1D6); text-align:center; }
.treats-head h3{ margin:0; font-size:1.05rem; font-weight:900; color:#2E1A0A; text-shadow:0 1px 0 rgba(255,255,255,.8); letter-spacing:.02em; }
.treats-head .hint{ font-size:.72rem; opacity:1; font-weight:700; color:#6B3A1A; }
.treats-grid{
  flex:1; overflow:auto; padding:10px; display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; align-content:start;
  -webkit-overflow-scrolling:touch;
}
.treat-card{
  background:white; border:1.5px solid rgba(90,54,32,.08); border-radius:12px; padding:8px 6px;
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  cursor:grab; user-select:none; -webkit-user-select:none;
  transition: transform .12s, border-color .12s, box-shadow .12s, background .12s;
  touch-action:none;
}
.treat-card:hover{ transform: translateY(-2px); border-color:#FFD6A8; box-shadow:0 4px 12px rgba(90,54,32,.08); }
.treat-card:active{ cursor:grabbing; transform: scale(.97); }
.treat-card.selected{ border-color:#FF9A8B; background: #FFF0F0; box-shadow:0 0 0 3px rgba(255,154,139,.18); }
.treat-card.dragging{ opacity:.5; transform: rotate(3deg) scale(.95); }
.treat-icon{
  width:44px; height:44px; border-radius:10px; display:grid; place-items:center; font-size:22px;
  background: linear-gradient(180deg, #FFF8EC, #FFE2B8); border:1.5px solid rgba(90,54,32,.08);
}
.treat-icon.milk::after{ content:"🍼"; } .treat-icon.tuna::after{ content:"🐟"; }
.treat-icon.cookie::after{ content:"🍪"; } .treat-icon.cake::after{ content:"🍰"; }
.treat-icon.cupcake::after{ content:"🧁"; } .treat-icon.drink::after{ content:"☕"; }
.treat-icon.catnip::after{ content:"🌿"; }
.treat-icon.sushi::after{ content:"🍣"; } .treat-icon.donut::after{ content:"🍩"; }
.treat-icon.parfait::after{ content:"🍨"; } .treat-icon.boba::after{ content:"🧋"; }
.treat-icon.mochiSnack::after{ content:"🍡"; }
.bubble-content.sushi::after{ content:"🍣"; } .bubble-content.donut::after{ content:"🍩"; }
.bubble-content.parfait::after{ content:"🍨"; } .bubble-content.boba::after{ content:"🧋"; }
.bubble-content.mochiSnack::after{ content:"🍡"; }
.bubble-content.sushi, .bubble-content.donut, .bubble-content.parfait, .bubble-content.boba, .bubble-content.mochiSnack{ background: linear-gradient(180deg, #FFF8EC, #FFE0F0); }

.treat-name{ font-weight:900; font-size:.84rem; line-height:1.1; color:#2E1A0A; }
.treat-price{ font-size:.78rem; font-weight:900; opacity:1; color:#6B3A1A; background: #FFF1D6; border-radius:999px; padding:1px 6px; display:inline-block; }
.treat-count{ font-weight:900; font-size:.7rem; color:#5A2E14;  font-size:.68rem; background:#FFF1D6; padding:2px 6px; border-radius:999px; font-weight:800; }
.treat-card.affordable .treat-price{ color:#8A4A5A; }
.treat-card:not(.affordable){ opacity:.55; }
.treats-foot{ padding:8px 10px; border-top:1px solid rgba(90,54,32,.08); background: #FFF8EC; display:flex; flex-direction:column; gap:8px; }
.selected-info{ font-size:.72rem; font-weight:600; opacity:.7; text-align:center; min-height:1.2em; }
.invite-btn{
  width:100%; padding:8px 10px; border-radius:999px; border:none;
  background: linear-gradient(180deg, #FFD6A8, #FF9A8B); color:#5A3620; font-weight:900; font-size:.82rem;
  cursor:pointer; box-shadow:0 3px 8px rgba(255,154,58,.2); transition: transform .12s;
}
.invite-btn:hover{ transform: translateY(-1px); }
.invite-btn:active{ transform: scale(.97); }
.invite-btn:disabled{ opacity:.45; cursor:not-allowed; }

/* Status bar */
.status-bar{
  flex-shrink:0;
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; margin:0 8px 6px;
  background:rgba(255,255,255,.92); border:1px solid rgba(90,54,32,.08); border-radius:999px;
  box-shadow:var(--shadow); font-size:.8rem; font-weight:600;
}
.status-dot{ width:8px; height:8px; border-radius:50%; background:#FF9A8B; }
.toast{
  position:fixed; left:50%; bottom:14px; transform:translateX(-50%) translateY(10px);
  background:rgba(90,54,32,.92); color:white; padding:8px 12px; border-radius:999px;
  font-weight:700; font-size:.8rem; opacity:0; pointer-events:none; transition: all .2s; z-index:20;
  max-width: calc(100vw - 20px); text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }


/* Busy café: paintings & toys */
.paintings{ position:absolute; left:50%; top:4.5%; transform:translateX(-50%); display:flex; gap:12px; z-index:4; }
.painting{ width:68px; height:56px; background:white; border:2px solid #E8C9A0; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(90,54,32,.12); font-size:18px; }
.painting em{ font-size:.56rem; font-weight:800; opacity:.6; font-style:normal; }
.painting.p1{ transform:rotate(-1.5deg); background: linear-gradient(180deg, #FFF0F8, #FFE0F0); }
.painting.p2{ transform:rotate(1deg); background: linear-gradient(180deg, #F0E8FF, #E0D8FF); }
.painting.p3{ transform:rotate(-0.8deg); background: linear-gradient(180deg, #FFF8EC, #FFE8F0); }
.cat-toys{ position:absolute; left:0; right:0; bottom:44%; height:0; z-index:4; pointer-events:none; }
.toy{ position:absolute; width:22px; height:22px; background:white; border-radius:50%; border:1.5px solid rgba(90,54,32,.12); display:grid; place-items:center; font-size:13px; box-shadow:0 3px 8px rgba(90,54,32,.1); }
.toy.ball{ left:12%; bottom:12px; background: radial-gradient(circle at 30% 30%, #FFD6E8, #FF9AC0); }
.toy.mouse{ left:72%; bottom:26px; }
.toy.feather{ left:42%; bottom:6px; transform:rotate(18deg); }
.toy.yarn{ left:86%; bottom:10px; }

/* Spacious: more room */
.room{ min-height: 520px; }
.cafe{ min-height: 540px; }

/* Mood faces */
.cat-wrap.mood-sad{ filter: grayscale(.15) brightness(.98); }
.cat-wrap.mood-irritated{ filter: hue-rotate(-8deg) saturate(1.25); animation: irritatedShake .4s ease infinite; }
.cat-wrap.mood-angry{ filter: hue-rotate(-14deg) saturate(1.5) brightness(.96); animation: angryShake .22s ease infinite; }
.cat-wrap.mood-sad .name-tag{ background:#FFF8D0; }
.cat-wrap.mood-irritated .name-tag{ background:#FFE0D0; }
.cat-wrap.mood-angry .name-tag{ background:#FFD0D0; border-color:#FF9A8B; }
@keyframes irritatedShake{ 0%,100%{ transform:translateX(0)} 25%{ transform:translateX(-2px)} 75%{ transform:translateX(2px)} }
@keyframes angryShake{ 0%,100%{ transform:translateX(0) rotate(0)} 25%{ transform:translateX(-3px) rotate(-1deg)} 75%{ transform:translateX(3px) rotate(1deg)} }

/* Poo */
.poo-layer{ position:absolute; inset:0; z-index:8; pointer-events:none; }
.poo{
  position:absolute; width:42px; height:36px; background:#6B4A35; border-radius:50% 50% 40% 40% / 60% 60% 40% 40%;
  border:2px solid #4A3018; display:grid; place-items:center; font-size:18px; cursor:pointer; pointer-events:auto;
  box-shadow:0 6px 12px rgba(0,0,0,.18); animation: pooIn .28s ease;
}
.poo::after{ content:"💩"; }
.poo .poo-timer{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:28px; height:28px; background:white; border-radius:50%; border:1.5px solid #E8C9A0; display:grid; place-items:center; font-size:.62rem; font-weight:900; }
.poo .poo-timer svg{ position:absolute; inset:0; transform:rotate(-90deg); width:28px; height:28px; }
.poo .poo-timer .bg{ stroke:#FFE0A8; stroke-width:3; fill:none; }
.poo .poo-timer .fg{ stroke:#8B5A2B; stroke-width:3; fill:none; stroke-linecap:round; stroke-dasharray:88; }
@keyframes pooIn{ from{ transform:scale(.4); opacity:0 } to{ transform:scale(1); opacity:1 } }
.poo:hover{ transform:scale(1.08); }

/* Difficulty HUD */
.pill.difficulty{ background: linear-gradient(180deg, #FFF0FA, #FFE0F0); border-color:#E8A0C8; }


/* Player + Wardrobe */
.pill.player{ cursor:pointer; background: linear-gradient(180deg, #FFF0FA, #FFE0F0); border-color:#E8A0C8; padding:4px 6px 4px 4px; gap:8px; box-shadow:0 3px 10px rgba(200,120,160,.18); border-width:2px; }
.pill.player:hover{ transform: translateY(-1px) scale(1.02); box-shadow:0 4px 14px rgba(200,120,160,.24); }
.pill.player .pill-icon{ width:36px; height:36px; border-radius:50%; background:white; border:1.8px solid #E8A0C8; display:grid; place-items:center; font-size:18px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.08); }
.pill.player .pill-icon svg{ width:36px; height:36px; display:block; }
#playerName{ font-size:.92rem; font-weight:900; letter-spacing:-.01em; }
.wardrobe-btn{ padding:6px 12px; border-radius:999px; border:1px solid rgba(90,54,32,.12); background: linear-gradient(180deg, #FFD6E8, #FFB3D0); font-weight:900; font-size:.78rem; cursor:pointer; box-shadow:0 2px 8px rgba(90,54,32,.08); transition: transform .12s; }
.wardrobe-btn:hover{ transform: translateY(-1px); }
.wardrobe-btn:active{ transform: scale(.97); }
.wardrobe-overlay{ position:fixed; inset:0; background: rgba(60,30,20,.18); backdrop-filter: none; -webkit-backdrop-filter: none; display:flex; align-items:center; justify-content:center; z-index:30; padding:14px; }
.wardrobe-overlay.hidden{ display:none; }
.wardrobe-panel{ width:min(520px, 96vw); max-height:92vh; overflow:auto; background: #FFF8EC; border:2px solid #E8C9A0; border-radius:18px; box-shadow:0 18px 36px rgba(90,54,32,.28); display:flex; flex-direction:column; }
.wardrobe-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid rgba(90,54,32,.08); background: linear-gradient(180deg, #FFF0FA, #FFE8F0); border-radius:18px 18px 0 0; }
.wardrobe-head h3{ margin:0; font-size:1rem; }
.wardrobe-head .small{ width:30px; height:30px; font-size:14px; }
.wardrobe-body{ padding:14px; display:flex; flex-direction:column; gap:12px; }
.avatar-preview{ width:100%; height:220px; background: white; border:1.5px solid rgba(90,54,32,.08); border-radius:14px; display:grid; place-items:center; overflow:hidden; }
.wardrobe-label{ font-weight:800; font-size:.82rem; display:flex; flex-direction:column; gap:6px; }
.wardrobe-label input{ padding:8px 10px; border-radius:10px; border:1.5px solid #E8C9A0; font-weight:700; font-size:.9rem; background:white; }
.opts{ display:flex; flex-direction:column; gap:10px; }
.opt-group span{ font-size:.76rem; font-weight:800; opacity:.7; }
.chip-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.chip{ padding:6px 10px; border-radius:999px; border:1.5px solid rgba(90,54,32,.12); background:white; font-weight:800; font-size:.74rem; cursor:pointer; transition: all .12s; }
.chip.active{ background: #FFD6E8; border-color:#FF9A8B; box-shadow:0 0 0 3px rgba(255,154,139,.18); }
.chip:hover{ transform: translateY(-1px); }
.save-btn{ margin:0 14px 14px; padding:10px; border-radius:999px; border:none; background: linear-gradient(180deg, #FFD6A8, #FF9A8B); font-weight:900; cursor:pointer; box-shadow:0 4px 12px rgba(255,154,58,.2); }
.save-btn:hover{ transform: translateY(-1px); }

/* Responsive - keep horizontal, full fit */
@media (max-width: 900px) and (min-width: 641px){
  .hud{ padding:4px 8px; gap:5px; flex-wrap:nowrap; overflow:hidden; min-height:38px; height:38px; }
  .logo-text{ font-size:.82rem; }
  .logo-sub{ display:none; }
  .hud-center{ gap:4px; flex-wrap:nowrap; overflow:hidden; }
  .hud-center .pill.coins{ display:none; }
  .pill{ padding:3px 7px; font-size:.68rem; }
  .bar{ width:60px; }
  .treats{ width:170px; min-width:160px; }
  .cat-wrap{ width: clamp(130px, 15vw, 170px); }
  .cat-wrap.small{ width: clamp(100px, 12vw, 140px); }
  .dessert-board{ width:74%; }
  .layout{ padding:4px; gap:4px; }
}
@media (max-width: 640px){
  /* MINIMAL HUD - only small line with avatar, levels, wardrobe */
  .hud{ flex-wrap:nowrap; gap:4px; padding:3px 6px; margin:0; border-radius:0; min-height:32px; height:32px; overflow:hidden; }
  .logo{ gap:4px; }
  .logo-icon{ width:22px; height:22px; font-size:12px; border-radius:6px; }
  .logo-text{ font-size:.72rem; }
  .logo-sub{ display:none !important; }
  .hud-center{ gap:3px; flex-wrap:nowrap; overflow:hidden; }
  .hud-center .pill.coins, .hud-center .pill.happy, .hud-center .pill.cats{ display:none !important; } /* hide coins/happy/cats on phone, keep only levels */
  .hud-center .pill.level{ padding:2px 6px; font-size:.62rem; }
  .hud-center .pill.friend{ padding:2px 6px; font-size:.62rem; }
  .hud-center .bar{ width:36px; height:5px; }
  .hud-center .bar.small{ width:28px; height:4px; }
  .hud-right{ gap:3px; flex-shrink:0; }
  .hud-right .pill.player{ padding:2px 5px; font-size:.62rem; gap:3px; }
  .hud-right .pill.player #playerName{ max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .play-btn, .wardrobe-btn, .shop-btn{ padding:4px 6px; font-size:.64rem; border-radius:999px; }
  .icon-btn{ width:26px; height:26px; font-size:12px; }
  .layout{ gap:0; padding:0; flex:1; min-height:0; display:flex; flex-direction:row; }
  .cafe{ flex:1; min-width:0; min-height:0; border-radius:0; }
  .room{ flex:1; min-height:0; }
  .treats{ width:88px; min-width:84px; max-width:88px; border-radius:0; border-left:1px solid rgba(90,54,32,.08); }
  .treats-head{ padding:4px 4px 2px; }
  .treats-head h3{ font-size:.68rem; }
  .treats-head .hint{ display:none; }
  .treats-grid{ grid-template-columns: 1fr; gap:3px; padding:3px; }
  .treat-card{ padding:3px 2px; }
  .treat-icon{ width:26px; height:26px; font-size:13px; }
  .treat-name{ font-size:.6rem; }
  .treat-price{ font-size:.6rem; padding:1px 4px; }
  .dessert-board{ width:96%; top:3%; padding:4px 6px; transform:translateX(-50%) scale(.9); transform-origin: top center; }
  .board-title{ font-size:.66rem; margin-bottom:4px; }
  .dessert-grid{ gap:2px; }
  .dessert{ padding:2px 1px; }
  .dessert-img{ height:26px; font-size:12px; }
  .dessert span{ font-size:.52rem; }
  .table{ transform: scale(.62); }
  .sofa{ transform: scale(.62); }
  .bed{ transform: scale(.68); }
  .cat-wrap{ width: clamp(110px, 20vw, 140px) !important; }
  .cat-wrap.small{ width: clamp(90px, 16vw, 120px) !important; }
  .cat-wrap.kitten{ width: clamp(80px, 14vw, 100px) !important; }
  .status-bar{ padding:4px 6px; font-size:.68rem; }
  .wardrobe-panel{ max-width:94vw; max-height:88vh; }
}
@media (max-height: 500px) and (orientation: landscape){
  .app{ height:100dvh; height:100svh; display:flex; flex-direction:column; overflow:hidden; }
  .hud{ flex-shrink:0; height:30px; min-height:30px; padding:2px 6px; margin:0; border-radius:0; gap:3px; }
  .hud-center .pill.coins, .hud-center .pill.happy, .hud-center .pill.cats{ display:none !important; }
  .layout{ flex:1; min-height:0; gap:0; padding:0; overflow:hidden; }
  .cafe{ flex:1; min-height:0; }
  .room{ min-height:0; flex:1; }
  .treats{ width:110px; min-width:100px; }
  .dessert-board{ top:1%; padding:3px 6px; transform:translateX(-50%) scale(.85); }
}

.dessert-img.sushi::after{ content:"🍣"; } .dessert-img.donut::after{ content:"🍩"; }
.dessert-img.milk{ background: linear-gradient(180deg, #FFF8EC, #E6F7FF); } .dessert-img.milk::after{ content:"🍼"; }
.dessert-img.tuna{ background: linear-gradient(180deg, #FFE8D0, #FFD6B8); } .dessert-img.tuna::after{ content:"🐟"; }
.dessert-img.cookie{ background: linear-gradient(180deg, #FFF1D6, #FDE8C8); } .dessert-img.cookie::after{ content:"🍪"; }
.dessert-img.cake{ background: linear-gradient(180deg, #FFD6E8, #FFEEDC); } .dessert-img.cake::after{ content:"🍰"; }
.dessert-img.catnip{ background: linear-gradient(180deg, #E8FFE8, #D0F0C8); } .dessert-img.catnip::after{ content:"🌿"; }
.dessert-img.parfait{ background: linear-gradient(180deg, #FFF0F8, #FFE8F0); } .dessert-img.parfait::after{ content:"🍨"; }
.dessert-img.boba{ background: linear-gradient(180deg, #F0E8FF, #E8DDFF); } .dessert-img.boba::after{ content:"🧋"; }
.dessert-img.mochiSnack{ background: linear-gradient(180deg, #FFE8F0, #FFD6E8); } .dessert-img.mochiSnack::after{ content:"🍡"; }


/* Cat status popup - hover near cat + click to pin */
.cat-status{
  position:absolute; min-width:190px; max-width:220px;
  background: rgba(255,255,255,.98); border:2px solid #E8C9A0; border-radius:14px;
  box-shadow:0 10px 24px rgba(90,54,32,.18), 0 2px 8px rgba(90,54,32,.12);
  padding:10px 12px 10px; z-index:12; pointer-events:auto;
  transform: translate(-50%, -100%); transition: opacity .18s, transform .18s;
}
.cat-status.hidden{ opacity:0; pointer-events:none; transform: translate(-50%, -94%); }
.cat-status-close{ position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; border:1px solid rgba(90,54,32,.12); background:white; cursor:pointer; font-size:10px; display:grid; place-items:center; }
.cat-status-head{ display:flex; align-items:center; gap:6px; font-size:.92rem; margin-bottom:8px; }
.cat-status-icon{ width:28px; height:28px; display:grid; place-items:center; background:#FFF1D6; border-radius:8px; border:1px solid rgba(90,54,32,.08); font-size:16px; }
.cat-status-mood{ margin-left:auto; font-size:.7rem; font-weight:800; padding:2px 7px; border-radius:999px; background:#FFF1D6; text-transform:capitalize; }
.cat-status-mood.mood-angry{ background:#FFD0D0; color:#A02A2A; }
.cat-status-mood.mood-irritated{ background:#FFE0D0; color:#A05220; }
.cat-status-mood.mood-sad{ background:#FFF8D0; color:#8A6A10; }
.cat-status-row{ display:flex; align-items:center; gap:6px; font-size:.76rem; font-weight:700; margin-top:4px; }
.cat-status-row.small{ font-size:.74rem; opacity:.85; }
.hunger-bar{ flex:1; height:8px; background:#FFF1D6; border-radius:999px; overflow:hidden; border:1px solid rgba(90,54,32,.08); }
.hunger-fill{ height:100%; width:0%; background: linear-gradient(90deg, #7ED49A, #FFD6A8); border-radius:999px; transition: width .3s, background .3s; }
.hunger-fill.mid{ background: linear-gradient(90deg, #FFD6A8, #FF9A8B); }
.hunger-fill.high{ background: linear-gradient(90deg, #FF9A8B, #FF4444); }
.cat-status-hint{ margin-top:8px; font-size:.68rem; opacity:.6; text-align:center; }
.cat-wrap.hover-near{ filter: drop-shadow(0 0 10px rgba(255,180,80,.45)); }
.cat-wrap.hover-near .name-tag{ background:#FFF8EC; border-color:#FFD6A8; box-shadow:0 0 0 3px rgba(255,214,168,.35); }


/* higher sensitivity */
.cat-wrap::before{ content:""; position:absolute; inset:-12px; border-radius:18px; }

/* Bigger space for up to 25 cats */
.cafe{ min-height: 0; }
.room{ min-height: 0; }
.layout{ gap:6px; padding:6px; background: #FFF8EC; }
.treats{ border-radius: 0 12px 12px 0; }
.cats-layer{ inset: 8px; }
.cats-layer .cat-wrap{ filter: drop-shadow(0 3px 6px rgba(0,0,0,.18)); }

/* Remove pink empty sides - already done, ensure no side margins */
.hud{ margin: 0; border-radius: 0 0 12px 12px; }

/* Glitter for unlocks */
.glitter{ position:absolute; pointer-events:none; font-size:14px; animation: glitterFloat 900ms ease forwards; }
@keyframes glitterFloat{ 0%{ transform: translateY(0) scale(0); opacity:1 } 100%{ transform: translateY(-18px) scale(1); opacity:0 } }
.treat-card.unlocked-glitter{ animation: unlockPulse 900ms ease; border-color:#FFD700; box-shadow:0 0 0 4px rgba(255,215,0,.25), 0 8px 18px rgba(255,185,0,.25); }
@keyframes unlockPulse{ 0%{ transform: scale(1)} 30%{ transform: scale(1.06)} 100%{ transform: scale(1)} }
.dessert-board.board-glitter{ animation: boardShine 900ms ease; }
@keyframes boardShine{ 0%{ box-shadow:0 8px 18px rgba(90,54,32,.22)} 50%{ box-shadow:0 0 0 6px rgba(255,215,0,.35), 0 12px 24px rgba(255,185,0,.3)} 100%{ box-shadow:0 8px 18px rgba(90,54,32,.22)} }

/* Bonus bubble every 10s */
.bonus-layer{ position:absolute; inset:0; z-index:11; pointer-events:none; }
.bonus-bubble{
  position:absolute; min-width:90px; max-width:140px;
  background: linear-gradient(180deg, #FFF8EC, #FFF1D6); border:2px solid #FFD700; border-radius:14px;
  padding:8px 10px; display:flex; flex-direction:column; align-items:center; gap:4px;
  box-shadow:0 8px 18px rgba(255,165,0,.22), 0 0 0 4px rgba(255,215,0,.18);
  pointer-events:auto; cursor:pointer; animation: bonusFloat 2.2s ease-in-out infinite;
}
.bonus-bubble:hover{ transform: scale(1.04); }
@keyframes bonusFloat{ 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(-6px)} }
.bonus-icon{ font-size:22px; }
.bonus-label{ font-size:.78rem; font-weight:900; text-align:center; }
.bonus-timer{ font-size:.68rem; font-weight:800; background:#FFF1D6; padding:2px 6px; border-radius:999px; }
.bonus-glitter{ position:relative; overflow: visible; }
.bonus-glitter::after{ content:"✨"; position:absolute; top:-8px; right:-8px; font-size:14px; animation: glitterFloat 900ms ease infinite; }

/* Green points */
.coin-pop.green{ background: linear-gradient(180deg, #7ED49A, #4CAF50) !important; }

/* Single counter 1-2-3: make bubble timer more prominent */
.timer span{ font-size:.72rem; font-weight:900; color:#5A3620; }
.timer .fg{ stroke-width:3.2; }

/* Hide duplicate second counter in status popup is handled via JS display:none */


/* hide second counter - only 1-3s bubble remains */
#catStatusTimer{ display:none !important; }
/* cat status timer hidden only */

/* wardrobe small circle head + square body + small neck */
.wardrobe-panel .opts{ max-height: 42vh; overflow:auto; padding-right:4px; }

/* Extra carpets */
.carpets-extra{ position:absolute; left:0; right:0; bottom:10%; height:0; z-index:2; pointer-events:none; }
.carpet-small{ position:absolute; width:120px; height:84px; background: radial-gradient(ellipse at 50% 40%, #FFF6E8, #E8D0A8); border:1.6px solid rgba(255,255,255,.8); border-radius:18px; box-shadow: 0 6px 14px rgba(60,30,15,.12); opacity:.9; }
.carpet-small.c1{ left:6%; bottom:22px; transform:rotate(-2deg); }
.carpet-small.c2{ right:8%; bottom:18px; transform:rotate(1.5deg); }
.carpet-small::after{ content:"🐾"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:14px; opacity:.18; }

/* Hanging lamps */
.lamps{ position:absolute; left:0; right:0; top:0; height:72px; z-index:6; pointer-events:none; display:flex; justify-content:space-around; padding:0 10%; }
.lamp{ position:relative; width:36px; display:flex; flex-direction:column; align-items:center; }
.lamp::before{ content:""; width:2px; height:28px; background: linear-gradient(180deg, #8B5A2B, #C9A86A); }
.lamp::after{ content:""; width:36px; height:18px; background: radial-gradient(ellipse at 50% 0%, #FFF8A0 0%, #FFD86A 55%, #E8B84A 100%); border:1.5px solid #C9A00A; border-radius: 0 0 14px 14px; box-shadow: 0 4px 12px rgba(255,180,40,.32), 0 0 20px rgba(255,220,120,.42); }
.lamp .glow{ position:absolute; top:46px; width:56px; height:22px; background: radial-gradient(ellipse at 50% 0%, rgba(255,220,120,.32), transparent 70%); border-radius:50%; }

/* More beautiful pictures on wall */
.paintings{ position:absolute; left:50%; top:5.2%; transform:translateX(-50%); display:flex; gap:14px; z-index:4; }
.painting{ width:74px; height:62px; background:white; border:2.2px solid #D8C4A8; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(90,54,32,.14), inset 0 2px 0 rgba(255,255,255,.9); font-size:18px; overflow:hidden; }
.painting em{ font-size:.58rem; font-weight:800; opacity:.62; font-style:normal; letter-spacing:.04em; }
.painting.p1{ transform:rotate(-1.4deg); background: linear-gradient(180deg, #FFFEF8, #FFF0E0); }
.painting.p2{ transform:rotate(1.1deg); background: linear-gradient(180deg, #F0FAFF, #E0EFFF); }
.painting.p3{ transform:rotate(-0.7deg); background: linear-gradient(180deg, #FFF8F6, #FFE8F0); }
.painting.p4{ transform:rotate(1.6deg); background: linear-gradient(180deg, #F0FFF4, #E0FFE8); }
.painting.p5{ transform:rotate(-1.1deg); background: linear-gradient(180deg, #FFF8EC, #FFE8D0); }

.board-have{ display:block; font-size:.58rem; font-weight:800; color:#5A3620; background:rgba(255,255,255,.85); padding:1px 5px; border-radius:999px; margin-top:2px; }

.cat-wrap.fading{ opacity:0.35; filter: blur(1px) grayscale(.2); transition: opacity 900ms ease, filter 900ms ease; }
.cat-wrap.fading-out{ animation: catFadeOut 900ms ease forwards; }
@keyframes catFadeOut{ 0%{ opacity:1; transform:scale(1)}  100%{ opacity:0; transform:scale(0.85)} }
.cat-wrap.fading-in{ animation: catFadeIn 900ms ease forwards; }
@keyframes catFadeIn{ 0%{ opacity:0; transform:scale(0.85)} 100%{ opacity:1; transform:scale(1)} }

.cat-wrap.kitten{ width: clamp(110px, 12vw, 150px); }
.cat-wrap.kitten .cat{ transform: scale(0.82); transform-origin: center bottom; }
.cat-wrap.kitten .name-tag::after{ content:" 🍼"; font-size:.7em; }
.toy-layer{ position:absolute; inset:0; z-index:9; pointer-events:none; }
.play-toy{ position:absolute; width:22px; height:22px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #FF6B6B, #C92A2A); border:2px solid white; box-shadow:0 4px 10px rgba(0,0,0,.2); pointer-events:auto; cursor:pointer; display:grid; place-items:center; font-size:12px; animation: toyWiggle 600ms ease infinite; }
@keyframes toyWiggle{ 0%,100%{ transform:rotate(-6deg)} 50%{ transform:rotate(6deg)} }
.play-btn{ padding:6px 10px; border-radius:999px; border:1.5px solid #E8C9A0; background:linear-gradient(180deg, #FFF8EC, #FFE2B8); font-weight:800; font-size:.78rem; cursor:pointer; }
.play-btn:hover{ transform: translateY(-1px); }

/* Sleeping hour - all cats sleep 5s every 20s */
.cat-wrap.sleeping{ filter: brightness(0.92) saturate(0.85); }
.cat-wrap.sleeping .cat{ animation: sleepBreathe 1.4s ease-in-out infinite; }
@keyframes sleepBreathe{ 0%,100%{ transform: scale(1)} 50%{ transform: scale(1.015)} }
.cat-wrap.sleeping::after{ content:"Zzz"; position:absolute; top:-8px; right:6px; font-size:14px; color:#8A6BC0; font-weight:900; animation: zzzFloat 1.2s ease infinite; text-shadow: 0 2px 6px rgba(138,107,192,.35); }
@keyframes zzzFloat{ 0%{ transform: translateY(0) scale(0.9); opacity:0 } 20%{ opacity:1 } 100%{ transform: translateY(-18px) scale(1.1); opacity:0 } }
.sleeping-hour-banner{ position:absolute; left:50%; top:10px; transform:translateX(-50%); background: linear-gradient(180deg, #E8D9FF, #C9A0FF); border:2px solid #8A6BC0; color:#4A2A7A; padding:6px 14px; border-radius:999px; font-weight:900; font-size:.82rem; box-shadow:0 6px 14px rgba(138,107,192,.32); z-index:12; display:flex; align-items:center; gap:6px; animation: sleepBannerIn 400ms ease; }
@keyframes sleepBannerIn{ from{ transform:translateX(-50%) translateY(-12px) scale(.9); opacity:0 } to{ transform:translateX(-50%) translateY(0) scale(1); opacity:1 } }
.sleeping-hour-banner.hidden{ display:none; }
.cat-wrap.sleeping .name-tag{ background:#E8D9FF; border-color:#C9A0FF; }

.restock-btn{ width:100%; margin-top:6px; padding:8px 10px; border-radius:999px; border:1.5px solid #C9A86A; background: linear-gradient(180deg, #FFF8EC, #FFE9C8); font-weight:900; font-size:.78rem; cursor:pointer; box-shadow:0 3px 8px rgba(200,170,120,.22); transition: transform .12s, opacity .2s; }
.restock-btn:hover{ transform: translateY(-1px); }
.restock-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.restock-btn.ready{ background: linear-gradient(180deg, #FFD700, #FFB347); border-color:#E8A00A; color:#5A3620; animation: restockPulse 1.2s ease infinite; }
@keyframes restockPulse{ 0%,100%{ transform:scale(1)} 50%{ transform:scale(1.03)} }
.restock-hint{ font-size:.68rem; opacity:.6; text-align:center; margin-top:4px; }

.board-subtitle{ font-size:.7rem; opacity:1; font-weight:800; color:#FFFFFF; text-shadow:0 1px 3px rgba(0,0,0,.3); text-align:center; margin-bottom:6px; }

.counter{ display:none !important; }

/* Drag cats after 6 minutes */
.cat-wrap.dragging-cat{ cursor:grabbing !important; filter: drop-shadow(0 16px 24px rgba(90,54,32,.25)) brightness(1.02); z-index:20 !important; opacity:.96; }
.cat-wrap.dragging-cat .cat{ transform: scale(1.04); }
.cat-wrap:not(.dragging-cat){ cursor:pointer; }

/* Cat house - floor line, bigger, and inside cats */
.cat-house.drag-over-house{ transform: translateX(-50%) scale(1.04); filter: drop-shadow(0 12px 24px rgba(60,30,15,.28)) brightness(1.04); }
.cat-house.has-cat .house-door{ box-shadow: inset 0 4px 10px rgba(0,0,0,.5), 0 0 0 3px rgba(255,215,0,.35); }
.cat-wrap.inside-house{ filter: brightness(0.98) saturate(1.02); }
.cat-wrap.inside-house .name-tag{ background:#FFF1D6; border-color:#FFD6A8; }
.cat-wrap.inside-house .cat{ transform: scale(0.88); opacity:.96; }


/* Furniture Shop button */
.shop-btn{ background: linear-gradient(180deg, #FFE8A0, #FFD07A); border:1.5px solid #E8A86A; border-radius:999px; padding:7px 12px; font-weight:900; font-size:.82rem; cursor:pointer; box-shadow:0 3px 10px rgba(255,165,0,.18); transition: transform .12s; }
.shop-btn:hover{ transform: translateY(-1px) scale(1.03); }
.shop-btn:active{ transform: scale(.97); }

/* Wall variants */
.wall.wall-vibrant{ background: repeating-linear-gradient(90deg, #FF6B9A 0 18px, #FF8FAB 18px 36px, #FFB3D9 36px 54px, #C86BFA 54px 72px, #7DD3FF 72px 90px, #FFD93D 90px 108px, #FF6B9A 108px 126px), linear-gradient(180deg, #FFF0F5 0%, #FFE0EC 50%, #E0C8FF 100%); }
.wall.wall-pastel{ background: repeating-linear-gradient(90deg, #FFE0F0 0 20px, #FFD6E8 20px 40px, #E8D9FF 40px 60px, #FFE8F0 60px 80px), linear-gradient(180deg, #FFF8FA 0%, #FFF0F0 100%); }
.wall.wall-mint{ background: repeating-linear-gradient(90deg, #A8E6CF 0 20px, #DCEDC1 20px 40px, #B8E6B8 40px 60px, #E0F7E0 60px 80px), linear-gradient(180deg, #F0FFF4 0%, #E0F5E8 100%); }
.wall.wall-sunset{ background: repeating-linear-gradient(90deg, #FF8A65 0 20px, #FFAB91 20px 40px, #FFCC80 40px 60px, #FFE0B2 60px 80px), linear-gradient(180deg, #FFF3E0 0%, #FFE0B2 100%); }
.wall.wall-ocean{ background: repeating-linear-gradient(90deg, #81D4FA 0 20px, #B3E5FC 20px 40px, #4FC3F7 40px 60px, #E1F5FE 60px 80px), linear-gradient(180deg, #E1F5FE 0%, #B3E5FC 100%); }
.wall.wall-brick{ background: 
    linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 42px), linear-gradient(0deg, rgba(0,0,0,.1) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #D7A08F 0%, #C98A76 50%, #B0705E 100%); background-size: 42px 22px, 42px 22px, auto; }

/* Floor variants */
.floor.floor-dark{ background: linear-gradient(180deg, #8B5A2B 0%, #6B3A1A 45%, #5A2E14 100%); }
.floor.floor-light{ background: linear-gradient(180deg, #E8C9A0 0%, #D9B08A 45%, #C9A86A 100%); }
.floor.floor-walnut{ background: linear-gradient(180deg, #5A2E14 0%, #3E1F0D 55%, #2E1508 100%); }
.floor.floor-rustic{ background: linear-gradient(180deg, #A0522D 0%, #8B4513 45%, #6B3A1A 100%); }
.floor.floor-whitewash{ background: linear-gradient(180deg, #F5E6D3 0%, #E8D9C8 45%, #D8C4A8 100%); }
.floor.floor-stone{ background: radial-gradient(ellipse at 30% 20%, #E8E8E8 0%, #D0D0D0 45%, #B8B8B8 100%), linear-gradient(180deg, #E0E0E0, #C8C8C8); }

/* Shop chip previews */
.wall-chip{ width:56px; height:36px; border-radius:8px; border:1.5px solid rgba(90,54,32,.15); }
.floor-chip{ width:56px; height:36px; border-radius:8px; border:1.5px solid rgba(90,54,32,.15); }
.shop-locked{ opacity:.55; position:relative; }
.shop-locked::after{ content:"🔒 300¢"; position:absolute; inset:0; display:grid; place-items:center; background:rgba(255,255,255,.72); border-radius:8px; font-size:.62rem; font-weight:900; color:#6B3A1A; }
.chip.shop-owned{ border-color:#7ED49A; }

/* Mobile - small HUD line only, game takes rest */
@media (max-width: 640px) and (orientation: portrait){
  .app{ height:100dvh; height:100svh; overflow:hidden; display:flex; flex-direction:column; }
  .hud{ flex-shrink:0; height:32px; min-height:32px; max-height:32px; padding:2px 6px; gap:3px; margin:0; border-radius:0; font-size:11px; overflow:hidden; }
  .layout{ flex:1; min-height:0; display:flex; flex-direction:row; gap:0; padding:0; overflow:hidden; }
  .cafe{ flex:1; min-width:0; min-height:0; }
  .treats{ width:84px; min-width:84px; max-width:84px; flex-shrink:0; overflow:auto; }
}
@media (max-width: 500px){
  .dessert-board{ width: 94%; padding: 8px 6px; }
  .dessert-grid{ grid-template-columns: repeat(4, 1fr); gap:4px; }
  .dessert:nth-child(n+9){ display:none; } /* hide extra on very small to prevent overlap */
  .furniture{ opacity:.92; }
  .cat-house{ width: 260px !important; height: 140px !important; }
}
/* Force landscape hint on very narrow portrait - show rotate prompt */
@media screen and (orientation: portrait) and (max-width: 700px){
  body::before{
    content: "↻ Rotate for best play — landscape";
    position: fixed; top:6px; left:50%; transform:translateX(-50%);
    background: rgba(255,255,255,.92); border:1px solid rgba(90,54,32,.12); border-radius:999px;
    padding:4px 10px; font-size:11px; font-weight:800; color:#6B3A1A; z-index:99; box-shadow:0 2px 8px rgba(0,0,0,.1);
    pointer-events:none;
  }
}

/* cat house removed per request */
#catHouse{ display:none !important; }

/* Desktop min-height - not on phone/tablet */
@media (min-width: 901px){ .cafe{ min-height:620px; } .room{ min-height:580px; } }

/* === MOBILE ONLY: bottom horizontal treats bar, full cafe visible === */
@media (max-width: 900px){
  .app{ height:100dvh; height:100svh; overflow:hidden; display:flex; flex-direction:column; }
  .hud{ flex-shrink:0; height:30px; min-height:30px; max-height:30px; padding:2px 6px; margin:0; border-radius:0; gap:4px; overflow:hidden; }
  .hud .logo-icon{ width:22px; height:22px; font-size:12px; }
  .hud .logo-text{ font-size:.74rem; }
  .hud .logo-sub{ display:none !important; }
  .hud-center{ gap:3px; flex-wrap:nowrap; overflow:hidden; }
  /* keep only levels on mobile, hide coins/happy/cats to save space */
  .hud-center .pill.coins, .hud-center .pill.happy, .hud-center .pill.cats{ display:none !important; }
  .hud-center .pill.level, .hud-center .pill.friend{ padding:2px 6px; font-size:.62rem; }
  .hud-center .bar{ width:36px; height:5px; }
  .hud-center .bar.small{ width:28px; height:4px; }
  .hud-right{ gap:3px; flex-shrink:0; }
  .hud-right .pill.player{ padding:2px 5px; font-size:.62rem; gap:4px; }
  .hud-right .pill.player .pill-icon{ width:26px; height:26px; font-size:12px; }
  .hud-right .pill.player #playerName{ max-width:54px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .play-btn, .wardrobe-btn, .shop-btn{ padding:4px 7px; font-size:.64rem; border-radius:999px; }
  .icon-btn{ width:26px; height:26px; font-size:12px; }
  .layout{ flex:1; min-height:0; display:flex; flex-direction:column !important; gap:0; padding:0; overflow:hidden; background:#FFF8EC; }
  .cafe{ flex:1; min-height:0 !important; min-width:0; order:1; border-radius:0; overflow:hidden; }
  .room{ flex:1; min-height:0 !important; }
  /* bottom treats bar - horizontal swipe */
  .treats{ width:100% !important; min-width:0 !important; max-width:none !important; height:112px !important; min-height:112px !important; max-height:112px !important; flex-shrink:0; order:2; border-radius:0 !important; border-top:1.5px solid rgba(90,54,32,.10); border-left:none; border-right:none; border-bottom:none; display:flex !important; flex-direction:column !important; overflow:hidden; background:white; box-shadow:0 -4px 12px rgba(90,54,32,.08); }
  .treats-head{ padding:4px 8px 3px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(180deg, #FFF8EC, #FFF1D6); border-bottom:1px solid rgba(90,54,32,.06); }
  .treats-head h3{ font-size:.70rem; margin:0; }
  .treats-head .hint{ display:block !important; font-size:.58rem; opacity:.7; }
  .treats-grid{ flex:1; display:flex !important; flex-wrap:nowrap !important; grid-template-columns:none !important; overflow-x:auto !important; overflow-y:hidden !important; gap:8px !important; padding:6px 8px 10px !important; scroll-snap-type:x proximity; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain; -webkit-scroll-snap-type:x proximity; touch-action:pan-x; will-change:scroll-position; align-items:stretch; }
  .treats-grid::-webkit-scrollbar{ display:none; }
  .treat-card{ flex:0 0 74px !important; min-width:74px !important; scroll-snap-align:start; scroll-snap-stop:normal; padding:5px 3px !important; gap:3px !important; touch-action:pan-x; -webkit-touch-callout:none; user-select:none; }
  .treat-icon{ width:30px !important; height:30px !important; font-size:15px !important; }
  .treat-name{ font-size:.58rem !important; line-height:1.1; }
  .treat-price{ font-size:.58rem !important; }
  .treat-count{ font-size:.58rem !important; }
  .treats-foot{ display:flex !important; flex-direction:row !important; gap:6px !important; padding:4px 8px !important; flex-shrink:0; align-items:center; justify-content:center; border-top:1px solid rgba(90,54,32,.06); background:#FFF8EC; } .treats-foot .selected-info{ display:none !important; } .treats-foot .invite-btn, .treats-foot .restock-btn{ flex:1; padding:5px 6px !important; font-size:.62rem !important; } .treats-foot .restock-hint{ display:none !important; }
  .status-bar{ flex-shrink:0; padding:3px 8px; font-size:.64rem; margin:0; border-radius:0; border-left:none; border-right:none; }
  /* keep scene fully visible - scale furniture/cats smaller on mobile bottom-bar layout */
  .dessert-board{ width:min(560px, 84%) !important; top:1% !important; padding:5px 6px !important; transform:translateX(-50%) scale(.82) !important; transform-origin:top center; }
  .board-title{ font-size:.62rem !important; }
  .dessert-grid{ gap:3px !important; }
  .dessert{ padding:2px 1px !important; }
  .dessert-img{ height:24px !important; }
  .dessert span{ font-size:.48rem !important; }
  .cat-wrap{ width: clamp(96px, 18vw, 126px) !important; }
  .cat-wrap.small{ width: clamp(80px, 14vw, 108px) !important; }
  .table{ transform: scale(.58) !important; }
  .sofa{ transform: scale(.58) !important; }
  .bed{ transform: scale(.62) !important; }
  /* mobile: keep only what cat needs, hide progress/timer, reduce overload */
  .thought{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; top:-38px !important; }
  .thought .bubble{ background:white; border:2px solid #FFD6A8; border-radius:12px; padding:4px 5px; box-shadow:0 4px 10px rgba(90,54,32,.14); }
  .thought .timer, .thought .bubble-label, .thought .tail{ display:none !important; }
  .thought .bubble-content{ width:32px !important; height:32px !important; font-size:18px !important; }
  /* hide overload - keep only game scene + treat menu + avatar/shop */
  .status-bar{ display:none !important; }
  .hud-center{ display:none !important; } /* hide all level/friend bars on mobile */
  .hud-right .icon-btn#musicBtn, .hud-right .icon-btn#soundBtn{ display:none !important; }
  .paintings, .cat-toys, .lamps, .carpets-extra, .wall-deco{ display:none !important; }
  .furniture .table .cloth, .furniture .table .vase{ display:none !important; }
  .cat-status{ display:none !important; } /* hide detailed popup on mobile */
  .sleeping-hour-banner{ font-size:.62rem !important; padding:3px 6px !important; }

}
@media (max-width: 900px) and (orientation: landscape){
  .treats{ height:100px !important; min-height:100px !important; max-height:100px !important; }
  .dessert-board{ transform:translateX(-50%) scale(.74) !important; top:0.5% !important; }
  .hud{ height:28px; min-height:28px; max-height:28px; }
}
/* hide rotate hint now that layout fits */
@media screen and (orientation: portrait) and (max-width: 700px){
  body::before{ display:none !important; }
}

@media (min-width: 901px){
  .chip.shop-locked{ opacity:1 !important; filter:none !important; }
  .chip.shop-locked::after{ display:none !important; }
  .shop-buy-btn{ opacity:1 !important; }
}