
:root{
  --bg:#1c1012;
  --panel:#2a1a24ee;
  --panel2:#3a2530ee;
  --gold:#f2b84b;
  --cream:#ffe2a8;
  --wood:#6a3a2a;
  --green:#7e9f5b;
  --red:#c94f4f;
  --line:#120a0d;
}
*{box-sizing:border-box;user-select:none;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--cream)}
button{font:inherit;color:inherit;border:0;cursor:pointer}
#app{position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr;background:radial-gradient(circle at 50% 15%,#3b1f21,#12090c 70%)}
.topbar{height:54px;display:flex;align-items:center;gap:10px;padding:7px 10px;background:linear-gradient(#3b251fee,#201216ee);border-bottom:2px solid #704020;z-index:30;box-shadow:0 3px 14px #000a}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;letter-spacing:.4px;white-space:nowrap}.logo .paw{font-size:22px}.muted{opacity:.7}.spacer{flex:1}.pill{height:36px;display:flex;align-items:center;gap:6px;padding:0 10px;border:2px solid #7a4425;border-radius:10px;background:#24151a;box-shadow:inset 0 0 0 1px #0008}.coin{color:var(--gold);font-weight:900}.btn{height:36px;min-width:36px;padding:0 11px;border:2px solid #83502c;border-radius:10px;background:linear-gradient(#744323,#3e231c);box-shadow:inset 0 1px #ffffff22,0 2px 0 #13080a;font-weight:800}.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(1px);box-shadow:inset 0 1px #0005}.btn.danger{background:linear-gradient(#8f3333,#4a1b22);border-color:#b35b4c}.btn.ok{background:linear-gradient(#78933f,#3a4e25);border-color:#a9c36d}.btn.locked{filter:grayscale(1) brightness(.7);cursor:not-allowed;opacity:.65}
.game-wrap{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:12px}
.stage{position:relative;width:min(100%,calc((100vh - 78px)*1.5));aspect-ratio:3/2;max-height:calc(100vh - 78px);border:3px solid #7a4425;border-radius:12px;background:#111;box-shadow:0 18px 50px #000c;overflow:hidden;image-rendering:pixelated}
.room-bg{position:absolute;inset:0;background-image:url('../assets/rooms/main_cafe_room_01.png');background-size:100% 100%;background-position:center;filter:saturate(1.04) contrast(1.02)}
.room-vignette{position:absolute;inset:0;background:linear-gradient(#0000 70%,#0008),radial-gradient(circle at 50% 45%,#0000 55%,#0007);pointer-events:none}
.entity{--entity-scale:1;position:absolute;transform:translate(-50%,-100%) scale(var(--entity-scale));transform-origin:50% 100%;z-index:9;filter:drop-shadow(0 9px 5px #0008);will-change:left,top,transform}
.entity.behind-occluder{filter:drop-shadow(0 5px 3px #0006)}
.entity img{display:block;image-rendering:pixelated;height:86px;width:auto;pointer-events:none}.entity.customer img{height:78px}.entity.chef img{height:82px}.entity.waiter img{height:84px}.entity.cleaner img{height:82px}.entity.owner img{height:82px}.entity.flip img{transform:scaleX(-1)}.entity-shadow{position:absolute;left:50%;bottom:0;width:34px;height:9px;transform:translate(-50%,42%);border-radius:50%;background:#0005;filter:blur(1px)}
.table-slot{position:absolute;transform:translate(-50%,-50%);z-index:18;width:142px;height:84px;border:2px dashed #ffe2a826;border-radius:50%;background:#00000008;pointer-events:none}.table-slot.busy{border-color:#f2b84b42;background:#f2b84b08}.table-slot.dirty{border-color:#c94f4f66;background:#c94f4f10}.table-slot::after{content:attr(data-label);position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);font-size:11px;color:#ffe2a855;text-shadow:0 1px #000}.table-state{position:absolute;z-index:980;left:50%;top:-8px;transform:translate(-50%,-100%);display:flex;align-items:center;gap:5px;padding:4px 7px;border:2px solid #64402a;border-radius:10px;background:#211116ee;font-size:12px;font-weight:900;white-space:nowrap}.bubble{position:absolute;z-index:14;transform:translate(-50%,-100%);min-width:54px;min-height:42px;padding:7px 10px;border:3px solid #704020;border-radius:16px;background:#fff3d7;color:#3a2318;box-shadow:0 4px 0 #3b1d13,0 7px 14px #0006;font-weight:900;display:flex;align-items:center;justify-content:center;gap:6px}.bubble:after{content:"";position:absolute;left:50%;bottom:-10px;width:16px;height:16px;transform:translateX(-50%) rotate(45deg);background:#fff3d7;border-right:3px solid #704020;border-bottom:3px solid #704020}.bubble img{height:28px;width:auto;image-rendering:pixelated}.bubble.small{font-size:13px;min-height:34px;padding:5px 8px}
/* Patch 1.2 depth props: each table/counter has a back body and a front occluder.
   Cats behind use a lower lane; cats in front use higher anchorY and draw above the front lip. */
.depth-prop{position:absolute;transform:translate(-50%,-50%);pointer-events:none;image-rendering:pixelated}
.pixel-table-back{width:136px;height:58px;border:4px solid #3a1d17;border-radius:18px 18px 22px 22px;background:linear-gradient(#c98248 0 34%,#8d4b2f 34% 64%,#5f2e24 64%);box-shadow:inset 0 5px #ffc57555,inset 0 -8px #0005,0 10px 12px #0005}
.pixel-table-back:before{content:"";position:absolute;left:14px;right:14px;top:8px;height:22px;border-radius:14px;background:linear-gradient(90deg,#ffe0a488,#0000 20%,#0000 80%,#ffe0a444);border-bottom:3px solid #5b281d88}
.pixel-table-back:after{content:"";position:absolute;left:24px;right:24px;bottom:-14px;height:18px;background:linear-gradient(90deg,#472219 0 12px,#0000 12px calc(100% - 12px),#472219 calc(100% - 12px));opacity:.95}
.pixel-table-front{width:146px;height:42px;border:4px solid #2d1714;border-radius:0 0 24px 24px;background:linear-gradient(#8f4d30,#5c2e24 58%,#321816);box-shadow:inset 0 5px #d68d4a55,0 12px 12px #0007}
.pixel-table-front:after{content:"";position:absolute;left:20px;right:20px;bottom:-16px;height:20px;background:linear-gradient(90deg,#321816 0 14px,#0000 14px calc(100% - 14px),#321816 calc(100% - 14px));opacity:.9}
.counter-back{width:196px;height:72px;border:4px solid #2d1714;border-radius:13px;background:linear-gradient(#b66f3e 0 30%,#744022 30% 70%,#47231b 70%);box-shadow:inset 0 6px #ffd18c55,0 10px 12px #0005}
.counter-back:before{content:"";position:absolute;left:16px;top:12px;width:58px;height:22px;border:3px solid #321814;background:#ffe2a822;border-radius:7px;box-shadow:83px 0 0 -1px #3d1d18,83px 0 0 2px #321814}
.counter-front{width:206px;height:48px;border:4px solid #2d1714;border-radius:0 0 13px 13px;background:linear-gradient(#744022,#47231b 62%,#271414);box-shadow:inset 0 4px #b66f3e66,0 14px 16px #0008}
.depth-debug .depth-prop{outline:2px solid #00ff7777}

.hud-panel{position:absolute;z-index:25;left:12px;bottom:12px;right:12px;display:flex;gap:10px;align-items:stretch;pointer-events:none}.card{pointer-events:auto;flex:1;min-width:0;padding:10px 12px;border:2px solid #7a4425;border-radius:12px;background:#201216ee;box-shadow:0 4px 18px #0008}.card h3{margin:0 0 5px;font-size:14px;letter-spacing:.4px}.card p{margin:0;font-size:13px;opacity:.8;line-height:1.25}.upgrade{display:flex;align-items:center;justify-content:space-between;gap:10px}.upgrade .btn{height:44px}.status-line{position:absolute;z-index:24;left:50%;top:12px;transform:translateX(-50%);min-width:360px;max-width:70%;text-align:center;padding:8px 12px;border:2px solid #7a4425;border-radius:12px;background:#201216dd;font-weight:800;box-shadow:0 4px 18px #0008}.room-tabs{position:absolute;z-index:28;right:12px;top:12px;display:flex;gap:7px}.room-tab{height:34px;padding:0 10px;border:2px solid #7a4425;border-radius:10px;background:#201216dd;font-size:13px;font-weight:900}.room-tab.active{background:#684021}.room-tab.locked{opacity:.6;filter:grayscale(1)}.toast{position:absolute;z-index:80;left:50%;top:68px;transform:translateX(-50%);max-width:90%;padding:10px 14px;border:2px solid #a85f38;border-radius:12px;background:#28171dee;box-shadow:0 5px 25px #000c;font-weight:800;opacity:0;pointer-events:none;transition:opacity .2s, transform .2s}.toast.show{opacity:1;transform:translateX(-50%) translateY(4px)}
.home{position:absolute;z-index:70;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(#13090dcc,#13090df1),url('../assets/rooms/main_cafe_room_01.png') center/cover}.home-card{width:min(600px,92vw);padding:22px;border:3px solid #7a4425;border-radius:18px;background:#201216ee;box-shadow:0 22px 80px #000}.home-card h1{margin:0 0 8px;font-size:32px}.home-card p{margin:6px 0;color:#ffe2a8cc}.home-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.hide{display:none!important}
@media(max-width:700px){.topbar{height:50px;padding:6px}.logo span:last-child{display:none}.pill{height:34px;padding:0 8px}.btn{height:34px;padding:0 9px}.game-wrap{padding:4px}.stage{width:100%;max-height:calc(100vh - 58px);border-radius:8px}.entity img{height:66px}.entity.customer img{height:58px}.entity.chef img{height:63px}.entity.waiter img{height:65px}.entity.cleaner img{height:63px}.pixel-table-back{width:112px;height:48px}.pixel-table-front{width:120px;height:34px}.counter-back{width:160px;height:58px}.counter-front{width:168px;height:38px}.hud-panel{left:6px;right:6px;bottom:6px;gap:6px}.card{padding:7px}.card h3{font-size:12px}.card p{font-size:11px}.upgrade .btn{height:38px}.status-line{top:6px;min-width:220px;max-width:72%;font-size:12px;padding:6px}.room-tabs{right:6px;top:48px;flex-direction:column}.room-tab{height:28px;font-size:11px;padding:0 7px}.table-slot{width:100px;height:62px}.bubble{transform:translate(-50%,-115%) scale(.82)}}


/* Patch 1.3 runtime cleanup overrides */
.logo .muted::after{content:""}
.stage{background:#1f1510;}
.room-bg{background:url('../assets/rooms/main_cafe_room_01.png') center/contain no-repeat;}
.table-slot{opacity:.18;}
.table-state{opacity:.92;}
.entity{--entity-scale:1; filter:drop-shadow(0 10px 7px #0009);}
.entity img{height:118px;width:auto;image-rendering:auto;image-rendering:pixelated;}
.entity.customer img{height:112px;}
.entity.chef img{height:122px;}
.entity.waiter img{height:116px;}
.entity.cleaner img{height:116px;}
.entity.owner img{height:112px;}
.entity.flip img{transform:scaleX(-1)}
.entity.back-facing img{filter:brightness(.96)}
.entity-shadow{width:48px;height:12px;background:#0006;}
.depth-prop{position:absolute;transform:translate(-50%,-50%);pointer-events:none;image-rendering:auto;image-rendering:pixelated;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;}
.depth-prop::before,.depth-prop::after{display:none!important;content:none!important;}
.depth-prop img{display:block;width:100%;height:auto;image-rendering:auto;image-rendering:pixelated;filter:drop-shadow(0 9px 8px #0008);}
.pixel-table-back{width:205px;height:auto;}
.pixel-table-front{width:205px;height:auto;}
.counter-back{width:318px;height:auto;}
.counter-front{width:318px;height:auto;}
.bubble{z-index:1500;}
@media(max-width:700px){
  .entity img{height:88px}.entity.customer img{height:84px}.entity.chef img{height:92px}.entity.waiter img{height:88px}.entity.cleaner img{height:88px}.entity.owner img{height:86px}
  .pixel-table-back{width:150px}.pixel-table-front{width:150px}.counter-back{width:230px}.counter-front{width:230px}
}
