/* HARUMORI / 2026-11-06 / Uploaded purple gothic chibi town reference.
   This is a PLAYABLE procedural preview, not a claim that finished 2D or 3D art exists.
   No wuxia, realistic-proportioned heroes, or fabricated HUD currencies. */
:root{--ink:#f4e4f3;--muted:#c8b5cc;--paper:#24172f;--deep:#160f22;--gold:#e5b873;--green:#aa99c5;--plum:#bc83ed;--line:#e5bd7b58;--shadow:0 14px 38px #0b061dcc}
html,body{background:#140d20}
.game-shell{background:radial-gradient(ellipse at 50% 25%,#57366c 0%,#1a102d 74%)}
.screen-grain{background:radial-gradient(ellipse at 50% 40%,transparent 37%,#15082566 82%,#120a1a88),linear-gradient(#26103821,transparent 34%,#1d0b2c3d)}
.topbar{left:18px;right:18px;top:11px;gap:12px}
.identity-cluster{display:flex;align-items:center;gap:16px;min-width:0}
.player-status{display:flex;align-items:center;gap:9px;min-width:225px;padding:6px 10px 6px 6px;border:1px solid #e0b57991;border-radius:42px 14px 14px 42px;background:linear-gradient(135deg,#291b3af2,#24132cf0);box-shadow:0 6px 20px #0f071bd9,inset 0 0 0 1px #c69d552c}
.profile-art{width:62px;height:62px;flex:none;border:2px solid #d9b67f;border-radius:50%;object-fit:cover;object-position:center 20%;background:#4d3568;box-shadow:0 0 0 2px #281c36,0 0 13px #bd74d274}
.profile-copy{min-width:126px;flex:1;display:flex;flex-direction:column;gap:3px}
.profile-copy strong{font:400 13px var(--font-main);color:#f7e4f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-copy small{color:#ccabdc;font-size:9px;white-space:nowrap}
.profile-hp-text,#profile-hp-text{font-size:9px;color:#f2c9e3}
.profile-health{height:8px;width:100%;border:1px solid #bd7295aa;background:#3b2337;border-radius:10px;overflow:hidden}
.profile-health i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ca486d,#ff7a9d);box-shadow:0 0 7px #d8588faa;transition:width .2s}
.brand{flex:0 0 auto;padding:7px 10px;border-left:1px solid #cfa66d45}
.brand b{font-size:19px;letter-spacing:3px;color:#f6e4ef;text-shadow:0 2px 8px #a267ac}
.brand small{font-size:7px;color:#c6a5cb}
.brand-flower{font-size:29px;color:#e9b879}
.resource-bar{margin-left:auto;max-width:46vw;padding:6px 8px;background:#241832e9;border:1px solid #cb9b68aa;box-shadow:inset 0 0 0 1px #c07bc022,0 5px 19px #0e0922}
.resource-item{padding:3px 8px;gap:4px;border-right-color:#b68b7755;font-size:12px}
.resource-item small{color:#d8bbd7;font-size:8px}
.resource-icon{font-size:17px}
.top-actions{flex:0 0 auto;gap:5px}
.round-button{border-color:#cfaa73a0;border-radius:50%;background:#291b3deb;color:#edc587;box-shadow:inset 0 0 0 1px #ad72902e}
.round-button:hover{background:#50305c}
.place-card{left:20px;top:98px;max-width:255px;border-left:2px solid #e1b37574;padding-left:13px}
.place-card h1{font-size:21px;color:#f6e4f3;margin:3px 0}
.place-card>p{font-size:9px;color:#d9c4de;line-height:1.5}
.place-status{margin-top:5px;color:#d3bfd9;font-size:9px}
.travel-switch{margin-top:8px;background:#29172edb;border-color:#c99c698a;border-radius:8px}
.travel-switch button{padding:7px 10px;font-size:10px;color:#dcc4da}
.travel-switch button:hover,.travel-switch button.active{background:#684178;color:#ffe1ae}
.equipped-summary{font-size:9px;line-height:1.45;margin-top:5px;color:#e1bfdf}
.quest-card{left:20px;right:auto;top:270px;width:255px;max-height:calc(100vh - 330px);overflow:auto;background:linear-gradient(155deg,#291830e8,#171225dc);border:1px solid #caa36ea8;border-radius:10px;box-shadow:0 14px 34px #0d0818b8,inset 0 0 0 1px #9f74ab40;padding:13px}
.quest-heading{color:#eccc9e;font-size:11px;letter-spacing:1px}
.quest-heading::before{content:"✦";font-size:9px;color:#e6b87d}
.quest-card h3{color:#f3e3ec;font-size:12px}
.quest-card p{color:#d8bed7;font-size:10px}
.quest-card small{font-size:9px;color:#bfacc8}
.quest-progress{background:#493050}
.quest-progress i{background:linear-gradient(90deg,#a35ac5,#f2bc83)}
.tool-rail{left:auto;right:18px;bottom:34px;transform:none;gap:3px;max-width:calc(100vw - 38px);padding:6px;background:#23172fe9;border:1px solid #e2b97fa0;box-shadow:0 11px 30px #14091ad9,inset 0 0 0 1px #9c5da03d;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#86549b transparent}
.tool-rail button{min-width:69px;padding:8px 8px 7px;gap:4px}
.tool-rail button span{font-size:21px;color:#ecd09b}
.tool-rail button b{font-size:9px;color:#e4cfe3}
.tool-rail button:hover,.tool-rail button.active{background:#643b76}
.tool-rail button.active span,.tool-rail button.active b{color:#ffda91}
.side-panel{background:linear-gradient(155deg,#26182ff6,#1c1329f9);border-color:#d8ab75a3;box-shadow:0 18px 45px #0d0718e5,inset 0 0 0 1px #86578f44}
.panel-heading h2{color:#f7e5f2}
.primary-button{background:linear-gradient(110deg,#8b50b6,#5c307d);border-color:#dab3a5;color:#fff0f4}
.secondary-button{background:#44304f;border-color:#b883bf88;color:#f2d5f5}
.primary-button:hover,.secondary-button:hover{filter:brightness(1.17)}
.side-panel.dialogue-layout{left:50%;right:auto;transform:translateX(-50%);top:auto;bottom:105px;width:min(820px,calc(100vw - 32px));max-height:min(48vh,420px);padding:17px 23px 14px;border-radius:14px 14px 18px 18px;background:linear-gradient(140deg,#26162df5,#261632f7);overflow-y:auto}
.dialogue-layout .panel-heading{border-bottom:1px solid #dbb58255;padding-bottom:7px}
.dialogue-layout .panel-heading h2{font-size:19px;margin:2px 0 3px}
.dialogue-layout .panel-intro{font-size:10px;margin:7px 0;color:#e3c6da}
.dialogue-layout #panel-content{display:grid;grid-template-columns:minmax(0,1fr) 150px;column-gap:13px;align-items:start}
.dialogue-layout .npc-dialogue-card{grid-column:1;grid-row:1;display:flex;margin:0;min-height:150px;background:#3a24499c;border-color:#b98bc26b}
.dialogue-layout .npc-dialogue-card h3{color:#fce0a4;font-size:16px}
.dialogue-layout .npc-dialogue-card p{font-size:12px;line-height:1.85}
.dialogue-layout .npc-dialogue-portrait{flex:0 0 120px;min-height:148px;border:1px solid #d6a76b99;background:radial-gradient(#8860ae70,#291736 75%)}
.dialogue-layout .npc-dialogue-portrait img{width:120px;height:148px;object-fit:cover;object-position:center 20%}
.dialogue-layout .npc-dialogue-actions{grid-column:2;grid-row:1;display:flex;flex-direction:column;margin:0;align-items:stretch;gap:7px}
.dialogue-layout .npc-dialogue-actions button{width:100%;min-height:38px;font-size:11px}
.dialogue-layout #panel-content>.panel-note,.dialogue-layout #panel-content>.section-title,.dialogue-layout #panel-content>.stock-card,.dialogue-layout #panel-content>.npc-story,.dialogue-layout #panel-content>.gift-row,.dialogue-layout #panel-content>.recipe-cost{grid-column:1/-1}
.dialogue-layout #panel-content>.panel-note{font-size:9px;margin-top:7px;padding:5px 9px;background:#211525}
.city-minimap{position:absolute;right:24px;top:84px;width:145px;height:145px;border:2px solid #deb37b;border-radius:50%;background:radial-gradient(circle at 54% 35%,#77718a,#413e64 45%,#292036 76%);box-shadow:0 0 0 4px #39233cbb,0 0 25px #d080e144,inset 0 0 18px #130d21;z-index:5;cursor:pointer;overflow:visible}
.city-minimap:focus-visible{outline:3px solid #f2d2aa;outline-offset:5px}
.minimap-orbit{position:absolute;inset:8px;border:1px dashed #e8be8d9a;border-radius:50%;pointer-events:none}
.minimap-road{position:absolute;background:#c6a5aa5e;border:1px solid #ecd2bb77;box-shadow:0 0 6px #ce95c175;pointer-events:none}
.minimap-road-h{left:8%;right:8%;top:46%;height:8%}
.minimap-road-v{top:8%;bottom:8%;left:47%;width:8%}
.minimap-plaza{position:absolute;width:24%;height:24%;left:38%;top:38%;border-radius:50%;border:2px solid #c6a9abcc;background:#8a658a80;pointer-events:none}
.minimap-shops{position:absolute;inset:8%;pointer-events:none}
.minimap-shop{width:7px;height:7px;position:absolute;transform:translate(-50%,-50%);background:#ffcc84;border-radius:50%;box-shadow:0 0 7px #f4b27b;pointer-events:none}
.minimap-player{width:11px;height:11px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid #fff9d5;border-radius:50%;background:#d286f7;box-shadow:0 0 0 2px #6f3675,0 0 10px #e4a2ff;pointer-events:none}
.minimap-north{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font:400 12px serif;color:#f5d5a6;text-shadow:0 2px 6px #090412;pointer-events:none}
.minimap-title{position:absolute;bottom:-23px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#f7d5b8;text-shadow:0 2px 5px #0e0717;font-size:10px;pointer-events:none}
.camera-tools{right:20px;bottom:124px}
.chatless-feed{left:21px;bottom:85px}
.bottom-help{left:20px;transform:none;bottom:16px}
.prototype-label{left:20px;right:20px}
@media (max-width:1250px){
 .brand{display:none}
 .resource-bar{max-width:49vw}
 .resource-item small{display:none}
 .city-minimap{width:116px;height:116px;top:81px;right:20px}
 .tool-rail button{min-width:61px}
 .place-card{top:91px}
 .quest-card{top:245px;max-height:calc(100vh - 285px)}
}
@media (max-width:850px){
 .topbar{left:10px;right:10px;top:8px}
 .player-status{min-width:175px;max-width:205px;padding:4px 7px 4px 4px;gap:7px}
 .profile-art{width:51px;height:51px}
 .profile-copy{min-width:100px}
 .profile-copy strong{font-size:11px}
 .profile-copy small{font-size:7px}
 .resource-bar{max-width:calc(100vw - 285px);padding:4px;gap:1px}
 .resource-item{padding:3px;font-size:10px}
 .resource-icon{font-size:15px}
 .top-actions{gap:3px}
 .top-actions .round-button{width:28px;height:28px;font-size:16px}
 .place-card{left:12px;top:82px;max-width:206px;padding-left:7px}
 .place-card h1{font-size:16px}
 .place-card>p{display:none}
 .place-status{margin-top:3px}
 .travel-switch{margin-top:5px}
 .travel-switch button{font-size:9px;padding:6px}
 .equipped-summary{display:none}
 .quest-card{left:12px;top:174px;width:200px;max-height:calc(100vh - 280px);padding:10px}
 .quest-card h3{font-size:11px}
 .quest-card p{font-size:9px}
 .city-minimap{width:90px;height:90px;top:105px;right:14px}
 .minimap-shop{width:5px;height:5px}
 .tool-rail{right:7px;left:7px;bottom:38px;max-width:none;justify-content:flex-end;overflow-x:auto}
 .tool-rail button{min-width:54px;padding:5px 4px}
 .tool-rail button span{font-size:18px}
 .tool-rail button b{font-size:8px}
 .camera-tools{bottom:115px;right:11px}
 .side-panel.dialogue-layout{bottom:109px;width:calc(100vw - 16px);max-height:49vh;padding:12px}
 .dialogue-layout #panel-content{grid-template-columns:minmax(0,1fr) 106px;gap:7px}
 .dialogue-layout .npc-dialogue-portrait{flex-basis:75px;min-height:93px}
 .dialogue-layout .npc-dialogue-portrait img{width:75px;height:93px}
 .dialogue-layout .npc-dialogue-card{padding:8px;gap:8px;min-height:104px}
 .dialogue-layout .npc-dialogue-card h3{font-size:13px}
 .dialogue-layout .npc-dialogue-card p{font-size:10px}
 .dialogue-layout .npc-dialogue-actions button{font-size:9px;min-height:31px;padding:6px}
 .bottom-help{bottom:18px;max-width:95vw;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:520px){
 .resource-bar{position:absolute;top:64px;right:0;max-width:calc(100vw - 14px);background:#1b1228df}
 .identity-cluster{gap:4px}
 .place-card{top:103px;left:10px}
 .quest-card{top:184px;width:190px;max-height:calc(100vh - 355px)}
 .city-minimap{top:111px;right:12px;width:86px;height:86px}
 .tool-rail{bottom:35px;padding:3px;gap:1px;justify-content:flex-start}
 .tool-rail button{min-width:56px}
 .side-panel.dialogue-layout{bottom:100px;max-height:51vh}
 .dialogue-layout .npc-dialogue-card{flex-wrap:nowrap}
 .dialogue-layout .npc-dialogue-portrait{flex-basis:62px;min-height:80px}
 .dialogue-layout .npc-dialogue-portrait img{width:62px;height:80px}
 .dialogue-layout .npc-dialogue-card p{font-size:9px}
 .dialogue-layout .npc-dialogue-card h3{font-size:12px}
 .prototype-label{font-size:6px}
 .chatless-feed{bottom:114px;left:10px}
 .adventure-hud{bottom:118px;max-width:95vw;flex-wrap:wrap;justify-content:center;white-space:normal}
}
@media (prefers-reduced-motion:reduce){.profile-health i,.tool-rail button{transition:none}}

/* ===== v0.6 UI pass (2026-11-06): dark-fairytale type + ChatGPT-made login art ===== */
:root{--font-main:"Huninn","PingFang TC","Microsoft JhengHei",sans-serif;--font-title:var(--font-main);--font-latin:var(--font-main);--gold-text:linear-gradient(180deg,#fff3d6 0%,#f0cf8f 38%,#b98443 70%,#e9c487 100%)}
body,button,input,select,textarea{font-family:var(--font-main);font-weight:400}
#panel-content,#panel-content p,.quest-card p,.dialogue-layout .npc-dialogue-card p{color:#efe3d6}
.eyebrow,.brand small{font-family:var(--font-latin);letter-spacing:.18em}
.gold-text,.panel-heading h2,.dialogue-layout .npc-dialogue-card h3,.quest-card h3,.place-card h1,.help-modal h2,.loading-overlay h2{font-family:var(--font-title);font-weight:400;color:#f7ecdc;letter-spacing:.06em;text-shadow:0 1px 0 #1a0d22,0 2px 6px #0b0414cc}

/* Login: full-screen, mobile-first */
dialog[open].welcome-modal.login-screen{display:flex}
.welcome-modal.login-screen{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none;overflow:hidden auto;background:#120a1c url('./assets/ui/login-bg.webp') center 32%/cover no-repeat;flex-direction:column;align-items:center}
.login-screen::backdrop{background:#0b0712}
.login-scene{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,#0e061800 0%,#0e061800 40%,#120a1cc4 66%,#0d0715f2 100%)}
.login-moonglow{position:absolute;right:6%;top:4%;width:42vmin;height:42vmin;border-radius:50%;background:radial-gradient(circle,#ff4d5e33,#ff4d5e00 65%);animation:moon-breathe 6s ease-in-out infinite}
.login-fog{position:absolute;left:-20%;right:-20%;bottom:28%;height:22%;background:radial-gradient(ellipse at 30% 50%,#b48ad62a,transparent 60%),radial-gradient(ellipse at 75% 60%,#d3a6ee22,transparent 55%);filter:blur(10px);animation:fog-drift 18s ease-in-out infinite alternate}
.login-motes{position:absolute;inset:0;background-image:radial-gradient(2px 2px at 12% 72%,#ffd59acc,transparent),radial-gradient(1.5px 1.5px at 33% 58%,#e7b8ffcc,transparent),radial-gradient(2px 2px at 58% 80%,#ffd59abb,transparent),radial-gradient(1.5px 1.5px at 81% 64%,#e7b8ffcc,transparent),radial-gradient(1.5px 1.5px at 92% 86%,#ffd59aaa,transparent),radial-gradient(2px 2px at 46% 47%,#f3c6ff99,transparent);animation:motes-rise 9s linear infinite}
.login-column{position:relative;z-index:1;width:min(440px,100%);min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:max(14px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));box-sizing:border-box}
.login-head{text-align:center;margin-top:1vh}
.login-logo{width:min(92vw,400px);height:auto;display:block;margin:0 auto;filter:drop-shadow(0 6px 18px #0b0414cc) drop-shadow(0 0 22px #a463d84d);animation:logo-in 1.1s ease-out both}
.login-tagline{margin:-2px 0 0;font-size:12px;letter-spacing:.2em;color:#f1dcc0;text-shadow:0 2px 6px #12061e,0 0 12px #7a3d9a}
.login-panel{margin-top:auto;width:100%;box-sizing:border-box;padding:24px 20px 14px;position:relative}
.ornate-frame{border:1px solid #d7ad6e;border-radius:14px;background:linear-gradient(170deg,#2d1a3ef2,#1a1027f7 60%,#140c1ff9);box-shadow:0 18px 50px #08030fcc,inset 0 0 0 3px #1a0f24,inset 0 0 0 4px #b98a5277,inset 0 0 30px #7e48a033}
.ornate-frame::before,.ornate-frame::after{content:"";position:absolute;width:44px;height:44px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23e3bb7c' stroke-width='1.6'%3E%3Cpath d='M3 41V14Q3 3 14 3h27'/%3E%3Cpath d='M9 41V18q0-9 9-9h23' stroke-width='.9' opacity='.7'/%3E%3Cpath d='M3 14q6 1 8 6M14 3q1 6 6 8'/%3E%3Ccircle cx='8' cy='8' r='2.4' fill='%23c58bf0' stroke='none'/%3E%3C/svg%3E") no-repeat}
.ornate-frame::before{left:-3px;top:-3px}
.ornate-frame::after{right:-3px;bottom:-3px;transform:rotate(180deg)}
.login-panel-title{position:absolute;left:50%;top:0;transform:translate(-50%,-55%);display:flex;align-items:center;gap:8px;white-space:nowrap;font:400 16px var(--font-title);letter-spacing:.2em;padding:5px 16px;color:#f7ecdc;text-shadow:0 2px 3px #12061d}
.login-panel-title::before{content:"";position:absolute;inset:0;z-index:-1;border:1px solid #d7ad6e;border-radius:4px;background:linear-gradient(#3b2150,#211330);box-shadow:0 4px 12px #0b0414aa}
.login-panel-title i{width:7px;height:7px;transform:rotate(45deg);background:#e6b979;box-shadow:0 0 8px #e6b979}
.login-screen .avatar-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 4px}
.login-screen .avatar-option{height:158px;border:1px solid #8d6aa055;border-radius:12px;background:radial-gradient(ellipse at 50% 30%,#5f3a7a,#251634 70%);overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.login-screen .avatar-option img{height:215px;top:-6px;filter:saturate(.75) brightness(.8);transition:filter .2s}
.login-screen .avatar-option>span{display:flex;flex-direction:column;gap:1px;padding:22px 0 8px;background:linear-gradient(transparent,#170c22f2 55%)}
.login-screen .avatar-option>span b{font:400 15px var(--font-title);letter-spacing:.15em;color:#e8d3e8}
.login-screen .avatar-option>span small{font:400 9px var(--font-latin);letter-spacing:.3em;color:#a98fb7}
.login-screen .avatar-option.selected{border-color:#f0c482;box-shadow:0 0 0 1px #f0c48299,0 0 22px #c27fe680,inset 0 0 20px #e8a8ff33;transform:translateY(-2px)}
.login-screen .avatar-option.selected img{filter:none}
.login-screen .avatar-option.selected>span b{color:#ffe1a6;text-shadow:0 0 10px #d07dff}
.login-screen .avatar-note{text-align:center;font-size:10px;color:#b89fc2;margin:8px 0 12px}
.login-screen label{display:block;font-size:12px;letter-spacing:.12em;color:#e7c993;margin:0 0 7px}
.login-screen input{width:100%;box-sizing:border-box;padding:13px 14px;font-size:16px;border-radius:9px;border:1px solid #a4805a;background:#120a1ae6;color:#f8e6c4;box-shadow:inset 0 2px 8px #000a;outline:none}
.login-screen input:focus{border-color:#efc27d;box-shadow:inset 0 2px 8px #000a,0 0 0 3px #b06fe044}
.login-screen input[readonly]{color:#d9c4a6;background:#1b1124}
.login-start{position:relative;display:block;width:100%;margin-top:14px;min-height:54px;border-radius:12px;border:1px solid #f0c98a;background:linear-gradient(180deg,#a865d6 0%,#7a3aa8 48%,#4e216f 100%);box-shadow:0 8px 22px #3a0f5299,inset 0 1px 0 #f4d3ff99,inset 0 -3px 0 #2c0d40;font:400 17px var(--font-title);letter-spacing:.22em;color:#fff2da;text-shadow:0 2px 3px #2a0b3a,0 0 10px #f0b4ff88;overflow:hidden}
.login-start::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,#fff5 50%,transparent);animation:btn-shine 3.6s ease-in-out infinite}
.login-start:active{transform:translateY(1px);filter:brightness(1.1)}
.login-start:disabled{filter:grayscale(.5) brightness(.8)}
.login-screen .login-error{text-align:center;margin:8px 0 0}
.login-foot{margin:12px 0 0;font-size:10px;letter-spacing:.12em;color:#a690ae;text-align:center}
.loading-overlay.login-backdrop{background:#120a1c url('./assets/ui/login-bg.webp') center 32%/cover no-repeat}
.loading-overlay.login-backdrop::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0e061833,#0e0618e6)}
.loading-overlay>*{position:relative}
.loading-logo{width:min(84vw,380px);height:auto;filter:drop-shadow(0 6px 18px #0b0414cc)}
.loading-overlay .loading-flower{margin-top:10px;font-size:46px;color:#f0c27e;filter:drop-shadow(0 0 12px #f0c27e)}
.loading-overlay p,.blocked-message{color:#e7d2e6;font-size:13px;letter-spacing:.08em;max-width:300px;text-align:center;line-height:1.8}
@keyframes moon-breathe{50%{opacity:.55;transform:scale(1.08)}}
@keyframes fog-drift{to{transform:translateX(8%)}}
@keyframes motes-rise{from{transform:translateY(0);opacity:.9}to{transform:translateY(-14vh);opacity:.3}}
@keyframes logo-in{from{opacity:0;transform:translateY(-10px) scale(.96)}}
@keyframes btn-shine{0%,60%{left:-60%}100%{left:130%}}
@media (min-width:900px){.welcome-modal.login-screen{background-image:url('./assets/ui/login-bg-wide.webp'),url('./assets/ui/login-bg.webp');background-position:center}.loading-overlay.login-backdrop{background-image:url('./assets/ui/login-bg-wide.webp'),url('./assets/ui/login-bg.webp')}.login-column{justify-content:safe center;gap:6px}.login-logo{width:min(380px,52vh)}.login-panel{margin-top:22px}.login-panel.ornate-frame{padding:22px 22px 12px}.login-screen .avatar-option{height:min(158px,19vh)}.login-screen .avatar-option img{height:min(215px,26vh)}}
@media (max-height:700px){.login-screen .avatar-option{height:122px}.login-screen .avatar-option img{height:170px}.login-logo{width:min(78vw,320px)}}
@media (prefers-reduced-motion:reduce){.login-moonglow,.login-fog,.login-motes,.login-start::after,.login-logo{animation:none}}

/* Tool rail: ChatGPT-made gothic medallion icons (reference bottom-right bar) */
.tool-rail{background:linear-gradient(180deg,#2a1838ee,#1a0f25f2);border:1px solid #d3a96c;border-radius:16px;box-shadow:0 12px 30px #0b0414cc,inset 0 0 0 3px #170c20,inset 0 0 0 4px #a07a4a66}
.tool-rail button{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border-radius:12px;padding:5px 4px 6px;min-width:66px;transition:transform .15s,background .15s}
.tool-rail .rail-icon{width:50px;height:50px;object-fit:contain;filter:drop-shadow(0 3px 5px #0a0412cc);transition:filter .15s,transform .15s}
.tool-rail button b{font:400 11px var(--font-title);letter-spacing:.06em;color:#f3e7d8;text-shadow:0 1px 2px #12071a,0 0 4px #12071a}
.tool-rail button:hover,.tool-rail button.active{background:radial-gradient(ellipse at 50% 40%,#7a46a066,transparent 70%)}
.tool-rail button:hover .rail-icon,.tool-rail button.active .rail-icon{filter:drop-shadow(0 0 8px #e3a8ff) drop-shadow(0 3px 5px #0a0412cc);transform:translateY(-2px) scale(1.04)}
.tool-rail button.active b{color:#ffe2a8}
.tool-rail button:active .rail-icon{transform:scale(.94)}
@media (max-width:850px){.tool-rail button{min-width:58px;padding:4px 2px 5px}.tool-rail .rail-icon{width:44px;height:44px}.tool-rail button b{font-size:10px}}
@media (max-width:520px){.tool-rail button{min-width:56px}.tool-rail .rail-icon{width:42px;height:42px}}
.login-head{position:relative}
.login-head::before{content:"";position:absolute;left:50%;top:46%;width:120%;height:90%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#12061ccc 0%,#12061c66 45%,transparent 70%);z-index:-1;pointer-events:none}
@media (max-width:520px){
 .quest-card{top:222px;bottom:auto;height:auto;max-height:34vh;width:200px}
 .place-card h1{font-size:17px;line-height:1.3}
}

/* ===== v0.6.1 In-game text matches the reference image =====
   Reference text (now jf open 粉圓 Huninn) with a dark soft shadow,
   titles sitting on dark plum plaques with a thin antique-gold double border, no English eyebrows. */
.game-shell,.side-panel,dialog{--ref-text:#fbf5ec;--ref-sub:#e6dad0;--ref-plaque:linear-gradient(180deg,#2c1a38f2,#1b1024f5);--ref-gold:#c9a067}
.game-shell{color:var(--ref-text)}
.game-shell :is(p,small,span,b,strong,h1,h2,h3,label,li,button,a){text-shadow:0 1px 2px #0b0410,0 0 3px #0b041099}
.game-shell .eyebrow,.side-panel .eyebrow,#place-kicker,#panel-kicker,.brand small,.prototype-label{display:none}
/* titles on plaques */
.panel-heading h2,.quest-heading,.section-title,.dialogue-layout .npc-dialogue-card h3{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border:1px solid var(--ref-gold);border-radius:6px;background:var(--ref-plaque);box-shadow:inset 0 0 0 2px #140a1c,inset 0 0 0 3px #c9a06755,0 3px 10px #0a0412aa;font:400 15px var(--font-title);letter-spacing:.08em;color:var(--ref-text)!important;filter:none;-webkit-text-fill-color:currentColor}
.quest-heading{font-size:13px;width:100%;box-sizing:border-box}
.quest-heading::before{color:var(--ref-gold)}
.section-title{font-size:13px;margin:12px 0 8px}
/* body copy: larger, white, readable */
.place-card h1{font:400 19px/1.35 var(--font-title);color:var(--ref-text);background:none;-webkit-text-fill-color:currentColor;filter:none}
.place-card>p,.place-status,.equipped-summary{font-size:11px;color:var(--ref-sub)}
.travel-switch button{font:400 12px var(--font-title);color:var(--ref-text)}
.quest-card h3{font:400 14px var(--font-title);color:var(--ref-text);background:none;-webkit-text-fill-color:currentColor;filter:none}
.quest-card p{font-size:12px;line-height:1.7;color:var(--ref-text)}
.quest-card small,.text-button{font-size:11px;color:var(--ref-sub)}
.text-button{color:#f0cf95}
.profile-copy strong{font:400 15px var(--font-title);color:var(--ref-text)}
.profile-copy small,#profile-hp-text{font-size:10px;color:var(--ref-sub)}
.resource-item{font:400 13px var(--font-title);color:var(--ref-text)}
.resource-item small{font-size:10px;color:var(--ref-sub)}
.brand b{font-family:var(--font-title);font-weight:400;color:var(--ref-text)}
#panel-content,.panel-intro{font-size:13px;line-height:1.75;color:var(--ref-text)}
.panel-note,.empty-message{font-size:11px;color:var(--ref-sub)}
.stock-card b,.shop-card b,.recipe-card b,.skill-card b{font:400 13px var(--font-title);color:var(--ref-text)}
.stock-card small,.shop-card small,.recipe-card small,.skill-card small,.stock-price{font-size:11px;color:var(--ref-sub)}
.feed-line{font-size:11px;color:var(--ref-text);background:#1c1026e6;border-color:#c9a06755}
.bottom-help{font-size:10px;color:var(--ref-sub)}
.toast{font:400 13px var(--font-title);color:var(--ref-text);background:var(--ref-plaque);border-color:var(--ref-gold)}
/* NPC dialogue: like the raven herbalist box */
.dialogue-layout .npc-dialogue-card p{font:400 15px/1.9 var(--font-title);color:var(--ref-text)}
.dialogue-layout .npc-dialogue-actions button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border-radius:21px;border:1px solid #c9a06799;background:linear-gradient(180deg,#3a2348,#24152f);font:400 14px var(--font-title);letter-spacing:.06em;color:var(--ref-text);box-shadow:inset 0 1px 0 #ffffff14,0 3px 8px #0a041299}
.dialogue-layout .npc-dialogue-actions button:first-child,.dialogue-layout .npc-dialogue-actions button:hover{border-color:#e8bf86;background:linear-gradient(180deg,#5b347a,#3a1f52);box-shadow:0 0 12px #b278e066,inset 0 1px 0 #ffffff22}
.primary-button,.secondary-button{font-family:var(--font-title);font-weight:400;color:var(--ref-text)}
.secondary-button{border-radius:18px;border:1px solid #c9a06788;background:linear-gradient(180deg,#3a2348,#24152f)}
.tool-rail button b{font-size:12px;color:var(--ref-text)}
.minimap-title{font:400 12px var(--font-title);color:var(--ref-text)}
@media (max-width:850px){
 .dialogue-layout .npc-dialogue-card p{font-size:13px}
 .dialogue-layout .npc-dialogue-card h3{font-size:13px}
 .dialogue-layout .npc-dialogue-actions button{font-size:12px;min-height:36px}
 .quest-card p{font-size:11px}
 .tool-rail button b{font-size:10.5px}
}

/* ===== v0.6.2 HUD layout as the reference image ===== */
/* top-left profile */
.brand{display:none}
.player-status{background:none;border:0;box-shadow:none;padding:0;gap:6px;min-width:0}
.profile-frame{position:relative;width:84px;height:84px;flex:none;display:block}
.profile-frame .profile-art{position:absolute;left:13%;top:13%;width:74%;height:74%;border:0;box-shadow:none;background:radial-gradient(#6b4a86,#2a1a38)}
.profile-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 3px 6px #0a0412cc)}
.profile-copy{gap:4px;min-width:150px}
.profile-copy strong{font-size:16px}
.profile-copy small,#profile-hp-text{display:none}
.profile-health{position:relative;height:15px;width:150px;border:1px solid #c9a067;border-radius:3px;background:#2a0f1c;box-shadow:inset 0 2px 4px #000c,0 2px 4px #0a0412aa}
.profile-health i{background:linear-gradient(180deg,#ff6f7f,#c32a45 55%,#8e1730);border-radius:2px}
.profile-health em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 11px var(--font-title);font-style:normal;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000}
/* top-right resources as pills + round buttons */
.resource-bar{background:none;border:0;box-shadow:none;padding:0;gap:6px}
.resource-item{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px 0 4px;border:1px solid #c9a067;border-radius:16px;background:linear-gradient(180deg,#2c1a38ee,#170d20f2);box-shadow:inset 0 0 0 2px #120818,0 3px 8px #0a0412aa}
.resource-item .resource-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(#4b2f5c,#1e1128);font-size:15px}
.resource-item small{display:none}
.top-actions .round-button{width:40px;height:40px;font-size:19px;border:2px solid #c9a067;background:radial-gradient(circle at 50% 35%,#4a2d5c,#1d1027);color:#f3e2c4;box-shadow:0 3px 8px #0a0412cc,inset 0 0 0 2px #140a1c}
/* hide the old place card text; keep only the travel switch at bottom-left */
.place-card{top:auto;left:18px;bottom:44px;max-width:none;border:0;padding:0;z-index:6}
.place-card>h1,.place-card>p,.place-card .place-status,.place-card .equipped-summary,.place-card .eyebrow{display:none}
.travel-switch{margin:0;border:1px solid #c9a067;border-radius:20px;background:linear-gradient(180deg,#2c1a38f0,#170d20f4);box-shadow:0 4px 12px #0a0412cc;overflow:hidden}
.travel-switch button{padding:8px 14px;font-size:13px}
/* left quest tracker */
.quest-card{top:106px;left:14px;width:250px;max-height:none;padding:0;background:none;border:0;box-shadow:none;overflow:visible}
.quest-heading{padding:6px 10px;font-size:14px;gap:6px}
.quest-heading .sun-icon{color:#e9c27f;font-size:16px}
.quest-heading::before{content:none}
.quest-heading>span:nth-child(2){flex:1}
.quest-heading b{color:#ffd994}
#quest-hide{background:none;border:0;color:#e9c27f;font-size:16px;padding:0 2px}
#quest-body{margin-top:6px;padding:8px 10px 6px;border-radius:6px;background:linear-gradient(90deg,#140a1cd0,#140a1c80 70%,transparent)}
.quest-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.quest-list li{display:flex;align-items:center;gap:8px;font:400 13px var(--font-title);color:var(--ref-text)}
.quest-list li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quest-list li b{font-weight:400;color:var(--ref-sub);flex:none}
.quest-check{width:13px;height:13px;flex:none;border:1px solid #d8c6b4;border-radius:2px;background:#170d20;box-shadow:inset 0 1px 2px #000}
.quest-list li.done .quest-check{background:#c9a067 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.3 2.3L9.8 3.5' fill='none' stroke='%231a0e22' stroke-width='2'/%3E%3C/svg%3E") center/100%;border-color:#f0c784}
.quest-list li.done b{color:#ffd994}
.quest-list li.empty{color:var(--ref-sub)}
#open-quests{display:block;margin-top:8px;font-size:12px}
/* circular minimap with gothic ring */
.city-minimap{width:150px;height:150px;top:62px;right:16px;border:0;border-radius:50%;background:none;box-shadow:none;overflow:visible}
.minimap-disc{position:absolute;inset:11%;border-radius:50%;overflow:hidden;background:#2a2234;box-shadow:inset 0 0 18px #000c}
.minimap-svg{width:100%;height:100%;display:block}
.minimap-svg .minimap-shop{pointer-events:none}
.minimap-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 4px 8px #0a0412cc)}
.city-minimap .minimap-player{left:50%;top:50%;width:0;height:0;border:0;border-radius:0;background:none;box-shadow:none;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:12px solid #fff6d8;filter:drop-shadow(0 0 4px #e9a8ff);transform:translate(-50%,-60%)}
.minimap-orbit,.minimap-road,.minimap-plaza,.minimap-north{display:none}
.minimap-title{bottom:-16px}
.camera-tools{top:228px;bottom:auto;right:30px;flex-direction:row}
/* NPC dialogue like the raven herbalist box */
.side-panel.dialogue-layout{left:50%;transform:translateX(-46%);bottom:22px;width:min(660px,calc(100vw - 340px));max-height:none;overflow:visible;padding:16px 18px 14px 150px;border:1px solid #c9a067;border-radius:10px;background:linear-gradient(180deg,#2b1a37f4,#1a1023f7);box-shadow:0 14px 40px #0a0412dd,inset 0 0 0 3px #140a1c,inset 0 0 0 4px #c9a06755}
.dialogue-layout .panel-heading{position:static;border:0;padding:0;height:0}
.dialogue-layout .panel-heading>div,.dialogue-layout .panel-intro,.dialogue-layout #panel-content>.panel-note{display:none}
.dialogue-layout .close-button{position:absolute;right:-14px;top:-14px;width:38px;height:38px;border:0;border-radius:50%;background:url('./assets/ui/hud/close.webp') center/contain no-repeat;font-size:0;color:transparent;filter:drop-shadow(0 3px 6px #0a0412cc);z-index:3}
.dialogue-layout #panel-content{display:grid;grid-template-columns:minmax(0,1fr) 190px;column-gap:14px;max-height:min(46vh,380px);overflow-y:auto;overflow-x:visible}
.dialogue-layout .npc-dialogue-card{display:block;min-height:120px;padding:0;margin:0;background:none;border:0;box-shadow:none}
.dialogue-layout .npc-dialogue-portrait{position:absolute;left:-6px;bottom:0;width:160px;height:200px;min-height:0;border:0;background:none;overflow:visible;pointer-events:none}
.dialogue-layout .npc-dialogue-portrait img{width:160px;height:200px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 6px 10px #0a0412cc)}
.dialogue-layout .npc-dialogue-portrait .npc-dialogue-icon{position:absolute;bottom:20px;left:30px;font-size:70px;color:#e9c27f}
.npc-nameplate{position:absolute;left:140px;top:-17px;margin:0}
.dialogue-layout .npc-dialogue-card h3.npc-nameplate{font-size:15px;padding:5px 18px}
.npc-nameplate i{font-style:normal;color:#e9c27f;font-size:11px}
.dialogue-layout .npc-dialogue-copy{padding-top:14px}
.dialogue-layout .npc-dialogue-card p{margin:0 0 6px}
.dialogue-layout .npc-dialogue-card small{display:none}
.dialogue-layout .npc-dialogue-actions{gap:8px}
.dialogue-layout .npc-dialogue-actions button{position:relative;justify-content:flex-start;padding:0 14px 0 10px}
.option-icon{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;color:#f0d29a;font-size:18px}
.option-alert{position:absolute;right:-6px;top:-6px;width:18px;height:18px;border-radius:50%;background:#d6324d;color:#fff;font:400 12px/18px var(--font-title);font-style:normal;text-align:center;box-shadow:0 0 0 2px #2b1a37}
/* bottom-right rail closer to the reference: compact */
.tool-rail{bottom:12px;right:12px}
.bottom-help{display:none}
.game-shell[data-scene="city"] .chatless-feed{bottom:70px}
@media (max-width:1250px){
 .side-panel.dialogue-layout{transform:translateX(-50%);width:min(640px,calc(100vw - 32px));bottom:120px}
}
@media (max-width:850px){
 .profile-frame{width:66px;height:66px}
 .profile-health{width:120px;height:13px}
 .profile-copy{min-width:120px}
 .profile-copy strong{font-size:14px}
 .resource-item{height:26px;padding:0 9px 0 3px;font-size:12px}
 .resource-item .resource-icon{width:20px;height:20px;font-size:13px}
 .top-actions .round-button{width:32px;height:32px;font-size:16px}
 .quest-card{top:90px;left:8px;width:205px}
 .quest-list li{font-size:12px}
 .city-minimap{width:110px;height:110px;top:100px;right:8px}
 .camera-tools{top:226px;right:14px}
 .place-card{left:8px;bottom:112px}
 .travel-switch button{padding:7px 10px;font-size:12px}
 .side-panel.dialogue-layout{bottom:112px;width:calc(100vw - 16px);padding:14px 12px 12px 96px}
 .dialogue-layout #panel-content{grid-template-columns:minmax(0,1fr) 112px;max-height:42vh}
 .dialogue-layout .npc-dialogue-portrait{width:100px;height:130px;left:-4px}
 .dialogue-layout .npc-dialogue-portrait img{width:100px;height:130px}
 .npc-nameplate{left:88px}
 .dialogue-layout .npc-dialogue-card h3.npc-nameplate{font-size:13px;padding:4px 12px}
 .dialogue-layout .npc-dialogue-actions button{min-height:34px;padding:0 6px;font-size:11.5px;gap:4px}
 .option-icon{width:16px;height:16px;font-size:14px}
 .dialogue-layout .close-button{width:32px;height:32px;right:-6px;top:-16px}
}
@media (max-width:520px){
 .resource-bar{position:absolute;top:96px;right:auto;left:8px;max-width:none;background:none;gap:4px}
 .resource-item:nth-child(n+3){display:none}
 .quest-card{top:128px;width:200px}
 .city-minimap{top:58px;right:6px;width:104px;height:104px}
 .camera-tools{top:178px;right:12px}
 .dialogue-layout #panel-content{grid-template-columns:1fr;row-gap:8px}
 .dialogue-layout .npc-dialogue-actions{grid-column:1;grid-row:2;flex-direction:row;flex-wrap:wrap}
 .dialogue-layout .npc-dialogue-actions button{flex:1 1 30%;justify-content:center}
}
/* face-only portrait like the reference */
.profile-frame .profile-art{border-radius:50%;object-fit:cover;object-position:50% 50%}
/* bottom buttons: no frame bar, floating medallions with outlined labels (reference bottom-right) */
.tool-rail{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none;padding:0;gap:2px}
.tool-rail button,.tool-rail button:hover,.tool-rail button.active{background:none}
.tool-rail .rail-icon{width:58px;height:58px}
.tool-rail button b{margin-top:-4px;font:400 13px var(--font-title);letter-spacing:.04em;color:#fff;-webkit-text-stroke:3px #1a0c22;paint-order:stroke fill;text-shadow:0 2px 3px #000}
@media (max-width:850px){.tool-rail .rail-icon{width:48px;height:48px}.tool-rail button b{font-size:11px;-webkit-text-stroke:2.5px #1a0c22}}
@media (max-width:520px){.tool-rail{background:linear-gradient(transparent,#0e0616cc 40%)!important;padding:6px 4px 0}}
/* keep the dialogue clear of the icon bar on narrower desktops */
@media (max-width:1499px){.game-shell:has(.side-panel.dialogue-layout:not(.hidden)) .tool-rail{display:none}.side-panel.dialogue-layout{bottom:22px}}
@media (max-width:850px){.side-panel.dialogue-layout{bottom:16px}}
@media (max-width:520px){
 .resource-bar{transform:none;left:0}
 .dialogue-layout .npc-dialogue-actions button{white-space:nowrap;font-size:11px;padding:0 4px;min-height:34px}
 .dialogue-layout .npc-dialogue-actions .option-icon{display:none}
 .game-shell:has(.side-panel.dialogue-layout:not(.hidden)) .quest-card{display:none}
}

/* ===== v0.6.3 NPC dialogue, closer to the raven-herbalist reference ===== */
.side-panel.dialogue-layout{left:calc(50% - 30px);transform:translateX(-50%);bottom:24px;width:min(660px,calc(100vw - 32px));padding:22px 22px 18px 190px;border:28px solid transparent;border-image:url('./assets/ui/hud/dialog-frame.webp') 90 fill / 28px / 0 stretch;background:none;box-shadow:none;border-radius:0;filter:drop-shadow(0 12px 26px #07020dcc)}
.dialogue-layout #panel-content{max-height:min(44vh,360px);margin:-14px -10px -10px -170px;padding:14px 10px 10px 170px;grid-template-columns:minmax(0,1fr) 182px;column-gap:18px}
.dialogue-layout .npc-dialogue-portrait{left:-40px;bottom:-30px;width:210px;height:260px}
.dialogue-layout .npc-dialogue-portrait img{width:210px;height:260px}
.npc-nameplate{left:150px;top:-44px}
.dialogue-layout .npc-dialogue-card h3.npc-nameplate{padding:6px 22px 6px 14px;font-size:16px;border-radius:4px;border-color:#b8925e;background:linear-gradient(180deg,#2a1934,#1a0f22);box-shadow:inset 0 0 0 2px #120818,inset 0 0 0 3px #b8925e55,0 4px 10px #07020daa}
.npc-nameplate i{font-size:13px;margin-right:4px}
.dialogue-layout .npc-dialogue-copy{padding-top:10px}
.dialogue-layout .npc-dialogue-card p{font:400 15.5px/2 var(--font-title);color:#fbf5ec;white-space:pre-line}
.dialogue-layout .npc-dialogue-actions{gap:9px;align-self:center}
.dialogue-layout .npc-dialogue-actions button{min-height:40px;border-radius:9px;border:1px solid #7d6188;background:linear-gradient(180deg,#2c1b38,#1d1127);box-shadow:inset 0 1px 0 #ffffff10,0 2px 6px #07020d99;font:400 14.5px var(--font-title);letter-spacing:.05em;color:#fbf5ec;padding:0 12px;gap:10px}
.dialogue-layout .npc-dialogue-actions button:first-child{border-color:#7d6188;background:linear-gradient(180deg,#2c1b38,#1d1127);box-shadow:inset 0 1px 0 #ffffff10,0 2px 6px #07020d99}
.dialogue-layout .npc-dialogue-actions button.current,.dialogue-layout .npc-dialogue-actions button:hover{border-color:#d7b0f0;background:linear-gradient(180deg,#5a347a,#3a1f55);box-shadow:0 0 14px #b67de899,inset 0 0 10px #d9a8ff44}
.option-icon{width:24px;height:24px;font-size:20px;color:#f1e1c4}
.option-icon .svg-icon{width:100%;height:100%}
.option-alert{top:50%;right:-9px;transform:translateY(-50%);width:20px;height:20px;line-height:20px;font-size:13px;background:radial-gradient(circle at 40% 35%,#ff5a6e,#c2132f);box-shadow:0 0 0 2px #f6e3c6,0 2px 4px #000a}
.dialogue-layout .close-button{right:-40px;top:-40px;width:42px;height:42px}
@media (max-width:1250px){.side-panel.dialogue-layout{left:50%;transform:translateX(-50%)}}
@media (max-width:850px){
 .side-panel.dialogue-layout{bottom:14px;width:calc(100vw - 12px);padding:14px 10px 12px 104px;border-width:20px;border-image-width:20px}
 .dialogue-layout #panel-content{margin:-8px -4px -6px -92px;padding:8px 4px 6px 92px;grid-template-columns:minmax(0,1fr) 120px;column-gap:8px}
 .dialogue-layout .npc-dialogue-portrait{left:-26px;bottom:-22px;width:124px;height:160px}
 .dialogue-layout .npc-dialogue-portrait img{width:124px;height:160px}
 .npc-nameplate{left:82px;top:-34px}
 .dialogue-layout .npc-dialogue-card h3.npc-nameplate{font-size:13px;padding:4px 12px 4px 8px}
 .dialogue-layout .npc-dialogue-card p{font-size:13px;line-height:1.8}
 .dialogue-layout .npc-dialogue-actions button{min-height:34px;font-size:12px;padding:0 6px;gap:5px}
 .option-icon{width:18px;height:18px}
 .dialogue-layout .close-button{right:-26px;top:-30px;width:34px;height:34px}
}
@media (max-width:520px){
 .dialogue-layout #panel-content{grid-template-columns:1fr}
 .dialogue-layout .npc-dialogue-card{min-height:96px}
 .dialogue-layout .npc-dialogue-actions .option-icon{display:inline-flex;width:15px;height:15px}
 .dialogue-layout .npc-dialogue-actions button{font-size:11.5px;padding:0 4px;gap:3px;justify-content:center}
}
.side-panel.dialogue-layout{border-image:url('./assets/ui/hud/dialog-frame.webp') 64 140 fill / 28px 61px / 0 stretch}
@media (max-width:850px){.side-panel.dialogue-layout{border-image-width:20px 44px}}
@media (min-width:851px){
 .dialogue-layout .npc-dialogue-portrait{left:-46px;bottom:-34px;width:230px;height:300px}
 .dialogue-layout .npc-dialogue-portrait img{width:230px;height:300px}
 .side-panel.dialogue-layout{padding-left:200px}
 .dialogue-layout .npc-dialogue-card{min-height:150px}
}
/* portrait & nameplate positioned against the panel, so the scrolling content never clips them */
.dialogue-layout #panel-content,.dialogue-layout .npc-dialogue-card,.dialogue-layout .npc-dialogue-copy{position:static}
.dialogue-layout .npc-dialogue-portrait{z-index:2}
.npc-nameplate{left:176px;top:-44px;z-index:2}
@media (max-width:850px){.npc-nameplate{left:86px;top:-34px}}
@media (min-width:851px){
 .dialogue-layout .npc-dialogue-portrait{left:-64px;bottom:-34px;width:270px;height:310px}
 .dialogue-layout .npc-dialogue-portrait img{width:auto;max-width:none;height:310px;object-fit:contain}
}
@media (max-width:850px){
 .dialogue-layout .npc-dialogue-portrait{left:-30px;bottom:-24px;width:150px;height:180px}
 .dialogue-layout .npc-dialogue-portrait img{width:auto;max-width:none;height:180px;object-fit:contain}
}
/* portrait sits inside the box like the reference: bust only, cut at the box bottom, head rising above the top edge */
@media (min-width:851px){
 .dialogue-layout .npc-dialogue-portrait{left:-6px;bottom:-4px;width:220px;height:300px;clip-path:inset(-300px -40px 0 -40px)}
 .dialogue-layout .npc-dialogue-portrait img{height:400px;position:absolute;left:50%;top:0;transform:translateX(-50%)}
}
@media (max-width:850px){
 .dialogue-layout .npc-dialogue-portrait{left:-4px;bottom:-2px;width:118px;height:170px;clip-path:inset(-200px -30px 0 -30px)}
 .dialogue-layout .npc-dialogue-portrait img{height:230px;position:absolute;left:50%;top:0;transform:translateX(-50%)}
}
@media (min-width:851px){
 .side-panel.dialogue-layout{width:min(720px,calc(100vw - 32px));padding-left:250px}
 .dialogue-layout #panel-content{margin-left:-220px;padding-left:220px}
 .dialogue-layout .npc-dialogue-copy{padding-left:0}
 .npc-nameplate{left:222px}
}
/* frame v2: richer gold frame with rose/bat corners and amethyst edge gems */
.side-panel.dialogue-layout{border-image:url('./assets/ui/hud/dialog-frame.webp') 150 200 fill / 54px 72px / 0 stretch}
.npc-nameplate{top:-50px}
@media (max-width:850px){.side-panel.dialogue-layout{border-image-width:36px 48px}.npc-nameplate{top:-40px}}
@media (max-width:850px){
 .side-panel.dialogue-layout{padding-left:122px}
 .dialogue-layout #panel-content{margin-left:-108px;padding-left:108px}
 .dialogue-layout .npc-dialogue-portrait{width:120px;clip-path:inset(-200px 0 0 -40px)}
 .npc-nameplate{left:96px}
}
/* v0.6.4 wider, lower dialogue box (reference proportions ~4:1) */
@media (min-width:851px){
 .side-panel.dialogue-layout{left:50%;transform:translateX(-50%);width:min(940px,calc(100vw - 48px));padding:14px 26px 10px 250px;bottom:18px}
 .dialogue-layout #panel-content{grid-template-columns:minmax(0,1fr) 210px;column-gap:28px;max-height:min(40vh,320px)}
 .dialogue-layout .npc-dialogue-card{min-height:128px}
 .dialogue-layout .npc-dialogue-copy{padding-top:16px}
 .dialogue-layout .npc-dialogue-card p{font-size:16.5px;line-height:2}
 .dialogue-layout .npc-dialogue-actions{gap:8px;padding:6px 0}
 .dialogue-layout .npc-dialogue-actions button{min-height:38px}
 .dialogue-layout .npc-dialogue-portrait{height:250px;bottom:-4px}
 .dialogue-layout .npc-dialogue-portrait img{height:340px}
}
.game-shell:has(.side-panel.dialogue-layout:not(.hidden)) .place-card{display:none}
@media (min-width:851px){.dialogue-layout .npc-dialogue-portrait{height:270px}.dialogue-layout .npc-dialogue-portrait img{height:360px}}
/* v0.6.5 compact mobile dialogue: short box, big crow rising above it, one row of three options */
@media (max-width:520px){
 .side-panel.dialogue-layout{bottom:10px;width:calc(100vw - 10px);padding:10px 10px 8px 116px;border-width:18px;border-image-width:26px 36px}
 .dialogue-layout #panel-content{margin:-4px -4px -2px -104px;padding:4px 4px 2px 104px;grid-template-columns:1fr;row-gap:8px;max-height:46vh}
 .dialogue-layout .npc-dialogue-card{min-height:0}
 .dialogue-layout .npc-dialogue-copy{padding-top:6px}
 .dialogue-layout .npc-dialogue-card p{font-size:13.5px;line-height:1.75;margin:0}
 .dialogue-layout .npc-dialogue-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0}
 .dialogue-layout .npc-dialogue-actions button{flex:none;min-height:34px;padding:0 2px;gap:3px;font-size:11.5px;border-radius:8px;justify-content:center}
 .dialogue-layout .npc-dialogue-portrait{left:-14px;bottom:-6px;width:128px;height:190px;clip-path:inset(-220px 0 0 -40px)}
 .dialogue-layout .npc-dialogue-portrait img{height:250px}
 .npc-nameplate{left:104px;top:-34px}
 .dialogue-layout .npc-dialogue-card h3.npc-nameplate{font-size:13px;padding:3px 12px 3px 8px}
 .dialogue-layout .close-button{right:-14px;top:-26px;width:32px;height:32px}
}
@media (max-width:520px){
 .dialogue-layout .npc-dialogue-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
 .dialogue-layout .npc-dialogue-actions .option-icon{display:none}
 .dialogue-layout .npc-dialogue-actions button{font-size:11.5px;letter-spacing:0;white-space:nowrap;overflow:hidden}
 .side-panel.dialogue-layout{padding-left:126px}
 .dialogue-layout #panel-content{margin-left:-114px;padding-left:114px}
 .dialogue-layout .npc-dialogue-portrait{left:-18px;bottom:-6px;width:142px;height:215px}
 .dialogue-layout .npc-dialogue-portrait img{height:290px}
 .npc-nameplate{left:116px}
}

/* ---- UI：聊天框（遊戲系統 v0.9）排在左側委託清單下方，對齊參考圖版面 ---- */
.game-shell .left-stack{top:106px;left:14px;bottom:70px;width:250px;gap:8px}
.game-shell .left-stack>.quest-card{max-height:40%;overflow:auto}
.game-shell .chat-box{max-height:240px;font-family:var(--font-title)}
.game-shell .chat-title{font:400 13px var(--font-title);color:var(--ref-text)}
.game-shell:has(.side-panel.dialogue-layout:not(.hidden)) .chat-box{display:none}
@media (max-width:850px){.game-shell .left-stack{top:90px;left:8px;width:205px;bottom:120px}.game-shell .chat-box{max-height:180px}}
@media (max-width:520px){.game-shell .left-stack{top:142px;width:200px;bottom:110px}.game-shell .chat-box{min-height:0;max-height:150px}}
.item-img{width:100%;height:100%;max-width:2.2em;max-height:2.2em;object-fit:contain;filter:drop-shadow(0 2px 3px #07020dcc);vertical-align:middle}
.resource-icon .item-img{max-width:20px;max-height:20px}

/* ===== UI v0.6.6 animated loading scene ===== */
.loading-overlay.loading-scene{display:block;padding:0;background:#120a1c;overflow:hidden;z-index:30;transition:opacity .6s ease}
.loading-scene.ld-leaving{opacity:0;pointer-events:none}
.ld-sky{position:absolute;inset:0;overflow:hidden}
.ld-bg{position:absolute;inset:-4%;background:url('./assets/ui/loading/bg-portrait.webp') center 40%/cover no-repeat;animation:ld-drift 26s ease-in-out infinite alternate;will-change:transform}
.ld-moonglow{position:absolute;left:var(--moon-x,70%);top:var(--moon-y,14%);width:46vmin;height:46vmin;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#ff4a5f55 0%,#ff4a5f22 35%,transparent 68%);mix-blend-mode:screen;animation:ld-moon 5s ease-in-out infinite}
.ld-stars{position:absolute;inset:0 0 45% 0;background-image:radial-gradient(1.5px 1.5px at 8% 12%,#fff8,transparent),radial-gradient(1px 1px at 22% 30%,#fffa,transparent),radial-gradient(1.5px 1.5px at 41% 8%,#ffe9c799,transparent),radial-gradient(1px 1px at 58% 22%,#fff9,transparent),radial-gradient(1.5px 1.5px at 86% 34%,#e8c8ff99,transparent),radial-gradient(1px 1px at 33% 40%,#fff7,transparent),radial-gradient(1px 1px at 93% 9%,#fff8,transparent);animation:ld-twinkle 3.2s ease-in-out infinite alternate}
.ld-fog{position:absolute;left:-30%;right:-30%;height:26%;border-radius:50%;filter:blur(18px);pointer-events:none}
.ld-fog-a{bottom:22%;background:radial-gradient(ellipse at 30% 50%,#c39be62e,transparent 62%),radial-gradient(ellipse at 75% 55%,#e0c4f522,transparent 58%);animation:ld-fog 22s linear infinite alternate}
.ld-fog-b{bottom:8%;background:radial-gradient(ellipse at 60% 50%,#9b78c233,transparent 60%);animation:ld-fog 30s linear infinite alternate-reverse}
.ld-lanterns i{position:absolute;bottom:-40px;width:12px;height:16px;border-radius:40% 40% 30% 30%;background:radial-gradient(ellipse at 50% 60%,#fff2c8,#f2b25b 55%,#c7652d);box-shadow:0 0 12px 4px #f5b35c88,0 0 30px 8px #f39b4a33;animation:ld-rise linear infinite;opacity:0}
.ld-lanterns i:nth-child(1){left:12%;animation-duration:15s;animation-delay:0s;transform:scale(.8)}
.ld-lanterns i:nth-child(2){left:27%;animation-duration:19s;animation-delay:-6s}
.ld-lanterns i:nth-child(3){left:44%;animation-duration:17s;animation-delay:-11s;transform:scale(.6)}
.ld-lanterns i:nth-child(4){left:63%;animation-duration:21s;animation-delay:-3s}
.ld-lanterns i:nth-child(5){left:78%;animation-duration:16s;animation-delay:-9s;transform:scale(.7)}
.ld-lanterns i:nth-child(6){left:90%;animation-duration:23s;animation-delay:-14s;transform:scale(.55)}
.ld-lanterns i:nth-child(7){left:5%;animation-duration:25s;animation-delay:-18s;transform:scale(.5)}
.ld-bats i{position:absolute;top:var(--bat-y,20%);left:-60px;width:34px;height:16px;background:#130a1a;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 32'%3E%3Cpath d='M34 12c-2-4-4-5-6-4 1 3 0 5-3 5-4 0-6-7-14-9C6 3 2 7 0 11c5-1 8 1 10 5 2-2 5-2 7 0 2-2 5-1 7 2 2-3 5-4 10-2 5-2 8-1 10 2 2-3 5-4 7-2 2-2 5-2 7 0 2-4 5-6 10-5-2-4-6-8-11-7-8 2-10 9-14 9-3 0-4-2-3-5-2-1-4 0-6 4Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 32'%3E%3Cpath d='M34 12c-2-4-4-5-6-4 1 3 0 5-3 5-4 0-6-7-14-9C6 3 2 7 0 11c5-1 8 1 10 5 2-2 5-2 7 0 2-2 5-1 7 2 2-3 5-4 10-2 5-2 8-1 10 2 2-3 5-4 7-2 2-2 5-2 7 0 2-4 5-6 10-5-2-4-6-8-11-7-8 2-10 9-14 9-3 0-4-2-3-5-2-1-4 0-6 4Z'/%3E%3C/svg%3E") center/contain no-repeat;animation:ld-bat 11s linear infinite,ld-flap .28s ease-in-out infinite alternate}
.ld-bats i:nth-child(1){--bat-y:16%}
.ld-bats i:nth-child(2){--bat-y:24%;animation-delay:-4s,-.1s;transform:scale(.7)}
.ld-bats i:nth-child(3){--bat-y:12%;animation-delay:-7.5s,-.2s;transform:scale(.55)}
.ld-heroes{position:absolute;left:var(--hero-x,50%);bottom:var(--hero-y,19%);width:var(--hero-w,min(46vw,300px));transform:translateX(-50%);animation:ld-walk-in 1.2s ease-out both}
.ld-heroes img{position:relative;display:block;width:100%;height:auto;animation:ld-bob .62s ease-in-out infinite alternate;transform-origin:50% 100%;filter:drop-shadow(0 6px 10px #07020daa)}
.ld-shadow{position:absolute;left:12%;right:12%;bottom:-2%;height:9%;border-radius:50%;background:radial-gradient(ellipse,#05020acc,transparent 70%);animation:ld-shadow .62s ease-in-out infinite alternate}
.ld-lamp{position:absolute;left:var(--lamp-x,22%);top:var(--lamp-y,50%);width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#d9f0ff99 0%,#a9d4ff44 22%,#9fb8ff14 45%,transparent 66%);mix-blend-mode:screen;animation:ld-flicker 1.9s steps(1,end) infinite,ld-bob .62s ease-in-out infinite alternate;pointer-events:none}
.ld-motes{position:absolute;inset:0;background-image:radial-gradient(2px 2px at 15% 80%,#ffd59acc,transparent),radial-gradient(1.5px 1.5px at 35% 70%,#e7b8ffcc,transparent),radial-gradient(2px 2px at 62% 86%,#ffd59abb,transparent),radial-gradient(1.5px 1.5px at 82% 74%,#e7b8ffcc,transparent),radial-gradient(1.5px 1.5px at 50% 62%,#f3c6ff99,transparent);animation:motes-rise 8s linear infinite}
.ld-front{position:absolute;left:0;right:0;bottom:0;padding:0 20px max(22px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px;background:linear-gradient(transparent,#0d0716cc 45%,#0b0613f2)}
.ld-front .loading-logo{width:min(64vw,280px);margin-bottom:2px;filter:drop-shadow(0 6px 16px #0b0414)}
.ld-bar{position:relative;width:min(80vw,420px);height:14px;border-radius:8px;border:1px solid #d6ad70;background:linear-gradient(#1a0e22,#241430);box-shadow:inset 0 2px 5px #000c,0 0 0 3px #1a0e22,0 0 0 4px #c9a06766,0 4px 14px #0a0412cc;overflow:visible}
.ld-bar::before,.ld-bar::after{content:"";position:absolute;top:50%;width:12px;height:12px;background:#e9c27f;transform:translateY(-50%) rotate(45deg);box-shadow:0 0 8px #f0c784}
.ld-bar::before{left:-12px}.ld-bar::after{right:-12px}
.ld-bar-fill{position:absolute;left:2px;top:2px;bottom:2px;width:0;max-width:calc(100% - 4px);border-radius:6px;background:linear-gradient(90deg,#6c35a0,#b874f0 70%,#f3d4ff);box-shadow:0 0 10px #c58bf0aa;transition:width .25s ease-out;overflow:hidden}
.ld-bar-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff66 50%,transparent 70%);background-size:200% 100%;animation:ld-shine 1.6s linear infinite}
.ld-status{margin:6px 0 0;font:400 15px var(--font-title);letter-spacing:.12em;color:#fbf5ec;text-shadow:0 2px 4px #000}
.ld-tip{margin:0;min-height:1.6em;max-width:min(88vw,520px);text-align:center;font:400 12px/1.6 var(--font-title);color:#d9c6e2;text-shadow:0 1px 3px #000;animation:ld-tip-in .5s ease}
.ld-stuck .ld-bar,.ld-stuck .ld-tip{display:none}
.ld-stuck .ld-status{font-size:14px;letter-spacing:.04em;max-width:88vw;text-align:center;line-height:1.8;white-space:normal}
@keyframes ld-drift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(-1.2%,-1%,0)}}
@keyframes ld-moon{50%{opacity:.6;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes ld-twinkle{to{opacity:.45}}
@keyframes ld-fog{to{transform:translateX(12%)}}
@keyframes ld-rise{0%{opacity:0;translate:0 0}8%{opacity:.95}85%{opacity:.8}100%{opacity:0;translate:30px -110vh}}
@keyframes ld-bat{0%{translate:0 0}25%{translate:30vw -3vh}50%{translate:60vw 2vh}75%{translate:90vw -4vh}100%{translate:calc(100vw + 120px) 0}}
@keyframes ld-flap{to{scale:1 .45}}
@keyframes ld-bob{from{transform:translateY(0) rotate(-.6deg)}to{transform:translateY(-3.5%) rotate(.6deg)}}
@keyframes ld-shadow{to{transform:scaleX(.9);opacity:.75}}
@keyframes ld-flicker{0%{opacity:1}12%{opacity:.82}20%{opacity:1}47%{opacity:.9}52%{opacity:1}78%{opacity:.86}83%{opacity:1}}
@keyframes ld-walk-in{from{opacity:0;translate:0 6%}}
@keyframes ld-shine{from{background-position:150% 0}to{background-position:-50% 0}}
@keyframes ld-tip-in{from{opacity:0;transform:translateY(4px)}}
@media (min-width:900px){
 .ld-bg{background-image:url('./assets/ui/loading/bg-wide.webp'),url('./assets/ui/loading/bg-portrait.webp')}
 .ld-heroes{--hero-w:min(24vw,330px)}
}
@media (prefers-reduced-motion:reduce){.ld-bg,.ld-moonglow,.ld-stars,.ld-fog,.ld-lanterns i,.ld-bats i,.ld-heroes,.ld-heroes img,.ld-shadow,.ld-lamp,.ld-motes,.ld-bar-fill::after{animation:none}.ld-lanterns,.ld-bats{display:none}}
.loading-scene{--moon-x:61%;--moon-y:9%;--hero-x:52%;--hero-y:20%;--hero-w:min(54vw,320px);--lamp-x:9%;--lamp-y:40%}
.ld-lamp{width:34%}
@media (min-width:900px){.loading-scene{--moon-x:78%;--moon-y:13%;--hero-x:47%;--hero-y:17%;--hero-w:min(21vw,300px)}}
.loading-scene{--moon-x:72%;--moon-y:8%;--hero-y:37%;--hero-w:min(46vw,270px)}
.ld-front .loading-logo{width:min(58vw,250px)}
@media (min-width:900px){.loading-scene{--moon-x:80%;--moon-y:12%;--hero-x:40%;--hero-y:31%;--hero-w:min(20vw,280px)}.ld-front .loading-logo{width:min(26vw,300px)}}
@media (max-height:700px){.loading-scene{--hero-y:40%}}

/* ===== UI v0.7：強化鍛爐／寶石坊面板、損壞標記、新手指引 ===== */
.side-panel.service-layout{left:auto;right:16px;top:70px;bottom:auto;transform:none;width:min(400px,calc(100vw - 24px));max-height:calc(100dvh - 90px);padding:0;border:0;background:none;box-shadow:none;overflow-y:auto;scrollbar-width:none}
.side-panel.service-layout .panel-heading{display:none}
.side-panel.service-layout .panel-intro{margin:0 0 6px;padding:8px 12px;border-radius:8px;background:#140a1ce6;border:1px solid #c9a06766;font:400 12.5px/1.6 var(--font-title);color:var(--ref-text)}
.svc-art{position:relative;width:min(100%,calc((100dvh - 210px)*.667));margin:0 auto;aspect-ratio:720/1080;background:url('./assets/ui/panel-enhance.webp') center/100% 100% no-repeat;filter:drop-shadow(0 12px 26px #07020dcc);font-family:var(--font-title);color:var(--ref-text)}
.svc-art.jeweler{aspect-ratio:720/1087;background-image:url('./assets/ui/panel-jeweler.webp')}
.svc-head{position:absolute;left:22%;right:22%;top:9.6%;height:6%;display:flex;align-items:center;justify-content:center;gap:6px}
.svc-art.jeweler .svc-head{top:8.6%;left:25%;right:25%}
.svc-head b{font-size:clamp(12px,3.6vw,15px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 3px #000}
.svc-arrow{width:24px;height:24px;flex:none;border-radius:50%;border:1px solid #c9a067;background:#2a1934;color:#f3d9a6;font:400 16px/20px serif}
.svc-arrow:disabled{opacity:.35}
.svc-slot{position:absolute;left:31%;right:31%;top:26%;height:24%;display:flex;align-items:center;justify-content:center}
.svc-art.jeweler .svc-slot{left:33%;right:34%;top:19.5%;height:21%}
.svc-item{width:62%;height:62%;display:flex;align-items:center;justify-content:center;font-size:clamp(40px,12vw,64px);color:#f0d29a;filter:drop-shadow(0 4px 8px #000)}
.svc-item .svg-icon,.svc-item .item-img{width:100%;height:100%;max-width:none;max-height:none}
.svc-plus{position:absolute;right:6%;top:4%;font:400 clamp(13px,3.8vw,18px) var(--font-title);font-style:normal;color:#ffd994;text-shadow:0 0 6px #ff9c3c,0 2px 2px #000}
.svc-equipped{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);font-size:10px;color:#e8d4b0;background:#140a1ccc;border-radius:8px;padding:1px 8px}
.svc-slot.broken .svc-item{filter:grayscale(.7) brightness(.6) drop-shadow(0 4px 8px #000)}
.badge-broken{position:absolute;right:-4px;bottom:-4px;width:26px;height:26px;filter:drop-shadow(0 2px 3px #000)}
.badge-broken.big{width:34%;height:auto;right:4%;bottom:4%}
.svc-fx{position:absolute;left:50%;top:50%;width:170%;transform:translate(-50%,-50%);pointer-events:none;animation:svc-fx 1.3s ease-out forwards}
.svc-fx.fail{width:150%;animation-name:svc-fx-fail}
@keyframes svc-fx{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
@keyframes svc-fx-fail{0%{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-6deg)}20%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(3deg)}35%{transform:translate(-48%,-50%) rotate(-3deg)}100%{opacity:0;transform:translate(-50%,-44%) scale(1.1)}}
.svc-info{position:absolute;left:11%;right:11%;top:56.5%;height:19%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.svc-title{margin:0;font:400 clamp(14px,4vw,17px) var(--font-title)}
.svc-title b{color:#ffd994}
.svc-line{margin:0;font:400 clamp(11px,3.2vw,13px)/1.6 var(--font-title);color:var(--ref-text)}
.svc-note{margin:0;font-size:11px;color:#d8c2b6}
.good{color:#9fe0a5}.warn{color:#ffd17a}.danger{color:#ff8f9a}
.svc-costs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.cost{display:inline-flex;align-items:center;gap:3px;font:400 13px var(--font-title);color:#fbf5ec}
.cost small{font-weight:400;font-size:10px;color:#cdb9c9}
.cost.short{color:#ff8f9a}
.cost-icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:16px;color:#f0cf8f}
.cost-icon .item-img{max-width:20px;max-height:20px}
.svc-button{position:absolute;left:21%;right:21%;top:83%;height:7.5%;border:0;background:none;font:400 clamp(14px,4.2vw,18px) var(--font-title);letter-spacing:.2em;color:#fff3dc;text-shadow:0 0 8px #ff9c3c,0 2px 3px #000;cursor:pointer}
.svc-art.jeweler .svc-button{top:84.3%;height:7.3%;text-shadow:0 0 8px #c47bff,0 2px 3px #000}
.svc-button:hover:not(:disabled){filter:brightness(1.25)}
.svc-button:disabled{color:#bba9b6;text-shadow:0 2px 3px #000;letter-spacing:.05em;font-size:clamp(11px,3.3vw,14px);cursor:default}
.svc-empty{position:absolute;left:12%;right:12%;top:58%;text-align:center;font:400 13px/1.8 var(--font-title)}
.svc-sockets{position:absolute;left:27.5%;right:27%;top:43.8%;height:12.6%;display:flex;justify-content:space-between}
.svc-sockets.s1{justify-content:center}
.svc-socket{width:44%;aspect-ratio:1;border-radius:50%;border:0;background:none;display:flex;align-items:center;justify-content:center;padding:14%}
.svc-socket .item-img{max-width:none;max-height:none;width:100%;height:100%}
.svc-socket.filled{cursor:pointer}
.svc-socket.filled:hover{filter:drop-shadow(0 0 8px #ff9aa8)}
.svc-sockets.s1 .svc-socket:nth-child(n+2),.svc-sockets.s0 .svc-socket{display:none}
.svc-grid{position:absolute;left:12.5%;right:12.8%;top:59.4%;height:22.2%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;column-gap:4.6%;row-gap:6%}
.svc-gem{position:relative;border:0;background:none;padding:12%;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:6px}
.svc-gem .item-img{max-width:none;max-height:none;width:100%;height:100%}
.svc-gem em{position:absolute;right:6%;bottom:2%;font:400 11px var(--font-title);font-style:normal;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000}
.svc-gem.picked{box-shadow:0 0 0 2px #ffd994,0 0 14px #d79cff;background:#ffffff14}
.svc-gem.empty{cursor:default}
.svc-arrow.page{position:absolute;top:68%}.svc-arrow.prev{left:3%}.svc-arrow.next{right:3%}
.svc-under{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:8px;padding:8px 12px;border-radius:8px;background:#140a1ce6;border:1px solid #c9a06755;text-align:center}
.svc-under:empty{display:none}
.svc-combine{font-size:12px;padding:6px 12px}
.svc-footer{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:6px}
.svc-footer .text-button{padding:4px 10px;background:#140a1ccc;border-radius:12px}
/* inventory */
.gear-card .gear-icon{position:relative}
.gear-card.broken .gear-icon{filter:grayscale(.6)}
.gear-plus{position:absolute;left:-2px;top:-4px;font:400 11px var(--font-title);font-style:normal;color:#ffd994;text-shadow:0 0 4px #ff9c3c,0 1px 2px #000}
/* tutorial card */
.tutorial-card{position:absolute;left:calc(50% - 90px);top:10px;transform:translateX(-50%);width:min(480px,calc(100vw - 700px));aspect-ratio:1100/274;min-height:110px;z-index:7;background:url('./assets/ui/tutorial-card.webp') center/100% 100% no-repeat;filter:drop-shadow(0 8px 16px #07020dcc);font-family:var(--font-title);color:var(--ref-text);animation:tut-in .5s ease}
.tut-body{position:absolute;left:28%;right:5%;top:12%;bottom:11%;display:flex;flex-direction:column;justify-content:center;gap:2px;overflow:hidden}
.tut-kicker{margin:0;font-size:10px;letter-spacing:.12em;color:#e9c27f}
.tutorial-card h3{margin:0;font:400 15px var(--font-title);color:#fff3dc}
.tut-hint{margin:0;font:400 11.5px/1.5 var(--font-title);color:#e6dad0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tut-row{display:flex;align-items:center;gap:8px;margin-top:2px}
.tut-progress{font:400 12px var(--font-title);color:#ffd994}
.tut-rewards{display:flex;gap:6px;flex:1;min-width:0;overflow:hidden}
.tut-reward{display:inline-flex;align-items:center;gap:2px;font-size:11px;color:#f2e6d6}
.tut-reward .svg-icon,.tut-reward .item-img{width:16px;height:16px;max-width:16px;max-height:16px;color:#f0cf8f}
.tut-claim{padding:4px 12px;border-radius:12px;border:1px solid #f0c98a;background:linear-gradient(180deg,#a865d6,#5a2a82);font:400 12px var(--font-title);color:#fff;box-shadow:0 0 10px #c47bffaa;animation:tut-pulse 1.4s ease-in-out infinite}
.tut-skip{position:absolute;right:2.2%;top:8%;min-width:22px;height:22px;padding:0 6px;border-radius:11px;border:1px solid #c9a06788;background:#1a0f22cc;color:#e6d4b8;font-size:11px}
.tut-focus{animation:tut-glow 1.4s ease-in-out infinite;z-index:8}
@keyframes tut-glow{0%,100%{box-shadow:0 0 0 2px #ffd99488,0 0 10px 2px #d79cff66;filter:brightness(1)}50%{box-shadow:0 0 0 3px #ffd994,0 0 22px 6px #d79cffaa;filter:brightness(1.25)}}
@keyframes tut-pulse{50%{filter:brightness(1.3)}}
@keyframes tut-in{from{opacity:0;transform:translate(-50%,-8px)}}
.game-shell:has(.side-panel:not(.hidden)) .tutorial-card{display:none}
@media (max-width:1100px){.tutorial-card{left:auto;right:8px;transform:none;top:auto;bottom:100px;width:min(480px,calc(100vw - 16px))}@keyframes tut-in{from{opacity:0}}}
@media (max-width:850px){.side-panel.service-layout{right:6px;left:6px;width:auto;top:60px;max-height:calc(100dvh - 70px)}.tutorial-card{bottom:96px;min-height:96px}.tutorial-card h3{font-size:13px}.tut-hint{font-size:10.5px}}
.side-panel.service-layout{backdrop-filter:none;-webkit-backdrop-filter:none}
.game-shell:has(.side-panel.service-layout:not(.hidden)) .tool-rail{display:none}
@media (max-width:850px){.game-shell:has(.side-panel.service-layout:not(.hidden)) .place-card,.game-shell:has(.side-panel.service-layout:not(.hidden)) .left-stack{display:none}}

/* ---- UI：讀取畫面影片（Grok 循環影片，播不了時沿用上面的 CSS 動畫） ---- */
.ld-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;pointer-events:none}
.ld-has-video .ld-video{opacity:1}
.ld-has-video .ld-sky>:not(.ld-video){display:none}
.ld-has-video .ld-front{background:linear-gradient(transparent,#0d0716b0 42%,#0b0613ee)}
.ld-has-video .ld-front .loading-logo{position:fixed;top:max(16px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(56vw,240px)}
@media (min-width:900px){.ld-has-video .ld-front .loading-logo{width:min(22vw,280px)}}
/* ---- UI：v1.2–v1.5 新畫面（裝備稀有度、裝備袋、料理、家園評分、圖鑑成就稱號、公會、通知、副本、血月） ---- */
.gear-card,.bag-card{--rc:#c8c3d4;position:relative}
.rarity-normal{--rc:#c8c3d4}.rarity-magic{--rc:#6f9cf0}.rarity-rare{--rc:#e8c25a}.rarity-legendary{--rc:#e8833a}
.gear-card .gear-icon,.bag-card .gear-icon{position:relative;background:radial-gradient(circle,color-mix(in srgb,var(--rc) 24%,transparent),transparent 70%)}.gear-card .gear-icon::after,.bag-card .gear-icon::after{content:'';position:absolute;inset:-6px;background:var(--rframe) center/100% 100% no-repeat;pointer-events:none}
.rarity-normal .gear-icon{--rframe:url('./assets/ui/frames/rarity-normal.webp')}.rarity-magic .gear-icon{--rframe:url('./assets/ui/frames/rarity-magic.webp')}.rarity-rare .gear-icon{--rframe:url('./assets/ui/frames/rarity-rare.webp')}.rarity-legendary .gear-icon{--rframe:url('./assets/ui/frames/rarity-legendary.webp')}
.gear-card.rarity-legendary,.bag-card.rarity-legendary{box-shadow:0 0 14px #e8833a55}
.affix-list{list-style:none;margin:4px 0;padding:0;display:flex;flex-direction:column;gap:1px;font:400 11.5px/1.5 var(--font-title);color:#cfe0ff}
.affix-list li::before{content:'✦ ';color:var(--rc,#c9a067)}
.affix-none{margin:2px 0;font-size:11px;color:#a998b4}
.bag-list{display:flex;flex-direction:column;gap:10px}
.bag-card{display:grid;grid-template-columns:64px 1fr;gap:6px 12px;padding:12px;border:1px solid color-mix(in srgb,var(--rc) 60%,transparent);border-radius:12px;background:linear-gradient(180deg,#2a1836e6,#1a0f22f0)}
.bag-card .gear-icon{width:64px;height:64px;display:grid;place-items:center}
.bag-card .gear-icon .item-img,.bag-card .gear-icon svg{width:44px;height:44px}
.bag-card h3{margin:0;font:400 14px var(--font-title)}
.bag-card small{color:#cdbcd8}
.bag-compare{margin-top:6px;padding:6px 8px;border-radius:8px;background:#0f0816aa;font-size:11.5px;color:#d9c9e3}
.bag-compare .affix-list{color:#b9a9c6}
.bag-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.bag-actions .secondary-button{flex:1 1 auto;min-height:34px;padding:4px 10px;font-size:12px}
.bag-sell{display:flex;gap:4px;flex:1 1 140px}
.bag-sell input{width:70px;min-width:0;flex:1;padding:4px 6px;border-radius:8px;border:1px solid #c9a06788;background:#140b1c;color:var(--ref-text);font:400 12px var(--font-title)}
.inventory-item.is-food{border-color:#c9a06799}
.food-effect{display:block;font-style:normal;font-size:10px;color:#f0cf8f;line-height:1.4}
.food-buff{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin-top:2px;padding:1px 8px 1px 3px;border-radius:12px;border:1px solid #c9a06788;background:#1b1024e0;font:400 11px var(--font-title);color:#f6e7cf;max-width:100%;white-space:nowrap}
.food-buff .item-img,.food-buff svg{width:20px;height:20px}
.food-buff b{color:#f0cf8f;font-weight:400}
.profile-title{font:400 11px var(--font-title);font-style:normal;color:#f0cf8f;letter-spacing:.04em}
.home-score{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:8px 12px;border:1px solid #c9a06788;border-radius:10px;background:var(--ref-plaque)}
.home-stars i{font-style:normal;font-size:20px;color:#4a3a55;text-shadow:0 1px 0 #0008}
.home-stars i.on{color:#f6cf6e;text-shadow:0 0 8px #f6cf6e99}
.home-score b{font:400 14px var(--font-title);color:#fff3dc}
.home-score small{color:#d9c9e3}
.cook-card.locked{opacity:.62}
.cook-buttons{display:flex;flex-direction:column;gap:4px}
.cook-buttons .secondary-button{min-height:30px;padding:2px 10px;font-size:12px;white-space:nowrap}
.tab-dot,.rail-dot{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#d2354a;color:#fff;font:400 10px/1 var(--font-title);font-style:normal;box-shadow:0 0 6px #d2354a}
.tool-rail button{position:relative}
.rail-dot{position:absolute;top:2px;right:10px}
.medal-list{display:flex;flex-direction:column;gap:8px}
.medal-card{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid #c9a06755;border-radius:10px;background:#1d1127d9}
.medal-card.ready{border-color:#f0cf8f;box-shadow:0 0 12px #f0cf8f44}
.medal-card.claimed{opacity:.7}
.medal{width:56px;height:56px;display:grid;place-items:center;background:url('./assets/ui/frames/medal.webp') center/contain no-repeat;font-size:18px;color:#ffe7a6;text-shadow:0 0 8px #ffd36a;filter:grayscale(.85) brightness(.75)}
.medal-card.ready .medal,.medal-card.claimed .medal{filter:none}
.medal-body h3{margin:0;font:400 13.5px var(--font-title);color:var(--ref-text)}
.medal-body p{margin:0;font-size:11.5px;color:#d9c9e3}
.medal-body small{font-size:10.5px;color:#cdbcd8}
.medal-body .quest-progress{margin:3px 0}
.codex-books{display:flex;gap:6px;margin-bottom:8px}
.codex-books button{flex:1;padding:6px 4px;border-radius:8px;border:1px solid #c9a06777;background:#22152d;color:var(--ref-text);font:400 12px var(--font-title)}
.codex-books button.active{background:linear-gradient(180deg,#6b3f8a,#3d2253);border-color:#f0cf8f}
.codex-books small{color:#f0cf8f}
.codex-page{padding:42px 30px 40px 34px;border-radius:10px;background:url('./assets/ui/frames/codex-page.webp') center/100% 100% no-repeat,#2a1a33}
.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px}
.codex-entry{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:8px;background:#120a1a88;text-align:center}
.codex-art{width:44px;height:44px;display:grid;place-items:center;font:400 20px var(--font-title);color:#6d5a7a}
.codex-art .item-img,.codex-art svg{width:40px;height:40px}
.codex-entry b{font:400 10.5px/1.3 var(--font-title);color:#8e7d9c}
.codex-entry.found b{color:#fbf1e2}
.codex-entry small{font-size:9.5px;color:#f0cf8f}
.milestone.claimed{opacity:.7}
.title-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.title-chip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:10px;border:1px solid #5b4868;background:#1a1022;color:#7c6a88;font:400 13px var(--font-title)}
.title-chip.unlocked{border-color:#c9a067;color:#fbeed4;background:linear-gradient(180deg,#352045,#1f1229)}
.title-chip.active{border-color:#f0cf8f;box-shadow:0 0 12px #f0cf8f55;color:#ffe9b8}
.title-chip small{font-size:10px;color:#f0cf8f}
.guild-head{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:center;margin-bottom:8px}
.guild-crest{width:84px;height:84px;display:grid;place-items:center;background:url('./assets/ui/frames/guild-crest.webp') center/contain no-repeat}
.guild-crest b{font:400 26px var(--font-title);color:#ffe7b0;text-shadow:0 2px 6px #000a}
.guild-head h3{margin:0;font:400 16px var(--font-title);color:#fff3dc}
.guild-perks{margin:4px 0 0;font-size:11.5px;color:#cfe0ff}
.guild-notice{padding:8px 10px;border-radius:8px;background:#140b1caa;font-size:12.5px;white-space:pre-wrap}
.guild-members{display:flex;flex-direction:column;gap:4px}
.guild-member{display:grid;grid-template-columns:18px 1fr auto auto;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:#1d1127c0}
.guild-member .dot{width:8px;height:8px;border-radius:50%;background:#5c4d66}
.guild-member.online .dot{background:#7be38c;box-shadow:0 0 6px #7be38c}
.guild-member .rank{font:400 12px var(--font-title);font-style:normal;color:#f0cf8f;text-align:center}
.guild-member b{font:400 12.5px var(--font-title);color:var(--ref-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guild-member small{font-size:11px;color:#cdbcd8}
.secondary-button.danger{border-color:#d2354a99;color:#ffc9cf}
.toggle-list{display:flex;flex-direction:column;gap:8px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;border:1px solid #c9a06766;background:#1d1127d9;color:var(--ref-text);text-align:left}
.toggle-row b{display:block;font:400 13.5px var(--font-title)}
.toggle-row small{font-size:11px;color:#cdbcd8}
.switch{flex:0 0 auto;position:relative;width:44px;height:24px;border-radius:12px;background:#3b2c46;box-shadow:inset 0 0 0 1px #c9a06766;transition:background .2s}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#d8c9e3;transition:transform .2s}
.toggle-row.on .switch{background:linear-gradient(90deg,#8a4fc0,#c27be0)}
.toggle-row.on .switch::after{transform:translateX(20px);background:#fff3dc}
.dungeon-card{display:grid;grid-template-columns:64px 1fr;gap:8px 12px;align-items:center;margin:12px 0;padding:12px;border:1px solid #c9a067aa;border-radius:12px;background:linear-gradient(135deg,#2c1838f2,#160c1ef5)}
.dungeon-key{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 0 8px #e8c25a66)}
.dungeon-card h3{margin:0;font:400 15px var(--font-title);color:#fff3dc}
.dungeon-card p{margin:2px 0;font-size:12px;color:#e6dad0}
.dungeon-card small{font-size:11px;color:#f0cf8f}
.dungeon-card .primary-button{grid-column:1/-1}
.dungeon-hud{position:absolute;top:74px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:10px;padding:6px 16px;border:1px solid #c9a067;border-radius:18px;background:var(--ref-plaque);box-shadow:0 6px 16px #0008;font:400 13px var(--font-title);color:var(--ref-text);white-space:nowrap;pointer-events:auto}
.dungeon-hud b{color:#f0cf8f}
.blood-moon-badge{position:absolute;top:72px;right:16px;z-index:6;padding:4px 12px;border-radius:14px;border:1px solid #e25a5a;background:linear-gradient(180deg,#5a1220e6,#2b0811ee);font:400 12px var(--font-title);color:#ffd6d6;box-shadow:0 0 14px #c0303c88;pointer-events:none}
/* 建築（使用者 18:37：血月上方遮罩過度、邊緣看得到框）：3D 場景本身已經有血月天空與光線，這層只留很淡的四角暗紅，並蓋滿整個畫面（fixed），不再有頂部紅光和整片紅色 */.game-shell.blood-moon::after{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 60%,#3a0610 140%);animation:blood-pulse 6s ease-in-out infinite}
@keyframes blood-pulse{50%{opacity:.7}}
.game-shell.blood-moon .minimap-ring{filter:hue-rotate(-40deg) saturate(1.4)}
@media (max-width:1100px){.blood-moon-badge{top:52px;right:auto;left:50%;transform:translateX(-50%);font-size:11px;padding:3px 10px}}
@media (max-width:850px){.dungeon-hud{top:58px;font-size:12px;padding:5px 12px}.medal-card{grid-template-columns:44px 1fr auto}.medal{width:44px;height:44px}}
.codex-mon{width:48px;height:48px;border-radius:8px;object-fit:cover;box-shadow:0 0 0 1px #c9a06766}
.codex-entry:not(.found) .codex-mon{filter:grayscale(1) brightness(.32) blur(1.5px);opacity:.8}
/* ---- UI：手機聊天（展開時不被新手指引蓋住；打字時聊天框佔滿鍵盤上方） ---- */
@media (max-width:850px),(orientation:landscape) and (max-height:500px){
  .game-shell:has(.chat-box:not(.collapsed)) .tutorial-card{display:none}
  .game-shell:has(.chat-input :focus) .tool-rail,.game-shell:has(.chat-input :focus) .place-card,.game-shell:has(.chat-input :focus) .left-stack>.quest-card,.game-shell:has(.chat-input :focus) .tutorial-card,.game-shell:has(.chat-input :focus) .city-minimap,.game-shell:has(.chat-input :focus) .travel-switch,.game-shell:has(.chat-input :focus) .resource-bar{display:none!important}
  .game-shell:has(.chat-input :focus) .left-stack{top:auto;bottom:8px;left:8px;right:8px;width:auto;z-index:20}
  .game-shell:has(.chat-input :focus) .chat-box{min-height:0;max-height:min(46dvh,320px);height:min(46dvh,320px)}
}
/* ---- UI：新手指引卡改九宮格拉伸，文字一定落在框內（框可長高，貓頭鷹不變形） ---- */
.tutorial-card{--cw:min(480px,calc(100vw - 700px));width:var(--cw);aspect-ratio:auto;min-height:calc(var(--cw)*274/1100);height:auto;box-sizing:border-box;background:none;border-style:solid;border-width:0;border-image:url('./assets/ui/tutorial-card.webp') 95 70 22 300 fill;border-image-width:calc(var(--cw)*95/1100) calc(var(--cw)*70/1100) calc(var(--cw)*22/1100) calc(var(--cw)*300/1100);padding:calc(var(--cw)*98/1100 + 4px) calc(var(--cw)*62/1100 + 6px) calc(var(--cw)*26/1100 + 7px) calc(var(--cw)*262/1100)}
.tut-body{position:static;display:flex;flex-direction:column;justify-content:center;gap:3px;overflow:visible}
.tutorial-card h3{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;line-height:1.25}
.tutorial-card h3 .tut-kicker{font:400 10.5px var(--font-title);letter-spacing:.08em;color:#e9c27f}
.tut-skip{top:2px;right:4px}
@media (max-width:1100px){.tutorial-card{--cw:min(480px,calc(100vw - 16px))}}
@media (max-width:850px){.tutorial-card{min-height:0}.tutorial-card h3{font-size:14px}.tut-hint{font-size:11px;line-height:1.45}}
.guild-notice-field .secondary-button{white-space:nowrap;flex:0 0 auto}
.chat-tabs{overflow-x:auto;scrollbar-width:none}.chat-tabs::-webkit-scrollbar{display:none}.chat-tabs button{flex:0 0 auto}
.tutorial-card{cursor:pointer}
.tut-go{margin-left:auto;padding:2px 10px;border-radius:10px;border:1px solid #c9a06799;background:#2a1838;font:400 11.5px var(--font-title);color:#f0cf8f;white-space:nowrap}
.tutorial-card:hover .tut-go{background:#4a2a62}
.tut-note{color:#ffb4b4}
.daily-task .tag{font-size:10px}
.immune-pop{position:absolute;left:50%;top:38%;z-index:9;transform:translate(-50%,0);padding:4px 14px;border-radius:14px;border:1px solid #9ec7e8;background:#1a2440dd;font:400 14px var(--font-title);color:#d6ecff;text-shadow:0 0 6px #6f9cf0;opacity:0;pointer-events:none}
.immune-pop.show{animation:immune-up 1.2s ease-out forwards}
@keyframes immune-up{0%{opacity:0;transform:translate(-50%,8px) scale(.9)}15%{opacity:1;transform:translate(-50%,0) scale(1.05)}100%{opacity:0;transform:translate(-50%,-24px)}}
/* ---- UI：v1.6 ---- */
.forge-extra{margin-top:10px;padding:10px;border:1px solid #c9a06766;border-radius:12px;background:linear-gradient(180deg,#2a1836e6,#1a0f22f0)}
.forge-now{margin:0 0 4px;font:400 13px var(--font-title)}
.forge-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #c9a06733}
.forge-row>div{flex:1;min-width:0}
.forge-row h4{margin:0;font:400 13.5px var(--font-title);color:#fff3dc}
.forge-row small{font-size:11px;color:#cdbcd8}
.forge-row .svc-costs{margin-top:4px;justify-content:flex-start}
.home-daily{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:-4px 0 10px;font:400 12.5px var(--font-title);color:#ffc2d6}
.home-daily .secondary-button{min-height:30px;padding:2px 12px;font-size:12px}
.friend-gift{margin:8px 0}
.friend-gift .primary-button{width:100%}
.dungeon-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.toggle-row.mini{padding:6px 10px;gap:8px}.toggle-row.mini b{font-size:12px}.toggle-row.mini small{font-size:10px}
.dungeon-card.hard{border-color:#e25a5a;background:linear-gradient(135deg,#3a1420f2,#1a0a12f5)}
.like-home{margin-right:6px}

/* ---- UI：全遊戲字體 jf open 粉圓（Huninn，只有一種粗細，不用假粗體） ---- */
body,button,input,select,textarea,dialog{font-family:var(--font-main);font-synthesis:none}
b,strong,h1,h2,h3,h4,h5,h6,th,legend{font-weight:400}
/* ---- UI：右上圓形按鈕換成 ChatGPT 畫的金框按鈕 ---- */
.top-actions .round-button{width:46px;height:46px;border:0;border-radius:50%;background:center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 3px 6px #0a0412cc);transition:transform .15s,filter .15s}
.top-actions .round-button>*{display:none}
.top-actions .round-button:hover{background-color:transparent;transform:scale(1.07);filter:drop-shadow(0 3px 6px #0a0412cc) brightness(1.12)}
.top-actions [data-icon="sparkle"]{background-image:url('./assets/ui/hud/btn-book.webp')}
.top-actions #sound-button{background-image:url('./assets/ui/hud/btn-sound.webp')}
.top-actions #settings-button{background-image:url('./assets/ui/hud/btn-settings.webp')}
.top-actions #help-button{background-image:url('./assets/ui/hud/btn-help.webp')}
@media (max-width:850px){.top-actions .round-button{width:38px;height:38px}}
/* ---- UI：資源欄換成 ChatGPT 畫的膠囊框與資源圖示 ---- */
.resource-item{position:relative;flex:0 0 auto;width:auto;min-width:0;height:32px;padding:0 13px 0 34px;border:0;border-radius:0;background:url('./assets/ui/hud/res-pill.webp') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 3px 5px #0a0412bb);justify-content:center;font-size:14px;color:#fff3dc;text-shadow:0 1px 2px #000}
.resource-item .resource-icon{position:absolute;left:1px;top:50%;transform:translateY(-50%);width:30px;height:30px;background:none;border-radius:0}
.resource-item .resource-icon img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px #000a)}
@media (max-width:850px){.resource-item{height:28px;padding:0 10px 0 29px;font-size:12px}.resource-item .resource-icon{width:26px;height:26px}}
/* ---- UI：安全區（瀏海、底部橫條、Telegram 全螢幕）——用邊框把整個遊戲畫面往內推 ---- */
:root{--safe-top:max(env(safe-area-inset-top,0px),var(--tg-safe-top,0px));--safe-bottom-raw:max(env(safe-area-inset-bottom,0px),var(--tg-safe-bottom,0px));--safe-left-raw:max(env(safe-area-inset-left,0px),var(--tg-safe-left,0px));--safe-right-raw:max(env(safe-area-inset-right,0px),var(--tg-safe-right,0px));--safe-left:var(--safe-left-raw);--safe-right:var(--safe-right-raw);--safe-bottom:min(var(--safe-bottom-raw),14px)}
/* 使用者 08:42：橫式全螢幕時介面擠在中間——瀏海只在一邊，另一邊只留一點點；底部橫條只讓 14px */
:root[data-notch="left"]{--safe-right:min(var(--safe-right-raw),10px)}
:root[data-notch="right"]{--safe-left:min(var(--safe-left-raw),10px)}
.game-shell{box-sizing:border-box;border-style:solid;border-color:#160f22;border-width:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
.download-badge{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--safe-top) + 4px);z-index:30;padding:3px 10px;border-radius:10px;border:1px solid #c9a06777;background:#160f22d9;font:400 11px var(--font-main);color:#e9d8c4;pointer-events:none}
/* ---- UI：手機健檢（第二波 U1）——觸控目標至少 44×44；橫式手機專用版面 ---- */
@media (pointer:coarse){
  .top-actions .round-button{width:44px;height:44px}
  .travel-switch button{min-height:44px}
  #panel-close,.side-panel>.close-button,.icon-button{min-width:44px;min-height:44px}
  .quest-tabs button,.codex-books button,.chat-tabs button{min-height:44px}
  .secondary-button,.primary-button,.text-button,.toggle-row,.title-chip,.bag-actions .secondary-button,.cook-buttons .secondary-button,.home-daily .secondary-button{min-height:44px}
  .quest-heading button,.chat-head button,.chat-title button,.zoom-controls button,.map-controls button,.tut-skip{min-width:44px;min-height:44px}
}
@media (orientation:landscape) and (max-height:500px){
  .game-shell{min-height:0}
  .tool-rail{left:auto;right:calc(8px + var(--safe-right));bottom:calc(6px + var(--safe-bottom));padding:2px 4px;gap:0;max-width:calc(100vw - 250px)}
  .tool-rail button{min-width:46px;padding:2px}
  .tool-rail .rail-icon{width:40px;height:40px}
  .tool-rail button b{display:none}
  .place-card{left:calc(8px + var(--safe-left));bottom:calc(8px + var(--safe-bottom))}
  .travel-switch button{padding:6px 10px;font-size:12px}
  .game-shell .left-stack{top:96px;left:calc(8px + var(--safe-left));bottom:62px;width:220px}
  .game-shell .left-stack>.quest-card{max-height:34%}
  .game-shell .chat-box{max-height:none;min-height:0}
  .side-panel{top:8px;bottom:8px;right:calc(8px + var(--safe-right));width:min(440px,58vw);max-width:none;z-index:25;padding:16px}
  .side-panel .panel-head,.side-panel .panel-title{margin-bottom:6px}
  .tutorial-card{--cw:min(420px,calc(100vw - 260px));top:auto;bottom:58px;left:auto;right:8px;transform:none}
  .city-minimap{width:92px;height:92px;top:62px}
  .chat-tabs button{min-height:30px}
}
/* ==== UI：全介面優化（使用者 06:21：該半透明就半透明、補精美素材）==== */
:root{--glass:rgba(24,12,34,.58);--glass-strong:rgba(22,11,32,.74);--glass-card:rgba(30,16,42,.5);--gold-line:rgba(214,170,105,.55);--gold-soft:rgba(214,170,105,.28)}
/* 主面板：ChatGPT 畫的金框（九宮格），內部半透明 */
.side-panel:not(.dialogue-layout):not(.service-layout){background:none;border-style:solid;border-width:0;border-color:transparent;border-radius:0;box-shadow:none;border-image:url('./assets/ui/frames/panel-frame.webp') 110 fill / 46px stretch;padding:34px 26px 28px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
@media (max-width:850px){.side-panel:not(.dialogue-layout):not(.service-layout){border-image-width:34px;padding:26px 16px 20px}}
/* 面板裡的卡片、清單：半透明玻璃 + 細金線 */
.recipe-card,.stock-card,.quest-entry,.gear-card,.inventory-item,.equipment-slot,.plot-card,.crop-option,.furniture-card,.shop-card,.skill-card,.work-card,.medal-card,.bag-card,.toggle-row,.dungeon-card,.guild-member,.codex-entry,.milestone,.home-score,.forge-extra,.panel-note,.combat-strip span,.party-card,.visit-card{background:var(--glass-card)!important;border:1px solid var(--gold-soft)!important;border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,230,190,.06)}
.recipe-card:hover,.stock-card:hover,.gear-card:hover,.inventory-item:hover,.furniture-card:hover,.shop-card:hover{border-color:var(--gold-line)!important;background:rgba(48,24,64,.55)!important}
.gear-card.equipped,.medal-card.ready,.plot-card.ready{border-color:#f0cf8f!important;box-shadow:0 0 12px rgba(240,207,143,.25)}
/* 分頁：金邊小牌 */
.quest-tabs{gap:6px}
.quest-tabs button,.codex-books button{font:400 12px var(--font-main);padding:6px 12px;border-radius:999px;border:1px solid var(--gold-soft);background:rgba(20,10,30,.5);color:#d9c6dc;transition:background .15s,color .15s,border-color .15s}
.quest-tabs button:hover,.codex-books button:hover{border-color:var(--gold-line);color:#fbefdc}
.quest-tabs button.active,.codex-books button.active{background:linear-gradient(180deg,#7a4796,#4a2763);border-color:#f0cf8f;color:#fff3dc;box-shadow:0 0 10px rgba(201,140,255,.35),inset 0 1px 0 rgba(255,255,255,.18)}
/* 按鈕：主要＝紫金寶石、次要＝半透明金框 */
.primary-button{border:1px solid #f0cf8f;border-radius:12px;background:linear-gradient(180deg,#8a54a8 0%,#5b2f78 55%,#43215a 100%);color:#fff6e4;box-shadow:0 3px 10px rgba(10,4,18,.6),inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.25);text-shadow:0 1px 2px #1a0826}
.primary-button:hover:not(:disabled){filter:brightness(1.12)}
.secondary-button{border:1px solid var(--gold-line);border-radius:10px;background:linear-gradient(180deg,rgba(64,34,84,.72),rgba(32,16,44,.78));color:#f6e6cf;box-shadow:0 2px 6px rgba(10,4,18,.5),inset 0 1px 0 rgba(255,230,190,.1)}
.secondary-button:hover:not(:disabled){border-color:#f0cf8f;background:linear-gradient(180deg,rgba(96,52,124,.8),rgba(44,22,60,.85))}
.primary-button:disabled,.secondary-button:disabled{filter:grayscale(.6) brightness(.75);opacity:.7}
.text-button{color:#f0cf8f}
.tag{border:1px solid var(--gold-soft);background:rgba(20,10,30,.55);color:#f0cf8f;border-radius:999px}
.tag.ready{background:linear-gradient(180deg,#7a4796,#4a2763);color:#fff3dc;border-color:#f0cf8f}
/* 左側任務與聊天：半透明玻璃 */
#quest-body{background:linear-gradient(90deg,rgba(20,10,30,.6),rgba(20,10,30,.35) 75%,transparent);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.game-shell .chat-box{background:var(--glass)!important;border:1px solid var(--gold-line)!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.game-shell .chat-box .chat-input input,.game-shell .chat-box select{background:rgba(14,7,22,.55);border:1px solid var(--gold-soft)}
.chat-tabs button{background:transparent;border-radius:8px}
.chat-tabs button.active{background:rgba(122,71,150,.55);color:#fff3dc}
/* 對話選項：每個都有畫好的圖示（手機也顯示） */
.option-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.option-icon .opt-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px #000a)}
.dialogue-layout .npc-dialogue-actions .option-icon{display:inline-flex}
@media (max-width:850px){.option-icon{width:24px;height:24px}}
/* 面板內動作按鈕前面也加小圖示 */
[data-action="buy"]::before,[data-action="sell"]::before,[data-action="gift"]::before,[data-action="claim-quest"]::before,[data-action="claim-task"]::before,[data-action="shop-go"]::before,[data-action="do-enhance"]::before,[data-action="do-socket"]::before,[data-action="friend-gift"]::before{content:'';display:inline-block;width:20px;height:20px;margin-right:6px;vertical-align:-5px;background:center/contain no-repeat;flex:none}
[data-action="buy"]::before{background-image:url('./assets/ui/options/opt-buy.webp')}
[data-action="sell"]::before{background-image:url('./assets/ui/options/opt-sell.webp')}
[data-action="gift"]::before,[data-action="friend-gift"]::before{background-image:url('./assets/ui/options/opt-gift.webp')}
[data-action="claim-quest"]::before,[data-action="claim-task"]::before{background-image:url('./assets/ui/options/opt-deliver.webp')}
[data-action="shop-go"]::before{background-image:url('./assets/ui/options/opt-go.webp')}
[data-action="do-enhance"]::before{background-image:url('./assets/ui/options/opt-enhance.webp')}
[data-action="do-socket"]::before{background-image:url('./assets/ui/options/opt-jeweler.webp')}
/* 標題牌：半透明金框 */
.section-title{background:linear-gradient(90deg,rgba(60,30,80,.7),rgba(30,14,42,.4));border:1px solid var(--gold-line);border-radius:8px}
.place-card .travel-switch{background:var(--glass-strong);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.tool-rail{background:linear-gradient(180deg,rgba(42,24,56,.62),rgba(26,15,37,.72))!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
/* 縮放、回到角色：金框圓鈕 */
#zoom-in,#zoom-out,#center-camera{width:44px;height:44px;border:0;border-radius:50%;background:center/contain no-repeat;box-shadow:none;color:transparent;font-size:0;filter:drop-shadow(0 2px 4px #0a0412cc)}
#zoom-in>*,#zoom-out>*,#center-camera>*{display:none}
#zoom-in{background-image:url('./assets/ui/hud/btn-zoom-in.webp')}#zoom-out{background-image:url('./assets/ui/hud/btn-zoom-out.webp')}#center-camera{background-image:url('./assets/ui/hud/btn-center.webp')}
#zoom-in:hover,#zoom-out:hover,#center-camera:hover{background-color:transparent;transform:scale(1.07)}
/* 家園／城鎮／冒險：金框圓鈕＋小字，半透明底座 */
.place-card .travel-switch{display:flex;gap:4px;padding:4px 8px;border-radius:18px;border:1px solid var(--gold-soft)}
.travel-switch button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px 4px!important;min-height:0;background:none!important;color:#eadbc8;font-size:11px!important;border:0}
.travel-switch button>i{display:none}
.travel-switch button::before{content:'';width:40px;height:40px;background:center/contain no-repeat;filter:drop-shadow(0 2px 3px #0a0412cc);transition:transform .15s,filter .15s}
#go-home::before{background-image:url('./assets/ui/hud/btn-home.webp')}#go-city::before{background-image:url('./assets/ui/hud/btn-city.webp')}#go-forest::before{background-image:url('./assets/ui/hud/btn-adventure.webp')}
.travel-switch button:hover::before{transform:scale(1.06)}
.travel-switch button.active,.travel-switch button[aria-pressed="true"]{color:#ffe1a0}
.travel-switch button.active::before,.travel-switch button[aria-pressed="true"]::before{filter:drop-shadow(0 0 8px #e3a8ff) drop-shadow(0 2px 3px #0a0412cc)}
@media (orientation:landscape) and (max-height:500px){.travel-switch button::before{width:34px;height:34px}.travel-switch button{font-size:0!important}}
.travel-switch button,.travel-switch button.active,.travel-switch button:focus{outline:none!important;box-shadow:none!important;border:0!important;background:none!important}
.shop-face{width:100%;height:100%;object-fit:cover;object-position:50% 12%;border-radius:50%;box-shadow:0 0 0 2px #c9a067aa}
.quest-heading .sun-icon{width:22px;height:22px;background:url('./assets/ui/options/opt-quest.webp') center/contain no-repeat}
.quest-heading .sun-icon>*{display:none}
/* 冒險動作鈕、生命：畫好的圖示取代符號 */
.action-glyph{width:34px;height:34px;background:center/contain no-repeat}
.action-glyph>*{display:none}
#attack-button .action-glyph{background-image:url('./assets/ui/hud/act-attack.webp')}
#gather-button .action-glyph{background-image:url('./assets/ui/hud/act-gather.webp')}
.health-pill [data-icon="heart"]{width:26px;height:26px;background:url('./assets/ui/hud/act-heart.webp') center/contain no-repeat}
.health-pill [data-icon="heart"]>*{display:none}
.skill-top{display:flex;align-items:center;gap:8px}
.skill-top>b{flex:1}
.skill-badge{width:40px;height:40px;flex:none;filter:drop-shadow(0 2px 3px #0a0412aa)}
#rotate-build .inline-icon{display:inline-block;width:20px;height:20px;background:url('./assets/ui/hud/btn-rotate.webp') center/contain no-repeat;vertical-align:-5px}
#rotate-build .inline-icon>*{display:none}
.crop-option{display:flex;align-items:center;gap:10px}
.crop-option>span:nth-child(2){flex:1}
.crop-art,.slot-art{width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center}
.crop-art .item-img,.slot-art .item-img{width:100%;height:100%;object-fit:contain}
.slot-art:empty{display:none}
.equipment-slot{display:flex;align-items:center;gap:10px}
.item-card .item-art{height:72px;display:flex;align-items:center;justify-content:center}
.item-card .item-art .item-img{max-height:72px;width:auto}
.plot-art .item-img{width:72px;height:72px}
/* ---- UI v1.8：自動導航 ---- */
.quest-list li[data-nav-kind]{min-height:44px;padding:0 6px;margin:0 -6px;border-radius:8px;cursor:pointer;transition:background .15s}
.quest-list li[data-nav-kind]:hover{background:rgba(122,71,150,.35)}
.quest-list li.nav-on{background:linear-gradient(90deg,rgba(240,207,143,.28),rgba(240,207,143,.06));box-shadow:inset 2px 0 0 #f0cf8f}
.nav-go{flex:none;font-style:normal;font-size:11px;color:#f0cf8f;opacity:.85}
.quest-list li.nav-on .nav-go{color:#ffe1a0;opacity:1}
.nav-banner{position:absolute;left:50%;top:calc(var(--safe-top,0px) + 12px);transform:translateX(-50%);z-index:9;display:flex;align-items:center;gap:8px;padding:4px 6px 4px 12px;border-radius:999px;border:1px solid #f0cf8f;background:rgba(30,16,42,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 4px 14px #0a0412aa;font:400 13px var(--font-main);color:#fff3dc;white-space:nowrap}
.nav-banner .nav-steps{width:18px;height:18px;background:url('./assets/ui/options/opt-go.webp') center/contain no-repeat}
.nav-banner button{width:32px;height:32px;border-radius:50%;border:1px solid var(--gold-line);background:rgba(20,10,30,.6);color:#f0cf8f;font-size:18px;line-height:1}
@media (pointer:coarse){.nav-banner button{width:44px;height:44px}}
@media (max-width:850px){.nav-banner{top:calc(var(--safe-top,0px) + 96px);font-size:12px}}
/* 地圖標示 */
.shop-map{border-radius:12px;box-shadow:0 0 0 1px var(--gold-line),0 6px 18px #0a0412aa;background:#2a1a30}
.map-pin{cursor:pointer;transition:transform .15s}
.map-pin:hover image{filter:brightness(1.15) drop-shadow(0 0 2px #ffd994)}
.shop-map text.map-pin-label{font:400 5.6px var(--font-main);fill:#fff3dc;stroke:#1a0b22;stroke-width:.9px;paint-order:stroke}
.shop-map text.map-district{font:400 6px var(--font-main);fill:#f3dfbf;fill-opacity:.85;stroke:#1a0b22;stroke-width:1px;paint-order:stroke}
.map-player{filter:drop-shadow(0 0 2px #ffd36a)}
/* 冒險畫面：半透明玻璃底、回家鈕用金框圖示 */
.adventure-hud>*{background:var(--glass-strong)!important;border:1px solid var(--gold-line)!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.adventure-hud [data-icon="home"]{display:inline-block;width:24px;height:24px;background:url('./assets/ui/hud/btn-home.webp') center/contain no-repeat;vertical-align:-6px}
.adventure-hud [data-icon="home"]>*{display:none}
.action-button.attack-button{background:linear-gradient(180deg,rgba(122,71,150,.75),rgba(60,30,80,.8))!important}
/* ==== UI：新手指引卡位置（使用者 07:34：移到右邊中間；手機另外排）==== */
@keyframes tut-in-r{from{opacity:0}}
@media (min-width:851px){
  .tutorial-card{--cw:min(420px,34vw);left:auto;right:calc(18px + var(--safe-right));top:max(300px,calc(50% - 70px));bottom:auto;transform:none;animation-name:tut-in-r}
}
@media (orientation:landscape) and (max-height:500px){.tutorial-card{top:auto;bottom:58px;animation-name:tut-in-r}}
/* ==== UI：L4 橫式為主：直式版面已移除（直式只顯示轉向提示）==== */
#world{position:fixed;inset:0}
/* ==== UI：L1 轉向提示（使用者 07:43：手機改成橫式為主，直式只顯示提示；遊戲在後面照常連線）==== */
.rotate-hint{display:none}
@media (orientation:portrait) and (max-width:1024px){
  .rotate-hint{display:flex;position:fixed;inset:0;z-index:2147483000;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;color:#f3e3cf;font-family:var(--font-main);background:linear-gradient(180deg,rgba(20,10,32,.72),rgba(14,6,22,.92)),url('./assets/ui/loading/bg-portrait.webp') center/cover no-repeat,#160f22}
  .rotate-hint h2{margin:18px 0 0;font:400 22px var(--font-main);letter-spacing:.12em;color:#f7e2b6;text-shadow:0 2px 10px #000}
  .rotate-hint p{margin:0;font-size:14px;color:#d9c6e4;letter-spacing:.06em}
  .rh-glow{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(240,200,130,.28),transparent 65%);top:calc(50% - 190px);pointer-events:none}
  .rh-phone{position:relative;width:62px;height:108px;border-radius:13px;border:3px solid #e2b874;box-shadow:0 0 0 2px #3a2048,0 0 22px rgba(240,200,130,.5);background:linear-gradient(160deg,#4a2b62,#1d1030);animation:rh-turn 2.6s ease-in-out infinite}
  .rh-screen{position:absolute;inset:8px 6px;border-radius:6px;background:url('./assets/ui/loading/poster-wide.webp') center/cover,#2b1840;opacity:.9}
  .rh-arrow{position:absolute;width:150px;height:150px;left:50%;top:50%;margin:-75px 0 0 -75px;border-radius:50%;border:2px dashed rgba(233,194,127,.55);border-left-color:transparent;border-bottom-color:transparent;animation:rh-arc 2.6s ease-in-out infinite}
  @keyframes rh-turn{0%,18%{transform:rotate(0)}45%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
  @keyframes rh-arc{0%,18%{opacity:0;transform:rotate(30deg)}35%{opacity:1}55%,100%{opacity:0;transform:rotate(-60deg)}}
  dialog[open]{visibility:hidden}
}
@media (prefers-reduced-motion:reduce){.rh-phone,.rh-arrow{animation:none}.rh-phone{transform:rotate(-90deg)}}
/* ==== UI：L4 橫式手機（844×390、932×430 實測）==== */
@media (orientation:landscape) and (max-height:500px){
  .game-shell .left-stack{top:calc(var(--safe-top) + 84px);bottom:calc(var(--safe-bottom) + 60px);width:min(220px,26vw);gap:5px}
  .game-shell .left-stack>.quest-card{max-height:none;flex-shrink:0}
  .game-shell .quest-heading{white-space:nowrap;padding:3px 8px;font-size:13px}
  .game-shell .quest-heading button{min-width:30px;min-height:30px}
  .game-shell #quest-body{margin-top:3px;padding:3px 8px 2px}
  .game-shell .quest-list{gap:1px;max-height:84px;overflow-y:auto;scrollbar-width:none}
  .game-shell .quest-list li,.game-shell .quest-list li[data-nav-kind]{min-height:27px;font-size:11.5px;line-height:1.25;padding:2px 4px;margin:0 -4px}
  .game-shell .quest-list .nav-go{font-size:0;padding:0 2px}
  .game-shell .quest-list .nav-go::after{content:'›';font-size:15px;color:#f0cf8f}
  .game-shell #open-quests{display:none}
  .game-shell .chat-box{min-height:0;max-height:none;flex:0 1 auto;display:flex;flex-direction:column;overflow:hidden}
  .game-shell .chat-box:not(.collapsed){flex:1 1 auto}
  .game-shell .chat-head{padding:1px 4px 1px 8px}
  .game-shell .chat-head button,.game-shell .chat-title button,.game-shell .chat-tabs button{min-width:30px;min-height:28px}
  .game-shell .chat-log{min-height:24px;font-size:11.5px}
  .game-shell .chat-input{flex-shrink:0;padding:3px}
  .game-shell .chat-input input,.game-shell .chat-input button,.game-shell .chat-input select{min-height:32px}
  .city-minimap{top:calc(var(--safe-top) + 70px)}
  .camera-tools{top:calc(var(--safe-top) + 74px);bottom:auto;right:calc(var(--safe-right) + 112px);flex-direction:row;gap:5px}
  .camera-tools .round-button{width:36px;height:36px;min-width:36px;min-height:36px}
  .tutorial-card{--cw:min(330px,38vw);right:calc(8px + var(--safe-right));bottom:calc(var(--safe-bottom) + 58px);top:auto}
  .tutorial-card h3{font-size:13px}.tut-hint{font-size:10.5px;line-height:1.4}
}
/* 橫式手機打字：聊天框貼在鍵盤上方（--kb 由 visualViewport 算出鍵盤高度） */
@media (orientation:landscape) and (max-height:500px){
  .game-shell:has(.chat-input :focus) .left-stack{top:auto;bottom:calc(var(--kb,0px) + 4px);left:calc(8px + var(--safe-left));right:auto;width:min(460px,60vw)}
  .game-shell:has(.chat-input :focus) .chat-box{height:min(220px,calc(var(--vvh,100dvh) - 12px));max-height:none}
}
/* ==== UI：使用者 08:11 實機回饋——物資框補上右端金框（九宮格，兩端不變形）；放大縮小鈕移到右側直排 ==== */
.resource-bar{gap:6px}
#resources .resource-item{--ph:32px;background:none;border-style:solid;border-width:0;border-image:url('./assets/ui/hud/res-pill-full.webp') 0 70 0 190 fill / 0 calc(var(--ph)*70/192) 0 calc(var(--ph)*190/192) stretch;height:var(--ph);box-sizing:border-box;padding:0 calc(var(--ph)*0.42) 0 calc(var(--ph)*1.06)}
@media (max-width:850px),(orientation:landscape) and (max-height:500px){#resources .resource-item{--ph:28px}}
@media (orientation:landscape) and (max-height:500px){
  .camera-tools{top:calc(var(--safe-top) + 74px);right:calc(var(--safe-right) + 10px);flex-direction:column;gap:6px}
  .game-shell:has(#city-minimap:not(.hidden)) .camera-tools{top:calc(var(--safe-top) + 168px);gap:4px}
  .game-shell:has(#city-minimap:not(.hidden)) .camera-tools .round-button{width:34px;height:34px;min-width:34px;min-height:34px}
}
/* 桌機（使用者 08:17）：放大／縮小／回到角色也改右側直排；城鎮時排在小地圖下方，新手指引卡往下讓位 */
@media (min-height:501px) and (min-width:851px){
  .camera-tools{top:calc(var(--safe-top) + 92px);bottom:auto;right:calc(var(--safe-right) + 22px);flex-direction:column;gap:8px}
  .game-shell:has(#city-minimap:not(.hidden)) .camera-tools{top:calc(var(--safe-top) + 236px)}
  .tutorial-card{top:max(420px,calc(50% - 40px))}
}
/* 全螢幕：暗角鋪滿整個螢幕，不在介面邊緣畫出一圈框；邊框改透明 */
.game-shell{border-color:transparent}
.screen-grain{position:fixed;inset:0}
/* 橫式手機：小地圖略小；有新手指引卡時，放大縮小改到小地圖左邊橫排，不跟指引卡疊 */
@media (orientation:landscape) and (max-height:500px){
  .city-minimap{width:84px;height:84px}
  .game-shell:has(#city-minimap:not(.hidden)) .camera-tools{top:calc(var(--safe-top) + 158px)}
  .game-shell:has(#tutorial-card:not(.hidden)) .camera-tools{top:calc(var(--safe-top) + 78px);right:calc(var(--safe-right) + 10px);flex-direction:row}
  .game-shell:has(#tutorial-card:not(.hidden)):has(#city-minimap:not(.hidden)) .camera-tools{right:calc(var(--safe-right) + 104px)}
}
/* 虛擬搖桿（使用者 08:42）：按住 3D 畫面拖曳時出現在手指下方 */
.joystick{position:fixed;z-index:9;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(40,20,58,.35) 55%,rgba(20,10,30,.55));box-shadow:0 0 0 2px rgba(214,170,105,.65),inset 0 0 18px rgba(240,200,130,.25),0 0 16px rgba(10,4,18,.6)}
.joystick::before{content:'';position:absolute;inset:14px;border-radius:50%;border:1px dashed rgba(233,194,127,.35)}
.joystick.hidden{display:none}
.joy-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;transform:translate(var(--kx,0),var(--ky,0));background:radial-gradient(circle at 38% 32%,#fff1cf,#e2b874 38%,#8a5a2b 78%);box-shadow:0 0 0 2px #3a2048,0 0 14px rgba(255,214,140,.7)}
/* 使用者 08:57：介面再往螢幕邊靠——安全區原本算了兩次（外框推一次、各元件又各自加一次），改成只由外框推一次 */
:root{--edge-top:var(--safe-top);--edge-right:var(--safe-right);--edge-bottom:var(--safe-bottom);--edge-left:var(--safe-left)}
.game-shell{border-width:var(--edge-top) var(--edge-right) var(--edge-bottom) var(--edge-left);--safe-top:0px;--safe-right:0px;--safe-bottom:0px;--safe-left:0px}
/* 橫式手機（含 852、932 寬的 iPhone）頭像列一律用小尺寸，任務框緊接在下面 */
@media (orientation:landscape) and (max-height:500px){
  .topbar{left:10px;right:10px;top:6px}
  .profile-frame{width:62px;height:62px}
  .profile-health{width:120px;height:13px}
  .profile-copy{min-width:120px}
  .profile-copy strong{font-size:14px}
  .top-actions .round-button{width:36px;height:36px}
  .game-shell .left-stack{top:74px}
  .city-minimap{top:56px}
  .camera-tools{top:58px}
  .game-shell:has(#city-minimap:not(.hidden)) .camera-tools{top:146px}
  .game-shell:has(#tutorial-card:not(.hidden)) .camera-tools{top:58px}
}
/* S1：設定頁音量條 */
.volume-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.volume-row{display:grid;grid-template-columns:1fr minmax(110px,46%) 42px;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:var(--glass-card);border:1px solid var(--gold-soft)}
.volume-row span{display:flex;flex-direction:column}.volume-row b{font-weight:400;color:#f3e3cf}.volume-row small{font-size:11px;color:#bfa9c8}
.volume-row output{font-size:12px;color:#f0cf8f;text-align:right}
.volume-row input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:pointer}
.volume-row input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#c9a067,#7a4796)}
.volume-row input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#c9a067,#7a4796)}
.volume-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff1cf,#e2b874 45%,#8a5a2b);box-shadow:0 0 0 2px #3a2048,0 0 8px rgba(255,214,140,.6)}
.volume-row input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff1cf,#e2b874 45%,#8a5a2b)}
@media (pointer:coarse){.volume-row input[type=range]{height:40px}}
/* 使用者 09:06：手機橫式點 NPC「沒反應」——其實是對話框照電腦版排，寬 1136px，關閉鈕和選項都跑到畫面外。橫式手機專用版面： */
@media (orientation:landscape) and (max-height:500px){
  .game-shell .side-panel.dialogue-layout{left:8px!important;right:8px!important;top:auto!important;bottom:6px!important;width:auto!important;max-width:none!important;height:auto!important;max-height:58%!important;transform:none!important;padding:16px 18px 12px 104px!important;border-image-width:22px 40px!important;overflow:visible!important;z-index:25}
  .game-shell .dialogue-layout #panel-content{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:10px;align-items:start;max-height:calc(58vh - 40px);overflow:visible}
  .game-shell .dialogue-layout #panel-content>*:not(.npc-dialogue-card):not(.npc-dialogue-actions){grid-column:1 / -1;max-height:30vh;overflow:auto}
  .game-shell .dialogue-layout .npc-dialogue-card{grid-column:1;grid-row:1;display:block;min-height:0;padding:0;margin:0}
  .game-shell .dialogue-layout .npc-dialogue-portrait{position:absolute!important;left:-6px!important;bottom:4px!important;top:auto!important;width:108px!important;height:150px!important;overflow:visible;pointer-events:none}
  .game-shell .dialogue-layout .npc-dialogue-portrait img{position:absolute;left:0;bottom:0;width:auto!important;height:168px!important;max-width:none}
  .game-shell .dialogue-layout .npc-dialogue-copy{padding:0;margin:0}
  .game-shell .dialogue-layout .npc-dialogue-copy p{font-size:13px;line-height:1.6;margin:4px 0 0}
  .game-shell .dialogue-layout .npc-nameplate{position:absolute!important;left:96px!important;top:-30px!important;font-size:14px}
  .game-shell .dialogue-layout .npc-dialogue-actions{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:5px;margin:0;padding-right:10px;max-height:calc(58vh - 40px);overflow-y:auto}
  .game-shell .dialogue-layout .npc-dialogue-actions button{width:100%;min-height:36px;padding:4px 10px;font-size:13px;justify-content:flex-start;white-space:nowrap}
  .game-shell .dialogue-layout #panel-close{position:absolute!important;right:-4px!important;top:-18px!important;left:auto!important;z-index:3}
}
@media (orientation:landscape) and (max-height:500px){
  .game-shell .side-panel.dialogue-layout{max-height:86%!important}
  .game-shell .dialogue-layout #panel-content{max-height:calc(86vh - 44px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
  .game-shell .dialogue-layout #panel-content>*:not(.npc-dialogue-card):not(.npc-dialogue-actions){max-height:none;overflow:visible}
  /* 打開「店主的委託」「購買」等分頁時：選項改成一排，下面接分頁內容，可以捲動 */
  .game-shell .dialogue-layout #panel-content:has(>:not(.npc-dialogue-card):not(.npc-dialogue-actions):not(.panel-note):not(:empty)){grid-template-columns:minmax(0,1fr)}
  .game-shell .dialogue-layout #panel-content:has(>:not(.npc-dialogue-card):not(.npc-dialogue-actions):not(.panel-note):not(:empty)) .npc-dialogue-actions{grid-column:1;grid-row:2;flex-direction:row;flex-wrap:wrap;max-height:none;overflow:visible}
  .game-shell .dialogue-layout #panel-content:has(>:not(.npc-dialogue-card):not(.npc-dialogue-actions):not(.panel-note):not(:empty)) .npc-dialogue-actions button{width:auto;flex:1 1 140px}
}
/* A6：旋轉與視角鈕（金框圓鈕，和放大縮小同一組）；鏡頭工具改成兩欄 */
#rotate-left,#rotate-right,#view-preset{width:44px;height:44px;border:0;border-radius:50%;background:center/contain no-repeat;box-shadow:none;color:transparent;font-size:0;filter:drop-shadow(0 2px 4px #0a0412cc)}
#rotate-left{background-image:url('./assets/ui/hud/btn-rotate-left.webp')}
#rotate-right{background-image:url('./assets/ui/hud/btn-rotate-right.webp')}
#view-preset{background-image:url('./assets/ui/hud/btn-view-default.webp')}
#view-preset[data-preset="high"]{background-image:url('./assets/ui/hud/btn-view-high.webp')}
#view-preset[data-preset="low"]{background-image:url('./assets/ui/hud/btn-view-low.webp')}
#view-preset.hidden{display:none}
#rotate-left:hover,#rotate-right:hover,#view-preset:hover{background-color:transparent;transform:scale(1.07)}
.camera-tools{display:grid!important;grid-template-columns:repeat(2,auto);grid-auto-flow:row;justify-content:end}
#zoom-in{order:1}#zoom-out{order:2}#rotate-left{order:3}#rotate-right{order:4}#center-camera{order:5}#view-preset{order:6}
@media (orientation:landscape) and (max-height:500px){
  .camera-tools{gap:4px!important}
  .camera-tools .round-button{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
  .game-shell:has(#tutorial-card:not(.hidden)) .camera-tools{grid-template-columns:repeat(6,auto)}
}
/* 小地圖：北方跟著鏡頭轉；其他玩家的點 */
#city-mini-map,.minimap-ring{transform-origin:50% 50%}
.mini-dot.near{fill:#9fd8ff;stroke:#123048;stroke-width:.35}
.mini-dot.far{fill:#d8c6f0;opacity:.6}
/* ?debug=perf／?debug=pick 量測面板 */
.debug-box{position:fixed;left:50%;transform:translateX(-50%);z-index:2147482000;padding:4px 10px;border-radius:8px;background:rgba(10,4,18,.82);border:1px solid #c9a06788;color:#ffe8b8;font:12px/1.4 ui-monospace,Menlo,monospace;pointer-events:none;white-space:nowrap}
.debug-box.perf{top:calc(var(--edge-top,0px) + 2px)}
.debug-box.pick{bottom:calc(var(--edge-bottom,0px) + 70px)}
/* 使用者 09:35：橫式手機打開「店主的委託」時，對話框頂到 Telegram 的返回鈕、每列太高。 */
@media (orientation:landscape) and (max-height:500px){
  .game-shell .side-panel.dialogue-layout{box-sizing:border-box!important;max-height:calc(100% - 44px)!important;padding-top:14px!important}
  .game-shell .dialogue-layout #panel-content{max-height:calc(100dvh - var(--edge-top,0px) - var(--edge-bottom,0px) - 84px)}
  .game-shell .dialogue-layout .npc-dialogue-copy p{margin:0}
  .game-shell .dialogue-layout .npc-dialogue-actions button{min-height:34px}
  .game-shell .dialogue-layout .section-title{margin:6px 0 4px;padding:3px 10px;font-size:13px}
  .game-shell .dialogue-layout .stock-card{display:flex;align-items:center;gap:10px;min-height:0;padding:6px 10px;margin:0 0 5px}
  .game-shell .dialogue-layout .stock-card h3{font-size:13px;margin:0 0 2px;line-height:1.3}
  .game-shell .dialogue-layout .stock-card small{font-size:11.5px;line-height:1.35;display:block}
  .game-shell .dialogue-layout .stock-card>div{flex:1;min-width:0}
  .game-shell .dialogue-layout .stock-card .secondary-button,.game-shell .dialogue-layout .stock-card .primary-button{min-height:32px;padding:2px 12px;flex:none}
  .game-shell .dialogue-layout .panel-note{display:none}
}
/* ==== UI 元件重新設計（使用者 09:49：要有質感、精緻，套用到全部介面）====
   ChatGPT 畫的元件素材（ui/kit/*）：金色哥德花框＋深紫玻璃，兩端花飾固定、中間拉伸（九宮格）。 */
:root{--kit-text:#fbeedd;--kit-sub:#d9c3e6}
/* 主要按鈕 */
.game-shell .primary-button,.welcome-copy .primary-button{border-style:solid!important;border-color:transparent!important;border-width:0;border-radius:0!important;background:none!important;box-shadow:none!important;
  border-image:url('./assets/ui/kit/btn-primary.webp') 40 104 40 104 fill / 11px 30px stretch !important;padding:8px 34px!important;min-height:40px;color:#fff6e6!important;text-shadow:0 1px 2px #2a0d36,0 0 8px rgba(214,140,255,.45);filter:drop-shadow(0 3px 5px rgba(10,4,18,.55));transition:filter .15s,transform .12s}
/* 次要按鈕（含 NPC 對話選項） */
.game-shell .secondary-button{border-style:solid!important;border-color:transparent!important;border-width:0;border-radius:0!important;background:none!important;box-shadow:none!important;
  border-image:url('./assets/ui/kit/btn-secondary.webp') 30 90 30 90 fill / 10px 28px stretch !important;padding:6px 30px!important;min-height:36px;color:var(--kit-text)!important;filter:drop-shadow(0 2px 4px rgba(10,4,18,.5));transition:filter .15s,transform .12s}
.game-shell .primary-button:hover:not(:disabled),.game-shell .secondary-button:hover:not(:disabled){filter:drop-shadow(0 0 6px rgba(240,200,130,.55)) brightness(1.08)}
.game-shell .primary-button:active:not(:disabled),.game-shell .secondary-button:active:not(:disabled){transform:scale(.97)}
.game-shell .primary-button:disabled,.game-shell .secondary-button:disabled{border-image-source:url('./assets/ui/kit/btn-disabled.webp')!important;border-image-slice:30 90 30 90 fill!important;color:#b9adbd!important;text-shadow:none;opacity:1!important;filter:none}
/* 被選中的對話選項 */
.game-shell .npc-dialogue-actions .current,.game-shell .npc-dialogue-actions .primary-button.current{border-image-source:url('./assets/ui/kit/btn-primary.webp')!important;border-image-slice:40 104 40 104 fill!important}
/* 列表卡片 */
.game-shell :is(.stock-card,.recipe-card,.quest-entry,.medal-card,.dungeon-card,.plot-card,.shop-card,.skill-card,.forge-row,.toggle-row,.volume-row,.home-person){border-style:solid!important;border-color:transparent!important;border-width:0;border-radius:0!important;background:none!important;box-shadow:none!important;
  border-image:url('./assets/ui/kit/card.webp') 60 72 60 72 fill / 20px 24px stretch !important;padding:10px 18px!important}
.game-shell :is(.stock-card,.recipe-card,.quest-entry,.medal-card,.dungeon-card,.plot-card,.shop-card,.skill-card) h3{color:#fff1d8;font-weight:400;letter-spacing:.04em}
.game-shell :is(.stock-card,.recipe-card,.quest-entry,.medal-card,.dungeon-card,.plot-card,.shop-card,.skill-card) small{color:var(--kit-sub)}
/* 段落標題緞帶 */
.game-shell .section-title{border-style:solid!important;border-color:transparent!important;border-width:0;border-radius:0!important;background:none!important;box-shadow:none!important;
  border-image:url('./assets/ui/kit/title.webp') 26 86 26 86 fill / 9px 30px stretch !important;padding:5px 36px!important;color:#f6dfae!important;letter-spacing:.12em;text-align:center}
/* 分頁標籤 */
.game-shell .quest-tabs{gap:4px}
.game-shell .quest-tabs button{border:0;border-radius:0;background:none;color:#cdb8da;padding:5px 16px;min-height:34px;border-image:url('./assets/ui/kit/btn-secondary.webp') 30 90 30 90 fill / 9px 22px stretch !important;opacity:.8}
.game-shell .quest-tabs button.active{border-image:url('./assets/ui/kit/tab-active.webp') 30 70 30 70 fill / 10px 22px stretch !important;color:#fff6e6;opacity:1;text-shadow:0 0 8px rgba(214,140,255,.6)}
/* 對話選項的小圖示與驚嘆號往內收，不壓到花框 */
.game-shell .npc-dialogue-actions button{padding-left:30px!important;gap:8px}
.game-shell .npc-dialogue-actions .option-alert{right:22px!important}
/* 立繪不能跑出畫面：橫式手機時收進框內 */
@media (orientation:landscape) and (max-height:500px){
  .game-shell .side-panel.dialogue-layout{padding-left:122px!important}
  .game-shell .dialogue-layout .npc-dialogue-portrait{left:12px!important;bottom:10px!important;width:104px!important;height:140px!important;overflow:hidden;border-radius:0 0 0 14px}
  .game-shell .dialogue-layout .npc-dialogue-portrait img{height:150px!important;left:50%;transform:translateX(-50%)}
  .game-shell .dialogue-layout .npc-nameplate{left:114px!important}
  .game-shell .dialogue-layout .stock-card{padding:8px 16px!important;border-image-width:16px 20px}
}
.game-shell .npc-dialogue-actions button:not(.current){border-image:url('./assets/ui/kit/btn-secondary.webp') 30 90 30 90 fill / 10px 28px stretch!important;color:var(--kit-text)!important;text-shadow:none}
.game-shell .npc-dialogue-actions button{padding-left:36px!important;padding-right:34px!important}
.game-shell .section-title{display:block!important;text-align:center!important}
.game-shell :is(.stock-card,.recipe-card,.quest-entry,.medal-card,.dungeon-card,.plot-card,.shop-card,.skill-card,.forge-row,.toggle-row,.volume-row,.home-person){padding:10px 22px 10px 26px!important}
/* 使用者 09:54：①一般面板的關閉鈕固定在外框右上角（內容捲動時不會跟著跑掉）；②電腦版字太小 */
.game-shell .side-panel:not(.dialogue-layout):not(.hidden){display:flex!important;flex-direction:column;overflow:visible!important}
.game-shell .side-panel:not(.dialogue-layout)>#panel-content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#8a5aa8 transparent;padding-right:4px}
.game-shell .side-panel:not(.dialogue-layout) .panel-heading{position:static!important;flex:none}
.game-shell .side-panel:not(.dialogue-layout) #panel-close{position:absolute!important;top:-14px!important;right:-14px!important;left:auto!important;width:44px!important;height:44px!important;z-index:5}
.game-shell .side-panel #panel-close{border:0;background:url('./assets/ui/hud/close.webp') center/contain no-repeat!important;color:transparent!important;font-size:0!important;filter:drop-shadow(0 2px 4px #0a0412cc)}
.game-shell .side-panel #panel-close>*{display:none}
.game-shell .side-panel #panel-close:hover{transform:scale(1.08)}
/* 字級下限：面板內文 13px、說明小字 12px、按鈕 13px（原本最小 9～10px） */
.game-shell .side-panel{font-size:14px}
.game-shell .side-panel :is(p,li,.panel-intro){font-size:max(13px,1em)}
.game-shell .side-panel small,.game-shell .side-panel .tag,.game-shell .side-panel .panel-note{font-size:12px!important;line-height:1.45}
.game-shell .side-panel h3{font-size:14.5px}
.game-shell .side-panel :is(.primary-button,.secondary-button,.text-button,.quest-tabs button){font-size:13px!important}
.game-shell .side-panel .panel-intro{font-size:13px!important}
@media (min-width:1100px) and (min-height:501px){
  .game-shell .side-panel{font-size:15px}
  .game-shell .side-panel small,.game-shell .side-panel .tag,.game-shell .side-panel .panel-note{font-size:12.5px!important}
  .game-shell .side-panel h3{font-size:15.5px}
  .game-shell .side-panel :is(.primary-button,.secondary-button,.text-button,.quest-tabs button){font-size:14px!important}
}
/* 使用者 09:57：橫式手機的店主立繪放大、比較生動——從對話框左下角站出來，頭可以超出框上緣（不超出畫面），會輕輕呼吸 */
@keyframes npc-breathe{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}50%{transform:translateX(-50%) translateY(-3px) scale(1.012)}}
@media (orientation:landscape) and (max-height:500px){
  .game-shell .side-panel.dialogue-layout{padding-left:178px!important}
  .game-shell .dialogue-layout .npc-dialogue-portrait{left:6px!important;bottom:6px!important;width:168px!important;height:min(270px,calc(100dvh - var(--edge-top,0px) - 40px))!important;overflow:visible!important;border-radius:0}
  .game-shell .dialogue-layout .npc-dialogue-portrait img{height:100%!important;left:50%;bottom:0;transform-origin:50% 100%;animation:npc-breathe 3.6s ease-in-out infinite;filter:drop-shadow(0 6px 10px rgba(10,4,18,.7)) drop-shadow(0 0 12px rgba(214,140,255,.25))}
  .game-shell .dialogue-layout .npc-nameplate{left:168px!important}
}
@media (prefers-reduced-motion:reduce){.game-shell .dialogue-layout .npc-dialogue-portrait img{animation:none}}
.game-shell .side-panel:not(.dialogue-layout) #panel-close{top:-10px!important;right:-10px!important}
/* T5 改名、T1 回報問題 */
.rename-form{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;margin:4px 0 10px}
.rename-form input,.report-form textarea{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:10px;border:1px solid var(--gold-line);background:rgba(14,7,22,.7);color:#fbeedd;font:400 14px var(--font-main)}
.rename-form .form-error{grid-column:1 / -1}
.form-error{color:#ff9fa8;min-height:1em}
.report-dialog{border:0;padding:0;background:none;max-width:min(520px,calc(100vw - 24px));width:100%;color:#fbeedd}
.report-dialog::backdrop{background:rgba(10,4,18,.6);backdrop-filter:blur(2px)}
.report-form{display:flex;flex-direction:column;gap:10px;padding:26px 28px 22px;border-style:solid;border-width:0;border-image:url('./assets/ui/frames/panel-frame.webp') 110 fill / 40px stretch;font-family:var(--font-main)}
.report-form h2{margin:0;font:400 20px var(--font-main);color:#f6dfae;letter-spacing:.1em;text-align:center}
.report-form p{margin:0;font-size:13.5px;color:#e6d4ef}
.report-shot{display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer}
.report-shot img{width:160px;border-radius:8px;border:1px solid var(--gold-soft)}
.report-meta{color:#c9b6d6;font-size:12px}
.report-buttons{display:flex;gap:10px;justify-content:flex-end}
.report-buttons button{min-width:110px}
@media (orientation:landscape) and (max-height:500px){.report-form{padding:18px 22px 14px;gap:6px}.report-shot img{width:110px}.report-form textarea{rows:2}}
/* 副本 HUD：標題緞帶＋波次珠＋倒數；困難模式偏紅，首領現身時發光 */
.game-shell .dungeon-hud{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 46px 9px;border:0!important;border-radius:0;background:none!important;box-shadow:none;border-style:solid;border-image:url('./assets/ui/kit/title.webp') 26 86 26 86 fill / 14px 40px stretch;min-width:260px;filter:drop-shadow(0 4px 8px rgba(10,4,18,.6));font-family:var(--font-main);color:#fbeedd}
.dungeon-hud .dh-title{display:flex;align-items:center;gap:8px}
.dungeon-hud .dh-title b{font-weight:400;font-size:15px;letter-spacing:.12em;color:#f6dfae}
.dungeon-hud .dh-hard{font-size:11px;padding:1px 8px;border-radius:9px;background:linear-gradient(180deg,#b3263f,#6b0f22);border:1px solid #ffb0a0;color:#fff0e6;letter-spacing:.1em}
.dungeon-hud .dh-pips{display:flex;gap:6px;align-items:center}
.dungeon-hud .dh-pips i{width:10px;height:10px;transform:rotate(45deg);border:1px solid #e2b874;background:rgba(20,10,30,.7)}
.dungeon-hud .dh-pips i.done{background:linear-gradient(135deg,#ffe1a0,#c98a3a)}
.dungeon-hud .dh-pips i.now{background:#c58bff;box-shadow:0 0 8px #c58bff;animation:dh-pulse 1s ease-in-out infinite}
.dungeon-hud .dh-pips i.boss{width:14px;height:14px;border-color:#ff8f8f;margin-left:4px}
.dungeon-hud .dh-pips i.boss.now{background:#ff4d6a;box-shadow:0 0 10px #ff4d6a}
.dungeon-hud .dh-text{font-size:13px}
.dungeon-hud .dh-text em{font-style:normal;color:#ffe1a0}
.dungeon-hud .dh-count{display:inline-block;min-width:1.6em;text-align:center;font-size:16px;color:#fff3c4;text-shadow:0 0 8px #ffcf6b}
.dungeon-hud .dh-home{margin-top:3px;min-height:30px!important}
.game-shell .dungeon-hud.hard{filter:drop-shadow(0 0 10px rgba(255,60,90,.35)) drop-shadow(0 4px 8px rgba(10,4,18,.6))}
.game-shell .dungeon-hud.boss .dh-text{color:#ffb3b3;text-shadow:0 0 8px #ff4d6a}
@keyframes dh-pulse{50%{opacity:.5}}
/* 副本卡片：困難模式時紅色光暈 */
.game-shell .dungeon-card.hard{filter:drop-shadow(0 0 8px rgba(255,60,90,.45))}
.game-shell .dungeon-card.hard h3{color:#ffc6c0}
@media (orientation:landscape) and (max-height:500px){.game-shell .dungeon-hud{top:6px;padding:5px 36px 6px;min-width:220px;border-image-width:11px 32px}.dungeon-hud .dh-title b{font-size:13px}.dungeon-hud .dh-text{font-size:12px}}
.report-dialog .primary-button,.report-dialog .secondary-button{border:0;border-radius:0;background:none;box-shadow:none;border-style:solid;min-height:40px;font:400 14px var(--font-main);color:#fbeedd;width:auto;padding:6px 34px}
.report-dialog .primary-button{border-image:url('./assets/ui/kit/btn-primary.webp') 40 104 40 104 fill / 11px 30px stretch;color:#fff6e6}
.report-dialog .secondary-button{border-image:url('./assets/ui/kit/btn-secondary.webp') 30 90 30 90 fill / 10px 28px stretch}
.report-dialog .primary-button:disabled{border-image-source:url('./assets/ui/kit/btn-disabled.webp');border-image-slice:30 90 30 90 fill}
/* 使用者 10:53：讀取畫面滿版——蓋住整個螢幕（含安全區、Telegram 頂部按鈕後面），影片／背景 cover 填滿；Logo、進度條、文字照安全區往內排 */
.game-shell .loading-overlay{position:fixed!important;inset:0!important;width:100vw;height:100dvh;z-index:2147480000;margin:0}
.loading-overlay .ld-sky{position:absolute;inset:0}
.loading-overlay .ld-video{object-fit:cover;object-position:50% 45%}
.loading-overlay .ld-front{padding-left:max(20px,calc(var(--edge-left,0px) + 12px));padding-right:max(20px,calc(var(--edge-right,0px) + 12px));padding-bottom:max(18px,calc(var(--safe-bottom-raw,0px) + 10px))}
.ld-has-video .ld-front .loading-logo{top:max(16px,calc(var(--edge-top,0px) + 6px))}
@media (orientation:landscape) and (max-height:500px){
  .ld-has-video .ld-front .loading-logo{width:min(26vw,190px)}
  .loading-overlay .ld-front{gap:4px}
  .loading-overlay .ld-tip{display:none}
}
/* 使用者 10:52：鏡頭工具每顆鈕下面加小字（放大、縮小、左轉、右轉、回到角色、視角：標準） */
.camera-tools{row-gap:16px!important;column-gap:8px!important}
.camera-tools .round-button{position:relative;overflow:visible}
.camera-tools .round-button::after{content:attr(data-label);position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:1px;white-space:nowrap;font:400 10.5px/1.2 var(--font-main);color:#f6e6cf;text-shadow:0 1px 2px #12061c,0 0 4px #12061c;pointer-events:none;letter-spacing:.02em}
@media (orientation:landscape) and (max-height:500px){
  .camera-tools{row-gap:13px!important;column-gap:6px!important}
  .camera-tools .round-button::after{font-size:9.5px}
}
/* 橫式手機：鏡頭工具一律兩欄、排在小地圖左邊（不和新手指引卡、小字標籤互相擠） */
@media (orientation:landscape) and (max-height:500px){
  .camera-tools,.game-shell:has(#tutorial-card:not(.hidden)) .camera-tools,.game-shell:has(#city-minimap:not(.hidden)) .camera-tools,.game-shell:has(#tutorial-card:not(.hidden)):has(#city-minimap:not(.hidden)) .camera-tools{grid-template-columns:repeat(2,auto)!important;top:58px!important;right:112px!important;bottom:auto!important}
}
@media (orientation:landscape) and (max-height:500px){.camera-tools{column-gap:18px!important}}
.camera-tools{column-gap:14px!important}
/* ==== 第四波：照鏡子／染色（U1、U2）==== 中間留空看得到角色近景，左邊分類、右邊選項、下面價錢 */
.mirror-screen{position:fixed;inset:0;z-index:40;pointer-events:none;font-family:var(--font-main);color:#fbeedd}
.mirror-screen.hidden{display:none}
.mirror-frame{position:absolute;inset:calc(var(--edge-top,0px) + 10px) calc(var(--edge-right,0px) + 12px) calc(var(--edge-bottom,0px) + 10px) calc(var(--edge-left,0px) + 12px);display:grid;grid-template-columns:150px 1fr minmax(260px,32%);grid-template-rows:auto 1fr auto;gap:10px 14px}
.mirror-frame>*{pointer-events:auto}
.mirror-head{grid-column:1 / -1;text-align:center;padding:6px 40px 8px;border-style:solid;border-width:0;border-image:url('./assets/ui/kit/title.webp') 26 86 26 86 fill / 12px 36px stretch;justify-self:center;min-width:min(560px,80%)}
.mirror-head h2{margin:0;font:400 19px var(--font-main);letter-spacing:.14em;color:#f6dfae}
.mirror-head p{margin:2px 0 0;font-size:12.5px;color:#e8d4f0}
.mirror-cats{display:flex;flex-direction:column;gap:6px;align-self:center}
.mirror-cats button{min-height:40px;border:0;background:none;color:#e6d4ee;font:400 14px var(--font-main);border-style:solid;border-image:url('./assets/ui/kit/btn-secondary.webp') 30 90 30 90 fill / 10px 26px stretch;padding:4px 24px}
.mirror-cats button.active{border-image:url('./assets/ui/kit/tab-active.webp') 30 70 30 70 fill / 10px 22px stretch;color:#fff6e6;text-shadow:0 0 8px rgba(214,140,255,.6)}
.mirror-glass{position:relative;border-style:solid;border-width:0;border-image:url('./assets/ui/frames/mirror-frame.webp') 120 fill / 60px stretch;border-image-source:url('./assets/ui/frames/mirror-frame.webp');background:radial-gradient(ellipse at 50% 55%,transparent 55%,rgba(20,8,30,.45));pointer-events:none!important}
.mirror-glass .mirror-turn{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:90px;pointer-events:auto}
.mirror-turn button{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold-line);background:rgba(30,14,44,.7);color:#f6dfae;font-size:26px;line-height:1;cursor:pointer}
.mirror-wait{position:absolute;left:50%;top:14px;transform:translateX(-50%);white-space:nowrap;font-size:12px;text-align:center;padding:4px 12px;border-radius:10px;background:rgba(20,8,30,.75);border:1px solid var(--gold-soft);color:#e8d4f0}
.mirror-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px;align-content:start;overflow:auto;padding:16px 18px;border-style:solid;border-width:0;border-image:url('./assets/ui/frames/panel-frame.webp') 110 fill / 36px stretch}
.mirror-opt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:12px;border:1px solid var(--gold-soft);background:rgba(30,14,44,.6);color:#f3e3cf;font:400 12.5px var(--font-main);cursor:pointer;transition:transform .12s,box-shadow .12s}
.mirror-opt:hover{transform:translateY(-1px)}
.mirror-opt.picked{border-color:#ffd994;box-shadow:0 0 0 2px #ffd99488,0 0 12px rgba(255,217,148,.45);background:rgba(90,46,120,.7)}
.mirror-opt .sw{width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 2px #e2b874,inset 0 -4px 8px rgba(0,0,0,.35)}
.mirror-opt .num{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:16px;color:#f6dfae;background:radial-gradient(circle at 40% 35%,#6a3c8e,#2a1438);box-shadow:0 0 0 2px #e2b874}
.mirror-foot{grid-column:1 / -1;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:8px 14px;border-radius:14px;background:rgba(20,8,30,.72);border:1px solid var(--gold-soft)}
.mirror-foot .mirror-price{margin-right:auto;font-size:14px}.mirror-foot b{color:#ffd994;font-weight:400}
.mirror-foot button{border:0;background:none;min-height:40px;font:400 14px var(--font-main);color:#fbeedd;border-style:solid;padding:4px 30px}
.mirror-foot .primary-button{border-image:url('./assets/ui/kit/btn-primary.webp') 40 104 40 104 fill / 11px 30px stretch;color:#fff6e6}
.mirror-foot .secondary-button{border-image:url('./assets/ui/kit/btn-secondary.webp') 30 90 30 90 fill / 10px 28px stretch}
.mirror-foot .primary-button:disabled{border-image-source:url('./assets/ui/kit/btn-disabled.webp');border-image-slice:30 90 30 90 fill;color:#b9adbd}
body.mirror-open .game-shell .left-stack,body.mirror-open .game-shell .tool-rail,body.mirror-open .game-shell .place-card,body.mirror-open .game-shell .tutorial-card,body.mirror-open .game-shell .city-minimap,body.mirror-open .game-shell .camera-tools,body.mirror-open .game-shell .side-panel{display:none!important}
@media (orientation:landscape) and (max-height:500px){
  .mirror-frame{grid-template-columns:96px 1fr minmax(200px,36%);gap:6px 8px}
  .mirror-head{padding:3px 32px 4px}.mirror-head h2{font-size:15px}.mirror-head p{display:none}
  .mirror-cats button{min-height:34px;font-size:12.5px;padding:2px 14px}
  .mirror-opts{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));padding:12px 12px;gap:5px}
  .mirror-opt{padding:5px 2px;font-size:11px}.mirror-opt .sw,.mirror-opt .num{width:28px;height:28px}
  .mirror-foot{padding:4px 10px;gap:6px}.mirror-foot button{min-height:34px;padding:2px 22px;font-size:13px}
  .mirror-glass{border-image-width:34px}
}
/* ==== 第四波：表情輪盤（U3）==== */
.emote-wheel{position:fixed;inset:0;z-index:38;display:grid;place-items:center;background:rgba(10,4,18,.35)}
.emote-wheel.hidden{display:none}
.ew-ring{position:relative;width:min(320px,70vh);height:min(320px,70vh);border-radius:50%;background:radial-gradient(circle,rgba(40,20,58,.75) 30%,rgba(20,10,30,.55) 70%,transparent 72%);box-shadow:0 0 0 2px rgba(214,170,105,.4)}
.ew-ring button[data-emote]{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px;border:0;background:none;transform:rotate(calc(var(--i) * 45deg - 90deg)) translate(min(118px,26vh)) rotate(calc(var(--i) * -45deg + 90deg));display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#fbeedd;font:400 12px var(--font-main);text-shadow:0 1px 3px #12061c}
.ew-ring button[data-emote] img{width:58px;height:58px;filter:drop-shadow(0 3px 5px rgba(10,4,18,.7));transition:transform .12s}
.ew-ring button[data-emote]:hover img{transform:scale(1.1)}
.ew-close{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;border:0;border-radius:50%;background:url('./assets/ui/hud/close.webp') center/contain no-repeat;color:transparent;cursor:pointer}
@media (orientation:landscape) and (max-height:500px){.ew-ring button[data-emote]{width:62px;height:62px;margin:-31px}.ew-ring button[data-emote] img{width:44px;height:44px}.ew-ring button[data-emote] span{font-size:10.5px}}
/* ==== 第四波：拍照模式（U4）==== 隱藏全部介面，只留快門、濾鏡、離開 */
body.photo-mode .game-shell>*:not(#world):not(.screen-grain){visibility:hidden!important}
body.photo-mode .joystick{visibility:visible}
.photo-ui{position:fixed;inset:0;z-index:39;pointer-events:none;font-family:var(--font-main)}
.photo-ui.hidden{display:none}
.photo-ui>*{pointer-events:auto}
.ph-top{position:absolute;top:calc(var(--edge-top,0px) + 8px);left:calc(var(--edge-left,0px) + 12px);right:calc(var(--edge-right,0px) + 12px);display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.ph-hint{pointer-events:none;font-size:12.5px;color:#f3e3cf;padding:4px 12px;border-radius:12px;background:rgba(20,8,30,.6)}
.ph-exit{pointer-events:auto;width:44px;height:44px;border:0;background:url('./assets/ui/hud/close.webp') center/contain no-repeat;color:transparent;cursor:pointer}
.ph-filters{position:absolute;left:50%;bottom:calc(var(--edge-bottom,0px) + 14px);transform:translateX(-50%);display:flex;gap:8px}
.ph-filters button{border:0;background:none;color:#e6d4ee;min-height:36px;font:400 13px var(--font-main);border-style:solid;border-image:url('./assets/ui/kit/btn-secondary.webp') 30 90 30 90 fill / 9px 22px stretch;padding:4px 20px;cursor:pointer}
.ph-filters button.active{border-image:url('./assets/ui/kit/tab-active.webp') 30 70 30 70 fill / 10px 22px stretch;color:#fff6e6}
.ph-shutter{position:absolute;right:calc(var(--edge-right,0px) + 22px);top:50%;transform:translateY(-50%);width:76px;height:76px;border:0;background:url('./assets/ui/emotes/btn-camera.webp') center/contain no-repeat;cursor:pointer;filter:drop-shadow(0 4px 8px rgba(10,4,18,.7))}
.ph-shutter:active{transform:translateY(-50%) scale(.94)}
.ph-mark{position:absolute;right:calc(var(--edge-right,0px) + 16px);bottom:calc(var(--edge-bottom,0px) + 10px);font-size:20px;color:#f6dfae;text-shadow:0 0 3px #1a0a22,0 0 6px #1a0a22;pointer-events:none;opacity:.85}
.ph-mark::before{content:'✦ '}
.photo-ui.flash::after{content:'';position:fixed;inset:0;background:#fff;opacity:.7;pointer-events:none}
.photo-sheet{border:0;padding:0;background:none;max-width:min(640px,calc(100vw - 24px));width:100%}
.photo-sheet::backdrop{background:rgba(10,4,18,.65)}
.photo-form{display:flex;flex-direction:column;gap:8px;padding:22px 24px 18px;border-style:solid;border-width:0;border-image:url('./assets/ui/frames/panel-frame.webp') 110 fill / 40px stretch;font-family:var(--font-main);color:#fbeedd}
.photo-form img{width:100%;max-height:52vh;object-fit:contain;border-radius:8px;border:1px solid var(--gold-soft)}
.photo-form input{padding:8px 12px;border-radius:10px;border:1px solid var(--gold-line);background:rgba(14,7,22,.7);color:#fbeedd;font:400 14px var(--font-main)}
.photo-buttons{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.photo-buttons>*{border:0;background:none;min-height:38px;font:400 14px var(--font-main);color:#fbeedd;text-decoration:none;display:inline-flex;align-items:center;border-style:solid;padding:4px 26px}
.photo-buttons .primary-button{border-image:url('./assets/ui/kit/btn-primary.webp') 40 104 40 104 fill / 11px 30px stretch}
.photo-buttons .secondary-button{border-image:url('./assets/ui/kit/btn-secondary.webp') 30 90 30 90 fill / 10px 28px stretch}
@media (orientation:landscape) and (max-height:500px){.photo-form{padding:14px 18px 10px}.photo-form img{max-height:44vh}.ph-shutter{width:62px;height:62px}}
/* 底部按鈕列的新入口（預覽階段） */
.tool-rail .rail-emote .rail-icon,.tool-rail .rail-photo .rail-icon,.tool-rail .rail-mirror .rail-icon{object-fit:contain}
.mirror-glass{border-image:url('./assets/ui/frames/mirror-frame.webp') 180 75 115 75 / 84px 36px 54px 36px stretch!important}
@media (orientation:landscape) and (max-height:500px){.mirror-glass{border-image-width:52px 22px 34px 22px!important}.mirror-glass .mirror-turn{bottom:8px;gap:60px}}
.mirror-foot button,.photo-buttons>*{flex:none;white-space:nowrap}
.mirror-foot .mirror-price{white-space:nowrap}
.photo-buttons{flex-wrap:nowrap}
.ph-cam{position:absolute;right:calc(var(--edge-right,0px) + 14px);top:calc(50% + 52px);display:grid;grid-template-columns:repeat(2,44px);gap:6px}
.ph-cam button{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold-line);background:rgba(30,14,44,.7);color:#f6dfae;font:400 22px/1 var(--font-main);cursor:pointer}
.ph-shutter{top:calc(50% - 40px)!important}
@media (orientation:landscape) and (max-height:500px){.ph-cam{grid-template-columns:repeat(2,38px)}.ph-cam button{width:38px;height:38px;font-size:18px}.ph-shutter{top:calc(50% - 56px)!important}}
.mirror-foot .primary-button,.mirror-foot .secondary-button,.photo-buttons .primary-button,.photo-buttons .secondary-button{width:auto!important}
body.mirror-open .game-shell .topbar,body.mirror-open .game-shell .resource-bar,body.mirror-open .game-shell .top-actions{display:none!important}
/* ==== 第四波 X4：右上角按鈕收合 ==== 平常只露資源列、小地圖、「選單」「鏡頭」「回到角色」；點了往左橫向展開，按鈕下有小字 */
.hud-toggle{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;border:0!important;border-radius:50%;background-position:center!important;background-size:contain!important;background-repeat:no-repeat!important;background-color:transparent!important;box-shadow:none!important;color:transparent!important;font-size:0!important;filter:drop-shadow(0 3px 6px #0a0412cc);position:relative;overflow:visible;transition:transform .15s,filter .15s}
.hud-toggle>*{display:none}
.hud-toggle:hover{transform:scale(1.07);filter:drop-shadow(0 3px 6px #0a0412cc) brightness(1.12)}
.hud-open>.hud-toggle{filter:drop-shadow(0 0 7px #f3c97acc) brightness(1.15)}
.hud-collapsible>.hud-strip{display:none}
.hud-collapsible.hud-open>.hud-strip{display:flex;position:absolute;right:calc(100% + 8px);top:-5px;flex-direction:row;align-items:flex-start;gap:12px;padding:6px 14px 19px;border-radius:28px;background:linear-gradient(180deg,rgba(46,24,60,.93),rgba(22,11,31,.93));border:1px solid rgba(201,160,103,.6);box-shadow:0 6px 18px #0a0412aa,inset 0 0 0 1px #140a1c;z-index:40;animation:hud-strip-in .18s ease-out;transform-origin:right center}
@keyframes hud-strip-in{from{opacity:0;transform:translateX(10px) scaleX(.92)}to{opacity:1;transform:none}}
.hud-strip>.hidden{display:none!important}
.hud-strip .round-button,.top-actions .hud-strip .round-button{position:relative;overflow:visible;margin:0;flex:0 0 auto}
.top-actions .hud-strip .round-button{width:42px;height:42px}
.hud-toggle::after,.top-actions .hud-strip .round-button::after{content:attr(data-label);position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:1px;white-space:nowrap;font:400 10.5px/1.2 var(--font-main);color:#f6e6cf;text-shadow:0 1px 2px #12061c,0 0 4px #12061c;pointer-events:none;letter-spacing:.02em}
.top-actions.hud-collapsible{position:relative;display:flex;align-items:flex-start;padding-bottom:12px}
.top-actions .hud-strip .round-button>*{display:none}
/* 鏡頭：「鏡頭」在上、「回到角色」在下，一直顯示；其他收在左邊的橫條 */
.camera-tools.hud-collapsible{display:flex!important;flex-direction:column!important;align-items:center;row-gap:17px!important;grid-template-columns:none!important}
.camera-tools.hud-collapsible>.hud-strip{flex-direction:row!important}
.camera-tools .hud-strip .round-button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
@media (orientation:landscape) and (max-height:500px){
  .hud-toggle{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
  .hud-toggle::after,.top-actions .hud-strip .round-button::after{font-size:9.5px}
  .top-actions .hud-strip .round-button,.camera-tools .hud-strip .round-button{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
  .hud-collapsible.hud-open>.hud-strip{gap:9px;padding:5px 11px 16px}
  .camera-tools.hud-collapsible{row-gap:14px!important}
  .top-actions.hud-collapsible{padding-bottom:0}
}
@media (orientation:landscape) and (max-height:500px){.hud-menu-toggle::after{display:none}}
/* 使用者 13:06：「選單」搬到「回到角色」下面（鏡頭／回到角色／選單一直排），往左展開 */
.top-actions.in-cam-column{position:relative;display:flex;flex:0 0 auto;padding:0!important;margin:0;gap:0}
.top-actions.in-cam-column .hud-toggle::after,.top-actions.in-cam-column .hud-menu-toggle::after{display:block!important}
.top-actions.in-cam-column{order:99}
/* 使用者 13:07：資源列每格下面加中文小字（暮幣、木材、石材、森晶、種子），跟按鈕小字同樣式 */
#resources .resource-item{position:relative;overflow:visible}
#resources .resource-item small{display:block!important;position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:2px;white-space:nowrap;font:400 10.5px/1.2 var(--font-main)!important;color:#f6e6cf!important;text-shadow:0 1px 2px #12061c,0 0 4px #12061c;pointer-events:none;letter-spacing:.02em}
@media (orientation:landscape) and (max-height:500px){#resources .resource-item small{font-size:9.5px!important;margin-top:1px}}
/* 資源列的小字疊在小地圖外框上面時要看得到 */
.game-shell .topbar{z-index:6}
/* 使用者 13:17：資源列往上移，小字不壓到小地圖 */
#resources{transform:translateY(-24px)}
@media (orientation:landscape) and (max-height:500px){#resources{transform:translateY(-11px)}}
/* ==== 第四波 G3：建角色選外觀（登入畫面）==== 分類一排、選項一排；顏色用色塊 */
.look-picker{margin:2px 0 12px;padding:8px 10px 9px;border:1px solid #8d6aa055;border-radius:12px;background:linear-gradient(#2a173acc,#170c22cc)}
.look-cats{display:flex;align-items:center;gap:6px;margin-bottom:7px}
.look-title{font:400 12px var(--font-main);letter-spacing:.12em;color:#e7c993;margin-right:4px}
.look-cats button{flex:1 1 0;padding:5px 0;border-radius:8px;border:1px solid #8d6aa066;background:#1b0f26;color:#cdb4d8;font:400 12px var(--font-main);cursor:pointer}
.look-cats button.active{border-color:#f0c482;color:#ffe1a6;background:linear-gradient(#5a3474,#341d48);box-shadow:0 0 10px #c27fe655}
.look-opts{display:flex;flex-wrap:wrap;gap:6px}
.look-opt{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;border:1px solid #8d6aa066;background:#140a1d;color:#e8d3e8;font:400 12px var(--font-main);cursor:pointer;min-height:30px}
.look-opt i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #fff6,0 0 0 1px #0008;flex:0 0 auto}
.look-opt.picked{border-color:#f0c482;color:#ffe1a6;box-shadow:0 0 0 1px #f0c48288,0 0 12px #c27fe666;background:#2c1840}
/* 手機橫式（和高度不到 820 的電腦）：左邊 Logo、右邊表單，不用捲動就看得到「點亮我的第一盞燈」 */
@media (orientation:landscape) and (max-height:820px){
  .login-column{width:100%!important;max-width:none;min-height:100dvh;display:grid!important;grid-template-columns:minmax(0,1fr) min(470px,58vw);grid-template-rows:1fr auto;align-items:center;column-gap:14px;padding:max(8px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 6px max(14px,env(safe-area-inset-left))!important;box-sizing:border-box}
  .login-head{grid-column:1;grid-row:1;margin:0}
  .login-logo{width:min(36vw,300px)!important}
  .login-tagline{font-size:11px}
  .login-panel{grid-column:2;grid-row:1;margin:0!important;padding:16px 12px 8px!important}
  .login-panel-title{font-size:13px}
  .login-screen .avatar-options{gap:8px;margin:2px 0}
  .login-screen .avatar-option{height:74px!important}
  .login-screen .avatar-option img{height:120px!important;top:-12px}
  .login-screen .avatar-option>span{padding:10px 0 4px}
  .login-screen .avatar-option>span b{font-size:12px}
  .login-screen .avatar-note{margin:3px 0 5px;font-size:9px}
  .look-picker{margin:0 0 6px;padding:5px 8px 6px}
  .look-cats{margin-bottom:5px}
  .look-cats button{padding:3px 0;font-size:11px}
  .look-opts{gap:4px}
  .look-opt{min-height:26px;padding:3px 8px;font-size:11px}
  .login-screen label{font-size:11px;margin:0 0 4px}
  .login-screen input{padding:7px 10px;font-size:16px}
  .login-start{margin-top:6px!important;min-height:36px;padding-top:6px!important;padding-bottom:6px!important}
  .login-foot{grid-column:1 / -1;grid-row:2;font-size:9px;margin:0}
}
@media (orientation:landscape) and (min-height:501px) and (max-height:820px){
  .login-logo{width:min(40vw,420px)!important}
  .login-tagline{font-size:13px}
  .login-panel{padding:22px 16px 12px!important}
  .login-panel-title{font-size:15px}
  .login-screen .avatar-option{height:118px!important}
  .login-screen .avatar-option img{height:170px!important;top:-8px}
  .login-screen .avatar-option>span b{font-size:14px}
  .look-picker{margin:0 0 10px;padding:8px 10px}
  .look-cats button{padding:5px 0;font-size:12px}
  .look-opt{min-height:30px;padding:4px 10px;font-size:12px}
  .login-screen label{font-size:12px;margin:0 0 6px}
  .login-screen input{padding:10px 12px}
  .login-start{min-height:44px;margin-top:10px!important}
  .login-foot{font-size:11px}
}
/* 委託可以交付時：地圖圖釘的驚嘆號發金光、閃一閃 */
.map-quest.ready{filter:drop-shadow(0 0 3px #ffd27a) drop-shadow(0 0 6px #ffb84a);animation:quest-ready-blink 1.2s ease-in-out infinite}
@keyframes quest-ready-blink{50%{opacity:.55}}
.stock-card .quest-go{white-space:nowrap}
/* 使用者 14:21、14:22：強化鍛爐／寶石坊面板太靠右（蓋到小地圖和右側按鈕）、沒有關閉鈕
   → 往左移，讓出右邊一欄；右上角加固定的關閉鈕（跟其他面板同一顆） */
@media (min-width:851px){.side-panel.service-layout{right:calc(var(--safe-right,0px) + 178px)!important}}
.side-panel.service-layout{overflow:visible!important}
.side-panel.service-layout #panel-content{max-height:calc(100dvh - 150px);overflow-y:auto;scrollbar-width:none}
.side-panel.service-layout .panel-heading{display:block!important;position:absolute;top:0;right:0;width:0;height:0;margin:0;padding:0;border:0;z-index:6}
.side-panel.service-layout .panel-heading>div{display:none}
.side-panel.service-layout #panel-close{position:absolute;top:-12px;right:-12px;width:40px;height:40px;min-width:40px;min-height:40px}
.side-panel.service-layout .panel-intro{padding-right:30px}
@media (orientation:landscape) and (max-height:500px){
  .side-panel.service-layout #panel-content{max-height:calc(100dvh - 110px)}
  .side-panel.service-layout #panel-close{width:34px;height:34px;min-width:34px;min-height:34px;top:-8px;right:-8px}
}
.tool-rail>button.hidden{display:none!important}
/* ==== 第五波 U5-3／U5-4／U5-6：坐騎寵物、傳送、簽到 ==== */
.v5-layer{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;background:rgba(10,4,16,.45);font-family:var(--font-main);color:#fbeedd}
.v5-layer.hidden{display:none}
.v5-card{position:relative;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 40px);display:flex;flex-direction:column;border-style:solid;border-width:0;border-image:url('./assets/ui/kit/card.webp') 60 72 60 72 fill / 30px 36px stretch;padding:22px 26px 20px}
.v5-close{position:absolute;top:-10px;right:-10px;width:40px;height:40px;border:0;border-radius:50%;background:url('./assets/ui/hud/close.webp') center/contain no-repeat;cursor:pointer;z-index:2;filter:drop-shadow(0 2px 4px #0a0412cc)}
.v5-tabs{display:flex;gap:6px;justify-content:center;margin-bottom:8px}
.v5-tabs button{min-width:84px;padding:6px 14px;border-radius:999px;border:1px solid #8d6aa066;background:#1b0f26;color:#cdb4d8;font:400 13px var(--font-main);cursor:pointer}
.v5-tabs button.active{border-color:#f0c482;color:#ffe1a6;background:linear-gradient(#5a3474,#341d48);box-shadow:0 0 10px #c27fe655}
.v5-body{overflow-y:auto;scrollbar-width:thin;padding-right:2px}
.v5-hint{margin:2px 0 8px;font-size:12px;color:#d8bbd7;text-align:center}
.v5-empty{text-align:center;color:#cdb4d8;padding:24px 0}
.v5-list{display:flex;flex-direction:column;gap:7px}
.v5-item{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;border:1px solid #8d6aa055;background:linear-gradient(#2a173acc,#170c22cc)}
.v5-item.active{border-color:#f0c482;box-shadow:0 0 12px #c27fe655}
.v5-item.locked{opacity:.78}.v5-item.locked img{filter:grayscale(.8) brightness(.6)}
.v5-item img{width:52px;height:52px;object-fit:contain}
.v5-item h4{margin:0 0 2px;font:400 14px var(--font-main);color:#ffe9c4;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.v5-item small{display:block;font-size:11px;line-height:1.45;color:#cdb4d8}
.v5-item .v5-prog{color:#f0c482}
.v5-tag{font-style:normal;font-size:10px;padding:1px 7px;border-radius:999px;border:1px solid #8d6aa088;color:#d8bbd7}
.v5-tag.on{border-color:#f0c482;color:#ffe1a6}
.v5-item .primary-button,.v5-item .secondary-button{width:auto!important;min-width:64px;padding:6px 12px;font-size:12px;white-space:nowrap}
.v5-btns{display:flex;flex-direction:column;gap:4px}
.v5-lock{color:#9d86a8!important}
.v5-rename{display:flex;gap:4px}.v5-rename input{width:96px;padding:5px 8px;border-radius:8px;border:1px solid #a4805a;background:#120a1ae6;color:#f8e6c4;font-size:16px}
.v5-map{position:relative;height:min(300px,52dvh);margin:4px 6px 18px;border-radius:14px;border:1px solid #8d6aa055;background:radial-gradient(ellipse at 45% 50%,#3a2350,#160b20 75%)}
.v5-lamp{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;color:#cdb4d8;cursor:pointer;font:400 11px var(--font-main);white-space:nowrap}
.v5-lamp i{width:26px;height:26px;border-radius:50%;background:url('./assets/ui/icons/lantern.webp') center/contain no-repeat;filter:grayscale(1) brightness(.55)}
.v5-lamp.lit i{filter:drop-shadow(0 0 6px #ffcf7a)}
.v5-lamp.lit{color:#ffe1a6}
.v5-lamp.here i{outline:2px solid #f0c482;outline-offset:3px;border-radius:50%}
.v5-lamp:disabled{cursor:default}
.v5-lamp.lit:not(:disabled):hover i{transform:scale(1.15)}
/* 簽到：ChatGPT 畫的底圖，格子位置照底圖比例 */
.v5-checkin{position:relative;width:min(720px,calc(100vw - 32px),calc((100dvh - 30px) * 1.5));aspect-ratio:3/2;background:url('./assets/ui/frames/checkin-panel.webp') center/100% 100% no-repeat;filter:drop-shadow(0 10px 30px #0a0412cc)}
.v5-checkin .v5-close{top:2%;right:1%}
.ck-title{position:absolute;left:28%;right:28%;top:9.5%;height:13%;margin:0;display:flex;align-items:center;justify-content:center;font:400 clamp(16px,3.4vw,26px) var(--font-title);letter-spacing:.2em;color:#ffe1a6;text-shadow:0 2px 6px #12061c}
.ck-days{position:absolute;inset:0;pointer-events:none}
.ck-day{position:absolute;top:44.5%;height:19.5%;width:11.4%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.ck-day:nth-child(1){left:4.6%}.ck-day:nth-child(2){left:17%}.ck-day:nth-child(3){left:29.3%}.ck-day:nth-child(4){left:41.5%}.ck-day:nth-child(5){left:53.9%}.ck-day:nth-child(6){left:66%}
.ck-day.big{left:78.6%;top:39%;height:28%;width:17.5%}
.ck-day em{font-style:normal;font-size:clamp(9px,1.5vw,12px);color:#e7c993}
.ck-items{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 4px}
.ck-it{display:inline-flex;align-items:center;gap:1px;font-size:clamp(9px,1.4vw,11px);color:#fbeedd}
.ck-it svg,.ck-it img{width:clamp(16px,2.6vw,24px);height:clamp(16px,2.6vw,24px)}
.ck-it b{font-weight:400}
.ck-pet{font-size:clamp(10px,1.6vw,13px);color:#ffd27a;text-shadow:0 0 6px #c27fe6}
.ck-day.got{opacity:.62}
.ck-stamp{position:absolute;right:6%;bottom:4%;font-style:normal;font-size:clamp(14px,2.6vw,22px);color:#8fe0a0;text-shadow:0 0 6px #12061c}
.ck-day.now::before{content:"";position:absolute;inset:-4%;border-radius:12px;box-shadow:0 0 0 2px #f0c482,0 0 16px #ffcf7a;animation:quest-ready-blink 1.4s ease-in-out infinite}
.ck-note{position:absolute;left:10%;right:10%;top:68.5%;margin:0;text-align:center;font-size:clamp(10px,1.6vw,12.5px);color:#d8bbd7}
.ck-claim{position:absolute!important;left:30%;width:40%!important;top:76.5%;height:9%;min-height:0!important;padding:0!important;font-size:clamp(13px,2.2vw,17px)!important;background:none!important;border:0!important;box-shadow:none!important;border-image:none!important;color:#ffe9c4!important;letter-spacing:.2em;text-shadow:0 2px 6px #12061c}
.ck-claim:disabled{color:#a998b4!important}
.tool-rail .has-alert{position:relative}
.tool-rail .has-alert::after{content:"!";position:absolute;top:2px;right:8px;width:16px;height:16px;border-radius:50%;background:#d0404a;color:#fff;font:700 11px/16px sans-serif;text-align:center;box-shadow:0 0 6px #d0404a}
@media (orientation:landscape) and (max-height:500px){
  .v5-card{padding:16px 18px 14px;max-height:calc(100dvh - 20px)}
  .v5-item{grid-template-columns:40px 1fr auto;padding:5px 8px}.v5-item img{width:40px;height:40px}
  .v5-map{height:min(220px,52dvh)}
}
.v5-body{min-height:0;flex:1 1 auto}
/* Y4（總控 16:55）：比較窄的手機（寬 < 820）資源列會被擠到第二行，第 5 格（種子）跟「鏡頭」鈕、小地圖疊在一起
   → 窄手機一律固定在右上角第一行，跟 844 寬時同一個位置 */
@media (orientation:landscape) and (max-height:500px) and (max-width:819px){
  .game-shell #resources{position:fixed!important;top:calc(var(--edge-top,0px) + 24px);right:calc(var(--edge-right,0px) + 10px);left:auto;margin:0;width:max-content!important;max-width:none!important;flex:none!important}
  #resources .resource-item{flex:none!important}
}
/* 平台波 P1-U3：「加到主畫面」提示（手機瀏覽器玩滿 3 分鐘，只出現一次） */
.install-hint{position:fixed;left:50%;bottom:calc(var(--edge-bottom,0px) + 86px);transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;max-width:min(520px,calc(100vw - 24px));padding:9px 40px 9px 10px;border-radius:14px;border:1px solid #c9a067aa;background:linear-gradient(#2e1a3ef2,#170c22f2);box-shadow:0 8px 24px #0a0412cc;color:#fbeedd;font-family:var(--font-main);animation:hud-strip-in .25s ease-out}
.install-hint img{width:42px;height:42px;border-radius:10px;flex:none}
.install-hint b{display:block;font-weight:400;font-size:14px;color:#ffe1a6}
.install-hint small{display:block;font-size:11.5px;line-height:1.45;color:#d8bbd7}
.install-hint .primary-button{width:auto!important;white-space:nowrap;padding:6px 12px;font-size:12px}
.install-close{position:absolute;top:-10px;right:-10px;width:32px;height:32px;border:0;border-radius:50%;background:url('./assets/ui/hud/close.webp') center/contain no-repeat;cursor:pointer}
/* ==== 平台波 P1-U2：網頁版登入（Telegram／訪客）、訪客的「綁定 Telegram」 ==== */
.login-tg{display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px 0 10px;padding:8px 10px;border-radius:12px;border:1px solid #8d6aa055;background:#1b0f26b3}
.login-tg[hidden]{display:none}
.login-tg .tg-widget-box{min-height:40px;display:flex;align-items:center;justify-content:center}
.login-or{font-size:11px;color:#b89fc2}.login-or b{font-weight:400;color:#e7c993}
.tg-off{font-size:11px;color:#9d86a8}
.welcome-modal.tg-pending .login-tg{display:none}
.bind-hint{position:fixed;top:calc(var(--edge-top,0px) + 60px);right:calc(var(--edge-right,0px) + 176px);z-index:7;display:flex;align-items:center;gap:5px;padding:5px 11px 5px 7px;border-radius:999px;border:1px solid #6fb6e6aa;background:linear-gradient(#1f3a55e6,#132438e6);color:#e6f4ff;font:400 12px var(--font-main);cursor:pointer;box-shadow:0 3px 10px #0a0412aa}
.bind-hint i{width:16px;height:16px;border-radius:50%;background:#2aa3df;box-shadow:inset 0 0 0 2px #fff6}
.bind-hint i::after{content:"";display:block;width:8px;height:7px;margin:4px 0 0 3px;background:#fff;clip-path:polygon(0 45%,100% 0,70% 100%,45% 65%)}
@media (orientation:landscape) and (max-height:500px){.bind-hint{top:calc(var(--edge-top,0px) + 58px);right:calc(var(--edge-right,0px) + 150px);font-size:11px;padding:4px 9px 4px 6px}}
.bind-dialog,.bind-choice{max-width:min(440px,calc(100vw - 32px));padding:22px 22px 18px;border-radius:16px;border:1px solid #c9a067aa;background:linear-gradient(#2e1a3e,#170c22);color:#fbeedd;font-family:var(--font-main);text-align:center}
.bind-dialog::backdrop,.bind-choice::backdrop{background:#0b0712b3}
.bind-dialog h3,.bind-choice h3{margin:0 0 8px;font:400 17px var(--font-title);color:#ffe1a6;letter-spacing:.1em}
.bind-dialog p,.bind-choice p{margin:0 0 12px;font-size:12.5px;line-height:1.6;color:#d8bbd7;text-align:left}
.bind-dialog .tg-widget-box{display:flex;justify-content:center;min-height:44px}
.bind-close{position:absolute;top:6px;right:6px;width:32px;height:32px;border:0;background:url('./assets/ui/hud/close.webp') center/contain no-repeat;cursor:pointer}
.bind-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.bind-cards button{display:flex;flex-direction:column;gap:3px;padding:12px 8px;border-radius:12px;border:1px solid #8d6aa088;background:#1b0f26;color:#fbeedd;cursor:pointer;font-family:var(--font-main)}
.bind-cards button:hover{border-color:#f0c482;box-shadow:0 0 12px #c27fe655}
.bind-cards b{font-weight:400;font-size:12px;color:#e7c993}.bind-cards span{font-size:16px}.bind-cards small{font-size:11px;color:#b89fc2}
.bind-choice .secondary-button{width:auto!important;padding:6px 16px}
@media (orientation:landscape) and (max-height:500px){
  .login-tg{margin:0 0 4px;padding:3px 8px;gap:1px}
  .login-tg .tg-widget-box{min-height:30px}
  .login-panel:has(.login-tg:not([hidden])) .avatar-note{display:none}
  .login-panel:has(.login-tg:not([hidden])) .avatar-option{height:64px!important}
}
/* P1-U5「加入旅人會」任務卡 */
.quest-entry.join-group{border-color:#6fb6e6aa!important;box-shadow:0 0 14px #2aa3df33}
.join-steps{margin:4px 0 8px;padding-left:20px;font-size:12px;line-height:1.7;color:#d8bbd7}
.quest-entry.join-group .button-row{flex-wrap:wrap;gap:6px}
.quest-entry.join-group .button-row button{width:auto!important}
/* 使用者 18:39：冒險面板中間換成霧棘森林的地圖影片（ChatGPT 圖 → Grok 影片，5 秒無縫循環、靜音；載入前先顯示圖） */
.adventure-illustration.has-media{position:relative;padding:0!important;aspect-ratio:2.1/1;height:auto!important;min-height:0!important;overflow:hidden;border-radius:12px;border:1px solid #c9a06766;background:#160f22 url('./assets/ui/adventure/mist-forest.jpg') center/cover no-repeat;box-shadow:inset 0 0 24px #0a0412cc}
.adventure-illustration.has-media video{display:block;width:100%;height:100%;object-fit:cover}
.adventure-illustration.has-media::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 30px 6px #12061ccc;border-radius:12px}
/* 第五波：寵物攻擊的數字（petAttack 事件） */
.pet-pop{position:fixed;z-index:30;transform:translate(-50%,-50%);pointer-events:none;font:400 15px var(--font-main);color:#d7b4ff;text-shadow:0 1px 2px #12061c,0 0 6px #6a2fa0;animation:pet-pop 1.05s ease-out forwards;white-space:nowrap}
.pet-pop:not(.mine){opacity:.7;font-size:12px}
.pet-pop.crit{font-size:20px;color:#ffd27a;text-shadow:0 1px 2px #12061c,0 0 8px #e08a20}
.pet-pop.heal{color:#9ff0b0;text-shadow:0 1px 2px #12061c,0 0 6px #2f8a4a}
.pet-pop.slow{font-size:12px;color:#9cd2ff;text-shadow:0 1px 2px #12061c,0 0 6px #2a6aa0}
@keyframes pet-pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
/* 副本卡片：左邊放副本的小影片，鑰匙圖示疊在右下角 */
.dungeon-media{position:relative;flex:none;width:96px;height:108px;border-radius:10px;overflow:hidden;border:1px solid #c9a06777;background:#160f22;box-shadow:inset 0 0 14px #0a0412cc}
.dungeon-media video{display:block;width:100%;height:100%;object-fit:cover}
.dungeon-media .dungeon-key{position:absolute;right:2px;bottom:2px;width:30px!important;height:30px!important;filter:drop-shadow(0 1px 3px #000)}
.dungeon-card.hard .dungeon-media{border-color:#d0404acc}
@media (orientation:landscape) and (max-height:500px){.dungeon-media{width:72px;height:84px}}
.dungeon-card:has(.dungeon-media){grid-template-columns:96px 1fr}
@media (orientation:landscape) and (max-height:500px){.dungeon-card:has(.dungeon-media){grid-template-columns:72px 1fr}}