*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--bg:#1b1230;--panel:#2a1f40;--ink:#fff4e0;--sub:#b9a6c9;--gold:#ffc94a;--red:#e8433a;--green:#5bd16a}
html,body{height:100%;background:#0e0818;color:var(--ink);font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;overflow:hidden;user-select:none}
#app{position:relative;height:100%;max-width:480px;margin:0 auto;background:var(--bg);overflow:hidden}
.hidden{display:none!important}
button{font:inherit;color:inherit;border:0;cursor:pointer}
.big{display:block;width:100%;padding:14px;border-radius:14px;background:var(--gold);color:#2a1a12;font-size:18px;font-weight:900;box-shadow:0 4px 0 #b8862a}
.big:active{transform:translateY(2px);box-shadow:0 2px 0 #b8862a}
.big.ghost{background:transparent;color:var(--gold);border:2px solid var(--gold);box-shadow:none}
.big:disabled{opacity:.4}
.screen{position:absolute;inset:0;overflow-y:auto;padding:16px}
#map,#night{padding:0;overflow:hidden}

/* 頂部狀態列 */
#hud{position:absolute;top:0;left:0;right:0;z-index:20;background:linear-gradient(#1b1230,#1b1230ee);padding:8px 10px 6px;border-bottom:2px solid #3a2a55}
.hTop{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.hTop em{color:var(--gold);font-style:normal;font-weight:700}
.hTop .ms{font-style:normal;font-size:11px;background:var(--red);border-radius:8px;padding:1px 6px;margin-left:6px}
#hMoney{color:var(--gold);font-weight:900;font-size:16px}
.hBot{display:flex;gap:6px;align-items:center;margin-top:5px}
#hStats{flex:1;display:flex;gap:6px}
.mini{flex:1;position:relative;height:18px;background:#0e0818;border-radius:9px;overflow:hidden;font-size:11px}
.mini i{position:absolute;left:0;top:0;bottom:0;background:#4a8ad8}
.mini.warn i{background:var(--red)}
.mini b{position:relative;padding-left:6px;font-weight:700}
.mini span{position:absolute;right:6px;top:1px}
.hb{width:32px;height:28px;border-radius:8px;background:var(--panel);font-size:15px}

/* 標題 */
#title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(ellipse at 50% 30%,#4a2a5a,#1b1230 70%)}
.tLogo{font-size:56px;font-weight:900;color:var(--gold);text-shadow:0 4px 0 #a8322b,0 0 30px #ff7a3d88;letter-spacing:6px}
.tSub{color:var(--sub);margin-bottom:6px}
.tCast{display:flex;align-items:flex-end;justify-content:center;height:210px;margin:6px 0 10px}
.tCast img{height:150px;margin:0 -14px;filter:drop-shadow(0 6px 10px #0008)}
.tCast img.mid{height:200px;z-index:2}
#title .big{max-width:280px}
.credit{color:var(--sub);font-size:12px;margin-top:8px}

/* 地圖 */
.mapArea{position:absolute;top:70px;left:0;right:0;bottom:118px}
.mapBg{position:absolute;inset:0;background:url(img/bg/map.jpg) center/cover,
  radial-gradient(circle at 30% 40%,#3a5a3a 0 8%,transparent 9%),radial-gradient(circle at 75% 60%,#3a4a6a 0 6%,transparent 7%),
  linear-gradient(90deg,transparent 48%,#5a4a6a 48% 52%,transparent 52%),linear-gradient(0deg,transparent 46%,#5a4a6a 46% 54%,transparent 54%),
  linear-gradient(160deg,#2a2a48,#3a2a4a 60%,#4a2a3a)}
#mapPins{position:absolute;inset:0}
.pin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;background:none}
.pin .pi{font-size:30px;width:54px;height:54px;border-radius:50%;background:#fff4e0;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 #b8862a,0 0 0 3px #2a1a12}
.pin .pn{margin-top:4px;font-size:12px;font-weight:700;background:#000a;padding:1px 6px;border-radius:6px;white-space:nowrap}
.pin .ph{font-size:10px;color:var(--sub);white-space:nowrap}
.pin .pw{position:absolute;top:-4px;right:-6px;display:flex;gap:2px}
.pin .pw i{width:10px;height:10px;border-radius:50%;border:2px solid #fff}
.pin.locked .pi{background:#5a4a6a;box-shadow:0 4px 0 #3a2a4a;font-size:22px}
.pin:not(.locked):active .pi{transform:scale(.92)}
.mapFoot{position:absolute;left:0;right:0;bottom:0;padding:10px 14px 14px;background:linear-gradient(#1b123000,#1b1230 30%)}
#mapSlot{text-align:center;font-size:14px;color:var(--sub);margin-bottom:8px}

/* 走動場景 */
#scene{position:absolute;inset:0;z-index:15;overflow:hidden}
.scBg{position:absolute;inset:0}
.scBg img{width:100%;height:100%;object-fit:cover}
.scFloor{position:absolute;left:0;right:0;bottom:0;height:34%;box-shadow:inset 0 10px 18px #0003}
.scTop{position:absolute;top:70px;left:0;right:0;display:flex;align-items:center;gap:10px;padding:8px 10px;background:#0008;z-index:3}
.scTop button{background:var(--gold);color:#2a1a12;font-weight:900;border-radius:10px;padding:6px 10px;font-size:13px}
.scTop b{font-size:16px}
.scTop span{margin-left:auto;font-size:12px;color:#fff}
.scHint{position:absolute;top:118px;left:0;right:0;text-align:center;font-size:12px;color:#2a1a12;opacity:.7;z-index:2}
.prop{position:absolute;bottom:30%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;background:none;z-index:2;width:96px}
.prop .pe{font-size:44px;filter:drop-shadow(0 4px 2px #0005);animation:bob 2.4s ease-in-out infinite}
.prop .pl{margin-top:2px;font-size:13px;font-weight:900;background:#fff4e0;color:#2a1a12;border-radius:8px;padding:2px 8px;box-shadow:0 2px 0 #b8862a;white-space:nowrap}
.prop .pd{font-size:10px;color:#2a1a12;background:#fff4e0cc;border-radius:6px;padding:1px 4px;margin-top:2px;line-height:1.3;text-align:center}
.prop.dis{opacity:.45}
.npc{position:absolute;bottom:8%;transform:translateX(-50%);width:26%;max-width:120px;z-index:4;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.npc img{width:100%;filter:drop-shadow(0 6px 6px #0006);animation:idle 3s ease-in-out infinite}
.npc .nn{font-size:11px;font-weight:700;color:#fff;border-radius:6px;padding:1px 6px;margin-top:-6px}
.npc .bang,.npc .dots{position:absolute;top:-8px;font-style:normal;font-weight:900;background:var(--red);color:#fff;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;animation:pop 1s ease-in-out infinite}
.npc .dots{background:#fff;color:#2a1a12}
.me{position:absolute;bottom:4%;transform:translateX(-50%);width:30%;max-width:136px;z-index:5;pointer-events:none}
.me img{width:100%;filter:drop-shadow(0 8px 6px #0007);transition:transform .15s}
.me.walk{animation:walk .32s ease-in-out infinite}
@keyframes walk{50%{transform:translateX(-50%) translateY(-6px)}}
@keyframes idle{50%{transform:translateY(-3px)}}
@keyframes bob{50%{transform:translateY(-5px)}}
@keyframes pop{50%{transform:scale(1.15)}}

/* 對話框（立繪＋台詞） */
#vn{position:absolute;inset:0;z-index:40;background:linear-gradient(#0007,#000c)}
.vnP{position:absolute;bottom:150px;height:62%;max-height:440px;filter:drop-shadow(0 10px 16px #000a);animation:slideIn .25s ease-out}
.vnP.right{right:-4%}.vnP.left{left:-4%}
@keyframes slideIn{from{transform:translateY(20px);opacity:0}}
.vnBox{position:absolute;left:10px;right:10px;bottom:14px;min-height:130px;background:#fff8ec;color:#2a1a12;border-radius:16px;padding:22px 16px 16px;box-shadow:0 4px 0 #b8862a,0 0 0 3px #2a1a12;font-size:17px;line-height:1.6}
.vnBox.nar{background:#2a1f40ee;color:var(--ink);box-shadow:0 0 0 2px #5a4a7a}
.vnN{position:absolute;top:-16px;left:14px;color:#fff;font-weight:900;border-radius:10px;padding:3px 12px;font-size:15px}
.vnN small{font-weight:400;font-size:11px;margin-left:6px;opacity:.9}
.vnNext{position:absolute;right:14px;bottom:8px;font-size:12px;animation:pop 1s infinite}
#choice{position:absolute;inset:0;z-index:45;background:#0008;display:flex;align-items:flex-end;padding:14px}
.chBox{width:100%;display:flex;flex-direction:column;gap:8px;margin-bottom:150px}
.chT{text-align:center;font-weight:700;margin-bottom:4px;text-shadow:0 2px 4px #000}
#choice button{background:#fff8ec;color:#2a1a12;border-radius:12px;padding:13px;font-size:16px;font-weight:700;box-shadow:0 3px 0 #b8862a,0 0 0 2px #2a1a12}

/* 結果小卡 */
#result{position:absolute;inset:0;z-index:50;background:#000a;display:flex;align-items:center;justify-content:center;padding:16px}
.rcard{width:100%;max-width:400px;max-height:90%;overflow-y:auto;background:var(--panel);border-radius:18px;padding:18px;box-shadow:0 0 0 3px #5a4a7a;animation:slideIn .2s}
.rcard.wide{max-width:460px}
.rt{font-size:20px;font-weight:900;color:var(--gold);margin-bottom:10px}
.rb{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;font-size:14px}
.rb span{background:#0e0818;border-radius:8px;padding:4px 8px}
.rb .up{color:var(--green)}.rb .down{color:#ff7a70}.rb .cap{color:var(--sub);font-size:12px;background:none;padding:0}.rb .nil{color:var(--sub)}
.rn{font-size:14px;line-height:1.7;color:var(--ink);margin-bottom:12px}
.rs{font-size:13px;color:var(--gold);margin:10px 0 6px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:#0e0818;border-radius:10px;padding:6px 10px;font-size:13px}
.chip.on{background:var(--gold);color:#2a1a12;font-weight:700}
.btnrow{display:flex;gap:10px;margin-top:10px}
.stat{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:13px;width:100%}
.stat b{width:58px}.stat .bar{flex:1;height:10px;background:#0e0818;border-radius:5px;overflow:hidden}.stat .bar i{display:block;height:100%;background:var(--gold)}.stat span{width:36px;text-align:right}
.book{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bk{background:#0e0818;border-radius:10px;padding:8px;display:flex;flex-direction:column;font-size:13px}
.bk span{font-size:20px}.bk small{color:var(--sub);font-size:11px}.bk.no{opacity:.45}

/* 備料 */
#prep{padding-top:84px;padding-bottom:90px}
.pTitle{font-size:20px;font-weight:900;color:var(--gold);margin-bottom:8px}
.pf{background:var(--panel);border-radius:12px;padding:10px;font-size:13px;margin-bottom:10px}
.ps{font-size:13px;color:var(--gold);margin:10px 0 6px;font-weight:700}
.dishes{display:flex;flex-direction:column;gap:8px}
.dish{background:var(--panel);border-radius:12px;padding:10px;border:2px solid transparent}
.dish.on{border-color:var(--gold)}
.dH{display:flex;justify-content:space-between;font-weight:900}
.g{font-style:normal;border-radius:6px;padding:0 6px;font-size:12px;background:#5a4a6a}
.gS{background:#ff7ab8}.gA{background:#ffc94a;color:#2a1a12}.gB{background:#5bd16a;color:#2a1a12}
.dS{font-size:12px;color:var(--sub);margin-top:3px}.dS.dim{opacity:.7}
.dR{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px}
.dR label{width:92px}.dR input{flex:1}
.helper{display:block;background:var(--panel);border-radius:12px;padding:10px;margin-top:10px;font-size:13px}
.ptotal{text-align:right;margin:10px 0;font-size:14px}.ptotal b{color:var(--gold);font-size:18px}
#btnOpen{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);width:calc(min(480px,100%) - 28px)}
.warnbox{background:#5a2a2a;border-radius:12px;padding:14px;margin:10px 0;line-height:1.6}

/* 營業 */
#cv{display:block;width:100%;height:100%;touch-action:none}

/* 結算／結局 */
#settle,#ending{padding-top:84px}
.sDay,.eName{font-size:22px;font-weight:900;color:var(--gold);text-align:center;margin-bottom:10px}
.row{display:flex;justify-content:space-between;padding:6px 2px;border-bottom:1px solid #3a2a55;font-size:14px}
.row .pos{color:var(--green)}.row .neg{color:#ff7a70}
.row.total{font-size:18px;font-weight:900;color:var(--gold);border-bottom:0;margin-top:6px}
.record{text-align:center;color:var(--gold);font-weight:900;margin:8px 0}
.goal{font-size:13px;padding:4px 0}.goal.ok{color:var(--green)}
#settle .big,#ending .big{margin:16px 0}
#ending p{line-height:1.8;margin:10px 0 14px}
#toast{position:absolute;left:50%;top:84px;transform:translateX(-50%);z-index:60;background:#000d;border:1px solid var(--gold);color:var(--gold);padding:7px 14px;border-radius:10px;font-size:13px;max-width:88%;text-align:center;pointer-events:none}

/* 斜角營業畫面 */
#night canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
#isoUI{position:absolute;inset:0;pointer-events:none}
#isoTop{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:6px;padding:10px 12px 14px;background:linear-gradient(#000c,#0000);font-size:13px;pointer-events:none}
#isoTop b{color:var(--gold);font-size:20px}
#isoTop i{position:absolute;left:12px;right:12px;bottom:6px;height:4px;background:var(--green);border-radius:2px;max-width:calc(100% - 24px)}
.isoBot{position:absolute;left:0;right:0;bottom:0;padding:8px 8px 12px;background:linear-gradient(#0000,#000c 18%);pointer-events:auto}
#isoMenu{display:flex;gap:6px;margin-bottom:6px}
#isoMenu .mb{flex:1;background:var(--panel);border-radius:10px;padding:6px 4px;font-size:13px;font-weight:700;line-height:1.2}
#isoMenu .mb small{display:block;font-weight:400;font-size:10px;color:var(--sub)}
#isoMenu .mb.on{background:var(--gold);color:#2a1a12}#isoMenu .mb.on small{color:#5a3a12}
#isoGrill{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:6px}
.slot{height:68px;border-radius:12px;background:#2a1a12;border:2px solid #5a3a2a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative}
.slot .se{font-size:24px;line-height:1}.slot small{font-size:10px;color:var(--sub)}
.slot.cook{background:#3a1a10}.slot.ready{border-color:var(--green);box-shadow:0 0 12px #5bd16a88}.slot.ready small{color:var(--green);font-weight:900}
.slot.burnt{background:#1a0a08}.slot.burnt small{color:#ff7a70}
.slot .bar{position:relative;width:80%;height:6px;background:#000;border-radius:3px}
.slot .bar b{position:absolute;top:0;bottom:0;background:var(--green)}
.slot .bar u{position:absolute;top:-2px;width:3px;height:10px;background:#fff}
#isoServe{width:100%;padding:12px;border-radius:12px;background:var(--gold);color:#2a1a12;font-weight:900;font-size:16px;box-shadow:0 3px 0 #b8862a}
.buildBtn{width:100%;margin-top:10px;padding:12px;border-radius:12px;background:#3a5a8a;color:#fff;font-weight:900;font-size:14px}
/* 建造模式 */
#buildUI{position:absolute;inset:0;pointer-events:none}
.bTop{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:12px;background:linear-gradient(#000c,#0000);pointer-events:auto}
.bTop button{background:var(--gold);color:#2a1a12;font-weight:900;border-radius:10px;padding:8px 18px}
#buildInfo{position:absolute;left:8px;right:8px;bottom:118px;background:#000c;border-radius:12px;padding:8px 10px;font-size:13px;line-height:1.5;pointer-events:auto}
#buildInfo small{color:var(--sub)}#buildInfo button{background:#a8322b;color:#fff;border-radius:8px;padding:2px 8px;margin-left:6px;font-size:12px}
#buildShop{position:absolute;left:0;right:0;bottom:0;display:flex;gap:6px;overflow-x:auto;padding:8px;background:#1b1230ee;pointer-events:auto}
.bi{flex:0 0 82px;background:var(--panel);border-radius:12px;padding:6px;display:flex;flex-direction:column;align-items:center;font-size:12px}
.bi img{width:54px;height:54px;object-fit:contain;mix-blend-mode:multiply;background:#fff;border-radius:8px}
.bi small{color:var(--gold)}.bi.on{outline:3px solid var(--gold)}
/* 斜角小房間 */
#rcv{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#scInfo{position:absolute;left:8px;right:8px;bottom:10px;display:flex;flex-direction:column;gap:4px;pointer-events:none}
.ri{background:#000b;border-radius:10px;padding:5px 10px;font-size:12px;line-height:1.35}
.ri b{color:var(--gold);margin-right:6px}.ri small{color:#ddd}.ri.dis{opacity:.5}
#scene .scHint{color:#fff;opacity:.75;text-shadow:0 1px 2px #000}
/* 特效 */
.fadeIn{animation:fadeIn .28s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}}
.coinFly{position:fixed;z-index:80;font-size:22px;pointer-events:none;transition:left .6s cubic-bezier(.3,.7,.4,1),top .6s cubic-bezier(.3,.7,.4,1),opacity .6s,transform .6s}
.confetti{position:absolute;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.heartPop{position:absolute;left:50%;top:40%;z-index:75;font-size:48px;pointer-events:none;animation:heart 1s ease-out forwards}
@keyframes heart{0%{transform:translate(-50%,0) scale(.3);opacity:0}30%{transform:translate(-50%,-10px) scale(1.2);opacity:1}100%{transform:translate(-50%,-70px) scale(1);opacity:0}}
.sndT{background:none;font-size:16px;margin-left:6px}
/* 行程小互動 */
#mini{position:absolute;inset:0;z-index:55;background:#000b;display:flex;align-items:center;justify-content:center;padding:16px}
.mBox{width:100%;max-width:380px;background:linear-gradient(#3a2a55,#2a1f40);border-radius:18px;padding:18px;box-shadow:0 0 0 3px #ffc94a88;text-align:center;animation:slideIn .2s}
.mT{font-size:20px;font-weight:900;color:var(--gold);margin-bottom:6px}
.mS{font-size:14px;line-height:1.6;margin:8px 0;color:var(--ink)}
.mDots{font-size:13px;color:var(--sub);margin-top:8px;letter-spacing:2px}
.mPray{position:relative;height:130px;display:flex;align-items:flex-end;justify-content:center;gap:10px;font-size:64px}
.mPray .incense{font-size:40px;transform:rotate(-20deg)}
.mPray.bow .incense{animation:bowA .5s ease}
.mPray .smoke{position:absolute;left:52%;bottom:60px;width:8px;height:50px;background:linear-gradient(#fff0,#fff6);border-radius:4px;filter:blur(3px);animation:smoke 2s infinite}
@keyframes bowA{50%{transform:rotate(-20deg) translateY(18px) scale(.9)}}
@keyframes smoke{0%{opacity:0;transform:translateY(10px)}50%{opacity:1}100%{opacity:0;transform:translateY(-30px) scaleX(2)}}
.blocks{display:flex;justify-content:center;gap:24px;height:110px;align-items:center}
.blk{width:62px;height:34px;border-radius:34px 34px 6px 6px;background:#c8282a;box-shadow:inset 0 -6px 0 #8a1414;display:block}
.blk.down{border-radius:6px 6px 34px 34px;background:#a81e20;box-shadow:inset 0 6px 0 #6a0a0a}
.blk.r{transform:scaleX(-1)}
.blk.toss{animation:toss .7s ease-out}
@keyframes toss{0%{transform:translateY(0) rotate(0)}40%{transform:translateY(-70px) rotate(400deg)}100%{transform:translateY(0) rotate(720deg)}}
.mR{font-size:28px;font-weight:900;margin-top:4px}.mR.holy{color:var(--green)}.mR.laugh{color:var(--gold)}.mR.yin{color:#ff7a70}
.tube{font-size:84px;margin:10px 0;display:inline-block}
.tube.shake{animation:shake .12s infinite}
@keyframes shake{25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.mBar{position:relative;height:14px;background:#0e0818;border-radius:7px;margin:10px 0;overflow:hidden}
.mBar i{display:block;height:100%;background:var(--gold);width:0}
.mBar.qte{height:28px;overflow:visible}
.mBar.qte b{position:absolute;top:0;bottom:0;background:var(--green);border-radius:4px}
.mBar.qte u{position:absolute;top:-4px;width:4px;height:36px;background:#fff;border-radius:2px;box-shadow:0 0 6px #fff}
.poem{background:#fff8ec;color:#5a1a12;border-radius:12px;padding:12px;margin:8px auto;font-weight:700;line-height:2;writing-mode:vertical-rl;height:150px;display:flex;justify-content:center;gap:14px;font-size:16px}
.poem p{margin:0}
.lv{color:var(--green)}.lv.bad{color:#ff7a70}
.mOpts{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.mOpts button{background:#fff8ec;color:#2a1a12;border-radius:12px;padding:10px;font-weight:700;text-align:left}
.mOpts small{display:block;font-weight:400;color:#7a6a5a;font-size:11px}
.lift{font-size:72px;transition:transform .1s}.lift.up{animation:liftA .15s}
@keyframes liftA{50%{transform:translateY(-14px) scale(1.05)}}
#isoClose{pointer-events:auto;background:#a8322b;color:#fff;border-radius:8px;padding:4px 10px;font-size:12px;font-weight:700}