:root{font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;color:#e8efff;background:#e9edf1;font-size:14px;--base:#091629;--panel:#081a30f5;--edge:#7d92bf;--line:#304969;--muted:#a5b8d5;--cyan:#4edcfa;--danger:#ed6575;--gold:#f6d47c;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select,a{-webkit-tap-highlight-color:transparent}button,.primary{font:inherit;font-weight:600;min-height:44px;min-width:44px;padding:9px 12px;border:1px solid var(--line);border-radius:3px;background:#10243c;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;touch-action:manipulation}button:hover{border-color:var(--edge)}button:disabled{opacity:.4;cursor:default}button.primary,.primary,[aria-selected=true],[aria-pressed=true],.selected{background:#075883;border-color:var(--cyan);box-shadow:inset 0 0 14px #17bfff24;color:#fff}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}[hidden]{display:none!important}input,select{font:inherit;font-size:16px;color:inherit;background:#0b1a2e;border:1px solid var(--line);border-radius:3px;min-height:44px;padding:8px;max-width:100%;min-width:0}input[type=number]{width:84px}input[type=range]{width:100%;padding:0;accent-color:var(--cyan)}input[type=checkbox]{appearance:none;width:48px;height:28px;min-height:28px;border-radius:16px;background:#35465b;position:relative;flex-shrink:0}input[type=checkbox]:before{content:'';position:absolute;width:20px;height:20px;top:3px;left:4px;background:#fff;border-radius:50%}input[type=checkbox]:checked{background:#087bc4;border-color:#4edcfa}input[type=checkbox]:checked:before{left:22px}label{font-size:13px}p{line-height:1.65;margin:8px 0 14px}h2{font-size:18px;margin:0}h3{font-size:15px;margin:20px 0 12px;color:#c5def6;display:flex;align-items:center;gap:10px}h3:after{content:'';height:1px;flex:1;background:var(--line)}h3:first-child{margin-top:6px}small,.help{font-size:12px;color:var(--muted);line-height:1.6}strong{font-weight:600}button.quiet{background:transparent;color:var(--muted)}.warning{color:var(--gold)}.gold{color:var(--gold);font-variant-numeric:tabular-nums}.icon{width:24px;height:24px;flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.pixel{border:1px solid var(--edge);box-shadow:inset 0 0 0 3px #11253f,0 0 0 1px #071220;position:relative}.pixel:before,.pixel:after{content:'';position:absolute;width:7px;height:7px;border:3px solid #c2d7fa;pointer-events:none;z-index:2}.pixel:before{left:2px;top:2px;border-right:0;border-bottom:0}.pixel:after{right:2px;bottom:2px;border-left:0;border-top:0}
#game{position:relative;margin:0 auto;width:100%;max-width:430px;height:100vh;height:100dvh;overflow:hidden;background:var(--base);isolation:isolate}.viewport{position:absolute;inset:0}#world{display:block;width:100%;height:100%;touch-action:none;outline:0}.connection-line{position:absolute;top:calc(env(safe-area-inset-top) + 5px);left:12px;right:12px;display:flex;gap:6px;align-items:center;font-size:10px;color:#dbe8ee;text-shadow:0 1px 3px #000;z-index:2;pointer-events:none}.connection-line button{pointer-events:auto;font-size:12px;margin-left:auto}.lamp{width:5px;height:5px;background:#ed6575;border-radius:50%}.lamp.online{background:#89dabb}#population{margin-left:auto}.hud-top{position:absolute;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 28px);display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;gap:12px}.hud-top button,.hud-top select{pointer-events:auto}.player-hud{display:flex;gap:8px;min-width:0;flex:1}.portrait{padding:7px;width:48px;height:60px;flex-shrink:0;background:#142c40;display:flex;flex-direction:column;gap:1px}.portrait .icon{width:27px;height:27px;color:#bde5e7}.portrait small{font-size:10px;color:var(--gold)}.vitals{min-width:0;flex:1;padding-top:2px}.vitals>strong{display:block;max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;text-shadow:0 1px 3px #000;margin-bottom:5px}.resource{display:flex;gap:5px;align-items:center;margin-bottom:5px}.resource>span{font-size:10px;font-weight:700;text-shadow:0 1px 3px #000}.meter{height:14px;border:1px solid #859bb9;box-shadow:0 0 0 2px #0c1932;background:#0c1932;position:relative;flex:1}.meter i{display:block;height:100%;background:#e65b74;width:0}.mp .meter i{background:#39b9eb}.meter small{position:absolute;inset:-2px 0 0;text-align:center;font-size:9px;color:#fff;text-shadow:0 1px 3px #000}.map-hud{width:88px;flex-shrink:0;text-align:center;background:#07162dc9;border:1px solid #5b7294;padding:4px}.map-hud svg{width:100%;height:49px;background:#12283d;display:block}.map-hud strong{font-size:10px;display:block;margin-top:3px}.channel-label select{width:100%;min-height:44px;padding:3px;font-size:12px;border:0;background:transparent}.world-utilities{position:absolute;left:12px;top:calc(env(safe-area-inset-top) + 107px);display:flex;gap:6px}.world-utilities button{background:#0a1b31c9;width:44px;padding:8px;position:relative}.hud-bottom{position:absolute;bottom:0;left:0;right:0;padding:8px 12px calc(env(safe-area-inset-bottom) + 14px);background:linear-gradient(transparent,#071629d9 60%);pointer-events:none}.hud-bottom button{pointer-events:auto}#activity-state{font-size:11px;text-align:center;color:#d6e5f4;text-shadow:0 2px 2px #000;margin:0 0 8px;min-height:18px}.hud-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.hud-tools button{position:relative;background:#0a1b31d9;flex-direction:column;padding:7px 4px;gap:4px;min-height:60px;font-size:11px}.hud-tools button[aria-pressed=true]{border-color:var(--cyan);box-shadow:0 0 8px #2dcbff66,inset 0 0 10px #2dcbff24;color:var(--cyan)}.combat-row{display:flex;align-items:center;gap:7px}.skill-bar{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.skill-bar button{position:relative;border-radius:50%;aspect-ratio:1;min-width:0;padding:3px;background:#102139eb;border-color:#6a86aa;display:flex;flex-direction:column;gap:1px;font-size:9px;line-height:1.2}.skill-bar .icon{width:20px;height:20px}.skill-bar button:first-child{border-color:#e4c681;color:#ffe6ab}.skill-bar .cooldown{position:absolute;inset:0;display:grid;place-items:center;background:#061427d9;border-radius:50%;font-size:17px;color:white}.skill-bar button:disabled{opacity:.65}#weapon-switch{width:44px;padding:4px;flex-direction:column;gap:0;background:#11233cdd}#weapon-set{font-size:9px}.badge{position:absolute;right:-4px;top:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#d75f70;color:white;font-size:10px;display:grid;place-items:center}
#sheet-layer{position:absolute;inset:0;z-index:5}#sheet-backdrop{position:absolute;inset:0;background:#02102026;touch-action:none}#sheet{position:absolute;bottom:0;left:4px;right:4px;height:56%;max-height:calc(100% - env(safe-area-inset-top) - 28px);background:var(--panel);display:flex;flex-direction:column;padding:0 3px calc(env(safe-area-inset-bottom) + 5px);overflow:hidden}#sheet.tall{height:74%}#sheet.chat-sheet{height:62%}.sheet-heading{display:flex;align-items:center;gap:8px;padding:4px 8px 0;flex-shrink:0;min-height:48px}.sheet-heading h2{flex:1;font-size:15px}.sheet-heading button{background:transparent;border:0;padding:6px}.sheet-heading #sheet-close{font-size:28px;line-height:1}.panel-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:4px 8px 9px;border-bottom:1px solid var(--edge);flex-shrink:0}.panel-tabs button{padding:8px 2px;font-size:13px}.sheet-scroll{overflow:auto;overscroll-behavior:contain;min-height:0;flex:1;padding:12px;scrollbar-width:thin;scrollbar-color:#7996b8 transparent;touch-action:pan-y}.sheet-scroll>section{min-height:100%}.bag-summary{display:flex;justify-content:space-between;gap:6px;align-items:center;margin-bottom:12px;font-size:12px}.inventory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.item-cell{min-width:0;padding:6px 3px;aspect-ratio:1;position:relative;flex-direction:column;gap:2px;background:#0d2039;border-color:#516a90;justify-content:center}.item-cell .item-icon{display:flex}.item-cell small{font-size:10px;color:#d0deef;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}.item-cell .count{position:absolute;right:5px;top:3px;font-size:10px;color:var(--gold)}.item-cell .equipped{position:absolute;left:3px;top:3px;color:var(--cyan);font-size:9px}.item-icon{color:#bce0ee;display:inline-flex;align-items:center;justify-content:center}.item-icon .icon{width:30px;height:30px}.kind-potion{color:#ff7189}.kind-ether{color:#57c9ff}.kind-oil,.kind-wood,.kind-battery{color:#f0c276}.empty-slot{border:1px solid #233954;aspect-ratio:1;background:#08172a88}.detail-hero{display:flex;gap:16px;align-items:center;padding:10px 0 18px;border-bottom:1px solid var(--line)}.detail-hero>.item-icon{border:1px solid var(--edge);width:76px;height:76px;background:#122a43}.detail-hero .icon{width:48px;height:48px}.detail-hero h3{margin:0 0 5px;font-size:18px}.detail-hero h3:after{display:none}.detail-stats{margin:12px 0}.detail-stats>div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:8px 0}.detail-stats dt{color:var(--muted)}.detail-stats dd{margin:0}.detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.detail-actions button{flex:1}.character-hero{display:flex;align-items:center;gap:14px;margin-bottom:16px}.character-hero>.icon{width:52px;height:62px;border:1px solid var(--edge);padding:7px}.character-hero h3{margin:0 0 4px}.equipment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.equipment-grid button{display:flex;flex-direction:column;min-width:0;font-size:11px;padding:6px 2px;gap:5px}.equipment-grid small{font-size:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.equipment-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}.equipment-row>strong{margin-left:auto}.equipment-row>button{padding:5px 8px}.row-actions,.actions{display:flex;gap:8px;flex-wrap:wrap}.row-actions button{font-size:12px;padding:8px}.inline-form{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin:16px 0}.inline-form label{flex:1;min-width:0}.inline-form input{width:100%}form label{display:grid;gap:6px}.item-list{list-style:none;padding:0;margin:0}.item-list li{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}.item-list li>div{min-width:0}.item-list small{display:block}.item-list button{font-size:12px;padding:8px;flex-shrink:0}.item-list .row-actions{justify-content:flex-end}.loadout-form{padding:0 0 20px;border-bottom:1px solid var(--line)}.skill-selects{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.range-label{display:flex;justify-content:space-between}.range-label output{color:var(--cyan);font-size:18px}.priority-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}.priority-row strong{flex:1}.priority-row button{padding:5px}.supply-options>label{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);gap:8px;min-height:62px}.supply-options small{display:block}.service-tabs{display:flex;gap:4px;overflow-x:auto;margin:0 0 12px;padding-bottom:6px}.service-tabs button{font-size:12px;padding:6px 10px;flex:1;white-space:nowrap}.subtabs{display:flex;gap:8px;margin-bottom:12px}.subtabs button{flex:1}.two-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10px}.two-columns .inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.two-columns .item-cell small{font-size:9px}.cart-list{min-width:0}.cart-item{padding:8px 0;border-bottom:1px solid var(--line);font-size:12px}.cart-item strong{display:block}.cart-item input{width:64px}.cart-item .row-actions{gap:4px;margin-top:6px}.sticky-footer{position:sticky;bottom:-12px;background:#0a1b30;padding:12px 0 4px;border-top:1px solid var(--edge);margin-top:14px;z-index:1}.sticky-footer button{width:100%}.sticky-footer p{display:flex;justify-content:space-between}.repair-list button{width:100%;justify-content:flex-start;margin-bottom:6px;text-align:left}.repair-list small{display:block}.repair-preview{border:1px solid var(--line);padding:10px;align-self:start}.repair-preview .item-icon{display:flex;justify-content:center;padding:12px}.repair-preview .primary{width:100%;padding:8px 3px;font-size:12px}.warehouse-columns{grid-template-columns:1fr 1fr}.warehouse-columns h3{font-size:13px}.quantity-form{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin-top:12px}.quantity-form label{flex:1}.offer-grid{display:flex;flex-direction:column;gap:10px}.offer-grid>div{border:1px solid var(--line);padding:12px}.offer-grid p{font-size:12px;margin-bottom:0}.offer-grid ul{padding-left:18px}.trade-items{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.trade-items label{font-size:12px}.trade-items input{width:100%}#trade-actions{position:sticky;bottom:-12px;background:#0a1b30;padding:12px 0;z-index:1}#trade-actions button{flex:1}#nearby-body li{flex-direction:column;align-items:flex-start}.chat-sheet .sheet-scroll{padding:0 12px;overflow:hidden}.chat-panel{height:100%;display:flex;flex-direction:column;min-height:0}.chat-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding-bottom:9px;flex-shrink:0}.chat-tabs button{padding:7px 1px;font-size:12px}#chat-log{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;font-size:13px;overflow-wrap:anywhere;padding:0 4px}#chat-log p{margin:0;padding:10px 0;border-bottom:1px solid #233954}#chat-log time{font-size:10px;color:var(--muted);margin-right:6px}#chat-log strong{color:var(--cyan)}#chat-log .message-text{display:block;margin-top:3px}.chat-form{border-top:1px solid var(--line);padding:10px 0 4px;flex-shrink:0}.chat-form label{margin-bottom:8px}.chat-compose{display:flex;gap:8px}.chat-compose input{width:0;flex:1}.chat-compose button{padding:8px 12px}.notice{position:absolute;z-index:12;left:16px;right:16px;top:calc(env(safe-area-inset-top) + 166px);margin:0;background:#0a1b30f5;border-left:3px solid var(--gold);padding:10px 12px;box-shadow:0 4px 12px #0005;font-size:13px;pointer-events:none}.notice:empty{display:none}.death-card{position:absolute;z-index:3;top:35%;left:20px;right:20px;background:var(--panel);padding:24px 18px;text-align:center}.death-card h2{font-size:18px}.death-card .primary{width:100%}.login-card{position:absolute;left:24px;right:24px;top:50%;transform:translateY(-50%);background:#0a1b30f2;padding:28px;z-index:3}.login-emblem{font-size:48px;color:var(--cyan)}.login-card .eyebrow{font-size:14px;color:var(--muted)}.login-card h1{font-size:32px;line-height:1.35;letter-spacing:2px;margin:12px 0 20px;font-weight:600}.login-card p{font-size:13px;color:var(--muted)}.login-card .actions{flex-direction:column}.login-card .primary{width:100%}.login-card>small{display:block;margin-top:24px}#rotate-hint{display:none;position:absolute;inset:0;z-index:30;background:#091629;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px}#rotate-hint .icon{width:48px;height:48px;margin-bottom:24px;color:var(--cyan)}
@media(max-height:500px) and (orientation:landscape) and (pointer:coarse){#rotate-hint{display:flex}}
@media(prefers-reduced-motion:no-preference){#sheet{animation:sheet-in .15s ease-out}@keyframes sheet-in{from{transform:translateY(14px);opacity:.7}to{transform:translateY(0);opacity:1}}}
.hud-top{pointer-events:auto}.item-cell .durability{position:absolute;left:5px;right:5px;bottom:3px;height:2px;background:#263b50}.durability i{height:100%;display:block;background:#8dcab7}.quality-fine{border-color:#70c9b3}.quality-rare{border-color:#a997ed}.equipment-grid+.row-actions{margin-top:12px}
/* V3 reference geometry. Widths follow the drawings; 44px hit targets remain. */
#game{container-type:inline-size}.connection-line{opacity:.8;top:calc(env(safe-area-inset-top) + 3px);font-size:9px}.connection-line #population{display:none}.hud-top{inset:0;pointer-events:none}.player-hud{position:absolute;left:4%;top:max(calc(env(safe-area-inset-top) + 30px),5%);width:54%;gap:3cqw;align-items:center}.portrait{width:14cqw;height:14cqw;min-height:44px;background:#173247}.portrait .icon{width:9cqw;height:9cqw}.vitals{padding:0}.vitals>strong{font-size:16px;margin:0 0 5px;line-height:1.2}.resource>span{font-size:12px}.meter{height:13px}.meter small{font-size:9px}.map-hud{position:absolute;right:3.5%;top:max(calc(env(safe-area-inset-top) + 30px),5%);width:22%;height:22cqw;padding:4px;background:#071b33c9}.map-hud svg{width:100%;height:100%;background:#11273fcc}.map-chip{position:absolute;top:max(env(safe-area-inset-top),1.7%);left:37%;width:32%;min-height:29px;display:flex;align-items:center;justify-content:center;gap:6px;background:#071b33d9;padding:4px;font-size:11px;white-space:nowrap;pointer-events:auto}.map-chip label{position:absolute;inset:-7px 0}.map-chip select{width:100%;height:100%;min-height:44px;opacity:0;cursor:pointer}.world-utilities{top:17%;left:4%;opacity:.85}.world-utilities button{width:44px;height:44px;background:#091b30bd}.hud-bottom{bottom:4.5%;padding:0 3.5%;background:none}.hud-tools{grid-template-columns:44px minmax(44px,1fr) 1.9fr 1.9fr 44px;gap:7px;align-items:center;margin-bottom:16px}.hud-tools button{min-height:44px;height:44px;padding:4px;font-size:15px;flex-direction:row;border-color:var(--edge);box-shadow:inset 0 0 0 2px #11253f}.hud-tools .icon{width:28px;height:28px}.hud-tools #menu-button{flex-direction:column;gap:0;font-size:10px}.hud-tools #menu-button .icon{width:22px;height:22px}.hud-tools #weapon-switch{min-width:44px;justify-self:center;width:44px;background:#0a1b31ab;flex-direction:column;border-color:#536c88;gap:0}.hud-tools #weapon-switch .icon{width:20px;height:20px}.hud-tools #light-button{gap:4px;font-size:13px}#fuel-label{display:block;color:var(--cyan);font-size:11px;line-height:1.2}.combat-row{padding-bottom:20px}.skill-bar{gap:8px}.skill-bar button{aspect-ratio:1;position:relative;border:2px solid #b9cdef;box-shadow:inset 0 0 0 3px #123656;background:#05182fe6;overflow:visible}.skill-bar .icon{width:9cqw;height:9cqw}.skill-bar button>.skill-label{position:absolute;top:calc(100% + 6px);white-space:nowrap;color:#ecf4ff;font-size:12px;line-height:1;text-shadow:0 1px 3px #000}.skill-bar button:first-child{border-color:#b9cdef}.skill-bar button:disabled{opacity:.6}.skill-bar button .cooldown{font-size:24px}.hud-bottom #activity-state{font-size:11px;min-height:0}.hud-bottom #activity-state:empty{display:none}
#sheet{left:1.5%;right:1.5%;bottom:1.5%;height:57%;padding-bottom:4px}.sheet-open .hud-bottom,.sheet-open .world-utilities{visibility:hidden}.sheet-heading{height:52px;min-height:52px;padding:6px 10px}.sheet-heading h2{font-size:18px}.sheet-heading #sheet-close{border:1px solid var(--edge);background:#0a1b31;font-size:32px;min-width:44px;padding:0}.panel-tabs{order:-1;padding:9px 48px 0 8px;gap:3px;min-height:54px}.panel-tabs button{font-size:12px;border-radius:3px 3px 0 0;min-width:0;padding:5px 0}.panel-tabs button .icon{width:15px;height:15px}.sheet-heading:has(+.panel-tabs:not([hidden])){position:absolute;top:5px;right:4px;height:44px;min-height:44px;padding:0}.sheet-heading:has(+.panel-tabs:not([hidden])) h2{display:none}.sheet-scroll{padding:12px;scrollbar-width:thin}.bag-summary{margin:0 0 12px;min-height:30px;flex-wrap:wrap;gap:4px}.bag-summary h2{font-size:20px;display:flex;align-items:center;gap:5px}.bag-summary h2 .icon{width:26px;height:26px}.bag-summary .gold{font-size:11px}.bag-summary>span{margin-left:auto;font-size:11px}.inventory-grid{gap:9px}.item-cell{border:1px solid #8ca4c6;background:#091a30;box-shadow:inset 0 0 0 2px #0e2842}.item-cell .item-icon .icon{width:10cqw;height:10cqw}.item-cell .count{top:auto;bottom:5px;right:5px;font-size:12px}.item-cell small{font-size:9px;position:absolute;bottom:6px;left:4px;right:15px;text-align:left;opacity:.85}.item-cell>.item-icon{margin-bottom:9px}.item-cell .durability{bottom:2px}.empty-slot{border:1px solid #6784a4;background:#08172aaa}.inventory-grid+p.help{border-top:1px solid var(--edge);margin-top:14px;padding-top:10px}.item-cell:before,.item-cell:after{content:'';position:absolute;width:5px;height:5px;border:2px solid #d2e0f5;pointer-events:none}.item-cell:before{left:0;top:0;border-right:0;border-bottom:0}.item-cell:after{right:0;bottom:0;border-left:0;border-top:0}
#sheet[data-view=detail]{height:56.5%;bottom:2.5%}#sheet[data-view=detail] .sheet-heading h2{display:none}#sheet[data-view=detail] #sheet-close{margin-left:auto}#detail-back{border:1px solid var(--edge);padding:4px 12px;min-height:38px;font-size:15px}.detail-hero{align-items:flex-start;padding:6px 0 18px;gap:16px}.detail-hero>.item-icon{width:28cqw;height:26cqw;flex-shrink:0;border-color:var(--cyan)}.detail-hero .icon{width:18cqw;height:18cqw}.detail-hero h3{font-size:23px}.detail-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 0}.detail-stats>div{flex-direction:column;gap:6px;align-items:center;border:0;border-right:1px solid var(--line);padding:0 5px}.detail-stats dt{font-size:12px}.detail-stats dd{font-size:16px}.detail-actions{position:sticky;bottom:-12px;background:#081a30;padding:8px 0}.detail-actions button{min-height:52px;font-size:18px}#sheet[data-view=auto]{height:65%;bottom:2%}#sheet[data-view=auto] .sheet-scroll{padding-top:18px}#sheet.tall{height:64.5%;bottom:1.5%}#sheet[data-view=town][data-service=warehouse]{height:69%}#sheet[data-view=social]{height:79%;bottom:1.5%}#sheet.chat-sheet{height:52.5%;bottom:3.5%}.chat-sheet .sheet-heading{position:absolute;right:5px;top:5px;min-height:44px;height:44px;padding:0}.chat-sheet .sheet-heading h2{display:none}.chat-sheet .sheet-scroll{padding:8px 9px}.chat-tabs{padding-right:46px;padding-bottom:8px;gap:3px;min-height:50px}.chat-tabs button{font-size:13px}.chat-form{padding-top:9px}#chat-log{font-size:13px}#chat-log .message-text{display:inline;margin-left:7px}#chat-log p{padding:8px 4px;line-height:1.6;border:0}#chat-log p:nth-child(even){background:#04142880}#chat-log time{font-size:10px}.chat-compose input{min-height:46px}.chat-compose button{font-size:16px}.service-tabs{position:sticky;top:-12px;z-index:2;background:#081a30;padding:6px 0;gap:4px;border-bottom:1px solid var(--edge)}.two-columns{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}.warehouse-columns{grid-template-columns:1fr 1fr}.two-columns>div{border:1px solid var(--line);padding:7px}.two-columns .item-cell .item-icon .icon{width:8cqw;height:8cqw}.two-columns .item-cell small{display:none}.two-columns .item-cell>.item-icon{margin-bottom:0}.repair-list button{padding:6px;font-size:12px;min-height:66px}.offer-grid>div{border-color:#6e91b6;box-shadow:inset 2px 0 var(--cyan);padding:12px}.offer-grid h3{font-size:18px}
@media(max-height:560px){#sheet.chat-sheet{height:85%;bottom:0}#sheet{max-height:calc(100% - 12px)}.chat-tabs{min-height:44px}.chat-tabs button{min-height:44px}.chat-form{padding-top:4px}.chat-form label{margin-bottom:4px}}
.character-utilities{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.character-utilities button{position:relative;font-size:12px}.character-utilities .badge{right:0}#sheet[data-view=town] .sheet-heading{position:absolute;top:7px;right:5px;z-index:4;height:44px;min-height:44px;padding:0}#sheet[data-view=town] .sheet-heading h2{display:none}#sheet[data-view=town] .service-tabs{padding-right:46px;padding-top:0;min-height:50px;margin-bottom:10px}#sheet[data-view=town] .service-tabs button{font-size:15px}#sheet[data-view=town] #town-interaction:not(:has(.sr-only)){padding-right:45px}.sticky-footer [data-cart-clear]{margin-top:6px;background:transparent;font-size:12px}
.hud-tools{grid-template-columns:44px 1fr 1.9fr 1.9fr 44px}.hud-tools #chat-button{grid-column:1}.hud-tools #auto-button{grid-column:3}.hud-tools #light-button{grid-column:4}.hud-tools #menu-button{grid-column:5}.weapon-control{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding-bottom:12px}.weapon-control #weapon-switch{width:auto;min-height:44px;flex-direction:row;padding:8px 12px;font-size:13px}.panel-tabs button{gap:3px;font-size:12px}.panel-tabs button .icon{width:14px;height:14px}
#sheet[data-view=character]{height:58%}.character-hero{gap:10px;margin-bottom:8px}.character-hero>.icon{height:54px}.character-hero p{margin:3px 0}.equipment-row{padding:0;min-height:44px}.equipment-row>button{height:44px;min-height:44px}#character-body h3{margin:10px 0 6px}#character-body>p.help{margin:6px 0;line-height:1.5}.equipment-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.equipment-grid button{padding:3px 1px;gap:2px;min-height:63px;font-size:10px}.equipment-grid button .icon{width:22px;height:22px}.equipment-grid button small{font-size:9px}
#sheet[data-view=auto] .sheet-scroll{padding:8px 12px}#sheet[data-view=auto] h3{margin:8px 0 6px}#sheet[data-view=auto] .priority-row{padding:0;min-height:44px}#sheet[data-view=auto] .priority-row button{min-height:44px;height:44px}#sheet[data-view=auto] .help{font-size:11px;margin:4px 0;line-height:1.4}#sheet[data-view=auto] .supply-options>label{min-height:51px;padding:8px 0}#sheet[data-view=auto] .supply-options small{font-size:10px}.range-label{align-items:center}#auto-radius{margin:0}
.offer-grid>section{border:1px solid #6e91b6;box-shadow:inset 2px 0 var(--cyan);padding:10px}.offer-grid h3{margin:0 0 8px;font-size:17px}.trade-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.trade-slot{aspect-ratio:1.2;min-width:0;background:#13263e;border:1px solid #516a90;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative}.trade-slot.empty-slot{color:#8aa4c4;font-size:28px}.trade-slot small{font-size:9px;line-height:1.3;text-align:center}.trade-slot .icon{width:24px;height:24px}.offer-gold{display:flex;justify-content:space-between;align-items:center;padding:9px;margin-top:8px;border:1px solid var(--line)}.offer-state{background:#20354b;color:#c3d4eb;text-align:center;padding:8px;margin:8px 0 0;font-size:12px}#trade-edit summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center;color:var(--cyan);font-size:13px}#trade-edit[open] summary{border-bottom:1px solid var(--line)}#trade-form{padding-top:10px}.offer-grid>section h3:after{display:none}
/* Comfortable tabs scroll independently; closing is outside the panel. */
#sheet{overflow:visible}.tab-navigation{display:flex;align-items:stretch;gap:3px;padding:8px 7px 0;border-bottom:1px solid var(--edge);flex-shrink:0;order:-1;min-height:60px;background:#081a30}.tab-navigation>button{min-width:44px;width:44px;align-self:center;padding:0;font-size:26px;background:transparent;border:0}.tab-navigation>button:disabled{opacity:.2}.tab-navigation:not(.overflowing)>button{display:none}.tab-navigation .panel-tabs{display:flex;overflow-x:auto;scrollbar-width:none;scroll-behavior:auto;flex:1;min-width:0;min-height:50px;gap:6px;padding:0;border:0;order:0;overscroll-behavior-x:contain;touch-action:pan-x}.panel-tabs::-webkit-scrollbar{display:none}.tab-navigation .panel-tabs button{flex:0 0 86px;width:86px;font-size:15px;min-height:48px;gap:6px;padding:7px 8px}.tab-navigation .panel-tabs .icon{width:19px;height:19px}.sheet-heading{position:static;height:auto;min-height:0;padding:0 12px;flex-shrink:0}.sheet-heading h2{display:none}#sheet .sheet-heading #sheet-close{position:absolute;right:0;top:-52px;width:44px;height:44px;min-height:44px;z-index:6;background:#081a30;border:1px solid var(--edge);box-shadow:inset 0 0 0 2px #16304d}#sheet[data-view=town] .sheet-heading,#sheet.chat-sheet .sheet-heading{position:static;min-height:0;height:0;padding:0}#sheet[data-view=town] .service-tabs{padding-right:0}#sheet.chat-sheet .chat-tabs{padding-right:0}#sheet[data-view=detail] .sheet-heading{padding-top:10px;min-height:44px}#sheet[data-view=detail] #detail-back{min-height:44px}#sheet[data-view=social] .sheet-heading h2{display:block;padding:14px 0 0}#sheet[data-view=town]:not(:has(#npc-tabs[hidden])) #town-interaction{margin:0}#sheet{max-height:calc(100% - env(safe-area-inset-top) - 62px)}
#confirm-dialog{width:calc(100% - 40px);max-width:350px;padding:24px 20px;background:#081a30;color:var(--ink,#e8efff);overflow:visible;position:fixed;border:1px solid var(--edge);margin:auto}#confirm-dialog::backdrop{background:#030c19a8}#confirm-dialog h2{font-size:18px}#confirm-dialog p{font-size:14px;line-height:1.8;margin:16px 0 20px}#confirm-dialog .row-actions{justify-content:flex-end}#confirm-dialog .row-actions button{flex:1}#confirm-close{position:absolute;right:0;top:-52px;width:44px;height:44px;padding:0;font-size:32px;background:#081a30;border:1px solid var(--edge)}
.notice{max-height:110px;overflow:auto;font-size:12px}

/* NPC navigation sits outside the scrolling service content. */
#town-chrome{flex:none;padding:5px 8px 0;background:#081a30;border-bottom:1px solid var(--line)}
#sheet[data-view=town] #town-chrome .service-tabs{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;min-height:0;margin:0;padding:0 0 6px;overflow:visible;border:0}
#sheet[data-view=town] #town-chrome .service-tabs button{min-width:0;min-height:44px;padding:5px 2px;font-size:15px;gap:5px}
#town-chrome .icon{width:19px;height:19px}
#sheet[data-view=town] #town-chrome .subtabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0;padding:0 0 7px}
#sheet[data-view=town] #town-chrome .subtabs button{min-width:0;min-height:43px;font-size:15px}
#sheet[data-view=town][data-service=shop][data-npc-ready=true] .sheet-scroll{overflow:hidden;padding:7px 8px 9px}
#sheet[data-view=town][data-service=shop][data-npc-ready=true] [data-panel-body=town],
#sheet[data-view=town][data-service=shop][data-npc-ready=true] [data-service-body=shop],
#sheet[data-view=town][data-service=shop][data-npc-ready=true] #shop-body{display:flex;flex-direction:column;min-height:0;height:100%}
#shop-body{min-width:0}
.shop-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:6px;flex:1;min-height:0}
.shop-column{display:flex;flex-direction:column;min-width:0;min-height:0;border:1px solid var(--edge);background:#07172a;padding:5px}
.shop-column-heading{display:flex;justify-content:space-between;align-items:center;gap:3px;min-width:0;min-height:34px;padding:0 2px 5px;border-bottom:1px solid var(--line)}
.shop-column-heading strong{font-size:15px;white-space:nowrap}.shop-column-heading small{font-size:10px;white-space:nowrap}
.shop-column-scroll{min-height:0;flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#617b9c transparent;padding-top:6px;touch-action:pan-y}
.shop-bag-grid,.shop-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;align-content:start}
.shop-bag-grid .item-cell{width:100%;min-width:0;aspect-ratio:1;padding:2px}.shop-bag-grid .item-cell small{display:none}.shop-bag-grid .item-cell>.item-icon{margin:0}.shop-bag-grid .item-cell .item-icon .icon{width:26px;height:26px}.shop-bag-grid .item-cell .count{font-size:11px;bottom:2px}
.shop-product{min-width:0;min-height:80px;display:flex;flex-direction:column;gap:2px;padding:4px 2px;text-align:center}.shop-product .item-icon{height:30px}.shop-product .item-icon .icon{width:25px;height:25px}.shop-product strong{max-width:100%;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shop-product small{font-size:10px;white-space:nowrap}
.shop-line{display:flex;align-items:flex-start;gap:5px;min-width:0;padding:8px 0;border-bottom:1px solid var(--line)}.shop-line>.item-icon{flex:none;width:30px;height:30px;border:1px solid var(--line);display:grid;place-items:center}.shop-line>.item-icon .icon{width:24px;height:24px}.shop-line-main{min-width:0;flex:1}.shop-line-main strong{font-size:12px;line-height:1.2;overflow-wrap:anywhere}.shop-line-main small{display:block;font-size:10px;line-height:1.3;white-space:nowrap}.shop-line-main small b{color:var(--gold)}
.shop-quantity{display:flex;align-items:center;gap:1px;margin:5px 0}.shop-quantity button{min-width:28px;width:28px;min-height:32px;height:32px;padding:0;font-size:20px}.shop-quantity input,.shop-quantity label input{width:39px;min-width:0;min-height:32px;height:32px;padding:1px;text-align:center;font-size:14px;appearance:textfield}.shop-quantity input::-webkit-inner-spin-button,.shop-quantity input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.shop-quantity label{min-width:0}.shop-remove{min-width:26px;width:26px;min-height:32px;height:32px;padding:0;font-size:22px;flex:none}
.shop-selected{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 1px;border-bottom:1px solid var(--line);text-align:center}.shop-selected>.item-icon .icon{width:43px;height:43px}.shop-selected strong{font-size:13px}.shop-selected small{font-size:11px}.shop-qty-label{display:block;margin-top:12px;font-size:12px}.shop-selection .shop-quantity{justify-content:center}
.shop-footer{flex:none;border-top:1px solid var(--edge);padding:7px 4px 2px;background:#091b32}.shop-footer .shop-hint{color:#f4b95c;font-size:11px;line-height:1.35;margin:0 0 6px}.shop-total{display:flex;justify-content:space-between;align-items:center;padding:5px 0 8px;border-top:1px solid var(--line);font-size:14px}.shop-total strong{font-size:19px;color:#ffd15c}.shop-footer-actions{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:5px}.shop-footer button{min-height:43px}.shop-footer>button{width:100%}.shop-footer small{display:block;font-size:10px;line-height:1.4;margin-top:5px}
@media(max-height:700px){#sheet.tall{height:70%}.shop-product{min-height:70px}.shop-footer small{display:none}}

/* Every main menu page keeps the same outer frame; only its contents scroll. */
#sheet[data-view=inventory],#sheet[data-view=character],#sheet[data-view=skills],#sheet[data-view=quests],#sheet[data-view=auto]{height:65%;bottom:1.5%}
#sheet[data-view=settings]{left:50%;right:auto;top:50%;bottom:auto;width:min(90%,340px);height:315px;transform:translate(-50%,-50%);animation:none;background:#081a30}
#sheet[data-view=settings] .sheet-heading{min-height:44px;padding:10px 12px 0}
#sheet[data-view=settings] .sheet-heading h2{display:block}
#sheet[data-view=settings] #logout{width:100%;margin-top:18px}
.settings-portrait{width:56px;height:66px;margin:0 auto 8px;display:grid;place-items:center;background:#142c40}.settings-portrait .icon{width:38px;height:38px;color:#bde5e7}
.auto-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border:1px solid var(--edge);background:#102a42}.auto-toggle span{display:grid;gap:2px}.auto-toggle small{display:block}
.tab-navigation .panel-tabs button{flex-basis:64px;width:64px;font-size:12px;padding:6px 2px;gap:3px}
.tab-navigation .panel-tabs .icon{width:17px;height:17px}
.shop-footer{display:flex;align-items:center;gap:7px;min-height:52px;padding:4px 5px}.shop-footer .shop-total{flex:1;display:flex;align-items:center;gap:5px;justify-content:flex-start;border:0;padding:0;font-size:11px;white-space:nowrap}.shop-footer .shop-total strong{font-size:15px}.shop-footer>button{width:auto;min-width:77px;min-height:42px}.shop-footer .shop-footer-actions{display:flex;gap:4px}.shop-footer .shop-footer-actions button{min-height:42px;min-width:50px;padding:5px 7px;font-size:12px}
.quest-buttons{display:flex;flex-direction:column;gap:5px;flex:none}.quest-buttons button{min-height:38px;padding:5px 8px}
.skill-level-list li{align-items:center}.skill-level-list li>div{flex:1}

/* Five equal, reachable HUD actions stay fixed while a sheet is open. */
.hud-tools{grid-template-columns:repeat(5,minmax(44px,48px));justify-content:space-between;gap:0}
.hud-tools #chat-button,.hud-tools #auto-button,.hud-tools #light-button,.hud-tools #torch-button,.hud-tools #menu-button{grid-column:auto;width:100%;min-width:44px;height:48px;min-height:48px;justify-content:center;padding:3px}
.hud-tools :is(#auto-button,#light-button,#torch-button,#menu-button) .icon{width:27px;height:27px}
.hud-tools .hud-count{position:absolute;right:-4px;bottom:-5px;min-width:19px;min-height:17px;display:grid;place-items:center;padding:1px 3px;border:1px solid #9bc7dd;background:#0a2138;color:#fff7d9;font-size:9px;line-height:1;white-space:nowrap;pointer-events:none}
.hud-tools #torch-button:disabled{opacity:.58}
.shop-fixed-quantity{margin:10px 0 0;text-align:center;font-size:12px;color:var(--muted)}
.shop-money{flex:1;min-width:0;display:flex;flex-wrap:wrap;column-gap:9px;row-gap:1px;font-size:11px;line-height:1.3}
.shop-money span{white-space:nowrap}.shop-money small{display:inline;margin-left:3px}
.shop-forecast{flex-basis:100%;color:#c7d9e6}.shop-forecast.warning{color:#ffb49d}
.transaction-preview{display:flex;flex-wrap:wrap;gap:5px 12px;margin:7px 0;font-size:12px;color:#c9d7e9}
.transaction-preview .warning{color:#ffb49d}
.skill-level-list .skill-facts{display:block;white-space:normal;font-size:11px;line-height:1.35;color:#cbd9e8}
.character-derived{margin:-8px 0 12px;padding:6px 8px;border:1px solid var(--line);background:#0a2238a8;color:#e1edf1;font-size:12px}
.transaction-preview.warning{color:#ffb49d}
.chat-party-link{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;flex:none;padding:0 3px;border-bottom:1px solid var(--line);font-size:11px;color:#d1e3e9}
.chat-party-link button{min-height:40px;padding:5px 10px;font-size:12px}
#warehouse-body .sticky-footer{margin-top:6px;padding:6px 2px 3px}
#warehouse-body .quantity-form{flex-wrap:nowrap;align-items:end;margin-top:4px;gap:6px}
#warehouse-body .quantity-form label{flex:0 0 74px;font-size:11px}
#warehouse-body .quantity-form input{width:100%;min-width:0;min-height:40px}
#warehouse-body .quantity-form button{flex:1;min-width:0;min-height:40px;padding:4px 2px;font-size:12px}
#warehouse-body .transaction-preview{margin:4px 0 0;font-size:10px}
.interact-action{position:absolute;right:12px;bottom:190px;z-index:3;display:flex;align-items:center;gap:5px;min-width:72px;min-height:48px;padding:5px 8px;background:#081a30e8}.interact-action .icon{width:20px;height:20px}.interact-action strong{font-size:12px}.sheet-open .interact-action{visibility:hidden}

/* NPC tabs keep their width; arrows appear only when the complete row cannot fit. */
#npc-navigation{display:flex;align-items:center;gap:3px;min-width:0;padding-bottom:6px}
#npc-navigation>button{flex:none;width:40px;min-width:40px;height:44px;min-height:44px;padding:0;font-size:24px;background:#10243c}
#npc-navigation:not(.overflowing)>button{display:none}
#npc-navigation>button:disabled{opacity:.3}
#sheet[data-view=town] #town-chrome #npc-tabs.service-tabs{display:flex;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;gap:5px;padding:0;margin:0;border:0}
#npc-tabs::-webkit-scrollbar{display:none}
#sheet[data-view=town] #town-chrome #npc-tabs.service-tabs button{flex:0 0 88px;width:88px;min-width:88px;min-height:44px;padding:5px 3px;white-space:nowrap}