/* Phong Thần Idle — sơn mài, đồng xanh, chu sa, thẻ tre */
:root{
  --ink:#1d1712; --lac:#2a201a; --lac2:#352920; --bronze:#3e5a52; --patina:#5f8a7d; --jade:#8cc4a8;
  --slip:#d9c393; --slip2:#b9a272; --dim:#8f8068; --cin:#b3311f; --cin2:#d6492f; --gold:#e2b24a;
  --hp:#c2392a; --mp:#3f7fc4; --xp:#d9a63a;
  --r0:#e6dcc8; --r1:#6fa8ff; --r2:#c58cff; --r3:#f2c14e; --r4:#ff8a4c;
  --serif:"Palatino Linotype","Book Antiqua",Palatino,"Noto Serif",Georgia,serif;
  --sans:"Segoe UI",Tahoma,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--slip);font:14px/1.45 var(--sans);-webkit-tap-highlight-color:transparent}
body{overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hidden{display:none!important}
#app{max-width:640px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;background:var(--lac);box-shadow:0 0 0 1px #000,0 0 40px #000}

/* đầu trang: ấn chu sa + tên */
#top{display:flex;align-items:center;gap:10px;padding:8px 10px;background:linear-gradient(#2e241c,#231b15);border-bottom:2px solid var(--bronze)}
.seal{width:42px;height:42px;flex:none;display:grid;place-items:center;background:var(--cin);color:#f6e7c8;font:700 18px/1 var(--serif);border:2px solid #f0d9a8;outline:2px solid var(--cin);border-radius:3px;transform:rotate(-4deg);box-shadow:inset 0 0 6px #6d1408}
.who{flex:1;min-width:0;display:flex;flex-direction:column}
.who b{font:700 17px/1.15 var(--serif);color:#f1e2bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who span{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.purse{display:flex;flex-direction:column;align-items:flex-end;font-size:12.5px;gap:1px}
.coin{display:flex;align-items:center;gap:4px}
.coin b{color:var(--gold);font-weight:600}
.ico-luong,.ico-dong{display:inline-block;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff1b0,#c9962b 60%,#7a5410)}
.ico-dong{border-radius:2px;background:radial-gradient(circle at 35% 35%,#ffd7b0,#b8682b 60%,#5a2c0c)}
.hbtn{background:var(--bronze);border:1px solid var(--patina);color:#eaf4ef;padding:7px 10px;border-radius:4px;font-family:var(--serif);font-weight:700}

/* sân đấu (lớp phủ theo kiểu JX) */
#battle{position:relative;height:clamp(300px,54dvh,560px);flex:none;background:#0d0b09;overflow:hidden;user-select:none}
#arena{position:absolute;inset:0;width:100%;height:100%;display:block}
#hud{position:absolute;left:8px;top:8px;width:min(48%,250px);display:flex;flex-direction:column;gap:3px;pointer-events:none}
#hud .lvbox{display:none}
.bar{position:relative;height:13px;background:#000a;border:1px solid #000;border-radius:2px;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;width:0}
.bar.hp i{background:linear-gradient(#e2584a,var(--hp))}
.bar.mp i{background:linear-gradient(#6aa4e6,var(--mp))}
.bar.xp{height:9px}.bar.xp i{background:linear-gradient(#f1c868,var(--xp))}
.bar span{position:relative;display:block;font-size:10px;line-height:12px;text-align:center;color:#fff;text-shadow:0 1px 1px #000}
.bar.xp span{font-size:8.5px;line-height:8px}
#buffs{position:absolute;left:8px;top:52px;display:flex;gap:3px;flex-wrap:wrap;max-width:46%;pointer-events:none}
#buffs i{position:relative;width:22px;height:22px;background:#000 center/contain no-repeat;border:1px solid #3b2f22;border-radius:2px}
#buffs i span{position:absolute;left:0;right:0;bottom:-11px;font:600 8.5px/1 var(--sans);font-style:normal;text-align:center;color:#c6f2d4;text-shadow:0 1px 1px #000}
#banner{position:absolute;left:0;right:0;top:32%;text-align:center;pointer-events:none;opacity:0;transition:opacity .6s}
#banner.on{opacity:1}
#banner b{display:block;font:700 26px/1.1 var(--serif);color:#f3e1b2;text-shadow:0 2px 0 #000,0 0 14px #000}
#banner span{font-size:13px;color:var(--slip2);text-shadow:0 1px 2px #000}

/* góc phải: nút tròn, tiểu bản đồ, bảng chọn bản đồ, theo dõi nhiệm vụ */
#rtop{position:absolute;right:6px;top:6px;display:flex;flex-direction:column;align-items:flex-end;gap:5px;z-index:5}
.rbtns{display:flex;gap:5px}
.rbtn{width:42px;height:42px;border-radius:50%;padding:0;background:radial-gradient(circle at 40% 35%,#6a5136,#2f2116);border:2px solid #b08a50;color:#f6e3b4;font:700 10.5px/1.05 var(--serif);text-shadow:0 1px 1px #000;box-shadow:0 2px 6px #000a}
.rbtn:hover{border-color:#f0cf86}
#miniBox{position:relative;width:132px;background:#000c;border:1px solid #5d4b35}
#mini{display:block;width:132px;height:93px}
#mapName{display:block;width:100%;background:linear-gradient(#3a2d20,#22190f);border:0;border-top:1px solid #5d4b35;color:#efdcae;font:12px/1.2 var(--sans);padding:4px 6px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mapName::after{content:" ▾";color:var(--gold)}
#mapPanel{position:absolute;right:0;top:100%;margin-top:3px;width:min(300px,86vw);max-height:min(62dvh,560px);overflow:auto;background:#141a17f2;border:1px solid #6b5a3a;border-radius:3px;padding:7px;box-shadow:0 6px 18px #000c;scrollbar-width:thin}
.mp-head{display:flex;align-items:center;gap:6px;color:#f2d07a;font:700 13px var(--sans)}
.mp-head label{margin-left:auto;font-weight:400;color:#e9dcbc;display:flex;align-items:center;gap:4px;font-size:12.5px}
.mp-sub{font-size:11.5px;color:#9fb3a9;margin:3px 0 6px}
.mp-sub b{color:var(--gold);font-weight:600}
.mgrp{border:1px solid #3a4a42;background:#1b231f;border-radius:4px;padding:5px 7px;margin-bottom:5px}
.mgrp.cur{border-color:#8a7445}
.mgrp .gh{display:flex;align-items:center;gap:6px;width:100%;background:none;border:0;padding:0;color:#efe2c2;font-size:13px;text-align:left}
.mgrp .gh .gl{margin-left:auto;color:#cfbf98;font-size:12px;white-space:nowrap}
.dots{display:inline-flex;gap:2px}.dots i{width:7px;height:7px;border-radius:50%;display:inline-block}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.chip{background:#222b26;border:1px solid #485a50;border-radius:10px;padding:2px 8px;font-size:12px;color:#d9e6dc}
.chip.on{border-color:#e2b24a;color:#ffe7a6;background:#3a3020}
.chip:disabled{opacity:.38;cursor:default}
#qTrack{width:170px;background:#000b;border:1px solid #5d4b35;padding:5px 7px;font-size:12px;line-height:1.35;color:#e7dbc0}
#qTrack .qt{color:#f2d07a;font-weight:600;display:flex;justify-content:space-between}
#qTrack .qn{color:#ffd88a}
#qTrack .prog{margin-top:4px}

/* thanh thành thị */
#townBar{position:absolute;left:50%;top:58px;transform:translateX(-50%);display:flex;gap:5px;flex-wrap:wrap;justify-content:center;align-items:center;max-width:94%;background:#000b;border:1px solid #8a7445;padding:5px 8px;border-radius:3px;z-index:4}
#townBar b{font:700 14px var(--serif);color:#f3dfb0;margin-right:4px}

/* đáy sân đấu: chế độ, Auto, thanh kỹ năng */
#bottom{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 6px 7px;background:linear-gradient(#0000,#000a 45%);z-index:4}
#modeRow{display:flex;gap:6px;align-items:center}
#modeWrap{position:relative}
#modeBtn,#autoBox,#rideBtn{background:#141a17e8;border:1px solid #6b5a3a;color:#e9dcbc;padding:5px 10px;border-radius:2px;font:12.5px var(--sans);white-space:nowrap}
#modeBtn b{color:#f2d07a}
#autoBox{display:flex;align-items:center;gap:4px;cursor:pointer}
#autoBox input{accent-color:#8ac46a;margin:0}
#modeMenu{position:absolute;left:0;bottom:calc(100% + 4px);min-width:150px;background:#141a17f4;border:1px solid #6b5a3a;padding:3px;box-shadow:0 6px 16px #000c}
#modeMenu button{display:flex;gap:6px;align-items:center;width:100%;background:#1f2823;border:1px solid #33433b;margin:2px 0;padding:6px 9px;color:#e9dcbc;font-size:13px;text-align:left}
#modeMenu button.on{background:linear-gradient(#7a5c2a,#4d391b);border-color:#d9b25e;color:#fff1c8}
#modeMenu button:disabled{opacity:.4}
#pad{display:flex;align-items:flex-end;gap:5px}
.pbtn{position:relative;width:42px;height:42px;flex:none;border:1px solid #6b5a3a;background:#1c1510d9;border-radius:3px;padding:0}
.pbtn i{position:absolute;inset:4px;background:center/contain no-repeat}
.pbtn em{position:absolute;right:2px;bottom:0;font:600 11px var(--sans);font-style:normal;color:#fff;text-shadow:0 1px 1px #000}
.pbtn>b{position:absolute;left:2px;bottom:0;font:600 9.5px var(--sans);color:#d8c99f;text-shadow:0 1px 1px #000}
.pbtn .cd{position:absolute;inset:0;background:#000a;transform-origin:bottom;transform:scaleY(0)}
.pbtn.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.pbtn.off{opacity:.35}
.sks{display:flex;gap:5px;margin-left:8px}
#chat,#menu,.wtitle{display:none}
.tlist{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.tdest{text-align:left;background:#1f2823;border:1px solid #3c4d44;color:#f0e2bc;padding:8px 12px;border-radius:2px;font:14px var(--sans)}
.tdest:hover{border-color:#d9b25e;background:#2b352f}
.tdest.back{border-color:#5f8a7d;color:#bfe6d2}.tdest.no{color:var(--dim)}

/* bảng */
#panel{flex:1;overflow:auto;padding:10px 10px 16px;background:var(--lac);scrollbar-width:thin}
.gh-pc{display:none}
.tab h2{font:700 18px/1.2 var(--serif);color:#f0dfb6;margin:4px 0 8px}
.tab h3{font:700 15px/1.25 var(--serif);color:var(--slip);margin:14px 0 6px;padding-bottom:3px;border-bottom:1px solid #4a3b2c}
.muted{color:var(--dim)}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp{flex:1}
.btn{background:var(--lac2);border:1px solid #5d4b35;color:var(--slip);padding:6px 11px;border-radius:4px;font-size:13px}
.btn:hover{border-color:var(--slip2)}
.btn.on,.btn.pri{background:var(--bronze);border-color:var(--jade);color:#f2fbf6}
.btn.red{background:#5a1a12;border-color:var(--cin2);color:#ffe2d6}
.btn.sm{padding:3px 8px;font-size:12px}
.btn:disabled{opacity:.4;cursor:default}

/* thẻ tre: thanh tab */
#tabs{display:grid;grid-template-columns:repeat(7,1fr);background:#17110d;border-top:2px solid var(--bronze)}
#tabs button{position:relative;background:none;border:0;border-right:1px solid #2b2119;padding:9px 2px 10px;font:600 12px/1.15 var(--serif);color:var(--dim)}
#tabs button:last-child{border-right:0}
#tabs button.on{color:#f6e6c0;background:linear-gradient(#3a2c21,#2a201a);box-shadow:inset 0 2px 0 var(--cin)}
.dot{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--cin2);display:none}
.dot.on{display:block}

/* Giang hồ */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mode{border:1px solid #5d4b35;background:var(--lac2);border-radius:5px;padding:10px;text-align:left}
.mode b{display:block;font:700 16px var(--serif);color:#f0dfb6}
.mode span{font-size:12px;color:var(--dim)}
.mode.on{border-color:var(--jade);background:linear-gradient(135deg,#2f463f,#283731);box-shadow:inset 3px 0 0 var(--jade)}
.mapcard{display:flex;gap:10px;margin-top:10px;padding:8px;border:1px solid #4a3b2c;border-radius:5px;background:#231a14}
.mapcard img{width:118px;height:80px;object-fit:cover;border:1px solid #000;border-radius:3px;flex:none}
.mapcard b{font:700 15px var(--serif);color:#f0dfb6}
.mlist{display:flex;flex-direction:column;gap:4px;max-height:none}
.mitem{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid #3d3026;border-radius:4px;background:#241b15;text-align:left;width:100%}
.mitem .lvr{flex:none;width:56px;font:700 13px var(--serif);color:var(--gold)}
.mitem .mn{flex:1;min-width:0}
.mitem .mn b{display:block;font-weight:600;color:#eadbb8}
.mitem .mn span{display:block;font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mitem.cur{border-color:var(--jade);box-shadow:inset 3px 0 0 var(--jade)}
.mitem.lock{opacity:.45}
#log{margin-top:8px;font-size:12.5px;line-height:1.5;display:flex;flex-direction:column-reverse}
#log div{padding:1px 0;border-bottom:1px dotted #3a2e24}
.c-exp{color:#e8c86b}.c-item{color:#9ecbff}.c-boss{color:#ff8a6a;font-weight:600}.c-q{color:var(--jade)}.c-bad{color:#ff7b6b}
.r0{color:var(--r0)}.r1{color:var(--r1)}.r2{color:var(--r2)}.r3{color:var(--r3)}.r4{color:var(--r4)}

/* nhân vật */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;font-size:13px}
.stats div{display:flex;justify-content:space-between;border-bottom:1px dotted #3d3026;padding:2px 0}
.stats b{color:#f1e2bd;font-weight:600}
.eqgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.slot{position:relative;aspect-ratio:1;border:1px solid #4a3b2c;background:#1d1611 center/60% no-repeat;border-radius:4px;display:flex;align-items:flex-end;justify-content:center;font-size:10px;color:var(--dim);padding:2px}
.slot.has{border-color:var(--bronze)}
.slot img{position:absolute;inset:0;margin:auto;max-width:70%;max-height:70%;image-rendering:auto}
.slot .lb{position:relative;z-index:1;text-shadow:0 1px 2px #000;line-height:1.1;text-align:center}
.slot .en{position:absolute;top:2px;right:3px;color:var(--gold);font-weight:700;font-size:11px}

/* hành trang */
.bag{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:5px}
.cell{position:relative;aspect-ratio:1;border:1px solid #3d3026;border-radius:4px;background:#1d1611;padding:0}
.cell img{position:absolute;inset:0;margin:auto;max-width:72%;max-height:72%}
.cell.q1{border-color:var(--r1)}.cell.q2{border-color:var(--r2)}.cell.q3{border-color:var(--r3);box-shadow:inset 0 0 8px #f2c14e55}
.cell .n{position:absolute;right:3px;bottom:1px;font-size:11px;color:#fff;text-shadow:0 1px 1px #000}
.cell .en{position:absolute;left:3px;top:1px;font-size:11px;color:var(--gold);font-weight:700}
.cell .lk{position:absolute;right:2px;top:0;font-size:10px}
.cell.up::after{content:"▲";position:absolute;left:3px;bottom:0;font-size:10px;color:#7ee08a}
.cell.sel{outline:2px solid var(--gold)}
.tip{font-size:13px}
.tip .tn{font:700 16px var(--serif)}
.tip .tl{margin:2px 0}
.tip .tm{color:#9ecbff}
.tip .td{color:var(--dim);font-style:italic;margin-top:6px}
.tip .bad{color:#ff7b6b}

/* võ công */
.sk{display:flex;gap:9px;align-items:center;padding:7px 8px;border:1px solid #3d3026;border-radius:4px;background:#221a14;margin-bottom:5px}
.sk .ic{width:38px;height:38px;flex:none;border:1px solid #000;background:#000 center/contain no-repeat;border-radius:3px}
.sk .bd{flex:1;min-width:0}
.sk .bd b{font:700 14px var(--serif);color:#efdeb5}
.sk .bd span{display:block;font-size:11.5px;color:var(--dim)}
.sk .lvl{font:700 13px var(--serif);color:var(--gold);min-width:40px;text-align:right}
.sk.lock{opacity:.5}
.sk.main{border-color:var(--gold)}
.sk.slot1{border-color:var(--jade)}

/* nhiệm vụ */
.qcard{padding:8px 10px;border:1px solid #3d3026;border-left:3px solid var(--bronze);border-radius:4px;background:#221a14;margin-bottom:6px}
.qcard.cur{border-left-color:var(--jade);background:#23302b}
.qcard.done{opacity:.55}
.qcard.lock{opacity:.4}
.qcard b{font:700 14.5px var(--serif);color:#efdeb5}
.qcard .qs{font-size:12px;color:var(--dim)}
.prog{height:6px;background:#0008;border-radius:3px;overflow:hidden;margin-top:5px}
.prog i{display:block;height:100%;background:var(--jade)}

/* hộp thoại */
#modal{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:50;padding:12px}
.mbox{position:relative;width:min(560px,100%);max-height:88dvh;overflow:auto;background:#2a201a;border:1px solid var(--slip2);outline:3px solid #1a130e;border-radius:5px;padding:16px 14px 14px}
.mx{position:absolute;right:6px;top:6px;background:none;border:0;font-size:18px;color:var(--dim);padding:4px 8px}
#toast{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:4px;align-items:center;pointer-events:none}
#toast div{background:#000d;border:1px solid var(--bronze);padding:6px 12px;border-radius:4px;font-size:13px;color:#f0e3c4;animation:tin .25s}
@keyframes tin{from{opacity:0;transform:translateY(6px)}}
.shoprow{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dotted #3d3026}
.shoprow img{width:30px;height:30px;object-fit:contain}
.shoprow .sp b{color:#efdeb5}
.shoprow .sp{flex:1;min-width:0}
.shoprow select{flex:0 0 46%;max-width:46%;min-width:0}
.form{display:grid;gap:10px}
.form input[type=text]{background:#17110d;border:1px solid #5d4b35;color:var(--slip);padding:8px 10px;border-radius:4px;font:inherit}
.choice{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.choice button{border:1px solid #4a3b2c;background:#221a14;border-radius:5px;padding:6px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:2px}
.choice button.on{border-color:var(--gold);background:#3a2c1f}
.choice canvas{width:96px;height:110px}
.choice b{font:700 14px var(--serif);color:#f0dfb6}
.choice span{font-size:11px;color:var(--dim);text-align:center}
.set{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dotted #3d3026}
.set select,.set input[type=range]{background:#17110d;color:var(--slip);border:1px solid #5d4b35;border-radius:3px;padding:3px}
textarea{width:100%;min-height:90px;background:#17110d;color:var(--slip);border:1px solid #5d4b35;border-radius:4px;font:12px monospace}
@media (prefers-reduced-motion:reduce){#banner{transition:none}#toast div{animation:none}}

/* ===== máy tính: sân đấu toàn màn hình, cửa sổ nổi như JX ===== */
@media (min-width:900px){
  #app{max-width:none;box-shadow:none}
  #top{display:none}
  #battle{position:fixed;inset:0;height:auto}
  #tabs{display:none}
  #hud{left:50%;transform:translateX(-50%);top:0;width:min(1100px,calc(100% - 660px));flex-direction:row;align-items:center;gap:6px;background:linear-gradient(#1a140fe8,#120d09d9);border:1px solid #5d4b35;border-top:0;padding:4px 8px}
  #hud .lvbox{display:flex;align-items:center;gap:4px;font-size:12px;color:#cdbf9c;white-space:nowrap}
  #hud .lvbox b{background:#0008;border:1px solid #5d4b35;padding:0 5px;color:#f6e3b4}
  #hud .bar{flex:1;height:14px}#hud .bar.xp{height:14px}#hud .bar.xp span{font-size:10px;line-height:12px}
  #buffs{top:44px}
  .rbtns{position:absolute;right:calc(100% + 8px);top:0}
  .rbtn{width:48px;height:48px}
  #rtop{right:8px;top:6px}
  #miniBox{width:180px}#mini{width:180px;height:126px}
  #qTrack{width:230px}
  #chat{display:flex;flex-direction:column;position:absolute;left:8px;bottom:8px;width:380px;height:190px;background:#000a;border:1px solid #3b2f22;z-index:3}
  #chat .ctabs{padding:3px 8px;background:#1d1610;border-bottom:1px solid #3b2f22;font-size:12px}
  #chatLog{color:#e8dcc0;flex:1;overflow:auto;padding:4px 8px;font-size:12px;line-height:1.45;display:flex;flex-direction:column-reverse;scrollbar-width:thin}
  #bottom{left:50%;right:auto;transform:translateX(-50%);background:none;padding-bottom:8px}
  #menu{display:flex;position:absolute;right:8px;bottom:8px;gap:4px;z-index:4}
  #menu button{position:relative;background:linear-gradient(#3b2d20,#20170f);border:1px solid #8a7445;color:#f2e2b8;padding:7px 10px;font:700 12.5px var(--serif);border-radius:3px}
  #menu button.on{border-color:#f2d07a;color:#fff3cf}
  #panel{position:fixed;right:200px;top:52px;width:460px;max-height:calc(100vh - 190px);display:none;flex:none;background:#241b15f5;border:1px solid #8a7445;box-shadow:0 10px 30px #000c;z-index:20;padding:0 12px 12px}
  body.wopen #panel{display:block}
  .wtitle{display:flex;position:sticky;top:0;align-items:center;margin:0 -12px 8px;padding:6px 10px;background:linear-gradient(#3b2d20,#2a2018);border-bottom:1px solid #8a7445;z-index:2}
  .wtitle b{flex:1;font:700 15px var(--serif);color:#f3dfb0}
  .wtitle button{background:none;border:0;color:#cdbf9c;font-size:16px}
  #toast{bottom:130px}
}

/* ===== cửa sổ theo bản PC (ảnh \spr\Ui4) ===== */
.pcwrap{position:relative;margin:0 auto;overflow:visible}
.pcw{position:relative;font:12px/14px Tahoma,"Segoe UI",sans-serif;color:#dafaa5;user-select:none;image-rendering:auto}
.pcw .ui{position:absolute;background-repeat:no-repeat}
.pcw .ui.btn{cursor:pointer}
.pcw .ui.btn:hover{filter:brightness(1.25)}
.pcw .ui.dim{opacity:.55}
.pcw .ut{position:absolute;height:14px;white-space:nowrap;overflow:hidden;text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000}
.pcw .ut.extra{color:#e8dcb8;font-size:11px;text-align:center}
.pcw .ut.extra b{color:#ffd94e;font-weight:400}
.pcw .ut.small{font-size:11px}
.pcw .ut.pgn{pointer-events:none;font-size:10px;top:37px}
.pcw canvas.face{width:70px;height:70px;background:#000}
.pcw .ucell{position:absolute;width:42px;height:42px;padding:0;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.pcw .ucell img{max-width:40px;max-height:40px;image-rendering:auto;filter:drop-shadow(0 1px 1px #000)}
.pcw .ucell.eq img{max-width:none;max-height:none;transform:scale(1.25)}
.pcw .ucell:hover{outline:1px solid #ffe08a;outline-offset:-1px}
.pcw .ucell.r1{box-shadow:inset 0 0 0 1px #6fa8ff99}.pcw .ucell.r2{box-shadow:inset 0 0 0 1px #c58cffaa}.pcw .ucell.r3{box-shadow:inset 0 0 0 1px #f2c14ecc}
.pcw .ucell.eq{box-shadow:none}
.pcw .ucell.up::after{content:"▲";position:absolute;right:2px;top:1px;font-size:9px;color:#7cff6b;text-shadow:0 0 2px #000}
.pcw .ucell .en{position:absolute;left:2px;top:1px;font-size:10px;color:#ffd94e;text-shadow:0 0 2px #000}
.pcw .ucell .n{position:absolute;right:2px;bottom:1px;font-size:10px;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000}
.pcw .ucell .lk{position:absolute;left:2px;bottom:1px;font-size:9px;color:#ffd94e}
.pcw .slot.has{opacity:.35}
.pcw .skbox{cursor:pointer}
.pcw .skbox.main{filter:drop-shadow(0 0 3px #ffd34d)}
.pcw .skbox.slot{filter:drop-shadow(0 0 3px #7fe0c4)}
.pcw .skic{width:33px;height:33px;background-size:33px 33px;pointer-events:none}
.pcw .skic.off{filter:grayscale(1) brightness(.55)}
.pcw .skn,.pcw .skl{pointer-events:none}
.pcw .skn{font-size:10.5px;white-space:normal;height:26px;line-height:12px}
.pcw .skl{font-size:10px}
.pcw .skp{width:15px;height:15px;padding:0;border:1px solid #c9a24d;background:#3a2a12;color:#ffd94e;font:700 12px/12px Tahoma;cursor:pointer;border-radius:2px}
.pcw .skp:hover{background:#5b4219}
.pcw .sitem{padding:0;border:0;background:transparent;text-align:left;cursor:pointer}
.pcw .sitem img{position:absolute;left:0;top:0;width:32px;height:32px;object-fit:contain}
.pcw .sitem .nm,.pcw .sitem .pr{position:absolute;left:35px;width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:11px/13px Tahoma,sans-serif;text-shadow:1px 1px 0 #000}
.pcw .sitem .nm{top:3px}.pcw .sitem .pr{top:18px}
.pcw .sitem:hover{outline:1px solid #ffe08a}
.pcw .sitem.dis img{filter:grayscale(1)}
.pcw .say{white-space:normal;height:auto;overflow:auto;color:#fff;line-height:16px}
.pcw .say b{color:#ffd94e;font-weight:400}
.pcw .opts{white-space:normal;height:auto;overflow:auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;scrollbar-width:thin}
.pcw .opt{background:none;border:0;padding:1px 2px;color:#ffe08a;font:12px/16px Tahoma,sans-serif;text-align:left;cursor:pointer;text-shadow:1px 1px 0 #000}
.pcw .opt::before{content:"◆ ";color:#c9a24d;font-size:9px}
.pcw .opt:hover{color:#fff;text-decoration:underline}
.pcw .tbtn{height:16px;background:none;border:0;color:#ffe08a;font:12px Tahoma;cursor:pointer;text-shadow:1px 1px 0 #000}
.pcw .tbtn:hover{color:#fff;text-decoration:underline}
.pcopts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;font-size:12px;margin-top:6px;color:var(--slip)}
#pcLayer{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:#0006}
#pcLayer .pcwrap{margin:0}
#uiTip{position:fixed;z-index:60;max-width:300px;background:#0b0907ee;border:1px solid #8a7445;padding:6px 8px;font:12px/1.45 Tahoma,sans-serif;color:#e8dcc0;pointer-events:none;box-shadow:0 4px 14px #000c}
#uiTip .tipn{color:#ffd94e;font-weight:700}
#uiTip .ok,.mbox .ok{color:#7cff6b}#uiTip .bad,.mbox .bad{color:#ff7b6b}
#uiTip .muted{color:#9a8f78}
.tipn{color:#ffd94e;font-weight:700}
#townBar .vosu{border-color:#e2b24a;color:#ffe08a}
#panel.pcm{padding:8px 0}
@media (min-width:900px){
  #panel.pcm{background:none;border:0;box-shadow:none;padding:0;width:auto;max-height:none;overflow:visible;right:auto;left:24px;top:60px}
  #panel.pcm[data-w=ht]{left:auto;right:190px}
  #panel.pcm .wtitle{display:none}
  #panel.pcm .pcopts{background:#000a;padding:4px 8px;border:1px solid #5d4b35;margin-top:2px}
}

#rideBtn{cursor:pointer}#rideBtn.on{border-color:#d9b25a;color:#ffe9a8}