:root { font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; color:#5e3f31; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% 0,#d8f5ff,#86c6ed 55%,#5aa7d8); display:grid; place-items:center; overflow:hidden; }
button { font:inherit; cursor:pointer; border:0; color:inherit; }
#game { position:relative; width:min(100vw, 450px); height:100svh; min-height:660px; max-height:1000px; overflow:hidden; isolation:isolate; background:#c8f1ff url("assets/restaurant-terrace-bg.png") center/cover no-repeat; box-shadow:0 0 45px #285a88; }
#game:before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(255,254,220,.15),rgba(117,201,230,.18) 45%,rgba(64,185,194,.65)); }
.topbar { height:60px; padding:9px 12px; display:flex; gap:7px; align-items:center; position:relative; z-index:5; }
.portrait,.resource,.round { height:36px; border:2px solid #fff9db; box-shadow:0 2px 0 #4ea5ca,0 2px 8px #5aa6bf88; }
.portrait { width:39px; border-radius:13px; background:linear-gradient(145deg,#f8efc9,#e0a96f); position:relative; }
.portrait:before { content:""; width:19px; height:19px; border-radius:50% 50% 43% 43%; background:#e9ae7a; position:absolute; left:8px; top:6px; box-shadow:0 -4px 0 #855d47; }
.portrait span { position:absolute; width:19px; height:16px; line-height:16px; background:#38b4f2; color:white; border-radius:9px; bottom:-8px; right:-8px; font-size:10px; font-weight:900; border:1px solid white; }
.resource { min-width:57px; border-radius:10px; display:flex; align-items:center; gap:5px; padding:0 8px 0 6px; background:linear-gradient(#fffdf2,#eaf8ff); font-size:15px; color:#72513b; }
.resource b { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; color:#fff; font-size:17px; text-shadow:0 1px #a57300; }
.bolt { background:#7bd14c; } .coin-mark { background:#ffca32; color:#fff0a3!important; } .heart b { background:#ff5f8e; color:#fff!important; }
.round { width:37px; border-radius:12px; background:#fffef2; color:#7d7669; font-weight:900; margin-left:auto; } .dots { margin-left:0; font-size:13px; letter-spacing:-1px; }
.service-window { height:170px; position:relative; overflow:visible; padding-top:73px; }
.awning { position:absolute; top:52px; left:-15px; right:-15px; height:29px; border-radius:0 0 24px 24px; background:repeating-linear-gradient(90deg,#fff2db 0 23px,#fb9d8d 23px 46px); border-bottom:3px solid #e37170; box-shadow:0 5px 0 #ba7e65; }
.service-window:after { content:""; position:absolute; top:76px; left:0; right:0; height:8px; background:#e9c18c; border-block:2px solid #fff0c5; box-shadow:0 4px 0 #a97a5b; }
.customer { position:absolute; z-index:1; bottom:78px; width:64px; height:68px; filter:drop-shadow(0 3px 0 #a47161); }
.customer:before { content:""; position:absolute; border-radius:48% 48% 45% 45%; inset:8px 7px 0; background:#f0c9a9; border:3px solid #875d50; }
.customer i { position:absolute; width:52px; height:34px; top:-1px; left:6px; border-radius:55% 55% 30% 30%; background:#a47c55; border:3px solid #714d42; z-index:1; }
.customer em:before,.customer em:after { content:""; position:absolute; z-index:3; top:34px; width:6px; height:7px; border-radius:50%; background:#513a35; }.customer em:before{left:21px}.customer em:after{right:20px}
.raccoon { left:19px; transform:scale(.86); }.raccoon:before{background:#6a7a83}.raccoon i{background:#454d58;border-radius:44%}.blonde{left:calc(50% - 31px)}.blonde i{background:#efc272; height:45px; top:-6px; }.chef{right:20px;transform:scale(.88)}.chef i{background:#f7f5e5;border-radius:14px 14px 50% 50%;top:-7px;}
.orders { position:relative; z-index:3; display:flex; justify-content:space-around; padding:0 15px; gap:3px; }
.order { width:28%; min-width:92px; height:52px; padding:3px 4px 2px; border-radius:11px; background:linear-gradient(#fffdf6,#e6f7fc); border:2px solid #fff8c8; box-shadow:0 3px 0 #509bc0; position:relative; display:flex; align-items:center; gap:2px; }.order.locked{filter:saturate(.45);opacity:.75}.order .mini-item{width:34px;height:34px; flex:none}.order .order-copy{font-size:9px;line-height:13px;color:#745b4d;font-weight:800}.order .reward{color:#e69b15;font-size:10px}.order.ready{animation:ready 1s infinite alternate;}.order.ready:after{content:"可交付";position:absolute;right:-4px;top:-11px;background:#3fc188;color:white;border:2px solid white;border-radius:10px;padding:1px 4px;font-size:9px;}@keyframes ready{to{transform:translateY(-2px);filter:brightness(1.08)}}
.cart { position:absolute; z-index:4; right:9px; top:17px; width:47px; height:45px; border:3px solid #fff9d0; border-radius:12px; background:linear-gradient(#7de9e3,#18a6c7); color:#fff; font-size:28px; text-shadow:0 2px #157a9e; box-shadow:0 3px 0 #1d779c; }
.playfield-wrap { position:absolute; left:8px; right:8px; top:218px; bottom:111px; border-radius:12px 12px 16px 16px; border:4px solid #f5e9cc; background:linear-gradient(#74c8f3,#4cbae8 62%,#75dac3); box-shadow:0 4px 0 #3386b7,0 8px 16px #37647c55,inset 0 2px #c5f3ff; overflow:hidden; }
.playfield { position:absolute; inset:6px 5px 7px; display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:repeat(8,1fr); z-index:1; }
.playfield:before { content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 15% 11%,#d0f7ff 0 2px,transparent 2.5px),radial-gradient(circle at 80% 78%,#c6f3fc 0 1.5px,transparent 2px); background-size:83px 88px; opacity:.6; pointer-events:none; }
.cell { position:relative; min-width:0; min-height:0; display:grid; place-items:center; }.cell:after{content:""; width:4px;height:3px;border-radius:50%;background:#87d9f2;box-shadow:0 3px #48a7d4;opacity:.32;}
.item { touch-action:none; position:relative; z-index:3; width:53px; height:53px; border-radius:17px; background-image:url("assets/restaurant-items-spritesheet.png"); background-size:400% 400%; filter:drop-shadow(0 3px 1px #2277a288); transition:transform .17s ease,filter .17s; user-select:none; }.item:hover{transform:scale(1.08)}.item.dragging{opacity:.56;transform:scale(1.18);filter:drop-shadow(0 9px 8px #176e9bbb)}.item[data-level="3"],.item[data-level="4"],.item[data-level="5"]{filter:drop-shadow(0 3px 1px #2277a288) drop-shadow(0 0 6px #ffff97);}.item.producer{animation:producer 1.7s infinite ease-in-out;z-index:6}.item.producer:before{content:"";position:absolute;inset:5px;border:2px solid #fff6bd;border-radius:13px;box-shadow:0 0 0 2px #26c4cf;}.item.producer:after{content:attr(data-producer-label);position:absolute;left:-12px;right:-12px;bottom:-12px;padding:1px 2px;border:1px solid #fff7c0;border-radius:7px;background:#178fb7;color:#fffde6;font-size:9px;font-weight:900;line-height:12px;text-align:center;text-shadow:0 1px #207a9c;box-shadow:0 2px 0 #226f92;} .coin-item{border-radius:50%;background-repeat:no-repeat;filter:drop-shadow(0 3px 2px #9d721055)}.coin-item[data-level="5"]{filter:drop-shadow(0 3px 2px #9d721055) drop-shadow(0 0 8px #fff571);}@keyframes producer{50%{transform:translateY(-3px) scale(1.03)}}
.sparkle-layer { position:absolute; inset:0; z-index:5; pointer-events:none; }.burst { position:absolute; width:48px;height:48px;border-radius:50%;background:radial-gradient(circle,#fffde1 0 8%,#ffdd4b 10% 20%,transparent 22%),conic-gradient(from 20deg,transparent 0 8%,#fff6a5 8% 13%,transparent 13% 28%,#fff6a5 28% 33%,transparent 33% 48%,#fff6a5 48% 53%,transparent 53% 68%,#fff6a5 68% 73%,transparent 73% 88%,#fff6a5 88% 93%,transparent 93%);animation:burst .6s ease-out forwards;}@keyframes burst{to{transform:scale(2.1) rotate(40deg);opacity:0}}
.instruction { position:absolute; left:11px; right:11px; bottom:49px; min-height:58px; z-index:6; display:flex; align-items:center; gap:7px; }.guide-avatar{flex:none;width:49px;height:49px;border-radius:13px;background:linear-gradient(145deg,#7ee9df,#18a8c7);border:3px solid #fff8c9;box-shadow:0 2px 0 #287d9c;position:relative}.guide-avatar:before{content:"";position:absolute;width:24px;height:24px;border-radius:50%;background:#ffd6ad;left:9px;top:9px;box-shadow:0 -6px 0 #744b45}.speech{min-height:47px;flex:1;padding:6px 10px;border:3px solid #cee4f0;border-radius:8px;background:#fffefa;box-shadow:0 2px 0 #73b5cf;font-size:11px;display:grid;align-content:center;gap:2px}.speech b{color:#568fc0;font-size:11px}.speech span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.instruction button{flex:none;width:42px;height:42px;border-radius:14px;background:linear-gradient(#ffe782,#ffb729);border:2px solid #fff7c7;color:white;font-size:22px;box-shadow:0 3px 0 #c68113;}
.bottom-nav { position:absolute;bottom:0;left:0;right:0;height:48px;display:flex;justify-content:space-around;align-items:center;background:linear-gradient(#62cfbd,#3daeb2);border-top:3px solid #d2ffdb;z-index:7;}.bottom-nav button{background:none;color:#f5ffde;text-shadow:0 2px #208b88;display:grid;justify-items:center;font-weight:900;font-size:10px;}.navicon{font-size:22px;line-height:20px;color:#fff6a4}.bottom-nav button:nth-child(2) .navicon{color:#ffd76a}
.toast { position:fixed; z-index:30; left:50%; top:18%; transform:translate(-50%,-20px); opacity:0; pointer-events:none; background:#413d51dd;color:white;padding:9px 15px;border-radius:20px;font-size:13px;transition:.24s;white-space:nowrap;}.toast.show{opacity:1;transform:translate(-50%,0)}
.modal-backdrop{position:fixed;z-index:20;inset:0;background:#162b47a8;display:grid;place-items:center;padding:24px;transition:.2s}.modal-backdrop.hidden{opacity:0;pointer-events:none}.modal{position:relative;width:min(390px,100%);max-height:85svh;overflow:auto;border:5px solid #ffda71;border-radius:25px;background:linear-gradient(#5ed4ec 0 78px,#f4f7ee 78px);box-shadow:0 10px 30px #09213c99;padding:68px 17px 20px}.modal h2{position:absolute;top:14px;left:35px;right:35px;text-align:center;margin:0;color:#fffce3;text-shadow:0 3px #2385af;font-size:24px}.close{position:absolute;right:10px;top:8px;width:30px;height:30px;background:#ff7a72;color:#fff;border:2px solid white;border-radius:50%;font-size:23px;line-height:24px}.mission{padding:10px 10px;margin:8px 0;border-radius:13px;background:#fffdfa;border:2px solid #e7d4ac;box-shadow:0 2px #d1b688;display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:center}.mission .medal{width:37px;height:37px;border-radius:50%;background:linear-gradient(#ffdc54,#f09e21);border:2px solid #fff3ba;color:#fff;text-align:center;line-height:32px;font-weight:900}.mission b{font-size:12px;color:#6e5345}.mission small{display:block;color:#7ea474;margin-top:3px}.claim{padding:6px 9px;border-radius:10px;background:#45c687;color:#fff;border:2px solid #eaffd9;font-size:11px;font-weight:900}.claim[disabled]{background:#aac6bb}.event-card{background:linear-gradient(135deg,#ffb44d,#e46466);border-radius:16px;padding:14px;color:#fff8d2;text-shadow:0 2px #a54d45;text-align:center}.event-card h3{font-size:23px;margin:0 0 8px}.event-card p{font-size:13px}.event-card button{background:#ffe15d;border:3px solid #fff0a3;border-radius:13px;padding:8px 22px;color:#ae6540;font-weight:900;box-shadow:0 3px #bd703e}
@media (max-height:720px){.service-window{height:145px}.playfield-wrap{top:191px}.customer{transform:scale(.78)}.raccoon{transform:scale(.68)}.chef{transform:scale(.7)}.item{width:46px;height:46px}.instruction{bottom:47px;min-height:52px}.guide-avatar{width:43px;height:43px}.speech{min-height:41px;padding:4px 8px}.bottom-nav{height:45px}}