:root{--c0:#000;--c1:#555;--c2:#aaa;--c3:#fff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg,var(--c1));color:var(--c0);
  font-family:'DotGothic16','PingFang TC','Noto Sans TC',sans-serif;font-size:16px;line-height:1.35}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
button{font:inherit;color:inherit}

.gb{max-width:460px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--c3);
  border-left:4px solid var(--c0);border-right:4px solid var(--c0);padding:10px 12px 20px;position:relative}
.demo{background:var(--c0);color:var(--c3);font-size:12px;padding:3px 8px;margin:-10px -12px 8px;text-align:center}

/* 對話框風格外框 */
.box{border:3px solid var(--c0);box-shadow:inset 0 0 0 2px var(--c3),inset 0 0 0 4px var(--c0);padding:10px 12px;background:var(--c3)}

.top{display:flex;align-items:center;gap:10px;font-size:18px;margin-bottom:6px}
.top .nm{font-weight:bold}
.top .sp{flex:1}
.top .coins{display:flex;align-items:center;gap:4px}
.tag{font-size:12px;border:2px solid var(--c0);padding:0 4px}

/* 舞台 */
.stage{position:relative;height:250px;background:var(--c3);border:3px solid var(--c0);overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center}
.stage .ground{position:absolute;left:0;right:0;bottom:0;height:34px;background:var(--c2);border-top:3px solid var(--c0)}
.stage .ground::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 14px,var(--c1) 14px 16px);opacity:.25}
.sheepwrap{position:relative;margin-bottom:4px;animation:bob 1s steps(2) infinite}
.sheepwrap.sleep{animation:none;opacity:.55}
.sheepwrap.dead{animation:none;transform:rotate(180deg);filter:grayscale(1);opacity:.7}
@keyframes bob{50%{transform:translateY(-4px)}}
.bubbles{position:absolute;left:8px;top:8px;display:flex;flex-direction:column;gap:4px;z-index:2}
.bubble{display:flex;align-items:center;gap:4px;background:var(--c3);border:2px solid var(--c0);padding:2px 5px;font-size:13px;animation:pulse 1s steps(2) infinite}
@keyframes pulse{50%{transform:translateY(-2px)}}
.fx{position:absolute;z-index:3;pointer-events:none;animation:floatup 1s steps(8) forwards}
@keyframes floatup{from{transform:translateY(0);opacity:1}to{transform:translateY(-70px);opacity:0}}

/* 數值條 */
.stats{margin:10px 0}
.row{display:flex;align-items:center;gap:8px;margin:3px 0}
.row .lb{width:46px;font-size:14px;display:flex;align-items:center;gap:4px;white-space:nowrap}
.row .num{width:64px;text-align:right;font-size:14px}
.bar{flex:1;display:flex;gap:2px;border:2px solid var(--c0);padding:2px;background:var(--c3)}
.bar i{flex:1;height:10px;background:var(--c3);border:1px solid var(--c2)}
.bar i.on{background:var(--c0);border-color:var(--c0)}
.bar.low i.on{background:var(--c1);animation:pulse 1s steps(2) infinite}

.msg{min-height:68px;margin:8px 0;font-size:15px;white-space:pre-line}
.msg .dim{opacity:.6}

/* 選單 */
.menu{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:6px 8px;cursor:pointer;
  background:var(--c3);border:3px solid var(--c0);box-shadow:3px 3px 0 var(--c0);font-size:16px}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--c0)}
.btn.sel,.btn.on{background:var(--c0);color:var(--c3)}
.btn[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none}
.btn.wide{grid-column:1/-1}
.btn small{font-size:11px;opacity:.75;display:block}
.btn .stack{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.list{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.list .btn{justify-content:space-between;text-align:left}
.list .btn .l{display:flex;align-items:center;gap:8px}
.h{font-size:18px;margin:6px 0 8px;display:flex;align-items:center;gap:8px}
.h .sp{flex:1}
.back{margin-top:12px}
.center{text-align:center;padding:40px 10px}

/* 登入／命名 */
.card{margin:30px 0}
.card h1{font-size:24px;margin:0 0 4px;text-align:center}
.card p{margin:4px 0 12px;font-size:14px;text-align:center}
.card .sheep{display:flex;justify-content:center;margin:6px 0 10px}
input[type=text],input[type=email],input[type=password]{width:100%;font:inherit;padding:10px;margin:6px 0;
  border:3px solid var(--c0);background:var(--c3);color:var(--c0);border-radius:0}
.err{color:var(--c0);background:var(--c2);border:2px solid var(--c0);padding:6px 8px;margin:6px 0;font-size:14px}

/* 戰鬥 */
.battle{position:relative;height:262px;border:3px solid var(--c0);background:var(--c3);overflow:hidden}
.battle .ground{position:absolute;left:0;right:0;bottom:0;height:20px;background:var(--c2);border-top:3px solid var(--c0)}
.panel{position:absolute;border:3px solid var(--c0);box-shadow:inset 0 0 0 2px var(--c3),inset 0 0 0 4px var(--c0);background:var(--c3);padding:6px 10px;font-size:14px}
.panel .nm{display:flex;justify-content:space-between;gap:8px}
.panel .bar{margin-top:4px}
.panel .bar i{height:7px}
.en-panel{left:8px;top:8px;width:58%}
.me-panel{right:8px;bottom:28px;width:58%}
.en-sprite{position:absolute;right:10px;top:10px}
.me-sprite{position:absolute;left:8px;bottom:22px}
.shake{animation:shake .3s steps(4)}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.cmd{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}

.foot{margin-top:14px;font-size:11px;opacity:.6;text-align:center}
.save{font-size:11px;opacity:.6}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:15px}
.kv b{font-weight:normal;opacity:.7}

.starve{font-size:13px;text-align:right;opacity:.75;margin:-4px 0 4px}
.starve.warn{opacity:1;font-weight:bold;animation:pulse 1s steps(2) infinite}

/* ───── 地圖 ───── */
.map{position:relative;height:330px;border:3px solid var(--c0);overflow:hidden;
  background:var(--c3) repeating-linear-gradient(0deg,transparent 0 22px,var(--c2) 22px 24px),
  repeating-linear-gradient(90deg,transparent 0 22px,var(--c2) 22px 24px);background-blend-mode:multiply}
.map .paths{position:absolute;inset:0;width:100%;height:100%}
.map .paths polyline{fill:none;stroke:var(--c0);stroke-width:1.2;stroke-dasharray:3 2.5}
.node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--c3);border:3px solid var(--c0);padding:6px 8px 4px;cursor:pointer;box-shadow:3px 3px 0 var(--c0);min-width:92px}
.node:active{transform:translate(-50%,-50%) translate(2px,2px);box-shadow:1px 1px 0 var(--c0)}
.node span{font-size:14px}.node small{font-size:11px;display:flex;align-items:center;gap:3px}
.node.cur{background:var(--c0);color:var(--c3)}
.node.cur canvas{filter:invert(1)}
.node.locked{opacity:.6;box-shadow:none}

/* ───── 五邊形 ───── */
.radar{position:relative;height:230px;margin:8px 0}
.radar canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:168px;height:168px}
.radar .rl{position:absolute;transform:translate(-50%,-50%);text-align:center;font-size:13px;line-height:1.15;white-space:nowrap}
.radar .rl b{display:block;font-weight:normal}
.radar .rl em{font-style:normal;font-size:15px;font-weight:bold}

/* ───── 職業卡片 ───── */
.jobcard{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:6px 8px;cursor:pointer;
  background:var(--c3);border:3px solid var(--c0);box-shadow:3px 3px 0 var(--c0)}
.jobcard:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--c0)}
.jobcard[disabled]{opacity:.45}
.jobcard .jt{display:flex;flex-direction:column;gap:2px;flex:1}
.jobcard .jt b{font-size:18px;font-weight:normal}.jobcard .jt small{font-size:12px;opacity:.85}
.sk{padding:4px 0;border-bottom:1px dashed var(--c2)}.sk:last-child{border:0}.sk.lock{opacity:.45}

/* ───── 能力配點 ───── */
.pts{margin-bottom:6px}.pts b{font-size:20px}
.arow{display:flex;align-items:center;gap:8px;margin:5px 0}
.arow .an{width:52px}.arow .av{flex:1;font-size:17px}.arow .av em{font-style:normal;opacity:.7;font-size:14px}
.sq{min-width:42px;height:38px;font-size:20px;line-height:1;background:var(--c3);border:3px solid var(--c0);cursor:pointer;box-shadow:2px 2px 0 var(--c0)}
.sq:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--c0)}
.sq[disabled]{opacity:.3;box-shadow:none;cursor:not-allowed}
.sq.wide{min-width:64px;font-size:14px;height:32px}
.irow{display:flex;align-items:center;gap:8px;margin:4px 0}.irow span{flex:1}

/* ───── 地下城 ───── */
.dhead{display:flex;align-items:center;gap:8px;font-size:15px;margin-bottom:4px}
.dhead b{font-size:22px}.dhead .sp{flex:1}
.dstage{height:170px;margin-top:8px}
.stats.mini .row{margin:2px 0}
.menu .btn small{font-size:11px}
.battle .panel .bar{margin-top:3px}
.battle .panel small{font-size:12px;display:inline-block;margin-right:6px}
.msg small{opacity:.8}

.dhead span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.dhead span.sp{flex:1}

/* ───── 好友 ───── */
.idbig{font-size:22px;letter-spacing:3px}
.addrow{display:flex;gap:8px;margin:10px 0}
.addrow input{flex:1;margin:0;font-size:18px;text-transform:uppercase;letter-spacing:2px}
.addrow .btn{min-height:0;padding:6px 12px;white-space:nowrap}
.frow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--c2)}
.frow:last-child{border:0}
.frow .dot{width:16px;text-align:center;opacity:.4}
.frow.on .dot{opacity:1}
.frow .fi{flex:1;line-height:1.3}
.frow .fi small{opacity:.8}
.frow .sq.wide{min-width:52px;margin-left:2px}

/* ───── 戰鬥場景（單人與組隊共用） ───── */
.bscene{border:3px solid var(--c0);background:var(--c3);padding:6px;position:relative}
.benemy{display:flex;align-items:flex-start;gap:6px;justify-content:space-between;padding:2px}
.benemy canvas{flex:none}
.panel2{flex:1;border:3px solid var(--c0);box-shadow:inset 0 0 0 2px var(--c3),inset 0 0 0 4px var(--c0);padding:6px 8px;font-size:14px;background:var(--c3);min-width:0}
.panel2 .nm{display:flex;justify-content:space-between;gap:6px}
.panel2 .bar{margin-top:3px}.panel2 .bar i{height:7px}
.sm{font-size:11px;line-height:1.25;opacity:.85}
.intent{margin-top:4px;font-weight:bold;font-size:13px;animation:pulse 1s steps(2) infinite}
.bparty{display:grid;gap:4px;margin-top:8px;border-top:3px solid var(--c0);padding-top:8px}
.bparty.n1{grid-template-columns:1fr;justify-items:start}
.bparty.n2{grid-template-columns:repeat(2,1fr)}.bparty.n3{grid-template-columns:repeat(3,1fr)}.bparty.n4{grid-template-columns:repeat(4,1fr)}
.bm{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3px 2px;border:2px solid transparent;min-width:0;gap:1px}
.bm.me{border:2px dashed var(--c0)}
.bm.down{opacity:.45}.bm.down canvas{transform:rotate(180deg)}
.bm .nm{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bm .bar{width:100%;padding:1px;gap:1px}.bm .bar i{height:5px;border-width:1px}
.bm .bf{min-height:14px}.bm .bf b{font-size:14px}
.acting{animation:acting .45s steps(3)}
@keyframes acting{50%{transform:translateY(-6px)}}
.binfo{text-align:center;font-size:14px;margin:6px 0 2px}
.tot{margin:8px 0}.tot .trow{display:flex;gap:6px;font-size:13px;padding:2px 0}.tot .trow b{flex:1;font-weight:normal}
.tot .trow span{width:50px;text-align:right}.tot .th{opacity:.7;border-bottom:1px dashed var(--c2)}
.floater{position:fixed;z-index:50;transform:translate(-50%,0);pointer-events:none;font-size:17px;font-weight:bold;white-space:nowrap;
  background:var(--c3);color:var(--c0);border:2px solid var(--c0);padding:0 5px;animation:fl 1.4s steps(14) forwards}
@keyframes fl{from{opacity:1;margin-top:0}to{opacity:0;margin-top:-58px}}
.floater.atk{background:var(--c0);color:var(--c3)}
.floater.crit{font-size:22px;border-width:3px}
.floater.blk{border-style:dashed;font-size:14px}
.floater.heal{background:var(--c0);color:var(--c3);border-style:double}
.floater.buff{font-size:13px;border-style:dotted}
.floater.miss,.floater.down{font-size:15px;border-style:dashed}

/* ───── 商店分頁、裝備 ───── */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
.btn.sm{min-height:34px;padding:2px 10px;font-size:14px;box-shadow:2px 2px 0 var(--c0);flex:none}

/* ───── 組隊 ───── */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.pmem{border:3px solid var(--c0);padding:6px 8px;background:var(--c3);display:flex;flex-direction:column;gap:2px;min-width:0}
.pmem.empty{border-style:dashed;opacity:.6;text-align:center;justify-content:center;min-height:84px}
.pmem.off{opacity:.55}.pmem .nm{font-size:15px}
.proster{display:flex;gap:6px;margin:6px 0}
.pr{flex:1;border:2px solid var(--c0);padding:3px 5px;font-size:12px;display:flex;flex-direction:column;min-width:0;gap:1px}
.pr.off{opacity:.5}.pr small{font-size:11px}.pr .bar i{height:5px}
.invbar{display:flex;align-items:center;gap:6px;background:var(--c0);color:var(--c3);padding:6px 8px;margin:-10px -12px 8px;font-size:13px}
.invbar span{flex:1}.invbar .sq{background:var(--c3);color:var(--c0);box-shadow:none}

/* ───── 標題、選角 ───── */
.title{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:86vh;gap:22px;text-align:center}
.logo{font-size:44px;font-weight:bold;letter-spacing:4px;border:4px double var(--c0);padding:10px 18px;background:var(--c3);box-shadow:4px 4px 0 var(--c0)}
.title .sheep{animation:bob 1.2s steps(2) infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
.bigbtn{min-height:54px;font-size:20px;width:80%;max-width:300px}
.chars{display:flex;gap:8px;margin:8px 0}
.char{flex:1;border:3px solid var(--c0);padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--c3);font-size:14px;min-height:96px;justify-content:center}
.char.sel{background:var(--c0);color:var(--c3)}.char.sel canvas{filter:invert(1)}
.char.lock{opacity:.5;border-style:dashed}
.lab{font-size:14px;margin:8px 0 4px}
.create input[type=text]{width:100%;box-sizing:border-box}

/* ───── 台灣地圖 ───── */
.crumb{display:flex;gap:6px;margin-bottom:8px}
.twmap{position:relative;height:360px;border:3px solid var(--c0);background:var(--c3);overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding-top:8px;box-sizing:border-box}
.twmap canvas{height:340px;width:auto;image-rendering:pixelated}
.rnode{position:absolute;transform:translate(-50%,0);border:3px solid var(--c0);background:var(--c3);padding:4px 8px;display:flex;flex-direction:column;align-items:center;font-size:14px;box-shadow:3px 3px 0 var(--c0);color:var(--c0);font-family:inherit}
.rnode small{font-size:11px;display:flex;align-items:center;gap:3px}
.rnode.locked{opacity:.65;box-shadow:none}

/* ───── 任務、交易、探訪、快捷訊息 ───── */
.qrow{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--c2)}
.qrow:last-child{border:none}.qrow .qi{flex:1;font-size:14px}.qrow .qprog{font-size:13px;opacity:.7}
.quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.quick .sq{min-width:auto;padding:2px 10px}
.floater.chat{background:var(--c3);color:var(--c0);border-style:solid;font-size:15px}
.cd{font-weight:bold;font-size:18px}.cd.hot{animation:hot .5s steps(2) infinite}
@keyframes hot{50%{opacity:.3}}
.dhead{display:flex;align-items:center;gap:8px;font-size:14px}

/* ───── 第二版：階級、地圖地點、標語、覺醒 ───── */
.tagline{font-size:15px;letter-spacing:2px;margin:-6px 0 8px;text-align:center}
.goal{display:flex;justify-content:center;align-items:center;gap:6px;font-size:14px;margin:6px 0}
.gr{display:inline-block;min-width:16px;text-align:center;border:2px solid var(--c0);background:var(--c3);color:var(--c0);font-size:12px;line-height:14px;padding:0 3px;margin-right:4px;vertical-align:middle}
.gr.gE{background:var(--c3)}.gr.gD,.gr.gC{background:var(--c2)}.gr.gB{background:var(--c1);color:var(--c3)}.gr.gA,.gr.gS{background:var(--c0);color:var(--c3)}
.gr.gS{border-style:double;border-width:3px}
.here{display:flex;align-items:center;gap:3px;font-size:11px}
button.char{font-family:inherit;color:inherit;cursor:pointer}
.char canvas{max-width:100%;height:auto}   /* 角色圖用整數倍放大、不縮小，避免變形 */
.map.tall{height:470px}
.node.spot{min-width:0;padding:3px 5px 2px;border-style:dashed;box-shadow:2px 2px 0 var(--c0);max-width:104px}
.node.spot span{font-size:12px;line-height:1.15;text-align:center}
.node.spot.hot{border-style:solid;border-width:4px}
.node.spot small{font-size:10px}
.node.spot.cur{background:var(--c0);color:var(--c3)}.node.spot.cur canvas{filter:invert(1)}
.intent.heavy{background:var(--c0);color:var(--c3);padding:1px 4px}
.intent.aoe{border:2px dashed var(--c0);padding:1px 4px}
.bm.tgt{border:2px solid var(--c0);box-shadow:2px 2px 0 var(--c0)}
.panel2 canvas[data-ic]{vertical-align:middle}
.irow canvas,.btn .l canvas{flex:none}
.intent canvas,.here canvas,.goal canvas,.loc canvas,.tagline canvas{display:inline-block!important;vertical-align:middle}
.chars{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px}
.char{min-height:120px!important;padding:6px 2px!important}

/* ───── 第三版：行政區地圖、地點按鈕、探索事件 ───── */
.dmap{position:relative;height:430px;border:3px solid var(--c0);background:var(--c3);overflow:hidden}
.dmap .outline{position:absolute;inset:0;width:100%;height:100%}
.dmap .outline polygon{fill:var(--c2);stroke:var(--c0);stroke-width:.7;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-width:2}
.dnode{position:absolute;transform:translate(-50%,-50%);width:42px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:13px;
  background:var(--c3);color:var(--c0);border:2px solid var(--c0);box-shadow:2px 2px 0 var(--c0);cursor:pointer}
.dnode:active{transform:translate(-50%,-50%) translate(1px,1px);box-shadow:1px 1px 0 var(--c0)}
.dnode.sel{background:var(--c0);color:var(--c3)}
.dnode.done{opacity:.6}
.dnode.cur{border-width:3px}
.dnode .mk{position:absolute;top:-8px;right:-8px;min-width:14px;height:14px;border-radius:7px;background:var(--c0);color:var(--c3);font-style:normal;font-size:11px;line-height:14px;text-align:center;border:1px solid var(--c3)}
.dnode canvas{position:absolute;top:-18px;left:50%;transform:translateX(-50%)}
.mk2{display:inline-block;min-width:14px;height:14px;border-radius:7px;background:var(--c0);color:var(--c3);font-size:11px;line-height:14px;text-align:center}
.hint{font-size:12px;margin:4px 0;opacity:.8}.hint canvas{display:inline-block!important;vertical-align:middle}
.places{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px;margin:4px 0}
.places .btn{flex-direction:column;gap:2px;padding:6px 4px;min-height:64px}
.places .btn canvas[data-place]{width:32px!important;height:32px!important}
.places .btn.on canvas{filter:invert(1)}
.slv{display:inline-block;border:1px solid var(--c0);font-size:11px;padding:0 3px;font-weight:normal}

/* ───── 第四版：任務地點節點、放大鏡 ───── */
.dmap{height:470px}
.snode{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1px;width:92px;padding:3px 3px 2px;font-family:inherit;color:var(--c0);
  background:var(--c3);border:3px dashed var(--c0);box-shadow:2px 2px 0 var(--c0);cursor:pointer;line-height:1.15}
.snode span{font-size:12px;text-align:center;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snode small{font-size:10px;white-space:nowrap}
.snode.acc{border-style:solid;border-width:4px}
.snode.ext{border-style:double;border-width:5px}
.snode.sel{background:var(--c0);color:var(--c3)}.snode.sel canvas:not(.pin){filter:invert(1)}
.snode .pin{position:absolute;top:-18px;left:50%;transform:translateX(-50%)}
.snode:active{transform:translate(-50%,-50%) translate(1px,1px);box-shadow:1px 1px 0 var(--c0)}
.dmap .empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;padding:20px}
.mapbar{display:flex;justify-content:flex-end;margin:0 0 6px}
.btn.mag{flex-direction:row;gap:8px;padding:6px 12px;min-height:44px;width:100%;justify-content:center}
.btn.mag span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.btn.mag small{font-size:11px}
.btn.mag.on canvas{filter:invert(1)}
.snode{width:88px!important}.snode span{font-size:11px!important}

/* 地點之間用線連起來，不畫地區形狀 */
.dmap{background:var(--c3) repeating-linear-gradient(0deg,transparent 0 22px,var(--c2) 22px 24px),repeating-linear-gradient(90deg,transparent 0 22px,var(--c2) 22px 24px);background-blend-mode:multiply}
.dmap .outline line{stroke:var(--c0);stroke-width:2;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.snode.none{opacity:.7;border-width:2px}

/* ───── 地圖按鈕：大小不一、直線連線、按鈕不透出底下的線 ───── */
.dmap{height:520px}
.dmap .outline polyline{fill:none;stroke:var(--c0);stroke-width:3;stroke-linejoin:miter;stroke-linecap:square;vector-effect:non-scaling-stroke}
.dmap .outline line{display:none}
.snode{border-style:solid!important;border-width:3px!important;background:var(--c3)!important;box-shadow:3px 3px 0 var(--c0)!important;width:auto!important;padding:3px 2px 2px!important}
.snode.sz1{width:21%!important;padding:2px 1px!important}.snode.sz1 span{font-size:10px!important}.snode.sz1 small{font-size:9px!important}
.snode.sz2{width:27%!important}
.snode.sz3{width:34%!important;padding:5px 3px 3px!important}.snode.sz3 span{font-size:13px!important}.snode.sz3 small{font-size:11px!important}
.snode.acc{border-width:5px!important}
.snode.ext{border-style:double!important;border-width:6px!important}
.snode.none{opacity:1!important;border-width:2px!important;color:var(--c1)!important;border-color:var(--c1)!important;box-shadow:2px 2px 0 var(--c2)!important}
.snode.sel{background:var(--c0)!important;color:var(--c3)!important;border-color:var(--c0)!important}
.snode span{max-width:100%}

.snode{position:absolute}
.snode .nodegr{position:absolute;top:-8px;right:-8px;margin:0;font-size:11px;line-height:13px;box-shadow:1px 1px 0 var(--c0)}
.snode.lock{color:var(--c1)!important;border-color:var(--c1)!important;box-shadow:2px 2px 0 var(--c2)!important}
.snode.sel .nodegr{background:var(--c3);color:var(--c0)}

/* 教學與契約彈窗 */
.tutmask{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.tutbox{max-width:380px;width:100%;max-height:86vh;overflow:auto;background:var(--c3)}
.tuttitle{display:flex;align-items:center;gap:6px;font-size:20px;font-weight:bold;margin-bottom:6px}
.tutbox ul,.tutbox ol{margin:4px 0 10px;padding-left:20px;font-size:14px}
.tutbox li{margin:3px 0}
.tutbox .btn{margin-top:4px}
.contract .tuttitle{justify-content:center;font-size:22px;letter-spacing:4px}
.contractbody{font-size:14px}
.contractbody p{margin:4px 0;text-align:left}
.contractbody input{width:100%;margin-top:4px}
.contract .menu{margin-top:10px}
.helpbtn{position:fixed;bottom:12px;right:max(12px,calc(50vw - 218px));width:34px;height:34px;border:3px solid var(--c0);background:var(--c3);font-size:18px;font-weight:bold;z-index:40;box-shadow:2px 2px 0 var(--c0);padding:0;cursor:pointer}
.tutbox .btn.wide{width:100%}
.contract .menu{display:grid;grid-template-columns:1fr 2fr;gap:8px}

.sndbtn{position:fixed;bottom:12px;right:calc(max(12px,calc(50vw - 218px)) + 42px);height:34px;min-width:34px;padding:0 6px;border:3px solid var(--c0);background:var(--c3);font-size:16px;font-weight:bold;z-index:40;box-shadow:2px 2px 0 var(--c0);cursor:pointer}
.sndbtn.off{opacity:.6;text-decoration:line-through}
.sndbox .arow{margin:10px 0}

.logoimg{display:block;width:100%;max-width:360px;height:auto;margin:6px auto 4px;border:4px solid var(--c0);image-rendering:pixelated;image-rendering:crisp-edges}
.title{display:flex;flex-direction:column;align-items:center}
/* 選角色：所有卡片（含「敬請期待」）固定一樣大、一樣高、內容置中 */
.chars{grid-auto-rows:136px}
.char,.char.lock{height:136px!important;min-height:136px!important;max-height:136px!important;padding:6px 2px!important;box-sizing:border-box;justify-content:center;align-items:center}
.char.lock canvas{margin:0}

/* 場景背景（scenes.js 產生的像素圖） */
.hasbg{background-size:100% 100%;background-repeat:no-repeat;background-position:center bottom;image-rendering:pixelated;image-rendering:crisp-edges}
.stage.hasbg .ground{display:none}
.stage.hasbg .bubbles .bubble{background:var(--c3)}
.benemy.hasbg{min-height:226px;border:3px solid var(--c0);padding:6px;align-items:stretch}
.benemy.hasbg .panel2{align-self:flex-start;max-width:58%}
.benemy.hasbg>canvas{align-self:flex-end}
.bscene .bparty{background:var(--c3);padding:6px;margin-top:6px;border:3px solid var(--c0)}

/* 技能天賦樹、配招 */
.tagc{display:inline-block;font-size:11px;border:2px solid var(--c0);padding:0 4px;margin-left:2px;vertical-align:middle;line-height:1.3}
.t-break,.t-burst{background:var(--c0);color:var(--c3)}.t-bind,.t-poison{background:var(--c1);color:var(--c3)}.t-flurry,.t-mark{background:var(--c2)}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.slotb{border:3px solid var(--c0);background:var(--c3);min-height:64px;padding:4px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:13px;cursor:pointer}
.slotb.sel{background:var(--c0);color:var(--c3)}.slotb small{font-size:11px}
.tnode{margin-top:8px}
.sk2{border:3px solid var(--c0);padding:6px 8px;background:var(--c3);font-size:14px}
.sk2.off{opacity:.75;border-style:dashed}
.skh{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ska{display:flex;gap:6px;margin-top:4px;align-items:center}
.sbn{opacity:.8}
.tex{margin-left:14px;border-left:3px solid var(--c0);padding-left:4px}
.tbr{display:flex;gap:2px;align-items:flex-start;margin-top:4px}.tbr .tl{width:12px;font-size:16px;line-height:1.3;margin-left:-14px;background:var(--c3)}.tbr .sk2{flex:1;font-size:13px}

/* ───── 固定畫面：整個遊戲鎖在手機螢幕大小，不用放大縮小、不用上下滑；放不下的內容自動分頁 ───── */
html,body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
body{position:fixed;inset:0;width:100%}
.gb{height:100vh;height:100dvh;min-height:0;max-height:100dvh;display:flex;flex-direction:column;overflow:hidden;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
.demo{margin:-6px -8px 4px;flex:none}
.invbar{margin:-6px -8px 4px;flex:none}
.scr{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:5px;overflow:hidden;position:relative}
.scr>*{flex:none;margin-top:0!important;margin-bottom:0!important}
.scr>.fill{flex:1 1 0;min-height:0;overflow:hidden}
.scr>.keep{flex:none}
.pgh{display:none!important}
.scr .h{margin:0;font-size:17px}
.scr .top{margin:0;font-size:16px}
.scr .btn{min-height:42px;font-size:15px}
.scr .btn.back{margin-top:0}
.scr .box{padding:6px 9px}
.scr .msg{min-height:0;margin:0;font-size:14px}
.scr .list{margin:0;gap:6px}
.scr .stats{margin:0}
.scr .stats .row{margin:2px 0}
.scr .foot{margin:0}
.scr.tight{gap:3px;font-size:14px}
.scr.tight .btn{min-height:36px;padding:3px 6px;font-size:14px}
.scr.tight .box{padding:4px 7px}
.scr.tight .h{font-size:15px}
.pager{display:flex;gap:6px;align-items:center;justify-content:center}
.pager .btn{min-height:34px;min-width:64px;padding:2px 10px}
.pager span{font-size:14px;min-width:54px;text-align:center}
.tabs2{display:flex;gap:4px}
.tabs2 .btn{flex:1;min-height:36px;padding:2px 4px;font-size:14px;box-shadow:2px 2px 0 var(--c0)}
.tabs2.wrap{flex-wrap:wrap}.tabs2.wrap .btn{flex:1 1 18%}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:30;background:var(--c3);border:3px solid var(--c0);box-shadow:0 -4px 0 var(--c0);padding:6px;display:flex;flex-direction:column;gap:5px;max-height:70%;overflow:hidden}
.stage{height:clamp(110px,24dvh,230px)}
.dstage{height:clamp(90px,20dvh,160px)}
.benemy.hasbg{min-height:clamp(120px,24dvh,200px)}
@media (max-height:640px){.stage{height:clamp(90px,20dvh,200px)}}
.title .logoimg{max-height:34dvh;width:auto;max-width:100%}
.title{min-height:0}

/* ───── 固定畫面：各畫面的緊湊版型 ───── */
.scr>.stage.fill{height:auto;min-height:0}
.scr>.stage.fill .sheepwrap canvas{max-height:78%;width:auto;max-width:100%}
.scr>.stage.fill .sheepwrap{max-height:92%;display:flex;align-items:flex-end}
.chips{display:flex;flex-wrap:wrap;gap:3px;font-size:12px;line-height:1.2}
.chip{border:2px solid var(--c0);padding:0 5px;background:var(--c3);white-space:nowrap}
.chip.good{background:var(--c0);color:var(--c3)}.chip.bad{border-style:dashed;background:var(--c2)}
.stats2{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
.stats2 .r2{display:flex;align-items:center;gap:4px;font-size:12px;min-width:0}
.stats2 .r2 .lb{width:44px;display:flex;align-items:center;gap:2px;white-space:nowrap;flex:none}
.stats2 .r2 .bar{padding:1px;gap:1px}.stats2 .r2 .bar i{height:6px}
.stats2 .r2 .num{width:42px;text-align:right;font-size:11px;flex:none}
.menu.m4{grid-template-columns:repeat(4,1fr);gap:5px}
.menu.m3{grid-template-columns:repeat(3,1fr);gap:5px}
.menu.m4 .btn,.menu.m3 .btn{padding:3px 2px;flex-direction:column;gap:1px;font-size:13px;min-height:46px}
.msg1{min-height:0;font-size:13px;padding:3px 8px!important;white-space:pre-line;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.scr>.dmap.fill{height:auto;min-height:0}
.scr>.twmap.fill,.scr>.map.fill{height:auto;min-height:0}
.placesrow{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.placesrow .btn{flex-direction:column;gap:0;padding:2px 1px;min-height:44px;font-size:11px;box-shadow:2px 2px 0 var(--c0)}
.placesrow .btn canvas[data-place]{width:24px!important;height:24px!important}
.placesrow .btn.on canvas{filter:invert(1)}
.exprow{display:flex;gap:5px}
.exprow .btn{min-height:38px}
.sheet .qrow{padding:3px 0}
.sheet .qi{font-size:12px}
.sheet .qi .desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sheet .close{position:absolute;top:2px;right:4px;min-width:30px;height:28px}
.scr>.bscene.fill{display:flex;flex-direction:column;padding:4px;min-height:0;overflow:hidden}
.bscene.fill .benemy{flex:1 1 0;min-height:0}
.bscene.fill .benemy.hasbg{min-height:0}
.bscene.fill .bparty{flex:none;margin-top:4px;padding-top:4px}
.bscene.fill .benemy canvas[data-mon]{max-height:96%;width:auto}
.binfo{margin:0;font-size:13px}
.bm .sm.bf{min-height:12px}
.bm sprite,.bm canvas{max-height:40px;width:auto}
.cmd.c3{grid-template-columns:repeat(3,1fr);gap:5px;margin-top:0}
.cmd{margin-top:0;gap:5px}
.cmd .btn{min-height:42px}
.rpgtop{display:flex;gap:6px;align-items:center}
.rpgtop .radar{flex:none;width:150px;height:150px;margin:0}
.rpgtop .radar canvas{width:110px;height:110px}
.rpgtop .arows{flex:1;min-width:0}
.rpgtop .arow{margin:2px 0}.rpgtop .arow .an{width:34px;font-size:14px}.rpgtop .sq{height:30px;min-width:34px}
.sk2.c{display:flex;gap:6px;align-items:center;padding:4px 6px}
.sk2.c .skt{flex:1;min-width:0;font-size:13px}
.sk2.c .ska{flex-direction:column;margin:0;gap:3px}
.sk2.c .ska .sq{width:78px;min-width:0}
.sk2.c small{font-size:11px;display:block;line-height:1.2}
.sk2.c .skd{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tnode .tex{margin-left:10px}
.slots.big{grid-template-columns:repeat(2,1fr)}
.slots.big .slotb{min-height:58px}
.cardlist{display:flex;flex-direction:column;gap:4px}
.cardlist>*{flex:none}

.radar.sm{height:150px;margin:0;flex:none}
.radar.sm canvas{width:104px;height:104px}
.radar.sm .rl{font-size:11px}.radar.sm .rl em{font-size:12px}
.quickg{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.quickg .sq{width:auto;min-width:0;height:36px;font-size:14px}
.stt{font-size:10px;border:1px solid var(--c0);padding:0 3px;margin-left:2px}.stt.g{background:var(--c0);color:var(--c3)}.stt.b{background:var(--c2)}
.bm .nm small{font-size:10px;opacity:.7}
.bm .nm{font-size:12px}
.bm canvas{max-height:36px}
.bparty{gap:3px}
.dhead.keep{margin:0}
.proster.keep{display:flex;gap:4px;font-size:11px}
.pgrid.keep{gap:4px;margin:0}
.pmem{padding:3px 6px}
.pmem.empty{min-height:56px}

.scr>.title,.scr>.card{flex:1 1 0;min-height:0;justify-content:center;overflow:hidden;margin:0;gap:10px}
.scr>.title .tagline{font-size:14px}
.scr>.title .bigbtn{min-height:50px}
/* 說明／聲音按鈕移到右上角，不遮住下面的操作區 */
.helpbtn,.sndbtn{top:calc(6px + env(safe-area-inset-top,0px));bottom:auto;height:26px;min-width:26px;width:auto;font-size:13px;padding:0 5px;box-shadow:2px 2px 0 var(--c0)}
.helpbtn{right:max(8px,calc(50vw - 222px));width:26px}
.sndbtn{right:calc(max(8px,calc(50vw - 222px)) + 32px)}
.scr .top{padding-right:66px}
.scr>.back.keep,.scr>.bottom{margin-top:auto!important}
.sk2.c{padding:2px 5px;gap:4px;border-width:2px}
.sk2.c .skd{-webkit-line-clamp:2;font-size:10.5px}
.sk2.c .ska{gap:2px}.sk2.c .ska .sq{height:25px;font-size:12px;width:70px;box-shadow:1px 1px 0 var(--c0);border-width:2px}
.sk2.c .skh{gap:3px;font-size:13px}
.tnode .tex{margin-left:8px;border-left-width:2px}
.tbr{margin-top:2px}

/* ───── v27：按鈕加大、羊窩正方形舞台、單人戰鬥橫幅、選角預覽、輸入框不再觸發放大 ───── */
input,select,textarea,.contractbody input{font-size:16px!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.scr .btn{min-height:50px;font-size:16px;padding:6px 10px}
.scr .btn canvas[data-ic]{flex:none}
.menu.m4,.menu.m3{gap:6px}
.menu.m4 .btn,.menu.m3 .btn{min-height:58px;font-size:15px;gap:3px;padding:4px 2px}
.menu.big .btn{min-height:64px;font-size:16px}
.menu.m3.big{gap:8px}
.menu.m4.big{gap:6px}
.menu.big .btn small{font-size:11px}
.tabs2{gap:5px}
.tabs2 .btn{min-height:44px;font-size:15px}
.cmd{gap:6px}.cmd .btn{min-height:54px;font-size:16px}
.cmd.c3 .btn{flex-direction:column;gap:2px;font-size:15px;min-height:58px}
.pager .btn{min-height:44px;min-width:92px;font-size:15px}
.sq{height:44px;min-width:48px;font-size:22px}
.rpgtop .sq{height:40px;min-width:44px}
.sq.wide{height:38px;min-width:72px;font-size:15px}
.placesrow .btn{min-height:56px;font-size:12px}
.placesrow .btn canvas[data-place]{width:28px!important;height:28px!important}
.exprow .btn{min-height:48px}
.scr .list .btn{min-height:54px}
.scr.tight .btn{min-height:44px;font-size:15px}
.scr.tight .menu.m4 .btn,.scr.tight .menu.m3 .btn{min-height:50px}
.chip{font-size:13px;padding:1px 6px}
.chip canvas,.stt canvas,.bm .bf canvas{display:inline-block!important;vertical-align:middle;margin:0 1px}
.chip.good canvas,.stt.g canvas{filter:invert(1)}
.stats2 .r2{font-size:13px}
.stats2 .r2 .bar i{height:7px}
.sheet .close{min-width:40px;height:36px}

/* 羊窩：舞台用正方形 */
.scr>.stage.fill.sq1{flex:1 1 0;min-height:0;align-self:center;width:auto;aspect-ratio:1/1;max-width:100%;max-height:calc(min(100vw,460px) - 16px);height:auto}
.scr>.stage.fill.sq1 .sheepwrap canvas{max-height:100%;max-width:100%}
.scr>.stage.fill.sq1 .sheepwrap{max-height:100%}
.scr>.stage.fill.sq1~.msg1{margin-top:auto!important}

/* 選角：上方預覽 */
.cprev{display:flex;gap:10px;align-items:center;border:3px solid var(--c0);padding:6px 8px;background:var(--c3)}
.cprev .cpic{flex:none;border:3px solid var(--c0);background:var(--c2);padding:2px;display:flex}
.cprev .cpic canvas{height:min(104px,15dvh)!important;width:auto!important}
.cprev .cinfo{display:flex;flex-direction:column;gap:2px;min-width:0}
.cprev .cinfo b{font-size:20px;font-weight:normal}
.cprev .cinfo span{font-size:15px;border:2px solid var(--c0);padding:0 6px;align-self:flex-start;background:var(--c0);color:var(--c3)}
.cprev .cinfo small{font-size:12px;opacity:.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 戰鬥：對手置中、單人時自己是橫幅 */
.benemy,.benemy.hasbg{flex-direction:column;align-items:stretch;justify-content:flex-start}
.benemy.hasbg .panel2,.benemy .panel2{align-self:stretch;max-width:100%;flex:none}
.benemy .esp{flex:1 1 0;min-height:0;position:relative;display:block}
.benemy .esp canvas{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);height:100%;width:auto;max-height:none;max-width:100%;object-fit:contain}
.bscene.fill .benemy .esp canvas[data-mon]{max-height:none;height:100%;width:auto}
.bparty.solo{display:block}
.bm.solo{flex-direction:row;align-items:center;text-align:left;gap:10px;padding:4px 6px;border:2px dashed var(--c0);width:100%}
.bm.solo>canvas{flex:none;width:64px;height:64px;max-height:none;border:2px solid var(--c0);background:var(--c2);padding:1px}
.bm.solo .bi{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bm.solo .nm{font-size:15px;max-width:100%}
.bm.solo .r2{display:flex;align-items:center;gap:4px;font-size:12px}
.bm.solo .r2 .lb{width:24px;flex:none}
.bm.solo .r2 .bar{flex:1}.bm.solo .r2 .bar i{height:7px}
.bm.solo .r2 .num{width:64px;text-align:right;flex:none;font-size:12px}
.bm.solo .sm.bf{min-height:14px;font-size:12px}
.scr>.menu.grow{flex:1 1 0;min-height:0;max-height:460px;grid-auto-rows:1fr}
.scr>.menu.grow .btn{min-height:0;height:100%;font-size:17px}
.benemy .panel2{padding:3px 8px;font-size:13px}
.benemy .panel2 .intent{margin-top:2px;font-size:13px}
.dhead b{display:flex;align-items:center;gap:6px}

/* ───── v33：屬性標籤、勝利／升級／覺醒／對戰結算畫面、拼圖 ───── */
.elc{display:inline-block;font-size:11px;line-height:1.3;border:2px solid var(--c0);padding:0 4px;margin-left:3px;vertical-align:middle;background:var(--c3);color:var(--c0)}
.elc.e-fire{background:var(--c0);color:var(--c3)}
.elc.e-water{background:var(--c1);color:var(--c3)}
.elc.e-wind{background:var(--c2)}
.elc.e-thunder{background:var(--c3);border-style:dashed}
.elc.e-earth{background:var(--c2);border-style:double;border-width:3px;padding:0 3px}
.elc.e-light{background:var(--c3);border-style:double;border-width:3px;padding:0 3px}
.elc.e-dark{background:var(--c0);color:var(--c3);border-style:dashed;border-color:var(--c2)}
.benemy .panel2 .elc{font-size:11px}
.echart{width:100%;border-collapse:collapse;table-layout:fixed;font-size:15px;text-align:center}
.echart th,.echart td{border:2px solid var(--c2);padding:1px 0;height:26px}
.echart th .elc{margin:0}
.echart .ce2{background:var(--c0);color:var(--c3);font-weight:bold}
.echart .ce0{background:var(--c2)}

/* 勝利畫面 */
.scr>.vict.fill{display:flex;flex-direction:column;align-items:center;justify-content:space-between;border:3px solid var(--c0);padding:6px;min-height:0}
.vtxt{max-width:100%;height:auto!important}
.vheroes{display:flex;gap:10px;align-items:flex-end;justify-content:center;flex:1 1 0;min-height:0;width:100%;padding-bottom:4px}
.vh{display:flex;flex-direction:column;align-items:center;gap:2px;animation:bob 1s steps(2) infinite}
.vh canvas[data-char]{height:min(150px,20dvh)!important;width:auto!important}
.vheroes.n3 .vh canvas[data-char],.vheroes.n4 .vh canvas[data-char]{height:min(76px,11dvh)!important;width:auto!important}
.vh small{background:var(--c3);border:2px solid var(--c0);padding:0 5px;font-size:12px}
.vh.down{filter:grayscale(1);opacity:.6;animation:none}
.vrew .sk{font-size:13px}.vrew b{font-size:15px}

/* 升級／覺醒彈窗 */
.popmask{z-index:60}
.popbox{text-align:center;max-height:92dvh}
.popbox canvas[data-txt]{margin:0 auto 2px;max-width:100%;height:auto!important}
.popsheep{display:flex;justify-content:center;align-items:center;gap:8px;margin:2px 0}
.popsheep canvas[data-char]{height:min(120px,16dvh)!important;width:auto!important}
.popjob{display:flex;align-items:center;justify-content:center;gap:8px;font-size:19px;margin:4px 0}
.popbox .sk{text-align:left;font-size:13px}
.popbox .kv{text-align:left}

/* 區域碎片拼圖 */
.pzgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pzc{aspect-ratio:88/64;border:3px solid var(--c0);background:var(--c2);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;font-size:11px}
.pzc.has span{position:absolute;left:0;right:0;bottom:0;background:var(--c3);border-top:2px solid var(--c0);text-align:center;font-size:11px;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 對戰結算 */
.scr>.duelres.fill{display:flex;border:3px solid var(--c0);padding:6px;min-height:0}
.drow{width:100%;display:flex;align-items:flex-end;justify-content:space-around;gap:10px}
.dwin{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;animation:bob 1s steps(2) infinite}
.dwin canvas[data-char]{height:min(170px,24dvh)!important;width:auto!important}
.dlose,.dside{display:flex;flex-direction:column;align-items:center;gap:2px}
.dlose canvas[data-char]{height:min(78px,11dvh)!important;width:auto!important;filter:grayscale(1)}
.dside canvas[data-char]{height:min(110px,16dvh)!important;width:auto!important}
.dwin b,.dside b{background:var(--c3);border:2px solid var(--c0);padding:0 6px}
.dwin small,.dlose small{background:var(--c3);border:2px solid var(--c0);padding:0 5px;font-size:12px}
.dbubble{position:absolute;left:58%;top:34%;max-width:150px;background:var(--c3);border:3px solid var(--c0);padding:2px 8px;font-size:14px;z-index:2;animation:pulse 1s steps(2) infinite}
.tauntq{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.tauntq .btn{min-height:40px;font-size:14px;padding:2px 4px}
.tauntin{display:flex;gap:5px}
.tauntin input{flex:1;margin:0;min-width:0}
.tauntin .btn{min-width:84px;min-height:44px}

.trow canvas{display:inline-block!important;vertical-align:middle;margin-right:2px}
.scr .tabs2 .btn{padding:2px 2px;white-space:nowrap;font-size:15px}
.scr .tabs2.wrap .btn{white-space:normal}

.efl{gap:4px!important}
.efr{display:grid;grid-template-columns:1fr 76px;grid-template-rows:auto auto;column-gap:8px;align-items:center}
.efr .efn{grid-column:1;display:flex;align-items:center;gap:3px;font-size:14px}
.efr .bar{grid-column:1}.efr .bar i{height:7px}
.efr .sq{grid-column:2;grid-row:1/3;height:40px;min-width:0;width:76px}
.stt.ail{border-style:dashed;font-weight:bold}
.stt.ail{padding:0 4px;font-size:11px}

/* v36：屬性圖示、攻擊特效、雙屬性按鈕 */
.elc canvas{display:inline-block!important;vertical-align:middle;margin-right:2px}
.elc.e-fire canvas,.elc.e-water canvas,.elc.e-dark canvas{filter:invert(1)}
.fxc{position:fixed;z-index:70;pointer-events:none;image-rendering:pixelated}
.efbt{display:flex;gap:4px;grid-column:2;grid-row:1/3}
.efbt .sq{flex:1;min-width:0;width:auto;height:40px;font-size:15px}

/* v37：目標、成就、稱號、排行 */
.goal{display:grid;grid-template-columns:1fr auto;gap:1px 8px;border:3px solid var(--c0);padding:4px 8px;background:var(--c3);align-items:center}
.goal>.gt{grid-column:1;font-size:15px}.goal>.bar{grid-column:1}.goal>.gn{grid-column:1;font-size:12px;opacity:.85}
.goal>.sq{grid-column:2;grid-row:1/5;align-self:center;width:70px;min-width:0;height:44px}
.goal>.bar i{height:7px}
.goal.lockd{opacity:.6;border-style:dashed}
.goal.minerow{background:var(--c2)}
.top .tag.ttl{background:var(--c0);color:var(--c3)}
.sheepwrap .hat{position:absolute;left:50%;top:-6%;transform:translateX(-50%);z-index:2}
.sheepwrap .hat canvas{max-height:none!important;max-width:none!important}
.top .nm{white-space:nowrap}
.top .tag.ttl{max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.top .tag{white-space:nowrap}
.goal{padding:2px 8px;gap:0 8px}
.goal>.gt{font-size:14px}
.goal>.gn{font-size:11px}
.goal>.sq{height:38px;width:64px}

.snode{overflow:visible}
.snode .mk{position:absolute;left:-7px;top:-9px;display:flex;align-items:center;gap:2px;background:var(--c3);border:2px solid var(--c0);padding:0 3px;font-style:normal;z-index:3}
.snode .mk small{font-size:10px;line-height:1}
.snode .mk.ok{background:var(--c0)}
.snode .mk.ok canvas{filter:invert(1)}

.toast{position:fixed;left:50%;top:max(10px,env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:90;max-width:88vw;background:var(--c0);color:var(--c3);border:3px solid var(--c3);box-shadow:0 0 0 3px var(--c0);padding:6px 12px;font-size:14px;animation:pulse 1s steps(2) infinite;transition:opacity .4s}
.toast.out{opacity:0}

/* v38：練功房、受傷閃光 */
.gsk{border:3px solid var(--c0);padding:4px 8px;background:var(--c3);display:grid;grid-template-columns:1fr auto;gap:1px 8px;align-items:center}
.gsk.got{background:var(--c2)}
.gsk .gst{grid-column:1;font-size:14px}.gsk .gsd{grid-column:1;font-size:11px;opacity:.85;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gsk .gsb{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;gap:3px;align-items:center}
.gsk .gsb .sq{width:74px;min-width:0;height:36px;font-size:13px}
.flash canvas,.flash.bm,.flash.panel2{filter:invert(1)}
.menu.m3.big .btn{min-height:56px}

/* v39：16 屬性標籤、天氣 */
.elc.e-ice{background:var(--c2);border-style:dashed}
.elc.e-poison{background:var(--c1);color:var(--c3);border-style:dashed}
.elc.e-steel{background:var(--c2);border-width:3px}
.elc.e-dragon{background:var(--c0);color:var(--c3);border-style:double;border-width:3px}
.elc.e-ghost{background:var(--c3);color:var(--c1);border-style:dotted}
.elc.e-fairy{background:var(--c3);border-style:dotted;border-width:3px}
.elc.e-fight{background:var(--c1);color:var(--c3)}
.elc.e-sound{background:var(--c3);border-style:dashed;border-width:3px}
.elc.e-void{background:var(--c0);color:var(--c3);border-style:dotted;border-color:var(--c2)}
.echart.c16{font-size:10px}
.echart.c16 th,.echart.c16 td{height:18px;padding:0}
.echart.c16 th .elc{font-size:9px;padding:0 1px;border-width:1px;margin:0}
.echart.c16 th .elc canvas{display:none!important}
.wch{display:inline-block;font-size:12px;border:2px solid var(--c0);padding:0 5px;background:var(--c0);color:var(--c3);margin-right:6px}
.echart.c16 th,.echart.c16 td{border-width:1px;height:15px;line-height:13px;font-size:9px}
.echart.c16 th .elc{line-height:11px}

/* v40：預覽、圖鑑 */
.qbtns{display:flex;flex-direction:column;gap:4px;align-items:stretch;flex:none}
.qbtns .sq{min-width:64px}
.mrow canvas{flex:none}
.mrow.unk canvas,canvas.sil{filter:brightness(0) contrast(1);opacity:.55}
.irow.unk{opacity:.85}

.dmap{overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.dmap .dinner{position:relative;width:100%;min-height:100%}
.snode.sz1{width:21%!important}.snode.sz2{width:28%!important}.snode.sz3{width:31%!important}

.pzgrid.fill{overflow-y:auto;min-height:60px;align-content:start;-webkit-overflow-scrolling:touch}
.pzgrid.many{grid-template-columns:repeat(4,1fr);gap:4px}
.pzgrid.many .pzc span{font-size:10px}

/* v41：裝備總覽、強化 */
.gslot .gsn{display:inline-block;min-width:40px;font-weight:bold;font-size:13px}
.gslot .stack small{white-space:normal;text-align:left}
.gtab{width:100%;border-collapse:collapse;text-align:center;font-size:13px}
.gtab th,.gtab td{border:2px solid var(--c2);padding:2px 1px}
.elgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:4px}
.elgrid .sq{display:flex;flex-direction:column;align-items:center;height:auto;min-width:0;padding:2px 0}
.elgrid .sq .elc{margin:0;font-size:11px}

/* v42：隱藏能力 */
.hrow{border:2px solid var(--c0);padding:3px 6px;background:var(--c3);gap:6px}
.hrow.on{background:var(--c2)}
.hrow.unk{opacity:.8;border-style:dashed}
.hrow .gr{margin-right:4px}

/* v43：繪圖、衣櫥、公會 */
.drawwrap{display:flex;gap:8px;align-items:flex-start;justify-content:center}
#drawcv{image-rendering:pixelated;border:3px solid var(--c0);touch-action:none;background:#eee}
.drawprev{display:flex;flex-direction:column;align-items:center;gap:2px}
.drawprev canvas{border:2px dashed var(--c2);background:#eee}
.gtag{display:inline-flex;align-items:center;gap:2px;font-size:11px;margin:0 3px;padding:0 3px;border:2px solid var(--c0);background:var(--c3);vertical-align:middle}
.gtag canvas{width:12px!important;height:12px!important}
.bdgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;overflow-y:auto;min-height:60px;align-content:start}
.bdg{padding:2px;border:2px solid var(--c2);background:var(--c3);display:flex;justify-content:center}
.bdg.sel{border-color:var(--c0);background:var(--c2)}
.bdg canvas{width:100%!important;height:auto!important;max-width:30px}
.wrow{border:2px solid var(--c0);padding:3px 6px;background:var(--c3)}.wrow.on{background:var(--c2)}
.fxdot{display:inline-block;width:18px;height:18px;border:2px solid var(--c0);border-radius:50%}
.gtag{white-space:nowrap}
.top .gtag{max-width:84px;overflow:hidden;text-overflow:ellipsis}

/* v43b：按鈕統一、地圖置中、訊息框變大、Boss 特效、通知視窗 */
.menu.uni{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:6px}
.menu.uni .btn{min-height:48px;height:100%;font-size:14px;flex-direction:column;gap:2px;padding:3px 2px;width:auto}
.scr>.menu.uni.grow{max-height:none}
.scr>.menu.uni.grow .btn{font-size:15px}
.btn.mapbtn,.menu .btn.mapbtn{background:var(--soft,#dcdcdc)!important}
.btn.mapbtn:active{background:var(--soft-act,#bdbdbd)!important}
.twmap{align-items:center!important;padding-top:0!important}
.twin{position:relative;height:min(94%,540px);aspect-ratio:36/64}
.twin canvas{width:100%!important;height:100%!important;image-rendering:pixelated}
.twin .rnode{transform:translate(-50%,0)}
.scr .msglog{flex:1 1 auto;min-height:56px;max-height:130px;font-size:14px;padding:8px 10px!important;-webkit-line-clamp:4;display:flex!important;align-items:center;justify-content:flex-start;white-space:pre-line}
.scr .box.msg1{font-size:14px}
@keyframes bosspulse{0%,100%{filter:drop-shadow(0 0 2px #000)}50%{filter:drop-shadow(0 0 7px #000) brightness(1.08)}}
canvas.bossfx{animation:bosspulse 1.4s steps(4) infinite}
canvas.minifx{filter:drop-shadow(0 0 3px #000)}
.notemask{z-index:10050}
.notebox{width:min(86vw,320px);padding:14px 16px!important}
.notebox .tuttitle{font-size:18px}
.notebox .notebody{font-size:15px;line-height:1.6;margin:10px 0;white-space:pre-line}
.scr:has(.bscene.fill) .msglog{flex:none;min-height:40px;max-height:58px;font-size:13px;padding:4px 8px!important;-webkit-line-clamp:2}
.scr:has(.bscene.fill) .cmd .btn{min-height:44px;font-size:15px;padding-top:2px;padding-bottom:2px}
.scr:has(.bscene.fill) .cmd.c3 .btn{min-height:46px;font-size:14px}
.benemy .esp{min-height:84px}
.benemy .esp canvas{height:100%!important;width:auto!important;max-height:100%!important}
.scr:has(.bscene.fill) .cmd [data-act="b-flee"]{min-height:34px!important}
.bm.solo .sm.bf{display:flex;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;max-height:18px}
.bscene.fill .benemy .panel2 .intent{font-size:12px;margin-top:1px}
.benemy .esp canvas[data-k="mob"]{height:66%!important}
.benemy .esp canvas[data-k="mini"]{height:84%!important}
.benemy .esp canvas[data-k="boss"]{height:112%!important;max-height:none!important}
.benemy .esp{min-height:0}
.dhead b{white-space:nowrap}
.dhead>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scr:has(.bscene.fill) .cmd [data-act="b-flee"]{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center}
.scr:has(.bscene.fill) .cmd [data-act="b-flee"] small{display:inline;font-size:11px}
.scr:has(.bscene.fill) .cmd,.scr:has(.bscene.fill) .cmd.c3{gap:4px}
.scr:has(.bscene.fill) .cmd.c3 .btn{min-height:40px;height:40px;padding:0 2px;font-size:13px;gap:0;line-height:1.1}
.scr:has(.bscene.fill) .cmd.c3 .btn canvas{width:18px!important;height:18px!important}
.scr:has(.bscene.fill) .cmd.c3 .btn small{font-size:10px;line-height:1}
.scr:has(.bscene.fill) .cmd [data-act="b-flee"]{min-height:30px!important;height:30px}
.scr:has(.bscene.fill) .box.msg1{padding:3px 8px;font-size:13px}
.scr:has(.bscene.fill) .cmd.c3 .btn{min-height:46px;height:46px;justify-content:center;overflow:hidden}
.scr:has(.bscene.fill) .cmd.c3 .btn canvas{width:16px!important;height:16px!important}
.benemy .esp canvas[data-k="boss"]{height:100%!important;max-height:100%!important}
.benemy .esp canvas[data-k="mini"]{height:80%!important}
.benemy .esp canvas[data-k="mob"]{height:62%!important}
button.chip{font:inherit;cursor:pointer;background:var(--c0);color:var(--c3)}
.invbar{padding-right:66px}
.scr>.bdgrid.fill{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
/* v46：戰鬥畫面的敵人往畫面中間靠（原本貼在底部） */
.benemy .esp canvas{bottom:auto!important;top:50%!important;transform:translate(-50%,-50%)!important}
/* v46：所有文字不被切掉、不被蓋住 */
.scr .top{flex-wrap:wrap;row-gap:2px}
.top .gtag,.top .tag.ttl{max-width:none;overflow:visible;text-overflow:clip}
.snode span,.snode small{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:100%;word-break:break-all;line-height:1.15;padding:0 3px}
/* QR 配對 */
.qrbox{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.qrimg{width:min(58vw,210px);background:#fff;padding:4px;border:3px solid var(--c0)}.qrimg svg{display:block;width:100%;height:auto}
.qrcode{word-break:break-all;font-size:11px;opacity:.8}
.qrscan{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px}
.qrcam{position:relative;width:min(86vw,340px);aspect-ratio:1/1;background:#000;border:3px solid var(--c3);overflow:hidden}
.qrcam video{width:100%;height:100%;object-fit:cover}.qrframe{position:absolute;inset:14%;border:3px dashed var(--c3);pointer-events:none}
.qrtip{color:var(--c3);font-size:14px}.qrscan .btn{max-width:340px}
.bugtext{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:6px;border:3px solid var(--c0);background:var(--c3);color:var(--c0);resize:none;min-height:90px}
.scr .top{gap:6px;font-size:15px}
.snode{padding-top:9px!important}
.stats2 .r2 .num,.bm.solo .r2 .num{width:auto!important;min-width:42px;white-space:nowrap}
/* 簽到格子 */
.signgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;align-content:start;overflow-y:auto}
.signc{position:relative;border:3px solid var(--c0);background:var(--c3);padding:4px 3px;display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;font-size:12px;min-height:58px}
.signc small{font-size:10px;line-height:1.15;word-break:break-all}
.signc.now{background:var(--c0);color:var(--c3)}.signc.done{opacity:.55}
.signc:last-child{grid-column:span 2}
.signk{position:absolute;right:2px;top:1px;font-size:9px;border:1px solid var(--c0);background:var(--c3);color:var(--c0);padding:0 2px}
.barwrap{padding:2px 8px}
.signk{position:static!important;margin-top:1px}

/* 像素風滑桿（音量）：黑框方形軌道＋灰色已填滿段＋方塊把手；--v 由 app.js 設成目前百分比 */
input[type=range]{-webkit-appearance:none;appearance:none;height:26px;background:transparent;border-radius:0;cursor:pointer;padding:0;--v:50%}
input[type=range]:focus{outline:none}
input[type=range]::-webkit-slider-runnable-track{height:12px;border:3px solid var(--c0);border-radius:0;
  background:linear-gradient(90deg,var(--c1) 0 var(--v),var(--c3) var(--v) 100%)}
input[type=range]::-moz-range-track{height:6px;border:3px solid var(--c0);border-radius:0;background:var(--c3)}
input[type=range]::-moz-range-progress{height:6px;background:var(--c1);border-radius:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:24px;margin-top:-9px;border:3px solid var(--c0);border-radius:0;
  background:var(--c3);box-shadow:inset 0 0 0 2px var(--c2)}
input[type=range]::-moz-range-thumb{width:10px;height:18px;border:3px solid var(--c0);border-radius:0;background:var(--c3);box-shadow:inset 0 0 0 2px var(--c2)}
input[type=range]:active::-webkit-slider-thumb{background:var(--c0);box-shadow:inset 0 0 0 2px var(--c3)}
input[type=range]:active::-moz-range-thumb{background:var(--c0);box-shadow:inset 0 0 0 2px var(--c3)}

/* 轉職畫面：每階 6 個職業，左右各 3 個（由上到下排完左邊再排右邊） */
.awgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.awj{display:flex;align-items:center;justify-content:center;gap:2px;min-height:46px;font-size:14px;padding:4px 2px;line-height:1.15;text-align:center}
.awj.lk{color:var(--c1);border-style:dashed}
.awj.on.lk{color:var(--c3)}
.awj.on canvas{filter:invert(1)}

/* 戰鬥畫面：說明（?）與聲音（♪）按鈕放右下角，並把底部留一格空間；頂部的層數／地點／已擊敗字放大一點 */
body.bt .helpbtn,body.bt .sndbtn{top:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px));height:30px;min-width:30px;font-size:15px}
body.bt .helpbtn{right:max(8px,calc(50vw - 222px));width:30px}
body.bt .sndbtn{right:calc(max(8px,calc(50vw - 222px)) + 36px)}
body.bt .gb{padding-bottom:50px!important}
body.bt .dhead{font-size:17px}
body.bt .dhead b{font-size:24px}

/* 對戰大廳：兩個正方形按鈕＋冒險者執照 */
.pvsq{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0}
.sqbtn{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:6px;text-align:center}
.sqbtn b{font-size:17px}.sqbtn small{font-size:12px}
.sqbtn.on canvas{filter:invert(1)}
/* 冒險者執照 */
.lic{display:flex;flex-direction:column;align-items:center;gap:8px}
.lic-qr{position:relative;width:min(62vw,250px);aspect-ratio:1/1;background:#fff}
.lic-fr{position:absolute;left:0;top:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.lic-in{position:absolute;inset:13%;display:flex;align-items:center;justify-content:center;background:#fff}
.lic-in svg{width:100%;height:100%;display:block}

/* 冒險者執照（改版）：上排＝羊圖示靠左＋名字等級職業靠右，下排＝戰績，兩排一樣高、字一樣大，QR 在正中間 */
.lic-bar{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;font-size:15px;line-height:1.25;gap:10px}
.lic-sh{flex:none;display:flex;align-items:center}
.lic-who{display:flex;flex-direction:column;align-items:flex-end;text-align:right;min-width:0}
.lic-who b{font-size:16px;font-weight:bold}.lic-who small{font-size:13px;font-weight:normal}
.lic-rec{justify-content:space-around;text-align:center}
.lic-rec div{display:flex;flex-direction:column;align-items:center}.lic-rec small{font-size:13px}.lic-rec b{font-size:16px}
.lic{align-items:center}
/* 對戰大廳：冒險者執照按鈕放大、訊息框縮小 */
.scr .btn.licbtn{min-height:100px;font-size:32px;gap:16px;background:var(--soft,#dcdcdc)!important}
.scr .btn.licbtn:active{background:var(--soft-act,#bdbdbd)!important}
.scr .msglog.sm{flex:none;min-height:34px;max-height:44px;font-size:12px;padding:3px 8px!important;-webkit-line-clamp:2}

/* 冒險者中心：上方資訊放大、下方按鈕改正方形 */
.centinfo{zoom:1.3}
.scr>.menu.grow.sqgrid{flex:none;max-height:none;grid-auto-rows:auto;gap:8px}
.scr>.menu.grow.sqgrid .btn{aspect-ratio:1/1;height:auto;min-height:0;flex-direction:column;gap:6px;font-size:15px;padding:4px}
.scr>.menu.grow.sqgrid .btn.wide{aspect-ratio:auto;min-height:52px;flex-direction:row;gap:8px}
.centinfo .box.msg1{-webkit-line-clamp:4}

/* 註冊前的安全提醒：打勾確認 */
.regchk{display:flex;align-items:center;gap:10px;margin:12px 0 4px;font-size:15px;cursor:pointer}
.regchk input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--c0)}

/* 地圖（城市）：下方對話框縮成跟上排地點按鈕一樣高，多出來的空間給地圖 */
/* 上方按鈕放大（地點排 +18、探索排 +12），對話框縮小同樣的高度，地圖視窗大小不變（v53） */
.scr .placesrow .btn{height:96px;min-height:96px;font-size:14px}
.scr .placesrow .btn canvas[data-place]{width:36px!important;height:36px!important}
.scr .exprow .btn{min-height:62px;font-size:17px}
.scr .msglog.mapmsg{flex:none;height:48px;min-height:48px;max-height:48px;-webkit-line-clamp:2;padding:2px 10px!important;font-size:14px}
.vsec{margin-top:4px}.vsec>b{display:block;font-size:13px;border-bottom:2px solid var(--c0);margin-bottom:2px}.vrew .sk.dim{opacity:.55}

/* v54 畫面底色：「最後面的畫面背景」（設定→介面的拉桿，從白一路調到黑，預設淺灰）。
   --surf 是背景色、--surf0 是直接寫在背景上的文字色（底色深時變白）。
   按鈕、對話框、視窗、地圖上的地點按鈕等「自己有底色的東西」維持原本的白底黑字，所以在 .gb 底下把色盤換回原本的。 */
:root{--surf:#dcdcdc;--surf0:#000;--surf1:#555;--surf2:#aaa}
.gb{--c0:var(--surf0);--c1:var(--surf1);--c2:var(--surf2);--c3:var(--surf);background:var(--surf);color:var(--surf0)}
.btn,.sq,.box,.chip,.stage,.pmem,.char,.sheet,.battle,.bscene,.panel,.panel2,.vict,.snode,.node,.rnode,.dnode,.bubble,.twmap,.map,.dmap .dinner .snode,.tutbox,.gbox,.contract,.popbox,.floater,.dstage,.duelres,.benemy{--c0:#000;--c1:#555;--c2:#aaa;--c3:#fff;color:#000}

/* 好友列：按鈕多了（探訪／交易／送禮／戰帖／刪除），改成按鈕排在名字下面一整排 */
.frow{flex-wrap:wrap}
.frow .fi{flex:1 1 60%;min-width:0}
.frow .fbtns{flex:1 0 100%;display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap;padding-left:24px}
.frow .fbtns .sq.wide{flex:1 1 0;min-width:52px;margin:0}

/* v54 羊窩背景選擇：小圖一排 7 個，選到的加粗框，目前使用中的右下角打勾 */
.rthumbs{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.rthumb{position:relative;height:38px;padding:0;border:3px solid var(--c0);cursor:pointer;background-size:100% 100%;image-rendering:pixelated;box-shadow:2px 2px 0 var(--c0)}
.rthumb b{position:absolute;left:1px;top:0;font-size:10px;line-height:1;background:#fff;color:#000;padding:0 2px}
.rthumb i{position:absolute;right:1px;bottom:0;font-style:normal;font-size:11px;line-height:1;background:#000;color:#fff;padding:0 2px}
.rthumb.sel{border-color:#000;box-shadow:0 0 0 3px #fff,0 0 0 6px #000}
/* 照顧畫面：下方四個按鈕放大，對話框（訊息列、幸福說明）縮小 */
.scr .carebtns .btn{min-height:96px;font-size:18px;gap:6px}
.scr .msglog.caremsg{flex:none;height:46px;min-height:46px;max-height:46px;-webkit-line-clamp:2;padding:2px 10px!important;font-size:14px}
.scr .box.carejoy{font-size:11px;line-height:1.3;padding:3px 8px!important}

/* v56 背包：每個東西一格一格分清楚 */
.bagl{display:flex;flex-direction:column;gap:6px}
.irow.bagcell{margin:0;padding:6px 8px;border:3px solid var(--c0);background:var(--c3);box-shadow:2px 2px 0 var(--c0)}
/* 羊窩背景選擇：小圖放大（一頁 8 個，4×2） */
.rthumbs{grid-template-columns:repeat(4,1fr);gap:6px}
.rthumb{height:64px}
.rthumb b{font-size:12px;padding:0 4px}
.rthumb i{font-size:13px}
.rpg{align-self:center;text-align:center;font-size:15px}
.rthumb{height:88px}


/* v57 箭頭導覽：暗幕＋亮框（ghole 的超大陰影就是暗幕）＋上下彈跳的箭頭＋說明框（功用／用法／確認） */
.gmask{position:fixed;inset:0;z-index:55;touch-action:none}
.ghole{position:fixed;z-index:1;border:3px solid #fff;outline:3px solid #000;border-radius:2px;box-shadow:0 0 0 200vmax rgba(0,0,0,.68);pointer-events:none;animation:gblink 1s steps(2) infinite}
@keyframes gblink{50%{border-color:#000;outline-color:#fff}}
.garrow{position:fixed;z-index:3;width:28px;text-align:center;font-size:34px;line-height:34px;color:#fff;pointer-events:none;
  text-shadow:2px 0 #000,-2px 0 #000,0 2px #000,0 -2px #000,2px 2px #000,-2px -2px #000,2px -2px #000,-2px 2px #000}
.garrow.dn{animation:gbobd .7s steps(2) infinite}.garrow.up{animation:gbobu .7s steps(2) infinite}
@keyframes gbobd{50%{transform:translateY(6px)}}@keyframes gbobu{50%{transform:translateY(-6px)}}
.gbox{position:fixed;z-index:2;max-height:64vh;display:flex;flex-direction:column;padding:8px 10px!important;background:#fff;color:#000}
.gbox .gd{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.gbox .gt{flex:none}.gbox .btn{flex:none}
.gbox .gt{display:flex;align-items:center;gap:6px;font-size:17px;margin-bottom:4px}.gbox .gt small{margin-left:auto;font-size:12px;opacity:.7}
.gbox .gd p{margin:3px 0;font-size:13.5px;line-height:1.5}
.gbox .gd i{display:inline-block;font-style:normal;background:#000;color:#fff;font-size:11px;padding:0 5px;margin-right:6px;vertical-align:1px}
.gbox .btn{margin-top:6px}
.gbox .btn.wide{width:100%}


/* v58 摸羊頭：羊頭上方一塊透明的點擊區（連點三下 = 摸摸）、縮一下、跳起來、頭上冒像素愛心 */
.headhit{position:absolute;left:15%;top:0;width:70%;height:72%;z-index:4;background:transparent;border:0;padding:0;margin:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sheepwrap.nudge{animation:nudge .25s steps(3) 1}
@keyframes nudge{50%{transform:scale(1.06,.92)}}
.sheepwrap.hop{animation:hop .75s steps(8) 1}
@keyframes hop{0%,100%{transform:translateY(0)}20%{transform:translateY(-22px)}40%{transform:translateY(0)}60%{transform:translateY(-12px)}80%{transform:translateY(0)}}
.phrt{position:absolute;top:-4%;z-index:5;pointer-events:none;margin-left:-16px;animation:phrt 1.3s steps(9) forwards;opacity:0}
.phrt canvas{width:32px!important;height:32px!important;filter:drop-shadow(1px 0 #000) drop-shadow(-1px 0 #000) drop-shadow(0 1px #000) drop-shadow(0 -1px #000)}
@keyframes phrt{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-54px);opacity:0}}

/* ───── 自由探索（M1 測試站）───── */
.xp{display:flex;flex-direction:column;gap:5px;min-height:0;flex:1}
.xp .xhud{display:flex;gap:10px}.xp .xhud .r2{flex:1;margin:0}
.xp .xgoal{font-size:12px;background:var(--c0);color:var(--c3);padding:1px 8px;align-self:flex-start}
.xvp{border:3px solid var(--c0);background:var(--c0);line-height:0}
.xvp canvas{width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.xdw{position:relative;height:78px;overflow:hidden;background:var(--c1);border:3px solid var(--c0);flex:none}
.xdh{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--c3);opacity:.75}
.xdb{position:absolute;left:0;right:0;bottom:0;height:72px;transform:translateY(112%);transition:transform .2s cubic-bezier(.2,.9,.3,1.1);font-size:14px;line-height:1.35;padding:5px 10px;overflow:visible}
.xdb.up{transform:none}
.xdb.nt{transition:none}
.xdn{position:absolute;top:-1px;left:10px;transform:translateY(-100%);background:var(--c0);color:var(--c3);font-size:11px;padding:0 8px}
.xdx{position:absolute;right:8px;bottom:2px;font-size:11px;animation:pulse 1s steps(2) infinite}
.xm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex:none}
.xm .btn{min-height:34px;font-size:13px;padding:2px 2px;gap:3px;min-width:0}
.xm .btn canvas{max-width:16px;max-height:16px}
.xctl{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;touch-action:none;user-select:none;-webkit-user-select:none;flex:none;padding:2px 4px 6px}
.xctl.xl{flex-direction:row-reverse}
.xdp{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,38px);gap:4px}
.xdp .btn{min-height:0;padding:0;font-size:16px;touch-action:none}
.xdp .mid{border:2px dashed var(--c2)}
.xp .btn.dn{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--c0)}
.xab{position:relative;width:132px;height:108px;flex:none}
.xab .btn{position:absolute;width:60px;height:54px;font-size:22px;font-weight:bold;touch-action:none}
.xab .xb{left:0;top:34px}.xab .xa{right:0;top:0}
.xab small{position:absolute;font-size:10px;opacity:.7;white-space:nowrap}
.xab .sa{right:0;top:58px;width:60px;text-align:center}.xab .sb{left:0;top:92px;width:60px;text-align:center}

.betatag{position:fixed;left:0;top:0;z-index:9999;background:var(--c0);color:var(--c3);font-size:10px;padding:0 6px;opacity:.85;pointer-events:none}

/* ───── 戰鬥視窗 240×160（M1 測試站）───── */
.bwrap{padding:4px}
.bw{position:relative;aspect-ratio:3/2;border:3px solid var(--c0);background:var(--c2);line-height:0;overflow:hidden;flex:none;width:100%}
.bw canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;width:100%;height:auto}
.bw .bwbg{position:absolute;left:0;top:0;width:100%;height:100%}
.bw .bwe,.bw .bwp,.bw .bwsh{position:absolute}
.bw .bwp{left:15.8%;top:56.25%;width:20%}
.bw .bwsh{left:2.5%;top:71%;width:13.3%}
.bw .bwi{position:absolute;left:2%;top:3%;width:47%;line-height:1.3;font-size:11px;padding:3px 6px;z-index:2}
.bw .bwi .nm{font-size:12px}.bw .bwi .sm{font-size:10px}.bw .bwi .intent{font-size:10px;margin-top:2px}
.bw .bwi .bar i{height:5px}

.bwrap{gap:6px}
.bwrap .bparty{flex:1 1 auto!important;display:flex;flex-direction:column;justify-content:center;margin-top:0}
@media (max-height:720px){
  .xdw{height:58px}.xdb{height:52px;font-size:13px;line-height:1.25;padding:3px 8px}
  .xdp{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,31px);gap:3px}
  .xab{height:92px;width:124px}.xab .btn{height:46px;width:56px}.xab .xb{top:30px}.xab .sb{top:78px;width:56px}.xab .sa{top:50px;width:56px}
  .xm .btn{min-height:30px}.xctl{padding-bottom:0}
  .xp{gap:4px}
}