/* ===== 角頭霸業 — 介面樣式 ===== */
:root{
  --bg:#08070a;--panel:#141217;--panel2:#1c1920;--line:#4a3a1c;--line2:#2a2530;
  --gold:#e9b949;--gold-hi:#ffe7a3;--gold-lo:#8f6512;--gold-dk:#4a3005;
  --crimson:#b3141a;--crimson-hi:#ff5145;--money:#63d65c;--txt:#efe8d6;--dim:#a39c8c;
  --en:#ffcf3a;--st:#8fb8ee;--hp:#ff5a52;--xp:#55b0ff;
  --serif:"Noto Serif TC",serif;--kai:"LXGW WenKai TC","Noto Serif TC",serif;
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .9  0 0 0 0 .7  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;color:var(--txt);font-family:"Noto Sans TC",system-ui,sans-serif;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
body{background:var(--noise),radial-gradient(ellipse 120% 60% at 50% 120%,#1a0d06,transparent 60%),var(--bg);min-height:100vh}
::selection{background:rgba(233,185,73,.35)}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0c0b0e}::-webkit-scrollbar-thumb{background:linear-gradient(#6b4f17,#3b2a0a);border-radius:4px;border:1px solid #000}
#bgfx{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#bgfx .glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:drift 18s ease-in-out infinite alternate}
#bgfx .g1{width:520px;height:320px;left:-120px;top:-160px;background:#7a0f12}
#bgfx .g2{width:460px;height:300px;right:-140px;top:-120px;background:#6b4a0c;animation-delay:-6s}
#bgfx .g3{width:600px;height:260px;left:30%;bottom:-180px;background:#3c1608;animation-delay:-11s}
@keyframes drift{to{transform:translate(60px,30px) scale(1.1)}}
#sky{position:fixed;left:0;right:0;bottom:0;height:220px;opacity:.55;pointer-events:none;z-index:0}
#app{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:12px 12px 50px}
a{color:var(--gold);cursor:pointer;text-decoration:none;transition:color .15s}a:hover{color:var(--gold-hi)}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}
.dim{color:var(--dim)}.gold{color:var(--gold)}.green{color:var(--money)}.redt{color:var(--crimson-hi)}.kai{font-family:var(--kai)}
.small{font-size:12px;color:#cbc4b3}

/* ================= HEADER ================= */
.hdr-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:2px 2px 4px}
.brand{display:flex;align-items:center;gap:14px}
.seal{width:58px;height:58px;position:relative;transform:rotate(-5deg);flex:none;
  background:radial-gradient(circle at 35% 30%,#e8382c,#9b0f0f 60%,#6a0707);border-radius:8px;
  box-shadow:inset 0 0 0 3px #f3d7b0,inset 0 0 0 5px #9b0f0f,inset 0 0 14px rgba(0,0,0,.45),0 4px 14px rgba(179,20,26,.55),0 0 0 1px #000}
.seal span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--kai);font-weight:700;font-size:36px;color:#ffecd0;text-shadow:0 2px 0 #5a0505}
.seal::after{content:"";position:absolute;inset:0;border-radius:8px;background:var(--noise);mix-blend-mode:overlay;opacity:.9}
.logo{font-family:var(--kai);font-weight:700;font-size:40px;letter-spacing:8px;line-height:1;
  background:linear-gradient(180deg,#fffbe9 0%,#ffe08a 30%,#c98d1b 50%,#f6d47c 66%,#9b6a12 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #1a0f00) drop-shadow(0 0 14px rgba(233,185,73,.3))}
.logo-sub{display:flex;align-items:center;gap:8px;font-size:9.5px;letter-spacing:6px;color:#c9a35a;margin-top:6px;font-weight:700}
.logo-sub i{flex:1;height:1px;min-width:18px;background:linear-gradient(90deg,transparent,#c9a35a,transparent)}
.who{display:flex;align-items:center;gap:10px;cursor:pointer;padding:5px 16px 5px 5px;border-radius:40px;transition:.2s var(--ease);
  background:linear-gradient(180deg,rgba(60,44,14,.7),rgba(20,16,10,.85));box-shadow:inset 0 0 0 1px rgba(233,185,73,.35),0 0 0 1px #000,0 6px 16px rgba(0,0,0,.5)}
.who:hover{box-shadow:inset 0 0 0 1px var(--gold),0 0 0 1px #000,0 0 18px rgba(233,185,73,.25)}
.who .nm{font-weight:900;font-size:14.5px}.who .tt{font-size:11px;color:var(--dim)}

.statbar{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr 1fr 1.35fr 78px;margin-top:10px;border-radius:10px;overflow:hidden;position:relative;
  background:var(--noise),linear-gradient(180deg,#221e26 0%,#141217 55%,#0e0d10 100%);
  box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.28),inset 0 1px 0 rgba(255,230,170,.12),0 10px 28px rgba(0,0,0,.6)}
.statbar::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}
.stat{display:flex;gap:9px;align-items:flex-start;padding:9px 10px 8px;position:relative;min-width:0}
.stat+.stat::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:linear-gradient(transparent,rgba(233,185,73,.3),transparent)}
.stat.click{cursor:pointer;transition:background .2s}.stat.click:hover{background:radial-gradient(ellipse at 50% 0,rgba(233,185,73,.12),transparent 70%)}
.si{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:15px;margin-top:2px;
  background:radial-gradient(circle at 35% 30%,#3c3542,#141217);box-shadow:inset 0 0 0 1px rgba(233,185,73,.45),0 2px 6px rgba(0,0,0,.6)}
.sc{min-width:0;flex:1}
.stat .lb{font-size:11px;color:var(--dim);white-space:nowrap;letter-spacing:1px}.stat .lb span{letter-spacing:0;opacity:.75}
.stat .v{font-size:17px;font-weight:900;white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.25;color:#fff}
.stat .sb{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-cash .v{color:var(--money);text-shadow:0 0 12px rgba(99,214,92,.25)}
.mbar{height:7px;background:#050406;border-radius:4px;margin:4px 0 2px;overflow:hidden;box-shadow:inset 0 1px 2px #000,0 0 0 1px rgba(255,255,255,.06);position:relative}
.mbar i{display:block;height:100%;border-radius:4px;transition:width .5s var(--ease);position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 55%),var(--c,#fff);box-shadow:0 0 8px var(--c,#fff)}
.mbar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(0,0,0,.45) 9px 10px);pointer-events:none}
.s-hp .mbar i{--c:var(--hp)}.s-en .mbar i{--c:var(--en)}.s-st .mbar i{--c:var(--st)}.s-xp .mbar i{--c:var(--xp)}
.lvmedal{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,rgba(122,15,18,.5),transparent 70%)}
.medal{width:58px;height:58px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
  background:radial-gradient(circle at 40% 30%,#ffeeb0,#e0a92e 40%,#8a5b0b 75%,#5a3a05);box-shadow:0 0 0 2px #2a1a02,0 0 0 4px #c9932a,0 0 0 5px #000,0 4px 14px rgba(0,0,0,.7),inset 0 -4px 8px rgba(0,0,0,.35)}
.medal::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px dashed rgba(70,40,0,.55)}
.medal small{font-size:8px;font-weight:900;color:#4a2c00;letter-spacing:1px;line-height:1}
.medal b{font-family:var(--serif);font-size:22px;line-height:1;color:#3a2100;text-shadow:0 1px 0 rgba(255,240,200,.7)}
@media(max-width:780px){.statbar{grid-template-columns:62px repeat(3,minmax(0,1fr))}.lvmedal{grid-column:1;grid-row:1/3;order:-1}.medal{width:48px;height:48px}.medal b{font-size:18px}.stat{padding:8px 7px}.stat .v{font-size:14.5px;overflow:hidden;text-overflow:ellipsis}.stat .v span{display:none}.stat:nth-child(-n+3){border-bottom:1px solid rgba(233,185,73,.12)}.stat::before{display:none}#toasts{left:14px;max-width:none}.logo{font-size:30px;letter-spacing:4px}.seal{width:46px;height:46px}.seal span{font-size:28px}.si{display:none}}

/* ================= NAV ================= */
nav{display:flex;margin-top:10px;border-radius:10px;overflow-x:auto;scrollbar-width:none;position:relative;
  background:var(--noise),linear-gradient(180deg,#1d1a21,#0f0e11);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.22),0 8px 20px rgba(0,0,0,.5)}
nav::-webkit-scrollbar{display:none}
nav a{flex:1 0 auto;min-width:68px;text-align:center;padding:8px 8px 7px;color:#c9c1af;font-weight:700;font-size:12.5px;letter-spacing:1px;position:relative;transition:.2s var(--ease)}
nav a+a::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:linear-gradient(transparent,rgba(233,185,73,.25),transparent)}
nav a .ni{display:block;font-size:19px;line-height:1.25;filter:grayscale(.55) brightness(.9);transition:.2s var(--ease)}
nav a:hover{color:#fff}nav a:hover .ni{filter:none;transform:translateY(-2px)}
nav a.on{color:var(--gold-hi);background:radial-gradient(ellipse 80% 90% at 50% 100%,rgba(196,22,28,.35),transparent 70%),linear-gradient(180deg,rgba(233,185,73,.14),transparent)}
nav a.on .ni{filter:drop-shadow(0 0 6px rgba(255,200,90,.6))}
nav a.on::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);box-shadow:0 0 10px var(--gold)}
nav .bdg{position:absolute;top:4px;right:8px;background:linear-gradient(#ff5a4e,#b3141a);color:#fff;font-size:10px;font-weight:900;border-radius:9px;padding:0 5px;min-width:17px;line-height:17px;box-shadow:0 0 0 1px #000,0 0 10px rgba(255,60,50,.7);animation:bump 2s infinite}
@keyframes bump{0%,90%,100%{transform:scale(1)}95%{transform:scale(1.2)}}

/* ================= BANNER ================= */
.banner{margin-top:10px;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;position:relative;overflow:hidden;
  background:var(--noise),radial-gradient(ellipse at 20% 50%,#8e1a14,transparent 60%),linear-gradient(90deg,#3b0a0a,#5c1210 50%,#2a0707);
  box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.45),inset 0 0 0 3px rgba(0,0,0,.4),inset 0 0 0 4px rgba(233,185,73,.15),0 8px 20px rgba(0,0,0,.5)}
.banner .lan{font-size:30px;transform-origin:50% 0;animation:swing 3s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,90,40,.7))}
@keyframes swing{50%{transform:rotate(6deg)}}
.banner .bx{flex:1}.banner .t{font-weight:900;color:#ffd9a0;font-size:16px;font-family:var(--serif);letter-spacing:2px;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.banner .s{font-size:12px;color:#f0cfc4}
.banner::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(90deg,transparent,rgba(255,230,180,.18),transparent);transform:skewX(-20deg);animation:sheen 5s infinite}
@keyframes sheen{0%,70%{left:-80px}100%{left:110%}}

/* ================= BUTTONS ================= */
.btn{--t:#fff6cf;--a:#f6d376;--b:#d79f25;--c:#a9720f;--d:#e6b445;--edge:#4a3005;--rim:rgba(255,244,200,.7);--fg:#2b1900;--ts:rgba(255,240,200,.65);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;overflow:hidden;
  padding:8px 16px;border:0;border-radius:5px;white-space:nowrap;cursor:pointer;
  font-family:var(--serif);font-weight:900;font-size:13.5px;letter-spacing:1px;color:var(--fg);text-shadow:0 1px 0 var(--ts);
  background:linear-gradient(180deg,var(--t) 0%,var(--a) 16%,var(--b) 50%,var(--c) 51%,var(--d) 100%);
  box-shadow:0 0 0 1px var(--edge),inset 0 0 0 1px var(--rim),inset 0 -3px 6px rgba(60,30,0,.28),0 3px 0 var(--edge),0 6px 14px rgba(0,0,0,.55);
  transition:transform .08s,filter .2s,box-shadow .2s;top:0}
.btn::before{content:"";position:absolute;inset:3px;border-radius:3px;border:1px solid rgba(255,255,255,.18);pointer-events:none}
.btn::after{content:"";position:absolute;top:-10%;bottom:-10%;width:40%;left:-60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-22deg);transition:left .55s var(--ease);pointer-events:none}
.btn:hover{filter:brightness(1.08) saturate(1.08);box-shadow:0 0 0 1px var(--edge),inset 0 0 0 1px var(--rim),inset 0 -3px 6px rgba(60,30,0,.28),0 3px 0 var(--edge),0 6px 18px rgba(0,0,0,.55),0 0 16px rgba(233,185,73,.35)}
.btn:hover::after{left:130%}
.btn:active{transform:translateY(2px);box-shadow:0 0 0 1px var(--edge),inset 0 0 0 1px var(--rim),inset 0 2px 6px rgba(0,0,0,.3),0 1px 0 var(--edge),0 2px 6px rgba(0,0,0,.5)}
.btn:disabled{filter:grayscale(1) brightness(.5);cursor:not-allowed;transform:none}.btn:disabled::after{display:none}
.btn.red{--t:#ffb2a2;--a:#ef4a3a;--b:#b8161a;--c:#8a0c10;--d:#c0241f;--edge:#3a0303;--rim:rgba(255,200,150,.55);--fg:#fff4dd;--ts:rgba(60,0,0,.6)}
.btn.red:hover{box-shadow:0 0 0 1px var(--edge),inset 0 0 0 1px var(--rim),0 3px 0 var(--edge),0 6px 18px rgba(0,0,0,.55),0 0 16px rgba(255,70,50,.45)}
.btn.dark{--t:#5c5764;--a:#3f3a46;--b:#2a262f;--c:#1c1a20;--d:#2c2832;--edge:#000;--rim:rgba(233,185,73,.42);--fg:#f1e3bd;--ts:rgba(0,0,0,.6)}
.btn.green{--t:#c9f7c6;--a:#6fd472;--b:#2e9b3a;--c:#1d6f27;--d:#3aa346;--edge:#0b3510;--rim:rgba(220,255,210,.55);--fg:#fff;--ts:rgba(0,40,0,.55)}
.btn.sm{padding:5px 10px;font-size:12px;letter-spacing:.5px}.btn.sm::before{inset:2px}
.btn.lg{padding:12px 28px;font-size:17px;letter-spacing:3px}
.btn.block{width:100%}
.seg{display:inline-flex;padding:3px;gap:2px;border-radius:7px;background:#0a090c;box-shadow:inset 0 1px 3px #000,0 0 0 1px rgba(233,185,73,.22)}
.seg button{background:transparent;color:#a9a19a;border:0;border-radius:5px;padding:4px 10px;font-size:12px;font-weight:700;transition:.2s}
.seg button:hover{color:#fff;background:rgba(255,255,255,.05)}
.seg button.on{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 60%),var(--sc,#555);box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.2),0 0 10px var(--sc,#555);text-shadow:0 1px 1px rgba(0,0,0,.5)}

/* ================= PANELS ================= */
main{margin-top:10px}
main>*{animation:fadeUp .3s var(--ease) both}
main>*:nth-child(2){animation-delay:.04s}main>*:nth-child(3){animation-delay:.08s}main>*:nth-child(4){animation-delay:.12s}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}}
.panel{position:relative;margin-bottom:12px;border-radius:10px;
  background:var(--noise),linear-gradient(180deg,var(--panel2),var(--panel) 40%,#100f13);
  box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.24),inset 0 1px 0 rgba(255,230,170,.08),0 12px 30px rgba(0,0,0,.55)}
.panel::before,.panel::after{content:"";position:absolute;width:16px;height:16px;pointer-events:none;border:2px solid var(--gold);opacity:.85;z-index:2}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-radius:0 0 10px 0}
.panel>.ph{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;position:relative;border-radius:10px 10px 0 0;
  background:linear-gradient(90deg,rgba(150,20,22,.35),rgba(233,185,73,.08) 45%,transparent 85%)}
.panel>.ph::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;background:linear-gradient(90deg,var(--gold),rgba(233,185,73,.25) 60%,transparent)}
.panel>.ph h3{margin:0;font-family:var(--serif);font-size:16.5px;letter-spacing:2px;
  color:#f7d98a;text-shadow:0 1px 0 #000,0 0 12px rgba(233,185,73,.35);display:flex;align-items:center;gap:8px}
.panel>.ph h3::before{content:"";width:9px;height:9px;transform:rotate(45deg);background:linear-gradient(135deg,#ff6a5a,#9b0f0f);box-shadow:0 0 0 1px #000,0 0 8px rgba(255,80,60,.6);flex:none}
.panel>.pb{padding:13px 16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:780px){.grid2,.grid3{grid-template-columns:1fr}}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tiles>div{position:relative;padding:9px 11px 8px;border-radius:7px;background:linear-gradient(180deg,#19171d,#0d0c10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 0 1px #000}
.tiles>div::before{content:"";position:absolute;left:10px;right:10px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(233,185,73,.55),transparent)}
.tiles small{display:block;color:var(--dim);font-size:11px;letter-spacing:1px}.tiles b{font-size:18px;font-variant-numeric:tabular-nums;font-family:var(--serif)}
@media(max-width:780px){.tiles{grid-template-columns:1fr 1fr}}
.chip{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:2px 10px;font-size:12px;margin:2px 4px 2px 0;background:linear-gradient(180deg,#26222b,#17151a);box-shadow:inset 0 0 0 1px rgba(233,185,73,.3)}
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border-radius:12px;font-size:11px;font-weight:700;color:#fff;white-space:nowrap;
  background-image:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%)!important;box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.18);text-shadow:0 1px 1px rgba(0,0,0,.5)}
.stars{color:var(--gold);font-size:12px;letter-spacing:1px;text-shadow:0 0 6px rgba(233,185,73,.5)}.stars i{color:#3d3743;font-style:normal;text-shadow:none}

/* ================= ART PLACEHOLDERS ================= */
.art{position:relative;overflow:hidden;flex:none}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.ph{background:radial-gradient(circle at 32% 25%,hsl(var(--h) 50% 34%),hsl(var(--h) 45% 12%) 72%);display:flex;align-items:center;justify-content:center;color:#fff}
.ph::after{content:"";position:absolute;inset:0;background:var(--noise);mix-blend-mode:overlay;pointer-events:none}
.ph .ph-g{line-height:1;filter:drop-shadow(0 3px 5px rgba(0,0,0,.65));position:relative;z-index:1}
.art-scene{width:100%;aspect-ratio:16/9;border-radius:8px;font-size:68px;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.35)}
.art-scene.ph{background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.82)),radial-gradient(circle at 68% 30%,hsl(var(--h) 60% 32%),hsl(var(--h) 40% 7%) 75%)}
.art-scene .ph-l{position:absolute;left:16px;bottom:12px;z-index:1;font-family:var(--kai);font-size:24px;font-weight:700;letter-spacing:3px;color:#ffe9b8;text-shadow:0 2px 8px #000}
.ph-tag{position:absolute;top:8px;right:8px;z-index:1;font-size:10px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.2);padding:1px 7px;border-radius:4px;color:#ccc}
.art-card{width:100%;aspect-ratio:4/3;border-radius:8px;font-size:42px}
.art-item{width:50px;height:50px;border-radius:9px;font-size:26px;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.4),inset 0 0 14px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.5)}
.art-item.sm{width:32px;height:32px;font-size:17px;border-radius:7px}
.art-item.lg{width:76px;height:76px;font-size:40px;border-radius:12px}
.art-icon{width:22px;height:22px;border-radius:50%;font-size:13px}
.art-av{width:44px;height:44px;border-radius:50%;font-size:20px;font-family:var(--kai);font-weight:700;box-shadow:0 0 0 2px #1a1206,0 0 0 3.5px #c9932a,0 0 0 4.5px #000,0 4px 10px rgba(0,0,0,.6)}
.art-av.sm{width:32px;height:32px;font-size:15px;box-shadow:0 0 0 1.5px #1a1206,0 0 0 2.5px #c9932a,0 0 0 3.5px #000}
.art-av.lg{width:84px;height:84px;font-size:38px}
.art-av.xl{width:112px;height:112px;font-size:52px;box-shadow:0 0 0 3px #1a1206,0 0 0 6px #d9a33a,0 0 0 7px #000,0 0 24px rgba(233,185,73,.35),0 8px 18px rgba(0,0,0,.6)}

/* ================= CHEVRONS ================= */
.chev{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.chev a{flex:1 1 120px;padding:8px 22px 8px 20px;position:relative;font-family:var(--serif);font-weight:900;font-size:13.5px;line-height:1.25;letter-spacing:1px;color:var(--gold);
  background:var(--noise),linear-gradient(180deg,#4a3712,#22190a 55%,#1a1307);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);transition:.2s}
.chev a:first-child{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);padding-left:14px}
.chev a:hover{filter:brightness(1.2)}
.chev a small{display:block;font-family:"Noto Sans TC";font-weight:400;font-size:11px;color:#d8c38a;letter-spacing:0}
.chev a.on{background:linear-gradient(180deg,#fff3c4,#f2c55a 30%,#c68a16 52%,#e3ad3c);color:#2a1800;text-shadow:0 1px 0 rgba(255,240,200,.6)}.chev a.on small{color:#5a3e00}
.chev a.lock{background:linear-gradient(180deg,#2b282f,#1a181d);color:#6d6870;cursor:not-allowed}.chev a.lock small{color:#57525b}

/* ================= JOBS / ROWS ================= */
.job{display:grid;grid-template-columns:50px 2.2fr 1.3fr 1.8fr 104px;gap:12px;align-items:center;padding:11px 16px;position:relative;transition:background .2s}
.job+.job{border-top:1px solid rgba(255,255,255,.05)}
.job:hover,.rowi:hover,.opp:hover,.shop:hover{background:linear-gradient(90deg,rgba(233,185,73,.08),transparent 70%)}
.job:hover::before,.opp:hover::before,.shop:hover::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.job .jn{font-weight:900;font-size:15px;letter-spacing:.5px}
.prog{height:6px;background:#050406;border-radius:3px;margin-top:5px;overflow:hidden;width:92%;box-shadow:inset 0 1px 2px #000,0 0 0 1px rgba(255,255,255,.05)}
.prog i{display:block;height:100%;border-radius:3px;background:linear-gradient(180deg,rgba(255,255,255,.4),transparent 60%),linear-gradient(90deg,#b3141a,#ff9d2e);box-shadow:0 0 6px rgba(255,120,40,.6)}
.pay{color:var(--money);font-weight:900;font-variant-numeric:tabular-nums;font-size:15px;text-shadow:0 0 10px rgba(99,214,92,.25)}
.req{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.ecost{display:inline-flex;align-items:center;gap:2px;color:#2a1a00;font-weight:900;font-size:12px;margin-right:4px;white-space:nowrap;padding:2px 8px;border-radius:10px;background:linear-gradient(180deg,#ffe69a,#e0a92e);box-shadow:0 0 0 1px #4a3005}
.ri{display:inline-flex;flex-direction:column;align-items:center}
.ri .x{font-size:11px;color:#bbb;line-height:1.2;font-weight:700}.ri.miss .art{box-shadow:0 0 0 1px #000,inset 0 0 0 2px var(--crimson-hi);filter:grayscale(.7) brightness(.75)}.ri.miss .x{color:var(--crimson-hi)}
@media(max-width:780px){.job{grid-template-columns:42px 1fr 1fr}.job .req{grid-column:2/4}.job>div:last-child{grid-column:1/4}.job .btn{width:100%}}
.rowi{display:flex;align-items:center;gap:12px;padding:10px 16px;position:relative;transition:background .2s}
.rowi+.rowi{border-top:1px solid rgba(255,255,255,.05)}
.rowi .grow{flex:1;min-width:0}.rowi .nm{font-weight:900}
.opp{display:grid;grid-template-columns:46px 2fr .8fr .8fr 1.1fr 100px;gap:12px;align-items:center;padding:9px 16px;position:relative;transition:background .2s}
.opp+.opp{border-top:1px solid rgba(255,255,255,.05)}
@media(max-width:780px){.opp{grid-template-columns:46px 1fr 1fr}}
.shop{display:grid;grid-template-columns:50px 1.8fr 1fr .8fr 1fr 1.9fr;gap:10px;align-items:center;padding:9px 16px;position:relative;transition:background .2s}
.shop+.shop{border-top:1px solid rgba(255,255,255,.05)}
.shop .nm{font-weight:900;font-size:14.5px}
@media(max-width:780px){.shop{grid-template-columns:50px 1fr 1fr}.shop>div:last-child{grid-column:1/4}}
.log{max-height:380px;overflow:auto;font-size:13px;padding:4px 0}
.log div{padding:7px 16px;border-bottom:1px solid rgba(255,255,255,.04);position:relative}
.log div::before{content:"";position:absolute;left:6px;top:14px;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}
.log .tm{color:#6f6a74;font-size:11px;margin-right:8px;font-variant-numeric:tabular-nums}
.log .good{color:#c9efbd}.log .bad{color:#ffb9ae}.log .info{color:#cfc8ba}.log .event{color:#ffdb8f}
.crewgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px;max-height:320px;overflow:auto;padding:3px}
.crewgrid>div{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;padding:9px 3px 7px;border-radius:8px;background:linear-gradient(180deg,#1b1920,#0e0d11);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 0 1px #000;transition:.2s}
.crewgrid>div:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(233,185,73,.4),0 0 0 1px #000}
.offi{display:flex;gap:12px;align-items:center;padding:11px;border-radius:9px;background:linear-gradient(180deg,#19171d,#0e0d11);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 0 1px #000}
.offi.own{background:linear-gradient(100deg,rgba(120,85,15,.35),#0e0d11 70%);box-shadow:inset 0 0 0 1px rgba(233,185,73,.55),0 0 0 1px #000,0 0 14px rgba(233,185,73,.12)}
.skill{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.skill:last-child{border-bottom:0}

/* ================= RESULT / FX ================= */
.result{display:flex;gap:14px;align-items:center;margin-bottom:12px;padding:12px 16px;border-radius:10px;position:relative;overflow:hidden;animation:pop .3s var(--ease)}
.result::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.result.good{background:var(--noise),linear-gradient(90deg,rgba(40,110,35,.35),rgba(12,22,11,.9) 60%);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(99,214,92,.4),0 8px 20px rgba(0,0,0,.4)}
.result.good::before{background:linear-gradient(#a6f59e,#2f9a2a)}
.result.bad{background:var(--noise),linear-gradient(90deg,rgba(150,20,20,.4),rgba(24,8,8,.9) 60%);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(255,81,69,.45),0 8px 20px rgba(0,0,0,.4);animation:pop .3s,shake .4s .05s}
.result.bad::before{background:linear-gradient(#ff8b7f,#9b0f0f)}
.result.warn{background:var(--noise),linear-gradient(90deg,rgba(140,100,15,.35),rgba(22,17,8,.9) 60%);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.45),0 8px 20px rgba(0,0,0,.4)}
.result.warn::before{background:linear-gradient(#ffe39a,#a9720f)}
.result p{margin:2px 0}.result .big{font-size:17px;font-weight:900;font-family:var(--serif);letter-spacing:1px}
.good .big{color:#9df094}.bad .big{color:#ff8478}.warn .big{color:var(--gold-hi)}
@keyframes pop{from{transform:scale(.97);opacity:0}}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.float{position:fixed;z-index:80;pointer-events:none;font-weight:900;font-size:18px;font-family:var(--serif);text-shadow:0 2px 0 #000,0 0 10px currentColor;animation:floatup 1.2s var(--ease) forwards}
@keyframes floatup{0%{transform:translateY(0) scale(.8);opacity:0}15%{transform:translateY(-6px) scale(1.15);opacity:1}100%{transform:translateY(-54px) scale(1);opacity:0}}
.dice{font-size:44px;letter-spacing:4px;line-height:1;text-shadow:0 0 10px rgba(255,255,255,.3)}

/* ================= FORMS ================= */
input,textarea,select{background:linear-gradient(180deg,#09080b,#121015);color:var(--txt);border:0;border-radius:7px;padding:9px 11px;font-family:inherit;font-size:14px;outline:none;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 0 0 1px rgba(233,185,73,.28);transition:box-shadow .2s}
input:focus,select:focus,textarea:focus{box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 0 0 1px var(--gold),0 0 14px rgba(233,185,73,.25)}
input[type=checkbox]{width:18px;height:18px;accent-color:#d9a127;vertical-align:-3px;margin-right:6px;box-shadow:none}
textarea{width:100%;height:86px;font-size:11px}
.field{margin:10px 0}.field label{display:block;font-size:12px;color:var(--dim);margin-bottom:5px;letter-spacing:1px}.field input,.field select{width:100%}

/* ================= MAP ================= */
.mapbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;position:relative}
.mapbar::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;background:linear-gradient(90deg,var(--gold),rgba(233,185,73,.2) 60%,transparent)}
.mapwrap{position:relative;margin:10px;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.3)}
.mapwrap::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 60px rgba(0,0,0,.75);border-radius:8px}
svg.cmap{width:100%;aspect-ratio:4/3;display:block;background:#0f1418;touch-action:none;cursor:grab;user-select:none}
svg.cmap.drag{cursor:grabbing}
svg.twmap{width:100%;max-height:660px;display:block;border-radius:8px;background:radial-gradient(circle at 50% 40%,#10222f,#04070a);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.3)}
.mapctl{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.mapctl button{width:36px;height:36px;border-radius:50%;border:0;color:var(--gold-hi);font-size:17px;font-weight:900;
  background:radial-gradient(circle at 40% 30%,#3a3540,#141217);box-shadow:0 0 0 1px #000,inset 0 0 0 1.5px rgba(233,185,73,.55),0 4px 10px rgba(0,0,0,.6);transition:.15s}
.mapctl button:hover{transform:scale(1.08);box-shadow:0 0 0 1px #000,inset 0 0 0 1.5px var(--gold-hi),0 0 12px rgba(233,185,73,.4)}
.maploc{position:absolute;left:10px;bottom:10px;z-index:2;padding:5px 11px;border-radius:20px;font-size:12px;background:rgba(10,9,12,.88);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.35);backdrop-filter:blur(3px)}
.poi{cursor:pointer}.poi .ring{transition:stroke-width .15s}.poi:hover .ring{stroke-width:8}
.pulse{animation:pulse 1.4s infinite}@keyframes pulse{50%{opacity:.25}}
#pmark{transition:transform .65s cubic-bezier(.4,.1,.2,1)}
.hpbar{height:11px;background:#050406;border-radius:6px;overflow:hidden;margin:5px 0;box-shadow:inset 0 1px 3px #000,0 0 0 1px rgba(255,255,255,.08)}
.hpbar i{display:block;height:100%;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 60%),linear-gradient(90deg,#b3141a,#ff7a3a);box-shadow:0 0 8px rgba(255,90,40,.6)}
.mapgrid{display:grid;grid-template-columns:1.7fr 1fr}.mapgrid.tw{grid-template-columns:1.2fr 1fr}
@media(max-width:780px){.mapgrid,.mapgrid.tw{grid-template-columns:1fr}}

/* ================= MODAL ================= */
#modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:14px;background:radial-gradient(circle at 50% 40%,rgba(30,10,8,.75),rgba(0,0,0,.9));backdrop-filter:blur(3px);animation:fade .25s}
@keyframes fade{from{opacity:0}}
.mbox{position:relative;max-width:520px;width:100%;max-height:92vh;overflow:auto;border-radius:12px;animation:modalIn .35s var(--ease);
  background:var(--noise),linear-gradient(180deg,#261f14,#141217 26%,#0f0e12);
  box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.55),inset 0 0 0 4px rgba(0,0,0,.5),inset 0 0 0 5px rgba(233,185,73,.18),0 0 60px rgba(233,185,73,.12),0 30px 80px rgba(0,0,0,.85)}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.97)}}
.mbox.wide{max-width:720px}
.mbox .mh{padding:16px 18px 0}.mbox .mb{padding:14px 20px 20px}
.mbox h2{margin:0 0 10px;font-family:var(--serif);font-size:21px;letter-spacing:2px;padding-bottom:9px;position:relative;
  color:#f7d98a;text-shadow:0 2px 0 #000,0 0 14px rgba(233,185,73,.35)}
.mbox h2::after{content:"";position:absolute;left:0;right:30%;bottom:0;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.mbox .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.mb{counter-reset:ch}
.choice{counter-increment:ch;display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin:8px 0;padding:11px 14px 11px 12px;border:0;border-radius:9px;color:var(--txt);position:relative;transition:.2s var(--ease);
  background:linear-gradient(180deg,#24202a,#16141a);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.28),0 4px 10px rgba(0,0,0,.35)}
.choice::before{content:counter(ch);flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:900;font-size:14px;color:#2a1800;
  background:radial-gradient(circle at 40% 30%,#fff0b8,#d9a127 60%,#8a5b0b);box-shadow:0 0 0 1px #000,inset 0 -2px 3px rgba(0,0,0,.3)}
.choice::after{content:"›";margin-left:auto;font-size:22px;color:var(--gold);opacity:.5;transition:.2s}
.choice span.cbody{flex:1}
.choice b{font-size:15px;letter-spacing:.5px}.choice small{display:block;color:var(--dim);margin-top:2px;font-size:12px}
.choice:hover:not(:disabled){transform:translateX(4px);background:linear-gradient(90deg,rgba(120,85,15,.45),#16141a 80%);box-shadow:0 0 0 1px #000,inset 0 0 0 1px var(--gold),0 0 16px rgba(233,185,73,.18)}
.choice:hover:not(:disabled)::after{opacity:1;transform:translateX(3px)}
.choice:disabled{opacity:.42;cursor:not-allowed}
.opt{display:block;position:relative;margin:7px 0;padding:10px 12px;border-radius:9px;cursor:pointer;transition:.2s var(--ease);
  background:linear-gradient(180deg,#1d1a21,#121015);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(255,255,255,.08)}
.opt:hover{box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.5)}
.opt.on{background:linear-gradient(100deg,rgba(130,92,15,.5),#121015 75%);box-shadow:0 0 0 1px #000,inset 0 0 0 1.5px var(--gold),0 0 16px rgba(233,185,73,.2)}
.opt.on::after{content:"✓";position:absolute;top:8px;right:10px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#2a1800;background:linear-gradient(#ffe69a,#d9a127)}
.opts2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.opts2 .opt{margin:0}
@media(max-width:560px){.opts2{grid-template-columns:1fr}}
.avpick{display:flex;gap:10px;flex-wrap:wrap}.avpick>div{cursor:pointer;border-radius:50%;padding:3px;transition:.2s;opacity:.65}.avpick>div:hover{opacity:1}.avpick>div.on{opacity:1;box-shadow:0 0 0 2px var(--gold-hi),0 0 14px rgba(233,185,73,.5)}
.steps{display:flex;gap:6px;margin-bottom:12px}.steps i{flex:1;height:4px;border-radius:2px;background:#2a262f}.steps i.on{background:linear-gradient(90deg,#b3141a,var(--gold));box-shadow:0 0 6px rgba(233,185,73,.5)}
.warnbox{border-radius:10px;padding:13px 16px;margin:10px 0;background:var(--noise),linear-gradient(180deg,rgba(120,15,15,.35),rgba(20,8,8,.9));box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(255,81,69,.45)}
.warnbox li{margin:6px 0}
.story{font-family:var(--kai);font-size:16.5px;line-height:1.95;color:#efe4c6}

/* ================= TOAST / FOOTER ================= */
#toasts{position:fixed;right:14px;bottom:14px;z-index:70;display:flex;flex-direction:column;gap:8px;max-width:340px}
.toast{padding:9px 14px 9px 16px;border-radius:8px;font-size:13px;position:relative;animation:toastIn .35s var(--ease);
  background:var(--noise),linear-gradient(90deg,#2a2112,#16141a);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.5),0 10px 24px rgba(0,0,0,.65)}
.toast::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--gold);box-shadow:0 0 8px var(--gold)}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}}
footer{margin-top:20px;text-align:center;font-size:11px;color:#6d6672;line-height:1.8}
footer a{color:#998c6c}
.fdeco{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gold-lo);margin-bottom:6px}
.fdeco i{width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-lo),transparent)}

/* ================= v0.4 擴充 ================= */
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.subtabs a{padding:7px 16px;border-radius:20px;font-weight:700;font-size:13px;color:#cfc7b4;background:linear-gradient(180deg,#221e27,#141217);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.25);transition:.2s var(--ease)}
.subtabs a:hover{color:#fff;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.55)}
.subtabs a.on{color:#2a1800;background:linear-gradient(180deg,#fff0b8,#e3ad3c 55%,#c68a16);box-shadow:0 0 0 1px #4a3005,inset 0 0 0 1px rgba(255,244,200,.6),0 0 12px rgba(233,185,73,.35);text-shadow:0 1px 0 rgba(255,240,200,.6)}
.sep{height:1px;margin:14px 0;background:linear-gradient(90deg,transparent,rgba(233,185,73,.4),transparent)}
.banner.jailb{background:var(--noise),linear-gradient(90deg,#141a22,#22303d 50%,#10151b);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(120,170,220,.45),0 8px 20px rgba(0,0,0,.5)}
.banner.jailb .t{color:#bcd7f2}
.endgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.endcard .art-card{font-size:30px}.endcard:not(.got){opacity:.55}
.endcard.got .art{box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.6),0 0 12px rgba(233,185,73,.25)}
@media(max-width:560px){.endgrid{grid-template-columns:repeat(2,1fr)}}
.gangsgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:780px){.gangsgrid{grid-template-columns:1fr}}
.gcard{position:relative;padding:14px;border-radius:10px;background:var(--noise),linear-gradient(160deg,color-mix(in srgb,var(--gc) 22%,#141217),#121015 60%);box-shadow:0 0 0 1px #000,inset 0 0 0 1px color-mix(in srgb,var(--gc) 60%,transparent),0 10px 24px rgba(0,0,0,.5)}
.gcard::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:var(--gc);box-shadow:0 0 10px var(--gc)}
.gtop{display:flex;gap:12px;align-items:center}
.gacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.crewgrid>div{position:relative}.crewgrid>div.hurt,.crewgrid>div.jail{opacity:.55}.crewgrid>div.post{box-shadow:inset 0 0 0 1px rgba(233,185,73,.5),0 0 0 1px #000}
.cst{position:absolute;top:4px;right:6px;font-style:normal;font-size:13px}
.achic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;background:radial-gradient(circle at 40% 30%,#3a3540,#141217);box-shadow:inset 0 0 0 1px rgba(233,185,73,.45)}
.rowi.locked{opacity:.5}
.colgrp{margin-bottom:10px}.colrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.colit{display:flex;flex-direction:column;align-items:center;gap:3px;width:66px;font-size:11px;text-align:center}.colit.off{opacity:.45}
.fungrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:780px){.fungrid{grid-template-columns:1fr 1fr}}@media(max-width:480px){.fungrid{grid-template-columns:1fr}}
.fun{border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#1d1a21,#121015);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.25);transition:.2s var(--ease)}
.fun:hover{transform:translateY(-3px);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.55),0 10px 20px rgba(0,0,0,.5)}
.fun .art-card{border-radius:0;aspect-ratio:16/9}
.mgarea{position:relative;height:300px;border-radius:10px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#3b1f4a,#130a1c);box-shadow:inset 0 0 0 1px rgba(233,185,73,.4)}
.bln{position:absolute;background:none;border:0;font-size:38px;cursor:crosshair;animation:bob 3s ease-in-out infinite;transition:transform .15s,opacity .2s;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.bln:hover{transform:scale(1.15)}.bln.popped{opacity:0;transform:scale(1.8);pointer-events:none}
@keyframes bob{50%{margin-top:-14px}}
.pachi{position:relative;height:270px;border-radius:10px;background:radial-gradient(circle at 50% 20%,#1f3a52,#0a121a);box-shadow:inset 0 0 0 1px rgba(233,185,73,.4);overflow:hidden}
.peg{position:absolute;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9aa7b3);box-shadow:0 0 6px rgba(160,200,255,.6)}
.ball{position:absolute;width:16px;height:16px;margin-left:-8px;margin-top:-8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7d0,#e9b949 60%,#8a5b0b);box-shadow:0 0 10px rgba(255,210,80,.9);transition:left .2s ease-out,top .2s ease-in;z-index:2}
.slot{position:absolute;bottom:6px;width:26px;margin-left:-13px;text-align:center;font-size:10px;font-weight:900;color:#cfd8df;padding:3px 0;border-radius:4px;background:rgba(255,255,255,.06)}
.slot.hit.show{color:#2a1800;background:linear-gradient(#ffe69a,#d9a127);box-shadow:0 0 10px rgba(233,185,73,.7)}
.track{position:relative;height:46px;margin:14px 0;border-radius:23px;background:linear-gradient(90deg,#3a0d0d,#1a1418 30%,#1a1418 70%,#3a0d0d);box-shadow:inset 0 2px 6px #000,0 0 0 1px rgba(233,185,73,.4);overflow:hidden}
.track .zone{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%)}
.track .zone.big{width:24%;background:rgba(233,185,73,.15)}.track .zone.small{width:8%;background:linear-gradient(#ffe69a,#d9a127);opacity:.75}
.needle{position:absolute;top:4px;bottom:4px;width:6px;margin-left:-3px;border-radius:3px;background:#fff;box-shadow:0 0 10px #fff}
.duelhead{display:flex;align-items:center;justify-content:space-around;gap:10px;margin:6px 0 12px}
.dcard{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;flex:1}
.vs{font-family:var(--serif);font-weight:900;font-size:30px;color:var(--crimson-hi);text-shadow:0 0 14px rgba(255,60,50,.6),0 2px 0 #000}
.duellog{max-height:260px;overflow:auto;padding:4px 2px}
.drow{opacity:0;animation:showUp .4s var(--ease) forwards;padding:8px 10px;margin:6px 0;border-radius:8px;font-size:13px;background:linear-gradient(90deg,rgba(233,185,73,.08),transparent);box-shadow:inset 3px 0 0 rgba(233,185,73,.5)}
.dhp{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);margin-top:3px}
.duelres{opacity:0;animation:showUp .5s var(--ease) forwards;margin-top:10px;text-align:center;padding:12px;border-radius:10px;font-family:var(--serif);font-size:22px;font-weight:900}
.duelres.win{color:#ffe08a;background:radial-gradient(circle,rgba(233,185,73,.25),transparent 70%);box-shadow:inset 0 0 0 1px rgba(233,185,73,.6)}
.duelres.lose{color:#ff8478;background:radial-gradient(circle,rgba(180,20,26,.25),transparent 70%);box-shadow:inset 0 0 0 1px rgba(255,81,69,.5)}
.duelres .small{font-family:"Noto Sans TC";font-weight:400;font-size:12px;margin-top:4px}

@keyframes showUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.art-card.ph{background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.8)),radial-gradient(circle at 65% 30%,hsl(var(--h) 55% 32%),hsl(var(--h) 40% 8%) 75%)}
.art-card .ph-l{position:absolute;left:12px;bottom:8px;z-index:1;font-family:var(--kai);font-size:16px;font-weight:700;letter-spacing:2px;color:#ffe9b8;text-shadow:0 2px 6px #000}

/* ================= v0.6 擴充 ================= */
nav{display:block;overflow:visible}
.navmain{display:flex;overflow-x:auto;scrollbar-width:none}.navmain::-webkit-scrollbar{display:none}
.navsub{display:flex;gap:4px;flex-wrap:wrap;padding:6px 8px 7px;border-top:1px solid rgba(233,185,73,.18);background:rgba(0,0,0,.25);border-radius:0 0 10px 10px}
nav .navsub a{flex:0 0 auto;min-width:0;padding:4px 12px;border-radius:14px;font-size:12.5px;border:0;color:#cfc7b4}
nav .navsub a::before{display:none}
nav .navsub a.on{color:#2a1800;background:linear-gradient(180deg,#fff0b8,#e3ad3c 55%,#c68a16);box-shadow:0 0 10px rgba(233,185,73,.35)}
nav .navsub a.on::after{display:none}
nav .navsub .bdg{position:relative;top:-1px;right:auto;margin-left:4px}
.sndbtn{margin-left:6px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(233,185,73,.4);font-size:14px;cursor:pointer}
.tutcard{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-bottom:12px;padding:10px 14px 14px;border-radius:10px;position:relative;overflow:hidden;
  background:var(--noise),linear-gradient(90deg,rgba(40,90,140,.35),rgba(15,20,28,.9) 70%);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(120,180,240,.45),0 8px 20px rgba(0,0,0,.4);animation:fadeUp .3s var(--ease)}
.tutn{font-size:11px;font-weight:900;color:#9fd8ff;letter-spacing:1px;white-space:nowrap}
.tutb{display:flex;flex-direction:column}.tutb b{font-size:15px}
.tutbar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.5)}.tutbar i{display:block;height:100%;background:linear-gradient(90deg,#55b0ff,#9fd8ff)}
.job{grid-template-columns:50px 2.1fr 1.3fr 1.7fr 124px}
.jobbtns{display:flex;flex-direction:column;gap:5px;align-items:stretch}.jobbtns span{display:flex;gap:4px}.jobbtns span .btn{flex:1;padding:4px 0}
@media(max-width:780px){.jobbtns{flex-direction:row}.jobbtns>.btn{flex:2}.jobbtns span{flex:1.4}}
.pig{display:flex;gap:12px;align-items:flex-start;padding:10px;margin-bottom:8px;border-radius:9px;background:linear-gradient(180deg,#1b1920,#100f13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 0 1px #000}
.pig.sel{box-shadow:inset 0 0 0 1.5px var(--gold),0 0 0 1px #000,0 0 12px rgba(233,185,73,.25)}
.pst{display:grid;grid-template-columns:34px 1fr 26px;gap:6px;align-items:center;font-size:11px;color:var(--dim)}.pst .mbar{margin:0}.pst b{color:#fff;font-size:12px;text-align:right}
.pigacts{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;align-items:center}
.racebox{display:flex;flex-direction:column;gap:4px}
.raceline{display:grid;grid-template-columns:22px 1fr 40%;gap:8px;align-items:center;font-size:12.5px;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.03);opacity:0;animation:showUp .35s var(--ease) forwards}
.raceline i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,#3a4a5a,#8fb8ee)}
.raceline.me{background:linear-gradient(90deg,rgba(233,185,73,.25),transparent);box-shadow:inset 3px 0 0 var(--gold);font-weight:900}.raceline.me i{background:linear-gradient(90deg,#c9932a,#ffe08a)}
.spark{width:120px;height:32px;display:block}
.arcline{display:flex;align-items:center;gap:4px;font-size:11px;margin-top:4px;flex-wrap:wrap}.arcline i{color:#555;font-style:normal}
.arcstep{padding:1px 8px;border-radius:10px;background:#222;color:#777}.arcstep.cur{background:#5a3e0c;color:#ffe08a}.arcstep.done{background:#2f6b2a;color:#d4f7cc}
@media(max-width:560px){.navmain a{flex:1 1 0;min-width:0;padding:7px 1px 6px;font-size:11.5px;letter-spacing:0}.navmain a .ni{font-size:17px}nav .bdg{right:2px}
  #toasts .toast:nth-last-child(n+3){display:none}.toast{font-size:12px;padding:7px 10px 7px 12px}}
@media(max-width:780px){.job{grid-template-columns:42px 1fr 1fr}.job .req{grid-column:2/4}.job>div:last-child{grid-column:1/4}}

/* ================= v0.7 ================= */
.troop{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}.troop:last-child{border-bottom:0}
.tconv{display:flex;gap:4px}
.abgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px}
@media(max-width:900px){.abgrid{grid-template-columns:repeat(3,1fr)}}@media(max-width:560px){.abgrid{grid-template-columns:1fr 1fr}}
.abcard{border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#1d1a21,#121015);box-shadow:0 0 0 1px #000,inset 0 0 0 1px color-mix(in srgb,var(--gc) 50%,transparent)}
.abcard.on{box-shadow:0 0 0 1px #000,inset 0 0 0 2px var(--gc),0 0 16px color-mix(in srgb,var(--gc) 50%,transparent)}
.abcard .art-card{border-radius:0;aspect-ratio:16/10}
.teamrow{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.tm{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;padding:6px 8px;border-radius:8px;background:#121015;box-shadow:inset 0 0 0 1px rgba(233,185,73,.25);min-width:62px}.tm b{color:var(--gold)}
/* v0.8 正式素材 */
.art.tr{background:radial-gradient(circle at 50% 40%,#3a2c1e,#14100c 78%)}
.art.tr img{object-fit:contain;padding:6%;box-sizing:border-box}
.art-icon.tr{background:none}.art-icon.tr img{padding:0}
.art-av:not(.ph){background:#14100c}
.art-scene:not(.ph) img,.art-card:not(.ph) img{filter:saturate(1.02)}

/* v0.8 正式 LOGO */
.logoimg{height:92px;width:auto;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.7));margin:-6px 0 -6px -4px}
@media(max-width:780px){.logoimg{height:58px}}
@media(max-width:420px){.logoimg{height:48px}}

/* =====================================================================
   v0.9 質感升級層：黑漆描金、細線框、層次光影
   ===================================================================== */
:root{--lac1:#17110d;--lac2:#0d0a08;--hair:rgba(233,185,73,.22);--hair2:rgba(233,185,73,.4);--ui-bg:none;--ui-corner:none;--ui-divider:none;--ui-crest:none}
body{background:
  radial-gradient(ellipse 90% 55% at 50% -10%,rgba(120,18,18,.35),transparent 70%),
  radial-gradient(ellipse 120% 60% at 50% 120%,#1d0f07,transparent 60%),
  var(--noise),var(--ui-bg),
  repeating-linear-gradient(45deg,rgba(233,185,73,.018) 0 2px,transparent 2px 14px),
  var(--bg);background-attachment:fixed}
html.has-ui-bg body{background-size:auto,auto,auto,512px,auto,auto}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;box-shadow:inset 0 0 180px 40px rgba(0,0,0,.85)}
::-webkit-scrollbar-thumb{background:linear-gradient(#b8892a,#5b3f0c)}

/* —— 數值列：玻璃黑漆 —— */
.statbar{background:linear-gradient(180deg,rgba(32,25,18,.92),rgba(12,10,9,.96));box-shadow:0 0 0 1px #000,inset 0 0 0 1px var(--hair2),inset 0 1px 0 rgba(255,230,170,.12),0 10px 28px rgba(0,0,0,.6)}
.stat+.stat{box-shadow:-1px 0 0 rgba(233,185,73,.1)}
.stat .si{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;font-style:normal;font-size:17px;
  background:radial-gradient(circle at 35% 30%,#3a2c18,#120d08 75%);box-shadow:0 0 0 1px #000,inset 0 0 0 1.5px rgba(233,185,73,.55),inset 0 2px 4px rgba(255,220,150,.15),0 3px 6px rgba(0,0,0,.6)}
.stat .si .ic{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 1px 1px #000)}
.stat .lb{text-transform:none;letter-spacing:1.5px;color:#b9a989}
.stat .v{font-family:"Noto Sans TC",system-ui;letter-spacing:.3px;text-shadow:0 1px 0 #000}
.mbar{height:6px;border-radius:3px;background:linear-gradient(#030303,#151217)}
.mbar i::after{content:"";position:absolute;left:0;right:0;top:0;height:45%;border-radius:3px 3px 0 0;background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.05))}

/* —— 主導覽：描金漆盒 —— */
nav{background:linear-gradient(180deg,rgba(30,23,17,.95),rgba(11,9,8,.97))!important;box-shadow:0 0 0 1px #000,inset 0 0 0 1px var(--hair2),0 8px 22px rgba(0,0,0,.55)!important}
.navmain a{position:relative}
.navmain a+a::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:linear-gradient(transparent,rgba(233,185,73,.28),transparent)}
nav a .ni .ic{width:26px;height:26px;object-fit:contain;display:block;margin:0 auto 1px}
nav a.on{background:radial-gradient(ellipse 70% 90% at 50% 100%,rgba(233,185,73,.22),transparent 70%),linear-gradient(180deg,rgba(80,58,20,.35),rgba(30,22,10,.2))!important;color:var(--gold-hi)!important}
nav a.on::after{content:"";position:absolute;left:22%;right:22%;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);box-shadow:0 0 10px var(--gold)}
.navsub a .ic.tb,.subtabs a .ic.tb{width:18px;height:18px;object-fit:contain;vertical-align:-4px;margin-right:4px}
.navsub a .ie.tb,.subtabs a .ie.tb{margin-right:4px}

/* —— 面板：雙線描金框＋漆面 —— */
.panel{background:linear-gradient(180deg,rgba(28,22,17,.94),rgba(13,11,10,.96))!important;
  box-shadow:0 0 0 1px #000,inset 0 0 0 1px var(--hair),inset 0 0 0 4px rgba(0,0,0,.35),inset 0 0 0 5px rgba(233,185,73,.07),0 12px 30px rgba(0,0,0,.55)!important}
.panel::before,.panel::after{width:20px;height:20px;border-width:1.5px;border-color:var(--gold-hi);opacity:.9;filter:drop-shadow(0 0 4px rgba(233,185,73,.5))}
html.has-ui-corner .panel::before,html.has-ui-corner .panel::after{border:0;width:30px;height:30px;background:var(--ui-corner) center/contain no-repeat;top:-6px;left:-6px;filter:drop-shadow(0 1px 2px #000)}
html.has-ui-corner .panel::after{top:auto;left:auto;bottom:-6px;right:-6px;transform:rotate(180deg)}
.panel>.ph{background:linear-gradient(90deg,rgba(120,20,18,.42),rgba(60,14,12,.22) 45%,rgba(20,14,10,0) 85%),linear-gradient(180deg,rgba(255,230,170,.05),transparent)!important}
.panel>.ph::after{left:0;right:0;height:1px;background:linear-gradient(90deg,var(--gold) 0%,rgba(233,185,73,.45) 35%,transparent 90%)}
html.has-ui-divider .panel>.ph::after{height:10px;bottom:-5px;background:var(--ui-divider) left center/auto 10px no-repeat}
.panel>.ph h3{color:#ffe9b0!important;background:none!important;-webkit-text-fill-color:currentColor;text-shadow:0 1px 0 #000,0 0 14px rgba(233,185,73,.25);letter-spacing:3px}
.panel>.ph h3::before{width:8px;height:8px;background:linear-gradient(135deg,#ffe7a3,#b47b14);box-shadow:0 0 0 1px #000,0 0 8px rgba(233,185,73,.7)}

/* —— 列表列：細線分隔＋懸停描金 —— */
.job,.shop,.rowi{border-top:1px solid rgba(233,185,73,.07)}
.job:hover,.shop:hover,.rowi:hover{background:linear-gradient(90deg,rgba(233,185,73,.09),rgba(233,185,73,.02) 60%,transparent)!important}
.job::before,.shop::before,.rowi::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:2px;border-radius:2px;background:var(--gold);opacity:0;transform:scaleY(.4);transition:.25s var(--ease)}
.job:hover::before,.shop:hover::before,.rowi:hover::before{opacity:1;transform:none;box-shadow:0 0 8px var(--gold)}
.job{grid-template-columns:44px 2.2fr 1.3fr 1.7fr 124px}
.jseal{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--kai);font-weight:700;font-size:19px;color:#ffe2b0;
  background:radial-gradient(circle at 35% 30%,#d8342a,#8e0d0d 62%,#5a0606);box-shadow:inset 0 0 0 2px rgba(255,215,170,.55),inset 0 0 0 3.5px #7a0b0b,0 3px 8px rgba(0,0,0,.6),0 0 0 1px #000;text-shadow:0 1px 0 #3a0000}
.jbanner{position:relative;height:112px;overflow:hidden;border-radius:10px 10px 0 0}
.jbanner .art{position:absolute;inset:0;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}
.jbanner .art img{object-position:50% 35%}
.jbanner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,7,5,.92) 0%,rgba(10,7,5,.55) 40%,rgba(10,7,5,.1) 75%),linear-gradient(0deg,rgba(13,11,10,1),transparent 55%)}
.jbt{position:absolute;left:20px;bottom:14px;z-index:1;display:flex;align-items:baseline;gap:12px}
.jbt b{font-family:var(--kai);font-size:30px;letter-spacing:6px;color:#ffe7a3;text-shadow:0 2px 0 #000,0 0 18px rgba(233,185,73,.45)}
.jbt span{font-size:12px;color:#cdb98a;letter-spacing:2px}
.jbanner+.ph{border-radius:0!important}

/* —— 數字磚：金邊小匣 —— */
.tiles>div{background:linear-gradient(180deg,#1c1712,#0c0a09);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.16),inset 0 1px 0 rgba(255,230,170,.06)}
.tiles b{color:#fff3d6}

/* —— 分頁膠囊 —— */
.subtabs a,.navsub a{transition:.2s var(--ease)}
.subtabs a:not(.on):hover{transform:translateY(-1px)}

/* —— 彈窗：毛玻璃底＋頂飾 —— */
.modal,#modal,.mwrap{backdrop-filter:blur(6px) saturate(.8);-webkit-backdrop-filter:blur(6px) saturate(.8)}
.mbox{box-shadow:0 0 0 1px #000,inset 0 0 0 1px var(--hair2),inset 0 0 0 5px rgba(0,0,0,.4),inset 0 0 0 6px rgba(233,185,73,.1),0 30px 80px rgba(0,0,0,.85),0 0 60px rgba(179,20,26,.18)!important}
html.has-ui-crest .mbox::before{content:"";position:sticky;display:block;top:0;height:0;margin:0 auto;width:220px;z-index:3}
html.has-ui-crest .mbox{background-image:var(--ui-crest),linear-gradient(180deg,#1c1612,#0e0b0a)!important;background-repeat:no-repeat;background-position:top center,0 0;background-size:220px auto,auto}
.mbox h2{color:#ffe9b0;text-shadow:0 1px 0 #000,0 0 16px rgba(233,185,73,.25)}

/* —— 通知 —— */
.toast{background:linear-gradient(180deg,rgba(34,27,20,.96),rgba(14,11,9,.97))!important;box-shadow:0 0 0 1px #000,inset 0 0 0 1px var(--hair2),0 10px 26px rgba(0,0,0,.6)!important;backdrop-filter:blur(4px)}

/* —— 按鈕細節 —— */
.btn{font-family:var(--serif);font-weight:900}
.btn.dark{box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.38),inset 0 1px 0 rgba(255,230,170,.12),0 3px 0 #000,0 5px 12px rgba(0,0,0,.5)}

/* —— 卡片圖：內陰影收邊 —— */
.art-scene:not(.ph)::after,.art-card:not(.ph)::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(233,185,73,.3),inset 0 0 30px rgba(0,0,0,.45);pointer-events:none}
.art-av:not(.ph) img{transform:scale(1.04)}

@media(max-width:780px){.job{grid-template-columns:40px 1fr 1fr}.jseal{width:34px;height:34px;font-size:17px}.jbanner{height:92px}.jbt b{font-size:24px}}
@media(max-width:780px){.stat .si{display:none}}
/* v0.9 正式介面裝飾定位 */
html.has-ui-corner .panel::before,html.has-ui-corner .panel::after{width:38px;height:38px;top:-7px;left:-7px;background:var(--ui-corner) left top/contain no-repeat}
html.has-ui-corner .panel::after{top:auto;left:auto;bottom:-7px;right:-7px}
html.has-ui-divider .panel>.ph::after{height:24px;bottom:-12px;left:4px;right:auto;width:300px;background:var(--ui-divider) left center/300px auto no-repeat;z-index:2}
html.has-ui-crest .mbox{padding-top:20px;background-position:center 0,0 0;background-size:240px auto,auto}
nav a:not(.on) .ni .ic{filter:grayscale(.35) brightness(.85)}
nav a:hover .ni .ic{filter:none}
nav a.on .ni .ic{filter:drop-shadow(0 0 6px rgba(255,200,90,.65))}
.subtabs a.on .ic.tb,.navsub a.on .ic.tb{filter:drop-shadow(0 1px 0 rgba(255,240,200,.6))}
nav a .ni{filter:none!important}
nav a:not(.on) .ni .ic{filter:brightness(.78) saturate(.8)}
.panel>.ph::after{top:auto!important;mix-blend-mode:normal!important}
html.has-ui-corner .panel::before,html.has-ui-corner .panel::after{width:46px;height:46px;top:-8px;left:-8px}
html.has-ui-corner .panel::after{top:auto;left:auto;bottom:-8px;right:-8px}
html.has-ui-bg body{background:
  radial-gradient(ellipse 90% 55% at 50% -10%,rgba(120,18,18,.35),transparent 70%),
  radial-gradient(ellipse 120% 60% at 50% 120%,#1d0f07,transparent 60%),
  linear-gradient(rgba(8,7,10,.5),rgba(8,7,10,.5)),
  var(--ui-bg),var(--bg);background-size:auto,auto,auto,420px,auto;background-attachment:fixed}

/* 禁止反白選取（輸入框除外，才能貼上／複製戰帖碼與存檔碼） */
html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none;user-drag:none}
.ph-tag{display:none!important}
/* 真實街道底圖 */
.mapwrap .rmap{position:absolute;inset:0;z-index:0}
.mapwrap.real svg.cmap{position:relative;z-index:1;background:transparent}
.mapwrap .rmap canvas{outline:none}
.rmattr{position:absolute;right:8px;bottom:6px;z-index:2;font-size:10px;color:rgba(230,215,180,.7);background:rgba(0,0,0,.55);padding:1px 7px;border-radius:8px;pointer-events:none}
@media(max-width:560px){.rmattr{font-size:9px}}
.rmload{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:7px;padding:4px 12px;border-radius:14px;font-size:12px;color:#f1e3bd;background:rgba(10,8,6,.85);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(233,185,73,.4);pointer-events:none}
.rmload i{width:11px;height:11px;border-radius:50%;border:2px solid rgba(233,185,73,.3);border-top-color:#e9b949;animation:rmspin .8s linear infinite}
@keyframes rmspin{to{transform:rotate(360deg)}}
.rmload small{font-size:10px;color:#c9b88a;opacity:.85}
.mapwrap.real svg.cmap{transform:translateZ(0);will-change:transform}
/* 全台勢力總覽圖 */
svg.twmap.twimg{background:#06121c;max-height:none;aspect-ratio:1107/1421;height:auto}
.twbtn{cursor:pointer}
.twbtn .twhit{transition:.2s}
.twbtn:hover .twhit{fill:rgba(255,220,140,.14);stroke:rgba(255,230,170,.7);stroke-width:3}
.twbtn .twglow{animation:twpulse 1.6s ease-in-out infinite}
.twbtn .twring{filter:drop-shadow(0 0 6px #ffd36a)}
.twbtn .twhere{transform-box:fill-box;transform-origin:center;animation:twspin 9s linear infinite}
@keyframes twpulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes twspin{to{transform:rotate(360deg)}}

/* =====================================================================
   手機版優化（560px 以下）：數字完整顯示、減少擁擠
   ===================================================================== */
@media(max-width:560px){
  #app{padding:8px 8px 40px}
  /* 頂部：Logo 與角色框同一行 */
  .hdr-top{flex-wrap:nowrap;gap:8px;padding:0}
  .logoimg{height:46px!important;margin:-2px 0 -2px -2px}
  .who{flex:1;min-width:0;padding:4px 10px 4px 4px;gap:7px}
  .who .art-av{width:34px;height:34px}
  .who .nm{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .who .tt{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .who>div:not(.art){min-width:0;flex:1}
  .sndbtn{width:30px!important;height:30px!important;flex:none}
  /* 數值列：三行配置 */
  .statbar{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-areas:"cash cash lv" "hp en st" "heat xp xp";margin-top:8px}
  .statbar .s-cash{grid-area:cash}.statbar .s-hp{grid-area:hp}.statbar .s-en{grid-area:en}.statbar .s-st{grid-area:st}
  .statbar .s-heat{grid-area:heat}.statbar .s-xp{grid-area:xp}
  .statbar .lvmedal{grid-area:lv!important;grid-row:auto!important;grid-column:auto!important;display:flex;align-items:center;justify-content:center;padding:4px}
  .statbar .medal{width:46px;height:46px}.statbar .medal b{font-size:18px}
  .stat{padding:7px 9px!important;border-bottom:1px solid rgba(233,185,73,.1)}
  .stat+.stat{box-shadow:none}
  .s-hp,.s-en,.s-heat{box-shadow:1px 0 0 rgba(233,185,73,.1)!important}
  .stat .lb{font-size:10.5px;letter-spacing:.5px}
  .stat .v{font-size:15px!important;overflow:visible!important;text-overflow:clip!important;letter-spacing:0}
  .s-cash .v{font-size:17px!important}
  .stat .v span{display:inline!important;font-size:10px!important}
  .stat .sb{font-size:10px;white-space:nowrap}
  .mbar{height:5px;margin:3px 0 2px}
  /* 主選單、子分頁、任務階級：單行可左右滑動 */
  .navsub,.subtabs{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .navsub::-webkit-scrollbar,.subtabs::-webkit-scrollbar,.chev::-webkit-scrollbar{display:none}
  .navsub a,.subtabs a{flex:none;white-space:nowrap}
  .subtabs{margin:0 -8px 10px;padding:0 8px}
  .subtabs a{padding:6px 13px;font-size:12.5px}
  .chev{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin:0 -8px 10px;padding:0 8px 2px}
  .chev a{flex:0 0 112px!important;font-size:12.5px;padding:7px 18px 7px 16px}
  .chev a small{font-size:10px}
  /* 紅包／日曆橫幅縮小 */
  .banner{padding:8px 10px!important;gap:8px}
  .banner .lan{font-size:24px!important}
  .banner .t{font-size:14.5px!important}
  .banner .s{font-size:11px!important}
  .banner .btn{padding:7px 12px;font-size:13px}
  /* 面板：內距縮小，標題列可換行，避免標題被擠成直排 */
  .panel{margin-bottom:10px}
  .panel>.ph{flex-wrap:wrap;padding:9px 12px!important;row-gap:4px}
  .panel>.ph h3{white-space:nowrap;font-size:15.5px;letter-spacing:2px}
  .panel>.ph>.small,.panel>.ph>span.small{flex-basis:100%;font-size:11px;line-height:1.4}
  .panel>.pb{padding:10px 12px!important}
  .job,.shop,.rowi,.opp{padding-left:12px!important;padding-right:12px!important}
  .tiles{gap:6px}.tiles>div{padding:7px 9px}
  .tiles b{font-size:16px}
  /* 通知：較小、靠下 */
  #toasts{left:8px!important;right:8px!important;bottom:8px!important;gap:5px}
  .toast{font-size:12px;padding:7px 11px 7px 13px}
  #toasts .toast:nth-last-child(n+4){display:none}
  /* 彈窗 */
  .mbox{max-height:94vh}
  .mbox .mb{padding:12px 14px 16px}
  .mbox h2{font-size:18.5px}
  .choice{padding:10px 12px}
}
@media(max-width:360px){
  .stat .v{font-size:13.5px!important}.s-cash .v{font-size:15.5px!important}
  .logoimg{height:40px!important}
  .chev a{flex-basis:100px!important}
}
@media(max-width:560px){.offi .btn{flex:none;white-space:nowrap;padding-left:9px;padding-right:9px}}
.btn.moregames{text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.mbox .acts .moregames{margin-right:auto}