*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;position:fixed;inset:0;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%;background:#2a1d14;font-family:"PingFang HK","PingFang TC","Hiragino Sans CNS","Noto Sans CJK HK","Noto Sans CJK TC","Noto Sans TC","Microsoft JhengHei",sans-serif;color:#2a1d14}
body.en{font-family:"Avenir Next","Trebuchet MS","Helvetica Neue",Arial,"Noto Sans CJK HK",sans-serif}
#safe{position:fixed;left:0;top:0;width:0;height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);visibility:hidden;pointer-events:none}
canvas#c{position:fixed;left:0;top:0;display:block;touch-action:none}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 14px max(14px,calc(env(safe-area-inset-bottom) + 10px));z-index:5;touch-action:manipulation}
#title{background:radial-gradient(ellipse at 50% 30%,#5a3a22 0,#2a1d14 70%);justify-content:space-between;overflow-y:auto}
.logoWrap{text-align:center;animation:pop .45s cubic-bezier(.2,1.6,.4,1) both}
.logo{line-height:0}
.title{font-family:"Noto Serif CJK TC","Noto Serif CJK HK","Songti TC","PingFang HK",serif;font-size:46px;font-weight:900;color:#f3e6c4;letter-spacing:4px;text-shadow:0 3px 0 #000,0 0 18px rgba(212,160,23,.5);margin-top:2px}
body.en .title{font-size:30px;letter-spacing:1px}
.sub{margin-top:4px;font-size:14px;font-weight:800;color:#d9c290}
.lang{display:flex;width:max-content;margin:8px auto 0;border:2px solid #d4a017;border-radius:12px;overflow:hidden}
.lang button{appearance:none;border:0;background:transparent;color:#d9c290;font-weight:900;font-size:14px;font-family:inherit;padding:6px 14px;cursor:pointer}
.lang button.on{background:#d4a017;color:#2a1d14}
.pickLbl{color:#f3e6c4;font-weight:900;font-size:15px;opacity:.85}
.facs{display:flex;flex-direction:column;gap:10px;width:100%;max-width:420px}
.fac{appearance:none;display:flex;align-items:center;gap:8px;border:3px solid #1a110b;border-radius:16px;padding:6px 10px 6px 4px;cursor:pointer;font-family:inherit;text-align:left;box-shadow:0 4px 0 #000;color:#fff;min-height:84px}
.fac:active{transform:translateY(3px);box-shadow:0 1px 0 #000}
.fac-wei{background:linear-gradient(90deg,#173d86,#2f6fe0)}.fac-shu{background:linear-gradient(90deg,#11612a,#25a244)}.fac-wu{background:linear-gradient(90deg,#86160f,#e0362c)}
.facArt{width:120px;height:75px;flex:none}
.facTxt{flex:1;min-width:0}
.facName{font-size:22px;font-weight:900;text-shadow:0 2px 0 rgba(0,0,0,.5)}
body.en .facName{font-size:18px}
.facSub{font-size:12px;font-weight:700;opacity:.9}
.facProg{display:flex;gap:8px;margin-top:4px;font-size:13px;font-weight:900}
.facProg span{background:rgba(0,0,0,.3);border-radius:99px;padding:1px 8px}
.row{display:flex;gap:8px;justify-content:center;margin-top:6px;flex-wrap:wrap}
.btn{appearance:none;-webkit-appearance:none;border:3px solid #1a110b;border-radius:16px;font-family:inherit;font-weight:900;color:#fff;background:#b3261e;box-shadow:0 4px 0 #1a110b;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;touch-action:manipulation}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #1a110b}
.btn.big{font-size:21px;padding:10px 0;min-height:54px;width:100%}
.btn.small{font-size:18px;padding:7px 14px;box-shadow:0 3px 0 #1a110b;min-width:52px;min-height:44px}
.btn.alt{background:#d4a017;color:#1a110b}
.btn.ghost{background:#f3e6c4;color:#1a110b}
.btn.dim,.btn:disabled{opacity:.45}
.brand{font-size:12px;font-weight:800;color:#a08a60}
@keyframes pop{0%{transform:translateY(30px) scale(.9);opacity:0}100%{transform:none;opacity:1}}
/* map */
#mapUI{background:transparent;justify-content:flex-start;padding:0;pointer-events:none}
.topbar{pointer-events:auto;position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 8px) 10px 6px;background:linear-gradient(180deg,rgba(42,29,20,.85),rgba(42,29,20,0))}
.tb{appearance:none;width:42px;height:42px;border-radius:12px;border:2.5px solid #1a110b;background:#f3e6c4;color:#1a110b;font-size:20px;font-weight:900;box-shadow:0 3px 0 #1a110b;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;font-family:inherit}
.tb:active{transform:translateY(2px);box-shadow:0 1px 0 #1a110b}
.sp{flex:1}
.facBadge{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:2.5px solid #1a110b;color:#fff;font-weight:900;font-size:18px;font-family:"Noto Serif CJK TC",serif;text-shadow:0 1px 0 #000}
.mapProg{color:#f3e6c4;font-weight:900;font-size:15px;text-shadow:0 1px 2px #000}
.brief{pointer-events:auto;position:absolute;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));background:#f3e6c4;border:3px solid #1a110b;border-radius:18px;box-shadow:0 5px 0 #1a110b;padding:10px 12px 12px;animation:pop .3s cubic-bezier(.2,1.5,.4,1) both;max-width:480px;margin:0 auto}
.bx{position:absolute;right:8px;top:6px;appearance:none;border:0;background:transparent;font-size:20px;font-weight:900;color:#6a5a40;cursor:pointer;width:36px;height:36px}
.bHead{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bCity{font-size:24px;font-weight:900;font-family:"Noto Serif CJK TC","PingFang HK",serif}
.bIdx{font-size:13px;font-weight:800;color:#8a7350}
.bStars{color:#c98a00;font-weight:900;font-size:16px}
.bRow{display:flex;align-items:center;gap:6px;margin:4px 0;min-height:52px}
.bIco{font-size:20px;width:26px;text-align:center;flex:none}
.bEnemy,.bGens{display:flex;gap:4px;flex-wrap:wrap;align-items:center;flex:1}
.bCnt{font-weight:900;font-size:14px;margin-left:6px}
.bSlots{font-weight:900;font-size:13px;color:#8a7350}
.pbtn{appearance:none;border:0;background:transparent;padding:0;display:inline-flex;flex-direction:column;align-items:center;cursor:pointer;font-family:inherit;position:relative;border-radius:12px}
.pbtn canvas{display:block;border-radius:50%}
.pname{font-size:10px;font-weight:900;color:#2a1d14;white-space:nowrap;margin-top:1px}
.bGens .pbtn{opacity:.5;transition:transform .15s}
.bGens .pbtn.on{opacity:1;transform:translateY(-2px)}
.bGens .pbtn.on canvas{box-shadow:0 0 0 3px #d4a017,0 3px 0 4px #1a110b}
.bGens .pbtn.locked{opacity:.25;filter:grayscale(1)}
.go{margin-top:6px}
/* battle HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:4}
.hudTop{pointer-events:auto;position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:6px;padding:calc(env(safe-area-inset-top) + 4px) 8px 4px}
.chip{background:rgba(26,17,11,.78);color:#f3e6c4;border-radius:99px;padding:5px 10px;font-weight:900;font-size:15px;white-space:nowrap;border:2px solid rgba(212,160,23,.6)}
.chip b{color:#ffd43b}
#timer.warn{color:#ff6b6b;border-color:#ff6b6b}
.bars{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.gbar{position:relative;height:13px;background:rgba(26,17,11,.78);border-radius:99px;border:2px solid #1a110b;overflow:hidden}
.gbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#ff922b,#ffd43b);transition:width .2s}
.gbar.camp i{background:linear-gradient(90deg,#2f9e44,#8ce99a)}
.gbar .gi{position:absolute;left:3px;top:-3px;font-size:12px;z-index:1}
#bottom{pointer-events:auto;position:absolute;left:0;right:0;bottom:0;padding:0 6px max(6px,env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(26,17,11,.95) 70%,rgba(26,17,11,0))}
.above{position:absolute;left:6px;right:6px;bottom:calc(100% - 6px);display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}
.horn{pointer-events:auto;appearance:none;width:50px;height:50px;border-radius:50%;border:3px solid #1a110b;background:#d4a017;font-size:24px;box-shadow:0 3px 0 #1a110b;cursor:pointer;padding:0}
.horn:active{transform:translateY(2px)}
.heroes{display:flex;gap:8px;pointer-events:auto}
.hero{appearance:none;position:relative;width:62px;height:62px;border-radius:50%;border:0;padding:0;background:#1a110b;cursor:pointer;--p:0deg}
.hero canvas{position:absolute;left:5px;top:5px;width:52px;height:52px;border-radius:50%}
.hero .ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#ffd43b var(--p),rgba(255,255,255,.15) 0);-webkit-mask:radial-gradient(circle,transparent 26px,#000 27px);mask:radial-gradient(circle,transparent 26px,#000 27px)}
.hero .hhp{position:absolute;left:10px;bottom:-5px;height:5px;width:100%;max-width:42px;background:#7cf07c;border:1.5px solid #1a110b;border-radius:3px}
.hero.ready{animation:glow .7s ease-in-out infinite alternate}
.hero.ready .ring{background:conic-gradient(#fff3b0 360deg,#fff3b0 0)}
.hero.out{filter:grayscale(1) brightness(.6)}
@keyframes glow{0%{box-shadow:0 0 6px 2px #ffd43b;transform:scale(1)}100%{box-shadow:0 0 22px 8px #ffb700;transform:scale(1.08)}}
.food{display:flex;align-items:center;gap:6px;margin:4px 2px 4px}
.fi{font-size:16px}
.ftrack{flex:1;height:12px;border-radius:99px;background:#3a2a1a;border:2px solid #000;overflow:hidden}
.ftrack i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c98a00,#ffe066)}
#foodN{color:#ffe066;font-size:16px;min-width:30px;text-align:right}
.cards{display:flex;gap:5px}
.ucard{appearance:none;flex:1;position:relative;height:76px;border-radius:12px;border:2.5px solid #000;background:linear-gradient(180deg,#f3e6c4,#cdb68a);padding:0;overflow:hidden;cursor:pointer;touch-action:none}
.ucard .cIcon{position:absolute;left:50%;top:-2px;width:52px;height:52px;transform:translateX(-50%)}
.ucard .cBeat{position:absolute;left:3px;bottom:2px;width:32px;height:14px}
.ucard .cost{position:absolute;right:3px;bottom:2px;background:#1a110b;color:#ffe066;font-weight:900;font-size:13px;border-radius:7px;padding:0 5px;line-height:17px}
.ucard .cn{position:absolute;right:4px;top:2px;font-size:11px;font-weight:900;color:#5a4630}
.ucard .fill{position:absolute;left:0;right:0;top:0;height:100%;background:rgba(26,17,11,.55);pointer-events:none}
.ucard.ready{border-color:#ffd43b;box-shadow:0 0 0 2px #ffd43b inset}
.ucard.locked{filter:grayscale(1);opacity:.35}
.ucard.nope{animation:nope .3s}
@keyframes nope{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.ucard:active{transform:translateY(2px)}
/* pause / results */
#pause,#res{background:rgba(20,12,6,.6)}
#pause>.card,#res>.card{width:100%;max-width:400px;background:#f3e6c4;border:3px solid #1a110b;border-radius:22px;padding:14px 16px 12px;text-align:center;box-shadow:0 6px 0 #1a110b;animation:pop .35s cubic-bezier(.2,1.6,.4,1) both;max-height:100%;overflow-y:auto;height:auto;cursor:default}
.stHead{font-size:30px;font-weight:900;margin-bottom:6px}
.resTitle{font-size:34px;font-weight:900;color:#b3261e;font-family:"Noto Serif CJK TC","PingFang HK",serif}
.resTitle.lose{color:#5a4a3a}
.resStars{font-size:40px;line-height:1;color:#b8a47e;letter-spacing:4px}
.resStars span{display:inline-block;animation:pop .4s cubic-bezier(.2,1.8,.4,1) both}
.resStars span.on{color:#e0a000;text-shadow:0 2px 0 #1a110b}
.resWhy{display:flex;justify-content:center;gap:10px;font-weight:900;font-size:15px;margin:6px 0}
.resNew{display:flex;align-items:center;justify-content:center;gap:6px;background:#fff3bf;border:2px solid #1a110b;border-radius:99px;padding:3px 12px;font-weight:900;font-size:14px;margin:2px auto;width:max-content;max-width:100%}
.shareImg{display:block;width:100%;max-width:230px;margin:8px auto;border-radius:14px;border:3px solid #1a110b;-webkit-touch-callout:default;pointer-events:auto}
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 64px);transform:translateX(-50%) translateY(-20px);background:#1a110b;color:#fff;font-weight:900;padding:10px 18px;border-radius:99px;opacity:0;transition:all .25s;z-index:20;pointer-events:none;white-space:nowrap;font-size:15px}
.toast.show{opacity:1;transform:translateX(-50%)}
@media (max-height:700px){.title{font-size:36px}.logo svg{width:110px;height:66px}.fac{min-height:70px}.shareImg{max-width:170px}}