/* ===== v3：手機順暢（iOS／Android） ===== */
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{height:100dvh}
#map,#city3d{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{touch-action:manipulation}
input,select,textarea{font-size:16px!important}
#screen,.sheet-body,.c-body,#talkbox .tb-choices{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* ===== 標題畫面 ===== */
#screen.home3{background:linear-gradient(100deg,rgba(14,20,30,.9) 0%,rgba(14,20,30,.72) 34%,rgba(14,20,30,.12) 66%,rgba(14,20,30,0) 100%);color:#EEF0F2;overflow:hidden;padding:0;display:block}
.t3{position:relative;min-height:100dvh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3.4vh,34px);padding:calc(env(safe-area-inset-top) + 28px) 24px calc(env(safe-area-inset-bottom) + 24px) max(28px,7vw);max-width:620px}
.t3-eyebrow{font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.34em;color:#E8B64C;margin-bottom:14px}
.t3-title{display:flex;align-items:flex-start;gap:18px}
.t3-title h1 small{display:block;font-size:.42em;letter-spacing:.3em;color:#E8B64C;margin-bottom:.12em;text-shadow:none}
.t3-title h1{font-weight:900;font-size:clamp(58px,9vw,92px);line-height:.98;margin:0;letter-spacing:.08em;color:#FBF7EC;text-shadow:0 3px 0 rgba(0,0,0,.25),0 8px 34px rgba(0,0,0,.4)}
.t3 .stamp{flex:none;display:flex;flex-direction:column;align-items:center;gap:.1em;line-height:1;font-weight:900;color:#fff;background:radial-gradient(circle at 30% 20%,#e0534a,#b0271f 72%);padding:14px 10px;font-size:20px;letter-spacing:.1em;border-radius:4px;box-shadow:0 8px 22px rgba(0,0,0,.4),inset 0 0 0 2px rgba(255,255,255,.18);transform:rotate(4deg);margin-top:8px;animation:stampIn .6s cubic-bezier(.2,1.6,.4,1) both .25s}
.t3 .stamp i{font-style:normal;display:block}
@keyframes stampIn{from{transform:rotate(-14deg) scale(1.9);opacity:0}to{transform:rotate(4deg) scale(1);opacity:1}}
.t3-sub{margin:14px 0 0;color:#C6CDD4;font-size:15px;line-height:1.8;max-width:26em}
.t3-menu{display:flex;flex-direction:column;gap:6px;max-width:360px}
.t3-item{position:relative;display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;background:transparent;border:0;border-radius:12px;padding:10px 14px 10px 6px;color:#E9ECEF;cursor:pointer;transition:background .15s,transform .15s}
.t3-item b{font-size:21px;font-weight:800;letter-spacing:.06em;grid-column:2}
.t3-item small{grid-column:2;color:#98A3AE;font-size:12px;margin-top:2px}
.t3-arrow{grid-row:1/3;width:0;height:0;border-left:9px solid #E8B64C;border-top:7px solid transparent;border-bottom:7px solid transparent;opacity:0;transform:translateX(-6px);transition:.15s}
.t3-item.on,.t3-item:focus-visible{background:rgba(255,255,255,.1);transform:translateX(4px);outline:none}
.t3-item.on .t3-arrow,.t3-item:focus-visible .t3-arrow{opacity:1;transform:none;animation:arrowBob 1s ease-in-out infinite}
.t3-item.on b{color:#FFE3A1}
.t3-item[aria-disabled="true"]{opacity:.45}
@keyframes arrowBob{50%{transform:translateX(3px)}}
.t3-foot{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:#77828D}
.t3.panel-open>.t3-menu,.t3.panel-open>.t3-logo{visibility:hidden}
.t3-panel{position:fixed;z-index:6;left:max(16px,7vw);right:16px;top:50%;transform:translateY(-50%);max-width:480px;max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;background:rgba(20,28,38,.94);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:18px 18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:panelIn .22s ease-out}
@keyframes panelIn{from{opacity:0;transform:translateY(-46%)}}
.t3-panel h2{margin:4px 0 12px;font-size:20px;color:#FBF7EC;letter-spacing:.06em}
.t3-back{background:none;border:0;color:#E8B64C;font-size:14px;padding:4px 0;cursor:pointer}
.t3-note{color:#C6CDD4;font-size:13px}
.ts-list{display:flex;flex-direction:column;gap:8px}
.ts-slot{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px}
.ts-slot.empty{opacity:.55}
.ts-no{font:700 15px ui-monospace,monospace;color:#E8B64C}
.ts-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.ts-meta b{color:#fff;font-size:16px}.ts-meta small{color:#9AA6B2;font-size:12px}
.ts-acts{display:flex;gap:6px}
.tbtn{border:1px solid rgba(255,255,255,.3);background:transparent;color:#EEF0F2;border-radius:10px;padding:9px 14px;font-weight:700;cursor:pointer;font-size:14px}
.tbtn.sm{padding:7px 11px;font-size:13px}.tbtn.primary{background:#E8B64C;border-color:#E8B64C;color:#1B2430}.tbtn.ghost{border-color:transparent;color:#9AA6B2}.tbtn.danger{background:#C8372D;border-color:#C8372D;color:#fff}
.t3-panel .imp{margin-top:14px;color:#C6CDD4}.t3-panel .imp summary{cursor:pointer;font-size:13px}
.t3-panel textarea,.t3-panel select{width:100%;box-sizing:border-box;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:8px;margin:8px 0}
.t3-panel .row{display:flex;gap:8px;align-items:center}.t3-panel .row select{margin:0}
.t3-panel .file-button{display:inline-block;margin-top:8px;border:1px dashed rgba(255,255,255,.35);border-radius:10px;padding:8px 12px;font-size:13px;cursor:pointer}.t3-panel .file-button input{display:none}
.t3-panel .err{color:#F3B0A5;font-size:12px}
.t3-set{display:grid;grid-template-columns:56px 1fr 34px;align-items:center;gap:12px;padding:10px 0;color:#E9ECEF;border-bottom:1px solid rgba(255,255,255,.08)}
.t3-set em{font-style:normal;color:#9AA6B2;font-size:13px;text-align:right}
.t3-set input[type=range]{width:100%;accent-color:#E8B64C;height:28px}
.t3-set .seg{display:flex;gap:6px;grid-column:2/4}
.t3-help{margin-top:14px;font-size:13px;color:#B7C0C8;line-height:1.75}.t3-help p{margin:4px 0 0}
.sheet-body .t3-set{color:inherit;border-color:#e2e5da}
@media(max-width:700px){
 #screen.home3{background:linear-gradient(180deg,rgba(14,20,30,.25) 0%,rgba(14,20,30,.7) 38%,rgba(14,20,30,.93) 64%,rgba(14,20,30,.97) 100%)}
 .t3{justify-content:flex-end;padding:calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 18px);gap:16px}
 .t3-title h1{font-size:clamp(50px,15vw,70px)}
 .t3 .stamp{font-size:16px;padding:11px 8px}
 .t3-sub{font-size:13.5px;margin-top:10px}
 .t3-item{padding:9px 12px 9px 4px}.t3-item b{font-size:19px}
 .t3-panel{left:12px;right:12px;top:auto;bottom:calc(env(safe-area-inset-bottom) + 12px);transform:none;max-height:calc(100dvh - 60px - env(safe-area-inset-top))}
 @keyframes panelIn{from{opacity:0;transform:translateY(20px)}}
}
@media(max-height:560px) and (orientation:landscape){.t3{gap:10px;padding-top:12px}.t3-title h1{font-size:44px}.t3-sub{display:none}.t3-item{padding:5px 10px 5px 4px}.t3-item small{display:none}}

/* ===== 角色建立：手機不壓縮、選中也看得清楚 ===== */
.creator .opt.on small{color:#2f4a3c!important;opacity:1!important}
.creator .opt small{color:#55605a}
.creator .opt{min-height:52px}
.c-body{padding-bottom:calc(110px + env(safe-area-inset-bottom))!important}
.c-foot{padding-bottom:calc(10px + env(safe-area-inset-bottom))!important}
@media(max-width:700px){
 .creator .c-top{display:grid!important;grid-template-columns:auto 1fr auto;gap:6px 8px;align-items:center;padding:calc(env(safe-area-inset-top) + 8px) 12px 8px!important}
 .creator .c-steps{grid-column:1/-1;grid-row:2;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
 .creator .c-steps::-webkit-scrollbar{display:none}
 .creator .c-steps span{flex:none;white-space:nowrap}
 .creator .c-top .btn{padding:6px 10px!important;font-size:13px!important}
 .creator .opts,.creator .opts.three,.creator .opts.four{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .creator .opts.two{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .creator .opt{padding:9px 10px!important;min-width:0}
 .creator .opt b{font-size:14px;line-height:1.35;word-break:break-word}
 .creator .opt small{font-size:12px;line-height:1.45;word-break:break-word;white-space:normal}
 .creator h3{font-size:16px;margin:20px 0 8px}
}
@media(max-width:360px){.creator .opts,.creator .opts.three,.creator .opts.four{grid-template-columns:1fr!important}}
.c-score{display:flex;gap:14px;align-items:center;background:#f2f0e6;border:1px solid #dfdccd;border-radius:14px;padding:12px 14px;margin:6px 0 14px;color:#1f2e27}
.c-score p{margin:3px 0 0;font-size:13px;color:#51605a}
.c-rank{flex:none;width:62px;height:62px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#254d43;color:#fff}
.c-rank b{font-size:28px;line-height:1}.c-rank small{font-size:10px;opacity:.85}
.c-rank.rS{background:linear-gradient(135deg,#e8b64c,#c0822a)}.c-rank.rA{background:#2f6b57}.c-rank.rC{background:#6d7a74}.c-rank.rD{background:#8a8f8c}
.c-factors{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.c-factors div{display:grid;grid-template-columns:52px 1fr;gap:0 8px;background:#f8f7f1;border:1px solid #e3e1d5;border-radius:10px;padding:7px 10px;font-size:13px}
.c-factors span{grid-row:1/3;color:#8a7658;font-size:12px}.c-factors em{font-style:normal;color:#2f6b57;font-size:12px}

/* ===== 遊戲對話框（像動森那樣的框框） ===== */
#talkbox{position:fixed;z-index:9;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 14px);width:min(760px,calc(100% - 20px));display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none;animation:tbIn .18s ease-out}
@keyframes tbIn{from{opacity:0;transform:translate(-50%,16px)}}
#talkbox>*{pointer-events:auto}
.tb-card{position:relative;background:#FFFBEF;border:3px solid #E9DDBE;border-radius:28px 28px 30px 30px/24px 24px 30px 30px;box-shadow:0 10px 0 rgba(120,98,60,.18),0 18px 40px rgba(20,30,25,.28);padding:26px 22px 20px 116px;min-height:92px;color:#3A3226;cursor:pointer}
#talkbox.narr .tb-card{padding-left:24px}
.tb-face{position:absolute;left:16px;bottom:14px;width:86px;height:86px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 4px 12px rgba(80,60,30,.25);background:#eee}
.tb-face svg{width:100%;height:100%;display:block}
.tb-name{position:absolute;left:104px;top:-16px;background:#F2A541;color:#fff;font-weight:800;font-size:15px;padding:5px 16px;border-radius:999px;transform:rotate(-2deg);box-shadow:0 3px 0 rgba(150,90,20,.35);max-width:calc(100% - 120px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#talkbox.narr .tb-name{left:20px;background:#5B7C6A}
.tb-name small{font-weight:600;font-size:11px;opacity:.9;margin-left:8px}
.tb-text{font-size:17px;line-height:1.75;min-height:1.75em;word-break:break-word}
.tb-text small{font-size:12px}
.tb-next{position:absolute;right:22px;bottom:10px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #F2A541;opacity:0}
#talkbox.ready .tb-next{opacity:1;animation:nextBob .8s ease-in-out infinite}
@keyframes nextBob{50%{transform:translateY(4px)}}
.tb-choices{display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-height:min(46dvh,420px);overflow:auto;padding:4px 2px}
#talkbox:not(.ready) .tb-choices{opacity:.35}
.tb-choice{background:#FFFBEF;border:3px solid #E9DDBE;color:#3A3226;border-radius:999px;padding:9px 18px 9px 30px;font-size:15px;font-weight:700;text-align:left;max-width:min(560px,100%);box-shadow:0 4px 0 rgba(120,98,60,.18);cursor:pointer;position:relative;line-height:1.4}
.tb-choice::before{content:'';position:absolute;left:12px;top:50%;margin-top:-5px;border-left:8px solid #F2A541;border-top:5px solid transparent;border-bottom:5px solid transparent;opacity:0}
.tb-choice:hover::before,.tb-choice:focus-visible::before{opacity:1}
.tb-choice:hover,.tb-choice:focus-visible{background:#FFF1C9;outline:none}
.tb-choice:disabled{opacity:.45}
.tb-choice.danger{color:#A33A2A}
.tb-choice small{display:block;font-weight:500;font-size:12px;color:#8A7B63}
#talkbox.many .tb-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
#talkbox.many .tb-choice{max-width:none}
.tb-x{position:absolute;right:10px;bottom:calc(100% - 14px);width:34px;height:34px;border-radius:50%;border:3px solid #E9DDBE;background:#FFFBEF;color:#7A6A50;font-size:18px;line-height:1;cursor:pointer;display:none}
body.talking .bottombar,body.talking #joy,body.talking #actBtn{opacity:0;pointer-events:none!important}
@media(max-width:700px){
 .tb-card{padding:24px 16px 16px 16px;min-height:0;border-radius:22px}
 .tb-face{width:58px;height:58px;left:12px;top:-40px;bottom:auto}
 .tb-name{left:76px;top:-15px;font-size:14px;max-width:calc(100% - 90px)}
 #talkbox.narr .tb-name{left:14px}
 .tb-text{font-size:15.5px;line-height:1.7}
 .tb-choice{font-size:14.5px;padding:10px 16px 10px 26px;width:100%;max-width:none}
 .tb-choices{align-items:stretch;max-height:44dvh}
 #talkbox.many .tb-choices{grid-template-columns:1fr}
}

/* ===== 搖桿、互動按鈕、視角切換 ===== */
#joy{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:calc(env(safe-area-inset-bottom) + 104px);width:118px;height:118px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.28),rgba(255,255,255,.12));border:2px solid rgba(255,255,255,.55);box-shadow:0 6px 20px rgba(20,40,30,.2);pointer-events:auto;touch-action:none;display:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#joy i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e9e4d6);box-shadow:0 4px 10px rgba(0,0,0,.25);transition:transform .08s}
#joy.on i{transition:none}
#actBtn{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:calc(env(safe-area-inset-bottom) + 112px);width:86px;height:86px;border-radius:50%;border:3px solid #fff;background:rgba(242,165,65,.55);color:#fff;pointer-events:auto;display:none;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(80,50,10,.25);transition:transform .15s,background .15s;padding:4px}
#actBtn b{font-size:18px;line-height:1.1}#actBtn small{font-size:10px;max-width:74px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.95}
#actBtn.on{background:#F2A541;transform:scale(1.06);animation:actPulse 1.4s ease-in-out infinite}
@keyframes actPulse{50%{box-shadow:0 0 0 8px rgba(242,165,65,.25),0 6px 18px rgba(80,50,10,.25)}}
body[data-view="walk"] #actBtn{display:flex}
@media (pointer:coarse){body[data-view="walk"] #joy{display:block}}
@media (pointer:fine){#actBtn{bottom:74px;right:28px}#actBtn:not(.on){display:none!important}}
#viewBtn .vb{display:block;font-size:17px;line-height:1.1}#viewBtn span{font-size:10px;display:block}
#bubbles{position:fixed;inset:0;pointer-events:none;z-index:2}
.bub{position:absolute;left:0;top:0;background:#FFFBEF;color:#3A3226;border:2px solid #E9DDBE;border-radius:14px;padding:5px 11px;font-size:13px;font-weight:700;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 0 rgba(120,98,60,.15);transition:opacity .3s;animation:bubIn .2s ease-out}
.bub::after{content:'';position:absolute;left:50%;bottom:-8px;margin-left:-6px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #FFFBEF}
.bub.fade{opacity:0}
@keyframes bubIn{from{opacity:0;margin-top:6px}}
body.talking #bubbles{opacity:.25}
.fr-bar{height:5px;background:#e7e3d6;border-radius:9px;overflow:hidden;margin-top:5px;max-width:180px}.fr-bar i{display:block;height:100%;background:linear-gradient(90deg,#F2A541,#E76F51)}
.ico.i-town{background:#FCE8CF}.ico.i-town::after{background:#E76F51;border-radius:50%}
.ico.i-settings{background:#E3E6EA}.ico.i-settings::after{background:#5B6B7A;border-radius:30%}
/* 漫步模式手機 HUD 精簡 */
@media(max-width:700px){
 body[data-view="walk"] #goals{display:none!important}
 body[data-view="walk"] .save-status{display:none}
 body[data-view="walk"] #feed{bottom:calc(env(safe-area-inset-bottom) + 232px)!important;width:200px!important}
 body[data-view="walk"] .status{width:150px!important}
}
@media(max-height:560px) and (orientation:landscape){#joy{bottom:calc(env(safe-area-inset-bottom) + 14px);left:max(80px,env(safe-area-inset-left));width:100px;height:100px}#actBtn{bottom:calc(env(safe-area-inset-bottom) + 18px);width:74px;height:74px}}
.photo-portrait{background:none!important}

.virtue{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;background:#f4f1e6;border-radius:12px;padding:10px 12px;margin:8px 0}.virtue span{font-weight:700}.virtue span:first-child b{color:#2f6b57}.virtue span:nth-child(2) b{color:#a33a2a}.virtue small{flex-basis:100%;color:#6b6f66;font-size:12px}
.ico.i-course{background:#E4ECF7}.ico.i-course::after{background:#3D5A80;border-radius:3px}
.pts-left{color:#c0822a}
.add-dream{margin-top:12px}.add-dream summary{cursor:pointer;font-weight:700;color:#2f6b57}
@media(max-width:700px){#talkbox{gap:48px}}
#wpBar{position:absolute;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 74px);display:flex;align-items:center;gap:10px;background:#FFFBEF;border:2px solid #E9DDBE;border-radius:999px;padding:6px 6px 6px 14px;box-shadow:0 4px 0 rgba(120,98,60,.15),0 8px 20px rgba(0,0,0,.15);pointer-events:auto;max-width:calc(100% - 24px);z-index:4}
#wpBar div{display:flex;flex-direction:column;min-width:0}#wpBar b{font-size:14px;color:#3A3226;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}#wpBar small{font-size:11px;color:#8A7B63}
#wpBar .wp-dot{width:12px;height:12px;border-radius:50%;background:#E76F51;box-shadow:0 0 0 4px rgba(231,111,81,.25);flex:none}
#wpBar button{border:0;border-radius:999px;padding:8px 12px;font-weight:800;font-size:13px;background:#F2A541;color:#fff;cursor:pointer;white-space:nowrap}#wpBar #wpX{background:#eee7d6;color:#7A6A50;padding:8px 11px}
#wpPin{position:absolute;left:0;top:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;margin:-40px 0 0 -18px;width:36px}
#wpPin i{display:block;width:30px;height:30px;border-radius:50% 50% 50% 0;background:#E76F51;border:3px solid #fff;transform-origin:center;box-shadow:0 4px 10px rgba(0,0,0,.25)}
#wpPin.in i{transform:rotate(-45deg)!important;animation:pinBob 1s ease-in-out infinite}
#wpPin.out i{border-radius:50% 0 50% 50%;width:26px;height:26px}
#wpPin span{margin-top:4px;background:rgba(58,50,38,.85);color:#fff;font-size:11px;font-weight:700;border-radius:8px;padding:2px 7px;white-space:nowrap}
@keyframes pinBob{50%{margin-top:-6px}}
@media(max-width:700px){#wpBar{top:calc(env(safe-area-inset-top) + 64px)}body[data-view="walk"] .status{top:calc(env(safe-area-inset-top) + 112px)!important}}

.tb-text{max-height:38dvh;overflow:auto}
@media(max-height:560px) and (orientation:landscape){.tb-card{padding-top:20px;padding-bottom:12px}.tb-text{font-size:14.5px;max-height:30dvh}.tb-choices{max-height:34dvh}#talkbox.many .tb-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ===== 大地圖 ===== */
#bigmap{position:fixed;inset:0;z-index:12;background:#F7F3E8;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);color:#3A3226;animation:tbIn .18s ease-out}
.bm-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #E6DDC8}
.bm-head>b{font-size:18px;white-space:nowrap}
.bm-head input{flex:1;min-width:0;border:2px solid #E6DDC8;border-radius:999px;padding:8px 14px;background:#fff;color:#3A3226}
.bm-zoom{display:flex;gap:4px}.bm-zoom button,.bm-x{width:40px;height:40px;border-radius:50%;border:2px solid #E6DDC8;background:#fff;font-size:20px;font-weight:800;color:#3A3226;cursor:pointer}
.bm-x{background:#3A3226;color:#fff;border-color:#3A3226}
.bm-cats{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;scrollbar-width:none;flex:none}.bm-cats::-webkit-scrollbar{display:none}
.bm-cats button{flex:none;display:flex;align-items:center;gap:6px;border:2px solid #E6DDC8;background:#fff;border-radius:999px;padding:6px 12px;font-weight:700;font-size:13px;color:#3A3226;cursor:pointer}
.bm-cats button i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.bm-cats button.on{background:var(--c);border-color:var(--c);color:#fff}.bm-cats button.on i{background:#fff}
.bm-body{flex:1;min-height:0;display:grid;grid-template-columns:1fr 340px}
.bm-scroll{overflow:auto;background:#CFD6BE;touch-action:pan-x pan-y;overscroll-behavior:contain}
.bm-scroll canvas{display:block;cursor:pointer}
.bm-list{overflow:auto;border-left:1px solid #E6DDC8;background:#FFFBEF;padding:10px;display:flex;flex-direction:column;gap:8px}
.bm-sel{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;align-items:center;background:#fff;border:2px solid #F2A541;border-radius:16px;padding:12px}
.bm-sel small{display:block;color:#8A7B63;font-size:12px}
.bm-sel .go,.bm-sel .auto{grid-column:span 1;border:0;border-radius:999px;padding:10px;font-weight:800;cursor:pointer}
.bm-sel .go{background:#F2A541;color:#fff;grid-column:1/2}.bm-sel .auto{background:#3A3226;color:#fff}
.bm-sel .go{grid-column:1/-1}.bm-sel .auto{grid-column:1/-1}
.dot{width:14px;height:14px;border-radius:50%;flex:none;display:inline-block;box-shadow:0 0 0 2px #fff}
.bm-rows{display:flex;flex-direction:column;gap:4px}
.bm-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;text-align:left;background:transparent;border:0;border-radius:12px;padding:9px 8px;cursor:pointer;color:#3A3226}
.bm-row:hover,.bm-row.on{background:#F5EBD3}.bm-row b{font-size:14px}.bm-row small{display:block;color:#8A7B63;font-size:11.5px}.bm-row em{font-style:normal;font-size:12px;color:#8A7B63;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:760px){.bm-body{grid-template-columns:1fr;grid-template-rows:1fr minmax(0,42%)}.bm-list{border-left:0;border-top:1px solid #E6DDC8}.bm-head>b{display:none}}
body.bigmap-open #talkbox{display:none}
/* ===== 手機聊天 ===== */
#chatapp{position:fixed;inset:0;z-index:13;background:rgba(20,28,24,.45);display:flex;align-items:center;justify-content:center;animation:tbIn .18s ease-out}
.ph-frame{width:min(400px,100%);height:min(780px,100dvh);background:#EEF1F4;border-radius:34px;border:10px solid #1d2023;box-shadow:0 30px 80px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden;color:#22262a}
.ph-status{display:flex;justify-content:space-between;padding:8px 22px 4px;font-size:12px;background:#fff}
.ph-head{display:flex;align-items:center;gap:8px;padding:6px 10px 10px;background:#fff;border-bottom:1px solid #e3e6ea}
.ph-head>b{flex:1;text-align:center;font-size:17px}
.ph-back{width:38px;height:38px;border:0;border-radius:50%;background:#f0f2f4;font-size:22px;line-height:1;color:#22262a;cursor:pointer;flex:none}
.ph-who{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.ph-who b{display:block;font-size:15px}.ph-who small{display:block;font-size:11px;color:#7a828a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-av{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;background:#ddd;display:block}.ph-av svg{width:100%;height:100%;display:block}.ph-av.sm{width:34px;height:34px}
.ph-search{padding:8px 12px;background:#fff}.ph-search input{width:100%;box-sizing:border-box;border:0;background:#f0f2f4;border-radius:10px;padding:9px 12px}
.ph-tabs{display:flex;gap:6px;padding:0 12px 8px;background:#fff;border-bottom:1px solid #e3e6ea}
.ph-tabs button{flex:1;border:0;background:transparent;padding:8px 4px;font-weight:700;color:#7a828a;border-bottom:3px solid transparent;cursor:pointer;position:relative}
.ph-tabs button.on{color:#16a34a;border-color:#16a34a}.ph-tabs i{font-style:normal;background:#e5484d;color:#fff;border-radius:999px;font-size:10px;padding:1px 6px;margin-left:4px}
.ph-list{flex:1;overflow:auto;background:#fff}
.ph-row{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 14px;border:0;background:#fff;text-align:left;cursor:pointer;border-bottom:1px solid #f1f3f5;color:#22262a}
.ph-row:hover{background:#f7f9fa}.ph-row b{font-size:15px}.ph-row small{display:block;color:#7a828a;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}
.ph-row em{font-style:normal;font-size:11px;color:#9aa1a8;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.ph-row em i{font-style:normal;background:#16a34a;color:#fff;border-radius:999px;font-size:11px;padding:1px 7px}
.ph-empty{color:#7a828a;text-align:center;padding:30px 20px;font-size:13px;line-height:1.7}
.ph-msgs{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:#9bb4c8}
.ph-day{align-self:center;background:rgba(0,0,0,.18);color:#fff;font-size:11px;border-radius:999px;padding:2px 10px}
.ph-msg{display:flex;align-items:flex-end;gap:6px;max-width:86%}.ph-msg p{margin:0;padding:9px 12px;border-radius:18px;font-size:14.5px;line-height:1.5;word-break:break-word}
.ph-msg small{font-size:10px;color:#eef3f7;white-space:nowrap}
.ph-msg.them{align-self:flex-start}.ph-msg.them p{background:#fff;border-top-left-radius:6px}
.ph-msg.me{align-self:flex-end}.ph-msg.me p{background:#8de055;border-top-right-radius:6px}
.ph-card{display:block;background:#fff;border-radius:10px;padding:8px 10px;font-size:13px;line-height:1.5}
.ph-sticker{font-size:13px;color:#555}
.ph-typing{align-self:flex-start;background:#fff;border-radius:18px;padding:10px 14px;display:flex;gap:4px}.ph-typing span{width:6px;height:6px;border-radius:50%;background:#9aa1a8;animation:dotB 1s infinite}.ph-typing span:nth-child(2){animation-delay:.15s}.ph-typing span:nth-child(3){animation-delay:.3s}
@keyframes dotB{50%{transform:translateY(-4px);opacity:.5}}
.ph-replies{display:flex;gap:6px;overflow-x:auto;padding:10px 10px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e3e6ea;flex-wrap:wrap;max-height:34%;overflow-y:auto}
.ph-replies button{border:1.5px solid #16a34a;color:#15803d;background:#fff;border-radius:999px;padding:8px 12px;font-size:13.5px;font-weight:700;cursor:pointer;text-align:left}
.ph-replies button:hover{background:#ecfdf3}
@media(max-width:520px){#chatapp{background:#fff}.ph-frame{width:100%;height:100%;border:0;border-radius:0;padding-top:env(safe-area-inset-top)}}
.mail-list{display:flex;flex-direction:column;gap:6px}.mail-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;text-align:left;border:1px solid #e3e1d5;background:#fff;border-radius:12px;padding:10px 12px;cursor:pointer}
.mail-row.unread{border-color:#F2A541;background:#FFFBEF}.mail-row.unread b{font-weight:800}.mail-row small{display:block;color:#8A7B63;font-size:12px}
.mk{font-size:11px;font-weight:800;border-radius:6px;padding:3px 7px;color:#fff;background:#5B7C6A}.mk.poach{background:#C0572B}.mk.scam{background:#A33A2A}.mk.info{background:#8a8f8c}
.mail-view h3{margin:6px 0 10px}.mail-view small{color:#8A7B63}.mail-body{background:#fff;border:1px solid #e3e1d5;border-radius:12px;padding:14px;line-height:1.8}.mail-state{color:#2f6b57;font-weight:700}.mail-acts{flex-wrap:wrap;gap:8px;margin-top:12px}
.ico.i-chat{background:#DDF5E4}.ico.i-chat::after{background:#16a34a;border-radius:40% 40% 40% 8%}
.ico.i-mail{background:#E7ECF8}.ico.i-mail::after{background:#4A6FA5;border-radius:3px}
.ev-card{background:#fff;border:1px solid #e3e1d5;border-radius:14px;padding:12px 14px;margin-bottom:10px}.ev-card.team{border-color:#9fc7b3;background:#f5fbf7}
.ev-top{display:flex;align-items:center;gap:8px}.ev-top b{flex:1}.ev-top em{font-style:normal;font-size:12px;color:#8A7B63}
.ev-tag{font-size:11px;font-weight:800;color:#fff;background:#C0572B;border-radius:6px;padding:2px 7px}.team .ev-tag{background:#2f6b57}
.ev-card p{margin:6px 0;font-size:13px;color:#4a4a42}.ev-bar{height:8px;background:#eee8d8;border-radius:9px;overflow:hidden}.ev-bar i{display:block;height:100%;background:linear-gradient(90deg,#F2A541,#E76F51)}.team .ev-bar i{background:linear-gradient(90deg,#57a47f,#2f6b57)}
.ev-card small{display:block;margin-top:6px;color:#6b6f66;font-size:12px}
.ico.i-events{background:#FCE8CF}.ico.i-events::after{background:#C0572B;border-radius:50% 50% 8% 8%}
#hud.info-open #joy,#hud.info-open #actBtn{display:none!important}
#info{z-index:6!important;max-height:calc(100dvh - 250px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#info .x{width:40px!important;height:40px!important;font-size:22px!important;position:sticky!important;top:0;float:right;z-index:2}
@media(max-width:700px){#info{left:10px!important;right:10px!important;bottom:calc(env(safe-area-inset-bottom) + 92px)!important;width:auto!important}}
.opt.on small{color:#2f4a3c!important;opacity:1!important}
