*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0d0705;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
button{font:inherit}
#viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0d0705}
#stage{position:relative;width:1600px;height:900px;transform-origin:center center;overflow:hidden;color:#fff3d9;background:#140c09;box-shadow:0 0 80px #000}
.night-sky{position:absolute;inset:0;background:linear-gradient(#071529 0 45%,#1c2a38 60%,#2b1b17 100%)}
.starfield{position:absolute;inset:0;background-image:radial-gradient(circle,#fff7ce 0 1.2px,transparent 1.8px);background-size:88px 76px;opacity:.55;animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.82}}
.moon{position:absolute;left:92px;top:88px;width:106px;height:106px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fffdf1 0 34%,#f6d47c 58%,#d7a64e 100%);box-shadow:0 0 34px #ffe4a6cc,0 0 98px #ffca6c66}
.cityline{position:absolute;left:0;right:0;top:285px;height:145px;background:
linear-gradient(90deg,#07111e 0 5%,#111b29 5% 10%,#07111e 10% 14%,#111b29 14% 20%,#09131f 20% 27%,#131c29 27% 33%,#09131f 33% 40%,#101a28 40% 47%,#08121e 47% 53%,#131c29 53% 62%,#07111e 62% 70%,#101927 70% 78%,#08121e 78% 87%,#131c29 87% 94%,#07111e 94% 100%)}
.cityline:after{content:"";position:absolute;inset:20px 0;background-image:radial-gradient(circle,#ffc65f 0 2px,transparent 2.8px);background-size:74px 54px;opacity:.55}
.riverline{position:absolute;left:0;right:0;top:430px;bottom:0;background:linear-gradient(#132232,#1a1618 30%,#2d1912 100%)}
.riverline:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(173deg,transparent 0 18px,#f0a84b12 19px 22px,transparent 23px 40px)}

.stall{position:absolute;inset:65px 0 145px}
.awning{position:absolute;left:150px;right:30px;top:18px;height:115px;background:linear-gradient(#a92f20,#671d15 62%,#43130e);clip-path:polygon(0 24%,100% 0,98% 100%,2% 100%);box-shadow:0 16px 25px #0008}
.lantern-line{position:absolute;left:330px;right:90px;top:90px;display:flex;justify-content:space-between}
.lantern-line i{width:36px;height:48px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff3b3 0 24%,#ffad38 55%,#c73d21 100%);box-shadow:0 0 28px #ff9f36;transform-origin:center -100px;animation:swing 3s ease-in-out infinite alternate}
.lantern-line i:nth-child(2){animation-delay:.6s}.lantern-line i:nth-child(3){animation-delay:1.2s}.lantern-line i:nth-child(4){animation-delay:.3s}.lantern-line i:nth-child(5){animation-delay:1.5s}
@keyframes swing{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.wood-wall{position:absolute;left:150px;right:0;top:300px;height:145px;background:linear-gradient(#8b5030,#4a2818);border-top:10px solid #a86b43;border-bottom:8px solid #2a160f}
.shelf{position:absolute;right:35px;top:145px;width:260px;height:210px;border:12px solid #502819;background:linear-gradient(#28140f,#170c09);display:flex;gap:20px;align-items:flex-end;justify-content:center;padding:25px}
.shelf span{width:29px;height:95px;border-radius:8px 8px 4px 4px;background:linear-gradient(90deg,#205b32,#5e9e55 48%,#1d4e2c);box-shadow:inset 0 0 0 4px #d9e7a720}
.guest-counter{position:absolute;left:150px;right:0;top:430px;height:82px;background:linear-gradient(#9a5c37,#5c311f);box-shadow:0 9px 15px #0009}
.cook-counter{position:absolute;left:0;right:0;top:610px;bottom:0;background:linear-gradient(#59301e,#2d1710)}

.hud{position:absolute;z-index:50;left:235px;right:18px;top:12px;height:76px;display:grid;grid-template-columns:150px 260px 360px 260px 220px 70px;background:linear-gradient(#472518,#24120d);border:3px solid #a9683d;border-radius:18px;box-shadow:0 9px 25px #0009;overflow:hidden}
.hud>div{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid #e2b57f28}.hud small{font-size:15px;color:#f1d4ad;font-weight:800}.hud strong{font-size:27px}.time-cell i{display:block;width:210px;height:7px;border-radius:999px;background:#ffffff20;overflow:hidden}.time-cell i b{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ff78a3,#ffd0df)}
#pauseButton{border:0;background:#df436d;color:white;font-size:31px;font-weight:900}

.sign{position:absolute;z-index:45;left:18px;top:18px;width:185px;height:245px;border-radius:48% 48% 20% 20%;background:linear-gradient(90deg,#7c1d14,#e94a2f 27%,#d93b27 73%,#6a160f);border:4px solid #48140d;box-shadow:0 12px 25px #0009,inset 0 0 25px #ffbb6930;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;text-shadow:0 4px 0 #3b110c}
.sign small{font-size:17px;font-weight:900}.sign strong{font-size:52px;line-height:.9}

.guest-area{position:absolute;z-index:12;left:300px;top:165px;width:335px;height:330px}
.guest{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);height:235px;max-width:250px;object-fit:contain;opacity:0;transition:.35s ease;filter:drop-shadow(0 10px 12px #000b)}
.guest-area.active .guest{opacity:1;transform:translateX(-50%) translateY(0)}
.order-bubble{position:absolute;z-index:4;left:50%;top:0;transform:translateX(-50%);width:270px;height:120px;border-radius:28px;background:#fff5df;border:4px solid #5a301e;box-shadow:0 9px 18px #0007;display:flex;align-items:center;justify-content:center;opacity:0;transition:.25s}
.order-bubble:after{content:"";position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);border:22px solid transparent;border-top-color:#fff5df}
.order-bubble img{width:180px;height:105px;object-fit:contain}
.guest-area.active .order-bubble{opacity:1}
.patience{position:absolute;left:42px;right:42px;bottom:0;height:12px;border-radius:999px;background:#fff0dc;border:3px solid #4f2b1e;overflow:hidden;opacity:0}
.guest-area.active .patience{opacity:1}.patience span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#86d24c,#f0d64c)}

.characters{position:absolute;z-index:22;left:610px;top:235px;width:690px;height:420px;pointer-events:none}
.boreumi{position:absolute;left:0;bottom:0;height:410px;filter:drop-shadow(0 13px 16px #000a);animation:breathe 3.6s ease-in-out infinite}
@keyframes breathe{50%{transform:translateY(-4px)}}
.ppomi{position:absolute;right:35px;bottom:20px;height:155px;filter:drop-shadow(0 10px 12px #0009);animation:cat 2.8s ease-in-out infinite}
@keyframes cat{50%{transform:translateY(-5px) rotate(1.5deg)}}
.boreumi-text{position:absolute;left:260px;top:115px;padding:12px 18px;border-radius:22px;background:#fff4dd;border:3px solid #6c3b26;color:#48271a;font-size:20px;font-weight:900;opacity:0;transition:.2s;box-shadow:0 8px 17px #0005}
.boreumi-text.show{opacity:1}

.cook-area{position:absolute;z-index:30;left:525px;top:560px;width:885px;height:220px;display:grid;grid-template-columns:330px 220px 220px;gap:30px;align-items:end}
.pot{position:relative;width:330px;height:220px;border:0;background:transparent;padding:0;touch-action:none}
.pot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 13px #000b);transition:.2s}
.flame{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);width:220px;height:52px;border-radius:50%;background:radial-gradient(ellipse,#ff9e38 0 18%,#285cf1 25%,#31140e 56%,transparent 72%);opacity:.7}
.pot.cooking img{filter:drop-shadow(0 0 24px #61dd68)}
.pot.ready img{filter:drop-shadow(0 0 28px #ffe66a);animation:ready .75s infinite}
.pot.warning img{filter:drop-shadow(0 0 30px #ff554a);animation:warn .35s infinite}
.pot.burnt img{filter:grayscale(.5) brightness(.65)}
@keyframes ready{50%{transform:translateY(-4px)}}@keyframes warn{50%{transform:scale(1.025)}}
.progress{position:absolute;left:42px;right:42px;bottom:5px;height:10px;border-radius:999px;background:#0009;overflow:hidden}.progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#67dc58,#f5db53,#ff5b49)}
.tool{height:155px;border:4px solid #9d6038;border-radius:22px;background:linear-gradient(#7d452b,#29150f);display:flex;align-items:flex-end;justify-content:center;padding-bottom:15px;font-size:24px;font-weight:900;box-shadow:0 10px 18px #0009}
.grill{background:repeating-linear-gradient(90deg,#25130e 0 12px,#8a4c2f 12px 16px)}

.dock{position:absolute;z-index:55;left:12px;right:12px;bottom:10px;height:132px;border:3px solid #a9683d;border-radius:18px;background:linear-gradient(#4c281b,#24130e);box-shadow:0 -8px 22px #0009;display:grid;grid-template-columns:120px 200px 200px 1fr 240px 240px;gap:12px;padding:10px}
.dock-title,.mini-panel{border:2px solid #7f4e31;border-radius:13px;background:linear-gradient(#eed1a4,#d79e62);color:#4a281b;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900}
.dock-title{font-size:24px}
.ingredient{border:2px solid #99613e;border-radius:13px;background:linear-gradient(#fff4d5,#e3b270);color:#48261a;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none}
.ingredient img{width:110px;height:82px;object-fit:contain;pointer-events:none}.ingredient span{font-size:20px}
.mini-panel small{font-size:17px}.mini-panel b{font-size:24px}
.dock-spacer{min-width:0}

.start-button{position:absolute;z-index:65;right:25px;bottom:155px;width:150px;height:150px;border-radius:50%;border:5px solid #fff2dd;background:radial-gradient(circle at 35% 25%,#ff9db4,#e8466c 54%,#951a39);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 32px #ff7896c0;animation:pulse 2s infinite}
.start-button small{font-size:14px}.start-button strong{font-size:26px}
@keyframes pulse{50%{box-shadow:0 0 48px #ff9fb5}}
.toast{position:absolute;z-index:90;left:50%;bottom:165px;transform:translate(-50%,15px);padding:12px 20px;border-radius:999px;background:#1c0d09e8;border:2px solid #e9c5907c;color:#fff0d4;font-size:19px;font-weight:900;opacity:0;transition:.2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.drag-ghost{position:fixed;z-index:9999;left:0;top:0;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:18px;background:#fff1d2;border:3px solid #754328;color:#402116;font-size:18px;font-weight:900;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.85)}
.drag-ghost.show{opacity:.98;transform:translate(-50%,-50%) scale(1)}
.drag-ghost img{width:70px;height:70px;object-fit:contain}
.drop-over{outline:6px solid #ffe467;filter:drop-shadow(0 0 22px #ffe467)}
.overlay{position:absolute;z-index:200;inset:0;background:#090504b8;display:grid;place-items:center}.overlay.hidden{display:none}
.pause-card{padding:35px 60px;border-radius:24px;background:#3d2016;border:4px solid #b56d3f;color:white;text-align:center}.pause-card button{padding:12px 25px;border:0;border-radius:13px;background:#e94d70;color:white;font-size:20px;font-weight:900}
.rotate-message{display:none;position:fixed;z-index:99999;inset:0;background:#160b08;color:#fff;place-items:center;font-size:24px;font-weight:900}
@media(orientation:portrait){.rotate-message{display:grid}}