:root{--enamel:#2a332c;--enamel2:#384238;--bone:#e6dfc8;--dim:#a8a58f;--hazard:#d9b23c;--blood:#a8352a;--sage:#7f9a6b;--ply:#7d6544;--ply2:#6a5439;--ink:#14130f;
--sans:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;--serif:"Songti TC","Noto Serif TC","PMingLiU",serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--bone);font:15px/1.5 var(--sans);overscroll-behavior:none}
[hidden]{display:none!important}
#game{position:fixed;left:0;top:0;display:block;touch-action:none;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
#labels{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}input{-webkit-user-select:text;user-select:text}
button{font:inherit;color:var(--bone);background:var(--enamel2);border:1px solid #5a6555;border-radius:3px;padding:6px 12px;cursor:pointer}
button:hover{background:#465246}
button:focus-visible,input:focus-visible{outline:2px solid var(--hazard);outline-offset:1px}
/* 登入與死亡畫面：釘起來的木板 */
.board{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;
background:repeating-linear-gradient(177deg,#191a15 0 86px,#10110d 86px 90px)}
.planks{width:min(460px,100%);padding:30px 28px;color:var(--ink);position:relative;transform:rotate(-.6deg);box-shadow:0 18px 50px #000b;
background:repeating-linear-gradient(180deg,var(--ply) 0 74px,#3a2d1d 74px 76px,var(--ply2) 76px 148px,#3a2d1d 148px 150px)}
.planks:before,.planks:after{content:"";position:absolute;top:12px;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b5b0a0,#3b3a35)}
.planks:before{left:12px}.planks:after{right:12px}
.planks h1{margin:0;font:900 clamp(58px,17vw,84px)/1.05 var(--serif);letter-spacing:.06em;color:#7c1f17;transform:rotate(-1.4deg);text-shadow:0 0 1px #7c1f17,1px 2px 0 #0003}
.planks #deadTitle{font-size:clamp(38px,10vw,54px);white-space:nowrap}
.planks h2{font-size:15px;margin:16px 0 4px}
.tag{margin:14px 0 20px;font-weight:600;color:#1b160e}
.planks label{display:block;font-weight:700;margin-bottom:10px}
.planks input{display:block;width:100%;margin-top:3px;padding:9px 10px;font:16px var(--sans);color:var(--ink);background:var(--bone);border:0;border-radius:2px}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.primary{background:var(--hazard);color:var(--ink);border-color:#8d7320;font-weight:700;padding:9px 18px}.primary:hover{background:#e7c352}
#authErr{min-height:1.5em;margin:4px 0;font-weight:700;color:#5c0f09}
#graves{margin:0;padding-left:20px;max-height:32vh;overflow:auto;font-size:14px;font-weight:600}
/* HUD */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#hud button,#hud input,.panel{pointer-events:auto}
#stats{position:absolute;pointer-events:none;left:12px;top:calc(12px + env(safe-area-inset-top));width:176px;display:grid;gap:4px}
.stat{display:grid;grid-template-columns:32px 1fr;gap:6px;align-items:center;font-size:12px;text-shadow:0 1px 2px #000}
.bar{height:8px;background:#0009;border:1px solid #fff2;overflow:hidden}.bar i{display:block;height:100%;background:var(--sage)}
.stat.low .bar i{background:var(--blood)}.stat.hp .bar i{background:#c9503f}.stat.sta .bar i{background:var(--hazard)}
#infected{font-size:13px;font-weight:700;color:#ff8d7a;text-shadow:0 1px 2px #000}
#clock{position:absolute;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);font:700 17px var(--serif);text-shadow:0 1px 3px #000;white-space:nowrap}
#side{position:absolute;right:12px;top:calc(12px + env(safe-area-inset-top));width:132px}
#minimap{width:132px;height:132px;display:block;background:#0008;border:1px solid #fff3;image-rendering:pixelated}
#online{font-size:12px;margin-top:4px;text-shadow:0 1px 2px #000;overflow-wrap:anywhere}
#log{position:absolute;left:12px;bottom:92px;width:min(380px,58vw);font-size:13px;text-shadow:0 1px 2px #000;display:flex;flex-direction:column;gap:1px}
#log div{transition:opacity .6s}#log .bad{color:#ff9c8c}#log .good{color:#b9dba0}#log .sys{color:var(--hazard)}#log b{color:#bcd6e6}
#chat{position:absolute;left:12px;bottom:56px;width:min(380px,calc(100vw - 24px));display:none}#chat.on{display:block}
#chat input{width:100%;padding:6px 9px;font:16px var(--sans);background:#000c;color:var(--bone);border:1px solid #fff4}
#prompt{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);background:var(--hazard);color:var(--ink);font-weight:700;padding:3px 10px;border-radius:2px;white-space:nowrap}
#prompt:empty{display:none}
#weapon{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);font-weight:700;text-shadow:0 1px 3px #000;white-space:nowrap}
#hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:12px;color:var(--dim);text-shadow:0 1px 2px #000;white-space:nowrap}
#invBtn{position:absolute;right:12px;bottom:14px}
.panel{position:absolute;top:calc(12px + env(safe-area-inset-top));bottom:50px;width:min(300px,calc(50vw - 18px));background:#222a24f2;border:1px solid #5a6555;padding:10px 12px;overflow:auto;touch-action:pan-y}
#invPanel{right:156px}#lootPanel{left:200px}
.panel h2{margin:0 0 8px;font:700 16px var(--serif)}#weight{font:13px var(--sans);color:var(--dim)}#weight.over{color:#ff9c8c}
.item{display:flex;align-items:center;gap:5px;padding:5px 0;border-top:1px solid #fff1;flex-wrap:wrap}.item .nm{flex:1 1 90px;min-width:0}.item.eq .nm{color:var(--hazard);font-weight:700}.item small{color:var(--dim)}
.item button{padding:3px 8px;font-size:13px}.empty{color:var(--dim);font-size:13px}
#hurt{position:absolute;inset:0;opacity:0;background:radial-gradient(circle,#0000 45%,#8a0f07cc);transition:opacity .35s}
#sleepVeil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#050608d9;font:700 26px var(--serif)}#sleepVeil small{font:13px var(--sans);color:var(--dim)}
#conn{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:40;background:var(--blood);padding:3px 12px}
#carHud{position:absolute;left:50%;top:calc(58px + env(safe-area-inset-top));transform:translateX(-50%);background:#000b;padding:3px 9px;font-size:12px;font-weight:700;white-space:nowrap;border-radius:2px}
.skill{display:grid;grid-template-columns:74px 1fr;gap:8px;align-items:center;font-size:13px;margin-bottom:3px}
#tBed{right:calc(100px + env(safe-area-inset-right));bottom:calc(92px + env(safe-area-inset-bottom))}#tHook{right:calc(170px + env(safe-area-inset-right));bottom:calc(60px + env(safe-area-inset-bottom))}
#tTrunk{right:calc(170px + env(safe-area-inset-right));bottom:calc(158px + env(safe-area-inset-bottom));font-size:12px!important}
#moods{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.mood{width:30px;height:30px;padding:0;border-radius:3px;font:700 14px var(--sans);color:#14130f;border:1px solid #0008;pointer-events:auto}
.mood.l1{background:#d9d27a}.mood.l2{background:#e5a94a}.mood.l3{background:#d9652f;color:#fff}.mood.l4{background:#a81f16;color:#fff}
#actBar{position:absolute;left:50%;top:56%;transform:translateX(-50%);width:128px;text-align:center;font-size:12px;font-weight:700;text-shadow:0 1px 2px #000}
#actBar .track{height:7px;background:#000b;border:1px solid #fff5;margin-top:2px}#actFill{display:block;height:100%;width:0;background:var(--hazard)}
#createScreen{position:fixed;inset:0;z-index:35;background:#1b211c;overflow:auto;padding:16px;padding-top:calc(16px + env(safe-area-inset-top));-webkit-overflow-scrolling:touch}
.sheet{max-width:560px;margin:auto;padding-bottom:84px}.sheet h1{font:900 34px var(--serif);margin:0;color:var(--hazard)}.sheet p{margin:6px 0 10px;color:var(--dim)}.sheet h2{font:700 16px var(--serif);margin:14px 0 6px}
.opt{display:grid;grid-template-columns:1fr auto;gap:1px 10px;width:100%;text-align:left;margin-bottom:5px;padding:9px 11px;background:#2a332c}.opt small{grid-column:1/3;color:var(--dim);font-size:12px}.opt .pts{color:var(--dim);font-weight:700}.opt.on{background:#4b5430;border-color:var(--hazard)}.opt:disabled{opacity:.35}
.foot{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#14130ff2;border-top:1px solid #5a6555}#ptsLeft{font-size:20px;color:var(--hazard)}#ptsLeft.neg{color:#ff8d7a}.primary:disabled{background:#6e6a55;color:#222}
#tCrouch{right:calc(170px + env(safe-area-inset-right));bottom:calc(92px + env(safe-area-inset-bottom))}#tCrouch.on{background:#d9b23c99!important}
/* 觸控：左手搖桿，右手攻擊與情境互動 */
#stick{position:absolute;left:calc(18px + env(safe-area-inset-left));bottom:calc(22px + env(safe-area-inset-bottom));width:128px;height:128px;border-radius:50%;background:#0006;border:2px solid #e6dfc844;pointer-events:auto;touch-action:none}
#knob{position:absolute;left:39px;top:39px;width:46px;height:46px;border-radius:50%;background:#e6dfc866;border:2px solid #e6dfc899}
#touch button{position:absolute;touch-action:none;background:#000a;border:2px solid #e6dfc855;border-radius:50%;width:60px;height:60px;padding:0;font-size:14px;font-weight:600;-webkit-user-select:none;user-select:none}
#touch button:active{background:#465246}
#tAtk{right:calc(16px + env(safe-area-inset-right));bottom:calc(26px + env(safe-area-inset-bottom));width:88px!important;height:88px!important;background:#7c1f17cc!important;font-size:17px!important}
#tUse{right:calc(112px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));width:64px!important;height:64px!important}#tUse.hot{background:#d9b23c!important;color:#14130f;border-color:#f1d675}
#tRun{right:calc(100px + env(safe-area-inset-right));bottom:calc(92px + env(safe-area-inset-bottom))}#tRun.on{background:#d9b23c99!important}
#tBar{right:calc(30px + env(safe-area-inset-right));bottom:calc(124px + env(safe-area-inset-bottom))}
#tSleep,#tChat{width:46px!important;height:46px!important;font-size:12px!important;top:calc(188px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right))}#tChat{right:calc(64px + env(safe-area-inset-right))}
body.touch #hint{display:none}
body.touch #invBtn{bottom:auto;top:calc(140px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));width:98px;height:40px}
body.touch #side,body.touch #minimap{width:98px}body.touch #minimap{height:98px}body.touch #online{font-size:11px;max-height:17px;overflow:hidden;white-space:nowrap}
body.touch #stats{left:calc(10px + env(safe-area-inset-left));width:124px;gap:3px}body.touch .stat{grid-template-columns:28px 1fr;font-size:11px}
body.touch #clock{font-size:14px}body.touch #weapon{bottom:auto;top:calc(32px + env(safe-area-inset-top));font-size:13px}
body.touch #log{left:calc(12px + env(safe-area-inset-left));bottom:calc(160px + env(safe-area-inset-bottom));width:min(290px,66vw);font-size:12px}
body.touch #prompt{bottom:calc(178px + env(safe-area-inset-bottom));font-size:13px}
body.touch #chat{bottom:auto;top:calc(116px + env(safe-area-inset-top));left:12px;width:calc(100vw - 134px)}
body.touch .item button{padding:8px 13px;font-size:14px}
body.touch .panel{left:10px!important;right:122px!important;width:auto;top:calc(116px + env(safe-area-inset-top));bottom:auto;max-height:calc(50dvh - 60px)}
body.touch #lootPanel{top:auto;bottom:calc(166px + env(safe-area-inset-bottom));right:10px!important;max-height:calc(50dvh - 170px);z-index:2}
@media (orientation:landscape) and (pointer:coarse),(max-height:500px){
 body.touch .panel{top:calc(8px + env(safe-area-inset-top));bottom:calc(8px + env(safe-area-inset-bottom));max-height:none;left:auto!important;right:calc(120px + env(safe-area-inset-right))!important;width:min(250px,30vw);z-index:3}
 body.touch #lootPanel{left:calc(142px + env(safe-area-inset-left))!important;right:auto!important;top:calc(8px + env(safe-area-inset-top));bottom:calc(8px + env(safe-area-inset-bottom));max-height:none}
 body.touch #log{bottom:calc(158px + env(safe-area-inset-bottom));width:28vw}body.touch #prompt{bottom:12px}
 body.touch #side,body.touch #minimap{width:76px}body.touch #minimap{height:76px}body.touch #online{display:none}
 body.touch #invBtn{top:calc(92px + env(safe-area-inset-top));width:76px;height:34px}
 #tSleep,#tChat{top:calc(132px + env(safe-area-inset-top));width:36px!important;height:36px!important;font-size:11px!important}#tChat{right:calc(52px + env(safe-area-inset-right))}
 body.touch #weapon{top:calc(30px + env(safe-area-inset-top))}
}
@media (max-width:640px) and (pointer:fine){.panel{left:12px!important;right:12px!important;width:auto;top:150px;bottom:60px}}
@media (prefers-reduced-motion:reduce){#hurt,#log div{transition:none}}